@v-c/mentions 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 antdv-community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/DropdownMenu.cjs

@@ -0,0 +1,124 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+const require_MentionsContext = require("./MentionsContext.cjs");
+let vue = require("vue");
+let _v_c_menu = require("@v-c/menu");
+_v_c_menu = require_rolldown_runtime.__toESM(_v_c_menu);
+let _v_c_util_dist_Dom_findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+}
+var DropdownMenu = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
+	const mentionsContext = require_MentionsContext.useMentionsContext();
+	const menuRef = (0, vue.shallowRef)();
+	const activeIndex = (0, vue.computed)(() => mentionsContext.value.activeIndex);
+	const activeOption = (0, vue.computed)(() => props.options[activeIndex.value] || {});
+	const activeOptionKey = (0, vue.computed)(() => activeOption.value?.key);
+	let removeListListeners;
+	const bindListEvents = (list) => {
+		if (removeListListeners) {
+			removeListListeners();
+			removeListListeners = void 0;
+		}
+		if (!list) return;
+		const handleFocus = (event) => {
+			mentionsContext.value.onFocus?.(event);
+		};
+		const handleBlur = (event) => {
+			mentionsContext.value.onBlur?.(event);
+		};
+		const handleScroll = (event) => {
+			mentionsContext.value.onScroll?.(event);
+		};
+		list.addEventListener("focusin", handleFocus);
+		list.addEventListener("focusout", handleBlur);
+		list.addEventListener("scroll", handleScroll);
+		removeListListeners = () => {
+			list.removeEventListener("focusin", handleFocus);
+			list.removeEventListener("focusout", handleBlur);
+			list.removeEventListener("scroll", handleScroll);
+		};
+	};
+	(0, vue.watch)(() => menuRef.value?.list, (list, _, onCleanup) => {
+		if (list) list = (0, _v_c_util_dist_Dom_findDOMNode.getDOM)(list);
+		bindListEvents(list || null);
+		onCleanup(() => {
+			removeListListeners?.();
+			removeListListeners = void 0;
+		});
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	(0, vue.watch)([
+		activeIndex,
+		activeOptionKey,
+		() => props.opened
+	], () => {
+		if (!props.opened || activeIndex.value === -1) return;
+		(0, vue.nextTick)(() => {
+			const key = activeOptionKey.value;
+			if (!key) return;
+			(menuRef.value?.findItem?.({ key }))?.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		});
+	});
+	(0, vue.onBeforeUnmount)(() => {
+		removeListListeners?.();
+		removeListListeners = void 0;
+	});
+	return () => {
+		const { notFoundContent, setActiveIndex, selectOption } = mentionsContext.value;
+		const { prefixCls, options } = props;
+		const activeKey = activeOptionKey.value;
+		return (0, vue.createVNode)(_v_c_menu.default, {
+			"ref": menuRef,
+			"prefixCls": `${prefixCls}-menu`,
+			"activeKey": activeKey,
+			"onSelect": ({ key }) => {
+				const option = options.find(({ key: optionKey }) => optionKey === key);
+				if (option) selectOption(option);
+			}
+		}, { default: () => [options.map((option, index) => {
+			const { key, disabled, class: className, style, label } = option;
+			return (0, vue.createVNode)(_v_c_menu.Item, (0, vue.mergeProps)({
+				"key": key,
+				"disabled": disabled,
+				"class": className,
+				"style": style
+			}, { onMouseenter: () => {
+				setActiveIndex(index);
+			} }), _isSlot(label) ? label : { default: () => [label] });
+		}), !options.length && (0, vue.createVNode)(_v_c_menu.Item, {
+			"disabled": true,
+			"key": "notFound"
+		}, _isSlot(notFoundContent) ? notFoundContent : { default: () => [notFoundContent] })] });
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		options: {
+			type: Array,
+			required: true,
+			default: void 0
+		},
+		opened: {
+			type: Boolean,
+			required: true,
+			default: void 0
+		}
+	},
+	name: "DropdownMenu",
+	inheritAttrs: false
+});
+var DropdownMenu_default = DropdownMenu;
+exports.default = DropdownMenu_default;

package/dist/DropdownMenu.d.ts

@@ -0,0 +1,12 @@
+import { DataDrivenOptionProps } from './Mentions';
+export interface DropdownMenuProps {
+    prefixCls?: string;
+    options: DataDrivenOptionProps[];
+    opened: boolean;
+}
+/**
+ * We only use Menu to display the candidate.
+ * The focus is controlled by textarea to make accessibility easy.
+ */
+declare const DropdownMenu: import('vue').DefineSetupFnComponent<DropdownMenuProps, {}, {}, DropdownMenuProps & {}, import('vue').PublicProps>;
+export default DropdownMenu;

package/dist/DropdownMenu.js

