@antdv-next/x 0.0.2 → 0.0.4

package/dist/notification/index.d.ts

@@ -0,0 +1,15 @@
+import { UseNotificationType, XNotificationOpenArgs } from './interface';
+declare class XNotification {
+    private static permissionMap;
+    static permissible: boolean;
+    constructor();
+    get permission(): NotificationPermission;
+    open(arg: XNotificationOpenArgs): void;
+    requestPermission(): Promise<NotificationPermission>;
+    useNotification(): UseNotificationType;
+    close(tags?: string[]): void;
+}
+export type { XNotificationOpenArgs };
+declare const _default: XNotification;
+export default _default;
+export { XNotification };

package/dist/notification/interface.d.ts

@@ -0,0 +1,22 @@
+import { Ref } from 'vue';
+import { XNotification } from '.';
+type TypeOpen = NotificationOptions & {
+    title: string;
+    onClick?: (event: Event, close?: Notification["close"]) => void;
+    onClose?: (event: Event) => void;
+    onError?: (event: Event) => void;
+    onShow?: (event: Event) => void;
+    duration?: number;
+};
+export type UseNotificationType = [
+    {
+        permission: Ref<NotificationPermission>;
+    },
+    {
+        open: XNotification["open"];
+        close: XNotification["close"];
+        requestPermission: () => Promise<NotificationPermission>;
+    }
+];
+export type XNotificationOpenArgs = TypeOpen;
+export {};

package/dist/package.js

@@ -1,4 +1,4 @@
 //#region package.json
-var version = "0.0.2";
+var version = "0.0.4";
 //#endregion
 export { version };

package/dist/sender/Sender.d.ts

@@ -1,5 +1,5 @@
 import { PropType, StyleValue, CSSProperties } from 'vue';
