@redseed/redseed-ui-vue3 1.0.21 → 1.1.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/index.js +8 -4
- package/package.json +1 -1
- package/src/components/Form/FormFieldsLogin.vue +89 -0
- package/src/components/Form/FormFieldsRegister.vue +133 -0
- package/src/components/Form/FormSlot.vue +35 -1
- package/src/components/Form/FormWrapperBuild.vue +33 -0
- package/src/components/Form/FormWrapperLMS.vue +33 -0
- package/src/components/Form/FormLogin.vue +0 -117
- package/src/components/Form/FormRegister.vue +0 -148
package/index.js
CHANGED
|
@@ -13,11 +13,13 @@ import FormFieldEmail from './src/components/FormField/FormFieldEmail.vue'
|
|
|
13
13
|
import FormFieldHidden from './src/components/FormField/FormFieldHidden.vue'
|
|
14
14
|
import FormFieldPassword from './src/components/FormField/FormFieldPassword.vue'
|
|
15
15
|
import FormFieldPasswordToggle from './src/components/FormField/FormFieldPasswordToggle.vue'
|
|
16
|
+
import FormFieldsLogin from './src/components/Form/FormFieldsLogin.vue'
|
|
16
17
|
import FormFieldSlot from './src/components/FormField/FormFieldSlot.vue'
|
|
18
|
+
import FormFieldsRegister from './src/components/Form/FormFieldsRegister.vue'
|
|
17
19
|
import FormFieldText from './src/components/FormField/FormFieldText.vue'
|
|
18
20
|
import FormFieldTextSuffix from './src/components/FormField/FormFieldTextSuffix.vue'
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
+
import FormWrapperBuild from './src/components/Form/FormWrapperBuild.vue'
|
|
22
|
+
import FormWrapperLMS from './src/components/Form/FormWrapperLMS.vue'
|
|
21
23
|
import Image from './src/components/Image/Image.vue'
|
|
22
24
|
import LogoRedSeedBuild from './src/components/Logo/LogoRedSeedBuild.vue'
|
|
23
25
|
import LogoRedSeedCoach from './src/components/Logo/LogoRedSeedCoach.vue'
|
|
@@ -44,11 +46,13 @@ export {
|
|
|
44
46
|
FormFieldHidden,
|
|
45
47
|
FormFieldPassword,
|
|
46
48
|
FormFieldPasswordToggle,
|
|
49
|
+
FormFieldsLogin,
|
|
47
50
|
FormFieldSlot,
|
|
51
|
+
FormFieldsRegister,
|
|
48
52
|
FormFieldText,
|
|
49
53
|
FormFieldTextSuffix,
|
|
50
|
-
|
|
51
|
-
|
|
54
|
+
FormWrapperBuild,
|
|
55
|
+
FormWrapperLMS,
|
|
52
56
|
Image,
|
|
53
57
|
LogoRedSeedBuild,
|
|
54
58
|
LogoRedSeedCoach,
|
package/package.json
CHANGED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref } from 'vue'
|
|
3
|
+
import ButtonPrimary from '../Button/ButtonPrimary.vue'
|
|
4
|
+
import FormFieldEmail from '../FormField/FormFieldEmail.vue'
|
|
5
|
+
import FormFieldPassword from '../FormField/FormFieldPassword.vue'
|
|
6
|
+
import FormFieldSlot from '../FormField/FormFieldSlot.vue'
|
|
7
|
+
|
|
8
|
+
const props = defineProps({
|
|
9
|
+
form: {
|
|
10
|
+
type: Object,
|
|
11
|
+
default: {
|
|
12
|
+
email: null,
|
|
13
|
+
password: null,
|
|
14
|
+
processing: false,
|
|
15
|
+
errors: {},
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
const formRef = ref(props.form)
|
|
21
|
+
</script>
|
|
22
|
+
<template>
|
|
23
|
+
<slot name="top-fields" :formRef="formRef"></slot>
|
|
24
|
+
|
|
25
|
+
<slot name="email-username" :formRef="formRef">
|
|
26
|
+
<FormFieldEmail
|
|
27
|
+
v-model="formRef.email"
|
|
28
|
+
id="email"
|
|
29
|
+
name="email"
|
|
30
|
+
>
|
|
31
|
+
<template #label>
|
|
32
|
+
<slot name="email-label">
|
|
33
|
+
Email
|
|
34
|
+
</slot>
|
|
35
|
+
</template>
|
|
36
|
+
|
|
37
|
+
<template #error v-if="formRef.errors.email">
|
|
38
|
+
{{ formRef.errors.email }}
|
|
39
|
+
</template>
|
|
40
|
+
</FormFieldEmail>
|
|
41
|
+
</slot>
|
|
42
|
+
|
|
43
|
+
<FormFieldPassword
|
|
44
|
+
v-model="formRef.password"
|
|
45
|
+
id="password"
|
|
46
|
+
name="password"
|
|
47
|
+
>
|
|
48
|
+
<template #label>
|
|
49
|
+
<slot name="password-label">
|
|
50
|
+
Password
|
|
51
|
+
</slot>
|
|
52
|
+
</template>
|
|
53
|
+
|
|
54
|
+
<template #error v-if="formRef.errors.password">
|
|
55
|
+
{{ formRef.errors.password }}
|
|
56
|
+
</template>
|
|
57
|
+
</FormFieldPassword>
|
|
58
|
+
|
|
59
|
+
<slot name="bottom-fields" :formRef="formRef"></slot>
|
|
60
|
+
|
|
61
|
+
<FormFieldSlot v-if="$slots.forgot"
|
|
62
|
+
class="form-field-forgot"
|
|
63
|
+
>
|
|
64
|
+
<slot name="forgot"></slot>
|
|
65
|
+
</FormFieldSlot>
|
|
66
|
+
|
|
67
|
+
<slot name="submit"
|
|
68
|
+
:formRef="formRef"
|
|
69
|
+
>
|
|
70
|
+
<ButtonPrimary full lg submit :disabled="form.processing">
|
|
71
|
+
<template #label>
|
|
72
|
+
<slot name="submit-label">
|
|
73
|
+
Log in
|
|
74
|
+
</slot>
|
|
75
|
+
</template>
|
|
76
|
+
</ButtonPrimary>
|
|
77
|
+
</slot>
|
|
78
|
+
|
|
79
|
+
<div v-if="$slots.signup" class="form-login__signup">
|
|
80
|
+
<slot name="signup"></slot>
|
|
81
|
+
</div>
|
|
82
|
+
</template>
|
|
83
|
+
<style lang="scss" scoped>
|
|
84
|
+
.form-login {
|
|
85
|
+
&__signup {
|
|
86
|
+
@apply text-sm pt-4;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
</style>
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref } from 'vue'
|
|
3
|
+
import ButtonPrimary from '../Button/ButtonPrimary.vue'
|
|
4
|
+
import FormFieldCheckbox from '../FormField/FormFieldCheckbox.vue'
|
|
5
|
+
import FormFieldEmail from '../FormField/FormFieldEmail.vue'
|
|
6
|
+
import FormFieldPasswordToggle from '../FormField/FormFieldPasswordToggle.vue'
|
|
7
|
+
import FormFieldText from '../FormField/FormFieldText.vue'
|
|
8
|
+
|
|
9
|
+
const props = defineProps({
|
|
10
|
+
form: {
|
|
11
|
+
type: Object,
|
|
12
|
+
default: {
|
|
13
|
+
name: null,
|
|
14
|
+
email: null,
|
|
15
|
+
password: null,
|
|
16
|
+
terms: false,
|
|
17
|
+
processing: false,
|
|
18
|
+
errors: {},
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
})
|
|
22
|
+
|
|
23
|
+
const formRef = ref(props.form)
|
|
24
|
+
</script>
|
|
25
|
+
<template>
|
|
26
|
+
<slot name="top-fields" :formRef="formRef"></slot>
|
|
27
|
+
|
|
28
|
+
<slot name="name-fields"
|
|
29
|
+
:formRef="formRef"
|
|
30
|
+
>
|
|
31
|
+
<FormFieldText
|
|
32
|
+
v-model="formRef.name"
|
|
33
|
+
id="name"
|
|
34
|
+
name="name"
|
|
35
|
+
>
|
|
36
|
+
<template #label>
|
|
37
|
+
<slot name="name-label">
|
|
38
|
+
Name
|
|
39
|
+
</slot>
|
|
40
|
+
</template>
|
|
41
|
+
|
|
42
|
+
<template #error v-if="formRef.errors.name">
|
|
43
|
+
{{ formRef.errors.name }}
|
|
44
|
+
</template>
|
|
45
|
+
</FormFieldText>
|
|
46
|
+
</slot>
|
|
47
|
+
|
|
48
|
+
<FormFieldEmail
|
|
49
|
+
v-model="formRef.email"
|
|
50
|
+
id="email"
|
|
51
|
+
name="email"
|
|
52
|
+
>
|
|
53
|
+
<template #label>
|
|
54
|
+
<slot name="email-label">
|
|
55
|
+
Email
|
|
56
|
+
</slot>
|
|
57
|
+
</template>
|
|
58
|
+
|
|
59
|
+
<template #error v-if="formRef.errors.email">
|
|
60
|
+
{{ formRef.errors.email }}
|
|
61
|
+
</template>
|
|
62
|
+
</FormFieldEmail>
|
|
63
|
+
|
|
64
|
+
<FormFieldPasswordToggle
|
|
65
|
+
v-model="formRef.password"
|
|
66
|
+
id="password"
|
|
67
|
+
name="password"
|
|
68
|
+
>
|
|
69
|
+
<template #label>
|
|
70
|
+
<slot name="password-label">
|
|
71
|
+
Password
|
|
72
|
+
</slot>
|
|
73
|
+
</template>
|
|
74
|
+
|
|
75
|
+
<template #error v-if="formRef.errors.password">
|
|
76
|
+
{{ formRef.errors.password }}
|
|
77
|
+
</template>
|
|
78
|
+
</FormFieldPasswordToggle>
|
|
79
|
+
|
|
80
|
+
<slot name="bottom-fields" :formRef="formRef"></slot>
|
|
81
|
+
|
|
82
|
+
<FormFieldCheckbox
|
|
83
|
+
v-if="$slots.terms"
|
|
84
|
+
v-model:checked="formRef.terms"
|
|
85
|
+
id="terms"
|
|
86
|
+
name="terms"
|
|
87
|
+
>
|
|
88
|
+
<template #label>
|
|
89
|
+
<slot name="terms"></slot>
|
|
90
|
+
</template>
|
|
91
|
+
|
|
92
|
+
<template #error v-if="formRef.errors.terms">
|
|
93
|
+
{{ formRef.errors.terms }}
|
|
94
|
+
</template>
|
|
95
|
+
</FormFieldCheckbox>
|
|
96
|
+
|
|
97
|
+
<slot name="recaptcha" :formRef="formRef"></slot>
|
|
98
|
+
|
|
99
|
+
<slot name="submit"
|
|
100
|
+
:formRef="formRef"
|
|
101
|
+
>
|
|
102
|
+
<ButtonPrimary full lg submit :disabled="form.processing">
|
|
103
|
+
<template #label>
|
|
104
|
+
<slot name="submit-label">
|
|
105
|
+
Register
|
|
106
|
+
</slot>
|
|
107
|
+
</template>
|
|
108
|
+
</ButtonPrimary>
|
|
109
|
+
</slot>
|
|
110
|
+
|
|
111
|
+
<div v-if="$slots.signin" class="form-register__signin">
|
|
112
|
+
<slot name="signin"></slot>
|
|
113
|
+
</div>
|
|
114
|
+
</template>
|
|
115
|
+
<style lang="scss" scoped>
|
|
116
|
+
.form-register {
|
|
117
|
+
&__or-container {
|
|
118
|
+
@apply w-full relative flex justify-center mb-2;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&__or-line {
|
|
122
|
+
@apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-gray-300 after:h-px after:w-full;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&__or {
|
|
126
|
+
@apply relative z-1 bg-white px-6;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&__signin {
|
|
130
|
+
@apply text-sm pt-4;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
</style>
|
|
@@ -7,7 +7,29 @@
|
|
|
7
7
|
</div>
|
|
8
8
|
|
|
9
9
|
<div class="form-slot__content">
|
|
10
|
-
<
|
|
10
|
+
<div v-if="$slots.top">
|
|
11
|
+
<slot name="top"></slot>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<slot name="social"></slot>
|
|
15
|
+
|
|
16
|
+
<div v-if="$slots.social"
|
|
17
|
+
class="form-slot__social-divider"
|
|
18
|
+
>
|
|
19
|
+
<div class="form-slot__social-divider__line">
|
|
20
|
+
<div class="form-slot__social-divider__or">
|
|
21
|
+
<slot name="or">
|
|
22
|
+
or
|
|
23
|
+
</slot>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<slot></slot>
|
|
29
|
+
|
|
30
|
+
<div v-if="$slots.bottom">
|
|
31
|
+
<slot name="bottom"></slot>
|
|
32
|
+
</div>
|
|
11
33
|
</div>
|
|
12
34
|
</div>
|
|
13
35
|
</template>
|
|
@@ -20,6 +42,18 @@
|
|
|
20
42
|
@apply mb-8;
|
|
21
43
|
}
|
|
22
44
|
|
|
45
|
+
&__social-divider {
|
|
46
|
+
@apply w-full relative flex justify-center mb-2;
|
|
47
|
+
|
|
48
|
+
&__line {
|
|
49
|
+
@apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-gray-300 after:h-px after:w-full;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&__or {
|
|
53
|
+
@apply relative z-1 bg-white px-6;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
23
57
|
&__content {
|
|
24
58
|
@apply w-full sm:max-w-md px-10 xs:px-12 md:px-16 py-10 bg-white shadow-md overflow-hidden rounded-lg;
|
|
25
59
|
> * {
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref } from 'vue'
|
|
3
|
+
import FormSlot from './FormSlot.vue'
|
|
4
|
+
import LogoRedSeedBuild from '../Logo/LogoRedSeedBuild.vue'
|
|
5
|
+
</script>
|
|
6
|
+
<template>
|
|
7
|
+
<FormSlot class="form-wrapper-build">
|
|
8
|
+
<template #image>
|
|
9
|
+
<LogoRedSeedBuild class="form-wrapper-build__image"></LogoRedSeedBuild>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<template #top v-if="$slots.top">
|
|
13
|
+
<slot name="top"></slot>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<template #social v-if="$slots.social">
|
|
17
|
+
<slot name="social"></slot>
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<slot></slot>
|
|
21
|
+
|
|
22
|
+
<template #bottom v-if="$slots.bottom">
|
|
23
|
+
<slot name="bottom"></slot>
|
|
24
|
+
</template>
|
|
25
|
+
</FormSlot>
|
|
26
|
+
</template>
|
|
27
|
+
<style lang="scss" scoped>
|
|
28
|
+
.form-wrapper-build {
|
|
29
|
+
&__image {
|
|
30
|
+
@apply w-72 sm:w-80;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
</style>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref } from 'vue'
|
|
3
|
+
import FormSlot from './FormSlot.vue'
|
|
4
|
+
import LogoRedSeedLMS from '../Logo/LogoRedSeedLMS.vue'
|
|
5
|
+
</script>
|
|
6
|
+
<template>
|
|
7
|
+
<FormSlot class="form-wrapper-lms">
|
|
8
|
+
<template #image>
|
|
9
|
+
<LogoRedSeedLMS class="form-wrapper-lms__image"></LogoRedSeedLMS>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<template #top v-if="$slots.top">
|
|
13
|
+
<slot name="top"></slot>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<template #social v-if="$slots.social">
|
|
17
|
+
<slot name="social"></slot>
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<slot></slot>
|
|
21
|
+
|
|
22
|
+
<template #bottom v-if="$slots.bottom">
|
|
23
|
+
<slot name="bottom"></slot>
|
|
24
|
+
</template>
|
|
25
|
+
</FormSlot>
|
|
26
|
+
</template>
|
|
27
|
+
<style lang="scss" scoped>
|
|
28
|
+
.form-wrapper-lms {
|
|
29
|
+
&__image {
|
|
30
|
+
@apply w-72 sm:w-80;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
</style>
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
import { ref } from 'vue'
|
|
3
|
-
import ButtonPrimary from '../Button/ButtonPrimary.vue'
|
|
4
|
-
import FormFieldEmail from '../FormField/FormFieldEmail.vue'
|
|
5
|
-
import FormFieldPassword from '../FormField/FormFieldPassword.vue'
|
|
6
|
-
import FormFieldText from '../FormField/FormFieldText.vue'
|
|
7
|
-
import FormFieldSlot from '../FormField/FormFieldSlot.vue'
|
|
8
|
-
import FormSlot from './FormSlot.vue'
|
|
9
|
-
|
|
10
|
-
const props = defineProps({
|
|
11
|
-
form: {
|
|
12
|
-
type: Object,
|
|
13
|
-
default: {
|
|
14
|
-
email: null,
|
|
15
|
-
password: null,
|
|
16
|
-
processing: false,
|
|
17
|
-
errors: {},
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
})
|
|
21
|
-
|
|
22
|
-
const formRef = ref(props.form)
|
|
23
|
-
</script>
|
|
24
|
-
<template>
|
|
25
|
-
<FormSlot class="form-login">
|
|
26
|
-
<template #image v-if="$slots.image">
|
|
27
|
-
<slot name="image"></slot>
|
|
28
|
-
</template>
|
|
29
|
-
|
|
30
|
-
<slot name="social"></slot>
|
|
31
|
-
|
|
32
|
-
<div v-if="$slots.social"
|
|
33
|
-
class="form-login__or-container"
|
|
34
|
-
>
|
|
35
|
-
<div class="form-login__or-line">
|
|
36
|
-
<div class="form-login__or">
|
|
37
|
-
<slot name="or">
|
|
38
|
-
or
|
|
39
|
-
</slot>
|
|
40
|
-
</div>
|
|
41
|
-
</div>
|
|
42
|
-
</div>
|
|
43
|
-
|
|
44
|
-
<slot name="email-username">
|
|
45
|
-
<FormFieldEmail
|
|
46
|
-
v-model="formRef.email"
|
|
47
|
-
id="email"
|
|
48
|
-
name="email"
|
|
49
|
-
>
|
|
50
|
-
<template #label>
|
|
51
|
-
Email
|
|
52
|
-
</template>
|
|
53
|
-
|
|
54
|
-
<template #error v-if="formRef.errors.email">
|
|
55
|
-
{{ formRef.errors.email }}
|
|
56
|
-
</template>
|
|
57
|
-
</FormFieldEmail>
|
|
58
|
-
</slot>
|
|
59
|
-
|
|
60
|
-
<FormFieldPassword
|
|
61
|
-
v-model="formRef.password"
|
|
62
|
-
id="password"
|
|
63
|
-
name="password"
|
|
64
|
-
>
|
|
65
|
-
<template #label>
|
|
66
|
-
Password
|
|
67
|
-
</template>
|
|
68
|
-
|
|
69
|
-
<template #error v-if="formRef.errors.password">
|
|
70
|
-
{{ formRef.errors.password }}
|
|
71
|
-
</template>
|
|
72
|
-
</FormFieldPassword>
|
|
73
|
-
|
|
74
|
-
<slot name="bottom-fields" :formRef="formRef"></slot>
|
|
75
|
-
|
|
76
|
-
<FormFieldSlot v-if="$slots.forgot"
|
|
77
|
-
class="form-field-forgot"
|
|
78
|
-
>
|
|
79
|
-
<slot name="forgot"></slot>
|
|
80
|
-
</FormFieldSlot>
|
|
81
|
-
|
|
82
|
-
<slot name="submit"
|
|
83
|
-
:formRef="formRef"
|
|
84
|
-
>
|
|
85
|
-
<ButtonPrimary full lg submit :disabled="form.processing">
|
|
86
|
-
<template #label>
|
|
87
|
-
<slot name="submit-label">
|
|
88
|
-
Log in
|
|
89
|
-
</slot>
|
|
90
|
-
</template>
|
|
91
|
-
</ButtonPrimary>
|
|
92
|
-
</slot>
|
|
93
|
-
|
|
94
|
-
<div v-if="$slots.signup" class="form-login__signup">
|
|
95
|
-
<slot name="signup"></slot>
|
|
96
|
-
</div>
|
|
97
|
-
</FormSlot>
|
|
98
|
-
</template>
|
|
99
|
-
<style lang="scss" scoped>
|
|
100
|
-
.form-login {
|
|
101
|
-
&__or-container {
|
|
102
|
-
@apply w-full relative flex justify-center mb-2;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
&__or-line {
|
|
106
|
-
@apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-gray-300 after:h-px after:w-full;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
&__or {
|
|
110
|
-
@apply relative z-1 bg-white px-6;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
&__signup {
|
|
114
|
-
@apply text-sm pt-4;
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
</style>
|
|
@@ -1,148 +0,0 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
import { ref } from 'vue'
|
|
3
|
-
import ButtonPrimary from '../Button/ButtonPrimary.vue'
|
|
4
|
-
import FormFieldCheckbox from '../FormField/FormFieldCheckbox.vue'
|
|
5
|
-
import FormFieldEmail from '../FormField/FormFieldEmail.vue'
|
|
6
|
-
import FormFieldPasswordToggle from '../FormField/FormFieldPasswordToggle.vue'
|
|
7
|
-
import FormFieldText from '../FormField/FormFieldText.vue'
|
|
8
|
-
import FormSlot from './FormSlot.vue'
|
|
9
|
-
|
|
10
|
-
const props = defineProps({
|
|
11
|
-
form: {
|
|
12
|
-
type: Object,
|
|
13
|
-
default: {
|
|
14
|
-
name: null,
|
|
15
|
-
email: null,
|
|
16
|
-
password: null,
|
|
17
|
-
terms: false,
|
|
18
|
-
processing: false,
|
|
19
|
-
errors: {},
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
})
|
|
23
|
-
|
|
24
|
-
const formRef = ref(props.form)
|
|
25
|
-
</script>
|
|
26
|
-
<template>
|
|
27
|
-
<FormSlot class="form-register">
|
|
28
|
-
<template #image v-if="$slots.image">
|
|
29
|
-
<slot name="image"></slot>
|
|
30
|
-
</template>
|
|
31
|
-
|
|
32
|
-
<slot name="social"></slot>
|
|
33
|
-
|
|
34
|
-
<div v-if="$slots.social"
|
|
35
|
-
class="form-register__or-container"
|
|
36
|
-
>
|
|
37
|
-
<div class="form-register__or-line">
|
|
38
|
-
<div class="form-register__or">
|
|
39
|
-
<slot name="or">
|
|
40
|
-
or
|
|
41
|
-
</slot>
|
|
42
|
-
</div>
|
|
43
|
-
</div>
|
|
44
|
-
</div>
|
|
45
|
-
|
|
46
|
-
<slot name="top-fields" :formRef="formRef"></slot>
|
|
47
|
-
|
|
48
|
-
<slot name="name"
|
|
49
|
-
:formRef="formRef"
|
|
50
|
-
>
|
|
51
|
-
<FormFieldText
|
|
52
|
-
v-model="formRef.name"
|
|
53
|
-
id="name"
|
|
54
|
-
name="name"
|
|
55
|
-
>
|
|
56
|
-
<template #label>
|
|
57
|
-
Name
|
|
58
|
-
</template>
|
|
59
|
-
|
|
60
|
-
<template #error v-if="formRef.errors.name">
|
|
61
|
-
{{ formRef.errors.name }}
|
|
62
|
-
</template>
|
|
63
|
-
</FormFieldText>
|
|
64
|
-
</slot>
|
|
65
|
-
|
|
66
|
-
<FormFieldEmail
|
|
67
|
-
v-model="formRef.email"
|
|
68
|
-
id="email"
|
|
69
|
-
name="email"
|
|
70
|
-
>
|
|
71
|
-
<template #label>
|
|
72
|
-
Email
|
|
73
|
-
</template>
|
|
74
|
-
|
|
75
|
-
<template #error v-if="formRef.errors.email">
|
|
76
|
-
{{ formRef.errors.email }}
|
|
77
|
-
</template>
|
|
78
|
-
</FormFieldEmail>
|
|
79
|
-
|
|
80
|
-
<FormFieldPasswordToggle
|
|
81
|
-
v-model="formRef.password"
|
|
82
|
-
id="password"
|
|
83
|
-
name="password"
|
|
84
|
-
>
|
|
85
|
-
<template #label>
|
|
86
|
-
Password
|
|
87
|
-
</template>
|
|
88
|
-
|
|
89
|
-
<template #error v-if="formRef.errors.password">
|
|
90
|
-
{{ formRef.errors.password }}
|
|
91
|
-
</template>
|
|
92
|
-
</FormFieldPasswordToggle>
|
|
93
|
-
|
|
94
|
-
<slot name="bottom-fields" :formRef="formRef"></slot>
|
|
95
|
-
|
|
96
|
-
<FormFieldCheckbox
|
|
97
|
-
v-if="$slots.terms"
|
|
98
|
-
v-model:checked="formRef.terms"
|
|
99
|
-
id="terms"
|
|
100
|
-
name="terms"
|
|
101
|
-
>
|
|
102
|
-
<template #label>
|
|
103
|
-
<slot name="terms"></slot>
|
|
104
|
-
</template>
|
|
105
|
-
|
|
106
|
-
<template #error v-if="formRef.errors.terms">
|
|
107
|
-
{{ formRef.errors.terms }}
|
|
108
|
-
</template>
|
|
109
|
-
</FormFieldCheckbox>
|
|
110
|
-
|
|
111
|
-
<slot name="recaptcha" :formRef="formRef"></slot>
|
|
112
|
-
|
|
113
|
-
<slot name="submit"
|
|
114
|
-
:formRef="formRef"
|
|
115
|
-
>
|
|
116
|
-
<ButtonPrimary full lg submit :disabled="form.processing">
|
|
117
|
-
<template #label>
|
|
118
|
-
<slot name="submit-label">
|
|
119
|
-
Register
|
|
120
|
-
</slot>
|
|
121
|
-
</template>
|
|
122
|
-
</ButtonPrimary>
|
|
123
|
-
</slot>
|
|
124
|
-
|
|
125
|
-
<div v-if="$slots.signin" class="form-register__signin">
|
|
126
|
-
<slot name="signin"></slot>
|
|
127
|
-
</div>
|
|
128
|
-
</FormSlot>
|
|
129
|
-
</template>
|
|
130
|
-
<style lang="scss" scoped>
|
|
131
|
-
.form-register {
|
|
132
|
-
&__or-container {
|
|
133
|
-
@apply w-full relative flex justify-center mb-2;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
&__or-line {
|
|
137
|
-
@apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-gray-300 after:h-px after:w-full;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
&__or {
|
|
141
|
-
@apply relative z-1 bg-white px-6;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
&__signin {
|
|
145
|
-
@apply text-sm pt-4;
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
</style>
|