1. BToastPlugin and 'useToast' not found.

However, you can do it with the following import

// ToastPlugin=BToastPlugin
// but 'useToast' not found.
import BootstrapVue3, {ToastPlugin} from 'bootstrap-vue-3'

or

import BToastPlugin, {useToast} from 'bootstrap-vue-3/src/components/BToast/plugin'

2. toaster hides in fixed-top class

toaster z-index: 11 fixed-top z-index: 1030 see Bootstrap z-index

Describe the PR

First Functioning Spin Button Ported from the BootstrapVue Library.

Tests have also been ported and adjusted to meet library changes.

Finally some docs have been added(not in full)

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.

PR checklist

What kind of change does this PR introduce? (check at least one)

• [ ] Bugfix :bug: - fix(...)
• [x] Feature - feat(...)
• [ ] ARIA accessibility - fix(...)
• [x] Documentation update - docs(...)
• [ ] Other (please describe)

The PR fulfills these requirements:

• [x] Pull request title and all commits follow the Conventional Commits convention or have an override in this pull request body This is very important, as the CHANGELOG is generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be denied

I'm struggling to make my b-table sortable Not sure what i'm doing wrong

I use : "vue": "^3.2.13"

"bootstrap-vue-3": "^0.1.6"

Also, does it support filter and pagination ?

This is my vue for now

<template>
  <div class="overview">
    <b-table
        sort-by="status" sortDesc
        :items="items"
        :fields="formFields.licences"
    >
    </b-table>
  </div>
</template>

<script>

export default {
  name: "licences.vue",
  data(){
    return {
      formFields: {
        licences: [
          {key: "name", sortable: true,  label: "Name"},
          {key: "status", sortable: true, label: "Status"},
        ],
      },
      items: [
        { name: "Jack", status: "Used" },
        {name: "Frank", status: "Unused"},
        {name: "Larry", status: "Used" }
      ]
      }
  }
}
</script>

What you are trying to do I am trying to update to the most recent version (0.4.0)

What you have already tried I could provide the direct git link, but its missing on npmjs.org

Is your feature request related to a problem? Please describe. I would like to create a new project bootstrap-vue-3-icons as suggested in #255, however the icons use types from bootstrap-vue-3.

Describe the solution you would like I would prefer not to duplicate these types and instead import the original ones from the bootstrap-vue-3 library.

Describe alternatives you have considered Duplicating the types.

Additional context The affected types are: Animation, ColorVariant, TextColorVariant - Animation however seems to be only used by the icons. Are there any other recommendations you can think of / a better way to do this?

I don't know if this is related to nuxt, pnpm or bootstrap-vue-3 itself. but I just tried to use <b-container> and... meh.

ERROR  Failed to resolve import "../types/position" from "../../node_modules/.pnpm/[email protected][email protected]/node_modules/bootstrap-vue-3/src/components/BContainer.vue". Does the file exist? (repeated 4 times)

I can see position.d.ts there. any suggestion on how to fix this?

At first, I just want to stress this is not any kind of complaint. :-) I would just like to know if there is any expected (approximate) date when b-table component (with the functionality comparable with that one from the original Bootstrap-Vue) will be released. We really need to use such table component in our project so I need to decide if to wait for this library or try some other way. Thanks to @cdmoro and all other contributers to this great project!

Remade pr to go to dev branch. There still contains some issues.

1. I want to be certain that the package.json's contain their own required dependencies.
2. I moved the original app.vue to it's own apps/playground/app.vue. This would be fine, if it was working.
3. Last thing is fixing the workflows. If someone can double check that each package contains it's own required dependencies, that would be great. Perhaps ensuring that their scripts are correct too. I moved a lot, eslint, prettier, etc to the main workspace deps. Also, if someone could figure out why exactly the app.vue refuses to run, that would be awesome. I really think those are the only three things to do. I can do the workflows when everythings usable.

this PR is an attempt to implement the feature mentioned the in issue https://github.com/cdmoro/bootstrap-vue-3/issues/673

I've tried my best to bring this feature on but not quite sure if did it right. Note that the provider is now a standalone prop not as it used to be in BSVue2 and should be passed through the provider prop instead of the items prop

fully working example:

