@operato/popup 9.0.0-beta.6 → 9.0.0
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 +154 -0
- package/dist/src/ox-popup-list.js +1 -1
- package/dist/src/ox-popup-list.js.map +1 -1
- package/dist/src/ox-popup-menu.js +1 -1
- package/dist/src/ox-popup-menu.js.map +1 -1
- package/dist/src/ox-popup.d.ts +2 -0
- package/dist/src/ox-popup.js +45 -11
- package/dist/src/ox-popup.js.map +1 -1
- package/dist/src/ox-prompt.js +7 -5
- package/dist/src/ox-prompt.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -7
- package/dist/stories/open-popup.stories.d.ts +0 -47
- package/dist/stories/open-popup.stories.js +0 -75
- package/dist/stories/open-popup.stories.js.map +0 -1
- package/dist/stories/ox-popup-list-sortable.stories.d.ts +0 -24
- package/dist/stories/ox-popup-list-sortable.stories.js +0 -196
- package/dist/stories/ox-popup-list-sortable.stories.js.map +0 -1
- package/dist/stories/ox-popup-list.stories.d.ts +0 -23
- package/dist/stories/ox-popup-list.stories.js +0 -104
- package/dist/stories/ox-popup-list.stories.js.map +0 -1
- package/dist/stories/ox-popup-menu.stories.d.ts +0 -19
- package/dist/stories/ox-popup-menu.stories.js +0 -175
- package/dist/stories/ox-popup-menu.stories.js.map +0 -1
- package/dist/stories/ox-popup.stories.d.ts +0 -16
- package/dist/stories/ox-popup.stories.js +0 -66
- package/dist/stories/ox-popup.stories.js.map +0 -1
- package/dist/stories/ox-prompt-icon.stories.d.ts +0 -26
- package/dist/stories/ox-prompt-icon.stories.js +0 -68
- package/dist/stories/ox-prompt-icon.stories.js.map +0 -1
- package/dist/stories/ox-prompt-normal.stories.d.ts +0 -21
- package/dist/stories/ox-prompt-normal.stories.js +0 -65
- package/dist/stories/ox-prompt-normal.stories.js.map +0 -1
- package/dist/stories/ox-prompt.stories.d.ts +0 -20
- package/dist/stories/ox-prompt.stories.js +0 -66
- package/dist/stories/ox-prompt.stories.js.map +0 -1
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ox-popup.stories.js","sourceRoot":"","sources":["../../stories/ox-popup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,OAAO,CAAC,IAAI,CAAC;QACX,QAAQ,EAAE,IAAI,CAAA,YAAY,OAAO,KAAK;QACtC,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;QACf,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,CAAC,CAAC,MAAqB;KAChC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBlD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;2BAmBJ,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;;CAGrD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/all.js'\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPopup } from '../src/ox-popup.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'Simple Popup',\n component: 'ox-popup',\n argTypes: {}\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nfunction popup(e: MouseEvent) {\n const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n OxPopup.open({\n template: html`<img src=${noImage} />`,\n top: e.offsetY,\n left: e.offsetX,\n backdrop: true,\n parent: e.target as HTMLElement\n })\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n #place {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n width: 50%;\n height: 50%;\n text-align: center;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <div id=\"place\" @click=${(e: MouseEvent) => popup(e)} class=\"md-typescale-display-medium\">\n Click this to popup image\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
|
@@ -1,26 +0,0 @@
|
|
1
|
-
import '@material/web/all.js';
|
2
|
-
import { TemplateResult } from 'lit';
|
3
|
-
declare const _default: {
|
4
|
-
title: string;
|
5
|
-
component: string;
|
6
|
-
argTypes: {
|
7
|
-
type: {
|
8
|
-
control: string;
|
9
|
-
options: string[];
|
10
|
-
};
|
11
|
-
preventCloseOnBlur: {
|
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
|
-
type: 'success' | 'error' | 'warning' | 'info' | 'question';
|
24
|
-
preventCloseOnBlur: boolean;
|
25
|
-
}
|
26
|
-
export declare const Regular: Story<ArgTypes>;
|
@@ -1,68 +0,0 @@
|
|
1
|
-
import '@material/web/all.js';
|
2
|
-
import { html } from 'lit';
|
3
|
-
import { OxPrompt } from '../src/ox-prompt.js';
|
4
|
-
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
|
5
|
-
export default {
|
6
|
-
title: 'OxPrompt - Icon',
|
7
|
-
component: 'ox-prompt',
|
8
|
-
argTypes: {
|
9
|
-
type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },
|
10
|
-
preventCloseOnBlur: { control: 'boolean' }
|
11
|
-
}
|
12
|
-
};
|
13
|
-
function popup(e, type = 'warning', preventCloseOnBlur) {
|
14
|
-
OxPrompt.open({
|
15
|
-
title: 'Are you sure ?',
|
16
|
-
text: 'Are you sure to exit this page ?',
|
17
|
-
type,
|
18
|
-
icon: 'logout',
|
19
|
-
confirmButton: { text: 'Confirm' },
|
20
|
-
cancelButton: { text: 'Cancel' },
|
21
|
-
preventCloseOnBlur
|
22
|
-
});
|
23
|
-
}
|
24
|
-
const Template = ({ type, preventCloseOnBlur }) => html `
|
25
|
-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
26
|
-
|
27
|
-
<link href="/themes/light.css" rel="stylesheet" />
|
28
|
-
<link href="/themes/dark.css" rel="stylesheet" />
|
29
|
-
<link href="/themes/spacing.css" rel="stylesheet" />
|
30
|
-
|
31
|
-
<link
|
32
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
33
|
-
rel="stylesheet"
|
34
|
-
/>
|
35
|
-
<link
|
36
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
37
|
-
rel="stylesheet"
|
38
|
-
/>
|
39
|
-
<link
|
40
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
41
|
-
rel="stylesheet"
|
42
|
-
/>
|
43
|
-
|
44
|
-
<style>
|
45
|
-
${MDTypeScaleStyles.cssText}
|
46
|
-
</style>
|
47
|
-
|
48
|
-
<style>
|
49
|
-
#place {
|
50
|
-
width: 100%;
|
51
|
-
height: 500px;
|
52
|
-
text-align: center;
|
53
|
-
|
54
|
-
background-color: var(--md-sys-color-primary-container);
|
55
|
-
color: var(--md-sys-color-on-primary-container);
|
56
|
-
}
|
57
|
-
</style>
|
58
|
-
|
59
|
-
<div id="place" @click=${(e) => popup(e, type, preventCloseOnBlur)} class="md-typescale-display-medium">
|
60
|
-
Click this to prompt image
|
61
|
-
</div>
|
62
|
-
`;
|
63
|
-
export const Regular = Template.bind({});
|
64
|
-
Regular.args = {
|
65
|
-
type: 'warning',
|
66
|
-
preventCloseOnBlur: true
|
67
|
-
};
|
68
|
-
//# sourceMappingURL=ox-prompt-icon.stories.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ox-prompt-icon.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt-icon.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE;QACzF,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAaD,SAAS,KAAK,CACZ,CAAa,EACb,OAA8D,SAAS,EACvE,kBAA2B;IAE3B,QAAQ,CAAC,IAAI,CAAC;QACZ,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,kCAAkC;QACxC,IAAI;QACJ,IAAI,EAAE,QAAQ;QACd,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAChC,kBAAkB;KACnB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqB5E,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;2BAcJ,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,kBAAkB,CAAC;;;CAG/E,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,kBAAkB,EAAE,IAAI;CACzB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'OxPrompt - Icon',\n component: 'ox-prompt',\n argTypes: {\n type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },\n preventCloseOnBlur: { 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 type: 'success' | 'error' | 'warning' | 'info' | 'question'\n preventCloseOnBlur: boolean\n}\n\nfunction popup(\n e: MouseEvent,\n type: 'success' | 'error' | 'warning' | 'info' | 'question' = 'warning',\n preventCloseOnBlur: boolean\n) {\n OxPrompt.open({\n title: 'Are you sure ?',\n text: 'Are you sure to exit this page ?',\n type,\n icon: 'logout',\n confirmButton: { text: 'Confirm' },\n cancelButton: { text: 'Cancel' },\n preventCloseOnBlur\n })\n}\n\nconst Template: Story<ArgTypes> = ({ type, preventCloseOnBlur }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n #place {\n width: 100%;\n height: 500px;\n text-align: center;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <div id=\"place\" @click=${(e: MouseEvent) => popup(e, type, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n Click this to prompt image\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n type: 'warning',\n preventCloseOnBlur: true\n}\n"]}
|
@@ -1,21 +0,0 @@
|
|
1
|
-
import '@material/web/all.js';
|
2
|
-
import { TemplateResult } from 'lit';
|
3
|
-
declare const _default: {
|
4
|
-
title: string;
|
5
|
-
component: string;
|
6
|
-
argTypes: {
|
7
|
-
preventCloseOnBlur: {
|
8
|
-
control: string;
|
9
|
-
};
|
10
|
-
};
|
11
|
-
};
|
12
|
-
export default _default;
|
13
|
-
interface Story<T> {
|
14
|
-
(args: T): TemplateResult;
|
15
|
-
args?: Partial<T>;
|
16
|
-
argTypes?: Record<string, unknown>;
|
17
|
-
}
|
18
|
-
interface ArgTypes {
|
19
|
-
preventCloseOnBlur: boolean;
|
20
|
-
}
|
21
|
-
export declare const Regular: Story<ArgTypes>;
|
@@ -1,65 +0,0 @@
|
|
1
|
-
import '@material/web/all.js';
|
2
|
-
import { html } from 'lit';
|
3
|
-
import { OxPrompt } from '../src/ox-prompt.js';
|
4
|
-
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
|
5
|
-
export default {
|
6
|
-
title: 'OxPrompt - Normal',
|
7
|
-
component: 'ox-prompt',
|
8
|
-
argTypes: {
|
9
|
-
preventCloseOnBlur: { control: 'boolean' }
|
10
|
-
}
|
11
|
-
};
|
12
|
-
function popup(e, preventCloseOnBlur) {
|
13
|
-
const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
|
14
|
-
OxPrompt.open({
|
15
|
-
title: 'Are you sure ?',
|
16
|
-
text: 'Are you sure to exit this page ?',
|
17
|
-
confirmButton: { text: 'Confirm' },
|
18
|
-
cancelButton: { text: 'Cancel' },
|
19
|
-
preventCloseOnBlur
|
20
|
-
});
|
21
|
-
}
|
22
|
-
const Template = ({ preventCloseOnBlur }) => html `
|
23
|
-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
24
|
-
|
25
|
-
<link href="/themes/light.css" rel="stylesheet" />
|
26
|
-
<link href="/themes/dark.css" rel="stylesheet" />
|
27
|
-
<link href="/themes/spacing.css" rel="stylesheet" />
|
28
|
-
|
29
|
-
<link
|
30
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
31
|
-
rel="stylesheet"
|
32
|
-
/>
|
33
|
-
<link
|
34
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
35
|
-
rel="stylesheet"
|
36
|
-
/>
|
37
|
-
<link
|
38
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
39
|
-
rel="stylesheet"
|
40
|
-
/>
|
41
|
-
|
42
|
-
<style>
|
43
|
-
${MDTypeScaleStyles.cssText}
|
44
|
-
</style>
|
45
|
-
|
46
|
-
<style>
|
47
|
-
#place {
|
48
|
-
width: 100%;
|
49
|
-
height: 500px;
|
50
|
-
text-align: center;
|
51
|
-
|
52
|
-
background-color: var(--md-sys-color-primary-container);
|
53
|
-
color: var(--md-sys-color-on-primary-container);
|
54
|
-
}
|
55
|
-
</style>
|
56
|
-
|
57
|
-
<div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
|
58
|
-
Click this to prompt image
|
59
|
-
</div>
|
60
|
-
`;
|
61
|
-
export const Regular = Template.bind({});
|
62
|
-
Regular.args = {
|
63
|
-
preventCloseOnBlur: true
|
64
|
-
};
|
65
|
-
//# sourceMappingURL=ox-prompt-normal.stories.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ox-prompt-normal.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt-normal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa,EAAE,kBAA2B;IACvD,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,QAAQ,CAAC,IAAI,CAAC;QACZ,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,kCAAkC;QACxC,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAChC,kBAAkB;KACnB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;2BAcJ,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;CAGzE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,IAAI;CACzB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'OxPrompt - Normal',\n component: 'ox-prompt',\n argTypes: {\n preventCloseOnBlur: { 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 preventCloseOnBlur: boolean\n}\n\nfunction popup(e: MouseEvent, preventCloseOnBlur: boolean) {\n const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n OxPrompt.open({\n title: 'Are you sure ?',\n text: 'Are you sure to exit this page ?',\n confirmButton: { text: 'Confirm' },\n cancelButton: { text: 'Cancel' },\n preventCloseOnBlur\n })\n}\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n #place {\n width: 100%;\n height: 500px;\n text-align: center;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n Click this to prompt image\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n preventCloseOnBlur: true\n}\n"]}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import { TemplateResult } from 'lit';
|
2
|
-
declare const _default: {
|
3
|
-
title: string;
|
4
|
-
component: string;
|
5
|
-
argTypes: {
|
6
|
-
preventCloseOnBlur: {
|
7
|
-
control: string;
|
8
|
-
};
|
9
|
-
};
|
10
|
-
};
|
11
|
-
export default _default;
|
12
|
-
interface Story<T> {
|
13
|
-
(args: T): TemplateResult;
|
14
|
-
args?: Partial<T>;
|
15
|
-
argTypes?: Record<string, unknown>;
|
16
|
-
}
|
17
|
-
interface ArgTypes {
|
18
|
-
preventCloseOnBlur: boolean;
|
19
|
-
}
|
20
|
-
export declare const Regular: Story<ArgTypes>;
|
@@ -1,66 +0,0 @@
|
|
1
|
-
import { html } from 'lit';
|
2
|
-
import { OxPrompt } from '../src/ox-prompt.js';
|
3
|
-
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
|
4
|
-
export default {
|
5
|
-
title: 'OxPrompt',
|
6
|
-
component: 'ox-prompt',
|
7
|
-
argTypes: {
|
8
|
-
preventCloseOnBlur: { control: 'boolean' }
|
9
|
-
}
|
10
|
-
};
|
11
|
-
async function popup(e, preventCloseOnBlur) {
|
12
|
-
const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
|
13
|
-
const result = await OxPrompt.open({
|
14
|
-
type: 'info',
|
15
|
-
title: 'title',
|
16
|
-
text: 'Are you sure ?Are you sure ?Are you sure ?Are you sure ?Are you sure ? \n\n aaa <br> bbb </br> ccc',
|
17
|
-
footer: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
|
18
|
-
template: html `<img src=${noImage} />`,
|
19
|
-
confirmButton: { text: 'Confirm' },
|
20
|
-
cancelButton: { text: 'Cancel' },
|
21
|
-
preventCloseOnBlur
|
22
|
-
});
|
23
|
-
console.log('result', result);
|
24
|
-
}
|
25
|
-
const Template = ({ preventCloseOnBlur }) => html `
|
26
|
-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
27
|
-
|
28
|
-
<link href="/themes/light.css" rel="stylesheet" />
|
29
|
-
<link href="/themes/dark.css" rel="stylesheet" />
|
30
|
-
<link href="/themes/spacing.css" rel="stylesheet" />
|
31
|
-
|
32
|
-
<link
|
33
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
34
|
-
rel="stylesheet"
|
35
|
-
/>
|
36
|
-
<link
|
37
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
38
|
-
rel="stylesheet"
|
39
|
-
/>
|
40
|
-
<link
|
41
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
42
|
-
rel="stylesheet"
|
43
|
-
/>
|
44
|
-
|
45
|
-
<style>
|
46
|
-
${MDTypeScaleStyles.cssText}
|
47
|
-
</style>
|
48
|
-
|
49
|
-
<style>
|
50
|
-
#place {
|
51
|
-
width: 100%;
|
52
|
-
height: 500px;
|
53
|
-
text-align: center;
|
54
|
-
|
55
|
-
background-color: var(--md-sys-color-primary-container);
|
56
|
-
color: var(--md-sys-color-on-primary-container);
|
57
|
-
}
|
58
|
-
</style>
|
59
|
-
|
60
|
-
<div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
|
61
|
-
Click this to prompt image
|
62
|
-
</div>
|
63
|
-
`;
|
64
|
-
export const Regular = Template.bind({});
|
65
|
-
Regular.args = {};
|
66
|
-
//# sourceMappingURL=ox-prompt.stories.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ox-prompt.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,KAAK,UAAU,KAAK,CAAC,CAAa,EAAE,kBAA2B;IAC7D,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,IAAI,CAAC;QACjC,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,oGAAoG;QAC1G,MAAM,EAAE,4BAA4B;QACpC,QAAQ,EAAE,IAAI,CAAA,YAAY,OAAO,KAAK;QACtC,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAChC,kBAAkB;KACnB,CAAC,CAAA;IAEF,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;AAC/B,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;2BAcJ,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;CAGzE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'OxPrompt',\n component: 'ox-prompt',\n argTypes: {\n preventCloseOnBlur: { 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 preventCloseOnBlur: boolean\n}\n\nasync function popup(e: MouseEvent, preventCloseOnBlur: boolean) {\n const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n const result = await OxPrompt.open({\n type: 'info',\n title: 'title',\n text: 'Are you sure ?Are you sure ?Are you sure ?Are you sure ?Are you sure ? \\n\\n aaa <br> bbb </br> ccc',\n footer: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',\n template: html`<img src=${noImage} />`,\n confirmButton: { text: 'Confirm' },\n cancelButton: { text: 'Cancel' },\n preventCloseOnBlur\n })\n\n console.log('result', result)\n}\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n #place {\n width: 100%;\n height: 500px;\n text-align: center;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n Click this to prompt image\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
|