Skip to content

Commit 584519a

Browse files
xiaoluobodingxiaoluoboding
committed
feat: change the shape type
1 parent c376824 commit 584519a

File tree

3 files changed

+21
-66
lines changed

3 files changed

+21
-66
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,8 @@ yarn add @supabase/supabase-js @supabase/auth-ui-shared @supa-kit/auth-ui-vue -D
7070
<Auth
7171
:supabaseClient="supabaseClient"
7272
:appearance="{
73-
theme: ThemeSupa
73+
theme: ThemeSupa,
74+
brand: 'emerald'
7475
}"
7576
/>
7677
...

‎packages/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import type {
2020
export interface Appearance extends BaseAppearance {
2121
brand: keyof typeof colors
2222
size?: 'default' | 'sm' | 'md' | 'lg'
23-
shape: 'square' | 'rounded' | 'pill'
23+
shape?: 'square' | 'rounded' | 'pill'
2424
style?: {
2525
anchor?: CSSProperties
2626
button?: CSSProperties

‎src/App.vue

Lines changed: 18 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
class="relative lg:mx-auto lg:max-w-md 2xl:max-w-md bg-secondary rounded-2xl"
1313
>
1414
<div
15-
:class="classes[brandColor]"
15+
:class="brandClasses[authBrandColor]"
1616
class="rounded-2xl lg:min-w-md 2xl:min-w-md"
1717
>
1818
<div
@@ -39,8 +39,8 @@
3939
<Auth
4040
:appearance="{
4141
theme: ThemeSupa,
42-
brand: brandColor,
43-
shape: shape
42+
brand: authBrandColor,
43+
shape: authShape
4444
}"
4545
:supabaseClient="supabaseClient"
4646
v-model:view="view"
@@ -65,7 +65,7 @@
6565
class="w-10 rounded-full p-2"
6666
:style="{
6767
background: backgroundColor,
68-
color: brandColor
68+
color: authBrandColor
6969
}"
7070
>
7171
<IconPalette />
@@ -103,64 +103,18 @@
103103
</div>
104104
<div class="flex items-center gap-3">
105105
<Button
106+
v-for="color in brandList"
107+
:key="color"
106108
variant="outline"
107109
size="icon"
108110
:class="
109111
cn(
110-
'rounded-full border-emerald-500 text-brand-foreground bg-emerald-500/20 hover:bg-emerald-500/50',
111-
brandColor === 'emerald' &&
112-
'bg-emerald-500 border-emerald-800 dark:border-emerald-200 border-2'
112+
`rounded-full border-${color}-500 text-brand-foreground bg-${color}-500/20 hover:bg-${color}-500/50`,
113+
authBrandColor === color &&
114+
`bg-${color}-500 border-${color}-800 dark:border-${color}-200 border-2`
113115
)
114116
"
115-
@click="brandColor = 'emerald'"
116-
/>
117-
<Button
118-
variant="outline"
119-
size="icon"
120-
:class="
121-
cn(
122-
'rounded-full border-violet-500 text-brand-foreground bg-violet-500/20 hover:bg-violet-500/50',
123-
brandColor === 'violet' &&
124-
'bg-violet-500 border-violet-800 dark:border-violet-200 border-2'
125-
)
126-
"
127-
@click="brandColor = 'violet'"
128-
/>
129-
<Button
130-
variant="outline"
131-
size="icon"
132-
:class="
133-
cn(
134-
'rounded-full border-fuchsia-500 text-brand-foreground bg-fuchsia-500/20 hover:bg-fuchsia-500/50',
135-
brandColor === 'fuchsia' &&
136-
'bg-fuchsia-500 border-fuchsia-800 dark:border-fuchsia-200 border-2'
137-
)
138-
"
139-
@click="brandColor = 'fuchsia'"
140-
/>
141-
<Button
142-
variant="outline"
143-
size="icon"
144-
:class="
145-
cn(
146-
'rounded-full border-sky-500 text-brand-foreground bg-sky-500/20 hover:bg-sky-500/50',
147-
brandColor === 'sky' &&
148-
'bg-sky-500 border-sky-800 dark:border-sky-200 border-2'
149-
)
150-
"
151-
@click="brandColor = 'sky'"
152-
/>
153-
<Button
154-
variant="outline"
155-
size="icon"
156-
:class="
157-
cn(
158-
'rounded-full border-amber-500 text-brand-foreground bg-amber-500/20 hover:bg-amber-500/50',
159-
brandColor === 'amber' &&
160-
'bg-amber-500 border-amber-800 dark:border-amber-200 border-2'
161-
)
162-
"
163-
@click="brandColor = 'amber'"
117+
@click="authBrandColor = color"
164118
/>
165119
</div>
166120
</div>
@@ -172,17 +126,17 @@
172126
</div>
173127
<div class="flex items-center gap-3">
174128
<ToggleButton
175-
v-model:selected="shape"
129+
v-model:selected="authShape"
176130
:defaultValue="shapeList[0]"
177131
class="rounded-none border-b-0 border-l-0 bg-neutral-100 dark:bg-neutral-800"
178132
/>
179133
<ToggleButton
180-
v-model:selected="shape"
134+
v-model:selected="authShape"
181135
:defaultValue="shapeList[1]"
182136
class="rounded-xl border-b-0 border-l-0 bg-neutral-100 dark:bg-neutral-800"
183137
/>
184138
<ToggleButton
185-
v-model:selected="shape"
139+
v-model:selected="authShape"
186140
:defaultValue="shapeList[2]"
187141
class="rounded-2xl border-b-0 border-l-0 bg-neutral-100 dark:bg-neutral-800"
188142
/>
@@ -284,7 +238,7 @@ const { supabaseUser } = useSupabaseUser(supabaseClient)
284238
const { locale } = useI18n()
285239
const { en, zh } = useLanguage()
286240
287-
const classes: { [key: string]: string } = {
241+
const brandClasses: { [key: string]: string } = {
288242
emerald: 'container-emeraldshadow',
289243
violet: 'container-violetshadow',
290244
fuchsia: 'container-fuchsiashadow',
@@ -313,17 +267,17 @@ const views: { id: AuthViewType; title: string }[] = [
313267
{ id: 'anonymous_sign_in', title: 'Anonymous Sign-ins' }
314268
]
315269
316-
const brandColor = ref(brandList[0])
317-
const shape = ref(shapeList[1])
270+
const authBrandColor = ref(brandList[0])
271+
const authShape = ref(shapeList[1])
318272
const socialLayout = ref(socialAlignments[0])
319273
const view = ref(views[0].id)
320274
321275
const currentColor = computed(() => {
322-
return colors[brandColor.value]['500']
276+
return colors[authBrandColor.value]['500']
323277
})
324278
const backgroundColor = computed(() => {
325279
const opacity = isDark.value ? 0.2 : 0.48
326-
const color = colors[brandColor.value]['500']
280+
const color = colors[authBrandColor.value]['500']
327281
return colord(color).alpha(opacity).toRgbString()
328282
})
329283
const theme = computed(() => (isDark.value ? 'dark' : 'default'))

0 commit comments

Comments
 (0)