ywana-core8 0.0.488 → 0.0.489

package/dist/index.modern.js

@@ -1,5 +1,5 @@
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
-import React, { useContext, useState, useEffect, Fragment, useMemo, useRef, Children } from 'react';
+import React, { useContext, useState, useEffect, Fragment, useMemo as useMemo$1, useRef, Children } from 'react';
 import RSwitch from 'react-switch';
 import moment from 'moment';
 import { extendMoment } from 'moment-range';
@@ -918,6 +918,242 @@ var Stack = function Stack(props) {
   return /*#__PURE__*/React.createElement(Fragment, null, child);
 };
 
+/**
+ * TYPES
+ */
+var TYPES$1 = {
+  STRING: 'String',
+  NUMBER: 'Number',
+  BOOLEAN: 'Boolean',
+  ARRAY: 'Array',
+  ENTITY: 'Object',
+  FUNCTION: 'Function'
+};
+/**
+ * FORMATS
+ */
+
+var FORMATS = {
+  NONE: '',
+  DATE: 'date',
+  DATERANGE: 'DATERANGE',
+  TIME: 'time',
+  EMAIL: 'email',
+  HTML: 'HTML',
+  URL: 'URL',
+  IMG: 'IMG',
+  COLOR: 'COLOR',
+  TOKENS: 'TOKENS'
+};
+/**
+ * CHECK
+ */
+
+var CHECK = Object.values(TYPES$1).reduce(function (obj, name) {
+  obj['is' + name] = function (x) {
+    return toString.call(x) == '[object ' + name + ']';
+  };
+
+  return obj;
+}, {});
+/**
+ * Content Type
+ */
+
+var ContentType = /*#__PURE__*/function () {
+  function ContentType(schema) {
+    this._schema = schema;
+  }
+
+  var _proto = ContentType.prototype;
+
+  _proto.checkType = function checkType(_ref, data) {
+    var type = _ref.type,
+        item = _ref.item;
+    var valid = true;
+    var validChildren = true;
+
+    if (item) {
+      var child = new ContentType(item);
+
+      switch (type) {
+        case TYPES$1.ARRAY:
+          valid = CHECK['is' + type](data);
+          validChildren = data.every(function (element) {
+            return child.validate(element);
+          });
+          break;
+
+        case TYPES$1.ENTITY:
+          valid = CHECK['is' + type](data);
+          validChildren = child.validate(data);
+          break;
+
+        case TYPES$1.NUMBER:
+          valid = CHECK['is' + type](data.value);
+          validChildren = true;
+          break;
+
+        default:
+          valid = true;
+          validChildren = true;
+      }
+    }
+
+    return valid && validChildren;
+  }
+  /**
+   * Validate entity data
+   * - Inspect required attributes only
+   * - Check attributes type
+   */
+  ;
+
+  _proto.validate = function validate(data) {
+    var _this = this;
+
+    var attributes = Object.entries(this._schema);
+    return attributes.filter(function (_ref2) {
+      var attr = _ref2[1];
+      return attr.required === true;
+    }).every(function (_ref3) {
+      var name = _ref3[0],
+          attr = _ref3[1];
+      return data[name] !== undefined ? _this.checkType(attr, data[name]) : false;
+    });
+  }
+  /**
+   * Content Type Form
+   */
+  ;
+
+  _proto.form = function form(data) {
+    var entries = Object.entries(this._schema);
+    var form = entries.reduce(function (form, _ref4) {
+      var id = _ref4[0],
+          field = _ref4[1];
+      form[id] = Object.assign({}, field, {
+        value: data[id] || field.defValue
+      });
+      return form;
+    }, {});
+    return form;
+  }
+  /**
+   * Content Type Sections
+   */
+  ;
+
+  _proto.sections = function sections(data) {
+    var form = this.form(data);
+    var fields = Object.values(form);
+    var sections = fields.reduce(function (sections, field) {
+      var section = field.section;
+      var title = section ? section : '';
+      if (!sections.hasOwnProperty(title)) sections[title] = {
+        title: title,
+        fields: []
+      };
+      sections[title].fields.push(field);
+      return sections;
+    }, {});
+    return Object.values(sections);
+  }
+  /**
+   * value 
+   */
+  ;
+
+  _proto.value = function value(data) {
+    var fields = Object.entries(this._schema);
+    var next = fields.reduce(function (next, _ref5) {
+      var name = _ref5[0],
+          field = _ref5[1];
+      var type = field.type,
+          item = field.item,
+          optional = field.optional;
+      var entryData = data ? data[name] : null;
+
+      switch (type) {
+        case TYPES$1.STRING:
+          next[name] = entryData || field["default"];
+          break;
+
+        case TYPES$1.NUMBER:
+          next[name] = entryData || field["default"];
+          break;
+
+        case TYPES$1.BOOLEAN:
+          next[name] = entryData || field["default"];
+          break;
+
+        case TYPES$1.ENTITY:
+          if (optional === true) console.log('OPTIONAL', field, !entryData);
+          if (optional === true && !entryData) break;
+          var child1 = new ContentType(item);
+          next[name] = child1.value(entryData);
+          break;
+
+        case TYPES$1.ARRAY:
+          if (item === TYPES$1.STRING) {
+            next[name] = entryData ? entryData : [];
+          } else {
+            var child2 = new ContentType(item);
+            next[name] = entryData ? entryData.map(function (data2) {
+              return child2.value(data2);
+            }) : [];
+          }
+
+          break;
+
+        default:
+          next[name] = field;
+          break;
+      }
+
+      return next;
+    }, {});
+    return next;
+  };
+
+  return ContentType;
+}();
+/**
+ * Content
+ */
+
+var Content = /*#__PURE__*/function () {
+  function Content(type, value) {
+    this.type = type;
+    this._type = new ContentType(type);
+    this._value = value;
+  }
+
+  var _proto2 = Content.prototype;
+
+  _proto2.isValid = function isValid() {
+    return this._type.validate(this._value);
+  };
+
+  _proto2.value = function value() {
+    return this._type.value(this._value);
+  };
+
+  _proto2.form = function form() {
+    return this._type.form(this._value);
+  };
+
+  _proto2.sections = function sections() {
+    return this._type.sections(this._value);
+  };
+
+  _proto2.update = function update(value) {
+    this._value = value;
+  };
+
+  return Content;
+}();
+
 /**
  * Text Field
  */
