[components] Migrate seven small components to Composition API

src/components/lists/PeopleList.vue

@@ -5,13 +5,7 @@
         <thead class="datatable-head">
           <tr>
             <th scope="col" class="user datatable-row-header">
-              {{
-                isBots
-                  ? $t('bots.bots')
-                  : isGuests
-                    ? $t('people.guests')
-                    : $t('people.persons')
-              }}
+              {{ $t(usersLabelKey) }}
             </th>
             <th scope="col" class="phone" v-if="!isBots && !isGuests">
               {{ $t('people.list.phone') }}
@@ -150,145 +144,90 @@
   </div>
 </template>
 
-<script>
+<script setup>
+// Imports
+// --------------------------------------------------------------------------
 import { AlertTriangleIcon } from 'lucide-vue-next'
-import { mapGetters } from 'vuex'
+import { computed, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import { useGrabList } from '@/composables/grabList'
 import { getCountryName } from '@/lib/countries'
 import { localeCode } from '@/lib/lang'
 
-import { grabListMixin } from '@/components/mixins/grablist'
-import { domMixin } from '@/components/mixins/dom'
-
 import DepartmentNamesCell from '@/components/cells/DepartmentNamesCell.vue'
 import PeopleUserCell from '@/components/cells/PeopleUserCell.vue'
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
 import StudioName from '@/components/widgets/StudioName.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'people-list',
-
-  mixins: [domMixin, grabListMixin],
-
-  components: {
-    AlertTriangleIcon,
-    DepartmentNamesCell,
-    PeopleUserCell,
-    RowActionsCell,
-    StudioName,
-    TableInfo
-  },
-
-  props: {
-    entries: {
-      type: Array,
-      default: () => []
-    },
-    isArchivedGuests: {
-      type: Boolean,
-      default: false
-    },
-    isBots: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isGuests: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    seatsRemaining: {
-      type: Number,
-      default: null
-    }
-  },
-
-  emits: [
-    'archive-clicked',
-    'avatar-clicked',
-    'change-password-clicked',
-    'delete-clicked',
-    'edit-clicked',
-    'refresh-clicked',
-    'restore-clicked'
-  ],
-
-  data() {
-    return {
-      domEvents: [
-        ['mousemove', this.onMouseMove],
-        ['touchmove', this.onMouseMove],
-        ['mouseup', this.stopBrowsing],
-        ['mouseleave', this.stopBrowsing],
-        ['touchend', this.stopBrowsing],
-        ['touchcancel', this.stopBrowsing],
-        ['keyup', this.stopBrowsing]
-      ]
-    }
-  },
-
-  mounted() {
-    this.addEvents(this.domEvents)
-  },
-
-  beforeUnmount() {
-    this.removeEvents(this.domEvents)
-    document.body.style.cursor = 'default'
-  },
-
-  computed: {
-    ...mapGetters(['isCurrentUserAdmin']),
-
-    today() {
-      return new Date().toJSON().slice(0, 10)
-    },
-
-    nextWeek() {
-      const date = new Date()
-      date.setDate(date.getDate() + 7)
-      return date.toJSON().slice(0, 10)
-    },
-
-    nbUsersDetails() {
-      const nbUsers = this.entries.length
-      const key = this.isBots
-        ? 'bots.bots'
-        : this.isGuests
-          ? 'people.guests'
-          : 'people.persons'
-      const labelUsers = this.$t(key, { count: nbUsers })
-      if (!this.isBots && !this.isGuests && this.seatsRemaining !== null) {
-        const labelRemaining = this.$t('people.seats_remaining', {
-          count: this.seatsRemaining
-        })
-        return `${nbUsers} ${labelUsers} (${labelRemaining})`
-      }
-      return `${nbUsers} ${labelUsers}`
-    }
-  },
+const { t } = useI18n()
+const store = useStore()
+const bodyRef = useTemplateRef('body')
+const { startBrowsing } = useGrabList(bodyRef)
+
+// Props / Emits
+// --------------------------------------------------------------------------
+const props = defineProps({
+  entries: { type: Array, default: () => [] },
+  isArchivedGuests: { type: Boolean, default: false },
+  isBots: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isGuests: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  seatsRemaining: { type: Number, default: null }
+})
+
+defineEmits([
+  'archive-clicked',
+  'avatar-clicked',
+  'change-password-clicked',
+  'delete-clicked',
+  'edit-clicked',
+  'refresh-clicked',
+  'restore-clicked'
+])
+
+// State
+// --------------------------------------------------------------------------
+const today = new Date().toJSON().slice(0, 10)
+const nextWeek = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
+  .toJSON()
+  .slice(0, 10)
+
+// Computed
+// --------------------------------------------------------------------------
+const isCurrentUserAdmin = computed(() => store.getters.isCurrentUserAdmin)
+
+const usersLabelKey = computed(() =>
+  props.isBots
+    ? 'bots.bots'
+    : props.isGuests
+      ? 'people.guests'
+      : 'people.persons'
+)
+
+const nbUsersDetails = computed(() => {
+  const nbUsers = props.entries.length
+  const details = `${nbUsers} ${t(usersLabelKey.value, { count: nbUsers })}`
+  if (props.isBots || props.isGuests || props.seatsRemaining === null) {
+    return details
+  }
+  const labelRemaining = t('people.seats_remaining', {
+    count: props.seatsRemaining
+  })
+  return `${details} (${labelRemaining})`
+})
 
-  methods: {
-    countryName(country) {
-      return getCountryName(country, localeCode.value)
-    },
+// Functions
+// --------------------------------------------------------------------------
+const countryName = country => getCountryName(country, localeCode.value)
 
-    isExpired(expirationDate) {
-      return expirationDate < this.today
-    },
+const isExpired = expirationDate => expirationDate < today
 
-    isSoonExpired(expirationDate) {
-      return !this.isExpired(expirationDate) && expirationDate < this.nextWeek
-    }
-  }
-}
+const isSoonExpired = expirationDate =>
+  !isExpired(expirationDate) && expirationDate < nextWeek
 </script>
 
 <style lang="scss" scoped>
