From 8937a8eba9cd203a179dbd3ff8c11c1e50034b0c Mon Sep 17 00:00:00 2001
From: Observer KRypt0n_ <suimin.tu.mu.ga.mi@gmail.com>
Date: Sun, 26 Dec 2021 19:50:24 +0200
Subject: [PATCH] Added svelte components - made `SelectionBox` component -
 made `DXVKSelectionList` component - updated locales files - added locale
 selection based on `SelectionBox` component

---
 README.md                                     |  4 +-
 public/locales/en-us.yaml                     | 12 ++--
 public/locales/ru-ru.yaml                     | 16 +++--
 src/components/Checkbox.vue                   | 38 -----------
 src/components/DXVKItem.vue                   |  9 ---
 src/components/DXVKSelectionList.svelte       | 36 ++++++++++
 src/components/DXVKs.vue                      | 10 ---
 src/components/SelectionBox.svelte            | 66 +++++++++++++++++++
 src/components/bases/SelectionList.vue        | 13 ----
 src/components/bases/SelectionListItem.vue    | 19 ------
 src/sass/components.sass                      |  2 +
 .../{selectbox.sass => selectionBox.sass}     |  0
 src/settings.svelte                           | 25 ++++---
 13 files changed, 139 insertions(+), 111 deletions(-)
 delete mode 100644 src/components/Checkbox.vue
 delete mode 100644 src/components/DXVKItem.vue
 create mode 100644 src/components/DXVKSelectionList.svelte
 delete mode 100644 src/components/DXVKs.vue
 create mode 100644 src/components/SelectionBox.svelte
 delete mode 100644 src/components/bases/SelectionList.vue
 delete mode 100644 src/components/bases/SelectionListItem.vue
 rename src/sass/components/{selectbox.sass => selectionBox.sass} (100%)

diff --git a/README.md b/README.md
index 6508aca..18e8842 100644
--- a/README.md
+++ b/README.md
@@ -148,14 +148,14 @@ This is our current roadmap goals. You can find older ones [here](ROADMAP.md)
     * Voice data update (installation) required
     * Patch unavailable
     * Test patch available
-* Make Vue components
+* Make Svelte components
   * <s>Checkbox</s>
   * <s>Selectbox</s>
   * SelectionList
   * SelectableCheckbox
   * PropertiesEditor
 * Rewrite sass code, provide more flexible theming ability
-* <s>Add `vue-i18n`</s>
+* <s>Add `svelte-i18n`</s>
 
 ### Features
 
diff --git a/public/locales/en-us.yaml b/public/locales/en-us.yaml
index 36a98d1..ccfccbc 100644
--- a/public/locales/en-us.yaml
+++ b/public/locales/en-us.yaml
@@ -3,10 +3,12 @@ settings:
   general:
     title: General
     items:
-      test1: Hello 1
-      test2: Hello 2
-      test3: Hello 3
-
       # Language selection
       lang:
-        launcher: Language
\ No newline at end of file
+        launcher:
+          title: Launcher
+          items:
+            en-us: English (US)
+            ru-ru: Русский
+    
+      dxvks: DXVK
\ No newline at end of file
diff --git a/public/locales/ru-ru.yaml b/public/locales/ru-ru.yaml
index 9b07eb0..1618147 100644
--- a/public/locales/ru-ru.yaml
+++ b/public/locales/ru-ru.yaml
@@ -1,12 +1,14 @@
 settings:
-  # General
+  # Основное
   general:
     title: Основное
     items:
-      test1: Привет 1
-      test2: Привет 2
-      test3: Привет 3
-
-      # Language selection
+      # Выбор языка
       lang:
