@destyler/toggle 0.0.3 → 0.0.5

package/dist/index.d.ts

@@ -1,369 +1,4 @@
-import * as vue from 'vue';
-import { PropType, Component, Ref } from 'vue';
-import * as _destyler_primitive from '@destyler/primitive';
-import { AsTag } from '@destyler/primitive';
-import { ExtractPublicPropTypes, DataOrientation, Direction } from '@destyler/shared';
-
-declare const destylerToggleProps: {
-    readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
-        readonly default: "button";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: 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;
-    };
-};
-type DestylerToggleProps = ExtractPublicPropTypes<typeof destylerToggleProps>;
-type DataState = 'on' | 'off';
-declare const DestylerToggle: vue.DefineComponent<{
-    readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
-        readonly default: "button";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: 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;
-    };
-}, {
-    pressed: vue.WritableComputedRef<boolean | undefined>;
-    togglePressed: () => void;
-    dataState: vue.ComputedRef<DataState>;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:pressed"[], "update:pressed", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
-        readonly default: "button";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: 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;
-    };
-}>> & {
-    "onUpdate:pressed"?: ((...args: any[]) => any) | undefined;
-}, {
-    readonly as: AsTag | Component;
-    readonly asChild: boolean;
-    readonly pressed: boolean;
-    readonly disabled: boolean;
-}, {}>;
-
-type TypeEnum = 'single' | 'multiple';
-declare const destylerToggleGroupRootProps: {
-    readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
-        readonly default: "div";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: false;
-    };
-    readonly type: {
-        readonly type: PropType<TypeEnum>;
-        readonly required: false;
-        readonly default: "single";
-    };
-    readonly defaultValue: {
-        readonly type: PropType<string | string[]>;
-        readonly required: false;
-    };
-    readonly modelValue: {
-        readonly type: PropType<string | string[]>;
-        readonly required: false;
-    };
-    readonly rovingFocus: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: true;
-    };
-    readonly disabled: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: false;
-    };
-    readonly orientation: {
-        readonly type: PropType<DataOrientation>;
-        readonly required: false;
-    };
-    readonly dir: {
-        readonly type: PropType<Direction>;
-        readonly required: false;
-    };
-    readonly loop: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: true;
-    };
-};
-type DestylerToggleGroupRootProps = ExtractPublicPropTypes<typeof destylerToggleGroupRootProps>;
-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 DestylerToggleGroupRoot: vue.DefineComponent<{
-    readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
-        readonly default: "div";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: false;
-    };
-    readonly type: {
-        readonly type: PropType<TypeEnum>;
-        readonly required: false;
-        readonly default: "single";
-    };
-    readonly defaultValue: {
-        readonly type: PropType<string | string[]>;
-        readonly required: false;
-    };
-    readonly modelValue: {
-        readonly type: PropType<string | string[]>;
-        readonly required: false;
-    };
-    readonly rovingFocus: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: true;
-    };
-    readonly disabled: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: false;
-    };
-    readonly orientation: {
-        readonly type: PropType<DataOrientation>;
-        readonly required: false;
-    };
-    readonly dir: {
-        readonly type: PropType<Direction>;
-        readonly required: false;
-    };
-    readonly loop: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: true;
-    };
-}, {
-    rovingFocus: Ref<boolean>;
-    dir: vue.ComputedRef<Direction>;
-    loop: Ref<boolean>;
-    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
-        readonly default: "div";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: false;
-    };
-    readonly type: {
-        readonly type: PropType<TypeEnum>;
-        readonly required: false;
-        readonly default: "single";
-    };
-    readonly defaultValue: {
-        readonly type: PropType<string | string[]>;
-        readonly required: false;
-    };
-    readonly modelValue: {
-        readonly type: PropType<string | string[]>;
-        readonly required: false;
-    };
-    readonly rovingFocus: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: true;
-    };
-    readonly disabled: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: false;
-    };
-    readonly orientation: {
-        readonly type: PropType<DataOrientation>;
-        readonly required: false;
-    };
-    readonly dir: {
-        readonly type: PropType<Direction>;
-        readonly required: false;
-    };
-    readonly loop: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: true;
-    };
-}>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
-    readonly as: AsTag | Component;
-    readonly asChild: boolean;
-    readonly disabled: boolean;
-    readonly type: TypeEnum;
-    readonly rovingFocus: boolean;
-    readonly loop: boolean;
-}, {}>;
-
-declare const destylerToggleGroupItemProps: {
-    readonly value: {
-        readonly type: PropType<string>;
-        readonly required: true;
-    };
-    readonly as: {
-        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
-        readonly required: false;
-        readonly default: "button";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: 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;
-    };
-};
-type DestylerToggleGroupItemProps = ExtractPublicPropTypes<typeof destylerToggleGroupItemProps>;
-declare const DestylerToggleGroupItem: vue.DefineComponent<{
-    readonly value: {
-        readonly type: PropType<string>;
-        readonly required: true;
-    };
-    readonly as: {
-        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
-        readonly required: false;
-        readonly default: "button";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: 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;
-    };
-}, {
-    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<{
-    readonly value: {
-        readonly type: PropType<string>;
-        readonly required: true;
-    };
-    readonly as: {
-        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
-        readonly required: false;
-        readonly default: "button";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: 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 as: _destyler_primitive.AsTag | vue.Component;
-    readonly asChild: boolean;
-    readonly pressed: boolean;
-    readonly disabled: boolean;
-}, {}>;
-
-export { DestylerToggle, DestylerToggleGroupItem, type DestylerToggleGroupItemProps, DestylerToggleGroupRoot, type DestylerToggleGroupRootProps, type DestylerToggleProps };
+export { Toggle, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupRoot, ToggleGroupRootProps, ToggleProps, toggleGroupItemProps, toggleGroupRootProps, toggleProps } from './component.js';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';

package/dist/index.mjs

@@ -1,199 +1,6 @@
-import { defineComponent, computed, h, toRefs, mergeProps } from 'vue';
-import { DestylerPrimitive } from '@destyler/primitive';
-import { useForwardExpose, useVModel, useDirection, useSingleOrMultipleValue } from '@destyler/composition';
-import { createContext } from '@destyler/shared';
-import { DestylerRovingFocusGroup, DestylerRovingFocusItem } from '@destyler/roving-focus';
-
-const destylerToggleProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "button"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  defaultValue: {
-    type: Boolean,
-    required: false
-  },
-  pressed: {
-    type: Boolean,
-    required: false,
-    default: void 0
-  },
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const DestylerToggle = defineComponent({
-  name: "DestylerToggle",
-  props: destylerToggleProps,
-  emits: ["update:pressed"],
-  setup(props, { emit }) {
-    useForwardExpose();
-    const pressed = useVModel(props, "pressed", emit, {
-      defaultValue: props.defaultValue,
-      passive: props.pressed === void 0
-    });
-    function togglePressed() {
-      pressed.value = !pressed.value;
-    }
-    const dataState = computed(() => {
-      return pressed.value ? "on" : "off";
-    });
-    return {
-      pressed,
-      togglePressed,
-      dataState
-    };
-  },
-  render() {
-    return h(DestylerPrimitive, {
-      "as": this.$props.as,
-      "asChild": this.$props.asChild,
-      "type": this.$props.as === "button" ? "button" : void 0,
-      "aria-pressed": this.pressed,
-      "data-state": this.dataState,
-      "data-disabled": this.$props.disabled ? "" : void 0,
-      "disabled": this.$props.disabled,
-      "onClick": () => {
-        this.togglePressed();
-      }
-    }, () => this.$slots.default?.());
-  }
-});
-
-const destylerToggleGroupRootProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  type: {
-    type: String,
-    required: false,
-    default: "single"
-  },
-  defaultValue: {
-    type: [String, Array],
-    required: false
-  },
-  modelValue: {
-    type: [String, Array],
-    required: false
-  },
-  rovingFocus: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  orientation: {
-    type: String,
-    required: false
-  },
-  dir: {
-    type: String,
-    required: false
-  },
-  loop: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
-};
-const [injectToggleGroupRootContext, provideToggleGroupRootContext] = createContext("DestylerToggleGroupRoot");
-const DestylerToggleGroupRoot = defineComponent({
-  name: "DestylerToggleGroupRoot",
-  props: destylerToggleGroupRootProps,
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const { loop, rovingFocus, disabled, dir: propDir } = toRefs(props);
-    const dir = useDirection(propDir);
-    const { forwardRef } = useForwardExpose();
-    const { modelValue, changeModelValue } = useSingleOrMultipleValue(props, emit);
-    provideToggleGroupRootContext({
-      type: props.type,
-      modelValue,
-      changeModelValue,
-      dir,
-      orientation: props.orientation,
-      loop,
-      rovingFocus,
-      disabled
-    });
-    return {
-      rovingFocus,
-      dir,
-      loop,
-      forwardRef
-    };
-  },
-  render() {
-    return h(this.rovingFocus ? DestylerRovingFocusGroup : DestylerPrimitive, {
-      asChild: true,
-      orientation: this.rovingFocus ? this.$props.orientation : void 0,
-      dir: this.dir,
-      loop: this.rovingFocus ? this.loop : void 0
-    }, () => h(DestylerPrimitive, {
-      ref: (el) => this.forwardRef(el),
-      role: "group",
-      as: this.$props.as,
-      asChild: this.$props.asChild
-    }, () => this.$slots.default?.()));
-  }
-});
-
-const destylerToggleGroupItemProps = {
-  ...destylerToggleProps,
-  value: {
-    type: String,
-    required: true
-  }
-};
-const DestylerToggleGroupItem = defineComponent({
-  name: "DestylerToggleGroupItem",
-  props: destylerToggleGroupItemProps,
-  setup(props) {
-    const rootContext = injectToggleGroupRootContext();
-    const disabled = computed(() => rootContext.disabled?.value || props.disabled);
-    const pressed = computed(() => rootContext.modelValue.value?.includes(props.value));
-    const { forwardRef } = useForwardExpose();
-    return {
-      rootContext,
-      disabled,
-      pressed,
-      forwardRef
-    };
-  },
-  render() {
-    return h(this.rootContext.rovingFocus.value ? DestylerRovingFocusItem : DestylerPrimitive, {
-      asChild: true,
-      focusable: !this.disabled,
-      active: this.pressed
-    }, () => h(DestylerToggle, mergeProps(this.$props, {
-      "ref": (el) => this.forwardRef(el),
-      "disabled": this.disabled,
-      "pressed": this.rootContext.type === "single" ? this.rootContext.modelValue.value === this.$props.value : this.rootContext.modelValue.value?.includes(this.$props.value),
-      "onUpdate:pressed": () => {
-        this.rootContext.changeModelValue(this.$props.value);
-      }
-    }), () => this.$slots.default?.()));
-  }
-});
-
-export { DestylerToggle, DestylerToggleGroupItem, DestylerToggleGroupRoot };
+export { Toggle, ToggleGroupItem, ToggleGroupRoot, toggleGroupItemProps, toggleGroupRootProps, toggleProps } from './component.mjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/composition';
+import '@destyler/shared';
+import '@destyler/roving-focus';

