Function: elementEvent()

import { defineGluonElement, elementEvent, elementProperty, html } from '@gluonjs/core';

type Product = { id: string; price: number };
const QuantityControl = defineGluonElement({
  tagName: 'shop-quantity',
  formAssociated: true,
  properties: {
    product: elementProperty<Product>({ type: Object, required: true }),
    value: { type: Number, reflect: true, default: 1 },
  },
  events: { change: elementEvent<{ value: number }>({ cancelable: true }) },
  slots: { default: { required: true }, help: { fallback: true } },
  setup(context) {
    const value = context.state('value', context.props.value);
    const total = context.computed(() => value.value * context.props.product.price);
    context.onUpdated(() => context.form.setValue(String(value.value)));
    context.onCleanup(() => console.log('quantity setup released'));
    return {
      expose: { focus: () => context.host.shadowRoot?.querySelector('button')?.focus() },
      render: () => html`<slot></slot><button>${value.value}</button><output>${total.value}</output><slot name="help"></slot>`,
    };
  },
});

const quantity = new QuantityControl();
quantity.product = { id: 'lamp', price: 12 };
quantity.value = 2;
quantity.focus();