feat: Eslint rules (#9839)

# Pull Request Template ## Description This PR adds new eslint rules to the code base. **Error rules** | Rule name | Type | Files updated | | ----------------- | --- | - | | `vue/block-order` | error | ✅ | | `vue/component-name-in-template-casing` | error | ✅ | | `vue/component-options-name-casing` | error | ✅ | | `vue/custom-event-name-casing` | error | ✅ | | `vue/define-emits-declaration` | error | ✅ | | `vue/no-unused-properties` | error | ✅ | | `vue/define-macros-order` | error | ✅ | | `vue/define-props-declaration` | error | ✅ | | `vue/match-component-import-name` | error | ✅ | | `vue/next-tick-style` | error | ✅ | | `vue/no-bare-strings-in-template` | error | ✅ | | `vue/no-empty-component-block` | error | ✅ | | `vue/no-multiple-objects-in-class` | error | ✅ | | `vue/no-required-prop-with-default` | error | ✅ | | `vue/no-static-inline-styles` | error | ✅ | | `vue/no-template-target-blank` | error | ✅ | | `vue/no-this-in-before-route-enter` | error | ✅ | | `vue/no-undef-components` | error | ✅ | | `vue/no-unused-emit-declarations` | error | ✅ | | `vue/no-unused-refs` | error | ✅ | | `vue/no-use-v-else-with-v-for` | error | ✅ | | `vue/no-useless-v-bind` | error | ✅ | | `vue/no-v-text` | error | ✅ | | `vue/padding-line-between-blocks` | error | ✅ | | ~`vue/prefer-prop-type-boolean-first`~ | ~error~ | ❌ (removed this rule, cause a bug in displaying custom attributes) | | `vue/prefer-separate-static-class` | error | ✅ | | `vue/prefer-true-attribute-shorthand` | error | ✅ | | `vue/require-explicit-slots` | error | ✅ | | `vue/require-macro-variable-name` | error | ✅ | **Warn rules** | Rule name | Type | Files updated | | ---- | ------------- | ------------- | | `vue/no-root-v-if` | warn | ❎ | Fixes https://linear.app/chatwoot/issue/CW-3492/vue-eslint-rules ## Type of change - [x] New feature (non-breaking change which adds functionality) ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Fayaz Ahmed <fayazara@gmail.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com> Co-authored-by: Pranav <pranav@chatwoot.com>
2024-08-05 14:02:16 +05:30
parent 6166ccb014
commit b4b308336f
625 changed files with 23071 additions and 22980 deletions
--- a/app/javascript/dashboard/components/ui/AnnouncementPopup.vue
+++ b/app/javascript/dashboard/components/ui/AnnouncementPopup.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="announcement-popup">
-    <span v-if="popupMessage" class="popup-content">
-      {{ popupMessage }}
-      <span v-if="routeText" class="route-url" @click="onClickOpenPath">
-        {{ routeText }}
-      </span>
-    </span>
-    <div v-if="hasCloseButton" class="popup-close">
-      <woot-button
-        v-if="hasCloseButton"
-        color-scheme="primary"
-        variant="link"
-        size="small"
-        @click="onClickClose"
-      >
-        {{ closeButtonText }}
-      </woot-button>
-    </div>
-  </div>
-</template>
 <script>
 export default {
  props: {
@@ -50,6 +29,28 @@ export default {
 };
 </script>

+<template>
+  <div class="announcement-popup">
+    <span v-if="popupMessage" class="popup-content">
+      {{ popupMessage }}
+      <span v-if="routeText" class="route-url" @click="onClickOpenPath">
+        {{ routeText }}
+      </span>
+    </span>
+    <div v-if="hasCloseButton" class="popup-close">
+      <woot-button
+        v-if="hasCloseButton"
+        color-scheme="primary"
+        variant="link"
+        size="small"
+        @click="onClickClose"
+      >
+        {{ closeButtonText }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss">
 .announcement-popup {
  max-width: 15rem;
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -1,45 +1,3 @@
-<template>
-  <div
-    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white"
-    :class="bannerClasses"
-  >
-    <span class="banner-message">
-      {{ bannerMessage }}
-      <a
-        v-if="hrefLink"
-        :href="hrefLink"
-        rel="noopener noreferrer nofollow"
-        target="_blank"
-      >
-        {{ hrefLinkText }}
-      </a>
-    </span>
-    <div class="actions">
-      <woot-button
-        v-if="hasActionButton"
-        size="tiny"
-        :icon="actionButtonIcon"
-        :variant="actionButtonVariant"
-        color-scheme="primary"
-        class-names="banner-action__button"
-        @click="onClick"
-      >
-        {{ actionButtonLabel }}
-      </woot-button>
-      <woot-button
-        v-if="hasCloseButton"
-        size="tiny"
-        :color-scheme="colorScheme"
-        icon="dismiss-circle"
-        class-names="banner-action__button"
-        @click="onClickClose"
-      >
-        {{ $t('GENERAL_SETTINGS.DISMISS') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
  props: {
@@ -101,6 +59,48 @@ export default {
 };
 </script>

+<template>
+  <div
+    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white"
+    :class="bannerClasses"
+  >
+    <span class="banner-message">
+      {{ bannerMessage }}
+      <a
+        v-if="hrefLink"
+        :href="hrefLink"
+        rel="noopener noreferrer nofollow"
+        target="_blank"
+      >
+        {{ hrefLinkText }}
+      </a>
+    </span>
+    <div class="actions">
+      <woot-button
+        v-if="hasActionButton"
+        size="tiny"
+        :icon="actionButtonIcon"
+        :variant="actionButtonVariant"
+        color-scheme="primary"
+        class-names="banner-action__button"
+        @click="onClick"
+      >
+        {{ actionButtonLabel }}
+      </woot-button>
+      <woot-button
+        v-if="hasCloseButton"
+        size="tiny"
+        :color-scheme="colorScheme"
+        icon="dismiss-circle"
+        class-names="banner-action__button"
+        @click="onClickClose"
+      >
+        {{ $t('GENERAL_SETTINGS.DISMISS') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .banner {
  &.primary {
--- a/app/javascript/dashboard/components/ui/ContextMenu.vue
+++ b/app/javascript/dashboard/components/ui/ContextMenu.vue
@@ -1,13 +1,3 @@
-<template>
-  <div
-    class="fixed outline-none z-[9999] cursor-pointer"
-    :style="style"
-    tabindex="0"
-    @blur="$emit('close')"
-  >
-    <slot />
-  </div>
-</template>
 <script>
 export default {
  props: {
@@ -40,3 +30,14 @@ export default {
  },
 };
 </script>
+
+<template>
+  <div
+    class="fixed outline-none z-[9999] cursor-pointer"
+    :style="style"
+    tabindex="0"
+    @blur="$emit('close')"
+  >
+    <slot />
+  </div>
+</template>
--- a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
@@ -31,6 +31,7 @@ import CalendarMonth from './components/CalendarMonth.vue';
 import CalendarWeek from './components/CalendarWeek.vue';
 import CalendarFooter from './components/CalendarFooter.vue';

+const emit = defineEmits(['dateRangeChanged']);
 const { LAST_7_DAYS, LAST_30_DAYS, CUSTOM_RANGE } = DATE_RANGE_TYPES;
 const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
 const { WEEK, MONTH, YEAR } = CALENDAR_PERIODS;
@@ -54,8 +55,6 @@ const hoveredEndDate = ref(null);
 const manualStartDate = ref(selectedStartDate.value);
 const manualEndDate = ref(selectedEndDate.value);

-const emit = defineEmits(['change']);
-
 // Watcher will set the start and end dates based on the selected range
 watch(selectedRange, newRange => {
  if (newRange !== CUSTOM_RANGE) {
@@ -223,7 +222,7 @@ const emitDateRange = () => {
    >
      <CalendarDateRange
        :selected-range="selectedRange"
-        @set-range="setDateRange"
+        @setRange="setDateRange"
      />
      <div
        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
@@ -265,15 +264,15 @@ const emitDateRange = () => {
                  :calendar-type="calendar"
                  :start-current-date="startCurrentDate"
                  :end-current-date="endCurrentDate"
-                  @select-year="openCalendar($event, calendar, YEAR)"
+                  @selectYear="openCalendar($event, calendar, YEAR)"
                />
                <CalendarMonth
                  v-else-if="calendarViews[calendar] === MONTH"
                  :calendar-type="calendar"
                  :start-current-date="startCurrentDate"
                  :end-current-date="endCurrentDate"
-                  @select-month="openCalendar($event, calendar)"
-                  @set-view="setViewMode"
+                  @selectMonth="openCalendar($event, calendar)"
+                  @setView="setViewMode"
                  @prev="moveCalendar(calendar, 'prev', YEAR)"
                  @next="moveCalendar(calendar, 'next', YEAR)"
                />
@@ -287,9 +286,9 @@ const emitDateRange = () => {
                  :selected-end-date="selectedEndDate"
                  :selecting-end-date="selectingEndDate"
                  :hovered-end-date="hoveredEndDate"
-                  @update-hovered-end-date="hoveredEndDate = $event"
-                  @select-date="selectDate"
-                  @set-view="setViewMode"
+                  @updateHoveredEndDate="hoveredEndDate = $event"
+                  @selectDate="selectDate"
+                  @setView="setViewMode"
                  @prev="moveCalendar(calendar, 'prev')"
                  @next="moveCalendar(calendar, 'next')"
                />
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
@@ -19,7 +19,7 @@ defineProps({
    default: '',
  },
 });
-const emit = defineEmits(['prev', 'next', 'set-view']);
+const emit = defineEmits(['prev', 'next', 'setView']);

 const { YEAR } = CALENDAR_PERIODS;

@@ -32,7 +32,7 @@ const onClickNext = type => {
 };

 const onClickSetView = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };
 </script>

--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
@@ -8,10 +8,10 @@ defineProps({
  },
 });

-const emit = defineEmits(['set-range']);
+const emit = defineEmits(['setRange']);

 const setDateRange = range => {
-  emit('set-range', range);
+  emit('setRange', range);
 };
 </script>

--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
@@ -1,5 +1,5 @@
 <script setup>
-const emit = defineEmits(['clear', 'apply']);
+const emit = defineEmits(['clear', 'clear']);

 const onClickClear = () => {
  emit('clear');
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
@@ -18,6 +18,7 @@ const props = defineProps({
  endCurrentDate: Date,
 });

+const emit = defineEmits(['selectMonth', 'prev', 'next', 'setView']);
 const { START_CALENDAR } = CALENDAR_TYPES;
 const { MONTH, YEAR } = CALENDAR_PERIODS;

@@ -33,10 +34,8 @@ const activeMonthIndex = computed(() => {
  return getMonth(date);
 });

-const emit = defineEmits(['select-month', 'prev', 'next', 'set-view']);
-
 const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };

 const onClickPrev = () => {
@@ -48,7 +47,7 @@ const onClickNext = () => {
 };

 const selectMonth = index => {
-  emit('select-month', index);
+  emit('selectMonth', index);
 };
 </script>

@@ -63,7 +62,7 @@ const selectMonth = index => {
          MONTH
        )
      "
-      @set-view="setViewMode"
+      @setView="setViewMode"
      @prev="onClickPrev"
      @next="onClickNext"
    />
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
@@ -31,22 +31,22 @@ const props = defineProps({
 });

 const emit = defineEmits([
-  'update-hovered-end-date',
-  'select-date',
+  'updateHoveredEndDate',
+  'selectDate',
  'prev',
  'next',
-  'set-view',
+  'setView',
 ]);

 const { START_CALENDAR } = CALENDAR_TYPES;
 const { MONTH } = CALENDAR_PERIODS;

 const emitHoveredEndDate = day => {
-  emit('update-hovered-end-date', day);
+  emit('updateHoveredEndDate', day);
 };

 const emitSelectDate = day => {
-  emit('select-date', day);
+  emit('selectDate', day);
 };
 const onClickPrev = () => {
  emit('prev');
@@ -57,7 +57,7 @@ const onClickNext = () => {
 };

 const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };

 const weeks = calendarType => {
@@ -139,7 +139,7 @@ const dayClasses = day => ({
      "
      @prev="onClickPrev"
      @next="onClickNext"
-      @set-view="setViewMode"
+      @setView="setViewMode"
    />
    <CalendarWeekLabel />
    <div
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
@@ -14,6 +14,8 @@ const props = defineProps({
  endCurrentDate: Date,
 });

+const emit = defineEmits(['selectYear']);
+
 const { START_CALENDAR } = CALENDAR_TYPES;

 const calculateStartYear = date => {
@@ -52,10 +54,8 @@ const onClickNext = () => {
  startYear.value = addYears(new Date(startYear.value, 0, 1), 10).getFullYear();
 };

-const emit = defineEmits(['select-year']);
-
 const selectYear = year => {
-  emit('select-year', year);
+  emit('selectYear', year);
 };
 </script>

--- a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
@@ -12,6 +12,8 @@ const props = defineProps({
  },
 });

+const emit = defineEmits(['open']);
+
 const formatDateRange = computed(() => {
  const startDate = props.selectedStartDate;
  const endDate = props.selectedEndDate;
@@ -39,8 +41,6 @@ const activeDateRange = computed(
  () => dateRanges.find(range => range.value === props.selectedRange).label
 );

-const emit = defineEmits(['open']);
-
 const openDatePicker = () => {
  emit('open');
 };
--- a/app/javascript/dashboard/components/ui/DateRangePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateRangePicker.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="date-picker">
-    <date-picker
-      :range="true"
-      :confirm="true"
-      :clearable="false"
-      :editable="false"
-      :confirm-text="confirmText"
-      :placeholder="placeholder"
-      :value="value"
-      @change="handleChange"
-    />
-  </div>
-</template>
-
 <script>
 import DatePicker from 'vue2-datepicker';
 export default {
@@ -38,3 +23,18 @@ export default {
  },
 };
 </script>
+
+<template>
+  <div class="date-picker">
+    <DatePicker
+      range
+      confirm
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      @change="handleChange"
+    />
+  </div>
+</template>
--- a/app/javascript/dashboard/components/ui/DateTimePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateTimePicker.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="date-picker">
-    <date-picker
-      type="datetime"
-      :confirm="true"
-      :clearable="false"
-      :editable="false"
-      :confirm-text="confirmText"
-      :placeholder="placeholder"
-      :value="value"
-      :disabled-date="disableBeforeToday"
-      @change="handleChange"
-    />
-  </div>
-</template>
-
 <script>
 import addDays from 'date-fns/addDays';
 import DatePicker from 'vue2-datepicker';
@@ -45,3 +29,19 @@ export default {
  },
 };
 </script>
+
+<template>
+  <div class="date-picker">
+    <DatePicker
+      type="datetime"
+      confirm
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      :disabled-date="disableBeforeToday"
+      @change="handleChange"
+    />
+  </div>
+</template>
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue
@@ -14,6 +14,7 @@ defineProps({
  },
 });
 </script>
+
 <template>
  <button
    class="inline-flex relative items-center p-1.5 w-fit h-8 gap-1.5 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownEmptyState.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownEmptyState.vue
@@ -6,6 +6,7 @@ defineProps({
  },
 });
 </script>
+
 <template>
  <div
    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
@@ -38,13 +38,13 @@ const props = defineProps({
  },
 });

-const emits = defineEmits(['on-search']);
+const emit = defineEmits(['onSearch']);

 const searchTerm = ref('');

 const onSearch = debounce(value => {
  searchTerm.value = value;
-  emits('on-search', value);
+  emit('onSearch', value);
 }, 300);

 const filteredListItems = computed(() => {
@@ -71,13 +71,14 @@ const shouldShowEmptyState = computed(() => {
  return !props.isLoading && isDropdownListEmpty.value;
 });
 </script>
+
 <template>
  <div
    class="absolute z-20 w-40 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-[400px]"
    @click.stop
  >
    <slot name="search">
-      <dropdown-search
+      <DropdownSearch
        v-if="enableSearch"
        :input-value="searchTerm"
        :input-placeholder="inputPlaceholder"
@@ -87,15 +88,15 @@ const shouldShowEmptyState = computed(() => {
      />
    </slot>
    <slot name="listItem">
-      <dropdown-loading-state
+      <DropdownLoadingState
        v-if="shouldShowLoadingState"
        :message="loadingPlaceholder"
      />
-      <dropdown-empty-state
+      <DropdownEmptyState
        v-else-if="shouldShowEmptyState"
        :message="$t('REPORT.FILTER_ACTIONS.EMPTY_LIST')"
      />
-      <list-item-button
+      <ListItemButton
        v-for="item in filteredListItems"
        :key="item.id"
        :is-active="isFilterActive(item.id)"
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue
@@ -10,6 +10,7 @@ defineProps({
  },
 });
 </script>
+
 <template>
  <button
    class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownLoadingState.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownLoadingState.vue
@@ -6,6 +6,7 @@ defineProps({
  },
 });
 </script>
+
 <template>
  <div
    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue
@@ -14,6 +14,7 @@ defineProps({
  },
 });
 </script>
+
 <template>
  <div
    class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-white z-10 dark:bg-slate-800 gap-2 px-3 border-b rounded-t-xl border-slate-50 dark:border-slate-700"
--- a/app/javascript/dashboard/components/ui/HelperTextPopup.vue
+++ b/app/javascript/dashboard/components/ui/HelperTextPopup.vue
@@ -6,6 +6,7 @@ defineProps({
  },
 });
 </script>
+
 <template>
  <div class="relative group w-[inherit] whitespace-normal z-20">
    <fluent-icon
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -1,32 +1,3 @@
-<template>
-  <div
-    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
-    :class="labelClass"
-    :style="labelStyle"
-    :title="description"
-  >
-    <span v-if="icon" class="label-action--button">
-      <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
-    </span>
-    <span
-      v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
-      :style="{ background: color }"
-      class="label-color-dot flex-shrink-0"
-    />
-    <span v-if="!href" class="whitespace-nowrap text-ellipsis overflow-hidden">
-      {{ title }}
-    </span>
-    <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
-    <button
-      v-if="showClose"
-      class="label-close--button p-0"
-      :style="{ color: textColor }"
-      @click="onClick"
-    >
-      <fluent-icon icon="dismiss" size="12" class="close--icon" />
-    </button>
-  </div>
-</template>
 <script>
 import { getContrastingTextColor } from '@chatwoot/utils';

@@ -109,6 +80,36 @@ export default {
 };
 </script>

+<template>
+  <div
+    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
+    :class="labelClass"
+    :style="labelStyle"
+    :title="description"
+  >
+    <span v-if="icon" class="label-action--button">
+      <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
+    </span>
+    <span
+      v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
+      :style="{ background: color }"
+      class="label-color-dot flex-shrink-0"
+    />
+    <span v-if="!href" class="whitespace-nowrap text-ellipsis overflow-hidden">
+      {{ title }}
+    </span>
+    <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
+    <button
+      v-if="showClose"
+      class="label-close--button p-0"
+      :style="{ color: textColor }"
+      @click="onClick"
+    >
+      <fluent-icon icon="dismiss" size="12" class="close--icon" />
+    </button>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .label {
  @apply items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-slate-75 dark:border-slate-600 h-6;
--- a/app/javascript/dashboard/components/ui/PreviewCard.vue
+++ b/app/javascript/dashboard/components/ui/PreviewCard.vue
@@ -1,3 +1,26 @@
+<script>
+export default {
+  props: {
+    heading: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
  <div
    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
@@ -13,7 +36,7 @@
          active,
      }"
    >
-      <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
+      <div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
      <fluent-icon
        v-if="active"
        icon="checkmark-circle"
@@ -41,30 +64,3 @@
    <slot v-else />
  </div>
 </template>
-
-<script>
-export default {
-  props: {
-    heading: {
-      type: String,
-      default: '',
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    buttonText: {
-      type: String,
-      default: 'Active',
-    },
-    src: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -1,16 +1,3 @@
-<template>
-  <button
-    type="button"
-    class="toggle-button p-0"
-    :class="{ active: value, small: size === 'small' }"
-    role="switch"
-    :aria-checked="value.toString()"
-    @click="onClick"
-  >
-    <span aria-hidden="true" :class="{ active: value }" />
-  </button>
-</template>
-
 <script>
 export default {
  props: {
@@ -24,6 +11,20 @@ export default {
  },
 };
 </script>
+
+<template>
+  <button
+    type="button"
+    class="toggle-button p-0"
+    :class="{ active: value, small: size === 'small' }"
+    role="switch"
+    :aria-checked="value.toString()"
+    @click="onClick"
+  >
+    <span aria-hidden="true" :class="{ active: value }" />
+  </button>
+</template>
+
 <style lang="scss" scoped>
 .toggle-button {
  @apply bg-slate-200 dark:bg-slate-600;
--- a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
@@ -1,20 +1,3 @@
-<template>
-  <li
-    :class="{
-      'tabs-title': true,
-      'is-active': active,
-    }"
-  >
-    <a @click="onTabClick">
-      {{ name }}
-      <div v-if="showBadge" class="badge min-w-[20px]">
-        <span>
-          {{ getItemCount }}
-        </span>
-      </div>
-    </a>
-  </li>
-</template>
 <script>
 export default {
  name: 'WootTabsItem',
@@ -61,3 +44,21 @@ export default {
  },
 };
 </script>
+
+<template>
+  <li
+    class="tabs-title"
+    :class="{
+      'is-active': active,
+    }"
+  >
+    <a @click="onTabClick">
+      {{ name }}
+      <div v-if="showBadge" class="badge min-w-[20px]">
+        <span>
+          {{ getItemCount }}
+        </span>
+      </div>
+    </a>
+  </li>
+</template>
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -1,16 +1,3 @@
-<template>
-  <div
-    v-tooltip.top="{
-      content: tooltipText,
-      delay: { show: 1500, hide: 0 },
-      hideOnClick: true,
-    }"
-    class="ml-auto leading-4 text-xxs text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100"
-  >
-    <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
-  </div>
-</template>
-
 <script>
 const MINUTE_IN_MILLI_SECONDS = 60000;
 const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
@@ -118,3 +105,16 @@ export default {
  },
 };
 </script>
+
+<template>
+  <div
+    v-tooltip.top="{
+      content: tooltipText,
+      delay: { show: 1500, hide: 0 },
+      hideOnClick: true,
+    }"
+    class="ml-auto leading-4 text-xxs text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100"
+  >
+    <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
+  </div>
+</template>
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -1,39 +1,3 @@
-<template>
-  <transition-group
-    name="wizard-items"
-    tag="div"
-    class="wizard-box"
-    :class="classObject"
-  >
-    <div
-      v-for="item in items"
-      :key="item.route"
-      class="item"
-      :class="{ active: isActive(item), over: isOver(item) }"
-    >
-      <div class="flex items-center">
-        <h3
-          class="text-slate-800 dark:text-slate-100 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mb-1.5 text-ellipsis leading-tight"
-        >
-          {{ item.title }}
-        </h3>
-        <span
-          v-if="isOver(item)"
-          class="text-green-500 dark:text-green-500 ml-1"
-        >
-          <fluent-icon icon="checkmark" />
-        </span>
-      </div>
-      <span class="step">
-        {{ items.indexOf(item) + 1 }}
-      </span>
-      <p class="text-slate-600 dark:text-slate-300 text-sm m-0 pl-6">
-        {{ item.body }}
-      </p>
-    </div>
-  </transition-group>
-</template>
-
 <script>
 /* eslint no-console: 0 */
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -41,7 +5,6 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 export default {
  mixins: [globalConfigMixin],
  props: {
-    isFullwidth: Boolean,
    items: {
      type: Array,
      default: () => [],
@@ -65,6 +28,43 @@ export default {
  },
 };
 </script>
+
+<template>
+  <transition-group
+    name="wizard-items"
+    tag="div"
+    class="wizard-box"
+    :class="classObject"
+  >
+    <div
+      v-for="item in items"
+      :key="item.route"
+      class="item"
+      :class="{ active: isActive(item), over: isOver(item) }"
+    >
+      <div class="flex items-center">
+        <h3
+          class="text-slate-800 dark:text-slate-100 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mb-1.5 text-ellipsis leading-tight"
+        >
+          {{ item.title }}
+        </h3>
+        <span
+          v-if="isOver(item)"
+          class="ml-1 text-green-500 dark:text-green-500"
+        >
+          <fluent-icon icon="checkmark" />
+        </span>
+      </div>
+      <span class="step">
+        {{ items.indexOf(item) + 1 }}
+      </span>
+      <p class="pl-6 m-0 text-sm text-slate-600 dark:text-slate-300">
+        {{ item.body }}
+      </p>
+    </div>
+  </transition-group>
+</template>
+
 <style lang="scss" scoped>
 .wizard-box {
  .item {
--- a/app/javascript/dashboard/components/ui/WootButton.vue
+++ b/app/javascript/dashboard/components/ui/WootButton.vue
@@ -1,32 +1,3 @@
-<template>
-  <button
-    class="button"
-    :type="type"
-    :class="buttonClasses"
-    :disabled="isDisabled || isLoading"
-    @click="handleClick"
-  >
-    <spinner
-      v-if="isLoading"
-      size="small"
-      :color-scheme="showDarkSpinner ? 'dark' : ''"
-    />
-    <emoji-or-icon
-      v-else-if="icon || emoji"
-      class="icon"
-      :emoji="emoji"
-      :icon="icon"
-      :icon-size="iconSize"
-    />
-    <span
-      v-if="$slots.default"
-      class="button__content"
-      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
-    >
-      <slot />
-    </span>
-  </button>
-</template>
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
@@ -132,3 +103,33 @@ export default {
  },
 };
 </script>
+
+<template>
+  <button
+    class="button"
+    :type="type"
+    :class="buttonClasses"
+    :disabled="isDisabled || isLoading"
+    @click="handleClick"
+  >
+    <Spinner
+      v-if="isLoading"
+      size="small"
+      :color-scheme="showDarkSpinner ? 'dark' : ''"
+    />
+    <EmojiOrIcon
+      v-else-if="icon || emoji"
+      class="icon"
+      :emoji="emoji"
+      :icon="icon"
+      :icon-size="iconSize"
+    />
+    <span
+      v-if="$slots.default"
+      class="button__content"
+      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
+    >
+      <slot />
+    </span>
+  </button>
+</template>