vue-devui 1.0.0-rc.0 → 1.0.0-rc.11

package/tabs/index.es.js

@@ -1,194 +1,397 @@
-import { defineComponent, ref, reactive, provide, onUpdated, onBeforeMount, onMounted, createVNode, inject } from "vue";
+import { toRefs, computed, defineComponent, shallowRef, reactive, inject, onUpdated, onBeforeMount, onMounted, watch, createVNode, resolveComponent, provide, mergeProps, onUnmounted } from "vue";
+const tabsProps = {
+  modelValue: {
+    type: [String, Number],
+    default: null
+  },
+  type: {
+    type: String,
+    default: "tabs"
+  },
+  showContent: {
+    type: Boolean,
+    default: true
+  },
+  reactivable: {
+    type: Boolean,
+    default: true
+  },
+  customWidth: {
+    type: String,
+    default: ""
+  },
+  cssClass: {
+    type: String,
+    default: ""
+  },
+  beforeChange: {
+    type: Function,
+    default: null
+  },
+  closeable: {
+    type: Boolean,
+    default: false
+  },
+  addable: {
+    type: Boolean,
+    default: false
+  },
+  tabPosition: {
+    type: String,
+    default: "top"
+  }
+};
 var tabs = "";
-var Tabs = defineComponent({
-  name: "DTabs",
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: null
-    },
-    type: {
-      type: String,
-      default: "tabs"
-    },
-    showContent: {
-      type: Boolean,
-      default: true
-    },
-    vertical: {
-      type: Boolean,
-      default: false
-    },
-    reactivable: {
-      type: Boolean,
-      default: true
-    },
-    customWidth: {
-      type: String,
-      default: ""
-    },
-    cssClass: {
-      type: String,
-      default: ""
-    },
-    beforeChange: {
-      type: Function,
-      default: null
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+const ns$1 = useNamespace("tabs");
+function useTabNavRender(props, data) {
+  const { cssClass, tabPosition, customWidth } = toRefs(props);
+  const ulClasses = computed(() => ({
+    [ns$1.e("nav")]: true,
+    [ns$1.em("nav", props.type)]: true,
+    [cssClass.value]: Boolean(cssClass.value),
+    [ns$1.em("nav", "top")]: tabPosition.value === "top",
+    [ns$1.em("nav", "right")]: tabPosition.value === "right",
+    [ns$1.em("nav", "bottom")]: tabPosition.value === "bottom",
+    [ns$1.em("nav", "left")]: tabPosition.value === "left"
+  }));
+  const aClasses = computed(() => ({
+    ["custom-width"]: Boolean(customWidth.value)
+  }));
+  const customStyle = {
+    width: props.customWidth ? props.customWidth : ""
+  };
+  const sliderAnimationStyle = computed(() => {
+    if (["top", "bottom"].includes(props.tabPosition)) {
+      return {
+        left: data.offsetLeft + "px",
+        width: data.offsetWidth + "px"
+      };
+    } else {
+      return {
+        top: data.offsetTop + "px",
+        height: data.offsetHeight + "px",
+        width: data.offsetWidth + "px"
+      };
     }
-  },
-  emits: ["update:modelValue", "active-tab-change"],
-  setup(props, {
-    emit,
-    slots
-  }) {
-    const tabsEle = ref(null);
-    const data = reactive({
-      offsetLeft: 0,
-      offsetWidth: 0,
-      id: null
-    });
-    const state = reactive({
-      data: [],
-      active: props.modelValue,
-      showContent: props.showContent,
-      slots: []
-    });
-    provide("tabs", {
-      state
-    });
-    const canChange = function(currentTab) {
-      let changeResult = Promise.resolve(true);
-      if (typeof props.beforeChange === "function") {
-        const result = props.beforeChange(currentTab);
-        if (typeof result !== "undefined") {
-          if (result.then) {
-            changeResult = result;
+  });
+  return { ulClasses, aClasses, customStyle, sliderAnimationStyle };
+}
+function useTabNavFunction(props, tabs2, data, ctx, tabsEle) {
+  const update = () => {
+    if (props.type === "slider") {
+      setTimeout(() => {
+        const tabEle = tabsEle.value.querySelector("#" + props.modelValue + ".active");
+        if (tabEle) {
+          if (["top", "bottom"].includes(props.tabPosition)) {
+            data.offsetLeft = tabEle.getBoundingClientRect().left - tabsEle.value.getBoundingClientRect().left;
           } else {
-            changeResult = Promise.resolve(result);
+            data.offsetTop = tabEle.getBoundingClientRect().top - tabsEle.value.getBoundingClientRect().top;
+            data.offsetHeight = tabEle.getBoundingClientRect().height;
           }
+          data.offsetWidth = tabEle.getBoundingClientRect().width;
+        }
+      });
+    }
+  };
+  const canChange = (currentTab) => {
+    let changeResult = Promise.resolve(true);
+    if (typeof props.beforeChange === "function") {
+      const result = props.beforeChange(currentTab);
+      if (typeof result !== "undefined") {
+        if (result.then) {
+          changeResult = result;
+        } else {
+          changeResult = Promise.resolve(result);
         }
       }
-      return changeResult;
-    };
-    const activeClick = function(item, tabEl) {
-      if (!props.reactivable && props.modelValue === item.id) {
+    }
+    return changeResult;
+  };
+  const activeClick = (item, tabEl) => {
+    if (!props.reactivable && props.modelValue === item.id) {
+      return;
+    }
+    canChange(item.id).then((change) => {
+      if (!change) {
         return;
       }
-      canChange(item.id).then((change) => {
-        if (!change) {
-          return;
-        }
-        const tab = state.data.find((itemOption) => itemOption.id === item.id);
-        if (tab && !tab.disabled) {
-          state.active = item.id;
-          emit("update:modelValue", tab.id);
-          if (props.type === "slider" && tabEl && tabsEle) {
-            this.offsetLeft = tabEl.getBoundingClientRect().left - this.tabsEle.nativeElement.getBoundingClientRect().left;
-            this.offsetWidth = tabEl.getBoundingClientRect().width;
+      const tab2 = tabs2.state.data.find((itemOption) => itemOption.id === item.id);
+      if (tab2 && !tab2.disabled) {
+        tabs2.state.active = item.id;
+        if (props.type === "slider" && tabEl && tabsEle) {
+          if (["left", "right"].includes(props.tabPosition)) {
+            data.offsetLeft = tabEl.getBoundingClientRect().left - tabsEle.value.nativeElement.getBoundingClientRect().left;
+          } else {
+            data.offsetTop = tabEl.getBoundingClientRect().top - tabsEle.value.nativeElement.getBoundingClientRect().top;
+            data.offsetHeight = tabEl.getBoundingClientRect().height;
           }
-          emit("active-tab-change", tab.id);
+          data.offsetWidth = tabEl.getBoundingClientRect().width;
         }
-      });
-    };
-    const ulClass = [props.type];
-    props.cssClass && ulClass.push(props.cssClass);
-    props.vertical && ulClass.push("devui-nav-stacked");
-    onUpdated(() => {
-      if (props.type === "slider") {
-        setTimeout(() => {
-          const tabEle = tabsEle.value.querySelector("#" + props.modelValue + ".active");
-          if (tabEle) {
-            data.offsetLeft = tabEle.getBoundingClientRect().left - tabsEle.value.getBoundingClientRect().left;
-            data.offsetWidth = tabEle.getBoundingClientRect().width;
-          }
-        });
+        ctx.emit("active-tab-change", tab2.id);
       }
     });
-    onBeforeMount(() => {
-      if (props.type !== "slider" && props.modelValue === void 0 && state.data.length > 0) {
-        activeClick(state.data[0]);
-      }
+  };
+  const beforeMount = () => {
+    if (props.type !== "slider" && props.modelValue === void 0 && tabs2.state.data.length > 0) {
+      activeClick(tabs2.state.data[0]);
+    }
+  };
+  const mounted = () => {
+    if (props.type === "slider" && props.modelValue === void 0 && tabs2.state.data.length > 0 && tabs2.state.data[0]) {
+      activeClick(tabs2.state.data[0].tabsEle.value.getElementById(tabs2.state.data[0].tabId));
+    }
+  };
+  const tabCanClose = (item) => {
+    return (props.closeable || item.closeable) && !item.disabled;
+  };
+  return { update, activeClick, beforeMount, mounted, tabCanClose };
+}
+function useTabNavEvent(ctx) {
+  const onTabRemove = (item, ev) => {
+    ev.stopPropagation();
+    ctx.emit("tab-remove", item, ev);
+    ctx.emit("tab-change", item.id, "delete");
+  };
+  const onTabAdd = () => {
+    ctx.emit("tab-add");
+    ctx.emit("tab-change", void 0, "add");
+  };
+  return { onTabRemove, onTabAdd };
+}
+var tabNav = "";
+var TabNav = defineComponent({
+  name: "DTabNav",
+  props: tabsProps,
+  emits: ["active-tab-change", "tab-remove", "tab-add", "tab-change"],
+  setup(props, ctx) {
+    const ns2 = useNamespace("tabs");
+    const tabsEle = shallowRef();
+    const data = reactive({
+      offsetLeft: 0,
+      offsetWidth: 0,
+      offsetTop: 0,
+      offsetHeight: 0,
+      id: null
     });
-    onMounted(() => {
-      if (props.type === "slider" && props.modelValue === void 0 && state.data.length > 0 && state.data[0]) {
-        activeClick(state.data[0].tabsEle.value.getElementById(state.data[0].tabId));
+    const tabs2 = inject("tabs");
+    const {
+      ulClasses,
+      aClasses,
+      customStyle,
+      sliderAnimationStyle
+    } = useTabNavRender(props, data);
+    const {
+      update,
+      beforeMount,
+      mounted,
+      activeClick,
+      tabCanClose
+    } = useTabNavFunction(props, tabs2, data, ctx, tabsEle);
+    const {
+      onTabRemove,
+      onTabAdd
+    } = useTabNavEvent(ctx);
+    onUpdated(() => update());
+    onBeforeMount(() => beforeMount());
+    onMounted(() => mounted());
+    watch(() => props.modelValue, () => {
+      var _a;
+      const tab2 = (_a = tabs2 == null ? void 0 : tabs2.state.data) == null ? void 0 : _a.find((item) => item.id === props.modelValue);
+      if (tab2) {
+        activeClick(tab2);
       }
     });
     return () => {
-      return createVNode("div", null, [createVNode("ul", {
+      const closeIconEl = (item) => {
+        return tabCanClose(item) ? createVNode("span", {
+          "class": ns2.e("close-btn"),
+          "onClick": (ev) => onTabRemove(item, ev)
+        }, [createVNode(resolveComponent("d-icon"), {
+          "size": "12px",
+          "name": "error-o"
+        }, null)]) : null;
+      };
+      const newButton = props.addable ? createVNode("li", {
+        "class": ns2.e("new-tab"),
+        "onClick": onTabAdd
+      }, [createVNode(resolveComponent("d-icon"), {
+        "name": "add"
+      }, null)]) : null;
+      return createVNode("ul", {
         "ref": tabsEle,
         "role": "tablist",
-        "class": `devui-nav devui-nav-${ulClass.join(" ")}`,
-        "id": "devuiTabs11"
-      }, [state.data.map((item, i) => {
+        "class": ulClasses.value
+      }, [((tabs2 == null ? void 0 : tabs2.state.data) || []).map((item, i) => {
         return createVNode("li", {
           "role": "presentation",
           "onClick": () => {
             activeClick(item);
           },
-          "class": (props.modelValue === (item.id || item.tabId) ? "active" : "") + " " + (item.disabled ? "disabled" : ""),
+          "class": (props.modelValue === (item.id || item.tabId) ? "active" : "") + (item.disabled ? " disabled" : ""),
           "id": item.id || item.tabId
+        }, [createVNode("span", {
+          "class": ns2.e("nav-content")
         }, [createVNode("a", {
           "role": "tab",
           "data-toggle": item.id,
-          "aria-expanded": props.modelValue === (item.id || item.tabId)
-        }, [state.slots[i] ? state.slots[i]() : createVNode("span", null, [item.title])])]);
-      }), createVNode("div", {
-        "class": `devui-nav-${props.type}-animation`,
-        "style": {
-          left: data.offsetLeft + "px",
-          width: data.offsetWidth + "px"
-        }
-      }, null)]), slots.default()]);
+          "aria-expanded": props.modelValue === (item.id || item.tabId),
+          "class": aClasses.value,
+          "style": customStyle
+        }, [(tabs2 == null ? void 0 : tabs2.state.slots[i]) ? tabs2.state.slots[i]() : createVNode("span", null, [item.title])]), closeIconEl(item)])]);
+      }), newButton, createVNode("div", {
+        "class": ns2.e(`nav-${props.type}-animation`),
+        "style": sliderAnimationStyle.value
+      }, null)]);
+    };
+  }
+});
+const ns = useNamespace("tabs");
+function useTabsEvent(ctx) {
+  const onUpdateModelValue = (value) => {
+    ctx.emit("update:modelValue", value);
+  };
+  const onActiveTabChange = (value) => {
+    ctx.emit("active-tab-change", value);
+  };
+  const onTabRemove = (item, ev) => {
+    ctx.emit("tab-remove", item, ev);
+  };
+  const onTabAdd = () => {
+    ctx.emit("tab-add");
+  };
+  const onTabChange = (id, type) => {
+    ctx.emit("tab-change", id, type);
+  };
+  return { onUpdateModelValue, onActiveTabChange, onTabRemove, onTabAdd, onTabChange };
+}
+function useTabsRender(props) {
+  const tabsClasses = computed(() => ({
+    [ns.b()]: true,
+    [ns.m(props.tabPosition)]: true
+  }));
+  return { tabsClasses };
+}
+var Tabs = defineComponent({
+  name: "DTabs",
+  props: tabsProps,
+  emits: ["update:modelValue", "active-tab-change", "tab-remove", "tab-add", "tab-change"],
+  setup(props, ctx) {
+    const state = reactive({
+      data: [],
+      active: props.modelValue,
+      showContent: props.showContent,
+      slots: []
+    });
+    provide("tabs", {
+      state
+    });
+    const {
+      onUpdateModelValue,
+      onActiveTabChange,
+      onTabRemove,
+      onTabAdd,
+      onTabChange
+    } = useTabsEvent(ctx);
+    const {
+      tabsClasses
+    } = useTabsRender(props);
+    watch(() => state.active, () => {
+      onUpdateModelValue(state.active);
+    });
+    return () => {
+      var _a, _b;
+      const tabNav2 = createVNode(TabNav, mergeProps(props, {
+        "onActiveTabChange": onActiveTabChange,
+        "onTabRemove": onTabRemove,
+        "onTabAdd": onTabAdd,
+        "onTabChange": onTabChange
+      }), null);
+      const content = (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a);
+      return createVNode("div", {
+        "class": tabsClasses.value
+      }, [props.tabPosition === "bottom" ? [content, tabNav2] : [tabNav2, content], createVNode("div", {
+        "style": "clear: both"
+      }, null)]);
     };
   }
 });
+const tabProps = {
+  title: {
+    type: [String, Number],
+    default: null
+  },
+  id: {
+    type: String,
+    default: null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  closeable: {
+    type: Boolean,
+    default: false
+  }
+};
+var tab = "";
 var Tab = defineComponent({
   name: "DTab",
-  props: {
-    title: {
-      default: null,
-      type: [String, Number]
-    },
-    id: {
-      default: null,
-      type: String
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
+  props: tabProps,
   setup(props, {
     slots
   }) {
+    var _a;
     const tabs2 = inject("tabs");
-    tabs2.state.slots.push(slots.title);
-    tabs2.state.data.push(props);
+    tabs2 == null ? void 0 : tabs2.state.slots.push(slots.title);
+    (_a = tabs2 == null ? void 0 : tabs2.state.data) == null ? void 0 : _a.push(props);
+    const ns2 = useNamespace("tab");
+    onUnmounted(() => {
+      tabs2.state.data = tabs2.state.data.filter((tab2) => tab2.id !== props.id);
+    });
     return () => {
+      var _a2;
       const {
         id
       } = props;
       const content = tabs2.state.showContent && tabs2.state.active === id ? createVNode("div", {
-        "class": "devui-tab-content"
+        "class": ns2.e("content")
       }, [createVNode("div", {
-        "role": "tabpanel",
-        "class": "devui-tab-pane in active"
-      }, [slots.default()])]) : null;
+        "role": "tabpanel"
+      }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])]) : null;
       return content;
     };
   }
 });
-Tabs.install = function(app) {
-  app.component(Tabs.name, Tabs);
-  app.component(Tab.name, Tab);
-};
 var index = {
   title: "Tabs \u9009\u9879\u5361",
   category: "\u5BFC\u822A",
   status: "60%",
   install(app) {
-    app.use(Tabs);
+    app.component(Tabs.name, Tabs);
+    app.component(Tab.name, Tab);
   }
 };
-export { Tabs, index as default };
+export { Tab, Tabs, index as default, tabsProps };

package/tabs/index.umd.js

@@ -1 +1 @@
-(function(d,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(d=typeof globalThis!="undefined"?globalThis:d||self,t(d.index={},d.Vue))})(this,function(d,t){"use strict";var m="",u=t.defineComponent({name:"DTabs",props:{modelValue:{type:[String,Number],default:null},type:{type:String,default:"tabs"},showContent:{type:Boolean,default:!0},vertical:{type:Boolean,default:!1},reactivable:{type:Boolean,default:!0},customWidth:{type:String,default:""},cssClass:{type:String,default:""},beforeChange:{type:Function,default:null}},emits:["update:modelValue","active-tab-change"],setup(e,{emit:f,slots:i}){const o=t.ref(null),c=t.reactive({offsetLeft:0,offsetWidth:0,id:null}),n=t.reactive({data:[],active:e.modelValue,showContent:e.showContent,slots:[]});t.provide("tabs",{state:n});const v=function(a){let l=Promise.resolve(!0);if(typeof e.beforeChange=="function"){const s=e.beforeChange(a);typeof s!="undefined"&&(s.then?l=s:l=Promise.resolve(s))}return l},b=function(a,l){!e.reactivable&&e.modelValue===a.id||v(a.id).then(s=>{if(!s)return;const r=n.data.find(C=>C.id===a.id);r&&!r.disabled&&(n.active=a.id,f("update:modelValue",r.id),e.type==="slider"&&l&&o&&(this.offsetLeft=l.getBoundingClientRect().left-this.tabsEle.nativeElement.getBoundingClientRect().left,this.offsetWidth=l.getBoundingClientRect().width),f("active-tab-change",r.id))})},h=[e.type];return e.cssClass&&h.push(e.cssClass),e.vertical&&h.push("devui-nav-stacked"),t.onUpdated(()=>{e.type==="slider"&&setTimeout(()=>{const a=o.value.querySelector("#"+e.modelValue+".active");a&&(c.offsetLeft=a.getBoundingClientRect().left-o.value.getBoundingClientRect().left,c.offsetWidth=a.getBoundingClientRect().width)})}),t.onBeforeMount(()=>{e.type!=="slider"&&e.modelValue===void 0&&n.data.length>0&&b(n.data[0])}),t.onMounted(()=>{e.type==="slider"&&e.modelValue===void 0&&n.data.length>0&&n.data[0]&&b(n.data[0].tabsEle.value.getElementById(n.data[0].tabId))}),()=>t.createVNode("div",null,[t.createVNode("ul",{ref:o,role:"tablist",class:`devui-nav devui-nav-${h.join(" ")}`,id:"devuiTabs11"},[n.data.map((a,l)=>t.createVNode("li",{role:"presentation",onClick:()=>{b(a)},class:(e.modelValue===(a.id||a.tabId)?"active":"")+" "+(a.disabled?"disabled":""),id:a.id||a.tabId},[t.createVNode("a",{role:"tab","data-toggle":a.id,"aria-expanded":e.modelValue===(a.id||a.tabId)},[n.slots[l]?n.slots[l]():t.createVNode("span",null,[a.title])])])),t.createVNode("div",{class:`devui-nav-${e.type}-animation`,style:{left:c.offsetLeft+"px",width:c.offsetWidth+"px"}},null)]),i.default()])}}),g=t.defineComponent({name:"DTab",props:{title:{default:null,type:[String,Number]},id:{default:null,type:String},disabled:{type:Boolean,default:!1}},setup(e,{slots:f}){const i=t.inject("tabs");return i.state.slots.push(f.title),i.state.data.push(e),()=>{const{id:o}=e;return i.state.showContent&&i.state.active===o?t.createVNode("div",{class:"devui-tab-content"},[t.createVNode("div",{role:"tabpanel",class:"devui-tab-pane in active"},[f.default()])]):null}}});u.install=function(e){e.component(u.name,u),e.component(g.name,g)};var y={title:"Tabs \u9009\u9879\u5361",category:"\u5BFC\u822A",status:"60%",install(e){e.use(u)}};d.Tabs=u,d.default=y,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});
+(function(r,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(r=typeof globalThis!="undefined"?globalThis:r||self,t(r.index={},r.Vue))})(this,function(r,t){"use strict";const N={modelValue:{type:[String,Number],default:null},type:{type:String,default:"tabs"},showContent:{type:Boolean,default:!0},reactivable:{type:Boolean,default:!0},customWidth:{type:String,default:""},cssClass:{type:String,default:""},beforeChange:{type:Function,default:null},closeable:{type:Boolean,default:!1},addable:{type:Boolean,default:!1},tabPosition:{type:String,default:"top"}};var L="";function T(e,a,n){let s=e;return a&&(s+=`__${a}`),n&&(s+=`--${n}`),s}function y(e,a=!1){const n=a?`.devui-${e}`:`devui-${e}`;return{b:()=>T(n),e:o=>o?T(n,o):"",m:o=>o?T(n,"",o):"",em:(o,b)=>o&&b?T(n,o,b):""}}const g=y("tabs");function S(e,a){const{cssClass:n,tabPosition:s,customWidth:i}=t.toRefs(e),l=t.computed(()=>({[g.e("nav")]:!0,[g.em("nav",e.type)]:!0,[n.value]:Boolean(n.value),[g.em("nav","top")]:s.value==="top",[g.em("nav","right")]:s.value==="right",[g.em("nav","bottom")]:s.value==="bottom",[g.em("nav","left")]:s.value==="left"})),c=t.computed(()=>({["custom-width"]:Boolean(i.value)})),o={width:e.customWidth?e.customWidth:""},b=t.computed(()=>["top","bottom"].includes(e.tabPosition)?{left:a.offsetLeft+"px",width:a.offsetWidth+"px"}:{top:a.offsetTop+"px",height:a.offsetHeight+"px",width:a.offsetWidth+"px"});return{ulClasses:l,aClasses:c,customStyle:o,sliderAnimationStyle:b}}function M(e,a,n,s,i){const l=()=>{e.type==="slider"&&setTimeout(()=>{const d=i.value.querySelector("#"+e.modelValue+".active");d&&(["top","bottom"].includes(e.tabPosition)?n.offsetLeft=d.getBoundingClientRect().left-i.value.getBoundingClientRect().left:(n.offsetTop=d.getBoundingClientRect().top-i.value.getBoundingClientRect().top,n.offsetHeight=d.getBoundingClientRect().height),n.offsetWidth=d.getBoundingClientRect().width)})},c=d=>{let f=Promise.resolve(!0);if(typeof e.beforeChange=="function"){const m=e.beforeChange(d);typeof m!="undefined"&&(m.then?f=m:f=Promise.resolve(m))}return f},o=(d,f)=>{!e.reactivable&&e.modelValue===d.id||c(d.id).then(m=>{if(!m)return;const C=a.state.data.find(P=>P.id===d.id);C&&!C.disabled&&(a.state.active=d.id,e.type==="slider"&&f&&i&&(["left","right"].includes(e.tabPosition)?n.offsetLeft=f.getBoundingClientRect().left-i.value.nativeElement.getBoundingClientRect().left:(n.offsetTop=f.getBoundingClientRect().top-i.value.nativeElement.getBoundingClientRect().top,n.offsetHeight=f.getBoundingClientRect().height),n.offsetWidth=f.getBoundingClientRect().width),s.emit("active-tab-change",C.id))})};return{update:l,activeClick:o,beforeMount:()=>{e.type!=="slider"&&e.modelValue===void 0&&a.state.data.length>0&&o(a.state.data[0])},mounted:()=>{e.type==="slider"&&e.modelValue===void 0&&a.state.data.length>0&&a.state.data[0]&&o(a.state.data[0].tabsEle.value.getElementById(a.state.data[0].tabId))},tabCanClose:d=>(e.closeable||d.closeable)&&!d.disabled}}function W(e){return{onTabRemove:(s,i)=>{i.stopPropagation(),e.emit("tab-remove",s,i),e.emit("tab-change",s.id,"delete")},onTabAdd:()=>{e.emit("tab-add"),e.emit("tab-change",void 0,"add")}}}var _="",I=t.defineComponent({name:"DTabNav",props:N,emits:["active-tab-change","tab-remove","tab-add","tab-change"],setup(e,a){const n=y("tabs"),s=t.shallowRef(),i=t.reactive({offsetLeft:0,offsetWidth:0,offsetTop:0,offsetHeight:0,id:null}),l=t.inject("tabs"),{ulClasses:c,aClasses:o,customStyle:b,sliderAnimationStyle:h}=S(e,i),{update:v,beforeMount:d,mounted:f,activeClick:m,tabCanClose:C}=M(e,l,i,a,s),{onTabRemove:P,onTabAdd:H}=W(a);return t.onUpdated(()=>v()),t.onBeforeMount(()=>d()),t.onMounted(()=>f()),t.watch(()=>e.modelValue,()=>{var p;const V=(p=l==null?void 0:l.state.data)==null?void 0:p.find(u=>u.id===e.modelValue);V&&m(V)}),()=>{const V=u=>C(u)?t.createVNode("span",{class:n.e("close-btn"),onClick:B=>P(u,B)},[t.createVNode(t.resolveComponent("d-icon"),{size:"12px",name:"error-o"},null)]):null,p=e.addable?t.createVNode("li",{class:n.e("new-tab"),onClick:H},[t.createVNode(t.resolveComponent("d-icon"),{name:"add"},null)]):null;return t.createVNode("ul",{ref:s,role:"tablist",class:c.value},[((l==null?void 0:l.state.data)||[]).map((u,B)=>t.createVNode("li",{role:"presentation",onClick:()=>{m(u)},class:(e.modelValue===(u.id||u.tabId)?"active":"")+(u.disabled?" disabled":""),id:u.id||u.tabId},[t.createVNode("span",{class:n.e("nav-content")},[t.createVNode("a",{role:"tab","data-toggle":u.id,"aria-expanded":e.modelValue===(u.id||u.tabId),class:o.value,style:b},[(l==null?void 0:l.state.slots[B])?l.state.slots[B]():t.createVNode("span",null,[u.title])]),V(u)])])),p,t.createVNode("div",{class:n.e(`nav-${e.type}-animation`),style:h.value},null)])}}});const A=y("tabs");function $(e){return{onUpdateModelValue:c=>{e.emit("update:modelValue",c)},onActiveTabChange:c=>{e.emit("active-tab-change",c)},onTabRemove:(c,o)=>{e.emit("tab-remove",c,o)},onTabAdd:()=>{e.emit("tab-add")},onTabChange:(c,o)=>{e.emit("tab-change",c,o)}}}function U(e){return{tabsClasses:t.computed(()=>({[A.b()]:!0,[A.m(e.tabPosition)]:!0}))}}var R=t.defineComponent({name:"DTabs",props:N,emits:["update:modelValue","active-tab-change","tab-remove","tab-add","tab-change"],setup(e,a){const n=t.reactive({data:[],active:e.modelValue,showContent:e.showContent,slots:[]});t.provide("tabs",{state:n});const{onUpdateModelValue:s,onActiveTabChange:i,onTabRemove:l,onTabAdd:c,onTabChange:o}=$(a),{tabsClasses:b}=U(e);return t.watch(()=>n.active,()=>{s(n.active)}),()=>{var d,f;const h=t.createVNode(I,t.mergeProps(e,{onActiveTabChange:i,onTabRemove:l,onTabAdd:c,onTabChange:o}),null),v=(f=(d=a.slots).default)==null?void 0:f.call(d);return t.createVNode("div",{class:b.value},[e.tabPosition==="bottom"?[v,h]:[h,v],t.createVNode("div",{style:"clear: both"},null)])}}});const j={title:{type:[String,Number],default:null},id:{type:String,default:null},disabled:{type:Boolean,default:!1},closeable:{type:Boolean,default:!1}};var D="",w=t.defineComponent({name:"DTab",props:j,setup(e,{slots:a}){var i;const n=t.inject("tabs");n==null||n.state.slots.push(a.title),(i=n==null?void 0:n.state.data)==null||i.push(e);const s=y("tab");return t.onUnmounted(()=>{n.state.data=n.state.data.filter(l=>l.id!==e.id)}),()=>{var o;const{id:l}=e;return n.state.showContent&&n.state.active===l?t.createVNode("div",{class:s.e("content")},[t.createVNode("div",{role:"tabpanel"},[(o=a.default)==null?void 0:o.call(a)])]):null}}}),k={title:"Tabs \u9009\u9879\u5361",category:"\u5BFC\u822A",status:"60%",install(e){e.component(R.name,R),e.component(w.name,w)}};r.Tab=w,r.Tabs=R,r.default=k,r.tabsProps=N,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});

package/tabs/style.css

@@ -1 +1 @@
-:host{display:block}.devui-nav-tabs,.devui-nav-pills{font-size:var(--devui-font-size, 12px);background:transparent;font-weight:700;list-style:none}.devui-nav-tabs li,.devui-nav-pills li{cursor:pointer;border:2px solid transparent}.devui-nav-tabs li a,.devui-nav-pills li a{cursor:pointer;border:none;line-height:30px;background-color:transparent;padding:0;text-decoration:none;color:var(--devui-text, #252b3a)}.devui-nav-tabs li a:hover,.devui-nav-tabs li a:focus,.devui-nav-tabs li a:active,.devui-nav-pills li a:hover,.devui-nav-pills li a:focus,.devui-nav-pills li a:active{outline:none}.devui-nav-tabs li.disabled a,.devui-nav-pills li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-nav-tabs li.active a,.devui-nav-tabs li:hover:not(.disabled) a,.devui-nav-pills li.active a,.devui-nav-pills li:hover:not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-nav-tabs li:after,.devui-nav-pills li:after{content:"";display:block;margin:auto;height:2px;width:0;background:transparent;transition:width .3s ease-out,background-color .3s ease-out}.devui-nav-tabs li.active:after,.devui-nav-pills li.active:after{width:100%;background:var(--devui-brand, #5e7ce0)}.devui-nav-options{font-size:var(--devui-font-size, 12px);background:transparent;border:none;border-radius:var(--devui-border-radius, 2px)}.devui-nav-options>li{cursor:pointer;border:1px solid var(--devui-line, #adb0b8);border-left-width:0;background-color:var(--devui-base-bg, #ffffff);float:left}.devui-nav-options>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-nav-options>li:last-child{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-nav-options>li>a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);line-height:26px;padding:0 15px}.devui-nav-options>li>a:hover,.devui-nav-options>li>a:focus,.devui-nav-options>li>a:active{outline:none}.devui-nav-options>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-nav-options>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-nav-options>li.active>a,.devui-nav-options>li:hover:not(.disabled)>a{color:var(--devui-light-text, #ffffff)}.devui-nav-options>li.active>a:hover,.devui-nav-options>li:hover:not(.disabled)>a:hover{color:var(--devui-light-text, #ffffff);background:transparent}.devui-nav-options>li.active{background-color:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-nav-options>li.active:not(:first-child):before{background-color:var(--devui-brand, #5e7ce0)}.devui-nav-options>li.active+li:before{background-color:var(--devui-brand, #5e7ce0)}.devui-nav-options>li:hover:not(.active):not(.disabled){background-color:var(--devui-brand-active, #526ecc);border-color:var(--devui-brand-active, #526ecc)}.devui-nav-options>li:hover:not(.active):not(.disabled):not(:first-child):before{background-color:var(--devui-brand-active, #526ecc)}.devui-nav-slider{font-size:var(--devui-font-size, 12px);border:none;border-radius:var(--devui-border-radius, 2px);background:var(--devui-list-item-hover-bg, #f2f5fc);width:fit-content;display:flex!important;align-items:center;position:relative}.devui-nav-slider>li{cursor:pointer;margin:2px;float:left;position:relative;z-index:1}.devui-nav-slider>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-nav-slider>li:last-child{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-nav-slider>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);line-height:28px;padding:0 15px}.devui-nav-slider>li a:hover,.devui-nav-slider>li a:focus,.devui-nav-slider>li a:active{outline:none}.devui-nav-slider>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-nav-slider>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-nav-slider>li.active a,.devui-nav-slider>li:hover:not(.disabled) a{color:var(--devui-brand-active, #526ecc)}.devui-nav-slider>li.active a:hover,.devui-nav-slider>li:hover:not(.disabled) a:hover{color:var(--devui-brand-active, #526ecc);background:transparent}.devui-nav-slider>li.active:not(:first-child):before,.devui-nav-slider>li:hover:not(.disabled):not(:first-child):before{content:"";display:block;top:-1px;left:-1px;width:1px;height:"calc(100% + 2px)";position:absolute}.devui-nav-slider>li.active{text-shadow:0 0 .7px var(--devui-brand, #5e7ce0)}.devui-nav-slider>li.active:not(:first-child):before{background-color:var(--devui-brand, #5e7ce0)}.devui-nav-slider>li.active+li:before{background-color:var(--devui-brand, #5e7ce0)}.devui-nav-slider>li:hover:not(.active):not(.disabled){color:var(--devui-brand-active, #526ecc)}.devui-nav-slider>li:hover:not(.active):not(.disabled):not(:first-child):before{background-color:var(--devui-brand-active, #526ecc)}.devui-nav-wrapped{font-size:var(--devui-font-size, 12px);background:transparent;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6);background-color:var(--devui-base-bg, #ffffff)}.devui-nav-wrapped>li{cursor:pointer;float:left;position:relative;padding:8px 16px}.devui-nav-wrapped>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0}.devui-nav-wrapped>li a:hover,.devui-nav-wrapped>li a:focus,.devui-nav-wrapped>li a:active{outline:none}.devui-nav-wrapped>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-nav-wrapped>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-nav-wrapped>li.active{border:1px solid var(--devui-dividing-line, #dfe1e6);background:var(--devui-global-bg, #f3f6f8);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;font-weight:700;margin:-1px;border-bottom-color:transparent}.devui-nav-wrapped>li.active a{color:var(--devui-brand-active, #526ecc)}.devui-nav-wrapped>li:hover:not(.active):not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-nav{list-style:none;padding-left:0}.devui-nav li a{text-decoration:none}.devui-nav li a.custom-width{display:inline-block;padding:0;text-align:center}.devui-nav-tabs:not(.devui-nav-stacked){border-bottom:1px var(--devui-line, #adb0b8) solid}.devui-nav-tabs:not(.devui-nav-stacked) li{float:left;margin-left:32px;margin-bottom:-3px}.devui-nav-tabs:not(.devui-nav-stacked) li:first-child{margin-left:0}.devui-nav-pills:not(.devui-nav-stacked)>li{float:left;margin-left:32px}.devui-nav-pills:not(.devui-nav-stacked)>li:first-child{margin-left:0}.devui-nav:before,.devui-nav:after{content:" ";display:table}.devui-nav:after{clear:both}.devui-tab-content{margin-top:20px}.devui-nav-slider-animation{position:absolute;z-index:0;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);box-shadow:0 2px 4px 0 var(--devui-light-shadow, rgba(0, 0, 0, .1));top:1px;height:30px;transition:left .3s cubic-bezier(.645,.045,.355,1),width .3s cubic-bezier(.645,.045,.355,1)}
+:host{display:block}.devui-tabs__nav--tabs,.devui-tabs__nav--pills{font-size:var(--devui-font-size, 14px);background:transparent;list-style:none}.devui-tabs__nav--tabs li,.devui-tabs__nav--pills li{cursor:pointer;border:2px solid transparent}.devui-tabs__nav--tabs li a,.devui-tabs__nav--pills li a{cursor:pointer;border:none;line-height:30px;background-color:transparent;padding:0;text-decoration:none;color:var(--devui-text, #252b3a)}.devui-tabs__nav--tabs li a:hover,.devui-tabs__nav--tabs li a:focus,.devui-tabs__nav--tabs li a:active,.devui-tabs__nav--pills li a:hover,.devui-tabs__nav--pills li a:focus,.devui-tabs__nav--pills li a:active{outline:none}.devui-tabs__nav--tabs li.disabled a,.devui-tabs__nav--pills li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--tabs li.active a,.devui-tabs__nav--tabs li:hover:not(.disabled) a,.devui-tabs__nav--pills li.active a,.devui-tabs__nav--pills li:hover:not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--tabs li:after,.devui-tabs__nav--pills li:after{content:"";display:block;margin:auto;height:2px;width:0;background:transparent;transition:width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--tabs li.active:after,.devui-tabs__nav--pills li.active:after{width:100%;background:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--tabs .devui-tabs__new-tab,.devui-tabs__nav--pills .devui-tabs__new-tab{padding:2px 0 0}.devui-tabs__nav--options{background:var(--devui-base-bg, #ffffff);border:1px solid var(--devui-dividing-line, #f2f2f3);border-radius:var(--devui-border-radius, 4px);padding:2px;width:fit-content}.devui-tabs__nav--options>li{cursor:pointer;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 4px);transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),text-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--options>li span>a{border:none;color:var(--devui-text, #252b3a);line-height:26px;padding:0 16px}.devui-tabs__nav--options>li span>a:hover,.devui-tabs__nav--options>li span>a:focus,.devui-tabs__nav--options>li span>a:active{outline:none}.devui-tabs__nav--options>li.active{background-color:var(--devui-brand-foil, #f2f2f3)}.devui-tabs__nav--options>li.active span>a{color:var(--devui-brand, #5e7ce0);padding:0 16px}.devui-tabs__nav--options>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--options>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--options>li.active span>a:hover,.devui-tabs__nav--options>li:hover:not(.disabled) span>a:hover{color:var(--devui-brand, #5e7ce0);background:transparent}.devui-tabs__nav--options .devui-tabs__close-btn{margin-right:12px}.devui-tabs__nav--options .devui-tabs__new-tab{padding:2px 16px 0}.devui-tabs__nav--slider{font-size:var(--devui-font-size, 14px);border:none;border-radius:var(--devui-border-radius, 4px);background:var(--devui-list-item-hover-bg, #f2f2f3);width:fit-content;display:flex;align-items:center;position:relative}.devui-tabs__nav--slider>li{cursor:pointer;margin:2px;position:relative;z-index:1}.devui-tabs__nav--slider>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 4px) 0 0 var(--devui-border-radius, 4px)}.devui-tabs__nav--slider>li:last-child{border-radius:0 var(--devui-border-radius, 4px) var(--devui-border-radius, 4px) 0}.devui-tabs__nav--slider>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);line-height:28px;padding:0 16px}.devui-tabs__nav--slider>li a:hover,.devui-tabs__nav--slider>li a:focus,.devui-tabs__nav--slider>li a:active{outline:none}.devui-tabs__nav--slider>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--slider>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--slider>li.active a,.devui-tabs__nav--slider>li:hover:not(.disabled) a{color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider>li.active a:hover,.devui-tabs__nav--slider>li:hover:not(.disabled) a:hover{color:var(--devui-brand-active, #526ecc);background:transparent}.devui-tabs__nav--slider>li.active{text-shadow:0 0 .7px var(--devui-brand, #5e7ce0)}.devui-tabs__nav--slider>li:hover:not(.active):not(.disabled){color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider .devui-tabs__close-btn{margin-right:12px}.devui-tabs__nav--slider .devui-tabs__new-tab{padding:2px 16px 0}.devui-tabs__nav--wrapped{font-size:var(--devui-font-size, 14px);background:transparent;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-base-bg, #ffffff)}.devui-tabs__nav--wrapped>li{cursor:pointer;position:relative;padding:8px 16px}.devui-tabs__nav--wrapped>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);border-radius:var(--devui-border-radius, 4px) var(--devui-border-radius, 4px) 0 0}.devui-tabs__nav--wrapped>li a:hover,.devui-tabs__nav--wrapped>li a:focus,.devui-tabs__nav--wrapped>li a:active{outline:none}.devui-tabs__nav--wrapped>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--wrapped>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--wrapped>li.active{border:1px solid var(--devui-dividing-line, #f2f2f3);background:var(--devui-global-bg, #f8f8fa);border-radius:var(--devui-border-radius, 4px) var(--devui-border-radius, 4px) 0 0;margin:-1px;border-bottom-color:transparent}.devui-tabs__nav--wrapped>li.active a{color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--wrapped>li:hover:not(.active):not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--tabs{border-bottom:1px var(--devui-line, #d7d8da) solid}.devui-tabs__nav--tabs li{margin-left:32px;margin-bottom:-3px}.devui-tabs__nav--tabs li:first-child{margin-left:0}.devui-tabs__nav--pills>li{margin-left:32px}.devui-tabs__nav--pills>li:first-child{margin-left:0}.devui-tabs__nav{display:flex;align-items:center;list-style:none;padding-left:0}.devui-tabs__nav li a{text-decoration:none}.devui-tabs__nav li a.custom-width{display:inline-block;padding:0;text-align:center}.devui-tabs__nav--right,.devui-tabs__nav--left{margin:0}.devui-tabs__nav--right .devui-tabs__nav-slider-animation,.devui-tabs__nav--left .devui-tabs__nav-slider-animation{transition:top var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),height var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--right .devui-tabs__new-tab,.devui-tabs__nav--left .devui-tabs__new-tab{text-align:center}.devui-tabs__nav--right{display:block;float:right;border-bottom:none;margin-left:10px}.devui-tabs__nav--right>li{margin-left:0;padding:0 16px;position:relative}.devui-tabs__nav--right>li:after{display:none}.devui-tabs__nav--right>li:before{content:" ";position:absolute;top:0;left:-5px;margin:auto;height:0;width:2px;background:transparent;transition:height var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--right>li.active:before{height:100%;background:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--left{display:block;float:left;border-bottom:none;margin-right:10px}.devui-tabs__nav--left>li{margin-left:0;padding:0 16px;position:relative}.devui-tabs__nav--left>li:after{content:" ";position:absolute;top:0;right:-5px;margin:auto;height:0;width:2px;background:transparent;transition:height var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--left>li.active:after{height:100%;width:2px;background:var(--devui-brand, #5e7ce0)}.devui-tabs__nav-content{display:flex;align-items:center}.devui-tabs__nav--options{padding-left:2px}.devui-tabs__nav-slider-animation{position:absolute;z-index:0;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 4px);box-shadow:0 2px 4px 0 var(--devui-light-shadow, rgba(37, 43, 58, .1));top:1px;height:30px;transition:left var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__new-tab .devui-icon__container:hover,.devui-tabs__close-btn .devui-icon__container:hover{color:var(--devui-text, #252b3a)}.devui-tabs__new-tab .devui-icon__container>i,.devui-tabs__close-btn .devui-icon__container>i{transition:none}.devui-tabs__new-tab .devui-icon__container{color:var(--devui-aide-text, #71757f)}.devui-tabs__close-btn{margin-left:12px}.devui-tabs__close-btn .devui-icon__container{color:var(--devui-form-control-line, #d7d8da)}.devui-tabs--right .devui-tabs__nav--options,.devui-tabs--right .devui-tabs__nav--wrapped,.devui-tabs--left .devui-tabs__nav--options,.devui-tabs--left .devui-tabs__nav--wrapped{border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-tabs--right .devui-tabs__nav--options>li:after,.devui-tabs--right .devui-tabs__nav--wrapped>li:after,.devui-tabs--left .devui-tabs__nav--options>li:after,.devui-tabs--left .devui-tabs__nav--wrapped>li:after{display:none}.devui-tabs--right .devui-tabs__nav--options>li:before,.devui-tabs--right .devui-tabs__nav--wrapped>li:before,.devui-tabs--left .devui-tabs__nav--options>li:before,.devui-tabs--left .devui-tabs__nav--wrapped>li:before{display:none}.devui-tabs--right .devui-tabs__nav--wrapped,.devui-tabs--left .devui-tabs__nav--wrapped{border-bottom:none}.devui-tabs--right .devui-tabs__nav--wrapped>li,.devui-tabs--left .devui-tabs__nav--wrapped>li{padding:8px 16px}.devui-tabs--right .devui-tabs__nav--slider>li:after,.devui-tabs--left .devui-tabs__nav--slider>li:after{display:none}.devui-tabs--right .devui-tabs__nav--slider>li:before,.devui-tabs--left .devui-tabs__nav--slider>li:before{display:none}.devui-tabs--right .devui-tabs__nav--slider .devui-tabs__nav-slider-animation,.devui-tabs--left .devui-tabs__nav--slider .devui-tabs__nav-slider-animation{left:1px}.devui-tabs--right .devui-tabs__nav--wrapped{border-left:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-tabs--right .devui-tabs__nav--wrapped>li a{border-radius:0 var(--devui-border-radius, 4px) var(--devui-border-radius, 4px) 0}.devui-tabs--right .devui-tabs__nav--wrapped>li.active{border-radius:0 var(--devui-border-radius, 4px) var(--devui-border-radius, 4px) 0;border-bottom-color:var(--devui-dividing-line, #f2f2f3);border-left-color:transparent}.devui-tabs--right .devui-tabs__nav--tabs{border-left:1px solid var(--devui-line, #d7d8da)}.devui-tabs--left .devui-tabs__nav--wrapped{border-right:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-tabs--left .devui-tabs__nav--wrapped>li a{border-radius:var(--devui-border-radius, 4px) 0 0 var(--devui-border-radius, 4px)}.devui-tabs--left .devui-tabs__nav--wrapped>li.active{border-radius:var(--devui-border-radius, 4px) 0 0 var(--devui-border-radius, 4px);border-bottom-color:var(--devui-dividing-line, #f2f2f3);border-right-color:transparent}.devui-tabs--left .devui-tabs__nav--tabs{border-right:1px solid var(--devui-line, #d7d8da)}.devui-tab__content{margin-top:20px;overflow:hidden}