vxe-pc-ui 0.0.2 → 0.1.0

package/packages/form/src/itemInfo.ts

@@ -0,0 +1,43 @@
+import XEUtils from 'xe-utils'
+
+export class ItemInfo {
+  constructor ($xeform: any, item: any) {
+    Object.assign(this, {
+      id: XEUtils.uniqueId('item_'),
+      title: item.title,
+      field: item.field,
+      span: item.span,
+      align: item.align,
+      titleAlign: item.titleAlign,
+      titleWidth: item.titleWidth,
+      titleColon: item.titleColon,
+      titleAsterisk: item.titleAsterisk,
+      titlePrefix: item.titlePrefix,
+      titleSuffix: item.titleSuffix,
+      titleOverflow: item.titleOverflow,
+      showTitle: item.showTitle,
+      resetValue: item.resetValue,
+      visibleMethod: item.visibleMethod,
+      visible: item.visible,
+      folding: item.folding,
+      collapseNode: item.collapseNode,
+      className: item.className,
+      contentClassName: item.contentClassName,
+      contentStyle: item.contentStyle,
+      titleClassName: item.titleClassName,
+      titleStyle: item.titleStyle,
+      itemRender: item.itemRender,
+      // 渲染属性
+      showError: false,
+      errRule: null,
+      slots: item.slots,
+      children: []
+    })
+  }
+
+  update (name: string, value: any) {
+    this[name] = value
+  }
+
+  [key: string]: any;
+}

package/packages/form/src/render.ts

@@ -0,0 +1,83 @@
+import { h } from 'vue'
+import iconConfigStore from '../../ui/src/iconStore'
+import VxeTooltipComponent from '../../tooltip'
+import { renderer } from '../../ui/src/renderer'
+import { getFuncText, isEnableConf } from '../../ui/src/utils'
+import { getSlotVNs } from '../../ui/src/vn'
+
+import { VxeFormConstructor, VxeFormDefines, VxeFormItemPropTypes, VxeFormPrivateMethods } from '../../../types'
+
+function renderPrefixIcon (titlePrefix: VxeFormItemPropTypes.TitlePrefix) {
+  return h('span', {
+    class: 'vxe-form--item-title-prefix'
+  }, [
+    h('i', {
+      class: titlePrefix.icon || iconConfigStore.FORM_PREFIX
+    })
+  ])
+}
+
+function renderSuffixIcon (titleSuffix: VxeFormItemPropTypes.TitleSuffix) {
+  return h('span', {
+    class: 'vxe-form--item-title-suffix'
+  }, [
+    h('i', {
+      class: titleSuffix.icon || iconConfigStore.FORM_SUFFIX
+    })
+  ])
+}
+
+export function renderTitle ($xeform: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) {
+  const { data } = $xeform.props
+  const { computeTooltipOpts } = $xeform.getComputeMaps()
+  const { slots, field, itemRender, titlePrefix, titleSuffix } = item
+  const tooltipOpts = computeTooltipOpts.value
+  const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null
+  const params = { data, field, property: field, item, $form: $xeform, $grid: $xeform.xegrid }
+  const titleSlot = slots ? slots.title : null
+  const contVNs = []
+  const titVNs = []
+  if (titlePrefix) {
+    titVNs.push(
+      (titlePrefix.content || titlePrefix.message)
+        ? h(VxeTooltipComponent, {
+          ...tooltipOpts,
+          ...titlePrefix,
+          content: getFuncText(titlePrefix.content || titlePrefix.message)
+        }, {
+          default: () => renderPrefixIcon(titlePrefix)
+        })
+        : renderPrefixIcon(titlePrefix)
+    )
+  }
+  titVNs.push(
+    h('span', {
+      class: 'vxe-form--item-title-label'
+    }, compConf && compConf.renderItemTitle ? getSlotVNs(compConf.renderItemTitle(itemRender, params)) : (titleSlot ? $xeform.callSlot(titleSlot, params) : getFuncText(item.title)))
+  )
+  contVNs.push(
+    h('div', {
+      class: 'vxe-form--item-title-content'
+    }, titVNs)
+  )
+  const fixVNs = []
+  if (titleSuffix) {
+    fixVNs.push(
+      (titleSuffix.content || titleSuffix.message)
+        ? h(VxeTooltipComponent, {
+          ...tooltipOpts,
+          ...titleSuffix,
+          content: getFuncText(titleSuffix.content || titleSuffix.message)
+        }, {
+          default: () => renderSuffixIcon(titleSuffix)
+        })
+        : renderSuffixIcon(titleSuffix)
+    )
+  }
+  contVNs.push(
+    h('div', {
+      class: 'vxe-form--item-title-postfix'
+    }, fixVNs)
+  )
+  return contVNs
+}

