saasufy-components 1.0.0 → 1.0.1

package/collection-adder.js

@@ -0,0 +1,221 @@
+import { getSocket } from './socket.js';
+import AGCollection from '/node_modules/ag-collection/ag-collection.js';
+
+class CollectionAdder extends HTMLElement {
+  constructor(options) {
+    super();
+    options = options || {};
+    this.socket = getSocket(options.socketOptions);
+    this.typeCastFunctions = {
+      text: String,
+      checkbox: Boolean,
+      number: Number
+    };
+    this.fieldPartsRegExp = /([^,()]+(\([^)]*\))?(=[^,]+)?)/g;
+    this.inputTypeWithParamsRegExp = /^([^()]*)(\(([^)]*)\))?/;
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+    this.render();
+  }
+
+  disconnectedCallback() {
+    if (this.collection) this.collection.destroy();
+  }
+
+  static get observedAttributes() {
+    return [
+      'collection-type',
+      'collection-fields',
+      'model-values',
+      'submit-button-label'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    this.render();
+  }
+
+  getTypeCastFunction(type) {
+    return this.typeCastFunctions[type] || ((value) => value);
+  }
+
+  getFieldDetails(string) {
+    let parts = ((string || '').match(this.fieldPartsRegExp) || []).map(field => field.trim());
+    let fieldTypeValues = parts.map((part) => {
+      let subParts = part.split('=');
+      let nameType = (subParts[0] || '').split(':');
+      let name = nameType[0];
+      let type = nameType[1] || 'text';
+      let value = subParts[1];
+      return {
+        name,
+        type,
+        value
+      }
+    });
+    let fieldNames = fieldTypeValues.map(item => item.name);
+    let fieldTypes = Object.fromEntries(
+      fieldTypeValues.map(item => [ item.name, item.type ])
+    );
+    let fieldValues = Object.fromEntries(
+      fieldTypeValues.map(
+        (item) => {
+          let type = fieldTypes[item.name];
+          let Type = this.getTypeCastFunction(type);
+          return [ item.name, Type(item.value) ];
+        }
+      )
+    );
+    return {
+      fieldNames,
+      fieldTypes,
+      fieldValues
+    };
+  }
+
+  render() {
+    let submitButtonLabel = this.getAttribute('submit-button-label');
+    if (submitButtonLabel == null) {
+      submitButtonLabel = 'Submit';
+    }
+    let collectionType = this.getAttribute('collection-type');
+    let {
+      fieldNames,
+      fieldTypes
+    } = this.getFieldDetails(this.getAttribute('collection-fields'));
+
+    let {
+      fieldNames: modelFieldNames,
+      fieldValues: modelFieldValues
+    } = this.getFieldDetails(this.getAttribute('model-values'));
+
+    if (this.collection) this.collection.destroy();
+
+    this.collection = new AGCollection({
+      socket: this.socket,
+      type: collectionType,
+      fields: [...new Set([ ...fieldNames, ...modelFieldNames ])],
+      writeOnly: true
+    });
+
+    let items = [];
+    for (let field of fieldNames) {
+      let inputType = fieldTypes[field];
+      let inputTypeParts = inputType.match(this.inputTypeWithParamsRegExp);
+      let inputTypeParams;
+      if (inputTypeParts) {
+        inputType = inputTypeParts[1];
+        inputTypeParams = inputTypeParts[3] ? inputTypeParts[3].split(',') : [];
+      }
+      if (inputType === 'checkbox') {
+        items.push(`
+          <label>
+            ${
+              field
+            }
+            <input class="collection-adder-input" type="${
+              inputType
+            }" name="${
+              field
+            }" />
+          </label>
+        `);
+      } else if (inputType === 'text-select') {
+        items.push(
+          `
+            <div class="collection-adder-select-text-row">
+              <input class="collection-adder-input" type="text" name="${
+                field
+              }" placeholder="${
+                field
+              }" />
+              <select class="collection-adder-select">
+                <option value="" selected disabled hidden>Options</option>
+                ${inputTypeParams.map(param => `<option value="${param}">${param}</option>`)}
+              </select>
+            </div>
+          `
+        );
+      } else {
+        items.push(
+          `<input class="collection-adder-input" type="${
+            inputType
+          }" name="${
+            field
+          }" placeholder="${
+            field
+          }" />`
+        );
+      }
+    }
+
+    this.innerHTML = `
+      <form class="collection-adder-form form-container">
+        <div class="collection-adder-message-container"></div>
+        <div class="collection-adder-form-content">
+          ${items.join('')}
+          <input type="submit" value="${submitButtonLabel}" />
+        </div>
+      </form>
+    `;
+
+    let textSelectRows = this.querySelectorAll('.collection-adder-select-text-row');
+    for (let groupElement of textSelectRows) {
+      let selectElement = groupElement.querySelector('select');
+      selectElement.addEventListener('change', (event) => {
+        let inputElement = groupElement.querySelector('input[type="text"]');
+        inputElement.value = inputElement.value ? `${inputElement.value}, ${event.target.value}` : event.target.value;
+        event.target.value = '';
+      });
+    }
+
+    let messageContainer = this.querySelector('.collection-adder-message-container');
+
+    let form = this.querySelector('.collection-adder-form');
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      messageContainer.classList.remove('success');
+      messageContainer.classList.remove('error');
+      messageContainer.textContent = '';
+
+      let newModelData = {
+        ...modelFieldValues,
+        ...Object.fromEntries(
+          [...event.target.querySelectorAll('.collection-adder-input')]
+            .map((input) => {
+              let Type = this.getTypeCastFunction(
+                fieldTypes[input.name]
+              );
+              return [ input.name, Type(input.value) ];
+            })
+        )
+      };
+
+      try {
+        await this.collection.create(newModelData);
+        messageContainer.classList.add('success');
+        messageContainer.classList.remove('error');
+        this.dispatchEvent(
+          new CustomEvent('success', {
+            detail: newModelData
+          })
+        );
+        form.reset();
+      } catch (error) {
+        messageContainer.classList.add('error');
+        messageContainer.classList.remove('success');
+        messageContainer.textContent = error.message;
+        this.dispatchEvent(
+          new CustomEvent('error', {
+            detail: error
+          })
+        );
+      }
+    });
+  }
+}
+
+window.customElements.define('collection-adder', CollectionAdder);

