Merge pull request #413 from kwiksilver3441/setup

BButton's script setup conversion and improvements

Author: mariusa

src/BootstrapVue.ts

@@ -16,8 +16,8 @@ export {default as BBadge} from './components/BBadge/BBadge.vue'
 export {default as BBreadcrumb} from './components/BBreadcrumb/BBreadcrumb.vue'
 export {default as BBreadcrumbItem} from './components/BBreadcrumb/BBreadcrumbItem.vue'
 export {default as BButton} from './components/BButton/BButton.vue'
-export {default as BButtonGroup} from './components/BButtonGroup.vue'
-export {default as BButtonToolbar} from './components/BButtonToolbar.vue'
+export {default as BButtonGroup} from './components/BButton/BButtonGroup.vue'
+export {default as BButtonToolbar} from './components/BButton/BButtonToolbar.vue'
 export {default as BCard} from './components/BCard/BCard.vue'
 export {default as BCardBody} from './components/BCard/BCardBody.vue'
 export {default as BCardFooter} from './components/BCard/BCardFooter.vue'

src/components/BButton/BButton.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import {computed, defineComponent, PropType} from 'vue'
-import {ButtonVariant, InputSize} from '../../types'
+import type {ButtonVariant, InputSize, LinkTarget} from '@/types'
 import {BLINK_PROPS} from '../BLink/BLink.vue'
 
 export default defineComponent({
@@ -22,7 +22,7 @@ export default defineComponent({
     size: {type: String as PropType<InputSize>},
     squared: {type: Boolean, default: false},
     tag: {type: String, default: 'button'},
-    target: {type: String, default: '_self'},
+    target: {type: String as PropType<LinkTarget>, default: '_self'},
     type: {type: String, default: 'button'},
     variant: {type: String as PropType<ButtonVariant>, default: 'secondary'},
   },
@@ -64,7 +64,12 @@ export default defineComponent({
       'routerTag': isBLink ? props.routerTag : null,
     }))
 
-    const clicked = function (e: PointerEvent) {
+    const computedTag = computed<string>(() => {
+      if (isBLink) return 'b-link'
+      return props.href ? 'a' : props.tag
+    })
+
+    const clicked = (e: MouseEvent): void => {
       if (props.disabled) {
         e.preventDefault()
         e.stopPropagation()
@@ -76,11 +81,6 @@ export default defineComponent({
       }
     }
 
-    const computedTag = computed(() => {
-      if (isBLink) return 'b-link'
-      return props.href ? 'a' : props.tag
-    })
-
     return {
       classes,
       attrs,

src/components/BButton/BButtonGroup.vue

@@ -0,0 +1,29 @@
+<template>
+  <component :is="tag" :class="classes" role="group" :aria-role="ariaRole">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+// import type {BButtonGroupProps} from '@/types/components'
+import {computed} from 'vue'
+
+interface BButtonGroupProps {
+  ariaRole?: string
+  size?: string
+  tag?: string
+  vertical?: boolean
+}
+
+const props = withDefaults(defineProps<BButtonGroupProps>(), {
+  ariaRole: 'group',
+  tag: 'div',
+  vertical: false,
+})
+
+const classes = computed(() => ({
+  'btn-group': !props.vertical,
+  'btn-group-vertical': props.vertical,
+  [`btn-group-${props.size}`]: props.size,
+}))
+</script>

src/components/BButton/BButtonToolbar.vue

@@ -0,0 +1,25 @@
+<template>
+  <div :class="classes" class="btn-toolbar" role="toolbar" :aria-label="ariaRole">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// import type {BButtonToolbarProps} from '@/types/components'
+import {computed} from 'vue'
+
+interface BButtonToolbarProps {
+  ariaRole?: string
+  justify?: boolean
+  // keyNav?: boolean
+}
+
+const props = withDefaults(defineProps<BButtonToolbarProps>(), {
+  ariaRole: 'group',
+  justify: false,
+})
+
+const classes = computed(() => ({
+  'justify-content-between': props.justify,
+}))
+</script>

src/components/BButton/BCloseButton.vue

@@ -8,23 +8,21 @@
   />
 </template>
 
-<script lang="ts">
-import {computed, defineComponent} from 'vue'
+<script setup lang="ts">
+// import type {BCloseButtonProps} from '@/types/components'
+import {computed} from 'vue'
 
-export default defineComponent({
-  name: 'BCloseButton',
-  props: {
-    disabled: {type: Boolean, default: false},
-    white: {type: Boolean, default: false},
-  },
-  setup(props) {
-    const classes = computed(() => ({
-      'btn-close-white': props.white,
-    }))
+interface BCloseButtonProps {
+  disabled?: boolean
+  white?: boolean
+}
 
-    return {
-      classes,
-    }
-  },
+const props = withDefaults(defineProps<BCloseButtonProps>(), {
+  disabled: false,
+  white: false,
 })
+
+const classes = computed(() => ({
+  'btn-close-white': props.white,
+}))
 </script>

src/components/BButtonGroup.vue

@@ -7,8 +7,8 @@ import BBadge from './BBadge/BBadge.vue'
 import BBreadcrumb from './BBreadcrumb/BBreadcrumb.vue'
 import BBreadcrumbItem from './BBreadcrumb/BBreadcrumbItem.vue'
 import BButton from './BButton/BButton.vue'
-import BButtonGroup from './BButtonGroup.vue'
-import BButtonToolbar from './BButtonToolbar.vue'
+import BButtonGroup from './BButton/BButtonGroup.vue'
+import BButtonToolbar from './BButton/BButtonToolbar.vue'
 import BCard from './BCard/BCard.vue'
 import BCardBody from './BCard/BCardBody.vue'
 import BCardFooter from './BCard/BCardFooter.vue'