diff --git a/.github/workflows/docs-deploy.yaml b/.github/workflows/docs-deploy.yaml index a62240f29..9004cb0a6 100644 --- a/.github/workflows/docs-deploy.yaml +++ b/.github/workflows/docs-deploy.yaml @@ -5,6 +5,7 @@ name: docs-github-pages-deploy on: release: types: [created] + workflow_dispatch: jobs: build-and-deploy: diff --git a/.release-please-manifest.json b/.release-please-manifest.json index 8fd0e1506..93e83976d 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,4 +1,4 @@ { - "packages/bootstrap-vue-next": "0.16.6", - "packages/nuxt": "0.16.6" + "packages/bootstrap-vue-next": "0.17.0", + "packages/nuxt": "0.17.0" } diff --git a/.vscode/extensions.json b/.vscode/extensions.json index c0a6e5a48..a7cea0b06 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,3 +1,3 @@ { - "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] + "recommendations": ["Vue.volar"] } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e0562940e..f08445e00 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -51,11 +51,36 @@ This will begin the process to merge your changes into the upstream repository's ## Developing -The project uses a monorepo architecture. The main source files for the package exist in `./packages/bootstrap-vue-next`, this is primarily where developing is done. You can then run `pnpm dev` and it will start all possible development environments. When developing the main package, you will want to open the **bootstrap-vue-next:dev** host. This has hot-reloading to make developing easier. You can use the `./packages/bootstrap-vue-next/src/app.vue` file as a test area for any changes that you make +The project uses a monorepo architecture. The main source files for the package exist in `./packages/bootstrap-vue-next`, this is primarily where developing is done. You can then run `pnpm dev` and it will start all possible development environments. When developing the main package, you will want to open the **bootstrap-vue-next:dev** host. This has hot-reloading to make developing easier. You can use the `./packages/bootstrap-vue-next/src/app.vue` file as a test area for any changes that you make. -You can also make use of the `./apps/playground` directory. The `./apps/playground` directory mimics a user's library and can demonstrate some bugs that may not be visible in the main package. However, it does not contain native hot-reloading and makes for a poor development experience since it requires a built dist copy of the main package (simply run `pnpm build`). The playground is not typically used for development. It is more of a place to view the full behavior of a component +You can also make use of the `./apps/playground` directory. The `./apps/playground` directory mimics a user's library and can demonstrate some bugs that may not be visible in the main package. However, it does not contain native hot-reloading and makes for a poor development experience since it requires a built dist copy of the main package (simply run `pnpm build`). The playground is not typically used for development. It is more of a place to view the full behavior of a component. -You can also use `pnpm dev --filter bootstrap-vue-next` to only open the main host +You can also use `pnpm dev --filter bootstrap-vue-next` to only open the main host. + +## Improving the documentation + +Improving the documentation is a great way to contribute to this project, especially if you're not quite ready to dive into the code. + +We use [vitepress](https://vitepress.dev/) to build our documentation in the `./apps/docs` directory. In order to test the docs, first make sure that you follow the steps in [Setting up your workspace](#setting-up-your-workspace). Then you can run `pnpm dev` from the root and then open the **docs:dev** host. This will hot-reload the documentation to let you easily see your edits. The `*.md` files under `./apps/docs/src/docs` contains the core documentation and the `*.data.ts` files under `./apps/docs/src/data/components` contains JSON files that contains the data to build the component definitions in the documentation. + +## Help Verify BootstrapVue and Bootstrap v5 Parity + +As we close in on a v1 of bootstrap-vue-next, we would like to verify our feature parity with both +[boostrap-vue](https://bootstrap-vue.org/) and [Boottrap v5](https://getbootstrap.com/). + +This verification requires that someone take a close look at the documention for both of the parity +systems and the code and documentation for bootstrap-vue-next to evaluate feature parity. We're using a +spreadsheet to track the fine grained assement, and anyone who consumes bootstrap-vue(-next) should +be able to do the first pass evaluation of a component. + +To contribute: + +- Take a look at the read-only version of the spreadsheet, available [here](https://1drv.ms/x/s!AiUqzkjNYGL6ieBPpQpcR41wo1laZQ). You can filter on `BFormCheckbox` and `BFormCheckboxGroup` in the `Component` column to see an example of components that are being evaludated and just about anything else to see the initial state. +- Read through the `Instructions` tab of the spreadsheet, which provides a suggested process to verify a component. +- Once you're satisfied that you understand the process, request access top the [read/write version of the spreadsheet](https://1drv.ms/x/s!AiUqzkjNYGL6ieBPJZV0b2mgOVgnYw) on the [Bootstrap Vue 3 discord server](https://discord.gg/8VjEkneh). +- Evaluate a component (or two) and get us one step closer to v1! + +More context is available in the comments for [this issue](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1775). ## Registering New Components diff --git a/apps/docs/.vitepress/config.ts b/apps/docs/.vitepress/config.mts similarity index 100% rename from apps/docs/.vitepress/config.ts rename to apps/docs/.vitepress/config.mts diff --git a/apps/docs/.vitepress/theme/Layout.vue b/apps/docs/.vitepress/theme/Layout.vue index e34fb4e00..7cdc29206 100644 --- a/apps/docs/.vitepress/theme/Layout.vue +++ b/apps/docs/.vitepress/theme/Layout.vue @@ -89,7 +89,7 @@ | number', - }, - ], - }, - { - event: 'change', - description: '', - args: [ - { - arg: 'change', - description: '', - type: 'boolean | string | unknown[] | Record | number', - }, - ], - }, { event: 'update:modelValue', description: '', @@ -239,17 +223,6 @@ export default { }, ], emits: [ - { - args: [ - { - arg: 'input', - description: '', - type: 'unknown', - }, - ], - description: '', - event: 'input', - }, { args: [ { @@ -261,17 +234,6 @@ export default { description: '', event: 'update:modelValue', }, - { - args: [ - { - arg: 'change', - description: '', - type: 'unknown', - }, - ], - description: '', - event: 'change', - }, ], slots: [], }, diff --git a/apps/docs/src/data/components/popover.data.ts b/apps/docs/src/data/components/popover.data.ts index c5ed445d4..78db4e556 100644 --- a/apps/docs/src/data/components/popover.data.ts +++ b/apps/docs/src/data/components/popover.data.ts @@ -11,7 +11,7 @@ export default { default: false, }, { - prop: 'container', + prop: 'teleportTo', type: 'string | ComponentPublicInstance | HTMLElement | undefined', default: undefined, }, diff --git a/apps/docs/src/data/components/table.data.ts b/apps/docs/src/data/components/table.data.ts index faf4bb411..0b74cac4c 100644 --- a/apps/docs/src/data/components/table.data.ts +++ b/apps/docs/src/data/components/table.data.ts @@ -43,8 +43,9 @@ export default { }, { prop: 'sortBy', - type: 'string', + type: 'BTableSortBy[]', default: undefined, + description: 'Model representing the current sort state', }, { prop: 'sortDesc', @@ -259,40 +260,26 @@ export default { { args: [ { - arg: 'update:sortBy', - description: '', + arg: 'value', + description: 'BTableSortBy[] | undefined', type: 'string', }, ], event: 'update:sortBy', - description: '', - }, - { - args: [ - { - arg: 'update:sortDesc', - description: 'boolean', - type: 'boolean', - }, - ], - event: 'update:sortDesc', - description: '', + description: + 'Emitted when the `sortBy` model is changed and represents the current sort state', }, { args: [ { - arg: 'sortBy', + arg: 'value', description: '', - type: 'string', - }, - { - arg: 'isDesc', - description: '', - type: 'boolean', + type: 'BTableSortBy', }, ], event: 'sorted', - description: '', + description: + 'Updated when the user clicks a sortable column heading and represents the column click and the sort state (`asc`, `desc`, or undefined)', }, ], slots: [ @@ -485,8 +472,10 @@ export default { }, { prop: 'stickyHeader', - type: 'boolean', + type: 'boolean | Numberish', default: false, + description: + 'Makes the table header sticky. Set to true for a maximum height 300px tall table, or set to any valid CSS height (including units). Inputting a number type is converted to px height', }, ], emits: [], diff --git a/apps/docs/src/docs/components/form-checkbox.md b/apps/docs/src/docs/components/form-checkbox.md index ab55a00a9..45e435666 100644 --- a/apps/docs/src/docs/components/form-checkbox.md +++ b/apps/docs/src/docs/components/form-checkbox.md @@ -412,6 +412,25 @@ Use the `size` prop to control the size of the checkbox. The default size is med +## Reverse + +Use the `reverse` prop to put your checkboxes and switches on the opposite side of the label. + + + Reverse checkbox + Disabled reverse checkbox + Reverse switch ceckbox input + + + ## Checkbox values and `v-model` By default, `BFormCheckbox` value will be true when checked and false when unchecked. You can customize the checked and unchecked values by specifying the `value` and `unchecked-value` properties, respectively. @@ -934,7 +953,7 @@ const indeterminate = ref(true) v-model:indeterminate="asIndeterminate" aria-describedby="flavors" aria-controls="flavors" - @change="toggleAll" + @update:modelValue="toggleAll" > {{ allSelected ? 'Un-select All' : 'Select All' }} @@ -972,7 +991,7 @@ const indeterminate = ref(true) v-model:indeterminate="asIndeterminate" aria-describedby="flavors" aria-controls="flavors" - @change="toggleAll" + @update:modelValue="toggleAll" > {{ allSelected ? 'Un-select All' : 'Select All' }} diff --git a/apps/docs/src/docs/components/form-tags.md b/apps/docs/src/docs/components/form-tags.md index 03e5bd0f7..96730e6c2 100644 --- a/apps/docs/src/docs/components/form-tags.md +++ b/apps/docs/src/docs/components/form-tags.md @@ -1231,7 +1231,7 @@ You can easily create a custom wrapper component with your preferred rendering s ```vue + + diff --git a/apps/playground/src/components/Comps/TImg.vue b/apps/playground/src/components/Comps/TImg.vue index 6fc3aff1f..ba6715fc0 100644 --- a/apps/playground/src/components/Comps/TImg.vue +++ b/apps/playground/src/components/Comps/TImg.vue @@ -50,14 +50,12 @@ @@ -65,14 +63,12 @@ diff --git a/apps/playground/src/components/Comps/TPopover.vue b/apps/playground/src/components/Comps/TPopover.vue index bf40072eb..6d878f7e7 100644 --- a/apps/playground/src/components/Comps/TPopover.vue +++ b/apps/playground/src/components/Comps/TPopover.vue @@ -150,14 +150,7 @@ - + @@ -206,7 +199,7 @@ - + -