versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 19:49:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: ♻️ Port all buttons to new UI library

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-27 14:09:05 -10:00
parent 13faf840dd
commit 091615b04e
No known key found for this signature in database
20 changed files with 120 additions and 155 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/buttons/button-base.vue
View file

@ -1,23 +0,0 @@
<template>
<button v-bind="$props" 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)] 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]', loading && '[&>*]:invisible']">
<div v-if="loading" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 !visible size-5">
<iconify-icon icon="tabler:loader-2" height="none" class="animate-spin size-5" />
</div>
<slot />
</button>
</template>
<script lang="ts" setup>
import type { ButtonHTMLAttributes } from "vue";
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
defineProps<
Props & {
loading?: boolean;
}
>();
</script>
<style></style>

6
components/buttons/button-mobile-navbar.vue
View file

@ -1,12 +1,12 @@
<template>
<ButtonBase
class="hover:bg-white/5 text-xs max-w-full w-full h-full !p-0">
<iconify-icon :icon="icon" class="size-6" width="none" />
<ButtonBase class="hover:bg-white/5 text-xs max-w-full w-full h-full !p-0">
<Icon :icon="icon" class="!size-6" />
</ButtonBase>
</template>
<script lang="ts" setup>
import ButtonBase from "~/packages/ui/components/buttons/button.vue";
import Icon from "~/packages/ui/components/icons/icon.vue";
defineProps<{
icon: string;

23
components/buttons/button-primary.vue
View file

@ -1,23 +0,0 @@
<template>
<ButtonBase
class="[--btn-border:theme(colors.primary.950/90%)] [--btn-bg:theme(colors.primary.600)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.primary.400)] active:[--btn-icon:theme(colors.primary.300)] hover:[--btn-icon:theme(colors.primary.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5"
v-bind="$props">
<slot />
</ButtonBase>
</template>
<script lang="ts" setup>
import type { ButtonHTMLAttributes } from "vue";
import ButtonBase from "~/packages/ui/components/buttons/button.vue";
// import ButtonBase from "./button-base.vue";
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
defineProps<
Props & {
loading?: boolean;
}
>();
</script>
<style></style>

22
components/buttons/button-secondary.vue
View file

@ -1,22 +0,0 @@
<template>
<ButtonBase
class="[--btn-border:theme(colors.zinc.950/90%)] [--btn-bg:theme(colors.zinc.800)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.zinc.300)] hover:[--btn-icon:theme(colors.zinc.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5"
v-bind="$props" :loading="loading">
<slot />
</ButtonBase>
</template>
<script lang="ts" setup>
import type { ButtonHTMLAttributes } from "vue";
import ButtonBase from "./button-base.vue";
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
defineProps<
Props & {
loading?: boolean;
}
>();
</script>
<style></style>