niuma-ui 1.3.8 → 2.0.0

package/dist/components/dropdown/src/RsDropdown.impl.js

@@ -0,0 +1,104 @@
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsIcon_default from "../../icon/src/RsIcon.js";
+import { DropdownMenuContent, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuTrigger } from "../../_shared/src/reka.js";
+import { flattenDropdownItems } from "./dropdown-utils.js";
+import RsDropdownItems_default from "./RsDropdownItems.js";
+import { computed, createBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
+//#region src/components/dropdown/src/RsDropdown.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "rs-dropdown__value" };
+var RsDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsDropdown",
+	props: /*@__PURE__*/ mergeModels({
+		items: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		showSelected: {
+			type: Boolean,
+			default: true
+		},
+		size: { default: "md" },
+		contentWidth: { default: "trigger" }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["select"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const model = useModel(__props, "modelValue");
+		const props = __props;
+		const { t } = useRsI18n();
+		const resolvedPlaceholder = computed(() => props.placeholder ?? t("dropdown.placeholder"));
+		const emit = __emit;
+		const flatItems = computed(() => flattenDropdownItems(props.items));
+		const selectedItem = computed(() => flatItems.value.find((item) => item.value === model.value));
+		const displayLabel = computed(() => {
+			if (!props.showSelected) return resolvedPlaceholder.value;
+			return selectedItem.value?.label ?? resolvedPlaceholder.value;
+		});
+		const isPlaceholderDisplay = computed(() => {
+			if (!props.showSelected) return false;
+			return !selectedItem.value;
+		});
+		function onSelect(value) {
+			if (typeof value === "string") {
+				model.value = value;
+				emit("select", value);
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DropdownMenuRoot), { class: normalizeClass(["rs-dropdown", { "rs-dropdown--action": !__props.showSelected || Boolean(_ctx.$slots.trigger) }]) }, {
+				default: withCtx(() => [_ctx.$slots.trigger ? (openBlock(), createBlock(unref(DropdownMenuTrigger), {
+					key: 0,
+					class: "rs-dropdown__trigger-slot",
+					disabled: __props.disabled,
+					"as-child": ""
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger")]),
+					_: 3
+				}, 8, ["disabled"])) : (openBlock(), createBlock(unref(DropdownMenuTrigger), {
+					key: 1,
+					class: "rs-dropdown__trigger",
+					disabled: __props.disabled
+				}, {
+					default: withCtx(() => [createElementVNode("span", _hoisted_1, [createElementVNode("span", { class: normalizeClass(["rs-dropdown__label", { "rs-dropdown__label--placeholder": isPlaceholderDisplay.value }]) }, toDisplayString(displayLabel.value), 3)]), createVNode(RsIcon_default, {
+						name: "chevron-down",
+						size: 16,
+						class: "rs-dropdown__icon"
+					})]),
+					_: 1
+				}, 8, ["disabled"])), createVNode(unref(DropdownMenuPortal), null, {
+					default: withCtx(() => [createVNode(unref(DropdownMenuContent), {
+						class: normalizeClass(["rs-dropdown__content", [`rs-dropdown__content--${__props.size}`, `rs-dropdown__content--${__props.contentWidth}`]]),
+						"side-offset": 4
+					}, {
+						default: withCtx(() => [__props.showSelected ? (openBlock(), createBlock(unref(DropdownMenuRadioGroup), {
+							key: 0,
+							modelValue: model.value,
+							"onUpdate:modelValue": [_cache[0] || (_cache[0] = ($event) => model.value = $event), onSelect]
+						}, {
+							default: withCtx(() => [createVNode(RsDropdownItems_default, {
+								items: __props.items,
+								size: __props.size,
+								selectable: ""
+							}, null, 8, ["items", "size"])]),
+							_: 1
+						}, 8, ["modelValue"])) : (openBlock(), createBlock(RsDropdownItems_default, {
+							key: 1,
+							items: __props.items,
+							size: __props.size,
+							onSelect
+						}, null, 8, ["items", "size"]))]),
+						_: 1
+					}, 8, ["class"])]),
+					_: 1
+				})]),
+				_: 3
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+export { RsDropdown_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/dropdown/src/RsDropdown.js

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

package/dist/components/dropdown/src/RsDropdownItemView.d.ts

@@ -0,0 +1,11 @@
+import type { RsDropdownItem } from './dropdown-utils';
+import { type RsComponentSize } from '../../../theme/types';
+type __VLS_Props = {
+    item: RsDropdownItem;
+    size?: RsComponentSize;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: RsComponentSize;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/dropdown/src/RsDropdownItemView.impl.js

@@ -0,0 +1,32 @@
+import RsIcon_default from "../../icon/src/RsIcon.js";
+import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, toDisplayString } from "vue";
+//#region src/components/dropdown/src/RsDropdownItemView.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "rs-dropdown__item-copy" };
+var _hoisted_2 = { class: "rs-dropdown__item-label" };
+var _hoisted_3 = {
+	key: 0,
+	class: "rs-dropdown__item-hint"
+};
+var RsDropdownItemView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsDropdownItemView",
+	props: {
+		item: {},
+		size: { default: "md" }
+	},
+	setup(__props) {
+		/** 下拉项内容：图标 + 标题 + 可选说明，密度由 size 控制。 */
+		const props = __props;
+		const iconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[props.size]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [__props.item.icon ? (openBlock(), createBlock(RsIcon_default, {
+				key: 0,
+				name: __props.item.icon,
+				size: iconSize.value,
+				class: "rs-dropdown__item-icon"
+			}, null, 8, ["name", "size"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_1, [createElementVNode("span", _hoisted_2, toDisplayString(__props.item.label), 1), __props.item.hint ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.item.hint), 1)) : createCommentVNode("", true)])], 64);
+		};
+	}
+});
+//#endregion
+export { RsDropdownItemView_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/dropdown/src/RsDropdownItemView.js

@@ -0,0 +1,5 @@
+import RsDropdownItemView_vue_vue_type_script_setup_true_lang_default from "./RsDropdownItemView.impl.js";
+//#region src/components/dropdown/src/RsDropdownItemView.vue
+var RsDropdownItemView_default = RsDropdownItemView_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RsDropdownItemView_default as default };

package/dist/components/dropdown/src/RsDropdownItems.d.ts

@@ -0,0 +1,18 @@
+import { type RsDropdownItems } from './dropdown-utils';
+import type { RsComponentSize } from '../../../theme/types';
+type __VLS_Props = {
+    items: RsDropdownItems;
+    /** true：单选互斥；false：操作项 */
+    selectable?: boolean;
+    size?: RsComponentSize;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((value: string) => any) | undefined;
+}>, {
+    size: RsComponentSize;
+    selectable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/dropdown/src/RsDropdownItems.impl.js

@@ -0,0 +1,88 @@
+import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioItem } from "../../_shared/src/reka.js";
+import { isDropdownItemGroup } from "./dropdown-utils.js";
+import RsDropdownItemView_default from "./RsDropdownItemView.js";
+import { Fragment, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+//#region src/components/dropdown/src/RsDropdownItems.vue?vue&type=script&setup=true&lang.ts
+var RsDropdownItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsDropdownItems",
+	props: {
+		items: {},
+		selectable: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: "md" }
+	},
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		function onActionSelect(item) {
+			if (item.disabled) return;
+			emit("select", item.value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (entry, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: index }, [unref(isDropdownItemGroup)(entry) ? (openBlock(), createBlock(unref(DropdownMenuGroup), {
+					key: `group-${index}`,
+					class: "rs-dropdown__group"
+				}, {
+					default: withCtx(() => [createVNode(unref(DropdownMenuLabel), { class: "rs-dropdown__group-label" }, {
+						default: withCtx(() => [createTextVNode(toDisplayString(entry.label), 1)]),
+						_: 2
+					}, 1024), __props.selectable ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(entry.options, (item) => {
+						return openBlock(), createBlock(unref(DropdownMenuRadioItem), {
+							key: item.value,
+							value: item.value,
+							disabled: item.disabled,
+							class: "rs-dropdown__item"
+						}, {
+							default: withCtx(() => [createVNode(RsDropdownItemView_default, {
+								item,
+								size: __props.size
+							}, null, 8, ["item", "size"])]),
+							_: 2
+						}, 1032, ["value", "disabled"]);
+					}), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(entry.options, (item) => {
+						return openBlock(), createBlock(unref(DropdownMenuItem), {
+							key: item.value,
+							disabled: item.disabled,
+							class: "rs-dropdown__item",
+							onSelect: ($event) => onActionSelect(item)
+						}, {
+							default: withCtx(() => [createVNode(RsDropdownItemView_default, {
+								item,
+								size: __props.size
+							}, null, 8, ["item", "size"])]),
+							_: 2
+						}, 1032, ["disabled", "onSelect"]);
+					}), 128))]),
+					_: 2
+				}, 1024)) : __props.selectable ? (openBlock(), createBlock(unref(DropdownMenuRadioItem), {
+					key: `radio-${entry.value}`,
+					value: entry.value,
+					disabled: entry.disabled,
+					class: "rs-dropdown__item"
+				}, {
+					default: withCtx(() => [createVNode(RsDropdownItemView_default, {
+						item: entry,
+						size: __props.size
+					}, null, 8, ["item", "size"])]),
+					_: 2
+				}, 1032, ["value", "disabled"])) : (openBlock(), createBlock(unref(DropdownMenuItem), {
+					key: `action-${entry.value}`,
+					disabled: entry.disabled,
+					class: "rs-dropdown__item",
+					onSelect: ($event) => onActionSelect(entry)
+				}, {
+					default: withCtx(() => [createVNode(RsDropdownItemView_default, {
+						item: entry,
+						size: __props.size
+					}, null, 8, ["item", "size"])]),
+					_: 2
+				}, 1032, ["disabled", "onSelect"]))], 64);
+			}), 128);
+		};
+	}
+});
+//#endregion
+export { RsDropdownItems_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/dropdown/src/RsDropdownItems.js

@@ -0,0 +1,5 @@
+import RsDropdownItems_vue_vue_type_script_setup_true_lang_default from "./RsDropdownItems.impl.js";
+//#region src/components/dropdown/src/RsDropdownItems.vue
+var RsDropdownItems_default = RsDropdownItems_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RsDropdownItems_default as default };

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

