@startinblox/core 0.19.0-beta.1 → 0.19.0-beta.3

package/dist/mixins/paginateMixin.js

@@ -1,97 +0,0 @@
-import { html } from "../_snowpack/pkg/lit-html.js";
-const PaginateMixin = {
-  name: 'paginate-mixin',
-  use: [],
-  attributes: {
-    paginateBy: {
-      type: Number,
-      default: 0
-    },
-    paginateLoop: {
-      type: String,
-      default: null
-    }
-  },
-  initialState: {
-    currentPage: []
-  },
-  created() {
-    this.currentPage = [];
-  },
-  attached() {
-    this.listPostProcessors.push(this.paginateCallback.bind(this));
-  },
-  async paginateCallback(resources, listPostProcessors, div, context) {
-    if (this.paginateBy > 0) {
-      if (!this.currentPage[context]) this.currentPage[context] = 1;
-      const parentDiv = this.initParentPaginationDiv(div, context);
-      this.renderCallbacks.push({
-        template: this.renderPaginationNav(this.getPageCount(resources.length), context, div),
-        parent: parentDiv
-      });
-      const firstElementIndex = (this.getCurrentPage(context) - 1) * this.paginateBy;
-      resources = resources.slice(firstElementIndex, firstElementIndex + this.paginateBy);
-    }
-    const nextProcessor = listPostProcessors.shift();
-    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
-  },
-  getNavElement(div) {
-    const insertNode = div.parentNode || div;
-    return insertNode.querySelector(`nav[data-id="nav"]`);
-  },
-  /**
-   * Find nav element or create it if not existing
-   * @param div - insert nav next to this div
-   */
-  initParentPaginationDiv(div) {
-    let nav = this.getNavElement(div);
-    if (!nav) {
-      nav = document.createElement('nav');
-      nav.setAttribute('data-id', 'nav');
-      const insertNode = div.parentNode || div;
-      insertNode.appendChild(nav);
-    }
-    return nav;
-  },
-  getCurrentPage(context) {
-    return this.currentPage[context];
-  },
-  setCurrentPage(page, context, pageCount) {
-    if (page < 1) page = !this.shouldLoop() ? 1 : pageCount;
-    if (page > pageCount) page = !this.shouldLoop() ? pageCount : 1;
-    this.currentPage[context] = page;
-    this.empty();
-    this.populate();
-  },
-  getPageCount(size) {
-    return Math.max(1, Math.ceil(size / this.paginateBy));
-  },
-  shouldLoop() {
-    return this.paginateLoop !== null;
-  },
-  /**
-   * Create pagination template
-   * @param pageCount
-   * @param context
-   */
-  renderPaginationNav(pageCount, context, div) {
-    this.getNavElement(div).toggleAttribute('hidden', pageCount <= 1);
-    const currentPage = this.getCurrentPage(context);
-    return html`
-      <button
-        data-id="prev"
-        ?disabled=${!this.shouldLoop() && currentPage <= 1}
-        @click=${() => this.setCurrentPage(currentPage - 1, context, pageCount)}
-      >←</button>
-      <button
-        data-id="next"
-        ?disabled=${!this.shouldLoop() && currentPage >= pageCount}
-        @click=${() => this.setCurrentPage(currentPage + 1, context, pageCount)}
-      >→</button>
-      <span>
-        <span data-id="current">${currentPage}</span> / <span data-id="count">${String(pageCount)}</span>
-      </span>
-    `;
-  }
-};
-export { PaginateMixin };

package/dist/mixins/requiredMixin.js

