@semantic-ui/query - npm Package Compare versions

Comparing version 0.0.34 to 0.0.35

package.json

@@ -26,5 +26,5 @@ {
   "dependencies": {
-    "@semantic-ui/utils": "^0.0.34"
+    "@semantic-ui/utils": "^0.0.35"
   },
-  "version": "0.0.34"
+  "version": "0.0.35"
 }

src/query.js

@@ -1,2 +0,2 @@
-import { isPlainObject, isString, isArray, isDOM, isFunction, findIndex, inArray, isClient, isObject, each } from '@semantic-ui/utils';
+import { isPlainObject, clone, isString, isArray, isDOM, isFunction, findIndex, inArray, isClient, isObject, each } from '@semantic-ui/utils';
 
@@ -43,7 +43,9 @@ /*
     }
-    else if (isArray(selector)) {
+    else if (isArray(selector) || selector instanceof NodeList || selector instanceof HTMLCollection) {
       // Directly passed an array of elements
+      selector = Array.from(selector);
       elements = selector;
     }
     else if (isString(selector)) {
+      // this is html like $('<div/>')
       if (selector.slice(0, 1) == '<') {
@@ -53,3 +55,4 @@ const template = document.createElement('template');
         elements = Array.from(template.content.childNodes);
-      } else {
+      }
+      else {
         // Use querySelectorAll for normal selectors
@@ -76,3 +79,3 @@ elements = (pierceShadow)
   chain(elements) {
-    return (this.isGlobal)
+    return (this.isGlobal && !elements)
       ? new Query(globalThis, this.options)
@@ -178,3 +181,4 @@ : new Query(elements, this.options)
         return this.querySelectorAllDeep(el, selector, false);
-      } else {
+      }
+      else {
         return Array.from(el.querySelectorAll(selector));
@@ -217,19 +221,25 @@ }
 
-  index(indexFilter) {
-    if(indexFilter) {
-      // if we are passed in a filter we are just grabbing el position
-      const els = this.get();
-      const el = this.filter(indexFilter).get(0);
-      return els.indexOf(el);
+  // returns the index of element only including siblings that match a filter
+  index(siblingFilter) {
+    const el = this.el();
+    if(!el?.parentNode) {
+      return -1;
     }
-    else {
-      // if we aren't we are grabbing sibling position
-      const $siblings = this.parent().children();
-      const siblingEls = $siblings.get();
-      const els = this.get();
-      return findIndex(siblingEls, el => inArray(el, els));
-    }
+    const $siblings = this.chain(el.parentNode.children).filter(siblingFilter);
+    const siblingEls = $siblings.get();
+    const els = this.get();
+    return findIndex(siblingEls, el => inArray(el, els));
   }
 
+  // returns the index of current collection that match filter
+  indexOf(filter) {
+    const els = this.get();
+    const el = this.filter(filter).get(0);
+    return els.indexOf(el);
+  }
+
   filter(filter) {
+    if(!filter) {
+      return this;
+    }
     let filteredElements = [];
@@ -246,8 +256,10 @@ // If a function is provided, use it directly to filter elements
         }
+        else if (filter instanceof Query) {
+          // If filter is a Query object, check if the element is in the Query's collection
+          return filter.get().includes(el);
+        }
         else {
-          let els = isFunction(filter.get)
-            ? filter.get()
-            : isArray(filter)
-              ? filter
-              : [ filter]
+          let els = isArray(filter)
+            ? filter
+            : [ filter]
           ;
@@ -265,3 +277,4 @@ return inArray(el, els);
         return el.matches && el.matches(selector);
-      } else {
+      }
+      else {
         const elements = selector instanceof Query ? selector.get() : [selector];
@@ -279,3 +292,4 @@ return elements.includes(el);
         return !el.matches || (el.matches && !el.matches(selector));
-      } else {
+      }
+      else {
         const elements = selector instanceof Query ? selector.get() : [selector];
@@ -347,4 +361,16 @@ return !elements.includes(el);
         delegateHandler = (e) => {
-          const target = e.target.closest(targetSelector);
+          let target;
+          // if this event is composed from a web component
+          // this is required to get the original path
+          if (e.composed && e.composedPath) {
+            const path = e.composedPath();
+            target = path.find(el => el instanceof Element && el.matches && el.matches(targetSelector));
+          }
+          else {
+            // keep things simple for most basic uses
+            target = e.target.closest(targetSelector);
+          }
+
           if (target) {
+            // If a matching target is found, call the handler with the correct context
             handler.call(target, e);
@@ -709,3 +735,4 @@ }
         return this[0][name];
-      } else {
+      }
+      else {
         return this.map(el => el[name]);
@@ -747,9 +774,7 @@ }
   height(value) {
-    const prop = (this.isGlobal) ? 'innerHeight' : 'clientHeight';
-    return this.prop(prop, value);
+    return this.prop('innerHeight', value) || this.prop('clientHeight', value);
   }
 
   width(value) {
-    const prop = (this.isGlobal) ? 'innerWidth' : 'clientWidth';
-    return this.prop(prop, value);
+    return this.prop('innerWidth', value) || this.prop('clientWidth', value);
   }
@@ -810,3 +835,3 @@
   insertBefore(selector) {
-    this.chain(selector).each((el) => {
+    return this.chain(selector).each((el) => {
       this.insertContent(el, this.selector, 'beforebegin');
@@ -817,3 +842,3 @@ });
   insertAfter(selector) {
-    this.chain(selector).each((el) => {
+    return this.chain(selector).each((el) => {
       this.insertContent(el, this.selector, 'afterend');
@@ -833,9 +858,12 @@ });
     const widths = this.map((el) => {
-      const $clone = $(el).clone().insertAfter(el);
-      $clone.css({
-        position: 'absolute',
-        display: 'block',
-        transform: 'translate(-9999px, -9999px)',
-        zIndex: '-1',
-      });
+      const $clone = $(el).clone();
+      $clone
+        .insertAfter(el)
+        .css({
+          position: 'absolute',
+          display: 'block',
+          transform: 'translate(-9999px, -9999px)',
+          zIndex: '-1',
+        })
+      ;
       const naturalWidth = $clone.width();
@@ -849,10 +877,13 @@ $clone.remove();
   naturalHeight() {
-    const widths = this.map((el) => {
-      const $clone = $(el).clone().insertAfter(el);
-      $clone.css({
-        position: 'absolute',
-        display: 'block',
-        transform: 'translate(-9999px, -9999px)',
-        zIndex: '-1',
-      });
+    const height = this.map((el) => {
+      const $clone = $(el).clone();
+      $clone
+        .insertAfter(el)
+        .css({
+          position: 'absolute',
+          display: 'block',
+          transform: 'translate(-9999px, -9999px)',
+          zIndex: '-1',
+        })
+      ;
       const naturalHeight = $clone.height();
@@ -862,3 +893,3 @@ $clone.remove();
     });
-    return widths.length > 1 ? widths : widths[0];
+    return height.length > 1 ? height : height[0];
   }
@@ -865,0 +896,0 @@

test/dom/query.test.js

@@ -272,21 +272,40 @@ import { describe, beforeEach, afterEach, expect, it, vi } from 'vitest';
 
-    it('index should return the index of an element among its siblings matching a selector', () => {
+    it('index should return the index of the first element when no argument is passed', () => {
       const div = document.createElement('div');
-      const span = document.createElement('span');
+      const span1 = document.createElement('span');
       const span2 = document.createElement('span');
-      span2.classList.add('test');
       document.body.appendChild(div);
-      document.body.appendChild(span);
+      document.body.appendChild(span1);
       document.body.appendChild(span2);
-      expect($('span').index('.test')).toBe(1);
+      expect($('span').index()).toBe(1);
     });
 
-    it('index should return the index of the first element when no argument is passed', () => {
+    it('index should return -1 when the element is not found within the collection', () => {
       const div = document.createElement('div');
-      const span1 = document.createElement('span');
+      const span = document.createElement('span');
+      document.body.appendChild(div);
+      document.body.appendChild(span);
+      expect($('div').index(span)).toBe(-1);
+    });
+
+    it('index should return -1 when the selector does not match any elements', () => {
+      const div = document.createElement('div');
+      const span = document.createElement('span');
+      document.body.appendChild(div);
+      document.body.appendChild(span);
+      expect($('span').index('.non-existent')).toBe(-1);
+    });
+  });
+
+  describe('indexOf', () => {
+
+    it('index should return the index of an element among its siblings matching a selector', () => {
+      const div = document.createElement('div');
+      const span = document.createElement('span');
       const span2 = document.createElement('span');
+      span2.classList.add('test');
       document.body.appendChild(div);
-      document.body.appendChild(span1);
+      document.body.appendChild(span);
       document.body.appendChild(span2);
-      expect($('span').index()).toBe(1);
+      expect($('span').indexOf('.test')).toBe(1);
     });
@@ -301,3 +320,3 @@
       document.body.appendChild(span2);
-      expect($('span').index(span2)).toBe(1);
+      expect($('span').indexOf(span2)).toBe(1);
     });
@@ -312,20 +331,4 @@
       document.body.appendChild(span2);
-      expect($('span').index($('span').eq(1))).toBe(1);
+      expect($('span').indexOf($('span').eq(1))).toBe(1);
     });
-
-    it('index should return -1 when the element is not found within the collection', () => {
-      const div = document.createElement('div');
-      const span = document.createElement('span');
-      document.body.appendChild(div);
-      document.body.appendChild(span);
-      expect($('div').index(span)).toBe(-1);
-    });
-
-    it('index should return -1 when the selector does not match any elements', () => {
-      const div = document.createElement('div');
-      const span = document.createElement('span');
-      document.body.appendChild(div);
-      document.body.appendChild(span);
-      expect($('span').index('.non-existent')).toBe(-1);
-    });
   });
@@ -332,0 +335,0 @@

No alert changes

Improved metrics

Total package byte prevSize

92864

increased by1.13%

Lines of code

2315

increased by1.36%

Dependency changes

• + Added@semantic-ui/utils@0.0.35(transitive)

• - Removed@semantic-ui/utils@0.0.34(transitive)

• Updated@semantic-ui/utils@^0.0.35