Finished button component for now
This commit is contained in:
lucast committed
1 parent
e74366a881
commit
0432fa743d
5 files changed
+220
-3
No files matched your search
@@ -1,3 +1,5 @@
|
||||
$color-background: #1a202c;
|
||||
$color-text: rgba(255, 255, 255, 0.92);
|
||||
$color-border: rgba(255, 255, 255, 0.16);
|
||||
$color-button: rgba(255, 255, 255, 0.08);
|
||||
$color-button-hover: rgba(255, 255, 255, 0.16);
|
||||
+76
-2
@@ -1,5 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
import { NuxtLink } from "#components"
|
||||
|
||||
interface ButtonProps {
|
||||
to?: string
|
||||
type?: "button" | "submit" | "link"
|
||||
variant?: "default" | "ghost"
|
||||
full?: boolean
|
||||
iconName?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<ButtonProps>(), {
|
||||
type: "button",
|
||||
variant: "default",
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button>
|
||||
<component
|
||||
:is="
|
||||
props.type == 'link' && props.to != undefined ? NuxtLink : 'button'
|
||||
"
|
||||
:to="props.to"
|
||||
:class="[
|
||||
`button type-${props.variant}`,
|
||||
{ full: props.full, icon: $slots.icon || props.iconName },
|
||||
]"
|
||||
>
|
||||
<span class="icon-wrapper">
|
||||
<slot name="icon" v-if="!props.iconName" />
|
||||
<Icon :name="props.iconName" v-else />
|
||||
</span>
|
||||
<slot />
|
||||
</button>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "@/styles/colors" as *;
|
||||
|
||||
.button {
|
||||
padding: 0.6rem 1rem;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
border-radius: 0.3rem;
|
||||
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.button,
|
||||
.icon,
|
||||
.icon-wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
gap: 0.7rem;
|
||||
|
||||
.icon-wrapper {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.type-default {
|
||||
background-color: $color-button;
|
||||
}
|
||||
|
||||
.type-default:hover,
|
||||
.type-ghost:hover {
|
||||
background-color: $color-button-hover;
|
||||
}
|
||||
|
||||
.type-ghost {
|
||||
}
|
||||
</style>
|
||||
+1
-1
@@ -4,7 +4,7 @@ import { fileURLToPath } from "node:url"
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: "2025-07-15",
|
||||
devtools: { enabled: true },
|
||||
modules: ["@nuxt/fonts"],
|
||||
modules: ["@nuxt/fonts", "@nuxt/icon"],
|
||||
components: [
|
||||
{
|
||||
path: "~/ui",
|
||||
|
||||
Generated
+140
@@ -8,6 +8,7 @@
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@nuxt/fonts": "0.11.4",
|
||||
"@nuxt/icon": "^2.1.0",
|
||||
"nuxt": "^4.2.0",
|
||||
"vue": "^3.5.22",
|
||||
"vue-router": "^4.6.3"
|
||||
@@ -17,6 +18,28 @@
|
||||
"sass-embedded": "^1.93.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@antfu/install-pkg": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
|
||||
"integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"package-manager-detector": "^1.3.0",
|
||||
"tinyexec": "^1.0.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@antfu/utils": {
|
||||
"version": "9.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-9.3.0.tgz",
|
||||
"integrity": "sha512-9hFT4RauhcUzqOE4f1+frMKLZrgNog5b06I7VmZQV1BkvwvqrbC8EBZf3L1eEL2AKb6rNKjER0sEvJiSP1FXEA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.27.1",
|
||||
"license": "MIT",
|
||||
@@ -467,6 +490,52 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@iconify/collections": {
|
||||
"version": "1.0.615",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.615.tgz",
|
||||
"integrity": "sha512-OBBvPu0CAdl042CfDBxt4zWVUxTwnK2kRBatab/y8d/t2XML9QGrA8A2hpaIFpYPPILSs6a4+gBkAGVXSKkBsQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@iconify/types": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@iconify/types": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
|
||||
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@iconify/utils": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.0.2.tgz",
|
||||
"integrity": "sha512-EfJS0rLfVuRuJRn4psJHtK2A9TqVnkxPpHY6lYHiB9+8eSuudsxbwMiavocG45ujOo6FJ+CIRlRnlOGinzkaGQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@antfu/install-pkg": "^1.1.0",
|
||||
"@antfu/utils": "^9.2.0",
|
||||
"@iconify/types": "^2.0.0",
|
||||
"debug": "^4.4.1",
|
||||
"globals": "^15.15.0",
|
||||
"kolorist": "^1.8.0",
|
||||
"local-pkg": "^1.1.1",
|
||||
"mlly": "^1.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@iconify/vue": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
|
||||
"integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@iconify/types": "^2.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/cyberalien"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": ">=3"
|
||||
}
|
||||
},
|
||||
"node_modules/@ioredis/commands": {
|
||||
"version": "1.4.0",
|
||||
"license": "MIT"
|
||||
@@ -884,6 +953,59 @@
|
||||
"unstorage": "^1.16.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@nuxt/icon": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-2.1.0.tgz",
|
||||
"integrity": "sha512-m+XQrgzeK5gQ1HkB7G7u1os6egoD07fiHKijG7NPxqT5yZUGOjKJ7X/Le10l3QWRKyCB+IiU0t+eUqSvh+SULg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@iconify/collections": "^1.0.608",
|
||||
"@iconify/types": "^2.0.0",
|
||||
"@iconify/utils": "^3.0.2",
|
||||
"@iconify/vue": "^5.0.0",
|
||||
"@nuxt/devtools-kit": "^2.6.5",
|
||||
"@nuxt/kit": "^4.1.3",
|
||||
"consola": "^3.4.2",
|
||||
"local-pkg": "^1.1.2",
|
||||
"mlly": "^1.8.0",
|
||||
"ohash": "^2.0.11",
|
||||
"pathe": "^2.0.3",
|
||||
"picomatch": "^4.0.3",
|
||||
"std-env": "^3.10.0",
|
||||
"tinyglobby": "^0.2.15"
|
||||
}
|
||||
},
|
||||
"node_modules/@nuxt/icon/node_modules/@nuxt/kit": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.0.tgz",
|
||||
"integrity": "sha512-1yN3LL6RDN5GjkNLPUYCbNRkaYnat6hqejPyfIBBVzrWOrpiQeNMGxQM/IcVdaSuBJXAnu0sUvTKXpXkmPhljg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"c12": "^3.3.1",
|
||||
"consola": "^3.4.2",
|
||||
"defu": "^6.1.4",
|
||||
"destr": "^2.0.5",
|
||||
"errx": "^0.1.0",
|
||||
"exsolve": "^1.0.7",
|
||||
"ignore": "^7.0.5",
|
||||
"jiti": "^2.6.1",
|
||||
"klona": "^2.0.6",
|
||||
"mlly": "^1.8.0",
|
||||
"ohash": "^2.0.11",
|
||||
"pathe": "^2.0.3",
|
||||
"pkg-types": "^2.3.0",
|
||||
"rc9": "^2.1.2",
|
||||
"scule": "^1.3.0",
|
||||
"semver": "^7.7.3",
|
||||
"tinyglobby": "^0.2.15",
|
||||
"ufo": "^1.6.1",
|
||||
"unctx": "^2.4.1",
|
||||
"untyped": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@nuxt/kit": {
|
||||
"version": "3.19.3",
|
||||
"license": "MIT",
|
||||
@@ -3528,6 +3650,18 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/globals": {
|
||||
"version": "15.15.0",
|
||||
"resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
|
||||
"integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/globby": {
|
||||
"version": "15.0.0",
|
||||
"license": "MIT",
|
||||
@@ -4004,6 +4138,12 @@
|
||||
"version": "1.2.0",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/kolorist": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
|
||||
"integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/launch-editor": {
|
||||
"version": "2.11.1",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/fonts": "0.11.4",
|
||||
"@nuxt/icon": "^2.1.0",
|
||||
"nuxt": "^4.2.0",
|
||||
"vue": "^3.5.22",
|
||||
"vue-router": "^4.6.3"
|
||||
|
||||
Reference in new issue
Block a user