vueless 0.0.504 → 0.0.505

package/ui.button-toggle/UToggle.vue

@@ -1,177 +1,29 @@
-<template>
-  <ULabel
-    :size="labelSize"
-    :label="label"
-    :description="description"
-    :align="labelAlign"
-    :disabled="disabled"
-    centred
-    v-bind="toggleLabelAttrs"
-    :data-test="dataTest"
-  >
-    <div v-bind="itemsAttrs">
-      <!-- @slot Use it to add UToggleItem directly. -->
-      <slot>
-        <UToggleItem
-          v-for="(item, index) in options"
-          :key="item.value"
-          :name="name"
-          :model-value="item.value"
-          :value="item.value"
-          :disabled="disabled"
-          :label="item.label"
-          :data-test="`${dataTest}-item-${index}`"
-          v-bind="itemAttrs"
-        />
-      </slot>
-    </div>
-  </ULabel>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, provide, readonly } from "vue";
 
 import ULabel from "../ui.form-label/ULabel.vue";
 import UToggleItem from "../ui.button-toggle-item/UToggleItem.vue";
 import { getDefault } from "../utils/ui.ts";
 
-import defaultConfig from "./config.js";
-import { UToggle, TYPE_RADIO, TYPE_CHECKBOX } from "./constants.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Selected value.
-   */
-  modelValue: {
-    type: [String, Number, Array],
-    default: "",
-  },
-
-  /**
-   * Toggle item options.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Toggle variant.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: getDefault(defaultConfig, UToggle).variant,
-  },
-
-  /**
-   * Toggle size.
-   * @values 2xs, xs, sm, md, lg, xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UToggle).size,
-  },
-
-  /**
-   * Label placement.
-   * @values top, topWithDesc, left, right
-   */
-  labelAlign: {
-    type: String,
-    default: getDefault(defaultConfig, UToggle).labelAlign,
-  },
-
-  /**
-   * Toggle label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Toggle description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Toggle name.
-   */
-  name: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * Allow selecting a few options and return them as an array.
-   */
-  multiple: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UToggle).multiple,
-  },
-
-  /**
-   * Separate toggle items.
-   */
-  separated: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UToggle).separated,
-  },
+import defaultConfig from "./config.ts";
+import { UToggle, TYPE_RADIO, TYPE_CHECKBOX } from "./constants.ts";
+import useAttrs from "./useAttrs.ts";
 
