vxe-pc-ui 3.0.0 → 3.0.2

package/packages/components.ts

@@ -10,29 +10,29 @@ 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 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'
+import VxeIconPicker from './icon-picker'
 import VxeImage from './image'
 import VxeImageGroup from './image-group'
 import VxeImagePreview from './image-preview'
-// import VxeInput from './input'
+import VxeInput from './input'
 import VxeLayoutAside from './layout-aside'
 import VxeLayoutBody from './layout-body'
 import VxeLayoutContainer from './layout-container'
@@ -41,15 +41,15 @@ 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'
 import VxeNumberInput from './number-input'
-// import VxeOptgroup from './optgroup'
-// import VxeOption from './option'
-// import VxePager from './pager'
-// import VxePasswordInput from './password-input'
+import VxeOptgroup from './optgroup'
+import VxeOption from './option'
+import VxePager from './pager'
+import VxePasswordInput from './password-input'
 import VxePrintPageBreak from './print-page-break'
 import VxePrint from './print'
 import VxePulldown from './pulldown'
@@ -57,17 +57,17 @@ import VxeRadio from './radio'
 import VxeRadioButton from './radio-button'
 import VxeRadioGroup from './radio-group'
 import VxeRow from './row'
-// import VxeSelect from './select'
+import VxeSelect from './select'
 import VxeSwitch from './switch'
-// import VxeTabPane from './tab-pane'
-// import VxeTabs from './tabs'
+import VxeTabPane from './tab-pane'
+import VxeTabs from './tabs'
 import VxeTag from './tag'
 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,29 +81,29 @@ const components = [
   VxeBreadcrumbItem,
   VxeButton,
   VxeButtonGroup,
-  // VxeCalendar,
+  VxeCalendar,
   VxeCard,
-  // VxeCarousel,
-  // VxeCarouselItem,
-  // VxeCheckbox,
-  // VxeCheckboxGroup,
+  VxeCarousel,
+  VxeCarouselItem,
+  VxeCheckbox,
+  VxeCheckboxGroup,
   VxeCol,
-  // VxeCollapse,
-  // VxeCollapsePane,
+  VxeCollapse,
+  VxeCollapsePane,
   VxeCountdown,
   VxeDatePicker,
   VxeDrawer,
-  // VxeForm,
+  VxeForm,
   // VxeFormDesign,
-  // VxeFormGather,
-  // VxeFormItem,
+  VxeFormGather,
+  VxeFormItem,
   // VxeFormView,
   VxeIcon,
-  // VxeIconPicker,
+  VxeIconPicker,
   VxeImage,
   VxeImageGroup,
   VxeImagePreview,
-  // VxeInput,
+  VxeInput,
   VxeLayoutAside,
   VxeLayoutBody,
   VxeLayoutContainer,
@@ -112,15 +112,15 @@ const components = [
   VxeLink,
   // VxeListDesign,
   // VxeListView,
-  // VxeList,
+  VxeList,
   VxeLoading,
   VxeMenu,
   VxeModal,
   VxeNumberInput,
-  // VxeOptgroup,
-  // VxeOption,
-  // VxePager,
-  // VxePasswordInput,
+  VxeOptgroup,
+  VxeOption,
+  VxePager,
+  VxePasswordInput,
   VxePrintPageBreak,
   VxePrint,
   VxePulldown,
@@ -128,17 +128,17 @@ const components = [
   VxeRadioButton,
   VxeRadioGroup,
   VxeRow,
-  // VxeSelect,
+  VxeSelect,
   VxeSwitch,
-  // VxeTabPane,
-  // VxeTabs,
+  VxeTabPane,
+  VxeTabs,
   VxeTag,
   VxeText,
   VxeTextarea,
   VxeTip,
   VxeTooltip,
-  // VxeTree,
-  // VxeTreeSelect,
+  VxeTree,
+  VxeTreeSelect,
   VxeUpload
 ]
 
@@ -172,29 +172,29 @@ 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 './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'
+export * from './icon-picker'
 export * from './image'
 export * from './image-group'
 export * from './image-preview'
-// export * from './input'
+export * from './input'
 export * from './layout-aside'
 export * from './layout-body'
 export * from './layout-container'
@@ -203,15 +203,15 @@ 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'
 export * from './number-input'
-// export * from './optgroup'
-// export * from './option'
-// export * from './pager'
-// export * from './password-input'
+export * from './optgroup'
+export * from './option'
+export * from './pager'
+export * from './password-input'
 export * from './print-page-break'
 export * from './print'
 export * from './pulldown'
@@ -219,15 +219,15 @@ export * from './radio'
 export * from './radio-button'
 export * from './radio-group'
 export * from './row'
-// export * from './select'
+export * from './select'
 export * from './switch'
-// export * from './tab-pane'
-// export * from './tabs'
+export * from './tab-pane'
+export * from './tabs'
 export * from './tag'
 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

@@ -111,6 +111,9 @@ export default defineVxeComponent({
     $xeModal: {
       default: null
     },
+    $xeDrawer: {
+      default: null
+    },
     $xeTable: {
       default: null
     },
@@ -695,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
@@ -739,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
@@ -747,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)
         // 自动更新校验状态
@@ -767,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)
         }
@@ -822,7 +830,7 @@ export default defineVxeComponent({
       if (isDatePickerType) {
         $xeDatePicker.hidePanel()
       }
-      $xeDatePicker.emitModel('', evnt)
+      $xeDatePicker.handleChange('', evnt)
       $xeDatePicker.dispatchEvent('clear', { value }, evnt)
     },
     clickSuffixEvent  (evnt: Event) {
@@ -957,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' })
         }
       }
     },
@@ -989,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 {
@@ -1017,7 +1025,7 @@ export default defineVxeComponent({
             $xeDatePicker.dateRevert()
           }
         } else {
-          $xeDatePicker.emitModel('', { type: 'check' })
+          $xeDatePicker.handleChange('', { type: 'check' })
         }
       }
     },
@@ -1028,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) {
@@ -1336,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