@startinblox/core 0.19.0-beta.2 → 0.19.0-beta.20

package/dist/components/solid-form.js

@@ -1,257 +0,0 @@
-import { Sib } from '../libs/Sib.js';
-import { WidgetMixin } from '../mixins/widgetMixin.js';
-import { StoreMixin } from '../mixins/storeMixin.js';
-import { NextMixin } from '../mixins/nextMixin.js';
-import { ValidationMixin } from '../mixins/validationMixin.js';
-import { store } from '../libs/store/store.js';
-import { setDeepProperty, transformArrayToContainer } from '../libs/helpers.js';
-import { html, render } from '../_snowpack/pkg/lit-html.js';
-import { ifDefined } from '../_snowpack/pkg/lit-html/directives/if-defined.js';
-export const SolidForm = {
-  name: 'solid-form',
-  use: [WidgetMixin, StoreMixin, NextMixin, ValidationMixin],
-  attributes: {
-    defaultWidget: {
-      type: String,
-      default: 'solid-form-label-text'
-    },
-    naked: {
-      type: String,
-      default: null
-    },
-    submitButton: {
-      type: String,
-      default: undefined,
-      callback: function (newValue, oldValue) {
-        if (this.noRender == null && newValue !== oldValue) this.populate();
-      }
-    },
-    submitWidget: {
-      type: String,
-      default: null
-    },
-    classSubmitButton: {
-      type: String,
-      default: undefined
-    },
-    partial: {
-      type: Boolean,
-      default: null
-    },
-    autosave: {
-      type: Boolean,
-      default: null
-    }
-  },
-  initialState: {
-    error: ''
-  },
-  get defaultMultipleWidget() {
-    return 'solid-multiple-form';
-  },
-  get defaultSetWidget() {
-    return 'solid-set-default';
-  },
-  get value() {
-    const values = {};
-    this.widgets.forEach(widget => {
-      const name = (widget.component || widget).name;
-      if (name == null) return;
-      let value = widget.component ? widget.component.getValue() : widget.value;
-      try {
-        value = JSON.parse(value);
-      } catch (e) {}
-      setDeepProperty(values, name.split('.'), value);
-    });
-    // add @id if edition
-    if (this.resource && !this.resource.isContainer?.()) values['@id'] = this.resourceId;
-    return values;
-  },
-  get isNaked() {
-    return this.element.hasAttribute('naked');
-  },
-  get isSavingAutomatically() {
-    return this.autosave !== null;
-  },
-  isCreationForm(formValue) {
-    return !('@id' in formValue);
-  },
-  async getFormValue() {
-    let value = this.value;
-    if (this.resource && !this.resource.isContainer?.()) {
-      for (let predicate of Object.keys(this.value)) {
-        // add @id for nested resources
-        const object = await this.resource[predicate];
-        if (object && object['@id'] && !value[predicate]['@id']) value[predicate]['@id'] = object['@id'];
-      }
-    }
-    return transformArrayToContainer(value);
-  },
-  getWidget(field, isSet = false) {
-    let tagName = '';
-    const widgetAttribute = this.element.getAttribute('widget-' + field);
-
-    // Choose widget
-    if (!widgetAttribute && this.element.hasAttribute('upload-url-' + field)) {
-      tagName = 'solid-form-file';
-    } else if (!widgetAttribute && (this.element.hasAttribute('range-' + field) || this.element.hasAttribute('enum-' + field))) {
-      tagName = 'solid-form-dropdown';
-    } else {
-      tagName = widgetAttribute || (!isSet ? this.defaultWidget : this.defaultSetWidget);
-    }
-    // Create widget
-    return this.widgetFromTagName(tagName);
-  },
-  change(resource) {
-    this.element.dispatchEvent(new CustomEvent('formChange', {
-      bubbles: true,
-      detail: {
-        resource
-      }
-    }));
-  },
-  async save() {
-    this.toggleLoaderHidden(false);
-    this.hideError();
-    const resource = await this.getFormValue();
-    resource['@context'] = this.context;
-    let saved;
-    try {
-      if (this.partial == null) {
-        saved = resource['@id'] ? await store.put(resource, this.resourceId) : await store.post(resource, this.resourceId);
-      } else {
-        saved = await store.patch(resource, this.resourceId);
-      }
-    } catch (e) {
-      this.toggleLoaderHidden(true);
-      if (e) {
-        // if server error
-        e.json().then(error => this.showError(error));
-        throw e;
-      } // else, ldpframework error, we continue
-    }
-
-    this.element.dispatchEvent(new CustomEvent('save', {
-      bubbles: true,
-      detail: {
-        resource: resource,
-        id: saved || null
-      }
-    }));
-    this.toggleLoaderHidden(true);
-    return saved;
-  },
-  async submitForm() {
-    let id;
-    try {
-      id = (await this.save()) || this.getFormValue()['@id'];
-    } catch (e) {
-      return;
-    }
-    this.reset();
-    this.goToNext({
-      '@id': id
-    });
-  },
-  async onInput() {
-    const formValue = await this.getFormValue();
-    this.change(formValue);
-  },
-  async onChange() {
-    const formValue = await this.getFormValue();
-    if (!this.isCreationForm(formValue) && this.isSavingAutomatically) this.submitForm(); // if autosave, submitForm
-  },
-
-  findErrorMessage(errors, errorFullName = '') {
-    let errorsArray = [];
-    errors.forEach(member => {
-      let errorNextName = Object.values(member)[0];
-      let errorAddName = errorFullName === "" ? errorNextName : errorFullName.concat(' - ', errorNextName);
-      if (Array.isArray(Object.values(member)[1]) === true) {
-        let errorMessage = Object.values(member)[1];
-        let errorGlobal = errorAddName.concat(': ', errorMessage.join(', '));
-        errorsArray.push(errorGlobal);
-      } else {
-        let objectErrors = Object.values(member)[1];
-        let subErrors = Object.entries(objectErrors);
-        errorsArray = [...errorsArray, ...this.findErrorMessage(subErrors, errorAddName)];
-      }
-    });
-    return errorsArray;
-  },
-  empty() {},
-  showError(e) {
-    let errors = Object.entries(e).filter(field => !field[0].startsWith('@context'));
-    const errorTemplate = html`
-      <p>A validation error occurred.</p>
-      <ul>
-        ${this.findErrorMessage(errors).map(field => html`
-         <li>${field}</li>
-        `)}
-      </ul>
-    `;
-    // If field exists pick its label (unsure if that's easily possible)
-    // In this.getFields() map with each field and get label
-    // If it does not just add a notice as we do that it's missing that field
-
-    // Validation message in english ?
-    const parentElement = this.element.querySelector('[data-id=error]');
-    if (parentElement) render(errorTemplate, parentElement);
-  },
-  hideError() {
-    const parentElement = this.element.querySelector('[data-id=error]');
-    if (parentElement) render('', parentElement);
-  },
-  reset() {
-    if (!this.isNaked) this.element.querySelector('form').reset();
-  },
-  onSubmit(event) {
-    if (!this.isNaked) {
-      event.preventDefault();
-      this.performAction(); // In validationMixin, method defining what to do according to the present attributes
-    }
-  },
-
-  validateModal() {
-    //send method to validationMixin, used by the dialog modal and performAction method
-    return this.submitForm();
-  },
-  onReset() {
-    if (!this.isNaked) setTimeout(() => this.onInput());
-  },
-  getSubmitTemplate() {
-    return html`
-      <div class=${ifDefined(this.classSubmitButton)}>
-        ${this.submitWidget === 'button' ? html`
-          <button type="submit">${this.submitButton || this.t("solid-form.submit-button")}</button>
-        ` : html`
-          <input type="submit" value=${this.submitButton || this.t("solid-form.submit-button")}>
-        `}
-      </div>
-    `;
-  },
-  async populate() {
-    this.element.oninput = () => this.onInput(); // prevent from firing change multiple times
-    this.element.onchange = () => this.onChange();
-    const fields = await this.getFields();
-    const widgetTemplates = await Promise.all(fields.map(field => this.createWidgetTemplate(field)));
-    const template = html`
-      <div data-id="error"></div>
-      ${!this.isNaked ? html`
-        <form
-          @submit=${this.onSubmit.bind(this)}
-          @reset=${this.onReset.bind(this)}
-        >
-          ${widgetTemplates}
-          ${!this.isSavingAutomatically ? this.getSubmitTemplate() : ''}
-          ${this.element.hasAttribute('reset') ? html`<input type="reset" />` : ''}
-        </form>
-      ` : html`
-        ${widgetTemplates}
-      `}
-      ${this.getModalDialog()}
-    `;
-    render(template, this.element);
-  }
-};
-Sib.register(SolidForm);