@@ -1095,387 +1331,127 @@ var DropDown = function DropDown(props) {
       setOpen = _useState[1];
 
   var _useState2 = useState(),
-      label = _useState2[0],
-      setLabel = _useState2[1];
-
-  useEffect(function () {
-    if (Array.isArray(options)) {
-      var option = options.find(function (option) {
-        return option.value === value;
-      });
-
-      var _label = option ? option.label : "";
-
-      setLabel(_label);
-    }
-  }, [value]);
-
-  function change(id, value) {
-    if (predictive) {
-      setLabel(value);
-    } else {
-      if (onChange) onChange(id, value);
-    }
-  }
-
-  function toggle() {
-    if (site && site.changeFocus) {
-      site.changeFocus({
-        lose: function lose() {
-          setOpen(false);
-        }
-      });
-    }
-
-    if (!readOnly) setOpen(!open);
-  }
-
-  function select(event) {
-    var next = event.target.getAttribute("value");
-    var option = options.find(function (option) {
-      return option.value === next;
-    });
-    setOpen(false);
-    var label = verbose ? option.label : "";
-    setLabel(label);
-    if (onChange) onChange(id, next);
-  }
-
-  function blur() {
-    if (onBlur) onBlur();
-  }
-
-  function renderOptions() {
-    var canShow = open == true && Array.isArray(options);
-
-    if (canShow) {
-      var filterActive = predictive === true && label && label.length > 0;
-      var items = filterActive ? options.filter(function (option) {
-        return option.label.toUpperCase().indexOf(label.toUpperCase()) >= 0;
-      }) : options;
-      var lis = items.map(function (option) {
-        return /*#__PURE__*/React.createElement("li", {
-          key: option.value,
-          value: option.value
-        }, option.label);
-      });
-      return /*#__PURE__*/React.createElement("menu", null, /*#__PURE__*/React.createElement("ul", {
-        onMouseDown: select
-      }, lis));
-    } else {
-      return null;
-    }
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: "dropdown"
-  }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
-    onClick: toggle,
-    value: label,
-    onChange: change,
-    onBlur: blur,
-    readOnly: !predictive
-  })), !readOnly ? /*#__PURE__*/React.createElement(Icon, {
-    icon: "expand_more",
-    clickable: true,
-    size: "small",
-    action: toggle
-  }) : null, renderOptions());
-};
-var DateRange = function DateRange(props) {
-  var id = props.id,
-      label = props.label,
-      onChange = props.onChange;
-
-  var _useState3 = useState({}),
-      form = _useState3[0],
-      setForm = _useState3[1];
-
-  useEffect(function () {
-    if (onChange) onChange(id, form);
-  }, [form]);
-
-  function change(id, value) {
-    var _Object$assign;
-
-    var next = Object.assign({}, form, (_Object$assign = {}, _Object$assign[id] = value, _Object$assign));
-    setForm(next);
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: "date-range"
-  }, label ? /*#__PURE__*/React.createElement("label", null, label) : null, /*#__PURE__*/React.createElement(TextField, {
-    id: "from",
-    type: "date",
-    label: "From",
-    value: form.from,
-    onChange: change
-  }), /*#__PURE__*/React.createElement(TextField, {
-    id: "to",
-    type: "date",
-    label: "To",
-    value: form.to,
-    onChange: change
-  }));
-};
-
-/**
- * TYPES
- */
-var TYPES = {
-  STRING: 'String',
-  NUMBER: 'Number',
-  BOOLEAN: 'Boolean',
-  ARRAY: 'Array',
-  ENTITY: 'Object',
-  FUNCTION: 'Function'
-};
-/**
- * FORMATS
- */
-
-var FORMATS = {
-  NONE: '',
-  DATE: 'date',
-  DATERANGE: 'DATERANGE',
-  TIME: 'time',
-  EMAIL: 'email',
-  HTML: 'HTML',
-  URL: 'URL',
-  IMG: 'IMG',
-  COLOR: 'COLOR',
-  TOKENS: 'TOKENS'
-};
-/**
- * CHECK
- */
-
-var CHECK = Object.values(TYPES).reduce(function (obj, name) {
-  obj['is' + name] = function (x) {
-    return toString.call(x) == '[object ' + name + ']';
-  };
-
-  return obj;
-}, {});
-/**
- * Content Type
- */
-
-var ContentType = /*#__PURE__*/function () {
-  function ContentType(schema) {
-    this._schema = schema;
-  }
-
-  var _proto = ContentType.prototype;
-
-  _proto.checkType = function checkType(_ref, data) {
-    var type = _ref.type,
-        item = _ref.item;
-    var valid = true;
-    var validChildren = true;
-
-    if (item) {
-      var child = new ContentType(item);
-
-      switch (type) {
-        case TYPES.ARRAY:
-          valid = CHECK['is' + type](data);
-          validChildren = data.every(function (element) {
-            return child.validate(element);
-          });
-          break;
-
-        case TYPES.ENTITY:
-          valid = CHECK['is' + type](data);
-          validChildren = child.validate(data);
-          break;
-
-        case TYPES.NUMBER:
-          valid = CHECK['is' + type](data.value);
-          validChildren = true;
-          break;
-
-        default:
-          valid = true;
-          validChildren = true;
-      }
-    }
-
-    return valid && validChildren;
-  }
-  /**
-   * Validate entity data
-   * - Inspect required attributes only
-   * - Check attributes type
-   */
-  ;
-
-  _proto.validate = function validate(data) {
-    var _this = this;
-
-    var attributes = Object.entries(this._schema);
-    return attributes.filter(function (_ref2) {
-      var attr = _ref2[1];
-      return attr.required === true;
-    }).every(function (_ref3) {
-      var name = _ref3[0],
-          attr = _ref3[1];
-      return data[name] !== undefined ? _this.checkType(attr, data[name]) : false;
-    });
-  }
-  /**
-   * Content Type Form
-   */
-  ;
-
-  _proto.form = function form(data) {
-    var entries = Object.entries(this._schema);
-    var form = entries.reduce(function (form, _ref4) {
-      var id = _ref4[0],
-          field = _ref4[1];
-      form[id] = Object.assign({}, field, {
-        value: data[id] || field.defValue
-      });
-      return form;
-    }, {});
-    return form;
-  }
-  /**
-   * Content Type Sections
-   */
-  ;
-
-  _proto.sections = function sections(data) {
-    var form = this.form(data);
-    var fields = Object.values(form);
-    var sections = fields.reduce(function (sections, field) {
-      var section = field.section;
-      var title = section ? section : '';
-      if (!sections.hasOwnProperty(title)) sections[title] = {
-        title: title,
-        fields: []
-      };
-      sections[title].fields.push(field);
-      return sections;
-    }, {});
-    return Object.values(sections);
-  }
-  /**
-   * value 
-   */
-  ;
-
-  _proto.value = function value(data) {
-    var fields = Object.entries(this._schema);
-    var next = fields.reduce(function (next, _ref5) {
-      var name = _ref5[0],
-          field = _ref5[1];
-      var type = field.type,
-          item = field.item,
-          optional = field.optional;
-      var entryData = data ? data[name] : null;
-
-      switch (type) {
-        case TYPES.STRING:
-          next[name] = entryData || field["default"];
-          break;
-
-        case TYPES.NUMBER:
-          next[name] = entryData || field["default"];
-          break;
-
-        case TYPES.BOOLEAN:
-          next[name] = entryData || field["default"];
-          break;
-
-        case TYPES.ENTITY:
-          if (optional === true) console.log('OPTIONAL', field, !entryData);
-          if (optional === true && !entryData) break;
-          var child1 = new ContentType(item);
-          next[name] = child1.value(entryData);
-          break;
-
-        case TYPES.ARRAY:
-          if (item === TYPES.STRING) {
-            next[name] = entryData ? entryData : [];
-          } else {
-            var child2 = new ContentType(item);
-            next[name] = entryData ? entryData.map(function (data2) {
-              return child2.value(data2);
-            }) : [];
-          }
-
-          break;
+      label = _useState2[0],
+      setLabel = _useState2[1];
 
-        default:
-          next[name] = field;
-          break;
-      }
+  useEffect(function () {
+    if (Array.isArray(options)) {
+      var option = options.find(function (option) {
+        return option.value === value;
+      });
 
-      return next;
-    }, {});
-    return next;
-  };
+      var _label = option ? option.label : "";
 
-  return ContentType;
-}();
-/**
- * Content
- */
+      setLabel(_label);
+    }
+  }, [value]);
 
