@v-c/tabs 1.0.0 → 1.0.2

package/dist/TabNavList/OperationNode.vue_vue_type_script_setup_true_lang.cjs

@@ -1,210 +0,0 @@
-const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
-const require_utils = require("../utils.cjs");
-const require_AddButton = require("./AddButton.cjs");
-let vue = require("vue");
-let _v_c_util = require("@v-c/util");
-let _v_c_util_dist_RenderComponent = require("@v-c/util/dist/RenderComponent");
-_v_c_util_dist_RenderComponent = require_rolldown_runtime.__toESM(_v_c_util_dist_RenderComponent);
-let _v_c_dropdown = require("@v-c/dropdown");
-_v_c_dropdown = require_rolldown_runtime.__toESM(_v_c_dropdown);
-let _v_c_menu = require("@v-c/menu");
-_v_c_menu = require_rolldown_runtime.__toESM(_v_c_menu);
-let _v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
-_v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(_v_c_util_dist_KeyCode);
-var _hoisted_1 = [
-	"id",
-	"aria-controls",
-	"aria-expanded"
-];
-var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "OperationNode",
-	props: {
-		prefixCls: {},
-		className: {},
-		style: {},
-		id: {},
-		tabs: {},
-		rtl: { type: Boolean },
-		tabBarGutter: {},
-		activeKey: {},
-		mobile: { type: Boolean },
-		more: { default: () => ({}) },
-		editable: {},
-		locale: {},
-		removeAriaLabel: {},
-		onTabClick: {},
-		tabMoving: { type: Boolean },
-		getPopupContainer: {},
-		popupClassName: {},
-		popupStyle: {}
-	},
-	setup(__props, { expose: __expose }) {
-		const props = __props;
-		const MenuItem = _v_c_menu.default.Item;
-		const { more: moreProps, tabBarGutter, getPopupContainer, popupStyle, popupClassName, rtl, removeAriaLabel, onTabClick, locale, mobile, id, prefixCls, editable, style, className } = (0, vue.toRefs)(props);
-		const open = (0, vue.ref)(false);
-		const selectedKey = (0, vue.ref)(null);
-		const operationNodeRef = (0, vue.useTemplateRef)("operationNodeRef");
-		const popupId = (0, vue.computed)(() => `${id.value}-more-popup`);
-		const dropdownPrefix = (0, vue.computed)(() => `${prefixCls.value}-dropdown`);
-		const selectedItemId = (0, vue.computed)(() => selectedKey.value !== null ? `${popupId.value}-${selectedKey.value}` : null);
-		const dropdownAriaLabel = (0, vue.computed)(() => locale.value?.dropdownAriaLabel);
-		function onRemoveTab(event, key) {
-			event.preventDefault();
-			event.stopPropagation();
-			editable.value && editable.value.onEdit("remove", {
-				key,
-				event
-			});
-		}
-		const menuNode = (0, vue.computed)(() => {
-			return (0, vue.h)(_v_c_menu.default, {
-				"prefixCls": `${dropdownPrefix.value}-menu`,
-				"id": popupId.value,
-				"tabIndex": -1,
-				"role": "listbox",
-				"aria-activedescendant": selectedItemId.value,
-				"selectedKeys": selectedKey.value ? [selectedKey.value] : void 0,
-				"aria-label": dropdownAriaLabel.value !== void 0 ? dropdownAriaLabel.value : "expanded dropdown",
-				"onClick": ({ key, domEvent }) => {
-					onTabClick.value?.(key, domEvent);
-					open.value = false;
-				}
-			}, { default: () => props.tabs.map((tab) => {
-				const { closable, closeIcon, disabled, key, label } = tab;
-				const removable = require_utils.getRemovable(closable, closeIcon, editable.value, disabled);
-				return (0, vue.h)(MenuItem, {
-					"key": key,
-					"id": `${popupId.value}-${key}`,
-					"role": "option",
-					"aria-controls": id.value && `${id.value}-panel-${key}`,
-					"disabled": disabled
-				}, { default: () => [(0, vue.h)("span", {}, [label]), removable ? (0, vue.h)("button", {
-					"type": "button",
-					"aria-label": removeAriaLabel.value || "remove",
-					"tabindex": 0,
-					"class": `${dropdownPrefix.value}-menu-item-remove`,
-					"onClick": (e) => {
-						e.stopPropagation();
-						onRemoveTab(e, key);
-					}
-				}, [closeIcon || editable.value?.removeIcon || "×"]) : null] });
-			}) });
-		});
-		const overlayClassName = (0, vue.computed)(() => {
-			return (0, _v_c_util.clsx)({
-				[popupClassName.value]: popupClassName.value,
-				[`${dropdownPrefix.value}-rtl`]: rtl.value
-			});
-		});
-		const moreIconNode = (0, vue.computed)(() => moreProps.value?.icon || "More");
-		const moreStyle = (0, vue.computed)(() => {
-			const style$1 = { marginInlineStart: tabBarGutter.value ? `${tabBarGutter.value}px` : "0px" };
-			if (!props.tabs.length) {
-				style$1.visibility = "hidden";
-				style$1.order = 1;
-			}
-			return style$1;
-		});
-		function selectOffset(offset) {
-			const enabledTabs = props.tabs.filter((tab) => !tab.disabled);
-			let selectedIndex = enabledTabs.findIndex((tab) => tab.key === selectedKey.value) || 0;
-			const len = enabledTabs.length;
-			for (let i = 0; i < len; i += 1) {
-				selectedIndex = (selectedIndex + offset + len) % len;
-				const tab = enabledTabs[selectedIndex];
-				if (!tab.disabled) {
-					selectedKey.value = tab.key;
-					return;
-				}
-			}
-		}
-		function onKeyDown(e) {
-			const { which } = e;
-			if (!open.value) {
-				if ([
-					_v_c_util_dist_KeyCode.default.DOWN,
-					_v_c_util_dist_KeyCode.default.SPACE,
-					_v_c_util_dist_KeyCode.default.ENTER
-				].includes(which)) {
-					open.value = true;
-					e.preventDefault();
-				}
-				return;
-			}
-			switch (which) {
-				case _v_c_util_dist_KeyCode.default.UP:
-					selectOffset(-1);
-					e.preventDefault();
-					break;
-				case _v_c_util_dist_KeyCode.default.DOWN:
-					selectOffset(1);
-					e.preventDefault();
-					break;
-				case _v_c_util_dist_KeyCode.default.ESC:
-					open.value = false;
-					break;
-				case _v_c_util_dist_KeyCode.default.SPACE:
-				case _v_c_util_dist_KeyCode.default.ENTER:
-					if (selectedKey.value !== null) onTabClick.value?.(selectedKey.value, e);
-					break;
-			}
-		}
-		(0, vue.watch)(() => open.value, (visible) => {
-			if (!visible) selectedKey.value = null;
-		});
-		(0, vue.watch)([() => selectedItemId.value, () => selectedKey.value], () => {
-			if (selectedItemId.value) {
-				const ele = document.getElementById(selectedItemId.value);
-				if (ele?.scrollIntoView) ele.scrollIntoView(false);
-			}
-		});
-		__expose({ operationNodeRef });
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				ref_key: "operationNodeRef",
-				ref: operationNodeRef,
-				class: (0, vue.normalizeClass)([`${(0, vue.unref)(prefixCls)}-nav-operations`, (0, vue.unref)(className)]),
-				style: (0, vue.normalizeStyle)((0, vue.unref)(style))
-			}, [!(0, vue.unref)(mobile) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_v_c_dropdown.default), (0, vue.mergeProps)({
-				key: 0,
-				"prefix-cls": dropdownPrefix.value,
-				overlay: menuNode.value,
-				visible: __props.tabs.length ? open.value : false,
-				"overlay-class-name": overlayClassName.value,
-				"overlay-style": (0, vue.unref)(popupStyle),
-				"mouse-enter-delay": .1,
-				"mouse-leave-delay": .1,
-				"get-popup-container": (0, vue.unref)(getPopupContainer)
-			}, (0, vue.unref)(moreProps), { onVisibleChange: _cache[0] || (_cache[0] = ($event) => open.value = $event) }), {
-				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("button", {
-					id: `${(0, vue.unref)(id)}-more`,
-					type: "button",
-					class: (0, vue.normalizeClass)(`${(0, vue.unref)(prefixCls)}-nav-more`),
-					style: (0, vue.normalizeStyle)(moreStyle.value),
-					"aria-haspopup": "listbox",
-					"aria-controls": popupId.value,
-					"aria-expanded": open.value,
-					onKeydown: onKeyDown
-				}, [(0, vue.createVNode)((0, vue.unref)(_v_c_util_dist_RenderComponent.default), { render: moreIconNode.value }, null, 8, ["render"])], 46, _hoisted_1)]),
-				_: 1
-			}, 16, [
-				"prefix-cls",
-				"overlay",
-				"visible",
-				"overlay-class-name",
-				"overlay-style",
-				"get-popup-container"
-			])) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)(require_AddButton.default, {
-				"prefix-cls": (0, vue.unref)(prefixCls),
-				locale: (0, vue.unref)(locale),
-				editable: (0, vue.unref)(editable)
-			}, null, 8, [
-				"prefix-cls",
-				"locale",
-				"editable"
-			])], 6);
-		};
-	}
-});
-exports.default = OperationNode_vue_vue_type_script_setup_true_lang_default;

