feat: useResponsive useBreakPoint

d2/components/d2/break-point/index.vue

@@ -7,6 +7,7 @@ import { unref, reactive, defineComponent, computed } from 'vue'
 import { mapValues } from 'lodash-es'
 import { makeName } from 'd2/utils/component.js'
 import { useBreakPoint } from 'd2/use/break-point.js'
+import { useResponsive } from 'd2/use/responsive.js'
 
 const name = 'break-point'
 
@@ -28,18 +29,24 @@ export default defineComponent({
     //   on xl status:
     //     { foo: 'foo md', bar: 'bar lg' }
     data: { type: Object, default: () => ({}) },
-    breakPoints: { type: Object, default: () => ({}) }
+    breakPoints: { type: Object }
   },
   setup (props) {
-    const breakPoint = useBreakPoint(props.breakPoints)
+    const state = useBreakPoint(props.breakPoints)
 
-    const { responsive } = breakPoint
-
-    const data = mapValues(props.data, (_, k) => unref(responsive(...props.data[k])))
+    const responsiveData = computed(
+      () => mapValues(
+        props.data,
+        (_, k) => {
+          const [data, dataSet = {}] = props.data[k]
+          return unref(useResponsive(data, dataSet, state))
+        }
+      )
+    )
 
     const scope = computed(() => ({
-      ...reactive(breakPoint),
-      data
+      ...reactive(state),
+      data: unref(responsiveData)
     }))
     
     return {

d2/components/demo/break-point-display.vue

@@ -5,11 +5,11 @@
 <template>
   <h1 class="title">{{ status.breakPoint }}</h1>
   <d2-flex class="main" center>
-    <demo-break-points-display-item
+    <demo-break-point-display-item
       :value="status.min"
       name="min"
     />
-    <demo-break-points-display-item
+    <demo-break-point-display-item
       v-for="name in breakPointsName"
       :key="name"
       :value="status[name]"

d2/use/break-point.js

@@ -1,8 +1,7 @@
 import { unref, computed } from 'vue'
-import { keys, values, mapValues, invert } from 'lodash-es'
+import { values, mapValues, invert, isEmpty } from 'lodash-es'
 import { useWindowSize } from 'd2/use/window-size.js'
 import { useConfig } from 'd2/components/d2/config/use.js'
-import { breakPoints } from 'd2/utils/const/break-point.js'
 
 /**
  * Get breakpoint status
@@ -17,45 +16,25 @@ export function useBreakPoint (breakPointsParam) {
 
   const { breakPoints: breakPointsConfig } = useConfig()
   
-  const _points = Object.assign(
+  const breakPoints = Object.assign(
     {},
-    breakPoints,
-    breakPointsConfig,
-    breakPointsParam,
+    breakPointsParam || breakPointsConfig,
     { min: 0 }
   )
 
-  const widths = values(_points).sort((a, b) => a - b)
-  const dict = invert(_points)
+  const widths = values(breakPoints).sort((a, b) => a - b)
+  const breakPointsDict = invert(breakPoints)
 
   const activeWidth = computed(() => widths.reduce((r, e) => unref(width) >= e ? e : r, 0))
-  const activeName = computed(() => dict[unref(activeWidth)])
+  const activeName = computed(() => breakPointsDict[unref(activeWidth)])
 
-  const status = mapValues(_points, (v, k) => computed(() => unref(activeName) === k))
-
-  /**
-   * match data based on size
-   * @param {*} data default data
-   * @param {*} dataSet set of datas matched by size
-   * @returns a matched data
-   */
-  function responsive (data, dataSet = {}) {
-    return computed(() => {
-      const activeName = dict[
-        Math.max(
-          ...keys(dataSet)
-            .map(k => _points[k])
-            .filter(w => w <= unref(activeWidth))
-        )
-      ]
-      return dataSet[activeName] || data
-    })
-  }
+  const status = mapValues(breakPoints, (v, k) => computed(() => unref(activeName) === k))
 
   return {
-    responsive,
-    width,
+    breakPoints,
+    breakPointsDict,
     active: activeName,
+    activeWidth,
     ...status
   }
 }

d2/use/responsive.js

@@ -0,0 +1,24 @@
+import { computed, unref } from 'vue'
+import { keys } from 'lodash-es'
+import { useBreakPoint } from 'd2/use/break-point.js'
+
+/**
+ * Match data based on size
+ * @param {*} data default data
+ * @param {*} dataSet set of datas matched by size
+ * @returns a matched data
+ */
+export function useResponsive (data, dataSet = {}, state) {
+  const { breakPointsDict, breakPoints, activeWidth } = state || useBreakPoint()
+  const responsiveData = computed(() => {
+    const activeName = breakPointsDict[
+      Math.max(
+        ...keys(dataSet)
+          .map(k => breakPoints[k])
+          .filter(w => w <= unref(activeWidth))
+      )
+    ]
+    return dataSet[activeName] || data
+  })
+  return responsiveData
+}

d2/views/dashboard/demo/component/break-point/base.vue

@@ -5,7 +5,7 @@
 <template>
   <demo-section title="break point">
     <d2-break-point #default="status">
-      <demo-break-points-display :status="status"/>
+      <demo-break-point-display :status="status"/>
     </d2-break-point>
   </demo-section>
 </template>

d2/views/dashboard/demo/component/break-point/data.vue

@@ -6,14 +6,11 @@
   <demo-section title="break point">
     <d2-break-point :data="config" v-slot="status">
       <p class="info">
-        <span
-          class="label"
-          :style="{ backgroundColor: status.data.color }"
-        >
+        <span class="label" :style="{ backgroundColor: status.data.color }">
           {{ status.data.color }}
         </span>
       </p>
-      <demo-break-points-display :status="status"/>
+      <demo-break-point-display :status="status"/>
     </d2-break-point>
   </demo-section>
 </template>