@operato/input 1.0.0-beta.16 → 1.0.0-beta.19
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 +28 -0
- package/dist/src/ox-input-file.js +5 -3
- package/dist/src/ox-input-file.js.map +1 -1
- package/dist/src/ox-input-range.js +35 -38
- package/dist/src/ox-input-range.js.map +1 -1
- package/dist/src/ox-input-search.d.ts +0 -1
- package/dist/src/ox-input-search.js +7 -3
- package/dist/src/ox-input-search.js.map +1 -1
- package/dist/src/ox-input-unit.d.ts +1 -1
- package/dist/src/ox-input-unit.js +13 -3
- package/dist/src/ox-input-unit.js.map +1 -1
- package/dist/src/ox-input-work-shift.js +58 -26
- package/dist/src/ox-input-work-shift.js.map +1 -1
- package/dist/src/ox-select.js +12 -1
- package/dist/src/ox-select.js.map +1 -1
- package/dist/stories/ox-input-crontab.stories.d.ts +26 -0
- package/dist/stories/ox-input-crontab.stories.js +37 -0
- package/dist/stories/ox-input-crontab.stories.js.map +1 -0
- package/dist/stories/ox-input-file.stories.d.ts +49 -0
- package/dist/stories/ox-input-file.stories.js +48 -0
- package/dist/stories/ox-input-file.stories.js.map +1 -0
- package/dist/stories/ox-input-range.stories.js +3 -0
- package/dist/stories/ox-input-range.stories.js.map +1 -1
- package/dist/stories/ox-input-search.stories.js +5 -1
- package/dist/stories/ox-input-search.stories.js.map +1 -1
- package/dist/stories/ox-input-unit.stories.js +1 -0
- package/dist/stories/ox-input-unit.stories.js.map +1 -1
- package/dist/stories/ox-select.stories.js +1 -0
- package/dist/stories/ox-select.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -7
- package/src/ox-input-file.ts +7 -6
- package/src/ox-input-range.ts +35 -38
- package/src/ox-input-search.ts +7 -4
- package/src/ox-input-unit.ts +15 -4
- package/src/ox-input-work-shift.ts +58 -26
- package/src/ox-select.ts +15 -3
- package/stories/{ox-input-conntab.stories.ts → ox-input-crontab.stories.ts} +0 -0
- package/stories/ox-input-file.stories.ts +77 -0
- package/stories/ox-input-range.stories.ts +3 -0
- package/stories/ox-input-search.stories.ts +5 -1
- package/stories/ox-input-unit.stories.ts +2 -1
- package/stories/ox-select.stories.ts +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AAExC,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\nimport { TooltipStyles } from '@operato/styles'\nimport { detectOverflow } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\nfunction onmouseover(e: Event) {\n const element = e.target as HTMLSpanElement\n if (detectOverflow(element)) {\n element.setAttribute('data-tooltip', element.textContent!)\n }\n}\n\nfunction onmouseout(e: Event) {\n const element = e.target as HTMLSpanElement\n element.removeAttribute('data-tooltip')\n}\n\n@customElement('ox-select')\nexport class Select extends OxFormField {\n static styles = [\n TooltipStyles,\n css`\n :host {\n display: block;\n position: relative;\n }\n\n div {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n font: var(--input-font);\n color: var(--primary-text-color);\n }\n\n span {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n div:hover {\n border-bottom: 1px solid var(--primary-color);\n }\n\n mwc-icon {\n display: block;\n width: 24px;\n text-align: right;\n font-size: 18px;\n color: var(--theme-primary-text-color, #3c3938);\n opacity: 0.7;\n }\n div:hover mwc-icon {\n color: var(--primary-color);\n }\n\n ::slotted(ox-popup-list) {\n width: 100%;\n }\n `\n ]\n\n @property({ type: String }) name: string = ''\n @property({ type: String }) placeholder: string = ''\n\n @state() label: string | string[] = ''\n\n render() {\n const label = (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) || this.placeholder || ''\n\n return html`\n <div @click=${this.expand}>\n <span @mouseover=${onmouseover} @mouseout=${onmouseout}>${label}</span>\n <mwc-icon>expand_more</mwc-icon>\n </div>\n\n <slot></slot>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n\n this.addEventListener('select', (e: Event) => {\n this.value = (e as CustomEvent).detail\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n })\n\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n e.preventDefault()\n\n if (e.key === ' ' || e.key == 'Spacebar' || e.key == 'ArrowDown') {\n this.expand()\n }\n })\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n const popupList = this.querySelector('ox-popup-list') as OxPopupList\n popupList.value = this.value\n\n await this.requestUpdate()\n this.label = popupList.getSelectedLabels()\n }\n }\n\n expand() {\n const popupList = this.querySelector('ox-popup-list') as OxPopupList\n\n if (popupList) {\n popupList.style.width = `${this.offsetWidth}px`\n const align = popupList.hasAttribute('align-left') ? 'left' : 'right'\n\n const props = {\n top: this.offsetHeight,\n [align]: 0\n }\n\n popupList.open(props)\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import '../src/ox-input-crontab.js';
|
|
2
|
+
import '../src/locale/locale-picker.js';
|
|
3
|
+
import { TemplateResult } from 'lit';
|
|
4
|
+
declare const _default: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: string;
|
|
7
|
+
argTypes: {
|
|
8
|
+
value: {
|
|
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
|
+
name?: string;
|
|
24
|
+
value?: string;
|
|
25
|
+
}
|
|
26
|
+
export declare const Regular: Story<ArgTypes>;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import '../src/ox-input-crontab.js';
|
|
2
|
+
import '../src/locale/locale-picker.js';
|
|
3
|
+
import { html } from 'lit';
|
|
4
|
+
export default {
|
|
5
|
+
title: 'ox-input-crontab',
|
|
6
|
+
component: 'ox-input-crontab',
|
|
7
|
+
argTypes: {
|
|
8
|
+
value: { control: 'text' },
|
|
9
|
+
name: { control: 'text' }
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
const Template = ({ name = 'crontab', value = '* * * * * *' }) => 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
|
+
<style>
|
|
16
|
+
body {
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
19
|
+
|
|
20
|
+
<locale-picker></locale-picker>
|
|
21
|
+
<br /><br />
|
|
22
|
+
|
|
23
|
+
<ox-input-crontab
|
|
24
|
+
@change=${(e) => {
|
|
25
|
+
console.log(e.target.value);
|
|
26
|
+
}}
|
|
27
|
+
name=${name}
|
|
28
|
+
.value=${value}
|
|
29
|
+
>
|
|
30
|
+
</ox-input-crontab>
|
|
31
|
+
`;
|
|
32
|
+
export const Regular = Template.bind({});
|
|
33
|
+
Regular.args = {
|
|
34
|
+
name: 'crontab',
|
|
35
|
+
value: '* * * * * *'
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=ox-input-crontab.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-crontab.stories.js","sourceRoot":"","sources":["../../stories/ox-input-crontab.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC1B;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,GAAG,aAAa,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;cAYnF,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;;;CAGjB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,aAAa;CACrB,CAAA","sourcesContent":["import '../src/ox-input-crontab.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-crontab',\n component: 'ox-input-crontab',\n argTypes: {\n value: { 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 name?: string\n value?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *' }: 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 <style>\n body {\n }\n </style>\n\n <locale-picker></locale-picker>\n <br /><br />\n\n <ox-input-crontab\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n .value=${value}\n >\n </ox-input-crontab>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'crontab',\n value: '* * * * * *'\n}\n"]}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import '../src/ox-input-file.js';
|
|
2
|
+
import { TemplateResult } from 'lit';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: string;
|
|
6
|
+
argTypes: {
|
|
7
|
+
name: {
|
|
8
|
+
control: string;
|
|
9
|
+
};
|
|
10
|
+
multiple: {
|
|
11
|
+
control: string;
|
|
12
|
+
};
|
|
13
|
+
accept: {
|
|
14
|
+
control: string;
|
|
15
|
+
};
|
|
16
|
+
icon: {
|
|
17
|
+
control: string;
|
|
18
|
+
};
|
|
19
|
+
label: {
|
|
20
|
+
control: string;
|
|
21
|
+
};
|
|
22
|
+
description: {
|
|
23
|
+
control: string;
|
|
24
|
+
};
|
|
25
|
+
hideFileList: {
|
|
26
|
+
control: string;
|
|
27
|
+
};
|
|
28
|
+
attachFileList: {
|
|
29
|
+
control: string;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
export default _default;
|
|
34
|
+
interface Story<T> {
|
|
35
|
+
(args: T): TemplateResult;
|
|
36
|
+
args?: Partial<T>;
|
|
37
|
+
argTypes?: Record<string, unknown>;
|
|
38
|
+
}
|
|
39
|
+
interface ArgTypes {
|
|
40
|
+
label?: string;
|
|
41
|
+
name?: string;
|
|
42
|
+
multiple?: boolean;
|
|
43
|
+
accept?: string;
|
|
44
|
+
icon?: string;
|
|
45
|
+
description?: string;
|
|
46
|
+
hideFileList?: boolean;
|
|
47
|
+
attachFileList?: boolean;
|
|
48
|
+
}
|
|
49
|
+
export declare const Regular: Story<ArgTypes>;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import '../src/ox-input-file.js';
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
export default {
|
|
4
|
+
title: 'ox-input-file',
|
|
5
|
+
component: 'ox-input-file',
|
|
6
|
+
argTypes: {
|
|
7
|
+
name: { control: 'text' },
|
|
8
|
+
multiple: { control: 'boolean' },
|
|
9
|
+
accept: { control: 'text' },
|
|
10
|
+
icon: { control: 'text' },
|
|
11
|
+
label: { control: 'text' },
|
|
12
|
+
description: { control: 'text' },
|
|
13
|
+
hideFileList: { control: 'boolean' },
|
|
14
|
+
attachFileList: { control: 'boolean' }
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
const Template = ({ label = 'select files', name = 'file', multiple = true, accept, icon, description, hideFileList = false, attachFileList = false }) => html `
|
|
18
|
+
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
19
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
20
|
+
<style>
|
|
21
|
+
body {
|
|
22
|
+
}
|
|
23
|
+
</style>
|
|
24
|
+
|
|
25
|
+
<ox-input-file
|
|
26
|
+
label=${label}
|
|
27
|
+
name=${name}
|
|
28
|
+
?multiple=${multiple}
|
|
29
|
+
?hide-filelist=${hideFileList}
|
|
30
|
+
?attach-filelist=${attachFileList}
|
|
31
|
+
accept=${accept}
|
|
32
|
+
icon=${icon}
|
|
33
|
+
description=${description}
|
|
34
|
+
>
|
|
35
|
+
</ox-input-file>
|
|
36
|
+
`;
|
|
37
|
+
export const Regular = Template.bind({});
|
|
38
|
+
Regular.args = {
|
|
39
|
+
label: 'select files',
|
|
40
|
+
name: 'files',
|
|
41
|
+
multiple: true,
|
|
42
|
+
hideFileList: false,
|
|
43
|
+
attachFileList: false,
|
|
44
|
+
accept: '*.*',
|
|
45
|
+
icon: 'upload',
|
|
46
|
+
description: 'drop files here!'
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=ox-input-file.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-file.stories.js","sourceRoot":"","sources":["../../stories/ox-input-file.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC3B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACpC,cAAc,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACvC;CACF,CAAA;AAmBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,cAAc,EACtB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,IAAI,EACf,MAAM,EACN,IAAI,EACJ,WAAW,EACX,YAAY,GAAG,KAAK,EACpB,cAAc,GAAG,KAAK,EACb,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;YASR,KAAK;WACN,IAAI;gBACC,QAAQ;qBACH,YAAY;uBACV,cAAc;aACxB,MAAM;WACR,IAAI;kBACG,WAAW;;;CAG5B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,IAAI;IACd,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,kBAAkB;CAChC,CAAA","sourcesContent":["import '../src/ox-input-file.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-file',\n component: 'ox-input-file',\n argTypes: {\n name: { control: 'text' },\n multiple: { control: 'boolean' },\n accept: { control: 'text' },\n icon: { control: 'text' },\n label: { control: 'text' },\n description: { control: 'text' },\n hideFileList: { control: 'boolean' },\n attachFileList: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n label?: string\n name?: string\n multiple?: boolean\n accept?: string\n icon?: string\n description?: string\n hideFileList?: boolean\n attachFileList?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n label = 'select files',\n name = 'file',\n multiple = true,\n accept,\n icon,\n description,\n hideFileList = false,\n attachFileList = false\n}: 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 <style>\n body {\n }\n </style>\n\n <ox-input-file\n label=${label}\n name=${name}\n ?multiple=${multiple}\n ?hide-filelist=${hideFileList}\n ?attach-filelist=${attachFileList}\n accept=${accept}\n icon=${icon}\n description=${description}\n >\n </ox-input-file>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n label: 'select files',\n name: 'files',\n multiple: true,\n hideFileList: false,\n attachFileList: false,\n accept: '*.*',\n icon: 'upload',\n description: 'drop files here!'\n}\n"]}
|
|
@@ -12,6 +12,9 @@ export default {
|
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
14
|
const Template = ({ name = 'range', value = 0, step = 1, min = 0, max = 100 }) => 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
|
+
|
|
15
18
|
<ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max}> </ox-input-range>
|
|
16
19
|
`;
|
|
17
20
|
export const Regular = Template.bind({});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-range.stories.js","sourceRoot":"","sources":["../../stories/ox-input-range.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC1B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC3B;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA
|
|
1
|
+
{"version":3,"file":"ox-input-range.stories.js","sourceRoot":"","sources":["../../stories/ox-input-range.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC1B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC3B;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;yBAIxF,IAAI,UAAU,KAAK,SAAS,IAAI,QAAQ,GAAG,QAAQ,GAAG;CAC9E,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;CACT,CAAA","sourcesContent":["import '../src/ox-input-range.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-range',\n component: 'ox-input-range',\n argTypes: {\n name: { control: 'text' },\n value: { control: 'number' },\n step: { control: 'number' },\n min: { control: 'number' },\n max: { control: 'number' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n value?: number\n step?: number\n min?: number\n max?: number\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'range', value = 0, step = 1, min = 0, max = 100 }: 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-input-range name=${name} value=${value} step=${step} min=${min} max=${max}> </ox-input-range>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'range',\n value: 0,\n step: 1,\n min: 0,\n max: 100\n}\n"]}
|
|
@@ -17,7 +17,11 @@ const Template = ({ placeholder = 'Search', name = 'hello', value = '' }) => htm
|
|
|
17
17
|
}
|
|
18
18
|
</style>
|
|
19
19
|
|
|
20
|
-
<ox-input-search
|
|
20
|
+
<ox-input-search
|
|
21
|
+
@change=${(e) => console.log('changed', e.target.value)}
|
|
22
|
+
name=${name}
|
|
23
|
+
.checked=${value}
|
|
24
|
+
>
|
|
21
25
|
</ox-input-search>
|
|
22
26
|
`;
|
|
23
27
|
export const Regular = Template.bind({});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-search.stories.js","sourceRoot":"","sources":["../../stories/ox-input-search.stories.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,WAAW,GAAG,QAAQ,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA
|
|
1
|
+
{"version":3,"file":"ox-input-search.stories.js","sourceRoot":"","sources":["../../stories/ox-input-search.stories.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,WAAW,GAAG,QAAQ,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cAS9F,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;WAC7E,IAAI;eACA,KAAK;;;CAGnB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,OAAO;IACpB,IAAI,EAAE,OAAO;CACd,CAAA","sourcesContent":["import '../src/ox-input-search.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-search',\n component: 'ox-input-search',\n argTypes: {\n placeholder: { control: 'text' },\n name: { control: 'text' },\n value: { 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?: string\n}\n\nconst Template: Story<ArgTypes> = ({ placeholder = 'Search', name = 'hello', value = '' }: 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 <style>\n body {\n }\n </style>\n\n <ox-input-search\n @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}\n name=${name}\n .checked=${value}\n >\n </ox-input-search>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n placeholder: 'label',\n name: 'label'\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-unit.stories.js","sourceRoot":"","sources":["../../stories/ox-input-unit.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-input-unit.stories.js","sourceRoot":"","sources":["../../stories/ox-input-unit.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;QACtD,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,CAAC,EAAE;KACvE;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,MAAM,EACpB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,CAAC,EACT,OAAO,GAAG,IAAI,EACd,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;WAGT,IAAI;kBACG,WAAW;aAChB,KAAK;eACH,OAAO;gBACN,QAAQ;cACV,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;;;CAGtD,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACvC,MAAM,CAAC,IAAI,GAAG;IACZ,WAAW,EAAE,QAAQ;IACrB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,GAAG;CACd,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACtC,KAAK,CAAC,IAAI,GAAG;IACX,WAAW,EAAE,OAAO;IACpB,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,QAAQ;CACnB,CAAA","sourcesContent":["import '../src/ox-input-unit.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-unit',\n component: 'ox-input-unit',\n argTypes: {\n placeholder: { control: 'text' },\n name: { control: 'text' },\n value: { control: 'number' },\n stdUnit: { control: 'select', options: ['kg', 'rad'] },\n userUnit: { control: 'select', options: ['mg', 'g', 'ton', 'degree'] }\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?: number\n stdUnit: string\n userUnit?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n placeholder = 'unit',\n name = 'hello',\n value = 0,\n stdUnit = 'kg',\n userUnit\n}: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <ox-input-unit\n name=${name}\n placeholder=${placeholder}\n .value=${value}\n std-unit=${stdUnit}\n user-unit=${userUnit}\n @change=${(e: CustomEvent) => console.log(e.detail)}\n >\n </ox-input-unit>\n`\n\nexport const Weight = Template.bind({})\nWeight.args = {\n placeholder: 'weight',\n name: 'weight',\n value: 0,\n stdUnit: 'kg',\n userUnit: 'g'\n}\n\nexport const Angle = Template.bind({})\nAngle.args = {\n placeholder: 'angle',\n name: 'angle',\n value: 0,\n stdUnit: 'rad',\n userUnit: 'degree'\n}\n"]}
|
|
@@ -10,6 +10,7 @@ export default {
|
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
12
|
const Template = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot }) => html `
|
|
13
|
+
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
13
14
|
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
14
15
|
|
|
15
16
|
<ox-select
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-select.stories.js","sourceRoot":"","sources":["../../stories/ox-select.stories.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
|
|
1
|
+
{"version":3,"file":"ox-select.stories.js","sourceRoot":"","sources":["../../stories/ox-select.stories.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,EAAE;IACT,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: '',\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"]}
|