vxe-pc-ui 3.0.0 → 3.0.1

package/packages/checkbox/src/checkbox.ts

@@ -0,0 +1,176 @@
+import { PropType, CreateElement, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { getFuncText } from '../../ui/src/utils'
+import { getConfig, createEvent, globalMixins, getIcon } from '../../ui'
+
+import type { VxeCheckboxGroupConstructor, VxeCheckboxEmits, ValueOf, CheckboxReactData, VxeComponentSizeType, VxeCheckboxGroupPrivateMethods, VxeCheckboxPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeCheckbox',
+  mixins: [
+    globalMixins.sizeMixin
+  ],
+  props: {
+    value: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.ModelValue>,
+    label: {
+      type: [String, Number] as PropType<VxeCheckboxPropTypes.Label>,
+      default: null
+    },
+    indeterminate: Boolean as PropType<VxeCheckboxPropTypes.Indeterminate>,
+    title: [String, Number] as PropType<VxeCheckboxPropTypes.Title>,
+    checkedValue: {
+      type: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.CheckedValue>,
+      default: true
+    },
+    uncheckedValue: {
+      type: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.UncheckedValue>,
+      default: false
+    },
+    content: [String, Number] as PropType<VxeCheckboxPropTypes.Content>,
+    disabled: {
+      type: Boolean as PropType<VxeCheckboxPropTypes.Disabled>,
+      default: null
+    },
+    size: {
+      type: String as PropType<VxeCheckboxPropTypes.Size>,
+      default: () => getConfig().checkbox.size || getConfig().size
+    }
+  },
+  inject: {
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    },
+    $xeCheckboxGroup: {
+      default: null
+    }
+  },
+  data () {
+    const reactData: CheckboxReactData = {
+    }
+    return {
+      xID: XEUtils.uniqueId(),
+      reactData
+    }
+  },
+  computed: {
+    ...({} as {
+      computeSize(): VxeComponentSizeType
+      $xeForm(): (VxeFormConstructor & VxeFormPrivateMethods) | null
+      formItemInfo(): VxeFormDefines.ProvideItemInfo | null
+      $xeCheckboxGroup(): (VxeCheckboxGroupConstructor & VxeCheckboxGroupPrivateMethods) | null
+    }),
+    computeIsChecked () {
+      const $xeCheckbox = this
+      const props = $xeCheckbox
+      const $xeCheckboxGroup = $xeCheckbox.$xeCheckboxGroup
+
+      if ($xeCheckboxGroup) {
+        return XEUtils.includes($xeCheckboxGroup.value, props.label)
+      }
+      return props.value === props.checkedValue
+    },
+    computeIsDisabled () {
+      const $xeCheckbox = this
+      const props = $xeCheckbox
+      const $xeCheckboxGroup = $xeCheckbox.$xeCheckboxGroup
+
+      const { disabled } = props
+      const isChecked = $xeCheckbox.computeIsChecked
+      if (disabled === null) {
+        if ($xeCheckboxGroup) {
+          const isGroupDisabled = $xeCheckboxGroup.computeIsDisabled
+          const isGroupMaximize = $xeCheckboxGroup.computeIsMaximize
+          return isGroupDisabled || (isGroupMaximize && !isChecked)
+        }
+      }
+      return disabled
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeCheckboxEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeCheckbox = this
+      $xeCheckbox.$emit(type, createEvent(evnt, { $checkbox: $xeCheckbox }, params))
+    },
+    changeEvent  (evnt: Event & { target: { checked: boolean } }) {
+      const $xeCheckbox = this
+      const props = $xeCheckbox
+      const $xeCheckboxGroup = $xeCheckbox.$xeCheckboxGroup
+      const $xeForm = $xeCheckbox.$xeForm
+      const formItemInfo = $xeCheckbox.formItemInfo
+
+      const { checkedValue, uncheckedValue } = props
+      const isDisabled = $xeCheckbox.computeIsDisabled
+      if (!isDisabled) {
+        const checked = evnt.target.checked
+        const value = checked ? checkedValue : uncheckedValue
+        const params = { checked, value, label: props.label }
+        if ($xeCheckboxGroup) {
+          $xeCheckboxGroup.handleChecked(params, evnt)
+        } else {
+          $xeCheckbox.$emit('input', value)
+          $xeCheckbox.dispatchEvent('change', params, evnt)
+          // 自动更新校验状态
+          if ($xeForm && formItemInfo) {
+            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
+          }
+        }
+      }
+    },
+
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      const $xeCheckbox = this
+      const props = $xeCheckbox
+      const slots = $xeCheckbox.$scopedSlots
+
+      const vSize = $xeCheckbox.computeSize
+      const isDisabled = $xeCheckbox.computeIsDisabled
+      const isChecked = $xeCheckbox.computeIsChecked
+      const indeterminate = !isChecked && props.indeterminate
+      return h('label', {
+        class: ['vxe-checkbox', {
+          [`size--${vSize}`]: vSize,
+          'is--indeterminate': indeterminate,
+          'is--disabled': isDisabled,
+          'is--checked': isChecked
+        }],
+        attrs: {
+          title: props.title
+        }
+      }, [
+        h('input', {
+          class: 'vxe-checkbox--input',
+          domProps: {
+            checked: isChecked
+          },
+          attrs: {
+            type: 'checkbox',
+            disabled: isDisabled
+          },
+          on: {
+            change: $xeCheckbox.changeEvent
+          }
+        }),
+        h('span', {
+          class: ['vxe-checkbox--icon', indeterminate ? getIcon().CHECKBOX_INDETERMINATE : (isChecked ? getIcon().CHECKBOX_CHECKED : getIcon().CHECKBOX_UNCHECKED)]
+        }),
+        h('span', {
+          class: 'vxe-checkbox--label'
+        }, slots.default ? slots.default({}) : getFuncText(props.content))
+      ])
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+})

