vxe-pc-ui 0.0.2 → 0.1.0

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
+}

package/packages/ui/src/globalStore.ts

@@ -1,11 +1,128 @@
 import { VxeGlobalConfig } from '../../../types'
 
-const globalConfigStore: VxeGlobalConfig = {
-  button: {},
-  breadcrumb: {
-    separator: '/'
+const globalConfigStore: Required<VxeGlobalConfig> = {
+  size: '',
+  theme: '',
+  version: 1,
+  zIndex: 999,
+  emptyCell: '　',
+  loadingText: '',
+
+  i18n: (key: string) => key,
+
+  tooltip: {
+    // size: null,
+    trigger: 'hover',
+    theme: 'dark',
+    enterDelay: 500,
+    leaveDelay: 300
+  },
+  pager: {
+    // size: null,
+    // autoHidden: false,
+    // perfect: true,
+    // pageSize: 10,
+    // pagerCount: 7,
+    // pageSizes: [10, 15, 20, 50, 100],
+    // layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
+  },
+  form: {
+    // preventSubmit: false,
+    // size: null,
+    // colon: false,
+    validConfig: {
+      showMessage: true,
+      autoPos: true
+    },
+    tooltipConfig: {
+      enterable: true
+    },
+    titleAsterisk: true
+  },
+  input: {
+    // size: null,
+    // transfer: false
+    // parseFormat: 'yyyy-MM-dd HH:mm:ss.SSS',
+    // labelFormat: '',
+    // valueFormat: '',
+    startDate: new Date(1900, 0, 1),
+    endDate: new Date(2100, 0, 1),
+    startDay: 1,
+    selectDay: 1,
+    digits: 2,
+    controls: true
+  },
+  textarea: {
+    // size: null,
+    // autosize: {
+    //   minRows: 1,
+    //   maxRows: 10
+    // }
+  },
+  select: {
+    // size: null,
+    // transfer: false,
+    // optionConfig: {
+    //   keyField: '_X_OPTION_KEY'
+    // },
+    multiCharOverflow: 8
+  },
+  button: {
+    // size: null,
+    // transfer: false
+  },
+  buttonGroup: {
+    // size: null
+  },
+  radio: {
+    // size: null,
+    strict: true
+  },
+  radioButton: {
+    // size: null,
+    strict: true
+  },
+  radioGroup: {
+    // size: null,
+    strict: true
+  },
+  checkbox: {
+    // size: null
+  },
+  checkboxGroup: {
+    // size: null
+  },
+  switch: {
+    // size: null
+  },
+  modal: {
+    // size: null,
+    top: 15,
+    showHeader: true,
+    minWidth: 340,
+    minHeight: 140,
+    lockView: true,
+    mask: true,
+    duration: 3000,
+    marginSize: 0,
+    dblclickZoom: true,
+    showTitleOverflow: true,
+    animat: true,
+    showClose: true,
+    draggable: true,
+    // storage: false,
+    storageKey: 'VXE_MODAL_POSITION'
+  },
+  list: {
+    // size: null,
+    scrollY: {
+      enabled: true,
+      gt: 100
+      // oSize: 0
+    }
   },
-  i18n: (key: string) => key
+  breadcrumb: {},
+  formDesign: {}
 }
 
 export default globalConfigStore

package/packages/ui/src/i18n.ts

@@ -0,0 +1,8 @@
+import globalConfigStore from './globalStore'
+
+export function getI18n (key: string, args?: any) {
+  if (globalConfigStore.i18n) {
+    return globalConfigStore.i18n(key, args)
+  }
+  return key
+}

package/packages/ui/src/log.ts

@@ -1,7 +1,7 @@
-import globalConfigStore from './globalStore'
+import { getI18n } from './i18n'
 
 export function getLog (message: string, params?: any) {
-  return `[vxe-table v${process.env.VUE_APP_VXE_TABLE_VERSION}] ${globalConfigStore.i18n(message, params)}`
+  return `[vxe-table v${process.env.VUE_APP_VXE_TABLE_VERSION}] ${getI18n(message, params)}`
 }
 
 function outLog (type: 'log' | 'warn' | 'error') {

package/packages/ui/src/renderer.ts

@@ -0,0 +1,71 @@
+import { h } from 'vue'
+import XEUtils from 'xe-utils'
+import { warnLog } from './log'
+
+import { VxeGlobalRenderer, RendererOptions } from '../../../types'
+
+const renderMap: Record<string, RendererOptions> = {
+  input: {
+    formDesignWidgetName: '输入框',
+    formDesignWidgetIcon: 'vxe-icon-feedback',
+    renderFormDesignWidgetView () {
+      return h('input', {
+        modelValue: ''
+      })
+    },
+    formDesignWidgetSettingFormData () {
+      return {}
+    },
+    formDesignWidgetSettingFormItems () {
+      return [
+        { title: 'inout', field: 'dd', itemRender: { name: 'input' } }
+      ]
+    }
+  },
+  textarea: {
+    formDesignWidgetName: '文本域',
+    formDesignWidgetIcon: 'vxe-icon-feedback',
+    renderFormDesignWidgetView () {
+      return h('textarea', {
+        modelValue: ''
+      })
+    }
+  }
+}
+
+/**
+ * 全局渲染器
+ */
+export const renderer: VxeGlobalRenderer = {
+  mixin (opts) {
+    XEUtils.each(opts, (options, name) => renderer.add(name, options))
+    return renderer
+  },
+  get (name: string) {
+    return renderMap[name] || null
+  },
+  add (name, options) {
+    if (name && options) {
+      const renders: any = renderMap[name]
+      if (renders) {
+        // 检测是否覆盖
+        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+          XEUtils.each(options, (val, key) => {
+            if (!XEUtils.eqNull(renders[key]) && renders[key] !== val) {
+              warnLog('vxe.error.coverProp', [`Renderer.${name}`, key])
+            }
+          })
+        }
+
+        Object.assign(renders, options)
+      } else {
+        renderMap[name] = options
+      }
+    }
+    return renderer
+  },
+  delete (name) {
+    delete renderMap[name]
+    return renderer
+  }
+}

package/packages/ui/src/store.ts

@@ -0,0 +1,49 @@
+import { warnLog } from '../../ui/src/log'
+import XEUtils from 'xe-utils'
+
+/**
+ * 创建数据仓库
+ */
+export class Store {
+  private store: any = {}
+
+  mixin (options: any): Store {
+    XEUtils.each(options, (item, key) => {
+      this.add(key, item)
+    })
+    return this
+  }
+
+  has (name: string): boolean {
+    return !!this.get(name)
+  }
+
+  get (name: string): any {
+    return this.store[name]
+  }
+
+  add (name: string, options: any): Store {
+    const conf = this.store[name]
+    // 检测是否覆盖
+    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      const confKeys = XEUtils.keys(conf)
+      XEUtils.each(options, (item, key) => {
+        if (confKeys.includes(key)) {
+          warnLog('vxe.error.coverProp', [name, key])
+        }
+      })
+    }
+    this.store[name] = conf ? XEUtils.merge(conf, options) : options
+    return this
+  }
+
+  delete (name: string): void {
+    delete this.store[name]
+  }
+
+  forEach (callback: any): void {
+    XEUtils.objectEach(this.store, callback)
+  }
+}
+
+export default Store