package/collection-browser.js

@@ -0,0 +1,125 @@
+import { getSocket } from './socket.js';
+import AGCollection from '/node_modules/ag-collection/ag-collection.js';
+import { getSafeHTML } from './utils.js';
+
+const DEFAULT_RELOAD_DELAY = 0;
+
+class CollectionBrowser extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.socket = getSocket();
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+    this.shadowRoot.addEventListener('slotchange', () => this.renderTable());
+    this.addEventListener('showModal', (event) => this.handleShowModalEvent(event));
+    this.addEventListener('crudCreate', (event) => this.handleCRUDCreateEvent(event));
+    this.addEventListener('crudDelete', (event) => this.handleCRUDDeleteEvent(event));
+    this.render();
+  }
+
+  disconnectedCallback() {
+    if (this.collection) this.collection.destroy();
+  }
+
+  static get observedAttributes() {
+    return [
+      'collection-type',
+      'collection-fields',
+      'collection-view',
+      'collection-view-params',
+      'collection-page-size'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    this.render();
+  }
+
+  renderTable() {
+    if (!this.collection || !this.collection.isLoaded) return;
+    let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
+    if (!itemTemplate) return;
+    let listNode = this.shadowRoot.querySelector('slot[name="list"]').assignedNodes()[0];
+    if (!listNode) return;
+    let items = [];
+
+    for (let modelItem of this.collection.value) {
+      let itemString = itemTemplate.innerHTML;
+
+      for (let [ field, value ] of Object.entries(modelItem)) {
+        let regExp = new RegExp(`{{${field}}}`, 'g');
+        itemString = itemString.replace(regExp, getSafeHTML(value));
+      }
+      items.push(itemString);
+    }
+    let noItemTemplate = this.shadowRoot.querySelector('slot[name="no-item"]').assignedNodes()[0];
+    if (noItemTemplate && !items.length) {
+      listNode.innerHTML = noItemTemplate.innerHTML;
+    } else {
+      listNode.innerHTML = items.join('');
+    }
+  }
+
+  handleShowModalEvent(event) {
+    let modal = this.shadowRoot.querySelector('slot[name="modal"]').assignedNodes()[0];
+    modal.show(event.detail.message, event.detail.callback);
+  }
+
+  handleCRUDCreateEvent(event) {
+    if (this.collection) {
+      this.collection.create(event.detail);
+    }
+  }
+
+  handleCRUDDeleteEvent(event) {
+    if (this.collection) {
+      this.collection.delete(event.detail);
+    }
+  }
+
+  render() {
+    let collectionType = this.getAttribute('collection-type');
+    let collectionFields = this.getAttribute('collection-fields');
+    let collectionView = this.getAttribute('collection-view');
+    let collectionPageSize = this.getAttribute('collection-page-size');
+    let collectionViewParams = this.getAttribute('collection-view-params');
+    let collectionReloadDelay = Number(
+      this.getAttribute('collection-reload-delay') || DEFAULT_RELOAD_DELAY
+    );
+    let viewParams = Object.fromEntries(collectionViewParams.split(',').map((pair) => pair.split('=')));
+    if (this.collection) this.collection.destroy();
+
+    this.collection = new AGCollection({
+      socket: this.socket,
+      type: collectionType,
+      fields: collectionFields.split(',').map(field => field.trim()),
+      view: collectionView,
+      viewParams,
+      pageSize: Number(collectionPageSize || 10),
+      changeReloadDelay: collectionReloadDelay
+    });
+
+    this.shadowRoot.innerHTML = '<slot name="item"></slot><slot name="no-item"></slot><slot name="list"></slot><slot name="modal"></slot>';
+
+    (async () => {
+      await this.collection.listener('load').once();
+      if (!this.collection.value.length) {
+        this.renderTable();
+      }
+      this.setAttribute('is-loaded', '');
+      this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+    })();
+
+    (async () => {
+      for await (let event of this.collection.listener('change')) {
+        this.renderTable();
+      }
+    })();
+  }
+}
+
+window.customElements.define('collection-browser', CollectionBrowser);

