vxe-pc-ui 0.0.2 → 0.2.0

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 formItemInfo = 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 && formItemInfo) {
+          $xeform.triggerItemEvent(evnt, formItemInfo.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

package/packages/tooltip/src/tooltip.ts

@@ -0,0 +1,360 @@
+import { defineComponent, h, ref, Ref, nextTick, onBeforeUnmount, onMounted, reactive, watch, PropType } from 'vue'
+import XEUtils from 'xe-utils'
+import globalConfigStore from '../../ui/src/globalStore'
+import { useSize } from '../../hooks/size'
+import { getLastZIndex, nextZIndex, formatText } from '../../ui/src/utils'
+import { getAbsolutePos, getDomNode } from '../../ui/src/dom'
+import { getSlotVNs } from '../../ui/src/vn'
+
+import { VxeTooltipPropTypes, VxeTooltipConstructor, VxeTooltipEmits, TooltipReactData, TooltipMethods, TooltipPrivateRef } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeTooltip',
+  props: {
+    modelValue: Boolean,
+    size: { type: String as PropType<VxeTooltipPropTypes.Size>, default: () => globalConfigStore.tooltip.size || globalConfigStore.size },
+    trigger: { type: String as PropType<VxeTooltipPropTypes.Trigger>, default: () => globalConfigStore.tooltip.trigger || 'hover' },
+    theme: { type: String as PropType<VxeTooltipPropTypes.Theme>, default: () => globalConfigStore.tooltip.theme || 'dark' },
+    content: { type: [String, Number] as PropType<VxeTooltipPropTypes.Content>, default: null },
+    useHTML: Boolean as PropType<VxeTooltipPropTypes.UseHTML>,
+    zIndex: [String, Number] as PropType<VxeTooltipPropTypes.ZIndex>,
+    popupClassName: [String, Function] as PropType<VxeTooltipPropTypes.PopupClassName>,
+    isArrow: { type: Boolean as PropType<VxeTooltipPropTypes.IsArrow>, default: true },
+    enterable: Boolean as PropType<VxeTooltipPropTypes.Enterable>,
+    enterDelay: { type: Number as PropType<VxeTooltipPropTypes.EnterDelay>, default: () => globalConfigStore.tooltip.enterDelay },
+    leaveDelay: { type: Number as PropType<VxeTooltipPropTypes.LeaveDelay>, default: () => globalConfigStore.tooltip.leaveDelay }
+  },
+  emits: [
+    'update:modelValue'
+  ] as VxeTooltipEmits,
+  setup (props, context) {
+    const { slots, emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const computeSize = useSize(props)
+
+    const reactData = reactive<TooltipReactData>({
+      target: null,
+      isUpdate: false,
+      visible: false,
+      tipContent: '',
+      tipActive: false,
+      tipTarget: null,
+      tipZindex: 0,
+      tipStore: {
+        style: {},
+        placement: '',
+        arrowStyle: {}
+      }
+    })
+
+    const refElem = ref() as Ref<HTMLDivElement>
+
+    const refMaps: TooltipPrivateRef = {
+      refElem
+    }
+
+    const $xetooltip = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps
+    } as unknown as VxeTooltipConstructor
+
+    let tooltipMethods = {} as TooltipMethods
+
+    const updateTipStyle = () => {
+      const { tipTarget, tipStore } = reactData
+      if (tipTarget) {
+        const { scrollTop, scrollLeft, visibleWidth } = getDomNode()
+        const { top, left } = getAbsolutePos(tipTarget)
+        const el = refElem.value
+        const marginSize = 6
+        const offsetHeight = el.offsetHeight
+        const offsetWidth = el.offsetWidth
+        let tipLeft = left
+        let tipTop = top - offsetHeight - marginSize
+        tipLeft = Math.max(marginSize, left + Math.floor((tipTarget.offsetWidth - offsetWidth) / 2))
+        if (tipLeft + offsetWidth + marginSize > scrollLeft + visibleWidth) {
+          tipLeft = scrollLeft + visibleWidth - offsetWidth - marginSize
+        }
+        if (top - offsetHeight < scrollTop + marginSize) {
+          tipStore.placement = 'bottom'
+          tipTop = top + tipTarget.offsetHeight + marginSize
+        }
+        tipStore.style.top = `${tipTop}px`
+        tipStore.style.left = `${tipLeft}px`
+        tipStore.arrowStyle.left = `${left - tipLeft + tipTarget.offsetWidth / 2}px`
+      }
+    }
+
+    const updateValue = (value: VxeTooltipPropTypes.ModelValue) => {
+      if (value !== reactData.visible) {
+        reactData.visible = value
+        reactData.isUpdate = true
+        emit('update:modelValue', value)
+      }
+    }
+
+    const updateZindex = () => {
+      if (reactData.tipZindex < getLastZIndex()) {
+        reactData.tipZindex = nextZIndex()
+      }
+    }
+
+    const clickEvent = () => {
+      if (reactData.visible) {
+        tooltipMethods.close()
+      } else {
+        tooltipMethods.open()
+      }
+    }
+
+    const targetMouseenterEvent = () => {
+      tooltipMethods.open()
+    }
+
+    const targetMouseleaveEvent = () => {
+      const { trigger, enterable, leaveDelay } = props
+      reactData.tipActive = false
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!reactData.tipActive) {
+            tooltipMethods.close()
+          }
+        }, leaveDelay)
+      } else {
+        tooltipMethods.close()
+      }
+    }
+
+    const wrapperMouseenterEvent = () => {
+      reactData.tipActive = true
+    }
+
+    const wrapperMouseleaveEvent = () => {
+      const { trigger, enterable, leaveDelay } = props
+      reactData.tipActive = false
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!reactData.tipActive) {
+            tooltipMethods.close()
+          }
+        }, leaveDelay)
+      }
+    }
+
+    const showTip = () => {
+      const { tipStore } = reactData
+      const el = refElem.value
+      if (el) {
+        const parentNode = el.parentNode
+        if (!parentNode) {
+          document.body.appendChild(el)
+        }
+      }
+      updateValue(true)
+      updateZindex()
+      tipStore.placement = 'top'
+      tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: props.zIndex || reactData.tipZindex }
+      tipStore.arrowStyle = { left: '50%' }
+      return tooltipMethods.updatePlacement()
+    }
+
+    const showDelayTip = XEUtils.debounce(() => {
+      if (reactData.tipActive) {
+        showTip()
+      }
+    }, props.enterDelay, { leading: false, trailing: true })
+
+    tooltipMethods = {
+      dispatchEvent (type, params, evnt) {
+        emit(type, Object.assign({ $tooltip: $xetooltip, $event: evnt }, params))
+      },
+      open (target?: HTMLElement, content?: VxeTooltipPropTypes.Content) {
+        return tooltipMethods.toVisible(target || reactData.target as HTMLElement, content)
+      },
+      close () {
+        reactData.tipTarget = null
+        reactData.tipActive = false
+        Object.assign(reactData.tipStore, {
+          style: {},
+          placement: '',
+          arrowStyle: null
+        })
+        updateValue(false)
+        return nextTick()
+      },
+      toVisible (target: HTMLElement, content?: VxeTooltipPropTypes.Content) {
+        if (target) {
+          const { trigger, enterDelay } = props
+          reactData.tipActive = true
+          reactData.tipTarget = target
+          if (content) {
+            reactData.tipContent = content
+          }
+          if (enterDelay && trigger === 'hover') {
+            showDelayTip()
+          } else {
+            return showTip()
+          }
+        }
+        return nextTick()
+      },
+      updatePlacement () {
+        return nextTick().then(() => {
+          const { tipTarget } = reactData
+          const el = refElem.value
+          if (tipTarget && el) {
+            updateTipStyle()
+            return nextTick().then(updateTipStyle)
+          }
+        })
+      },
+      isActived () {
+        return reactData.tipActive
+      },
+      setActived (actived) {
+        reactData.tipActive = !!actived
+      }
+    }
+
+    Object.assign($xetooltip, tooltipMethods)
+
+    watch(() => props.content, () => {
+      reactData.tipContent = props.content
+    })
+
+    watch(() => props.modelValue, () => {
+      if (!reactData.isUpdate) {
+        if (props.modelValue) {
+          tooltipMethods.open()
+        } else {
+          tooltipMethods.close()
+        }
+      }
+      reactData.isUpdate = false
+    })
+
+    onMounted(() => {
+      nextTick(() => {
+        const { trigger, content, modelValue } = props
+        const wrapperElem = refElem.value
+        if (wrapperElem) {
+          const parentNode = wrapperElem.parentNode
+          if (parentNode) {
+            reactData.tipContent = content
+            reactData.tipZindex = nextZIndex()
+            XEUtils.arrayEach(wrapperElem.children, (elem, index) => {
+              if (index > 1) {
+                parentNode.insertBefore(elem, wrapperElem)
+                if (!reactData.target) {
+                  reactData.target = elem as HTMLElement
+                }
+              }
+            })
+            parentNode.removeChild(wrapperElem)
+            const { target } = reactData
+            if (target) {
+              if (trigger === 'hover') {
+                target.onmouseenter = targetMouseenterEvent
+                target.onmouseleave = targetMouseleaveEvent
+              } else if (trigger === 'click') {
+                target.onclick = clickEvent
+              }
+            }
+            if (modelValue) {
+              tooltipMethods.open()
+            }
+          }
+        }
+      })
+    })
+
+    onBeforeUnmount(() => {
+      const { trigger } = props
+      const { target } = reactData
+      const wrapperElem = refElem.value
+      if (target) {
+        if (trigger === 'hover') {
+          target.onmouseenter = null
+          target.onmouseleave = null
+        } else if (trigger === 'click') {
+          target.onclick = null
+        }
+      }
+      if (wrapperElem) {
+        const parentNode = wrapperElem.parentNode
+        if (parentNode) {
+          parentNode.removeChild(wrapperElem)
+        }
+      }
+    })
+
+    const renderContent = () => {
+      const { useHTML } = props
+      const { tipContent } = reactData
+      const contentSlot = slots.content
+      if (contentSlot) {
+        return h('div', {
+          key: 1,
+          class: 'vxe-table--tooltip-content'
+        }, getSlotVNs(contentSlot({})))
+      }
+      if (useHTML) {
+        return h('div', {
+          key: 2,
+          class: 'vxe-table--tooltip-content',
+          innerHTML: tipContent
+        })
+      }
+      return h('div', {
+        key: 3,
+        class: 'vxe-table--tooltip-content'
+      }, formatText(tipContent))
+    }
+
+    const renderVN = () => {
+      const { popupClassName, theme, isArrow, enterable } = props
+      const { tipActive, visible, tipStore } = reactData
+      const defaultSlot = slots.default
+      const vSize = computeSize.value
+      let ons
+      if (enterable) {
+        ons = {
+          onMouseenter: wrapperMouseenterEvent,
+          onMouseleave: wrapperMouseleaveEvent
+        }
+      }
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-table--tooltip-wrapper', `theme--${theme}`, popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $tooltip: $xetooltip }) : popupClassName) : '', {
+          [`size--${vSize}`]: vSize,
+          [`placement--${tipStore.placement}`]: tipStore.placement,
+          'is--enterable': enterable,
+          'is--visible': visible,
+          'is--arrow': isArrow,
+          'is--active': tipActive
+        }],
+        style: tipStore.style,
+        ...ons
+      }, [
+        renderContent(),
+        h('div', {
+          class: 'vxe-table--tooltip-arrow',
+          style: tipStore.arrowStyle
+        }),
+        ...(defaultSlot ? getSlotVNs(defaultSlot({})) : [])
+      ])
+    }
+
+    $xetooltip.renderVN = renderVN
+
+    return $xetooltip
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/ui/src/core.ts

