niuma-ui 1.1.12 → 1.2.1

package/dist/components/RsTabs.impl.js

@@ -0,0 +1,526 @@
+import { useRsI18n } from "../composables/useRsI18n.js";
+import RsIcon_default from "./RsIcon.js";
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger, TabsContent, TabsList, TabsRoot, TabsTrigger } from "./reka.js";
+import { buildTabContextMenuItems, getNextTabAfterBatchClose, getNextTabAfterClose, isTabClosable, isTabFixed, isTabRenamable, resolveTabsToClose } from "./tabs-utils.js";
+import { useRsTabsNav } from "../composables/useRsTabsNav.js";
+import RsContextMenu_default from "./RsContextMenu.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, useSlots, vModelText, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+//#region src/components/RsTabs.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-tab-value"];
+var _hoisted_2 = { class: "rs-tabs__label" };
+var _hoisted_3 = {
+	key: 1,
+	class: "rs-tabs__badge"
+};
+var _hoisted_4 = ["aria-label"];
+var _hoisted_5 = [
+	"aria-label",
+	"placeholder",
+	"onKeydown",
+	"onBlur"
+];
+var _hoisted_6 = ["title", "onDblclick"];
+var _hoisted_7 = {
+	key: 4,
+	class: "rs-tabs__badge"
+};
+var _hoisted_8 = [
+	"aria-label",
+	"disabled",
+	"onClick"
+];
+var _hoisted_9 = { class: "rs-tabs__more-label" };
+var _hoisted_10 = ["aria-label"];
+var _hoisted_11 = ["aria-label"];
+var _hoisted_12 = { class: "rs-tabs__panel-inner" };
+var RsTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsTabs",
+	props: /*@__PURE__*/ mergeModels({
+		items: {},
+		size: { default: "md" },
+		variant: { default: "line" },
+		panelless: {
+			type: Boolean,
+			default: false
+		},
+		borderless: {
+			type: Boolean,
+			default: false
+		},
+		contentGap: { default: "none" },
+		justify: { default: "start" },
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		addable: {
+			type: Boolean,
+			default: false
+		},
+		maxCount: {},
+		renamable: {
+			type: Boolean,
+			default: false
+		},
+		draggable: {
+			type: Boolean,
+			default: false
+		},
+		overflow: {
+			type: [String, Boolean],
+			default: false
+		},
+		contextMenu: {
+			type: Boolean,
+			default: false
+		},
+		beforeLeave: {}
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"close",
+		"closeBatch",
+		"add",
+		"rename",
+		"reorder",
+		"contextMenu"
+	], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const model = useModel(__props, "modelValue");
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const { t } = useRsI18n();
+		const itemsRef = computed(() => props.items);
+		const overflowMode = computed(() => props.overflow);
+		const hasExtra = computed(() => Boolean(slots.extra));
+		const canAdd = computed(() => {
+			if (!props.addable) return false;
+			if (props.maxCount == null) return true;
+			return props.items.length < props.maxCount;
+		});
+		const navRef = ref(null);
+		const measureRef = ref(null);
+		const overflowWrapRef = ref(null);
+		const extraRef = ref(null);
+		const { navViewportRef, useDropdownOverflow, useScrollOverflow, visibleTabItems, hiddenItems, overflowMenuItems, activeInHidden, showOverflowMenu, canScrollPrev, canScrollNext, scrollNav, onNavScroll, scheduleLayout } = useRsTabsNav({
+			items: itemsRef,
+			activeValue: model,
+			overflow: overflowMode,
+			canAdd,
+			navRef,
+			measureRef,
+			overflowRef: overflowWrapRef,
+			extraRef,
+			addButtonWidth: 36
+		});
+		const renamingValue = ref(null);
+		const renameDraft = ref("");
+		const dragValue = ref(null);
+		const dragOverValue = ref(null);
+		let renameInputEl = null;
+		let leaveLock = false;
+		function setRenameInputRef(el, item) {
+			if (!(el instanceof HTMLInputElement) || renamingValue.value !== item.value) return;
+			renameInputEl = el;
+			nextTick(() => {
+				renameInputEl?.focus();
+				renameInputEl?.select();
+			});
+		}
+		const tabBarItems = computed(() => useDropdownOverflow.value ? visibleTabItems.value : props.items);
+		const moreLabel = computed(() => {
+			if (activeInHidden.value) return props.items.find((item) => item.value === model.value)?.label ?? t("tabs.more");
+			if (hiddenItems.value.length > 0) return `${t("tabs.more")} (${hiddenItems.value.length})`;
+			return t("tabs.more");
+		});
+		const contextMenuLabels = computed(() => ({
+			close: t("tabs.closeTab"),
+			closeOthers: t("tabs.closeOthers"),
+			closeLeft: t("tabs.closeLeft"),
+			closeRight: t("tabs.closeRight"),
+			closeAll: t("tabs.closeAll")
+		}));
+		function closeAriaLabel(item) {
+			return t("tabs.close", "Close {label}").replace("{label}", item.label);
+		}
+		function contextItemsFor(item) {
+			return buildTabContextMenuItems(props.items, item, props.closable, contextMenuLabels.value);
+		}
+		function labelTitle(item) {
+			return item.label.length > 12 ? item.label : void 0;
+		}
+		async function onSelectTab(next) {
+			const value = String(next);
+			if (value === model.value || leaveLock) return;
+			if (props.beforeLeave) {
+				leaveLock = true;
+				try {
+					if (await props.beforeLeave(value, model.value) === false) return;
+				} finally {
+					leaveLock = false;
+				}
+			}
+			model.value = value;
+		}
+		function applyCloseValues(values, action, anchor) {
+			if (!values.length) return;
+			if (action === "close" && values.length === 1) {
+				const closed = values[0];
+				const next = getNextTabAfterClose(props.items, closed, model.value);
+				if (next && model.value === closed) model.value = next;
+				emit("close", closed);
+				return;
+			}
+			const next = getNextTabAfterBatchClose(props.items.filter((item) => !values.includes(item.value)), model.value, anchor);
+			if (next !== void 0 && next !== model.value) model.value = next;
+			else if (next === void 0) model.value = "";
+			emit("closeBatch", values, action, anchor);
+		}
+		function onCloseTab(item) {
+			if (item.disabled || !isTabClosable(item, props.closable)) return;
+			applyCloseValues([item.value], "close", item.value);
+		}
+		function onContextSelect(actionKey, item) {
+			const action = actionKey;
+			if (![
+				"close",
+				"others",
+				"left",
+				"right",
+				"all"
+			].includes(action)) return;
+			const values = resolveTabsToClose(props.items, action, item.value, props.closable);
+			emit("contextMenu", action, item.value);
+			applyCloseValues(values, action, item.value);
+		}
+		function onAddTab() {
+			if (!canAdd.value) return;
+			emit("add");
+		}
+		function onOverflowSelect(value) {
+			onSelectTab(value);
+		}
+		/** 中键关闭（对齐浏览器 / VS Code 页签） */
+		function onTabAuxClick(item, event) {
+			if (event.button !== 1) return;
+			event.preventDefault();
+			onCloseTab(item);
+		}
+		/** 纵向滚轮转为横向滚动（scroll 溢出模式） */
+		function onNavWheel(event) {
+			if (!useScrollOverflow.value) return;
+			const viewport = navViewportRef.value;
+			if (!viewport) return;
+			if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+			if (viewport.scrollWidth <= viewport.clientWidth) return;
+			event.preventDefault();
+			viewport.scrollLeft += event.deltaY;
+			onNavScroll();
+		}
+		async function startRename(item) {
+			if (!isTabRenamable(item, props.renamable) || item.disabled) return;
+			renamingValue.value = item.value;
+			renameDraft.value = item.label;
+		}
+		function cancelRename() {
+			renamingValue.value = null;
+			renameDraft.value = "";
+			renameInputEl = null;
+		}
+		function commitRename(item) {
+			if (renamingValue.value !== item.value) return;
+			const label = renameDraft.value.trim();
+			if (label && label !== item.label) emit("rename", item.value, label);
+			cancelRename();
+		}
+		function canDragItem(item) {
+			return props.draggable && !item.disabled && !isTabFixed(item);
+		}
+		function onDragStart(item, event) {
+			if (!canDragItem(item)) {
+				event.preventDefault();
+				return;
+			}
+			const target = event.target;
+			if (target instanceof Element && target.closest(".rs-tabs__close, .rs-tabs__rename-input")) {
+				event.preventDefault();
+				return;
+			}
+			dragValue.value = item.value;
+			event.dataTransfer?.setData("text/plain", item.value);
+			if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+		}
+		function onDragOver(item, event) {
+			if (!props.draggable || !dragValue.value || dragValue.value === item.value) return;
+			if (isTabFixed(item)) return;
+			event.preventDefault();
+			dragOverValue.value = item.value;
+		}
+		function onDragLeave(item) {
+			if (dragOverValue.value === item.value) dragOverValue.value = null;
+		}
+		function onDrop(item, event) {
+			if (!props.draggable || !dragValue.value) return;
+			event.preventDefault();
+			if (dragValue.value !== item.value && !isTabFixed(item)) emit("reorder", dragValue.value, item.value);
+			dragValue.value = null;
+			dragOverValue.value = null;
+			scheduleLayout();
+		}
+		function onDragEnd() {
+			dragValue.value = null;
+			dragOverValue.value = null;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TabsRoot), {
+				"model-value": model.value,
+				class: normalizeClass(["rs-tabs", [
+					`rs-tabs--${__props.variant}`,
+					`rs-tabs--${__props.size}`,
+					`rs-tabs--justify-${__props.justify}`,
+					`rs-tabs--content-gap-${__props.contentGap}`,
+					{
+						"rs-tabs--panelless": __props.panelless,
+						"rs-tabs--borderless": __props.borderless,
+						"rs-tabs--scrollable": unref(useScrollOverflow),
+						"rs-tabs--dropdown-overflow": unref(useDropdownOverflow),
+						"rs-tabs--has-extra": hasExtra.value,
+						"rs-tabs--draggable": __props.draggable
+					}
+				]]),
+				"aria-label": unref(t)("tabs.label"),
+				"onUpdate:modelValue": onSelectTab
+			}, {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(__props.panelless ? "rs-tabs__shell" : "rs-tabs__body") }, [
+					unref(useDropdownOverflow) ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						ref_key: "measureRef",
+						ref: measureRef,
+						class: "rs-tabs__measure",
+						"aria-hidden": "true"
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+						return openBlock(), createElementBlock("button", {
+							key: `measure-${item.value}`,
+							type: "button",
+							class: normalizeClass(["rs-tabs__trigger rs-tabs__measure-trigger", `rs-tabs__trigger--${__props.size}`]),
+							"data-tab-value": item.value,
+							tabindex: "-1"
+						}, [
+							item.icon ? (openBlock(), createBlock(RsIcon_default, {
+								key: 0,
+								name: item.icon,
+								size: 14,
+								class: "rs-tabs__icon"
+							}, null, 8, ["name"])) : createCommentVNode("", true),
+							createElementVNode("span", _hoisted_2, toDisplayString(item.label), 1),
+							item.badge != null && item.badge !== "" ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(item.badge), 1)) : createCommentVNode("", true)
+						], 10, _hoisted_1);
+					}), 128))], 512)) : createCommentVNode("", true),
+					createElementVNode("div", {
+						ref_key: "navRef",
+						ref: navRef,
+						class: "rs-tabs__nav"
+					}, [
+						unref(useScrollOverflow) && unref(canScrollPrev) ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							class: "rs-tabs__scroll-btn rs-tabs__scroll-btn--prev",
+							"aria-label": unref(t)("tabs.scrollPrev"),
+							onClick: _cache[0] || (_cache[0] = ($event) => unref(scrollNav)(-1))
+						}, [createVNode(RsIcon_default, {
+							name: "chevron-left",
+							size: 14
+						})], 8, _hoisted_4)) : createCommentVNode("", true),
+						createElementVNode("div", mergeProps({
+							ref_key: "navViewportRef",
+							ref: navViewportRef,
+							class: "rs-tabs__nav-viewport",
+							onScrollPassive: _cache[9] || (_cache[9] = (...args) => unref(onNavScroll) && unref(onNavScroll)(...args))
+						}, unref(useScrollOverflow) ? { onWheel: onNavWheel } : {}), [createVNode(unref(TabsList), { class: "rs-tabs__list" }, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(tabBarItems.value, (item) => {
+								return openBlock(), createBlock(RsContextMenu_default, {
+									key: item.value,
+									items: contextItemsFor(item),
+									disabled: !__props.contextMenu,
+									onSelect: (key) => onContextSelect(key, item)
+								}, {
+									default: withCtx(() => [createVNode(unref(TabsTrigger), {
+										value: item.value,
+										disabled: item.disabled,
+										class: normalizeClass(["rs-tabs__trigger", {
+											"rs-tabs__trigger--dragging": dragValue.value === item.value,
+											"rs-tabs__trigger--drag-over": dragOverValue.value === item.value,
+											"rs-tabs__trigger--fixed": unref(isTabFixed)(item),
+											"rs-tabs__trigger--movable": canDragItem(item)
+										}]),
+										"data-tab-value": item.value,
+										"data-fixed": unref(isTabFixed)(item) ? "true" : void 0,
+										draggable: canDragItem(item) || void 0,
+										onDragstart: ($event) => onDragStart(item, $event),
+										onDragover: ($event) => onDragOver(item, $event),
+										onDragleave: ($event) => onDragLeave(item),
+										onDrop: ($event) => onDrop(item, $event),
+										onDragend: onDragEnd,
+										onAuxclick: ($event) => onTabAuxClick(item, $event)
+									}, {
+										default: withCtx(() => [
+											unref(isTabFixed)(item) ? (openBlock(), createBlock(RsIcon_default, {
+												key: 0,
+												name: "pin",
+												size: 12,
+												class: "rs-tabs__pin"
+											})) : createCommentVNode("", true),
+											item.icon ? (openBlock(), createBlock(RsIcon_default, {
+												key: 1,
+												name: item.icon,
+												size: 14,
+												class: "rs-tabs__icon"
+											}, null, 8, ["name"])) : createCommentVNode("", true),
+											renamingValue.value === item.value ? withDirectives((openBlock(), createElementBlock("input", {
+												key: 2,
+												ref_for: true,
+												ref: (el) => setRenameInputRef(el, item),
+												"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => renameDraft.value = $event),
+												class: "rs-tabs__rename-input",
+												"aria-label": unref(t)("tabs.rename"),
+												placeholder: unref(t)("tabs.renamePlaceholder"),
+												draggable: "false",
+												onKeydown: [withKeys(withModifiers(($event) => commitRename(item), ["prevent"]), ["enter"]), withKeys(withModifiers(cancelRename, ["prevent"]), ["escape"])],
+												onBlur: ($event) => commitRename(item),
+												onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
+												onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"])),
+												onDblclick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"])),
+												onDragstart: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop", "prevent"]))
+											}, null, 40, _hoisted_5)), [[vModelText, renameDraft.value]]) : (openBlock(), createElementBlock("span", {
+												key: 3,
+												class: "rs-tabs__label",
+												title: labelTitle(item),
+												onDblclick: withModifiers(($event) => startRename(item), ["stop"])
+											}, toDisplayString(item.label), 41, _hoisted_6)),
+											item.badge != null && item.badge !== "" ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(item.badge), 1)) : createCommentVNode("", true),
+											unref(isTabClosable)(item, __props.closable) ? (openBlock(), createElementBlock("button", {
+												key: 5,
+												type: "button",
+												class: "rs-tabs__close",
+												"aria-label": closeAriaLabel(item),
+												disabled: item.disabled,
+												draggable: "false",
+												onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["stop", "prevent"])),
+												onClick: withModifiers(($event) => onCloseTab(item), ["stop"]),
+												onAuxclick: _cache[7] || (_cache[7] = withModifiers(() => {}, ["stop", "prevent"])),
+												onDragstart: _cache[8] || (_cache[8] = withModifiers(() => {}, ["stop", "prevent"]))
+											}, [createVNode(RsIcon_default, {
+												name: "x",
+												size: 12
+											})], 40, _hoisted_8)) : createCommentVNode("", true)
+										]),
+										_: 2
+									}, 1032, [
+										"value",
+										"disabled",
+										"class",
+										"data-tab-value",
+										"data-fixed",
+										"draggable",
+										"onDragstart",
+										"onDragover",
+										"onDragleave",
+										"onDrop",
+										"onAuxclick"
+									])]),
+									_: 2
+								}, 1032, [
+									"items",
+									"disabled",
+									"onSelect"
+								]);
+							}), 128))]),
+							_: 1
+						})], 16),
+						unref(showOverflowMenu) ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							ref_key: "overflowWrapRef",
+							ref: overflowWrapRef,
+							class: "rs-tabs__overflow-wrap"
+						}, [createVNode(unref(DropdownMenuRoot), null, {
+							default: withCtx(() => [createVNode(unref(DropdownMenuTrigger), { class: normalizeClass(["rs-tabs__more", { "rs-tabs__more--active": unref(activeInHidden) }]) }, {
+								default: withCtx(() => [createElementVNode("span", _hoisted_9, toDisplayString(moreLabel.value), 1), createVNode(RsIcon_default, {
+									name: "chevron-down",
+									size: 14,
+									class: "rs-tabs__more-icon"
+								})]),
+								_: 1
+							}, 8, ["class"]), createVNode(unref(DropdownMenuPortal), null, {
+								default: withCtx(() => [createVNode(unref(DropdownMenuContent), {
+									class: "rs-tabs__more-menu",
+									"side-offset": 4,
+									align: "end"
+								}, {
+									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(overflowMenuItems), (item) => {
+										return openBlock(), createBlock(unref(DropdownMenuItem), {
+											key: item.value,
+											class: normalizeClass(["rs-tabs__more-item", { "rs-tabs__more-item--active": model.value === item.value }]),
+											onSelect: ($event) => onOverflowSelect(item.value)
+										}, {
+											default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+											_: 2
+										}, 1032, ["class", "onSelect"]);
+									}), 128))]),
+									_: 1
+								})]),
+								_: 1
+							})]),
+							_: 1
+						})], 512)) : createCommentVNode("", true),
+						canAdd.value ? (openBlock(), createElementBlock("button", {
+							key: 2,
+							type: "button",
+							class: "rs-tabs__add",
+							"aria-label": unref(t)("tabs.add"),
+							onClick: onAddTab
+						}, [createVNode(RsIcon_default, {
+							name: "plus",
+							size: 14
+						})], 8, _hoisted_10)) : createCommentVNode("", true),
+						unref(useScrollOverflow) && unref(canScrollNext) ? (openBlock(), createElementBlock("button", {
+							key: 3,
+							type: "button",
+							class: "rs-tabs__scroll-btn rs-tabs__scroll-btn--next",
+							"aria-label": unref(t)("tabs.scrollNext"),
+							onClick: _cache[10] || (_cache[10] = ($event) => unref(scrollNav)(1))
+						}, [createVNode(RsIcon_default, {
+							name: "chevron-right",
+							size: 14
+						})], 8, _hoisted_11)) : createCommentVNode("", true),
+						hasExtra.value ? (openBlock(), createElementBlock("div", {
+							key: 4,
+							ref_key: "extraRef",
+							ref: extraRef,
+							class: "rs-tabs__extra"
+						}, [renderSlot(_ctx.$slots, "extra")], 512)) : createCommentVNode("", true)
+					], 512),
+					!__props.panelless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.items, (item) => {
+						return openBlock(), createBlock(unref(TabsContent), {
+							key: `panel-${item.value}`,
+							value: item.value,
+							class: "rs-tabs__panel"
+						}, {
+							default: withCtx(() => [createElementVNode("div", _hoisted_12, [renderSlot(_ctx.$slots, item.value)])]),
+							_: 2
+						}, 1032, ["value"]);
+					}), 128)) : createCommentVNode("", true)
+				], 2)]),
+				_: 3
+			}, 8, [
+				"model-value",
+				"class",
+				"aria-label"
+			]);
+		};
+	}
+});
+//#endregion
+export { RsTabs_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/RsTabs.js

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

package/dist/components/RsTag.css

@@ -0,0 +1,94 @@
+
+.rs-tag[data-v-d532b045] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+  max-width: 100%;
+  border-radius: var(--rs-tag-radius, var(--rs-radius-sm));
+  font-weight: var(--rs-tag-font-weight, 400);
+  line-height: var(--rs-line-height-tight);
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+.rs-tag--ssm[data-v-d532b045] {
+  padding: 0 var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-tag--sm[data-v-d532b045] {
+  padding: 0.0625rem var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-tag--md[data-v-d532b045] {
+  padding: 0.125rem var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-tag--lg[data-v-d532b045] {
+  padding: var(--rs-space-xs) var(--rs-space-sm);
+  font-size: var(--rs-font-size-sm);
+}
+.rs-tag--round[data-v-d532b045] {
+  border-radius: var(--rs-radius-full);
+}
+.rs-tag--disabled[data-v-d532b045] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.rs-tag__content[data-v-d532b045] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-tag__close[data-v-d532b045] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--rs-radius-full);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.75;
+  outline: none;
+}
+.rs-tag__close[data-v-d532b045]:hover:not(:disabled) {
+  opacity: 1;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+.rs-tag__close[data-v-d532b045]:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-tag__close[data-v-d532b045]:disabled {
+  cursor: not-allowed;
+}
+.rs-tag--default[data-v-d532b045] {
+  background: var(--rs-surface-hover);
+  color: var(--rs-text);
+  border: 1px solid var(--rs-border);
+}
+.rs-tag--primary[data-v-d532b045] {
+  background: var(--rs-primary-container);
+  color: var(--rs-on-primary-container);
+  border: 1px solid color-mix(in srgb, var(--rs-primary) var(--rs-tag-border-alpha, 40%), transparent);
+}
+.rs-tag--success[data-v-d532b045] {
+  background: var(--rs-success-container);
+  color: var(--rs-on-success-container);
+  border: 1px solid color-mix(in srgb, var(--rs-success) var(--rs-tag-border-alpha, 40%), transparent);
+}
+.rs-tag--warning[data-v-d532b045] {
+  background: var(--rs-warning-container);
+  color: var(--rs-on-warning-container);
+  border: 1px solid color-mix(in srgb, var(--rs-warning) var(--rs-tag-border-alpha, 40%), transparent);
+}
+.rs-tag--danger[data-v-d532b045] {
+  background: var(--rs-danger-container);
+  color: var(--rs-on-danger-container);
+  border: 1px solid color-mix(in srgb, var(--rs-danger) var(--rs-tag-border-alpha, 40%), transparent);
+}
+.rs-tag--info[data-v-d532b045] {
+  background: var(--rs-info-container);
+  color: var(--rs-on-info-container);
+  border: 1px solid color-mix(in srgb, var(--rs-info) var(--rs-tag-border-alpha, 40%), transparent);
+}

package/dist/components/RsTag.d.ts

@@ -0,0 +1,33 @@
+import type { RsComponentSize, RsRadius } from '../theme/types';
+export type RsTagVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+type __VLS_Props = {
+    variant?: RsTagVariant;
+    closable?: boolean;
+    disabled?: boolean;
+    /** 胶囊圆角快捷开关；等价于 radius="full" */
+    round?: boolean;
+    size?: RsComponentSize;
+    radius?: RsRadius;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    variant: RsTagVariant;
+    disabled: boolean;
+    closable: boolean;
+    round: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};