vueless 0.0.612 → 0.0.614

package/composables/useUI.ts

@@ -158,10 +158,10 @@ export default function useUI<T>(
       vuelessAttrs.value = {
         ...commonAttrs,
         class: cx([...extendsClasses, toValue(classes)]),
-        config: merge({}, configAttr, extendsConfigAttr),
+        config: merge({}, extendsConfigAttr, configAttr),
         ...getDefaults({
-          ...(configAttr.defaults || {}),
           ...(extendsConfigAttr.defaults || {}),
+          ...(configAttr.defaults || {}),
         }),
       };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.612",
+  "version": "0.0.614",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.button-link/ULink.vue

@@ -7,14 +7,14 @@ import { hasSlotContent } from "../utils/helper.ts";
 import { getDefaults } from "../utils/ui.ts";
 
 import defaultConfig from "./config.ts";
-import { ULink } from "./constants.ts";
+import { COMPONENT_NAME } from "./constants.ts";
 
 import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, ULink),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   label: "",
   to: undefined,
 });

package/ui.button-link/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const ULink = "ULink";
+export const COMPONENT_NAME = "ULink";

package/ui.button-toggle/UToggle.vue

@@ -8,14 +8,14 @@ import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
 
 import defaultConfig from "./config.ts";
-import { UToggle, TYPE_RADIO, TYPE_CHECKBOX } from "./constants.ts";
+import { COMPONENT_NAME, TYPE_RADIO, TYPE_CHECKBOX } from "./constants.ts";
 
 import type { Props, LabelSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, UToggle),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: "",
   label: "",
@@ -73,9 +73,8 @@ provide("getToggleSize", () => props.size);
 provide("getToggleRound", () => props.round);
 provide("getToggleBlock", () => props.block);
 provide("getToggleSquare", () => props.square);
-provide("getToggleVariant", () => props.variant);
 provide("getToggleDisabled", () => props.disabled);
