@yh-ui/components 0.1.12 → 0.1.16

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

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-export type ArtifactType = 'code' | 'html' | 'markdown' | 'react' | 'vue' | 'diagram';
+export type ArtifactType = 'code' | 'html' | 'markdown' | 'react' | 'vue' | 'diagram' | 'chart' | 'sandbox' | 'canvas';
 export interface ArtifactVersion {
     /**
      * 版本号或标识

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

@@ -1,5 +1,16 @@
 import 'highlight.js/styles/atom-one-dark.css';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare var __VLS_25: {
+    data: any;
+    title: any;
+}, __VLS_31: {
+    data: any;
+};
+type __VLS_Slots = {} & {
+    chart?: (props: typeof __VLS_25) => any;
+} & {
+    canvas?: (props: typeof __VLS_31) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     readonly visible: {
         readonly type: BooleanConstructor;
         readonly default: false;
@@ -30,4 +41,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly fullscreen: boolean;
     readonly mode: "inline" | "code" | "preview";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -32,6 +32,14 @@ watch(
     if (val) currentVersionState.value = val;
   }
 );
+const getIcon = (type) => {
+  if (type === "code") return "code";
+  if (type === "chart") return "chart-bar";
+  if (type === "canvas") return "edit";
+  if (type === "sandbox") return "play";
+  if (type === "diagram") return "connection";
+  return "document";
+};
 const currentVersionData = computed(() => {
   if (!props.data || props.data.versions.length === 0) return null;
   return props.data.versions.find((v) => v.version === currentVersionState.value) || props.data.versions[0];
@@ -88,7 +96,7 @@ const highlightedCode = computed(() => {
       <!-- Header -->
       <div :class="ns.e('header')">
         <div :class="ns.e('title-area')">
-          <YhIcon :name="data?.type === 'code' ? 'code' : 'document'" />
+          <YhIcon :name="getIcon(data?.type)" />
           <span :class="ns.e('title')">{{ data?.title || "Artifact" }}</span>
         </div>
 
@@ -144,7 +152,27 @@ const highlightedCode = computed(() => {
       <!-- Content area -->
       <div :class="ns.e('content')">
         <template v-if="internalMode === 'preview' || internalMode === 'inline'">
-          <iframe v-if="data?.type === 'html'" :src="sandboxSrc" :class="ns.e('sandbox')"></iframe>
+          <iframe
+            v-if="data?.type === 'html' || data?.type === 'sandbox'"
+            :src="sandboxSrc"
+            :class="ns.e('sandbox')"
+          ></iframe>
+          <div v-else-if="data?.type === 'chart'" :class="ns.e('chart-container')">
+            <slot name="chart" :data="currentVersionData" :title="data.title">
+              <div :class="ns.e('placeholder')">
+                <YhIcon name="chart-bar" />
+                <p>{{ t("ai.artifacts.renderingChart") || "\u6B63\u5728\u6E32\u67D3\u56FE\u8868..." }}</p>
+              </div>
+            </slot>
+          </div>
+          <div v-else-if="data?.type === 'canvas'" :class="ns.e('canvas-container')">
+            <slot name="canvas" :data="currentVersionData">
+              <div :class="ns.e('placeholder')">
+                <YhIcon name="edit" />
+                <p>{{ t("ai.artifacts.renderingCanvas") || "\u6B63\u5728\u51C6\u5907\u753B\u677F..." }}</p>
+              </div>
+            </slot>
+          </div>
           <div v-else :class="ns.e('placeholder')">
             <YhIcon name="sparkles" />
             <p>{{ t("ai.artifacts.rendering") || "\u6B63\u5728\u6E32\u67D3\u7EC4\u4EF6..." }}</p>

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

@@ -1,5 +1,16 @@
 import 'highlight.js/styles/atom-one-dark.css';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare var __VLS_25: {
+    data: any;
+    title: any;
+}, __VLS_31: {
+    data: any;
+};
+type __VLS_Slots = {} & {
+    chart?: (props: typeof __VLS_25) => any;
+} & {
+    canvas?: (props: typeof __VLS_31) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     readonly visible: {
         readonly type: BooleanConstructor;
         readonly default: false;
@@ -30,4 +41,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly fullscreen: boolean;
     readonly mode: "inline" | "code" | "preview";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/ai-editor-sender/src/ai-editor-sender.d.vue.ts

@@ -56,10 +56,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     readonly loading: boolean;
     readonly placeholder: string;
     readonly modelValue: string;
-    readonly maxLength: number;
     readonly showWordLimit: boolean;
-    readonly attachments: AttachmentItem[];
     readonly rows: number;
+    readonly maxLength: number;
+    readonly attachments: AttachmentItem[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/ai-editor-sender/src/ai-editor-sender.vue.d.ts

@@ -56,10 +56,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     readonly loading: boolean;
     readonly placeholder: string;
     readonly modelValue: string;
-    readonly maxLength: number;
     readonly showWordLimit: boolean;
-    readonly attachments: AttachmentItem[];
     readonly rows: number;
+    readonly maxLength: number;
+    readonly attachments: AttachmentItem[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/ai-mention/__tests__/ai-mention.ssr.test.cjs

@@ -0,0 +1,38 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _serverRenderer = require("@vue/server-renderer");
+var _vue = require("vue");
+var _aiMention = _interopRequireDefault(require("../src/ai-mention.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const options = [{
+  label: "DeepSeek",
+  value: "deepseek",
+  type: "agent"
+}];
+(0, _vitest.describe)("YhAiMention SSR", () => {
+  (0, _vitest.it)("should render to string on server", async () => {
+    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_aiMention.default, {
+      modelValue: "hello",
+      options
+    }));
+    (0, _vitest.expect)(html).toContain("yh-ai-mention");
+    (0, _vitest.expect)(html).toMatch(/textarea|input/);
+  });
+  (0, _vitest.it)("should render custom placeholder on server", async () => {
+    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_aiMention.default, {
+      modelValue: "",
+      options,
+      placeholder: "Custom SSR Placeholder"
+    }));
+    (0, _vitest.expect)(html).toContain("Custom SSR Placeholder");
+  });
+  (0, _vitest.it)("should apply disabled state on server", async () => {
+    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_aiMention.default, {
+      modelValue: "",
+      options,
+      disabled: true
+    }));
+    (0, _vitest.expect)(html).toContain("disabled");
+  });
+});

package/dist/ai-mention/__tests__/ai-mention.ssr.test.d.ts

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

package/dist/ai-mention/__tests__/ai-mention.ssr.test.mjs

@@ -0,0 +1,37 @@
+import { describe, it, expect } from "vitest";
+import { renderToString } from "@vue/server-renderer";
+import { h } from "vue";
+import AiMention from "../src/ai-mention.vue";
+const options = [{ label: "DeepSeek", value: "deepseek", type: "agent" }];
+describe("YhAiMention SSR", () => {
+  it("should render to string on server", async () => {
+    const html = await renderToString(
+      h(AiMention, {
+        modelValue: "hello",
+        options
+      })
+    );
+    expect(html).toContain("yh-ai-mention");
+    expect(html).toMatch(/textarea|input/);
+  });
+  it("should render custom placeholder on server", async () => {
+    const html = await renderToString(
+      h(AiMention, {
+        modelValue: "",
+        options,
+        placeholder: "Custom SSR Placeholder"
+      })
+    );
+    expect(html).toContain("Custom SSR Placeholder");
+  });
+  it("should apply disabled state on server", async () => {
+    const html = await renderToString(
+      h(AiMention, {
+        modelValue: "",
+        options,
+        disabled: true
+      })
+    );
+    expect(html).toContain("disabled");
+  });
+});

package/dist/ai-mention/__tests__/ai-mention.test.cjs

@@ -0,0 +1,113 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _testUtils = require("@vue/test-utils");
+var _aiMention = _interopRequireDefault(require("../src/ai-mention.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const options = [{
+  label: "DeepSeek",
+  value: "deepseek",
+  type: "agent"
+}, {
+  label: "GPT-4",
+  value: "gpt4",
+  type: "agent"
+}, {
+  label: "PRD.docx",
+  value: "prd",
+  type: "document"
+}, {
+  label: "Sales.xlsx",
+  value: "sales",
+  type: "table"
+}, {
+  label: "Design System",
+  value: "design",
+  type: "knowledge"
+}];
+(0, _vitest.describe)("YhAiMention", () => {
+  (0, _vitest.it)("should render correctly", () => {
+    const wrapper = (0, _testUtils.mount)(_aiMention.default, {
+      props: {
+        modelValue: "",
+        options
+      }
+    });
+    (0, _vitest.expect)(wrapper.classes()).toContain("yh-ai-mention");
+    (0, _vitest.expect)(wrapper.findComponent({
+      name: "YhMention"
+    }).exists()).toBe(true);
+  });
+  (0, _vitest.it)("should apply placeholder correctly", () => {
+    const placeholder = "Test Placeholder";
+    const wrapper = (0, _testUtils.mount)(_aiMention.default, {
+      props: {
+        modelValue: "",
+        options,
+        placeholder
+      }
+    });
+    const mention = wrapper.findComponent({
+      name: "YhMention"
+    });
+    (0, _vitest.expect)(mention.props("placeholder")).toBe(placeholder);
+  });
+  (0, _vitest.it)("should filter options based on types prop", () => {
+    const wrapper = (0, _testUtils.mount)(_aiMention.default, {
+      props: {
+        modelValue: "",
+        options,
+        types: ["agent"]
+      }
+    });
+    const mention = wrapper.findComponent({
+      name: "YhMention"
+    });
+    const passedOptions = mention.props("options");
+    (0, _vitest.expect)(passedOptions).toHaveLength(2);
+    (0, _vitest.expect)(passedOptions.every(opt => opt.type === "agent")).toBe(true);
+  });
+  (0, _vitest.it)("should filter multiple types", () => {
+    const wrapper = (0, _testUtils.mount)(_aiMention.default, {
+      props: {
+        modelValue: "",
+        options,
+        types: ["document", "table"]
+      }
+    });
+    const mention = wrapper.findComponent({
+      name: "YhMention"
+    });
+    const passedOptions = mention.props("options");
+    (0, _vitest.expect)(passedOptions).toHaveLength(2);
+    (0, _vitest.expect)(passedOptions.some(opt => opt.type === "document")).toBe(true);
+    (0, _vitest.expect)(passedOptions.some(opt => opt.type === "table")).toBe(true);
+  });
+  (0, _vitest.it)("should show all styles when no types specified (default)", () => {
+    const wrapper = (0, _testUtils.mount)(_aiMention.default, {
+      props: {
+        modelValue: "",
+        options
+      }
+    });
+    const mention = wrapper.findComponent({
+      name: "YhMention"
+    });
+    const passedOptions = mention.props("options");
+    (0, _vitest.expect)(passedOptions).toHaveLength(5);
+  });
+  (0, _vitest.it)("should emit update:modelValue when changed", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiMention.default, {
+      props: {
+        modelValue: "",
+        options
+      }
+    });
+    const mention = wrapper.findComponent({
+      name: "YhMention"
+    });
+    await mention.vm.$emit("update:modelValue", "new value");
+    (0, _vitest.expect)(wrapper.emitted("update:modelValue")).toBeTruthy();
+    (0, _vitest.expect)(wrapper.emitted("update:modelValue")[0]).toEqual(["new value"]);
+  });
+});

package/dist/ai-mention/__tests__/ai-mention.test.d.ts

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

package/dist/ai-mention/__tests__/ai-mention.test.mjs

@@ -0,0 +1,84 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import AiMention from "../src/ai-mention.vue";
+const options = [
+  { label: "DeepSeek", value: "deepseek", type: "agent" },
+  { label: "GPT-4", value: "gpt4", type: "agent" },
+  { label: "PRD.docx", value: "prd", type: "document" },
+  { label: "Sales.xlsx", value: "sales", type: "table" },
+  { label: "Design System", value: "design", type: "knowledge" }
+];
+describe("YhAiMention", () => {
+  it("should render correctly", () => {
+    const wrapper = mount(AiMention, {
+      props: {
+        modelValue: "",
+        options
+      }
+    });
+    expect(wrapper.classes()).toContain("yh-ai-mention");
+    expect(wrapper.findComponent({ name: "YhMention" }).exists()).toBe(true);
+  });
+  it("should apply placeholder correctly", () => {
+    const placeholder = "Test Placeholder";
+    const wrapper = mount(AiMention, {
+      props: {
+        modelValue: "",
+        options,
+        placeholder
+      }
+    });
+    const mention = wrapper.findComponent({ name: "YhMention" });
+    expect(mention.props("placeholder")).toBe(placeholder);
+  });
+  it("should filter options based on types prop", () => {
+    const wrapper = mount(AiMention, {
+      props: {
+        modelValue: "",
+        options,
+        types: ["agent"]
+      }
+    });
+    const mention = wrapper.findComponent({ name: "YhMention" });
+    const passedOptions = mention.props("options");
+    expect(passedOptions).toHaveLength(2);
+    expect(passedOptions.every((opt) => opt.type === "agent")).toBe(true);
+  });
+  it("should filter multiple types", () => {
+    const wrapper = mount(AiMention, {
+      props: {
+        modelValue: "",
+        options,
+        types: ["document", "table"]
+      }
+    });
+    const mention = wrapper.findComponent({ name: "YhMention" });
+    const passedOptions = mention.props("options");
+    expect(passedOptions).toHaveLength(2);
+    expect(passedOptions.some((opt) => opt.type === "document")).toBe(true);
+    expect(passedOptions.some((opt) => opt.type === "table")).toBe(true);
+  });
+  it("should show all styles when no types specified (default)", () => {
+    const wrapper = mount(AiMention, {
+      props: {
+        modelValue: "",
+        options
+      }
+    });
+    const mention = wrapper.findComponent({ name: "YhMention" });
+    const passedOptions = mention.props("options");
+    expect(passedOptions).toHaveLength(5);
+  });
+  it("should emit update:modelValue when changed", async () => {
+    const wrapper = mount(AiMention, {
+      props: {
+        modelValue: "",
+        options
+      }
+    });
+    const mention = wrapper.findComponent({ name: "YhMention" });
+    await mention.vm.$emit("update:modelValue", "new value");
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+    expect(wrapper.emitted("update:modelValue")[0]).toEqual(["new value"]);
+  });
+});

package/dist/ai-mention/index.cjs

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

package/dist/ai-mention/index.d.ts

@@ -0,0 +1,29 @@
+export declare const YhAiMention: import("@yh-ui/utils").SFCWithInstall<{
+    new (...args: any[]): any;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<any, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    clear: () => void | undefined;
+    getRef: () => HTMLTextAreaElement | HTMLInputElement | undefined;
+    insertMention: (option: import("./src/ai-mention").AiMentionOption, trigger?: string) => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, {
+    readonly disabled: boolean;
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly type: "textarea" | "input";
+    readonly loading: boolean;
+    readonly triggers: string[];
+    readonly options: import("./src/ai-mention").AiMentionOption[];
+    readonly modelValue: string;
+    readonly filterOption: false | ((keyword: string, option: import("../mention").MentionOption) => boolean);
+    readonly rows: number;
+    readonly types: ("table" | "document" | "agent" | "knowledge")[];
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        [x: string]: ((props: any) => any) | undefined;
+    };
+})> & Record<string, unknown>;
+export default YhAiMention;
+export * from './src/ai-mention';

package/dist/ai-mention/index.mjs

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

package/dist/ai-mention/src/ai-mention.cjs

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.aiMentionTypes = exports.aiMentionProps = exports.aiMentionEmits = void 0;
+const aiMentionTypes = exports.aiMentionTypes = ["agent", "document", "table", "knowledge"];
+const aiMentionProps = exports.aiMentionProps = {
+  /**
+   * 绑定值
+   */
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  /**
+   * AI 提及类型，支持多种类型过滤
+   */
+  types: {
+    type: Array,
+    default: () => ["agent", "document", "table", "knowledge"]
+  },
+  /**
+   * 选项列表
+   */
+  options: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * 触发字符
+   */
+  triggers: {
+    type: Array,
+    default: () => ["@"]
+  },
+  /**
+   * 是否在输入框中
+   */
+  type: {
+    type: String,
+    default: "textarea"
+  },
+  /**
+   * 占位符
+   */
+  placeholder: String,
+  /**
+   * 是否禁用
+   */
+  disabled: Boolean,
+  /**
+   * 尺寸
+   */
+  size: String,
+  /**
+   * 最大长度
+   */
+  maxLength: Number,
+  /**
+   * 文本域行数
+   */
+  rows: {
+    type: Number,
+    default: 3
+  },
+  /**
+   * 是否正在加载
+   */
+  loading: Boolean,
+  /**
+   * 主题覆盖
+   */
+  themeOverrides: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 选项过滤
+   */
+  filterOption: {
+    type: [Function, Boolean],
+    default: void 0
+  }
+};
+const aiMentionEmits = exports.aiMentionEmits = {
+  "update:modelValue": value => typeof value === "string",
+  input: value => typeof value === "string",
+  change: value => typeof value === "string",
+  select: (option, trigger) => !!option && !!trigger,
+  search: (keyword, trigger) => typeof keyword === "string" && !!trigger,
+  focus: event => event instanceof FocusEvent,
+  blur: event => event instanceof FocusEvent,
+  keydown: event => event instanceof KeyboardEvent
+};