feat(settings): refactor settings form

dvcol · dvcol · commit 20ae9abdb282 · 2024-04-15T18:01:12.000+02:00
diff --git a/src/components/views/settings/SettingsCache.vue b/src/components/views/settings/SettingsCache.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { NButton, NFormItem, NIcon, NSelect } from 'naive-ui';
+import { NButton, NIcon, NSelect } from 'naive-ui';
 
 import { reactive, ref } from 'vue';
 
 import IconRestore from '~/components/icons/IconRestore.vue';
+import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
+
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
@@ -75,39 +77,31 @@ const container = ref();
 
 <template>
   <div ref="container" class="cache-container">
-    <NFormItem class="form-row" :show-feedback="false" label-placement="left">
-      <template #label>
-        <span class="from-label">{{ i18n('label_retention_trakt') }}</span>
-      </template>
+    <!--  Retention  -->
+    <SettingsFormItem :label="i18n('label_retention_trakt')">
       <NSelect
         v-model:value="traktCacheRetention"
         class="form-select"
         :to="container"
         :options="cacheOptions"
       />
-    </NFormItem>
-    <NFormItem class="form-row" :show-feedback="false" label-placement="left">
-      <template #label>
-        <span class="from-label">{{ i18n('label_retention_images') }}</span>
-      </template>
+    </SettingsFormItem>
+
+    <SettingsFormItem :label="i18n('label_retention_images')">
       <NSelect
         v-model:value="tmdbCacheRetention"
         class="form-select"
         :to="container"
         :options="cacheOptions"
       />
-    </NFormItem>
+    </SettingsFormItem>
 
-    <NFormItem
+    <!--  Cache evict  -->
+    <SettingsFormItem
       v-for="({ label, click }, index) in evictScopes"
       :key="index"
-      class="form-row"
-      :show-feedback="false"
-      label-placement="left"
+      :label="label"
     >
-      <template #label>
-        <span class="from-label">{{ label }}</span>
-      </template>
       <NButton
         class="evict-button"
         type="warning"
@@ -120,7 +114,7 @@ const container = ref();
           <NIcon :component="IconRestore" />
         </template>
       </NButton>
-    </NFormItem>
+    </SettingsFormItem>
   </div>
 </template>
 
@@ -140,24 +134,4 @@ const container = ref();
 .form-select {
   min-width: 10rem;
 }
-
-.from-label {
-  color: var(--white-70);
-  font-weight: 600;
-  font-size: 1rem;
-  transition: color 0.3s var(--n-bezier);
-}
-
-.form-row {
-  display: flex;
-  flex: 1 1 auto;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  &:hover {
-    .from-label {
-      color: var(--white-mute);
-    }
-  }
-}
 </style>
diff --git a/src/components/views/settings/SettingsFormItem.vue b/src/components/views/settings/SettingsFormItem.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { type FormItemGiProps, NFormItem } from 'naive-ui';
+
+import type { PropType } from 'vue';
+
+defineProps({
+  label: {
+    type: String,
+    required: false,
+  },
+  form: {
+    type: Object as PropType<FormItemGiProps>,
+    required: false,
+  },
+});
+</script>
+
+<template>
+  <NFormItem class="form-row" label-placement="left" :show-feedback="false" v-bind="form">
+    <template #label>
+      <span class="from-label">{{ label }}</span>
+    </template>
+    <slot />
+  </NFormItem>
+</template>
+
+<style lang="scss" scoped>
+.from-label {
+  color: var(--white-70);
+  font-weight: 600;
+  font-size: 1rem;
+  transition: color 0.3s var(--n-bezier);
+}
+
+.form-row {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  :deep(label) {
+    max-width: 100%;
+    text-align: start;
+  }
+
+  &:hover {
+    .from-label {
+      color: var(--white-mute);
+    }
+  }
+}
+</style>
diff --git a/src/components/views/settings/SettingsLinks.vue b/src/components/views/settings/SettingsLinks.vue
@@ -19,6 +19,7 @@ import IconClose from '~/components/icons/IconClose.vue';
 import IconConfirm from '~/components/icons/IconConfirm.vue';
 import IconPlus from '~/components/icons/IconPlus.vue';
 import IconRestore from '~/components/icons/IconRestore.vue';
