vueless 0.0.579 → 0.0.580

package/ui.navigation-progress/StepperProgress.vue

@@ -1,27 +1,40 @@
 <script setup lang="ts">
-import colors from "tailwindcss/colors.js";
 import { computed } from "vue";
+import colors from "tailwindcss/colors.js";
 
-import { GRAY_COLORS } from "../constants.js";
+import useUI from "../composables/useUI.ts";
 
-import useAttrs from "./useAttrs.ts";
+import defaultConfig from "./config.ts";
+import { GRAY_COLORS } from "../constants.js";
 
-import type { StepperProgressProps } from "./types.ts";
+import type { StepperProgressProps, Config } from "./types.ts";
 
 const props = withDefaults(defineProps<StepperProgressProps>(), {
   dataTest: "",
 });
 
-const { stepperCircleAttrs, stepperCountAttrs, stepperGradientAttrs, stepperSvgAttrs } =
-  useAttrs(props);
-
 const stepperColor = computed(() => {
-  return colors[props.color]
-    ? colors[props.color][500]
-    : GRAY_COLORS.includes(props.color)
-      ? colors[props.color][900]
-      : colors.zinc[900];
+  const isValidColor = (color: string): color is keyof typeof colors => color in colors;
+
+  const isGrayColor = (color: string): color is keyof typeof colors => GRAY_COLORS.includes(color);
+
+  if (isValidColor(props.color)) {
+    return colors[props.color][500];
+  }
+
+  if (isGrayColor(props.color)) {
+    return colors[props.color][900];
+  }
+
+  return colors.zinc[900];
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { stepperCircleAttrs, stepperCountAttrs, stepperGradientAttrs, stepperSvgAttrs } =
+  useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.navigation-progress/UProgress.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import { getDefault } from "../utils/ui.ts";
-import useAttrs from "./useAttrs.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import defaultConfig from "./config.ts";
 import { UProgress, VARIANT } from "./constants.ts";
@@ -10,22 +10,15 @@ import { UProgress, VARIANT } from "./constants.ts";
 import StepperProgress from "./StepperProgress.vue";
 import UHeader from "../ui.text-header/UHeader.vue";
 
-import type { UProgressProps, HeaderSize } from "./types.ts";
+import type { UProgressProps, HeaderSize, Config } 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: "",
+  ...getDefaults<UProgressProps, Config>(defaultConfig, UProgress),
+  max: 100,
 });
 
