pickle-ts - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/html.d.ts

 import { VElement, VAttributes, VNode } from './dom';
 import { types } from 'typestyle';
-export interface HProps extends VAttributes, HAttributes {
+export interface HAttributes extends VAttributes, KnownHtmlAttributes {
     [key: string]: any;
 }
-export declare type HValue = VNode | HProps | null | undefined;
-export declare function combineAttrs(dominant: HProps | undefined, recessive: HProps | undefined): HProps | undefined;
+export declare type HValue = VNode | HAttributes | null | undefined;
+/** Merges two attribute structures, where style structures are converted to classes using style style,
+ * classes are combined, and lifecycle hooks are combined. */
+export declare function mergeAttrs(dominant: HAttributes | undefined, recessive: HAttributes | undefined): HAttributes | undefined;
 export declare function h(tag: string, ...values: HValue[]): VElement;
@@ -110,3 +112,3 @@ export declare function a(...values: HValue[]): VElement;
 export declare function wbr(...values: HValue[]): VElement;
-export interface HAttributes {
+export interface KnownHtmlAttributes {
     accept?: string;
@@ -113,0 +115,0 @@ accesskey?: string;

dist/html.js

@@ -17,15 +17,17 @@ "use strict";
 var typestyle_1 = require("typestyle");
-function typeStyleize(props) {
-    if (props && typeof (props.style) === 'object') {
-        props.class = !props.class ?
-            typestyle_1.style(props.style) :
-            props.class + " " + typestyle_1.style(props.style);
-        props.style = undefined;
+function typeStyleize(attrs) {
+    if (attrs && typeof (attrs.style) === 'object') {
+        attrs.class = !attrs.class ?
+            typestyle_1.style(attrs.style) :
+            attrs.class + " " + typestyle_1.style(attrs.style);
+        attrs.style = undefined;
     }
 }
-function combineAttrs(dominant, recessive) {
-    return combineAttrsMutate(__assign({}, dominant), __assign({}, recessive));
+/** Merges two attribute structures, where style structures are converted to classes using style style,
+ * classes are combined, and lifecycle hooks are combined. */
+function mergeAttrs(dominant, recessive) {
+    return mergeAttrsMutate(__assign({}, dominant), __assign({}, recessive));
 }
-exports.combineAttrs = combineAttrs;
-function combineAttrsMutate(dominant, recessive) {
+exports.mergeAttrs = mergeAttrs;
+function mergeAttrsMutate(dominant, recessive) {
     typeStyleize(dominant);
@@ -51,7 +53,7 @@ typeStyleize(recessive);
     }
-    var attributes;
+    var attrs;
     while (values.length > 0) {
         var head = values[0];
         if (isAttribute(head)) {
-            attributes = combineAttrsMutate(attributes, head);
+            attrs = mergeAttrsMutate(attrs, head);
             values = values.slice(1);
@@ -62,3 +64,3 @@ }
     }
-    return dom_1.createVElement.apply(void 0, [tag, attributes || {}].concat(values));
+    return dom_1.createVElement.apply(void 0, [tag, attrs || {}].concat(values));
 }
@@ -65,0 +67,0 @@ exports.h = h;

dist/index.d.ts

@@ -9,3 +9,3 @@ export { Component } from './component';
 export { literal, isNullOrEmpty, key, Let, equalsIgnoreCase, isNonData, NonData, parseFloatDeNaN, fuzzyEquals, humanizeIdentifier, Label, getLabel } from './util';
-export { combineObjAttrs, CoreInputAttrs, DatabindProps, StringBinding, commandLink, inputText, inputNumber, inputValue, inputRange, radioGroup, RadioGroupProps, selector, getPropertyKey, getPropertyValue, PropertyRef, SelectorProps, SelectOption, numberToInputString, inputStringToNumber, InputProps, setPropertyValue, checkbox, CheckProps, inputTextArea, getFriendlyName, RadioOption } from './widgets';
-export { h, HValue, HAttributes, HProps, combineAttrs, a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, label, legend, li, main, map, mark, menu, menuitem, meter, nav, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, rtc, ruby, s, samp, section, select, small, source, span, strong, sub, summary, sup, svg, table, tbody, td, textarea, tfoot, th, thead, time, tr, track, u, ul, video, vvar, wbr } from './html';
+export { mergeNestedAttrs, InputProps, DatabindProps, StringBinding, commandLink, inputText, inputNumber, inputValue, inputRange, radioGroup, RadioGroupProps, selector, getPropertyKey, PropertyRef, SelectorProps, SelectOption, numberToInputString, inputStringToNumber, InputEditorProps, getPropertyValue, setPropertyValue, getBoundValue, setBoundValue, checkbox, CheckProps, inputTextArea, getFriendlyName, RadioOption } from './widgets';
+export { h, HValue, HAttributes, mergeAttrs, a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, label, legend, li, main, map, mark, menu, menuitem, meter, nav, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, rtc, ruby, s, samp, section, select, small, source, span, strong, sub, summary, sup, svg, table, tbody, td, textarea, tfoot, th, thead, time, tr, track, u, ul, video, vvar, wbr } from './html';

dist/index.js

@@ -36,3 +36,3 @@ "use strict";
 var widgets_1 = require("./widgets");
-exports.combineObjAttrs = widgets_1.combineObjAttrs;
+exports.mergeNestedAttrs = widgets_1.mergeNestedAttrs;
 exports.commandLink = widgets_1.commandLink;
@@ -46,6 +46,8 @@ exports.inputText = widgets_1.inputText;
 exports.getPropertyKey = widgets_1.getPropertyKey;
-exports.getPropertyValue = widgets_1.getPropertyValue;
 exports.numberToInputString = widgets_1.numberToInputString;
 exports.inputStringToNumber = widgets_1.inputStringToNumber;
+exports.getPropertyValue = widgets_1.getPropertyValue;
 exports.setPropertyValue = widgets_1.setPropertyValue;
+exports.getBoundValue = widgets_1.getBoundValue;
+exports.setBoundValue = widgets_1.setBoundValue;
 exports.checkbox = widgets_1.checkbox;
@@ -56,3 +58,3 @@ exports.inputTextArea = widgets_1.inputTextArea;
 exports.h = html_1.h;
-exports.combineAttrs = html_1.combineAttrs;
+exports.mergeAttrs = html_1.mergeAttrs;
 exports.a = html_1.a;
@@ -59,0 +61,0 @@ exports.abbr = html_1.abbr;

dist/widgets.d.ts

@@ -1,12 +0,15 @@
-import { VElement } from '.';
 import { Component } from './component';
-import { HProps, HValue } from './html';
+import { HAttributes, HValue } from './html';
 export declare type PropertyRef<T> = string | (() => T);
-export declare const commandLink: (...values: HValue[]) => VElement;
+export declare const commandLink: (...values: HValue[]) => import("./dom").VElement;
 export declare const getPropertyKey: <T>(prop: PropertyRef<T>) => string;
-export declare const getPropertyValue: <T>(props: DatabindProps<T>) => any;
-export declare const setPropertyValue: <T>(props: DatabindProps<T>, value: T) => void;
+export declare const getPropertyValue: <T>(obj: any, prop: PropertyRef<T>) => any;
+export declare const setPropertyValue: <T>(obj: any, prop: PropertyRef<T>, value: T) => void;
+export declare const getBoundValue: <T>(binding: DatabindProps<T>) => any;
+export declare const setBoundValue: <T>(binding: DatabindProps<T>, value: T) => void;
 export declare const typeify: <T extends string | number | undefined>(guideValue: any, strValue: string) => T;
 export declare const getFriendlyName: <T>(obj: any, prop: PropertyRef<T>) => string;
-export declare const combineObjAttrs: <T>(...objs: Partial<T>[]) => T;
+/** Merges multiple objects, where nested objects with properties ending with the word "attrs" are merged using
+ * the mergeAttrs function */
+export declare const mergeNestedAttrs: <T>(...objs: Partial<T>[]) => T;
 export interface StringBinding<T> {
@@ -16,22 +19,22 @@ inputStringToModel: (inputString: string, prevModel: T) => T;
 }
-export interface InputValueProps<T> extends StringBinding<T>, CoreInputAttrs<T> {
+export interface InputValueProps<T> extends StringBinding<T>, InputProps<T> {
 }
 export interface DatabindProps<T> {
-    component: Component;
+    target: Component;
     prop: PropertyRef<T>;
 }
-export interface CoreInputAttrs<T> extends DatabindProps<T> {
-    attrs?: HProps;
+export interface InputProps<T> extends DatabindProps<T> {
+    attrs?: HAttributes;
 }
-export declare const inputValue: <T extends string | number | undefined>(props: InputValueProps<T>) => VElement;
-export interface InputProps<T> extends CoreInputAttrs<T> {
+export declare const inputValue: <T extends string | number | undefined>(props: InputValueProps<T>) => import("./dom").VElement;
+export interface InputEditorProps<T> extends InputProps<T> {
 }
-export declare const inputText: (props: InputProps<string | undefined>) => VElement;
-export declare const inputNumber: (props: InputProps<number | undefined>) => VElement;
+export declare const inputText: (props: InputEditorProps<string | undefined>) => import("./dom").VElement;
+export declare const inputNumber: (props: InputEditorProps<number | undefined>) => import("./dom").VElement;
 export declare function inputStringToNumber(s: string, prevNumber: number | undefined): number | undefined;
 export declare function numberToInputString(n: number | undefined, prevInputString: string): string;
-export interface InputRangeProps extends CoreInputAttrs<number> {
+export interface InputRangeProps extends InputProps<number> {
 }
-export declare const inputRange: (props: InputRangeProps) => VElement;
-export interface SelectorProps<T> extends CoreInputAttrs<T> {
+export declare const inputRange: (props: InputRangeProps) => import("./dom").VElement;
+export interface SelectorProps<T> extends InputProps<T> {
     options?: SelectOption<T>[];
@@ -45,24 +48,24 @@ hasEmpty?: boolean;
     label: HValue;
-    attrs?: HProps;
+    attrs?: HAttributes;
 }
-export declare function selector<T extends string | number | undefined>(props: SelectorProps<T>): VElement;
+export declare function selector<T extends string | number | undefined>(props: SelectorProps<T>): import("./dom").VElement;
 export interface RadioOption<T> extends SelectOption<T> {
     extraItem?: HValue;
 }
-export interface RadioGroupProps<T> extends CoreInputAttrs<T> {
+export interface RadioGroupProps<T> extends InputProps<T> {
     options?: RadioOption<T>[];
-    optionAttrs?: HProps;
-    inputAttrs?: HProps;
-    labelAttrs?: HProps;
+    optionAttrs?: HAttributes;
+    inputAttrs?: HAttributes;
+    labelAttrs?: HAttributes;
     prefix?: string;
     selectedClass?: string;
 }
-export declare function radioGroup<T extends string | number | undefined>(props: RadioGroupProps<T>): VElement;
-export interface CheckProps extends CoreInputAttrs<boolean> {
-    labelAttrs?: HProps;
-    inputAttrs?: HProps;
+export declare function radioGroup<T extends string | number | undefined>(props: RadioGroupProps<T>): import("./dom").VElement;
+export interface CheckProps extends InputProps<boolean> {
+    labelAttrs?: HAttributes;
+    inputAttrs?: HAttributes;
     label?: HValue;
     prefix?: string;
 }
-export declare function checkbox(props: CheckProps): VElement;
-export declare const inputTextArea: (props: InputProps<string>) => VElement;
+export declare function checkbox(props: CheckProps): import("./dom").VElement;
+export declare const inputTextArea: (props: InputEditorProps<string>) => import("./dom").VElement;

dist/widgets.js

@@ -26,11 +26,17 @@ "use strict";
 };
-exports.getPropertyValue = function (props) {
-    return props.component[exports.getPropertyKey(props.prop)];
+exports.getPropertyValue = function (obj, prop) {
+    return obj[exports.getPropertyKey(prop)];
 };
-exports.setPropertyValue = function (props, value) {
-    var key = exports.getPropertyKey(props.prop);
-    props.component.update(function () {
-        props.component[key] = value;
+exports.setPropertyValue = function (obj, prop, value) {
+    var key = exports.getPropertyKey(prop);
+    obj.update(function () {
+        obj[key] = value;
     }, { key: key, value: value });
 };
+exports.getBoundValue = function (binding) {
+    return exports.getPropertyValue(binding.target, binding.prop);
+};
+exports.setBoundValue = function (binding, value) {
+    return exports.setPropertyValue(binding.target, binding.prop, value);
+};
 exports.typeify = function (guideValue, strValue) {
@@ -43,3 +49,5 @@ return (typeof (guideValue) == "number" ? util_1.parseFloatDeNaN(strValue) : strValue);
 };
-exports.combineObjAttrs = function () {
+/** Merges multiple objects, where nested objects with properties ending with the word "attrs" are merged using
+ * the mergeAttrs function */
+exports.mergeNestedAttrs = function () {
     var objs = [];
@@ -57,3 +65,3 @@ for (var _i = 0; _i < arguments.length; _i++) {
             else if (/[aA]ttrs/.test(k))
-                newObj[k] = html_1.combineAttrs(newObj[k], obj[k]);
+                newObj[k] = html_1.mergeAttrs(newObj[k], obj[k]);
         }
@@ -65,8 +73,8 @@ }
     return html_1.input({
-        value: props.modelToInputString(exports.getPropertyValue(props), ""),
+        value: props.modelToInputString(exports.getBoundValue(props), ""),
         oninput: function (e) {
-            return exports.setPropertyValue(props, props.inputStringToModel(e.target.value, exports.getPropertyValue(props)));
+            return exports.setBoundValue(props, props.inputStringToModel(e.target.value, exports.getBoundValue(props)));
         },
         onUpdated: function (el) {
-            return el.value = props.modelToInputString(exports.getPropertyValue(props), el.value);
+            return el.value = props.modelToInputString(exports.getBoundValue(props), el.value);
         }
@@ -97,9 +105,9 @@ }, props.attrs);
 exports.inputRange = function (props) {
-    var onchange = function (e) { return exports.setPropertyValue(props, util_1.parseFloatDeNaN(e.target.value)); };
+    var onchange = function (e) { return exports.setBoundValue(props, util_1.parseFloatDeNaN(e.target.value)); };
     return html_1.input({
         type: "range",
-        value: exports.getPropertyValue(props),
+        value: exports.getBoundValue(props),
         oninput: onchange,
         onchange: onchange,
-        onUpdated: function (el) { el.value = exports.getPropertyValue(props); }
+        onUpdated: function (el) { el.value = exports.getBoundValue(props); }
     }, props.attrs);
@@ -109,3 +117,3 @@ };
     var options = props.options || [];
-    var value = exports.getPropertyValue(props);
+    var value = exports.getBoundValue(props);
     var allOptions = !props.hasEmpty ? options : [{ value: undefined, label: "" }].concat(options);
@@ -118,3 +126,3 @@ var id = (props.prefix || "") + exports.getPropertyKey(props.prop);
             id: id,
-            onchange: function (e) { return exports.setPropertyValue(props, exports.typeify(guideValue, e.target.value)); }
+            onchange: function (e) { return exports.setBoundValue(props, exports.typeify(guideValue, e.target.value)); }
         },
@@ -135,3 +143,3 @@ props.attrs].concat(allOptions.map(function (so) {
     return (html_1.div({ id: id }, props.attrs, options.map(function (option) {
-        var checked = util_1.fuzzyEquals(option.value, exports.getPropertyValue(props));
+        var checked = util_1.fuzzyEquals(option.value, exports.getBoundValue(props));
         var optionId = id + "-" + option.value;
@@ -154,3 +162,3 @@ return html_1.div(props.optionAttrs, {
             checked: checked ? "checked" : "",
-            onchange: function (e) { return exports.setPropertyValue(props, exports.typeify(options[0].value, e.target.value)); },
+            onchange: function (e) { return exports.setBoundValue(props, exports.typeify(options[0].value, e.target.value)); },
             onUpdated: function (el) {
@@ -167,8 +175,8 @@ el.checked = el.getAttribute("checked") == "checked";
         id: id,
-        value: "" + exports.getPropertyValue(props),
+        value: "" + exports.getBoundValue(props),
         type: "checkbox",
         name: id,
-        checked: exports.getPropertyValue(props) ? "checked" : undefined,
+        checked: exports.getBoundValue(props) ? "checked" : undefined,
         onchange: function () {
-            exports.setPropertyValue(props, !exports.getPropertyValue(props));
+            exports.setBoundValue(props, !exports.getBoundValue(props));
         },
@@ -178,3 +186,3 @@ onUpdated: function (el) {
         }
-    }, props.inputAttrs), html_1.label({ for: id }, props.labelAttrs, props.label || exports.getFriendlyName(props.component, props.prop))));
+    }, props.inputAttrs), html_1.label({ for: id }, props.labelAttrs, props.label || exports.getFriendlyName(props.target, props.prop))));
 }
@@ -184,6 +192,6 @@ exports.checkbox = checkbox;
     return html_1.textarea({
-        oninput: function (e) { return exports.setPropertyValue(props, (e.target.value)); },
-        onUpdated: function (el) { return el.value = exports.getPropertyValue(props); }
-    }, props.attrs, exports.getPropertyValue(props));
+        oninput: function (e) { return exports.setBoundValue(props, (e.target.value)); },
+        onUpdated: function (el) { return el.value = exports.getBoundValue(props); }
+    }, props.attrs, exports.getBoundValue(props));
 };
 //# sourceMappingURL=widgets.js.map

package.json

 {
   "name": "pickle-ts",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "pickle",
@@ -5,0 +5,0 @@ "license": "MIT",

src/pickle/html.ts

@@ -5,22 +5,24 @@ import { createVElement, VElement, VAttributes, VNode, VLifecycle, isVElement, merge } from './dom'
 
-export interface HProps extends VAttributes, HAttributes {
+export interface HAttributes extends VAttributes, KnownHtmlAttributes {
     [key: string] : any
 }
 
-export type HValue = VNode | HProps | null | undefined
+export type HValue = VNode | HAttributes | null | undefined
 
-function typeStyleize (props?: HProps) {        
-    if (props && typeof (props.style) === 'object') {
-        props.class = ! props.class ?
-            style (props.style) :
-            props.class + " " + style (props.style)
-        props.style = undefined
+function typeStyleize (attrs?: HAttributes) {        
+    if (attrs && typeof (attrs.style) === 'object') {
+        attrs.class = ! attrs.class ?
+            style (attrs.style) :
+            attrs.class + " " + style (attrs.style)
+        attrs.style = undefined
     }
 }
 
-export function combineAttrs (dominant: HProps | undefined, recessive: HProps | undefined) {
-    return combineAttrsMutate ({...dominant}, {...recessive})
+/** Merges two attribute structures, where style structures are converted to classes using style style,
+ * classes are combined, and lifecycle hooks are combined. */
+export function mergeAttrs (dominant: HAttributes | undefined, recessive: HAttributes | undefined) {
+    return mergeAttrsMutate ({...dominant}, {...recessive})
 }
 
-function combineAttrsMutate (dominant: HProps|undefined, recessive: HProps|undefined)
+function mergeAttrsMutate (dominant: HAttributes | undefined, recessive: HAttributes | undefined)
 {    
@@ -39,3 +41,3 @@ typeStyleize (dominant)
     dominant = combineLifecycles (dominant, recessive)
-    dominant = <HAttributes & VLifecycle> merge (dominant, recessive)                                 
+    dominant = <HAttributes> merge (dominant, recessive)                                 
 
@@ -45,3 +47,3 @@ return dominant
 
-function isAttribute (a?: any): a is HAttributes & VLifecycle {    
+function isAttribute (a?: any): a is HAttributes {    
     return a != null && typeof a == "object" && ! isVElement(<any>a) && ! Array.isArray(a)
@@ -52,7 +54,7 @@ }
 {
-    var attributes: HProps | undefined
+    var attrs: HAttributes | undefined
     while (values.length > 0) {
         var head = values[0]        
         if (isAttribute (head)) {
-            attributes = combineAttrsMutate (attributes, head)
+            attrs = mergeAttrsMutate (attrs, head)
             values = values.slice(1)
@@ -64,3 +66,3 @@ }
 
-    return createVElement(tag, attributes || {}, ...values)        
+    return createVElement(tag, attrs || {}, ...values)        
 }
@@ -472,3 +474,3 @@
 
-export interface HAttributes {
+export interface KnownHtmlAttributes {
     accept?: string
@@ -475,0 +477,0 @@ accesskey?: string

src/pickle/index.ts

@@ -9,8 +9,8 @@ export { Component } from './component'
 export { literal, isNullOrEmpty, key, Let, equalsIgnoreCase, isNonData, NonData, parseFloatDeNaN, fuzzyEquals, humanizeIdentifier, Label, getLabel } from './util'
-export { combineObjAttrs, CoreInputAttrs, DatabindProps, StringBinding, commandLink, inputText, inputNumber, inputValue, inputRange, radioGroup, RadioGroupProps, selector,
-    getPropertyKey, getPropertyValue, PropertyRef, SelectorProps, SelectOption, numberToInputString, inputStringToNumber,
-    InputProps, setPropertyValue, checkbox, CheckProps, inputTextArea, getFriendlyName, RadioOption } from './widgets'
+export { mergeNestedAttrs, InputProps, DatabindProps, StringBinding, commandLink, inputText, inputNumber, inputValue, inputRange, radioGroup, RadioGroupProps, selector,
+    getPropertyKey, PropertyRef, SelectorProps, SelectOption, numberToInputString, inputStringToNumber,
+    InputEditorProps, getPropertyValue, setPropertyValue, getBoundValue, setBoundValue, checkbox, CheckProps, inputTextArea, getFriendlyName, RadioOption } from './widgets'
 export {
-    h, HValue, HAttributes, HProps, combineAttrs,
+    h, HValue, HAttributes, mergeAttrs,
     a,abbr,address,area,article,aside,audio,b,bdi,bdo,blockquote,br,button,canvas,caption,cite,code,col,colgroup,data,datalist,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,i,iframe,img,input,ins,kbd,label,legend,li,main,map,mark,menu,menuitem,meter,nav,object,ol,optgroup,option,output,p,param,pre,progress,q,rp,rt,rtc,ruby,s,samp,section,select,small,source,span,strong,sub,summary,sup,svg,table,tbody,td,textarea,tfoot,th,thead,time,tr,track,u,ul,video,vvar,wbr
 } from './html'

src/pickle/widgets.ts

@@ -1,4 +0,3 @@
-import { VElement } from '.'
 import { Component } from './component'
-import { a, div, HProps, HValue, input, label, option, select, textarea, combineAttrs } from './html'
+import { a, div, HAttributes, HValue, input, label, mergeAttrs, option, select, textarea } from './html'
 import { fuzzyEquals, getLabel, humanizeIdentifier, key, parseFloatDeNaN } from './util'
@@ -14,11 +13,11 @@
 
-export const getPropertyValue = <T> (props: DatabindProps<T>) =>
-    props.component [getPropertyKey (props.prop)]
+export const getPropertyValue = <T> (obj: any, prop: PropertyRef<T>) =>
+    obj [getPropertyKey (prop)]
 
-export const setPropertyValue = <T> (props: DatabindProps<T>, value: T) =>
+export const setPropertyValue = <T> (obj: any, prop: PropertyRef<T>, value: T) =>
 {    
-    const key = getPropertyKey (props.prop)
-    props.component.update (() =>
+    const key = getPropertyKey (prop)
+    obj.update (() =>
         {            
-            props.component [key] = value
+            obj[key] = value
         },
@@ -29,2 +28,8 @@ {key: key, value: value}
 
+export const getBoundValue = <T> (binding: DatabindProps<T>) =>
+    getPropertyValue (binding.target, binding.prop)
+
+export const setBoundValue = <T> (binding: DatabindProps<T>, value: T) =>
+    setPropertyValue (binding.target, binding.prop, value)
+
 export const typeify = <T extends string|number|undefined> (guideValue: any, strValue: string) =>
@@ -38,3 +43,5 @@ <T><any> (typeof(guideValue) == "number" ? parseFloatDeNaN (strValue) : strValue)
 
-export const combineObjAttrs = <T> (...objs: Partial<T>[]) => {    
+/** Merges multiple objects, where nested objects with properties ending with the word "attrs" are merged using
+ * the mergeAttrs function */
+export const mergeNestedAttrs = <T> (...objs: Partial<T>[]) => {    
     const newObj = {}
@@ -46,3 +53,3 @@ for (var obj of objs)
             else if (/[aA]ttrs/.test (k))
-                newObj[k] = combineAttrs (newObj[k], obj[k])            
+                newObj[k] = mergeAttrs (newObj[k], obj[k])            
     return <T> newObj
@@ -57,12 +64,12 @@ }
 
-export interface InputValueProps<T> extends StringBinding<T>, CoreInputAttrs<T> {}
+export interface InputValueProps<T> extends StringBinding<T>, InputProps<T> {}
 
 export interface DatabindProps<T> {
-    component: Component,
+    target: Component,
     prop: PropertyRef<T>, 
 }
 
-export interface CoreInputAttrs<T> extends DatabindProps<T>
+export interface InputProps<T> extends DatabindProps<T>
 {    
-    attrs?: HProps
+    attrs?: HAttributes
 }
@@ -73,12 +80,12 @@
         {
-            value: props.modelToInputString (getPropertyValue (props), ""),
+            value: props.modelToInputString (getBoundValue (props), ""),
             oninput: e =>
-                setPropertyValue (props, 
+                setBoundValue (props, 
                     props.inputStringToModel (
                         (<HTMLInputElement>e.target).value,
-                        getPropertyValue (props)
+                        getBoundValue (props)
                     )
             ),
             onUpdated: (el: HTMLInputElement) =>
-                el.value = props.modelToInputString (getPropertyValue (props), el.value)
+                el.value = props.modelToInputString (getBoundValue (props), el.value)
         },
@@ -88,5 +95,5 @@ props.attrs
 
-export interface InputProps<T> extends CoreInputAttrs<T> {}
+export interface InputEditorProps<T> extends InputProps<T> {}
 
-export const inputText = (props: InputProps<string|undefined>) =>
+export const inputText = (props: InputEditorProps<string|undefined>) =>
     inputValue ({
@@ -98,3 +105,3 @@ ...props,
 
-export const inputNumber = (props: InputProps<number|undefined>) =>
+export const inputNumber = (props: InputEditorProps<number|undefined>) =>
     inputValue ({
@@ -121,7 +128,7 @@ ...props,
 
-export interface InputRangeProps extends CoreInputAttrs<number> {}
+export interface InputRangeProps extends InputProps<number> {}
 
 export const inputRange = (props: InputRangeProps) =>
 {
-    const onchange = (e: Event) => setPropertyValue (props, parseFloatDeNaN ((<HTMLInputElement>e.target).value))
+    const onchange = (e: Event) => setBoundValue (props, parseFloatDeNaN ((<HTMLInputElement>e.target).value))
 
@@ -131,6 +138,6 @@ return input (
             type: "range",           
-            value: getPropertyValue (props),
+            value: getBoundValue (props),
             oninput: onchange,
             onchange: onchange,
-            onUpdated: (el: HTMLInputElement) => { el.value = getPropertyValue (props) }
+            onUpdated: (el: HTMLInputElement) => { el.value = getBoundValue (props) }
         },
@@ -141,3 +148,3 @@ props.attrs
 
-export interface SelectorProps<T> extends CoreInputAttrs<T> {
+export interface SelectorProps<T> extends InputProps<T> {
     options?: SelectOption<T>[]
@@ -152,3 +159,3 @@ hasEmpty?: boolean,
     label: HValue,
-    attrs?: HProps    
+    attrs?: HAttributes    
 }
@@ -161,3 +168,3 @@
     const options = props.options || []
-    const value = getPropertyValue (props)
+    const value = getBoundValue (props)
     const allOptions = ! props.hasEmpty ? options : [<SelectOption<T>>{value: undefined, label: ""}, ...options]
@@ -172,3 +179,3 @@ const id = (props.prefix || "") + getPropertyKey(props.prop)
             id : id,
-            onchange: e => setPropertyValue (props, typeify<T> (guideValue, (<any>e.target).value))
+            onchange: e => setBoundValue (props, typeify<T> (guideValue, (<any>e.target).value))
         },
@@ -195,7 +202,7 @@ props.attrs,
 
-export interface RadioGroupProps<T> extends CoreInputAttrs<T> {
+export interface RadioGroupProps<T> extends InputProps<T> {
     options?: RadioOption<T>[]
-    optionAttrs?: HProps,
-    inputAttrs?: HProps,
-    labelAttrs?: HProps,
+    optionAttrs?: HAttributes,
+    inputAttrs?: HAttributes,
+    labelAttrs?: HAttributes,
     prefix?: string,
@@ -212,3 +219,3 @@ selectedClass?: string
             options.map(option => {
-                const checked = fuzzyEquals (option.value, getPropertyValue (props))
+                const checked = fuzzyEquals (option.value, getBoundValue (props))
                 const optionId = id+"-"+option.value
@@ -234,3 +241,3 @@ return div (
                         checked: checked ? "checked" : "",                        
-                        onchange: e => setPropertyValue (props,
+                        onchange: e => setBoundValue (props,
                             typeify<T> (options[0].value, (<any>e.target).value)
@@ -252,5 +259,5 @@ ),
 
-export interface CheckProps extends CoreInputAttrs<boolean> {
-    labelAttrs?: HProps,
-    inputAttrs?: HProps,
+export interface CheckProps extends InputProps<boolean> {
+    labelAttrs?: HAttributes,
+    inputAttrs?: HAttributes,
     label?: HValue,
@@ -269,8 +276,8 @@ prefix?: string,
                     id: id,
-                    value: "" + getPropertyValue (props),
+                    value: "" + getBoundValue (props),
                     type: "checkbox",
                     name: id,
-                    checked: getPropertyValue (props) ? "checked" : undefined,
+                    checked: getBoundValue (props) ? "checked" : undefined,
                     onchange: () => {
-                        setPropertyValue (props, ! getPropertyValue (props))
+                        setBoundValue (props, ! getBoundValue (props))
                     },
@@ -283,13 +290,13 @@ onUpdated: el => {
             ),
-            label ({ for: id }, props.labelAttrs, props.label || getFriendlyName (props.component, props.prop))
+            label ({ for: id }, props.labelAttrs, props.label || getFriendlyName (props.target, props.prop))
         )
     )
 }
-export const inputTextArea = (props: InputProps<string>) =>
+export const inputTextArea = (props: InputEditorProps<string>) =>
     textarea ({
-        oninput: e => setPropertyValue (props, ((<HTMLTextAreaElement>e.target).value)),            
-        onUpdated: (el: HTMLInputElement) => el.value = getPropertyValue (props)
+        oninput: e => setBoundValue (props, ((<HTMLTextAreaElement>e.target).value)),            
+        onUpdated: (el: HTMLInputElement) => el.value = getBoundValue (props)
     },
         props.attrs,
-        getPropertyValue (props)     
+        getBoundValue (props)     
     )

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

257161

increased by0.78%

Lines of code

5176

increased by0.47%

No dependency changes