ywana-core8 0.0.488 → 0.0.489

package/dist/index.umd.js

@@ -921,311 +921,10 @@
     return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, child);
   };
 
-  /**
-   * Text Field
-   */
-
-  var TextField = function TextField(props) {
-    var site = React.useContext(SiteContext);
-    var id = props.id,
-        _props$type = props.type,
-        type = _props$type === void 0 ? 'text' : _props$type,
-        label = props.label,
-        placeholder = props.placeholder,
-        value = props.value,
-        outlined = props.outlined,
-        _props$readOnly = props.readOnly,
-        readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
-        _props$canClear = props.canClear,
-        canClear = _props$canClear === void 0 ? true : _props$canClear,
-        onChange = props.onChange,
-        onEnter = props.onEnter,
-        onClick = props.onClick,
-        onBlur = props.onBlur;
-
-    function onKeyPress(event) {
-      var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
-
-      if (key == 13) {
-        if (onEnter) onEnter();
-      }
-    }
-
-    function change(event) {
-      event.stopPropagation();
-      event.preventDefault();
-      var value = event.target.value;
-      if (onChange) onChange(id, value);
-    }
-
-    function focus() {
-      if (site && site.changeFocus) {
-        site.changeFocus({
-          lose: function lose() {// DO NOTHING
-          }
-        });
-      }
-    }
-
-    function blur() {
-      if (onBlur) onBlur();
-    }
-
-    function clear() {
-      if (onChange) onChange(id, "");
-    }
-
-    var borderStyle = outlined ? "textfield-outlined" : "textfield";
-    var labelStyle = label ? "" : "no-label";
-    var style = labelStyle + " " + borderStyle + " textfield-" + type;
-    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "" + style,
-      onClick: onClick
-    }, /*#__PURE__*/React__default["default"].createElement("input", {
-      id: id,
-      type: type,
-      placeholder: placeholder,
-      value: value,
-      required: true,
-      onChange: change,
-      onKeyDown: onKeyPress,
-      onFocus: focus,
-      onBlur: blur,
-      readOnly: readOnly
-    }), canClear && value && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-      icon: "close",
-      clickable: true,
-      size: "small",
-      action: clear
-    }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "bar"
-    }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
-  };
-  /**
-   * Text Area
-   */
-
-  var TextArea = function TextArea(props) {
-    var site = React.useContext(SiteContext);
-    var id = props.id,
-        _props$type2 = props.type,
-        type = _props$type2 === void 0 ? 'text' : _props$type2,
-        label = props.label,
-        placeholder = props.placeholder,
-        value = props.value,
-        _props$readOnly2 = props.readOnly,
-        readOnly = _props$readOnly2 === void 0 ? false : _props$readOnly2,
-        _props$canClear2 = props.canClear,
-        canClear = _props$canClear2 === void 0 ? true : _props$canClear2,
-        onChange = props.onChange,
-        onEnter = props.onEnter,
-        onClick = props.onClick;
-
-    function onKeyPress(event) {
-      var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
-
-      if (key == 13) {
-        if (onEnter) onEnter();
-      }
-    }
-
-    function change(event) {
-      event.stopPropagation();
-      event.preventDefault();
-      var value = event.target.value;
-      if (onChange) onChange(id, value);
-    }
-
-    function focus() {
-      if (site && site.changeFocus) {
-        site.changeFocus({
-          lose: function lose() {// DO NOTHING
-          }
-        });
-      }
-    }
-
-    function clear() {
-      if (onChange) onChange(id, "");
-    }
-
-    var labelStyle = label ? "" : "no-label";
-    var style = "textarea " + labelStyle + " textarea-" + type;
-    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "" + style,
-      onClick: onClick
-    }, /*#__PURE__*/React__default["default"].createElement("textarea", {
-      id: id,
-      placeholder: placeholder,
-      value: value,
-      required: true,
-      onChange: change,
-      onKeyDown: onKeyPress,
-      onFocus: focus,
-      readOnly: readOnly
-    }), canClear && value && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-      icon: "close",
-      clickable: true,
-      size: "small",
-      action: clear
-    }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "bar"
-    }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
-  };
-  /**
-   * Dropdown
-   */
-
-  var DropDown = function DropDown(props) {
-    var site = React.useContext(SiteContext);
-    var id = props.id,
-        _props$options = props.options,
-        options = _props$options === void 0 ? [] : _props$options,
-        value = props.value,
-        onChange = props.onChange,
-        _props$predictive = props.predictive,
-        predictive = _props$predictive === void 0 ? false : _props$predictive,
-        _props$readOnly3 = props.readOnly,
-        readOnly = _props$readOnly3 === void 0 ? false : _props$readOnly3,
-        _props$verbose = props.verbose,
-        verbose = _props$verbose === void 0 ? true : _props$verbose,
-        onBlur = props.onBlur;
-
-    var _useState = React.useState(false),
-        open = _useState[0],
-        setOpen = _useState[1];
-
-    var _useState2 = React.useState(),
-        label = _useState2[0],
-        setLabel = _useState2[1];
-
-    React.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__default["default"].createElement("li", {
-            key: option.value,
-            value: option.value
-          }, option.label);
-        });
-        return /*#__PURE__*/React__default["default"].createElement("menu", null, /*#__PURE__*/React__default["default"].createElement("ul", {
-          onMouseDown: select
-        }, lis));
-      } else {
-        return null;
-      }
-    }
-
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "dropdown"
-    }, /*#__PURE__*/React__default["default"].createElement(TextField, _extends({}, props, {
-      onClick: toggle,
-      value: label,
-      onChange: change,
-      onBlur: blur,
-      readOnly: !predictive
-    })), !readOnly ? /*#__PURE__*/React__default["default"].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 = React.useState({}),
-        form = _useState3[0],
-        setForm = _useState3[1];
-
-    React.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__default["default"].createElement("div", {
-      className: "date-range"
-    }, label ? /*#__PURE__*/React__default["default"].createElement("label", null, label) : null, /*#__PURE__*/React__default["default"].createElement(TextField, {
-      id: "from",
-      type: "date",
-      label: "From",
-      value: form.from,
-      onChange: change
-    }), /*#__PURE__*/React__default["default"].createElement(TextField, {
-      id: "to",
-      type: "date",
-      label: "To",
-      value: form.to,
-      onChange: change
-    }));
-  };
-
   /**
    * TYPES
    */
