tweak-ui 0.4.3 → 0.5.0

package/dist/lib/core/value-accessor.js

@@ -0,0 +1,52 @@
+/**
+ * Gets a value of a view model
+ *
+ * @public
+ * @param model - The model of a component
+ */
+export function getValue(model) {
+    return decode(model, readValue(model));
+}
+/**
+ * Sets a value on a view model
+ *
+ * @public
+ * @param model - The model of a component
+ * @param value - The value for the component
+ * @returns the encoded value as it was written to the model
+ */
+export function setValue(model, value) {
+    const encoded = encode(model, value);
+    writeValue(model, encoded);
+    return encoded;
+}
+function readValue(model) {
+    if ('target' in model &&
+        model.target &&
+        model.property != null &&
+        model.property in model.target) {
+        return model.target[model.property];
+    }
+    if ('value' in model) {
+        return model.value;
+    }
+}
+function writeValue(model, value) {
+    if ('target' in model && model.target && model.property != null) {
+        model.target[model.property] = value;
+    }
+    else if (isWriteable(model, 'value')) {
+        model.value = value;
+    }
+}
+function isWriteable(obj, key) {
+    const desc = Object.getOwnPropertyDescriptor(obj, key);
+    return !desc || !!desc.writable || !!desc.set;
+}
+function encode(source, value) {
+    return 'codec' in source && source.codec ? source.codec.encode(value) : value;
+}
+function decode(source, value) {
+    return 'codec' in source && source.codec ? source.codec.decode(value) : value;
+}
+//# sourceMappingURL=value-accessor.js.map

package/dist/lib/core/value-accessor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-accessor.js","sourceRoot":"","sources":["../../../src/lib/core/value-accessor.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAI,KAA0B;IACpD,OAAO,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAM,CAAA;AAC7C,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CAAI,KAA0B,EAAE,KAAQ;IAC9D,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IACpC,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IAC1B,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,SAAS,SAAS,CAAC,KAA4B;IAC7C,IACE,QAAQ,IAAI,KAAK;QACjB,KAAK,CAAC,MAAM;QACZ,KAAK,CAAC,QAAQ,IAAI,IAAI;QACtB,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,EAC9B,CAAC;QACD,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IACrC,CAAC;IACD,IAAI,OAAO,IAAI,KAAK,EAAE,CAAC;QACrB,OAAO,KAAK,CAAC,KAAK,CAAA;IACpB,CAAC;AACH,CAAC;AAED,SAAS,UAAU,CAAI,KAA0B,EAAE,KAAQ;IACzD,IAAI,QAAQ,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,IAAI,EAAE,CAAC;QAChE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAA;IACtC,CAAC;SAAM,IAAI,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC;QACvC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAA;IACrB,CAAC;AACH,CAAC;AAED,SAAS,WAAW,CAAI,GAAM,EAAE,GAAY;IAC1C,MAAM,IAAI,GAAG,MAAM,CAAC,wBAAwB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;IACtD,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAA;AAC/C,CAAC;AAED,SAAS,MAAM,CAAI,MAA2B,EAAE,KAAQ;IACtD,OAAO,OAAO,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;AAC/E,CAAC;AACD,SAAS,MAAM,CAAI,MAA2B,EAAE,KAAQ;IACtD,OAAO,OAAO,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;AAC/E,CAAC","sourcesContent":["import type { ValueSource } from './types'\r\nimport { call } from './utils'\r\n\r\n/**\r\n * Gets a value of a view model\r\n *\r\n * @public\r\n * @param model - The model of a component\r\n */\r\nexport function getValue<V>(model: ValueSource<any, V>): V {\r\n  return decode(model, readValue(model)) as V\r\n}\r\n\r\n/**\r\n * Sets a value on a view model\r\n *\r\n * @public\r\n * @param model - The model of a component\r\n * @param value - The value for the component\r\n * @returns the encoded value as it was written to the model\r\n */\r\nexport function setValue<V>(model: ValueSource<any, V>, value: V): unknown {\r\n  const encoded = encode(model, value)\r\n  writeValue(model, encoded)\r\n  return encoded\r\n}\r\n\r\nfunction readValue(model: ValueSource<any, any>) {\r\n  if (\r\n    'target' in model &&\r\n    model.target &&\r\n    model.property != null &&\r\n    model.property in model.target\r\n  ) {\r\n    return model.target[model.property]\r\n  }\r\n  if ('value' in model) {\r\n    return model.value\r\n  }\r\n}\r\n\r\nfunction writeValue<V>(model: ValueSource<any, V>, value: V): void {\r\n  if ('target' in model && model.target && model.property != null) {\r\n    model.target[model.property] = value\r\n  } else if (isWriteable(model, 'value')) {\r\n    model.value = value\r\n  }\r\n}\r\n\r\nfunction isWriteable<T>(obj: T, key: keyof T): boolean {\r\n  const desc = Object.getOwnPropertyDescriptor(obj, key)\r\n  return !desc || !!desc.writable || !!desc.set\r\n}\r\n\r\nfunction encode<V>(source: ValueSource<any, V>, value: V) {\r\n  return 'codec' in source && source.codec ? source.codec.encode(value) : value\r\n}\r\nfunction decode<V>(source: ValueSource<any, V>, value: V) {\r\n  return 'codec' in source && source.codec ? source.codec.decode(value) : value\r\n}\r\n"]}

