Merge remote-tracking branch 'upstream/main'

* upstream/main: 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 feat(BOffcanvas): add props backdropBlur and shadow to customize the BOverlay instance fix(BFormTags): limitTagsText props is not used fixes bootstrap-vue-next#1804 fix(BTable): BTable rowDblClicked event not working fixes bootstrap-vue-next#1795 open/close -> show/hide (bootstrap-vue-next#1813) fix(BDropdown): ignore keynav inside form (bootstrap-vue-next#1812)
xvaara · Apr 4, 2024 · 01c7223 · 01c7223
2 parents 611886c + 2fe4e69
commit 01c7223
Show file tree

Hide file tree

Showing 34 changed files with 2,262 additions and 245 deletions.
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/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',

diff --git a/apps/docs/src/data/components/formRadio.data.ts b/apps/docs/src/data/components/formRadio.data.ts
@@ -80,6 +80,12 @@ export default {
           type: 'boolean',
           default: false,
         },
+        {
+          prop: 'reverse',
+          type: 'boolean',
+          default: false,
+          description: 'When set, renders the radio button on the opposite side',
+        },
         {
           prop: 'state',
           type: 'boolean | null',
@@ -92,28 +98,6 @@ export default {
         },
       ],
       emits: [
-        {
-          event: 'input',
-          description: '',
-          args: [
-            {
-              arg: 'input',
-              description: '',
-              type: 'boolean | string | unknown[] | Record<string, unknown> | number',
-            },
-          ],
-        },
-        {
-          event: 'change',
-          description: '',
-          args: [
-            {
-              arg: 'change',
-              description: '',
-              type: 'boolean | string | unknown[] | Record<string, unknown> | 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: [],
     },