niuma-ui 1.3.8 → 2.0.0

package/dist/components/mentions/src/RsMentions.css

@@ -0,0 +1,19 @@
+
+.rs-mentions[data-v-3b6a5d22] {
+  position: relative;
+  width: 100%;
+}
+.rs-mentions__input[data-v-3b6a5d22] {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: calc(var(--rs-control-height-md) * 2);
+  padding: var(--rs-space-sm) var(--rs-space-md);
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-input-bg);
+  color: var(--rs-text);
+  font-family: inherit;
+  font-size: var(--rs-font-size-sm);
+  resize: vertical;
+  outline: none;
+}

package/dist/components/mentions/src/RsMentions.d.ts

@@ -0,0 +1,32 @@
+import type { RsComponentSize } from '../../../theme/types';
+import { type RsMentionOption } from './mentions-utils';
+type __VLS_Props = {
+    options?: readonly RsMentionOption[];
+    prefix?: string | string[];
+    split?: string;
+    rows?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: RsComponentSize;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (query: string) => any;
+    select: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSearch?: ((query: string) => any) | undefined;
+    onSelect?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    split: string;
+    disabled: boolean;
+    options: readonly RsMentionOption[];
+    prefix: string | string[];
+    rows: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/mentions/src/RsMentions.impl.js

@@ -0,0 +1,242 @@
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import { applyMention, createTextareaCaretMeter, filterMentionOptions, findActiveMention, placeMentionPopup, resolveMentionPrefixes, stepMentionIndex } from "./mentions-utils.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, toDisplayString, unref, useId, useModel, vModelText, watch, withDirectives, withModifiers } from "vue";
+//#region src/components/mentions/src/RsMentions.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"rows",
+	"placeholder",
+	"disabled",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant"
+];
+var _hoisted_2 = ["id", "aria-label"];
+var _hoisted_3 = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onMousedown"
+];
+var RsMentions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsMentions",
+	__name: "RsMentions",
+	props: /*@__PURE__*/ mergeModels({
+		options: { default: () => [] },
+		prefix: { default: "@" },
+		split: { default: " " },
+		rows: { default: 3 },
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["select", "search"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const model = useModel(__props, "modelValue");
+		const props = __props;
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const listId = useId();
+		const areaRef = ref(null);
+		const listRef = ref(null);
+		const cursor = ref(0);
+		const popup = ref({
+			top: 0,
+			left: 0,
+			placement: "bottom"
+		});
+		const highlight = ref(0);
+		const dismissed = ref(false);
+		const lastSearch = ref(null);
+		const prefixes = computed(() => resolveMentionPrefixes(props.prefix));
+		const meter = createTextareaCaretMeter();
+		const active = computed(() => dismissed.value ? null : findActiveMention(model.value, cursor.value, prefixes.value, props.split));
+		const suggestions = computed(() => active.value ? filterMentionOptions(props.options, active.value.query) : []);
+		const open = computed(() => Boolean(active.value && suggestions.value.length));
+		const activeOption = computed(() => suggestions.value[highlight.value]);
+		const activeOptionId = computed(() => open.value && activeOption.value ? `${listId}-${activeOption.value.value}` : void 0);
+		function viewportCaret() {
+			const el = areaRef.value;
+			const mention = active.value;
+			if (!el || !mention) return null;
+			const local = meter.measure(el, mention.start);
+			const box = el.getBoundingClientRect();
+			return {
+				top: box.top + local.top,
+				left: box.left + local.left,
+				height: local.height
+			};
+		}
+		function placePopup() {
+			const caret = viewportCaret();
+			if (!caret) return;
+			const list = listRef.value?.getBoundingClientRect();
+			popup.value = placeMentionPopup(caret, {
+				width: list?.width || 160,
+				height: list?.height || Math.min(192, suggestions.value.length * 32)
+			}, {
+				width: window.innerWidth,
+				height: window.innerHeight
+			});
+		}
+		let frame = 0;
+		function requestPlace() {
+			if (frame) return;
+			frame = window.requestAnimationFrame(() => {
+				frame = 0;
+				placePopup();
+			});
+		}
+		function syncCursor(emitSearch, keepDismissed = false) {
+			const el = areaRef.value;
+			cursor.value = el?.selectionStart ?? model.value.length;
+			if (!keepDismissed) dismissed.value = false;
+			const mention = findActiveMention(model.value, cursor.value, prefixes.value, props.split);
+			if (!mention) {
+				lastSearch.value = null;
+				return;
+			}
+			if (emitSearch && mention.query !== lastSearch.value) {
+				lastSearch.value = mention.query;
+				emit("search", mention.query);
+			}
+			requestPlace();
+		}
+		function pick(option) {
+			if (!active.value || option.disabled) return;
+			const next = applyMention(model.value, active.value, option.value, props.split);
+			model.value = next.text;
+			emit("select", option.value);
+			dismissed.value = true;
+			nextTick(() => {
+				const el = areaRef.value;
+				if (!el) return;
+				el.focus();
+				el.setSelectionRange(next.cursor, next.cursor);
+				cursor.value = next.cursor;
+			});
+		}
+		function onKeydown(event) {
+			if (!open.value) return;
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				highlight.value = stepMentionIndex(suggestions.value, highlight.value, 1);
+				return;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				highlight.value = stepMentionIndex(suggestions.value, highlight.value, -1);
+				return;
+			}
+			if (event.key === "Enter") {
+				event.preventDefault();
+				if (activeOption.value) pick(activeOption.value);
+				return;
+			}
+			if (event.key === "Escape") {
+				event.preventDefault();
+				dismissed.value = true;
+				return;
+			}
+			if (event.key === "Home") {
+				event.preventDefault();
+				highlight.value = stepMentionIndex(suggestions.value, -1, 1);
+				return;
+			}
+			if (event.key === "End") {
+				event.preventDefault();
+				highlight.value = stepMentionIndex(suggestions.value, suggestions.value.length, -1);
+				return;
+			}
+			if (event.key === "Tab" && activeOption.value) {
+				event.preventDefault();
+				pick(activeOption.value);
+			}
+		}
+		watch(suggestions, (list) => {
+			highlight.value = list.findIndex((item) => !item.disabled);
+			if (highlight.value < 0) highlight.value = 0;
+			requestPlace();
+		});
+		watch(open, (isOpen) => {
+			if (isOpen) nextTick(() => requestPlace());
+		});
+		function onWindowChange() {
+			if (open.value) requestPlace();
+		}
+		onMounted(() => {
+			window.addEventListener("resize", onWindowChange);
+			window.addEventListener("scroll", onWindowChange, true);
+		});
+		onUnmounted(() => {
+			if (frame) window.cancelAnimationFrame(frame);
+			meter.dispose();
+			window.removeEventListener("resize", onWindowChange);
+			window.removeEventListener("scroll", onWindowChange, true);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["rs-mentions", `rs-mentions--${unref(resolvedSize)}`]) }, [withDirectives(createElementVNode("textarea", {
+				ref_key: "areaRef",
+				ref: areaRef,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+				class: "rs-mentions__input",
+				rows: __props.rows,
+				placeholder: __props.placeholder ?? unref(t)("mentions.placeholder"),
+				disabled: __props.disabled,
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-haspopup": "listbox",
+				"aria-expanded": open.value ? "true" : "false",
+				"aria-controls": open.value ? unref(listId) : void 0,
+				"aria-activedescendant": activeOptionId.value,
+				onKeydown,
+				onKeyup: _cache[1] || (_cache[1] = ($event) => syncCursor(true, [
+					"Escape",
+					"Enter",
+					"Tab",
+					"ArrowUp",
+					"ArrowDown",
+					"Home",
+					"End"
+				].includes($event.key))),
+				onClick: _cache[2] || (_cache[2] = ($event) => syncCursor(true)),
+				onInput: _cache[3] || (_cache[3] = ($event) => syncCursor(true)),
+				onScroll: _cache[4] || (_cache[4] = ($event) => syncCursor(false, true))
+			}, null, 40, _hoisted_1), [[vModelText, model.value]]), (openBlock(), createBlock(Teleport, { to: "body" }, [open.value ? (openBlock(), createElementBlock("ul", {
+				key: 0,
+				id: unref(listId),
+				ref_key: "listRef",
+				ref: listRef,
+				class: "rs-mentions__list",
+				role: "listbox",
+				"aria-label": unref(t)("mentions.suggestions"),
+				style: normalizeStyle({
+					top: `${popup.value.top}px`,
+					left: `${popup.value.left}px`
+				})
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(suggestions.value, (opt, index) => {
+				return openBlock(), createElementBlock("li", {
+					id: `${unref(listId)}-${opt.value}`,
+					key: opt.value,
+					role: "option",
+					class: normalizeClass(["rs-mentions__item", {
+						"rs-mentions__item--disabled": opt.disabled,
+						"rs-mentions__item--active": index === highlight.value
+					}]),
+					"aria-selected": index === highlight.value,
+					"aria-disabled": opt.disabled ? "true" : void 0,
+					onMousedown: withModifiers(($event) => pick(opt), ["prevent"])
+				}, toDisplayString(opt.label), 43, _hoisted_3);
+			}), 128))], 12, _hoisted_2)) : createCommentVNode("", true)]))], 2);
+		};
+	}
+});
+//#endregion
+export { RsMentions_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/mentions/src/RsMentions.js

@@ -0,0 +1,10 @@
+import './RsMentions.css'
+import './RsMentions-1.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import RsMentions_vue_vue_type_script_setup_true_lang_default from "./RsMentions.impl.js";
+
+
+//#region src/components/mentions/src/RsMentions.vue
+var RsMentions_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsMentions_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3b6a5d22"]]);
+//#endregion
+export { RsMentions_default as default };

package/dist/components/mentions/src/mentions-utils.js

@@ -0,0 +1,128 @@
+import { placeAnchoredPopup, stepEnabledIndex } from "../../_shared/src/overlay-utils.js";
+//#region src/components/mentions/src/mentions-utils.ts
+function resolveMentionPrefixes(prefix) {
+	return (Array.isArray(prefix) ? prefix : [prefix]).map(String).filter(Boolean);
+}
+/** 光标前最近一个前缀 + 查询词（不含空格） */
+function findActiveMention(text, cursor, prefixes, split = " ") {
+	const head = text.slice(0, Math.max(0, cursor));
+	let found = null;
+	for (const token of prefixes) {
+		const at = head.lastIndexOf(token);
+		if (at < 0) continue;
+		const after = head.slice(at + token.length);
+		if (after.includes(split) || after.includes("\n")) continue;
+		if (!found || at > found.start) found = {
+			prefix: token,
+			query: after,
+			start: at,
+			end: cursor
+		};
+	}
+	return found;
+}
+function applyMention(text, active, value, split = " ") {
+	const insert = `${active.prefix}${value}${split}`;
+	return {
+		text: `${text.slice(0, active.start)}${insert}${text.slice(active.end)}`,
+		cursor: active.start + insert.length
+	};
+}
+function stepMentionIndex(options, current, delta) {
+	return stepEnabledIndex(options, current, delta);
+}
+/** 视口内避让：下边不够就翻到上方，左右夹进窗口。 */
+function placeMentionPopup(caret, popup, viewport, gap = 4) {
+	const box = placeAnchoredPopup(caret, popup, viewport, gap);
+	return {
+		top: box.top,
+		left: box.left,
+		placement: box.placement
+	};
+}
+var MIRROR_STYLE_KEYS = [
+	"boxSizing",
+	"width",
+	"height",
+	"overflowX",
+	"overflowY",
+	"borderTopWidth",
+	"borderRightWidth",
+	"borderBottomWidth",
+	"borderLeftWidth",
+	"paddingTop",
+	"paddingRight",
+	"paddingBottom",
+	"paddingLeft",
+	"fontStyle",
+	"fontVariant",
+	"fontWeight",
+	"fontStretch",
+	"fontSize",
+	"fontFamily",
+	"letterSpacing",
+	"textIndent",
+	"textTransform",
+	"wordSpacing",
+	"tabSize",
+	"lineHeight",
+	"whiteSpace",
+	"wordWrap"
+];
+/** 复用隐藏镜像节点，避免每次按键 insert/remove 逼 reflow。 */
+function createTextareaCaretMeter() {
+	let mirror = null;
+	let marker = null;
+	function ensure() {
+		if (mirror && marker) return {
+			mirror,
+			marker
+		};
+		mirror = document.createElement("div");
+		mirror.setAttribute("aria-hidden", "true");
+		const s = mirror.style;
+		s.position = "absolute";
+		s.visibility = "hidden";
+		s.pointerEvents = "none";
+		s.whiteSpace = "pre-wrap";
+		s.wordWrap = "break-word";
+		s.top = "0";
+		s.left = "-9999px";
+		marker = document.createElement("span");
+		marker.textContent = ".";
+		document.body.appendChild(mirror);
+		return {
+			mirror,
+			marker
+		};
+	}
+	function measure(textarea, index) {
+		const { mirror: box, marker: caret } = ensure();
+		const style = window.getComputedStyle(textarea);
+		for (const key of MIRROR_STYLE_KEYS) box.style.setProperty(key.replace(/[A-Z]/g, (ch) => `-${ch.toLowerCase()}`), style[key]);
+		const text = textarea.value.slice(0, Math.max(0, index));
+		box.textContent = text.endsWith("\n") ? `${text}\u00a0` : text;
+		box.appendChild(caret);
+		return {
+			top: caret.offsetTop - textarea.scrollTop,
+			left: caret.offsetLeft - textarea.scrollLeft,
+			height: caret.offsetHeight || parseFloat(style.lineHeight) || 16
+		};
+	}
+	function dispose() {
+		mirror?.remove();
+		mirror = null;
+		marker = null;
+	}
+	return {
+		measure,
+		dispose
+	};
+}
+function filterMentionOptions(options, query) {
+	const q = query.trim().toLowerCase();
+	if (!q) return options.filter((item) => !item.disabled);
+	return options.filter((item) => !item.disabled && (item.label.toLowerCase().includes(q) || item.value.toLowerCase().includes(q)));
+}
+//#endregion
+export { applyMention, createTextareaCaretMeter, filterMentionOptions, findActiveMention, placeMentionPopup, resolveMentionPrefixes, stepMentionIndex };

package/dist/components/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RsMenu } from './src/RsMenu.js';
+export type { RsMenuItem, RsMenuItemGroup, RsMenuItems } from './src/menu-utils';

