vueless 0.0.716 → 0.0.718

package/constants.js

@@ -82,7 +82,6 @@ export const COMPONENTS = {
   UButton: "ui.button",
   ULink: "ui.button-link",
   UToggle: "ui.button-toggle",
-  UToggleItem: "ui.button-toggle-item",
 
   /* Dropdowns */
   UDropdownButton: "ui.dropdown-button",

package/package.json

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

package/types.ts

@@ -11,7 +11,6 @@ import UDotDefaultConfig from "./ui.other-dot/config.ts";
 import UButtonDefaultConfig from "./ui.button/config.ts";
 import ULinkDefaultConfig from "./ui.button-link/config.ts";
 import UToggleDefaultConfig from "./ui.button-toggle/config.ts";
-import UToggleItemDefaultConfig from "./ui.button-toggle-item/config.ts";
 import UBadgeDefaultConfig from "./ui.text-badge/config.ts";
 import UCalendarDefaultConfig from "./ui.form-calendar/config.ts";
 import UDatePickerConfig from "./ui.form-date-picker/config.ts";
@@ -196,7 +195,6 @@ export interface Components {
   UButton: Partial<typeof UButtonDefaultConfig>;
   ULink: Partial<typeof ULinkDefaultConfig>;
   UToggle: Partial<typeof UToggleDefaultConfig>;
-  UToggleItem: Partial<typeof UToggleItemDefaultConfig>;
   UBadge: Partial<typeof UBadgeDefaultConfig>;
   UCalendar: Partial<typeof UCalendarDefaultConfig>;
   UDatePicker: Partial<typeof UDatePickerConfig>;

package/ui.button-toggle/UToggle.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import { computed, provide, readonly } from "vue";
+import { computed } from "vue";
 
 import ULabel from "../ui.form-label/ULabel.vue";
-import UToggleItem from "../ui.button-toggle-item/UToggleItem.vue";
+import UButton from "../ui.button/UButton.vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
 
 import defaultConfig from "./config.ts";
-import { COMPONENT_NAME, TYPE_RADIO, TYPE_CHECKBOX } from "./constants.ts";
+import { COMPONENT_NAME } from "./constants.ts";
 
-import type { Props, Config } from "./types.ts";
+import type { Props, Config, UToggleOption } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
-  modelValue: "",
+  modelValue: () => [],
   label: "",
 });
 
