@destyler/radio 0.0.3 → 0.0.4

package/dist/component.mjs

@@ -1,64 +1,93 @@
-import { defineComponent, toRefs, h, computed, withDirectives, mergeProps, withModifiers, ref } from 'vue';
-import { DestylerPrimitive } from '@destyler/primitive';
+import { defineComponent, toRefs, h, computed, mergeProps, withModifiers, ref, withKeys } from 'vue';
+import { primitiveProps, Primitive } from '@destyler/primitive';
 import { createContext } from '@destyler/shared';
 import { useVModel, useDirection, useForwardExpose, useFormControl } from '@destyler/composition';
-import { DestylerRovingFocusGroup, DestylerRovingFocusItem } from '@destyler/roving-focus';
+import { RovingFocusGroup, RovingFocusItem } from '@destyler/roving-focus';
 import { useEventListener } from '@vueuse/core';
-import { BindOnceDirective } from '@destyler/directives';
+import { Presence } from '@destyler/presence';
 
-const destylerRadioGroupRootProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const radioGroupRootProps = {
+  ...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] = createContext("DestylerRadioGroupRoot");
-const DestylerRadioGroupRoot = defineComponent({
+const RadioGroupRoot = defineComponent({
   name: "DestylerRadioGroupRoot",
-  props: destylerRadioGroupRootProps,
-  emits: ["update:modelValue"],
+  props: radioGroupRootProps,
+  emits: radioGroupRootEmits,
   setup(props, { emit }) {
     const modelValue = useVModel(props, "modelValue", emit, {
       defaultValue: props.defaultValue,
@@ -87,12 +116,12 @@ const DestylerRadioGroupRoot = defineComponent({
     };
   },
   render() {
-    return h(DestylerRovingFocusGroup, {
+    return h(RovingFocusGroup, {
       asChild: true,
       orientation: this.orientation,
       dir: this.dir,
       loop: this.loop
-    }, () => h(DestylerPrimitive, {
+    }, () => h(Primitive, {
       "role": "radiogroup",
       "data-disabled": this.disabled ? "" : void 0,
       "asChild": this.$props.asChild,
@@ -103,48 +132,72 @@ const DestylerRadioGroupRoot = defineComponent({
   }
 });
 
-const destylerRadioProps = {
+const radioProps = {
+  ...primitiveProps,
+  /**
+   * @default button
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...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 = defineComponent({
+const radioEmits = {
+  /**
+   * Event handler called when the radio item is checked.
+   */
+  "update:checked": (_value) => true
+};
+const Radio = defineComponent({
   name: "DestylerRadio",
-  props: destylerRadioProps,
-  emits: ["update:checked"],
+  props: radioProps,
+  emits: radioEmits,
   setup(props, { emit }) {
     const checkedRef = useVModel(props, "checked", emit, {
       passive: props.checked === void 0
@@ -168,9 +221,10 @@ const DestylerRadio = defineComponent({
     };
   },
   render() {
-    return withDirectives(h(DestylerPrimitive, mergeProps(this.$attrs, {
+    return h(Primitive, 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,
@@ -188,12 +242,15 @@ const DestylerRadio = defineComponent({
     }), () => [
       this.$slots.default?.(),
       this.isFormControl ? 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",
@@ -201,50 +258,53 @@ const DestylerRadio = defineComponent({
           margin: 0
         }
       }) : null
-    ]), [
-      [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] = createContext("DestylerRadioGroupItem");
-const DestylerRadioGroupItem = defineComponent({
-  name: "DestylerRadioGroupItem",
+const [injectRadioGroupItemContext, provideRadiogroupItemContext] = createContext("RadioGroupItem");
+const RadioGroupItem = defineComponent({
+  name: "RadioGroupItem",
   inheritAttrs: false,
-  props: destylerRadioGroupItemProps,
+  props: radioGroupItemProps,
   setup(props) {
     const { forwardRef, currentElement } = useForwardExpose();
     const rootContext = injectRadioGroupRootContext();
@@ -277,19 +337,22 @@ const DestylerRadioGroupItem = defineComponent({
     };
   },
   render() {
-    return h(DestylerRovingFocusItem, {
+    return h(RovingFocusItem, {
       asChild: true,
       checked: this.checked,
       disabled: this.disabled,
       focusable: !this.disabled,
       active: this.checked
-    }, () => h(DestylerRadio, mergeProps(this.$attrs, this.$props, {
+    }, () => h(Radio, 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": withKeys((event) => {
+        event.preventDefault();
+      }, ["enter"]),
       "onFocus": () => {
         this.handleFocus();
       }
@@ -297,35 +360,46 @@ const DestylerRadioGroupItem = defineComponent({
   }
 });
 
-const destylerRadioGroupIndicatorProps = {
+const radioGroupIndicatorProps = {
+  ...primitiveProps,
+  /**
+   * @default span
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...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 = defineComponent({
+const RadioGroupIndicator = defineComponent({
   name: "DestylerRadioGroupindicator",
-  props: destylerRadioGroupIndicatorProps,
+  props: radioGroupIndicatorProps,
   setup() {
     const itemContext = injectRadioGroupItemContext();
+    const { forwardRef } = useForwardExpose();
     return {
+      forwardRef,
       itemContext
     };
   },
   render() {
-    return this.itemContext.checked.value ? h(DestylerPrimitive, {
+    return h(Presence, {
+      present: this.$props.forceMount || this.itemContext.checked.value
+    }, () => h(Primitive, 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?.()));
   }
 });
 
-export { DestylerRadio, DestylerRadioGroupIndicator, DestylerRadioGroupItem, DestylerRadioGroupRoot };
+export { Radio, RadioGroupIndicator, RadioGroupItem, RadioGroupRoot, radioEmits, radioGroupIndicatorProps, radioGroupItemProps, radioGroupRootEmits, radioGroupRootProps, radioProps };

package/dist/index.cjs

@@ -7,10 +7,13 @@ require('@destyler/shared');
 require('@destyler/composition');
 require('@destyler/roving-focus');
 require('@vueuse/core');
-require('@destyler/directives');
+require('@destyler/presence');
 
 
 
-exports.DestylerRadioGroupIndicator = index.DestylerRadioGroupIndicator;
-exports.DestylerRadioGroupItem = index.DestylerRadioGroupItem;
-exports.DestylerRadioGroupRoot = index.DestylerRadioGroupRoot;
+exports.RadioGroupIndicator = index.RadioGroupIndicator;
+exports.RadioGroupItem = index.RadioGroupItem;
+exports.RadioGroupRoot = index.RadioGroupRoot;
+exports.radioGroupIndicatorProps = index.radioGroupIndicatorProps;
+exports.radioGroupItemProps = index.radioGroupItemProps;
+exports.radioGroupRootProps = index.radioGroupRootProps;