zartui 3.0.6 → 3.0.8

package/lib/tabs/index.css

@@ -1 +1 @@
-: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%)}
+: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-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/lib/tabs/index.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/tag/Tag.d.ts

@@ -17,6 +17,7 @@ export declare const tagProps: {
     borderColor: StringConstructor;
     closeable: BooleanConstructor;
     icon: StringConstructor;
+    image: StringConstructor;
     iconPrefix: StringConstructor;
     iconColor: StringConstructor;
     badge: BooleanConstructor;
@@ -28,6 +29,11 @@ export declare const tagProps: {
         type: NumberConstructor;
         default: number;
     };
+    stamp: BooleanConstructor;
+    stampDiameter: {
+        type: NumberConstructor;
+        default: number;
+    };
 };
 export declare type TagProps = ExtractPropTypes<typeof tagProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -47,6 +53,7 @@ declare const _default: import("vue").DefineComponent<{
     borderColor: StringConstructor;
     closeable: BooleanConstructor;
     icon: StringConstructor;
+    image: StringConstructor;
     iconPrefix: StringConstructor;
     iconColor: StringConstructor;
     badge: BooleanConstructor;
@@ -58,6 +65,11 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    stamp: BooleanConstructor;
+    stampDiameter: {
+        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: {
@@ -75,6 +87,7 @@ declare const _default: import("vue").DefineComponent<{
     borderColor: StringConstructor;
     closeable: BooleanConstructor;
     icon: StringConstructor;
+    image: StringConstructor;
     iconPrefix: StringConstructor;
     iconColor: StringConstructor;
     badge: BooleanConstructor;
@@ -86,17 +99,24 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    stamp: BooleanConstructor;
+    stampDiameter: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
+    mark: boolean;
     type: TagType;
     badge: boolean;
-    mark: boolean;
     show: boolean;
     round: boolean;
     closeable: boolean;
     plain: boolean;
     badgeWidth: number;
     badgeHeight: number;
+    stamp: boolean;
+    stampDiameter: number;
 }>;
 export default _default;

package/lib/tag/Tag.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name2 in all)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var stdin_exports = {};
 __export(stdin_exports, {
@@ -26,6 +36,7 @@ var import_vue2 = require("vue");
 var import_utils = require("../utils");
 var import_icon = require("../icon");
 var import_parse = require("../utils/parse");
+var import_image = __toESM(require("../image"));
 const [name, bem] = (0, import_utils.createNamespace)("tag");
 const tagProps = {
   mark: Boolean,
@@ -38,11 +49,14 @@ const tagProps = {
   borderColor: String,
   closeable: Boolean,
   icon: String,
+  image: String,
   iconPrefix: String,
   iconColor: String,
   badge: Boolean,
   badgeWidth: (0, import_utils.makeNumberProp)(50),
-  badgeHeight: (0, import_utils.makeNumberProp)(50)
+  badgeHeight: (0, import_utils.makeNumberProp)(50),
+  stamp: Boolean,
+  stampDiameter: (0, import_utils.makeNumberProp)(60)
 };
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
@@ -98,23 +112,72 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "class": [bem("close"), import_utils.HAPTICS_FEEDBACK],
         "onClick": onClose
       }, null);
-      const LeftIcon = props.icon && (0, import_vue.createVNode)(import_icon.Icon, {
-        "name": props.icon,
-        "class": bem("icon"),
-        "classPrefix": props.iconPrefix,
-        "style": {
-          color: props.iconColor
+      const LeftIcon = () => {
+        if (props.image) {
+          return (0, import_vue.createVNode)(import_image.default, {
+            "class": bem("image"),
+            "src": props.image
+          }, null);
+        } else if (props.icon) {
+          return (0, import_vue.createVNode)(import_icon.Icon, {
+            "name": props.icon,
+            "class": bem("icon"),
+            "classPrefix": props.iconPrefix,
+            "style": {
+              color: props.iconColor
+            }
+          }, null);
         }
-      }, null);
+      };
       return (0, import_vue.createVNode)("span", {
         "style": getStyle(),
         "class": bem([classes, type])
-      }, [LeftIcon, (_a = slots.default) == null ? void 0 : _a.call(slots), CloseIcon]);
+      }, [LeftIcon(), (_a = slots.default) == null ? void 0 : _a.call(slots), CloseIcon]);
+    };
+    const getStampStyle = () => ({
+      color: props.color || props.textColor,
+      width: props.stampDiameter + "px",
+      height: props.stampDiameter + "px"
+    });
+    const renderStampTag = () => {
+      var _a;
+      const {
+        type
+      } = props;
+      return (0, import_vue.createVNode)("svg", {
+        "style": getStampStyle(),
+        "class": bem("stamp", [type]),
+        "viewBox": "0 0 60 60",
+        "xmlns": "http://www.w3.org/2000/svg"
+      }, [(0, import_vue.createVNode)("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [(0, import_vue.createVNode)("g", {
+        "transform": "translate(-334.000000, -500.000000)",
+        "fill": "currentColor"
+      }, [(0, import_vue.createVNode)("g", {
+        "transform": "translate(16.000000, 496.000000)"
+      }, [(0, import_vue.createVNode)("g", {
+        "transform": "translate(318.000000, 4.000000)"
+      }, [(0, import_vue.createVNode)("path", {
+        "d": "M30,54 C38.0297784,54 45.1385247,50.0565924 49.4952837,44.0007323 L51.9121045,44.0009744 C47.2917236,51.217056 39.20442,56 30,56 C20.79558,56 12.7082764,51.217056 8.08789552,44.0009744 L10.5047163,44.0007323 C14.8614753,50.0565924 21.9702216,54 30,54 Z M24.4914569,48.5 L25.1164192,49.7519142 L26.5,49.9601927 L25.5057346,50.9266793 L25.7498261,52.3 L24.5100062,51.6450994 L23.2778261,52.2855681 L23.5057346,50.915003 L22.5,49.9368402 L23.8812192,49.7447029 L24.4914569,48.5 Z M35.4914569,48.5 L36.1164192,49.7519142 L37.5,49.9601927 L36.5057346,50.9266793 L36.7498261,52.3 L35.5100062,51.6450994 L34.2778261,52.2855681 L34.5057346,50.915003 L33.5,49.9368402 L34.8812192,49.7447029 L35.4914569,48.5 Z M30,46 C32.8118899,46 35.4543634,45.274642 37.7505137,44.0008326 L41.3137959,44.0007062 C38.2224755,46.5018817 34.2861899,48 30,48 C25.7138101,48 21.7775245,46.5018817 18.6862041,44.0007062 L22.2494863,44.0008326 C24.5456366,45.274642 27.1881101,46 30,46 Z M16.4914569,44 L17.1164192,45.2519142 L18.5,45.4601927 L17.5057346,46.4266793 L17.7498261,47.8 L16.5100062,47.1450994 L15.2778261,47.7855681 L15.5057346,46.415003 L14.5,45.4368402 L15.8812192,45.2447029 L16.4914569,44 Z M43.4914569,44 L44.1164192,45.2519142 L45.5,45.4601927 L44.5057346,46.4266793 L44.7498261,47.8 L43.5100062,47.1450994 L42.2778261,47.7855681 L42.5057346,46.415003 L41.5,45.4368402 L42.8812192,45.2447029 L43.4914569,44 Z M56,18 C58.209139,18 60,19.790861 60,22 L60,22 L60,38.0000356 C60,40.2091746 58.209139,42.0000356 56,42.0000356 L56,42.0000356 L4,42.0000356 C1.790861,42.0000356 2.705415e-16,40.2091746 0,38.0000356 L0,38.0000356 L0,22 C-2.705415e-16,19.790861 1.790861,18 4,18 L4,18 Z M55,20 L5,20 C3.34314575,20 2,21.3431458 2,23 L2,37 C2,38.6568542 3.34314575,40 5,40 L55,40 C56.6568542,40 58,38.6568542 58,37 L58,23 C58,21.3431458 56.6568542,20 55,20 Z M30,4 C39.2048436,4 47.2924679,8.78338418 51.9127423,16.0000219 L49.4960029,16.0002674 C45.139307,9.94384156 38.0302203,6 30,6 C21.9697797,6 14.860693,9.94384156 10.5039971,16.0002674 L8.08725766,16.0000219 C12.7075321,8.78338418 20.7951564,4 30,4 Z M30,12 C34.2866501,12 38.2233209,13.49844 41.3147917,16.0000995 L37.7525036,16.0002715 C35.4558902,14.7257772 32.8127023,14 30,14 C27.1872977,14 24.5441098,14.7257772 22.2474964,16.0002715 L18.6852083,16.0000995 C21.7766791,13.49844 25.7133499,12 30,12 Z M16.4914569,12 L17.1164192,13.2519142 L18.5,13.4601927 L17.5057346,14.4266793 L17.7498261,15.8 L16.5100062,15.1450994 L15.2778261,15.7855681 L15.5057346,14.415003 L14.5,13.4368402 L15.8812192,13.2447029 L16.4914569,12 Z M43.4914569,12 L44.1164192,13.2519142 L45.5,13.4601927 L44.5057346,14.4266793 L44.7498261,15.8 L43.5100062,15.1450994 L42.2778261,15.7855681 L42.5057346,14.415003 L41.5,13.4368402 L42.8812192,13.2447029 L43.4914569,12 Z M24.4914569,7.5 L25.1164192,8.75191416 L26.5,8.96019274 L25.5057346,9.92667928 L25.7498261,11.3 L24.5100062,10.6450994 L23.2778261,11.2855681 L23.5057346,9.91500302 L22.5,8.93684023 L23.8812192,8.7447029 L24.4914569,7.5 Z M35.4914569,7.5 L36.1164192,8.75191416 L37.5,8.96019274 L36.5057346,9.92667928 L36.7498261,11.3 L35.5100062,10.6450994 L34.2778261,11.2855681 L34.5057346,9.91500302 L33.5,8.93684023 L34.8812192,8.7447029 L35.4914569,7.5 Z",
+        "transform": "translate(30.000000, 30.000000) rotate(35.000000) translate(-30.000000, -30.000000) "
+      }, null)])])])]), (0, import_vue.createVNode)("foreignObject", {
+        "width": "50px",
+        "height": "24px",
+        "x": "5",
+        "y": "19",
+        "transform": "rotate(35, 30, 30)"
+      }, [(0, import_vue.createVNode)("div", {
+        "class": bem("stamp", ["text"])
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])])]);
     };
     return () => (0, import_vue.createVNode)(import_vue2.Transition, {
       "name": props.closeable ? "zt-fade" : void 0
     }, {
-      default: () => [props.show ? renderTag() : null]
+      default: () => [props.stamp && props.show ? renderStampTag() : props.show ? renderTag() : null]
     });
   }
 });