@@ -0,0 +1,12 @@
+//#region src/components/dropdown/src/dropdown-utils.ts
+function isDropdownItemGroup(item) {
+	return "options" in item && Array.isArray(item.options);
+}
+function flattenDropdownItems(items) {
+	const result = [];
+	for (const item of items) if (isDropdownItemGroup(item)) result.push(...item.options);
+	else result.push(item);
+	return result;
+}
+//#endregion
+export { flattenDropdownItems, isDropdownItemGroup };

package/dist/components/dynamic-tags/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RsDynamicTags } from './src/RsDynamicTags.js';
+export type { RsDynamicTagsInputMode, RsDynamicTagsRejectReason, } from './src/RsDynamicTags.js';

package/dist/components/dynamic-tags/src/RsDynamicTags.css

@@ -0,0 +1,148 @@
+
+.rs-dynamic-tags-field[data-v-6ce33b85] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+.rs-dynamic-tags-field__error[data-v-6ce33b85] {
+  margin: 0.25rem 0 0;
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-tight);
+  color: var(--rs-danger);
+}
+.rs-dynamic-tags[data-v-6ce33b85] {
+  --rs-dynamic-tags-chip-height: 1.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--rs-dynamic-tags-gap, var(--rs-space-xs));
+  /* padding + chip + 1px*2 边框，避免 trigger/input 切换或输入时高度跳动 */
+  min-height: calc(
+    var(--rs-dynamic-tags-chip-height) + 2 * var(--rs-dynamic-tags-padding, var(--rs-space-xs)) +
+      2px
+  );
+  padding: var(--rs-dynamic-tags-padding, var(--rs-space-xs));
+  border: 1px solid var(--rs-dynamic-tags-border, var(--rs-input-border, var(--rs-border)));
+  border-radius: var(
+    --rs-dynamic-tags-radius-local,
+    var(--rs-dynamic-tags-radius, var(--rs-radius))
+  );
+  background: var(--rs-dynamic-tags-bg, var(--rs-input-bg, var(--rs-surface)));
+  box-shadow: var(--rs-dynamic-tags-shadow, var(--rs-input-shadow, none));
+  box-sizing: border-box;
+  cursor: text;
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background-color var(--rs-transition-fast);
+}
+.rs-dynamic-tags[data-v-6ce33b85]:hover:not(.rs-dynamic-tags--disabled) {
+  border-color: var(
+    --rs-dynamic-tags-border-hover,
+    var(--rs-input-border-hover, var(--rs-border))
+  );
+}
+.rs-dynamic-tags--ssm[data-v-6ce33b85] {
+  --rs-dynamic-tags-chip-height: 1.125rem;
+}
+.rs-dynamic-tags--sm[data-v-6ce33b85] {
+  --rs-dynamic-tags-chip-height: 1.25rem;
+}
+.rs-dynamic-tags--md[data-v-6ce33b85] {
+  --rs-dynamic-tags-chip-height: 1.5rem;
+}
+.rs-dynamic-tags--lg[data-v-6ce33b85] {
+  --rs-dynamic-tags-chip-height: 1.75rem;
+}
+.rs-dynamic-tags--editing[data-v-6ce33b85]:not(.rs-dynamic-tags--disabled),
+.rs-dynamic-tags[data-v-6ce33b85]:focus-within:not(.rs-dynamic-tags--disabled) {
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  box-shadow:
+    var(--rs-dynamic-tags-shadow, var(--rs-input-shadow, none)),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-dynamic-tags--feedback[data-v-6ce33b85],
+.rs-dynamic-tags--invalid[data-v-6ce33b85] {
+  border-color: var(--rs-danger);
+}
+.rs-dynamic-tags--feedback[data-v-6ce33b85] {
+  animation: rs-dynamic-tags-shake-6ce33b85 0.45s ease;
+}
+.rs-dynamic-tags--disabled[data-v-6ce33b85] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.rs-dynamic-tags__input[data-v-6ce33b85] {
+  flex: 1 1 6rem;
+  min-width: 4rem;
+  width: 0;
+  height: var(--rs-dynamic-tags-chip-height);
+  margin: 0;
+  padding: 0 var(--rs-space-xs);
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--rs-text);
+  font: inherit;
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-dynamic-tags-chip-height);
+  box-sizing: border-box;
+  box-shadow: none;
+  appearance: none;
+}
+.rs-dynamic-tags--ssm .rs-dynamic-tags__input[data-v-6ce33b85],
+.rs-dynamic-tags--sm .rs-dynamic-tags__input[data-v-6ce33b85] {
+  font-size: var(--rs-font-size-xs);
+}
+.rs-dynamic-tags__input[data-v-6ce33b85]::placeholder {
+  color: var(--rs-placeholder);
+  line-height: var(--rs-dynamic-tags-chip-height);
+}
+.rs-dynamic-tags__trigger[data-v-6ce33b85] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--rs-dynamic-tags-chip-height);
+  height: var(--rs-dynamic-tags-chip-height);
+  margin: 0;
+  padding: 0;
+  border: 1px dashed var(--rs-dynamic-tags-trigger-border, var(--rs-border));
+  border-radius: var(--rs-radius-sm);
+  background: transparent;
+  color: var(--rs-muted);
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+  transition:
+    color var(--rs-transition-fast),
+    border-color var(--rs-transition-fast),
+    background-color var(--rs-transition-fast);
+}
+.rs-dynamic-tags__trigger[data-v-6ce33b85]:hover {
+  color: var(--rs-primary);
+  border-color: var(--rs-primary);
+  background: color-mix(in srgb, var(--rs-primary) 8%, transparent);
+}
+.rs-dynamic-tags__trigger[data-v-6ce33b85]:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+@keyframes rs-dynamic-tags-shake-6ce33b85 {
+0%,
+  100% {
+    transform: translateX(0);
+}
+20% {
+    transform: translateX(-3px);
+}
+40% {
+    transform: translateX(3px);
+}
+60% {
+    transform: translateX(-2px);
+}
+80% {
+    transform: translateX(2px);
+}
+}

