web-mojo 2.2.7 → 2.2.8

package/dist/chunks/{FormView-Xb_l8AD5.js → FormView-CwYt4vH3.js}

@@ -652,7 +652,6 @@ class FormBuilder {
       }
     }
     if (!fieldHTML) {
-      console.log("buildFieldHTML - Processing field type:", type, "for field:", field.name);
       switch (type) {
         case "text":
           fieldHTML = this.renderTextField(field);
@@ -687,6 +686,9 @@ class FormBuilder {
         case "select":
           fieldHTML = this.renderSelectField(field);
           break;
+        case "multiselect":
+          fieldHTML = this.renderMultiSelectField(field);
+          break;
         case "checkbox":
           fieldHTML = this.renderCheckboxField(field);
           break;
@@ -1189,6 +1191,59 @@ class FormBuilder {
     };
     return Mustache.render(this.templates.select, context);
   }
+  /**
+   * Render multiselect dropdown field
+   * @param {Object} field - Field configuration
+   * @returns {string} Field HTML
+   */
+  renderMultiSelectField(field) {
+    const {
+      name,
+      label,
+      options = [],
+      value = [],
+      required = false,
+      disabled = false,
+      maxHeight = 300,
+      help = field.helpText || field.help || ""
+    } = field;
+    const placeholder = field.placeholder || field.placeHolder || "Select...";
+    this.getFieldId(name);
+    const error = this.errors[name];
+    const fieldValue = field.value ?? this.getFieldValue(name) ?? value;
+    return `
+      <div class="mojo-form-control">
+        ${label ? `<label class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}</label>` : ""}
+        <div class="multiselect-placeholder"
+             data-field-name="${name}"
+             data-field-type="multiselect"
+             data-field-config='${JSON.stringify({
+      name,
+      value: fieldValue,
+      placeholder,
+      maxHeight,
+      disabled,
+      required
+    })}'>
+          <input type="hidden" name="${name}" value="${this.escapeHtml(JSON.stringify(fieldValue))}">
+          <select class="form-select${error ? " is-invalid" : ""}" 
+                  multiple 
+                  ${disabled ? "disabled" : ""}
+                  ${required ? "required" : ""}>
+            ${options.map((opt) => {
+      const optValue = typeof opt === "string" ? opt : opt.value;
+      const optLabel = typeof opt === "string" ? opt : opt.label || opt.value;
+      const selected = Array.isArray(fieldValue) && fieldValue.includes(optValue) ? "selected" : "";
+      return `<option value="${this.escapeHtml(optValue)}" ${selected}>${this.escapeHtml(optLabel)}</option>`;
+    }).join("")}
+          </select>
+          <small class="form-text text-muted">This will be enhanced with MultiSelectDropdown component</small>
+        </div>
+        ${help ? `<div class="${this.options.helpClass}">${this.escapeHtml(help)}</div>` : ""}
+        ${error ? `<div class="${this.options.errorClass}">${this.escapeHtml(error)}</div>` : ""}
+      </div>
+    `;
+  }
   /**
    * Render checkbox field
    * @param {Object} field - Field configuration
@@ -4035,6 +4090,312 @@ class CollectionMultiSelectView extends View {
     this.setValue(value);
   }
 }
+class MultiSelectItemsView extends View {
+  constructor(options = {}) {
+    super({
+      tagName: "div",
+      className: "multiselect-items",
+      template: `
+        {{#items.length}}
+          <div class="multiselect-list" style="max-height: {{maxHeight}}px; overflow-y: auto;">
+            {{#items}}
+              <div class="multiselect-item form-check px-3 py-2" 
+                   data-action="toggle"
+                   data-value="{{value}}"
+                   data-index="{{index}}">
+                <input type="checkbox" 
+                       class="form-check-input" 
+                       id="{{id}}"
+                       {{#selected}}checked{{/selected}}
+                       {{#disabled}}disabled{{/disabled}}>
+                <label class="form-check-label w-100" for="{{id}}">
+                  {{label}}
+                </label>
+              </div>
+            {{/items}}
+          </div>
+          <div class="multiselect-footer border-top p-2">
+            <button type="button" class="btn btn-sm btn-primary w-100" data-action="close-dropdown">
+              Done
+            </button>
+          </div>
+        {{/items.length}}
+        
+        {{^items.length}}
+          <div class="multiselect-empty text-muted text-center py-3">
+            <small>No options available</small>
+          </div>
+        {{/items.length}}
+      `,
+      ...options
+    });
+    this.items = options.items || [];
+    this.maxHeight = options.maxHeight || 300;
+  }
+  /**
+   * Handle item toggle
+   */
+  handleActionToggle(event, element) {
+    const value = element.getAttribute("data-value");
+    const index = parseInt(element.getAttribute("data-index"), 10);
+    const item = this.items[index];
+    if (!item || item.disabled) return;
+    item.selected = !item.selected;
+    const checkbox = element.querySelector('input[type="checkbox"]');
+    if (checkbox) {
+      checkbox.checked = item.selected;
+    }
+    this.emit("toggle", { value, index, selected: item.selected });
+  }
+  /**
+   * Handle close dropdown button
+   */
+  handleActionCloseDropdown(event, element) {
+    this.emit("close-dropdown");
+  }
+  /**
+   * Get currently selected values
+   */
+  getValue() {
+    return this.items.filter((item) => item.selected).map((item) => item.value);
+  }
+  /**
+   * Set selected values
+   */
+  setValue(values) {
+    const valueSet = new Set(Array.isArray(values) ? values : [values]);
+    this.items.forEach((item) => {
+      item.selected = valueSet.has(item.value);
+    });
+    this.render(false);
+  }
+  /**
+   * Update items and re-render
+   */
+  updateItems(items) {
+    this.items = items;
+    this.render(false);
+  }
+}
+class MultiSelectDropdown extends View {
+  constructor(options = {}) {
+    super({
+      tagName: "div",
+      className: "multiselect-dropdown",
+      template: `
+        <div class="mojo-form-control">
+          {{#label}}
+          <label class="form-label">
+            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
+          </label>
+          {{/label}}
+          
+          <div class="dropdown w-100">
+            <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center" 
+                    type="button" 
+                    data-bs-toggle="dropdown" 
+                    aria-expanded="false"
+                    {{#disabled}}disabled{{/disabled}}>
+              <span class="multiselect-button-text">{{buttonText}}</span>
+              <i class="bi bi-chevron-down"></i>
+            </button>
+            <div class="dropdown-menu w-100" data-bs-auto-close="outside" data-container="items"></div>
+          </div>
+          
+          {{#help}}
+            <div class="form-text">{{help}}</div>
+          {{/help}}
+          {{#error}}
+            <div class="invalid-feedback d-block">{{error}}</div>
+          {{/error}}
+        </div>
+      `,
+      ...options
+    });
+    this.name = options.name || "multiselect";
+    this.label = options.label || "";
+    this.help = options.help || "";
+    this.error = options.error || "";
+    this.required = options.required || false;
+    this.disabled = options.disabled || false;
+    this.placeholder = options.placeholder || options.placeHolder || "Select...";
+    this.maxHeight = options.maxHeight || 300;
+    this.showSelectedLabels = options.showSelectedLabels !== false;
+    this.maxLabelsToShow = options.maxLabelsToShow || 3;
+    this.options = options.options || [];
+    this.selectedValues = Array.isArray(options.value) ? options.value : [];
+    this.buttonText = this.computeButtonText();
+    this.listView = null;
+  }
+  /**
+   * Compute button text based on current selection
+   */
+  computeButtonText() {
+    const count = this.selectedValues.length;
+    if (count === 0) {
+      return this.placeholder || "Select...";
+    } else if (this.showSelectedLabels && count <= this.maxLabelsToShow) {
+      const labels = this.selectedValues.map((value) => {
+        const selectedOption = this.options.find((opt) => {
+          const optValue = typeof opt === "string" ? opt : opt.value;
+          return optValue === value;
+        });
+        return typeof selectedOption === "string" ? selectedOption : selectedOption?.label || selectedOption?.value || value;
+      });
+      return labels.join(", ");
+    } else {
+      return `${count} selected`;
+    }
+  }
+  /**
+   * Initialize child view after render
+   */
+  async onAfterRender() {
+    await super.onAfterRender();
+    this.createListView();
+  }
+  /**
+   * Create and mount the items list view
+   */
+  createListView() {
+    const container = this.element?.querySelector('[data-container="items"]');
+    if (!container) return;
+    const items = this.options.map((option, index) => {
+      const value = typeof option === "string" ? option : option.value;
+      const label = typeof option === "string" ? option : option.label || option.text || option.value;
+      const disabled = typeof option === "object" ? option.disabled : false;
+      return {
+        id: `${this.name}_${index}`,
+        value,
+        label,
+        index,
+        selected: this.selectedValues.includes(value),
+        disabled
+      };
+    });
+    this.listView = new MultiSelectItemsView({
+      items,
+      maxHeight: this.maxHeight
+    });
+    this.listView.on("toggle", (data) => {
+      this.handleToggle(data);
+    });
+    this.listView.on("close-dropdown", () => {
+      this.closeDropdown();
+    });
+    this.listView.render(true, container);
+  }
+  /**
+   * Close the dropdown programmatically
+   */
+  closeDropdown() {
+    const dropdownButton = this.element?.querySelector(".dropdown-toggle");
+    if (dropdownButton && window.bootstrap?.Dropdown) {
+      const dropdownInstance = window.bootstrap.Dropdown.getInstance(dropdownButton);
+      if (dropdownInstance) {
+        dropdownInstance.hide();
+      }
+    }
+  }
+  /**
+   * Handle item toggle
+   */
+  handleToggle(data) {
+    const { value, selected } = data;
+    if (selected) {
+      if (!this.selectedValues.includes(value)) {
+        this.selectedValues.push(value);
+      }
+    } else {
+      this.selectedValues = this.selectedValues.filter((v) => v !== value);
+    }
+    this.updateButtonText();
+    this.emit("change", {
+      value: this.selectedValues,
+      name: this.name
+    });
+  }
+  /**
+   * Update button text based on selection
+   */
+  updateButtonText() {
+    const button = this.element?.querySelector(".multiselect-button-text");
+    if (!button) return;
+    const count = this.selectedValues.length;
+    this.buttonText = this.computeButtonText();
+    button.textContent = this.buttonText;
+    if (count === 0) {
+      button.classList.add("text-muted");
+    } else {
+      button.classList.remove("text-muted");
+    }
+  }
+  /**
+   * Get current selected values
+   */
+  getValue() {
+    return this.selectedValues;
+  }
+  /**
+   * Set selected values
+   */
+  setValue(values) {
+    this.selectedValues = Array.isArray(values) ? values : values ? [values] : [];
+    if (this.listView) {
+      this.listView.setValue(this.selectedValues);
+    }
+    this.updateButtonText();
+  }
+  /**
+   * Update options list
+   */
+  setOptions(options) {
+    this.options = options;
+    if (this.listView) {
+      const items = this.options.map((option, index) => {
+        const value = typeof option === "string" ? option : option.value;
+        const label = typeof option === "string" ? option : option.label || option.text || option.value;
+        const disabled = typeof option === "object" ? option.disabled : false;
+        return {
+          id: `${this.name}_${index}`,
+          value,
+          label,
+          index,
+          selected: this.selectedValues.includes(value),
+          disabled
+        };
+      });
+      this.listView.updateItems(items);
+    }
+  }
+  /**
+   * Clear all selections
+   */
+  clear() {
+    this.setValue([]);
+  }
+  /**
+   * Get form value (for form integration)
+   */
+  getFormValue() {
+    return this.getValue();
+  }
+  /**
+   * Set form value (for form integration)
+   */
+  setFormValue(value) {
+    this.setValue(value);
+  }
+  /**
+   * Cleanup child view on destroy
+   */
+  async onBeforeDestroy() {
+    await super.onBeforeDestroy();
+    if (this.listView) {
+      this.listView.destroy();
+    }
+  }
+}
 class DatePicker extends View {
   constructor(options = {}) {
     const {
@@ -5929,6 +6290,7 @@ class FormView extends View {
     this.initializeImageFields();
     this.initializeCustomComponents();
     this.initializeTagInputs();
+    this.initializeMultiSelectDropdowns();
     this.initializeCollectionSelects();
     this.initializeCollectionMultiSelects();
     this.initializeDatePickers();
@@ -6057,6 +6419,42 @@ class FormView extends View {
       }
     });
   }
+  /**
+   * Initialize MultiSelectDropdown components
+   */
+  initializeMultiSelectDropdowns() {
+    const multiselectPlaceholders = this.element.querySelectorAll('[data-field-type="multiselect"]');
+    multiselectPlaceholders.forEach((placeholder) => {
+      try {
+        const fieldName = placeholder.getAttribute("data-field-name");
+        const configData = placeholder.getAttribute("data-field-config");
+        const config = JSON.parse(configData);
+        const fieldConfig = this.getFormFieldConfig(fieldName);
+        if (!fieldConfig) {
+          return;
+        }
+        const multiselect = new MultiSelectDropdown({
+          ...config,
+          options: fieldConfig.options || [],
+          placeholder: fieldConfig.placeholder || config.placeholder || "Select...",
+          label: fieldConfig.label,
+          containerId: null
+          // We'll mount directly
+        });
+        let value = config.value ?? MOJOUtils.getContextData(this.data, fieldName);
+        if (value) {
+          multiselect.setFormValue(value);
+        }
+        multiselect.render(true, placeholder);
+        this.customComponents.set(fieldName, multiselect);
+        multiselect.on("change", (data) => {
+          this.handleFieldChange(fieldName, data.value);
+        });
+      } catch (error) {
+        console.error("MultiSelectDropdown initialization failed:", error);
+      }
+    });
+  }
   /**
    * Initialize CollectionSelect components
    */
@@ -7893,4 +8291,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-Xb_l8AD5.js.map
+//# sourceMappingURL=FormView-CwYt4vH3.js.map