Merge remote-tracking branch 'upstream/main' into fix-show-hide-events

* upstream/main: ci: add workflow dispatch to docs deploy chore: release main fix(BFormCheckbox): Prevent empty string being cast to true fixes bootstrap-vue-next#1822 feat(utils): inject getId to allow for custom id generation (bootstrap-vue-next#1836) BTable multisort (bootstrap-vue-next#1842) fix(BFormSelect): array of numbers or dates (bootstrap-vue-next#1839) fix(BPopover and Btooltip): Fixes bootstrap-vue-next#1232 - do not create a new app fro each tooltip or popover (bootstrap-vue-next#1837) fix(BFormFile): add properties placement and browser as in BootstrapVue (bootstrap-vue-next#1797) feat(BCheckbox)!: Implement reverse and without label (bootstrap-vue-next#1825) docs: Add documentation and parity section to contributing.md (bootstrap-vue-next#1834) vscode vue typescript plugin is now depricated and included in volar
xvaara · Apr 16, 2024 · bd02ac5 · bd02ac5
2 parents 65408b4 + daf3a0c
commit bd02ac5
Show file tree

Hide file tree

Showing 159 changed files with 8,317 additions and 5,178 deletions.
diff --git 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
@@ -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
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+  "recommendations": ["Vue.volar"]
 }
diff --git 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 → apps/docs/.vitepress/config.mts b/apps/docs/.vitepress/config.ts → apps/docs/.vitepress/config.mts
diff --git a/apps/docs/.vitepress/theme/Layout.vue b/apps/docs/.vitepress/theme/Layout.vue
@@ -89,7 +89,7 @@
         <BOffcanvas
           id="sidebar-menu"
           v-model="sidebar"
-          teleport-disabled="true"
+          :teleport-disabled="true"
           :backdrop="false"
           title="Browse docs"
           class="h-100 border-0"
@@ -123,7 +123,7 @@
               <BOffcanvas
                 id="otp-menu"
                 v-model="onThisPage"
-                teleport-disabled="true"
+                :teleport-disabled="true"
                 :backdrop="false"
                 placement="end"
                 title="On this page"

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -13,25 +13,25 @@
   },
   "devDependencies": {
     "@iconify-json/bi": "^1.1.23",
-    "@iconify-json/simple-icons": "^1.1.90",
-    "@rushstack/eslint-patch": "^1.7.2",
-    "@tsconfig/node20": "^20.1.2",
-    "@types/node": "^20.11.17",
+    "@iconify-json/simple-icons": "^1.1.99",
+    "@rushstack/eslint-patch": "^1.10.2",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.12.7",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",
-    "@vueuse/core": "^10.7.2",
-    "bootstrap": "^5.3.2",
+    "@vueuse/core": "^10.9.0",
+    "bootstrap": "^5.3.3",
     "bootstrap-vue-next": "workspace:^",
     "cross-env": "^7.0.3",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-define-config": "^2.1.0",
-    "eslint-plugin-vue": "^9.21.1",
+    "eslint-plugin-vue": "^9.25.0",
     "prettier": "^3.2.5",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.5",
     "unplugin-icons": "^0.18.5",
-    "vitepress": "1.0.0-rc.42",
-    "vue": "^3.4.18"
+    "vitepress": "1.1.0",
+    "vue": "^3.4.21"
   },
   "lint-staged": {
     "*.{js,ts,vue}": "eslint --cache --fix",

diff --git a/apps/docs/src/data/components/ComponentReference.ts b/apps/docs/src/data/components/ComponentReference.ts
@@ -17,7 +17,7 @@ export interface ComponentReference {
     description?: string
   }[]
   slots: {
-    scope: SlotScopeReference[]
+    scope?: SlotScopeReference[]
     name: string
     description?: string
   }[]

diff --git a/apps/docs/src/data/components/formCheckbox.data.ts b/apps/docs/src/data/components/formCheckbox.data.ts
@@ -116,6 +116,12 @@ export default {
           description:
             'Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state',
         },
+        {
+          prop: 'reverse',
+          type: 'boolean',
+          default: false,
+          description: 'When set, renders the checkbox or switch on the opposite side',
+        },
         {
           prop: 'switch',
           type: 'boolean',
@@ -161,30 +167,6 @@ export default {
             },
           ],
         },
