@sankhyalabs/ezui 1.1.78 → 1.1.81

package/dist/collection/components/ez-form/fieldbuilder/tpl/ComboBox.tpl.js

@@ -0,0 +1,14 @@
+import { h } from "@stencil/core";
+export const buildComboBox = ({ name, label }, properties) => {
+  const prop = properties === null || properties === void 0 ? void 0 : properties.options;
+  let options;
+  if (typeof prop === "string") {
+    const parsed = JSON.parse(prop);
+    options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
+  }
+  else {
+    options = prop;
+  }
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-combo-box", { label: label, "data-field-name": name, key: name, options: options })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/DateInput.tpl.js

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+export const buildDate = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-date-input", { label: label, "data-field-name": name, key: name })));
+};
+export const buildTimeDate = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-date-time-input", { label: label, "data-field-name": name, key: name })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/FileInput.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildFile = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 padding--small" },
+    h("ez-upload", { label: label, urlUpload: "", requestHeaders: "", maxFiles: 10, "data-field-name": name, key: name })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/NumberInput.tpl.js

@@ -0,0 +1,13 @@
+import { h } from "@stencil/core";
+export const buildDecimal = ({ name, label }, properties) => {
+  const precision = Number((properties === null || properties === void 0 ? void 0 : properties.precision) || 2);
+  const prettyPrecision = Number((properties === null || properties === void 0 ? void 0 : properties.prettyPrecision) || precision);
+  return buildNumeric(name, label, precision, prettyPrecision);
+};
+export const buildInteger = ({ name, label }) => {
+  return buildNumeric(name, label, 0, 0);
+};
+function buildNumeric(fieldName, fieldLabel, precision, prettyPrecision) {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-number-input", { label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
+}

package/dist/collection/components/ez-form/fieldbuilder/tpl/SearchInput.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildSearch = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-search", { label: label, optionLoader: (_argument) => { }, "data-field-name": name, key: name })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/TextArea.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildTextArea = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 padding--small", key: name },
+    h("ez-text-area", { label: label, "data-field-name": name })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/TextInput.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildTextInput = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-text-input", { label: label, "data-field-name": name, key: name })));
+};

package/dist/collection/components/ez-form/store/form.slice.js

@@ -0,0 +1,38 @@
+const inicialState = {};
+///////////////////////////////     REDUCERS     ///////////////////////////////
+export function formReducer(state = inicialState, action) {
+  switch (action.type) {
+    case FormActions.METADATA_LOADED:
+      return Object.assign(Object.assign({}, state), { formMetadata: action.payload });
+    case FormActions.CHANGE_TAB:
+      return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
+    default:
+      return state;
+  }
+}
+/////////////////////////////// ACTION CREATORS ///////////////////////////////
+export function loadMetadata(formMetadata) {
+  return {
+    type: FormActions.METADATA_LOADED,
+    payload: formMetadata
+  };
+}
+export function changeTab(currentSheet) {
+  return {
+    type: FormActions.CHANGE_TAB,
+    payload: currentSheet
+  };
+}
+///////////////////////////////    SELECTORS    ///////////////////////////////
+export function selectFormMetadata(state) {
+  return state.formMetadata;
+}
+export function selectCurrentSheet(state) {
+  return state.currentSheet ? state.formMetadata.getSheet(state.currentSheet) : Array.from(state.formMetadata.getAllSheets().values())[0];
+}
+///////////////////////////////      TYPES      ///////////////////////////////
+var FormActions;
+(function (FormActions) {
+  FormActions["METADATA_LOADED"] = "FORM/METADATA_LOADED";
+  FormActions["CHANGE_TAB"] = "FORM/CHANGE_TAB";
+})(FormActions || (FormActions = {}));

package/dist/collection/components/ez-form/structure/FormItem.js

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+import { buildField } from "../fieldbuilder/FieldBuilder";
+export const FormItem = ({ source }) => {
+  if ("items" in source) {
+    const fieldSet = source;
+    return h("ez-collapsible-box", { label: source.label }, fieldSet.items.map(fi => buildField(fi)));
+  }
+  else {
+    return buildField(source);
+  }
+};