package/dist/resolver.cjs

@@ -4,9 +4,11 @@ const name = "@destyler/toggle";
 
 const packageName = name;
 const toggleComponentName = [
-  "DestylerToggle"
+  "Toggle",
+  "ToggleGroupRoot",
+  "ToggleGroupItem"
 ];
-function DestylerToggleResolver() {
+function ToggleResolver() {
   return {
     type: "component",
     resolve: (name2) => {
@@ -16,5 +18,5 @@ function DestylerToggleResolver() {
   };
 }
 
-exports.DestylerToggleResolver = DestylerToggleResolver;
+exports.ToggleResolver = ToggleResolver;
 exports.toggleComponentName = toggleComponentName;

package/dist/resolver.d.cts

@@ -1,6 +1,6 @@
 import { ComponentResolver } from 'unplugin-vue-components';
 
 declare const toggleComponentName: string[];
-declare function DestylerToggleResolver(): ComponentResolver;
+declare function ToggleResolver(): ComponentResolver;
 
-export { DestylerToggleResolver, toggleComponentName };
+export { ToggleResolver, toggleComponentName };

package/dist/resolver.d.mts

@@ -1,6 +1,6 @@
 import { ComponentResolver } from 'unplugin-vue-components';
 
 declare const toggleComponentName: string[];
-declare function DestylerToggleResolver(): ComponentResolver;
+declare function ToggleResolver(): ComponentResolver;
 
-export { DestylerToggleResolver, toggleComponentName };
+export { ToggleResolver, toggleComponentName };

package/dist/resolver.d.ts

@@ -1,6 +1,6 @@
 import { ComponentResolver } from 'unplugin-vue-components';
 
 declare const toggleComponentName: string[];
-declare function DestylerToggleResolver(): ComponentResolver;
+declare function ToggleResolver(): ComponentResolver;
 
-export { DestylerToggleResolver, toggleComponentName };
+export { ToggleResolver, toggleComponentName };

package/dist/resolver.mjs

@@ -2,9 +2,11 @@ const name = "@destyler/toggle";
 
 const packageName = name;
 const toggleComponentName = [
-  "DestylerToggle"
+  "Toggle",
+  "ToggleGroupRoot",
+  "ToggleGroupItem"
 ];
-function DestylerToggleResolver() {
+function ToggleResolver() {
   return {
     type: "component",
     resolve: (name2) => {
@@ -14,4 +16,4 @@ function DestylerToggleResolver() {
   };
 }
 
-export { DestylerToggleResolver, toggleComponentName };
+export { ToggleResolver, toggleComponentName };