package/packages/form/src/util.ts

@@ -0,0 +1,79 @@
+import { watch } from 'vue'
+import { renderer } from '../../ui/src/renderer'
+import XEUtils from 'xe-utils'
+import { ItemInfo } from './itemInfo'
+import { isEnableConf } from '../../ui/src/utils'
+
+import { VxeFormConstructor, VxeFormDefines } from '../../../types'
+
+export interface XEFormItemProvide {
+  formItem: ItemInfo;
+}
+
+export function isFormItem (item: any): item is ItemInfo {
+  return item instanceof ItemInfo
+}
+
+export function createItem ($xeform: VxeFormConstructor, _vm: any) {
+  return isFormItem(_vm) ? _vm : new ItemInfo($xeform, _vm)
+}
+
+export function handleFieldOrItem ($xeform: VxeFormConstructor, fieldOrItem: string | VxeFormDefines.ItemInfo) {
+  if (fieldOrItem) {
+    return XEUtils.isString(fieldOrItem) ? $xeform.getItemByField(fieldOrItem) : fieldOrItem
+  }
+  return null
+}
+
+export function isHiddenItem ($xeform: VxeFormConstructor, formItem: VxeFormDefines.ItemInfo) {
+  const { reactData } = $xeform
+  const { collapseAll } = reactData
+  const { folding, visible } = formItem
+  return visible === false || (folding && collapseAll)
+}
+
+export function isActivetem ($xeform: VxeFormConstructor, formItem: VxeFormDefines.ItemInfo) {
+  let { visibleMethod, itemRender, visible, field } = formItem
+  if (visible === false) {
+    return visible
+  }
+  const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null
+  if (!visibleMethod && compConf && compConf.itemVisibleMethod) {
+    visibleMethod = compConf.itemVisibleMethod
+  }
+  if (!visibleMethod) {
+    return true
+  }
+  const { data } = $xeform.props
+  return visibleMethod({ data, field, property: field, item: formItem, $form: $xeform, $grid: $xeform.xegrid })
+}
+
+export function watchItem (props: any, formItem: ItemInfo) {
+  Object.keys(props).forEach(name => {
+    watch(() => props[name], (value: any) => {
+      formItem.update(name, value)
+    })
+  })
+}
+
+export function assemItem ($xeform: VxeFormConstructor, el: HTMLDivElement, formItem: ItemInfo, formGather: XEFormItemProvide | null) {
+  const { reactData } = $xeform
+  const { staticItems } = reactData
+  const parentElem = el.parentNode
+  const parentItem = formGather ? formGather.formItem : null
+  const parentItems = parentItem ? parentItem.children : staticItems
+  if (parentElem) {
+    parentItems.splice(XEUtils.arrayIndexOf(parentElem.children, el), 0, formItem)
+    reactData.staticItems = staticItems.slice(0)
+  }
+}
+
+export function destroyItem ($xeform: VxeFormConstructor, formItem: ItemInfo) {
+  const { reactData } = $xeform
+  const { staticItems } = reactData
+  const index = XEUtils.findIndexOf(staticItems, item => item.id === formItem.id)
+  if (index > -1) {
+    staticItems.splice(index, 1)
+  }
+  reactData.staticItems = staticItems.slice(0)
+}

package/packages/form-design/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeFormDesignComponent from './src/form-design'
+
+const VxeFormDesign = Object.assign({}, VxeFormDesignComponent, {
+  install (app: App) {
+    app.component(VxeFormDesignComponent.name as string, VxeFormDesignComponent)
+  }
+})
+
+export const FormDesign = VxeFormDesign
+export default VxeFormDesign

package/packages/form-design/src/form-design.ts

@@ -0,0 +1,99 @@
+import { defineComponent, ref, h, PropType, reactive, provide, watch } from 'vue'
+import globalConfigStore from '../../ui/src/globalStore'
+import XEUtils from 'xe-utils'
+import WidgetComponent from './widget'
+import ViewComponent from './view'
+import SettingComponent from './setting'
+
+import { VxeFormDesignDefines, VxeFormDesignPropTypes, FormDesignReactData, FormDesignPrivateRef, VxeFormDesignPrivateComputed, VxeFormDesignConstructor, VxeFormDesignPrivateMethods, FormDesignMethods, FormDesignPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeFormDesign',
+  props: {
+    size: {
+      type: String as PropType<VxeFormDesignPropTypes.Size>,
+      default: () => globalConfigStore.formDesign.size
+    },
+    widgets: {
+      type: Array as PropType<VxeFormDesignPropTypes.Widgets>,
+      default: () => []
+    }
+  },
+  emits: [],
+  setup (props, context) {
+    const { emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<FormDesignReactData>({
+      widgetConfigs: [],
+      widgetObjList: [],
+      dragWidget: null,
+      sortWidget: null,
+      activeWidget: null
+    });
+    (window as any).reactData = reactData
+    const refMaps: FormDesignPrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeFormDesignPrivateComputed = {
+    }
+
+    const $xeFormDesign = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeFormDesignConstructor & VxeFormDesignPrivateMethods
+
+    const formDesignMethods: FormDesignMethods = {
+      dispatchEvent (type, params, evnt) {
+        emit(type, Object.assign({ $xeFormDesign, $event: evnt }, params))
+      }
+    }
+
+    const updateWidgetConfigs = () => {
+      reactData.widgetConfigs = props.widgets && props.widgets.length ? props.widgets.slice(0) : []
+    }
+
+    const formDesignPrivateMethods: FormDesignPrivateMethods = {
+      handleClickWidget (evnt: KeyboardEvent, item: VxeFormDesignDefines.WidgetObjItem) {
+        reactData.activeWidget = item
+      }
+    }
+
+    Object.assign($xeFormDesign, formDesignMethods, formDesignPrivateMethods)
+
+    watch(() => props.widgets, () => {
+      updateWidgetConfigs()
+    })
+
+    updateWidgetConfigs()
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem,
+        class: 'vxe-design-form'
+      }, [
+        h(WidgetComponent),
+        h(ViewComponent),
+        h(SettingComponent)
+      ])
+    }
+
+    $xeFormDesign.renderVN = renderVN
+
+    provide('$xeFormDesign', $xeFormDesign)
+
+    return $xeFormDesign
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/form-design/src/setting.ts

@@ -0,0 +1,13 @@
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  props: {},
+  emits: [],
+  setup () {
+    return () => {
+      return h('div', {
+        class: 'vxe-design-form--setting'
+      })
+    }
+  }
+})

package/packages/form-design/src/util.ts

@@ -0,0 +1,10 @@
+import XEUtils from 'xe-utils'
+import { VxeFormDesignDefines } from '../../../types'
+
+export function getNewWidgetId (widgetObjList: VxeFormDesignDefines.WidgetObjItem[]) {
+  let max = 10000
+  XEUtils.eachTree(widgetObjList, item => {
+    max = Math.max(max, item.id)
+  }, { children: 'children' })
+  return max + 1
+}

