vueless 0.0.579 → 0.0.581

package/ui.button-toggle-item/UToggleItem.vue

@@ -1,24 +1,26 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref, useId } from "vue";
+import { computed, inject, onMounted, ref, useId, toValue } from "vue";
 
 import UButton from "../ui.button/UButton.vue";
-import { getDefault } from "../utils/ui.ts";
+
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import { TYPE_RADIO } from "../ui.button-toggle/constants.ts";
 
-import useAttrs from "./useAttrs.ts";
 import defaultConfig from "./config.ts";
 import { UToggleItem } from "./constants.ts";
 
-import type { UToggleItemProps, ToggleInjectValues, ToggleContextType } from "./types.ts";
+import type { Props, ToggleInjectValues, ToggleContextType, Config } from "./types.ts";
 
 type ButtonSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UToggleItemProps>(), {
-  disabled: getDefault<UToggleItemProps>(defaultConfig, UToggleItem).disabled,
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UToggleItem),
+  modelValue: "",
+  label: "",
 });
 
 const emit = defineEmits([
@@ -32,26 +34,26 @@ const emit = defineEmits([
 /* eslint-disable prettier/prettier */
 const getToggleName = inject<() => string>("getToggleName", () => "toggle");
 const getToggleType = inject<() => string>("getToggleType", () =>
-  getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).type || TYPE_RADIO
+  getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).type || TYPE_RADIO
 );
 const getToggleSize = inject<() => ButtonSize>("getToggleSize", () =>
-  (getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).size || "md") as ButtonSize
+  (getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).size || "md") as ButtonSize
 );
 const getToggleRound = inject<() => boolean>("getToggleRound", () =>
-  getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).round || false
+  getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).round || false
 );
 const getToggleBlock = inject<() => boolean>("getToggleBlock", () =>
-  getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).block || false
+  getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).block || false
 );
 const getToggleSquare = inject<() => boolean>("getToggleSquare", () =>
-  getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).square || false
+  getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).square || false
 );
 const getToggleVariant = inject<string>("getToggleVariant",
-  getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).variant || "secondary"
+  getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).variant || "secondary"
 );
 const getToggleSeparated = inject<boolean>("getToggleSeparated", true);
 const getToggleDisabled = inject<() => boolean>("getToggleDisabled", () =>
-  props.disabled || getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).disabled || false
+  props.disabled || getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).disabled || false
 );
 /* eslint-enable prettier/prettier */
 
@@ -70,12 +72,6 @@ const isSelected = computed(() => {
     : selectedValue?.value === props.value;
 });
 
