@wishbone-media/spark 0.38.0 → 0.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.38.0",
+  "version": "0.40.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -38,14 +38,44 @@
     "vue-router": "^4.6.3"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "eslint": "^10.1.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-oxlint": "^1.57.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-vue": "^10.8.0",
+    "globals": "^17.4.0",
+    "lint-staged": "^16.4.0",
+    "npm-run-all2": "^8.0.4",
+    "oxlint": "^1.57.0",
+    "prettier": "^3.8.1",
+    "simple-git-hooks": "^2.13.1",
     "vite": "^7.2.2",
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.24"
   },
   "packageManager": "pnpm@10.11.1",
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,mjs,vue}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{css,json,md}": [
+      "prettier --write"
+    ]
+  },
   "scripts": {
     "build": "vite build",
+    "prepare": "simple-git-hooks",
+    "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
+    "lint:eslint": "eslint . --fix",
+    "lint": "run-s lint:* format",
+    "format": "prettier --write src/",
     "release:patch": "npm version patch && npm publish && git push --follow-tags",
     "release:minor": "npm version minor && npm publish && git push --follow-tags",
     "release:major": "npm version major && npm publish && git push --follow-tags"

package/src/assets/css/spark-table.css

@@ -134,4 +134,4 @@
 
 .spark-table-toolbar-footer {
   @apply min-h-15;
-}
+}

package/src/assets/css/spark-tooltip.css

@@ -14,7 +14,9 @@
   color: #fff;
   background: #1f2937; /* gray-800 */
   border-radius: 0.375rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
   pointer-events: none;
   word-wrap: break-word;
   white-space: pre-line;
@@ -30,11 +32,15 @@
 
 /* Transitions (for SparkTooltip component) */
 .spark-tooltip-enter-active {
-  transition: opacity 150ms ease, transform 150ms ease;
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
 }
 
 .spark-tooltip-leave-active {
-  transition: opacity 100ms ease, transform 100ms ease;
+  transition:
+    opacity 100ms ease,
+    transform 100ms ease;
 }
 
 .spark-tooltip-enter-from,

package/src/components/SparkAddressInput.vue

@@ -33,8 +33,19 @@
           :disabled="disabled"
           @click="manualExpanded = !manualExpanded"
         >
-          <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-            <path v-if="manualExpanded" stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+          <svg
+            class="h-3.5 w-3.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path
+              v-if="manualExpanded"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M19 9l-7 7-7-7"
+            />
             <path v-else stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
           </svg>
           {{ manualExpanded ? 'Hide manual entry' : 'Manual entry' }}
@@ -46,7 +57,13 @@
           :disabled="disabled"
           @click="clearAddress"
         >
-          <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <svg
+            class="h-3.5 w-3.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2"
+          >
             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
           </svg>
           Clear

package/src/components/SparkAppSelector.vue

@@ -41,18 +41,18 @@
             />
           </div>
         </a>
-        <div></div>
+        <div />
       </div>
       <div class="mt-auto">
         <div v-if="$slots.bottom || bottomSlot" class="p-6">
           <slot name="bottom">
-            <component v-if="bottomSlot" :is="bottomSlot" />
+            <component :is="bottomSlot" v-if="bottomSlot" />
           </slot>
         </div>
 
         <div v-if="$slots.footer || footerSlot" class="bg-gray-50 p-6">
           <slot name="footer">
-            <component v-if="footerSlot" :is="footerSlot" />
+            <component :is="footerSlot" v-if="footerSlot" />
           </slot>
         </div>
       </div>
@@ -66,7 +66,7 @@ import { Icons } from '@/plugins/fontawesome'
 import { useSparkAppSelectorStore } from '@/stores/app-selector'
 import { useSparkAppStore } from '@/stores/app'
 
