@destyler/radio 0.0.5 → 0.0.7-beta.1

package/dist/component.cjs

@@ -1,416 +0,0 @@
-'use strict';
-
-const vue = require('vue');
-const primitive = require('@destyler/primitive');
-const shared = require('@destyler/shared');
-const composition = require('@destyler/composition');
-const rovingFocus = require('@destyler/roving-focus');
-const core = require('@vueuse/core');
-const presence = require('@destyler/presence');
-
-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 RadioGroupRoot = vue.defineComponent({
-  name: "DestylerRadioGroupRoot",
-  props: radioGroupRootProps,
-  emits: radioGroupRootEmits,
-  setup(props, { emit }) {
-    const modelValue = composition.useVModel(props, "modelValue", emit, {
-      defaultValue: props.defaultValue,
-      passive: props.modelValue === void 0
-    });
-    const { disabled, loop, orientation, name, required, dir: propDir } = vue.toRefs(props);
-    const dir = composition.useDirection(propDir);
-    provideRadioGroupRootContext({
-      modelValue,
-      changeModelValue: (value) => {
-        modelValue.value = value;
-      },
-      disabled,
-      loop,
-      orientation,
-      name: name?.value,
-      required
-    });
-    return {
-      orientation,
-      dir,
-      loop,
-      disabled,
-      required,
-      name
-    };
-  },
-  render() {
-    return vue.h(rovingFocus.RovingFocusGroup, {
-      asChild: true,
-      orientation: this.orientation,
-      dir: this.dir,
-      loop: this.loop
-    }, () => vue.h(primitive.Primitive, {
-      "role": "radiogroup",
-      "data-disabled": this.disabled ? "" : void 0,
-      "asChild": this.$props.asChild,
-      "aria-required": this.required,
-      "dir": this.dir,
-      "name": this.name
-    }, () => this.$slots.default?.()));
-  }
-});
-
-const radioProps = {
-  ...primitive.primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...primitive.primitiveProps.as,
-    default: "button"
-  },
-  /**
-   * 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 radioEmits = {
-  /**
-   * Event handler called when the radio item is checked.
-   */
-  "update:checked": (_value) => true
-};
-const Radio = vue.defineComponent({
-  name: "DestylerRadio",
-  props: radioProps,
-  emits: radioEmits,
-  setup(props, { emit }) {
-    const checkedRef = composition.useVModel(props, "checked", emit, {
-      passive: props.checked === void 0
-    });
-    const { value } = vue.toRefs(props);
-    const { forwardRef, currentElement: triggerElement } = composition.useForwardExpose();
-    const isFormControl = composition.useFormControl(triggerElement);
-    const ariaLabel = vue.computed(() => props.id && triggerElement.value ? document.querySelector(`[for="${props.id}"]`)?.textContent ?? props.value : void 0);
-    function handleClick(event) {
-      checkedRef.value = true;
-      if (isFormControl.value)
-        event.stopPropagation();
-    }
-    return {
-      forwardRef,
-      checkedRef,
-      ariaLabel,
-      value,
-      isFormControl,
-      handleClick
-    };
-  },
-  render() {
-    return vue.h(primitive.Primitive, vue.mergeProps(this.$attrs, {
-      "id": this.$props.id,
-      "role": "radio",
-      "ref": this.forwardRef,
-      "type": this.$props.as === "button" ? "button" : void 0,
-      "as": this.$props.as,
-      "aria-checked": this.checkedRef,
-      "aria-label": this.ariaLabel,
-      "asChild": this.$props.asChild,
-      "disabled": this.disabled ? true : void 0,
-      "data-state": this.checkedRef ? "checked" : "unchecked",
-      "data-disabled": this.disabled ? "" : void 0,
-      "value": this.value,
-      "required": this.$props.required,
-      "name": this.$props.name,
-      "onClick": vue.withModifiers((event) => {
-        this.handleClick(event);
-      }, ["stop"])
-    }), () => [
-      this.$slots.default?.(),
-      this.isFormControl ? vue.h("input", {
-        "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",
-          opacity: 0,
-          margin: 0
-        }
-      }) : null
-    ]);
-  }
-});
-
-const radioGroupItemProps = {
-  asChild: {
-    ...radioProps.asChild
-  },
-  as: {
-    ...radioProps.as
-  },
-  /**
-   * The name of the input fields in the radio (Useful for form submission).
-   */
-  id: {
-    ...radioProps.id
-  },
-  /**
-   * The value given as data when submitted with a `name`.
-   */
-  value: {
-    ...radioProps.value
-  },
-  /**
-   * When `true`, prevents the user from interacting with the radio item.
-   */
-  disabled: {
-    ...radioProps.disabled
-  },
-  /**
-   * When `true`, indicates that the user must check the radio item before the owning form can be submitted.
-   */
-  required: {
-    ...radioProps.required
-  },
-  /**
-   * The name of the input fields in the radio (Useful for form submission).
-   */
-  name: {
-    ...radioProps.name
-  }
-};
-const [injectRadioGroupItemContext, provideRadiogroupItemContext] = shared.createContext("RadioGroupItem");
-const RadioGroupItem = vue.defineComponent({
-  name: "RadioGroupItem",
-  inheritAttrs: false,
-  props: radioGroupItemProps,
-  setup(props) {
-    const { forwardRef, currentElement } = composition.useForwardExpose();
-    const rootContext = injectRadioGroupRootContext();
-    const disabled = vue.computed(() => rootContext.disabled.value || props.disabled);
-    const required = vue.computed(() => rootContext.required.value || props.required);
-    const checked = vue.computed(() => rootContext.modelValue?.value === props.value);
-    provideRadiogroupItemContext({ disabled, checked });
-    const isArrowKeyPressed = vue.ref(false);
-    const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
-    core.useEventListener("keydown", (event) => {
-      if (ARROW_KEYS.includes(event.key))
-        isArrowKeyPressed.value = true;
-    });
-    core.useEventListener("keyup", () => {
-      isArrowKeyPressed.value = false;
-    });
-    function handleFocus() {
-      setTimeout(() => {
-        if (isArrowKeyPressed.value)
-          currentElement.value?.click();
-      }, 0);
-    }
-    return {
-      checked,
-      disabled,
-      required,
-      forwardRef,
-      rootContext,
-      handleFocus
-    };
-  },
-  render() {
-    return vue.h(rovingFocus.RovingFocusItem, {
-      asChild: true,
-      checked: this.checked,
-      disabled: this.disabled,
-      focusable: !this.disabled,
-      active: this.checked
-    }, () => 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();
-      }
-    }), () => this.$slots.default?.()));
-  }
-});
-
-const radioGroupIndicatorProps = {
-  ...primitive.primitiveProps,
-  /**
-   * @default span
-   */
-  as: {
-    ...primitive.primitiveProps.as,
-    default: "span"
-  },
-  /**
-   * Used to force mounting when more control is needed. Useful when
-   * controlling animation with Vue animation libraries.
-   */
-  forceMount: {
-    type: Boolean,
-    required: false
-  }
-};
-const RadioGroupIndicator = vue.defineComponent({
-  name: "DestylerRadioGroupindicator",
-  props: radioGroupIndicatorProps,
-  setup() {
-    const itemContext = injectRadioGroupItemContext();
-    const { forwardRef } = composition.useForwardExpose();
-    return {
-      forwardRef,
-      itemContext
-    };
-  },
-  render() {
-    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,
-      "asChild": this.$props.asChild,
-      "as": this.$props.as
-    }), () => this.$slots.default?.()));
-  }
-});
-
-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,216 +0,0 @@
-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 } from 'vue';
-import * as _destyler_primitive from '@destyler/primitive';
-import { ExtractPublicPropTypes } from '@destyler/shared';
-
-declare const radioProps: {
-    /**
-     * @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;
-    };
-};
-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>;
-    ariaLabel: vue.ComputedRef<string | undefined>;
-    value: vue.Ref<string | undefined>;
-    isFormControl: vue.ComputedRef<boolean>;
-    handleClick: (event: MouseEvent) => void;
-}, 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 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;
-    };
-}>> & {
-    "onUpdate:checked"?: ((_value: boolean) => any) | undefined;
-}, {
-    readonly disabled: boolean;
-    readonly as: _destyler_primitive.AsTag | vue.Component;
-    readonly asChild: boolean;
-    readonly checked: boolean;
-}, {}>;
-
-export { Radio, type RadioProps, radioEmits, radioProps };