@@ -384,10 +323,6 @@ export default {
     overflow-x: visible;
   }
 
-  .expiration .icon {
-    margin-left: 0;
-  }
-
   .footer-info {
     display: none;
   }

src/components/pages/Brief.vue

@@ -6,35 +6,40 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+// Imports
+// --------------------------------------------------------------------------
+import { useHead } from '@unhead/vue'
+import { computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
 
 import ProductionBrief from '@/components/pages/production/ProductionBrief.vue'
 
-export default {
-  name: 'brief',
-
-  components: {
-    ProductionBrief
-  },
-
-  computed: {
-    ...mapGetters(['currentProduction', 'isCurrentUserClient'])
-  },
-
-  mounted() {
-    if (this.isCurrentUserClient) {
-      this.$router.push({ name: 'not-found' })
-      return
-    }
-  },
-
-  head() {
-    return {
-      title: `${this.currentProduction?.name} | ${this.$t('productions.brief.title')} - Kitsu`
-    }
-  }
-}
+const { t } = useI18n()
+const router = useRouter()
+const store = useStore()
+
+// Computed
+// --------------------------------------------------------------------------
+const currentProduction = computed(() => store.getters.currentProduction)
+const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+
+// Lifecycle
+// --------------------------------------------------------------------------
+onMounted(() => {
+  if (isCurrentUserClient.value) router.push({ name: 'not-found' })
+})
+
+// Head
+// --------------------------------------------------------------------------
+useHead({
+  title: computed(
+    () =>
+      `${currentProduction.value?.name} | ${t('productions.brief.title')} - Kitsu`
+  )
+})
 </script>
 
 <style lang="scss" scoped>