vueless 0.0.532 → 0.0.533

package/ui.navigation-progress/UProgress.vue

@@ -1,3 +1,62 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+
+import { getDefault } from "../utils/ui.ts";
+import useAttrs from "./useAttrs.ts";
+
+import defaultConfig from "./config.ts";
+import { UProgress, VARIANT } from "./constants.ts";
+
+import StepperProgress from "./StepperProgress.vue";
+import UHeader from "../ui.text-header/UHeader.vue";
+
+import type { UProgressProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UProgressProps>(), {
+  value: 0,
+  max: getDefault<UProgressProps>(defaultConfig, UProgress).max as number,
+  size: getDefault<UProgressProps>(defaultConfig, UProgress).size,
+  color: getDefault<UProgressProps>(defaultConfig, UProgress).color,
+  variant: getDefault<UProgressProps>(defaultConfig, UProgress).variant,
+  indicator: getDefault<UProgressProps>(defaultConfig, UProgress).indicator,
+  dataTest: "",
+});
+
+const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, stepperAttrs } = useAttrs(props);
+
+const isSteps = computed(() => Array.isArray(props.max));
+
+const realMax = computed(() => {
+  if (Array.isArray(props.max)) {
+    return props.max.length - 1;
+  }
+
+  return Number(props.max);
+});
+
+const isVariant = computed(() => ({
+  stepper: props.variant === VARIANT.stepper,
+  progress: props.variant === VARIANT.progress,
+}));
+
+const progressPercent = computed(() => {
+  const maxPercent = 100;
+  const currentPercent = (props.value / realMax.value) * maxPercent;
+
+  if (isVariant.value.progress) {
+    return `${currentPercent}%`;
+  }
+
+  return `${currentPercent} ${maxPercent}`;
+});
+
+function isActiveStep(index: number) {
+  return index === props.value;
+}
+</script>
+
 <template>
   <div v-bind="wrapperAttrs">
     <template v-if="isVariant.progress">
@@ -32,7 +91,7 @@
           :value="value"
           :max="max"
         >
-          <UHeader v-if="isVariant.stepper" :label="step" :size="size" />
+          <UHeader v-if="isVariant.stepper" :label="String(step)" :size="size" />
           <template v-else>{{ step }}</template>
         </slot>
       </template>
@@ -48,120 +107,3 @@
     />
   </div>
 </template>
-
-<script setup>
-import { computed } from "vue";
-
-import { getDefault } from "../utils/ui.ts";
-import useAttrs from "./useAttrs.js";
-
-import defaultConfig from "./config.js";
-import { UProgress, VARIANT } from "./constants.js";
-
-import StepperProgress from "./StepperProgress.vue";
-import UHeader from "../ui.text-header/UHeader.vue";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Progress value (current step).
-   */
-  value: {
-    type: Number,
-    required: true,
-    default: 0,
-  },
-
-  /**
-   * Progress max amount of steps.
-   */
-  max: {
-    type: [Number, Array],
-    default: 100,
-  },
-
-  /**
-   * Progress size.
-   * @values 2xs, xs, sm, md, lg, xl, 2xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UProgress).size,
-  },
-
-  /**
-   * Progress color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
-   */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, UProgress).color,
-  },
-
-  /**
-   * Progress variant.
-   * @values stepper, progress
-   */
-  variant: {
-    type: String,
-    default: getDefault(defaultConfig, UProgress).variant,
-  },
-
-  /**
-   * Progress indicator visibility.
-   */
-  indicator: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UProgress).indicator,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, stepperAttrs } = useAttrs(props);
-
-const isSteps = computed(() => Array.isArray(props.max));
-
-const realMax = computed(() => {
-  if (isSteps.value) {
-    return props.max.length - 1;
-  }
-
-  return Number(props.max);
-});
-
-const isVariant = computed(() => ({
-  stepper: props.variant === VARIANT.stepper,
-  progress: props.variant === VARIANT.progress,
-}));
-
-const progressPercent = computed(() => {
-  const maxPercent = 100;
-  const currentPercent = (props.value / realMax.value) * maxPercent;
-
-  if (isVariant.value.progress) {
-    return `${currentPercent}%`;
-  }
-
-  return `${currentPercent} ${maxPercent}`;
-});
-
-function isActiveStep(index) {
-  return index === props.value;
-}
-</script>

package/ui.navigation-progress/{config.js → config.ts}

@@ -102,6 +102,7 @@ export default /*tw*/ {
     },
   },
   defaults: {
+    max: 100,
     color: "brand",
     size: "md",
     variant: "progress",

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

@@ -5,6 +5,16 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UProgressProps } from "../types.ts";
+
+interface UProgressArgs extends UProgressProps {
+  slotTemplate?: string;
+  enum: "color" | "size";
+  iterator?: number;
+  progress?: number;
+}
+
 /**
  * The `UProgress` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.navigation-progress)
  */
