vueless 0.0.549 → 0.0.550

package/ui.form-radio/URadio.vue

@@ -1,167 +1,34 @@
-<template>
-  <ULabel
-    :for="elementId"
-    :label="label"
-    :error="error"
-    :size="radioSize"
-    :align="labelAlign"
-    :disabled="disabled"
-    :description="description"
-    v-bind="radioLabelAttrs"
-    :data-test="`${dataTest}-label`"
-  >
-    <input
-      :id="elementId"
-      type="radio"
-      :value="radioValue"
-      :name="radioName"
-      :checked="checked || isChecked"
-      :disabled="disabled"
-      v-bind="radioAttrs"
-      :data-test="dataTest"
-      @change="onChange"
-    />
-
-    <template #bottom>
-      <!-- @slot Use it to add something below the radio. -->
-      <slot name="bottom" />
-    </template>
-  </ULabel>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, onMounted, ref, watchEffect, toValue, useId } from "vue";
 
 import ULabel from "../ui.form-label/ULabel.vue";
 import { getDefault } from "../utils/ui.ts";
 
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-import { URadio } from "./constants.js";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+import { URadio } from "./constants.ts";
+
+import type { URadioProps, LocalValueType } from "./types.ts";
+import type { SetRadioGroupSelectedItem } from "../ui.form-radio-group/types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const setRadioGroupSelectedItem = inject("setRadioGroupSelectedItem", null);
+const setRadioGroupSelectedItem = inject<SetRadioGroupSelectedItem>(
+  "setRadioGroupSelectedItem",
+  null,
+);
 const getRadioGroupName = inject("getRadioGroupName", null);
 const getRadioGroupColor = inject("getRadioGroupColor", null);
 const getRadioGroupSize = inject("getRadioGroupSize", null);
 const getRadioGroupSelectedItem = inject("getRadioGroupSelectedItem", null);
 
