Counter component

Find below the JavaScript and HTML implementation of a counter component.

0

Counter.js

import { Base } from '@studiometa/js-toolkit';

export default class Counter extends Base {
  static config = {
    name: 'Counter',
    refs: ['add', 'remove', 'counter'],
  };

  get count() {
    return Number(this.$refs.counter.innerHTML);
  }

  set count(value) {
    this.$refs.counter.innerHTML = value;
  }

  onAddClick() {
    this.count += 1;
  }

  onRemoveClick() {
    this.count -= 1;
  }
}

Counter.html

<div data-component="Counter" class="inline-flex items-center gap-6">
  <button
    class="w-12 h-12 rounded bg-gray-300 hover:bg-gray-400 bg-opacity-50 transition border-0"
    data-ref="remove">
    -
  </button>
  <div
    class="w-6 text-center"
    data-ref="counter">
    0
  </div>
  <button
    class="w-12 h-12 rounded bg-gray-300 hover:bg-gray-400 bg-opacity-50 transition border-0"
    data-ref="add">
    +
  </button>
</div>

app.js

import { Base, createApp } from '@studiometa/js-toolkit';
import Counter from './Counter.js';

class App extends Base {
  static config = {
    name: 'App',
    components: {
      Counter,
    },
  };
}

export default createApp(App);