vxe-pc-ui 0.0.2 → 0.1.0

package/es/pulldown/style.css

@@ -0,0 +1,57 @@
+.vxe-pulldown {
+  position: relative;
+  display: inline-block;
+  color: var(--vxe-font-color);
+  text-align: left;
+}
+
+.vxe-pulldown--panel {
+  display: none;
+  position: absolute;
+  left: 0;
+  padding: 4px 0;
+  color: var(--vxe-font-color);
+  text-align: left;
+}
+.vxe-pulldown--panel:not(.is--transfer) {
+  min-width: 100%;
+}
+.vxe-pulldown--panel.is--transfer {
+  position: fixed;
+}
+.vxe-pulldown--panel.animat--leave {
+  display: block;
+  opacity: 0;
+  transform: scaleY(0.5);
+  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transform-origin: center top;
+  backface-visibility: hidden;
+}
+.vxe-pulldown--panel.animat--leave[placement=top] {
+  transform-origin: center bottom;
+}
+.vxe-pulldown--panel.animat--enter {
+  opacity: 1;
+  transform: scaleY(1);
+}
+
+.vxe-pulldown--panel-wrapper {
+  background-color: var(--vxe-ui-pulldown-panel-background-color);
+}
+
+.vxe-pulldown,
+.vxe-pulldown--panel {
+  font-size: var(--vxe-font-size);
+}
+.vxe-pulldown.size--medium,
+.vxe-pulldown--panel.size--medium {
+  font-size: var(--vxe-font-size-medium);
+}
+.vxe-pulldown.size--small,
+.vxe-pulldown--panel.size--small {
+  font-size: var(--vxe-font-size-small);
+}
+.vxe-pulldown.size--mini,
+.vxe-pulldown--panel.size--mini {
+  font-size: var(--vxe-font-size-mini);
+}

package/es/pulldown/style.min.css

@@ -0,0 +1 @@
+.vxe-pulldown{position:relative;display:inline-block;color:var(--vxe-font-color);text-align:left}.vxe-pulldown--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-font-color);text-align:left}.vxe-pulldown--panel:not(.is--transfer){min-width:100%}.vxe-pulldown--panel.is--transfer{position:fixed}.vxe-pulldown--panel.animat--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-pulldown--panel.animat--leave[placement=top]{transform-origin:center bottom}.vxe-pulldown--panel.animat--enter{opacity:1;transform:scaleY(1)}.vxe-pulldown--panel-wrapper{background-color:var(--vxe-ui-pulldown-panel-background-color)}.vxe-pulldown,.vxe-pulldown--panel{font-size:var(--vxe-font-size)}.vxe-pulldown--panel.size--medium,.vxe-pulldown.size--medium{font-size:var(--vxe-font-size-medium)}.vxe-pulldown--panel.size--small,.vxe-pulldown.size--small{font-size:var(--vxe-font-size-small)}.vxe-pulldown--panel.size--mini,.vxe-pulldown.size--mini{font-size:var(--vxe-font-size-mini)}

package/es/radio/index.js

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

package/es/radio/src/button.js

