Several changes

- made selectbox component
- added language selection box
- renamed languages

README.md

@@ -149,12 +149,13 @@ This is our current roadmap goals. You can find older ones [here](ROADMAP.md)
     * Patch unavailable
     * Test patch available
 * Make Vue components
-  * Checkbox
+  * <s>Checkbox</s>
-  * Selection
+  * <s>Selectbox</s>
   * SelectionList
+  * SelectableCheckbox
   * PropertiesEditor
 * Rewrite sass code, provide more flexible theming ability
-* Add `vue-i18n`
+* <s>Add `vue-i18n`</s>
 
 ### Features
 

public/locales/en-us.yaml

@@ -0,0 +1,12 @@
+settings:
+  # General
+  general:
+    title: General
+    items:
+      test1: Hello 1
+      test2: Hello 2
+      test3: Hello 3
+
+      # Language selection
+      lang:
+        launcher: Language

public/locales/en.yaml

@@ -1,7 +0,0 @@
-settings:
-  general:
-    title: General
-    items:
-      test1: Hello 1
-      test2: Hello 2
-      test3: Hello 3

public/locales/ru-ru.yaml

@@ -1,7 +1,12 @@
 settings:
+  # General
   general:
     title: Основное
     items:
       test1: Привет 1
       test2: Привет 2
       test3: Привет 3
+
+      # Language selection
+      lang:
+        launcher: Язык

settings.html

@@ -17,15 +17,13 @@
                 <div class="settings-item" id="general">
                     <h2>{{ $t('settings.general.title') }}</h2>
     
-                    <div class="locale-changer">
-                        <select v-model="$i18n.locale">
-                            <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ locale }}</option>
-                        </select>
-                    </div>
-    
                     <l-checkbox locale="general.test1" prop="test1"></l-checkbox>
                     <l-checkbox locale="general.test2" prop="test2"></l-checkbox>
                     <l-checkbox locale="general.test3" prop="test3"></l-checkbox>
+
+                    <l-selectbox locale="general.lang.launcher" prop="lang.launcher">
+                        <li v-for="(lang, code) in languages" :lang="code">{{ lang }}</li>
+                    </l-selectbox>
                 </div>
             </div>
         </div>

src/assets/svgs/arrow.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 330.002 330.002" xml:space="preserve"><path d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21 l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001 c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/></svg>

src/components/Checkbox.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="checkbox" :class="{'checkbox-active': active}">
-        {{ $t(`settings.${locale.split('.')[0]}.items.${locale.split('.')[1]}`) }}
+        {{ $t(`settings.${locale.split('.')[0]}.items.${locale.substring(locale.indexOf('.') + 1)}`) }}
 
         <div class="checkbox-mark" @click="updateSetting">
             <img src="../assets/svgs/checkmark.svg" />
@@ -35,4 +35,4 @@ export default defineComponent({
 });
 </script>
 
-<style src="../sass/components/checkbox.sass" lang="sass" scoped></style>
+<style src="../sass/components/checkbox.sass" lang="sass"></style>

src/components/Selectbox.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="select" :class="{'select-active': selectionOpen}">
+        <span>{{ $t(this.trueLocale) }}</span>
+
+        <div class="select-options">
+            <ul @click="selectLang">
+                <slot></slot>
+            </ul>
+        </div>
+
+        <div class="selected-item" @click="this.selectionOpen = !this.selectionOpen">
+            <span>{{ lang.available[lang.selected] }}</span>
+
+            <img src="../assets/svgs/arrow.svg" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Configs from '../ts/Configs';
+
+export default defineComponent({
+    props: ['locale', 'prop'],
+    inject: ['languages'],
+
+    data()
+    {
+        return {
+            trueLocale: '',
+            selectionOpen: false,
+            lang: {
+                selected: 'en-us',
+                available: this.languages
+            }
+        };
+    },
+
+    created()
+    {
+        const group = this.locale.split('.')[0];
+        const locale = this.locale.substring(this.locale.indexOf('.') + 1);
+
+        this.trueLocale = `settings.${group}.items.${locale}`;
+
+        Configs.get('lang.launcher').then((lang) => {
+            this.lang.selected = (lang as string|null) ?? 'en-us';
+        });
+    },
+
+    methods: {
+        selectLang(event: MouseEvent)
+        {
+            const li = event.target as HTMLElement;
+
+            if (!li.classList.contains('selected'))
+            {
+                const children = li.parentElement!.children;
+
+                for (let i = 0; i < children.length; ++i)
+                    children[i].classList.remove('selected');
+
+                li.classList.add('selected');
+
+                this.lang.selected = li.getAttribute('lang')!;
+                this.selectionOpen = false;
+
+                this.$i18n.locale = this.lang.selected;
+
+                Configs.set(this.prop, this.lang.selected);
+            }
+        }
+    }
+});
+</script>
+
+<style src="../sass/components/selectbox.sass" lang="sass"></style>

