@destyler/tabs 0.0.3 → 0.0.4

package/dist/component.d.cts

@@ -1,4 +1,511 @@
-export { DestylerTabsContent, DestylerTabsContentProps, DestylerTabsIndicator, DestylerTabsIndicatorProps, DestylerTabsList, DestylerTabsListProps, DestylerTabsRoot, DestylerTabsRootProps, DestylerTabsTrigger, DestylerTabsTriggerProps } from './index.cjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
+import * as vue from 'vue';
+import { PropType, Ref } from 'vue';
+import * as _destyler_primitive from '@destyler/primitive';
+import { Direction, DataOrientation, ExtractPublicPropTypes } from '@destyler/shared';
+
+declare const tabsRootProps: {
+    /**
+     * The controlled value of the tab to activate. Can be bind as `v-model`.
+     */
+    readonly modelValue: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
+     */
+    readonly defaultValue: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * Whether a tab is activated automatically or manually.
+     *
+     * @default automatic
+     */
+    readonly activationMode: {
+        readonly type: PropType<"automatic" | "manual">;
+        readonly required: false;
+        readonly default: "automatic";
+    };
+    /**
+     * The reading direction of the combobox when applicable.
+     */
+    readonly dir: {
+        readonly type: PropType<Direction>;
+        readonly required: false;
+    };
+    /**
+     * The orientation the tabs are layed out.
+     * Mainly so arrow navigation is done accordingly (left & right vs. up & down)
+     *
+     * @default horizontal
+     */
+    readonly orientation: {
+        readonly type: PropType<DataOrientation>;
+        readonly required: false;
+        readonly default: "horizontal";
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type TabsRootProps = ExtractPublicPropTypes<typeof tabsRootProps>;
+declare const tabsRootEmits: {
+    /**
+     * Event handler called when the value changes
+     */
+    'update:modelValue': (_value: string | number) => boolean;
+};
+interface TabsRootContext {
+    modelValue: Ref<string | undefined>;
+    changeModelValue: (value: string) => void;
+    orientation: Ref<DataOrientation>;
+    dir: Ref<Direction>;
+    activationMode: 'automatic' | 'manual';
+    baseId: string;
+    tabsList: Ref<HTMLElement | undefined>;
+}
+declare const TabsRoot: vue.DefineComponent<{
+    /**
+     * The controlled value of the tab to activate. Can be bind as `v-model`.
+     */
+    readonly modelValue: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
+     */
+    readonly defaultValue: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * Whether a tab is activated automatically or manually.
+     *
+     * @default automatic
+     */
+    readonly activationMode: {
+        readonly type: PropType<"automatic" | "manual">;
+        readonly required: false;
+        readonly default: "automatic";
+    };
+    /**
+     * The reading direction of the combobox when applicable.
+     */
+    readonly dir: {
+        readonly type: PropType<Direction>;
+        readonly required: false;
+    };
+    /**
+     * The orientation the tabs are layed out.
+     * Mainly so arrow navigation is done accordingly (left & right vs. up & down)
+     *
+     * @default horizontal
+     */
+    readonly orientation: {
+        readonly type: PropType<DataOrientation>;
+        readonly required: false;
+        readonly default: "horizontal";
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    dir: vue.ComputedRef<Direction>;
+    orientation: Ref<DataOrientation>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    /**
+     * Event handler called when the value changes
+     */
+    'update:modelValue': (_value: string | number) => boolean;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The controlled value of the tab to activate. Can be bind as `v-model`.
+     */
+    readonly modelValue: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
+     */
+    readonly defaultValue: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * Whether a tab is activated automatically or manually.
+     *
+     * @default automatic
+     */
+    readonly activationMode: {
+        readonly type: PropType<"automatic" | "manual">;
+        readonly required: false;
+        readonly default: "automatic";
+    };
+    /**
+     * The reading direction of the combobox when applicable.
+     */
+    readonly dir: {
+        readonly type: PropType<Direction>;
+        readonly required: false;
+    };
+    /**
+     * The orientation the tabs are layed out.
+     * Mainly so arrow navigation is done accordingly (left & right vs. up & down)
+     *
+     * @default horizontal
+     */
+    readonly orientation: {
+        readonly type: PropType<DataOrientation>;
+        readonly required: false;
+        readonly default: "horizontal";
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((_value: string | number) => any) | undefined;
+}, {
+    readonly activationMode: "automatic" | "manual";
+    readonly orientation: DataOrientation;
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+}, {}>;
+
+declare const tabsContentProps: {
+    /**
+     * A unique value that associates the content with a trigger.
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with Vue animation libraries.
+     */
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type TabsContentProps = ExtractPublicPropTypes<typeof tabsContentProps>;
+declare const TabsContent: vue.DefineComponent<{
+    /**
+     * A unique value that associates the content with a trigger.
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with Vue animation libraries.
+     */
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+    rootContext: TabsRootContext;
+    triggerId: vue.ComputedRef<string>;
+    contentId: vue.ComputedRef<string>;
+    isSelected: vue.ComputedRef<boolean>;
+    isMountAnimationPreventedRef: vue.Ref<boolean>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * A unique value that associates the content with a trigger.
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with Vue animation libraries.
+     */
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+}, {}>;
+
+declare const tabsIndicatorProps: {
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type TabsIndicatorProps = ExtractPublicPropTypes<typeof tabsIndicatorProps>;
+declare const TabsIndicator: vue.DefineComponent<{
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    indicatorStyle: vue.Ref<{
+        size: number | null;
+        position: number | null;
+    }>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+}, {}>;
+
+declare const tabsListProps: {
+    /**
+     * When `true`, keyboard navigation will loop from last tab to first, and vice versa.
+     */
+    readonly loop: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: true;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type TabsListProps = ExtractPublicPropTypes<typeof tabsListProps>;
+declare const TabsList: vue.DefineComponent<{
+    /**
+     * When `true`, keyboard navigation will loop from last tab to first, and vice versa.
+     */
+    readonly loop: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: true;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+    loop: vue.Ref<boolean>;
+    context: TabsRootContext;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * When `true`, keyboard navigation will loop from last tab to first, and vice versa.
+     */
+    readonly loop: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: true;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+    readonly loop: boolean;
+}, {}>;
+
+declare const tabsTriggerProps: {
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * A unique value that associates the trigger with a content.
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the tab.
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type TabsTriggerProps = ExtractPublicPropTypes<typeof tabsTriggerProps>;
+declare const TabsTrigger: vue.DefineComponent<{
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * A unique value that associates the trigger with a content.
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the tab.
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+    rootContext: TabsRootContext;
+    triggerId: vue.ComputedRef<string>;
+    contentId: vue.ComputedRef<string>;
+    isSelected: vue.ComputedRef<boolean>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * A unique value that associates the trigger with a content.
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the tab.
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+}, {}>;
+
+export { TabsContent, type TabsContentProps, TabsIndicator, type TabsIndicatorProps, TabsList, type TabsListProps, TabsRoot, type TabsRootProps, TabsTrigger, type TabsTriggerProps, tabsContentProps, tabsIndicatorProps, tabsListProps, tabsRootEmits, tabsRootProps, tabsTriggerProps };