package/dist/components/dynamic-tags/src/RsDynamicTags.d.ts

@@ -0,0 +1,71 @@
+import type { RsComponentSize, RsRadius } from '../../../theme/types';
+import { type RsFormRuleTrigger } from '../../form/src/form-rules';
+import type { RsTagVariant } from '../../tag/src/RsTag.js';
+export type RsDynamicTagsInputMode = 'trigger' | 'always';
+export type RsDynamicTagsRejectReason = 'duplicate' | 'max';
+type __VLS_Props = {
+    /** 字段名：匹配 RsForm.rules[name] */
+    name?: string;
+    id?: string;
+    invalid?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    max?: number;
+    /** 输入内容最大长度 */
+    maxlength?: number;
+    /** 允许重复标签 */
+    allowDuplicate?: boolean;
+    /**
+     * trigger：点击「+」后再输入（对齐 Naive DynamicTags）
+     * always：始终显示输入框（对齐 InputTag 常驻输入）
+     */
+    inputMode?: RsDynamicTagsInputMode;
+    /** 失焦时是否提交当前输入 */
+    commitOnBlur?: boolean;
+    size?: RsComponentSize;
+    radius?: RsRadius;
+    /** 标签视觉变体 */
+    tagVariant?: RsTagVariant;
+    round?: boolean;
+};
+declare function runValidate(trigger?: RsFormRuleTrigger): Promise<{
+    valid: true;
+    name: string | undefined;
+    message?: undefined;
+} | {
+    valid: boolean;
+    message: string | undefined;
+    name: string | undefined;
+}>;
+declare function setValue(value: unknown): void;
+declare function clearValidation(): void;
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    validate: typeof runValidate;
+    clearValidation: typeof clearValidation;
+    setValue: typeof setValue;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+    create: (value: string) => any;
+    remove: (value: string, index: number) => any;
+    reject: (reason: RsDynamicTagsRejectReason, value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    onCreate?: ((value: string) => any) | undefined;
+    onRemove?: ((value: string, index: number) => any) | undefined;
+    onReject?: ((reason: RsDynamicTagsRejectReason, value: string) => any) | undefined;
+}>, {
+    required: boolean;
+    disabled: boolean;
+    round: boolean;
+    allowDuplicate: boolean;
+    inputMode: RsDynamicTagsInputMode;
+    commitOnBlur: boolean;
+    tagVariant: RsTagVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;