daisyUI 3.0

src/components/ui/UIButton.vue

@@ -4,13 +4,15 @@ interface Props {
   variant?: 'regular' | 'outline'
   color?: 'regular' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
   dropdown?: boolean
+  join?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: 'md',
   variant: 'regular',
   color: 'regular',
-  dropdown: false
+  dropdown: false,
+  join: false
 })
 
 const styleClass = computed(() => {
@@ -36,7 +38,8 @@ const styleClass = computed(() => {
   const sizeClass = sizeVariants[props.size]
   const variantClass = variantVariants[props.variant]
   const colorClass = colorVariants[props.color]
-  return [sizeClass, variantClass, colorClass]
+  const joinClass = props.join ? 'dui-join-item' : ''
+  return [sizeClass, variantClass, colorClass, joinClass]
 })
 </script>
 <template>
@@ -48,7 +51,7 @@ const styleClass = computed(() => {
   >
     <slot></slot>
   </label>
-  <button class="dui-btn h-auto px-3 py-2 duration-0" :class="styleClass" v-else>
+  <button type="button" class="dui-btn h-auto px-3 py-2 duration-0" :class="styleClass" v-else>
     <slot></slot>
   </button>
 </template>