vxe-pc-ui 0.0.2 → 0.2.0

package/lib/switch/src/switch.js

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _globalStore = _interopRequireDefault(require("../../ui/src/globalStore"));
+var _size = require("../../hooks/size");
+var _utils = require("../../ui/src/utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'VxeSwitch',
+  props: {
+    modelValue: [String, Number, Boolean],
+    disabled: Boolean,
+    size: {
+      type: String,
+      default: () => _globalStore.default.switch.size || _globalStore.default.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 = (0, _vue.inject)('$xeForm', null);
+    const formItemInfo = (0, _vue.inject)('xeFormItemInfo', null);
+    const xID = _xeUtils.default.uniqueId();
+    const computeSize = (0, _size.useSize)(props);
+    const reactData = (0, _vue.reactive)({
+      isActivated: false,
+      hasAnimat: false,
+      offsetLeft: 0
+    });
+    const $xeswitch = {
+      xID,
+      props,
+      context,
+      reactData
+    };
+    const refButton = (0, _vue.ref)();
+    let switchMethods = {};
+    const computeOnShowLabel = (0, _vue.computed)(() => {
+      return (0, _utils.getFuncText)(props.openLabel);
+    });
+    const computeOffShowLabel = (0, _vue.computed)(() => {
+      return (0, _utils.getFuncText)(props.closeLabel);
+    });
+    const computeIsChecked = (0, _vue.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 (0, _vue.nextTick)();
+      },
+      blur() {
+        const btnElem = refButton.value;
+        btnElem.blur();
+        reactData.isActivated = false;
+        return (0, _vue.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 (0, _vue.h)('div', {
+        class: ['vxe-switch', isChecked ? 'is--on' : 'is--off', {
+          [`size--${vSize}`]: vSize,
+          'is--disabled': disabled,
+          'is--animat': reactData.hasAnimat
+        }]
+      }, [(0, _vue.h)('button', {
+        ref: refButton,
+        class: 'vxe-switch--button',
+        type: 'button',
+        disabled,
+        onClick: clickEvent,
+        onFocus: focusEvent,
+        onBlur: blurEvent
+      }, [(0, _vue.h)('span', {
+        class: 'vxe-switch--label vxe-switch--label-on'
+      }, [openIcon ? (0, _vue.h)('i', {
+        class: ['vxe-switch--label-icon', openIcon]
+      }) : (0, _vue.createCommentVNode)(), onShowLabel]), (0, _vue.h)('span', {
+        class: 'vxe-switch--label vxe-switch--label-off'
+      }, [closeIcon ? (0, _vue.h)('i', {
+        class: ['vxe-switch--label-icon', closeIcon]
+      }) : (0, _vue.createCommentVNode)(), offShowLabel]), (0, _vue.h)('span', {
+        class: 'vxe-switch--icon'
+      })])]);
+    };
+    $xeswitch.renderVN = renderVN;
+    return $xeswitch;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/switch/src/switch.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_globalStore=_interopRequireDefault(require("../../ui/src/globalStore")),_size=require("../../hooks/size"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeSwitch",props:{modelValue:[String,Number,Boolean],disabled:Boolean,size:{type:String,default:()=>_globalStore.default.switch.size||_globalStore.default.size},openLabel:String,closeLabel:String,openValue:{type:[String,Number,Boolean],default:!0},closeValue:{type:[String,Number,Boolean],default:!1},openIcon:String,closeIcon:String},emits:["update:modelValue","change","focus","blur"],setup(o,e){const l=e["emit"],u=(0,_vue.inject)("$xeForm",null),a=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();const n=(0,_size.useSize)(o),r=(0,_vue.reactive)({isActivated:!1,hasAnimat:!1,offsetLeft:0}),i={xID:t,props:o,context:e,reactData:r},c=(0,_vue.ref)();let s={};const v=(0,_vue.computed)(()=>(0,_utils.getFuncText)(o.openLabel)),d=(0,_vue.computed)(()=>(0,_utils.getFuncText)(o.closeLabel)),_=(0,_vue.computed)(()=>o.modelValue===o.openValue);let p;const b=e=>{var t;o.disabled||(t=_.value,clearTimeout(p),t=t?o.closeValue:o.openValue,r.hasAnimat=!0,l("update:modelValue",t),s.dispatchEvent("change",{value:t},e),u&&a&&u.triggerItemEvent(e,a.itemConfig.field,t),p=setTimeout(()=>{r.hasAnimat=!1},400))},f=e=>{r.isActivated=!0,s.dispatchEvent("focus",{value:o.modelValue},e)},m=e=>{r.isActivated=!1,s.dispatchEvent("blur",{value:o.modelValue},e)};s={dispatchEvent(e,t,u){l(e,Object.assign({$switch:i,$event:u},t))},focus(){var e=c.value;return r.isActivated=!0,e.focus(),(0,_vue.nextTick)()},blur(){return c.value.blur(),(r.isActivated=!1,_vue.nextTick)()}},Object.assign(i,s);return i.renderVN=()=>{var{disabled:e,openIcon:t,closeIcon:u}=o,l=_.value,a=n.value,i=v.value,s=d.value;return(0,_vue.h)("div",{class:["vxe-switch",l?"is--on":"is--off",{["size--"+a]:a,"is--disabled":e,"is--animat":r.hasAnimat}]},[(0,_vue.h)("button",{ref:c,class:"vxe-switch--button",type:"button",disabled:e,onClick:b,onFocus:f,onBlur:m},[(0,_vue.h)("span",{class:"vxe-switch--label vxe-switch--label-on"},[t?(0,_vue.h)("i",{class:["vxe-switch--label-icon",t]}):(0,_vue.createCommentVNode)(),i]),(0,_vue.h)("span",{class:"vxe-switch--label vxe-switch--label-off"},[u?(0,_vue.h)("i",{class:["vxe-switch--label-icon",u]}):(0,_vue.createCommentVNode)(),s]),(0,_vue.h)("span",{class:"vxe-switch--icon"})])])},i},render(){return this.renderVN()}});

package/lib/switch/style/index.js

@@ -0,0 +1 @@
+require('./style.css')

package/lib/switch/style/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/lib/switch/style/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/lib/tab-pane/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TabPane = void 0;
+var _tabPane = _interopRequireDefault(require("../tabs/src/tab-pane"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const VxeTabPane = Object.assign({}, _tabPane.default, {
+  install(app) {
+    app.component(_tabPane.default.name, _tabPane.default);
+  }
+});
+const TabPane = exports.TabPane = VxeTabPane;
+var _default = exports.default = VxeTabPane;

package/lib/tab-pane/index.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.TabPane=void 0;var _tabPane=_interopRequireDefault(require("../tabs/src/tab-pane"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeTabPane=Object.assign({},_tabPane.default,{install(e){e.component(_tabPane.default.name,_tabPane.default)}}),TabPane=exports.TabPane=VxeTabPane;var _default=exports.default=VxeTabPane;

package/lib/tab-pane/style/index.js

@@ -0,0 +1 @@
+require('./style.css')

package/lib/tabs/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Tabs = void 0;
+var _tabs = _interopRequireDefault(require("./src/tabs"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const VxeTabs = Object.assign({}, _tabs.default, {
+  install(app) {
+    app.component(_tabs.default.name, _tabs.default);
+  }
+});
+const Tabs = exports.Tabs = VxeTabs;
+var _default = exports.default = VxeTabs;

package/lib/tabs/index.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Tabs=void 0;var _tabs=_interopRequireDefault(require("./src/tabs"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeTabs=Object.assign({},_tabs.default,{install(e){e.component(_tabs.default.name,_tabs.default)}}),Tabs=exports.Tabs=VxeTabs;var _default=exports.default=VxeTabs;

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

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _util = require("./util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'VxeTabPane',
+  props: {
+    title: [String, Number],
+    name: [String, Number, Boolean]
+  },
+  emits: [],
+  setup(props, context) {
+    const {
+      slots
+    } = context;
+    const xID = _xeUtils.default.uniqueId();
+    const refElem = (0, _vue.ref)();
+    const $xeTabs = (0, _vue.inject)('$xeTabs', null);
+    const reactData = (0, _vue.reactive)({});
+    const tabConfig = (0, _vue.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
+    };
+    (0, _vue.watch)(() => props.title, val => {
+      tabConfig.title = val;
+    });
+    (0, _vue.watch)(() => props.name, val => {
+      tabConfig.name = val;
+    });
+    (0, _vue.onMounted)(() => {
+      if ($xeTabs && refElem.value) {
+        (0, _util.assembleAnchorTab)($xeTabs, refElem.value, tabConfig);
+      }
+    });
+    (0, _vue.onUnmounted)(() => {
+      if ($xeTabs) {
+        (0, _util.destroyAnchorTab)($xeTabs, tabConfig);
+      }
+    });
+    const renderVN = () => {
+      return (0, _vue.h)('div', {
+        ref: refElem
+      }, []);
+    };
+    $xeTabPane.renderVN = renderVN;
+    return $xeTabPane;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/tabs/src/tab-pane.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_util=require("./util");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeTabPane",props:{title:[String,Number],name:[String,Number,Boolean]},emits:[],setup(e,t){var u=t["slots"],r=_xeUtils.default.uniqueId();const a=(0,_vue.ref)(),n=(0,_vue.inject)("$xeTabs",null);var i=(0,_vue.reactive)({});const l=(0,_vue.reactive)({id:r,title:e.title,name:e.name,slots:{default:u.default}}),o={refElem:a},s={};u={xID:r,props:e,context:t,reactData:i,getRefMaps:()=>o,getComputeMaps:()=>s};(0,_vue.watch)(()=>e.title,e=>{l.title=e}),(0,_vue.watch)(()=>e.name,e=>{l.name=e}),(0,_vue.onMounted)(()=>{n&&a.value&&(0,_util.assembleAnchorTab)(n,a.value,l)}),(0,_vue.onUnmounted)(()=>{n&&(0,_util.destroyAnchorTab)(n,l)});return u.renderVN=()=>(0,_vue.h)("div",{ref:a},[]),u},render(){return this.renderVN()}});

package/lib/tabs/src/tabs.js

@@ -0,0 +1,240 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _tabPane = _interopRequireDefault(require("./tab-pane"));
+var _vn = require("../../ui/src/vn");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'VxeTabs',
+  props: {
+    modelValue: [String, Number, Boolean],
+    options: Array,
+    destroyOnClose: Boolean,
+    type: String
+  },
+  emits: [],
+  setup(props, context) {
+    const {
+      slots
+    } = context;
+    const xID = _xeUtils.default.uniqueId();
+    const refElem = (0, _vue.ref)();
+    const refHeaderElem = (0, _vue.ref)();
+    const reactData = (0, _vue.reactive)({
+      staticTabs: [],
+      activeName: props.modelValue,
+      initNames: props.modelValue ? [props.modelValue] : [],
+      lintLeft: 0,
+      lintWidth: 0
+    });
+    const refMaps = {
+      refElem
+    };
+    const computeActiveOptionTab = (0, _vue.computed)(() => {
+      const {
+        options
+      } = props;
+      const {
+        activeName
+      } = reactData;
+      return options ? options.find(item => item.name === activeName) : null;
+    });
+    const computeActiveDefaultTab = (0, _vue.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.default.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null;
+        }
+        if (_xeUtils.default.isFunction(slotFunc)) {
+          return (0, _vn.getSlotVNs)(slotFunc(params));
+        }
+      }
+      return [];
+    };
+    const updateLineStyle = () => {
+      (0, _vue.nextTick)(() => {
+        const {
+          type,
+          options
+        } = props;
+        const {
+          staticTabs,
+          activeName
+        } = reactData;
+        const headerWrapperEl = refHeaderElem.value;
+        if (headerWrapperEl && !type) {
+          const index = _xeUtils.default.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 (0, _vue.h)('div', {
+        class: 'vxe-tabs-header'
+      }, [(0, _vue.h)('div', {
+        ref: refHeaderElem,
+        class: 'vxe-tabs-header--wrapper'
+      }, list.map(item => {
+        const {
+          title,
+          name,
+          slots
+        } = item;
+        const tabSlot = slots ? slots.tab : null;
+        return (0, _vue.h)('div', {
+          class: ['vxe-tab-header--item', {
+            'is--active': activeName === name
+          }],
+          onClick(evnt) {
+            clickEvent(evnt, item);
+          }
+        }, [(0, _vue.h)('div', {
+          class: 'vxe-tab-header--item-name'
+        }, tabSlot ? callSlot(tabSlot, {
+          name,
+          title
+        }) : `${title}`)]);
+      })), type ? null : (0, _vue.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 (0, _vue.h)(_tabPane.default, item, {
+        default() {
+          return name && initNames.includes(name) ? (0, _vue.h)('div', {
+            class: ['vxe-tab-pane--item', {
+              'is--visible': activeName === name
+            }]
+          }, callSlot(defaultSlot, {})) : (0, _vue.createCommentVNode)();
+        }
+      });
+    };
+    const renderOptionContent = options => {
+      const {
+        destroyOnClose
+      } = props;
+      const activeOptionTab = computeActiveOptionTab.value;
+      if (destroyOnClose) {
+        return activeOptionTab ? renderOptionPane(activeOptionTab) : (0, _vue.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) ? (0, _vue.h)('div', {
+        class: ['vxe-tab-pane--item', {
+          'is--visible': activeName === name
+        }]
+      }, callSlot(defaultSlot, {})) : (0, _vue.createCommentVNode)();
+    };
+    const renderDefaultContent = staticTabs => {
+      const {
+        destroyOnClose
+      } = props;
+      const activeDefaultTab = computeActiveDefaultTab.value;
+      if (destroyOnClose) {
+        return activeDefaultTab ? renderDefaultPane(activeDefaultTab) : (0, _vue.createCommentVNode)();
+      }
+      return staticTabs.map(renderDefaultPane);
+    };
+    const renderVN = () => {
+      const {
+        type,
+        options
+      } = props;
+      const {
+        staticTabs
+      } = reactData;
+      const defaultSlot = slots.default;
+      return (0, _vue.h)('div', {
+        ref: refElem,
+        class: ['vxe-tabs', `vxe-tabs--${type || 'default'}`]
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-tabs-slots'
+      }, defaultSlot ? defaultSlot({}) : []), renderTabHeader(defaultSlot ? staticTabs : options || []), (0, _vue.h)('div', {
+        class: 'vxe-tabs-pane'
+      }, defaultSlot ? renderDefaultContent(staticTabs) : renderOptionContent(options || []))]);
+    };
+    (0, _vue.watch)(() => props.modelValue, val => {
+      reactData.activeName = val;
+      updateLineStyle();
+    });
+    (0, _vue.onMounted)(() => {
+      updateLineStyle();
+    });
+    $xeTabs.renderVN = renderVN;
+    (0, _vue.provide)('$xeTabs', $xeTabs);
+    return $xeTabs;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/tabs/src/tabs.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_tabPane=_interopRequireDefault(require("./tab-pane")),_vn=require("../../ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeTabs",props:{modelValue:[String,Number,Boolean],options:Array,destroyOnClose:Boolean,type:String},emits:[],setup(n,e){const i=e["slots"];var t=_xeUtils.default.uniqueId();const u=(0,_vue.ref)(),l=(0,_vue.ref)(),r=(0,_vue.reactive)({staticTabs:[],activeName:n.modelValue,initNames:n.modelValue?[n.modelValue]:[],lintLeft:0,lintWidth:0}),a={refElem:u},v=(0,_vue.computed)(()=>{var e=n["options"];const t=r["activeName"];return e?e.find(e=>e.name===t):null}),o=(0,_vue.computed)(()=>{const{staticTabs:e,activeName:t}=r;return e.find(e=>e.name===t)}),s={};t={xID:t,props:n,context:e,reactData:r,getRefMaps:()=>a,getComputeMaps:()=>s};const d=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=i[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],c=()=>{(0,_vue.nextTick)(()=>{var{type:e,options:t}=n;const{staticTabs:a,activeName:s}=r;var i=l.value;i&&!e&&-1<(e=_xeUtils.default.findIndexOf(a.length?a:t,e=>e.name===s))&&(i=(t=i.children[e]).clientWidth,e=Math.max(4,Math.floor(.6*i)),r.lintLeft=t.offsetLeft+Math.floor((i-e)/2),r.lintWidth=e)})},m=(e,t)=>{var a=r["initNames"],t=t["name"];a.includes(t)||a.push(t),r.activeName=t,c()},_=e=>{const{initNames:t,activeName:a}=r,{name:s,slots:i}=e,n=i?i.default:null;return(0,_vue.h)(_tabPane.default,e,{default(){return s&&t.includes(s)?(0,_vue.h)("div",{class:["vxe-tab-pane--item",{"is--visible":a===s}]},d(n,{})):(0,_vue.createCommentVNode)()}})},p=e=>{var{initNames:t,activeName:a}=r,{name:e,slots:s}=e,s=s?s.default:null;return e&&t.includes(e)?(0,_vue.h)("div",{class:["vxe-tab-pane--item",{"is--visible":a===e}]},d(s,{})):(0,_vue.createCommentVNode)()};return(0,_vue.watch)(()=>n.modelValue,e=>{r.activeName=e,c()}),(0,_vue.onMounted)(()=>{c()}),t.renderVN=()=>{var{type:e,options:t}=n,a=r["staticTabs"],s=i.default;return(0,_vue.h)("div",{ref:u,class:["vxe-tabs","vxe-tabs--"+(e||"default")]},[(0,_vue.h)("div",{class:"vxe-tabs-slots"},s?s({}):[]),(e=>{var t=n["type"];const{activeName:i,lintLeft:a,lintWidth:s}=r;return(0,_vue.h)("div",{class:"vxe-tabs-header"},[(0,_vue.h)("div",{ref:l,class:"vxe-tabs-header--wrapper"},e.map(t=>{var{title:e,name:a,slots:s}=t,s=s?s.tab:null;return(0,_vue.h)("div",{class:["vxe-tab-header--item",{"is--active":i===a}],onClick(e){m(e,t)}},[(0,_vue.h)("div",{class:"vxe-tab-header--item-name"},s?d(s,{name:a,title:e}):""+e)])})),t?null:(0,_vue.h)("span",{class:"vxe-tabs-header--active-line",style:{left:a+"px",width:s+"px"}})])})(s?a:t||[]),(0,_vue.h)("div",{class:"vxe-tabs-pane"},s?(e=a,s=n.destroyOnClose,a=o.value,s?a?p(a):(0,_vue.createCommentVNode)():e.map(p)):(s=t||[],a=n.destroyOnClose,e=v.value,a?e?_(e):(0,_vue.createCommentVNode)():s.map(_)))])},(0,_vue.provide)("$xeTabs",t),t},render(){return this.renderVN()}});

package/lib/tabs/src/util.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.assembleAnchorTab = assembleAnchorTab;
+exports.destroyAnchorTab = destroyAnchorTab;
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function assembleAnchorTab($xeTabs, elem, tabConfig) {
+  const staticLinks = $xeTabs.reactData.staticTabs;
+  const parentElem = elem.parentNode;
+  if (parentElem) {
+    staticLinks.splice(_xeUtils.default.arrayIndexOf(parentElem.children, elem), 0, tabConfig);
+    $xeTabs.reactData.staticTabs = staticLinks.slice(0);
+  }
+}
+function destroyAnchorTab($xeTabs, tabConfig) {
+  const staticTabs = $xeTabs.reactData.staticTabs;
+  const matchObj = _xeUtils.default.findTree(staticTabs, item => item.id === tabConfig.id, {
+    children: 'children'
+  });
+  if (matchObj) {
+    matchObj.items.splice(matchObj.index, 1);
+  }
+  $xeTabs.reactData.staticTabs = staticTabs.slice(0);
+}

package/lib/tabs/src/util.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.assembleAnchorTab=assembleAnchorTab,exports.destroyAnchorTab=destroyAnchorTab;var _xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function assembleAnchorTab(e,t,a){var r=e.reactData.staticTabs,s=t.parentNode;s&&(r.splice(_xeUtils.default.arrayIndexOf(s.children,t),0,a),e.reactData.staticTabs=r.slice(0))}function destroyAnchorTab(e,t){var a=e.reactData.staticTabs,r=_xeUtils.default.findTree(a,e=>e.id===t.id,{children:"children"});r&&r.items.splice(r.index,1),e.reactData.staticTabs=a.slice(0)}

package/lib/tabs/style/index.js

@@ -0,0 +1 @@
+require('./style.css')