vxe-pc-ui 0.0.2 → 0.2.0

package/es/switch/src/switch.js

@@ -0,0 +1,151 @@
+import { defineComponent, h, ref, computed, reactive, nextTick, createCommentVNode, 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';
+export default defineComponent({
+    name: 'VxeSwitch',
+    props: {
+        modelValue: [String, Number, Boolean],
+        disabled: Boolean,
+        size: { type: String, default: () => globalConfigStore.switch.size || globalConfigStore.size },
+        openLabel: String,
+        closeLabel: String,
+        openValue: { type: [String, Number, Boolean], default: true },
+        closeValue: { type: [String, Number, Boolean], default: false },
+        openIcon: String,
+        closeIcon: String
+    },
+    emits: [
+        'update:modelValue',
+        'change',
+        'focus',
+        'blur'
+    ],
+    setup(props, context) {
+        const { emit } = context;
+        const $xeform = inject('$xeForm', null);
+        const formItemInfo = inject('xeFormItemInfo', null);
+        const xID = XEUtils.uniqueId();
+        const computeSize = useSize(props);
+        const reactData = reactive({
+            isActivated: false,
+            hasAnimat: false,
+            offsetLeft: 0
+        });
+        const $xeswitch = {
+            xID,
+            props,
+            context,
+            reactData
+        };
+        const refButton = ref();
+        let 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;
+        const clickEvent = (evnt) => {
+            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) => {
+            reactData.isActivated = true;
+            switchMethods.dispatchEvent('focus', { value: props.modelValue }, evnt);
+        };
+        const blurEvent = (evnt) => {
+            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/es/switch/style.css

@@ -0,0 +1,97 @@
+.vxe-switch {
+  display: inline-block;
+  color: var(--vxe-font-color);
+  vertical-align: middle;
+  padding: 0.4em;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  text-align: center;
+}
+.vxe-switch.is--animat .vxe-switch--button {
+  transition: border-color 0.3s, background-color 0.3s;
+}
+.vxe-switch.is--animat .vxe-switch--icon {
+  transition: all 0.3s;
+}
+.vxe-switch.is--on .vxe-switch--button {
+  padding-right: 1.7em;
+  background-color: var(--vxe-ui-switch-open-background-color);
+}
+.vxe-switch.is--on .vxe-switch--icon {
+  left: 100%;
+  transform: translateX(-1.4em);
+}
+.vxe-switch.is--off .vxe-switch--button {
+  padding-left: 1.7em;
+  background-color: var(--vxe-ui-switch-close-background-color);
+}
+.vxe-switch.is--off .vxe-switch--icon {
+  left: 0.2em;
+  transform: translateX(0);
+}
+.vxe-switch.is--on .vxe-switch--label-off, .vxe-switch.is--off .vxe-switch--label-on {
+  height: 0;
+  visibility: hidden;
+  overflow: hidden;
+}
+.vxe-switch.is--on .vxe-switch--label, .vxe-switch.is--off .vxe-switch--label {
+  opacity: 1;
+}
+.vxe-switch:not(.is--disabled) .vxe-switch--button {
+  cursor: pointer;
+}
+.vxe-switch:not(.is--disabled) .vxe-switch--button:focus {
+  box-shadow: 0 0 0.4em 0 var(--vxe-primary-color);
+}
+.vxe-switch.is--disabled .vxe-switch--button {
+  cursor: no-drop;
+}
+.vxe-switch.is--disabled.is--on .vxe-switch--button {
+  background-color: var(--vxe-primary-lighten-color);
+}
+.vxe-switch.is--disabled.is--off .vxe-switch--button {
+  background-color: var(--vxe-ui-switch-disabled-background-color);
+}
+.vxe-switch .vxe-switch--button {
+  display: block;
+  position: relative;
+  height: 1.6em;
+  line-height: 1;
+  min-width: 3.2em;
+  padding: 0 0.6em;
+  border-radius: 1em;
+  border: 0;
+  outline: 0;
+}
+.vxe-switch .vxe-switch--label {
+  opacity: 0;
+  display: block;
+  color: var(--vxe-ui-switch-font-color);
+  font-size: 0.8em;
+}
+.vxe-switch .vxe-switch--icon {
+  position: absolute;
+  top: 0.2em;
+  left: 0;
+  width: 1.2em;
+  height: 1.2em;
+  border-radius: 50%;
+  background-color: var(--vxe-ui-switch-icon-background-color);
+}
+.vxe-switch .vxe-switch--label-icon {
+  margin-right: 0.25em;
+}
+
+.vxe-switch {
+  font-size: var(--vxe-font-size);
+}
+.vxe-switch.size--medium {
+  font-size: var(--vxe-font-size-medium);
+}
+.vxe-switch.size--small {
+  font-size: var(--vxe-font-size-small);
+}
+.vxe-switch.size--mini {
+  font-size: var(--vxe-font-size-mini);
+}

package/es/switch/style.min.css

@@ -0,0 +1 @@
+.vxe-switch{display:inline-block;color:var(--vxe-font-color);vertical-align:middle;padding:.4em;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-align:center}.vxe-switch.is--animat .vxe-switch--button{transition:border-color .3s,background-color .3s}.vxe-switch.is--animat .vxe-switch--icon{transition:all .3s}.vxe-switch.is--on .vxe-switch--button{padding-right:1.7em;background-color:var(--vxe-ui-switch-open-background-color)}.vxe-switch.is--on .vxe-switch--icon{left:100%;transform:translateX(-1.4em)}.vxe-switch.is--off .vxe-switch--button{padding-left:1.7em;background-color:var(--vxe-ui-switch-close-background-color)}.vxe-switch.is--off .vxe-switch--icon{left:.2em;transform:translateX(0)}.vxe-switch.is--off .vxe-switch--label-on,.vxe-switch.is--on .vxe-switch--label-off{height:0;visibility:hidden;overflow:hidden}.vxe-switch.is--off .vxe-switch--label,.vxe-switch.is--on .vxe-switch--label{opacity:1}.vxe-switch:not(.is--disabled) .vxe-switch--button{cursor:pointer}.vxe-switch:not(.is--disabled) .vxe-switch--button:focus{box-shadow:0 0 .4em 0 var(--vxe-primary-color)}.vxe-switch.is--disabled .vxe-switch--button{cursor:no-drop}.vxe-switch.is--disabled.is--on .vxe-switch--button{background-color:var(--vxe-primary-lighten-color)}.vxe-switch.is--disabled.is--off .vxe-switch--button{background-color:var(--vxe-ui-switch-disabled-background-color)}.vxe-switch .vxe-switch--button{display:block;position:relative;height:1.6em;line-height:1;min-width:3.2em;padding:0 .6em;border-radius:1em;border:0;outline:0}.vxe-switch .vxe-switch--label{opacity:0;display:block;color:var(--vxe-ui-switch-font-color);font-size:.8em}.vxe-switch .vxe-switch--icon{position:absolute;top:.2em;left:0;width:1.2em;height:1.2em;border-radius:50%;background-color:var(--vxe-ui-switch-icon-background-color)}.vxe-switch .vxe-switch--label-icon{margin-right:.25em}.vxe-switch{font-size:var(--vxe-font-size)}.vxe-switch.size--medium{font-size:var(--vxe-font-size-medium)}.vxe-switch.size--small{font-size:var(--vxe-font-size-small)}.vxe-switch.size--mini{font-size:var(--vxe-font-size-mini)}

package/es/tab-pane/index.js

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

package/es/tabs/index.js

@@ -0,0 +1,8 @@
+import VxeTabsComponent from './src/tabs';
+const VxeTabs = Object.assign({}, VxeTabsComponent, {
+    install(app) {
+        app.component(VxeTabsComponent.name, VxeTabsComponent);
+    }
+});
+export const Tabs = VxeTabs;
+export default VxeTabs;

package/es/tabs/src/tab-pane.js

@@ -0,0 +1,64 @@
+import { defineComponent, ref, h, reactive, watch, inject, onMounted, onUnmounted } from 'vue';
+import XEUtils from 'xe-utils';
+import { assembleAnchorTab, destroyAnchorTab } from './util';
+export default defineComponent({
+    name: 'VxeTabPane',
+    props: {
+        title: [String, Number],
+        name: [String, Number, Boolean]
+    },
+    emits: [],
+    setup(props, context) {
+        const { slots } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const $xeTabs = inject('$xeTabs', null);
+        const reactData = reactive({});
+        const tabConfig = reactive({
+            id: xID,
+            title: props.title,
+            name: props.name,
+            slots: {
+                default: slots.default
+            }
+        });
+        const refMaps = {
+            refElem
+        };
+        const computeMaps = {};
+        const $xeTabPane = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        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/es/tabs/src/tabs.js

@@ -0,0 +1,195 @@
+import { defineComponent, ref, h, reactive, provide, computed, createCommentVNode, watch, nextTick, onMounted } from 'vue';
+import XEUtils from 'xe-utils';
+import VxeTabPaneComponent from './tab-pane';
+import { getSlotVNs } from '../../ui/src/vn';
+export default defineComponent({
+    name: 'VxeTabs',
+    props: {
+        modelValue: [String, Number, Boolean],
+        options: Array,
+        destroyOnClose: Boolean,
+        type: String
+    },
+    emits: [],
+    setup(props, context) {
+        const { slots } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const refHeaderElem = ref();
+        const reactData = reactive({
+            staticTabs: [],
+            activeName: props.modelValue,
+            initNames: props.modelValue ? [props.modelValue] : [],
+            lintLeft: 0,
+            lintWidth: 0
+        });
+        const refMaps = {
+            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 = {};
+        const $xeTabs = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const callSlot = (slotFunc, params) => {
+            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];
+                        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, item) => {
+            const { initNames } = reactData;
+            const { name } = item;
+            if (!initNames.includes(name)) {
+                initNames.push(name);
+            }
+            reactData.activeName = name;
+            updateLineStyle();
+        };
+        const renderTabHeader = (list) => {
+            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) {
+                            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) => {
+            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) => {
+            const { destroyOnClose } = props;
+            const activeOptionTab = computeActiveOptionTab.value;
+            if (destroyOnClose) {
+                return activeOptionTab ? renderOptionPane(activeOptionTab) : createCommentVNode();
+            }
+            return options.map(renderOptionPane);
+        };
+        const renderDefaultPane = (item) => {
+            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) => {
+            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/es/tabs/src/util.js

@@ -0,0 +1,17 @@
+import XEUtils from 'xe-utils';
+export function assembleAnchorTab($xeTabs, elem, 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, 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/es/tabs/style.css

@@ -0,0 +1,113 @@
+.vxe-tabs {
+  background-color: var(--vxe-ui-layout-background-color);
+}
+
+.vxe-tabs-header {
+  position: relative;
+}
+
+.vxe-tabs-header--wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+}
+.vxe-tabs-header--wrapper::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #e4e7ed;
+}
+
+.vxe-tab-header--item {
+  position: relative;
+  padding: 0 16px;
+  cursor: pointer;
+}
+.vxe-tab-header--item.is--active {
+  color: var(--vxe-ui-font-primary-color);
+}
+
+.vxe-tab-header--item-name {
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 2px solid transparent;
+  transition: color 0.3s ease-in-out;
+}
+
+.vxe-tab-pane--item {
+  display: none;
+  padding: var(--vxe-ui-layout-padding-default);
+}
+.vxe-tab-pane--item.is--visible {
+  display: block;
+}
+
+.vxe-tabs-header--active-line {
+  display: none;
+}
+
+.vxe-tabs--default .vxe-tabs-header--active-line {
+  display: block;
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  width: 4px;
+  background-color: var(--vxe-ui-font-primary-color);
+  z-index: 1;
+  transition: all 0.3s ease-in-out;
+}
+
+.vxe-tabs--card .vxe-tabs-header {
+  border-top: 1px solid #e4e7ed;
+  border-left: 1px solid #e4e7ed;
+}
+.vxe-tabs--card .vxe-tab-header--item {
+  border-left: 1px solid #e4e7ed;
+}
+.vxe-tabs--card .vxe-tab-header--item:first-child {
+  border-left: 0;
+}
+.vxe-tabs--card .vxe-tab-header--item:last-child {
+  border-right: 1px solid #e4e7ed;
+}
+
+.vxe-tabs--border-card .vxe-tab-pane--item {
+  border-bottom: 1px solid #e4e7ed;
+  border-left: 1px solid #e4e7ed;
+  border-right: 1px solid #e4e7ed;
+}
+.vxe-tabs--border-card .vxe-tabs-header {
+  border-top: 1px solid #e4e7ed;
+  border-left: 1px solid #e4e7ed;
+  border-right: 1px solid #e4e7ed;
+  background-color: #f5f7fa;
+}
+.vxe-tabs--border-card .vxe-tab-header--item.is--active {
+  background-color: #ffffff;
+}
+.vxe-tabs--border-card .vxe-tab-header--item.is--active::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -1px;
+  width: calc(100% + 2px);
+  height: 100%;
+  border-left: 1px solid #e4e7ed;
+  border-right: 1px solid #e4e7ed;
+  pointer-events: none;
+}
+.vxe-tabs--border-card .vxe-tab-header--item.is--active::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--vxe-ui-layout-background-color);
+  pointer-events: none;
+  z-index: 1;
+}

package/es/tabs/style.min.css

@@ -0,0 +1 @@
+.vxe-tabs{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs-header{position:relative}.vxe-tabs-header--wrapper{position:relative;display:flex;flex-direction:row}.vxe-tabs-header--wrapper::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#e4e7ed}.vxe-tab-header--item{position:relative;padding:0 16px;cursor:pointer}.vxe-tab-header--item.is--active{color:var(--vxe-ui-font-primary-color)}.vxe-tab-header--item-name{height:40px;line-height:40px;border-bottom:2px solid transparent;transition:color .3s ease-in-out}.vxe-tab-pane--item{display:none;padding:var(--vxe-ui-layout-padding-default)}.vxe-tab-pane--item.is--visible{display:block}.vxe-tabs-header--active-line{display:none}.vxe-tabs--default .vxe-tabs-header--active-line{display:block;position:absolute;bottom:-1px;left:0;height:2px;width:4px;background-color:var(--vxe-ui-font-primary-color);z-index:1;transition:all .3s ease-in-out}.vxe-tabs--card .vxe-tabs-header{border-top:1px solid #e4e7ed;border-left:1px solid #e4e7ed}.vxe-tabs--card .vxe-tab-header--item{border-left:1px solid #e4e7ed}.vxe-tabs--card .vxe-tab-header--item:first-child{border-left:0}.vxe-tabs--card .vxe-tab-header--item:last-child{border-right:1px solid #e4e7ed}.vxe-tabs--border-card .vxe-tab-pane--item{border-bottom:1px solid #e4e7ed;border-left:1px solid #e4e7ed;border-right:1px solid #e4e7ed}.vxe-tabs--border-card .vxe-tabs-header{border-top:1px solid #e4e7ed;border-left:1px solid #e4e7ed;border-right:1px solid #e4e7ed;background-color:#f5f7fa}.vxe-tabs--border-card .vxe-tab-header--item.is--active{background-color:#fff}.vxe-tabs--border-card .vxe-tab-header--item.is--active::before{content:"";position:absolute;top:0;left:-1px;width:calc(100% + 2px);height:100%;border-left:1px solid #e4e7ed;border-right:1px solid #e4e7ed;pointer-events:none}.vxe-tabs--border-card .vxe-tab-header--item.is--active::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--vxe-ui-layout-background-color);pointer-events:none;z-index:1}

package/es/textarea/index.js

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