-  var TYPES = {
+  var TYPES$1 = {
     STRING: 'String',
     NUMBER: 'Number',
     BOOLEAN: 'Boolean',
@@ -1253,7 +952,7 @@
    * CHECK
    */
 
-  var CHECK = Object.values(TYPES).reduce(function (obj, name) {
+  var CHECK = Object.values(TYPES$1).reduce(function (obj, name) {
     obj['is' + name] = function (x) {
       return toString.call(x) == '[object ' + name + ']';
     };
@@ -1281,19 +980,19 @@
         var child = new ContentType(item);
 
         switch (type) {
-          case TYPES.ARRAY:
+          case TYPES$1.ARRAY:
             valid = CHECK['is' + type](data);
             validChildren = data.every(function (element) {
               return child.validate(element);
             });
             break;
 
-          case TYPES.ENTITY:
+          case TYPES$1.ENTITY:
             valid = CHECK['is' + type](data);
             validChildren = child.validate(data);
             break;
 
-          case TYPES.NUMBER:
+          case TYPES$1.NUMBER:
             valid = CHECK['is' + type](data.value);
             validChildren = true;
             break;
@@ -1379,27 +1078,27 @@
         var entryData = data ? data[name] : null;
 
         switch (type) {
-          case TYPES.STRING:
+          case TYPES$1.STRING:
             next[name] = entryData || field["default"];
             break;
 
-          case TYPES.NUMBER:
+          case TYPES$1.NUMBER:
             next[name] = entryData || field["default"];
             break;
 
-          case TYPES.BOOLEAN:
+          case TYPES$1.BOOLEAN:
             next[name] = entryData || field["default"];
             break;
 
-          case TYPES.ENTITY:
+          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.ARRAY:
-            if (item === TYPES.STRING) {
+          case TYPES$1.ARRAY:
+            if (item === TYPES$1.STRING) {
               next[name] = entryData ? entryData : [];
             } else {
               var child2 = new ContentType(item);
@@ -1408,77 +1107,354 @@
               }) : [];
             }
 
-            break;
+            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
+   */
+
+  var TextField = function TextField(props) {
+    var site = React.useContext(SiteContext);
+    var id = props.id,
+        _props$type = props.type,
+        type = _props$type === void 0 ? 'text' : _props$type,
+        label = props.label,
+        placeholder = props.placeholder,
+        value = props.value,
+        outlined = props.outlined,
+        _props$readOnly = props.readOnly,
+        readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+        _props$canClear = props.canClear,
+        canClear = _props$canClear === void 0 ? true : _props$canClear,
+        onChange = props.onChange,
+        onEnter = props.onEnter,
+        onClick = props.onClick,
+        onBlur = props.onBlur;
+
+    function onKeyPress(event) {
+      var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
+
+      if (key == 13) {
+        if (onEnter) onEnter();
+      }
+    }
+
+    function change(event) {
+      event.stopPropagation();
+      event.preventDefault();
+      var value = event.target.value;
+      if (onChange) onChange(id, value);
+    }
+
+    function focus() {
+      if (site && site.changeFocus) {
+        site.changeFocus({
+          lose: function lose() {// DO NOTHING
+          }
+        });
+      }
+    }
+
+    function blur() {
+      if (onBlur) onBlur();
+    }
+
+    function clear() {
+      if (onChange) onChange(id, "");
+    }
+
+    var borderStyle = outlined ? "textfield-outlined" : "textfield";
+    var labelStyle = label ? "" : "no-label";
+    var style = labelStyle + " " + borderStyle + " textfield-" + type;
+    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "" + style,
+      onClick: onClick
+    }, /*#__PURE__*/React__default["default"].createElement("input", {
+      id: id,
+      type: type,
+      placeholder: placeholder,
+      value: value,
+      required: true,
+      onChange: change,
+      onKeyDown: onKeyPress,
+      onFocus: focus,
+      onBlur: blur,
+      readOnly: readOnly
+    }), canClear && value && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "close",
+      clickable: true,
+      size: "small",
+      action: clear
+    }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "bar"
+    }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
+  };
+  /**
+   * Text Area
+   */
+
+  var TextArea = function TextArea(props) {
+    var site = React.useContext(SiteContext);
+    var id = props.id,
+        _props$type2 = props.type,
+        type = _props$type2 === void 0 ? 'text' : _props$type2,
+        label = props.label,
+        placeholder = props.placeholder,
+        value = props.value,
+        _props$readOnly2 = props.readOnly,
+        readOnly = _props$readOnly2 === void 0 ? false : _props$readOnly2,
+        _props$canClear2 = props.canClear,
+        canClear = _props$canClear2 === void 0 ? true : _props$canClear2,
+        onChange = props.onChange,
+        onEnter = props.onEnter,
+        onClick = props.onClick;
+
+    function onKeyPress(event) {
+      var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
+
+      if (key == 13) {
+        if (onEnter) onEnter();
+      }
+    }
+
+    function change(event) {
+      event.stopPropagation();
+      event.preventDefault();
+      var value = event.target.value;
+      if (onChange) onChange(id, value);
+    }
+
+    function focus() {
+      if (site && site.changeFocus) {
+        site.changeFocus({
+          lose: function lose() {// DO NOTHING
+          }
+        });
+      }
+    }
+
+    function clear() {
+      if (onChange) onChange(id, "");
+    }
+
+    var labelStyle = label ? "" : "no-label";
+    var style = "textarea " + labelStyle + " textarea-" + type;
+    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "" + style,
+      onClick: onClick
+    }, /*#__PURE__*/React__default["default"].createElement("textarea", {
+      id: id,
+      placeholder: placeholder,
+      value: value,
+      required: true,
+      onChange: change,
+      onKeyDown: onKeyPress,
+      onFocus: focus,
+      readOnly: readOnly
+    }), canClear && value && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "close",
+      clickable: true,
+      size: "small",
+      action: clear
+    }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "bar"
+    }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
+  };
+  /**
+   * Dropdown
+   */
+
+  var DropDown = function DropDown(props) {
+    var site = React.useContext(SiteContext);
+    var id = props.id,
+        _props$options = props.options,
+        options = _props$options === void 0 ? [] : _props$options,
+        value = props.value,
+        onChange = props.onChange,
+        _props$predictive = props.predictive,
+        predictive = _props$predictive === void 0 ? false : _props$predictive,
+        _props$readOnly3 = props.readOnly,
+        readOnly = _props$readOnly3 === void 0 ? false : _props$readOnly3,
+        _props$verbose = props.verbose,
+        verbose = _props$verbose === void 0 ? true : _props$verbose,
+        onBlur = props.onBlur;
+
+    var _useState = React.useState(false),
+        open = _useState[0],
+        setOpen = _useState[1];
+
+    var _useState2 = React.useState(),
+        label = _useState2[0],
+        setLabel = _useState2[1];
 
-          default:
-            next[name] = field;
-            break;
-        }
+    React.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__default["default"].createElement("li", {
+            key: option.value,
+            value: option.value
+          }, option.label);
+        });
+        return /*#__PURE__*/React__default["default"].createElement("menu", null, /*#__PURE__*/React__default["default"].createElement("ul", {
+          onMouseDown: select
+        }, lis));
+      } else {
+        return null;
+      }
+    }
 
