vxe-pc-ui 0.0.2 → 0.1.0

package/packages/pulldown/src/pulldown.ts

@@ -0,0 +1,349 @@
+import { defineComponent, h, Teleport, ref, Ref, onUnmounted, reactive, nextTick, PropType, watch, createCommentVNode } from 'vue'
+import XEUtils from 'xe-utils'
+import globalConfigStore from '../../ui/src/globalStore'
+import { useSize } from '../../hooks/size'
+import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
+import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
+import { GlobalEvent } from '../../ui/src/event'
+
+import { VxeComponentStyle, VxePulldownConstructor, VxePulldownPropTypes, VxePulldownEmits, PulldownReactData, PulldownMethods, PulldownPrivateRef, VxePulldownMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxePulldown',
+  props: {
+    modelValue: Boolean as PropType<VxePulldownPropTypes.ModelValue>,
+    disabled: Boolean as PropType<VxePulldownPropTypes.Disabled>,
+    placement: String as PropType<VxePulldownPropTypes.Placement>,
+    size: { type: String as PropType<VxePulldownPropTypes.Size>, default: () => globalConfigStore.size },
+    className: [String, Function] as PropType<VxePulldownPropTypes.ClassName>,
+    popupClassName: [String, Function] as PropType<VxePulldownPropTypes.PopupClassName>,
+    destroyOnClose: Boolean as PropType<VxePulldownPropTypes.DestroyOnClose>,
+    transfer: Boolean as PropType<VxePulldownPropTypes.Transfer>
+  },
+  emits: [
+    'update:modelValue',
+    'hide-panel'
+  ] as VxePulldownEmits,
+  setup (props, context) {
+    const { slots, emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const computeSize = useSize(props)
+
+    const reactData = reactive<PulldownReactData>({
+      inited: false,
+      panelIndex: 0,
+      panelStyle: null,
+      panelPlacement: null,
+      visiblePanel: false,
+      animatVisible: false,
+      isActivated: false
+    })
+
+    const refElem = ref() as Ref<HTMLDivElement>
+    const refPulldowContent = ref() as Ref<HTMLDivElement>
+    const refPulldowPnanel = ref() as Ref<HTMLDivElement>
+
+    const refMaps: PulldownPrivateRef = {
+      refElem
+    }
+
+    const $xepulldown = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps
+    } as unknown as VxePulldownConstructor & VxePulldownMethods
+
+    let pulldownMethods = {} as PulldownMethods
+
+    const updateZindex = () => {
+      if (reactData.panelIndex < getLastZIndex()) {
+        reactData.panelIndex = nextZIndex()
+      }
+    }
+
+    const isPanelVisible = () => {
+      return reactData.visiblePanel
+    }
+
+    /**
+     * 手动更新位置
+     */
+    const updatePlacement = () => {
+      return nextTick().then(() => {
+        const { transfer, placement } = props
+        const { panelIndex, visiblePanel } = reactData
+        if (visiblePanel) {
+          const targetElem = refPulldowContent.value
+          const panelElem = refPulldowPnanel.value
+          if (panelElem && targetElem) {
+            const targetHeight = targetElem.offsetHeight
+            const targetWidth = targetElem.offsetWidth
+            const panelHeight = panelElem.offsetHeight
+            const panelWidth = panelElem.offsetWidth
+            const marginSize = 5
+            const panelStyle: VxeComponentStyle = {
+              zIndex: panelIndex
+            }
+            const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(targetElem)
+            let panelPlacement = 'bottom'
+            if (transfer) {
+              let left = boundingLeft
+              let top = boundingTop + targetHeight
+              if (placement === 'top') {
+                panelPlacement = 'top'
+                top = boundingTop - panelHeight
+              } else if (!placement) {
+                // 如果下面不够放，则向上
+                if (top + panelHeight + marginSize > visibleHeight) {
+                  panelPlacement = 'top'
+                  top = boundingTop - panelHeight
+                }
+                // 如果上面不够放，则向下（优先）
+                if (top < marginSize) {
+                  panelPlacement = 'bottom'
+                  top = boundingTop + targetHeight
+                }
+              }
+              // 如果溢出右边
+              if (left + panelWidth + marginSize > visibleWidth) {
+                left -= left + panelWidth + marginSize - visibleWidth
+              }
+              // 如果溢出左边
+              if (left < marginSize) {
+                left = marginSize
+              }
+              Object.assign(panelStyle, {
+                left: `${left}px`,
+                top: `${top}px`,
+                minWidth: `${targetWidth}px`
+              })
+            } else {
+              if (placement === 'top') {
+                panelPlacement = 'top'
+                panelStyle.bottom = `${targetHeight}px`
+              } else if (!placement) {
+                // 如果下面不够放，则向上
+                if (boundingTop + targetHeight + panelHeight > visibleHeight) {
+                  // 如果上面不够放，则向下（优先）
+                  if (boundingTop - targetHeight - panelHeight > marginSize) {
+                    panelPlacement = 'top'
+                    panelStyle.bottom = `${targetHeight}px`
+                  }
+                }
+              }
+            }
+            reactData.panelStyle = panelStyle
+            reactData.panelPlacement = panelPlacement
+          }
+        }
+        return nextTick()
+      })
+    }
+
+    let hidePanelTimeout: number
+
+    /**
+     * 显示下拉面板
+     */
+    const showPanel = (): Promise<void> => {
+      if (!reactData.inited) {
+        reactData.inited = true
+      }
+      return new Promise(resolve => {
+        if (!props.disabled) {
+          clearTimeout(hidePanelTimeout)
+          reactData.isActivated = true
+          reactData.animatVisible = true
+          setTimeout(() => {
+            reactData.visiblePanel = true
+            emit('update:modelValue', true)
+            updatePlacement()
+            setTimeout(() => {
+              resolve(updatePlacement())
+            }, 40)
+          }, 10)
+          updateZindex()
+        } else {
+          nextTick(() => {
+            resolve()
+          })
+        }
+      })
+    }
+
+    /**
+     * 隐藏下拉面板
+     */
+    const hidePanel = (): Promise<void> => {
+      reactData.visiblePanel = false
+      emit('update:modelValue', false)
+      return new Promise(resolve => {
+        if (reactData.animatVisible) {
+          hidePanelTimeout = window.setTimeout(() => {
+            reactData.animatVisible = false
+            nextTick(() => {
+              resolve()
+            })
+          }, 350)
+        } else {
+          nextTick(() => {
+            resolve()
+          })
+        }
+      })
+    }
+
+    /**
+     * 切换下拉面板
+     */
+    const togglePanel = () => {
+      if (reactData.visiblePanel) {
+        return hidePanel()
+      }
+      return showPanel()
+    }
+
+    const handleGlobalMousewheelEvent = (evnt: Event) => {
+      const { disabled } = props
+      const { visiblePanel } = reactData
+      const panelElem = refPulldowPnanel.value
+      if (!disabled) {
+        if (visiblePanel) {
+          if (getEventTargetNode(evnt, panelElem).flag) {
+            updatePlacement()
+          } else {
+            hidePanel()
+            pulldownMethods.dispatchEvent('hide-panel', {}, evnt)
+          }
+        }
+      }
+    }
+
+    const handleGlobalMousedownEvent = (evnt: Event) => {
+      const { disabled } = props
+      const { visiblePanel } = reactData
+      const el = refElem.value
+      const panelElem = refPulldowPnanel.value
+      if (!disabled) {
+        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag
+        if (visiblePanel && !reactData.isActivated) {
+          hidePanel()
+          pulldownMethods.dispatchEvent('hide-panel', {}, evnt)
+        }
+      }
+    }
+
+    const handleGlobalBlurEvent = (evnt: Event) => {
+      if (reactData.visiblePanel) {
+        reactData.isActivated = false
+        hidePanel()
+        pulldownMethods.dispatchEvent('hide-panel', {}, evnt)
+      }
+    }
+
+    pulldownMethods = {
+      dispatchEvent (type, params, evnt) {
+        emit(type, Object.assign({ $pulldown: $xepulldown, $event: evnt }, params))
+      },
+      isPanelVisible,
+      togglePanel,
+      showPanel,
+      hidePanel
+    }
+
+    Object.assign($xepulldown, pulldownMethods)
+
+    watch(() => props.modelValue, (value) => {
+      if (value) {
+        showPanel()
+      } else {
+        hidePanel()
+      }
+    })
+
+    nextTick(() => {
+      GlobalEvent.on($xepulldown, 'mousewheel', handleGlobalMousewheelEvent)
+      GlobalEvent.on($xepulldown, 'mousedown', handleGlobalMousedownEvent)
+      GlobalEvent.on($xepulldown, 'blur', handleGlobalBlurEvent)
+    })
+
+    onUnmounted(() => {
+      GlobalEvent.off($xepulldown, 'mousewheel')
+      GlobalEvent.off($xepulldown, 'mousedown')
+      GlobalEvent.off($xepulldown, 'blur')
+    })
+
+    const renderVN = () => {
+      const { className, popupClassName, destroyOnClose, transfer, disabled } = props
+      const { inited, isActivated, animatVisible, visiblePanel, panelStyle, panelPlacement } = reactData
+      const vSize = computeSize.value
+      const defaultSlot = slots.default
+      const headerSlot = slots.header
+      const footerSlot = slots.footer
+      const dropdownSlot = slots.dropdown
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-pulldown', className ? (XEUtils.isFunction(className) ? className({ $pulldown: $xepulldown }) : className) : '', {
+          [`size--${vSize}`]: vSize,
+          'is--visivle': visiblePanel,
+          'is--disabled': disabled,
+          'is--active': isActivated
+        }]
+      }, [
+        h('div', {
+          ref: refPulldowContent,
+          class: 'vxe-pulldown--content'
+        }, defaultSlot ? defaultSlot({ $pulldown: $xepulldown }) : []),
+        h(Teleport, {
+          to: 'body',
+          disabled: transfer ? !inited : true
+        }, [
+          h('div', {
+            ref: refPulldowPnanel,
+            class: ['vxe-table--ignore-clear vxe-pulldown--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $pulldown: $xepulldown }) : popupClassName) : '', {
+              [`size--${vSize}`]: vSize,
+              'is--transfer': transfer,
+              'animat--leave': animatVisible,
+              'animat--enter': visiblePanel
+            }],
+            placement: panelPlacement,
+            style: panelStyle
+          }, dropdownSlot
+            ? [
+                h('div', {
+                  class: 'vxe-pulldown--panel-wrapper'
+                }, !inited || (destroyOnClose && !visiblePanel && !animatVisible)
+                  ? []
+                  : [
+                      headerSlot
+                        ? h('div', {
+                          class: 'vxe-pulldown--panel-header'
+                        }, headerSlot({ $pulldown: $xepulldown }))
+                        : createCommentVNode(),
+                      h('div', {
+                        class: 'vxe-pulldown--panel-body'
+                      }, dropdownSlot({ $pulldown: $xepulldown })),
+                      footerSlot
+                        ? h('div', {
+                          class: 'vxe-pulldown--panel-footer'
+                        }, footerSlot({ $pulldown: $xepulldown }))
+                        : createCommentVNode()
+                    ])
+              ]
+            : [])
+        ])
+      ])
+    }
+
+    $xepulldown.renderVN = renderVN
+
+    return $xepulldown
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/radio/index.ts

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

package/packages/radio/src/button.ts

@@ -0,0 +1,132 @@
+import { defineComponent, h, computed, inject, PropType } from 'vue'
+import XEUtils from 'xe-utils'
+import { getFuncText } from '../../ui/src/utils'
+import globalConfigStore from '../../ui/src/globalStore'
+import { useSize } from '../../hooks/size'
+
+import { VxeRadioButtonPropTypes, VxeRadioGroupConstructor, VxeRadioButtonConstructor, VxeRadioButtonEmits, VxeRadioGroupPrivateMethods, RadioButtonMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeRadioButton',
+  props: {
+    modelValue: [String, Number, Boolean] as PropType<VxeRadioButtonPropTypes.ModelValue>,
+    label: { type: [String, Number, Boolean] as PropType<VxeRadioButtonPropTypes.Label>, default: null },
+    title: [String, Number] as PropType<VxeRadioButtonPropTypes.Title>,
+    content: [String, Number] as PropType<VxeRadioButtonPropTypes.Content>,
+    disabled: Boolean as PropType<VxeRadioButtonPropTypes.Disabled>,
+    strict: { type: Boolean as PropType<VxeRadioButtonPropTypes.Strict>, default: () => globalConfigStore.radioButton.strict },
+    size: { type: String as PropType<VxeRadioButtonPropTypes.Size>, default: () => globalConfigStore.radioButton.size || globalConfigStore.size }
+  },
+  emits: [
+    'update:modelValue',
+    'change'
+  ] as VxeRadioButtonEmits,
+  setup (props, context) {
+    const { slots, 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 $xeradiobutton = {
+      xID,
+      props,
+      context
+    } as unknown as VxeRadioButtonConstructor
+
+    let radioButtonMethods = {} as RadioButtonMethods
+
+    const $xeradiogroup = inject('$xeradiogroup', null as (VxeRadioGroupConstructor & VxeRadioGroupPrivateMethods) | null)
+
+    const computeDisabled = computed(() => {
+      return props.disabled || ($xeradiogroup && $xeradiogroup.props.disabled)
+    })
+
+    const computeName = computed(() => {
+      return $xeradiogroup ? $xeradiogroup.name : null
+    })
+
+    const computeStrict = computed(() => {
+      return $xeradiogroup ? $xeradiogroup.props.strict : props.strict
+    })
+
+    const computeChecked = computed(() => {
+      const { modelValue, label } = props
+      return $xeradiogroup ? $xeradiogroup.props.modelValue === label : modelValue === label
+    })
+
+    radioButtonMethods = {
+      dispatchEvent (type, params, evnt) {
+        emit(type, Object.assign({ $radioButton: $xeradiobutton, $event: evnt }, params))
+      }
+    }
+
+    Object.assign($xeradiobutton, radioButtonMethods)
+
+    const handleValue = (label: VxeRadioButtonPropTypes.Label, evnt: Event) => {
+      if ($xeradiogroup) {
+        $xeradiogroup.handleChecked({ label }, evnt)
+      } else {
+        emit('update:modelValue', label)
+        radioButtonMethods.dispatchEvent('change', { label }, evnt)
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, label)
+        }
+      }
+    }
+
+    const changeEvent = (evnt: Event) => {
+      const isDisabled = computeDisabled.value
+      if (!isDisabled) {
+        handleValue(props.label, evnt)
+      }
+    }
+
+    const clickEvent = (evnt: Event) => {
+      const isDisabled = computeDisabled.value
+      const isStrict = computeStrict.value
+      if (!isDisabled && !isStrict) {
+        if (props.label === ($xeradiogroup ? $xeradiogroup.props.modelValue : props.modelValue)) {
+          handleValue(null, evnt)
+        }
+      }
+    }
+
+    const renderVN = () => {
+      const vSize = computeSize.value
+      const isDisabled = computeDisabled.value
+      const name = computeName.value
+      const checked = computeChecked.value
+      return h('label', {
+        class: ['vxe-radio', 'vxe-radio-button', {
+          [`size--${vSize}`]: vSize,
+          'is--disabled': isDisabled
+        }],
+        title: props.title
+      }, [
+        h('input', {
+          class: 'vxe-radio--input',
+          type: 'radio',
+          name,
+          checked,
+          disabled: isDisabled,
+          onChange: changeEvent,
+          onClick: clickEvent
+        }),
+        h('span', {
+          class: 'vxe-radio--label'
+        }, slots.default ? slots.default({}) : getFuncText(props.content))
+      ])
+    }
+
+    Object.assign($xeradiobutton, {
+      renderVN,
+      dispatchEvent
+    })
+
+    return renderVN
+  }
+})

