mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
popups form refactoring
This commit is contained in:
Čarodej
@@ -8,7 +8,7 @@
|
||||
</label>
|
||||
|
||||
<!--Input Description-->
|
||||
<span v-if="description" class="text-xs text-gray-500 leading-3" v-html="description"></span>
|
||||
<span v-if="description" class="text-xs text-gray-500 leading-3 -mt-0.5 block" v-html="description"></span>
|
||||
|
||||
<!--Input Description-->
|
||||
<span v-if="error" class="error-message">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div :class="{'mb-7': !isLast}">
|
||||
|
||||
<!--Label for input-->
|
||||
<label class="text-sm font-bold text-gray-700 mb-1.5 block">
|
||||
<label v-if="title" class="text-sm font-bold text-gray-700 mb-1.5 block">
|
||||
{{ title }}:
|
||||
</label>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<slot></slot>
|
||||
|
||||
<!--Input Description-->
|
||||
<small v-if="description" class="text-xs text-gray-500 leading-normal" v-html="description"></small>
|
||||
<small v-if="description" class="text-xs text-gray-500 leading-normal -mt-0.5 block" v-html="description"></small>
|
||||
|
||||
<!--Input Description-->
|
||||
<span v-if="error" class="text-red-700 pt-2 text-xs">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div @click="$openSpotlight" class="relative dark:bg-dark-foreground bg-light-background rounded-lg cursor-pointer">
|
||||
<div class="flex justify-between items-center px-5 py-2.5 xl:w-72 w-52 text-left">
|
||||
<div class="flex justify-between items-center px-5 py-2.5 xl:w-72 w-56 text-left">
|
||||
<div class="flex items-center">
|
||||
<search-icon size="18" class="vue-feather dark:text-gray-600 text-gray-400" />
|
||||
<span class="font-bold xl:text-sm text-xs dark:text-gray-600 text-gray-400 pl-2.5">
|
||||
|
||||
@@ -8,13 +8,13 @@
|
||||
<PopupContent>
|
||||
|
||||
<!--Form to set sharing-->
|
||||
<ValidationObserver @submit.prevent="createFolder" ref="createForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
|
||||
<ValidationObserver @submit.prevent="createFolder" ref="createForm" v-slot="{ invalid }" tag="form" class="px-4">
|
||||
|
||||
<!--Set folder name-->
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Title" rules="required" v-slot="{ errors }">
|
||||
<label class="input-label">{{ $t('popup_create_folder.label') }}:</label>
|
||||
<input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" :placeholder="$t('popup_create_folder.placeholder')">
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
<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="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('popup_create_folder.placeholder')">
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<SetFolderIcon v-if="isMoreOptions"/>
|
||||
@@ -42,6 +42,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../Admin/AppInputText";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
|
||||
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
|
||||
@@ -57,6 +58,7 @@
|
||||
export default {
|
||||
name: 'CreateFolderPopup',
|
||||
components: {
|
||||
AppInputText,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
ThumbnailItem,
|
||||
@@ -116,12 +118,3 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "resources/sass/vuefilemanager/_inapp-forms.scss";
|
||||
@import '/resources/sass/vuefilemanager/_forms';
|
||||
|
||||
.item-thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="inline-wrapper icon-append copy-input" :class="size">
|
||||
<input ref="sel" :value="item.data.relationships.shared.data.attributes.link" id="link-input" type="text" class="input-text" readonly>
|
||||
<input ref="sel" :value="item.data.relationships.shared.data.attributes.link" id="link-input" type="text" class="input-text input-dark" readonly>
|
||||
<div class="multi-icon">
|
||||
<div @click="copyUrl" class="icon-item group hover-bg-theme-100">
|
||||
<link-icon v-if="! isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
|
||||
@@ -181,7 +181,7 @@ export default {
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
padding: 9px 10px;
|
||||
padding: 12px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-left: 1px solid $light_mode_border_darken;
|
||||
|
||||
@@ -13,15 +13,15 @@
|
||||
<ValidationObserver @submit.prevent="changeName" ref="renameForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
|
||||
|
||||
<!--Set password-->
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Name" rules="required" v-slot="{ errors }">
|
||||
<label class="input-label">{{ $t('popup_rename.label') }}:</label>
|
||||
<div class="input">
|
||||
<input v-model="pickedItem.data.attributes.name" :class="{'is-error': errors[0]}" ref="input" type="text" class="focus-border-theme" :placeholder="$t('popup_rename.placeholder')">
|
||||
<div @click="pickedItem.data.attributes.name = ''" class="close-icon-wrapper">
|
||||
<x-icon class="close-icon hover-text-theme" size="14" />
|
||||
</div>
|
||||
</div>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
<ValidationProvider tag="div" mode="passive" name="Name" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('popup_rename.label')" :error="errors[0]">
|
||||
<div class="flex items-center relative">
|
||||
<input v-model="pickedItem.data.attributes.name" :class="{'is-error': errors[0]}" ref="input" type="text" class="focus-border-theme input-dark" :placeholder="$t('popup_rename.placeholder')">
|
||||
<div @click="pickedItem.data.attributes.name = ''" class="absolute right-4">
|
||||
<x-icon class="close-icon hover-text-theme" size="14" />
|
||||
</div>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem" />
|
||||
@@ -45,6 +45,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../Admin/AppInputText";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
|
||||
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
|
||||
@@ -63,6 +64,7 @@ export default {
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputText,
|
||||
SetFolderIcon,
|
||||
ThumbnailItem,
|
||||
ActionButton,
|
||||
|
||||
@@ -10,78 +10,58 @@
|
||||
<ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata" />
|
||||
|
||||
<!--Form to set sharing-->
|
||||
<ValidationObserver v-if="! isGeneratedShared" @submit.prevent ref="shareForm" v-slot="{ invalid }" tag="form" class="form block-form form-wrapper">
|
||||
<ValidationObserver v-if="! isGeneratedShared" @submit.prevent ref="shareForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
|
||||
|
||||
<!--Permission Select-->
|
||||
<ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
|
||||
<label class="input-label">{{ $t('shared_form.label_permission') }}:</label>
|
||||
<SelectInput v-model="shareOptions.permission" :options="$translateSelectOptions(permissionOptions)" :placeholder="$t('shared_form.placeholder_permission')" :isError="errors[0]" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider v-if="isFolder" tag="div" mode="passive" name="Permission" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('shared_form.label_permission')" :error="errors[0]">
|
||||
<SelectInput v-model="shareOptions.permission" :options="$translateSelectOptions(permissionOptions)" :placeholder="$t('shared_form.placeholder_permission')" :isError="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--Password Switch-->
|
||||
<div class="switch-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">{{ $t('shared_form.label_password_protection') }}:</label>
|
||||
<small class="input-help">{{ $t('popup.share.password_description') }}</small>
|
||||
</div>
|
||||
<SwitchInput v-model="shareOptions.isPassword" class="switch" :state="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<AppInputSwitch :title="$t('shared_form.label_password_protection')" :description="$t('popup.share.password_description')">
|
||||
<SwitchInput v-model="shareOptions.isPassword" class="switch" :state="0" />
|
||||
</AppInputSwitch>
|
||||
|
||||
<!--Set password-->
|
||||
<ValidationProvider v-if="shareOptions.isPassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
|
||||
<input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
<ValidationProvider v-if="shareOptions.isPassword" tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :error="errors[0]" class="-mt-2">
|
||||
<input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')">
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--Expiration switch-->
|
||||
<div class="switch-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">{{ $t('expiration') }}:</label>
|
||||
<small class="input-help">{{ $t('popup.share.expiration_description') }}</small>
|
||||
</div>
|
||||
<SwitchInput v-model="isExpiration" class="switch" :state="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<AppInputSwitch :title="$t('expiration')" :description="$t('popup.share.expiration_description')">
|
||||
<SwitchInput v-model="isExpiration" class="switch" :state="0" />
|
||||
</AppInputSwitch>
|
||||
|
||||
<!--Set expiration-->
|
||||
<div v-if="isExpiration" class="input-wrapper">
|
||||
<AppInputText v-if="isExpiration" class="-mt-2">
|
||||
<SelectBoxInput v-model="shareOptions.expiration" :data="$translateSelectOptions(expirationList)" class="box" />
|
||||
</div>
|
||||
</AppInputText>
|
||||
</div>
|
||||
|
||||
<!--Send on emails switch-->
|
||||
<div class="switch-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">{{ $t('popup.share.email_send') }}:</label>
|
||||
<small class="input-help">{{ $t('popup.share.email_description') }}</small>
|
||||
</div>
|
||||
<SwitchInput v-model="isEmailSharing" class="switch" :state="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<AppInputSwitch :title="$t('popup.share.email_send')" :description="$t('popup.share.email_description')">
|
||||
<SwitchInput v-model="isEmailSharing" class="switch" :state="0" />
|
||||
</AppInputSwitch>
|
||||
|
||||
<!--Set expiration-->
|
||||
<ValidationProvider v-if="isEmailSharing" class="input-wrapper" tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
|
||||
<ValidationProvider v-if="isEmailSharing" tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }" class="-mt-2">
|
||||
<MultiEmailInput rules="required" v-model="shareOptions.emails" :label="$t('shared_form.recipients_label')" :isError="errors[0]" />
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
|
||||
<!--Copy generated link-->
|
||||
<div v-if="isGeneratedShared" class="form-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<label class="input-label">{{ $t('shared_form.label_share_vie_email') }}:</label>
|
||||
<CopyShareLink size="small" :item="pickedItem" />
|
||||
</div>
|
||||
</div>
|
||||
<AppInputText v-if="isGeneratedShared" :title="$t('shared_form.label_share_vie_email')" class="px-6" :is-last="true">
|
||||
<CopyShareLink size="small" :item="pickedItem" />
|
||||
</AppInputText>
|
||||
</PopupContent>
|
||||
|
||||
<!--Actions-->
|
||||
@@ -97,6 +77,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../Admin/AppInputText";
|
||||
import AppInputSwitch from "../Admin/AppInputSwitch";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import SelectBoxInput from '/resources/js/components/Others/Forms/SelectBoxInput'
|
||||
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
|
||||
@@ -124,6 +106,8 @@ export default {
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputText,
|
||||
AppInputSwitch,
|
||||
SelectBoxInput,
|
||||
ThumbnailItem,
|
||||
ActionButton,
|
||||
|
||||
@@ -18,63 +18,52 @@
|
||||
<!--Share via email-->
|
||||
<ValidationObserver @submit.prevent v-if="sendToRecipientsMenu && !isEmailSended" v-slot="{ invalid }" ref="shareEmail" tag="form" class="form-wrapper">
|
||||
<ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
|
||||
<MultiEmailInput rules="required" v-model="emails" :label="$t('shared_form.label_send_to_recipients')" :isError="errors[0]" />
|
||||
<AppInputText :error="errors[0]">
|
||||
<MultiEmailInput rules="required" v-model="emails" :label="$t('shared_form.label_send_to_recipients')" :isError="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
|
||||
<!--Form to set sharing-->
|
||||
<ValidationObserver @submit.prevent v-if="! sendToRecipientsMenu" ref="shareForm" v-slot="{ invalid }" tag="form" class="form block-form form-wrapper">
|
||||
<ValidationObserver @submit.prevent v-if="! sendToRecipientsMenu" ref="shareForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
|
||||
|
||||
<!--Permission Select-->
|
||||
<ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
|
||||
<label class="input-label">{{ $t('shared_form.label_permission') }}:</label>
|
||||
<SelectInput v-model="shareOptions.permission" :options="$translateSelectOptions(permissionOptions)" :default="shareOptions.permission" :placeholder="$t('shared_form.placeholder_permission')" :isError="errors[0]"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider v-if="isFolder" tag="div" mode="passive" name="Permission" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('shared_form.label_permission')" :error="errors[0]">
|
||||
<SelectInput v-model="shareOptions.permission" :options="$translateSelectOptions(permissionOptions)" :default="shareOptions.permission" :placeholder="$t('shared_form.placeholder_permission')" :isError="errors[0]"/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--Password Switch-->
|
||||
<div class="switch-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">{{ $t('shared_form.label_password_protection') }}:</label>
|
||||
<small class="input-help">{{ $t('popup.share.password_description') }}</small>
|
||||
</div>
|
||||
<SwitchInput v-model="shareOptions.isProtected" class="switch" :state="shareOptions.isProtected" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<AppInputSwitch :title="$t('shared_form.label_password_protection')" :description="$t('popup.share.password_description')">
|
||||
<SwitchInput v-model="shareOptions.isProtected" class="switch" :state="shareOptions.isProtected" />
|
||||
</AppInputSwitch>
|
||||
|
||||
<ActionButton v-if="(pickedItem.data.relationships.shared.data.attributes.protected && canChangePassword) && shareOptions.isProtected" @click.native="changePassword" class="change-password">
|
||||
<ActionButton v-if="(pickedItem.data.relationships.shared.data.attributes.protected && canChangePassword) && shareOptions.isProtected" @click.native="changePassword" class="mb-6 -mt-4">
|
||||
{{ $t('popup_share_edit.change_pass') }}
|
||||
</ActionButton>
|
||||
|
||||
<!--Set password-->
|
||||
<ValidationProvider v-if="shareOptions.isProtected && ! canChangePassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
|
||||
<input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
<ValidationProvider v-if="shareOptions.isProtected && ! canChangePassword" tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :error="errors[0]" class="-mt-2">
|
||||
<input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')">
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--Expiration switch-->
|
||||
<div class="switch-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">{{ $t('expiration') }}:</label>
|
||||
<small class="input-help">{{ $t('popup.share.expiration_description') }}</small>
|
||||
</div>
|
||||
<SwitchInput v-model="shareOptions.expiration" class="switch" :state="shareOptions.expiration ? 1 : 0" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<AppInputSwitch :title="$t('expiration')" :description="$t('popup.share.expiration_description')">
|
||||
<SwitchInput v-model="shareOptions.expiration" class="switch" :state="shareOptions.expiration ? 1 : 0" />
|
||||
</AppInputSwitch>
|
||||
|
||||
<!--Set expiration-->
|
||||
<div v-if="shareOptions.expiration" class="input-wrapper">
|
||||
<SelectBoxInput v-model="shareOptions.expiration" :data="$translateSelectOptions(expirationList)" :value="shareOptions.expiration" class="box" />
|
||||
</div>
|
||||
<AppInputText v-if="shareOptions.expiration" class="-mt-2" :is-last="true">
|
||||
<SelectBoxInput v-model="shareOptions.expiration" :data="$translateSelectOptions(expirationList)" :value="shareOptions.expiration" class="box" />
|
||||
</AppInputText>
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
|
||||
</PopupContent>
|
||||
|
||||
<!--Actions-->
|
||||
@@ -100,6 +89,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../Admin/AppInputText";
|
||||
import AppInputSwitch from "../Admin/AppInputSwitch";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import SelectBoxInput from '/resources/js/components/Others/Forms/SelectBoxInput'
|
||||
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
|
||||
@@ -122,6 +113,8 @@
|
||||
export default {
|
||||
name: 'ShareEditPopup',
|
||||
components: {
|
||||
AppInputText,
|
||||
AppInputSwitch,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SelectBoxInput,
|
||||
|
||||
@@ -14,27 +14,26 @@
|
||||
<ValidationObserver @submit.prevent="createTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
|
||||
|
||||
<!--Set folder name-->
|
||||
<ValidationProvider v-if="isNewFolderTeamCreation" tag="div" mode="passive" class="input-wrapper password" name="Name" rules="required" v-slot="{ errors }">
|
||||
<label class="input-label">{{ $t('popup_create_folder.label') }}:</label>
|
||||
<input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="name" class="focus-border-theme" :placeholder="$t('popup_create_folder.placeholder')">
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
<ValidationProvider v-if="isNewFolderTeamCreation" tag="div" mode="passive" name="Name" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('popup_create_folder.label')" :error="errors[0]">
|
||||
<input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="name" class="focus-border-theme input-dark" :placeholder="$t('popup_create_folder.placeholder')">
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--Add Member-->
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Email" v-slot="{ errors }">
|
||||
<label class="input-label">{{ $t('Add Member') }}:</label>
|
||||
|
||||
<div class="relative">
|
||||
<span
|
||||
v-if="email"
|
||||
@click="addMember"
|
||||
class="button-base theme absolute right-2 px-3 py-2 font-bold text-sm rounded-lg top-1/2 transform -translate-y-1/2 cursor-pointer"
|
||||
>
|
||||
Add
|
||||
</span>
|
||||
<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme" :placeholder="$t('Type member email...')">
|
||||
</div>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
<ValidationProvider tag="div" mode="passive" name="Email" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('Add Member')" :error="errors[0]">
|
||||
<div class="relative">
|
||||
<span
|
||||
v-if="email"
|
||||
@click="addMember"
|
||||
class="button-base theme absolute right-2 px-3 py-2 font-bold text-sm rounded-lg top-1/2 transform -translate-y-1/2 cursor-pointer"
|
||||
>
|
||||
Add
|
||||
</span>
|
||||
<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme input-dark" :placeholder="$t('Type member email...')">
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--Member list-->
|
||||
@@ -79,6 +78,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../Admin/AppInputText";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
|
||||
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
|
||||
@@ -97,6 +97,7 @@
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputText,
|
||||
TeamList,
|
||||
ThumbnailItem,
|
||||
PopupWrapper,
|
||||
|
||||
@@ -14,22 +14,21 @@
|
||||
<ValidationObserver @submit.prevent="updateTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
|
||||
|
||||
<!--Add Member-->
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Email" v-slot="{ errors }">
|
||||
<label class="input-label">{{ $t('Add Member') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" name="Email" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('Add Member')" :error="errors[0]">
|
||||
<div class="relative">
|
||||
<span
|
||||
v-if="email"
|
||||
@click="addMember"
|
||||
class="button-base theme absolute right-2 px-3 py-2 font-bold text-sm rounded-lg top-1/2 transform -translate-y-1/2 cursor-pointer"
|
||||
>
|
||||
Add
|
||||
</span>
|
||||
|
||||
<div class="relative">
|
||||
<span
|
||||
v-if="email"
|
||||
@click="addMember"
|
||||
class="button-base theme absolute right-2 px-3 py-2 font-bold text-sm rounded-lg top-1/2 transform -translate-y-1/2 cursor-pointer"
|
||||
>
|
||||
Add
|
||||
</span>
|
||||
|
||||
<!--TODO: Fix !pr-20 after JIT official release-->
|
||||
<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme !pr-20" :placeholder="$t('Type member email...')">
|
||||
</div>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
<!--TODO: Fix !pr-20 after JIT official release-->
|
||||
<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme !pr-20 input-dark" :placeholder="$t('Type member email...')">
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--Member list-->
|
||||
@@ -68,6 +67,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../Admin/AppInputText";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
|
||||
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
|
||||
@@ -86,6 +86,7 @@
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputText,
|
||||
TeamList,
|
||||
ThumbnailItem,
|
||||
PopupWrapper,
|
||||
|
||||
Reference in New Issue
Block a user