package/lib/tag/index.css

@@ -1 +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}
+:root{--zt-tag-padding: var(--zt-padding-base) 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: 16px;--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: 16px;--zt-tag-badge-padding: 0 var(--zt-padding-sm);--zt-tag-closeable-font-size: var(--zt-font-size-md);--zt-tag-closeable-line-height: 20px;--zt-tag-closeable-radius: 14px;--zt-tag-closeable-background: var(--zt-gray-a6);--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-stamp-diameter: 60px}.zt-tag{position:relative;display:inline-flex;box-sizing:border-box;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;word-break:break-all}.zt-tag__icon{font-size:var(--zt-tag-icon-size);margin-right:var(--zt-tag-icon-gap)}.zt-tag__image{width:var(--zt-tag-icon-size);height: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-tag-closeable-background);border-radius:var(--zt-tag-closeable-radius)}.zt-tag--badge{position:absolute;text-align:center;display:block;box-sizing:border-box;padding:var(--zt-tag-badge-padding)}.zt-tag__stamp{width:var(--zt-tag-stamp-diameter);height:var(--zt-tag-stamp-diameter);background:rgba(0,0,0,0);padding:0}.zt-tag__stamp--text{width:50px;height:24px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;text-align:center;font-weight:600}.zt-tag__stamp--default{color:var(--zt-gray-a6)}.zt-tag__stamp--danger{color:var(--zt-tag-danger-color)}.zt-tag__stamp--primary{color:var(--zt-tag-primary-color)}.zt-tag__stamp--success{color:var(--zt-tag-success-color)}.zt-tag__stamp--warning{color:var(--zt-tag-warning-color)}.zt-theme-dark{--zt-tag-closeable-background: rgba(255, 255, 255, .1)}

