create Selector component to replace <select> (#14)

index.html

@@ -23,13 +23,13 @@
       const THEME_DEFAULT_LIGHT = 'kouize-light';
       const THEME_DEFAULT_DARK = 'kouize-light';
       const FONT_FAMILIES = [
-        'Signika',
         'Comfortaa',
         'Grandstander',
-        'Mali',
         'Lora',
+        'Mali',
         'Roboto',
         'Saira',
+        'Signika',
         'Tillana',
       ];
       const FONT_FAMILY_DEFAULT = 'Signika';

src/components/ui/FontSelect.vue

@@ -1,35 +1,35 @@
 <script>
+  import Selector from './Selector.vue';
+
   export default {
+    components: {
+      Selector,
+    },
     data() {
       return {
-        fonts: FONT_FAMILIES
+        fonts: Object.fromEntries(FONT_FAMILIES.map(item => [item, item])),
+        fontClasses: Object.fromEntries(FONT_FAMILIES.map(item => [item, `font_family-${item}`])),
+        defaultFont: window.getFontFamily(),
       };
     },
-    computed: {
-      font: {
-        get() {
-          return window.getFontFamily() ?? window.FONT_FAMILY_DEFAULT;
-        },
-        set(value) {
-          if(value !== '') {
-            localStorage.font_family = value;
-          } else {
-            localStorage.removeItem('font_family');
-          }
-          window.updateAppearance();
+    methods: {
+      updateFont(value) {
+        if(value !== '') {
+          localStorage.font_family = value;
+        } else {
+          localStorage.removeItem('font_family');
         }
+        window.updateAppearance();
       }
     },
   }
 </script>
 
 <template>
-  <select
-    v-model="font"
-    v-bind="$attrs"
-  >
-    <template v-for="(fontName) in fonts">
-      <option :value="fontName" :class="`font_family-${fontName}`">{{ fontName }}</option>
-    </template>
-  </select>
+  <Selector 
+    :values="fonts" 
+    :defaultValue="defaultFont"
+    @selected="updateFont"
+    :customClasses="this.fontClasses"
+  />
 </template>

src/components/ui/Selector.vue

@@ -0,0 +1,74 @@
+<script>
+  export default {
+    props: [
+      'values',
+      'defaultValue',
+      'customClasses',
+    ],
+    data() {
+      return {
+        selected: this.defaultValue,
+      };
+    },
+    computed: {
+      selectedComputed: {
+        get() {
+          return this.selected;
+        },
+        set(value) {
+          this.selected = value;
+          this.$emit('selected', value);
+        }
+      }
+    },
+    methods: {
+      getCustomClass(value) {
+        if(!this.customClasses) {
+          return '';
+        }
+        return this.customClasses[value] ?? '';
+      }
+    }
+  }
+</script>
+
+<template>
+  <div v-bind="$attrs" class="wrapper">
+    <label v-for="(label, name) in values" :key="name" :class="getCustomClass(name)">
+      <input type="radio" :value="name" v-model="selectedComputed" />
+      <span>{{ label }}</span>
+    </label>
+  </div>
+</template>
+
+
+<style scoped>
+  .wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .25rem;
+  }
+  label span {
+    display: block;
+    background-color: var(--input-bg);
+    border: 2px solid var(--input-border);
+    border-radius: var(--bradius);
+    padding: .5rem 1rem;
+    opacity: .6;
+    transition: .2s;
+    cursor: pointer;
+  }
+
+  label:hover span {
+    opacity: 1;
+  }
+
+  label input {
+    display: none;
+  }
+
+  input:checked + span {
+    opacity: 1;
+    border-color: var(--secondary-color);
+  }
+</style>

src/components/ui/ThemeSelect.vue

@@ -1,36 +1,33 @@
 <script>
+  import Selector from './Selector.vue';
+
   export default {
+    components: {
+      Selector,
+    },
     data() {
       return {
-        themes: THEMES
+        themes: {'': 'Défaut', ...THEMES},
+        defaultTheme: window.getTheme(),
       };
     },
-    computed: {
-      theme: {
-        get() {
-          return window.getTheme();
-        },
-        set(value) {
-          if(value !== '') {
-            localStorage.theme = value;
-          } else {
-            localStorage.removeItem('theme');
-          }
-          window.updateAppearance();
+    methods: {
+      updateTheme(value) {
+        if(value !== '') {
+          localStorage.theme = value;
+        } else {
+          localStorage.removeItem('theme');
         }
+        window.updateAppearance();
       }
-    },
+    }
   }
 </script>
 
 <template>
-  <select
-    v-model="theme"
-    v-bind="$attrs"
-  >
-    <option value="">Par défaut</option>
-    <template v-for="(themeLabel, theme) in themes">
-      <option :value="theme">{{ themeLabel }}</option>
-    </template>
-  </select>
+  <Selector 
+    :values="themes" 
+    :defaultValue="defaultTheme"
+    @selected="updateTheme" 
+  />
 </template>