package/packages/checkbox/src/group.ts

@@ -0,0 +1,178 @@
+import { PropType, CreateElement, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { getConfig, createEvent, globalMixins } from '../../ui'
+import VxeCheckboxComponent from './checkbox'
+
+import type { VxeCheckboxGroupEmits, VxeCheckboxPropTypes, ValueOf, CheckboxGroupReactData, VxeComponentSizeType, VxeCheckboxGroupPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeCheckboxGroup',
+  mixins: [
+    globalMixins.sizeMixin
+  ],
+  props: {
+    value: Array as PropType<VxeCheckboxGroupPropTypes.ModelValue>,
+    options: Array as PropType<VxeCheckboxGroupPropTypes.Options>,
+    optionProps: Object as PropType<VxeCheckboxGroupPropTypes.OptionProps>,
+    disabled: {
+      type: Boolean as PropType<VxeCheckboxGroupPropTypes.Disabled>,
+      default: null
+    },
+    max: {
+      type: [String, Number] as PropType<VxeCheckboxGroupPropTypes.Max>,
+      default: null
+    },
+    size: {
+      type: String as PropType<VxeCheckboxGroupPropTypes.Size>,
+      default: () => getConfig().checkboxGroup.size || getConfig().size
+    }
+  },
+  inject: {
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    }
+  },
+  provide () {
+    const $xeCheckboxGroup = this
+    return {
+      $xeCheckboxGroup
+    }
+  },
+  data () {
+    const reactData: CheckboxGroupReactData = {
+    }
+    return {
+      xID: XEUtils.uniqueId(),
+      reactData
+    }
+  },
+  computed: {
+    ...({} as {
+      computeSize(): VxeComponentSizeType
+      $xeForm(): (VxeFormConstructor & VxeFormPrivateMethods) | null
+      formItemInfo(): VxeFormDefines.ProvideItemInfo | null
+    }),
+    computeIsDisabled () {
+      const $xeCheckboxGroup = this
+      const props = $xeCheckboxGroup
+      const $xeForm = $xeCheckboxGroup.$xeForm
+
+      const { disabled } = props
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.readonly || $xeForm.disabled
+        }
+        return false
+      }
+      return disabled
+    },
+    computeIsMaximize () {
+      const $xeCheckboxGroup = this
+      const props = $xeCheckboxGroup
+
+      const { value, max } = props
+      if (max) {
+        return (value ? value.length : 0) >= XEUtils.toNumber(max)
+      }
+      return false
+    },
+    computePropsOpts () {
+      const $xeCheckboxGroup = this
+      const props = $xeCheckboxGroup
+
+      return Object.assign({}, props.optionProps)
+    },
+    computeLabelField () {
+      const $xeCheckboxGroup = this
+
+      const propsOpts = $xeCheckboxGroup.computePropsOpts as VxeCheckboxGroupPropTypes.OptionProps
+      return propsOpts.label || 'label'
+    },
+    computeValueField () {
+      const $xeCheckboxGroup = this
+
+      const propsOpts = $xeCheckboxGroup.computePropsOpts as VxeCheckboxGroupPropTypes.OptionProps
+      return propsOpts.value || 'value'
+    },
+    computeDisabledField () {
+      const $xeCheckboxGroup = this
+
+      const propsOpts = $xeCheckboxGroup.computePropsOpts as VxeCheckboxGroupPropTypes.OptionProps
+      return propsOpts.disabled || 'disabled'
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeCheckboxGroupEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeCheckboxGroup = this
+      $xeCheckboxGroup.$emit(type, createEvent(evnt, { $checkboxGroup: $xeCheckboxGroup }, params))
+    },
+    handleChecked (params: {
+      checked: boolean;
+      value: VxeCheckboxPropTypes.ModelValue;
+      label: VxeCheckboxPropTypes.Label;
+  }, evnt: Event) {
+      const $xeCheckboxGroup = this
+      const props = $xeCheckboxGroup
+      const $xeForm = $xeCheckboxGroup.$xeForm
+      const formItemInfo = $xeCheckboxGroup.formItemInfo
+
+      const { checked, label } = params
+      const checklist = props.value || []
+      const checkIndex = checklist.indexOf(label)
+      if (checked) {
+        if (checkIndex === -1) {
+          checklist.push(label)
+        }
+      } else {
+        checklist.splice(checkIndex, 1)
+      }
+      $xeCheckboxGroup.$emit('input', checklist)
+      $xeCheckboxGroup.dispatchEvent('change', Object.assign({ checklist }, params), evnt)
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, checklist)
+      }
+    },
+
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      const $xeCheckboxGroup = this
+      const props = $xeCheckboxGroup
+      const slots = $xeCheckboxGroup.$scopedSlots
+
+      const { options } = props
+      const defaultSlot = slots.default
+      const valueField = $xeCheckboxGroup.computeValueField as 'value'
+      const labelField = $xeCheckboxGroup.computeLabelField as 'label'
+      const disabledField = $xeCheckboxGroup.computeDisabledField as 'disabled'
+      return h('div', {
+        class: 'vxe-checkbox-group'
+      }, defaultSlot
+        ? defaultSlot({})
+        : (options
+            ? options.map(item => {
+              return h(VxeCheckboxComponent, {
+                props: {
+                  label: item[valueField],
+                  content: item[labelField],
+                  disabled: item[disabledField]
+                }
+              })
+            })
+            : []))
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+})

