✨ feat(components): add button delete element

Signed-off-by: csc530 <[email protected]>

Author: csc530

docs/.vuepress/client.ts

@@ -5,6 +5,7 @@ import DemoMenu from "../../src/demos/components/DemoMenu.vue";
 import DemoMessage from "../../src/demos/components/DemoMessage.vue";
 import DemoNavbar from "../../src/demos/components/DemoNavbar.vue";
 import DemoButton from "../../src/demos/elements/DemoButton.vue";
+import DemoDelete from "../../src/demos/elements/DemoDelete.vue";
 import DemoHeading from "../../src/demos/elements/DemoHeading.vue";
 import DemoIcon from "../../src/demos/elements/DemoIcon.vue";
 import DemoImage from "../../src/demos/elements/DemoImage.vue";
@@ -38,6 +39,7 @@ export default defineClientConfig({
 		app.component('DemoSelect', DemoSelect);
 		app.component('DemoTextArea', DemoTextArea);
 		app.component('DemoButton', DemoButton);
+		app.component('DemoDelete', DemoDelete);
 
 	}
 })

docs/changelog.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- Add Delete element
 
 ### Changed
 

docs/components/elements/BulmaDelete.md

@@ -0,0 +1,11 @@
+# vbDelete
+
+[Bulma Documentation](https://bulma.io/documentation/elements/delete/)
+
+a simple delete button
+
+## Props
+
+### size
+
+Type: [`BulmaSize`](../../types/common_types.md#bulmasize)

docs/examples.md

@@ -94,4 +94,10 @@ The components are within the green box, and the code is within the blue box.
 <demo-iframe name="demo button group">
  <demo-button-group/>
 </demo-iframe>
+
+## Delete
+
+<demo-iframe name="demo button group">
+ <demo-delete/>
+</demo-iframe>
 </ClientOnly>

docs/index.md

@@ -7,7 +7,7 @@ title: vuebulma Docs
 heroAlt: logo
 ################## heroText: stuff
 
-tagline: 👨🏿‍💻Improving current components⚡
+tagline: 👨🏿‍💻Adding **new** components🆕
 
 actions:
 

src/App.vue

@@ -1,6 +1,6 @@
 <template>
-	<demo-field />
+	<demo-delete />
 </template>
 
 <script lang="ts" setup>
-	import DemoField from "./demos/form/DemoField.vue";</script>
+	import DemoDelete from "./demos/elements/DemoDelete.vue";</script>

src/demos/elements/DemoDelete.vue

@@ -0,0 +1,30 @@
+<template>
+	<bulma-box style="background-image: linear-gradient(120deg, #00D1B2 0%, #41B883 100%);">
+		<BulmaDelete :size="size" />
+	</bulma-box>
+
+	<bulma-box>
+		<bulma-heading>Props</bulma-heading>
+		<fieldset
+				class="is-flex-mobile is-justify-content-center is-justify-content-space-between is-flex-wrap-wrap-reverse"
+				name="props">
+			<bulma-form-field is-horizontal label="size">
+				<bulma-select v-model="size" :options="getBulmaSizes()" />
+			</bulma-form-field>
+		</fieldset>
+	</bulma-box>
+
+</template>
+
+<script lang="ts" setup>
+
+	import {ref} from "vue";
+	import {BulmaSize, getBulmaSizes} from "../../types";
+	import BulmaBox from "../../vuebulma components/elements/BulmaBox.vue";
+	import BulmaDelete from "../../vuebulma components/elements/BulmaDelete.vue";
+	import BulmaHeading from "../../vuebulma components/elements/BulmaHeading.vue";
+	import BulmaSelect from "../../vuebulma components/form/BulmaSelect.vue";
+	import BulmaFormField from "../../vuebulma components/form/groups/BulmaFormField.vue";
+
+	const size = ref<BulmaSize>('default');
+</script>

src/vuebulma components/elements/BulmaDelete.vue

@@ -0,0 +1,13 @@
+<template>
+	<button :class="size" class="delete"></button>
+</template>
+
+<script lang="ts" setup>
+	import {computed} from "vue";
+	import {BulmaSize, toSizeClasses} from "../../types";
+
+	const props = defineProps<{
+		size?: BulmaSize
+	}>();
+	const size = computed(() => toSizeClasses(props.size));
+</script>

vite.config.ts

@@ -8,7 +8,6 @@ export default defineConfig({
 	css: {
 		preprocessorOptions: {
 			sass: {
-				// language=SASS
 				additionalData: ''
 			}
 		},