sprintify-ui 0.10.70 → 0.10.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/sprintify-ui.es.js +1242 -1239
  2. package/package.json +1 -1
  3. package/src/components/BaseBreadcrumbs.stories.js +2 -2
  4. package/src/components/BaseBreadcrumbs.vue +14 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sprintify-ui",
3
- "version": "0.10.70",
3
+ "version": "0.10.71",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "build": "rimraf dist && vue-tsc && vite build",
package/src/components/BaseBreadcrumbs.stories.js CHANGED
@@ -11,11 +11,11 @@ const breadcrumbs = [
11
11
  to: "/users",
12
12
  },
13
13
  {
14
- label: "John Doe",
14
+ 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",
15
15
  to: "/users/1",
16
16
  },
17
17
  {
18
- label: "Very long title this is a very long title that will be truncated",
18
+ 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",
19
19
  to: "/users/1/settings",
20
20
  },
21
21
  ];
package/src/components/BaseBreadcrumbs.vue CHANGED
@@ -2,18 +2,19 @@
2
2
  <div>
3
3
  <nav
4
4
  v-if="breadcrumbs.length > 0"
5
- class="hidden sm:flex"
5
+ class="hidden overflow-hidden w-full sm:flex"
6
6
  aria-label="Breadcrumb"
7
7
  >
8
8
  <ol
9
9
  role="list"
10
- class="flex items-center space-x-2"
10
+ class="flex items-center space-x-2 w-full overflow-hidden"
11
11
  >
12
12
  <li
13
13
  v-for="(breadcrumb, index) in breadcrumbs"
14
14
  :key="index"
15
+ class="overflow-hidden"
15
16
  >
16
- <div class="flex items-center">
17
+ <div class="flex items-center overflow-hidden">
17
18
  <div
18
19
  v-if="index > 0"
19
20
  class="text-gray-300"
@@ -29,7 +30,7 @@
29
30
  >
30
31
  <a
31
32
  :href="href"
32
- class="text-sm"
33
+ class="text-sm overflow-hidden"
33
34
  :class="[
34
35
  { 'ml-2': index > 0 },
35
36
  isExactActive
@@ -46,9 +47,10 @@
46
47
  </span>
47
48
  <span
48
49
  v-else
49
- :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }"
50
+ class="truncate block"
51
+ :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm', 'max-w-[140px]': index < breadcrumbs.length - 1, }"
50
52
  >
51
- {{ truncate(breadcrumb.label) }}
53
+ {{ breadcrumb.label }}
52
54
  </span>
53
55
  </a>
54
56
  </RouterLink>
@@ -60,9 +62,9 @@
60
62
  <RouterLink
61
63
  v-if="mobileBreadcrumb"
62
64
  :to="mobileBreadcrumb.to"
63
- class="block text-slate-600 sm:hidden"
65
+ class="block text-slate-600 sm:hidden overflow-hidden"
64
66
  >
65
- <div class="flex items-center">
67
+ <div class="flex items-center overflow-hidden">
66
68
  <svg
67
69
  class="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-slate-500"
68
70
  viewBox="0 0 20 20"
@@ -75,7 +77,10 @@
75
77
  clip-rule="evenodd"
76
78
  ></path>
77
79
  </svg>
78
- <span :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }">
80
+ <span
81
+ class="truncate"
82
+ :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }"
83
+ >
79
84
  {{ mobileBreadcrumb.label }}
80
85
  </span>
81
86
  </div>