@pictogrammers/components 0.5.15 → 0.5.18

package/pg/nodeEditorLink/nodeEditorLink.css

@@ -0,0 +1,69 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family, system-ui);
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  padding-inline: 0.25rem;
+}
+
+[part=label] {
+  font-size: 0.625rem;
+  line-height: 1rem;
+  padding-inline: 0.25rem;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+[part=link] {
+  flex: 1;
+  border: 0;
+  background: none;
+  text-align: start;
+  padding-block: 0;
+  padding-inline: 0.25rem;
+  font-family: var(--pg-font-family, system-ui);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: rgb(79, 143, 249);
+  text-decoration: underline;
+  cursor: pointer;
+  border-radius: 0.125rem;
+  outline: none;
+}
+
+[part=link]:hover {
+  color: rgb(127, 173, 255);
+}
+
+[part=link]:focus-visible {
+  outline: 1px solid rgb(79, 143, 249, 0.75);
+}
+
+[part=select] {
+  border: 0;
+  background: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  line-height: 0;
+  padding-block: 0.0625rem;
+  padding-inline: 0.0625rem;
+  border-radius: 0.125rem;
+  outline: none;
+}
+
+[part=select]:hover {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+[part=select]:focus-visible {
+  outline: 1px solid rgb(79, 143, 249, 0.75);
+}

package/pg/nodeEditorLink/nodeEditorLink.css.tmp.1408.09e961fd0dcc

@@ -0,0 +1,69 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family, system-ui);
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  padding-inline: 0.25rem;
+}
+
+[part=label] {
+  font-size: 0.625rem;
+  line-height: 1rem;
+  padding-inline: 0.25rem;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+[part=link] {
+  flex: 1;
+  border: 0;
+  background: none;
+  text-align: start;
+  padding-block: 0;
+  padding-inline: 0.25rem;
+  font-family: var(--pg-font-family, system-ui);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: rgb(79, 143, 249);
+  text-decoration: underline;
+  cursor: pointer;
+  border-radius: 0.125rem;
+  outline: none;
+}
+
+[part=link]:hover {
+  color: rgb(127, 173, 255);
+}
+
+[part=link]:focus-visible {
+  outline: 1px solid rgb(79, 143, 249, 0.75);
+}
+
+[part=select] {
+  border: 0;
+  background: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  line-height: 0;
+  padding-block: 0.125rem;
+  padding-inline: 0.125rem;
+  border-radius: 0.125rem;
+  outline: none;
+}
+
+[part=select]:hover {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+[part=select]:focus-visible {
+  outline: 1px solid rgb(79, 143, 249, 0.75);
+}

package/pg/nodeEditorLink/nodeEditorLink.html

@@ -0,0 +1,9 @@
+<div class="wrapper">
+  <span part="label"></span>
+  <div class="row">
+    <button part="link" type="button" title="Show linked node"></button>
+    <button part="select" type="button" title="Select a node">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="currentColor" d="M7 .5a1 1 0 0 1 1 1v.6A5.01 5.01 0 0 1 11.9 6h.6a1 1 0 1 1 0 2h-.6A5 5 0 0 1 8 11.9v.6a1 1 0 1 1-2 0v-.6A5 5 0 0 1 2.1 8h-.6a1 1 0 0 1 0-2h.6A5.01 5.01 0 0 1 6 2.1v-.6a1 1 0 0 1 1-1m.984 3.668a.999.999 0 0 1-1.97 0c-.863.3-1.546.983-1.846 1.847a1 1 0 0 1 0 1.97c.3.863.983 1.545 1.847 1.846a1 1 0 0 1 1.97 0A3 3 0 0 0 9.83 7.984a.999.999 0 0 1 0-1.97 3 3 0 0 0-1.847-1.846"/></svg>
+    </button>
+  </div>
+</div>

package/pg/nodeEditorNumber/nodeEditorNumber.css

@@ -0,0 +1,59 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family, system-ui);
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  padding-inline: 0.25rem;
+}
+
+[part=label] {
+  font-size: 0.625rem;
+  line-height: 1rem;
+  padding-inline: 0.25rem;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+[part=input]::-webkit-outer-spin-button,
+[part=input]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+[part=input] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+  border: 0;
+  border-radius: 0.125rem;
+  padding-inline-start: 0.25rem;
+  padding-inline-end: 0.25rem;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  font-family: var(--pg-input-text-font-family, var(--pg-font-family));
+  font-size: 0.75rem;
+  line-height: 1rem;
+  outline: none;
+  field-sizing: content;
+  min-width: calc(
+    100%
+    - var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
+    - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
+    - 2px
+  );
+  background-color: #2B2B2B;
+  color: #FFF;
+  outline: 1px solid #444;
+}
+
+[part=input]:read-only {
+  border-color: transparent;
+}
+
+[part=input]:active {
+  outline-color: rgb(79, 143, 249, 0.75);
+}
+[part=input]:focus {
+  outline-color: rgb(79, 143, 249, 0.75);
+}