-const props = defineProps({
-  /**
-   * Radio value.
-   */
-  modelValue: {
-    type: [Boolean, String, Number, Array, Object],
-    default: null,
-  },
-
-  /**
-   * Native value attribute.
-   */
-  value: {
-    type: [Boolean, String, Number, Array, Object],
-    default: "",
-  },
-
-  /**
-   * Radio label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Label placement.
-   * @values left, right
-   */
-  labelAlign: {
-    type: String,
-    default: getDefault(defaultConfig, URadio).labelAlign,
-  },
-
-  /**
-   * Radio description.
-   */
-  description: {
-    type: [String, Object],
-    default: "",
-  },
-
-  /**
-   * Error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Radio name.
-   */
-  name: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Radio size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, URadio).size,
-  },
-
-  /**
-   * Radio color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
-   */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, URadio).color,
-  },
-
-  /**
-   * Set radio disabled.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, URadio).disabled,
-  },
-
-  /**
-   * Set radio checked.
-   */
-  checked: {
-    type: Boolean,
-    default: getDefault(defaultConfig, URadio).checked,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<URadioProps>(), {
+  labelAlign: getDefault<URadioProps>(defaultConfig, URadio).labelAlign,
+  size: getDefault<URadioProps>(defaultConfig, URadio).size,
+  color: getDefault<URadioProps>(defaultConfig, URadio).color,
+  disabled: getDefault<URadioProps>(defaultConfig, URadio).disabled,
+  checked: getDefault<URadioProps>(defaultConfig, URadio).checked,
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -172,8 +39,8 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
-const localValue = ref("");
-const radioName = ref(null);
+const localValue = ref<LocalValueType>("");
+const radioName = ref("");
 const radioColor = ref(toValue(getRadioGroupColor) || props.color);
 const radioSize = ref(toValue(getRadioGroupSize) || props.size);
 
@@ -196,7 +63,7 @@ const radioValue = computed(() => {
 });
 
 onMounted(() => {
-  radioName.value = props.name || toValue(getRadioGroupName);
+  radioName.value = props.name || toValue(getRadioGroupName) || "";
 });
 
 watchEffect(() => (radioColor.value = toValue(getRadioGroupColor) || props.color));
@@ -206,9 +73,44 @@ watchEffect(() => {
   emit("update:modelValue", props.value);
 });
 
-function onChange(event) {
-  setRadioGroupSelectedItem && setRadioGroupSelectedItem(props.value);
+function onChange(event: CustomEvent) {
+  const target = event.target as HTMLInputElement;
 
-  emit("update:modelValue", event.target.value);
+  if (setRadioGroupSelectedItem) {
+    setRadioGroupSelectedItem(props.value ?? "");
+  }
+
+  emit("update:modelValue", target.value);
 }
 </script>
+
+<template>
+  <ULabel
+    :for="elementId"
+    :label="label"
+    :error="error"
+    :size="radioSize"
+    :align="labelAlign"
+    :disabled="disabled"
+    :description="description"
+    v-bind="radioLabelAttrs"
+    :data-test="`${dataTest}-label`"
+  >
+    <input
+      :id="elementId"
+      type="radio"
+      :value="radioValue"
+      :name="radioName"
+      :checked="checked || isChecked"
+      :disabled="disabled"
+      v-bind="radioAttrs"
+      :data-test="dataTest"
+      @change="onChange"
+    />
+
+    <template #bottom>
+      <!-- @slot Use it to add something below the radio. -->
+      <slot name="bottom" />
+    </template>
+  </ULabel>
+</template>

package/ui.form-radio/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.form-radio/storybook/{stories.js → stories.ts}

@@ -3,6 +3,14 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybo
 import URadio from "../../ui.form-radio/URadio.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { URadioProps } from "../types.ts";
+
+interface URadioArgs extends URadioProps {
+  slotTemplate?: string;
+  enum: "variant" | "size";
+}
+
 /**
  * The `URadio` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-radio)
  */
@@ -19,9 +27,9 @@ export default {
   argTypes: {
     ...getArgTypes(URadio.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<URadioArgs> = (args: URadioArgs) => ({
   components: { URadio, UBadge },
   setup() {
     const slots = getSlotNames(URadio.__name);
@@ -30,7 +38,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <URadio v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </URadio>
   `,
 });

package/ui.form-radio/types.ts

@@ -0,0 +1,99 @@
+import defaultConfig from "./config.ts";
+
+import type { UnknownObject, UnknownArray } from "../types.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export type LocalValueType = string | number | boolean | UnknownObject | null;
+
+export interface URadioProps {
+  /**
+   * Radio value.
+   */
+  modelValue?: boolean | string | number | UnknownArray | UnknownObject;
+
+  /**
+   * Native value attribute.
+   */
+  value?: boolean | string | number | UnknownArray | UnknownObject;
+
+  /**
+   * Radio label.
+   */
+  label?: string;
+
+  /**
+   * Label placement.
+   */
+  labelAlign?: "left" | "right";
+
+  /**
+   * Radio description.
+   */
+  description?: string;
+
+  /**
+   * Error message.
+   */
+  error?: string;
+
+  /**
+   * Radio name.
+   */
+  name?: string;
+
+  /**
+   * Radio size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Radio color.
+   */
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "brand";
+
+  /**
+   * Set radio disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Set radio checked.
+   */
+  checked?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.form-radio/useAttrs.ts

@@ -0,0 +1,35 @@
+import { computed } from "vue";
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { Ref } from "vue";
+import type { UseAttrs } from "../types.ts";
+import type { URadioProps, Config } from "./types.ts";
+
+type ComponentState = {
+  radioColor: Ref<string>;
+  radioSize: Ref<string>;
+};
+
+export default function useAttrs(
+  props: URadioProps,
+  { radioColor, radioSize }: ComponentState,
+): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const mutatedProps = computed(() => ({
+    color: radioColor.value,
+    size: radioSize.value,
+    label: Boolean(props.label),
+    error: Boolean(props.error),
+  }));
+
+  const keysAttrs = getKeysAttrs(mutatedProps);
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.form-radio-group/URadioGroup.vue

@@ -1,136 +1,24 @@
-<template>
-  <ULabel
-    :size="size"
-    :label="label"
-    :error="error"
-    :description="description"
-    :disabled="disabled"
-    align="topWithDesc"
-    v-bind="groupLabelAttrs"
-    :data-test="dataTest"
-  >
-    <div v-bind="listAttrs">
-      <!-- @slot Use it to add URadio directly. -->
-      <slot>
-        <URadio
-          v-for="(option, index) in options"
-          :key="option.value"
-          :model-value="selectedItem"
-          :value="option.value"
-          :label="option.label"
-          :description="option.description"
-          :disabled="disabled"
-          v-bind="groupRadioAttrs"
-          :data-test="`${dataTest}-item-${index}`"
-        />
-      </slot>
-    </div>
-  </ULabel>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, provide } from "vue";
 
 import ULabel from "../ui.form-label/ULabel.vue";
 import URadio from "../ui.form-radio/URadio.vue";
 import { getDefault } from "../utils/ui.ts";
 
-import defaultConfig from "./config.js";
-import { URadioGroup } from "./constants.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Radio group selected value.
-   */
-  modelValue: {
-    type: [Boolean, String, Number, Array, Object],
-    default: "",
-  },
-
-  /**
-   * Radio group options.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Radio group label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Radio group description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Radio group error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Radio size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, URadioGroup).size,
-  },
-
-  /**
-   * Radio group color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
-   */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, URadioGroup).color,
-  },
-
-  /**
-   * Unique radio group name (sets for each radio).
-   */
-  name: {
-    type: String,
-    required: true,
-  },
+import defaultConfig from "./config.ts";
+import { URadioGroup } from "./constants.ts";
+import useAttrs from "./useAttrs.ts";
 
-  /**
-   * Disable the input.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, URadioGroup).disabled,
-  },
+import type { URadioGroupProps, SetRadioGroupSelectedItem } from "./types.ts";
 
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<URadioGroupProps>(), {
+  size: getDefault<URadioGroupProps>(defaultConfig, URadioGroup).size,
+  color: getDefault<URadioGroupProps>(defaultConfig, URadioGroup).color,
+  disabled: getDefault<URadioGroupProps>(defaultConfig, URadioGroup).disabled,
+  modelValue: "",
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -148,9 +36,41 @@ const selectedItem = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-provide("setRadioGroupSelectedItem", (value) => (selectedItem.value = value));
+provide<SetRadioGroupSelectedItem>("setRadioGroupSelectedItem", (value) => {
+  selectedItem.value = value;
+});
 provide("getRadioGroupSelectedItem", () => selectedItem.value);
 provide("getRadioGroupName", () => props.name);
 provide("getRadioGroupColor", () => props.color);
 provide("getRadioGroupSize", () => props.size);
 </script>
+
+<template>
+  <ULabel
+    :size="size"
+    :label="label"
+    :error="error"
+    :description="description"
+    :disabled="disabled"
+    align="topWithDesc"
+    v-bind="groupLabelAttrs"
+    :data-test="dataTest"
+  >
+    <div v-bind="listAttrs">
+      <!-- @slot Use it to add URadio directly. -->
+      <slot>
+        <URadio
+          v-for="(option, index) in options"
+          :key="option.value"
+          :model-value="selectedItem"
+          :value="option.value"
+          :label="option.label"
+          :description="option.description"
+          :disabled="disabled"
+          v-bind="groupRadioAttrs"
+          :data-test="`${dataTest}-item-${index}`"
+        />
+      </slot>
+    </div>
+  </ULabel>
+</template>

package/ui.form-radio-group/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.form-radio-group/storybook/{stories.js → stories.ts}

@@ -5,6 +5,14 @@ import URadio from "../../ui.form-radio/URadio.vue";
 import UAlert from "../../ui.text-alert/UAlert.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { URadioGroupProps } from "../types.ts";
+
+interface URadioGroupArgs extends URadioGroupProps {
+  slotTemplate?: string;
+  enum: "size" | "color";
+}
+
 /**
  * The `URadioGroup` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-radio-group)
  */
@@ -26,9 +34,9 @@ export default {
   argTypes: {
     ...getArgTypes(URadioGroup.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<URadioGroupArgs> = (args: URadioGroupArgs) => ({
   components: { URadioGroup, URadio, UAlert, UCol },
   setup() {
     const slots = getSlotNames(URadioGroup.__name);
@@ -43,7 +51,7 @@ const DefaultTemplate = (args) => ({
           :key="index"
           v-bind="radio"
         >
-          ${args.slotTemplate || getSlotsFragment()}
+          ${args.slotTemplate || getSlotsFragment("")}
         </URadio>
       </URadioGroup>
 
@@ -54,12 +62,12 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<URadioGroupArgs> = (args: URadioGroupArgs, { argTypes }) => ({
   components: { URadioGroup, UCol },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `