vueless 0.0.579 → 0.0.580

package/composables/useUI.ts

@@ -10,19 +10,19 @@ import {
   EXTENDS_PATTERN_REG_EXP,
 } from "../constants.js";
 
-import type { ComponentInternalInstance, ComputedRef } from "vue";
+import type { ComponentInternalInstance, Ref, ComputedRef } from "vue";
 import type {
-  BrandColors,
-  Strategies,
-  UnknownObject,
-  Component,
-  NestedComponent,
-  ComponentNames,
   CVA,
   UseUI,
   KeyAttrs,
   KeysAttrs,
-  ExtendedKeyClasses,
+  Strategies,
+  BrandColors,
+  MutatedProps,
+  UnknownObject,
+  ComponentNames,
+  ComponentConfig,
+  KeyAttrsWithConfig,
 } from "../types.ts";
 
 /**
@@ -33,45 +33,40 @@ import type {
  * 4. Component classes (class="...")
  */
 export default function useUI<T>(
-  defaultConfig: T & Component,
-  propsConfigGetter?: () => T & Component,
+  defaultConfig: T,
+  mutatedProps?: MutatedProps,
   topLevelClassKey?: string,
-  mutatedProps?: ComputedRef,
-): UseUI<T> {
+) {
   const { type, props } = getCurrentInstance() as ComponentInternalInstance;
+
   const componentName = type.__name as ComponentNames;
   const globalConfig = vuelessConfig?.component?.[componentName] || {};
 
-  const isStrategyValid =
-    vuelessConfig.strategy && Object.values(STRATEGY_TYPE).includes(vuelessConfig.strategy);
-
-  const vuelessStrategy = isStrategyValid
+  const vuelessStrategy = Object.values(STRATEGY_TYPE).includes(vuelessConfig.strategy || "")
     ? (vuelessConfig.strategy as Strategies)
     : (STRATEGY_TYPE.merge as Strategies);
 
-  const firstClassKey = defaultConfig ? Object.keys(defaultConfig)[0] : "";
-  const config = ref({} as T & Component);
+  const firstClassKey = Object.keys(defaultConfig || {})[0];
+  const config = ref({}) as Ref<ComponentConfig<T>>;
   const attrs = useAttrs();
 
   watchEffect(() => {
-    const propsConfig = propsConfigGetter ? propsConfigGetter() : {};
-
     config.value = getMergedConfig({
       defaultConfig,
       globalConfig,
-      propsConfig,
+      propsConfig: props.config,
       vuelessStrategy,
-    });
+    }) as ComponentConfig<T>;
   });
 
   /**
    * Get classes by given key (including CVA if config set).
    */
