@destyler/toggle 0.0.1-beta.13

package/dist/index.d.ts

@@ -0,0 +1,369 @@
+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 };

package/dist/index.mjs

@@ -0,0 +1,213 @@
+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();
+      }
+    }, {
+      default: () => 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
+    }, {
+      default: () => {
+        return h(DestylerPrimitive, {
+          ref: "forwardRef",
+          role: "group",
+          as: this.$props.as,
+          asChild: this.$props.asChild
+        }, {
+          default: () => 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
+    }, {
+      default: () => {
+        return h(DestylerToggle, mergeProps(this.$props, {
+          "ref": "forwardRef",
+          "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);
+          }
+        }), {
+          default: () => this.$slots.default?.()
+        });
+      }
+    });
+  }
+});
+
+export { DestylerToggle, DestylerToggleGroupItem, DestylerToggleGroupRoot };

package/dist/resolver.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+const name = "@destyler/toggle";
+
+const packageName = name;
+const toggleComponentName = [
+  "DestylerToggle"
+];
+function DestylerToggleResolver() {
+  return {
+    type: "component",
+    resolve: (name2) => {
+      if (toggleComponentName.includes(name2))
+        return { name: name2, from: packageName };
+    }
+  };
+}
+
+exports.DestylerToggleResolver = DestylerToggleResolver;
+exports.toggleComponentName = toggleComponentName;

package/dist/resolver.d.cts

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

package/dist/resolver.d.mts

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

package/dist/resolver.d.ts

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

package/dist/resolver.mjs

@@ -0,0 +1,17 @@
+const name = "@destyler/toggle";
+
+const packageName = name;
+const toggleComponentName = [
+  "DestylerToggle"
+];
+function DestylerToggleResolver() {
+  return {
+    type: "component",
+    resolve: (name2) => {
+      if (toggleComponentName.includes(name2))
+        return { name: name2, from: packageName };
+    }
+  };
+}
+
+export { DestylerToggleResolver, toggleComponentName };

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@destyler/toggle",
+  "version": "0.0.1-beta.13",
+  "description": "unstyled toggle component for vue",
+  "author": "Elone Hoo <elonehoo@gmail.com>",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./resolver": {
+      "types": "./dist/resolver.d.ts",
+      "import": "./dist/resolver.mjs",
+      "require": "./dist/resolver.cjs"
+    },
+    "./component": {
+      "types": "./dist/component.d.ts",
+      "import": "./dist/component.mjs",
+      "require": "./dist/component.cjs"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "*.d.ts",
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": ">=3.3.4"
+  },
+  "dependencies": {
+    "@destyler/composition": "0.0.1-beta.13",
+    "@destyler/roving-focus": "0.0.1-beta.13",
+    "@destyler/primitive": "0.0.1-beta.13",
+    "@destyler/shared": "0.0.1-beta.13"
+  },
+  "scripts": {
+    "clear": "rimraf ./dist",
+    "build": "pnpm run clear && unbuild"
+  }
+}