@destyler/radio 0.0.1-beta.11

package/dist/component.d.ts

@@ -0,0 +1,136 @@
+export { DestylerRadioGroupIndicator, DestylerRadioGroupIndicatorProps, DestylerRadioGroupItem, DestylerRadioGroupItemProps, DestylerRadioGroupRoot, DestylerRadioGroupRootProps } from './index.js';
+import * as vue from 'vue';
+import { PropType, Component } from 'vue';
+import { AsTag } from '@destyler/primitive';
+import { ExtractPublicPropTypes } from '@destyler/shared';
+
+declare const destylerRadioProps: {
+    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;
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    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;
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+}, {
+    customElement: vue.Ref<vue.ComponentPublicInstance | undefined>;
+    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, "update:checked"[], "update:checked", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    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;
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+}>> & {
+    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly as: AsTag | Component;
+    readonly asChild: boolean;
+    readonly disabled: boolean;
+    readonly checked: boolean;
+}, {}>;
+
+export { DestylerRadio, type DestylerRadioProps };

package/dist/component.mjs

@@ -0,0 +1,331 @@
+import { defineComponent, toRefs, h, computed, withDirectives, mergeProps, withModifiers, ref } from 'vue';
+import { DestylerPrimitive } from '@destyler/primitive';
+import { createContext } from '@destyler/shared';
+import { useVModel, useDirection, useCustomElement, useFormControl } from '@destyler/composition';
+import { DestylerRovingFocusGroup, DestylerRovingFocusItem } from '@destyler/roving-focus';
+import { useEventListener } from '@vueuse/core';
+import { BindOnceDirective } from '@destyler/directives';
+
+const destylerRadioGroupRootProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  modelValue: {
+    type: String,
+    required: false
+  },
+  defaultValue: {
+    type: String,
+    required: false
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  name: {
+    type: String,
+    required: false
+  },
+  required: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  orientation: {
+    type: String,
+    required: false,
+    default: void 0
+  },
+  dir: {
+    type: String,
+    required: false
+  },
+  loop: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+};
+const [injectRadioGroupRootContext, provideRadioGroupRootContext] = createContext("DestylerRadioGroupRoot");
+const DestylerRadioGroupRoot = defineComponent({
+  name: "DestylerRadioGroupRoot",
+  props: destylerRadioGroupRootProps,
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const modelValue = useVModel(props, "modelValue", emit, {
+      defaultValue: props.defaultValue,
+      passive: props.modelValue === void 0
+    });
+    const { disabled, loop, orientation, name, required, dir: propDir } = toRefs(props);
+    const dir = 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 h(DestylerRovingFocusGroup, {
+      asChild: true,
+      orientation: this.orientation,
+      dir: this.dir,
+      loop: this.loop
+    }, h(DestylerPrimitive, {
+      "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 destylerRadioProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  id: {
+    type: String,
+    required: false
+  },
+  value: {
+    type: String,
+    required: false
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  required: {
+    type: Boolean,
+    required: false
+  },
+  checked: {
+    type: Boolean,
+    required: false,
+    default: void 0
+  },
+  name: {
+    type: String,
+    required: false
+  }
+};
+const DestylerRadio = defineComponent({
+  name: "DestylerRadio",
+  props: destylerRadioProps,
+  emits: ["update:checked"],
+  setup(props, { emit }) {
+    const checkedRef = useVModel(props, "checked", emit, {
+      passive: props.checked === void 0
+    });
+    const { value } = toRefs(props);
+    const { customElement, currentElement: triggerElement } = useCustomElement();
+    const isFormControl = useFormControl(triggerElement);
+    const ariaLabel = 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 {
+      customElement,
+      checkedRef,
+      ariaLabel,
+      value,
+      isFormControl,
+      handleClick
+    };
+  },
+  render() {
+    return withDirectives(h(DestylerPrimitive, mergeProps(this.$attrs, {
+      "role": "radio",
+      "ref": "customElement",
+      "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": withModifiers((event) => {
+        this.handleClick(event);
+      }, ["stop"])
+    }), [
+      this.$slots.default?.(),
+      this.isFormControl ? h("input", {
+        role: "radio",
+        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
+    ]), [
+      [BindOnceDirective, { id: this.$props.id }]
+    ]);
+  }
+});
+
+const destylerRadioGroupItemProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  id: {
+    type: String,
+    required: false
+  },
+  value: {
+    type: String,
+    required: false
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  required: {
+    type: Boolean,
+    required: false
+  },
+  name: {
+    type: String,
+    required: false
+  }
+};
+const [injectRadioGroupItemContext, provideRadiogroupItemContext] = createContext("DestylerRadioGroupItem");
+const DestylerRadioGroupItem = defineComponent({
+  name: "DestylerRadioGroupItem",
+  inheritAttrs: false,
+  props: destylerRadioGroupItemProps,
+  setup(props) {
+    const { customElement, currentElement } = useCustomElement();
+    const rootContext = injectRadioGroupRootContext();
+    const disabled = computed(() => rootContext.disabled.value || props.disabled);
+    const required = computed(() => rootContext.required.value || props.required);
+    const checked = computed(() => rootContext.modelValue?.value === props.value);
+    provideRadiogroupItemContext({ disabled, checked });
+    const isArrowKeyPressed = ref(false);
+    const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+    useEventListener("keydown", (event) => {
+      if (ARROW_KEYS.includes(event.key))
+        isArrowKeyPressed.value = true;
+    });
+    useEventListener("keyup", () => {
+      isArrowKeyPressed.value = false;
+    });
+    function handleFocus() {
+      setTimeout(() => {
+        if (isArrowKeyPressed.value)
+          currentElement.value?.click();
+      }, 0);
+    }
+    return {
+      checked,
+      disabled,
+      required,
+      customElement,
+      rootContext,
+      handleFocus
+    };
+  },
+  render() {
+    return h(DestylerRovingFocusItem, {
+      asChild: true,
+      checked: this.checked,
+      disabled: this.disabled,
+      focusable: !this.disabled,
+      active: this.checked
+    }, h(DestylerRadio, mergeProps(this.$attrs, this.$props, {
+      "ref": "customElement",
+      "checked": this.checked,
+      "required": this.required,
+      "onUpdate:checked": () => {
+        this.rootContext.changeModelValue(this.$props.value);
+      },
+      "onFocus": () => {
+        this.handleFocus();
+      }
+    }), this.$slots.default?.()));
+  }
+});
+
+const destylerRadioGroupIndicatorProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "span"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerRadioGroupIndicator = defineComponent({
+  name: "DestylerRadioGroupindicator",
+  props: destylerRadioGroupIndicatorProps,
+  setup() {
+    const itemContext = injectRadioGroupItemContext();
+    return {
+      itemContext
+    };
+  },
+  render() {
+    return this.itemContext.checked.value ? h(DestylerPrimitive, {
+      "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;
+  }
+});
+
+export { DestylerRadio, DestylerRadioGroupIndicator, DestylerRadioGroupItem, DestylerRadioGroupRoot };

package/dist/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+const index = require('./component.cjs');
+require('vue');
+require('@destyler/primitive');
+require('@destyler/shared');
+require('@destyler/composition');
+require('@destyler/roving-focus');
+require('@vueuse/core');
+require('@destyler/directives');
+
+
+
+exports.DestylerRadioGroupIndicator = index.DestylerRadioGroupIndicator;
+exports.DestylerRadioGroupItem = index.DestylerRadioGroupItem;
+exports.DestylerRadioGroupRoot = index.DestylerRadioGroupRoot;