test: components

src/runtime/components/data/Table.vue

@@ -1,18 +1,18 @@
 <template>
-  <div :class="ui.wrapper" v-bind="attrs">
-    <table :class="[ui.base, ui.divide]">
-      <thead :class="ui.thead">
-        <tr :class="ui.tr.base">
-          <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
-            <UCheckbox :model-value="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" aria-label="Select all" @change="onChange" />
+  <div :class="_ui.wrapper" v-bind="attrs">
+    <table :class="[_ui.base, _ui.divide]">
+      <thead :class="_ui.thead">
+        <tr :class="_ui.tr.base">
+          <th v-if="modelValue" scope="col" :class="_ui.checkbox.padding">
+            <UCheckbox :model-value="indeterminate || selected.length === _rows.length" :indeterminate="indeterminate" aria-label="Select all" @change="onChange" />
           </th>
 
-          <th v-for="(column, index) in columns" :key="index" scope="col" :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]">
-            <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
+          <th v-for="(column, index) in _columns" :key="index" scope="col" :class="[_ui.th.base, _ui.th.padding, _ui.th.color, _ui.th.font, _ui.th.size, column.class]">
+            <slot :name="`${column.key}-header`" :column="column" :sort="_sort" :on-sort="onSort">
               <UButton
                 v-if="column.sortable"
-                v-bind="{ ...(ui.default.sortButton || {}), ...sortButton }"
-                :icon="(!sort.column || sort.column !== column.key) ? (sortButton.icon || ui.default.sortButton.icon) : sort.direction === 'asc' ? sortAscIcon : sortDescIcon"
+                v-bind="{ ...(_ui.default.sortButton || {}), ...sortButton }"
+                :icon="(!_sort.column || _sort.column !== column.key) ? (sortButton.icon || _ui.default.sortButton.icon) : _sort.direction === 'asc' ? sortAscIcon : sortDescIcon"
                 :label="column[columnAttribute]"
                 @click="onSort(column)"
               />
@@ -22,45 +22,45 @@
         </tr>
 
         <tr v-if="loading && progress">
-          <td :colspan="0" :class="ui.progress.wrapper">
-            <UProgress v-bind="{ ...(ui.default.progress || {}), ...progress }" size="2xs" />
+          <td :colspan="0" :class="_ui.progress.wrapper">
+            <UProgress v-bind="{ ...(_ui.default.progress || {}), ...progress }" size="2xs" />
           </td>
         </tr>
       </thead>
-      <tbody :class="ui.tbody">
-        <tr v-if="loadingState && loading && !rows.length">
-          <td :colspan="columns.length + (modelValue ? 1 : 0)">
+      <tbody :class="_ui.tbody">
+        <tr v-if="_loadingState && loading && !_rows.length">
+          <td :colspan="_columns.length + (modelValue ? 1 : 0)">
             <slot name="loading-state">
-              <div :class="ui.loadingState.wrapper">
-                <UIcon v-if="loadingState.icon" :name="loadingState.icon" :class="ui.loadingState.icon" aria-hidden="true" />
-                <p :class="ui.loadingState.label">
-                  {{ loadingState.label }}
+              <div :class="_ui.loadingState.wrapper">
+                <UIcon v-if="_loadingState.icon" :name="_loadingState.icon" :class="_ui.loadingState.icon" aria-hidden="true" />
+                <p :class="_ui.loadingState.label">
+                  {{ _loadingState.label }}
                 </p>
               </div>
             </slot>
           </td>
         </tr>
 
-        <tr v-else-if="emptyState && !rows.length">
-          <td :colspan="columns.length + (modelValue ? 1 : 0)">
+        <tr v-else-if="_emptyState && !_rows.length">
+          <td :colspan="_columns.length + (modelValue ? 1 : 0)">
             <slot name="empty-state">
-              <div :class="ui.emptyState.wrapper">
-                <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
-                <p :class="ui.emptyState.label">
-                  {{ emptyState.label }}
+              <div :class="_ui.emptyState.wrapper">
+                <UIcon v-if="_emptyState.icon" :name="_emptyState.icon" :class="_ui.emptyState.icon" aria-hidden="true" />
+                <p :class="_ui.emptyState.label">
+                  {{ _emptyState.label }}
                 </p>
               </div>
             </slot>
           </td>
         </tr>
 
         <template v-else>
-          <tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
-            <td v-if="modelValue" :class="ui.checkbox.padding">
+          <tr v-for="(row, index) in _rows" :key="index" :class="[_ui.tr.base, isSelected(row) && _ui.tr.selected, $attrs.onSelect && _ui.tr.active, row?.class]" @click="() => onSelect(row)">
+            <td v-if="modelValue" :class="_ui.checkbox.padding">
               <UCheckbox v-model="selected" :value="row" aria-label="Select row" @click.stop />
             </td>
 
