@wishbone-media/spark 0.32.0 → 0.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.32.0",
+  "version": "0.34.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -40,6 +40,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.2",
     "vite": "^7.2.2",
+    "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.24"
   },
   "packageManager": "pnpm@10.11.1",
@@ -49,6 +50,7 @@
     "release:minor": "npm version minor && npm publish && git push --follow-tags",
     "release:major": "npm version major && npm publish && git push --follow-tags"
   },
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./src/*": "./src/*",

package/src/composables/index.js

@@ -4,6 +4,7 @@ export { sparkOverlayService } from './sparkOverlayService.js'
 export { useSparkOverlay } from './useSparkOverlay.js'
 export { useSparkTableRouteSync } from './useSparkTableRouteSync.js'
 export { useFormSubmission } from './useFormSubmission.js'
+export { useCrudResource, useTableDelete } from './useCrudResource.js'
 export { useSubNavigation } from './useSubNavigation.js'
 export {
   useFormDirtyGuard,

package/src/composables/useCrudResource.js

@@ -0,0 +1,109 @@
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { getAxiosInstance } from '../plugins/axios.js'
+import { sparkNotificationService } from './sparkNotificationService.js'
+
+/**
+ * Composable for CRUD Save views — handles resource fetching, error state, and edit mode detection.
+ *
+ * @param {string} endpoint - API endpoint name (e.g. 'tributes', 'public-holidays')
+ * @param {Object} options
+ * @param {string} options.queryParams - Optional query string for eager loading (e.g. 'with=brand.items')
+ * @param {Function} options.fetchFn - Custom fetch function. Receives { axios, resourceId, isEditMode, route }.
+ *                                     Return value is assigned to data ref. Return undefined to skip assignment.
+ * @param {boolean} options.fetchOnCreate - Whether to call fetch() on mount in create mode (default: false)
+ * @returns {{ data, error, resourceId, isEditMode, fetch, handleSuccess }}
+ */
+export function useCrudResource(endpoint, options = {}) {
+  const { queryParams = '', fetchFn = null, fetchOnCreate = false } = options
+  const route = useRoute()
+
+  const data = ref(null)
+  const error = ref(null)
+
+  const resourceId = computed(() => route.params.id ?? null)
+  const isEditMode = computed(() => resourceId.value !== null)
+
+  async function fetch() {
+    if (!fetchOnCreate && !isEditMode.value) return
+    error.value = null
+    try {
+      if (fetchFn) {
+        const result = await fetchFn({
+          axios: getAxiosInstance(),
+          resourceId: resourceId.value,
+          isEditMode: isEditMode.value,
+          route,
+        })
+        if (result !== undefined) data.value = result
+      } else {
+        const axios = getAxiosInstance()
+        let url = `/${endpoint}/${resourceId.value}`
+        if (queryParams) url += `?${queryParams}`
+        const response = await axios.get(url)
+        data.value = response.data
+      }
+    } catch (err) {
+      error.value = err.response?.data?.message || err.message || 'Failed to load data.'
+    }
+  }
+
+  function handleSuccess() {
+    if (isEditMode.value) fetch()
+  }
+
+  onMounted(() => {
+    if (fetchOnCreate || isEditMode.value) fetch()
+  })
+
+  return { data, error, resourceId, isEditMode, fetch, handleSuccess }
+}
+
+/**
+ * Composable for SparkTable row deletion — handles axios delete, notifications, and table refresh.
+ *
+ * @param {Ref} tableRef - Template ref to the SparkTable component (used for .refresh())
+ * @param {Object} options
+ * @param {string} options.endpoint - API endpoint name (e.g. 'public-holidays', 'invoices')
+ * @param {string} options.successMessage - Notification on success (default: 'Deleted successfully.')
+ * @param {string} options.errorMessage - Notification on error (default: API message or 'Failed to delete.')
+ * @param {Function} options.onSuccess - Callback after successful delete (receives row)
+ * @param {Function} options.onError - Callback on error (receives error, row). Return true to skip default handling.
+ * @returns {{ handleDelete }}
+ */
+export function useTableDelete(tableRef, options = {}) {
+  const {
+    endpoint,
+    successMessage,
+    errorMessage,
+    onSuccess,
+    onError,
+  } = options
+
+  async function handleDelete(row) {
+    try {
+      const axios = getAxiosInstance()
+      await axios.delete(`/${endpoint}/${row.id}`)
+    } catch (err) {
+      if (onError) {
+        const handled = onError(err, row)
+        if (handled) return
+      }
+      sparkNotificationService.show({
+        type: 'danger',
+        message: errorMessage || err.response?.data?.message || 'Failed to delete.',
+      })
+      console.error(err)
+      return
+    }
+
+    sparkNotificationService.show({
+      type: 'success',
+      message: successMessage || 'Deleted successfully.',
+    })
+    if (onSuccess) onSuccess(row)
+    if (tableRef?.value?.refresh) tableRef.value.refresh()
+  }
+
+  return { handleDelete }
+}