package/dist/collection/components/ez-form/structure/FormSheet.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+import { FormItem } from "./FormItem";
+export const FormSheet = ({ store, source }) => {
+  return (h("div", { class: "box__container" }, source.items.map(item => h(FormItem, { store: store, source: item }))));
+};

package/dist/collection/components/ez-form/structure/FormSheetMetadata.js

@@ -0,0 +1,86 @@
+export class FormMetadata {
+  constructor() {
+    this._sheets = new Map();
+    this._requiredFields = [];
+  }
+  getSheet(name) {
+    return this._sheets.get(name);
+  }
+  getAllSheets() {
+    return this._sheets;
+  }
+  addSheet(sheet) {
+    this._sheets.set(sheet.name, sheet);
+    this._requiredFields = this._requiredFields.concat(sheet.requiredFields);
+  }
+  getRequiredFields() {
+    return this._requiredFields;
+  }
+}
+export const buildFromDataUnit = (dataUnit) => {
+  var _a;
+  const unitMD = dataUnit.metadata;
+  const metadata = new FormMetadata();
+  if (unitMD) {
+    const visibleFields = (_a = unitMD.fields) === null || _a === void 0 ? void 0 : _a.filter(descriptor => descriptor.visible !== false);
+    metadata.addSheet({
+      label: unitMD.label,
+      name: unitMD.name,
+      items: visibleFields.map(descriptor => { return { descriptor }; }),
+      requiredFields: visibleFields
+        .filter(descriptor => descriptor.required)
+        .map(descriptor => descriptor.name)
+    });
+  }
+  return metadata;
+};
+export const buildFromConfig = (fields, dataUnit) => {
+  const sheets = new Map();
+  const requiredFields = [];
+  fields.forEach(config => {
+    if (config.visible !== false) {
+      const tab = config.tab || "Geral";
+      const descriptor = dataUnit.getField(config.name);
+      if (!sheets.has(tab)) {
+        sheets.set(tab, new Map());
+      }
+      let isRequired = false;
+      if (config.required === undefined) {
+        if (descriptor) {
+          isRequired = descriptor.required;
+        }
+      }
+      else {
+        isRequired = config.required;
+      }
+      if (isRequired) {
+        requiredFields.push(config.name);
+      }
+      const tabItens = sheets.get(tab);
+      const fieldMD = { config, descriptor };
+      const group = config.group;
+      if (group) {
+        const key = `group::${group}`;
+        if (!tabItens.has(key)) {
+          tabItens.set(key, { label: group, items: [fieldMD] });
+        }
+        else {
+          tabItens.get(key).items.push(fieldMD);
+        }
+      }
+      else {
+        tabItens.set(config.name, fieldMD);
+      }
+    }
+  });
+  const metadata = new FormMetadata();
+  sheets.forEach((value, key) => {
+    metadata.addSheet({
+      label: key,
+      name: key,
+      items: Array.from(value.values()),
+      requiredFields
+    });
+  });
+  return metadata;
+};

package/dist/collection/components/test-du/test-du.js

@@ -1,39 +1,81 @@
 import { Component, h } from '@stencil/core';
