@redseed/redseed-ui-vue3 4.1.5 → 4.2.0
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/package.json +1 -1
- package/src/components/Card/ButtonCard.vue +89 -0
- package/src/components/Card/Card.vue +16 -10
- package/src/components/Card/index.js +2 -0
- package/src/components/Layouts/HeroSection.vue +20 -0
- package/src/components/Layouts/SectionHeader.vue +18 -19
- package/src/components/Layouts/index.js +2 -0
package/package.json
CHANGED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import Card from './Card.vue'
|
|
3
|
+
|
|
4
|
+
const props = defineProps({
|
|
5
|
+
disabled: {
|
|
6
|
+
type: Boolean,
|
|
7
|
+
default: false,
|
|
8
|
+
},
|
|
9
|
+
})
|
|
10
|
+
</script>
|
|
11
|
+
<template>
|
|
12
|
+
<Card :class="[
|
|
13
|
+
'rsui-button-card group/button-card',
|
|
14
|
+
{
|
|
15
|
+
'rsui-button-card--disabled': disabled,
|
|
16
|
+
}
|
|
17
|
+
]"
|
|
18
|
+
clickable
|
|
19
|
+
hoverable
|
|
20
|
+
:disabled="disabled"
|
|
21
|
+
>
|
|
22
|
+
<div class="rsui-button-card__content">
|
|
23
|
+
<div v-if="$slots.icon"
|
|
24
|
+
class="rsui-button-card__icon"
|
|
25
|
+
>
|
|
26
|
+
<slot name="icon"></slot>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="rsui-button-card__content-text">
|
|
29
|
+
<div :class="[
|
|
30
|
+
'rsui-button-card__title',
|
|
31
|
+
{
|
|
32
|
+
'rsui-button-card__title--disabled': disabled,
|
|
33
|
+
}
|
|
34
|
+
]">
|
|
35
|
+
<slot></slot>
|
|
36
|
+
</div>
|
|
37
|
+
<div :class="[
|
|
38
|
+
'rsui-button-card__supporting-text',
|
|
39
|
+
{
|
|
40
|
+
'rsui-button-card__supporting-text--disabled': disabled,
|
|
41
|
+
}
|
|
42
|
+
]">
|
|
43
|
+
<slot name="supporting-text"></slot>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</Card>
|
|
48
|
+
</template>
|
|
49
|
+
<style lang="scss" scoped>
|
|
50
|
+
.rsui-button-card {
|
|
51
|
+
@apply hover:shadow-none hover:border-rsui-grey-900;
|
|
52
|
+
&--disabled {
|
|
53
|
+
@apply hover:border-rsui-grey-400;
|
|
54
|
+
@apply focus-visible:ring-0;
|
|
55
|
+
}
|
|
56
|
+
&__content {
|
|
57
|
+
@apply flex items-center p-2 gap-4;
|
|
58
|
+
}
|
|
59
|
+
&__icon {
|
|
60
|
+
@apply size-12 flex shrink-0 items-center justify-center rounded-lg transition duration-200;
|
|
61
|
+
@apply border border-rsui-grey-700 text-rsui-grey-700;
|
|
62
|
+
:deep(svg) {
|
|
63
|
+
@apply size-5;
|
|
64
|
+
path {
|
|
65
|
+
@apply stroke-current;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
&__content-text {
|
|
70
|
+
@apply flex flex-col;
|
|
71
|
+
}
|
|
72
|
+
&__title {
|
|
73
|
+
@apply text-rsui-grey-800 font-semibold line-clamp-1;
|
|
74
|
+
@apply group-hover/button-card:text-rsui-grey-900;
|
|
75
|
+
&--disabled {
|
|
76
|
+
@apply text-rsui-grey-400;
|
|
77
|
+
@apply group-hover/button-card:text-rsui-grey-400;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
&__supporting-text {
|
|
81
|
+
@apply text-sm text-rsui-grey-700 line-clamp-1;
|
|
82
|
+
@apply group-hover/button-card:text-rsui-grey-800;
|
|
83
|
+
&--disabled {
|
|
84
|
+
@apply text-rsui-grey-400;
|
|
85
|
+
@apply group-hover/button-card:text-rsui-grey-400;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
</style>
|
|
@@ -10,6 +10,10 @@ const props = defineProps({
|
|
|
10
10
|
type: Boolean,
|
|
11
11
|
default: true,
|
|
12
12
|
},
|
|
13
|
+
disabled: {
|
|
14
|
+
type: Boolean,
|
|
15
|
+
default: false,
|
|
16
|
+
},
|
|
13
17
|
})
|
|
14
18
|
|
|
15
19
|
const emit = defineEmits(['click'])
|
|
@@ -20,11 +24,13 @@ const cardClass = computed(() => [
|
|
|
20
24
|
'rsui-card--hoverable': props.hoverable,
|
|
21
25
|
},
|
|
22
26
|
{
|
|
23
|
-
'rsui-card--clickable': props.clickable,
|
|
27
|
+
'rsui-card--clickable': props.clickable && !props.disabled,
|
|
24
28
|
},
|
|
25
29
|
])
|
|
26
30
|
|
|
27
31
|
function onClick() {
|
|
32
|
+
if (props.disabled) return
|
|
33
|
+
|
|
28
34
|
if (props.clickable) emit('click')
|
|
29
35
|
}
|
|
30
36
|
</script>
|
|
@@ -113,15 +119,15 @@ function onClick() {
|
|
|
113
119
|
@apply rounded-t-lg overflow-hidden;
|
|
114
120
|
}
|
|
115
121
|
&__content {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
122
|
+
@apply min-h-14 p-3 flex-1 flex flex-col relative gap-y-3;
|
|
123
|
+
&-top {
|
|
124
|
+
@apply flex items-center;
|
|
125
|
+
&--action {
|
|
126
|
+
@apply items-center;
|
|
127
|
+
}
|
|
128
|
+
&--no-avatar {
|
|
129
|
+
@apply justify-between;
|
|
130
|
+
}
|
|
125
131
|
}
|
|
126
132
|
}
|
|
127
133
|
&__avatar {
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
</script>
|
|
3
|
+
<template>
|
|
4
|
+
<div class="rsui-hero-section">
|
|
5
|
+
<slot name="header"></slot>
|
|
6
|
+
|
|
7
|
+
<div class="rsui-hero-section__cards">
|
|
8
|
+
<slot></slot>
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
<style lang="scss" scoped>
|
|
13
|
+
.rsui-hero-section {
|
|
14
|
+
@apply rounded-xl bg-rsui-grey-200 px-5 py-6 flex flex-col gap-4 md:gap-6;
|
|
15
|
+
|
|
16
|
+
&__cards {
|
|
17
|
+
@apply grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
@@ -18,7 +18,7 @@ defineProps({
|
|
|
18
18
|
type: Boolean,
|
|
19
19
|
default: true,
|
|
20
20
|
},
|
|
21
|
-
|
|
21
|
+
showMoreActions: {
|
|
22
22
|
type: Boolean,
|
|
23
23
|
default: true,
|
|
24
24
|
},
|
|
@@ -27,6 +27,8 @@ defineProps({
|
|
|
27
27
|
const sectionHeaderElement = ref(null)
|
|
28
28
|
|
|
29
29
|
const { responsiveWidth } = useResponsiveWidth(sectionHeaderElement, 768)
|
|
30
|
+
|
|
31
|
+
const emit = defineEmits(['click:more-actions'])
|
|
30
32
|
</script>
|
|
31
33
|
<template>
|
|
32
34
|
<div ref="sectionHeaderElement"
|
|
@@ -45,7 +47,7 @@ const { responsiveWidth } = useResponsiveWidth(sectionHeaderElement, 768)
|
|
|
45
47
|
|
|
46
48
|
<!-- Title slot, default slot -->
|
|
47
49
|
<div class="rsui-section-header__title"
|
|
48
|
-
:title="$slots.default()[0].children"
|
|
50
|
+
:title="$slots.default ? $slots.default()[0].children : ''"
|
|
49
51
|
>
|
|
50
52
|
<slot></slot>
|
|
51
53
|
</div>
|
|
@@ -53,7 +55,7 @@ const { responsiveWidth } = useResponsiveWidth(sectionHeaderElement, 768)
|
|
|
53
55
|
<!-- Subtitle slot, optional -->
|
|
54
56
|
<div class="rsui-section-header__subtitle"
|
|
55
57
|
v-if="showSubtitle && $slots.subtitle"
|
|
56
|
-
:title="$slots.subtitle()[0].children"
|
|
58
|
+
:title="$slots.subtitle ? $slots.subtitle()[0].children : ''"
|
|
57
59
|
>
|
|
58
60
|
<slot name="subtitle"></slot>
|
|
59
61
|
</div>
|
|
@@ -63,32 +65,29 @@ const { responsiveWidth } = useResponsiveWidth(sectionHeaderElement, 768)
|
|
|
63
65
|
<div class="rsui-section-header__toolbar"
|
|
64
66
|
v-if="showActions"
|
|
65
67
|
>
|
|
68
|
+
<!-- Desktop actions slot, optional -->
|
|
66
69
|
<div class="rsui-section-header__actions-desktop"
|
|
67
|
-
v-if="responsiveWidth.specific"
|
|
70
|
+
v-if="responsiveWidth.specific && $slots.actions"
|
|
68
71
|
>
|
|
69
72
|
<slot name="actions"></slot>
|
|
70
73
|
</div>
|
|
71
74
|
|
|
72
|
-
<!--
|
|
73
|
-
<
|
|
74
|
-
|
|
75
|
-
&& $slots['dropdown-options']
|
|
76
|
-
&& $slots['dropdown-options']().length
|
|
77
|
-
"
|
|
75
|
+
<!-- More actions slot, optional -->
|
|
76
|
+
<div v-if="showMoreActions"
|
|
77
|
+
class="rsui-section-header__more-actions"
|
|
78
78
|
>
|
|
79
|
-
<
|
|
80
|
-
<ButtonTertiary @click="
|
|
81
|
-
<EllipsisVerticalIcon class="rsui-section-
|
|
79
|
+
<slot name="more-actions">
|
|
80
|
+
<ButtonTertiary @click="emit('click:more-actions')">
|
|
81
|
+
<EllipsisVerticalIcon class="rsui-section-header__more-actions-icon" />
|
|
82
82
|
</ButtonTertiary>
|
|
83
|
-
</
|
|
84
|
-
|
|
85
|
-
<slot name="dropdown-options"></slot>
|
|
86
|
-
</DropdownMenu>
|
|
83
|
+
</slot>
|
|
84
|
+
</div>
|
|
87
85
|
</div>
|
|
88
86
|
</div>
|
|
89
87
|
|
|
88
|
+
<!-- Mobile actions slot, optional -->
|
|
90
89
|
<div class="rsui-section-header__actions-mobile"
|
|
91
|
-
v-if="showMobileActions && !responsiveWidth.specific"
|
|
90
|
+
v-if="showMobileActions && !responsiveWidth.specific && $slots.actions"
|
|
92
91
|
>
|
|
93
92
|
<slot name="actions"></slot>
|
|
94
93
|
</div>
|
|
@@ -133,7 +132,7 @@ const { responsiveWidth } = useResponsiveWidth(sectionHeaderElement, 768)
|
|
|
133
132
|
@apply flex flex-wrap gap-3 items-center justify-end;
|
|
134
133
|
}
|
|
135
134
|
|
|
136
|
-
&
|
|
135
|
+
&__more-actions-icon {
|
|
137
136
|
@apply size-5 text-rsui-grey-400;
|
|
138
137
|
}
|
|
139
138
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import HeroSection from './HeroSection.vue'
|
|
1
2
|
import PageHeader from './PageHeader.vue'
|
|
2
3
|
import SectionFooter from './SectionFooter.vue'
|
|
3
4
|
import SectionHeader from './SectionHeader.vue'
|
|
@@ -5,6 +6,7 @@ import SingleColumnLayout from './SingleColumnLayout.vue'
|
|
|
5
6
|
import TwoColumnLayout from './TwoColumnLayout.vue'
|
|
6
7
|
|
|
7
8
|
export {
|
|
9
|
+
HeroSection,
|
|
8
10
|
PageHeader,
|
|
9
11
|
SectionFooter,
|
|
10
12
|
SectionHeader,
|