vueless 0.0.579 → 0.0.580

package/ui.image-avatar/UAvatar.vue

@@ -1,24 +1,21 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import { UAvatar } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UAvatarProps } from "./types.ts";
+import type { UAvatarProps, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 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: "",
+  ...getDefaults<UAvatarProps, Config>(defaultConfig, UAvatar),
+  label: "",
 });
 
 const emit = defineEmits([
@@ -28,8 +25,6 @@ const emit = defineEmits([
   "click",
 ]);
 
-const { avatarAttrs, placeholderIconAttrs } = useAttrs(props);
-
 const labelFirstLetters = computed(() => {
   if (!props.label) return "";
 
@@ -55,6 +50,12 @@ const componentColor = computed(() => {
 function onClick(event: MouseEvent) {
   emit("click", event);
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { avatarAttrs, placeholderIconAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.image-avatar/types.ts

@@ -1,6 +1,8 @@
 import defaultConfig from "./config.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+import type { ComponentConfig } from "../types.ts";
+
+export type Config = typeof defaultConfig;
 
 export interface UAvatarProps {
   /**
@@ -62,7 +64,7 @@ export interface UAvatarProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.image-icon/UIcon.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent } from "vue";
+
+import useUI from "../composables/useUI.ts";
 import { vTooltip } from "../directives";
-import { getDefault } from "../utils/ui.ts";
+import { getDefaults } from "../utils/ui.ts";
 import { isSSR } from "../utils/helper.ts";
 import { VUELESS_ICONS_CACHED_DIR, VUELESS_LIBRARY } from "../constants.js";
 
 import { UIcon } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UIconProps } from "./types.ts";
+import type { AsyncComponentLoader } from "vue";
+import type { Props, Config, IconLibraries } from "./types.ts";
+import type { Props as TippyProps, Instance as TippyInstance } from "tippy.js";
 
 defineOptions({ inheritAttrs: 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 props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UIcon),
+  tooltipSettings: () => ({}) as TippyProps,
 });
 
 const emit = defineEmits([
@@ -28,8 +28,6 @@ const emit = defineEmits([
   "click",
 ]);
 
-const { config, iconAttrs } = useAttrs(props);
-
 const generatedIcons = computed(() => {
   return (
     Object.entries(
@@ -48,10 +46,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 as IconLibraries;
+
   const library = props.internal && isInternalIcon ? VUELESS_LIBRARY : userLibrary;
-  const weight = config.value?.defaults?.weight;
-  const style = config.value?.defaults?.style;
+  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;
@@ -60,12 +59,14 @@ const dynamicComponent = computed(() => {
   if (!src && !name) return "";
 
   /* Static import */
-  if (src) return src.render({}, {});
+  if (src?.render) {
+    return src.render({}, {});
+  }
 
   /* Dynamic import */
   if (!name) return "";
 
-  function getIcon(params: Array<string | number | undefined>) {
+  function getIcon(params: (string | number)[]) {
     const [, component] =
       generatedIcons.value.find(([path]) =>
         params.every(
@@ -111,18 +112,30 @@ const dynamicComponent = computed(() => {
   };
   /* eslint-enable prettier/prettier */
 
-  return defineAsyncComponent(libraries[library]);
+  return defineAsyncComponent(libraries[library] as AsyncComponentLoader);
 });
 
 const tooltipConfig = computed(() => ({
-  onShow: () => !!props.tooltip,
   ...props.tooltipSettings,
   content: props.tooltip,
+  onShow: (instance: TippyInstance) => {
+    const userOnShow = props.tooltipSettings?.onShow;
+
+    userOnShow && userOnShow(instance);
+
+    return !!props.tooltip;
+  },
 }));
 
 function onClick(event: MouseEvent) {
   emit("click", event);
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { config, iconAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.image-icon/storybook/stories.ts

@@ -9,9 +9,9 @@ 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";
+import type { Props } from "../types.ts";
 
-interface UIconArgs extends UIconProps {
+interface UIconArgs extends Props {
   slotTemplate?: string;
   enum: "color" | "size" | "variant";
 }

package/ui.image-icon/types.ts

@@ -1,8 +1,15 @@
 import defaultConfig from "./config.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+import type { DefineComponent, SVGAttributes } from "vue";
 
-export interface UIconProps {
+import type { ComponentConfig } from "../types.ts";
+import type { Props as TippyProps } from "tippy.js";
+
+export type Config = typeof defaultConfig;
+
+export type IconLibraries = "vueless" | "@material-symbols" | "bootstrap-icons" | "heroicons";
+
+export interface Props {
   /**
    * Icon name.
    */
@@ -11,7 +18,7 @@ export interface UIconProps {
   /**
    * Icon source (svg as a vue component).
    */
-  src?: object;
+  src?: DefineComponent<SVGAttributes>;
 
   /**
    * Icon color.
@@ -64,7 +71,7 @@ export interface UIconProps {
    * Tooltip settings.
    * [See all settings here](https://kabbouchi.github.io/vue-tippy/4.0/features/placement.html).
    */
-  tooltipSettings?: object;
+  tooltipSettings?: TippyProps;
 
   /**
    * Mark that Icon used inside Vueless components (used to get icons from vueless library).
@@ -74,7 +81,7 @@ export interface UIconProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.loader/ULoader.vue

@@ -1,26 +1,28 @@
 <script setup lang="ts">
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import { ULoader, ELLIPSES_AMOUNT } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { ULoaderProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<ULoaderProps>(), {
-  loading: getDefault<ULoaderProps>(defaultConfig, ULoader).loading,
-  color: getDefault<ULoaderProps>(defaultConfig, ULoader).color,
-  size: getDefault<ULoaderProps>(defaultConfig, ULoader).size,
+withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, ULoader),
 });
 
-const { loaderAttrs, ellipseAttrs, config } = useAttrs(props);
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { loaderAttrs, ellipseAttrs, config } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
   <Transition v-bind="config?.transition">
-    <div v-if="loading" v-bind="loaderAttrs">
+    <div v-if="loading" v-bind="loaderAttrs" :data-test="dataTest">
       <!-- @slot Use it to add something instead of the default loader. -->
       <slot>
         <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs" />

package/ui.loader/storybook/stories.ts

@@ -11,9 +11,9 @@ import UButton from "../../ui.button/UButton.vue";
 import { ref } from "vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { ULoaderProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface ULoaderArgs extends ULoaderProps {
+interface ULoaderArgs extends Props {
   slotTemplate?: string;
   enum: "size" | "color";
 }

package/ui.loader/types.ts

@@ -1,8 +1,10 @@
 import defaultConfig from "./config.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+import type { ComponentConfig } from "../types.ts";
 
-export interface ULoaderProps {
+export type Config = typeof defaultConfig;
+
+export interface Props {
   /**
    * Loader state (shown / hidden).
    */
@@ -43,5 +45,10 @@ export interface ULoaderProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
 }

package/ui.loader-overlay/ULoaderOverlay.vue

@@ -1,26 +1,24 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted } from "vue";
 
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 import { useDarkMode } from "../composables/useDarkMode.ts";
 
 import ULoader from "../ui.loader/ULoader.vue";
 
 import { ULoaderOverlay } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 import { useLoaderOverlay } from "./useLoaderOverlay.ts";
 
-import type { ULoaderOverlayProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<ULoaderOverlayProps>(), {
-  loading: getDefault<ULoaderOverlayProps>(defaultConfig, ULoaderOverlay).loading,
-  color: getDefault<ULoaderOverlayProps>(defaultConfig, ULoaderOverlay).color,
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, ULoaderOverlay),
 });
 
-const { overlayAttrs, nestedLoaderAttrs, config } = useAttrs(props);
 const { loaderOverlayOn, loaderOverlayOff, isLoading } = useLoaderOverlay();
 const { isDarkMode } = useDarkMode();
 
@@ -44,6 +42,12 @@ onUnmounted(() => {
 const showLoader = computed(() => {
   return props.loading === undefined ? (isLoading.value ?? false) : props.loading;
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { overlayAttrs, nestedLoaderAttrs, config } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.loader-overlay/storybook/stories.ts

@@ -12,9 +12,9 @@ import UCol from "../../ui.container-col/UCol.vue";
 import { useLoaderOverlay } from "../useLoaderOverlay.ts";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { ULoaderOverlayProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface ULoaderOverlayArgs extends ULoaderOverlayProps {
+interface ULoaderOverlayArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.loader-overlay/types.ts

@@ -1,8 +1,9 @@
 import defaultConfig from "./config.ts";
+import type { ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
-export interface ULoaderOverlayProps {
+export interface Props {
   /**
    * Loader state (shown / hidden).
    */
@@ -38,5 +39,5 @@ export interface ULoaderOverlayProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 }

package/ui.loader-progress/ULoaderProgress.vue

@@ -1,22 +1,22 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted } from "vue";
 
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import { clamp, queue, getRequestWithoutQuery } from "./utilLoaderProgress.ts";
 import { useLoaderProgress } from "./useLoaderProgress.ts";
-import useAttrs from "./useAttrs.ts";
 
 import { ULoaderProgress, MAXIMUM, SPEED, INFINITY_LOADING } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { ULoaderProgressProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<ULoaderProgressProps>(), {
-  color: getDefault<ULoaderProgressProps>(defaultConfig, ULoaderProgress).color,
-  size: getDefault<ULoaderProgressProps>(defaultConfig, ULoaderProgress).size,
-  loading: getDefault<ULoaderProgressProps>(defaultConfig, ULoaderProgress).loading,
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, ULoaderProgress),
+  resources: () => [],
 });
 
 const error = ref(false);
@@ -34,8 +34,6 @@ const {
   addRequestUrl,
 } = useLoaderProgress();
 
-const { stripeAttrs } = useAttrs(props);
-
 const isStarted = computed(() => {
   return typeof status.value === "number";
 });
@@ -101,7 +99,7 @@ function setLoaderOffHandler(event: CustomEvent<{ resource: string }>) {
 function onChangeRequestsQueue() {
   const isActiveRequests =
     requestQueue.value.includes(INFINITY_LOADING) ||
-    resourceNamesArray.value.some((resource) => {
+    resourceNamesArray.value.some((resource: string) => {
       return requestQueue.value.includes(resource);
     });
 
@@ -205,6 +203,12 @@ function increase(amount?: number) {
 function done() {
   set(100);
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { stripeAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.loader-progress/storybook/stories.ts

@@ -10,9 +10,9 @@ import { useLoaderProgress } from "../useLoaderProgress.ts";
 import { loaderProgressOff, loaderProgressOn } from "../utilLoaderProgress.ts";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { ULoaderProgressProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface ULoaderProgressArgs extends ULoaderProgressProps {
+interface ULoaderProgressArgs extends Props {
   slotTemplate?: string;
   enum: "color";
 }

package/ui.loader-progress/types.ts

@@ -1,8 +1,9 @@
 import defaultConfig from "./config.ts";
+import type { ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
-export interface ULoaderProgressProps {
+export interface Props {
   /**
    * Loader stripe color.
    */
@@ -47,5 +48,5 @@ export interface ULoaderProgressProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 }

package/ui.navigation-pagination/UPagination.vue

@@ -2,29 +2,26 @@
 import { computed } from "vue";
 import { range } from "lodash-es";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import UButton from "../ui.button/UButton.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import defaultConfig from "./config.ts";
 import { UPagination } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UPaginationProps, ButtonSize, IconSize } from "./types.ts";
+import type { Props, ButtonSize, IconSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UPaginationProps>(), {
-  perPage: getDefault<UPaginationProps>(defaultConfig, UPagination).perPage,
-  limit: getDefault<UPaginationProps>(defaultConfig, UPagination).limit,
-  variant: getDefault<UPaginationProps>(defaultConfig, UPagination).variant,
-  size: getDefault<UPaginationProps>(defaultConfig, UPagination).size,
-  disabled: getDefault<UPaginationProps>(defaultConfig, UPagination).disabled,
-  ellipsis: getDefault<UPaginationProps>(defaultConfig, UPagination).ellipsis,
-  showFirst: getDefault<UPaginationProps>(defaultConfig, UPagination).showFirst,
-  showLast: getDefault<UPaginationProps>(defaultConfig, UPagination).showLast,
-  dataTest: "",
-  config: () => ({}),
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UPagination),
+  modelValue: 1,
+  firstLabel: "",
+  prevLabel: "",
+  nextLabel: "",
+  lastLabel: "",
 });
 
 const emit = defineEmits([
@@ -41,21 +38,6 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
-const {
-  config,
-  paginationAttrs,
-  firstButtonAttrs,
-  lastButtonAttrs,
-  prevButtonAttrs,
-  nextButtonAttrs,
-  activeButtonAttrs,
-  inactiveButtonAttrs,
-  lastIconAttrs,
-  firstIconAttrs,
-  prevIconAttrs,
-  nextIconAttrs,
-} = useAttrs(props);
-
 const currentPage = computed({
   get: () => props.modelValue,
   set: (value) => {
@@ -137,6 +119,25 @@ function goToFirstPage() {
 function goToLastPage() {
   currentPage.value = totalPages.value;
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  config,
+  paginationAttrs,
+  firstButtonAttrs,
+  lastButtonAttrs,
+  prevButtonAttrs,
+  nextButtonAttrs,
+  activeButtonAttrs,
+  inactiveButtonAttrs,
+  lastIconAttrs,
+  firstIconAttrs,
+  prevIconAttrs,
+  nextIconAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -159,7 +160,7 @@ function goToLastPage() {
           v-if="!firstLabel"
           internal
           :size="iconSize"
-          :name="config.defaults?.firstIcon"
+          :name="config.defaults.firstIcon"
           v-bind="firstIconAttrs"
         />
       </slot>
@@ -182,7 +183,7 @@ function goToLastPage() {
           v-if="!prevLabel"
           internal
           :size="iconSize"
-          :name="config.defaults?.prevIcon"
+          :name="config.defaults.prevIcon"
           v-bind="prevIconAttrs"
         />
       </slot>
@@ -244,7 +245,7 @@ function goToLastPage() {
           v-if="!nextLabel"
           internal
           :size="iconSize"
-          :name="config.defaults?.nextIcon"
+          :name="config.defaults.nextIcon"
           v-bind="nextIconAttrs"
         />
       </slot>
@@ -268,7 +269,7 @@ function goToLastPage() {
           v-if="!lastLabel"
           internal
           :size="iconSize"
-          :name="config.defaults?.lastIcon"
+          :name="config.defaults.lastIcon"
           v-bind="lastIconAttrs"
         />
       </slot>

package/ui.navigation-pagination/storybook/stories.ts

@@ -8,9 +8,9 @@ import {
 import UPagination from "../../ui.navigation-pagination/UPagination.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UPaginationProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UPaginationArgs extends UPaginationProps {
+interface UPaginationArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.navigation-pagination/types.ts

@@ -1,11 +1,12 @@
 import defaultConfig from "./config.ts";
+import type { ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export type ButtonSize = "xs" | "sm" | "md";
 export type IconSize = "xs" | "sm" | "md";
 
-export interface UPaginationProps {
+export interface Props {
   /**
    * Current page number.
    */
@@ -79,7 +80,7 @@ export interface UPaginationProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.