package/dist/lib/index.d.ts

@@ -1,28 +1,22 @@
-/**
- * Tweak UI is a lightweight js library for building input controls with data binding
- *
- * @remarks
- * The library provides a set of common ui components built with mithriljs. The main objective
- * is to allow a developer to rapidly scaffold input interfaces for manipulating javascript objects
- * at runtime.
- *
- * Similar projects are:
- * {@link https://github.com/dataarts/dat.gui | dat.GUI}
- * {@link https://github.com/automat/controlkit.js | controlkit}
- * {@link https://github.com/colejd/guify | guify}
- *
- * @packageDocumentation
- */
-import './components';
-export * from './builder';
-export * from './color-formats';
-export * from './components';
-export * from './core';
-export * from './mount';
-/**
- * The version string
- *
- * @public
- */
-export declare const VERSION: string;
+/**
+ * Tweak UI is a lightweight js library for building input controls with data binding
+ *
+ * @remarks
+ * The library provides a set of common ui components built with mithriljs. The main objective
+ * is to allow a developer to rapidly scaffold input interfaces for manipulating javascript objects
+ * at runtime.
+ *
+ * Similar projects are:
+ * {@link https://github.com/dataarts/dat.gui | dat.GUI}
+ * {@link https://github.com/automat/controlkit.js | controlkit}
+ * {@link https://github.com/colejd/guify | guify}
+ *
+ * @packageDocumentation
+ */
+import './components';
+export * from './builder';
+export * from './color-formats';
+export * from './components';
+export * from './core';
+export * from './mount';
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,cAAc,CAAA;AAErB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AAIvB;;;;GAIG;AACH,eAAO,MAAM,OAAO,QAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,cAAc,CAAA;AAErB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA"}

package/dist/lib/index.js

@@ -0,0 +1,29 @@
+/**
+ * Tweak UI is a lightweight js library for building input controls with data binding
+ *
+ * @remarks
+ * The library provides a set of common ui components built with mithriljs. The main objective
+ * is to allow a developer to rapidly scaffold input interfaces for manipulating javascript objects
+ * at runtime.
+ *
+ * Similar projects are:
+ * {@link https://github.com/dataarts/dat.gui | dat.GUI}
+ * {@link https://github.com/automat/controlkit.js | controlkit}
+ * {@link https://github.com/colejd/guify | guify}
+ *
+ * @packageDocumentation
+ */
+import './components';
+export * from './builder';
+export * from './color-formats';
+export * from './components';
+export * from './core';
+export * from './mount';
+// declare const VERSION_STRING: string
+// /**
+//  * The version string
+//  *
+//  * @public
+//  */
+// export const VERSION = VERSION_STRING
+//# sourceMappingURL=index.js.map

package/dist/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,cAAc,CAAA;AAErB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AAEvB,uCAAuC;AAEvC,MAAM;AACN,wBAAwB;AACxB,KAAK;AACL,aAAa;AACb,MAAM;AACN,wCAAwC","sourcesContent":["/**\n * Tweak UI is a lightweight js library for building input controls with data binding\n *\n * @remarks\n * The library provides a set of common ui components built with mithriljs. The main objective\n * is to allow a developer to rapidly scaffold input interfaces for manipulating javascript objects\n * at runtime.\n *\n * Similar projects are:\n * {@link https://github.com/dataarts/dat.gui | dat.GUI}\n * {@link https://github.com/automat/controlkit.js | controlkit}\n * {@link https://github.com/colejd/guify | guify}\n *\n * @packageDocumentation\n */\n\nimport './components'\n\nexport * from './builder'\nexport * from './color-formats'\nexport * from './components'\nexport * from './core'\nexport * from './mount'\n\n// declare const VERSION_STRING: string\n\n// /**\n//  * The version string\n//  *\n//  * @public\n//  */\n// export const VERSION = VERSION_STRING\n"]}

