Extend the original filter component instead of replacing it (#7)

resources/js/components/ColumnToggler.vue

@@ -2,7 +2,7 @@
 
     <Dropdown
         :handle-internal-clicks="false"
-        class="flex h-9 hover:bg-gray-100 dark:hover:bg-gray-700 rounded mr-2"
+        class="flex h-9 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
         :class="{
             'bg-primary-500 hover:bg-primary-600 border-primary-500': isDirty,
             'dark:bg-primary-500 dark:hover:bg-primary-600 dark:border-primary-500': isDirty,
@@ -78,26 +78,22 @@
 
 <script>
 
-    import { getStateFromLocalStorage } from './ColumToggler'
+    import { getStateFromLocalStorage } from './ColumnToggler'
     import cloneDeep from 'lodash/cloneDeep'
 
     export default {
         name: 'ColumnToggler',
         props: [ 'resourceName' ],
         data() {
             return {
-                appendToRequestCallback: null,
                 extraParams: {},
                 state: {},
                 originalState: {},
             }
         },
         mounted() {
 
-            Nova.$on('custom-relationship-field:extra-params', this.appendToRequestCallback = value => {
-                this.extraParams = { ...this.extraParams, ...value }
-            })
-
+            Nova.$on('custom-relationship-field:extra-params', this.appendToRequestCallback)
             Nova.$emit('custom-relationship-field:request-extra-params')
 
             const queryString = new URLSearchParams(this.extraParams)
@@ -168,7 +164,18 @@
             updateCheckedState(attribute, checked) {
                 this.state[ attribute ].visible = checked
             },
+            appendToRequestCallback(params) {
+                this.extraParams = { ...this.extraParams, ...params }
+            },
         },
     }
 
 </script>
+
+<style>
+
+    #column-toggler ~ div {
+        margin-left: .5rem;
+    }
+
+</style>

resources/js/tool.js

@@ -1,12 +1,47 @@
-import FilterMenu from './components/FilterMenu.vue'
-import { registerMixin } from './components/ColumToggler'
-import Index from '@/views/Index'
+import ColumnToggler from './components/ColumnToggler.vue'
+import { registerMixin } from './components/ColumnToggler'
+import { createVNode, render } from 'vue'
 
 Nova.booting(app => {
 
-    registerMixin(Index)
+    const componentFn = app.component
 
-    app.component('ResourceIndex', Index)
-    app.component('FilterMenu', FilterMenu)
+    app.component = function (name, component) {
+
+        if (name === 'ResourceIndex') {
+            registerMixin(component)
+        }
+
+        return componentFn.call(this, name, component)
+
+    }
+
+    app.mixin({
+        mounted() {
+
+            if (this._.type?.__file?.endsWith('ResourceTableToolbar.vue')) {
+
+                const toolbarTarget = '[dusk$="-index-component"] div.h-9.ml-auto.flex.items-center.pr-2.md\\:pr-3 > div.hidden.md\\:flex.px-2'
+
+                const container = document.createElement('div')
+                container.id = 'column-toggler'
+
+                const element = this._.vnode.el.querySelector(toolbarTarget)
+
+                if (element) {
+
+                    element.insertAdjacentElement('afterend', container)
+
+                    const vnode = createVNode(ColumnToggler, { resourceName: this._.props.resourceName })
+                    vnode.appContext = app._context
+
+                    render(vnode, container)
+
+                }
+
+            }
+
+        },
+    })
 
 })