-  var ColorField = function ColorField(props) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "dropdown"
+    }, /*#__PURE__*/React__default["default"].createElement(TextField, _extends({}, props, {
+      onClick: toggle,
+      value: label,
+      onChange: change,
+      onBlur: blur,
+      readOnly: !predictive
+    })), !readOnly ? /*#__PURE__*/React__default["default"].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 = React.useState({}),
+        form = _useState3[0],
+        setForm = _useState3[1];
+
+    React.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__default["default"].createElement("div", {
-      className: "color-field"
-    }, /*#__PURE__*/React__default["default"].createElement("label", {
-      htmlFor: id
-    }, label), /*#__PURE__*/React__default["default"].createElement("input", {
-      id: id,
-      type: "color",
-      onChange: change,
-      value: value
+      className: "date-range"
+    }, label ? /*#__PURE__*/React__default["default"].createElement("label", null, label) : null, /*#__PURE__*/React__default["default"].createElement(TextField, {
+      id: "from",
+      type: "date",
+      label: "From",
+      value: form.from,
+      onChange: change
+    }), /*#__PURE__*/React__default["default"].createElement(TextField, {
+      id: "to",
+      type: "date",
+      label: "To",
+      value: form.to,
+      onChange: change
     }));
   };
 
@@ -1505,17 +1481,31 @@
         className = props.className;
 
     var _useState = React.useState({}),
