@startinblox/core 0.0.0

package/dist/new-widgets/templates/formTemplatesDirectory.js

@@ -0,0 +1,432 @@
+import { FormMixin } from '../templatesDependencies/formMixin.js';
+import { FormCheckboxMixin } from '../templatesDependencies/formCheckboxMixin.js';
+import { FormMinMaxMixin } from '../templatesDependencies/formMinMaxMixin.js';
+import { FormNumberMixin } from '../templatesDependencies/formNumberMixin.js';
+import { FormDropdownMixin } from '../templatesDependencies/formDropdownMixin.js';
+import { FormCheckboxesMixin } from '../templatesDependencies/formCheckboxesMixin.js';
+import { FormRadioMixin } from '../templatesDependencies/formRadioMixin.js';
+import { FormFileMixin } from '../templatesDependencies/formFileMixin.js';
+import { MultipleFormMixin } from '../templatesDependencies/multipleFormMixin.js';
+import { MultipleselectFormMixin } from '../templatesDependencies/multipleselectFormMixin.js';
+import { RangeMixin } from '../templatesDependencies/rangeMixin.js';
+import { FilterRangeFormMixin } from '../templatesDependencies/filterRangeFormMixin.js';
+import { ValueRichtextMixin } from '../templatesDependencies/valueRichtextMixin.js';
+import { PatternMixin } from '../templatesDependencies/patternMixin.js';
+import { FormStepMixin } from '../templatesDependencies/formStepMixin.js';
+import { FormLengthMixin } from '../templatesDependencies/formLengthMixin.js';
+import { html } from '../../_snowpack/pkg/lit-html.js';
+import { ifDefined } from '../../_snowpack/pkg/lit-html/directives/if-defined.js';
+export const formTemplates = {
+  text: {
+    template: (value, attributes) => html`
+      <input
+        type="text"
+        placeholder=${ifDefined(attributes.placeholder)}
+        name=${ifDefined(attributes.name)}
+        id=${ifDefined(attributes.id)}
+        value=${value || ''}
+        pattern=${ifDefined(attributes.pattern)}
+        title=${ifDefined(attributes.title)}
+        ?required=${attributes.required}
+        autocomplete=${ifDefined(attributes.autocomplete)}
+        data-holder
+        maxlength=${ifDefined(attributes.maxlength)}
+        minlength=${ifDefined(attributes.minlength)}
+        @change=${attributes.onChange}
+      />
+    `,
+    dependencies: [FormMixin, PatternMixin, FormLengthMixin]
+  },
+  textarea: {
+    template: (value, attributes) => html`
+      <textarea
+        name=${ifDefined(attributes.name)}
+        id=${ifDefined(attributes.id)}
+        placeholder=${ifDefined(attributes.placeholder)}
+        data-holder
+        ?required=${attributes.required}
+        autocomplete=${ifDefined(attributes.autocomplete)}
+        maxlength=${ifDefined(attributes.maxlength)}
+        minlength=${ifDefined(attributes.minlength)}
+        @change=${attributes.onChange}
+      >${value}</textarea>
+    `,
+    dependencies: [FormMixin, FormLengthMixin]
+  },
+  checkbox: {
+    template: (value, attributes) => html`
+      <label>
+        <input
+          data-holder
+          type="checkbox"
+          name=${ifDefined(attributes.name)}
+          ?required=${attributes.required}
+          ?checked=${value === 'true'}
+          @change=${attributes.onChange}
+        >
+        <div>${attributes.label || attributes.name}</div>
+      </label>
+    `,
+    dependencies: [FormCheckboxMixin, FormMixin]
+  },
+  date: {
+    template: (_value, attributes) => html`
+      <input
+        type="date"
+        placeholder=${ifDefined(attributes.placeholder)}
+        name=${ifDefined(attributes.name)}
+        id=${ifDefined(attributes.id)}
+        ?required=${attributes.required}
+        value=${ifDefined(attributes.originalValue)}
+        data-holder
+        @change=${attributes.onChange}
+      />
+    `,
+    dependencies: [FormMixin]
+  },
+  rangedate: {
+    template: (_value, attributes) => html`
+      <input
+        data-holder
+        type="date"
+        name="${attributes.name || ''}-start"
+        @change=${attributes.onChange}
+        value=${ifDefined(attributes.startValue)}
+        />
+        <input
+        data-holder
+        type="date"
+        name="${attributes.name || ''}-end"
+        @change=${attributes.onChange}
+        value=${ifDefined(attributes.endValue)}
+      />
+    `,
+    dependencies: [FilterRangeFormMixin, FormMixin]
+  },
+  number: {
+    template: (value, attributes) => html`
+      <input
+        type="number"
+        placeholder=${ifDefined(attributes.placeholder)}
+        name=${ifDefined(attributes.name)}
+        id=${ifDefined(attributes.id)}
+        value=${value}
+        min=${ifDefined(attributes.min)}
+        max=${ifDefined(attributes.max)}
+        step=${ifDefined(attributes.step)}
+        ?required=${attributes.required}
+        data-holder
+        @change=${attributes.onChange}
+      />
+    `,
+    dependencies: [FormNumberMixin, FormMinMaxMixin, FormMixin, FormStepMixin]
+  },
+  rangenumber: {
+    template: (_value, attributes) => html`
+      <input
+        data-holder
+        type="number"
+        name="${attributes.name || ''}-start"
+        @change=${attributes.onChange}
+        value=${ifDefined(attributes.startValue)}
+      />
+      <input
+        data-holder
+        type="number"
+        name="${attributes.name || ''}-end"
+        @change=${attributes.onChange}
+        value=${ifDefined(attributes.endValue)}
+      />
+    `,
+    dependencies: [FilterRangeFormMixin, FormNumberMixin, FormMixin]
+  },
+  hidden: {
+    template: (value, attributes) => html`
+      <input
+        type="hidden"
+        name=${ifDefined(attributes.name)}
+        value=${value}
+        data-holder
+        @change=${attributes.onChange}
+      />
+    `,
+    dependencies: [FormMixin]
+  },
+  dropdown: {
+    template: (value, attributes) => html`
+      <select
+        name=${ifDefined(attributes.name)}
+        id=${ifDefined(attributes.id)}
+        data-holder
+        ?required=${attributes.required}
+        ?multiple=${attributes.multiple}
+        autocomplete=${ifDefined(attributes.autocomplete)}
+        @change=${attributes.onChange}
+      >
+        ${!(attributes.multiple || attributes.autocomplete) ? html`
+        <option value="" ?selected=${value === ""}>
+          ${attributes.placeholder || '-'}
+        </option>
+        ` : ''}
+        ${(attributes.range || []).map(el => html`
+          <option
+            value=${el.value}
+            ?selected=${!attributes.multiple ? value === el.selectedValue : attributes.values.includes(el.selectedValue)}
+          >
+            ${el.label}
+          </option>
+        `)}
+        ${Object.entries(attributes.enum || []).map(_ref => {
+      let [key, val] = _ref;
+      return html`
+          <option
+            value="${key}"
+            ?selected=${!attributes.multiple ? value === key : attributes.values.includes(key)}
+          >
+            ${val}
+          </option>
+        `;
+    })}
+      </select>
+    `,
+    dependencies: [FormDropdownMixin, FormMixin, RangeMixin]
+  },
+  radio: {
+    template: (value, attributes) => html`
+      <div
+        name=${ifDefined(attributes.name)}
+      >
+        ${(attributes.range || []).map(el => html`
+          <label>
+            <input
+              type="radio"
+              name=${ifDefined(attributes.id)}
+              value=${el.value}
+              ?required=${attributes.required}
+              ?checked=${value === el.selectedValue}
+            > <span>${el.label}</span>
+          </label>
+        `)}
+        ${Object.entries(attributes.enum || []).map(_ref2 => {
+      let [key, val] = _ref2;
+      return html`
+          <label>
+            <input
+              type="radio"
+              value="${key}"
+              name=${ifDefined(attributes.id)}
+              ?required=${attributes.required}
+              ?checked=${value === key}
+            > <span>${val}</span>
+          </label>
+        `;
+    })}
+    `,
+    dependencies: [FormRadioMixin, FormMixin, RangeMixin]
+  },
+  multicheckbox: {
+    template: (_value, attributes) => html`
+      <div
+        name=${ifDefined(attributes.name)}
+      >
+        ${(attributes.range || []).map(el => html`
+          <label>
+            <input
+              type="checkbox"
+              value=${el.value}
+              ?checked=${attributes.values.includes(el.selectedValue)}
+            /> <span>${el.label}</span>
+          </label>
+        `)}
+        ${Object.entries(attributes.enum || []).map(_ref3 => {
+      let [key, val] = _ref3;
+      return html`
+          <label>
+            <input type="checkbox"
+              value="${key}"
+            /> <span>${val}</span>
+          </label>
+        `;
+    })}
+      </select>
+    `,
+    dependencies: [FormCheckboxesMixin, FormMixin, RangeMixin]
+  },
+  checkboxes: {
+    template: (_value, attributes) => html`
+      <solid-form-multicheckbox
+        data-holder
+        name=${ifDefined(attributes.name)}
+        range=${ifDefined(attributes.range)}
+        enum=${ifDefined(attributes.enum)}
+        values=${ifDefined(attributes.values)}
+        order-asc=${ifDefined(attributes.orderAsc)}
+        order-desc=${ifDefined(attributes.orderDesc)}
+        ?required=${attributes.required}
+      ></solid-form-multicheckbox>
+    `,
+    dependencies: [MultipleselectFormMixin, FormMixin]
+  },
+  multiple: {
+    template: (_value, attributes) => html`
+      ${(attributes.children || []).map((child, index) => html`
+        <div data-index=${attributes.name + index}>
+          ${child}
+          <button type="button" class=${ifDefined(attributes.removeClass)} @click=${() => attributes.removeItem(index)}>${attributes.removeLabel}</button>
+        </div>
+      `)}
+      <button type="button" class=${ifDefined(attributes.addClass)} @click=${attributes.addItem}>${attributes.addLabel}</button>
+    `,
+    dependencies: [MultipleFormMixin, FormMixin]
+  },
+  multipleselect: {
+    template: (_value, attributes) => html`
+      <solid-form-dropdown
+        data-holder
+        name=${ifDefined(attributes.name)}
+        data-id=${ifDefined(attributes.id)}
+        range=${ifDefined(attributes.range)}
+        values=${ifDefined(attributes.values)}
+        order-asc=${ifDefined(attributes.orderAsc)}
+        order-desc=${ifDefined(attributes.orderDesc)}
+        ?required=${attributes.required}
+        multiple
+      ></solid-form-dropdown>
+    `,
+    dependencies: [MultipleselectFormMixin, FormMixin]
+  },
+  file: {
+    template: (value, attributes) => html`
+      <div>
+        <input
+          data-holder
+          type="text"
+          ?required=${attributes.required}
+          name=${ifDefined(attributes.name)}
+          value=${value || ''}
+        >
+        <input
+          type="file"
+          id=${ifDefined(attributes.id)}
+          value=${ifDefined(attributes.fileValue)}
+          @change=${attributes.selectFile}
+        />
+        <button
+          ?hidden=${attributes.resetButtonHidden}
+          @click=${attributes.resetFile}
+        >×</button>
+        <span>${attributes.output}</span>
+      </div>
+    `,
+    dependencies: [FormFileMixin, FormMixin]
+  },
+  image: {
+    template: (value, attributes) => html`
+      <div>
+        <input
+          data-holder
+          type="text"
+          name=${ifDefined(attributes.name)}
+          value=${value || ''}
+          ?required=${attributes.required}
+        >
+        <input
+          type="file"
+          accept="image/*"
+          id=${ifDefined(attributes.id)}
+          value=${ifDefined(attributes.fileValue)}
+          @change=${attributes.selectFile}
+        />
+        <img
+          src=${value || ''}
+          ?hidden=${value === ''}
+        />
+        <button
+          ?hidden=${attributes.resetButtonHidden}
+          @click=${attributes.resetFile}
+        >×</button>
+        <span>${attributes.output}</span>
+      </div>
+    `,
+    dependencies: [FormFileMixin, FormMixin]
+  },
+  richtext: {
+    template: (_value, attributes) => html`
+      <div 
+        data-richtext
+        name=${ifDefined(attributes.name)}
+        data-holder
+      ></div>
+    `,
+    dependencies: [ValueRichtextMixin, FormMixin]
+  },
+  color: {
+    template: (_value, attributes) => html`
+      <input
+        type="color"
+        placeholder=${ifDefined(attributes.placeholder)}
+        id=${ifDefined(attributes.id)}
+        name=${ifDefined(attributes.name)}
+        ?required=${attributes.required}
+        value=${ifDefined(attributes.originalValue)}
+        data-holder
+        @change=${attributes.onChange}
+      />
+    `,
+    dependencies: [FormMixin]
+  },
+  email: {
+    template: (value, attributes) => html`
+      <input
+        type="email"
+        placeholder=${ifDefined(attributes.placeholder)}
+        id=${ifDefined(attributes.id)}
+        name=${ifDefined(attributes.name)}
+        value=${value || ''}
+        ?required=${attributes.required}
+        data-holder
+        maxlength=${ifDefined(attributes.maxlength)}
+        minlength=${ifDefined(attributes.minlength)}
+        @change=${attributes.onChange}
+      />
+    `,
+    dependencies: [FormMixin, FormLengthMixin]
+  },
+  password: {
+    template: (value, attributes) => html`
+      <input
+        type="password"
+        placeholder=${ifDefined(attributes.placeholder)}
+        id=${ifDefined(attributes.id)}
+        name=${ifDefined(attributes.name)}
+        value=${value || ''}
+        ?required=${attributes.required}
+        pattern=${ifDefined(attributes.pattern)}
+        title=${ifDefined(attributes.title)}
+        data-holder
+        maxlength=${ifDefined(attributes.maxlength)}
+        minlength=${ifDefined(attributes.minlength)}
+        @change=${attributes.onChange}
+      />
+    `,
+    dependencies: [FormMixin, PatternMixin, FormLengthMixin]
+  },
+  time: {
+    template: (value, attributes) => html`
+      <input
+        type="time"
+        placeholder=${ifDefined(attributes.placeholder)}
+        name=${ifDefined(attributes.name)}
+        id=${ifDefined(attributes.id)}
+        value=${value || ''}
+        min=${ifDefined(attributes.min)}
+        max=${ifDefined(attributes.max)}
+        step=${ifDefined(attributes.step)}
+        ?required=${attributes.required}
+        data-holder
+        @change=${attributes.onChange}
+      />
+    `,
+    dependencies: [FormMixin, FormMinMaxMixin, FormStepMixin]
+  }
+};

package/dist/new-widgets/templates/groupTemplatesDirectory.js

@@ -0,0 +1,11 @@
+import { html } from '../../_snowpack/pkg/lit-html.js';
+import { SetMixin } from '../templatesDependencies/setMixin.js';
+export const groupTemplates = {
+  default: {
+    template: value => html`
+      <span>${value}</span>
+      <div data-content></div>
+    `,
+    dependencies: [SetMixin]
+  }
+};

package/dist/new-widgets/templates/index.js

@@ -0,0 +1,6 @@
+import { defaultTemplates } from './defaultTemplatesDirectory.js';
+import { displayTemplates } from './displayTemplatesDirectory.js';
+import { formTemplates } from './formTemplatesDirectory.js';
+import { setTemplates } from './setTemplatesDirectory.js';
+import { groupTemplates } from './groupTemplatesDirectory.js';
+export { defaultTemplates, displayTemplates, formTemplates, setTemplates, groupTemplates };

package/dist/new-widgets/templates/setTemplatesDirectory.js

@@ -0,0 +1,16 @@
+import { html } from '../../_snowpack/pkg/lit-html.js';
+import { SetMixin } from '../templatesDependencies/setMixin.js';
+export const setTemplates = {
+  default: {
+    template: () => html``,
+    dependencies: [SetMixin]
+  },
+  div: {
+    template: () => html`<div data-content></div>`,
+    dependencies: [SetMixin]
+  },
+  ul: {
+    template: () => html`<ul data-content></ul>`,
+    dependencies: [SetMixin]
+  }
+};