package/packages/form-design/src/view.ts

@@ -0,0 +1,125 @@
+import { defineComponent, h, inject, TransitionGroup } from 'vue'
+import { renderer } from '../../ui/src/renderer'
+import { getSlotVNs } from '../../ui/src/vn'
+
+import { VxeFormDesignConstructor, VxeFormDesignPrivateMethods } from '../../../types'
+import XEUtils from 'xe-utils'
+
+export default defineComponent({
+  props: {},
+  emits: [],
+  setup () {
+    const $xeFormDesign = inject<(VxeFormDesignConstructor & VxeFormDesignPrivateMethods) | null>('$xeFormDesign', null)
+
+    if (!$xeFormDesign) {
+      return
+    }
+
+    const { reactData } = $xeFormDesign
+
+    const dragoverEvent = (evnt: DragEvent) => {
+      const { widgetObjList, dragWidget } = reactData
+      if (dragWidget) {
+        evnt.preventDefault()
+        const rest = XEUtils.findTree(widgetObjList, item => item.id === dragWidget.id, { children: 'children' })
+        if (!rest) {
+          reactData.sortWidget = dragWidget
+          widgetObjList.push(dragWidget)
+        }
+      }
+    }
+
+    const sortDragstartEvent = (evnt: DragEvent) => {
+      const { widgetObjList } = reactData
+      const divEl = evnt.currentTarget as HTMLDivElement
+      const widgetId = Number(divEl.getAttribute('data-widget-id'))
+      const currRest = XEUtils.findTree(widgetObjList, item => item.id === widgetId, { children: 'children' })
+      if (currRest) {
+        reactData.dragWidget = null
+        reactData.sortWidget = currRest.item
+      }
+    }
+
+    const sortDragendEvent = () => {
+      reactData.activeWidget = reactData.sortWidget
+      reactData.sortWidget = null
+    }
+
+    let isDragAnimate = false
+
+    const sortDragenterEvent = (evnt: DragEvent) => {
+      const { widgetObjList, sortWidget } = reactData
+      if (isDragAnimate) {
+        evnt.preventDefault()
+        return
+      }
+      if (sortWidget) {
+        const divEl = evnt.currentTarget as HTMLDivElement
+        evnt.preventDefault()
+        const widgetId = Number(divEl.getAttribute('data-widget-id'))
+        if (widgetId !== sortWidget.id) {
+          const targetRest = XEUtils.findTree(widgetObjList, item => item.id === widgetId, { children: 'children' })
+          if (targetRest) {
+            const currRest = XEUtils.findTree(widgetObjList, item => item.id === sortWidget.id, { children: 'children' })
+            if (currRest) {
+              // 控件换位置
+              currRest.items.splice(currRest.index, 1)
+              targetRest.items.splice(targetRest.index, 0, currRest.item)
+              isDragAnimate = true
+              setTimeout(() => {
+                isDragAnimate = false
+              }, 150)
+            }
+          }
+        }
+      }
+    }
+
+    const dragoverItemEvent = (evnt: DragEvent) => {
+      const { sortWidget, dragWidget } = reactData
+      if (sortWidget || dragWidget) {
+        evnt.preventDefault()
+      }
+    }
+
+    return () => {
+      const { widgetObjList } = reactData
+      return h('div', {
+        class: 'vxe-design-form--preview',
+        onDragover: dragoverEvent
+      }, [
+        h(TransitionGroup, {
+          class: 'vxe-design-form--preview-list',
+          tag: 'div',
+          name: 'vxe-design-form--preview-list'
+        }, {
+          default: () => {
+            const { dragWidget, activeWidget, sortWidget } = reactData
+            return widgetObjList.map(item => {
+              const { name } = item
+              const compConf = renderer.get(name) || {}
+              const renderFormDesignWidgetView = compConf.renderFormDesignWidgetView
+              return h('div', {
+                key: item.id,
+                'data-widget-id': item.id,
+                draggable: true,
+                class: ['vxe-design-form--preview-item', {
+                  'is--active': activeWidget && activeWidget.id === item.id,
+                  'is--sort': sortWidget && sortWidget.id === item.id,
+                  'is--drag': dragWidget && dragWidget.id === item.id
+                }],
+                onDragstart: sortDragstartEvent,
+                onDragend: sortDragendEvent,
+                onDragenter: sortDragenterEvent,
+                onDragover: dragoverItemEvent,
+                onClick (evnt: KeyboardEvent) {
+                  $xeFormDesign.handleClickWidget(evnt, item)
+                }
+              }, renderFormDesignWidgetView ? getSlotVNs(renderFormDesignWidgetView({}, {})) : [])
+            })
+          }
+        })
+      ])
+    }
+  }
+})

package/packages/form-design/src/widget.ts

@@ -0,0 +1,117 @@
+import { defineComponent, h, inject, VNode } from 'vue'
+import XEUtils from 'xe-utils'
+import { renderer } from '../../ui/src/renderer'
+import { getSlotVNs } from '../../ui/src/vn'
+import { getNewWidgetId } from './util'
+
+import { VxeFormDesignPropTypes, VxeFormDesignConstructor, VxeFormDesignPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  props: {},
+  emits: [],
+  setup () {
+    const $xeFormDesign = inject<(VxeFormDesignConstructor & VxeFormDesignPrivateMethods) | null>('$xeFormDesign', null)
+
+    if (!$xeFormDesign) {
+      return
+    }
+
+    const { reactData } = $xeFormDesign
+
+    const dragstartEvent = (evnt: DragEvent) => {
+      const { widgetObjList } = reactData
+      const divEl = evnt.currentTarget as HTMLDivElement
+      const dataTransfer = evnt.dataTransfer
+      const widgetName = divEl.getAttribute('data-widget-name') || ''
+      const dragWidget = {
+        id: getNewWidgetId(widgetObjList),
+        name: widgetName
+      }
+      if (dataTransfer) {
+        dataTransfer.setData('text/plain', widgetName)
+      }
+      reactData.sortWidget = null
+      reactData.dragWidget = dragWidget
+    }
+
+    const dragendEvent = () => {
+      if (reactData.dragWidget) {
+        reactData.activeWidget = reactData.dragWidget
+      }
+      reactData.dragWidget = null
+      reactData.sortWidget = null
+    }
+
+    const cancelDragoverItem = (evnt: DragEvent, group: VxeFormDesignPropTypes.WidgetItem) => {
+      const { widgetObjList, dragWidget } = reactData
+      if (dragWidget) {
+        if (group.children.includes(dragWidget.name)) {
+          const rest = XEUtils.findTree(widgetObjList, item => item.id === dragWidget.id, { children: 'children' })
+          if (rest) {
+            rest.items.splice(rest.index, 1)
+          }
+        }
+      }
+    }
+
+    const renderWidgetList = (group: VxeFormDesignPropTypes.WidgetItem) => {
+      const widgetVNs: VNode[] = []
+      if (group.children) {
+        group.children.forEach((name, index) => {
+          const compConf = renderer.get(name) || {}
+          const formDesignWidgetName = compConf.formDesignWidgetName
+          const formDesignWidgetIcon = compConf.formDesignWidgetIcon
+          const renderFormDesignWidgetItem = compConf.renderFormDesignWidgetItem
+          widgetVNs.push(
+            h('div', {
+              key: index,
+              class: 'vxe-design-form--widget-item'
+            }, h('div', {
+              class: 'vxe-design-form--widget-box',
+              'data-widget-name': name,
+              draggable: true,
+              onDragstart: dragstartEvent,
+              onDragend: dragendEvent
+            }, renderFormDesignWidgetItem
+              ? getSlotVNs(renderFormDesignWidgetItem({}, {}))
+              : [
+                  h('i', {
+                    class: ['vxe-design-form--widget-item-icon', formDesignWidgetIcon]
+                  }),
+                  h('span', {
+                    class: 'vxe-design-form--widget-item-name'
+                  }, `${formDesignWidgetName || name}`)
+                ]))
+          )
+        })
+      }
+      return widgetVNs
+    }
+
+    const renderWidgetGroups = () => {
+      const { widgetConfigs } = reactData
+      return widgetConfigs.map((group, gIndex) => {
+        return h('div', {
+          key: gIndex,
+          class: 'vxe-design-form--widget-group'
+        }, [
+          h('div', {
+            class: 'vxe-design-form--widget-title'
+          }, `${group.title}`),
+          h('div', {
+            class: 'vxe-design-form--widget-list',
+            onDragover (evnt:DragEvent) {
+              cancelDragoverItem(evnt, group)
+            }
+          }, renderWidgetList(group))
+        ])
+      })
+    }
+
+    return () => {
+      return h('div', {
+        class: 'vxe-design-form--widget'
+      }, renderWidgetGroups())
+    }
+  }
+})