<template>
  <b-container class="py-5">
    <!-- User Interface controls -->
    <b-row>
      <b-col lg="6" class="my-1">
        <b-form-group
          v-slot="{ariaDescribedby}"
          label="Sort"
          label-for="sort-by-select"
          label-cols-sm="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
        >
          <b-input-group size="sm">
            <b-form-select
              id="sort-by-select"
              v-model="sortBy"
              :options="sortOptions"
              :aria-describedby="ariaDescribedby"
              class="w-75"
            >
              <template #first>
                <option value="">-- none --</option>
              </template>
            </b-form-select>

            <b-form-select
              v-model="sortDesc"
              :disabled="!sortBy"
              :aria-describedby="ariaDescribedby"
              size="sm"
              class="w-25"
            >
              <option :value="false">Asc</option>
              <option :value="true">Desc</option>
            </b-form-select>
          </b-input-group>
        </b-form-group>
      </b-col>

      <b-col lg="6" class="my-1">
        <b-form-group
          label="Filter"
          label-for="filter-input"
          label-cols-sm="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
        >
          <b-input-group size="sm">
            <b-form-input
              id="filter-input"
              v-model="filter"
              type="search"
              placeholder="Type to Search"
            />

            <b-input-group-append>
              <b-button :disabled="!filter" @click="filter = ''">Clear</b-button>
            </b-input-group-append>
          </b-input-group>
        </b-form-group>
      </b-col>

      <b-col lg="6" class="my-1">
        <b-form-group
          v-slot="{ariaDescribedby}"
          v-model="sortDirection"
          label="Filter On"
          description="Leave all unchecked to filter on all data"
          label-cols-sm="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
        >
          <div class="d-flex gap-2">
            <b-form-checkbox v-model="filterOn" value="name">Name</b-form-checkbox>
            <b-form-checkbox v-model="filterOn" value="age">Age</b-form-checkbox>
            <b-form-checkbox v-model="filterOn" value="isActive">Active</b-form-checkbox>
          </div>
        </b-form-group>
      </b-col>

      <b-col sm="5" md="6" class="my-1">
        <b-form-group
          label="Per page"
          label-for="per-page-select"
          label-cols-sm="6"
          label-cols-md="4"
          label-cols-lg="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
        >
          <b-form-select id="per-page-select" v-model="perPage" :options="pageOptions" size="sm" />
        </b-form-group>
      </b-col>

      <b-col sm="7" md="6" class="my-1">
        <b-pagination
          v-model="currentPage"
          :total-rows="totalRows"
          :per-page="perPage"
          align="fill"
          size="sm"
          class="my-0"
        />
      </b-col>
    </b-row>

    <!-- Main table element -->
    <b-table
      v-model:sort-by="sortBy"
      v-model:sort-desc="sortDesc"
      v-model:busy="busy"
      :items="items"
      :fields="fields"
      :current-page="currentPage"
      :per-page="perPage"
      :filter="filter"
      responsive
      :filterable="filterOn"
      small
      :sort-internal="true"
      :provider="myProvider"
      :no-providing="['paging']"
      @filtered="onFiltered"
    >
      <template #cell(name)="row"> {{ row.value.first }} {{ row.value.last }} </template>

      <template #cell(actions)="row">
        <b-button size="sm" class="mr-1" @click="info(row.item, row.index, $event.target)">
          Info modal
        </b-button>
        <b-button size="sm" @click="row.toggleDetails">
          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
        </b-button>
      </template>

      <template #row-details="row">
        <b-card>
          <ul>
            <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
            <b-button size="sm" @click="row.toggleDetails"> Toggle Details </b-button>
          </ul>
        </b-card>
      </template>
    </b-table>

    <!-- Info modal -->
    <b-modal
      :id="infoModal.id"
      v-model="infoModal.open"
      :title="infoModal.title"
      ok-only
      @hide="resetInfoModal"
    >
      <pre>{{ infoModal.content }}</pre>
    </b-modal>
  </b-container>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ColorVariant, TableItem } from './types'
import { BTableProviderContext } from './types/components'