@@ -34,45 +34,39 @@ const selectedValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const type = computed(() => {
-  return props.multiple ? TYPE_CHECKBOX : TYPE_RADIO;
-});
+function isSelected(item: UToggleOption) {
+  if (Array.isArray(selectedValue.value)) {
+    return selectedValue.value.includes(item.value);
+  }
 
-function updateSelectedValue(value: string | number, checked: boolean) {
-  if (type.value === TYPE_RADIO) {
-    selectedValue.value = value;
+  return selectedValue.value === item.value;
+}
 
-    return;
-  }
+function onClickOption(item: UToggleOption) {
+  if (props.multiple) {
+    const newValue = Array.isArray(selectedValue.value) ? [...selectedValue.value] : [];
+    const index = newValue.indexOf(item.value);
 
-  if (Array.isArray(selectedValue.value)) {
-    selectedValue.value = checked
-      ? [...selectedValue.value, value]
-      : selectedValue.value.filter((item) => String(item) !== String(value));
+    ~index ? newValue.splice(index, 1) : newValue.push(item.value);
+
+    emit("update:modelValue", newValue);
   } else {
-    selectedValue.value = [value];
+    emit("update:modelValue", item.value);
   }
 }
 
-provide("getToggleName", () => props.name);
-provide("getToggleType", () => type.value);
-provide("getToggleSize", () => props.size);
-provide("getToggleRound", () => props.round);
-provide("getToggleBlock", () => props.block);
-provide("getToggleSquare", () => props.square);
-provide("getToggleDisabled", () => props.disabled);
-provide("getToggleSplit", () => props.split);
-
-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);
+const mutatedProps = computed(() => ({
+  split: props.split,
+  /* component state, not a props */
+  selected: isSelected,
+}));
+
+const { toggleLabelAttrs, itemsAttrs, toggleButtonInactiveAttrs, toggleButtonActiveAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -95,20 +89,51 @@ const { toggleLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(defaultConfig)
     </template>
 
     <div v-bind="itemsAttrs">
-      <!-- @slot Use it to add UToggleItem directly. -->
-      <slot>
-        <UToggleItem
-          v-for="(item, index) in options"
-          :key="item.value"
-          :name="name"
-          :model-value="item.value"
-          :value="item.value"
-          :disabled="disabled || item.disabled"
-          :label="item.label"
-          v-bind="itemAttrs"
-          :data-test="`${dataTest}-item-${index}`"
-        />
-      </slot>
+      <UButton
+        v-for="(item, index) in options"
+        :key="item.value"
+        :label="item.label"
+        tabindex="0"
+        color="gray"
+        :size="size"
+        :round="round"
+        :block="block"
+        :square="square"
+        :disabled="disabled"
+        v-bind="isSelected(item) ? toggleButtonActiveAttrs : toggleButtonInactiveAttrs"
+        :data-test="`${dataTest}-item-${index}`"
+        @click="onClickOption(item)"
+      >
+        <template #left="{ iconName }">
+          <!--
+            @slot Use it to add something before the label.
+            @binding {string} icon-name
+            @binding {number} index
+          -->
+          <slot name="left" :icon-name="iconName" :index="index" />
+        </template>
+
+        <template #default="{ label, iconName }">
+          <!--
+            @slot Use it to add something instead of the toggle item label.
+            @binding {string} label
+            @binding {string} icon-name
+            @binding {number} index
+          -->
+          <slot name="default" :label="label" :icon-name="iconName" :index="index">
+            {{ item.label }}
+          </slot>
+        </template>
+
+        <template #right="{ iconName }">
+          <!--
+            @slot Use it to add something after the label.
+            @binding {string} icon-name
+            @binding {number} index
+          -->
+          <slot name="right" :icon-name="iconName" :index="index" />
+        </template>
+      </UButton>
     </div>
   </ULabel>
 </template>

package/ui.button-toggle/config.ts

@@ -43,7 +43,40 @@ export default /*tw*/ {
       },
     },
   },
-  item: "{UToggleItem}",
+  toggleButton: {
+    base: "{UButton} font-normal focus-visible:ring-offset-0",
+    defaults: {
+      variant: "thirdary",
+    },
+  },
+  toggleButtonInactive: {
+    base: "{>toggleButton}",
+    variants: {
+      split: {
+        false: "border-0",
+        true: `
+          border border-gray-300 hover:border-gray-400
+          hover:bg-transparent dark:hover:bg-transparent
+          active:bg-transparent dark:active:bg-transparent
+        `,
+      },
+    },
+  },
+  toggleButtonActive: {
+    base: "{>toggleButton}",
+    variants: {
+      split: {
+        false: "border-0",
+        true: `
+          border border-brand-600
+        `,
+      },
+    },
+    defaults: {
+      color: "brand",
+      filled: true,
+    },
+  },
   defaults: {
     labelAlign: "top",
     size: "md",

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

@@ -8,7 +8,6 @@ import {
 
 import UToggle from "../../ui.button-toggle/UToggle.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
-import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 
@@ -21,16 +20,16 @@ interface UToggleArgs extends Props {
 }
 
 export default {
-  components: { UIcon, UToggleItem },
+  components: { UIcon },
   title: "Buttons & Links / Toggle",
   component: UToggle,
   args: {
-    label: "Please choose an option",
+    label: "Please choose a role",
     modelValue: "11",
     options: [
       { value: "11", label: "Admin" },
-      { value: "12", label: "Editor" },
-      { value: "13", label: "Viewer" },
+      { value: "12", label: "Manager" },
+      { value: "13", label: "Employee" },
       { value: "14", label: "Guest" },
     ],
   },
@@ -45,25 +44,24 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs) => ({
-  components: { UToggle, UIcon, UToggleItem, UBadge },
+  components: { UToggle, UIcon, UBadge },
   setup() {
     const slots = getSlotNames(UToggle.__name);
-    const modelValueRef = ref(args.modelValue);
-    const error = computed(() => {
-      if (args.name === "error" && Array.isArray(modelValueRef.value)) {
-        return modelValueRef.value?.length === 0 ? "Please select at least one option" : "";
+    const errorMessage = computed(() => {
+      if (args.name === "error" && Array.isArray(args.modelValue)) {
+        return args.modelValue.length === 0 ? "Please select at least one option" : "";
       }
 
       return "";
     });
 
-    return { args, slots, modelValueRef, error };
+    return { args, slots, errorMessage };
   },
   template: `
     <UToggle
       v-bind="args"
-      v-model="modelValueRef"
-      :error="error"
+      v-model="args.modelValue"
+      :error="errorMessage"
     >
       ${args.slotTemplate || getSlotsFragment("")}
     </UToggle>
@@ -127,6 +125,7 @@ export const Multiple = DefaultTemplate.bind({});
 Multiple.args = {
   name: "multiple",
   multiple: true,
+  modelValue: [],
   label: "You can choose more than one option",
 };
 
@@ -152,19 +151,14 @@ Square.args = {
   name: "square",
   square: true,
   label: "Square prop is useful when icons are present",
+  options: [
+    { value: "11", label: "star" },
+    { value: "12", label: "add" },
+    { value: "13", label: "timer" },
+  ],
   slotTemplate: `
-    <template #default>
-      <UToggleItem value="1">
-        <UIcon name="star" color="inherit" />
-      </UToggleItem>
-
-      <UToggleItem value="2" >
-        <UIcon name="add" color="inherit" />
-      </UToggleItem>
-
-      <UToggleItem value="3">
-        <UIcon name="timer" color="inherit" />
-      </UToggleItem>
+    <template #default="{ label, index }">
+      <UIcon :name="label" color="inherit" />
     </template>
   `,
 };
@@ -173,17 +167,43 @@ export const DefaultSlot = DefaultTemplate.bind({});
 DefaultSlot.args = {
   name: "defaultSlot",
   label: "Please select an operation to proceed",
+  options: [
+    { value: "1", label: "Download", rightIcon: "download", color: "green" },
+    { value: "2", label: "Edit", rightIcon: "edit_note", color: "orange" },
+    { value: "3", label: "Delete", rightIcon: "delete", color: "red" },
+  ],
   slotTemplate: `
-    <template #default>
-      <UToggleItem value="1">
-        <UBadge label="Download" color="green" right-icon="download" />
-      </UToggleItem>
-      <UToggleItem value="2">
-        <UBadge label="Edit" color="amber" right-icon="edit_note" />
-      </UToggleItem>
-      <UToggleItem value="3">
-        <UBadge label="Delete" color="red" right-icon="delete" />
-      </UToggleItem>
+    <template #default="{ label, index }">
+      <UBadge
+        :label="label"
+        :color="args.options[index].color"
+        :right-icon="args.options[index].rightIcon"
+      />
     </template>
   `,
 };
+
+export const Slots: StoryFn<UToggleArgs> = (args) => ({
+  components: { UToggle, URow, UIcon },
+  setup() {
+    const leftModel = ref("11");
+    const rightModel = ref("13");
+
+    return { args, leftModel, rightModel };
+  },
+  template: `
+    <URow no-mobile>
+      <UToggle v-bind="args" v-model="leftModel" name="leftSlot">
+        <template #left="{ index }">
+          <UIcon v-if="index === 0" name="settings" />
+        </template>
+      </UToggle>
+
+      <UToggle v-bind="args" v-model="rightModel" name="rightSlot">
+        <template #right="{ index }">
+          <UIcon v-if="index === 2" name="person" />
+        </template>
+      </UToggle>
+    </URow>
+  `,
+});

package/ui.button-toggle/types.ts

@@ -8,6 +8,10 @@ export interface UToggleOption {
   value: string | number;
   label: string;
   disabled?: boolean;
+  icon?: string;
+  leftIcon?: string;
+  rightIcon?: string;
+  [key: string]: unknown;
 }
 
 export interface Props {
@@ -81,6 +85,11 @@ export interface Props {
    */
   square?: boolean;
 
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
   /**
    * Component config object.
    */

package/ui.form-input/UInput.vue

@@ -96,10 +96,6 @@ const inputValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const applyPasswordClasses = computed(() => {
-  return Boolean(inputValue.value && !isShownPassword.value && isTypePassword.value);
-});
-
 const elementId = props.id || useId();
 
 const inputType = computed(() => {
@@ -237,7 +233,7 @@ const mutatedProps = computed(() => ({
   error: Boolean(props.error),
   label: Boolean(props.label),
   /* component state, not a props */
-  typePassword: applyPasswordClasses.value,
+  typePassword: Boolean(inputValue.value && !isShownPassword.value && isTypePassword.value),
 }));
 
 const {

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

@@ -1,145 +0,0 @@
-<script setup lang="ts">
-import { computed, inject, onMounted, ref, useId } from "vue";
-
-import UButton from "../ui.button/UButton.vue";
-
-import useUI from "../composables/useUI.ts";
-import { getDefaults } from "../utils/ui.ts";
-
-import { TYPE_RADIO } from "../ui.button-toggle/constants.ts";
-
-import defaultConfig from "./config.ts";
-import { COMPONENT_NAME } from "./constants.ts";
-
-import type { Props, ToggleInjectValues, ToggleContextType, Config } from "./types.ts";
-
-type ButtonSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
-
-defineOptions({ inheritAttrs: false });
-
-const getToggleName = inject<() => string>("getToggleName", () => "toggle");
-const getToggleType = inject<() => string>("getToggleType", () => TYPE_RADIO);
-const getToggleSize = inject<() => ButtonSize>("getToggleSize", () => "md" as ButtonSize);
-const getToggleRound = inject<() => boolean>("getToggleRound", () => false);
-const getToggleBlock = inject<() => boolean>("getToggleBlock", () => false);
-const getToggleSquare = inject<() => boolean>("getToggleSquare", () => false);
-const getToggleSplit = inject<() => boolean>("getToggleSplit", () => false);
-
-const getToggleDisabled = inject<() => boolean>(
-  "getToggleDisabled",
-  () => getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).disabled || false,
-);
-
-const { selectedValue, updateSelectedValue } = inject<ToggleContextType>("toggleSelectedValue", {
-  selectedValue: ref(""),
-  updateSelectedValue: () => {},
-});
-
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
-  modelValue: "",
-  label: "",
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers when new value is set.
-   * @property {string} modelValue
-   */
-  "update:modelValue",
-]);
-
-const elementId = props.id || useId();
-
-const selectedItem = ref<string | boolean>("");
-
-const isSelected = computed(() => {
-  return Array.isArray(selectedValue?.value)
-    ? selectedValue?.value?.includes(props.value)
-    : selectedValue?.value === props.value;
-});
-
-onMounted(() => {
-  const propValueString = props.value?.toString() ?? "";
-
-  selectedItem.value =
-    getToggleType() === TYPE_RADIO
-      ? (selectedValue?.value ?? "")
-      : Boolean(selectedValue?.value?.includes(propValueString));
-});
-
-function onClickSetValue() {
-  const propValueString = props.value?.toString() ?? "";
-
-  selectedItem.value =
-    getToggleType() === TYPE_RADIO
-      ? propValueString
-      : Boolean(selectedValue?.value?.includes(propValueString));
-
-  updateSelectedValue && updateSelectedValue(propValueString, !selectedItem.value);
-
-  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(() => ({
-  split: getToggleSplit(),
-  /* component state, not a props */
-  selected: isSelected.value,
-}));
-
-const { toggleButtonInactiveAttrs, toggleButtonActiveAttrs, toggleInputAttrs } = useUI<Config>(
-  defaultConfig,
-  mutatedProps,
-);
-</script>
-
-<template>
-  <UButton
-    :label="label"
-    tabindex="0"
-    color="gray"
-    :for="elementId"
-    :size="getToggleSize()"
-    :round="getToggleRound()"
-    :block="getToggleBlock()"
-    :square="getToggleSquare()"
-    :disabled="getToggleDisabled() || disabled"
-    v-bind="isSelected ? toggleButtonActiveAttrs : toggleButtonInactiveAttrs"
-    @click="onClickSetValue"
-  >
-    <template #left>
-      <!-- @slot Use it to add something before the label. -->
-      <slot name="left" />
-    </template>
-
-    <!-- @slot Use it to add something instead of the label. -->
-    <template #default>
-      <input
-        :id="elementId"
-        v-model="selectedItem"
-        :name="getToggleName()"
-        :type="getToggleType()"
-        :value="value"
-        :disabled="getToggleDisabled() || disabled"
-        v-bind="toggleInputAttrs"
-      />
-
-      <!--
-        @slot Use it to add something instead of the label.
-        @binding {string} label
-      -->
-      <slot name="default" :label="label">
-        {{ label }}
-      </slot>
-    </template>
-
-    <template #right>
-      <!-- @slot Use it to add something after the label. -->
-      <slot name="right" />
-    </template>
-  </UButton>
-</template>

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

@@ -1,40 +0,0 @@
-export default /*tw*/ {
-  toggleButton: {
-    base: "{UButton} font-normal focus-visible:outline-offset-0",
-    defaults: {
-      variant: "thirdary",
-    },
-  },
-  toggleButtonInactive: {
-    base: "{>toggleButton}",
-    variants: {
-      split: {
-        false: "border-0",
-        true: `
-          border border-gray-300 hover:border-gray-400
-          hover:bg-transparent dark:hover:bg-transparent
-          active:bg-transparent dark:active:bg-transparent
-        `,
-      },
-    },
-  },
-  toggleButtonActive: {
-    base: "{>toggleButton}",
-    variants: {
-      split: {
-        false: "border-0",
-        true: `
-          border border-brand-600
-        `,
-      },
-    },
-    defaults: {
-      color: "brand",
-      filled: true,
-    },
-  },
-  toggleInput: "p-0 m-0 size-0 invisible absolute",
-  defaults: {
-    disabled: false,
-  },
-};

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

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

package/ui.button-toggle-item/storybook/docs.mdx

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../../utils/storybook.ts";
-
-import * as stories from "./stories.ts";
-import defaultConfig from "../config.ts?raw"
-
-<Meta of={stories} />
-<Title of={stories} />
-<Subtitle of={stories} />
-<Description of={stories} />
-<Primary of={stories}  />
-<Controls of={stories.Default} />
-<Stories of={stories} />
-
-## Default config
-<Source code={getSource(defaultConfig)} language="jsx" dark />

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

@@ -1,90 +0,0 @@
-import {
-  getArgTypes,
-  getSlotNames,
-  getSlotsFragment,
-  getDocsDescription,
-} from "../../utils/storybook.ts";
-
-import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
-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 { Props } from "../types.ts";
-
-interface UToggleItemArgs extends Props {
-  slotTemplate?: string;
-}
-
-export default {
-  title: "Buttons & Links / Toggle Item",
-  component: UToggleItem,
-  args: {
-    value: "1",
-    label: "Label",
-    modelValue: "",
-  },
-  argTypes: {
-    ...getArgTypes(UToggleItem.__name),
-    value: { control: { type: "text" } },
-  },
-  parameters: {
-    docs: {
-      ...getDocsDescription(UToggleItem.__name),
-    },
-  },
-} as Meta;
-
-const DefaultTemplate: StoryFn<UToggleItemArgs> = (args: UToggleItemArgs) => ({
-  components: { UToggleItem, UIcon },
-  setup() {
-    const slots = getSlotNames(UToggleItem.__name);
-
-    return { args, slots };
-  },
-  template: `
-    <UToggleItem
-        v-bind="args"
-        v-model="args.modelValue"
-        name="toggle"
-      >
-        ${args.slotTemplate || getSlotsFragment("")}
-    </UToggleItem>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true };
-
-export const Slots: StoryFn<UToggleItemArgs> = (args) => ({
-  components: { UToggleItem, UIcon, URow },
-  setup() {
-    return { args };
-  },
-  template: `
-  <URow>
-    <UToggleItem label="Download">
-      <template #left>
-        <UIcon
-          name="download"
-          color="green"
-          size="sm"
-        />
-      </template>
-    </UToggleItem>
-
-    <UToggleItem label="Edit">
-      <template #right>
-        <UIcon
-          name="edit"
-          color="orange"
-          size="sm"
-        />
-      </template>
-    </UToggleItem>
-  </URow>
-  `,
-});

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

@@ -1,60 +0,0 @@
-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 = typeof defaultConfig;
-
-export interface ToggleInjectValues {
-  type?: string;
-  size?: string;
-  round?: boolean;
-  block?: boolean;
-  square?: boolean;
-  variant?: string;
-  disabled?: boolean;
-}
-
-export interface ToggleContextType {
-  selectedValue: Ref<string>;
-  updateSelectedValue: UpdateSelectedValue;
-}
-
-export interface Props {
-  /**
-   * Selected value.
-   */
-  modelValue?: string | number | (string | number)[];
-
-  /**
-   * Value for checkbox state.
-   */
-  value?: string | number;
-
-  /**
-   * Toggle item label.
-   */
-  label?: string;
-
-  /**
-   * Make toggle item disabled.
-   */
-  disabled?: boolean;
-
-  /**
-   * Unique element id.
-   */
-  id?: string;
-
-  /**
-   * Component config object.
-   */
-  config?: ComponentConfig<Config>;
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest?: string | null;
-}