mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-05-26 14:34:42 +00:00
pages refactoring
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="mb-7 flex justify-between w-full">
|
||||
<div :class="{'mb-7': !isLast}" class="flex justify-between w-full">
|
||||
|
||||
<!--Label for input-->
|
||||
<div class="leading-5">
|
||||
@@ -28,6 +28,7 @@
|
||||
name: 'AppInputSwitch',
|
||||
props: [
|
||||
'description',
|
||||
'isLast',
|
||||
'title',
|
||||
'error',
|
||||
]
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="mb-7">
|
||||
<div :class="{'mb-7': !isLast}">
|
||||
|
||||
<!--Label for input-->
|
||||
<label class="text-sm font-bold text-gray-700 mb-1.5 block">
|
||||
@@ -24,6 +24,7 @@
|
||||
name: 'AppInputText',
|
||||
props: [
|
||||
'description',
|
||||
'isLast',
|
||||
'title',
|
||||
'error',
|
||||
]
|
||||
|
||||
@@ -9,18 +9,16 @@
|
||||
|
||||
<!--Form to set sharing-->
|
||||
<ValidationObserver @submit.prevent="createLanguage" ref="createForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Language Locale" rules="required" v-slot="{ errors }">
|
||||
<label class="input-label">{{ $t('select_locale') }}:</label>
|
||||
<SelectInput v-model="form.locale" :options="locales" :placeholder="$t('select_language_locale')" :isError="errors[0]" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Language Name" rules="required" v-slot="{ errors }">
|
||||
<label class="input-label">{{ $t('locale_name') }}:</label>
|
||||
<input v-model="form.name" :class="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme" :placeholder="$t('type_language_name')">
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="Language Locale" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('select_locale')" :error="errors[0]">
|
||||
<SelectInput v-model="form.locale" :options="locales" :placeholder="$t('select_language_locale')" :isError="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="Language Name" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('locale_name')" :error="errors[0]" :is-last="true">
|
||||
<input v-model="form.name" :class="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('type_language_name')">
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</PopupContent>
|
||||
|
||||
@@ -47,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 +62,7 @@ export default {
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputText,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
/>
|
||||
|
||||
<div class="dropzone-message" v-show="! isData">
|
||||
<image-icon size="28" class="icon-upload text-theme"></image-icon>
|
||||
<image-icon size="28" class="icon-upload text-theme mx-auto mb-1"/>
|
||||
<span class="dropzone-title">
|
||||
{{ $t('input_image.title') }}
|
||||
</span>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="select">
|
||||
|
||||
<!--Area-->
|
||||
<div class="input-area" :class="{'is-active': isOpen, 'is-error': isError}" @click="openMenu">
|
||||
<div class="input-area bg-light-background rounded-lg" :class="{'is-active': isOpen, 'is-error': isError}" @click="openMenu">
|
||||
|
||||
<!--If is selected-->
|
||||
<div class="selected" v-if="selected">
|
||||
@@ -23,9 +23,9 @@
|
||||
|
||||
<!--Options-->
|
||||
<transition name="slide-in">
|
||||
<div class="input-options" v-if="isOpen">
|
||||
<div class="input-options rounded-lg" v-if="isOpen">
|
||||
<div v-if="options.length > 5" class="select-search">
|
||||
<input v-model="query" ref="search" type="text" :placeholder="$t('select_search_placeholder')" class="search-input focus-border-theme">
|
||||
<input v-model="query" ref="search" type="text" :placeholder="$t('select_search_placeholder')" class="search-input focus-border-theme rounded-lg">
|
||||
</div>
|
||||
<ul class="option-list">
|
||||
<li class="option-item" @click="selectOption(option)" v-for="(option, i) in optionList" :key="i">
|
||||
@@ -131,7 +131,6 @@
|
||||
background: $light_background;
|
||||
@include transition(150ms);
|
||||
@include font-size(14);
|
||||
border-radius: 8px;
|
||||
padding: 13px 20px;
|
||||
appearance: none;
|
||||
font-weight: 700;
|
||||
@@ -143,7 +142,6 @@
|
||||
.input-options {
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 65px;
|
||||
@@ -174,11 +172,8 @@
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
|
||||
//background: $light_mode_input_background;
|
||||
@include transition(150ms);
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
padding: 13px 20px;
|
||||
display: flex;
|
||||
outline: 0;
|
||||
|
||||
Reference in New Issue
Block a user