Merge branch 'main' of https://github.com/VividLemon/bootstrap-vue-next

Author: VividLemon

.github/pull_request_template.md

@@ -4,7 +4,7 @@ A clear and concise description of what the pull request does.
 
 ## Small replication
 
-If the change is large enough, a small replication can help demonstrate the changes made. This is optional, but can help observe the intended changes. A mentioned issue that contains a replication also works.
+A small replication or video walkthrough can help demonstrate the changes made. This is optional, but can help observe the intended changes. A mentioned issue that contains a replication also works.
 
 ## PR checklist
 

.release-please-manifest.json

@@ -1,4 +1,4 @@
 {
-  "packages/bootstrap-vue-next": "0.9.25",
+  "packages/bootstrap-vue-next": "0.9.26",
   "packages/nuxt": "0.1.3"
 }

packages/bootstrap-vue-next/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Changelog
 
 
+## [0.9.26](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrap-vue-next-v0.9.25...bootstrap-vue-next-v0.9.26) (2023-07-16)
+
+
+### Bug Fixes
+
+* **BDropdown:** dropdown not automatically flipping ([9157407](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/915740738ea398759dc0031e6cac40b22e3ab4b1))
+
 ## [0.9.25](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrap-vue-next-v0.9.24...bootstrap-vue-next-v0.9.25) (2023-07-15)
 
 

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.9.25",
+  "version": "0.9.26",
   "license": "MIT",
   "main": "./dist/bootstrap-vue-next.umd.js",
   "module": "./dist/bootstrap-vue-next.mjs",

packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue

@@ -57,6 +57,7 @@
 
 <script setup lang="ts">
 import {
+  autoUpdate,
   flip,
   offset as floatingOffset,
   type Middleware,
@@ -238,6 +239,7 @@ const {x, y, strategy, update} = useFloating(referencePlacement, floating, {
   placement: floatingPlacement,
   middleware: floatingMiddleware,
   strategy: props.strategy,
+  whileElementsMounted: autoUpdate,
 })
 
 const computedClasses = computed(() => ({

packages/bootstrap-vue-next/src/components/BTable/BTable.vue

@@ -70,7 +70,7 @@
           <slot name="table-busy">
             <div class="d-flex align-items-center justify-content-center gap-2">
               <BSpinner class="align-middle" />
-              <strong>Loading...</strong>
+              <strong>{{ busyLoadingText }}</strong>
             </div>
           </slot>
         </td>
@@ -135,6 +135,7 @@ const props = withDefaults(
     selectionVariant?: ColorVariant | null
     stickyHeader?: Booleanish
     busy?: Booleanish
+    busyLoadingText?: string
     showEmpty?: Booleanish
     perPage?: number
     currentPage?: number
@@ -182,6 +183,7 @@ const props = withDefaults(
     selectionVariant: 'primary',
     stickyHeader: false,
     busy: false,
+    busyLoadingText: 'Loading...',
     showEmpty: false,
     currentPage: 1,
     emptyText: 'There are no records to show',
@@ -380,7 +382,7 @@ const getRowClasses = (item: TableItem | null, type: string): string | any[] | n
 }
 
 const getBusyRowClasses = () => {
-  const classesArray = [{'b-table-static-busy': props.items.length === 0}]
+  const classesArray = [{'b-table-static-busy': computedItems.value.length === 0}]
 
   if (props.tbodyTrClass) {
     const extraClasses = props.tbodyTrClass(null, 'table-busy')

packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue

@@ -70,7 +70,7 @@
             <slot
               v-if="$slots['cell(' + field.key + ')'] || $slots['cell()']"
               :name="$slots['cell(' + field.key + ')'] ? 'cell(' + field.key + ')' : 'cell()'"
-              :value="item[field.key]"
+              :value="get(item, field.key)"
               :index="itemIndex"
               :item="item"
               :field="field"
@@ -139,7 +139,7 @@
 <script setup lang="ts">
 import {computed} from 'vue'
 import {useBooleanish} from '../../composables'
-import {isObject, startCase, titleCase} from '../../utils'
+import {get, isObject, startCase, titleCase} from '../../utils'
 import type {
   Booleanish,
   Breakpoint,
@@ -285,7 +285,7 @@ const formatItem = (
   fieldKey: string,
   formatter?: TableFieldObjectFormatter<typeof item>
 ) => {
-  const val = item[fieldKey]
+  const val = get(item, fieldKey)
   if (formatter && typeof formatter === 'function') {
     return formatter(val, fieldKey, item)
   }
@@ -356,4 +356,3 @@ const getRowClasses = (item: TableItem, type = 'row') => {
   return classesArray
 }
 </script>
-../../composables/tableItems

packages/bootstrap-vue-next/src/utils/object.ts

@@ -28,3 +28,29 @@ export const pick = <
     memo[prop] = objToPluck[prop]
     return memo
   }, {} as Record<PropertyKey, unknown>) as Pick<A, B[number]>
+
+/**
+ * Dynamically get a nested value from an array or
+ * object with a string.
+ *
+ * @example get(person, 'friends[0].name')
+ * @link https://github.com/rayepps/radash/blob/master/src/object.ts#L214
+ */
+export const get = <TDefault = unknown>(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any,
+  path: string,
+  defaultValue?: TDefault
+): TDefault => {
+  const segments = path.split(/[.[\]]/g)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let current: any = value
+  for (const key of segments) {
+    if (current === null) return defaultValue as TDefault
+    if (current === undefined) return defaultValue as TDefault
+    if (key.trim() === '') continue
+    current = current[key]
+  }
+  if (current === undefined) return defaultValue as TDefault
+  return current
+}