Fix @Local

Author: Templarian

README.md

@@ -44,6 +44,6 @@ Web Components with a very basic wrapper. The only magic is...
   - Calls `this.render()` on change.
 - `@Part() $foo: HTMLDivElement;` = `<div part="foo"></div>`
   - `this.$part.innerText = 'Hello World!';`
-- `@Local('default') foo;` Shorthand for localStorage.
+- `@Local('store') foo = Map([['key', true]]);` Shorthand for localStorage.
 
 Learn More: https://github.com/Pictogrammers/Element

package-lock.json

@@ -26,7 +26,7 @@
     "remarkable": "^2.0.1"
   },
   "devDependencies": {
-    "@pictogrammers/element": "0.0.52",
+    "@pictogrammers/element": "0.0.54",
     "@pictogrammers/element-jest": "^0.1.8",
     "@pictogrammers/element-webpack": "^0.1.48",
     "cross-env": "^7.0.3",

package.json

@@ -1,4 +1,4 @@
-import { Component, Part, Prop } from '@pictogrammers/element';
+import { Component, Part } from '@pictogrammers/element';
 import PgButtonToggle from '../../buttonToggle';
 
 import template from './basic.html';
@@ -18,6 +18,6 @@ export default class XPgButtonToggleBasic extends HTMLElement {
 
   handleClick(e) {
     const { active } = e.detail;
-    this.$value.innerText = `${active}`;
+    this.$value.textContent = `${active}`;
   }
 }

src/pg/buttonToggle/__examples__/basic/basic.ts

@@ -0,0 +1,10 @@
+<div class="example">
+  <p>click to toggle and persist state in LocalStorage</p>
+  <pg-button-toggle part="button">
+    <pg-icon slot="inactive" path="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></pg-icon>
+    <pg-icon slot="active" path="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"></pg-icon>
+  </pg-button-toggle>
+  <div>
+    <code>button onclick: <code part="value"></code></code>
+  </div>
+</div>

src/pg/buttonToggle/__examples__/persist/persist.html

@@ -0,0 +1,35 @@
+import { Component, Local, Part } from '@pictogrammers/element';
+import PgButtonToggle from '../../buttonToggle';
+
+import template from './persist.html';
+
+@Component({
+  selector: 'x-pg-button-toggle-persist',
+  template
+})
+export default class XPgButtonTogglePersist extends HTMLElement {
+
+  @Part() $button: PgButtonToggle;
+  @Part() $value: HTMLSpanElement;
+
+  // Get shared example store
+  @Local('example') #store = new Map<string, any>([
+    // example:toggle defaults to false
+    ['toggle', false]
+  ]);
+
+  connectedCallback() {
+    // replace with toggle event??? and throw for click events
+    this.$button.addEventListener('click', this.#handleClick.bind(this));
+    if (this.#store.get('toggle')) {
+      this.$button.active = true;
+      this.$value.textContent = 'true';
+    }
+  }
+
+  #handleClick(e: any) {
+    const { active } = e.detail;
+    this.$value.textContent = `${active}`;
+    this.#store.set('toggle', active);
+  }
+}

src/pg/buttonToggle/__examples__/persist/persist.ts

@@ -3,7 +3,7 @@
 Out of all the components this is the most useful one as it controls the local cache of icon data. From a high level this component gives access to a `DatabaseService` instance.
 
 ```typescript
-import '@pictogrammers/components/pgAnnoy.js';
+import '@pictogrammers/components/pgDatabase.js';
 ```
 
 ## Usage

src/pg/database/README.md

