vueless 0.0.579 → 0.0.580

package/ui.data-list/UDataList.vue

@@ -3,7 +3,8 @@ import { computed } from "vue";
 import draggable from "vuedraggable";
 import { merge } from "lodash-es";
 
-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";
@@ -11,23 +12,15 @@ import UEmpty from "../ui.text-empty/UEmpty.vue";
 
 import { UDataList as UDataListName } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
-import type { UnknownObject } from "../types.ts";
-import type { UDataListProps, IconSize, DragMoveEvent, DataListItem } from "./types.ts";
+import type { Props, IconSize, DragMoveEvent, DataListItem, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UDataListProps>(), {
-  size: getDefault<UDataListProps>(defaultConfig, UDataListName).size,
-  labelKey: getDefault<UDataListProps>(defaultConfig, UDataListName).labelKey,
-  valueKey: getDefault<UDataListProps>(defaultConfig, UDataListName).valueKey,
-  animationDuration: getDefault<UDataListProps>(defaultConfig, UDataListName).animationDuration,
-  nesting: getDefault<UDataListProps>(defaultConfig, UDataListName).nesting,
-  hideEmptyStateForNesting: false,
-  dataTest: "",
-  config: () => ({}),
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UDataListName),
+  list: () => [],
 });
 
 const emit = defineEmits([
@@ -52,33 +45,6 @@ const emit = defineEmits([
   "clickDelete",
 ]);
 
-defineSlots<{
-  edit: { element: UnknownObject };
-  delete: { element: UnknownObject };
-  drag: { element: UnknownObject };
-  empty: {
-    emptyTitle: string;
-    emptyDescription: string;
-  };
-  label: { item: DataListItem; active: boolean };
-  actions: { item: DataListItem };
-}>();
-
-const {
-  config,
-  wrapperAttrs,
-  emptyAttrs,
-  draggableAttrs,
-  nestedAttrs,
-  itemWrapperAttrs,
-  itemAttrs,
-  labelAttrs,
-  labelCrossedAttrs,
-  customActionsAttrs,
-  deleteIconAttrs,
-  editIconAttrs,
-  dragIconAttrs,
-} = useAttrs(props);
 const { tm } = useLocale();
 
 const i18nGlobal = tm(UDataListName);
@@ -143,6 +109,26 @@ function prepareSortData(list: DataListItem[] = [], parentValue: string | number
 
   return sortData;
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  config,
+  wrapperAttrs,
+  emptyAttrs,
+  draggableAttrs,
+  nestedAttrs,
+  itemWrapperAttrs,
+  itemAttrs,
+  labelAttrs,
+  labelCrossedAttrs,
+  customActionsAttrs,
+  deleteIconAttrs,
+  editIconAttrs,
+  dragIconAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -191,7 +177,7 @@ function prepareSortData(list: DataListItem[] = [], parentValue: string | number
             <slot
               name="drag"
               :item="element"
-              :icon-name="config.defaults?.dragIcon"
+              :icon-name="config.defaults.dragIcon"
               :icon-size="iconSize"
             >
               <UIcon
@@ -199,7 +185,7 @@ function prepareSortData(list: DataListItem[] = [], parentValue: string | number
                 color="gray"
                 variant="light"
                 :size="iconSize"
-                :name="config.defaults?.dragIcon"
+                :name="config.defaults.dragIcon"
                 v-bind="dragIconAttrs"
               />
             </slot>
@@ -236,7 +222,7 @@ function prepareSortData(list: DataListItem[] = [], parentValue: string | number
               <slot
                 name="delete"
                 :item="element"
-                :icon-name="config.defaults?.deleteIcon"
+                :icon-name="config.defaults.deleteIcon"
                 :icon-size="iconSize"
               >
                 <UIcon
@@ -245,7 +231,7 @@ function prepareSortData(list: DataListItem[] = [], parentValue: string | number
                   interactive
                   color="red"
                   :size="iconSize"
-                  :name="config.defaults?.deleteIcon"
+                  :name="config.defaults.deleteIcon"
                   :tooltip="currentLocale.delete"
                   v-bind="deleteIconAttrs"
                   :data-test="`${dataTest}-delete`"
@@ -262,7 +248,7 @@ function prepareSortData(list: DataListItem[] = [], parentValue: string | number
               <slot
                 name="edit"
                 :item="element"
-                :icon-name="config.defaults?.editIcon"
+                :icon-name="config.defaults.editIcon"
                 :icon-size="iconSize"
               >
                 <UIcon
@@ -271,7 +257,7 @@ function prepareSortData(list: DataListItem[] = [], parentValue: string | number
                   interactive
                   color="gray"
                   :size="iconSize"
-                  :name="config.defaults?.editIcon"
+                  :name="config.defaults.editIcon"
                   :tooltip="currentLocale.edit"
                   v-bind="editIconAttrs"
                   :data-test="`${dataTest}-edit`"
@@ -293,23 +279,26 @@ function prepareSortData(list: DataListItem[] = [], parentValue: string | number
             @click-edit="onClickEdit"
             @drag-sort="onDragEnd"
           >
-            <template #label="{ item, active }">
+            <template #label="slotProps: { item: DataListItem; active: boolean }">
               <!--
                 @slot Use it to modify label.
                 @binding {object} item
                 @binding {boolean} active
               -->
-              <slot name="label" :item="item" :active="active">
-                <div v-bind="active ? labelAttrs : labelCrossedAttrs" v-text="item[labelKey]" />
+              <slot name="label" :item="slotProps.item" :active="slotProps.active">
+                <div
+                  v-bind="slotProps.active ? labelAttrs : labelCrossedAttrs"
+                  v-text="slotProps.item[labelKey]"
+                />
               </slot>
             </template>
 
-            <template #actions="{ item }">
+            <template #actions="slotProps: { item: DataListItem }">
               <!--
                 @slot Use it to add custom actions.
                 @binding {object} item
               -->
-              <slot name="actions" :item="item" />
+              <slot name="actions" :item="slotProps.item" />
             </template>
           </UDataList>
         </div>

package/ui.data-list/storybook/stories.ts

@@ -11,9 +11,9 @@ import UButton from "../../ui.button/UButton.vue";
 import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UDataListProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UDataListArgs extends UDataListProps {
+interface UDataListArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.data-list/types.ts

@@ -2,9 +2,9 @@ import defaultConfig from "./config.ts";
 
 import DraggableContext from "vuedraggable";
 
-import type { UnknownType } from "../types.ts";
+import type { ComponentConfig, UnknownType } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export type IconSize = "xs" | "sm" | "md";
 
@@ -24,7 +24,7 @@ export interface DataListItem {
   [key: string]: UnknownType | DataListItem[];
 }
 
-export interface UDataListProps {
+export interface Props {
   /**
    * Data item options.
    */
@@ -79,7 +79,7 @@ export interface UDataListProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.data-table/UTable.vue

@@ -18,7 +18,8 @@ import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
 import UTableRow from "./UTableRow.vue";
 
-import { getDefault, cx } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults, cx } from "../utils/ui.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 import { useLocale } from "../composables/useLocale.ts";
 import { PX_IN_REM } from "../constants.js";
@@ -35,23 +36,17 @@ import {
 } from "./utilTable.ts";
 
 import { UTable } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { Cell, Row, RowId, UTableProps, UTableRowAttrs } from "./types.ts";
+import type { Cell, Row, RowId, UTableProps, UTableRowAttrs, Config } from "./types.ts";
 import type { Ref, RendererElement, ComputedRef } from "vue";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<UTableProps>(), {
-  emptyCellLabel: getDefault<UTableProps>(defaultConfig, UTable).emptyCellLabel,
-  dateDivider: () => getDefault<UTableProps>(defaultConfig, UTable).dateDivider || false,
-  selectable: getDefault<UTableProps>(defaultConfig, UTable).selectable,
-  compact: getDefault<UTableProps>(defaultConfig, UTable).compact,
-  stickyHeader: getDefault<UTableProps>(defaultConfig, UTable).stickyHeader,
-  stickyFooter: getDefault<UTableProps>(defaultConfig, UTable).stickyFooter,
-  loading: getDefault<UTableProps>(defaultConfig, UTable).loading,
-  dataTest: "",
-  config: () => ({}),
+  ...getDefaults<UTableProps, Config>(defaultConfig, UTable),
+  columns: () => [],
+  rows: () => [],
+  dateDivider: () => [],
 });
 
 const emit = defineEmits([
@@ -198,54 +193,6 @@ const isSelectedAllRows = computed(() => {
   return selectedRows.value.length === rows.length;
 });
 
-const {
-  config,
-  wrapperAttrs,
-  stickyHeaderCellAttrs,
-  stickyHeaderAttrs,
-  tableWrapperAttrs,
-  headerRowAttrs,
-  bodyRowAfterAttrs,
-  bodyRowBeforeAttrs,
-  bodyRowBeforeCheckedAttrs,
-  bodyRowBeforeCellAttrs,
-  footerAttrs,
-  bodyRowDateDividerAttrs,
-  headerCellBaseAttrs,
-  headerCellCheckboxAttrs,
-  headerActionsCheckboxAttrs,
-  stickyHeaderCheckboxAttrs,
-  headerCheckboxAttrs,
-  headerCounterAttrs,
-  bodyEmptyStateAttrs,
-  bodyDateDividerAttrs,
-  bodyCellDateDividerAttrs,
-  headerActionsCounterAttrs,
-  stickyHeaderCounterAttrs,
-  stickyHeaderLoaderAttrs,
-  tableAttrs,
-  headerLoaderAttrs,
-  bodyAttrs,
-  footerRowAttrs,
-  stickyFooterRowAttrs,
-  headerAttrs,
-  bodyCellContentAttrs,
-  bodyCellCheckboxAttrs,
-  bodyCheckboxAttrs,
-  bodyCellNestedAttrs,
-  bodyCellNestedExpandIconAttrs,
-  bodyCellNestedCollapseIconAttrs,
-  bodyCellBaseAttrs,
-  bodyCellNestedExpandIconWrapperAttrs,
-  bodyRowCheckedAttrs,
-  bodyRowAttrs,
-} = useAttrs(props, {
-  tableRows,
-  isShownActionsHeader,
-  isHeaderSticky,
-  isFooterSticky,
-});
-
 const tableRowAttrs = computed(() => ({
   bodyCellContentAttrs,
   bodyCellCheckboxAttrs,
@@ -448,6 +395,60 @@ defineExpose({
    */
   clearSelectedItems,
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  /* component state, not a props */
+  actionsHeader: isShownActionsHeader.value,
+  stickedHeader: isHeaderSticky.value,
+  stickedFooter: isFooterSticky.value,
+}));
+
+const {
+  config,
+  wrapperAttrs,
+  stickyHeaderCellAttrs,
+  stickyHeaderAttrs,
+  tableWrapperAttrs,
+  headerRowAttrs,
+  bodyRowAfterAttrs,
+  bodyRowBeforeAttrs,
+  bodyRowBeforeCheckedAttrs,
+  bodyRowBeforeCellAttrs,
+  footerAttrs,
+  bodyRowDateDividerAttrs,
+  headerCellBaseAttrs,
+  headerCellCheckboxAttrs,
+  headerActionsCheckboxAttrs,
+  stickyHeaderCheckboxAttrs,
+  headerCheckboxAttrs,
+  headerCounterAttrs,
+  bodyEmptyStateAttrs,
+  bodyDateDividerAttrs,
+  bodyCellDateDividerAttrs,
+  headerActionsCounterAttrs,
+  stickyHeaderCounterAttrs,
+  stickyHeaderLoaderAttrs,
+  tableAttrs,
+  headerLoaderAttrs,
+  bodyAttrs,
+  footerRowAttrs,
+  stickyFooterRowAttrs,
+  headerAttrs,
+  bodyCellContentAttrs,
+  bodyCellCheckboxAttrs,
+  bodyCheckboxAttrs,
+  bodyCellNestedAttrs,
+  bodyCellNestedExpandIconAttrs,
+  bodyCellNestedCollapseIconAttrs,
+  bodyCellBaseAttrs,
+  bodyCellNestedExpandIconWrapperAttrs,
+  bodyRowCheckedAttrs,
+  bodyRowAttrs,
+} = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>

package/ui.data-table/types.ts

@@ -1,7 +1,9 @@
 import defaultConfig from "./config.ts";
 
-import type { UnknownObject } from "../types.ts";
 import type { Ref } from "vue";
+import type { ComponentConfig, UnknownObject } from "../types.ts";
+
+export type Config = typeof defaultConfig;
 
 type RowKeys =
   | number
@@ -53,7 +55,6 @@ export interface ColumnObject {
 }
 
 export type Column = ColumnObject | string;
-export type Config = Partial<typeof defaultConfig>;
 
 export interface RowScopedProps {
   value: unknown | string | number;
@@ -109,7 +110,7 @@ export interface UTableProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -1,36 +1,27 @@
 <script setup lang="ts">
-import { nextTick, ref, useId, useTemplateRef } from "vue";
+import { ref, computed, nextTick, useId, useTemplateRef } from "vue";
+
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UBadge from "../ui.text-badge/UBadge.vue";
 import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
 
-import { getDefault } from "../utils/ui.ts";
-
 import { vClickOutside } from "../directives";
 
 import defaultConfig from "./config.ts";
 import { UDropdownBadge } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UDropdownBadgeProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 import type { Option } from "../ui.dropdown-list/types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UDropdownBadgeProps>(), {
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UDropdownBadge),
   options: () => [],
-  labelKey: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).labelKey,
-  variant: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).variant,
-  color: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).color,
-  size: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).size,
-  round: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).round,
-  noIcon: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).noIcon,
-  yPosition: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).yPosition,
-  xPosition: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).xPosition,
-  id: "",
-  dataTest: "",
-  config: () => ({}),
+  label: "",
 });
 
 const emit = defineEmits([
@@ -48,13 +39,6 @@ const dropdownListRef = useTemplateRef<UDropdownListRef>("dropdown-list");
 
 const elementId = props.id || useId();
 
-const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIconAttrs } = useAttrs(
-  props,
-  {
-    isShownOptions,
-  },
-);
-
 function onClickBadge() {
   isShownOptions.value = !isShownOptions.value;
 
@@ -72,6 +56,18 @@ function onClickOption(option: Option) {
 
   hideOptions();
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  /* component state, not a props */
+  opened: isShownOptions.value,
+}));
+
+const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIconAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -117,7 +113,7 @@ function onClickOption(option: Option) {
             internal
             :color="iconColor"
             :size="size"
-            :name="config.defaults?.dropdownIcon"
+            :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
             :data-test="`${dataTest}-dropdown`"
           />

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

@@ -10,14 +10,14 @@ import URow from "../../ui.container-row/URow.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UDropdownBadgeProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface DefaultUDropdownBadgeArgs extends UDropdownBadgeProps {
+interface DefaultUDropdownBadgeArgs extends Props {
   slotTemplate?: string;
 }
 
 interface EnumUDropdownBadgeArgs extends DefaultUDropdownBadgeArgs {
-  enum: keyof Pick<UDropdownBadgeProps, "color" | "size">;
+  enum: keyof Pick<Props, "color" | "size">;
 }
 
 export default {

package/ui.dropdown-badge/types.ts

@@ -1,10 +1,11 @@
 import defaultConfig from "./config.ts";
 
 import type { Option } from "../ui.dropdown-list/types.ts";
+import type { ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
-export interface UDropdownBadgeProps {
+export interface Props {
   /**
    * Badge label.
    */
@@ -84,7 +85,7 @@ export interface UDropdownBadgeProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.dropdown-button/UDropdownButton.vue

@@ -1,39 +1,27 @@
 <script setup lang="ts">
 import { nextTick, computed, provide, ref, useId, useTemplateRef } 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 UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
 
-import { getDefault } from "../utils/ui.ts";
-
 import { vClickOutside } from "../directives";
 
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 import { UDropdownButton, BUTTON_VARIANT } from "./constants.ts";
 
-import type { UDropdownButtonProps, IconSize, DropdownSize } from "./types.ts";
+import type { Props, IconSize, DropdownSize, Config } from "./types.ts";
 import type { Option } from "../ui.dropdown-list/types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UDropdownButtonProps>(), {
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UDropdownButton),
   options: () => [],
-  labelKey: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).labelKey,
-  variant: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).variant,
-  color: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).color,
-  filled: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).filled,
-  size: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).size,
-  round: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).round,
-  square: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).square,
-  disabled: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).disabled,
-  noIcon: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).noIcon,
-  yPosition: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).yPosition,
-  xPosition: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).xPosition,
-  id: "",
-  dataTest: "",
-  config: () => ({}),
+  label: "",
 });
 
 const emit = defineEmits([
@@ -53,9 +41,6 @@ const dropdownListRef = useTemplateRef<UDropdownListRef>("dropdown-list");
 
 const elementId = props.id || useId();
 
-const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapperAttrs } =
-  useAttrs(props, { isShownOptions });
-
 const iconColor = computed(() => {
   return props.variant === BUTTON_VARIANT.primary ? "white" : props.color;
 });
@@ -105,6 +90,18 @@ function hideOptions() {
 function onClickList() {
   hideOptions();
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  /* component state, not a props */
+  opened: isShownOptions.value,
+}));
+
+const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapperAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -151,7 +148,7 @@ function onClickList() {
             internal
             :size="iconSize"
             :color="iconColor"
-            :name="config.defaults?.dropdownIcon"
+            :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
             :data-test="`${dataTest}-dropdown`"
           />

package/ui.dropdown-button/storybook/stories.ts

@@ -11,14 +11,14 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UDropdownButtonProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface DefaultUDropdownButtonArgs extends UDropdownButtonProps {
+interface DefaultUDropdownButtonArgs extends Props {
   slotTemplate?: string;
 }
 
 interface EnumUDropdownButtonArgs extends DefaultUDropdownButtonArgs {
-  enum: keyof Pick<UDropdownButtonProps, "size" | "variant">;
+  enum: keyof Pick<Props, "size" | "variant">;
 }
 
 export default {

package/ui.dropdown-button/types.ts

@@ -1,13 +1,14 @@
 import defaultConfig from "./config.ts";
 
 import type { Option } from "../ui.dropdown-list/types.ts";
+import type { ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export type IconSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 export type DropdownSize = "sm" | "md" | "lg";
 
-export interface UDropdownButtonProps {
+export interface Props {
   /**
    * Button label.
    */
@@ -102,7 +103,7 @@ export interface UDropdownButtonProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.