mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
refactor: ♻️ Port all buttons to new UI library
This commit is contained in:
Jesse Wierzbinski
parent
13faf840dd
commit
091615b04e
20 changed files with 120 additions and 155 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<button v-bind="$attrs" type="button" :disabled="loading"
|
||||
:class="['relative isolate text-base/6 font-semibold px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6 focus:outline-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] overflow-hidden before:shadow before:hidden after:absolute after:-z-10 after:-inset-px after:rounded-md before:disabled:shadow-none after:disabled:shadow-none text-white cursor-default rounded-md duration-200 hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed shadow-sm bg-[--btn-bg] before:bg-[--btn-bg] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 inline-flex items-center justify-center gap-x-3', theme && themes[theme]]">
|
||||
:class="['relative isolate text-base/6 font-semibold px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:shadow before:hidden after:absolute after:-z-10 after:-inset-px after:rounded-md before:disabled:shadow-none after:disabled:shadow-none text-white cursor-default rounded-md duration-200 hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed shadow-sm bg-[--btn-bg] before:bg-[--btn-bg] after:active:bg-[--btn-hover-overlay] after:duration-200 after:hover:bg-[--btn-hover-overlay] [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 inline-flex items-center justify-center gap-x-3', theme && themes[theme]]">
|
||||
<div data-spinner v-if="loading" class="absolute inset-0 bg-[--btn-bg] flex items-center justify-center">
|
||||
<iconify-icon icon="tabler:loader-2" height="none" class="animate-spin size-5" />
|
||||
</div>
|
||||
|
|
@ -20,6 +20,8 @@ const themes = {
|
|||
// Gradient: bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400
|
||||
gradient:
|
||||
"bg-[image:--btn-bg] before:bg-[image:--btn-bg] [--btn-border:theme(colors.primary.950/90%)] [--btn-bg:linear-gradient(to_right,theme(colors.primary.300),theme(colors.purple.300),theme(colors.indigo.400))] [--btn-hover-overlay:theme(colors.white/10%)] [--btn-icon:theme(colors.gray.100)] active:[--btn-icon:theme(colors.gray.50)] hover:[--btn-icon:theme(colors.gray.50)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] [&>[data-spinner]]:bg-[image:--btn-bg]",
|
||||
outline:
|
||||
"[--btn-border:theme(colors.zinc.950/90%)] [--btn-bg:transparent] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.200)] active:[--btn-icon:theme(colors.zinc.300)] hover:[--btn-icon:theme(colors.zinc.300)] hover:ring-1 ring-white/5",
|
||||
};
|
||||
|
||||
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,61 @@
|
|||
<Button theme="primary">Click me</Button>
|
||||
<Button theme="secondary">Click me</Button>
|
||||
<Button theme="gradient">Click me</Button>
|
||||
<Button theme="outline">Click me</Button>
|
||||
|
||||
<Button loading>Click me</Button>
|
||||
<Button theme="primary" loading>Click me</Button>
|
||||
<Button theme="secondary" loading>Click me</Button>
|
||||
<Button theme="gradient" loading>Click me</Button>
|
||||
<Button theme="outline" loading>Click me</Button>
|
||||
|
||||
<Button><Icon icon="tabler:certificate" />Gamer</Button>
|
||||
<Button theme="primary"><Icon icon="tabler:certificate" />Gamer</Button>
|
||||
<Button theme="secondary"><Icon icon="tabler:certificate" />Gamer</Button>
|
||||
<Button theme="gradient"><Icon icon="tabler:certificate" />Gamer</Button>
|
||||
<Button>
|
||||
<Icon icon="tabler:certificate" />Gamer
|
||||
</Button>
|
||||
<Button theme="primary">
|
||||
<Icon icon="tabler:certificate" />Gamer
|
||||
</Button>
|
||||
<Button theme="secondary">
|
||||
<Icon icon="tabler:certificate" />Gamer
|
||||
</Button>
|
||||
<Button theme="gradient">
|
||||
<Icon icon="tabler:certificate" />Gamer
|
||||
</Button>
|
||||
<Button theme="outline">
|
||||
<Icon icon="tabler:certificate" />Gamer
|
||||
</Button>
|
||||
|
||||
<Button><Icon icon="tabler:certificate" /></Button>
|
||||
<Button theme="primary"><Icon icon="tabler:certificate" /></Button>
|
||||
<Button theme="secondary"><Icon icon="tabler:certificate" /></Button>
|
||||
<Button theme="gradient"><Icon icon="tabler:certificate" /></Button>
|
||||
<Button>
|
||||
<Icon icon="tabler:certificate" />
|
||||
</Button>
|
||||
<Button theme="primary">
|
||||
<Icon icon="tabler:certificate" />
|
||||
</Button>
|
||||
<Button theme="secondary">
|
||||
<Icon icon="tabler:certificate" />
|
||||
</Button>
|
||||
<Button theme="gradient">
|
||||
<Icon icon="tabler:certificate" />
|
||||
</Button>
|
||||
<Button theme="outline">
|
||||
<Icon icon="tabler:certificate" />
|
||||
</Button>
|
||||
|
||||
<Button>Gamer<Icon icon="tabler:certificate" /></Button>
|
||||
<Button theme="primary">Gamer<Icon icon="tabler:certificate" /></Button>
|
||||
<Button theme="secondary">Gamer<Icon icon="tabler:certificate" /></Button>
|
||||
<Button theme="gradient">Gamer<Icon icon="tabler:certificate" /></Button>
|
||||
<Button>Gamer
|
||||
<Icon icon="tabler:certificate" />
|
||||
</Button>
|
||||
<Button theme="primary">Gamer
|
||||
<Icon icon="tabler:certificate" />
|
||||
</Button>
|
||||
<Button theme="secondary">Gamer
|
||||
<Icon icon="tabler:certificate" />
|
||||
</Button>
|
||||
<Button theme="gradient">Gamer
|
||||
<Icon icon="tabler:certificate" />
|
||||
</Button>
|
||||
<Button theme="outline">Gamer
|
||||
<Icon icon="tabler:certificate" />
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue