fixed pgSlimSelect not being defined by correcting the assignment of … (

#1251)

* fixed pgSlimSelect not being defined by correcting the assignment of the window.phSlimSelect object to window.pgSlimSelect

* updated slimselect structure ¿

* fix slimSelect settings

* Add package lock > gitignore

---------

Co-authored-by: luanfreitasdev <[email protected]>

.gitignore

@@ -16,3 +16,4 @@ dist/powergrid.js.LICENSE.txt
 
 tests/cypress/app/
 .DS_Store
+package-lock.json

dist/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/powergrid.js": "/powergrid.js?id=9fecf3285b01d336e66f1f1f18b32bff",
+    "/powergrid.js": "/powergrid.js?id=c0ba3ef29bce8fed6df0b284053125a6",
     "/bootstrap5.css": "/bootstrap5.css?id=03aba1df82c23db07c1d1096efcd42ae",
     "/tailwind.css": "/tailwind.css?id=0a704dc8cc7a1f02d8000c080300b604",
     "/tom-select.css": "/tom-select.css?id=7af730d2c4bf937316d4002948b1571d",

resources/js/components/index.js

@@ -10,7 +10,7 @@ window.pgFlatpickr = pgFlatpickr
 window.pgEditable = pgEditable
 window.tableResponsive = tableResponsive
 window.pgTomSelect = pgTomSelect
-window.phSlimSelect = pgSlimSelect
+window.pgSlimSelect = pgSlimSelect
 
 Livewire.hook('commit', ({ component, succeed, fail }) => {
     if (component.ephemeral.setUp && component.ephemeral.setUp.hasOwnProperty('responsive')) {

resources/js/components/select/slimSelect.js

@@ -1,15 +1,42 @@
 import { storeMultiSelect } from "./store";
 
 export default (params) => ({
-    init() {
-        const element = this.$refs['select_picker_'+params.dataField+'_'+params.tableName];
-
-        new window.SlimSelect(element,{
-            items: this.initialValues,
-            ...this.framework,
-            onChange: (value) => {
-                storeMultiSelect(params, value)
-            },
-        });
+  initialValues: params.initialValues,
+  framework: params.framework,
+  init() {
+    const element =
+        this.$refs["select_picker_" + params.dataField + "_" + params.tableName];
+
+    const frameworkCopy = this.deepCopy(this.framework);
+
+    new window.SlimSelect({
+      select: element,
+      ...frameworkCopy,
+      events: {
+        afterChange: (value) => {
+          let newValue = value.map(item => item.value);
+          storeMultiSelect(params, newValue);
+        },
+      },
+    });
+  },
+  deepCopy(obj) {
+    if (obj === null || typeof obj !== 'object') {
+      return obj;
+    }
+
+    if (Array.isArray(obj)) {
+      return obj.map(this.deepCopy);
     }
-})
+
+    const copy = {};
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        copy[key] = this.deepCopy(obj[key]);
+      }
+    }
+
+    return copy;
+  }
+});
+

resources/views/components/inputs/select.blade.php

@@ -10,7 +10,7 @@
 @php
     $framework = config('livewire-powergrid.plugins.select');
     $collection = collect();
-    
+
     if (filled(data_get($filter, 'dataSource'))) {
         $collection = collect(data_get($filter, 'dataSource'))->transform(function (array|\Illuminate\Support\Collection|\Illuminate\Database\Eloquent\Model $entry) use ($filter) {
             if (is_array($entry)) {
@@ -19,7 +19,7 @@
             return $entry->only([data_get($filter, 'optionValue'), data_get($filter, 'optionLabel')]);
         });
     }
-    
+
     $params = [
         'tableName' => $tableName,
         'label' => data_get($filter, 'title'),
@@ -29,7 +29,7 @@
         'initialValues' => $initialValues,
         'framework' => $framework[config('livewire-powergrid.plugins.select.default')],
     ];
-    
+
     if (\Illuminate\Support\Arr::has($filter, ['url', 'method'])) {
         $params['asyncData'] = [
             'url' => data_get($filter, 'url'),
@@ -38,7 +38,7 @@
             'headers' => data_get($filter, 'headers'),
         ];
     }
-    
+
     $alpineData = $framework['default'] == 'tom' ? 'pgTomSelect(' . \Illuminate\Support\Js::from($params) . ')' : 'pgSlimSelect(' . \Illuminate\Support\Js::from($params) . ')';
 @endphp
 <div