@destyler/checkbox 0.0.1-beta.7

package/dist/index.cjs

@@ -0,0 +1,180 @@
+'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 presence = require('@destyler/presence');
+
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+
+const destylerCheckboxRootProps = {
+  ...primitive.destylerPrimitiveProp,
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  defaultChecked: {
+    type: Boolean,
+    required: false
+  },
+  checked: {
+    type: [Boolean, String],
+    required: false,
+    default: void 0
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  required: {
+    type: Boolean,
+    required: false
+  },
+  name: {
+    type: String,
+    required: false
+  },
+  value: {
+    type: String,
+    required: false,
+    default: "on"
+  },
+  id: {
+    type: String,
+    required: false
+  }
+};
+const [injectCheckboxRootContext, provideCheckboxRootContext] = shared.createContext("CheckboxRoot");
+const DestylerCheckboxRoot = vue.defineComponent({
+  name: "DestylerCheckboxRoot",
+  props: destylerCheckboxRootProps,
+  emits: ["update:checked"],
+  setup(props, { emit }) {
+    const disabledRef = vue.toRef(props.disabled);
+    const checkedRef = composition.useVModel(props, "checked", emit, {
+      defaultValue: props.defaultChecked,
+      passive: props.checked === void 0
+    });
+    const { customElement, currentElement } = composition.useCustomElement();
+    const isFormControl = composition.useFormControl(currentElement);
+    const ariaLabel = vue.computed(() => props.id && currentElement.value ? document.querySelector(`[for="${props.id}"]`)?.textContent : void 0);
+    provideCheckboxRootContext({
+      disabled: disabledRef,
+      state: checkedRef
+    });
+    return {
+      disabled: disabledRef,
+      checked: checkedRef,
+      customElement,
+      isFormControl,
+      ariaLabel
+    };
+  },
+  render() {
+    const useVShow = this.isFormControl;
+    return [
+      vue.withDirectives(vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
+        "ref": "customElement",
+        "role": "checkbox",
+        "asChild": this.$props.asChild,
+        "as": this.$props.as,
+        "type": this.$props.as === "button" ? "button" : void 0,
+        "aria-checked": isIndeterminate(this.checked) ? "mixed" : this.checked,
+        "aria-required": false,
+        "aria-label": this.$attrs["aria-label"] || this.ariaLabel,
+        "data-state": getState(this.checked),
+        "data-disabled": this.disabled ? "" : void 0,
+        "disabled": this.disabled,
+        "onClick": () => {
+          this.checked = !this.checked;
+        }
+      }), this.$slots.default?.()), [
+        [directives.BindOnceDirective, { id: this.$props.id }]
+      ]),
+      useVShow ? vue.h("input", {
+        "type": "checkbox",
+        "tabindex": "-1",
+        "aria-hidden": "",
+        "value": this.$props.value,
+        "checked": this.checked,
+        "name": this.$props.name,
+        "disabled": this.disabled,
+        "required": this.$props.required,
+        "style": {
+          transform: "translateX(-100%)",
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }) : null
+    ];
+  }
+});
+
+const destylerCheckboxIndicatorProps = {
+  ...primitive.destylerPrimitiveProp,
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  forceMount: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerCheckboxIndicator = vue.defineComponent({
+  name: "DestylerCheckboxIndicator",
+  props: destylerCheckboxIndicatorProps,
+  setup() {
+    const rootContext = injectCheckboxRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return vue.h(presence.DestylerPresence, {
+      present: this.$props.forceMount || isIndeterminate(this.rootContext.state.value) || this.rootContext.state.value === true
+    }, vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
+      "data-state": getState(this.rootContext.state.value),
+      "data-disabled": this.rootContext.disabled.value ? "" : void 0,
+      "asChild": this.$props.asChild,
+      "as": this.$props.as,
+      "style": {
+        pointerEvents: "none"
+      }
+    }), this.$slots.default?.()));
+  }
+});
+
+const name = "@destyler/checkbox";
+
+const packageName = name;
+function DestylerCheckboxResolver() {
+  return {
+    type: "component",
+    resolve: (name2) => {
+      if (name2 === "DestylerTemplate")
+        return { name: name2, from: packageName };
+    }
+  };
+}
+
+exports.DestylerCheckboxIndicator = DestylerCheckboxIndicator;
+exports.DestylerCheckboxResolver = DestylerCheckboxResolver;
+exports.DestylerCheckboxRoot = DestylerCheckboxRoot;
+exports.destylerCheckboxIndicatorProps = destylerCheckboxIndicatorProps;
+exports.destylerCheckboxRootProps = destylerCheckboxRootProps;
+exports.injectCheckboxRootContext = injectCheckboxRootContext;
+exports.provideCheckboxRootContext = provideCheckboxRootContext;

