npm - @plotdb/form - Versions diffs - 0.0.1 - Mend

@plotdb/form 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,5 @@
+# Change Logs
+## v0.0.1
+ - initial release

package/README.md ADDED Viewed

@@ -0,0 +1,33 @@
+# @plotdb/form
+Form related modules for interactive form design throught GUI, with following (expected, TODO) features:
+ - design a form through GUI.
+ - designed form serializable and renderable in frontend for end users to fill.
+ - end user filled result of a form is also serializable.
+ - Aware of OT for collaborative editing.
+ - Works in both frontend and backend.
+`@plotdb/form` includes following modules:
+ - `form.manager`: manage a set of form widgets.
+ - `form.widget`: interface between form manager and UI.
+ - `form.opset`: a set of op for validating given input from user.
+ - `form.op`: a specific operation for validating given input from user.
+ - `form.term`: a rule ( a op, opset and config based on the specified op ) for validating given input from user.
+## Draft
+### form.block attrubite
+An attribute is an aspect of data from a form.block. For example, a File form.block could contains following attributes:
+ - `size` - size of all files combined.
+ - `count` - count of files.
+ - `modifiedtime` - modified time of last touched files.
+ - `ext` - type of files.
+Every attribute can be associated with one or multiple `form.opset` For example, above `ext` attribute can be associated with `extensions` type, which helps in determining if files in a given `ext` array all belong to certain file type.

package/index.js ADDED Viewed