-        sortDir = _useState[0];
+        sortDir = _useState[0],
+        setSortDir = _useState[1];
 
     var _useState2 = React.useState(false),
         allChecked = _useState2[0],
         setAllChecked = _useState2[1];
 
+    React.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) {
@@ -1558,7 +1548,7 @@
       }
     }
 
-    function sort(dragged, dropped) {
+    function moveRow(dragged, dropped) {
       if (onSort) onSort(dragged, dropped);
     }
 
@@ -1580,7 +1570,7 @@
           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],
@@ -1590,22 +1580,25 @@
         key: id,
         rowSpan: rowspan,
         colSpan: colspan
-      }, id === "checked" ? /*#__PURE__*/React__default["default"].createElement(CheckBox, {
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, id === "checked" ? /*#__PURE__*/React__default["default"].createElement(CheckBox, {
         onChange: checkAll,
         value: allChecked
       }) : /*#__PURE__*/React__default["default"].createElement(Text, {
         key: "th_" + id
       }, label), sortable ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-        icon: "arrow_up",
+        icon: "expand_less",
         size: "small",
-        clickable: true
-      }) : null);
+        clickable: true,
+        action: function action() {
+          return changeSort(id);
+        }
+      }) : null));
     }), /*#__PURE__*/React__default["default"].createElement("th", {
       rowSpan: 2,
       colSpan: 1
     })), /*#__PURE__*/React__default["default"].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) : [];
@@ -1620,7 +1613,7 @@
         row: row,
         columns: columns,
         onSelect: select,
-        onDrop: sort,
+        onDrop: moveRow,
         editable: editable,
         expanded: expanded
       });
@@ -1818,7 +1811,7 @@
       }
     };
 