package/confirm-modal.js

@@ -0,0 +1,69 @@
+import './overlay-modal.js';
+
+class ConfirmModal extends HTMLElement {
+  constructor() {
+    super();
+    this.hidden = true;
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+    this.render();
+  }
+
+  static get observedAttributes() {
+    return [ 'message', 'title', 'confirm-button-label' ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    this.render();
+  }
+
+  show(message, confirmCallback) {
+    let overlayModal = this.querySelector('overlay-modal');
+    if (overlayModal) {
+      overlayModal.classList.remove('hidden');
+    }
+    this.confirmCallback = confirmCallback;
+    this.hidden = false;
+    this.setAttribute('message', message);
+  }
+
+  render() {
+    let message = this.getAttribute('message');
+    let title = this.getAttribute('title') || '';
+    let confirmButtonLabel = this.getAttribute('confirm-button-label') || 'Confirm';
+
+    this.innerHTML = `
+      <overlay-modal class="${this.hidden ? 'hidden' : 'visible'}">
+        <div slot="title">${title}</div>
+        <div class="confirm-modal-content" slot="content">
+          <div>${message}</div>
+          <div class="confirm-modal-buttons-container">
+            <input class="modal-confirm-button" type="button" value="${confirmButtonLabel}" />
+            <input class="modal-cancel-button" type="button" value="Cancel" />
+          </div>
+        </div>
+      </overlay-modal>
+    `;
+
+    let overlayModal = this.querySelector('overlay-modal');
+    overlayModal.addEventListener('close', () => {
+      overlayModal.classList.add('hidden');
+    });
+    let cancelButton = this.querySelector('.modal-cancel-button');
+    cancelButton.addEventListener('click', () => {
+      overlayModal.classList.add('hidden');
+      this.dispatchEvent(new CustomEvent('cancel'));
+    });
+    let confirmButton = this.querySelector('.modal-confirm-button');
+    confirmButton.addEventListener('click', () => {
+      overlayModal.classList.add('hidden');
+      this.dispatchEvent(new CustomEvent('confirm'));
+      this.confirmCallback && this.confirmCallback();
+    });
+  }
+}
+
+window.customElements.define('confirm-modal', ConfirmModal);

package/model-input.js

@@ -0,0 +1,259 @@
+import { getSocket } from './socket.js';
+import { getSafeHTML } from './utils.js';
+import AGModel from '/node_modules/ag-model/ag-model.js';
+
+class ModelInput extends HTMLElement {
+  constructor() {
+    super();
+    this.isReady = false;
+    this.inputElement = null;
+    this.socket = null;
+  }
+  connectedCallback() {
+    this.isReady = true;
+    this.destroy = () => {};
+    this.render();
+  }
+
+  disconnectedCallback() {
+    this.destroy();
+  }
+
+  static get observedAttributes() {
+    return [
+      'input-id',
+      'input-list',
+      'model-instance-property',
+      'type',
+      'placeholder',
+      'show-error-message',
+      'model-type',
+      'model-id',
+      'model-field',
+      'options',
+      'height'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    this.destroy();
+    this.render();
+  }
+
+  triggerChange() {
+    this.inputElement && this.inputElement.dispatchEvent(new Event('change'));
+  }
+
+  set value(newValue) {
+    if (this.inputElement) {
+      let oldValue = this.inputElement.value;
+      this.inputElement.value = newValue;
+      if (oldValue !== newValue) {
+        this.triggerChange();
+      }
+    }
+  }
+
+  get value() {
+    return (this.inputElement && this.inputElement.value) || '';
+  }
+
+  render() {
+    this.innerHTML = '';
+    let modelInstanceProperty = this.getAttribute('model-instance-property');
+    let showErrorMessage = this.hasAttribute('show-error-message');
+    let inputId = this.getAttribute('input-id');
+    let inputList = this.getAttribute('input-list');
+    let type = this.getAttribute('type');
+    let placeholder = this.getAttribute('placeholder');
+    let modelType = this.getAttribute('model-type');
+    let modelId = this.getAttribute('model-id');
+    let modelField = this.getAttribute('model-field');
+    let options = this.getAttribute('options');
+    let height = this.getAttribute('height');
+    let currentNode = this.parentNode;
+    let model;
+    let isModelLocal = false;
+    if (modelInstanceProperty) {
+      while (currentNode) {
+        model = currentNode[modelInstanceProperty];
+        if (model) break;
+        currentNode = currentNode.parentNode;
+      }
+      if (!model) return;
+    } else {
+      this.socket = getSocket();
+      model = new AGModel({
+        socket: this.socket,
+        type: modelType,
+        id: modelId,
+        fields: [ modelField ]
+      });
+      isModelLocal = true;
+    }
+    if (model.isLoaded) {
+      this.setAttribute('is-loaded', '');
+      this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+    } else {
+      this.isLoadedConsumer = model.listener('load').createConsumer();
+      (async () => {
+        await this.isLoadedConsumer.next();
+        this.setAttribute('is-loaded', '');
+        this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+      })();
+    }
+    let elementType;
+    if (type === 'select') {
+      elementType = 'select';
+    } else if (type === 'textarea') {
+      elementType = 'textarea';
+    } else {
+      elementType = 'input';
+    }
+    this.inputElement = document.createElement(elementType);
+    if (type === 'select') {
+      if (options) {
+        let optionElements = options
+        .split(',')
+        .map((option) => {
+          return `<option value="${option}">${option}</option>`;
+        })
+        .join('');
+        this.inputElement.innerHTML = optionElements;
+      }
+    } else if (elementType === 'input') {
+      if (inputList) {
+        this.inputElement.setAttribute('list', inputList)
+      }
+      this.inputElement.type = type;
+    }
+    if (height) {
+      this.inputElement.style.height = height;
+    }
+    if (inputId) {
+      this.inputElement.setAttribute('id', inputId);
+    }
+    if (placeholder) {
+      this.inputElement.setAttribute('placeholder', placeholder);
+    }
+    let errorMessageContainer = null;
+    if (showErrorMessage) {
+      errorMessageContainer = document.createElement('div');
+      errorMessageContainer.classList.add('error-message-container');
+      this.appendChild(errorMessageContainer);
+    }
+    this.appendChild(this.inputElement);
+    let destroyInputSync = this.syncInputElementWithModel(this.inputElement, model, modelField, errorMessageContainer);
+    this.destroy = () => {
+      destroyInputSync();
+      this.isLoadedConsumer && this.isLoadedConsumer.kill();
+      if (isModelLocal) {
+        model.destroy();
+      }
+    };
+  }
+
+  syncInputElementWithModel(inputElement, model, fieldName, messageContainerElement) {
+    if (model.isLoaded) {
+      let fieldValue = getSafeHTML(model.value[fieldName]);
+      if (inputElement.type === 'checkbox') {
+        inputElement.checked = !!fieldValue;
+      } else {
+        inputElement.value = fieldValue == null ? '' : fieldValue;
+      }
+    }
+    let stopSaving = this.saveInputElementOnEdit(inputElement, model, fieldName, messageContainerElement);
+    let changeConsumer = model.listener('change').createConsumer();
+    (async () => {
+      for await (let event of changeConsumer) {
+        if (event.resourceField !== fieldName || !event.isRemote) continue;
+        let fieldValue = getSafeHTML(model.value[fieldName]);
+        if (inputElement.type === 'checkbox') {
+          inputElement.checked = fieldValue;
+        } else {
+          inputElement.value = fieldValue == null ? '' : fieldValue;
+        }
+      }
+    })();
+    return () => {
+      stopSaving();
+      changeConsumer.kill();
+    };
+  }
+
+  saveInputElementOnEdit(inputElement, model, fieldName, messageContainerElement) {
+    let errorStyleClass = 'error';
+    let successStyleClass = 'success';
+    let showErrorMessage = (fieldName, errorMessage) => {
+      if (!messageContainerElement) return;
+      messageContainerElement.textContent = errorMessage;
+      messageContainerElement.classList.add(errorStyleClass);
+      messageContainerElement.classList.remove('hidden');
+    };
+
+    let hideErrorMessage = (fieldName) => {
+      if (!messageContainerElement) return;
+      messageContainerElement.textContent = '';
+      messageContainerElement.classList.remove(errorStyleClass);
+      messageContainerElement.classList.add('hidden');
+    };
+
+    let onInputChange = async (event) => {
+      if (event.target.value === String(model.value[fieldName])) return;
+      try {
+        if (inputElement.type === 'checkbox') {
+          await model.update(fieldName, !!inputElement.checked);
+          inputElement.classList.remove(errorStyleClass);
+          inputElement.classList.add(successStyleClass);
+          hideErrorMessage(fieldName);
+          return;
+        }
+        if (event.target.value === '') {
+          await model.delete(fieldName);
+        } else {
+          let targetValue = inputElement.type === 'number' ?
+            Number(event.target.value) : event.target.value;
+          await model.update(fieldName, targetValue);
+        }
+        inputElement.classList.remove(errorStyleClass);
+        inputElement.classList.add(successStyleClass);
+        hideErrorMessage(fieldName);
+      } catch (error) {
+        inputElement.classList.add(errorStyleClass);
+        inputElement.classList.remove(successStyleClass);
+        showErrorMessage(fieldName, error.message);
+      }
+    };
+    inputElement.addEventListener('change', onInputChange);
+
+    let onInputKeyUp;
+    if (inputElement.type !== 'checkbox') {
+      onInputKeyUp = async (event) => {
+        try {
+          if (event.target.value === '') {
+            await model.delete(fieldName);
+          } else {
+            let targetValue = inputElement.type === 'number' ?
+              Number(event.target.value) : event.target.value;
+            await model.update(fieldName, targetValue);
+          }
+          inputElement.classList.remove(errorStyleClass);
+          inputElement.classList.add(successStyleClass);
+          hideErrorMessage(fieldName);
+        } catch (error) {
+          inputElement.classList.add(errorStyleClass);
+          inputElement.classList.remove(successStyleClass);
+          showErrorMessage(fieldName, error.message);
+        }
+      };
+      inputElement.addEventListener('keyup', onInputKeyUp);
+    }
+    return () => {
+      inputElement.removeEventListener('change', onInputChange);
+      onInputKeyUp && inputElement.removeEventListener('keyup', onInputKeyUp);
+    };
+  }
+}
+
+window.customElements.define('model-input', ModelInput);

package/model-text.js

@@ -0,0 +1,89 @@
+import { getSocket } from './socket.js';
+import { getSafeHTML } from './utils.js';
+
+class ModelText extends HTMLElement {
+  connectedCallback() {
+    this.isReady = true;
+    this.destroy = () => {};
+    this.socket = null;
+    this.render();
+  }
+
+  disconnectedCallback() {
+    this.destroy();
+  }
+
+  static get observedAttributes() {
+    return [
+      'model-instance-property',
+      'model-type',
+      'model-id',
+      'model-field'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    this.destroy();
+    this.render();
+  }
+
+  render() {
+    this.innerHTML = '';
+    let modelInstanceProperty = this.getAttribute('model-instance-property');
+    let modelType = this.getAttribute('model-type');
+    let modelId = this.getAttribute('model-id');
+    let modelField = this.getAttribute('model-field');
+    let currentNode = this.parentNode;
+    let model;
+    let isModelLocal = false;
+    if (modelInstanceProperty) {
+      while (currentNode) {
+        model = currentNode[modelInstanceProperty];
+        if (model) break;
+        currentNode = currentNode.parentNode;
+      }
+      if (!model) return;
+    } else {
+      this.socket = getSocket();
+      model = new AGModel({
+        socket: this.socket,
+        type: modelType,
+        id: modelId,
+        fields: [ modelField ]
+      });
+      isModelLocal = true;
+    }
+    if (model.isLoaded) {
+      this.setAttribute('is-loaded', '');
+      this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+    } else {
+      this.isLoadedConsumer = model.listener('load').createConsumer();
+      (async () => {
+        await this.isLoadedConsumer.next();
+        this.setAttribute('is-loaded', '');
+        this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+      })();
+    }
+    let changeConsumer = model.listener('change').createConsumer();
+    (async () => {
+      for await (let event of changeConsumer) {
+        if (event.resourceField !== modelField || !event.isRemote) continue;
+        fieldValue = getSafeHTML(model.value[modelField]);
+        this.innerHTML = fieldValue;
+      }
+    })();
+    if (model.isLoaded) {
+      this.innerHTML = getSafeHTML(model.value[modelField]);
+    }
+    this.destroy = () => {
+      changeConsumer.kill();
+      this.isLoadedConsumer && this.isLoadedConsumer.kill();
+      if (isModelLocal) {
+        model.destroy();
+      }
+    };
+  }
+}
+
+window.customElements.define('model-text', ModelText);

package/overlay-modal.js

@@ -0,0 +1,88 @@
+class OverlayModal extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        .overlay-background {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100vw;
+          height: 100vh;
+          position: fixed;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          z-index: 10000;
+          background-color: rgba(0, 0, 0, .3);
+        }
+
+        .modal-dialog {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          width: var(--modal-width, 800px);
+          height: var(--modal-height, auto);
+          min-height: var(--modal-min-height, auto);
+          background-color: #ffffff;
+        }
+
+        .modal-title-bar {
+          display: var(--title-bar-display, flex);
+          justify-content: space-between;
+          width: 100%;
+          padding: 10px;
+          color: #ffffff;
+          box-sizing: border-box;
+          background: #e37042;
+        }
+
+        .modal-content {
+          flex-grow: 1;
+          padding: 10px;
+        }
+
+        .modal-footer {
+          display: var(--footer-display, flex)
+          padding: 10px;
+        }
+
+        .close-button {
+          cursor: pointer;
+        }
+      </style>
+      <div class="overlay-background">
+        <div class="modal-dialog">
+          <div class="modal-title-bar">
+            <div>
+              <slot name="title"></slot>
+            </div>
+            <div class="close-button">&#x2715;</div>
+          </div>
+          <div class="modal-content">
+            <slot name="content"></slot>
+          </div>
+          <div class="modal-footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    this.shadowRoot.querySelector('.close-button').addEventListener('click', () => {
+      this.dispatchEvent(
+        new CustomEvent('close', { bubbles: true })
+      );
+    });
+  }
+}
+
+window.customElements.define('overlay-modal', OverlayModal);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -16,6 +16,11 @@
   ],
   "author": "Jonathan Gros-Dubois",
   "license": "MIT",
