Multi select collapse feature added.
This commit is contained in:
parent
d8f7cd174b
commit
d38613227e
@ -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() {
|
||||
|
@ -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')
|
||||
|
@ -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
|
||||
|
@ -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)"
|
||||
|
Loading…
x
Reference in New Issue
Block a user