x-next 0.0.0-alpha.50 → 0.0.0-alpha.51

package/README.md

@@ -27,20 +27,25 @@ app.mount('#app')
 ### 目前已完成的组件
 
 ```
-    // Dialog, Message, MessageBox, Notification
-    // XButton: (typeof import('x-next'))['XButton'];
-    // XXDialog: (typeof import('x-next'))['XDialog'];
-    // XXMessage: (typeof import('x-next'))['XMessage'];
-    // XXMessageBox: (typeof import('x-next'))['XMessageBox'];
-    // XNotification: (typeof import('x-next'))['XNotification'];
-    // XSpace: (typeof import('x-next'))['XSpace'];
-    // XPopconfirm: (typeof import('x-next'))['XPopconfirm'];
-    // XTrendChart: (typeof import('x-next'))['XTrendChart'];
-    // XTimeline: (typeof import('x-next'))['XTimeline'];
-    // XTimelineItem: (typeof import('x-next'))['XTimelineItem'];
-    // XPopup: (typeof import('x-next'))['XPopup'];
-    // XScrollbar: (typeof import('x-next'))['XScrollbar'];
-    // XDrawer: (typeof import('x-next'))['XDrawer'];
-    // XTag: (typeof import('x-next'))['XTag'];
-    // XTooltip: (typeof import('x-next'))['XTooltip'];
+    XButton: (typeof import('x-next'))['XButton'];
+    XDialog: (typeof import('x-next'))['XDialog'];
+    XMessage: (typeof import('x-next'))['XMessage'];
+    XMessageBox: (typeof import('x-next'))['XMessageBox'];
+    XNotification: (typeof import('x-next'))['XNotification'];
+    XSpace: (typeof import('x-next'))['XSpace'];
+    XPopconfirm: (typeof import('x-next'))['XPopconfirm'];
+    XTrendChart: (typeof import('x-next'))['XTrendChart'];
+    XTimeline: (typeof import('x-next'))['XTimeline'];
+    XTimelineItem: (typeof import('x-next'))['XTimelineItem'];
+    XPopup: (typeof import('x-next'))['XPopup'];
+    XScrollbar: (typeof import('x-next'))['XScrollbar'];
+    XDrawer: (typeof import('x-next'))['XDrawer'];
+    XTag: (typeof import('x-next'))['XTag'];
+    XTooltip: (typeof import('x-next'))['XTooltip'];
+    XImage: (typeof import('x-next'))['XImage'];
+    XImagePreview: (typeof import('x-next'))['XImagePreview'];
+    XImagePreviewGroup: (typeof import('x-next'))['XImagePreviewGroup'];
+    XImagePreviewAction: (typeof import('x-next'))['XImagePreviewAction'];
+    XTabPane: (typeof import('x-next'))['XTabPane'];
+    XTabs: (typeof import('x-next'))['XTabs'];
 ```

package/dist/_hooks/use-children-components.d.ts

@@ -0,0 +1,5 @@
+import { SlotChildren } from './_types';
+export declare const useChildrenComponents: (name: string) => {
+    children: SlotChildren;
+    components: import('vue').Ref<number[], number[]>;
+};

package/dist/_hooks/use-size.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+import { Size } from '../_utils/constant';
+export declare const useSize: (size?: Ref<Size | undefined>, { defaultValue }?: {
+    defaultValue?: Size;
+}) => {
+    mergedSize: import('vue').ComputedRef<"mini" | "small" | "medium" | "large">;
+};

package/dist/_utils/vue-eco.d.ts

@@ -31,6 +31,8 @@ export declare const getFirstElement: (vn: VNode | VNode[]) => HTMLElement | nul
 export declare const getFirstElementFromVNode: (vn: VNode) => HTMLElement | undefined;
 export declare const getFirstElementFromChildren: (children: VNode[] | undefined) => HTMLElement | undefined;
 export declare const getChildrenArray: (vn: VNode) => VNode[] | undefined;
+export declare const getComponentsFromVNode: (vn: VNode, name: string) => number[];
+export declare const getComponentsFromChildren: (children: VNode[] | undefined, name: string) => number[];
 export declare const mergeFirstChild: (children: VNode[] | undefined, extraProps: ObjectData | ((vn: VNode) => ObjectData)) => boolean;
 export declare const withInstall: <T, E extends Record<string, any>>(main: T, extra?: E) => SFCWithInstall<T> & E;
 export declare const generateComponent: <T extends Component | DefineComponent>(name: string, component: T) => T & {

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ export * from './popconfirm';
 export * from './popup';
 export * from './scrollbar';
 export * from './space';
+export * from './tabs';
 export * from './tag';
 export * from './timeline';
 export * from './timeline-item';

package/dist/components/input/Input.d.ts

@@ -198,22 +198,22 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     disabled: boolean;
     resize: boolean;
     modelValue: string | number;
+    autocomplete: "on" | "off";
+    autofocus: boolean;
+    maxlength: string | number;
+    readonly: boolean;
+    card: boolean;
     prefixIcon: string;
     suffixIcon: string;
     placeholder: string;
-    readonly: boolean;
-    maxlength: string | number;
     clearable: boolean;
-    autofocus: boolean;
     showPassword: boolean;
-    autocomplete: "on" | "off";
     autosize: boolean | {
         minRows: number;
         maxRows: number;
     };
     formatter: Function;
     validateEvent: boolean;
-    card: boolean;
     showWordLimit: boolean;
     valueType: "string" | "number";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/input/index.d.ts

@@ -107,22 +107,22 @@ export declare const XInput: {
         disabled: boolean;
         resize: boolean;
         modelValue: string | number;
+        autocomplete: "on" | "off";
+        autofocus: boolean;
+        maxlength: string | number;
+        readonly: boolean;
+        card: boolean;
         prefixIcon: string;
         suffixIcon: string;
         placeholder: string;
-        readonly: boolean;
-        maxlength: string | number;
         clearable: boolean;
-        autofocus: boolean;
         showPassword: boolean;
-        autocomplete: "on" | "off";
         autosize: boolean | {
             minRows: number;
             maxRows: number;
         };
         formatter: Function;
         validateEvent: boolean;
-        card: boolean;
         showWordLimit: boolean;
         valueType: "string" | "number";
     }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
@@ -240,22 +240,22 @@ export declare const XInput: {
         disabled: boolean;
         resize: boolean;
         modelValue: string | number;
+        autocomplete: "on" | "off";
+        autofocus: boolean;
+        maxlength: string | number;
+        readonly: boolean;
+        card: boolean;
         prefixIcon: string;
         suffixIcon: string;
         placeholder: string;
-        readonly: boolean;
-        maxlength: string | number;
         clearable: boolean;
-        autofocus: boolean;
         showPassword: boolean;
-        autocomplete: "on" | "off";
         autosize: boolean | {
             minRows: number;
             maxRows: number;
         };
         formatter: Function;
         validateEvent: boolean;
-        card: boolean;
         showWordLimit: boolean;
         valueType: "string" | "number";
     }>;
@@ -370,22 +370,22 @@ export declare const XInput: {
     disabled: boolean;
     resize: boolean;
     modelValue: string | number;
+    autocomplete: "on" | "off";
+    autofocus: boolean;
+    maxlength: string | number;
+    readonly: boolean;
+    card: boolean;
     prefixIcon: string;
     suffixIcon: string;
     placeholder: string;
-    readonly: boolean;
-    maxlength: string | number;
     clearable: boolean;
-    autofocus: boolean;
     showPassword: boolean;
-    autocomplete: "on" | "off";
     autosize: boolean | {
         minRows: number;
         maxRows: number;
     };
     formatter: Function;
     validateEvent: boolean;
-    card: boolean;
     showWordLimit: boolean;
     valueType: "string" | "number";
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & {

package/dist/components/tabs/TabPane.vue.d.ts

@@ -0,0 +1,78 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * @zh 选项卡的标题
+     * @en Title of the tab
+     */
+    title: StringConstructor;
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否允许关闭此选项卡（仅在可编辑模式生效）
+     * @en Whether to allow this tab to be closed (only effective in editable mode)
+     */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否在不显示标签时销毁内容
+     * @en Whether to destroy the content when the label is not displayed
+     * @version 2.27.0
+     */
+    destroyOnHide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    className: {
+        block: string;
+        element: (className: string) => string;
+        modifier: (className: string) => string;
+        is: (className: string) => string;
+    };
+    active: import('vue').ComputedRef<boolean>;
+    itemRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    mounted: import('vue').Ref<boolean, boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * @zh 选项卡的标题
+     * @en Title of the tab
+     */
+    title: StringConstructor;
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否允许关闭此选项卡（仅在可编辑模式生效）
+     * @en Whether to allow this tab to be closed (only effective in editable mode)
+     */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否在不显示标签时销毁内容
+     * @en Whether to destroy the content when the label is not displayed
+     * @version 2.27.0
+     */
+    destroyOnHide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    closable: boolean;
+    destroyOnHide: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,349 @@
+import { PropType } from 'vue';
+import { Direction, Size } from '../../_utils/constant';
+import { TabsPosition, TabsType, TabTriggerEvent, ScrollPosition } from './interface';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * @zh 当前选中的标签的 `key`
+     * @en The `key` of the currently selected label
+     * @vModel
+     */
+    activeKey: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    /**
+     * @zh 默认选中的标签的`key`（非受控状态，为空时选中第一个标签页）
+     * @en The `key` of the tab selected by default (uncontrolled state, select the first tab page when it is empty)
+     */
+    defaultActiveKey: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    /**
+     * @zh 选项卡的位置
+     * @en Position of the tab
+     * @values 'left', 'right', 'top', 'bottom'
+     */
+    position: {
+        type: PropType<TabsPosition>;
+        default: string;
+    };
+    /**
+     * @zh 选项卡的大小
+     * @en The size of the tab
+     * @values 'mini', 'small', 'medium', 'large'
+     */
+    size: {
+        type: PropType<Size>;
+    };
+    /**
+     * @zh 选项卡的类型
+     * @en The type of tab
+     * @values 'line', 'card', 'card-gutter', 'text', 'rounded', 'capsule'
+     */
+    type: {
+        type: PropType<TabsType>;
+        default: string;
+    };
+    /**
+     * @zh 选项卡的方向
+     * @en The direction of tab
+     * @values 'horizontal', 'vertical'
+     */
+    direction: {
+        type: PropType<Direction>;
+        default: string;
+    };
+    /**
+     * @zh 是否开启可编辑模式
+     * @en Whether to enable editable mode
+     */
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否显示增加按钮（仅在可编辑模式可用）
+     * @en Whether to display the add button (only available in editable mode)
+     */
+    showAddButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否在不显示标签时销毁内容
+     * @en Whether to destroy the content when the label is not displayed
+     * @version 2.27.0
+     */
+    destroyOnHide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否在首次展示标签时挂载内容
+     * @en Whether to mount the content when the label is first displayed
+     */
+    lazyLoad: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 高度撑满容器，只在水平模式下生效。
+     * @en The height of the container is fully supported, and it only takes effect in horizontal mode.
+     */
+    justify: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否开启选项内容过渡动画
+     * @en Whether to enable option content transition animation
+     */
+    animation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 选项卡头部是否存在水平边距。仅对 `type` 等于 `line`、`text` 类型的选项卡生效
+     * @en Whether there is a horizontal margin on the header of the tab. Only valid for tabs with `type` equal to `line` and `text` type
+     * @version 2.10.0
+     */
+    headerPadding: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 创建标签后是否切换到新标签（最后一个）
+     * @en Whether to switch to a new tab after creating a tab (the last one)
+     * @version 2.18.0
+     */
+    autoSwitch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否隐藏内容
+     * @en Whether to hide content
+     * @version 2.25.0
+     */
+    hideContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 触发方式
+     * @en Trigger method
+     * @values 'hover','click'
+     * @version 2.34.0
+     */
+    trigger: {
+        type: PropType<TabTriggerEvent>;
+        default: string;
+    };
+    /**
+     * @zh 被选中 tab 的滚动位置，默认 auto 即会将 activeTab 滚动到可见区域，但不会特意做位置调整
+     * @en The scroll position of the selected tab, the default auto will scroll the activeTab to the visible area, but will not adjust the position intentionally
+     * @values 'start', 'end', 'center', 'auto', number
+     */
+    scrollPosition: {
+        type: PropType<ScrollPosition>;
+        default: string;
+    };
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:activeKey': (key: string | number) => true;
+    /**
+     * @zh 当前标签值改变时触发
+     * @en Triggered when the current tag value changes
+     * @property { string | number } key
+     */
+    change: (key: string | number) => true;
+    /**
+     * @zh 用户点击标签时触发
+     * @en Triggered when the user clicks on the tab
+     * @property { string | number } key
+     */
+    tabClick: (key: string | number, ev: Event) => true;
+    /**
+     * @zh 用户点击增加按钮时触发
+     * @en Triggered when the user clicks the add button
+     */
+    add: (ev: Event) => true;
+    /**
+     * @zh 用户点击删除按钮时触发
+     * @en Triggered when the user clicks the delete button
+     * @property { string | number } key
+     */
+    delete: (key: string | number, ev: Event) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * @zh 当前选中的标签的 `key`
+     * @en The `key` of the currently selected label
+     * @vModel
+     */
+    activeKey: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    /**
+     * @zh 默认选中的标签的`key`（非受控状态，为空时选中第一个标签页）
+     * @en The `key` of the tab selected by default (uncontrolled state, select the first tab page when it is empty)
+     */
+    defaultActiveKey: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    /**
+     * @zh 选项卡的位置
+     * @en Position of the tab
+     * @values 'left', 'right', 'top', 'bottom'
+     */
+    position: {
+        type: PropType<TabsPosition>;
+        default: string;
+    };
+    /**
+     * @zh 选项卡的大小
+     * @en The size of the tab
+     * @values 'mini', 'small', 'medium', 'large'
+     */
+    size: {
+        type: PropType<Size>;
+    };
+    /**
+     * @zh 选项卡的类型
+     * @en The type of tab
+     * @values 'line', 'card', 'card-gutter', 'text', 'rounded', 'capsule'
+     */
+    type: {
+        type: PropType<TabsType>;
+        default: string;
+    };
+    /**
+     * @zh 选项卡的方向
+     * @en The direction of tab
+     * @values 'horizontal', 'vertical'
+     */
+    direction: {
+        type: PropType<Direction>;
+        default: string;
+    };
+    /**
+     * @zh 是否开启可编辑模式
+     * @en Whether to enable editable mode
+     */
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否显示增加按钮（仅在可编辑模式可用）
+     * @en Whether to display the add button (only available in editable mode)
+     */
+    showAddButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否在不显示标签时销毁内容
+     * @en Whether to destroy the content when the label is not displayed
+     * @version 2.27.0
+     */
+    destroyOnHide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否在首次展示标签时挂载内容
+     * @en Whether to mount the content when the label is first displayed
+     */
+    lazyLoad: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 高度撑满容器，只在水平模式下生效。
+     * @en The height of the container is fully supported, and it only takes effect in horizontal mode.
+     */
+    justify: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否开启选项内容过渡动画
+     * @en Whether to enable option content transition animation
+     */
+    animation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 选项卡头部是否存在水平边距。仅对 `type` 等于 `line`、`text` 类型的选项卡生效
+     * @en Whether there is a horizontal margin on the header of the tab. Only valid for tabs with `type` equal to `line` and `text` type
+     * @version 2.10.0
+     */
+    headerPadding: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 创建标签后是否切换到新标签（最后一个）
+     * @en Whether to switch to a new tab after creating a tab (the last one)
+     * @version 2.18.0
+     */
+    autoSwitch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否隐藏内容
+     * @en Whether to hide content
+     * @version 2.25.0
+     */
+    hideContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 触发方式
+     * @en Trigger method
+     * @values 'hover','click'
+     * @version 2.34.0
+     */
+    trigger: {
+        type: PropType<TabTriggerEvent>;
+        default: string;
+    };
+    /**
+     * @zh 被选中 tab 的滚动位置，默认 auto 即会将 activeTab 滚动到可见区域，但不会特意做位置调整
+     * @en The scroll position of the selected tab, the default auto will scroll the activeTab to the visible area, but will not adjust the position intentionally
+     * @values 'start', 'end', 'center', 'auto', number
+     */
+    scrollPosition: {
+        type: PropType<ScrollPosition>;
+        default: string;
+    };
+}>> & Readonly<{
+    onDelete?: ((key: string | number, ev: Event) => any) | undefined;
+    onAdd?: ((ev: Event) => any) | undefined;
+    onChange?: ((key: string | number) => any) | undefined;
+    "onUpdate:activeKey"?: ((key: string | number) => any) | undefined;
+    onTabClick?: ((key: string | number, ev: Event) => any) | undefined;
+}>, {
+    type: TabsType;
+    direction: "horizontal" | "vertical";
+    position: TabsPosition;
+    animation: boolean;
+    justify: boolean;
+    trigger: TabTriggerEvent;
+    editable: boolean;
+    lazyLoad: boolean;
+    destroyOnHide: boolean;
+    activeKey: string | number;
+    showAddButton: boolean;
+    headerPadding: boolean;
+    scrollPosition: ScrollPosition;
+    defaultActiveKey: string | number;
+    autoSwitch: boolean;
+    hideContent: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/tabs/context.d.ts

@@ -0,0 +1,11 @@
+import { InjectionKey } from 'vue';
+import { TabData, TabTriggerEvent } from './interface';
+export interface TabsContext {
+    lazyLoad: boolean;
+    destroyOnHide: boolean;
+    activeKey: string | number;
+    addItem: (id: number, data: TabData) => void;
+    removeItem: (id: number) => void;
+    trigger: TabTriggerEvent;
+}
+export declare const tabsInjectionKey: InjectionKey<TabsContext>;