vxe-pc-ui 3.0.0 → 3.0.2

package/packages/checkbox/src/checkbox.ts

@@ -0,0 +1,182 @@
+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))
+    },
+    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
+      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.emitModel(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,184 @@
+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))
+    },
+    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) {
+      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.emitModel(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/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