@@ -1,38 +0,0 @@
-import { store } from '../libs/store/store.js';
-const RequiredMixin = {
-  name: 'required-mixin',
-  use: [],
-  attached() {
-    this.listPostProcessors.push(this.requiredResources.bind(this));
-  },
-  async requiredResources(resources, listPostProcessors, div, context) {
-    const displays = [];
-    const requiredFields = Array.from(this.element.attributes).filter(attr => attr.name.startsWith('required-')).map(attr => attr['name'].replace('required-', ''));
-    if (requiredFields.length) {
-      for (let resource of resources) {
-        let hasProps = true;
-        for (let field of requiredFields) {
-          // Retrieve resource from store
-          let res = store.get(resource['@id']);
-          if (!res && !resource[field] && !(await resource[field])) {
-            //TODO: refactor to better handle this edge case where res is either the direct resource or a proxy
-            res = await store.getData(resource['@id'], this.context);
-            if (!res || res[field] == null || res[field] == "") {
-              hasProps = false;
-              continue;
-            }
-          } else if (res) {
-            if ((await res[field]) == null || (await res[field]) == "") {
-              hasProps = false;
-              continue;
-            }
-          }
-        }
-        if (hasProps) displays.push(resource);
-      }
-    }
-    const nextProcessor = listPostProcessors.shift();
-    if (nextProcessor) await nextProcessor(requiredFields.length ? displays : resources, listPostProcessors, div, context);
-  }
-};
-export { RequiredMixin };

package/dist/mixins/serverPaginationMixin.js

@@ -1,122 +0,0 @@
-import { html, render } from "../_snowpack/pkg/lit-html.js";
-const ServerPaginationMixin = {
-  name: 'server-pagination-mixin',
-  use: [],
-  attributes: {
-    limit: {
-      type: Number,
-      default: undefined
-    },
-    offset: {
-      type: Number,
-      default: undefined
-    },
-    pageCount: {
-      type: Number,
-      default: 1000
-    },
-    pageNumber: {
-      type: Number,
-      default: 0
-    }
-  },
-  initialState: {
-    currentOffset: []
-  },
-  attached() {
-    if (this.limit) {
-      this.setCurrentOffset(this.resourceId, 0);
-      const parentDiv = this.initServerPaginationDiv(this.div);
-      this.renderCallbacks.push({
-        template: this.renderServerPaginationNav(this.resourceId, parentDiv),
-        parent: parentDiv
-      });
-    }
-  },
-  getCurrentOffset(resourceId, limit) {
-    return this.currentOffset[resourceId + "#p" + limit];
-  },
-  async setCurrentOffset(resourceId, offset) {
-    let index = resourceId + "#p" + this.limit;
-    this.currentOffset[index] = this.offset = offset;
-    this.pageNumber = Number(this.offset / this.limit);
-    this.currentPage[resourceId] = this.pageNumber;
-    await this.fetchData(this.dataSrc);
-  },
-  async decreaseCurrentOffset(resourceId) {
-    let index = resourceId + "#p" + this.limit;
-    this.currentOffset[index] = this.offset = this.offset - this.limit;
-    this.currentPage[index] = this.offset / this.limit;
-    this.pageNumber = this.offset / this.limit;
-    this.updateNavButtons(resourceId, index, -1);
-    await this.fetchData(this.dataSrc);
-  },
-  async increaseCurrentOffset(resourceId) {
-    let index = resourceId + "#p" + this.limit;
-    this.currentOffset[index] = this.offset = this.offset + this.limit;
-    this.currentPage[index] = this.offset / this.limit;
-    this.updateNavButtons(resourceId, index, 1);
-    await this.fetchData(this.dataSrc);
-  },
-  updateNavButtons(resourceId, index, variance) {
-    this.element.querySelector("[data-id='prev']").disabled = this.currentOffset[index] <= 0;
-    this.element.querySelector("[data-id='next']").disabled = this.currentOffset[index] * this.limit >= this.pageCount;
-    this.element.querySelector("[data-id='current']").innerText = this.getCurrentServedPage(resourceId, variance);
-  },
-  getServerNavElement(div) {
-    if (div) {
-      const insertNode = div.parentNode || div;
-      return insertNode.querySelector(`nav[data-id="nav"]`);
-    }
-    return null;
-  },
-  getCurrentServedPage(context, variance) {
-    this.currentPage[context] = Number(this.currentPage[context]) + variance;
-    return this.currentPage[context];
-  },
-  /**
-   * Find nav element or create it if not existing
-   * @param div - insert nav next to this div
-   */
-  initServerPaginationDiv(div) {
-    let nav = this.getServerNavElement(div);
-    if (!nav) {
-      nav = document.createElement('nav');
-      nav.setAttribute('data-id', 'nav');
-      const insertNode = div.parentNode || div;
-      insertNode.appendChild(nav);
-    }
-    return nav;
-  },
-  /**
-   * Create pagination template
-   */
-  renderServerPaginationNav(resourceId, div) {
-    if (this.limit) {
-      const currentOffset = this.getCurrentOffset(resourceId, this.limit);
-      var currentPageNumber = this.getCurrentServedPage(resourceId, 1);
-      const pageCount = Math.ceil(this.pageCount / this.limit);
-      render(html`
-        <button
-          data-id="prev"
-          ?disabled=${currentOffset <= 0}
-          @click=${() => this.decreaseCurrentOffset(resourceId)}
-        >←</button>
-        <button
-          data-id="next"
-          ?disabled=${currentOffset >= (pageCount - 1) * this.limit}
-          @click=${() => this.increaseCurrentOffset(resourceId)}
-        >→</button>
-        <span>
-          <span data-id="current">
-            ${currentPageNumber}
-          </span> / 
-          <span data-id="count">
-            ${this.pageCount}
-          </span>
-        </span>
-      `, div);
-    }
-  }
-};
-export { ServerPaginationMixin };

