@antdv-next/x 0.0.2 → 0.0.4

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

@@ -1,7 +1,5 @@
+import { SenderFocusOptions } from '../interface';
 export type InsertPosition = "start" | "end" | "cursor";
-export interface SenderFocusOptions extends FocusOptions {
-    cursor?: "start" | "end" | "all";
-}
 export interface TextAreaRef {
     nativeElement: HTMLTextAreaElement | null;
     focus: (options?: SenderFocusOptions) => void;

package/dist/sender/context.d.ts

@@ -2,6 +2,7 @@ import { ComputedRef, InjectionKey } from 'vue';
 import { SenderProps } from './interface';
 export interface SenderContextValue extends SenderProps {
     triggerSend?: () => void;
+    setSubmitDisabled?: (disabled: boolean) => void;
 }
 export declare const SenderContextKey: InjectionKey<ComputedRef<SenderContextValue>>;
 export declare function useSenderContext(): ComputedRef<SenderContextValue>;

package/dist/sender/index.d.ts

@@ -1,8 +1,8 @@
-import { SenderProps, SenderRef } from './interface';
+import { SenderProps, SenderRef, SlotConfigType } from './interface';
 import { default as ForwardSender } from './Sender';
 import { default as SenderHeader } from './SenderHeader';
 import { default as SenderSwitch } from './SenderSwitch';
-export type { SenderProps, SenderRef };
+export type { SenderProps, SenderRef, SlotConfigType };
 type CompoundedSender = typeof ForwardSender & {
     Header: typeof SenderHeader;
     Switch: typeof SenderSwitch;

package/dist/sender/interface.d.ts

@@ -120,7 +120,8 @@ export interface SenderProps {
     placeholder?: string;
 }
 export interface SenderFocusOptions extends FocusOptions {
-    cursor?: "start" | "end" | "all";
+    cursor?: "start" | "end" | "all" | "slot";
+    key?: string;
 }
 export interface SenderRef {
     nativeElement: HTMLDivElement;

package/dist/sender/style/index.d.ts

@@ -1,5 +1,12 @@
 import { FullToken, GetDefaultToken } from '../../theme/interface';
 export interface ComponentToken {
+    colorBgSlot: string;
+    colorTextSlot: string;
+    colorTextSlotPlaceholder: string;
+    colorBorderSlot: string;
+    colorBorderSlotHover: string;
+    colorBgSkill: string;
+    colorBgSkillHover: string;
     colorBorderInput: string;
     switchCheckedBg: string;
     switchCheckedHoverBg: string;

package/dist/sender/style/index.js

@@ -1,5 +1,6 @@
 import { genStyleHooks } from "../../theme/genStyleUtils.js";
 import genSenderHeaderStyle from "./header.js";
+import genSlotTextAreaStyle from "./slot-textarea.js";
 import genSenderSwitchStyle from "./switch.js";
 import { mergeToken } from "@antdv-next/cssinjs/cssinjs-utils";
 import { FastColor } from "@ant-design/fast-color";
@@ -85,12 +86,26 @@ var genSenderStyle = (token) => {
 };
 var prepareComponentToken = (token) => {
 	const { colorPrimary, colorFillTertiary } = token;
+	const colorBgSlot = new FastColor(colorPrimary).setA(.06).toRgbString();
+	const colorBgSkill = new FastColor(colorPrimary).setA(.08).toRgbString();
+	const colorBgSkillHover = new FastColor(colorPrimary).setA(.15).toRgbString();
+	const colorTextSlot = colorPrimary;
+	const colorTextSlotPlaceholder = new FastColor(colorPrimary).setA(.25).toRgbString();
+	const colorBorderSlotHover = new FastColor(colorPrimary).setA(.1).toRgbString();
+	const colorBorderSlot = colorBgSlot;
 	const colorBorderInput = new FastColor(colorFillTertiary).setA(.1).toRgbString();
 	const switchCheckedBg = new FastColor(colorPrimary).setA(.08).toRgbString();
 	const switchCheckedHoverBg = new FastColor(colorPrimary).setA(.1).toRgbString();
 	const switchUncheckedHoverBg = new FastColor(colorFillTertiary).setA(.04).toRgbString();
 	const colorBgActionsDisabled = new FastColor(colorPrimary).setA(.45).toRgbString();
 	return {
+		colorBgSlot,
+		colorBgSkill,
+		colorBgSkillHover,
+		colorTextSlot,
+		colorTextSlotPlaceholder,
+		colorBorderSlotHover,
+		colorBorderSlot,
 		colorBorderInput,
 		switchCheckedBg,
 		switchCheckedHoverBg,
@@ -105,7 +120,8 @@ var style_default = genStyleHooks("Sender", (token) => {
 	return [
 		genSenderStyle(senderToken),
 		genSenderHeaderStyle(senderToken),
-		genSenderSwitchStyle(senderToken)
+		genSenderSwitchStyle(senderToken),
+		genSlotTextAreaStyle(senderToken)
 	];
 }, prepareComponentToken);
 //#endregion

package/dist/sender/style/slot-textarea.d.ts

@@ -0,0 +1,4 @@
+import { SenderToken } from '.';
+import { GenerateStyle } from '../../theme/interface';
+declare const genSlotTextAreaStyle: GenerateStyle<SenderToken>;
+export default genSlotTextAreaStyle;

package/dist/sender/style/slot-textarea.js

@@ -0,0 +1,187 @@
+import { unit } from "@antdv-next/cssinjs";
+//#region components/sender/style/slot-textarea.ts
+var genSlotTextAreaStyle = (token) => {
+	const { componentCls, antCls, calc } = token;
+	const slotCls = `${componentCls}-slot`;
+	const antInputCls = `${antCls}-input`;
+	const antDropdownCls = `${antCls}-dropdown-trigger`;
+	const slotInputCls = `${componentCls}-slot-input`;
+	const slotSelectCls = `${componentCls}-slot-select`;
+	const slotTagCls = `${componentCls}-slot-tag`;
+	const slotContentCls = `${componentCls}-slot-content`;
+	const skillCls = `${componentCls}-skill`;
+	return { [componentCls]: {
+		[`${componentCls}-input-slot`]: {
+			outline: "none",
+			cursor: "text",
+			whiteSpace: "pre-wrap",
+			width: "100%",
+			caretColor: token.colorPrimary,
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight,
+			[`&:empty::before`]: {
+				content: "attr(data-placeholder)",
+				color: token.colorTextPlaceholder
+			}
+		},
+		[`${slotCls}:not(${slotContentCls})`]: {
+			display: "inline-block",
+			verticalAlign: "middle",
+			alignItems: "center",
+			marginBlock: 1,
+			height: calc(token.fontSize).mul(token.lineHeight).add(2).equal(),
+			wordBreak: "break-all",
+			marginInline: token.marginXXS
+		},
+		[`${antInputCls}${slotInputCls}`]: {
+			height: "100%",
+			background: token.colorBgSlot,
+			outline: "none",
+			color: token.colorTextSlot,
+			borderRadius: token.borderRadius,
+			paddingInline: token.paddingXXS,
+			fontSize: "inherit",
+			lineHeight: "inherit",
+			position: "relative",
+			[`&::placeholder`]: {
+				color: token.colorTextSlotPlaceholder,
+				fontSize: "inherit",
+				lineHeight: "inherit"
+			}
+		},
+		[slotSelectCls]: {
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight,
+			paddingInline: token.paddingXXS,
+			transition: `border-color ${token.motionDurationMid}`,
+			position: "relative",
+			display: "inline-flex",
+			alignItems: "center",
+			cursor: "pointer",
+			background: token.colorBgSlot,
+			height: "100%",
+			boxSizing: "border-box",
+			borderRadius: token.borderRadius,
+			color: token.colorTextSlot,
+			border: `1px solid ${token.colorBorderSlot}`,
+			[`&.placeholder`]: { color: token.colorTextSlotPlaceholder },
+			[`&${antDropdownCls}-open`]: { borderColor: token.colorBorderSlotHover }
+		},
+		[`${slotSelectCls}-value`]: {
+			flex: 1,
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight,
+			[`&:empty::before`]: { content: "attr(data-placeholder)" }
+		},
+		[`${slotSelectCls}-arrow`]: {
+			marginInlineStart: token.marginXXS,
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight,
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		[slotTagCls]: {
+			background: token.colorBgSlot,
+			border: `1px solid ${token.colorBorderSlot}`,
+			outline: "none",
+			color: token.colorTextSlot,
+			borderRadius: token.borderRadius,
+			padding: `0 ${unit(token.paddingXXS)}`,
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight,
+			height: "100%",
+			boxSizing: "border-box",
+			position: "relative",
+			cursor: "default"
+		},
+		[slotContentCls]: {
+			height: calc(token.fontSize).mul(token.lineHeight).add(2).equal(),
+			caretColor: token.colorPrimary,
+			background: token.colorBgSlot,
+			outline: "none",
+			color: token.colorTextSlot,
+			borderRadius: token.borderRadius,
+			paddingInline: token.paddingXXS,
+			boxSizing: "border-box",
+			verticalAlign: "middle",
+			fontSize: token.fontSize,
+			marginBlock: 1,
+			lineHeight: token.lineHeight,
+			display: "inline-block",
+			position: "relative",
+			cursor: "text",
+			[`&:empty`]: {
+				width: "fit-content",
+				[`&::after`]: {
+					display: "inline-block",
+					height: "inherit",
+					content: "attr(data-placeholder)",
+					color: token.colorTextSlotPlaceholder
+				}
+			}
+		},
+		[`${slotCls}-no-width`]: {
+			userSelect: "none",
+			width: "3px",
+			display: "inline-block",
+			lineHeight: "inherit"
+		},
+		[skillCls]: {
+			display: "inline-block",
+			verticalAlign: "baseline",
+			alignItems: "center",
+			marginBlock: 1,
+			height: calc(token.fontSize).mul(token.lineHeight).add(2).equal(),
+			wordBreak: "break-all",
+			paddingInlineEnd: 0,
+			paddingInlineStart: 0,
+			marginInlineEnd: 0,
+			marginInlineStart: -1,
+			[`&${skillCls}-empty`]: { [`&::after`]: {
+				display: "inline-block",
+				pointerEvents: "none",
+				height: "inherit",
+				content: "attr(data-placeholder)",
+				color: token.colorTextPlaceholder
+			} }
+		},
+		[`${skillCls}-wrapper`]: {
+			height: "100%",
+			display: "inline-flex"
+		},
+		[`${skillCls}-tag`]: {
+			paddingInline: token.paddingXS,
+			height: "100%",
+			backgroundColor: token.colorBgSkill,
+			borderRadius: token.borderRadius,
+			color: token.colorPrimary,
+			alignItems: "center",
+			fontWeight: 500,
+			display: "inline-flex",
+			cursor: "pointer",
+			gap: token.marginXXS,
+			transition: `background-color ${token.motionDurationMid}`,
+			[`&:hover`]: {
+				backgroundColor: token.colorBgSkillHover,
+				[`${skillCls}-close:not(${skillCls}-close-disabled)`]: { color: token.colorPrimaryHover }
+			}
+		},
+		[`${skillCls}-close`]: {
+			fontSize: token.fontSizeSM,
+			display: "inline-flex",
+			transition: `color ${token.motionDurationMid}`,
+			color: token.colorPrimary
+		},
+		[`${skillCls}-close-disabled`]: {
+			cursor: "not-allowed",
+			color: token.colorTextDisabled
+		},
+		[`${skillCls}-holder`]: {
+			width: token.marginXS,
+			height: "100%"
+		}
+	} };
+};
+//#endregion
+export { genSlotTextAreaStyle as default };

package/dist/suggestion/useActive.js

@@ -37,20 +37,24 @@ function useActive(items, open, rtl, onCancel) {
 			case "ArrowDown":
 				offsetRow(1);
 				event.preventDefault();
+				event.stopPropagation();
 				break;
 			case "ArrowUp":
 				offsetRow(-1);
 				event.preventDefault();
+				event.stopPropagation();
 				break;
 			case "ArrowRight":
 				if (rtl.value) offsetPrev();
 				else offsetNext();
 				event.preventDefault();
+				event.stopPropagation();
 				break;
 			case "ArrowLeft":
 				if (rtl.value) offsetNext();
 				else offsetPrev();
 				event.preventDefault();
+				event.stopPropagation();
 				break;
 			case "Enter":
 				event.preventDefault();

package/dist/x-provider/index.d.ts

@@ -105,15 +105,15 @@ declare const XProvider: import('vue').DefineComponent<import('vue').ExtractProp
         override?: import('../theme/context').DesignTokenProviderProps["override"];
     }) | undefined;
     iconPrefixCls: string;
-    attachments: Pick<import('../attachments').AttachmentsProps<any>, "style" | "classes" | "styles"> | undefined;
-    bubble: Pick<import('../bubble').BubbleProps<string>, "style" | "classes" | "styles"> | undefined;
-    conversations: Pick<import('../conversations').ConversationsProps, "style" | "classes" | "styles" | "shortcutKeys"> | undefined;
-    actions: Pick<import('../actions').ActionsProps, "style" | "classes" | "styles"> | undefined;
-    fileCard: Pick<import('../file-card').FileCardProps, "style" | "classes" | "styles"> | undefined;
-    mermaid: Pick<import('../mermaid').MermaidProps, "style" | "classes" | "styles"> | undefined;
-    prompts: Pick<import('../prompts').PromptsProps, "style" | "classes" | "styles"> | undefined;
-    suggestion: Pick<import('../suggestion').SuggestionProps<any>, "style" | "classes" | "styles"> | undefined;
-    welcome: Pick<import('../welcome').WelcomeProps, "style" | "classes" | "styles"> | undefined;
+    attachments: Pick<import('..').AttachmentsProps<any>, "style" | "classes" | "styles"> | undefined;
+    bubble: Pick<import('..').BubbleProps<string>, "style" | "classes" | "styles"> | undefined;
+    conversations: Pick<import('..').ConversationsProps, "style" | "classes" | "styles" | "shortcutKeys"> | undefined;
+    actions: Pick<import('..').ActionsProps, "style" | "classes" | "styles"> | undefined;
+    fileCard: Pick<import('..').FileCardProps, "style" | "classes" | "styles"> | undefined;
+    mermaid: Pick<import('..').MermaidProps, "style" | "classes" | "styles"> | undefined;
+    prompts: Pick<import('..').PromptsProps, "style" | "classes" | "styles"> | undefined;
+    suggestion: Pick<import('..').SuggestionProps<any>, "style" | "classes" | "styles"> | undefined;
+    welcome: Pick<import('..').WelcomeProps, "style" | "classes" | "styles"> | undefined;
     locale: any;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { defaultPrefixCls, useXProviderContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antdv-next/x",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "files": [
     "dist",
     "global.d.ts"