vueless 0.0.579 → 0.0.580

package/ui.form-radio/URadio.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, watchEffect, toValue, useId } from "vue";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import ULabel from "../ui.form-label/ULabel.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 import { URadio } from "./constants.ts";
 
-import type { URadioProps, LocalValueType } from "./types.ts";
+import type { Props, LocalValueType, Config } from "./types.ts";
 import type { SetRadioGroupSelectedItem } from "../ui.form-radio-group/types.ts";
 
 defineOptions({ inheritAttrs: false });
@@ -22,13 +23,11 @@ const getRadioGroupColor = inject("getRadioGroupColor", null);
 const getRadioGroupSize = inject("getRadioGroupSize", null);
 const getRadioGroupSelectedItem = inject("getRadioGroupSelectedItem", null);
 
-const props = withDefaults(defineProps<URadioProps>(), {
-  labelAlign: getDefault<URadioProps>(defaultConfig, URadio).labelAlign,
-  size: getDefault<URadioProps>(defaultConfig, URadio).size,
-  color: getDefault<URadioProps>(defaultConfig, URadio).color,
-  disabled: getDefault<URadioProps>(defaultConfig, URadio).disabled,
-  checked: getDefault<URadioProps>(defaultConfig, URadio).checked,
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, URadio),
+  modelValue: () => ({}),
+  value: () => ({}),
+  label: "",
 });
 
 const emit = defineEmits([
@@ -56,8 +55,6 @@ const isChecked = computed(() => {
 
 const elementId = props.id || useId();
 
-const { radioAttrs, radioLabelAttrs } = useAttrs(props, { radioColor, radioSize });
-
 const radioValue = computed(() => {
   return props.value === "" ? "on" : props.value;
 });
@@ -82,6 +79,19 @@ function onChange(event: Event) {
 
   emit("update:modelValue", target.value);
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  color: radioColor.value,
+  size: radioSize.value,
+  label: Boolean(props.label),
+  error: Boolean(props.error),
+}));
+
+const { radioAttrs, radioLabelAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>

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

@@ -9,9 +9,9 @@ import URadio from "../../ui.form-radio/URadio.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { URadioProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface URadioArgs extends URadioProps {
+interface URadioArgs extends Props {
   slotTemplate?: string;
   enum: "variant" | "size";
 }

package/ui.form-radio/types.ts

@@ -1,12 +1,12 @@
 import defaultConfig from "./config.ts";
 
-import type { UnknownObject, UnknownArray } from "../types.ts";
+import type { UnknownObject, UnknownArray, ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
-export type LocalValueType = string | number | boolean | UnknownObject | null;
+export type LocalValueType = string | number | boolean | UnknownObject | UnknownArray | null;
 
-export interface URadioProps {
+export interface Props {
   /**
    * Radio value.
    */
@@ -90,7 +90,7 @@ export interface URadioProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.form-radio-group/URadioGroup.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
 import { computed, provide } from "vue";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import ULabel from "../ui.form-label/ULabel.vue";
 import URadio from "../ui.form-radio/URadio.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import defaultConfig from "./config.ts";
 import { URadioGroup } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { URadioGroupProps, SetRadioGroupSelectedItem } from "./types.ts";
+import type { Props, SetRadioGroupSelectedItem, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<URadioGroupProps>(), {
-  size: getDefault<URadioGroupProps>(defaultConfig, URadioGroup).size,
-  color: getDefault<URadioGroupProps>(defaultConfig, URadioGroup).color,
-  disabled: getDefault<URadioGroupProps>(defaultConfig, URadioGroup).disabled,
-  modelValue: "",
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, URadioGroup),
+  modelValue: () => [],
+  options: () => [],
+  label: "",
 });
 
 const emit = defineEmits([
@@ -29,8 +29,6 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
-const { groupLabelAttrs, listAttrs, groupRadioAttrs } = useAttrs(props);
-
 const selectedItem = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
@@ -43,6 +41,12 @@ provide("getRadioGroupSelectedItem", () => selectedItem.value);
 provide("getRadioGroupName", () => props.name);
 provide("getRadioGroupColor", () => props.color);
 provide("getRadioGroupSize", () => props.size);
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -61,7 +65,7 @@ provide("getRadioGroupSize", () => props.size);
       <slot>
         <URadio
           v-for="(option, index) in options"
-          :key="option.value"
+          :key="index"
           :model-value="selectedItem"
           :value="option.value"
           :label="option.label"

package/ui.form-radio-group/storybook/stories.ts

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

package/ui.form-radio-group/types.ts

@@ -1,20 +1,20 @@
 import defaultConfig from "./config.ts";
 
-import type { UnknownObject, UnknownArray } from "../types.ts";
+import type { UnknownObject, UnknownArray, ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export interface URadioGroupOption {
-  value: string | number;
+  value: string | number | boolean | UnknownArray | UnknownObject;
   label: string;
-  description: string;
+  description?: string;
 }
 
 export type SetRadioGroupSelectedItem =
   | ((value: string | number | boolean | UnknownArray | UnknownObject) => void)
   | null;
 
-export interface URadioGroupProps {
+export interface Props {
   /**
    * Radio group selected value.
    */
@@ -23,7 +23,7 @@ export interface URadioGroupProps {
   /**
    * Radio group options.
    */
-  options?: Array<URadioGroupOption>;
+  options?: URadioGroupOption[];
 
   /**
    * Radio group label.
@@ -83,7 +83,7 @@ export interface URadioGroupProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.form-select/USelect.vue

@@ -318,12 +318,12 @@ import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
 import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
 
+import useUI from "../composables/useUI.ts";
 import { createDebounce, hasSlotContent } from "../utils/helper.ts";
-import { getDefault } from "../utils/ui.ts";
+import { getDefaults } from "../utils/ui.ts";
 import { isMac } from "../utils/platform.ts";
 
 import SelectService from "./utilSelect.js";
-import useAttrs from "./useAttrs.js";
 import defaultConfig from "./config.js";
 import { USelect, DIRECTION, KEY_CODES } from "./constants.js";
 
@@ -362,7 +362,7 @@ const props = defineProps({
    */
   labelAlign: {
     type: String,
-    default: getDefault(defaultConfig, USelect).labelAlign,
+    default: getDefaults(defaultConfig, USelect).labelAlign,
   },
 
   /**
@@ -395,7 +395,7 @@ const props = defineProps({
    */
   size: {
     type: String,
-    default: getDefault(defaultConfig, USelect).size,
+    default: getDefaults(defaultConfig, USelect).size,
   },
 
   /**
@@ -420,7 +420,7 @@ const props = defineProps({
    */
   openDirection: {
     type: String,
-    default: getDefault(defaultConfig, USelect).openDirection,
+    default: getDefaults(defaultConfig, USelect).openDirection,
   },
 
   /**
@@ -428,7 +428,7 @@ const props = defineProps({
    */
   labelKey: {
     type: String,
-    default: getDefault(defaultConfig, USelect).labelKey,
+    default: getDefaults(defaultConfig, USelect).labelKey,
   },
 
   /**
@@ -436,7 +436,7 @@ const props = defineProps({
    */
   valueKey: {
     type: String,
-    default: getDefault(defaultConfig, USelect).valueKey,
+    default: getDefaults(defaultConfig, USelect).valueKey,
   },
 
   /**
@@ -460,7 +460,7 @@ const props = defineProps({
    */
   optionsLimit: {
     type: Number,
-    default: getDefault(defaultConfig, USelect).optionsLimit,
+    default: getDefaults(defaultConfig, USelect).optionsLimit,
   },
 
   /**
@@ -468,7 +468,7 @@ const props = defineProps({
    */
   visibleOptions: {
     type: Number,
-    default: getDefault(defaultConfig, USelect).visibleOptions,
+    default: getDefaults(defaultConfig, USelect).visibleOptions,
   },
 
   /**
@@ -476,7 +476,7 @@ const props = defineProps({
    */
   clearable: {
     type: Boolean,
-    default: getDefault(defaultConfig, USelect).clearable,
+    default: getDefaults(defaultConfig, USelect).clearable,
   },
 
   /**
@@ -484,7 +484,7 @@ const props = defineProps({
    */
   multiple: {
     type: Boolean,
-    default: getDefault(defaultConfig, USelect).multiple,
+    default: getDefaults(defaultConfig, USelect).multiple,
   },
 
   /**
@@ -492,7 +492,7 @@ const props = defineProps({
    */
   searchable: {
     type: Boolean,
-    default: getDefault(defaultConfig, USelect).searchable,
+    default: getDefaults(defaultConfig, USelect).searchable,
   },
 
   /**
@@ -500,7 +500,7 @@ const props = defineProps({
    */
   disabled: {
     type: Boolean,
-    default: getDefault(defaultConfig, USelect).disabled,
+    default: getDefaults(defaultConfig, USelect).disabled,
   },
 
   /**
@@ -508,7 +508,7 @@ const props = defineProps({
    */
   addOption: {
     type: Boolean,
-    default: getDefault(defaultConfig, USelect).addOption,
+    default: getDefaults(defaultConfig, USelect).addOption,
   },
 
   /**
@@ -694,31 +694,6 @@ const isEmpty = computed(() => {
   );
 });
 
-const {
-  config,
-  selectLabelAttrs,
-  wrapperAttrs,
-  innerWrapperAttrs,
-  leftIconWrapperAttrs,
-  rightIconWrapperAttrs,
-  leftIconAttrs,
-  rightIconAttrs,
-  beforeCaretAttrs,
-  afterCaretAttrs,
-  toggleAttrs,
-  clearAttrs,
-  clearMultipleTextAttrs,
-  clearMultipleAttrs,
-  searchAttrs,
-  searchInputAttrs,
-  selectedLabelsAttrs,
-  selectedLabelAttrs,
-  dropdownListAttrs,
-  toggleIconAttrs,
-  clearIconAttrs,
-  clearMultipleIconAttrs,
-} = useAttrs(props, { isTop, isOpen, selectedLabel });
-
 const onSearchChange = createDebounce(function (query) {
   emit("searchChange", query);
 }, 300);
@@ -905,4 +880,43 @@ defineExpose({
    */
   innerWrapperRef,
 });
+
+/**
+ * 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),
+  label: Boolean(props.label),
+  /* component state, not a props */
+  selected: Boolean(selectedLabel.value),
+  opened: isOpen.value,
+  openedTop: isTop.value,
+}));
+
+// eslint-disable-next-line vue/no-dupe-keys
+const {
+  config,
+  selectLabelAttrs,
+  wrapperAttrs,
+  innerWrapperAttrs,
+  leftIconWrapperAttrs,
+  rightIconWrapperAttrs,
+  leftIconAttrs,
+  rightIconAttrs,
+  beforeCaretAttrs,
+  afterCaretAttrs,
+  toggleAttrs,
+  clearAttrs,
+  clearMultipleTextAttrs,
+  clearMultipleAttrs,
+  searchAttrs,
+  searchInputAttrs,
+  selectedLabelsAttrs,
+  selectedLabelAttrs,
+  dropdownListAttrs,
+  toggleIconAttrs,
+  clearIconAttrs,
+  clearMultipleIconAttrs,
+} = useUI(defaultConfig, mutatedProps);
 </script>

package/ui.form-switch/USwitch.vue

@@ -2,29 +2,24 @@
 import { computed, useId } from "vue";
 import { merge } from "lodash-es";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import { USwitch } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
-import type { USwitchProps, IconSize } from "./types.ts";
+import type { Props, IconSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<USwitchProps>(), {
-  labelAlign: getDefault<USwitchProps>(defaultConfig, USwitch).labelAlign,
-  size: getDefault<USwitchProps>(defaultConfig, USwitch).size,
-  color: getDefault<USwitchProps>(defaultConfig, USwitch).color,
-  toggleIcon: getDefault<USwitchProps>(defaultConfig, USwitch).toggleIcon,
-  toggleLabel: getDefault<USwitchProps>(defaultConfig, USwitch).toggleLabel,
-  disabled: getDefault<USwitchProps>(defaultConfig, USwitch).disabled,
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, USwitch),
   modelValue: false,
-  dataTest: "",
-  config: () => ({}),
+  label: "",
 });
 
 const emit = defineEmits([
@@ -47,16 +42,6 @@ const checkedValue = computed({
 
 const elementId = props.id || useId();
 
-const {
-  config,
-  toggleIconAttrs,
-  switchLabelAttrs,
-  inputAttrs,
-  wrapperAttrs,
-  circleAttrs,
-  toggleLabelAttrs,
-} = useAttrs(props, { checked: checkedValue });
-
 const switchLabel = computed(() => {
   return checkedValue.value ? currentLocale.value.active : currentLocale.value.inactive;
 });
@@ -75,6 +60,10 @@ const iconColor = computed(() => {
   return checkedValue.value ? props.color : "grayscale";
 });
 
+const toggleIconName = computed(() => {
+  return checkedValue.value ? config.value.defaults.onIcon : config.value.defaults.offIcon;
+});
+
 function toggle() {
   if (!props.disabled) {
     checkedValue.value = !checkedValue.value;
@@ -88,6 +77,24 @@ function onClickToggle() {
 function onKeydownSpace() {
   toggle();
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  checked: Boolean(checkedValue.value),
+}));
+
+const {
+  config,
+  toggleIconAttrs,
+  switchLabelAttrs,
+  inputAttrs,
+  wrapperAttrs,
+  circleAttrs,
+  toggleLabelAttrs,
+} = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -117,7 +124,7 @@ function onKeydownSpace() {
         <UIcon
           v-if="toggleIcon"
           internal
-          :name="checkedValue ? config.defaults?.onIcon : config.defaults?.offIcon"
+          :name="toggleIconName"
           :color="iconColor"
           :size="iconSize"
           v-bind="toggleIconAttrs"

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

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

package/ui.form-switch/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 = "2xs" | "xs" | "sm";
 
-export interface USwitchProps {
+export interface Props {
   /**
    * Switch value.
    */
@@ -79,7 +81,7 @@ export interface USwitchProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.form-textarea/UTextarea.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch, useSlots, useId } 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 { useMutationObserver } from "../composables/useMutationObserver.ts";
@@ -10,22 +11,16 @@ import ULabel from "../ui.form-label/ULabel.vue";
 
 import { UTextarea } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UTextareaProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UTextareaProps>(), {
-  size: getDefault<UTextareaProps>(defaultConfig, UTextarea).size,
-  labelAlign: getDefault<UTextareaProps>(defaultConfig, UTextarea).labelAlign,
-  resizable: getDefault<UTextareaProps>(defaultConfig, UTextarea).resizable,
-  readonly: getDefault<UTextareaProps>(defaultConfig, UTextarea).readonly,
-  disabled: getDefault<UTextareaProps>(defaultConfig, UTextarea).disabled,
-  inputmode: getDefault<UTextareaProps>(defaultConfig, UTextarea).inputmode,
-  noAutocomplete: getDefault<UTextareaProps>(defaultConfig, UTextarea).noAutocomplete,
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UTextarea),
   modelValue: "",
-  dataTest: "",
+  label: "",
+  placeholder: "",
 });
 
 const emit = defineEmits([
@@ -65,9 +60,6 @@ const slots = useSlots();
 
 const elementId = props.id || useId();
 
-const { textareaAttrs, textareaLabelAttrs, textareaWrapperAttrs, leftSlotAttrs, rightSlotAttrs } =
-  useAttrs(props);
-
 const textareaRef = ref<HTMLTextAreaElement | null>(null);
 const labelComponentRef = ref<{ labelElement: HTMLElement | null } | null>(null);
 const leftSlotWrapperRef = ref<HTMLElement | null>(null);
@@ -184,6 +176,18 @@ defineExpose({
    */
   textareaRef,
 });
+
+/**
+ * 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),
+  label: Boolean(props.label),
+}));
+
+const { textareaAttrs, textareaLabelAttrs, textareaWrapperAttrs, leftSlotAttrs, rightSlotAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>

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

@@ -10,9 +10,9 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UTextareaProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UTextareaArgs extends UTextareaProps {
+interface UTextareaArgs extends Props {
   slotTemplate?: string;
   enum: "size" | "labelAlign";
 }

package/ui.form-textarea/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 UTextareaProps {
+export type Config = typeof defaultConfig;
+
+export interface Props {
   /**
    * Set input size.
    */
@@ -76,7 +78,7 @@ export interface UTextareaProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.