vxe-pc-ui 4.20.25 → 4.20.26

package/packages/layout-aside/index.ts

@@ -1,16 +1,16 @@
-import { App } from 'vue'
-import { VxeUI } from '@vxe-ui/core'
-import VxeLayoutAsideComponent from './src/layout-aside'
-import { dynamicApp } from '../dynamics'
-
-export const VxeLayoutAside = Object.assign({}, VxeLayoutAsideComponent, {
-  install (app: App) {
-    app.component(VxeLayoutAsideComponent.name as string, VxeLayoutAsideComponent)
-  }
-})
-
-dynamicApp.use(VxeLayoutAside)
-VxeUI.component(VxeLayoutAsideComponent)
-
-export const LayoutAside = VxeLayoutAside
-export default VxeLayoutAside
+import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeLayoutAsideComponent from './src/layout-aside'
+import { dynamicApp } from '../dynamics'
+
+export const VxeLayoutAside = Object.assign({}, VxeLayoutAsideComponent, {
+  install(app: App) {
+    app.component(VxeLayoutAsideComponent.name as string, VxeLayoutAsideComponent)
+  }
+})
+
+dynamicApp.use(VxeLayoutAside)
+VxeUI.component(VxeLayoutAsideComponent)
+
+export const LayoutAside = VxeLayoutAside
+export default VxeLayoutAside

package/packages/layout-aside/src/layout-aside.ts