package/dist/new-widgets/templatesDependencies/altMixin.js

@@ -0,0 +1,12 @@
+const AltMixin = {
+  name: 'alt-mixin',
+  attributes: {
+    alt: {
+      type: String,
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'alt');
+      }
+    }
+  }
+};
+export { AltMixin };

package/dist/new-widgets/templatesDependencies/editableMixin.js

@@ -0,0 +1,60 @@
+import { StoreMixin } from '../../mixins/storeMixin.js';
+import { store } from '../../libs/store/store.js';
+import { html } from '../../_snowpack/pkg/lit-html.js';
+const EditableMixin = {
+  name: 'editable-mixin',
+  use: [StoreMixin],
+  // used to get context
+  attributes: {
+    editable: {
+      type: Boolean,
+      default: null,
+      callback: function (newValue) {
+        if (newValue !== null) this.listAttributes['editable'] = true;
+      }
+    },
+    valueId: {
+      type: String,
+      default: ''
+    }
+  },
+  created() {
+    this.listTemplateAdditions.push(this.addEditButton.bind(this));
+  },
+  addEditButton(template, listTemplateAdditions) {
+    let newTemplate = null;
+    if (this.editable !== null) {
+      newTemplate = html`
+        ${template}
+        <button @click=${this.activateEditableField.bind(this)}>Modifier</button>
+      `;
+    }
+    const nextProcessor = listTemplateAdditions.shift();
+    if (nextProcessor) nextProcessor(newTemplate || template, listTemplateAdditions);
+  },
+  activateEditableField(e) {
+    const editableField = this.element.querySelector('[data-editable]');
+    const editButton = e.target;
+
+    // Set attributes
+    editableField.toggleAttribute('contenteditable', true);
+    editableField.focus();
+    editButton.toggleAttribute('disabled', true);
+
+    // Save on focusout
+    editableField.addEventListener('focusout', () => this.save(editableField, editButton));
+  },
+  save(editableField, editButton) {
+    editableField.toggleAttribute('contenteditable', false);
+    editButton.removeAttribute('disabled');
+    if (!this.name || !this.valueId) {
+      console.warn('Some attributes are missing to perform the update');
+      return;
+    }
+    const resource = {};
+    resource[this.name] = editableField.innerText;
+    resource['@context'] = this.context;
+    store.patch(resource, this.valueId);
+  }
+};
+export { EditableMixin };

package/dist/new-widgets/templatesDependencies/filterRangeFormMixin.js

@@ -0,0 +1,34 @@
+const FilterRangeFormMixin = {
+  name: 'filter-range-form-mixin',
+  attributes: {
+    startValue: {
+      type: String,
+      default: '',
+      callback: function (value) {
+        this.addToAttributes(this.getDefaultValue(value), "startValue");
+      }
+    },
+    endValue: {
+      type: String,
+      default: '',
+      callback: function (value) {
+        this.addToAttributes(this.getDefaultValue(value), "endValue");
+      }
+    }
+  },
+  getDefaultValue(value) {
+    if (value == "today") return new Date().toISOString().split("T")[0];
+    return value;
+  },
+  getValue() {
+    if (!this.dataHolder) return [];
+    if (this.dataHolder.length !== 2) this.showDataHolderError(2, this.dataHolder.length);
+    return [
+    // we expect 2 values, one min and one max
+    this.getValueFromElement(this.dataHolder[0]), this.getValueFromElement(this.dataHolder[1])];
+  },
+  get type() {
+    return 'range';
+  }
+};
+export { FilterRangeFormMixin };

package/dist/new-widgets/templatesDependencies/formCheckboxMixin.js

@@ -0,0 +1,10 @@
+const FormCheckboxMixin = {
+  name: 'form-checkbox-mixin',
+  getValueFromElement(element) {
+    return element.checked;
+  },
+  get type() {
+    return 'boolean';
+  }
+};
+export { FormCheckboxMixin };

