Merge pull request #145 from numldesign/v1.0.0-beta.23

v1.0.0-beta.23
outpostHQ · Mar 16, 2021 · 09d2a4c · 09d2a4c
2 parents a89548d + c12ac03
commit 09d2a4c
Show file tree

Hide file tree

Showing 25 changed files with 112 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -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.21/dist/index.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/numl@1.0.0-beta.23/dist/index.js"></script>
 ```
 
 via [Skypack](https://www.skypack.dev/):
 
 ```html
-<script type="module" src="https://cdn.skypack.dev/numl@1.0.0-beta.21"></script>
+<script type="module" src="https://cdn.skypack.dev/numl@1.0.0-beta.23"></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,36 @@
 <nu-heading>Playground</nu-heading>
 
+{#if show('validation')}
+  <nu-heading level="2">Properties</nu-heading>
+
+  <nu-card gap="1x">
+    <nu-form>
+      <nu-field>
+        <nu-btn id="digit" width="10" columns="1fr auto">
+          <nu-value list placeholder="placeholder"></nu-value>
+          <nu-dropdownicon></nu-dropdownicon>
+          <nu-popuplistbox>
+            <nu-option value="one">One</nu-option>
+            <nu-option value="two">Two</nu-option>
+            <nu-option value="three">Three</nu-option>
+            <nu-option value="four">Four</nu-option>
+            <nu-option value="five">Five</nu-option>
+            <nu-option value="six">Six</nu-option>
+            <nu-option value="seven">Seven</nu-option>
+          </nu-popuplistbox>
+        </nu-btn>
+
+        <nu-check for="digit" assert={sixValidator}>
+          Value should be SIX
+        </nu-check>
+      </nu-field>
+
+      <nu-btn action="submit">Submit</nu-btn>
+
+    </nu-form>
+  </nu-card>
+{/if}
+
 {#if show('props')}
   <nu-heading level="2">Properties</nu-heading>
 
@@ -206,21 +237,11 @@
 
   <nu-card as="section">
     <nu-props transition=".2s"></nu-props>
-    <nu-attrs
-      for="btn"
-      shadow="0 0 0 1bw #border :pressed[0 0 0 1bw #special-bg]"
-      fill="#bg :pressed[#special-bg]"
-      z=":pressed[above]"
-      border="n"
-      color="#special :pressed[special-text]"
-      inset="n :active[.75em] :pressed[n]"></nu-attrs>
-    <nu-radiogroup
-      value="0" display="inline-flex"
-      group-radius="1r" border="#clear" gap="1bw" radius>
+    <nu-btngroup>
       <nu-btn>A</nu-btn>
       <nu-btn>B</nu-btn>
       <nu-btn>C</nu-btn>
-    </nu-radiogroup>
+    </nu-btngroup>
   </nu-card>
 {/if}
 
@@ -290,19 +311,19 @@
         </nu-flex>
       </nu-radiogroup>
 
-      <nu-radiogroup flow="column" gap value="second">
+      <nu-radiogroup flow="column" gap value="second" disabled>
         <nu-flex gap="1x" items="center">
-          <nu-radio labelledby=":next" value="first" disabled></nu-radio>
+          <nu-radio labelledby=":next" value="first"></nu-radio>
           <nu-label>First value</nu-label>
         </nu-flex>
 
         <nu-flex gap="1x" items="center">
-          <nu-radio labelledby=":next" value="second" disabled></nu-radio>
+          <nu-radio labelledby=":next" value="second"></nu-radio>
           <nu-label>Second value</nu-label>
         </nu-flex>
 
         <nu-flex gap="1x" items="center">
-          <nu-radio labelledby=":next" value="third" disabled></nu-radio>
+          <nu-radio labelledby=":next" value="third"></nu-radio>
           <nu-label>Third value</nu-label>
         </nu-flex>
       </nu-radiogroup>
@@ -1851,6 +1872,7 @@ var b = /wow?/;
     <nu-heading level="2">Slider</nu-heading>
     <nu-slider value="50" use-debug="slider-debug-h"></nu-slider>
     <nu-slider value="50" orient="v" use-debug="slider-debug-v"></nu-slider>
+    <nu-slider value="50" disabled></nu-slider>
 
     <nu-grid gap columns="1fr 1fr">
       <nu-debug id="slider-debug-h"></nu-debug>
@@ -2050,4 +2072,7 @@ window.addEventListener('hashchange', () => {
 $: show = (name) => {
   return hash ? hash.includes(name) : true;
 }
+
+let sixValidator = v => v === 'six';
+
 </script>
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.22",
+  "version": "1.0.0-beta.23",
   "module": "dist/index.js",
   "homepage": "https://numl.design",
   "repository": {

diff --git a/src/behaviors/form.js b/src/behaviors/form.js
@@ -36,7 +36,7 @@ export default class FormBehavior extends WidgetBehavior {
     this.setContext('form', this);
     this.context.value = null;
 
-    this.on('nu-blur', (event) => {
+    this.on('nu-change', (event) => {
       const field = event.detail;
       if (this.fields[field]) {
         this.verifyData(field);

diff --git a/src/behaviors/input.js b/src/behaviors/input.js
@@ -77,7 +77,7 @@ export default class InputBehavior extends WidgetBehavior {
 
     ref.addEventListener('blur', () => {
       if (host.id) {
-        this.emit('nu-blur', host.nuId, { bubbles: true });
+        this.emit('nu-change', host.nuId, { bubbles: true });
       }
     });
 

diff --git a/src/behaviors/radiogroup.js b/src/behaviors/radiogroup.js
@@ -38,6 +38,7 @@ export default class RadioGroupBehavior extends WidgetBehavior {
     }
 
     this.setContext('radiogroup', this);
+    this.setMod('radiogroup', true);
 
     this.on('keydown', this.onKeyDown.bind(this));
   }

diff --git a/src/behaviors/widget.js b/src/behaviors/widget.js
@@ -496,6 +496,10 @@ export default class WidgetBehavior extends Behavior {
     if (!silent) {
       this.emit('input', value);
       this.doActions(value);
+
+      if (this.host.id) {
+        this.emit('nu-change', this.host.nuId, { bubbles: true });
+      }
     }
 
     if (!silent || this.trigger) {

diff --git a/src/components/datepicker.svelte b/src/components/datepicker.svelte
@@ -74,19 +74,19 @@
   columns="repeat(7, 1fr)" content="start stretch"
   text="center" gap="1bw">
   <nu-attrs for="day" fill="clear" radius={isRange ? '1r :hover[1r 0 0 1r]' : '1r :hover[1r]'}
-            text="n" inset="n" border="n" focus="inset"></nu-attrs>
-  <nu-attrs for="today" text="h" color="special" inset="0 0 0 1bw #border"></nu-attrs>
+            text="n" inset="#clear :active[#shadow.50]" border="n" focus="inset"></nu-attrs>
+  <nu-attrs for="today" text="h" color="special" inset="0 0 0 1bw #border :active[#shadow.50]"></nu-attrs>
   <nu-attrs for="other-month" color="text 50% :hover[text]"></nu-attrs>
   <nu-attrs for="disabled" disabled color="text 50%"></nu-attrs>
-  <nu-attrs for="start" special fill="special-bg" color radius="1r 0 0 1r" inset="n"></nu-attrs>
+  <nu-attrs for="start" special fill="special-bg" color radius="1r 0 0 1r"></nu-attrs>
   <nu-attrs for="end" radius="0r 1r 1r 0r :hover[1r 0 0 1r]" special fill="special-bg"
-            color inset="n"></nu-attrs>
+            color></nu-attrs>
   <nu-attrs for="selected" radius special fill="special-bg" color="special-text"></nu-attrs>
   <nu-attrs for="range"
-            radius={isRange ? '0 :hover[0 1r 1r 0]' : '1r'} inset="n"
+            radius={isRange ? '0 :hover[0 1r 1r 0]' : '1r'}
             fill="special-bg 25%" color="text" border="0 0 0 1bw #bg"></nu-attrs>
   <nu-attrs for="range-inside" radius="0 :hover[1r 0 0 1r]" fill="special-bg 25%" color="text"
-            border="0 0 0 1bw #bg" inset="n"></nu-attrs>
+            border="0 0 0 1bw #bg"></nu-attrs>
 
   {#each monthDays as day}
     <nu-btn

diff --git a/src/elements/action.js b/src/elements/action.js
@@ -17,13 +17,13 @@ export default class NuAction extends NuEl {
     return {
       radius: '0',
       text: 'nowrap',
-      transition: 'theme, radius',
+      transition: 'theme, radius, filter',
       outline: 'focus visible',
       mark: 'n :focusable[hover]',
-      opacity: '1 :disabled[--disabled-opacity]',
       cursor: 'pointer :disabled[default]',
       selectable: 'y',
       box: 'y',
+      filter: 'n :disabled[saturate(0.33) contrast(0.88) opacity(var(--disabled-opacity))]',
     };
   }
 

diff --git a/src/elements/btn.js b/src/elements/btn.js
@@ -18,7 +18,7 @@ export default class NuBtn extends NuAction {
       mark: 'n :focusable[hover]',
       text: 'sb nowrap',
       inset: '#clear :active[#shadow.50] :active:special[#special-shadow.50] :pressed[y] :pressed:special[#special-shadow] :active:pressed[#shadow.50] :active:special[#special-shadow.50] :active:pressed:special[#special-shadow.50]',
-      fill: 'bg :special[special-bg] :clear[clear]',
+      fill: '#bg :disabled[#bg] :special.disabled[#special-bg] :clear[#clear] :clear:disabled[#local-bg]',
       color: 'text :clear[special] :special[special-text] :special:clear[special-text]',
     };
   }

diff --git a/src/elements/btngroup.js b/src/elements/btngroup.js
@@ -11,16 +11,19 @@ export default class NuBtnGroup extends NuGroup {
       radius: '',
       border: '',
       fill: 'var(--local-border-color, var(--border-color)) :disabled[rgba(var(--local-border-color-rgb, var(--border-color-rgb)), var(--disabled-opacity))]',
-      outline: 'focus-inside visible',
+      outline: 'n :radiogroup[focus-inside visible]',
+      transition: 'filter, opacity',
+      filter: 'n :disabled[saturate(0.33) contrast(0.88) opacity(var(--disabled-opacity))]',
     };
   }
 
   static get nuContext() {
     return {
       'attrs:action': {
         border: '0',
-        outline: 'n',
-        padding: '1x',
+        outline: '^btngroup focus visible :radiogroup[n]',
+        padding: '1x 1.5x',
+        filter: 'n',
       },
     };
   }

diff --git a/src/elements/check.js b/src/elements/check.js
@@ -18,9 +18,9 @@ export default class NuCheck extends NuEl {
       interactive: ':invalid[yes] no',
       size: 'sm',
       text: 'b',
-      // height: ':invalid[max(1lh)] max(1px)',
       transition: 'opacity, height',
-    }
+      color: '#danger',
+    };
   }
 
   nuInit() {

diff --git a/src/elements/checkbox.js b/src/elements/checkbox.js
@@ -19,8 +19,12 @@ export default class NuCheckbox extends NuAction {
         name="check checkmark"
         size="1em"
         height="1em"
-        opacity="--icon-opacity"
-        transition="opacity"></nu-icon>
+        width="1em"
+        color="^ #clear :pressed[#special-text]"
+        fill="^ #bg :pressed[#special-bg]"
+        transition="fill, color, opacity, inset"
+        transition="opacity"
+        inset="^ 0 :active[.5em] :pressed[0] :active:pressed[.5em]"></nu-icon>
     `;
   }
 
@@ -29,21 +33,18 @@ export default class NuCheckbox extends NuAction {
       display: 'inline-grid',
       width: '1em',
       height: '1em',
-      border: '1bw #text :disabled[1bw #text.50]',
+      border: '#text :disabled.pressed[#text.50] :pressed[#special-bg]',
       radius: '.25em',
       content: 'stretch',
       items: 'center',
       padding: '0',
+      overflow: 'n',
       sizing: 'content',
-      color: 'special :disabled[text 66%]',
-      fill: 'bg',
       cursor: 'default',
       text: 'v-middle',
-      inset: '0 :active[.5em] :pressed[0] :active:pressed[.5em]',
-      mark: ':focusable[.5em hover]',
+      mark: '.5em hover :disabled[n]',
       expand: '.5em',
-
-      '--icon-opacity': ':pressed[1] 0',
+      inset: 'n',
     };
   }
 }
diff --git a/src/elements/input.js b/src/elements/input.js
@@ -32,11 +32,10 @@ export default class NuInput extends NuEl {
       radius: '',
       padding: '1x',
       fill: 'input :special[special-bg]',
-      mark: 'n :disabled[#special-bg.10]',
       color: 'text :special[special-text]',
       border: '1bw',
       outline: 'focus-inside',
-      opacity: '1 :disabled[--disabled-opacity]',
+      filter: 'n :disabled[saturate(0.33) contrast(0.78) opacity(var(--disabled-opacity))]',
       transition: 'theme',
       selectable: 'n',
       box: 'y',
@@ -118,13 +117,14 @@ export default class NuInput extends NuEl {
       `${sel('', '::placeholder')} {
         -webkit-text-fill-color: var(--local-placeholder-color);
         color: var(--local-placeholder-color);
+        filter: saturate(.33);
       }`,
 
-      `${sel('[special]', '::placeholder')} {
+      `${sel('[special]:not([disabled])', '::placeholder')} {
         --local-placeholder-color: var(--placeholder-color, rgba(var(--special-text-color-rgb), .5));
       }`,
 
-      `${sel(':not([special])', '::placeholder')} {
+      `${sel(':not([special]):not([disabled])', '::placeholder')} {
         --local-placeholder-color: var(--placeholder-color, rgba(var(--text-color-rgb), .5));
       }`,
     ];

diff --git a/src/elements/listbox.js b/src/elements/listbox.js
@@ -20,7 +20,7 @@ export default class NuListBox extends NuCard {
     return {
       padding: '.5x',
       outline: 'n',
-      gap: '0 :multiple[1bw]',
+      gap: '1bw',
       border: 'y :focus[y #special]',
     };
   }

diff --git a/src/elements/option.js b/src/elements/option.js
@@ -21,7 +21,7 @@ export default class NuOption extends NuEl {
     return {
       display: 'grid',
       padding: '1x 1.5x',
-      fill: 'transparent :selected[special-bg]',
+      fill: 'transparent :selected.disabled[#special-bg] :disabled[#local-bg]',
       outline: 'n :current[y focus-outside visible]',
       width: '100%',
       flow: 'column',
@@ -33,7 +33,7 @@ export default class NuOption extends NuEl {
       color: 'text',
       transition: 'theme',
       mark: 'hover',
-      opacity: '1 :disabled[--disabled-opacity]',
+      filter: 'n :disabled[saturate(0.33) contrast(0.88) opacity(var(--disabled-opacity))]',
       cursor: 'pointer :disabled[default]',
       inset: '.75em #shadow.0 :active[.75em #shadow.50] :selected[.75em #shadow.0] :active:selected[.75em #special-shadow.50]',
       text: 'sb nowrap',

diff --git a/src/elements/radio.js b/src/elements/radio.js
@@ -16,22 +16,23 @@ export default class NuRadio extends NuAction {
   static get nuTemplate() {
     return `
       <nu-circle
-        fill="^host clear :pressed[special] :disabled:pressed[text 50%]"
+        fill="^host clear :pressed[#special-bg]"
         transition="fill"
+        size="1em - 2bw"
         border="0"></nu-circle>
     `;
   }
 
   static get nuStyles() {
     return {
       display: 'inline-block',
-      width: '1em',
-      height: '1em',
-      border: '1bw #text :disabled[1bw #text.50]',
+      width: '1em - 2bw',
+      height: '1em - 2bw',
+      border: '#text :disabled.pressed[#text.50] :pressed[#special-bg]',
       radius: 'round',
       content: 'stretch',
       items: 'center',
-      padding: '2bw',
+      padding: '1ow',
       sizing: 'content',
       cursor: 'default',
       text: 'v-middle',