maked separated ColorPicker component

public/mix-manifest.json

@@ -75,34 +75,16 @@
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=5cfec8a8f8a8aef24ef2",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=c001bef2d6d5171cb359",
     "/chunks/users.js": "/chunks/users.js?id=6e68cb068f69fba3199c",
-    "/js/main.fec7012ae1f34893589d.hot-update.js": "/js/main.fec7012ae1f34893589d.hot-update.js",
-    "/js/main.2ee91a6dae14a1cadc9b.hot-update.js": "/js/main.2ee91a6dae14a1cadc9b.hot-update.js",
-    "/js/main.9eae7983f12897789247.hot-update.js": "/js/main.9eae7983f12897789247.hot-update.js",
-    "/js/main.2d64c86de0df943928b2.hot-update.js": "/js/main.2d64c86de0df943928b2.hot-update.js",
-    "/js/main.810cff99631b1efd948d.hot-update.js": "/js/main.810cff99631b1efd948d.hot-update.js",
-    "/js/main.e600f466db5401999c97.hot-update.js": "/js/main.e600f466db5401999c97.hot-update.js",
-    "/js/main.2366d38febb62b9adb88.hot-update.js": "/js/main.2366d38febb62b9adb88.hot-update.js",
-    "/js/main.e0881260a9842557986a.hot-update.js": "/js/main.e0881260a9842557986a.hot-update.js",
-    "/js/main.3d08984a88c66c048927.hot-update.js": "/js/main.3d08984a88c66c048927.hot-update.js",
-    "/js/main.8e3c4561e7e37ae6a6c1.hot-update.js": "/js/main.8e3c4561e7e37ae6a6c1.hot-update.js",
-    "/js/main.67f4fde7abcafd6d46c5.hot-update.js": "/js/main.67f4fde7abcafd6d46c5.hot-update.js",
-    "/js/main.744dab728ca297b5c462.hot-update.js": "/js/main.744dab728ca297b5c462.hot-update.js",
-    "/js/main.7d48fe14fdbe694bee34.hot-update.js": "/js/main.7d48fe14fdbe694bee34.hot-update.js",
-    "/js/main.7ec9c64cc2b9c20d5365.hot-update.js": "/js/main.7ec9c64cc2b9c20d5365.hot-update.js",
-    "/js/main.cce692fa367da3518f20.hot-update.js": "/js/main.cce692fa367da3518f20.hot-update.js",
-    "/js/main.40ba52ba134116d832b1.hot-update.js": "/js/main.40ba52ba134116d832b1.hot-update.js",
-    "/js/main.62dfdf2da6591cb17225.hot-update.js": "/js/main.62dfdf2da6591cb17225.hot-update.js",
-    "/js/main.946ae0aec96e272e7a9a.hot-update.js": "/js/main.946ae0aec96e272e7a9a.hot-update.js",
-    "/js/main.49bb07b2e7950c7b10d2.hot-update.js": "/js/main.49bb07b2e7950c7b10d2.hot-update.js",
-    "/js/main.bb3f47712b180dc5faef.hot-update.js": "/js/main.bb3f47712b180dc5faef.hot-update.js",
-    "/js/main.8d39b3a6f8e4002b8796.hot-update.js": "/js/main.8d39b3a6f8e4002b8796.hot-update.js",
-    "/js/main.f9998fbbf511469ba9be.hot-update.js": "/js/main.f9998fbbf511469ba9be.hot-update.js",
-    "/js/main.a6d99609236f7fad62dc.hot-update.js": "/js/main.a6d99609236f7fad62dc.hot-update.js",
-    "/js/main.b7b1ab3b35c30738be1c.hot-update.js": "/js/main.b7b1ab3b35c30738be1c.hot-update.js",
-    "/js/main.4454030fcb222eadbbf7.hot-update.js": "/js/main.4454030fcb222eadbbf7.hot-update.js",
-    "/js/main.98be4f9f79ead6a88087.hot-update.js": "/js/main.98be4f9f79ead6a88087.hot-update.js",
-    "/js/main.03760e0d6f650b4ab3c2.hot-update.js": "/js/main.03760e0d6f650b4ab3c2.hot-update.js",
-    "/js/main.259e21addde39ee619b6.hot-update.js": "/js/main.259e21addde39ee619b6.hot-update.js",
-    "/js/main.e436af8370789152a668.hot-update.js": "/js/main.e436af8370789152a668.hot-update.js",
-    "/js/main.05eb0aab71d0fb3b6b09.hot-update.js": "/js/main.05eb0aab71d0fb3b6b09.hot-update.js"
+    "/js/main.f4dc288436914629fafd.hot-update.js": "/js/main.f4dc288436914629fafd.hot-update.js",
+    "/js/main.bd2090f4ef672caecf2e.hot-update.js": "/js/main.bd2090f4ef672caecf2e.hot-update.js",
+    "/js/main.008b0db192aeb3c22084.hot-update.js": "/js/main.008b0db192aeb3c22084.hot-update.js",
+    "/js/main.4a52cce25e297b4d0c6b.hot-update.js": "/js/main.4a52cce25e297b4d0c6b.hot-update.js",
+    "/js/main.6579cc274c986e1c4d9d.hot-update.js": "/js/main.6579cc274c986e1c4d9d.hot-update.js",
+    "/js/main.270fa6b54a1d256881a7.hot-update.js": "/js/main.270fa6b54a1d256881a7.hot-update.js",
+    "/js/main.1119332dbe1f0e94c697.hot-update.js": "/js/main.1119332dbe1f0e94c697.hot-update.js",
+    "/js/main.81c3b781acb1f687d3e8.hot-update.js": "/js/main.81c3b781acb1f687d3e8.hot-update.js",
+    "/js/main.fd3f39d3778dbc1a924b.hot-update.js": "/js/main.fd3f39d3778dbc1a924b.hot-update.js",
+    "/js/main.4304b0309e0e5d90af4c.hot-update.js": "/js/main.4304b0309e0e5d90af4c.hot-update.js",
+    "/js/main.7455806185c9030a60d6.hot-update.js": "/js/main.7455806185c9030a60d6.hot-update.js",
+    "/js/main.f80aa16e9ad85008bee4.hot-update.js": "/js/main.f80aa16e9ad85008bee4.hot-update.js"
 }

