zartui 3.0.2 → 3.0.3

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,6 +16,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    maxWidth: {
+        type: StringConstructor;
+        default: string;
+    };
 }, () => 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<{
     id: StringConstructor;
     dot: BooleanConstructor;
@@ -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-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-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-tab{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--zt-padding-md);color:var(--zt-gray-a6);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:linear-gradient(90deg,#ffffff 0%,rgba(245,250,255,0) 100%)}.zt-tabs__overlay-right{right:0;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,#ffffff 100%)}.zt-tabs__nav{position:relative;display:flex;justify-content:flex-start;background-color:var(--zt-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)}

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;

package/es/tag/Tag.mjs

@@ -0,0 +1,101 @@
+import { createVNode as _createVNode } from "vue";
+import { Transition, defineComponent } from "vue";
+import { truthProp, makeStringProp, createNamespace, HAPTICS_FEEDBACK, makeNumberProp } from "../utils/index.mjs";
+import { Icon } from "../icon/index.mjs";
+import { parseNumber } from "../utils/parse.mjs";
+const [name, bem] = createNamespace("tag");
+const tagProps = {
+  mark: Boolean,
+  show: truthProp,
+  type: makeStringProp("default"),
+  color: String,
+  plain: Boolean,
+  round: Boolean,
+  textColor: String,
+  borderColor: String,
+  closeable: Boolean,
+  icon: String,
+  iconPrefix: String,
+  iconColor: String,
+  badge: Boolean,
+  badgeWidth: makeNumberProp(50),
+  badgeHeight: makeNumberProp(50)
+};
+var stdin_default = defineComponent({
+  name,
+  props: tagProps,
+  emits: ["close"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const onClose = (event) => {
+      event.stopPropagation();
+      emit("close", event);
+    };
+    const getStyle = () => {
+      const style = {
+        color: props.textColor,
+        background: props.color,
+        borderColor: props.borderColor
+      };
+      if (props.badge) {
+        const radian = Math.atan(props.badgeHeight / props.badgeWidth);
+        const angle = radian * 180 / Math.PI;
+        style.transform = `rotate(${angle}deg)`;
+        style.transformOrigin = "left bottom";
+        const width = Math.sqrt(props.badgeWidth * props.badgeWidth + props.badgeHeight * props.badgeHeight);
+        const originHeight = parseNumber(getComputedStyle(document.body).getPropertyValue("--zt-tag-line-height"), 20);
+        style.top = -originHeight + "px";
+        style.right = props.badgeWidth - width + "px";
+        style.width = width + "px";
+        style.height = originHeight + "px";
+      }
+      return style;
+    };
+    const renderTag = () => {
+      var _a;
+      const {
+        type,
+        mark,
+        plain,
+        round,
+        badge,
+        closeable
+      } = props;
+      const classes = {
+        mark,
+        plain,
+        round,
+        badge,
+        closeable
+      };
+      const CloseIcon = closeable && _createVNode(Icon, {
+        "name": "clear",
+        "class": [bem("close"), HAPTICS_FEEDBACK],
+        "onClick": onClose
+      }, null);
+      const LeftIcon = props.icon && _createVNode(Icon, {
+        "name": props.icon,
+        "class": bem("icon"),
+        "classPrefix": props.iconPrefix,
+        "style": {
+          color: props.iconColor
+        }
+      }, null);
+      return _createVNode("span", {
+        "style": getStyle(),
+        "class": bem([classes, type])
+      }, [LeftIcon, (_a = slots.default) == null ? void 0 : _a.call(slots), CloseIcon]);
+    };
+    return () => _createVNode(Transition, {
+      "name": props.closeable ? "zt-fade" : void 0
+    }, {
+      default: () => [props.show ? renderTag() : null]
+    });
+  }
+});
+export {
+  stdin_default as default,
+  tagProps
+};

package/es/tag/index.css

@@ -0,0 +1 @@
+:root{--zt-tag-padding: 0 var(--zt-padding-sm);--zt-tag-text-color: var(--zt-white);--zt-tag-font-size: var(--zt-font-size-sm);--zt-tag-radius: 2px;--zt-tag-line-height: 20px;--zt-tag-icon-gap: 2px;--zt-tag-icon-size: 16px;--zt-tag-close-icon-size: 20px;--zt-tag-round-radius: 12px;--zt-tag-round-line-height: 24px;--zt-tag-closeable-font-size: var(--zt-font-size-md);--zt-tag-closeable-line-height: 28px;--zt-tag-closeable-radius: 14px;--zt-tag-danger-color: var(--zt-danger-color);--zt-tag-primary-color: var(--zt-primary-color);--zt-tag-success-color: var(--zt-success-color);--zt-tag-warning-color: var(--zt-warning-color);--zt-tag-default-color: var(--zt-gray-a08);--zt-tag-plain-background: var(--zt-background-2)}.zt-tag{position:relative;display:inline-flex;align-items:center;padding:var(--zt-tag-padding);color:var(--zt-tag-text-color);font-size:var(--zt-tag-font-size);line-height:var(--zt-tag-line-height);border-radius:var(--zt-tag-radius);overflow:hidden}.zt-tag__icon{font-size:var(--zt-tag-icon-size);margin-right:var(--zt-tag-icon-gap)}.zt-tag--default{background:var(--zt-tag-default-color)}.zt-tag--default.zt-tag--plain{color:var(--zt-tag-default-color)}.zt-tag--danger{background:var(--zt-tag-danger-color)}.zt-tag--danger.zt-tag--plain{color:var(--zt-tag-danger-color)}.zt-tag--primary{background:var(--zt-tag-primary-color)}.zt-tag--primary.zt-tag--plain{color:var(--zt-tag-primary-color)}.zt-tag--success{background:var(--zt-tag-success-color)}.zt-tag--success.zt-tag--plain{color:var(--zt-tag-success-color)}.zt-tag--warning{background:var(--zt-tag-warning-color)}.zt-tag--warning.zt-tag--plain{color:var(--zt-tag-warning-color)}.zt-tag--plain{background:var(--zt-tag-plain-background);border-color:currentColor}.zt-tag--plain:before{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-color:inherit;border-radius:inherit;content:"";pointer-events:none}.zt-tag--mark{border-radius:0 var(--zt-tag-round-radius) var(--zt-tag-round-radius) 0}.zt-tag--mark:after{display:block;width:2px;content:""}.zt-tag--round{border-radius:var(--zt-tag-round-radius);line-height:var(--zt-tag-round-line-height)}.zt-tag__close{font-size:var(--zt-tag-close-icon-size);margin-left:2px}.zt-tag--closeable{font-size:var(--zt-tag-closeable-font-size);line-height:var(--zt-tag-closeable-line-height);background:var(--zt-text-color-a6);border-radius:var(--zt-tag-closeable-radius)}.zt-tag--badge{position:absolute;text-align:center;display:block;box-sizing:border-box}

package/es/tag/index.d.ts

@@ -0,0 +1,77 @@
+export declare const Tag: import("../utils").WithInstall<import("vue").DefineComponent<{
+    mark: BooleanConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    type: {
+        type: import("vue").PropType<import("./Tag").TagType>;
+        default: import("./Tag").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<import("vue").ExtractPropTypes<{
+    mark: BooleanConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    type: {
+        type: import("vue").PropType<import("./Tag").TagType>;
+        default: import("./Tag").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: import("./Tag").TagType;
+    badge: boolean;
+    mark: boolean;
+    show: boolean;
+    round: boolean;
+    closeable: boolean;
+    plain: boolean;
+    badgeWidth: number;
+    badgeHeight: number;
+}>>;
+export default Tag;
+export { tagProps } from './Tag';
+export type { TagType, TagProps } from './Tag';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtTag: typeof Tag;
+    }
+}

package/es/tag/index.mjs

@@ -0,0 +1,10 @@
+import { withInstall } from "../utils/index.mjs";
+import _Tag from "./Tag.mjs";
+const Tag = withInstall(_Tag);
+var stdin_default = Tag;
+import { tagProps } from "./Tag.mjs";
+export {
+  Tag,
+  stdin_default as default,
+  tagProps
+};

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

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

package/es/tag/style/index.mjs

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

package/es/time-picker/Arrow.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _default;

package/es/time-picker/Arrow.mjs

@@ -0,0 +1,27 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+var stdin_default = defineComponent({
+  name: "Arrow",
+  emits: ["click"],
+  setup(_, {
+    emit
+  }) {
+    const onClick = () => {
+      emit("click");
+    };
+    return () => _createVNode("svg", {
+      "xmlns": "http://www.w3.org/2000/svg",
+      "viewBox": "0 0 12 6",
+      "onClick": onClick
+    }, [_createVNode("path", {
+      "d": "M34.4,12.2 L39.4,8.45 C39.7555556,8.18333333 40.2444444,8.18333333 40.6,8.45 L45.6,12.2 C46.0418278,12.5313708 46.1313708,13.1581722 45.8,13.6 C45.6111456,13.8518058 45.3147573,14 45,14 L35,14 C34.4477153,14 34,13.5522847 34,13 C34,12.6852427 34.1481942,12.3888544 34.4,12.2 Z",
+      "transform": "translate(-34 -8)",
+      "fill": "#2D4B73",
+      "fill-rule": "nonzero",
+      "opacity": ".2"
+    }, null)]);
+  }
+});
+export {
+  stdin_default as default
+};