code refactor

src/components/mobile/ColorSelectionSheet.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-sheet :opened="show" @sheet:closed="onSheetClosed">
+    <f7-sheet :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="left"></div>
             <div class="right">
@@ -11,12 +11,12 @@
                 <f7-row class="padding-vertical padding-horizontal-half" v-for="(row, idx) in allColorRows" :key="idx">
                     <f7-col class="text-align-center" v-for="colorInfo in row" :key="colorInfo.color">
                         <f7-icon f7="app_fill" :style="{ color: '#' + colorInfo.color }" @click.native="onColorClicked(colorInfo)">
-                            <f7-badge color="default" class="right-bottom-icon" v-if="color && color === colorInfo.color">
+                            <f7-badge color="default" class="right-bottom-icon" v-if="currentValue && currentValue === colorInfo.color">
                                 <f7-icon f7="checkmark_alt"></f7-icon>
                             </f7-badge>
                         </f7-icon>
                     </f7-col>
-                    <f7-col v-for="idx in (columnCount - row.length)" :key="idx"></f7-col>
+                    <f7-col v-for="idx in (itemPerRow - row.length)" :key="idx"></f7-col>
                 </f7-row>
             </f7-block>
         </f7-page-content>
@@ -26,18 +26,26 @@
 <script>
 export default {
     props: [
-        'color',
+        'value',
         'columnCount',
         'show',
         'allColorInfos'
     ],
+    data() {
+        const self = this;
+
+        return {
+            currentValue: self.value,
+            itemPerRow: self.columnCount || 7
+        }
+    },
     computed: {
         allColorRows() {
             const ret = [];
             let rowCount = -1;
 
             for (let i = 0; i < this.allColorInfos.length; i++) {
-                if (i % this.columnCount === 0) {
+                if (i % this.itemPerRow === 0) {
                     ret[++rowCount] = [];
                 }
 
@@ -51,10 +59,14 @@ export default {
     },
     methods: {
         onColorClicked(colorInfo) {
-            this.$emit('color:change', colorInfo.color);
+            this.currentValue = colorInfo.color;
+            this.$emit('input', this.currentValue);
+        },
+        onSheetOpen() {
+            this.currentValue = this.value;
         },
         onSheetClosed() {
-            this.$emit('color:closed');
+            this.$emit('update:show', false);
         }
     }
 }