@destyler/switch 0.0.1-beta.12

package/dist/component.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+const index = require('./index.cjs');
+require('vue');
+require('@destyler/primitive');
+require('@destyler/composition');
+require('@destyler/shared');
+require('@destyler/directives');
+
+
+
+exports.DestylerSwitchRoot = index.DestylerSwitchRoot;
+exports.DestylerSwitchThump = index.DestylerSwitchThump;

package/dist/component.d.cts

@@ -0,0 +1,4 @@
+export { DestylerSwitchRoot, DestylerSwitchRootProps, DestylerSwitchThump, DestylerSwitchThumpProps } from './index.cjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';

package/dist/component.d.mts

@@ -0,0 +1,4 @@
+export { DestylerSwitchRoot, DestylerSwitchRootProps, DestylerSwitchThump, DestylerSwitchThumpProps } from './index.mjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';

package/dist/component.d.ts

@@ -0,0 +1,4 @@
+export { DestylerSwitchRoot, DestylerSwitchRootProps, DestylerSwitchThump, DestylerSwitchThumpProps } from './index.js';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';

package/dist/component.mjs

@@ -0,0 +1,6 @@
+export { DestylerSwitchRoot, DestylerSwitchThump } from './index.mjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/composition';
+import '@destyler/shared';
+import '@destyler/directives';

package/dist/index.cjs

@@ -0,0 +1,165 @@
+'use strict';
+
+const vue = require('vue');
+const primitive = require('@destyler/primitive');
+const composition = require('@destyler/composition');
+const shared = require('@destyler/shared');
+const directives = require('@destyler/directives');
+
+const destylerSwitchRootProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  defaultChecked: {
+    type: Boolean,
+    required: false
+  },
+  checked: {
+    type: Boolean,
+    required: false,
+    default: void 0
+  },
+  disabled: {
+    type: Boolean,
+    required: false
+  },
+  required: {
+    type: Boolean,
+    required: false
+  },
+  name: {
+    type: String,
+    required: false
+  },
+  id: {
+    type: String,
+    required: false
+  },
+  value: {
+    type: String,
+    required: false,
+    default: "on"
+  }
+};
+const [injectSwitchRootContext, provideSwitchRootContext] = shared.createContext("DestylerSwitchRoot");
+const DestylerSwitchRoot = vue.defineComponent({
+  name: "DestylerSwitchRoot",
+  props: destylerSwitchRootProps,
+  emits: ["update:checked"],
+  setup(props, { emit }) {
+    const { disabled } = vue.toRefs(props);
+    const checked = composition.useVModel(props, "checked", emit, {
+      defaultValue: props.defaultChecked,
+      passive: props.checked === void 0
+    });
+    function toggleCheck() {
+      if (disabled.value)
+        return;
+      checked.value = !checked.value;
+    }
+    const { forwardRef, currentElement } = composition.useForwardExpose();
+    const isFormControl = composition.useFormControl(currentElement);
+    const ariaLabel = vue.computed(() => props.id && currentElement.value ? document.querySelector(`[for="${props.id}"]`)?.textContent : void 0);
+    provideSwitchRootContext({
+      checked,
+      toggleCheck,
+      disabled
+    });
+    return {
+      forwardRef,
+      toggleCheck,
+      isFormControl,
+      ariaLabel,
+      checked,
+      disabled
+    };
+  },
+  render() {
+    return [
+      vue.withDirectives(vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
+        "role": "switch",
+        "type": this.$props.as === "button" ? "button" : void 0,
+        "value": this.value,
+        "aria-label": this.$attrs["aria-label"] || this.ariaLabel,
+        "aria-checked": this.checked,
+        "aria-required": this.$props.required,
+        "data-state": this.checked ? "checked" : "unchecked",
+        "data-disabled": this.disabled ? "" : void 0,
+        "as": this.$props.as,
+        "asChild": this.$props.asChild,
+        "disabled": this.disabled,
+        "onClick": () => {
+          this.toggleCheck();
+        },
+        "onKeydown": vue.withModifiers(() => {
+          this.toggleCheck();
+        }, ["enter", "prevent"])
+      }), {
+        default: () => this.$slots.default?.()
+      }), [
+        [directives.BindOnceDirective, { id: this.$props.id }]
+      ]),
+      this.isFormControl ? vue.h("input", {
+        "type": "checkbox",
+        "name": this.$props.name,
+        "tabindex": -1,
+        "aria-hidden": "",
+        "disabled": this.disabled,
+        "required": this.$props.required,
+        "value": this.value,
+        "checked": !!this.checked,
+        "data-state": this.checked ? "checked" : "unchecked",
+        "data-disabled": this.disabled ? "" : void 0,
+        "style": {
+          transform: "translateX(-100%)",
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }) : null
+    ];
+  }
+});
+
+const destylerSwitchThumpProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "span"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerSwitchThump = vue.defineComponent({
+  name: "DestylerSwitchThump",
+  props: destylerSwitchThumpProps,
+  setup(_) {
+    const rootContext = injectSwitchRootContext();
+    composition.useForwardExpose();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return vue.h(primitive.DestylerPrimitive, {
+      "data-state": this.rootContext.checked?.value ? "checked" : "unchecked",
+      "data-disabled": this.rootContext.disabled.value ? "" : void 0,
+      "asChild": this.$props.asChild,
+      "as": this.$props.as
+    }, this.$slots.default?.());
+  }
+});
+
+exports.DestylerSwitchRoot = DestylerSwitchRoot;
+exports.DestylerSwitchThump = DestylerSwitchThump;

