feat: size sensor

d2/components/d2/size-sensor/index.jsx

@@ -1,6 +1,7 @@
 import { defineComponent, getCurrentInstance, onBeforeUnmount, onMounted } from 'vue'
-import { bind, clear } from 'size-sensor'
+import { bind } from 'size-sensor'
 import { makeName } from 'd2/utils/component.js'
+import { getStyle, convertCssUnit } from 'd2/utils/css.js'
 
 const name = 'size-sensor'
 
@@ -11,26 +12,34 @@ export default defineComponent({
   props: {
     tag: { type: String, default: 'div' }
   },
-  setup () {
+  emits: [
+    'resize'
+  ],
+  setup (props, { emit }) {
     const { ctx } = getCurrentInstance()
 
+    let unbind = () => {}
+
     function init () {
       const targetElement = ctx.$el
-      bind(targetElement, element => {
-        console.log(element)
+      unbind = bind(targetElement, element => {
+        const style = getStyle(element)
+        const { height, width } = style
+        emit('resize', {
+          element,
+          style,
+          height: convertCssUnit(height),
+          width: convertCssUnit(width)
+        })
       })
     }
 
-    function destroy () {
-      clear(ctx.$el)
-    }
-
     onMounted(() => {
       init()
     })
 
     onBeforeUnmount(() => {
-      destroy()
+      unbind()
     })
   },
   render () {

d2/utils/css.js

@@ -15,15 +15,12 @@ export function px (value) {
 /**
  * Get element style
  * @param {HTMLElement} element target element
- * @param {string} styleName css prop name
+ * @param {string} name css prop name
  * @returns {*}
  */
-export function getStyle (element, styleName) {
-  if (window.getComputedStyle) {
-    return getComputedStyle(element, null)[styleName]
-  } else {
-    return element.currentStyle[styleName]
-  }
+export function getStyle (element, name) {
+  const style = window.getComputedStyle ? getComputedStyle(element, null) : element.currentStyle
+  return name ? style[name] : style
 }
 
 /**

d2/views/dashboard/demo/component/d2-flex/playground.vue

@@ -1,7 +1,7 @@
 <route>
 {
   "meta": {
-    "d2admin.menu.title": "试验台"
+    "d2admin.menu.title": "试验"
   }
 }
 </route>

d2/views/dashboard/demo/component/d2-size-sensor/base.vue

@@ -1,33 +0,0 @@
-<route>
-{}
-</route>
-
-<template>
-  <section class="bg-gray-100 border border-gray-200 rounded p-4 mb-4">
-    <a-slider v-model:value="height" :min="30" :max="300" />
-  </section>
-  <d2-size-sensor class="border border-indigo-500 rounded">
-    <d2-flex :style="style" center>
-      height: {{ height }}px
-    </d2-flex>
-  </d2-size-sensor>
-</template>
-
-<script>
-import { computed, ref, unref } from 'vue'
-
-export default {
-  setup () {
-    const height = ref(50)
-
-    const style = computed(() => ({
-      height: unref(height) + 'px'
-    }))
-
-    return {
-      height,
-      style
-    }
-  }  
-}
-</script>

d2/views/dashboard/demo/component/d2-size-sensor/playground.vue

@@ -0,0 +1,55 @@
+<route>
+{
+  "meta": {
+    "d2admin.menu.title": "试验"
+  }
+}
+</route>
+
+<template>
+  <a-row :gutter="20">
+    <a-col :span="12">
+      <a-slider v-model:value="height" :min="30" :max="300"/>
+      <p v-for="item in history" :key="item.id" class="mb-2">
+        {{ item.text }}
+      </p>
+    </a-col>
+    <a-col :span="12">
+      <d2-size-sensor @resize="onResize">
+        <div :style="style" class="border border-indigo-500 rounded"/>
+      </d2-size-sensor>
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+import { computed, ref } from 'vue'
+import { px } from 'd2/utils/css.js'
+import { id } from 'd2/utils/id.js'
+
+export default {
+  setup () {
+    const height = ref(50)
+
+    const style = computed(() => ({
+      height: px(height)
+    }))
+
+    const history = ref([])
+
+    function onResize ({ height }) {
+      history.value.unshift({
+        id: id(),
+        text: `[size change] height: ${height}px`
+      })
+    }
+
+    return {
+      height,
+      style,
+      history,
+      onResize
+    }
+  }  
+}
+</script>