@pictogrammers/components 0.4.7 → 0.4.8

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@pictogrammers/components",
     "type": "module",
-    "version": "0.4.7",
+    "version": "0.4.8",
     "license": "MIT",
     "author": "Austin Andrews",
     "scripts": {

package/pg/app/app.css

@@ -57,7 +57,7 @@
   flex-direction: column;
   grid-column: 1;
   grid-row: 2;
-  min-width: 10rem;
+  min-width: 12rem;
   max-width: 20rem;
 }
 

package/pg/app/app.ts

@@ -1,4 +1,4 @@
-import { Component, Part, Prop } from '@pictogrammers/element';
+import { Component, Part, Prop, Local } from '@pictogrammers/element';
 
 import template from './app.html';
 import style from './app.css';
@@ -14,9 +14,14 @@ export default class PgApp extends HTMLElement {
   @Part() $side: HTMLDivElement;
   @Part() $resize: HTMLButtonElement;
 
+  @Local('app') store = new Map([
+    ['width', 12 * 16]
+  ]);
+
   connectedCallback() {
     this.$logo.addEventListener('click', this.#handleClick.bind(this));
     this.$resize.addEventListener('pointerdown', this.#handlePointerDown.bind(this));
+    this.$side.style.width = `${this.store.get('width')}px`;
   }
 
   #handleClick() {
@@ -33,6 +38,7 @@ export default class PgApp extends HTMLElement {
       const x = currentX - ee.clientX;
       const width = currentWidth - x;
       this.$side.style.width = `${width}px`;
+      this.store.set('width', Math.floor(width));
     }
     const handlePointerUp = () => {
       this.$resize.classList.remove('dragging');
@@ -42,4 +48,4 @@ export default class PgApp extends HTMLElement {
     document.addEventListener('pointermove', handlePointerMove);
     document.addEventListener('pointerup', handlePointerUp);
   }
-}
+}