export default defineComponent({
  data() {
    return {
      items: [
        {isActive: true, age: 40, name: {first: 'Dickerson', last: 'Macdonald'}},
        {isActive: false, age: 21, name: {first: 'Larsen', last: 'Shaw'}},
        {
          isActive: false,
          age: 9,
          name: {first: 'Mini', last: 'Navarro'},
          _rowVariant: 'success' as ColorVariant,
        },
        {isActive: false, age: 89, name: {first: 'Geneva', last: 'Wilson'}},
        {isActive: true, age: 38, name: {first: 'Jami', last: 'Carney'}},
        {isActive: false, age: 27, name: {first: 'Essie', last: 'Dunlap'}},
        {isActive: true, age: 40, name: {first: 'Thor', last: 'Macdonald'}},
        {
          isActive: true,
          age: 87,
          name: {first: 'Larsen', last: 'Shaw'},
          _cellVariants: {age: 'danger', isActive: 'warning'} as Record<any, any>,
        },
        {isActive: false, age: 26, name: {first: 'Mitzi', last: 'Navarro'}},
        {isActive: false, age: 22, name: {first: 'Genevieve', last: 'Wilson'}},
        {isActive: true, age: 38, name: {first: 'John', last: 'Carney'}},
        {isActive: false, age: 29, name: {first: 'Dick', last: 'Dunlap'}},
      ],
      fields: [
        {key: 'name', label: 'Person full name', sortable: true, sortDirection: 'desc'},
        {key: 'age', label: 'Person age', sortable: true, class: 'text-center'},
        {
          key: 'isActive',
          label: 'Is Active',
          formatter: (value: any, key: any, item: any) => (value ? 'Yes' : 'No'),
          sortable: true,
          sortByFormatted: true,
          filterByFormatted: true,
        },
        {key: 'actions', label: 'Actions'},
      ],
      totalRows: 1,
      currentPage: 1,
      busy: false,
      perPage: 5,
      pageOptions: [5, 10, 15, {value: 100, text: 'Show a lot'}],
      sortBy: '',
      sortDesc: false,
      sortDirection: 'asc',
      filter: '',
      filterOn: [],
      infoModal: {
        open: false,
        id: 'info-modal',
        title: '',
        content: '',
      },
    }
  },
  computed: {
    sortOptions() {
      // Create an options list from our fields
      return this.fields.filter((f) => f.sortable).map((f) => ({text: f.label, value: f.key}))
    },
  },
  mounted() {
    // Set the initial number of items
    this.totalRows = this.items.length
  },
  methods: {
    myProvider(
      ctx: BTableProviderContext,
      callback: (items: Array<TableItem>) => Promise<TableItem[] | undefined>
    ) {
      //ctx: {
      //   filter?: string
      //   currentPage?: number
      //   perPage?: number
      //   sortBy?: string
      //   sortDesc?: Booleanish
      // }
      const items: Array<TableItem> = [
        {isActive: false, age: 89, name: {first: 'Geneva', last: 'Wilson'}},
        {isActive: true, age: 38, name: {first: 'Jami', last: 'Carney'}},
        {isActive: false, age: 27, name: {first: 'Essie', last: 'Dunlap'}},
        {isActive: true, age: 40, name: {first: 'Thor', last: 'Macdonald'}},
      ]

      // console.log('Items set through a return', items);
      // // You can return an arroy of items
      // return items;

      // also you can return undefined and set the items through the callback function
      // callback(items)
      //   .then((items) => {
      //     console.log('Items set through callback function', items);
      //   })
      //   .finally(() => this.busy = false);
      // return undefined;

      // and finally you can return a promise that resolves an array of array OR undefined with setting the items through the callback function
      return new Promise<Array<TableItem> | undefined>((resolve, reject) => {
        setTimeout(() => {
          resolve(items)
        }, 3000)
      })
    },
    info(item: any, index: any, button: any) {
      this.infoModal.title = `Row index: ${index}`
      this.infoModal.content = JSON.stringify(item, null, 2)
      this.infoModal.open = true
    },
    resetInfoModal() {
      this.infoModal.title = ''
      this.infoModal.content = ''
    },
    onFiltered(filteredItems: any) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length
      this.currentPage = 1
    },
  },
})
</script>

Is your feature request related to a problem? Please describe. Example: https://cdmoro.github.io/bootstrap-vue-3/components/FormCheckbox.html#changing-the-option-field-names

If user clicks A, D, B, then Selected is [ "A", { "d": 1 }, "B" ]

Describe the solution you would like No matter what order user clicks, Selected should preserve original options order, eg [ "A", "B", { "d": 1 } ]

Describe alternatives you have considered I'm not sure if this should be handled by bootstrap-vue-3. It seems it's the default browser behavior. What do you think?

We can import individual components, as per https://github.com/cdmoro/bootstrap-vue-3/issues/188. But if you do this, it still seems to pull in all the code, which defeats the purpose.

I have this plugin in a Nuxt3 proof of concept app:

import BButton from 'bootstrap-vue-3'
import BNotice from 'bootstrap-vue-3'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(BButton)
  nuxtApp.vueApp.use(BNotice)
})

If I then build this and check what code is flowing over the wire, I can see BTable, BToast, and all the other stuff that I'm not using, and Lighthouse warns me about unused code.

