@yh-ui/components 0.1.10 → 0.1.12

package/dist/ai-code-block/__tests__/ai-code-block.ssr.test.cjs

@@ -0,0 +1,66 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _serverRenderer = require("@vue/server-renderer");
+var _vue = require("vue");
+_vitest.vi.mock("highlight.js", () => ({
+  default: {
+    getLanguage: lang => lang === "typescript",
+    highlight: _vitest.vi.fn(() => ({
+      value: "highlighted"
+    })),
+    highlightAuto: _vitest.vi.fn(() => ({
+      value: "auto"
+    }))
+  }
+}));
+_vitest.vi.mock("highlight.js/styles/atom-one-dark.css", () => ({}));
+const {
+  default: AiCodeBlock
+} = await Promise.resolve().then(() => require("../src/ai-code-block.vue"));
+(0, _vitest.describe)("YhAiCodeBlock SSR", () => {
+  (0, _vitest.it)("should render to string on server", async () => {
+    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(AiCodeBlock, {
+      code: "const x = 1",
+      language: "typescript"
+    }));
+    (0, _vitest.expect)(html).toContain("yh-ai-code-block");
+  });
+  (0, _vitest.it)("should render filename in header on server", async () => {
+    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(AiCodeBlock, {
+      code: "const x = 1",
+      filename: "utils.ts"
+    }));
+    (0, _vitest.expect)(html).toContain("utils.ts");
+    (0, _vitest.expect)(html).toContain("yh-ai-code-block__lang");
+  });
+  (0, _vitest.it)("should render language in header when no filename on server", async () => {
+    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(AiCodeBlock, {
+      code: "const x = 1",
+      language: "typescript"
+    }));
+    (0, _vitest.expect)(html).toContain("typescript");
+  });
+  (0, _vitest.it)("should render language class in code element on server", async () => {
+    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(AiCodeBlock, {
+      code: "const x = 1",
+      language: "typescript"
+    }));
+    (0, _vitest.expect)(html).toContain("language-typescript");
+  });
+  (0, _vitest.it)("should render code body on server", async () => {
+    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(AiCodeBlock, {
+      code: "sample code",
+      language: "text",
+      highlight: false
+    }));
+    (0, _vitest.expect)(html).toContain("sample code");
+    (0, _vitest.expect)(html).toContain("yh-ai-code-block__body");
+  });
+  (0, _vitest.it)("should render copy button on server", async () => {
+    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(AiCodeBlock, {
+      code: "code"
+    }));
+    (0, _vitest.expect)(html).toContain("yh-ai-code-block__actions");
+  });
+});

package/dist/ai-code-block/__tests__/ai-code-block.ssr.test.d.ts

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

package/dist/ai-code-block/__tests__/ai-code-block.ssr.test.mjs

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderToString } from "@vue/server-renderer";
+import { h } from "vue";
+vi.mock("highlight.js", () => ({
+  default: {
+    getLanguage: (lang) => lang === "typescript",
+    highlight: vi.fn(() => ({ value: "highlighted" })),
+    highlightAuto: vi.fn(() => ({ value: "auto" }))
+  }
+}));
+vi.mock("highlight.js/styles/atom-one-dark.css", () => ({}));
+const { default: AiCodeBlock } = await import("../src/ai-code-block.vue");
+describe("YhAiCodeBlock SSR", () => {
+  it("should render to string on server", async () => {
+    const html = await renderToString(
+      h(AiCodeBlock, { code: "const x = 1", language: "typescript" })
+    );
+    expect(html).toContain("yh-ai-code-block");
+  });
+  it("should render filename in header on server", async () => {
+    const html = await renderToString(h(AiCodeBlock, { code: "const x = 1", filename: "utils.ts" }));
+    expect(html).toContain("utils.ts");
+    expect(html).toContain("yh-ai-code-block__lang");
+  });
+  it("should render language in header when no filename on server", async () => {
+    const html = await renderToString(
+      h(AiCodeBlock, { code: "const x = 1", language: "typescript" })
+    );
+    expect(html).toContain("typescript");
+  });
+  it("should render language class in code element on server", async () => {
+    const html = await renderToString(
+      h(AiCodeBlock, { code: "const x = 1", language: "typescript" })
+    );
+    expect(html).toContain("language-typescript");
+  });
+  it("should render code body on server", async () => {
+    const html = await renderToString(
+      h(AiCodeBlock, { code: "sample code", language: "text", highlight: false })
+    );
+    expect(html).toContain("sample code");
+    expect(html).toContain("yh-ai-code-block__body");
+  });
+  it("should render copy button on server", async () => {
+    const html = await renderToString(h(AiCodeBlock, { code: "code" }));
+    expect(html).toContain("yh-ai-code-block__actions");
+  });
+});

package/dist/ai-code-block/__tests__/ai-code-block.test.cjs

@@ -0,0 +1,174 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _testUtils = require("@vue/test-utils");
+_vitest.vi.mock("highlight.js", () => ({
+  default: {
+    getLanguage: lang => lang === "typescript" || lang === "javascript" || lang === "python",
+    highlight: _vitest.vi.fn((_code, _opts) => ({
+      value: '<span class="hljs-keyword">const</span>'
+    })),
+    highlightAuto: _vitest.vi.fn(() => ({
+      value: "<span>auto</span>"
+    }))
+  }
+}));
+_vitest.vi.mock("highlight.js/styles/atom-one-dark.css", () => ({}));
+const {
+  default: AiCodeBlock
+} = await Promise.resolve().then(() => require("../src/ai-code-block.vue"));
+(0, _vitest.describe)("YhAiCodeBlock", () => {
+  (0, _vitest.beforeEach)(() => {
+    const mockClipboard = {
+      writeText: _vitest.vi.fn().mockResolvedValue(void 0)
+    };
+    Object.defineProperty(navigator, "clipboard", {
+      value: mockClipboard,
+      writable: true,
+      configurable: true
+    });
+  });
+  (0, _vitest.it)("should render with base class", () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: "const x = 1"
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-ai-code-block").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should render header and body", () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: "const x = 1"
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-ai-code-block__header").exists()).toBe(true);
+    (0, _vitest.expect)(wrapper.find(".yh-ai-code-block__body").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should show filename in lang label when filename provided", () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: "const x = 1",
+        language: "typescript",
+        filename: "utils.ts"
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-ai-code-block__lang").text()).toBe("utils.ts");
+  });
+  (0, _vitest.it)("should show language in lang label when filename not provided", () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: "const x = 1",
+        language: "typescript"
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-ai-code-block__lang").text()).toBe("typescript");
+  });
+  (0, _vitest.it)("should show text as default language", () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: "plain text"
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-ai-code-block__lang").text()).toBe("text");
+  });
+  (0, _vitest.it)("should render code element with language class", () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: "const x = 1",
+        language: "typescript"
+      }
+    });
+    const code = wrapper.find("code");
+    (0, _vitest.expect)(code.classes()).toContain("language-typescript");
+  });
+  (0, _vitest.it)("should render code content", () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: "hello world",
+        language: "text",
+        highlight: false
+      }
+    });
+    (0, _vitest.expect)(wrapper.html()).toContain("hello world");
+  });
+  (0, _vitest.it)("should apply hljs class to code element", () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: "const x = 1"
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("code").classes()).toContain("hljs");
+  });
+  (0, _vitest.it)("should render highlighted code when highlight=true and language recognized", () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: "const x = 1",
+        language: "typescript",
+        highlight: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("code").html()).toContain("hljs-keyword");
+  });
+  (0, _vitest.it)("should render raw code when highlight=false", () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: "raw code here",
+        language: "typescript",
+        highlight: false
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("code").html()).toContain("raw code here");
+  });
+  (0, _vitest.it)("should show copy button", () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: "const x = 1"
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-ai-code-block__actions .yh-button").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should emit copy event and call clipboard on copy click", async () => {
+    const code = "const x = 1";
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code
+      }
+    });
+    await wrapper.find(".yh-ai-code-block__actions .yh-button").trigger("click");
+    (0, _vitest.expect)(navigator.clipboard.writeText).toHaveBeenCalledWith(code);
+    (0, _vitest.expect)(wrapper.emitted("copy")).toBeTruthy();
+    (0, _vitest.expect)(wrapper.emitted("copy")[0][0]).toBe(code);
+  });
+  (0, _vitest.it)("should NOT emit copy when code is empty", async () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: ""
+      }
+    });
+    await wrapper.find(".yh-ai-code-block__actions .yh-button").trigger("click");
+    (0, _vitest.expect)(wrapper.emitted("copy")).toBeFalsy();
+  });
+  (0, _vitest.it)("should render default slot instead of code when slot provided", () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: "ignored code"
+      },
+      slots: {
+        default: '<em class="custom-code">custom</em>'
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".custom-code").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should render actions slot", () => {
+    const wrapper = (0, _testUtils.mount)(AiCodeBlock, {
+      props: {
+        code: "code"
+      },
+      slots: {
+        actions: '<button class="extra-action">Run</button>'
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".extra-action").exists()).toBe(true);
+  });
+});

package/dist/ai-code-block/__tests__/ai-code-block.test.d.ts

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

package/dist/ai-code-block/__tests__/ai-code-block.test.mjs

@@ -0,0 +1,108 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
+vi.mock("highlight.js", () => ({
+  default: {
+    getLanguage: (lang) => lang === "typescript" || lang === "javascript" || lang === "python",
+    highlight: vi.fn((_code, _opts) => ({
+      value: '<span class="hljs-keyword">const</span>'
+    })),
+    highlightAuto: vi.fn(() => ({ value: "<span>auto</span>" }))
+  }
+}));
+vi.mock("highlight.js/styles/atom-one-dark.css", () => ({}));
+const { default: AiCodeBlock } = await import("../src/ai-code-block.vue");
+describe("YhAiCodeBlock", () => {
+  beforeEach(() => {
+    const mockClipboard = { writeText: vi.fn().mockResolvedValue(void 0) };
+    Object.defineProperty(navigator, "clipboard", {
+      value: mockClipboard,
+      writable: true,
+      configurable: true
+    });
+  });
+  it("should render with base class", () => {
+    const wrapper = mount(AiCodeBlock, { props: { code: "const x = 1" } });
+    expect(wrapper.find(".yh-ai-code-block").exists()).toBe(true);
+  });
+  it("should render header and body", () => {
+    const wrapper = mount(AiCodeBlock, { props: { code: "const x = 1" } });
+    expect(wrapper.find(".yh-ai-code-block__header").exists()).toBe(true);
+    expect(wrapper.find(".yh-ai-code-block__body").exists()).toBe(true);
+  });
+  it("should show filename in lang label when filename provided", () => {
+    const wrapper = mount(AiCodeBlock, {
+      props: { code: "const x = 1", language: "typescript", filename: "utils.ts" }
+    });
+    expect(wrapper.find(".yh-ai-code-block__lang").text()).toBe("utils.ts");
+  });
+  it("should show language in lang label when filename not provided", () => {
+    const wrapper = mount(AiCodeBlock, {
+      props: { code: "const x = 1", language: "typescript" }
+    });
+    expect(wrapper.find(".yh-ai-code-block__lang").text()).toBe("typescript");
+  });
+  it("should show text as default language", () => {
+    const wrapper = mount(AiCodeBlock, { props: { code: "plain text" } });
+    expect(wrapper.find(".yh-ai-code-block__lang").text()).toBe("text");
+  });
+  it("should render code element with language class", () => {
+    const wrapper = mount(AiCodeBlock, {
+      props: { code: "const x = 1", language: "typescript" }
+    });
+    const code = wrapper.find("code");
+    expect(code.classes()).toContain("language-typescript");
+  });
+  it("should render code content", () => {
+    const wrapper = mount(AiCodeBlock, {
+      props: { code: "hello world", language: "text", highlight: false }
+    });
+    expect(wrapper.html()).toContain("hello world");
+  });
+  it("should apply hljs class to code element", () => {
+    const wrapper = mount(AiCodeBlock, { props: { code: "const x = 1" } });
+    expect(wrapper.find("code").classes()).toContain("hljs");
+  });
+  it("should render highlighted code when highlight=true and language recognized", () => {
+    const wrapper = mount(AiCodeBlock, {
+      props: { code: "const x = 1", language: "typescript", highlight: true }
+    });
+    expect(wrapper.find("code").html()).toContain("hljs-keyword");
+  });
+  it("should render raw code when highlight=false", () => {
+    const wrapper = mount(AiCodeBlock, {
+      props: { code: "raw code here", language: "typescript", highlight: false }
+    });
+    expect(wrapper.find("code").html()).toContain("raw code here");
+  });
+  it("should show copy button", () => {
+    const wrapper = mount(AiCodeBlock, { props: { code: "const x = 1" } });
+    expect(wrapper.find(".yh-ai-code-block__actions .yh-button").exists()).toBe(true);
+  });
+  it("should emit copy event and call clipboard on copy click", async () => {
+    const code = "const x = 1";
+    const wrapper = mount(AiCodeBlock, { props: { code } });
+    await wrapper.find(".yh-ai-code-block__actions .yh-button").trigger("click");
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(code);
+    expect(wrapper.emitted("copy")).toBeTruthy();
+    expect(wrapper.emitted("copy")[0][0]).toBe(code);
+  });
+  it("should NOT emit copy when code is empty", async () => {
+    const wrapper = mount(AiCodeBlock, { props: { code: "" } });
+    await wrapper.find(".yh-ai-code-block__actions .yh-button").trigger("click");
+    expect(wrapper.emitted("copy")).toBeFalsy();
+  });
+  it("should render default slot instead of code when slot provided", () => {
+    const wrapper = mount(AiCodeBlock, {
+      props: { code: "ignored code" },
+      slots: { default: '<em class="custom-code">custom</em>' }
+    });
+    expect(wrapper.find(".custom-code").exists()).toBe(true);
+  });
+  it("should render actions slot", () => {
+    const wrapper = mount(AiCodeBlock, {
+      props: { code: "code" },
+      slots: { actions: '<button class="extra-action">Run</button>' }
+    });
+    expect(wrapper.find(".extra-action").exists()).toBe(true);
+  });
+});

package/dist/ai-code-block/index.cjs

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  YhAiCodeBlock: true
+};
+module.exports = exports.YhAiCodeBlock = void 0;
+var _utils = require("@yh-ui/utils");
+var _aiCodeBlock = _interopRequireDefault(require("./src/ai-code-block.vue"));
+var _aiCodeBlock2 = require("./src/ai-code-block.cjs");
+Object.keys(_aiCodeBlock2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _aiCodeBlock2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _aiCodeBlock2[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const YhAiCodeBlock = exports.YhAiCodeBlock = (0, _utils.withInstall)(_aiCodeBlock.default);
+module.exports = YhAiCodeBlock;

package/dist/ai-code-block/index.d.ts

@@ -0,0 +1,3 @@
+export declare const YhAiCodeBlock: any;
+export default YhAiCodeBlock;
+export * from './src/ai-code-block';

package/dist/ai-code-block/index.mjs

@@ -0,0 +1,5 @@
+import { withInstall } from "@yh-ui/utils";
+import AiCodeBlock from "./src/ai-code-block.vue";
+export const YhAiCodeBlock = withInstall(AiCodeBlock);
+export default YhAiCodeBlock;
+export * from "./src/ai-code-block.mjs";

package/dist/ai-code-block/src/ai-code-block.cjs

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.aiCodeBlockProps = exports.aiCodeBlockEmits = void 0;
+const aiCodeBlockProps = exports.aiCodeBlockProps = {
+  /**
+   * @description 代码语言
+   */
+  language: {
+    type: String,
+    default: "text"
+  },
+  /**
+   * @description 代码内容
+   */
+  code: {
+    type: String,
+    default: ""
+  },
+  /**
+   * @description 文件名称
+   */
+  filename: String,
+  /**
+   * @description 是否显示行号
+   */
+  showLineNumbers: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 高亮行号列表
+   */
+  highlightLines: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * @description 是否可折叠
+   */
+  collapsible: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 默认是否折叠
+   */
+  defaultCollapsed: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 是否显示运行按钮
+   */
+  showRun: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 是否高亮语法
+   */
+  highlight: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 主题覆盖变量
+   */
+  themeOverrides: {
+    type: Object,
+    default: void 0
+  }
+};
+const aiCodeBlockEmits = exports.aiCodeBlockEmits = {
+  copy: code => typeof code === "string",
+  run: code => typeof code === "string"
+};