@redseed/redseed-ui-vue3 7.1.0 → 7.2.1
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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@redseed/redseed-ui-vue3",
|
|
3
|
-
"version": "7.1
|
|
3
|
+
"version": "7.2.1",
|
|
4
4
|
"description": "RedSeed UI Vue 3 components",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"repository": "https://github.com/redseedtraining/redseed-ui",
|
|
@@ -16,6 +16,6 @@
|
|
|
16
16
|
"@vueuse/core": "^13.9.0",
|
|
17
17
|
"lodash": "^4.17.21",
|
|
18
18
|
"lottie-web": "^5.13.0",
|
|
19
|
-
"vue": "^3.5.
|
|
19
|
+
"vue": "^3.5.22"
|
|
20
20
|
}
|
|
21
21
|
}
|
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
import { ref, computed } from 'vue'
|
|
3
3
|
|
|
4
4
|
const props = defineProps({
|
|
5
|
+
xs: {
|
|
6
|
+
type: Boolean,
|
|
7
|
+
default: false,
|
|
8
|
+
},
|
|
5
9
|
sm: {
|
|
6
10
|
type: Boolean,
|
|
7
11
|
default: false,
|
|
@@ -43,6 +47,7 @@ const iconOnly = computed(() => buttonElementRef.value && !buttonElementRef.valu
|
|
|
43
47
|
|
|
44
48
|
// button sizes
|
|
45
49
|
const sizes = {
|
|
50
|
+
xs: 'xs',
|
|
46
51
|
sm: 'sm',
|
|
47
52
|
md: 'md',
|
|
48
53
|
lg: 'lg',
|
|
@@ -52,6 +57,7 @@ const sizes = {
|
|
|
52
57
|
|
|
53
58
|
// computed button size is constrained to apply only one size at a time
|
|
54
59
|
const buttonSize = computed(() => {
|
|
60
|
+
if (props.xs) return sizes.xs
|
|
55
61
|
if (props.sm) return sizes.sm
|
|
56
62
|
if (props.md) return sizes.md
|
|
57
63
|
if (props.lg) return sizes.lg
|
|
@@ -66,6 +72,7 @@ const buttonSlotClass = computed(() => [
|
|
|
66
72
|
'rsui-button-slot',
|
|
67
73
|
{
|
|
68
74
|
// button sizes
|
|
75
|
+
'rsui-button-slot--xs': buttonSize.value === sizes.xs,
|
|
69
76
|
'rsui-button-slot--sm': buttonSize.value === sizes.sm,
|
|
70
77
|
'rsui-button-slot--md': buttonSize.value === sizes.md,
|
|
71
78
|
'rsui-button-slot--lg': buttonSize.value === sizes.lg,
|
|
@@ -73,6 +80,7 @@ const buttonSlotClass = computed(() => [
|
|
|
73
80
|
'rsui-button-slot--2xl': buttonSize.value === sizes['2xl'],
|
|
74
81
|
|
|
75
82
|
// button sizes with icon only
|
|
83
|
+
'rsui-button-slot--xs-icon': buttonSize.value === sizes.xs && iconOnly.value,
|
|
76
84
|
'rsui-button-slot--sm-icon': buttonSize.value === sizes.sm && iconOnly.value,
|
|
77
85
|
'rsui-button-slot--md-icon': buttonSize.value === sizes.md && iconOnly.value,
|
|
78
86
|
'rsui-button-slot--lg-icon': buttonSize.value === sizes.lg && iconOnly.value,
|
|
@@ -43,6 +43,18 @@ const props = defineProps({
|
|
|
43
43
|
default: false,
|
|
44
44
|
},
|
|
45
45
|
// modal variants
|
|
46
|
+
headerPadded: {
|
|
47
|
+
type: Boolean,
|
|
48
|
+
default: true,
|
|
49
|
+
},
|
|
50
|
+
bodyPadded: {
|
|
51
|
+
type: Boolean,
|
|
52
|
+
default: true,
|
|
53
|
+
},
|
|
54
|
+
footerPadded: {
|
|
55
|
+
type: Boolean,
|
|
56
|
+
default: true,
|
|
57
|
+
},
|
|
46
58
|
footerStart: {
|
|
47
59
|
type: Boolean,
|
|
48
60
|
default: false,
|
|
@@ -126,20 +138,33 @@ onUnmounted(() => {
|
|
|
126
138
|
:class="modalContentClass"
|
|
127
139
|
>
|
|
128
140
|
<div v-if="$slots.header && show"
|
|
129
|
-
class="
|
|
141
|
+
:class="{
|
|
142
|
+
'rsui-modal__header': true,
|
|
143
|
+
'rsui-modal__header--padded': headerPadded,
|
|
144
|
+
}"
|
|
130
145
|
>
|
|
131
146
|
<slot name="header"
|
|
132
147
|
:close="close"
|
|
133
148
|
></slot>
|
|
134
149
|
</div>
|
|
150
|
+
|
|
135
151
|
<div v-if="show"
|
|
136
|
-
class="
|
|
152
|
+
:class="{
|
|
153
|
+
'rsui-modal__body': true,
|
|
154
|
+
'rsui-modal__body--padded': bodyPadded,
|
|
155
|
+
}"
|
|
137
156
|
>
|
|
138
|
-
<slot
|
|
157
|
+
<slot>
|
|
158
|
+
<slot name="body"
|
|
159
|
+
:close="close"
|
|
160
|
+
></slot>
|
|
161
|
+
</slot>
|
|
139
162
|
</div>
|
|
163
|
+
|
|
140
164
|
<div v-if="$slots.footer && show"
|
|
141
165
|
:class="{
|
|
142
166
|
'rsui-modal__footer': true,
|
|
167
|
+
'rsui-modal__footer--padded': footerPadded,
|
|
143
168
|
'rsui-modal__footer--start': footerStart,
|
|
144
169
|
}"
|
|
145
170
|
>
|