counter.ts

import { computed } from "@preact/signals-core";
import { css } from "lit";
import { html } from "@lit-labs/preact-signals";
import { WithShadowRoot } from "./element-utils.js";

class Counter extends WithShadowRoot(HTMLElement) {
  count = this.attr("count", "0");
  countInt = computed(() => parseInt(this.count.value));

  private increment() {
    this.count.value = (this.countInt.value + 1).toString();
  }

  private decrement() {
    this.count.value = (this.countInt.value - 1).toString();
  }

  private reset() {
    this.count.value = "0";
  }

  override styles = computed(
    () => css`
      .actions {
        button {
          border-radius: 10px;
        }
      }
    `
  );

  override builder = computed(
    () => html`
      <span>Count: ${this.count}</span>
      <div class="actions">
        <button @click=${this.decrement.bind(this)}>-</button>
        <button @click=${this.increment.bind(this)}>+</button>
        <button
          @click=${this.reset.bind(this)}
          ?disabled=${this.countInt.value === 0}
        >
          Reset
        </button>
      </div>
    `
  );
}

export default Counter;

customElements.define("x-counter", Counter);