@coreui/coreui 4.1.4 → 4.2.0

package/js/src/util/scrollbar.js

@@ -1,6 +1,6 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.1.3): util/scrollBar.js
+ * Bootstrap (v5.2.0-beta1): util/scrollBar.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -9,14 +9,25 @@ import SelectorEngine from '../dom/selector-engine'
 import Manipulator from '../dom/manipulator'
 import { isElement } from './index'
 
+/**
+ * Constants
+ */
+
 const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
 const SELECTOR_STICKY_CONTENT = '.sticky-top'
+const PROPERTY_PADDING = 'padding-right'
+const PROPERTY_MARGIN = 'margin-right'
+
+/**
+ * Class definition
+ */
 
 class ScrollBarHelper {
   constructor() {
     this._element = document.body
   }
 
+  // Public
   getWidth() {
     // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
     const documentWidth = document.documentElement.clientWidth
@@ -27,55 +38,62 @@ class ScrollBarHelper {
     const width = this.getWidth()
     this._disableOverFlow()
     // give padding to element to balance the hidden scrollbar width
-    this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width)
+    this._setElementAttributes(this._element, PROPERTY_PADDING, calculatedValue => calculatedValue + width)
     // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
-    this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width)
-    this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width)
+    this._setElementAttributes(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING, calculatedValue => calculatedValue + width)
+    this._setElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN, calculatedValue => calculatedValue - width)
+  }
+
+  reset() {
+    this._resetElementAttributes(this._element, 'overflow')
+    this._resetElementAttributes(this._element, PROPERTY_PADDING)
+    this._resetElementAttributes(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING)
+    this._resetElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN)
+  }
+
+  isOverflowing() {
+    return this.getWidth() > 0
   }
 
+  // Private
   _disableOverFlow() {
     this._saveInitialAttribute(this._element, 'overflow')
     this._element.style.overflow = 'hidden'
   }
 
