@wishbone-media/spark 1.0.0 → 1.2.0

package/package.json

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

package/src/components/SparkButton.vue

@@ -18,8 +18,8 @@ defineEmits(['click'])
 const props = defineProps({
   size: {
     type: String,
-    default: 'md',
-    validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value),
+    default: undefined,
+    validator: (value) => value === undefined || ['xs', 'sm', 'md', 'lg', 'xl'].includes(value),
   },
   variant: {
     type: String,
@@ -37,6 +37,8 @@ const props = defineProps({
 
 const buttonRef = ref(null)
 const buttonGroup = inject('buttonGroup', null)
+const headerContext = inject('sparkCardHeaderContext', null)
+const effectiveSize = computed(() => props.size ?? headerContext?.buttonSize ?? 'md')
 
 const groupPosition = computed(() => {
   if (!buttonGroup?.isInGroup || !buttonRef.value) return null
@@ -91,7 +93,7 @@ const computedButtonClass = computed(() => {
   let classes = 'cursor-pointer'
   let roundingSize = ''
 
-  switch (props.size) {
+  switch (effectiveSize.value) {
     case 'xs':
       classes += ' px-4 py-1 text-xs'
       roundingSize = 'sm'

package/src/components/SparkCard.vue

@@ -10,39 +10,52 @@
       <slot name="header" />
     </div>
 
-    <div
-      v-else-if="hasDefaultHeader"
-      :class="[
-        'flex h-20 items-stretch justify-between gap-4 border-b border-gray-300 px-5',
-        props.headerClass,
-      ]"
-    >
-      <div 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 v-if="$slots.nav" class="flex self-stretch items-stretch">
-          <slot name="nav" />
+    <HeaderContext v-else-if="hasDefaultHeader">
+      <div
+        :class="[
+          'flex h-20 items-stretch justify-between gap-2.5 border-b border-gray-300 px-5',
+          props.headerClass,
+        ]"
+      >
+        <div class="flex min-w-0 items-center gap-3">
+          <SparkButton
+            v-if="props.backTo"
+            variant="secondary"
+            size="sm"
+            button-class="w-[34px] h-[34px] 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 font-semibold leading-6 text-gray-800">
+            {{ props.title }}
+          </h3>
+          <slot name="title-extra" />
+          <div v-if="$slots.nav" class="flex self-stretch items-stretch">
+            <slot name="nav" />
+          </div>
+          <div
+            v-if="$slots['header-left']"
+            class="flex items-center gap-2.5 text-sm text-gray-700 [&_.formkit-outer]:!mb-0"
+          >
+            <slot name="header-left" />
+          </div>
         </div>
-      </div>
 
-      <div v-if="$slots.meta || $slots.actions" class="flex shrink-0 items-center gap-4">
-        <slot name="meta" />
-        <slot name="actions" />
+        <div
+          v-if="$slots['header-right'] || $slots.actions"
+          class="flex shrink-0 items-center gap-2.5"
+        >
+          <div
+            v-if="$slots['header-right']"
+            class="flex items-center gap-2.5 text-sm text-gray-700 [&_.formkit-outer]:!mb-0"
+          >
+            <slot name="header-right" />
+          </div>
+          <slot name="actions" />
+        </div>
       </div>
-    </div>
+    </HeaderContext>
 
     <div
       ref="bodyEl"
@@ -59,12 +72,19 @@
 </template>
 
 <script setup>
-import { computed, ref, useSlots } from 'vue'
+import { computed, defineComponent, provide, 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 HeaderContext = defineComponent({
+  setup(_, { slots }) {
+    provide('sparkCardHeaderContext', { buttonSize: 'xl' })
+    return () => slots.default?.()
+  },
+})
+
 const props = defineProps({
   padded: {
     type: Boolean,
@@ -95,8 +115,8 @@ const props = defineProps({
     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.
+  // the #header slot; combine with backTo and the named/catch-all slots.
+  // The #header slot overrides the default header entirely.
   title: {
     type: String,
     default: null,
@@ -114,7 +134,13 @@ const bodyEl = ref(null)
 
 const hasDefaultHeader = computed(() =>
   Boolean(
-    props.title || props.backTo || slots['title-extra'] || slots.nav || slots.meta || slots.actions,
+    props.title ||
+    props.backTo ||
+    slots['title-extra'] ||
+    slots.nav ||
+    slots['header-left'] ||
+    slots['header-right'] ||
+    slots.actions,
   ),
 )
 

package/src/components/SparkSubNav.vue

@@ -220,10 +220,10 @@ function getItemClasses(item) {
 
 // Tabs layout (underline style)
 function getTabsClasses(isActive, isDisabled) {
-  const classes = ['border-b-2 -mb-px rounded-t font-medium']
+  const classes = ['border-b-2 -mb-2px rounded-t font-medium']
 
   // Size classes
-  const sizeClasses = props.compact ? 'text-sm px-3 py-1.5' : 'text-sm px-8 py-4'
+  const sizeClasses = props.compact ? 'text-sm px-3 py-1.5' : 'text-sm px-5 py-4'
   classes.push(sizeClasses)
 
   if (isActive) {
@@ -241,7 +241,7 @@ function getTabsClasses(isActive, isDisabled) {
 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')
+  classes.push(props.compact ? 'text-sm px-3 py-1.5' : 'text-sm px-4 py-2.5')
 
   if (isActive) {
     classes.push('border-gray-300 bg-white text-gray-900')