sprintify-ui 0.10.70 → 0.10.72

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

@@ -11,6 +11,10 @@ import { RouteLocationRaw } from 'vue-router';
 declare const sectionLabelClasses: import("vue").ComputedRef<string[]>;
 declare function onNotificationClick(notification: Notification): void;
 declare function onNotificationOpen(): void;
+declare const windowSize: {
+    width: import("vue").Ref<number>;
+    height: import("vue").Ref<number>;
+};
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_11: {}, __VLS_27: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
@@ -64,6 +68,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     sectionLabelClasses: typeof sectionLabelClasses;
     onNotificationClick: typeof onNotificationClick;
     onNotificationOpen: typeof onNotificationOpen;
+    windowSize: typeof windowSize;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "notification:click": (...args: any[]) => void;
     "notification:open": (...args: any[]) => void;

package/package.json

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

package/src/components/BaseBreadcrumbs.stories.js

@@ -11,11 +11,11 @@ const breadcrumbs = [
     to: "/users",
   },
   {
-    label: "John Doe",
+    label: "Very long title this is a very long title that will be truncated Very long title this is a very long title that will be truncated",
     to: "/users/1",
   },
   {
-    label: "Very long title this is a very long title that will be truncated",
+    label: "Very long title this is a very long title that will be truncated Very long title this is a very long title that will be truncated",
     to: "/users/1/settings",
   },
 ];

package/src/components/BaseBreadcrumbs.vue

@@ -2,18 +2,19 @@
   <div>
     <nav
       v-if="breadcrumbs.length > 0"
-      class="hidden sm:flex"
+      class="hidden overflow-hidden w-full sm:flex"
       aria-label="Breadcrumb"
     >
       <ol
         role="list"
-        class="flex items-center space-x-2"
+        class="flex items-center space-x-2 w-full overflow-hidden"
       >
         <li
           v-for="(breadcrumb, index) in breadcrumbs"
           :key="index"
+          class="overflow-hidden"
         >
-          <div class="flex items-center">
+          <div class="flex items-center overflow-hidden">
             <div
               v-if="index > 0"
               class="text-gray-300"
@@ -29,7 +30,7 @@
             >
               <a
                 :href="href"
-                class="text-sm"
+                class="text-sm overflow-hidden"
                 :class="[
                   { 'ml-2': index > 0 },
                   isExactActive
@@ -46,9 +47,10 @@
                 </span>
                 <span
                   v-else
-                  :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }"
+                  class="truncate block"
+                  :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm', 'max-w-[140px]': index < breadcrumbs.length - 1, }"
                 >
-                  {{ truncate(breadcrumb.label) }}
+                  {{ breadcrumb.label }}
                 </span>
               </a>
             </RouterLink>
@@ -60,9 +62,9 @@
     <RouterLink
       v-if="mobileBreadcrumb"
       :to="mobileBreadcrumb.to"
-      class="block text-slate-600 sm:hidden"
+      class="block text-slate-600 sm:hidden overflow-hidden"
     >
-      <div class="flex items-center">
+      <div class="flex items-center overflow-hidden">
         <svg
           class="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-slate-500"
           viewBox="0 0 20 20"
@@ -75,7 +77,10 @@
             clip-rule="evenodd"
           ></path>
         </svg>
-        <span :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }">
+        <span
+          class="truncate"
+          :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }"
+        >
           {{ mobileBreadcrumb.label }}
         </span>
       </div>

package/src/components/BaseLayoutSidebarConfigurable.vue

@@ -103,7 +103,7 @@
                   <BaseAvatar
                     :user="user"
                     :size="size"
-                    show-details
+                    :show-details="windowSize.width.value >= 640"
                   />
                 </div>
               </template>
@@ -130,6 +130,7 @@ import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseMenu from './BaseMenu.vue';
 import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
 import { RouteLocationRaw } from 'vue-router';
+import { useWindowSize } from '@vueuse/core';
 
 const emit = defineEmits(['notification:click', 'notification:open']);
 
@@ -199,4 +200,6 @@ function onNotificationClick(notification: Notification) {
 function onNotificationOpen() {
   emit('notification:open');
 }
+
+const windowSize = useWindowSize();
 </script>