fix: use a less generic name for the alpine component to not clash wi…

…th other plugins
saade · Feb 15, 2024 · 48d7197 · 48d7197
1 parent dc054a3
commit 48d7197
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 34 deletions.
diff --git a/resources/dist/filament-adjacency-list.js b/resources/dist/filament-adjacency-list.js
diff --git a/resources/js/index.js b/resources/js/index.js
@@ -1,42 +1,44 @@
 import Sortable from "sortablejs"
 
-export default ({
+export default function adjacencyList({
     treeId,
     statePath,
     disabled,
     maxDepth
-}) => ({
-    statePath,
-    sortable: null,
+}) {
+    return {
+        statePath,
+        sortable: null,
 
-    init() {
-        this.sortable = new Sortable(this.$el, {
-            disabled,
-            group: treeId,
-            animation: 150,
-            fallbackOnBody: true,
-            swapThreshold: 0.25,
-            invertSwap: true,
-            draggable: "[data-sortable-item]",
-            handle: "[data-sortable-handle]",
-            onMove: (evt) => {
-                if (maxDepth && maxDepth >= 0 && this.getDepth(evt.related) > maxDepth) {
-                    return false;  // Prevent dragging items to a depth greater than maxDepth
+        init() {
+            this.sortable = new Sortable(this.$el, {
+                disabled,
+                group: treeId,
+                animation: 150,
+                fallbackOnBody: true,
+                swapThreshold: 0.25,
+                invertSwap: true,
+                draggable: "[data-sortable-item]",
+                handle: "[data-sortable-handle]",
+                onMove: (evt) => {
+                    if (maxDepth && maxDepth >= 0 && this.getDepth(evt.related) > maxDepth) {
+                        return false;  // Prevent dragging items to a depth greater than maxDepth
+                    }
+                },
+                onSort: () => {
+                    this.$wire.dispatchFormEvent('builder::sort', this.statePath, this.sortable.toArray())
                 }
-            },
-            onSort: () => {
-                this.$wire.dispatchFormEvent('builder::sort', this.statePath, this.sortable.toArray())
-            }
-        })
-    },
+            })
+        },
 
-    getDepth(el, depth = 0) {
-        const parentElement = el.parentElement.closest('[data-sortable-item]');
+        getDepth(el, depth = 0) {
+            const parentElement = el.parentElement.closest('[data-sortable-item]');
 
-        if (parentElement) {
-            return this.getDepth(parentElement, ++depth);
-        }
+            if (parentElement) {
+                return this.getDepth(parentElement, ++depth);
+            }
 
-        return depth;
-    },
-})
+            return depth;
+        },
+    }
+}
diff --git a/resources/views/builder.blade.php b/resources/views/builder.blade.php
@@ -35,7 +35,7 @@ class="fi-adjacency-list-tree"
         ax-load
         ax-load-css="{{ \Filament\Support\Facades\FilamentAsset::getStyleHref('filament-adjacency-list-styles', 'saade/filament-adjacency-list') }}"
         ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('filament-adjacency-list', 'saade/filament-adjacency-list') }}"
-        x-data="tree({
+        x-data="adjacencyList({
             treeId: @js($treeId),
             statePath: @js($getStatePath()),
             disabled: @js($isDisabled),

diff --git a/resources/views/components/item.blade.php b/resources/views/components/item.blade.php
@@ -86,7 +86,7 @@ class="px-2 text-gray-500 appearance-none"
             'pb-1' => !$hasChildren,
             'border-l border-l-gray-100 dark:border-l-white/10 ps-5 pt-2' => $hasRulers,
         ])
-        x-data="tree({
+        x-data="adjacencyList({
             treeId: @js($treeId),
             statePath: @js($itemStatePath . ".$childrenKey"),
             disabled: @js($disabled),