#90 - wip

resources/js/Shared/ActionButton.vue

@@ -1,18 +0,0 @@
-<template>
-  <InertiaLink
-    as="button"
-    :onStart="() => processing = true"
-    :onFinish="() => processing = false"
-    :onBefore="() => ! processing"
-  >
-    <slot />
-  </InertiaLink>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-
-let processing = ref(false)
-
-watch(processing, (value) => console.log(value))
-</script>

resources/js/Shared/InertiaLink.js

@@ -0,0 +1,65 @@
+import { h, ref } from 'vue'
+import { Inertia, mergeDataIntoQueryString, shouldIntercept } from '@inertiajs/inertia'
+
+export default {
+  name: 'InertiaLink',
+  props: {
+    as: {
+      type: String,
+      default: 'a',
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    href: {
+      type: String,
+    },
+    method: {
+      type: String,
+      default: 'get',
+    },
+    replace: {
+      type: Boolean,
+      default: false,
+    },
+    preserveScroll: {
+      type: Boolean,
+      default: false,
+    },
+    preserveState: {
+      type: Boolean,
+      default: null,
+    },
+  },
+  setup(props, { slots, attrs }) {
+    const processing = ref(false)
+
+    return props => {
+      const as = props.as.toLowerCase()
+      const method = props.method.toLowerCase()
+      const [href, data] = mergeDataIntoQueryString(method, props.href || '', props.data, 'brackets')
+
+      return h(props.as, {
+        ...attrs,
+        ...as === 'a' ? { href } : {},
+        onClick: (event) => {
+          if (shouldIntercept(event)) {
+            event.preventDefault()
+
+            Inertia.visit(href, {
+              data: data,
+              method: method,
+              replace: props.replace,
+              preserveScroll: props.preserveScroll,
+              preserveState: props.preserveState ?? (method !== 'get'),
+              onBefore: () => ! processing.value,
+              onStart: () => processing.value = true,
+              onFinish: () => processing.value = false,
+            })
+          }
+        },
+      }, slots)
+    }
+  },
+}