@@ -38,9 +38,11 @@ export default class PgMenuIcon extends HTMLElement {
   @Part() $colorPicker: any;
   @Part() $colorHexRgb: any;
 
-  @Local() cachePngColor: string = '#000000';
-  @Local() cachePngSize: string = '24';
-  @Local() cacheSvgColor: string = '#000000';
+  @Local('store') store = new Map<string, any>([
+    ['cachePngColor', '#000000'],
+    ['cachePngSize', 24],
+    ['cacheSvgColor', '#000000']
+  ]);
 
   color = 'svg';
   @Prop() currentIndex: number = 0;
@@ -50,19 +52,19 @@ export default class PgMenuIcon extends HTMLElement {
     // Wire Up Context Menu
     this.$copyIconName.addEventListener('click', this.handleCopyIconName.bind(this));
     this.$svgBlack.addEventListener('click', () => {
-      this.cacheSvgColor = '#000000';
+      this.store.set('cacheSvgColor', '#000000');
       this.render();
     });
     this.$svgWhite.addEventListener('click', () => {
-      this.cacheSvgColor = '#FFFFFF';
+      this.store.set('cacheSvgColor', '#FFFFFF');
       this.render();
     });
     let preventSvgColor = false;
     this.$svgColor.addEventListener('click', () => {
       if (preventSvgColor) { preventSvgColor = false; return; }
       this.color = 'svg';
-      this.$colorPicker.value = this.cacheSvgColor;
-      this.$colorHexRgb.value = this.cacheSvgColor;
+      this.$colorPicker.value = this.store.get('cacheSvgColor');
+      this.$colorHexRgb.value = this.store.get('cacheSvgColor');
       const self = this;
       //createPopper(this.$svgColor, this.$color, {
       //  placement: 'bottom-start'
@@ -83,19 +85,19 @@ export default class PgMenuIcon extends HTMLElement {
       document.addEventListener('mousedown', handleMouseDown);
     });
     this.$pngBlack.addEventListener('click', () => {
-      this.cachePngColor = '#000000';
+      this.store.set('cachePngColor', '#000000');
       this.render();
     });
     this.$pngWhite.addEventListener('click', () => {
-      this.cachePngColor = '#FFFFFF';
+      this.store.set('cachePngColor', '#FFFFFF');
       this.render();
     });
     let preventPngColor = false;
     this.$pngColor.addEventListener('click', () => {
       if (preventPngColor) { preventPngColor = false; return; }
       this.color = 'png';
-      this.$colorPicker.value = this.cachePngColor;
-      this.$colorHexRgb.value = this.cachePngColor;
+      this.$colorPicker.value = this.store.get('cachePngColor');
+      this.$colorHexRgb.value = this.store.get('cachePngColor');
       const self = this;
       //createPopper(this.$pngColor, this.$color, {
       //  placement: 'bottom-start'
@@ -116,26 +118,26 @@ export default class PgMenuIcon extends HTMLElement {
       document.addEventListener('mousedown', handleMouseDown);
     });
     this.$png24.addEventListener('click', () => {
-      this.cachePngSize = '24';
+      this.store.set('cachePngSize', 24);
       this.render();
     });
     this.$png36.addEventListener('click', () => {
-      this.cachePngSize = '36';
+      this.store.set('cachePngSize', 36);
       this.render();
     });
     this.$png48.addEventListener('click', () => {
-      this.cachePngSize = '48';
+      this.store.set('cachePngSize', 48);
       this.render();
     });
     this.$png96.addEventListener('click', () => {
-      this.cachePngSize = '96';
+      this.store.set('cachePngSize', 96);
       this.render();
     });
     this.$svgDownload.addEventListener('click', () => {
-      alert(`SVG ${this.cacheSvgColor}`);
+      alert(`SVG ${this.store.get('cacheSvgColor')}`);
     });
     this.$pngDownload.addEventListener('click', () => {
-      alert(`SVG ${this.cachePngSize} ${this.cachePngColor}`);
+      alert(`SVG ${this.store.get('cachePngSize')} ${this.store.get('cachePngColor')}`);
     });
     this.$copySvgInline.addEventListener('click', () => {
       const icon = this.icon;
@@ -214,16 +216,19 @@ export default class PgMenuIcon extends HTMLElement {
 
   render() {
     // Context Menu
-    this.$svgBlack.classList.toggle('active', this.cacheSvgColor === '#000000');
-    this.$svgWhite.classList.toggle('active', this.cacheSvgColor === '#FFFFFF');
-    this.$svgColor.classList.toggle('active', this.cacheSvgColor !== '#000000' && this.cacheSvgColor !== '#FFFFFF');
-    this.$pngBlack.classList.toggle('active', this.cachePngColor === '#000000');
-    this.$pngWhite.classList.toggle('active', this.cachePngColor === '#FFFFFF');
-    this.$pngColor.classList.toggle('active', this.cachePngColor !== '#000000' && this.cachePngColor !== '#FFFFFF');
-    this.$png24.classList.toggle('active', this.cachePngSize === '24');
-    this.$png36.classList.toggle('active', this.cachePngSize === '36');
-    this.$png48.classList.toggle('active', this.cachePngSize === '48');
-    this.$png96.classList.toggle('active', this.cachePngSize === '96');
+    const cacheSvgColor = this.store.get('cacheSvgColor');
+    const cachePngColor = this.store.get('cachePngColor');
+    const cachePngSize = this.store.get('cachePngSize');
+    this.$svgBlack.classList.toggle('active', cacheSvgColor === '#000000');
+    this.$svgWhite.classList.toggle('active', cacheSvgColor === '#FFFFFF');
+    this.$svgColor.classList.toggle('active', cacheSvgColor !== '#000000' && cacheSvgColor !== '#FFFFFF');
+    this.$pngBlack.classList.toggle('active', cachePngColor === '#000000');
+    this.$pngWhite.classList.toggle('active', cachePngColor === '#FFFFFF');
+    this.$pngColor.classList.toggle('active', cachePngColor !== '#000000' && cachePngColor !== '#FFFFFF');
+    this.$png24.classList.toggle('active', cachePngSize === 24);
+    this.$png36.classList.toggle('active', cachePngSize === 36);
+    this.$png48.classList.toggle('active', cachePngSize === 48);
+    this.$png96.classList.toggle('active', cachePngSize === 96);
     this.$colorPicker.addEventListener('select', this.handleColorSelect.bind(this));
     this.$colorHexRgb.addEventListener('change', this.handleHexRgbChange.bind(this));
     this.syncEyedropper();
@@ -232,10 +237,10 @@ export default class PgMenuIcon extends HTMLElement {
   handleColorSelect(e) {
     switch(this.color) {
       case 'svg':
-        this.cacheSvgColor = e.detail.hex;
+        this.store.set('cacheSvgColor', e.detail.hex);
         break;
       case 'png':
-        this.cachePngColor = e.detail.hex;
+        this.store.set('cachePngColor', e.detail.hex);
         break;
     }
     this.$colorHexRgb.value = e.detail.hex;
@@ -245,24 +250,26 @@ export default class PgMenuIcon extends HTMLElement {
   handleHexRgbChange(e) {
     switch(this.color) {
       case 'svg':
-        this.cacheSvgColor = e.detail.hex;
+        this.store.set('cacheSvgColor', e.detail.hex);
         break;
       case 'png':
-        this.cachePngColor = e.detail.hex;
+        this.store.set('cachePngColor', e.detail.hex);
         break;
     }
     this.$colorPicker.value = e.detail.hex;
     this.syncEyedropper();
   }
 
   syncEyedropper() {
-    if (this.cachePngColor !== '#000000' && this.cachePngColor !== '#FFFFFF') {
-      this.$pngColor.style.color = this.cachePngColor;
+    const cachePngColor = this.store.get('cachePngColor');
+    if (cachePngColor !== '#000000' && cachePngColor !== '#FFFFFF') {
+      this.$pngColor.style.color = cachePngColor;
     } else {
       this.$pngColor.style.color = 'transparent';
     }
-    if (this.cacheSvgColor !== '#000000' && this.cacheSvgColor !== '#FFFFFF') {
-      this.$svgColor.style.color = this.cacheSvgColor;
+    const cacheSvgColor = this.store.get('cacheSvgColor');
+    if (cacheSvgColor !== '#000000' && cacheSvgColor !== '#FFFFFF') {
+      this.$svgColor.style.color = cacheSvgColor;
     } else {
       this.$svgColor.style.color = 'transparent';
     }

src/pg/menuIcon/menuIcon.ts

@@ -36,8 +36,5 @@ footer {
   border-top: 1px solid #ccc;
   background: #f1f1f1;
   justify-content: flex-end;
-}
-
-[part="no"] {
-  margin-right: 0.5rem;
+  gap: 0.5rem;
 }