ensis-ui 0.0.0-stage → 3.0.1

package/dist/components/tabs/src/RsTabs.impl.js

@@ -0,0 +1,656 @@
+import { useRsConfigOptional } from "../../../composables/useRsConfig.js";
+import { resolveDirMode } from "../../../locale/apply.js";
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsIcon_default from "../../icon/src/RsIcon.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import RsDropdown_default from "../../dropdown/src/RsDropdown.js";
+import { buildTabContextMenuItems, getAdjacentTabValue, getEdgeTabValue, getNextTabAfterBatchClose, getNextTabAfterClose, isTabClosable, isTabFixed, isTabRenamable, isVerticalTabsPosition, resolveTabKeyboardMove, resolveTabsSize, resolveTabsToClose, shouldRenderTabPanel, tabPanelId, tabTriggerId } from "./tabs-utils.js";
+import { useRsTabsNav } from "../../../composables/useRsTabsNav.js";
+import RsContextMenu_default from "../../context-menu/src/RsContextMenu.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useModel, useSlots, vModelText, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+//#region src/components/tabs/src/RsTabs.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var _hoisted_2 = ["data-tab-value"];
+var _hoisted_3 = { class: "rs-tabs__label" };
+var _hoisted_4 = {
+	key: 1,
+	class: "rs-tabs__badge"
+};
+var _hoisted_5 = ["aria-label"];
+var _hoisted_6 = ["aria-label", "aria-orientation"];
+var _hoisted_7 = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"tabindex",
+	"disabled",
+	"data-state",
+	"data-tab-value",
+	"data-fixed",
+	"draggable",
+	"onClick",
+	"onDragstart",
+	"onDragover",
+	"onDragleave",
+	"onDrop",
+	"onAuxclick"
+];
+var _hoisted_8 = {
+	key: 0,
+	class: "rs-tabs__drag",
+	"aria-hidden": "true"
+};
+var _hoisted_9 = [
+	"aria-label",
+	"placeholder",
+	"onKeydown",
+	"onBlur"
+];
+var _hoisted_10 = ["title", "onDblclick"];
+var _hoisted_11 = {
+	key: 5,
+	class: "rs-tabs__badge"
+};
+var _hoisted_12 = [
+	"aria-label",
+	"disabled",
+	"onClick"
+];
+var _hoisted_13 = ["aria-label"];
+var _hoisted_14 = { class: "rs-tabs__more-label" };
+var _hoisted_15 = ["aria-label"];
+var _hoisted_16 = ["aria-label"];
+var _hoisted_17 = [
+	"id",
+	"hidden",
+	"data-state",
+	"aria-labelledby",
+	"tabindex"
+];
+var _hoisted_18 = { class: "rs-tabs__panel-inner" };
+var RsTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsTabs",
+	__name: "RsTabs",
+	props: /*@__PURE__*/ mergeModels({
+		items: {},
+		size: {},
+		variant: { default: "line" },
+		panelless: {
+			type: Boolean,
+			default: false
+		},
+		borderless: {
+			type: Boolean,
+			default: false
+		},
+		contentGap: { default: "none" },
+		justify: { default: "start" },
+		tabPosition: { default: "top" },
+		activation: { default: "automatic" },
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		addable: {
+			type: Boolean,
+			default: false
+		},
+		maxCount: {},
+		renamable: {
+			type: Boolean,
+			default: false
+		},
+		draggable: {
+			type: Boolean,
+			default: false
+		},
+		showDragHandle: {
+			type: Boolean,
+			default: false
+		},
+		overflow: {
+			type: [String, Boolean],
+			default: false
+		},
+		contextMenu: {
+			type: Boolean,
+			default: false
+		},
+		beforeLeave: {},
+		lazy: {
+			type: Boolean,
+			default: false
+		},
+		destroyInactive: {
+			type: Boolean,
+			default: true
+		},
+		id: {},
+		ariaLabel: {}
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"change",
+		"close",
+		"closeBatch",
+		"add",
+		"rename",
+		"reorder",
+		"contextMenu"
+	], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const model = useModel(__props, "modelValue");
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const { t, locale } = useRsI18n();
+		const config = useRsConfigOptional();
+		const autoId = useId();
+		const itemsRef = computed(() => props.items);
+		const overflowMode = computed(() => props.overflow);
+		const positionRef = computed(() => props.tabPosition);
+		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 resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const tabSize = computed(() => resolveTabsSize(resolvedSize.value));
+		const writingDir = computed(() => resolveDirMode(config?.dir.value ?? "auto", locale.value));
+		const vertical = computed(() => isVerticalTabsPosition(props.tabPosition));
+		const rootId = computed(() => props.id || `rs-tabs${autoId.replace(/[^a-zA-Z0-9_-]/g, "")}`);
+		const navLabel = computed(() => props.ariaLabel || t("tabs.label"));
+		const tabIconPx = computed(() => {
+			if (tabSize.value === "sm") return 12;
+			if (tabSize.value === "lg") return 16;
+			return 14;
+		});
+		const chromeIconPx = computed(() => tabSize.value === "lg" ? 14 : 12);
+		const navRef = ref(null);
+		const measureRef = ref(null);
+		const overflowWrapRef = ref(null);
+		const extraRef = ref(null);
+		const triggerEls = /* @__PURE__ */ new Map();
+		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,
+			position: positionRef
+		});
+		const renamingValue = ref(null);
+		const renameDraft = ref("");
+		const dragValue = ref(null);
+		const dragOverValue = ref(null);
+		const focusedValue = ref(model.value);
+		const visited = ref(new Set(model.value ? [model.value] : []));
+		let renameInputEl = null;
+		let leaveLock = false;
+		watch(model, (value) => {
+			focusedValue.value = value;
+			if (!value || visited.value.has(value)) return;
+			const next = new Set(visited.value);
+			next.add(value);
+			visited.value = next;
+		});
+		watch(() => props.items.map((item) => item.value).join("\0"), () => {
+			const values = new Set(props.items.map((item) => item.value));
+			visited.value = new Set([...visited.value].filter((value) => values.has(value)));
+		});
+		function setTriggerRef(value, el) {
+			if (el instanceof HTMLButtonElement) {
+				triggerEls.set(value, el);
+				return;
+			}
+			triggerEls.delete(value);
+		}
+		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.moreCount", { count: 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")
+		}));
+		const contextMenuMap = computed(() => {
+			if (!props.contextMenu) return /* @__PURE__ */ new Map();
+			const map = /* @__PURE__ */ new Map();
+			for (const item of props.items) map.set(item.value, buildTabContextMenuItems(props.items, item, props.closable, contextMenuLabels.value));
+			return map;
+		});
+		function closeAriaLabel(item) {
+			return t("tabs.close", { label: item.label });
+		}
+		function contextItemsFor(item) {
+			return contextMenuMap.value.get(item.value) ?? [];
+		}
+		function labelTitle(item) {
+			return item.label.length > 12 ? item.label : void 0;
+		}
+		function panelVisible(value) {
+			return shouldRenderTabPanel(value, model.value, visited.value, props.lazy, props.destroyInactive);
+		}
+		function setActive(value) {
+			if (model.value === value) return;
+			model.value = value;
+			focusedValue.value = value;
+			emit("change", value);
+		}
+		async function onSelectTab(next) {
+			const value = String(next);
+			if (value === model.value || leaveLock) return value === model.value;
+			if (props.items.find((item) => item.value === value)?.disabled) return false;
+			if (props.beforeLeave) {
+				leaveLock = true;
+				try {
+					if (await props.beforeLeave(value, model.value) === false) return false;
+				} finally {
+					leaveLock = false;
+				}
+			}
+			setActive(value);
+			return true;
+		}
+		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) setActive(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) setActive(next);
+			else if (next === void 0 && model.value !== "") setActive("");
+			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);
+		}
+		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;
+		}
+		async function moveFocus(value) {
+			focusedValue.value = value;
+			await nextTick();
+			triggerEls.get(value)?.focus();
+			if (props.activation === "automatic") onSelectTab(value);
+		}
+		function onTabListKeydown(event) {
+			if (renamingValue.value) return;
+			const move = resolveTabKeyboardMove(event.key, props.tabPosition, writingDir.value === "rtl");
+			if (move === "start" || move === "end") {
+				const next = getEdgeTabValue(tabBarItems.value, move);
+				if (!next) return;
+				event.preventDefault();
+				moveFocus(next);
+				return;
+			}
+			if (typeof move === "number") {
+				const next = getAdjacentTabValue(tabBarItems.value, focusedValue.value || model.value, move);
+				if (!next) return;
+				event.preventDefault();
+				moveFocus(next);
+				return;
+			}
+			if (event.key === "Enter" || event.key === " ") {
+				if (!focusedValue.value) return;
+				event.preventDefault();
+				onSelectTab(focusedValue.value);
+			}
+		}
+		function focus(value) {
+			const target = value ?? model.value;
+			if (!target) return;
+			focusedValue.value = target;
+			triggerEls.get(target)?.focus();
+		}
+		async function selectTab(value) {
+			return onSelectTab(value);
+		}
+		onUnmounted(() => {
+			triggerEls.clear();
+			renameInputEl = null;
+			leaveLock = false;
+		});
+		__expose({
+			focus,
+			selectTab
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: __props.id,
+				class: normalizeClass(["rs-tabs", [
+					`rs-tabs--${__props.variant}`,
+					`rs-tabs--${tabSize.value}`,
+					`rs-tabs--justify-${__props.justify}`,
+					`rs-tabs--content-gap-${__props.contentGap}`,
+					`rs-tabs--position-${__props.tabPosition}`,
+					{
+						"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,
+						"rs-tabs--vertical": vertical.value
+					}
+				]])
+			}, [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--${tabSize.value}`]),
+						"data-tab-value": item.value,
+						tabindex: "-1"
+					}, [
+						item.icon ? (openBlock(), createBlock(RsIcon_default, {
+							key: 0,
+							name: item.icon,
+							size: tabIconPx.value,
+							class: "rs-tabs__icon"
+						}, null, 8, ["name", "size"])) : createCommentVNode("", true),
+						createElementVNode("span", _hoisted_3, toDisplayString(item.label), 1),
+						item.badge != null && item.badge !== "" ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(item.badge), 1)) : createCommentVNode("", true)
+					], 10, _hoisted_2);
+				}), 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"),
+						tabindex: "-1",
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(scrollNav)(-1))
+					}, [createVNode(RsIcon_default, {
+						name: "chevron-left",
+						size: tabIconPx.value
+					}, null, 8, ["size"])], 8, _hoisted_5)) : createCommentVNode("", true),
+					createElementVNode("div", {
+						ref_key: "navViewportRef",
+						ref: navViewportRef,
+						class: "rs-tabs__nav-viewport",
+						onScrollPassive: _cache[9] || (_cache[9] = (...args) => unref(onNavScroll) && unref(onNavScroll)(...args))
+					}, [createElementVNode("div", {
+						class: "rs-tabs__list",
+						role: "tablist",
+						"aria-label": navLabel.value,
+						"aria-orientation": vertical.value ? "vertical" : "horizontal",
+						onKeydown: onTabListKeydown
+					}, [(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(() => [createElementVNode("button", {
+								id: unref(tabTriggerId)(rootId.value, item.value),
+								ref_for: true,
+								ref: (el) => setTriggerRef(item.value, el),
+								type: "button",
+								role: "tab",
+								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)
+								}]),
+								"aria-selected": model.value === item.value,
+								"aria-controls": __props.panelless ? void 0 : unref(tabPanelId)(rootId.value, item.value),
+								tabindex: (focusedValue.value || model.value) === item.value ? 0 : -1,
+								disabled: item.disabled,
+								"data-state": model.value === item.value ? "active" : "inactive",
+								"data-tab-value": item.value,
+								"data-fixed": unref(isTabFixed)(item) ? "true" : void 0,
+								draggable: canDragItem(item) || void 0,
+								onClick: ($event) => onSelectTab(item.value),
+								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)
+							}, [renderSlot(_ctx.$slots, "tab", {
+								item,
+								active: model.value === item.value,
+								disabled: Boolean(item.disabled)
+							}, () => [
+								canDragItem(item) && __props.showDragHandle ? (openBlock(), createElementBlock("span", _hoisted_8)) : createCommentVNode("", true),
+								unref(isTabFixed)(item) ? (openBlock(), createBlock(RsIcon_default, {
+									key: 1,
+									name: "pin",
+									size: chromeIconPx.value,
+									class: "rs-tabs__pin"
+								}, null, 8, ["size"])) : createCommentVNode("", true),
+								item.icon ? (openBlock(), createBlock(RsIcon_default, {
+									key: 2,
+									name: item.icon,
+									size: tabIconPx.value,
+									class: "rs-tabs__icon"
+								}, null, 8, ["name", "size"])) : createCommentVNode("", true),
+								renamingValue.value === item.value ? withDirectives((openBlock(), createElementBlock("input", {
+									key: 3,
+									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_9)), [[vModelText, renameDraft.value]]) : (openBlock(), createElementBlock("span", {
+									key: 4,
+									class: "rs-tabs__label",
+									title: labelTitle(item),
+									onDblclick: withModifiers(($event) => startRename(item), ["stop"])
+								}, toDisplayString(item.label), 41, _hoisted_10)),
+								item.badge != null && item.badge !== "" ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(item.badge), 1)) : createCommentVNode("", true),
+								unref(isTabClosable)(item, __props.closable) ? (openBlock(), createElementBlock("button", {
+									key: 6,
+									type: "button",
+									class: "rs-tabs__close",
+									"aria-label": closeAriaLabel(item),
+									disabled: item.disabled,
+									tabindex: "-1",
+									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: chromeIconPx.value
+								}, null, 8, ["size"])], 40, _hoisted_12)) : createCommentVNode("", true)
+							])], 42, _hoisted_7)]),
+							_: 2
+						}, 1032, [
+							"items",
+							"disabled",
+							"onSelect"
+						]);
+					}), 128))], 40, _hoisted_6)], 544),
+					unref(showOverflowMenu) ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						ref_key: "overflowWrapRef",
+						ref: overflowWrapRef,
+						class: "rs-tabs__overflow-wrap"
+					}, [createVNode(RsDropdown_default, {
+						items: unref(overflowMenuItems),
+						"show-selected": false,
+						"content-width": "fit",
+						onSelect: onOverflowSelect
+					}, {
+						trigger: withCtx(() => [createElementVNode("button", {
+							type: "button",
+							class: normalizeClass(["rs-tabs__more", { "rs-tabs__more--active": unref(activeInHidden) }]),
+							"aria-label": moreLabel.value
+						}, [createElementVNode("span", _hoisted_14, toDisplayString(moreLabel.value), 1), createVNode(RsIcon_default, {
+							name: "chevron-down",
+							size: tabIconPx.value,
+							class: "rs-tabs__more-icon"
+						}, null, 8, ["size"])], 10, _hoisted_13)]),
+						_: 1
+					}, 8, ["items"])], 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: tabIconPx.value
+					}, null, 8, ["size"])], 8, _hoisted_15)) : 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"),
+						tabindex: "-1",
+						onClick: _cache[10] || (_cache[10] = ($event) => unref(scrollNav)(1))
+					}, [createVNode(RsIcon_default, {
+						name: "chevron-right",
+						size: tabIconPx.value
+					}, null, 8, ["size"])], 8, _hoisted_16)) : 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(), createElementBlock(Fragment, { key: `panel-${item.value}` }, [panelVisible(item.value) ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						id: unref(tabPanelId)(rootId.value, item.value),
+						role: "tabpanel",
+						class: "rs-tabs__panel",
+						hidden: item.value !== model.value,
+						"data-state": item.value === model.value ? "active" : "inactive",
+						"aria-labelledby": unref(tabTriggerId)(rootId.value, item.value),
+						tabindex: item.value === model.value ? 0 : void 0
+					}, [createElementVNode("div", _hoisted_18, [renderSlot(_ctx.$slots, item.value)])], 8, _hoisted_17)) : createCommentVNode("", true)], 64);
+				}), 128)) : createCommentVNode("", true)
+			], 2)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RsTabs_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/tabs/src/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/tabs/src/RsTabs.vue
+var RsTabs_default = RsTabs_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RsTabs_default as default };