@operato/input 1.0.0-beta.50 → 1.0.0-beta.51

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.0.0-beta.51](https://github.com/hatiolab/operato/compare/v1.0.0-beta.50...v1.0.0-beta.51) (2022-07-22)
7
+
8
+ **Note:** Version bump only for package @operato/input
9
+
10
+
11
+
12
+
13
+
6
14
  ## [1.0.0-beta.50](https://github.com/hatiolab/operato/compare/v1.0.0-beta.49...v1.0.0-beta.50) (2022-07-18)
7
15
 
8
16
 
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent property-editor following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "heartyoh@hatiolab.com",
6
- "version": "1.0.0-beta.50",
6
+ "version": "1.0.0-beta.51",
7
7
  "main": "dist/src/index.js",
8
8
  "module": "dist/src/index.js",
9
9
  "publishConfig": {
@@ -62,11 +62,11 @@
62
62
  "dependencies": {
63
63
  "@lit/localize": "^0.11.2",
64
64
  "@material/mwc-icon": "^0.26.1",
65
- "@operato/color-picker": "^1.0.0-beta.50",
66
- "@operato/i18n": "^1.0.0-beta.50",
67
- "@operato/popup": "^1.0.0-beta.50",
68
- "@operato/styles": "^1.0.0-beta.50",
69
- "@operato/utils": "^1.0.0-beta.50",
65
+ "@operato/color-picker": "^1.0.0-beta.51",
66
+ "@operato/i18n": "^1.0.0-beta.51",
67
+ "@operato/popup": "^1.0.0-beta.51",
68
+ "@operato/styles": "^1.0.0-beta.51",
69
+ "@operato/utils": "^1.0.0-beta.51",
70
70
  "@polymer/paper-dropdown-menu": "^3.2.0",
71
71
  "@polymer/paper-item": "^3.0.1",
72
72
  "@thebespokepixel/es-tinycolor": "^3.1.0",
@@ -109,5 +109,5 @@
109
109
  "prettier --write"
110
110
  ]
111
111
  },
112
- "gitHead": "9b3a8e88bfb7b868f30c7c049447d3c65e32f7df"
112
+ "gitHead": "ff69dd0c2fb77f993d0a0677aa5f095d3e0134ff"
113
113
  }
