@v-c/select 0.0.1

package/dist/SelectInput/Content/index.js

@@ -0,0 +1,36 @@
+import useBaseProps from "../../hooks/useBaseProps.js";
+import { useSelectInputContext } from "../context.js";
+import MultipleContent_default from "./MultipleContent.js";
+import SingleContent_default from "./SingleContent.js";
+import { computed, createVNode, defineComponent, shallowRef } from "vue";
+import pickAttrs from "@v-c/util/dist/pickAttrs";
+var Content_default = /* @__PURE__ */ defineComponent((_, { expose }) => {
+	const selectInputContext = useSelectInputContext();
+	const baseProps = useBaseProps();
+	const inputRef = shallowRef();
+	expose({ input: computed(() => inputRef.value?.input) });
+	const multiple = computed(() => selectInputContext.value?.multiple);
+	const onInputKeyDown = computed(() => selectInputContext.value?.onInputKeyDown);
+	const showSearch = computed(() => baseProps.value?.showSearch);
+	const ariaProps = computed(() => pickAttrs(baseProps.value ?? {}, { aria: true }));
+	const sharedInputProps = computed(() => ({
+		...ariaProps.value,
+		onKeyDown: onInputKeyDown.value,
+		readonly: !showSearch.value,
+		tabindex: baseProps.value?.tabIndex
+	}));
+	return () => {
+		if (multiple.value) return createVNode(MultipleContent_default, {
+			"ref": inputRef,
+			"inputProps": sharedInputProps.value
+		}, null);
+		return createVNode(SingleContent_default, {
+			"ref": inputRef,
+			"inputProps": sharedInputProps.value
+		}, null);
+	};
+}, {
+	name: "SelectContent",
+	inheritAttrs: false
+});
+export { Content_default as default };

package/dist/SelectInput/Input.cjs

@@ -0,0 +1,176 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_useBaseProps = require("../hooks/useBaseProps.cjs");
+const require_context = require("./context.cjs");
+let vue = require("vue");
+let __v_c_util = require("@v-c/util");
+let __v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
+var Input = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs }) => {
+	const selectInputContext = require_context.useSelectInputContext();
+	const baseProps = require_useBaseProps.default();
+	const compositionStatusRef = (0, vue.shallowRef)(false);
+	const pastedTextRef = (0, vue.shallowRef)(null);
+	const inputRef = (0, vue.shallowRef)();
+	expose({ input: inputRef });
+	const handleChange = (event) => {
+		const { tokenWithEnter, onSearch } = selectInputContext.value ?? {};
+		let { value: nextVal } = event.target;
+		if (tokenWithEnter && pastedTextRef.value && /[\r\n]/.test(pastedTextRef.value)) {
+			const replacedText = pastedTextRef.value.replace(/[\r\n]+$/, "").replace(/\r\n/g, " ").replace(/[\r\n]/g, " ");
+			nextVal = nextVal.replace(replacedText, pastedTextRef.value);
+		}
+		pastedTextRef.value = null;
+		if (onSearch) onSearch(nextVal, true, compositionStatusRef.value);
+		props?.onChange?.(event);
+	};
+	const handleKeyDown = (event) => {
+		const { mode, onSearchSubmit } = selectInputContext.value ?? {};
+		const { key } = event;
+		const { value: nextVal } = event.currentTarget;
+		if (key === __v_c_util_dist_KeyCode.KeyCodeStr.Enter && mode === "tags" && !compositionStatusRef.value && onSearchSubmit) onSearchSubmit(nextVal);
+		props?.onKeyDown?.(event);
+	};
+	const handleBlur = (event) => {
+		const { onInputBlur } = selectInputContext.value ?? {};
+		onInputBlur?.();
+		props?.onBlur?.(event);
+	};
+	const handleCompositionStart = () => {
+		compositionStatusRef.value = true;
+	};
+	const handleCompositionEnd = (event) => {
+		const { mode, onSearch } = selectInputContext.value ?? {};
+		compositionStatusRef.value = false;
+		if (mode !== "combobox") {
+			const { value: nextVal } = event.currentTarget;
+			onSearch?.(nextVal, true, false);
+		}
+	};
+	const handlePaste = (event) => {
+		const { clipboardData } = event;
+		pastedTextRef.value = clipboardData?.getData?.("text") || "";
+	};
+	const widthCssVar = (0, vue.shallowRef)();
+	(0, vue.watch)([() => props.syncWidth, () => props.value], async () => {
+		await (0, vue.nextTick)();
+		const input = inputRef.value;
+		if (props.syncWidth && input) {
+			input.style.width = "0px";
+			widthCssVar.value = input.scrollWidth;
+			input.style.width = "";
+		}
+	}, { immediate: true });
+	return () => {
+		const { style, autoComplete, className, value } = props;
+		const { prefixCls, mode, autoFocus, placeholder } = selectInputContext.value ?? {};
+		const { input: InputComponent = "input" } = selectInputContext.value?.components ?? {};
+		const { styles, id, classNames, open, activeDescendantId, role, disabled } = baseProps.value ?? {};
+		const inputCls = (0, __v_c_util.clsx)(`${prefixCls}-input`, classNames?.input, className);
+		const sharedInputProps = {
+			id,
+			"type": mode === "combobox" ? "text" : "search",
+			...attrs,
+			"ref": inputRef,
+			"style": {
+				...styles?.input,
+				...style,
+				"--select-input-width": widthCssVar.value
+			},
+			autoFocus,
+			"autocomplete": autoComplete || "off",
+			"class": inputCls,
+			disabled,
+			"value": value || "",
+			"onInput": handleChange,
+			"onKeydown": handleKeyDown,
+			"onBlur": handleBlur,
+			"onPaste": handlePaste,
+			"onCompositionstart": handleCompositionStart,
+			"onCompositionend": handleCompositionEnd,
+			"role": role || "combobox",
+			"aria-expanded": open || false,
+			"aria-haspopup": "listbox",
+			"aria-owns": `${id}_list`,
+			"aria-autocomplete": "list",
+			"aria-controls": `${id}_list`,
+			"aria-activedescendant": open ? activeDescendantId : void 0
+		};
+		if ((0, vue.isVNode)(InputComponent)) return (0, vue.createVNode)(InputComponent, {
+			placeholder: props.placeholder || placeholder,
+			...sharedInputProps
+		});
+		return (0, vue.createVNode)(InputComponent, sharedInputProps, null);
+	};
+}, {
+	props: {
+		id: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		value: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onKeyDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onFocus: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onBlur: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		className: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		maxLength: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		syncWidth: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		autoComplete: {
+			type: String,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "Input",
+	inheritAttrs: false
+});
+var Input_default = Input;
+exports.default = Input_default;

package/dist/SelectInput/Input.d.ts

@@ -0,0 +1,22 @@
+export interface InputProps {
+    id?: string;
+    readOnly?: boolean;
+    value?: string;
+    onChange?: (event: Event) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    placeholder?: string;
+    className?: string;
+    style?: Record<string, any>;
+    maxLength?: number;
+    /** width always match content width */
+    syncWidth?: boolean;
+    /** autoComplete for input */
+    autoComplete?: string;
+}
+export interface InputRef {
+    input: HTMLInputElement;
+}
+declare const Input: import('vue').DefineSetupFnComponent<InputProps, {}, {}, InputProps & {}, import('vue').PublicProps>;
+export default Input;

package/dist/SelectInput/Input.js

@@ -0,0 +1,173 @@
+import useBaseProps from "../hooks/useBaseProps.js";
+import { useSelectInputContext } from "./context.js";
+import { createVNode, defineComponent, isVNode, nextTick, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { KeyCodeStr } from "@v-c/util/dist/KeyCode";
+var Input_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
+	const selectInputContext = useSelectInputContext();
+	const baseProps = useBaseProps();
+	const compositionStatusRef = shallowRef(false);
+	const pastedTextRef = shallowRef(null);
+	const inputRef = shallowRef();
+	expose({ input: inputRef });
+	const handleChange = (event) => {
+		const { tokenWithEnter, onSearch } = selectInputContext.value ?? {};
+		let { value: nextVal } = event.target;
+		if (tokenWithEnter && pastedTextRef.value && /[\r\n]/.test(pastedTextRef.value)) {
+			const replacedText = pastedTextRef.value.replace(/[\r\n]+$/, "").replace(/\r\n/g, " ").replace(/[\r\n]/g, " ");
+			nextVal = nextVal.replace(replacedText, pastedTextRef.value);
+		}
+		pastedTextRef.value = null;
+		if (onSearch) onSearch(nextVal, true, compositionStatusRef.value);
+		props?.onChange?.(event);
+	};
+	const handleKeyDown = (event) => {
+		const { mode, onSearchSubmit } = selectInputContext.value ?? {};
+		const { key } = event;
+		const { value: nextVal } = event.currentTarget;
+		if (key === KeyCodeStr.Enter && mode === "tags" && !compositionStatusRef.value && onSearchSubmit) onSearchSubmit(nextVal);
+		props?.onKeyDown?.(event);
+	};
+	const handleBlur = (event) => {
+		const { onInputBlur } = selectInputContext.value ?? {};
+		onInputBlur?.();
+		props?.onBlur?.(event);
+	};
+	const handleCompositionStart = () => {
+		compositionStatusRef.value = true;
+	};
+	const handleCompositionEnd = (event) => {
+		const { mode, onSearch } = selectInputContext.value ?? {};
+		compositionStatusRef.value = false;
+		if (mode !== "combobox") {
+			const { value: nextVal } = event.currentTarget;
+			onSearch?.(nextVal, true, false);
+		}
+	};
+	const handlePaste = (event) => {
+		const { clipboardData } = event;
+		pastedTextRef.value = clipboardData?.getData?.("text") || "";
+	};
+	const widthCssVar = shallowRef();
+	watch([() => props.syncWidth, () => props.value], async () => {
+		await nextTick();
+		const input = inputRef.value;
+		if (props.syncWidth && input) {
+			input.style.width = "0px";
+			widthCssVar.value = input.scrollWidth;
+			input.style.width = "";
+		}
+	}, { immediate: true });
+	return () => {
+		const { style, autoComplete, className, value } = props;
+		const { prefixCls, mode, autoFocus, placeholder } = selectInputContext.value ?? {};
+		const { input: InputComponent = "input" } = selectInputContext.value?.components ?? {};
+		const { styles, id, classNames, open, activeDescendantId, role, disabled } = baseProps.value ?? {};
+		const inputCls = clsx(`${prefixCls}-input`, classNames?.input, className);
+		const sharedInputProps = {
+			id,
+			"type": mode === "combobox" ? "text" : "search",
+			...attrs,
+			"ref": inputRef,
+			"style": {
+				...styles?.input,
+				...style,
+				"--select-input-width": widthCssVar.value
+			},
+			autoFocus,
+			"autocomplete": autoComplete || "off",
+			"class": inputCls,
+			disabled,
+			"value": value || "",
+			"onInput": handleChange,
+			"onKeydown": handleKeyDown,
+			"onBlur": handleBlur,
+			"onPaste": handlePaste,
+			"onCompositionstart": handleCompositionStart,
+			"onCompositionend": handleCompositionEnd,
+			"role": role || "combobox",
+			"aria-expanded": open || false,
+			"aria-haspopup": "listbox",
+			"aria-owns": `${id}_list`,
+			"aria-autocomplete": "list",
+			"aria-controls": `${id}_list`,
+			"aria-activedescendant": open ? activeDescendantId : void 0
+		};
+		if (isVNode(InputComponent)) return createVNode(InputComponent, {
+			placeholder: props.placeholder || placeholder,
+			...sharedInputProps
+		});
+		return createVNode(InputComponent, sharedInputProps, null);
+	};
+}, {
+	props: {
+		id: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		value: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onKeyDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onFocus: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onBlur: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		className: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		maxLength: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		syncWidth: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		autoComplete: {
+			type: String,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "Input",
+	inheritAttrs: false
+});
+export { Input_default as default };

package/dist/SelectInput/context.cjs

@@ -0,0 +1,11 @@
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var SelectInputKey = Symbol("SelectInputContext");
+function useSelectInputContext() {
+	return (0, vue.inject)(SelectInputKey, (0, vue.ref)(null));
+}
+function useSelectInputProvider(context) {
+	(0, vue.provide)(SelectInputKey, context);
+}
+exports.useSelectInputContext = useSelectInputContext;
+exports.useSelectInputProvider = useSelectInputProvider;

package/dist/SelectInput/context.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+import { SelectInputProps } from '.';
+export type ContentContextProps = SelectInputProps;
+export declare function useSelectInputContext(): Ref<ContentContextProps | null>;
+export declare function useSelectInputProvider(context: Ref<ContentContextProps>): void;

package/dist/SelectInput/context.js

@@ -0,0 +1,9 @@
+import { inject, provide, ref } from "vue";
+var SelectInputKey = Symbol("SelectInputContext");
+function useSelectInputContext() {
+	return inject(SelectInputKey, ref(null));
+}
+function useSelectInputProvider(context) {
+	provide(SelectInputKey, context);
+}
+export { useSelectInputContext, useSelectInputProvider };