sprintify-ui 0.11.6 → 0.11.8

package/dist/sprintify-ui.es.js

@@ -24207,11 +24207,14 @@ const wI = ["onClick"], xI = ["onClick"], kI = { class: "px-1 py-1 h-full flex i
   setup(n) {
     const t = n, e = P(null), r = P(800);
     il(e, () => {
-      var i;
-      r.value = ((i = e.value) == null ? void 0 : i.clientWidth) ?? 800;
+      var s;
+      r.value = ((s = e.value) == null ? void 0 : s.clientWidth) ?? 800;
     });
     const o = S(() => t.layout === "compact" ? !0 : r.value < 500);
-    return (i, s) => (x(), $("div", {
+    async function i(s) {
+      await s();
+    }
+    return (s, l) => (x(), $("div", {
       ref_key: "baseHeaderRef",
       ref: e
     }, [
@@ -24227,9 +24230,9 @@ const wI = ["onClick"], xI = ["onClick"], kI = { class: "px-1 py-1 h-full flex i
             n.badge ? (x(), $("div", ZI, [
               ee(Vf, _t(n.badge, { class: "relative xs:-bottom-[2px]" }), {
                 default: J(() => {
-                  var l;
+                  var a;
                   return [
-                    Gt(se((l = n.badge) == null ? void 0 : l.label), 1)
+                    Gt(se((a = n.badge) == null ? void 0 : a.label), 1)
                   ];
                 }),
                 _: 1
@@ -24246,31 +24249,34 @@ const wI = ["onClick"], xI = ["onClick"], kI = { class: "px-1 py-1 h-full flex i
               g(o) ? "mt-2 flex-col" : "mt-2 flex-row flex-wrap space-x-4"
             ]])
           }, [
-            (x(!0), $(Re, null, Ge(n.attributes, (l) => (x(), oe(Ji, {
-              key: l.label + l.icon,
+            (x(!0), $(Re, null, Ge(n.attributes, (a) => (x(), oe(Ji, {
+              key: a.label + a.icon,
               class: "flex items-center gap-1.5",
-              visible: !!l.tooltip,
-              text: l.tooltip,
+              visible: !!a.tooltip,
+              text: a.tooltip,
               dark: "",
               delay: 400
             }, {
               default: J(() => [
-                (x(), oe(Wn(l.to ? "router-link" : l.href ? "a" : "div"), {
-                  to: l.to,
-                  href: l.href,
-                  class: "flex items-center gap-1.5"
+                (x(), oe(Wn(a.to ? "router-link" : a.href ? "a" : a.action ? "button" : "div"), {
+                  to: a.to,
+                  href: a.href,
+                  type: a.action && !a.to && !a.href ? "button" : void 0,
+                  target: a.target ?? void 0,
+                  class: "flex items-center gap-1.5",
+                  onClick: (u) => a.action && !a.to && !a.href ? i(a.action) : void 0
                 }, {
                   default: J(() => [
-                    l.icon ? (x(), oe(g(Je), {
+                    a.icon ? (x(), oe(g(Je), {
                       key: 0,
-                      icon: l.icon,
+                      icon: a.icon,
                       class: "h-4 w-4 shrink-0 text-slate-600",
                       "aria-hidden": "true"
                     }, null, 8, ["icon"])) : Z("", !0),
-                    I("span", eO, se(l.label), 1)
+                    I("span", eO, se(a.label), 1)
                   ]),
                   _: 2
-                }, 1032, ["to", "href"]))
+                }, 1032, ["to", "href", "type", "target", "onClick"]))
               ]),
               _: 2
             }, 1032, ["visible", "text"]))), 128))

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

@@ -1,19 +1,22 @@
 import { Breadcrumb, ActionItem } from '@/types';
 import BaseBadge from './BaseBadge.vue';
-import { RouteRecordRaw } from 'vue-router';
+import { RouteLocationRaw } from 'vue-router';
 type BaseBadgeProps = InstanceType<typeof BaseBadge>["$props"] & {
     label: string;
 };
+interface HeaderAttribute {
+    icon?: string;
+    label: string;
+    tooltip?: string;
+    to?: RouteLocationRaw;
+    href?: string;
+    action?: () => Promise<void> | void;
+    target?: string;
+}
 type __VLS_Props = {
     title: string;
     subtitle?: string;
-    attributes?: {
-        icon?: string;
-        label: string;
-        tooltip?: string;
-        to?: RouteRecordRaw;
-        href?: string;
-    }[];
+    attributes?: HeaderAttribute[];
     actions?: ActionItem[];
     badge?: BaseBadgeProps;
     layout?: 'default' | 'compact';
@@ -25,13 +28,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     maxActions: number;
     breadcrumbs: Breadcrumb[];
     layout: "default" | "compact";
-    attributes: {
-        icon?: string;
-        label: string;
-        tooltip?: string;
-        to?: RouteRecordRaw;
-        href?: string;
-    }[];
+    attributes: HeaderAttribute[];
     subtitle: string;
     badge: BaseBadgeProps;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.6",
+  "version": "0.11.8",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseHeader.stories.js

@@ -42,6 +42,25 @@ const attributes = [
     tooltip: "Anywhere",
     to: '/articles'
   },
+  {
+    label: 'URL',
+    icon: 'heroicons:link-solid',
+    href: 'https://example.com'
+  },
+  {
+    label: 'URL (new tab)',
+    icon: 'heroicons:link-solid',
+    href: 'https://example.com',
+    target: '_blank'
+  },
+  {
+    label: 'Action',
+    icon: 'heroicons:play-solid',
+    tooltip: 'Run action',
+    action() {
+      alert('Action');
+    }
+  }
 ];
 
 const actions = [

package/src/components/BaseHeader.vue

@@ -51,10 +51,13 @@
             :delay="400"
           >
             <component
-              :is="attribute.to ? 'router-link' : (attribute.href ? 'a' : 'div')"
+              :is="attribute.to ? 'router-link' : (attribute.href ? 'a' : (attribute.action ? 'button' : 'div'))"
               :to="attribute.to"
               :href="attribute.href"
+              :type="attribute.action && !attribute.to && !attribute.href ? 'button' : undefined"
+              :target="attribute.target ?? undefined"
               class="flex items-center gap-1.5"
+              @click="attribute.action && !attribute.to && !attribute.href ? onAttributeClick(attribute.action) : undefined"
             >
               <BaseIcon
                 v-if="attribute.icon"
@@ -97,17 +100,27 @@ import { BaseBreadcrumbs, BaseIcon } from '..';
 import BaseBadge from './BaseBadge.vue';
 import BaseTooltip from './BaseTooltip.vue';
 import BaseActionButtons from './BaseActionButtons.vue';
-import { RouteRecordRaw } from 'vue-router';
+import { RouteLocationRaw } from 'vue-router';
 
 type BaseBadgeProps = InstanceType<typeof BaseBadge>["$props"] & {
   label: string;
 };
 
+interface HeaderAttribute {
+  icon?: string;
+  label: string;
+  tooltip?: string;
+  to?: RouteLocationRaw;
+  href?: string;
+  action?: () => Promise<void> | void;
+  target?: string;
+}
+
 const props = withDefaults(
   defineProps<{
     title: string;
     subtitle?: string;
-    attributes?: { icon?: string; label: string; tooltip?: string, to?: RouteRecordRaw, href?: string }[];
+    attributes?: HeaderAttribute[];
     actions?: ActionItem[];
     badge?: BaseBadgeProps;
     layout?: 'default' | 'compact';
@@ -139,4 +152,8 @@ const compactLayout = computed(() => {
   return width.value < 500;
 });
 
+async function onAttributeClick(action: () => Promise<void> | void) {
+  await action();
+}
+
 </script>