package/lib/tag/index.d.ts

@@ -15,6 +15,7 @@ export declare const Tag: import("../utils").WithInstall<import("vue").DefineCom
     borderColor: StringConstructor;
     closeable: BooleanConstructor;
     icon: StringConstructor;
+    image: StringConstructor;
     iconPrefix: StringConstructor;
     iconColor: StringConstructor;
     badge: BooleanConstructor;
@@ -26,6 +27,11 @@ export declare const Tag: import("../utils").WithInstall<import("vue").DefineCom
         type: NumberConstructor;
         default: number;
     };
+    stamp: BooleanConstructor;
+    stampDiameter: {
+        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: {
@@ -43,6 +49,7 @@ export declare const Tag: import("../utils").WithInstall<import("vue").DefineCom
     borderColor: StringConstructor;
     closeable: BooleanConstructor;
     icon: StringConstructor;
+    image: StringConstructor;
     iconPrefix: StringConstructor;
     iconColor: StringConstructor;
     badge: BooleanConstructor;
@@ -54,18 +61,25 @@ export declare const Tag: import("../utils").WithInstall<import("vue").DefineCom
         type: NumberConstructor;
         default: number;
     };
+    stamp: BooleanConstructor;
+    stampDiameter: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
+    mark: boolean;
     type: import("./Tag").TagType;
     badge: boolean;
-    mark: boolean;
     show: boolean;
     round: boolean;
     closeable: boolean;
     plain: boolean;
     badgeWidth: number;
     badgeHeight: number;
+    stamp: boolean;
+    stampDiameter: number;
 }>>;
 export default Tag;
 export { tagProps } from './Tag';

package/lib/tag/index.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/tag/style/index.js

@@ -1,4 +1,5 @@
 require("../../style/base.css");
 require("../../badge/index.css");
 require("../../icon/index.css");
+require("../../image/index.css");
 require("../index.css");

package/lib/text-ellipsis/TextEllipsis.d.ts

@@ -0,0 +1,76 @@
+import { type ExtractPropTypes } from 'vue';
+export declare const textEllipsisProps: {
+    rows: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    content: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    expandText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    collapseText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    highlight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+};
+export declare type TextEllipsisProps = ExtractPropTypes<typeof textEllipsisProps>;
+declare const _default: import("vue").DefineComponent<{
+    rows: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    content: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    expandText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    collapseText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    highlight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "clickAction"[], "clickAction", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    rows: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    content: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    expandText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    collapseText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    highlight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>> & {
+    onClickAction?: ((...args: any[]) => any) | undefined;
+}, {
+    content: string;
+    rows: string | number;
+    expandText: string;
+    collapseText: string;
+    highlight: string;
+}>;
+export default _default;

package/lib/text-ellipsis/TextEllipsis.js

@@ -0,0 +1,137 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default,
+  textEllipsisProps: () => textEllipsisProps
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_use = require("@zartui/use");
+var import_utils = require("../utils");
+const [name, bem] = (0, import_utils.createNamespace)("text-ellipsis");
+const textEllipsisProps = {
+  rows: (0, import_utils.makeNumericProp)(1),
+  content: (0, import_utils.makeStringProp)(""),
+  expandText: (0, import_utils.makeStringProp)(""),
+  collapseText: (0, import_utils.makeStringProp)(""),
+  highlight: (0, import_utils.makeStringProp)("")
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: textEllipsisProps,
+  emits: ["clickAction"],
+  setup(props, {
+    emit
+  }) {
+    const text = (0, import_vue2.ref)("");
+    const expanded = (0, import_vue2.ref)(false);
+    const hasAction = (0, import_vue2.ref)(false);
+    const root = (0, import_vue2.ref)();
+    const pxToNum = (value) => {
+      if (!value)
+        return 0;
+      const match = value.match(/^\d*(\.\d*)?/);
+      return match ? Number(match[0]) : 0;
+    };
+    const calcEllipsised = () => {
+      const cloneContainer = () => {
+        if (!root.value)
+          return;
+        const originStyle = window.getComputedStyle(root.value);
+        const container2 = document.createElement("div");
+        const styleNames = Array.prototype.slice.apply(originStyle);
+        styleNames.forEach((name2) => {
+          container2.style.setProperty(name2, originStyle.getPropertyValue(name2));
+        });
+        container2.style.position = "fixed";
+        container2.style.zIndex = "-9999";
+        container2.style.top = "-9999px";
+        container2.style.height = "auto";
+        container2.style.minHeight = "auto";
+        container2.style.maxHeight = "auto";
+        container2.innerText = props.content;
+        document.body.appendChild(container2);
+        return container2;
+      };
+      const calcEllipsisText = (container2, maxHeight2) => {
+        const {
+          content,
+          expandText
+        } = props;
+        const dot = "...";
+        let left = 0;
+        let right = content.length;
+        let res = -1;
+        while (left <= right) {
+          const mid = Math.floor((left + right) / 2);
+          container2.innerText = content.slice(0, mid) + dot + expandText;
+          if (container2.offsetHeight <= maxHeight2) {
+            left = mid + 1;
+            res = mid;
+          } else {
+            right = mid - 1;
+          }
+        }
+        return content.slice(0, res) + dot;
+      };
+      const container = cloneContainer();
+      if (!container)
+        return;
+      const {
+        paddingBottom,
+        paddingTop,
+        lineHeight
+      } = container.style;
+      const maxHeight = (Number(props.rows) + 0.5) * pxToNum(lineHeight) + pxToNum(paddingTop) + pxToNum(paddingBottom);
+      if (maxHeight < container.offsetHeight) {
+        hasAction.value = true;
+        text.value = calcEllipsisText(container, maxHeight);
+      } else {
+        hasAction.value = false;
+        text.value = props.content;
+      }
+      document.body.removeChild(container);
+    };
+    const onClickAction = (event) => {
+      expanded.value = !expanded.value;
+      emit("clickAction", event);
+    };
+    const formatSearchKeyword = (keywords, text2) => {
+      if (!keywords)
+        return text2;
+      const replaceReg = new RegExp(keywords, "ig");
+      const replaceString = `<span style="color: #0091FA; background: rgba(0, 145, 250, 0.1);">${keywords}</span>`;
+      return text2.replace(replaceReg, replaceString);
+    };
+    const renderAction = () => (0, import_vue.createVNode)("span", {
+      "class": bem("action"),
+      "onClick": onClickAction
+    }, [expanded.value ? props.collapseText : props.expandText]);
+    (0, import_vue2.onMounted)(calcEllipsised);
+    (0, import_vue2.watch)(() => [props.content, props.rows], calcEllipsised);
+    (0, import_use.useEventListener)("resize", calcEllipsised);
+    return () => (0, import_vue.createVNode)("div", {
+      "ref": root,
+      "class": bem()
+    }, [(0, import_vue.createVNode)("span", {
+      "innerHTML": formatSearchKeyword(props.highlight, expanded.value ? props.content : text.value)
+    }, null), hasAction.value ? renderAction() : null]);
+  }
+});

