zartui 3.0.6 → 3.0.8

package/es/table/Table.d.ts

@@ -0,0 +1,118 @@
+import { CSSProperties } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import { SortOrderType } from './types';
+export declare type TableBodyOption = {
+    [key: string]: any;
+};
+export declare type TableHeaderOption = {
+    label: string;
+    key: string;
+    width?: string;
+    fixed?: boolean;
+    style?: CSSProperties;
+    click?: (data: TableBodyOption, index?: number) => void;
+    defaultSortOrder?: SortOrderType;
+    sorter?: boolean;
+    [key: string]: any;
+};
+export declare const tableProps: {
+    headList: {
+        type: import("vue").PropType<TableHeaderOption[]>;
+        default: () => TableHeaderOption[];
+    };
+    dataList: {
+        type: import("vue").PropType<TableBodyOption[]>;
+        default: () => TableBodyOption[];
+    };
+    striped: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    emptyValue: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    skeletonRow: {
+        type: NumberConstructor;
+        default: number;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare type TableProps = ExtractPropTypes<typeof tableProps>;
+declare const _default: import("vue").DefineComponent<{
+    headList: {
+        type: import("vue").PropType<TableHeaderOption[]>;
+        default: () => TableHeaderOption[];
+    };
+    dataList: {
+        type: import("vue").PropType<TableBodyOption[]>;
+        default: () => TableBodyOption[];
+    };
+    striped: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    emptyValue: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    skeletonRow: {
+        type: NumberConstructor;
+        default: number;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "sort"[], "sort", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    headList: {
+        type: import("vue").PropType<TableHeaderOption[]>;
+        default: () => TableHeaderOption[];
+    };
+    dataList: {
+        type: import("vue").PropType<TableBodyOption[]>;
+        default: () => TableBodyOption[];
+    };
+    striped: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    emptyValue: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    skeletonRow: {
+        type: NumberConstructor;
+        default: number;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onSort?: ((...args: any[]) => any) | undefined;
+}, {
+    border: boolean;
+    loading: boolean;
+    headList: TableHeaderOption[];
+    dataList: TableBodyOption[];
+    striped: boolean;
+    emptyValue: string;
+    skeletonRow: number;
+}>;
+export default _default;

package/es/table/Table.mjs

@@ -0,0 +1,209 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, computed, onMounted, ref } from "vue";
+import { createNamespace, makeArrayProp, makeStringProp, truthProp } from "../utils/index.mjs";
+import { Icon } from "../icon/index.mjs";
+import { SortOrderEnum } from "./types.mjs";
+const [name, bem] = createNamespace("table");
+const tableProps = {
+  headList: makeArrayProp(),
+  dataList: makeArrayProp(),
+  striped: truthProp,
+  emptyValue: makeStringProp("-"),
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  skeletonRow: {
+    type: Number,
+    default: 6
+  },
+  border: {
+    type: Boolean,
+    default: false
+  }
+};
+var stdin_default = defineComponent({
+  name,
+  props: tableProps,
+  emits: ["sort"],
+  setup(props, {
+    emit
+  }) {
+    const sortOrder = ref("");
+    const sortKey = ref("");
+    const fixedColumn = computed(() => props.headList.filter((v) => v.fixed));
+    const formatColumns = computed(() => {
+      const columns = [];
+      let left = 0;
+      props.headList.forEach((element, index) => {
+        var _a;
+        const column = Object.assign({}, element);
+        const preColumn = props.headList[index - 1];
+        const nextColumn = props.headList[index + 1];
+        if (preColumn) {
+          left += Number((_a = preColumn.width) == null ? void 0 : _a.split("px")[0]);
+          column.left = `${left}px`;
+        } else {
+          column.left = 0;
+        }
+        if (element.fixed && !nextColumn.fixed) {
+          column.lastFixLeft = true;
+        }
+        columns.push(column);
+      });
+      return columns;
+    });
+    const pingedLeft = ref(false);
+    const resortHeadList = computed(() => fixedColumn.value.concat(props.headList.filter((v) => !v.fixed)));
+    onMounted(() => {
+      const fixedIndexList = props.headList.map((v, i) => {
+        if (v.sorter && v.defaultSortOrder) {
+          sortOrder.value = v.defaultSortOrder || "";
+          sortKey.value = v.key;
+        }
+        if (v.fixed) {
+          return `tableHead${i}`;
+        } else {
+          return "";
+        }
+      }).filter((v) => v !== "");
+      if (fixedIndexList.length > 0) {
+        fixedIndexList.forEach((current, index) => {
+          const fixedDom = document.getElementById(`fixedHead${index}`);
+          const normalDom = document.getElementById(current);
+          if (fixedDom && normalDom) {
+            fixedDom.style.width = normalDom.offsetWidth + "px";
+          }
+        }, 0);
+      }
+    });
+    const getNextSortOrder = (type) => {
+      if (!type) {
+        return SortOrderEnum.ASCEND;
+      } else if (type === SortOrderEnum.ASCEND) {
+        return SortOrderEnum.DESCEND;
+      } else {
+        return "";
+      }
+    };
+    const onHeaderClick = (data) => {
+      if (!data.sorter)
+        return;
+      sortOrder.value = getNextSortOrder(data.key === sortKey.value ? sortOrder.value : "");
+      sortKey.value = data.key;
+      emit("sort", {
+        order: sortOrder.value,
+        key: data.key
+      });
+    };
+    const onScroll = (event) => {
+      const {
+        scrollLeft,
+        currentTarget
+      } = event;
+      const mergedScrollLeft = typeof scrollLeft === "number" ? scrollLeft : currentTarget == null ? void 0 : currentTarget.scrollLeft;
+      pingedLeft.value = mergedScrollLeft > 0;
+    };
+    const getHead = (colData) => {
+      if ((colData == null ? void 0 : colData.colSpan) !== 0) {
+        return _createVNode("th", {
+          "class": bem("left", {
+            fixed: colData.fixed,
+            last: colData.lastFixLeft && pingedLeft.value
+          }),
+          "style": {
+            left: colData.fixed ? colData.left : ""
+          },
+          "colspan": (colData == null ? void 0 : colData.colSpan) !== 1 ? colData == null ? void 0 : colData.colSpan : null
+        }, [_createVNode("div", {
+          "class": bem("head"),
+          "onClick": () => onHeaderClick(colData)
+        }, [_createVNode("span", {
+          "class": bem("head-label")
+        }, [colData.label]), colData.sorter ? _createVNode("span", {
+          "class": bem("head-sort")
+        }, [_createVNode(Icon, {
+          "class": [colData.key === sortKey.value && sortOrder.value === SortOrderEnum.ASCEND ? bem("sort-active") : ""],
+          "name": "spinner-shrink",
+          "size": "12",
+          "style": {
+            marginBottom: "-3px"
+          }
+        }, null), _createVNode(Icon, {
+          "class": [colData.key === sortKey.value && sortOrder.value === SortOrderEnum.DESCEND ? bem("sort-active") : ""],
+          "name": "spinner-expand",
+          "size": "12",
+          "style": {
+            marginTop: "-3px"
+          }
+        }, null)]) : ""])]);
+      }
+    };
+    const getBody = (rowData, rowIndex) => _createVNode("tr", null, [formatColumns.value.map((colData) => {
+      let additionalCellProps;
+      if (colData.customCell) {
+        additionalCellProps = colData.customCell(rowData, rowIndex);
+      }
+      const style = Object.assign({}, colData.style);
+      style.left = colData.fixed ? colData.left : "";
+      return (additionalCellProps == null ? void 0 : additionalCellProps.rowSpan) !== 0 && (additionalCellProps == null ? void 0 : additionalCellProps.colSpan) !== 0 && _createVNode("td", {
+        "onClick": () => colData.click && colData.click(rowData, rowIndex),
+        "class": bem("left", {
+          fixed: colData.fixed,
+          last: colData.lastFixLeft && pingedLeft.value
+        }),
+        "colspan": (additionalCellProps == null ? void 0 : additionalCellProps.colSpan) !== 1 ? additionalCellProps == null ? void 0 : additionalCellProps.colSpan : null,
+        "rowspan": (additionalCellProps == null ? void 0 : additionalCellProps.rowSpan) !== 1 ? additionalCellProps == null ? void 0 : additionalCellProps.rowSpan : null,
+        "style": style
+      }, [rowData[colData.key]]);
+    })]);
+    const getCol = () => {
+      const cols = [];
+      const col = resortHeadList.value.length;
+      for (let j = 0; j < col; j++) {
+        cols.push(_createVNode("div", {
+          "class": bem("col")
+        }, [_createVNode("div", {
+          "class": bem("col-item")
+        }, null)]));
+      }
+      return cols;
+    };
+    const getLoadingColumn = () => {
+      const Rows = [];
+      for (let i = 0; i < props.skeletonRow; i++) {
+        Rows.push(_createVNode("div", {
+          "class": bem("row", {
+            head: i === 0
+          })
+        }, [getCol()]));
+      }
+      return Rows;
+    };
+    return () => props.loading ? _createVNode("div", {
+      "class": bem({
+        animate: true,
+        skeleton: true
+      })
+    }, [getLoadingColumn()]) : _createVNode("div", {
+      "class": bem({
+        fixed: fixedColumn.value.length > 0,
+        bordered: props.border,
+        striped: props.striped
+      }),
+      "onScroll": onScroll
+    }, [_createVNode("table", null, [_createVNode("colgroup", null, [props.headList.map((item) => _createVNode("col", {
+      "style": {
+        width: item.width
+      }
+    }, null))]), _createVNode("thead", {
+      "class": bem("thead")
+    }, [_createVNode("tr", null, [formatColumns.value.map((colData) => getHead(colData))])]), _createVNode("tbody", {
+      "class": bem("tbody")
+    }, [props.dataList.map((rowData, rowIndex) => getBody(rowData, rowIndex))])])]);
+  }
+});
+export {
+  stdin_default as default,
+  tableProps
+};

package/es/table/index.css

@@ -0,0 +1 @@
+:root{--zt-table-head-height: 40px;--zt-table-head-font-size: var(--zt-font-size-md);--zt-table-head-color: var(--zt-blue);--zt-table-head-background: #e6f5ff;--zt-table-body-height: 40px;--zt-table-body-line-height: 20px;--zt-table-body-font-size: var(--zt-font-size-md);--zt-table-body-color: var(--zt-gray-default);--zt-table-body-background: var(--zt-white);--zt-table-sort-default: var(--zt-gray-5);--zt-table-sort-active: var(--zt-blue)}.zt-base-hair{position:relative}.zt-base-hair:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid var(--zt-border-color);transform:scale(.5)}.zt-table table{border-collapse:separate;border-spacing:0;width:100%;table-layout:auto;box-sizing:border-box}.zt-table--fixed{overflow:auto scroll}.zt-table--fixed::-webkit-scrollbar{width:0;height:0}.zt-table--fixed table{table-layout:fixed}.zt-table--thead-fixed{position:-webkit-sticky!important;position:sticky!important;z-index:2}.zt-table--bordered{position:relative}.zt-table--bordered:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid var(--zt-border-color);transform:scale(.5)}.zt-table--bordered:after{border-left-width:var(--zt-border-width)}.zt-table--bordered>table{position:relative}.zt-table--bordered>table:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid var(--zt-border-color);transform:scale(.5)}.zt-table--bordered>table:after{border-top-width:var(--zt-border-width)}.zt-table--bordered .zt-table__thead>tr>th{position:relative}.zt-table--bordered .zt-table__thead>tr>th:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid var(--zt-border-color);transform:scale(.5)}.zt-table--bordered .zt-table__thead>tr>th:after{border-right-width:var(--zt-border-width);border-bottom-width:var(--zt-border-width)}.zt-table--bordered .zt-table__tbody>tr>td{position:relative}.zt-table--bordered .zt-table__tbody>tr>td:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid var(--zt-border-color);transform:scale(.5)}.zt-table--bordered .zt-table__tbody>tr>td:after{border-right-width:var(--zt-border-width);border-bottom-width:var(--zt-border-width)}.zt-table__thead>tr>th{box-sizing:border-box;overflow-wrap:break-word;min-height:var(--zt-table-head-height);font-weight:600;font-size:var(--zt-table-head-font-size);color:var(--zt-table-head-color);text-align:center;line-height:var(--zt-table-head-height);background:var(--zt-table-head-background)}.zt-table__tbody>tr>td{box-sizing:border-box;overflow-wrap:break-word;min-height:var(--zt-table-body-height);font-size:var(--zt-table-body-font-size);color:var(--zt-table-body-color);text-align:center;line-height:var(--zt-table-body-line-height);background:var(--zt-table-body-background);padding:10px 16px}.zt-table--striped .zt-table__tbody>tr:nth-child(even)>td{background:var(--zt-table-head-background)}.zt-table__left--last{border-right:none!important}.zt-table__left--last:after{content:"";position:absolute;top:0;right:-10px;width:10px;height:100%;opacity:.06;background-image:linear-gradient(90deg,#000000 0%,rgba(0,0,0,0) 100%)}.zt-table__left--fixed{position:-webkit-sticky!important;position:sticky!important;z-index:2}.zt-table__head{display:flex;justify-content:center}.zt-table__head-sort{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;color:var(--zt-table-sort-default)}.zt-table__head-label{line-height:var(--zt-table-head-height)}.zt-table__sort-active{color:var(--zt-table-sort-active)}.zt-table--skeleton{background-color:#fff;padding-bottom:10px}.zt-table__row{display:flex;box-sizing:border-box;padding:0 10px;height:40px}.zt-table__row--head{display:flex;justify-content:center;align-items:center;background-color:#e7f0fb;margin-bottom:8px}.zt-table__row--head .zt-table__col-item{background-color:#cfdae9;height:20px}.zt-table__col{display:flex;align-items:center;justify-content:center;box-sizing:border-box;flex:1;padding:4px 6px;height:40px}.zt-table__col-item{width:100%;height:100%;border-radius:4px;background-color:rgba(45,75,115,.06)}.zt-table--animate{animation:zt-table-blink var(--zt-skeleton-duration) ease-in-out infinite}@keyframes zt-table-blink{50%{opacity:.6}}

package/es/table/index.d.ts

@@ -0,0 +1,77 @@
+export declare const Table: import("../utils").WithInstall<import("vue").DefineComponent<{
+    headList: {
+        type: import("vue").PropType<import("./Table").TableHeaderOption[]>;
+        default: () => import("./Table").TableHeaderOption[];
+    };
+    dataList: {
+        type: import("vue").PropType<import("./Table").TableBodyOption[]>;
+        default: () => import("./Table").TableBodyOption[];
+    };
+    striped: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    emptyValue: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    skeletonRow: {
+        type: NumberConstructor;
+        default: number;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "sort"[], "sort", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    headList: {
+        type: import("vue").PropType<import("./Table").TableHeaderOption[]>;
+        default: () => import("./Table").TableHeaderOption[];
+    };
+    dataList: {
+        type: import("vue").PropType<import("./Table").TableBodyOption[]>;
+        default: () => import("./Table").TableBodyOption[];
+    };
+    striped: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    emptyValue: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    skeletonRow: {
+        type: NumberConstructor;
+        default: number;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onSort?: ((...args: any[]) => any) | undefined;
+}, {
+    border: boolean;
+    loading: boolean;
+    headList: import("./Table").TableHeaderOption[];
+    dataList: import("./Table").TableBodyOption[];
+    striped: boolean;
+    emptyValue: string;
+    skeletonRow: number;
+}>>;
+export default Table;
+export { tableProps } from './Table';
+export type { TableHeaderOption, TableProps } from './Table';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtTable: typeof Table;
+    }
+}

package/es/table/index.mjs

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

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

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

package/es/table/style/index.mjs

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

package/es/table/types.d.ts

@@ -0,0 +1,5 @@
+export declare type SortOrderType = 'ascend' | 'descend';
+export declare enum SortOrderEnum {
+    ASCEND = "ascend",
+    DESCEND = "descend"
+}

package/es/table/types.mjs

@@ -0,0 +1,8 @@
+var SortOrderEnum = /* @__PURE__ */ ((SortOrderEnum2) => {
+  SortOrderEnum2["ASCEND"] = "ascend";
+  SortOrderEnum2["DESCEND"] = "descend";
+  return SortOrderEnum2;
+})(SortOrderEnum || {});
+export {
+  SortOrderEnum
+};

package/es/tabs/Tabs.mjs

@@ -8,6 +8,7 @@ import { route } from "../composables/use-route.mjs";
 import { useRefs } from "../composables/use-refs.mjs";
 import { useExpose } from "../composables/use-expose.mjs";
 import { onPopupReopen } from "../composables/on-popup-reopen.mjs";
+import { useVisibilityChange } from "../composables/use-visibility-change.mjs";
 import { Sticky } from "../sticky/index.mjs";
 import TabsTitle from "./TabsTitle.mjs";
 import TabsContent from "./TabsContent.mjs";
@@ -333,6 +334,7 @@ var stdin_default = defineComponent({
     onActivated(setLine);
     onPopupReopen(setLine);
     onMountedOrActivated(init);
+    useVisibilityChange(root, setLine);
     useEventListener("scroll", onScroll, {
       target: scroller,
       passive: true

package/es/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/es/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/es/tag/Tag.mjs

@@ -3,6 +3,7 @@ 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";
+import Image from "../image/index.mjs";
 const [name, bem] = createNamespace("tag");
 const tagProps = {
   mark: Boolean,
@@ -15,11 +16,14 @@ const tagProps = {
   borderColor: String,
   closeable: Boolean,
   icon: String,
+  image: String,
   iconPrefix: String,
   iconColor: String,
   badge: Boolean,
   badgeWidth: makeNumberProp(50),
-  badgeHeight: makeNumberProp(50)
+  badgeHeight: makeNumberProp(50),
+  stamp: Boolean,
+  stampDiameter: makeNumberProp(60)
 };
 var stdin_default = defineComponent({
   name,
@@ -75,23 +79,72 @@ var stdin_default = defineComponent({
         "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
+      const LeftIcon = () => {
+        if (props.image) {
+          return _createVNode(Image, {
+            "class": bem("image"),
+            "src": props.image
+          }, null);
+        } else if (props.icon) {
+          return _createVNode(Icon, {
+            "name": props.icon,
+            "class": bem("icon"),
+            "classPrefix": props.iconPrefix,
+            "style": {
+              color: props.iconColor
+            }
+          }, null);
         }
-      }, null);
+      };
       return _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 _createVNode("svg", {
+        "style": getStampStyle(),
+        "class": bem("stamp", [type]),
+        "viewBox": "0 0 60 60",
+        "xmlns": "http://www.w3.org/2000/svg"
+      }, [_createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [_createVNode("g", {
+        "transform": "translate(-334.000000, -500.000000)",
+        "fill": "currentColor"
+      }, [_createVNode("g", {
+        "transform": "translate(16.000000, 496.000000)"
+      }, [_createVNode("g", {
+        "transform": "translate(318.000000, 4.000000)"
+      }, [_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)])])])]), _createVNode("foreignObject", {
+        "width": "50px",
+        "height": "24px",
+        "x": "5",
+        "y": "19",
+        "transform": "rotate(35, 30, 30)"
+      }, [_createVNode("div", {
+        "class": bem("stamp", ["text"])
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])])]);
     };
     return () => _createVNode(Transition, {
       "name": props.closeable ? "zt-fade" : void 0
     }, {
-      default: () => [props.show ? renderTag() : null]
+      default: () => [props.stamp && props.show ? renderStampTag() : props.show ? renderTag() : null]
     });
   }
 });