niuma-ui 1.1.12 → 1.2.0

package/dist/components/RsMarkdown.impl.js

@@ -0,0 +1,139 @@
+import { useRsI18n } from "../composables/useRsI18n.js";
+import RsButton_default from "./RsButton.js";
+import RsCodeEditor_default from "./RsCodeEditor.js";
+import { renderMarkdown, resolveMarkdownHeight, resolveMarkdownMode } from "./markdown-utils.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, useModel, withCtx } from "vue";
+//#region src/components/RsMarkdown.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = { class: "rs-markdown__body" };
+var _hoisted_3 = {
+	key: 0,
+	class: "rs-markdown__editor"
+};
+var _hoisted_4 = ["innerHTML"];
+var _hoisted_5 = {
+	key: 1,
+	class: "rs-markdown__empty"
+};
+var RsMarkdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsMarkdown",
+	props: /*@__PURE__*/ mergeModels({
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		height: {},
+		placeholder: {},
+		theme: { default: "auto" },
+		rounded: {
+			type: Boolean,
+			default: true
+		},
+		showModeToggle: {
+			type: Boolean,
+			default: true
+		},
+		breaks: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {},
+		"mode": { default: "edit" },
+		"modeModifiers": {}
+	}),
+	emits: ["update:modelValue", "update:mode"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const mode = useModel(__props, "mode");
+		const props = __props;
+		const { t } = useRsI18n();
+		const activeMode = computed(() => resolveMarkdownMode(mode.value, props.readonly));
+		const showToggle = computed(() => props.showModeToggle && !props.readonly && !props.disabled);
+		const rootStyle = computed(() => ({ height: resolveMarkdownHeight(props.height) }));
+		const previewHtml = computed(() => renderMarkdown(model.value, { breaks: props.breaks }));
+		const editorPlaceholder = computed(() => props.placeholder ?? t("markdown.placeholder"));
+		const modeItems = computed(() => [
+			{
+				value: "edit",
+				label: t("markdown.edit")
+			},
+			{
+				value: "preview",
+				label: t("markdown.preview")
+			},
+			{
+				value: "split",
+				label: t("markdown.split")
+			}
+		]);
+		function setMode(next) {
+			if (props.readonly || props.disabled) return;
+			mode.value = next;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["rs-markdown", [`rs-markdown--${activeMode.value}`, {
+					"rs-markdown--rounded": __props.rounded,
+					"rs-markdown--readonly": __props.readonly,
+					"rs-markdown--disabled": __props.disabled,
+					"rs-markdown--with-toggle": showToggle.value
+				}]]),
+				style: normalizeStyle(rootStyle.value)
+			}, [showToggle.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "rs-markdown__toolbar",
+				role: "tablist",
+				"aria-label": unref(t)("markdown.modes")
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(modeItems.value, (item) => {
+				return openBlock(), createBlock(RsButton_default, {
+					key: item.value,
+					size: "sm",
+					variant: activeMode.value === item.value ? "secondary" : "ghost",
+					"aria-selected": activeMode.value === item.value,
+					role: "tab",
+					onClick: ($event) => setMode(item.value)
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+					_: 2
+				}, 1032, [
+					"variant",
+					"aria-selected",
+					"onClick"
+				]);
+			}), 128))], 8, _hoisted_1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2, [activeMode.value === "edit" || activeMode.value === "split" ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(RsCodeEditor_default, {
+				modelValue: model.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+				language: "markdown",
+				theme: __props.theme,
+				placeholder: editorPlaceholder.value,
+				readonly: __props.readonly || __props.disabled,
+				disabled: __props.disabled,
+				"show-toolbar": false,
+				rounded: false,
+				embedded: "",
+				height: "100%"
+			}, null, 8, [
+				"modelValue",
+				"theme",
+				"placeholder",
+				"readonly",
+				"disabled"
+			])])) : createCommentVNode("", true), activeMode.value === "preview" || activeMode.value === "split" ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(["rs-markdown__preview rs-native-scrollbar", { "rs-markdown__preview--empty": !previewHtml.value }])
+			}, [previewHtml.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "rs-markdown__prose",
+				innerHTML: previewHtml.value
+			}, null, 8, _hoisted_4)) : (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(unref(t)("markdown.empty")), 1))], 2)) : createCommentVNode("", true)])], 6);
+		};
+	}
+});
+//#endregion
+export { RsMarkdown_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/RsMarkdown.js

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

package/dist/components/RsMenu.css

@@ -0,0 +1,200 @@
+
+.rs-menu {
+  display: block;
+}
+.rs-menu__root-list,
+.rs-menu__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.rs-menu--horizontal > .rs-menu__root-list {
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.rs-menu__group-label {
+  display: block;
+  padding: 0.5rem 0.5rem 0.25rem;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-semibold);
+  color: var(--rs-muted);
+  letter-spacing: 0.04em;
+  line-height: var(--rs-line-height-tight);
+  user-select: none;
+}
+.rs-menu--collapsed .rs-menu__group-label {
+  display: none;
+}
+.rs-menu__group {
+  list-style: none;
+}
+.rs-menu__group--plain > .rs-menu__list {
+  margin: 0;
+}
+.rs-menu__entry {
+  list-style: none;
+}
+.rs-menu__node {
+  list-style: none;
+}
+.rs-menu--horizontal > .rs-menu__root-list > .rs-menu__group {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.rs-menu__collapsible {
+  display: block;
+}
+.rs-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: var(--rs-menu-item-height);
+  padding: 0 0.5rem;
+  padding-left: calc(0.5rem + var(--rs-menu-depth, 0) * 0.875rem);
+  border: none;
+  border-radius: var(--rs-menu-item-radius);
+  background: transparent;
+  color: var(--rs-menu-item-fg);
+  font-size: var(--rs-menu-item-font-size);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    color var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+.rs-menu--horizontal .rs-menu__item {
+  width: auto;
+  min-width: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.rs-menu--collapsed .rs-menu__item {
+  justify-content: center;
+  padding: 0;
+  width: var(--rs-control-height-md);
+  margin: 0 auto;
+}
+.rs-menu--collapsed .rs-menu__list--nested {
+  display: none;
+}
+.rs-menu__flyout {
+  z-index: var(--rs-z-dropdown);
+  min-width: 10rem;
+  max-width: min(16rem, 90vw);
+  padding: 0.25rem;
+  border-radius: var(--rs-radius-sm);
+  border: 1px solid var(--rs-border);
+  background: var(--rs-surface-elevated);
+  box-shadow: var(--rs-shadow);
+  outline: none;
+}
+.rs-menu__flyout-title {
+  display: block;
+  padding: 0.375rem 0.5rem 0.25rem;
+  margin-bottom: 0.125rem;
+  border-bottom: 1px solid var(--rs-border);
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-semibold);
+  color: var(--rs-muted);
+  letter-spacing: 0.04em;
+  line-height: var(--rs-line-height-tight);
+  user-select: none;
+}
+.rs-menu__flyout .rs-menu__list--nested {
+  display: flex;
+}
+.rs-menu__item:hover:not(:disabled):not(.rs-menu__item--active) {
+  color: var(--rs-menu-item-fg-hover);
+  background: var(--rs-menu-item-bg-hover);
+}
+.rs-menu__item:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-menu__item--active {
+  color: var(--rs-menu-item-active-fg);
+  background: var(--rs-menu-item-active-bg);
+  font-weight: var(--rs-menu-item-active-weight);
+}
+/* 子菜单选中时父级仅字体高亮，不加背景 */
+.rs-menu__item--active-parent {
+  color: var(--rs-menu-item-active-parent-fg);
+  background: var(--rs-menu-item-active-parent-bg);
+  font-weight: var(--rs-menu-item-active-weight);
+}
+.rs-menu__item--active-parent:hover:not(:disabled) {
+  color: var(--rs-menu-item-active-parent-fg);
+  background: var(--rs-menu-item-bg-hover);
+}
+.rs-menu__item:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+/** 固定图标列宽：有/无图标时文案起点一致，嵌套缩进再叠在左侧 padding 上 */
+.rs-menu__icon-slot {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+}
+.rs-menu__icon {
+  display: block;
+}
+.rs-menu__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-menu__submenu-arrow {
+  flex-shrink: 0;
+  color: var(--rs-muted);
+  transition: transform var(--rs-transition-fast);
+}
+.rs-menu__item--submenu-trigger[data-state='open'] .rs-menu__submenu-arrow {
+  transform: rotate(180deg);
+}
+.rs-menu__submenu {
+  overflow: hidden;
+}
+.rs-menu__list--nested {
+  margin-top: 0.125rem;
+}
+.rs-menu--horizontal > .rs-menu__root-list > .rs-menu__group > .rs-menu__group-label {
+  display: none;
+}
+.rs-menu--horizontal > .rs-menu__root-list > .rs-menu__group > .rs-menu__list {
+  margin-top: 0;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+}
+.rs-menu--horizontal .rs-menu__entry--submenu .rs-menu__submenu {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  z-index: var(--rs-z-dropdown);
+  min-width: 10rem;
+  padding: 0.25rem;
+  border-radius: var(--rs-radius-sm);
+  border: 1px solid var(--rs-border);
+  background: var(--rs-surface-elevated);
+  box-shadow: var(--rs-shadow);
+}
+.rs-menu--horizontal .rs-menu__entry--submenu .rs-menu__list--nested {
+  flex-direction: column;
+  align-items: stretch;
+  flex-wrap: nowrap;
+  margin-top: 0;
+}

package/dist/components/RsMenu.d.ts

@@ -0,0 +1,28 @@
+import { type RsMenuItems as RsMenuData } from './menu-utils';
+type __VLS_Props = {
+    items: RsMenuData;
+    mode?: 'vertical' | 'horizontal';
+    collapsed?: boolean;
+    /** 选中叶子时是否同时高亮祖先父级（仅字体色，无背景）；默认 false 只高亮叶子 */
+    highlightParent?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+    'openKeys'?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (key: string) => any;
+    "update:modelValue": (value: string | undefined) => any;
+    "update:openKeys": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((key: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:openKeys"?: ((value: string[]) => any) | undefined;
+}>, {
+    mode: "vertical" | "horizontal";
+    collapsed: boolean;
+    highlightParent: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/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/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/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/RsMenu.vue
+var RsMenu_default = RsMenu_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RsMenu_default as default };

package/dist/components/RsMenuItems.d.ts

@@ -0,0 +1,25 @@
+import { type RsMenuItem } from './menu-utils';
+type __VLS_Props = {
+    items: RsMenuItem[];
+    activeKey?: string;
+    openKeys: string[];
+    collapsed?: boolean;
+    mode?: 'vertical' | 'horizontal';
+    depth?: number;
+    /** 选中叶子时是否同时高亮祖先父级（仅字体色，无背景） */
+    highlightParent?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (key: string) => any;
+    "toggle-open": (key: string, open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((key: string) => any) | undefined;
+    "onToggle-open"?: ((key: string, open: boolean) => any) | undefined;
+}>, {
+    mode: "vertical" | "horizontal";
+    collapsed: boolean;
+    depth: number;
+    highlightParent: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;