-  /**
-   * Make toggle disabled.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UToggle).disabled,
-  },
+import type { UToggleProps } from "./types.ts";
 
-  /**
-   * Make the toggle fill the width with its container.
-   */
-  block: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UToggle).block,
-  },
-
-  /**
-   * Set button corners rounded.
-   */
-  round: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UToggle).round,
-  },
-
-  /**
-   * Set the same paddings for the button.
-   */
-  square: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UToggle).square,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UToggleProps>(), {
+  variant: getDefault<UToggleProps>(defaultConfig, UToggle).variant,
+  size: getDefault<UToggleProps>(defaultConfig, UToggle).size,
+  labelAlign: getDefault<UToggleProps>(defaultConfig, UToggle).labelAlign,
+  multiple: getDefault<UToggleProps>(defaultConfig, UToggle).multiple,
+  separated: getDefault<UToggleProps>(defaultConfig, UToggle).separated,
+  disabled: getDefault<UToggleProps>(defaultConfig, UToggle).disabled,
+  block: getDefault<UToggleProps>(defaultConfig, UToggle).block,
+  round: getDefault<UToggleProps>(defaultConfig, UToggle).round,
+  square: getDefault<UToggleProps>(defaultConfig, UToggle).square,
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -238,3 +90,33 @@ provide("toggleSelectedValue", {
   updateSelectedValue,
 });
 </script>
+
+<template>
+  <ULabel
+    :size="labelSize"
+    :label="label"
+    :description="description"
+    :align="labelAlign"
+    :disabled="disabled"
+    centred
+    v-bind="toggleLabelAttrs"
+    :data-test="dataTest"
+  >
+    <div v-bind="itemsAttrs">
+      <!-- @slot Use it to add UToggleItem directly. -->
+      <slot>
+        <UToggleItem
+          v-for="(item, index) in options"
+          :key="item.value"
+          :name="name"
+          :model-value="item.value"
+          :value="item.value"
+          :disabled="disabled"
+          :label="item.label"
+          :data-test="`${dataTest}-item-${index}`"
+          v-bind="itemAttrs"
+        />
+      </slot>
+    </div>
+  </ULabel>
+</template>

package/ui.button-toggle/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.button-toggle/storybook/{stories.js → stories.ts}

@@ -6,6 +6,14 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
 import URow from "../../ui.container-row/URow.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UToggleProps } from "../types.ts";
+
+interface UToggleArgs extends UToggleProps {
+  slotTemplate?: string;
+  enum: "variant" | "size";
+}
+
 /**
  * The `UToggle` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.button-toggle)
  */
@@ -25,9 +33,9 @@ export default {
     ...getArgTypes(UToggle.__name),
     modelValue: { control: { type: "text" } },
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs) => ({
   components: { UToggle, UIcon, UToggleItem },
   setup() {
     const slots = getSlotNames(UToggle.__name);
@@ -36,12 +44,12 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UToggle v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UToggle>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs, { argTypes }) => ({
   components: { UToggle, URow },
   setup() {
     const value = ref("");
@@ -49,7 +57,7 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
     return {
       args,
       value,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

package/ui.button-toggle/types.ts

@@ -0,0 +1,85 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UToggleProps {
+  /**
+   * Selected value.
+   */
+  modelValue?: string | number | Array<string | number>;
+
+  /**
+   * Toggle item options.
+   */
+  options?: Array<string | number>;
+
+  /**
+   * Toggle variant.
+   */
+  variant?: "primary" | "secondary" | "thirdary";
+
+  /**
+   * Toggle size.
+   */
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Label placement.
+   */
+  labelAlign?: "top" | "topWithDesc" | "left" | "right";
+
+  /**
+   * Toggle label.
+   */
+  label?: string;
+
+  /**
+   * Toggle description.
+   */
+  description?: string;
+
+  /**
+   * Toggle name.
+   */
+  name: string;
+
+  /**
+   * Allow selecting a few options and return them as an array.
+   */
+  multiple?: boolean;
+
+  /**
+   * Separate toggle items.
+   */
+  separated?: boolean;
+
+  /**
+   * Make toggle disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Make the toggle fill the width with its container.
+   */
+  block?: boolean;
+
+  /**
+   * Set button corners rounded.
+   */
+  round?: boolean;
+
+  /**
+   * Set the same paddings for the button.
+   */
+  square?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.button-toggle/useAttrs.ts

@@ -0,0 +1,18 @@
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UToggleProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UToggleProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.button-toggle-item/UToggleItem.vue

@@ -1,122 +1,22 @@
-<template>
-  <UButton
-    tabindex="0"
-    :for="elementId"
-    :no-ring="!getToggleSeparated()"
-    color="grayscale"
-    variant="secondary"
-    :label="label"
-    :size="getToggleSize()"
-    :round="getToggleRound()"
-    :block="getToggleBlock()"
-    :square="getToggleSquare()"
-    :disabled="getToggleDisabled()"
-    v-bind="toggleButtonAttrs"
-    @click="onClickSetValue"
-  >
-    <template #left>
-      <!-- @slot Use it to add something before the label. -->
-      <slot name="left" />
-    </template>
-
-    <!-- @slot Use it to add something instead of the label. -->
-    <template #default>
-      <input
-        :id="elementId"
-        v-model="selectedItem"
-        :name="getToggleName()"
-        :type="getToggleType()"
-        :value="value"
-        :disabled="getToggleDisabled()"
-        v-bind="toggleInputAttrs"
-      />
-
-      <!--
-        @slot Use it to add something instead of the label.
-        @binding {string} label
-      -->
-      <slot name="default" :label="label">
-        {{ label }}
-      </slot>
-    </template>
-
-    <template #right>
-      <!-- @slot Use it to add something after the label. -->
-      <slot name="right" />
-    </template>
-  </UButton>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, onMounted, ref, useId } from "vue";
 
 import UButton from "../ui.button/UButton.vue";
 import { getDefault } from "../utils/ui.ts";
 
-import { TYPE_RADIO } from "../ui.button-toggle/constants.js";
+import { TYPE_RADIO } from "../ui.button-toggle/constants.ts";
 
-import useAttrs from "./useAttrs.js";
-import defaultConfig from "./config.js";
-import { UToggleItem } from "./constants.js";
+import useAttrs from "./useAttrs.ts";
+import defaultConfig from "./config.ts";
+import { UToggleItem } from "./constants.ts";
 
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Selected value.
-   */
-  modelValue: {
-    type: [String, Number, Array],
-    default: "",
-  },
+import type { UToggleItemProps } from "./types.ts";
 
-  /**
-   * Value for checkbox state.
-   */
-  value: {
-    type: [String, Number],
-    default: "",
-  },
-
-  /**
-   * Toggle item label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Make toggle item disabled.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UToggleItem).disabled,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UToggleItemProps>(), {
+  disabled: getDefault<UToggleItemProps>(defaultConfig, UToggleItem).disabled,
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -175,3 +75,52 @@ function onClickSetValue() {
   emit("update:modelValue", props.value);
 }
 </script>
+
+<template>
+  <UButton
+    tabindex="0"
+    :for="elementId"
+    :no-ring="!getToggleSeparated()"
+    color="grayscale"
+    variant="secondary"
+    :label="label"
+    :size="getToggleSize()"
+    :round="getToggleRound()"
+    :block="getToggleBlock()"
+    :square="getToggleSquare()"
+    :disabled="getToggleDisabled()"
+    v-bind="toggleButtonAttrs"
+    @click="onClickSetValue"
+  >
+    <template #left>
+      <!-- @slot Use it to add something before the label. -->
+      <slot name="left" />
+    </template>
+
+    <!-- @slot Use it to add something instead of the label. -->
+    <template #default>
+      <input
+        :id="elementId"
+        v-model="selectedItem"
+        :name="getToggleName()"
+        :type="getToggleType()"
+        :value="value"
+        :disabled="getToggleDisabled()"
+        v-bind="toggleInputAttrs"
+      />
+
+      <!--
+        @slot Use it to add something instead of the label.
+        @binding {string} label
+      -->
+      <slot name="default" :label="label">
+        {{ label }}
+      </slot>
+    </template>
+
+    <template #right>
+      <!-- @slot Use it to add something after the label. -->
+      <slot name="right" />
+    </template>
+  </UButton>
+</template>

package/ui.button-toggle-item/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.button-toggle-item/storybook/{stories.js → stories.ts}

@@ -3,6 +3,13 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybo
 import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UToggleItemProps } from "../types.ts";
+
+interface UToggleItemArgs extends UToggleItemProps {
+  slotTemplate?: string;
+}
+
 /**
  * The `UToggleItem` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.button-toggle-item)
  */
@@ -18,9 +25,9 @@ export default {
     ...getArgTypes(UToggleItem.__name),
     value: { control: { type: "text" } },
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UToggleItemArgs> = (args: UToggleItemArgs) => ({
   components: { UToggleItem, UIcon },
   setup() {
     const slots = getSlotNames(UToggleItem.__name);
@@ -33,7 +40,7 @@ const DefaultTemplate = (args) => ({
         v-model="args.modelValue"
         name="toggle"
       >
-        ${args.slotTemplate || getSlotsFragment()}
+        ${args.slotTemplate || getSlotsFragment("")}
     </UToggleItem>
   `,
 });

package/ui.button-toggle-item/types.ts

@@ -0,0 +1,40 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UToggleItemProps {
+  /**
+   * Selected value.
+   */
+  modelValue?: string | number | Array<string | number>;
+
+  /**
+   * Value for checkbox state.
+   */
+  value?: string | number;
+
+  /**
+   * Toggle item label.
+   */
+  label?: string;
+
+  /**
+   * Make toggle item disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.button-toggle-item/{useAttrs.js → useAttrs.ts}

@@ -1,10 +1,22 @@
-import { computed, toValue } from "vue";
+import { computed, toValue, type Ref } from "vue";
 import useUI from "../composables/useUI.ts";
 
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
 
-export default function useAttrs(props, { isSelected, separated, variant }) {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
+import type { UseAttrs } from "../types.ts";
+import type { UToggleItemProps, Config } from "./types.ts";
+
+type itemState = {
+  isSelected: Ref<boolean>;
+  separated: Ref<boolean>;
+  variant: string;
+};
+
+export default function useAttrs(
+  props: UToggleItemProps,
+  { isSelected, separated, variant }: itemState,
+): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
     defaultConfig,
     () => props.config,
   );