package/dist/components/solid-lang.js

@@ -1,35 +0,0 @@
-import { Sib } from '../libs/Sib.js';
-import { store } from '../libs/store/store.js';
-import { html, render } from '../_snowpack/pkg/lit-html.js';
-export const SolidLang = {
-  name: 'solid-lang',
-  use: [],
-  attributes: {
-    lang: {
-      type: String,
-      default: null
-    },
-    dataLabel: {
-      type: String,
-      default: null
-    }
-  },
-  created() {
-    this.render();
-  },
-  languageLoader() {
-    store.selectLanguage(this.lang);
-    location.reload();
-  },
-  render() {
-    let template = html`
-    <button
-      @click=${this.languageLoader.bind(this)}
-    >
-      ${this.dataLabel}
-    </button>
-    `;
-    render(template, this.element);
-  }
-};
-Sib.register(SolidLang);

package/dist/components/solid-map.js

@@ -1,204 +0,0 @@
-import { Sib } from '../libs/Sib.js';
-import { ListMixin } from '../mixins/listMixin.js';
-import { StoreMixin } from '../mixins/storeMixin.js';
-import { WidgetMixin } from '../mixins/widgetMixin.js';
-import { CounterMixin } from '../mixins/counterMixin.js';
-import { FilterMixin } from '../mixins/filterMixin.js';
-import { FederationMixin } from '../mixins/federationMixin.js';
-import { GrouperMixin } from '../mixins/grouperMixin.js';
-import { NextMixin } from '../mixins/nextMixin.js';
-import { store } from '../libs/store/store.js';
-import { uniqID } from '../libs/helpers.js';
-import { spread } from '../libs/lit-helpers.js';
-
-//@ts-ignore
-import L from 'https://cdn.skypack.dev/leaflet'; // TODO : revert to "leaflet" when apps up to date
-import 'https://cdn.skypack.dev/leaflet.markercluster'; // TODO : revert to "leaflet.markercluster" when apps up to date
-
-import { html, render } from '../_snowpack/pkg/lit-html.js';
-import { ifDefined } from '../_snowpack/pkg/lit-html/directives/if-defined.js';
-export const SolidMap = {
-  name: 'solid-map',
-  use: [WidgetMixin, ListMixin, StoreMixin, GrouperMixin, CounterMixin, FilterMixin, FederationMixin, NextMixin],
-  attributes: {
-    clustering: {
-      type: Boolean,
-      default: null
-    }
-  },
-  initialState: {
-    markers: {
-      default: null
-    },
-    subscriptions: null,
-    resetPlanned: false,
-    hasBeenResetOnce: false
-  },
-  created() {
-    //@ts-ignore
-    import("../_snowpack/pkg/leaflet/dist/leaflet.css.proxy.js");
-    //@ts-ignore
-    import("../style/default-theme.css.proxy.js");
-    //@ts-ignore
-    import("../_snowpack/pkg/leaflet.markercluster/dist/MarkerCluster.css.proxy.js");
-    //@ts-ignore
-    import("../_snowpack/pkg/leaflet.markercluster/dist/MarkerCluster.Default.css.proxy.js");
-
-    // reset when it becomes visible to prevent bug https://git.startinblox.com/framework/sib-core/issues/661
-    document.body.addEventListener('navigate', () => setTimeout(() => this.isVisible && !this.hasBeenResetOnce && this.reset()));
-    this.markers = [];
-    this.subscriptions = new Map();
-  },
-  get isVisible() {
-    return this.element.offsetParent !== null;
-  },
-  attached() {
-    const id = uniqID();
-    const template = html`
-      <div id=${id} style="width:100%;height:100%;"></div>
-    `;
-    render(template, this.element);
-    const div = this.element.querySelector(`#${id}`);
-    this.map = L.map(div);
-    L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png').addTo(this.map);
-    if (this.clustering !== null) {
-      this.markersCluster = L.markerClusterGroup();
-      this.map.addLayer(this.markersCluster);
-    }
-  },
-  reset() {
-    if (this.isVisible) {
-      // reset only if visible
-      this.map.invalidateSize();
-      if (this.markers.length) {
-        this.map.fitBounds(L.featureGroup(this.markers).getBounds()); // Center map on markers if some available
-      } else {
-        this.map.fitWorld(); // ... or on the world if not
-      }
-
-      this.hasBeenResetOnce = true;
-    }
-  },
-  /**
-   * Execute a reset only if none is planned already
-   */
-  planReset() {
-    if (!this.resetPlanned) {
-      this.resetPlanned = true;
-      setTimeout(() => {
-        this.reset();
-        this.resetPlanned = false;
-      });
-    }
-  },
-  dispatchSelect(event) {
-    const target = event.target;
-    const resource = target['options'].resource;
-    this.element.dispatchEvent(new CustomEvent('resourceSelect', {
-      detail: {
-        resource: resource
-      }
-    }));
-    this.goToNext(resource);
-  },
-  /**
-   * Override listMixin method: initialize a marker on the map
-   * @param resourceId: id of the resource to display
-   * @param groupClass: class of the group of markers
-   */
-  async appendChildElt(resourceId, groupClass) {
-    const resource = await store.getData(resourceId, this.context);
-    if (!this.subscriptions.get(resourceId)) {
-      this.subscriptions.set(resourceId, PubSub.subscribe(resourceId, () => this.updateDOM()));
-    }
-    if (!resource) return;
-    const lat = await resource['lat'];
-    const lng = await resource['lng'];
-    if (lat && lng) {
-      const icon = L.divIcon({
-        // create the icon, doc here: https://leafletjs.com/reference-1.6.0.html#icon
-        className: 'sib-custom-marker ' + groupClass,
-        // default class used for styling
-        iconSize: [8, 8],
-        iconAnchor: [12, 34],
-        popupAnchor: [0, -34]
-      });
-
-      // create a marker, doc here: https://leafletjs.com/reference-1.6.0.html#marker
-      const marker = L.marker([lat.toString(), lng.toString()], {
-        resource,
-        icon
-      });
-      if (this.clustering === null) marker.addTo(this.map);else this.markersCluster.addLayer(marker);
-      marker.on('click', this.dispatchSelect.bind(this));
-      if (this.fields !== null) {
-        // show popups only if fields attribute
-        marker.bindPopup(() => this.getPopupContent(resourceId), {
-          minWidth: 150
-        }); // re-generate popup solid-display
-      }
-
-      this.markers.push(marker);
-    }
-  },
-  /**
-   * Generate the solid-display of the popup
-   * @param resourceId: id of the popup clicked
-   */
-  getPopupContent(resourceId) {
-    const attributes = {};
-    for (let attr of this.element.attributes) {
-      //copy widget and value attributes
-      if (attr.name.startsWith('value-') || attr.name.startsWith('label-') || attr.name.startsWith('widget-') || attr.name.startsWith('class-') || attr.name.startsWith('multiple-') || attr.name.startsWith('editable-') || attr.name.startsWith('action-') || attr.name.startsWith('default-') || attr.name == 'extra-context') attributes[attr.name] = attr.value;
-      if (attr.name.startsWith('child-')) attributes[attr.name.replace(/^child-/, '')] = attr.value;
-    }
-    const div = document.createElement('div');
-    const template = html`
-      <solid-display
-        fields="${ifDefined(this.fields)}"
-        data-src="${resourceId}"
-        ...=${spread(attributes)}
-      ></solid-display>
-    `;
-    render(template, div);
-    return div.querySelector('solid-display');
-  },
-  /**
-   * Override widgetMixin method: empty the map
-   */
-  empty() {
-    if (!this.map) return;
-    if (this.markersCluster) this.map.removeLayer(this.markersCluster);
-    for (let marker of this.markers) this.map.removeLayer(marker);
-    if (this.clustering !== null) {
-      this.markersCluster = L.markerClusterGroup();
-      this.map.addLayer(this.markersCluster);
-    }
-    this.markers = [];
-  },
-  /**
-   * Override groupMixin method
-   * @param groupName: value of the group
-   */
-  renderGroup(groupName) {
-    const sanitizedGroupName = encodeURIComponent(groupName.toLowerCase()).replace(/%[0-9A-F]{2}/gi, '');
-    const div = document.createElement('div'); // used to pass group info to renderDOM
-    div.dataset.groupClass = 'group-' + sanitizedGroupName;
-    return div;
-  },
-  /**
-   * Override listMixin method: display all the resources
-   * @param resources
-   * @param listPostProcessors
-   * @param div
-   * @param context
-   */
-  async renderDOM(resources, listPostProcessors, div, context) {
-    const groupClass = div.dataset.groupClass || ''; // get the group class from the useless div element
-    await Promise.all(resources.map(resource => this.appendChildElt(resource['@id'], groupClass)));
-    this.planReset();
-    const nextProcessor = listPostProcessors.shift();
-    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
-  }
-};
-Sib.register(SolidMap);

