@operato/popup 7.0.5 → 7.0.20
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 +18 -0
- package/dist/src/ox-popup-list.d.ts +1 -0
- package/dist/src/ox-popup-list.js.map +1 -1
- package/dist/src/ox-popup-menu.d.ts +2 -1
- package/dist/src/ox-popup-menu.js +2 -2
- package/dist/src/ox-popup-menu.js.map +1 -1
- package/dist/src/ox-popup-menuitem.js +1 -1
- package/dist/src/ox-popup-menuitem.js.map +1 -1
- package/dist/src/ox-popup.d.ts +10 -2
- package/dist/src/ox-popup.js +25 -17
- package/dist/src/ox-popup.js.map +1 -1
- package/dist/stories/ox-popup-list-sortable.stories.js +5 -2
- package/dist/stories/ox-popup-list-sortable.stories.js.map +1 -1
- package/dist/stories/ox-popup-list.stories.js +36 -23
- package/dist/stories/ox-popup-list.stories.js.map +1 -1
- package/dist/stories/ox-popup-menu.stories.js +22 -6
- package/dist/stories/ox-popup-menu.stories.js.map +1 -1
- package/dist/stories/ox-popup.stories.js +7 -4
- package/dist/stories/ox-popup.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/ox-popup-list.ts +1 -0
- package/src/ox-popup-menu.ts +4 -2
- package/src/ox-popup-menuitem.ts +2 -1
- package/src/ox-popup.ts +40 -17
- package/stories/ox-popup-list-sortable.stories.ts +5 -2
- package/stories/ox-popup-list.stories.ts +39 -26
- package/stories/ox-popup-menu.stories.ts +22 -6
- package/stories/ox-popup.stories.ts +7 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-popup-list-sortable.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list-sortable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAChD,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAG1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"ox-popup-list-sortable.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list-sortable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAChD,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAG1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;QACf,gBAAgB,EAAE,KAAK;KACxB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,OAAO,GAAG;IACd;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,IAAI;KACb;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;CACF,CAAA;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAkEJ,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;;;gBAItC,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;gBAC7C,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAC,UAAU,EAAG,CAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAY,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;AACpG,CAAC;;;+BAGwB,kBAAkB;;;QAGzC,OAAO,CAAC,GAAG,CACX,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;iDAC2B,CAAC,MAAM,CAAC,MAAM,UAAU,MAAM,CAAC,IAAI,aAAa,MAAM,CAAC,IAAI;OACrG,CACA;;;;;CAKN,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/icon/icon.js'\nimport '@material/web/button/outlined-button.js'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'sortable OxPopupList',\n component: 'ox-popup-list',\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) {\n const popupList = document.querySelector('#popup-list') as OxPopupList\n popupList?.open({\n top: e.offsetY,\n left: e.offsetX,\n absolutePosition: false\n })\n}\n\nconst columns = [\n {\n name: 'AAAAAA',\n hidden: false\n },\n {\n name: 'BBBBBB',\n hidden: true\n },\n {\n name: 'CCCCCC',\n hidden: false\n },\n {\n name: 'DDDDDD',\n hidden: false\n },\n {\n name: 'EEEEEE',\n hidden: false\n },\n {\n name: 'FFFFFF',\n hidden: false\n },\n {\n name: 'GGGGGG',\n hidden: false\n },\n {\n name: 'HHHHHH',\n hidden: false\n },\n {\n name: 'IIIIII',\n hidden: false\n },\n {\n name: 'JJJJJJ',\n hidden: false\n },\n {\n name: 'KKKKKK',\n hidden: false\n },\n {\n name: 'LLLLLL',\n hidden: false\n },\n {\n name: 'MMMMMM',\n hidden: false\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: 100px;\n background: lightgreen;\n text-align: center;\n line-height: 100px;\n padding: 20px;\n margin: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n\n ox-popup-list {\n width: 240px;\n max-height: 240px;\n overflow: hidden;\n }\n\n [titler] {\n --md-icon-size: 1.2em;\n --md-outlined-button-container-height: 24px;\n --md-outlined-button-container-shape: 4px;\n --md-outlined-button-leading-space: 4px;\n --md-outlined-button-trailing-space: 4px;\n\n display: flex;\n flex-direction: row;\n align-items: center;\n text-transform: capitalize;\n }\n\n md-outlined-button {\n margin-left: auto;\n }\n\n [option] {\n position: relative; /* 상대 위치 설정 */\n cursor: move; /* 커서를 이동 가능 표시로 변경 */\n user-select: none;\n }\n\n [option]::after {\n content: '☰'; /* 드래그 핸들 아이콘 (혹은 기호) */\n position: absolute; /* 절대 위치 설정 */\n top: 0; /* 위에서부터 10px */\n right: 10px; /* 오른쪽에서부터 10px */\n font-size: 20px; /* 폰트 크기 설정 */\n color: #888; /* 폰트 색상 설정 */\n }\n\n div[overlay] {\n display: block;\n width: 300px;\n height: 300px;\n left: 100px;\n top: 100px;\n z-index: 10;\n background-color: var(--md-sys-color-surface);\n }\n </style>\n\n <div id=\"place\" @click=${(e: MouseEvent) => popup(e)}>\n Click this to popup list\n <ox-popup-list\n id=\"popup-list\"\n @select=${(e: Event) => console.log('select', e.target)}\n @sorted=${(e: Event) => {\n console.log('sorted\\n', (e as CustomEvent).detail.map((element: any) => element.value).join('\\n'))\n }}\n multiple\n sortable\n ?prevent-close-on-blur=${preventCloseOnBlur}\n >\n <div slot=\"header\" titler>Plain Text <md-outlined-button>save</md-outlined-button></div>\n ${columns.map(\n column => html`\n <ox-checkbox label=\"checkbox\" ?checked=${!column.hidden} value=${column.name} option />${column.name}</ox-checkbox>\n `\n )}\n </ox-popup-list>\n </div>\n\n <div overlay>OVERLAYED</div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
|
|
@@ -13,8 +13,9 @@ export default {
|
|
|
13
13
|
function popup(e, preventCloseOnBlur) {
|
|
14
14
|
const popupList = document.querySelector('#popup-list');
|
|
15
15
|
popupList?.open({
|
|
16
|
-
top: e.
|
|
17
|
-
left: e.
|
|
16
|
+
top: e.offsetY,
|
|
17
|
+
left: e.offsetX,
|
|
18
|
+
absolutePosition: false
|
|
18
19
|
});
|
|
19
20
|
}
|
|
20
21
|
const Template = ({ preventCloseOnBlur }) => html `
|
|
@@ -42,6 +43,15 @@ const Template = ({ preventCloseOnBlur }) => html `
|
|
|
42
43
|
</style>
|
|
43
44
|
|
|
44
45
|
<style>
|
|
46
|
+
#container {
|
|
47
|
+
display: flex;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
#noise {
|
|
51
|
+
width: 100px;
|
|
52
|
+
height: 100px;
|
|
53
|
+
}
|
|
54
|
+
|
|
45
55
|
#place {
|
|
46
56
|
width: 100%;
|
|
47
57
|
height: 500px;
|
|
@@ -52,31 +62,34 @@ const Template = ({ preventCloseOnBlur }) => html `
|
|
|
52
62
|
}
|
|
53
63
|
</style>
|
|
54
64
|
|
|
55
|
-
<div id="
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
+
<div id="container">
|
|
66
|
+
<div id="noise"></div>
|
|
67
|
+
<div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
|
|
68
|
+
Click this to popup list
|
|
69
|
+
<ox-popup-list
|
|
70
|
+
id="popup-list"
|
|
71
|
+
@select=${(e) => console.log('select', e.target)}
|
|
72
|
+
multiple
|
|
73
|
+
?prevent-close-on-blur=${preventCloseOnBlur}
|
|
74
|
+
>
|
|
75
|
+
<div option>Plain Text</div>
|
|
65
76
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
77
|
+
<div option>
|
|
78
|
+
<ox-checkbox label="checkbox" slot="icon" checked>checkbox</ox-checkbox>
|
|
79
|
+
</div>
|
|
69
80
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
81
|
+
<div option>
|
|
82
|
+
<input id="checkbox-01" type="checkbox" />
|
|
83
|
+
<label for="checkbox-01">custom option</label>
|
|
84
|
+
</div>
|
|
74
85
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
86
|
+
<div option>
|
|
87
|
+
<label for="text-01">value</label>
|
|
88
|
+
<input id="text-01" type="text" value="Plain text input" />
|
|
89
|
+
</div>
|
|
90
|
+
</ox-popup-list>
|
|
78
91
|
</div>
|
|
79
|
-
</
|
|
92
|
+
</div>
|
|
80
93
|
`;
|
|
81
94
|
export const Regular = Template.bind({});
|
|
82
95
|
Regular.args = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-popup-list.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAI1F,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa,EAAE,kBAA2B;IACvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"ox-popup-list.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAI1F,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa,EAAE,kBAA2B;IACvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;QACf,gBAAgB,EAAE,KAAK;KACxB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;6BAyBF,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;;kBAI1D,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;;iCAE9B,kBAAkB;;;;;;;;;;;;;;;;;;;;CAoBlD,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 '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\n\nexport default {\n title: 'OxPopupList',\n component: 'ox-popup-list',\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 popupList = document.querySelector('#popup-list') as OxPopupList\n popupList?.open({\n top: e.offsetY,\n left: e.offsetX,\n absolutePosition: false\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 #container {\n display: flex;\n }\n\n #noise {\n width: 100px;\n height: 100px;\n }\n\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=\"container\">\n <div id=\"noise\"></div>\n <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n Click this to popup list\n <ox-popup-list\n id=\"popup-list\"\n @select=${(e: Event) => console.log('select', e.target)}\n multiple\n ?prevent-close-on-blur=${preventCloseOnBlur}\n >\n <div option>Plain Text</div>\n\n <div option>\n <ox-checkbox label=\"checkbox\" slot=\"icon\" checked>checkbox</ox-checkbox>\n </div>\n\n <div option>\n <input id=\"checkbox-01\" type=\"checkbox\" />\n <label for=\"checkbox-01\">custom option</label>\n </div>\n\n <div option>\n <label for=\"text-01\">value</label>\n <input id=\"text-01\" type=\"text\" value=\"Plain text input\" />\n </div>\n </ox-popup-list>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n preventCloseOnBlur: true\n}\n"]}
|
|
@@ -107,9 +107,10 @@ function popup(e) {
|
|
|
107
107
|
<input id="text-01" type="text" value="Plain text input" />
|
|
108
108
|
</div>
|
|
109
109
|
`,
|
|
110
|
-
top: e.
|
|
111
|
-
left: e.
|
|
112
|
-
parent: e.target
|
|
110
|
+
top: e.offsetY,
|
|
111
|
+
left: e.offsetX,
|
|
112
|
+
parent: e.target,
|
|
113
|
+
absolutePosition: false
|
|
113
114
|
});
|
|
114
115
|
}
|
|
115
116
|
const Template = ({}) => html `
|
|
@@ -137,18 +138,33 @@ const Template = ({}) => html `
|
|
|
137
138
|
</style>
|
|
138
139
|
|
|
139
140
|
<style>
|
|
141
|
+
#container {
|
|
142
|
+
display: flex;
|
|
143
|
+
flex-direction: row;
|
|
144
|
+
height: 600px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
#padding {
|
|
148
|
+
width: 100px;
|
|
149
|
+
height: 100px;
|
|
150
|
+
}
|
|
151
|
+
|
|
140
152
|
#place {
|
|
141
153
|
width: 100%;
|
|
142
|
-
height:
|
|
154
|
+
height: 400px;
|
|
143
155
|
text-align: center;
|
|
156
|
+
padding-left: 100px;
|
|
144
157
|
|
|
145
158
|
background-color: var(--md-sys-color-primary-container);
|
|
146
159
|
color: var(--md-sys-color-on-primary-container);
|
|
147
160
|
}
|
|
148
161
|
</style>
|
|
149
162
|
|
|
150
|
-
<div id="
|
|
151
|
-
|
|
163
|
+
<div id="container">
|
|
164
|
+
<div id="padding"></div>
|
|
165
|
+
<div id="place" @click=${(e) => popup(e)} class="md-typescale-display-medium">
|
|
166
|
+
Click this to popup menu
|
|
167
|
+
</div>
|
|
152
168
|
</div>
|
|
153
169
|
`;
|
|
154
170
|
export const Regular = Template.bind({});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-popup-menu.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-menu.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AACpC,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAErD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,SAAS,KAAK,CAAC,CAAa;IAC1B,WAAW,CAAC,IAAI,CAAC;QACf,QAAQ,EAAE,IAAI,CAAA;;;oBAGE,UAAU,CAAQ;YAC5B,OAAO,CAAC,GAAG,CAAC,8BAA8B,CAAC,CAAA;QAC7C,CAAC;;;;;;;;;;;;;oBAaW,UAAU,CAAQ;YAC5B,MAAM,IAAI,GAAI,CAAC,CAAC,MAAsB,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;YAC/D,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;QACrE,CAAC;;;;;;sDAM6C,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC;;;;;wBAK5E,UAAU,CAAQ;YAC5B,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;QACjC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DR;QACD,GAAG,EAAE,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"ox-popup-menu.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-menu.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AACpC,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAErD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,SAAS,KAAK,CAAC,CAAa;IAC1B,WAAW,CAAC,IAAI,CAAC;QACf,QAAQ,EAAE,IAAI,CAAA;;;oBAGE,UAAU,CAAQ;YAC5B,OAAO,CAAC,GAAG,CAAC,8BAA8B,CAAC,CAAA;QAC7C,CAAC;;;;;;;;;;;;;oBAaW,UAAU,CAAQ;YAC5B,MAAM,IAAI,GAAI,CAAC,CAAC,MAAsB,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;YAC/D,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;QACrE,CAAC;;;;;;sDAM6C,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC;;;;;wBAK5E,UAAU,CAAQ;YAC5B,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;QACjC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DR;QACD,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;QACf,MAAM,EAAE,CAAC,CAAC,MAAqB;QAC/B,gBAAgB,EAAE,KAAK;KACxB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBlD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA4BF,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;;;CAIvD,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 '../src/ox-popup-menu.js'\nimport '../src/ox-popup-menuitem.js'\nimport '@operato/input/ox-checkbox.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { OxPopupMenu } from '../src/ox-popup-menu.js'\n\nexport default {\n title: 'OxPopuMenu',\n component: 'ox-popup-menu',\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 OxPopupMenu.open({\n template: html`\n <ox-popup-menuitem\n label=\"article - click me\"\n @selected=${function (e: Event) {\n console.log('first level article selected')\n }}\n >\n <md-icon slot=\"icon\">article</md-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"home\">\n <md-icon slot=\"icon\">home</md-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"empty\"> </ox-popup-menuitem>\n\n <ox-popup-menuitem\n label=\"click me to toggle\"\n @selected=${function (e: Event) {\n const icon = (e.target as HTMLElement).querySelector('md-icon')\n icon && (icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check')\n }}\n alive-on-select\n >\n <md-icon slot=\"icon\" style=\"width: 20px;height: 20px;\"></md-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"verified\" @selected=${(e: Event) => console.log('selected verified')}>\n <md-icon slot=\"icon\">verified</md-icon>\n <ox-popup-menu>\n <ox-popup-menuitem\n label=\"article\"\n @selected=${function (e: Event) {\n console.log('article selected')\n }}\n alive-on-select\n >\n <md-icon slot=\"icon\">article</md-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"home\">\n <md-icon slot=\"icon\">home</md-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"verified\">\n <md-icon slot=\"icon\">verified</md-icon>\n <ox-popup-menu>\n <ox-popup-menuitem label=\"article\">\n <md-icon slot=\"icon\">article</md-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"home\">\n <md-icon slot=\"icon\">home</md-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"verified\">\n <md-icon slot=\"icon\">verified</md-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"checkbox\">\n <input type=\"checkbox\" slot=\"icon\" />\n </ox-popup-menuitem>\n\n </ox-popup-menu>\n </ox-popup-menuitem>\n\n <div separator></div>\n\n <ox-popup-menuitem label=\"checkbox\">\n <input type=\"checkbox\" slot=\"icon\" />\n </ox-popup-menuitem>\n </ox-popup-menu>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"checkbox in icon area\" alive-on-select>\n <input type=\"checkbox\" slot=\"icon\" />\n </ox-popup-menuitem>\n\n <div separator></div>\n\n <div menu>Plain Text</div>\n\n <div menu alive-on-select>\n <ox-checkbox label=\"checkbox\" slot=\"icon\" checked />checkbox</ox-checkbox>\n </div>\n\n <div menu alive-on-select>\n <input id=\"checkbox-01\" type=\"checkbox\" />\n <label for=\"checkbox-01\">custom menu</label>\n </div>\n <div menu alive-on-select>\n <label for=\"text-01\">value</label>\n <input id=\"text-01\" type=\"text\" value=\"Plain text input\" />\n </div>\n `,\n top: e.offsetY,\n left: e.offsetX,\n parent: e.target as HTMLElement,\n absolutePosition: false\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 #container {\n display: flex;\n flex-direction: row;\n height: 600px;\n }\n\n #padding {\n width: 100px;\n height: 100px;\n }\n\n #place {\n width: 100%;\n height: 400px;\n text-align: center;\n padding-left: 100px;\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=\"container\">\n <div id=\"padding\"></div>\n <div id=\"place\" @click=${(e: MouseEvent) => popup(e)} class=\"md-typescale-display-medium\">\n Click this to popup menu\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
|
|
@@ -3,7 +3,7 @@ import { html } from 'lit';
|
|
|
3
3
|
import { OxPopup } from '../src/ox-popup';
|
|
4
4
|
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
|
|
5
5
|
export default {
|
|
6
|
-
title: '
|
|
6
|
+
title: 'Simple Popup',
|
|
7
7
|
component: 'ox-popup',
|
|
8
8
|
argTypes: {}
|
|
9
9
|
};
|
|
@@ -11,9 +11,10 @@ function popup(e) {
|
|
|
11
11
|
const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
|
|
12
12
|
OxPopup.open({
|
|
13
13
|
template: html `<img src=${noImage} />`,
|
|
14
|
-
top: e.
|
|
15
|
-
left: e.
|
|
16
|
-
parent: e.target
|
|
14
|
+
top: e.offsetY,
|
|
15
|
+
left: e.offsetX,
|
|
16
|
+
parent: e.target,
|
|
17
|
+
absolutePosition: false
|
|
17
18
|
});
|
|
18
19
|
}
|
|
19
20
|
const Template = ({}) => html `
|
|
@@ -45,6 +46,8 @@ const Template = ({}) => html `
|
|
|
45
46
|
width: 100%;
|
|
46
47
|
height: 500px;
|
|
47
48
|
text-align: center;
|
|
49
|
+
padding: 20px;
|
|
50
|
+
margin: 20px;
|
|
48
51
|
|
|
49
52
|
background-color: var(--md-sys-color-primary-container);
|
|
50
53
|
color: var(--md-sys-color-on-primary-container);
|
|
@@ -1 +1 @@
|
|
|
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,iBAAiB,CAAA;AACzC,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,
|
|
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,iBAAiB,CAAA;AACzC,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,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,MAAM,EAAE,CAAC,CAAC,MAAqB;QAC/B,gBAAgB,EAAE,KAAK;KACxB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBlD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;2BAgBJ,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'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\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 parent: e.target as HTMLElement,\n absolutePosition: false\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 width: 100%;\n height: 500px;\n text-align: center;\n padding: 20px;\n margin: 20px;\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"]}
|