-        launcher: Язык
\ No newline at end of file
+        launcher:
+          title: Лаунчер
+          items:
+            en-us: English (US)
+            ru-ru: Русский
+    
+      dxvks: DXVK
\ No newline at end of file
diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
deleted file mode 100644
index fe0e77f..0000000
--- a/src/components/Checkbox.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-    <div class="checkbox" :class="{'checkbox-active': active}">
-        {{ $t(`settings.${locale.split('.')[0]}.items.${locale.substring(locale.indexOf('.') + 1)}`) }}
-
-        <div class="checkbox-mark" @click="updateSetting">
-            <img src="../assets/svgs/checkmark.svg" />
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import Configs from '../ts/Configs';
-
-export default defineComponent({
-    props: ['locale', 'prop'],
-
-    data: () => ({
-        active: false
-    }),
-
-    created()
-    {
-        Configs.get(this.prop).then((active) => this.active = active as boolean);
-    },
-
-    methods: {
-        updateSetting()
-        {
-            this.active = !this.active;
-
-            Configs.set(this.prop, this.active);
-        }
-    }
-});
-</script>
-
-<style src="../sass/components/checkbox.sass" lang="sass"></style>
diff --git a/src/components/DXVKItem.vue b/src/components/DXVKItem.vue
deleted file mode 100644
index 1d2afe6..0000000
--- a/src/components/DXVKItem.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import SelectionListItem from './bases/SelectionListItem.vue';
-
-export default defineComponent({
-    mixins: [SelectionListItem]
-});
-</script>
diff --git a/src/components/DXVKSelectionList.svelte b/src/components/DXVKSelectionList.svelte
new file mode 100644
index 0000000..557e168
--- /dev/null
+++ b/src/components/DXVKSelectionList.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { _ } from 'svelte-i18n';
+
+    import DXVK from '../ts/core/DXVK';
+
+    import type {
+        DXVK as TDXVK
+    } from '../ts/types/DXVK';
+    
+    let dxvks: TDXVK[] = [];
+
+    DXVK.list().then((list) => dxvks = list);
+
+    import Delete from '../assets/images/delete.png';
+    import Download from '../assets/images/download.png';
+</script>
+
+<h2>{ $_('settings.general.items.dxvks') }</h2>
+
+<div class="list">
+    {#each dxvks as dxvk}
+        <div class="list-item">
+            { dxvk.version }
+
+            <div>
+                <span></span>
+
+                <!-- svelte-ignore a11y-missing-attribute -->
+                <img class="item-delete" src={Delete}>
+
+                <!-- svelte-ignore a11y-missing-attribute -->
+                <img class="item-download" src={Download}>
+            </div>
+        </div>
+    {/each}
+</div>
diff --git a/src/components/DXVKs.vue b/src/components/DXVKs.vue
deleted file mode 100644
index ca72628..0000000
--- a/src/components/DXVKs.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import Configs from '../ts/Configs';
-
-import SelectionList from './bases/SelectionList.vue';
-
-export default defineComponent({
-    mixins: [SelectionList]
-});
-</script>
diff --git a/src/components/SelectionBox.svelte b/src/components/SelectionBox.svelte
new file mode 100644
index 0000000..75fd701
--- /dev/null
+++ b/src/components/SelectionBox.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { _ } from 'svelte-i18n';
+
+    import Configs from '../ts/Configs';
+
+    export let prop: string = '';
+    export let lang: string = '';
+    export let items: ArrayLike<string> = [];
+    export let valueChanged: (value: string) => void = () => {};
+
+    import Arrow from '../assets/svgs/arrow.svg';
+
+    let selectionOpen = false;
+    let selectedValue;
+
+    const selectionChanged = (e: MouseEvent) => {
+        const li = e.target as HTMLElement;
+
+        if (!li.classList.contains('selected'))
+        {
+            const lis = li.parentElement!.children!;
+
+            for (let i = 0; i < lis.length; i++)
+                lis[i].classList.remove('selected');
+
+            li.classList.add('selected');
+
+            Configs.set(prop, li.getAttribute('data-value'));
+
+            selectionOpen = false;
+        }
+    };
+
+    Configs.get(prop).then((value) => selectedValue = value);
+</script>
+
+<div class="select" class:select-active={selectionOpen}>
+    <span>{ $_(lang) }</span>
+
+    <div class="select-options">
+        <ul>
+            {#each Object.keys(items) as itemLang}
+                <li
+                    data-value={itemLang}
+
+                    on:click={selectionChanged}
+                    
+                    on:click={() => {
+                        selectedValue = itemLang;
+
+                        valueChanged(selectedValue);
+                    }}
+
+                    class:selected={itemLang === selectedValue}
+                >{ $_(items[itemLang]) }</li>
+            {/each}
+        </ul>
+    </div>
+
+    <div class="selected-item" on:click={() => selectionOpen = !selectionOpen}>
+        <span>{ $_(items[selectedValue]) }</span>
+
+        <!-- svelte-ignore a11y-missing-attribute -->
+        <img src={Arrow} />
+    </div>
+</div>
diff --git a/src/components/bases/SelectionList.vue b/src/components/bases/SelectionList.vue
deleted file mode 100644
index 513b00a..0000000
--- a/src/components/bases/SelectionList.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-    <div class="list">
-        <slot></slot>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
-
-<style src="../../sass/components/selectionList.sass" lang="sass"></style>
diff --git a/src/components/bases/SelectionListItem.vue b/src/components/bases/SelectionListItem.vue
deleted file mode 100644
index fc6d7ba..0000000
--- a/src/components/bases/SelectionListItem.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <div class="list-item">
-        {{ title }}
-
-        <div>
-            <span></span>
-            <img class="item-delete" src="../../assets/images/delete.png">
-            <img class="item-download" src="../../assets/images/download.png">
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-    props: ['title']
-});
-</script>
diff --git a/src/sass/components.sass b/src/sass/components.sass
index df03813..66909fa 100644
--- a/src/sass/components.sass
+++ b/src/sass/components.sass
@@ -1,6 +1,8 @@
 @use "sass:map"
 
 @import "components/checkbox"