package/dist/mixins/sorterMixin.js

@@ -1,131 +0,0 @@
-const SorterMixin = {
-  name: 'sorter-mixin',
-  use: [],
-  attributes: {
-    orderBy: {
-      type: String,
-      default: null
-    },
-    orderAsc: {
-      type: String,
-      default: null
-    },
-    orderDesc: {
-      type: String,
-      default: null
-    },
-    orderByRandom: {
-      type: String,
-      default: null
-    },
-    sortedBy: {
-      type: String,
-      default: null,
-      callback(newValue) {
-        // if we change search form, re-populate
-        if (newValue && this.sortForm && newValue !== this.sortForm.getAttribute('id')) {
-          this.sortForm = null;
-          this.populate();
-        }
-      }
-    }
-  },
-  initialState: {
-    randomOrder: null
-  },
-  attached() {
-    this.listPostProcessors.push(this.orderCallback.bind(this));
-  },
-  created() {
-    this.randomOrder = [];
-  },
-  async sorterList() {
-    if (!this.resource) return;
-    this.empty();
-    await this.populate();
-  },
-  linkSorterForm() {
-    this.sortForm.addEventListener('formChange', () => {
-      this.sorterList();
-    });
-  },
-  async orderCallback(resources, listPostProcessors, div, context) {
-    if (this.orderBy) this.orderAsc = this.orderBy; // retrocompatibility. remove in 0.15
-    let sortingKey = '';
-    let orderValueToSort = '';
-
-    // if order-asc or order-desc attribute
-    if (this.orderAsc || this.orderDesc) {
-      sortingKey = this.orderAsc || this.orderDesc;
-    }
-    // if sorted-by attribute (solid-form-search data used)
-    else if (this.sortedBy) {
-      const sortedBy = this.sortedBy;
-      if (sortedBy != null) {
-        if (!this.sortForm) {
-          this.sortForm = document.getElementById(sortedBy);
-          if (!this.sortForm) throw `#${sortedBy} is not in DOM`;
-          this.linkSorterForm();
-        }
-        if (!this.sortForm.component.value.field) {
-          console.warn('The attribute field does not exist');
-        } else {
-          sortingKey = this.sortForm.component.value.field['value'];
-        }
-        const orderField = this.sortForm.component.value.order;
-        orderValueToSort = orderField && orderField.value ? orderField.value : 'asc';
-      }
-    }
-    // sorting data according to the defined value of sortingKey
-    if (sortingKey) {
-      let orderToSort = true; // set 'asc' by default
-      if (this.orderDesc || orderValueToSort == "desc") orderToSort = false;
-      resources = (await Promise.all(resources.map(async resource => ({
-        sortingKey: await resource[sortingKey],
-        // fetch sorting value
-        proxy: resource // and keep proxy
-      })))).sort(this.sortValuesByKey("sortingKey", orderToSort)) // sort this array
-      .map(r => r.proxy); // re-create array
-    }
-    // if order-by-random attribute
-    else if (this.isRandomSorted()) {
-      resources = this.shuffleResources(resources); // shuffle resources
-    }
-
-    const nextProcessor = listPostProcessors.shift();
-    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
-  },
-  isRandomSorted() {
-    return this.orderByRandom !== null;
-  },
-  sortValuesByKey(key, asc) {
-    return function (a, b) {
-      if (!a[key]) return 1;
-      if (!b[key]) return -1;
-      const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key];
-      const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key];
-      let comparison = 0;
-      if (varA > varB) comparison = asc ? 1 : -1;else if (varA < varB) comparison = asc ? -1 : 1;
-      return comparison;
-    };
-  },
-  shuffleResources(array) {
-    let currentIndex = array.length;
-    let temporaryValue;
-    let randomIndex;
-    if (this.randomOrder.length !== array.length) {
-      // if no random order existing
-      this.randomOrder = [...Array(array.length).keys()]; // generate array of indexes
-      while (0 !== currentIndex) {
-        randomIndex = Math.floor(Math.random() * currentIndex);
-        currentIndex -= 1;
-        temporaryValue = this.randomOrder[currentIndex];
-        this.randomOrder[currentIndex] = this.randomOrder[randomIndex];
-        this.randomOrder[randomIndex] = temporaryValue;
-      }
-    }
-    return this.randomOrder.map(i => array[i]); // rebuild array with random order
-  }
-};
-
-export { SorterMixin };

