@redseed/redseed-ui-vue3 4.2.0 → 5.0.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
CHANGED
|
@@ -10,6 +10,10 @@ const props = defineProps({
|
|
|
10
10
|
type: Boolean,
|
|
11
11
|
default: true,
|
|
12
12
|
},
|
|
13
|
+
padded: {
|
|
14
|
+
type: Boolean,
|
|
15
|
+
default: true,
|
|
16
|
+
},
|
|
13
17
|
disabled: {
|
|
14
18
|
type: Boolean,
|
|
15
19
|
default: false,
|
|
@@ -40,56 +44,31 @@ function onClick() {
|
|
|
40
44
|
class="rsui-card__action-layer"
|
|
41
45
|
@click="onClick"
|
|
42
46
|
></div>
|
|
47
|
+
|
|
43
48
|
<div v-if="$slots.image"
|
|
44
49
|
class="rsui-card__image"
|
|
45
50
|
>
|
|
46
51
|
<slot name="image"></slot>
|
|
47
52
|
</div>
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
class="rsui-card__avatar"
|
|
60
|
-
>
|
|
61
|
-
<slot name="avatar"></slot>
|
|
62
|
-
</div>
|
|
63
|
-
<div class="rsui-card__title-wrapper">
|
|
64
|
-
<div v-if="$slots.title"
|
|
65
|
-
class="rsui-card__title"
|
|
66
|
-
>
|
|
67
|
-
<slot name="title"></slot>
|
|
68
|
-
</div>
|
|
69
|
-
<div v-if="$slots.status"
|
|
70
|
-
class="rsui-card__title-status"
|
|
71
|
-
>
|
|
72
|
-
<slot name="status"></slot>
|
|
73
|
-
</div>
|
|
74
|
-
</div>
|
|
75
|
-
<div v-if="$slots['title-action']"
|
|
76
|
-
class="rsui-card__title-action"
|
|
77
|
-
>
|
|
78
|
-
<slot name="title-action"></slot>
|
|
79
|
-
</div>
|
|
80
|
-
</div>
|
|
53
|
+
|
|
54
|
+
<div class="rsui-card__header"
|
|
55
|
+
v-if="$slots.header"
|
|
56
|
+
>
|
|
57
|
+
<slot name="header"></slot>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<div :class="[
|
|
61
|
+
'rsui-card__content',
|
|
62
|
+
{ 'rsui-card__content--padded': padded },
|
|
63
|
+
]">
|
|
81
64
|
<slot></slot>
|
|
65
|
+
|
|
82
66
|
<div v-if="$slots.meta"
|
|
83
67
|
class="rsui-card__meta"
|
|
84
68
|
>
|
|
85
69
|
<slot name="meta"></slot>
|
|
86
70
|
</div>
|
|
87
71
|
</div>
|
|
88
|
-
<div v-if="$slots.actions"
|
|
89
|
-
class="rsui-card__actions"
|
|
90
|
-
>
|
|
91
|
-
<slot name="actions"></slot>
|
|
92
|
-
</div>
|
|
93
72
|
</div>
|
|
94
73
|
</template>
|
|
95
74
|
<style lang="scss" scoped>
|
|
@@ -97,9 +76,11 @@ function onClick() {
|
|
|
97
76
|
@apply relative flex flex-col;
|
|
98
77
|
@apply select-none transition duration-200;
|
|
99
78
|
@apply rounded-xl bg-white border border-rsui-grey-400;
|
|
79
|
+
|
|
100
80
|
&--hoverable {
|
|
101
81
|
@apply hover:shadow-md;
|
|
102
82
|
}
|
|
83
|
+
|
|
103
84
|
&--clickable {
|
|
104
85
|
@apply cursor-pointer;
|
|
105
86
|
.rsui-card__image {
|
|
@@ -108,51 +89,26 @@ function onClick() {
|
|
|
108
89
|
.rsui-card__content {
|
|
109
90
|
@apply pointer-events-none;
|
|
110
91
|
}
|
|
111
|
-
.rsui-card__actions {
|
|
112
|
-
@apply pointer-events-none;
|
|
113
|
-
}
|
|
114
92
|
}
|
|
93
|
+
|
|
115
94
|
&__action-layer {
|
|
116
95
|
@apply absolute inset-0 size-full bg-transparent rounded-lg transition;
|
|
117
96
|
}
|
|
97
|
+
|
|
118
98
|
&__image {
|
|
119
99
|
@apply rounded-t-lg overflow-hidden;
|
|
120
100
|
}
|
|
101
|
+
|
|
121
102
|
&__content {
|
|
122
|
-
@apply min-h-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
@apply items-center;
|
|
127
|
-
}
|
|
128
|
-
&--no-avatar {
|
|
129
|
-
@apply justify-between;
|
|
130
|
-
}
|
|
103
|
+
@apply min-h-16 flex-1 flex flex-col relative gap-y-3;
|
|
104
|
+
|
|
105
|
+
&--padded {
|
|
106
|
+
@apply py-5 px-4 sm:px-6;
|
|
131
107
|
}
|
|
132
108
|
}
|
|
133
|
-
|
|
134
|
-
@apply size-12 mr-3; // Added margin-right
|
|
135
|
-
}
|
|
136
|
-
&__title-wrapper {
|
|
137
|
-
@apply flex-1 flex justify-between items-center;
|
|
138
|
-
}
|
|
139
|
-
&__title {
|
|
140
|
-
@apply max-h-12 text-lg font-semibold leading-6 line-clamp-2;
|
|
141
|
-
}
|
|
142
|
-
&__title-status {
|
|
143
|
-
@apply ml-2 flex-shrink-0 self-start flex items-center;
|
|
144
|
-
}
|
|
145
|
-
&__title-action {
|
|
146
|
-
@apply pointer-events-auto ml-3; // Added margin-left
|
|
147
|
-
}
|
|
109
|
+
|
|
148
110
|
&__meta {
|
|
149
111
|
@apply grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 mt-4;
|
|
150
112
|
}
|
|
151
|
-
&__actions {
|
|
152
|
-
@apply relative p-3;
|
|
153
|
-
& > * {
|
|
154
|
-
@apply mr-2 mb-2 pointer-events-auto;
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
113
|
}
|
|
158
114
|
</style>
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref } from 'vue'
|
|
3
|
+
import ButtonTertiary from '../Button/ButtonTertiary.vue'
|
|
4
|
+
import { useResponsiveWidth } from '../../helpers/ResponsiveWidth'
|
|
5
|
+
import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
|
|
6
|
+
|
|
7
|
+
defineProps({
|
|
8
|
+
showAvatar: {
|
|
9
|
+
type: Boolean,
|
|
10
|
+
default: true,
|
|
11
|
+
},
|
|
12
|
+
showBadge: {
|
|
13
|
+
type: Boolean,
|
|
14
|
+
default: true,
|
|
15
|
+
},
|
|
16
|
+
showSubtitle: {
|
|
17
|
+
type: Boolean,
|
|
18
|
+
default: true,
|
|
19
|
+
},
|
|
20
|
+
showActions: {
|
|
21
|
+
type: Boolean,
|
|
22
|
+
default: true,
|
|
23
|
+
},
|
|
24
|
+
showMoreActions: {
|
|
25
|
+
type: Boolean,
|
|
26
|
+
default: true,
|
|
27
|
+
},
|
|
28
|
+
})
|
|
29
|
+
|
|
30
|
+
const cardHeaderElement = ref(null)
|
|
31
|
+
|
|
32
|
+
const { responsiveWidth } = useResponsiveWidth(cardHeaderElement, 640)
|
|
33
|
+
|
|
34
|
+
const emit = defineEmits(['click:more-actions'])
|
|
35
|
+
</script>
|
|
36
|
+
<template>
|
|
37
|
+
<div ref="cardHeaderElement"
|
|
38
|
+
class="rsui-card-header"
|
|
39
|
+
>
|
|
40
|
+
<div class="rsui-card-header__header">
|
|
41
|
+
|
|
42
|
+
<!-- Avatar slot, optional -->
|
|
43
|
+
<div class="rsui-card-header__avatar"
|
|
44
|
+
v-if="showAvatar && $slots.avatar"
|
|
45
|
+
>
|
|
46
|
+
<slot name="avatar"></slot>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<div class="rsui-card-header__text">
|
|
50
|
+
|
|
51
|
+
<!-- Title slot, default slot -->
|
|
52
|
+
<div class="rsui-card-header__title"
|
|
53
|
+
:title="$slots.default ? $slots.default()[0].children : ''"
|
|
54
|
+
>
|
|
55
|
+
<slot></slot>
|
|
56
|
+
|
|
57
|
+
<!-- Badge slot, optional -->
|
|
58
|
+
<div class="rsui-card-header__badge"
|
|
59
|
+
v-if="showBadge && $slots.badge"
|
|
60
|
+
>
|
|
61
|
+
<slot name="badge"></slot>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<!-- Subtitle slot, optional -->
|
|
66
|
+
<div class="rsui-card-header__subtitle"
|
|
67
|
+
v-if="showSubtitle && $slots.subtitle"
|
|
68
|
+
:title="$slots.subtitle ? $slots.subtitle()[0].children : ''"
|
|
69
|
+
>
|
|
70
|
+
<slot name="subtitle"></slot>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<!-- Actions slot, optional -->
|
|
75
|
+
<div class="rsui-card-header__toolbar"
|
|
76
|
+
v-if="showActions"
|
|
77
|
+
>
|
|
78
|
+
<!-- Desktop actions slot, optional -->
|
|
79
|
+
<div class="rsui-card-header__actions-desktop"
|
|
80
|
+
v-if="responsiveWidth.specific && $slots.actions"
|
|
81
|
+
>
|
|
82
|
+
<slot name="actions"></slot>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<!-- More actions slot, optional -->
|
|
86
|
+
<div v-if="showMoreActions"
|
|
87
|
+
class="rsui-card-header__more-actions"
|
|
88
|
+
>
|
|
89
|
+
<slot name="more-actions">
|
|
90
|
+
<ButtonTertiary @click="emit('click:more-actions')">
|
|
91
|
+
<EllipsisVerticalIcon class="rsui-card-header__more-actions-icon" />
|
|
92
|
+
</ButtonTertiary>
|
|
93
|
+
</slot>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
<!-- Mobile actions slot, optional -->
|
|
99
|
+
<div class="rsui-card-header__actions-mobile"
|
|
100
|
+
v-if="!responsiveWidth.specific && $slots.actions"
|
|
101
|
+
>
|
|
102
|
+
<slot name="actions"></slot>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</template>
|
|
106
|
+
<style lang="scss" scoped>
|
|
107
|
+
.rsui-card-header {
|
|
108
|
+
@apply flex flex-col gap-x-3 gap-y-5 overflow-hidden;
|
|
109
|
+
@apply md:flex-row md:justify-between md:items-center;
|
|
110
|
+
@apply border-b border-rsui-grey-400 py-5 px-4 sm:px-6;
|
|
111
|
+
|
|
112
|
+
&__header {
|
|
113
|
+
@apply flex-1 flex justify-between md:items-center gap-x-3;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
&__avatar {
|
|
117
|
+
@apply size-14 rounded-full overflow-hidden flex items-center justify-center bg-rsui-grey-50;
|
|
118
|
+
@apply mt-2.5 md:mt-0;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&__text {
|
|
122
|
+
@apply flex-1 flex flex-col gap-y-0.5 pt-2 md:pt-0;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&__title {
|
|
126
|
+
@apply text-lg leading-7 font-semibold text-rsui-grey-900 line-clamp-2 md:line-clamp-1;
|
|
127
|
+
@apply flex flex-wrap items-center gap-y-1 gap-x-2;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&__subtitle {
|
|
131
|
+
@apply text-sm leading-5 text-rsui-grey-700 line-clamp-3 md:line-clamp-1;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&__toolbar {
|
|
135
|
+
@apply flex gap-3 md:items-center justify-end;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
&__actions-desktop {
|
|
139
|
+
@apply flex gap-3 items-center;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
&__actions-mobile {
|
|
143
|
+
@apply flex flex-wrap gap-3 items-center;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
&__more-actions-icon {
|
|
147
|
+
@apply size-5 text-rsui-grey-400;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
</style>
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import ButtonCard from './ButtonCard.vue'
|
|
2
2
|
import Card from './Card.vue'
|
|
3
|
+
import CardHeader from './CardHeader.vue'
|
|
3
4
|
import CardResource from './CardResource.vue'
|
|
4
5
|
import RadioCard from './RadioCard.vue'
|
|
5
6
|
|
|
6
7
|
export {
|
|
7
8
|
ButtonCard,
|
|
8
9
|
Card,
|
|
10
|
+
CardHeader,
|
|
9
11
|
CardResource,
|
|
10
12
|
RadioCard,
|
|
11
13
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import { ref } from 'vue'
|
|
3
3
|
import ButtonTertiary from '../Button/ButtonTertiary.vue'
|
|
4
|
-
import DropdownMenu from '../DropdownMenu/DropdownMenu.vue'
|
|
5
4
|
import { useResponsiveWidth } from '../../helpers/ResponsiveWidth'
|
|
6
5
|
import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
|
|
7
6
|
|