From 8f03f792dc3a592707862039dba1e44313634601 Mon Sep 17 00:00:00 2001 From: "David W. Gray" Date: Mon, 30 Sep 2024 17:18:00 -0700 Subject: [PATCH 1/6] docs(BDropdown): Refactor and parity pass --- apps/docs/src/docs/components/button.md | 8 +- apps/docs/src/docs/components/carousel.md | 2 - .../components/demo/DropdownAccessibility.vue | 16 + .../components/demo/DropdownAutoClose.vue | 26 + .../components/demo/DropdownBlockMenu.vue | 9 + .../components/demo/DropdownBlockToggle.vue | 22 + .../components/demo/DropdownButtonContent.vue | 17 + .../components/demo/DropdownColorVariants.vue | 21 + .../docs/components/demo/DropdownDivider.vue | 10 + .../docs/components/demo/DropdownDropup.vue | 9 + .../docs/components/demo/DropdownFloating.vue | 9 + .../docs/components/demo/DropdownGroup.vue | 18 + .../docs/components/demo/DropdownHeader.vue | 11 + .../components/demo/DropdownHiddenCaret.vue | 10 + .../src/docs/components/demo/DropdownItem.vue | 11 + .../components/demo/DropdownItemButton.vue | 10 + .../src/docs/components/demo/DropdownLazy.vue | 12 + .../components/demo/DropdownMenuAlignment.vue | 21 + .../components/demo/DropdownMenuOffset.vue | 20 + .../docs/components/demo/DropdownModel.vue | 23 + .../docs/components/demo/DropdownNoFlip.vue | 9 + .../docs/components/demo/DropdownOverview.vue | 12 + .../docs/components/demo/DropdownSizing.vue | 28 + .../components/demo/DropdownSplitButton.vue | 9 + .../demo/DropdownSplitButtonLink.vue | 9 + .../demo/DropdownSplitButtonVariant.vue | 15 + .../docs/components/demo/DropdownStartEnd.vue | 16 + .../src/docs/components/demo/DropdownText.vue | 13 + apps/docs/src/docs/components/dropdown.md | 1081 +---------------- 29 files changed, 455 insertions(+), 1022 deletions(-) create mode 100644 apps/docs/src/docs/components/demo/DropdownAccessibility.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownAutoClose.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownBlockMenu.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownBlockToggle.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownButtonContent.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownColorVariants.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownDivider.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownDropup.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownFloating.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownGroup.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownHeader.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownHiddenCaret.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownItem.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownItemButton.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownLazy.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownMenuAlignment.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownMenuOffset.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownModel.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownNoFlip.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownOverview.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownSizing.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownSplitButton.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownSplitButtonLink.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownSplitButtonVariant.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownStartEnd.vue create mode 100644 apps/docs/src/docs/components/demo/DropdownText.vue diff --git a/apps/docs/src/docs/components/button.md b/apps/docs/src/docs/components/button.md index 5c716eeb6..79fd6620e 100644 --- a/apps/docs/src/docs/components/button.md +++ b/apps/docs/src/docs/components/button.md @@ -193,15 +193,15 @@ documentation for details
- Block Level Button - Another Block Level Button + Block Level Button + Another Block Level Button
diff --git a/apps/docs/src/docs/components/dropdown.md b/apps/docs/src/docs/components/dropdown.md index d6ef010a8..04acc659a 100644 --- a/apps/docs/src/docs/components/dropdown.md +++ b/apps/docs/src/docs/components/dropdown.md @@ -63,15 +63,19 @@ Like to move your menu away from the toggle buttons a bit? Then use the `offset` ### Floating Strategy By default, the floating element will render using _absolute_. You can change this using the `strategy` prop. The only other option is `fixed`. +See the [floating-ui documentation](https://floating-ui.com/docs/hide#strategy) for details. <<< DEMO ./demo/DropdownFloating.vue#template{vue-html} ### Boundary constraint -By default, dropdowns are visually constrained to their clipping ancestors, which will suffice in most situations. However, if you place a dropdown inside an element that has `overflow: scroll` (or similar) set, the dropdown menu may - in some situations - get cut off. To get around this, you can specify a boundary element via the `boundary` prop. Supported values are `clippingAncestors` (the default), `viewport`, `document`, or a reference to an HTML element. +By default, dropdowns are visually constrained to their clipping ancestors, which will suffice in most situations. However, if you place a dropdown inside an element that has `overflow: scroll` (or similar) set, the dropdown menu may - in some situations - get cut off. To get around this, you can specify a boundary element via the `boundary` prop. Supported values any values from [floating-ui](https://floating-ui.com/) +[Boundary](https://floating-ui.com/docs/detectoverflow#boundary) or [RootBoundary](https://floating-ui.com/docs/detectoverflow#rootboundary) types. The default value is `clippingAncestors`. **Note:** When `boundary` is any value other than the default of `clippingAncestors`, the style `position: static` is applied to the dropdown component's root element to allow the menu to "break out" of its scroll container. In some situations, this may affect your layout or positioning of the dropdown trigger button. In these cases, you may need to wrap your dropdown inside another element +**Note:** BootstrapVueNext uses [floating-ui](https://floating-ui.com/) under the hood, so please read [their options documnetation](https://floating-ui.com/docs/detectoverflow#options) for details on `boundary` and `boundary-padding`. + ### Container element By default, dropdowns are next to the toggle button. However, you can specify a container element via the `container` prop where dropdowns will be teleported to instead. Supported values are CSS selector string, an actual DOM node or a reference to an HTML element. diff --git a/apps/docs/src/types/index.ts b/apps/docs/src/types/index.ts index b50a79157..7e50b92c5 100644 --- a/apps/docs/src/types/index.ts +++ b/apps/docs/src/types/index.ts @@ -40,7 +40,7 @@ export interface ComponentReference { props: PropsRecord emits: { event: string - args: EmitArgReference[] + args?: EmitArgReference[] description?: string }[] slots: { From 65e7e2190275846d6c508a8483be3fd99073b12c Mon Sep 17 00:00:00 2001 From: "David W. Gray" Date: Thu, 3 Oct 2024 12:49:01 -0700 Subject: [PATCH 3/6] docs: make some of the ComponentProps values optional --- apps/docs/src/components/ComponentReference.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/src/components/ComponentReference.vue b/apps/docs/src/components/ComponentReference.vue index a60834607..98853b768 100644 --- a/apps/docs/src/components/ComponentReference.vue +++ b/apps/docs/src/components/ComponentReference.vue @@ -256,8 +256,8 @@ const sortData = computed(() => .map(([key, value]) => ({prop: kebabCase(key), ...value})) .sort((a, b) => a.prop.localeCompare(b.prop)), })), - emits: el.emits.sort((a, b) => a.event.localeCompare(b.event)), - slots: el.slots.sort((a, b) => a.name.localeCompare(b.name)), + emits: el.emits?.sort((a, b) => a.event.localeCompare(b.event)), + slots: el.slots?.sort((a, b) => a.name.localeCompare(b.name)), } data.sections = (['Properties', 'Events', 'Slots'] as ComponentSection[]).filter( From df4c37e11357b91665d7bba43be6add66e2d1973 Mon Sep 17 00:00:00 2001 From: "David W. Gray" Date: Thu, 3 Oct 2024 12:49:38 -0700 Subject: [PATCH 4/6] docs(BDropdown): Fill out component reference for helpers --- .../src/data/components/accordion.data.ts | 7 +- .../docs/src/data/components/dropdown.data.ts | 255 +++++------------- .../src/data/components/formCheckbox.data.ts | 16 +- .../src/docs/components/demo/DropdownForm.vue | 29 ++ apps/docs/src/docs/components/dropdown.md | 14 +- apps/docs/src/docs/migration-guide.md | 22 ++ apps/docs/src/types/index.ts | 4 +- apps/docs/src/utils/common-props.ts | 48 +++- apps/docs/src/utils/link-props.ts | 9 +- 9 files changed, 191 insertions(+), 213 deletions(-) create mode 100644 apps/docs/src/docs/components/demo/DropdownForm.vue diff --git a/apps/docs/src/data/components/accordion.data.ts b/apps/docs/src/data/components/accordion.data.ts index 4cd44c38a..0a4b6aefa 100644 --- a/apps/docs/src/data/components/accordion.data.ts +++ b/apps/docs/src/data/components/accordion.data.ts @@ -136,11 +136,6 @@ export default { default: false, description: 'When true, the AccordionItem will be visible', }, - wrapperAttrs: { - type: 'Readonly', - default: undefined, - description: 'Attributes to be applied to the wrapper element', - }, ...pick( buildCommonProps({ id: { @@ -148,7 +143,7 @@ export default { 'The Id to be injected to accordion items and used to in BCollapse for state managment', }, }), - ['id', 'tag'] + ['id', 'tag', 'wrapperAttrs'] ), } satisfies Record, }, diff --git a/apps/docs/src/data/components/dropdown.data.ts b/apps/docs/src/data/components/dropdown.data.ts index bf7f5c747..d0df1cd7a 100644 --- a/apps/docs/src/data/components/dropdown.data.ts +++ b/apps/docs/src/data/components/dropdown.data.ts @@ -1,6 +1,7 @@ import type {BvnComponentProps} from 'bootstrap-vue-next' import type {ComponentReference, PropertyReference} from '../../types' -import {buildCommonProps, pick} from '../../utils' +import {buildCommonProps, omit, pick} from '../../utils' +import {linkProps, linkTo} from '../../utils/link-props' export default { load: (): ComponentReference[] => [ @@ -295,28 +296,36 @@ export default { { component: 'BDropdownDivider', sourcePath: '/BDropdown/BDropdownDivider.vue', - emits: [], - slots: [], props: { '': { - tag: { - description: '', - type: 'string', - default: 'hr', - }, + ...pick( + buildCommonProps({ + tag: { + default: 'hr', + }, + }), + ['tag'] + ), } satisfies Record, }, }, { component: 'BDropdownForm', sourcePath: '/BDropdown/BDropdownForm.vue', - emits: [], - props: {} satisfies Record, + props: { + '': { + formClass: {notYetImplemented: true}, + inline: {notYetImplemented: true}, + novalidate: {notYetImplemented: true}, + validated: {notYetImplemented: true}, + }, + }, + // Add the typing back in when props are implemented + // satisfies Record, slots: [ { - scope: [], - description: '', name: 'default', + description: 'Content to place in the dropdown form', }, ], }, @@ -326,42 +335,28 @@ export default { emits: [], props: { '': { - ariaDescribedby: { - type: 'string', - default: undefined, - }, header: { type: 'string', default: undefined, }, - headerClass: { - type: 'ClassValue', - default: undefined, - }, - headerTag: { - type: 'string', - default: 'header', - }, - headerVariant: { - type: 'ColorVariant | null', - default: null, - }, - id: { - type: 'string', - default: undefined, - }, + ...pick( + buildCommonProps({ + headerTag: { + default: 'header', + }, + }), + ['ariaDescribedby', 'headerClass', 'headerTag', 'headerVariant', 'id'] + ), } satisfies Record, }, slots: [ { - description: '', - scope: [], name: 'default', + description: 'Content (items) to place in the dropdown group', }, { - scope: [], - description: '', name: 'header', + description: 'Optional header content for the dropdown group', }, ], }, @@ -372,185 +367,84 @@ export default { props: {} satisfies Record, slots: [ { - scope: [], - description: '', name: 'default', + description: 'Content to place in the dropdown header', }, ], }, { component: 'BDropdownItem', sourcePath: '/BDropdown/BDropdownItem.vue', + props: { + '': { + ...pick(buildCommonProps({}), ['linkClass', 'wrapperAttrs']), + } satisfies Record< + Exclude, + PropertyReference + >, + 'BLink props': { + _linkTo: { + type: linkTo, + }, + ...omit(linkProps, ['routerTag']), + }, + }, emits: [ { event: 'click', + description: 'Emitted when item is clicked', args: [ { - arg: 'click', - description: '', + arg: 'value', type: 'MouseEvent', + description: 'Native click event object', }, ], - description: '', }, ], - props: { - '': { - active: { - type: 'boolean', - default: undefined, - }, - activeClass: { - type: 'string', - default: undefined, - }, - disabled: { - type: 'boolean', - default: undefined, - }, - exactActiveClass: { - type: 'string', - default: undefined, - }, - href: { - type: 'string', - default: undefined, - }, - icon: { - type: 'boolean', - default: undefined, - }, - linkClass: { - type: 'ClassValue', - default: undefined, - }, - noPrefetch: { - type: 'boolean', - }, - noRel: { - type: 'boolean', - }, - opacity: { - type: '10 | 25 | 50 | 75 | 100 | "10" | "25" | "50" | "75" | "100"', - default: undefined, - }, - opacityHover: { - type: '10 | 25 | 50 | 75 | 100 | "10" | "25" | "50" | "75" | "100"', - default: undefined, - }, - prefetch: { - type: 'boolean', - }, - prefetchedClass: { - type: 'ClassValue', - }, - rel: { - type: 'string', - default: undefined, - }, - replace: { - type: 'boolean', - default: undefined, - }, - routerComponentName: { - type: 'string', - default: undefined, - }, - stretched: { - type: 'boolean', - default: false, - }, - target: { - type: 'LinkTarget', - default: undefined, - }, - to: { - type: 'RouteLocationRaw', - default: undefined, - }, - underlineOffset: { - type: '1 | 2 | 3 | "1" | "2" | "3"', - default: undefined, - }, - underlineOffsetHover: { - type: '1 | 2 | 3 | "1" | "2" | "3"', - default: undefined, - }, - underlineOpacity: { - type: '0 | 10 | 25 | 50 | 75 | 100 | "0" | "10" | "25" | "50" | "75" | "100"', - default: undefined, - }, - underlineOpacityHover: { - type: '0 | 10 | 25 | 50 | 75 | 100 | "0" | "10" | "25" | "50" | "75" | "100"', - default: undefined, - }, - underlineVariant: { - type: 'ColorVariant | null', - default: undefined, - }, - variant: { - type: 'ColorVariant | null', - default: null, - }, - wrapperAttrs: { - type: 'Readonly', - default: undefined, - }, - } satisfies Record, - }, slots: [ { - description: '', name: 'default', - scope: [], + description: 'Content to place in the dropdown item', }, ], }, { component: 'BDropdownItemButton', sourcePath: '/BDropdown/BDropdownItemButton.vue', + props: { + '': { + buttonClass: { + type: 'ClassValue', + default: undefined, + description: 'Class or classes to apply to the inner button element', + }, + ...pick(buildCommonProps({}), [ + 'active', + 'activeClass', + 'disabled', + 'variant', + 'wrapperAttrs', + ]), + } satisfies Record, + }, emits: [ { + event: 'click', + description: 'Emitted when item is clicked', args: [ { - arg: 'click', - description: '', + arg: 'value', type: 'MouseEvent', + description: 'Native click event object', }, ], - description: '', - event: 'click', }, ], - props: { - '': { - active: { - type: 'boolean', - default: false, - }, - activeClass: { - type: 'ClassValue', - default: 'active', - }, - buttonClass: { - type: 'ClassValue', - default: undefined, - }, - disabled: { - type: 'boolean', - default: false, - }, - variant: { - type: 'ColorVariant | null', - default: null, - }, - } satisfies Record, - }, slots: [ { - description: '', name: 'default', - scope: [], + description: 'Content to place in the dropdown item button', }, ], }, @@ -561,17 +455,16 @@ export default { props: { '': { text: { - description: '', + default: undefined, + description: 'Content to place in the dropdown text. Default slot takes precedence', type: 'string', - default: '', }, } satisfies Record, }, slots: [ { - description: '', name: 'default', - scope: [], + description: 'Content to place in the dropdown text', }, ], }, diff --git a/apps/docs/src/data/components/formCheckbox.data.ts b/apps/docs/src/data/components/formCheckbox.data.ts index cf1c62f93..464e048cd 100644 --- a/apps/docs/src/data/components/formCheckbox.data.ts +++ b/apps/docs/src/data/components/formCheckbox.data.ts @@ -37,6 +37,11 @@ export default { description: 'When set, renders the checkbox as an inline element rather than as a 100% width block', }, + inputClass: { + type: 'ClassValue', + default: undefined, + description: 'Class to be applied to the body of the checkbox item', + }, modelValue: { type: 'CheckboxValue | readonly CheckboxValue[]', default: undefined, @@ -64,16 +69,6 @@ export default { default: true, description: 'Value returned when this checkbox is checked', }, - wrapperAttrs: { - type: 'Readonly', - default: undefined, - description: 'Attributes to be applied to the wrapper element', - }, - inputClass: { - type: 'ClassValue', - default: undefined, - description: 'Class to be applied to the body of the accordion item', - }, ...pick(buildCommonProps(), [ 'ariaLabel', 'ariaLabelledby', @@ -86,6 +81,7 @@ export default { 'required', 'size', 'state', + 'wrapperAttrs', ]), } satisfies Record, }, diff --git a/apps/docs/src/docs/components/demo/DropdownForm.vue b/apps/docs/src/docs/components/demo/DropdownForm.vue new file mode 100644 index 000000000..f44ff1381 --- /dev/null +++ b/apps/docs/src/docs/components/demo/DropdownForm.vue @@ -0,0 +1,29 @@ + diff --git a/apps/docs/src/docs/components/dropdown.md b/apps/docs/src/docs/components/dropdown.md index 04acc659a..4526d3998 100644 --- a/apps/docs/src/docs/components/dropdown.md +++ b/apps/docs/src/docs/components/dropdown.md @@ -157,8 +157,6 @@ Dar variants for components were deprecated in Bootstrap v 5.3.0. See ### Block level dropdowns -Bootstrap 5's block button implementation doesn't appear to work for dropdowns. - By default, dropdowns act like buttons and are displayed inline. Create a full-width, “block button” by adding the classes `d-grid` and `gap-2` to the `BDropdown`. For split buttons, wrap the `BDropdown` in a div that has the `d-grid` and `gap-2` classes and add `split-class="w-100"` to the `BDropdown` itself. @@ -245,6 +243,8 @@ constrain/set the menu width. `BDropdownText` has the BootstrapVueNext custom class `.b-dropdown-text` applied to it which sets some basic styles which are suitable in most situations. By default, its width will be the same as the widest `BDropdownItem` content. You may need to place additional styles or helper classes on the component. +: While the basic `BDropdownText` works, none of the props are implemented to customize the text (`tag`, `text-class`, and `variant`) + ### BDropdownGroup Group a set of dropdown sub-components with an optional associated header. Place a `BDropdownDivider` between your `BDropdownGroup` and other groups or non-grouped dropdown contents. @@ -261,6 +261,16 @@ See Section [Headers and accessibility](#headers-and-accessibility) for details Using the `BDropdownGroup` sub-component simplifies creating accessible grouped dropdown items with an associated header. +: While the basic `BDropdownHeader` works, none of the props are implemented to customize the header (`id`, `tag`, and `variant`) + +### BDropdownForm + +Add a form into your dropdown with `BDropdownForm`. + +<<< DEMO ./demo/DropdownForm.vue#template{vue-html} + +: While the basic `BDropdownForm` works, none of the props are implemented to customize the form (`formClass`, `inline`, `novalidate` and `validated`) + ## Accessibility Providing a unique `id` prop ensures ARIA compliance by automatically adding the appropriate `aria-*` attributes in the rendered markup. By default, the dropdown will render a unique id for every dropdown. However, this can be overwritten with the prop `id`. diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md index a90f4835b..8cd28c5b7 100644 --- a/apps/docs/src/docs/migration-guide.md +++ b/apps/docs/src/docs/migration-guide.md @@ -23,6 +23,8 @@ For instance, there are likely many places where you use `Bootstrap` utility cla classes that involve `left` and `right` (or `l` and `r`) to be `start` and `end` (or `s` and `e`). This will affect compents such as `BNavBar` in unexpected ways that BSVN has no control over. +Similarly, `left` and `right` props and values in the `bootstrap-vue-next` API are generally replaced by `start` and `end`. + Bootstrap-vue-next will commit to breaking changes whenever Bootstrap marks something as "deprecated". These changes may be resolved automatically, or they might necessitate manual action from the library's users. ## Sync modifier @@ -162,6 +164,26 @@ events on this component. The `appear` prop. +## BDropdown + +BootstrapVueNext uses [floating-ui](https://floating-ui.com/) to implemented dropdowns. This affects values and behaviors +for properties souch as `boundary` as well as the alignent and placement properties. For fine control, use `floating-middleware` +in place of `popper-opts`. Check out [our documentation](/docs/components/dropdown) and [theirs] for details. + +The `block` prop is deprecated. See our [`BDropdown` documentation](/docs/components/dropdown#block-level-dropdowns) +and [Bootstrap's documentation](https://getbootstrap.com/docs/5.3/components/buttons/#block-buttons) for +details. + +The `right` prop is replaced by `end` see the [overview section](#overview) of this page for details. + +The `html` prop has been deprecated, use the `button-content`. + +`$root` instance events `bv::dropdown::hide` and `bv::dropdown::show` are deprecrated. + +`toggleAttrs` + +The props on `BDropdownForm`, `BDropdownHeader`, and `BDropdownText`. + ## BForm Bootstrap 5 has dropped form-specific layout classes for the grid system. See the diff --git a/apps/docs/src/types/index.ts b/apps/docs/src/types/index.ts index 7e50b92c5..98a2b61e5 100644 --- a/apps/docs/src/types/index.ts +++ b/apps/docs/src/types/index.ts @@ -38,12 +38,12 @@ export interface ComponentReference { */ sourcePath: string | null props: PropsRecord - emits: { + emits?: { event: string args?: EmitArgReference[] description?: string }[] - slots: { + slots?: { scope?: SlotScopeReference[] name: string description?: string diff --git a/apps/docs/src/utils/common-props.ts b/apps/docs/src/utils/common-props.ts index 2d70265a9..736e363a3 100644 --- a/apps/docs/src/utils/common-props.ts +++ b/apps/docs/src/utils/common-props.ts @@ -2,6 +2,18 @@ import {type PropertyReference} from '../types' export const commonProps = () => ({ + active: { + type: 'boolean', + default: false, + description: + 'When set to `true`, places the component in the active state with active styling', + }, + activeClass: { + type: 'ClassValue', + default: 'active', + description: + "Configure the active CSS class applied when the link is active. Typically you will want to set this to class name 'active'", + }, alt: { type: 'string', default: 'undefined', @@ -13,6 +25,12 @@ export const commonProps = () => description: 'If this component controls another component or element, set this to the ID of the controlled component or element', }, + ariaDescribedby: { + type: 'string', + default: undefined, + description: + 'The ID of the element that provides a description for this component. Used as the value for the `aria-describedby` attribute', + }, ariaInvalid: { type: 'AriaInvalid', default: undefined, @@ -218,6 +236,11 @@ export const commonProps = () => description: 'When set, the input is formatted on blur instead of each keystroke (if there is a formatter specified)', }, + linkClass: { + type: 'ClassValue', + default: undefined, + description: 'Class or classes to apply to the inner link element', + }, list: { type: 'string', default: 'undefined', @@ -228,6 +251,17 @@ export const commonProps = () => default: undefined, description: 'Sets the value of the `name` attribute on the form control', }, + noHoverPause: { + type: 'boolean', + default: false, + description: 'When set to true, disables pausing the timer on hover behavior', + }, + noResumeOnHoverLeave: { + type: 'boolean', + default: false, + description: + 'When set to true, the timer will not resume when the mouse leaves the element. It will need to be manually resumed', + }, options: { type: 'readonly CheckboxOptionRaw[]', default: '() => []', @@ -366,15 +400,9 @@ export const commonProps = () => description: 'Applies one of the Bootstrap theme color variants to the component. When implemented `bg-variant` and `text-variant` will take precedence', }, - noHoverPause: { - type: 'boolean', - default: false, - description: 'When set to true, disables pausing the timer on hover behavior', - }, - noResumeOnHoverLeave: { - type: 'boolean', - default: false, - description: - 'When set to true, the timer will not resume when the mouse leaves the element. It will need to be manually resumed', + wrapperAttrs: { + type: 'Readonly', + default: undefined, + description: 'Attributes to be applied to the wrapper element', }, }) satisfies Record diff --git a/apps/docs/src/utils/link-props.ts b/apps/docs/src/utils/link-props.ts index 4fcbe6a8f..7e799c355 100644 --- a/apps/docs/src/utils/link-props.ts +++ b/apps/docs/src/utils/link-props.ts @@ -63,7 +63,9 @@ export const linkProps = { type: 'string', default: undefined, description: 'Not Yet Implmented: A class to apply to links that have been prefetched.', + notYetImplemented: true, }, + noRel: {}, rel: { type: 'string', default: undefined, @@ -133,5 +135,8 @@ export const linkProps = { default: null, description: 'Set the color variant for the link', }, - noRel: {}, -} as const satisfies Record + // TODO: remove the hard-coded NYI props below when they are implemented +} as const satisfies Record< + keyof BvnComponentProps['BLink'] | 'noPrefetch' | 'prefetch' | 'prefetchedClass', + PropertyReference +> From 250c30381f1c9f06000271a5fc5318762a367629 Mon Sep 17 00:00:00 2001 From: "David W. Gray" Date: Thu, 3 Oct 2024 14:31:12 -0700 Subject: [PATCH 5/6] Update apps/docs/src/docs/components/dropdown.md Co-authored-by: Issayah --- apps/docs/src/docs/components/dropdown.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/docs/components/dropdown.md b/apps/docs/src/docs/components/dropdown.md index 4526d3998..b413fefe2 100644 --- a/apps/docs/src/docs/components/dropdown.md +++ b/apps/docs/src/docs/components/dropdown.md @@ -152,7 +152,7 @@ split button its variant via the `split-variant` prop. ### Dark mode -Dar variants for components were deprecated in Bootstrap v 5.3.0. See +Dark variants for components were deprecated in Bootstrap v5.3.0. See [their documentation](https://getbootstrap.com/docs/5.3/components/dropdowns/#dark-dropdowns) for details. ### Block level dropdowns From 72606b3f6624776fb1c802069565a19e1d8e1ab0 Mon Sep 17 00:00:00 2001 From: "David W. Gray" Date: Thu, 3 Oct 2024 14:37:04 -0700 Subject: [PATCH 6/6] docs(BDropdown): Fix doc build issue --- apps/docs/src/docs/migration-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md index 8cd28c5b7..acac30bcb 100644 --- a/apps/docs/src/docs/migration-guide.md +++ b/apps/docs/src/docs/migration-guide.md @@ -180,7 +180,7 @@ The `html` prop has been deprecated, use the `button-content`. `$root` instance events `bv::dropdown::hide` and `bv::dropdown::show` are deprecrated. -`toggleAttrs` +`toggleAttrs` The props on `BDropdownForm`, `BDropdownHeader`, and `BDropdownText`.