vuefilemanager/resources/js/components/Others/CreateFolderPopup.vue

<template>
    <PopupWrapper name="create-folder">

        <!--Title-->
        <PopupHeader :title="$t('popup_create_folder.title')" icon="edit" />

        <!--Content-->
        <PopupContent>

            <!--Form to set sharing-->
            <ValidationObserver @submit.prevent="createFolder" ref="createForm" v-slot="{ invalid }" tag="form">

                <!--Set folder name-->
                <ValidationProvider tag="div" mode="passive" name="Title" rules="required" v-slot="{ errors }">
					<AppInputText :title="$t('popup_create_folder.label')" :error="errors[0]">
    	                <input v-model="name" :class="{'border-red': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('popup_create_folder.placeholder')">
					</AppInputText>
                </ValidationProvider>

				<AppInputSwitch :title="$t('Emoji as an Icon')" :description="$t('Replace folder icon with an Emoji')" :is-last="! isEmoji">
					<SwitchInput v-model="isEmoji" :state="isEmoji" />
				</AppInputSwitch>

				<!--Set emoji-->
				<EmojiPicker v-if="isEmoji" v-model="emoji" :default-emoji="emoji"/>
            </ValidationObserver>
        </PopupContent>

        <!--Actions-->
        <PopupActions>
            <ButtonBase
                    class="w-full"
                    @click.native="$closePopup()"
                    button-style="secondary"
            >{{ $t('popup_move_item.cancel') }}
            </ButtonBase>
            <ButtonBase
                    class="w-full"
                    @click.native="createFolder"
                    button-style="theme"
            >{{ $t('popup_create_folder.title') }}
            </ButtonBase>
        </PopupActions>
    </PopupWrapper>
</template>

<script>
    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
    import PopupWrapper from "./Popup/PopupWrapper";
    import PopupActions from "./Popup/PopupActions";
    import PopupContent from "./Popup/PopupContent";
    import PopupHeader from "./Popup/PopupHeader";
    import ThumbnailItem from "./ThumbnailItem";
    import ButtonBase from "../FilesView/ButtonBase";
    import {required} from 'vee-validate/dist/rules'
	import AppInputSwitch from "../Admin/AppInputSwitch"
	import AppInputText from "../Admin/AppInputText"
	import SwitchInput from "./Forms/SwitchInput"
    import {events} from '../../bus'
	import EmojiPicker from "./EmojiPicker"

    export default {
        name: 'CreateFolderPopup',
        components: {
			AppInputSwitch,
			SwitchInput,
			EmojiPicker,
			AppInputText,
            ValidationProvider,
            ValidationObserver,
            ThumbnailItem,
            PopupWrapper,
            PopupActions,
            PopupContent,
            PopupHeader,
            ButtonBase,
            required,
        },
        data() {
            return {
                name: undefined,
				isEmoji: false,
				emoji: undefined,
            }
        },
        methods: {
            async createFolder() {

                // Validate fields
                const isValid = await this.$refs.createForm.validate();

				if (!isValid) return;

				await this.$store.dispatch('createFolder', {
					name: this.name,
					emoji: this.emoji
				})

				this.$closePopup()

				this.name = undefined
				this.isEmoji = false
				this.emoji = undefined
            },
        },
        mounted() {
            events.$on('popup:open', ({name}) => {

                if (name === 'create-folder' && ! this.$isMobile())
                    this.$nextTick(() => this.$refs.input.focus())
            })
        }
    }
</script>