sprintify-ui 0.1.10 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -39,7 +39,7 @@
     "vue-router": "^4.0.0"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.7.9",
+    "@headlessui/vue": "^1.7.12",
     "color2k": "^2.0.2"
   },
   "devDependencies": {

package/src/components/BaseActionItemButton.vue

@@ -4,7 +4,7 @@
     :href="action.href"
     :action="action.action"
     :class="classes"
-    class="flex items-center"
+    class="flex items-center justify-center"
   >
     <BaseIcon
       v-if="action.icon"

package/src/components/BaseHeader.vue

@@ -3,37 +3,36 @@
     <BaseBreadcrumbs
       v-if="breadcrumbs"
       :breadcrumbs="breadcrumbs"
-      :class="[attributes || subtitle ? 'mb-3' : 'mb-2']"
-    ></BaseBreadcrumbs>
+      class="mb-2"
+    />
+
     <div class="lg:flex lg:items-center lg:justify-between">
       <div class="min-w-0 flex-1">
-        <div
-          class="flex flex-wrap items-center"
-          :class="[compactLayout ? 'gap-2' : 'gap-3']"
-        >
+        <div class="flex flex-col xs:flex-row xs:flex-wrap xs:items-center">
           <h2
-            class="font-bold text-slate-900"
+            class="order-2 font-bold text-slate-900 xs:order-1"
             :class="[
               compactLayout
-                ? 'text-2xl leading-7'
-                : 'truncate text-3xl tracking-tight',
+                ? 'mr-2 text-2xl leading-7'
+                : 'mr-3 truncate text-3xl tracking-tight',
             ]"
           >
             {{ title }}
           </h2>
 
-          <BaseBadge
-            v-if="badge"
-            :color="badge.color"
-            :icon="badge.icon"
-            class="relative -bottom-px"
-          >
-            {{ badge.label }}
-          </BaseBadge>
+          <div v-if="badge" class="order-1 mb-1 xs:order-2 xs:mb-0">
+            <BaseBadge
+              :color="badge.color"
+              :icon="badge.icon"
+              class="relative xs:-bottom-[2px]"
+            >
+              {{ badge.label }}
+            </BaseBadge>
+          </div>
         </div>
         <h3
           v-if="subtitle"
-          class="mt-0.5 leading-tight text-slate-500"
+          class="mt-1 leading-tight text-slate-500"
           :class="[compactLayout ? 'text-sm' : 'truncate text-base']"
         >
           {{ subtitle }}
@@ -70,7 +69,7 @@
         />
 
         <BaseMenu
-          v-if="secondaryActions.length"
+          v-if="secondaryActions.length > 1"
           :items="secondaryActions"
           size="sm"
           position="bottom-right"
@@ -88,6 +87,11 @@
             </div>
           </template>
         </BaseMenu>
+        <BaseActionItemButton
+          v-else-if="secondaryActions.length === 1"
+          :action="secondaryActions[0]"
+          size="sm"
+        />
       </div>
 
       <div v-else class="mt-5 flex gap-2 lg:mt-0 lg:ml-4">
@@ -131,13 +135,21 @@ const props = withDefaults(
 );
 
 const primaryActionIndex = computed(() => {
-  if (!props.actions) {
+  if (!props.actions || props.actions.length === 0) {
     return undefined;
   }
+
   if (props.actions?.length === 1) {
     return 0;
   }
-  return props.actions?.findIndex((a) => a.color == 'primary');
+
+  const primaryIndex = props.actions?.findIndex((a) => a.color == 'primary');
+
+  if (primaryIndex !== -1) {
+    return primaryIndex;
+  }
+
+  return 0;
 });
 
 const primaryAction = computed(() => {
@@ -147,7 +159,7 @@ const primaryAction = computed(() => {
 
   const index = primaryActionIndex.value;
 
-  if (index) {
+  if (index !== undefined) {
     return props.actions[index];
   }