Merge branch 'bootstrap-vue-next:main' into main

VividLemon · web-flow · commit 02d81f6770b6 · 2023-06-20T19:49:43.000-05:00
diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/bootstrap-vue-next": "0.9.6",
+  "packages/bootstrap-vue-next": "0.9.9",
   "packages/nuxt": "0.1.0"
 }
diff --git a/apps/docs/.vitepress/theme/Layout.vue b/apps/docs/.vitepress/theme/Layout.vue
@@ -79,7 +79,7 @@
       <client-only>
         <b-offcanvas
           v-model="sidebar"
-          static="true"
+          teleport-disabled="true"
           backdrop="false"
           title="Browse docs"
           class="h-100"
diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md
@@ -1,6 +1,27 @@
 # Changelog
 
 
+## [0.9.9](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrap-vue-next-v0.9.8...bootstrap-vue-next-v0.9.9) (2023-06-20)
+
+
+### Bug Fixes
+
+* **BFormRadio:** update value with empty string. ([1a0f733](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/1a0f7338b922e7abb2ff83ad21379f65150a88cb))
+
+## [0.9.8](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrap-vue-next-v0.9.7...bootstrap-vue-next-v0.9.8) (2023-06-20)
+
+
+### Bug Fixes
+
+* **BTable:** support multi select mode for macOS users ([3a76884](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/3a76884c203e28718a73d36e97fd16a60c503a3e))
+
+## [0.9.7](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrap-vue-next-v0.9.6...bootstrap-vue-next-v0.9.7) (2023-06-19)
+
+
+### Bug Fixes
+
+* **BOffcanvas:** toggle offcanvas with toggle directive. ([e4d47f5](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/e4d47f5b0428ff155f69d7b11073f1711bb878e5))
+
 ## [0.9.6](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrap-vue-next-v0.9.5...bootstrap-vue-next-v0.9.6) (2023-06-16)
 
 
diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json
@@ -2,7 +2,7 @@
   "name": "bootstrap-vue-next",
   "displayName": "BootstrapVueNext",
   "description": "Early (but lovely) implementation of Vue 3, Bootstrap 5 and Typescript",
-  "version": "0.9.6",
+  "version": "0.9.9",
   "license": "MIT",
   "main": "./dist/bootstrap-vue-next.umd.js",
   "module": "./dist/bootstrap-vue-next.mjs",
diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
@@ -122,7 +122,7 @@ const localValue = computed({
       ? JSON.stringify(parentData.modelValue.value) === JSON.stringify(props.value)
       : JSON.stringify(modelValue.value) === JSON.stringify(props.value),
   set: (newValue: string | boolean | unknown[] | Record<string, unknown> | number | null) => {
-    const updateValue = newValue || newValue === 0 ? props.value : false
+    const updateValue = newValue || newValue === '' || newValue === 0 ? props.value : false
 
     emit('input', updateValue)
     modelValue.value = updateValue
diff --git a/packages/bootstrap-vue-next/src/components/BModal.vue b/packages/bootstrap-vue-next/src/components/BModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <teleport to="body" :disabled="staticBoolean">
+  <teleport :to="teleportTo" :disabled="teleportDisabledBoolean">
     <b-transition
       :no-fade="true"
       :trans-props="{enterToClass: 'show'}"
@@ -90,7 +90,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, useSlots} from 'vue'
+import {computed, ref, type RendererElement, useSlots} from 'vue'
 import {useBooleanish, useId, useModalManager} from '../composables'
 import {useEventListener, useFocus, useVModel} from '@vueuse/core'
 import type {Booleanish, ButtonVariant, ClassValue, ColorVariant, Size} from '../types'
@@ -156,8 +156,9 @@ interface BModalProps {
   titleClass?: string
   titleSrOnly?: Booleanish
   titleTag?: string
-  static?: Booleanish
   autoFocusButton?: 'ok' | 'cancel' | 'close'
+  teleportDisabled?: Booleanish
+  teleportTo?: string | RendererElement | null | undefined
 }
 
 interface BModalEmits {
@@ -215,12 +216,13 @@ const props = withDefaults(defineProps<BModalProps>(), {
   okDisabled: false,
   okOnly: false,
   okTitle: 'Ok',
-  static: false,
   okVariant: 'primary',
   scrollable: false,
   show: false,
   titleSrOnly: false,
   titleTag: 'h5',
+  teleportDisabled: false,
+  teleportTo: 'body',
 })
 
 const emit = defineEmits<BModalEmits>()
@@ -267,7 +269,7 @@ const okDisabledBoolean = useBooleanish(() => props.okDisabled)
 const okOnlyBoolean = useBooleanish(() => props.okOnly)
 const scrollableBoolean = useBooleanish(() => props.scrollable)
 const titleSrOnlyBoolean = useBooleanish(() => props.titleSrOnly)
-const staticBoolean = useBooleanish(() => props.static)
+const teleportDisabledBoolean = useBooleanish(() => props.teleportDisabled)
 
 const element = ref<HTMLElement | null>(null)
 const okButton = ref<HTMLElement | null>(null)
diff --git a/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue b/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
@@ -1,5 +1,5 @@
 <template>
-  <teleport to="body" :disabled="staticBoolean">
+  <teleport :to="teleportTo" :disabled="teleportDisabledBoolean">
     <b-transition
       :no-fade="true"
       :trans-props="{
@@ -63,7 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, nextTick, ref, useSlots} from 'vue'
+import {computed, nextTick, ref, type RendererElement, useSlots} from 'vue'
 import {useEventListener, useFocus, useVModel} from '@vueuse/core'
 import {useBooleanish, useId} from '../../composables'
 import type {Booleanish, ColorVariant} from '../../types'
@@ -93,11 +93,12 @@ interface BOffcanvasProps {
   lazy?: Booleanish
   id?: string
   noFocus?: Booleanish
-  static?: Booleanish
   backdropVariant?: ColorVariant | null
   headerClass?: string
   bodyClass?: string
   footerClass?: string
+  teleportDisabled?: Booleanish
+  teleportTo?: string | RendererElement | null | undefined
   // TODO responsive doesn't work
   // responsive?: Breakpoint
 }
@@ -119,7 +120,6 @@ const props = withDefaults(defineProps<BOffcanvasProps>(), {
   id: undefined,
   title: undefined,
   modelValue: false,
-  static: false,
   backdropVariant: 'dark',
   noFocus: false,
   bodyScrolling: false,
@@ -133,6 +133,8 @@ const props = withDefaults(defineProps<BOffcanvasProps>(), {
   headerClass: undefined,
   bodyClass: undefined,
   footerClass: undefined,
+  teleportDisabled: false,
+  teleportTo: 'body',
 })
 
 const emit = defineEmits<BOffcanvasEmits>()
@@ -158,7 +160,7 @@ defineSlots<{
 
 const slots = useSlots()
 
-const modelValue = useVModel(props, 'modelValue', emit)
+const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
 
 const modelValueBoolean = useBooleanish(modelValue)
 // TODO
@@ -171,7 +173,7 @@ const noFocusBoolean = useBooleanish(() => props.noFocus)
 const noCloseOnBackdropBoolean = useBooleanish(() => props.noCloseOnBackdrop)
 const noCloseOnEscBoolean = useBooleanish(() => props.noCloseOnEsc)
 const lazyBoolean = useBooleanish(() => props.lazy)
-const staticBoolean = useBooleanish(() => props.static)
+const teleportDisabledBoolean = useBooleanish(() => props.teleportDisabled)
 
 const computedId = useId(() => props.id, 'offcanvas')
 
diff --git a/packages/bootstrap-vue-next/src/components/BOffcanvas/offcanvas.spec.ts b/packages/bootstrap-vue-next/src/components/BOffcanvas/offcanvas.spec.ts
@@ -1,5 +1,5 @@
 import {enableAutoUnmount, mount} from '@vue/test-utils'
-import {afterEach, describe, expect, it} from 'vitest'
+import {afterEach, beforeEach, describe, expect, it} from 'vitest'
 import BOffcanvas from './BOffcanvas.vue'
 import BCloseButton from '../BButton/BCloseButton.vue'
 import BOverlay from '../BOverlay/BOverlay.vue'
@@ -8,6 +8,28 @@ describe.skip('offcanvas', () => {
 
   // TODO afaik these tests are not finished
 
+  beforeEach(() => {
+    const el = document.createElement('div')
+    el.id = 'body-teleports'
+    document.body.appendChild(el)
+  })
+
+  afterEach(() => {
+    const el = document.getElementById('body-teleports')
+    if (el) document.body.removeChild(el)
+  })
+
+  it('has body teleports element set by teleportTo property', () => {
+    const wrapper = mount(BOffcanvas, {
+      props: {
+        teleportTo: '#body-teleports',
+        modelValue: true,
+      },
+    })
+    expect(wrapper.exists()).toBe(true)
+    expect(document.getElementById('body-teleports')?.querySelector('.offcanvas')).not.toBe(null)
+  })
+
   it('has static class offcanvas', () => {
     const wrapper = mount(BOffcanvas, {
       props: {
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -49,6 +49,11 @@
                 v-if="$slots['head(' + field.key + ')'] || $slots['head()']"
                 :name="$slots['head(' + field.key + ')'] ? 'head(' + field.key + ')' : 'head()'"
                 :label="field.label"
+                :column="field.key"
+                :field="field"
+                :is-foot="false"
+                :select-all-rows="selectAllRows"
+                :clear-selected="clearSelected"
               />
               <template v-else>{{ getFieldHeadLabel(field) }}</template>
             </div>
@@ -411,6 +416,10 @@ const computedItems = computed(() => {
       })
     : props.items
 
+  if (usesProvider.value && !noProviderPagingBoolean.value) {
+    return items
+  }
+
   if (props.perPage !== undefined) {
     const startIndex = (props.currentPage - 1) * props.perPage
     const endIndex =
@@ -437,7 +446,7 @@ const headerClicked = (field: TableField, event: MouseEvent, isFooter = false) =
 const onRowClick = (row: TableItem, index: number, e: MouseEvent) => {
   emit('rowClicked', row, index, e)
 
-  handleRowSelection(row, index, e.shiftKey, e.ctrlKey)
+  handleRowSelection(row, index, e.shiftKey, e.ctrlKey, e.metaKey)
 }
 const onRowDblClick = (row: TableItem, index: number, e: MouseEvent) =>
   emit('rowDblClicked', row, index, e)
@@ -472,7 +481,8 @@ const handleRowSelection = (
   row: TableItem,
   index: number,
   shiftClicked = false,
-  ctrlClicked = false
+  ctrlClicked = false,
+  metaClicked = false
 ) => {
   if (!selectableBoolean.value) return
 
@@ -487,7 +497,7 @@ const handleRowSelection = (
         emit('rowSelected', item)
       }
     })
-  } else if (ctrlClicked) {
+  } else if (ctrlClicked || metaClicked) {
     if (selectedItems.value.has(row)) {
       selectedItems.value.delete(row)
       emit('rowUnselected', row)
diff --git a/packages/bootstrap-vue-next/src/components/modal.spec.ts b/packages/bootstrap-vue-next/src/components/modal.spec.ts
@@ -1,10 +1,32 @@
 import {enableAutoUnmount, mount} from '@vue/test-utils'
-import {afterEach, describe, expect, it} from 'vitest'
+import {afterEach, beforeEach, describe, expect, it} from 'vitest'
 import BModal from './BModal.vue'
 // import BTransition from './BTransition/BTransition.vue'
 
 describe('modal', () => {
   enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    const el = document.createElement('div')
+    el.id = 'body-teleports'
+    document.body.appendChild(el)
+  })
+
+  afterEach(() => {
+    const el = document.getElementById('body-teleports')
+    if (el) document.body.removeChild(el)
+  })
+
+  it('has body teleports element set by to property', () => {
+    const wrapper = mount(BModal, {
+      props: {
+        teleportTo: '#body-teleports',
+      },
+    })
+    expect(wrapper.exists()).toBe(true)
+    expect(document.getElementById('body-teleports')?.querySelector('.modal')).not.toBe(null)
+  })
+
   // Having issues getting the 'body' from the VDOM
   it('has body element', () => {
     const wrapper = mount(BModal, {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`{`
`2`		`- "packages/bootstrap-vue-next": "0.9.6",`
	`2`	`+ "packages/bootstrap-vue-next": "0.9.9",`
`3`	`3`	`"packages/nuxt": "0.1.0"`
`4`	`4`	`}`