web-mojo 2.2.57 → 2.2.58

package/dist/chunks/ListView-X5w5jf51.js

@@ -1,495 +0,0 @@
-import { V as View } from "./Rest-W-sPfGh9.js";
-import { C as Collection } from "./Collection-DaiL0uGl.js";
-class ListViewItem extends View {
-  constructor(options = {}) {
-    super({
-      className: "list-view-item",
-      ...options
-    });
-    this.selected = false;
-    this.index = options.index ?? 0;
-    this.listView = options.listView ?? null;
-    if (!this.template) {
-      this.template = `
-        <div class="list-item-content" data-action="select">
-          {{#model}}
-            {{#id}}<span class="item-id">{{id}}</span>{{/id}}
-            {{#name}}<span class="item-name">{{name}}</span>{{/name}}
-            {{#title}}<span class="item-title">{{title}}</span>{{/title}}
-            {{#label}}<span class="item-label">{{label}}</span>{{/label}}
-            {{#description}}<p class="item-description">{{description}}</p>{{/description}}
-          {{/model}}
-          {{^model}}
-            <span class="item-empty">No data</span>
-          {{/model}}
-        </div>
-      `;
-    }
-  }
-  /**
-   * Handle item selection action
-   */
-  async onActionSelect(event, _element) {
-    event.stopPropagation();
-    if (this.selected) {
-      this.deselect();
-    } else {
-      this.select();
-    }
-  }
-  /**
-   * Select this item
-   */
-  select() {
-    if (this.selected) return;
-    this.selected = true;
-    this.addClass("selected");
-    this.emit("item:select", {
-      item: this,
-      model: this.model,
-      index: this.index,
-      data: this.model?.toJSON ? this.model.toJSON() : this.model
-    });
-    if (this.listView) {
-      this.listView.emit("item:select", {
-        item: this,
-        model: this.model,
-        index: this.index,
-        data: this.model?.toJSON ? this.model.toJSON() : this.model
-      });
-    }
-  }
-  /**
-   * Deselect this item
-   */
-  deselect() {
-    if (!this.selected) return;
-    this.selected = false;
-    this.removeClass("selected");
-    this.emit("item:deselect", {
-      item: this,
-      model: this.model,
-      index: this.index,
-      data: this.model?.toJSON ? this.model.toJSON() : this.model
-    });
-    if (this.listView) {
-      this.listView.emit("item:deselect", {
-        item: this,
-        model: this.model,
-        index: this.index,
-        data: this.model?.toJSON ? this.model.toJSON() : this.model
-      });
-    }
-  }
-  /**
-   * Handle click events on the item
-   */
-  async onActionDefault(action, _event, _element) {
-    this.emit("item:click", {
-      item: this,
-      model: this.model,
-      index: this.index,
-      action,
-      data: this.model?.toJSON ? this.model.toJSON() : this.model
-    });
-    if (this.listView) {
-      this.listView.emit("item:click", {
-        item: this,
-        model: this.model,
-        index: this.index,
-        action,
-        data: this.model?.toJSON ? this.model.toJSON() : this.model
-      });
-    }
-  }
-  /**
-   * Set the item's index in the list
-   */
-  setIndex(index) {
-    this.index = index;
-    this.element.setAttribute("data-index", index);
-    return this;
-  }
-  /**
-   * Update the item's selection state
-   */
-  setSelected(selected) {
-    if (selected) {
-      this.select();
-    } else {
-      this.deselect();
-    }
-    return this;
-  }
-  /**
-   * Override destroy to clean up references
-   */
-  async destroy() {
-    this.listView = null;
-    await super.destroy();
-  }
-}
-class ListView extends View {
-  constructor(options = {}) {
-    super({
-      className: "list-view",
-      template: `
-        <div class="list-view-container">
-          {{#loading}}
-            <div class="list-loading">
-              <div class="spinner-border spinner-border-sm" role="status">
-                <span class="visually-hidden">Loading...</span>
-              </div>
-              Loading...
-            </div>
-          {{/loading}}
-          {{^loading}}
-            {{#isEmpty}}
-              <div class="list-empty">
-                {{emptyMessage}}
-              </div>
-            {{/isEmpty}}
-            {{^isEmpty}}
-              <div class="list-items" data-container="items"></div>
-            {{/isEmpty}}
-          {{/loading}}
-        </div>
-      `,
-      ...options
-    });
-    this.collection = null;
-    this.itemViews = /* @__PURE__ */ new Map();
-    this.selectedItems = /* @__PURE__ */ new Set();
-    this.itemTemplate = options.itemTemplate || null;
-    this.itemClass = options.itemClass || ListViewItem;
-    this.selectionMode = options.selectionMode || "none";
-    this.emptyMessage = options.emptyMessage || "No items to display";
-    this.loading = false;
-    this.isEmpty = true;
-  }
-  /**
-   * Override onInit to set up initial state
-   */
-  async onInit() {
-    this._initCollection(this.options.collection || this.options.Collection);
-  }
-  /**
-   * Initialize the collection
-   */
-  _initCollection(collectionOrClass) {
-    if (!collectionOrClass) {
-      console.log("Collection not provided");
-      return;
-    }
-    if (collectionOrClass instanceof Collection) {
-      this.setCollection(collectionOrClass);
-    } else if (typeof collectionOrClass === "function") {
-      const collection = new collectionOrClass();
-      this.setCollection(collection);
-    } else if (Array.isArray(collectionOrClass)) {
-      const collection = new Collection(null, {}, collectionOrClass);
-      this.setCollection(collection);
-    }
-  }
-  /**
-   * Set the collection for this list view
-   */
-  setCollection(collection) {
-    if (this.collection === collection) return this;
-    if (this.collection) {
-      this.collection.off("add", this._onModelsAdded, this);
-      this.collection.off("remove", this._onModelsRemoved, this);
-      this.collection.off("reset", this._onCollectionReset, this);
-      this.collection.off("fetch:start", this._onFetchStart, this);
-      this.collection.off("fetch:end", this._onFetchEnd, this);
-    }
-    this.collection = collection;
-    if (this.options.defaultQuery && !this.options.collectionParams) {
-      this.collection.params = { ...this.collection.params, ...this.options.defaultQuery };
-    }
-    if (this.options.collectionParams) {
-      this.collection.params = { ...this.collection.params, ...this.options.collectionParams };
-    }
-    if (this.collection) {
-      this.collection.on("add", this._onModelsAdded, this);
-      this.collection.on("remove", this._onModelsRemoved, this);
-      this.collection.on("reset", this._onCollectionReset, this);
-      this.collection.on("fetch:start", this._onFetchStart, this);
-      this.collection.on("fetch:end", this._onFetchEnd, this);
-      this._buildItems();
-    }
-    return this;
-  }
-  async _renderChildren() {
-    await super._renderChildren();
-    const itemsContainer = this.getChildElement("items");
-    if (!itemsContainer) {
-      return;
-    }
-    this.forEachItem((item, index) => {
-      itemsContainer.appendChild(item.element);
-      item.render(false);
-    });
-  }
-  /**
-   * Build item views for all models in collection
-   */
-  _buildItems() {
-    this._clearItems();
-    if (!this.collection || this.collection.isEmpty()) {
-      this.isEmpty = true;
-      this.emit("list:empty");
-      return;
-    }
-    this.isEmpty = false;
-    this.collection.forEach((model, index) => {
-      this._createItemView(model, index);
-    });
-    this.emit("list:loaded", { count: this.collection.length() });
-    if (this.isMounted()) {
-      this.render();
-    }
-  }
-  /**
-   * Create an item view for a model
-   * The itemTemplate is passed as the template option to the itemClass constructor
-   */
-  _createItemView(model, index) {
-    if (this.itemViews.has(model.id)) return;
-    const itemView = new this.itemClass({
-      model,
-      index,
-      listView: this,
-      template: this.itemTemplate
-      // Pass the itemTemplate to the item view
-    });
-    this.itemViews.set(model.id, itemView);
-    itemView.on("item:select", this._onItemSelect.bind(this));
-    itemView.on("item:deselect", this._onItemDeselect.bind(this));
-    return itemView;
-  }
-  /**
-   * Clear all item views
-   */
-  _clearItems() {
-    this.forEachItem((itemView) => {
-      this.removeChild(itemView.id);
-    });
-    this.itemViews.clear();
-    this.selectedItems.clear();
-  }
-  /**
-   * Handle models added to collection
-   */
-  _onModelsAdded(event) {
-    const { models } = event;
-    models.forEach((model) => {
-      const index = this.collection.models.indexOf(model);
-      this._createItemView(model, index);
-    });
-    this.isEmpty = this.collection.isEmpty();
-    if (!this.loading && this.isMounted()) {
-      this.render();
-    }
-  }
-  /**
-   * Handle models removed from collection
-   */
-  _onModelsRemoved(event) {
-    const { models } = event;
-    models.forEach((model) => {
-      const itemView = this.itemViews.get(model.id);
-      if (itemView) {
-        this.removeChild(itemView.id);
-        this.itemViews.delete(model.id);
-        this.selectedItems.delete(model.id);
-      }
-    });
-    this.isEmpty = this.collection.isEmpty();
-    if (!this.loading && this.isMounted()) {
-      this.render();
-    }
-    if (this.isEmpty) {
-      this.emit("list:empty");
-    }
-  }
-  /**
-   * Handle collection reset
-   */
-  _onCollectionReset(_event) {
-    this._buildItems();
-  }
-  /**
-   * Handle fetch start
-   */
-  _onFetchStart() {
-    this.loading = true;
-    if (this.isMounted()) {
-      this.render();
-    }
-  }
-  /**
-   * Handle fetch end
-   */
-  _onFetchEnd() {
-    this.loading = false;
-    if (this.isMounted()) {
-      this.render();
-    }
-  }
-  /**
-   * Handle item selection
-   */
-  _onItemSelect(event) {
-    const { model, item } = event;
-    if (this.selectionMode === "none") {
-      item.deselect();
-      return;
-    }
-    if (this.selectionMode === "single") {
-      this.itemViews.forEach((view, id) => {
-        if (id !== model.id && view.selected) {
-          view.deselect();
-        }
-      });
-      this.selectedItems.clear();
-    }
-    this.selectedItems.add(model.id);
-    this.emit("selection:change", {
-      selected: Array.from(this.selectedItems),
-      item,
-      model
-    });
-  }
-  /**
-   * Handle item deselection
-   */
-  _onItemDeselect(event) {
-    const { model } = event;
-    this.selectedItems.delete(model.id);
-    this.emit("selection:change", {
-      selected: Array.from(this.selectedItems),
-      item: event.item,
-      model
-    });
-  }
-  /**
-   * Get selected items
-   */
-  getSelectedItems() {
-    const selected = [];
-    this.selectedItems.forEach((id) => {
-      const itemView = this.itemViews.get(id);
-      if (itemView) {
-        selected.push({
-          view: itemView,
-          model: itemView.model,
-          data: itemView.model?.toJSON ? itemView.model.toJSON() : itemView.model
-        });
-      }
-    });
-    return selected;
-  }
-  /**
-   * Iterate over each item view in the list
-   * @param {function} callback - Function to execute for each item (itemView, model, index)
-   * @param {object} thisArg - Optional value to use as this when executing callback
-   * @returns {ListView} Returns the ListView for chaining
-   */
-  forEachItem(callback, thisArg) {
-    if (typeof callback !== "function") {
-      throw new TypeError("Callback must be a function");
-    }
-    let index = 0;
-    this.itemViews.forEach((itemView, modelId) => {
-      callback.call(thisArg, itemView, itemView.model, index++);
-    });
-    return this;
-  }
-  /**
-   * Clear selection
-   */
-  clearSelection() {
-    this.forEachItem((itemView) => {
-      if (itemView.selected) {
-        itemView.deselect();
-      }
-    });
-    this.selectedItems.clear();
-    this.emit("selection:change", {
-      selected: []
-    });
-  }
-  /**
-   * Select item by model ID
-   */
-  selectItem(modelId) {
-    const itemView = this.itemViews.get(modelId);
-    if (itemView) {
-      itemView.select();
-    }
-    return this;
-  }
-  /**
-   * Deselect item by model ID
-   */
-  deselectItem(modelId) {
-    const itemView = this.itemViews.get(modelId);
-    if (itemView) {
-      itemView.deselect();
-    }
-    return this;
-  }
-  /**
-   * Set or update the item template
-   * @param {string} template - New template string for items
-   * @param {boolean} rerender - Whether to re-render existing items with new template
-   * @returns {ListView} Returns the ListView for chaining
-   */
-  setItemTemplate(template, rerender = false) {
-    this.itemTemplate = template;
-    if (rerender && this.itemViews.size > 0) {
-      this.forEachItem((itemView) => {
-        itemView.setTemplate(template);
-        if (itemView.isMounted()) {
-          itemView.render();
-        }
-      });
-    }
-    return this;
-  }
-  async onAfterMount() {
-    await super.onAfterMount();
-    if (this.collection && (this.options.fetchOnMount || !this.collection.lastFetchTime)) {
-      this.collection.fetch();
-    }
-  }
-  /**
-   * Refresh the list (re-fetch if collection supports it)
-   */
-  async refresh() {
-    if (this.collection && this.collection.restEnabled) {
-      return await this.collection.fetch();
-    }
-    this._buildItems();
-  }
-  /**
-   * Override destroy to clean up
-   */
-  async destroy() {
-    if (this.collection) {
-      this.collection.off("add", this._onModelsAdded, this);
-      this.collection.off("remove", this._onModelsRemoved, this);
-      this.collection.off("reset", this._onCollectionReset, this);
-      this.collection.off("fetch:start", this._onFetchStart, this);
-      this.collection.off("fetch:end", this._onFetchEnd, this);
-    }
-    this._clearItems();
-    await super.destroy();
-  }
-}
-export {
-  ListView as L,
-  ListViewItem as a
-};
-//# sourceMappingURL=ListView-X5w5jf51.js.map