@@ -0,0 +1,113 @@
+import { defineComponent, h, computed, inject } from 'vue';
+import XEUtils from 'xe-utils';
+import { getFuncText } from '../../ui/src/utils';
+import globalConfigStore from '../../ui/src/globalStore';
+import { useSize } from '../../hooks/size';
+export default defineComponent({
+    name: 'VxeRadioButton',
+    props: {
+        modelValue: [String, Number, Boolean],
+        label: { type: [String, Number, Boolean], default: null },
+        title: [String, Number],
+        content: [String, Number],
+        disabled: Boolean,
+        strict: { type: Boolean, default: () => globalConfigStore.radioButton.strict },
+        size: { type: String, default: () => globalConfigStore.radioButton.size || globalConfigStore.size }
+    },
+    emits: [
+        'update:modelValue',
+        'change'
+    ],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const $xeform = inject('$xeForm', null);
+        const $xeformiteminfo = inject('$xeFormItemInfo', null);
+        const xID = XEUtils.uniqueId();
+        const computeSize = useSize(props);
+        const $xeradiobutton = {
+            xID,
+            props,
+            context
+        };
+        let radioButtonMethods = {};
+        const $xeradiogroup = inject('$xeradiogroup', 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, evnt) => {
+            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) => {
+            const isDisabled = computeDisabled.value;
+            if (!isDisabled) {
+                handleValue(props.label, evnt);
+            }
+        };
+        const clickEvent = (evnt) => {
+            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/es/radio/src/group.js

@@ -0,0 +1,93 @@
+import { defineComponent, h, provide, 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';
+export default defineComponent({
+    name: 'VxeRadioGroup',
+    props: {
+        modelValue: [String, Number, Boolean],
+        disabled: Boolean,
+        type: String,
+        options: Array,
+        optionProps: Object,
+        strict: { type: Boolean, default: () => globalConfigStore.radioGroup.strict },
+        size: { type: String, default: () => globalConfigStore.radioGroup.size || globalConfigStore.size }
+    },
+    emits: [
+        'update:modelValue',
+        'change'
+    ],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const $xeform = inject('$xeForm', null);
+        const $xeformiteminfo = inject('$xeFormItemInfo', null);
+        const xID = XEUtils.uniqueId();
+        const $xeradiogroup = {
+            xID,
+            props,
+            context,
+            name: XEUtils.uniqueId('xegroup_')
+        };
+        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 = {};
+        useSize(props);
+        const 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;
+            const labelField = computeLabelField.value;
+            const disabledField = computeDisabledField.value;
+            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;
+    }
+});

package/es/radio/src/radio.js

@@ -0,0 +1,118 @@
+import { defineComponent, h, computed, inject } from 'vue';
+import XEUtils from 'xe-utils';
+import { getFuncText } from '../../ui/src/utils';
+import globalConfigStore from '../../ui/src/globalStore';
+import { useSize } from '../../hooks/size';
+export default defineComponent({
+    name: 'VxeRadio',
+    props: {
+        modelValue: [String, Number, Boolean],
+        label: { type: [String, Number, Boolean], default: null },
+        title: [String, Number],
+        content: [String, Number],
+        disabled: Boolean,
+        name: String,
+        strict: { type: Boolean, default: () => globalConfigStore.radio.strict },
+        size: { type: String, default: () => globalConfigStore.radio.size || globalConfigStore.size }
+    },
+    emits: [
+        'update:modelValue',
+        'change'
+    ],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const $xeform = inject('$xeForm', null);
+        const $xeformiteminfo = inject('$xeFormItemInfo', null);
+        const xID = XEUtils.uniqueId();
+        const $xeradio = {
+            xID,
+            props,
+            context
+        };
+        const computeSize = useSize(props);
+        const $xeradiogroup = inject('$xeradiogroup', null);
+        let 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, evnt) => {
+            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) => {
+            const isDisabled = computeDisabled.value;
+            if (!isDisabled) {
+                handleValue(props.label, evnt);
+            }
+        };
+        const clickEvent = (evnt) => {
+            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/es/radio/style.css

@@ -0,0 +1,143 @@
+/*radio-group*/
+.vxe-radio-group {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+  font-size: 0;
+}
+.vxe-radio-group + .vxe-radio-group {
+  margin-left: 10px;
+}
+
+/*radio*/
+.vxe-radio {
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  line-height: 1;
+}
+.vxe-radio .vxe-radio--icon {
+  font-size: 1.4em;
+}
+.vxe-radio .vxe-radio--icon {
+  color: var(--vxe-ui-input-border-color);
+  vertical-align: middle;
+  font-weight: 700;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.vxe-radio.is--checked {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-radio.is--checked .vxe-radio--icon {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-radio:not(.is--disabled) {
+  cursor: pointer;
+}
+.vxe-radio:not(.is--disabled):hover .vxe-radio--icon {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-radio.is--disabled {
+  color: var(--vxe-ui-font-disabled-color);
+  cursor: not-allowed;
+}
+.vxe-radio.is--disabled .vxe-radio--icon {
+  color: var(--vxe-ui-input-disabled-color);
+}
+.vxe-radio .vxe-radio--label {
+  padding-left: 0.5em;
+  vertical-align: middle;
+}
+.vxe-radio > input[type=radio] {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.vxe-radio .vxe-radio--label {
+  vertical-align: middle;
+  display: inline-block;
+  max-width: 50em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vxe-radio:not(.is--disabled) > input:focus + .vxe-radio--icon {
+  color: var(--vxe-primary-color);
+}
+.vxe-radio:not(.vxe-radio-button) + .vxe-radio {
+  margin-left: 10px;
+}
+
+.vxe-radio-button .vxe-radio--label {
+  background-color: var(--vxe-ui-radio-button-default-background-color);
+}
+.vxe-radio-button:first-child .vxe-radio--label {
+  border-left: 1px solid var(--vxe-ui-input-border-color);
+  border-radius: var(--vxe-border-radius) 0 0 var(--vxe-border-radius);
+}
+.vxe-radio-button:last-child .vxe-radio--label {
+  border-radius: 0 var(--vxe-border-radius) var(--vxe-border-radius) 0;
+}
+.vxe-radio-button > input:checked + .vxe-radio--label {
+  color: #fff;
+  background-color: var(--vxe-primary-color);
+  border-color: var(--vxe-primary-color);
+}
+.vxe-radio-button .vxe-radio--label {
+  padding: 0 1em;
+  line-height: calc(var(--vxe-button-height-default) - 2px);
+  display: inline-block;
+  border-style: solid;
+  border-color: var(--vxe-ui-input-border-color);
+  border-width: 1px 1px 1px 0;
+  max-width: 50em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vxe-radio-button.is--disabled {
+  cursor: not-allowed;
+}
+.vxe-radio-button.is--disabled > input:not(:checked) + .vxe-radio--label {
+  color: var(--vxe-ui-input-disabled-color);
+}
+.vxe-radio-button.is--disabled > input:checked + .vxe-radio--label {
+  border-color: var(--vxe-primary-lighten-color);
+  background-color: var(--vxe-primary-lighten-color);
+}
+.vxe-radio-button:not(.is--disabled) > input:focus + .vxe-radio--label {
+  border-color: var(--vxe-primary-color);
+  box-shadow: 0 0 0.2em 0 var(--vxe-primary-color);
+}
+.vxe-radio-button:not(.is--disabled):hover > input:not(:checked) + .vxe-radio--label {
+  color: var(--vxe-primary-color);
+}
+.vxe-radio-button.size--medium .vxe-radio--label {
+  line-height: calc(var(--vxe-button-height-medium) - 2px);
+}
+.vxe-radio-button.size--small .vxe-radio--label {
+  line-height: calc(var(--vxe-button-height-small) - 2px);
+}
+.vxe-radio-button.size--mini .vxe-radio--label {
+  line-height: calc(var(--vxe-button-height-mini) - 2px);
+}
+
+.vxe-radio {
+  font-size: var(--vxe-font-size);
+}
+.vxe-radio.size--medium {
+  font-size: var(--vxe-font-size-medium);
+}
+.vxe-radio.size--small {
+  font-size: var(--vxe-font-size-small);
+}
+.vxe-radio.size--mini {
+  font-size: var(--vxe-font-size-mini);
+}

package/es/radio/style.min.css

@@ -0,0 +1 @@
+.vxe-radio-group{display:inline-block;vertical-align:middle;line-height:1;font-size:0}.vxe-radio-group+.vxe-radio-group{margin-left:10px}.vxe-radio{cursor:pointer;display:inline-block;vertical-align:middle;white-space:nowrap;line-height:1}.vxe-radio .vxe-radio--icon{font-size:1.4em}.vxe-radio .vxe-radio--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-radio.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-radio.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-radio:not(.is--disabled){cursor:pointer}.vxe-radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-radio.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-radio.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-radio .vxe-radio--label{padding-left:.5em;vertical-align:middle}.vxe-radio>input[type=radio]{position:absolute;width:0;height:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vxe-radio .vxe-radio--label{vertical-align:middle;display:inline-block;max-width:50em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-radio:not(.is--disabled)>input:focus+.vxe-radio--icon{color:var(--vxe-primary-color)}.vxe-radio:not(.vxe-radio-button)+.vxe-radio{margin-left:10px}.vxe-radio-button .vxe-radio--label{background-color:var(--vxe-ui-radio-button-default-background-color)}.vxe-radio-button:first-child .vxe-radio--label{border-left:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-border-radius) 0 0 var(--vxe-border-radius)}.vxe-radio-button:last-child .vxe-radio--label{border-radius:0 var(--vxe-border-radius) var(--vxe-border-radius) 0}.vxe-radio-button>input:checked+.vxe-radio--label{color:#fff;background-color:var(--vxe-primary-color);border-color:var(--vxe-primary-color)}.vxe-radio-button .vxe-radio--label{padding:0 1em;line-height:calc(var(--vxe-button-height-default) - 2px);display:inline-block;border-style:solid;border-color:var(--vxe-ui-input-border-color);border-width:1px 1px 1px 0;max-width:50em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-radio-button.is--disabled{cursor:not-allowed}.vxe-radio-button.is--disabled>input:not(:checked)+.vxe-radio--label{color:var(--vxe-ui-input-disabled-color)}.vxe-radio-button.is--disabled>input:checked+.vxe-radio--label{border-color:var(--vxe-primary-lighten-color);background-color:var(--vxe-primary-lighten-color)}.vxe-radio-button:not(.is--disabled)>input:focus+.vxe-radio--label{border-color:var(--vxe-primary-color);box-shadow:0 0 .2em 0 var(--vxe-primary-color)}.vxe-radio-button:not(.is--disabled):hover>input:not(:checked)+.vxe-radio--label{color:var(--vxe-primary-color)}.vxe-radio-button.size--medium .vxe-radio--label{line-height:calc(var(--vxe-button-height-medium) - 2px)}.vxe-radio-button.size--small .vxe-radio--label{line-height:calc(var(--vxe-button-height-small) - 2px)}.vxe-radio-button.size--mini .vxe-radio--label{line-height:calc(var(--vxe-button-height-mini) - 2px)}.vxe-radio{font-size:var(--vxe-font-size)}.vxe-radio.size--medium{font-size:var(--vxe-font-size-medium)}.vxe-radio.size--small{font-size:var(--vxe-font-size-small)}.vxe-radio.size--mini{font-size:var(--vxe-font-size-mini)}

package/es/radio-button/index.js

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

package/es/radio-group/index.js

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

package/es/select/index.js

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

package/es/select/src/optgroup.js

@@ -0,0 +1,31 @@
+import { defineComponent, h, onUnmounted, provide, inject, ref, onMounted } from 'vue';
+import { createOption, watchOption, destroyOption, assemOption } from './util';
+export default defineComponent({
+    name: 'VxeOptgroup',
+    props: {
+        label: { type: [String, Number, Boolean], default: '' },
+        visible: { type: Boolean, default: null },
+        className: [String, Function],
+        disabled: Boolean
+    },
+    setup(props, { slots }) {
+        const elem = ref();
+        const $xeselect = inject('$xeselect', {});
+        const option = createOption($xeselect, props);
+        const xeoption = { 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/es/select/src/option.js

@@ -0,0 +1,31 @@
+import { defineComponent, h, onUnmounted, inject, ref, onMounted } from 'vue';
+import { createOption, watchOption, destroyOption, assemOption } from './util';
+export default defineComponent({
+    name: 'VxeOption',
+    props: {
+        value: null,
+        label: { type: [String, Number, Boolean], default: '' },
+        visible: { type: Boolean, default: null },
+        className: [String, Function],
+        disabled: Boolean
+    },
+    setup(props, { slots }) {
+        const elem = ref();
+        const $xeselect = inject('$xeselect', {});
+        const optgroup = inject('xeoptgroup', 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/es/select/src/optionInfo.js

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