@v-c/tabs 0.0.2

package/dist/interface.d.ts

@@ -0,0 +1,195 @@
+import { DropdownProps } from '@v-c/dropdown';
+import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from '@v-c/util/dist/EventInterface';
+import { VueNode } from '@v-c/util/dist/type';
+import { CSSMotionProps } from '@v-c/util/dist/utils/transition';
+import { CSSProperties } from 'vue';
+export type SizeInfo = [width: number, height: number];
+export interface EditableConfig {
+    onEdit: (type: 'add' | 'remove', info: {
+        key?: string;
+        event: MouseEvent | KeyboardEvent;
+    }) => void;
+    showAdd?: boolean;
+    removeIcon?: VueNode;
+    addIcon?: VueNode;
+}
+export interface AnimatedConfig {
+    inkBar?: boolean;
+    tabPane?: boolean;
+    tabPaneMotion?: CSSMotionProps;
+}
+export interface TabsLocale {
+    dropdownAriaLabel?: string;
+    removeAriaLabel?: string;
+    addAriaLabel?: string;
+}
+export interface AddButtonProps {
+    prefixCls: string;
+    editable?: EditableConfig;
+    locale?: TabsLocale;
+    style?: CSSProperties;
+}
+export type OnTabScroll = (info: {
+    direction: 'left' | 'right' | 'top' | 'bottom';
+}) => void;
+export type TabBarExtraPosition = 'left' | 'right';
+export type TabBarExtraMap = Partial<Record<TabBarExtraPosition, VueNode>>;
+export type TabBarExtraContent = VueNode | TabBarExtraMap;
+export interface ExtraContentProps {
+    position: TabBarExtraPosition;
+    prefixCls: string;
+    extra?: TabBarExtraContent;
+}
+export interface TabPaneProps {
+    tab?: VueNode;
+    className?: unknown;
+    style?: CSSProperties;
+    disabled?: boolean;
+    children?: VueNode;
+    forceRender?: boolean;
+    closable?: boolean;
+    closeIcon?: VueNode;
+    icon?: VueNode;
+    prefixCls?: string;
+    tabKey?: string;
+    id?: string | null;
+    animated?: boolean;
+    active?: boolean;
+    destroyOnHidden?: boolean;
+}
+export interface Tab extends Omit<TabPaneProps, 'tab' | 'children' | 'className'> {
+    key: string;
+    label: VueNode;
+    class?: string;
+    style?: CSSProperties;
+    content?: VueNode;
+}
+export type moreIcon = VueNode;
+export type MoreProps = {
+    icon?: moreIcon;
+} & Omit<DropdownProps, 'children'>;
+export interface OperationNodeProps {
+    prefixCls: string;
+    className?: unknown;
+    style?: CSSProperties;
+    id: string | null;
+    tabs: Tab[];
+    rtl: boolean;
+    tabBarGutter?: number;
+    activeKey: string;
+    mobile: boolean;
+    more?: MoreProps;
+    editable?: EditableConfig;
+    locale?: TabsLocale;
+    removeAriaLabel?: string;
+    onTabClick: (key: string, e: MouseEvent | KeyboardEvent) => void;
+    tabMoving?: boolean;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    popupClassName?: string;
+    popupStyle?: CSSProperties;
+}
+export interface TabNodeProps {
+    id: string | null;
+    prefixCls: string;
+    tab: Tab;
+    active: boolean;
+    focus: boolean;
+    closable?: boolean;
+    editable?: EditableConfig;
+    onClick?: (e: MouseEvent | KeyboardEvent) => void;
+    onResize?: (width: number, height: number, left: number, top: number) => void;
+    renderWrapper?: (node: VueNode) => VueNode;
+    removeAriaLabel?: string;
+    tabCount: number;
+    currentPosition: number;
+    removeIcon?: VueNode;
+    onKeyDown: KeyboardEventHandler;
+    onMouseDown: MouseEventHandler;
+    onMouseUp: MouseEventHandler;
+    onFocus: FocusEventHandler;
+    onBlur: FocusEventHandler;
+    style?: CSSProperties;
+    className?: string;
+}
+export type TabPosition = 'left' | 'right' | 'top' | 'bottom';
+export type GetIndicatorSize = number | ((origin: number) => number);
+export type SemanticName = string;
+export type RenderTabBar = (props: Record<string, any>, TabNavListComponent: any) => VueNode;
+export interface IndicatorConfig {
+    size?: GetIndicatorSize;
+    align?: 'start' | 'center' | 'end';
+}
+export interface TabNavListProps {
+    id: string | null;
+    tabPosition: TabPosition;
+    activeKey: string;
+    rtl: boolean;
+    animated?: AnimatedConfig;
+    extra?: TabBarExtraContent;
+    editable?: EditableConfig;
+    more?: MoreProps;
+    mobile: boolean;
+    tabBarGutter?: number;
+    renderTabBar?: RenderTabBar;
+    className?: unknown;
+    style?: CSSProperties;
+    locale?: TabsLocale;
+    onTabClick: (activeKey: string, e: MouseEvent | KeyboardEvent) => void;
+    onTabScroll?: OnTabScroll;
+    children?: (node: VueNode) => VueNode;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    popupClassName?: string;
+    indicator?: IndicatorConfig;
+    classNames?: Partial<Record<SemanticName, string>>;
+    styles?: Partial<Record<SemanticName, CSSProperties>>;
+}
+export type TabNavListWrapperProps = Omit<TabNavListProps, 'children' | 'className'> & TabNavListProps;
+export interface TabPaneProps {
+    tab?: VueNode;
+    className?: unknown;
+    style?: CSSProperties;
+    disabled?: boolean;
+    children?: VueNode;
+    forceRender?: boolean;
+    closable?: boolean;
+    closeIcon?: VueNode;
+    icon?: VueNode;
+    prefixCls?: string;
+    tabKey?: string;
+    id?: string | null;
+    animated?: boolean;
+    active?: boolean;
+    destroyOnHidden?: boolean;
+}
+export interface TabsProps {
+    prefixCls?: string;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: Partial<Record<SemanticName, string>>;
+    styles?: Partial<Record<SemanticName, CSSProperties>>;
+    id?: string | null;
+    items?: Tab[];
+    activeKey?: string;
+    defaultActiveKey?: string;
+    direction?: 'ltr' | 'rtl';
+    animated?: boolean | AnimatedConfig;
+    renderTabBar?: RenderTabBar;
+    tabBarExtraContent?: TabBarExtraContent;
+    tabBarGutter?: number;
+    tabBarStyle?: CSSProperties;
+    tabPosition?: TabPosition;
+    destroyOnHidden?: boolean;
+    onChange?: (activeKey: string) => void;
+    onTabClick?: (activeKey: string, e: KeyboardEvent | MouseEvent) => void;
+    onTabScroll?: OnTabScroll;
+    editable?: EditableConfig;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    locale?: TabsLocale;
+    more?: MoreProps;
+    /** @private Internal usage. Not promise will rename in future */
+    popupClassName?: string;
+    indicator?: {
+        size?: GetIndicatorSize;
+        align?: 'start' | 'center' | 'end';
+    };
+}

