Multi select collapse feature added.

This commit is contained in:
Cüneyt Şentürk 2019-12-25 15:02:55 +03:00
parent d8f7cd174b
commit d38613227e
4 changed files with 69 additions and 40 deletions

View File

@ -7,11 +7,7 @@
<el-select v-model="real_model" @input="change" disabled filterable v-if="disabled"
:placeholder="placeholder">
<div v-if="addNew" class="el-select-dropdown__wrap" slot="empty">
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item hover" @click="onAddItem">
<span>{{ add_new_text }}</span>
</li>
</ul>
<span></span>
</div>
<template slot="prefix">
@ -38,16 +34,16 @@
:value="value">
</el-option>
</el-option-group>
<li class="el-select-dropdown__item hover" @click="onAddItem">
<span>{{ add_new_text }}</span>
</li>
</el-select>
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && !multiple"
:placeholder="placeholder">
<div v-if="addNew" class="el-select-dropdown__wrap" slot="empty">
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item hover" @click="onAddItem">
<span>{{ add_new_text }}</span>
</li>
</ul>
<span></span>
</div>
<template slot="prefix">
@ -74,16 +70,16 @@
:value="value">
</el-option>
</el-option-group>
<li class="el-select-dropdown__item hover" @click="onAddItem">
<span>{{ add_new_text }}</span>
</li>
</el-select>
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple" multiple collapse-tags
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && !collapse" multiple
:placeholder="placeholder">
<div v-if="addNew" class="el-select-dropdown__wrap" slot="empty">
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item hover" @click="onAddItem">
<span>{{ add_new_text }}</span>
</li>
</ul>
<span></span>
</div>
<template slot="prefix">
@ -110,6 +106,46 @@
:value="value">
</el-option>
</el-option-group>
<li class="el-select-dropdown__item hover" @click="onAddItem">
<span>{{ add_new_text }}</span>
</li>
</el-select>
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && collapse" multiple collapse-tags
:placeholder="placeholder">
<div v-if="addNew" class="el-select-dropdown__wrap" slot="empty">
<span></span>
</div>
<template slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
</span>
</template>
<el-option v-if="!group" v-for="(label, value) in selectOptions"
:key="value"
:label="label"
:value="value">
</el-option>
<el-option-group
v-if="group"
v-for="(options, name) in selectOptions"
:key="name"
:label="name">
<el-option
v-for="(label, value) in options"
:key="value"
:label="label"
:value="value">
</el-option>
</el-option-group>
<li class="el-select-dropdown__item hover" @click="onAddItem">
<span>{{ add_new_text }}</span>
</li>
</el-select>
</base-input>
</template>
@ -152,7 +188,8 @@ export default {
addNewPath: null,
group: false,
multiple:false,
disabled:false
disabled:false,
collapse: false
},
data() {

View File

@ -16,29 +16,14 @@
@stack('name_td_start')
<td class="col-md-3 border-right-0 border-bottom-0">
@stack('name_input_start')
<input class="form-control"
data-item="name"
required="required"
name="items[][name]"
v-model="row.name"
@input="onGetItem($event, index)"
type="text"
autocomplete="off">
<div class="dropdown-menu item-show dropdown-menu-center" ref="menu" :class="[{show: row.show}]">
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action" v-for="(item, item_index) in items" @click="onSelectItem(item, index)">
<div class="row align-items-center">
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="name" v-text="item.name"></div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
{{ Form::selectAddNewGroup('name', '', '', $items, '', [
'data-item' => 'name',
'v-model' => 'row.name',
'@input' => 'onGetItem($event, index)',
'class' => 'form-control',
'autocomplete' => 'form-control',
'path' => route('modals.taxes.create')
], 'mb-0 select-item') }}
<input name="items[][show]"
value="false"
v-model="row.show"
@ -99,6 +84,7 @@
'v-model' => 'row.tax_id',
'change' => 'onCalculateTotal',
'class' => 'form-control',
'collapse' => 'false',
'path' => route('modals.taxes.create')
], 'mb-0 select-tax') }}
@stack('tax_id_input_end')

View File

@ -12,6 +12,9 @@
:multiple="true"
:add-new="true"
:add-new-text="'{{ trans('general.form.add_new', ['field' => $text]) }}'"
@if (!empty($attributes['collapse']))
:collapse="true"
@endif
@if (!empty($attributes['path']))
:add-new-path="'{{ $attributes['path'] }}'"
@endif

View File

@ -10,6 +10,9 @@
:value="{{ json_encode(old($name, $selected)) }}"
:icon="'{{ $icon }}'"
:multiple="true"
@if (!empty($attributes['collapse']))
:collapse="true"
@endif
@interface="{{ !empty($attributes['v-model']) ? $attributes['v-model'] . ' = $event' : 'form.' . $name . ' = $event' }}"
@if (!empty($attributes['change']))
@change="{{ $attributes['change'] }}($event)"