@wishbone-media/spark 0.2.2 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -9,16 +9,16 @@
     "src"
   ],
   "peerDependencies": {
-    "@headlessui/vue": "^1.7.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/pro-regular-svg-icons": "^6.7.2",
-    "pinia": "^3.0.3",
-    "vue": "^3.5.16"
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/pro-regular-svg-icons": "^7.1.0",
+    "@headlessui/vue": "^1.7.23",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.24"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.4",
-    "vite": "^6.3.5",
-    "vue": "^3.5.16"
+    "@vitejs/plugin-vue": "^6.0.2",
+    "vite": "^7.2.2",
+    "vue": "^3.5.24"
   },
   "packageManager": "pnpm@10.11.1",
   "scripts": {
@@ -33,5 +33,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@wishbone-media/spark": "file:"
   }
 }

package/src/components/SparkButton.vue

@@ -0,0 +1,162 @@
+<template>
+  <button
+    type="button"
+    ref="buttonRef"
+    :class="computedButtonClass"
+    :disabled="disabled"
+    @click="$emit('click')"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script setup>
+import { computed, inject, ref } from 'vue'
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value),
+  },
+  variant: {
+    type: String,
+    default: 'primary',
+  },
+  buttonClass: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const buttonRef = ref(null)
+const buttonGroup = inject('buttonGroup', null)
+
+const groupPosition = computed(() => {
+  if (!buttonGroup?.isInGroup || !buttonRef.value) return null
+
+  const index = buttonGroup.getButtonIndex(buttonRef.value)
+  const total = buttonGroup.getButtonCount()
+
+  return {
+    isFirst: index === 0,
+    isLast: index === total - 1,
+    index,
+    total,
+  }
+})
+
+const CONFLICT_GROUPS = {
+  paddingX: /^px-/,
+  paddingY: /^py-/,
+  paddingAll: /^p-/,
+  marginX: /^mx-/,
+  marginY: /^my-/,
+  marginAll: /^m-/,
+  borderRadius: /^rounded-/,
+  background: /^bg-/,
+  text: /^text-(?!white|black)/,
+}
+
+const mergeClasses = (baseClasses, overrideClasses) => {
+  if (!overrideClasses) return baseClasses
+
+  const base = baseClasses.split(' ').filter(Boolean)
+  const overrides = overrideClasses.split(' ').filter(Boolean)
+
+  const filtered = base.filter((baseClass) => {
+    return !overrides.some((override) => {
+      const baseGroup = Object.entries(CONFLICT_GROUPS).find(([_, regex]) =>
+        regex.test(baseClass),
+      )?.[0]
+
+      const overrideGroup = Object.entries(CONFLICT_GROUPS).find(([_, regex]) =>
+        regex.test(override),
+      )?.[0]
+
+      return baseGroup && baseGroup === overrideGroup
+    })
+  })
+
+  return [...filtered, ...overrides].join(' ')
+}
+
+const computedButtonClass = computed(() => {
+  let classes = ''
+  let roundingSize = ''
+
+  switch (props.size) {
+    case 'xs':
+      classes += ' px-2 py-1 text-xs'
+      roundingSize = 'sm'
+      break
+    case 'sm':
+      classes += ' px-2 py-1 text-sm'
+      roundingSize = 'sm'
+      break
+    case 'md':
+      classes += ' px-2.5 py-1.5 text-sm'
+      roundingSize = 'md'
+      break
+    case 'lg':
+      classes += ' px-3 py-2 text-sm'
+      roundingSize = 'md'
+      break
+    case 'xl':
+      classes += ' px-3.5 py-2.5 text-sm'
+      roundingSize = 'md'
+      break
+  }
+
+  if (buttonGroup?.isInGroup && groupPosition.value) {
+    const { isFirst, isLast } = groupPosition.value
+
+    classes += ` relative inline-flex items-center focus:z-10`
+
+    if (isFirst && isLast) {
+      // Single button in group
+      classes += ` rounded-${roundingSize}`
+    } else if (isFirst) {
+      classes += ` rounded-l-${roundingSize} rounded-r-none`
+    } else if (isLast) {
+      classes += ` rounded-r-${roundingSize} rounded-l-none -ml-px`
+    } else {
+      classes += ' rounded-none -ml-px'
+    }
+  } else {
+    classes += ` shadow-xs rounded-${roundingSize}`
+  }
+
+  switch (props.variant) {
+    case 'primary':
+      classes += ' bg-primary-600 hover:bg-primary-500 text-white'
+      break
+    case 'secondary':
+      classes += '  ring-1 ring-gray-300 ring-inset bg-white hover:bg-gray-50 text-gray-900'
+      break
+    case 'success':
+      classes += ' bg-green-600 hover:bg-green-500 text-white'
+      break
+    case 'warning':
+      classes += ' bg-amber-600 hover:bg-amber-500 text-white'
+      break
+    case 'danger':
+      classes += ' bg-red-600 hover:bg-red-500 text-white'
+      break
+    case 'info':
+      classes += ' bg-cyan-600 hover:bg-cyan-500 text-white'
+      break
+
+    default:
+      classes += ` bg-${props.variant}-600 hover:bg-${props.variant}-500 text-white`
+  }
+
+  classes = mergeClasses(classes, props.buttonClass)
+
+  return classes
+})
+</script>

