From 24f4da19cf41c1e1e67d1946ecaed89ced6e78f3 Mon Sep 17 00:00:00 2001 From: Illya Klymov Date: Sat, 20 Nov 2021 03:20:33 +0200 Subject: [PATCH] chore(compat): do not pollute Vue.extend --- src/components/alert/alert.js | 4 +- src/components/aspect/aspect.js | 4 +- src/components/avatar/avatar-group.js | 4 +- src/components/avatar/avatar.js | 4 +- src/components/badge/badge.js | 4 +- src/components/breadcrumb/breadcrumb-item.js | 4 +- src/components/breadcrumb/breadcrumb-link.js | 4 +- src/components/breadcrumb/breadcrumb.js | 4 +- src/components/button-group/button-group.js | 4 +- .../button-toolbar/button-toolbar.js | 4 +- src/components/button/button-close.js | 4 +- src/components/button/button.js | 4 +- src/components/calendar/calendar.js | 4 +- src/components/card/card-body.js | 4 +- src/components/card/card-footer.js | 4 +- src/components/card/card-group.js | 4 +- src/components/card/card-header.js | 4 +- src/components/card/card-img-lazy.js | 4 +- src/components/card/card-img.js | 4 +- src/components/card/card-sub-title.js | 4 +- src/components/card/card-text.js | 4 +- src/components/card/card-title.js | 4 +- src/components/card/card.js | 4 +- src/components/carousel/carousel-slide.js | 4 +- src/components/carousel/carousel.js | 4 +- src/components/collapse/collapse.js | 4 +- .../collapse/helpers/bv-collapse.js | 4 +- src/components/dropdown/dropdown-divider.js | 4 +- src/components/dropdown/dropdown-form.js | 4 +- src/components/dropdown/dropdown-group.js | 4 +- src/components/dropdown/dropdown-header.js | 4 +- .../dropdown/dropdown-item-button.js | 4 +- src/components/dropdown/dropdown-item.js | 4 +- src/components/dropdown/dropdown-text.js | 4 +- src/components/dropdown/dropdown.js | 4 +- src/components/embed/embed.js | 4 +- .../bv-form-btn-label-control.js | 4 +- .../form-checkbox/form-checkbox-group.js | 4 +- src/components/form-checkbox/form-checkbox.js | 4 +- .../form-datepicker/form-datepicker.js | 4 +- src/components/form-file/form-file.js | 4 +- src/components/form-group/form-group.js | 2 +- src/components/form-input/form-input.js | 4 +- src/components/form-radio/form-radio-group.js | 4 +- src/components/form-radio/form-radio.js | 4 +- src/components/form-rating/form-rating.js | 6 +- .../form-select/form-select-option-group.js | 4 +- .../form-select/form-select-option.js | 4 +- src/components/form-select/form-select.js | 4 +- .../form-select/helpers/mixin-options.js | 4 +- .../form-spinbutton/form-spinbutton.js | 4 +- src/components/form-tags/form-tag.js | 4 +- src/components/form-tags/form-tags.js | 4 +- src/components/form-textarea/form-textarea.js | 4 +- .../form-timepicker/form-timepicker.js | 4 +- src/components/form/form-datalist.js | 4 +- src/components/form/form-invalid-feedback.js | 4 +- src/components/form/form-text.js | 4 +- src/components/form/form-valid-feedback.js | 4 +- src/components/form/form.js | 4 +- src/components/image/img-lazy.js | 4 +- src/components/image/img.js | 4 +- .../input-group/input-group-addon.js | 4 +- .../input-group/input-group-append.js | 4 +- .../input-group/input-group-prepend.js | 4 +- .../input-group/input-group-text.js | 4 +- src/components/input-group/input-group.js | 4 +- src/components/jumbotron/jumbotron.js | 4 +- src/components/layout/container.js | 4 +- src/components/layout/form-row.js | 4 +- src/components/layout/row.js | 2 +- src/components/link/link.js | 4 +- src/components/list-group/list-group-item.js | 4 +- src/components/list-group/list-group.js | 4 +- src/components/media/media-aside.js | 4 +- src/components/media/media-body.js | 4 +- src/components/media/media.js | 4 +- src/components/modal/helpers/bv-modal.js | 3 +- src/components/modal/helpers/modal-manager.js | 4 +- src/components/modal/modal.js | 4 +- src/components/nav/nav-form.js | 4 +- src/components/nav/nav-item-dropdown.js | 4 +- src/components/nav/nav-item.js | 4 +- src/components/nav/nav-text.js | 4 +- src/components/nav/nav.js | 4 +- src/components/navbar/navbar-brand.js | 4 +- src/components/navbar/navbar-nav.js | 4 +- src/components/navbar/navbar-toggle.js | 4 +- src/components/navbar/navbar.js | 4 +- src/components/overlay/overlay.js | 4 +- .../pagination-nav/pagination-nav.js | 4 +- src/components/pagination/pagination.js | 4 +- .../popover/helpers/bv-popover-template.js | 4 +- src/components/popover/helpers/bv-popover.js | 2 +- src/components/popover/popover.js | 4 +- src/components/progress/progress-bar.js | 4 +- src/components/progress/progress.js | 4 +- src/components/sidebar/sidebar.js | 4 +- src/components/skeleton/skeleton-icon.js | 4 +- src/components/skeleton/skeleton-img.js | 4 +- src/components/skeleton/skeleton-table.js | 4 +- src/components/skeleton/skeleton-wrapper.js | 4 +- src/components/skeleton/skeleton.js | 4 +- src/components/spinner/spinner.js | 4 +- .../table/helpers/mixin-bottom-row.js | 4 +- src/components/table/helpers/mixin-busy.js | 4 +- src/components/table/helpers/mixin-caption.js | 4 +- .../table/helpers/mixin-colgroup.js | 4 +- src/components/table/helpers/mixin-empty.js | 4 +- .../table/helpers/mixin-filtering.js | 4 +- src/components/table/helpers/mixin-items.js | 4 +- .../table/helpers/mixin-pagination.js | 4 +- .../table/helpers/mixin-provider.js | 4 +- .../table/helpers/mixin-selectable.js | 4 +- src/components/table/helpers/mixin-sorting.js | 4 +- src/components/table/helpers/mixin-stacked.js | 4 +- .../table/helpers/mixin-table-renderer.js | 4 +- .../table/helpers/mixin-tbody-row.js | 4 +- src/components/table/helpers/mixin-tbody.js | 4 +- src/components/table/helpers/mixin-tfoot.js | 4 +- src/components/table/helpers/mixin-thead.js | 4 +- src/components/table/helpers/mixin-top-row.js | 4 +- src/components/table/table-lite.js | 4 +- src/components/table/table-simple.js | 4 +- src/components/table/table.js | 4 +- src/components/table/tbody.js | 4 +- src/components/table/td.js | 4 +- src/components/table/tfoot.js | 4 +- src/components/table/th.js | 4 +- src/components/table/thead.js | 4 +- src/components/table/tr.js | 4 +- src/components/tabs/tab.js | 4 +- src/components/tabs/tabs.js | 6 +- src/components/time/time.js | 4 +- src/components/toast/helpers/bv-toast.js | 3 +- src/components/toast/toast.js | 4 +- src/components/toast/toaster.js | 6 +- src/components/tooltip/helpers/bv-popper.js | 4 +- .../tooltip/helpers/bv-tooltip-template.js | 4 +- src/components/tooltip/helpers/bv-tooltip.js | 4 +- src/components/tooltip/tooltip.js | 4 +- src/components/transition/bv-transition.js | 4 +- src/components/transporter/transporter.js | 8 +- src/icons/helpers/icon-base.js | 4 +- src/icons/helpers/make-icon.js | 4 +- src/icons/icon.js | 4 +- src/icons/iconstack.js | 4 +- src/mixins/attrs.js | 4 +- src/mixins/card.js | 4 +- src/mixins/click-out.js | 4 +- src/mixins/dropdown.js | 4 +- src/mixins/focus-in.js | 4 +- src/mixins/form-control.js | 4 +- src/mixins/form-custom.js | 4 +- src/mixins/form-options.js | 4 +- src/mixins/form-radio-check-group.js | 4 +- src/mixins/form-radio-check.js | 4 +- src/mixins/form-selection.js | 4 +- src/mixins/form-size.js | 4 +- src/mixins/form-state.js | 4 +- src/mixins/form-text.js | 4 +- src/mixins/form-validity.js | 4 +- src/mixins/has-listener.js | 4 +- src/mixins/id.js | 4 +- src/mixins/listen-on-document.js | 4 +- src/mixins/listen-on-root.js | 4 +- src/mixins/listen-on-window.js | 4 +- src/mixins/listeners.js | 4 +- src/mixins/normalize-slot.js | 4 +- src/mixins/pagination.js | 4 +- src/mixins/scoped-style.js | 4 +- src/mixins/use-parent.js | 4 +- src/utils/cache.js | 4 +- src/utils/model.js | 4 +- src/vue.js | 205 +++++++++--------- 175 files changed, 449 insertions(+), 454 deletions(-) diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js index cf4c7e50979..90787c56be6 100644 --- a/src/components/alert/alert.js +++ b/src/components/alert/alert.js @@ -1,4 +1,4 @@ -import { COMPONENT_UID_KEY, Vue } from '../../vue' +import { COMPONENT_UID_KEY, defineComponent } from '../../vue' import { NAME_ALERT } from '../../constants/components' import { EVENT_NAME_DISMISSED, EVENT_NAME_DISMISS_COUNT_DOWN } from '../../constants/events' import { @@ -68,7 +68,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BAlert = /*#__PURE__*/ Vue.extend({ +export const BAlert = /*#__PURE__*/ defineComponent({ name: NAME_ALERT, compatConfig: { MODE: 3, diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js index d9fce4bb124..6d90191ebc2 100644 --- a/src/components/aspect/aspect.js +++ b/src/components/aspect/aspect.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_ASPECT } from '../../constants/components' import { PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props' import { RX_ASPECT, RX_ASPECT_SEPARATOR } from '../../constants/regex' @@ -26,7 +26,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BAspect = /*#__PURE__*/ Vue.extend({ +export const BAspect = /*#__PURE__*/ defineComponent({ name: NAME_ASPECT, mixins: [normalizeSlotMixin], props, diff --git a/src/components/avatar/avatar-group.js b/src/components/avatar/avatar-group.js index 89772dd5339..705ec899b7d 100644 --- a/src/components/avatar/avatar-group.js +++ b/src/components/avatar/avatar-group.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_AVATAR_GROUP } from '../../constants/components' import { PROP_TYPE_BOOLEAN, @@ -33,7 +33,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BAvatarGroup = /*#__PURE__*/ Vue.extend({ +export const BAvatarGroup = /*#__PURE__*/ defineComponent({ name: NAME_AVATAR_GROUP, mixins: [normalizeSlotMixin], provide() { diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js index ec7a966c791..daa9d3bca9a 100644 --- a/src/components/avatar/avatar.js +++ b/src/components/avatar/avatar.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_AVATAR } from '../../constants/components' import { EVENT_NAME_CLICK, EVENT_NAME_IMG_ERROR } from '../../constants/events' import { @@ -67,7 +67,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BAvatar = /*#__PURE__*/ Vue.extend({ +export const BAvatar = /*#__PURE__*/ defineComponent({ name: NAME_AVATAR, mixins: [normalizeSlotMixin], inject: { diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js index bff564a3fa4..13e460a727f 100644 --- a/src/components/badge/badge.js +++ b/src/components/badge/badge.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_BADGE } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { omit, sortKeys } from '../../utils/object' @@ -25,7 +25,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BBadge = /*#__PURE__*/ Vue.extend({ +export const BBadge = /*#__PURE__*/ defineComponent({ name: NAME_BADGE, functional: true, props, diff --git a/src/components/breadcrumb/breadcrumb-item.js b/src/components/breadcrumb/breadcrumb-item.js index 02cd6e13156..80ee130267d 100644 --- a/src/components/breadcrumb/breadcrumb-item.js +++ b/src/components/breadcrumb/breadcrumb-item.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_BREADCRUMB_ITEM } from '../../constants/components' import { makePropsConfigurable } from '../../utils/props' import { BBreadcrumbLink, props as BBreadcrumbLinkProps } from './breadcrumb-link' @@ -10,7 +10,7 @@ export const props = makePropsConfigurable(BBreadcrumbLinkProps, NAME_BREADCRUMB // --- Main component --- // @vue/component -export const BBreadcrumbItem = /*#__PURE__*/ Vue.extend({ +export const BBreadcrumbItem = /*#__PURE__*/ defineComponent({ name: NAME_BREADCRUMB_ITEM, functional: true, props, diff --git a/src/components/breadcrumb/breadcrumb-link.js b/src/components/breadcrumb/breadcrumb-link.js index 3fdd65652b0..dca8465afb6 100644 --- a/src/components/breadcrumb/breadcrumb-link.js +++ b/src/components/breadcrumb/breadcrumb-link.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_BREADCRUMB_LINK } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { htmlOrText } from '../../utils/html' @@ -21,7 +21,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BBreadcrumbLink = /*#__PURE__*/ Vue.extend({ +export const BBreadcrumbLink = /*#__PURE__*/ defineComponent({ name: NAME_BREADCRUMB_LINK, functional: true, props, diff --git a/src/components/breadcrumb/breadcrumb.js b/src/components/breadcrumb/breadcrumb.js index 0bb16805185..7dfee31b3bf 100644 --- a/src/components/breadcrumb/breadcrumb.js +++ b/src/components/breadcrumb/breadcrumb.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_BREADCRUMB } from '../../constants/components' import { PROP_TYPE_ARRAY } from '../../constants/props' import { isArray, isObject } from '../../utils/inspect' @@ -18,7 +18,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BBreadcrumb = /*#__PURE__*/ Vue.extend({ +export const BBreadcrumb = /*#__PURE__*/ defineComponent({ name: NAME_BREADCRUMB, functional: true, props, diff --git a/src/components/button-group/button-group.js b/src/components/button-group/button-group.js index 16850a8e305..e54a649549e 100644 --- a/src/components/button-group/button-group.js +++ b/src/components/button-group/button-group.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_BUTTON_GROUP } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { pick, sortKeys } from '../../utils/object' @@ -21,7 +21,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BButtonGroup = /*#__PURE__*/ Vue.extend({ +export const BButtonGroup = /*#__PURE__*/ defineComponent({ name: NAME_BUTTON_GROUP, functional: true, props, diff --git a/src/components/button-toolbar/button-toolbar.js b/src/components/button-toolbar/button-toolbar.js index af0d6eda7ea..ad79fbeafd4 100644 --- a/src/components/button-toolbar/button-toolbar.js +++ b/src/components/button-toolbar/button-toolbar.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_BUTTON_TOOLBAR } from '../../constants/components' import { PROP_TYPE_BOOLEAN } from '../../constants/props' import { CODE_DOWN, CODE_LEFT, CODE_RIGHT, CODE_UP } from '../../constants/key-codes' @@ -30,7 +30,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BButtonToolbar = /*#__PURE__*/ Vue.extend({ +export const BButtonToolbar = /*#__PURE__*/ defineComponent({ name: NAME_BUTTON_TOOLBAR, mixins: [normalizeSlotMixin], props, diff --git a/src/components/button/button-close.js b/src/components/button/button-close.js index 9661e18ee9d..92d8c9ed868 100644 --- a/src/components/button/button-close.js +++ b/src/components/button/button-close.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_BUTTON_CLOSE } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { SLOT_NAME_DEFAULT } from '../../constants/slots' @@ -22,7 +22,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BButtonClose = /*#__PURE__*/ Vue.extend({ +export const BButtonClose = /*#__PURE__*/ defineComponent({ name: NAME_BUTTON_CLOSE, compatConfig: { MODE: 3, diff --git a/src/components/button/button.js b/src/components/button/button.js index 97b49883cef..e22057f2b28 100644 --- a/src/components/button/button.js +++ b/src/components/button/button.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_BUTTON } from '../../constants/components' import { CODE_ENTER, CODE_SPACE } from '../../constants/key-codes' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' @@ -115,7 +115,7 @@ const computeAttrs = (props, data) => { // --- Main component --- // @vue/component -export const BButton = /*#__PURE__*/ Vue.extend({ +export const BButton = /*#__PURE__*/ defineComponent({ name: NAME_BUTTON, functional: true, props, diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js index 91db9527aa4..a07e283166d 100644 --- a/src/components/calendar/calendar.js +++ b/src/components/calendar/calendar.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_CALENDAR } from '../../constants/components' import { CALENDAR_GREGORY, @@ -180,7 +180,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCalendar = Vue.extend({ +export const BCalendar = defineComponent({ name: NAME_CALENDAR, compatConfig: { MODE: 3, diff --git a/src/components/card/card-body.js b/src/components/card/card-body.js index ee6e99eb04e..d8e83752897 100644 --- a/src/components/card/card-body.js +++ b/src/components/card/card-body.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_CARD_BODY } from '../../constants/components' import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props' import { sortKeys } from '../../utils/object' @@ -29,7 +29,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCardBody = /*#__PURE__*/ Vue.extend({ +export const BCardBody = /*#__PURE__*/ defineComponent({ name: NAME_CARD_BODY, functional: true, props, diff --git a/src/components/card/card-footer.js b/src/components/card/card-footer.js index 93be2d16227..0a689ce8009 100644 --- a/src/components/card/card-footer.js +++ b/src/components/card/card-footer.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_CARD_FOOTER } from '../../constants/components' import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../constants/props' import { htmlOrText } from '../../utils/html' @@ -21,7 +21,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCardFooter = /*#__PURE__*/ Vue.extend({ +export const BCardFooter = /*#__PURE__*/ defineComponent({ name: NAME_CARD_FOOTER, functional: true, props, diff --git a/src/components/card/card-group.js b/src/components/card/card-group.js index 9cc0eeb61f7..99de3288e05 100644 --- a/src/components/card/card-group.js +++ b/src/components/card/card-group.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_CARD_GROUP } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -17,7 +17,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCardGroup = /*#__PURE__*/ Vue.extend({ +export const BCardGroup = /*#__PURE__*/ defineComponent({ name: NAME_CARD_GROUP, functional: true, props, diff --git a/src/components/card/card-header.js b/src/components/card/card-header.js index 945dd346b37..1509584c039 100644 --- a/src/components/card/card-header.js +++ b/src/components/card/card-header.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_CARD_HEADER } from '../../constants/components' import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../constants/props' import { htmlOrText } from '../../utils/html' @@ -21,7 +21,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCardHeader = /*#__PURE__*/ Vue.extend({ +export const BCardHeader = /*#__PURE__*/ defineComponent({ name: NAME_CARD_HEADER, functional: true, props, diff --git a/src/components/card/card-img-lazy.js b/src/components/card/card-img-lazy.js index 178f3c8d21d..832c1fbe018 100644 --- a/src/components/card/card-img-lazy.js +++ b/src/components/card/card-img-lazy.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_CARD_IMG_LAZY } from '../../constants/components' import { keys, omit, sortKeys } from '../../utils/object' import { makePropsConfigurable } from '../../utils/props' @@ -19,7 +19,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCardImgLazy = /*#__PURE__*/ Vue.extend({ +export const BCardImgLazy = /*#__PURE__*/ defineComponent({ name: NAME_CARD_IMG_LAZY, functional: true, props, diff --git a/src/components/card/card-img.js b/src/components/card/card-img.js index 900a6b4e4b1..f988ae12b0c 100644 --- a/src/components/card/card-img.js +++ b/src/components/card/card-img.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_CARD_IMG } from '../../constants/components' import { PROP_TYPE_BOOLEAN } from '../../constants/props' import { pick, sortKeys } from '../../utils/object' @@ -21,7 +21,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCardImg = /*#__PURE__*/ Vue.extend({ +export const BCardImg = /*#__PURE__*/ defineComponent({ name: NAME_CARD_IMG, functional: true, props, diff --git a/src/components/card/card-sub-title.js b/src/components/card/card-sub-title.js index 14e79e40ed9..615dbd3a6dc 100644 --- a/src/components/card/card-sub-title.js +++ b/src/components/card/card-sub-title.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_CARD_SUB_TITLE } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -18,7 +18,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCardSubTitle = /*#__PURE__*/ Vue.extend({ +export const BCardSubTitle = /*#__PURE__*/ defineComponent({ name: NAME_CARD_SUB_TITLE, functional: true, props, diff --git a/src/components/card/card-text.js b/src/components/card/card-text.js index a9ebdee33e6..927084ef167 100644 --- a/src/components/card/card-text.js +++ b/src/components/card/card-text.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_CARD_TEXT } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -15,7 +15,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCardText = /*#__PURE__*/ Vue.extend({ +export const BCardText = /*#__PURE__*/ defineComponent({ name: NAME_CARD_TEXT, functional: true, props, diff --git a/src/components/card/card-title.js b/src/components/card/card-title.js index 768efb10657..d1eea6cbe28 100644 --- a/src/components/card/card-title.js +++ b/src/components/card/card-title.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_CARD_TITLE } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -17,7 +17,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCardTitle = /*#__PURE__*/ Vue.extend({ +export const BCardTitle = /*#__PURE__*/ defineComponent({ name: NAME_CARD_TITLE, functional: true, props, diff --git a/src/components/card/card.js b/src/components/card/card.js index 81db34e8eb5..9bc080a17ed 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_CARD } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { SLOT_NAME_DEFAULT, SLOT_NAME_FOOTER, SLOT_NAME_HEADER } from '../../constants/slots' @@ -40,7 +40,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCard = /*#__PURE__*/ Vue.extend({ +export const BCard = /*#__PURE__*/ defineComponent({ name: NAME_CARD, compatConfig: { MODE: 3, diff --git a/src/components/carousel/carousel-slide.js b/src/components/carousel/carousel-slide.js index b958fe5af40..ff4abd581ad 100644 --- a/src/components/carousel/carousel-slide.js +++ b/src/components/carousel/carousel-slide.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_CAROUSEL_SLIDE } from '../../constants/components' import { HAS_TOUCH_SUPPORT } from '../../constants/env' import { PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props' @@ -43,7 +43,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCarouselSlide = /*#__PURE__*/ Vue.extend({ +export const BCarouselSlide = /*#__PURE__*/ defineComponent({ name: NAME_CAROUSEL_SLIDE, mixins: [idMixin, normalizeSlotMixin], inject: { diff --git a/src/components/carousel/carousel.js b/src/components/carousel/carousel.js index 626edb8dbe4..df80c085c94 100644 --- a/src/components/carousel/carousel.js +++ b/src/components/carousel/carousel.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_CAROUSEL } from '../../constants/components' import { IS_BROWSER, HAS_POINTER_EVENT_SUPPORT, HAS_TOUCH_SUPPORT } from '../../constants/env' import { @@ -132,7 +132,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCarousel = /*#__PURE__*/ Vue.extend({ +export const BCarousel = /*#__PURE__*/ defineComponent({ name: NAME_CAROUSEL, compatConfig: { MODE: 3, diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js index 5f7d6665af9..c1065664f93 100644 --- a/src/components/collapse/collapse.js +++ b/src/components/collapse/collapse.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_COLLAPSE } from '../../constants/components' import { CLASS_NAME_SHOW } from '../../constants/classes' import { IS_BROWSER } from '../../constants/env' @@ -55,7 +55,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BCollapse = /*#__PURE__*/ Vue.extend({ +export const BCollapse = /*#__PURE__*/ defineComponent({ name: NAME_COLLAPSE, compatConfig: { MODE: 3, diff --git a/src/components/collapse/helpers/bv-collapse.js b/src/components/collapse/helpers/bv-collapse.js index 5b4b6806379..c25c0d544eb 100644 --- a/src/components/collapse/helpers/bv-collapse.js +++ b/src/components/collapse/helpers/bv-collapse.js @@ -5,7 +5,7 @@ // during the enter/leave transition phases only // Although it appears that Vue may be leaving the classes // in-place after the transition completes -import { Vue, mergeData } from '../../../vue' +import { defineComponent, mergeData } from '../../../vue' import { NAME_COLLAPSE_HELPER } from '../../../constants/components' import { PROP_TYPE_BOOLEAN } from '../../../constants/props' import { getBCR, reflow, removeStyle, requestAF, setStyle } from '../../../utils/dom' @@ -72,7 +72,7 @@ export const props = { // --- Main component --- // @vue/component -export const BVCollapse = /*#__PURE__*/ Vue.extend({ +export const BVCollapse = /*#__PURE__*/ defineComponent({ name: NAME_COLLAPSE_HELPER, functional: true, props, diff --git a/src/components/dropdown/dropdown-divider.js b/src/components/dropdown/dropdown-divider.js index a5531bd8212..c59b1234b80 100644 --- a/src/components/dropdown/dropdown-divider.js +++ b/src/components/dropdown/dropdown-divider.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_DROPDOWN_DIVIDER } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -16,7 +16,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BDropdownDivider = /*#__PURE__*/ Vue.extend({ +export const BDropdownDivider = /*#__PURE__*/ defineComponent({ name: NAME_DROPDOWN_DIVIDER, functional: true, props, diff --git a/src/components/dropdown/dropdown-form.js b/src/components/dropdown/dropdown-form.js index 4c9109f458a..e66c668af72 100644 --- a/src/components/dropdown/dropdown-form.js +++ b/src/components/dropdown/dropdown-form.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_DROPDOWN_FORM } from '../../constants/components' import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props' import { omit, sortKeys } from '../../utils/object' @@ -19,7 +19,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BDropdownForm = /*#__PURE__*/ Vue.extend({ +export const BDropdownForm = /*#__PURE__*/ defineComponent({ name: NAME_DROPDOWN_FORM, functional: true, props, diff --git a/src/components/dropdown/dropdown-group.js b/src/components/dropdown/dropdown-group.js index 7747cde73c3..1a29823239a 100644 --- a/src/components/dropdown/dropdown-group.js +++ b/src/components/dropdown/dropdown-group.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_DROPDOWN_GROUP } from '../../constants/components' import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../constants/props' import { SLOT_NAME_DEFAULT, SLOT_NAME_HEADER } from '../../constants/slots' @@ -25,7 +25,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BDropdownGroup = /*#__PURE__*/ Vue.extend({ +export const BDropdownGroup = /*#__PURE__*/ defineComponent({ name: NAME_DROPDOWN_GROUP, compatConfig: { MODE: 3, diff --git a/src/components/dropdown/dropdown-header.js b/src/components/dropdown/dropdown-header.js index f1721d937ea..002b727f8a1 100644 --- a/src/components/dropdown/dropdown-header.js +++ b/src/components/dropdown/dropdown-header.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_DROPDOWN_HEADER } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { isTag } from '../../utils/dom' @@ -19,7 +19,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BDropdownHeader = /*#__PURE__*/ Vue.extend({ +export const BDropdownHeader = /*#__PURE__*/ defineComponent({ name: NAME_DROPDOWN_HEADER, functional: true, props, diff --git a/src/components/dropdown/dropdown-item-button.js b/src/components/dropdown/dropdown-item-button.js index 53599fc3296..286fc12bd6d 100644 --- a/src/components/dropdown/dropdown-item-button.js +++ b/src/components/dropdown/dropdown-item-button.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_DROPDOWN_ITEM_BUTTON } from '../../constants/components' import { EVENT_NAME_CLICK } from '../../constants/events' import { @@ -26,7 +26,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BDropdownItemButton = /*#__PURE__*/ Vue.extend({ +export const BDropdownItemButton = /*#__PURE__*/ defineComponent({ name: NAME_DROPDOWN_ITEM_BUTTON, mixins: [attrsMixin, normalizeSlotMixin], inject: { diff --git a/src/components/dropdown/dropdown-item.js b/src/components/dropdown/dropdown-item.js index e741b0fe35e..43c17c24258 100644 --- a/src/components/dropdown/dropdown-item.js +++ b/src/components/dropdown/dropdown-item.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_DROPDOWN_ITEM } from '../../constants/components' import { EVENT_NAME_CLICK } from '../../constants/events' import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../constants/props' @@ -25,7 +25,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BDropdownItem = /*#__PURE__*/ Vue.extend({ +export const BDropdownItem = /*#__PURE__*/ defineComponent({ name: NAME_DROPDOWN_ITEM, mixins: [attrsMixin, normalizeSlotMixin], inject: { diff --git a/src/components/dropdown/dropdown-text.js b/src/components/dropdown/dropdown-text.js index d269ac4586f..acb16146e18 100644 --- a/src/components/dropdown/dropdown-text.js +++ b/src/components/dropdown/dropdown-text.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_DROPDOWN_TEXT } from '../../constants/components' import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../constants/props' import { omit } from '../../utils/object' @@ -18,7 +18,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BDropdownText = /*#__PURE__*/ Vue.extend({ +export const BDropdownText = /*#__PURE__*/ defineComponent({ name: NAME_DROPDOWN_TEXT, functional: true, props, diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index bc9ce938e9c..7731d929eea 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_DROPDOWN } from '../../constants/components' import { PROP_TYPE_ARRAY_OBJECT_STRING, @@ -54,7 +54,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BDropdown = /*#__PURE__*/ Vue.extend({ +export const BDropdown = /*#__PURE__*/ defineComponent({ name: NAME_DROPDOWN, mixins: [idMixin, dropdownMixin, normalizeSlotMixin], props, diff --git a/src/components/embed/embed.js b/src/components/embed/embed.js index fdb54894301..92a97f9edd5 100644 --- a/src/components/embed/embed.js +++ b/src/components/embed/embed.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_EMBED } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { arrayIncludes } from '../../utils/array' @@ -25,7 +25,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BEmbed = /*#__PURE__*/ Vue.extend({ +export const BEmbed = /*#__PURE__*/ defineComponent({ name: NAME_EMBED, functional: true, props, diff --git a/src/components/form-btn-label-control/bv-form-btn-label-control.js b/src/components/form-btn-label-control/bv-form-btn-label-control.js index dbda470f70b..9f4d93dd06f 100644 --- a/src/components/form-btn-label-control/bv-form-btn-label-control.js +++ b/src/components/form-btn-label-control/bv-form-btn-label-control.js @@ -1,7 +1,7 @@ // // Private component used by `b-form-datepicker` and `b-form-timepicker` // -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_BUTTON_LABEL_CONTROL } from '../../constants/components' import { PROP_TYPE_ARRAY_OBJECT_STRING, @@ -54,7 +54,7 @@ export const props = sortKeys({ // --- Main component --- // @vue/component -export const BVFormBtnLabelControl = /*#__PURE__*/ Vue.extend({ +export const BVFormBtnLabelControl = /*#__PURE__*/ defineComponent({ compatConfig: { MODE: 3, CUSTOM_DIR: 'suppress-warning' diff --git a/src/components/form-checkbox/form-checkbox-group.js b/src/components/form-checkbox/form-checkbox-group.js index 4d607797bab..c86f890e572 100644 --- a/src/components/form-checkbox/form-checkbox-group.js +++ b/src/components/form-checkbox/form-checkbox-group.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_CHECKBOX_GROUP } from '../../constants/components' import { PROP_TYPE_ARRAY, PROP_TYPE_BOOLEAN } from '../../constants/props' import { sortKeys } from '../../utils/object' @@ -24,7 +24,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormCheckboxGroup = /*#__PURE__*/ Vue.extend({ +export const BFormCheckboxGroup = /*#__PURE__*/ defineComponent({ name: NAME_FORM_CHECKBOX_GROUP, // Includes render function mixins: [formRadioCheckGroupMixin], diff --git a/src/components/form-checkbox/form-checkbox.js b/src/components/form-checkbox/form-checkbox.js index ac86517fd3e..f85bd898310 100644 --- a/src/components/form-checkbox/form-checkbox.js +++ b/src/components/form-checkbox/form-checkbox.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_CHECKBOX } from '../../constants/components' import { EVENT_NAME_CHANGE, MODEL_EVENT_NAME_PREFIX } from '../../constants/events' import { PROP_TYPE_ANY, PROP_TYPE_BOOLEAN } from '../../constants/props' @@ -37,7 +37,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormCheckbox = /*#__PURE__*/ Vue.extend({ +export const BFormCheckbox = /*#__PURE__*/ defineComponent({ name: NAME_FORM_CHECKBOX, mixins: [formRadioCheckMixin], inject: { diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js index d3d5a692f8d..f14c3e61d30 100644 --- a/src/components/form-datepicker/form-datepicker.js +++ b/src/components/form-datepicker/form-datepicker.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_DATEPICKER } from '../../constants/components' import { EVENT_NAME_CONTEXT, EVENT_NAME_HIDDEN, EVENT_NAME_SHOWN } from '../../constants/events' import { PROP_TYPE_BOOLEAN, PROP_TYPE_DATE_STRING, PROP_TYPE_STRING } from '../../constants/props' @@ -75,7 +75,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormDatepicker = /*#__PURE__*/ Vue.extend({ +export const BFormDatepicker = /*#__PURE__*/ defineComponent({ name: NAME_FORM_DATEPICKER, compatConfig: { MODE: 3, diff --git a/src/components/form-file/form-file.js b/src/components/form-file/form-file.js index 7ef56ef378e..6de5bf58eac 100644 --- a/src/components/form-file/form-file.js +++ b/src/components/form-file/form-file.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_FILE } from '../../constants/components' import { HAS_PROMISE_SUPPORT } from '../../constants/env' import { EVENT_NAME_CHANGE, EVENT_OPTIONS_PASSIVE } from '../../constants/events' @@ -176,7 +176,7 @@ const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormFile = /*#__PURE__*/ Vue.extend({ +export const BFormFile = /*#__PURE__*/ defineComponent({ name: NAME_FORM_FILE, compatConfig: { MODE: 3, diff --git a/src/components/form-group/form-group.js b/src/components/form-group/form-group.js index c6d6760b98e..2bdcfb87fbb 100644 --- a/src/components/form-group/form-group.js +++ b/src/components/form-group/form-group.js @@ -85,7 +85,7 @@ export const generateProps = () => // --- Main component --- -// We do not use `Vue.extend()` here as that would evaluate the props +// We do not use `defineComponent()` here as that would evaluate the props // immediately, which we do not want to happen // @vue/component export const BFormGroup = { diff --git a/src/components/form-input/form-input.js b/src/components/form-input/form-input.js index 0aa3128899e..de5ac9db38f 100644 --- a/src/components/form-input/form-input.js +++ b/src/components/form-input/form-input.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_INPUT } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props' import { arrayIncludes } from '../../utils/array' @@ -61,7 +61,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormInput = /*#__PURE__*/ Vue.extend({ +export const BFormInput = /*#__PURE__*/ defineComponent({ name: NAME_FORM_INPUT, compatConfig: { MODE: 3, diff --git a/src/components/form-radio/form-radio-group.js b/src/components/form-radio/form-radio-group.js index 5fef309ae5b..c2d04ecdef9 100644 --- a/src/components/form-radio/form-radio-group.js +++ b/src/components/form-radio/form-radio-group.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_RADIO_GROUP } from '../../constants/components' import { makePropsConfigurable } from '../../utils/props' import { @@ -13,7 +13,7 @@ export const props = makePropsConfigurable(formRadioCheckGroupProps, NAME_FORM_R // --- Main component --- // @vue/component -export const BFormRadioGroup = /*#__PURE__*/ Vue.extend({ +export const BFormRadioGroup = /*#__PURE__*/ defineComponent({ name: NAME_FORM_RADIO_GROUP, mixins: [formRadioCheckGroupMixin], provide() { diff --git a/src/components/form-radio/form-radio.js b/src/components/form-radio/form-radio.js index c4ac840668c..42563cdd3b1 100644 --- a/src/components/form-radio/form-radio.js +++ b/src/components/form-radio/form-radio.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_RADIO } from '../../constants/components' import { looseEqual } from '../../utils/loose-equal' import { makePropsConfigurable } from '../../utils/props' @@ -15,7 +15,7 @@ export const props = makePropsConfigurable(formRadioCheckProps, NAME_FORM_RADIO) // --- Main component --- // @vue/component -export const BFormRadio = /*#__PURE__*/ Vue.extend({ +export const BFormRadio = /*#__PURE__*/ defineComponent({ name: NAME_FORM_RADIO, mixins: [formRadioCheckMixin], inject: { diff --git a/src/components/form-rating/form-rating.js b/src/components/form-rating/form-rating.js index d2f757ff4ae..4b012643347 100644 --- a/src/components/form-rating/form-rating.js +++ b/src/components/form-rating/form-rating.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_RATING, NAME_FORM_RATING_STAR } from '../../constants/components' import { EVENT_NAME_CHANGE, EVENT_NAME_SELECTED } from '../../constants/events' import { @@ -58,7 +58,7 @@ const clampValue = (value, min, max) => mathMax(mathMin(value, max), min) // --- Helper components --- // @vue/component -const BVFormRatingStar = Vue.extend({ +const BVFormRatingStar = defineComponent({ name: NAME_FORM_RATING_STAR, mixins: [normalizeSlotMixin], props: { @@ -140,7 +140,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormRating = /*#__PURE__*/ Vue.extend({ +export const BFormRating = /*#__PURE__*/ defineComponent({ name: NAME_FORM_RATING, compatConfig: { MODE: 3, diff --git a/src/components/form-select/form-select-option-group.js b/src/components/form-select/form-select-option-group.js index 546de2749ed..ca4c8f92179 100644 --- a/src/components/form-select/form-select-option-group.js +++ b/src/components/form-select/form-select-option-group.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_SELECT_OPTION_GROUP } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { SLOT_NAME_FIRST } from '../../constants/slots' @@ -22,7 +22,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormSelectOptionGroup = /*#__PURE__*/ Vue.extend({ +export const BFormSelectOptionGroup = /*#__PURE__*/ defineComponent({ name: NAME_FORM_SELECT_OPTION_GROUP, mixins: [normalizeSlotMixin, formOptionsMixin], props, diff --git a/src/components/form-select/form-select-option.js b/src/components/form-select/form-select-option.js index eece9980add..bbe3e00e86c 100644 --- a/src/components/form-select/form-select-option.js +++ b/src/components/form-select/form-select-option.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_FORM_SELECT_OPTION } from '../../constants/components' import { PROP_TYPE_ANY, PROP_TYPE_BOOLEAN } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -16,7 +16,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormSelectOption = /*#__PURE__*/ Vue.extend({ +export const BFormSelectOption = /*#__PURE__*/ defineComponent({ name: NAME_FORM_SELECT_OPTION, functional: true, props, diff --git a/src/components/form-select/form-select.js b/src/components/form-select/form-select.js index 63b4cde5665..7c2cf795437 100644 --- a/src/components/form-select/form-select.js +++ b/src/components/form-select/form-select.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_SELECT } from '../../constants/components' import { EVENT_NAME_CHANGE } from '../../constants/events' import { @@ -51,7 +51,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormSelect = /*#__PURE__*/ Vue.extend({ +export const BFormSelect = /*#__PURE__*/ defineComponent({ name: NAME_FORM_SELECT, mixins: [ idMixin, diff --git a/src/components/form-select/helpers/mixin-options.js b/src/components/form-select/helpers/mixin-options.js index b623c161dee..e85ea7246c7 100644 --- a/src/components/form-select/helpers/mixin-options.js +++ b/src/components/form-select/helpers/mixin-options.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { PROP_TYPE_STRING } from '../../../constants/props' import { get } from '../../../utils/get' import { isNull, isPlainObject, isUndefined } from '../../../utils/inspect' @@ -20,7 +20,7 @@ export const props = makePropsConfigurable( // --- Mixin --- // @vue/component -export const optionsMixin = Vue.extend({ +export const optionsMixin = defineComponent({ mixins: [formOptionsMixin], props, methods: { diff --git a/src/components/form-spinbutton/form-spinbutton.js b/src/components/form-spinbutton/form-spinbutton.js index a2189fc28e4..96256032a6a 100644 --- a/src/components/form-spinbutton/form-spinbutton.js +++ b/src/components/form-spinbutton/form-spinbutton.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_SPINBUTTON } from '../../constants/components' import { EVENT_NAME_CHANGE } from '../../constants/events' import { @@ -100,7 +100,7 @@ export const props = makePropsConfigurable( // --- Main Component --- // @vue/component -export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ +export const BFormSpinbutton = /*#__PURE__*/ defineComponent({ compatConfig: { MODE: 3, OPTIONS_BEFORE_DESTROY: 'suppress-warning' diff --git a/src/components/form-tags/form-tag.js b/src/components/form-tags/form-tag.js index f1a8d69d437..3c051845792 100644 --- a/src/components/form-tags/form-tag.js +++ b/src/components/form-tags/form-tag.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_TAG } from '../../constants/components' import { EVENT_NAME_REMOVE } from '../../constants/events' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' @@ -29,7 +29,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormTag = /*#__PURE__*/ Vue.extend({ +export const BFormTag = /*#__PURE__*/ defineComponent({ name: NAME_FORM_TAG, mixins: [idMixin, normalizeSlotMixin], props, diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js index 6a4c4266445..7f027141f7d 100644 --- a/src/components/form-tags/form-tags.js +++ b/src/components/form-tags/form-tags.js @@ -1,6 +1,6 @@ // Tagged input form control // Based loosely on https://adamwathan.me/renderless-components-in-vuejs/ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_TAGS } from '../../constants/components' import { EVENT_NAME_BLUR, @@ -141,7 +141,7 @@ const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormTags = /*#__PURE__*/ Vue.extend({ +export const BFormTags = /*#__PURE__*/ defineComponent({ name: NAME_FORM_TAGS, compatConfig: { MODE: 3, diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js index 126e0290efc..8f405915d5d 100644 --- a/src/components/form-textarea/form-textarea.js +++ b/src/components/form-textarea/form-textarea.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_TEXTAREA } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props' import { getCS, getStyle, isVisible, requestAF, setStyle } from '../../utils/dom' @@ -43,7 +43,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormTextarea = /*#__PURE__*/ Vue.extend({ +export const BFormTextarea = /*#__PURE__*/ defineComponent({ name: NAME_FORM_TEXTAREA, compatConfig: { MODE: 3, diff --git a/src/components/form-timepicker/form-timepicker.js b/src/components/form-timepicker/form-timepicker.js index b77e1f462b9..5f136baab2c 100644 --- a/src/components/form-timepicker/form-timepicker.js +++ b/src/components/form-timepicker/form-timepicker.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_TIMEPICKER } from '../../constants/components' import { EVENT_NAME_CONTEXT, EVENT_NAME_SHOWN, EVENT_NAME_HIDDEN } from '../../constants/events' import { PROP_TYPE_BOOLEAN, PROP_TYPE_DATE_STRING, PROP_TYPE_STRING } from '../../constants/props' @@ -64,7 +64,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormTimepicker = /*#__PURE__*/ Vue.extend({ +export const BFormTimepicker = /*#__PURE__*/ defineComponent({ name: NAME_FORM_TIMEPICKER, compatConfig: { MODE: 3, diff --git a/src/components/form/form-datalist.js b/src/components/form/form-datalist.js index d371c825d39..406715187d0 100644 --- a/src/components/form/form-datalist.js +++ b/src/components/form/form-datalist.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_FORM_DATALIST } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { htmlOrText } from '../../utils/html' @@ -20,7 +20,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormDatalist = /*#__PURE__*/ Vue.extend({ +export const BFormDatalist = /*#__PURE__*/ defineComponent({ name: NAME_FORM_DATALIST, mixins: [formOptionsMixin, normalizeSlotMixin], props, diff --git a/src/components/form/form-invalid-feedback.js b/src/components/form/form-invalid-feedback.js index 8292d9154db..396f90a5c9f 100644 --- a/src/components/form/form-invalid-feedback.js +++ b/src/components/form/form-invalid-feedback.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_FORM_INVALID_FEEDBACK } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -22,7 +22,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormInvalidFeedback = /*#__PURE__*/ Vue.extend({ +export const BFormInvalidFeedback = /*#__PURE__*/ defineComponent({ name: NAME_FORM_INVALID_FEEDBACK, functional: true, props, diff --git a/src/components/form/form-text.js b/src/components/form/form-text.js index 0d92d8e58e6..d2646dfef79 100644 --- a/src/components/form/form-text.js +++ b/src/components/form/form-text.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_FORM_TEXT } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -18,7 +18,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormText = /*#__PURE__*/ Vue.extend({ +export const BFormText = /*#__PURE__*/ defineComponent({ name: NAME_FORM_TEXT, functional: true, props, diff --git a/src/components/form/form-valid-feedback.js b/src/components/form/form-valid-feedback.js index 40453eee9f1..0c8e45a39b4 100644 --- a/src/components/form/form-valid-feedback.js +++ b/src/components/form/form-valid-feedback.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_FORM_VALID_FEEDBACK } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -22,7 +22,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormValidFeedback = /*#__PURE__*/ Vue.extend({ +export const BFormValidFeedback = /*#__PURE__*/ defineComponent({ name: NAME_FORM_VALID_FEEDBACK, functional: true, props, diff --git a/src/components/form/form.js b/src/components/form/form.js index bc8daa42fdd..7f8313be72e 100644 --- a/src/components/form/form.js +++ b/src/components/form/form.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_FORM } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -18,7 +18,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BForm = /*#__PURE__*/ Vue.extend({ +export const BForm = /*#__PURE__*/ defineComponent({ name: NAME_FORM, functional: true, props, diff --git a/src/components/image/img-lazy.js b/src/components/image/img-lazy.js index bf1c3b505b8..1e9d4bb3fc6 100644 --- a/src/components/image/img-lazy.js +++ b/src/components/image/img-lazy.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_IMG_LAZY } from '../../constants/components' import { HAS_INTERACTION_OBSERVER_SUPPORT } from '../../constants/env' import { MODEL_EVENT_NAME_PREFIX } from '../../constants/events' @@ -39,7 +39,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BImgLazy = /*#__PURE__*/ Vue.extend({ +export const BImgLazy = /*#__PURE__*/ defineComponent({ name: NAME_IMG_LAZY, directives: { 'b-visible': VBVisible diff --git a/src/components/image/img.js b/src/components/image/img.js index 72f82a649b8..35efce326ae 100644 --- a/src/components/image/img.js +++ b/src/components/image/img.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_IMG } from '../../constants/components' import { PROP_TYPE_ARRAY_STRING, @@ -72,7 +72,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BImg = /*#__PURE__*/ Vue.extend({ +export const BImg = /*#__PURE__*/ defineComponent({ name: NAME_IMG, compatConfig: { MODE: 3, diff --git a/src/components/input-group/input-group-addon.js b/src/components/input-group/input-group-addon.js index 4b5a8ca8af9..5d874ee0624 100644 --- a/src/components/input-group/input-group-addon.js +++ b/src/components/input-group/input-group-addon.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_INPUT_GROUP_ADDON } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -19,7 +19,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BInputGroupAddon = /*#__PURE__*/ Vue.extend({ +export const BInputGroupAddon = /*#__PURE__*/ defineComponent({ name: NAME_INPUT_GROUP_ADDON, functional: true, props, diff --git a/src/components/input-group/input-group-append.js b/src/components/input-group/input-group-append.js index fa5a9b22eb7..ab3f650bccf 100644 --- a/src/components/input-group/input-group-append.js +++ b/src/components/input-group/input-group-append.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_INPUT_GROUP_APPEND } from '../../constants/components' import { omit } from '../../utils/object' import { makePropsConfigurable } from '../../utils/props' @@ -14,7 +14,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BInputGroupAppend = /*#__PURE__*/ Vue.extend({ +export const BInputGroupAppend = /*#__PURE__*/ defineComponent({ name: NAME_INPUT_GROUP_APPEND, functional: true, props, diff --git a/src/components/input-group/input-group-prepend.js b/src/components/input-group/input-group-prepend.js index 25f3f8294f3..27f5b1d5934 100644 --- a/src/components/input-group/input-group-prepend.js +++ b/src/components/input-group/input-group-prepend.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_INPUT_GROUP_PREPEND } from '../../constants/components' import { omit } from '../../utils/object' import { makePropsConfigurable } from '../../utils/props' @@ -14,7 +14,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BInputGroupPrepend = /*#__PURE__*/ Vue.extend({ +export const BInputGroupPrepend = /*#__PURE__*/ defineComponent({ name: NAME_INPUT_GROUP_PREPEND, functional: true, props, diff --git a/src/components/input-group/input-group-text.js b/src/components/input-group/input-group-text.js index cfe4ac4d3fa..cd73dd5f1fe 100644 --- a/src/components/input-group/input-group-text.js +++ b/src/components/input-group/input-group-text.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_INPUT_GROUP_TEXT } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -15,7 +15,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BInputGroupText = /*#__PURE__*/ Vue.extend({ +export const BInputGroupText = /*#__PURE__*/ defineComponent({ name: NAME_INPUT_GROUP_TEXT, functional: true, props, diff --git a/src/components/input-group/input-group.js b/src/components/input-group/input-group.js index 038b9b97c97..6903a85429e 100644 --- a/src/components/input-group/input-group.js +++ b/src/components/input-group/input-group.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_INPUT_GROUP } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { SLOT_NAME_APPEND, SLOT_NAME_DEFAULT, SLOT_NAME_PREPEND } from '../../constants/slots' @@ -27,7 +27,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BInputGroup = /*#__PURE__*/ Vue.extend({ +export const BInputGroup = /*#__PURE__*/ defineComponent({ name: NAME_INPUT_GROUP, compatConfig: { MODE: 3, diff --git a/src/components/jumbotron/jumbotron.js b/src/components/jumbotron/jumbotron.js index be10c18b9c8..c3ff5bf8826 100644 --- a/src/components/jumbotron/jumbotron.js +++ b/src/components/jumbotron/jumbotron.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_JUMBOTRON } from '../../constants/components' import { PROP_TYPE_BOOLEAN, @@ -36,7 +36,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BJumbotron = /*#__PURE__*/ Vue.extend({ +export const BJumbotron = /*#__PURE__*/ defineComponent({ name: NAME_JUMBOTRON, compatConfig: { MODE: 3, diff --git a/src/components/layout/container.js b/src/components/layout/container.js index ec2c48781de..ce876d515ba 100644 --- a/src/components/layout/container.js +++ b/src/components/layout/container.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_CONTAINER } from '../../constants/components' import { PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -17,7 +17,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BContainer = /*#__PURE__*/ Vue.extend({ +export const BContainer = /*#__PURE__*/ defineComponent({ name: NAME_CONTAINER, functional: true, props, diff --git a/src/components/layout/form-row.js b/src/components/layout/form-row.js index 70d9af5cfc4..59079370ed4 100644 --- a/src/components/layout/form-row.js +++ b/src/components/layout/form-row.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_FORM_ROW } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -15,7 +15,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BFormRow = /*#__PURE__*/ Vue.extend({ +export const BFormRow = /*#__PURE__*/ defineComponent({ name: NAME_FORM_ROW, functional: true, props, diff --git a/src/components/layout/row.js b/src/components/layout/row.js index 4a1d6eb969f..f572dd00be0 100644 --- a/src/components/layout/row.js +++ b/src/components/layout/row.js @@ -65,7 +65,7 @@ export const generateProps = () => { // --- Main component --- -// We do not use `Vue.extend()` here as that would evaluate the props +// We do not use `defineComponent()` here as that would evaluate the props // immediately, which we do not want to happen // @vue/component export const BRow = { diff --git a/src/components/link/link.js b/src/components/link/link.js index f3a5bdde76f..3e02c5a0ea8 100644 --- a/src/components/link/link.js +++ b/src/components/link/link.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_LINK } from '../../constants/components' import { EVENT_NAME_CLICK } from '../../constants/events' import { @@ -75,7 +75,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BLink = /*#__PURE__*/ Vue.extend({ +export const BLink = /*#__PURE__*/ defineComponent({ name: NAME_LINK, // Mixin order is important! mixins: [attrsMixin, listenersMixin, listenOnRootMixin, normalizeSlotMixin], diff --git a/src/components/list-group/list-group-item.js b/src/components/list-group/list-group-item.js index bf591af27b7..211422f2025 100644 --- a/src/components/list-group/list-group-item.js +++ b/src/components/list-group/list-group-item.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_LIST_GROUP_ITEM } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { arrayIncludes } from '../../utils/array' @@ -32,7 +32,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BListGroupItem = /*#__PURE__*/ Vue.extend({ +export const BListGroupItem = /*#__PURE__*/ defineComponent({ name: NAME_LIST_GROUP_ITEM, functional: true, props, diff --git a/src/components/list-group/list-group.js b/src/components/list-group/list-group.js index 93ceda15779..e9a8aa62fb4 100644 --- a/src/components/list-group/list-group.js +++ b/src/components/list-group/list-group.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_LIST_GROUP } from '../../constants/components' import { PROP_TYPE_BOOLEAN, @@ -22,7 +22,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BListGroup = /*#__PURE__*/ Vue.extend({ +export const BListGroup = /*#__PURE__*/ defineComponent({ name: NAME_LIST_GROUP, functional: true, props, diff --git a/src/components/media/media-aside.js b/src/components/media/media-aside.js index d14c39f6760..f69b445ee57 100644 --- a/src/components/media/media-aside.js +++ b/src/components/media/media-aside.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_MEDIA_ASIDE } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -17,7 +17,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BMediaAside = /*#__PURE__*/ Vue.extend({ +export const BMediaAside = /*#__PURE__*/ defineComponent({ name: NAME_MEDIA_ASIDE, functional: true, props, diff --git a/src/components/media/media-body.js b/src/components/media/media-body.js index 5695b29884f..514ad57a7e4 100644 --- a/src/components/media/media-body.js +++ b/src/components/media/media-body.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_MEDIA_BODY } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -15,7 +15,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BMediaBody = /*#__PURE__*/ Vue.extend({ +export const BMediaBody = /*#__PURE__*/ defineComponent({ name: NAME_MEDIA_BODY, functional: true, props, diff --git a/src/components/media/media.js b/src/components/media/media.js index 0f1be59fbc9..bcc51aab9d2 100644 --- a/src/components/media/media.js +++ b/src/components/media/media.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_MEDIA } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { SLOT_NAME_ASIDE, SLOT_NAME_DEFAULT } from '../../constants/slots' @@ -22,7 +22,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BMedia = /*#__PURE__*/ Vue.extend({ +export const BMedia = /*#__PURE__*/ defineComponent({ name: NAME_MEDIA, compatConfig: { MODE: 3, diff --git a/src/components/modal/helpers/bv-modal.js b/src/components/modal/helpers/bv-modal.js index 4df7b759621..c5bd92618ba 100644 --- a/src/components/modal/helpers/bv-modal.js +++ b/src/components/modal/helpers/bv-modal.js @@ -26,6 +26,7 @@ import { warn, warnNotClient, warnNoPromiseSupport } from '../../../utils/warn' import { createNewChildComponent } from '../../../utils/create-new-child-component' import { getEventRoot } from '../../../utils/get-event-root' import { BModal, props as modalProps } from '../modal' +import { defineComponent } from '../../../vue' // --- Constants --- @@ -69,7 +70,7 @@ const plugin = Vue => { // Create a private sub-component that extends BModal // which self-destructs after hidden // @vue/component - const BMsgBox = Vue.extend({ + const BMsgBox = defineComponent({ name: NAME_MSG_BOX, compatConfig: { MODE: 3, diff --git a/src/components/modal/helpers/modal-manager.js b/src/components/modal/helpers/modal-manager.js index af4e23a9fa0..45b0efab396 100644 --- a/src/components/modal/helpers/modal-manager.js +++ b/src/components/modal/helpers/modal-manager.js @@ -3,7 +3,7 @@ * Handles controlling modal stacking zIndexes and body adjustments/classes */ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { IS_BROWSER } from '../../../constants/env' import { addClass, @@ -35,7 +35,7 @@ const SELECTOR_NAVBAR_TOGGLER = '.navbar-toggler' // --- Main component --- // @vue/component -const ModalManager = /*#__PURE__*/ Vue.extend({ +const ModalManager = /*#__PURE__*/ defineComponent({ data() { return { modals: [], diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js index 4d19bbe4b18..d2894a457fb 100644 --- a/src/components/modal/modal.js +++ b/src/components/modal/modal.js @@ -1,4 +1,4 @@ -import { COMPONENT_UID_KEY, Vue } from '../../vue' +import { COMPONENT_UID_KEY, defineComponent } from '../../vue' import { NAME_MODAL } from '../../constants/components' import { IS_BROWSER } from '../../constants/env' import { @@ -176,7 +176,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BModal = /*#__PURE__*/ Vue.extend({ +export const BModal = /*#__PURE__*/ defineComponent({ name: NAME_MODAL, compatConfig: { MODE: 3, diff --git a/src/components/nav/nav-form.js b/src/components/nav/nav-form.js index 2a95547019f..565a0b8f1a0 100644 --- a/src/components/nav/nav-form.js +++ b/src/components/nav/nav-form.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_NAV_FORM } from '../../constants/components' import { PROP_TYPE_ARRAY_OBJECT_STRING } from '../../constants/props' import { omit, sortKeys } from '../../utils/object' @@ -20,7 +20,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BNavForm = /*#__PURE__*/ Vue.extend({ +export const BNavForm = /*#__PURE__*/ defineComponent({ name: NAME_NAV_FORM, functional: true, props, diff --git a/src/components/nav/nav-item-dropdown.js b/src/components/nav/nav-item-dropdown.js index 2de02dadc54..4d44b849ab8 100644 --- a/src/components/nav/nav-item-dropdown.js +++ b/src/components/nav/nav-item-dropdown.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_NAV_ITEM_DROPDOWN } from '../../constants/components' import { SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_DEFAULT, SLOT_NAME_TEXT } from '../../constants/slots' import { htmlOrText } from '../../utils/html' @@ -32,7 +32,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BNavItemDropdown = /*#__PURE__*/ Vue.extend({ +export const BNavItemDropdown = /*#__PURE__*/ defineComponent({ name: NAME_NAV_ITEM_DROPDOWN, mixins: [idMixin, dropdownMixin, normalizeSlotMixin], props, diff --git a/src/components/nav/nav-item.js b/src/components/nav/nav-item.js index c634f9c556b..64c08a761e7 100644 --- a/src/components/nav/nav-item.js +++ b/src/components/nav/nav-item.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_NAV_ITEM } from '../../constants/components' import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_OBJECT } from '../../constants/props' import { omit, sortKeys } from '../../utils/object' @@ -21,7 +21,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BNavItem = /*#__PURE__*/ Vue.extend({ +export const BNavItem = /*#__PURE__*/ defineComponent({ name: NAME_NAV_ITEM, functional: true, props, diff --git a/src/components/nav/nav-text.js b/src/components/nav/nav-text.js index 98ad5f29f6a..34eedcba770 100644 --- a/src/components/nav/nav-text.js +++ b/src/components/nav/nav-text.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_NAV_TEXT } from '../../constants/components' // --- Props --- @@ -8,7 +8,7 @@ export const props = {} // --- Main component --- // @vue/component -export const BNavText = /*#__PURE__*/ Vue.extend({ +export const BNavText = /*#__PURE__*/ defineComponent({ name: NAME_NAV_TEXT, functional: true, props, diff --git a/src/components/nav/nav.js b/src/components/nav/nav.js index 195ac940a5f..5c541020ea2 100644 --- a/src/components/nav/nav.js +++ b/src/components/nav/nav.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_NAV } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -31,7 +31,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BNav = /*#__PURE__*/ Vue.extend({ +export const BNav = /*#__PURE__*/ defineComponent({ name: NAME_NAV, functional: true, props, diff --git a/src/components/navbar/navbar-brand.js b/src/components/navbar/navbar-brand.js index 65f0387c4e5..44335adae85 100644 --- a/src/components/navbar/navbar-brand.js +++ b/src/components/navbar/navbar-brand.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_NAVBAR_BRAND } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { omit, sortKeys } from '../../utils/object' @@ -22,7 +22,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BNavbarBrand = /*#__PURE__*/ Vue.extend({ +export const BNavbarBrand = /*#__PURE__*/ defineComponent({ name: NAME_NAVBAR_BRAND, functional: true, props, diff --git a/src/components/navbar/navbar-nav.js b/src/components/navbar/navbar-nav.js index 19684ee8a53..ec6a172cb2b 100644 --- a/src/components/navbar/navbar-nav.js +++ b/src/components/navbar/navbar-nav.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_NAVBAR_NAV } from '../../constants/components' import { pick } from '../../utils/object' import { makePropsConfigurable } from '../../utils/props' @@ -21,7 +21,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BNavbarNav = /*#__PURE__*/ Vue.extend({ +export const BNavbarNav = /*#__PURE__*/ defineComponent({ name: NAME_NAVBAR_NAV, functional: true, props, diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js index 840c80e7a3a..c085ae231b0 100644 --- a/src/components/navbar/navbar-toggle.js +++ b/src/components/navbar/navbar-toggle.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_COLLAPSE, NAME_NAVBAR_TOGGLE } from '../../constants/components' import { EVENT_NAME_CLICK } from '../../constants/events' import { PROP_TYPE_ARRAY_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' @@ -30,7 +30,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BNavbarToggle = /*#__PURE__*/ Vue.extend({ +export const BNavbarToggle = /*#__PURE__*/ defineComponent({ name: NAME_NAVBAR_TOGGLE, compatConfig: { MODE: 3, diff --git a/src/components/navbar/navbar.js b/src/components/navbar/navbar.js index 0c6d7e1afc3..a7134dd5ded 100644 --- a/src/components/navbar/navbar.js +++ b/src/components/navbar/navbar.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_NAVBAR } from '../../constants/components' import { PROP_TYPE_BOOLEAN, @@ -29,7 +29,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BNavbar = /*#__PURE__*/ Vue.extend({ +export const BNavbar = /*#__PURE__*/ defineComponent({ name: NAME_NAVBAR, mixins: [normalizeSlotMixin], provide() { diff --git a/src/components/overlay/overlay.js b/src/components/overlay/overlay.js index 99e56568450..054a38b47a9 100644 --- a/src/components/overlay/overlay.js +++ b/src/components/overlay/overlay.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_OVERLAY } from '../../constants/components' import { EVENT_NAME_CLICK, EVENT_NAME_HIDDEN, EVENT_NAME_SHOWN } from '../../constants/events' import { @@ -52,7 +52,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BOverlay = /*#__PURE__*/ Vue.extend({ +export const BOverlay = /*#__PURE__*/ defineComponent({ name: NAME_OVERLAY, mixins: [normalizeSlotMixin], props, diff --git a/src/components/pagination-nav/pagination-nav.js b/src/components/pagination-nav/pagination-nav.js index 5ce0f129c4e..e9b5e1698af 100644 --- a/src/components/pagination-nav/pagination-nav.js +++ b/src/components/pagination-nav/pagination-nav.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_PAGINATION_NAV } from '../../constants/components' import { IS_BROWSER } from '../../constants/env' import { EVENT_NAME_CHANGE, EVENT_NAME_PAGE_CLICK } from '../../constants/events' @@ -64,7 +64,7 @@ const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BPaginationNav = /*#__PURE__*/ Vue.extend({ +export const BPaginationNav = /*#__PURE__*/ defineComponent({ name: NAME_PAGINATION_NAV, // The render function is brought in via the pagination mixin mixins: [paginationMixin], diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js index 9bd58c66bd4..ce4062ae0b2 100644 --- a/src/components/pagination/pagination.js +++ b/src/components/pagination/pagination.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_PAGINATION } from '../../constants/components' import { EVENT_NAME_CHANGE, EVENT_NAME_PAGE_CLICK } from '../../constants/events' import { PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props' @@ -39,7 +39,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BPagination = /*#__PURE__*/ Vue.extend({ +export const BPagination = /*#__PURE__*/ defineComponent({ name: NAME_PAGINATION, // The render function is brought in via the `paginationMixin` mixins: [paginationMixin], diff --git a/src/components/popover/helpers/bv-popover-template.js b/src/components/popover/helpers/bv-popover-template.js index 4eca3b1b3ef..e39ee69031b 100644 --- a/src/components/popover/helpers/bv-popover-template.js +++ b/src/components/popover/helpers/bv-popover-template.js @@ -1,10 +1,10 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { NAME_POPOVER_TEMPLATE } from '../../../constants/components' import { isFunction, isUndefinedOrNull } from '../../../utils/inspect' import { BVTooltipTemplate } from '../../tooltip/helpers/bv-tooltip-template' // @vue/component -export const BVPopoverTemplate = /*#__PURE__*/ Vue.extend({ +export const BVPopoverTemplate = /*#__PURE__*/ defineComponent({ name: NAME_POPOVER_TEMPLATE, extends: BVTooltipTemplate, computed: { diff --git a/src/components/popover/helpers/bv-popover.js b/src/components/popover/helpers/bv-popover.js index c96b2f71acc..91f4db114cd 100644 --- a/src/components/popover/helpers/bv-popover.js +++ b/src/components/popover/helpers/bv-popover.js @@ -4,7 +4,7 @@ // Handles trigger events, etc. // Instantiates template on demand -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { NAME_POPOVER_HELPER } from '../../../constants/components' import { BVTooltip } from '../../tooltip/helpers/bv-tooltip' import { BVPopoverTemplate } from './bv-popover-template' diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index f70123e3ab5..0491b302eb0 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_POPOVER } from '../../constants/components' import { EVENT_NAME_CLICK } from '../../constants/events' import { PROP_TYPE_ARRAY_STRING, PROP_TYPE_STRING } from '../../constants/props' @@ -23,7 +23,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BPopover = /*#__PURE__*/ Vue.extend({ +export const BPopover = /*#__PURE__*/ defineComponent({ name: NAME_POPOVER, extends: BTooltip, inheritAttrs: false, diff --git a/src/components/progress/progress-bar.js b/src/components/progress/progress-bar.js index ae8ced02ec2..ab002785cc1 100644 --- a/src/components/progress/progress-bar.js +++ b/src/components/progress/progress-bar.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_PROGRESS_BAR } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props' import { htmlOrText } from '../../utils/html' @@ -30,7 +30,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BProgressBar = /*#__PURE__*/ Vue.extend({ +export const BProgressBar = /*#__PURE__*/ defineComponent({ name: NAME_PROGRESS_BAR, mixins: [normalizeSlotMixin], inject: { diff --git a/src/components/progress/progress.js b/src/components/progress/progress.js index 341b3d6669f..ea910dd836c 100644 --- a/src/components/progress/progress.js +++ b/src/components/progress/progress.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_PROGRESS } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props' import { omit, sortKeys } from '../../utils/object' @@ -27,7 +27,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BProgress = /*#__PURE__*/ Vue.extend({ +export const BProgress = /*#__PURE__*/ defineComponent({ name: NAME_PROGRESS, mixins: [normalizeSlotMixin], provide() { diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js index 88ffcf77ea6..7188b9c43cf 100644 --- a/src/components/sidebar/sidebar.js +++ b/src/components/sidebar/sidebar.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_COLLAPSE, NAME_SIDEBAR } from '../../constants/components' import { IS_BROWSER } from '../../constants/env' import { EVENT_NAME_CHANGE, EVENT_NAME_HIDDEN, EVENT_NAME_SHOWN } from '../../constants/events' @@ -201,7 +201,7 @@ const renderBackdrop = (h, ctx) => { // --- Main component --- // @vue/component -export const BSidebar = /*#__PURE__*/ Vue.extend({ +export const BSidebar = /*#__PURE__*/ defineComponent({ name: NAME_SIDEBAR, compatConfig: { MODE: 3, diff --git a/src/components/skeleton/skeleton-icon.js b/src/components/skeleton/skeleton-icon.js index a0234706988..925566f9998 100644 --- a/src/components/skeleton/skeleton-icon.js +++ b/src/components/skeleton/skeleton-icon.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_SKELETON_ICON } from '../../constants/components' import { PROP_TYPE_OBJECT, PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -18,7 +18,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BSkeletonIcon = /*#__PURE__*/ Vue.extend({ +export const BSkeletonIcon = /*#__PURE__*/ defineComponent({ name: NAME_SKELETON_ICON, functional: true, props, diff --git a/src/components/skeleton/skeleton-img.js b/src/components/skeleton/skeleton-img.js index 3b6d6dd1363..d6b2b37ab8f 100644 --- a/src/components/skeleton/skeleton-img.js +++ b/src/components/skeleton/skeleton-img.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_SKELETON_IMG } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -23,7 +23,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BSkeletonImg = /*#__PURE__*/ Vue.extend({ +export const BSkeletonImg = /*#__PURE__*/ defineComponent({ name: NAME_SKELETON_IMG, functional: true, props, diff --git a/src/components/skeleton/skeleton-table.js b/src/components/skeleton/skeleton-table.js index 29251228fb4..9b523f48f2e 100644 --- a/src/components/skeleton/skeleton-table.js +++ b/src/components/skeleton/skeleton-table.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_SKELETON_TABLE } from '../../constants/components' import { PROP_TYPE_BOOLEAN, @@ -32,7 +32,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BSkeletonTable = /*#__PURE__*/ Vue.extend({ +export const BSkeletonTable = /*#__PURE__*/ defineComponent({ name: NAME_SKELETON_TABLE, functional: true, props, diff --git a/src/components/skeleton/skeleton-wrapper.js b/src/components/skeleton/skeleton-wrapper.js index 126dd912086..a30cfea7e71 100644 --- a/src/components/skeleton/skeleton-wrapper.js +++ b/src/components/skeleton/skeleton-wrapper.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_SKELETON_WRAPPER } from '../../constants/components' import { PROP_TYPE_BOOLEAN } from '../../constants/props' import { SLOT_NAME_DEFAULT, SLOT_NAME_LOADING } from '../../constants/slots' @@ -17,7 +17,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BSkeletonWrapper = /*#__PURE__*/ Vue.extend({ +export const BSkeletonWrapper = /*#__PURE__*/ defineComponent({ name: NAME_SKELETON_WRAPPER, compatConfig: { MODE: 3, diff --git a/src/components/skeleton/skeleton.js b/src/components/skeleton/skeleton.js index 42fd56ee25e..49b4474adcb 100644 --- a/src/components/skeleton/skeleton.js +++ b/src/components/skeleton/skeleton.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_SKELETON } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -20,7 +20,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BSkeleton = /*#__PURE__*/ Vue.extend({ +export const BSkeleton = /*#__PURE__*/ defineComponent({ name: NAME_SKELETON, functional: true, props, diff --git a/src/components/spinner/spinner.js b/src/components/spinner/spinner.js index 59cb64826e1..3bfb0ef5138 100644 --- a/src/components/spinner/spinner.js +++ b/src/components/spinner/spinner.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_SPINNER } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props' import { SLOT_NAME_LABEL } from '../../constants/slots' @@ -22,7 +22,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BSpinner = /*#__PURE__*/ Vue.extend({ +export const BSpinner = /*#__PURE__*/ defineComponent({ name: NAME_SPINNER, compatConfig: { MODE: 3, diff --git a/src/components/table/helpers/mixin-bottom-row.js b/src/components/table/helpers/mixin-bottom-row.js index 0a425bb010b..2860fd0a77e 100644 --- a/src/components/table/helpers/mixin-bottom-row.js +++ b/src/components/table/helpers/mixin-bottom-row.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { SLOT_NAME_BOTTOM_ROW } from '../../../constants/slots' import { isFunction } from '../../../utils/inspect' import { BTr } from '../tr' @@ -10,7 +10,7 @@ export const props = {} // --- Mixin --- // @vue/component -export const bottomRowMixin = Vue.extend({ +export const bottomRowMixin = defineComponent({ props, methods: { renderBottomRow() { diff --git a/src/components/table/helpers/mixin-busy.js b/src/components/table/helpers/mixin-busy.js index 59781330b89..cc2024f4050 100644 --- a/src/components/table/helpers/mixin-busy.js +++ b/src/components/table/helpers/mixin-busy.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { MODEL_EVENT_NAME_PREFIX } from '../../../constants/events' import { PROP_TYPE_BOOLEAN } from '../../../constants/props' import { SLOT_NAME_TABLE_BUSY } from '../../../constants/slots' @@ -22,7 +22,7 @@ export const props = { // --- Mixin --- // @vue/component -export const busyMixin = Vue.extend({ +export const busyMixin = defineComponent({ props, data() { return { diff --git a/src/components/table/helpers/mixin-caption.js b/src/components/table/helpers/mixin-caption.js index 377a65deb5b..adaa31fbdbb 100644 --- a/src/components/table/helpers/mixin-caption.js +++ b/src/components/table/helpers/mixin-caption.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { PROP_TYPE_STRING } from '../../../constants/props' import { SLOT_NAME_TABLE_CAPTION } from '../../../constants/slots' import { htmlOrText } from '../../../utils/html' @@ -16,7 +16,7 @@ export const props = { // --- Mixin --- // @vue/component -export const captionMixin = Vue.extend({ +export const captionMixin = defineComponent({ props, computed: { captionId() { diff --git a/src/components/table/helpers/mixin-colgroup.js b/src/components/table/helpers/mixin-colgroup.js index 1d2cf988bb1..22740327f52 100644 --- a/src/components/table/helpers/mixin-colgroup.js +++ b/src/components/table/helpers/mixin-colgroup.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { SLOT_NAME_TABLE_COLGROUP } from '../../../constants/slots' // --- Props --- @@ -8,7 +8,7 @@ export const props = {} // --- Mixin --- // @vue/component -export const colgroupMixin = Vue.extend({ +export const colgroupMixin = defineComponent({ methods: { renderColgroup() { const { computedFields: fields } = this diff --git a/src/components/table/helpers/mixin-empty.js b/src/components/table/helpers/mixin-empty.js index de4fad4ad66..3a900ad925a 100644 --- a/src/components/table/helpers/mixin-empty.js +++ b/src/components/table/helpers/mixin-empty.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../../constants/props' import { SLOT_NAME_EMPTY, @@ -25,7 +25,7 @@ export const props = { // --- Mixin --- // @vue/component -export const emptyMixin = Vue.extend({ +export const emptyMixin = defineComponent({ props, methods: { renderEmpty() { diff --git a/src/components/table/helpers/mixin-filtering.js b/src/components/table/helpers/mixin-filtering.js index 0da65685536..83189c1d7b1 100644 --- a/src/components/table/helpers/mixin-filtering.js +++ b/src/components/table/helpers/mixin-filtering.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { NAME_TABLE } from '../../../constants/components' import { EVENT_NAME_FILTERED } from '../../../constants/events' import { @@ -40,7 +40,7 @@ export const props = { // --- Mixin --- // @vue/component -export const filteringMixin = Vue.extend({ +export const filteringMixin = defineComponent({ compatConfig: { MODE: 3, OPTIONS_BEFORE_DESTROY: 'suppress-warning' diff --git a/src/components/table/helpers/mixin-items.js b/src/components/table/helpers/mixin-items.js index f1f1045b810..b14ccb99d90 100644 --- a/src/components/table/helpers/mixin-items.js +++ b/src/components/table/helpers/mixin-items.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { EVENT_NAME_CONTEXT_CHANGED } from '../../../constants/events' import { PROP_TYPE_ARRAY, PROP_TYPE_STRING } from '../../../constants/props' import { useParentMixin } from '../../../mixins/use-parent' @@ -44,7 +44,7 @@ export const props = sortKeys({ // --- Mixin --- // @vue/component -export const itemsMixin = Vue.extend({ +export const itemsMixin = defineComponent({ mixins: [modelMixin, useParentMixin], props, data() { diff --git a/src/components/table/helpers/mixin-pagination.js b/src/components/table/helpers/mixin-pagination.js index e775871feff..1867d820512 100644 --- a/src/components/table/helpers/mixin-pagination.js +++ b/src/components/table/helpers/mixin-pagination.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { PROP_TYPE_NUMBER_STRING } from '../../../constants/props' import { mathMax } from '../../../utils/math' import { toInteger } from '../../../utils/number' @@ -15,7 +15,7 @@ export const props = { // --- Mixin --- // @vue/component -export const paginationMixin = Vue.extend({ +export const paginationMixin = defineComponent({ props, computed: { localPaging() { diff --git a/src/components/table/helpers/mixin-provider.js b/src/components/table/helpers/mixin-provider.js index 4e14f05afe8..e718a6e4550 100644 --- a/src/components/table/helpers/mixin-provider.js +++ b/src/components/table/helpers/mixin-provider.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { NAME_TABLE } from '../../../constants/components' import { EVENT_NAME_REFRESH, EVENT_NAME_REFRESHED } from '../../../constants/events' import { @@ -36,7 +36,7 @@ export const props = { // --- Mixin --- // @vue/component -export const providerMixin = Vue.extend({ +export const providerMixin = defineComponent({ compatConfig: { INSTANCE_LISTENERS: 'suppress-warning' }, diff --git a/src/components/table/helpers/mixin-selectable.js b/src/components/table/helpers/mixin-selectable.js index 5629caf4fcc..105df393ce0 100644 --- a/src/components/table/helpers/mixin-selectable.js +++ b/src/components/table/helpers/mixin-selectable.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { EVENT_NAME_CONTEXT_CHANGED, EVENT_NAME_FILTERED, @@ -36,7 +36,7 @@ export const props = { // --- Mixin --- // @vue/component -export const selectableMixin = Vue.extend({ +export const selectableMixin = defineComponent({ props, data() { return { diff --git a/src/components/table/helpers/mixin-sorting.js b/src/components/table/helpers/mixin-sorting.js index 44fda1f2e45..925b64f0187 100644 --- a/src/components/table/helpers/mixin-sorting.js +++ b/src/components/table/helpers/mixin-sorting.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { EVENT_NAME_HEAD_CLICKED, EVENT_NAME_SORT_CHANGED, @@ -70,7 +70,7 @@ export const props = { // --- Mixin --- // @vue/component -export const sortingMixin = Vue.extend({ +export const sortingMixin = defineComponent({ compatConfig: { INSTANCE_LISTENERS: 'suppress-warning' }, diff --git a/src/components/table/helpers/mixin-stacked.js b/src/components/table/helpers/mixin-stacked.js index ab5c4d69757..bc3d261daa4 100644 --- a/src/components/table/helpers/mixin-stacked.js +++ b/src/components/table/helpers/mixin-stacked.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { PROP_TYPE_BOOLEAN_STRING } from '../../../constants/props' import { makeProp } from '../../../utils/props' @@ -11,7 +11,7 @@ export const props = { // --- Mixin --- // @vue/component -export const stackedMixin = Vue.extend({ +export const stackedMixin = defineComponent({ props, computed: { isStacked() { diff --git a/src/components/table/helpers/mixin-table-renderer.js b/src/components/table/helpers/mixin-table-renderer.js index aee24480a69..bb7576e989f 100644 --- a/src/components/table/helpers/mixin-table-renderer.js +++ b/src/components/table/helpers/mixin-table-renderer.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_BOOLEAN, @@ -38,7 +38,7 @@ export const props = { // --- Mixin --- // @vue/component -export const tableRendererMixin = Vue.extend({ +export const tableRendererMixin = defineComponent({ mixins: [attrsMixin], provide() { return { diff --git a/src/components/table/helpers/mixin-tbody-row.js b/src/components/table/helpers/mixin-tbody-row.js index d8a44b31fb0..1579d51f7e7 100644 --- a/src/components/table/helpers/mixin-tbody-row.js +++ b/src/components/table/helpers/mixin-tbody-row.js @@ -1,4 +1,4 @@ -import { Vue, isVue3 } from '../../../vue' +import { defineComponent, isVue3 } from '../../../vue' import { EVENT_NAME_ROW_CLICKED, EVENT_NAME_ROW_HOVERED, @@ -32,7 +32,7 @@ export const props = { // --- Mixin --- // @vue/component -export const tbodyRowMixin = Vue.extend({ +export const tbodyRowMixin = defineComponent({ compatConfig: { MODE: 3, INSTANCE_LISTENERS: 'suppress-warning' }, mixins: [useParentMixin], props, diff --git a/src/components/table/helpers/mixin-tbody.js b/src/components/table/helpers/mixin-tbody.js index e21727acee2..3903b90e4d4 100644 --- a/src/components/table/helpers/mixin-tbody.js +++ b/src/components/table/helpers/mixin-tbody.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { EVENT_NAME_ROW_CLICKED, EVENT_NAME_ROW_CONTEXTMENU, @@ -40,7 +40,7 @@ export const props = sortKeys({ // --- Mixin --- // @vue/component -export const tbodyMixin = Vue.extend({ +export const tbodyMixin = defineComponent({ compatConfig: { MODE: 3, V_FOR_REF: 'suppress-warning', diff --git a/src/components/table/helpers/mixin-tfoot.js b/src/components/table/helpers/mixin-tfoot.js index 222d524b3ec..47fc6ce091a 100644 --- a/src/components/table/helpers/mixin-tfoot.js +++ b/src/components/table/helpers/mixin-tfoot.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_BOOLEAN, @@ -24,7 +24,7 @@ export const props = { // --- Mixin --- // @vue/component -export const tfootMixin = Vue.extend({ +export const tfootMixin = defineComponent({ props, methods: { renderTFootCustom() { diff --git a/src/components/table/helpers/mixin-thead.js b/src/components/table/helpers/mixin-thead.js index c3321f97ff8..de532bae010 100644 --- a/src/components/table/helpers/mixin-thead.js +++ b/src/components/table/helpers/mixin-thead.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { EVENT_NAME_HEAD_CLICKED } from '../../../constants/events' import { CODE_ENTER, CODE_SPACE } from '../../../constants/key-codes' import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../../constants/props' @@ -38,7 +38,7 @@ export const props = { // --- Mixin --- // @vue/component -export const theadMixin = Vue.extend({ +export const theadMixin = defineComponent({ props, methods: { fieldClasses(field) { diff --git a/src/components/table/helpers/mixin-top-row.js b/src/components/table/helpers/mixin-top-row.js index ee27d18de4a..ddce5ad9ecd 100644 --- a/src/components/table/helpers/mixin-top-row.js +++ b/src/components/table/helpers/mixin-top-row.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { SLOT_NAME_TOP_ROW } from '../../../constants/slots' import { isFunction } from '../../../utils/inspect' import { BTr } from '../tr' @@ -10,7 +10,7 @@ export const props = {} // --- Mixin --- // @vue/component -export const topRowMixin = Vue.extend({ +export const topRowMixin = defineComponent({ methods: { renderTopRow() { const { computedFields: fields, stacked, tbodyTrClass, tbodyTrAttr } = this diff --git a/src/components/table/table-lite.js b/src/components/table/table-lite.js index 4302ec07d5e..6f72b89996f 100644 --- a/src/components/table/table-lite.js +++ b/src/components/table/table-lite.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_TABLE_LITE } from '../../constants/components' import { sortKeys } from '../../utils/object' import { makePropsConfigurable } from '../../utils/props' @@ -35,7 +35,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BTableLite = /*#__PURE__*/ Vue.extend({ +export const BTableLite = /*#__PURE__*/ defineComponent({ name: NAME_TABLE_LITE, // Order of mixins is important! // They are merged from first to last, followed by this component diff --git a/src/components/table/table-simple.js b/src/components/table/table-simple.js index 1852d0bb074..38bcb9f22da 100644 --- a/src/components/table/table-simple.js +++ b/src/components/table/table-simple.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_TABLE_SIMPLE } from '../../constants/components' import { sortKeys } from '../../utils/object' import { makePropsConfigurable } from '../../utils/props' @@ -23,7 +23,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BTableSimple = /*#__PURE__*/ Vue.extend({ +export const BTableSimple = /*#__PURE__*/ defineComponent({ name: NAME_TABLE_SIMPLE, // Order of mixins is important! // They are merged from first to last, followed by this component diff --git a/src/components/table/table.js b/src/components/table/table.js index 03bea65798d..35ce0f4d027 100644 --- a/src/components/table/table.js +++ b/src/components/table/table.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_TABLE } from '../../constants/components' import { sortKeys } from '../../utils/object' import { makePropsConfigurable } from '../../utils/props' @@ -53,7 +53,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BTable = /*#__PURE__*/ Vue.extend({ +export const BTable = /*#__PURE__*/ defineComponent({ name: NAME_TABLE, // Order of mixins is important! // They are merged from first to last, followed by this component diff --git a/src/components/table/tbody.js b/src/components/table/tbody.js index f42fc613064..22a60d4e079 100644 --- a/src/components/table/tbody.js +++ b/src/components/table/tbody.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_TBODY } from '../../constants/components' import { PROP_TYPE_OBJECT } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -22,7 +22,7 @@ export const props = makePropsConfigurable( // In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit // to the child elements, so this can be converted to a functional component // @vue/component -export const BTbody = /*#__PURE__*/ Vue.extend({ +export const BTbody = /*#__PURE__*/ defineComponent({ name: NAME_TBODY, mixins: [attrsMixin, listenersMixin, normalizeSlotMixin], provide() { diff --git a/src/components/table/td.js b/src/components/table/td.js index 26c8047b5f2..7546f5a1487 100644 --- a/src/components/table/td.js +++ b/src/components/table/td.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_TABLE_CELL } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props' import { isTag } from '../../utils/dom' @@ -40,7 +40,7 @@ export const props = makePropsConfigurable( // In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit // to the child elements, so this can be converted to a functional component // @vue/component -export const BTd = /*#__PURE__*/ Vue.extend({ +export const BTd = /*#__PURE__*/ defineComponent({ name: NAME_TABLE_CELL, // Mixin order is important! mixins: [attrsMixin, listenersMixin, normalizeSlotMixin], diff --git a/src/components/table/tfoot.js b/src/components/table/tfoot.js index 669f2474a6f..1ac5c9cd31f 100644 --- a/src/components/table/tfoot.js +++ b/src/components/table/tfoot.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_TFOOT } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -22,7 +22,7 @@ export const props = makePropsConfigurable( // In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit // to the child elements, so this can be converted to a functional component // @vue/component -export const BTfoot = /*#__PURE__*/ Vue.extend({ +export const BTfoot = /*#__PURE__*/ defineComponent({ name: NAME_TFOOT, mixins: [attrsMixin, listenersMixin, normalizeSlotMixin], provide() { diff --git a/src/components/table/th.js b/src/components/table/th.js index d67a799a2e7..a842bf73420 100644 --- a/src/components/table/th.js +++ b/src/components/table/th.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_TH } from '../../constants/components' import { makePropsConfigurable } from '../../utils/props' import { BTd, props as BTdProps } from './td' @@ -13,7 +13,7 @@ export const props = makePropsConfigurable(BTdProps, NAME_TH) // In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit // to the child elements, so this can be converted to a functional component // @vue/component -export const BTh = /*#__PURE__*/ Vue.extend({ +export const BTh = /*#__PURE__*/ defineComponent({ name: NAME_TH, extends: BTd, props, diff --git a/src/components/table/thead.js b/src/components/table/thead.js index 3ffd55fa308..250f3a16930 100644 --- a/src/components/table/thead.js +++ b/src/components/table/thead.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_THEAD } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -23,7 +23,7 @@ export const props = makePropsConfigurable( // In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit // to the child elements, so this can be converted to a functional component // @vue/component -export const BThead = /*#__PURE__*/ Vue.extend({ +export const BThead = /*#__PURE__*/ defineComponent({ name: NAME_THEAD, mixins: [attrsMixin, listenersMixin, normalizeSlotMixin], provide() { diff --git a/src/components/table/tr.js b/src/components/table/tr.js index e9f0c61f7da..28626eb77a9 100644 --- a/src/components/table/tr.js +++ b/src/components/table/tr.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_TR } from '../../constants/components' import { PROP_TYPE_STRING } from '../../constants/props' import { makeProp, makePropsConfigurable } from '../../utils/props' @@ -26,7 +26,7 @@ export const props = makePropsConfigurable( // In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit // to the child elements, so this can be converted to a functional component // @vue/component -export const BTr = /*#__PURE__*/ Vue.extend({ +export const BTr = /*#__PURE__*/ defineComponent({ name: NAME_TR, mixins: [attrsMixin, listenersMixin, normalizeSlotMixin], provide() { diff --git a/src/components/tabs/tab.js b/src/components/tabs/tab.js index be649a7bde0..e1bc8b3958b 100644 --- a/src/components/tabs/tab.js +++ b/src/components/tabs/tab.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_TAB } from '../../constants/components' import { MODEL_EVENT_NAME_PREFIX } from '../../constants/events' import { @@ -43,7 +43,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BTab = /*#__PURE__*/ Vue.extend({ +export const BTab = /*#__PURE__*/ defineComponent({ name: NAME_TAB, compatConfig: { MODE: 3, diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index a75b979cdf3..36253357ee7 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -1,4 +1,4 @@ -import { COMPONENT_UID_KEY, Vue } from '../../vue' +import { COMPONENT_UID_KEY, defineComponent } from '../../vue' import { NAME_TABS, NAME_TAB_BUTTON_HELPER } from '../../constants/components' import { IS_BROWSER } from '../../constants/env' import { @@ -67,7 +67,7 @@ const notDisabled = tab => !tab.disabled // --- Helper components --- // @vue/component -const BVTabButton = /*#__PURE__*/ Vue.extend({ +const BVTabButton = /*#__PURE__*/ defineComponent({ name: NAME_TAB_BUTTON_HELPER, inject: { getBvTabs: { @@ -218,7 +218,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BTabs = /*#__PURE__*/ Vue.extend({ +export const BTabs = /*#__PURE__*/ defineComponent({ compatConfig: { MODE: 3, V_FOR_REF: 'suppress-warning', diff --git a/src/components/time/time.js b/src/components/time/time.js index 7676ce16dfc..6e5d4833087 100644 --- a/src/components/time/time.js +++ b/src/components/time/time.js @@ -1,5 +1,5 @@ // BTime control (not form input control) -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_TIME } from '../../constants/components' import { EVENT_NAME_CONTEXT } from '../../constants/events' import { CODE_LEFT, CODE_RIGHT } from '../../constants/key-codes' @@ -107,7 +107,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BTime = /*#__PURE__*/ Vue.extend({ +export const BTime = /*#__PURE__*/ defineComponent({ compatConfig: { MODE: 3, V_FOR_REF: 'suppress-warning', diff --git a/src/components/toast/helpers/bv-toast.js b/src/components/toast/helpers/bv-toast.js index e405db3fe43..3e1a6b88023 100644 --- a/src/components/toast/helpers/bv-toast.js +++ b/src/components/toast/helpers/bv-toast.js @@ -30,6 +30,7 @@ import { warn, warnNotClient } from '../../../utils/warn' import { createNewChildComponent } from '../../../utils/create-new-child-component' import { getEventRoot } from '../../../utils/get-event-root' import { BToast, props as toastProps } from '../toast' +import { defineComponent } from '../../../vue' // --- Constants --- @@ -65,7 +66,7 @@ const plugin = Vue => { // Create a private sub-component constructor that // extends BToast and self-destructs after hidden // @vue/component - const BVToastPop = Vue.extend({ + const BVToastPop = defineComponent({ name: NAME_TOAST_POP, compatConfig: { MODE: 3, diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js index 2f6db8d9ff2..fd772e404ed 100644 --- a/src/components/toast/toast.js +++ b/src/components/toast/toast.js @@ -1,5 +1,5 @@ import { Portal, Wormhole } from 'portal-vue' -import { COMPONENT_UID_KEY, Vue } from '../../vue' +import { COMPONENT_UID_KEY, defineComponent } from '../../vue' import { NAME_TOAST, NAME_TOASTER } from '../../constants/components' import { EVENT_NAME_CHANGE, @@ -86,7 +86,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BToast = /*#__PURE__*/ Vue.extend({ +export const BToast = /*#__PURE__*/ defineComponent({ name: NAME_TOAST, compatConfig: { MODE: 3, diff --git a/src/components/toast/toaster.js b/src/components/toast/toaster.js index 5590dbfa8bd..64851edd5e9 100644 --- a/src/components/toast/toaster.js +++ b/src/components/toast/toaster.js @@ -1,5 +1,5 @@ import { PortalTarget, Wormhole } from 'portal-vue' -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_TOASTER } from '../../constants/components' import { EVENT_NAME_DESTROYED } from '../../constants/events' import { PROP_TYPE_STRING } from '../../constants/props' @@ -13,7 +13,7 @@ import { normalizeSlotMixin } from '../../mixins/normalize-slot' // --- Helper components --- // @vue/component -export const DefaultTransition = /*#__PURE__*/ Vue.extend({ +export const DefaultTransition = /*#__PURE__*/ defineComponent({ compatConfig: { MODE: 3, OPTIONS_BEFORE_DESTROY: 'suppress-warning' @@ -66,7 +66,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BToaster = /*#__PURE__*/ Vue.extend({ +export const BToaster = /*#__PURE__*/ defineComponent({ name: NAME_TOASTER, mixins: [listenOnRootMixin], props, diff --git a/src/components/tooltip/helpers/bv-popper.js b/src/components/tooltip/helpers/bv-popper.js index afe73e878fc..45a2ce8691e 100644 --- a/src/components/tooltip/helpers/bv-popper.js +++ b/src/components/tooltip/helpers/bv-popper.js @@ -6,7 +6,7 @@ // import Popper from 'popper.js' -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { NAME_POPPER } from '../../../constants/components' import { EVENT_NAME_HIDDEN, @@ -82,7 +82,7 @@ export const props = { // --- Main component --- // @vue/component -export const BVPopper = /*#__PURE__*/ Vue.extend({ +export const BVPopper = /*#__PURE__*/ defineComponent({ name: NAME_POPPER, compatConfig: { MODE: 3, diff --git a/src/components/tooltip/helpers/bv-tooltip-template.js b/src/components/tooltip/helpers/bv-tooltip-template.js index 22813b7e3d2..20339417875 100644 --- a/src/components/tooltip/helpers/bv-tooltip-template.js +++ b/src/components/tooltip/helpers/bv-tooltip-template.js @@ -1,4 +1,4 @@ -import { Vue } from '../../../vue' +import { defineComponent } from '../../../vue' import { NAME_TOOLTIP_TEMPLATE } from '../../../constants/components' import { EVENT_NAME_FOCUSIN, @@ -24,7 +24,7 @@ export const props = { // --- Main component --- // @vue/component -export const BVTooltipTemplate = /*#__PURE__*/ Vue.extend({ +export const BVTooltipTemplate = /*#__PURE__*/ defineComponent({ name: NAME_TOOLTIP_TEMPLATE, extends: BVPopper, mixins: [scopedStyleMixin], diff --git a/src/components/tooltip/helpers/bv-tooltip.js b/src/components/tooltip/helpers/bv-tooltip.js index c621bc1db5a..e3ad960c3a0 100644 --- a/src/components/tooltip/helpers/bv-tooltip.js +++ b/src/components/tooltip/helpers/bv-tooltip.js @@ -3,7 +3,7 @@ // Handles trigger events, etc. // Instantiates template on demand -import { COMPONENT_UID_KEY, Vue } from '../../../vue' +import { COMPONENT_UID_KEY, defineComponent } from '../../../vue' import { NAME_MODAL, NAME_TOOLTIP_HELPER } from '../../../constants/components' import { EVENT_NAME_DISABLE, @@ -140,7 +140,7 @@ const templateData = { // --- Main component --- // @vue/component -export const BVTooltip = /*#__PURE__*/ Vue.extend({ +export const BVTooltip = /*#__PURE__*/ defineComponent({ name: NAME_TOOLTIP_HELPER, compatConfig: { MODE: 3, diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js index 5da803e525b..162b9228f9c 100644 --- a/src/components/tooltip/tooltip.js +++ b/src/components/tooltip/tooltip.js @@ -1,4 +1,4 @@ -import { Vue } from '../../vue' +import { defineComponent } from '../../vue' import { NAME_TOOLTIP } from '../../constants/components' import { EVENT_NAME_CLOSE, @@ -83,7 +83,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BTooltip = /*#__PURE__*/ Vue.extend({ +export const BTooltip = /*#__PURE__*/ defineComponent({ compatConfig: { INSTANCE_LISTENERS: 'suppress-warning', OPTIONS_BEFORE_DESTROY: 'suppress-warning' diff --git a/src/components/transition/bv-transition.js b/src/components/transition/bv-transition.js index 006e848bd67..e72d9751b3d 100644 --- a/src/components/transition/bv-transition.js +++ b/src/components/transition/bv-transition.js @@ -4,7 +4,7 @@ // the transition has finished the enter transition // (show and fade classes are only applied during transition) -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_TRANSITION } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_OBJECT, PROP_TYPE_STRING } from '../../constants/props' import { isPlainObject } from '../../utils/inspect' @@ -45,7 +45,7 @@ export const props = { // --- Main component --- // @vue/component -export const BVTransition = /*#__PURE__*/ Vue.extend({ +export const BVTransition = /*#__PURE__*/ defineComponent({ name: NAME_TRANSITION, functional: true, props, diff --git a/src/components/transporter/transporter.js b/src/components/transporter/transporter.js index d2ad323231b..858fa2518fc 100644 --- a/src/components/transporter/transporter.js +++ b/src/components/transporter/transporter.js @@ -1,4 +1,4 @@ -import { Vue, isVue3 } from '../../vue' +import { defineComponent, Vue, isVue3 } from '../../vue' import { NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET } from '../../constants/components' import { IS_BROWSER } from '../../constants/env' import { @@ -31,7 +31,7 @@ import { createNewChildComponent } from '../../utils/create-new-child-component' // Transporter target used by BVTransporter // Supports only a single root element // @vue/component -const BVTransporterTarget = /*#__PURE__*/ Vue.extend({ +const BVTransporterTarget = /*#__PURE__*/ defineComponent({ // As an abstract component, it doesn't appear in the $parent chain of // components, which means the next parent of any component rendered inside // of this one will be the parent from which is was portal'd @@ -79,7 +79,7 @@ export const props = { // --- Main component --- // @vue/component -const BVTransporterVue2 = /*#__PURE__*/ Vue.extend({ +const BVTransporterVue2 = /*#__PURE__*/ defineComponent({ name: NAME_TRANSPORTER, compatConfig: { MODE: 3, @@ -183,7 +183,7 @@ const BVTransporterVue2 = /*#__PURE__*/ Vue.extend({ } }) -const BVTransporterVue3 = /*#__PURE__*/ Vue.extend({ +const BVTransporterVue3 = /*#__PURE__*/ defineComponent({ name: NAME_TRANSPORTER, mixins: [normalizeSlotMixin], props, diff --git a/src/icons/helpers/icon-base.js b/src/icons/helpers/icon-base.js index a33ff8ac32d..287e7310dd7 100644 --- a/src/icons/helpers/icon-base.js +++ b/src/icons/helpers/icon-base.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { NAME_ICON_BASE } from '../../constants/components' import { PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props' import { identity } from '../../utils/identity' @@ -49,7 +49,7 @@ export const props = { // Shared private base component to reduce bundle/runtime size // @vue/component -export const BVIconBase = /*#__PURE__*/ Vue.extend({ +export const BVIconBase = /*#__PURE__*/ defineComponent({ name: NAME_ICON_BASE, functional: true, props, diff --git a/src/icons/helpers/make-icon.js b/src/icons/helpers/make-icon.js index 48c76020b0b..34d5dc087cc 100644 --- a/src/icons/helpers/make-icon.js +++ b/src/icons/helpers/make-icon.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../../vue' +import { defineComponent, mergeData } from '../../vue' import { omit } from '../../utils/object' import { kebabCase, pascalCase, trim } from '../../utils/string' import { BVIconBase, props as BVIconBaseProps } from './icon-base' @@ -21,7 +21,7 @@ export const makeIcon = (name, content) => { const iconTitle = kebabName.replace(/-/g, ' ') const svgContent = trim(content || '') - return /*#__PURE__*/ Vue.extend({ + return /*#__PURE__*/ defineComponent({ name: iconName, functional: true, props: iconProps, diff --git a/src/icons/icon.js b/src/icons/icon.js index 98959fa4781..21267da05dd 100644 --- a/src/icons/icon.js +++ b/src/icons/icon.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../vue' +import { defineComponent, mergeData, Vue } from '../vue' import { NAME_ICON } from '../constants/components' import { PROP_TYPE_STRING } from '../constants/props' import { RX_ICON_PREFIX } from '../constants/regex' @@ -36,7 +36,7 @@ export const props = makePropsConfigurable( // Helper BIcon component // Requires the requested icon component to be installed // @vue/component -export const BIcon = /*#__PURE__*/ Vue.extend({ +export const BIcon = /*#__PURE__*/ defineComponent({ name: NAME_ICON, functional: true, props, diff --git a/src/icons/iconstack.js b/src/icons/iconstack.js index f0411fc74a8..9a376ba22a6 100644 --- a/src/icons/iconstack.js +++ b/src/icons/iconstack.js @@ -1,4 +1,4 @@ -import { Vue, mergeData } from '../vue' +import { defineComponent, mergeData } from '../vue' import { NAME_ICONSTACK } from '../constants/components' import { omit } from '../utils/object' import { makePropsConfigurable } from '../utils/props' @@ -14,7 +14,7 @@ export const props = makePropsConfigurable( // --- Main component --- // @vue/component -export const BIconstack = /*#__PURE__*/ Vue.extend({ +export const BIconstack = /*#__PURE__*/ defineComponent({ name: NAME_ICONSTACK, functional: true, props, diff --git a/src/mixins/attrs.js b/src/mixins/attrs.js index b73763ed624..046f9b6950a 100644 --- a/src/mixins/attrs.js +++ b/src/mixins/attrs.js @@ -1,8 +1,8 @@ import { makePropCacheMixin } from '../utils/cache' -import { Vue, isVue3 } from '../vue' +import { defineComponent, isVue3 } from '../vue' const attrsMixinVue2 = makePropCacheMixin('$attrs', 'bvAttrs') -const attrsMixinVue3 = Vue.extend({ +const attrsMixinVue3 = defineComponent({ computed: { bvAttrs() { return this.$attrs diff --git a/src/mixins/card.js b/src/mixins/card.js index f5f48b9f953..a5393b7dd64 100644 --- a/src/mixins/card.js +++ b/src/mixins/card.js @@ -1,4 +1,4 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { NAME_CARD } from '../constants/components' import { PROP_TYPE_STRING } from '../constants/props' import { makeProp, makePropsConfigurable } from '../utils/props' @@ -18,6 +18,6 @@ export const props = makePropsConfigurable( // --- Mixin --- // @vue/component -export const cardMixin = Vue.extend({ +export const cardMixin = defineComponent({ props }) diff --git a/src/mixins/click-out.js b/src/mixins/click-out.js index a2d2a62b45d..ba5729fddd5 100644 --- a/src/mixins/click-out.js +++ b/src/mixins/click-out.js @@ -1,10 +1,10 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { EVENT_OPTIONS_NO_CAPTURE } from '../constants/events' import { contains } from '../utils/dom' import { eventOn, eventOff } from '../utils/events' // @vue/component -export const clickOutMixin = Vue.extend({ +export const clickOutMixin = defineComponent({ compatConfig: { MODE: 3, OPTIONS_BEFORE_DESTROY: 'suppress-warning' diff --git a/src/mixins/dropdown.js b/src/mixins/dropdown.js index 583d891b9cb..7ea4f57d264 100644 --- a/src/mixins/dropdown.js +++ b/src/mixins/dropdown.js @@ -1,5 +1,5 @@ import Popper from 'popper.js' -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { NAME_DROPDOWN } from '../constants/components' import { HAS_TOUCH_SUPPORT } from '../constants/env' import { @@ -84,7 +84,7 @@ export const props = makePropsConfigurable( // --- Mixin --- // @vue/component -export const dropdownMixin = Vue.extend({ +export const dropdownMixin = defineComponent({ compatConfig: { MODE: 3, OPTIONS_BEFORE_DESTROY: 'suppress-warning' diff --git a/src/mixins/focus-in.js b/src/mixins/focus-in.js index 3ca248cdcde..f51da2d515e 100644 --- a/src/mixins/focus-in.js +++ b/src/mixins/focus-in.js @@ -1,9 +1,9 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { EVENT_OPTIONS_NO_CAPTURE } from '../constants/events' import { eventOn, eventOff } from '../utils/events' // @vue/component -export const focusInMixin = Vue.extend({ +export const focusInMixin = defineComponent({ compatConfig: { MODE: 3, OPTIONS_BEFORE_DESTROY: 'suppress-warning' diff --git a/src/mixins/form-control.js b/src/mixins/form-control.js index e0f2e53a147..cfda0786b10 100644 --- a/src/mixins/form-control.js +++ b/src/mixins/form-control.js @@ -1,4 +1,4 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../constants/props' import { attemptFocus, isVisible, matches, requestAF, select } from '../utils/dom' import { makeProp, makePropsConfigurable } from '../utils/props' @@ -24,7 +24,7 @@ export const props = makePropsConfigurable( // --- Mixin --- // @vue/component -export const formControlMixin = Vue.extend({ +export const formControlMixin = defineComponent({ props, mounted() { this.handleAutofocus() diff --git a/src/mixins/form-custom.js b/src/mixins/form-custom.js index 0d1b226c0b8..cf5a9b3d9b2 100644 --- a/src/mixins/form-custom.js +++ b/src/mixins/form-custom.js @@ -1,4 +1,4 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { PROP_TYPE_BOOLEAN } from '../constants/props' import { makeProp, makePropsConfigurable } from '../utils/props' @@ -14,7 +14,7 @@ export const props = makePropsConfigurable( // --- Mixin --- // @vue/component -export const formCustomMixin = Vue.extend({ +export const formCustomMixin = defineComponent({ props, computed: { custom() { diff --git a/src/mixins/form-options.js b/src/mixins/form-options.js index eacc54ed349..3fef2179319 100644 --- a/src/mixins/form-options.js +++ b/src/mixins/form-options.js @@ -1,4 +1,4 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { PROP_TYPE_ARRAY_OBJECT, PROP_TYPE_STRING } from '../constants/props' import { get } from '../utils/get' import { stripTags } from '../utils/html' @@ -28,7 +28,7 @@ export const props = makePropsConfigurable( // --- Mixin --- // @vue/component -export const formOptionsMixin = Vue.extend({ +export const formOptionsMixin = defineComponent({ props, computed: { formOptions() { diff --git a/src/mixins/form-radio-check-group.js b/src/mixins/form-radio-check-group.js index 3a0735eaabe..6de00c9dda0 100644 --- a/src/mixins/form-radio-check-group.js +++ b/src/mixins/form-radio-check-group.js @@ -1,4 +1,4 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { PROP_TYPE_BOOLEAN, PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_STRING } from '../constants/props' import { SLOT_NAME_FIRST } from '../constants/slots' import { htmlOrText } from '../utils/html' @@ -55,7 +55,7 @@ export const props = makePropsConfigurable( // --- Mixin --- // @vue/component -export const formRadioCheckGroupMixin = Vue.extend({ +export const formRadioCheckGroupMixin = defineComponent({ mixins: [ idMixin, modelMixin, diff --git a/src/mixins/form-radio-check.js b/src/mixins/form-radio-check.js index f02d213ec48..c7a4a6d83c9 100644 --- a/src/mixins/form-radio-check.js +++ b/src/mixins/form-radio-check.js @@ -1,4 +1,4 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { PROP_TYPE_ANY, PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../constants/props' import { EVENT_NAME_CHANGE } from '../constants/events' import { attemptBlur, attemptFocus } from '../utils/dom' @@ -51,7 +51,7 @@ export const props = makePropsConfigurable( // --- Mixin --- // @vue/component -export const formRadioCheckMixin = Vue.extend({ +export const formRadioCheckMixin = defineComponent({ mixins: [ attrsMixin, idMixin, diff --git a/src/mixins/form-selection.js b/src/mixins/form-selection.js index 894928e85c6..09e6e6219de 100644 --- a/src/mixins/form-selection.js +++ b/src/mixins/form-selection.js @@ -1,7 +1,7 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' // @vue/component -export const formSelectionMixin = Vue.extend({ +export const formSelectionMixin = defineComponent({ computed: { selectionStart: { // Expose selectionStart for formatters, etc diff --git a/src/mixins/form-size.js b/src/mixins/form-size.js index e2f333f974e..fd16e0bf786 100644 --- a/src/mixins/form-size.js +++ b/src/mixins/form-size.js @@ -1,4 +1,4 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { PROP_TYPE_STRING } from '../constants/props' import { makeProp, makePropsConfigurable } from '../utils/props' @@ -14,7 +14,7 @@ export const props = makePropsConfigurable( // --- Mixin --- // @vue/component -export const formSizeMixin = Vue.extend({ +export const formSizeMixin = defineComponent({ props, computed: { sizeFormClass() { diff --git a/src/mixins/form-state.js b/src/mixins/form-state.js index 14c81cb08c4..19ae8aec404 100644 --- a/src/mixins/form-state.js +++ b/src/mixins/form-state.js @@ -6,7 +6,7 @@ * - false for is-invalid * - null for no contextual state */ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { PROP_TYPE_BOOLEAN } from '../constants/props' import { isBoolean } from '../utils/inspect' import { makeProp, makePropsConfigurable } from '../utils/props' @@ -25,7 +25,7 @@ export const props = makePropsConfigurable( // --- Mixin --- // @vue/component -export const formStateMixin = Vue.extend({ +export const formStateMixin = defineComponent({ props, computed: { computedState() { diff --git a/src/mixins/form-text.js b/src/mixins/form-text.js index e485eb9fd4c..8ce4fa4f75b 100644 --- a/src/mixins/form-text.js +++ b/src/mixins/form-text.js @@ -1,4 +1,4 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { EVENT_NAME_BLUR, EVENT_NAME_CHANGE, @@ -61,7 +61,7 @@ export const props = makePropsConfigurable( // --- Mixin --- // @vue/component -export const formTextMixin = Vue.extend({ +export const formTextMixin = defineComponent({ compatConfig: { MODE: 3, OPTIONS_BEFORE_DESTROY: 'suppress-warning' diff --git a/src/mixins/form-validity.js b/src/mixins/form-validity.js index e928a69c25b..9cd99fd4eed 100644 --- a/src/mixins/form-validity.js +++ b/src/mixins/form-validity.js @@ -1,7 +1,7 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' // @vue/component -export const formValidityMixin = Vue.extend({ +export const formValidityMixin = defineComponent({ computed: { validity: { // Expose validity property diff --git a/src/mixins/has-listener.js b/src/mixins/has-listener.js index 62184fc686f..f007814da2a 100644 --- a/src/mixins/has-listener.js +++ b/src/mixins/has-listener.js @@ -2,11 +2,11 @@ // either via `v-on:name` (in the parent) or programmatically // via `vm.$on('name', ...)` // See: https://github.com/vuejs/vue/issues/10825 -import { isVue3, Vue } from '../vue' +import { isVue3, defineComponent } from '../vue' import { isArray, isUndefined } from '../utils/inspect' // @vue/component -export const hasListenerMixin = Vue.extend({ +export const hasListenerMixin = defineComponent({ methods: { hasListener(name) { if (isVue3) { diff --git a/src/mixins/id.js b/src/mixins/id.js index 2e5afe7bc0c..d14ee1ef03b 100644 --- a/src/mixins/id.js +++ b/src/mixins/id.js @@ -1,7 +1,7 @@ // SSR safe client-side ID attribute generation // ID's can only be generated client-side, after mount // `this._uid` is not synched between server and client -import { COMPONENT_UID_KEY, Vue } from '../vue' +import { COMPONENT_UID_KEY, defineComponent } from '../vue' import { PROP_TYPE_STRING } from '../constants/props' import { makeProp } from '../utils/props' @@ -14,7 +14,7 @@ export const props = { // --- Mixin --- // @vue/component -export const idMixin = Vue.extend({ +export const idMixin = defineComponent({ props, data() { return { diff --git a/src/mixins/listen-on-document.js b/src/mixins/listen-on-document.js index b29e5540a68..f0eee40e655 100644 --- a/src/mixins/listen-on-document.js +++ b/src/mixins/listen-on-document.js @@ -1,4 +1,4 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { IS_BROWSER } from '../constants/env' import { EVENT_OPTIONS_NO_CAPTURE } from '../constants/events' import { arrayIncludes } from '../utils/array' @@ -12,7 +12,7 @@ const PROP = '$_documentListeners' // --- Mixin --- // @vue/component -export const listenOnDocumentMixin = Vue.extend({ +export const listenOnDocumentMixin = defineComponent({ compatConfig: { MODE: 3, OPTIONS_BEFORE_DESTROY: 'suppress-warning' diff --git a/src/mixins/listen-on-root.js b/src/mixins/listen-on-root.js index 4f3a8071906..956ea19c89d 100644 --- a/src/mixins/listen-on-root.js +++ b/src/mixins/listen-on-root.js @@ -1,4 +1,4 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { arrayIncludes } from '../utils/array' import { keys } from '../utils/object' import { getEventRoot } from '../utils/get-event-root' @@ -9,7 +9,7 @@ const PROP = '$_rootListeners' // --- Mixin --- // @vue/component -export const listenOnRootMixin = Vue.extend({ +export const listenOnRootMixin = defineComponent({ compatConfig: { MODE: 3, OPTIONS_BEFORE_DESTROY: 'suppress-warning' diff --git a/src/mixins/listen-on-window.js b/src/mixins/listen-on-window.js index a1c7dd9003c..815bc2468c9 100644 --- a/src/mixins/listen-on-window.js +++ b/src/mixins/listen-on-window.js @@ -1,4 +1,4 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { IS_BROWSER } from '../constants/env' import { EVENT_OPTIONS_NO_CAPTURE } from '../constants/events' import { arrayIncludes } from '../utils/array' @@ -12,7 +12,7 @@ const PROP = '$_windowListeners' // --- Mixin --- // @vue/component -export const listenOnWindowMixin = Vue.extend({ +export const listenOnWindowMixin = defineComponent({ compatConfig: { MODE: 3, OPTIONS_BEFORE_DESTROY: 'suppress-warning' diff --git a/src/mixins/listeners.js b/src/mixins/listeners.js index cf0c43b6652..bc218dffd28 100644 --- a/src/mixins/listeners.js +++ b/src/mixins/listeners.js @@ -1,9 +1,9 @@ import { makePropCacheMixin } from '../utils/cache' -import { Vue, isVue3 } from '../vue' +import { defineComponent, isVue3 } from '../vue' const listenersMixinVue2 = makePropCacheMixin('$listeners', 'bvListeners') -const listenersMixinVue3 = Vue.extend({ +const listenersMixinVue3 = defineComponent({ compatConfig: { MODE: 3, INSTANCE_LISTENERS: 'suppress-warning' diff --git a/src/mixins/normalize-slot.js b/src/mixins/normalize-slot.js index ef2fcfdd57c..055016cd2f0 100644 --- a/src/mixins/normalize-slot.js +++ b/src/mixins/normalize-slot.js @@ -1,10 +1,10 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { SLOT_NAME_DEFAULT } from '../constants/slots' import { hasNormalizedSlot, normalizeSlot } from '../utils/normalize-slot' import { concat } from '../utils/array' // @vue/component -export const normalizeSlotMixin = Vue.extend({ +export const normalizeSlotMixin = defineComponent({ compatConfig: { MODE: 3, INSTANCE_SCOPED_SLOTS: 'suppress-warning' diff --git a/src/mixins/pagination.js b/src/mixins/pagination.js index cb2dcbf64ba..c8b3d2c2f9d 100644 --- a/src/mixins/pagination.js +++ b/src/mixins/pagination.js @@ -1,4 +1,4 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { NAME_PAGINATION } from '../constants/components' import { CODE_DOWN, CODE_LEFT, CODE_RIGHT, CODE_SPACE, CODE_UP } from '../constants/key-codes' import { @@ -148,7 +148,7 @@ export const props = makePropsConfigurable( // --- Mixin --- // @vue/component -export const paginationMixin = Vue.extend({ +export const paginationMixin = defineComponent({ mixins: [modelMixin, normalizeSlotMixin], props, data() { diff --git a/src/mixins/scoped-style.js b/src/mixins/scoped-style.js index f99f5e58b2d..eed8562e507 100644 --- a/src/mixins/scoped-style.js +++ b/src/mixins/scoped-style.js @@ -1,9 +1,9 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { useParentMixin } from '../mixins/use-parent' import { getScopeId } from '../utils/get-scope-id' // @vue/component -export const scopedStyleMixin = Vue.extend({ +export const scopedStyleMixin = defineComponent({ mixins: [useParentMixin], computed: { scopedStyleAttrs() { diff --git a/src/mixins/use-parent.js b/src/mixins/use-parent.js index aeb3808a85f..2420f0402e9 100644 --- a/src/mixins/use-parent.js +++ b/src/mixins/use-parent.js @@ -1,9 +1,9 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' // --- Mixin --- // @vue/component -export const useParentMixin = Vue.extend({ +export const useParentMixin = defineComponent({ computed: { bvParent() { return this.$parent || (this.$root === this && this.$options.bvParent) diff --git a/src/utils/cache.js b/src/utils/cache.js index 80d053d6105..1f95c0d9941 100644 --- a/src/utils/cache.js +++ b/src/utils/cache.js @@ -1,4 +1,4 @@ -import { Vue, isVue3 } from '../vue' +import { defineComponent, isVue3 } from '../vue' import { cloneDeep } from './clone-deep' import { looseEqual } from './loose-equal' import { hasOwnProperty, keys } from './object' @@ -34,7 +34,7 @@ export const makePropWatcher = propName => ({ }) export const makePropCacheMixin = (propName, proxyPropName) => - Vue.extend({ + defineComponent({ data() { return { [proxyPropName]: cloneDeep(this[propName]) } }, diff --git a/src/utils/model.js b/src/utils/model.js index b7844a8347b..b9809f202a5 100644 --- a/src/utils/model.js +++ b/src/utils/model.js @@ -1,4 +1,4 @@ -import { Vue } from '../vue' +import { defineComponent } from '../vue' import { EVENT_NAME_INPUT } from '../constants/events' import { PROP_TYPE_ANY } from '../constants/props' import { makeProp } from './props' @@ -17,7 +17,7 @@ export const makeModelMixin = ( } // @vue/component - const mixin = Vue.extend({ + const mixin = defineComponent({ compatConfig: { MODE: 3, COMPONENT_V_MODEL: 'suppress-warning' diff --git a/src/vue.js b/src/vue.js index 3ce405acfc2..45c50e8d75b 100644 --- a/src/vue.js +++ b/src/vue.js @@ -23,9 +23,104 @@ const ALLOWED_FIELDS_IN_DATA = [ 'refInFor' ] +function gatherCompatConfig(definition) { + const compatConfig = { ...(definition.compatConfig || {}) } + const mixinsCompatConfigDefinitions = (definition.mixins || []).map( + mixin => mixin.options.compatConfig || {} + ) + const extendsCompatDefinition = definition.extends + ? gatherCompatConfig(definition.extends.options) + : {} + + return Object.assign({}, ...mixinsCompatConfigDefinitions, extendsCompatDefinition, compatConfig) +} + +const KNOWN_COMPONENTS = ['router-link', 'transition'] +function defineComponentCompat(definition) { + definition.compatConfig = { + MODE: 3, + + // required for all files + RENDER_FUNCTION: 'suppress-warning', + INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning', + ATTR_FALSE_VALUE: 'suppress-warning', + COMPONENT_FUNCTIONAL: 'suppress-warning', + + // required for patched-compat function below to work + INSTANCE_LISTENERS: 'suppress-warning', + + ...gatherCompatConfig(definition) + } + + const originalRender = definition.render + definition.__alreadyPatched = true + if (originalRender) { + definition.render = function(h) { + const patchedH = function(tag, dataObjOrChildren, ...rest) { + const isTag = typeof tag === 'string' && !KNOWN_COMPONENTS.includes(tag) + const isSecondArgumentDataObject = + dataObjOrChildren && + typeof dataObjOrChildren === 'object' && + !Array.isArray(dataObjOrChildren) + + if (!isSecondArgumentDataObject) { + return h(tag, dataObjOrChildren, ...rest) + } + + const { attrs, props, ...restData } = dataObjOrChildren + const normalizedData = { + ...restData, + attrs, + props: isTag ? {} : props + } + if (tag === 'router-link' && !normalizedData.slots && !normalizedData.scopedSlots) { + // terrible workaround to fix router-link rendering with compat vue-router + normalizedData.scopedSlots = { $hasNormal: () => {} } + } + return h(tag, normalizedData, ...rest) + } + + if (definition.functional) { + const ctx = arguments[1] + const patchedCtx = { ...ctx } + patchedCtx.data = { + attrs: { ...(ctx.data.attrs || {}) }, + props: { ...(ctx.data.props || {}) } + } + Object.keys(ctx.data || {}).forEach(key => { + if (ALLOWED_FIELDS_IN_DATA.includes(key)) { + patchedCtx.data[key] = ctx.data[key] + } else if (key in ctx.props) { + patchedCtx.data.props[key] = ctx.data[key] + } else if (!key.startsWith('on')) { + patchedCtx.data.attrs[key] = ctx.data[key] + } + }) + + const IGNORED_CHILDREN_KEYS = ['_ctx'] + const children = ctx.children?.default?.() || ctx.children + + if ( + children && + Object.keys(patchedCtx.children).filter(k => !IGNORED_CHILDREN_KEYS.includes(k)) + .length === 0 + ) { + delete patchedCtx.children + } else { + patchedCtx.children = children + } + + patchedCtx.data.on = ctx.listeners + return originalRender.call(this, patchedH, patchedCtx) + } + + return originalRender.call(this, patchedH) + } + } + return Vue.extend(definition) +} + if (isVue3) { - const { extend: originalExtend } = Vue - const KNOWN_COMPONENTS = ['router-link', 'transition'] const originalVModelDynamicCreated = Vue.vModelDynamic.created const originalVModelDynamicBeforeUpdate = Vue.vModelDynamic.beforeUpdate @@ -42,111 +137,9 @@ if (isVue3) { el._assign = () => {} } } - - function gatherCompatConfig(definition) { - const compatConfig = { ...(definition.compatConfig || {}) } - const mixinsCompatConfigDefinitions = (definition.mixins || []).map( - mixin => mixin.options.compatConfig || {} - ) - const extendsCompatDefinition = definition.extends - ? gatherCompatConfig(definition.extends.options) - : {} - - return Object.assign( - {}, - ...mixinsCompatConfigDefinitions, - extendsCompatDefinition, - compatConfig - ) - } - - Vue.extend = function(definition) { - if (typeof definition === 'object' && !definition.__alreadyPatched) { - definition.compatConfig = { - MODE: 3, - - // required for all files - RENDER_FUNCTION: 'suppress-warning', - INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning', - ATTR_FALSE_VALUE: 'suppress-warning', - COMPONENT_FUNCTIONAL: 'suppress-warning', - - // required for patched-compat function below to work - INSTANCE_LISTENERS: 'suppress-warning', - - ...gatherCompatConfig(definition) - } - - const originalRender = definition.render - definition.__alreadyPatched = true - if (originalRender) { - definition.render = function(h) { - const patchedH = function(tag, dataObjOrChildren, ...rest) { - const isTag = typeof tag === 'string' && !KNOWN_COMPONENTS.includes(tag) - const isSecondArgumentDataObject = - dataObjOrChildren && - typeof dataObjOrChildren === 'object' && - !Array.isArray(dataObjOrChildren) - - if (!isSecondArgumentDataObject) { - return h(tag, dataObjOrChildren, ...rest) - } - - const { attrs, props, ...restData } = dataObjOrChildren - const normalizedData = { - ...restData, - attrs, - props: isTag ? {} : props - } - if (tag === 'router-link' && !normalizedData.slots && !normalizedData.scopedSlots) { - // terrible workaround to fix router-link rendering with compat vue-router - normalizedData.scopedSlots = { $hasNormal: () => {} } - } - return h(tag, normalizedData, ...rest) - } - - if (definition.functional) { - const ctx = arguments[1] - const patchedCtx = { ...ctx } - patchedCtx.data = { - attrs: { ...(ctx.data.attrs || {}) }, - props: { ...(ctx.data.props || {}) } - } - Object.keys(ctx.data || {}).forEach(key => { - if (ALLOWED_FIELDS_IN_DATA.includes(key)) { - patchedCtx.data[key] = ctx.data[key] - } else if (key in ctx.props) { - patchedCtx.data.props[key] = ctx.data[key] - } else if (!key.startsWith('on')) { - patchedCtx.data.attrs[key] = ctx.data[key] - } - }) - - const IGNORED_CHILDREN_KEYS = ['_ctx'] - const children = ctx.children?.default?.() || ctx.children - - if ( - children && - Object.keys(patchedCtx.children).filter(k => !IGNORED_CHILDREN_KEYS.includes(k)) - .length === 0 - ) { - delete patchedCtx.children - } else { - patchedCtx.children = children - } - - patchedCtx.data.on = ctx.listeners - return originalRender.call(this, patchedH, patchedCtx) - } - - return originalRender.call(this, patchedH) - } - } - } - return originalExtend.call(this, definition) - } } const nextTick = Vue.nextTick +const defineComponent = isVue3 ? defineComponentCompat : Vue.extend.bind(Vue) -export { COMPONENT_UID_KEY, Vue, mergeData, isVue3, nextTick } +export { COMPONENT_UID_KEY, Vue, mergeData, isVue3, nextTick, defineComponent }