sprintify-ui 0.8.31 → 0.8.32

package/dist/sprintify-ui.es.js

@@ -23861,7 +23861,7 @@ let Ky = Ar.RenderStrategy, Ua = ye({ props: { as: { type: [Object, String], def
 } });
 const rR = { class: "grow" }, iR = {
   key: 1,
-  class: "relative -top-px ml-[5px]"
+  class: "relative -top-px ml-3"
 }, ml = /* @__PURE__ */ ye({
   __name: "BaseMenuItem",
   props: {
@@ -23922,7 +23922,7 @@ const rR = { class: "grow" }, iR = {
       const s = Kt("BaseIcon");
       return I(), Y("div", {
         style: it(_(i)),
-        class: ce(["rounded leading-tight", [
+        class: ce(["rounded text-left", [
           n.disabled ? "" : "hover:bg-slate-100",
           n.active && !n.disabled ? "bg-slate-100" : "bg-white",
           n.disabled ? "opacity-50 cursor-not-allowed" : ""
@@ -23938,7 +23938,7 @@ const rR = { class: "grow" }, iR = {
           }, null, 8, ["icon", "class"])) : ve("", !0),
           j("div", rR, [
             j("p", {
-              class: ce(["font-medium", _(r), _(e)])
+              class: ce(["font-medium leading-tight", _(r), _(e)])
             }, Ce(n.label), 3),
             n.description ? (I(), Y("p", {
               key: 0,
@@ -23976,8 +23976,8 @@ const rR = { class: "grow" }, iR = {
       type: String
     },
     width: {
-      default: 200,
-      type: Number
+      default: void 0,
+      type: [Number, null, void 0]
     },
     twMenu: {
       default: "",
@@ -23995,12 +23995,15 @@ const rR = { class: "grow" }, iR = {
         fallbackPlacements: ["right", "bottom"]
       })],
       whileElementsMounted: Od
+    }), o = N(() => {
+      if (t.width)
+        return `${t.width}px`;
     });
-    return (o, l) => (I(), Se(_(zO), {
+    return (l, a) => (I(), Se(_(zO), {
       as: "div",
       class: "text-left"
     }, {
-      default: he(({ open: a }) => [
+      default: he(({ open: s }) => [
         j("div", {
           ref_key: "buttonWrapRef",
           ref: e
@@ -24009,7 +24012,7 @@ const rR = { class: "grow" }, iR = {
             class: ce(n.twButton)
           }, {
             default: he(() => [
-              Re(o.$slots, "button", { open: a })
+              Re(l.$slots, "button", { open: s })
             ]),
             _: 2
           }, 1032, ["class"])
@@ -24019,8 +24022,8 @@ const rR = { class: "grow" }, iR = {
             ref_key: "menuItemsRef",
             ref: r,
             style: it({
-              ..._(i),
-              width: `${n.width}px`
+              width: _(o),
+              ..._(i)
             }),
             class: "fixed top-0 left-0 z-menu"
           }, [
@@ -24035,32 +24038,32 @@ const rR = { class: "grow" }, iR = {
               default: he(() => [
                 ge(_($O), {
                   style: it({
-                    width: `${n.width}px`
+                    width: _(o)
                   }),
                   class: ce(_(gt)("rounded-md bg-white p-1 shadow-2xl outline-none ring-1 ring-black ring-opacity-10 focus:outline-none", n.twMenu))
                 }, {
                   default: he(() => [
-                    Re(o.$slots, "items", { items: n.items }, () => [
-                      (I(!0), Y(Ge, null, at(n.items, (s) => {
-                        var c;
+                    Re(l.$slots, "items", { items: n.items }, () => [
+                      (I(!0), Y(Ge, null, at(n.items, (c) => {
+                        var d;
                         return I(), Y(Ge, {
-                          key: s.label + "link"
+                          key: c.label + "link"
                         }, [
-                          (c = s.meta) != null && c.line ? (I(), Y("div", oR)) : s.to ? (I(), Se(_(vo), { key: 1 }, {
-                            default: he(({ active: d, close: f }) => [
-                              (I(), Se(Vn(s.disabled ? "span" : "router-link"), {
-                                to: s.to,
-                                onMouseup: f
+                          (d = c.meta) != null && d.line ? (I(), Y("div", oR)) : c.to ? (I(), Se(_(vo), { key: 1 }, {
+                            default: he(({ active: f, close: h }) => [
+                              (I(), Se(Vn(c.disabled ? "span" : "router-link"), {
+                                to: c.to,
+                                onMouseup: h
                               }, {
                                 default: he(() => [
-                                  Re(o.$slots, "item", { item: s }, () => [
+                                  Re(l.$slots, "item", { item: c }, () => [
                                     ge(ml, {
-                                      label: s.label,
-                                      count: s.count,
-                                      icon: s.icon,
-                                      color: s.color,
-                                      disabled: s.disabled,
-                                      active: d,
+                                      label: c.label,
+                                      count: c.count,
+                                      icon: c.icon,
+                                      color: c.color,
+                                      disabled: c.disabled,
+                                      active: f,
                                       size: n.size
                                     }, null, 8, ["label", "count", "icon", "color", "disabled", "active", "size"])
                                   ])
@@ -24069,44 +24072,44 @@ const rR = { class: "grow" }, iR = {
                               }, 1064, ["to", "onMouseup"]))
                             ]),
                             _: 2
-                          }, 1024)) : s.href ? (I(), Se(_(vo), {
+                          }, 1024)) : c.href ? (I(), Se(_(vo), {
                             key: 2,
-                            as: s.disabled ? "span" : "a",
-                            href: s.href
+                            as: c.disabled ? "span" : "a",
+                            href: c.href
                           }, {
-                            default: he(({ active: d }) => [
-                              Re(o.$slots, "item", { item: s }, () => [
+                            default: he(({ active: f }) => [
+                              Re(l.$slots, "item", { item: c }, () => [
                                 ge(ml, {
-                                  label: s.label,
-                                  count: s.count,
-                                  icon: s.icon,
-                                  color: s.color,
-                                  disabled: s.disabled,
-                                  active: d,
+                                  label: c.label,
+                                  count: c.count,
+                                  icon: c.icon,
+                                  color: c.color,
+                                  disabled: c.disabled,
+                                  active: f,
                                   size: n.size
                                 }, null, 8, ["label", "count", "icon", "color", "disabled", "active", "size"])
                               ])
                             ]),
                             _: 2
-                          }, 1032, ["as", "href"])) : s.action ? (I(), Se(_(vo), {
+                          }, 1032, ["as", "href"])) : c.action ? (I(), Se(_(vo), {
                             key: 3,
                             as: "button",
                             type: "button",
                             class: "w-full",
-                            onClick: (d) => s.disabled ? !1 : s.action()
+                            onClick: (f) => c.disabled ? !1 : c.action()
                           }, {
-                            default: he(({ active: d }) => [
-                              Re(o.$slots, "item", {
-                                item: s,
-                                active: d
+                            default: he(({ active: f }) => [
+                              Re(l.$slots, "item", {
+                                item: c,
+                                active: f
                               }, () => [
                                 ge(ml, {
-                                  label: s.label,
-                                  count: s.count,
-                                  icon: s.icon,
-                                  color: s.color,
-                                  disabled: s.disabled,
-                                  active: d,
+                                  label: c.label,
+                                  count: c.count,
+                                  icon: c.icon,
+                                  color: c.color,
+                                  disabled: c.disabled,
+                                  active: f,
                                   size: n.size
                                 }, null, 8, ["label", "count", "icon", "color", "disabled", "active", "size"])
                               ])
@@ -24908,7 +24911,6 @@ const rR = { class: "grow" }, iR = {
             }, null, 8, ["section", "size", "onOpen"]))), 128)) : ve("", !0),
             n.actions && n.actions.length ? (I(), Se(yi, {
               key: 2,
-              "tw-menu": "w-52",
               size: _(g).size.value == "sm" ? "xs" : "sm",
               items: n.actions
             }, {
@@ -26535,7 +26537,6 @@ const iM = ["align", "colspan"], ob = /* @__PURE__ */ ye({
                   ]),
                   (K = n.checkableActions) != null && K.length ? (I(), Se(yi, {
                     key: 0,
-                    "tw-menu": "w-52",
                     items: n.checkableActions
                   }, {
                     button: he(({ open: Q }) => [
@@ -46472,7 +46473,6 @@ const vP = /* @__PURE__ */ Ro(cP, [["render", gP]]), yP = /* @__PURE__ */ j("spa
               }, null, 8, ["class", "dark", "size", "notifications-config"])) : ve("", !0),
               s ? ve("", !0) : (I(), Se(yi, {
                 key: 1,
-                "tw-menu": "w-52",
                 size: "sm",
                 items: n.userMenu
               }, {

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

@@ -14,8 +14,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"xs" | "sm" | "md">;
     };
     width: {
-        default: number;
-        type: NumberConstructor;
+        default: undefined;
+        type: PropType<number | null | undefined>;
     };
     twMenu: {
         default: string;
@@ -39,8 +39,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"xs" | "sm" | "md">;
     };
     width: {
-        default: number;
-        type: NumberConstructor;
+        default: undefined;
+        type: PropType<number | null | undefined>;
     };
     twMenu: {
         default: string;
@@ -55,7 +55,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     twButton: string | unknown[] | Record<string, any>;
     items: ActionItem[];
     placement: "top" | "bottom-end" | "bottom-start" | "bottom" | "top-start" | "top-end";
-    width: number;
+    width: number | null | undefined;
     twMenu: string | string[];
 }, {}>, {
     button?(_: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.31",
+  "version": "0.8.32",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseDataIterator.vue

@@ -51,7 +51,6 @@
           <!-- Menu -->
           <BaseMenu
             v-if="actions && actions.length"
-            tw-menu="w-52"
             :size="sizeInternal.size.value == 'sm' ? 'xs' : 'sm'"
             :items="actions"
           >

package/src/components/BaseDataTable.vue

@@ -42,7 +42,6 @@
             </div>
             <BaseMenu
               v-if="checkableActions?.length"
-              tw-menu="w-52"
               :items="checkableActions"
             >
               <template #button="{ open }">

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -65,7 +65,6 @@
           <!-- Profile dropdown -->
           <BaseMenu
             v-if="!mobile"
-            tw-menu="w-52"
             size="sm"
             :items="userMenu"
           >

package/src/components/BaseMenu.stories.js

@@ -36,7 +36,7 @@ const Template = (args) => ({
         },
       },
       {
-        label: 'Google',
+        label: 'Open the Google Website on new tab',
         icon: 'mdi-google',
         href: 'https://google.com',
         count: 1000,
@@ -127,3 +127,8 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {};
+
+export const FixedWidth = Template.bind({});
+FixedWidth.args = {
+  width: 280
+};

package/src/components/BaseMenu.vue

@@ -17,8 +17,8 @@
       <div
         ref="menuItemsRef"
         :style="{
+          width: widthStyle,
           ...floatingStyles,
-          width: `${width}px`,
         }"
         class="fixed top-0 left-0 z-menu"
       >
@@ -32,7 +32,7 @@
         >
           <MenuItems
             :style="{
-              width: `${width}px`,
+              width: widthStyle,
             }"
             :class="twMerge('rounded-md bg-white p-1 shadow-2xl outline-none ring-1 ring-black ring-opacity-10 focus:outline-none', twMenu)"
           >
@@ -152,8 +152,8 @@ const props = defineProps({
     type: String as PropType<'xs' | 'sm' | 'md'>,
   },
   width: {
-    default: 200,
-    type: Number,
+    default: undefined,
+    type: [Number, null, undefined] as PropType<number | null | undefined>,
   },
   twMenu: {
     default: '',
@@ -176,4 +176,12 @@ const { floatingStyles } = useFloating(buttonWrapRef, menuItemsRef, {
   whileElementsMounted: autoUpdate,
 });
 
+const widthStyle = computed(() => {
+  if (!props.width) {
+    return undefined;
+  }
+
+  return `${props.width}px`;
+})
+
 </script>

package/src/components/BaseMenuItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :style="buttonStyles"
-    class="rounded leading-tight "
+    class="rounded text-left"
     :class="[
       !disabled ? 'hover:bg-slate-100' : '',
       active && !disabled ? 'bg-slate-100' : 'bg-white',
@@ -18,7 +18,7 @@
         :class="[iconClasses]"
       />
       <div class="grow">
-        <p :class="['font-medium', textClasses, textColor]">
+        <p :class="['font-medium leading-tight', textClasses, textColor]">
           {{ label }}
         </p>
         <p
@@ -31,7 +31,7 @@
       </div>
       <div
         v-if="count"
-        class="relative -top-px ml-[5px]"
+        class="relative -top-px ml-3"
       >
         <BaseCounter
           :count="count"

package/src/components/BaseNavbar.stories.js

@@ -100,7 +100,7 @@ const Template = (args) => ({
 
             <div class="hidden md:ml-6 md:flex md:items-center shrink-0">
               <!-- Profile dropdown -->
-              <BaseMenu tw-menu="w-52" :items="userMenu">
+              <BaseMenu :items="userMenu">
                 <template #button="{ open }">
                   <div
                     class="flex rounded-full"