@v-c/tabs 1.0.2 → 1.1.0-rc.1

package/dist/TabNavList/OperationNode.vue_vue_type_script_setup_true_lang.js

@@ -32,7 +32,9 @@ var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		tabMoving: { type: Boolean },
 		getPopupContainer: {},
 		popupClassName: {},
-		popupStyle: {}
+		popupStyle: {},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -79,7 +81,8 @@ var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					"type": "button",
 					"aria-label": removeAriaLabel.value || "remove",
 					"tabindex": 0,
-					"class": `${dropdownPrefix.value}-menu-item-remove`,
+					"class": clsx(`${dropdownPrefix.value}-menu-item-remove`, props.classNames?.remove),
+					"style": props.styles?.remove,
 					"onClick": (e) => {
 						e.stopPropagation();
 						onRemoveTab(e, key);

package/dist/TabNavList/TabNode.vue_vue_type_script_setup_true_lang.js

@@ -35,7 +35,9 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		onFocus: { type: Function },
 		onBlur: { type: Function },
 		style: {},
-		className: {}
+		className: {},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -53,6 +55,7 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		const cls = computed(() => [
 			tabPrefix.value,
 			props.className,
+			props.classNames?.item,
 			{
 				[`${tabPrefix.value}-with-remove`]: removable.value,
 				[`${tabPrefix.value}-active`]: active.value,
@@ -60,6 +63,10 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				[`${tabPrefix.value}-focus`]: focus.value
 			}
 		]);
+		const mergedStyle = computed(() => ({
+			...props.styles?.item,
+			...props.style
+		}));
 		function onRemove(event) {
 			event.preventDefault();
 			event.stopPropagation();
@@ -105,7 +112,8 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				"type": "button",
 				"aria-label": props.removeAriaLabel || "remove",
 				"tabindex": active.value ? 0 : -1,
-				"class": [`${tabPrefix.value}-remove`],
+				"class": [`${tabPrefix.value}-remove`, props.classNames?.remove],
+				"style": props.styles?.remove,
 				"onClick": (e) => {
 					e.stopPropagation();
 					onRemove(e);
@@ -115,7 +123,7 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				"key": tab.value.key,
 				"data-node-key": genDataNodeKey(tab.value.key),
 				"class": cls.value,
-				"style": props.style,
+				"style": mergedStyle.value,
 				"onClick": onInternalClick
 			}, children);
 		});

package/dist/TabNavList/index.vue_vue_type_script_setup_true_lang.js

@@ -429,9 +429,14 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 									key: tab.key,
 									tab,
 									className: unref(tabsClassNames)?.item,
-									style: i === 0 ? unref(styles)?.item : {
-										...isHorizontal.value ? { marginInlineStart: tabBarGutter.value } : { marginTop: tabBarGutter.value },
-										...unref(styles)?.item || {}
+									style: i === 0 ? void 0 : isHorizontal.value ? { marginInlineStart: tabBarGutter.value } : { marginTop: tabBarGutter.value },
+									classNames: {
+										item: unref(tabsClassNames)?.item,
+										remove: unref(tabsClassNames)?.remove
+									},
+									styles: {
+										item: unref(styles)?.item,
+										remove: unref(styles)?.remove
 									},
 									closable: tab.closable,
 									editable: unref(editable),
@@ -490,7 +495,9 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						tabs: hiddenTabs.value,
 						"class-name": [unref(tabsClassNames)?.operations, !hasDropdown.value ? operationsHiddenClassName.value : void 0],
 						"popup-style": unref(styles)?.popup,
-						"tab-moving": !!lockAnimation.value
+						"tab-moving": !!lockAnimation.value,
+						"class-names": { remove: unref(tabsClassNames)?.remove },
+						styles: { remove: unref(styles)?.remove }
 					}, {
 						id: unref(id),
 						rtl: unref(rtl),
@@ -509,7 +516,9 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						"tabs",
 						"class-name",
 						"popup-style",
-						"tab-moving"
+						"tab-moving",
+						"class-names",
+						"styles"
 					]),
 					createVNode(ExtraContent_default, {
 						ref_key: "extraRightRef",

package/dist/interface.d.ts

@@ -84,6 +84,8 @@ export interface OperationNodeProps {
     getPopupContainer?: (node: HTMLElement) => HTMLElement;
     popupClassName?: string;
     popupStyle?: CSSProperties;
+    classNames?: Partial<Record<'remove', string>>;
+    styles?: Partial<Record<'remove', CSSProperties>>;
 }
 export interface TabNodeProps {
     id: string | null;
@@ -107,10 +109,12 @@ export interface TabNodeProps {
     onBlur: FocusEventHandler;
     style?: CSSProperties;
     className?: string;
+    classNames?: Partial<Record<'item' | 'remove', string>>;
+    styles?: Partial<Record<'item' | 'remove', CSSProperties>>;
 }
 export type TabPosition = 'left' | 'right' | 'top' | 'bottom';
 export type GetIndicatorSize = number | ((origin: number) => number);
-export type SemanticName = string;
+export type SemanticName = 'popup' | 'item' | 'indicator' | 'content' | 'header' | 'remove';
 export type RenderTabBar = (props: Record<string, any>, TabNavListComponent: any) => VueNode;
 export interface IndicatorConfig {
     size?: GetIndicatorSize;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/tabs",
   "type": "module",
-  "version": "1.0.2",
+  "version": "1.1.0-rc.1",
   "description": "tabs ui component for react",
   "publishConfig": {
     "access": "public"
@@ -32,11 +32,11 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
+    "@v-c/menu": "^1.1.0-rc.1",
     "@v-c/dropdown": "^1.0.2",
-    "@v-c/menu": "^1.0.12",
-    "@v-c/overflow": "^1.0.4",
-    "@v-c/util": "^1.0.19",
-    "@v-c/resize-observer": "^1.0.8"
+    "@v-c/resize-observer": "^1.0.8",
+    "@v-c/overflow": "^1.0.5",
+    "@v-c/util": "^1.0.19"
   },
   "scripts": {
     "build": "vite build",