resources/js/components/Others/ColorPicker.vue

@@ -0,0 +1,128 @@
+<template>
+   <div class="color-pick-wrapper">
+        <label class="main-label">{{ $t('popup_rename.color_pick_label') }}:</label>
+        <ul class="color-wrapper">
+            <li v-for="(color, i) in colors" :key="i" @click="setColor( color )" class="single-color">
+                <check-icon v-if="color === selectedColor" class="color-icon" size="22"/>
+                <span :style="{background:color}" class="color-box"></span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import { CheckIcon } from 'vue-feather-icons'
+
+export default {
+    name: 'ColorPicker',
+    props: [ 'pickedColor' ],
+    components: { CheckIcon },
+    data () {
+        return {
+            selectedColor: this.pickedColor,
+            colors: [
+                '#41B883',
+                '#FE6F6F',
+                '#FE6F91',
+                '#FE6FC0',
+                '#FE6FF0',
+                '#DD6FFE',
+                '#AD6FFE',
+                '#7D6FFE',
+                '#6F90FE',
+                '#6FC0FE',
+                '#6FF0FE',
+                '#6FFEDD',
+                '#6FFEAD',
+                '#6FFE7D',
+                '#90FE6F',
+                '#C0FE6F',
+                '#F0FE6F',
+                '#FEDD6F',
+                '#FEAD6F',
+                '#FE7D6F',
+                '#4c4c4c',
+                '#06070B',
+            ]
+        }
+    },
+    methods: {
+        setColor (value) {
+
+            this.selectedColor = value
+
+            this.$emit('input', value)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/vue-file-manager/_inapp-forms.scss";
+@import '@assets/vue-file-manager/_forms';
+
+.color-pick-wrapper {
+    .color-wrapper {
+        margin-bottom: 20px;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 32px);
+        justify-content: space-between;
+        gap: 7px;
+
+        .single-color {
+            height: 31px;
+            list-style: none;
+            border-radius: 8px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .color-icon {
+                z-index: 2;
+
+                polyline {
+                    stroke: white;
+                }
+            }
+
+            .color-box {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                display: block;
+            }
+        }
+    }
+}
+
+.main-label {
+    @include font-size(14);
+    font-weight: 700;
+    margin-bottom: 8px;
+    display: block;
+}
+
+.set-folder-icon {
+    position: relative;
+}
+
+@media (prefers-color-scheme: dark) {
+    .color-pick-wrapper {
+        .color-wrapper {
+            .single-color {
+                &.active-color {
+                    border: 2px solid;
+                }
+
+                &:hover {
+                    border: 2px solid $dark_mode_text_primary;
+                }
+            }
+        }
+    }
+}
+
+</style>

resources/js/components/Others/EmojiPicker.vue

@@ -3,10 +3,10 @@
         <label class="main-label">{{ $t('popup_rename.select_emoji_label') }}:</label>
 
         <!-- Selected Emoji input -->
-        <div @click.stop="openMenu" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
+        <div @click.stop="openList" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
 
             <!-- If is emoji selected -->
-            <div class="select-input" v-if="selectedEmoji">
+            <div class="select-input" v-if="selectedEmoji && selectedEmoji !== 'default'">
                 <div @click.stop="resetEmoji" class="select-input-icon-wrapper">
                     <x-icon size="14" class="select-input-icon"/>
                 </div>
@@ -15,7 +15,7 @@
             </div>
 
             <!-- If is emoji not selected -->
-            <div class="not-selected" v-if="! selectedEmoji">
+            <div class="not-selected" v-if="! selectedEmoji || selectedEmoji === 'default'">
                 <span> {{ $t('popup_rename.set_emoji_input_placeholder') }}</span>
             </div>
 
@@ -45,10 +45,10 @@
 
                     <!-- All Emojis -->
                     <div v-show="searchInput.length < 1" @scroll="checkGroupInView" id="group-box" class="group-wrapper">
-                        <div v-for="(group, name) in allEmoji" :key="name" class="options-wrapper" :id="`group-${name}`">
+                        <div v-for="(group, name) in allEmoji()" :key="name" class="options-wrapper" :id="`group-${name}`">
                             <label class="group-name-label">{{ name }}</label>
                             <ul class="options-list">
-                                <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i" class="option">
+                                <li @click="setEmoji( emoji )" v-for="(emoji,i) in group" :key="i" class="option">
                                     <Emoji :emoji="emoji" location="emoji-picker" />
                                 </li>
                             </ul>
@@ -59,7 +59,7 @@
                     <div v-if="searchInput.length > 0" class="group-wrapper">
                         <div class="options-wrapper">
                             <ul class="options-list">
-                                <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option">
+                                <li @click="setEmoji( emoji )" v-for="(emoji,i) in filteredEmojis" :key="i" class="option">
                                     <Emoji :emoji="emoji" location="emoji-picker" />
                                 </li>
                             </ul>
@@ -93,9 +93,6 @@ export default {
     },
     computed: {
         ...mapGetters([ 'emojis' ]),
-        allEmoji() {
-            return groupBy(this.emojis.emojisList, 'group')
-        }
     },
     data () {
         return {
@@ -109,6 +106,9 @@ export default {
         }
     },
     methods: {
+        allEmoji() {
+            return groupBy(this.emojis.emojisList, 'group')
+        },
         checkGroupInView: _.debounce( function() {
 
             this.emojis.emojisGroups.forEach(group => {
@@ -149,7 +149,7 @@ export default {
             this.filteredEmojisLoaded = true
 
         }, 800),
-        openMenu() {
+        openList() {
 
             this.loadedList = false
 
@@ -173,12 +173,12 @@ export default {
 
             this.groupInView = 'Smileys & Emotion'
         },
-        setIcon(value) {
+        setEmoji(value) {
 
             // Set emoji
-            this.selectedEmoji = value.emoji
+            this.selectedEmoji = value
 
-            events.$emit('setFolderIcon', { 'value': value })
+            this.$emit('input', value)
 
             this.selectOpen = false
         },
@@ -186,7 +186,7 @@ export default {
 
             this.selectedEmoji = undefined
 
-            events.$emit('setFolderIcon', { 'value': 'default' })
+            this.$emit('input', 'default')
         }
     },
      mounted() {

resources/js/components/Others/SetFolderIcon.vue

@@ -3,27 +3,19 @@
 
         <!-- Emojis Picker -->
         <TabOption :selected="true" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
-            <EmojiPicker :picked-emoji="pickedEmoji"/>
+            <EmojiPicker :picked-emoji="pickedEmoji" v-model="selectedEmoji" />
         </TabOption>
 
         <!-- Colors Picker-->
         <TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
-            <div class="color-pick-wrapper">
-                <label class="main-label">{{ $t('popup_rename.color_pick_label') }}:</label>
-                <ul class="color-wrapper">
-                    <li v-for="(color, i) in colors" :key="i" @click="setIcon({'color': color})" class="single-color">
-                        <check-icon v-if="color === selectedColor" class="color-icon" size="22"/>
-                        <span :style="{background:color}" class="color-box"></span>
-                    </li>
-                </ul>
-            </div>
+            <ColorPicker :picked-color="pickedColor" v-model="selectedColor"/>
         </TabOption>
     </TabWrapper>
 </template>
 
 <script>
-import { CheckIcon } from 'vue-feather-icons'
 import EmojiPicker from '@/components/Others/EmojiPicker'
+import ColorPicker from '@/components/Others/ColorPicker'
 import TabWrapper from '@/components/Others/TabWrapper'
 import TabOption from '@/components/Others/TabOption'
 import { events } from '@/bus'
@@ -33,77 +25,64 @@ export default {
     props: [ 'folderData' ],
     components: {
         EmojiPicker,
+        ColorPicker,
         TabWrapper,
-        CheckIcon,
         TabOption,
     },
     computed: {
         pickedEmoji () {
             // If is color not selected and emoji is selected, push picked emoji to EmojiPicker for the EmojiSelected input
-            return !this.selectedColor && this.selectedEmoji ? this.selectedEmoji : ''
+            return !this.selectedColor && this.selectedEmoji ? this.selectedEmoji : undefined
+        },
+        pickedColor() {
+            // If is emoji not selected and color is selected, push picked color to ColorPicker
+            return !this.selectedEmoji && this.selectedColor ? this.selectedColor : undefined
         }
     },
     data() {
         return {
             selectedColor: undefined,
             selectedEmoji: undefined,
-            colors: [
-                '#41B883',
-                '#FE6F6F',
-                '#FE6F91',
-                '#FE6FC0',
-                '#FE6FF0',
-                '#DD6FFE',
-                '#AD6FFE',
-                '#7D6FFE',
-                '#6F90FE',
-                '#6FC0FE',
-                '#6FF0FE',
-                '#6FFEDD',
-                '#6FFEAD',
-                '#6FFE7D',
-                '#90FE6F',
-                '#C0FE6F',
-                '#F0FE6F',
-                '#FEDD6F',
-                '#FEAD6F',
-                '#FE7D6F',
-                '#4c4c4c',
-                '#06070B',
-            ]
         }
     },
-    methods: {
-        setIcon(value) {
+    watch: {
+        selectedColor () {
 
-            // Set color
-            this.selectedColor = value.color
+            let color = {'color': this.selectedColor}
 
-            this.selectedEmoji = undefined
-            
-            events.$emit('setFolderIcon', { 'value': value })
+            if( this.selectedColor ) {
 
-        }
-    },
-    mounted() {
-
-        // Reset color after set emoji
-        events.$on('setFolderIcon', (icon) => {
-            
-            if(icon.value.emoji) {
-                this.selectedEmoji = icon.value.emoji
-                this.selectedColor = undefined
+                this.selectedEmoji = undefined
+                events.$emit('setFolderIcon', { 'value': color })
             }
+          
+        },
+        selectedEmoji () {
 
-            // If want to set default folder icon from emoji, set selectedEmoji to undefined 
-            icon.value === 'default' ? this.selectedEmoji = undefined : ''
-        })
+            let emoji = { 'emoji': this.selectedEmoji }
+
+            if( this.selectedEmoji ) {
+
+                this.selectedColor = undefined
+                events.$emit('setFolderIcon', { 'value': this.selectedEmoji ==='default' ? 'default' : emoji })
+            }
+        },
+    },
+    created() {
 
         // If folder have already set some color set this color to selected color
         this.folderData.icon_color ? this.selectedColor = this.folderData.icon_color : ''
 
         // If folder have already set some emojit set this emoji to selected emoji
         this.folderData.icon_emoji ? this.selectedEmoji = this.folderData.icon_emoji : ''
+    },
+    destroyed () {
+
+        // After close SetFolderIcon set the saved folder icon for thumbnail
+        let color = {'color': this.folderData.icon_color }
+        let emoji = {'emoji': this.folderData.icon_emoji }
+
+        events.$emit('setFolderIcon', { 'value': this.folderData.icon_emoji ? emoji : color  })
     }
 }
 </script>
@@ -112,67 +91,7 @@ export default {
 @import "@assets/vue-file-manager/_inapp-forms.scss";
 @import '@assets/vue-file-manager/_forms';
 
-.color-pick-wrapper {
-    .color-wrapper {
-        margin-bottom: 20px;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, 32px);
-        justify-content: space-between;
-        gap: 7px;
-
-        .single-color {
-            height: 31px;
-            list-style: none;
-            border-radius: 8px;
-            cursor: pointer;
-            position: relative;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .color-icon {
-                z-index: 2;
-
-                polyline {
-                    stroke: white;
-                }
-            }
-
-            .color-box {
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                display: block;
-            }
-        }
-    }
-}
-
-.main-label {
-    @include font-size(14);
-    font-weight: 700;
-    margin-bottom: 8px;
-    display: block;
-}
-
 .set-folder-icon {
     position: relative;
 }
-
-@media (prefers-color-scheme: dark) {
-    .color-pick-wrapper {
-        .color-wrapper {
-            .single-color {
-                &.active-color {
-                    border: 2px solid;
-                }
-
-                &:hover {
-                    border: 2px solid $dark_mode_text_primary;
-                }
-            }
-        }
-    }
-}
 </style>