feat(Switch): add label prop for accessibility and tooltip support

Author: Ayideyia

frontend/src/components/Switch/index.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { nextTick } from 'vue'
 
+import i18n from '@/lang'
+
 interface Props {
   size?: 'default' | 'small'
   border?: 'default' | 'square'
+  label?: string
   disabled?: boolean
 }
 
@@ -19,6 +22,8 @@ const emits = defineEmits<{
   (e: 'change', val: boolean): void
 }>()
 
+const { t } = i18n.global
+
 const toggle = () => {
   if (props.disabled) return
   model.value = !model.value
@@ -29,13 +34,15 @@ const toggle = () => {
 <template>
   <div
     @click="toggle"
+    v-tips.slow="label"
     :class="[size, border, model ? 'on' : 'off', disabled ? 'disabled' : '']"
     class="gui-switch relative cursor-pointer h-24 inline-flex items-center rounded-full text-12"
   >
     <div class="dot absolute h-18 w-18 rounded-full duration-200"></div>
 
-    <div v-if="$slots.default" class="slot">
-      <slot></slot>
+    <div v-if="$slots.default || label" class="slot line-clamp-1 break-all">
+      <span v-if="label">{{ t(label) }}</span>
+      <slot v-if="$slots.default"></slot>
     </div>
   </div>
 </template>

frontend/src/directives/tips.ts

@@ -18,8 +18,10 @@ export default {
     }, delay)
 
     el.onmouseenter = (e: MouseEvent) => {
-      el.dataset.showTips = 'true'
-      show(e.clientX, e.clientY)
+      if (binding.value) {
+        el.dataset.showTips = 'true'
+        show(e.clientX, e.clientY)
+      }
     }
 
     el.onmouseleave = () => {

frontend/src/views/HomeView/components/GroupsController.vue

@@ -227,20 +227,12 @@ onActivated(() => {
       class="sticky flex gap-8 items-center p-8 rounded-8 backdrop-blur-sm"
       style="background-color: var(--card-bg)"
     >
-      <Switch v-model="appSettings.app.kernel.autoClose">
-        {{ t('home.controller.autoClose') }}
-      </Switch>
-      <Switch v-model="appSettings.app.kernel.unAvailable">
-        {{ t('home.controller.unAvailable') }}
-      </Switch>
-      <Switch v-model="appSettings.app.kernel.cardMode">
-        {{ t('home.controller.cardMode') }}
-      </Switch>
-      <Switch v-model="appSettings.app.kernel.sortByDelay">
-        {{ t('home.controller.sortBy') }}
-      </Switch>
+      <Switch v-model="appSettings.app.kernel.autoClose" label="home.controller.autoClose" />
+      <Switch v-model="appSettings.app.kernel.unAvailable" label="home.controller.unAvailable" />
+      <Switch v-model="appSettings.app.kernel.cardMode" label="home.controller.cardMode" />
+      <Switch v-model="appSettings.app.kernel.sortByDelay" label="home.controller.sortBy" />
       <Button @click="toggleMoreSettings" type="primary" size="small"> ... </Button>
-      <div class="ml-auto">
+      <div class="ml-auto flex items-center">
         <Button @click="expandAll" v-tips="'home.overview.expandAll'" type="text" icon="expand" />
         <Button
           @click="collapseAll"