Continue to improve query examples

Author: jlukic

RELEASE-NOTES.md

@@ -34,7 +34,9 @@ Please note after `1.0` Semver will be followed using normal protocols.
 * **Feature** - Added `contains()` method for checking if elements contain a specific selector with Shadow DOM support
 * **Enhancement** - Enhanced `closest()` with `returnAll` option to optionally return all matching ancestors
 * **Improvement** - `offsetParent` has been renamed to `containingParent` and now includes many other possible containing parent checks like `will-change` and `filter`.
-* **Bug** - `dataContext()` now returns the entire data context including state
+* **Improvement** - `trigger()` now triggers native event handler. Use `dispatchEvent` to avoid this behavior.
+* **Improvement** - `.submit()` now uses `requestSubmit` so that it can trigger native event handlers and be cancelable.
+* **Bug** - `dataContext()` now returns the entire data context including state.
 * **Bug** - `setting()` can now be used as a getter.
 * **Bug** - Fixed `offsetParent` to correctly return offset parent for willChange
 * **Bug** - Fixed bug where `useAlias()` was not working as intended to alias Query.

docs/src/examples/query/events/query-submit/page.css

@@ -5,22 +5,3 @@
   margin: var(--vertically-spaced);
 }
 
-.form input {
-  padding: var(--compact-spacing);
-  border: var(--border);
-  border-radius: var(--border-radius);
-  font-size: inherit;
-  margin-bottom: var(--compact-spacing);
-  width: 100%;
-}
-
-.status {
-  padding: var(--compact-spacing);
-  background: var(--standard-5);
-  border-radius: var(--border-radius);
-  
-  &.success {
-    background-color: var(--success-5);
-    color: var(--success-80);
-  }
-}

docs/src/examples/query/events/query-submit/page.html

@@ -1,4 +1,5 @@
 <form class="form">
-  <input type="text" value="Auto-submit in 2s" readonly />
-  <div class="status">Waiting...</div>
-</form>
+  <ui-input name="name" label="Name" placeholder="Name"></ui-input>
+</form>
+
+<ui-button class="submit">Submit</ui-button>

docs/src/examples/query/events/query-submit/page.js

@@ -1,10 +1,10 @@
 import { $ } from '@semantic-ui/query';
 
-$('.form').on('submit', function(e) {
-  e.preventDefault();
+$('form').on('submit', function(event) {
+  event.preventDefault();
   $('.status').text('Form submitted!').addClass('success');
 });
 
-setTimeout(() => {
-  $('.form').submit();
-}, 2000);
+$('ui-button.submit').on('click', () => {
+  $('form').submit();
+});

docs/src/examples/query/events/query-trigger/page.html

@@ -1,3 +1,7 @@
-<input type="text" class="target" placeholder="Will receive focus">
+<ui-input type="text" class="target" placeholder="Will receive focus"></ui-input>
 
-<ui-button class="trigger" primary>Trigger Focus</ui-button>
+<ui-button class="trigger" primary>Trigger Focus</ui-button>
+<ui-button class="trigger-mouseenter" secondary>Trigger Mouseenter</ui-button>
+
+
+<div class="log"></div>

docs/src/examples/query/events/query-trigger/page.js

@@ -1,5 +1,16 @@
 import { $ } from '@semantic-ui/query';
 
+// log on mousenter of input
+$('.target').on('mouseenter', function() {
+  $('.log').append('<p>mouse entered input</p>');
+});
+
+// trigger focus event including native behavior
 $('.trigger').on('click', () => {
   $('.target').trigger('focus');
-});
+});
+
+// trigger mouseenter event manually
+$('.trigger-mouseenter').on('click', () => {
+  $('.target').trigger('mouseenter');
+});

docs/src/examples/query/iterators/query-each/page.js

@@ -8,23 +8,29 @@ $('.iterate').on('click', () => {
   let results = [];
   $('.item').each((el, index) => {
     $(el).addClass('processed');
-    results.push(`Item ${index}: "${el.text()}"`);
+    const text = $(el).text();
+    results.push(`Item ${index}: "${text}"`);
   });
+
   updateOutput(results.join('\n'));
 });
 
 $('.number').on('click', () => {
   $('.item').each((el, index) => {
-    $(el).text(`${index + 1}. ${el.text().replace(/^\d+\.\s*/, '')}`);
+    const text = $(el).text().replace(/^\d+\.\s*/, '');
+    $(el).text(`${index + 1}. ${text}`);
   });
+
   updateOutput('Added numbers to all items');
 });
 
 $('.reset').on('click', () => {
-  $('.item').removeClass('processed');
-  $('.item').each((el, index) => {
-    const letters = ['A', 'B', 'C', 'D'];
-    $(el).text(`Item ${letters[index]}`);
-  });
+  $('.item')
+    .removeClass('processed')
+    .each((el, index) => {
+      const letters = ['A', 'B', 'C', 'D'];
+      $(el).text(`Item ${letters[index]}`);
+    });
+
   updateOutput('Reset all items');
 });