package/dist/utils.cjs

@@ -0,0 +1,33 @@
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
+const tabsGlobal = { uuid: 0 };
+function setUUid(uuid) {
+	tabsGlobal.uuid = uuid;
+}
+function getUUid() {
+	return tabsGlobal.uuid;
+}
+function stringify(obj) {
+	let tgt;
+	if (obj instanceof Map) {
+		tgt = {};
+		obj.forEach((v, k) => {
+			tgt[k] = v;
+		});
+	} else tgt = obj;
+	return JSON.stringify(tgt);
+}
+function getRemovable(closable, closeIcon, editable, disabled) {
+	if (!editable || disabled || closable === false || closable === void 0 && ((0, __v_c_util_dist_props_util.isEmptyElement)(closeIcon) || closeIcon === null)) return false;
+	return true;
+}
+var VC_TABS_DOUBLE_QUOTE = "TABS_DQ";
+function genDataNodeKey(key) {
+	return String(key).replace(/"/g, VC_TABS_DOUBLE_QUOTE);
+}
+exports.genDataNodeKey = genDataNodeKey;
+exports.getRemovable = getRemovable;
+exports.getUUid = getUUid;
+exports.setUUid = setUUid;
+exports.stringify = stringify;
+exports.tabsGlobal = tabsGlobal;

package/dist/utils.d.ts

@@ -0,0 +1,14 @@
+import { Key, VueNode } from '@v-c/util/dist/type';
+import { EditableConfig } from './interface';
+export declare const tabsGlobal: {
+    uuid: number;
+};
+export declare function setUUid(uuid: number): void;
+export declare function getUUid(): number;
+/**
+ * We trade Map as deps which may change with same value but different ref object.
+ * We should make it as hash for deps
+ */
+export declare function stringify<K extends PropertyKey, V>(obj: Record<K, V> | Map<K, V>): string;
+export declare function getRemovable(closable?: boolean, closeIcon?: VueNode, editable?: EditableConfig, disabled?: boolean): boolean;
+export declare function genDataNodeKey(key: Key): string;

package/dist/utils.js

@@ -0,0 +1,27 @@
+import { isEmptyElement } from "@v-c/util/dist/props-util";
+const tabsGlobal = { uuid: 0 };
+function setUUid(uuid) {
+	tabsGlobal.uuid = uuid;
+}
+function getUUid() {
+	return tabsGlobal.uuid;
+}
+function stringify(obj) {
+	let tgt;
+	if (obj instanceof Map) {
+		tgt = {};
+		obj.forEach((v, k) => {
+			tgt[k] = v;
+		});
+	} else tgt = obj;
+	return JSON.stringify(tgt);
+}
+function getRemovable(closable, closeIcon, editable, disabled) {
+	if (!editable || disabled || closable === false || closable === void 0 && (isEmptyElement(closeIcon) || closeIcon === null)) return false;
+	return true;
+}
+var VC_TABS_DOUBLE_QUOTE = "TABS_DQ";
+function genDataNodeKey(key) {
+	return String(key).replace(/"/g, VC_TABS_DOUBLE_QUOTE);
+}
+export { genDataNodeKey, getRemovable, getUUid, setUUid, stringify, tabsGlobal };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@v-c/tabs",
+  "type": "module",
+  "version": "0.0.2",
+  "description": "tabs ui component for react",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "",
+  "license": "MIT",
+  "keywords": [
+    "decimal"
+  ],
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "main": "index.js",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@v-c/dropdown": "^1.0.0",
+    "@v-c/overflow": "^1.0.0",
+    "@v-c/menu": "^1.0.0",
+    "@v-c/util": "^1.0.1",
+    "@v-c/resize-observer": "^1.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublish": "pnpm build",
+    "test": "vitest run",
+    "bump": "bumpp --release patch"
+  }
+}