vxe-pc-ui 0.0.2 → 0.2.0

package/packages/checkbox/src/group.ts

@@ -0,0 +1,127 @@
+import { defineComponent, h, provide, PropType, computed, inject } from 'vue'
+import globalConfigStore from '../../ui/src/globalStore'
+import XEUtils from 'xe-utils'
+import VxeCheckboxComponent from './checkbox'
+import { useSize } from '../../hooks/size'
+
+import { VxeCheckboxGroupConstructor, VxeCheckboxGroupEmits, VxeCheckboxGroupPrivateMethods, CheckboxGroupPrivateMethods, CheckboxPrivateComputed, CheckboxGroupMethods, VxeCheckboxGroupPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeCheckboxGroup',
+  props: {
+    modelValue: Array as PropType<VxeCheckboxGroupPropTypes.ModelValue>,
+    options: Array as PropType<VxeCheckboxGroupPropTypes.Options>,
+    optionProps: Object as PropType<VxeCheckboxGroupPropTypes.OptionProps>,
+    disabled: Boolean as PropType<VxeCheckboxGroupPropTypes.Disabled>,
+    max: { type: [String, Number] as PropType<VxeCheckboxGroupPropTypes.Max>, default: null },
+    size: { type: String as PropType<VxeCheckboxGroupPropTypes.Size>, default: () => globalConfigStore.checkboxGroup.size || globalConfigStore.size }
+  },
+  emits: [
+    'update:modelValue',
+    'change'
+  ] as VxeCheckboxGroupEmits,
+  setup (props, context) {
+    const { slots, emit } = context
+    const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
+    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
+
+    const xID = XEUtils.uniqueId()
+
+    const computeIsMaximize = computed(() => {
+      const { modelValue, max } = props
+      if (max) {
+        return (modelValue ? modelValue.length : 0) >= XEUtils.toNumber(max)
+      }
+      return false
+    })
+
+    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'
+    })
+
+    const computeMaps: CheckboxPrivateComputed = {
+      computeIsMaximize
+    }
+
+    const $xecheckboxgroup = {
+      xID,
+      props,
+      context,
+
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeCheckboxGroupConstructor & VxeCheckboxGroupPrivateMethods
+
+    useSize(props)
+
+    const checkboxGroupMethods: CheckboxGroupMethods = {
+      dispatchEvent (type, params, evnt) {
+        emit(type, Object.assign({ $checkboxGroup: $xecheckboxgroup, $event: evnt }, params))
+      }
+    }
+
+    const checkboxGroupPrivateMethods: CheckboxGroupPrivateMethods = {
+      handleChecked (params, evnt) {
+        const { checked, label } = params
+        const checklist = props.modelValue || []
+        const checkIndex = checklist.indexOf(label)
+        if (checked) {
+          if (checkIndex === -1) {
+            checklist.push(label)
+          }
+        } else {
+          checklist.splice(checkIndex, 1)
+        }
+        emit('update:modelValue', checklist)
+        $xecheckboxgroup.dispatchEvent('change', Object.assign({ checklist }, params), evnt)
+        // 自动更新校验状态
+        if ($xeform && formItemInfo) {
+          $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, checklist)
+        }
+      }
+    }
+
+    Object.assign($xecheckboxgroup, checkboxGroupMethods, checkboxGroupPrivateMethods)
+
+    const renderVN = () => {
+      const { options } = props
+      const defaultSlot = slots.default
+      const valueField = computeValueField.value as 'value'
+      const labelField = computeLabelField.value as 'label'
+      const disabledField = computeDisabledField.value as 'disabled'
+      return h('div', {
+        class: 'vxe-checkbox-group'
+      }, defaultSlot
+        ? defaultSlot({})
+        : (options
+            ? options.map(item => {
+              return h(VxeCheckboxComponent, {
+                label: item[valueField],
+                content: item[labelField],
+                disabled: item[disabledField]
+              })
+            })
+            : []))
+    }
+
+    $xecheckboxgroup.renderVN = renderVN
+
+    provide('$xecheckboxgroup', $xecheckboxgroup)
+
+    return renderVN
+  }
+})

package/packages/checkbox-group/index.ts

