vueless 0.0.532 → 0.0.533

package/ui.navigation-tabs/UTabs.vue

@@ -1,88 +1,21 @@
-<template>
-  <div :data-test="dataTest" v-bind="tabsAttrs">
-    <!-- @slot Use it to add the UTab component. -->
-    <slot>
-      <UTab
-        v-for="(item, index) in options"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-        :disabled="item.disabled"
-        :size="size"
-        :data-test="`${dataTest}-item-${index}`"
-        v-bind="itemAttrs"
-      />
-    </slot>
-  </div>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, provide } from "vue";
 
 import UTab from "../ui.navigation-tab/UTab.vue";
 import { getDefault } from "../utils/ui.ts";
 
-import { UTabs } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Selected tab value.
-   */
-  modelValue: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Tab options.
-   */
-  options: {
-    type: Array,
-    default: () => [
-      {
-        label: "",
-        value: "",
-        disabled: false,
-      },
-    ],
-  },
-
-  /**
-   * Tabs size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UTabs).size,
-  },
+import { UTabs } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-  /**
-   * Add the bottom line along the entire length.
-   */
-  underlined: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UTabs).underlined,
-  },
+import type { UTabsProps } 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<UTabsProps>(), {
+  size: getDefault<UTabsProps>(defaultConfig, UTabs).size,
+  underlined: getDefault<UTabsProps>(defaultConfig, UTabs).underlined,
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -98,9 +31,27 @@ const selectedItem = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-provide("setUTabsSelectedItem", (value) => (selectedItem.value = value));
+provide("setUTabsSelectedItem", (value: string) => (selectedItem.value = value));
 provide("getUTabsSelectedItem", () => selectedItem.value);
 provide("getUTabsSize", () => props.size);
 
 const { tabsAttrs, itemAttrs } = useAttrs(props);
 </script>
+
+<template>
+  <div :data-test="dataTest" v-bind="tabsAttrs">
+    <!-- @slot Use it to add the UTab component. -->
+    <slot>
+      <UTab
+        v-for="(item, index) in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+        :size="size"
+        :data-test="`${dataTest}-item-${index}`"
+        v-bind="itemAttrs"
+      />
+    </slot>
+  </div>
+</template>

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

@@ -2,6 +2,14 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybo
 
 import UTabs from "../../ui.navigation-tabs/UTabs.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UTabsProps } from "../types.ts";
+
+interface UTabsArgs extends UTabsProps {
+  slotTemplate?: string;
+  enum: "size";
+}
+
 /**
  * The `UTabs` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.navigation-tabs)
  */
@@ -20,9 +28,9 @@ export default {
   argTypes: {
     ...getArgTypes(UTabs.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UTabsArgs> = (args: UTabsArgs) => ({
   components: { UTabs },
   setup() {
     const slots = getSlotNames(UTabs.__name);
@@ -31,17 +39,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UTabs v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UTabs>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UTabsArgs> = (args: UTabsArgs, { argTypes }) => ({
   components: { UTabs },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

package/ui.navigation-tabs/types.ts

@@ -0,0 +1,37 @@
+import defaultConfig from "./config.ts";
+
+import type { UnknownObject } from "../types.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UTabsProps {
+  /**
+   * Selected tab value.
+   */
+  modelValue?: string;
+
+  /**
+   * Tab options.
+   */
+  options?: UnknownObject[];
+
+  /**
+   * Tabs size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Add the bottom line along the entire length.
+   */
+  underlined?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.navigation-tabs/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 { UTabsProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UTabsProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}