@destyler/toggle 0.0.3 → 0.0.5

package/dist/component.d.cts

@@ -1,4 +1,549 @@
-export { DestylerToggle, DestylerToggleGroupItem, DestylerToggleGroupItemProps, DestylerToggleGroupRoot, DestylerToggleGroupRootProps, DestylerToggleProps } 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 { ExtractPublicPropTypes, DataOrientation, Direction } from '@destyler/shared';
+
+declare const toggleProps: {
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.
+     */
+    readonly defaultValue: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    /**
+     * The controlled pressed state of the toggle. Can be bind as `v-model`.
+     *
+     * @default undefined
+     */
+    readonly pressed: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the toggle.
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type ToggleProps = ExtractPublicPropTypes<typeof toggleProps>;
+declare const toggleEmits: {
+    /**
+     * Event handler called when the pressed state of the toggle changes.
+     */
+    'update:pressed': (_value: boolean) => boolean;
+};
+type DataState = 'on' | 'off';
+declare const Toggle: vue.DefineComponent<{
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.
+     */
+    readonly defaultValue: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    /**
+     * The controlled pressed state of the toggle. Can be bind as `v-model`.
+     *
+     * @default undefined
+     */
+    readonly pressed: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the toggle.
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    pressed: vue.WritableComputedRef<boolean | undefined>;
+    togglePressed: () => void;
+    dataState: vue.ComputedRef<DataState>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    /**
+     * Event handler called when the pressed state of the toggle changes.
+     */
+    'update:pressed': (_value: boolean) => boolean;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.
+     */
+    readonly defaultValue: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    /**
+     * The controlled pressed state of the toggle. Can be bind as `v-model`.
+     *
+     * @default undefined
+     */
+    readonly pressed: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the toggle.
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>> & {
+    "onUpdate:pressed"?: ((_value: boolean) => any) | undefined;
+}, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly pressed: boolean;
+    readonly disabled: boolean;
+    readonly asChild: boolean;
+}, {}>;
+
+type TypeEnum = 'single' | 'multiple';
+declare const toggleGroupRootProps: {
+    /**
+     * Determines whether a "single" or "multiple" items can be pressed at a time.
+     *
+     * This prop will be ignored if any of `v-model` or `defaultValue` is an defined, as the type will be inferred from the value.
+     *
+     * @default single
+     */
+    readonly type: {
+        readonly type: PropType<TypeEnum>;
+        readonly required: false;
+        readonly default: "single";
+    };
+    /**
+     * The default active value of the item(s).
+     *
+     * Use when you do not need to control the state of the item(s).
+     */
+    readonly defaultValue: {
+        readonly type: PropType<string | string[]>;
+        readonly required: false;
+    };
+    /**
+     * The controlled value of the active item(s).
+     *
+     * Use this when you need to control the state of the items. Can be binded with `v-model`
+     */
+    readonly modelValue: {
+        readonly type: PropType<string | string[]>;
+        readonly required: false;
+    };
+    /**
+     * When `false`, navigating through the items using arrow keys will be disabled.
+     *
+     * @default true
+     */
+    readonly rovingFocus: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: true;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the toggle group and all its items.
+     *
+     * @default false
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * The orientation of the component, which determines how focus moves: `horizontal` for left/right arrows and `vertical` for up/down arrows.
+     */
+    readonly orientation: {
+        readonly type: PropType<DataOrientation>;
+        readonly required: false;
+    };
+    /**
+     * The reading direction of the combobox when applicable.
+     */
+    readonly dir: {
+        readonly type: PropType<Direction>;
+        readonly required: false;
+    };
+    /**
+     * When `loop` and `rovingFocus` is `true`, keyboard navigation will loop from last item 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 ToggleGroupRootProps = ExtractPublicPropTypes<typeof toggleGroupRootProps>;
+declare const toggleGroupRootEmits: {
+    /**
+     * Event handler called when the value changes.
+     */
+    'update:modelValue': (_value: string) => boolean;
+};
+interface ToggleGroupRootContext {
+    type: TypeEnum;
+    modelValue: Ref<string | string[] | undefined>;
+    changeModelValue: (value: string) => void;
+    dir?: Ref<Direction>;
+    orientation?: DataOrientation;
+    loop: Ref<boolean>;
+    rovingFocus: Ref<boolean>;
+    disabled?: Ref<boolean>;
+}
+declare const ToggleGroupRoot: vue.DefineComponent<{
+    /**
+     * Determines whether a "single" or "multiple" items can be pressed at a time.
+     *
+     * This prop will be ignored if any of `v-model` or `defaultValue` is an defined, as the type will be inferred from the value.
+     *
+     * @default single
+     */
+    readonly type: {
+        readonly type: PropType<TypeEnum>;
+        readonly required: false;
+        readonly default: "single";
+    };
+    /**
+     * The default active value of the item(s).
+     *
+     * Use when you do not need to control the state of the item(s).
+     */
+    readonly defaultValue: {
+        readonly type: PropType<string | string[]>;
+        readonly required: false;
+    };
+    /**
+     * The controlled value of the active item(s).
+     *
+     * Use this when you need to control the state of the items. Can be binded with `v-model`
+     */
+    readonly modelValue: {
+        readonly type: PropType<string | string[]>;
+        readonly required: false;
+    };
+    /**
+     * When `false`, navigating through the items using arrow keys will be disabled.
+     *
+     * @default true
+     */
+    readonly rovingFocus: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: true;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the toggle group and all its items.
+     *
+     * @default false
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * The orientation of the component, which determines how focus moves: `horizontal` for left/right arrows and `vertical` for up/down arrows.
+     */
+    readonly orientation: {
+        readonly type: PropType<DataOrientation>;
+        readonly required: false;
+    };
+    /**
+     * The reading direction of the combobox when applicable.
+     */
+    readonly dir: {
+        readonly type: PropType<Direction>;
+        readonly required: false;
+    };
+    /**
+     * When `loop` and `rovingFocus` is `true`, keyboard navigation will loop from last item 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;
+    };
+}, {
+    rovingFocus: Ref<boolean>;
+    dir: vue.ComputedRef<Direction>;
+    loop: Ref<boolean>;
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    /**
+     * Event handler called when the value changes.
+     */
+    'update:modelValue': (_value: string) => boolean;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * Determines whether a "single" or "multiple" items can be pressed at a time.
+     *
+     * This prop will be ignored if any of `v-model` or `defaultValue` is an defined, as the type will be inferred from the value.
+     *
+     * @default single
+     */
+    readonly type: {
+        readonly type: PropType<TypeEnum>;
+        readonly required: false;
+        readonly default: "single";
+    };
+    /**
+     * The default active value of the item(s).
+     *
+     * Use when you do not need to control the state of the item(s).
+     */
+    readonly defaultValue: {
+        readonly type: PropType<string | string[]>;
+        readonly required: false;
+    };
+    /**
+     * The controlled value of the active item(s).
+     *
+     * Use this when you need to control the state of the items. Can be binded with `v-model`
+     */
+    readonly modelValue: {
+        readonly type: PropType<string | string[]>;
+        readonly required: false;
+    };
+    /**
+     * When `false`, navigating through the items using arrow keys will be disabled.
+     *
+     * @default true
+     */
+    readonly rovingFocus: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: true;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the toggle group and all its items.
+     *
+     * @default false
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * The orientation of the component, which determines how focus moves: `horizontal` for left/right arrows and `vertical` for up/down arrows.
+     */
+    readonly orientation: {
+        readonly type: PropType<DataOrientation>;
+        readonly required: false;
+    };
+    /**
+     * The reading direction of the combobox when applicable.
+     */
+    readonly dir: {
+        readonly type: PropType<Direction>;
+        readonly required: false;
+    };
+    /**
+     * When `loop` and `rovingFocus` is `true`, keyboard navigation will loop from last item 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;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
+}, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly disabled: boolean;
+    readonly asChild: boolean;
+    readonly type: TypeEnum;
+    readonly rovingFocus: boolean;
+    readonly loop: boolean;
+}, {}>;
+
+declare const toggleGroupItemProps: {
+    /**
+     * A string value for the toggle group item. All items within a toggle group should use a unique value.
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly defaultValue: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly pressed: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type ToggleGroupItemProps = ExtractPublicPropTypes<typeof toggleGroupItemProps>;
+declare const ToggleGroupItem: vue.DefineComponent<{
+    /**
+     * A string value for the toggle group item. All items within a toggle group should use a unique value.
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly defaultValue: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly pressed: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    rootContext: ToggleGroupRootContext;
+    disabled: vue.ComputedRef<boolean>;
+    pressed: vue.ComputedRef<boolean | undefined>;
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * A string value for the toggle group item. All items within a toggle group should use a unique value.
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly defaultValue: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly pressed: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly pressed: boolean;
+    readonly disabled: boolean;
+    readonly asChild: boolean;
+}, {}>;
+
+export { Toggle, ToggleGroupItem, type ToggleGroupItemProps, ToggleGroupRoot, type ToggleGroupRootProps, type ToggleProps, toggleEmits, toggleGroupItemProps, toggleGroupRootEmits, toggleGroupRootProps, toggleProps };