From e50a5ba867ac0ad7b1f71a73a8e76d690d58e686 Mon Sep 17 00:00:00 2001 From: Jukka Raimovaara Date: Tue, 17 Sep 2024 22:40:30 +0300 Subject: [PATCH 01/27] fix(vBPopover): fix vue error with floating directives. (#2208) --- .../src/directives/BPopover/index.ts | 16 +++++++--------- .../src/directives/BTooltip/index.ts | 16 +++++++--------- 2 files changed, 14 insertions(+), 18 deletions(-) diff --git a/packages/bootstrap-vue-next/src/directives/BPopover/index.ts b/packages/bootstrap-vue-next/src/directives/BPopover/index.ts index 7f5e23ae0..8976ad8cf 100644 --- a/packages/bootstrap-vue-next/src/directives/BPopover/index.ts +++ b/packages/bootstrap-vue-next/src/directives/BPopover/index.ts @@ -10,25 +10,23 @@ import { import {defaultsKey} from '../../utils/keys' export const vBPopover: Directive = { - mounted(el, binding, vnode) { - // @ts-expect-error type doesn't have runtime ctx - const defaults = vnode.ctx?.appContext?.provides?.[defaultsKey as symbol]?.value + mounted(el, binding) { + const defaults = binding.instance?.$.appContext?.provides?.[defaultsKey as symbol]?.value const isActive = resolveActiveStatus(binding.value) if (!isActive) return const text = resolveContent(binding.value, el) if (!text.content && !text.title) return - el.$__binding = JSON.stringify(binding) + el.$__binding = JSON.stringify([binding.modifiers, binding.value]) bind(el, binding, { ...(defaults['BPopover'] || {}), ...resolveDirectiveProps(binding, el), ...text, }) }, - updated(el, binding, vnode) { - // @ts-expect-error type doesn't have runtime ctx - const defaults = vnode.ctx?.appContext?.provides?.[defaultsKey as symbol]?.value + updated(el, binding) { + const defaults = binding.instance?.$.appContext?.provides?.[defaultsKey as symbol]?.value const isActive = resolveActiveStatus(binding.value) if (!isActive) return @@ -37,14 +35,14 @@ export const vBPopover: Directive = { if (!text.content && !text.title) return delete binding.oldValue - if (el.$__binding === JSON.stringify(binding)) return + if (el.$__binding === JSON.stringify([binding.modifiers, binding.value])) return unbind(el) bind(el, binding, { ...(defaults['BPopover'] || {}), ...resolveDirectiveProps(binding, el), ...text, }) - el.$__binding = JSON.stringify(binding) + el.$__binding = JSON.stringify([binding.modifiers, binding.value]) }, beforeUnmount(el) { unbind(el) diff --git a/packages/bootstrap-vue-next/src/directives/BTooltip/index.ts b/packages/bootstrap-vue-next/src/directives/BTooltip/index.ts index 1c1db2e00..1cc475bbd 100644 --- a/packages/bootstrap-vue-next/src/directives/BTooltip/index.ts +++ b/packages/bootstrap-vue-next/src/directives/BTooltip/index.ts @@ -10,9 +10,8 @@ import { import {defaultsKey} from '../../utils/keys' export const vBTooltip: Directive = { - mounted(el, binding, vnode) { - // @ts-expect-error type doesn't have runtime ctx - const defaults = vnode.ctx?.appContext?.provides?.[defaultsKey as symbol]?.value + mounted(el, binding) { + const defaults = binding.instance?.$.appContext?.provides?.[defaultsKey as symbol]?.value const isActive = resolveActiveStatus(binding.value) if (!isActive) return @@ -20,7 +19,7 @@ export const vBTooltip: Directive = { const text = resolveContent(binding.value, el) if (!text.content && !text.title) return - el.$__binding = JSON.stringify(binding) + el.$__binding = JSON.stringify([binding.modifiers, binding.value]) bind(el, binding, { noninteractive: true, ...(defaults['BTooltip'] || {}), @@ -29,9 +28,8 @@ export const vBTooltip: Directive = { tooltip: isActive, }) }, - updated(el, binding, vnode) { - // @ts-expect-error type doesn't have runtime ctx - const defaults = vnode.ctx?.appContext?.provides?.[defaultsKey as symbol]?.value + updated(el, binding) { + const defaults = binding.instance?.$.appContext?.provides?.[defaultsKey as symbol]?.value const isActive = resolveActiveStatus(binding.value) if (!isActive) return @@ -40,7 +38,7 @@ export const vBTooltip: Directive = { if (!text.content && !text.title) return delete binding.oldValue - if (el.$__binding === JSON.stringify(binding)) return + if (el.$__binding === JSON.stringify([binding.modifiers, binding.value])) return unbind(el) bind(el, binding, { noninteractive: true, @@ -49,7 +47,7 @@ export const vBTooltip: Directive = { title: text.title ?? text.content ?? '', tooltip: isActive, }) - el.$__binding = JSON.stringify(binding) + el.$__binding = JSON.stringify([binding.modifiers, binding.value]) }, beforeUnmount(el) { unbind(el) From 31695edd0fe1e01f93f9863d1be2949490757c5c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 18 Sep 2024 07:22:38 -0500 Subject: [PATCH 02/27] chore: release main (#2210) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .release-please-manifest.json | 4 ++-- packages/bootstrap-vue-next/CHANGELOG.md | 7 +++++++ packages/bootstrap-vue-next/package.json | 2 +- packages/nuxt/CHANGELOG.md | 16 ++++++++++++++++ packages/nuxt/package.json | 2 +- 5 files changed, 27 insertions(+), 4 deletions(-) diff --git a/.release-please-manifest.json b/.release-please-manifest.json index f5c359f10..a20fd995d 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,4 +1,4 @@ { - "packages/bootstrap-vue-next": "0.24.17", - "packages/nuxt": "0.24.17" + "packages/bootstrap-vue-next": "0.24.18", + "packages/nuxt": "0.24.18" } diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md index 3c9e21205..2540cac7a 100644 --- a/packages/bootstrap-vue-next/CHANGELOG.md +++ b/packages/bootstrap-vue-next/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## [0.24.18](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.17...bootstrapvuenext-v0.24.18) (2024-09-17) + + +### Bug Fixes + +* **vBPopover:** fix vue error with floating directives. ([#2208](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2208)) ([e50a5ba](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/e50a5ba867ac0ad7b1f71a73a8e76d690d58e686)) + ## [0.24.17](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.16...bootstrapvuenext-v0.24.17) (2024-09-16) diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json index 1e9567a4e..f9f6791b7 100644 --- 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": "BootstrapVueNext is an early and lovely component library for Vue 3 & Nuxt 3 based on Bootstrap 5 and Typescript.", - "version": "0.24.17", + "version": "0.24.18", "license": "MIT", "main": "./dist/bootstrap-vue-next.umd.js", "module": "./dist/bootstrap-vue-next.mjs", diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md index c1ce12c3d..4065fed54 100644 --- a/packages/nuxt/CHANGELOG.md +++ b/packages/nuxt/CHANGELOG.md @@ -1,5 +1,21 @@ # Changelog +## [0.24.18](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.17...nuxt-v0.24.18) (2024-09-17) + + +### Miscellaneous Chores + +* **nuxt:** Synchronize main group versions + + +### Dependencies + +* The following workspace dependencies were updated + * devDependencies + * bootstrap-vue-next bumped to 0.24.18 + * peerDependencies + * bootstrap-vue-next bumped to 0.24.18 + ## [0.24.17](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.16...nuxt-v0.24.17) (2024-09-16) diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index 833bad597..6217f1210 100644 --- a/packages/nuxt/package.json +++ b/packages/nuxt/package.json @@ -1,7 +1,7 @@ { "name": "@bootstrap-vue-next/nuxt", "description": "Nuxt Module for BootstrapVueNext", - "version": "0.24.17", + "version": "0.24.18", "license": "MIT", "author": { "name": "Issayah", From 85b38f35b81600c05b504738096148afad8db713 Mon Sep 17 00:00:00 2001 From: Jukka Raimovaara Date: Sat, 21 Sep 2024 17:04:39 +0300 Subject: [PATCH 03/27] fix(BFormFile): remove capture attrs from dom if not defined. (#2214) * fix(BFormFile): remove capture attrs from dom if not defined. --- .../bootstrap-vue-next/src/components/BFormFile/BFormFile.vue | 2 +- .../src/components/BFormFile/form-file.spec.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue index 9d0006f8a..5967d78d5 100644 --- a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue +++ b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue @@ -56,7 +56,7 @@ const _props = withDefaults(defineProps>(), { accept: '', autofocus: false, // eslint-disable-next-line vue/require-valid-default-prop - capture: false, + capture: undefined, directory: false, disabled: false, form: undefined, diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts b/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts index 295ad09df..606542d98 100644 --- a/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts +++ b/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts @@ -229,7 +229,7 @@ describe('form-file', () => { props: {capture: undefined}, }) const $input = wrapper.get('input') - expect($input.attributes('capture')).toBe('false') + expect($input.attributes('capture')).toBe(undefined) }) it('input element has set attr accept to empty when prop accept is true', () => { From 5042d08fca85d6c6ab41729bf850dab8cfd40141 Mon Sep 17 00:00:00 2001 From: Jukka Raimovaara Date: Sat, 21 Sep 2024 17:06:45 +0300 Subject: [PATCH 04/27] Update keys.ts --- packages/bootstrap-vue-next/src/utils/keys.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/bootstrap-vue-next/src/utils/keys.ts b/packages/bootstrap-vue-next/src/utils/keys.ts index 65a6f0949..765b1f683 100644 --- a/packages/bootstrap-vue-next/src/utils/keys.ts +++ b/packages/bootstrap-vue-next/src/utils/keys.ts @@ -129,7 +129,7 @@ export const dropdownInjectionKey: InjectionKey<{ readonly toggle?: () => void visible?: Readonly> isNav?: Readonly> -}> = Symbol('bvn::collapse') +}> = Symbol('bvn::dropdown') export const navbarInjectionKey: InjectionKey<{ tag?: Readonly> @@ -182,11 +182,11 @@ export const tooltipPluginKey: InjectionKey<{ show: (obj: TooltipOrchestratorShowParam) => symbol remove: (self: symbol) => void set: (self: symbol, val: Partial) => void -}> = Symbol('bvn::toastPlugin') +}> = Symbol('bvn::tooltipPlugin') export const popoverPluginKey: InjectionKey<{ popovers: Ref> show: (obj: PopoverOrchestratorShowParam) => symbol remove: (self: symbol) => void set: (self: symbol, val: Partial) => void -}> = Symbol('bvn::toastPlugin') +}> = Symbol('bvn::popoverPlugin') From 5634dc3f733bcd414737d5bb92bd56c83972b194 Mon Sep 17 00:00:00 2001 From: Issayah Date: Sat, 21 Sep 2024 11:50:34 -0500 Subject: [PATCH 05/27] fix(nuxt): make injection keys static strings fixes #2209 (#2218) --- .../src/composables/useId.ts | 3 +- .../bootstrap-vue-next/src/utils/bvnPrefix.ts | 4 ++ packages/bootstrap-vue-next/src/utils/keys.ts | 44 ++++++++++--------- 3 files changed, 30 insertions(+), 21 deletions(-) create mode 100644 packages/bootstrap-vue-next/src/utils/bvnPrefix.ts diff --git a/packages/bootstrap-vue-next/src/composables/useId.ts b/packages/bootstrap-vue-next/src/composables/useId.ts index f6db7ede8..4a0a70ad3 100644 --- a/packages/bootstrap-vue-next/src/composables/useId.ts +++ b/packages/bootstrap-vue-next/src/composables/useId.ts @@ -1,9 +1,10 @@ import {computed, type ComputedRef, type MaybeRefOrGetter, toValue, useId as vueUseId} from 'vue' +import {bvnPrefix} from '../utils/bvnPrefix' export const useId = ( id?: MaybeRefOrGetter, suffix?: string ): ComputedRef => { const genId = vueUseId() - return computed(() => toValue(id) || `__BVID__${genId}___BV_${suffix}__`) + return computed(() => toValue(id) || bvnPrefix(genId || '', suffix)) } diff --git a/packages/bootstrap-vue-next/src/utils/bvnPrefix.ts b/packages/bootstrap-vue-next/src/utils/bvnPrefix.ts new file mode 100644 index 000000000..4adb71432 --- /dev/null +++ b/packages/bootstrap-vue-next/src/utils/bvnPrefix.ts @@ -0,0 +1,4 @@ +export const bvnPrefix = (value: string, suffix: string = '') => { + const suffixWithTrail = `${suffix}___` + return `___BVN__ID__${value}__${suffix ? suffixWithTrail : ''}` +} diff --git a/packages/bootstrap-vue-next/src/utils/keys.ts b/packages/bootstrap-vue-next/src/utils/keys.ts index 765b1f683..39182991a 100644 --- a/packages/bootstrap-vue-next/src/utils/keys.ts +++ b/packages/bootstrap-vue-next/src/utils/keys.ts @@ -22,13 +22,16 @@ import type { TooltipOrchestratorShowParam, } from '../types/ComponentOrchestratorTypes' import type {BvnComponentProps} from '../types/BootstrapVueOptions' +import {bvnPrefix} from './bvnPrefix' + +const createBvnInjectionKey = (name: string) => bvnPrefix(name) as unknown as symbol // Type cast to symbol, these should be static // BCarousel export const carouselInjectionKey: InjectionKey<{ background: Readonly> width: Readonly> height: Readonly> -}> = Symbol('bvn::carousel') +}> = createBvnInjectionKey('carousel') // BTabs export const tabsInjectionKey: InjectionKey<{ @@ -42,7 +45,7 @@ export const tabsInjectionKey: InjectionKey<{ inactiveTabClass: Readonly> tabClass: Readonly> activeId: Readonly> -}> = Symbol('bvn::tabs') +}> = createBvnInjectionKey('tabs') // BProgress export const progressInjectionKey: InjectionKey<{ @@ -51,12 +54,12 @@ export const progressInjectionKey: InjectionKey<{ showProgress: Readonly> showValue: Readonly> striped: Readonly> -}> = Symbol('bvn::progress') +}> = createBvnInjectionKey('progress') // BListGroup export const listGroupInjectionKey: InjectionKey<{ numbered: Readonly> -}> = Symbol('bvn::listGroup') +}> = createBvnInjectionKey('listGroup') // BAvatarGroup export const avatarGroupInjectionKey: InjectionKey<{ @@ -71,14 +74,14 @@ export const avatarGroupInjectionKey: InjectionKey<{ variant: Readonly> bgVariant: Readonly> textVariant: Readonly> -}> = Symbol('bvn::avatarGroup') +}> = createBvnInjectionKey('avatarGroup') // BAccordion export const accordionInjectionKey: InjectionKey<{ openItem: Readonly> free: Readonly> setOpenItem: (id: string) => void -}> = Symbol('bvn::accordion') +}> = createBvnInjectionKey('accordion') // BFormCheckboxGroup export const checkboxGroupKey: InjectionKey<{ @@ -95,7 +98,7 @@ export const checkboxGroupKey: InjectionKey<{ required: Readonly> buttons: Readonly> disabled: Readonly> -}> = Symbol('bvn::checkboxGroup') +}> = createBvnInjectionKey('checkboxGroup') export const radioGroupKey: InjectionKey<{ modelValue: Ref @@ -110,7 +113,7 @@ export const radioGroupKey: InjectionKey<{ reverse: Readonly> required: Readonly> disabled: Readonly> -}> = Symbol('bvn::radioGroup') +}> = createBvnInjectionKey('radioGroup') // Collapse export const collapseInjectionKey: InjectionKey<{ @@ -120,7 +123,7 @@ export const collapseInjectionKey: InjectionKey<{ readonly toggle?: () => void visible?: Readonly> isNav?: Readonly> -}> = Symbol('bvn::collapse') +}> = createBvnInjectionKey('collapse') export const dropdownInjectionKey: InjectionKey<{ id?: Readonly> @@ -129,22 +132,22 @@ export const dropdownInjectionKey: InjectionKey<{ readonly toggle?: () => void visible?: Readonly> isNav?: Readonly> -}> = Symbol('bvn::dropdown') +}> = createBvnInjectionKey('dropdown') export const navbarInjectionKey: InjectionKey<{ tag?: Readonly> autoClose?: Readonly> -}> = Symbol('bvn::navbar') +}> = createBvnInjectionKey('navbar') export const rtlPluginKey: InjectionKey<{ isRtl: Ref locale: Ref -}> = Symbol('bvn::rtlPlugin') +}> = createBvnInjectionKey('rtlPlugin') export const breadcrumbPluginKey: InjectionKey<{ items: Ref reset: () => void -}> = Symbol('bvn::breadcrumbPlugin') +}> = createBvnInjectionKey('breadcrumbPlugin') export const modalManagerPluginKey: InjectionKey<{ stack: ComputedRef @@ -155,11 +158,12 @@ export const modalManagerPluginKey: InjectionKey<{ registry: Readonly>> pushRegistry: (modal: Readonly) => void removeRegistry: (modal: Readonly) => void -}> = Symbol('bvn::modalManagerPlugin') +}> = createBvnInjectionKey('modalManagerPlugin') -export const defaultsKey: InjectionKey>> = Symbol('bvn::defaults') +export const defaultsKey: InjectionKey>> = + createBvnInjectionKey('defaults') -export const inputGroupKey: InjectionKey = Symbol('bvn::inputGroup') +export const inputGroupKey: InjectionKey = createBvnInjectionKey('inputGroup') export const toastPluginKey: InjectionKey<{ toasts: Ref @@ -167,7 +171,7 @@ export const toastPluginKey: InjectionKey<{ show: (obj: ToastOrchestratorShowParam) => symbol remove: (self: symbol) => void leave: (self: symbol) => void -}> = Symbol('bvn::toastPlugin') +}> = createBvnInjectionKey('toastPlugin') export const modalControllerPluginKey: InjectionKey<{ modals: Ref> @@ -175,18 +179,18 @@ export const modalControllerPluginKey: InjectionKey<{ confirm: (obj: ModalOrchestratorShowParam) => Promise remove: (self: symbol) => void leave: (self: symbol) => void -}> = Symbol('bvn::modalControllerPlugin') +}> = createBvnInjectionKey('modalControllerPlugin') export const tooltipPluginKey: InjectionKey<{ tooltips: Ref> show: (obj: TooltipOrchestratorShowParam) => symbol remove: (self: symbol) => void set: (self: symbol, val: Partial) => void -}> = Symbol('bvn::tooltipPlugin') +}> = createBvnInjectionKey('tooltipPlugin') export const popoverPluginKey: InjectionKey<{ popovers: Ref> show: (obj: PopoverOrchestratorShowParam) => symbol remove: (self: symbol) => void set: (self: symbol, val: Partial) => void -}> = Symbol('bvn::popoverPlugin') +}> = createBvnInjectionKey('popoverPlugin') From 87ab5be9a1048377f2c59b20b6b2aa3a2e8b2626 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 21 Sep 2024 11:52:00 -0500 Subject: [PATCH 06/27] chore: release main (#2217) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .release-please-manifest.json | 4 ++-- packages/bootstrap-vue-next/CHANGELOG.md | 8 ++++++++ packages/bootstrap-vue-next/package.json | 2 +- packages/nuxt/CHANGELOG.md | 16 ++++++++++++++++ packages/nuxt/package.json | 2 +- 5 files changed, 28 insertions(+), 4 deletions(-) diff --git a/.release-please-manifest.json b/.release-please-manifest.json index a20fd995d..1a394a2a9 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,4 +1,4 @@ { - "packages/bootstrap-vue-next": "0.24.18", - "packages/nuxt": "0.24.18" + "packages/bootstrap-vue-next": "0.24.19", + "packages/nuxt": "0.24.19" } diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md index 2540cac7a..e2db8b4fa 100644 --- a/packages/bootstrap-vue-next/CHANGELOG.md +++ b/packages/bootstrap-vue-next/CHANGELOG.md @@ -1,5 +1,13 @@ # Changelog +## [0.24.19](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.18...bootstrapvuenext-v0.24.19) (2024-09-21) + + +### Bug Fixes + +* **BFormFile:** remove capture attrs from dom if not defined. ([#2214](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2214)) ([85b38f3](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/85b38f35b81600c05b504738096148afad8db713)) +* **nuxt:** make injection keys static strings fixes [#2209](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2209) ([#2218](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2218)) ([5634dc3](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/5634dc3f733bcd414737d5bb92bd56c83972b194)) + ## [0.24.18](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.17...bootstrapvuenext-v0.24.18) (2024-09-17) diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json index f9f6791b7..e600f08c8 100644 --- 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": "BootstrapVueNext is an early and lovely component library for Vue 3 & Nuxt 3 based on Bootstrap 5 and Typescript.", - "version": "0.24.18", + "version": "0.24.19", "license": "MIT", "main": "./dist/bootstrap-vue-next.umd.js", "module": "./dist/bootstrap-vue-next.mjs", diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md index 4065fed54..b71c2d272 100644 --- a/packages/nuxt/CHANGELOG.md +++ b/packages/nuxt/CHANGELOG.md @@ -1,5 +1,21 @@ # Changelog +## [0.24.19](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.18...nuxt-v0.24.19) (2024-09-21) + + +### Miscellaneous Chores + +* **nuxt:** Synchronize main group versions + + +### Dependencies + +* The following workspace dependencies were updated + * devDependencies + * bootstrap-vue-next bumped to 0.24.19 + * peerDependencies + * bootstrap-vue-next bumped to 0.24.19 + ## [0.24.18](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.17...nuxt-v0.24.18) (2024-09-17) diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index 6217f1210..1c78e86e7 100644 --- a/packages/nuxt/package.json +++ b/packages/nuxt/package.json @@ -1,7 +1,7 @@ { "name": "@bootstrap-vue-next/nuxt", "description": "Nuxt Module for BootstrapVueNext", - "version": "0.24.18", + "version": "0.24.19", "license": "MIT", "author": { "name": "Issayah", From 89656ab96deb986f1674f5ffdef59ff4743a44c5 Mon Sep 17 00:00:00 2001 From: Issayah Date: Sat, 21 Sep 2024 13:42:56 -0500 Subject: [PATCH 07/27] fix(useFocusTrap): dont deactivate focus on esc fixes #2144 (#2219) refactor(BTableLite): simplify weakmap --- .../src/components/BTable/BTableLite.vue | 19 +++---------------- .../src/composables/useActivatedFocusTrap.ts | 1 + 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue index e69bf3ba8..31824da18 100644 --- a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue +++ b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue @@ -302,29 +302,16 @@ const generateDetailsItem = (item: TableItem): [object, boolean | undefined] => item, item._showDetails, ] -const detailsMap = ref( - new WeakMap( - props.items.reduce( - (acc, el) => { - if (isTableItem(el)) { - acc.push(generateDetailsItem(el)) - } - return acc - }, - [] as [object, boolean | undefined][] - ) - ) -) +const detailsMap = ref(new WeakMap()) watch( () => props.items, (items) => { items.forEach((item) => { if (!isTableItem(item)) return - const detailsItem = generateDetailsItem(item) - detailsMap.value.set(detailsItem[0], detailsItem[1]) + detailsMap.value.set(...generateDetailsItem(item)) }) }, - {deep: true} + {deep: true, immediate: true} ) const computedTableClasses = computed(() => [ diff --git a/packages/bootstrap-vue-next/src/composables/useActivatedFocusTrap.ts b/packages/bootstrap-vue-next/src/composables/useActivatedFocusTrap.ts index f9a3a8d43..3879f8d5c 100644 --- a/packages/bootstrap-vue-next/src/composables/useActivatedFocusTrap.ts +++ b/packages/bootstrap-vue-next/src/composables/useActivatedFocusTrap.ts @@ -37,6 +37,7 @@ export const useActivatedFocusTrap = ( focusTrapOpts: UseFocusTrapOptions = { allowOutsideClick: true, fallbackFocus: fallbackFocus.ref.value ?? undefined, + escapeDeactivates: false, } ) => { const resolvedIsActive = readonly(toRef(isActive)) From 9ab613252676524538e2713d5e55e21c0863320a Mon Sep 17 00:00:00 2001 From: Jukka Raimovaara Date: Sat, 21 Sep 2024 21:44:02 +0300 Subject: [PATCH 08/27] fix(BModal): fix jumping when scrollbars are present (#2211) --- .../src/components/BModal/modal.spec.ts | 12 +++-- .../src/composables/useSafeScrollLock.ts | 49 +++++++++++++++++-- 2 files changed, 54 insertions(+), 7 deletions(-) diff --git a/packages/bootstrap-vue-next/src/components/BModal/modal.spec.ts b/packages/bootstrap-vue-next/src/components/BModal/modal.spec.ts index 52920cfb8..599028f31 100644 --- a/packages/bootstrap-vue-next/src/components/BModal/modal.spec.ts +++ b/packages/bootstrap-vue-next/src/components/BModal/modal.spec.ts @@ -366,19 +366,25 @@ describe('modal', () => { // initial closed state let $modal = wrapper.find('div.modal') expect($modal.isVisible()).toBe(false) - expect(document.body.attributes.getNamedItem('style')?.textContent ?? '').toBe('') + expect(document.body.attributes.getNamedItem('style')?.textContent ?? '').not.toContain( + 'overflow: hidden;' + ) // open stated await wrapper.setProps({modelValue: true}) expect($modal.isVisible()).toBe(true) - expect(document.body.attributes.getNamedItem('style')?.textContent).toBe('overflow: hidden;') + expect(document.body.attributes.getNamedItem('style')?.textContent).toContain( + 'overflow: hidden;' + ) // closed state $modal = wrapper.find('div.modal') await $modal.trigger('keydown.Escape') $modal = wrapper.find('div.modal') expect($modal.isVisible()).toBe(false) - expect(document.body.attributes.getNamedItem('style')?.textContent ?? '').toBe('') + expect(document.body.attributes.getNamedItem('style')?.textContent ?? '').not.toContain( + 'overflow: hidden;' + ) wrapper.unmount() }) diff --git a/packages/bootstrap-vue-next/src/composables/useSafeScrollLock.ts b/packages/bootstrap-vue-next/src/composables/useSafeScrollLock.ts index 00480c2f7..5eaf62de7 100644 --- a/packages/bootstrap-vue-next/src/composables/useSafeScrollLock.ts +++ b/packages/bootstrap-vue-next/src/composables/useSafeScrollLock.ts @@ -1,11 +1,25 @@ -import {computed, type MaybeRefOrGetter, onMounted, readonly, toRef, toValue, watch} from 'vue' +import { + computed, + type MaybeRefOrGetter, + onMounted, + onUnmounted, + readonly, + toRef, + toValue, + useId, + watch, +} from 'vue' import {useScrollLock} from '@vueuse/core' +let prevousRightPadding = '' +const lockRegistry = new Map() + export const useSafeScrollLock = ( isOpen: MaybeRefOrGetter, bodyScroll: MaybeRefOrGetter ) => { const resolvedIsOpen = readonly(toRef(isOpen)) + const id = useId() /** * We use the inverse because bodyScrolling === true means we allow scrolling, while bodyScrolling === false means we disallow @@ -13,13 +27,40 @@ export const useSafeScrollLock = ( const inverseBodyScrollingValue = computed(() => !toValue(bodyScroll)) onMounted(() => { + lockRegistry.set(id, false) const isLocked = useScrollLock( document.body, resolvedIsOpen.value && inverseBodyScrollingValue.value ) - watch([resolvedIsOpen, inverseBodyScrollingValue], ([modelVal, bodyVal]) => { - isLocked.value = modelVal && bodyVal - }) + watch( + [resolvedIsOpen, inverseBodyScrollingValue], + ([modelVal, bodyVal]) => { + const scrollBarGap = window.innerWidth - document.documentElement.clientWidth + const hasLocked = Array.from(lockRegistry.values()).some((val) => val === true) + + const myLocked = modelVal && bodyVal + lockRegistry.set(id, myLocked) + + if (myLocked && !hasLocked && !isLocked.value) { + isLocked.value = true + if (scrollBarGap > 0) { + prevousRightPadding = document.body.style.paddingRight + document.body.style.paddingRight = `${scrollBarGap + prevousRightPadding}px` + } + } + const hasLockedAfter = Array.from(lockRegistry.values()).some((val) => val === true) + + if (hasLocked && !hasLockedAfter) { + lockRegistry.set(id, false) + isLocked.value = false + document.body.style.paddingRight = prevousRightPadding + } + }, + {immediate: true} + ) + }) + onUnmounted(() => { + lockRegistry.delete(id) }) } From 66e25407cf7961b2f8744e118d4fe09bd136303e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 21 Sep 2024 13:44:59 -0500 Subject: [PATCH 09/27] chore: release main (#2220) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .release-please-manifest.json | 4 ++-- packages/bootstrap-vue-next/CHANGELOG.md | 8 ++++++++ packages/bootstrap-vue-next/package.json | 2 +- packages/nuxt/CHANGELOG.md | 16 ++++++++++++++++ packages/nuxt/package.json | 2 +- 5 files changed, 28 insertions(+), 4 deletions(-) diff --git a/.release-please-manifest.json b/.release-please-manifest.json index 1a394a2a9..50a6964e3 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,4 +1,4 @@ { - "packages/bootstrap-vue-next": "0.24.19", - "packages/nuxt": "0.24.19" + "packages/bootstrap-vue-next": "0.24.20", + "packages/nuxt": "0.24.20" } diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md index e2db8b4fa..34e82a189 100644 --- a/packages/bootstrap-vue-next/CHANGELOG.md +++ b/packages/bootstrap-vue-next/CHANGELOG.md @@ -1,5 +1,13 @@ # Changelog +## [0.24.20](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.19...bootstrapvuenext-v0.24.20) (2024-09-21) + + +### Bug Fixes + +* **BModal:** fix jumping when scrollbars are present ([#2211](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2211)) ([9ab6132](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/9ab613252676524538e2713d5e55e21c0863320a)) +* **useFocusTrap:** dont deactivate focus on esc fixes [#2144](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2144) ([#2219](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2219)) ([89656ab](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/89656ab96deb986f1674f5ffdef59ff4743a44c5)) + ## [0.24.19](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.18...bootstrapvuenext-v0.24.19) (2024-09-21) diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json index e600f08c8..19987437d 100644 --- 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": "BootstrapVueNext is an early and lovely component library for Vue 3 & Nuxt 3 based on Bootstrap 5 and Typescript.", - "version": "0.24.19", + "version": "0.24.20", "license": "MIT", "main": "./dist/bootstrap-vue-next.umd.js", "module": "./dist/bootstrap-vue-next.mjs", diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md index b71c2d272..40718bae1 100644 --- a/packages/nuxt/CHANGELOG.md +++ b/packages/nuxt/CHANGELOG.md @@ -1,5 +1,21 @@ # Changelog +## [0.24.20](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.19...nuxt-v0.24.20) (2024-09-21) + + +### Miscellaneous Chores + +* **nuxt:** Synchronize main group versions + + +### Dependencies + +* The following workspace dependencies were updated + * devDependencies + * bootstrap-vue-next bumped to 0.24.20 + * peerDependencies + * bootstrap-vue-next bumped to 0.24.20 + ## [0.24.19](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.18...nuxt-v0.24.19) (2024-09-21) diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index 1c78e86e7..e413bc80d 100644 --- a/packages/nuxt/package.json +++ b/packages/nuxt/package.json @@ -1,7 +1,7 @@ { "name": "@bootstrap-vue-next/nuxt", "description": "Nuxt Module for BootstrapVueNext", - "version": "0.24.19", + "version": "0.24.20", "license": "MIT", "author": { "name": "Issayah", From 5946219512bfbf1a533a23670295ed5a8dfbaba9 Mon Sep 17 00:00:00 2001 From: Issayah Date: Sat, 21 Sep 2024 18:49:49 -0500 Subject: [PATCH 10/27] feat(colorvariant): add subtle and emphasis variant fixes #2079 --- .../src/components/BCard/BCardFooter.vue | 2 +- .../src/components/BCard/BCardHeader.vue | 2 +- .../src/components/BCard/card-footer.spec.ts | 2 +- .../src/components/BCard/card-header.spec.ts | 2 +- .../components/{BCard => }/BCardHeadFoot.vue | 4 +- .../{BCard => }/card-head-foot.spec.ts | 0 .../src/types/ColorTypes.ts | 45 +++++++++++-------- .../src/types/ComponentProps.ts | 37 ++++++++------- packages/bootstrap-vue-next/src/utils/keys.ts | 9 +++- 9 files changed, 62 insertions(+), 41 deletions(-) rename packages/bootstrap-vue-next/src/components/{BCard => }/BCardHeadFoot.vue (86%) rename packages/bootstrap-vue-next/src/components/{BCard => }/card-head-foot.spec.ts (100%) diff --git a/packages/bootstrap-vue-next/src/components/BCard/BCardFooter.vue b/packages/bootstrap-vue-next/src/components/BCard/BCardFooter.vue index 2213a7165..e48965fe6 100644 --- a/packages/bootstrap-vue-next/src/components/BCard/BCardFooter.vue +++ b/packages/bootstrap-vue-next/src/components/BCard/BCardFooter.vue @@ -9,7 +9,7 @@ diff --git a/packages/bootstrap-vue-next/src/components/BCard/BCardSubtitle.vue b/packages/bootstrap-vue-next/src/components/BCard/BCardSubtitle.vue index f22811de4..3a84c8233 100644 --- a/packages/bootstrap-vue-next/src/components/BCard/BCardSubtitle.vue +++ b/packages/bootstrap-vue-next/src/components/BCard/BCardSubtitle.vue @@ -7,9 +7,9 @@ diff --git a/packages/bootstrap-vue-next/src/components/BCardHeadFoot.vue b/packages/bootstrap-vue-next/src/components/BCardHeadFoot.vue index ecce7fe44..cbecd6cea 100644 --- a/packages/bootstrap-vue-next/src/components/BCardHeadFoot.vue +++ b/packages/bootstrap-vue-next/src/components/BCardHeadFoot.vue @@ -9,7 +9,6 @@ diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownGroup.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownGroup.vue index c53801f7b..c17d4eecf 100644 --- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownGroup.vue +++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownGroup.vue @@ -24,6 +24,7 @@ diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue index 80316fb4e..0bf8d5014 100644 --- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue +++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue @@ -27,6 +27,7 @@ import type {BDropdownItemProps} from '../../types/ComponentProps' import {useBLinkHelper} from '../../composables/useBLinkHelper' import {collapseInjectionKey, dropdownInjectionKey, navbarInjectionKey} from '../../utils/keys' import {useDefaults} from '../../composables/useDefaults' +import {useColorVariantClasses} from '../../composables/useColorVariantClasses' defineOptions({ inheritAttrs: false, @@ -74,12 +75,17 @@ defineSlots<{ const {computedLink, computedLinkProps} = useBLinkHelper(props) +const colorClasses = useColorVariantClasses( + computed(() => ({ + textVariant: props.variant, + })) +) const computedClasses = computed(() => [ props.linkClass, + colorClasses.value, { active: props.active, disabled: props.disabled, - [`text-${props.variant}`]: props.variant !== null, }, ]) diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItemButton.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItemButton.vue index c49e88377..e50697b7c 100644 --- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItemButton.vue +++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItemButton.vue @@ -15,6 +15,7 @@ diff --git a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTag.vue b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTag.vue index cd3ffdb8f..327037945 100644 --- a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTag.vue +++ b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTag.vue @@ -28,6 +28,7 @@ import {useDefaults} from '../../composables/useDefaults' import {useId} from '../../composables/useId' import type {BFormTagProps} from '../../types/ComponentProps' import BCloseButton from '../BButton/BCloseButton.vue' +import {useColorVariantClasses} from '../../composables/useColorVariantClasses' const _props = withDefaults(defineProps(), { disabled: false, @@ -57,9 +58,12 @@ const tagText = computed( ) const taglabelId = computed(() => `${computedId.value}taglabel__`) -const computedClasses = computed(() => ({ - [`text-bg-${props.variant}`]: props.variant !== null, - 'rounded-pill': props.pill, - 'disabled': props.disabled, -})) +const colorClasses = useColorVariantClasses(props) +const computedClasses = computed(() => [ + colorClasses.value, + { + 'rounded-pill': props.pill, + 'disabled': props.disabled, + }, +]) diff --git a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue index 6156402df..91228d40d 100644 --- a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue +++ b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue @@ -310,46 +310,33 @@ const modalDialogClasses = computed(() => [ }, ]) -const resolvedBodyBgClasses = useColorVariantClasses(() => ({ +const bodyColorClasses = useColorVariantClasses(() => ({ bgVariant: props.bodyBgVariant, textVariant: props.bodyTextVariant, variant: props.bodyVariant, })) +const bodyClasses = computed(() => [props.bodyClass, bodyColorClasses.value]) -const bodyClasses = computed(() => [props.bodyClass, resolvedBodyBgClasses.value]) - -const resolvedHeaderBgClasses = useColorVariantClasses(() => ({ +const headerColorClasses = useColorVariantClasses(() => ({ bgVariant: props.headerBgVariant, textVariant: props.headerTextVariant, variant: props.headerVariant, + borderVariant: props.headerBorderVariant, })) - -const headerClasses = computed(() => [ - props.headerClass, - resolvedHeaderBgClasses.value, - { - [`border-${props.headerBorderVariant}`]: props.headerBorderVariant !== null, - }, -]) +const headerClasses = computed(() => [props.headerClass, headerColorClasses.value]) const headerCloseAttrs = computed(() => ({ variant: hasHeaderCloseSlot.value ? props.headerCloseVariant : undefined, class: props.headerCloseClass, })) -const resolvedFooterBgClasses = useColorVariantClasses(() => ({ +const footerColorClasses = useColorVariantClasses(() => ({ bgVariant: props.footerBgVariant, textVariant: props.footerTextVariant, variant: props.footerVariant, + borderVariant: props.footerBorderVariant, })) - -const footerClasses = computed(() => [ - props.footerClass, - resolvedFooterBgClasses.value, - { - [`border-${props.footerBorderVariant}`]: props.footerBorderVariant !== null, - }, -]) +const footerClasses = computed(() => [props.footerClass, footerColorClasses.value]) const titleClasses = computed(() => [ props.titleClass, diff --git a/packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue b/packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue index f912cc4c5..b98aaf684 100644 --- a/packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue +++ b/packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue @@ -13,6 +13,7 @@ import type {BNavbarProps} from '../../types/ComponentProps' import {useDefaults} from '../../composables/useDefaults' import {useContainerClasses} from '../../composables/useContainerClasses' import {navbarInjectionKey} from '../../utils/keys' +import {useColorVariantClasses} from '../../composables/useColorVariantClasses' const _props = withDefaults(defineProps(), { autoClose: true, @@ -35,14 +36,21 @@ const computedRole = computed(() => (props.tag === 'nav' ? undefined : 'navigati const containerClass = useContainerClasses(() => props.container) -const computedClasses = computed(() => ({ - 'd-print': props.print, - [`sticky-${props.sticky}`]: props.sticky !== undefined, - [`bg-${props.variant}`]: props.variant !== null, - [`fixed-${props.fixed}`]: props.fixed !== undefined, - 'navbar-expand': props.toggleable === false, - [`navbar-expand-${props.toggleable}`]: typeof props.toggleable === 'string', -})) +const colorClasses = useColorVariantClasses( + computed(() => ({ + bgVariant: props.variant, + })) +) +const computedClasses = computed(() => [ + colorClasses.value, + { + 'd-print': props.print, + [`sticky-${props.sticky}`]: props.sticky !== undefined, + [`fixed-${props.fixed}`]: props.fixed !== undefined, + 'navbar-expand': props.toggleable === false, + [`navbar-expand-${props.toggleable}`]: typeof props.toggleable === 'string', + }, +]) provide(navbarInjectionKey, { tag: toRef(() => props.tag), diff --git a/packages/bootstrap-vue-next/src/components/BOverlay/BOverlay.vue b/packages/bootstrap-vue-next/src/components/BOverlay/BOverlay.vue index 0919aadf2..5ac5ccc1b 100644 --- a/packages/bootstrap-vue-next/src/components/BOverlay/BOverlay.vue +++ b/packages/bootstrap-vue-next/src/components/BOverlay/BOverlay.vue @@ -41,6 +41,8 @@ import BTransition from '../BTransition.vue' import BSpinner from '../BSpinner/BSpinner.vue' import ConditionalWrapper from '../ConditionalWrapper.vue' import {useRadiusElementClasses} from '../../composables/useRadiusElementClasses' +import {useColorVariantClasses} from '../../composables/useColorVariantClasses' +import type {BgColorVariant} from '../../types/ColorTypes' const _props = withDefaults(defineProps(), { blur: '2px', @@ -92,10 +94,6 @@ const radiusElementClasses = useRadiusElementClasses(() => ({ roundedEnd: props.roundedEnd, })) -const computedVariant = computed(() => - props.variant !== null && !props.bgColor ? `bg-${props.variant}` : '' -) - const computedAriaBusy = computed(() => (props.show ? true : null)) const spinnerAttrs = computed(() => ({ @@ -114,7 +112,12 @@ const overlayClasses = computed(() => ({ 'position-fixed': props.noWrap && props.fixed, })) -const blurClasses = computed(() => [computedVariant.value, radiusElementClasses.value]) +const colorClasses = useColorVariantClasses( + computed(() => ({ + bgVariant: props.variant !== null && !props.bgColor ? (props.variant as BgColorVariant) : null, + })) +) +const blurClasses = computed(() => [colorClasses.value, radiusElementClasses.value]) const blurStyles = computed(() => ({ ...positionStyles, diff --git a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholder.vue b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholder.vue index dbbdc0b35..7196da3ad 100644 --- a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholder.vue +++ b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholder.vue @@ -14,6 +14,7 @@ import {computed, type CSSProperties} from 'vue' import type {BPlaceholderProps} from '../../types/ComponentProps' import {useDefaults} from '../../composables/useDefaults' +import {useColorVariantClasses} from '../../composables/useColorVariantClasses' defineOptions({ inheritAttrs: false, @@ -46,11 +47,18 @@ const colsString = computed(() => : props.cols ) -const computedClasses = computed(() => ({ - [`col-${colsString.value}`]: colsString.value !== undefined && widthString.value === undefined, - [`bg-${props.variant}`]: props.variant !== null, - [`placeholder-${props.size}`]: props.size !== 'md', -})) +const colorClasses = useColorVariantClasses( + computed(() => ({ + bgVariant: props.variant, + })) +) +const computedClasses = computed(() => [ + colorClasses.value, + { + [`col-${colsString.value}`]: colsString.value !== undefined && widthString.value === undefined, + [`placeholder-${props.size}`]: props.size !== 'md', + }, +]) const wrapperClasses = computed(() => ({ [`placeholder-${props.animation}`]: props.animation !== undefined, diff --git a/packages/bootstrap-vue-next/src/components/BProgress/BProgressBar.vue b/packages/bootstrap-vue-next/src/components/BProgress/BProgressBar.vue index 6ac34cef3..0e85df5e3 100644 --- a/packages/bootstrap-vue-next/src/components/BProgress/BProgressBar.vue +++ b/packages/bootstrap-vue-next/src/components/BProgress/BProgressBar.vue @@ -45,10 +45,9 @@ defineSlots<{ const parentData = inject(progressInjectionKey, null) -const resolvedBackgroundClasses = useColorVariantClasses(props) - +const colorClasses = useColorVariantClasses(props) const computedClasses = computed(() => [ - resolvedBackgroundClasses.value, + colorClasses.value, { 'progress-bar-animated': props.animated || parentData?.animated.value, 'progress-bar-striped': diff --git a/packages/bootstrap-vue-next/src/components/BSpinner/BSpinner.vue b/packages/bootstrap-vue-next/src/components/BSpinner/BSpinner.vue index 32b98a4a3..010de87a0 100644 --- a/packages/bootstrap-vue-next/src/components/BSpinner/BSpinner.vue +++ b/packages/bootstrap-vue-next/src/components/BSpinner/BSpinner.vue @@ -16,6 +16,7 @@ import {computed} from 'vue' import type {BSpinnerProps} from '../../types/ComponentProps' import {isEmptySlot} from '../../utils/dom' import {useDefaults} from '../../composables/useDefaults' +import {useColorVariantClasses} from '../../composables/useColorVariantClasses' const _props = withDefaults(defineProps(), { label: undefined, @@ -33,11 +34,16 @@ const slots = defineSlots<{ label?: (props: Record) => any }>() +const colorClasses = useColorVariantClasses( + computed(() => ({ + textVariant: props.variant, + })) +) const computedClasses = computed(() => [ `spinner-${props.type}`, + colorClasses.value, { [`spinner-${props.type}-sm`]: props.small, - [`text-${props.variant}`]: props.variant !== null, }, ]) diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue b/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue index 29d18c783..4a41608d5 100644 --- a/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue +++ b/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue @@ -15,6 +15,7 @@ import {computed, type StyleValue} from 'vue' import type {BTableSimpleProps} from '../../types/ComponentProps' import {useDefaults} from '../../composables/useDefaults' import {useNumberishToStyle} from '../../composables/useNumberishToStyle' +import {useColorVariantClasses} from '../../composables/useColorVariantClasses' const defaultStickyHeaderHeight = '300px' @@ -46,14 +47,19 @@ defineSlots<{ default?: (props: Record) => any }>() +const colorClasses = useColorVariantClasses( + computed(() => ({ + borderVariant: props.borderVariant, + })) +) const computedClasses = computed(() => [ props.tableClass, 'table', 'b-table', + colorClasses.value, { 'table-bordered': props.bordered, 'table-borderless': props.borderless, - [`border-${props.borderVariant}`]: props.borderVariant !== null, 'caption-top': props.captionTop, 'table-dark': props.dark, 'table-hover': props.hover, diff --git a/packages/bootstrap-vue-next/src/components/BToast/BToast.vue b/packages/bootstrap-vue-next/src/components/BToast/BToast.vue index 1f51f82b9..01df2d738 100644 --- a/packages/bootstrap-vue-next/src/components/BToast/BToast.vue +++ b/packages/bootstrap-vue-next/src/components/BToast/BToast.vue @@ -139,7 +139,6 @@ const modelValue = defineModel>({d const {computedLink, computedLinkProps} = useBLinkHelper(props) // TODO solid is never used -const resolvedBackgroundClasses = useColorVariantClasses(props) const countdownLength = computed(() => typeof modelValue.value === 'boolean' ? 0 : modelValue.value ) @@ -176,8 +175,9 @@ const isToastVisible = computed(() => : isActive.value || (props.showOnPause && isPaused.value) ) +const colorClasses = useColorVariantClasses(props) const computedClasses = computed(() => [ - resolvedBackgroundClasses.value, + colorClasses.value, { show: isToastVisible.value, }, diff --git a/packages/bootstrap-vue-next/src/composables/useColorVariantClasses.ts b/packages/bootstrap-vue-next/src/composables/useColorVariantClasses.ts index 60e0932c0..a83e0ce34 100644 --- a/packages/bootstrap-vue-next/src/composables/useColorVariantClasses.ts +++ b/packages/bootstrap-vue-next/src/composables/useColorVariantClasses.ts @@ -1,18 +1,21 @@ import {computed, type MaybeRefOrGetter, toValue} from 'vue' -import type {ColorExtendables} from '../types/ColorTypes' +import type {BorderColorVariant, ColorExtendables} from '../types/ColorTypes' -export const useColorVariantClasses = (obj: MaybeRefOrGetter) => +export const useColorVariantClasses = ( + obj: MaybeRefOrGetter +) => computed(() => { let props = toValue(obj) props = { - ...props, variant: props.variant ?? null, bgVariant: props.bgVariant ?? null, textVariant: props.textVariant ?? null, + borderVariant: props.borderVariant ?? null, } return { [`text-bg-${props.variant}`]: props.variant !== null, [`text-${props.textVariant}`]: props.textVariant !== null, [`bg-${props.bgVariant}`]: props.bgVariant !== null, + [`border-${props.borderVariant}`]: props.borderVariant !== null, } }) diff --git a/packages/bootstrap-vue-next/src/types/ColorTypes.ts b/packages/bootstrap-vue-next/src/types/ColorTypes.ts index 02de668fa..ea5aba748 100644 --- a/packages/bootstrap-vue-next/src/types/ColorTypes.ts +++ b/packages/bootstrap-vue-next/src/types/ColorTypes.ts @@ -29,7 +29,7 @@ export interface BaseButtonVariant extends BaseColorVariant, BaseColorVariantOut } export type ButtonVariant = keyof BaseButtonVariant -export interface BaseTextColorVariant extends BaseColorVariant, BaseColorVariantSubtle { +export interface BaseTextColorVariant extends BaseColorVariant, BaseColorVariantEmphasis { 'white': unknown 'body': unknown 'body-secondary': unknown @@ -39,7 +39,7 @@ export interface BaseTextColorVariant extends BaseColorVariant, BaseColorVariant } export type TextColorVariant = keyof BaseTextColorVariant -export interface BaseBgColorVariant extends BaseColorVariant, BaseColorVariantEmphasis {} +export interface BaseBgColorVariant extends BaseColorVariant, BaseColorVariantSubtle {} export type BgColorVariant = keyof BaseBgColorVariant export interface BaseBorderColorVariant extends BaseColorVariant, BaseColorVariantSubtle {} diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts index bd8e1d50d..22b51d693 100644 --- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts +++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts @@ -471,7 +471,7 @@ export interface BNavbarProps { sticky?: Extract tag?: string toggleable?: boolean | Breakpoint - variant?: ColorVariant | null + variant?: BgColorVariant | null } export interface BNavbarBrandProps extends Omit { @@ -532,7 +532,7 @@ export interface BOverlayProps extends RadiusElementExtendables { spinnerSmall?: boolean spinnerType?: SpinnerType spinnerVariant?: ColorVariant | null - variant?: ColorVariant | 'white' | 'transparent' | null + variant?: BgColorVariant | 'white' | 'transparent' | null wrapTag?: string zIndex?: Numberish } @@ -575,7 +575,7 @@ export interface BPlaceholderProps { cols?: Numberish size?: PlaceholderSize tag?: string - variant?: ColorVariant | null + variant?: BgColorVariant | null width?: Numberish wrapperTag?: string } diff --git a/packages/bootstrap-vue-next/tests/composables/useColorVariantClasses.spec.ts b/packages/bootstrap-vue-next/tests/composables/useColorVariantClasses.spec.ts index 992838bf5..7a78ee025 100644 --- a/packages/bootstrap-vue-next/tests/composables/useColorVariantClasses.spec.ts +++ b/packages/bootstrap-vue-next/tests/composables/useColorVariantClasses.spec.ts @@ -23,6 +23,22 @@ describe('useColorVariantClasses blackbox test', () => { 'text-bg-danger': true, 'text-null': false, 'bg-null': false, + 'border-null': false, + }) + }) + + it('value returns text-bg-{type} when prop variant', () => { + const backgroundVariant = useColorVariantClasses(() => ({ + bgVariant: null, + textVariant: null, + variant: null, + borderVariant: 'danger-subtle', + })) + expect(backgroundVariant.value).toEqual({ + 'text-bg-null': false, + 'text-null': false, + 'bg-null': false, + 'border-danger-subtle': true, }) }) @@ -36,6 +52,7 @@ describe('useColorVariantClasses blackbox test', () => { 'text-bg-null': false, 'text-null': false, 'bg-danger': true, + 'border-null': false, }) }) @@ -48,6 +65,7 @@ describe('useColorVariantClasses blackbox test', () => { expect(backgroundVariant.value).toEqual({ 'text-bg-null': false, 'text-danger': true, + 'border-null': false, 'bg-null': false, }) }) @@ -62,6 +80,7 @@ describe('useColorVariantClasses blackbox test', () => { 'text-bg-null': false, 'text-danger': true, 'bg-danger': true, + 'border-null': false, }) }) @@ -74,6 +93,7 @@ describe('useColorVariantClasses blackbox test', () => { expect(backgroundVariant.value).toEqual({ 'text-bg-success': true, 'text-info': true, + 'border-null': false, 'bg-danger': true, }) }) @@ -89,6 +109,7 @@ describe('useColorVariantClasses blackbox test', () => { 'text-bg-null': false, 'text-danger': true, 'bg-danger': true, + 'border-null': false, }) react.bgVariant = 'info' react.textVariant = 'info' @@ -97,6 +118,7 @@ describe('useColorVariantClasses blackbox test', () => { 'text-bg-danger': true, 'text-info': true, 'bg-info': true, + 'border-null': false, }) }) }) From 71a26828d8d3d3cc377fc5ac6e0f26a679f2c077 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 21 Sep 2024 19:47:07 -0500 Subject: [PATCH 12/27] chore: release main (#2223) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .release-please-manifest.json | 4 ++-- packages/bootstrap-vue-next/CHANGELOG.md | 7 +++++++ packages/bootstrap-vue-next/package.json | 2 +- packages/nuxt/CHANGELOG.md | 16 ++++++++++++++++ packages/nuxt/package.json | 2 +- 5 files changed, 27 insertions(+), 4 deletions(-) diff --git a/.release-please-manifest.json b/.release-please-manifest.json index 50a6964e3..8ef16d8fd 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,4 +1,4 @@ { - "packages/bootstrap-vue-next": "0.24.20", - "packages/nuxt": "0.24.20" + "packages/bootstrap-vue-next": "0.24.21", + "packages/nuxt": "0.24.21" } diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md index 34e82a189..9ddebfdad 100644 --- a/packages/bootstrap-vue-next/CHANGELOG.md +++ b/packages/bootstrap-vue-next/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## [0.24.21](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.20...bootstrapvuenext-v0.24.21) (2024-09-22) + + +### Features + +* **colorvariant:** add subtle and emphasis variant fixes [#2079](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2079) ([5946219](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/5946219512bfbf1a533a23670295ed5a8dfbaba9)) + ## [0.24.20](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.19...bootstrapvuenext-v0.24.20) (2024-09-21) diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json index 19987437d..fcaf4d946 100644 --- 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": "BootstrapVueNext is an early and lovely component library for Vue 3 & Nuxt 3 based on Bootstrap 5 and Typescript.", - "version": "0.24.20", + "version": "0.24.21", "license": "MIT", "main": "./dist/bootstrap-vue-next.umd.js", "module": "./dist/bootstrap-vue-next.mjs", diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md index 40718bae1..99d6b1b50 100644 --- a/packages/nuxt/CHANGELOG.md +++ b/packages/nuxt/CHANGELOG.md @@ -1,5 +1,21 @@ # Changelog +## [0.24.21](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.20...nuxt-v0.24.21) (2024-09-22) + + +### Miscellaneous Chores + +* **nuxt:** Synchronize main group versions + + +### Dependencies + +* The following workspace dependencies were updated + * devDependencies + * bootstrap-vue-next bumped to 0.24.21 + * peerDependencies + * bootstrap-vue-next bumped to 0.24.21 + ## [0.24.20](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.19...nuxt-v0.24.20) (2024-09-21) diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index e413bc80d..f600ebe79 100644 --- a/packages/nuxt/package.json +++ b/packages/nuxt/package.json @@ -1,7 +1,7 @@ { "name": "@bootstrap-vue-next/nuxt", "description": "Nuxt Module for BootstrapVueNext", - "version": "0.24.20", + "version": "0.24.21", "license": "MIT", "author": { "name": "Issayah", From 952817c6b2ab94f59b1cb3864ed0bfe5680447a6 Mon Sep 17 00:00:00 2001 From: Issayah Date: Sat, 21 Sep 2024 19:50:32 -0500 Subject: [PATCH 13/27] Update migration-guide.md --- apps/docs/src/docs/migration-guide.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md index f4bb1a170..b7f1897b3 100644 --- a/apps/docs/src/docs/migration-guide.md +++ b/apps/docs/src/docs/migration-guide.md @@ -23,6 +23,8 @@ For instance, there are likely many places where you use `Bootstrap` utility cla classes that involve `left` and `right` (or `l` and `r`) to be `start` and `end` (or `s` and `e`). This will affect compents such as `BNavBar` in unexpected ways that BSVN has no control over. +Bootstrap-vue-next will commit to breaking changes whenever Bootstrap marks something as "deprecated". These changes may be resolved automatically, or they might necessitate manual action from the library's users. + ## Sync modifier A number of components in `bootstrap-vue` use `v-bind`'s `.sync` modifier. This modifier has been replaced by properties From e29a9efaee7a26257fa4a18e197b24d0dd819270 Mon Sep 17 00:00:00 2001 From: Issayah Date: Tue, 24 Sep 2024 16:26:33 -0500 Subject: [PATCH 14/27] fix(BTable): select mode range when table is sorted fixes #2229 (#2230) --- .../src/components/BTable/BTable.vue | 4 +-- .../src/components/BTable/table.spec.ts | 31 +++++++++++++++++++ 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue index 2ec947b2d..d39865325 100644 --- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue +++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue @@ -580,10 +580,10 @@ const handleRowSelection = ( // This is where range is different, due to the difference in shift } else if (shiftClicked) { const lastSelectedItem = [...selectedItemsToSet.value].pop() - const lastSelectedIndex = props.items.findIndex((i) => i === lastSelectedItem) + const lastSelectedIndex = computedItems.value.findIndex((i) => i === lastSelectedItem) const selectStartIndex = Math.min(lastSelectedIndex, index) const selectEndIndex = Math.max(lastSelectedIndex, index) - const items = props.items.slice(selectStartIndex, selectEndIndex + 1) + const items = computedItems.value.slice(selectStartIndex, selectEndIndex + 1) selectedItemsSetUtilities.set(items) // If nothing is being held, then we just behave like it's single mode } else { diff --git a/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts b/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts index 9827ffa8d..c64fbe3da 100644 --- a/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts +++ b/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts @@ -476,6 +476,37 @@ describe('object-persistence', () => { expect($trs[2].classes()).toContain('selected') expect($trs[3].classes()).toContain('selected') }) + it('shift click correct order', async () => { + const wrapper = mount(BTable, { + props: { + 'selectMode': 'range', + 'selectable': true, + 'items': [ + {id: 1, text: 'C'}, + {id: 2, text: 'A'}, + {id: 3, text: 'B'}, + {id: 4, text: 'D'}, + ], + 'fields': [ + {key: 'id', sortable: true}, + {key: 'text', sortable: true}, + ], + 'selectedItems': [], + 'onUpdate:selectedItems': (value) => wrapper.setProps({selectedItems: value}), + 'sortBy': [{key: 'text', order: 'asc'}], + 'primaryKey': 'id', + }, + }) + const [first, second, third, fourth] = wrapper.findAll('tr') + await fourth.trigger('click') + const event = new MouseEvent('click', {shiftKey: true}) + third.element.dispatchEvent(event) + await nextTick() + expect(first.classes()).not.toContain('selected') + expect(second.classes()).not.toContain('selected') + expect(third.classes()).toContain('selected') + expect(fourth.classes()).toContain('selected') + }) }) }) }) From a30af55918bb9980064023640f8cc13717ce4107 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 24 Sep 2024 16:27:29 -0500 Subject: [PATCH 15/27] chore: release main (#2231) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .release-please-manifest.json | 4 ++-- packages/bootstrap-vue-next/CHANGELOG.md | 7 +++++++ packages/bootstrap-vue-next/package.json | 2 +- packages/nuxt/CHANGELOG.md | 16 ++++++++++++++++ packages/nuxt/package.json | 2 +- 5 files changed, 27 insertions(+), 4 deletions(-) diff --git a/.release-please-manifest.json b/.release-please-manifest.json index 8ef16d8fd..b6abd802a 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,4 +1,4 @@ { - "packages/bootstrap-vue-next": "0.24.21", - "packages/nuxt": "0.24.21" + "packages/bootstrap-vue-next": "0.24.22", + "packages/nuxt": "0.24.22" } diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md index 9ddebfdad..658d42039 100644 --- a/packages/bootstrap-vue-next/CHANGELOG.md +++ b/packages/bootstrap-vue-next/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## [0.24.22](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.21...bootstrapvuenext-v0.24.22) (2024-09-24) + + +### Bug Fixes + +* **BTable:** select mode range when table is sorted fixes [#2229](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2229) ([#2230](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2230)) ([e29a9ef](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/e29a9efaee7a26257fa4a18e197b24d0dd819270)) + ## [0.24.21](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.20...bootstrapvuenext-v0.24.21) (2024-09-22) diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json index fcaf4d946..1357ab096 100644 --- 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": "BootstrapVueNext is an early and lovely component library for Vue 3 & Nuxt 3 based on Bootstrap 5 and Typescript.", - "version": "0.24.21", + "version": "0.24.22", "license": "MIT", "main": "./dist/bootstrap-vue-next.umd.js", "module": "./dist/bootstrap-vue-next.mjs", diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md index 99d6b1b50..86d660549 100644 --- a/packages/nuxt/CHANGELOG.md +++ b/packages/nuxt/CHANGELOG.md @@ -1,5 +1,21 @@ # Changelog +## [0.24.22](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.21...nuxt-v0.24.22) (2024-09-24) + + +### Miscellaneous Chores + +* **nuxt:** Synchronize main group versions + + +### Dependencies + +* The following workspace dependencies were updated + * devDependencies + * bootstrap-vue-next bumped to 0.24.22 + * peerDependencies + * bootstrap-vue-next bumped to 0.24.22 + ## [0.24.21](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.20...nuxt-v0.24.21) (2024-09-22) diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index f600ebe79..937ad9dd4 100644 --- a/packages/nuxt/package.json +++ b/packages/nuxt/package.json @@ -1,7 +1,7 @@ { "name": "@bootstrap-vue-next/nuxt", "description": "Nuxt Module for BootstrapVueNext", - "version": "0.24.21", + "version": "0.24.22", "license": "MIT", "author": { "name": "Issayah", From 9e4d8b7b8372a8aa3d6e3ec3fb3298f27e6292e0 Mon Sep 17 00:00:00 2001 From: oliver681 <45591639+oliver681@users.noreply.github.com> Date: Thu, 26 Sep 2024 22:09:02 +0200 Subject: [PATCH 16/27] fix(vBPopover): add position absolute to floating directives (#2234) Co-authored-by: oliver681 --- packages/bootstrap-vue-next/src/utils/floatingUi.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/bootstrap-vue-next/src/utils/floatingUi.ts b/packages/bootstrap-vue-next/src/utils/floatingUi.ts index 0f30ae6de..41b22573f 100644 --- a/packages/bootstrap-vue-next/src/utils/floatingUi.ts +++ b/packages/bootstrap-vue-next/src/utils/floatingUi.ts @@ -117,6 +117,7 @@ export const bind = ( props: BPopoverProps ) => { const div = document.createElement('span') + div.style.position = 'absolute' if (binding.modifiers.body) document.body.appendChild(div) else if (binding.modifiers.child) el.appendChild(div) else el.parentNode?.insertBefore(div, el.nextSibling) From aa9b5c5869e8b53d456779725ce76667dde0c4cf Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 26 Sep 2024 15:09:51 -0500 Subject: [PATCH 17/27] chore: release main (#2235) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .release-please-manifest.json | 4 ++-- packages/bootstrap-vue-next/CHANGELOG.md | 7 +++++++ packages/bootstrap-vue-next/package.json | 2 +- packages/nuxt/CHANGELOG.md | 16 ++++++++++++++++ packages/nuxt/package.json | 2 +- 5 files changed, 27 insertions(+), 4 deletions(-) diff --git a/.release-please-manifest.json b/.release-please-manifest.json index b6abd802a..85fb695eb 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,4 +1,4 @@ { - "packages/bootstrap-vue-next": "0.24.22", - "packages/nuxt": "0.24.22" + "packages/bootstrap-vue-next": "0.24.23", + "packages/nuxt": "0.24.23" } diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md index 658d42039..f87303a28 100644 --- a/packages/bootstrap-vue-next/CHANGELOG.md +++ b/packages/bootstrap-vue-next/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## [0.24.23](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.22...bootstrapvuenext-v0.24.23) (2024-09-26) + + +### Bug Fixes + +* **vBPopover:** add position absolute to floating directives ([#2234](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2234)) ([9e4d8b7](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/9e4d8b7b8372a8aa3d6e3ec3fb3298f27e6292e0)) + ## [0.24.22](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.21...bootstrapvuenext-v0.24.22) (2024-09-24) diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json index 1357ab096..5cba56a78 100644 --- 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": "BootstrapVueNext is an early and lovely component library for Vue 3 & Nuxt 3 based on Bootstrap 5 and Typescript.", - "version": "0.24.22", + "version": "0.24.23", "license": "MIT", "main": "./dist/bootstrap-vue-next.umd.js", "module": "./dist/bootstrap-vue-next.mjs", diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md index 86d660549..64b3523c6 100644 --- a/packages/nuxt/CHANGELOG.md +++ b/packages/nuxt/CHANGELOG.md @@ -1,5 +1,21 @@ # Changelog +## [0.24.23](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.22...nuxt-v0.24.23) (2024-09-26) + + +### Miscellaneous Chores + +* **nuxt:** Synchronize main group versions + + +### Dependencies + +* The following workspace dependencies were updated + * devDependencies + * bootstrap-vue-next bumped to 0.24.23 + * peerDependencies + * bootstrap-vue-next bumped to 0.24.23 + ## [0.24.22](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.21...nuxt-v0.24.22) (2024-09-24) diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index 937ad9dd4..3baee13ed 100644 --- a/packages/nuxt/package.json +++ b/packages/nuxt/package.json @@ -1,7 +1,7 @@ { "name": "@bootstrap-vue-next/nuxt", "description": "Nuxt Module for BootstrapVueNext", - "version": "0.24.22", + "version": "0.24.23", "license": "MIT", "author": { "name": "Issayah", From e1cbb6023e4bada3591938f0c0fad74e75477142 Mon Sep 17 00:00:00 2001 From: Jukka Raimovaara Date: Fri, 27 Sep 2024 10:55:46 +0300 Subject: [PATCH 18/27] fix directives in vite template --- templates/vite/src/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/vite/src/main.ts b/templates/vite/src/main.ts index 3f6353583..9f01101ee 100644 --- a/templates/vite/src/main.ts +++ b/templates/vite/src/main.ts @@ -13,6 +13,6 @@ for (const name in Components) { app.component(name, Components[name]) } for (const name in Directives) { - app.directive(name, Directives[name]) + app.directive(name.replace(/^v/, ''), Directives[name]) } app.mount('#app') From d793be6f03ac4451ae3e8ac849a7d203dd322ba9 Mon Sep 17 00:00:00 2001 From: "David W. Gray" Date: Sun, 29 Sep 2024 11:29:57 -0700 Subject: [PATCH 19/27] docs(BCollapse): Parity pass (#2237) --- .../docs/src/data/components/collapse.data.ts | 109 +++++--- apps/docs/src/docs/components/collapse.md | 255 +++--------------- .../docs/components/demo/CollapseContent.vue | 13 + .../docs/components/demo/CollapseExpose.vue | 23 ++ .../docs/components/demo/CollapseInitial.vue | 10 + .../docs/components/demo/CollapseModel.vue | 20 ++ .../docs/components/demo/CollapseMultiple.vue | 19 ++ .../docs/components/demo/CollapseOverview.vue | 15 ++ .../docs/components/demo/CollapseUsage.vue | 14 + apps/docs/src/docs/migration-guide.md | 16 ++ 10 files changed, 243 insertions(+), 251 deletions(-) create mode 100644 apps/docs/src/docs/components/demo/CollapseContent.vue create mode 100644 apps/docs/src/docs/components/demo/CollapseExpose.vue create mode 100644 apps/docs/src/docs/components/demo/CollapseInitial.vue create mode 100644 apps/docs/src/docs/components/demo/CollapseModel.vue create mode 100644 apps/docs/src/docs/components/demo/CollapseMultiple.vue create mode 100644 apps/docs/src/docs/components/demo/CollapseOverview.vue create mode 100644 apps/docs/src/docs/components/demo/CollapseUsage.vue diff --git a/apps/docs/src/data/components/collapse.data.ts b/apps/docs/src/data/components/collapse.data.ts index fe686813e..1cc94dd37 100644 --- a/apps/docs/src/data/components/collapse.data.ts +++ b/apps/docs/src/data/components/collapse.data.ts @@ -1,5 +1,34 @@ import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' +import type {ComponentReference, PropertyReference, SlotScopeReference} from '../../types' +import {buildCommonProps, pick} from '../../utils' + +const sharedSlots: SlotScopeReference[] = [ + { + prop: 'hide', + type: '() => void', + description: "Hides the collapse and fires the 'hide' event", + }, + { + prop: 'id', + type: 'string', + description: 'The id of the collapse element', + }, + { + prop: 'show', + type: '() => void', + description: "Shows the collapse and fires the 'show' event", + }, + { + prop: 'toggle', + type: '() => void', + description: "Toggles the collapse and fires the 'hide' or 'show' event, as appropriate", + }, + { + prop: 'visible', + type: '() => void', + description: 'Visible state of the collapse. `true` if the collapse is visible', + }, +] export default { load: (): ComponentReference[] => [ @@ -12,94 +41,108 @@ export default { type: 'boolean', default: false, }, - id: { - type: 'string', - default: undefined, - }, isNav: { type: 'boolean', default: false, + description: + 'When set, signifies that the collapse is part of a navbar, enabling certain features for navbar support', }, modelValue: { type: 'boolean', default: false, + description: 'Controls the visibility of the collapse', }, skipAnimation: { type: 'boolean', default: false, - }, - tag: { - type: 'string', - default: 'div', + description: 'When set, disables the animation', }, toggle: { type: 'boolean', default: false, + description: + "When set, and prop 'visible' is false on mount, will animate from closed to open on initial mount", }, visible: { type: 'boolean', default: false, + description: "When 'true', expands the collapse", }, + ...pick(buildCommonProps(), ['id', 'tag']), } satisfies Record, }, emits: [ { + event: 'update:model-value', + description: 'Used to update the v-model', args: [ { - arg: 'update:model-value', - description: '', + arg: 'value', type: 'boolean', + description: 'Will be true if the collapse is visible', }, ], - description: '', - event: 'update:model-value', }, { - args: [], - description: '', - event: 'show', + event: 'hide', + description: 'Emitted when collapse has started to close', + args: [ + { + arg: 'value', + type: 'BvTriggerableEvent', + description: 'The event object', + }, + ], }, { + event: 'hidden', + description: 'Emitted when collapse has finished closing', args: [], - description: '', - event: 'shown', }, { + event: 'hide-prevented', + description: 'Emitted when the Collapse tried to close, but was prevented from doing so.', args: [], - description: '', - event: 'show-prevented', }, { + event: 'show', + description: 'Emitted when collapse has started to open', args: [], - description: '', - event: 'hide', }, { - args: [], - description: '', - event: 'hidden', + event: 'shown', + description: 'Emitted when collapse has finished opening', + args: [ + { + arg: 'value', + type: 'BvTriggerableEvent', + description: 'The event object', + }, + ], }, { + event: 'show-prevented', + description: 'Emitted when the Collapse tried to open, but was prevented from doing so.', args: [], - description: '', - event: 'hide-prevented', }, ], slots: [ { - description: '', name: 'default', - scope: [], + description: 'The content shown and hidden by the collapse', + scope: sharedSlots, }, { - description: '', name: 'footer', - scope: [], + description: + 'Used to create custom toggles for your collapsible content. Placed directly below the content', + scope: sharedSlots, }, { - description: '', name: 'header', - scope: [], + description: + 'Used to create custom toggles for your collapsible content. Placed directly above the content', + scope: sharedSlots, }, ], }, diff --git a/apps/docs/src/docs/components/collapse.md b/apps/docs/src/docs/components/collapse.md index a5099339e..7ac49f8b2 100644 --- a/apps/docs/src/docs/components/collapse.md +++ b/apps/docs/src/docs/components/collapse.md @@ -10,97 +10,24 @@ Easily toggle visibility of almost any content on your pages in a vertically collapsing container. Includes support for making accordions. Visibility can be easily toggled with our -[`v-b-toggle` directive](/docs/directives/toggle), or via `v-model`. +[`v-b-toggle` directive](/docs/directives/BToggle), or via [`v-model`](#v-model-support). - - Toggle Collapse - - -

Collapse contents Here

- Toggle Inner Collapse - - Hello! - - - - - +<<< DEMO ./demo/CollapseOverview.vue#template{vue-html} ## Usage Other elements can easily toggle `BCollapse` components using the [`v-b-toggle` directive](/docs/directives/toggle). - - - Toggle Collapse - - Toggle Collapse - - - I am collapsible content! - - - +<<< DEMO ./demo/CollapseUsage.vue#template{vue-html} ## Initial visibility (start expanded) To make the `BCollapse` show initially, set the `v-model` prop: - - Toggle Collapse - - I should start open! - - - - -~~By default, an initially visible collapse will not animate on mount. To enable the collapse -expanding animation on mount (when `visible` or `v-model` is `true`), set the `appear` prop on -`BCollapse`.~~ +<<< DEMO ./demo/CollapseInitial.vue#template{vue-html} ## `v-model` support @@ -112,44 +39,10 @@ are not automatically placed on the trigger button (as is the case when using th directive). In this example we **must control the attributes ourselves** for proper accessibility support. - - - Toggle Collapse - - - I should start open! - - - +<<< DEMO ./demo/CollapseModel.vue ## Trigger multiple collapse elements @@ -158,56 +51,16 @@ multiple target Ids using _modifiers_. You can also pass multiple target Ids via the directive _value_ in BootstrapVueNext. - -
- - Toggle Collapse A and B - - Toggle Collapse A and B - - Toggle Collapse A and B -
- - - I am collapsible content A! - - - I am collapsible content B! - - - - -## Hiding and showing content in the toggle button based on collapse state - -New in v0.8.0 - -The `header` slot can be used to create custom toggles for your collapsible content. The `footer` slot is also available and can be used in the same manner. +<<< DEMO ./demo/CollapseMultiple.vue#template{vue-html} + +## Slots + +The `header` and `footer` slots can be used to create custom toggles for your collapsible content. The default slot is +used for the content to be hidden or shown. Using the `v-b-toggle` directive to toggle the `BCollapse` will still work but the `collapsed` CSS class will no longer be applied to the element with the directive. -The following properties are available for the `header` and `footer` slots: +The following properties are available for the `header` and `footer` and `default` slots: | Property | Type | Description | | --------- | -------- | ------------------------------------- | @@ -217,32 +70,23 @@ The following properties are available for the `header` and `footer` slots: | `hide` | Function | When called, will close the collapse | | `id` | String | The ID of the collapsible element | - - - - -
This is data that is being collapsed
- - - +`BCollapse` also [provides](https://vuejs.org/guide/components/provide-inject.html) the above variables +to its children as well as the value of the `isNav` prop. + +<<< DEMO ./demo/CollapseContent.vue#template{vue-html} + +## Exposed functions + +`BCollapse` exposes several functions and properties that allow manipulation and examination of the state of the components. +These are accessed through the [template ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) + +- hide: Hides the collapse and fires the `hide` event +- show: Shows the collapse and fires the `show` event +- toggle: Toggles the collapse and fires the `hide` or `show` event, as appropriate +- isNav: The value of the `isNav` prop of the collapse +- visible: The visible state of the collapse + +<<< DEMO ./demo/CollapseExpose.vue ## Accessibility @@ -262,39 +106,14 @@ something other than a button or link (or similar component), you should add the `tabindex="0"` and `role="button"` to allow users of assistive technology to reach your trigger element. -When using accordion mode, make sure you place the trigger elements and `BCollapse` components -inside an element with `role="tablist"` and set `role="tab"` on each trigger element's container in -order to help screen reader users navigate the accordion group. Unfortunately, BootstrapVueNext cannot -apply those roles for you automatically, as it depends on your final document markup. - - - + diff --git a/apps/docs/src/docs/components/demo/CollapseContent.vue b/apps/docs/src/docs/components/demo/CollapseContent.vue new file mode 100644 index 000000000..98332498d --- /dev/null +++ b/apps/docs/src/docs/components/demo/CollapseContent.vue @@ -0,0 +1,13 @@ + diff --git a/apps/docs/src/docs/components/demo/CollapseExpose.vue b/apps/docs/src/docs/components/demo/CollapseExpose.vue new file mode 100644 index 000000000..a000f509b --- /dev/null +++ b/apps/docs/src/docs/components/demo/CollapseExpose.vue @@ -0,0 +1,23 @@ + + + diff --git a/apps/docs/src/docs/components/demo/CollapseInitial.vue b/apps/docs/src/docs/components/demo/CollapseInitial.vue new file mode 100644 index 000000000..776dc8538 --- /dev/null +++ b/apps/docs/src/docs/components/demo/CollapseInitial.vue @@ -0,0 +1,10 @@ + diff --git a/apps/docs/src/docs/components/demo/CollapseModel.vue b/apps/docs/src/docs/components/demo/CollapseModel.vue new file mode 100644 index 000000000..7e5cd1fd0 --- /dev/null +++ b/apps/docs/src/docs/components/demo/CollapseModel.vue @@ -0,0 +1,20 @@ + + + diff --git a/apps/docs/src/docs/components/demo/CollapseMultiple.vue b/apps/docs/src/docs/components/demo/CollapseMultiple.vue new file mode 100644 index 000000000..b7d5a16f7 --- /dev/null +++ b/apps/docs/src/docs/components/demo/CollapseMultiple.vue @@ -0,0 +1,19 @@ + diff --git a/apps/docs/src/docs/components/demo/CollapseOverview.vue b/apps/docs/src/docs/components/demo/CollapseOverview.vue new file mode 100644 index 000000000..fff194758 --- /dev/null +++ b/apps/docs/src/docs/components/demo/CollapseOverview.vue @@ -0,0 +1,15 @@ + diff --git a/apps/docs/src/docs/components/demo/CollapseUsage.vue b/apps/docs/src/docs/components/demo/CollapseUsage.vue new file mode 100644 index 000000000..baab9578e --- /dev/null +++ b/apps/docs/src/docs/components/demo/CollapseUsage.vue @@ -0,0 +1,14 @@ + diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md index b7f1897b3..fd324b366 100644 --- a/apps/docs/src/docs/migration-guide.md +++ b/apps/docs/src/docs/migration-guide.md @@ -146,6 +146,22 @@ The `sliding-start` and `sliding-end` events have been renamed to `slide` and `s The `label-indicators` prop has been renamed to `indicators-button-label`. The `label-goto-slide`and `no-animation` props. +## BCollapse + +The `accordian` prop is deprecated: In `bootstrap-vue`/`bootstrap4`, accordians are implemented via `BCollapse`. +In `boostrap-vue-nexst`/`bootstrap5` accordians are first class citizens, so please use the +[`BAccordian`](/docs/components/accordian) instead. + +The prop `toggle` has replaced the prop `appear` with slightly different semantics. In order to create a +collapse that is closed and transitions to open on the initial mount, set `visible` to false and `toggle` to true. + +The `close` scoped slot element has been replaced by `hide` for consistency with the other props and +events on this component. + +`$root` instance events `bv::collapse::state` and `bv::toggle::collapse` are deprecrated. + +The `appear` prop. + ## BForm Bootstrap 5 has dropped form-specific layout classes for the grid system. See the From 70bea394b6e75cc1a172e733beac8b97f83c6e28 Mon Sep 17 00:00:00 2001 From: "David W. Gray" Date: Sun, 29 Sep 2024 11:30:20 -0700 Subject: [PATCH 20/27] docs: Work around unplugin bug (#2226) --- .../src/components/ComponentReference.vue | 10 ++++--- apps/docs/src/docs/components/breadcrumb.md | 8 +++++- apps/docs/src/docs/components/card.md | 8 +++++- apps/docs/src/docs/components/carousel.md | 27 +++++-------------- apps/docs/src/docs/components/image.md | 8 +++++- apps/docs/src/docs/components/pagination.md | 8 +++++- apps/docs/src/docs/migration-guide.md | 5 ---- 7 files changed, 40 insertions(+), 34 deletions(-) diff --git a/apps/docs/src/components/ComponentReference.vue b/apps/docs/src/components/ComponentReference.vue index 94e4fe11a..a60834607 100644 --- a/apps/docs/src/components/ComponentReference.vue +++ b/apps/docs/src/components/ComponentReference.vue @@ -77,14 +77,16 @@