+  "dependencies": {
+    "ag-collection": "^3.1.0",
+    "ag-model": "^1.3.5",
+    "socketcluster-client": "^18.3.0"
+  },
   "bugs": {
     "url": "https://github.com/Saasufy/saasufy-components/issues"
   },

package/render-group.js

@@ -0,0 +1,58 @@
+class RenderGroup extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    this.loadedElements = {};
+
+    this.loadHandler = (event) => {
+      let waitFor = this.getWaitFor();
+      let renderLoadId = event.target.getAttribute('load-id');
+      this.loadedElements[renderLoadId] = true;
+      let areAllLoaded = waitFor.every(waitForId => this.loadedElements[waitForId]);
+      if (areAllLoaded) {
+        this.showSlottedElements();
+      }
+    };
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('load', this.loadHandler);
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+    this.loadedElements = {};
+    let hasPending = !!this.getWaitFor().length;
+    this.shadowRoot.innerHTML = `
+      <style>
+        .hidden {
+          display: none;
+        }
+      </style>
+      <slot${hasPending ? ' class="hidden"': ''}></slot>
+    `;
+    if (hasPending) {
+      this.addEventListener('load', this.loadHandler);
+    }
+  }
+
+  showSlottedElements() {
+    let slot = this.shadowRoot.querySelector('slot');
+    slot.classList.remove('hidden');
+  }
+
+  getWaitFor() {
+    let waitForString = this.getAttribute('wait-for');
+    if (!waitForString) {
+      return [];
+    }
+    return waitForString.split(',').map(id => id.trim());
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+  }
+}
+
+window.customElements.define('render-group', RenderGroup);

