discord-components-v2-masteruse/web/components.js

A TypeScript/JavaScript package for simplified Discord.js component interactions.

// Components V2: Comprehensive Interaction Package
// All components are accessible via this module

export class Button {
  constructor({ label, type = 'button', onClick, style = '', ariaLabel = '' }) {
    this.label = label;
    this.type = type;
    this.onClick = onClick;
    this.style = style;
    this.ariaLabel = ariaLabel || label;
  }
  render() {
    const btn = document.createElement('button');
    btn.type = this.type;
    btn.textContent = this.label;
    btn.className = this.style;
    btn.setAttribute('aria-label', this.ariaLabel);
    btn.onclick = this.onClick;
    return btn;
  }
}

export class DropdownMenu {
  constructor({ options = [], onChange, style = '', ariaLabel = '' }) {
    this.options = options;
    this.onChange = onChange;
    this.style = style;
    this.ariaLabel = ariaLabel || 'Dropdown menu';
  }
  render() {
    const select = document.createElement('select');
    select.className = this.style;
    select.setAttribute('aria-label', this.ariaLabel);
    this.options.forEach(opt => {
      const option = document.createElement('option');
      option.value = opt.value;
      option.textContent = opt.label;
      select.appendChild(option);
    });
    select.onchange = this.onChange;
    return select;
  }
}

export class SelectMenu {
  constructor({ options = [], multiple = false, onChange, style = '', ariaLabel = '' }) {
    this.options = options;
    this.multiple = multiple;
    this.onChange = onChange;
    this.style = style;
    this.ariaLabel = ariaLabel || 'Select menu';
  }
  render() {
    const select = document.createElement('select');
    select.multiple = this.multiple;
    select.className = this.style;
    select.setAttribute('aria-label', this.ariaLabel);
    this.options.forEach(opt => {
      const option = document.createElement('option');
      option.value = opt.value;
      option.textContent = opt.label;
      select.appendChild(option);
    });
    select.onchange = this.onChange;
    return select;
  }
}

export class Form {
  constructor({ fields = [], onSubmit, style = '', ariaLabel = '' }) {
    this.fields = fields;
    this.onSubmit = onSubmit;
    this.style = style;
    this.ariaLabel = ariaLabel || 'Form';
  }
  render() {
    const form = document.createElement('form');
    form.className = this.style;
    form.setAttribute('aria-label', this.ariaLabel);
    this.fields.forEach(field => {
      const input = document.createElement('input');
      input.type = field.type;
      input.name = field.name;
      input.placeholder = field.placeholder || '';
      input.required = !!field.required;
      input.setAttribute('aria-label', field.label || field.name);
      form.appendChild(input);
    });
    const submitBtn = document.createElement('button');
    submitBtn.type = 'submit';
    submitBtn.textContent = 'Submit';
    form.appendChild(submitBtn);
    form.onsubmit = this.onSubmit;
    return form;
  }
}