vueless 0.0.579 → 0.0.580

package/ui.text-block/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 UTextProps {
+export interface Props {
   /**
    * HTML markdown or plain text.
    */
@@ -26,7 +27,7 @@ export interface UTextProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.text-empty/UEmpty.vue

@@ -1,35 +1,23 @@
 <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 UHeader from "../ui.text-header/UHeader.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import { UEmpty } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UEmptyProps, IconSize, TitleSize } from "./types.ts";
+import type { Props, IconSize, TitleSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UEmptyProps>(), {
-  size: getDefault<UEmptyProps>(defaultConfig, UEmpty).size,
-  dataTest: "",
-  config: () => ({}),
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UEmpty),
 });
 
-const {
-  config,
-  titleAttrs,
-  descriptionAttrs,
-  wrapperAttrs,
-  headerAttrs,
-  footerAttrs,
-  emptyIconWrapperAttrs,
-  emptyIconAttrs,
-} = useAttrs(props);
-
 const iconSize = computed(() => {
   const sizes = {
     sm: "2xl",
@@ -49,6 +37,21 @@ const titleSize = computed(() => {
 
   return sizes[props.size] as TitleSize;
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  config,
+  titleAttrs,
+  descriptionAttrs,
+  wrapperAttrs,
+  headerAttrs,
+  footerAttrs,
+  emptyIconWrapperAttrs,
+  emptyIconAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -59,7 +62,7 @@ const titleSize = computed(() => {
         <div v-bind="emptyIconWrapperAttrs">
           <UIcon
             internal
-            :name="config.defaults?.emptyIcon"
+            :name="config.defaults.emptyIcon"
             color="gray"
             :size="iconSize"
             v-bind="emptyIconAttrs"

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

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

package/ui.text-empty/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 IconSize = "2xl" | "3xl" | "4xl";
 export type TitleSize = "xs" | "sm" | "md";
 
-export interface UEmptyProps {
+export interface Props {
   /**
    * Empty state title.
    */
@@ -24,7 +25,7 @@ export interface UEmptyProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.text-file/UFile.vue

@@ -1,23 +1,22 @@
 <script setup lang="ts">
 import { computed, ref, useId } from "vue";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import ULink from "../ui.button-link/ULink.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
 
-import { getDefault } from "../utils/ui.ts";
-
-import useAttrs from "./useAttrs.ts";
 import { UFile } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { UFileProps, IconSize, RemoveIconSize } from "./types.ts";
+import type { Props, IconSize, RemoveIconSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UFileProps>(), {
-  size: getDefault<UFileProps>(defaultConfig, UFile).size,
-  dataTest: "",
-  config: () => ({}),
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UFile),
+  label: "",
 });
 
 const emit = defineEmits([
@@ -32,16 +31,6 @@ const focus = ref(false);
 
 const elementId = props.id || useId();
 
-const {
-  config,
-  fileAttrs,
-  bodyAttrs,
-  fileIconAttrs,
-  fileLabelAttrs,
-  fileImageAttrs,
-  removeIconAttrs,
-} = useAttrs(props);
-
 const iconSize = computed(() => {
   const sizes = {
     sm: "xs",
@@ -73,6 +62,20 @@ function onFocus() {
 function onBlur() {
   focus.value = false;
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  config,
+  fileAttrs,
+  bodyAttrs,
+  fileIconAttrs,
+  fileLabelAttrs,
+  fileImageAttrs,
+  removeIconAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -89,7 +92,7 @@ function onBlur() {
           interactive
           color="gray"
           :size="iconSize"
-          :name="config.defaults?.fileIcon"
+          :name="config.defaults.fileIcon"
           v-bind="fileIconAttrs"
           @focus="onFocus"
           @blur="onBlur"
@@ -106,7 +109,7 @@ function onBlur() {
         interactive
         color="gray"
         :size="removeIconSize"
-        :name="config.defaults?.removeIcon"
+        :name="config.defaults.removeIcon"
         v-bind="removeIconAttrs"
         :data-test="`${dataTest}-remove-item`"
         @click.stop.prevent="onRemove"

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

@@ -8,9 +8,9 @@ import {
 import UFile from "../../ui.text-file/UFile.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UFileProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UFileArgs extends UFileProps {
+interface UFileArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.text-file/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 IconSize = "xs" | "sm" | "md";
 export type RemoveIconSize = "2xs" | "xs" | "sm";
 
-export interface UFileProps {
+export interface Props {
   /**
    * File url.
    */
@@ -39,7 +40,7 @@ export interface UFileProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.text-files/UFiles.vue

@@ -1,23 +1,25 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import UFile from "../ui.text-file/UFile.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import { UFiles } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
-import { computed } from "vue";
+
 import { getRandomId } from "../utils/helper.ts";
 
-import type { UFilesProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UFilesProps>(), {
-  labelAlign: getDefault<UFilesProps>(defaultConfig, UFiles).labelAlign,
-  size: getDefault<UFilesProps>(defaultConfig, UFiles).size,
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UFiles),
   fileList: () => [],
-  dataTest: "",
+  label: "",
 });
 
 const emit = defineEmits([
@@ -28,8 +30,6 @@ const emit = defineEmits([
   "remove",
 ]);
 
-const { filesLabelAttrs, itemsAttrs, itemAttrs } = useAttrs(props);
-
 const formattedFileList = computed(() => {
   return props.fileList.map((file) => {
     if (file instanceof File) {
@@ -46,6 +46,12 @@ const formattedFileList = computed(() => {
 function onRemoveFile(fileId: string | number) {
   emit("remove", fileId);
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { filesLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

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

@@ -8,9 +8,9 @@ import {
 import UFiles from "../../ui.text-files/UFiles.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UFilesProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UFilesArgs extends UFilesProps {
+interface UFilesArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.text-files/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 UFilesProps {
+export interface Props {
   /**
    * List of file objects.
    */
@@ -36,7 +37,7 @@ export interface UFilesProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.text-header/UHeader.vue

@@ -1,24 +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 { UHeader } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UHeaderProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UHeaderProps>(), {
-  size: getDefault<UHeaderProps>(defaultConfig, UHeader).size,
-  color: getDefault<UHeaderProps>(defaultConfig, UHeader).color,
-  tag: getDefault<UHeaderProps>(defaultConfig, UHeader).tag,
-  line: getDefault<UHeaderProps>(defaultConfig, UHeader).line,
-  underlined: getDefault<UHeaderProps>(defaultConfig, UHeader).underlined,
-  dataTest: "",
+withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UHeader),
+  label: "",
 });
 
-const { headerAttrs } = useAttrs(props);
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { headerAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

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

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

package/ui.text-header/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 UHeaderProps {
+export interface Props {
   /**
    * Header label.
    */
@@ -57,7 +58,7 @@ export interface UHeaderProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.text-money/UMoney.vue

@@ -1,44 +1,22 @@
 <script setup lang="ts">
 import { 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 { UMoney } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import { useAttrs } from "./useAttrs.ts";
 import { separatedMoney, MONEY_SIGN_TYPE } from "./utilMoney.ts";
 
-import type { UMoneyProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UMoneyProps>(), {
-  size: getDefault<UMoneyProps>(defaultConfig, UMoney).size,
-  color: getDefault<UMoneyProps>(defaultConfig, UMoney).color,
-  symbolAlign: getDefault<UMoneyProps>(defaultConfig, UMoney).symbolAlign,
-  symbolDivided: getDefault<UMoneyProps>(defaultConfig, UMoney).symbolDivided,
-  sign: getDefault<UMoneyProps>(defaultConfig, UMoney).sign,
-  minFractionDigits: getDefault<UMoneyProps>(defaultConfig, UMoney).minFractionDigits,
-  maxFractionDigits: getDefault<UMoneyProps>(defaultConfig, UMoney).maxFractionDigits,
-  decimalSeparator: getDefault<UMoneyProps>(defaultConfig, UMoney).decimalSeparator,
-  thousandsSeparator: getDefault<UMoneyProps>(defaultConfig, UMoney).thousandsSeparator,
-  align: getDefault<UMoneyProps>(defaultConfig, UMoney).align,
-  planned: getDefault<UMoneyProps>(defaultConfig, UMoney).planned,
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UMoney),
 });
 
-const {
-  moneyAttrs,
-  sumAttrs,
-  mathSignAttrs,
-  integerAttrs,
-  pennyAttrs,
-  slotLeftAttrs,
-  symbolAttrs,
-  slotRightAttrs,
-} = useAttrs(props);
-
 const currencySymbolPosition = computed(() => {
   return {
     left: props.symbolAlign === "left",
@@ -68,6 +46,21 @@ const preparedMoney = computed(() => {
     props.thousandsSeparator,
   );
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  moneyAttrs,
+  sumAttrs,
+  mathSignAttrs,
+  integerAttrs,
+  pennyAttrs,
+  slotLeftAttrs,
+  symbolAttrs,
+  slotRightAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>

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

@@ -12,9 +12,9 @@ import DebitIcon from "../../ui.text-money/assets/debit.svg?component";
 import CreditIcon from "../../ui.text-money/assets/credit.svg?component";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UMoneyProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UMoneyArgs extends UMoneyProps {
+interface UMoneyArgs extends Props {
   slotTemplate?: string;
   enum: "color" | "size" | "sign" | "symbolAlign" | "align";
 }

package/ui.text-money/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 UMoneyProps {
+export interface Props {
   /**
    * Money value.
    */
@@ -92,7 +93,7 @@ export interface UMoneyProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.