-  function getClasses(key: string, mutatedProps: UnknownObject): ComputedRef<string> {
+  function getClasses(key: string, mutatedProps?: MutatedProps) {
     return computed(() => {
       const mutatedPropsValue = toValue(mutatedProps);
-      const color = (toValue(mutatedProps)?.color as BrandColors) || props?.color;
-      const value = config.value[key] as (CVA & NestedComponent) | string;
+      const color = (toValue(mutatedProps || {}).color || props.color) as BrandColors;
+      const value = (config.value as ComponentConfig<T>)[key];
 
       let classes = "";
 
@@ -95,28 +90,13 @@ export default function useUI<T>(
     });
   }
 
-  /**
-   * Get an object where:
-   * – key: extendingKey
-   * – value: reactive string of extendingKey classes.
-   */
-  function getExtendingKeysClasses(extendingKeys: string[], mutatedProps = {}) {
-    const extendingClasses: ExtendedKeyClasses = {};
-
-    for (const key of extendingKeys) {
-      extendingClasses[key] = getClasses(key, mutatedProps);
-    }
-
-    return extendingClasses;
-  }
-
   /**
    * Returns an object where:
    * – key: elementKey
    * – value: reactive object of string element attributes (with classes).
    */
-  function getKeysAttrs(mutatedProps = {}): KeysAttrs {
-    const keysAttrs: KeysAttrs = {};
+  function getKeysAttrs(mutatedProps?: MutatedProps) {
+    const keysAttrs: KeysAttrs<T> = {};
 
     for (const key in config.value) {
       if (isSystemKey(key)) continue;
@@ -127,10 +107,9 @@ export default function useUI<T>(
       const extendsKeys = getExtendsKeys(baseClasses);
 
       if (extendsKeys.length) {
-        const classes = getExtendingKeysClasses(extendsKeys, mutatedProps);
-        const extendsClasses = Object.values(classes).map((item) => toValue(item));
+        const extendsClasses = extendsKeys.map((key) => toValue(getClasses(key, mutatedProps)));
 
-        const keyAttrs = keysAttrs[`${key}Attrs`] as ComputedRef<KeyAttrs>;
+        const keyAttrs = keysAttrs[`${key}Attrs`];
 
         keysAttrs[`${key}Attrs`] = computed(() => ({
           ...keyAttrs.value,
@@ -140,9 +119,9 @@ export default function useUI<T>(
           ]),
           config: getMergedConfig({
             defaultConfig: config.value[extendsKeys[0]],
-            globalConfig: keyAttrs.value.config as Component,
+            globalConfig: keyAttrs.value.config,
           }),
-        }));
+        })) as ComputedRef<KeyAttrsWithConfig<T>>;
       }
     }
 
@@ -152,24 +131,24 @@ export default function useUI<T>(
   /**
    * Get an element attributes for a given key.
    */
-  function getAttrs(configKey: string, classes: ComputedRef) {
+  function getAttrs(configKey: string, classes: ComputedRef<string>) {
     const nestedComponent = getNestedComponent(config.value[configKey] || "");
 
-    const attrs = useAttrs();
+    const attrs = useAttrs() as KeyAttrs;
     const isDev = isCSR && import.meta.env?.DEV;
     const vuelessAttrs = ref({});
     const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
 
     const commonAttrs: KeyAttrs = {
       ...(isTopLevelKey ? attrs : {}),
-      "vl-component": isDev ? (attrs["vl-component"] as string) || componentName || null : null,
-      "vl-key": isDev ? (attrs["vl-config-key"] as string) || configKey || null : null,
+      "vl-component": isDev ? attrs["vl-component"] || componentName || null : null,
+      "vl-key": isDev ? attrs["vl-key"] || configKey || null : null,
       "vl-child-component":
         isDev && attrs["vl-component"] ? nestedComponent || componentName : null,
       "vl-child-key": isDev && attrs["vl-component"] ? configKey : null,
     };
 
-    // Delete value key to prevent v-model overwrite
+    /* Delete value key to prevent v-model overwrite. */
     delete commonAttrs.value;
 
     watch(config, updateVuelessAttrs, { immediate: true });
@@ -180,28 +159,35 @@ export default function useUI<T>(
     }
 
     function updateVuelessAttrs() {
-      const configKeyValue = config.value[configKey] as Component | string;
-      const isObject = typeof configKeyValue === "object";
+      const configKeyValue = config.value[configKey];
+
+      let configAttr = {};
+      let defaultAttrs = {};
+
+      if (typeof configKeyValue === "object") {
+        configAttr = configKeyValue;
+        defaultAttrs = configKeyValue?.defaults;
+      }
 
       vuelessAttrs.value = {
         ...commonAttrs,
         class: toValue(classes),
-        ...(isObject ? { config: configKeyValue } : {}),
-        ...(isObject ? configKeyValue.defaults : {}),
+        config: configAttr,
+        ...defaultAttrs,
       };
     }
 
     return vuelessAttrs;
   }
 
-  return { config, getKeysAttrs, ...getKeysAttrs(mutatedProps) };
+  return { config, getKeysAttrs, ...getKeysAttrs(mutatedProps) } as UseUI<T>;
 }
 
 /**
  * Return base classes.
  */
-function getBaseClasses(value: string | CVA | NestedComponent) {
-  return typeof value === "object" ? (value.base as string) || "" : value || "";
+function getBaseClasses(value: string | CVA) {
+  return typeof value === "object" ? value.base || "" : value || "";
 }
 
 /**
@@ -217,7 +203,7 @@ function getExtendsKeys(values: string = ""): string[] {
 /**
  * Check is config key contains component name and returns it.
  */
-function getNestedComponent(value: string | NestedComponent | CVA) {
+function getNestedComponent(value: string | CVA) {
   const classes = getBaseClasses(value);
   const match = classes.match(NESTED_COMPONENT_PATTERN_REG_EXP);
 

package/constants.js

@@ -72,6 +72,9 @@ export const SYSTEM_CONFIG_KEY = {
   ...CVA_CONFIG_KEY,
 };
 
+/* Vueless system non-props defaults */
+export const SYSTEM_NON_PROPS_DEFAULTS = ["library", "style", "weight"];
+
 /* Component to folder mapping. */
 export const COMPONENTS = {
   /* Buttons & Links */

package/package.json

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

package/types.ts

@@ -55,7 +55,7 @@ import UInputFileConfig from "./ui.form-input-file/config.ts";
 import UInputMoneyConfig from "./ui.form-input-money/config.ts";
 import UDataListConfig from "./ui.data-list/config.ts";
 
-import type { ComputedRef, MaybeRef, Ref, UnwrapRef } from "vue";
+import type { ComputedRef, MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
 import type { LocaleOptions } from "./adatper.locale/vueless.ts";
 
@@ -67,10 +67,6 @@ export enum ColorMode {
   Auto = "auto",
 }
 
-export interface ExtendedKeyClasses {
-  [key: string]: Ref<string>;
-}
-
 export interface ThemeConfig {
   /**
    * Components brand (primary) color.
@@ -141,10 +137,12 @@ export interface Config extends ThemeConfig {
 }
 
 export type UnknownObject = Record<string, unknown>;
-export type UnknownArray = Array<unknown>;
+export type UnknownArray = unknown[];
 export type UnknownType = string | number | boolean | UnknownObject | undefined | null;
+
 export type ComponentNames = keyof Components; // keys union
 export type Strategies = "merge" | "replace" | "override";
+
 export type Gray = "gray";
 export type GrayColors = "slate" | "cool" | "zinc" | "neutral" | "stone";
 export type BrandColors =
@@ -167,6 +165,10 @@ export type BrandColors =
   | "pink"
   | "rose";
 
+export interface Directives {
+  tooltip?: Partial<Props>;
+}
+
 export interface Components {
   UText?: Partial<typeof UTextDefaultConfig>;
   UAlert?: Partial<typeof UAlertDefaultConfig>;
@@ -226,49 +228,30 @@ export interface Components {
   UDataList?: Partial<typeof UDataListConfig>;
 }
 
-export interface Directives {
-  tooltip?: Partial<Props>;
-}
-
-export interface Component {
+export type Component = {
   i18n?: UnknownObject;
   defaults?: Defaults;
   safelist?: (string: string) => TailwindSafelist[];
   strategy?: Strategies;
   transition?: Transition;
-  safelistColors?: BrandColors;
-  [key: string]: (CVA & NestedComponent) | object | string | undefined;
-}
-
-export type Defaults = {
-  color?: string;
-  [key: string]: unknown;
-};
-
-export interface NestedComponent {
-  component: string;
-  [key: string]: Record<string, string | object> | string;
-}
+  safelistColors?: BrandColors[];
+} & (CVA & NestedComponent);
 
 /* Make all config keys optional and allow to have string and object values. */
 export type ComponentConfig<T> = Partial<{
-  [K in keyof T]: T[K] | string;
+  [K in keyof T]: T[K] | string | UnknownObject;
 }> &
   Component;
 
-export type ComponentConfigRef<T> = [T & Component] extends [Ref]
-  ? Ref<T & Component>
-  : Ref<UnwrapRef<T & Component>, T & Component>;
-
-export interface UseUI<T> {
-  config: ComponentConfigRef<T>;
-  getKeysAttrs: (mutatedProps?: ComputedRef) => KeysAttrs;
-  [key: string]:
-    | ComputedRef<KeyAttrs>
-    | ComponentConfigRef<T>
-    | ((mutatedProps?: ComputedRef) => KeysAttrs);
+export interface NestedComponent {
+  [key: string]: Record<string, string | UnknownObject> | string;
 }
 
+export type Defaults = {
+  color?: string;
+  [key: string]: unknown;
+};
+
 export interface Transition {
   enterFromClass?: string;
   enterActiveClass?: string;
@@ -290,26 +273,34 @@ export interface CVACompoundVariants {
   [key: string]: string | number | undefined | null;
 }
 
-export interface VueAttrs {
-  id?: string;
-  class?: string;
-  value?: string;
-}
+export type MutatedProps = ComputedRef<UnknownObject>;
 
-export type KeysAttrs = Record<string, Ref<UnknownObject | undefined>>;
+export type UseUI<T> = {
+  config: Ref<T & ComponentConfig<T>>;
+  getKeysAttrs: (mutatedProps?: MutatedProps) => KeysAttrs<T>;
+} & KeysAttrs<T>;
 
-export interface UseAttrs<TConfig> {
-  config: Ref<TConfig | undefined>;
-  [key: string]: Ref<TConfig | undefined>;
-}
+export type KeysAttrs<T> = Record<
+  string,
+  Ref<KeyAttrsWithConfig<T>> | ComputedRef<KeyAttrsWithConfig<T>>
+>;
+
+export type KeyAttrsWithConfig<T> = {
+  config?: ComponentConfig<T>;
+} & KeyAttrs;
 
 export interface KeyAttrs extends VueAttrs {
   "vl-component"?: string | null;
   "vl-key"?: string | null;
   "vl-child-component"?: string | null;
   "vl-child-key"?: string | null;
-  config?: UnknownObject;
-  [key: string]: string | UnknownObject | undefined | null;
+  [key: string]: string | undefined | null;
+}
+
+export interface VueAttrs {
+  id?: string;
+  class?: string;
+  value?: string;
 }
 
 export interface CreateVuelessOptions {

package/ui.button/UButton.vue

@@ -17,7 +17,8 @@ import type { Props, LoaderSize, IconSize, Config } from "./types.ts";
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props>(defaultConfig, UButton),
+  ...getDefaults<Props, Config>(defaultConfig, UButton),
+  label: "",
 });
 
 const slots = useSlots();
@@ -102,8 +103,6 @@ const mutatedProps = computed(() => ({
 
 const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } = useUI<Config>(
   defaultConfig,
-  () => props.config,
-  "",
   mutatedProps,
 );
 </script>

package/ui.button/types.ts

@@ -1,7 +1,7 @@
 import defaultConfig from "./config.ts";
 import type { ComponentConfig } from "../types.ts";
 
-export type Config = ComponentConfig<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export type LoaderSize = "sm" | "md" | "lg";
 export type IconSize = "2xs" | "xs" | "sm" | "md";
@@ -116,7 +116,7 @@ export interface Props {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.button-link/ULink.vue

@@ -1,34 +1,22 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, useSlots } from "vue";
 import { RouterLink, useLink } from "vue-router";
-import { getDefault } from "../utils/ui.ts";
 
-import useAttrs from "./useAttrs.ts";
+import useUI from "../composables/useUI.ts";
+import { hasSlotContent } from "../utils/helper.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import defaultConfig from "./config.ts";
 import { ULink } from "./constants.ts";
 
-import type { ULinkProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<ULinkProps>(), {
-  size: getDefault<ULinkProps>(defaultConfig, ULink).size,
-  color: getDefault<ULinkProps>(defaultConfig, ULink).color,
-  type: getDefault<ULinkProps>(defaultConfig, ULink).type,
-  targetBlank: getDefault<ULinkProps>(defaultConfig, ULink).targetBlank,
-  ariaCurrentValue: getDefault<ULinkProps>(defaultConfig, ULink).ariaCurrentValue,
-  custom: getDefault<ULinkProps>(defaultConfig, ULink).custom,
-  replace: getDefault<ULinkProps>(defaultConfig, ULink).replace,
-  activeClass: getDefault<ULinkProps>(defaultConfig, ULink).activeClass,
-  exactActiveClass: getDefault<ULinkProps>(defaultConfig, ULink).exactActiveClass,
-  wrapperActiveClass: getDefault<ULinkProps>(defaultConfig, ULink).wrapperActiveClass,
-  wrapperExactActiveClass: getDefault<ULinkProps>(defaultConfig, ULink).wrapperExactActiveClass,
-  underlined: getDefault<ULinkProps>(defaultConfig, ULink).underlined,
-  dashed: getDefault<ULinkProps>(defaultConfig, ULink).dashed,
-  disabled: getDefault<ULinkProps>(defaultConfig, ULink).disabled,
-  block: getDefault<ULinkProps>(defaultConfig, ULink).block,
-  noRing: getDefault<ULinkProps>(defaultConfig, ULink).noRing,
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, ULink),
+  label: "",
+  to: undefined,
 });
 
 const emit = defineEmits([
@@ -58,6 +46,8 @@ const emit = defineEmits([
   "keydown",
 ]);
 
+const slots = useSlots();
+
 const isPresentRoute = computed(() => {
   return typeof props.to === "string" || typeof props.to === "object";
 });
@@ -83,8 +73,6 @@ const { route, isActive, isExactActive } = useLink(useLinkOptions);
 
 const wrapperRef = ref(null);
 
-const { wrapperAttrs, linkAttrs } = useAttrs(props);
-
 const wrapperActiveClasses = computed(() => [
   isActive.value && props.wrapperActiveClass,
   isExactActive.value && props.wrapperExactActiveClass,
@@ -136,6 +124,17 @@ defineExpose({
    */
   wrapperRef,
 });
+
+/**
+ * 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 */
+  defaultSlot: hasSlotContent(slots["default"]),
+}));
+
+const { wrapperAttrs, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>

package/ui.button-link/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 { ULinkProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface ULinkArgs extends ULinkProps {
+interface ULinkArgs extends Props {
   slotTemplate?: string;
   enum: "size" | "color";
 }

package/ui.button-link/types.ts

@@ -1,10 +1,11 @@
 import defaultConfig from "./config.ts";
+import type { ComponentConfig } from "../types.ts";
 
 import type { RouteLocationRaw } from "vue-router";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
-export interface ULinkProps {
+export interface Props {
   /**
    * Button label.
    */
@@ -52,7 +53,7 @@ export interface ULinkProps {
     | "brand";
 
   /**
-   * Link open type behaviour.
+   * Link open type behavior.
    */
   type?: "phone" | "email" | "link";
 
@@ -67,12 +68,12 @@ export interface ULinkProps {
   ariaCurrentValue?: string;
 
   /**
-   * Whether RouterLink should not wrap its content in an a tag.
+   * Whether RouterLink should not wrap its content in a tag.
    */
   custom?: boolean;
 
   /**
-   * Whether RouterLink should not wrap its content in an a tag.
+   * Whether RouterLink should not wrap its content in a tag.
    */
   replace?: boolean;
 
@@ -124,7 +125,7 @@ export interface ULinkProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.button-toggle/UToggle.vue

@@ -3,27 +3,22 @@ import { computed, provide, readonly } from "vue";
 
 import ULabel from "../ui.form-label/ULabel.vue";
 import UToggleItem from "../ui.button-toggle-item/UToggleItem.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 { UToggle, TYPE_RADIO, TYPE_CHECKBOX } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UToggleProps, LabelSize } from "./types.ts";
+import type { Props, LabelSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UToggleProps>(), {
-  variant: getDefault<UToggleProps>(defaultConfig, UToggle).variant,
-  size: getDefault<UToggleProps>(defaultConfig, UToggle).size,
-  labelAlign: getDefault<UToggleProps>(defaultConfig, UToggle).labelAlign,
-  multiple: getDefault<UToggleProps>(defaultConfig, UToggle).multiple,
-  separated: getDefault<UToggleProps>(defaultConfig, UToggle).separated,
-  disabled: getDefault<UToggleProps>(defaultConfig, UToggle).disabled,
-  block: getDefault<UToggleProps>(defaultConfig, UToggle).block,
-  round: getDefault<UToggleProps>(defaultConfig, UToggle).round,
-  square: getDefault<UToggleProps>(defaultConfig, UToggle).square,
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UToggle),
+  options: () => [],
+  modelValue: "",
+  label: "",
 });
 
 const emit = defineEmits([
@@ -34,8 +29,6 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
-const { toggleLabelAttrs, itemsAttrs, itemAttrs } = useAttrs(props);
-
 const selectedValue = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
@@ -88,6 +81,12 @@ provide("toggleSelectedValue", {
   selectedValue: readonly(selectedValue),
   updateSelectedValue,
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { toggleLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

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

@@ -12,9 +12,9 @@ import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
 import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UToggleProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UToggleArgs extends UToggleProps {
+interface UToggleArgs extends Props {
   slotTemplate?: string;
   enum: "variant" | "size";
 }

package/ui.button-toggle/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 type LabelSize = "sm" | "md" | "lg";
 
@@ -9,11 +11,11 @@ export interface UToggleOption {
   label: string;
 }
 
-export interface UToggleProps {
+export interface Props {
   /**
    * Selected value.
    */
-  modelValue?: string | number | Array<string | number>;
+  modelValue?: string | number | (string | number)[];
 
   /**
    * Toggle item options.
@@ -83,7 +85,7 @@ export interface UToggleProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.