vxe-pc-ui 3.0.1 → 3.0.2

package/packages/checkbox/src/checkbox.ts

@@ -99,6 +99,12 @@ export default defineVxeComponent({
       const $xeCheckbox = this
       $xeCheckbox.$emit(type, createEvent(evnt, { $checkbox: $xeCheckbox }, params))
     },
+    emitModel (value: any) {
+      const $xeCheckbox = this
+
+      $xeCheckbox.$emit('modelValue', value)
+      $xeCheckbox.$emit('input', value)
+    },
     changeEvent  (evnt: Event & { target: { checked: boolean } }) {
       const $xeCheckbox = this
       const props = $xeCheckbox
@@ -115,7 +121,7 @@ export default defineVxeComponent({
         if ($xeCheckboxGroup) {
           $xeCheckboxGroup.handleChecked(params, evnt)
         } else {
-          $xeCheckbox.$emit('input', value)
+          $xeCheckbox.emitModel(value)
           $xeCheckbox.dispatchEvent('change', params, evnt)
           // 自动更新校验状态
           if ($xeForm && formItemInfo) {

package/packages/checkbox/src/group.ts

@@ -114,11 +114,17 @@ export default defineVxeComponent({
       const $xeCheckboxGroup = this
       $xeCheckboxGroup.$emit(type, createEvent(evnt, { $checkboxGroup: $xeCheckboxGroup }, params))
     },
+    emitModel (value: any) {
+      const $xeCheckboxGroup = this
+
+      $xeCheckboxGroup.$emit('modelValue', value)
+      $xeCheckboxGroup.$emit('input', value)
+    },
     handleChecked (params: {
       checked: boolean;
       value: VxeCheckboxPropTypes.ModelValue;
       label: VxeCheckboxPropTypes.Label;
-  }, evnt: Event) {
+    }, evnt: Event) {
       const $xeCheckboxGroup = this
       const props = $xeCheckboxGroup
       const $xeForm = $xeCheckboxGroup.$xeForm
@@ -134,7 +140,7 @@ export default defineVxeComponent({
       } else {
         checklist.splice(checkIndex, 1)
       }
-      $xeCheckboxGroup.$emit('input', checklist)
+      $xeCheckboxGroup.emitModel(checklist)
       $xeCheckboxGroup.dispatchEvent('change', Object.assign({ checklist }, params), evnt)
       // 自动更新校验状态
       if ($xeForm && formItemInfo) {

package/packages/collapse/index.ts

@@ -0,0 +1,16 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeCollapseComponent from './src/collapse'
+import { dynamicApp } from '../dynamics'
+
+export const VxeCollapse = Object.assign({}, VxeCollapseComponent, {
+  install (app: VueConstructor) {
+    app.component(VxeCollapseComponent.name as string, VxeCollapseComponent)
+  }
+})
+
+dynamicApp.use(VxeCollapse)
+VxeUI.component(VxeCollapseComponent)
+
+export const Collapse = VxeCollapse
+export default VxeCollapse

package/packages/collapse/src/collapse-pane.ts

@@ -0,0 +1,47 @@
+import { CreateElement, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { createEvent } from '../../ui'
+
+import type { CollapsePaneReactData, VxeCollapsePaneEmits, ValueOf } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeCollapsePane',
+  props: {
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: CollapsePaneReactData = {
+    }
+    return {
+      xID,
+      reactData
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeCollapsePaneEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeCollapsePane = this
+      $xeCollapsePane.$emit(type, createEvent(evnt, { $collapsePane: $xeCollapsePane }, params))
+    },
+
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      const $xeCollapsePane = this
+      const slots = $xeCollapsePane.$scopedSlots
+
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-collapse-pane']
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+})

package/packages/collapse/src/collapse.ts

@@ -0,0 +1,47 @@
+import { CreateElement, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { createEvent } from '../../ui'
+
+import type { CollapseReactData, VxeCollapseEmits, ValueOf } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeCollapse',
+  props: {
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: CollapseReactData = {
+    }
+    return {
+      xID,
+      reactData
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeCollapseEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeCollapse = this
+      $xeCollapse.$emit(type, createEvent(evnt, { $collapse: $xeCollapse }, params))
+    },
+
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      const $xeCollapse = this
+      const slots = $xeCollapse.$scopedSlots
+
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-collapse']
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+})

package/packages/collapse-pane/index.ts

@@ -0,0 +1,16 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeCollapsePaneComponent from '../collapse/src/collapse-pane'
+import { dynamicApp } from '../dynamics'
+
+export const VxeCollapsePane = Object.assign({}, VxeCollapsePaneComponent, {
+  install (app: VueConstructor) {
+    app.component(VxeCollapsePaneComponent.name as string, VxeCollapsePaneComponent)
+  }
+})
+
+dynamicApp.use(VxeCollapsePane)
+VxeUI.component(VxeCollapsePaneComponent)
+
+export const CollapsePane = VxeCollapsePane
+export default VxeCollapsePane

package/packages/components.ts

@@ -10,22 +10,22 @@ import VxeBreadcrumb from './breadcrumb'
 import VxeBreadcrumbItem from './breadcrumb-item'
 import VxeButton from './button'
 import VxeButtonGroup from './button-group'
-// import VxeCalendar from './calendar'
+import VxeCalendar from './calendar'
 import VxeCard from './card'
 import VxeCarousel from './carousel'
 import VxeCarouselItem from './carousel-item'
 import VxeCheckbox from './checkbox'
 import VxeCheckboxGroup from './checkbox-group'
 import VxeCol from './col'
-// import VxeCollapse from './collapse'
-// import VxeCollapsePane from './collapse-pane'
+import VxeCollapse from './collapse'
+import VxeCollapsePane from './collapse-pane'
 import VxeCountdown from './countdown'
 import VxeDatePicker from './date-picker'
 import VxeDrawer, { DrawerController } from './drawer'
-// import VxeForm from './form'
+import VxeForm from './form'
 // import VxeFormDesign from './form-design'
-// import VxeFormGather from './form-gather'
-// import VxeFormItem from './form-item'
+import VxeFormGather from './form-gather'
+import VxeFormItem from './form-item'
 // import VxeFormView from './form-view'
 import VxeIcon from './icon'
 import VxeIconPicker from './icon-picker'
@@ -41,7 +41,7 @@ import VxeLayoutHeader from './layout-header'
 import VxeLink from './link'
 // import VxeListDesign from './list-design'
 // import VxeListView from './list-view'
-// import VxeList from './list'
+import VxeList from './list'
 import VxeLoading, { LoadingController } from './loading'
 import VxeMenu from './menu'
 import VxeModal, { ModalController } from './modal'
@@ -66,8 +66,8 @@ import VxeText from './text'
 import VxeTextarea from './textarea'
 import VxeTip from './tip'
 import VxeTooltip from './tooltip'
-// import VxeTree from './tree'
-// import VxeTreeSelect from './tree-select'
+import VxeTree from './tree'
+import VxeTreeSelect from './tree-select'
 import VxeUpload from './upload'
 
 import { saveLocalFile, readLocalFile } from './upload/src/util'
@@ -81,22 +81,22 @@ const components = [
   VxeBreadcrumbItem,
   VxeButton,
   VxeButtonGroup,
-  // VxeCalendar,
+  VxeCalendar,
   VxeCard,
   VxeCarousel,
   VxeCarouselItem,
   VxeCheckbox,
   VxeCheckboxGroup,
   VxeCol,
-  // VxeCollapse,
-  // VxeCollapsePane,
+  VxeCollapse,
+  VxeCollapsePane,
   VxeCountdown,
   VxeDatePicker,
   VxeDrawer,
-  // VxeForm,
+  VxeForm,
   // VxeFormDesign,
-  // VxeFormGather,
-  // VxeFormItem,
+  VxeFormGather,
+  VxeFormItem,
   // VxeFormView,
   VxeIcon,
   VxeIconPicker,
@@ -112,7 +112,7 @@ const components = [
   VxeLink,
   // VxeListDesign,
   // VxeListView,
-  // VxeList,
+  VxeList,
   VxeLoading,
   VxeMenu,
   VxeModal,
@@ -137,8 +137,8 @@ const components = [
   VxeTextarea,
   VxeTip,
   VxeTooltip,
-  // VxeTree,
-  // VxeTreeSelect,
+  VxeTree,
+  VxeTreeSelect,
   VxeUpload
 ]
 
@@ -172,22 +172,22 @@ export * from './breadcrumb'
 export * from './breadcrumb-item'
 export * from './button'
 export * from './button-group'
-// export * from './calendar'
+export * from './calendar'
 export * from './card'
 export * from './carousel'
 export * from './carousel-item'
 export * from './checkbox'
 export * from './checkbox-group'
 export * from './col'
-// export * from './collapse'
-// export * from './collapse-pane'
+export * from './collapse'
+export * from './collapse-pane'
 export * from './countdown'
 export * from './date-picker'
 export * from './drawer'
-// export * from './form'
+export * from './form'
 // export * from './form-design'
-// export * from './form-gather'
-// export * from './form-item'
+export * from './form-gather'
+export * from './form-item'
 // export * from './form-view'
 export * from './icon'
 export * from './icon-picker'
@@ -203,7 +203,7 @@ export * from './layout-header'
 export * from './link'
 // export * from './list-design'
 // export * from './list-view'
-// export * from './list'
+export * from './list'
 export * from './loading'
 export * from './menu'
 export * from './modal'
@@ -228,6 +228,6 @@ export * from './text'
 export * from './textarea'
 export * from './tip'
 export * from './tooltip'
-// export * from './tree'
-// export * from './tree-select'
+export * from './tree'
+export * from './tree-select'
 export * from './upload'

package/packages/date-picker/src/date-picker.ts

@@ -698,6 +698,11 @@ export default defineVxeComponent({
       const $xeDatePicker = this
       $xeDatePicker.$emit(type, createEvent(evnt, { $datePicker: $xeDatePicker }, params))
     },
+    emitModel (value: any) {
+      const $xeDatePicker = this
+
+      $xeDatePicker.$emit('modelValue', value)
+    },
     focus () {
       const $xeDatePicker = this
       const reactData = $xeDatePicker.reactData
@@ -742,7 +747,7 @@ export default defineVxeComponent({
       const { inputValue } = reactData
       $xeDatePicker.dispatchEvent(evnt.type, { value: inputValue }, evnt)
     },
-    emitModel (value: string, evnt: Event | { type: string }) {
+    handleChange (value: string, evnt: Event | { type: string }) {
       const $xeDatePicker = this
       const props = $xeDatePicker
       const reactData = $xeDatePicker.reactData
@@ -750,7 +755,7 @@ export default defineVxeComponent({
       const formItemInfo = $xeDatePicker.formItemInfo
 
       reactData.inputValue = value
-      $xeDatePicker.$emit('modelValue', value)
+      $xeDatePicker.emitModel(value)
       if (XEUtils.toValueString(props.value) !== value) {
         $xeDatePicker.dispatchEvent('change', { value }, evnt as any)
         // 自动更新校验状态
@@ -770,7 +775,7 @@ export default defineVxeComponent({
       reactData.inputValue = value
       if (!isDatePickerType) {
         if (inpImmediate) {
-          $xeDatePicker.emitModel(value, evnt)
+          $xeDatePicker.handleChange(value, evnt)
         } else {
           $xeDatePicker.dispatchEvent('input', { value }, evnt)
         }
@@ -825,7 +830,7 @@ export default defineVxeComponent({
       if (isDatePickerType) {
         $xeDatePicker.hidePanel()
       }
-      $xeDatePicker.emitModel('', evnt)
+      $xeDatePicker.handleChange('', evnt)
       $xeDatePicker.dispatchEvent('clear', { value }, evnt)
     },
     clickSuffixEvent  (evnt: Event) {
@@ -960,19 +965,19 @@ export default defineVxeComponent({
               datetimeRest.push(item)
             }
           })
-          $xeDatePicker.emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
+          $xeDatePicker.handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
         } else {
           // 如果是日期类型
           if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
-            $xeDatePicker.emitModel(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' })
+            $xeDatePicker.handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' })
           } else {
-            $xeDatePicker.emitModel(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' })
+            $xeDatePicker.handleChange(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' })
           }
         }
       } else {
         // 如果为单选
         if (!XEUtils.isEqual(props.value, inpVal)) {
-          $xeDatePicker.emitModel(inpVal, { type: 'update' })
+          $xeDatePicker.handleChange(inpVal, { type: 'update' })
         }
       }
     },
@@ -992,7 +997,7 @@ export default defineVxeComponent({
             if (type === 'time') {
               inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat)
               if (inputValue !== inpDateVal) {
-                $xeDatePicker.emitModel(inpDateVal, { type: 'check' })
+                $xeDatePicker.handleChange(inpDateVal, { type: 'check' })
               }
               reactData.inputValue = inpDateVal
             } else {
@@ -1020,7 +1025,7 @@ export default defineVxeComponent({
             $xeDatePicker.dateRevert()
           }
         } else {
-          $xeDatePicker.emitModel('', { type: 'check' })
+          $xeDatePicker.handleChange('', { type: 'check' })
         }
       }
     },
@@ -1031,7 +1036,7 @@ export default defineVxeComponent({
       const { inputValue } = reactData
       const inpImmediate = $xeDatePicker.computeInpImmediate
       if (!inpImmediate) {
-        $xeDatePicker.emitModel(inputValue, evnt)
+        $xeDatePicker.handleChange(inputValue, evnt)
       }
       $xeDatePicker.afterCheckValue()
       if (!reactData.visiblePanel) {
@@ -1339,10 +1344,10 @@ export default defineVxeComponent({
                 datetimeRest.push(item)
               }
             })
-            $xeDatePicker.emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
+            $xeDatePicker.handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
           } else {
             // 如果是日期类型
-            $xeDatePicker.emitModel(dateMultipleValue.join(','), { type: 'update' })
+            $xeDatePicker.handleChange(dateMultipleValue.join(','), { type: 'update' })
           }
         } else {
           $xeDatePicker.dateChange(dateValue || reactData.currentDate)

package/packages/drawer/src/drawer.ts

@@ -137,6 +137,12 @@ export default defineVxeComponent({
       const $xeDrawer = this
       $xeDrawer.$emit(type, createEvent(evnt, { $drawer: $xeDrawer }, params))
     },
+    emitModel (value: any) {
+      const $xeDrawer = this
+
+      $xeDrawer.$emit('modelValue', value)
+      $xeDrawer.$emit('input', value)
+    },
     open () {
       const $xeDrawer = this
 
@@ -194,7 +200,7 @@ export default defineVxeComponent({
             $xeDrawer.dispatchEvent('before-hide', params, null)
             setTimeout(() => {
               reactData.visible = false
-              $xeDrawer.$emit('input', false)
+              $xeDrawer.emitModel(false)
               $xeDrawer.dispatchEvent('hide', params, null)
             }, 200)
           }
@@ -252,7 +258,7 @@ export default defineVxeComponent({
             }
             const type = ''
             const params = { type }
-            $xeDrawer.$emit('input', true)
+            $xeDrawer.emitModel(true)
             $xeDrawer.dispatchEvent('show', params, null)
           })
         }, 10)
@@ -309,14 +315,14 @@ export default defineVxeComponent({
       return [
         h('div', {
           class: 'vxe-drawer--header-title'
-        }, titleSlot ? getSlotVNs(titleSlot({ $drawer: $xeDrawer })) : (title ? getFuncText(title) : getI18n('vxe.alert.title'))),
+        }, titleSlot ? getSlotVNs(titleSlot({ $drawer: $xeDrawer }, h)) : (title ? getFuncText(title) : getI18n('vxe.alert.title'))),
         h('div', {
           class: 'vxe-drawer--header-right'
         }, [
           cornerSlot
             ? h('div', {
               class: 'vxe-drawer--corner-wrapper'
-            }, getSlotVNs(cornerSlot({ $drawer: $xeDrawer })))
+            }, getSlotVNs(cornerSlot({ $drawer: $xeDrawer }, h)))
             : renderEmptyElement($xeDrawer),
           showClose
             ? h('div', {
@@ -348,7 +354,7 @@ export default defineVxeComponent({
           class: ['vxe-drawer--header', {
             'is--ellipsis': showTitleOverflow
           }]
-        }, headerSlot ? getSlotVNs(headerSlot({ $drawer: $xeDrawer })) : $xeDrawer.renderTitles(h))
+        }, headerSlot ? getSlotVNs(headerSlot({ $drawer: $xeDrawer }, h)) : $xeDrawer.renderTitles(h))
       }
       return renderEmptyElement($xeDrawer)
     },
@@ -367,19 +373,19 @@ export default defineVxeComponent({
         leftSlot
           ? h('div', {
             class: 'vxe-drawer--body-left'
-          }, getSlotVNs(leftSlot({ $drawer: $xeDrawer })))
+          }, getSlotVNs(leftSlot({ $drawer: $xeDrawer }, h)))
           : renderEmptyElement($xeDrawer),
         h('div', {
           class: 'vxe-drawer--body-default'
         }, [
           h('div', {
             class: 'vxe-drawer--content'
-          }, defaultSlot ? getSlotVNs(defaultSlot({ $drawer: $xeDrawer })) : getFuncText(content))
+          }, defaultSlot ? getSlotVNs(defaultSlot({ $drawer: $xeDrawer }, h)) : getFuncText(content))
         ]),
         rightSlot
           ? h('div', {
             class: 'vxe-drawer--body-right'
-          }, getSlotVNs(rightSlot({ $drawer: $xeDrawer })))
+          }, getSlotVNs(rightSlot({ $drawer: $xeDrawer }, h)))
           : renderEmptyElement($xeDrawer),
         h(VxeLoadingComponent, {
           class: 'vxe-drawer--loading',
@@ -432,10 +438,10 @@ export default defineVxeComponent({
       }, [
         h('div', {
           class: 'vxe-drawer--footer-left'
-        }, lfSlot ? getSlotVNs(lfSlot({ $drawer: $xeDrawer })) : []),
+        }, lfSlot ? getSlotVNs(lfSlot({ $drawer: $xeDrawer }, h)) : []),
         h('div', {
           class: 'vxe-drawer--footer-right'
-        }, rfSlot ? getSlotVNs(rfSlot({ $drawer: $xeDrawer })) : btnVNs)
+        }, rfSlot ? getSlotVNs(rfSlot({ $drawer: $xeDrawer }, h)) : btnVNs)
       ])
     },
     renderFooter  (h: CreateElement): VNode {
@@ -448,7 +454,7 @@ export default defineVxeComponent({
       if (props.showFooter) {
         return h('div', {
           class: 'vxe-drawer--footer'
-        }, footerSlot ? getSlotVNs(footerSlot({ $drawer: $xeDrawer })) : [$xeDrawer.renderDefaultFooter(h)])
+        }, footerSlot ? getSlotVNs(footerSlot({ $drawer: $xeDrawer }, h)) : [$xeDrawer.renderDefaultFooter(h)])
       }
       return renderEmptyElement($xeDrawer)
     },
@@ -492,7 +498,7 @@ export default defineVxeComponent({
               asideSlot
                 ? h('div', {
                   class: 'vxe-drawer--aside'
-                }, getSlotVNs(asideSlot({ $drawer: $xeDrawer })))
+                }, getSlotVNs(asideSlot({ $drawer: $xeDrawer }, h)))
                 : renderEmptyElement($xeDrawer),
               h('div', {
                 class: 'vxe-drawer--container'

package/packages/form/index.ts

@@ -0,0 +1,17 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeFormComponent from './src/form'
+import { dynamicApp } from '../dynamics'
+import './render'
+
+export const VxeForm = Object.assign(VxeFormComponent, {
+  install (app: VueConstructor) {
+    app.component(VxeFormComponent.name as string, VxeFormComponent)
+  }
+})
+
+dynamicApp.use(VxeForm)
+VxeUI.component(VxeFormComponent)
+
+export const Form = VxeForm
+export default VxeForm