package/pg/nodeEditorNumber/nodeEditorNumber.ts

@@ -0,0 +1,57 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './nodeEditorNumber.html';
+import style from './nodeEditorNumber.css';
+
+@Component({
+  selector: 'pg-node-editor-number',
+  style,
+  template,
+})
+export default class PgNodeEditorNumber extends HTMLElement {
+
+  static type = 'Number';
+
+  @Prop() label: string = '';
+  @Prop() value: number = 0;
+  @Prop() name: string = '';
+
+  @Part() $label: HTMLLabelElement;
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          value: Number(this.$input.value),
+        }
+      }));
+    });
+    this.$input.addEventListener('input', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('input', {
+        detail: {
+          value: Number(this.$input.value),
+        }
+      }));
+    });
+  }
+
+  render(changes: any) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+    if (changes.value) {
+      this.$input.value = String(this.value);
+    }
+  }
+
+  get height() {
+    return 2;
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+}

package/pg/nodeEditorRange/nodeEditorRange.css

@@ -0,0 +1,23 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family, system-ui);
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  padding-inline: 0.25rem;
+}
+
+[part=label] {
+  font-size: 0.625rem;
+  line-height: 1rem;
+  padding-inline: 0.25rem;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+[part=input] {
+  width: 100%;
+  box-sizing: border-box;
+  accent-color: #248BE5;
+}

package/pg/nodeEditorRange/nodeEditorRange.ts

@@ -0,0 +1,69 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './nodeEditorRange.html';
+import style from './nodeEditorRange.css';
+
+@Component({
+  selector: 'pg-node-editor-range',
+  style,
+  template,
+})
+export default class PgNodeEditorRange extends HTMLElement {
+
+  static type = 'Range';
+
+  @Prop() label: string = '';
+  @Prop() value: number = 0;
+  @Prop() name: string = '';
+  @Prop() min: number = 0;
+  @Prop() max: number = 100;
+  @Prop() step: number = 1;
+
+  @Part() $label: HTMLLabelElement;
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          value: Number(this.$input.value),
+        }
+      }));
+    });
+    this.$input.addEventListener('input', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('input', {
+        detail: {
+          value: Number(this.$input.value),
+        }
+      }));
+    });
+  }
+
+  render(changes: any) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+    if (changes.value) {
+      this.$input.value = String(this.value);
+    }
+    if (changes.min) {
+      this.$input.min = String(this.min);
+    }
+    if (changes.max) {
+      this.$input.max = String(this.max);
+    }
+    if (changes.step) {
+      this.$input.step = String(this.step);
+    }
+  }
+
+  get height() {
+    return 2;
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+}

package/pg/nodeEditorText/__examples__/basic/basic.html

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

package/pg/nodeEditorText/__examples__/basic/basic.ts

@@ -0,0 +1,30 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgNodes from '../../nodeEditorText';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-node-editor-text-basic',
+  template,
+})
+export default class XPgNodesEditorTextBasic extends HTMLElement {
+
+  @Part() $input: PgNodes;
+  @Part() $value1: HTMLDivElement;
+  @Part() $value2: HTMLDivElement;
+
+  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/nodeEditorText/nodeEditorText.css

@@ -0,0 +1,17 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family, system-ui);
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  padding-inline: 0.25rem;
+}
+
+[part=label] {
+  font-size: 0.625rem;
+  line-height: 1rem;
+  padding-inline: 0.25rem;
+  color: rgba(255, 255, 255, 0.8);
+}

package/pg/nodeEditorText/nodeEditorText.html

@@ -0,0 +1,4 @@
+<label>
+  <span part="label"></span>
+  <input type="text" part="input">
+</label>

package/pg/nodeEditorText/nodeEditorText.ts

@@ -0,0 +1,57 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './nodeEditorText.html';
+import style from './nodeEditorText.css';
+
+@Component({
+  selector: 'pg-node-editor-text',
+  style,
+  template,
+})
+export default class PgNodeEditorText extends HTMLElement {
+
+  static type = 'Text';
+
+  @Prop() label: string = '';
+  @Prop() value: string = '';
+  @Prop() name: string = '';
+
+  @Part() $label: HTMLLabelElement;
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          value: this.$input.value,
+        }
+      }));
+    });
+    this.$input.addEventListener('input', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('input', {
+        detail: {
+          value: this.$input.value,
+        }
+      }));
+    });
+  }
+
+  render(changes: any) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+    if (changes.value) {
+      this.$input.value = this.value;
+    }
+  }
+
+  get height() {
+    return 2;
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+}

package/pg/nodeEditorText copy/README.md

