Merge pull request #137 from numldesign/v1.0.0-beta.21

v1.0.0-beta.21
outpostHQ · Mar 2, 2021 · 2997775 · 2997775
2 parents 0984aa1 + 588a32e
commit 2997775
Show file tree

Hide file tree

Showing 28 changed files with 258 additions and 126 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 ## Numl.Design
 
-An open-source Library of Web Components and a Runtime CSS Framework for rapidly building UI that follows your Design System.
+A UI Design Language, UI Library of Web Components, and Runtime CSS Framework for rapidly building interfaces that follow your Design System 🌈
 
 <img src="https://github.com/numldesign/numl/blob/master/images/logo.png?raw=true" alt="NUDE Elements" width="891">
 
@@ -46,13 +46,13 @@ Add the following code to your page.
 via [JsDelivr](http://www.jsdelivr.com/):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/numl@1.0.0-beta.9/dist/index.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/numl@1.0.0-beta.21/dist/index.js"></script>
 ```
 
 via [Skypack](https://www.skypack.dev/):
 
 ```html
-<script type="module" src="https://cdn.skypack.dev/numl@1.0.0-beta.9"></script>
+<script type="module" src="https://cdn.skypack.dev/numl@1.0.0-beta.21"></script>
 ```
 
 That's it! Now you can use all Numl elements and features!

diff --git a/components/playground.svelte b/components/playground.svelte
@@ -1,5 +1,47 @@
 <nu-heading>Playground</nu-heading>
 
+{#if show('props')}
+  <nu-heading level="2">Properties</nu-heading>
+
+  <nu-card gap="1x">
+    <nu-props my-color="@white-color"></nu-props>
+    <nu-block fill="#dark" color="#my">
+      Text
+    </nu-block>
+  </nu-card>
+{/if}
+
+{#if show('nested')}
+  <nu-heading level="2">Nested actions</nu-heading>
+
+  <nu-card gap="1x">
+    <nu-btn on:tap={() => console.log('tap out')}>
+      Parent button
+      <nu-btn on:tap={() => console.log('tap in')}>
+        <nu-icon name="close"></nu-icon>
+      </nu-btn>
+    </nu-btn>
+
+    <nu-btn on:tap={() => console.log('tap out')}>
+      Parent button
+      <nu-btn disabled on:tap={() => console.log('tap in')}>
+        <nu-icon name="close"></nu-icon>
+      </nu-btn>
+    </nu-btn>
+  </nu-card>
+{/if}
+
+{#if show('tooltip')}
+  <nu-heading level="2">Tooltip</nu-heading>
+
+  <nu-card gap="1x">
+    <nu-btn>
+      <nu-tooltip>Some tooltip</nu-tooltip>
+      Hover me!
+    </nu-btn>
+  </nu-card>
+{/if}
+
 {#if show('boolean')}
   <nu-heading level="2">Boolean state</nu-heading>
 
@@ -986,6 +1028,14 @@
 
     Uses IonIcons library.
 
+    <nu-block size="md">
+      <nu-icon name="accessibility-outline :hover[accessibility]" use-hover></nu-icon>
+      <nu-icon name="aperture-outline :hover[aperture]" use-hover></nu-icon>
+      <nu-icon name="basketball-outline :hover[basketball]" use-hover></nu-icon>
+      <nu-icon name="calendar-outline :hover[calendar]" use-hover></nu-icon>
+      Text to align
+    </nu-block>
+
     <nu-block size="xl">
       <nu-icon name="accessibility-outline :hover[accessibility]" use-hover></nu-icon>
       <nu-icon name="aperture-outline :hover[aperture]" use-hover></nu-icon>
@@ -994,6 +1044,24 @@
       Text to align
     </nu-block>
 
+    <nu-heading level="5">Eva</nu-heading>
+
+    <nu-block size="md">
+      <nu-icon name="archive-outline :hover[archive]" use-hover></nu-icon>
+      <nu-icon name="checkmark-square-2-outline :hover[checkmark-square-2]" use-hover></nu-icon>
+      <nu-icon name="email-outline :hover[email]" use-hover></nu-icon>
+      <nu-icon name="calendar-outline :hover[calendar]" use-hover></nu-icon>
+      Text to align
+    </nu-block>
+
+    <nu-block size="xl">
+      <nu-icon name="archive-outline :hover[archive]" use-hover></nu-icon>
+      <nu-icon name="checkmark-square-2-outline :hover[checkmark-square-2]" use-hover></nu-icon>
+      <nu-icon name="email-outline :hover[email]" use-hover></nu-icon>
+      <nu-icon name="calendar-outline :hover[calendar]" use-hover></nu-icon>
+      Text to align
+    </nu-block>
+
     <nu-heading level="5">Feather</nu-heading>
 
     Uses Feather Icons library by default. (lazy-loading)
@@ -1009,30 +1077,30 @@
     <nu-heading level="5">Change default size (Context definition)</nu-heading>
     <nu-block>
       <nu-el>
-        <nu-icon name="hash"></nu-icon>
+        <nu-icon name="today-outline"></nu-icon>
       </nu-el>
 
       <nu-el>
         <nu-props icon-size="1em"></nu-props>
-        <nu-icon name="hash"></nu-icon>
+        <nu-icon name="today-outline"></nu-icon>
       </nu-el>
 
       <nu-el>
         <nu-props icon-size="2em"></nu-props>
-        <nu-icon name="hash"></nu-icon>
+        <nu-icon name="today-outline"></nu-icon>
       </nu-el>
     </nu-block>
 
     <nu-heading level="5">Change default stroke width</nu-heading>
     <nu-block>
       <nu-el>
-        <nu-props icon-stroke-width=".5x / 3"></nu-props>
-        <nu-icon name="hash"></nu-icon>
+        <nu-props icon-stroke-width="1em / 8"></nu-props>
+        <nu-icon name="today-outline"></nu-icon>
       </nu-el>
 
       <nu-el>
-        <nu-props icon-stroke-width=".5x"></nu-props>
-        <nu-icon name="hash"></nu-icon>
+        <nu-props icon-stroke-width="1em / 16"></nu-props>
+        <nu-icon name="today-outline"></nu-icon>
       </nu-el>
     </nu-block>
 
@@ -1698,7 +1766,7 @@ var b = /wow?/;
           <nu-field>
             <nu-label for="name">User name</nu-label>
             <nu-inputgroup>
-              <nu-icon name="user"></nu-icon>
+              <nu-icon name="person-outline" padding="0 1x"></nu-icon>
               <nu-input id="name" grow="1"></nu-input>
             </nu-inputgroup>
             <nu-check for="name" assert="required">
@@ -1716,7 +1784,7 @@ var b = /wow?/;
             <nu-label>Period</nu-label>
             <nu-inputgroup>
               <nu-icon name="hash"></nu-icon>
-              <nu-numinput id="period" unit="day" grow="1"></nu-numinput>
+              <nu-numinput id="period" unit="day" grow="1" max="100"></nu-numinput>
             </nu-inputgroup>
           </nu-field>
 

diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-nu-icons="eva">
+<html lang="en" data-nu-icons="ion">
 <head>
   <link rel="icon" media="(prefers-color-scheme:light)" type="image/png" sizes="32x32"
         href="/images/nude-logo-32.png">
@@ -2969,18 +2969,22 @@ <h3>Grid</h3>
     z="front" fill="clear">
     <nu-block radius padding backdrop-filter="blur(2)" fill="bg 70%">
       <nu-theme hue="248"></nu-theme>
+      <nu-attrs for="btn" padding="1x"></nu-attrs>
       <nu-flex gap="1x" items="stretch" flow="column">
         <nu-block>Prefers color scheme:</nu-block>
-        <nu-btngroup use-radiogroup id="prefers-color-scheme" value="auto">
+        <nu-btngroup use-radiogroup id="prefers-color-scheme" value="auto" display="grid" columns="1fr 1fr 1fr">
           <nu-btn value="auto">Auto</nu-btn>
           <nu-btn value="dark">Dark</nu-btn>
           <nu-btn value="light">Light</nu-btn>
         </nu-btngroup>
         <nu-block>Prefers contrast:</nu-block>
-        <nu-btngroup use-radiogroup id="prefers-contrast" value="auto" group-radius>
+        <nu-btngroup
+          use-radiogroup id="prefers-contrast" value="auto" group-radius
+          display="grid" columns="1fr 1fr 1fr"
+        >
           <nu-btn value="auto">Auto</nu-btn>
-          <nu-btn value="high">High</nu-btn>
-          <nu-btn value="low">Low</nu-btn>
+          <nu-btn value="more">More</nu-btn>
+          <nu-btn value="no-preference">Normal</nu-btn>
         </nu-btngroup>
       </nu-flex>
     </nu-block>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "numl",
-  "version": "1.0.0-beta.20",
+  "version": "1.0.0-beta.21",
   "module": "dist/index.js",
   "homepage": "https://numl.design",
   "repository": {

diff --git a/src/behaviors/active.js b/src/behaviors/active.js
@@ -9,58 +9,62 @@ export default class ActiveBehavior extends Behavior {
   constructor(host) {
     super(host);
 
+    const root = document.documentElement;
+
+    const setActive = (bool) => {
+      this.setMod('active', bool);
+
+      if ('webkitUserSelect' in root.style) {
+        root.style.webkitUserSelect = bool ? 'none' : '';
+      } else {
+        root.style.userSelect = bool ? 'none' : '';
+      }
+    }
+
     this.on('click', evt => {
-      this.setMod('active', false);
+      setActive(false);
 
-      if (host.nuDisabled || evt.nuHandled) return;
+      if (host.nuDisabled) return;
 
-      evt.nuHandled = true;
+      evt.stopPropagation();
 
       this.tap(evt);
     });
 
     this.on('keydown', evt => {
-      if (host.nuDisabled || evt.nuHandled) return;
-
-      evt.nuHandled = true;
+      if (host.nuDisabled) return;
 
-      if (evt.key === 'Enter') {
-        this.tap(evt);
-      } else if (evt.key === ' ') {
+      if (evt.key === 'Enter' || evt.key === ' ') {
+        evt.stopPropagation();
         evt.preventDefault();
 
-        if (!host.nuDisabled) {
-          this.setMod('active', true);
-        }
+        setActive(true);
       }
     });
-
     this.on('keyup', evt => {
-      this.setMod('active', false);
-
-      if (host.nuDisabled || evt.nuHandled) return;
-
-      evt.nuHandled = true;
+      if (host.nuDisabled) return;
 
-      if (evt.key === ' ') {
+      if (evt.key === 'Enter' || evt.key === ' ') {
+        evt.stopPropagation();
         evt.preventDefault();
         this.tap(evt);
+        setActive(false);
       }
     });
 
-    this.on('blur', () => this.setMod('active', false));
+    this.on('blur', () => setActive(false));
 
-    this.on(['mousedown', 'touchstart'], () => {
-      // checking for focusable also && host.nuHasMod('focusable')
-      // doesn't for nu-option
+    this.on(['mousedown', 'touchstart'], (evt) => {
       if (!host.nuDisabled) {
-        this.setMod('active', true);
+        evt.stopPropagation();
+
+        setActive(true);
       }
-    }, { passive: true });
+    });
 
-    this.on(['mouseleave', 'mouseup', 'touchend'], () => {
-      this.setMod('active', false);
-    }, { passive: true });
+    this.on(['mouseleave', 'mouseup', 'touchend'], (evt) => {
+      setActive(false);
+    });
   }
 
   tap(evt) {

diff --git a/src/behaviors/inputgroup.js b/src/behaviors/inputgroup.js
@@ -9,12 +9,12 @@ export default class InputGroupBehavior extends Behavior {
       this.setMod('focus', false);
     });
     this.on('click', () => {
-      const input = this.host.querySelector('input, [tabindex]:not([tabindex="-1"])');
+      const input = this.host.querySelector('input');
 
       if (input) {
         input.focus();
       }
-    });
+    }, { passive: true });
   }
 
   connected() {

diff --git a/src/behaviors/numinput.js b/src/behaviors/numinput.js
@@ -42,30 +42,34 @@ export default class NumInputBehavior extends InputBehavior {
   }
 
   setValue(value, silent) {
+    const originValue = value;
+
     if (value != null) {
       value = getFloatFromAttr(value);
     }
 
     if (value != null) {
-      if (this.value > this.max) {
+      if (value > this.max) {
         value = this.max;
-      } else if (this.value < this.min) {
+      } else if (value < this.min) {
         value = this.min;
       }
     }
 
-    if (isEqual(this.value, value)) return;
-
-    this.value = value;
-
     if (this.ref) {
-      if (value == null) {
-        this.ref.value = '';
+      if (originValue == null || originValue === '') {
+        if (this.ref.value) {
+          this.ref.value = '';
+        }
       } else {
         this.ref.value = value;
       }
     }
 
+    if (isEqual(this.value, value)) return;
+
+    this.value = value;
+
     if (!silent) {
       this.emit('input', this.value);
     }

diff --git a/src/behaviors/tooltip.js b/src/behaviors/tooltip.js
@@ -70,12 +70,12 @@ export default class TooltipBehavior extends Behavior {
       hideTooltip();
     };
 
-    parent.addEventListener('mouseenter', onMouseEnter);
-    parent.addEventListener('mouseleave', onMouseLeave);
+    parent.addEventListener('hoverstart', onMouseEnter);
+    parent.addEventListener('hoverend', onMouseLeave);
 
     this.removeListeners = () => {
-      parent.removeEventListener('mouseenter', onMouseEnter);
-      parent.removeEventListener('mouseleave', onMouseLeave);
+      parent.removeEventListener('hoverstart', onMouseEnter);
+      parent.removeEventListener('hoverend', onMouseLeave);
     };
 
     host.nuSetContextHook('focus', (val) => {

diff --git a/src/components/dateinput.svelte b/src/components/dateinput.svelte
@@ -1,7 +1,7 @@
-<nu-flex gap>
+<nu-pane gap>
   <nu-value grow="1" placeholder={placeholder}></nu-value>
   <nu-icon name="calendar-outline" move="0 (1x / -4)"></nu-icon>
-</nu-flex>
+</nu-pane>
 <nu-popup width="18 min-content" padding>
   <nu-datepicker
     value={value}