package/dist/index.d.cts

@@ -0,0 +1,194 @@
+import * as vue from 'vue';
+import { PropType, Component, Ref } from 'vue';
+import { AsTag } from '@destyler/primitive';
+import { ExtractPublicPropTypes } from '@destyler/shared';
+
+declare const destylerSwitchRootProps: {
+    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 defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+};
+type DestylerSwitchRootProps = ExtractPublicPropTypes<typeof destylerSwitchRootProps>;
+interface SwitchRootContext {
+    checked?: Ref<boolean>;
+    toggleCheck: () => void;
+    disabled: Ref<boolean | undefined>;
+}
+declare const DestylerSwitchRoot: 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 defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+}, {
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+    toggleCheck: () => void;
+    isFormControl: vue.ComputedRef<boolean>;
+    ariaLabel: vue.ComputedRef<string | null | undefined>;
+    checked: Ref<boolean>;
+    disabled: Ref<boolean | undefined>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:checked"[], "update:checked", 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 defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+}>> & {
+    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly as: AsTag | Component;
+    readonly asChild: boolean;
+    readonly checked: boolean;
+    readonly value: string;
+}, {}>;
+
+declare const destylerSwitchThumpProps: {
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "span";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type DestylerSwitchThumpProps = ExtractPublicPropTypes<typeof destylerSwitchThumpProps>;
+declare const DestylerSwitchThump: vue.DefineComponent<{
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "span";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    rootContext: SwitchRootContext;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "span";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: AsTag | Component;
+    readonly asChild: boolean;
+}, {}>;
+
+export { DestylerSwitchRoot, type DestylerSwitchRootProps, DestylerSwitchThump, type DestylerSwitchThumpProps };

package/dist/index.d.mts

@@ -0,0 +1,194 @@
+import * as vue from 'vue';
+import { PropType, Component, Ref } from 'vue';
+import { AsTag } from '@destyler/primitive';
+import { ExtractPublicPropTypes } from '@destyler/shared';
+
+declare const destylerSwitchRootProps: {
+    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 defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+};
+type DestylerSwitchRootProps = ExtractPublicPropTypes<typeof destylerSwitchRootProps>;
+interface SwitchRootContext {
+    checked?: Ref<boolean>;
+    toggleCheck: () => void;
+    disabled: Ref<boolean | undefined>;
+}
+declare const DestylerSwitchRoot: 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 defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+}, {
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+    toggleCheck: () => void;
+    isFormControl: vue.ComputedRef<boolean>;
+    ariaLabel: vue.ComputedRef<string | null | undefined>;
+    checked: Ref<boolean>;
+    disabled: Ref<boolean | undefined>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:checked"[], "update:checked", 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 defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+}>> & {
+    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly as: AsTag | Component;
+    readonly asChild: boolean;
+    readonly checked: boolean;
+    readonly value: string;
+}, {}>;
+
+declare const destylerSwitchThumpProps: {
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "span";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type DestylerSwitchThumpProps = ExtractPublicPropTypes<typeof destylerSwitchThumpProps>;
+declare const DestylerSwitchThump: vue.DefineComponent<{
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "span";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    rootContext: SwitchRootContext;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "span";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: AsTag | Component;
+    readonly asChild: boolean;
+}, {}>;
+
+export { DestylerSwitchRoot, type DestylerSwitchRootProps, DestylerSwitchThump, type DestylerSwitchThumpProps };

package/dist/index.d.ts

@@ -0,0 +1,194 @@
+import * as vue from 'vue';
+import { PropType, Component, Ref } from 'vue';
+import { AsTag } from '@destyler/primitive';
+import { ExtractPublicPropTypes } from '@destyler/shared';
+
+declare const destylerSwitchRootProps: {
+    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 defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+};
+type DestylerSwitchRootProps = ExtractPublicPropTypes<typeof destylerSwitchRootProps>;
+interface SwitchRootContext {
+    checked?: Ref<boolean>;
+    toggleCheck: () => void;
+    disabled: Ref<boolean | undefined>;
+}
+declare const DestylerSwitchRoot: 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 defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+}, {
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+    toggleCheck: () => void;
+    isFormControl: vue.ComputedRef<boolean>;
+    ariaLabel: vue.ComputedRef<string | null | undefined>;
+    checked: Ref<boolean>;
+    disabled: Ref<boolean | undefined>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:checked"[], "update:checked", 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 defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+}>> & {
+    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly as: AsTag | Component;
+    readonly asChild: boolean;
+    readonly checked: boolean;
+    readonly value: string;
+}, {}>;
+
+declare const destylerSwitchThumpProps: {
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "span";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type DestylerSwitchThumpProps = ExtractPublicPropTypes<typeof destylerSwitchThumpProps>;
+declare const DestylerSwitchThump: vue.DefineComponent<{
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "span";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    rootContext: SwitchRootContext;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "span";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: AsTag | Component;
+    readonly asChild: boolean;
+}, {}>;
+
+export { DestylerSwitchRoot, type DestylerSwitchRootProps, DestylerSwitchThump, type DestylerSwitchThumpProps };

package/dist/index.mjs

@@ -0,0 +1,162 @@
+import { defineComponent, toRefs, computed, withDirectives, h, mergeProps, withModifiers } from 'vue';
+import { DestylerPrimitive } from '@destyler/primitive';
+import { useVModel, useForwardExpose, useFormControl } from '@destyler/composition';
+import { createContext } from '@destyler/shared';
+import { BindOnceDirective } from '@destyler/directives';
+
+const destylerSwitchRootProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  defaultChecked: {
+    type: Boolean,
+    required: false
+  },
+  checked: {
+    type: Boolean,
+    required: false,
+    default: void 0
+  },
+  disabled: {
+    type: Boolean,
+    required: false
+  },
+  required: {
+    type: Boolean,
+    required: false
+  },
+  name: {
+    type: String,
+    required: false
+  },
+  id: {
+    type: String,
+    required: false
+  },
+  value: {
+    type: String,
+    required: false,
+    default: "on"
+  }
+};
+const [injectSwitchRootContext, provideSwitchRootContext] = createContext("DestylerSwitchRoot");
+const DestylerSwitchRoot = defineComponent({
+  name: "DestylerSwitchRoot",
+  props: destylerSwitchRootProps,
+  emits: ["update:checked"],
+  setup(props, { emit }) {
+    const { disabled } = toRefs(props);
+    const checked = useVModel(props, "checked", emit, {
+      defaultValue: props.defaultChecked,
+      passive: props.checked === void 0
+    });
+    function toggleCheck() {
+      if (disabled.value)
+        return;
+      checked.value = !checked.value;
+    }
+    const { forwardRef, currentElement } = useForwardExpose();
+    const isFormControl = useFormControl(currentElement);
+    const ariaLabel = computed(() => props.id && currentElement.value ? document.querySelector(`[for="${props.id}"]`)?.textContent : void 0);
+    provideSwitchRootContext({
+      checked,
+      toggleCheck,
+      disabled
+    });
+    return {
+      forwardRef,
+      toggleCheck,
+      isFormControl,
+      ariaLabel,
+      checked,
+      disabled
+    };
+  },
+  render() {
+    return [
+      withDirectives(h(DestylerPrimitive, mergeProps(this.$attrs, {
+        "role": "switch",
+        "type": this.$props.as === "button" ? "button" : void 0,
+        "value": this.value,
+        "aria-label": this.$attrs["aria-label"] || this.ariaLabel,
+        "aria-checked": this.checked,
+        "aria-required": this.$props.required,
+        "data-state": this.checked ? "checked" : "unchecked",
+        "data-disabled": this.disabled ? "" : void 0,
+        "as": this.$props.as,
+        "asChild": this.$props.asChild,
+        "disabled": this.disabled,
+        "onClick": () => {
+          this.toggleCheck();
+        },
+        "onKeydown": withModifiers(() => {
+          this.toggleCheck();
+        }, ["enter", "prevent"])
+      }), {
+        default: () => this.$slots.default?.()
+      }), [
+        [BindOnceDirective, { id: this.$props.id }]
+      ]),
+      this.isFormControl ? h("input", {
+        "type": "checkbox",
+        "name": this.$props.name,
+        "tabindex": -1,
+        "aria-hidden": "",
+        "disabled": this.disabled,
+        "required": this.$props.required,
+        "value": this.value,
+        "checked": !!this.checked,
+        "data-state": this.checked ? "checked" : "unchecked",
+        "data-disabled": this.disabled ? "" : void 0,
+        "style": {
+          transform: "translateX(-100%)",
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }) : null
+    ];
+  }
+});
+
+const destylerSwitchThumpProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "span"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerSwitchThump = defineComponent({
+  name: "DestylerSwitchThump",
+  props: destylerSwitchThumpProps,
+  setup(_) {
+    const rootContext = injectSwitchRootContext();
+    useForwardExpose();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return h(DestylerPrimitive, {
+      "data-state": this.rootContext.checked?.value ? "checked" : "unchecked",
+      "data-disabled": this.rootContext.disabled.value ? "" : void 0,
+      "asChild": this.$props.asChild,
+      "as": this.$props.as
+    }, this.$slots.default?.());
+  }
+});
+
+export { DestylerSwitchRoot, DestylerSwitchThump };

package/dist/resolver.cjs

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

package/dist/resolver.d.cts

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

package/dist/resolver.d.mts

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

package/dist/resolver.d.ts

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

package/dist/resolver.mjs

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

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@destyler/switch",
+  "version": "0.0.1-beta.12",
+  "description": "unstyled switch 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.12",
+    "@destyler/directives": "0.0.1-beta.12",
+    "@destyler/shared": "0.0.1-beta.12",
+    "@destyler/primitive": "0.0.1-beta.12"
+  },
+  "scripts": {
+    "clear": "rimraf ./dist",
+    "build": "pnpm run clear && unbuild"
+  }
+}