-            <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, row[column.key]?.class]">
+            <td v-for="(column, subIndex) in _columns" :key="subIndex" :class="[_ui.td.base, _ui.td.padding, _ui.td.color, _ui.td.font, _ui.td.size, row[column.key]?.class]">
               <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
                 {{ getRowData(row, column.key) }}
               </slot>
@@ -293,21 +293,15 @@ export default defineComponent({
     }
 
     return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
+      _ui: ui,
       attrs,
-      // eslint-disable-next-line vue/no-dupe-keys
-      sort,
-      // eslint-disable-next-line vue/no-dupe-keys
-      columns,
-      // eslint-disable-next-line vue/no-dupe-keys
-      rows,
+      _sort: sort,
+      _columns: columns,
+      _rows: rows,
       selected,
       indeterminate,
-      // eslint-disable-next-line vue/no-dupe-keys
-      emptyState,
-      // eslint-disable-next-line vue/no-dupe-keys
-      loadingState,
+      _emptyState: emptyState,
+      _loadingState: loadingState,
       isSelected,
       onSort,
       onSelect,

src/runtime/components/elements/Accordion.vue

@@ -1,11 +1,11 @@
 <template>
-  <div :class="ui.wrapper">
+  <div :class="_ui.wrapper">
     <HDisclosure
       v-for="(item, index) in items"
       v-slot="{ open, close }"
       :key="index"
       as="div"
-      :class="ui.container"
+      :class="_ui.container"
       :default-open="defaultOpen || item.defaultOpen"
     >
       <HDisclosureButton
@@ -17,14 +17,14 @@
         @keydown.space="closeOthers(index, $event)"
       >
         <slot :item="item" :index="index" :open="open" :close="close">
-          <UButton v-bind="{ ...omit(ui.default, ['openIcon', 'closeIcon']), ...attrs, ...omit(item, ['slot', 'disabled', 'content', 'defaultOpen']) }">
+          <UButton v-bind="{ ...omit(_ui.default, ['openIcon', 'closeIcon']), ...attrs, ...omit(item, ['slot', 'disabled', 'content', 'defaultOpen']) }">
             <template #trailing>
               <UIcon
                 :name="!open ? openIcon : closeIcon ? closeIcon : openIcon"
                 :class="[
                   open && !closeIcon ? '-rotate-180' : '',
-                  uiButton.icon.size[item.size || uiButton.default.size],
-                  ui.item.icon
+                  _uiButton.icon.size[item.size || _uiButton.default.size],
+                  _ui.item.icon
                 ]"
               />
             </template>
@@ -33,14 +33,14 @@
       </HDisclosureButton>
 
       <Transition
-        v-bind="ui.transition"
+        v-bind="_ui.transition"
         @enter="onEnter"
         @after-enter="onAfterEnter"
         @before-leave="onBeforeLeave"
         @leave="onLeave"
       >
         <div v-show="open">
-          <HDisclosurePanel :class="[ui.item.base, ui.item.size, ui.item.color, ui.item.padding]" static>
+          <HDisclosurePanel :class="[_ui.item.base, _ui.item.size, _ui.item.color, _ui.item.padding]" static>
             <slot :name="item.slot || 'item'" :item="item" :index="index" :open="open" :close="close">
               {{ item.content }}
             </slot>
