@redseed/redseed-ui-vue3 1.0.20 → 1.0.21
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
CHANGED
|
@@ -16,6 +16,7 @@ import FormFieldPasswordToggle from './src/components/FormField/FormFieldPasswor
|
|
|
16
16
|
import FormFieldSlot from './src/components/FormField/FormFieldSlot.vue'
|
|
17
17
|
import FormFieldText from './src/components/FormField/FormFieldText.vue'
|
|
18
18
|
import FormFieldTextSuffix from './src/components/FormField/FormFieldTextSuffix.vue'
|
|
19
|
+
import FormLogin from './src/components/Form/FormLogin.vue'
|
|
19
20
|
import FormRegister from './src/components/Form/FormRegister.vue'
|
|
20
21
|
import Image from './src/components/Image/Image.vue'
|
|
21
22
|
import LogoRedSeedBuild from './src/components/Logo/LogoRedSeedBuild.vue'
|
|
@@ -23,6 +24,7 @@ import LogoRedSeedCoach from './src/components/Logo/LogoRedSeedCoach.vue'
|
|
|
23
24
|
import LogoRedSeedCourses from './src/components/Logo/LogoRedSeedCourses.vue'
|
|
24
25
|
import LogoRedSeedLMS from './src/components/Logo/LogoRedSeedLMS.vue'
|
|
25
26
|
import MessageBox from './src/components/MessageBox/MessageBox.vue'
|
|
27
|
+
import SignInWithGoogle from './src/components/Social/SignInWithGoogle.vue'
|
|
26
28
|
import SignUpWithGoogle from './src/components/Social/SignUpWithGoogle.vue'
|
|
27
29
|
import TwoColumnLayout from './src/components/TwoColumnLayout/TwoColumnLayout.vue'
|
|
28
30
|
|
|
@@ -45,6 +47,7 @@ export {
|
|
|
45
47
|
FormFieldSlot,
|
|
46
48
|
FormFieldText,
|
|
47
49
|
FormFieldTextSuffix,
|
|
50
|
+
FormLogin,
|
|
48
51
|
FormRegister,
|
|
49
52
|
Image,
|
|
50
53
|
LogoRedSeedBuild,
|
|
@@ -52,6 +55,7 @@ export {
|
|
|
52
55
|
LogoRedSeedCourses,
|
|
53
56
|
LogoRedSeedLMS,
|
|
54
57
|
MessageBox,
|
|
58
|
+
SignInWithGoogle,
|
|
55
59
|
SignUpWithGoogle,
|
|
56
60
|
TwoColumnLayout,
|
|
57
61
|
}
|
package/package.json
CHANGED
|
@@ -0,0 +1,117 @@
|
|
|
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>
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
</script>
|
|
3
|
+
<template>
|
|
4
|
+
<button class="gsi-material-button">
|
|
5
|
+
<div class="gsi-material-button-state"></div>
|
|
6
|
+
<div class="gsi-material-button-content-wrapper">
|
|
7
|
+
<div class="gsi-material-button-icon">
|
|
8
|
+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;">
|
|
9
|
+
<path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
|
|
10
|
+
<path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
|
|
11
|
+
<path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
|
|
12
|
+
<path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
|
|
13
|
+
<path fill="none" d="M0 0h48v48H0z"></path>
|
|
14
|
+
</svg>
|
|
15
|
+
</div>
|
|
16
|
+
<span class="gsi-material-button-contents">Sign in with Google</span>
|
|
17
|
+
<span style="display: none;">Sign in with Google</span>
|
|
18
|
+
</div>
|
|
19
|
+
</button>
|
|
20
|
+
</template>
|
|
21
|
+
<style scoped>
|
|
22
|
+
.gsi-material-button {
|
|
23
|
+
-moz-user-select: none;
|
|
24
|
+
-webkit-user-select: none;
|
|
25
|
+
-ms-user-select: none;
|
|
26
|
+
-webkit-appearance: none;
|
|
27
|
+
background-color: WHITE;
|
|
28
|
+
background-image: none;
|
|
29
|
+
border: 1px solid #d1d5db;
|
|
30
|
+
-webkit-border-radius: 4px;
|
|
31
|
+
border-radius: 4px;
|
|
32
|
+
-webkit-box-sizing: border-box;
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
color: #1f1f1f;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
font-family: 'Roboto', arial, sans-serif;
|
|
37
|
+
font-size: 14px;
|
|
38
|
+
height: 40px;
|
|
39
|
+
letter-spacing: 0.25px;
|
|
40
|
+
outline: none;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
padding: 0 12px;
|
|
43
|
+
position: relative;
|
|
44
|
+
text-align: center;
|
|
45
|
+
-webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
|
|
46
|
+
transition: background-color .218s, border-color .218s, box-shadow .218s;
|
|
47
|
+
vertical-align: middle;
|
|
48
|
+
white-space: nowrap;
|
|
49
|
+
width: 100%;
|
|
50
|
+
max-width: 400px;
|
|
51
|
+
min-width: min-content;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.gsi-material-button .gsi-material-button-icon {
|
|
55
|
+
height: 20px;
|
|
56
|
+
margin-right: 12px;
|
|
57
|
+
min-width: 20px;
|
|
58
|
+
width: 20px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.gsi-material-button .gsi-material-button-content-wrapper {
|
|
62
|
+
-webkit-align-items: center;
|
|
63
|
+
align-items: center;
|
|
64
|
+
display: flex;
|
|
65
|
+
-webkit-flex-direction: row;
|
|
66
|
+
flex-direction: row;
|
|
67
|
+
-webkit-flex-wrap: nowrap;
|
|
68
|
+
flex-wrap: nowrap;
|
|
69
|
+
height: 100%;
|
|
70
|
+
justify-content: space-between;
|
|
71
|
+
position: relative;
|
|
72
|
+
width: 100%;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.gsi-material-button .gsi-material-button-contents {
|
|
76
|
+
-webkit-flex-grow: 1;
|
|
77
|
+
flex-grow: 1;
|
|
78
|
+
font-family: 'Roboto', arial, sans-serif;
|
|
79
|
+
font-weight: 500;
|
|
80
|
+
overflow: hidden;
|
|
81
|
+
text-overflow: ellipsis;
|
|
82
|
+
vertical-align: top;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.gsi-material-button .gsi-material-button-state {
|
|
86
|
+
-webkit-transition: opacity .218s;
|
|
87
|
+
transition: opacity .218s;
|
|
88
|
+
bottom: 0;
|
|
89
|
+
left: 0;
|
|
90
|
+
opacity: 0;
|
|
91
|
+
position: absolute;
|
|
92
|
+
right: 0;
|
|
93
|
+
top: 0;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.gsi-material-button:disabled {
|
|
97
|
+
cursor: default;
|
|
98
|
+
background-color: #ffffff61;
|
|
99
|
+
border-color: #1f1f1f1f;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.gsi-material-button:disabled .gsi-material-button-contents {
|
|
103
|
+
opacity: 38%;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.gsi-material-button:disabled .gsi-material-button-icon {
|
|
107
|
+
opacity: 38%;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.gsi-material-button:not(:disabled):active .gsi-material-button-state,
|
|
111
|
+
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
|
|
112
|
+
background-color: #303030;
|
|
113
|
+
opacity: 12%;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* .gsi-material-button:not(:disabled):hover {
|
|
117
|
+
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
|
|
118
|
+
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
|
|
119
|
+
} */
|
|
120
|
+
|
|
121
|
+
.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
|
|
122
|
+
background-color: #ffffff;
|
|
123
|
+
opacity: 8%;
|
|
124
|
+
}
|
|
125
|
+
</style>
|
|
@@ -113,10 +113,10 @@
|
|
|
113
113
|
opacity: 12%;
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
.gsi-material-button:not(:disabled):hover {
|
|
116
|
+
/* .gsi-material-button:not(:disabled):hover {
|
|
117
117
|
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
|
|
118
118
|
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
|
|
119
|
-
}
|
|
119
|
+
} */
|
|
120
120
|
|
|
121
121
|
.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
|
|
122
122
|
background-color: #ffffff;
|