sprintify-ui 0.2.22 → 0.2.23
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.
- package/dist/sprintify-ui.es.js +904 -902
- package/dist/types/src/components/BaseBreadcrumbs.vue.d.ts +11 -1
- package/package.json +1 -1
- package/src/components/BaseBreadcrumbs.stories.js +7 -2
- package/src/components/BaseBreadcrumbs.vue +23 -18
- package/src/components/BaseHeader.stories.js +6 -0
- package/src/components/BaseHeader.vue +12 -9
|
@@ -5,10 +5,20 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
5
5
|
required: true;
|
|
6
6
|
type: PropType<Breadcrumb[]>;
|
|
7
7
|
};
|
|
8
|
+
size: {
|
|
9
|
+
type: PropType<"sm" | "md">;
|
|
10
|
+
default: string;
|
|
11
|
+
};
|
|
8
12
|
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
9
13
|
breadcrumbs: {
|
|
10
14
|
required: true;
|
|
11
15
|
type: PropType<Breadcrumb[]>;
|
|
12
16
|
};
|
|
13
|
-
|
|
17
|
+
size: {
|
|
18
|
+
type: PropType<"sm" | "md">;
|
|
19
|
+
default: string;
|
|
20
|
+
};
|
|
21
|
+
}>>, {
|
|
22
|
+
size: "sm" | "md";
|
|
23
|
+
}, {}>;
|
|
14
24
|
export default _default;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@ import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
|
|
|
3
3
|
const breadcrumbs = [
|
|
4
4
|
{
|
|
5
5
|
label: 'Home',
|
|
6
|
-
icon: 'heroicons:home-solid',
|
|
6
|
+
icon: 'heroicons:home-20-solid',
|
|
7
7
|
to: '/',
|
|
8
8
|
},
|
|
9
9
|
{
|
|
@@ -23,7 +23,12 @@ const breadcrumbs = [
|
|
|
23
23
|
export default {
|
|
24
24
|
title: 'Layout/BaseBreadcrumbs',
|
|
25
25
|
component: BaseBreadcrumbs,
|
|
26
|
-
argTypes: {
|
|
26
|
+
argTypes: {
|
|
27
|
+
size: {
|
|
28
|
+
control: { type: 'select' },
|
|
29
|
+
options: ['sm', 'md']
|
|
30
|
+
}
|
|
31
|
+
},
|
|
27
32
|
args: {
|
|
28
33
|
breadcrumbs: breadcrumbs,
|
|
29
34
|
},
|
|
@@ -7,26 +7,21 @@
|
|
|
7
7
|
>
|
|
8
8
|
<ol
|
|
9
9
|
role="list"
|
|
10
|
-
class="flex items-center space-x-
|
|
10
|
+
class="flex items-center space-x-2"
|
|
11
11
|
>
|
|
12
12
|
<li
|
|
13
13
|
v-for="(breadcrumb, index) in breadcrumbs"
|
|
14
14
|
:key="index"
|
|
15
15
|
>
|
|
16
16
|
<div class="flex items-center">
|
|
17
|
-
<
|
|
17
|
+
<div
|
|
18
18
|
v-if="index > 0"
|
|
19
|
-
class="
|
|
20
|
-
|
|
21
|
-
fill="currentColor"
|
|
22
|
-
aria-hidden="true"
|
|
19
|
+
class="text-gray-300"
|
|
20
|
+
:class="{ 'text-xs': size == 'md', 'text-[10px]': size == 'sm' }"
|
|
23
21
|
>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
clip-rule="evenodd"
|
|
28
|
-
/>
|
|
29
|
-
</svg>
|
|
22
|
+
/
|
|
23
|
+
</div>
|
|
24
|
+
|
|
30
25
|
<RouterLink
|
|
31
26
|
v-slot="{ href, navigate, isExactActive }"
|
|
32
27
|
:to="breadcrumb.to"
|
|
@@ -36,7 +31,7 @@
|
|
|
36
31
|
:href="href"
|
|
37
32
|
class="text-sm"
|
|
38
33
|
:class="[
|
|
39
|
-
{ 'ml-
|
|
34
|
+
{ 'ml-2': index > 0 },
|
|
40
35
|
isExactActive
|
|
41
36
|
? 'text-primary-600'
|
|
42
37
|
: 'text-slate-500 hover:text-slate-700',
|
|
@@ -44,9 +39,15 @@
|
|
|
44
39
|
@click.prevent="navigate()"
|
|
45
40
|
>
|
|
46
41
|
<span v-if="breadcrumb.icon">
|
|
47
|
-
<BaseIcon
|
|
42
|
+
<BaseIcon
|
|
43
|
+
:icon="breadcrumb.icon"
|
|
44
|
+
:class="{ 'h-4 w-4': size == 'md', 'h-3 w-3': size == 'sm' }"
|
|
45
|
+
/>
|
|
48
46
|
</span>
|
|
49
|
-
<span
|
|
47
|
+
<span
|
|
48
|
+
v-else
|
|
49
|
+
:class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }"
|
|
50
|
+
>
|
|
50
51
|
{{ truncate(breadcrumb.label) }}
|
|
51
52
|
</span>
|
|
52
53
|
</a>
|
|
@@ -61,7 +62,7 @@
|
|
|
61
62
|
:to="mobileBreadcrumb.to"
|
|
62
63
|
class="block text-slate-500 sm:hidden"
|
|
63
64
|
>
|
|
64
|
-
<div class="flex items-center
|
|
65
|
+
<div class="flex items-center">
|
|
65
66
|
<svg
|
|
66
67
|
class="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-gray-400"
|
|
67
68
|
viewBox="0 0 20 20"
|
|
@@ -72,9 +73,9 @@
|
|
|
72
73
|
fill-rule="evenodd"
|
|
73
74
|
d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
|
|
74
75
|
clip-rule="evenodd"
|
|
75
|
-
|
|
76
|
+
></path>
|
|
76
77
|
</svg>
|
|
77
|
-
<span>
|
|
78
|
+
<span :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }">
|
|
78
79
|
{{ mobileBreadcrumb.label }}
|
|
79
80
|
</span>
|
|
80
81
|
</div>
|
|
@@ -93,6 +94,10 @@ const props = defineProps({
|
|
|
93
94
|
required: true,
|
|
94
95
|
type: Array as PropType<Breadcrumb[]>,
|
|
95
96
|
},
|
|
97
|
+
size: {
|
|
98
|
+
type: String as PropType<'sm' | 'md'>,
|
|
99
|
+
default: 'md',
|
|
100
|
+
},
|
|
96
101
|
});
|
|
97
102
|
|
|
98
103
|
const mobileBreadcrumb = computed((): Breadcrumb | undefined => {
|
|
@@ -3,6 +3,12 @@ import BaseHeader from './BaseHeader.vue';
|
|
|
3
3
|
export default {
|
|
4
4
|
title: 'Layout/BaseHeader',
|
|
5
5
|
component: BaseHeader,
|
|
6
|
+
argTypes: {
|
|
7
|
+
layout: {
|
|
8
|
+
control: { type: 'select' },
|
|
9
|
+
options: ['default', 'compact'],
|
|
10
|
+
},
|
|
11
|
+
},
|
|
6
12
|
};
|
|
7
13
|
|
|
8
14
|
const Template = (args) => ({
|
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
<BaseBreadcrumbs
|
|
4
4
|
v-if="breadcrumbs"
|
|
5
5
|
:breadcrumbs="breadcrumbs"
|
|
6
|
-
|
|
6
|
+
:size="compactLayout ? 'sm' : 'md'"
|
|
7
|
+
class="lg:mb-1 mb-2"
|
|
7
8
|
/>
|
|
8
9
|
|
|
9
|
-
<div class="lg:flex lg:items-
|
|
10
|
+
<div class="lg:flex lg:items-top lg:justify-between">
|
|
10
11
|
<div class="min-w-0 flex-1">
|
|
11
12
|
<div class="flex flex-col xs:flex-row xs:flex-wrap xs:items-center">
|
|
12
13
|
<h2
|
|
@@ -35,8 +36,8 @@
|
|
|
35
36
|
</div>
|
|
36
37
|
<h3
|
|
37
38
|
v-if="subtitle"
|
|
38
|
-
class="mt-1 leading-tight text-slate-500"
|
|
39
|
-
:class="[compactLayout ? '
|
|
39
|
+
class="mt-1 leading-tight text-slate-500 text-sm"
|
|
40
|
+
:class="[compactLayout ? '' : 'truncate text-base']"
|
|
40
41
|
>
|
|
41
42
|
{{ subtitle }}
|
|
42
43
|
</h3>
|
|
@@ -45,18 +46,18 @@
|
|
|
45
46
|
class="flex"
|
|
46
47
|
:class="[
|
|
47
48
|
compactLayout
|
|
48
|
-
? 'mt-
|
|
49
|
-
: 'mt-
|
|
49
|
+
? 'mt-2 flex-col'
|
|
50
|
+
: 'mt-2 flex-row flex-wrap space-x-4',
|
|
50
51
|
]"
|
|
51
52
|
>
|
|
52
53
|
<div
|
|
53
54
|
v-for="attribute in attributes"
|
|
54
55
|
:key="attribute.label"
|
|
55
|
-
class="
|
|
56
|
+
class="flex items-center text-sm text-slate-500"
|
|
56
57
|
>
|
|
57
58
|
<BaseIcon
|
|
58
59
|
:icon="attribute.icon"
|
|
59
|
-
class="mr-1.5 h-
|
|
60
|
+
class="mr-1.5 h-4 w-4 flex-shrink-0 text-slate-400"
|
|
60
61
|
aria-hidden="true"
|
|
61
62
|
/>
|
|
62
63
|
{{ attribute.label }}
|
|
@@ -64,7 +65,9 @@
|
|
|
64
65
|
</div>
|
|
65
66
|
</div>
|
|
66
67
|
|
|
67
|
-
<div
|
|
68
|
+
<div
|
|
69
|
+
class="mt-4 lg:mt-0"
|
|
70
|
+
>
|
|
68
71
|
<div
|
|
69
72
|
class="flex gap-2"
|
|
70
73
|
:class="{
|