package/src/components/SparkButtonGroup.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="inline-flex rounded-md shadow-xs" ref="groupRef">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { provide, ref } from 'vue'
+
+const groupRef = ref(null)
+
+const getButtonIndex = (buttonElement) => {
+  if (!groupRef.value) return -1
+  const buttons = Array.from(groupRef.value.children)
+  return buttons.indexOf(buttonElement)
+}
+
+const getButtonCount = () => {
+  return groupRef.value?.children.length || 0
+}
+
+provide('buttonGroup', {
+  isInGroup: true,
+  getButtonIndex,
+  getButtonCount,
+})
+</script>

package/src/components/SparkModalDialog.vue

@@ -20,16 +20,14 @@
 
     <!-- Actions -->
     <div class="mt-5 sm:mt-6" :class="buttonContainerClass">
-      <button
+      <spark-button
           v-for="(button, index) in buttonsToShow"
           :key="index"
-          type="button"
-          :class="getButtonClass(button, index)"
-          class="inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2"
+          :variant="button.variant"
           @click="$emit(button.event, button)"
       >
         {{ button.text }}
-      </button>
+      </spark-button>
     </div>
   </div>
 </template>
@@ -37,6 +35,7 @@
 <script setup>
 import { computed } from 'vue'
 import { Icons } from '@/plugins/fontawesome'
+import { SparkButton } from "./index.js";
 
 const props = defineProps({
   title: {
@@ -79,41 +78,18 @@ const buttonsToShow = computed(() => {
 })
 
 const buttonContainerClass = computed(() => {
-  const buttonCount = buttonsToShow.value.length
-  if (buttonCount === 2) {
-    return 'sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3'
-  } else if (buttonCount > 2) {
-    return 'flex flex-col gap-3'
+  switch (buttonsToShow.value.length) {
+    case 1:
+      return 'sm:grid sm:grid-flow-row-dense'
+    case 2:
+      return 'sm:grid sm:grid-cols-2 sm:gap-3';
+    case 3:
+      return 'sm:grid sm:grid-cols-3 sm:gap-3';
+    default:
+      return 'flex flex-col gap-3';
   }
-  return ''
 })
 
-const getButtonClass = (button, index) => {
-  const isPrimary = button.variant === 'primary'
-  const buttonCount = buttonsToShow.value.length
-
-  let baseClass = ''
-
-  // Position classes for 2-button layout
-  if (buttonCount === 2) {
-    if (isPrimary) {
-      baseClass = 'sm:col-start-2'
-    } else {
-      baseClass = 'mt-3 sm:col-start-1 sm:mt-0'
-    }
-  } else if (buttonCount > 2 && index > 0) {
-    baseClass = 'mt-3'
-  }
-
-  // Style classes
-  if (isPrimary) {
-    return `bg-primary-600 text-white hover:bg-primary-500 focus-visible:outline-primary-600 ${baseClass}`
-  } else {
-    // Secondary button style
-    return `bg-white text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 ${baseClass}`
-  }
-}
-
 const defaultIcons = {
   info: 'farInfoCircle',
   success: 'farCheckCircle',

package/src/components/index.js

@@ -1,6 +1,8 @@
 export { default as SparkAlert } from './SparkAlert.vue'
 export { default as SparkAppSelector } from './SparkAppSelector.vue'
 export { default as SparkBrandSelector } from './SparkBrandSelector.vue'
+export { default as SparkButton } from './SparkButton.vue'
+export { default as SparkButtonGroup } from './SparkButtonGroup.vue'
 export { default as SparkModalContainer } from './SparkModalContainer.vue'
 export { default as SparkModalDialog } from './SparkModalDialog.vue'
 export { default as SparkOverlay } from './SparkOverlay.vue'