@redseed/redseed-ui-vue3 2.5.0 → 2.6.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 +1 -1
- package/src/components/Form/FormFieldset.vue +30 -0
- package/src/components/Form/index.js +2 -0
- package/src/components/FormField/FormFieldCheckbox.vue +5 -5
- package/src/components/FormField/FormFieldSelect.vue +1 -1
- package/src/components/FormField/FormFieldSlot.vue +6 -4
- package/src/components/Loader/Loader.vue +61 -5
package/package.json
CHANGED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
defineOptions({
|
|
3
|
+
inheritAttrs: false,
|
|
4
|
+
})
|
|
5
|
+
</script>
|
|
6
|
+
<template>
|
|
7
|
+
<div class="rsui-fieldset">
|
|
8
|
+
<fieldset v-bind="$attrs">
|
|
9
|
+
<legend>
|
|
10
|
+
<slot name="legend"></slot>
|
|
11
|
+
</legend>
|
|
12
|
+
<div class="rsui-fieldset__fields">
|
|
13
|
+
<slot></slot>
|
|
14
|
+
</div>
|
|
15
|
+
</fieldset>
|
|
16
|
+
</div>
|
|
17
|
+
</template>
|
|
18
|
+
<style lang="scss" scoped>
|
|
19
|
+
.rsui-fieldset {
|
|
20
|
+
fieldset {
|
|
21
|
+
}
|
|
22
|
+
legend {
|
|
23
|
+
@apply text-base text-rsui-default font-semibold;
|
|
24
|
+
}
|
|
25
|
+
&__fields {
|
|
26
|
+
@apply mt-3 px-2;
|
|
27
|
+
@apply flex flex-col gap-3;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
</style>
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import FormFieldset from './FormFieldset.vue'
|
|
1
2
|
import FormFieldsLogin from './FormFieldsLogin.vue'
|
|
2
3
|
import FormFieldsRegister from './FormFieldsRegister.vue'
|
|
3
4
|
import FormSlot from './FormSlot.vue'
|
|
@@ -5,6 +6,7 @@ import FormWrapperBuild from './FormWrapperBuild.vue'
|
|
|
5
6
|
import FormWrapperLMS from './FormWrapperLMS.vue'
|
|
6
7
|
|
|
7
8
|
export {
|
|
9
|
+
FormFieldset,
|
|
8
10
|
FormFieldsLogin,
|
|
9
11
|
FormFieldsRegister,
|
|
10
12
|
FormSlot,
|
|
@@ -52,18 +52,18 @@ function check(event) {
|
|
|
52
52
|
@apply flex;
|
|
53
53
|
}
|
|
54
54
|
&__label {
|
|
55
|
-
@apply ml-2;
|
|
55
|
+
@apply ml-2 font-normal;
|
|
56
56
|
}
|
|
57
57
|
&__check {
|
|
58
|
-
@apply size-6 shrink-0 relative bg-white rounded-md;
|
|
59
|
-
@apply has-[:disabled]:text-rsui-light;
|
|
58
|
+
@apply size-6 shrink-0 relative bg-white rounded-md cursor-pointer;
|
|
59
|
+
@apply has-[:disabled]:text-rsui-light has-[:disabled]:cursor-default;
|
|
60
60
|
|
|
61
61
|
input[type="checkbox"] {
|
|
62
|
-
@apply appearance-none absolute inset-0 z-0 rounded-md transition focus:outline-none;
|
|
62
|
+
@apply appearance-none absolute inset-0 z-0 rounded-md transition focus:outline-none cursor-pointer;
|
|
63
63
|
@apply w-full h-full text-rsui-default border border-rsui-grey-200 text-transparent bg-none;
|
|
64
64
|
@apply focus:ring focus:ring-highlight focus:border-highlight;
|
|
65
65
|
@apply invalid:border-danger invalid:ring-0;
|
|
66
|
-
@apply disabled:text-rsui-light disabled:bg-rsui-grey-200;
|
|
66
|
+
@apply disabled:text-rsui-light disabled:bg-rsui-grey-200 disabled:cursor-default;
|
|
67
67
|
}
|
|
68
68
|
svg {
|
|
69
69
|
@apply size-full relative z-1;
|
|
@@ -158,7 +158,7 @@ function choose(option) {
|
|
|
158
158
|
|
|
159
159
|
select {
|
|
160
160
|
@apply pl-5 pr-14 truncate;
|
|
161
|
-
@apply appearance-none rounded-full
|
|
161
|
+
@apply appearance-none rounded-full;
|
|
162
162
|
@apply focus:ring focus:ring-highlight focus:border-highlight;
|
|
163
163
|
option {
|
|
164
164
|
@apply hidden;
|
|
@@ -33,7 +33,9 @@ const formFieldSlotClass = computed(() => [
|
|
|
33
33
|
<slot name="label"></slot>
|
|
34
34
|
</label>
|
|
35
35
|
</div>
|
|
36
|
-
<div
|
|
36
|
+
<div v-if="$slots.default || $slots.help || $slots.error"
|
|
37
|
+
class="rsui-form-field-slot__field"
|
|
38
|
+
>
|
|
37
39
|
<slot></slot>
|
|
38
40
|
<div v-if="$slots.help"
|
|
39
41
|
class="rsui-form-field-slot__help"
|
|
@@ -62,7 +64,7 @@ const formFieldSlotClass = computed(() => [
|
|
|
62
64
|
|
|
63
65
|
&__label {
|
|
64
66
|
label {
|
|
65
|
-
@apply font-
|
|
67
|
+
@apply font-semibold text-base text-rsui-default;
|
|
66
68
|
}
|
|
67
69
|
}
|
|
68
70
|
|
|
@@ -91,11 +93,11 @@ const formFieldSlotClass = computed(() => [
|
|
|
91
93
|
@apply disabled:text-rsui-light disabled:bg-rsui-grey-200 disabled:ring-0;
|
|
92
94
|
}
|
|
93
95
|
select {
|
|
94
|
-
@apply block w-full border ring-0 bg-none;
|
|
96
|
+
@apply block w-full border ring-0 bg-none cursor-pointer;
|
|
95
97
|
@apply text-base text-rsui-default transition py-3 px-4 rounded-md outline-none focus:outline-none;
|
|
96
98
|
@apply bg-white placeholder-rsui-light border-rsui-grey-200;
|
|
97
99
|
@apply invalid:border-danger invalid:ring-0;
|
|
98
|
-
@apply disabled:text-rsui-light disabled:bg-rsui-grey-200 disabled:ring-0;
|
|
100
|
+
@apply disabled:text-rsui-light disabled:bg-rsui-grey-200 disabled:ring-0 disabled:cursor-default;
|
|
99
101
|
}
|
|
100
102
|
}
|
|
101
103
|
</style>
|
|
@@ -1,8 +1,44 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import { ref, onMounted } from 'vue'
|
|
2
|
+
import { ref, computed, onMounted } from 'vue'
|
|
3
3
|
import lottie from 'lottie-web'
|
|
4
4
|
import LottieCubes from './LottieCubes.json'
|
|
5
5
|
|
|
6
|
+
const props = defineProps({
|
|
7
|
+
primary: {
|
|
8
|
+
type: Boolean,
|
|
9
|
+
default: false,
|
|
10
|
+
},
|
|
11
|
+
secondary: {
|
|
12
|
+
type: Boolean,
|
|
13
|
+
default: false,
|
|
14
|
+
},
|
|
15
|
+
tertiary: {
|
|
16
|
+
type: Boolean,
|
|
17
|
+
default: false,
|
|
18
|
+
},
|
|
19
|
+
danger: {
|
|
20
|
+
type: Boolean,
|
|
21
|
+
default: false,
|
|
22
|
+
},
|
|
23
|
+
white: {
|
|
24
|
+
type: Boolean,
|
|
25
|
+
default: false,
|
|
26
|
+
},
|
|
27
|
+
})
|
|
28
|
+
|
|
29
|
+
const defaultColor = computed(() => !props.secondary && !props.tertiary && !props.danger && !props.white)
|
|
30
|
+
|
|
31
|
+
const loaderClass = computed(() => [
|
|
32
|
+
'rsui-loader',
|
|
33
|
+
{
|
|
34
|
+
'rsui-loader--primary': props.primary || defaultColor.value,
|
|
35
|
+
'rsui-loader--secondary': props.secondary,
|
|
36
|
+
'rsui-loader--tertiary': props.tertiary,
|
|
37
|
+
'rsui-loader--danger': props.danger,
|
|
38
|
+
'rsui-loader--white': props.white,
|
|
39
|
+
}
|
|
40
|
+
])
|
|
41
|
+
|
|
6
42
|
const loaderElement = ref(null)
|
|
7
43
|
|
|
8
44
|
function load() {
|
|
@@ -23,16 +59,36 @@ onMounted(load)
|
|
|
23
59
|
</script>
|
|
24
60
|
<template>
|
|
25
61
|
<div ref="loaderElement"
|
|
26
|
-
class="
|
|
62
|
+
:class="loaderClass"
|
|
27
63
|
></div>
|
|
28
64
|
</template>
|
|
29
65
|
<style lang="scss" scoped>
|
|
30
66
|
.rsui-loader {
|
|
31
|
-
@apply
|
|
32
|
-
|
|
33
|
-
path {
|
|
67
|
+
@apply max-w-24 max-h-24 min-w-3 min-h-3 transition;
|
|
68
|
+
&--primary {
|
|
69
|
+
:deep(path) {
|
|
34
70
|
@apply fill-primary;
|
|
35
71
|
}
|
|
36
72
|
}
|
|
73
|
+
&--secondary {
|
|
74
|
+
:deep(path) {
|
|
75
|
+
@apply fill-secondary;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
&--tertiary {
|
|
79
|
+
:deep(path) {
|
|
80
|
+
@apply fill-tertiary-content;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
&--danger {
|
|
84
|
+
:deep(path) {
|
|
85
|
+
@apply fill-danger;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
&--white {
|
|
89
|
+
:deep(path) {
|
|
90
|
+
@apply fill-white;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
37
93
|
}
|
|
38
94
|
</style>
|