code refactor

src/components/mobile/ListItemSelectionSheet.vue

@@ -0,0 +1,68 @@
+<template>
+    <f7-sheet :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
+        <f7-toolbar>
+            <div class="left"></div>
+            <div class="right">
+                <f7-link sheet-close :text="$t('Done')"></f7-link>
+            </div>
+        </f7-toolbar>
+        <f7-page-content>
+            <f7-list no-hairlines class="no-margin-top no-margin-bottom">
+                <f7-list-item link="#" no-chevron
+                              v-for="(item, index) in items"
+                              :key="valueType === 'index' ? index : (keyField ? item[keyField] : item)"
+                              :value="valueType === 'index' ? index : (valueField ? item[valueField] : item)"
+                              :title="titleField ? item[titleField] : item"
+                              @click="onItemClicked(item, index)">
+                    <f7-icon slot="after" class="list-item-checked" f7="checkmark_alt" v-if="isSelected(item, index)"></f7-icon>
+                </f7-list-item>
+            </f7-list>
+        </f7-page-content>
+    </f7-sheet>
+</template>
+
+<script>
+export default {
+    props: [
+        'value',
+        'valueType', // item or index
+        'keyField', // for value type = item
+        'valueField',
+        'titleField',
+        'items',
+        'show'
+    ],
+    data() {
+        const self = this;
+
+        return {
+            currentValue: self.value
+        }
+    },
+    methods: {
+        onItemClicked(item, index) {
+            if (this.valueType === 'index') {
+                this.currentValue = index;
+            } else {
+                this.currentValue = item;
+            }
+
+            this.$emit('input', this.currentValue);
+            this.$emit('update:show', false);
+        },
+        onSheetOpen() {
+            this.currentValue = this.value;
+        },
+        onSheetClosed() {
+            this.$emit('update:show', false);
+        },
+        isSelected(item, index) {
+            if (this.valueType === 'index') {
+                return this.currentValue === index;
+            } else {
+                return this.currentValue === item;
+            }
+        }
+    }
+}
+</script>

src/mobile-main.js

@@ -40,6 +40,7 @@ import tokenIconFilter from './filters/tokenIcon.js';
 import PasswordInputSheet from "./components/mobile/PasswordInputSheet.vue";
 import PasscodeInputSheet from "./components/mobile/PasscodeInputSheet.vue";
 import PinCodeInputSheet from "./components/mobile/PinCodeInputSheet.vue";
+import ListItemSelectionSheet from "./components/mobile/ListItemSelectionSheet.vue";
 import IconSelectionSheet from "./components/mobile/IconSelectionSheet.vue";
 import ColorSelectionSheet from "./components/mobile/ColorSelectionSheet.vue";
 import InformationSheet from "./components/mobile/InformationSheet.vue";
@@ -54,6 +55,7 @@ Vue.component('PincodeInput', PincodeInput);
 Vue.component('PasswordInputSheet', PasswordInputSheet);
 Vue.component('PasscodeInputSheet', PasscodeInputSheet);
 Vue.component('PinCodeInputSheet', PinCodeInputSheet);
+Vue.component('ListItemSelectionSheet', ListItemSelectionSheet);
 Vue.component('IconSelectionSheet', IconSelectionSheet);
 Vue.component('ColorSelectionSheet', ColorSelectionSheet);
 Vue.component('InformationSheet', InformationSheet);

src/views/mobile/categories/Default.vue

@@ -52,26 +52,12 @@
             </f7-actions-group>
         </f7-actions>
 
-
-        <f7-sheet :opened="showChangeLocaleSheet" @sheet:closed="showChangeLocaleSheet = false">
-            <f7-toolbar>
-                <div class="left"></div>
-                <div class="right">
-                    <f7-link sheet-close :text="$t('Done')"></f7-link>
-                </div>
-            </f7-toolbar>
-            <f7-page-content>
-                <f7-list no-hairlines class="no-margin-top no-margin-bottom">
-                    <f7-list-item v-for="(lang, locale) in allLanguages"
-                                  :key="locale"
-                                  :value="locale"
-                                  :title="lang.displayName"
-                                  @click="currentLocale = locale; showChangeLocaleSheet = false">
-                        <f7-icon slot="after" class="list-item-checked" f7="checkmark_alt" v-if="currentLocale === locale"></f7-icon>
-                    </f7-list-item>
-                </f7-list>
-            </f7-page-content>
-        </f7-sheet>
+        <ListItemSelectionSheet value-type="index"
+                                title-field="displayName"
+                                :items="allLanguages"
+                                :show.sync="showChangeLocaleSheet"
+                                v-model="currentLocale">
+        </ListItemSelectionSheet>
     </f7-page>
 </template>