-import { DataUnit, DataType } from '@sankhyalabs/core';
+import { DataUnit, DataType, UserInterface } from '@sankhyalabs/core';
 export class TestDu {
-  constructor() {
-    this._dataUnit = new DataUnit("duteste");
-  }
-  componentDidLoad() {
-    this._dataUnit.dataLoader = (_dataUnit, _sort, _filters) => {
-      return Promise.resolve([
-        { __record__id__: "registro1", CODPARC: 10, NOMEPARC: "Parceiro 10" },
-        { __record__id__: "registro2", CODPARC: 20, NOMEPARC: "Parceiro 20" }
-      ]);
-    };
-    this._dataUnit.metadata = {
-      name: "Parceiro",
+  componentWillLoad() {
+    this.dataUnit = new DataUnit("testes_com_formulario");
+    this.dataUnit.metadata = {
+      name: "dd://br.com.sankhya.fin.cad.movimentacaoFinanceira/Financeiro",
       label: "Parceiro",
       fields: [
         {
           name: "CODPARC",
-          label: "Cód. Parceiro",
-          dataType: DataType.NUMBER
+          label: "Parceiro",
+          dataType: DataType.NUMBER,
+          userInterface: UserInterface.SEARCH,
+          required: true,
+          properties: {}
         },
         {
-          name: "NOMEPARC",
-          label: "Nome Parceiro",
-          dataType: DataType.TEXT
+          name: "RECDESP",
+          label: "Receita/Despesa",
+          dataType: DataType.TEXT,
+          userInterface: UserInterface.OPTIONSELECTOR,
+          required: true,
+          properties: { options: `{"-1": "Despesa", "1": "Receita"}` }
+        },
+        {
+          name: "P",
+          label: "pera",
+          dataType: DataType.TEXT,
+          userInterface: UserInterface.OPTIONSELECTOR,
+          properties: { options: `{"M": "Madura", "V": "Verde", "P": "Passada"}` }
+        },
+        {
+          name: "ME",
+          label: "ME",
+          dataType: DataType.NUMBER,
+          userInterface: UserInterface.DECIMALNUMBER,
+          properties: { precision: 4, prettyPrecision: 1 }
         }
       ]
     };
+    this.formConfig = [
+      { name: "CODPARC", label: "Parceiro" },
+      { name: "NOMEPARC", label: "Mamão" },
+      { name: "P", label: "Pêra", group: "Grupo 1" },
+      { name: "ME", label: "Melancia", tab: "aba 1", group: "Grupo 2" },
+      { name: "L", label: "Laranja", tab: "aba 1", group: "Grupo 1" },
+      { name: "LI", label: "Limão", tab: "aba 1", group: "Grupo 2" }
+    ];
+    this.dataUnit.records = [
+      {
+        __record__id__: "1321321321321321",
+        CODPARC: 10,
+        NOMEPARC: "Parceiro 10",
+        P: "M",
+        L: "Bagaço",
+        LI: "Azedo"
+      }
+    ];
   }
   render() {
-    return (h("section", { class: "padding--large" },
-      h("div", { class: "row margin-bottom--large" },
-        h("h1", { class: "title title--primary" }, "Formul\u00E1rios")),
-      h("div", { class: "col col--sd-12", style: { height: "600px" } },
-        h("ez-grid", { dataUnit: this._dataUnit, "server-url": "https://www.ag-grid.com/example-assets/row-data.json", "multiple-selection": true, "page-size": "100" }))));
+    //return this.conteudoEstatico();
+    //return this.somenteDataUnit();
+    return this.configurado();
+  }
+  conteudoEstatico() {
+    return (h("div", null,
+      h("button", { onClick: () => this.form.validate() }, "Validate"),
+      h("ez-form", { ref: ref => this.form = ref },
+        h("div", null,
+          h("ez-text-input", { label: "Nome (Label est\u00E1tico)", "data-field-name": "NOMEPARC", "data-required": "true" }),
+          h("ez-text-input", { label: "C\u00F3d parc (Label est\u00E1tico)", "data-field-name": "CODPARC", "data-required": "true" })))));
+  }
+  somenteDataUnit() {
+    return (h("ez-form", { dataUnit: this.dataUnit }));
+  }
+  configurado() {
+    return (h("ez-form", { dataUnit: this.dataUnit, config: this.formConfig, ref: ref => this.form = ref }));
   }
   static get is() { return "test-du"; }
   static get originalStyleUrls() { return {

package/dist/custom-elements/index.d.ts

@@ -158,24 +158,12 @@ export const EzUpload: {
   new (): EzUpload;
 };
 
-interface FormMetadata extends Components.FormMetadata, HTMLElement {}
-export const FormMetadata: {
-  prototype: FormMetadata;
-  new (): FormMetadata;
-};
-
 interface GridConfig extends Components.GridConfig, HTMLElement {}
 export const GridConfig: {
   prototype: GridConfig;
   new (): GridConfig;
 };
 
-interface PlaceHolder extends Components.PlaceHolder, HTMLElement {}
-export const PlaceHolder: {
-  prototype: PlaceHolder;
-  new (): PlaceHolder;
-};
-
 interface SelectBox extends Components.SelectBox, HTMLElement {}
 export const SelectBox: {
   prototype: SelectBox;