vxe-pc-ui 0.0.2 → 0.1.0

package/packages/radio/src/radio.ts

@@ -0,0 +1,137 @@
+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 { VxeRadioPropTypes, VxeRadioConstructor, VxeRadioEmits, VxeRadioGroupConstructor, VxeRadioGroupPrivateMethods, RadioMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeRadio',
+  props: {
+    modelValue: [String, Number, Boolean] as PropType<VxeRadioPropTypes.ModelValue>,
+    label: { type: [String, Number, Boolean] as PropType<VxeRadioPropTypes.Label>, default: null },
+    title: [String, Number] as PropType<VxeRadioPropTypes.Title>,
+    content: [String, Number] as PropType<VxeRadioPropTypes.Content>,
+    disabled: Boolean as PropType<VxeRadioPropTypes.Disabled>,
+    name: String as PropType<VxeRadioPropTypes.Name>,
+    strict: { type: Boolean as PropType<VxeRadioPropTypes.Strict>, default: () => globalConfigStore.radio.strict },
+    size: { type: String as PropType<VxeRadioPropTypes.Size>, default: () => globalConfigStore.radio.size || globalConfigStore.size }
+  },
+  emits: [
+    'update:modelValue',
+    'change'
+  ] as VxeRadioEmits,
+  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 $xeradio = {
+      xID,
+      props,
+      context
+    } as unknown as VxeRadioConstructor
+
+    const computeSize = useSize(props)
+
+    const $xeradiogroup = inject('$xeradiogroup', null as (VxeRadioGroupConstructor & VxeRadioGroupPrivateMethods) | null)
+
+    let radioMethods = {} as RadioMethods
+
+    const computeDisabled = computed(() => {
+      return props.disabled || ($xeradiogroup && $xeradiogroup.props.disabled)
+    })
+
+    const computeName = computed(() => {
+      return $xeradiogroup ? $xeradiogroup.name : props.name
+    })
+
+    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
+    })
+
+    const handleValue = (label: VxeRadioPropTypes.Label, evnt: Event) => {
+      if ($xeradiogroup) {
+        $xeradiogroup.handleChecked({ label }, evnt)
+      } else {
+        emit('update:modelValue', label)
+        radioMethods.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)
+        }
+      }
+    }
+
+    radioMethods = {
+      dispatchEvent (type, params, evnt) {
+        emit(type, Object.assign({ $radio: $xeradio, $event: evnt }, params))
+      }
+    }
+
+    Object.assign($xeradio, radioMethods)
+
+    const renderVN = () => {
+      const vSize = computeSize.value
+      const isDisabled = computeDisabled.value
+      const name = computeName.value
+      const isChecked = computeChecked.value
+      return h('label', {
+        class: ['vxe-radio', {
+          [`size--${vSize}`]: vSize,
+          'is--checked': isChecked,
+          'is--disabled': isDisabled
+        }],
+        title: props.title
+      }, [
+        h('input', {
+          class: 'vxe-radio--input',
+          type: 'radio',
+          name,
+          checked: isChecked,
+          disabled: isDisabled,
+          onChange: changeEvent,
+          onClick: clickEvent
+        }),
+        h('span', {
+          class: ['vxe-radio--icon', isChecked ? 'vxe-icon-radio-checked' : 'vxe-icon-radio-unchecked']
+        }),
+        h('span', {
+          class: 'vxe-radio--label'
+        }, slots.default ? slots.default({}) : getFuncText(props.content))
+      ])
+    }
+
+    $xeradio.renderVN = renderVN
+
+    return $xeradio
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/radio-button/index.ts

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

package/packages/radio-group/index.ts

