@destyler/toggle 0.0.1-beta.13

package/dist/component.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+const index = require('./index.cjs');
+require('vue');
+require('@destyler/primitive');
+require('@destyler/composition');
+require('@destyler/shared');
+require('@destyler/roving-focus');
+
+
+
+exports.DestylerToggle = index.DestylerToggle;
+exports.DestylerToggleGroupItem = index.DestylerToggleGroupItem;
+exports.DestylerToggleGroupRoot = index.DestylerToggleGroupRoot;

package/dist/component.d.cts

@@ -0,0 +1,4 @@
+export { DestylerToggle, DestylerToggleGroupItem, DestylerToggleGroupItemProps, DestylerToggleGroupRoot, DestylerToggleGroupRootProps, DestylerToggleProps } from './index.cjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';

package/dist/component.d.mts

@@ -0,0 +1,4 @@
+export { DestylerToggle, DestylerToggleGroupItem, DestylerToggleGroupItemProps, DestylerToggleGroupRoot, DestylerToggleGroupRootProps, DestylerToggleProps } from './index.mjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';

package/dist/component.d.ts

@@ -0,0 +1,4 @@
+export { DestylerToggle, DestylerToggleGroupItem, DestylerToggleGroupItemProps, DestylerToggleGroupRoot, DestylerToggleGroupRootProps, DestylerToggleProps } from './index.js';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';

package/dist/component.mjs

@@ -0,0 +1,6 @@
+export { DestylerToggle, DestylerToggleGroupItem, DestylerToggleGroupRoot } from './index.mjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/composition';
+import '@destyler/shared';
+import '@destyler/roving-focus';

package/dist/index.cjs

@@ -0,0 +1,217 @@
+'use strict';
+
+const vue = require('vue');
+const primitive = require('@destyler/primitive');
+const composition = require('@destyler/composition');
+const shared = require('@destyler/shared');
+const rovingFocus = require('@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 = vue.defineComponent({
+  name: "DestylerToggle",
+  props: destylerToggleProps,
+  emits: ["update:pressed"],
+  setup(props, { emit }) {
+    composition.useForwardExpose();
+    const pressed = composition.useVModel(props, "pressed", emit, {
+      defaultValue: props.defaultValue,
+      passive: props.pressed === void 0
+    });
+    function togglePressed() {
+      pressed.value = !pressed.value;
+    }
+    const dataState = vue.computed(() => {
+      return pressed.value ? "on" : "off";
+    });
+    return {
+      pressed,
+      togglePressed,
+      dataState
+    };
+  },
+  render() {
+    return vue.h(primitive.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] = shared.createContext("DestylerToggleGroupRoot");
+const DestylerToggleGroupRoot = vue.defineComponent({
+  name: "DestylerToggleGroupRoot",
+  props: destylerToggleGroupRootProps,
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { loop, rovingFocus, disabled, dir: propDir } = vue.toRefs(props);
+    const dir = composition.useDirection(propDir);
+    const { forwardRef } = composition.useForwardExpose();
+    const { modelValue, changeModelValue } = composition.useSingleOrMultipleValue(props, emit);
+    provideToggleGroupRootContext({
+      type: props.type,
+      modelValue,
+      changeModelValue,
+      dir,
+      orientation: props.orientation,
+      loop,
+      rovingFocus,
+      disabled
+    });
+    return {
+      rovingFocus,
+      dir,
+      loop,
+      forwardRef
+    };
+  },
+  render() {
+    return vue.h(this.rovingFocus ? rovingFocus.DestylerRovingFocusGroup : primitive.DestylerPrimitive, {
+      asChild: true,
+      orientation: this.rovingFocus ? this.$props.orientation : void 0,
+      dir: this.dir,
+      loop: this.rovingFocus ? this.loop : void 0
+    }, {
+      default: () => {
+        return vue.h(primitive.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 = vue.defineComponent({
+  name: "DestylerToggleGroupItem",
+  props: destylerToggleGroupItemProps,
+  setup(props) {
+    const rootContext = injectToggleGroupRootContext();
+    const disabled = vue.computed(() => rootContext.disabled?.value || props.disabled);
+    const pressed = vue.computed(() => rootContext.modelValue.value?.includes(props.value));
+    const { forwardRef } = composition.useForwardExpose();
+    return {
+      rootContext,
+      disabled,
+      pressed,
+      forwardRef
+    };
+  },
+  render() {
+    return vue.h(this.rootContext.rovingFocus.value ? rovingFocus.DestylerRovingFocusItem : primitive.DestylerPrimitive, {
+      asChild: true,
+      focusable: !this.disabled,
+      active: this.pressed
+    }, {
+      default: () => {
+        return vue.h(DestylerToggle, vue.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?.()
+        });
+      }
+    });
+  }
+});
+
+exports.DestylerToggle = DestylerToggle;
+exports.DestylerToggleGroupItem = DestylerToggleGroupItem;
+exports.DestylerToggleGroupRoot = DestylerToggleGroupRoot;

package/dist/index.d.cts

@@ -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 };