-provide("getToggleSeparated", () => props.separated);
+provide("getToggleSplit", () => props.split);
 
 provide("toggleSelectedValue", {
   selectedValue: readonly(selectedValue),
@@ -109,7 +108,7 @@ const { toggleLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(defaultConfig)
           :name="name"
           :model-value="item.value"
           :value="item.value"
-          :disabled="disabled"
+          :disabled="disabled || item.disabled"
           :label="item.label"
           v-bind="itemAttrs"
           :data-test="`${dataTest}-item-${index}`"

package/ui.button-toggle/config.ts

@@ -18,36 +18,35 @@ export default /*tw*/ {
         lg: "gap-3",
         xl: "gap-3",
       },
-      separated: {
+      split: {
         true: "flex flex-wrap",
         false: `
-          flex flex-nowrap -space-x-px gap-0 rounded-dynamic transition w-fit
-          [&>:first-child]:rounded-dynamic [&>:first-child]:rounded-r-none
-          [&>:last-child]:rounded-dynamic [&>:last-child]:rounded-l-none
-          [&>:first-child>*>*]:rounded-dynamic [&>:first-child>*>*]:rounded-r-none
-          [&>:last-child>*>*]:rounded-dynamic [&>:last-child>*>*]:rounded-l-none
+          p-1 gap-1 flex flex-nowrap w-fit transition
+          border border-gray-300 rounded-dynamic
+          hover:border-gray-400 hover:focus-within:border-brand-500 focus-within:border-brand-500
           focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
         `,
       },
+      disabled: {
+        true: "pointer-events-none",
+      },
       block: {
         true: "w-full flex-nowrap",
       },
+      round: {
+        true: "rounded-full",
+      },
     },
-    compoundVariants: [
-      { separated: false, variant: "thirdary", class: "space-x-px" },
-      { separated: false, multiple: true, class: "space-x-px" },
-    ],
   },
   item: "{UToggleItem}",
   defaults: {
-    variant: "primary",
     labelAlign: "top",
     size: "md",
+    split: false,
     block: false,
     round: false,
     square: false,
     disabled: false,
     multiple: false,
-    separated: false,
   },
 };

package/ui.button-toggle/constants.ts

@@ -2,6 +2,6 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UToggle = "UToggle";
+export const COMPONENT_NAME = "UToggle";
 export const TYPE_RADIO = "radio";
 export const TYPE_CHECKBOX = "checkbox";

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

@@ -16,7 +16,7 @@ import type { Props } from "../types.ts";
 
 interface UToggleArgs extends Props {
   slotTemplate?: string;
-  enum: "variant" | "size";
+  enum: "size";
 }
 
 export default {
@@ -109,41 +109,34 @@ Sizes.args = {
   enum: "size",
 };
 
-export const Variants = EnumVariantTemplate.bind({});
-Variants.args = {
-  name: "sizeTemplate",
-  enum: "variant",
-};
-
 export const Multiple = DefaultTemplate.bind({});
 Multiple.args = { name: "multipleTemplate", multiple: true };
 
 export const Block = DefaultTemplate.bind({});
 Block.args = { name: "block", block: true };
 
-export const Separated = DefaultTemplate.bind({});
-Separated.args = { name: "separated", separated: true };
+export const Split = DefaultTemplate.bind({});
+Split.args = { name: "split", split: true };
 
 export const Round = DefaultTemplate.bind({});
-Round.args = { name: "round", round: true, separated: true };
+Round.args = { name: "round", round: true, split: true };
 
 export const Square = DefaultTemplate.bind({});
 Square.args = {
   name: "square",
-  variant: "secondary",
   square: true,
   slotTemplate: `
     <template #default>
       <UToggleItem value="1">
-        <UIcon name="star" />
+        <UIcon name="star" color="inherit" />
       </UToggleItem>
 
       <UToggleItem value="2" >
-        <UIcon name="add" />
+        <UIcon name="add" color="inherit" />
       </UToggleItem>
 
       <UToggleItem value="3">
-        <UIcon name="timer" />
+        <UIcon name="timer" color="inherit" />
       </UToggleItem>
     </template>
   `,

package/ui.button-toggle/types.ts

@@ -9,6 +9,7 @@ export type LabelSize = "sm" | "md" | "lg";
 export interface UToggleOption {
   value: string | number;
   label: string;
+  disabled?: boolean;
 }
 
 export interface Props {
@@ -22,11 +23,6 @@ export interface Props {
    */
   options?: UToggleOption[];
 
-  /**
-   * Toggle variant.
-   */
-  variant?: "primary" | "secondary" | "thirdary";
-
   /**
    * Toggle size.
    */
@@ -58,9 +54,9 @@ export interface Props {
   multiple?: boolean;
 
   /**
-   * Separate toggle items.
+   * Show items without a grouping border.
    */
-  separated?: boolean;
+  split?: boolean;
 
   /**
    * Make toggle disabled.

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref, useId, toValue } from "vue";
+import { computed, inject, onMounted, ref, useId } from "vue";
 
 import UButton from "../ui.button/UButton.vue";
 
@@ -9,7 +9,7 @@ import { getDefaults } from "../utils/ui.ts";
 import { TYPE_RADIO } from "../ui.button-toggle/constants.ts";
 
 import defaultConfig from "./config.ts";
-import { UToggleItem } from "./constants.ts";
+import { COMPONENT_NAME } from "./constants.ts";
 
 import type { Props, ToggleInjectValues, ToggleContextType, Config } from "./types.ts";
 
@@ -18,7 +18,7 @@ type ButtonSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, UToggleItem),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   modelValue: "",
   label: "",
 });
@@ -34,26 +34,23 @@ const emit = defineEmits([
 /* eslint-disable prettier/prettier */
 const getToggleName = inject<() => string>("getToggleName", () => "toggle");
 const getToggleType = inject<() => string>("getToggleType", () =>
-  getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).type || TYPE_RADIO
+  getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).type || TYPE_RADIO
 );
 const getToggleSize = inject<() => ButtonSize>("getToggleSize", () =>
-  (getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).size || "md") as ButtonSize
+  (getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).size || "md") as ButtonSize
 );
 const getToggleRound = inject<() => boolean>("getToggleRound", () =>
-  getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).round || false
+  getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).round || false
 );
 const getToggleBlock = inject<() => boolean>("getToggleBlock", () =>
-  getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).block || false
+  getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).block || false
 );
 const getToggleSquare = inject<() => boolean>("getToggleSquare", () =>
-  getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).square || false
+  getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).square || false
 );
