zartui 3.0.6 → 3.0.8

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

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

package/es/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/es/text-ellipsis/TextEllipsis.mjs

@@ -0,0 +1,118 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, watch, onMounted, defineComponent } from "vue";
+import { useEventListener } from "@zartui/use";
+import { makeNumericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
+const [name, bem] = createNamespace("text-ellipsis");
+const textEllipsisProps = {
+  rows: makeNumericProp(1),
+  content: makeStringProp(""),
+  expandText: makeStringProp(""),
+  collapseText: makeStringProp(""),
+  highlight: makeStringProp("")
+};
+var stdin_default = defineComponent({
+  name,
+  props: textEllipsisProps,
+  emits: ["clickAction"],
+  setup(props, {
+    emit
+  }) {
+    const text = ref("");
+    const expanded = ref(false);
+    const hasAction = ref(false);
+    const root = 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 = () => _createVNode("span", {
+      "class": bem("action"),
+      "onClick": onClickAction
+    }, [expanded.value ? props.collapseText : props.expandText]);
+    onMounted(calcEllipsised);
+    watch(() => [props.content, props.rows], calcEllipsised);
+    useEventListener("resize", calcEllipsised);
+    return () => _createVNode("div", {
+      "ref": root,
+      "class": bem()
+    }, [_createVNode("span", {
+      "innerHTML": formatSearchKeyword(props.highlight, expanded.value ? props.content : text.value)
+    }, null), hasAction.value ? renderAction() : null]);
+  }
+});
+export {
+  stdin_default as default,
+  textEllipsisProps
+};

package/es/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/es/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/es/text-ellipsis/index.mjs

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

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

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

package/es/text-ellipsis/style/index.mjs

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

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

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

package/es/timeline/Timeline.d.ts

@@ -0,0 +1,113 @@
+import type { ExtractPropTypes } from 'vue';
+export declare type TimelineProcessOption = {
+    human: string;
+    avatar?: string;
+    department: string;
+    timestamp: string;
+    opinion: string;
+    stage: string;
+    action: string;
+    nextAction: string;
+    nextDepartment: string;
+    nextHuman: string;
+    folded?: boolean;
+};
+export declare const timelineProps: {
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    defaultFold: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapseCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    processes: {
+        type: import("vue").PropType<TimelineProcessOption[]>;
+        default: () => TimelineProcessOption[];
+    };
+    opinionKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    enableSingleFold: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    dot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare type TimelineProps = ExtractPropTypes<typeof timelineProps>;
+declare const _default: import("vue").DefineComponent<{
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    defaultFold: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapseCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    processes: {
+        type: import("vue").PropType<TimelineProcessOption[]>;
+        default: () => TimelineProcessOption[];
+    };
+    opinionKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    enableSingleFold: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    dot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    defaultFold: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapseCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    processes: {
+        type: import("vue").PropType<TimelineProcessOption[]>;
+        default: () => TimelineProcessOption[];
+    };
+    opinionKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    enableSingleFold: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    dot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    title: string;
+    dot: boolean;
+    defaultFold: boolean;
+    collapseCount: number;
+    processes: TimelineProcessOption[];
+    opinionKey: string;
+    enableSingleFold: boolean;
+}>;
+export default _default;

package/es/timeline/Timeline.mjs

@@ -0,0 +1,162 @@
+import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+import { defineComponent, computed, ref } from "vue";
+import Switch from "../switch/index.mjs";
+import { BORDER_BOTTOM, createNamespace, makeArrayProp, makeNumberProp, makeStringProp, truthProp } from "../utils/index.mjs";
+const [name, bem] = createNamespace("timeline");
+const timelineProps = {
+  title: makeStringProp("\u529E\u7406\u7ECF\u8FC7"),
+  // 默认折叠显示
+  defaultFold: {
+    type: Boolean,
+    default: false
+  },
+  // 折叠时显示几条数据
+  collapseCount: makeNumberProp(0),
+  processes: makeArrayProp([]),
+  opinionKey: makeStringProp("\u5904\u7406\u610F\u89C1"),
+  enableSingleFold: truthProp,
+  dot: {
+    type: Boolean,
+    default: false
+  }
+};
+var stdin_default = defineComponent({
+  name,
+  props: timelineProps,
+  setup(props, {
+    slots
+  }) {
+    const isFold = ref(props.defaultFold);
+    const genTopBar = () => {
+      if (slots["top-bar"]) {
+        return _createVNode("div", {
+          "class": [bem("top-bar"), BORDER_BOTTOM]
+        }, [slots["top-bar"]()]);
+      } else {
+        return _createVNode("div", {
+          "class": [bem("top-bar"), BORDER_BOTTOM]
+        }, [_createVNode("div", {
+          "class": bem("top-left")
+        }, [_createVNode("div", {
+          "class": bem("bar")
+        }, null), _createVNode("div", {
+          "class": bem("title")
+        }, [props.title])]), _createVNode("div", {
+          "class": bem("top-right")
+        }, [_createVNode("span", {
+          "class": bem("fold-text")
+        }, [_createTextVNode("\u6298\u53E0"), props.title]), _createVNode(Switch, {
+          "modelValue": isFold.value,
+          "onUpdate:modelValue": ($event) => isFold.value = $event
+        }, null)])]);
+      }
+    };
+    const genAvatar = (item) => {
+      if (slots.avatar) {
+        return _createVNode("div", {
+          "class": bem("avatar-box")
+        }, [slots.avatar(item)]);
+      }
+      if (props.dot) {
+        return _createVNode("div", {
+          "class": bem("dot")
+        }, null);
+      }
+      return _createVNode("div", {
+        "class": bem("avatar-box")
+      }, [item.avatar ? _createVNode("img", {
+        "class": bem("avatar"),
+        "src": item.avatar,
+        "alt": ""
+      }, null) : _createVNode("div", {
+        "class": bem("avatar")
+      }, [item.human.slice(-2)])]);
+    };
+    const genTitle = (item) => {
+      if (slots.title) {
+        return _createVNode("div", {
+          "class": bem("title-box")
+        }, [slots.title(item)]);
+      }
+      return _createVNode("div", {
+        "class": bem("title-box")
+      }, [_createVNode("span", {
+        "class": bem("title")
+      }, [`${item.department}[${item.human}]`]), _createVNode("span", {
+        "class": bem("time")
+      }, [item.timestamp])]);
+    };
+    const genOpinion = (item) => {
+      if (slots.opinion) {
+        return _createVNode("div", {
+          "class": bem("opinion-box")
+        }, [slots.opinion(item)]);
+      }
+      return _createVNode("div", {
+        "class": bem("opinion-box")
+      }, [_createVNode("div", {
+        "class": bem("opinion-label")
+      }, [props.opinionKey]), _createVNode("div", {
+        "class": bem("opinion")
+      }, [item.opinion || "\u65E0"])]);
+    };
+    const genContent = (item) => {
+      if (slots.content) {
+        return _createVNode("div", {
+          "class": [bem("content-box"), BORDER_BOTTOM]
+        }, [slots.content(item)]);
+      }
+      return _createVNode("div", {
+        "class": [bem("content-box"), BORDER_BOTTOM]
+      }, [_createTextVNode("\u5728"), _createVNode("span", null, [item.stage]), _createTextVNode("\u9636\u6BB5"), _createVNode("span", {
+        "class": bem("text-bold")
+      }, [_createTextVNode(" "), item.action, _createTextVNode(" ")]), _createTextVNode("\u5230"), _createVNode("span", null, [item.nextAction]), _createVNode("span", null, [item.nextDepartment]), _createVNode("span", {
+        "class": bem("text-bold")
+      }, [_createTextVNode(" ["), item.nextHuman, _createTextVNode("]")])]);
+    };
+    const genProcessItem = (item, isLast) => {
+      function itemClicked() {
+        if (!props.enableSingleFold) {
+          return;
+        }
+        item.folded = !item.folded;
+      }
+      return _createVNode("div", {
+        "class": bem("item") + ` ${isLast ? "last-item" : ""}`,
+        "onClick": itemClicked
+      }, [_createVNode("div", {
+        "class": [bem("left-container"), props.dot ? bem("dot-container") : ""]
+      }, [genAvatar(item), _createVNode("div", {
+        "class": bem(props.dot ? "line-dot" : "line")
+      }, null)]), _createVNode("div", {
+        "class": bem("right-container")
+      }, [genTitle(item), !item.folded && _createVNode("div", {
+        "class": bem("main-container")
+      }, [genContent(item), genOpinion(item)])])]);
+    };
+    const computedProcesses = computed(() => {
+      const wrapper = props.processes.map((v) => {
+        v.folded = false;
+        return v;
+      });
+      if (isFold.value) {
+        const showProcesses = wrapper.slice(0, props.collapseCount);
+        return showProcesses.map((item, index) => genProcessItem(item, index === showProcesses.length - 1));
+      } else {
+        return wrapper.map((item, index) => genProcessItem(item, index === wrapper.length - 1));
+      }
+    });
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "class": bem()
+      }, [genTopBar(), ((_a = computedProcesses.value) == null ? void 0 : _a.length) > 0 && _createVNode("div", {
+        "class": bem("container")
+      }, [computedProcesses.value])]);
+    };
+  }
+});
+export {
+  stdin_default as default,
+  timelineProps
+};

