npm - @nyaruka/temba-components - Versions diffs - 0.130.4 → 0.131.0 - Mend

@nyaruka/temba-components 0.130.4 → 0.131.0

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 (104) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -4,22 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
-#### [v0.130.4](https://github.com/nyaruka/temba-components/compare/v0.130.3...v0.130.4)
+#### [v0.131.0](https://github.com/nyaruka/temba-components/compare/v0.130.1...v0.131.0)
+- Empty row focus, auto categories [`#707`](https://github.com/nyaruka/temba-components/pull/707)
+- Fix omnibox [`#706`](https://github.com/nyaruka/temba-components/pull/706)
+- Tweak msg event payload for chat history [`#704`](https://github.com/nyaruka/temba-components/pull/704)
+- Add split by groups [`#699`](https://github.com/nyaruka/temba-components/pull/699)
+- Some tweaks for smoother dragging [`#701`](https://github.com/nyaruka/temba-components/pull/701)
+- Switch to cloned dragged items [`#700`](https://github.com/nyaruka/temba-components/pull/700)
+- Show select fetching status [`#698`](https://github.com/nyaruka/temba-components/pull/698)
+- Add sorting for wait for response [`#695`](https://github.com/nyaruka/temba-components/pull/695)
 - Fix rendering of `ivr_created` events [`#697`](https://github.com/nyaruka/temba-components/pull/697)
 - Update chat history test with more realistic event data [`#696`](https://github.com/nyaruka/temba-components/pull/696)
-- Fix rendering of ivr_created events in chat history [`261f082`](https://github.com/nyaruka/temba-components/commit/261f082a6d8fbdc2244a1e59fa07a49f33439c36)
-#### [v0.130.3](https://github.com/nyaruka/temba-components/compare/v0.130.2...v0.130.3)
-> 23 September 2025
 - Remove support for legacy ticket events [`#694`](https://github.com/nyaruka/temba-components/pull/694)
-#### [v0.130.2](https://github.com/nyaruka/temba-components/compare/v0.130.1...v0.130.2)
-> 22 September 2025
 - Add support for ticket events from the engine [`#693`](https://github.com/nyaruka/temba-components/pull/693)
 - First draft for rules editor [`#691`](https://github.com/nyaruka/temba-components/pull/691)
 - Show contact ref on details tab since it might be hidden by name if set [`#690`](https://github.com/nyaruka/temba-components/pull/690)

package/demo/sortable-rules-demo.html ADDED Viewed

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sortable Rules Demo</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      .demo-section {
+        margin: 20px 0;
+        padding: 20px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Sortable Rules Demo</h1>
+    <div class="demo-section">
+      <h2>Sortable Array Editor</h2>
+      <p>
+        This demonstrates sortable functionality in array editor with drag and
+        drop support:
+      </p>
+      <temba-array-editor
+        itemLabel="Rule"
+        sortable="true"
+        maintainEmptyItem="true"
+      ></temba-array-editor>
+      <script>
+        // Set up the array editor with initial data and item config
+        const arrayEditor = document.querySelector('temba-array-editor');
+        arrayEditor.itemConfig = {
+          operator: {
+            type: 'select',
+            required: true,
+            multi: false,
+            options: [
+              { value: 'has_any_word', name: 'has any of the words' },
+              { value: 'has_phrase', name: 'has the phrase' },
+              { value: 'has_only_phrase', name: 'has only the phrase' },
+              { value: 'has_number', name: 'has a number' },
+              { value: 'has_number_lt', name: 'has a number below' },
+              { value: 'has_number_eq', name: 'has a number equal to' },
+              { value: 'has_number_gt', name: 'has a number above' }
+            ],
+            flavor: 'xsmall',
+            width: '200px'
+          },
+          value1: {
+            type: 'text',
+            flavor: 'xsmall'
+          },
+          category: {
+            type: 'text',
+            placeholder: 'Category',
+            required: true,
+            maxWidth: '120px',
+            flavor: 'xsmall'
+          }
+        };
+        arrayEditor.value = [
+          {
+            operator: { value: 'has_any_word', name: 'has any of the words' },
+            value1: 'yes sure',
+            category: 'Yes'
+          },
+          {
+            operator: { value: 'has_any_word', name: 'has any of the words' },
+            value1: 'no never',
+            category: 'No'
+          },
+          {
+            operator: { value: 'has_number', name: 'has a number' },
+            value1: '',
+            category: 'Numbers'
+          }
+        ];
+        arrayEditor.addEventListener('change', (e) => {
+          console.log('Array changed:', e.detail.value);
+        });
+      </script>
+    </div>
+    <div class="demo-section">
+      <h2>Non-Sortable Array Editor (for comparison)</h2>
+      <p>This is the same array editor without sortable functionality:</p>
+      <temba-array-editor
+        itemLabel="Rule"
+        sortable="false"
+        maintainEmptyItem="true"
+      ></temba-array-editor>
+      <script>
+        // Set up the non-sortable array editor
+        const nonSortableEditor =
+          document.querySelectorAll('temba-array-editor')[1];
+        nonSortableEditor.itemConfig = {
+          operator: {
+            type: 'select',
+            required: true,
+            multi: false,
+            options: [
+              { value: 'has_any_word', name: 'has any of the words' },
+              { value: 'has_phrase', name: 'has the phrase' },
+              { value: 'has_only_phrase', name: 'has only the phrase' },
+              { value: 'has_number', name: 'has a number' }
+            ],
+            flavor: 'xsmall',
+            width: '200px'
+          },
+          value1: {
+            type: 'text',
+            flavor: 'xsmall'
+          },
+          category: {
+            type: 'text',
+            placeholder: 'Category',
+            required: true,
+            maxWidth: '120px',
+            flavor: 'xsmall'
+          }
+        };
+        nonSortableEditor.value = [
+          {
+            operator: { value: 'has_any_word', name: 'has any of the words' },
+            value1: 'yes sure',
+            category: 'Yes'
+          },
+          {
+            operator: { value: 'has_any_word', name: 'has any of the words' },
+            value1: 'no never',
+            category: 'No'
+          }
+        ];
+      </script>
+    </div>
+    <script type="module" src="../src/temba-components.js"></script>
+  </body>
+</html>