-const getToggleVariant = inject<string>("getToggleVariant",
-  getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).variant || "secondary"
-);
-const getToggleSeparated = inject<boolean>("getToggleSeparated", true);
+const getToggleSplit = inject<() => boolean>("getToggleSplit", () => true);
 const getToggleDisabled = inject<() => boolean>("getToggleDisabled", () =>
-  props.disabled || getDefaults<ToggleInjectValues, Config>(defaultConfig, UToggleItem).disabled || false
+  props.disabled || getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).disabled || false
 );
 /* eslint-enable prettier/prettier */
 
@@ -99,29 +96,30 @@ function onClickSetValue() {
  * 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);
+const { toggleButtonAttrs, toggleButtonActiveAttrs, toggleInputAttrs } = useUI<Config>(
+  defaultConfig,
+  mutatedProps,
+);
 </script>
 
 <template>
   <UButton
+    :label="label"
     tabindex="0"
+    color="brand"
     :for="elementId"
-    :no-ring="!getToggleSeparated"
-    color="grayscale"
-    variant="secondary"
-    :label="label"
+    :filled="getToggleSplit()"
+    :no-ring="!getToggleSplit()"
     :size="getToggleSize()"
     :round="getToggleRound()"
     :block="getToggleBlock()"
     :square="getToggleSquare()"
-    :disabled="getToggleDisabled()"
-    v-bind="toggleButtonAttrs"
+    :disabled="getToggleDisabled() || disabled"
+    v-bind="isSelected ? toggleButtonActiveAttrs : toggleButtonAttrs"
     @click="onClickSetValue"
   >
     <template #left>

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

