feat: refreshSlotStatus

2021-12-11 13:08:28 +08:00 · 2021-12-11 13:08:28 +08:00 · 353d0601e4
parent c51130cff9
commit 353d0601e4
7 changed files with 123 additions and 68 deletions
--- a/d2/components/d2/admin/layout/dashboard/container/index.vue
+++ b/d2/components/d2/admin/layout/dashboard/container/index.vue
@ -8,91 +8,83 @@
      <slot/>
    </div>
  </d2-scroll>
-  <d2-size-sensor class="body__header container__blur" @resize="onHeaderResize">
-    {{ cssVar }}
+  <d2-size-sensor v-if="headerActive" class="body__header container__blur" @resize="onHeaderResize">
    <slot name="header"/>
  </d2-size-sensor>
-  <d2-size-sensor class="body__footer container__blur" @resize="onFooterResize">
+  <d2-size-sensor v-if="footerActive" class="body__footer container__blur" @resize="onFooterResize">
    <slot name="footer"/>
  </d2-size-sensor>
 </template>

 <script>
-import { computed, ref } from 'vue'
+import { computed, onMounted, onUpdated, ref, unref, watchPostEffect } from 'vue'
 import { makeNameByUrl } from 'd2/utils/component.js'
-import { px } from 'd2/utils/css.js'
-import { useCssVar } from 'd2/use/css-var.js'
+import { px, getStyle, convertCssUnit } from 'd2/utils/css.js'
+import { useCssVar } from '@vueuse/core'

 export default {
  name: makeNameByUrl(import.meta.url),
  setup (props, { slots }) {
+    const cssVarHeaderHeight = computed(() => convertCssUnit(useCssVar('--d2-admin-layout-dashboard-header-height')))
+    const cssVarHeaderBorderWidth = computed(() => convertCssUnit(useCssVar('--d2-admin-layout-dashboard-header-border-width')))
+    const cssVarBodyMainPaddingY = computed(() => convertCssUnit(useCssVar('--d2-admin-layout-dashboard-body-main-padding-y')))
+
    const scrollbar = ref(null)

-    const header = ref(null)
-    const footer = ref(null)
+    const bodyHeaderHeight = ref(0)
+    const bodyFooterHeight = ref(0)

-    const headerHeight = ref(0)
-    const footerHeight = ref(0)
+    const headerActive = ref(false)
+    const footerActive = ref(false)

-    const cssVar = useCssVar('--d2-admin-layout-dashboard-body-padding')
+    const bodyTopBase = computed(() => unref(cssVarHeaderHeight) + unref(cssVarHeaderBorderWidth))
+    const scrollbarVerticalTop = computed(() => px(unref(bodyTopBase) + unref(bodyHeaderHeight)))

    const scrollInnerStyle = computed(() => ({
-      paddingTop: px(headerHeight),
-      paddingBottom: px(footerHeight)
+      paddingTop: px(bodyHeaderHeight),
+      paddingBottom: px(bodyFooterHeight)
    }))

-    function onHeaderResize ({ style }) {
-      const { offsetHeight } = style
-      headerHeight.value = offsetHeight
+    function onHeaderResize (element) {
+      bodyHeaderHeight.value = element.offsetHeight
    }

-    function onFooterResize ({ style }) {
-      const { offsetHeight } = style
-      footerHeight.value = offsetHeight
+    function onFooterResize (element) {
+      bodyFooterHeight.value = element.offsetHeight
    }

    function getScrollbarVertical () {
      return scrollbar.value.$el.getElementsByClassName('os-scrollbar-vertical')[0]
    }

-    function updateScrollbarVerticalMarginTop () {
-      const scrollbarVertical = getScrollbarVertical()
-      scrollbarVertical.style.top = px(value)
+    function refreshSlotStatus () {
+      headerActive.value = !!slots.header
+      footerActive.value = !!slots.footer
+      bodyHeaderHeight.value = 0
+      bodyFooterHeight.value = 0
    }

-    function updateScrollbarVerticalMarginBottom () {
-      const scrollbarVertical = getScrollbarVertical()
-      scrollbarVertical.style.bottom = px(value)
-    }
-
-    // onMounted(() => {
-    //   console.log(slots.default)
-    //   console.log(slots.header)
-    //   console.log(slots.footer)
-    //   bind(header.value, element => {
-    //     headerHeight.value = element.offsetHeight
-    //     const scrollbarElement = scrollbar.value.$el
-    //     const scrollbarVertical = scrollbarElement.getElementsByClassName('os-scrollbar-vertical')[0]
-    //     const scrollInner = document.getElementsByClassName('main__inner')[0]
-    //     let scrollInnerMarginTop = getStyle(scrollInner, 'marginTop')
-    //     scrollbarVertical.style.top = px(Number(scrollInnerMarginTop.replace('px', '')) + element.offsetHeight)
-    //   })
-    //   bind(footer.value, element => {
-    //     footerHeight.value = element.offsetHeight
-    //     const scrollbarElement = scrollbar.value.$el
-    //     const scrollbarVertical = scrollbarElement.getElementsByClassName('os-scrollbar-vertical')[0]        
-    //     scrollbarVertical.style.bottom = px(element.offsetHeight)
-    //   })
-    // })
+    refreshSlotStatus()
+    onUpdated(() => {
+      refreshSlotStatus()
+    })
+    
+    onMounted(() => {
+      watchPostEffect(() => {
+        getScrollbarVertical().style.top = unref(scrollbarVerticalTop)
+      })
+      watchPostEffect(() => {
+        getScrollbarVertical().style.bottom = px(bodyFooterHeight)
+      })
+    })

    return {
-      cssVar,
      scrollbar,
-      header,
-      footer,
      scrollInnerStyle,
      onHeaderResize,
-      onFooterResize
+      onFooterResize,
+      headerActive,
+      footerActive
    }
  }
 }
--- a/d2/components/d2/size-sensor/index.jsx
+++ b/d2/components/d2/size-sensor/index.jsx
@ -1,7 +1,6 @@
 import { defineComponent, getCurrentInstance, onBeforeUnmount, onMounted } from 'vue'
 import { bind } from 'size-sensor'
 import { makeName } from 'd2/utils/component.js'
-import { getStyle } from 'd2/utils/css.js'

 const name = 'size-sensor'

@ -23,11 +22,7 @@ export default defineComponent({
    function init () {
      const targetElement = ctx.$el
      unbind = bind(targetElement, element => {
-        const style = getStyle(element)
-        emit('resize', {
-          element,
-          style
-        })
+        emit('resize', element)
      })
    }

--- a/d2/style/themes/default/src/layout/dashboard/src/style.scss
+++ b/d2/style/themes/default/src/layout/dashboard/src/style.scss
@ -38,6 +38,16 @@ html, body, #app {
    }
    >.body__main {
      @apply absolute inset-0;
+      &.body__main--with-header {
+        >.os-scrollbar-vertical {
+          padding-top: 0px;
+        }
+      }
+      &.body__main--with-footer {
+        >.os-scrollbar-vertical {
+          padding-bottom: 0px;
+        }
+      }
      >.os-scrollbar-vertical {
        top: calc(#{--var('header-height')} + #{--var('header-border-width')});
      }
--- a/d2/use/css-var.js
+++ b/d2/use/css-var.js
@ -1,12 +0,0 @@
-import { ref, onMounted } from 'vue'
-import { getCssVar } from 'd2/utils/css.js'
-
-export function useCssVar (name = '', defaultValue) {
-  const cssVarValue = ref(defaultValue)
-
-  onMounted(() => {
-    cssVarValue.value = getCssVar(name)
-  })
-
-  return cssVarValue
-}
--- a/d2/utils/css.js
+++ b/d2/utils/css.js
@ -41,6 +41,7 @@ export function getCssVar (name) {
 * @return {*}
 */
 export function convertCssUnit (cssValue, target) {
+  cssValue = unref(cssValue)
  target = target || document.body
  const units = {
    // Absolute sizes
--- a/package-lock.json
+++ b/package-lock.json
@ -5,11 +5,13 @@
  "requires": true,
  "packages": {
    "": {
+      "name": "d2-admin",
      "version": "0.0.0",
      "dependencies": {
        "@iconify/iconify": "^2.0.3",
        "@popperjs/core": "^2.9.3",
        "@vue/shared": "^3.2.6",
+        "@vueuse/core": "^7.2.2",
        "ant-design-vue": "^2.2.8",
        "axios": "^0.21.1",
        "classnames": "^2.3.1",
@ -895,6 +897,53 @@
      "integrity": "sha1-U3RpYfcxqOpmbjMWJx6UQjjcMds=",
      "license": "MIT"
    },
+    "node_modules/@vueuse/core": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/download/@vueuse/core-7.2.2.tgz",
+      "integrity": "sha512-T9oksrPflNhsgG/Y/7IeCSmITPZ0VKDnTpK8y7SQl4ZIdLIL8L7fJyhJEgSMWyo497j/XK3RKFkOTh4GFTVeIQ==",
+      "dependencies": {
+        "@vueuse/shared": "7.2.2",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/download/@vueuse/shared-7.2.2.tgz",
+      "integrity": "sha512-9vevEvvQgx4snSrDfZ5BFd7FmlIl9rwTtr8ySzPZhZQslx6lbcsXK3Q97I06Fv8S2TedR//X9fn2QbNtbFmdog==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/acorn": {
      "version": "7.4.1",
      "resolved": "https://registry.nlark.com/acorn/download/acorn-7.4.1.tgz?cache=0&sync_timestamp=1630916517167&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn%2Fdownload%2Facorn-7.4.1.tgz",
@ -7074,6 +7123,25 @@
      "resolved": "https://registry.npmmirror.com/@vue/shared/download/@vue/shared-3.2.20.tgz?cache=0&sync_timestamp=1633712765807&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40vue%2Fshared%2Fdownload%2F%40vue%2Fshared-3.2.20.tgz",
      "integrity": "sha1-U3RpYfcxqOpmbjMWJx6UQjjcMds="
    },
+    "@vueuse/core": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/download/@vueuse/core-7.2.2.tgz",
+      "integrity": "sha512-T9oksrPflNhsgG/Y/7IeCSmITPZ0VKDnTpK8y7SQl4ZIdLIL8L7fJyhJEgSMWyo497j/XK3RKFkOTh4GFTVeIQ==",
+      "requires": {
+        "@vueuse/shared": "7.2.2",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "@vueuse/shared": {
+          "version": "7.2.2",
+          "resolved": "https://registry.npmmirror.com/@vueuse/shared/download/@vueuse/shared-7.2.2.tgz",
+          "integrity": "sha512-9vevEvvQgx4snSrDfZ5BFd7FmlIl9rwTtr8ySzPZhZQslx6lbcsXK3Q97I06Fv8S2TedR//X9fn2QbNtbFmdog==",
+          "requires": {
+            "vue-demi": "*"
+          }
+        }
+      }
+    },
    "acorn": {
      "version": "7.4.1",
      "resolved": "https://registry.nlark.com/acorn/download/acorn-7.4.1.tgz?cache=0&sync_timestamp=1630916517167&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn%2Fdownload%2Facorn-7.4.1.tgz",
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
    "@iconify/iconify": "^2.0.3",
    "@popperjs/core": "^2.9.3",
    "@vue/shared": "^3.2.6",
+    "@vueuse/core": "^7.2.2",
    "ant-design-vue": "^2.2.8",
    "axios": "^0.21.1",
    "classnames": "^2.3.1",