sprintify-ui 0.10.69 → 0.10.71

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

@@ -10,6 +10,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
         type: BooleanConstructor;
     };
+    showLink: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -21,9 +25,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
         type: BooleanConstructor;
     };
+    showLink: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }>> & Readonly<{
     onRemove?: ((...args: any[]) => any) | undefined;
 }>, {
     showRemove: boolean;
+    showLink: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.69",
+  "version": "0.10.71",
   "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/BaseMediaItem.vue

@@ -60,6 +60,10 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  showLink: {
+    default: true,
+    type: Boolean,
+  },
 });
 
 const name = computed(() => {
@@ -71,6 +75,11 @@ const size = computed(() => {
 });
 
 const url = computed(() => {
+
+  if (!props.showLink) {
+    return null;
+  }
+
   if ('url' in props.media) {
     return props.media.url;
   }