-var Content = /*#__PURE__*/function () {
-  function Content(type, value) {
-    this.type = type;
-    this._type = new ContentType(type);
-    this._value = value;
+  function change(id, value) {
+    if (predictive) {
+      setLabel(value);
+    } else {
+      if (onChange) onChange(id, value);
+    }
   }
 
-  var _proto2 = Content.prototype;
-
-  _proto2.isValid = function isValid() {
-    return this._type.validate(this._value);
-  };
+  function toggle() {
+    if (site && site.changeFocus) {
+      site.changeFocus({
+        lose: function lose() {
+          setOpen(false);
+        }
+      });
+    }
 
-  _proto2.value = function value() {
-    return this._type.value(this._value);
-  };
+    if (!readOnly) setOpen(!open);
+  }
 
-  _proto2.form = function form() {
-    return this._type.form(this._value);
-  };
+  function select(event) {
+    var next = event.target.getAttribute("value");
+    var option = options.find(function (option) {
+      return option.value === next;
+    });
+    setOpen(false);
+    var label = verbose ? option.label : "";
+    setLabel(label);
+    if (onChange) onChange(id, next);
+  }
 
-  _proto2.sections = function sections() {
-    return this._type.sections(this._value);
-  };
+  function blur() {
+    if (onBlur) onBlur();
+  }
 
-  _proto2.update = function update(value) {
-    this._value = value;
-  };
+  function renderOptions() {
+    var canShow = open == true && Array.isArray(options);
 
-  return Content;
-}();
+    if (canShow) {
+      var filterActive = predictive === true && label && label.length > 0;
+      var items = filterActive ? options.filter(function (option) {
+        return option.label.toUpperCase().indexOf(label.toUpperCase()) >= 0;
+      }) : options;
+      var lis = items.map(function (option) {
+        return /*#__PURE__*/React.createElement("li", {
+          key: option.value,
+          value: option.value
+        }, option.label);
+      });
+      return /*#__PURE__*/React.createElement("menu", null, /*#__PURE__*/React.createElement("ul", {
+        onMouseDown: select
+      }, lis));
+    } else {
+      return null;
+    }
+  }
 
-var ColorField = function ColorField(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dropdown"
+  }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
+    onClick: toggle,
+    value: label,
+    onChange: change,
+    onBlur: blur,
+    readOnly: !predictive
+  })), !readOnly ? /*#__PURE__*/React.createElement(Icon, {
+    icon: "expand_more",
+    clickable: true,
+    size: "small",
+    action: toggle
+  }) : null, renderOptions());
+};
+var DateRange = function DateRange(props) {
   var id = props.id,
-      _props$label = props.label,
-      label = _props$label === void 0 ? "Color" : _props$label,
-      value = props.value,
+      label = props.label,
       onChange = props.onChange;
 
-  function change(event) {
-    var color = event.target.value;
-    if (onChange) onChange(id, color);
+  var _useState3 = useState({}),
+      form = _useState3[0],
+      setForm = _useState3[1];
+
+  useEffect(function () {
+    if (onChange) onChange(id, form);
+  }, [form]);
+
+  function change(id, value) {
+    var _Object$assign;
+
+    var next = Object.assign({}, form, (_Object$assign = {}, _Object$assign[id] = value, _Object$assign));
+    setForm(next);
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "color-field"
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: id
-  }, label), /*#__PURE__*/React.createElement("input", {
-    id: id,
-    type: "color",
-    onChange: change,
-    value: value
+    className: "date-range"
+  }, label ? /*#__PURE__*/React.createElement("label", null, label) : null, /*#__PURE__*/React.createElement(TextField, {
+    id: "from",
+    type: "date",
+    label: "From",
+    value: form.from,
+    onChange: change
+  }), /*#__PURE__*/React.createElement(TextField, {
+    id: "to",
+    type: "date",
+    label: "To",
+    value: form.to,
+    onChange: change
   }));
 };
 
