@destyler/radio 0.0.3 → 0.0.4

package/README.md

@@ -0,0 +1,7 @@
+# @destyler/radio
+
+[![NPM version](https://img.shields.io/npm/v/@destyler/radio?color=a1b858&radio=)](https://www.npmjs.com/package/@destyler/radio)
+
+> a set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
+
+[GitHub](https://github.com/destyler/destyler) | [Documentation](https://destyler-dev.zeabur.app/)

package/dist/component.cjs

@@ -6,61 +6,90 @@ const shared = require('@destyler/shared');
 const composition = require('@destyler/composition');
 const rovingFocus = require('@destyler/roving-focus');
 const core = require('@vueuse/core');
-const directives = require('@destyler/directives');
+const presence = require('@destyler/presence');
 
-const destylerRadioGroupRootProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const radioGroupRootProps = {
+  ...primitive.primitiveProps,
+  /**
+   * The controlled value of the radio item to check. Can be binded as `v-model`.
+   */
   modelValue: {
     type: String,
     required: false
   },
+  /**
+   * The value of the radio item that should be checked when initially rendered.
+   *
+   * Use when you do not need to control the state of the radio items.
+   */
   defaultValue: {
     type: String,
     required: false
   },
+  /**
+   * When `true`, prevents the user from interacting with radio items.
+   */
   disabled: {
     type: Boolean,
     required: false,
     default: false
   },
+  /**
+   * The name of the group. Submitted with its owning form as part of a name/value pair.
+   */
   name: {
     type: String,
     required: false
   },
+  /**
+   * When `true`, indicates that the user must check a radio item before the owning form can be submitted.
+   *
+   * @default false
+   */
   required: {
     type: Boolean,
     required: false,
     default: false
   },
+  /**
+   * The orientation of the component.
+   *
+   * @default undefined
+   */
   orientation: {
     type: String,
     required: false,
     default: void 0
   },
+  /**
+   * The reading direction of the radio when applicable.
+   */
   dir: {
     type: String,
     required: false
   },
+  /**
+   * When `true`, keyboard navigation will loop from last item to first, and vice versa.
+   *
+   * @default true
+   */
   loop: {
     type: Boolean,
     required: false,
     default: true
   }
 };
+const radioGroupRootEmits = {
+  /**
+   * Event handler called when the radio group value changes
+   */
+  "update:modelValue": (_value) => true
+};
 const [injectRadioGroupRootContext, provideRadioGroupRootContext] = shared.createContext("DestylerRadioGroupRoot");
-const DestylerRadioGroupRoot = vue.defineComponent({
+const RadioGroupRoot = vue.defineComponent({
   name: "DestylerRadioGroupRoot",
-  props: destylerRadioGroupRootProps,
-  emits: ["update:modelValue"],
+  props: radioGroupRootProps,
+  emits: radioGroupRootEmits,
   setup(props, { emit }) {
     const modelValue = composition.useVModel(props, "modelValue", emit, {
       defaultValue: props.defaultValue,
@@ -89,12 +118,12 @@ const DestylerRadioGroupRoot = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(rovingFocus.DestylerRovingFocusGroup, {
+    return vue.h(rovingFocus.RovingFocusGroup, {
       asChild: true,
       orientation: this.orientation,
       dir: this.dir,
       loop: this.loop
-    }, () => vue.h(primitive.DestylerPrimitive, {
+    }, () => vue.h(primitive.Primitive, {
       "role": "radiogroup",
       "data-disabled": this.disabled ? "" : void 0,
       "asChild": this.$props.asChild,
@@ -105,48 +134,72 @@ const DestylerRadioGroupRoot = vue.defineComponent({
   }
 });
 
-const destylerRadioProps = {
+const radioProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.primitiveProps.as,
     default: "button"
   },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+  /**
+   * The name of the input fields in the radio (Useful for form submission).
+   */
   id: {
     type: String,
     required: false
   },
+  /**
+   * The value given as data when submitted with a `name`.
+   */
   value: {
     type: String,
     required: false
   },
+  /**
+   * When `true`, prevents the user from interacting with the radio item.
+   */
   disabled: {
     type: Boolean,
     required: false,
     default: false
   },
+  /**
+   * When `true`, indicates that the user must check the radio item before the owning form can be submitted.
+   */
   required: {
     type: Boolean,
     required: false
   },
+  /**
+   * The controlled value of the radio item to check. Can be binded as `v-model`.
+   *
+   * @default undefined
+   */
   checked: {
     type: Boolean,
     required: false,
     default: void 0
   },
+  /**
+   * The name of the input fields in the radio (Useful for form submission).
+   */
   name: {
     type: String,
     required: false
   }
 };
-const DestylerRadio = vue.defineComponent({
+const radioEmits = {
+  /**
+   * Event handler called when the radio item is checked.
+   */
+  "update:checked": (_value) => true
+};
+const Radio = vue.defineComponent({
   name: "DestylerRadio",
-  props: destylerRadioProps,
-  emits: ["update:checked"],
+  props: radioProps,
+  emits: radioEmits,
   setup(props, { emit }) {
     const checkedRef = composition.useVModel(props, "checked", emit, {
       passive: props.checked === void 0
@@ -170,9 +223,10 @@ const DestylerRadio = vue.defineComponent({
     };
   },
   render() {
-    return vue.withDirectives(vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
+    return vue.h(primitive.Primitive, vue.mergeProps(this.$attrs, {
+      "id": this.$props.id,
       "role": "radio",
-      "ref": (el) => this.forwardRef(el),
+      "ref": this.forwardRef,
       "type": this.$props.as === "button" ? "button" : void 0,
       "as": this.$props.as,
       "aria-checked": this.checkedRef,
@@ -190,12 +244,15 @@ const DestylerRadio = vue.defineComponent({
     }), () => [
       this.$slots.default?.(),
       this.isFormControl ? vue.h("input", {
-        role: "radio",
-        checked: this.checkedRef,
-        name: this.$props.name,
-        disabled: this.disabled,
-        required: this.required,
-        style: {
+        "type": "radio",
+        "tabindex": -1,
+        "aria-hidden": "",
+        "value": this.value,
+        "checked": this.checkedRef,
+        "name": this.$props.name,
+        "disabled": this.disabled,
+        "required": this.required,
+        "style": {
           transform: "translateX(-100%)",
           position: "absolute",
           pointerEvents: "none",
@@ -203,50 +260,53 @@ const DestylerRadio = vue.defineComponent({
           margin: 0
         }
       }) : null
-    ]), [
-      [directives.BindOnceDirective, { id: this.$props.id }]
     ]);
   }
 });
 
-const destylerRadioGroupItemProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "button"
-  },
+const radioGroupItemProps = {
   asChild: {
-    type: Boolean,
-    required: false,
-    default: false
+    ...radioProps.asChild
   },
+  as: {
+    ...radioProps.as
+  },
+  /**
+   * The name of the input fields in the radio (Useful for form submission).
+   */
   id: {
-    type: String,
-    required: false
+    ...radioProps.id
   },
+  /**
+   * The value given as data when submitted with a `name`.
+   */
   value: {
-    type: String,
-    required: false
+    ...radioProps.value
   },
+  /**
+   * When `true`, prevents the user from interacting with the radio item.
+   */
   disabled: {
-    type: Boolean,
-    required: false,
-    default: false
+    ...radioProps.disabled
   },
+  /**
+   * When `true`, indicates that the user must check the radio item before the owning form can be submitted.
+   */
   required: {
-    type: Boolean,
-    required: false
+    ...radioProps.required
   },
+  /**
+   * The name of the input fields in the radio (Useful for form submission).
+   */
   name: {
-    type: String,
-    required: false
+    ...radioProps.name
   }
 };
-const [injectRadioGroupItemContext, provideRadiogroupItemContext] = shared.createContext("DestylerRadioGroupItem");
-const DestylerRadioGroupItem = vue.defineComponent({
-  name: "DestylerRadioGroupItem",
+const [injectRadioGroupItemContext, provideRadiogroupItemContext] = shared.createContext("RadioGroupItem");
+const RadioGroupItem = vue.defineComponent({
+  name: "RadioGroupItem",
   inheritAttrs: false,
-  props: destylerRadioGroupItemProps,
+  props: radioGroupItemProps,
   setup(props) {
     const { forwardRef, currentElement } = composition.useForwardExpose();
     const rootContext = injectRadioGroupRootContext();
@@ -279,19 +339,22 @@ const DestylerRadioGroupItem = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(rovingFocus.DestylerRovingFocusItem, {
+    return vue.h(rovingFocus.RovingFocusItem, {
       asChild: true,
       checked: this.checked,
       disabled: this.disabled,
       focusable: !this.disabled,
       active: this.checked
-    }, () => vue.h(DestylerRadio, vue.mergeProps(this.$attrs, this.$props, {
+    }, () => vue.h(Radio, vue.mergeProps(this.$attrs, this.$props, {
       "ref": (el) => this.forwardRef(el),
       "checked": this.checked,
       "required": this.required,
       "onUpdate:checked": () => {
         this.rootContext.changeModelValue(this.$props.value);
       },
+      "onKeydown": vue.withKeys((event) => {
+        event.preventDefault();
+      }, ["enter"]),
       "onFocus": () => {
         this.handleFocus();
       }
@@ -299,38 +362,55 @@ const DestylerRadioGroupItem = vue.defineComponent({
   }
 });
 
-const destylerRadioGroupIndicatorProps = {
+const radioGroupIndicatorProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default span
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.primitiveProps.as,
     default: "span"
   },
-  asChild: {
+  /**
+   * Used to force mounting when more control is needed. Useful when
+   * controlling animation with Vue animation libraries.
+   */
+  forceMount: {
     type: Boolean,
-    required: false,
-    default: false
+    required: false
   }
 };
-const DestylerRadioGroupIndicator = vue.defineComponent({
+const RadioGroupIndicator = vue.defineComponent({
   name: "DestylerRadioGroupindicator",
-  props: destylerRadioGroupIndicatorProps,
+  props: radioGroupIndicatorProps,
   setup() {
     const itemContext = injectRadioGroupItemContext();
+    const { forwardRef } = composition.useForwardExpose();
     return {
+      forwardRef,
       itemContext
     };
   },
   render() {
-    return this.itemContext.checked.value ? vue.h(primitive.DestylerPrimitive, {
+    return vue.h(presence.Presence, {
+      present: this.$props.forceMount || this.itemContext.checked.value
+    }, () => vue.h(primitive.Primitive, vue.mergeProps(this.$attrs, {
+      "ref": (el) => this.forwardRef(el),
       "data-state": this.itemContext.checked.value ? "checked" : "unchecked",
       "data-disabled": this.itemContext.disabled.value ? "" : void 0,
-      "as": this.$props.as,
-      "asChild": this.$props.asChild
-    }, () => this.$slots.default?.()) : null;
+      "asChild": this.$props.asChild,
+      "as": this.$props.as
+    }), () => this.$slots.default?.()));
   }
 });
 
-exports.DestylerRadio = DestylerRadio;
-exports.DestylerRadioGroupIndicator = DestylerRadioGroupIndicator;
-exports.DestylerRadioGroupItem = DestylerRadioGroupItem;
-exports.DestylerRadioGroupRoot = DestylerRadioGroupRoot;
+exports.Radio = Radio;
+exports.RadioGroupIndicator = RadioGroupIndicator;
+exports.RadioGroupItem = RadioGroupItem;
+exports.RadioGroupRoot = RadioGroupRoot;
+exports.radioEmits = radioEmits;
+exports.radioGroupIndicatorProps = radioGroupIndicatorProps;
+exports.radioGroupItemProps = radioGroupItemProps;
+exports.radioGroupRootEmits = radioGroupRootEmits;
+exports.radioGroupRootProps = radioGroupRootProps;
+exports.radioProps = radioProps;

package/dist/component.d.cts

@@ -1,85 +1,137 @@
-export { DestylerRadioGroupIndicator, DestylerRadioGroupIndicatorProps, DestylerRadioGroupItem, DestylerRadioGroupItemProps, DestylerRadioGroupRoot, DestylerRadioGroupRootProps } from './index.cjs';
+export { f as RadioGroupIndicator, h as RadioGroupIndicatorProps, c as RadioGroupItem, e as RadioGroupItemProps, R as RadioGroupRoot, b as RadioGroupRootProps, g as radioGroupIndicatorProps, d as radioGroupItemProps, a as radioGroupRootEmits, r as radioGroupRootProps } from './shared/radio.54693474.cjs';
 import * as vue from 'vue';
-import { PropType, Component } from 'vue';
-import { AsTag } from '@destyler/primitive';
+import { PropType } from 'vue';
+import * as _destyler_primitive from '@destyler/primitive';
 import { ExtractPublicPropTypes } from '@destyler/shared';
 
-declare const destylerRadioProps: {
+declare const radioProps: {
+    /**
+     * @default button
+     */
     readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
         readonly default: "button";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
         readonly required: false;
-        readonly default: false;
     };
+    /**
+     * The name of the input fields in the radio (Useful for form submission).
+     */
     readonly id: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    /**
+     * The value given as data when submitted with a `name`.
+     */
     readonly value: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    /**
+     * When `true`, prevents the user from interacting with the radio item.
+     */
     readonly disabled: {
         readonly type: PropType<boolean>;
         readonly required: false;
         readonly default: false;
     };
+    /**
+     * When `true`, indicates that the user must check the radio item before the owning form can be submitted.
+     */
     readonly required: {
         readonly type: PropType<boolean>;
         readonly required: false;
     };
+    /**
+     * The controlled value of the radio item to check. Can be binded as `v-model`.
+     *
+     * @default undefined
+     */
     readonly checked: {
         readonly type: PropType<boolean>;
         readonly required: false;
         readonly default: undefined;
     };
+    /**
+     * The name of the input fields in the radio (Useful for form submission).
+     */
     readonly name: {
         readonly type: PropType<string>;
         readonly required: false;
     };
-};
-type DestylerRadioProps = ExtractPublicPropTypes<typeof destylerRadioProps>;
-declare const DestylerRadio: 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;
     };
+};
+type RadioProps = ExtractPublicPropTypes<typeof radioProps>;
+declare const radioEmits: {
+    /**
+     * Event handler called when the radio item is checked.
+     */
+    'update:checked': (_value: boolean) => boolean;
+};
+declare const Radio: vue.DefineComponent<{
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * The name of the input fields in the radio (Useful for form submission).
+     */
     readonly id: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    /**
+     * The value given as data when submitted with a `name`.
+     */
     readonly value: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    /**
+     * When `true`, prevents the user from interacting with the radio item.
+     */
     readonly disabled: {
         readonly type: PropType<boolean>;
         readonly required: false;
         readonly default: false;
     };
+    /**
+     * When `true`, indicates that the user must check the radio item before the owning form can be submitted.
+     */
     readonly required: {
         readonly type: PropType<boolean>;
         readonly required: false;
     };
+    /**
+     * The controlled value of the radio item to check. Can be binded as `v-model`.
+     *
+     * @default undefined
+     */
     readonly checked: {
         readonly type: PropType<boolean>;
         readonly required: false;
         readonly default: undefined;
     };
+    /**
+     * The name of the input fields in the radio (Useful for form submission).
+     */
     readonly name: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
 }, {
     forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
     checkedRef: vue.WritableComputedRef<boolean | undefined>;
@@ -87,50 +139,78 @@ declare const DestylerRadio: vue.DefineComponent<{
     value: vue.Ref<string | undefined>;
     isFormControl: vue.ComputedRef<boolean>;
     handleClick: (event: MouseEvent) => void;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:checked"[], "update:checked", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    /**
+     * Event handler called when the radio item is checked.
+     */
+    'update:checked': (_value: boolean) => boolean;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * @default button
+     */
     readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
         readonly default: "button";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
         readonly required: false;
-        readonly default: false;
     };
+    /**
+     * The name of the input fields in the radio (Useful for form submission).
+     */
     readonly id: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    /**
+     * The value given as data when submitted with a `name`.
+     */
     readonly value: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    /**
+     * When `true`, prevents the user from interacting with the radio item.
+     */
     readonly disabled: {
         readonly type: PropType<boolean>;
         readonly required: false;
         readonly default: false;
     };
+    /**
+     * When `true`, indicates that the user must check the radio item before the owning form can be submitted.
+     */
     readonly required: {
         readonly type: PropType<boolean>;
         readonly required: false;
     };
+    /**
+     * The controlled value of the radio item to check. Can be binded as `v-model`.
+     *
+     * @default undefined
+     */
     readonly checked: {
         readonly type: PropType<boolean>;
         readonly required: false;
         readonly default: undefined;
     };
+    /**
+     * The name of the input fields in the radio (Useful for form submission).
+     */
     readonly name: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
 }>> & {
-    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:checked"?: ((_value: boolean) => any) | undefined;
 }, {
-    readonly as: AsTag | Component;
-    readonly asChild: boolean;
     readonly disabled: boolean;
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
     readonly checked: boolean;
 }, {}>;
 
-export { DestylerRadio, type DestylerRadioProps };
+export { Radio, type RadioProps, radioEmits, radioProps };