vxe-pc-ui 0.1.0 → 0.2.0

package/es/switch/src/switch.js

@@ -25,7 +25,7 @@ export default defineComponent({
     setup(props, context) {
         const { emit } = context;
         const $xeform = inject('$xeForm', null);
-        const $xeformiteminfo = inject('$xeFormItemInfo', null);
+        const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const computeSize = useSize(props);
         const reactData = reactive({
@@ -60,8 +60,8 @@ export default defineComponent({
                 emit('update:modelValue', value);
                 switchMethods.dispatchEvent('change', { value }, evnt);
                 // 自动更新校验状态
-                if ($xeform && $xeformiteminfo) {
-                    $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value);
+                if ($xeform && formItemInfo) {
+                    $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
                 }
                 _atimeout = setTimeout(() => {
                     reactData.hasAnimat = false;

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/src/textarea.js

@@ -41,7 +41,7 @@ export default defineComponent({
     setup(props, context) {
         const { emit } = context;
         const $xeform = inject('$xeForm', null);
-        const $xeformiteminfo = inject('$xeFormItemInfo', null);
+        const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const computeSize = useSize(props);
         const reactData = reactive({
@@ -126,8 +126,8 @@ export default defineComponent({
             if (XEUtils.toValueString(props.modelValue) !== value) {
                 textareaMethods.dispatchEvent('change', { value }, evnt);
                 // 自动更新校验状态
-                if ($xeform && $xeformiteminfo) {
-                    $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value);
+                if ($xeform && formItemInfo) {
+                    $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
                 }
             }
         };

package/es/ui/src/core.js

@@ -32,7 +32,7 @@ export function setIcon(options) {
 export function getIcon(key) {
     return arguments.length ? XEUtils.get(iconConfigStore, key) : iconConfigStore;
 }
-export const version = "0.1.0";
+export const version = "0.2.0";
 const VxeCore = {
     version,
     setConfig,

package/es/ui/src/log.js

@@ -1,6 +1,6 @@
 import { getI18n } from './i18n';
 export function getLog(message, params) {
-    return `[vxe-table v${"0.1.0"}] ${getI18n(message, params)}`;
+    return `[vxe-table v${"0.2.0"}] ${getI18n(message, params)}`;
 }
 function outLog(type) {
     return function (message, params) {

package/es/vxe-layout-aside/style.css

@@ -1,7 +1,6 @@
 .vxe-layout-aside {
   flex-shrink: 0;
   transition: width 0.3s;
-  padding: var(--vxe-ui-layout-padding-default);
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -10,4 +9,7 @@
 }
 .vxe-layout-aside.is--collapse {
   width: var(--vxe-ui-layout-aside-collapse-width);
+}
+.vxe-layout-aside.is--padding {
+  padding: var(--vxe-ui-layout-padding-default);
 }

package/es/vxe-layout-aside/style.min.css

@@ -1 +1 @@
-.vxe-layout-aside{flex-shrink:0;transition:width .3s;padding:var(--vxe-ui-layout-padding-default);overflow-y:auto;overflow-x:hidden}.vxe-layout-aside.is--default-width{width:var(--vxe-ui-layout-aside-default-width)}.vxe-layout-aside.is--collapse{width:var(--vxe-ui-layout-aside-collapse-width)}
+.vxe-layout-aside{flex-shrink:0;transition:width .3s;overflow-y:auto;overflow-x:hidden}.vxe-layout-aside.is--default-width{width:var(--vxe-ui-layout-aside-default-width)}.vxe-layout-aside.is--collapse{width:var(--vxe-ui-layout-aside-collapse-width)}.vxe-layout-aside.is--padding{padding:var(--vxe-ui-layout-padding-default)}

package/es/vxe-layout-body/style.css

@@ -1,4 +1,6 @@
 .vxe-layout-body {
   flex-grow: 1;
+}
+.vxe-layout-body.is--padding {
   padding: var(--vxe-ui-layout-padding-default);
 }

package/es/vxe-layout-body/style.min.css

@@ -1 +1 @@
-.vxe-layout-body{flex-grow:1;padding:var(--vxe-ui-layout-padding-default)}
+.vxe-layout-body{flex-grow:1}.vxe-layout-body.is--padding{padding:var(--vxe-ui-layout-padding-default)}

package/es/vxe-layout-footer/style.css

@@ -1,6 +1,5 @@
 .vxe-layout-footer {
   flex-shrink: 0;
-  padding: var(--vxe-ui-layout-padding-default);
   background-color: var(--vxe-ui-layout-background-color);
 }
 .vxe-layout-footer.is--fixed {
@@ -8,4 +7,7 @@
   bottom: 0;
   left: 0;
   z-index: 9;
+}
+.vxe-layout-footer.align--center {
+  text-align: center;
 }

package/es/vxe-layout-footer/style.min.css

@@ -1 +1 @@
-.vxe-layout-footer{flex-shrink:0;padding:var(--vxe-ui-layout-padding-default);background-color:var(--vxe-ui-layout-background-color)}.vxe-layout-footer.is--fixed{position:sticky;bottom:0;left:0;z-index:9}
+.vxe-layout-footer{flex-shrink:0;background-color:var(--vxe-ui-layout-background-color)}.vxe-layout-footer.is--fixed{position:sticky;bottom:0;left:0;z-index:9}.vxe-layout-footer.align--center{text-align:center}

package/es/vxe-layout-header/style.css

@@ -1,6 +1,5 @@
 .vxe-layout-header {
   flex-shrink: 0;
-  padding: var(--vxe-ui-layout-padding-default);
   background-color: var(--vxe-ui-layout-background-color);
 }
 .vxe-layout-header.is--fixed {

package/es/vxe-layout-header/style.min.css

@@ -1 +1 @@
-.vxe-layout-header{flex-shrink:0;padding:var(--vxe-ui-layout-padding-default);background-color:var(--vxe-ui-layout-background-color)}.vxe-layout-header.is--fixed{position:sticky;top:0;left:0;z-index:9}
+.vxe-layout-header{flex-shrink:0;background-color:var(--vxe-ui-layout-background-color)}.vxe-layout-header.is--fixed{position:sticky;top:0;left:0;z-index:9}

package/es/vxe-tab-pane/index.js

@@ -0,0 +1,3 @@
+import VxeTabPane from '../tab-pane';
+export * from '../tab-pane';
+export default VxeTabPane;

package/es/vxe-tabs/index.js

@@ -0,0 +1,3 @@
+import VxeTabs from '../tabs';
+export * from '../tabs';
+export default VxeTabs;

package/es/vxe-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;
+}