package/socket.js

@@ -0,0 +1,37 @@
+import { create } from '/node_modules/socketcluster-client/socketcluster-client.min.js';
+
+const DEFAULT_AUTH_TOKEN_NAME = 'saasufy.authToken';
+
+let socket;
+
+export function createSocket(options) {
+  socket = create({
+    authTokenName: DEFAULT_AUTH_TOKEN_NAME,
+    ...options
+  });
+
+  (async () => {
+    for await (let { error } of socket.listener('error')) {
+      console.error(error);
+    }
+  })();
+
+  (async () => {
+    for await (let event of socket.listener('connect')) {
+      console.log('Socket is connected');
+    }
+  })();
+
+  return socket;
+}
+
+window.createSocket = createSocket;
+
+export function getSocket(options) {
+  if (socket) {
+    return socket;
+  }
+  return createSocket(options);
+}
+
+window.getSocket = getSocket;

package/utils.js

@@ -0,0 +1,160 @@
+import AGCollection from '/node_modules/ag-collection/ag-collection.js';
+import AGModel from '/node_modules/ag-model/ag-model.js';
+
+const DEFAULT_DEBOUNCE_DELAY = 300;
+const DEFAULT_RELOAD_DELAY = 0;
+
+export function getSafeHTML(text) {
+  if (typeof text === 'string') {
+    return text.replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  } else if (text != null && typeof text.toString !== 'function') {
+    return '[invalid]';
+  }
+  return text;
+}
+
+export function debouncer() {
+  let debounceTimeout = null;
+  return function (callback, duration) {
+    if (duration == null) duration = DEFAULT_DEBOUNCE_DELAY;
+    debounceTimeout && clearTimeout(debounceTimeout);
+    debounceTimeout = setTimeout(() => {
+      debounceTimeout = null;
+      callback.call(this);
+    }, duration);
+  };
+}
+
+export function getSafeModelValue(value) {
+  return Object.fromEntries(
+    Object.entries(value || {}).map(
+      ([key, value]) => [ key, getSafeHTML(value) ]
+    )
+  );
+}
+
+export function createReactiveCollection(collectionOptions, callback) {
+  let collection = new AGCollection({
+    changeReloadDelay: DEFAULT_RELOAD_DELAY,
+    ...collectionOptions
+  });
+
+  (async () => {
+    for await (let { error } of collection.listener('error')) {
+      console.error(error);
+    }
+  })();
+
+  collection.safeValue = [];
+
+  (async () => {
+    let changes = {};
+    for await (let event of collection.listener('change')) {
+      if (event.resourceId != null && changes[event.resourceId] !== false) {
+        changes[event.resourceId] = event.isRemote;
+      }
+
+      if (!collection.isLoaded) continue;
+
+      collection.safeValue = collection.value.map(getSafeModelValue);
+
+      callback({
+        changes
+      });
+      changes = {};
+    }
+  })();
+
+  (async () => {
+    for await (let event of collection.listener('load')) {
+      if (collection.isLoaded && !collection.value.length) {
+        callback({
+          changes: {}
+        });
+      }
+    }
+  })();
+
+  return collection;
+}
+
+export function createReactiveModel(modelOptions, callback) {
+  let model = new AGModel({
+    ...modelOptions
+  });
+
+  model.safeValue = {};
+
+  (async () => {
+    for await (let { error } of model.listener('error')) {
+      console.error(error);
+    }
+  })();
+
+  (async () => {
+    let changes = {};
+    for await (let event of model.listener('change')) {
+      if (changes[event.resourceField] !== false) {
+        changes[event.resourceField] = event.isRemote;
+      }
+
+      model.safeValue = getSafeModelValue(model.value);
+      callback({
+        changes
+      });
+      changes = {};
+    }
+  })();
+
+  return model;
+}
+
+export function createCollection(collectionOptions) {
+  let collection = new AGCollection({
+    changeReloadDelay: DEFAULT_RELOAD_DELAY,
+    ...collectionOptions
+  });
+
+  (async () => {
+    for await (let { error } of collection.listener('error')) {
+      console.error(error);
+    }
+  })();
+
+  (async () => {
+    for await (let event of collection.listener('change')) {
+      if (!collection.isLoaded) continue;
+      collection.safeValue = collection.value.map(getSafeModelValue);
+    }
+  })();
+
+  return collection;
+}
+
+export function createModel(modelOptions) {
+  let model = new AGModel({
+    ...modelOptions
+  });
+
+  (async () => {
+    for await (let { error } of model.listener('error')) {
+      console.error(error);
+    }
+  })();
+
+  (async () => {
+    for await (let event of model.listener('change')) {
+      model.safeValue = getSafeModelValue(model.value);
+    }
+  })();
+
+  return model;
+}
+
+export function wait(duration) {
+  return new Promise((resolve) => setTimeout(resolve, duration));
+}