package/dist/index.d.cts

@@ -0,0 +1,227 @@
+import * as vue from 'vue';
+import { Component, PropType, Ref } from 'vue';
+import { AsTag } from '@destyler/primitive';
+import { ComponentResolver } from 'unplugin-vue-components';
+
+type CheckedState = boolean | 'indeterminate';
+
+interface DestylerCheckboxRootProps {
+    asChild?: boolean;
+    as?: AsTag | Component;
+    defaultChecked?: boolean;
+    checked?: boolean | 'indeterminate';
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    id?: string;
+}
+declare const destylerCheckboxRootProps: {
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+};
+interface CheckboxRootContext {
+    disabled: Ref<boolean>;
+    state: Ref<CheckedState>;
+}
+declare const injectCheckboxRootContext: <T extends CheckboxRootContext | null | undefined = CheckboxRootContext>(fallback?: T | undefined) => T extends null ? CheckboxRootContext | null : CheckboxRootContext;
+declare const provideCheckboxRootContext: (contextValue: CheckboxRootContext) => CheckboxRootContext;
+declare const DestylerCheckboxRoot: vue.DefineComponent<{
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+}, {
+    disabled: Ref<false> | Ref<true>;
+    checked: Ref<CheckedState>;
+    customElement: Ref<vue.ComponentPublicInstance | undefined>;
+    isFormControl: vue.ComputedRef<boolean>;
+    ariaLabel: vue.ComputedRef<string | null | 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 defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly checked: boolean | "indeterminate";
+    readonly as: AsTag | Component;
+    readonly disabled: boolean;
+    readonly value: string;
+    readonly asChild: boolean;
+}, {}>;
+
+declare const destylerCheckboxIndicatorProps: {
+    as: {
+        type: PropType<AsTag | Component>;
+        required: boolean;
+        default: string;
+    };
+    forceMount: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+    asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+};
+declare const DestylerCheckboxIndicator: vue.DefineComponent<{
+    as: {
+        type: PropType<AsTag | Component>;
+        required: boolean;
+        default: string;
+    };
+    forceMount: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+    asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+}, {
+    rootContext: CheckboxRootContext;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: PropType<AsTag | Component>;
+        required: boolean;
+        default: string;
+    };
+    forceMount: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+    asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+}>>, {
+    as: AsTag | Component;
+    asChild: boolean;
+    forceMount: boolean;
+}, {}>;
+
+declare function DestylerCheckboxResolver(): ComponentResolver;
+
+export { type CheckboxRootContext, DestylerCheckboxIndicator, DestylerCheckboxResolver, DestylerCheckboxRoot, type DestylerCheckboxRootProps, destylerCheckboxIndicatorProps, destylerCheckboxRootProps, injectCheckboxRootContext, provideCheckboxRootContext };

package/dist/index.d.mts

@@ -0,0 +1,227 @@
+import * as vue from 'vue';
+import { Component, PropType, Ref } from 'vue';
+import { AsTag } from '@destyler/primitive';
+import { ComponentResolver } from 'unplugin-vue-components';
+
+type CheckedState = boolean | 'indeterminate';
+
+interface DestylerCheckboxRootProps {
+    asChild?: boolean;
+    as?: AsTag | Component;
+    defaultChecked?: boolean;
+    checked?: boolean | 'indeterminate';
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    id?: string;
+}
+declare const destylerCheckboxRootProps: {
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+};
+interface CheckboxRootContext {
+    disabled: Ref<boolean>;
+    state: Ref<CheckedState>;
+}
+declare const injectCheckboxRootContext: <T extends CheckboxRootContext | null | undefined = CheckboxRootContext>(fallback?: T | undefined) => T extends null ? CheckboxRootContext | null : CheckboxRootContext;
+declare const provideCheckboxRootContext: (contextValue: CheckboxRootContext) => CheckboxRootContext;
+declare const DestylerCheckboxRoot: vue.DefineComponent<{
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+}, {
+    disabled: Ref<false> | Ref<true>;
+    checked: Ref<CheckedState>;
+    customElement: Ref<vue.ComponentPublicInstance | undefined>;
+    isFormControl: vue.ComputedRef<boolean>;
+    ariaLabel: vue.ComputedRef<string | null | 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 defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly checked: boolean | "indeterminate";
+    readonly as: AsTag | Component;
+    readonly disabled: boolean;
+    readonly value: string;
+    readonly asChild: boolean;
+}, {}>;
+
+declare const destylerCheckboxIndicatorProps: {
+    as: {
+        type: PropType<AsTag | Component>;
+        required: boolean;
+        default: string;
+    };
+    forceMount: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+    asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+};
+declare const DestylerCheckboxIndicator: vue.DefineComponent<{
+    as: {
+        type: PropType<AsTag | Component>;
+        required: boolean;
+        default: string;
+    };
+    forceMount: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+    asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+}, {
+    rootContext: CheckboxRootContext;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: PropType<AsTag | Component>;
+        required: boolean;
+        default: string;
+    };
+    forceMount: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+    asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+}>>, {
+    as: AsTag | Component;
+    asChild: boolean;
+    forceMount: boolean;
+}, {}>;
+
+declare function DestylerCheckboxResolver(): ComponentResolver;
+
+export { type CheckboxRootContext, DestylerCheckboxIndicator, DestylerCheckboxResolver, DestylerCheckboxRoot, type DestylerCheckboxRootProps, destylerCheckboxIndicatorProps, destylerCheckboxRootProps, injectCheckboxRootContext, provideCheckboxRootContext };