I'm not knowledgeable enough in this area to identify why this might be happening, but I wonder if it is related to the TODO In BootstrapViewOptions.

Describe the PR

Remove Bootstrap Dependencies from Offcanvas

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.

PR checklist

What kind of change does this PR introduce? (check at least one)

• [] Bugfix :bug: - fix(...)
• [X] Feature - feat(...)
• [ ] ARIA accessibility - fix(...)
• [ ] Documentation update - docs(...)
• [ ] Other (please describe)

The PR fulfills these requirements:

• [X] Pull request title and all commits follow the Conventional Commits convention or has an override in this pull request body This is very important, as the CHANGELOG is generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be denied

Describe the bug

When using b-form-checkbox in button mode, i'd assume they get the same sizing as a regular button. Rendering these next to each other shows that this is only the case for "non-sized" buttons - but on sm and lg styles, the checkbox is offset.

The problematic part seems to be the padding set in form-control-<size>.

I could neither find the definition of this in the code - nor am i certain what other (negative?) side-effects changing this might have to other components.

To Reproduce Reproduction stackblitz: https://stackblitz.com/edit/vue3-script-setup-with-vite-lxjcyo?file=package.json,src%2Fmain.js,src%2FApp.vue,src%2Fcomponents%2FHelloWorld.vue

Expected behavior

Both buttons have the same height, and no additional padding which can't be overridden without using negative margins on the checkbox.

Screenshots Left is always the button, right the checkbox. Only the "medium" buttons are shown as they should be.

Environment (please complete the following information):

• Version 0.4.15 / (also on main as of today)

Describe the bug When a b-table page changes, the table doesn't render anything, even if the provider is returning correct data

To Reproduce Steps to reproduce the behavior:

1. Create a b-table with a provider, and pagination.
2. The first page will load normally, but every other page wont load Expected behavior A clear and concise description of what you expected to happen.

Screenshots First page, works normally

Second page, nothing shows

<template>
    <b-table :fields="['id']" :provider="myProvider" :current-page="currentPage" :per-page="perPage"></b-table>
    <b-pagination :current-page="currentPage" :total-rows="totalRows" v-model="currentPage"></b-pagination>
</template>

<script>
export default {
    data() {
        return {
            currentPage: 1,
            perPage: 10,
            totalRows: 100,
        };
    },
    methods: {
        myProvider(context) {
            let values = [];

            for (let i = 0; i < context.perPage; i++) {
                values.push({ id: i });
            }

            return values;
        },
    },
};
</script>

Example code, generating items as the page changes

Environment (please complete the following information):

• OS: Ubuntu-22.04 (WSL2)
• Version 0.4.15

Vue version

3.2.45

Link to minimal reproduction

https://github.com/DivakarSS/WebComponents

Steps to reproduce

The issue is that bootstrap components are not getting converted into HTML.

Please click on the attached repo link and run demo.html file that is present in dist folder. It is generated using the following cmd:

vue-cli-service build --mode production --modern --target lib --inline-vue --name vue-select ./src/main.ts

What is expected?

Bootstrap component is supposed to be converted into HTML.

What is actually happening?

Bootstrap components remains the same in dist files. Compilation is not happening.

System Info

No response

Any additional comments?

Please let us know if we are missing anything.

Describe the bug When using the b-form-radio-group, the buttons fail to render using the button group formatting.

To Reproduce Steps to reproduce the behavior:

1. In your vue setup define per the button style radios example in the documentation

let buttonsSelected = ref( 'radio1');
let buttonsOptions = ref([
          { text: 'Radio 1', value: 'radio1' },
          { text: 'Radio 3', value: 'radio2' },
          { text: 'Radio 3 (disabled)', value: 'radio3', disabled: true },
          { text: 'Radio 4', value: 'radio4' }
        ]);

2. In the template, define your button groups.

    <b-form-radio-group
      v-model="buttonsSelected"
      :options="buttonsOptions"
      name="radios-btn-default"
      buttons
    ></b-form-radio-group>

3. View the resulting page. Note that the incorrect results can be seen in the documentation as well.

Expected behavior The user expects the buttons to render as a single block as seen in the bootstrap documentation or in the bootstrap-vue documentation

Screenshots Actual: Expected:

Environment (please complete the following information):

• OS: Monterey
• Version 12.6.2
• Chrome
• Version 108.0.5359.98 (Official Build) (arm64)

Additional context N/A

Discussed in https://github.com/cdmoro/bootstrap-vue-3/discussions/840