@destyler/checkbox 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,7 @@
+# @destyler/checkbox
+
+[![NPM version](https://img.shields.io/npm/v/@destyler/checkbox?color=a1b858&label=)](https://www.npmjs.com/package/@destyler/checkbox)
+
+> a control that allows the user to toggle between checked and not checked.
+
+[GitHub](https://github.com/destyler/destyler) | [Documentation](https://destyler-dev.zeabur.app/)

package/dist/component.cjs

@@ -1,14 +1,212 @@
 'use strict';
 
-const index = require('./index.cjs');
-require('vue');
-require('@destyler/primitive');
-require('@destyler/composition');
-require('@destyler/shared');
-require('@destyler/directives');
-require('@destyler/presence');
+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 checkboxRootProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
+  as: {
+    ...primitive.primitiveProps.as,
+    default: "button"
+  },
+  /**
+   * The checked state of the checkbox when it is initially rendered.
+   * Use when you do not need to control its checked state.
+   */
+  defaultChecked: {
+    type: Boolean,
+    required: false
+  },
+  /**
+   * The controlled checked state of the checkbox. Can be binded with `v-model`.
+   *
+   * @default undefined
+   */
+  checked: {
+    type: [Boolean, String],
+    required: false,
+    default: void 0
+  },
+  /**
+   * When `true`, prevents the user from interacting with the checkbox.
+   *
+   * @default false
+   */
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  /**
+   * When `true`, indicates that the user must check the checkbox before the owning form can be submitted.
+   */
+  required: {
+    type: Boolean,
+    required: false
+  },
+  /**
+   * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
+   */
+  name: {
+    type: String,
+    required: false
+  },
+  /**
+   * The value given as data when submitted with a `name`.
+   *
+   * @default on
+   */
+  value: {
+    type: String,
+    required: false,
+    default: "on"
+  },
+  /**
+   * Id of the element
+   */
+  id: {
+    type: String,
+    required: false
+  }
+};
+const checkboxRootEmits = {
+  /**
+   * Event handler called when the checked state of the checkbox changes.
+   */
+  "update:checked": (_checked) => true
+};
+const [injectCheckboxRootContext, provideCheckboxRootContext] = shared.createContext("DestylerCheckboxRoot");
+const CheckboxRoot = vue.defineComponent({
+  name: "DestylerCheckboxRoot",
+  props: checkboxRootProps,
+  emits: checkboxRootEmits,
+  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 { 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);
+    provideCheckboxRootContext({
+      disabled: disabledRef,
+      state: checkedRef
+    });
+    return {
+      disabled: disabledRef,
+      checked: checkedRef,
+      forwardRef,
+      isFormControl,
+      ariaLabel
+    };
+  },
+  render() {
+    const useVShow = this.isFormControl;
+    return [
+      vue.withDirectives(vue.h(primitive.Primitive, vue.mergeProps(this.$attrs, {
+        "ref": (el) => this.forwardRef(el),
+        "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
+    ];
+  }
+});
 
-exports.DestylerCheckboxIndicator = index.DestylerCheckboxIndicator;
-exports.DestylerCheckboxRoot = index.DestylerCheckboxRoot;
+const checkboxIndicatorProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default span
+   */
+  as: {
+    ...primitive.primitiveProps.as,
+    default: "span"
+  },
+  /**
+   * Used to force mounting when more control is needed.
+   * Useful when controlling animation with animation libraries.
+   *
+   * @default false
+   */
+  forceMount: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const CheckboxIndicator = vue.defineComponent({
+  name: "DestylerCheckboxIndicator",
+  props: checkboxIndicatorProps,
+  setup() {
+    const rootContext = injectCheckboxRootContext();
+    const { forwardRef } = composition.useForwardExpose();
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    return vue.h(presence.Presence, {
+      present: this.$props.forceMount || isIndeterminate(this.rootContext.state.value) || this.rootContext.state.value === true
+    }, () => vue.h(primitive.Primitive, vue.mergeProps(this.$attrs, {
+      "ref": (el) => this.forwardRef(el),
+      "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?.()));
+  }
+});
+
+exports.CheckboxIndicator = CheckboxIndicator;
+exports.CheckboxRoot = CheckboxRoot;
+exports.checkboxIndicatorProps = checkboxIndicatorProps;
+exports.checkboxRootEmits = checkboxRootEmits;
+exports.checkboxRootProps = checkboxRootProps;

package/dist/component.d.cts

@@ -1,4 +1,346 @@
-export { DestylerCheckboxIndicator, DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, DestylerCheckboxRootProps } from './index.cjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
+import * as vue from 'vue';
+import { PropType, Ref } from 'vue';
+import * as _destyler_primitive from '@destyler/primitive';
+import { ExtractPublicPropTypes } from '@destyler/shared';
+
+type CheckedState = boolean | 'indeterminate';
+
+declare const checkboxRootProps: {
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * The checked state of the checkbox when it is initially rendered.
+     * Use when you do not need to control its checked state.
+     */
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    /**
+     * The controlled checked state of the checkbox. Can be binded with `v-model`.
+     *
+     * @default undefined
+     */
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the checkbox.
+     *
+     * @default false
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true`, indicates that the user must check the checkbox before the owning form can be submitted.
+     */
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    /**
+     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
+     */
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * The value given as data when submitted with a `name`.
+     *
+     * @default on
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    /**
+     * Id of the element
+     */
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type CheckboxRootProps = ExtractPublicPropTypes<typeof checkboxRootProps>;
+declare const checkboxRootEmits: {
+    /**
+     * Event handler called when the checked state of the checkbox changes.
+     */
+    'update:checked': (_checked: boolean) => boolean;
+};
+interface CheckboxRootContext {
+    disabled: Ref<boolean>;
+    state: Ref<CheckedState>;
+}
+declare const CheckboxRoot: vue.DefineComponent<{
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * The checked state of the checkbox when it is initially rendered.
+     * Use when you do not need to control its checked state.
+     */
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    /**
+     * The controlled checked state of the checkbox. Can be binded with `v-model`.
+     *
+     * @default undefined
+     */
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the checkbox.
+     *
+     * @default false
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true`, indicates that the user must check the checkbox before the owning form can be submitted.
+     */
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    /**
+     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
+     */
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * The value given as data when submitted with a `name`.
+     *
+     * @default on
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    /**
+     * Id of the element
+     */
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    disabled: Ref<false> | Ref<true>;
+    checked: Ref<CheckedState>;
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+    isFormControl: vue.ComputedRef<boolean>;
+    ariaLabel: vue.ComputedRef<string | null | undefined>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    /**
+     * Event handler called when the checked state of the checkbox changes.
+     */
+    'update:checked': (_checked: boolean) => boolean;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * The checked state of the checkbox when it is initially rendered.
+     * Use when you do not need to control its checked state.
+     */
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    /**
+     * The controlled checked state of the checkbox. Can be binded with `v-model`.
+     *
+     * @default undefined
+     */
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the checkbox.
+     *
+     * @default false
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true`, indicates that the user must check the checkbox before the owning form can be submitted.
+     */
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    /**
+     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
+     */
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * The value given as data when submitted with a `name`.
+     *
+     * @default on
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    /**
+     * Id of the element
+     */
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>> & {
+    "onUpdate:checked"?: ((_checked: boolean) => any) | undefined;
+}, {
+    readonly checked: boolean | "indeterminate";
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly disabled: boolean;
+    readonly value: string;
+    readonly asChild: boolean;
+}, {}>;
+
+declare const checkboxIndicatorProps: {
+    /**
+     * @default span
+     */
+    readonly as: {
+        readonly default: "span";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * Used to force mounting when more control is needed.
+     * Useful when controlling animation with animation libraries.
+     *
+     * @default false
+     */
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type CheckboxIndicatorProps = ExtractPublicPropTypes<typeof checkboxIndicatorProps>;
+declare const CheckboxIndicator: vue.DefineComponent<{
+    /**
+     * @default span
+     */
+    readonly as: {
+        readonly default: "span";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * Used to force mounting when more control is needed.
+     * Useful when controlling animation with animation libraries.
+     *
+     * @default false
+     */
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    rootContext: CheckboxRootContext;
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * @default span
+     */
+    readonly as: {
+        readonly default: "span";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * Used to force mounting when more control is needed.
+     * Useful when controlling animation with animation libraries.
+     *
+     * @default false
+     */
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+    readonly forceMount: boolean;
+}, {}>;
+
+export { CheckboxIndicator, type CheckboxIndicatorProps, CheckboxRoot, type CheckboxRootProps, checkboxIndicatorProps, checkboxRootEmits, checkboxRootProps };