package/packages/radio/src/group.ts

@@ -0,0 +1,110 @@
+import { defineComponent, h, provide, PropType, inject, computed } from 'vue'
+import XEUtils from 'xe-utils'
+import globalConfigStore from '../../ui/src/globalStore'
+import VxeRadioComponent from './radio'
+import VxeRadioButtonComponent from './button'
+import { useSize } from '../../hooks/size'
+
+import { VxeRadioGroupPropTypes, VxeRadioGroupConstructor, VxeRadioGroupEmits, VxeRadioGroupPrivateMethods, RadioGroupPrivateMethods, RadioGroupMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeRadioGroup',
+  props: {
+    modelValue: [String, Number, Boolean] as PropType<VxeRadioGroupPropTypes.ModelValue>,
+    disabled: Boolean as PropType<VxeRadioGroupPropTypes.Disabled>,
+    type: String as PropType<VxeRadioGroupPropTypes.Type>,
+    options: Array as PropType<VxeRadioGroupPropTypes.Options>,
+    optionProps: Object as PropType<VxeRadioGroupPropTypes.OptionProps>,
+    strict: { type: Boolean as PropType<VxeRadioGroupPropTypes.Strict>, default: () => globalConfigStore.radioGroup.strict },
+    size: { type: String as PropType<VxeRadioGroupPropTypes.Size>, default: () => globalConfigStore.radioGroup.size || globalConfigStore.size }
+  },
+  emits: [
+    'update:modelValue',
+    'change'
+  ] as VxeRadioGroupEmits,
+  setup (props, context) {
+    const { slots, emit } = context
+    const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
+    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+
+    const xID = XEUtils.uniqueId()
+
+    const $xeradiogroup = {
+      xID,
+      props,
+      context,
+      name: XEUtils.uniqueId('xegroup_')
+    } as unknown as VxeRadioGroupConstructor & VxeRadioGroupPrivateMethods
+
+    const computePropsOpts = computed(() => {
+      return props.optionProps || {}
+    })
+
+    const computeLabelField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.label || 'label'
+    })
+
+    const computeValueField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.value || 'value'
+    })
+
+    const computeDisabledField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.disabled || 'disabled'
+    })
+
+    let radioGroupMethods = {} as RadioGroupMethods
+
+    useSize(props)
+
+    const radioGroupPrivateMethods: RadioGroupPrivateMethods = {
+      handleChecked (params, evnt) {
+        emit('update:modelValue', params.label)
+        radioGroupMethods.dispatchEvent('change', params)
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, params.label)
+        }
+      }
+    }
+
+    radioGroupMethods = {
+      dispatchEvent (type, params, evnt) {
+        emit(type, Object.assign({ $radioGroup: $xeradiogroup, $event: evnt }, params))
+      }
+    }
+
+    const renderVN = () => {
+      const { options, type } = props
+      const defaultSlot = slots.default
+      const valueField = computeValueField.value as 'value'
+      const labelField = computeLabelField.value as 'label'
+      const disabledField = computeDisabledField.value as 'disabled'
+      const btnComp = type === 'button' ? VxeRadioButtonComponent : VxeRadioComponent
+      return h('div', {
+        class: 'vxe-radio-group'
+      }, defaultSlot
+        ? defaultSlot({})
+        : (options
+            ? options.map(item => {
+              return h(btnComp, {
+                label: item[valueField],
+                content: item[labelField],
+                disabled: item[disabledField]
+              })
+            })
+            : []))
+    }
+
+    Object.assign($xeradiogroup, radioGroupPrivateMethods, {
+      renderVN,
+      dispatchEvent
+    })
+
+    provide('$xeradiogroup', $xeradiogroup)
+
+    return renderVN
+  }
+})