@v-c/tabs 0.0.2

package/dist/TabNavList/TabNode.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+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.js

@@ -0,0 +1,3 @@
+import TabNode_vue_vue_type_script_setup_true_lang_default from "./TabNode.vue_vue_type_script_setup_true_lang.js";
+var TabNode_default = TabNode_vue_vue_type_script_setup_true_lang_default;
+export { TabNode_default as default };

package/dist/TabNavList/TabNode.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,129 @@
+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/TabNode.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,127 @@
+import { genDataNodeKey, getRemovable } from "../utils.js";
+import { computed, createBlock, defineComponent, h, onMounted, openBlock, ref, toRefs, unref, watch } from "vue";
+import RenderComponent from "@v-c/util/dist/RenderComponent";
+import { isEmptyElement } from "@v-c/util/dist/props-util";
+var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ 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 = ref();
+		function setBtnRef(el) {
+			btnRef.value = el;
+		}
+		const { prefixCls, tab, closable, active, editable, focus } = toRefs(props);
+		const removable = computed(() => getRemovable(closable.value, tab.value.closeIcon, editable.value, tab.value.disabled));
+		const tabPrefix = computed(() => `${prefixCls.value}-tab`);
+		function onInternalClick(e) {
+			if (tab.value.disabled) return;
+			props.onClick?.(e);
+		}
+		const cls = 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
+			});
+		}
+		onMounted(() => {
+			watch(() => focus.value, () => {
+				if (focus.value && btnRef.value) btnRef.value.focus();
+			}, { immediate: true });
+		});
+		const node = computed(() => {
+			const btnChildren = [];
+			if (focus.value) btnChildren.push(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(h("span", { class: [`${tabPrefix.value}-icon`] }, [h(RenderComponent, { render: tab.value.icon })]));
+			if (tab.value.label) if (typeof tab.value.label === "string" && !isEmptyElement(tab.value.icon)) btnChildren.push(h("span", {}, tab.value.label));
+			else btnChildren.push(tab.value.label);
+			const children = [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(h("button", {
+				"type": "button",
+				"aria-label": props.removeAriaLabel || "remove",
+				"tabindex": active.value ? 0 : -1,
+				"class": [`${tabPrefix.value}-remove`],
+				"onClick": (e) => {
+					e.stopPropagation();
+					onRemove(e);
+				}
+			}, [h(RenderComponent, { render: tab.value.closeIcon || editable.value && editable.value.removeIcon || "×" })]));
+			return h("div", {
+				"key": tab.value.key,
+				"data-node-key": genDataNodeKey(tab.value.key),
+				"class": cls.value,
+				"style": props.style,
+				"onClick": onInternalClick
+			}, children);
+		});
+		const finalNode = computed(() => props.renderWrapper ? props.renderWrapper(node.value) : node.value);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(RenderComponent), { render: finalNode.value }, null, 8, ["render"]);
+		};
+	}
+});
+export { TabNode_vue_vue_type_script_setup_true_lang_default as default };

package/dist/TabNavList/Wrapper.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+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.js

@@ -0,0 +1,3 @@
+import Wrapper_vue_vue_type_script_setup_true_lang_default from "./Wrapper.vue_vue_type_script_setup_true_lang.js";
+var Wrapper_default = Wrapper_vue_vue_type_script_setup_true_lang_default;
+export { Wrapper_default as default };

package/dist/TabNavList/Wrapper.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,54 @@
+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/Wrapper.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,52 @@
+import TabNavList_default from "./index.js";
+import { computed, createBlock, defineComponent, h, openBlock, unref } from "vue";
+import RenderComponent from "@v-c/util/dist/RenderComponent";
+var Wrapper_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ 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 = computed(() => {
+			const restProps = { ...props };
+			delete restProps.renderTabBar;
+			if (props.renderTabBar) return props.renderTabBar(restProps, TabNavList_default);
+			return h(TabNavList_default, restProps);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(RenderComponent), { render: renderNode.value }, null, 8, ["render"]);
+		};
+	}
+});
+export { Wrapper_vue_vue_type_script_setup_true_lang_default as default };

package/dist/TabNavList/index.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+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;

package/dist/TabNavList/index.js

@@ -0,0 +1,3 @@
+import index_vue_vue_type_script_setup_true_lang_default from "./index.vue_vue_type_script_setup_true_lang.js";
+var TabNavList_default = index_vue_vue_type_script_setup_true_lang_default;
+export { TabNavList_default as default };