@yh-ui/components 0.1.16 → 0.1.21

package/dist/ai-thinking/src/ai-thinking.d.ts

@@ -27,6 +27,34 @@ export declare const aiThinkingProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    /**
+     * @description 样式类名
+     */
+    readonly className: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /**
+     * @description 样式类名（语义化）
+     */
+    readonly classNames: {
+        readonly type: PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
+    /**
+     * @description 样式对象
+     */
+    readonly styles: {
+        readonly type: PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
+    /**
+     * @description 自定义样式
+     */
+    readonly style: {
+        readonly type: PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
     /**
      * @description 主题覆盖变量
      */

package/dist/ai-thinking/src/ai-thinking.mjs

@@ -25,6 +25,34 @@ export const aiThinkingProps = {
     type: Boolean,
     default: true
   },
+  /**
+   * @description 样式类名
+   */
+  className: {
+    type: String,
+    default: ""
+  },
+  /**
+   * @description 样式类名（语义化）
+   */
+  classNames: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * @description 样式对象
+   */
+  styles: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * @description 自定义样式
+   */
+  style: {
+    type: Object,
+    default: () => ({})
+  },
   /**
    * @description 主题覆盖变量
    */

package/dist/ai-thinking/src/ai-thinking.vue

@@ -20,15 +20,15 @@ const displayTitle = computed(() => {
   if (props.title) return props.title;
   switch (props.status) {
     case "start":
-      return t("ai.thinking.start") || "\u5F00\u59CB\u601D\u8003";
+      return t("ai.thinking.start");
     case "thinking":
-      return t("ai.thinking.thinking") || "\u601D\u8003\u4E2D...";
+      return t("ai.thinking.thinking");
     case "end":
-      return t("ai.thinking.complete") || "\u5DF2\u5B8C\u6210\u601D\u8003";
+      return t("ai.thinking.complete");
     case "error":
-      return t("ai.thinking.error") || "\u601D\u8003\u51FA\u9519\u4E86";
+      return t("ai.thinking.error");
     default:
-      return t("ai.thinking.thinking") || "\u601D\u8003\u4E2D...";
+      return t("ai.thinking.thinking");
   }
 });
 const statusIcon = computed(() => {
@@ -59,7 +59,10 @@ const toggleExpand = () => {
 </script>
 
 <template>
-  <div :class="[ns.b(), ns.m(status), ns.is('expanded', isExpanded)]" :style="themeStyle">
+  <div
+    :class="[ns.b(), ns.m(status), ns.is('expanded', isExpanded), className]"
+    :style="[themeStyle, style]"
+  >
     <div :class="ns.e('header')" @click="toggleExpand">
       <div :class="ns.e('icon-wrapper')">
         <YhIcon

package/dist/ai-thinking/src/ai-thinking.vue.d.ts

@@ -14,15 +14,71 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly className: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly classNames: {
+        readonly type: import("vue").PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
+    readonly styles: {
+        readonly type: import("vue").PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
+    readonly style: {
+        readonly type: import("vue").PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
     readonly themeOverrides: {
         readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
         readonly default: undefined;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
-    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly status: {
+        readonly type: import("vue").PropType<import("./ai-thinking").AiThinkingStatus>;
+        readonly default: "thinking";
+    };
+    readonly title: StringConstructor;
+    readonly content: StringConstructor;
+    readonly modelValue: BooleanConstructor;
+    readonly autoCollapse: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly className: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly classNames: {
+        readonly type: import("vue").PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
+    readonly styles: {
+        readonly type: import("vue").PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
+    readonly style: {
+        readonly type: import("vue").PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    readonly style: Record<string, string>;
     readonly status: import("./ai-thinking").AiThinkingStatus;
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
     readonly modelValue: boolean;
+    readonly className: string;
     readonly autoCollapse: boolean;
+    readonly classNames: Record<string, string>;
+    readonly styles: Record<string, string>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/ai-thought-chain/__tests__/ai-thought-chain.ssr.test.cjs

@@ -65,8 +65,13 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     (0, _vitest.expect)(html).toContain("is-active");
   });
   (0, _vitest.it)("should render content text on server", async () => {
+    const items = [{
+      title: "Item",
+      content: "SSR thought content",
+      expanded: true
+    }];
     const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_aiThoughtChain.default, {
-      content: "SSR thought content"
+      items
     }));
     (0, _vitest.expect)(html).toContain("SSR thought content");
   });

package/dist/ai-thought-chain/__tests__/ai-thought-chain.ssr.test.mjs

@@ -41,7 +41,10 @@ describe("YhAiThoughtChain SSR", () => {
     expect(html).toContain("is-active");
   });
   it("should render content text on server", async () => {
-    const html = await renderToString(h(AiThoughtChain, { content: "SSR thought content" }));
+    const items = [
+      { title: "Item", content: "SSR thought content", expanded: true }
+    ];
+    const html = await renderToString(h(AiThoughtChain, { items }));
     expect(html).toContain("SSR thought content");
   });
   it("should render status icon wrappers on server in timeline mode", async () => {

package/dist/ai-thought-chain/__tests__/ai-thought-chain.test.cjs

@@ -193,12 +193,152 @@ const makeItem = (title, status = "complete", content = "") => ({
     (0, _vitest.expect)(dotEl.exists()).toBe(true);
     (0, _vitest.expect)(dotEl.classes().join(" ")).toContain("large");
   });
-  (0, _vitest.it)("should render default slot in single node mode", () => {
+  (0, _vitest.it)("should render default slot in single node mode", async () => {
     const wrapper = (0, _testUtils.mount)(_aiThoughtChain.default, {
       slots: {
         default: '<em class="slot-content">Slot</em>'
       }
     });
+    await wrapper.find(".yh-ai-thought-chain__header").trigger("click");
     (0, _vitest.expect)(wrapper.find(".slot-content").exists()).toBe(true);
   });
+  (0, _vitest.it)("should compute and show progress", async () => {
+    const items = [makeItem("Step 1", "complete"), makeItem("Step 2", "success"), makeItem("Step 3", "thinking"), makeItem("Step 4", "none")];
+    const wrapper = (0, _testUtils.mount)(_aiThoughtChain.default, {
+      props: {
+        items,
+        showProgress: true
+      }
+    });
+    const progressFill = wrapper.find(".yh-ai-thought-chain__progress-fill");
+    (0, _vitest.expect)(progressFill.exists()).toBe(true);
+    (0, _vitest.expect)(progressFill.attributes("style")).toContain("width: 50%");
+  });
+  (0, _vitest.it)("should get correct status icons", () => {
+    const items = [makeItem("Step 1", "error"), makeItem("Step 2", "success", "Detail 2"), makeItem("Step 3", "loading", "Detail 3")];
+    items[1].expanded = true;
+    items[2].expanded = true;
+    const wrapper = (0, _testUtils.mount)(_aiThoughtChain.default, {
+      props: {
+        items
+      }
+    });
+    (0, _vitest.expect)(wrapper.html()).toContain("yh-ai-thought-chain--error");
+  });
+  (0, _vitest.it)("should emit node-click when item content is clicked", async () => {
+    const items = [{
+      title: "Step 1",
+      content: "click me",
+      status: "complete",
+      expanded: true
+    }];
+    const wrapper = (0, _testUtils.mount)(_aiThoughtChain.default, {
+      props: {
+        items
+      }
+    });
+    const contentText = wrapper.find(".yh-ai-thought-chain__item-content");
+    await contentText.trigger("click");
+    (0, _vitest.expect)(wrapper.emitted("node-click")).toBeTruthy();
+  });
+  (0, _vitest.it)("should emit node-click, even with description", async () => {
+    const items = [{
+      title: "Step 1",
+      description: "desc",
+      status: "complete",
+      expanded: true
+    }];
+    const wrapper = (0, _testUtils.mount)(_aiThoughtChain.default, {
+      props: {
+        items
+      }
+    });
+    const contentText = wrapper.find(".yh-ai-thought-chain__item-content");
+    await contentText.trigger("click");
+    (0, _vitest.expect)(wrapper.emitted("node-click")).toBeTruthy();
+  });
+  (0, _vitest.it)("should not emit node-click if clickable is false", async () => {
+    const items = [{
+      title: "Step 1",
+      content: "click",
+      clickable: false,
+      expanded: true
+    }];
+    const wrapper = (0, _testUtils.mount)(_aiThoughtChain.default, {
+      props: {
+        items
+      }
+    });
+    const contentText = wrapper.find(".yh-ai-thought-chain__item-content");
+    await contentText.trigger("click");
+    (0, _vitest.expect)(wrapper.emitted("node-click")).toBeFalsy();
+  });
+  (0, _vitest.it)("should handle add and delete node in editable mode", async () => {
+    const items = [makeItem("Step 1", "complete")];
+    const wrapper = (0, _testUtils.mount)(_aiThoughtChain.default, {
+      props: {
+        items,
+        editable: true
+      }
+    });
+    const actionIcons = wrapper.findAll(".yh-ai-thought-chain__action-icon");
+    await actionIcons[0].trigger("click");
+    (0, _vitest.expect)(wrapper.emitted("node-delete")).toBeTruthy();
+    (0, _vitest.expect)(wrapper.emitted("update:items")).toBeTruthy();
+    (0, _vitest.expect)(wrapper.emitted("reorder")).toBeTruthy();
+    await actionIcons[1].trigger("click");
+    (0, _vitest.expect)(wrapper.emitted("node-add")).toBeTruthy();
+    const bottomAddNode = wrapper.find(".yh-ai-thought-chain__add-node");
+    await bottomAddNode.trigger("click");
+    (0, _vitest.expect)(wrapper.emitted("node-add")?.length).toBe(2);
+  });
+  (0, _vitest.it)("should not mutate internalItems when editable is false", async () => {
+    const items = [makeItem("Step 1", "complete")];
+    const wrapper = (0, _testUtils.mount)(_aiThoughtChain.default, {
+      props: {
+        items,
+        editable: false
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-ai-thought-chain__item-actions").exists()).toBe(false);
+    (0, _vitest.expect)(wrapper.find(".yh-ai-thought-chain__add-node").exists()).toBe(false);
+  });
+  (0, _vitest.it)("should handle drag and drop", async () => {
+    const items = [makeItem("1"), makeItem("2")];
+    const wrapper = (0, _testUtils.mount)(_aiThoughtChain.default, {
+      props: {
+        items,
+        draggable: true
+      }
+    });
+    const elements = wrapper.findAll(".yh-ai-thought-chain__item");
+    await elements[0].trigger("dragstart", {
+      dataTransfer: {}
+    });
+    (0, _vitest.expect)(wrapper.vm.draggedIndex).toBe(0);
+    await elements[1].trigger("dragover");
+    await elements[1].trigger("dragleave");
+    await elements[1].trigger("dragover");
+    await elements[1].trigger("drop");
+    (0, _vitest.expect)(wrapper.emitted("update:items")).toBeTruthy();
+    (0, _vitest.expect)(wrapper.emitted("reorder")).toBeTruthy();
+    await elements[0].trigger("dragend");
+  });
+  (0, _vitest.it)("should fallback internal items if missing items", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiThoughtChain.default, {
+      props: {
+        items: null
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-ai-thought-chain").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should fall back to empty internalItems when items length is 0 and draggable is true", () => {
+    const wrapper = (0, _testUtils.mount)(_aiThoughtChain.default, {
+      props: {
+        items: [],
+        draggable: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-ai-thought-chain").exists()).toBe(true);
+  });
 });

package/dist/ai-thought-chain/__tests__/ai-thought-chain.test.mjs

@@ -125,10 +125,113 @@ describe("YhAiThoughtChain", () => {
     expect(dotEl.exists()).toBe(true);
     expect(dotEl.classes().join(" ")).toContain("large");
   });
-  it("should render default slot in single node mode", () => {
+  it("should render default slot in single node mode", async () => {
     const wrapper = mount(AiThoughtChain, {
       slots: { default: '<em class="slot-content">Slot</em>' }
     });
+    await wrapper.find(".yh-ai-thought-chain__header").trigger("click");
     expect(wrapper.find(".slot-content").exists()).toBe(true);
   });
+  it("should compute and show progress", async () => {
+    const items = [
+      makeItem("Step 1", "complete"),
+      makeItem("Step 2", "success"),
+      makeItem("Step 3", "thinking"),
+      makeItem("Step 4", "none")
+    ];
+    const wrapper = mount(AiThoughtChain, {
+      props: { items, showProgress: true }
+    });
+    const progressFill = wrapper.find(".yh-ai-thought-chain__progress-fill");
+    expect(progressFill.exists()).toBe(true);
+    expect(progressFill.attributes("style")).toContain("width: 50%");
+  });
+  it("should get correct status icons", () => {
+    const items = [
+      makeItem("Step 1", "error"),
+      makeItem("Step 2", "success", "Detail 2"),
+      makeItem("Step 3", "loading", "Detail 3")
+    ];
+    items[1].expanded = true;
+    items[2].expanded = true;
+    const wrapper = mount(AiThoughtChain, { props: { items } });
+    expect(wrapper.html()).toContain("yh-ai-thought-chain--error");
+  });
+  it("should emit node-click when item content is clicked", async () => {
+    const items = [
+      { title: "Step 1", content: "click me", status: "complete", expanded: true }
+    ];
+    const wrapper = mount(AiThoughtChain, { props: { items } });
+    const contentText = wrapper.find(".yh-ai-thought-chain__item-content");
+    await contentText.trigger("click");
+    expect(wrapper.emitted("node-click")).toBeTruthy();
+  });
+  it("should emit node-click, even with description", async () => {
+    const items = [
+      { title: "Step 1", description: "desc", status: "complete", expanded: true }
+    ];
+    const wrapper = mount(AiThoughtChain, { props: { items } });
+    const contentText = wrapper.find(".yh-ai-thought-chain__item-content");
+    await contentText.trigger("click");
+    expect(wrapper.emitted("node-click")).toBeTruthy();
+  });
+  it("should not emit node-click if clickable is false", async () => {
+    const items = [{ title: "Step 1", content: "click", clickable: false, expanded: true }];
+    const wrapper = mount(AiThoughtChain, { props: { items } });
+    const contentText = wrapper.find(".yh-ai-thought-chain__item-content");
+    await contentText.trigger("click");
+    expect(wrapper.emitted("node-click")).toBeFalsy();
+  });
+  it("should handle add and delete node in editable mode", async () => {
+    const items = [makeItem("Step 1", "complete")];
+    const wrapper = mount(AiThoughtChain, {
+      props: { items, editable: true }
+    });
+    const actionIcons = wrapper.findAll(".yh-ai-thought-chain__action-icon");
+    await actionIcons[0].trigger("click");
+    expect(wrapper.emitted("node-delete")).toBeTruthy();
+    expect(wrapper.emitted("update:items")).toBeTruthy();
+    expect(wrapper.emitted("reorder")).toBeTruthy();
+    await actionIcons[1].trigger("click");
+    expect(wrapper.emitted("node-add")).toBeTruthy();
+    const bottomAddNode = wrapper.find(".yh-ai-thought-chain__add-node");
+    await bottomAddNode.trigger("click");
+    expect(wrapper.emitted("node-add")?.length).toBe(2);
+  });
+  it("should not mutate internalItems when editable is false", async () => {
+    const items = [makeItem("Step 1", "complete")];
+    const wrapper = mount(AiThoughtChain, {
+      props: { items, editable: false }
+    });
+    expect(wrapper.find(".yh-ai-thought-chain__item-actions").exists()).toBe(false);
+    expect(wrapper.find(".yh-ai-thought-chain__add-node").exists()).toBe(false);
+  });
+  it("should handle drag and drop", async () => {
+    const items = [makeItem("1"), makeItem("2")];
+    const wrapper = mount(AiThoughtChain, {
+      props: { items, draggable: true }
+    });
+    const elements = wrapper.findAll(".yh-ai-thought-chain__item");
+    await elements[0].trigger("dragstart", { dataTransfer: {} });
+    expect(wrapper.vm.draggedIndex).toBe(0);
+    await elements[1].trigger("dragover");
+    await elements[1].trigger("dragleave");
+    await elements[1].trigger("dragover");
+    await elements[1].trigger("drop");
+    expect(wrapper.emitted("update:items")).toBeTruthy();
+    expect(wrapper.emitted("reorder")).toBeTruthy();
+    await elements[0].trigger("dragend");
+  });
+  it("should fallback internal items if missing items", async () => {
+    const wrapper = mount(AiThoughtChain, {
+      props: { items: null }
+    });
+    expect(wrapper.find(".yh-ai-thought-chain").exists()).toBe(true);
+  });
+  it("should fall back to empty internalItems when items length is 0 and draggable is true", () => {
+    const wrapper = mount(AiThoughtChain, {
+      props: { items: [], draggable: true }
+    });
+    expect(wrapper.find(".yh-ai-thought-chain").exists()).toBe(true);
+  });
 });