package/packages/checkbox-group/index.ts

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

package/packages/components.ts

@@ -12,10 +12,10 @@ import VxeButton from './button'
 import VxeButtonGroup from './button-group'
 // 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'
@@ -28,11 +28,11 @@ import VxeDrawer, { DrawerController } from './drawer'
 // 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'
@@ -46,10 +46,10 @@ 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,10 +57,10 @@ 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'
@@ -83,10 +83,10 @@ const components = [
   VxeButtonGroup,
   // VxeCalendar,
   VxeCard,
-  // VxeCarousel,
-  // VxeCarouselItem,
-  // VxeCheckbox,
-  // VxeCheckboxGroup,
+  VxeCarousel,
+  VxeCarouselItem,
+  VxeCheckbox,
+  VxeCheckboxGroup,
   VxeCol,
   // VxeCollapse,
   // VxeCollapsePane,
@@ -99,11 +99,11 @@ const components = [
   // VxeFormItem,
   // VxeFormView,
   VxeIcon,
-  // VxeIconPicker,
+  VxeIconPicker,
   VxeImage,
   VxeImageGroup,
   VxeImagePreview,
-  // VxeInput,
+  VxeInput,
   VxeLayoutAside,
   VxeLayoutBody,
   VxeLayoutContainer,
@@ -117,10 +117,10 @@ const components = [
   VxeMenu,
   VxeModal,
   VxeNumberInput,
-  // VxeOptgroup,
-  // VxeOption,
-  // VxePager,
-  // VxePasswordInput,
+  VxeOptgroup,
+  VxeOption,
+  VxePager,
+  VxePasswordInput,
   VxePrintPageBreak,
   VxePrint,
   VxePulldown,
@@ -128,10 +128,10 @@ const components = [
   VxeRadioButton,
   VxeRadioGroup,
   VxeRow,
-  // VxeSelect,
+  VxeSelect,
   VxeSwitch,
-  // VxeTabPane,
-  // VxeTabs,
+  VxeTabPane,
+  VxeTabs,
   VxeTag,
   VxeText,
   VxeTextarea,
@@ -174,10 +174,10 @@ export * from './button'
 export * from './button-group'
 // 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'
@@ -190,11 +190,11 @@ export * from './drawer'
 // 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'
@@ -208,10 +208,10 @@ 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,10 +219,10 @@ 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'

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

@@ -111,6 +111,9 @@ export default defineVxeComponent({
     $xeModal: {
       default: null
     },
+    $xeDrawer: {
+      default: null
+    },
     $xeTable: {
       default: null
     },

package/packages/icon-picker/index.ts

@@ -0,0 +1,16 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeIconPickerComponent from './src/icon-picker'
+import { dynamicApp } from '../dynamics'
+
+export const VxeIconPicker = Object.assign(VxeIconPickerComponent, {
+  install: function (app: VueConstructor) {
+    app.component(VxeIconPickerComponent.name as string, VxeIconPickerComponent)
+  }
+})
+
+dynamicApp.use(VxeIconPicker)
+VxeUI.component(VxeIconPickerComponent)
+
+export const IconPicker = VxeIconPicker
+export default VxeIconPicker