package/dist/index.d.ts

@@ -0,0 +1,227 @@
+import * as vue from 'vue';
+import { Component, PropType, Ref } from 'vue';
+import { AsTag } from '@destyler/primitive';
+import { ComponentResolver } from 'unplugin-vue-components';
+
+type CheckedState = boolean | 'indeterminate';
+
+interface DestylerCheckboxRootProps {
+    asChild?: boolean;
+    as?: AsTag | Component;
+    defaultChecked?: boolean;
+    checked?: boolean | 'indeterminate';
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    id?: string;
+}
+declare const destylerCheckboxRootProps: {
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+};
+interface CheckboxRootContext {
+    disabled: Ref<boolean>;
+    state: Ref<CheckedState>;
+}
+declare const injectCheckboxRootContext: <T extends CheckboxRootContext | null | undefined = CheckboxRootContext>(fallback?: T | undefined) => T extends null ? CheckboxRootContext | null : CheckboxRootContext;
+declare const provideCheckboxRootContext: (contextValue: CheckboxRootContext) => CheckboxRootContext;
+declare const DestylerCheckboxRoot: vue.DefineComponent<{
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+}, {
+    disabled: Ref<false> | Ref<true>;
+    checked: Ref<CheckedState>;
+    customElement: Ref<vue.ComponentPublicInstance | undefined>;
+    isFormControl: vue.ComputedRef<boolean>;
+    ariaLabel: vue.ComputedRef<string | null | 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 defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly checked: boolean | "indeterminate";
+    readonly as: AsTag | Component;
+    readonly disabled: boolean;
+    readonly value: string;
+    readonly asChild: boolean;
+}, {}>;
+
+declare const destylerCheckboxIndicatorProps: {
+    as: {
+        type: PropType<AsTag | Component>;
+        required: boolean;
+        default: string;
+    };
+    forceMount: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+    asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+};
+declare const DestylerCheckboxIndicator: vue.DefineComponent<{
+    as: {
+        type: PropType<AsTag | Component>;
+        required: boolean;
+        default: string;
+    };
+    forceMount: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+    asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+}, {
+    rootContext: CheckboxRootContext;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: PropType<AsTag | Component>;
+        required: boolean;
+        default: string;
+    };
+    forceMount: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+    asChild: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+}>>, {
+    as: AsTag | Component;
+    asChild: boolean;
+    forceMount: boolean;
+}, {}>;
+
+declare function DestylerCheckboxResolver(): ComponentResolver;
+
+export { type CheckboxRootContext, DestylerCheckboxIndicator, DestylerCheckboxResolver, DestylerCheckboxRoot, type DestylerCheckboxRootProps, destylerCheckboxIndicatorProps, destylerCheckboxRootProps, injectCheckboxRootContext, provideCheckboxRootContext };

package/dist/index.mjs