-    return column.type === TYPES.ENTITY ? /*#__PURE__*/React__default["default"].createElement(EntityCellViewer, {
+    return column.type === TYPES$1.ENTITY ? /*#__PURE__*/React__default["default"].createElement(EntityCellViewer, {
       id: column.id,
       item: column.item,
       value: cell
@@ -3716,12 +3709,12 @@
     var type = props.type;
 
     switch (type) {
-      case TYPES.BOOLEAN:
+      case TYPES$1.BOOLEAN:
         return /*#__PURE__*/React__default["default"].createElement(CheckBox, _extends({
           key: props.id
         }, props));
 
-      case TYPES.NUMBER:
+      case TYPES$1.NUMBER:
         return /*#__PURE__*/React__default["default"].createElement(NumberField, _extends({
           key: props.id
         }, props));
@@ -3750,7 +3743,7 @@
         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;
@@ -3819,6 +3812,30 @@
     });
   };
 
+  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__default["default"].createElement("div", {
+      className: "color-field"
+    }, /*#__PURE__*/React__default["default"].createElement("label", {
+      htmlFor: id
+    }, label), /*#__PURE__*/React__default["default"].createElement("input", {
+      id: id,
+      type: "color",
+      onChange: change,
+      value: value
+    }));
+  };
+
   /**
    * Content Editor
    */
@@ -3959,7 +3976,7 @@
         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 = React.useState(),
@@ -4046,14 +4063,14 @@
         return null;
       } else {
         switch (type) {
-          case TYPES.ENTITY:
+          case TYPES$1.ENTITY:
             return /*#__PURE__*/React__default["default"].createElement(EntityEditor, {
               field: field,
               value: value1,
               onChange: change
             });
 
-          case TYPES.STRING:
+          case TYPES$1.STRING:
             return /*#__PURE__*/React__default["default"].createElement(StringEditor, {
               outlined: outlined,
               field: field,
@@ -4062,7 +4079,7 @@
               content: content
             });
 
-          case TYPES.BOOLEAN:
+          case TYPES$1.BOOLEAN:
             return /*#__PURE__*/React__default["default"].createElement(CheckBox, {
               outlined: true,
               id: id,
@@ -4071,7 +4088,7 @@
               onChange: change
             });
 
-          case TYPES.NUMBER:
+          case TYPES$1.NUMBER:
             return /*#__PURE__*/React__default["default"].createElement(NumberEditor, {
               outlined: outlined,
               field: field,
@@ -4079,8 +4096,8 @@
               onChange: change
             });
 
-          case TYPES.ARRAY:
-            return item === TYPES.STRING ? options ? /*#__PURE__*/React__default["default"].createElement(MultiSelectionEditor, {
+          case TYPES$1.ARRAY:
+            return item === TYPES$1.STRING ? options ? /*#__PURE__*/React__default["default"].createElement(MultiSelectionEditor, {
               content: content,
               field: field,
               value: value1,
@@ -4867,17 +4884,70 @@
       delay: delay
     }), children ? /*#__PURE__*/React__default["default"].createElement("article", null, children) : null));
   };
-
   var CollectionFilters = function CollectionFilters(props) {
-    return /*#__PURE__*/React__default["default"].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 = React.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]);
+    React.useEffect(function () {
+      if (onChange) onChange(form);
+    }, [form]);
+
+    function clear() {
+      change({});
+    }
+
+    var content = new Content(filterSchema, form);
+    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+      className: "table-filters",
+      title: /*#__PURE__*/React__default["default"].createElement(Text, null, "Filters")
+    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "filter_list_off",
+      size: "small",
+      clickable: true,
+      action: clear
+    })), /*#__PURE__*/React__default["default"].createElement("main", {
+      className: "table-filters"
+    }, /*#__PURE__*/React__default["default"].createElement(ContentEditor, {
+      content: content,
+      onChange: change
+    })));
   };
   /**
    * Collection List
    */
 
-
   var CollectionList = function CollectionList(props) {
     var select = function select(id) {
       try {
@@ -5047,9 +5117,9 @@
         delay = _props$delay2 === void 0 ? 1000 : _props$delay2;
     var timer = React.useRef(null);
 
-    var _useState = React.useState(selected),
-        form = _useState[0],
-        setForm = _useState[1];
+    var _useState2 = React.useState(selected),
+        form = _useState2[0],
+        setForm = _useState2[1];
 
     React.useEffect(function () {
       setForm(selected);
@@ -5377,19 +5447,19 @@
     if (optional && value === undefined) return null;
 
     switch (type) {
-      case TYPES.STRING:
+      case TYPES$1.STRING:
         return /*#__PURE__*/React__default["default"].createElement(Property, {
           label: label,
           value: value
         });
 
-      case TYPES.ENTITY:
+      case TYPES$1.ENTITY:
         return /*#__PURE__*/React__default["default"].createElement(EntityViewer, {
           field: field,
           value: value
         });
 
-      case TYPES.ARRAY:
+      case TYPES$1.ARRAY:
         return /*#__PURE__*/React__default["default"].createElement(ArrayViewer, {
           label: label,
           item: item,
@@ -5454,12 +5524,12 @@
   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"
     }
@@ -5959,7 +6029,7 @@
         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) {
@@ -7027,7 +7097,7 @@
         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) {
@@ -7586,6 +7656,7 @@
   exports.CircularProgress = CircularProgress;
   exports.CollectionContext = CollectionContext;
   exports.CollectionEditor = CollectionEditor$1;
+  exports.CollectionFilters = CollectionFilters;
   exports.CollectionPage = CollectionPage;
   exports.CollectionTree = CollectionTree;
   exports.Content = Content;
@@ -7630,7 +7701,7 @@
   exports.Stack = Stack;
   exports.Switch = Switch;
   exports.TEXTFORMATS = TEXTFORMATS;
-  exports.TYPES = TYPES;
+  exports.TYPES = TYPES$1;
   exports.Tab = Tab;
   exports.TabbedContentEditor = TabbedContentEditor;
   exports.TabbedTablePage = TabbedTablePage;