@operato/popup 8.0.0-alpha.51 → 8.0.0-beta.1
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 +17 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/.editorconfig +0 -29
- package/.storybook/main.js +0 -3
- package/.storybook/preview.js +0 -52
- package/.storybook/server.mjs +0 -8
- package/src/index.ts +0 -7
- package/src/open-popup.ts +0 -166
- package/src/ox-floating-overlay.ts +0 -618
- package/src/ox-popup-list.ts +0 -577
- package/src/ox-popup-menu.ts +0 -247
- package/src/ox-popup-menuitem.ts +0 -187
- package/src/ox-popup.ts +0 -400
- package/src/ox-prompt.ts +0 -549
- package/src/position-converter.ts +0 -37
- package/stories/open-popup.stories.ts +0 -104
- package/stories/ox-popup-list-sortable.stories.ts +0 -215
- package/stories/ox-popup-list.stories.ts +0 -121
- package/stories/ox-popup-menu.stories.ts +0 -188
- package/stories/ox-popup.stories.ts +0 -79
- package/stories/ox-prompt-icon.stories.ts +0 -87
- package/stories/ox-prompt-normal.stories.ts +0 -80
- package/stories/ox-prompt.stories.ts +0 -82
- package/tsconfig.json +0 -25
- package/web-dev-server.config.mjs +0 -27
- package/web-test-runner.config.mjs +0 -41
@@ -1,80 +0,0 @@
|
|
1
|
-
import '@material/web/all.js'
|
2
|
-
import { html, TemplateResult } from 'lit'
|
3
|
-
|
4
|
-
import { OxPrompt } from '../src/ox-prompt'
|
5
|
-
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
|
6
|
-
|
7
|
-
export default {
|
8
|
-
title: 'OxPrompt - Normal',
|
9
|
-
component: 'ox-prompt',
|
10
|
-
argTypes: {
|
11
|
-
preventCloseOnBlur: { control: 'boolean' }
|
12
|
-
}
|
13
|
-
}
|
14
|
-
|
15
|
-
interface Story<T> {
|
16
|
-
(args: T): TemplateResult
|
17
|
-
args?: Partial<T>
|
18
|
-
argTypes?: Record<string, unknown>
|
19
|
-
}
|
20
|
-
|
21
|
-
interface ArgTypes {
|
22
|
-
preventCloseOnBlur: boolean
|
23
|
-
}
|
24
|
-
|
25
|
-
function popup(e: MouseEvent, preventCloseOnBlur: boolean) {
|
26
|
-
const noImage = new URL('/assets/images/no-image.png', import.meta.url).href
|
27
|
-
|
28
|
-
OxPrompt.open({
|
29
|
-
title: 'Are you sure ?',
|
30
|
-
text: 'Are you sure to exit this page ?',
|
31
|
-
confirmButton: { text: 'Confirm' },
|
32
|
-
cancelButton: { text: 'Cancel' },
|
33
|
-
preventCloseOnBlur
|
34
|
-
})
|
35
|
-
}
|
36
|
-
|
37
|
-
const Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`
|
38
|
-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
39
|
-
|
40
|
-
<link href="/themes/light.css" rel="stylesheet" />
|
41
|
-
<link href="/themes/dark.css" rel="stylesheet" />
|
42
|
-
<link href="/themes/spacing.css" rel="stylesheet" />
|
43
|
-
|
44
|
-
<link
|
45
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
46
|
-
rel="stylesheet"
|
47
|
-
/>
|
48
|
-
<link
|
49
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
50
|
-
rel="stylesheet"
|
51
|
-
/>
|
52
|
-
<link
|
53
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
54
|
-
rel="stylesheet"
|
55
|
-
/>
|
56
|
-
|
57
|
-
<style>
|
58
|
-
${MDTypeScaleStyles.cssText}
|
59
|
-
</style>
|
60
|
-
|
61
|
-
<style>
|
62
|
-
#place {
|
63
|
-
width: 100%;
|
64
|
-
height: 500px;
|
65
|
-
text-align: center;
|
66
|
-
|
67
|
-
background-color: var(--md-sys-color-primary-container);
|
68
|
-
color: var(--md-sys-color-on-primary-container);
|
69
|
-
}
|
70
|
-
</style>
|
71
|
-
|
72
|
-
<div id="place" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
|
73
|
-
Click this to prompt image
|
74
|
-
</div>
|
75
|
-
`
|
76
|
-
|
77
|
-
export const Regular = Template.bind({})
|
78
|
-
Regular.args = {
|
79
|
-
preventCloseOnBlur: true
|
80
|
-
}
|
@@ -1,82 +0,0 @@
|
|
1
|
-
import { html, TemplateResult } from 'lit'
|
2
|
-
|
3
|
-
import { OxPrompt } from '../src/ox-prompt'
|
4
|
-
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
|
5
|
-
|
6
|
-
export default {
|
7
|
-
title: 'OxPrompt',
|
8
|
-
component: 'ox-prompt',
|
9
|
-
argTypes: {
|
10
|
-
preventCloseOnBlur: { control: 'boolean' }
|
11
|
-
}
|
12
|
-
}
|
13
|
-
|
14
|
-
interface Story<T> {
|
15
|
-
(args: T): TemplateResult
|
16
|
-
args?: Partial<T>
|
17
|
-
argTypes?: Record<string, unknown>
|
18
|
-
}
|
19
|
-
|
20
|
-
interface ArgTypes {
|
21
|
-
preventCloseOnBlur: boolean
|
22
|
-
}
|
23
|
-
|
24
|
-
async function popup(e: MouseEvent, preventCloseOnBlur: boolean) {
|
25
|
-
const noImage = new URL('/assets/images/no-image.png', import.meta.url).href
|
26
|
-
|
27
|
-
const result = await OxPrompt.open({
|
28
|
-
type: 'info',
|
29
|
-
title: 'title',
|
30
|
-
text: 'Are you sure ?Are you sure ?Are you sure ?Are you sure ?Are you sure ? \n\n aaa <br> bbb </br> ccc',
|
31
|
-
footer: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
|
32
|
-
template: html`<img src=${noImage} />`,
|
33
|
-
confirmButton: { text: 'Confirm' },
|
34
|
-
cancelButton: { text: 'Cancel' },
|
35
|
-
preventCloseOnBlur
|
36
|
-
})
|
37
|
-
|
38
|
-
console.log('result', result)
|
39
|
-
}
|
40
|
-
|
41
|
-
const Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`
|
42
|
-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
43
|
-
|
44
|
-
<link href="/themes/light.css" rel="stylesheet" />
|
45
|
-
<link href="/themes/dark.css" rel="stylesheet" />
|
46
|
-
<link href="/themes/spacing.css" rel="stylesheet" />
|
47
|
-
|
48
|
-
<link
|
49
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
50
|
-
rel="stylesheet"
|
51
|
-
/>
|
52
|
-
<link
|
53
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
54
|
-
rel="stylesheet"
|
55
|
-
/>
|
56
|
-
<link
|
57
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
58
|
-
rel="stylesheet"
|
59
|
-
/>
|
60
|
-
|
61
|
-
<style>
|
62
|
-
${MDTypeScaleStyles.cssText}
|
63
|
-
</style>
|
64
|
-
|
65
|
-
<style>
|
66
|
-
#place {
|
67
|
-
width: 100%;
|
68
|
-
height: 500px;
|
69
|
-
text-align: center;
|
70
|
-
|
71
|
-
background-color: var(--md-sys-color-primary-container);
|
72
|
-
color: var(--md-sys-color-on-primary-container);
|
73
|
-
}
|
74
|
-
</style>
|
75
|
-
|
76
|
-
<div id="place" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
|
77
|
-
Click this to prompt image
|
78
|
-
</div>
|
79
|
-
`
|
80
|
-
|
81
|
-
export const Regular = Template.bind({})
|
82
|
-
Regular.args = {}
|
package/tsconfig.json
DELETED
@@ -1,25 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"compilerOptions": {
|
3
|
-
"target": "esnext",
|
4
|
-
"module": "esnext",
|
5
|
-
"moduleResolution": "node",
|
6
|
-
"resolveJsonModule": true,
|
7
|
-
"noEmitOnError": true,
|
8
|
-
"lib": ["es2017", "dom"],
|
9
|
-
"strict": true,
|
10
|
-
"esModuleInterop": false,
|
11
|
-
"allowSyntheticDefaultImports": true,
|
12
|
-
"experimentalDecorators": true,
|
13
|
-
"useDefineForClassFields": false,
|
14
|
-
"importHelpers": true,
|
15
|
-
"outDir": "dist",
|
16
|
-
"sourceMap": true,
|
17
|
-
"inlineSources": true,
|
18
|
-
"rootDir": "./",
|
19
|
-
"declaration": true,
|
20
|
-
"incremental": true,
|
21
|
-
"skipLibCheck": true,
|
22
|
-
"types": ["node", "mocha"]
|
23
|
-
},
|
24
|
-
"include": ["**/*.ts"]
|
25
|
-
}
|
@@ -1,27 +0,0 @@
|
|
1
|
-
// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
|
2
|
-
|
3
|
-
/** Use Hot Module replacement by adding --hmr to the start command */
|
4
|
-
const hmr = process.argv.includes('--hmr');
|
5
|
-
|
6
|
-
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
|
7
|
-
open: '/demo/',
|
8
|
-
/** Use regular watch mode if HMR is not enabled. */
|
9
|
-
watch: !hmr,
|
10
|
-
/** Resolve bare module imports */
|
11
|
-
nodeResolve: {
|
12
|
-
exportConditions: ['browser', 'development'],
|
13
|
-
},
|
14
|
-
|
15
|
-
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
|
16
|
-
// esbuildTarget: 'auto'
|
17
|
-
|
18
|
-
/** Set appIndex to enable SPA routing */
|
19
|
-
// appIndex: 'demo/index.html',
|
20
|
-
|
21
|
-
plugins: [
|
22
|
-
/** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
|
23
|
-
// hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
|
24
|
-
],
|
25
|
-
|
26
|
-
// See documentation for all available options
|
27
|
-
});
|
@@ -1,41 +0,0 @@
|
|
1
|
-
// import { playwrightLauncher } from '@web/test-runner-playwright';
|
2
|
-
|
3
|
-
const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
|
4
|
-
|
5
|
-
export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
|
6
|
-
/** Test files to run */
|
7
|
-
files: 'dist/test/**/*.test.js',
|
8
|
-
|
9
|
-
/** Resolve bare module imports */
|
10
|
-
nodeResolve: {
|
11
|
-
exportConditions: ['browser', 'development'],
|
12
|
-
},
|
13
|
-
|
14
|
-
/** Filter out lit dev mode logs */
|
15
|
-
filterBrowserLogs(log) {
|
16
|
-
for (const arg of log.args) {
|
17
|
-
if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
|
18
|
-
return false;
|
19
|
-
}
|
20
|
-
}
|
21
|
-
return true;
|
22
|
-
},
|
23
|
-
|
24
|
-
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
|
25
|
-
// esbuildTarget: 'auto',
|
26
|
-
|
27
|
-
/** Amount of browsers to run concurrently */
|
28
|
-
// concurrentBrowsers: 2,
|
29
|
-
|
30
|
-
/** Amount of test files per browser to test concurrently */
|
31
|
-
// concurrency: 1,
|
32
|
-
|
33
|
-
/** Browsers to run tests on */
|
34
|
-
// browsers: [
|
35
|
-
// playwrightLauncher({ product: 'chromium' }),
|
36
|
-
// playwrightLauncher({ product: 'firefox' }),
|
37
|
-
// playwrightLauncher({ product: 'webkit' }),
|
38
|
-
// ],
|
39
|
-
|
40
|
-
// See documentation for all available options
|
41
|
-
});
|