@redseed/redseed-ui-vue3 5.3.4 → 5.3.6
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
|
@@ -25,6 +25,14 @@ defineProps({
|
|
|
25
25
|
type: Boolean,
|
|
26
26
|
default: true,
|
|
27
27
|
},
|
|
28
|
+
showDivider: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
default: true,
|
|
31
|
+
},
|
|
32
|
+
singleLine: {
|
|
33
|
+
type: Boolean,
|
|
34
|
+
default: true,
|
|
35
|
+
}
|
|
28
36
|
})
|
|
29
37
|
|
|
30
38
|
const cardHeaderElement = ref(null)
|
|
@@ -35,9 +43,19 @@ const emit = defineEmits(['click:more-actions'])
|
|
|
35
43
|
</script>
|
|
36
44
|
<template>
|
|
37
45
|
<div ref="cardHeaderElement"
|
|
38
|
-
class="
|
|
46
|
+
:class="[
|
|
47
|
+
'rsui-card-header',
|
|
48
|
+
{
|
|
49
|
+
'rsui-card-header--divider': showDivider,
|
|
50
|
+
}
|
|
51
|
+
]"
|
|
39
52
|
>
|
|
40
|
-
<div class="
|
|
53
|
+
<div :class="[
|
|
54
|
+
'rsui-card-header__header',
|
|
55
|
+
{
|
|
56
|
+
'rsui-card-header__header--single-line': singleLine,
|
|
57
|
+
}
|
|
58
|
+
]">
|
|
41
59
|
|
|
42
60
|
<!-- Avatar slot, optional -->
|
|
43
61
|
<div class="rsui-card-header__avatar"
|
|
@@ -49,10 +67,15 @@ const emit = defineEmits(['click:more-actions'])
|
|
|
49
67
|
<div class="rsui-card-header__text">
|
|
50
68
|
|
|
51
69
|
<!-- Title slot, default slot -->
|
|
52
|
-
<div class="rsui-card-header__title"
|
|
53
|
-
:
|
|
54
|
-
|
|
55
|
-
|
|
70
|
+
<div class="rsui-card-header__title-container">
|
|
71
|
+
<div :class="[
|
|
72
|
+
'rsui-card-header__title',
|
|
73
|
+
{
|
|
74
|
+
'rsui-card-header__title--single-line': singleLine,
|
|
75
|
+
}
|
|
76
|
+
]">
|
|
77
|
+
<slot></slot>
|
|
78
|
+
</div>
|
|
56
79
|
|
|
57
80
|
<!-- Badge slot, optional -->
|
|
58
81
|
<div class="rsui-card-header__badge"
|
|
@@ -63,9 +86,13 @@ const emit = defineEmits(['click:more-actions'])
|
|
|
63
86
|
</div>
|
|
64
87
|
|
|
65
88
|
<!-- Subtitle slot, optional -->
|
|
66
|
-
<div class="
|
|
89
|
+
<div :class="[
|
|
90
|
+
'rsui-card-header__subtitle',
|
|
91
|
+
{
|
|
92
|
+
'rsui-card-header__subtitle--single-line': singleLine,
|
|
93
|
+
}
|
|
94
|
+
]"
|
|
67
95
|
v-if="showSubtitle && $slots.subtitle"
|
|
68
|
-
:title="$slots.subtitle ? $slots.subtitle()[0].children : ''"
|
|
69
96
|
>
|
|
70
97
|
<slot name="subtitle"></slot>
|
|
71
98
|
</div>
|
|
@@ -107,10 +134,18 @@ const emit = defineEmits(['click:more-actions'])
|
|
|
107
134
|
.rsui-card-header {
|
|
108
135
|
@apply flex flex-col gap-x-3 gap-y-5 overflow-hidden;
|
|
109
136
|
@apply md:flex-row md:justify-between md:items-center;
|
|
110
|
-
@apply
|
|
137
|
+
@apply py-4 px-4 sm:px-6;
|
|
138
|
+
|
|
139
|
+
&--divider {
|
|
140
|
+
@apply border-b border-rsui-grey-400;
|
|
141
|
+
}
|
|
111
142
|
|
|
112
143
|
&__header {
|
|
113
|
-
@apply flex-1 flex justify-between
|
|
144
|
+
@apply flex-1 flex justify-between items-start gap-x-3;
|
|
145
|
+
|
|
146
|
+
&--single-line {
|
|
147
|
+
@apply md:items-center;
|
|
148
|
+
}
|
|
114
149
|
}
|
|
115
150
|
|
|
116
151
|
&__avatar {
|
|
@@ -122,13 +157,25 @@ const emit = defineEmits(['click:more-actions'])
|
|
|
122
157
|
@apply flex-1 flex flex-col gap-y-0.5 pt-2 md:pt-0;
|
|
123
158
|
}
|
|
124
159
|
|
|
125
|
-
&__title {
|
|
126
|
-
@apply text-lg leading-7 font-semibold text-rsui-grey-900 line-clamp-2 md:line-clamp-1;
|
|
160
|
+
&__title-container {
|
|
127
161
|
@apply flex flex-wrap items-center gap-y-1 gap-x-2;
|
|
162
|
+
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
&__title {
|
|
166
|
+
@apply text-lg leading-7 font-semibold text-rsui-grey-900;
|
|
167
|
+
|
|
168
|
+
&--single-line {
|
|
169
|
+
@apply line-clamp-2 md:line-clamp-1;
|
|
170
|
+
}
|
|
128
171
|
}
|
|
129
172
|
|
|
130
173
|
&__subtitle {
|
|
131
|
-
@apply text-sm leading-5 text-rsui-grey-700
|
|
174
|
+
@apply text-sm leading-5 text-rsui-grey-700;
|
|
175
|
+
|
|
176
|
+
&--single-line {
|
|
177
|
+
@apply line-clamp-3 md:line-clamp-1;
|
|
178
|
+
}
|
|
132
179
|
}
|
|
133
180
|
|
|
134
181
|
&__toolbar {
|