-const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, stepperAttrs } = useAttrs(props);
-
 const headerSize = computed(() => {
   const sizes = {
     "2xs": "xs",
@@ -69,6 +62,13 @@ const progressPercent = computed(() => {
 function isActiveStep(index: number) {
   return index === props.value;
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, stepperAttrs } =
+  useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.navigation-progress/types.ts

@@ -1,6 +1,7 @@
 import defaultConfig from "./config.ts";
+import type { ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export type HeaderSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 
@@ -59,7 +60,7 @@ export interface UProgressProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.
@@ -86,7 +87,7 @@ export interface StepperProgressProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.navigation-tab/UTab.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { computed, inject, toValue } from "vue";
 
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import { UTab } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UTabProps, UTabSize } from "./types.ts";
+import type { Props, UTabSize, Config } from "./types.ts";
 import type { SetUTabsSelectedItem } from "../ui.navigation-tabs/types.ts";
 
 defineOptions({ inheritAttrs: false });
@@ -16,9 +16,8 @@ const setUTabsSelectedItem = inject<SetUTabsSelectedItem | null>("setUTabsSelect
 const getUTabsSelectedItem = inject("getUTabsSelectedItem", null);
 const getUTabsSize = inject("getUTabsSize", null);
 
-const props = withDefaults(defineProps<UTabProps>(), {
-  disabled: getDefault<UTabProps>(defaultConfig, UTab).disabled,
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UTab),
 });
 
 const selected = computed(() => {
@@ -26,16 +25,26 @@ const selected = computed(() => {
 });
 
 const size = computed(() => {
-  return toValue(getUTabsSize) || getDefault<UTabSize>(defaultConfig, UTab).size;
+  return toValue(getUTabsSize) || getDefaults<UTabSize, Config>(defaultConfig, UTab).size;
 });
 
-const { tabAttrs } = useAttrs(props, { selected, size });
-
 async function onClickSetValue() {
   if (!props.disabled && setUTabsSelectedItem) {
     setUTabsSelectedItem(props.value ?? "");
   }
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  size: size.value,
+  /* component state, not a props */
+  selected: selected.value,
+}));
+
+const { tabAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>

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

@@ -9,9 +9,9 @@ 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";
+import type { Props } from "../types.ts";
 
-interface UTabArgs extends UTabProps {
+interface UTabArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.navigation-tab/types.ts

@@ -1,12 +1,13 @@
 import defaultConfig from "./config.ts";
+import type { ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export interface UTabSize {
   size: string;
 }
 
-export interface UTabProps {
+export interface Props {
   /**
    * Tab label.
    */
@@ -25,7 +26,7 @@ export interface UTabProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.navigation-tabs/UTabs.vue

@@ -1,21 +1,22 @@
 <script setup lang="ts">
 import { computed, provide } from "vue";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import UTab from "../ui.navigation-tab/UTab.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import { UTabs } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UTabsProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UTabsProps>(), {
-  size: getDefault<UTabsProps>(defaultConfig, UTabs).size,
-  underlined: getDefault<UTabsProps>(defaultConfig, UTabs).underlined,
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UTabs),
+  modelValue: "",
+  options: () => [],
 });
 
 const emit = defineEmits([
@@ -35,7 +36,11 @@ provide("setUTabsSelectedItem", (value: string) => (selectedItem.value = value))
 provide("getUTabsSelectedItem", () => selectedItem.value);
 provide("getUTabsSize", () => props.size);
 
-const { tabsAttrs, itemAttrs } = useAttrs(props);
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { tabsAttrs, itemAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

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

@@ -8,9 +8,9 @@ import {
 import UTabs from "../../ui.navigation-tabs/UTabs.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UTabsProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UTabsArgs extends UTabsProps {
+interface UTabsArgs extends Props {
   slotTemplate?: string;
   enum: "size";
 }

package/ui.navigation-tabs/types.ts

@@ -1,8 +1,8 @@
 import defaultConfig from "./config.ts";
 
-import type { UnknownObject, UnknownArray } from "../types.ts";
+import type { ComponentConfig, UnknownObject, UnknownArray } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export type SetUTabsSelectedItem = (
   value: string | number | boolean | UnknownArray | UnknownObject,
@@ -11,10 +11,10 @@ export type SetUTabsSelectedItem = (
 interface UTabsOption {
   value: string | number;
   label: string;
-  disabled: boolean;
+  disabled?: boolean;
 }
 
-export interface UTabsProps {
+export interface Props {
   /**
    * Selected tab value.
    */
@@ -38,7 +38,7 @@ export interface UTabsProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.other-dot/UDot.vue

@@ -1,21 +1,23 @@
 <script setup lang="ts">
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import { UDot } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UDotProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UDotProps>(), {
-  color: getDefault<UDotProps>(defaultConfig, UDot).color,
-  size: getDefault<UDotProps>(defaultConfig, UDot).size,
-  dataTest: "",
+withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UDot),
 });
 
-const { dotAttrs } = useAttrs(props);
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { dotAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.other-dot/storybook/stories.ts

@@ -11,9 +11,9 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UDotProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UDotArgs extends UDotProps {
+interface UDotArgs extends Props {
   slotTemplate?: string;
   enum: "size" | "color";
 }

package/ui.other-dot/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 UDotProps {
+export interface Props {
   /**
    * Dot color.
    */
@@ -37,7 +38,7 @@ export interface UDotProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.text-alert/UAlert.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from "vue";
 
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -10,21 +11,13 @@ import UText from "../ui.text-block/UText.vue";
 
 import { UAlert } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UAlertProps, TextSize, CloseIconSize } from "./types.ts";
+import type { Props, TextSize, CloseIconSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UAlertProps>(), {
-  variant: getDefault<UAlertProps>(defaultConfig, UAlert).variant,
-  bordered: getDefault<UAlertProps>(defaultConfig, UAlert).bordered,
-  size: getDefault<UAlertProps>(defaultConfig, UAlert).size,
-  color: getDefault<UAlertProps>(defaultConfig, UAlert).color,
-  timeout: getDefault<UAlertProps>(defaultConfig, UAlert).timeout,
-  closable: getDefault<UAlertProps>(defaultConfig, UAlert).closable,
-  dataTest: "",
-  config: () => ({}),
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UAlert),
 });
 
 const emit = defineEmits([
@@ -36,19 +29,6 @@ const emit = defineEmits([
 
 const isShownAlert = ref(true);
 
-const {
-  config,
-  wrapperAttrs,
-  bodyAttrs,
-  contentAttrs,
-  textAttrs,
-  titleAttrs,
-  descriptionAttrs,
-  closeButtonAttrs,
-  closeIconAttrs,
-  contentWrapperAttrs,
-} = useAttrs(props);
-
 onMounted(() => {
   if (props.timeout > 0) {
     setTimeout(() => onClickClose(), props.timeout);
@@ -94,6 +74,23 @@ const iconColor = computed(() => {
 
   return props.variant === "primary" ? "white" : props.color;
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  config,
+  wrapperAttrs,
+  bodyAttrs,
+  contentAttrs,
+  textAttrs,
+  titleAttrs,
+  descriptionAttrs,
+  closeButtonAttrs,
+  closeIconAttrs,
+  contentWrapperAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -154,7 +151,7 @@ const iconColor = computed(() => {
         -->
         <slot
           name="close"
-          :icon-name="config?.defaults?.closeIcon"
+          :icon-name="config.defaults.closeIcon"
           :icon-size="closeIconSize"
           :icon-color="iconColor"
         >
@@ -162,7 +159,7 @@ const iconColor = computed(() => {
             internal
             :size="closeIconSize"
             :color="iconColor"
-            :name="config.defaults?.closeIcon"
+            :name="config.defaults.closeIcon"
             v-bind="closeIconAttrs"
             :data-test="`${dataTest}-button`"
           />

package/ui.text-alert/storybook/stories.ts

@@ -12,9 +12,9 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UAlertProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UAlertArgs extends UAlertProps {
+interface UAlertArgs extends Props {
   slotTemplate?: string;
   enum: "size" | "color" | "variant";
 }

package/ui.text-alert/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 TextSize = "sm" | "md" | "lg";
 export type CloseIconSize = "3xs" | "2xs" | "xs" | "sm";
 
-export interface UAlertProps {
+export interface Props {
   /**
    * Alert title.
    */
@@ -70,7 +71,7 @@ export interface UAlertProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.text-badge/UBadge.vue

@@ -1,25 +1,22 @@
 <script setup lang="ts">
-import { useTemplateRef, computed } from "vue";
+import { useTemplateRef, computed, useSlots } from "vue";
+
+import useUI from "../composables/useUI.ts";
+import { hasSlotContent } from "../utils/helper.ts";
+import { getDefaults } from "../utils/ui.ts";
 
-import { getDefault } from "../utils/ui.ts";
 import UIcon from "../ui.image-icon/UIcon.vue";
 
 import { UBadge } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 import defaultConfig from "./config.ts";
 
-import type { UBadgeProps, IconSize } from "./types.ts";
+import type { Props, IconSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UBadgeProps>(), {
-  variant: getDefault<UBadgeProps>(defaultConfig, UBadge).variant,
-  bordered: getDefault<UBadgeProps>(defaultConfig, UBadge).bordered,
-  size: getDefault<UBadgeProps>(defaultConfig, UBadge).size,
-  color: getDefault<UBadgeProps>(defaultConfig, UBadge).color,
-  round: getDefault<UBadgeProps>(defaultConfig, UBadge).round,
-  tabindex: getDefault<UBadgeProps>(defaultConfig, UBadge).tabindex,
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UBadge),
+  label: "",
 });
 
 const emit = defineEmits([
@@ -44,7 +41,7 @@ const emit = defineEmits([
   "click",
 ]);
 
-const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs } = useAttrs(props);
+const slots = useSlots();
 
 const wrapperRef = useTemplateRef<HTMLElement>("wrapper");
 
@@ -85,6 +82,21 @@ defineExpose({
    */
   wrapperRef,
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  tabindex: Boolean(~Number(props.tabindex)),
+  leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
+  rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
+}));
+
+const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs } = useUI<Config>(
+  defaultConfig,
+  mutatedProps,
+);
 </script>
 
 <template>

package/ui.text-badge/storybook/stories.ts

@@ -11,9 +11,9 @@ import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UBadgeProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UBadgeArgs extends UBadgeProps {
+interface UBadgeArgs extends Props {
   slotTemplate?: string;
   enum: "variant" | "size";
 }

package/ui.text-badge/types.ts

@@ -1,10 +1,11 @@
 import defaultConfig from "./config.ts";
+import type { ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export type IconSize = "3xs" | "2xs" | "xs";
 
-export interface UBadgeProps {
+export interface Props {
   /**
    *  Badge label.
    */
@@ -79,7 +80,7 @@ export interface UBadgeProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.text-block/UText.vue

@@ -1,23 +1,24 @@
 <script setup lang="ts">
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 
 import { UText } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UTextProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UTextProps>(), {
-  size: getDefault<UTextProps>(defaultConfig, UText).size,
-  align: getDefault<UTextProps>(defaultConfig, UText).align,
-  line: getDefault<UTextProps>(defaultConfig, UText).line,
-  dataTest: "",
+withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UText),
 });
 
-const { wrapperAttrs, htmlAttrs } = useAttrs(props);
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { wrapperAttrs, htmlAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.text-block/storybook/stories.ts

@@ -9,9 +9,9 @@ import UText from "../../ui.text-block/UText.vue";
 import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UTextProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UTextArgs extends UTextProps {
+interface UTextArgs extends Props {
   slotTemplate?: string;
   enum: "size";
 }