vxe-pc-ui 0.0.2 → 0.1.0

package/packages/select/src/util.ts

@@ -0,0 +1,47 @@
+import { watch } from 'vue'
+import XEUtils from 'xe-utils'
+import { OptionInfo } from './optionInfo'
+
+import { VxeSelectConstructor } from '../../../types'
+
+export interface XEOptionProvide {
+  option: OptionInfo;
+}
+
+export function isOption (option: any) {
+  return option instanceof OptionInfo
+}
+
+export function createOption ($xeselect: VxeSelectConstructor, _vm: any) {
+  return isOption(_vm) ? _vm : new OptionInfo($xeselect, _vm)
+}
+
+export function watchOption (props: any, option: OptionInfo) {
+  Object.keys(props).forEach(name => {
+    watch(() => props[name], (value: any) => {
+      option.update(name, value)
+    })
+  })
+}
+
+export function assemOption ($xeselect: VxeSelectConstructor, el: HTMLDivElement, option: OptionInfo, optgroup?: XEOptionProvide | null) {
+  const { reactData } = $xeselect
+  const { staticOptions } = reactData
+  const parentElem = el.parentNode
+  const parentOption = optgroup ? optgroup.option : null
+  const parentCols = parentOption ? parentOption.options : staticOptions
+  if (parentElem && parentCols) {
+    parentCols.splice(XEUtils.arrayIndexOf(parentElem.children, el), 0, option)
+    reactData.staticOptions = staticOptions.slice(0)
+  }
+}
+
+export function destroyOption ($xeselect: VxeSelectConstructor, option: OptionInfo) {
+  const { reactData } = $xeselect
+  const { staticOptions } = reactData
+  const matchObj = XEUtils.findTree(staticOptions, (item) => item.id === option.id, { children: 'options' })
+  if (matchObj) {
+    matchObj.items.splice(matchObj.index, 1)
+  }
+  reactData.staticOptions = staticOptions.slice(0)
+}

package/packages/switch/index.ts

@@ -0,0 +1,15 @@
+import { App } from 'vue'
+import VxeSwitchComponent from './src/switch'
+import { dynamicApp } from '../dynamics'
+
+export const VxeSwitch = Object.assign(VxeSwitchComponent, {
+  install: function (app: App) {
+    app.component(VxeSwitchComponent.name as string, VxeSwitchComponent)
+  }
+})
+
+export const Switch = VxeSwitch
+
+dynamicApp.component(VxeSwitchComponent.name as string, VxeSwitchComponent)
+
+export default VxeSwitch

package/packages/switch/src/switch.ts

@@ -0,0 +1,171 @@
+import { defineComponent, h, ref, Ref, computed, reactive, nextTick, createCommentVNode, PropType, inject } from 'vue'
+import XEUtils from 'xe-utils'
+import globalConfigStore from '../../ui/src/globalStore'
+import { useSize } from '../../hooks/size'
+import { getFuncText } from '../../ui/src/utils'
+
+import { VxeSwitchPropTypes, VxeSwitchConstructor, VxeSwitchEmits, SwitchReactData, SwitchMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeSwitch',
+  props: {
+    modelValue: [String, Number, Boolean] as PropType<VxeSwitchPropTypes.ModelValue>,
+    disabled: Boolean as PropType<VxeSwitchPropTypes.Disabled>,
+    size: { type: String as PropType<VxeSwitchPropTypes.Size>, default: () => globalConfigStore.switch.size || globalConfigStore.size },
+    openLabel: String as PropType<VxeSwitchPropTypes.OpenLabel>,
+    closeLabel: String as PropType<VxeSwitchPropTypes.CloseLabel>,
+    openValue: { type: [String, Number, Boolean] as PropType<VxeSwitchPropTypes.OpenValue>, default: true },
+    closeValue: { type: [String, Number, Boolean] as PropType<VxeSwitchPropTypes.CloseValue>, default: false },
+    openIcon: String as PropType<VxeSwitchPropTypes.OpenIcon>,
+    closeIcon: String as PropType<VxeSwitchPropTypes.CloseIcon>
+  },
+  emits: [
+    'update:modelValue',
+    'change',
+    'focus',
+    'blur'
+  ] as VxeSwitchEmits,
+  setup (props, context) {
+    const { emit } = context
+    const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
+    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+
+    const xID = XEUtils.uniqueId()
+
+    const computeSize = useSize(props)
+
+    const reactData = reactive<SwitchReactData>({
+      isActivated: false,
+      hasAnimat: false,
+      offsetLeft: 0
+    })
+
+    const $xeswitch = {
+      xID,
+      props,
+      context,
+      reactData
+    } as unknown as VxeSwitchConstructor
+
+    const refButton = ref() as Ref<HTMLButtonElement>
+
+    let switchMethods = {} as SwitchMethods
+
+    const computeOnShowLabel = computed(() => {
+      return getFuncText(props.openLabel)
+    })
+
+    const computeOffShowLabel = computed(() => {
+      return getFuncText(props.closeLabel)
+    })
+
+    const computeIsChecked = computed(() => {
+      return props.modelValue === props.openValue
+    })
+
+    let _atimeout: any
+    const clickEvent = (evnt: Event) => {
+      if (!props.disabled) {
+        const isChecked = computeIsChecked.value
+        clearTimeout(_atimeout)
+        const value = isChecked ? props.closeValue : props.openValue
+        reactData.hasAnimat = true
+        emit('update:modelValue', value)
+        switchMethods.dispatchEvent('change', { value }, evnt)
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value)
+        }
+        _atimeout = setTimeout(() => {
+          reactData.hasAnimat = false
+        }, 400)
+      }
+    }
+
+    const focusEvent = (evnt: Event) => {
+      reactData.isActivated = true
+      switchMethods.dispatchEvent('focus', { value: props.modelValue }, evnt)
+    }
+
+    const blurEvent = (evnt: Event) => {
+      reactData.isActivated = false
+      switchMethods.dispatchEvent('blur', { value: props.modelValue }, evnt)
+    }
+
+    switchMethods = {
+      dispatchEvent (type, params, evnt) {
+        emit(type, Object.assign({ $switch: $xeswitch, $event: evnt }, params))
+      },
+      focus () {
+        const btnElem = refButton.value
+        reactData.isActivated = true
+        btnElem.focus()
+        return nextTick()
+      },
+      blur () {
+        const btnElem = refButton.value
+        btnElem.blur()
+        reactData.isActivated = false
+        return nextTick()
+      }
+    }
+
+    Object.assign($xeswitch, switchMethods)
+
+    const renderVN = () => {
+      const { disabled, openIcon, closeIcon } = props
+      const isChecked = computeIsChecked.value
+      const vSize = computeSize.value
+      const onShowLabel = computeOnShowLabel.value
+      const offShowLabel = computeOffShowLabel.value
+      return h('div', {
+        class: ['vxe-switch', isChecked ? 'is--on' : 'is--off', {
+          [`size--${vSize}`]: vSize,
+          'is--disabled': disabled,
+          'is--animat': reactData.hasAnimat
+        }]
+      }, [
+        h('button', {
+          ref: refButton,
+          class: 'vxe-switch--button',
+          type: 'button',
+          disabled,
+          onClick: clickEvent,
+          onFocus: focusEvent,
+          onBlur: blurEvent
+        }, [
+          h('span', {
+            class: 'vxe-switch--label vxe-switch--label-on'
+          }, [
+            openIcon
+              ? h('i', {
+                class: ['vxe-switch--label-icon', openIcon]
+              })
+              : createCommentVNode(),
+            onShowLabel
+          ]),
+          h('span', {
+            class: 'vxe-switch--label vxe-switch--label-off'
+          }, [
+            closeIcon
+              ? h('i', {
+                class: ['vxe-switch--label-icon', closeIcon]
+              })
+              : createCommentVNode(),
+            offShowLabel
+          ]),
+          h('span', {
+            class: 'vxe-switch--icon'
+          })
+        ])
+      ])
+    }
+
+    $xeswitch.renderVN = renderVN
+
+    return $xeswitch
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/textarea/index.ts

@@ -0,0 +1,15 @@
+import { App } from 'vue'
+import VxeTextareaComponent from './src/textarea'
+import { dynamicApp } from '../dynamics'
+
+export const VxeTextarea = Object.assign(VxeTextareaComponent, {
+  install: function (app: App) {
+    app.component(VxeTextareaComponent.name, VxeTextareaComponent)
+  }
+})
+
+export const Textarea = VxeTextarea
+
+dynamicApp.component(VxeTextareaComponent.name, VxeTextareaComponent)
+
+export default VxeTextarea

package/packages/textarea/src/textarea.ts

@@ -0,0 +1,273 @@
+import { defineComponent, h, ref, Ref, computed, nextTick, watch, PropType, reactive, inject } from 'vue'
+import XEUtils from 'xe-utils'
+import globalConfigStore from '../../ui/src/globalStore'
+import { getFuncText } from '../../ui/src/utils'
+import { getI18n } from '../../ui/src/i18n'
+import { useSize } from '../../hooks/size'
+
+import { VxeTextareaPropTypes, TextareaReactData, TextareaMethods, VxeTextareaConstructor, VxeTextareaEmits, TextareaPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+
+let autoTxtElem: HTMLDivElement
+
+export default defineComponent({
+  name: 'VxeTextarea',
+  props: {
+    modelValue: [String, Number] as PropType<VxeTextareaPropTypes.ModelValue>,
+    className: String as PropType<VxeTextareaPropTypes.ClassName>,
+    immediate: { type: Boolean as PropType<VxeTextareaPropTypes.Immediate>, default: true },
+    name: String as PropType<VxeTextareaPropTypes.Name>,
+    readonly: Boolean as PropType<VxeTextareaPropTypes.Readonly>,
+    disabled: Boolean as PropType<VxeTextareaPropTypes.Disabled>,
+    placeholder: {
+      type: String as PropType<VxeTextareaPropTypes.Placeholder>,
+      default: () => XEUtils.eqNull(globalConfigStore.textarea.placeholder) ? getI18n('vxe.base.pleaseInput') : globalConfigStore.textarea.placeholder
+    },
+    maxlength: [String, Number] as PropType<VxeTextareaPropTypes.Maxlength>,
+    rows: { type: [String, Number] as PropType<VxeTextareaPropTypes.Rows>, default: 2 },
+    cols: { type: [String, Number] as PropType<VxeTextareaPropTypes.Cols>, default: null },
+    showWordCount: Boolean as PropType<VxeTextareaPropTypes.ShowWordCount>,
+    countMethod: Function as PropType<VxeTextareaPropTypes.CountMethod>,
+    autosize: [Boolean, Object] as PropType<VxeTextareaPropTypes.Autosize>,
+    form: String as PropType<VxeTextareaPropTypes.Form>,
+    resize: { type: String as PropType<VxeTextareaPropTypes.Resize>, default: () => globalConfigStore.textarea.resize },
+    size: { type: String as PropType<VxeTextareaPropTypes.Size>, default: () => globalConfigStore.textarea.size || globalConfigStore.size }
+  },
+  emits: [
+    'update:modelValue',
+    'input',
+    'keydown',
+    'keyup',
+    'click',
+    'change',
+    'focus',
+    'blur'
+  ] as VxeTextareaEmits,
+  setup (props, context) {
+    const { emit } = context
+    const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
+    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+
+    const xID = XEUtils.uniqueId()
+
+    const computeSize = useSize(props)
+
+    const reactData = reactive<TextareaReactData>({
+      inputValue: props.modelValue
+    })
+
+    const refElem = ref() as Ref<HTMLDivElement>
+    const refTextarea = ref() as Ref<HTMLTextAreaElement>
+
+    const refMaps: TextareaPrivateRef = {
+      refElem,
+      refTextarea
+    }
+
+    const $xetextarea = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps
+    } as unknown as VxeTextareaConstructor
+
+    let textareaMethods = {} as TextareaMethods
+
+    const computeInputCount = computed(() => {
+      return XEUtils.getSize(reactData.inputValue)
+    })
+
+    const computeIsCountError = computed(() => {
+      const inputCount = computeInputCount.value
+      return props.maxlength && inputCount > XEUtils.toNumber(props.maxlength)
+    })
+
+    const computeSizeOpts = computed(() => {
+      return Object.assign({ minRows: 1, maxRows: 10 }, globalConfigStore.textarea.autosize, props.autosize)
+    })
+
+    const updateAutoTxt = () => {
+      const { size, autosize } = props
+      const { inputValue } = reactData
+      if (autosize) {
+        if (!autoTxtElem) {
+          autoTxtElem = document.createElement('div')
+        }
+        if (!autoTxtElem.parentNode) {
+          document.body.appendChild(autoTxtElem)
+        }
+        const textElem = refTextarea.value
+        const textStyle = getComputedStyle(textElem)
+        autoTxtElem.className = ['vxe-textarea--autosize', size ? `size--${size}` : ''].join(' ')
+        autoTxtElem.style.width = `${textElem.clientWidth}px`
+        autoTxtElem.style.padding = textStyle.padding
+        autoTxtElem.innerText = ('' + (inputValue || '　')).replace(/\n$/, '\n　')
+      }
+    }
+
+    const handleResize = () => {
+      if (props.autosize) {
+        nextTick(() => {
+          const sizeOpts = computeSizeOpts.value
+          const { minRows, maxRows } = sizeOpts
+          const textElem = refTextarea.value
+          const sizeHeight = autoTxtElem.clientHeight
+          const textStyle = getComputedStyle(textElem)
+          const lineHeight = XEUtils.toNumber(textStyle.lineHeight)
+          const paddingTop = XEUtils.toNumber(textStyle.paddingTop)
+          const paddingBottom = XEUtils.toNumber(textStyle.paddingBottom)
+          const borderTopWidth = XEUtils.toNumber(textStyle.borderTopWidth)
+          const borderBottomWidth = XEUtils.toNumber(textStyle.borderBottomWidth)
+          const intervalHeight = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth
+          const rowNum = (sizeHeight - intervalHeight) / lineHeight
+          const textRows = rowNum && /[0-9]/.test('' + rowNum) ? rowNum : Math.floor(rowNum) + 1
+          let vaildRows = textRows
+          if (textRows < minRows) {
+            vaildRows = minRows
+          } else if (textRows > maxRows) {
+            vaildRows = maxRows
+          }
+          textElem.style.height = `${(vaildRows * lineHeight) + intervalHeight}px`
+        })
+      }
+    }
+
+    const triggerEvent = (evnt: Event & { type: 'focus' | 'blur' | 'change' }) => {
+      const value = reactData.inputValue
+      $xetextarea.dispatchEvent(evnt.type, { value }, evnt)
+    }
+
+    const emitUpdate = (value: string, evnt: Event) => {
+      reactData.inputValue = value
+      emit('update:modelValue', value)
+      if (XEUtils.toValueString(props.modelValue) !== value) {
+        textareaMethods.dispatchEvent('change', { value }, evnt)
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value)
+        }
+      }
+    }
+
+    const inputEvent = (evnt: InputEvent) => {
+      const { immediate } = props
+      const textElem = evnt.target as HTMLTextAreaElement
+      const value = textElem.value
+      reactData.inputValue = value
+      if (immediate) {
+        emitUpdate(value, evnt)
+      }
+      $xetextarea.dispatchEvent('input', { value }, evnt)
+      handleResize()
+    }
+
+    const changeEvent = (evnt: Event & { type: 'change' }) => {
+      const { immediate } = props
+      if (immediate) {
+        triggerEvent(evnt)
+      } else {
+        emitUpdate(reactData.inputValue, evnt)
+      }
+    }
+
+    const blurEvent = (evnt: Event & { type: 'blur' }) => {
+      const { immediate } = props
+      const { inputValue } = reactData
+      if (!immediate) {
+        emitUpdate(inputValue, evnt)
+      }
+      $xetextarea.dispatchEvent('blur', { value: inputValue }, evnt)
+    }
+
+    textareaMethods = {
+      dispatchEvent (type, params, evnt) {
+        emit(type, Object.assign({ $textarea: $xetextarea, $event: evnt }, params))
+      },
+
+      focus () {
+        const textElem = refTextarea.value
+        textElem.focus()
+        return nextTick()
+      },
+
+      blur () {
+        const textElem = refTextarea.value
+        textElem.blur()
+        return nextTick()
+      }
+    }
+
+    Object.assign($xetextarea, textareaMethods)
+
+    watch(() => props.modelValue, (val) => {
+      reactData.inputValue = val
+      updateAutoTxt()
+    })
+
+    nextTick(() => {
+      const { autosize } = props
+      if (autosize) {
+        updateAutoTxt()
+        handleResize()
+      }
+    })
+
+    const renderVN = () => {
+      const { className, resize, placeholder, disabled, maxlength, autosize, showWordCount, countMethod, rows, cols } = props
+      const { inputValue } = reactData
+      const vSize = computeSize.value
+      const isCountError = computeIsCountError.value
+      const inputCount = computeInputCount.value
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-textarea', className, {
+          [`size--${vSize}`]: vSize,
+          'is--autosize': autosize,
+          'is--count': showWordCount,
+          'is--disabled': disabled,
+          'def--rows': !XEUtils.eqNull(rows),
+          'def--cols': !XEUtils.eqNull(cols)
+        }]
+      }, [
+        h('textarea', {
+          ref: refTextarea,
+          class: 'vxe-textarea--inner',
+          value: inputValue,
+          name: props.name,
+          placeholder: placeholder ? getFuncText(placeholder) : null,
+          maxlength,
+          readonly: props.readonly,
+          disabled,
+          rows,
+          cols,
+          style: resize
+            ? {
+                resize
+              }
+            : null,
+          onInput: inputEvent,
+          onChange: changeEvent,
+          onKeydown: triggerEvent,
+          onKeyup: triggerEvent,
+          onClick: triggerEvent,
+          onFocus: triggerEvent,
+          onBlur: blurEvent
+        }),
+        showWordCount
+          ? h('span', {
+            class: ['vxe-textarea--count', {
+              'is--error': isCountError
+            }]
+          }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${maxlength ? `/${maxlength}` : ''}`)
+          : null
+      ])
+    }
+
+    $xetextarea.renderVN = renderVN
+
+    return $xetextarea
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/tooltip/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeTooltipComponent from './src/tooltip'
+
+const VxeTooltip = Object.assign({}, VxeTooltipComponent, {
+  install (app: App) {
+    app.component(VxeTooltipComponent.name as string, VxeTooltipComponent)
+  }
+})
+
+export const Tooltip = VxeTooltip
+export default VxeTooltip