vxe-pc-ui 3.0.0 → 3.0.1

package/packages/password-input/index.ts

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

package/packages/password-input/src/password-input.ts

@@ -0,0 +1,427 @@
+import { CreateElement, PropType, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { getConfig, getIcon, getI18n, createEvent, globalMixins, renderEmptyElement } from '../../ui'
+import { getFuncText } from '../../ui/src/utils'
+import { getSlotVNs } from '../..//ui/src/vn'
+
+import type { VxePasswordInputEmits, VxeComponentSizeType, PasswordInputReactData, ValueOf, VxePasswordInputPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxePasswordInput',
+  mixins: [
+    globalMixins.sizeMixin
+  ],
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
+  props: {
+    value: String as PropType<VxePasswordInputPropTypes.ModelValue>,
+    name: String as PropType<VxePasswordInputPropTypes.Name>,
+    clearable: { type: Boolean as PropType<VxePasswordInputPropTypes.Clearable>, default: () => getConfig().passwordInput.clearable },
+    readonly: Boolean as PropType<VxePasswordInputPropTypes.Readonly>,
+    disabled: Boolean as PropType<VxePasswordInputPropTypes.Disabled>,
+    maxLength: [String, Number] as PropType<VxePasswordInputPropTypes.MaxLength>,
+    placeholder: String as PropType<VxePasswordInputPropTypes.Placeholder>,
+    autoComplete: {
+      type: String as PropType<VxePasswordInputPropTypes.AutoComplete>,
+      default: 'off'
+    },
+    className: String as PropType<VxePasswordInputPropTypes.ClassName>,
+    size: { type: String as PropType<VxePasswordInputPropTypes.Size>, default: () => getConfig().passwordInput.size || getConfig().size },
+    prefixIcon: String as PropType<VxePasswordInputPropTypes.PrefixIcon>,
+    suffixIcon: String as PropType<VxePasswordInputPropTypes.SuffixIcon>,
+
+    // 已废弃
+    autocomplete: String as PropType<VxePasswordInputPropTypes.Autocomplete>
+  },
+  inject: {
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    }
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: PasswordInputReactData = {
+      showPwd: false,
+      isActivated: false,
+      inputValue: ''
+    }
+    return {
+      xID,
+      reactData
+    }
+  },
+  computed: {
+    ...({} as {
+      computeSize(): VxeComponentSizeType
+      $xeForm(): (VxeFormConstructor & VxeFormPrivateMethods) | null
+      formItemInfo(): VxeFormDefines.ProvideItemInfo | null
+    }),
+    computeIsClearable () {
+      const $xePasswordInput = this
+      const props = $xePasswordInput
+
+      return props.clearable
+    },
+    computeInpReadonly () {
+      const $xePasswordInput = this
+      const props = $xePasswordInput
+
+      const { readonly } = props
+      return readonly
+    },
+    computeInpPlaceholder () {
+      const $xePasswordInput = this
+      const props = $xePasswordInput
+
+      const { placeholder } = props
+      if (placeholder) {
+        return getFuncText(placeholder)
+      }
+      const globalPlaceholder = getConfig().passwordInput.placeholder
+      if (globalPlaceholder) {
+        return getFuncText(globalPlaceholder)
+      }
+      return getI18n('vxe.base.pleaseInput')
+    },
+    computeInputType () {
+      const $xePasswordInput = this
+      const reactData = $xePasswordInput.reactData
+
+      const { showPwd } = reactData
+      if (showPwd) {
+        return 'text'
+      }
+      return 'password'
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxePasswordInputEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xePasswordInput = this
+      $xePasswordInput.$emit(type, createEvent(evnt, { $passwordInput: $xePasswordInput }, params))
+    },
+    focus () {
+      const $xePasswordInput = this
+      const reactData = $xePasswordInput.reactData
+
+      const inputElem = $xePasswordInput.$refs.refInputTarget as HTMLInputElement
+      reactData.isActivated = true
+      inputElem.focus()
+      return $xePasswordInput.$nextTick()
+    },
+    blur () {
+      const $xePasswordInput = this
+      const reactData = $xePasswordInput.reactData
+
+      const inputElem = $xePasswordInput.$refs.refInputTarget as HTMLInputElement
+      inputElem.blur()
+      reactData.isActivated = false
+      return $xePasswordInput.$nextTick()
+    },
+    select () {
+      const $xePasswordInput = this
+      const reactData = $xePasswordInput.reactData
+
+      const inputElem = $xePasswordInput.$refs.refInputTarget as HTMLInputElement
+      inputElem.select()
+      reactData.isActivated = false
+      return $xePasswordInput.$nextTick()
+    },
+    triggerEvent  (evnt: Event & { type: 'input' | 'change' | 'click' | 'focus' | 'blur' }) {
+      const $xePasswordInput = this
+      const reactData = $xePasswordInput.reactData
+
+      const { inputValue } = reactData
+      $xePasswordInput.dispatchEvent(evnt.type, { value: inputValue }, evnt)
+    },
+    emitInputEvent (value: any, evnt: Event) {
+      const $xePasswordInput = this
+      const reactData = $xePasswordInput.reactData
+
+      reactData.inputValue = value
+      $xePasswordInput.dispatchEvent('input', { value }, evnt)
+    },
+    inputEvent (evnt: Event & { type: 'input' }) {
+      const $xePasswordInput = this
+
+      const inputElem = evnt.target as HTMLInputElement
+      const value = inputElem.value
+      $xePasswordInput.emitInputEvent(value, evnt)
+    },
+    emitModel (value: string, evnt: Event | { type: string }) {
+      const $xePasswordInput = this
+      const props = $xePasswordInput
+      const reactData = $xePasswordInput.reactData
+      const $xeForm = $xePasswordInput.$xeForm
+      const formItemInfo = $xePasswordInput.formItemInfo
+
+      reactData.inputValue = value
+      $xePasswordInput.$emit('modelValue', value)
+      $xePasswordInput.dispatchEvent('input', { value }, evnt as any)
+      if (XEUtils.toValueString(props.value) !== value) {
+        $xePasswordInput.dispatchEvent('change', { value }, evnt as any)
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
+        }
+      }
+    },
+    changeEvent (evnt: Event & { type: 'change' }) {
+      const $xePasswordInput = this
+      const reactData = $xePasswordInput.reactData
+      const $xeForm = $xePasswordInput.$xeForm
+      const formItemInfo = $xePasswordInput.formItemInfo
+
+      $xePasswordInput.triggerEvent(evnt)
+      const { inputValue } = reactData
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, inputValue)
+      }
+    },
+    focusEvent (evnt: Event & { type: 'focus' }) {
+      const $xePasswordInput = this
+      const reactData = $xePasswordInput.reactData
+
+      reactData.isActivated = true
+      $xePasswordInput.triggerEvent(evnt)
+    },
+    blurEvent (evnt: Event & { type: 'blur' }) {
+      const $xePasswordInput = this
+      const reactData = $xePasswordInput.reactData
+
+      const { inputValue } = reactData
+      $xePasswordInput.dispatchEvent('blur', { value: inputValue }, evnt)
+    },
+    passwordToggleEvent  (evnt: Event) {
+      const $xePasswordInput = this
+      const props = $xePasswordInput
+      const reactData = $xePasswordInput.reactData
+
+      const { readonly, disabled } = props
+      const { showPwd } = reactData
+      if (!disabled && !readonly) {
+        reactData.showPwd = !showPwd
+      }
+      $xePasswordInput.dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt)
+    },
+    clickEvent  (evnt: Event & { type: 'click' }) {
+      const $xePasswordInput = this
+
+      $xePasswordInput.triggerEvent(evnt)
+    },
+    clearValueEvent  (evnt: Event, value: VxePasswordInputPropTypes.ModelValue) {
+      const $xePasswordInput = this
+
+      $xePasswordInput.focus()
+      $xePasswordInput.emitModel('', evnt)
+      $xePasswordInput.dispatchEvent('clear', { value }, evnt)
+    },
+    clickSuffixEvent  (evnt: Event) {
+      const $xePasswordInput = this
+      const props = $xePasswordInput
+      const reactData = $xePasswordInput.reactData
+
+      const { disabled } = props
+      if (!disabled) {
+        const { inputValue } = reactData
+        $xePasswordInput.dispatchEvent('suffix-click', { value: inputValue }, evnt)
+      }
+    },
+    clickPrefixEvent (evnt: Event) {
+      const $xePasswordInput = this
+      const props = $xePasswordInput
+      const reactData = $xePasswordInput.reactData
+
+      const { disabled } = props
+      if (!disabled) {
+        const { inputValue } = reactData
+        $xePasswordInput.dispatchEvent('prefix-click', { value: inputValue }, evnt)
+      }
+    },
+
+    //
+    // Render
+    //
+    renderPasswordIcon (h: CreateElement) {
+      const $xePasswordInput = this
+      const reactData = $xePasswordInput.reactData
+
+      const { showPwd } = reactData
+      return h('div', {
+        class: 'password-input--control-icon',
+        on: {
+          click: $xePasswordInput.passwordToggleEvent
+        }
+      }, [
+        h('i', {
+          class: ['password-input--password-icon', showPwd ? getIcon().PASSWORD_INPUT_SHOW_PWD : getIcon().PASSWORD_INPUT_HIDE_PWD]
+        })
+      ])
+    },
+    renderPrefixIcon (h: CreateElement) {
+      const $xePasswordInput = this
+      const props = $xePasswordInput
+      const slots = $xePasswordInput.$scopedSlots
+
+      const { prefixIcon } = props
+      const prefixSlot = slots.prefix
+      return prefixSlot || prefixIcon
+        ? h('div', {
+          class: 'password-input--prefix',
+          on: {
+            click: $xePasswordInput.clickPrefixEvent
+          }
+        }, [
+          h('div', {
+            class: 'password-input--prefix-icon'
+          }, prefixSlot
+            ? getSlotVNs(prefixSlot({}))
+            : [
+                h('i', {
+                  class: prefixIcon
+                })
+              ])
+        ])
+        : null
+    },
+    renderSuffixIcon  (h: CreateElement) {
+      const $xePasswordInput = this
+      const props = $xePasswordInput
+      const slots = $xePasswordInput.$scopedSlots
+      const reactData = $xePasswordInput.reactData
+
+      const { disabled, suffixIcon } = props
+      const { inputValue } = reactData
+      const suffixSlot = slots.suffix
+      const isClearable = $xePasswordInput.computeIsClearable
+      return isClearable || suffixSlot || suffixIcon
+        ? h('div', {
+          class: ['password-input--suffix', {
+            'is--clear': isClearable && !disabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
+          }]
+        }, [
+          isClearable
+            ? h('div', {
+              class: 'password-input--clear-icon',
+              on: {
+                click: $xePasswordInput.clearValueEvent
+              }
+            }, [
+              h('i', {
+                class: getIcon().INPUT_CLEAR
+              })
+            ])
+            : renderEmptyElement($xePasswordInput),
+          $xePasswordInput.renderExtraSuffixIcon(h),
+          suffixSlot || suffixIcon
+            ? h('div', {
+              class: 'password-input--suffix-icon',
+              on: {
+                click: $xePasswordInput.clickSuffixEvent
+              }
+            }, suffixSlot
+              ? getSlotVNs(suffixSlot({}))
+              : [
+                  h('i', {
+                    class: suffixIcon
+                  })
+                ])
+            : renderEmptyElement($xePasswordInput)
+        ])
+        : null
+    },
+    renderExtraSuffixIcon (h: CreateElement) {
+      const $xePasswordInput = this
+
+      return $xePasswordInput.renderPasswordIcon(h)
+    },
+    renderVN (h: CreateElement): VNode {
+      const $xePasswordInput = this
+      const props = $xePasswordInput
+      const reactData = $xePasswordInput.reactData
+
+      const { className, name, disabled, readonly, autocomplete, autoComplete, maxLength } = props
+      const { inputValue, isActivated } = reactData
+      const vSize = $xePasswordInput.computeSize
+      const inpReadonly = $xePasswordInput.computeInpReadonly
+      const inputType = $xePasswordInput.computeInputType
+      const inpPlaceholder = $xePasswordInput.computeInpPlaceholder
+      const isClearable = $xePasswordInput.computeIsClearable
+      const prefix = $xePasswordInput.renderPrefixIcon(h)
+      const suffix = $xePasswordInput.renderSuffixIcon(h)
+      return h('div', {
+        ref: 'refElem',
+        class: ['password-input', className, {
+          [`size--${vSize}`]: vSize,
+          'is--prefix': !!prefix,
+          'is--suffix': !!suffix,
+          'is--readonly': readonly,
+          'is--disabled': disabled,
+          'is--active': isActivated,
+          'show--clear': isClearable && !disabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
+        }],
+        attrs: {
+          spellcheck: false
+        }
+      }, [
+        prefix || renderEmptyElement($xePasswordInput),
+        h('div', {
+          class: 'password-input--wrapper'
+        }, [
+          h('input', {
+            ref: 'refInputTarget',
+            class: 'password-input--inner',
+            domProps: {
+              value: inputValue
+            },
+            attrs: {
+              name,
+              type: inputType,
+              placeholder: inpPlaceholder,
+              readonly: inpReadonly,
+              disabled,
+              autocomplete: autocomplete || autoComplete,
+              maxlength: maxLength
+            },
+            on: {
+              click: $xePasswordInput.clickEvent,
+              input: $xePasswordInput.inputEvent,
+              change: $xePasswordInput.changeEvent,
+              focus: $xePasswordInput.focusEvent,
+              blur: $xePasswordInput.blurEvent
+            }
+          })
+        ]),
+        suffix || renderEmptyElement($xePasswordInput)
+      ])
+    }
+  },
+  watch: {
+    value (val) {
+      const $xePasswordInput = this
+      const reactData = $xePasswordInput.reactData
+
+      reactData.inputValue = val
+    }
+  },
+  created () {
+    const $xePasswordInput = this
+    const props = $xePasswordInput
+    const reactData = $xePasswordInput.reactData
+
+    reactData.inputValue = props.value
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+})

package/packages/pulldown/src/pulldown.ts

@@ -46,6 +46,9 @@ export default defineVxeComponent({
     $xeModal: {
       default: null
     },
+    $xeDrawer: {
+      default: null
+    },
     $xeTable: {
       default: null
     },
@@ -54,6 +57,7 @@ export default defineVxeComponent({
     }
   },
   data () {
+    const xID = XEUtils.uniqueId()
     const reactData: PulldownReactData = {
       initialized: false,
       panelIndex: 0,
@@ -67,7 +71,7 @@ export default defineVxeComponent({
       hpTimeout: undefined
     }
     return {
-      xID: XEUtils.uniqueId(),
+      xID,
       reactData,
       internalData
     }

package/packages/select/index.ts

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

package/packages/select/src/optgroup.ts

@@ -0,0 +1,107 @@
+import { PropType, CreateElement, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import { createEvent, globalMixins } from '../../ui'
+import XEUtils from 'xe-utils'
+import { createOption, watchOption, destroyOption, assembleOption } from './util'
+import { OptionInfo } from './option-info'
+
+import type { VxeSelectConstructor, VxeOptgroupPropTypes, VxeComponentSizeType, VxeOptgroupEmits, ValueOf, OptgroupReactData } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeOptgroup',
+  mixins: [
+    globalMixins.sizeMixin
+  ],
+  props: {
+    label: {
+      type: [String, Number, Boolean] as PropType<VxeOptgroupPropTypes.Label>,
+      default: ''
+    },
+    visible: {
+      type: Boolean as PropType<VxeOptgroupPropTypes.Visible>,
+      default: null
+    },
+    className: [String, Function] as PropType<VxeOptgroupPropTypes.ClassName>,
+    disabled: Boolean as PropType<VxeOptgroupPropTypes.Disabled>
+  },
+  inject: {
+    $xeSelect: {
+      default: null
+    }
+  },
+  provide () {
+    const $xeOptgroup = this
+    return {
+      $xeOptgroup
+    }
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: OptgroupReactData = {
+    }
+    const optionConfig = {} as OptionInfo
+    return {
+      xID,
+      reactData,
+      optionConfig
+    }
+  },
+  computed: {
+    ...({} as {
+      computeSize(): VxeComponentSizeType
+      $xeSelect(): VxeSelectConstructor
+    })
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeOptgroupEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeOptgroup = this
+      $xeOptgroup.$emit(type, createEvent(evnt, { $optgroup: $xeOptgroup }, params))
+    },
+
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      const $xeOptgroup = this
+      const slots = $xeOptgroup.$scopedSlots
+      const defaultSlot = slots.default
+
+      return h('div', {
+        ref: 'elem'
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+  },
+  created () {
+    const $xeOptgroup = this
+    const props = $xeOptgroup
+    const slots = $xeOptgroup.$scopedSlots
+    const $xeSelect = $xeOptgroup.$xeSelect
+
+    const optionConfig = createOption($xeSelect, props)
+    optionConfig.slots = slots
+    $xeOptgroup.optionConfig = optionConfig
+
+    watchOption($xeOptgroup, optionConfig)
+  },
+  mounted () {
+    const $xeOptgroup = this
+    const optionConfig = $xeOptgroup.optionConfig
+    const $xeSelect = $xeOptgroup.$xeSelect
+
+    const el = $xeOptgroup.$refs.elem as HTMLDivElement
+    assembleOption($xeSelect, el, optionConfig)
+  },
+  beforeDestroy () {
+    const $xeOptgroup = this
+    const optionConfig = $xeOptgroup.optionConfig
+    const $xeSelect = $xeOptgroup.$xeSelect
+
+    destroyOption($xeSelect, optionConfig)
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+})

package/packages/select/src/option-info.ts

@@ -0,0 +1,20 @@
+import XEUtils from 'xe-utils'
+
+export class OptionInfo {
+  constructor ($xeselect: any, _vm: any) {
+    Object.assign(this, {
+      id: XEUtils.uniqueId('option_'),
+      value: _vm.value,
+      label: _vm.label,
+      visible: _vm.visible,
+      className: _vm.className,
+      disabled: _vm.disabled
+    })
+  }
+
+  update (name: any, value: any) {
+    this[name] = value
+  }
+
+  [key: string]: any
+}