kitzo 2.0.25 → 2.0.27

package/README.md

@@ -25,7 +25,7 @@ npm i kitzo
 or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.25/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.27/dist/kitzo.umd.min.js"></script>
 ```
 
 > Attach this script tag in the html head tag and you are good to go.
@@ -41,6 +41,7 @@ or
 | [`kitzo.ripple()`](#ripple-api)     |
 | [`kitzo.debounce()`](#debounce-api) |
 | [`kitzo.clippath()`](#clippath-api) |
+| [`kitzo.getType()`](#typecheck-api) |
 
 #### Vanilla APIs
 
@@ -53,6 +54,7 @@ kitzo.tooltip();
 kitzo.ripple();
 kitzo.debounce();
 kitzo.clippath();
+kitzo.getType();
 ```
 
 > Use a modern build tool. **vite** - recommended
@@ -124,6 +126,14 @@ kitzo.clippath(selectors | element | NodeList, {
   style: object,
 });
 ```
+##### TypeCheck API:
+
+```javascript
+kitzo.getType(type);
+
+const data = [];
+console.log(kitzo.getType(data)) // 'array'
+```
 
 ---
 

package/dist/kitzo.esm.js

@@ -494,23 +494,32 @@ function clippath(element, config = {}) {
         const { textOption, clippathSize, smooth, style } = clippathConfigMap.get(btn);
 
         const { top, left, width, height } = btn.getBoundingClientRect();
+
         const cloned = btn.cloneNode(true);
         cloned.className = cloned.className + ` ${clippathConfigMap.get(btn).class}`;
         cloned.removeAttribute('data-kitzo-clippath');
         cloned.setAttribute('data-temp-clippath-el', true);
-        Object.assign(cloned.style, {
-          backgroundColor: '#01c2b8',
-          color: 'white',
-          fontFamily: getComputedStyle(btn).fontFamily || 'inherit',
-          ...style,
-          margin: 0,
-        });
+
+        setTimeout(() => {
+          const fontFamily = window.getComputedStyle(btn).fontFamily;
+          Object.assign(cloned.style, {
+            backgroundColor: '#01c2b8',
+            color: 'white',
+            fontFamily,
+            margin: 0,
+            width: '100%',
+            ...style,
+          });
+        }, 0);
 
         if (textOption && textOption instanceof Object) {
-          const target = cloned.querySelector(textOption.selector);
-          if (target && (typeof textOption.value === 'string' || typeof textOption.value === 'number')) {
-            target.textContent = textOption.value;
-          }
+          requestAnimationFrame(() => {
+            const target = typeof textOption.selector === 'string' ? clippathDiv.querySelector(textOption.selector.trim() ? textOption.selector.trim() : cloned.tagName) : cloned;
+
+            if (target && (typeof textOption.value === 'string' || typeof textOption.value === 'number')) {
+              target.textContent = textOption.value;
+            }
+          });
         }
 
         clippathDiv.style.width = `${width}px`;
@@ -524,6 +533,7 @@ function clippath(element, config = {}) {
         });
       }
     });
+
     document.addEventListener('mouseout', (e) => {
       const btn = e.target.closest('[data-kitzo-clippath]');
       if (btn) {
@@ -558,6 +568,22 @@ function clippath(element, config = {}) {
   }
 }
 
-const kitzo = { copy, debounce, ripple, tooltip, clippath };
+function getType(value) {
+  if (value === null) return 'null';
+
+  if (Array.isArray(value)) return 'array';
+
+  if (value instanceof Date) return 'date';
+
+  if (value instanceof RegExp) return 'regexp';
+
+  if (typeof value === 'object') return 'object';
+
+  return typeof value;
+}
+
+// button effects
+
+const kitzo = { copy, debounce, ripple, tooltip, clippath, getType };
 
-export { clippath, copy, debounce, kitzo as default, ripple, tooltip };
+export { clippath, copy, debounce, kitzo as default, getType, ripple, tooltip };

package/dist/kitzo.umd.js

@@ -500,23 +500,32 @@
           const { textOption, clippathSize, smooth, style } = clippathConfigMap.get(btn);
 
           const { top, left, width, height } = btn.getBoundingClientRect();
+
           const cloned = btn.cloneNode(true);
           cloned.className = cloned.className + ` ${clippathConfigMap.get(btn).class}`;
           cloned.removeAttribute('data-kitzo-clippath');
           cloned.setAttribute('data-temp-clippath-el', true);
-          Object.assign(cloned.style, {
-            backgroundColor: '#01c2b8',
-            color: 'white',
-            fontFamily: getComputedStyle(btn).fontFamily || 'inherit',
-            ...style,
-            margin: 0,
-          });
+
+          setTimeout(() => {
+            const fontFamily = window.getComputedStyle(btn).fontFamily;
+            Object.assign(cloned.style, {
+              backgroundColor: '#01c2b8',
+              color: 'white',
+              fontFamily,
+              margin: 0,
+              width: '100%',
+              ...style,
+            });
+          }, 0);
 
           if (textOption && textOption instanceof Object) {
-            const target = cloned.querySelector(textOption.selector);
-            if (target && (typeof textOption.value === 'string' || typeof textOption.value === 'number')) {
-              target.textContent = textOption.value;
-            }
+            requestAnimationFrame(() => {
+              const target = typeof textOption.selector === 'string' ? clippathDiv.querySelector(textOption.selector.trim() ? textOption.selector.trim() : cloned.tagName) : cloned;
+
+              if (target && (typeof textOption.value === 'string' || typeof textOption.value === 'number')) {
+                target.textContent = textOption.value;
+              }
+            });
           }
 
           clippathDiv.style.width = `${width}px`;
@@ -530,6 +539,7 @@
           });
         }
       });
+
       document.addEventListener('mouseout', (e) => {
         const btn = e.target.closest('[data-kitzo-clippath]');
         if (btn) {
@@ -564,7 +574,23 @@
     }
   }
 
-  const kitzo = { copy, debounce, ripple, tooltip, clippath };
+  function getType(value) {
+    if (value === null) return 'null';
+
+    if (Array.isArray(value)) return 'array';
+
+    if (value instanceof Date) return 'date';
+
+    if (value instanceof RegExp) return 'regexp';
+
+    if (typeof value === 'object') return 'object';
+
+    return typeof value;
+  }
+
+  // button effects
+
+  const kitzo = { copy, debounce, ripple, tooltip, clippath, getType };
 
   return kitzo;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitzo",
-  "version": "2.0.25",
+  "version": "2.0.27",
   "description": "A lightweight JavaScript UI micro-library.",
   "type": "module",
   "main": "./dist/kitzo.umd.js",