package/src/composables/useFormSubmission.js

@@ -18,12 +18,13 @@ import { parseLaravelErrors, getFormLevelMessage, isValidationError } from '../u
  * @param {Function} options.onError - Callback after error (receives error, can return true to skip default handling)
  * @param {boolean} options.showNotification - Whether to show success notification (default: true)
  * @param {boolean} options.setFieldErrors - Whether to set field-level errors on 422 (default: true)
- * @param {boolean} options.setFormErrors - Whether to show form-level error notification on 422 (default: false)
+ * @param {boolean} options.setFormErrors - Whether to show form-level error notification on 422 (default: true)
  *
  * @returns {Object} Form submission helpers
  */
 export function useFormSubmission(options = {}) {
   const {
+    endpoint = null,
     successMessage = 'Saved successfully!',
     createMessage = 'Created successfully!',
     updateMessage = 'Updated successfully!',
@@ -32,7 +33,7 @@ export function useFormSubmission(options = {}) {
     onError = null,
     showNotification = true,
     setFieldErrors = true,
-    setFormErrors = false,
+    setFormErrors = true,
   } = options
 
   const router = useRouter()
@@ -63,20 +64,6 @@ export function useFormSubmission(options = {}) {
       const response = await submitFn()
       const data = response.data
 
-      // Show success notification
-      if (showNotification) {
-        const message = isEditMode
-          ? updateMessage
-          : method === 'create'
-            ? createMessage
-            : successMessage
-
-        sparkNotificationService.show({
-          type: 'success',
-          message,
-        })
-      }
-
       // Execute success callback
       if (onSuccess) {
         await onSuccess(data)
@@ -90,6 +77,21 @@ export function useFormSubmission(options = {}) {
         await router.push(location)
       }
 
+      // Show success notification (after redirect so it appears on the destination page
+      // and isn't cleared by SparkNotificationOutlet's route-change detection)
+      if (showNotification) {
+        const message = isEditMode
+          ? updateMessage
+          : method === 'create'
+            ? createMessage
+            : successMessage
+
+        sparkNotificationService.toast({
+          type: 'success',
+          message,
+        })
+      }
+
       return { success: true, data, error: null }
     } catch (error) {
       const response = error.response
@@ -115,6 +117,7 @@ export function useFormSubmission(options = {}) {
             type: 'danger',
             message: getFormLevelMessage(response),
           })
+          window.scrollTo({ top: 0, behavior: 'smooth' })
         }
       } else {
         // Handle non-validation errors
@@ -122,6 +125,7 @@ export function useFormSubmission(options = {}) {
           type: 'danger',
           message: getFormLevelMessage(response),
         })
+        window.scrollTo({ top: 0, behavior: 'smooth' })
       }
 
       return { success: false, data: null, error }
@@ -152,9 +156,28 @@ export function useFormSubmission(options = {}) {
     })
   }
 
+  /**
+   * Convenience method for standard CRUD form submissions.
+   * Automatically constructs URL and HTTP method from endpoint + resourceId.
+   * Requires `endpoint` option to be set.
+   *
+   * @param {Object} config - Submission configuration
+   * @param {Object} config.payload - Request payload
+   * @param {Object} config.node - FormKit node
+   * @param {string|number} config.resourceId - Resource ID (for edit mode)
+   * @param {boolean} config.isEditMode - Whether this is an update
+   */
+  async function submitCrud(config) {
+    const { payload, node, resourceId, isEditMode } = config
+    const url = isEditMode ? `/${endpoint}/${resourceId}` : `/${endpoint}`
+    const method = isEditMode ? 'put' : 'post'
+    return submitToApi({ url, payload, method, node, isEditMode })
+  }
+
   return {
     submitting,
     submit,
     submitToApi,
+    ...(endpoint ? { submitCrud } : {}),
   }
 }

package/src/constants/australianStates.js

@@ -0,0 +1,14 @@
+/**
+ * Australian state/territory options for use in select dropdowns and filter controls.
+ * Each entry has { label, value } shape compatible with FormKit selects and SparkTable filters.
+ */
+export const AUSTRALIAN_STATES = [
+  { label: 'Australian Capital Territory', value: 'ACT' },
+  { label: 'New South Wales', value: 'NSW' },
+  { label: 'Northern Territory', value: 'NT' },
+  { label: 'Queensland', value: 'QLD' },
+  { label: 'South Australia', value: 'SA' },
+  { label: 'Tasmania', value: 'TAS' },
+  { label: 'Victoria', value: 'VIC' },
+  { label: 'Western Australia', value: 'WA' },
+]

package/src/constants/index.js

@@ -0,0 +1 @@
+export { AUSTRALIAN_STATES } from './australianStates.js'

package/src/index.js

@@ -1,5 +1,6 @@
 export * from './components/index.js'
 export * from './composables/index.js'
+export * from './constants/index.js'
 export * from './containers/index.js'
 export * from './plugins/index.js'
 export * from './stores/index.js'