@operato/board 1.0.0-beta.18 → 1.0.0-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.0.0-beta.18",
+  "version": "1.0.0-beta.19",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -49,17 +49,17 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@operato/app": "^1.0.0-beta.18",
-    "@operato/data-grist": "^1.0.0-beta.18",
-    "@operato/font": "^1.0.0-beta.18",
-    "@operato/graphql": "^1.0.0-beta.18",
-    "@operato/i18n": "^1.0.0-beta.18",
-    "@operato/input": "^1.0.0-beta.18",
-    "@operato/markdown": "^1.0.0-beta.18",
-    "@operato/popup": "^1.0.0-beta.18",
-    "@operato/property-editor": "^1.0.0-beta.18",
-    "@operato/styles": "^1.0.0-beta.18",
-    "@operato/utils": "^1.0.0-beta.18",
+    "@operato/app": "^1.0.0-beta.19",
+    "@operato/data-grist": "^1.0.0-beta.19",
+    "@operato/font": "^1.0.0-beta.19",
+    "@operato/graphql": "^1.0.0-beta.19",
+    "@operato/i18n": "^1.0.0-beta.19",
+    "@operato/input": "^1.0.0-beta.19",
+    "@operato/markdown": "^1.0.0-beta.19",
+    "@operato/popup": "^1.0.0-beta.19",
+    "@operato/property-editor": "^1.0.0-beta.19",
+    "@operato/styles": "^1.0.0-beta.19",
+    "@operato/utils": "^1.0.0-beta.19",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
@@ -71,7 +71,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@hatiolab/things-scene": "^3.0.6",
+    "@hatiolab/things-scene": "^3.0.7",
     "@material/mwc-fab": "^0.25.3",
     "@material/mwc-icon": "^0.25.3",
     "@open-wc/eslint-config": "^4.3.0",
@@ -107,5 +107,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ef924f62033e3a16c1a2771bd53ddaa9b06ffa91"
+  "gitHead": "335d3279d8fb69496472ba348b9a023786b1fca3"
 }

package/src/modeller/property-sidebar/data-binding/data-binding-mapper.ts

@@ -8,10 +8,9 @@ import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-code.js'
 import '@operato/i18n/ox-i18n.js'
 
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
+import { LitElement, PropertyValues, css, html } from 'lit'
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 export type Rule =
   | {
@@ -27,6 +26,7 @@ export type Mapping = {
   target?: string
   property?: string
   param?: Rule
+  ndnsp?: boolean
 }
 
 /**
@@ -126,6 +126,26 @@ export default class DataBindingMapper extends LitElement {
         height: 300px;
         overflow: auto;
       }
+
+      /* checkbox-row */
+      .checkbox-row {
+        grid-column: span 10;
+
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        grid-gap: 5px;
+        grid-auto-rows: minmax(24px, auto);
+        align-items: center;
+      }
+
+      .checkbox-row > input {
+        grid-column: 4 / 5;
+      }
+
+      .checkbox-row > label {
+        grid-column: span 6;
+        text-align: left;
+      }
     `
   ]
 
@@ -228,7 +248,7 @@ export default class DataBindingMapper extends LitElement {
         <div data-value="eval"><ox-i18n msgid="label.eval"></ox-i18n></div>
       </ox-buttons-radio>
 
-      <div rule-editors class="content" ?hidden=${mapping.rule == 'value'}>
+      <div rule-editors ?hidden=${mapping.rule == 'value'}>
         <ox-input-value-map
           value-key="map"
           .value=${this.rule.map || {}}
@@ -253,6 +273,11 @@ export default class DataBindingMapper extends LitElement {
         >
         </ox-input-code>
       </div>
+
+      <div class="checkbox-row">
+        <input id="checkbox-ndnsp" type="checkbox" value-key="ndnsp" .checked=${mapping.ndnsp === true} />
+        <label for="checkbox-ndnsp"> <ox-i18n msgid="label.ndnsp">No Data No Spreading</ox-i18n> </label>
+      </div>
     `
   }
 
@@ -332,9 +357,9 @@ export default class DataBindingMapper extends LitElement {
 
     if (!key) return
 
-    var value = element.value
+    var value: string | boolean = element.value
 
-    if (key == 'target') {
+    if (key === 'target') {
       if (value.length > 0 && !/^[.#(\[]/.test(value)) {
         value = '#' + value.trim()
 
@@ -345,25 +370,34 @@ export default class DataBindingMapper extends LitElement {
         ...this.mapping,
         target: value
       }
-    } else if (key == 'accessor') {
+    } else if (key === 'accessor') {
       this.mapping = {
         ...this.mapping,
         accessor: (value || '').trim()
       }
-    } else if (key == 'property') {
+    } else if (key === 'property') {
       this.mapping = {
         ...this.mapping,
         property: (value || '').trim()
       }
-    } else if (key == 'map' || key == 'range' || key == 'eval') {
+    } else if (key === 'map' || key === 'range' || key === 'eval') {
       this.rule[key] = value
       this.mapping = {
         ...this.mapping,
         param: value
       }
+    } else if (key === 'ndnsp' /* no data no spreading */) {
+      value = element.checked
+
+      this.mapping = {
+        ...this.mapping,
+        ndnsp: value
+      }
     }
 
-    if (!this.mapping.rule) this.mapping.rule = 'value'
+    if (!this.mapping.rule) {
+      this.mapping.rule = 'value'
+    }
 
     this._keep_saved_rule_params = true
     this.dispatchEvent(

package/src/modeller/property-sidebar/property-shared-style.ts

@@ -26,6 +26,10 @@ export const PropertySharedStyle = css`
     border: var(--property-sidebar-fieldset-border);
   }
 
+  ox-input-data {
+    height: 300px;
+  }
+
   /* property grid */
   .property-grid {
     display: grid;

package/src/modeller/property-sidebar/styles/styles.ts

@@ -5,6 +5,7 @@
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
 import '@operato/help/ox-title-with-help.js'
 import '@operato/input/ox-input-color.js'
+import '@operato/input/ox-input-range.js'
 import '@operato/app/input/ox-input-fill-style.js'
 import '@operato/font/ox-font-selector.js'
 import '@operato/i18n/ox-i18n.js'
@@ -21,7 +22,7 @@ class PropertyStyles extends AbstractProperty {
   static styles = [
     PropertySharedStyle,
     css`
-      paper-slider {
+      ox-input-range {
         width: 100%;
       }
 
@@ -334,7 +335,7 @@ class PropertyStyles extends AbstractProperty {
 
   render() {
     var {
-      alpha,
+      alpha = 1,
       fontFamily,
       fontSize,
       lineHeight,
@@ -358,7 +359,7 @@ class PropertyStyles extends AbstractProperty {
         <legend>
           <ox-title-with-help topic="board-modeller/styles/opacity" msgid="label.opacity">opacity</ox-title-with-help>
         </legend>
-        <paper-slider min="0" max="1" step="0.1" value-key="alpha" .value=${alpha || 1} editable> </paper-slider>
+        <ox-input-range min="0" max="1" step="0.1" value-key="alpha" .value=${alpha} editable> </ox-input-range>
       </fieldset>
 
       <fieldset>