@@ -0,0 +1,526 @@
+// Generated by LiveScript 1.6.0
+(function(){
+  var form;
+  form = {};
+  form.manager = function(){
+    this._fields = [];
+    return this;
+  };
+  form.manager.prototype = import$(Object.create(Object.prototype), {
+    add: function(it){
+      return this._fields = this._fields.concat(Array.isArray(it)
+        ? it
+        : [it]);
+    },
+    fields: function(){
+      return this._fields;
+    },
+    serialize: function(){
+      return this._fields.map(function(it){
+        return it.serialize();
+      });
+    },
+    value: function(vs){
+      var k, v, f, results$ = [];
+      if (!vs) {
+        return Object.fromEntries(this._fields.map(function(it){
+          return [it.key(), it.value()];
+        }));
+      }
+      for (k in vs) {
+        v = vs[k];
+        f = this._fields.filter(fn$)[0];
+        if (!f) {
+          continue;
+        }
+        results$.push(f.value(v));
+      }
+      return results$;
+      function fn$(it){
+        return it.key() === k;
+      }
+    },
+    mode: function(m){
+      return this._fields.map(function(it){
+        return it.mode(m);
+      });
+    }
+  });
+  form.op = function(opt){
+    opt == null && (opt = {});
+    this.id = opt.id;
+    this.name = opt.name;
+    this.config = opt.config;
+    this.func = opt.func;
+    this.i18n = opt.i18n;
+    return this;
+  };
+  form.op.prototype = import$(Object.create(Object.prototype), {
+    validate: function(val, cfg){
+      var ret;
+      cfg == null && (cfg = {});
+      if ((ret = this.func(val, cfg)) instanceof Promise) {
+        return ret;
+      } else {
+        return Promise.resolve(!!ret);
+      }
+    },
+    configDefault: function(){
+      var cfg, k, ref$, v;
+      cfg = {};
+      for (k in ref$ = this.config) {
+        v = ref$[k];
+        cfg[k] = v['default'];
+      }
+      return cfg;
+    }
+  });
+  form.opset = function(opt){
+    var ops, k, v, this$ = this;
+    opt == null && (opt = {});
+    this.name = opt.name;
+    this.id = opt.id;
+    this.i18n = opt.i18n;
+    this.ops = {};
+    ops = Array.isArray(opt.ops)
+      ? opt.ops.map(function(it){
+        return {
+          v: it,
+          k: it.id
+        };
+      })
+      : (function(){
+        var ref$, results$ = [];
+        for (k in ref$ = opt.ops) {
+          v = ref$[k];
+          results$.push({
+            k: k,
+            v: v
+          });
+        }
+        return results$;
+      }());
+    ops.map(function(arg$){
+      var k, v, ref$, ref1$, results$ = [];
+      k = arg$.k, v = arg$.v;
+      this$.ops[k] = v instanceof form.op
+        ? v
+        : k
+          ? new form.op((ref$ = typeof v === 'function' ? {
+            func: v
+          } : v, ref$.id = k, ref$))
+          : (function(){
+            throw new Error('[@plotdb/form/opset] invalid op when initializing opset.');
+          }());
+      for (k in ref$ = opt.ops) {
+        v = ref$[k];
+        results$.push(this$.ops[k] = new form.op((ref1$ = typeof v === 'function' ? {
+          func: v
+        } : v, ref1$.name = k, ref1$.id = k, ref1$)));
+      }
+      return results$;
+    });
+    this.defaultOp = this.ops[opt.defaultOp]
+      ? opt.defaultOp
+      : (function(){
+        var ref$, results$ = [];
+        for (k in ref$ = this.ops) {
+          v = ref$[k];
+          results$.push(k);
+        }
+        return results$;
+      }.call(this))[0];
+    return this;
+  };
+  form.opset.prototype = import$(Object.create(Object.prototype), {
+    getOp: function(id){
+      return this.ops[id || this.defaultOp];
+    },
+    getOps: function(){
+      var k, ref$, v, results$ = [];
+      for (k in ref$ = this.ops) {
+        v = ref$[k];
+        results$.push(v);
+      }
+      return results$;
+    }
+  });
+  form.opset.register = function(it){
+    return (this.list || (this.list = [])).push(it instanceof form.opset
+      ? it
+      : new form.opset(it));
+  };
+  form.opset.get = function(id){
+    return (this.list || (this.list = [])).filter(function(it){
+      return (it.id || it.name) === id;
+    })[0];
+  };
+  form.opset['default'] = [
+    {
+      id: 'string',
+      i18n: {
+        "zh-TW": {
+          string: "文字",
+          include: "包含",
+          exclude: "排除",
+          email: "電子郵件"
+        }
+      },
+      ops: {
+        include: {
+          func: function(v, c){
+            c == null && (c = {});
+            return ~("" + (v || '')).indexOf(c.str || '');
+          },
+          config: {
+            str: {
+              type: 'text'
+            }
+          }
+        },
+        exclude: {
+          func: function(v, c){
+            c == null && (c = {});
+            return !~("" + (v || '')).indexOf(c.str || '');
+          },
+          config: {
+            str: {
+              type: 'text'
+            }
+          }
+        },
+        email: {
+          func: function(v){
+            return /^[^@]+@[^@]+$/.exec(v);
+          },
+          config: {}
+        }
+      }
+    }, {
+      id: 'number',
+      i18n: {
+        "zh-TW": {
+          number: "數字",
+          lte: "≦ 小於或等於",
+          gte: "≧ 大於或等於",
+          ne: "≠ 不等於",
+          eq: "= 等於"
+        }
+      },
+      ops: {
+        lte: {
+          func: function(v, c){
+            c == null && (c = {});
+            if (isNaN(v) || isNaN(c.val)) {
+              return false;
+            } else {
+              return +v <= +c.val;
+            }
+          },
+          config: {
+            val: {
+              type: 'text',
+              hint: "number for comparison"
+            }
+          }
+        },
+        gte: {
+          func: function(v, c){
+            c == null && (c = {});
+            if (isNaN(v) || isNaN(c.val)) {
+              return false;
+            } else {
+              return +v >= +c.val;
+            }
+          },
+          config: {
+            val: {
+              type: 'text',
+              hint: "number for comparison"
+            }
+          }
+        },
+        ne: {
+          func: function(v, c){
+            c == null && (c = {});
+            if (isNaN(v) || isNaN(c.val)) {
+              return false;
+            } else {
+              return +v !== +c.val;
+            }
+          },
+          config: {
+            val: {
+              type: 'text',
+              hint: "number for comparison"
+            }
+          }
+        },
+        eq: {
+          func: function(v, c){
+            c == null && (c = {});
+            if (isNaN(v) || isNaN(c.val)) {
+              return false;
+            } else {
+              return +v === +c.val;
+            }
+          },
+          config: {
+            val: {
+              type: 'text',
+              hint: "number for comparison"
+            }
+          }
+        }
+      }
+    }
+  ];
+  form.opset['default'].map(function(it){
+    return form.opset.register(it);
+  });
+  /**
+   * term, for verification of values based on assigned op and config.
+   * @constructor
+   * @param {boolean} enabled - determine if this term is enabled or not
+   * @param {string} opset - id of opset used by this term.
+   * @param {string} op - id of op used by this term
+   * @param {object} config - additional config for chosen op.
+   */
+  form.term = function(opt){
+    opt == null && (opt = {});
+    import$((this.enabled = true, this.opset = null, this.op = null, this.config = {}, this), opt);
+    this.setOpset(opt.opset, opt.op, opt.config);
+    return this;
+  };
+  form.term.prototype = import$(Object.create(Object.prototype), {
+    toggle: function(it){
+      return this.enabled = it != null
+        ? it
+        : !this.enabled;
+    },
+    setOpset: function(opset, op, cfg){
+      if (typeof opset === 'string') {
+        if (!(this.opset = form.opset.get(opset))) {
+          throw new Error("no such opset '" + opset + "'");
+        }
+      } else if (opset instanceof form.opset) {
+        this.opset = opset;
+      } else {
+        throw new Error("invalid opset");
+      }
+      return this.setOp(op, cfg);
+    },
+    setOp: function(id, cfg){
+      if (!this.opset) {
+        throw new Error("opset not set");
+      }
+      if (!(this.op = this.opset.getOp(id))) {
+        throw new Error("no such op '" + id + "'");
+      }
+      return this.setConfig(cfg);
+    },
+    setConfig: function(cfg){
+      if (!this.op) {
+        throw new Error("op not set");
+      }
+      return this.config = !cfg ? this.op.configDefault() : cfg;
+    },
+    validate: function(v){
+      if (!this.op) {
+        Promis.reject(new Error("op not set"));
+      }
+      return this.op.validate(v, this.config);
+    },
+    serialize: function(){
+      return {
+        enabled: this.enabled,
+        opset: this.opset.id,
+        op: this.op.id,
+        config: this.config
+      };
+    },
+    deserialize: function(v){
+      this.toggle(v.enabled);
+      return this.setOpset(v.opset, v.op, v.config);
+    }
+  });
+  form.widget = function(opt){
+    var this$ = this;
+    opt == null && (opt = {});
+    this.root = typeof opt.root === 'string'
+      ? document.querySelector(opt.root)
+      : opt.root;
+    this.evtHandler = {};
+    this.mod = opt.mod || null;
+    this.i18n = {};
+    this._custom = {};
+    this._meta = {
+      config: {},
+      key: Math.random().toString(36).substring(2)
+    };
+    this._value = null;
+    this._empty = true;
+    this._mode = opt.mode || 'view';
+    this._validate = opt.validate || null;
+    this._opsets = (opt.opsets || []).map(function(opset){
+      if (typeof opset === 'string') {
+        return form.opset.get(opset);
+      } else if (typeof opset === form.opset) {
+        return opset;
+      } else {
+        return new form.opset(opset);
+      }
+    });
+    this._opsets.filter(function(it){
+      return it.i18n;
+    }).map(function(it){
+      var k, ref$, v, ref1$, results$ = [];
+      for (k in ref$ = it.i18n) {
+        v = ref$[k];
+        results$.push(import$((ref1$ = this$.i18n)[k] || (ref1$[k] = {}), v));
+      }
+      return results$;
+    });
+    this._errors = [];
+    this.init = proxise.once(function(){
+      return this$._init();
+    });
+    return this;
+  };
+  form.widget.prototype = import$(Object.create(Object.prototype), {
+    on: function(n, cb){
+      var this$ = this;
+      return (Array.isArray(n)
+        ? n
+        : [n]).map(function(n){
+        var ref$;
+        return ((ref$ = this$.evtHandler)[n] || (ref$[n] = [])).push(cb);
+      });
+    },
+    fire: function(n){
+      var v, res$, i$, to$, ref$, len$, cb, results$ = [];
+      res$ = [];
+      for (i$ = 1, to$ = arguments.length; i$ < to$; ++i$) {
+        res$.push(arguments[i$]);
+      }
+      v = res$;
+      for (i$ = 0, len$ = (ref$ = this.evtHandler[n] || []).length; i$ < len$; ++i$) {
+        cb = ref$[i$];
+        results$.push(cb.apply(this, v));
+      }
+      return results$;
+    },
+    _init: function(){
+      return Promise.resolve(this.mod && this.mod.init ? this.mod.init.apply(this) : '');
+    },
+    key: function(keyonly){
+      keyonly == null && (keyonly = false);
+      return keyonly
+        ? this._meta.key
+        : this._meta.alias || this._meta.key;
+    },
+    serialize: function(){
+      var ref$, ret, ref1$;
+      ret = (ref1$ = {}, ref1$.key = (ref$ = this._meta).key, ref1$.title = ref$.title, ref1$.desc = ref$.desc, ref1$);
+      ret.config = JSON.parse(JSON.stringify(this._meta.config || {}));
+      ret.term = this._meta.term.map(function(it){
+        return it.serialize();
+      });
+      return ret;
+    },
+    deserialize: function(v){
+      var ref$;
+      ref$ = this._meta;
+      ref$.key = v.key;
+      ref$.title = v.title;
+      ref$.desc = v.desc;
+      this._meta.config = JSON.parse(JSON.stringify(v.config || {}));
+      this._meta.term = (v.term || []).map(function(it){
+        return new form.term(it);
+      });
+      this.validate();
+      return this.render();
+    },
+    mode: function(it){
+      if (!(it != null)) {
+        return this._mode;
+      }
+      this._mode = it;
+      this.validate();
+      return this.render();
+    },
+    errors: function(){
+      return this._errors;
+    },
+    value: function(v, fromSource){
+      fromSource == null && (fromSource = false);
+      if (!(v != null)) {
+        return this._value;
+      }
+      this._value = v;
+      this._empty = this.mod && this.mod.isEmpty
+        ? this.mod.isEmpty.apply(this, v)
+        : !v;
+      this.validate();
+      if (!fromSource) {
+        return this.fire('change', this._value);
+      }
+    },
+    validate: function(){
+      var this$ = this;
+      if (this.mod && this.mod.validate) {
+        return this.mod.validate.apply(this, this._value);
+      }
+      if (this._validate) {
+        return Promise.resolve(this._validate(this._value));
+      }
+      if (this._empty && this._meta.config.isRequired) {
+        this._errors = ["required"];
+        return this.render();
+      }
+      return Promise.all(this._meta.term.filter(function(t){
+        return t.enabled;
+      }).map(function(t){
+        return t.validate(this$._value).then(function(v){
+          return [t, v];
+        });
+      })).then(function(it){
+        this$._errors = it.filter(function(it){
+          return !it[1];
+        }).map(function(it){
+          return it[0].msg || 'error';
+        });
+        return this$.render();
+      }).then(function(){
+        return this$._errors;
+      });
+    },
+    render: function(){
+      this.fire('render');
+      if (this.mod && this.mod.render) {
+        return this.mod.render.apply(this);
+      }
+    },
+    adapt: function(){
+      var args, res$, i$, to$;
+      res$ = [];
+      for (i$ = 0, to$ = arguments.length; i$ < to$; ++i$) {
+        res$.push(arguments[i$]);
+      }
+      args = res$;
+      if (this.mod && this.mod.adapt) {
+        return this.mod.adapt.apply(this, args);
+      }
+    }
+  });
+  if (typeof module != 'undefined' && module !== null) {
+    module.exports = form;
+  } else if (typeof window != 'undefined' && window !== null) {
+    window.form = form;
+  }
+  function import$(obj, src){
+    var own = {}.hasOwnProperty;
+    for (var key in src) if (own.call(src, key)) obj[key] = src[key];
+    return obj;
+  }
+}).call(this);