-const { toggleButtonAttrs, toggleInputAttrs } = useAttrs(props, {
-  isSelected,
-  separated: getToggleSeparated,
-  variant: getToggleVariant,
-});
-
 onMounted(() => {
   const propValueString = props.value?.toString() ?? "";
 
@@ -97,6 +93,19 @@ function onClickSetValue() {
 
   emit("update:modelValue", props.value);
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  variant: toValue(getToggleVariant),
+  separated: toValue(getToggleSeparated),
+  /* component state, not a props */
+  selected: isSelected.value,
+}));
+
+const { toggleButtonAttrs, toggleInputAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>

package/ui.button-toggle-item/storybook/stories.ts

@@ -9,9 +9,9 @@ import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UToggleItemProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UToggleItemArgs extends UToggleItemProps {
+interface UToggleItemArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.button-toggle-item/types.ts

@@ -1,10 +1,11 @@
 import defaultConfig from "./config.ts";
 
 import type { Ref } from "vue";
+import type { ComponentConfig } from "../types.ts";
 
 type UpdateSelectedValue = (value: string | number, checked: boolean) => void;
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export interface ToggleInjectValues {
   type?: string;
@@ -21,11 +22,11 @@ export interface ToggleContextType {
   updateSelectedValue: UpdateSelectedValue;
 }
 
-export interface UToggleItemProps {
+export interface Props {
   /**
    * Selected value.
    */
-  modelValue?: string | number | Array<string | number>;
+  modelValue?: string | number | (string | number)[];
 
   /**
    * Value for checkbox state.
@@ -50,7 +51,7 @@ export interface UToggleItemProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-accordion/UAccordion.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
 import { computed, ref, useId } from "vue";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import { UAccordion } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UAccordionProps, DividerSize } from "./types.ts";
+import type { Props, DividerSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UAccordionProps>(), {
-  size: getDefault<UAccordionProps>(defaultConfig, UAccordion).size,
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UAccordion),
 });
 
 const emit = defineEmits([
@@ -31,18 +31,8 @@ const isOpened = ref(false);
 
 const elementId = props.id || useId();
 
-const {
-  config,
-  wrapperAttrs,
-  descriptionAttrs,
-  bodyAttrs,
-  titleAttrs,
-  toggleIconAttrs,
-  dividerAttrs,
-} = useAttrs(props, { isOpened });
-
 const toggleIcon = computed(() =>
-  isOpened.value ? config.value?.defaults?.collapseIcon : config.value?.defaults?.expandIcon,
+  isOpened.value ? config.value.defaults.collapseIcon : config.value.defaults.expandIcon,
 );
 
 const dividerSize = computed(() => {
@@ -60,6 +50,21 @@ function onClickItem() {
 
   emit("click", elementId, isOpened.value);
 }
+
+const mutatedProps = computed(() => ({
+  /* component state, not a props */
+  opened: isOpened.value,
+}));
+
+const {
+  config,
+  wrapperAttrs,
+  descriptionAttrs,
+  bodyAttrs,
+  titleAttrs,
+  toggleIconAttrs,
+  dividerAttrs,
+} = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>

package/ui.container-accordion/storybook/stories.ts

@@ -9,9 +9,9 @@ import UAccordion from "../../ui.container-accordion/UAccordion.vue";
 import UButton from "../../ui.button/UButton.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UAccordionProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UAccordionArgs extends UAccordionProps {
+interface UAccordionArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.container-accordion/types.ts

@@ -1,9 +1,10 @@
 import defaultConfig from "./config.ts";
+import type { ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
-
+export type Config = typeof defaultConfig;
 export type DividerSize = "md" | "lg" | "xl";
-export interface UAccordionProps {
+
+export interface Props {
   /**
    * Accordion title.
    */
@@ -27,7 +28,7 @@ export interface UAccordionProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-card/UCard.vue

@@ -1,19 +1,22 @@
 <script setup lang="ts">
 import { computed, useSlots } from "vue";
 
+import useUI from "../composables/useUI.ts";
 import { hasSlotContent } from "../utils/helper.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import UHeader from "../ui.text-header/UHeader.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
 
-import useAttrs from "./useAttrs.ts";
+import defaultConfig from "./config.ts";
+import { UCard } from "./constants.ts";
 
-import type { UCardProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UCardProps>(), {
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UCard),
 });
 
 const slots = useSlots();
@@ -29,6 +32,10 @@ const isShownFooter = computed(() => {
   return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
 });
 
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
 const {
   wrapperAttrs,
   titleAttrs,
@@ -39,7 +46,7 @@ const {
   descriptionAttrs,
   contentAttrs,
   footerAttrs,
-} = useAttrs(props);
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.container-card/storybook/stories.ts

@@ -12,9 +12,9 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import UHeader from "../../ui.text-header/UHeader.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UCardProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UCardArgs extends UCardProps {
+interface UCardArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.container-card/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 UCardProps {
+export interface Props {
   /**
    * Card title.
    */
@@ -16,7 +17,7 @@ export interface UCardProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-col/UCol.vue

@@ -1,25 +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 { UCol } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UColProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UColProps>(), {
-  gap: getDefault<UColProps>(defaultConfig, UCol).gap,
-  align: getDefault<UColProps>(defaultConfig, UCol).align,
-  content: getDefault<UColProps>(defaultConfig, UCol).content,
-  justify: getDefault<UColProps>(defaultConfig, UCol).justify,
-  reverse: getDefault<UColProps>(defaultConfig, UCol).reverse,
-  wrap: getDefault<UColProps>(defaultConfig, UCol).wrap,
-  dataTest: "",
+withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UCol),
 });
 
-const { wrapperAttrs } = useAttrs(props);
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+
+const { wrapperAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.container-col/storybook/stories.ts

@@ -10,9 +10,9 @@ import UInput from "../../ui.form-input/UInput.vue";
 import UButton from "../../ui.button/UButton.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UColProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UColArgs extends UColProps {
+interface UColArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.container-col/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 UColProps {
+export type Config = typeof defaultConfig;
+
+export interface Props {
   /**
    * The distance between nested elements.
    */
@@ -45,7 +47,7 @@ export interface UColProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-divider/UDivider.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { getDefault } from "../utils/ui.ts";
+import { computed } from "vue";
+
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import { UDivider } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UDividerProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UDividerProps>(), {
-  size: getDefault<UDividerProps>(defaultConfig, UDivider).size,
-  variant: getDefault<UDividerProps>(defaultConfig, UDivider).variant,
-  padding: getDefault<UDividerProps>(defaultConfig, UDivider).padding,
-  dashed: getDefault<UDividerProps>(defaultConfig, UDivider).dashed,
-  dotted: getDefault<UDividerProps>(defaultConfig, UDivider).dotted,
-  vertical: getDefault<UDividerProps>(defaultConfig, UDivider).vertical,
-  noBorder: getDefault<UDividerProps>(defaultConfig, UDivider).noBorder,
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UDivider),
+  label: "",
 });
 
-const { wrapperAttrs, dividerAttrs, labelAttrs } = useAttrs(props);
+const mutatedProps = computed(() => ({
+  label: Boolean(props.label),
+}));
+
+const { wrapperAttrs, dividerAttrs, labelAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>

package/ui.container-divider/storybook/stories.ts

@@ -9,9 +9,9 @@ import URow from "../../ui.container-row/URow.vue";
 import UDivider from "../../ui.container-divider/UDivider.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UDividerProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UDividerArgs extends UDividerProps {
+interface UDividerArgs extends Props {
   slotTemplate?: string;
   enum: "variant" | "size" | "padding";
 }

package/ui.container-divider/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 UDividerProps {
+export type Config = typeof defaultConfig;
+
+export interface Props {
   /**
    * Divider label.
    */
@@ -46,7 +48,7 @@ export interface UDividerProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-group/UGroup.vue

@@ -1,22 +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 UDivider from "../ui.container-divider/UDivider.vue";
 import UHeader from "../ui.text-header/UHeader.vue";
 
 import { UGroup } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UGroupProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UGroupProps>(), {
-  upperlined: getDefault<UGroupProps>(defaultConfig, UGroup).upperlined,
-  underlined: getDefault<UGroupProps>(defaultConfig, UGroup).underlined,
-  dataTest: "",
+withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UGroup),
 });
 
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
 const {
   headerAttrs,
   wrapperAttrs,
@@ -25,7 +27,7 @@ const {
   upperlineAttrs,
   underlineAttrs,
   contentAttrs,
-} = useAttrs(props);
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.container-group/storybook/stories.ts

@@ -11,9 +11,9 @@ import UInput from "../../ui.form-input/UInput.vue";
 import UButton from "../../ui.button/UButton.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UGroupProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UGroupArgs extends UGroupProps {
+interface UGroupArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.container-group/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 UGroupProps {
+export type Config = typeof defaultConfig;
+
+export interface Props {
   /**
    * Group title.
    */
@@ -21,7 +23,7 @@ export interface UGroupProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-groups/UGroups.vue

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

package/ui.container-groups/storybook/stories.ts

@@ -6,9 +6,9 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UInput from "../../ui.form-input/UInput.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UGroupsProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UGroupsArgs extends UGroupsProps {
+interface UGroupsArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.container-groups/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 UGroupsProps {
+export type Config = typeof defaultConfig;
+
+export interface Props {
   /**
    * The distance between nested elements.
    */
@@ -11,7 +13,7 @@ export interface UGroupsProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.