package/dist/components/menu/src/RsMenu.impl.js

@@ -0,0 +1,108 @@
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import { findMenuParentKeys, isMenuItemGroup } from "./menu-utils.js";
+import RsMenuItems_default from "./RsMenuItems.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, watch } from "vue";
+//#region src/components/menu/src/RsMenu.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = { class: "rs-menu__root-list" };
+var _hoisted_3 = {
+	key: 0,
+	class: "rs-menu__group"
+};
+var _hoisted_4 = {
+	key: 0,
+	class: "rs-menu__group-label"
+};
+var RsMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsMenu",
+	props: /*@__PURE__*/ mergeModels({
+		items: {},
+		mode: { default: "vertical" },
+		collapsed: {
+			type: Boolean,
+			default: false
+		},
+		highlightParent: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {},
+		"openKeys": { default: () => [] },
+		"openKeysModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["select"], ["update:modelValue", "update:openKeys"]),
+	setup(__props, { emit: __emit }) {
+		const model = useModel(__props, "modelValue");
+		const openKeys = useModel(__props, "openKeys");
+		const props = __props;
+		const emit = __emit;
+		const { t } = useRsI18n();
+		/** collapsed 仅对垂直模式生效；水平模式忽略，避免空气泡子菜单 */
+		const isCollapsedVertical = computed(() => props.mode === "vertical" && props.collapsed);
+		function onSelect(key) {
+			model.value = key;
+			emit("select", key);
+		}
+		function onToggleOpen(key, open) {
+			const next = new Set(openKeys.value);
+			if (open) next.add(key);
+			else next.delete(key);
+			openKeys.value = [...next];
+		}
+		watch(() => model.value, (key) => {
+			if (!key) return;
+			const parents = findMenuParentKeys(props.items, key);
+			if (!parents.length) return;
+			const next = new Set(openKeys.value);
+			for (const parentKey of parents) next.add(parentKey);
+			openKeys.value = [...next];
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", {
+				class: normalizeClass(["rs-menu", [`rs-menu--${__props.mode}`, { "rs-menu--collapsed": isCollapsedVertical.value }]]),
+				"aria-label": unref(t)("menu.label")
+			}, [createElementVNode("ul", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (entry, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: index }, [unref(isMenuItemGroup)(entry) ? (openBlock(), createElementBlock("li", _hoisted_3, [!isCollapsedVertical.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(entry.label), 1)) : createCommentVNode("", true), createVNode(RsMenuItems_default, {
+					items: entry.children,
+					"active-key": model.value,
+					"open-keys": openKeys.value,
+					collapsed: isCollapsedVertical.value,
+					mode: __props.mode,
+					"highlight-parent": __props.highlightParent,
+					onSelect,
+					onToggleOpen
+				}, null, 8, [
+					"items",
+					"active-key",
+					"open-keys",
+					"collapsed",
+					"mode",
+					"highlight-parent"
+				])])) : (openBlock(), createElementBlock("li", {
+					key: entry.key,
+					class: "rs-menu__group rs-menu__group--plain"
+				}, [createVNode(RsMenuItems_default, {
+					items: [entry],
+					"active-key": model.value,
+					"open-keys": openKeys.value,
+					collapsed: isCollapsedVertical.value,
+					mode: __props.mode,
+					"highlight-parent": __props.highlightParent,
+					onSelect,
+					onToggleOpen
+				}, null, 8, [
+					"items",
+					"active-key",
+					"open-keys",
+					"collapsed",
+					"mode",
+					"highlight-parent"
+				])]))], 64);
+			}), 128))])], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RsMenu_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/menu/src/RsMenu.js

@@ -0,0 +1,7 @@
+import './RsMenu.css'
+import RsMenu_vue_vue_type_script_setup_true_lang_default from "./RsMenu.impl.js";
+
+//#region src/components/menu/src/RsMenu.vue
+var RsMenu_default = RsMenu_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RsMenu_default as default };