zartui 3.0.2 → 3.0.4

package/es/tabbar/index.d.ts

@@ -0,0 +1,64 @@
+export declare const Tabbar: import("../utils").WithInstall<import("vue").DefineComponent<{
+    route: BooleanConstructor;
+    fixed: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    zIndex: (NumberConstructor | StringConstructor)[];
+    placeholder: BooleanConstructor;
+    activeColor: StringConstructor;
+    beforeChange: import("vue").PropType<import("../utils").Interceptor>;
+    inactiveColor: StringConstructor;
+    modelValue: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    safeAreaInsetBottom: {
+        type: import("vue").PropType<boolean | null>;
+        default: null;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    route: BooleanConstructor;
+    fixed: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    zIndex: (NumberConstructor | StringConstructor)[];
+    placeholder: BooleanConstructor;
+    activeColor: StringConstructor;
+    beforeChange: import("vue").PropType<import("../utils").Interceptor>;
+    inactiveColor: StringConstructor;
+    modelValue: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    safeAreaInsetBottom: {
+        type: import("vue").PropType<boolean | null>;
+        default: null;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    fixed: boolean;
+    border: boolean;
+    modelValue: string | number;
+    placeholder: boolean;
+    safeAreaInsetBottom: boolean | null;
+    route: boolean;
+}>>;
+export default Tabbar;
+export type { TabbarProps } from './Tabbar';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtTabbar: typeof Tabbar;
+    }
+}

package/es/tabbar/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _Tabbar from "./Tabbar.mjs";
+const Tabbar = withInstall(_Tabbar);
+var stdin_default = Tabbar;
+export {
+  Tabbar,
+  stdin_default as default
+};

package/es/tabbar/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/tabbar/style/index.mjs

@@ -0,0 +1,2 @@
+import "../../style/base.css";
+import "../index.css";

package/es/tabbar-item/TabbarItem.d.ts

@@ -0,0 +1,44 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import { BadgeProps } from '../badge';
+declare const tabbarItemProps: {
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    icon: StringConstructor;
+    name: (NumberConstructor | StringConstructor)[];
+    badge: (NumberConstructor | StringConstructor)[];
+    badgeProps: PropType<Partial<BadgeProps>>;
+    iconPrefix: StringConstructor;
+};
+export declare type TabbarItemProps = ExtractPropTypes<typeof tabbarItemProps>;
+declare const _default: import("vue").DefineComponent<{
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    icon: StringConstructor;
+    name: (NumberConstructor | StringConstructor)[];
+    badge: (NumberConstructor | StringConstructor)[];
+    badgeProps: PropType<Partial<BadgeProps>>;
+    iconPrefix: StringConstructor;
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    icon: StringConstructor;
+    name: (NumberConstructor | StringConstructor)[];
+    badge: (NumberConstructor | StringConstructor)[];
+    badgeProps: PropType<Partial<BadgeProps>>;
+    iconPrefix: StringConstructor;
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    replace: boolean;
+    dot: boolean;
+}>;
+export default _default;

package/es/tabbar-item/TabbarItem.mjs

