@redseed/redseed-ui-vue3 7.0.2 → 7.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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@redseed/redseed-ui-vue3",
|
|
3
|
-
"version": "7.0
|
|
3
|
+
"version": "7.2.0",
|
|
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,
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
const props = defineProps({
|
|
3
|
+
topAside: {
|
|
4
|
+
type: Boolean,
|
|
5
|
+
required: false,
|
|
6
|
+
},
|
|
3
7
|
leftAside: {
|
|
4
8
|
type: Boolean,
|
|
5
9
|
required: false,
|
|
@@ -7,17 +11,24 @@ const props = defineProps({
|
|
|
7
11
|
})
|
|
8
12
|
</script>
|
|
9
13
|
<template>
|
|
10
|
-
<div
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
<div class="rsui-two-column-layout">
|
|
15
|
+
<div
|
|
16
|
+
:class="[
|
|
17
|
+
'rsui-two-column-layout__container',
|
|
18
|
+
{
|
|
19
|
+
'rsui-two-column-layout__container--top-aside': topAside,
|
|
20
|
+
'rsui-two-column-layout__container--left-aside': leftAside,
|
|
21
|
+
}
|
|
22
|
+
]"
|
|
19
23
|
>
|
|
20
|
-
<
|
|
24
|
+
<div class="rsui-two-column-layout__main">
|
|
25
|
+
<slot name="main"></slot>
|
|
26
|
+
</div>
|
|
27
|
+
<div v-if="$slots.aside"
|
|
28
|
+
class="rsui-two-column-layout__aside"
|
|
29
|
+
>
|
|
30
|
+
<slot name="aside"></slot>
|
|
31
|
+
</div>
|
|
21
32
|
</div>
|
|
22
33
|
</div>
|
|
23
34
|
</template>
|