@@ -15,9 +25,9 @@ export default {
   argTypes: {
     ...getArgTypes(UProgress.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UProgressArgs> = (args: UProgressArgs) => ({
   components: { UCol, UProgress, UButton, UIcon },
   setup() {
     const slots = getSlotNames(UProgress.__name);
@@ -26,29 +36,31 @@ const DefaultTemplate = (args) => ({
     args.iterator = args.max ? 1 : 10;
 
     function updateProgress() {
-      args.value = args.value < (args.max?.length - 1 || 100) ? args.value + args.iterator : 0;
+      const maxValue = Array.isArray(args.max) ? args.max.length - 1 : 100;
+
+      args.value = args.value < maxValue ? args.value + (args.iterator || 0) : 0;
     }
 
     return { slots, args, updateProgress };
   },
   template: `
     <UCol>
-      <UProgress v-bind="args">${args.slotTemplate || getSlotsFragment()}</UProgress>
+      <UProgress v-bind="args">${args.slotTemplate || getSlotsFragment("")}</UProgress>
       <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
     </UCol>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UProgressArgs> = (args: UProgressArgs, { argTypes }) => ({
   components: { UCol, UButton, UProgress },
   setup() {
     args.progress = 10;
 
     function updateProgress() {
-      args.progress = args.progress < 100 ? args.progress + 10 : 0;
+      args.progress = args.progress && args.progress < 100 ? args.progress + 10 : 0;
     }
 
-    return { args, updateProgress, options: argTypes[args.enum].options };
+    return { args, updateProgress, options: argTypes?.[args.enum]?.options };
   },
   template: `
     <UCol>

package/ui.navigation-progress/types.ts

@@ -0,0 +1,93 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UProgressProps {
+  /**
+   * Progress value (current step).
+   */
+  value: number;
+
+  /**
+   * Progress max amount of steps.
+   */
+  max?: number | (string | number)[];
+
+  /**
+   * Progress size.
+   */
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+  /**
+   * Progress color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "white";
+
+  /**
+   * Progress variant.
+   */
+  variant?: "stepper" | "progress";
+
+  /**
+   * Progress indicator visibility.
+   */
+  indicator?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}
+
+export interface StepperProgressProps {
+  /**
+   * Stepper progress percent value.
+   */
+  progressPercent: string;
+
+  /**
+   * Stepper progress value (current step).
+   */
+  value: number;
+
+  /**
+   * Stepper progress color.
+   */
+  color: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.navigation-progress/{useAttrs.js → useAttrs.ts}

@@ -1,10 +1,13 @@
 import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
 
-export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
+import type { UseAttrs } from "../types.ts";
+import type { UProgressProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UProgressProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
     defaultConfig,
     () => props.config,
   );

package/ui.navigation-tab/UTab.vue

@@ -1,20 +1,13 @@
-<template>
-  <div v-bind="tabAttrs" :data-test="dataTest" @click="onClickSetValue">
-    <!-- @slot Use it to add something instead of the label. -->
-    <slot>
-      {{ label }}
-    </slot>
-  </div>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, toValue } from "vue";
 
 import { getDefault } from "../utils/ui.ts";
 
-import { UTab } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
+import { UTab } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UTabProps } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -22,47 +15,9 @@ const setUTabsSelectedItem = inject("setUTabsSelectedItem", null);
 const getUTabsSelectedItem = inject("getUTabsSelectedItem", null);
 const getUTabsSize = inject("getUTabsSize", null);
 
-const props = defineProps({
-  /**
-   * Tab label.
-   * @ignore
-   */
-  label: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * Tab value.
-   */
-  value: {
-    type: [String, Number],
-    default: "",
-  },
-
-  /**
-   * Make tab disabled.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UTab).disabled,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UTabProps>(), {
+  disabled: getDefault<UTabProps>(defaultConfig, UTab).disabled,
+  dataTest: "",
 });
 
 const selected = computed(() => {
@@ -81,3 +36,12 @@ async function onClickSetValue() {
   }
 }
 </script>
+
+<template>
+  <div v-bind="tabAttrs" :data-test="dataTest" @click="onClickSetValue">
+    <!-- @slot Use it to add something instead of the label. -->
+    <slot>
+      {{ label }}
+    </slot>
+  </div>
+</template>

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

@@ -3,6 +3,13 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybo
 import UTab from "../../ui.navigation-tab/UTab.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UTabProps } from "../types.ts";
+
+interface UTabArgs extends UTabProps {
+  slotTemplate?: string;
+}
+
 /**
  * The `UTab` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.navigation-tab)
  */
@@ -16,9 +23,9 @@ export default {
   argTypes: {
     ...getArgTypes(UTab.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UTabArgs> = (args: UTabArgs) => ({
   components: { UTab, UIcon },
   setup() {
     const slots = getSlotNames(UTab.__name);
@@ -27,7 +34,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UTab v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UTab>
   `,
 });
@@ -40,12 +47,10 @@ Disabled.args = { disabled: true };
 
 export const SlotDefault = DefaultTemplate.bind({});
 SlotDefault.args = {
-  label: "Tag",
   slotTemplate: `
     <template #default>
       <div class="flex items-center">
         <UIcon name="star" size="sm" />
-        {{label}}
       </div>
     </template>
   `,

package/ui.navigation-tab/types.ts

@@ -0,0 +1,30 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UTabProps {
+  /**
+   * Tab label.
+   */
+  label: string;
+
+  /**
+   * Tab value.
+   */
+  value?: string | number;
+
+  /**
+   * Make tab disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.navigation-tab/{useAttrs.js → useAttrs.ts}

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