package/dist/mixins/storeMixin.js

@@ -1,139 +0,0 @@
-import { store } from '../libs/store/store.js';
-import { formatAttributesToServerSearchOptions, mergeServerSearchOptions } from '../libs/store/server-search.js';
-import { AttributeBinderMixin } from './attributeBinderMixin.js';
-import { ContextMixin } from './contextMixin.js';
-import { ServerPaginationMixin } from './serverPaginationMixin.js';
-import { formatAttributesToServerPaginationOptions } from '../libs/store/server-pagination.js';
-const StoreMixin = {
-  name: 'store-mixin',
-  use: [AttributeBinderMixin, ContextMixin, ServerPaginationMixin],
-  attributes: {
-    noRender: {
-      type: String,
-      default: null,
-      callback: function (value) {
-        if (value === null) this.fetchData(this.dataSrc);
-      }
-    },
-    dataSrc: {
-      type: String,
-      default: null,
-      callback: async function (value) {
-        const filteredOnServer = this.element.attributes['filtered-on']?.value === 'server';
-        const limited = this.element.attributes['limit']?.value !== undefined;
-        if (this.noRender === null && !filteredOnServer && !limited) {
-          await this.fetchData(value);
-        } else if (this.noRender === null && !filteredOnServer) {
-          this.resourceId = value;
-        }
-      }
-    },
-    loaderId: {
-      type: String,
-      default: ''
-    },
-    nestedField: {
-      type: String,
-      default: null
-    },
-    arrayField: {
-      type: String,
-      default: null,
-      callback: function (value) {
-        if (value) this.predicateName = store.getExpandedPredicate(this.arrayField, this.context);
-      }
-    },
-    predicateName: {
-      type: String,
-      default: null
-    }
-  },
-  initialState: {
-    resourceId: null,
-    subscription: null
-  },
-  created() {
-    if (this.element.closest('[no-render]')) this.noRender = ''; // if embedded in no-render, apply no-render to himself
-  },
-
-  detached() {
-    if (this.subscription) PubSub.unsubscribe(this.subscription);
-  },
-  get resource() {
-    let id = this.resourceId;
-    if (this.limit) {
-      id = this.resourceId + "#p" + this.limit + "?o" + this.offset;
-    }
-    const serverSearch = mergeServerSearchOptions(formatAttributesToServerSearchOptions(this.element.attributes), this.getDynamicServerSearch?.() // from `filterMixin`
-    );
-
-    return id ? store.get(id, serverSearch) : null;
-  },
-  get loader() {
-    return this.loaderId ? document.getElementById(this.loaderId) : null;
-  },
-  async fetchData(value) {
-    this.empty();
-    if (this.subscription) PubSub.unsubscribe(this.subscription);
-    if (!value || value == "undefined") return;
-    this.resourceId = value;
-    if (this.nestedField) {
-      // First step: store.getData
-      const resource = await store.getData(value, this.context);
-
-      // Which internally triggers store.fetchData -> Fine
-
-      // Which triggers store.fetchAuthn -> Fine
-
-      // Once done it calls store.cacheGraph
-
-      // And the issue seems to reside in the caching ?
-
-      // How is computed the key to cache the nested resource with proper id like 
-      // http:///localhost:3000/examples/data/list/group-3.jsonld#foaf:member ?
-      // Should it be:
-      //    - http:///localhost:3000/examples/data/list/group-3.jsonld#foaf:member
-      //    - _:b1/examples/data/list/group-3.jsonld#foaf:member
-      //    - _:b9/examples/data/list/group-3.jsonld
-      //    - examples/data/list/group-3.jsonld#foaf:member
-
-      // So the work is in cacheGraph ?
-      const nestedResource = resource ? await resource[this.nestedField] : null;
-      this.resourceId = nestedResource ? nestedResource['@id'] : null;
-      if (!this.resourceId) throw `Error: the key "${this.nestedField}" does not exist on the resource`;
-    }
-    this.updateNavigateSubscription();
-    this.subscription = PubSub.subscribe(this.resourceId, this.updateDOM.bind(this));
-    const serverPagination = formatAttributesToServerPaginationOptions(this.element.attributes);
-    const dynamicServerSearch = this.getDynamicServerSearch?.(); // from `filterMixin`
-    const serverSearch = mergeServerSearchOptions(formatAttributesToServerSearchOptions(this.element.attributes), dynamicServerSearch);
-    const forceRefetch = !!dynamicServerSearch;
-    await store.getData(this.resourceId, this.context, undefined, undefined, forceRefetch, serverPagination, serverSearch);
-    this.updateDOM();
-  },
-  toggleLoaderHidden(toggle) {
-    if (this.loader) this.loader.toggleAttribute('hidden', toggle);
-  },
-  updateNavigateSubscription() {},
-  async updateDOM() {
-    this.toggleLoaderHidden(false); // brings a loader out if the attribute is set
-    this.empty();
-    await this.replaceAttributesData();
-    await this.populate();
-    setTimeout(() =>
-    // Brings the dispatchEvent at the end of the queue
-    this.element.dispatchEvent(new CustomEvent('populate', {
-      detail: {
-        resource: {
-          "@id": this.dataSrc
-        }
-      }
-    })));
-    this.toggleLoaderHidden(true);
-  },
-  empty() {},
-  update() {
-    if (this.noRender === null) this.updateDOM();
-  }
-};
-export { StoreMixin };

