@pictogrammers/components 0.5.11 → 0.5.13

package/package.json

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

package/pg/button/button.ts

@@ -19,8 +19,6 @@ export default class PgButton extends HTMLElement {
   @Prop(normalizeBoolean) end: boolean = false;
 
   @Part() $button: HTMLButtonElement;
-  @Part() $number: HTMLSpanElement;
-  @Part() $bar: HTMLSpanElement;
 
   connectedCallback() {
     this.$button.addEventListener('click', (e) => {

package/pg/buttonIncrement/README.md

@@ -0,0 +1,18 @@
+# `<pg-button-increment>`
+
+The `pg-button-increment` is the `pg-button` component with an `increment` event for holding down.
+
+```typescript
+import '@pictogrammers/components/pg/buttonIncrement';
+import PgButtonIncrement from '@pictogrammers/components/pg/buttonIncrement';
+```
+
+## Usage
+
+```typescript
+this.$button.incrementDelay = 300; // default
+this.$button.incrementStepDelay = 100; // default
+this.$button.addEventListener('increment', () => {
+  // called on initial click and after every 50ms
+});
+```

package/pg/buttonIncrement/__examples__/basic/basic.css

@@ -0,0 +1,4 @@
+.example-flex {
+  display: flex;
+  gap: 0.5rem;
+}

package/pg/buttonIncrement/__examples__/basic/basic.html

@@ -0,0 +1,12 @@
+<div class="example">
+  <div class="example-flex">
+    <pg-button-increment part="button1">
+      <pg-icon path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></pg-icon>
+      Clicked <span part="count1">0</span> Times
+    </pg-button-increment>
+    <pg-button-increment part="button2">
+      <pg-icon path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></pg-icon>
+      Clicked <span part="count2">0</span> Times, incrementStepDelay = 50;
+    </pg-button-increment>
+  </div>
+</div>

package/pg/buttonIncrement/__examples__/basic/basic.ts

@@ -0,0 +1,29 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgButtonIncrement from '../../buttonIncrement';
+
+import style from './basic.css';
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-button-increment-basic',
+  style,
+  template,
+})
+export default class XPgButtonBasic extends HTMLElement {
+  @Part() $button1: PgButtonIncrement;
+  @Part() $count1: HTMLSpanElement;
+  @Part() $button2: PgButtonIncrement;
+  @Part() $count2: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$button1.addEventListener('increment', () => {
+      const count = parseInt(this.$count1.textContent, 10);
+      this.$count1.textContent = `${count + 1}`;
+    });
+    this.$button2.incrementStepDelay = 50;
+    this.$button2.addEventListener('increment', () => {
+      const count = parseInt(this.$count2.textContent, 10);
+      this.$count2.textContent = `${count + 1}`;
+    });
+  }
+}

package/pg/buttonIncrement/buttonIncrement.html

@@ -0,0 +1 @@
+<parent />

package/pg/buttonIncrement/buttonIncrement.ts

@@ -0,0 +1,39 @@
+import { Component, normalizeInt, Part, Prop } from '@pictogrammers/element';
+
+import template from './buttonIncrement.html';
+import style from './buttonIncrement.css';
+import PgButton from '../button/button';
+
+var timeout, interval;
+
+function clearTimers() {
+  clearTimeout(timeout);
+  clearInterval(interval);
+}
+
+@Component({
+  selector: 'pg-button-increment',
+  style,
+  template
+})
+export default class PgButtonIncrement extends PgButton {
+  @Prop(normalizeInt) incrementDelay = 300;
+  @Prop(normalizeInt) incrementStepDelay = 100;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.$button.addEventListener('pointerdown', () => {
+      const targetId = this.dataset.target;
+
+      this.dispatchEvent(new CustomEvent('increment'));
+
+      timeout = setTimeout(() => {
+        interval = setInterval(() => {
+          this.dispatchEvent(new CustomEvent('increment'));
+        }, this.incrementStepDelay);
+      }, this.incrementDelay);
+    });
+    this.$button.addEventListener('pointerup', clearTimers);
+    this.$button.addEventListener('pointerleave', clearTimers);
+  }
+}

package/pg/buttonIncrement/index.ts

@@ -0,0 +1,3 @@
+import PgButtonIncrement from './buttonIncrement';
+
+export default PgButtonIncrement;