package/es/timeline/index.css

@@ -0,0 +1 @@
+:root{--zt-timeline-title-color: var(--zt-gray-default);--zt-timeline-sub-title-color: var(--zt-gray-a6);--zt-timeline-content-color: var(--zt-gray-default);--zt-timeline-background: var(--zt-white);--zt-timeline-bar-background: var(--zt-primary-color);--zt-timeline-time-color: var(--zt-gray-a8)}.zt-timeline{background-color:var(--zt-timeline-background)}.zt-timeline__top-bar{height:44px;display:flex;justify-content:space-between;align-items:center}.zt-timeline__top-left{display:flex;align-items:center}.zt-timeline__bar{width:4px;height:16px;background:var(--zt-timeline-bar-background);margin-right:12px}.zt-timeline__title{font-size:16px;font-weight:700;color:var(--zt-timeline-title-color);line-height:24px}.zt-timeline__top-right{padding-right:16px;display:flex;align-items:center}.zt-timeline__top-right .zt-switch--on{background:var(--zt-timeline-bar-background)}.zt-timeline__fold-text{font-size:16px;color:var(--zt-gray-a6);line-height:24px;margin-right:8px}.zt-timeline__container{padding-top:16px}.zt-timeline__item{padding:0 16px 16px;display:flex}.zt-timeline__item.last-item .zt-timeline__line-dot,.zt-timeline__item.last-item .zt-timeline__line{height:0}.zt-timeline__item.last-item .zt-timeline__dot{border-color:var(--zt-timeline-bar-background)}.zt-timeline__left-container{margin-right:8px;display:flex;flex-direction:column;align-items:center;position:relative}.zt-timeline__right-container{flex:1}.zt-timeline__dot-container{top:5px}.zt-timeline__dot{width:12px;height:12px;background-color:#fff;border:1px solid rgba(45,75,115,.2);border-radius:50%;z-index:2}.zt-timeline__avatar-box{width:40px;height:40px;z-index:2}.zt-timeline__avatar{width:40px;height:40px;background:#0091fa;border-radius:4px;font-size:14px;font-weight:700;text-align:center;color:#fff;line-height:40px}.zt-timeline__line{background-color:#f5f5f5;width:2px;height:100%;margin-top:4px;margin-bottom:-12px}.zt-timeline__line-dot{position:absolute;background-color:#f5f5f5;width:2px;height:calc(100% + 16px)}.zt-timeline__title-box{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.zt-timeline__time{font-size:12px;color:var(--zt-timeline-time-color);line-height:16px}.zt-timeline__content-box{font-size:14px;color:var(--zt-timeline-content-color);line-height:20px;padding-bottom:8px}.zt-timeline__main-container{background:rgba(0,0,0,.02);border-radius:4px;padding:8px 12px}.zt-timeline__main-container:before{border-radius:4px}.zt-timeline__main-container .zt-timeline__text-bold{font-weight:700}.zt-timeline__opinion-box{padding-top:7px}.zt-timeline__opinion-label{margin-bottom:4px;font-size:14px;color:var(--zt-timeline-sub-title-color);line-height:20px}.zt-timeline__opinion{font-size:14px;color:var(--zt-timeline-content-color);line-height:20px;word-break:break-all}