package/dist/mixins/translationMixin.js

@@ -1,58 +0,0 @@
-import { store } from "../libs/store/store.js";
-const TranslationMixin = {
-  name: 'translation-mixin',
-  use: [],
-  initialState: {
-    translationData: {}
-  },
-  created() {
-    this.getLang();
-  },
-  /**
-   * Returns the translation module
-   * @param langCode - string: language needed in 2 char
-   * @returns - object: {key: translation}
-   */
-  async getTranslationModule(langCode) {
-    const translationsModules = {
-      // define modules in a static way, snowpack does not support dynamic strings here
-      en: () => import("../locales/en.json.proxy.js"),
-      fr: () => import("../locales/fr.json.proxy.js")
-    };
-    if (!translationsModules[langCode]) {
-      // set default to EN if the file does not exist
-      console.warn(`${langCode}.json translation file may not exist, English is setted by default`);
-      langCode = 'en';
-    }
-    const module = await translationsModules[langCode]();
-    return module.default;
-  },
-  /**
-   * Loads the right translation file and reload the component
-   */
-  getLang() {
-    const languageStorage = store._getLanguage();
-    if (languageStorage) {
-      if (window.fetchTranslationPromise === undefined) {
-        // if translation data are not already fetched
-        window.fetchTranslationPromise = this.getTranslationModule(languageStorage);
-      }
-      window.fetchTranslationPromise.then(res => {
-        if (res) {
-          this.translationData = res; // stock data in object passed to traduction method below
-          this.update(); // update the rendering in components and widgets
-        }
-      });
-    }
-  },
-
-  /**
-   * Returns translation for a given key
-   * @param tradKey - string: key
-   * @returns - string: translation
-   */
-  t(tradKey) {
-    return this.translationData[tradKey] || '';
-  }
-};
-export { TranslationMixin };

