@omegagrid/form 0.7.0 → 0.7.2
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.
|
@@ -19,7 +19,7 @@ let FormColorInput = class FormColorInput extends BaseControl {
|
|
|
19
19
|
this.render = () => html `
|
|
20
20
|
<og-dropdown>
|
|
21
21
|
<div slot="label" style="${styleMap({ backgroundColor: this.value ? `#${this.value}` : 'transparent', marginRight: '4px' })}">
|
|
22
|
-
<og-
|
|
22
|
+
<og-icon icon="fill"></og-icon>
|
|
23
23
|
</div>
|
|
24
24
|
|
|
25
25
|
<og-colorpicker
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colorInput.js","sourceRoot":"","sources":["../../../src/ui/controls/colorInput.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAoB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAGnD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAmB;IAAhD;;QAON,cAAS,GAAG,CAAC,CAA6B,EAAE,EAAE;YAC7C,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;QACrE,CAAC,CAAA;QAED,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;8BAEU,QAAQ,CAAC,EAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,KAAK,EAAC,CAAC;;;;;;cAM9G,IAAI,CAAC,KAAK;eACT,IAAI,CAAC,SAAS;kBACX,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;EAGtD,CAAC;IAEH,CAAC;;AAzBO,qBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,AAA1B,CAA2B;AAGxC;IADC,KAAK,CAAC,aAAa,CAAC;gDACF;AALP,cAAc;IAD1B,aAAa,CAAC,oBAAoB,CAAC;GACvB,cAAc,CA2B1B","sourcesContent":["import { html } from \"lit\";\nimport { customElement, query } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { Dropdown, events, utils } from \"@omegagrid/core\";\n\n@customElement('og-form-colorinput')\nexport class FormColorInput extends BaseControl<string> {\n\n\tstatic styles = [...BaseControl.styles];\n\n\t@query('og-dropdown')\n\tdropdown: Dropdown;\n\n\t_onChange = (e: events.ChangeEvent<string>) => {\n\t\tthis.dropdown.close();\n\t\tthis.updateValue(e.value == null ? null : utils.trim(e.value, '#'));\n\t}\n\n\trender = () => html`\n\t\t<og-dropdown>\n\t\t\t<div slot=\"label\" style=\"${styleMap({backgroundColor: this.value ? `#${this.value}` : 'transparent', marginRight: '4px'})}\">\n\t\t\t\t<og-
|
|
1
|
+
{"version":3,"file":"colorInput.js","sourceRoot":"","sources":["../../../src/ui/controls/colorInput.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAoB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAGnD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAmB;IAAhD;;QAON,cAAS,GAAG,CAAC,CAA6B,EAAE,EAAE;YAC7C,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;QACrE,CAAC,CAAA;QAED,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;8BAEU,QAAQ,CAAC,EAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,KAAK,EAAC,CAAC;;;;;;cAM9G,IAAI,CAAC,KAAK;eACT,IAAI,CAAC,SAAS;kBACX,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;EAGtD,CAAC;IAEH,CAAC;;AAzBO,qBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,AAA1B,CAA2B;AAGxC;IADC,KAAK,CAAC,aAAa,CAAC;gDACF;AALP,cAAc;IAD1B,aAAa,CAAC,oBAAoB,CAAC;GACvB,cAAc,CA2B1B","sourcesContent":["import { html } from \"lit\";\nimport { customElement, query } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { Dropdown, events, utils } from \"@omegagrid/core\";\n\n@customElement('og-form-colorinput')\nexport class FormColorInput extends BaseControl<string> {\n\n\tstatic styles = [...BaseControl.styles];\n\n\t@query('og-dropdown')\n\tdropdown: Dropdown;\n\n\t_onChange = (e: events.ChangeEvent<string>) => {\n\t\tthis.dropdown.close();\n\t\tthis.updateValue(e.value == null ? null : utils.trim(e.value, '#'));\n\t}\n\n\trender = () => html`\n\t\t<og-dropdown>\n\t\t\t<div slot=\"label\" style=\"${styleMap({backgroundColor: this.value ? `#${this.value}` : 'transparent', marginRight: '4px'})}\">\n\t\t\t\t<og-icon icon=\"fill\"></og-icon>\n\t\t\t</div>\n\n\t\t\t<og-colorpicker\n\t\t\t\tslot=\"content\"\n\t\t\t\t.color=\"${this.value}\"\n\t\t\t\t@change=\"${this._onChange}\"\n\t\t\t\t@mousedown=\"${(e: MouseEvent) => e.stopPropagation()}\">\n\t\t\t</og-colorpicker>\n\t\t</og-dropdown>\n\t`;\n\t\n}"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"numericInput.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/numericInput.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,qBACa,gBAAiB,SAAQ,WAAW,CAAC,MAAM,CAAC;IAExD,MAAM,CAAC,MAAM,4BA6DV;IAGH,GAAG,EAAE,MAAM,CAAC;IAGZ,GAAG,EAAE,MAAM,CAAC;IAEZ,QAAQ;;IASR,UAAU,GAAI,GAAG,aAAa,UAW7B;IAED,SAAS,GAAI,GAAG,UAAU,UAEzB;IAED,WAAW,CAAC,KAAK,EAAE,MAAM;
|
|
1
|
+
{"version":3,"file":"numericInput.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/numericInput.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,qBACa,gBAAiB,SAAQ,WAAW,CAAC,MAAM,CAAC;IAExD,MAAM,CAAC,MAAM,4BA6DV;IAGH,GAAG,EAAE,MAAM,CAAC;IAGZ,GAAG,EAAE,MAAM,CAAC;IAEZ,QAAQ;;IASR,UAAU,GAAI,GAAG,aAAa,UAW7B;IAED,SAAS,GAAI,GAAG,UAAU,UAEzB;IAED,WAAW,CAAC,KAAK,EAAE,MAAM;IASzB,EAAE,aAAkD;IACpD,IAAI,aAAiD;IAErD,MAAM,6CAUJ;CAEF"}
|
|
@@ -38,8 +38,8 @@ let FormNumericInput = class FormNumericInput extends BaseControl {
|
|
|
38
38
|
placeholder="${this.model?.props.placeholder}"
|
|
39
39
|
@change="${this._onChange}" />
|
|
40
40
|
<div class="buttons">
|
|
41
|
-
<div id="btnUp" @click="${() => this.up()}"><og-
|
|
42
|
-
<div id="btnDown" @click="${() => this.down()}"><og-
|
|
41
|
+
<div id="btnUp" @click="${() => this.up()}"><og-icon icon="caret-up"></og-icon></div>
|
|
42
|
+
<div id="btnDown" @click="${() => this.down()}"><og-icon icon="caret-down"></og-icon></div>
|
|
43
43
|
</div>
|
|
44
44
|
`;
|
|
45
45
|
this.addEventListener('keydown', this._onKeydown);
|
|
@@ -50,6 +50,7 @@ let FormNumericInput = class FormNumericInput extends BaseControl {
|
|
|
50
50
|
value = isNaN(this.max) ? value : Math.min(value, this.max);
|
|
51
51
|
}
|
|
52
52
|
super.updateValue(value);
|
|
53
|
+
this.requestUpdate();
|
|
53
54
|
}
|
|
54
55
|
};
|
|
55
56
|
FormNumericInput.styles = [...BaseControl.styles, css `
|
|
@@ -93,7 +94,7 @@ FormNumericInput.styles = [...BaseControl.styles, css `
|
|
|
93
94
|
opacity: 0.5;
|
|
94
95
|
}
|
|
95
96
|
|
|
96
|
-
.buttons > div og-
|
|
97
|
+
.buttons > div og-icon {
|
|
97
98
|
height: 100%;
|
|
98
99
|
}
|
|
99
100
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"numericInput.js","sourceRoot":"","sources":["../../../src/ui/controls/numericInput.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGrC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAmB;IAuExD,QAAQ;QACP,KAAK,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QAIT,eAAU,GAAG,CAAC,CAAgB,EAAE,EAAE;YACjC,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACf,KAAK,SAAS;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,EAAE,EAAE,CAAC;oBACV,MAAM;gBACP,KAAK,WAAW;oBACf,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,IAAI,EAAE,CAAC;oBACZ,MAAM;YACR,CAAC;QACF,CAAC,CAAA;QAED,cAAS,GAAG,CAAC,CAAa,EAAE,EAAE;YAC7B,IAAI,CAAC,WAAW,CAAC,UAAU,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC,CAAC;QACpE,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"numericInput.js","sourceRoot":"","sources":["../../../src/ui/controls/numericInput.ts"],"names":[],"mappings":"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","sourcesContent":["import constants from \"../../constants\";\nimport { css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\n\n@customElement('og-form-numericinput')\nexport class FormNumericInput extends BaseControl<number> {\n\n\tstatic styles = [...BaseControl.styles, css`\n\t\tinput {\n\t\t\tborder: 1px solid var(--og-accent-color);\n\t\t\tbackground-color: var(--og-form-background-color);\n\t\t\tcolor: var(--og-text-color);\n\t\t\tfont-size: var(--og-font-size);\n\t\t\theight: ${constants.FORM_CONTROL_HEIGHT}px;\n\t\t\tline-height: ${constants.FORM_CONTROL_HEIGHT}px;\n\t\t\toutline: none;\n\t\t\twidth: 100%;\n\t\t\tposition: relative;\n\t\t\ttext-align: right;\n\t\t\tpadding-right: 20px;\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t}\n\n\t\t.buttons {\n\t\t\tdisplay: none;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 15px;\n\t\t\tbackground-color: var(--og-accent-color);\n\t\t}\n\n\t\t.buttons > div {\n\t\t\tcolor: var(--og-text-color-2);\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: 50%;\n\t\t\toverflow: hidden;\n\t\t\ttext-align: center;\n\t\t\tline-height: 10px;\n\t\t}\n\n\t\t.buttons > div:hover {\n\t\t\topacity: 0.5;\n\t\t}\n\n\t\t.buttons > div og-icon {\n\t\t\theight: 100%;\n\t\t}\n\n\t\t#btnUp {\n\t\t\ttop: 0;\n\t\t}\n\n\t\t#btnDown {\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t:host {\n\t\t\tposition: relative;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t:host(:hover) .buttons {\n\t\t\tdisplay: block;\n\t\t}\n\t`];\n\n\t@property({type: Number})\n\tmin: number;\n\n\t@property({type: Number})\n\tmax: number;\n\n\tvalidate() {\n\t\tsuper.validate();\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('keydown', this._onKeydown);\n\t}\n\n\t_onKeydown = (e: KeyboardEvent) => {\n\t\tswitch (e.key) {\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.up();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.down();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t_onChange = (e: InputEvent) => {\n\t\tthis.updateValue(parseFloat((e.target as HTMLInputElement).value));\n\t}\n\n\tupdateValue(value: number) {\n\t\tif (value != null) {\n\t\t\tvalue = isNaN(this.min) ? value : Math.max(value, this.min);\n\t\t\tvalue = isNaN(this.max) ? value : Math.min(value, this.max);\n\t\t}\n\t\tsuper.updateValue(value);\n\t\tthis.requestUpdate();\n\t}\n\n\tup = () => this.updateValue((this.value ?? -1) + 1);\n\tdown = () => this.updateValue((this.value ?? 1) - 1);\n\n\trender = () => html`\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\t.value=\"${this.value == null ? '' : this.value.toString()}\"\n\t\t\tplaceholder=\"${this.model?.props.placeholder}\"\n\t\t\t@change=\"${this._onChange}\" />\n\t\t<div class=\"buttons\">\n\t\t\t<div id=\"btnUp\" @click=\"${() => this.up()}\"><og-icon icon=\"caret-up\"></og-icon></div>\n\t\t\t<div id=\"btnDown\" @click=\"${() => this.down()}\"><og-icon icon=\"caret-down\"></og-icon></div>\n\t\t</div>\n\t`;\n\t\n}"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omegagrid/form",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.2",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"description": "Universal form component",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
"_prepublish": "yarn test && yarn lint"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@omegagrid/calendar": "^0.7.
|
|
31
|
-
"@omegagrid/core": "^0.7.
|
|
32
|
-
"@omegagrid/localize": "^0.7.
|
|
33
|
-
"@omegagrid/tree": "^0.7.
|
|
30
|
+
"@omegagrid/calendar": "^0.7.2",
|
|
31
|
+
"@omegagrid/core": "^0.7.2",
|
|
32
|
+
"@omegagrid/localize": "^0.7.2",
|
|
33
|
+
"@omegagrid/tree": "^0.7.2",
|
|
34
34
|
"lit": "^3.1.1",
|
|
35
35
|
"lit-html": "^3.1.1",
|
|
36
36
|
"ts-debounce": "^4.0.0"
|