-  _setElementAttributes(selector, styleProp, callback) {
+  _setElementAttributes(selector, styleProperty, callback) {
     const scrollbarWidth = this.getWidth()
     const manipulationCallBack = element => {
       if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
         return
       }
 
-      this._saveInitialAttribute(element, styleProp)
-      const calculatedValue = window.getComputedStyle(element)[styleProp]
-      element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`
+      this._saveInitialAttribute(element, styleProperty)
+      const calculatedValue = window.getComputedStyle(element).getPropertyValue(styleProperty)
+      element.style.setProperty(styleProperty, `${callback(Number.parseFloat(calculatedValue))}px`)
     }
 
     this._applyManipulationCallback(selector, manipulationCallBack)
   }
 
-  reset() {
-    this._resetElementAttributes(this._element, 'overflow')
-    this._resetElementAttributes(this._element, 'paddingRight')
-    this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight')
-    this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight')
-  }
-
-  _saveInitialAttribute(element, styleProp) {
-    const actualValue = element.style[styleProp]
+  _saveInitialAttribute(element, styleProperty) {
+    const actualValue = element.style.getPropertyValue(styleProperty)
     if (actualValue) {
-      Manipulator.setDataAttribute(element, styleProp, actualValue)
+      Manipulator.setDataAttribute(element, styleProperty, actualValue)
     }
   }
 
-  _resetElementAttributes(selector, styleProp) {
+  _resetElementAttributes(selector, styleProperty) {
     const manipulationCallBack = element => {
-      const value = Manipulator.getDataAttribute(element, styleProp)
-      if (typeof value === 'undefined') {
-        element.style.removeProperty(styleProp)
-      } else {
-        Manipulator.removeDataAttribute(element, styleProp)
-        element.style[styleProp] = value
+      const value = Manipulator.getDataAttribute(element, styleProperty)
+      // We only want to remove the property if the value is `null`; the value can also be zero
+      if (value === null) {
+        element.style.removeProperty(styleProperty)
+        return
       }
+
+      Manipulator.removeDataAttribute(element, styleProperty)
+      element.style.setProperty(styleProperty, value)
     }
 
     this._applyManipulationCallback(selector, manipulationCallBack)
@@ -84,13 +102,12 @@ class ScrollBarHelper {
   _applyManipulationCallback(selector, callBack) {
     if (isElement(selector)) {
       callBack(selector)
-    } else {
-      SelectorEngine.find(selector, this._element).forEach(callBack)
+      return
     }
-  }
 
-  isOverflowing() {
-    return this.getWidth() > 0
+    for (const sel of SelectorEngine.find(selector, this._element)) {
+      callBack(sel)
+    }
   }
 }
 

package/js/src/util/swipe.js

@@ -0,0 +1,146 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.2.0-beta1): util/swipe.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import Config from './config'
+import EventHandler from '../dom/event-handler'
+import { execute } from './index'
+
+/**
+ * Constants
+ */
+
+const NAME = 'swipe'
+const EVENT_KEY = '.coreui.swipe'
+const EVENT_TOUCHSTART = `touchstart${EVENT_KEY}`
+const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY}`
+const EVENT_TOUCHEND = `touchend${EVENT_KEY}`
+const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY}`
+const EVENT_POINTERUP = `pointerup${EVENT_KEY}`
+const POINTER_TYPE_TOUCH = 'touch'
+const POINTER_TYPE_PEN = 'pen'
+const CLASS_NAME_POINTER_EVENT = 'pointer-event'
+const SWIPE_THRESHOLD = 40
+
+const Default = {
+  endCallback: null,
+  leftCallback: null,
+  rightCallback: null
+}
+
+const DefaultType = {
+  endCallback: '(function|null)',
+  leftCallback: '(function|null)',
+  rightCallback: '(function|null)'
+}
+
+/**
+ * Class definition
+ */
+
+class Swipe extends Config {
+  constructor(element, config) {
+    super()
+    this._element = element
+
+    if (!element || !Swipe.isSupported()) {
+      return
+    }
+
+    this._config = this._getConfig(config)
+    this._deltaX = 0
+    this._supportPointerEvents = Boolean(window.PointerEvent)
+    this._initEvents()
+  }
+
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  dispose() {
+    EventHandler.off(this._element, EVENT_KEY)
+  }
+
+  // Private
+  _start(event) {
+    if (!this._supportPointerEvents) {
+      this._deltaX = event.touches[0].clientX
+
+      return
+    }
+
+    if (this._eventIsPointerPenTouch(event)) {
+      this._deltaX = event.clientX
+    }
+  }
+
+  _end(event) {
+    if (this._eventIsPointerPenTouch(event)) {
+      this._deltaX = event.clientX - this._deltaX
+    }
+
+    this._handleSwipe()
+    execute(this._config.endCallback)
+  }
+
+  _move(event) {
+    this._deltaX = event.touches && event.touches.length > 1 ?
+      0 :
+      event.touches[0].clientX - this._deltaX
+  }
+
+  _handleSwipe() {
+    const absDeltaX = Math.abs(this._deltaX)
+
+    if (absDeltaX <= SWIPE_THRESHOLD) {
+      return
+    }
+
+    const direction = absDeltaX / this._deltaX
+
+    this._deltaX = 0
+
+    if (!direction) {
+      return
+    }
+
+    execute(direction > 0 ? this._config.rightCallback : this._config.leftCallback)
+  }
+
+  _initEvents() {
+    if (this._supportPointerEvents) {
+      EventHandler.on(this._element, EVENT_POINTERDOWN, event => this._start(event))
+      EventHandler.on(this._element, EVENT_POINTERUP, event => this._end(event))
+
+      this._element.classList.add(CLASS_NAME_POINTER_EVENT)
+    } else {
+      EventHandler.on(this._element, EVENT_TOUCHSTART, event => this._start(event))
+      EventHandler.on(this._element, EVENT_TOUCHMOVE, event => this._move(event))
+      EventHandler.on(this._element, EVENT_TOUCHEND, event => this._end(event))
+    }
+  }
+
+  _eventIsPointerPenTouch(event) {
+    return this._supportPointerEvents && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)
+  }
+
+  // Static
+  static isSupported() {
+    return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
+  }
+}
+
+export default Swipe

package/js/src/util/template-factory.js

@@ -0,0 +1,160 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.2.0-beta1): util/template-factory.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import { DefaultAllowlist, sanitizeHtml } from './sanitizer'
+import { getElement, isElement } from '../util/index'
+import SelectorEngine from '../dom/selector-engine'
+import Config from './config'
+
+/**
+ * Constants
+ */
+
+const NAME = 'TemplateFactory'
+
+const Default = {
+  allowList: DefaultAllowlist,
+  content: {}, // { selector : text ,  selector2 : text2 , }
+  extraClass: '',
+  html: false,
+  sanitize: true,
+  sanitizeFn: null,
+  template: '<div></div>'
+}
+
+const DefaultType = {
+  allowList: 'object',
+  content: 'object',
+  extraClass: '(string|function)',
+  html: 'boolean',
+  sanitize: 'boolean',
+  sanitizeFn: '(null|function)',
+  template: 'string'
+}
+
+const DefaultContentType = {
+  entry: '(string|element|function|null)',
+  selector: '(string|element)'
+}
+
+/**
+ * Class definition
+ */
+
+class TemplateFactory extends Config {
+  constructor(config) {
+    super()
+    this._config = this._getConfig(config)
+  }
+
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  getContent() {
+    return Object.values(this._config.content)
+      .map(config => this._resolvePossibleFunction(config))
+      .filter(Boolean)
+  }
+
+  hasContent() {
+    return this.getContent().length > 0
+  }
+
+  changeContent(content) {
+    this._checkContent(content)
+    this._config.content = { ...this._config.content, ...content }
+    return this
+  }
+
+  toHtml() {
+    const templateWrapper = document.createElement('div')
+    templateWrapper.innerHTML = this._maybeSanitize(this._config.template)
+
+    for (const [selector, text] of Object.entries(this._config.content)) {
+      this._setContent(templateWrapper, text, selector)
+    }
+
+    const template = templateWrapper.children[0]
+    const extraClass = this._resolvePossibleFunction(this._config.extraClass)
+
+    if (extraClass) {
+      template.classList.add(...extraClass.split(' '))
+    }
+
+    return template
+  }
+
+  // Private
+  _typeCheckConfig(config) {
+    super._typeCheckConfig(config)
+    this._checkContent(config.content)
+  }
+
+  _checkContent(arg) {
+    for (const [selector, content] of Object.entries(arg)) {
+      super._typeCheckConfig({ selector, entry: content }, DefaultContentType)
+    }
+  }
+
+  _setContent(template, content, selector) {
+    const templateElement = SelectorEngine.findOne(selector, template)
+
+    if (!templateElement) {
+      return
+    }
+
+    content = this._resolvePossibleFunction(content)
+
+    if (!content) {
+      templateElement.remove()
+      return
+    }
+
+    if (isElement(content)) {
+      this._putElementInTemplate(getElement(content), templateElement)
+      return
+    }
+
+    if (this._config.html) {
+      templateElement.innerHTML = this._maybeSanitize(content)
+      return
+    }
+
+    templateElement.textContent = content
+  }
+
+  _maybeSanitize(arg) {
+    return this._config.sanitize ? sanitizeHtml(arg, this._config.allowList, this._config.sanitizeFn) : arg
+  }
+
+  _resolvePossibleFunction(arg) {
+    return typeof arg === 'function' ? arg(this) : arg
+  }
+
+  _putElementInTemplate(element, templateElement) {
+    if (this._config.html) {
+      templateElement.innerHTML = ''
+      templateElement.append(element)
+      return
+    }
+
+    templateElement.textContent = element.textContent
+  }
+}
+
+export default TemplateFactory

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coreui/coreui",
-  "description": "The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintain by the CoreUI Team",
-  "version": "4.1.4",
+  "description": "The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintained by the CoreUI Team",
+  "version": "4.2.0",
   "config": {
     "version_short": "4.1"
   },
@@ -19,7 +19,7 @@
   "scripts": {
     "start": "npm-run-all --parallel watch docs-serve",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "changelog": "auto-changelog --template build/changelog-template.hbs --commit-limit false --package --backfill-limit 0 --starting-version v4.1.4",
+    "changelog": "auto-changelog --template build/changelog-template.hbs --commit-limit false --package --backfill-limit 0 --starting-version v4.2.0",
     "css": "npm-run-all css-compile css-prefix css-minify",
     "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
     "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
@@ -57,7 +57,7 @@
     "docs-serve": "hugo server --port 9001 --disableFastRender",
     "docs-serve-only": "npx sirv-cli _gh_pages --port 9001",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
-    "update-deps": "ncu -u -x globby,karma-browserstack-launcher && npm update && echo Manually update docs/assets/js/vendor",
+    "update-deps": "ncu -u -x globby,karma-browserstack-launcher,karma-rollup-preprocessor && echo Manually update site/assets/js/vendor",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
     "release-sri": "node build/generate-sri.js",
     "release-version": "node build/change-version.js",
@@ -83,57 +83,54 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@popperjs/core": "^2.11.2"
+    "@popperjs/core": "^2.11.5"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
-    "@babel/preset-env": "^7.16.11",
-    "@popperjs/core": "^2.11.2",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.5",
+    "@babel/preset-env": "^7.18.2",
+    "@popperjs/core": "^2.11.5",
     "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^21.0.2",
-    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
-    "auto-changelog": "^2.4.0",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.7",
     "bundlewatch": "^0.3.3",
-    "clean-css-cli": "^5.5.2",
+    "clean-css-cli": "^5.6.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.10.0",
-    "eslint-config-xo": "^0.40.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-unicorn": "^41.0.0",
-    "find-unused-sass-variables": "^4.0.3",
-    "glob": "^7.2.0",
-    "globby": "^11.0.4",
+    "eslint": "^8.17.0",
+    "eslint-config-xo": "^0.41.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-markdown": "^2.2.1",
+    "eslint-plugin-unicorn": "^42.0.0",
+    "find-unused-sass-variables": "^4.0.4",
+    "globby": "^11.1.0",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.81.1",
-    "ip": "^1.1.5",
+    "hugo-bin": "^0.88.2",
+    "ip": "^2.0.0",
     "jquery": "^3.6.0",
-    "karma": "^6.3.17",
-    "karma-browserstack-launcher": "1.6.0",
-    "karma-chrome-launcher": "^3.1.0",
+    "karma": "^6.4.0",
+    "karma-browserstack-launcher": "1.4.0",
+    "karma-chrome-launcher": "^3.1.1",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-detect-browsers": "^2.3.3",
     "karma-firefox-launcher": "^2.1.2",
-    "karma-jasmine": "^4.0.1",
-    "karma-jasmine-html-reporter": "^1.7.0",
-    "karma-rollup-preprocessor": "^7.0.8",
-    "linkinator": "^3.0.3",
-    "lockfile-lint": "^4.6.2",
-    "nodemon": "^2.0.15",
+    "karma-jasmine": "^5.0.1",
+    "karma-jasmine-html-reporter": "^2.0.0",
+    "karma-rollup-preprocessor": "7.0.7",
+    "lockfile-lint": "^4.7.5",
+    "nodemon": "^2.0.16",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.7",
+    "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
-    "rollup": "^2.69.0",
+    "rollup": "^2.75.6",
     "rollup-plugin-istanbul": "^3.0.0",
     "rtlcss": "^3.5.0",
-    "sass": "^1.49.9",
+    "sass": "^1.52.3",
     "shelljs": "^0.8.5",
-    "stylelint": "^14.5.3",
-    "stylelint-config-twbs-bootstrap": "^3.0.1",
-    "terser": "^5.12.0",
+    "stylelint": "^14.9.1",
+    "stylelint-config-twbs-bootstrap": "^4.0.0",
+    "terser": "^5.14.1",
     "vnu-jar": "21.10.12"
   },
   "files": [
@@ -159,7 +156,10 @@
     },
     "dependencies": {},
     "peerDependencies": {
-      "@popperjs/core": "^2.11.2"
+      "@popperjs/core": "^2.11.5"
     }
+  },
+  "dependencies": {
+    "postcss-combine-duplicated-selectors": "^10.0.3"
   }
 }