@nyaruka/temba-components 0.31.9 → 0.32.0

package/CHANGELOG.md

@@ -4,8 +4,17 @@ 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.32.0](https://github.com/nyaruka/temba-components/compare/v0.31.9...v0.32.0)
+
+- Remove lit-flatpickr [`#204`](https://github.com/nyaruka/temba-components/pull/204)
+- Initial commit for html5 based datepicker [`a8fb395`](https://github.com/nyaruka/temba-components/commit/a8fb395c39890a9a30f580020430b1ead9711bbd)
+- Support both date and datetime [`46073b7`](https://github.com/nyaruka/temba-components/commit/46073b7ca4b6248e46a982b72e3fb19ad84e68d8)
+- Show timezone on actual date control, add flexbox [`dea17c5`](https://github.com/nyaruka/temba-components/commit/dea17c55dcaea6fcce6ae6eefa1151a505db3aea)
+
 #### [v0.31.9](https://github.com/nyaruka/temba-components/compare/v0.31.8...v0.31.9)
 
+> 1 September 2022
+
 - Options for width and anchor point for Options [`#201`](https://github.com/nyaruka/temba-components/pull/201)
 
 #### [v0.31.8](https://github.com/nyaruka/temba-components/compare/v0.31.7...v0.31.8)

package/demo/index.html

@@ -92,12 +92,21 @@
         margin-top: 1em;
       }
 
+      temba-datepicker, temba-select, temba-textinput, temba-completion {
+        margin: 0.5em;
+        flex-grow: 1;
+      }
 
     </style>
     <script type="module">
       import '../out-tsc/temba-modules.js';
     </script>
     <script>
+
+      function handleDateChange(event) {
+        console.log("Changed!", event.target.value);
+      }
+
       // var static_url = '/static/';
       function handleColorChange(event) {
         var color = event.target.values[0].name;
@@ -139,8 +148,48 @@
 
     <div class="header">temba-components</div>
 
-    <temba-tabs>
-      <temba-tab name="temba-slider" icon="sliders">
+    <temba-tabs collapses index="1">
+      <temba-tab name="Overview" icon="list">
+        <div style="display:flex;flex-wrap: wrap;">
+
+          <temba-checkbox label="Check this out" checked></temba-checkbox>
+
+          <temba-select placeholder="Select a color" clearable>
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+          </temba-select>
+
+          <temba-datepicker time value="2022-10-02 01:00:00+00:00" timezone="Africa/Lagos" onChange="handleDateChange(event)"></temba-datepicker>
+
+
+        </div>
+
+        <temba-slider style="margin-bottom: 1em" value="50" min="0" max="100" range></temba-slider>
+        <temba-textinput value="plain text"></temba-textinput>
+        <temba-completion value="you complete me @cont"></temba-completion>
+      </temba-tab>
+      <temba-tab name="datepicker" icon="calendar">
+        <div style="display:flex;flex-wrap: wrap;">
+          <temba-datepicker time value="2020-01-20T14:00+00:00" timezone="UTC" onChange="handleDateChange(event)"></temba-datepicker>
+          <temba-datepicker value="2022-10-09" onChange="handleDateChange(event)"></temba-datepicker>
+          <temba-datepicker time timezone="" value="2022-09-29T20:20:00.000000Z"></temba-datepicker>
+          <temba-datepicker time onChange="handleDateChange(event)"></temba-datepicker>
+          <temba-datepicker time value="2022-10-03 01:00:00+00:00" onChange="handleDateChange(event)"></temba-datepicker>
+          <temba-datepicker time value="2022-10-04 01:00:00+00:00" timezone="Africa/Nairobi" onChange="handleDateChange(event)"></temba-datepicker>
+          <temba-datepicker time value="2022-10-05 01:00:00+00:00" timezone="Africa/Lagos" onChange="handleDateChange(event)"></temba-datepicker>
+          <temba-datepicker time value="2022-10-06 01:00:00+00:00" timezone="America/Phoenix" onChange="handleDateChange(event)"></temba-datepicker>
+          <temba-datepicker time value="2022-10-07 01:00:00+00:00" timezone="America/Phoenix" onChange="handleDateChange(event)"></temba-datepicker>
+          
+        </div>
+        <div style="display:flex;margin-top:0.5em">
+          
+          
+        </div>
+
+      </temba-tab>
+      
+      <temba-tab name="slider" icon="sliders">
 
 
         <div class="example">
@@ -154,7 +203,7 @@
         </div>
 
       </temba-tab>
-      <temba-tab name="temba-select" icon="chevron-down">
+      <temba-tab name="select" icon="credit-card">
 
         <div class="example">
           <temba-select
@@ -232,7 +281,7 @@
         
       </temba-tab>
 
-      <temba-tab name="temba-textinput" icon="edit">
+      <temba-tab name="textinput" icon="edit">
     
         <div class="example">
           <temba-textinput value="plain text"></temba-textinput>
@@ -259,14 +308,6 @@
           <temba-charcount text='count this text'></temba-charcount>
         </div>
       </temba-tab>
-
-      <temba-tab name="other" icon="list">
-        <div class="example">
-          <temba-checkbox label="Check this out" checked></temba-checkbox>
-        </div>
-
-      </temba-tab>
-
     </temba-tabs>
   </body>
 </html>