package/packages/form-gather/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeFormGatherComponent from '../form/src/form-gather'
+
+export const VxeFormGather = Object.assign(VxeFormGatherComponent, {
+  install (app: App) {
+    app.component(VxeFormGatherComponent.name as string, VxeFormGatherComponent)
+  }
+})
+
+export const FormGather = VxeFormGather
+export default VxeFormGather

package/packages/form-item/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeFormItemComponent from '../form/src/form-item'
+
+export const VxeFormItem = Object.assign(VxeFormItemComponent, {
+  install (app: App) {
+    app.component(VxeFormItemComponent.name as string, VxeFormItemComponent)
+  }
+})
+
+export const FormItem = VxeFormItem
+export default VxeFormItem

package/packages/icon/src/icon.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h, PropType } from 'vue'
 
-import { VxeIconPropTypes, VxeIconEmits } from '../../../types/all'
+import { VxeIconPropTypes, VxeIconEmits } from '../../../types'
 
 export default defineComponent({
   name: 'VxeIcon',

package/packages/input/index.ts

@@ -0,0 +1,15 @@
+import { App } from 'vue'
+import VxeInputConstructor from './src/input'
+import { dynamicApp } from '../dynamics'
+
+export const VxeInput = Object.assign(VxeInputConstructor, {
+  install (app: App) {
+    app.component(VxeInputConstructor.name, VxeInputConstructor)
+  }
+})
+
+export const Input = VxeInput
+
+dynamicApp.component(VxeInputConstructor.name, VxeInputConstructor)
+
+export default VxeInput

package/packages/input/src/date.ts

@@ -0,0 +1,42 @@
+import XEUtils from 'xe-utils'
+
+import { VxeInputPropTypes } from '../../../types'
+
+export function toStringTimeDate (str: VxeInputPropTypes.ModelValue) {
+  if (str) {
+    const rest = new Date()
+    let h = 0
+    let m = 0
+    let s = 0
+    if (XEUtils.isDate(str)) {
+      h = str.getHours()
+      m = str.getMinutes()
+      s = str.getSeconds()
+    } else {
+      str = XEUtils.toValueString(str)
+      const parses = str.match(/^(\d{1,2})(:(\d{1,2}))?(:(\d{1,2}))?/)
+      if (parses) {
+        h = XEUtils.toNumber(parses[1])
+        m = XEUtils.toNumber(parses[3])
+        s = XEUtils.toNumber(parses[5])
+      }
+    }
+    rest.setHours(h)
+    rest.setMinutes(m)
+    rest.setSeconds(s)
+    return rest
+  }
+  return new Date('')
+}
+
+export function getDateQuarter (date: Date) {
+  const month = date.getMonth()
+  if (month < 3) {
+    return 1
+  } else if (month < 6) {
+    return 2
+  } else if (month < 9) {
+    return 3
+  }
+  return 4
+}