src/pages/settings.ts

@@ -3,16 +3,32 @@ import { createI18n } from 'vue-i18n';
 
 import Window from '../ts/neutralino/Window';
 
-import Checkbox from '../components/Checkbox.vue';
 import Locales from '../ts/core/Locales';
 
+import Checkbox from '../components/Checkbox.vue';
+import Selectbox from '../components/Selectbox.vue';
+
 const app = createApp({
     data: () => ({
-        title: 'about'
+        title: 'about',
+
+        // Languages selection
+        languages: {
+            'en-us': 'English (US)',
+            'ru-ru': 'Russian'
+        }
     }),
 
+    provide()
+    {
+        return {
+            languages: this.languages
+        };
+    },
+
     components: {
-        'l-checkbox': Checkbox
+        'l-checkbox': Checkbox,
+        'l-selectbox': Selectbox
     },
 
     mounted: () => Window.current.show()
@@ -20,8 +36,8 @@ const app = createApp({
 
 Locales.get().then((locales) => {
     app.use(createI18n({
-        locale: 'en',
+        locale: 'en-us',
-        fallbackLocale: 'en',
+        fallbackLocale: 'en-us',
 
         // @ts-expect-error
         messages: locales

src/sass/components.sass

@@ -220,189 +220,6 @@
                 img.item-delete
                     display: block
 
-        /* Checkbox */
-            
-        .checkbox
-            display: inline-flex !important
-            align-items: center
-
-            font-size: larger
-
-            width: calc(100% - 24px)
-            height: 48px
-            padding: 0 12px
-
-            border-radius: 12px
-
-            .checkbox-mark
-                display: flex
-
-                background-color: map.get($theme-map, "background2")
-
-                border-radius: 16px
-                margin-left: auto
-                padding: 8px 16px
-
-                cursor: pointer
-
-                &:hover
-                    background-color: map.get($theme-map, "primary")
-
-                    svg
-                        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
-
-                svg
-                    height: 12px
-                    width: 12px
-
-                    @if $theme-name == dark
-                        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
-
-        .checkbox-disabled
-            background-color: map.get($theme-map, "background1")
-
-            .checkbox-mark
-                display: none
-
-        .checkbox-active
-            .checkbox-mark
-                background-color: map.get($theme-map, "primary")
-
-                svg
-                    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
-
-        .selectable-checkbox
-            cursor: pointer
-
-            &:hover
-                background-color: map.get($theme-map, "background2")
-
-        .checkbox-active:is(.selectable-checkbox)
-            background-color: map.get($theme-map, "background2")
-
-        /* Select box */
-
-        .select
-            display: inline-flex
-            align-items: center
-
-            font-size: larger
-
-            width: calc(100% - 24px)
-            height: 48px
-            padding: 0 12px
-
-            border-radius: 12px
-
-            .select-options
-                position: absolute
-                display: none
-
-                max-height: 230px
-                overflow: auto
-
-                background-color: map.get($theme-map, "select-boxes")
-                border-radius: 12px
-
-                box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2)
-
-                padding: 8px 12px
-                transform: translateY(calc(50% + 32px))
-
-                right: 32px
-
-                cursor: pointer
-
-                z-index: 1
-
-                @if $theme-name == dark
-                    &::-webkit-scrollbar-track
-                        background-color: map.get($theme-map, "background2")
-
-                    &::-webkit-scrollbar-thumb
-                        background: #d8dee9
-
-                        &:hover
-                            background: #e5e9f0
-
-                ul
-                    list-style: none
-
-                    padding: 0
-                    margin: 0
-
-                    li
-                        color: #8592a3
-                        font-size: smaller
-
-                        border-radius: 8px
-                        
-                        padding: 8px 12px
-                        margin: 0 -4px
-
-                        &:hover:not([disabled])
-                            background-color: map.get($theme-map, "background2")
-                            color: map.get($theme-map, "primary")
-
-                        &[disabled]
-                            display: block
-                            color: #b2c0d3
-                            cursor: default
-
-                    li:not(last-child)
-                        margin-bottom: 4px
-
-                    li.selected
-                        background-color: map.get($theme-map, "background2")
-                        color: map.get($theme-map, "primary")
-
-            .selected-item
-                display: flex
-                align-items: baseline
-
-                font-size: initial
-
-                background-color: map.get($theme-map, "background2")
-
-                border-radius: 16px
-                margin-left: auto
-                padding: 8px 16px
-
-                cursor: pointer
-
-                &:hover
-                    background-color: map.get($theme-map, "primary")
-
-                    span
-                        color: white
-
-                    svg
-                        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
-
-                svg
-                    height: 12px
-                    width: 12px
-
-                    margin-left: 8px
-
-                    transform: rotate(90deg)
-
-                    @if $theme-name == dark
-                        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
-
-        .select-active
-            .selected-item
-                background-color: map.get($theme-map, "primary")
-
-                span
-                    color: white
-
-                svg
-                    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
-
-            .select-options
-                display: block
-
         /* Buttons */
 
         .button

src/sass/components/selectbox.sass

@@ -0,0 +1,132 @@
+@use "sass:map"
+
+@mixin themable($theme-name, $theme-map)
+    body[theme=#{$theme-name}]
+        .select
+            display: inline-flex
+            align-items: center
+
+            font-size: larger
+
+            width: calc(100% - 24px)
+            height: 48px
+            padding: 0 12px
+
+            border-radius: 12px
+
+            .select-options
+                position: absolute
+                display: none
+
+                max-height: 230px
+                overflow: auto
+
+                background-color: map.get($theme-map, "select-boxes")
+                border-radius: 12px
+
+                box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2)
+
+                padding: 8px 12px
+                transform: translateY(calc(50% + 32px))
+
+                right: 32px
+
+                cursor: pointer
+
+                z-index: 1
+
+                @if $theme-name == dark
+                    &::-webkit-scrollbar-track
+                        background-color: map.get($theme-map, "background2")
+
+                    &::-webkit-scrollbar-thumb
+                        background: #d8dee9
+
+                        &:hover
+                            background: #e5e9f0
+
+                ul
+                    list-style: none
+
+                    padding: 0
+                    margin: 0
+
+                    li
+                        color: #8592a3
+                        font-size: smaller
+
+                        border-radius: 8px
+                        
+                        min-width: 120px
+                        padding: 8px 12px
+                        
+                        // margin-right: 8px
+
+                        &:hover:not([disabled])
+                            background-color: map.get($theme-map, "background2")
+                            color: map.get($theme-map, "primary")
+
+                        &[disabled]
+                            display: block
+                            color: #b2c0d3
+                            cursor: default
+
+                    li:not(:last-child)
+                        margin-bottom: 4px
+
+                    li.selected
+                        background-color: map.get($theme-map, "background2")
+                        color: map.get($theme-map, "primary")
+
+            .selected-item
+                display: flex
+                align-items: baseline
+
+                font-size: initial
+
+                background-color: map.get($theme-map, "background2")
+
+                border-radius: 16px
+                margin-left: auto
+                padding: 8px 16px
+
+                cursor: pointer
+
+                &:hover
+                    background-color: map.get($theme-map, "primary")
+
+                    span
+                        color: white
+
+                    img
+                        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
+
+                img
+                    height: 12px
+                    width: 12px
+
+                    margin-left: 8px
+
+                    transform: rotate(90deg)
+
+                    @if $theme-name == dark
+                        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
+
+        .select-active
+            .selected-item
+                background-color: map.get($theme-map, "primary")
+
+                span
+                    color: white
+
+                img
+                    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
+
+            .select-options
+                display: block
+
+@import "../themes/light"
+@import "../themes/dark"
+
+@include themable(light, $light)
+@include themable(dark, $dark)

src/ts/core/Locales.ts

@@ -4,8 +4,8 @@ import constants from '../Constants';
 import promisify from './promisify';
 
 type AvailableLocales =
-    | 'en'
+    | 'en-us'
-    | 'ru';
+    | 'ru-ru';
 
 declare const Neutralino;