bkui-vue 0.0.1-beta.410 → 0.0.1-beta.411

package/dist/index.esm.js

@@ -21752,10 +21752,15 @@ const tabProps = {
   validateActive: PropTypes.bool.def(true),
   showHeader: PropTypes.bool.def(true),
   changeOnHover: PropTypes.bool.def(false),
-  changeOnHoverDelay: PropTypes.number.def(1e3)
+  changeOnHoverDelay: PropTypes.number.def(1e3),
+  activeBarSize: PropTypes.number.def(2),
+  activeBarColor: PropTypes.string.def("#3a84ff")
 };
 const tabNavProps = __spreadValues({
   active: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(""),
+  type: j("type", {}).def("border-card"),
+  activeBarColor: PropTypes.string.def("#3a84ff"),
+  activeBarSize: PropTypes.number.def(2),
   panels: {
     type: Array,
     default: () => []
@@ -21785,6 +21790,50 @@ var TabNav = defineComponent({
   name: "TabNav",
   props: tabNavProps,
   setup(props2) {
+    const activeRef = ref(null);
+    const activeBarStyle = computed(() => {
+      const initStyle = {
+        width: 0,
+        height: 0,
+        bottom: 0,
+        left: 0
+      };
+      if (!activeRef.value) {
+        return initStyle;
+      }
+      if ([PositionEnum.LEFT, PositionEnum.RIGHT].includes(props2.tabPosition)) {
+        const {
+          clientHeight,
+          offsetTop
+        } = activeRef.value;
+        const style2 = {
+          width: `${props2.activeBarSize}px`,
+          height: `${clientHeight}px`,
+          top: `${offsetTop}px`,
+          background: props2.activeBarColor
+        };
+        if (props2.tabPosition === PositionEnum.LEFT) {
+          style2.right = 0;
+        } else {
+          style2.left = 0;
+        }
+        return style2;
+      }
+      if (props2.type === TabTypeEnum.UNBORDER_CARD) {
+        const {
+          clientWidth,
+          offsetLeft
+        } = activeRef.value;
+        return {
+          width: `${clientWidth}px`,
+          height: `${props2.activeBarSize}px`,
+          left: `${offsetLeft}px`,
+          bottom: 0,
+          background: props2.activeBarColor
+        };
+      }
+      return initStyle;
+    });
     const navs = computed(() => {
       if (!Array.isArray(props2.panels) || !props2.panels.length) {
         return [];
@@ -21879,6 +21928,8 @@ var TabNav = defineComponent({
       }
     };
     return __spreadProps(__spreadValues({}, methods), {
+      activeRef,
+      activeBarStyle,
       navs,
       dragenterIndex,
       dragStartIndex,
@@ -21924,6 +21975,7 @@ var TabNav = defineComponent({
         "onClick": () => this.handleTabChange(name),
         "draggable": getValue(item.sortable, sortable),
         "onDragstart": (e) => dragstart(index2, e),
+        "ref": active === name ? "activeRef" : "",
         "onDragenter": (e) => {
           e.preventDefault();
           dragenter(index2);
@@ -21972,6 +22024,15 @@ var TabNav = defineComponent({
       }
       return null;
     };
+    const renderActiveBar = () => {
+      if (this.type === TabTypeEnum.UNBORDER_CARD) {
+        return createVNode("div", {
+          "style": this.activeBarStyle,
+          "class": resolveClassName("tab-header-active-bar")
+        }, null);
+      }
+      return "";
+    };
     return createVNode("div", {
       "style": {
         lineHeight: `${labelHeight}px`
@@ -21979,7 +22040,10 @@ var TabNav = defineComponent({
       "class": resolveClassName("tab-header")
     }, [createVNode("div", {
       "class": resolveClassName("tab-header-nav")
-    }, [renderNavs()]), renderSlot2(), typeof this.$slots.setting === "function" && createVNode("div", {
+    }, [renderNavs(), renderActiveBar(), createVNode("div", {
+      "style": this.activeBarStyle,
+      "class": resolveClassName("tab-header-active-bar")
+    }, null)]), renderSlot2(), typeof this.$slots.setting === "function" && createVNode("div", {
       "class": resolveClassName("tab-header-setting")
     }, [this.$slots.setting()])]);
   }
@@ -22127,6 +22191,8 @@ var Tab = defineComponent({
         changeOnHover,
         changeOnHoverDelay,
         tabPosition,
+        activeBarSize,
+        activeBarColor,
         tabAdd,
         tabChange,
         tabRemove,
@@ -22147,6 +22213,8 @@ var Tab = defineComponent({
         changeOnHover,
         changeOnHoverDelay,
         tabPosition,
+        activeBarSize,
+        activeBarColor,
         tabAdd,
         tabChange,
         tabRemove,
@@ -40064,4 +40132,4 @@ var preset = {
   install: createInstall(),
   version: "0.0.1"
 };
-export { createPopoverComponent as $bkPopover, BkAffix as Affix, BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkBreadcrumb as Breadcrumb, BkButton as Button, BkCard as Card, BkCascader as Cascader, BkCheckbox as Checkbox, BkCodeDiff as CodeDiff, BkCollapse as Collapse, BkColorPicker as ColorPicker, BkConfigProvider as ConfigProvider, BkContainer as Container, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkDropdown as Dropdown, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, BkInfoBox as InfoBox, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkOverflowTitle as OverflowTitle, BkPagination as Pagination, BkPopover as Popover, BkPopover2 as Popover2, BkProcess as Process, BkProgress as Progress, BkRadio as Radio, BkRate as Rate, BkResizeLayout as ResizeLayout, BkSearchSelect as SearchSelect, BkSelect as Select, BkSideslider as Sideslider, Slider, BkSteps as Steps, BkSwiper as Swiper, BkSwitcher as Switcher, BkTab as Tab, BkTable as Table, BkTableColumn as TableColumn, BkTag as Tag, TagInput, BkTimeline as TimeLine, BkTimePicker as TimePicker, Transfer, BkTree as Tree, Upload, BkVirtualRender as VirtualRender, ellipsis as bkEllipsis, createInstance as bkEllipsisInstance, tooltips as bkTooltips, ClickOutside as clickoutside, BkContainer as containerProps, preset as default, mousewheel, overflowTitle };
+export { createPopoverComponent as $bkPopover, BkAffix as Affix, BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkBreadcrumb as Breadcrumb, BkButton as Button, BkCard as Card, BkCascader as Cascader, BkCheckbox as Checkbox, BkCodeDiff as CodeDiff, BkCollapse as Collapse, BkColorPicker as ColorPicker, BkConfigProvider as ConfigProvider, BkContainer as Container, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkDropdown as Dropdown, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, BkInfoBox as InfoBox, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkOverflowTitle as OverflowTitle, BkPagination as Pagination, BkPopover as Popover, BkPopover2 as Popover2, BkProcess as Process, BkProgress as Progress, BkRadio as Radio, BkRate as Rate, BkResizeLayout as ResizeLayout, BkSearchSelect as SearchSelect, BkSelect as Select, BkSideslider as Sideslider, Slider, BkSteps as Steps, BkSwiper as Swiper, BkSwitcher as Switcher, BkTab as Tab, BkTable as Table, BkTableColumn as TableColumn, BkTag as Tag, TagInput, BkTimeline as TimeLine, BkTimePicker as TimePicker, Transfer, BkTree as Tree, Upload, BkVirtualRender as VirtualRender, ellipsis as bkEllipsis, createInstance as bkEllipsisInstance, tooltips as bkTooltips, ClickOutside as clickoutside, configProviderProps, BkContainer as containerProps, preset as default, defaultRootConfig, mousewheel, overflowTitle, provideGlobalConfig, rootProviderKey, useLocale };