@sdata/web-vue 3.30.0 → 4.1.0

package/es/tabs/{tabs-nav.d.ts → tabs-nav.vue.d.ts}

@@ -1,7 +1,10 @@
-import { PropType } from 'vue';
+import { type PropType } from 'vue';
 import type { Direction } from '../_utils/constant';
-import type { TabData, TabsType, ScrollPosition } from './interface';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+import type { ScrollPosition, TabData, TabsType } from './interface';
+type __VLS_Slots = {
+    extra(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     tabs: {
         type: PropType<TabData[]>;
         required: true;
@@ -14,9 +17,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<TabsType>;
         required: true;
     };
-    activeKey: {
-        type: (StringConstructor | NumberConstructor)[];
-    };
+    activeKey: (StringConstructor | NumberConstructor)[];
     activeIndex: {
         type: NumberConstructor;
         required: true;
@@ -49,7 +50,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<ScrollPosition>;
         default: string;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("add" | "click" | "delete")[], "add" | "click" | "delete", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    add: (event: Event) => any;
+    click: (key: string | number, event: Event) => any;
+    delete: (key: string | number, event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tabs: {
         type: PropType<TabData[]>;
         required: true;
@@ -62,9 +67,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<TabsType>;
         required: true;
     };
-    activeKey: {
-        type: (StringConstructor | NumberConstructor)[];
-    };
+    activeKey: (StringConstructor | NumberConstructor)[];
     activeIndex: {
         type: NumberConstructor;
         required: true;
@@ -98,13 +101,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
 }>> & Readonly<{
-    onClick?: ((...args: any[]) => any) | undefined;
-    onDelete?: ((...args: any[]) => any) | undefined;
-    onAdd?: ((...args: any[]) => any) | undefined;
+    onAdd?: ((event: Event) => any) | undefined;
+    onClick?: ((key: string | number, event: Event) => any) | undefined;
+    onDelete?: ((key: string | number, event: Event) => any) | undefined;
 }>, {
     editable: boolean;
     showAddButton: boolean;
     headerPadding: boolean;
     scrollPosition: ScrollPosition;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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;
+    };
+};

package/es/tabs/tabs-nav.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,332 @@
+import { configProviderInjectionKey } from "../config-provider/context.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { isNumber, isUndefined } from "../_utils/is.js";
+import resize_observer_default from "../_components/resize-observer.js";
+import { off, on } from "../_utils/dom.js";
+import icon_hover_default from "../_components/icon-hover.js";
+import { KEYBOARD_KEY } from "../_utils/keyboard.js";
+import IconPlus from "../icon/icon-plus/index.js";
+import tabs_button_default from "./tabs-button.js";
+import tabs_nav_ink_default from "./tabs-nav-ink.js";
+import tabs_tab_default from "./tabs-tab.js";
+import { updateScrollOffset } from "./utils.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toRef, unref, useAttrs, watch, withCtx } from "vue";
+import { createReusableTemplate } from "@vueuse/core";
+//#region components/tabs/tabs-nav.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-orientation"];
+var tabs_nav_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "TabsNav",
+	inheritAttrs: false
+}), {}, {
+	__name: "tabs-nav",
+	props: {
+		tabs: {
+			type: Array,
+			required: true
+		},
+		direction: {
+			type: String,
+			required: true
+		},
+		type: {
+			type: String,
+			required: true
+		},
+		activeKey: [String, Number],
+		activeIndex: {
+			type: Number,
+			required: true
+		},
+		position: {
+			type: String,
+			required: true
+		},
+		size: {
+			type: String,
+			required: true
+		},
+		showAddButton: {
+			type: Boolean,
+			default: false
+		},
+		editable: {
+			type: Boolean,
+			default: false
+		},
+		animation: {
+			type: Boolean,
+			required: true
+		},
+		headerPadding: {
+			type: Boolean,
+			default: true
+		},
+		scrollPosition: {
+			type: String,
+			default: "auto"
+		}
+	},
+	emits: [
+		"click",
+		"add",
+		"delete"
+	],
+	setup(__props, { emit: __emit }) {
+		const VNodeRenderer = (_props) => _props.content;
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const [DefineAddButton, ReuseAddButton] = createReusableTemplate();
+		const prefixCls = getPrefixCls("tabs-nav");
+		const configContext = inject(configProviderInjectionKey, void 0);
+		const rtl = computed(() => {
+			var _configContext$rtl;
+			return (_configContext$rtl = configContext === null || configContext === void 0 ? void 0 : configContext.rtl) !== null && _configContext$rtl !== void 0 ? _configContext$rtl : false;
+		});
+		const wrapperRef = ref();
+		const listRef = ref();
+		const tabsRef = ref({});
+		const activeTabRef = computed(() => {
+			if (!isUndefined(props.activeKey)) return tabsRef.value[props.activeKey];
+		});
+		const isRtlHorizontal = computed(() => rtl.value && props.direction === "horizontal");
+		const inkRef = ref();
+		const mergedEditable = computed(() => props.editable && [
+			"line",
+			"card",
+			"card-gutter"
+		].includes(props.type));
+		const isScroll = ref(false);
+		const wrapperLength = ref(0);
+		const maxOffset = ref(0);
+		const offset = ref(0);
+		const getWrapperLength = () => {
+			var _ref, _wrapperRef$value, _wrapperRef$value2;
+			return (_ref = props.direction === "vertical" ? (_wrapperRef$value = wrapperRef.value) === null || _wrapperRef$value === void 0 ? void 0 : _wrapperRef$value.offsetHeight : (_wrapperRef$value2 = wrapperRef.value) === null || _wrapperRef$value2 === void 0 ? void 0 : _wrapperRef$value2.offsetWidth) !== null && _ref !== void 0 ? _ref : 0;
+		};
+		const getMaxOffset = () => {
+			if (!listRef.value || !wrapperRef.value) return 0;
+			return props.direction === "vertical" ? listRef.value.offsetHeight - wrapperRef.value.offsetHeight : listRef.value.offsetWidth - wrapperRef.value.offsetWidth;
+		};
+		const isOverflow = () => {
+			if (!wrapperRef.value || !listRef.value) return false;
+			return props.direction === "vertical" ? listRef.value.offsetHeight > wrapperRef.value.offsetHeight : listRef.value.offsetWidth > wrapperRef.value.offsetWidth;
+		};
+		const getSize = () => {
+			isScroll.value = isOverflow();
+			if (isScroll.value) {
+				wrapperLength.value = getWrapperLength();
+				maxOffset.value = getMaxOffset();
+				if (offset.value > maxOffset.value) offset.value = maxOffset.value;
+			} else offset.value = 0;
+		};
+		const setOffset = (nextOffset) => {
+			if (!wrapperRef.value || !listRef.value || nextOffset < 0) nextOffset = 0;
+			offset.value = Math.min(nextOffset, maxOffset.value);
+		};
+		const setActiveTabOffset = () => {
+			if (!activeTabRef.value || !wrapperRef.value || !isScroll.value) return;
+			updateScrollOffset(wrapperRef.value, props.direction);
+			const isHorizontal = props.direction === "horizontal";
+			const sizeProperty = isHorizontal ? "offsetWidth" : "offsetHeight";
+			const wrapperSize = wrapperRef.value[sizeProperty];
+			const tabSize = activeTabRef.value[sizeProperty];
+			let tabPosition = 0;
+			if (isRtlHorizontal.value) {
+				var _listRef$value;
+				tabPosition = (((_listRef$value = listRef.value) === null || _listRef$value === void 0 ? void 0 : _listRef$value.offsetWidth) || 0) - activeTabRef.value.offsetLeft - tabSize;
+			} else tabPosition = isHorizontal ? activeTabRef.value.offsetLeft : activeTabRef.value.offsetTop;
+			const marginSide = isHorizontal ? isRtlHorizontal.value ? props.scrollPosition === "end" ? "marginLeft" : "marginRight" : props.scrollPosition === "end" ? "marginRight" : "marginLeft" : props.scrollPosition === "end" ? "marginBottom" : "marginTop";
+			const tabStyle = window.getComputedStyle(activeTabRef.value);
+			const tabMargin = parseFloat(tabStyle[marginSide]) || 0;
+			let targetOffset = 0;
+			switch (props.scrollPosition) {
+				case "auto":
+					if (tabPosition < offset.value) targetOffset = tabPosition - tabMargin;
+					else if (tabPosition + tabSize > offset.value + wrapperSize) targetOffset = tabPosition + tabSize - wrapperSize + tabMargin;
+					break;
+				case "center":
+					targetOffset = tabPosition + (tabSize - wrapperSize + tabMargin) / 2;
+					break;
+				case "start":
+					targetOffset = tabPosition - tabMargin;
+					break;
+				case "end":
+					targetOffset = tabPosition + tabSize - wrapperSize + tabMargin;
+					break;
+				default: if (isNumber(props.scrollPosition)) targetOffset = tabPosition - props.scrollPosition;
+			}
+			setOffset(targetOffset);
+		};
+		const handleWheel = (event) => {
+			if (!isScroll.value) return;
+			event.preventDefault();
+			const { deltaX, deltaY } = event;
+			setOffset(offset.value + (Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY));
+		};
+		const handleClick = (key, event) => emit("click", key, event);
+		const handleDelete = (key, event) => {
+			emit("delete", key, event);
+			nextTick(() => delete tabsRef.value[key]);
+		};
+		const handleButtonClick = (type) => {
+			const scrollDirection = type === "previous" !== isRtlHorizontal.value ? -1 : 1;
+			setOffset(offset.value + scrollDirection * wrapperLength.value);
+		};
+		const focusAndActivate = (key, event) => {
+			const element = tabsRef.value[key];
+			if (element instanceof HTMLElement) element.focus();
+			emit("click", key, event);
+		};
+		const handleListKeydown = (event) => {
+			const enabled = props.tabs.filter((tab) => !tab.disabled);
+			if (!enabled.length) return;
+			const length = enabled.length;
+			const currentIndex = Math.max(0, enabled.findIndex((tab) => tab.key === props.activeKey));
+			let nextIndex = currentIndex;
+			const { key } = event;
+			if (props.direction === "vertical") if (key === KEYBOARD_KEY.ARROW_DOWN) nextIndex = currentIndex + 1;
+			else if (key === KEYBOARD_KEY.ARROW_UP) nextIndex = currentIndex - 1;
+			else if (key === KEYBOARD_KEY.HOME) nextIndex = 0;
+			else if (key === KEYBOARD_KEY.END) nextIndex = length - 1;
+			else return;
+			else if (key === KEYBOARD_KEY.ARROW_RIGHT) nextIndex = isRtlHorizontal.value ? currentIndex - 1 : currentIndex + 1;
+			else if (key === KEYBOARD_KEY.ARROW_LEFT) nextIndex = isRtlHorizontal.value ? currentIndex + 1 : currentIndex - 1;
+			else if (key === KEYBOARD_KEY.HOME) nextIndex = 0;
+			else if (key === KEYBOARD_KEY.END) nextIndex = length - 1;
+			else return;
+			event.preventDefault();
+			nextIndex = (nextIndex % length + length) % length;
+			focusAndActivate(enabled[nextIndex].key, event);
+		};
+		const handleResize = () => {
+			var _inkRef$value;
+			getSize();
+			(_inkRef$value = inkRef.value) === null || _inkRef$value === void 0 || _inkRef$value.$forceUpdate();
+		};
+		watch(toRef(props, "tabs"), () => nextTick(getSize));
+		watch([
+			toRef(props, "activeIndex"),
+			toRef(props, "scrollPosition"),
+			rtl
+		], () => {
+			setTimeout(() => {
+				var _inkRef$value2;
+				setActiveTabOffset();
+				(_inkRef$value2 = inkRef.value) === null || _inkRef$value2 === void 0 || _inkRef$value2.getInkStyle();
+			}, 0);
+		});
+		onMounted(() => {
+			getSize();
+			if (wrapperRef.value) on(wrapperRef.value, "wheel", handleWheel, { passive: false });
+		});
+		onUnmounted(() => {
+			if (wrapperRef.value) off(wrapperRef.value, "wheel", handleWheel);
+		});
+		const setTabRef = (key, component) => {
+			if (component && "$el" in component && component.$el instanceof HTMLElement) tabsRef.value[key] = component.$el;
+		};
+		const cls = computed(() => [
+			prefixCls,
+			`${prefixCls}-${props.direction}`,
+			`${prefixCls}-${props.position}`,
+			`${prefixCls}-size-${props.size}`,
+			`${prefixCls}-type-${props.type}`
+		]);
+		const listCls = computed(() => [`${prefixCls}-tab-list`, { [`${prefixCls}-tab-list-no-padding`]: !props.headerPadding && ["line", "text"].includes(props.type) && props.direction === "horizontal" }]);
+		const listStyle = computed(() => ({ transform: props.direction === "vertical" ? `translateY(${-offset.value}px)` : `translateX(${rtl.value ? offset.value : -offset.value}px)` }));
+		const tabCls = computed(() => [`${prefixCls}-tab`, { [`${prefixCls}-tab-scroll`]: isScroll.value }]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineAddButton), null, {
+				default: withCtx(() => [mergedEditable.value && props.showAddButton ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-add-btn`),
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("add", $event))
+				}, [createVNode(icon_hover_default, null, {
+					default: withCtx(() => [createVNode(unref(IconPlus))]),
+					_: 1
+				})], 2)) : createCommentVNode("", true)]),
+				_: 1
+			}), createElementVNode("div", mergeProps(unref(attrs), { class: cls.value }), [
+				isScroll.value ? (openBlock(), createBlock(tabs_button_default, {
+					key: 0,
+					type: isRtlHorizontal.value ? "next" : "previous",
+					direction: props.direction,
+					disabled: offset.value <= 0,
+					onClick: handleButtonClick
+				}, null, 8, [
+					"type",
+					"direction",
+					"disabled"
+				])) : createCommentVNode("", true),
+				createVNode(resize_observer_default, { onResize: getSize }, {
+					default: withCtx(() => [createElementVNode("div", {
+						ref_key: "wrapperRef",
+						ref: wrapperRef,
+						class: normalizeClass(tabCls.value)
+					}, [createVNode(resize_observer_default, { onResize: handleResize }, {
+						default: withCtx(() => [createElementVNode("div", {
+							ref_key: "listRef",
+							ref: listRef,
+							class: normalizeClass(listCls.value),
+							style: normalizeStyle(listStyle.value),
+							role: "tablist",
+							"aria-orientation": props.direction === "vertical" ? "vertical" : "horizontal",
+							onKeydown: handleListKeydown
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(props.tabs, (tab) => {
+							return openBlock(), createBlock(tabs_tab_default, {
+								key: tab.key,
+								ref_for: true,
+								ref: (component) => setTabRef(tab.key, component),
+								active: tab.key === props.activeKey,
+								tab,
+								editable: props.editable,
+								onClick: handleClick,
+								onDelete: handleDelete
+							}, {
+								default: withCtx(() => {
+									var _tab$slots$title, _tab$slots$title2, _tab$slots;
+									return [createVNode(VNodeRenderer, { content: (_tab$slots$title = (_tab$slots$title2 = (_tab$slots = tab.slots).title) === null || _tab$slots$title2 === void 0 ? void 0 : _tab$slots$title2.call(_tab$slots)) !== null && _tab$slots$title !== void 0 ? _tab$slots$title : tab.title }, null, 8, ["content"])];
+								}),
+								_: 2
+							}, 1032, [
+								"active",
+								"tab",
+								"editable"
+							]);
+						}), 128)), props.type === "line" && activeTabRef.value ? (openBlock(), createBlock(tabs_nav_ink_default, {
+							key: 0,
+							ref_key: "inkRef",
+							ref: inkRef,
+							"active-tab-ref": activeTabRef.value,
+							direction: props.direction,
+							disabled: false,
+							animation: props.animation
+						}, null, 8, [
+							"active-tab-ref",
+							"direction",
+							"animation"
+						])) : createCommentVNode("", true)], 46, _hoisted_1)]),
+						_: 1
+					}), !isScroll.value ? (openBlock(), createBlock(unref(ReuseAddButton), { key: 0 })) : createCommentVNode("", true)], 2)]),
+					_: 1
+				}),
+				isScroll.value ? (openBlock(), createBlock(tabs_button_default, {
+					key: 1,
+					type: isRtlHorizontal.value ? "previous" : "next",
+					direction: props.direction,
+					disabled: offset.value >= maxOffset.value,
+					onClick: handleButtonClick
+				}, null, 8, [
+					"type",
+					"direction",
+					"disabled"
+				])) : createCommentVNode("", true),
+				createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-extra`) }, [isScroll.value ? (openBlock(), createBlock(unref(ReuseAddButton), { key: 0 })) : createCommentVNode("", true), renderSlot(_ctx.$slots, "extra")], 2)
+			], 16)], 64);
+		};
+	}
+}));
+//#endregion
+export { tabs_nav_vue_vue_type_script_setup_true_lang_default as default };

package/es/tabs/tabs-tab.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import icon_hover_default from "../_components/icon-hover.js";
 import { KEYBOARD_KEY } from "../_utils/keyboard.js";