-        {
-          event: 'input',
-          description: 'Emitted before the checked value is changed',
-          args: [
-            {
-              arg: 'checked',
-              type: 'CheckboxValue | readonly CheckboxValue[]',
-              description:
-                'Value of the checkbox before the event. Value will be an array for grouped checkboxes or a single value for standalone checkboxes.',
-            },
-          ],
-        },
-        {
-          event: 'change',
-          description: 'Emitted when the checked value is changed',
-          args: [
-            {
-              arg: 'checked',
-              type: 'CheckboxValue | readonly CheckboxValue[]',
-              description:
-                'Value of the checkbox.  Value will be an array for grouped checkboxes or a single value for standalone checkboxes.',
-            },
-          ],
-        },
       ],
       slots: [
         {
@@ -289,6 +271,12 @@ export default {
           default: false,
           description: 'Adds the `required` attribute to the form control',
         },
+        {
+          prop: 'reverse',
+          type: 'boolean',
+          default: false,
+          description: 'When set, renders the checkboxes and switches on the opposite side',
+        },
         {
           prop: 'size',
           type: 'Size',
@@ -345,28 +333,6 @@ export default {
             },
           ],
         },
-        {
-          event: 'input',
-          description: 'Emitted before the selected value(s) are changed',
-          args: [
-            {
-              arg: 'input',
-              type: 'CheckboxValue[]',
-              description: 'Value of the checkboxes before the event. Value will be an array.',
-            },
-          ],
-        },
-        {
-          event: 'change',
-          description: 'Emitted when the selected value(s) are changed',
-          args: [
-            {
-              arg: 'change',
-              type: 'CheckboxValue[]',
-              description: 'Value of the checkboxes. Value will be an array.',
-            },
-          ],
-        },
       ],
       slots: [
         {

diff --git a/apps/docs/src/data/components/formFile.data.ts b/apps/docs/src/data/components/formFile.data.ts
@@ -5,107 +5,158 @@ export default {
     {
       component: 'BFormFile',
       props: [
+        {
+          prop: 'ariaLabel',
+          type: 'string',
+          default: undefined,
+          description: 'Sets the value of `aria-label` attribute on the rendered element',
+        },
+        {
+          prop: 'ariaLabelledBy',
+          type: 'string',
+          default: undefined,
+          description:
+            'The ID of the element that provides a label for this component. Used as the value for the `aria-labelledby` attribute',
+        },
         {
           prop: 'accept',
           type: 'string | string[]',
           default: '',
+          description: "Value to set on the file input's `accept` attribute",
         },
         {
           prop: 'autofocus',
           type: 'boolean',
           default: false,
+          description:
+            'When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control',
         },
         {
           prop: 'capture',
           type: "'boolean' | 'user' | 'environment'",
           default: false,
+          description:
+            'When set, will instruction the browser to use the devices camera (if supported)',
         },
         {
           prop: 'directory',
           type: 'boolean',
           default: false,
+          description: 'Enable `directory` mode (on browsers that support it)',
         },
         {
           prop: 'disabled',
           type: 'boolean',
           default: false,
+          description:
+            "When set to `true`, disables the component's functionality and places it in a disabled state",
         },
         {
           prop: 'form',
           type: 'string',
           default: undefined,
+          description:
+            'ID of the form that the form control belongs to. Sets the `form` attribute on the control',
         },
         {
           prop: 'id',
           type: 'string',
           default: undefined,
+          description:
+            'Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed',
         },
         {
           prop: 'multiple',
           type: 'boolean',
           default: false,
+          description:
+            'When set, will allow multiple files to be selected. `v-model` will be an array',
         },
         {
           prop: 'name',
           type: 'string',
           default: undefined,
+          description: 'Sets the value of the `name` attribute on the form control',
         },
         {
           prop: 'noDrop',
           type: 'boolean',
           default: false,
+          description: 'Disable drag and drop mode',
         },
         {
           prop: 'noTraverse',
           type: 'boolean',
           default: false,
+          description: 'Wether to returns files as a flat array when in `directory` mode',
         },
         {
           prop: 'required',
           type: 'boolean',
           default: false,
+          description: 'Adds the `required` attribute to the form control',
         },
         {
           prop: 'size',
           type: 'Size',
           default: undefined,
+          description: "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'",
         },
         {
           prop: 'state',
           type: 'boolean | null',
           default: undefined,
+          description:
+            'Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state',
         },
         {
           prop: 'modelValue',
           type: 'File[] | File | null',
           default: undefined,
+          description:
+            'The current value of the file input. Will be a single `File` object or an array of `File` objects (if `multiple` or `directory` is set). Can be set to `null`, or an empty array to reset the file input',
         },
         {
           prop: 'label',
           type: 'string',
           default: '',
+          description: 'Sets the label for the form group which the file input is rendered',
         },
         {
           prop: 'labelClass',
           type: 'ClassValue',
           default: undefined,
+          description: 'Sets the styling for the label',
+        },
+        {
+          prop: 'placement',
+          type: `'start' | 'end'`,
+          default: `'start'`,
+          description: 'Sets the placement for the file button',
+        },
+        {
+          prop: 'browser',
+          type: 'String',
+          default: 'Browse',
+          description: 'Text content for the file browse button',
         },
       ],
       emits: [
         {
           event: 'update:modelValue',
-          description: '',
+          description: 'Updates the `v-model` value (see docs for more details)',
           args: [
             {
               arg: 'value',
               type: 'File | File[] | null',
-              description: '',
+              description:
+                'Will be a single File object in single mode or an array of File objects in multiple mode',
             },
           ],
         },
         {
           event: 'change',
-          description: '',
+          description: 'Original change event of the input',
           args: [
             {
               arg: 'value',