mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
refactor: 🔥 Remove old code
This commit is contained in:
Jesse Wierzbinski
parent
4a33a5d00f
commit
569666fb82
|
|
@ -10,11 +10,6 @@ export default defineNuxtConfig({
|
||||||
"@nuxtjs/color-mode",
|
"@nuxtjs/color-mode",
|
||||||
],
|
],
|
||||||
ssr: false,
|
ssr: false,
|
||||||
vue: {
|
|
||||||
compilerOptions: {
|
|
||||||
isCustomElement: (tag) => tag === "iconify-icon",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
components: {
|
||||||
dirs: [],
|
dirs: [],
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
<template>
|
|
||||||
<button v-bind="$attrs" :type="($attrs.type as any) || '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 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>
|
|
||||||
<slot />
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import "iconify-icon";
|
|
||||||
import type { ButtonHTMLAttributes } from "vue";
|
|
||||||
|
|
||||||
const themes = {
|
|
||||||
primary:
|
|
||||||
"[--btn-bg:theme(colors.primary.600)] [--btn-hover-overlay:theme(colors.white/30%)] [--btn-icon:theme(colors.primary.200)] active:[--btn-icon:theme(colors.primary.100)] hover:[--btn-icon:theme(colors.primary.100)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5",
|
|
||||||
secondary:
|
|
||||||
"[--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",
|
|
||||||
// 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-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-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)] ring-1 ring-white/5",
|
|
||||||
ghost: "[--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 {}
|
|
||||||
|
|
||||||
defineProps<
|
|
||||||
Props & {
|
|
||||||
loading?: boolean;
|
|
||||||
theme?: keyof typeof themes;
|
|
||||||
}
|
|
||||||
>();
|
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
inheritAttrs: false,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style></style>
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
<template>
|
|
||||||
<iconify-icon data-slot="icon" :icon="icon" width="none" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import "iconify-icon";
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
icon: string;
|
|
||||||
}>();
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="flex flex-col max-w-72 mx-auto gap-4">
|
|
||||||
<Button>Click me</Button>
|
|
||||||
<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 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 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 theme="outline">Gamer
|
|
||||||
<Icon icon="tabler:certificate" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import Button from "../components/buttons/button.vue";
|
|
||||||
import Icon from "../components/icons/icon.vue";
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@cpluspatch/ui",
|
|
||||||
"displayName": "CPlusPatch UI",
|
|
||||||
"version": "0.0.0",
|
|
||||||
"author": {
|
|
||||||
"email": "jesse.wierzbinski@cpluspatch.com",
|
|
||||||
"name": "Jesse Wierzbinski (CPlusPatch)",
|
|
||||||
"url": "https://cpluspatch.com"
|
|
||||||
},
|
|
||||||
"readme": "README.md",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/versia-pub/frontend.git",
|
|
||||||
"directory": "packages/ui"
|
|
||||||
},
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/versia-pub/frontend/issues"
|
|
||||||
},
|
|
||||||
"license": "MIT",
|
|
||||||
"contributors": [
|
|
||||||
{
|
|
||||||
"email": "jesse.wierzbinski@cpluspatch.com",
|
|
||||||
"name": "Jesse Wierzbinski (CPlusPatch)",
|
|
||||||
"url": "https://cpluspatch.com"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"maintainers": [
|
|
||||||
{
|
|
||||||
"email": "jesse.wierzbinski@cpluspatch.com",
|
|
||||||
"name": "Jesse Wierzbinski (CPlusPatch)",
|
|
||||||
"url": "https://cpluspatch.com"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"description": "UI library for my apps",
|
|
||||||
"categories": ["Other"],
|
|
||||||
"type": "module",
|
|
||||||
"engines": {
|
|
||||||
"bun": ">=1.1.38"
|
|
||||||
},
|
|
||||||
"exports": {
|
|
||||||
".": {
|
|
||||||
"import": "./index.ts",
|
|
||||||
"default": "./index.ts"
|
|
||||||
},
|
|
||||||
"./types": {
|
|
||||||
"import": "./types.ts",
|
|
||||||
"default": "./types.ts"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"keywords": ["typescript", "vue", "tailwindcss"],
|
|
||||||
"packageManager": "bun@1.1.38"
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mx-auto max-w-2xl w-full">
|
<div class="mx-auto max-w-2xl w-full">
|
||||||
<div class="shrink-0 p-10 h-dvh" v-if="!identity">
|
<TimelineScroller>
|
||||||
<button type="button"
|
|
||||||
class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
|
|
||||||
<iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-gray-400" />
|
|
||||||
<span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
|
|
||||||
will
|
|
||||||
appear here
|
|
||||||
when you
|
|
||||||
sign in</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<TimelineScroller v-else>
|
|
||||||
<div class="rounded overflow-hidden">
|
<div class="rounded overflow-hidden">
|
||||||
<Notifications />
|
<Notifications />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue