@nyaruka/temba-components 0.26.0 → 0.26.1

package/.github/workflows/build.yml

@@ -4,7 +4,7 @@ on: [push]
 
 jobs:
   bulid:
-    runs-on: macos-latest
+    runs-on: macOS-11
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js 12.x

package/CHANGELOG.md

@@ -4,6 +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.26.1](https://github.com/nyaruka/temba-components/compare/v0.26.0...v0.26.1)
+
+> 11 April 2022
+
+- Bump minimist from 1.2.5 to 1.2.6 [`#156`](https://github.com/nyaruka/temba-components/pull/156)
+- Simplify menu refresh, add on_submit to modax menu item [`#160`](https://github.com/nyaruka/temba-components/pull/160)
+- URL Inlines [`#158`](https://github.com/nyaruka/temba-components/pull/158)
+- Add dropdown component [`#157`](https://github.com/nyaruka/temba-components/pull/157)
+- Upgrade to latest lit [`#155`](https://github.com/nyaruka/temba-components/pull/155)
+- Update to latest lit [`d595e32`](https://github.com/nyaruka/temba-components/commit/d595e32d3b11155c31536f5c753ac763d07cb9d2)
+- pin macos build version [`246cfba`](https://github.com/nyaruka/temba-components/commit/246cfba2bfc4a12780cd7c7324045ff2fb10646f)
+- Add support for menu inlines with sub urls [`180cf59`](https://github.com/nyaruka/temba-components/commit/180cf5953f37a1379e3bedd9bc44a6fae275012a)
+
 #### [v0.26.0](https://github.com/nyaruka/temba-components/compare/v0.25.2...v0.26.0)
 
 > 4 March 2022

package/demo/index.html

@@ -18,9 +18,23 @@
         border: 0px solid gray;
         padding: 10px;
         max-width: 500px;
-
         --temba-select-selected-font-size: 1em;
       }
+
+      temba-dropdown.open {
+        --icon-background: rgb(241,241,241);
+        --icon-circle-size: 0.35em;
+      }
+
+      .more {
+        background: rgba(0,0,0,.1);
+        padding: 0.5em
+      }
+
+      .open .more, .more:hover {
+        background: rgba(0,0,0,.3);
+      }
+
     </style>
     <script type="module">
       import '../out-tsc/temba-modules.js';
@@ -46,6 +60,31 @@
       groups="/static/api/groups.json"
     ></temba-store>
 
+    <div style="margin: 10px; background: #777; border-radius: 6px; overflow: hidden;">
+      <div style="display: flex; flex-direction: row; --icon-color: #fff;">
+        <div style="flex-grow: 1"></div>
+        <temba-dropdown style="display:flex; align-items: center; height: 100%" arrowOffset="-10" offsetX="0" offsetY="4" arrowSize="10">
+          <div slot="toggle" class="more">
+            <temba-icon name="menu" size="2"></temba-icon>
+          </div>
+          <div slot="dropdown" style="width:150px; padding:0.5em 1em">
+            <a href="http://google.com">Google</a>
+          </div>
+        </temba-dropdown>
+      </div>
+    </div>
+
+    <div class="example" style="margin: 10px; background: #ccc; border-radius:6px;">
+      <temba-dropdown>
+        <div style="display:inline-block" slot="toggle">
+          <temba-icon name="chevron-down" size="1.3" clickable></temba-icon>
+        </div>
+        
+        <div slot="dropdown" style="width:250px; padding:0.5em 1em">
+          <a href="http://google.com">Google</a>
+        </div>
+      </temba-dropdown>
+    </div>
     <div class="example">
       <temba-omnibox
         placeholder="Contacts or Groups"