@wishbone-media/spark 0.51.0 → 0.53.0

package/package.json

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

package/src/components/SparkCard.vue

@@ -1,33 +1,92 @@
 <template>
   <div
-    class="flex flex-col divide-y divide-gray-300 rounded-lg border border-gray-300 text-gray-700 bg-gray-100"
+    class="flex flex-col rounded-lg border border-gray-300 text-gray-700 bg-gray-100"
+    :class="props.scrollBody ? 'min-h-0' : ''"
   >
-    <div v-if="$slots.header" class="px-[30px] py-5">
+    <div
+      v-if="$slots.header"
+      :class="['border-b border-gray-300 px-[30px] py-5', props.headerClass]"
+    >
       <slot name="header" />
     </div>
 
-    <div :class="[props.padded ? props.paddedClass : '', 'min-h-0 flex-1', props.bodyClass]">
+    <div
+      v-else-if="hasDefaultHeader"
+      :class="[
+        'border-b border-gray-300',
+        $slots.nav
+          ? 'flex items-stretch justify-between gap-4 px-6'
+          : 'flex items-center justify-between gap-4 px-6 py-4',
+        props.headerClass,
+      ]"
+    >
+      <!-- Left cluster: tab nav replaces back/title/extra when provided -->
+      <div v-if="$slots.nav" class="flex min-w-0 items-stretch">
+        <slot name="nav" />
+      </div>
+      <div v-else class="flex min-w-0 items-center gap-3">
+        <SparkButton
+          v-if="props.backTo"
+          variant="secondary"
+          button-class="w-10 h-10 grid place-content-center"
+          @click="router?.push(props.backTo)"
+        >
+          <FontAwesomeIcon :icon="Icons.farChevronLeft" class="text-gray-500" />
+        </SparkButton>
+        <h3
+          v-if="props.title"
+          class="min-w-0 truncate text-xl font-semibold leading-6 text-gray-800"
+        >
+          {{ props.title }}
+        </h3>
+        <slot name="title-extra" />
+      </div>
+
+      <!-- Right cluster: metadata then actions -->
+      <div
+        v-if="$slots.meta || $slots.actions"
+        class="flex shrink-0 items-center gap-4"
+        :class="$slots.nav ? 'py-3' : ''"
+      >
+        <slot name="meta" />
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <div
+      ref="bodyEl"
+      :class="[
+        props.padded ? props.paddedClass : '',
+        'min-h-0 flex-1',
+        props.scrollBody ? 'overflow-y-auto' : '',
+        props.bodyClass,
+      ]"
+    >
       <slot />
     </div>
 
-    <div v-if="$slots.footer" class="p-5">
+    <div v-if="$slots.footer" :class="['border-t border-gray-300 p-5', props.footerClass]">
       <slot name="footer" />
     </div>
   </div>
 </template>
 
 <script setup>
+import { computed, ref, useSlots } from 'vue'
+import { useRouter } from 'vue-router'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { Icons } from '../plugins/fontawesome.js'
+import SparkButton from './SparkButton.vue'
+
 const props = defineProps({
   padded: {
     type: Boolean,
     default: true,
   },
-
   paddedClass: {
     type: String,
     default: 'p-5',
   },
-
   // Extra classes for the body wrapper, e.g. 'flex flex-col' so slot content
   // can use flex-1/min-h-0 for bounded-height (internally scrolling) layouts.
   // The wrapper is a plain block by default; child flex-item utilities are
@@ -36,5 +95,51 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  // Bounded-height card: the body scrolls internally instead of growing the
+  // card. Sizing stays on the consumer ('min-h-0 flex-1' in a flex column;
+  // width classes + stretch in a flex row) — see spark-card.md "Fill layout".
+  scrollBody: {
+    type: Boolean,
+    default: false,
+  },
+  // Extra classes for whichever header wrapper renders (slot or default).
+  headerClass: {
+    type: String,
+    default: '',
+  },
+  // Extra classes for the footer wrapper.
+  footerClass: {
+    type: String,
+    default: '',
+  },
+  // Default header: main heading text. Renders the header without needing
+  // the #header slot; combine with backTo and the title-extra/nav/meta/actions
+  // slots. The #header slot overrides the default header entirely.
+  title: {
+    type: String,
+    default: null,
+  },
+  // Default header: route location for the standard back (chevron) button.
+  backTo: {
+    type: [Object, String],
+    default: null,
+  },
 })
