Multi select collapse feature added.

resources/assets/js/components/AkauntingSelect.vue

@@ -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">
+                <span></span>
-                    <li class="el-select-dropdown__item hover" @click="onAddItem">
-                        <span>{{ add_new_text }}</span>
-                    </li>
-                </ul>
             </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">
+                <span></span>
-                    <li class="el-select-dropdown__item hover" @click="onAddItem">
-                        <span>{{ add_new_text }}</span>
-                    </li>
-                </ul>
             </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">
+                <span></span>
-                    <li class="el-select-dropdown__item hover" @click="onAddItem">
-                        <span>{{ add_new_text }}</span>
-                    </li>
-                </ul>
             </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() {

resources/views/incomes/invoices/item.blade.php

@@ -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"
+                {{ Form::selectAddNewGroup('name', '', '', $items, '', [
-                       data-item="name"
+                    'data-item' => 'name',
-                       required="required"
+                    'v-model' => 'row.name',
-                       name="items[][name]"
+                    '@input' => 'onGetItem($event, index)',
-                       v-model="row.name"
+                    'class' => 'form-control',
-                       @input="onGetItem($event, index)"
+                    'autocomplete' => 'form-control',
-                       type="text"
+                    'path' => route('modals.taxes.create')
-                       autocomplete="off">
+                ], 'mb-0 select-item') }}
-                <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>
                 <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')

resources/views/partials/form/multi_select_add_new_group.blade.php

@@ -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

resources/views/partials/form/multi_select_group.blade.php

@@ -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)"