@pictogrammers/components 0.4.8 → 0.5.0

package/package.json

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

package/pg/annoy/annoy.css

@@ -1,7 +1,7 @@
 :host {
   display: block;
   position: var(--pg-annoy-position, fixed);
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
   width: var(--pg-annoy-width, 12rem);
   height: var(--pg-annoy-height, auto);
   max-height: var(--pg-annoy-max-height, auto);

package/pg/button/button.css

@@ -1,25 +1,26 @@
 :host {
-  display: contents;
+  display: inline-flex;
 }
 
 [part="button"] {
   display: flex;
   align-items: center;
   align-content: center;
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
   font-size: var(--pg-button-font-size, 1rem);
   line-height: var(--pg-button-line-height, 1.5rem);
-  border: 1px solid var(--pg-button-border-color, #453C4F);
+  border: var(--pg-button-border-width, 1px) solid var(--pg-button-border-color, #453C4F);
   background-color: var(--pg-button-background-color, #FFFFFF);
   color: var(--pg-button-color, #453C4F);
   padding: var(--pg-button-padding, 0.25rem 0.5rem);
   border-radius: var(--pg-button-border-radius, 0.25rem);
   outline: none;
   --pg-icon-color: var(--pg-button-color, #453C4F);
+  cursor: var(--pg-button-cursor, var(--pg-cursor-default, default));
 }
 
 [part="button"]:hover {
-  border: 1px solid var(--pg-button-hover-border-color, #453C4F);
+  --pg-button-border-color: var(--pg-button-hover-border-color, #453C4F);
   background-color: var(--pg-button-hover-background-color, #453C4F);
   color: var(--pg-button-hover-color, #FFFFFF);
   --pg-icon-color: var(--pg-button-hover-color, #FFFFFF);

package/pg/buttonLink/buttonLink.css

@@ -6,7 +6,7 @@
   display: inline-flex;
   align-items: center;
   align-content: center;
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
   font-size: 1rem;
   line-height: 1.5rem;
   text-decoration: none;

package/pg/buttonMenu/__examples__/basic/basic.ts

@@ -37,7 +37,7 @@ export default class XPgButtonMenuBasic extends HTMLElement {
   }
 
   handleChange(e: any) {
-    const { active } = e.detail;
-    this.$value.textContent = `${active}`;
+    const { indexes, item } = e.detail;
+    this.$value.textContent = `indexes: ${indexes.join(',')}; item: ${JSON.stringify(item)}`;
   }
 }

package/pg/buttonMenu/buttonMenu.ts

@@ -52,9 +52,12 @@ export default class PgButtonMenu extends HTMLElement {
     });
     this.$icon.path = IconExpand;
     if (result !== undefined) {
+      const { indexes, item } = result;
       this.dispatchEvent(new CustomEvent('change', {
         detail: {
-          value: result.value
+          indexes,
+          item,
+          value: item.value
         }
       }));
     }

package/pg/cardUser/cardUser.css

@@ -1,7 +1,7 @@
 :host {
   display: flex;
   flex-direction: column;
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
 }
 
 [part="user"] {

package/pg/database/__examples__/basic/basic.ts

@@ -1,5 +1,4 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
-import PgDatabase from 'pg/database/database';
 import { Icon } from '../../../shared/models/icon';
 
 import template from './basic.html';

package/pg/grid/__examples__/basic/basic.ts

@@ -1,8 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
-import PgDatabase from 'pg/database/database';
-import PgTooltip from 'pg/tooltip';
-import { Icon } from '../../../shared/models/icon';
-import PgGrid from '../../grid';
+
 
 import template from './basic.html';
 

package/pg/grid/grid.css

@@ -1,5 +1,5 @@
 * {
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
 }
 
 :host {

package/pg/header/header.css

@@ -9,7 +9,7 @@ header {
   grid-column: 1 / span 2;
   background: var(--pg-header-background, #fff);
   color: var(--pg-header-color, #453C4F);
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
   height: 3rem;
 }
 header > a {

package/pg/icon/__examples__/basic/basic.ts

@@ -1,5 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
-import PgIcon from 'pg/icon/icon';
+import PgIcon from '../../icon';
 
 import template from './basic.html';
 import { mdiAccount, mdiSquare } from './constants';

package/pg/inputCheck/__examples__/basic/basic.ts

@@ -1,5 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
-import PgInputCheck from 'pg/inputCheck/inputCheck';
+import PgInputCheck from '../../inputCheck';
 
 import template from './basic.html';
 

package/pg/inputCheck/inputCheck.css

@@ -22,6 +22,11 @@
   background: transparent;
 }
 
+[part="button"].readonly {
+  display: contents;
+  pointer-events: none;
+}
+
 [part="svg"] {
   width: var(--pg-icon-check-size, 1.5rem);
   height: var(--pg-icon-check-size, 1.5rem);

package/pg/inputCheck/inputCheck.ts

@@ -14,6 +14,7 @@ const PATH_CHECKED = 'M19 19L5 19V5H15V3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5
 export default class PgInputCheck extends HTMLElement {
   @Prop() value: string | boolean = false;
   @Prop() disabled: boolean = false;
+  @Prop() readOnly: boolean = false;
 
   @Part() $button: HTMLButtonElement;
   @Part() $path: SVGPathElement;
@@ -38,5 +39,8 @@ export default class PgInputCheck extends HTMLElement {
     if (changes.disabled) {
       this.$button.disabled = ['', true, 'true'].includes(this.disabled);
     }
+    if (changes.readOnly) {
+      this.$button.classList.toggle('readonly', this.readOnly);
+    }
   }
 }

package/pg/inputCheckList/__examples__/basic/basic.ts

@@ -1,5 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
-import PgInputCheckList from 'pg/inputCheckList/inputCheckList';
+import PgInputCheckList from '../../inputCheckList';
 
 import template from './basic.html';
 

package/pg/inputFileLocal/inputFileLocal.css

@@ -6,7 +6,7 @@
   display: grid;
   grid-template-columns: 1.5rem auto;
   grid-template-rows: auto;
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
   font-size: 1rem;
   line-height: 1.5rem;
   border: 1px solid var(--pg-button-border-color, #453C4F);

package/pg/inputNumber/README.md

@@ -0,0 +1,27 @@
+# `<pg-input-number>`
+
+The `pg-input-number` component creates an input that accepts number input.
+
+```typescript
+import '@pictogrammers/components/pgInputNumber';
+import PgInputNumber from '@pictogrammers/components/pgInputText';
+```
+
+```html
+<pg-input-number value="50"></pg-input-number>
+```
+
+## Attributes
+
+| Attributes  | Tested   | Description |
+| ----------- | -------- | ----------- |
+| name        |          | Unique name in `pg-form` |
+| value       |          | Field value |
+| placeholder |          | Placeholder text |
+
+## Events
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| change     |          | `{ detail: { value }` |
+| input      |          | `{ detail: { value }` |

package/pg/inputNumber/__examples__/basic/basic.html

@@ -0,0 +1,9 @@
+<div class="example">
+  <pg-input-number part="input" value="42"></pg-input-number>
+  <div>
+    <code>onchange: <span part="value1"></span></code>
+  </div>
+  <div>
+    <code>oninput: <span part="value2"></span></code>
+  </div>
+</div>

package/pg/inputNumber/__examples__/basic/basic.ts

@@ -0,0 +1,30 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgInputNumber from '../../inputNumber';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-number-basic',
+  template
+})
+export default class XPgInputNumberBasic extends HTMLElement {
+
+  @Part() $input: PgInputNumber;
+  @Part() $value1: HTMLSpanElement;
+  @Part() $value2: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', this.#handleChange.bind(this));
+    this.$input.addEventListener('input', this.#handleInput.bind(this));
+  }
+
+  #handleChange(e: CustomEvent) {
+    const { value } = e.detail;
+    this.$value1.textContent = value;
+  }
+
+  #handleInput(e: CustomEvent) {
+    const { value } = e.detail;
+    this.$value2.textContent = value;
+  }
+}

package/pg/inputNumber/inputNumber.css

@@ -0,0 +1,34 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family, system-ui);
+}
+
+[part=input] {
+  border: 1px solid var(--pg-input-text-border-color, #453C4F);
+  border-radius: 0.125rem;
+  padding: var(--pg-input-text-padding, calc(0.5rem - 1px) 0.75rem);
+  font-family: var(--pg-input-number-font-family, var(--pg-font-family));
+  font-size: 1rem;
+  outline: none;
+  field-sizing: content;
+  min-width: calc(100% - 0.5rem - 2px);
+  max-width: calc(var(--pg-input-text-max-width, 100%) - 0.5rem - 2px);
+  background-color: transparent;
+  appearance: textfield;
+}
+
+[part=input]::-webkit-outer-spin-button,
+[part=input]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+[part=input]:read-only {
+  border-color: transparent;
+}
+
+[part=input]:active {
+  box-shadow: 0 0 0 3px var(--pg-input-text-active-glow, rgb(79, 143, 249, 0.6));
+}
+[part=input]:focus {
+  box-shadow: 0 0 0 3px var(--pg-input-text-focus-glow, rgb(79, 143, 249, 0.5));
+}

package/pg/inputNumber/inputNumber.html

@@ -0,0 +1 @@
+<input part="input" type="number" />

package/pg/inputNumber/inputNumber.spec.ts

@@ -0,0 +1,59 @@
+import { selectComponent, getProps } from '@pictogrammers/element';
+
+import './inputNumber';
+import PgInputText from './inputNumber';
+
+const PG_INPUT_TEXT = 'pg-input-text';
+
+describe('pg-input-text', () => {
+
+  beforeEach(() => {
+    var c = document.createElement(PG_INPUT_TEXT);
+    document.body.appendChild(c);
+  });
+
+  afterEach(() => {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get(PG_INPUT_TEXT)).toBeDefined();
+  });
+
+  it('should only expose known props', () => {
+    const props = getProps(PG_INPUT_TEXT);
+    expect(props.length).toBe(3);
+    expect(props).toContain('name');
+    expect(props).toContain('value');
+    expect(props).toContain('placeholder');
+  });
+
+  it('should default value to empty', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    const { $input } = component;
+    expect($input.value).toEqual('');
+  });
+
+  it('should set value to "Hello World!"', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    component.value = 'Hello World!';
+    const { $input } = component;
+    expect($input.value).toEqual('Hello World!');
+  });
+
+  it('should default placeholder to empty', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    const { $input } = component;
+    expect($input.placeholder).toEqual('');
+  });
+
+  it('should set placeholder to "Hello World!"', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    component.placeholder = 'Hello World!';
+    const { $input } = component;
+    expect($input.placeholder).toEqual('Hello World!');
+  });
+
+});

package/pg/inputNumber/inputNumber.ts

@@ -0,0 +1,63 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputNumber.html';
+import style from './inputNumber.css';
+
+@Component({
+  selector: 'pg-input-number',
+  style,
+  template,
+})
+export default class PgInputNumber extends HTMLElement {
+  @Prop() name: string = '';
+  @Prop() value: string = '';
+  @Prop() placeholder: string = '';
+  @Prop() readOnly: boolean = false;
+
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  skipValue = false;
+
+  render(changes) {
+    if (changes.value && !this.skipValue) {
+      this.$input.value = this.value;
+    }
+    if (changes.placeholder) {
+      this.$input.placeholder = this.placeholder;
+    }
+    if (changes.readOnly) {
+      this.$input.readOnly = this.readOnly;
+    }
+    this.skipValue = false;
+  }
+
+  handleInput(e) {
+    e.stopPropagation();
+    this.skipValue = true;
+    this.value = e.target.value;
+    this.dispatchEvent(
+      new CustomEvent('input', {
+        detail: {
+          value: e.target.value,
+          name: e.name
+        }
+      })
+    );
+  }
+
+  handleChange(e) {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          value: e.target.value,
+          name: e.name
+        }
+      })
+    );
+  }
+}