vueless 0.0.531 → 0.0.533

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.531",
+  "version": "0.0.533",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -32,6 +32,15 @@ import UModalConfig from "./ui.container-modal/config.ts";
 import UModalConfirmConfig from "./ui.container-modal-confirm/config.ts";
 import UPageConfig from "./ui.container-page/config.ts";
 import URowConfig from "./ui.container-row/config.ts";
+import ULoaderConfig from "./ui.loader/config.ts";
+import ULoaderOverlayConfig from "./ui.loader-overlay/config.ts";
+import ULoaderProgressConfig from "./ui.loader-progress/config.ts";
+import UPaginationConfig from "./ui.navigation-pagination/config.ts";
+import UProgressConfig from "./ui.navigation-progress/config.ts";
+import UTabConfig from "./ui.navigation-tab/config.ts";
+import UTabsConfig from "./ui.navigation-tabs/config.ts";
+import UAvatarConfig from "./ui.image-avatar/config.ts";
+import UIconConfig from "./ui.image-icon/config.ts";
 
 import type { ComputedRef, MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
@@ -175,6 +184,15 @@ export interface Components {
   UModalConfirm?: Partial<typeof UModalConfirmConfig>;
   UPage?: Partial<typeof UPageConfig>;
   URow?: Partial<typeof URowConfig>;
+  ULoader?: Partial<typeof ULoaderConfig>;
+  ULoaderOverlay?: Partial<typeof ULoaderOverlayConfig>;
+  ULoaderProgress?: Partial<typeof ULoaderProgressConfig>;
+  UPagination?: Partial<typeof UPaginationConfig>;
+  UProgress?: Partial<typeof UProgressConfig>;
+  UTab?: Partial<typeof UTabConfig>;
+  UTabs?: Partial<typeof UTabsConfig>;
+  UAvatar?: Partial<typeof UAvatarConfig>;
+  UIcon?: Partial<typeof UIconConfig>;
 }
 
 export interface Directives {

package/ui.container-group/types.ts

@@ -10,7 +10,6 @@ export interface UGroupProps {
 
   /**
    * The distance between nested elements.
-   * @values none, xs, sm, md, lg, xl
    */
   gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
 

package/ui.image-avatar/UAvatar.vue

@@ -1,125 +1,24 @@
-<template>
-  <div
-    :title="label"
-    :style="backgroundImage"
-    :data-test="dataTest"
-    v-bind="avatarAttrs"
-    @click="onClick"
-  >
-    <template v-if="!backgroundImage">
-      <template v-if="labelFirstLetters">{{ labelFirstLetters }}</template>
-      <!--
-        @slot Use it to add something instead of the avatar image placeholder.
-        @binding {string} icon-name
-        @binding {string} icon-color
-        @binding {string} icon-size
-      -->
-      <slot
-        v-else
-        name="placeholder"
-        :icon-name="placeholderIcon"
-        :icon-color="componentColor"
-        :icon-size="size"
-      >
-        <UIcon
-          internal
-          :size="size"
-          :color="componentColor"
-          :name="placeholderIcon"
-          v-bind="placeholderIconAttrs"
-        />
-      </slot>
-    </template>
-  </div>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import { getDefault } from "../utils/ui.ts";
 
-import { UAvatar } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Avatar image source.
-   */
-  src: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Avatar label (username, nickname, etc.).
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Avatar placeholder icon.
-   */
-  placeholderIcon: {
-    type: String,
-    default: getDefault(defaultConfig, UAvatar).placeholderIcon,
-  },
-
-  /**
-   * Avatar size.
-   * @values 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UAvatar).size,
-  },
-
-  /**
-   * Avatar 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, UAvatar).color,
-  },
+import { UAvatar } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-  /**
-   * Avatar corner rounding.
-   * @values dynamic, none, sm, md, lg, full
-   */
-  rounded: {
-    type: String,
-    default: getDefault(defaultConfig, UAvatar).rounded,
-  },
+import type { UAvatarProps } from "./types.ts";
 
-  /**
-   * Add border to the avatar.
-   */
-  bordered: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UAvatar).bordered,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UAvatarProps>(), {
+  placeholderIcon: getDefault<UAvatarProps>(defaultConfig, UAvatar).placeholderIcon,
+  size: getDefault<UAvatarProps>(defaultConfig, UAvatar).size,
+  color: getDefault<UAvatarProps>(defaultConfig, UAvatar).color,
+  rounded: getDefault<UAvatarProps>(defaultConfig, UAvatar).rounded,
+  bordered: getDefault<UAvatarProps>(defaultConfig, UAvatar).bordered,
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -132,6 +31,8 @@ const emit = defineEmits([
 const { avatarAttrs, placeholderIconAttrs } = useAttrs(props);
 
 const labelFirstLetters = computed(() => {
+  if (!props.label) return "";
+
   const [firstWord, secondWord] = props.label.split(" ");
 
   const firstWordLetter = firstWord ? firstWord[0].toUpperCase() : "";
@@ -151,7 +52,42 @@ const componentColor = computed(() => {
   return props.color === "white" ? "grayscale" : props.color;
 });
 
-function onClick(event) {
+function onClick(event: Event) {
   emit("click", event);
 }
 </script>
+
+<template>
+  <div
+    :title="label"
+    :style="backgroundImage"
+    :data-test="dataTest"
+    v-bind="avatarAttrs"
+    @click="onClick"
+  >
+    <template v-if="!backgroundImage">
+      <template v-if="labelFirstLetters">{{ labelFirstLetters }}</template>
+      <!--
+        @slot Use it to add something instead of the avatar image placeholder.
+        @binding {string} icon-name
+        @binding {string} icon-color
+        @binding {string} icon-size
+      -->
+      <slot
+        v-else
+        name="placeholder"
+        :icon-name="placeholderIcon"
+        :icon-color="componentColor"
+        :icon-size="size"
+      >
+        <UIcon
+          internal
+          :size="size"
+          :color="componentColor"
+          :name="placeholderIcon"
+          v-bind="placeholderIconAttrs"
+        />
+      </slot>
+    </template>
+  </div>
+</template>

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

@@ -5,6 +5,14 @@ import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import ULoader from "../../ui.loader/ULoader.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UAvatarProps } from "../types.ts";
+
+interface UAvatarArgs extends UAvatarProps {
+  slotTemplate?: string;
+  enum: "size" | "rounded" | "color";
+}
+
 /**
  * The `UAvatar` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.image-avatar)
  */
@@ -15,9 +23,9 @@ export default {
   argTypes: {
     ...getArgTypes(UAvatar.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UAvatarArgs> = (args: UAvatarArgs) => ({
   components: { UAvatar, ULoader },
   setup() {
     const slots = getSlotNames(UAvatar.__name);
@@ -26,17 +34,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UAvatar v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UAvatar>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UAvatarArgs> = (args: UAvatarArgs, { argTypes }) => ({
   components: { UCol, URow, UAvatar },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

package/ui.image-avatar/types.ts

@@ -0,0 +1,71 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UAvatarProps {
+  /**
+   * Avatar image source.
+   */
+  src?: string;
+
+  /**
+   * Avatar label (username, nickname, etc.).
+   */
+  label?: string;
+
+  /**
+   * Avatar placeholder icon.
+   */
+  placeholderIcon?: string;
+
+  /**
+   * Avatar size.
+   */
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+
+  /**
+   * Avatar color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "white";
+
+  /**
+   * Avatar corner rounding.
+   */
+  rounded?: "dynamic" | "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Add border to the avatar.
+   */
+  bordered?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

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

package/ui.image-icon/UIcon.vue

@@ -1,120 +1,24 @@
-<template>
-  <component
-    :is="dynamicComponent"
-    v-tooltip="tooltipConfig"
-    tabindex="-1"
-    v-bind="iconAttrs"
-    :data-test="dataTest"
-    @click="onClick"
-  />
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, defineAsyncComponent } from "vue";
 import { vTooltip } from "../directives";
 import { getDefault } from "../utils/ui.ts";
 import { isSSR } from "../utils/helper.ts";
 import { VUELESS_ICONS_CACHED_DIR, VUELESS_LIBRARY } from "../constants.js";
 
-import { UIcon } from "./constants.js";
+import { UIcon } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Icon name.
-   */
-  name: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Icon source (svg as a vue component).
-   */
-  src: {
-    type: Object,
-    default: () => {},
-  },
-
-  /**
-   * Icon color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, black, white
-   */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, UIcon).color,
-  },
+import useAttrs from "./useAttrs.ts";
 
-  /**
-   * Icon size.
-   * @values 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UIcon).size,
-  },
+import type { UIconProps } from "./types.ts";
 
-  /**
-   * Icon variant.
-   * @values light, default, dark
-   */
-  variant: {
-    type: String,
-    default: getDefault(defaultConfig, UIcon).variant,
-  },
-
-  /**
-   * Make the icon interactive (cursor pointer, etc.).
-   */
-  interactive: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UIcon).interactive,
-  },
-
-  /**
-   * Add tooltip text on hover.
-   */
-  tooltip: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Tooltip settings.
-   * [See all settings here](https://kabbouchi.github.io/vue-tippy/4.0/features/placement.html).
-   */
-  tooltipSettings: {
-    type: Object,
-    default: () => {},
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Mark that Icon used inside Vueless components (used to get icons from vueless library).
-   * @ignore
-   */
-  internal: {
-    type: Boolean,
-    default: false,
-  },
+const props = withDefaults(defineProps<UIconProps>(), {
+  color: getDefault<UIconProps>(defaultConfig, UIcon).color,
+  size: getDefault<UIconProps>(defaultConfig, UIcon).size,
+  variant: getDefault<UIconProps>(defaultConfig, UIcon).variant,
+  interactive: getDefault<UIconProps>(defaultConfig, UIcon).interactive,
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -144,11 +48,11 @@ const dynamicComponent = computed(() => {
     generatedIcons.value.find(([path]) => path.includes(VUELESS_LIBRARY + "/" + props.name)),
   );
 
-  const userLibrary = config.value.defaults.library;
+  const userLibrary = config.value?.defaults?.library;
   const library = props.internal && isInternalIcon ? VUELESS_LIBRARY : userLibrary;
-  const weight = config.value.defaults.weight;
-  const style = config.value.defaults.style;
-  const isFill = props.name.endsWith(FILL_SUFFIX);
+  const weight = config.value?.defaults?.weight;
+  const style = config.value?.defaults?.style;
+  const isFill = props.name?.endsWith(FILL_SUFFIX);
   const name = props.name;
   const src = props.src;
 
@@ -161,7 +65,7 @@ const dynamicComponent = computed(() => {
   /* Dynamic import */
   if (!name) return "";
 
-  function getIcon(params) {
+  function getIcon(params: Array<string | number | undefined>) {
     const [, component] =
       generatedIcons.value.find(([path]) =>
         params.every(
@@ -216,7 +120,18 @@ const tooltipConfig = computed(() => ({
   content: props.tooltip,
 }));
 
-function onClick(event) {
+function onClick(event: Event) {
   emit("click", event);
 }
 </script>
+
+<template>
+  <component
+    :is="dynamicComponent"
+    v-tooltip="tooltipConfig"
+    tabindex="-1"
+    v-bind="iconAttrs"
+    :data-test="dataTest"
+    @click="onClick"
+  />
+</template>

package/ui.image-icon/storybook/Docs.mdx

@@ -1,7 +1,7 @@
 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 * as stories from "./stories.ts";
 import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />

package/ui.image-icon/storybook/{stories.js → stories.ts}

@@ -3,6 +3,14 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybo
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UIconProps } from "../types.ts";
+
+interface UIconArgs extends UIconProps {
+  slotTemplate?: string;
+  enum: "color" | "size" | "variant";
+}
+
 /**
  * The `UIcon` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.image-icon)
  */
@@ -16,9 +24,9 @@ export default {
   argTypes: {
     ...getArgTypes(UIcon.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UIconArgs> = (args: UIconArgs) => ({
   components: { UIcon },
   setup() {
     const slots = getSlotNames(UIcon.__name);
@@ -27,17 +35,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UIcon v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UIcon>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UIconArgs> = (args: UIconArgs, { argTypes }) => ({
   components: { UIcon, URow },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `