feat: cssUnit ref

d2/components/d2/admin/layout/header-aside/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`${classname}__body`" :style="position">
+  <div :class="`${classname}__body`" :style="bodyStyle">
     <d2-scroll class="w-full h-full">
       <slot/>
     </d2-scroll>
@@ -16,7 +16,7 @@
 
 <script>
 import { makeNameByUrl, makeClassNameByUrl } from 'd2/utils/component.js'
-import { computed, ref, unref } from 'vue'
+import { computed, ref } from 'vue'
 import { cssUnit } from 'd2/utils/css.js'
 import { useCssPosition } from 'd2/use/css-position.js'
 
@@ -28,20 +28,20 @@ export default {
     const headerHeight = ref(46)
     const asideWidth = ref(200)
 
-    const { position } = useCssPosition(headerHeight, 0, 0, asideWidth)
+    const { style: bodyStyle } = useCssPosition(headerHeight, 0, 0, asideWidth)
 
     const headerStyle = computed(() => ({
-      height: cssUnit(unref(headerHeight)),
-      left: cssUnit(unref(asideWidth))
+      height: cssUnit(headerHeight),
+      left: cssUnit(asideWidth)
     }))
 
     const asideStyle = computed(() => ({
-      width: cssUnit(unref(asideWidth))
+      width: cssUnit(asideWidth)
     }))
 
     return {
       classname,
-      position,
+      bodyStyle,
       headerStyle,
       asideStyle
     }

d2/use/css-position.js

@@ -1,4 +1,5 @@
 import { ref, computed, unref } from 'vue'
+import { cssUnit } from 'd2/utils/css.js'
 
 export function useCssPosition (t = 0, r = 0, b = 0, l = 0) {
   const top = ref(t)
@@ -6,13 +7,11 @@ export function useCssPosition (t = 0, r = 0, b = 0, l = 0) {
   const bottom = ref(b)
   const left = ref(l)
 
-  const px = refValue => unref(refValue) + 'px'
-
-  const position = computed(() => ({
-    top: px(top),
-    right: px(right),
-    bottom: px(bottom),
-    left: px(left)
+  const style = computed(() => ({
+    top: cssUnit(top),
+    right: cssUnit(right),
+    bottom: cssUnit(bottom),
+    left: cssUnit(left)
   }))
 
   return {
@@ -20,6 +19,6 @@ export function useCssPosition (t = 0, r = 0, b = 0, l = 0) {
     right,
     bottom,
     left,
-    position
+    style
   }
 }

d2/utils/css.js

@@ -1,3 +1,4 @@
+import { unref } from 'vue'
 import { isNumber, isString } from 'lodash-es'
 
 /**
@@ -6,18 +7,21 @@ import { isNumber, isString } from 'lodash-es'
  * @param {string} unit css unit name
  * @returns {string} css value with unit
  * @example cssUnit(0) => '0px'
+ * @example cssUnit(ref(0)) => '0px'
  * @example cssUnit('100%') => '100%'
  * @example cssUnit('50') => '50%'
  * @example cssUnit('2', 'em') => '2em'
  */
 export function cssUnit (value = 0, unit = 'px') {
-  if (isNumber(value)) {
-    return value + unit
+  const _value = unref(value)
+  if (isNumber(_value)) {
+    return _value + unit
   }
-  if (isString(value)) {
-    if (/^\d+(\D+)$/.test(value)) {
-      return value
+  if (isString(_value)) {
+    if (/^\d+(\D+)$/.test(_value)) {
+      return _value
     }
-    return value + unit
+    return _value + unit
   }
+  return ''
 }