refs #1075 : Selectbox change style and added language text

This commit is contained in:
Cüneyt Şentürk 2020-01-18 11:45:03 +03:00
parent 072de6b7e2
commit 981cad8cb6
9 changed files with 185 additions and 34 deletions

View File

@ -7,13 +7,33 @@
<el-select v-model="real_model" @input="change" disabled filterable v-if="disabled" <el-select v-model="real_model" @input="change" disabled filterable v-if="disabled"
:placeholder="placeholder"> :placeholder="placeholder">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty"> <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<span></span> <p class="el-select-dropdown__empty">
{{ noMatchingData }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div> </div>
<div v-else-if="addNew.status && options.length == 0" slot="empty"> <div v-else-if="addNew.status && options.length == 0" slot="empty">
<p class="el-select-dropdown__empty">
{{ noData }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list"> <ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item hover" @click="onAddItem"> <li class="el-select-dropdown__item el-select__footer">
<span>{{ add_new_text }}</span> <div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -43,21 +63,46 @@
</el-option> </el-option>
</el-option-group> </el-option-group>
<li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem"> <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
<span>{{ add_new_text }}</span> <div @click="onAddItem">
</li> <i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</el-option>
</el-select> </el-select>
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && !multiple" <el-select v-model="real_model" @input="change" filterable v-if="!disabled && !multiple"
:placeholder="placeholder"> :placeholder="placeholder">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty"> <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<span></span> <p class="el-select-dropdown__empty">
{{ noMatchingData }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div> </div>
<div v-else-if="addNew.status && options.length == 0" slot="empty"> <div v-else-if="addNew.status && options.length == 0" slot="empty">
<p class="el-select-dropdown__empty">
{{ noData }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list"> <ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item hover" @click="onAddItem"> <li class="el-select-dropdown__item el-select__footer">
<span>{{ add_new_text }}</span> <div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -87,21 +132,46 @@
</el-option> </el-option>
</el-option-group> </el-option-group>
<li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem"> <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
<span>{{ add_new_text }}</span> <div @click="onAddItem">
</li> <i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</el-option>
</el-select> </el-select>
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && !collapse" multiple <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && !collapse" multiple
:placeholder="placeholder"> :placeholder="placeholder">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty"> <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<span></span> <p class="el-select-dropdown__empty">
{{ noMatchingData }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div> </div>
<div v-else-if="addNew.status && options.length == 0" slot="empty"> <div v-else-if="addNew.status && options.length == 0" slot="empty">
<p class="el-select-dropdown__empty">
{{ noData }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list"> <ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item hover" @click="onAddItem"> <li class="el-select-dropdown__item el-select__footer">
<span>{{ add_new_text }}</span> <div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -131,21 +201,46 @@
</el-option> </el-option>
</el-option-group> </el-option-group>
<li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem"> <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
<span>{{ add_new_text }}</span> <div @click="onAddItem">
</li> <i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</el-option>
</el-select> </el-select>
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && collapse" multiple collapse-tags <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && collapse" multiple collapse-tags
:placeholder="placeholder"> :placeholder="placeholder">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty"> <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<span></span> <p class="el-select-dropdown__empty">
{{ noMatchingData }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div> </div>
<div v-else-if="addNew.status && options.length == 0" slot="empty"> <div v-else-if="addNew.status && options.length == 0" slot="empty">
<p class="el-select-dropdown__empty">
{{ noData }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list"> <ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item hover" @click="onAddItem"> <li class="el-select-dropdown__item el-select__footer">
<span>{{ add_new_text }}</span> <div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -175,9 +270,14 @@
</el-option> </el-option>
</el-option-group> </el-option-group>
<li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem"> <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
<span>{{ add_new_text }}</span> <div @click="onAddItem">
</li> <i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</el-option>
</el-select> </el-select>
<component v-bind:is="add_new_html" @submit="onSubmit"></component> <component v-bind:is="add_new_html" @submit="onSubmit"></component>
@ -216,12 +316,12 @@ export default {
title: { title: {
type: String, type: String,
default: '', default: '',
description: "Modal header title" description: "Selectbox label"
}, },
placeholder: { placeholder: {
type: String, type: String,
default: '', default: '',
description: "Modal header title" description: "Selectbox input placeholder"
}, },
formClasses: null, formClasses: null,
formError: null, formError: null,
@ -252,7 +352,10 @@ export default {
group: false, group: false,
multiple:false, multiple:false,
disabled:false, disabled:false,
collapse: false collapse: false,
noData: '',
noMatchingData: ''
}, },
data() { data() {
@ -382,4 +485,37 @@ export default {
.form-group .modal { .form-group .modal {
z-index: 3050; z-index: 3050;
} }
.el-select-dropdown__empty {
padding: 10px 0 0 !important;
}
.el-select__footer {
text-align: center;
border-top: 1px solid #dee2e6;
padding: 0px;
cursor: pointer;
color: #3c3f72;
font-weight: bold;
height: 38px;
line-height: 38px;
margin-top: 5px;
margin-bottom: -6px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.el-select__footer.el-select-dropdown__item.hover {
background-color: inherit !important;
}
.el-select__footer.el-select-dropdown__item:hover, .el-select__footer.el-select-dropdown__item:focus {
background-color: #3c3f72 !important;
color: white !important;
border-top-color: #3c3f72;
}
.el-select__footer div span {
margin-left: 5px;
}
</style> </style>

View File

@ -147,6 +147,9 @@ return [
'month' => 'Month', 'month' => 'Month',
'year' => 'Year', 'year' => 'Year',
'no_data' => 'No data',
'no_matching_data' => 'No matching data',
'card' => [ 'card' => [
'name' => 'Name on Card', 'name' => 'Name on Card',
'number' => 'Card Number', 'number' => 'Card Number',

View File

@ -17,7 +17,7 @@
<div class="w-25 mr-4" v-if="bulk_action.count"> <div class="w-25 mr-4" v-if="bulk_action.count">
<div class="form-group mb-0"> <div class="form-group mb-0">
<select class="form-control form-control-sm" v-model="{{ !empty($attributes['v-model']) ? $attributes['v-model'] : 'bulk_action.value' }}" @change="onChange"> <select class="form-control form-control-sm" v-model="{{ !empty($attributes['v-model']) ? $attributes['v-model'] : 'bulk_action.value' }}" @change="onChange">
<option value="*">{{ trans_choice('bulk_actions.bulk_actions',2) }}</option> <option value="*">{{ trans_choice('bulk_actions.bulk_actions', 2) }}</option>
@foreach($actions as $key => $action) @foreach($actions as $key => $action)
<option <option
value="{{ $key }}" value="{{ $key }}"

View File

@ -41,6 +41,8 @@
@else @else
:form-error="form.errors.get('{{ $name }}')" :form-error="form.errors.get('{{ $name }}')"
@endif @endif
:no-data="'{{ trans('general.no_data') }}'"
:no-matching-data="'{{ trans('general.no_matching_data') }}'"
></akaunting-select> ></akaunting-select>
@stack($name . '_input_end') @stack($name . '_input_end')

View File

@ -21,6 +21,8 @@
:form-error="{{ $attributes['v-error-message'] }}" :form-error="{{ $attributes['v-error-message'] }}"
@else @else
:form-error="form.errors.get('{{ $name }}')" :form-error="form.errors.get('{{ $name }}')"
:no-data="'{{ trans('general.no_data') }}'"
:no-matching-data="'{{ trans('general.no_matching_data') }}'"
@endif @endif
></akaunting-select> ></akaunting-select>

View File

@ -32,5 +32,7 @@
@change="{{ $attributes['change'] }}($event)" @change="{{ $attributes['change'] }}($event)"
@endif @endif
:form-error="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}" :form-error="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}"
:no-data="'{{ trans('general.no_data') }}'"
:no-matching-data="'{{ trans('general.no_matching_data') }}'"
></akaunting-select> ></akaunting-select>
@stack($name . '_input_end') @stack($name . '_input_end')

View File

@ -20,5 +20,7 @@
@else @else
:form-error="form.errors.get('{{ $name }}')" :form-error="form.errors.get('{{ $name }}')"
@endif @endif
:no-data="'{{ trans('general.no_data') }}'"
:no-matching-data="'{{ trans('general.no_matching_data') }}'"
></akaunting-select> ></akaunting-select>
@stack($name . '_input_end') @stack($name . '_input_end')

View File

@ -33,5 +33,7 @@
@change="{{ $attributes['change'] }}($event)" @change="{{ $attributes['change'] }}($event)"
@endif @endif
:form-error="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}" :form-error="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}"
:no-data="'{{ trans('general.no_data') }}'"
:no-matching-data="'{{ trans('general.no_matching_data') }}'"
></akaunting-select> ></akaunting-select>
@stack($name . '_input_end') @stack($name . '_input_end')

View File

@ -14,5 +14,7 @@
@change="{{ $attributes['change'] }}($event)" @change="{{ $attributes['change'] }}($event)"
@endif @endif
:form-error="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}" :form-error="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}"
:no-data="'{{ trans('general.no_data') }}'"
:no-matching-data="'{{ trans('general.no_matching_data') }}'"
></akaunting-select> ></akaunting-select>
@stack($name . '_input_end') @stack($name . '_input_end')