Merge pull request #410 from kwiksilver3441/setup

BAccordion & item to script setup

Author: mariusa

src/BootstrapVue.ts

@@ -7,8 +7,8 @@ import {createBreadcrumb} from './composables/useBreadcrumb'
 import './styles/styles.scss'
 
 // export available components
-export {default as BAccordion} from './components/BAccordion.vue'
-export {default as BAccordionItem} from './components/BAccordionItem.vue'
+export {default as BAccordion} from './components/BAccordion/BAccordion.vue'
+export {default as BAccordionItem} from './components/BAccordion/BAccordionItem.vue'
 export {default as BAlert} from './components/BAlert.vue'
 export {default as BAvatar} from './components/BAvatar/BAvatar.vue'
 export {default as BAvatarGroup} from './components/BAvatar/BAvatarGroup.vue'

src/components/BAccordion.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :id="computedId" class="accordion" :class="classes">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// https://vuejs.org/guide/typescript/composition-api.html#syntax-limitations , may be possible in a future release
+// import type {BAccordionProps} from '@/types/components'
+import {computed, InjectionKey, provide} from 'vue'
+import useId from '@/composables/useId'
+
+interface BAccordionProps {
+  flush?: boolean
+  free?: boolean
+  id?: string
+}
+
+const props = withDefaults(defineProps<BAccordionProps>(), {
+  flush: false,
+  free: false,
+  id: undefined,
+})
+
+const computedId = useId(props.id, 'accordion')
+
+const classes = computed(() => ({
+  'accordion-flush': props.flush,
+}))
+
+if (!props.free) {
+  provide(injectionKey, computedId.value.toString())
+}
+</script>
+
+<script lang="ts">
+export const injectionKey: InjectionKey<string> = Symbol()
+</script>

src/components/BAccordion/BAccordion.vue

@@ -28,34 +28,22 @@
   </div>
 </template>
 
-<script lang="ts">
-import {defineComponent, inject} from 'vue'
+<script setup lang="ts">
+import {inject} from 'vue'
+import BCollapse from '../BCollapse.vue'
+import vBToggle from '@/directives/BToggle'
+import useId from '@/composables/useId'
 import {injectionKey} from './BAccordion.vue'
-import BCollapse from './BCollapse.vue'
-import BToggle from '../directives/BToggle'
-import useId from '../composables/useId'
+// import type {BAccordionItemProps} from '@/types/components'
 
-export default defineComponent({
-  name: 'BAccordionItem',
-  components: {
-    BCollapse,
-  },
-  directives: {
-    BToggle,
-  },
-  props: {
-    title: {type: String},
-    id: {type: String},
-    visible: {type: Boolean, default: false},
-  },
-  setup(props) {
-    const computedId = useId(props.id, 'accordion_item')
-    const parent = inject(injectionKey, '')
+interface BAccordionItemProps {
+  id: string
+  title: string
+  visible?: boolean
+}
 
-    return {
-      parent,
-      computedId,
-    }
-  },
-})
+const props = withDefaults(defineProps<BAccordionItemProps>(), {visible: false})
+
+const computedId = useId(props.id, 'accordion_item')
+const parent = inject(injectionKey, '')
 </script>

src/components/BAccordionItem.vue renamed to src/components/BAccordion/BAccordionItem.vue

@@ -1,5 +1,5 @@
-import BAccordion from './BAccordion.vue'
-import BAccordionItem from './BAccordionItem.vue'
+import BAccordion from './BAccordion/BAccordion.vue'
+import BAccordionItem from './BAccordion/BAccordionItem.vue'
 import BAlert from './BAlert.vue'
 import BAvatar from './BAvatar/BAvatar.vue'
 import BAvatarGroup from './BAvatar/BAvatarGroup.vue'