@@ -0,0 +1,15 @@
+import { App } from 'vue'
+import VxeCheckboxGroupComponent from '../checkbox/src/group'
+import { dynamicApp } from '../dynamics'
+
+export const VxeCheckboxGroup = Object.assign(VxeCheckboxGroupComponent, {
+  install (app: App) {
+    app.component(VxeCheckboxGroupComponent.name, VxeCheckboxGroupComponent)
+  }
+})
+
+export const CheckboxGroup = VxeCheckboxGroup
+
+dynamicApp.component(VxeCheckboxGroupComponent.name, VxeCheckboxGroupComponent)
+
+export default VxeCheckboxGroup

package/packages/col/index.ts

@@ -1,5 +1,5 @@
 import { App } from 'vue'
-import VxeColComponent from './src/col'
+import VxeColComponent from '../row/src/col'
 
 const VxeCol = Object.assign({}, VxeColComponent, {
   install (app: App) {

package/packages/components.ts

@@ -1,21 +1,44 @@
 import { App } from 'vue'
 import XEUtils from 'xe-utils'
 import { setConfig } from './ui'
+
+import VxeAnchor from './anchor'
+import VxeAnchorLink from './anchor-link'
+import VxeBreadcrumb from './breadcrumb'
+import VxeBreadcrumbItem from './breadcrumb-item'
+import VxeButton from './button'
+import VxeButtonGroup from './button-group'
+import VxeCheckbox from './checkbox'
+import VxeCheckboxGroup from './checkbox-group'
+import VxeCol from './col'
+import VxeForm from './form'
+import VxeFormDesign from './form-design'
+import VxeFormGather from './form-gather'
+import VxeFormItem from './form-item'
 import VxeIcon from './icon'
-import VxeLayoutContainer from './layout-container'
-import VxeLayoutHeader from './layout-header'
+import VxeInput from './input'
 import VxeLayoutAside from './layout-aside'
 import VxeLayoutBody from './layout-body'
+import VxeLayoutContainer from './layout-container'
 import VxeLayoutFooter from './layout-footer'
+import VxeLayoutHeader from './layout-header'
+import VxeListDesign from './list-design'
+import VxeLoading from './loading'
+import VxeModal from './modal'
+import VxeOptgroup from './optgroup'
+import VxeOption from './option'
+import VxePager from './pager'
+import VxePulldown from './pulldown'
+import VxeRadio from './radio'
+import VxeRadioButton from './radio-button'
+import VxeRadioGroup from './radio-group'
 import VxeRow from './row'
-import VxeCol from './col'
-import VxeBreadcrumb from './breadcrumb'
-import VxeBreadcrumbItem from './breadcrumb-item'
-import VxeButton from './button'
-import VxeButtonGroup from './button-group'
-import VxeAnchor from './anchor'
-import VxeAnchorLink from './anchor-link'
-import VxeDesign from './design'
+import VxeSelect from './select'
+import VxeSwitch from './switch'
+import VxeTabPane from './tab-pane'
+import VxeTabs from './tabs'
+import VxeTextarea from './textarea'
+import VxeTooltip from './tooltip'
 
 import zhCN from './locale/lang/zh-CN'
 
@@ -26,41 +49,89 @@ setConfig({
   i18n: (key: string, args: any) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
 })
 
+const components = [
+  VxeAnchor,
+  VxeAnchorLink,
+  VxeBreadcrumb,
+  VxeBreadcrumbItem,
+  VxeButton,
+  VxeButtonGroup,
+  VxeCheckbox,
+  VxeCheckboxGroup,
+  VxeCol,
+  VxeForm,
+  VxeFormDesign,
+  VxeFormGather,
+  VxeFormItem,
+  VxeIcon,
+  VxeInput,
+  VxeLayoutAside,
+  VxeLayoutBody,
+  VxeLayoutContainer,
+  VxeLayoutFooter,
+  VxeLayoutHeader,
+  VxeListDesign,
+  VxeLoading,
+  VxeModal,
+  VxeOptgroup,
+  VxeOption,
+  VxePager,
+  VxePulldown,
+  VxeRadio,
+  VxeRadioButton,
+  VxeRadioGroup,
+  VxeRow,
+  VxeSelect,
+  VxeSwitch,
+  VxeTabPane,
+  VxeTabs,
+  VxeTextarea,
+  VxeTooltip
+]
+
 export function install (app: App, options?: VxeGlobalConfig) {
   setConfig(options)
 
-  app.use(VxeIcon)
-  app.use(VxeLayoutContainer)
-  app.use(VxeLayoutHeader)
-  app.use(VxeLayoutAside)
-  app.use(VxeLayoutBody)
-  app.use(VxeLayoutFooter)
-  app.use(VxeRow)
-  app.use(VxeCol)
-  app.use(VxeBreadcrumb)
-  app.use(VxeBreadcrumbItem)
-  app.use(VxeButton)
-  app.use(VxeButtonGroup)
-  app.use(VxeAnchor)
-  app.use(VxeAnchorLink)
-  app.use(VxeDesign)
+  components.forEach(component => app.use(component))
 }
 
 export * from './ui'
 
 // Components
+export * from './anchor'
+export * from './anchor-link'
+export * from './breadcrumb'
+export * from './breadcrumb-item'
+export * from './button'
+export * from './button-group'
+export * from './checkbox'
+export * from './checkbox-group'
+export * from './col'
+export * from './form'
+export * from './form-design'
+export * from './form-gather'
+export * from './form-item'
 export * from './icon'
-export * from './layout-container'
-export * from './layout-header'
+export * from './input'
 export * from './layout-aside'
 export * from './layout-body'
+export * from './layout-container'
 export * from './layout-footer'
+export * from './layout-header'
+export * from './list-design'
+export * from './loading'
+export * from './modal'
+export * from './optgroup'
+export * from './option'
+export * from './pager'
+export * from './pulldown'
+export * from './radio'
+export * from './radio-button'
+export * from './radio-group'
 export * from './row'
-export * from './col'
-export * from './breadcrumb'
-export * from './breadcrumb-item'
-export * from './button'
-export * from './button-group'
-export * from './anchor'
-export * from './anchor-link'
-export * from './design'
+export * from './select'
+export * from './switch'
+export * from './tab-pane'
+export * from './tabs'
+export * from './textarea'
+export * from './tooltip'

package/packages/dynamics/index.ts

@@ -0,0 +1,34 @@
+import { defineComponent, h, createApp, resolveComponent, reactive } from 'vue'
+
+import { VxeModalDefines } from '../../types'
+
+let dynamicContainerElem: HTMLElement
+
+export const dynamicStore = reactive({
+  modals: [] as VxeModalDefines.ModalOptions[]
+})
+
+/**
+ * 动态组件
+ */
+const VxeDynamics = defineComponent({
+  setup () {
+    return () => {
+      const { modals } = dynamicStore
+      return h('div', {
+        class: 'vxe-dynamics--modal'
+      }, modals.map((item) => h(resolveComponent('vxe-modal'), item)))
+    }
+  }
+})
+
+export const dynamicApp = createApp(VxeDynamics)
+
+export function checkDynamic () {
+  if (!dynamicContainerElem) {
+    dynamicContainerElem = document.createElement('div')
+    dynamicContainerElem.className = 'vxe-dynamics'
+    document.body.appendChild(dynamicContainerElem)
+    dynamicApp.mount(dynamicContainerElem)
+  }
+}

package/packages/form/index.ts

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

package/packages/form/src/form-config-item.ts

@@ -0,0 +1,193 @@
+import { defineComponent, h, inject, provide, PropType, createCommentVNode } from 'vue'
+import XEUtils from 'xe-utils'
+import iconConfigStore from '../../ui/src/iconStore'
+import { renderer } from '../../ui/src/renderer'
+import { getFuncText, isEnableConf } from '../../ui/src/utils'
+import { getSlotVNs } from '../../ui/src/vn'
+import { getI18n } from '../../ui/src/i18n'
+import { renderTitle } from './render'
+import { isActivetem } from './util'
+
+import { VxeFormConstructor, VxeFormDefines, VxeFormPrivateMethods, VxeComponentSlot } from '../../../types'
+
+const VxeFormConfigItem = defineComponent({
+  name: 'VxeFormConfigItem',
+  props: {
+    itemConfig: Object as PropType<VxeFormDefines.ItemInfo>
+  },
+  setup (props) {
+    const $xeform = inject('$xeForm', {} as VxeFormConstructor & VxeFormPrivateMethods)
+    const xeformiteminfo = { itemConfig: props.itemConfig }
+    provide('xeFormItemInfo', xeformiteminfo)
+
+    const renderVN = () => {
+      const { reactData } = $xeform
+      const { data, rules, span: allSpan, align: allAlign, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical } = $xeform.props
+      const { computeValidOpts } = $xeform.getComputeMaps()
+      const item = props.itemConfig as VxeFormDefines.ItemInfo
+      const { collapseAll } = reactData
+      const validOpts = computeValidOpts.value
+      const { slots, title, visible, folding, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, children, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item
+      const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null
+      const itemClassName = compConf ? compConf.itemClassName : ''
+      const itemStyle = compConf ? compConf.itemStyle : null
+      const itemContentClassName = compConf ? compConf.itemContentClassName : ''
+      const itemContentStyle = compConf ? compConf.itemContentStyle : null
+      const itemTitleClassName = compConf ? compConf.itemTitleClassName : ''
+      const itemTitleStyle = compConf ? compConf.itemTitleStyle : null
+      const defaultSlot = slots ? slots.default : null
+      const titleSlot = slots ? slots.title : null
+      const span = item.span || allSpan
+      const align = item.align || allAlign
+      const titleAlign = XEUtils.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign
+      const titleWidth = XEUtils.eqNull(item.titleWidth) ? allTitleWidth : item.titleWidth
+      const titleColon = XEUtils.eqNull(item.titleColon) ? allTitleColon : item.titleColon
+      const titleAsterisk = XEUtils.eqNull(item.titleAsterisk) ? allTitleAsterisk : item.titleAsterisk
+      const itemOverflow = (XEUtils.isUndefined(titleOverflow) || XEUtils.isNull(titleOverflow)) ? allTitleOverflow : titleOverflow
+      const itemVertical = (XEUtils.isUndefined(vertical) || XEUtils.isNull(vertical)) ? allVertical : vertical
+      const ovEllipsis = itemOverflow === 'ellipsis'
+      const ovTitle = itemOverflow === 'title'
+      const ovTooltip = itemOverflow === true || itemOverflow === 'tooltip'
+      const hasEllipsis = ovTitle || ovTooltip || ovEllipsis
+      const params = { data, field, property: field, item, $form: $xeform, $grid: $xeform.xegrid }
+      if (visible === false) {
+        return createCommentVNode()
+      }
+      let isRequired = false
+      if (rules) {
+        const itemRules = rules[field]
+        if (itemRules) {
+          isRequired = itemRules.some((rule) => rule.required)
+        }
+      }
+      // 如果为项集合
+      const isGather = children && children.length > 0
+      if (isGather) {
+        const childVNs = children.map((childItem, index) => {
+          return h(VxeFormConfigItem, {
+            key: index,
+            itemConfig: childItem
+          })
+        })
+        return childVNs.length
+          ? h('div', {
+            class: ['vxe-form--gather vxe-row', item.id, span ? `vxe-col--${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : '']
+          }, childVNs)
+          : createCommentVNode()
+      }
+      let contentVNs: VxeComponentSlot[] = []
+      if (defaultSlot) {
+        contentVNs = $xeform.callSlot(defaultSlot, params)
+      } else if (compConf && compConf.renderItemContent) {
+        contentVNs = getSlotVNs(compConf.renderItemContent(itemRender, params))
+      } else if (field) {
+        contentVNs = [XEUtils.toValueString(XEUtils.get(data, field))]
+      }
+      if (collapseNode) {
+        contentVNs.push(
+          h('div', {
+            class: 'vxe-form--item-trigger-node',
+            onClick: $xeform.toggleCollapseEvent
+          }, [
+            h('span', {
+              class: 'vxe-form--item-trigger-text'
+            }, collapseAll ? getI18n('vxe.form.unfolding') : getI18n('vxe.form.folding')),
+            h('i', {
+              class: ['vxe-form--item-trigger-icon', collapseAll ? iconConfigStore.FORM_FOLDING : iconConfigStore.FORM_UNFOLDING]
+            })
+          ])
+        )
+      }
+      if (errRule && validOpts.showMessage) {
+        contentVNs.push(
+          h('div', {
+            class: 'vxe-form--item-valid',
+            style: errRule.maxWidth
+              ? {
+                  width: `${errRule.maxWidth}px`
+                }
+              : null
+          }, errRule.content)
+        )
+      }
+      const ons = ovTooltip
+        ? {
+            onMouseenter (evnt: MouseEvent) {
+              $xeform.triggerTitleTipEvent(evnt, params)
+            },
+            onMouseleave: $xeform.handleTitleTipLeaveEvent
+          }
+        : {}
+      return h('div', {
+        class: [
+          'vxe-form--item',
+          item.id,
+          span ? `vxe-col--${span} is--span` : '',
+          className ? (XEUtils.isFunction(className) ? className(params) : className) : '',
+          itemClassName ? (XEUtils.isFunction(itemClassName) ? itemClassName(params) : itemClassName) : '',
+          {
+            'is--title': title,
+            'is--colon': titleColon,
+            'is--vertical': itemVertical,
+            'is--asterisk': titleAsterisk,
+            'is--required': isRequired,
+            'is--hidden': folding && collapseAll,
+            'is--active': isActivetem($xeform, item),
+            'is--error': showError
+          }
+        ],
+        style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : itemStyle
+      }, [
+        h('div', {
+          class: 'vxe-form--item-inner'
+        }, [
+          (showTitle !== false) && (title || titleSlot)
+            ? h('div', {
+              class: [
+                'vxe-form--item-title',
+                titleAlign ? `align--${titleAlign}` : '',
+                hasEllipsis ? 'is--ellipsis' : '',
+                itemTitleClassName ? (XEUtils.isFunction(itemTitleClassName) ? itemTitleClassName(params) : itemTitleClassName) : '',
+                titleClassName ? (XEUtils.isFunction(titleClassName) ? titleClassName(params) : titleClassName) : ''
+              ],
+              style: Object.assign(
+                {},
+                XEUtils.isFunction(itemTitleStyle) ? itemTitleStyle(params) : itemTitleStyle,
+                XEUtils.isFunction(titleStyle) ? titleStyle(params) : titleStyle,
+                titleWidth
+                  ? {
+                      width: isNaN(titleWidth as number) ? titleWidth : `${titleWidth}px`
+                    }
+                  : null
+              ),
+              title: ovTitle ? getFuncText(title) : null,
+              ...ons
+            }, renderTitle($xeform, item))
+            : null,
+          h('div', {
+            class: [
+              'vxe-form--item-content',
+              align ? `align--${align}` : '',
+              itemContentClassName ? (XEUtils.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName) : '',
+              contentClassName ? (XEUtils.isFunction(contentClassName) ? contentClassName(params) : contentClassName) : ''
+            ],
+            style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
+          }, contentVNs)
+        ])
+      ])
+    }
+
+    const $xeformconfigitem = {
+      renderVN
+    }
+
+    provide('$xeFormGather', null)
+
+    return $xeformconfigitem
+  },
+  render () {
+    return this.renderVN()
+  }
+})
+
+export default VxeFormConfigItem

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

@@ -0,0 +1,60 @@
+import { defineComponent, h, onUnmounted, inject, ref, Ref, reactive, onMounted, provide, nextTick } from 'vue'
+import { errLog } from '../../ui/src/log'
+import { createItem, watchItem, destroyItem, assemItem, XEFormItemProvide } from './util'
+import { formItemProps } from './form-item'
+
+import { VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeFormGather',
+  props: formItemProps,
+  setup (props, { slots }) {
+    const refElem = ref() as Ref<HTMLDivElement>
+    const $xeForm = inject('$xeForm', {} as VxeFormConstructor & VxeFormPrivateMethods)
+    const parentFormGather = inject('$xeFormGather', null as XEFormItemProvide | null)
+    const defaultSlot = slots.default
+    const formItem = reactive(createItem($xeForm, props))
+    formItem.children = []
+
+    const formItemInfo = { itemConfig: formItem }
+    provide('xeFormItemInfo', formItemInfo)
+
+    watchItem(props, formItem)
+
+    onMounted(() => {
+      assemItem($xeForm, refElem.value, formItem, parentFormGather)
+    })
+
+    onUnmounted(() => {
+      destroyItem($xeForm, formItem)
+    })
+
+    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      nextTick(() => {
+        if ($xeForm && $xeForm.props.customLayout) {
+          errLog('vxe.error.errConflicts', ['custom-layout', '<form-gather ...>'])
+        }
+      })
+    }
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem
+      }, defaultSlot ? defaultSlot() : [])
+    }
+
+    const $xeFormGather = {
+      formItem,
+
+      renderVN
+    }
+
+    provide('$xeFormGather', $xeFormGather)
+    provide('$xeFormItem', null)
+
+    return $xeFormGather
+  },
+  render () {
+    return this.renderVN()
+  }
+})