@@ -1,156 +1,172 @@
-import { ref, h, reactive, computed, provide, PropType } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import { toCssUnit } from '../../ui/src/dom'
-import { getConfig, useFns, createEvent } from '../../ui'
-import { getDefaultConfig } from '../../ui/src/utils'
-import XEUtils from 'xe-utils'
-import VxeLoadingComponent from '../../loading'
-import VxeScrollbarComponent from '../../scrollbar'
-
-import type { VxeLayoutAsidePropTypes, LayoutAsideReactData, VxeLayoutAsideEmits, LayoutAsidePrivateRef, LayoutAsideMethods, LayoutAsidePrivateMethods, VxeLayoutAsidePrivateComputed, VxeLayoutAsideConstructor, VxeLayoutAsidePrivateMethods, ValueOf, VxeComponentStyleType } from '../../../types'
-
-export default defineVxeComponent({
-  name: 'VxeLayoutAside',
-  props: {
-    width: [String, Number] as PropType<VxeLayoutAsidePropTypes.Width>,
-    collapsed: Boolean as PropType<VxeLayoutAsidePropTypes.Collapsed>,
-    collapseWidth: [String, Number] as PropType<VxeLayoutAsidePropTypes.CollapseWidth>,
-    loading: Boolean as PropType<VxeLayoutAsidePropTypes.Loading>,
-    padding: Boolean as PropType<VxeLayoutAsidePropTypes.Padding>,
-    collapseConfig: Object as PropType<VxeLayoutAsidePropTypes.CollapseConfig>,
-    useScrollbar: {
-      type: Boolean as PropType<VxeLayoutAsidePropTypes.UseScrollbar>,
-      default: () => getDefaultConfig(getConfig().layoutAside.useScrollbar, getConfig().useScrollbar)
-    },
-    scrollbarConfig: Object as PropType<VxeLayoutAsidePropTypes.ScrollbarConfig>,
-    size: {
-      type: String as PropType<VxeLayoutAsidePropTypes.Size>,
-      default: () => getConfig().layoutAside.size || getConfig().size
-    }
-  },
-  emits: [] as VxeLayoutAsideEmits,
-  setup (props, context) {
-    const { slots, emit } = context
-
-    const xID = XEUtils.uniqueId()
-
-    const refElem = ref<HTMLDivElement>()
-
-    const { computeSize } = useFns.useSize(props)
-    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
-
-    const reactData = reactive<LayoutAsideReactData>({})
-
-    const refMaps: LayoutAsidePrivateRef = {
-      refElem
-    }
-
-    const computeCollapseOpts = computed(() => {
-      return Object.assign({}, getConfig().layoutAside.collapseConfig, props.collapseConfig)
-    })
-
-    const computeScrollbarOpts = computed(() => {
-      return Object.assign({}, getConfig().layoutAside.scrollbarConfig, props.scrollbarConfig)
-    })
-
-    const computeVarStyle = computed(() => {
-      const { width, collapseWidth } = props
-      const stys: VxeComponentStyleType = {}
-      if (collapseWidth) {
-        stys['--vxe-ui-layout-aside-collapse-width'] = toCssUnit(collapseWidth)
-      }
-      if (width) {
-        stys['--vxe-ui-layout-aside-default-width'] = toCssUnit(width)
-      }
-      return stys
-    })
-
-    const computeMaps: VxeLayoutAsidePrivateComputed = {
-      computeSize,
-      computeVarStyle
-    }
-
-    const $xeLayoutAside = {
-      xID,
-      props,
-      context,
-      reactData,
-
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    } as unknown as VxeLayoutAsideConstructor & VxeLayoutAsidePrivateMethods
-
-    const dispatchEvent = (type: ValueOf<VxeLayoutAsideEmits>, params: Record<string, any>, evnt: Event | null) => {
-      emit(type, createEvent(evnt, { $layoutAside: $xeLayoutAside }, params))
-    }
-
-    const layoutAsideMethods: LayoutAsideMethods = {
-      dispatchEvent
-    }
-
-    const layoutAsidePrivateMethods: LayoutAsidePrivateMethods = {
-    }
-
-    Object.assign($xeLayoutAside, layoutAsideMethods, layoutAsidePrivateMethods)
-
-    const renderVN = () => {
-      const { collapsed, loading, padding } = props
-      const varStyle = computeVarStyle.value
-      const vSize = computeSize.value
-      const isVScrollbar = computeIsVScrollbar.value
-      const collapseOpts = computeCollapseOpts.value
-      const scrollbarOpts = computeScrollbarOpts.value
-      const { className, viewClassName, viewInnerClassName } = scrollbarOpts
-      const defaultSlot = slots.default
-
-      return h('aside', {
-        ref: refElem,
-        class: ['vxe-layout-aside', {
-          [`size--${vSize}`]: vSize,
-          'is--animat': collapseOpts.animation !== false,
-          'is--padding': padding,
-          'is--collapse': collapsed,
-          'is--loading': loading
-        }],
-        style: varStyle
-      }, [
-        isVScrollbar
-          ? h(VxeScrollbarComponent, {
-            width: scrollbarOpts.width,
-            height: scrollbarOpts.height,
-            autoHide: scrollbarOpts.autoHide,
-            visible: scrollbarOpts.visible,
-            xConfig: {
-              visible: false
-            },
-            yConfig: scrollbarOpts.yConfig,
-            className: 'vxe-layout-aside--scrollbar' + (className ? (' ' + className) : ''),
-            viewAttrs: scrollbarOpts.viewAttrs,
-            viewClassName: 'vxe-layout-aside--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
-            viewInnerClassName: 'vxe-layout-aside--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
-          }, {
-            default: () => defaultSlot ? defaultSlot({}) : []
-          })
-          : h('div', {
-            class: 'vxe-layout-aside--inner'
-          }, defaultSlot ? defaultSlot({}) : []),
-        /**
-         * 加载中
-         */
-        h(VxeLoadingComponent, {
-          class: 'vxe-layout-aside-view--loading',
-          modelValue: loading
-        })
-      ])
-    }
-
-    provide('$xeLayoutAside', $xeLayoutAside)
-
-    $xeLayoutAside.renderVN = renderVN
-
-    return $xeLayoutAside
-  },
-  render () {
-    return this.renderVN()
-  }
-})
+import { ref, h, reactive, computed, provide, PropType } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import { toCssUnit } from '../../ui/src/dom'
+import { VxeUI } from '@vxe-ui/core'
+import { getDefaultConfig } from '../../ui/src/utils'
+import XEUtils from 'xe-utils'
+import VxeLoadingComponent from '../../loading'
+import VxeScrollbarComponent from '../../scrollbar'
+
+import type { VxeLayoutAsidePropTypes, LayoutAsideReactData, VxeLayoutAsideEmits, LayoutAsidePrivateRef, LayoutAsideMethods, LayoutAsidePrivateMethods, VxeLayoutAsidePrivateComputed, VxeLayoutAsideConstructor, VxeLayoutAsidePrivateMethods, ValueOf, VxeComponentStyleType } from '../../../types'
+
+const { getConfig, useFns, createEvent } = VxeUI
+
+export default defineVxeComponent({
+  name: 'VxeLayoutAside',
+  props: {
+    width: [String, Number] as PropType<VxeLayoutAsidePropTypes.Width>,
+    collapsed: Boolean as PropType<VxeLayoutAsidePropTypes.Collapsed>,
+    collapseWidth: [String, Number] as PropType<VxeLayoutAsidePropTypes.CollapseWidth>,
+    loading: Boolean as PropType<VxeLayoutAsidePropTypes.Loading>,
+    padding: Boolean as PropType<VxeLayoutAsidePropTypes.Padding>,
+    collapseConfig: Object as PropType<VxeLayoutAsidePropTypes.CollapseConfig>,
+    useScrollbar: {
+      type: Boolean as PropType<VxeLayoutAsidePropTypes.UseScrollbar>,
+      default: () => getDefaultConfig(getConfig().layoutAside.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object as PropType<VxeLayoutAsidePropTypes.ScrollbarConfig>,
+    size: {
+      type: String as PropType<VxeLayoutAsidePropTypes.Size>,
+      default: () => getConfig().layoutAside.size || getConfig().size
+    }
+  },
+  emits: [] as VxeLayoutAsideEmits,
+  setup(props, context) {
+    const { slots, emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
+
+    const reactData = reactive<LayoutAsideReactData>({})
+
+    const refMaps: LayoutAsidePrivateRef = {
+      refElem
+    }
+
+    const computeCollapseOpts = computed(() => {
+      return Object.assign({}, getConfig().layoutAside.collapseConfig, props.collapseConfig)
+    })
+
+    const computeScrollbarOpts = computed(() => {
+      return Object.assign({}, getConfig().layoutAside.scrollbarConfig, props.scrollbarConfig)
+    })
+
+    const computeVarStyle = computed(() => {
+      const { width, collapseWidth } = props
+      const stys: VxeComponentStyleType = {}
+      if (collapseWidth) {
+        stys['--vxe-ui-layout-aside-collapse-width'] = toCssUnit(collapseWidth)
+      }
+      if (width) {
+        stys['--vxe-ui-layout-aside-default-width'] = toCssUnit(width)
+      }
+      return stys
+    })
+
+    const computeMaps: VxeLayoutAsidePrivateComputed = {
+      computeSize,
+      computeVarStyle
+    }
+
+    const $xeLayoutAside = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeLayoutAsideConstructor & VxeLayoutAsidePrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeLayoutAsideEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $layoutAside: $xeLayoutAside }, params))
+    }
+
+    const layoutAsideMethods: LayoutAsideMethods = {
+      dispatchEvent
+    }
+
+    const layoutAsidePrivateMethods: LayoutAsidePrivateMethods = {}
+
+    Object.assign($xeLayoutAside, layoutAsideMethods, layoutAsidePrivateMethods)
+
+    const renderVN = () => {
+      const { collapsed, loading, padding } = props
+      const varStyle = computeVarStyle.value
+      const vSize = computeSize.value
+      const isVScrollbar = computeIsVScrollbar.value
+      const collapseOpts = computeCollapseOpts.value
+      const scrollbarOpts = computeScrollbarOpts.value
+      const { className, viewClassName, viewInnerClassName } = scrollbarOpts
+      const defaultSlot = slots.default
+
+      return h(
+        'aside',
+        {
+          ref: refElem,
+          class: [
+            'vxe-layout-aside',
+            {
+              [`size--${vSize}`]: vSize,
+              'is--animat': collapseOpts.animation !== false,
+              'is--padding': padding,
+              'is--collapse': collapsed,
+              'is--loading': loading
+            }
+          ],
+          style: varStyle
+        },
+        [
+          isVScrollbar
+            ? h(
+              VxeScrollbarComponent,
+              {
+                width: scrollbarOpts.width,
+                height: scrollbarOpts.height,
+                autoHide: scrollbarOpts.autoHide,
+                visible: scrollbarOpts.visible,
+                xConfig: {
+                  visible: false
+                },
+                yConfig: scrollbarOpts.yConfig,
+                className: 'vxe-layout-aside--scrollbar' + (className ? ' ' + className : ''),
+                viewAttrs: scrollbarOpts.viewAttrs,
+                viewClassName: 'vxe-layout-aside--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
+                viewInnerClassName: 'vxe-layout-aside--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
+              },
+              {
+                default: () => (defaultSlot ? defaultSlot({}) : [])
+              }
+            )
+            : h(
+              'div',
+              {
+                class: 'vxe-layout-aside--inner'
+              },
+              defaultSlot ? defaultSlot({}) : []
+            ),
+          /**
+           * 加载中
+           */
+          h(VxeLoadingComponent, {
+            class: 'vxe-layout-aside-view--loading',
+            modelValue: loading
+          })
+        ]
+      )
+    }
+
+    provide('$xeLayoutAside', $xeLayoutAside)
+
+    $xeLayoutAside.renderVN = renderVN
+
+    return $xeLayoutAside
+  },
+  render() {
+    return this.renderVN()
+  }
+})

package/packages/layout-body/index.ts

@@ -1,16 +1,16 @@
-import { App } from 'vue'
-import { VxeUI } from '@vxe-ui/core'
-import VxeLayoutBodyComponent from './src/layout-body'
-import { dynamicApp } from '../dynamics'
-
-export const VxeLayoutBody = Object.assign({}, VxeLayoutBodyComponent, {
-  install (app: App) {
-    app.component(VxeLayoutBodyComponent.name as string, VxeLayoutBodyComponent)
-  }
-})
-
-dynamicApp.use(VxeLayoutBody)
-VxeUI.component(VxeLayoutBodyComponent)
-
-export const LayoutBody = VxeLayoutBody
-export default VxeLayoutBody
+import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeLayoutBodyComponent from './src/layout-body'
+import { dynamicApp } from '../dynamics'
+
+export const VxeLayoutBody = Object.assign({}, VxeLayoutBodyComponent, {
+  install(app: App) {
+    app.component(VxeLayoutBodyComponent.name as string, VxeLayoutBodyComponent)
+  }
+})
+
+dynamicApp.use(VxeLayoutBody)
+VxeUI.component(VxeLayoutBodyComponent)
+
+export const LayoutBody = VxeLayoutBody
+export default VxeLayoutBody