+@import "components/selectionBox"
+@import "components/selectionList"
 
 @mixin themable($theme-name, $theme-map)
     body[data-theme=#{$theme-name}]
diff --git a/src/sass/components/selectbox.sass b/src/sass/components/selectionBox.sass
similarity index 100%
rename from src/sass/components/selectbox.sass
rename to src/sass/components/selectionBox.sass
diff --git a/src/settings.svelte b/src/settings.svelte
index 5be435a..49a6456 100644
--- a/src/settings.svelte
+++ b/src/settings.svelte
@@ -3,6 +3,16 @@
     import { _, locale, locales } from 'svelte-i18n';
 
     import Checkbox from './components/Checkbox.svelte';
+    import SelectionBox from './components/SelectionBox.svelte';
+    import DXVKSelectionList from './components/DXVKSelectionList.svelte';
+
+    let availableLocales: ArrayLike<string> = [];
+
+    $locales.forEach((locale) => {
+        availableLocales[locale] = `settings.general.items.lang.launcher.items.${locale}`;
+    });
+
+    availableLocales = availableLocales;
 
     import Window from './ts/neutralino/Window';
 
@@ -21,15 +31,14 @@
         <div class="settings-item" id="general">
             <h1>{$_('settings.general.title')}</h1>
 
-            <Checkbox lang="settings.general.items.test1" prop="test.1" />
-            <Checkbox lang="settings.general.items.test2" prop="test.2" />
-            <Checkbox lang="settings.general.items.test3" prop="test.3" />
+            <SelectionBox
+                lang="settings.general.items.lang.launcher.title"
+                prop="lang.launcher"
+                items={availableLocales}
+                valueChanged={(value) => $locale = value}
+            />
 
-            <select bind:value={$locale}>
-                {#each $locales as locale}
-                    <option value={locale}>{locale}</option>
-                {/each}
-            </select>
+            <DXVKSelectionList />
         </div>
     </div>
 {/if}