@wishbone-media/spark 0.26.0 → 0.28.0

package/formkit.theme.mjs

@@ -216,6 +216,9 @@ const classes = {
     "group-data-[invalid]:border-red-500": true,
     "group-data-[invalid]:ring-1": true,
     "group-data-[invalid]:ring-red-500": true,
+    "group-data-[errors]:border-red-500": true,
+    "group-data-[errors]:ring-1": true,
+    "group-data-[errors]:ring-red-500": true,
     "group-data-[disabled]:bg-gray-100": true,
     "group-data-[disabled]:!cursor-not-allowed": true,
     "shadow-xs": true,
@@ -225,7 +228,9 @@ const classes = {
     "dark:border-gray-700": true,
     "dark:group-data-[disabled]:bg-gray-800/5": true,
     "dark:group-data-[invalid]:border-red-500": true,
-    "dark:group-data-[invalid]:ring-red-500": true
+    "dark:group-data-[invalid]:ring-red-500": true,
+    "dark:group-data-[errors]:border-red-500": true,
+    "dark:group-data-[errors]:ring-red-500": true
   },
   "family:text__input": {
     "appearance-none": true,
@@ -293,6 +298,9 @@ const classes = {
     "group-data-[invalid]:border-red-500": true,
     "group-data-[invalid]:ring-1": true,
     "group-data-[invalid]:ring-red-500": true,
+    "group-data-[errors]:border-red-500": true,
+    "group-data-[errors]:ring-1": true,
+    "group-data-[errors]:ring-red-500": true,
     "group-data-[disabled]:bg-gray-100": true,
     "group-data-[disabled]:!cursor-not-allowed": true,
     "shadow-xs": true,
@@ -302,7 +310,9 @@ const classes = {
     "dark:border-gray-700": true,
     "dark:group-data-[disabled]:bg-gray-700/40": true,
     "dark:group-data-[invalid]:border-red-500": true,
-    "dark:group-data-[invalid]:ring-red-500": true
+    "dark:group-data-[invalid]:ring-red-500": true,
+    "dark:group-data-[errors]:border-red-500": true,
+    "dark:group-data-[errors]:ring-red-500": true
   },
   "family:dropdown__input": {
     "appearance-none": true,
@@ -791,7 +801,7 @@ const classes = {
     "dark:text-gray-300": true
   },
   "form__messages": {
-    "": true
+    "hidden": true,
   },
   "form__message": {
     "text-red-600": true,
@@ -895,6 +905,9 @@ const classes = {
     "group-data-[invalid]:border-red-500": true,
     "group-data-[invalid]:ring-1": true,
     "group-data-[invalid]:ring-red-500": true,
+    "group-data-[errors]:border-red-500": true,
+    "group-data-[errors]:ring-1": true,
+    "group-data-[errors]:ring-red-500": true,
     "group-data-[disabled]:bg-gray-100": true,
     "group-data-[disabled]:!cursor-not-allowed": true,
     "shadow-xs": true,
@@ -905,7 +918,9 @@ const classes = {
     "dark:border-gray-700": true,
     "dark:group-data-[disabled]:bg-gray-800/5": true,
     "dark:group-data-[invalid]:border-red-500": true,
-    "dark:group-data-[invalid]:ring-red-500": true
+    "dark:group-data-[invalid]:ring-red-500": true,
+    "dark:group-data-[errors]:border-red-500": true,
+    "dark:group-data-[errors]:ring-red-500": true
   },
   "select__input": {
     "appearance-none": true,
@@ -1084,6 +1099,9 @@ const classes = {
     "group-data-[invalid]:border-red-500": true,
     "group-data-[invalid]:ring-1": true,
     "group-data-[invalid]:ring-red-500": true,
+    "group-data-[errors]:border-red-500": true,
+    "group-data-[errors]:ring-1": true,
+    "group-data-[errors]:ring-red-500": true,
     "group-data-[disabled]:bg-gray-100": true,
     "shadow-xs": true,
     "group-[&]/repeater:shadow-none": true,
@@ -1092,6 +1110,8 @@ const classes = {
     "dark:group-data-[disabled]:bg-gray-800/5": true,
     "dark:group-data-[invalid]:border-red-500": true,
     "dark:group-data-[invalid]:ring-red-500": true,
+    "dark:group-data-[errors]:border-red-500": true,
+    "dark:group-data-[errors]:ring-red-500": true,
     "dark:bg-transparent": true
   },
   "textarea__input": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/components/SparkImageUpload.vue

@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <label v-if="label" class="block text-sm font-medium text-gray-700 mb-2">{{ label }}</label>
+    <div v-if="modelValue" class="mb-2 relative inline-block">
+      <a :href="modelValue" target="_blank" rel="noopener noreferrer">
+        <img
+          :src="modelValue"
+          :alt="label || 'Image preview'"
+          :class="[height, 'w-auto object-contain border border-gray-300 rounded-md cursor-pointer hover:opacity-80 transition-opacity']"
+        />
+      </a>
+      <button
+        type="button"
+        class="absolute -top-2 -right-2 w-5 h-5 bg-white/80 hover:bg-white text-gray-500 hover:text-gray-700 rounded-full flex items-center justify-center shadow-sm border border-gray-200"
+        :disabled="disabled"
+        @click="clearImage"
+      >
+        <font-awesome-icon :icon="Icons.farXmark" class="text-xs" />
+      </button>
+    </div>
+    <div
+      v-if="!modelValue"
+      class="relative rounded-md transition-colors"
+      :class="{
+        'ring-2 ring-blue-500 ring-offset-2 bg-blue-50': isDragging,
+      }"
+      @dragover.prevent="onDragOver"
+      @dragenter.prevent="onDragOver"
+      @dragleave.prevent="onDragLeave"
+      @drop.prevent="onDrop"
+    >
+      <FormKit
+        type="file"
+        :name="name"
+        :accept="accept"
+        :disabled="disabled || uploading"
+        @input="handleFormKitInput"
+      />
+      <div
+        v-if="isDragging"
+        class="absolute inset-0 flex items-center justify-center bg-blue-50/80 rounded-md pointer-events-none"
+      >
+        <span class="text-sm text-blue-600 font-medium">Drop image here</span>
+      </div>
+    </div>
+    <p v-if="uploading" class="text-sm text-gray-500 mt-1">Uploading...</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue'
+import { Icons } from '@/plugins/fontawesome'
+import { sparkNotificationService } from '@/composables/sparkNotificationService'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  uploadUrl: {
+    type: String,
+    required: true,
+  },
+  fieldName: {
+    type: String,
+    default: 'file',
+  },
+  extraFields: {
+    type: Object,
+    default: () => ({}),
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: 'image_file',
+  },
+  height: {
+    type: String,
+    default: 'h-16',
+  },
+  accept: {
+    type: String,
+    default: 'image/*',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  responseParser: {
+    type: Function,
+    default: (response) => response.data.url || response.data,
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'upload-start', 'upload-success', 'upload-error'])
+
+const axios = inject('axios')
+const uploading = ref(false)
+const isDragging = ref(false)
+
+function clearImage() {
+  emit('update:modelValue', '')
+}
+
+function onDragOver() {
+  if (props.disabled || uploading.value) return
+  isDragging.value = true
+}
+
+function onDragLeave() {
+  isDragging.value = false
+}
+
+function onDrop(event) {
+  isDragging.value = false
+  if (props.disabled || uploading.value) return
+
+  const file = event.dataTransfer?.files?.[0]
+  if (!file) return
+
+  // Validate file type against accept prop
+  if (!isFileTypeAccepted(file)) {
+    sparkNotificationService.show({
+      type: 'danger',
+      message: 'File type not accepted.',
+    })
+    return
+  }
+
+  uploadFile(file)
+}
+
+function isFileTypeAccepted(file) {
+  // Parse accept prop (e.g., "image/*", "image/png,image/jpeg", ".png,.jpg")
+  const acceptTypes = props.accept.split(',').map((t) => t.trim())
+
+  for (const acceptType of acceptTypes) {
+    if (acceptType === '*/*') return true
+    if (acceptType.endsWith('/*')) {
+      // Wildcard like "image/*"
+      const category = acceptType.slice(0, -2)
+      if (file.type.startsWith(category + '/')) return true
+    } else if (acceptType.startsWith('.')) {
+      // Extension like ".png"
+      if (file.name.toLowerCase().endsWith(acceptType.toLowerCase())) return true
+    } else {
+      // Exact MIME type like "image/png"
+      if (file.type === acceptType) return true
+    }
+  }
+
+  return false
+}
+
+// Handle FormKit file input
+function handleFormKitInput(files) {
+  if (!files || files.length === 0) return
+  const file = files[0].file
+  if (!file) return
+  uploadFile(file)
+}
+
+// Core upload logic
+async function uploadFile(file) {
+  uploading.value = true
+  emit('upload-start')
+
+  try {
+    const formData = new FormData()
+    formData.append(props.fieldName, file)
+
+    // Add any extra fields
+    Object.entries(props.extraFields).forEach(([key, value]) => {
+      formData.append(key, value)
+    })
+
+    const response = await axios.post(props.uploadUrl, formData, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    })
+
+    const url = props.responseParser(response)
+    emit('update:modelValue', url)
+    emit('upload-success', response)
+
+    sparkNotificationService.show({
+      type: 'success',
+      message: 'Image uploaded!',
+    })
+  } catch (error) {
+    emit('upload-error', error)
+    sparkNotificationService.show({
+      type: 'danger',
+      message: error.response?.data?.message || 'Failed to upload image.',
+    })
+  } finally {
+    uploading.value = false
+  }
+}
+</script>

package/src/components/index.js

@@ -6,6 +6,7 @@ export { default as SparkBrandSelector } from './SparkBrandSelector.vue'
 export { default as SparkButton } from './SparkButton.vue'
 export { default as SparkButtonGroup } from './SparkButtonGroup.vue'
 export { default as SparkCard } from './SparkCard.vue'
+export { default as SparkImageUpload } from './SparkImageUpload.vue'
 export { default as SparkModalContainer } from './SparkModalContainer.vue'
 export { default as SparkModalDialog } from './SparkModalDialog.vue'
 export { default as SparkOverlay } from './SparkOverlay.vue'

package/src/composables/index.js

@@ -2,4 +2,5 @@ export { sparkModalService } from './sparkModalService.js'
 export { sparkNotificationService } from './sparkNotificationService.js'
 export { sparkOverlayService } from './sparkOverlayService.js'
 export { useSparkOverlay } from './useSparkOverlay.js'
-export { useSparkTableRouteSync } from './useSparkTableRouteSync.js'
+export { useSparkTableRouteSync } from './useSparkTableRouteSync.js'
+export { useFormSubmission } from './useFormSubmission.js'

package/src/composables/useFormSubmission.js

@@ -0,0 +1,160 @@
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { sparkNotificationService } from './sparkNotificationService.js'
+import { getAxiosInstance } from '../plugins/axios.js'
+import { parseLaravelErrors, getFormLevelMessage, isValidationError } from '../utils/index.js'
+
+/**
+ * Composable for handling form submissions with Laravel backend
+ * Automatically handles loading states, notifications, validation errors, and redirects
+ *
+ * @param {Object} options - Configuration options
+ * @param {string} options.successMessage - Message to show on success (default: 'Saved successfully!')
+ * @param {string} options.createMessage - Message to show on create (default: 'Created successfully!')
+ * @param {string} options.updateMessage - Message to show on update (default: 'Updated successfully!')
+ * @param {string|Object|Function} options.redirectTo - Vue Router location to redirect after create (optional)
+ *                                                     Can be a function that receives response data
+ * @param {Function} options.onSuccess - Callback after successful submission (receives response data)
+ * @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)
+ *
+ * @returns {Object} Form submission helpers
+ */
+export function useFormSubmission(options = {}) {
+  const {
+    successMessage = 'Saved successfully!',
+    createMessage = 'Created successfully!',
+    updateMessage = 'Updated successfully!',
+    redirectTo = null,
+    onSuccess = null,
+    onError = null,
+    showNotification = true,
+    setFieldErrors = true,
+    setFormErrors = false,
+  } = options
+
+  const router = useRouter()
+  const submitting = ref(false)
+
+  /**
+   * Execute the form submission
+   *
+   * @param {Object} config - Submission configuration
+   * @param {Function} config.submitFn - Async function that makes the API call
+   * @param {string} config.method - 'create' | 'update' (determines success message)
+   * @param {Object} config.node - FormKit node (second param from @submit handler)
+   * @param {boolean} config.isEditMode - Whether this is an update operation
+   *
+   * @returns {Promise<{success: boolean, data: any, error: any}>}
+   */
+  async function submit(config) {
+    const { submitFn, method = 'create', node = null, isEditMode = false } = config
+
+    submitting.value = true
+
+    // Clear previous FormKit errors
+    if (node) {
+      node.clearErrors()
+    }
+
+    try {
+      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)
+      }
+
+      // Redirect after create (if specified and not in edit mode)
+      if (!isEditMode && redirectTo) {
+        const location = typeof redirectTo === 'function'
+          ? redirectTo(data)
+          : redirectTo
+        await router.push(location)
+      }
+
+      return { success: true, data, error: null }
+    } catch (error) {
+      const response = error.response
+
+      // Allow custom error handling to intercept
+      if (onError) {
+        const handled = await onError(error)
+        if (handled === true) {
+          return { success: false, data: null, error }
+        }
+      }
+
+      // Handle validation errors (422)
+      if (isValidationError(response)) {
+        const fieldErrors = parseLaravelErrors(response)
+
+        if (fieldErrors && node && setFieldErrors) {
+          node.setErrors([], fieldErrors)
+        }
+
+        if (setFormErrors) {
+          sparkNotificationService.show({
+            type: 'danger',
+            message: getFormLevelMessage(response),
+          })
+        }
+      } else {
+        // Handle non-validation errors
+        sparkNotificationService.show({
+          type: 'danger',
+          message: getFormLevelMessage(response),
+        })
+      }
+
+      return { success: false, data: null, error }
+    } finally {
+      submitting.value = false
+    }
+  }
+
+  /**
+   * Convenience method for simple POST/PUT submissions
+   *
+   * @param {Object} config - Submission configuration
+   * @param {string} config.url - API endpoint
+   * @param {Object} config.payload - Request payload
+   * @param {string} config.method - 'post' | 'put' (default: 'post')
+   * @param {Object} config.node - FormKit node
+   * @param {boolean} config.isEditMode - Whether this is an update
+   */
+  async function submitToApi(config) {
+    const { url, payload, method = 'post', node, isEditMode } = config
+    const axios = getAxiosInstance()
+
+    return submit({
+      submitFn: () => axios[method](url, payload),
+      method: isEditMode ? 'update' : 'create',
+      node,
+      isEditMode,
+    })
+  }
+
+  return {
+    submitting,
+    submit,
+    submitToApi,
+  }
+}

package/src/utils/formErrors.js

@@ -0,0 +1,35 @@
+/**
+ * Parse Laravel validation errors from API response
+ * Laravel returns: { errors: { field: ["error1", "error2"] } }
+ * FormKit accepts: { field: ["error1", "error2"] } (compatible)
+ *
+ * @param {Object} response - Axios error.response object
+ * @returns {Object|null} - Field errors object or null if not validation error
+ */
+export function parseLaravelErrors(response) {
+  if (response?.status !== 422) return null
+  return response.data?.errors || null
+}
+
+/**
+ * Get a form-level error message from Laravel response
+ *
+ * @param {Object} response - Axios error.response object
+ * @returns {string} - Error message for display
+ */
+export function getFormLevelMessage(response) {
+  if (response?.status === 422) {
+    return response.data?.message || 'Please fix the validation errors.'
+  }
+  return response?.data?.message || 'An error occurred.'
+}
+
+/**
+ * Check if the error response is a validation error (422)
+ *
+ * @param {Object} response - Axios error.response object
+ * @returns {boolean}
+ */
+export function isValidationError(response) {
+  return response?.status === 422
+}

package/src/utils/index.js

@@ -3,3 +3,4 @@ export { customiseHeader } from './sparkTable/header.js'
 export { renderHeaderTitle } from './sparkTable/header-title.js'
 export { updateRow } from './sparkTable/update-row.js'
 export { formatTemporal, parseDatetime } from './formatTemporal.js'
+export { parseLaravelErrors, getFormLevelMessage, isValidationError } from './formErrors.js'