@@ -3,6 +3,9 @@ import DomZIndex from 'dom-zindex'
 import globalConfigStore from './globalStore'
 import iconConfigStore from './iconStore'
 import setTheme from './theme'
+import { getI18n } from './i18n'
+import { renderer } from './renderer'
+import { validators } from './validators'
 
 import { VxeUIExport, VxeGlobalConfig } from '../../../types'
 
@@ -43,9 +46,18 @@ const VxeCore: VxeUIExport = {
   setConfig,
   getConfig,
   setIcon,
-  getIcon
+  getIcon,
+  getI18n,
+  renderer,
+  validators,
+
+  modal: null as any
 }
 
 setTheme()
 
+export * from './i18n'
+export * from './renderer'
+export * from './validators'
+
 export default VxeCore

package/packages/ui/src/dom.ts

@@ -101,3 +101,26 @@ export function getAbsolutePos (elem: any) {
   const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
   return { boundingTop, top: scrollTop + boundingTop, boundingLeft, left: scrollLeft + boundingLeft, visibleHeight, visibleWidth }
 }
+
+const scrollIntoViewIfNeeded = 'scrollIntoViewIfNeeded'
+const scrollIntoView = 'scrollIntoView'
+
+export function scrollToView (elem: any) {
+  if (elem) {
+    if (elem[scrollIntoViewIfNeeded]) {
+      elem[scrollIntoViewIfNeeded]()
+    } else if (elem[scrollIntoView]) {
+      elem[scrollIntoView]()
+    }
+  }
+}
+
+export function triggerEvent (targetElem: Element, type: string) {
+  if (targetElem) {
+    targetElem.dispatchEvent(new Event(type))
+  }
+}
+
+export function isNodeElement (elem: any): elem is HTMLElement {
+  return elem && elem.nodeType === 1
+}