package/lib/text-ellipsis/index.css

@@ -0,0 +1 @@
+:root{--zt-text-ellipsis-line-height:calc(200% - 8px);--zt-text-ellipsis-action-color: var(--zt-blue)}.zt-text-ellipsis{line-height:var(--zt-text-ellipsis-line-height);white-space:pre-wrap;word-break:break-all}.zt-text-ellipsis__action{cursor:pointer;color:var(--zt-text-ellipsis-action-color)}.zt-text-ellipsis__action:active{opacity:var(--zt-active-opacity)}

package/lib/text-ellipsis/index.d.ts

@@ -0,0 +1,60 @@
+export declare const TextEllipsis: import("../utils").WithInstall<import("vue").DefineComponent<{
+    rows: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    content: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    expandText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    collapseText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    highlight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "clickAction"[], "clickAction", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    rows: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    content: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    expandText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    collapseText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    highlight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>> & {
+    onClickAction?: ((...args: any[]) => any) | undefined;
+}, {
+    content: string;
+    rows: string | number;
+    expandText: string;
+    collapseText: string;
+    highlight: string;
+}>>;
+export default TextEllipsis;
+export { textEllipsisProps } from './TextEllipsis';
+export type { TextEllipsisProps } from './TextEllipsis';
+export type { TextEllipsisThemeVars } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtTextEllipsis: typeof TextEllipsis;
+    }
+}

package/lib/text-ellipsis/index.js

@@ -0,0 +1,39 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  TextEllipsis: () => TextEllipsis,
+  default: () => stdin_default,
+  textEllipsisProps: () => import_TextEllipsis2.textEllipsisProps
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_utils = require("../utils");
+var import_TextEllipsis = __toESM(require("./TextEllipsis"));
+var import_TextEllipsis2 = require("./TextEllipsis");
+const TextEllipsis = (0, import_utils.withInstall)(import_TextEllipsis.default);
+var stdin_default = TextEllipsis;

package/lib/text-ellipsis/style/index.d.ts

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

package/lib/text-ellipsis/style/index.js

@@ -0,0 +1,2 @@
+require("../../style/base.css");
+require("../index.css");

package/lib/text-ellipsis/types.d.ts

@@ -0,0 +1,3 @@
+export declare type TextEllipsisThemeVars = {
+    textEllipsisActionColor?: string;
+};