sprintify-ui 0.1.9 → 0.1.11

package/dist/types/src/components/BaseHeader.vue.d.ts

@@ -1,35 +1,63 @@
 import { ActionItem, Breadcrumb } from '@/types';
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title: string;
     subtitle?: string | undefined;
     attributes?: {
         icon: string;
         label: string;
     }[] | undefined;
-    actions: ActionItem[];
-    badge: {
+    actions?: ActionItem[] | undefined;
+    badge?: {
         icon: string;
         label: string;
         color: string;
-    };
-    layout: 'default' | 'compact';
+    } | undefined;
+    layout?: "default" | "compact" | undefined;
     breadcrumbs?: Breadcrumb[] | undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}>, {
+    subtitle: undefined;
+    attributes: undefined;
+    actions: undefined;
+    badge: undefined;
+    layout: string;
+    breadcrumbs: undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title: string;
     subtitle?: string | undefined;
     attributes?: {
         icon: string;
         label: string;
     }[] | undefined;
+    actions?: ActionItem[] | undefined;
+    badge?: {
+        icon: string;
+        label: string;
+        color: string;
+    } | undefined;
+    layout?: "default" | "compact" | undefined;
+    breadcrumbs?: Breadcrumb[] | undefined;
+}>, {
+    subtitle: undefined;
+    attributes: undefined;
+    actions: undefined;
+    badge: undefined;
+    layout: string;
+    breadcrumbs: undefined;
+}>>>, {
+    attributes: {
+        icon: string;
+        label: string;
+    }[];
     actions: ActionItem[];
+    breadcrumbs: Breadcrumb[];
+    layout: 'default' | 'compact';
+    subtitle: string;
     badge: {
         icon: string;
         label: string;
         color: string;
     };
-    layout: 'default' | 'compact';
-    breadcrumbs?: Breadcrumb[] | undefined;
-}>>>, {}>;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -40,3 +68,8 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.1.9",
+  "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">
@@ -110,25 +114,64 @@ import BaseActionItemButton from './BaseActionItemButton.vue';
 import BaseBadge from './BaseBadge.vue';
 import BaseMenu from './BaseMenu.vue';
 
-const props = defineProps<{
-  title: string;
-  subtitle?: string;
-  attributes?: { icon: string; label: string }[];
-  actions: ActionItem[];
-  badge: { icon: string; label: string; color: string };
-  layout: 'default' | 'compact';
-  breadcrumbs?: Breadcrumb[];
-}>();
-
-const primaryActionIndex = computed(() =>
-  props.actions.findIndex((a) => a.color == 'primary')
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    subtitle?: string;
+    attributes?: { icon: string; label: string }[];
+    actions?: ActionItem[];
+    badge?: { icon: string; label: string; color: string };
+    layout?: 'default' | 'compact';
+    breadcrumbs?: Breadcrumb[];
+  }>(),
+  {
+    subtitle: undefined,
+    attributes: undefined,
+    actions: undefined,
+    badge: undefined,
+    layout: 'default',
+    breadcrumbs: undefined,
+  }
 );
 
-const primaryAction = computed(() => props.actions[primaryActionIndex.value]);
+const primaryActionIndex = computed(() => {
+  if (!props.actions || props.actions.length === 0) {
+    return undefined;
+  }
 
-const secondaryActions = computed(() =>
-  props.actions.filter((a, i) => i !== primaryActionIndex.value)
-);
+  if (props.actions?.length === 1) {
+    return 0;
+  }
+
+  const primaryIndex = props.actions?.findIndex((a) => a.color == 'primary');
+
+  if (primaryIndex !== -1) {
+    return primaryIndex;
+  }
+
+  return 0;
+});
+
+const primaryAction = computed(() => {
+  if (!props.actions) {
+    return undefined;
+  }
+
+  const index = primaryActionIndex.value;
+
+  if (index !== undefined) {
+    return props.actions[index];
+  }
+
+  return null;
+});
+
+const secondaryActions = computed(() => {
+  if (!props.actions) {
+    return [];
+  }
+  return props.actions?.filter((a, i) => i !== primaryActionIndex.value);
+});
 
 const baseHeaderRef = ref<HTMLElement | null>(null);