vueless 0.0.579 → 0.0.580

package/ui.form-input-file/types.ts

@@ -1,14 +1,16 @@
 import defaultConfig from "./config.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+import type { ComponentConfig } from "../types.ts";
+
+export type Config = typeof defaultConfig;
 
 export type ButtonSize = "xs" | "sm" | "md";
 
-export interface UInputFileProps {
+export interface Props {
   /**
    * Input value.
    */
-  modelValue?: File | File[];
+  modelValue?: File[];
 
   /**
    * Input label.
@@ -63,7 +65,7 @@ export interface UInputFileProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.form-input-money/UInputMoney.vue

@@ -1,33 +1,24 @@
 <script setup lang="ts">
 import { computed, ref, watch, onMounted, nextTick, useId } from "vue";
 
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import UInput from "../ui.form-input/UInput.vue";
 
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 import useFormatCurrency from "./useFormatCurrency.ts";
 import { UInputMoney } from "./constants.ts";
 
-import type { UInputMoneyProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UInputMoneyProps>(), {
-  labelAlign: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).labelAlign,
-  symbol: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).symbol,
-  size: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).size,
-  minFractionDigits: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).minFractionDigits,
-  maxFractionDigits: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).maxFractionDigits,
-  decimalSeparator: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).decimalSeparator,
-  thousandsSeparator: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).thousandsSeparator,
-  positiveOnly: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).positiveOnly,
-  prefix: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).prefix,
-  readonly: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).readonly,
-  disabled: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).disabled,
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UInputMoney),
   modelValue: "",
-  dataTest: "",
+  label: "",
+  placeholder: "",
 });
 
 const emit = defineEmits(["update:modelValue", "keyup", "blur", "input"]);
@@ -36,8 +27,6 @@ const moneyInputRef = ref<{ inputRef: HTMLInputElement } | null>(null);
 
 const elementId = props.id || useId();
 
-const { moneyInputAttrs } = useAttrs(props);
-
 const { formattedValue, rawValue, setValue } = useFormatCurrency(elementId, () => ({
   minFractionDigits: props.minFractionDigits,
   maxFractionDigits: props.maxFractionDigits,
@@ -111,6 +100,12 @@ defineExpose({
    */
   formattedValue,
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { moneyInputAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.form-input-money/storybook/stories.ts

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

package/ui.form-input-money/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 FormatOptions {
   minFractionDigits: number;
@@ -11,7 +13,7 @@ export interface FormatOptions {
   prefix: string;
 }
 
-export interface UInputMoneyProps {
+export interface Props {
   /**
    * Input value.
    */
@@ -109,7 +111,7 @@ export interface UInputMoneyProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.form-input-number/UInputNumber.vue

@@ -1,28 +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 UButton from "../ui.button/UButton.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import defaultConfig from "./config.ts";
 import { UInputNumber } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UInputNumberProps } from "./types.ts";
+import type { UInputNumberProps, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<UInputNumberProps>(), {
-  step: getDefault<UInputNumberProps>(defaultConfig, UInputNumber).step,
-  min: getDefault<UInputNumberProps>(defaultConfig, UInputNumber).min,
-  max: getDefault<UInputNumberProps>(defaultConfig, UInputNumber).max,
-  labelAlign: getDefault<UInputNumberProps>(defaultConfig, UInputNumber).labelAlign,
-  size: getDefault<UInputNumberProps>(defaultConfig, UInputNumber).size,
-  disabled: getDefault<UInputNumberProps>(defaultConfig, UInputNumber).disabled,
-  dataTest: "",
-  config: () => ({}),
+  ...getDefaults<UInputNumberProps, Config>(defaultConfig, UInputNumber),
+  label: "",
 });
 
 const emit = defineEmits([
@@ -33,17 +28,6 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
-const {
-  config,
-  valueAttrs,
-  labelAttrs,
-  removeButtonAttrs,
-  removeIconAttrs,
-  addButtonAttrs,
-  addIconAttrs,
-  numberAttrs,
-} = useAttrs(props);
-
 const count = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
@@ -63,6 +47,21 @@ function onClickAdd() {
 
   count.value = newCount <= props.max ? newCount : count.value;
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  config,
+  valueAttrs,
+  labelAttrs,
+  removeButtonAttrs,
+  removeIconAttrs,
+  addButtonAttrs,
+  addIconAttrs,
+  numberAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -91,7 +90,7 @@ function onClickAdd() {
       <UIcon
         internal
         :size="size"
-        :name="config.defaults?.removeIcon"
+        :name="config.defaults.removeIcon"
         :color="isRemoveButtonDisabled ? 'gray' : 'grayscale'"
         v-bind="removeIconAttrs"
       />
@@ -115,7 +114,7 @@ function onClickAdd() {
       <UIcon
         internal
         :size="size"
-        :name="config.defaults?.addIcon"
+        :name="config.defaults.addIcon"
         :color="isAddButtonDisabled ? 'gray' : 'grayscale'"
         v-bind="addIconAttrs"
       />

package/ui.form-input-number/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 UInputNumberProps {
   /**
@@ -56,7 +58,7 @@ export interface UInputNumberProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.form-input-rating/UInputRating.vue

@@ -1,28 +1,23 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 
+import useUI from "../composables/useUI.ts";
+import { hasSlotContent } from "../utils/helper.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
-import { hasSlotContent } from "../utils/helper.ts";
-import { getDefault } from "../utils/ui.ts";
 
 import { UInputRating } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UInputRatingProps, IconSize } from "./types.ts";
+import type { Props, IconSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UInputRatingProps>(), {
-  stars: getDefault<UInputRatingProps>(defaultConfig, UInputRating).stars,
-  size: getDefault<UInputRatingProps>(defaultConfig, UInputRating).size,
-  labelAlign: getDefault<UInputRatingProps>(defaultConfig, UInputRating).labelAlign,
-  counter: getDefault<UInputRatingProps>(defaultConfig, UInputRating).counter,
-  selectable: getDefault<UInputRatingProps>(defaultConfig, UInputRating).selectable,
-  modelValue: 0,
-  dataTest: "",
-  config: () => ({}),
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UInputRating),
+  label: "",
 });
 
 const emit = defineEmits([
@@ -35,9 +30,6 @@ const emit = defineEmits([
 
 const hovered = ref<number | null>(null);
 
-const { config, inputLabelAttrs, containerAttrs, counterAttrs, totalAttrs, starsAttrs, starAttrs } =
-  useAttrs(props);
-
 const iconSize = computed(() => {
   const sizes = {
     sm: "xs",
@@ -52,6 +44,14 @@ const counterValue = computed(() => {
   return hovered.value || props.modelValue;
 });
 
+const starIcon = computed(() => {
+  return (star: number): string => {
+    return star <= counterValue.value
+      ? config.value.defaults.selectedIcon
+      : config.value.defaults.unselectedIcon;
+  };
+});
+
 function onClickStar(newValue: number) {
   if (props.selectable) {
     const selected = newValue !== props.modelValue ? newValue : 0;
@@ -65,6 +65,13 @@ function onClickStar(newValue: number) {
 function onMouseHover(overStar: number | null = null) {
   if (props.selectable) hovered.value = overStar;
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { config, inputLabelAttrs, containerAttrs, counterAttrs, totalAttrs, starsAttrs, starAttrs } =
+  useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -97,9 +104,7 @@ function onMouseHover(overStar: number | null = null) {
           :color="error ? 'red' : 'brand'"
           :size="iconSize"
           :interactive="selectable"
-          :name="
-            star <= counterValue ? config.defaults?.selectedIcon : config.defaults?.unselectedIcon
-          "
+          :name="starIcon(star)"
           v-bind="starAttrs"
           :data-test="`${dataTest}-rating-star-${star}`"
           @click="onClickStar(star)"

package/ui.form-input-rating/storybook/stories.ts

@@ -9,9 +9,9 @@ import UInputRating from "../../ui.form-input-rating/UInputRating.vue";
 import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UInputRatingProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UInputRatingArgs extends UInputRatingProps {
+interface UInputRatingArgs extends Props {
   slotTemplate?: string;
   enum: "size";
 }

package/ui.form-input-rating/types.ts

@@ -1,10 +1,12 @@
 import defaultConfig from "./config.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+import type { ComponentConfig } from "../types.ts";
+
+export type Config = typeof defaultConfig;
 
 export type IconSize = "xs" | "sm" | "md";
 
-export interface UInputRatingProps {
+export interface Props {
   /**
    * Rating value.
    */
@@ -58,7 +60,7 @@ export interface UInputRatingProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.form-input-search/UInputSearch.vue

@@ -1,29 +1,26 @@
 <script setup lang="ts">
 import { computed, useId, ref, watchEffect } from "vue";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+import { createDebounce } from "../utils/helper.ts";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UInput from "../ui.form-input/UInput.vue";
 import UButton from "../ui.button/UButton.vue";
-import { getDefault } from "../utils/ui.ts";
-import { createDebounce } from "../utils/helper.ts";
 
 import { UInputSearch } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UInputSearchProps, IconSize, ButtonSize } from "./types.ts";
+import type { Props, IconSize, ButtonSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UInputSearchProps>(), {
-  size: getDefault<UInputSearchProps>(defaultConfig, UInputSearch).size,
-  labelAlign: getDefault<UInputSearchProps>(defaultConfig, UInputSearch).labelAlign,
-  minLength: getDefault<UInputSearchProps>(defaultConfig, UInputSearch).minLength,
-  debounce: getDefault<UInputSearchProps>(defaultConfig, UInputSearch).debounce,
-  readonly: getDefault<UInputSearchProps>(defaultConfig, UInputSearch).readonly,
-  disabled: getDefault<UInputSearchProps>(defaultConfig, UInputSearch).disabled,
-  dataTest: "",
-  config: () => ({}),
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UInputSearch),
+  modelValue: "",
+  label: "",
+  placeholder: "",
 });
 
 const emit = defineEmits([
@@ -54,9 +51,6 @@ const inputRef = ref(null);
 
 const elementId = props.id || useId();
 
-const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonAttrs } =
-  useAttrs(props);
-
 const iconSize = computed(() => {
   const sizes = {
     sm: "xs",
@@ -83,7 +77,7 @@ watchEffect(() => {
   }, Number(props.debounce));
 });
 
-function onUpdateValue(value) {
+function onUpdateValue(value: string) {
   localValue.value = value;
 
   if (!value) {
@@ -125,6 +119,14 @@ defineExpose({
    */
   inputRef,
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+
+const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonAttrs } =
+  useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -163,7 +165,7 @@ defineExpose({
         internal
         interactive
         color="gray"
-        :name="config.defaults?.clearIcon"
+        :name="config.defaults.clearIcon"
         :size="iconSize"
         v-bind="clearIconAttrs"
         :data-test="`${dataTest}-clear`"
@@ -173,7 +175,7 @@ defineExpose({
       <!-- @slot Use it to add icon after the text. -->
       <slot
         name="right-icon"
-        :icon-name="config.defaults?.searchIcon"
+        :icon-name="config.defaults.searchIcon"
         :icon-size="iconSize"
         :search-button-label="searchButtonLabel"
       >
@@ -182,7 +184,7 @@ defineExpose({
           internal
           interactive
           :size="iconSize"
-          :name="rightIcon || config.defaults?.searchIcon"
+          :name="rightIcon || config.defaults.searchIcon"
           v-bind="searchIconAttrs"
           :data-test="`${dataTest}-search-icon`"
           @click="onClickSearch"

package/ui.form-input-search/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 { UInputSearchProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UInputSearchArgs extends UInputSearchProps {
+interface UInputSearchArgs extends Props {
   slotTemplate?: string;
   enum: "size";
 }

package/ui.form-input-search/types.ts

@@ -1,11 +1,13 @@
 import defaultConfig from "./config.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+import type { ComponentConfig } from "../types.ts";
+
+export type Config = typeof defaultConfig;
 
 export type IconSize = "xs" | "sm" | "md";
 export type ButtonSize = "xs" | "md" | "lg";
 
-export interface UInputSearchProps {
+export interface Props {
   /**
    * Search input value.
    */
@@ -84,7 +86,7 @@ export interface UInputSearchProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.form-label/ULabel.vue

@@ -1,22 +1,19 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import defaultConfig from "./config.ts";
 import { ULabel, PLACEMENT } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { ULabelProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<ULabelProps>(), {
-  align: getDefault<ULabelProps>(defaultConfig, ULabel).align,
-  size: getDefault<ULabelProps>(defaultConfig, ULabel).size,
-  disabled: getDefault<ULabelProps>(defaultConfig, ULabel).disabled,
-  centred: getDefault<ULabelProps>(defaultConfig, ULabel).centred,
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, ULabel),
+  label: "",
 });
 
 const emit = defineEmits([
@@ -29,8 +26,6 @@ const emit = defineEmits([
 const labelRef = ref(null);
 const wrapperRef = ref(null);
 
-const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useAttrs(props);
-
 const isHorizontalPlacement = computed(() => {
   return props.align === PLACEMENT.left || props.align === PLACEMENT.right;
 });
@@ -64,6 +59,19 @@ defineExpose({
    */
   wrapperElement,
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  error: Boolean(props.error),
+}));
+
+const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Config>(
+  defaultConfig,
+  mutatedProps,
+);
 </script>
 
 <template>

package/ui.form-label/config.ts

@@ -99,7 +99,6 @@ export default /*tw*/ {
   defaults: {
     align: "top",
     size: "md",
-    error: false,
     centred: false,
     disabled: false,
   },

package/ui.form-label/storybook/stories.ts

@@ -11,9 +11,9 @@ import UText from "../../ui.text-block/UText.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { ULabelProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface ULabelArgs extends ULabelProps {
+interface ULabelArgs extends Props {
   slotTemplate?: string;
   enum: "align" | "size";
 }

package/ui.form-label/types.ts

@@ -1,13 +1,20 @@
 import defaultConfig from "./config.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+import type { ComponentConfig } from "../types.ts";
 
-export interface ULabelProps {
+export type Config = typeof defaultConfig;
+
+export interface Props {
   /**
    * Label text.
    */
   label?: string;
 
+  /**
+   * Set input id for label `for` attribute.
+   */
+  for?: string;
+
   /**
    * Label description.
    */
@@ -38,15 +45,10 @@ export interface ULabelProps {
    */
   centred?: boolean;
 
-  /**
-   * Set input id for label `for` attribute.
-   */
-  for?: string;
-
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.