-import { AllowSpeech, BaseNode, NodeRender, SubmitType } from './interface';
+import { AllowSpeech, BaseNode, NodeRender, SkillType, SlotConfigType, SubmitType } from './interface';
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     prefixCls: {
         type: StringConstructor;
@@ -41,6 +41,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    slotConfig: {
+        type: PropType<Readonly<SlotConfigType[]>>;
+        default: undefined;
+    };
+    skill: {
+        type: PropType<SkillType>;
+        default: undefined;
+    };
     placeholder: {
         type: StringConstructor;
         default: undefined;
@@ -83,11 +91,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: undefined;
     };
     onSubmit: {
-        type: PropType<(message: string) => void>;
+        type: PropType<(message: string, slotConfig?: SlotConfigType[], skill?: SkillType) => void>;
         default: undefined;
     };
     onChange: {
-        type: PropType<(value: string, event?: Event) => void>;
+        type: PropType<(value: string, event?: Event, slotConfig?: SlotConfigType[], skill?: SkillType) => void>;
         default: undefined;
     };
     onCancel: {
@@ -159,6 +167,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    slotConfig: {
+        type: PropType<Readonly<SlotConfigType[]>>;
+        default: undefined;
+    };
+    skill: {
+        type: PropType<SkillType>;
+        default: undefined;
+    };
     placeholder: {
         type: StringConstructor;
         default: undefined;
@@ -201,11 +217,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: undefined;
     };
     onSubmit: {
-        type: PropType<(message: string) => void>;
+        type: PropType<(message: string, slotConfig?: SlotConfigType[], skill?: SkillType) => void>;
         default: undefined;
     };
     onChange: {
-        type: PropType<(value: string, event?: Event) => void>;
+        type: PropType<(value: string, event?: Event, slotConfig?: SlotConfigType[], skill?: SkillType) => void>;
         default: undefined;
     };
     onCancel: {
@@ -250,8 +266,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     onPaste: (event: ClipboardEvent) => void;
     onFocus: (event: FocusEvent) => void;
     onBlur: (event: FocusEvent) => void;
-    onChange: (value: string, event?: Event) => void;
-    onSubmit: (message: string) => void;
+    onChange: (value: string, event?: Event, slotConfig?: SlotConfigType[], skill?: SkillType) => void;
+    onSubmit: (message: string, slotConfig?: SlotConfigType[], skill?: SkillType) => void;
     placeholder: string;
     prefix: BaseNode | NodeRender;
     classNames: Record<string, string>;
@@ -259,6 +275,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     suffix: BaseNode | NodeRender;
     onKeyUp: (event: KeyboardEvent) => void;
     onKeyDown: (event: KeyboardEvent) => void | false;
+    skill: SkillType;
+    slotConfig: readonly SlotConfigType[];
     readOnly: boolean;
     autoSize: boolean | {
         minRows?: number;

package/dist/sender/Sender.js

@@ -3,12 +3,13 @@ import { provideActionButtonContext } from "./components/ActionButton.js";
 import ClearButton_default from "./components/ClearButton.js";
 import LoadingButton_default from "./components/LoadingButton/index.js";
 import SendButton_default from "./components/SendButton.js";
-import SpeechButton_default from "./components/SpeechButton/index.js";
 import { provideSenderContext } from "./context.js";
+import SlotTextArea_default from "./components/SlotTextArea.js";
+import SpeechButton_default from "./components/SpeechButton/index.js";
 import TextArea_default from "./components/TextArea.js";
 import useSpeech from "./hooks/use-speech.js";
 import style_default from "./style/index.js";
-import { computed, createVNode, defineComponent, mergeProps, ref, useAttrs } from "vue";
+import { computed, createVNode, defineComponent, mergeProps, ref, useAttrs, watch } from "vue";
 import { useConfig } from "antdv-next/dist/config-provider/context";
 //#region components/sender/Sender.tsx
 var sharedRenderComponents = {
@@ -65,6 +66,14 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		slotConfig: {
+			type: Array,
+			default: void 0
+		},
+		skill: {
+			type: Object,
+			default: void 0
+		},
 		placeholder: {
 			type: String,
 			default: void 0
@@ -163,21 +172,40 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 		const [hashId, cssVarCls] = style_default(prefixCls);
 		const containerRef = ref();
 		const inputRef = ref();
+		const isSlotMode = computed(() => Array.isArray(props.slotConfig) || !!props.skill?.value);
 		const innerValue = ref(props.defaultValue);
 		const mergedValue = computed(() => props.value ?? innerValue.value);
-		const triggerValueChange = (nextValue, event) => {
+		const triggerValueChange = (nextValue, event, slotConfig, skill) => {
 			innerValue.value = nextValue;
-			props.onChange?.(nextValue, event);
+			props.onChange?.(nextValue, event, slotConfig, skill);
 		};
+		const submitDisabled = ref(!mergedValue.value);
+		watch(() => mergedValue.value, (next) => {
+			if (!isSlotMode.value) submitDisabled.value = !next;
+		}, { immediate: true });
 		const [speechPermission, triggerSpeech, speechRecording] = useSpeech((transcript) => {
+			if (isSlotMode.value) {
+				inputRef.value?.insert?.([{
+					type: "text",
+					value: transcript
+				}]);
+				return;
+			}
 			triggerValueChange(`${mergedValue.value} ${transcript}`);
 		}, () => props.allowSpeech);
 		const triggerSend = () => {
-			if (props.onSubmit && !props.loading && mergedValue.value) props.onSubmit(mergedValue.value);
+			if (!props.onSubmit || props.loading || submitDisabled.value) return;
+			const value = inputRef.value?.getValue?.() ?? { value: "" };
+			const slotConfig = "slotConfig" in value ? value.slotConfig : void 0;
+			const skill = "skill" in value ? value.skill : void 0;
+			props.onSubmit(value.value, slotConfig, skill);
 		};
 		const triggerClear = () => {
+			if (inputRef.value?.clear) {
+				inputRef.value.clear();
+				return;
+			}
 			triggerValueChange("");
-			inputRef.value?.clear();
 		};
 		expose({
 			get nativeElement() {
@@ -193,7 +221,19 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 				triggerClear();
 			},
 			insert(text, position) {
-				inputRef.value?.insert(text, position);
+				if (isSlotMode.value) {
+					const slotList = Array.isArray(text) ? text : [{
+						type: "text",
+						value: text
+					}];
+					inputRef.value?.insert?.(slotList, position);
+					return;
+				}
+				const textValue = Array.isArray(text) ? text.map((config) => {
+					if (config.type === "text") return config.value ?? "";
+					return config.formatResult?.(config.props?.defaultValue) ?? "";
+				}).join("") : text;
+				inputRef.value?.insert?.(textValue, position);
 			},
 			getValue() {
 				return inputRef.value?.getValue() ?? { value: "" };
@@ -216,15 +256,20 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 			triggerSend,
 			placeholder: props.placeholder,
 			onFocus: props.onFocus,
-			onBlur: props.onBlur
+			onBlur: props.onBlur,
+			slotConfig: props.slotConfig,
+			skill: props.skill,
+			setSubmitDisabled: (disabled) => {
+				submitDisabled.value = disabled;
+			}
 		})));
 		const actionBtnCls = computed(() => `${prefixCls.value}-actions-btn`);
 		provideActionButtonContext(computed(() => ({
 			prefixCls: actionBtnCls.value,
 			onSend: triggerSend,
-			onSendDisabled: !mergedValue.value,
+			onSendDisabled: submitDisabled.value,
 			onClear: triggerClear,
-			onClearDisabled: !mergedValue.value,
+			onClearDisabled: submitDisabled.value,
 			onCancel: props.onCancel,
 			onCancelDisabled: !props.loading,
 			onSpeech: () => triggerSpeech(false),
@@ -277,8 +322,9 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 					"class": [`${cls}-content`, props.classNames.content],
 					"style": props.styles.content,
 					"onMousedown": (e) => {
-						if (e.target !== containerRef.value?.querySelector(`.${cls}-input`)) e.preventDefault();
-						inputRef.value?.focus();
+						const inputNode = containerRef.value?.querySelector(`.${cls}-input`);
+						if (!isSlotMode.value && e.target !== inputNode) e.preventDefault();
+						if (e.target === inputNode || e.target === containerRef.value) inputRef.value?.focus();
 					}
 				}, [
 					prefixNode && createVNode("div", {
@@ -289,7 +335,7 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 						],
 						"style": [contextConfig.value.styles?.prefix, props.styles.prefix]
 					}, [prefixNode]),
-					createVNode(TextArea_default, { "ref": inputRef }, null),
+					isSlotMode.value ? createVNode(SlotTextArea_default, { "ref": inputRef }, null) : createVNode(TextArea_default, { "ref": inputRef }, null),
 					suffixNode && createVNode("div", {
 						"class": [
 							actionListCls,

package/dist/sender/SenderSwitch.js

@@ -121,7 +121,7 @@ var SenderSwitch_default = /* @__PURE__ */ defineComponent({
 				"class": [`${cls}-content`, props.classNames.content],
 				"style": props.styles.content
 			}, {
-				classNames: {
+				classes: {
 					icon: props.classNames.icon,
 					content: props.classNames.title
 				},

package/dist/sender/components/ActionButton.d.ts

@@ -46,10 +46,6 @@ declare const ActionButton: import('vue').DefineComponent<import('vue').ExtractP
         type: PropType<ButtonProps["variant"]>;
         default: undefined;
     };
-    class: {
-        type: StringConstructor;
-        default: undefined;
-    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     action: {
         type: PropType<ActionType>;
@@ -79,16 +75,11 @@ declare const ActionButton: import('vue').DefineComponent<import('vue').ExtractP
         type: PropType<ButtonProps["variant"]>;
         default: undefined;
     };
-    class: {
-        type: StringConstructor;
-        default: undefined;
-    };
 }>> & Readonly<{}>, {
     color: "blue" | "purple" | "cyan" | "green" | "magenta" | "pink" | "red" | "orange" | "yellow" | "volcano" | "geekblue" | "lime" | "gold" | "default" | "danger" | "primary" | undefined;
     icon: Record<string, any>;
     disabled: boolean;
     type: "dashed" | "text" | "default" | "link" | "primary" | undefined;
-    class: string;
     variant: "dashed" | "solid" | "text" | "filled" | "link" | "outlined" | undefined;
     shape: "round" | "default" | "square" | "circle" | undefined;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/sender/components/ActionButton.js

@@ -39,10 +39,6 @@ var ActionButton = /* @__PURE__ */ defineComponent({
 		variant: {
 			type: String,
 			default: void 0
-		},
-		class: {
-			type: String,
-			default: void 0
 		}
 	},
 	setup(props, { attrs }) {
@@ -65,7 +61,7 @@ var ActionButton = /* @__PURE__ */ defineComponent({
 				"disabled": mergedDisabled.value,
 				"class": [
 					prefixCls,
-					props.class,
+					attrs.class,
 					{ [`${prefixCls}-disabled`]: mergedDisabled.value }
 				],
 				"onClick": (e) => {

package/dist/sender/components/Skill.d.ts

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import { SkillType } from '../interface';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+        required: true;
+    };
+    skill: {
+        type: PropType<SkillType>;
+        required: true;
+    };
+    removeSkill: {
+        type: PropType<() => void>;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+        required: true;
+    };
+    skill: {
+        type: PropType<SkillType>;
+        required: true;
+    };
+    removeSkill: {
+        type: PropType<() => void>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/sender/components/Skill.js

@@ -0,0 +1,61 @@
+import { classNames } from "@v-c/util";
+import { computed, createVNode, defineComponent, isVNode } from "vue";
+import { Tooltip } from "antdv-next";
+import { CloseOutlined } from "@antdv-next/icons";
+//#region components/sender/components/Skill.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var Skill_default = /* @__PURE__ */ defineComponent({
+	name: "SenderSkill",
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		skill: {
+			type: Object,
+			required: true
+		},
+		removeSkill: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		const componentCls = computed(() => `${props.prefixCls}-skill`);
+		const closeNode = computed(() => {
+			const closable = props.skill.closable;
+			if (!closable) return null;
+			const config = typeof closable === "boolean" ? {} : closable;
+			const closeIcon = config.closeIcon ?? createVNode(CloseOutlined, { "class": `${componentCls.value}-close-icon` }, null);
+			return createVNode("div", {
+				"class": classNames([`${componentCls.value}-close`, { [`${componentCls.value}-close-disabled`]: config.disabled }]),
+				"role": "button",
+				"aria-label": "Close skill",
+				"tabindex": 0,
+				"onClick": (event) => {
+					if (config.disabled) return;
+					event.stopPropagation();
+					props.removeSkill();
+					config.onClose?.(event);
+				}
+			}, [closeIcon]);
+		});
+		return () => {
+			const mergeTitle = props.skill.title ?? props.skill.value;
+			const titleNode = props.skill.toolTip ? createVNode(Tooltip, props.skill.toolTip, _isSlot(mergeTitle) ? mergeTitle : { default: () => [mergeTitle] }) : mergeTitle;
+			return createVNode("div", {
+				"class": `${componentCls.value}-wrapper`,
+				"contenteditable": false
+			}, [createVNode("div", {
+				"class": `${componentCls.value}-tag`,
+				"contenteditable": false,
+				"role": "button",
+				"tabindex": 0
+			}, [createVNode("span", { "class": `${componentCls.value}-tag-text` }, [titleNode]), closeNode.value]), createVNode("div", { "class": `${componentCls.value}-holder` }, null)]);
+		};
+	}
+});
+//#endregion
+export { Skill_default as default };

package/dist/sender/components/SlotTextArea.d.ts

@@ -0,0 +1,20 @@
+import { InsertPosition, SkillType, SlotConfigType } from '../interface';
+type SlotFocusOptions = {
+    preventScroll?: boolean;
+    cursor?: "start" | "end" | "all" | "slot";
+    key?: string;
+};
+export interface SlotTextAreaRef {
+    nativeElement: HTMLDivElement | null;
+    focus: (options?: SlotFocusOptions) => void;
+    blur: () => void;
+    insert: (slotConfig: SlotConfigType[], position?: InsertPosition, replaceCharacters?: string, preventScroll?: boolean) => void;
+    clear: () => void;
+    getValue: () => {
+        value: string;
+        slotConfig: SlotConfigType[];
+        skill?: SkillType;
+    };
+}
+declare const _default: import('vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;