vxe-pc-ui 0.2.0 → 0.4.0

package/packages/pager/index.ts

@@ -4,12 +4,11 @@ import { dynamicApp } from '../dynamics'
 
 export const VxePager = Object.assign(VxePagerComponent, {
   install: function (app: App) {
-    app.component(VxePagerComponent.name, VxePagerComponent)
+    app.component(VxePagerComponent.name as string, VxePagerComponent)
   }
 })
 
-export const Pager = VxePager
-
-dynamicApp.component(VxePagerComponent.name, VxePagerComponent)
+dynamicApp.component(VxePagerComponent.name as string, VxePagerComponent)
 
+export const Pager = VxePager
 export default VxePager

package/packages/pager/src/pager.ts

@@ -61,7 +61,7 @@ export default defineComponent({
 
     const computeSize = useSize(props)
 
-    const $xegrid = inject('$xegrid', null as any)
+    const $xeGrid = inject('$xeGrid', null as any)
 
     const reactData = reactive<PagerReactData>({
       inpCurrPage: props.currentPage
@@ -506,7 +506,7 @@ export default defineComponent({
         childNodes.push(
           h('span', {
             class: 'vxe-pager--left-wrapper'
-          }, slots.left({ $grid: $xegrid }))
+          }, slots.left({ $grid: $xeGrid }))
         )
       }
       layouts.forEach((name) => {
@@ -564,7 +564,7 @@ export default defineComponent({
         childNodes.push(
           h('span', {
             class: 'vxe-pager--right-wrapper'
-          }, slots.right({ $grid: $xegrid }))
+          }, slots.right({ $grid: $xeGrid }))
         )
       }
       return h('div', {

package/packages/pulldown/index.ts

@@ -4,12 +4,11 @@ import { dynamicApp } from '../dynamics'
 
 export const VxePulldown = Object.assign(VxePulldownComponent, {
   install: function (app: App) {
-    app.component(VxePulldownComponent.name, VxePulldownComponent)
+    app.component(VxePulldownComponent.name as string, VxePulldownComponent)
   }
 })
 
-export const Pulldown = VxePulldown
-
-dynamicApp.component(VxePulldownComponent.name, VxePulldownComponent)
+dynamicApp.component(VxePulldownComponent.name as string, VxePulldownComponent)
 
+export const Pulldown = VxePulldown
 export default VxePulldown

package/packages/radio/index.ts

@@ -4,12 +4,11 @@ import { dynamicApp } from '../dynamics'
 
 export const VxeRadio = Object.assign(VxeRadioComponent, {
   install: function (app: App) {
-    app.component(VxeRadioComponent.name, VxeRadioComponent)
+    app.component(VxeRadioComponent.name as string, VxeRadioComponent)
   }
 })
 
-export const Radio = VxeRadio
-
-dynamicApp.component(VxeRadioComponent.name, VxeRadioComponent)
+dynamicApp.component(VxeRadioComponent.name as string, VxeRadioComponent)
 
+export const Radio = VxeRadio
 export default VxeRadio

package/packages/radio-button/index.ts

@@ -4,12 +4,11 @@ import { dynamicApp } from '../dynamics'
 
 export const VxeRadioButton = Object.assign(VxeRadioButtonComponent, {
   install: function (app: App) {
-    app.component(VxeRadioButtonComponent.name, VxeRadioButtonComponent)
+    app.component(VxeRadioButtonComponent.name as string, VxeRadioButtonComponent)
   }
 })
 
-export const RadioButton = VxeRadioButton
-
-dynamicApp.component(VxeRadioButtonComponent.name, VxeRadioButtonComponent)
+dynamicApp.component(VxeRadioButtonComponent.name as string, VxeRadioButtonComponent)
 
+export const RadioButton = VxeRadioButton
 export default VxeRadioButton

package/packages/radio-group/index.ts

@@ -8,8 +8,7 @@ export const VxeRadioGroup = Object.assign(VxeRadioGroupComponent, {
   }
 })
 
-export const RadioGroup = VxeRadioGroup
-
-dynamicApp.component(VxeRadioGroupComponent.name, VxeRadioGroupComponent)
+dynamicApp.component(VxeRadioGroupComponent.name as string, VxeRadioGroupComponent)
 
+export const RadioGroup = VxeRadioGroup
 export default VxeRadioGroup

package/packages/row/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeRowComponent from './src/row'
+import { dynamicApp } from '../dynamics'
 
 const VxeRow = Object.assign({}, VxeRowComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ const VxeRow = Object.assign({}, VxeRowComponent, {
   }
 })
 
+dynamicApp.component(VxeRowComponent.name as string, VxeRowComponent)
+
 export const Row = VxeRow
 export default VxeRow

package/packages/select/index.ts

@@ -4,12 +4,11 @@ import { dynamicApp } from '../dynamics'
 
 export const VxeSelect = Object.assign(VxeSelectComponent, {
   install: function (app: App) {
-    app.component(VxeSelectComponent.name, VxeSelectComponent)
+    app.component(VxeSelectComponent.name as string, VxeSelectComponent)
   }
 })
 
-export const Select = VxeSelect
-
-dynamicApp.component(VxeSelectComponent.name, VxeSelectComponent)
+dynamicApp.component(VxeSelectComponent.name as string, VxeSelectComponent)
 
+export const Select = VxeSelect
 export default VxeSelect

package/packages/switch/index.ts

@@ -8,8 +8,7 @@ export const VxeSwitch = Object.assign(VxeSwitchComponent, {
   }
 })
 
-export const Switch = VxeSwitch
-
 dynamicApp.component(VxeSwitchComponent.name as string, VxeSwitchComponent)
 
+export const Switch = VxeSwitch
 export default VxeSwitch

package/packages/tab-pane/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeTabPaneComponent from '../tabs/src/tab-pane'
+import { dynamicApp } from '../dynamics'
 
 const VxeTabPane = Object.assign({}, VxeTabPaneComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ const VxeTabPane = Object.assign({}, VxeTabPaneComponent, {
   }
 })
 
+dynamicApp.component(VxeTabPaneComponent.name as string, VxeTabPaneComponent)
+
 export const TabPane = VxeTabPane
 export default VxeTabPane

package/packages/tabs/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeTabsComponent from './src/tabs'
+import { dynamicApp } from '../dynamics'
 
 const VxeTabs = Object.assign({}, VxeTabsComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ const VxeTabs = Object.assign({}, VxeTabsComponent, {
   }
 })
 
+dynamicApp.component(VxeTabsComponent.name as string, VxeTabsComponent)
+
 export const Tabs = VxeTabs
 export default VxeTabs

package/packages/tabs/src/tabs.ts

@@ -13,9 +13,14 @@ export default defineComponent({
     destroyOnClose: Boolean as PropType<VxeTabsPropTypes.DestroyOnClose>,
     type: String as PropType<VxeTabsPropTypes.Type>
   },
-  emits: [],
+  emits: [
+    'update:modelValue',
+    'click',
+    'change',
+    'load'
+  ],
   setup (props, context) {
-    const { slots } = context
+    const { slots, emit } = context
 
     const xID = XEUtils.uniqueId()
 
@@ -75,27 +80,48 @@ export default defineComponent({
         const { type, options } = props
         const { staticTabs, activeName } = reactData
         const headerWrapperEl = refHeaderElem.value
-        if (headerWrapperEl && !type) {
+        let lintWidth = 0
+        let lintLeft = 0
+        if (headerWrapperEl) {
           const index = XEUtils.findIndexOf(staticTabs.length ? staticTabs : options, item => item.name === activeName)
           if (index > -1) {
             const tabEl = headerWrapperEl.children[index] as HTMLDivElement
             const tabWidth = tabEl.clientWidth
-            const lintWidth = Math.max(4, Math.floor(tabWidth * 0.6))
-            reactData.lintLeft = tabEl.offsetLeft + Math.floor((tabWidth - lintWidth) / 2)
-            reactData.lintWidth = lintWidth
+            if (type === 'card') {
+              lintWidth = tabWidth + 1
+              lintLeft = tabEl.offsetLeft
+            } else if (type === 'border-card') {
+              lintWidth = tabWidth + 1
+              lintLeft = tabEl.offsetLeft - 1
+            } else if (!type) {
+              lintWidth = Math.max(4, Math.floor(tabWidth * 0.6))
+              lintLeft = tabEl.offsetLeft + Math.floor((tabWidth - lintWidth) / 2)
+            }
           }
         }
+        reactData.lintLeft = lintLeft
+        reactData.lintWidth = lintWidth
       })
     }
 
     const clickEvent = (evnt: KeyboardEvent, item: VxeTabPaneProps | VxeTabPaneDefines.TabConfig) => {
-      const { initNames } = reactData
+      const { initNames, activeName } = reactData
       const { name } = item
+      let isInit = false
+      const value = name
       if (!initNames.includes(name)) {
+        isInit = true
         initNames.push(name)
       }
       reactData.activeName = name
-      updateLineStyle()
+      emit('update:modelValue', value)
+      if (name !== activeName) {
+        emit('change', { value, name, $event: evnt })
+      }
+      emit('click', { name, $event: evnt })
+      if (isInit) {
+        emit('load', { name, $event: evnt })
+      }
     }
 
     const renderTabHeader = (list: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
@@ -111,6 +137,7 @@ export default defineComponent({
           const { title, name, slots } = item
           const tabSlot = slots ? slots.tab : null
           return h('div', {
+            key: name,
             class: ['vxe-tab-header--item', {
               'is--active': activeName === name
             }],
@@ -123,15 +150,13 @@ export default defineComponent({
             }, tabSlot ? callSlot(tabSlot, { name, title }) : `${title}`)
           ])
         })),
-        type
-          ? null
-          : h('span', {
-            class: 'vxe-tabs-header--active-line',
-            style: {
-              left: `${lintLeft}px`,
-              width: `${lintWidth}px`
-            }
-          })
+        h('span', {
+          class: `vxe-tabs-header--active-line-${type || 'default'}`,
+          style: {
+            left: `${lintLeft}px`,
+            width: `${lintWidth}px`
+          }
+        })
       ])
     }
 
@@ -143,6 +168,7 @@ export default defineComponent({
         default () {
           return name && initNames.includes(name)
             ? h('div', {
+              key: name,
               class: ['vxe-tab-pane--item', {
                 'is--visible': activeName === name
               }]
@@ -156,7 +182,7 @@ export default defineComponent({
       const { destroyOnClose } = props
       const activeOptionTab = computeActiveOptionTab.value
       if (destroyOnClose) {
-        return activeOptionTab ? renderOptionPane(activeOptionTab) : createCommentVNode()
+        return activeOptionTab ? [renderOptionPane(activeOptionTab)] : createCommentVNode()
       }
       return options.map(renderOptionPane)
     }
@@ -167,6 +193,7 @@ export default defineComponent({
       const defaultSlot = slots ? slots.default : null
       return name && initNames.includes(name)
         ? h('div', {
+          key: name,
           class: ['vxe-tab-pane--item', {
             'is--visible': activeName === name
           }]
@@ -178,7 +205,7 @@ export default defineComponent({
       const { destroyOnClose } = props
       const activeDefaultTab = computeActiveDefaultTab.value
       if (destroyOnClose) {
-        return activeDefaultTab ? renderDefaultPane(activeDefaultTab) : createCommentVNode()
+        return activeDefaultTab ? [renderDefaultPane(activeDefaultTab)] : createCommentVNode()
       }
       return staticTabs.map(renderDefaultPane)
     }
@@ -204,6 +231,9 @@ export default defineComponent({
 
     watch(() => props.modelValue, (val) => {
       reactData.activeName = val
+    })
+
+    watch(() => reactData.activeName, () => {
       updateLineStyle()
     })
 

package/packages/textarea/index.ts

@@ -4,12 +4,11 @@ import { dynamicApp } from '../dynamics'
 
 export const VxeTextarea = Object.assign(VxeTextareaComponent, {
   install: function (app: App) {
-    app.component(VxeTextareaComponent.name, VxeTextareaComponent)
+    app.component(VxeTextareaComponent.name as string, VxeTextareaComponent)
   }
 })
 
-export const Textarea = VxeTextarea
-
-dynamicApp.component(VxeTextareaComponent.name, VxeTextareaComponent)
+dynamicApp.component(VxeTextareaComponent.name as string, VxeTextareaComponent)
 
+export const Textarea = VxeTextarea
 export default VxeTextarea

package/packages/tooltip/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeTooltipComponent from './src/tooltip'
+import { dynamicApp } from '../dynamics'
 
 const VxeTooltip = Object.assign({}, VxeTooltipComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ const VxeTooltip = Object.assign({}, VxeTooltipComponent, {
   }
 })
 
+dynamicApp.component(VxeTooltipComponent.name as string, VxeTooltipComponent)
+
 export const Tooltip = VxeTooltip
 export default VxeTooltip

package/packages/ui/src/globalStore.ts

@@ -7,25 +7,21 @@ const globalConfigStore: Required<VxeGlobalConfig> = {
   zIndex: 999,
   emptyCell: '　',
   loadingText: '',
+  resizeInterval: 500,
 
   i18n: (key: string) => key,
 
-  tooltip: {
-    // size: null,
-    trigger: 'hover',
-    theme: 'dark',
-    enterDelay: 500,
-    leaveDelay: 300
-  },
-  pager: {
-    // size: null,
-    // autoHidden: false,
-    // perfect: true,
-    // pageSize: 10,
-    // pagerCount: 7,
-    // pageSizes: [10, 15, 20, 50, 100],
-    // layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
-  },
+  anchor: {},
+  anchorLink: {},
+  breadcrumb: {
+    separator: '/'
+  },
+  breadcrumbItem: {},
+  button: {},
+  buttonGroup: {},
+  checkbox: {},
+  checkboxGroup: {},
+  col: {},
   form: {
     // preventSubmit: false,
     // size: null,
@@ -39,6 +35,10 @@ const globalConfigStore: Required<VxeGlobalConfig> = {
     },
     titleAsterisk: true
   },
+  formDesign: {},
+  formGather: {},
+  formItem: {},
+  icon: {},
   input: {
     // size: null,
     // transfer: false
@@ -52,49 +52,21 @@ const globalConfigStore: Required<VxeGlobalConfig> = {
     digits: 2,
     controls: true
   },
-  textarea: {
-    // size: null,
-    // autosize: {
-    //   minRows: 1,
-    //   maxRows: 10
-    // }
-  },
-  select: {
-    // size: null,
-    // transfer: false,
-    // optionConfig: {
-    //   keyField: '_X_OPTION_KEY'
-    // },
-    multiCharOverflow: 8
-  },
-  button: {
-    // size: null,
-    // transfer: false
-  },
-  buttonGroup: {
-    // size: null
-  },
-  radio: {
-    // size: null,
-    strict: true
-  },
-  radioButton: {
-    // size: null,
-    strict: true
-  },
-  radioGroup: {
+  layoutAside: {},
+  layoutBody: {},
+  layoutContainer: {},
+  layoutFooter: {},
+  layoutHeader: {},
+  listDesign: {},
+  list: {
     // size: null,
-    strict: true
-  },
-  checkbox: {
-    // size: null
-  },
-  checkboxGroup: {
-    // size: null
-  },
-  switch: {
-    // size: null
+    scrollY: {
+      enabled: true,
+      gt: 100
+      // oSize: 0
+    }
   },
+  loading: {},
   modal: {
     // size: null,
     top: 15,
@@ -113,16 +85,42 @@ const globalConfigStore: Required<VxeGlobalConfig> = {
     // storage: false,
     storageKey: 'VXE_MODAL_POSITION'
   },
-  list: {
+  optgroup: {},
+  option: {},
+  pager: {
     // size: null,
-    scrollY: {
-      enabled: true,
-      gt: 100
-      // oSize: 0
-    }
+    // autoHidden: false,
+    // perfect: true,
+    // pageSize: 10,
+    // pagerCount: 7,
+    // pageSizes: [10, 15, 20, 50, 100],
+    // layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
+  },
+  pulldown: {},
+  radio: {
+    strict: true
+  },
+  radioButton: {
+    strict: true
+  },
+  radioGroup: {
+    strict: true
   },
-  breadcrumb: {},
-  formDesign: {}
+  row: {},
+  select: {
+    multiCharOverflow: 8
+  },
+  switch: {},
+  tabPane: {},
+  tabs: {},
+  textarea: {},
+  tooltip: {
+    // size: null,
+    trigger: 'hover',
+    theme: 'dark',
+    enterDelay: 500,
+    leaveDelay: 300
+  }
 }
 
 export default globalConfigStore

package/packages/ui/src/resize.ts

@@ -0,0 +1,85 @@
+import XEUtils from 'xe-utils'
+import globalConfigStore from './globalStore'
+
+/**
+ * 监听 resize 事件
+ * 如果项目中已使用了 resize-observer-polyfill，那么只需要将方法定义全局，该组件就会自动使用
+ */
+let resizeTimeout: any
+/* eslint-disable no-use-before-define */
+const eventStore: XEResizeObserver[] = []
+const defaultInterval = 500
+
+function eventHandle () {
+  if (eventStore.length) {
+    eventStore.forEach((item) => {
+      item.tarList.forEach((observer) => {
+        const { target, width, heighe } = observer
+        const clientWidth = target.clientWidth
+        const clientHeight = target.clientHeight
+        const rWidth = clientWidth && width !== clientWidth
+        const rHeight = clientHeight && heighe !== clientHeight
+        if (rWidth || rHeight) {
+          observer.width = clientWidth
+          observer.heighe = clientHeight
+          setTimeout(item.callback)
+        }
+      })
+    })
+    /* eslint-disable @typescript-eslint/no-use-before-define */
+    eventListener()
+  }
+}
+
+function eventListener () {
+  clearTimeout(resizeTimeout)
+  resizeTimeout = setTimeout(eventHandle, globalConfigStore.resizeInterval || defaultInterval)
+}
+
+export class XEResizeObserver {
+  tarList: {
+    target: Element;
+    width: number;
+    heighe: number;
+  }[] = []
+
+  callback: (...args: any[]) => void
+
+  constructor (callback: (...args: any[]) => void) {
+    this.callback = callback
+  }
+
+  observe (target: Element): void {
+    if (target) {
+      const { tarList } = this
+      if (!tarList.some(observer => observer.target === target)) {
+        tarList.push({
+          target,
+          width: target.clientWidth,
+          heighe: target.clientHeight
+        })
+      }
+      if (!eventStore.length) {
+        eventListener()
+      }
+      if (!eventStore.some((item) => item === this)) {
+        eventStore.push(this)
+      }
+    }
+  }
+
+  unobserve (target: Element): void {
+    XEUtils.remove(eventStore, item => item.tarList.some(observer => observer.target === target))
+  }
+
+  disconnect (): void {
+    XEUtils.remove(eventStore, item => item === this)
+  }
+}
+
+export function createResizeEvent (callback: (...args: any[]) => void): any {
+  if (window.ResizeObserver) {
+    return new window.ResizeObserver(callback)
+  }
+  return new XEResizeObserver(callback)
+}

package/styles/all.scss

@@ -21,6 +21,7 @@
 @import './components/layout-footer.scss';
 @import './components/layout-header.scss';
 @import './components/list-design.scss';
+@import './components/list.scss';
 @import './components/loading.scss';
 @import './components/modal.scss';
 @import './components/optgroup.scss';

package/styles/components/input.scss

@@ -12,7 +12,7 @@ $iconWidth: 1.6em;
   font-family: inherit;
   line-height: inherit;
   padding: 0 0.6em;
-  color: var(--vxe-font-color);
+  color: var(--vxe-ui-font-color);
   border: 1px solid var(--vxe-ui-input-border-color);
   background-color: var(--vxe-ui-input-background-color);
   box-shadow: none;
@@ -205,7 +205,7 @@ $iconWidth: 1.6em;
     .vxe-input--suffix {
       &:hover {
         .vxe-input--clear-icon {
-          color: var(--vxe-font-color);
+          color: var(--vxe-ui-font-color);
         }
       }
       &:active {
@@ -218,7 +218,7 @@ $iconWidth: 1.6em;
       &:hover {
         .vxe-input--search-suffix,
         .vxe-input--password-suffix {
-          color: var(--vxe-font-color);
+          color: var(--vxe-ui-font-color);
         }
       }
       &:active {
@@ -231,7 +231,7 @@ $iconWidth: 1.6em;
     .vxe-input--number-prev,
     .vxe-input--number-next {
       &:hover {
-        color: var(--vxe-font-color);
+        color: var(--vxe-ui-font-color);
       }
       &:active {
         color: var(--vxe-primary-color);
@@ -303,7 +303,7 @@ $iconWidth: 1.6em;
   position: absolute;
   left: 0;
   padding: 4px 0;
-  color: var(--vxe-font-color);
+  color: var(--vxe-ui-font-color);
   font-size: var(--vxe-font-size);
   text-align: left;
   &:not(.is--transfer) {

package/styles/components/list.scss

@@ -2,7 +2,7 @@
   position: relative;
   display: block;
   padding: 0;
-  color: var(--vxe-font-color);
+  color: var(--vxe-ui-font-color);
   direction: ltr;
   .vxe-list--virtual-wrapper {
     position: relative;

package/styles/components/modal.scss

@@ -8,7 +8,7 @@
   line-height: 1.5;
   width: calc(100% + 18px);
   height: calc(100% + 18px);
-  color: var(--vxe-font-color);
+  color: var(--vxe-ui-font-color);
   font-family: var(--vxe-font-family);
   transition: top .4s ease-in-out;
   &.is--active {