fix

assets/bsCore/bsCore.js

@@ -1,8 +1,6 @@
 kit.PluginManager.register('bsCore', function(module, exports, require, global){
 
-    /**
-     * @class kit.bsCore
-     */
+    /** @class kitBsCore */
     var bsCore = {};
     var dom = {};
     var util = {};

assets/config/config.js

@@ -1,7 +1,16 @@
+/**
+ * @var kit
+ * @type {kitCore}
+ */
 window.kit = window.kit || {};
+/**
+ * @var kit.config
+ * @type {kitConfig}
+ */
 kit.config = kit.config || {};
 
 kit.config.assetsPath = '/local/templater.dev/kit/assets';
 kit.config.requiredDependencies = ['bsCore', 'toolkit'];
 kit.config.autoloadPluginList = ['tooltip'];
-kit.config.debug = true;
+kit.config.debug = true;
+kit.config.defaultPhoneMask = '+7 (999) 999-99-99';

assets/config/toolkit.config.css

@@ -63,13 +63,13 @@
     --kit-color: #1a1a1a;
     --kit-color-text-hover: var(--kit-color-primary);
 
-    --kit-color-primary-w3: hsl(22, 100%, 70%);
-    --kit-color-primary-w2: hsl(22, 100%, 65%);
-    --kit-color-primary-w1: hsl(22, 100%, 60%);
-    --kit-color-primary: hsl(22, 100%, 55%);
-    --kit-color-primary-b1: hsl(22, 100%, 50%);
-    --kit-color-primary-b2: hsl(22, 100%, 45%);
-    --kit-color-primary-b3: hsl(22, 100%, 40%);
+    --kit-color-primary-w3: hsl(210, 100%, 70%);
+    --kit-color-primary-w2: hsl(210, 100%, 65%);
+    --kit-color-primary-w1: hsl(210, 100%, 60%);
+    --kit-color-primary: hsl(210, 100%, 55%);
+    --kit-color-primary-b1: hsl(210, 100%, 50%);
+    --kit-color-primary-b2: hsl(210, 100%, 45%);
+    --kit-color-primary-b3: hsl(210, 100%, 40%);
     --kit-color-primary-text: #FFF;
 
     --kit-color-secondary-w3: hsl(0, 0%, 70%);

assets/cookie/cookie.js

@@ -96,7 +96,7 @@ kit.PluginManager.register('cookie', function(module, exports, require){
 
 
         /**
-         * @class kit.cookie
+         * @class kitCookie
          */
         return Object.create(
             {

assets/core/core.js

@@ -1,9 +1,6 @@
 /**
- * @class kit
- * @property  {kit.bsCore}
- * @property  {kit.toolkit}
- * @property  {kit.Modal}
- * @property  {kit.cookie}
+ * @class kitCore
+ * @extends kitCorePlugins
  */
 window.kit = window.kit || {};
 (function(global){
@@ -52,6 +49,12 @@ window.kit = window.kit || {};
         return this;
     };
 
+    /**
+     *
+     * @param pluginId
+     * @param {kitModuleTypeLoader|{}} config
+     * @return {boolean}
+     */
     __proto.register = function (pluginId, config = {}) {
         //console.warn('PluginManager.register: plugin ' + pluginId + ' ('+(this.plugins[pluginId]?this.plugins[pluginId].state:'0')+')');
         var defaultPlugin = {
@@ -427,6 +430,12 @@ window.kit = window.kit || {};
         return this;
     };
 
+    /**
+     * @name kitPluginManagerRequire
+     * @param {string} pluginId
+     * @param {callback} callback
+     * @return {boolean}
+     */
     __proto.require = function (pluginId, callback) {
         //console.warn('PluginManager.require: plugin ' + pluginId + ' ('+(this.plugins[pluginId]?this.plugins[pluginId].state:'0')+')');
 
@@ -584,11 +593,15 @@ window.kit = window.kit || {};
         return undefined;
     };
 
+    /**
+     * @class kitConfig
+     */
     var defaultConfig = {
         assetsPath: '',
         requiredDependencies: [],
         autoloadPluginList: [],
         debug: false,
+        defaultPhoneMask: '+7 (999) 999-99-99',
     };
     var manager = new PluginManager(global);
     manager.register('PluginManager', {
@@ -613,5 +626,7 @@ window.kit = window.kit || {};
     global.ready = manager.ready.bind(manager);
     global.exec = manager.exec.bind(manager);
     global.require = manager.require.bind(manager);
+    /** @type {kitCore} */
+    window.__pmGlobal__ = global;
 })(kit);
 

assets/core/core.register.js

@@ -29,21 +29,12 @@ __PluginManager__.registerPlugins({
         type: 'loader',
         alias: '$',
     },
-    tooltip: {
-        path: __pmConfig__.assetsPath + '/tooltip',
-        module: '/tooltip.js',
-        type: 'loader',
-        css: '/tooltip.css',
-        onInstall: function(){
-            kit.$('[data-toggle="tooltip"]').tooltip();
-        },
-        deps: ['popper', 'bsCore'],
-    },
     popper: {
         path: __pmConfig__.assetsPath + '/popper',
         alias: 'popper.js',
         module: '/popper.js',
         type: 'loader',
+        css: '/popper.css',
     },
     bsCore: {
         path: __pmConfig__.assetsPath + '/bsCore',
@@ -53,6 +44,32 @@ __PluginManager__.registerPlugins({
             '/bsCore.css'
         ]
     },
+    Tooltip: {
+        path: __pmConfig__.assetsPath + '/tooltip',
+        module: '/tooltip.js',
+        type: 'loader',
+        css: '/tooltip.css',
+        onInstall: function(){
+            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new __pmGlobal__.Tooltip(tooltipTriggerEl, {sanitize: false});
+            });
+        },
+        deps: ['popper', 'bsCore'],
+    },
+    Popover: {
+        path: __pmConfig__.assetsPath + '/popover',
+        module: '/popover.js',
+        type: 'loader',
+        css: '/popover.css',
+        onInstall: function(){
+            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+            var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+                return new __pmGlobal__.Popover(popoverTriggerEl);
+            });
+        },
+        deps: ['popper', 'bsCore'],
+    },
     mask: {
         path: __pmConfig__.assetsPath + '/mask',
         module: '/mask.js',

assets/core/doc.js

@@ -0,0 +1,20 @@
+/**
+ * @typedef kitModuleTypeLoader
+ * @param module {{exports: Object}}
+ * @param exports {Object}
+ * @param require {kitPluginManagerRequire}
+ * @param global {kitCore}
+ */
+
+/**
+ * @typedef {Object} kitCorePlugins
+ * @property {kitPluginManagerRequire} require
+ * @property {kitBsCore} bsCore
+ * @property {kitToolkit} toolkit
+ * @property {kitModal} Modal
+ * @property {kitCookie} cookie
+ * @property {kitConfig} config
+ * @property {kitTooltip} tooltip
+ * @property {kitPopover} popover
+ * @property {kitPopper} popper
+ */

assets/modal/modal.js

@@ -74,7 +74,7 @@ kit.PluginManager.register('modal', function(module, exports, require){
    * ------------------------------------------------------------------------
    */
   /**
-   * @class kit.Modal
+   * @class kitModal
    */
   class Modal extends BaseComponent {
     constructor(element, config) {

assets/popover/popover.css

@@ -0,0 +1,71 @@
+:root {
+
+}
+.popover {
+    --gap: 10px;
+    --popper-border-width: 1px;
+    --popper-border-color: #ccc;
+    position: absolute;
+    top: 0;
+    left: 0 /* rtl:ignore */;
+    z-index: 1070;
+    display: block;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: left;
+    text-align: start;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-break: normal;
+    word-spacing: normal;
+    white-space: normal;
+    line-break: auto;
+    font-size: var(--popper-font-size);
+    word-wrap: break-word;
+    background-color: transparent;
+    background-clip: padding-box;
+    border: 0;
+    border-radius: 0;
+}
+.popover .popover-arrow {
+
+}
+
+.popover-header:empty {
+    display: none;
+}
+
+.popover-content {
+    border-radius: 3px;
+    overflow: hidden;
+    max-width: 200px;
+    padding: 0;
+    color: var(--popper-color);
+    text-align: center;
+    background-color: var(--popper-content-color);
+    border: var(--popper-border-width) solid var(--popper-border-color);
+    box-shadow: 0px 0px 5px -1px var(--popper-border-color);
+}
+.popover-header {
+    padding: calc(var(--gap) / 2) calc(var(--gap));
+    margin-bottom: 0;
+    font-size: 1em;
+    background-color: #f0f0f0;
+    border-bottom: var(--popper-border-width) solid var(--popper-border-color);
+    border-radius: 0;
+}
+.popover-body {
+    padding: calc(var(--gap) / 2) calc(var(--gap));
+    background-color: var(--popper-body-content-color);
+}
+.popover-footer:empty {
+    display: none;
+}
+.popover-footer {
+    padding: calc(var(--gap) / 2) calc(var(--gap));
+    background-color: var(--popper-footer-content-color);
+}

assets/popover/popover.js

@@ -0,0 +1,185 @@
+kit.PluginManager.register('popover',function(module, exports, require){
+    /**
+     * --------------------------------------------------------------------------
+     * Bootstrap (v5.0.2): popover.js
+     * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+     * --------------------------------------------------------------------------
+     */
+
+    /** @type {kitTooltip} */
+    var Tooltip = require('tooltip');
+
+    /** @type {kitBsCore} */
+    var bsCore = require('bsCore');
+
+    var { defineJQueryPlugin } = bsCore.util.index;
+    var SelectorEngine = bsCore.dom.SelectorEngine;
+
+    /**
+     * ------------------------------------------------------------------------
+     * Constants
+     * ------------------------------------------------------------------------
+     */
+
+    const NAME = 'popover'
+    const DATA_KEY = 'bs.popover'
+    const EVENT_KEY = `.${DATA_KEY}`
+    const CLASS_PREFIX = 'bs-popover'
+    const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
+
+    const Default = {
+        ...Tooltip.Default,
+        placement: 'right',
+        offset: [0, 0],
+        trigger: 'click',
+        content: '',
+        template: '<div class="popover" role="tooltip">' +
+            '<div class="popover-arrow" data-popper-arrow="true"></div>' +
+            '<div class="popover-content">' +
+            '<h3 class="popover-header"></h3>' +
+            '<div class="popover-body"></div>' +
+            '<div class="popover-footer"></div>' +
+            '</div>' +
+            '</div>'
+    }
+
+    const DefaultType = {
+        ...Tooltip.DefaultType,
+        content: '(string|element|function)'
+    }
+
+    const Event = {
+        HIDE: `hide${EVENT_KEY}`,
+        HIDDEN: `hidden${EVENT_KEY}`,
+        SHOW: `show${EVENT_KEY}`,
+        SHOWN: `shown${EVENT_KEY}`,
+        INSERTED: `inserted${EVENT_KEY}`,
+        CLICK: `click${EVENT_KEY}`,
+        FOCUSIN: `focusin${EVENT_KEY}`,
+        FOCUSOUT: `focusout${EVENT_KEY}`,
+        MOUSEENTER: `mouseenter${EVENT_KEY}`,
+        MOUSELEAVE: `mouseleave${EVENT_KEY}`
+    }
+
+    const CLASS_NAME_FADE = 'fade'
+    const CLASS_NAME_SHOW = 'show'
+
+    const SELECTOR_TITLE = '.popover-header'
+    const SELECTOR_CONTENT = '.popover-body'
+
+    /**
+     * ------------------------------------------------------------------------
+     * Class Definition
+     * ------------------------------------------------------------------------
+     */
+    /** @class kitPopover */
+    class Popover extends Tooltip {
+        // Getters
+
+        static get Default() {
+            return Default
+        }
+
+        static get NAME() {
+            return NAME
+        }
+
+        static get Event() {
+            return Event
+        }
+
+        static get DefaultType() {
+            return DefaultType
+        }
+
+        // Overrides
+
+        isWithContent() {
+            return this.getTitle() || this._getContent()
+        }
+
+        getTipElement() {
+            if (this.tip) {
+                return this.tip
+            }
+
+            this.tip = super.getTipElement()
+
+            if (!this.getTitle()) {
+                SelectorEngine.findOne(SELECTOR_TITLE, this.tip).remove()
+            }
+
+            if (!this._getContent()) {
+                SelectorEngine.findOne(SELECTOR_CONTENT, this.tip).remove()
+            }
+
+            return this.tip
+        }
+
+        setContent() {
+            const tip = this.getTipElement()
+
+            // we use append for html objects to maintain js events
+            this.setElementContent(SelectorEngine.findOne(SELECTOR_TITLE, tip), this.getTitle())
+            let content = this._getContent()
+            if (typeof content === 'function') {
+                content = content.call(this._element)
+            }
+
+            this.setElementContent(SelectorEngine.findOne(SELECTOR_CONTENT, tip), content)
+
+            tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW)
+        }
+
+        // Private
+
+        _addAttachmentClass(attachment) {
+            this.getTipElement().classList.add(`${CLASS_PREFIX}-${this.updateAttachment(attachment)}`)
+        }
+
+        _getContent() {
+            return this._element.getAttribute('data-bs-content') || this._config.content
+        }
+
+        _cleanTipClass() {
+            const tip = this.getTipElement()
+            const tabClass = tip.getAttribute('class').match(BSCLS_PREFIX_REGEX)
+            if (tabClass !== null && tabClass.length > 0) {
+                tabClass.map(token => token.trim())
+                    .forEach(tClass => tip.classList.remove(tClass))
+            }
+        }
+
+        // Static
+
+        static jQueryInterface(config) {
+            return this.each(function () {
+                const data = Popover.getOrCreateInstance(this, config)
+
+                if (typeof config === 'string') {
+                    if (typeof data[config] === 'undefined') {
+                        throw new TypeError(`No method named "${config}"`)
+                    }
+
+                    data[config]()
+                }
+            })
+        }
+    }
+
+    /**
+     * ------------------------------------------------------------------------
+     * jQuery
+     * ------------------------------------------------------------------------
+     * add .Popover to jQuery only if jQuery is present
+     */
+
+    defineJQueryPlugin(Popover)
+
+    module.exports = Popover;
+
+    return module.exports;
+});
+
+
+

assets/popper/popper.css

@@ -0,0 +1,139 @@
+:root {
+    --popper-font-size: 0.8em;
+    --popper-border-color: #212121fa;
+    --popper-border-width: 1px;
+    --popper-arrow-width: 0.7em;
+    --popper-color: #1a1a1a;
+    --popper-content-color: #fff;
+    --popper-header-color: #1a1a1a;
+    --popper-header-content-color: #fff;
+    --popper-body-color: #1a1a1a;
+    --popper-body-content-color: #fff;
+    --popper-footer-color: #1a1a1a;
+    --popper-footer-content-color: #fff;
+    --math-sqrt-2: 1.414213562373095;
+}
+
+
+[data-popper-arrow] {
+    position: absolute;
+    display: block;
+    width: 0.8rem;
+    height: 0.4rem;
+    overflow: hidden;
+}
+
+[data-popper-arrow]::before {
+    border-width: var(--popper-border-width) var(--popper-border-width) 0px 0px;
+    position: absolute;
+    content: "";
+    border-color: transparent;
+    border-style: solid;
+    width: calc(var(--popper-arrow-width) + var(--popper-border-width));
+    height: calc(var(--popper-arrow-width) + var(--popper-border-width));
+    background-color: var(--popper-content-color);
+    box-shadow: 0px 0px 4px -2px var(--popper-content-color);
+}
+/*top*/
+[data-popper-placement^="top"] {
+    padding: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1)) 0;
+}
+
+[data-popper-placement^="top"] [data-popper-arrow] {
+    bottom: 0;
+    width: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    height: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    /* left: 50% !important; */
+    /* transform: translate(-50%, 0); */
+}
+
+[data-popper-placement^="top"] [data-popper-arrow]::before {
+    bottom: 0;
+    left: 50%;
+    transform: rotate(
+            225deg
+    ) translate(0, 100%);
+    transform-origin: 0 100%;
+    border-left-color: var(
+            --popper-border-color);
+    border-top-color: var(
+            --popper-border-color);
+    border-width: var(--popper-border-width) 0 0 var(--popper-border-width);
+}
+/*right*/
+[data-popper-placement^="right"] {
+    padding: 0 calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1));
+}
+
+[data-popper-placement^="right"] [data-popper-arrow] {
+    left: 0;
+    width: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    height: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    top: 50% !important;
+    transform: translate(0px, -50%) !important;
+}
+
+[data-popper-placement^="right"] [data-popper-arrow]::before {
+    left: 0px;
+    top: 50%;
+    transform: rotate(
+            225deg
+    ) translate(25%, -50%);
+    transform-origin: 75% 0;
+    border-right-color: var(
+            --popper-border-color);
+    border-top-color: var(
+            --popper-border-color);
+}
+/*bottom*/
+[data-popper-placement^="bottom"] {
+    padding: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1)) 0;
+}
+
+[data-popper-placement^="bottom"] [data-popper-arrow] {
+    top: 0;
+    width: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    height: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    /*left: 50% !important;*/
+    /*transform: translate(-50%, 0);*/
+}
+
+[data-popper-placement^="bottom"] [data-popper-arrow]::before {
+    top: 0;
+    left: 50%;
+    transform: rotate(
+            45deg
+    ) translate(0, 0);
+    transform-origin: 0 0;
+    border-left-color: var(
+            --popper-border-color);
+    border-top-color: var(
+            --popper-border-color);
+    border-width: var(--popper-border-width) 0 0 var(--popper-border-width);
+}
+
+/*left*/
+[data-popper-placement^="left"] {
+    padding: 0 calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1));
+}
+
+[data-popper-placement^="left"] [data-popper-arrow] {
+    right: 0;
+    width: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    height: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    top: 50% !important;
+    transform: translate(0px, -50%) !important;
+}
+
+[data-popper-placement^="left"] [data-popper-arrow]::before {
+    right: 0;
+    top: 50%;
+    transform: rotate(
+            45deg
+    ) translate(-25%, -50%);
+    transform-origin: 25% 0;
+    border-right-color: var(
+            --popper-border-color);
+    border-top-color: var(
+            --popper-border-color);
+}

assets/toolkit/toolkit.css

@@ -705,12 +705,16 @@
 .kit-button * {
     pointer-events: none;
 }
-.kit-button:hover,
-.kit-button:focus {
+.kit-button:hover {
     --kit-color-button-text: var(--kit-color-button-text-hover);
     --kit-color-button-content: var(--kit-color-button-content-hover);
     --kit-color-button-material: var(--kit-color-button-material-hover);
 }
+.kit-button:focus {
+    --kit-color-button-text: var(--kit-color-button-text-active);
+    --kit-color-button-content: var(--kit-color-button-content-active);
+    --kit-color-button-material: var(--kit-color-button-material-active);
+}
 .kit-button:active {
     --kit-color-button-text: var(--kit-color-button-text-active);
     --kit-color-button-content: var(--kit-color-button-content-active);
@@ -727,7 +731,7 @@
     box-shadow: inset 0 -2px 0 var(--kit-color-button-material);
 }
 .kit-button.kit-button--material:hover {
-    box-shadow: inset 0 -3px 0 var(--kit-color-button-material);
+    box-shadow: inset 0 -2px 0 var(--kit-color-button-material);
 }
 .kit-button__icon {
     display: inline-block;
@@ -750,7 +754,10 @@
 .kit-button:disabled,
 .kit-button[disabled],
 .kit-button.disabled,
-.kit-button.inactive-button {
+.kit-button.inactive-button,
+.kit-button[loading],
+.kit-button.loading {
+    opacity: 0.7;
     --kit-color-button-content: var(--kit-color-button-content-disabled);
     --kit-color-button-text:var(--kit-color-button-text-disabled);
     --kit-color-button-material: var(--kit-color-button-material-disabled);

assets/toolkit/toolkit.js

@@ -1,35 +1,10 @@
-import assign from "../../../../../_utils/cookie/src/assign";
-import defaultConverter from "../../../../../_utils/cookie/src/converter";
-
-kit.PluginManager.register('toolkit',function(module, exports, require) {
+kit.PluginManager.register('toolkit', function(module, exports, require, global) {
 
     var $ = require('jquery');
 
-
-
-    var __Config = function () {
-
-        function Config() {
-            this.mask =
-                {
-                    tel: '+375 (99) 999-99-99'
-                }
-        }
-
-        Config.prototype.test = function test() {
-
-        };
-
-        return Config;
-    }();
-    var Config = new __Config();
-
-
     var __Helper = function () {
 
-        function Helper() {
-
-        }
+        function Helper() {}
 
         /**
          * @description Вызывает событие
@@ -859,7 +834,7 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
         Inputs.prototype.setTelMask = function () {
             var _this3 = this;
 
-            $('[type=tel]').mask(Config.mask.tel, {
+            $('[type=tel]').mask(global.config.defaultPhoneMask, {
                 placeholder: '_', completed: function completed() {
                     _this3.fieldNormalize(this);
                 }
@@ -953,12 +928,11 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
 
 
     /**
-     * @class kit.toolkit
+     * @class kitToolkit
      */
     var toolkit = {
         Helper: Helper,
         Select: Select(),
-        Config: Config,
         Message: Message,
         Inputs: Inputs,
         device: device,

assets/tooltip/tooltip.css

@@ -1,13 +1,10 @@
-:root {
-    --kit-tooltip-font-size: 0.8em;
-    --kit-tooltip-color: #ffffff;
-    --kit-tooltip-content-color: #212121fa;
-    --kit-tooltip-border-color: #212121fa;
-    --kit-tooltip-border-width: 0px;
-    --kit-tooltip-arrow-width: 0.7em;
-    --math-sqrt-2: 1.414213562373095;
-}
+
 .tooltip {
+    --popper-border-color: #212121fa;
+    --popper-border-width: 0em;
+    --popper-arrow-width: 0.7em;
+    --popper-color: #ffffff;
+    --popper-content-color: #212121fa;
     position: absolute;
     z-index: 1070;
     display: block;
@@ -26,7 +23,7 @@
     word-spacing: normal;
     white-space: normal;
     line-break: auto;
-    font-size: var(--kit-tooltip-font-size);
+    font-size: var(--popper-font-size);
     word-wrap: break-word;
     opacity: 0;
 }
@@ -35,145 +32,13 @@
     opacity: 0.9;
 }
 
-.tooltip .tooltip-arrow {
-    position: absolute;
-    display: block;
-    width: 0.8rem;
-    height: 0.4rem;
-    overflow: hidden;
-}
-
-.tooltip .tooltip-arrow::before {
-    border-width: var(--kit-tooltip-border-width) var(--kit-tooltip-border-width) 0px 0px;
-    position: absolute;
-    content: "";
-    border-color: transparent;
-    border-style: solid;
-    width: var(--kit-tooltip-arrow-width);
-    height: var(--kit-tooltip-arrow-width);
-    background-color: var(--kit-tooltip-content-color);
-    box-shadow: 0px 0px 4px -2px var(--kit-tooltip-content-color);
-}
-/*top*/
-.kit-tooltip-top, .kit-tooltip-auto[x-placement^="top"] {
-    padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
-}
-
-.kit-tooltip-top .tooltip-arrow, .kit-tooltip-auto[x-placement^="top"] .tooltip-arrow {
-    bottom: 0;
-    width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    /* left: 50% !important; */
-    /* transform: translate(-50%, 0); */
-}
-
-.kit-tooltip-top .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="top"] .tooltip-arrow::before {
-    bottom: 0;
-    left: 50%;
-    transform: rotate(
-            225deg
-    ) translate(0, 100%);
-    transform-origin: 0 100%;
-    border-left-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-    border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
-}
-/*right*/
-.kit-tooltip-right, .kit-tooltip-auto[x-placement^="right"], .kit-tooltip-end {
-    padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
-}
-
-.kit-tooltip-right .arrow,
-.kit-tooltip-auto[x-placement^="right"] .arrow,
-.kit-tooltip-end .tooltip-arrow {
-    left: 0;
-    width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    top: 50% !important;
-    transform: translate(0px, -50%) !important;
-}
-
-.kit-tooltip-right .arrow::before,
-.kit-tooltip-auto[x-placement^="right"] .arrow::before,
-.kit-tooltip-end .tooltip-arrow::before {
-    left: 0px;
-    top: 50%;
-    transform: rotate(
-            225deg
-    ) translate(25%, -50%);
-    transform-origin: 75% 0;
-    border-right-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-}
-/*bottom*/
-.kit-tooltip-bottom, .kit-tooltip-auto[x-placement^="bottom"] {
-    padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
-}
-
-.kit-tooltip-bottom .tooltip-arrow, .kit-tooltip-auto[x-placement^="bottom"] .arrow {
-    top: 0;
-    width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    /*left: 50% !important;*/
-    /*transform: translate(-50%, 0);*/
-}
-
-.kit-tooltip-bottom .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="bottom"] .arrow::before {
-    top: 0;
-    left: 50%;
-    transform: rotate(
-            45deg
-    ) translate(0, 0);
-    transform-origin: 0 0;
-    border-left-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-    border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
-}
-
-/*left*/
-.kit-tooltip-left,
-.kit-tooltip-auto[x-placement^="left"],
-.kit-tooltip-start {
-    padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
-}
-
-.kit-tooltip-left .arrow, .kit-tooltip-auto[x-placement^="left"] .arrow,
-.kit-tooltip-start .tooltip-arrow {
-    right: 0;
-    width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    top: 50% !important;
-    transform: translate(0px, -50%) !important;
-}
-
-.kit-tooltip-left .arrow::before,
-.kit-tooltip-auto[x-placement^="left"] .arrow::before,
-.kit-tooltip-start .tooltip-arrow::before {
-    right: 0;
-    top: 50%;
-    transform: rotate(
-            45deg
-    ) translate(-25%, -50%);
-    transform-origin: 25% 0;
-    border-right-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-}
-
 .tooltip-inner {
     max-width: 200px;
     padding: 0.25rem 0.5rem;
-    color: var(--kit-tooltip-color);
+    color: var(--popper-color);
     text-align: center;
-    background-color: var(--kit-tooltip-content-color);
+    background-color: var(--popper-content-color);
     border-radius: 0.25rem;
-    border: var(--kit-tooltip-border-width) solid var(--kit-tooltip-border-color);
-    box-shadow: 0px 0px 5px -1px var(--kit-tooltip-content-color);
+    border: var(--popper-border-width) solid var(--popper-border-color);
+    box-shadow: 0px 0px 5px -1px var(--popper-content-color);
 }

assets/tooltip/tooltip.js

@@ -25,9 +25,9 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
      */
 
     const NAME = 'tooltip'
-    const DATA_KEY = 'kit.tooltip'
+    const DATA_KEY = 'bs.tooltip'
     const EVENT_KEY = `.${DATA_KEY}`
-    const CLASS_PREFIX = 'kit-tooltip'
+    const CLASS_PREFIX = 'bs-tooltip'
     const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
     const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn'])
 
@@ -62,7 +62,7 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
     const Default = {
         animation: true,
         template: '<div class="tooltip" role="tooltip">' +
-            '<div class="tooltip-arrow"></div>' +
+            '<div class="tooltip-arrow" data-popper-arrow="true"></div>' +
             '<div class="tooltip-inner"></div>' +
             '</div>',
         trigger: 'hover focus',
@@ -76,7 +76,7 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
         fallbackPlacements: ['top', 'right', 'bottom', 'left'],
         boundary: 'clippingParents',
         customClass: '',
-        sanitize: true,
+        sanitize: false,
         sanitizeFn: null,
         allowList: DefaultAllowlist,
         popperConfig: null
@@ -115,6 +115,7 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
      * ------------------------------------------------------------------------
      */
 
+    /** @class kitTooltip */
     class Tooltip extends BaseComponent {
         constructor(element, config) {
             if (typeof Popper === 'undefined') {
@@ -405,7 +406,7 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
         }
 
         getTitle() {
-            let title = this._element.getAttribute('data-kit-original-title')
+            let title = this._element.getAttribute('data-bs-original-title')
 
             if (!title) {
                 title = typeof this._config.title === 'function' ?
@@ -552,10 +553,10 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
 
         _fixTitle() {
             const title = this._element.getAttribute('title')
-            const originalTitleType = typeof this._element.getAttribute('data-kit-original-title')
+            const originalTitleType = typeof this._element.getAttribute('data-bs-original-title')
 
             if (title || originalTitleType !== 'string') {
-                this._element.setAttribute('data-kit-original-title', title || '')
+                this._element.setAttribute('data-bs-original-title', title || '')
                 if (title && !this._element.getAttribute('aria-label') && !this._element.textContent) {
                     this._element.setAttribute('aria-label', title)
                 }

assets/tooltip/tooltipJq.css

@@ -1,171 +0,0 @@
-:root {
-    --kit-tooltip-font-size: 0.8em;
-    --kit-tooltip-color: #ffffff;
-    --kit-tooltip-content-color: #212121fa;
-    --kit-tooltip-border-color: #212121fa;
-    --kit-tooltip-border-width: 0px;
-    --kit-tooltip-arrow-width: 0.8em;
-    --math-sqrt-2: 1.414213562373095;
-}
-.tooltip {
-    position: absolute;
-    z-index: 1070;
-    display: block;
-    margin: 0;
-    font-family: inherit;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.5;
-    text-align: left;
-    text-align: start;
-    text-decoration: none;
-    text-shadow: none;
-    text-transform: none;
-    letter-spacing: normal;
-    word-break: normal;
-    word-spacing: normal;
-    white-space: normal;
-    line-break: auto;
-    font-size: var(--kit-tooltip-font-size);
-    word-wrap: break-word;
-    opacity: 0;
-}
-
-.tooltip.show {
-    opacity: 0.9;
-}
-
-.tooltip .arrow {
-    position: absolute;
-    display: block;
-    width: 0.8rem;
-    height: 0.4rem;
-    overflow: hidden;
-}
-
-.tooltip .arrow::before {
-    border-width: var(--kit-tooltip-border-width) var(--kit-tooltip-border-width) 0px 0px;
-    position: absolute;
-    content: "";
-    border-color: transparent;
-    border-style: solid;
-    width: var(--kit-tooltip-arrow-width);
-    height: var(--kit-tooltip-arrow-width);
-    background-color: var(--kit-tooltip-content-color);
-    box-shadow: 0px 0px 4px -2px var(--kit-tooltip-content-color);
-}
-
-.kit-tooltip-top, .kit-tooltip-auto[x-placement^="top"] {
-    padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
-}
-
-.kit-tooltip-top .arrow, .kit-tooltip-auto[x-placement^="top"] .arrow {
-    bottom: 0;
-    width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    /* left: 50% !important; */
-    /* transform: translate(-50%, 0); */
-}
-
-.kit-tooltip-top .arrow::before, .kit-tooltip-auto[x-placement^="top"] .arrow::before {
-    bottom: 0;
-    left: 50%;
-    transform: rotate(
-            225deg
-    ) translate(0, 100%);
-    transform-origin: 0 100%;
-    border-left-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-    border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
-}
-
-.kit-tooltip-right, .kit-tooltip-auto[x-placement^="right"] {
-    padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
-}
-
-.kit-tooltip-right .arrow, .kit-tooltip-auto[x-placement^="right"] .arrow {
-    left: 0;
-    width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    top: 50% !important;
-    transform: translate(0px, -50%);
-}
-
-.kit-tooltip-right .arrow::before, .kit-tooltip-auto[x-placement^="right"] .arrow::before {
-    left: 0px;
-    top: 50%;
-    transform: rotate(
-            225deg
-    ) translate(25%, -50%);
-    transform-origin: 75% 0;
-    border-right-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-}
-
-.kit-tooltip-bottom, .kit-tooltip-auto[x-placement^="bottom"] {
-    padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
-}
-
-.kit-tooltip-bottom .arrow, .kit-tooltip-auto[x-placement^="bottom"] .arrow {
-    top: 0;
-    width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    /*left: 50% !important;*/
-    /*transform: translate(-50%, 0);*/
-}
-
-.kit-tooltip-bottom .arrow::before, .kit-tooltip-auto[x-placement^="bottom"] .arrow::before {
-    top: 0;
-    left: 50%;
-    transform: rotate(
-            45deg
-    ) translate(0, 0);
-    transform-origin: 0 0;
-    border-left-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-    border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
-}
-
-::before {}
-
-.kit-tooltip-left, .kit-tooltip-auto[x-placement^="left"] {
-    padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
-}
-
-.kit-tooltip-left .arrow, .kit-tooltip-auto[x-placement^="left"] .arrow {
-    right: 0;
-    width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    top: 50% !important;
-    transform: translate(0px, -50%);
-}
-
-.kit-tooltip-left .arrow::before, .kit-tooltip-auto[x-placement^="left"] .arrow::before {
-    right: 0;
-    top: 50%;
-    transform: rotate(
-            45deg
-    ) translate(-25%, -50%);
-    transform-origin: 25% 0;
-    border-right-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-}
-
-.tooltip-inner {
-    max-width: 200px;
-    padding: 0.25rem 0.5rem;
-    color: var(--kit-tooltip-color);
-    text-align: center;
-    background-color: var(--kit-tooltip-content-color);
-    border-radius: 0.25rem;
-    border: var(--kit-tooltip-border-width) solid var(--kit-tooltip-border-color);
-    box-shadow: 0px 0px 5px -1px var(--kit-tooltip-content-color);
-}