ywana-core8 0.0.701 → 0.0.703

package/dist/index.umd.js

@@ -46,7 +46,7 @@
       return false;
     }
 
-    function _catch$5(body, recover) {
+    function _catch$6(body, recover) {
       try {
         var result = body();
       } catch (e) {
@@ -78,7 +78,7 @@
           body: body
         };
         if (headers) request.headers = request.headers;
-        return Promise.resolve(_catch$5(function () {
+        return Promise.resolve(_catch$6(function () {
           return Promise.resolve(fetch(URL, request)).then(function (response) {
             var _exit;
 
@@ -1089,7 +1089,7 @@
      * FORMATS
      */
 
-    var FORMATS = {
+    var FORMATS$1 = {
       NONE: '',
       DATE: 'date',
       DATERANGE: 'DATERANGE',
@@ -2029,14 +2029,14 @@
 
         if (field.format) {
           switch (field.format) {
-            case FORMATS.COLOR:
+            case FORMATS$1.COLOR:
               text = /*#__PURE__*/React__default["default"].createElement("input", {
                 type: "color",
                 value: text,
                 disabled: true
               });
 
-            case FORMATS.URL:
+            case FORMATS$1.URL:
               text = /*#__PURE__*/React__default["default"].createElement("a", {
                 href: text,
                 target: "download",
@@ -2044,13 +2044,13 @@
               }, text);
               break;
 
-            case FORMATS.IMG:
+            case FORMATS$1.IMG:
               text = /*#__PURE__*/React__default["default"].createElement("img", {
                 src: text
               });
               break;
 
-            case FORMATS.DATE:
+            case FORMATS$1.DATE:
               var fecha = new Date(text);
               fecha.setMinutes(fecha.getMinutes() + fecha.getTimezoneOffset() + 1);
               text = fecha.toLocaleString(locale, {
@@ -2060,7 +2060,7 @@
               });
               break;
 
-            case FORMATS.TIME:
+            case FORMATS$1.TIME:
               text = new Date(text).toLocaleString(locale, {
                 year: 'hour',
                 month: 'minute',
@@ -2111,14 +2111,14 @@
       var locale = window.navigator.userLanguage || window.navigator.language;
 
       switch (format) {
-        case FORMATS.COLOR:
+        case FORMATS$1.COLOR:
           text = /*#__PURE__*/React__default["default"].createElement("input", {
             type: "color",
             value: text,
             disabled: true
           });
 
-        case FORMATS.URL:
+        case FORMATS$1.URL:
           text = /*#__PURE__*/React__default["default"].createElement("a", {
             href: text,
             target: "download",
@@ -2126,13 +2126,13 @@
           }, text);
           break;
 
-        case FORMATS.IMG:
+        case FORMATS$1.IMG:
           text = /*#__PURE__*/React__default["default"].createElement("img", {
             src: text
           });
           break;
 
-        case FORMATS.DATE:
+        case FORMATS$1.DATE:
           var fecha = new Date(text);
           fecha.setMinutes(fecha.getMinutes() + fecha.getTimezoneOffset() + 1);
           text = fecha.toLocaleString(locale, {
@@ -2142,7 +2142,7 @@
           });
           break;
 
-        case FORMATS.TIME:
+        case FORMATS$1.TIME:
           text = new Date(text).toLocaleString(locale, {
             year: 'hour',
             month: 'minute',
@@ -4639,7 +4639,7 @@
                 field: field,
                 value: value1,
                 onChange: change
-              }) : /*#__PURE__*/React__default["default"].createElement(CollectionEditor$1, {
+              }) : /*#__PURE__*/React__default["default"].createElement(CollectionEditor$2, {
                 field: field,
                 value: value1,
                 onChange: change,
@@ -4757,7 +4757,7 @@
         var label = required ? field.label + " *" : field.label;
 
         switch (format) {
-          case FORMATS.IMG:
+          case FORMATS$1.IMG:
             return /*#__PURE__*/React__default["default"].createElement("div", {
               className: "img-field"
             }, /*#__PURE__*/React__default["default"].createElement("img", {
@@ -4771,14 +4771,14 @@
               readOnly: !editable
             }));
 
-          case FORMATS.COLOR:
+          case FORMATS$1.COLOR:
             return /*#__PURE__*/React__default["default"].createElement(ColorField, {
               id: id,
               onChange: change,
               value: value
             });
 
-          case FORMATS.HTML:
+          case FORMATS$1.HTML:
             return /*#__PURE__*/React__default["default"].createElement(Editor, {
               id: id,
               value: value,
@@ -4786,7 +4786,7 @@
               content: content
             });
 
-          case FORMATS.DATE:
+          case FORMATS$1.DATE:
             return /*#__PURE__*/React__default["default"].createElement(TextField, {
               outlined: outlined,
               id: id,
@@ -4797,7 +4797,7 @@
               readOnly: !editable
             });
 
-          case FORMATS.DATERANGE:
+          case FORMATS$1.DATERANGE:
             return /*#__PURE__*/React__default["default"].createElement(DateRange, {
               id: id,
               label: label,
@@ -4806,7 +4806,7 @@
               readOnly: !editable
             });
 
-          case FORMATS.TOKENS:
+          case FORMATS$1.TOKENS:
             return /*#__PURE__*/React__default["default"].createElement(TokenField, {
               id: id,
               label: label,
@@ -4956,7 +4956,7 @@
      * Collection Editor
      */
 
-    var CollectionEditor$1 = function CollectionEditor(_ref11) {
+    var CollectionEditor$2 = function CollectionEditor(_ref11) {
       var field = _ref11.field,
           _ref11$value = _ref11.value,
           value = _ref11$value === void 0 ? [] : _ref11$value,
@@ -5395,7 +5395,7 @@
           options = field.options;
 
       switch (format) {
-        case FORMATS.IMG:
+        case FORMATS$1.IMG:
           return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "img-field"
           }, /*#__PURE__*/React__default["default"].createElement("img", {
@@ -5645,7 +5645,7 @@
      * Collection API
      */
 
-    var CollectionAPI = function CollectionAPI(url, host) {
+    var CollectionAPI$1 = function CollectionAPI(url, host) {
       var http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
       /**
        * objectToQueryParamString
@@ -5725,7 +5725,7 @@
      * Collection Page
      */
 
-    function _catch$4(body, recover) {
+    function _catch$5(body, recover) {
       try {
         var result = body();
       } catch (e) {
@@ -5743,7 +5743,7 @@
      */
 
 
-    var CollectionPage = function CollectionPage(props) {
+    var CollectionPage$1 = function CollectionPage(props) {
       var reloadSelection = function reloadSelection() {
         try {
           return Promise.resolve(pageContext.reloadSelection()).then(function () {
@@ -5809,7 +5809,7 @@
           filters = props.filters,
           footer = props.footer,
           children = props.children;
-      var context = CollectionContext(url, field, host, page, fetching, versioning);
+      var context = CollectionContext$1(url, field, host, page, fetching, versioning);
 
       var _useContext = React.useContext(PageContext),
           pageContext = _useContext[0],
@@ -5877,7 +5877,7 @@
         action: reload
       }), renderActions()), /*#__PURE__*/React__default["default"].createElement("menu", {
         className: "collection-page " + className + " " + hiddenStyle
-      }, canFilter ? /*#__PURE__*/React__default["default"].createElement(CollectionFilters, {
+      }, canFilter ? /*#__PURE__*/React__default["default"].createElement(CollectionFilters$1, {
         schema: schema,
         initial: filters
       }) : null, levels ? /*#__PURE__*/React__default["default"].createElement(CollectionTree, {
@@ -5888,14 +5888,14 @@
         sorter: sorter,
         searchBy: searchBy,
         namer: namer
-      }) : /*#__PURE__*/React__default["default"].createElement(CollectionList, {
+      }) : /*#__PURE__*/React__default["default"].createElement(CollectionList$1, {
         groupBy: groupBy,
         onSelect: onSelect,
         searchBy: searchBy
       })), /*#__PURE__*/React__default["default"].createElement("main", {
         key: id,
         className: "collection-page " + className
-      }, /*#__PURE__*/React__default["default"].createElement(CollectionEditor, {
+      }, /*#__PURE__*/React__default["default"].createElement(CollectionEditor$1, {
         icon: icon,
         schema: schema,
         layout: editor,
@@ -5909,7 +5909,7 @@
         title: editorTitle
       }), children ? /*#__PURE__*/React__default["default"].createElement("article", null, children) : null, /*#__PURE__*/React__default["default"].createElement("footer", null, footer)));
     };
-    var CollectionFilters = function CollectionFilters(props) {
+    var CollectionFilters$1 = function CollectionFilters(props) {
       var change = function change(next) {
         try {
           setForm(next);
@@ -6024,7 +6024,7 @@
      */
 
 
-    var CollectionList = function CollectionList(props) {
+    var CollectionList$1 = function CollectionList(props) {
       var select = function select(id) {
         try {
           clear();
@@ -6237,7 +6237,7 @@
      * Collection Editor
      */
 
-    var CollectionEditor = function CollectionEditor(props) {
+    var CollectionEditor$1 = function CollectionEditor(props) {
       var save = function save() {
         try {
           var _temp3 = function _temp3() {
@@ -6397,12 +6397,12 @@
      */
 
 
-    var CollectionContext = function CollectionContext(url, field, host, page, fetching, versioning) {
+    var CollectionContext$1 = function CollectionContext(url, field, host, page, fetching, versioning) {
       if (versioning === void 0) {
         versioning = false;
       }
 
-      var API = CollectionAPI(url, host);
+      var API = CollectionAPI$1(url, host);
       return {
         all: [],
         filters: {},
@@ -6414,7 +6414,7 @@
           try {
             var _this2 = this;
 
-            var _temp6 = _catch$4(function () {
+            var _temp6 = _catch$5(function () {
               return Promise.resolve(API.all(null, page)).then(function (data) {
                 _this2.all = field ? data[field] : data;
               });
@@ -6463,7 +6463,7 @@
         },
         fetch: function fetch(id) {
           try {
-            return Promise.resolve(_catch$4(function () {
+            return Promise.resolve(_catch$5(function () {
               return Promise.resolve(API.find(id));
             }, function (error) {
               console.log(error);
@@ -6479,7 +6479,7 @@
           try {
             var _this8 = this;
 
-            var _temp10 = _catch$4(function () {
+            var _temp10 = _catch$5(function () {
               if (versioning) form.version = 1;
               return Promise.resolve(API.create(form)).then(function () {
                 return Promise.resolve(_this8.load()).then(function () {});
@@ -6497,7 +6497,7 @@
           try {
             var _this10 = this;
 
-            var _temp12 = _catch$4(function () {
+            var _temp12 = _catch$5(function () {
               if (versioning) form.version = form.version ? form.version + 1 : 1;
               return Promise.resolve(API.update(form)).then(function () {
                 return Promise.resolve(_this10.load()).then(function () {});
@@ -6515,7 +6515,7 @@
           try {
             var _this12 = this;
 
-            var _temp14 = _catch$4(function () {
+            var _temp14 = _catch$5(function () {
               if (versioning) form.version = form.version ? form.version + 1 : 1;
               return Promise.resolve(API.patch(id, form)).then(function () {
                 return Promise.resolve(_this12.load()).then(function () {});
@@ -6533,7 +6533,7 @@
           try {
             var _this14 = this;
 
-            var _temp16 = _catch$4(function () {
+            var _temp16 = _catch$5(function () {
               return Promise.resolve(API.updateProperty(id, propertyName, form)).then(function () {
                 return Promise.resolve(_this14.load()).then(function () {});
               });
@@ -6550,7 +6550,7 @@
           try {
             var _this16 = this;
 
-            var _temp18 = _catch$4(function () {
+            var _temp18 = _catch$5(function () {
               return Promise.resolve(API.remove(id)).then(function () {
                 return Promise.resolve(_this16.load()).then(function () {});
               });
@@ -6584,7 +6584,7 @@
      * Table Page
      */
 
-    function _catch$3(body, recover) {
+    function _catch$4(body, recover) {
       try {
         var result = body();
       } catch (e) {
@@ -7397,7 +7397,7 @@
           try {
             var _this2 = this;
 
-            var _temp5 = _catch$3(function () {
+            var _temp5 = _catch$4(function () {
               var filters = filter ? Object.keys(filter).reduce(function (filters, key) {
                 var field = filter[key];
 
@@ -7459,7 +7459,7 @@
           try {
             var _this5 = this;
 
-            var _temp7 = _catch$3(function () {
+            var _temp7 = _catch$4(function () {
               return Promise.resolve(API.create(form)).then(function () {
                 return Promise.resolve(_this5.load()).then(function () {});
               });
@@ -7476,7 +7476,7 @@
           try {
             var _this7 = this;
 
-            var _temp9 = _catch$3(function () {
+            var _temp9 = _catch$4(function () {
               return Promise.resolve(API.update(form)).then(function () {
                 return Promise.resolve(_this7.load()).then(function () {});
               });
@@ -7493,7 +7493,7 @@
           try {
             var _this9 = this;
 
-            var _temp11 = _catch$3(function () {
+            var _temp11 = _catch$4(function () {
               return Promise.resolve(API.remove(id)).then(function () {
                 return Promise.resolve(_this9.load()).then(function () {});
               });
@@ -7513,7 +7513,7 @@
           try {
             var _this11 = this;
 
-            var _temp13 = _catch$3(function () {
+            var _temp13 = _catch$4(function () {
               return Promise.resolve(API.queries(user, urlQuery)).then(function (_API$queries) {
                 _this11.queries = _API$queries;
               });
@@ -7530,7 +7530,7 @@
           try {
             var _this13 = this;
 
-            var _temp15 = _catch$3(function () {
+            var _temp15 = _catch$4(function () {
               return Promise.resolve(API.createQuery(query, urlQuery)).then(function () {
                 return Promise.resolve(_this13.loadQueries(user)).then(function () {});
               });
@@ -7547,7 +7547,7 @@
           try {
             var _this15 = this;
 
-            var _temp17 = _catch$3(function () {
+            var _temp17 = _catch$4(function () {
               return Promise.resolve(API.removeQuery(id, urlQuery)).then(function () {
                 return Promise.resolve(_this15.loadQueries(user)).then(function () {});
               });
@@ -7638,7 +7638,7 @@
      * Table Page
      */
 
-    function _catch$2(body, recover) {
+    function _catch$3(body, recover) {
       try {
         var result = body();
       } catch (e) {
@@ -8436,7 +8436,7 @@
           try {
             var _this2 = this;
 
-            var _temp9 = _catch$2(function () {
+            var _temp9 = _catch$3(function () {
               var filters = filter ? Object.keys(filter).reduce(function (filters, key) {
                 var field = filter[key];
 
@@ -8495,7 +8495,7 @@
           try {
             var _this5 = this;
 
-            var _temp11 = _catch$2(function () {
+            var _temp11 = _catch$3(function () {
               return Promise.resolve(API.create(form)).then(function () {
                 return Promise.resolve(_this5.load()).then(function () {});
               });
@@ -8512,7 +8512,7 @@
           try {
             var _this7 = this;
 
-            var _temp13 = _catch$2(function () {
+            var _temp13 = _catch$3(function () {
               return Promise.resolve(API.update(form)).then(function () {
                 return Promise.resolve(_this7.load()).then(function () {});
               });
@@ -8529,7 +8529,7 @@
           try {
             var _this9 = this;
 
-            var _temp15 = _catch$2(function () {
+            var _temp15 = _catch$3(function () {
               return Promise.resolve(API.remove(id)).then(function () {
                 return Promise.resolve(_this9.load()).then(function () {});
               });
@@ -8549,7 +8549,7 @@
           try {
             var _this11 = this;
 
-            var _temp17 = _catch$2(function () {
+            var _temp17 = _catch$3(function () {
               return Promise.resolve(API.queries(user, urlQuery)).then(function (_API$queries) {
                 _this11.queries = _API$queries;
               });
@@ -8566,7 +8566,7 @@
           try {
             var _this13 = this;
 
-            var _temp19 = _catch$2(function () {
+            var _temp19 = _catch$3(function () {
               return Promise.resolve(API.createQuery(query, urlQuery)).then(function () {
                 return Promise.resolve(_this13.loadQueries(user)).then(function () {});
               });
@@ -8583,7 +8583,7 @@
           try {
             var _this15 = this;
 
-            var _temp21 = _catch$2(function () {
+            var _temp21 = _catch$3(function () {
               return Promise.resolve(API.removeQuery(id, urlQuery)).then(function () {
                 return Promise.resolve(_this15.loadQueries(user)).then(function () {});
               });
@@ -8670,7 +8670,7 @@
      * Tabbed Table Page
      */
 
-    function _catch$1(body, recover) {
+    function _catch$2(body, recover) {
       try {
         var result = body();
       } catch (e) {
@@ -9532,7 +9532,7 @@
           try {
             var _this2 = this;
 
-            var _temp9 = _catch$1(function () {
+            var _temp9 = _catch$2(function () {
               var filters = filter ? Object.keys(filter).reduce(function (filters, key) {
                 var field = filter[key];
 
@@ -9599,7 +9599,7 @@
           try {
             var _this5 = this;
 
-            var _temp11 = _catch$1(function () {
+            var _temp11 = _catch$2(function () {
               return Promise.resolve(API.create(form)).then(function () {
                 return Promise.resolve(_this5.load({}, [])).then(function () {});
               });
@@ -9616,7 +9616,7 @@
           try {
             var _this7 = this;
 
-            var _temp13 = _catch$1(function () {
+            var _temp13 = _catch$2(function () {
               return Promise.resolve(API.update(form)).then(function () {
                 return Promise.resolve(_this7.load()).then(function () {});
               });
@@ -9633,7 +9633,7 @@
           try {
             var _this9 = this;
 
-            var _temp15 = _catch$1(function () {
+            var _temp15 = _catch$2(function () {
               return Promise.resolve(API.remove(id)).then(function () {
                 return Promise.resolve(_this9.load()).then(function () {});
               });
@@ -9653,7 +9653,7 @@
           try {
             var _this11 = this;
 
-            var _temp17 = _catch$1(function () {
+            var _temp17 = _catch$2(function () {
               return Promise.resolve(API.queries(user, urlQuery)).then(function (_API$queries) {
                 _this11.queries = _API$queries;
               });
@@ -9670,7 +9670,7 @@
           try {
             var _this13 = this;
 
-            var _temp19 = _catch$1(function () {
+            var _temp19 = _catch$2(function () {
               return Promise.resolve(API.createQuery(query, urlQuery)).then(function () {
                 return Promise.resolve(_this13.loadQueries(user)).then(function () {});
               });
@@ -9687,7 +9687,7 @@
           try {
             var _this15 = this;
 
-            var _temp21 = _catch$1(function () {
+            var _temp21 = _catch$2(function () {
               return Promise.resolve(API.removeQuery(id, urlQuery)).then(function () {
                 return Promise.resolve(_this15.loadQueries(user)).then(function () {});
               });
@@ -9770,6 +9770,584 @@
       };
     };
 
+    /**
+     * Collection API
+     */
+
+    var CollectionAPI = function CollectionAPI(url, host) {
+      var http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
+      /**
+       * objectToQueryParamString
+       * 
+       * @param {*} obj 
+       * @returns 
+       */
+
+      function objectToQueryParamString(obj, likes) {
+        if (isEmpty(obj)) {
+          return "";
+        }
+
+        var notEmptyFields = Object.keys(obj).filter(function (key) {
+          return !isEmpty(obj[key]);
+        });
+        var paramString = notEmptyFields.reduce(function (query, key) {
+          var value = obj[key];
+          var like = likes.includes(key) ? '%' : '';
+
+          if (Array.isArray(value)) {
+            var values = value.map(function (v) {
+              return key + "=" + like + v + like;
+            }).join("&");
+            return "" + query + values + "&";
+          } else if (typeof value === "object") {
+            var params = objectToQueryParamString(value, likes);
+            params.split("&").forEach(function (param) {
+              query = query.concat(key + "." + param + "&");
+            });
+            return query;
+          } else {
+            return "" + query + key + "=" + like + value + like + "&";
+          }
+        }, "");
+        return paramString;
+      }
+
+      return {
+        all: function all(filters, likes, page) {
+          if (likes === void 0) {
+            likes = [];
+          }
+
+          var queryParams = page ? "?page=" + page + "&" : "?";
+          var filterQuery = objectToQueryParamString(filters, likes);
+          queryParams = "" + queryParams + filterQuery;
+          queryParams = queryParams.substring(0, queryParams.length - 1);
+          return http.GET("" + url + queryParams);
+        },
+        find: function find(id) {
+          return http.GET(url + "/" + id);
+        },
+        create: function create(form) {
+          var body = JSON.stringify(form);
+          return http.POST(url, body);
+        },
+        update: function update(form) {
+          var body = JSON.stringify(form);
+          return http.PUT(url + "/" + form.id, body);
+        },
+        updateProperty: function updateProperty(id, propertyName, form) {
+          var body = JSON.stringify(form);
+          return http.PUT(url + "/" + id + "/" + propertyName, body);
+        },
+        patch: function patch(id, form) {
+          var body = JSON.stringify(form);
+          return http.PATCH(url + "/" + id, body);
+        },
+        remove: function remove(id) {
+          return http.DELETE(url + "/" + id);
+        }
+      };
+    };
+
+    function _catch$1(body, recover) {
+      try {
+        var result = body();
+      } catch (e) {
+        return recover(e);
+      }
+
+      if (result && result.then) {
+        return result.then(void 0, recover);
+      }
+
+      return result;
+    }
+    /**
+     * Collection Context
+     */
+
+
+    var CollectionContext = React__default["default"].createContext();
+    var CollectionContextProvider = function CollectionContextProvider(props) {
+      var select = function select(id) {
+        try {
+          var _this2 = this;
+
+          var _temp2 = function () {
+            if (fetching) {
+              return Promise.resolve(_this2.fetch(id)).then(function (result) {
+                setSelected(result);
+              });
+            } else {
+              var result = _this2.all.find(function (item) {
+                return item.id === id;
+              });
+
+              setSelected(result);
+            }
+          }();
+
+          return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      };
+
+      var load = function load() {
+        try {
+          var runCustomFilters = function runCustomFilters(all) {
+            var cfs = Object.values(customFilters);
+            var data = cfs.length ? cfs.reduce(function (acc, filter) {
+              return filter(acc);
+            }, all) : all;
+            return data;
+          };
+
+          var _temp4 = _catch$1(function () {
+            return Promise.resolve(API.all(filters, likes, page)).then(function (response) {
+              var next = field ? response[field] : response;
+              var data = runCustomFilters(next);
+              setAll(data);
+            });
+          }, function (error) {
+            console.log(error);
+          });
+
+          return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      };
+
+      var host = props.host,
+          url = props.url,
+          page = props.page,
+          _props$fetching = props.fetching,
+          fetching = _props$fetching === void 0 ? true : _props$fetching,
+          field = props.field,
+          children = props.children;
+      var API = CollectionAPI(url, host);
+
+      var _useState = React.useState([]),
+          all = _useState[0],
+          setAll = _useState[1];
+
+      var _useState2 = React.useState({}),
+          filters = _useState2[0],
+          setFilters = _useState2[1];
+
+      var _useState3 = React.useState([]),
+          likes = _useState3[0],
+          setLikes = _useState3[1];
+
+      var _useState4 = React.useState({}),
+          customFilters = _useState4[0],
+          setCustomFilters = _useState4[1];
+
+      var _useState5 = React.useState([]),
+          queries = _useState5[0],
+          setQueries = _useState5[1];
+
+      var _useState6 = React.useState(null),
+          selected = _useState6[0],
+          setSelected = _useState6[1];
+
+      function addCustomFilter(id, filter) {
+        var _extends2;
+
+        setCustomFilters(_extends({}, customFilters, (_extends2 = {}, _extends2[id] = filter, _extends2)));
+      }
+
+      function removeCustomFilter(id) {
+        var next = _extends({}, customFilters);
+
+        delete next[id];
+        setCustomFilters(next);
+      }
+      /*
+          async function reloadSelection() {
+              const result = await this.fetch(this.selected.id)
+              this.selected = result
+          }
+      
+          async function fetch(id) {
+              try {
+                  const result = await API.find(id)
+                  return result
+              } catch (error) {
+                  console.log(error)
+              }
+          }
+      
+          function clear() {
+              this.selected = null
+          }
+      
+          async function create(form) {
+              try {
+                  if (versioning) form.version = 1
+                  await API.create(form);
+                  await this.load();
+              } catch (error) {
+                  console.log(error)
+              }
+              return
+          }
+      
+          async function update(form) {
+              try {
+                  if (versioning) form.version = form.version ? form.version + 1 : 1
+                  await API.update(form)
+                  await this.load()
+              } catch (error) {
+                  console.log(error)
+              }
+              return
+          }
+      
+          async function patch(id, form) {
+              try {
+                  if (versioning) form.version = form.version ? form.version + 1 : 1
+                  await API.patch(id, form)
+                  await this.load()
+              } catch (error) {
+                  console.log(error)
+              }
+              return
+          }
+      
+          async function updateProperty(id, propertyName, form) {
+              try {
+                  await API.updateProperty(id, propertyName, form)
+                  await this.load()
+              } catch (error) {
+                  console.log(error)
+              }
+              return
+          }
+      
+          async function remove(id) {
+              try {
+                  await API.remove(id)
+                  await this.load()
+              } catch (error) {
+                  console.log(error)
+              }
+              return
+          }
+      
+          */
+
+
+      var value = {
+        all: all,
+        load: load,
+        selected: selected,
+        select: select,
+        filters: filters,
+        setFilters: setFilters,
+        setLikes: setLikes,
+        customFilters: customFilters,
+        addCustomFilter: addCustomFilter,
+        removeCustomFilter: removeCustomFilter,
+        queries: queries,
+        setQueries: setQueries
+      };
+      return /*#__PURE__*/React__default["default"].createElement(CollectionContext.Provider, {
+        value: value
+      }, children);
+    };
+
+    /**
+     * FORMATS
+     */
+    var FORMATS = {
+      NONE: '',
+      DATE: 'date',
+      DATERANGE: 'DATERANGE',
+      TIME: 'time',
+      EMAIL: 'email',
+      HTML: 'HTML',
+      URL: 'URL',
+      IMG: 'IMG',
+      COLOR: 'COLOR',
+      TOKENS: 'TOKENS'
+    };
+
+    /**
+     * Dynamic Form
+     */
+
+    var DynamicForm = function DynamicForm(props) {
+      var schema = props.schema,
+          values = props.values,
+          onChange = props.onChange;
+
+      function change(id, value) {
+        if (onChange) onChange(id, value);
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "dynamic-form"
+      }, schema.map(function (field) {
+        var id = field.id;
+        return /*#__PURE__*/React__default["default"].createElement(DynamicFormField, {
+          key: id,
+          field: field,
+          value: values[id],
+          onChange: change
+        });
+      }));
+    };
+    /**
+     * Dynamic Form Field
+     */
+
+    var DynamicFormField = function DynamicFormField(props) {
+      var field = props.field,
+          value = props.value,
+          onChange = props.onChange;
+      var id = field.id,
+          type = field.type,
+          format = field.format,
+          options = field.options,
+          required = field.required;
+
+      function change(id, value) {
+        if (onChange) onChange(id, value);
+      }
+
+      function buildOptions() {
+        if (typeof options === "function") {
+          return options();
+        }
+
+        return options;
+      }
+
+      function renderByFormat() {
+        var label = required ? field.label + " *" : field.label;
+
+        switch (format) {
+          case FORMATS.DATE:
+            return /*#__PURE__*/React__default["default"].createElement(TextField, {
+              id: id,
+              label: label,
+              type: "date",
+              value: value,
+              onChange: change,
+              outlined: true
+            });
+
+          case FORMATS.TIME:
+            return /*#__PURE__*/React__default["default"].createElement(TextField, {
+              id: id,
+              label: label,
+              type: "time",
+              value: value,
+              onChange: change,
+              outlined: true
+            });
+
+          case FORMATS.DATERANGE:
+            return /*#__PURE__*/React__default["default"].createElement(DateRange, {
+              id: id,
+              label: label,
+              value: value,
+              onChange: change
+            });
+
+          case FORMATS.TOKENS:
+            return /*#__PURE__*/React__default["default"].createElement(TokenField, {
+              id: id,
+              label: label,
+              onChange: change,
+              options: buildOptions(),
+              tokens: value
+            });
+
+          case FORMATS.COLOR:
+            return /*#__PURE__*/React__default["default"].createElement(ColorField, {
+              id: id,
+              onChange: change,
+              value: value
+            });
+
+          default:
+            return options ? /*#__PURE__*/React__default["default"].createElement(DropDown, {
+              id: id,
+              label: label,
+              value: value,
+              onChange: change,
+              options: options,
+              outlined: true
+            }) : /*#__PURE__*/React__default["default"].createElement(TextField, {
+              id: id,
+              label: label,
+              value: value,
+              onChange: change,
+              outlined: true
+            });
+        }
+      }
+
+      function renderByType() {
+        switch (type) {
+          case "boolean":
+            return /*#__PURE__*/React__default["default"].createElement(CheckBox, {
+              id: id,
+              label: field.label,
+              value: value,
+              onChange: change
+            });
+
+          default:
+            return renderByFormat();
+        }
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "dynamic-form-field"
+      }, renderByType());
+    };
+
+    /*.
+     * Collection Filters
+     */
+
+    var CollectionFilters = function CollectionFilters(props) {
+      var schema = props.schema,
+          children = props.children;
+      var context = React.useContext(CollectionContext);
+      var filters = context.filters;
+
+      var _useState = React.useState(false),
+          open = _useState[0],
+          setOpen = _useState[1];
+
+      React.useEffect(function () {
+        context.setLikes(schema.filter(function (field) {
+          return field.like;
+        }).map(function (field) {
+          return field.id;
+        }));
+      }, [schema]);
+
+      function change(id, value) {
+        var _extends2;
+
+        context.setFilters(_extends({}, filters, (_extends2 = {}, _extends2[id] = value, _extends2)));
+      }
+
+      function toggle() {
+        setOpen(!open);
+      }
+
+      var toggleIcon = open ? "expand_less" : "expand_more";
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "collection-filters"
+      }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "custom-filters"
+      }, children), /*#__PURE__*/React__default["default"].createElement(CollectionFiltersResume, {
+        schema: schema
+      }), /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: toggleIcon,
+        clickable: true,
+        action: toggle
+      })), open ? /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "dynamic-filters"
+      }, /*#__PURE__*/React__default["default"].createElement(DynamicForm, {
+        schema: schema,
+        values: filters,
+        onChange: change
+      })) : null);
+    };
+
+    var CollectionFiltersResume = function CollectionFiltersResume(props) {
+      var schema = props.schema;
+      var context = React.useContext(CollectionContext);
+      var filters = context.filters;
+      var fields = Object.keys(filters);
+      if (!fields.length) return null;
+      return /*#__PURE__*/React__default["default"].createElement(Fragment, null, fields.filter(function (id) {
+        return filters[id] !== undefined && filters[id] !== null && filters[id] !== "";
+      }).map(function (id) {
+        var field = schema.find(function (field) {
+          return field.id === id;
+        });
+        var value = filters[id];
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "collection-filter-resume"
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "collection-filter-resume-label"
+        }, field.label, ":"), /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "collection-filter-resume-value"
+        }, value));
+      }));
+    };
+
+    /**
+     * Collection List
+     */
+
+    var CollectionList = function CollectionList(props) {
+      var context = React.useContext(CollectionContext);
+      var _context$all = context.all,
+          all = _context$all === void 0 ? [] : _context$all,
+          filters = context.filters,
+          customFilters = context.customFilters;
+      React.useEffect(function () {
+        context.load();
+      }, [filters, customFilters]);
+      var items = all.map(function (item) {
+        return {
+          icon: "folder",
+          line1: item.name,
+          meta: item.state
+        };
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "collection-list"
+      }, /*#__PURE__*/React__default["default"].createElement(List, {
+        items: items
+      }));
+    };
+
+    /**
+     * Collection Editor
+     */
+
+    var CollectionEditor = function CollectionEditor(props) {
+      React.useContext(CollectionContext);
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "collection-editor"
+      }, "editor");
+    };
+
+    /**
+     * Collection Page
+     */
+
+    var CollectionPage = function CollectionPage(props) {
+      var host = props.host,
+          url = props.url,
+          schema = props.schema,
+          layout = props.layout,
+          canFilter = props.canFilter,
+          customFilters = props.customFilters;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "collection-page " + layout
+      }, /*#__PURE__*/React__default["default"].createElement(CollectionContextProvider, {
+        host: host,
+        url: url
+      }, /*#__PURE__*/React__default["default"].createElement(Header, {
+        title: "CollectionPage"
+      }), canFilter ? /*#__PURE__*/React__default["default"].createElement(CollectionFilters, {
+        schema: schema
+      }, customFilters) : null, /*#__PURE__*/React__default["default"].createElement(CollectionList, null), /*#__PURE__*/React__default["default"].createElement(CollectionEditor, null)));
+    };
+
     /**
      * Wizard Context
      */
@@ -9967,7 +10545,7 @@
           _props$frequency = props.frequency,
           frequency = _props$frequency === void 0 ? 5000 : _props$frequency,
           children = props.children;
-      var API = CollectionAPI(url, host);
+      var API = CollectionAPI$1(url, host);
       var listeners = [];
 
       function addListener(taskId, listener) {
@@ -10127,12 +10705,12 @@
           id: "init",
           label: "Inicio",
           type: TYPES.STRING,
-          format: FORMATS.DATE
+          format: FORMATS$1.DATE
         }, {
           id: "end",
           label: "Fin",
           type: TYPES.STRING,
-          format: FORMATS.DATE
+          format: FORMATS$1.DATE
         }, {
           id: "resourceID",
           label: "Recurso"
@@ -10187,10 +10765,12 @@
     exports.Chip = Chip;
     exports.Chips = Chips;
     exports.CircularProgress = CircularProgress;
-    exports.CollectionContext = CollectionContext;
-    exports.CollectionEditor = CollectionEditor$1;
-    exports.CollectionFilters = CollectionFilters;
-    exports.CollectionPage = CollectionPage;
+    exports.CollectionContext = CollectionContext$1;
+    exports.CollectionContext2 = CollectionContext;
+    exports.CollectionEditor = CollectionEditor$2;
+    exports.CollectionFilters = CollectionFilters$1;
+    exports.CollectionPage = CollectionPage$1;
+    exports.CollectionPage2 = CollectionPage;
     exports.CollectionTree = CollectionTree;
     exports.ColorField = ColorField;
     exports.Content = Content;
@@ -10204,7 +10784,7 @@
     exports.DropDown = DropDown;
     exports.EditContentDialog = EditContentDialog;
     exports.EmptyMessage = EmptyMessage;
-    exports.FORMATS = FORMATS;
+    exports.FORMATS = FORMATS$1;
     exports.FieldEditor = FieldEditor;
     exports.FileExplorer = FileExplorer;
     exports.FilesGrid = FilesGrid;