-const props = defineProps({
+defineProps({
   bottomSlot: {
     type: [Object, Function],
     default: null,
@@ -84,13 +84,13 @@ const appStore = useSparkAppStore()
 
 const appsWithCurrent = computed(() => {
   const currentAppName = appStore.state.app
-  return appSelectorStore.state.apps.map(app => ({
+  return appSelectorStore.state.apps.map((app) => ({
     ...app,
-    current: currentAppName && app.name.toLowerCase() === currentAppName.toLowerCase()
+    current: currentAppName && app.name.toLowerCase() === currentAppName.toLowerCase(),
   }))
 })
 
-const handleAppClick = (app, event) => {
+const handleAppClick = (app) => {
   emit('select', app)
 }
 </script>

package/src/components/SparkBrandSelector.vue

@@ -45,9 +45,9 @@
             </div>
           </div>
         </div>
-        <div></div>
+        <div />
       </div>
-      <div class="mt-auto"></div>
+      <div class="mt-auto" />
     </div>
   </div>
 </template>

package/src/components/SparkButton.vue

@@ -1,12 +1,12 @@
 <template>
   <button
-    type="button"
     ref="buttonRef"
+    type="button"
     :class="computedButtonClass"
     :disabled="disabled"
     @click="$emit('click')"
   >
-    <slot></slot>
+    <slot />
   </button>
 </template>
 
@@ -72,11 +72,11 @@ const mergeClasses = (baseClasses, overrideClasses) => {
 
   const filtered = base.filter((baseClass) => {
     return !overrides.some((override) => {
-      const baseGroup = Object.entries(CONFLICT_GROUPS).find(([_, regex]) =>
+      const baseGroup = Object.entries(CONFLICT_GROUPS).find(([, regex]) =>
         regex.test(baseClass),
       )?.[0]
 
-      const overrideGroup = Object.entries(CONFLICT_GROUPS).find(([_, regex]) =>
+      const overrideGroup = Object.entries(CONFLICT_GROUPS).find(([, regex]) =>
         regex.test(override),
       )?.[0]
 

package/src/components/SparkButtonGroup.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="inline-flex rounded-md shadow-xs" ref="groupRef">
-    <slot></slot>
+  <div ref="groupRef" class="inline-flex rounded-md shadow-xs">
+    <slot />
   </div>
 </template>
 

package/src/components/SparkCard.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="divide-y divide-gray-300 rounded-lg border border-gray-300 text-gray-700 bg-gray-100">
+  <div
+    class="flex flex-col divide-y divide-gray-300 rounded-lg border border-gray-300 text-gray-700 bg-gray-100"
+  >
     <div v-if="$slots.header" class="px-[30px] py-5">
       <slot name="header" />
     </div>
 
-    <div :class="[props.padded ? props.paddedClass : '']">
-      <slot></slot>
+    <div :class="[props.padded ? props.paddedClass : '', 'min-h-0 flex-1']">
+      <slot />
     </div>
 
     <div v-if="$slots.footer" class="p-5">

package/src/components/SparkEntityBadge.vue

@@ -1,21 +1,17 @@
 <template>
   <component
     :is="isLink ? 'a' : 'span'"
+    v-spark-tooltip="tooltip"
     :href="resolvedHref || undefined"
     :target="isLink && openNew ? '_blank' : undefined"
     :rel="isLink && openNew ? 'noopener noreferrer' : undefined"
-    v-spark-tooltip="tooltip"
     class="inline-flex items-center gap-1 rounded-full font-medium whitespace-nowrap"
     :class="[variantClasses, sizeClasses, interactiveClasses]"
     @click="handleClick"
   >
     <font-awesome-icon v-if="icon" :icon="icon" />
     <slot>{{ label }}</slot>
-    <font-awesome-icon
-      v-if="copyToClipboard"
-      :icon="Icons.farCopy"
-      class="opacity-60"
-    />
+    <font-awesome-icon v-if="copyToClipboard" :icon="Icons.farCopy" class="opacity-60" />
     <font-awesome-icon
       v-else-if="isNavigable && openNew"
       :icon="Icons.farArrowUpRightFromSquare"
@@ -118,9 +114,7 @@ const sizeClasses = computed(() => SIZE_CLASSES[props.size] || SIZE_CLASSES.md)
 
 // --- Navigation ---
 
-const isNavigable = computed(
-  () => (props.routeName && props.entityId != null) || props.href,
-)
+const isNavigable = computed(() => (props.routeName && props.entityId != null) || props.href)
 const isInteractive = computed(() => isNavigable.value || props.copyToClipboard)
 const isLink = computed(() => isNavigable.value && !props.disabled)
 

package/src/components/SparkFileDragUpload.vue

@@ -70,16 +70,14 @@
     <!-- 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"
-        />
+        <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>
+    <p v-if="uploading && !showUploadButton" class="text-sm text-gray-500 mt-1">
+      {{ uploadingText }}
+    </p>
   </div>
 </template>
 
@@ -157,7 +155,13 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['upload-start', 'upload-success', 'upload-error', 'file-selected', 'file-cleared'])
+const emit = defineEmits([
+  'upload-start',
+  'upload-success',
+  'upload-error',
+  'file-selected',
+  'file-cleared',
+])
 
 const axios = inject('axios')
 const selectedFile = ref(null)
@@ -222,8 +226,8 @@ function handleFormKitInput(files) {
 function triggerFileDialog() {
   const el = formkitFileRef.value?.$el
   if (!el) return
-  const inputEl = el.querySelector('input[type="file"]')
-    || el.parentElement?.querySelector('input[type="file"]')
+  const inputEl =
+    el.querySelector('input[type="file"]') || el.parentElement?.querySelector('input[type="file"]')
   if (inputEl) {
     inputEl.click()
   }

package/src/components/SparkImageUpload.vue

@@ -6,7 +6,10 @@
         <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']"
+          :class="[
+            height,
+            'w-auto object-contain border border-gray-300 rounded-md cursor-pointer hover:opacity-80 transition-opacity',
+          ]"
         />
       </a>
       <button

package/src/components/SparkModalContainer.vue

@@ -2,34 +2,38 @@
   <TransitionRoot as="template" :show="sparkModalService.state.isVisible">
     <Dialog class="relative z-1000" @close="sparkModalService.hide">
       <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
+        as="template"
+        enter="ease-out duration-300"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="ease-in duration-200"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
       >
         <div class="fixed inset-0 bg-gray-500/75 transition-opacity" />
       </TransitionChild>
 
       <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <div
+          class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+        >
           <TransitionChild
-              as="template"
-              enter="ease-out duration-300"
-              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enter-to="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leave-from="opacity-100 translate-y-0 sm:scale-100"
-              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:min-w-lg sm:max-w-max">
+            <DialogPanel
+              class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:min-w-lg sm:max-w-max"
+            >
               <!-- Render dynamic component -->
               <component
-                  :is="sparkModalService.state.content"
-                  v-bind="sparkModalService.state.props"
-                  v-on="sparkModalService.state.eventHandlers"
+                :is="sparkModalService.state.content"
+                v-bind="sparkModalService.state.props"
+                v-on="sparkModalService.state.eventHandlers"
               />
             </DialogPanel>
           </TransitionChild>

package/src/components/SparkModalDialog.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="px-4 pt-5 pb-4 sm:p-6">
     <!-- Icon -->
-    <div v-if="iconToUse" class="mx-auto flex size-12 items-center justify-center rounded-full" :class="iconBgClass">
+    <div
+      v-if="iconToUse"
+      class="mx-auto flex size-12 items-center justify-center rounded-full"
+      :class="iconBgClass"
+    >
       <font-awesome-icon :icon="Icons[iconToUse]" class="h-5 w-5" :class="iconTextClass" />
     </div>
 
@@ -20,14 +24,14 @@
 
     <!-- Actions -->
     <div class="mt-5 sm:mt-6" :class="buttonContainerClass">
-      <spark-button
-          v-for="(button, index) in buttonsToShow"
-          :key="index"
-          :variant="button.variant"
-          @click="$emit(button.event, button)"
+      <SparkButton
+        v-for="(button, index) in buttonsToShow"
+        :key="index"
+        :variant="button.variant"
+        @click="$emit(button.event, button)"
       >
         {{ button.text }}
-      </spark-button>
+      </SparkButton>
     </div>
   </div>
 </template>
@@ -35,7 +39,7 @@
 <script setup>
 import { computed } from 'vue'
 import { Icons } from '@/plugins/fontawesome'
-import { SparkButton } from "./index.js";
+import { SparkButton } from './index.js'
 
 const props = defineProps({
   title: {
@@ -57,16 +61,31 @@ const props = defineProps({
   },
   buttons: {
     type: Array,
-    default: () => [
-      { text: 'OK', variant: 'primary', event: 'ok' }
-    ],
+    default: () => [{ text: 'OK', variant: 'primary', event: 'ok' }],
   },
 })
 
 defineEmits([
-  'ok', 'confirm', 'cancel', 'close', 'save', 'discard', 'delete',
-  'approve', 'reject', 'submit', 'reset', 'continue', 'retry',
-  'edit', 'view', 'download', 'upload', 'share', 'copy', 'input'
+  'ok',
+  'confirm',
+  'cancel',
+  'close',
+  'save',
+  'discard',
+  'delete',
+  'approve',
+  'reject',
+  'submit',
+  'reset',
+  'continue',
+  'retry',
+  'edit',
+  'view',
+  'download',
+  'upload',
+  'share',
+  'copy',
+  'input',
 ])
 
 const buttonsToShow = computed(() => {
@@ -82,11 +101,11 @@ const buttonContainerClass = computed(() => {
     case 1:
       return 'sm:grid sm:grid-flow-row-dense'
     case 2:
-      return 'sm:grid sm:grid-cols-2 sm:gap-3';
+      return 'sm:grid sm:grid-cols-2 sm:gap-3'
     case 3:
-      return 'sm:grid sm:grid-cols-3 sm:gap-3';
+      return 'sm:grid sm:grid-cols-3 sm:gap-3'
     default:
-      return 'flex flex-col gap-3';
+      return 'flex flex-col gap-3'
   }
 })
 

package/src/components/SparkNotificationOutlet.vue

@@ -18,8 +18,8 @@
       @mouseleave="handleMouseLeave"
     >
       <component
-        v-if="outlet.state.component"
         :is="outlet.state.component"
+        v-if="outlet.state.component"
         v-bind="outlet.state.props"
       />
       <template v-else>

package/src/components/SparkOverlay.vue

@@ -1,39 +1,35 @@
 <template>
   <TransitionRoot :show="overlayInstance.state.isVisible" as="template">
-    <Dialog
-        :initialFocus="panelRef"
-        class="relative z-1000"
-        @close="handleClose"
-    >
+    <Dialog :initial-focus="panelRef" class="relative z-1000" @close="handleClose">
       <TransitionChild
-          as="template"
-          enter="transition-opacity ease-linear duration-150"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="transition-opacity ease-linear duration-150"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
+        as="template"
+        enter="transition-opacity ease-linear duration-150"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="transition-opacity ease-linear duration-150"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
       >
         <div class="fixed inset-0 bg-gray-600/30" />
       </TransitionChild>
 
       <div class="fixed inset-0 flex">
         <TransitionChild
-            as="template"
-            enter="transition ease-in-out duration-150 transform"
-            :enter-from="
+          as="template"
+          enter="transition ease-in-out duration-150 transform"
+          :enter-from="
             position === 'left' ? '-translate-x-full opacity-0' : 'translate-x-full opacity-0'
           "
-            enter-to="translate-x-0 opacity-100"
-            leave="transition ease-in-out duration-150 transform"
-            leave-from="translate-x-0 opacity-100"
-            :leave-to="
+          enter-to="translate-x-0 opacity-100"
+          leave="transition ease-in-out duration-150 transform"
+          leave-from="translate-x-0 opacity-100"
+          :leave-to="
             position === 'left' ? '-translate-x-full opacity-0' : 'translate-x-full opacity-0'
           "
         >
           <DialogPanel
-              ref="panelRef"
-              :class="[
+            ref="panelRef"
+            :class="[
               'flex py-2.5',
               widthClass,
               position === 'left' ? 'relative left-[10px]' : 'absolute right-[10px] h-full',
@@ -41,9 +37,9 @@
           >
             <!-- Bind props and event handlers dynamically -->
             <component
-                :is="overlayInstance.state.content"
-                v-bind="overlayInstance.state.props"
-                v-on="overlayInstance.state.eventHandlers"
+              :is="overlayInstance.state.content"
+              v-bind="overlayInstance.state.props"
+              v-on="overlayInstance.state.eventHandlers"
             />
           </DialogPanel>
         </TransitionChild>

package/src/components/SparkSubNav.vue

@@ -20,16 +20,9 @@
         :disabled="isItemDisabled(item)"
         @click="handleNavigate(item)"
       >
-        <FontAwesomeIcon
-          v-if="item.icon"
-          :icon="Icons[item.icon]"
-          class="mr-1.5 size-4"
-        />
+        <FontAwesomeIcon v-if="item.icon" :icon="Icons[item.icon]" class="mr-1.5 size-4" />
         {{ item.label }}
-        <span
-          v-if="item.badge != null"
-          :class="getBadgeClasses(item)"
-        >
+        <span v-if="item.badge != null" :class="getBadgeClasses(item)">
           {{ item.badge }}
         </span>
       </SparkButton>
@@ -58,10 +51,7 @@
           :class="iconClasses"
         />
         <span>{{ item.label }}</span>
-        <span
-          v-if="item.badge != null"
-          :class="getBadgeClasses(item)"
-        >
+        <span v-if="item.badge != null" :class="getBadgeClasses(item)">
           {{ item.badge }}
         </span>
       </button>
@@ -261,6 +251,9 @@ function getBadgeClasses(item) {
     danger: 'bg-red-100 text-red-700',
   }
 
-  return ['ml-2 px-2 py-0.5 text-xs font-medium rounded-full', variants[variant] || variants.primary]
+  return [
+    'ml-2 px-2 py-0.5 text-xs font-medium rounded-full',
+    variants[variant] || variants.primary,
+  ]
 }
 </script>