@redseed/redseed-ui-vue3 5.3.3 → 5.3.5
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,10 @@ defineProps({
|
|
|
25
25
|
type: Boolean,
|
|
26
26
|
default: true,
|
|
27
27
|
},
|
|
28
|
+
singleLine: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
default: true,
|
|
31
|
+
}
|
|
28
32
|
})
|
|
29
33
|
|
|
30
34
|
const cardHeaderElement = ref(null)
|
|
@@ -37,7 +41,12 @@ const emit = defineEmits(['click:more-actions'])
|
|
|
37
41
|
<div ref="cardHeaderElement"
|
|
38
42
|
class="rsui-card-header"
|
|
39
43
|
>
|
|
40
|
-
<div class="
|
|
44
|
+
<div :class="[
|
|
45
|
+
'rsui-card-header__header',
|
|
46
|
+
{
|
|
47
|
+
'rsui-card-header__header--single-line': singleLine,
|
|
48
|
+
}
|
|
49
|
+
]">
|
|
41
50
|
|
|
42
51
|
<!-- Avatar slot, optional -->
|
|
43
52
|
<div class="rsui-card-header__avatar"
|
|
@@ -49,10 +58,15 @@ const emit = defineEmits(['click:more-actions'])
|
|
|
49
58
|
<div class="rsui-card-header__text">
|
|
50
59
|
|
|
51
60
|
<!-- Title slot, default slot -->
|
|
52
|
-
<div class="rsui-card-header__title"
|
|
53
|
-
:
|
|
54
|
-
|
|
55
|
-
|
|
61
|
+
<div class="rsui-card-header__title-container">
|
|
62
|
+
<div :class="[
|
|
63
|
+
'rsui-card-header__title',
|
|
64
|
+
{
|
|
65
|
+
'rsui-card-header__title--single-line': singleLine,
|
|
66
|
+
}
|
|
67
|
+
]">
|
|
68
|
+
<slot></slot>
|
|
69
|
+
</div>
|
|
56
70
|
|
|
57
71
|
<!-- Badge slot, optional -->
|
|
58
72
|
<div class="rsui-card-header__badge"
|
|
@@ -63,9 +77,13 @@ const emit = defineEmits(['click:more-actions'])
|
|
|
63
77
|
</div>
|
|
64
78
|
|
|
65
79
|
<!-- Subtitle slot, optional -->
|
|
66
|
-
<div class="
|
|
80
|
+
<div :class="[
|
|
81
|
+
'rsui-card-header__subtitle',
|
|
82
|
+
{
|
|
83
|
+
'rsui-card-header__subtitle--single-line': singleLine,
|
|
84
|
+
}
|
|
85
|
+
]"
|
|
67
86
|
v-if="showSubtitle && $slots.subtitle"
|
|
68
|
-
:title="$slots.subtitle ? $slots.subtitle()[0].children : ''"
|
|
69
87
|
>
|
|
70
88
|
<slot name="subtitle"></slot>
|
|
71
89
|
</div>
|
|
@@ -110,7 +128,11 @@ const emit = defineEmits(['click:more-actions'])
|
|
|
110
128
|
@apply border-b border-rsui-grey-400 py-4 px-4 sm:px-6;
|
|
111
129
|
|
|
112
130
|
&__header {
|
|
113
|
-
@apply flex-1 flex justify-between
|
|
131
|
+
@apply flex-1 flex justify-between items-start gap-x-3;
|
|
132
|
+
|
|
133
|
+
&--single-line {
|
|
134
|
+
@apply md:items-center;
|
|
135
|
+
}
|
|
114
136
|
}
|
|
115
137
|
|
|
116
138
|
&__avatar {
|
|
@@ -122,13 +144,25 @@ const emit = defineEmits(['click:more-actions'])
|
|
|
122
144
|
@apply flex-1 flex flex-col gap-y-0.5 pt-2 md:pt-0;
|
|
123
145
|
}
|
|
124
146
|
|
|
125
|
-
&__title {
|
|
126
|
-
@apply text-lg leading-7 font-semibold text-rsui-grey-900 line-clamp-2 md:line-clamp-1;
|
|
147
|
+
&__title-container {
|
|
127
148
|
@apply flex flex-wrap items-center gap-y-1 gap-x-2;
|
|
149
|
+
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
&__title {
|
|
153
|
+
@apply text-lg leading-7 font-semibold text-rsui-grey-900;
|
|
154
|
+
|
|
155
|
+
&--single-line {
|
|
156
|
+
@apply line-clamp-2 md:line-clamp-1;
|
|
157
|
+
}
|
|
128
158
|
}
|
|
129
159
|
|
|
130
160
|
&__subtitle {
|
|
131
|
-
@apply text-sm leading-5 text-rsui-grey-700
|
|
161
|
+
@apply text-sm leading-5 text-rsui-grey-700;
|
|
162
|
+
|
|
163
|
+
&--single-line {
|
|
164
|
+
@apply line-clamp-3 md:line-clamp-1;
|
|
165
|
+
}
|
|
132
166
|
}
|
|
133
167
|
|
|
134
168
|
&__toolbar {
|
|
@@ -25,6 +25,10 @@ const props = defineProps({
|
|
|
25
25
|
type: Boolean,
|
|
26
26
|
default: false,
|
|
27
27
|
},
|
|
28
|
+
showHeader: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
default: true,
|
|
31
|
+
},
|
|
28
32
|
})
|
|
29
33
|
</script>
|
|
30
34
|
|
|
@@ -34,7 +38,7 @@ const props = defineProps({
|
|
|
34
38
|
:hoverable="false"
|
|
35
39
|
:padded="false"
|
|
36
40
|
>
|
|
37
|
-
<template #header>
|
|
41
|
+
<template #header v-if="showHeader">
|
|
38
42
|
<CardHeader
|
|
39
43
|
v-bind="$attrs.cardHeader"
|
|
40
44
|
@click:more-actions="$emit('click:more-actions')"
|