package/dist/components/solid-table.js

@@ -1,181 +0,0 @@
-import { Sib } from '../libs/Sib.js';
-import { store } from '../libs/store/store.js';
-import { WidgetMixin } from '../mixins/widgetMixin.js';
-import { ListMixin } from '../mixins/listMixin.js';
-import { StoreMixin } from '../mixins/storeMixin.js';
-import { PaginateMixin } from '../mixins/paginateMixin.js';
-import { FilterMixin } from '../mixins/filterMixin.js';
-import { CounterMixin } from '../mixins/counterMixin.js';
-import { SorterMixin } from '../mixins/sorterMixin.js';
-import { GrouperMixin } from '../mixins/grouperMixin.js';
-import { FederationMixin } from '../mixins/federationMixin.js';
-import { HighlighterMixin } from '../mixins/highlighterMixin.js';
-import { RequiredMixin } from '../mixins/requiredMixin.js';
-import { html, render } from '../_snowpack/pkg/lit-html.js';
-import { until } from '../_snowpack/pkg/lit-html/directives/until.js';
-import { spread } from '../libs/lit-helpers.js';
-export const SolidTable = {
-  name: 'solid-table',
-  use: [WidgetMixin, ListMixin, StoreMixin, PaginateMixin, GrouperMixin, CounterMixin, HighlighterMixin, FilterMixin, SorterMixin, RequiredMixin, FederationMixin],
-  attributes: {
-    defaultWidget: {
-      type: String,
-      default: 'solid-display-value'
-    },
-    selectable: {
-      type: String,
-      default: null
-    },
-    header: {
-      type: String,
-      default: null
-    }
-  },
-  get parentElement() {
-    return 'table';
-  },
-  get defaultMultipleWidget() {
-    return 'solid-multiple';
-  },
-  get defaultSetWidget() {
-    return 'solid-set-default';
-  },
-  get selectedLines() {
-    if (this.selectable === null) return [];
-    return Array.from(this.element.querySelectorAll('input[data-selection]:checked')).map(e => e?.closest('[data-resource]')?.getAttribute('data-resource'));
-  },
-  /**
-   * Select all lines
-   * @param e - event
-   */
-  selectAll(e) {
-    if (this.selectable === null) return;
-    for (const checkbox of Array.from(this.element.querySelectorAll('input[data-selection]'))) {
-      checkbox.checked = e.target.checked;
-    }
-  },
-  /**
-   * Unselect all lines
-   */
-  unselectAll() {
-    if (this.selectable === null) return;
-    for (const checkbox of Array.from(this.element.querySelectorAll('input[data-selection]'))) {
-      checkbox.checked = false;
-    }
-  },
-  /**
-   * Select specific lines
-   * @param lines - array of selected lines
-   */
-  selectLines(lines) {
-    if (this.selectable === null || lines.length === 0) return;
-    for (const line of lines) {
-      const checkbox = this.element.querySelector(`[data-resource="${line}"] input[data-selection]`);
-      if (checkbox) checkbox.checked = true;
-    }
-  },
-  /**
-   * Create a widget for the field or a form if it's editable
-   * @param field
-   * @param resource
-   */
-  async createCellWidget(field, resource) {
-    // if regular widget
-    if (!this.element.hasAttribute('editable-' + field)) return this.createWidgetTemplate(field, resource, true);
-
-    // if editable widget
-    const attributes = {};
-    const formWidgetAttributes = [
-    // attributes to give to the form widget
-    'range', 'enum', 'placeholder', 'required', 'autocomplete', 'option-label', 'option-value', 'min', 'max', 'pattern', 'title', 'widget'];
-    for (let attr of formWidgetAttributes) this.addToAttributes(`${attr}-${field}`, `${attr}-${field}`, attributes);
-    const formAttributes = [
-    // attributes to give to the form
-    'class', 'submit-button', 'next'];
-    for (let attr of formAttributes) this.addToAttributes(`${attr}-${field}`, attr, attributes);
-    return html`
-      <solid-form
-        data-src="${resource['@id']}"
-        fields="${field}"
-        partial
-        autosave
-        ...=${spread(attributes)}
-      ></solid-form>
-    `;
-  },
-  /**
-   * Creates a header line for the table
-   * @param fields
-   */
-  getHeader(fields) {
-    let template = html`
-      <tr>
-        ${this.selectable !== null ? html`
-        <th>
-          <input type="checkbox" @change="${this.selectAll.bind(this)}" />
-        </th>` : ''}
-        ${fields.map(field => html`
-          <th>
-            ${this.element.hasAttribute('label-' + field) ? this.element.getAttribute('label-' + field) : field}
-        </th>`)}
-      </tr>
-    `;
-    return template;
-  },
-  /**
-   * Returns template of a child element (resource)
-   * @param resourceId
-   * @param attributes
-   */
-  async getChildTemplate(resourceId, fields) {
-    const resource = await store.getData(resourceId, this.context);
-    let template = html`
-      <tr data-resource="${resourceId}">
-        ${this.selectable !== null ? html`
-        <td>
-          <input type="checkbox" data-selection />
-        </td>` : ''}
-        ${fields.map(field => html`<td>${until(this.createCellWidget(field, resource))}</td>`)}
-      </tr>
-    `;
-    return template;
-  },
-  /**
-   * Creates and render the content of a single element (resource)
-   * @param parent
-   */
-  async appendSingleElt(parent) {
-    const fields = await this.getFields();
-    const template = html`
-      ${this.header !== null ? this.getHeader(fields) : ''}
-      ${until(this.getChildTemplate(this.resource['@id'], fields))}
-    `;
-    render(template, parent);
-  },
-  /**
-   * @override listMixin method to use litHtml
-   *
-   * Render resources from a container
-   * @param resources
-   * @param listPostProcessors
-   * @param div
-   * @param context
-   */
-  async renderDOM(resources, listPostProcessors, div, context) {
-    const selectedLines = [...this.selectedLines]; // save selected lines before moving them
-    const fields = await this.getFields();
-    const childTemplates = await Promise.all(resources.map(r => r ? this.getChildTemplate(r['@id'], fields) : null));
-    const template = html`
-      ${this.header !== null ? this.getHeader(fields) : ''}
-      ${childTemplates}
-    `; // create a child template for each resource
-    render(template, div);
-
-    // Re-select the right lines
-    this.unselectAll();
-    this.selectLines(selectedLines);
-    const nextProcessor = listPostProcessors.shift();
-    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
-  }
-};
-Sib.register(SolidTable);