@v-c/select 0.0.1

package/dist/SelectInput/index.cjs

@@ -0,0 +1,330 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_useBaseProps = require("../hooks/useBaseProps.cjs");
+const require_keyUtil = require("../utils/keyUtil.cjs");
+const require_Affix = require("./Affix.cjs");
+const require_context = require("./context.cjs");
+const require_index = require("./Content/index.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");
+__v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(__v_c_util_dist_KeyCode);
+let __v_c_util_dist_omit = require("@v-c/util/dist/omit");
+__v_c_util_dist_omit = require_rolldown_runtime.__toESM(__v_c_util_dist_omit);
+let __v_c_util_dist_Dom_findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
+var DEFAULT_OMIT_PROPS = [
+	"value",
+	"onChange",
+	"removeIcon",
+	"placeholder",
+	"maxTagCount",
+	"maxTagTextLength",
+	"maxTagPlaceholder",
+	"choiceTransitionName",
+	"onInputKeyDown",
+	"onPopupScroll",
+	"tabIndex",
+	"activeValue",
+	"onSelectorRemove",
+	"focused"
+];
+var SelectInput = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, expose, slots }) => {
+	const baseProps = require_useBaseProps.default();
+	const rootRef = (0, vue.shallowRef)();
+	const inputRef = (0, vue.shallowRef)();
+	const prefixCls = (0, vue.computed)(() => props.prefixCls);
+	const className = (0, vue.computed)(() => props.className);
+	const style = (0, vue.computed)(() => props.style);
+	const prefix = (0, vue.computed)(() => props.prefix);
+	const suffix = (0, vue.computed)(() => props.suffix);
+	const clearIcon = (0, vue.computed)(() => props.clearIcon);
+	const multiple = (0, vue.computed)(() => props.multiple);
+	const mode = (0, vue.computed)(() => props.mode);
+	const onClearMouseDown = (0, vue.computed)(() => props.onClearMouseDown);
+	const onInputKeyDown = (0, vue.computed)(() => props.onInputKeyDown);
+	const components = (0, vue.computed)(() => props.components);
+	const triggerOpen = (0, vue.computed)(() => baseProps.value?.triggerOpen ?? false);
+	const toggleOpen = (0, vue.computed)(() => baseProps.value?.toggleOpen);
+	const showSearch = (0, vue.computed)(() => baseProps.value?.showSearch ?? false);
+	const disabled = (0, vue.computed)(() => baseProps.value?.disabled ?? false);
+	const loading = (0, vue.computed)(() => baseProps.value?.loading ?? false);
+	const classNamesConfig = (0, vue.computed)(() => baseProps.value?.classNames);
+	const stylesConfig = (0, vue.computed)(() => baseProps.value?.styles);
+	const onInternalInputKeyDown = (event) => {
+		const { keyCode } = event;
+		const isTextAreaElement = inputRef.value?.input instanceof HTMLTextAreaElement;
+		if (!isTextAreaElement && triggerOpen.value && (keyCode === __v_c_util_dist_KeyCode.default.UP || keyCode === __v_c_util_dist_KeyCode.default.DOWN)) event.preventDefault();
+		if (onInputKeyDown.value) onInputKeyDown.value(event);
+		if (isTextAreaElement && !triggerOpen.value && [
+			__v_c_util_dist_KeyCode.default.UP,
+			__v_c_util_dist_KeyCode.default.DOWN,
+			__v_c_util_dist_KeyCode.default.LEFT,
+			__v_c_util_dist_KeyCode.default.RIGHT
+		].includes(keyCode)) return;
+		if (require_keyUtil.isValidateOpenKey(keyCode)) toggleOpen.value?.(true);
+	};
+	expose({
+		focus: (options) => {
+			(inputRef.value?.input || rootRef.value)?.focus?.(options);
+		},
+		blur: () => {
+			(inputRef.value?.input || rootRef.value)?.blur?.();
+		},
+		nativeElement: rootRef
+	});
+	const onInternalMouseDown = (event) => {
+		if (!disabled.value) {
+			if (event.target !== (0, __v_c_util_dist_Dom_findDOMNode.getDOM)(inputRef.value?.input)) event.preventDefault();
+			const shouldPreventClose = triggerOpen.value && !multiple.value && (mode.value === "combobox" || showSearch.value);
+			if (!event._select_lazy) {
+				inputRef.value?.input?.focus();
+				if (!shouldPreventClose) toggleOpen.value?.();
+			} else if (triggerOpen.value) toggleOpen.value?.(false);
+		}
+		const onMouseDown = attrs.onMousedown;
+		onMouseDown?.(event);
+	};
+	const onInternalBlur = (event) => {
+		toggleOpen.value?.(false);
+		const onBlur = attrs.onBlur;
+		onBlur?.(event);
+	};
+	require_context.useSelectInputProvider((0, vue.computed)(() => ({
+		...props,
+		onInputKeyDown: onInternalInputKeyDown
+	})));
+	return () => {
+		const RootComponent = components.value?.root;
+		const domProps = (0, __v_c_util_dist_omit.default)({ ...attrs }, DEFAULT_OMIT_PROPS);
+		if (RootComponent) {
+			if ((0, vue.isVNode)(RootComponent)) return (0, vue.createVNode)(RootComponent, {
+				...domProps,
+				ref: rootRef
+			});
+			return (0, vue.createVNode)(RootComponent, (0, vue.mergeProps)(domProps, { "ref": rootRef }), null);
+		}
+		return (0, vue.createVNode)("div", (0, vue.mergeProps)(domProps, {
+			"ref": rootRef,
+			"class": className.value,
+			"style": style.value,
+			"onMousedown": onInternalMouseDown,
+			"onBlur": onInternalBlur
+		}), [
+			(0, vue.createVNode)(require_Affix.default, {
+				"class": (0, __v_c_util.clsx)(`${prefixCls.value}-prefix`, classNamesConfig.value?.prefix),
+				"style": stylesConfig.value?.prefix
+			}, { default: () => [prefix.value] }),
+			(0, vue.createVNode)(require_index.default, { "ref": inputRef }, null),
+			(0, vue.createVNode)(require_Affix.default, {
+				"class": (0, __v_c_util.clsx)(`${prefixCls.value}-suffix`, { [`${prefixCls.value}-suffix-loading`]: loading.value }, classNamesConfig.value?.suffix),
+				"style": stylesConfig.value?.suffix
+			}, { default: () => [suffix.value] }),
+			clearIcon.value && (0, vue.createVNode)(require_Affix.default, {
+				"class": (0, __v_c_util.clsx)(`${prefixCls.value}-clear`, classNamesConfig.value?.clear),
+				"style": stylesConfig.value?.clear,
+				"onMousedown": (e) => {
+					e._select_lazy = true;
+					onClearMouseDown.value?.(e);
+				}
+			}, { default: () => [clearIcon.value] }),
+			slots.default?.()
+		]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		prefix: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		suffix: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		clearIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		removeIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		displayValues: {
+			type: Array,
+			required: true,
+			default: void 0
+		},
+		placeholder: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		searchValue: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		activeValue: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		mode: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		autoClearSearchValue: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onSearch: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onSearchSubmit: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onInputBlur: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onClearMouseDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onInputKeyDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onSelectorRemove: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		maxLength: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		tokenWithEnter: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		className: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		focused: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		components: {
+			type: Object,
+			required: true,
+			default: void 0
+		},
+		onFocus: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onBlur: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onKeyDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onKeyUp: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onMouseDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "SelectInput",
+	inheritAttrs: false
+});
+var SelectInput_default = SelectInput;
+exports.default = SelectInput_default;

package/dist/SelectInput/index.d.ts

@@ -0,0 +1,44 @@
+import { VueNode } from '@v-c/util/dist/type';
+import { CSSProperties } from 'vue';
+import { ComponentsConfig } from '../hooks';
+import { DisplayValueType, Mode, RenderNode } from '../interface';
+export interface SelectInputRef {
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+    nativeElement: HTMLDivElement;
+}
+export interface SelectInputProps {
+    prefixCls: string;
+    prefix?: VueNode;
+    suffix?: VueNode;
+    clearIcon?: VueNode;
+    removeIcon?: RenderNode;
+    multiple?: boolean;
+    displayValues: DisplayValueType[];
+    placeholder?: VueNode;
+    searchValue?: string;
+    activeValue?: string;
+    mode?: Mode;
+    autoClearSearchValue?: boolean;
+    onSearch?: (searchText: string, fromTyping: boolean, isCompositing: boolean) => void;
+    onSearchSubmit?: (searchText: string) => void;
+    onInputBlur?: () => void;
+    onClearMouseDown?: (event: MouseEvent) => void;
+    onInputKeyDown?: (event: KeyboardEvent) => void;
+    onSelectorRemove?: (value: DisplayValueType) => void;
+    maxLength?: number;
+    autoFocus?: boolean;
+    /** Check if `tokenSeparators` contains `\n` or `\r\n` */
+    tokenWithEnter?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    focused?: boolean;
+    components: ComponentsConfig;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    onMouseDown?: (event: MouseEvent) => void;
+}
+declare const SelectInput: import('vue').DefineSetupFnComponent<SelectInputProps, {}, {}, SelectInputProps & {}, import('vue').PublicProps>;
+export default SelectInput;

package/dist/SelectInput/index.js

@@ -0,0 +1,325 @@
+import useBaseProps from "../hooks/useBaseProps.js";
+import { isValidateOpenKey } from "../utils/keyUtil.js";
+import Affix_default from "./Affix.js";
+import { useSelectInputProvider } from "./context.js";
+import Content_default from "./Content/index.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
+import KeyCode from "@v-c/util/dist/KeyCode";
+import omit from "@v-c/util/dist/omit";
+import { getDOM } from "@v-c/util/dist/Dom/findDOMNode";
+var DEFAULT_OMIT_PROPS = [
+	"value",
+	"onChange",
+	"removeIcon",
+	"placeholder",
+	"maxTagCount",
+	"maxTagTextLength",
+	"maxTagPlaceholder",
+	"choiceTransitionName",
+	"onInputKeyDown",
+	"onPopupScroll",
+	"tabIndex",
+	"activeValue",
+	"onSelectorRemove",
+	"focused"
+];
+var SelectInput_default = /* @__PURE__ */ defineComponent((props, { attrs, expose, slots }) => {
+	const baseProps = useBaseProps();
+	const rootRef = shallowRef();
+	const inputRef = shallowRef();
+	const prefixCls = computed(() => props.prefixCls);
+	const className = computed(() => props.className);
+	const style = computed(() => props.style);
+	const prefix = computed(() => props.prefix);
+	const suffix = computed(() => props.suffix);
+	const clearIcon = computed(() => props.clearIcon);
+	const multiple = computed(() => props.multiple);
+	const mode = computed(() => props.mode);
+	const onClearMouseDown = computed(() => props.onClearMouseDown);
+	const onInputKeyDown = computed(() => props.onInputKeyDown);
+	const components = computed(() => props.components);
+	const triggerOpen = computed(() => baseProps.value?.triggerOpen ?? false);
+	const toggleOpen = computed(() => baseProps.value?.toggleOpen);
+	const showSearch = computed(() => baseProps.value?.showSearch ?? false);
+	const disabled = computed(() => baseProps.value?.disabled ?? false);
+	const loading = computed(() => baseProps.value?.loading ?? false);
+	const classNamesConfig = computed(() => baseProps.value?.classNames);
+	const stylesConfig = computed(() => baseProps.value?.styles);
+	const onInternalInputKeyDown = (event) => {
+		const { keyCode } = event;
+		const isTextAreaElement = inputRef.value?.input instanceof HTMLTextAreaElement;
+		if (!isTextAreaElement && triggerOpen.value && (keyCode === KeyCode.UP || keyCode === KeyCode.DOWN)) event.preventDefault();
+		if (onInputKeyDown.value) onInputKeyDown.value(event);
+		if (isTextAreaElement && !triggerOpen.value && [
+			KeyCode.UP,
+			KeyCode.DOWN,
+			KeyCode.LEFT,
+			KeyCode.RIGHT
+		].includes(keyCode)) return;
+		if (isValidateOpenKey(keyCode)) toggleOpen.value?.(true);
+	};
+	expose({
+		focus: (options) => {
+			(inputRef.value?.input || rootRef.value)?.focus?.(options);
+		},
+		blur: () => {
+			(inputRef.value?.input || rootRef.value)?.blur?.();
+		},
+		nativeElement: rootRef
+	});
+	const onInternalMouseDown = (event) => {
+		if (!disabled.value) {
+			if (event.target !== getDOM(inputRef.value?.input)) event.preventDefault();
+			const shouldPreventClose = triggerOpen.value && !multiple.value && (mode.value === "combobox" || showSearch.value);
+			if (!event._select_lazy) {
+				inputRef.value?.input?.focus();
+				if (!shouldPreventClose) toggleOpen.value?.();
+			} else if (triggerOpen.value) toggleOpen.value?.(false);
+		}
+		const onMouseDown = attrs.onMousedown;
+		onMouseDown?.(event);
+	};
+	const onInternalBlur = (event) => {
+		toggleOpen.value?.(false);
+		const onBlur = attrs.onBlur;
+		onBlur?.(event);
+	};
+	useSelectInputProvider(computed(() => ({
+		...props,
+		onInputKeyDown: onInternalInputKeyDown
+	})));
+	return () => {
+		const RootComponent = components.value?.root;
+		const domProps = omit({ ...attrs }, DEFAULT_OMIT_PROPS);
+		if (RootComponent) {
+			if (isVNode(RootComponent)) return createVNode(RootComponent, {
+				...domProps,
+				ref: rootRef
+			});
+			return createVNode(RootComponent, mergeProps(domProps, { "ref": rootRef }), null);
+		}
+		return createVNode("div", mergeProps(domProps, {
+			"ref": rootRef,
+			"class": className.value,
+			"style": style.value,
+			"onMousedown": onInternalMouseDown,
+			"onBlur": onInternalBlur
+		}), [
+			createVNode(Affix_default, {
+				"class": clsx(`${prefixCls.value}-prefix`, classNamesConfig.value?.prefix),
+				"style": stylesConfig.value?.prefix
+			}, { default: () => [prefix.value] }),
+			createVNode(Content_default, { "ref": inputRef }, null),
+			createVNode(Affix_default, {
+				"class": clsx(`${prefixCls.value}-suffix`, { [`${prefixCls.value}-suffix-loading`]: loading.value }, classNamesConfig.value?.suffix),
+				"style": stylesConfig.value?.suffix
+			}, { default: () => [suffix.value] }),
+			clearIcon.value && createVNode(Affix_default, {
+				"class": clsx(`${prefixCls.value}-clear`, classNamesConfig.value?.clear),
+				"style": stylesConfig.value?.clear,
+				"onMousedown": (e) => {
+					e._select_lazy = true;
+					onClearMouseDown.value?.(e);
+				}
+			}, { default: () => [clearIcon.value] }),
+			slots.default?.()
+		]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		prefix: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		suffix: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		clearIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		removeIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		displayValues: {
+			type: Array,
+			required: true,
+			default: void 0
+		},
+		placeholder: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		searchValue: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		activeValue: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		mode: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		autoClearSearchValue: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onSearch: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onSearchSubmit: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onInputBlur: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onClearMouseDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onInputKeyDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onSelectorRemove: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		maxLength: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		tokenWithEnter: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		className: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		focused: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		components: {
+			type: Object,
+			required: true,
+			default: void 0
+		},
+		onFocus: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onBlur: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onKeyDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onKeyUp: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onMouseDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "SelectInput",
+	inheritAttrs: false
+});
+export { SelectInput_default as default };