kitzo 2.0.25 → 2.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +1 -1
  2. package/dist/kitzo.esm.js +21 -11
  3. package/dist/kitzo.umd.js +21 -11
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -25,7 +25,7 @@ npm i kitzo
25
25
  or
26
26
 
27
27
  ```javascript
28
- <script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.25/dist/kitzo.umd.min.js"></script>
28
+ <script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.26/dist/kitzo.umd.min.js"></script>
29
29
  ```
30
30
 
31
31
  > Attach this script tag in the html head tag and you are good to go.
package/dist/kitzo.esm.js CHANGED
@@ -494,23 +494,32 @@ function clippath(element, config = {}) {
494
494
  const { textOption, clippathSize, smooth, style } = clippathConfigMap.get(btn);
495
495
 
496
496
  const { top, left, width, height } = btn.getBoundingClientRect();
497
+
497
498
  const cloned = btn.cloneNode(true);
498
499
  cloned.className = cloned.className + ` ${clippathConfigMap.get(btn).class}`;
499
500
  cloned.removeAttribute('data-kitzo-clippath');
500
501
  cloned.setAttribute('data-temp-clippath-el', true);
501
- Object.assign(cloned.style, {
502
- backgroundColor: '#01c2b8',
503
- color: 'white',
504
- fontFamily: getComputedStyle(btn).fontFamily || 'inherit',
505
- ...style,
506
- margin: 0,
507
- });
502
+
503
+ setTimeout(() => {
504
+ const fontFamily = window.getComputedStyle(btn).fontFamily;
505
+ Object.assign(cloned.style, {
506
+ backgroundColor: '#01c2b8',
507
+ color: 'white',
508
+ fontFamily,
509
+ margin: 0,
510
+ width: '100%',
511
+ ...style,
512
+ });
513
+ }, 0);
508
514
 
509
515
  if (textOption && textOption instanceof Object) {
510
- const target = cloned.querySelector(textOption.selector);
511
- if (target && (typeof textOption.value === 'string' || typeof textOption.value === 'number')) {
512
- target.textContent = textOption.value;
513
- }
516
+ requestAnimationFrame(() => {
517
+ const target = typeof textOption.selector === 'string' ? clippathDiv.querySelector(textOption.selector.trim() ? textOption.selector.trim() : cloned.tagName) : cloned;
518
+
519
+ if (target && (typeof textOption.value === 'string' || typeof textOption.value === 'number')) {
520
+ target.textContent = textOption.value;
521
+ }
522
+ });
514
523
  }
515
524
 
516
525
  clippathDiv.style.width = `${width}px`;
@@ -524,6 +533,7 @@ function clippath(element, config = {}) {
524
533
  });
525
534
  }
526
535
  });
536
+
527
537
  document.addEventListener('mouseout', (e) => {
528
538
  const btn = e.target.closest('[data-kitzo-clippath]');
529
539
  if (btn) {
package/dist/kitzo.umd.js CHANGED
@@ -500,23 +500,32 @@
500
500
  const { textOption, clippathSize, smooth, style } = clippathConfigMap.get(btn);
501
501
 
502
502
  const { top, left, width, height } = btn.getBoundingClientRect();
503
+
503
504
  const cloned = btn.cloneNode(true);
504
505
  cloned.className = cloned.className + ` ${clippathConfigMap.get(btn).class}`;
505
506
  cloned.removeAttribute('data-kitzo-clippath');
506
507
  cloned.setAttribute('data-temp-clippath-el', true);
507
- Object.assign(cloned.style, {
508
- backgroundColor: '#01c2b8',
509
- color: 'white',
510
- fontFamily: getComputedStyle(btn).fontFamily || 'inherit',
511
- ...style,
512
- margin: 0,
513
- });
508
+
509
+ setTimeout(() => {
510
+ const fontFamily = window.getComputedStyle(btn).fontFamily;
511
+ Object.assign(cloned.style, {
512
+ backgroundColor: '#01c2b8',
513
+ color: 'white',
514
+ fontFamily,
515
+ margin: 0,
516
+ width: '100%',
517
+ ...style,
518
+ });
519
+ }, 0);
514
520
 
515
521
  if (textOption && textOption instanceof Object) {
516
- const target = cloned.querySelector(textOption.selector);
517
- if (target && (typeof textOption.value === 'string' || typeof textOption.value === 'number')) {
518
- target.textContent = textOption.value;
519
- }
522
+ requestAnimationFrame(() => {
523
+ const target = typeof textOption.selector === 'string' ? clippathDiv.querySelector(textOption.selector.trim() ? textOption.selector.trim() : cloned.tagName) : cloned;
524
+
525
+ if (target && (typeof textOption.value === 'string' || typeof textOption.value === 'number')) {
526
+ target.textContent = textOption.value;
527
+ }
528
+ });
520
529
  }
521
530
 
522
531
  clippathDiv.style.width = `${width}px`;
@@ -530,6 +539,7 @@
530
539
  });
531
540
  }
532
541
  });
542
+
533
543
  document.addEventListener('mouseout', (e) => {
534
544
  const btn = e.target.closest('[data-kitzo-clippath]');
535
545
  if (btn) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kitzo",
3
- "version": "2.0.25",
3
+ "version": "2.0.26",
4
4
  "description": "A lightweight JavaScript UI micro-library.",
5
5
  "type": "module",
6
6
  "main": "./dist/kitzo.umd.js",