@globalbrain/sefirot 3.7.0 → 3.8.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.
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import IconSuccess from '@iconify-icons/ph/check-bold'
|
|
3
|
+
import IconInfo from '@iconify-icons/ph/info-bold'
|
|
4
|
+
import IconWarning from '@iconify-icons/ph/warning-bold'
|
|
5
|
+
import IconDanger from '@iconify-icons/ph/warning-octagon-bold'
|
|
6
|
+
import SIcon from './SIcon.vue'
|
|
7
|
+
|
|
8
|
+
withDefaults(defineProps<{
|
|
9
|
+
mode?: 'info' | 'success' | 'warning' | 'danger'
|
|
10
|
+
}>(), {
|
|
11
|
+
mode: 'info'
|
|
12
|
+
})
|
|
13
|
+
|
|
14
|
+
const iconDict = {
|
|
15
|
+
info: IconInfo,
|
|
16
|
+
success: IconSuccess,
|
|
17
|
+
warning: IconWarning,
|
|
18
|
+
danger: IconDanger
|
|
19
|
+
} as const
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<template>
|
|
23
|
+
<div class="SAlert" :class="[mode]">
|
|
24
|
+
<div class="icon">
|
|
25
|
+
<SIcon :icon="iconDict[mode]" class="icon-svg" />
|
|
26
|
+
</div>
|
|
27
|
+
<div class="content">
|
|
28
|
+
<slot />
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</template>
|
|
32
|
+
|
|
33
|
+
<style scoped lang="postcss">
|
|
34
|
+
.SAlert {
|
|
35
|
+
display: grid;
|
|
36
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
37
|
+
gap: 14px;
|
|
38
|
+
border: 1px solid var(--alert-border-color);
|
|
39
|
+
border-radius: 6px;
|
|
40
|
+
padding: 16px;
|
|
41
|
+
background-color: var(--alert-bg-color);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.icon {
|
|
45
|
+
display: flex;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
align-items: center;
|
|
48
|
+
height: 24px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.icon-svg {
|
|
52
|
+
width: 20px;
|
|
53
|
+
height: 20px;
|
|
54
|
+
color: var(--alert-icon-color);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.content {
|
|
58
|
+
display: flex;
|
|
59
|
+
flex-direction: column;
|
|
60
|
+
gap: 16px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.content :slotted(p) {
|
|
64
|
+
margin: 0;
|
|
65
|
+
max-width: 65ch;
|
|
66
|
+
line-height: 24px;
|
|
67
|
+
font-size: 14px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.content :slotted(a) {
|
|
71
|
+
font-weight: 500;
|
|
72
|
+
text-decoration: underline;
|
|
73
|
+
transition: color 0.25s;
|
|
74
|
+
|
|
75
|
+
&:hover {
|
|
76
|
+
color: var(--c-text-2);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.SAlert.info {
|
|
81
|
+
--alert-border-color: var(--c-border-info-1);
|
|
82
|
+
--alert-bg-color: var(--c-bg-info-dimm-a1);
|
|
83
|
+
--alert-icon-color: var(--c-text-info-1);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.SAlert.success {
|
|
87
|
+
--alert-border-color: var(--c-border-success-1);
|
|
88
|
+
--alert-bg-color: var(--c-bg-success-dimm-a1);
|
|
89
|
+
--alert-icon-color: var(--c-text-success-1);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.SAlert.warning {
|
|
93
|
+
--alert-border-color: var(--c-border-warning-1);
|
|
94
|
+
--alert-bg-color: var(--c-bg-warning-dimm-a1);
|
|
95
|
+
--alert-icon-color: var(--c-text-warning-1);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.SAlert.danger {
|
|
99
|
+
--alert-border-color: var(--c-border-danger-1);
|
|
100
|
+
--alert-bg-color: var(--c-bg-danger-dimm-a1);
|
|
101
|
+
--alert-icon-color: var(--c-text-danger-1);
|
|
102
|
+
}
|
|
103
|
+
</style>
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import IconGoogle from '@iconify-icons/ri/google-fill'
|
|
3
|
+
import { computed } from 'vue'
|
|
4
|
+
import SButton from './SButton.vue'
|
|
5
|
+
import SLink from './SLink.vue'
|
|
6
|
+
import SIconGbLogoWhite from './icon/SIconGbLogoWhite.vue'
|
|
7
|
+
|
|
8
|
+
export interface CoverTitle {
|
|
9
|
+
text: string
|
|
10
|
+
link: string
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export interface CoverPhotographer {
|
|
14
|
+
text: string
|
|
15
|
+
link: string
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export interface Action {
|
|
19
|
+
type: 'google'
|
|
20
|
+
onClick: () => Promise<void>
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const props = defineProps<{
|
|
24
|
+
cover: string
|
|
25
|
+
coverTitle: CoverTitle
|
|
26
|
+
coverPhotographer: CoverPhotographer
|
|
27
|
+
actions: Action[]
|
|
28
|
+
}>()
|
|
29
|
+
|
|
30
|
+
const coverBgImageStyle = computed(() => `url(${props.cover})`)
|
|
31
|
+
|
|
32
|
+
function getActionLabel(type: Action['type']) {
|
|
33
|
+
switch (type) {
|
|
34
|
+
case 'google':
|
|
35
|
+
return 'Sign in via Google'
|
|
36
|
+
default:
|
|
37
|
+
throw new Error('[sefirot] Invalid action type')
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function getIconComponent(type: Action['type']) {
|
|
42
|
+
switch (type) {
|
|
43
|
+
case 'google':
|
|
44
|
+
return IconGoogle
|
|
45
|
+
default:
|
|
46
|
+
throw new Error('[sefirot] Invalid action type')
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<template>
|
|
52
|
+
<div class="SLoginPage dark">
|
|
53
|
+
<div class="cover">
|
|
54
|
+
<div class="cover-caption">
|
|
55
|
+
<p class="cover-caption-text">
|
|
56
|
+
<SLink class="cover-caption-link" :href="coverTitle.link">
|
|
57
|
+
{{ coverTitle.text }}
|
|
58
|
+
</SLink>
|
|
59
|
+
by
|
|
60
|
+
<SLink class="cover-caption-link" :href="coverPhotographer.link">
|
|
61
|
+
{{ coverPhotographer.text }}
|
|
62
|
+
</SLink>
|
|
63
|
+
</p>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="form">
|
|
67
|
+
<div class="form-container">
|
|
68
|
+
<div class="form-logo">
|
|
69
|
+
<SIconGbLogoWhite class="form-logo-icon" />
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<div class="form-content">
|
|
73
|
+
<h1 class="form-title">Sign in to account</h1>
|
|
74
|
+
<p class="form-lead">This is a very closed login form meant for specific audiences only. If you can’t login, well, you know who to ask.</p>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<div class="form-actions">
|
|
78
|
+
<SButton
|
|
79
|
+
v-for="action in actions"
|
|
80
|
+
:key="action.type"
|
|
81
|
+
size="large"
|
|
82
|
+
mode="white"
|
|
83
|
+
rounded
|
|
84
|
+
:label="getActionLabel(action.type)"
|
|
85
|
+
:icon="getIconComponent(action.type)"
|
|
86
|
+
@click="action.onClick"
|
|
87
|
+
/>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</template>
|
|
93
|
+
|
|
94
|
+
<style scoped lang="postcss">
|
|
95
|
+
.SLoginPage {
|
|
96
|
+
position: relative;
|
|
97
|
+
background-color: var(--c-bg-elv-1);
|
|
98
|
+
|
|
99
|
+
@media (min-width: 768px) {
|
|
100
|
+
display: grid;
|
|
101
|
+
grid-template-columns: 1fr 392px;
|
|
102
|
+
gap: 4px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@media (min-width: 1024px) {
|
|
106
|
+
grid-template-columns: 1fr 480px;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.cover {
|
|
111
|
+
display: none;
|
|
112
|
+
width: 100%;
|
|
113
|
+
height: 100%;
|
|
114
|
+
background-image: v-bind(coverBgImageStyle);
|
|
115
|
+
background-position: 50% 50%;
|
|
116
|
+
background-size: cover;
|
|
117
|
+
background-repeat: no-repeat;
|
|
118
|
+
|
|
119
|
+
@media (min-width: 768px) {
|
|
120
|
+
display: block;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.cover-caption {
|
|
125
|
+
position: absolute;
|
|
126
|
+
left: 0;
|
|
127
|
+
bottom: 0;
|
|
128
|
+
border-top: 4px solid var(--c-bg-elv-1);
|
|
129
|
+
border-right: 4px solid var(--c-bg-elv-1);
|
|
130
|
+
padding: 16px 24px;
|
|
131
|
+
font-size: 12px;
|
|
132
|
+
background-color: var(--c-bg-elv-2);
|
|
133
|
+
|
|
134
|
+
@media (min-width: 768px) {
|
|
135
|
+
display: block;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.cover-caption-text {
|
|
140
|
+
color: var(--c-text-2);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.cover-caption-link {
|
|
144
|
+
color: var(--c-text-1);
|
|
145
|
+
transition: color 0.25s;
|
|
146
|
+
|
|
147
|
+
&:hover {
|
|
148
|
+
color: var(--c-text-2);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.form {
|
|
153
|
+
padding: 96px 32px 48px;
|
|
154
|
+
min-height: 100vh;
|
|
155
|
+
background-color: var(--c-bg-elv-2);
|
|
156
|
+
|
|
157
|
+
@media (min-width: 768px) {
|
|
158
|
+
display: flex;
|
|
159
|
+
justify-content: center;
|
|
160
|
+
align-items: center;
|
|
161
|
+
padding: 48px;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.form-container {
|
|
166
|
+
@media (min-width: 768px) {
|
|
167
|
+
margin-top: -96px;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.form-logo {
|
|
172
|
+
margin: 0 auto;
|
|
173
|
+
width: 80px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.form-content {
|
|
177
|
+
padding-top: 64px;
|
|
178
|
+
text-align: center;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.form-title {
|
|
182
|
+
font-size: 20px;
|
|
183
|
+
font-weight: 600;
|
|
184
|
+
color: var(--c-text-1);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.form-lead {
|
|
188
|
+
margin: 0 auto;
|
|
189
|
+
padding: 12px;
|
|
190
|
+
max-width: 336px;
|
|
191
|
+
font-size: 14px;
|
|
192
|
+
color: var(--c-text-2);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.form-actions {
|
|
196
|
+
display: flex;
|
|
197
|
+
flex-direction: column;
|
|
198
|
+
align-items: center;
|
|
199
|
+
gap: 8px;
|
|
200
|
+
padding-top: 24px;
|
|
201
|
+
text-align: center;
|
|
202
|
+
margin: 0 auto;
|
|
203
|
+
}
|
|
204
|
+
</style>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 192">
|
|
3
|
+
<polygon class="line" points="140.49 21.76 140.49 36.09 192 17.32 192 3 140.49 21.76 " />
|
|
4
|
+
<polygon class="line" points="42.93 159.04 0 174.68 0 189 42.93 173.36 42.93 159.04 " />
|
|
5
|
+
<path class="mark" d="M82.7,57v5.63a24.68,24.68,0,0,0-15.42-5.84c-14.66,0-28.11,11.55-28.11,36,0,27.18,12.22,38.32,27.43,38.32,6.33,0,11.49-2.55,16.06-6.22-.48,19.11-6.5,22.06-24.48,28.61v14.32c23.72-8.65,38.23-13.59,38.23-42.56V52ZM53.16,92.37c0-15.08,5.43-22.69,15.48-22.69,5.45,0,10.57,3.08,14.06,6.42V112c-3.57,3.44-8.29,6.21-13.52,6.21C58.86,118.19,53.16,110.31,53.16,92.37Z " />
|
|
6
|
+
<path class="mark" d="M143.47,57.57c-7.32,0-13.17,3.46-18.23,8.13V27.39l-13.58,4.94V129h13.58v-6.53a24.77,24.77,0,0,0,17.57,8c14.51,0,27.55-11.33,27.55-35.31C170.36,68.49,158.52,57.57,143.47,57.57Zm-2,60.22c-6.92,0-13.31-5.06-16.37-9.19V79.15c3.59-4.53,9.31-8.92,15.84-8.92,10.11,0,15.7,7.72,15.7,25.31C156.65,110.33,151.33,117.79,141.48,117.79Z " />
|
|
7
|
+
</svg>
|
|
8
|
+
</template>
|
|
9
|
+
|
|
10
|
+
<style scoped lang="postcss">
|
|
11
|
+
.line { fill: #979fa4; }
|
|
12
|
+
.mark { fill: #ffffff; }
|
|
13
|
+
</style>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
viewBox="0 0 16 16"
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
fill-rule="evenodd"
|
|
6
|
+
clip-rule="evenodd"
|
|
7
|
+
stroke-linejoin="round"
|
|
8
|
+
stroke-miterlimit="1.414"
|
|
9
|
+
>
|
|
10
|
+
<path d="M8.16 6.857V9.6h4.537c-.183 1.177-1.37 3.45-4.537 3.45-2.73 0-4.96-2.26-4.96-5.05s2.23-5.05 4.96-5.05c1.554 0 2.594.66 3.19 1.233l2.17-2.092C12.126.79 10.32 0 8.16 0c-4.423 0-8 3.577-8 8s3.577 8 8 8c4.617 0 7.68-3.246 7.68-7.817 0-.526-.057-.926-.126-1.326H8.16z" />
|
|
11
|
+
</svg>
|
|
12
|
+
</template>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@globalbrain/sefirot",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.8.0",
|
|
4
4
|
"packageManager": "pnpm@8.10.5",
|
|
5
5
|
"description": "Vue Components for Global Brain Design System.",
|
|
6
6
|
"author": "Kia Ishii <ka.ishii@globalbrains.com>",
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"@iconify-icons/ph": "^1.2.5",
|
|
42
|
+
"@iconify-icons/ri": "^1.2.10",
|
|
42
43
|
"@iconify/vue": "^4.1.1",
|
|
43
44
|
"@tanstack/vue-virtual": "3.0.0-beta.62",
|
|
44
45
|
"@types/body-scroll-lock": "^3.1.2",
|
|
@@ -66,6 +67,7 @@
|
|
|
66
67
|
"@globalbrain/eslint-config": "^1.5.2",
|
|
67
68
|
"@histoire/plugin-vue": "^0.17.5",
|
|
68
69
|
"@iconify-icons/ph": "^1.2.5",
|
|
70
|
+
"@iconify-icons/ri": "^1.2.10",
|
|
69
71
|
"@iconify/vue": "^4.1.1",
|
|
70
72
|
"@release-it/conventional-changelog": "^8.0.1",
|
|
71
73
|
"@tanstack/vue-virtual": "3.0.0-beta.62",
|