Merge branch 'main' into XhmikosR-patch-3

twbs · Dec 15, 2021 · 7cb5c5c · 7cb5c5c
2 parents 85ee03f + a22694d
commit 7cb5c5c
Show file tree

Hide file tree

Showing 40 changed files with 1,791 additions and 3,680 deletions.
diff --git a/.github/workflows/js.yml b/.github/workflows/js.yml
@@ -9,25 +9,21 @@ on:
 
 env:
   FORCE_COLOR: 2
+  NODE: 16
 
 jobs:
   run:
-    name: Node ${{ matrix.node }}
+    name: JS Tests
     runs-on: ubuntu-latest
 
-    strategy:
-      fail-fast: false
-      matrix:
-        node: [12, 14, 16]
-
     steps:
       - name: Clone repository
         uses: actions/checkout@v2
 
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: ${{ matrix.node }}
+          node-version: ${{ env.NODE }}
           cache: npm
 
       - name: Install npm dependencies
@@ -41,7 +37,6 @@ jobs:
 
       - name: Run Coveralls
         uses: coverallsapp/github-action@1.1.3
-        if: matrix.node == 16
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"
           path-to-lcov: "./js/coverage/lcov.info"
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,6 +1,6 @@
 {
   "extends": [
-    "stylelint-config-twbs-bootstrap/scss"
+    "stylelint-config-twbs-bootstrap"
   ],
   "rules": {
     "declaration-property-value-disallowed-list": {

diff --git a/build/postcss.config.js b/build/postcss.config.js
@@ -1,19 +1,19 @@
 'use strict'
 
-module.exports = ctx => {
+const mapConfig = {
+  inline: false,
+  annotation: true,
+  sourcesContent: true
+}
+
+module.exports = context => {
   return {
-    map: ctx.file.dirname.includes('examples') ?
-      false :
-      {
-        inline: false,
-        annotation: true,
-        sourcesContent: true
-      },
+    map: context.file.dirname.includes('examples') ? false : mapConfig,
     plugins: {
       autoprefixer: {
         cascade: false
       },
-      rtlcss: ctx.env === 'RTL' ? {} : false
+      rtlcss: context.env === 'RTL'
     }
   }
 }
diff --git a/js/src/base-component.js b/js/src/base-component.js
@@ -6,11 +6,9 @@
  */
 
 import Data from './dom/data'
-import {
-  executeAfterTransition,
-  getElement
-} from './util/index'
+import { executeAfterTransition, getElement } from './util/index'
 import EventHandler from './dom/event-handler'
+import Config from './util/config'
 
 /**
  * Constants
@@ -22,15 +20,18 @@ const VERSION = '5.1.3'
  * Class definition
  */
 
-class BaseComponent {
-  constructor(element) {
-    element = getElement(element)
+class BaseComponent extends Config {
+  constructor(element, config) {
+    super()
 
+    element = getElement(element)
     if (!element) {
       return
     }
 
     this._element = element
+    this._config = this._getConfig(config)
+
     Data.set(this._element, this.constructor.DATA_KEY, this)
   }
 
@@ -48,6 +49,13 @@ class BaseComponent {
     executeAfterTransition(callback, element, isAnimated)
   }
 
+  _getConfig(config) {
+    config = this._mergeConfigObj(config, this._element)
+    config = this._configAfterMerge(config)
+    this._typeCheckConfig(config)
+    return config
+  }
+
   // Static
   static getInstance(element) {
     return Data.get(getElement(element), this.DATA_KEY)
@@ -61,10 +69,6 @@ class BaseComponent {
     return VERSION
   }
 
-  static get NAME() {
-    throw new Error('You have to implement the static method "NAME" for each component!')
-  }
-
   static get DATA_KEY() {
     return `bs.${this.NAME}`
   }

diff --git a/js/src/carousel.js b/js/src/carousel.js
@@ -12,8 +12,7 @@ import {
   isRTL,
   isVisible,
   reflow,
-  triggerTransitionEnd,
-  typeCheckConfig
+  triggerTransitionEnd
 } from './util/index'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
@@ -95,7 +94,7 @@ const DefaultType = {
 
 class Carousel extends BaseComponent {
   constructor(element, config) {
-    super(element)
+    super(element, config)
 
     this._items = null
     this._interval = null
@@ -105,7 +104,6 @@ class Carousel extends BaseComponent {
     this.touchTimeout = null
     this._swipeHelper = null
 
-    this._config = this._getConfig(config)
     this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element)
     this._addEventListeners()
   }
@@ -115,6 +113,10 @@ class Carousel extends BaseComponent {
     return Default
   }
 
+  static get DefaultType() {
+    return DefaultType
+  }
+
   static get NAME() {
     return NAME
   }
@@ -205,16 +207,6 @@ class Carousel extends BaseComponent {
   }
 
   // Private
-  _getConfig(config) {
-    config = {
-      ...Default,
-      ...Manipulator.getDataAttributes(this._element),
-      ...(typeof config === 'object' ? config : {})
-    }
-    typeCheckConfig(NAME, config, DefaultType)
-    return config
-  }
-
   _addEventListeners() {
     if (this._config.keyboard) {
       EventHandler.on(this._element, EVENT_KEYDOWN, event => this._keydown(event))

diff --git a/js/src/collapse.js b/js/src/collapse.js
@@ -10,11 +10,9 @@ import {
   getElement,
   getElementFromSelector,
   getSelectorFromElement,
-  reflow,
-  typeCheckConfig
+  reflow
 } from './util/index'
 import EventHandler from './dom/event-handler'
-import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
 import BaseComponent from './base-component'
 
@@ -62,10 +60,9 @@ const DefaultType = {
 
 class Collapse extends BaseComponent {
   constructor(element, config) {
-    super(element)
+    super(element, config)
 
     this._isTransitioning = false
-    this._config = this._getConfig(config)
     this._triggerArray = []
 
     const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
@@ -96,6 +93,10 @@ class Collapse extends BaseComponent {
     return Default
   }
 
+  static get DefaultType() {
+    return DefaultType
+  }
+
   static get NAME() {
     return NAME
   }
@@ -210,15 +211,9 @@ class Collapse extends BaseComponent {
   }
 
   // Private
-  _getConfig(config) {
-    config = {
-      ...Default,
-      ...Manipulator.getDataAttributes(this._element),
-      ...config
-    }
+  _configAfterMerge(config) {
     config.toggle = Boolean(config.toggle) // Coerce string values
     config.parent = getElement(config.parent)
-    typeCheckConfig(NAME, config, DefaultType)
     return config
   }
 

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -15,8 +15,7 @@ import {
   isElement,
   isRTL,
   isVisible,
-  noop,
-  typeCheckConfig
+  noop
 } from './util/index'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
@@ -88,10 +87,9 @@ const DefaultType = {
 
 class Dropdown extends BaseComponent {
   constructor(element, config) {
-    super(element)
+    super(element, config)
 
     this._popper = null
-    this._config = this._getConfig(config)
     this._menu = this._getMenuElement()
     this._inNavbar = this._detectNavbar()
   }
@@ -205,13 +203,7 @@ class Dropdown extends BaseComponent {
   }
 
   _getConfig(config) {
-    config = {
-      ...this.constructor.Default,
-      ...Manipulator.getDataAttributes(this._element),
-      ...config
-    }
-
-    typeCheckConfig(NAME, config, this.constructor.DefaultType)
+    config = super._getConfig(config)
 
     if (typeof config.reference === 'object' && !isElement(config.reference) &&
       typeof config.reference.getBoundingClientRect !== 'function'

diff --git a/js/src/modal.js b/js/src/modal.js
@@ -5,16 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
-import {
-  defineJQueryPlugin,
-  getElementFromSelector,
-  isRTL,
-  isVisible,
-  reflow,
-  typeCheckConfig
-} from './util/index'
+import { defineJQueryPlugin, getElementFromSelector, isRTL, isVisible, reflow } from './util/index'
 import EventHandler from './dom/event-handler'
-import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
 import ScrollBarHelper from './util/scrollbar'
 import BaseComponent from './base-component'
@@ -70,9 +62,8 @@ const DefaultType = {
 
 class Modal extends BaseComponent {
   constructor(element, config) {
-    super(element)
+    super(element, config)
 
-    this._config = this._getConfig(config)
     this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element)
     this._backdrop = this._initializeBackDrop()
     this._focustrap = this._initializeFocusTrap()
@@ -86,6 +77,10 @@ class Modal extends BaseComponent {
     return Default
   }
 
+  static get DefaultType() {
+    return DefaultType
+  }
+
   static get NAME() {
     return NAME
   }
@@ -175,16 +170,6 @@ class Modal extends BaseComponent {
     })
   }
 
-  _getConfig(config) {
-    config = {
-      ...Default,
-      ...Manipulator.getDataAttributes(this._element),
-      ...(typeof config === 'object' ? config : {})
-    }
-    typeCheckConfig(NAME, config, DefaultType)
-    return config
-  }
-
   _showElement(relatedTarget) {
     // try to append dynamic modal
     if (!document.body.contains(this._element)) {