Button

src/App.vue

@@ -1,5 +1,3 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <main>Vue-Tailwind</main>
 </template>

src/assets/icons/LoadingSpinner.vue

@@ -0,0 +1,58 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g class="spinner_Wezc">
+      <circle cx="12" cy="2.5" r="1.5" opacity=".14" />
+      <circle cx="16.75" cy="3.77" r="1.5" opacity=".29" />
+      <circle cx="20.23" cy="7.25" r="1.5" opacity=".43" />
+      <circle cx="21.50" cy="12.00" r="1.5" opacity=".57" />
+      <circle cx="20.23" cy="16.75" r="1.5" opacity=".71" />
+      <circle cx="16.75" cy="20.23" r="1.5" opacity=".86" />
+      <circle cx="12" cy="21.5" r="1.5" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.spinner_Wezc {
+  transform-origin: center;
+  animation: spinner_Oiah 0.75s step-end infinite;
+}
+@keyframes spinner_Oiah {
+  8.3% {
+    transform: rotate(30deg);
+  }
+  16.6% {
+    transform: rotate(60deg);
+  }
+  25% {
+    transform: rotate(90deg);
+  }
+  33.3% {
+    transform: rotate(120deg);
+  }
+  41.6% {
+    transform: rotate(150deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  58.3% {
+    transform: rotate(210deg);
+  }
+  66.6% {
+    transform: rotate(240deg);
+  }
+  75% {
+    transform: rotate(270deg);
+  }
+  83.3% {
+    transform: rotate(300deg);
+  }
+  91.6% {
+    transform: rotate(330deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/components/DxhButton.vue

@@ -0,0 +1,65 @@
+<template>
+  <button
+    v-if="!href"
+    :type="type"
+    class="border px-1 pb-0.5"
+    :class="{ 'w-full': block, 'opacity-70 cursor-not-allowed': disabled || loading }"
+    :disabled="disabled || loading"
+    :autofocus="autofocus"
+    @click="handleClick"
+  >
+    <div class="flex items-center justify-center">
+      <slot v-if="loading" name="loading">
+        <Spinner />
+      </slot>
+      <slot v-else>
+        <span>Click me</span>
+      </slot>
+    </div>
+  </button>
+
+  <a
+    v-else
+    :href="!disabled || (!loading && href)"
+    :target="target"
+    class="border px-1 pb-0.5 inline-block"
+    :class="{ 'w-full': block, 'opacity-70 pointer-events-none': disabled || loading }"
+    :disabled="disabled || loading"
+    :autofocus="autofocus"
+    @click="handleClick"
+  >
+    <div class="flex items-center justify-center">
+      <slot v-if="loading" name="loading">
+        <Spinner />
+      </slot>
+      <slot v-else>
+        <span>Click me</span>
+      </slot>
+    </div>
+  </a>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+import Spinner from '../assets/icons/LoadingSpinner.vue'
+
+const props = defineProps<{
+  name?: string
+  type?: 'submit' | 'reset'
+  value?: string
+  href?: any
+  target?: string
+  disabled?: boolean
+  block?: boolean
+  autofocus?: boolean
+  loading?: boolean
+}>()
+
+const emit = defineEmits(['click'])
+
+const handleClick = () => {
+  if (!props.loading && !props.disabled) {
+    emit('click')
+  }
+}
+</script>

src/components/__tests__/DxhButton.spec.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Button from '../DxhButton.vue'
+
+describe('DButton.vue', () => {
+  it('emits a click event when clicked', async () => {
+    const wrapper = mount(Button, {
+      props: {
+        name: 'Click me',
+        type: 'submit',
+        value: 'Click me'
+      }
+    })
+
+    await wrapper.trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('click')
+  })
+
+  it('renders a button with the correct default classes', () => {
+    const wrapper = mount(Button)
+    expect(wrapper.classes()).toContain('border')
+    expect(wrapper.classes()).toContain('px-1')
+    expect(wrapper.classes()).toContain('pb-0.5')
+  })
+
+  it('renders a button with the correct dynamic classes', async () => {
+    const wrapper = mount(Button)
+    await wrapper.setProps({ disabled: true })
+  })
+
+  it('displays the slot content for the button', () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: 'Click me'
+      }
+    })
+    expect(wrapper.text()).toContain('Click me')
+  })
+
+  it('renders an anchor with the correct default classes', () => {
+    const wrapper = mount(Button, {
+      props: {
+        href: 'https://example.com',
+        target: '_blank'
+      }
+    })
+    expect(wrapper.find('a').classes()).toContain('border')
+    expect(wrapper.find('a').classes()).toContain('px-1')
+    expect(wrapper.find('a').classes()).toContain('pb-0.5')
+  })
+
+  it('renders an anchor with the correct dynamic classes', async () => {
+    const wrapper = mount(Button, {
+      props: {
+        href: 'https://example.com',
+        target: '_blank'
+      }
+    })
+    await wrapper.setProps({ disabled: true })
+  })
+
+  it('displays the slot content for the anchor', () => {
+    const wrapper = mount(Button, {
+      props: {
+        href: 'https://example.com',
+        target: '_blank'
+      },
+      slots: {
+        default: 'Click me'
+      }
+    })
+    expect(wrapper.text()).toContain('Click me')
+  })
+})

src/index.ts

@@ -1,4 +1,4 @@
-import DButton from "./components/DButton.vue"
+import DxhButton from './components/DxhButton.vue'
 import DInput from "./components/DInput.vue"
 
-export default {DButton, DInput}
+export default { DxhButton, DInput }