@@ -0,0 +1,122 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { computed, defineComponent, getCurrentInstance } from "vue";
+import { createNamespace, extend, isObject, numericProp } from "../utils/index.mjs";
+import { TABBAR_KEY } from "../tabbar/Tabbar.mjs";
+import { useParent } from "@zartui/use";
+import { routeProps, useRoute } from "../composables/use-route.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Badge } from "../badge/index.mjs";
+const [name, bem] = createNamespace("tabbar-item");
+const tabbarItemProps = extend({}, routeProps, {
+  dot: Boolean,
+  icon: String,
+  name: numericProp,
+  badge: numericProp,
+  badgeProps: Object,
+  iconPrefix: String
+});
+var stdin_default = defineComponent({
+  name,
+  props: tabbarItemProps,
+  emits: ["click"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const route = useRoute();
+    const vm = getCurrentInstance().proxy;
+    const {
+      parent,
+      index
+    } = useParent(TABBAR_KEY);
+    if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[ZartUI] <TabbarItem> must be a child component of <Tabbar>.");
+      }
+      return;
+    }
+    const active = computed(() => {
+      var _a;
+      const {
+        route: route2,
+        modelValue
+      } = parent.props;
+      if (route2 && "$route" in vm) {
+        const {
+          $route
+        } = vm;
+        const {
+          to
+        } = props;
+        const config = isObject(to) ? to : {
+          path: to
+        };
+        return !!$route.matched.find((val) => {
+          const pathMatched = "path" in config && config.path === val.path;
+          const nameMatched = "name" in config && config.name === val.name;
+          return pathMatched || nameMatched;
+        });
+      }
+      return ((_a = props.name) != null ? _a : index.value) === modelValue;
+    });
+    const onClick = (event) => {
+      var _a;
+      if (!active.value) {
+        parent.setActive((_a = props.name) != null ? _a : index.value, route);
+      }
+      emit("click", event);
+    };
+    const renderIcon = () => {
+      if (slots.icon) {
+        return slots.icon({
+          active: active.value
+        });
+      }
+      if (props.icon) {
+        return _createVNode(Icon, {
+          "name": props.icon,
+          "classPrefix": props.iconPrefix
+        }, null);
+      }
+    };
+    return () => {
+      var _a;
+      const {
+        dot,
+        badge
+      } = props;
+      const {
+        activeColor,
+        inactiveColor
+      } = parent.props;
+      const color = active.value ? activeColor : inactiveColor;
+      return _createVNode("div", {
+        "role": "tab",
+        "class": bem({
+          active: active.value
+        }),
+        "style": {
+          color
+        },
+        "tabindex": 0,
+        "aria-selected": active.value,
+        "onClick": onClick
+      }, [_createVNode(Badge, _mergeProps({
+        "dot": dot,
+        "class": bem("icon", {
+          active: active.value
+        }),
+        "content": badge
+      }, props.badgeProps), {
+        default: renderIcon
+      }), _createVNode("div", {
+        "class": bem("text")
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots, {
+        active: active.value
+      })])]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/tabbar-item/index.css

@@ -0,0 +1 @@
+:root{--zt-tabbar-item-font-size: var(--zt-font-size-sm);--zt-tabbar-item-text-color: var(--zt-gray-a6);--zt-tabbar-item-active-color: var(--zt-primary-color);--zt-tabbar-item-active-background: var(--zt-background-2);--zt-tabbar-item-margin: 8px auto 6px;--zt-tabbar-item-icon-size: 24px;--zt-tabbar-item-icon-box-shadow: -4px -4px 8px 0 #ffffff, 4px 4px 8px 0 rgba(45, 75, 115, .1);--zt-tabbar-item-icon-margin-bottom: var(--zt-padding-base);--zt-tabbar-item-box-width: 36px;--zt-tabbar-item-box-height: 36px;--zt-tabbar-item-box-border-radius: var(--zt-radius-lg);--zt-tabbar-item-icon-border: 0;--zt-tabbar-item-text-padding-top: 4px;--zt-tabbar-item-text-height: 12px;--zt-tabbar-item-icon-background: linear-gradient(135deg, #f0f0f0 0%, #ffffff 100%)}.zt-tabbar-item{color:var(--zt-tabbar-item-text-color);margin:var(--zt-tabbar-item-margin);-webkit-text-size-adjust:100%;cursor:pointer;-webkit-user-select:none;user-select:none}.zt-tabbar-item__icon{font-size:var(--zt-tabbar-item-icon-size);border:var(--zt-tabbar-item-icon-border);display:flex;justify-content:center;align-items:center;width:var(--zt-tabbar-item-box-width);height:var(--zt-tabbar-item-box-height);box-shadow:var(--zt-tabbar-item-icon-box-shadow);background:var(--zt-tabbar-item-icon-background);border-radius:var(--zt-tabbar-item-box-border-radius)}.zt-tabbar-item__icon--active{border:var(--zt-tabbar-item-icon-border);background:rgba(45,75,115,.02);box-shadow:inset 4px 4px 8px rgba(45,75,115,.1)}.zt-tabbar-item__text{font-size:var(--zt-tabbar-item-font-size);padding-top:var(--zt-tabbar-item-text-padding-top);transform:scale(.83333);text-align:center;height:var(--zt-tabbar-item-text-height);line-height:var(--zt-tabbar-item-text-height)}.zt-tabbar-item--active{color:var(--zt-tabbar-item-active-color);background-color:var(--zt-tabbar-item-active-background);font-weight:var(--zt-font-bold)}.zt-theme-dark{--zt-tabbar-item-text-color: var(--zt-gray-default);--zt-tabbar-item-active-background: linear-gradient(135deg, #0a1420 0%, #1d2b3d 100%);--zt-tabbar-item-icon-border: 1px solid rgba(151, 151, 151, .12);--zt-tabbar-item-icon-box-shadow: -4px -4px 8px 0 rgba(255, 255, 255, .12), 4px 4px 8px 0 rgba(0, 12, 24, .8);--zt-tabbar-item-icon-background: linear-gradient(135deg, #121d2a 0%, #1d2c3d 100%)}

package/es/tabbar-item/index.d.ts

@@ -0,0 +1,35 @@
+export declare const TabbarItem: import("../utils").WithInstall<import("vue").DefineComponent<{
+    to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    icon: StringConstructor;
+    name: (NumberConstructor | StringConstructor)[];
+    badge: (NumberConstructor | StringConstructor)[];
+    badgeProps: import("vue").PropType<Partial<import("..").BadgeProps>>;
+    iconPrefix: StringConstructor;
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    icon: StringConstructor;
+    name: (NumberConstructor | StringConstructor)[];
+    badge: (NumberConstructor | StringConstructor)[];
+    badgeProps: import("vue").PropType<Partial<import("..").BadgeProps>>;
+    iconPrefix: StringConstructor;
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    replace: boolean;
+    dot: boolean;
+}>>;
+export default TabbarItem;
+export type { TabbarItemProps } from './TabbarItem';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtTabbarItem: typeof TabbarItem;
+    }
+}

package/es/tabbar-item/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _TabbarItem from "./TabbarItem.mjs";
+const TabbarItem = withInstall(_TabbarItem);
+var stdin_default = TabbarItem;
+export {
+  TabbarItem,
+  stdin_default as default
+};

package/es/tabbar-item/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/tabbar-item/style/index.mjs

@@ -0,0 +1,5 @@
+import "../../style/base.css";
+import "../../badge/index.css";
+import "../../icon/index.css";
+import "../../tabbar/index.css";
+import "../index.css";

package/es/tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
-import { PropType, InjectionKey, ExtractPropTypes } from 'vue';
-import { Interceptor } from '../utils';
+import type { PropType, InjectionKey, ExtractPropTypes } from 'vue';
+import type { Interceptor } from '../utils';
 import type { TabsProvide, TabsType } from './types';
 declare const tabsProps: {
     type: {
@@ -88,7 +88,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     titleActiveColor: StringConstructor;
     titleInactiveColor: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "change" | "rendered" | "clickTab" | "update:active")[], "scroll" | "change" | "rendered" | "clickTab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "scroll" | "rendered" | "clickTab" | "update:active")[], "change" | "scroll" | "rendered" | "clickTab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     type: {
         type: PropType<TabsType>;
         default: TabsType;
@@ -138,12 +138,12 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:active"?: ((...args: any[]) => any) | undefined;
 }, {
     type: TabsType;
-    ellipsis: boolean;
-    sticky: boolean;
     border: boolean;
-    active: string | number;
     duration: string | number;
     lazyRender: boolean;
+    ellipsis: boolean;
+    sticky: boolean;
+    active: string | number;
     offsetTop: string | number;
     shrink: boolean;
     animated: boolean;

package/es/tabs/Tabs.mjs

@@ -60,7 +60,9 @@ var stdin_default = defineComponent({
       inited: false,
       position: "",
       lineStyle: {},
-      currentIndex: -1
+      currentIndex: -1,
+      showLeftOverlay: false,
+      showRightOverlay: false
     });
     const scrollable = computed(() => children.length > props.swipeThreshold || !props.ellipsis || props.shrink);
     const navStyle = computed(() => ({
@@ -215,6 +217,15 @@ var stdin_default = defineComponent({
         setCurrentIndex(index);
       }
     };
+    const hasScrollToEnd = (element) => Math.floor(element.scrollWidth - element.clientWidth - element.scrollLeft) > 0;
+    const onScrollHeader = (event) => {
+      const target = event.target;
+      if (!target) {
+        return;
+      }
+      state.showLeftOverlay = Math.floor(target.scrollLeft) > 0;
+      state.showRightOverlay = hasScrollToEnd(target);
+    };
     const renderNav = () => children.map((item, index) => _createVNode(TabsTitle, _mergeProps({
       "key": item.id,
       "id": `${id}-${index}`,
@@ -241,6 +252,20 @@ var stdin_default = defineComponent({
         }, null);
       }
     };
+    const renderOverlayLeft = () => {
+      if (state.showLeftOverlay) {
+        return _createVNode("div", {
+          "class": bem("overlay-left")
+        }, null);
+      }
+    };
+    const renderOverlayRight = () => {
+      if (state.showRightOverlay) {
+        return _createVNode("div", {
+          "class": bem("overlay-right")
+        }, null);
+      }
+    };
     const renderHeader = () => {
       var _a, _b;
       const {
@@ -260,8 +285,9 @@ var stdin_default = defineComponent({
           complete: scrollable.value
         }]),
         "style": navStyle.value,
-        "aria-orientation": "horizontal"
-      }, [(_a = slots["nav-left"]) == null ? void 0 : _a.call(slots), renderNav(), renderLine(), (_b = slots["nav-right"]) == null ? void 0 : _b.call(slots)])]);
+        "aria-orientation": "horizontal",
+        "onScroll": onScrollHeader
+      }, [(_a = slots["nav-left"]) == null ? void 0 : _a.call(slots), renderNav(), renderLine(), (_b = slots["nav-right"]) == null ? void 0 : _b.call(slots)]), scrollable.value ? renderOverlayLeft() : null, scrollable.value ? renderOverlayRight() : null]);
     };
     watch([() => props.color, windowWidth], setLine);
     watch(() => props.active, (value) => {
@@ -293,6 +319,10 @@ var stdin_default = defineComponent({
           tabHeight = useRect(wrapRef.value).height;
         }
         scrollIntoView(true);
+        if (navRef.value && scrollable.value) {
+          state.showLeftOverlay = Math.floor(navRef.value.scrollLeft) > 0;
+          state.showRightOverlay = hasScrollToEnd(navRef.value);
+        }
       });
     };
     const onRendered = (name2, title) => emit("rendered", name2, title);
@@ -304,7 +334,8 @@ var stdin_default = defineComponent({
     onPopupReopen(setLine);
     onMountedOrActivated(init);
     useEventListener("scroll", onScroll, {
-      target: scroller
+      target: scroller,
+      passive: true
     });
     linkChildren({
       id,

package/es/tabs/TabsTitle.d.ts

@@ -16,7 +16,11 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    maxWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: StringConstructor;
     dot: BooleanConstructor;
     type: StringConstructor;
@@ -34,12 +38,17 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    maxWidth: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>, {
     dot: boolean;
     disabled: boolean;
-    scrollable: boolean;
     shrink: boolean;
     isActive: boolean;
+    scrollable: boolean;
     showZeroBadge: boolean;
+    maxWidth: string;
 }>;
 export default _default;

package/es/tabs/TabsTitle.mjs

@@ -19,7 +19,11 @@ var stdin_default = defineComponent({
     scrollable: Boolean,
     activeColor: String,
     inactiveColor: String,
-    showZeroBadge: truthProp
+    showZeroBadge: truthProp,
+    maxWidth: {
+      type: String,
+      default: "144px"
+    }
   },
   setup(props, {
     slots
@@ -32,7 +36,8 @@ var stdin_default = defineComponent({
         disabled,
         isActive,
         activeColor,
-        inactiveColor
+        inactiveColor,
+        maxWidth
       } = props;
       const isCard = type === "card";
       if (color && isCard) {
@@ -49,6 +54,7 @@ var stdin_default = defineComponent({
       if (titleColor) {
         style2.color = titleColor;
       }
+      style2.maxWidth = maxWidth;
       return style2;
     });
     const renderText = () => {

package/es/tabs/index.css

@@ -1 +1 @@
-body{--zt-tab-text-color: var(--zt-gray-7);--zt-tab-active-text-color: var(--zt-text-color);--zt-tab-disabled-text-color: var(--zt-text-color-3);--zt-tab-font-size: var(--zt-font-size-md);--zt-tab-active-font-size: var(--zt-font-size-lg);--zt-tab-disabled-font-size: var(--zt-font-size-md);--zt-tab-line-height: var(--zt-line-height-md);--zt-tabs-default-color: var(--zt-primary-color);--zt-tabs-line-height: 44px;--zt-tabs-card-height: 30px;--zt-tabs-nav-background: var(--zt-background);--zt-tabs-bottom-bar-width: 12px;--zt-tabs-bottom-bar-height: 4px;--zt-tabs-bottom-bar-color: var(--zt-primary-color);--zt-tabs-bottom-bar-radius: 2px}.zt-tab{position:relative;display:flex;flex:1;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--zt-padding-base);color:var(--zt-tab-text-color);font-size:var(--zt-tab-font-size);line-height:var(--zt-tab-line-height);cursor:pointer}.zt-tab--active{color:var(--zt-tab-active-text-color);font-weight:var(--zt-font-bold);font-size:var(--zt-tab-active-font-size)}.zt-tab--disabled{color:var(--zt-tab-disabled-text-color);cursor:not-allowed;font-size:var(--zt-tab-disabled-font-size)}.zt-tab--grow{flex:1 0 auto;padding:0 var(--zt-padding-sm)}.zt-tab--shrink{flex:none;padding:0 var(--zt-padding-xs)}.zt-tab--card{color:var(--zt-tabs-default-color);border-right:var(--zt-border-width) solid var(--zt-tabs-default-color)}.zt-tab--card:last-child{border-right:none}.zt-tab--card.zt-tab--active{color:var(--zt-white);background-color:var(--zt-tabs-default-color)}.zt-tab--card--disabled{color:var(--zt-tab-disabled-text-color)}.zt-tab__text--ellipsis{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.zt-tabs{position:relative}.zt-tabs__wrap{overflow:hidden}.zt-tabs__wrap--page-top{position:fixed}.zt-tabs__wrap--content-bottom{top:auto;bottom:0}.zt-tabs__nav{position:relative;display:flex;background:var(--zt-tabs-nav-background);-webkit-user-select:none;user-select:none}.zt-tabs__nav--complete{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.zt-tabs__nav--complete::-webkit-scrollbar{display:none}.zt-tabs__nav--line{box-sizing:content-box;height:100%;padding-bottom:15px}.zt-tabs__nav--line.zt-tabs__nav--shrink,.zt-tabs__nav--line.zt-tabs__nav--complete{padding-right:var(--zt-padding-xs);padding-left:var(--zt-padding-xs)}.zt-tabs__nav--card{box-sizing:border-box;height:var(--zt-tabs-card-height);margin:0 var(--zt-padding-md);border:var(--zt-border-width) solid var(--zt-tabs-default-color);border-radius:var(--zt-border-radius-sm)}.zt-tabs__nav--card.zt-tabs__nav--shrink{display:inline-flex}.zt-tabs__line{position:absolute;bottom:15px;left:0;z-index:1;width:var(--zt-tabs-bottom-bar-width);height:var(--zt-tabs-bottom-bar-height);background:var(--zt-tabs-bottom-bar-color);border-radius:var(--zt-tabs-bottom-bar-radius)}.zt-tabs__track{position:relative;display:flex;width:100%;height:100%;will-change:left}.zt-tabs__content--animated{overflow:hidden}.zt-tabs--line .zt-tabs__wrap{height:var(--zt-tabs-line-height)}.zt-tabs--card>.zt-tabs__wrap{height:var(--zt-tabs-card-height)}
+:root{--zt-tab-active-text-color: var(--zt-text-color);--zt-tab-disabled-text-color: var(--zt-text-color-3);--zt-tab-font-size: var(--zt-font-size-md);--zt-tab-active-font-size: var(--zt-font-size-lg);--zt-tab-active-opacity: .2;--zt-tab-disabled-font-size: var(--zt-font-size-md);--zt-tab-line-height: var(--zt-line-height-md);--zt-tabs-default-color: var(--zt-primary-color);--zt-tabs-line-height: 44px;--zt-tabs-line-bottom: 16px;--zt-tabs-card-height: 32px;--zt-tabs-bottom-bar-width: 12px;--zt-tabs-bottom-bar-height: 4px;--zt-tabs-bottom-bar-color: var(--zt-primary-color);--zt-tabs-bottom-bar-radius: 2px;--zt-tabs-nav-background: var(--zt-background);--zt-tab-text-color: var(--zt-gray-a6);--zt-tabs-overlay-left-background: linear-gradient(90deg, #ffffff 0%, rgba(245, 250, 255, 0) 100%);--zt-tabs-overlay-right-background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%)}.zt-tab{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--zt-padding-md);color:var(--zt-tab-text-color);font-size:var(--zt-tab-font-size);line-height:var(--zt-tab-line-height);cursor:pointer}.zt-tab--active{color:var(--zt-tab-active-text-color);font-size:var(--zt-tab-active-font-size);font-weight:var(--zt-font-bold)}.zt-tab--active:active{opacity:var(--zt-tab-active-opacity)}.zt-tab--disabled{color:var(--zt-tab-disabled-text-color);cursor:not-allowed;font-size:var(--zt-tab-disabled-font-size)}.zt-tab--grow{flex:1 0 auto;padding:0 var(--zt-padding-sm)}.zt-tab--shrink{flex:none;padding:0 var(--zt-padding-xs)}.zt-tab--card{color:var(--zt-tabs-default-color)}.zt-tab--card.zt-tab--active{color:var(--zt-white);background-color:var(--zt-tabs-default-color)}.zt-tab--card--disabled{color:var(--zt-tab-disabled-text-color)}.zt-tab__text--ellipsis{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.zt-tab__text-wrapper,.zt-tabs{position:relative}.zt-tabs__wrap{overflow:hidden;position:relative}.zt-tabs__wrap--page-top{position:fixed}.zt-tabs__wrap--content-bottom{top:auto;bottom:0}.zt-tabs__overlay-left,.zt-tabs__overlay-right{position:absolute;top:0;width:var(--zt-tabs-line-height);height:var(--zt-tabs-line-height);pointer-events:none}.zt-tabs__overlay-left{left:0;background:var(--zt-tabs-overlay-left-background)}.zt-tabs__overlay-right{right:0;background:var(--zt-tabs-overlay-right-background)}.zt-tabs__nav{position:relative;display:flex;justify-content:flex-start;background-color:var(--zt-tabs-nav-background);-webkit-user-select:none;user-select:none}.zt-tabs__nav--complete{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.zt-tabs__nav--complete::-webkit-scrollbar{display:none}.zt-tabs__nav--line{box-sizing:content-box;height:100%;padding-bottom:var(--zt-tabs-line-bottom)}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tab,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tab{flex:1 0 auto;padding:0 var(--zt-padding-sm)}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tabs__nav,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tabs__nav{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tabs__nav::-webkit-scrollbar,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tabs__nav::-webkit-scrollbar{display:none}.zt-tabs__nav--card.zt-tabs__nav--shrink{display:inline-flex}.zt-tabs__line{position:absolute;bottom:var(--zt-tabs-line-bottom);left:0;z-index:1;width:var(--zt-tabs-bottom-bar-width);height:var(--zt-tabs-bottom-bar-height);background:var(--zt-tabs-bottom-bar-color);border-radius:var(--zt-tabs-bottom-bar-radius)}.zt-tabs__track{position:relative;display:flex;width:100%;height:100%;will-change:left}.zt-tabs__content--animated{overflow:hidden}.zt-tabs--line .zt-tabs__wrap{height:var(--zt-tabs-line-height)}.zt-tabs--card>.zt-tabs__wrap{height:var(--zt-tabs-card-height)}.zt-theme-dark{--zt-tabs-nav-background: var(--zt-background-2);--zt-tabs-overlay-left-background: linear-gradient(90deg, #0f1923 0%, rgba(15, 25, 35, 0) 100%);--zt-tabs-overlay-right-background: linear-gradient(90deg, rgba(15, 25, 35, 0) 3%, #0f1923 100%)}

package/es/tabs/index.d.ts

@@ -41,7 +41,7 @@ export declare const Tabs: import("../utils").WithInstall<import("vue").DefineCo
     };
     titleActiveColor: StringConstructor;
     titleInactiveColor: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "change" | "rendered" | "clickTab" | "update:active")[], "scroll" | "change" | "rendered" | "clickTab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "scroll" | "rendered" | "clickTab" | "update:active")[], "change" | "scroll" | "rendered" | "clickTab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
         type: import("vue").PropType<import("./types").TabsType>;
         default: import("./types").TabsType;
@@ -91,12 +91,12 @@ export declare const Tabs: import("../utils").WithInstall<import("vue").DefineCo
     "onUpdate:active"?: ((...args: any[]) => any) | undefined;
 }, {
     type: import("./types").TabsType;
-    ellipsis: boolean;
-    sticky: boolean;
     border: boolean;
-    active: string | number;
     duration: string | number;
     lazyRender: boolean;
+    ellipsis: boolean;
+    sticky: boolean;
+    active: string | number;
     offsetTop: string | number;
     shrink: boolean;
     animated: boolean;

package/es/tag/Tag.d.ts

@@ -0,0 +1,102 @@
+import type { ExtractPropTypes } from 'vue';
+export declare type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+export declare const tagProps: {
+    mark: BooleanConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    type: {
+        type: import("vue").PropType<TagType>;
+        default: TagType;
+    };
+    color: StringConstructor;
+    plain: BooleanConstructor;
+    round: BooleanConstructor;
+    textColor: StringConstructor;
+    borderColor: StringConstructor;
+    closeable: BooleanConstructor;
+    icon: StringConstructor;
+    iconPrefix: StringConstructor;
+    iconColor: StringConstructor;
+    badge: BooleanConstructor;
+    badgeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    badgeHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+};
+export declare type TagProps = ExtractPropTypes<typeof tagProps>;
+declare const _default: import("vue").DefineComponent<{
+    mark: BooleanConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    type: {
+        type: import("vue").PropType<TagType>;
+        default: TagType;
+    };
+    color: StringConstructor;
+    plain: BooleanConstructor;
+    round: BooleanConstructor;
+    textColor: StringConstructor;
+    borderColor: StringConstructor;
+    closeable: BooleanConstructor;
+    icon: StringConstructor;
+    iconPrefix: StringConstructor;
+    iconColor: StringConstructor;
+    badge: BooleanConstructor;
+    badgeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    badgeHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    mark: BooleanConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    type: {
+        type: import("vue").PropType<TagType>;
+        default: TagType;
+    };
+    color: StringConstructor;
+    plain: BooleanConstructor;
+    round: BooleanConstructor;
+    textColor: StringConstructor;
+    borderColor: StringConstructor;
+    closeable: BooleanConstructor;
+    icon: StringConstructor;
+    iconPrefix: StringConstructor;
+    iconColor: StringConstructor;
+    badge: BooleanConstructor;
+    badgeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    badgeHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    type: TagType;
+    badge: boolean;
+    mark: boolean;
+    show: boolean;
+    round: boolean;
+    closeable: boolean;
+    plain: boolean;
+    badgeWidth: number;
+    badgeHeight: number;
+}>;
+export default _default;