@@ -0,0 +1,172 @@
+import { defineComponent, toRef, computed, withDirectives, h, mergeProps } from 'vue';
+import { destylerPrimitiveProp, DestylerPrimitive } from '@destyler/primitive';
+import { useVModel, useCustomElement, useFormControl } from '@destyler/composition';
+import { createContext } from '@destyler/shared';
+import { BindOnceDirective } from '@destyler/directives';
+import { DestylerPresence } from '@destyler/presence';
+
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+
+const destylerCheckboxRootProps = {
+  ...destylerPrimitiveProp,
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  defaultChecked: {
+    type: Boolean,
+    required: false
+  },
+  checked: {
+    type: [Boolean, String],
+    required: false,
+    default: void 0
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  required: {
+    type: Boolean,
+    required: false
+  },
+  name: {
+    type: String,
+    required: false
+  },
+  value: {
+    type: String,
+    required: false,
+    default: "on"
+  },
+  id: {
+    type: String,
+    required: false
+  }
+};
+const [injectCheckboxRootContext, provideCheckboxRootContext] = createContext("CheckboxRoot");
+const DestylerCheckboxRoot = defineComponent({
+  name: "DestylerCheckboxRoot",
+  props: destylerCheckboxRootProps,
+  emits: ["update:checked"],
+  setup(props, { emit }) {
+    const disabledRef = toRef(props.disabled);
+    const checkedRef = useVModel(props, "checked", emit, {
+      defaultValue: props.defaultChecked,
+      passive: props.checked === void 0
+    });
+    const { customElement, currentElement } = useCustomElement();
+    const isFormControl = useFormControl(currentElement);
+    const ariaLabel = computed(() => props.id && currentElement.value ? document.querySelector(`[for="${props.id}"]`)?.textContent : void 0);
+    provideCheckboxRootContext({
+      disabled: disabledRef,
+      state: checkedRef
+    });
+    return {
+      disabled: disabledRef,
+      checked: checkedRef,
+      customElement,
+      isFormControl,
+      ariaLabel
+    };
+  },
+  render() {
+    const useVShow = this.isFormControl;
+    return [
+      withDirectives(h(DestylerPrimitive, mergeProps(this.$attrs, {
+        "ref": "customElement",
+        "role": "checkbox",
+        "asChild": this.$props.asChild,
+        "as": this.$props.as,
+        "type": this.$props.as === "button" ? "button" : void 0,
+        "aria-checked": isIndeterminate(this.checked) ? "mixed" : this.checked,
+        "aria-required": false,
+        "aria-label": this.$attrs["aria-label"] || this.ariaLabel,
+        "data-state": getState(this.checked),
+        "data-disabled": this.disabled ? "" : void 0,
+        "disabled": this.disabled,
+        "onClick": () => {
+          this.checked = !this.checked;
+        }
+      }), this.$slots.default?.()), [
+        [BindOnceDirective, { id: this.$props.id }]
+      ]),
+      useVShow ? h("input", {
+        "type": "checkbox",
+        "tabindex": "-1",
+        "aria-hidden": "",
+        "value": this.$props.value,
+        "checked": this.checked,
+        "name": this.$props.name,
+        "disabled": this.disabled,
+        "required": this.$props.required,
+        "style": {
+          transform: "translateX(-100%)",
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }) : null
+    ];
+  }
+});
+
+const destylerCheckboxIndicatorProps = {
+  ...destylerPrimitiveProp,
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  forceMount: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerCheckboxIndicator = defineComponent({
+  name: "DestylerCheckboxIndicator",
+  props: destylerCheckboxIndicatorProps,
+  setup() {
+    const rootContext = injectCheckboxRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return h(DestylerPresence, {
+      present: this.$props.forceMount || isIndeterminate(this.rootContext.state.value) || this.rootContext.state.value === true
+    }, h(DestylerPrimitive, mergeProps(this.$attrs, {
+      "data-state": getState(this.rootContext.state.value),
+      "data-disabled": this.rootContext.disabled.value ? "" : void 0,
+      "asChild": this.$props.asChild,
+      "as": this.$props.as,
+      "style": {
+        pointerEvents: "none"
+      }
+    }), this.$slots.default?.()));
+  }
+});
+
+const name = "@destyler/checkbox";
+
+const packageName = name;
+function DestylerCheckboxResolver() {
+  return {
+    type: "component",
+    resolve: (name2) => {
+      if (name2 === "DestylerTemplate")
+        return { name: name2, from: packageName };
+    }
+  };
+}
+
+export { DestylerCheckboxIndicator, DestylerCheckboxResolver, DestylerCheckboxRoot, destylerCheckboxIndicatorProps, destylerCheckboxRootProps, injectCheckboxRootContext, provideCheckboxRootContext };

package/package.json

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