package/dist/lib/mount.d.ts

@@ -1,46 +1,46 @@
-import type { ComponentModel } from './core/types';
-import { default as m } from 'mithril';
-import { BuilderFn } from './builder';
-/**
- * Mithril's hyperscript function.
- *
- * @public
- * @remarks
- * Useful to create custom components
- */
-export declare const h: m.Static;
-/**
- * Runs the function through a builder system and returns the created controls
- *
- * @param fn - The builder function
- * @returns
- */
-export declare function build(fn: BuilderFn): ComponentModel[];
-/**
- * Mounts a ui to the given element
- *
- * @public
- * @param el - The ui host element
- * @param data - The ui definition object
- */
-export declare function mount<T extends ComponentModel>(el: Element | string, data: T | Array<T> | BuilderFn): void;
-/**
- * Unmounts the ui from given host element
- *
- * @public
- * @param el - The ui host element
- */
-export declare function unmount(el: Element | string): void;
-/**
- * Redraws the ui
- *
- * @public
- * @remarks
- * When changing the ui description object qui callbacks (e.g. `onInput` or `onChange`)
- * the ui will redraw automatically.
- *
- * However if the ui description object is changed from outside the qui callback
- * then this method must be called in order to update the visual state.
- */
-export declare function redraw(): void;
+import type { ComponentModel } from './core/types';
+import { default as m } from 'mithril';
+import { BuilderFn } from './builder';
+/**
+ * Mithril's hyperscript function.
+ *
+ * @public
+ * @remarks
+ * Useful to create custom components
+ */
+export declare const h: m.Static;
+/**
+ * Runs the function through a builder system and returns the created controls
+ *
+ * @param fn - The builder function
+ * @returns
+ */
+export declare function build(fn: BuilderFn): ComponentModel[];
+/**
+ * Mounts a ui to the given element
+ *
+ * @public
+ * @param el - The ui host element
+ * @param data - The ui definition object
+ */
+export declare function mount<T extends ComponentModel>(el: Element | string, data: T | Array<T> | BuilderFn): void;
+/**
+ * Unmounts the ui from given host element
+ *
+ * @public
+ * @param el - The ui host element
+ */
+export declare function unmount(el: Element | string): void;
+/**
+ * Redraws the ui
+ *
+ * @public
+ * @remarks
+ * When changing the ui description object qui callbacks (e.g. `onInput` or `onChange`)
+ * the ui will redraw automatically.
+ *
+ * However if the ui description object is changed from outside the qui callback
+ * then this method must be called in order to update the visual state.
+ */
+export declare function redraw(): void;
 //# sourceMappingURL=mount.d.ts.map

package/dist/lib/mount.js

@@ -0,0 +1,85 @@
+import { default as m } from 'mithril';
+import { Builder } from './builder';
+import { isFunction } from './core/utils';
+import { renderModel } from './core';
+/**
+ * Mithril's hyperscript function.
+ *
+ * @public
+ * @remarks
+ * Useful to create custom components
+ */
+export const h = m;
+/**
+ * Runs the function through a builder system and returns the created controls
+ *
+ * @param fn - The builder function
+ * @returns
+ */
+export function build(fn) {
+    const builder = new Builder();
+    fn(builder);
+    return builder.controls;
+}
+/**
+ * Mounts a ui to the given element
+ *
+ * @public
+ * @param el - The ui host element
+ * @param data - The ui definition object
+ */
+export function mount(el, data) {
+    el = typeof el === 'string' ? document.querySelector(el) : el;
+    el.classList.add('twui-root');
+    if (!data) {
+        m.mount(el, null);
+    }
+    else if (Array.isArray(data)) {
+        m.mount(el, {
+            view: () => renderModel({
+                type: 'group',
+                children: data,
+            }),
+        });
+    }
+    else if (isFunction(data)) {
+        const builder = new Builder();
+        data(builder);
+        m.mount(el, {
+            view: () => renderModel({
+                type: 'group',
+                children: builder.controls,
+            }),
+        });
+    }
+    else {
+        m.mount(el, {
+            view: () => renderModel(data),
+        });
+    }
+}
+/**
+ * Unmounts the ui from given host element
+ *
+ * @public
+ * @param el - The ui host element
+ */
+export function unmount(el) {
+    el = typeof el === 'string' ? document.querySelector(el) : el;
+    m.mount(el, null);
+}
+/**
+ * Redraws the ui
+ *
+ * @public
+ * @remarks
+ * When changing the ui description object qui callbacks (e.g. `onInput` or `onChange`)
+ * the ui will redraw automatically.
+ *
+ * However if the ui description object is changed from outside the qui callback
+ * then this method must be called in order to update the visual state.
+ */
+export function redraw() {
+    m.redraw();
+}
+//# sourceMappingURL=mount.js.map