@@ -1,32 +1,15 @@
 export default /*tw*/ {
   toggleButton: {
-    base: `
-      {UButton}
-      border-gray-300 font-normal
-      hover:text-brand-600 hover:border-brand-600 hover:relative hover:z-10
-      focus:text-brand-600 focus:border-brand-600 focus:relative focus:z-10 focus:ring-brand-700/15
-      focus-within:ring-brand-700/15 active:text-brand-700 active:border-brand-700 active:relative
-      active:z-10 disabled:z-0
-    `,
-    variants: {
-      separated: {
-        false: "rounded-none focus:ring-0",
-      },
-      selected: {
-        false: "relative disabled:z-10",
-      },
-      variant: {
-        thirdary: `
-          !text-gray-900 !border-transparent bg-brand-600/10
-          hover:bg-brand-600/15 focus:bg-brand-600/15 active:bg-brand-600/20
-        `,
-      },
+    base: "{UButton} font-normal",
+    defaults: {
+      variant: "thirdary",
+    },
+  },
+  toggleButtonActive: {
+    base: "{UButton} {>toggleButton}",
+    defaults: {
+      variant: "primary",
     },
-    compoundVariants: [
-      { selected: true, variant: "primary", class: "!text-white bg-brand-600 !border-brand-600" },
-      { selected: true, variant: "secondary", class: "text-brand-600 border-brand-600 bg-brand-600/10" },
-      { selected: true, variant: "thirdary", class: "!bg-brand-600/20" },
-    ],
   },
   toggleInput: "p-0 m-0 size-0 invisible absolute",
   defaults: {

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

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UToggleItem = "UToggleItem";
+export const COMPONENT_NAME = "UToggleItem";

package/ui.container-accordion/UAccordion.vue

@@ -7,7 +7,7 @@ import { getDefaults } from "../utils/ui.ts";
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
 
-import { UAccordion } from "./constants.ts";
+import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
 import type { Props, DividerSize, Config } from "./types.ts";
@@ -15,7 +15,7 @@ import type { Props, DividerSize, Config } from "./types.ts";
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, UAccordion),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
 const emit = defineEmits([

package/ui.container-accordion/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UAccordion = "UAccordion";
+export const COMPONENT_NAME = "UAccordion";

package/ui.container-card/UCard.vue

@@ -9,14 +9,14 @@ import UHeader from "../ui.text-header/UHeader.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
 
 import defaultConfig from "./config.ts";
-import { UCard } from "./constants.ts";
+import { COMPONENT_NAME } from "./constants.ts";
 
 import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, UCard),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
 const slots = useSlots();

package/ui.container-card/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UCard = "UCard";
+export const COMPONENT_NAME = "UCard";

package/ui.container-col/UCol.vue

@@ -2,7 +2,7 @@
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
 
-import { UCol } from "./constants.ts";
+import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
 import type { Props, Config } from "./types.ts";
@@ -10,7 +10,7 @@ import type { Props, Config } from "./types.ts";
 defineOptions({ inheritAttrs: false });
 
 withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, UCol),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
 /**

package/ui.container-col/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UCol = "UCol";
+export const COMPONENT_NAME = "UCol";

package/ui.container-divider/UDivider.vue

@@ -4,7 +4,7 @@ import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
 
-import { UDivider } from "./constants.ts";
+import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
 import type { Props, Config } from "./types.ts";
@@ -12,7 +12,7 @@ import type { Props, Config } from "./types.ts";
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, UDivider),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   label: "",
 });
 

package/ui.container-divider/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UDivider = "UDivider";
+export const COMPONENT_NAME = "UDivider";

package/ui.container-group/UGroup.vue

@@ -4,7 +4,7 @@ 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 { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
 import type { Props, Config } from "./types.ts";
@@ -12,7 +12,7 @@ import type { Props, Config } from "./types.ts";
 defineOptions({ inheritAttrs: false });
 
 withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, UGroup),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
 /**

package/ui.container-group/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UGroup = "UGroup";
+export const COMPONENT_NAME = "UGroup";

package/ui.container-groups/UGroups.vue

@@ -2,7 +2,7 @@
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
 
-import { UGroups } from "./constants.ts";
+import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
 import type { Props, Config } from "./types.ts";
@@ -10,7 +10,7 @@ import type { Props, Config } from "./types.ts";
 defineOptions({ inheritAttrs: false });
 
 withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, UGroups),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
 /**

package/ui.container-groups/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UGroups = "UGroup";
+export const COMPONENT_NAME = "UGroup";

package/ui.container-modal/UModal.vue

@@ -11,14 +11,14 @@ import UHeader from "../ui.text-header/UHeader.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
 
 import defaultConfig from "./config.ts";
-import { UModal } from "./constants.ts";
+import { COMPONENT_NAME } from "./constants.ts";
 
 import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, UModal),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   modelValue: false,
   backTo: "",
   backLabel: "",

package/ui.container-modal/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UModal = "UModal";
+export const COMPONENT_NAME = "UModal";

package/ui.container-modal-confirm/UModalConfirm.vue

@@ -10,7 +10,7 @@ import UButton from "../ui.button/UButton.vue";
 import UModal from "../ui.container-modal/UModal.vue";
 
 import defaultConfig from "./config.ts";
-import { UModalConfirm } from "./constants.ts";
+import { COMPONENT_NAME } from "./constants.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
 import type { Props, Config } from "./types.ts";
@@ -18,7 +18,7 @@ import type { Props, Config } from "./types.ts";
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, UModalConfirm),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   modelValue: false,
   confirmLabel: "",
 });
@@ -48,7 +48,7 @@ const isShownModal = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const i18nGlobal = tm(UModalConfirm);
+const i18nGlobal = tm(COMPONENT_NAME);
 const currentLocale = computed(() =>
   merge({}, defaultConfig.i18n, i18nGlobal, props?.config?.i18n),
 );

package/ui.container-modal-confirm/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UModalConfirm = "UModalConfirm";
+export const COMPONENT_NAME = "UModalConfirm";

package/ui.container-page/UPage.vue

@@ -11,7 +11,7 @@ import UIcon from "../ui.image-icon/UIcon.vue";
 import UHeader from "../ui.text-header/UHeader.vue";
 
 import defaultConfig from "./config.ts";
-import { UPage } from "./constants.ts";
+import { COMPONENT_NAME } from "./constants.ts";
 
 import type { Props, Config } from "./types.ts";
 
@@ -20,7 +20,7 @@ const slots = useSlots();
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, UPage),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   backTo: "",
   backLabel: "",
 });

package/ui.container-page/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UPage = "UPage";
+export const COMPONENT_NAME = "UPage";

package/ui.container-row/URow.vue

@@ -2,7 +2,7 @@
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
 
-import { URow } from "./constants.ts";
+import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
 import type { Props, Config } from "./types.ts";
@@ -10,7 +10,7 @@ import type { Props, Config } from "./types.ts";
 defineOptions({ inheritAttrs: false });
 
 withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, URow),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
 /**

package/ui.container-row/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const URow = "URow";
+export const COMPONENT_NAME = "URow";