package/dist/mixins/validationMixin.js

@@ -1,95 +0,0 @@
-import dialogPolyfill from '../_snowpack/pkg/dialog-polyfill.js';
-import { html } from '../_snowpack/pkg/lit-html.js';
-import { ifDefined } from '../_snowpack/pkg/lit-html/directives/if-defined.js';
-import { uniqID } from '../libs/helpers.js';
-import { TranslationMixin } from './translationMixin.js';
-import { preHTML } from '../libs/lit-helpers.js';
-const ValidationMixin = {
-  name: 'validation-mixin',
-  use: [TranslationMixin],
-  attributes: {
-    confirmationMessage: {
-      type: String,
-      default: null
-    },
-    confirmationType: {
-      type: String,
-      default: null
-    },
-    confirmationSubmitText: {
-      type: String,
-      default: null
-    },
-    confirmationCancelText: {
-      type: String,
-      default: null
-    },
-    confirmationSubmitClass: {
-      type: String,
-      default: undefined
-    },
-    confirmationCancelClass: {
-      type: String,
-      default: undefined
-    },
-    confirmationWidget: {
-      type: String,
-      default: undefined
-    }
-  },
-  created() {
-    this.dialogID = uniqID();
-  },
-  showModal() {
-    var dialog = document.getElementById(this.dialogID);
-    dialogPolyfill.registerDialog(dialog);
-    return dialog.showModal();
-  },
-  performAction() {
-    // Console warning if conf-type attr not filled AND conf-message filled
-    if (this.element.hasAttribute('confirmation-message') && !this.confirmationType) console.warn('confirmation-type attribute is missing.');
-    // Data directly submitted OR confirm dialog modal displayed
-    if (!this.confirmationType || this.confirmationType == "confirm" && confirm(this.confirmationMessage || this.t("validation.message"))) this.validateModal();
-    // Customisable dialog modal opened
-    if (this.confirmationType == "dialog") {
-      this.showModal();
-    }
-  },
-  getModalDialog() {
-    if (this.confirmationType == 'dialog') {
-      const quitDialog = () => {
-        var dialog = document.getElementById(this.dialogID);
-        if (dialog == null) return;
-        dialog.close();
-      };
-      const confirmChoice = () => {
-        this.validateModal();
-        quitDialog();
-      };
-      return html`
-        <dialog id="${this.dialogID}">
-        ${this.confirmationWidget ? preHTML`
-          <${this.confirmationWidget} value=${this.resourceId}></${this.confirmationWidget}>
-        ` : html`
-          <p>${this.confirmationMessage || this.t("validation.message")}</p>
-        `}
-          <div>
-            <button
-              @click=${confirmChoice} 
-              class=${ifDefined(this.confirmationSubmitClass)}
-            >
-            ${this.confirmationSubmitText || this.t("validation.submit-text")}
-            </button>
-            <button
-              @click=${quitDialog}
-              class=${ifDefined(this.confirmationCancelClass)}
-            >
-            ${this.confirmationCancelText || this.t("validation.cancel-text")}
-            </button>
-          </div>
-        </dialog>
-      `;
-    } else return '';
-  }
-};
-export { ValidationMixin };