package/dist/lib/mount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount.js","sourceRoot":"","sources":["../../src/lib/mount.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,OAAO,EAAa,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAGpC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;AAElB;;;;;GAKG;AACH,MAAM,UAAU,KAAK,CAAC,EAAa;IACjC,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAA;IAC7B,EAAE,CAAC,OAAO,CAAC,CAAA;IACX,OAAO,OAAO,CAAC,QAAQ,CAAA;AACzB,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,KAAK,CAA2B,EAAoB,EAAE,IAA8B;IAClG,EAAE,GAAG,OAAO,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7D,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;IAC7B,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;IACnB,CAAC;SAAM,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QAC/B,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YACV,IAAI,EAAE,GAAG,EAAE,CACT,WAAW,CAAa;gBACtB,IAAI,EAAE,OAAO;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC;SACL,CAAC,CAAA;IACJ,CAAC;SAAM,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;QAC5B,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAA;QAC7B,IAAI,CAAC,OAAO,CAAC,CAAA;QACb,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YACV,IAAI,EAAE,GAAG,EAAE,CACT,WAAW,CAAa;gBACtB,IAAI,EAAE,OAAO;gBACb,QAAQ,EAAE,OAAO,CAAC,QAAQ;aAC3B,CAAC;SACL,CAAC,CAAA;IACJ,CAAC;SAAM,CAAC;QACN,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YACV,IAAI,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC;SAC9B,CAAC,CAAA;IACJ,CAAC;AACH,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,EAAoB;IAC1C,EAAE,GAAG,OAAO,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7D,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;AACnB,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,MAAM;IACpB,CAAC,CAAC,MAAM,EAAE,CAAA;AACZ,CAAC","sourcesContent":["import type { ComponentModel } from './core/types'\nimport { default as m } from 'mithril'\nimport { Builder, BuilderFn } from './builder'\nimport { isFunction } from './core/utils'\nimport { renderModel } from './core'\nimport { GroupModel } from './components'\n\n/**\n * Mithril's hyperscript function.\n *\n * @public\n * @remarks\n * Useful to create custom components\n */\nexport const h = m\n\n/**\n * Runs the function through a builder system and returns the created controls\n *\n * @param fn - The builder function\n * @returns\n */\nexport function build(fn: BuilderFn) {\n  const builder = new Builder()\n  fn(builder)\n  return builder.controls\n}\n\n/**\n * Mounts a ui to the given element\n *\n * @public\n * @param el - The ui host element\n * @param data - The ui definition object\n */\nexport function mount<T extends ComponentModel>(el: Element | string, data: T | Array<T> | BuilderFn) {\n  el = typeof el === 'string' ? document.querySelector(el) : el\n  el.classList.add('twui-root')\n  if (!data) {\n    m.mount(el, null)\n  } else if (Array.isArray(data)) {\n    m.mount(el, {\n      view: () =>\n        renderModel<GroupModel>({\n          type: 'group',\n          children: data,\n        }),\n    })\n  } else if (isFunction(data)) {\n    const builder = new Builder()\n    data(builder)\n    m.mount(el, {\n      view: () =>\n        renderModel<GroupModel>({\n          type: 'group',\n          children: builder.controls,\n        }),\n    })\n  } else {\n    m.mount(el, {\n      view: () => renderModel(data),\n    })\n  }\n}\n\n/**\n * Unmounts the ui from given host element\n *\n * @public\n * @param el - The ui host element\n */\nexport function unmount(el: Element | string) {\n  el = typeof el === 'string' ? document.querySelector(el) : el\n  m.mount(el, null)\n}\n\n/**\n * Redraws the ui\n *\n * @public\n * @remarks\n * When changing the ui description object qui callbacks (e.g. `onInput` or `onChange`)\n * the ui will redraw automatically.\n *\n * However if the ui description object is changed from outside the qui callback\n * then this method must be called in order to update the visual state.\n */\nexport function redraw() {\n  m.redraw()\n}\n"]}