@@ -0,0 +1,35 @@
+# `<pg-nodes>`
+
+The `pg-nodes` component allows creating and linking `PgNode` extended data types.
+
+> If a `type` is omitted a `fields` property is required. See below for details.
+
+```typescript
+import '@pictogrammers/components/pgNodeEditorText';
+import { PgNodeEditorText } from '@pictogrammers/components/pgNodeEditorText';
+```
+
+```html
+<pg-node-editor-text></pg-node-editor-text>
+```
+
+## Attributes
+
+| Attributes  | Tested   | Description |
+| ----------- | -------- | ----------- |
+| `items`     |          | Node list |
+
+> Note: All nodes are sized off a `1rem` grid.
+
+## Events
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| change     |          | `{ detail: { index, item[, field] }` |
+| input      |          | `{ detail: { index, item[, field] }` |
+
+## CSS Variables
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| n/a   |  |  |

package/pg/nodeEditorText copy/nodeEditorText.css

@@ -0,0 +1,49 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family, system-ui);
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  padding-inline: 0.25rem;
+}
+
+[part=label] {
+  font-size: 0.625rem;
+  line-height: 0.875rem;
+  padding-inline: 0.25rem;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+[part=input] {
+  border: 0;
+  border-radius: 0;
+  padding-inline-start: 0.25rem;
+  padding-inline-end: 0.25rem;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  font-family: var(--pg-input-text-font-family, var(--pg-font-family));
+  font-size: 0.875rem;
+  outline: none;
+  field-sizing: content;
+  min-width: calc(
+    100%
+    - var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
+    - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
+    - 2px
+  );
+  background-color: #2B2B2B;
+  color: #FFF;
+}
+
+[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 2px var(--pg-input-text-focus-glow, rgb(79, 143, 249, 0.75));
+}

package/pg/nodeEditorText copy/nodeEditorText.html

@@ -0,0 +1,4 @@
+<label>
+  <span part="label"></span>
+  <input type="text" part="input">
+</label>

package/pg/nodeEditorText copy/nodeEditorText.ts

@@ -0,0 +1,50 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './nodeEditorText.html';
+import style from './nodeEditorText.css';
+
+@Component({
+  selector: 'pg-node-editor-text',
+  style,
+  template,
+})
+export default class PgNodeEditorText extends HTMLElement {
+  @Prop() label: string = '';
+  @Prop() value: string = '';
+  @Prop() name: string = '';
+
+  @Part() $label: HTMLLabelElement;
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          value: this.$input.value,
+        }
+      }));
+    });
+    this.$input.addEventListener('input', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('input', {
+        detail: {
+          value: this.$input.value,
+        }
+      }));
+    });
+  }
+
+  render(changes: any) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+    if (changes.value) {
+      this.$input.value = this.value;
+    }
+  }
+
+  get height() {
+    return 2;
+  }
+}

package/pg/nodeEditorTextArray/nodeEditorTextArray.css

@@ -0,0 +1,68 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family, system-ui);
+}
+
+div.wrapper {
+  display: flex;
+  flex-direction: column;
+  padding-inline: 0.25rem;
+}
+
+div.labelAdd {
+  display: flex;
+  flex-direction: row;
+}
+
+[part=label] {
+  flex: 1;
+  font-size: 0.625rem;
+  line-height: 1rem;
+  padding-inline: 0.25rem;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+[part=inputs] {
+  display: flex;
+  flex-direction: column;
+}
+
+[part=inputs] > *:first-child:not(:only-child) {
+  --pg-node-input-text-border-top-right-radius: 0;
+  --pg-node-input-text-border-bottom-left-radius: 0;
+  --pg-node-input-text-border-bottom-right-radius: 0;
+}
+[part=inputs] > *:not(:last-child):not(:first-child):not(:only-child) {
+  --pg-node-input-text-border-top-left-radius: 0;
+  --pg-node-input-text-border-top-right-radius: 0;
+  --pg-node-input-text-border-bottom-left-radius: 0;
+  --pg-node-input-text-border-bottom-right-radius: 0;
+}
+[part=inputs] > *:last-child:not(:only-child) {
+  --pg-node-input-text-border-top-left-radius: 0;
+  --pg-node-input-text-border-top-right-radius: 0;
+}
+
+[part=inputs] > *:only-child {
+  --pg-node-input-text-border-top-right-radius: 0;
+}
+
+[part=add] {
+  border: 0;
+  background: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  line-height: 0.625rem;
+  font-size: 0.875rem;
+  text-align: center;
+  outline: 1px solid #444;
+  border-top-left-radius: 0.125rem;
+  border-top-right-radius: 0.125rem;
+  padding-block: 0;
+  padding-inline: 0.125rem;
+}
+
+[part=add]:hover {
+  color: rgba(255, 255, 255, 0.8);
+  outline: 1px solid #666;
+}

package/pg/nodeEditorTextArray/nodeEditorTextArray.html

@@ -0,0 +1,9 @@
+<div class="wrapper">
+  <div class="labelAdd">
+    <span part="label"></span>
+    <button part="add">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="currentColor" d="M7 2a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2H8v3a1 1 0 1 1-2 0V8H3a1 1 0 0 1 0-2h3V3a1 1 0 0 1 1-1"/></svg>
+    </button>
+  </div>
+  <div part="inputs"></div>
+</div>