@@ -0,0 +1,117 @@
+import { useMentionsContext } from "./MentionsContext.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, onBeforeUnmount, shallowRef, watch } from "vue";
+import Menu, { Item } from "@v-c/menu";
+import { getDOM } from "@v-c/util/dist/Dom/findDOMNode";
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var DropdownMenu_default = /* @__PURE__ */ defineComponent((props) => {
+	const mentionsContext = useMentionsContext();
+	const menuRef = shallowRef();
+	const activeIndex = computed(() => mentionsContext.value.activeIndex);
+	const activeOption = computed(() => props.options[activeIndex.value] || {});
+	const activeOptionKey = computed(() => activeOption.value?.key);
+	let removeListListeners;
+	const bindListEvents = (list) => {
+		if (removeListListeners) {
+			removeListListeners();
+			removeListListeners = void 0;
+		}
+		if (!list) return;
+		const handleFocus = (event) => {
+			mentionsContext.value.onFocus?.(event);
+		};
+		const handleBlur = (event) => {
+			mentionsContext.value.onBlur?.(event);
+		};
+		const handleScroll = (event) => {
+			mentionsContext.value.onScroll?.(event);
+		};
+		list.addEventListener("focusin", handleFocus);
+		list.addEventListener("focusout", handleBlur);
+		list.addEventListener("scroll", handleScroll);
+		removeListListeners = () => {
+			list.removeEventListener("focusin", handleFocus);
+			list.removeEventListener("focusout", handleBlur);
+			list.removeEventListener("scroll", handleScroll);
+		};
+	};
+	watch(() => menuRef.value?.list, (list, _, onCleanup) => {
+		if (list) list = getDOM(list);
+		bindListEvents(list || null);
+		onCleanup(() => {
+			removeListListeners?.();
+			removeListListeners = void 0;
+		});
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	watch([
+		activeIndex,
+		activeOptionKey,
+		() => props.opened
+	], () => {
+		if (!props.opened || activeIndex.value === -1) return;
+		nextTick(() => {
+			const key = activeOptionKey.value;
+			if (!key) return;
+			(menuRef.value?.findItem?.({ key }))?.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		});
+	});
+	onBeforeUnmount(() => {
+		removeListListeners?.();
+		removeListListeners = void 0;
+	});
+	return () => {
+		const { notFoundContent, setActiveIndex, selectOption } = mentionsContext.value;
+		const { prefixCls, options } = props;
+		const activeKey = activeOptionKey.value;
+		return createVNode(Menu, {
+			"ref": menuRef,
+			"prefixCls": `${prefixCls}-menu`,
+			"activeKey": activeKey,
+			"onSelect": ({ key }) => {
+				const option = options.find(({ key: optionKey }) => optionKey === key);
+				if (option) selectOption(option);
+			}
+		}, { default: () => [options.map((option, index) => {
+			const { key, disabled, class: className, style, label } = option;
+			return createVNode(Item, mergeProps({
+				"key": key,
+				"disabled": disabled,
+				"class": className,
+				"style": style
+			}, { onMouseenter: () => {
+				setActiveIndex(index);
+			} }), _isSlot(label) ? label : { default: () => [label] });
+		}), !options.length && createVNode(Item, {
+			"disabled": true,
+			"key": "notFound"
+		}, _isSlot(notFoundContent) ? notFoundContent : { default: () => [notFoundContent] })] });
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		options: {
+			type: Array,
+			required: true,
+			default: void 0
+		},
+		opened: {
+			type: Boolean,
+			required: true,
+			default: void 0
+		}
+	},
+	name: "DropdownMenu",
+	inheritAttrs: false
+});
+export { DropdownMenu_default as default };

package/dist/KeywordTrigger.cjs

@@ -0,0 +1,130 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+const require_DropdownMenu = require("./DropdownMenu.cjs");
+let vue = require("vue");
+let _v_c_trigger = require("@v-c/trigger");
+_v_c_trigger = require_rolldown_runtime.__toESM(_v_c_trigger);
+var BUILT_IN_PLACEMENTS = {
+	bottomRight: {
+		points: ["tl", "br"],
+		offset: [0, 4],
+		overflow: {
+			adjustX: 1,
+			adjustY: 1
+		}
+	},
+	bottomLeft: {
+		points: ["tr", "bl"],
+		offset: [0, 4],
+		overflow: {
+			adjustX: 1,
+			adjustY: 1
+		}
+	},
+	topRight: {
+		points: ["bl", "tr"],
+		offset: [0, -4],
+		overflow: {
+			adjustX: 1,
+			adjustY: 1
+		}
+	},
+	topLeft: {
+		points: ["br", "tl"],
+		offset: [0, -4],
+		overflow: {
+			adjustX: 1,
+			adjustY: 1
+		}
+	}
+};
+var KeywordTrigger = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
+	const opened = (0, vue.shallowRef)(false);
+	const dropdownPlacement = (0, vue.computed)(() => {
+		if (props.direction === "rtl") return props.placement === "top" ? "topLeft" : "bottomLeft";
+		return props.placement === "top" ? "topRight" : "bottomRight";
+	});
+	return () => {
+		const { prefixCls, options, visible, transitionName, getPopupContainer, popupClassName, popupStyle } = props;
+		const dropdownPrefix = `${prefixCls}-dropdown`;
+		const dropdownElement = (0, vue.createVNode)(require_DropdownMenu.default, {
+			"prefixCls": dropdownPrefix,
+			"options": options,
+			"opened": opened.value
+		}, null);
+		return (0, vue.createVNode)(_v_c_trigger.default, {
+			"prefixCls": dropdownPrefix,
+			"popupVisible": visible,
+			"popup": dropdownElement,
+			"popupPlacement": dropdownPlacement.value,
+			"popupMotion": { name: transitionName },
+			"builtinPlacements": BUILT_IN_PLACEMENTS,
+			"getPopupContainer": getPopupContainer,
+			"popupClassName": popupClassName,
+			"popupStyle": popupStyle,
+			"afterOpenChange": (nextOpen) => {
+				opened.value = nextOpen;
+			}
+		}, { default: () => [slots?.default?.()] });
+	};
+}, {
+	props: {
+		loading: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		options: {
+			type: Array,
+			required: true,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		placement: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		direction: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		visible: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		transitionName: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		popupClassName: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		popupStyle: {
+			type: Object,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "KeywordTrigger",
+	inheritAttrs: false
+});
+var KeywordTrigger_default = KeywordTrigger;
+exports.default = KeywordTrigger_default;

package/dist/KeywordTrigger.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'vue';
+import { DataDrivenOptionProps, Direction, Placement } from './Mentions';
+interface KeywordTriggerProps {
+    loading?: boolean;
+    options: DataDrivenOptionProps[];
+    prefixCls?: string;
+    placement?: Placement;
+    direction?: Direction;
+    visible?: boolean;
+    transitionName?: string;
+    getPopupContainer?: () => HTMLElement;
+    popupClassName?: string;
+    popupStyle?: CSSProperties;
+}
+declare const KeywordTrigger: import('vue').DefineSetupFnComponent<KeywordTriggerProps, {}, {}, KeywordTriggerProps & {}, import('vue').PublicProps>;
+export default KeywordTrigger;

package/dist/KeywordTrigger.js

@@ -0,0 +1,123 @@
+import DropdownMenu_default from "./DropdownMenu.js";
+import { computed, createVNode, defineComponent, shallowRef } from "vue";
+import Trigger from "@v-c/trigger";
+var BUILT_IN_PLACEMENTS = {
+	bottomRight: {
+		points: ["tl", "br"],
+		offset: [0, 4],
+		overflow: {
+			adjustX: 1,
+			adjustY: 1
+		}
+	},
+	bottomLeft: {
+		points: ["tr", "bl"],
+		offset: [0, 4],
+		overflow: {
+			adjustX: 1,
+			adjustY: 1
+		}
+	},
+	topRight: {
+		points: ["bl", "tr"],
+		offset: [0, -4],
+		overflow: {
+			adjustX: 1,
+			adjustY: 1
+		}
+	},
+	topLeft: {
+		points: ["br", "tl"],
+		offset: [0, -4],
+		overflow: {
+			adjustX: 1,
+			adjustY: 1
+		}
+	}
+};
+var KeywordTrigger_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const opened = shallowRef(false);
+	const dropdownPlacement = computed(() => {
+		if (props.direction === "rtl") return props.placement === "top" ? "topLeft" : "bottomLeft";
+		return props.placement === "top" ? "topRight" : "bottomRight";
+	});
+	return () => {
+		const { prefixCls, options, visible, transitionName, getPopupContainer, popupClassName, popupStyle } = props;
+		const dropdownPrefix = `${prefixCls}-dropdown`;
+		const dropdownElement = createVNode(DropdownMenu_default, {
+			"prefixCls": dropdownPrefix,
+			"options": options,
+			"opened": opened.value
+		}, null);
+		return createVNode(Trigger, {
+			"prefixCls": dropdownPrefix,
+			"popupVisible": visible,
+			"popup": dropdownElement,
+			"popupPlacement": dropdownPlacement.value,
+			"popupMotion": { name: transitionName },
+			"builtinPlacements": BUILT_IN_PLACEMENTS,
+			"getPopupContainer": getPopupContainer,
+			"popupClassName": popupClassName,
+			"popupStyle": popupStyle,
+			"afterOpenChange": (nextOpen) => {
+				opened.value = nextOpen;
+			}
+		}, { default: () => [slots?.default?.()] });
+	};
+}, {
+	props: {
+		loading: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		options: {
+			type: Array,
+			required: true,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		placement: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		direction: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		visible: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		transitionName: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		popupClassName: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		popupStyle: {
+			type: Object,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "KeywordTrigger",
+	inheritAttrs: false
+});
+export { KeywordTrigger_default as default };