@@ -157,9 +157,8 @@ export default defineComponent({
     provideUseId(() => useId())
 
     return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      uiButton,
+      _ui: ui,
+      _uiButton: uiButton,
       attrs,
       buttonRefs,
       closeOthers,

src/runtime/components/elements/Alert.vue

@@ -1,31 +1,31 @@
 <template>
   <div :class="alertClass" v-bind="attrs">
-    <div class="flex" :class="[ui.gap, { 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }]">
-      <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
-      <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+    <div class="flex" :class="[_ui.gap, { 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }]">
+      <UIcon v-if="icon" :name="icon" :class="_ui.icon.base" />
+      <UAvatar v-if="avatar" v-bind="{ size: _ui.avatar.size, ...avatar }" :class="_ui.avatar.base" />
 
-      <div :class="ui.inner">
-        <p v-if="(title || $slots.title)" :class="ui.title">
+      <div :class="_ui.inner">
+        <p v-if="(title || $slots.title)" :class="_ui.title">
           <slot name="title" :title="title">
             {{ title }}
           </slot>
         </p>
-        <p v-if="description || $slots.description" :class="ui.description">
+        <p v-if="description || $slots.description" :class="_ui.description">
           <slot name="description" :description="description">
             {{ description }}
           </slot>
         </p>
 
-        <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+        <div v-if="(description || $slots.description) && actions.length" :class="_ui.actions">
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(_ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
         </div>
       </div>
-      <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
+      <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(_ui.actions, 'mt-0')">
         <template v-if="!description && !$slots.description && actions.length">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(_ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
         </template>
 
-        <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />
+        <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(_ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />
       </div>
     </div>
   </div>
@@ -128,8 +128,7 @@ export default defineComponent({
     }
 
     return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
+      _ui: ui,
       attrs,
       alertClass,
       onAction,

src/runtime/components/elements/Avatar.vue

@@ -2,15 +2,15 @@
   <span :class="wrapperClass">
     <img
       v-if="url && !error"
-      :class="imgClass"
+      :class="_imgClass"
       :alt="alt"
       :src="url"
       v-bind="attrs"
       @error="onError"
     >
-    <span v-else-if="text" :class="ui.text">{{ text }}</span>
+    <span v-else-if="text" :class="_ui.text">{{ text }}</span>
     <UIcon v-else-if="icon" :name="icon" :class="iconClass" />
-    <span v-else-if="placeholder" :class="ui.placeholder">{{ placeholder }}</span>
+    <span v-else-if="placeholder" :class="_ui.placeholder">{{ placeholder }}</span>
 
     <span v-if="chipColor" :class="chipClass">
       {{ chipText }}
@@ -152,12 +152,10 @@ export default defineComponent({
     }
 
     return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
+      _ui: ui,
       attrs,
       wrapperClass,
-      // eslint-disable-next-line vue/no-dupe-keys
-      imgClass,
+      _imgClass: imgClass,
       iconClass,
       chipClass,
       url,

src/runtime/components/elements/Button.vue

@@ -5,7 +5,7 @@
     </slot>
 
     <slot>
-      <span v-if="label" :class="[truncate ? ui.truncate : '']">
+      <span v-if="label" :class="[truncate ? _ui.truncate : '']">
         {{ label }}
       </span>
     </slot>
@@ -194,8 +194,7 @@ export default defineComponent({
     const linkProps = computed(() => getNuxtLinkProps(props))
 
     return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
+      _ui: ui,
       attrs,
       isLeading,
       isTrailing,

src/runtime/components/elements/Carousel.vue

@@ -1,22 +1,22 @@
 <template>
-  <div :class="ui.wrapper" v-bind="attrs">
-    <div ref="carouselRef" :class="ui.container" class="no-scrollbar">
+  <div :class="_ui.wrapper" v-bind="attrs">
+    <div ref="carouselRef" :class="_ui.container" class="no-scrollbar">
       <div
         v-for="(item, index) in items"
         :key="index"
-        :class="ui.item"
+        :class="_ui.item"
       >
         <slot :item="item" :index="index" />
       </div>
     </div>
 
-    <div v-if="arrows" :class="ui.arrows.wrapper">
+    <div v-if="arrows" :class="_ui.arrows.wrapper">
       <slot name="prev" :on-click="onClickPrev" :disabled="isFirst">
         <UButton
           v-if="prevButton"
           :disabled="isFirst"
-          v-bind="{ ...ui.default.prevButton, ...prevButton }"
-          :class="twMerge(ui.default.prevButton.class, prevButton?.class)"
+          v-bind="{ ..._ui.default.prevButton, ...prevButton }"
+          :class="twMerge(_ui.default.prevButton.class, prevButton?.class)"
           aria-label="Prev"
           @click="onClickPrev"
         />
@@ -26,22 +26,22 @@
         <UButton
           v-if="nextButton"
           :disabled="isLast"
-          v-bind="{ ...ui.default.nextButton, ...nextButton }"
-          :class="twMerge(ui.default.nextButton.class, nextButton?.class)"
+          v-bind="{ ..._ui.default.nextButton, ...nextButton }"
+          :class="twMerge(_ui.default.nextButton.class, nextButton?.class)"
           aria-label="Next"
           @click="onClickNext"
         />
       </slot>
     </div>
 
-    <div v-if="indicators" :class="ui.indicators.wrapper">
+    <div v-if="indicators" :class="_ui.indicators.wrapper">
       <template v-for="page in pages" :key="page">
         <slot name="indicator" :on-click="onClick" :active="page === currentPage" :page="page">
           <button
             type="button"
             :class="[
-              ui.indicators.base,
-              page === currentPage ? ui.indicators.active : ui.indicators.inactive
+              _ui.indicators.base,
+              page === currentPage ? _ui.indicators.active : _ui.indicators.inactive
             ]"
             :aria-label="`set slide ${page}`"
             @click="onClick(page)"
@@ -153,8 +153,7 @@ export default defineComponent({
     })
 
     return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
+      _ui: ui,
       attrs,
       isFirst,
       isLast,

src/runtime/components/elements/Chip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="ui.wrapper" v-bind="attrs">
+  <div :class="_ui.wrapper" v-bind="attrs">
     <slot />
 
     <span v-if="show" :class="chipClass">
@@ -82,8 +82,7 @@ export default defineComponent({
     })
 
     return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
+      _ui: ui,
       attrs,
       chipClass
     }