@@ -1502,17 +1478,31 @@ var DataTable = function DataTable(props) {
       className = props.className;
 
   var _useState = useState({}),
-      sortDir = _useState[0];
+      sortDir = _useState[0],
+      setSortDir = _useState[1];
 
   var _useState2 = useState(false),
       allChecked = _useState2[0],
       setAllChecked = _useState2[1];
 
+  useEffect(function () {
+    console.log(sortDir);
+  }, [sortDir]);
+
+  function changeSort(id) {
+    var _Object$assign;
+
+    var nextDir = sortDir[id] ? sortDir[id] * -1 : 1;
+    var next = Object.assign({}, sortDir, (_Object$assign = {}, _Object$assign[id] = nextDir, _Object$assign));
+    setSortDir(next);
+  }
+
   function multiSort(array, sortObject) {
     if (sortObject === void 0) {
       sortObject = {};
     }
 
+    console.log('multisort', sortObject);
     var sortKeys = Object.keys(sortObject);
 
     if (!sortKeys.length) {
@@ -1555,7 +1545,7 @@ var DataTable = function DataTable(props) {
     }
   }
 
-  function sort(dragged, dropped) {
+  function moveRow(dragged, dropped) {
     if (onSort) onSort(dragged, dropped);
   }
 
@@ -1577,7 +1567,7 @@ var DataTable = function DataTable(props) {
         item = _ref.item,
         sortable = _ref.sortable;
 
-    var _ref2 = type === TYPES.ENTITY ? [1, Object.values(item).filter(function (v) {
+    var _ref2 = type === TYPES$1.ENTITY ? [1, Object.values(item).filter(function (v) {
       return v.column === true;
     }).length] : [2, 1],
         rowspan = _ref2[0],
@@ -1587,22 +1577,25 @@ var DataTable = function DataTable(props) {
       key: id,
       rowSpan: rowspan,
       colSpan: colspan
-    }, id === "checked" ? /*#__PURE__*/React.createElement(CheckBox, {
+    }, /*#__PURE__*/React.createElement("div", null, id === "checked" ? /*#__PURE__*/React.createElement(CheckBox, {
       onChange: checkAll,
       value: allChecked
     }) : /*#__PURE__*/React.createElement(Text, {
       key: "th_" + id
     }, label), sortable ? /*#__PURE__*/React.createElement(Icon, {
-      icon: "arrow_up",
+      icon: "expand_less",
       size: "small",
-      clickable: true
-    }) : null);
+      clickable: true,
+      action: function action() {
+        return changeSort(id);
+      }
+    }) : null));
   }), /*#__PURE__*/React.createElement("th", {
     rowSpan: 2,
     colSpan: 1
   })), /*#__PURE__*/React.createElement("tr", null, columns.filter(function (_ref3) {
     var type = _ref3.type;
-    return type === TYPES.ENTITY;
+    return type === TYPES$1.ENTITY;
   }).map(function (column) {
     var item = column.item;
     var fields = item ? Object.values(item) : [];
@@ -1617,7 +1610,7 @@ var DataTable = function DataTable(props) {
       row: row,
       columns: columns,
       onSelect: select,
-      onDrop: sort,
+      onDrop: moveRow,
       editable: editable,
       expanded: expanded
     });
@@ -1815,7 +1808,7 @@ var DataTableCell = function DataTableCell(_ref4) {
     }
   };
 
-  return column.type === TYPES.ENTITY ? /*#__PURE__*/React.createElement(EntityCellViewer, {
+  return column.type === TYPES$1.ENTITY ? /*#__PURE__*/React.createElement(EntityCellViewer, {
     id: column.id,
     item: column.item,
     value: cell
@@ -2620,7 +2613,7 @@ var Planner = function Planner(_ref) {
     if (onSelectCell) onSelectCell(lane, date);
   }
 
-  var period = useMemo(function () {
+  var period = useMemo$1(function () {
     var start = ranges(from, "YYYY-MM-DD");
     var end = ranges(to, "YYYY-MM-DD");
     var range = ranges.range(start, end);
@@ -2971,7 +2964,7 @@ var Uploader = function Uploader(_ref) {
       onSuccess = _ref.onSuccess,
       onError = _ref.onError,
       onComplete = _ref.onComplete;
-  var resumable = useMemo(function () {
+  var resumable = useMemo$1(function () {
     var config = {
       target: target,
       chunkSize: 1 * 1024 * 1024,
@@ -3713,12 +3706,12 @@ var ContentFormField = function ContentFormField(props) {
   var type = props.type;
 
   switch (type) {
-    case TYPES.BOOLEAN:
+    case TYPES$1.BOOLEAN:
       return /*#__PURE__*/React.createElement(CheckBox, _extends({
         key: props.id
       }, props));
 
-    case TYPES.NUMBER:
+    case TYPES$1.NUMBER:
       return /*#__PURE__*/React.createElement(NumberField, _extends({
         key: props.id
       }, props));
@@ -3747,7 +3740,7 @@ var StringField = function StringField(_ref2) {
       value = _ref2.value,
       onChange = _ref2.onChange,
       outlined = _ref2.outlined;
-  var fieldTypes = (_fieldTypes = {}, _fieldTypes[TYPES.NUMBER] = 'number', _fieldTypes[TYPES.DATE] = 'date', _fieldTypes);
+  var fieldTypes = (_fieldTypes = {}, _fieldTypes[TYPES$1.NUMBER] = 'number', _fieldTypes[TYPES$1.DATE] = 'date', _fieldTypes);
 
   function buildOptions() {
     var opts = typeof options === 'function' ? options() : options;
@@ -3816,6 +3809,30 @@ var NumberField = function NumberField(_ref3) {
   });
 };
 
+var ColorField = function ColorField(props) {
+  var id = props.id,
+      _props$label = props.label,
+      label = _props$label === void 0 ? "Color" : _props$label,
+      value = props.value,
+      onChange = props.onChange;
+
+  function change(event) {
+    var color = event.target.value;
+    if (onChange) onChange(id, color);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "color-field"
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: id
+  }, label), /*#__PURE__*/React.createElement("input", {
+    id: id,
+    type: "color",
+    onChange: change,
+    value: value
+  }));
+};
+
 /**
  * Content Editor
  */
@@ -3956,7 +3973,7 @@ var TreededContentEditor = function TreededContentEditor(_ref3) {
       onChange = _ref3.onChange;
   var value = content.value();
   var nodes = Object.values(content.type).filter(function (field) {
-    return field.type === TYPES.ARRAY;
+    return field.type === TYPES$1.ARRAY;
   });
 
   var _useState2 = useState(),
@@ -4043,14 +4060,14 @@ var FieldEditor = function FieldEditor(_ref4) {
       return null;
     } else {
       switch (type) {
-        case TYPES.ENTITY:
+        case TYPES$1.ENTITY:
           return /*#__PURE__*/React.createElement(EntityEditor, {
             field: field,
             value: value1,
             onChange: change
           });
 
-        case TYPES.STRING:
+        case TYPES$1.STRING:
           return /*#__PURE__*/React.createElement(StringEditor, {
             outlined: outlined,
             field: field,
@@ -4059,7 +4076,7 @@ var FieldEditor = function FieldEditor(_ref4) {
             content: content
           });
 
-        case TYPES.BOOLEAN:
+        case TYPES$1.BOOLEAN:
           return /*#__PURE__*/React.createElement(CheckBox, {
             outlined: true,
             id: id,
@@ -4068,7 +4085,7 @@ var FieldEditor = function FieldEditor(_ref4) {
             onChange: change
           });
 
-        case TYPES.NUMBER:
+        case TYPES$1.NUMBER:
           return /*#__PURE__*/React.createElement(NumberEditor, {
             outlined: outlined,
             field: field,
@@ -4076,8 +4093,8 @@ var FieldEditor = function FieldEditor(_ref4) {
             onChange: change
           });
 
-        case TYPES.ARRAY:
-          return item === TYPES.STRING ? options ? /*#__PURE__*/React.createElement(MultiSelectionEditor, {
+        case TYPES$1.ARRAY:
+          return item === TYPES$1.STRING ? options ? /*#__PURE__*/React.createElement(MultiSelectionEditor, {
             content: content,
             field: field,
             value: value1,
@@ -4864,17 +4881,70 @@ var CollectionPage = function CollectionPage(props) {
     delay: delay
   }), children ? /*#__PURE__*/React.createElement("article", null, children) : null));
 };
-
 var CollectionFilters = function CollectionFilters(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "collection-filters"
-  }, "TODO: filters");
+  var change = function change(next) {
+    try {
+      setForm(next);
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var schema = props.schema,
+      onChange = props.onChange;
+
+  var _useState = useState({}),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  var filterSchema = useMemo(function () {
+    var filterSchema = Object.assign({}, schema);
+
+    for (var key in filterSchema) {
+      if (filterSchema[key].filter === false) {
+        delete filterSchema[key];
+      } else {
+        if (filterSchema[key].type === TYPES.ENTITY) {
+          var fs = filterSchema[key].item;
+
+          for (var key in fs) {
+            if (fs[key].filter === false) delete fs[key];
+          }
+        }
+      }
+    }
+
+    return filterSchema;
+  }, [schema]);
+  useEffect(function () {
+    if (onChange) onChange(form);
+  }, [form]);
+
+  function clear() {
+    change({});
+  }
+
+  var content = new Content(filterSchema, form);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    className: "table-filters",
+    title: /*#__PURE__*/React.createElement(Text, null, "Filters")
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "filter_list_off",
+    size: "small",
+    clickable: true,
+    action: clear
+  })), /*#__PURE__*/React.createElement("main", {
+    className: "table-filters"
+  }, /*#__PURE__*/React.createElement(ContentEditor, {
+    content: content,
+    onChange: change
+  })));
 };
 /**
  * Collection List
  */
 
-
 var CollectionList = function CollectionList(props) {
   var select = function select(id) {
     try {
@@ -5044,9 +5114,9 @@ var CollectionEditor = function CollectionEditor(props) {
       delay = _props$delay2 === void 0 ? 1000 : _props$delay2;
   var timer = useRef(null);
 
-  var _useState = useState(selected),
-      form = _useState[0],
-      setForm = _useState[1];
+  var _useState2 = useState(selected),
+      form = _useState2[0],
+      setForm = _useState2[1];
 
   useEffect(function () {
     setForm(selected);
@@ -5374,19 +5444,19 @@ var FieldViewer = function FieldViewer(props) {
   if (optional && value === undefined) return null;
 
   switch (type) {
-    case TYPES.STRING:
+    case TYPES$1.STRING:
       return /*#__PURE__*/React.createElement(Property, {
         label: label,
         value: value
       });
 
-    case TYPES.ENTITY:
+    case TYPES$1.ENTITY:
       return /*#__PURE__*/React.createElement(EntityViewer, {
         field: field,
         value: value
       });
 
-    case TYPES.ARRAY:
+    case TYPES$1.ARRAY:
       return /*#__PURE__*/React.createElement(ArrayViewer, {
         label: label,
         item: item,
@@ -5451,12 +5521,12 @@ var ArrayViewer = function ArrayViewer(props) {
 var QUERY = {
   id: {
     id: "id",
-    type: TYPES.STRING,
+    type: TYPES$1.STRING,
     editable: false
   },
   name: {
     id: "name",
-    type: TYPES.STRING,
+    type: TYPES$1.STRING,
     required: true,
     label: "Name"
   }
@@ -5949,14 +6019,14 @@ var TableFilters$1 = function TableFilters(props) {
       form = _useState3[0],
       setForm = _useState3[1];
 
-  var filterSchema = useMemo(function () {
+  var filterSchema = useMemo$1(function () {
     var filterSchema = Object.assign({}, schema);
 
     for (var key in filterSchema) {
       if (filterSchema[key].filter === false) {
         delete filterSchema[key];
       } else {
-        if (filterSchema[key].type === TYPES.ENTITY) {
+        if (filterSchema[key].type === TYPES$1.ENTITY) {
           var fs = filterSchema[key].item;
 
           for (var key in fs) {
@@ -7017,14 +7087,14 @@ var TableFilters = function TableFilters(props) {
       form = _useState4[0],
       setForm = _useState4[1];
 
-  var filterSchema = useMemo(function () {
+  var filterSchema = useMemo$1(function () {
     var filterSchema = Object.assign({}, schema);
 
     for (var key in filterSchema) {
       if (filterSchema[key].filter === false) {
         delete filterSchema[key];
       } else {
-        if (filterSchema[key].type === TYPES.ENTITY) {
+        if (filterSchema[key].type === TYPES$1.ENTITY) {
           var fs = filterSchema[key].item;
 
           for (var key in fs) {
@@ -7038,7 +7108,7 @@ var TableFilters = function TableFilters(props) {
     delete filterSchema.flows;
     return filterSchema;
   }, [schema]);
-  var likes = useMemo(function () {
+  var likes = useMemo$1(function () {
     var fields = Object.values(schema);
     return fields.reduce(function (likes, field) {
       if (field.like === true) likes.push(field.id);
@@ -7575,5 +7645,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Avatar, Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionPage, CollectionTree, Content, ContentEditor, ContentForm, CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FORMATS, FieldEditor, FileExplorer, FileIconsView, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TEXTFORMATS, TYPES, Tab, TabbedContentEditor, TabbedTablePage, TableEditor$1 as TableEditor, TablePage, Tabs, Text, TextArea, TextField, Thumbnail, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, UploadIcon, Uploader, View, Viewer, WaitScreen, isFunction };
+export { Avatar, Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionFilters, CollectionPage, CollectionTree, Content, ContentEditor, ContentForm, CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FORMATS, FieldEditor, FileExplorer, FileIconsView, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TableEditor$1 as TableEditor, TablePage, Tabs, Text, TextArea, TextField, Thumbnail, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, UploadIcon, Uploader, View, Viewer, WaitScreen, isFunction };
 //# sourceMappingURL=index.modern.js.map