refactor: Update dependencies (#369)

* refactor(deps): Update dependencies * refactor(modules): Rewrite icon generator and PWA modules into Nuxt Modules * refactor(i18n): Remove dynamic imports as all messages are compiled * refactor(components): Replace vue-tabler-icons with official package * fix(stores): Fix active schedule preset type * fix(modules): Move module output to separate .build folder * fix(settingsPanel): Fix hydration error due to class on Transition component * fix(icons): Fix icon sizes * refactor(timerProgress): Resort to different progress handling due to Vue 3 bug For some unknown reason, `<TransitionGroup>` has started resetting the CSS transform on the moving progress bar if it the timer was paused while the progress bar was still transitioning. This caused the progress bar to suddenly jump to 100%. This is some weird regression when updating Vue, and I am tired of further debugging it :( * refactor(i18n): Enable further i18n optimizations * chore(index): Remove debug print * fix(timerProgress): Fix Vue 3 `TransitionGroup` deleting CSS `transform` This is done by wrapping the progress bar with another div, which is unaffected by the CSS transform
Hanziness · Sep 15, 2024 · 84e37a1 · 84e37a1
1 parent e57fa58
commit 84e37a1
Show file tree

Hide file tree

Showing 31 changed files with 3,750 additions and 2,103 deletions.
diff --git a/.gitignore b/.gitignore
@@ -93,3 +93,6 @@ sw.*
 .output
 
 .yarn
+
+# Build output of modules
+.build
diff --git a/README.md b/README.md
@@ -85,7 +85,7 @@ This is an open-source project that welcomes contributions. Please check the [**
   * [`nuxt/google-fonts`](https://github.com/nuxt-community/google-fonts-module) for Google Fonts support
   * [`pinia`](https://pinia.vuejs.org/) for state management
 * [**Tailwind CSS**](https://tailwindcss.com/)
-* [Tabler Icons](https://tabler-icons.io/) through [`vue-tabler-icons`](https://github.com/alex-oleshkevich/vue-tabler-icons)
+* [Tabler Icons](https://tabler-icons.io/)
 * [Workbox](https://github.com/GoogleChrome/workbox) as a PWA service worker
 * [`conventional-changelog/standard-version`](https://github.com/conventional-changelog/standard-version) for automatic changelog generation from [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
 

diff --git a/components/appBar.vue b/components/appBar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { SettingsIcon, ChecklistIcon } from 'vue-tabler-icons'
+import { IconSettings, IconChecklist } from '@tabler/icons-vue'
 import { ButtonImportance, ButtonTheme } from './base/types/button'
 import CButton from '~~/components/base/uiButton.vue'
 import ScheduleView from '@/components/schedule/scheduleDisplay.vue'
@@ -33,7 +33,7 @@ const settingsStore = useSettings()
       :aria-label="$t('appbar.todo')"
       @click="openPanels.todo = !openPanels.todo"
     >
-      <ChecklistIcon class="inline-block" />
+      <IconChecklist class="inline-block" />
     </CButton>
     <CButton
       circle
@@ -46,7 +46,7 @@ const settingsStore = useSettings()
       inner-class="p-1"
       @click="openPanels.settings = !openPanels.settings"
     >
-      <SettingsIcon class="inline-block" />
+      <IconSettings size="24" class="inline-block" />
     </CButton>
   </div>
 </template>
diff --git a/components/base/optionGroup.vue b/components/base/optionGroup.vue
@@ -4,7 +4,7 @@ import OptionControl from '~~/components/base/uiOption.vue'
 interface Props {
   choices: Record<string, unknown>,
   translationKey?: string,
-  value: keyof Props['choices'] | null,
+  value?: keyof Props['choices'],
   overrideText?: Record<'title'|'description', Record<string, string>>
 }
 

diff --git a/components/base/uiToggle.vue b/components/base/uiToggle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CheckIcon, XIcon } from 'vue-tabler-icons'
+import { IconCheck, IconX } from '@tabler/icons-vue'
 
 const props = defineProps({
   value: {
@@ -36,14 +36,14 @@ const computedValue = computed({
       <!-- ON component -->
       <div class="transition" :class="[{ 'opacity-0': !props.value }]">
         <slot name="when-on">
-          <CheckIcon size="18" class="opacity-80" />
+          <IconCheck size="18" class="opacity-80" />
         </slot>
       </div>
 
       <!-- OFF component -->
       <div class="transition" :class="[{ 'opacity-0': !!props.value }]">
         <slot name="when-off">
-          <XIcon size="18" class="opacity-80" />
+          <IconX size="18" class="opacity-80" />
         </slot>
       </div>
     </div>

diff --git a/components/settings/aboutTab.vue b/components/settings/aboutTab.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CoffeeIcon, BrandGithubIcon, BrandTwitterIcon, BrandFacebookIcon, BrandRedditIcon } from 'vue-tabler-icons'
+import { IconCoffee, IconBrandGithub, IconBrandTwitter, IconBrandFacebook, IconBrandReddit } from '@tabler/icons-vue'
 import { ButtonImportance } from '../base/types/button'
 import Button from '~~/components/base/uiButton.vue'
 import { AppPlatform } from '~~/platforms/platforms'
@@ -39,7 +39,7 @@ const mainStore = useMain()
           inner-class="flex flex-row items-center gap-1 text-slate-50 text-gray-50"
           bg-class="bg-slate-900 dark:bg-slate-700"
         >
-          <BrandGithubIcon />
+          <IconBrandGithub />
           <span v-text="$t('settings.about.source')" />
         </Button>
         <Button
@@ -53,7 +53,7 @@ const mainStore = useMain()
           inner-class="flex flex-row items-center gap-1 text-black"
           bg-class="bg-yellow-300"
         >
-          <CoffeeIcon />
+          <IconCoffee />
           <span v-text="$t('settings.about.support')" />
         </Button>
         <Button
@@ -63,7 +63,7 @@ const mainStore = useMain()
           inner-class="flex flex-row items-center gap-1 text-black"
           bg-class="bg-yellow-300"
         >
-          <CoffeeIcon />
+          <IconCoffee />
           <span v-text="$t('settings.about.support')" />
         </Button>
       </div>
@@ -81,7 +81,7 @@ const mainStore = useMain()
           bg-class="bg-[#1da1f2]"
           inner-class="!p-4 text-slate-50"
         >
-          <BrandTwitterIcon :aria-label="$t('support.share.twitter')" size="24" />
+          <IconBrandTwitter :aria-label="$t('support.share.twitter')" size="24" />
         </Button>
         <Button
           link
@@ -94,7 +94,7 @@ const mainStore = useMain()
           bg-class="bg-[#1877f2]"
           inner-class="!p-4 text-slate-50"
         >
-          <BrandFacebookIcon :aria-label="$t('support.share.facebook')" size="24" class="translate-x-[-1px]" />
+          <IconBrandFacebook :aria-label="$t('support.share.facebook')" size="24" class="translate-x-[-1px]" />
         </Button>
         <Button
           link
@@ -107,7 +107,7 @@ const mainStore = useMain()
           bg-class="bg-[#ff4500]"
           inner-class="!p-4 text-slate-50"
         >
-          <BrandRedditIcon :aria-label="$t('support.share.reddit')" size="24" />
+          <IconBrandReddit :aria-label="$t('support.share.reddit')" size="24" />
         </Button>
       </div>
     </div>

diff --git a/components/settings/settingsPanel.vue b/components/settings/settingsPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XIcon as CloseIcon, AdjustmentsIcon as TabIconGeneral, AlarmIcon as TabIconSchedule, ArtboardIcon as TabIconVisuals, InfoCircleIcon as InfoIcon, InfoCircleIcon as TabIconAbout } from 'vue-tabler-icons'
+import { IconX as CloseIcon, IconAdjustments as TabIconGeneral, IconAlarm as TabIconSchedule, IconArtboard as TabIconVisuals, IconInfoCircle as InfoIcon, IconInfoCircle as TabIconAbout } from '@tabler/icons-vue'
 
 import { ButtonImportance } from '../base/types/button'
 import ThemeSettings from './theme/themeSettings.vue'
@@ -53,11 +53,11 @@ notificationsStore.updateEnabled()
           tabindex="0"
           @click="openPanels.settings = false"
         >
-          <CloseIcon :aria-label="$t('settings.buttons.close')" />
+          <CloseIcon size="24"  :aria-label="$t('settings.buttons.close')" />
         </ControlButton>
       </h1>
       <div class="flex-grow overflow-y-auto">
-        <Transition tag="div" name="tab-transition" mode="out-in" class="relative w-full">
+        <Transition tag="div" name="tab-transition" mode="out-in">
           <!-- Core settings -->
           <div v-if="state.activeTab === 1" :key="1" class="settings-tab">
             <OptionGroup
@@ -137,7 +137,7 @@ notificationsStore.updateEnabled()
             <SettingsItem :type="Control.Time" path="schedule.lengths.shortpause" :min-ms="5000" />
             <SettingsItem :type="Control.Time" path="schedule.lengths.longpause" :min-ms="5000" />
             <div class="flex flex-row items-center px-3 py-4 space-x-2 rounded-lg ring-inset ring ring-primary bg-primary/20 dark:bg-gray-700 dark:text-gray-100">
-              <InfoIcon />
+              <InfoIcon size="24" />
               <span v-text="$t('settings.scheduleMinTime')" />
             </div>
           </div>
@@ -176,22 +176,22 @@ notificationsStore.updateEnabled()
       <div class="flex flex-row flex-none h-20 p-4">
         <TabHeader :active="state.activeTab === 1" :text="$t('settings.tabs.main')" @click="state.activeTab = 1">
           <template #icon>
-            <TabIconGeneral role="presentation" />
+            <TabIconGeneral size="24" role="presentation" />
           </template>
         </TabHeader>
         <TabHeader :active="state.activeTab === 2" :text="$t('settings.tabs.timer')" @click="state.activeTab = 2">
           <template #icon>
-            <TabIconSchedule role="presentation" />
+            <TabIconSchedule size="24" role="presentation" />
           </template>
         </TabHeader>
         <TabHeader :active="state.activeTab === 3" :text="$t('settings.tabs.display')" @click="state.activeTab = 3">
           <template #icon>
-            <TabIconVisuals role="presentation" />
+            <TabIconVisuals size="24" role="presentation" />
           </template>
         </TabHeader>
         <TabHeader :active="state.activeTab === 4" :text="$t('settings.tabs.about')" @click="state.activeTab = 4">
           <template #icon>
-            <TabIconAbout role="presentation" />
+            <TabIconAbout size="24" role="presentation" />
           </template>
         </TabHeader>
       </div>

diff --git a/components/setup/step.vue b/components/setup/step.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { BellRingingIcon } from 'vue-tabler-icons'
+import { IconBellRinging } from '@tabler/icons-vue'
 
 export default {
   components: {
-    IconAlert: BellRingingIcon
+    IconAlert: IconBellRinging
   },
 
   props: {

diff --git a/components/socialButtons/supportButton.vue b/components/socialButtons/supportButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Component, PropType } from 'vue'
+import type { Component, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { BrandGithubIcon as GitHub, CoffeeIcon as Coffee } from 'vue-tabler-icons'
+import { IconBrandGithub as GitHub, IconCoffee as Coffee } from '@tabler/icons-vue'
 
 const { t } = useI18n()
 

diff --git a/components/timer/controls/controlsNew.vue b/components/timer/controls/controlsNew.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PlayerPlayIcon, PlayerPauseIcon, PlayerStopIcon, PlayerTrackNextIcon } from 'vue-tabler-icons'
+import { IconPlayerPlay, IconPlayerPause, IconPlayerStop, IconPlayerTrackNext } from '@tabler/icons-vue'
 import { ButtonImportance, ButtonTheme } from '~~/components/base/types/button'
 import CButton from '~~/components/base/uiButton.vue'
 import { TimerState, useSchedule } from '~~/stores/schedule'
@@ -36,7 +36,7 @@ const advance = () => {
       :aria-label="$t('controls.stop')"
       @click="reset"
     >
-      <PlayerStopIcon :size="24" />
+      <IconPlayerStop :size="24" />
     </CButton>
 
     <CButton
@@ -48,8 +48,8 @@ const advance = () => {
       :importance="ButtonImportance.Filled"
       @click="playPause"
     >
-      <PlayerPlayIcon v-if="scheduleStore.timerState !== TimerState.RUNNING" :size="28" />
-      <PlayerPauseIcon v-else :size="28" />
+      <IconPlayerPlay v-if="scheduleStore.timerState !== TimerState.RUNNING" :size="28" />
+      <IconPlayerPause v-else :size="28" />
     </CButton>
 
     <CButton
@@ -62,7 +62,7 @@ const advance = () => {
       :class="{ 'scale-0 opacity-0 pointer-events-none' : scheduleStore.timerState === TimerState.RUNNING }"
       @click="advance()"
     >
-      <PlayerTrackNextIcon :size="24" />
+      <IconPlayerTrackNext :size="24" />
     </CButton>
   </div>
 </template>
diff --git a/components/timer/display/timerComplete.vue b/components/timer/display/timerComplete.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CheckIcon as CompleteIcon } from 'vue-tabler-icons'
+import { IconCheck as CompleteIcon } from '@tabler/icons-vue'
 </script>
 
 <template>

diff --git a/components/timer/timerProgress.vue b/components/timer/timerProgress.vue
@@ -27,27 +27,30 @@ const props = defineProps({
 })
 
 const progressPercentage = computed(() => {
-  return Math.min((props.timeElapsed / props.timeOriginal) * 100, 100)
+  return props.background ? 100 : Math.min((props.timeElapsed / props.timeOriginal) * 100, 100)
 })
 </script>
 
 <template>
-  <div
-    class="absolute top-0 left-0 block w-full h-full transition-all duration-500 transform-gpu"
-    :class="[{ 'ease-out-expo': background }]"
-    :style="{
-      'background-color': colour ? colour : scheduleStore.getScheduleColour[scheduleEntryId],
-      'transform': !background ? `translateX(${-100 + progressPercentage}%)` : 'translateX(0%)'
-    }"
-  >
-    <!-- Dark mode background override -->
-    <div class="absolute invisible w-full h-full bg-gray-600 dark:visible mix-blend-multiply" />
+  <div class="absolute top-0 left-0 block w-full h-full transition-all">
+    <div
+      class="w-full h-full transition-all duration-500 transform-gpu timer-progress"
+      :class="[{ 'ease-out-expo': props.background }]"
+      :style="{
+        'background-color': props.colour ? props.colour : scheduleStore.getScheduleColour[scheduleEntryId],
+        '--transform': `translateX(${-100 + progressPercentage}%)`,
+      }"
+    >
+      <!-- Dark mode background override -->
+      <div class="absolute invisible w-full h-full bg-gray-600 dark:visible mix-blend-multiply" />
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .timer-progress {
   transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+  transform: var(--transform);
 }
 
 .ease-out-expo {

diff --git a/components/todoList/addTask.vue b/components/todoList/addTask.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CornerDownLeftIcon } from 'vue-tabler-icons'
+import { IconCornerDownLeft } from '@tabler/icons-vue'
 import { type Ref } from 'vue'
 import { ButtonImportance } from '../base/types/button'
 import Button from '~~/components/base/uiButton.vue'
@@ -70,7 +70,7 @@ const checkEnter = (event: KeyboardEvent) => {
       :disabled="!data.valid"
       @click="addTask"
     >
-      <CornerDownLeftIcon :stroke-width="2" class="relative" size="24" />
+      <IconCornerDownLeft :stroke-width="2" class="relative" size="24" />
     </Button>
   </div>
 </template>
diff --git a/components/todoList/todoItem.vue b/components/todoList/todoItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { nextTick, type Ref, type PropType } from 'vue'
-import { MenuIcon, TrashIcon, PencilIcon } from 'vue-tabler-icons'
+import { IconMenu, IconTrash, IconPencil } from '@tabler/icons-vue'
 import { ButtonImportance } from '../base/types/button'
 import { TaskState, useTasklist, type Task } from '~~/stores/tasklist'
 import { useSettings, ColorMethod } from '~~/stores/settings'
@@ -109,8 +109,8 @@ const handleEdit = (newValue: string) => {
   >
     <div :class="['absolute left-0 top-0 h-full self-stretch bg-themed transition-all duration-75 text-white flex flex-row items-center flex-shrink-0 cursor-move', showReorder ? 'w-6' : 'w-0']">
       <span v-show="showReorder">
-        <PencilIcon v-if="props.manage && state.editing" size="16" />
-        <MenuIcon v-else size="16" />
+        <IconPencil v-if="props.manage && state.editing" size="16" />
+        <IconMenu v-else size="16" />
       </span>
     </div>
     <div class="flex flex-col flex-grow w-full min-w-0 py-2 -my-2 transition-all duration-75 select-none mr-7" :class="[showReorder ? 'translate-x-6' : 'translate-x-0']" @click="state.editing = true">
@@ -139,7 +139,7 @@ const handleEdit = (newValue: string) => {
           bg-class="ring-themed bg-themed"
           @click="emit('delete')"
         >
-          <TrashIcon size="18" />
+          <IconTrash size="18" />
         </Button>
       </transition>
       <input v-model="checked" type="checkbox" class="w-6 h-6 mr-1 rounded accent-themed text-themed dark:text-themed md:w-5 md:h-5">

diff --git a/components/todoList/todoList.vue b/components/todoList/todoList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XIcon } from 'vue-tabler-icons'
+import { IconX } from '@tabler/icons-vue'
 
 import { ButtonImportance, ButtonTheme } from '../base/types/button'
 import ControlButton from '~~/components/base/uiButton.vue'
@@ -68,7 +68,7 @@ const handleDrop = () => {
       <p class="text-xl font-bold tracking-tighter text-gray-800 uppercase dark:text-gray-100" v-text="$t('tasks.title')" />
       <div class="absolute right-0 float-right -mr-2">
         <ControlButton circle default-style :theme="ButtonTheme.Primary" :importance="ButtonImportance.Text" @click="openPanels.todo = false">
-          <XIcon />
+          <IconX />
         </ControlButton>
       </div>
     </div>

diff --git a/components/tutorial/onboarding/page0_welcome.vue b/components/tutorial/onboarding/page0_welcome.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { LanguageIcon } from 'vue-tabler-icons'
+import { IconLanguage } from '@tabler/icons-vue'
 import OnboardingPage from './onboardingPage.vue'
 import OnboardingHeader from './onboardingHeader.vue'
 import OptionGroup from '~~/components/base/optionGroup.vue'
@@ -18,7 +18,7 @@ const settingsStore = useSettings()
     <div class="text-center -mt-3 mb-4" v-text="$t('tutorials.onboarding.pages.0.onboarding_invite')" />
 
     <OnboardingHeader :text="$t('tutorials.onboarding.pages.0.heading')">
-      <LanguageIcon :size="42" />
+      <IconLanguage :size="42" />
     </OnboardingHeader>
 
     <OptionGroup

diff --git a/components/tutorial/onboarding/page1.vue b/components/tutorial/onboarding/page1.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ClockPlayIcon } from 'vue-tabler-icons'
-import OptionGroup from '~~/components/base/optionGroup.vue'
+import { IconClockPlay } from '@tabler/icons-vue'
 import { useSettings } from '~~/stores/settings';
 
 const settingsStore = useSettings()
@@ -9,7 +8,7 @@ const settingsStore = useSettings()
 <template>
   <div class="h-96 flex flex-col justify-start items-center gap-2">
     <div class="px-6 py-3 flex gap-2 text-lg flex-row justify-center items-center">
-      <ClockPlayIcon :size="42" />
+      <IconClockPlay :size="42" />
       Set your timer
     </div>
   </div>