vxe-pc-ui 0.0.2 → 0.2.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 formItemInfo = 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 && formItemInfo) {
+          $xeform.triggerItemEvent(evnt, formItemInfo.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/tab-pane/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeTabPaneComponent from '../tabs/src/tab-pane'
+
+const VxeTabPane = Object.assign({}, VxeTabPaneComponent, {
+  install (app: App) {
+    app.component(VxeTabPaneComponent.name as string, VxeTabPaneComponent)
+  }
+})
+
+export const TabPane = VxeTabPane
+export default VxeTabPane

package/packages/tabs/index.ts

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

package/packages/tabs/src/tab-pane.ts

@@ -0,0 +1,85 @@
+import { defineComponent, ref, h, reactive, PropType, watch, inject, onMounted, onUnmounted } from 'vue'
+import XEUtils from 'xe-utils'
+import { assembleAnchorTab, destroyAnchorTab } from './util'
+
+import { VxeTabPanePropTypes, TabPaneReactData, TabPanePrivateRef, VxeTabPanePrivateComputed, VxeTabPaneConstructor, VxeTabPanePrivateMethods, VxeTabPaneDefines, VxeTabsConstructor, VxeTabsPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeTabPane',
+  props: {
+    title: [String, Number] as PropType<VxeTabPanePropTypes.Title>,
+    name: [String, Number, Boolean] as PropType<VxeTabPanePropTypes.Name>
+  },
+  emits: [],
+  setup (props, context) {
+    const { slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const $xeTabs = inject<(VxeTabsConstructor & VxeTabsPrivateMethods) | null>('$xeTabs', null)
+
+    const reactData = reactive<TabPaneReactData>({
+    })
+
+    const tabConfig = reactive<VxeTabPaneDefines.TabConfig>({
+      id: xID,
+      title: props.title,
+      name: props.name,
+      slots: {
+        default: slots.default
+      }
+    })
+
+    const refMaps: TabPanePrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeTabPanePrivateComputed = {
+    }
+
+    const $xeTabPane = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeTabPaneConstructor & VxeTabPanePrivateMethods
+
+    watch(() => props.title, (val) => {
+      tabConfig.title = val
+    })
+
+    watch(() => props.name, (val) => {
+      tabConfig.name = val
+    })
+
+    onMounted(() => {
+      if ($xeTabs && refElem.value) {
+        assembleAnchorTab($xeTabs, refElem.value, tabConfig)
+      }
+    })
+
+    onUnmounted(() => {
+      if ($xeTabs) {
+        destroyAnchorTab($xeTabs, tabConfig)
+      }
+    })
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem
+      }, [])
+    }
+
+    $xeTabPane.renderVN = renderVN
+
+    return $xeTabPane
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/tabs/src/tabs.ts

@@ -0,0 +1,223 @@
+import { defineComponent, ref, h, reactive, PropType, provide, computed, createCommentVNode, watch, nextTick, onMounted } from 'vue'
+import XEUtils from 'xe-utils'
+import VxeTabPaneComponent from './tab-pane'
+import { getSlotVNs } from '../../ui/src/vn'
+
+import { VxeTabsPropTypes, VxeTabPaneProps, TabsReactData, TabsPrivateRef, VxeTabsPrivateComputed, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeTabs',
+  props: {
+    modelValue: [String, Number, Boolean] as PropType<VxeTabsPropTypes.ModelValue>,
+    options: Array as PropType<VxeTabsPropTypes.Options>,
+    destroyOnClose: Boolean as PropType<VxeTabsPropTypes.DestroyOnClose>,
+    type: String as PropType<VxeTabsPropTypes.Type>
+  },
+  emits: [],
+  setup (props, context) {
+    const { slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+    const refHeaderElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<TabsReactData>({
+      staticTabs: [],
+      activeName: props.modelValue,
+      initNames: props.modelValue ? [props.modelValue] : [],
+      lintLeft: 0,
+      lintWidth: 0
+    })
+
+    const refMaps: TabsPrivateRef = {
+      refElem
+    }
+
+    const computeActiveOptionTab = computed(() => {
+      const { options } = props
+      const { activeName } = reactData
+      return options ? options.find(item => item.name === activeName) : null
+    })
+
+    const computeActiveDefaultTab = computed(() => {
+      const { staticTabs, activeName } = reactData
+      return staticTabs.find(item => item.name === activeName)
+    })
+
+    const computeMaps: VxeTabsPrivateComputed = {
+    }
+
+    const $xeTabs = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeTabsConstructor & VxeTabsPrivateMethods
+
+    const callSlot = (slotFunc: any, params: any) => {
+      if (slotFunc) {
+        if (XEUtils.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null
+        }
+        if (XEUtils.isFunction(slotFunc)) {
+          return getSlotVNs(slotFunc(params))
+        }
+      }
+      return []
+    }
+
+    const updateLineStyle = () => {
+      nextTick(() => {
+        const { type, options } = props
+        const { staticTabs, activeName } = reactData
+        const headerWrapperEl = refHeaderElem.value
+        if (headerWrapperEl && !type) {
+          const index = XEUtils.findIndexOf(staticTabs.length ? staticTabs : options, item => item.name === activeName)
+          if (index > -1) {
+            const tabEl = headerWrapperEl.children[index] as HTMLDivElement
+            const tabWidth = tabEl.clientWidth
+            const lintWidth = Math.max(4, Math.floor(tabWidth * 0.6))
+            reactData.lintLeft = tabEl.offsetLeft + Math.floor((tabWidth - lintWidth) / 2)
+            reactData.lintWidth = lintWidth
+          }
+        }
+      })
+    }
+
+    const clickEvent = (evnt: KeyboardEvent, item: VxeTabPaneProps | VxeTabPaneDefines.TabConfig) => {
+      const { initNames } = reactData
+      const { name } = item
+      if (!initNames.includes(name)) {
+        initNames.push(name)
+      }
+      reactData.activeName = name
+      updateLineStyle()
+    }
+
+    const renderTabHeader = (list: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
+      const { type } = props
+      const { activeName, lintLeft, lintWidth } = reactData
+      return h('div', {
+        class: 'vxe-tabs-header'
+      }, [
+        h('div', {
+          ref: refHeaderElem,
+          class: 'vxe-tabs-header--wrapper'
+        }, list.map(item => {
+          const { title, name, slots } = item
+          const tabSlot = slots ? slots.tab : null
+          return h('div', {
+            class: ['vxe-tab-header--item', {
+              'is--active': activeName === name
+            }],
+            onClick (evnt: KeyboardEvent) {
+              clickEvent(evnt, item)
+            }
+          }, [
+            h('div', {
+              class: 'vxe-tab-header--item-name'
+            }, tabSlot ? callSlot(tabSlot, { name, title }) : `${title}`)
+          ])
+        })),
+        type
+          ? null
+          : h('span', {
+            class: 'vxe-tabs-header--active-line',
+            style: {
+              left: `${lintLeft}px`,
+              width: `${lintWidth}px`
+            }
+          })
+      ])
+    }
+
+    const renderOptionPane = (item: VxeTabPaneProps) => {
+      const { initNames, activeName } = reactData
+      const { name, slots } = item
+      const defaultSlot = slots ? slots.default : null
+      return h(VxeTabPaneComponent, item, {
+        default () {
+          return name && initNames.includes(name)
+            ? h('div', {
+              class: ['vxe-tab-pane--item', {
+                'is--visible': activeName === name
+              }]
+            }, callSlot(defaultSlot, {}))
+            : createCommentVNode()
+        }
+      })
+    }
+
+    const renderOptionContent = (options: VxeTabsPropTypes.Options) => {
+      const { destroyOnClose } = props
+      const activeOptionTab = computeActiveOptionTab.value
+      if (destroyOnClose) {
+        return activeOptionTab ? renderOptionPane(activeOptionTab) : createCommentVNode()
+      }
+      return options.map(renderOptionPane)
+    }
+
+    const renderDefaultPane = (item: VxeTabPaneDefines.TabConfig) => {
+      const { initNames, activeName } = reactData
+      const { name, slots } = item
+      const defaultSlot = slots ? slots.default : null
+      return name && initNames.includes(name)
+        ? h('div', {
+          class: ['vxe-tab-pane--item', {
+            'is--visible': activeName === name
+          }]
+        }, callSlot(defaultSlot, {}))
+        : createCommentVNode()
+    }
+
+    const renderDefaultContent = (staticTabs: VxeTabPaneDefines.TabConfig[]) => {
+      const { destroyOnClose } = props
+      const activeDefaultTab = computeActiveDefaultTab.value
+      if (destroyOnClose) {
+        return activeDefaultTab ? renderDefaultPane(activeDefaultTab) : createCommentVNode()
+      }
+      return staticTabs.map(renderDefaultPane)
+    }
+
+    const renderVN = () => {
+      const { type, options } = props
+      const { staticTabs } = reactData
+      const defaultSlot = slots.default
+
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-tabs', `vxe-tabs--${type || 'default'}`]
+      }, [
+        h('div', {
+          class: 'vxe-tabs-slots'
+        }, defaultSlot ? defaultSlot({}) : []),
+        renderTabHeader(defaultSlot ? staticTabs : (options || [])),
+        h('div', {
+          class: 'vxe-tabs-pane'
+        }, defaultSlot ? renderDefaultContent(staticTabs) : renderOptionContent(options || []))
+      ])
+    }
+
+    watch(() => props.modelValue, (val) => {
+      reactData.activeName = val
+      updateLineStyle()
+    })
+
+    onMounted(() => {
+      updateLineStyle()
+    })
+
+    $xeTabs.renderVN = renderVN
+
+    provide('$xeTabs', $xeTabs)
+
+    return $xeTabs
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/tabs/src/util.ts

@@ -0,0 +1,21 @@
+import XEUtils from 'xe-utils'
+
+import { VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines } from '../../../types'
+
+export function assembleAnchorTab ($xeTabs: VxeTabsConstructor & VxeTabsPrivateMethods, elem: HTMLElement, tabConfig: VxeTabPaneDefines.TabConfig) {
+  const staticLinks = $xeTabs.reactData.staticTabs
+  const parentElem = elem.parentNode
+  if (parentElem) {
+    staticLinks.splice(XEUtils.arrayIndexOf(parentElem.children, elem), 0, tabConfig)
+    $xeTabs.reactData.staticTabs = staticLinks.slice(0)
+  }
+}
+
+export function destroyAnchorTab ($xeTabs: VxeTabsConstructor & VxeTabsPrivateMethods, tabConfig: VxeTabPaneDefines.TabConfig) {
+  const staticTabs = $xeTabs.reactData.staticTabs
+  const matchObj = XEUtils.findTree(staticTabs, item => item.id === tabConfig.id, { children: 'children' })
+  if (matchObj) {
+    matchObj.items.splice(matchObj.index, 1)
+  }
+  $xeTabs.reactData.staticTabs = staticTabs.slice(0)
+}

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