+
+const slots = useSlots()
+const router = useRouter()
+const bodyEl = ref(null)
+
+const hasDefaultHeader = computed(() =>
+  Boolean(
+    props.title || props.backTo || slots['title-extra'] || slots.nav || slots.meta || slots.actions,
+  ),
+)
+
+// Reset the body's internal scroll (e.g. on tab changes within a scrollBody card)
+function scrollBodyToTop() {
+  if (bodyEl.value) bodyEl.value.scrollTop = 0
+}
+
+defineExpose({ scrollBodyToTop })
 </script>

package/src/components/SparkModalContainer.vue

@@ -1,6 +1,8 @@
 <template>
   <TransitionRoot as="template" :show="sparkModalService.state.isVisible">
-    <Dialog class="relative z-1000" @close="sparkModalService.hide">
+    <!-- Headless UI emits close with a payload (false); call hide() without it
+         so a backdrop/ESC dismiss resolves the show() promise with null -->
+    <Dialog class="relative z-1000" @close="() => sparkModalService.hide()">
       <TransitionChild
         as="template"
         enter="ease-out duration-300"

package/src/components/SparkNotificationOutlet.vue

@@ -10,6 +10,7 @@
   >
     <SparkAlert
       v-if="outlet.state.isVisible"
+      ref="alertRef"
       :key="notificationKey"
       :type="outlet.state.type"
       :closeable="outlet.state.closeable"
