@wishbone-media/spark 0.31.0 → 0.32.0

package/package.json

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

package/src/components/SparkButton.vue

@@ -88,7 +88,7 @@ const mergeClasses = (baseClasses, overrideClasses) => {
 }
 
 const computedButtonClass = computed(() => {
-  let classes = ''
+  let classes = 'cursor-pointer'
   let roundingSize = ''
 
   switch (props.size) {

package/src/components/SparkFileDragUpload.vue

@@ -0,0 +1,275 @@
+<template>
+  <div>
+    <label v-if="label" class="block text-sm font-medium text-gray-700 mb-2">{{ label }}</label>
+
+    <!-- Dashed variant -->
+    <div
+      v-if="variant === 'dashed'"
+      class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center transition-colors"
+      :class="{
+        'border-blue-500 bg-blue-50': isDragging,
+        'opacity-50 pointer-events-none': disabled || uploading,
+      }"
+      @dragover.prevent="onDragOver"
+      @dragenter.prevent="onDragOver"
+      @dragleave.prevent="onDragLeave"
+      @drop.prevent="onDrop"
+    >
+      <FormKit
+        ref="formkitFileRef"
+        type="file"
+        :name="name"
+        :accept="accept"
+        :disabled="disabled || uploading"
+        outer-class="hidden"
+        @input="handleFormKitInput"
+      />
+      <div v-if="!selectedFile">
+        <font-awesome-icon :icon="icon" class="text-4xl text-gray-400 mb-3" />
+        <p class="text-sm text-gray-600 mb-2">{{ dropText }}</p>
+        <SparkButton variant="secondary" @click="triggerFileDialog">
+          {{ browseText }}
+        </SparkButton>
+      </div>
+      <div v-else class="flex items-center justify-center gap-3">
+        <font-awesome-icon :icon="Icons.farFile" class="text-2xl text-gray-500" />
+        <span class="text-gray-700">{{ selectedFile.name }}</span>
+        <SparkButton variant="secondary" size="sm" @click="clear">
+          <font-awesome-icon :icon="Icons.farXmark" />
+        </SparkButton>
+      </div>
+    </div>
+
+    <!-- Minimal variant -->
+    <div
+      v-else
+      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 file here</span>
+      </div>
+    </div>
+
+    <!-- Upload button -->
+    <div v-if="showUploadButton" class="flex justify-end mt-4">
+      <SparkButton size="lg" :disabled="!selectedFile || uploading" @click="upload">
+        <font-awesome-icon
+          v-if="uploading"
+          :icon="Icons.farSpinner"
+          class="mr-2 animate-spin"
+        />
+        {{ uploading ? uploadingText : uploadText }}
+      </SparkButton>
+    </div>
+
+    <p v-if="uploading && !showUploadButton" class="text-sm text-gray-500 mt-1">{{ uploadingText }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue'
+import { Icons } from '@/plugins/fontawesome'
+import { sparkNotificationService } from '@/composables/sparkNotificationService'
+import SparkButton from './SparkButton.vue'
+
+const props = defineProps({
+  uploadUrl: {
+    type: String,
+    required: true,
+  },
+  fieldName: {
+    type: String,
+    default: 'file',
+  },
+  extraFields: {
+    type: Object,
+    default: () => ({}),
+  },
+  extraParams: {
+    type: Object,
+    default: () => ({}),
+  },
+  accept: {
+    type: String,
+    default: '*/*',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: 'file',
+  },
+  icon: {
+    type: Object,
+    default: () => Icons.farCloudArrowUp,
+  },
+  browseText: {
+    type: String,
+    default: 'Browse Files',
+  },
+  dropText: {
+    type: String,
+    default: 'Drag and drop your file here, or',
+  },
+  uploadText: {
+    type: String,
+    default: 'Upload',
+  },
+  uploadingText: {
+    type: String,
+    default: 'Uploading...',
+  },
+  showUploadButton: {
+    type: Boolean,
+    default: true,
+  },
+  variant: {
+    type: String,
+    default: 'dashed',
+    validator: (value) => ['dashed', 'minimal'].includes(value),
+  },
+  responseParser: {
+    type: Function,
+    default: (response) => response.data,
+  },
+})
+
+const emit = defineEmits(['upload-start', 'upload-success', 'upload-error', 'file-selected', 'file-cleared'])
+
+const axios = inject('axios')
+const selectedFile = ref(null)
+const uploading = ref(false)
+const isDragging = ref(false)
+const formkitFileRef = ref(null)
+
+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
+
+  if (!isFileTypeAccepted(file)) {
+    sparkNotificationService.show({
+      type: 'danger',
+      message: 'File type not accepted.',
+    })
+    return
+  }
+
+  selectedFile.value = file
+  emit('file-selected', file)
+}
+
+function isFileTypeAccepted(file) {
+  const acceptTypes = props.accept.split(',').map((t) => t.trim())
+
+  for (const acceptType of acceptTypes) {
+    if (acceptType === '*/*') return true
+    if (acceptType.endsWith('/*')) {
+      const category = acceptType.slice(0, -2)
+      if (file.type.startsWith(category + '/')) return true
+    } else if (acceptType.startsWith('.')) {
+      if (file.name.toLowerCase().endsWith(acceptType.toLowerCase())) return true
+    } else {
+      if (file.type === acceptType) return true
+    }
+  }
+
+  return false
+}
+
+function handleFormKitInput(files) {
+  if (!files || files.length === 0) return
+  const file = files[0].file
+  if (!file) return
+  selectedFile.value = file
+  emit('file-selected', file)
+}
+
+function triggerFileDialog() {
+  const el = formkitFileRef.value?.$el
+  if (!el) return
+  const inputEl = el.querySelector('input[type="file"]')
+    || el.parentElement?.querySelector('input[type="file"]')
+  if (inputEl) {
+    inputEl.click()
+  }
+}
+
+function clear() {
+  selectedFile.value = null
+  emit('file-cleared')
+}
+
+async function upload() {
+  if (!selectedFile.value) return
+
+  uploading.value = true
+  emit('upload-start')
+
+  try {
+    const formData = new FormData()
+    formData.append(props.fieldName, selectedFile.value)
+
+    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' },
+      params: props.extraParams,
+    })
+
+    const result = props.responseParser(response)
+    emit('upload-success', result)
+  } catch (error) {
+    emit('upload-error', error)
+    sparkNotificationService.show({
+      type: 'danger',
+      message: error.response?.data?.message || 'Failed to upload file.',
+    })
+  } finally {
+    uploading.value = false
+  }
+}
+
+defineExpose({
+  upload,
+  clear,
+  selectedFile,
+  uploading,
+})
+</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 SparkFileDragUpload } from './SparkFileDragUpload.vue'
 export { default as SparkImageUpload } from './SparkImageUpload.vue'
 export { default as SparkModalContainer } from './SparkModalContainer.vue'
 export { default as SparkModalDialog } from './SparkModalDialog.vue'