@@ -0,0 +1,15 @@
+import { App } from 'vue'
+import VxeRadioGroupComponent from '../radio/src/group'
+import { dynamicApp } from '../dynamics'
+
+export const VxeRadioGroup = Object.assign(VxeRadioGroupComponent, {
+  install: function (app: App) {
+    app.component(VxeRadioGroupComponent.name as string, VxeRadioGroupComponent)
+  }
+})
+
+export const RadioGroup = VxeRadioGroup
+
+dynamicApp.component(VxeRadioGroupComponent.name, VxeRadioGroupComponent)
+
+export default VxeRadioGroup

package/packages/select/index.ts

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

package/packages/select/src/optgroup.ts

@@ -0,0 +1,39 @@
+import { defineComponent, h, onUnmounted, provide, inject, ref, Ref, onMounted, PropType } from 'vue'
+import { XEOptionProvide, createOption, watchOption, destroyOption, assemOption } from './util'
+
+import { VxeSelectConstructor, VxeOptionPropTypes } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeOptgroup',
+  props: {
+    label: { type: [String, Number, Boolean] as PropType<VxeOptionPropTypes.Label>, default: '' },
+    visible: { type: Boolean as PropType<VxeOptionPropTypes.Visible>, default: null },
+    className: [String, Function] as PropType<VxeOptionPropTypes.ClassName>,
+    disabled: Boolean as PropType<VxeOptionPropTypes.Disabled>
+  },
+  setup (props, { slots }) {
+    const elem = ref() as Ref<HTMLDivElement>
+    const $xeselect = inject('$xeselect', {} as VxeSelectConstructor)
+    const option = createOption($xeselect, props)
+    const xeoption: XEOptionProvide = { option }
+    option.options = []
+
+    provide('xeoptgroup', xeoption)
+
+    watchOption(props, option)
+
+    onMounted(() => {
+      assemOption($xeselect, elem.value, option)
+    })
+
+    onUnmounted(() => {
+      destroyOption($xeselect, option)
+    })
+
+    return () => {
+      return h('div', {
+        ref: elem
+      }, slots.default ? slots.default() : [])
+    }
+  }
+})

package/packages/select/src/option.ts

@@ -0,0 +1,38 @@
+import { defineComponent, h, onUnmounted, inject, ref, Ref, onMounted, PropType } from 'vue'
+import { XEOptionProvide, createOption, watchOption, destroyOption, assemOption } from './util'
+
+import { VxeSelectConstructor, VxeOptionPropTypes } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeOption',
+  props: {
+    value: null,
+    label: { type: [String, Number, Boolean] as PropType<VxeOptionPropTypes.Label>, default: '' },
+    visible: { type: Boolean as PropType<VxeOptionPropTypes.Visible>, default: null },
+    className: [String, Function] as PropType<VxeOptionPropTypes.ClassName>,
+    disabled: Boolean as PropType<VxeOptionPropTypes.Disabled>
+  },
+  setup (props, { slots }) {
+    const elem = ref() as Ref<HTMLDivElement>
+    const $xeselect = inject('$xeselect', {} as VxeSelectConstructor)
+    const optgroup = inject('xeoptgroup', null as XEOptionProvide | null)
+    const option = createOption($xeselect, props)
+    option.slots = slots
+
+    watchOption(props, option)
+
+    onMounted(() => {
+      assemOption($xeselect, elem.value, option, optgroup)
+    })
+
+    onUnmounted(() => {
+      destroyOption($xeselect, option)
+    })
+
+    return () => {
+      return h('div', {
+        ref: elem
+      })
+    }
+  }
+})

package/packages/select/src/optionInfo.ts

@@ -0,0 +1,20 @@
+import XEUtils from 'xe-utils'
+
+export class OptionInfo {
+  constructor ($xeselect: any, _vm: any) {
+    Object.assign(this, {
+      id: XEUtils.uniqueId('option_'),
+      value: _vm.value,
+      label: _vm.label,
+      visible: _vm.visible,
+      className: _vm.className,
+      disabled: _vm.disabled
+    })
+  }
+
+  update (name: any, value: any) {
+    this[name] = value
+  }
+
+  [key: string]: any
+}