@@ -30,7 +31,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch, onMounted } from 'vue'
+import { computed, nextTick, ref, watch, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { sparkNotificationService } from '@/composables/sparkNotificationService'
 import SparkAlert from '@/components/SparkAlert.vue'
@@ -71,6 +72,18 @@ watch(
   { immediate: true },
 )
 
+// Reveal the outlet when a notification appears — scrolls whichever ancestor
+// scrolls (window or a scrollBody card), replacing window-level scrollTo calls
+const alertRef = ref(null)
+watch(
+  () => [outlet.value.state.isVisible, notificationKey.value],
+  async ([isVisible]) => {
+    if (!isVisible) return
+    await nextTick()
+    alertRef.value?.$el?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+  },
+)
+
 // On mount, check if notification was shown on a different route
 onMounted(() => {
   if (!props.clearOnRouteChange) return

package/src/components/SparkSubNav.vue

@@ -2,7 +2,7 @@
   <nav :class="containerClasses">
     <!-- Custom layout slot -->
     <slot
-      v-if="props.layout === 'custom'"
+      v-if="layout === 'custom'"
       :items="computedItems"
       :active-id="computedActiveId"
       :is-active="isItemActive"
@@ -11,7 +11,7 @@
     />
 
     <!-- Horizontal: SparkButtonGroup -->
-    <SparkButtonGroup v-else-if="props.layout === 'horizontal'" class="isolate">
+    <SparkButtonGroup v-else-if="layout === 'horizontal'" class="isolate">
       <SparkButton
         v-for="item in computedItems"
         :key="item.id"
@@ -39,13 +39,13 @@
       >
         <!-- Active checkmark icon for vertical layout -->
         <FontAwesomeIcon
-          v-if="isItemActive(item) && props.layout === 'vertical'"
+          v-if="isItemActive(item) && layout === 'vertical'"
           :icon="Icons.farCircleCheck"
           class="mr-2 size-4"
         />
         <!-- Item icon (not for vertical active state) -->
         <FontAwesomeIcon
-          v-if="item.icon && !(isItemActive(item) && props.layout === 'vertical')"
+          v-if="item.icon && !(isItemActive(item) && layout === 'vertical')"
           :icon="Icons[item.icon]"
           class="text-gray-400 mr-2"
           :class="iconClasses"
@@ -86,15 +86,20 @@ const props = defineProps({
 
   /**
    * Layout style
-   * - 'tabs': Underline-style tabs (for card body)
+   * - 'underline': Underline tabs; the active underline overlaps the card divider
+   *   when used in SparkCard's #nav header slot ('tabs' is a legacy alias)
+   * - 'button': Plain-text items; the active item renders as a white bordered button
+   * - 'button-group': SparkButtonGroup of buttons ('horizontal' is a legacy alias)
    * - 'vertical': Vertical sidebar links
-   * - 'horizontal': SparkButtonGroup with buttons
    * - 'custom': Use scoped slot for full control
    */
   layout: {
     type: String,
     default: 'tabs',
-    validator: (v) => ['tabs', 'vertical', 'horizontal', 'custom'].includes(v),
+    validator: (v) =>
+      ['tabs', 'underline', 'vertical', 'horizontal', 'button-group', 'button', 'custom'].includes(
+        v,
+      ),
   },
 
   /**
@@ -116,6 +121,10 @@ const props = defineProps({
 
 const emit = defineEmits(['navigate', 'update:activeId'])
 
+// Legacy layout aliases kept for back-compat; docs teach the new names
+const LAYOUT_ALIASES = { underline: 'tabs', 'button-group': 'horizontal' }
+const layout = computed(() => LAYOUT_ALIASES[props.layout] ?? props.layout)
+
 // Compute items from navInstance or props
 const computedItems = computed(() => {
   if (props.navInstance) {
@@ -168,12 +177,13 @@ async function handleNavigate(item) {
 const containerClasses = computed(() => {
   const base = 'spark-sub-nav'
   const layoutClasses = {
-    tabs: 'flex items-center gap-1 -mb-px',
+    tabs: 'flex items-stretch gap-1 -mb-px',
+    button: 'flex items-center gap-2',
     vertical: 'flex flex-col gap-1',
     horizontal: '', // SparkButtonGroup handles its own styling
     custom: '',
   }
-  return [base, layoutClasses[props.layout]]
+  return [base, layoutClasses[layout.value]]
 })
 
 // Icon classes
@@ -197,9 +207,11 @@ function getItemClasses(item) {
   }
 
   // Layout-specific styles
-  if (props.layout === 'tabs') {
+  if (layout.value === 'tabs') {
     base.push(...getTabsClasses(isActive, isDisabled))
-  } else if (props.layout === 'vertical') {
+  } else if (layout.value === 'button') {
+    base.push(...getButtonClasses(isActive, isDisabled))
+  } else if (layout.value === 'vertical') {
     base.push(...getVerticalClasses(isActive, isDisabled))
   }
 
@@ -225,6 +237,23 @@ function getTabsClasses(isActive, isDisabled) {
   return classes
 }
 
+// Button layout (active item = white bordered button, inactive = plain text)
+function getButtonClasses(isActive, isDisabled) {
+  const classes = ['rounded-lg border font-medium']
+
+  classes.push(props.compact ? 'text-sm px-3 py-1.5' : 'text-sm px-4 py-2')
+
+  if (isActive) {
+    classes.push('border-gray-300 bg-white text-gray-900')
+  } else if (!isDisabled) {
+    classes.push('border-transparent text-gray-600 hover:text-gray-900')
+  } else {
+    classes.push('border-transparent text-gray-400')
+  }
+
+  return classes
+}
+
 // Vertical layout (simplified with checkmark)
 function getVerticalClasses(isActive, isDisabled) {
   const classes = ['font-medium text-[15px]/[20px] py-2']

package/src/composables/sparkModalService.js

@@ -9,18 +9,40 @@ class SparkModalService {
       props: {},
       eventHandlers: {},
     })
+    this._resolveShow = null
   }
 
+  /**
+   * Show a modal with a custom component.
+   *
+   * @param {Object} component - Vue component to render inside the modal
+   * @param {Object} [props] - Props passed to the component
+   * @param {Object} [eventHandlers] - Event handlers bound to the component
+   * @returns {Promise<any>} - Resolves when the modal closes: with the value
+   *   passed to hide(result), or null on a plain hide() / backdrop / ESC dismiss
+   */
   show = (component, props = {}, eventHandlers = {}) => {
+    this._resolveShow?.(null) // a new modal supersedes a still-pending one
     this.state.content = markRaw(component)
     this.state.props = props
     this.state.eventHandlers = eventHandlers
     this.state.isVisible = true
+    return new Promise((resolve) => {
+      this._resolveShow = resolve
+    })
   }
 
-  hide = () => {
+  /**
+   * Close the current modal, resolving the pending show() promise.
+   *
+   * @param {any} [result=null] - Value the show() promise resolves with
+   */
+  hide = (result = null) => {
     this.state.isVisible = false
     this.state.eventHandlers = {}
+    const resolve = this._resolveShow
+    this._resolveShow = null
+    resolve?.(result)
   }
 
   /**
@@ -33,42 +55,37 @@ class SparkModalService {
    * @param {string} [options.confirmText='Confirm'] - Confirm button text
    * @param {string} [options.cancelText='Cancel'] - Cancel button text
    * @param {string} [options.confirmVariant='primary'] - Confirm button variant
-   * @returns {Promise<boolean>} - Resolves to true if confirmed, false if cancelled
+   * @returns {Promise<boolean>} - Resolves to true if confirmed, false if
+   *   cancelled or dismissed (backdrop / ESC)
    */
-  confirm = (options = {}) => {
-    return new Promise((resolve) => {
-      const {
-        title = 'Confirm',
-        message = 'Are you sure?',
-        type = 'warning',
-        confirmText = 'Confirm',
-        cancelText = 'Cancel',
-        confirmVariant = 'primary',
-      } = options
+  confirm = async (options = {}) => {
+    const {
+      title = 'Confirm',
+      message = 'Are you sure?',
+      type = 'warning',
+      confirmText = 'Confirm',
+      cancelText = 'Cancel',
+      confirmVariant = 'primary',
+    } = options
 
-      this.show(
-        SparkModalDialog,
-        {
-          title,
-          message,
-          type,
-          buttons: [
-            { text: confirmText, variant: confirmVariant, event: 'confirm' },
-            { text: cancelText, variant: 'secondary', event: 'cancel' },
-          ],
-        },
-        {
-          confirm: () => {
-            this.hide()
-            resolve(true)
-          },
-          cancel: () => {
-            this.hide()
-            resolve(false)
-          },
-        },
-      )
-    })
+    const result = await this.show(
+      SparkModalDialog,
+      {
+        title,
+        message,
+        type,
+        buttons: [
+          { text: confirmText, variant: confirmVariant, event: 'confirm' },
+          { text: cancelText, variant: 'secondary', event: 'cancel' },
+        ],
+      },
+      {
+        confirm: () => this.hide(true),
+        cancel: () => this.hide(false),
+      },
+    )
+
+    return Boolean(result)
   }
 }
 

package/src/composables/useFormSubmission.js

@@ -111,19 +111,19 @@ export function useFormSubmission(options = {}) {
         }
 
         if (setFormErrors) {
+          // The notification outlet reveals itself on show (scrollIntoView)
           sparkNotificationService.show({
             type: 'danger',
             message: getFormLevelMessage(response),
           })
-          window.scrollTo({ top: 0, behavior: 'smooth' })
         }
       } else {
         // Handle non-validation errors
+        // The notification outlet reveals itself on show (scrollIntoView)
         sparkNotificationService.show({
           type: 'danger',
           message: getFormLevelMessage(response),
         })
-        window.scrollTo({ top: 0, behavior: 'smooth' })
       }
 
       return { success: false, data: null, error }

package/src/containers/SparkDefaultContainer.vue

@@ -162,7 +162,7 @@
       </div>
     </div>
 
-    <main class="mr-[10px] pb-[10px] flex-1 flex flex-col">
+    <main class="mr-[10px] pb-[10px] flex-1 min-h-0 flex flex-col">
       <router-view />
     </main>
   </div>