Plugin

<label ui="field"><span>توضیحات (حداکثر ۶۰ نویسه)</span><textarea data-counter maxlength="60" placeholder="چیزی بنویسید"></textarea></label>

const charCounter = {
  name: 'char-counter',
  version: '1.0.0',
  requires: { bana: '>=0.1.0' },
  install(api, { warnAt = 10 } = {}) {
    const fa = (n) => n.toLocaleString('fa');
    const update = (el, out) => {
      const max = el.maxLength, n = [...el.value].length;
      out.textContent = max > 0 ? `${fa(n)} از ${fa(max)} نویسه` : `${fa(n)} نویسه`;
      out.dataset.near = String(max > 0 && max - n <= warnAt);
    };
    api.controller({
      init(root, signal) {
        root.querySelectorAll('[data-counter]:not([data-counter-ready])').forEach((el) => {
          el.setAttribute('data-counter-ready', '');
          const out = document.createElement('small');
          out.setAttribute('data-counter-output', '');
          el.after(out);
          update(el, out);
          el.addEventListener('input', () => update(el, out), { signal });
        });
      },
      destroy(root) {
        root.querySelectorAll('[data-counter-output]').forEach((o) => o.remove());
        root.querySelectorAll('[data-counter-ready]').forEach((e) => e.removeAttribute('data-counter-ready'));
      },
    });
    api.styles('[data-counter-output][data-near="true"] { color: var(--bana-danger-text); font-weight: var(--bana-weight-medium); }');
  },
};

import { Bana } from "@bana-ui/core";
Bana.use(charCounter, { warnAt: 10 }).start();   // use() works before or after start()
Bana.plugins;                                     // [{ name: "char-counter", version: "1.0.0" }]
Bana.unuse("char-counter");                       // controller, listeners and styles are removed