@@ -1,28 +0,0 @@
1
- import '../src/ox-select.js';
2
- import '../src/ox-checkbox.js';
3
- import { TemplateResult } from 'lit';
4
- declare const _default: {
5
- title: string;
6
- component: string;
7
- argTypes: {
8
- placeholder: {
9
- control: string;
10
- };
11
- name: {
12
- control: string;
13
- };
14
- };
15
- };
16
- export default _default;
17
- interface Story<T> {
18
- (args: T): TemplateResult;
19
- args?: Partial<T>;
20
- argTypes?: Record<string, unknown>;
21
- }
22
- interface ArgTypes {
23
- placeholder?: string;
24
- name?: string;
25
- value?: object | string;
26
- slot?: TemplateResult;
27
- }
28
- export declare const Regular: Story<ArgTypes>;
@@ -1,60 +0,0 @@
1
- import '../src/ox-select.js';
2
- import '../src/ox-checkbox.js';
3
- import { html } from 'lit';
4
- export default {
5
- title: 'ox-select-dynamic',
6
- component: 'ox-select',
7
- argTypes: {
8
- placeholder: { control: 'text' },
9
- name: { control: 'text' }
10
- }
11
- };
12
- const Template = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot }) => {
13
- var options = [];
14
- return html `
15
- <link href="/themes/app-theme.css" rel="stylesheet" />
16
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
17
-
18
- <ox-select
19
- name=${name}
20
- @change=${(e) => {
21
- console.log(e.target.value);
22
- }}
23
- @click=${(e) => {
24
- options = [
25
- {
26
- display: 'LABEL-A',
27
- value: 'A'
28
- },
29
- {
30
- display: 'LABEL-B',
31
- value: 'B'
32
- },
33
- {
34
- display: 'LABEL-C',
35
- value: 'C'
36
- },
37
- {
38
- display: 'LABEL-D',
39
- value: 'D'
40
- }
41
- ];
42
- e.currentTarget.requestUpdate();
43
- }}
44
- placeholder=${placeholder}
45
- .value=${value}
46
- >
47
- <ox-popup-list align-left nowrap>
48
- ${options.map(option => html ` <div option value=${option.value}>${option.display}</div> `)}
49
- </ox-popup-list>
50
- </ox-select>
51
- `;
52
- };
53
- export const Regular = Template.bind({});
54
- Regular.args = {
55
- placeholder: 'single select',
56
- name: 'label',
57
- value: 'C',
58
- slot: html ` <ox-popup-list align-left nowrap> </ox-popup-list> `
59
- };
60
- //# sourceMappingURL=ox-select-dynamic.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-select-dynamic.stories.js","sourceRoot":"","sources":["../../stories/ox-select-dynamic.stories.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,IAAI,EAA8B,MAAM,KAAK,CAAA;AAEtD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC1B;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,WAAW,GAAG,UAAU,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAY,EAAE,EAAE;IAC7G,IAAI,OAAO,GAAG,EAA0C,CAAA;IAExD,OAAO,IAAI,CAAA;;;;;aAKA,IAAI;gBACD,CAAC,CAAQ,EAAE,EAAE;QACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;IACnD,CAAC;eACQ,CAAC,CAAQ,EAAE,EAAE;QACpB,OAAO,GAAG;YACR;gBACE,OAAO,EAAE,SAAS;gBAClB,KAAK,EAAE,GAAG;aACX;YACD;gBACE,OAAO,EAAE,SAAS;gBAClB,KAAK,EAAE,GAAG;aACX;YACD;gBACE,OAAO,EAAE,SAAS;gBAClB,KAAK,EAAE,GAAG;aACX;YACD;gBACE,OAAO,EAAE,SAAS;gBAClB,KAAK,EAAE,GAAG;aACX;SACF,CACA;QAAC,CAAC,CAAC,aAA4B,CAAC,aAAa,EAAE,CAAA;IAClD,CAAC;oBACa,WAAW;eAChB,KAAK;;;UAGV,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,sBAAsB,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,SAAS,CAAC;;;GAG/F,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,eAAe;IAC5B,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,GAAG;IACV,IAAI,EAAE,IAAI,CAAA,sDAAsD;CACjE,CAAA","sourcesContent":["import '../src/ox-select.js'\nimport '../src/ox-checkbox.js'\n\nimport { html, LitElement, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-select-dynamic',\n component: 'ox-select',\n argTypes: {\n placeholder: { control: 'text' },\n name: { control: 'text' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n placeholder?: string\n name?: string\n value?: object | string\n slot?: TemplateResult\n}\n\nconst Template: Story<ArgTypes> = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot }: ArgTypes) => {\n var options = [] as { display: string; value: string }[]\n\n return html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n\n <ox-select\n name=${name}\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n @click=${(e: Event) => {\n options = [\n {\n display: 'LABEL-A',\n value: 'A'\n },\n {\n display: 'LABEL-B',\n value: 'B'\n },\n {\n display: 'LABEL-C',\n value: 'C'\n },\n {\n display: 'LABEL-D',\n value: 'D'\n }\n ]\n ;(e.currentTarget as LitElement).requestUpdate()\n }}\n placeholder=${placeholder}\n .value=${value}\n >\n <ox-popup-list align-left nowrap>\n ${options.map(option => html` <div option value=${option.value}>${option.display}</div> `)}\n </ox-popup-list>\n </ox-select>\n `\n}\n\nexport const Regular = Template.bind({})\nRegular.args = {\n placeholder: 'single select',\n name: 'label',\n value: 'C',\n slot: html` <ox-popup-list align-left nowrap> </ox-popup-list> `\n}\n"]}
@@ -1,30 +0,0 @@
1
- import '../src/ox-select.js';
2
- import '../src/ox-checkbox.js';
3
- import { TemplateResult } from 'lit';
4
- declare const _default: {
5
- title: string;
6
- component: string;
7
- argTypes: {
8
- placeholder: {
9
- control: string;
10
- };
11
- name: {
12
- control: string;
13
- };
14
- };
15
- };
16
- export default _default;
17
- interface Story<T> {
18
- (args: T): TemplateResult;
19
- args?: Partial<T>;
20
- argTypes?: Record<string, unknown>;
21
- }
22
- interface ArgTypes {
23
- placeholder?: string;
24
- name?: string;
25
- value?: object | string;
26
- slot?: TemplateResult;
27
- }
28
- export declare const Regular: Story<ArgTypes>;
29
- export declare const MultipleSelect: Story<ArgTypes>;
30
- export declare const MultipleWithCheckbox: Story<ArgTypes>;
@@ -1,83 +0,0 @@
1
- import '../src/ox-select.js';
2
- import '../src/ox-checkbox.js';
3
- import { html } from 'lit';
4
- export default {
5
- title: 'ox-select',
6
- component: 'ox-select',
7
- argTypes: {
8
- placeholder: { control: 'text' },
9
- name: { control: 'text' }
10
- }
11
- };
12
- const Template = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot }) => html `
13
- <link href="/themes/app-theme.css" rel="stylesheet" />
14
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
15
-
16
- <ox-select
17
- name=${name}
18
- @change=${(e) => {
19
- console.log(e.target.value);
20
- }}
21
- placeholder=${placeholder}
22
- .value=${value}
23
- >
24
- ${slot}
25
- </ox-select>
26
- `;
27
- export const Regular = Template.bind({});
28
- Regular.args = {
29
- placeholder: 'single select',
30
- name: 'label',
31
- value: 'C',
32
- slot: html `
33
- <ox-popup-list align-left nowrap>
34
- <div option value="A">LABEL-A</div>
35
- <div option value="B">LABEL-B</div>
36
- <div option value="C">LABEL-C</div>
37
- <div option value="TOO LONG VALUE">LABEL-TOO LONG VALUE</div>
38
- </ox-popup-list>
39
- `
40
- };
41
- export const MultipleSelect = Template.bind({});
42
- MultipleSelect.args = {
43
- placeholder: 'multiple select',
44
- name: 'multiple',
45
- value: ['B', 'TOO LONG VALUE'],
46
- slot: html `
47
- <ox-popup-list multiple with-search>
48
- <div option value="A">A</div>
49
- <div option value="B">B</div>
50
- <div option value="C">C</div>
51
- <div option value="TOO LONG VALUE" />TOO LONG VALUE</div>
52
- </ox-popup-list>
53
- `
54
- };
55
- export const MultipleWithCheckbox = Template.bind({});
56
- MultipleWithCheckbox.args = {
57
- placeholder: 'multiple with checkbox',
58
- name: 'multiple',
59
- value: ['B', 'C', 'F'],
60
- slot: html `
61
- <ox-popup-list attr-selected="checked" multiple with-search>
62
- <ox-checkbox
63
- option
64
- @change=${(e) => {
65
- const target = e.target;
66
- const options = target.parentElement.querySelectorAll('[option]');
67
- console.log(options);
68
- options.forEach(option => (option.checked = target.checked));
69
- }}
70
- >set all</ox-checkbox
71
- >
72
- <ox-checkbox option value="A">LABEL-A</ox-checkbox>
73
- <ox-checkbox option value="B">LABEL-B</ox-checkbox>
74
- <ox-checkbox option value="C" checked>LABEL-C</ox-checkbox>
75
- <ox-checkbox option value="D">LABEL-D</ox-checkbox>
76
- <ox-checkbox option value="E">LABEL-E</ox-checkbox>
77
- <ox-checkbox option value="F">LABEL-F</ox-checkbox>
78
- <ox-checkbox option value="G">LABEL-G</ox-checkbox>
79
- <ox-checkbox option value="TOO LONG VALUE">TOO LONG VALUE</ox-checkbox>
80
- </ox-popup-list>
81
- `
82
- };
83
- //# sourceMappingURL=ox-select.stories%20copy.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-select.stories copy.js","sourceRoot":"","sources":["../../stories/ox-select.stories copy.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC1B;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,WAAW,GAAG,UAAU,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;WAKzG,IAAI;cACD,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;kBACa,WAAW;aAChB,KAAK;;MAEZ,IAAI;;CAET,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,eAAe;IAC5B,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,GAAG;IACV,IAAI,EAAE,IAAI,CAAA;;;;;;;GAOT;CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,WAAW,EAAE,iBAAiB;IAC9B,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,CAAC,GAAG,EAAE,gBAAgB,CAAC;IAC9B,IAAI,EAAE,IAAI,CAAA;;;;;;;GAOT;CACF,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,WAAW,EAAE,wBAAwB;IACrC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IACtB,IAAI,EAAE,IAAI,CAAA;;;;kBAIM,CAAC,CAAQ,EAAE,EAAE;QACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,MAAM,OAAO,GAAG,MAAM,CAAC,aAAc,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAA;QAClE,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QACpB,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAE,MAA2B,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAA;IACpF,CAAC;;;;;;;;;;;;GAYN;CACF,CAAA","sourcesContent":["import '../src/ox-select.js'\nimport '../src/ox-checkbox.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-select',\n component: 'ox-select',\n argTypes: {\n placeholder: { control: 'text' },\n name: { control: 'text' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n placeholder?: string\n name?: string\n value?: object | string\n slot?: TemplateResult\n}\n\nconst Template: Story<ArgTypes> = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n\n <ox-select\n name=${name}\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n placeholder=${placeholder}\n .value=${value}\n >\n ${slot}\n </ox-select>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n placeholder: 'single select',\n name: 'label',\n value: 'C',\n slot: html`\n <ox-popup-list align-left nowrap>\n <div option value=\"A\">LABEL-A</div>\n <div option value=\"B\">LABEL-B</div>\n <div option value=\"C\">LABEL-C</div>\n <div option value=\"TOO LONG VALUE\">LABEL-TOO LONG VALUE</div>\n </ox-popup-list>\n `\n}\n\nexport const MultipleSelect = Template.bind({})\nMultipleSelect.args = {\n placeholder: 'multiple select',\n name: 'multiple',\n value: ['B', 'TOO LONG VALUE'],\n slot: html`\n <ox-popup-list multiple with-search>\n <div option value=\"A\">A</div>\n <div option value=\"B\">B</div>\n <div option value=\"C\">C</div>\n <div option value=\"TOO LONG VALUE\" />TOO LONG VALUE</div>\n </ox-popup-list>\n `\n}\n\nexport const MultipleWithCheckbox = Template.bind({})\nMultipleWithCheckbox.args = {\n placeholder: 'multiple with checkbox',\n name: 'multiple',\n value: ['B', 'C', 'F'],\n slot: html`\n <ox-popup-list attr-selected=\"checked\" multiple with-search>\n <ox-checkbox\n option\n @change=${(e: Event) => {\n const target = e.target as HTMLInputElement\n const options = target.parentElement!.querySelectorAll('[option]')\n console.log(options)\n options.forEach(option => ((option as HTMLInputElement).checked = target.checked))\n }}\n >set all</ox-checkbox\n >\n <ox-checkbox option value=\"A\">LABEL-A</ox-checkbox>\n <ox-checkbox option value=\"B\">LABEL-B</ox-checkbox>\n <ox-checkbox option value=\"C\" checked>LABEL-C</ox-checkbox>\n <ox-checkbox option value=\"D\">LABEL-D</ox-checkbox>\n <ox-checkbox option value=\"E\">LABEL-E</ox-checkbox>\n <ox-checkbox option value=\"F\">LABEL-F</ox-checkbox>\n <ox-checkbox option value=\"G\">LABEL-G</ox-checkbox>\n <ox-checkbox option value=\"TOO LONG VALUE\">TOO LONG VALUE</ox-checkbox>\n </ox-popup-list>\n `\n}\n"]}