package/dist/new-widgets/templatesDependencies/formCheckboxesMixin.js

@@ -0,0 +1,41 @@
+const FormCheckboxesMixin = {
+  name: 'form-checkboxes-mixin',
+  attributes: {
+    values: {
+      type: String,
+      default: '',
+      callback: function (value) {
+        if (!value) return;
+        try {
+          this.listAttributes['values'] = JSON.parse(value);
+        } catch (e) {
+          console.error(e);
+          this.listAttributes['values'] = [];
+        }
+        this.render();
+        this.element.dispatchEvent(new Event('change'));
+      }
+    }
+  },
+  created() {
+    this.listAttributes['values'] = [];
+  },
+  getValue() {
+    const options = Array.from(this.element.querySelectorAll('input'));
+    return options.filter(el => el.checked).map(el => {
+      if (!el.value) return null;
+      let value = el.value;
+      try {
+        value = JSON.parse(el.value);
+      } catch (e) {}
+      return value;
+    });
+  },
+  get type() {
+    return this.enum === '' ? 'resource' : 'string';
+  },
+  get multiple() {
+    return true;
+  }
+};
+export { FormCheckboxesMixin };

package/dist/new-widgets/templatesDependencies/formDropdownMixin.js

@@ -0,0 +1,56 @@
+const FormDropdownMixin = {
+  name: 'form-dropdown-mixin',
+  attributes: {
+    values: {
+      // used to set more than 1 value, for multiple select
+      type: String,
+      default: '',
+      callback: function (value) {
+        if (value) {
+          try {
+            this.listAttributes['values'] = JSON.parse(value);
+          } catch (e) {
+            console.error(e);
+            this.listAttributes['values'] = [];
+          }
+          this.render(); // use render to make sure the dispatch always happen after
+          this.dispatchChange();
+        }
+      }
+    },
+    dataId: {
+      type: String,
+      default: '',
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'id');
+      }
+    }
+  },
+  created() {
+    this.listAttributes['values'] = [];
+    if (this.multiple) this.listAttributes['multiple'] = true;
+  },
+  dispatchChange() {
+    if (!this.element.querySelector('select')) return;
+    this.element.querySelector('select').dispatchEvent(new Event('change'));
+  },
+  getValue() {
+    if (!this.dataHolder) return ''; // no value
+    if (!this.multiple) {
+      // simple select
+      if (this.dataHolder.length > 1) this.showDataHolderError(1, this.dataHolder.length);
+      return this.getValueFromElement(this.dataHolder[0]);
+    }
+
+    // multiple select
+    const options = Array.from(this.element.querySelectorAll('option'));
+    return options.filter(el => el.selected).map(el => el.value ? JSON.parse(el.value) : null);
+  },
+  get type() {
+    return this.enum === '' ? 'resource' : 'string';
+  },
+  get multiple() {
+    return this.element.hasAttribute('multiple');
+  }
+};
+export { FormDropdownMixin };