@unlk/keymaster 1.6.2 → 1.6.4

package/js/carousel-caption.js

@@ -1,18 +1,18 @@
-import BaseComponent from 'bootstrap/js/src/base-component.js';
 import EventHandler from 'bootstrap/js/src/dom/event-handler.js';
 import SelectorEngine from 'bootstrap/js/src/dom/selector-engine.js';
-import { defineJQueryPlugin } from 'bootstrap/js/src/util/index.js';
 
-const NAME = 'carouselCaption';
-const EVENT_SLID = 'slid.bs.carousel';
+const EVENT_SLID        = 'slid.bs.carousel';
 const SELECTOR_CAROUSEL = '.carousel';
-const SELECTOR_CAPTION = '.carousel-caption-container p';
+const SELECTOR_CAPTION  = '.carousel-caption-container p';
 
-class CarouselCaption extends BaseComponent {
+const instances = new WeakMap();
+
+class CarouselCaption {
   constructor(element) {
-    super(element);
-    this._captionEl = this._findCaptionEl();
+    this._element   = element;
+    this._captionEl = element.querySelector(SELECTOR_CAPTION) || null;
     this._updateCaption();
+    instances.set(element, this);
   }
 
   _updateCaption() {
@@ -21,18 +21,8 @@ class CarouselCaption extends BaseComponent {
     this._captionEl.textContent = activeItem?.getAttribute('data-caption') ?? '';
   }
 
-  _findCaptionEl() {
-    return this._element.querySelector(SELECTOR_CAPTION) || null;
-  }
-
-  static get NAME() {
-    return NAME;
-  }
-
-  static jQueryInterface(config) {
-    return this.each(function () {
-      CarouselCaption.getOrCreateInstance(this, config);
-    });
+  static getOrCreateInstance(element) {
+    return instances.get(element) || new CarouselCaption(element);
   }
 }
 
@@ -40,6 +30,4 @@ EventHandler.on(document, EVENT_SLID, SELECTOR_CAROUSEL, function () {
   CarouselCaption.getOrCreateInstance(this)._updateCaption();
 });
 
-defineJQueryPlugin(CarouselCaption);
-
 export default CarouselCaption;

package/js/carousel-height.js

@@ -1,56 +1,54 @@
-import BaseComponent from 'bootstrap/js/src/base-component.js';
 import EventHandler from 'bootstrap/js/src/dom/event-handler.js';
 import SelectorEngine from 'bootstrap/js/src/dom/selector-engine.js';
-import { defineJQueryPlugin } from 'bootstrap/js/src/util/index.js';
 
-const NAME = 'carouselHeight';
 const EVENT_SLIDE = 'slide.bs.carousel';
 const EVENT_SLID = 'slid.bs.carousel';
 const SELECTOR_CAROUSEL = '.carousel';
 const SELECTOR_INNER = '.carousel-inner';
 
-class CarouselHeight extends BaseComponent {
+const instances = new WeakMap();
+
+class CarouselHeight {
   constructor(element) {
-    super(element);
-    this._inner = SelectorEngine.findOne(SELECTOR_INNER, this._element);
+    this._element = element;
+    this._inner = SelectorEngine.findOne(SELECTOR_INNER, element);
+    if (this._inner) this._bindEvents();
+    instances.set(element, this);
+  }
+
+  dispose() {
+    EventHandler.off(this._element, EVENT_SLIDE);
+    EventHandler.off(this._element, EVENT_SLID);
+    instances.delete(this._element);
+  }
+
+  _bindEvents() {
+    EventHandler.on(this._element, EVENT_SLIDE, (e) => this._onSlide(e));
+    EventHandler.on(this._element, EVENT_SLID, () => this._onSlid());
   }
 
   _onSlide(e) {
-    if (!this._inner) return;
     const nextSlide = e.relatedTarget;
     if (!nextSlide) return;
-
-    this._inner.style.height = `${this._inner.offsetHeight}px`;
-
+    this._inner.style.height = `${this._inner.offsetHeight  }px`;
     requestAnimationFrame(() => {
-      this._inner.style.height = `${nextSlide.offsetHeight}px`;
+      this._inner.style.height = `${nextSlide.offsetHeight  }px`;
     });
   }
 
   _onSlid() {
-    if (!this._inner) return;
     this._inner.style.height = '';
   }
 
-  static get NAME() {
-    return NAME;
-  }
-
-  static jQueryInterface(config) {
-    return this.each(function () {
-      CarouselHeight.getOrCreateInstance(this, config);
-    });
+  static getOrCreateInstance(element) {
+    return instances.get(element) || new CarouselHeight(element);
   }
 }
 
-EventHandler.on(document, EVENT_SLIDE, SELECTOR_CAROUSEL, function (e) {
-  CarouselHeight.getOrCreateInstance(this)._onSlide(e);
-});
-
-EventHandler.on(document, EVENT_SLID, SELECTOR_CAROUSEL, function () {
-  CarouselHeight.getOrCreateInstance(this)._onSlid();
+document.addEventListener('DOMContentLoaded', () => {
+  for (const el of SelectorEngine.find(SELECTOR_CAROUSEL)) {
+    CarouselHeight.getOrCreateInstance(el);
+  }
 });
 
-defineJQueryPlugin(CarouselHeight);
-
 export default CarouselHeight;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unlk/keymaster",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "publishConfig": {
     "access": "public"
   },

package/scss/theme/_buttons.scss

@@ -4,15 +4,15 @@
   align-items: center;
 
   // Icon on the left, add margin to its right
-  > i:first-child,
-  > .icon:first-child {
+  > i:first-child:not(:only-child),
+  > .icon:first-child:not(:only-child) {
     width: fit-content;
     margin-right: $spacer * .5;
   }
 
   // Icon on the right, add margin to its left
-  > i:last-child,
-  > .icon:last-child {
+  > i:last-child:not(:only-child),
+  > .icon:last-child:not(:only-child) {
     width: fit-content;
     margin-left: $spacer * .5;
   }
@@ -30,27 +30,29 @@
   }
   .btn-#{$color} {
     @if $color == "secondary" {
-      @include button-variant(
+      @include custom-button-variant(
         $value,
         $value,
         $hover-background: tint-color($value, $btn-hover-bg-shade-amount),
         $hover-border: tint-color($value, $btn-hover-border-shade-amount),
         $active-background: tint-color($value, $btn-active-bg-shade-amount),
         $active-border: tint-color($value, $btn-active-border-shade-amount),
-        $disabled-color: $gray-900
+
       );
     } @else {
-      @include button-variant(
+      @include custom-button-variant(
         $value,
         $value,
         $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
         $hover-border: shade-color($value, $btn-hover-border-shade-amount),
         $active-background: shade-color($value, $btn-active-bg-shade-amount),
         $active-border: shade-color($value, $btn-active-border-shade-amount),
-        $disabled-color: $white
       );
     }
   }
+  .btn-outline-#{$color} {
+    @include custom-button-outline-variant($value);
+  }
   .btn-icon-#{$color} {
     @if $color == "secondary" {
       @include button-icon-variant(
@@ -69,7 +71,6 @@
         $hover-border: shade-color($value, $btn-hover-border-shade-amount),
         $active-background: shade-color($value, $btn-active-bg-shade-amount),
         $active-border: shade-color($value, $btn-active-border-shade-amount),
-        $disabled-color: $white
       );
     }
   }
@@ -87,7 +88,6 @@
 
 [class*="btn-icon-"],
 [class*="btn-icon-outline-"] {
-
   &.btn-sm {
     width: rfs-value(32px);
     height: rfs-value(32px);
@@ -100,6 +100,7 @@
     height: rfs-value(48px);
   }
 }
+
 .btn-sm {
   > i:first-child,
   > .icon:first-child {

package/scss/theme/_variables-overrides.scss

@@ -382,6 +382,7 @@ $btn-active-bg-shade-amount: 40% !default;
 $btn-active-bg-tint-amount: 20% !default;
 $btn-active-border-shade-amount: 40% !default;
 $btn-active-border-tint-amount: 10% !default;
+$btn-disabled-opacity: 1 !default;
 
 // Border Radius
 $border-radius: .5rem !default;

package/scss/theme/_version.scss

@@ -1,2 +1,2 @@
 // GENERATED FILE – do not edit manually
-$km-version: "1.6.2" !default;
+$km-version: "1.6.4" !default;

package/scss/theme/mixins/_buttons.scss

@@ -1,5 +1,4 @@
-// scss-docs-start btn-variant-mixin
-@mixin button-variant(
+@mixin custom-button-variant(
   $background,
   $border,
   $color: color-contrast($background),
@@ -9,9 +8,9 @@
   $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
   $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
   $active-color: color-contrast($active-background),
-  $disabled-background: rgba($background, 1),
-  $disabled-border: rgba($border, 1),
-  $disabled-color: color-contrast($disabled-background)
+  $disabled-background: $gray-200,
+  $disabled-border: $gray-200,
+  $disabled-color: $gray-400
 ) {
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-bg: #{$background};
@@ -28,7 +27,35 @@
   --#{$prefix}btn-disabled-bg: #{$disabled-background};
   --#{$prefix}btn-disabled-border-color: #{$disabled-border};
 }
-// scss-docs-end btn-variant-mixin
+
+@mixin custom-button-outline-variant(
+  $color,
+  $btn-color: $color,
+  $btn-border: $color,
+  $color-hover: $color,
+  $hover-background: tint-color($color, 90%),
+  $hover-border: $color,
+  $active-background: shade-color($color, 20%),
+  $active-border: shade-color($color, 20%),
+  $active-color: color-contrast($active-background),
+  $disabled-color: $gray-400,
+  $disabled-border: $gray-200,
+) {
+  --#{$prefix}btn-color: #{$btn-color};
+  --#{$prefix}btn-border-color: #{$btn-border};
+  --#{$prefix}btn-hover-color: #{$color-hover};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+  --#{$prefix}gradient: none;
+}
 
 @mixin button-link-variant(
   $color,
@@ -37,7 +64,7 @@
   $active-background: shade-color($color, 20%),
   $active-border: $color,
   $active-color: $white,
-  $disabled-color: $gray-300
+  $disabled-color: $gray-400
 ) {
   --#{$prefix}btn-color: #{$btn-color};
   --#{$prefix}btn-bg: transparent;
@@ -65,9 +92,9 @@
   $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
   $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
   $active-color: color-contrast($active-background),
-  $disabled-background: rgba($background, 1),
-  $disabled-border: rgba($border, 1),
-  $disabled-color: color-contrast($disabled-background)
+  $disabled-background: $gray-200,
+  $disabled-border: $gray-200,
+  $disabled-color: $gray-400,
 ) {
   width: rfs-value(40px);
   height: rfs-value(40px);
@@ -100,8 +127,8 @@
   $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
   $active-color: color-contrast($active-background),
   $disabled-background: transparent,
-  $disabled-border: rgba($border, 1),
-  $disabled-color: rgba($color, 1)
+  $disabled-border: $gray-200,
+  $disabled-color: $gray-400
 ) {
   width: rfs-value(40px);
   height: rfs-value(40px);