package/dist/TabNavList/TabNode.cjs

@@ -1,7 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_TabNode_vue_vue_type_script_setup_true_lang = require("./TabNode.vue_vue_type_script_setup_true_lang.cjs");
-var TabNode_default = require_TabNode_vue_vue_type_script_setup_true_lang.default;
-exports.default = TabNode_default;

package/dist/TabNavList/TabNode.vue_vue_type_script_setup_true_lang.cjs

@@ -1,129 +0,0 @@
-const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
-const require_utils = require("../utils.cjs");
-let vue = require("vue");
-let _v_c_util_dist_RenderComponent = require("@v-c/util/dist/RenderComponent");
-_v_c_util_dist_RenderComponent = require_rolldown_runtime.__toESM(_v_c_util_dist_RenderComponent);
-let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
-var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	name: "TabNode",
-	inheritAttrs: false,
-	__name: "TabNode",
-	props: {
-		id: {},
-		prefixCls: {},
-		tab: {},
-		active: { type: Boolean },
-		focus: { type: Boolean },
-		closable: { type: Boolean },
-		editable: {},
-		onClick: { type: Function },
-		onResize: { type: Function },
-		renderWrapper: { type: Function },
-		removeAriaLabel: {},
-		tabCount: {},
-		currentPosition: {},
-		removeIcon: { type: [
-			Object,
-			String,
-			Number,
-			null,
-			Boolean,
-			Array
-		] },
-		onKeyDown: { type: Function },
-		onMouseDown: { type: Function },
-		onMouseUp: { type: Function },
-		onFocus: { type: Function },
-		onBlur: { type: Function },
-		style: {},
-		className: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const btnRef = (0, vue.ref)();
-		function setBtnRef(el) {
-			btnRef.value = el;
-		}
-		const { prefixCls, tab, closable, active, editable, focus } = (0, vue.toRefs)(props);
-		const removable = (0, vue.computed)(() => require_utils.getRemovable(closable.value, tab.value.closeIcon, editable.value, tab.value.disabled));
-		const tabPrefix = (0, vue.computed)(() => `${prefixCls.value}-tab`);
-		function onInternalClick(e) {
-			if (tab.value.disabled) return;
-			props.onClick?.(e);
-		}
-		const cls = (0, vue.computed)(() => [
-			tabPrefix.value,
-			props.className,
-			{
-				[`${tabPrefix.value}-with-remove`]: removable.value,
-				[`${tabPrefix.value}-active`]: active.value,
-				[`${tabPrefix.value}-disabled`]: tab.value.disabled,
-				[`${tabPrefix.value}-focus`]: focus.value
-			}
-		]);
-		function onRemove(event) {
-			event.preventDefault();
-			event.stopPropagation();
-			editable.value?.onEdit("remove", {
-				key: tab.value.key,
-				event
-			});
-		}
-		(0, vue.onMounted)(() => {
-			(0, vue.watch)(() => focus.value, () => {
-				if (focus.value && btnRef.value) btnRef.value.focus();
-			}, { immediate: true });
-		});
-		const node = (0, vue.computed)(() => {
-			const btnChildren = [];
-			if (focus.value) btnChildren.push((0, vue.h)("div", {
-				"aria-live": "polite",
-				"style": "width: 0; height: 0; position: absolute; overflow: hidden; opacity: 0;"
-			}, `Tab ${props.currentPosition} of ${props.tabCount}`));
-			if (tab.value.icon) btnChildren.push((0, vue.h)("span", { class: [`${tabPrefix.value}-icon`] }, [(0, vue.h)(_v_c_util_dist_RenderComponent.default, { render: tab.value.icon })]));
-			if (tab.value.label) if (typeof tab.value.label === "string" && !(0, _v_c_util_dist_props_util.isEmptyElement)(tab.value.icon)) btnChildren.push((0, vue.h)("span", {}, tab.value.label));
-			else btnChildren.push(tab.value.label);
-			const children = [(0, vue.h)("div", {
-				"id": tab.value.id && `${tab.value.id}-tab-${tab.value.key}`,
-				"ref": setBtnRef,
-				"role": "tab",
-				"aria-selected": active.value,
-				"class": [`${tabPrefix.value}-btn`],
-				"aria-controls": tab.value.id && `${tab.value.id}-panel-${tab.value.key}`,
-				"aria-disabled": tab.value.disabled,
-				"tabindex": tab.value.disabled ? void 0 : active.value ? 0 : -1,
-				"onClick": (e) => {
-					e.stopPropagation();
-					onInternalClick(e);
-				},
-				"onKeydown": props.onKeyDown,
-				"onMousedown": props.onMouseDown,
-				"onMouseup": props.onMouseUp,
-				"onFocus": props.onFocus,
-				"onBlur": props.onBlur
-			}, btnChildren)];
-			if (removable.value) children.push((0, vue.h)("button", {
-				"type": "button",
-				"aria-label": props.removeAriaLabel || "remove",
-				"tabindex": active.value ? 0 : -1,
-				"class": [`${tabPrefix.value}-remove`],
-				"onClick": (e) => {
-					e.stopPropagation();
-					onRemove(e);
-				}
-			}, [(0, vue.h)(_v_c_util_dist_RenderComponent.default, { render: tab.value.closeIcon || editable.value && editable.value.removeIcon || "×" })]));
-			return (0, vue.h)("div", {
-				"key": tab.value.key,
-				"data-node-key": require_utils.genDataNodeKey(tab.value.key),
-				"class": cls.value,
-				"style": props.style,
-				"onClick": onInternalClick
-			}, children);
-		});
-		const finalNode = (0, vue.computed)(() => props.renderWrapper ? props.renderWrapper(node.value) : node.value);
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_v_c_util_dist_RenderComponent.default), { render: finalNode.value }, null, 8, ["render"]);
-		};
-	}
-});
-exports.default = TabNode_vue_vue_type_script_setup_true_lang_default;

package/dist/TabNavList/Wrapper.cjs

@@ -1,7 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_Wrapper_vue_vue_type_script_setup_true_lang = require("./Wrapper.vue_vue_type_script_setup_true_lang.cjs");
-var Wrapper_default = require_Wrapper_vue_vue_type_script_setup_true_lang.default;
-exports.default = Wrapper_default;

package/dist/TabNavList/Wrapper.vue_vue_type_script_setup_true_lang.cjs

@@ -1,54 +0,0 @@
-const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
-const require_index = require("./index.cjs");
-let vue = require("vue");
-let _v_c_util_dist_RenderComponent = require("@v-c/util/dist/RenderComponent");
-_v_c_util_dist_RenderComponent = require_rolldown_runtime.__toESM(_v_c_util_dist_RenderComponent);
-var Wrapper_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	name: "TabNavListWrapper",
-	inheritAttrs: false,
-	__name: "Wrapper",
-	props: {
-		id: {},
-		tabPosition: {},
-		activeKey: {},
-		rtl: { type: Boolean },
-		animated: {},
-		extra: { type: [
-			Object,
-			String,
-			Number,
-			null,
-			Boolean,
-			Array
-		] },
-		editable: {},
-		more: {},
-		mobile: { type: Boolean },
-		tabBarGutter: {},
-		renderTabBar: { type: Function },
-		style: {},
-		locale: {},
-		onTabClick: { type: Function },
-		onTabScroll: { type: Function },
-		getPopupContainer: { type: Function },
-		popupClassName: {},
-		indicator: {},
-		classNames: {},
-		styles: {},
-		className: {},
-		children: { type: Function }
-	},
-	setup(__props) {
-		const props = __props;
-		const renderNode = (0, vue.computed)(() => {
-			const restProps = { ...props };
-			delete restProps.renderTabBar;
-			if (props.renderTabBar) return props.renderTabBar(restProps, require_index.default);
-			return (0, vue.h)(require_index.default, restProps);
-		});
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_v_c_util_dist_RenderComponent.default), { render: renderNode.value }, null, 8, ["render"]);
-		};
-	}
-});
-exports.default = Wrapper_vue_vue_type_script_setup_true_lang_default;

package/dist/TabNavList/index.cjs

@@ -1,7 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_index_vue_vue_type_script_setup_true_lang = require("./index.vue_vue_type_script_setup_true_lang.cjs");
-var TabNavList_default = require_index_vue_vue_type_script_setup_true_lang.default;
-exports.default = TabNavList_default;