package/index.min.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1 @@

+ {"author":"zbryikt","name":"@plotdb/form","license":"MIT","description":"form blocks","version":"0.0.1","browser":"index.min.js","main":"index.min.js","homepage":"https://github.com/plotdb/form","repository":{"type":"git","url":"https://github.com/plotdb/form"},"engines":{"node":">=10.14.1","npm":">=6.4.1"},"scripts":{"start":"npx server -r web -o true"},"devDependencies":{"@loadingio/bootstrap.ext":"^0.0.4","@loadingio/debounce.js":"^1.0.1","@loadingio/ldquery":"^3.0.2","@plotdb/datadom":"^0.2.0","@plotdb/datahub":"^0.2.2","@plotdb/semver":"^0.0.2","@zbryikt/deploy":"^0.0.1","@zbryikt/template":"^2.3.33","bootstrap":"^4.5.3","bootstrap.native":"^3.0.13","fedep":"^1.1.2","i18next":"^19.9.2","ldcover":"^3.0.1","ldiconfont":"^0.1.10","ldview":"^1.0.0","livescript":"^1.6.0","stylus":"^0.55.0","uglify-js":"^3.13.1","uglifycss":"^0.0.29"},"frontendDependencies":{"root":"web/static/assets/lib","modules":["bootstrap","@loadingio/bootstrap.ext","bootstrap.native","ldcover","@loadingio/ldquery","@loadingio/debounce.js","@loadingio/ldcolorpicker","ldview","ldiconfont","ldslider","ldcolor","ldpalettepicker","curegex","dompurify","proxise","i18next","@plotdb/sheet","@plotdb/block","@plotdb/datadom","@plotdb/datahub","@plotdb/semver","@plotdb/rescope","@plotdb/suuid","@plotdb/konfig","@plotdb/csscope"]},"dependencies":{"@loadingio/ldcolorpicker":"^3.0.0","@plotdb/block":"^4.1.0","@plotdb/csscope":"^4.0.0","@plotdb/datadom":"^0.2.0","@plotdb/konfig":"^4.0.1","@plotdb/rescope":"^4.1.0","@plotdb/sheet":"^0.2.0","@plotdb/suuid":"^0.5.0","curegex":"^0.0.4","dompurify":"^2.2.6","ldcolor":"^1.0.0","ldpalettepicker":"^4.0.0","ldslider":"^3.0.2","proxise":"^1.0.1"}}