+import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
 import {
   AllCustomLinkScopes,
   type CustomLink,
@@ -104,24 +105,18 @@ const containerRef = ref<HTMLDivElement>();
 <template>
   <div ref="containerRef" class="links-container">
     <!--  Header  -->
-    <NFormItem class="form-header-row" label-placement="left" :show-feedback="false">
-      <template #label>
-        <span class="form-header">{{ i18n('label_show_hide') }}</span>
-      </template>
-      <NSwitch v-model:value="aliasEnabled" class="form-header-switch">
+    <SettingsFormItem :label="i18n('label_show_hide')">
+      <NSwitch v-model:value="aliasEnabled" class="form-switch">
         <template #checked>{{ i18n('show', 'common', 'button') }}</template>
         <template #unchecked>{{ i18n('hide', 'common', 'button') }}</template>
       </NSwitch>
-    </NFormItem>
-    <NFormItem class="form-header-row" label-placement="left" :show-feedback="false">
-      <template #label>
-        <span class="form-header">{{ i18n('label_open_in_background') }}</span>
-      </template>
-      <NSwitch v-model:value="openLinkInBackground" class="form-header-switch">
+    </SettingsFormItem>
+    <SettingsFormItem :label="i18n('label_open_in_background')">
+      <NSwitch v-model:value="openLinkInBackground" class="form-switch">
         <template #checked>{{ i18n('on', 'common', 'button') }}</template>
         <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
       </NSwitch>
-    </NFormItem>
+    </SettingsFormItem>
 
     <!--  Content  -->
     <NForm ref="formRef" :model="form">
@@ -271,32 +266,13 @@ const containerRef = ref<HTMLDivElement>();
   }
 }
 
-.form-header {
-  color: var(--white-70);
-  font-weight: 600;
-  font-size: 1rem;
-  transition: color 0.3s var(--n-bezier);
-
-  &-row {
-    &:hover {
-      .form-header {
-        color: var(--white-mute);
-      }
-    }
-
-    @media (width < 400px) {
-      max-width: 70%;
-    }
-  }
-
-  &-switch {
-    display: flex;
-    flex: 1 1 auto;
-    justify-content: flex-end;
-    min-width: 4rem;
-    padding: 0 0.5rem;
-    font-size: 0.75rem;
-  }
+.form-switch {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  min-width: 4rem;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
 }
 
 .form-row {
diff --git a/src/components/views/settings/SettingsLogs.vue b/src/components/views/settings/SettingsLogs.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { NFormItem, NSelect } from 'naive-ui';
+import { NSelect } from 'naive-ui';
 
 import { ref } from 'vue';
 
+import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
 import { LogLevel, useLogStore } from '~/stores/settings/log.store';
 import { useI18n } from '~/utils';
 
@@ -22,17 +23,14 @@ const container = ref();
 
 <template>
   <div ref="container" class="logs-container">
-    <NFormItem class="form-row" :show-feedback="false" label-placement="left">
-      <template #label>
-        <span class="from-label">{{ i18n('label_log_level') }}</span>
-      </template>
+    <SettingsFormItem :label="i18n('label_log_level')">
       <NSelect
         v-model:value="logLevel"
         class="form-select"
         :to="container"
         :options="options"
       />
-    </NFormItem>
+    </SettingsFormItem>
   </div>
 </template>
 
@@ -46,24 +44,4 @@ const container = ref();
 .form-select {
   min-width: 10rem;
 }
-
-.from-label {
-  color: var(--white-70);
-  font-weight: 600;
-  font-size: 1rem;
-  transition: color 0.3s var(--n-bezier);
-}
-
-.form-row {
-  display: flex;
-  flex: 1 1 auto;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  &:hover {
-    .from-label {
-      color: var(--white-mute);
-    }
-  }
-}
 </style>
