Added svelte components

- made `SelectionBox` component
- made `DXVKSelectionList` component
- updated locales files
- added locale selection based on `SelectionBox` component

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
 

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
+        launcher:
+          title: Launcher
+          items:
+            en-us: English (US)
+            ru-ru: Русский
+    
+      dxvks: DXVK

public/locales/ru-ru.yaml

@@ -1,12 +1,14 @@
 settings:
-  # General
+  # Основное
   general:
     title: Основное
     items:
-      test1: Привет 1
+      # Выбор языка
-      test2: Привет 2
-      test3: Привет 3
-
-      # Language selection
       lang:
-        launcher: Язык
+        launcher:
+          title: Лаунчер
+          items:
+            en-us: English (US)
+            ru-ru: Русский
+    
+      dxvks: DXVK

src/components/Checkbox.vue

@@ -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>

src/components/DXVKItem.vue

@@ -1,9 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import SelectionListItem from './bases/SelectionListItem.vue';
-
-export default defineComponent({
-    mixins: [SelectionListItem]
-});
-</script>

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>

src/components/DXVKs.vue

@@ -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>

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>

src/components/bases/SelectionList.vue

@@ -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>

src/components/bases/SelectionListItem.vue

@@ -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>

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}]

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" />
+            <SelectionBox
-            <Checkbox lang="settings.general.items.test2" prop="test.2" />
+                lang="settings.general.items.lang.launcher.title"
-            <Checkbox lang="settings.general.items.test3" prop="test.3" />
+                prop="lang.launcher"
+                items={availableLocales}
+                valueChanged={(value) => $locale = value}
+            />
 
-            <select bind:value={$locale}>
+            <DXVKSelectionList />
-                {#each $locales as locale}
-                    <option value={locale}>{locale}</option>
-                {/each}
-            </select>
         </div>
     </div>
 {/if}