feat(refactor): code enhancements for easier Vue 3 migration (closes #6124, #6139) (#6141)

* feat(refactor): code improvements for easier Vue 3 migration

* chore(deps): regenerate lockfile

* fix(build): add missing `package.json` files for private components

* chore: bump BundleWatch values

* Update progress-bar.js

* Update tab.js

* Update bv-tooltip-template.js

* Update props.js

* Update props.spec.js

* Update tabs.js

* Update tab.js

* Update progress-bar.js

* Update tbody.js

* Update td.js

* Update tfoot.js

* Update thead.js

* Update tr.js

* Update time.js

* Update bv-tooltip-template.js

* Update form-radio-check.js

* Update collapse.js

* Update collapse.js

* Update form-radio-check.js

* Update form-radio.js

* Update safe-types.js

* Update common-props.json

* Update package.json

* Update package.json

* chore: alphabetically sort component meta information

* chore(refactor): add `slots` constants for all slot names

* Update safe-types.js

* Update README.md

* Update avatar.js

* Update alert.js

* Update form-radio-check.js

* chore(docs): add `ariaControls` to common props

* Update form-datepicker.js

* Update form-timepicker.js

* Update componentdoc.vue

* chore(refactor): move all custom event names to `events` constants

* Update dropdown.js

* Update slots.js

* Update form-spinbutton.js

* Update form-rating.js

* Update modal.js

* Update sidebar.js

* Update slots.js

* Update pagination.js

* Update pagination.js

* chore(docs): add missing documentation for slots

* Update package.json

* Update componentdoc.vue

* feat(popover/tooltip): use `normalizeSlotMixin`

* Update card-img-lazy.js

* Update package.json

* Update package.json

* chore(docs): improve prop XSS warnings

* Update package.json

* Update bv-tooltip-template.js

* Update bv-popover-template.js

* Update bv-tooltip-template.js

* Update bv-popper.js

* fix: `required` prop handling

* Update tooltip.js

* Update form-text.js

* Update form-file.js

* Update form-input.js

* Update form-text.js

* Update index.js

Author: jacobmllr95

.bundlewatch.config.json

@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/bootstrap-vue-icons.js",
-      "maxSize": "115 kB"
+      "maxSize": "120 kB"
     },
     {
       "path": "./dist/bootstrap-vue-icons.min.js",
-      "maxSize": "105 kB"
+      "maxSize": "110 kB"
     },
     {
       "path": "./dist/bootstrap-vue-icons.common.js",
@@ -18,7 +18,7 @@
     },
     {
       "path": "./dist/bootstrap-vue-icons.esm.js",
-      "maxSize": "115 kB"
+      "maxSize": "120 kB"
     },
     {
       "path": "./dist/bootstrap-vue-icons.esm.min.js",

docs/common-props.json

@@ -305,6 +305,8 @@ import commonProps from '../common-props.json'
 import { getComponentName, getCleanComponentName, kebabCase } from '../utils'
 import AnchoredHeading from './anchored-heading'
 
+const SORT_THRESHOLD = 10
+
 export default {
   name: 'BVComponentdoc',
   components: { AnchoredHeading },
@@ -393,34 +395,36 @@ export default {
       }, {})
     },
     propsFields() {
-      const sortable = this.propsItems.length >= 10
+      const sortable = this.propsItems.length >= SORT_THRESHOLD
       const hasDescriptions = this.propsItems.some(p => p.description)
       return [
         { key: 'prop', label: 'Property', sortable },
-        { key: 'type', label: 'Type' },
+        { key: 'type', label: 'Type', sortable },
         { key: 'defaultValue', label: 'Default' },
         ...(hasDescriptions ? [{ key: 'description', label: 'Description' }] : [])
       ]
     },
     eventsFields() {
+      const sortable = this.events.length >= SORT_THRESHOLD
       return [
-        { key: 'event', label: 'Event' },
+        { key: 'event', label: 'Event', sortable },
         { key: 'args', label: 'Arguments' },
         { key: 'description', label: 'Description' }
       ]
     },
     rootEventListenersFields() {
+      const sortable = this.rootEventListeners.length >= SORT_THRESHOLD
       return [
-        { key: 'event', label: 'Event' },
+        { key: 'event', label: 'Event', sortable },
         { key: 'args', label: 'Arguments' },
         { key: 'description', label: 'Description' }
       ]
     },
     slotsFields() {
-      const sortable = this.slotsItems.length >= 10
+      const sortable = this.slots.length >= SORT_THRESHOLD
       const hasScopedSlots = this.slots.some(s => s.scope)
       return [
-        { key: 'name', label: 'Slot Name', sortable },
+        { key: 'name', label: 'Name', sortable },
         ...(hasScopedSlots ? [{ key: 'scope', label: 'Scoped' }] : []),
         { key: 'description', label: 'Description' }
       ]
@@ -429,50 +433,52 @@ export default {
       const props = this.componentProps
       const propsMetaObj = this.componentPropsMetaObj
 
-      return Object.keys(props).map(prop => {
-        const p = props[prop]
-        const meta = {
-          // Fallback descriptions for common props
-          ...(commonProps[prop] || {}),
-          ...(propsMetaObj[prop] || {})
-        }
+      return Object.keys(props)
+        .sort()
+        .map(prop => {
+          const p = props[prop]
+          const meta = {
+            // Fallback descriptions for common props
+            ...(commonProps[prop] || {}),
+            ...(propsMetaObj[prop] || {})
+          }
 
-        // Describe type
-        let type = p.type
-        let types = []
-        if (Array.isArray(type)) {
-          types = type.map(type => type.name)
-        } else {
-          types = type && type.name ? [type.name] : ['Any']
-        }
-        type = types
-          .map(type => `<code class="notranslate" translate="no">${type}</code>`)
-          .join(' or ')
+          // Describe type
+          let type = p.type
+          let types = []
+          if (Array.isArray(type)) {
+            types = type.map(type => type.name)
+          } else {
+            types = type && type.name ? [type.name] : ['Any']
+          }
+          type = types
+            .map(type => `<code class="notranslate" translate="no">${type}</code>`)
+            .join(' or ')
 
-        // Default value
-        let defaultValue = p.default
-        if (defaultValue instanceof Function && !Array.isArray(defaultValue)) {
-          defaultValue = defaultValue()
-        }
-        defaultValue =
-          typeof defaultValue === 'undefined'
-            ? ''
-            : String(JSON.stringify(defaultValue, undefined, 1)).replace(/"/g, "'")
+          // Default value
+          let defaultValue = p.default
+          if (defaultValue instanceof Function && !Array.isArray(defaultValue)) {
+            defaultValue = defaultValue()
+          }
+          defaultValue =
+            typeof defaultValue === 'undefined'
+              ? ''
+              : String(JSON.stringify(defaultValue, undefined, 1)).replace(/"/g, "'")
 
-        return {
-          prop: kebabCase(prop),
-          type,
-          defaultValue,
-          required: p.required || false,
-          description: meta.description || '',
-          version: meta.version || '',
-          xss: /[a-z]Html$/.test(prop),
-          isVModel: this.componentVModel && this.componentVModel.prop === prop,
-          deprecated: p.deprecated || false,
-          deprecation: p.deprecation || false,
-          _showDetails: typeof p.deprecated === 'string' || typeof p.deprecation === 'string'
-        }
-      })
+          return {
+            prop: kebabCase(prop),
+            type,
+            defaultValue,
+            required: p.required || false,
+            description: meta.description || '',
+            version: meta.version || '',
+            xss: meta.xss || false,
+            isVModel: this.componentVModel && this.componentVModel.prop === prop,
+            deprecated: p.deprecated || false,
+            deprecation: p.deprecation || false,
+            _showDetails: typeof p.deprecated === 'string' || typeof p.deprecation === 'string'
+          }
+        })
     },
     slotsItems() {
       // We use object spread here so that `_showDetails` doesn't

docs/components/componentdoc.vue

@@ -19,23 +19,23 @@ export const getComponentName = component => kebabCase(component).replace(/{/g,
 export const getCleanComponentName = component => getComponentName(component).replace(/({|})/g, '')
 
 export const parseUrl = value => {
-  const anchor = document.createElement('a')
-  anchor.href = value
+  const $anchor = document.createElement('a')
+  $anchor.href = value
 
   // We need to add the anchor to the document to make sure the
   // `pathname` is correctly detected in any browser
-  document.body.appendChild(anchor)
+  document.body.appendChild($anchor)
 
   const result = ['hash', 'host', 'hostname', 'pathname', 'port', 'protocol', 'search'].reduce(
     (result, prop) => {
-      result[prop] = anchor[prop] || null
+      result[prop] = $anchor[prop] || null
       return result
     },
     {}
   )
 
   // Make sure to remove the anchor from document as soon as possible
-  document.body.removeChild(anchor)
+  document.body.removeChild($anchor)
 
   // Normalize port
   if (!result.port && result.protocol) {
@@ -146,31 +146,31 @@ export const updateMetaTOC = (tocData = {}, meta = null) => {
   return tocData
 }
 
-export const importAll = r => {
-  const obj = {}
-
-  r.keys()
-    .map(r)
-    .map(m => m.meta || m)
-    .map(m => ({
-      slug:
-        typeof m.slug === 'undefined' ? (m.title || '').replace(' ', '-').toLowerCase() : m.slug,
-      ...m
-    }))
-    .sort((a, b) => {
-      if (a.slug < b.slug) return -1
-      else if (a.slug > b.slug) return 1
-      return 0
-    })
-    .forEach(m => {
-      if (m.components) {
-        // Normalize `meta.components` to array of objects form
-        m.components = m.components.map(c => (typeof c === 'string' ? { component: c } : c))
-      }
-      obj[m.slug] = m
-    })
-
-  return obj
+export const importAll = context => {
+  // Get array of datas by keys from context
+  const datas = context.keys().map(context)
+
+  return (
+    datas
+      // Filter out private datas
+      .filter(data => !data.private)
+      // Map meta information
+      .map(data => data.meta || data)
+      // Normalize meta information
+      .map(meta => ({
+        ...meta,
+        slug:
+          meta.slug === undefined ? (meta.title || '').replace(' ', '-').toLowerCase() : meta.slug
+      }))
+      // Sort by slug
+      .sort((a, b) => {
+        if (a.slug < b.slug) return -1
+        else if (a.slug > b.slug) return 1
+        return 0
+      })
+      // Build one object keyed by slug
+      .reduce((result, meta) => ({ ...result, [meta.slug]: meta }), {})
+  )
 }
 
 // Smooth Scroll handler methods

docs/utils/index.js

@@ -44,8 +44,8 @@ const checkPluginMeta = async plugin => {
     return file.replace(/\.js/, '')
   })
 
-  const { meta } = await import(`${pluginDir}/package.json`)
-  if (!meta) {
+  const { private: isPrivate, meta } = await import(`${pluginDir}/package.json`)
+  if (isPrivate || !meta) {
     return
   }
 

scripts/check-plugin-meta.js

@@ -28,115 +28,3 @@
     }
   }
 }
-
-// Shared BVFormBtnLabelControl styling
-// Currently used by BFormTimepicker and BFormDatepicker
-// Does not apply to button-only styling
-.b-form-btn-label-control.form-control {
-  // Remove background validation images and padding from
-  // main wrapper as they will be present in the inner label element
-  background-image: none;
-  padding: 0;
-
-  @at-root {
-    // Handle input-group padding overrides
-    .input-group & {
-      padding: 0;
-    }
-  }
-
-  @at-root {
-    // Prevent the button/label from reversing order on in horizontal RTL mode
-    [dir="rtl"] &,
-    &[dir="rtl"] {
-      flex-direction: row-reverse;
-
-      > label {
-        text-align: right;
-      }
-    }
-  }
-
-  > .btn {
-    line-height: 1;
-    font-size: inherit;
-    box-shadow: none !important;
-    border: 0;
-
-    &:disabled {
-      pointer-events: none;
-    }
-  }
-
-  &.is-valid > .btn {
-    color: $form-feedback-valid-color;
-  }
-
-  &.is-invalid > .btn {
-    color: $form-feedback-invalid-color;
-  }
-
-  > .dropdown-menu {
-    padding: 0.5rem;
-  }
-
-  > label {
-    outline: 0;
-    padding-left: 0.25rem;
-    margin: 0;
-    border: 0;
-    font-size: inherit;
-    @if $enable-pointer-cursor-for-buttons {
-      cursor: pointer;
-    }
-    // Set a minimum height, as we have height set to auto
-    // (to allow the content to wrap if needed)
-    // We subtract off the border, as we have border set to 0
-    min-height: calc(#{$input-height} - #{$input-height-border});
-
-    &.form-control-sm {
-      min-height: calc(#{$input-height-sm} - #{$input-height-border});
-    }
-
-    &.form-control-lg {
-      min-height: calc(#{$input-height-lg} - #{$input-height-border});
-    }
-
-    @at-root {
-      // Handle input group sizing
-      .input-group.input-group-sm & {
-        min-height: calc(#{$input-height-sm} - #{$input-height-border});
-        padding-top: $input-padding-y-sm;
-        padding-bottom: $input-padding-y-sm;
-      }
-
-      .input-group.input-group-lg & {
-        min-height: calc(#{$input-height-lg} - #{$input-height-border});
-        padding-top: $input-padding-y-lg;
-        padding-bottom: $input-padding-y-lg;
-      }
-    }
-  }
-
-  // Disabled and read-only styling
-  &[aria-disabled="true"],
-  &[aria-readonly="true"] {
-    background-color: $input-disabled-bg;
-    opacity: 1;
-  }
-
-  &[aria-disabled="true"] {
-    pointer-events: none;
-
-    > label {
-      cursor: default;
-    }
-  }
-}
-
-// Button only mode menu padding overrides
-.b-form-btn-label-control.btn-group {
-  > .dropdown-menu {
-    padding: 0.5rem;
-  }
-}