frontend: Implement a component for buttons

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/frontend/src/components/BasicComponents.ts b/frontend/src/components/BasicComponents.ts
index 60bc3cff9e343b9b90ff4ca2bc1c5419d9791c72..4a26d97c606fde7d07be3c2d22093629ea2bb86f 100644 (file)
--- a/frontend/src/components/BasicComponents.ts
+++ b/frontend/src/components/BasicComponents.ts
@@ -5,6 +5,7 @@ import Container from "@/components/Container.vue";
 import Section from "@/components/Section.vue";
 
 // Elements
+import Button from "@/components/Button.vue";
 import Block from "@/components/Block.vue";
 import Box from "@/components/Box.vue";
 import Notification from "@/components/Notification.vue";
@@ -27,6 +28,7 @@ export default {
                app.component("Container", Container)
                app.component("Block", Block)
                app.component("Box", Box)
+               app.component("Button", Button)
                app.component("Icon", Icon)
                app.component("Loader", Loader)
                app.component("Modal", Modal)

diff --git a/frontend/src/components/Button.vue b/frontend/src/components/Button.vue
new file mode 100644 (file)
index 0000000..d9dd73f
--- /dev/null
+++ b/frontend/src/components/Button.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+       const props = defineProps<{
+               loading: boolean,
+
+               // States
+               isPrimary?: boolean,
+               isSuccess?: boolean,
+               isWarning?: boolean,
+               isDanger? : boolean,
+
+               // Sizes
+               isLarge?  : boolean,
+               isMedium? : boolean,
+               isSmall?  : boolean,
+
+               // Full Width
+               isFullWidth?: boolean,
+       }>();
+</script>
+
+<template>
+       <button class="button" :class="{
+                               // Is this loading?
+                               'is-loading' : loading,
+
+                               // States
+                               'is-primary' : isPrimary,
+                               'is-success' : isSuccess,
+                               'is-warning' : isWarning,
+                               'is-danger'  : isDanger,
+
+                               // Sizes
+                               'is-large'   : isLarge,
+                               'is-medium'  : isMedium,
+                               'is-small'   : isSmall,
+
+                               // Full Width
+                               'is-fullwidth' : isFullWidth,
+                       }">
+               <slot />
+       </button>
+</template>