@operato/popup 1.4.64 → 1.5.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 +18 -0
- package/dist/src/ox-floating-overlay.d.ts +1 -0
- package/dist/src/ox-floating-overlay.js +7 -1
- package/dist/src/ox-floating-overlay.js.map +1 -1
- package/dist/src/ox-prompt.d.ts +71 -0
- package/dist/src/ox-prompt.js +293 -0
- package/dist/src/ox-prompt.js.map +1 -0
- package/dist/stories/ox-prompt-normal.stories.d.ts +15 -0
- package/dist/stories/ox-prompt-normal.stories.js +34 -0
- package/dist/stories/ox-prompt-normal.stories.js.map +1 -0
- package/dist/stories/ox-prompt.stories copy.d.ts +15 -0
- package/dist/stories/ox-prompt.stories copy.js +38 -0
- package/dist/stories/ox-prompt.stories copy.js.map +1 -0
- package/dist/stories/ox-prompt.stories.d.ts +15 -0
- package/dist/stories/ox-prompt.stories.js +38 -0
- package/dist/stories/ox-prompt.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -2
- package/src/ox-floating-overlay.ts +6 -1
- package/src/ox-prompt.ts +360 -0
- package/stories/ox-prompt-normal.stories.ts +48 -0
- package/stories/ox-prompt.stories.ts +52 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.5.0](https://github.com/hatiolab/operato/compare/v1.4.87...v1.5.0) (2023-10-07)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :rocket: New Features
|
|
10
|
+
|
|
11
|
+
* ox-prompt ([3434709](https://github.com/hatiolab/operato/commit/34347091634a19fae3ed7e856b08389e5262c246))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### [1.4.86](https://github.com/hatiolab/operato/compare/v1.4.85...v1.4.86) (2023-09-30)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* zIndex support for ox-floating-overlay ([ddae1fe](https://github.com/hatiolab/operato/commit/ddae1fe7919cfe3821f9391fddb3577f882cfb59))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
### [1.4.64](https://github.com/hatiolab/operato/compare/v1.4.63...v1.4.64) (2023-09-13)
|
|
7
25
|
|
|
8
26
|
**Note:** Version bump only for package @operato/popup
|
|
@@ -141,6 +141,9 @@ let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
|
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
143
|
firstUpdated() {
|
|
144
|
+
if (this.zIndex) {
|
|
145
|
+
this.style.setProperty('--z-index', String(this.zIndex));
|
|
146
|
+
}
|
|
144
147
|
requestAnimationFrame(() => {
|
|
145
148
|
var _a;
|
|
146
149
|
/* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */
|
|
@@ -242,7 +245,7 @@ OxFloatingOverlay.styles = [
|
|
|
242
245
|
/* for layout style */
|
|
243
246
|
:host {
|
|
244
247
|
position: relative;
|
|
245
|
-
z-index: 1;
|
|
248
|
+
z-index: var(--z-index, 1);
|
|
246
249
|
}
|
|
247
250
|
|
|
248
251
|
:host([hovering='edge']) {
|
|
@@ -502,6 +505,9 @@ __decorate([
|
|
|
502
505
|
__decorate([
|
|
503
506
|
property({ type: Object })
|
|
504
507
|
], OxFloatingOverlay.prototype, "filter", void 0);
|
|
508
|
+
__decorate([
|
|
509
|
+
property({ type: Number, attribute: 'z-index' })
|
|
510
|
+
], OxFloatingOverlay.prototype, "zIndex", void 0);
|
|
505
511
|
__decorate([
|
|
506
512
|
query('[overlayed]')
|
|
507
513
|
], OxFloatingOverlay.prototype, "overlayed", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-floating-overlay.js","sourceRoot":"","sources":["../../src/ox-floating-overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isHandheldDevice } from '@operato/utils'\n\nfunction getPoint(e: Event): { x: number; y: number } | undefined {\n if ((e as MouseEvent).button == 0) {\n return {\n x: (e as MouseEvent).clientX,\n y: (e as MouseEvent).clientY\n }\n } else if ((e as TouchEvent).touches?.length == 1) {\n const touch = (e as TouchEvent).touches[0]\n return {\n x: touch.clientX,\n y: touch.clientY\n }\n } else {\n return\n }\n}\n\n@customElement('ox-floating-overlay')\nexport class OxFloatingOverlay extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n /* for layout style */\n :host {\n position: relative;\n z-index: 1;\n }\n\n :host([hovering='edge']) {\n /* edge hovering 인 경우에는 상위 relative position 크기와 위치를 반영한다. */\n position: initial;\n }\n\n #backdrop {\n position: fixed;\n left: 0;\n top: 0;\n\n width: 100vw;\n height: 100vh;\n height: 100dvh;\n\n background-color: var(--overlay-background-color);\n }\n\n [overlayed] {\n position: absolute;\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: transparent;\n }\n\n [overlayed][hovering='center'] {\n position: fixed;\n\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n opacity: 0;\n }\n\n [overlayed][hovering='center'][opened] {\n opacity: 1;\n transition: opacity 0.3s ease-in;\n }\n\n [hovering='center'] {\n width: var(--overlay-center-normal-width, 60%);\n height: var(--overlay-center-normal-height, 60%);\n }\n\n [hovering='center'][size='small'] {\n width: var(--overlay-center-small-width, 40%);\n height: var(--overlay-center-small-height, 40%);\n }\n\n [hovering='center'][size='large'] {\n width: var(--overlay-center-large-width, 100%);\n height: var(--overlay-center-large-height, 100%);\n }\n\n [header] {\n --help-icon-color: #fff;\n --help-icon-hover-color: #fff;\n\n pointer-events: initial;\n }\n\n [content] {\n flex: 1;\n overflow: hidden;\n }\n\n ::slotted(*) {\n box-sizing: border-box;\n pointer-events: initial;\n }\n\n [hovering='center'] [content] ::slotted(*) {\n width: 100%;\n height: 100%;\n }\n [direction='up'],\n [direction='down'] {\n width: 100%;\n\n max-height: 0;\n transition: max-height 0.7s ease-in;\n }\n [direction='up'] {\n bottom: 0;\n }\n [direction='down'] {\n top: 0;\n }\n\n [direction='up'][opened],\n [direction='down'][opened] {\n max-height: 100vh;\n max-height: 100dvh;\n }\n\n [settled][direction='down'] [content],\n [settled][direction='up'] [content] {\n overflow-y: auto;\n }\n\n [direction='left'],\n [direction='right'] {\n height: 100%;\n\n max-width: 0;\n transition: max-width 0.5s ease-in;\n }\n [direction='left'] {\n right: 0;\n }\n [direction='right'] {\n left: 0;\n }\n\n [direction='left'][opened],\n [direction='right'][opened] {\n max-width: 100vw;\n }\n\n [settled][direction='left'] [content],\n [settled][direction='right'] [content] {\n overflow-x: auto;\n }\n\n @media screen and (max-width: 460px) {\n [direction='up'],\n [direction='down'] {\n max-height: 100vh;\n max-height: 100dvh;\n }\n\n [direction='left'],\n [direction='right'] {\n max-width: 100vw;\n }\n }\n `,\n css`\n /* for header style */\n [header] {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n background-color: var(--overlay-header-background-color);\n color: var(--overlay-header-color);\n }\n\n slot[name='header'] {\n flex: 1;\n\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n }\n\n [name='header']::slotted(*) {\n margin: 0 auto;\n }\n\n [name='header'] > h1 {\n text-transform: capitalize;\n font: var(--overlay-header-font);\n }\n\n [historyback] {\n margin-left: 10px;\n margin-right: auto;\n }\n\n [close] {\n margin-left: auto;\n margin-right: 10px;\n }\n\n [historyback],\n [close] {\n display: none;\n }\n\n [closable][close] {\n display: block;\n }\n\n [search] ox-help-icon {\n color: var(--secondary-color);\n }\n\n [search] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n align-self: center;\n color: var(--secondary-color);\n background-color: var(--opacity-light-color);\n border-radius: 999em;\n padding: 0 10px;\n }\n\n [search] > * {\n align-self: center;\n }\n\n @media screen and (max-width: 460px) {\n [closable][historyback] {\n display: block;\n }\n\n [closable][close] {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Boolean }) backdrop?: boolean = false\n @property({ type: String }) direction?: 'up' | 'down' | 'left' | 'right'\n @property({ type: String, reflect: true }) hovering?: 'center' | 'edge' | 'next'\n @property({ type: String }) size?: 'small' | 'medium' | 'large'\n @property({ type: String }) name?: string\n @property({ type: String }) title: string = ''\n @property({ type: Boolean }) closable?: boolean = false\n @property({ type: Object }) templateProperties: any\n @property({ type: Object }) help: any\n @property({ type: Boolean }) historical?: boolean = false\n @property({ type: Boolean }) movable?: boolean = false\n @property({ type: Object }) search?: {\n value?: string\n handler?: (instance: any, value: string) => void\n placeholder?: string\n }\n @property({ type: Object }) filter?: { handler?: (instance: any) => void }\n\n private dragStart?: { x: number; y: number }\n private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n\n @query('[overlayed]') overlayed!: HTMLDivElement\n @query('[content]') content!: HTMLDivElement\n\n render() {\n const direction = this.hovering == 'center' ? undefined : this.direction\n\n const { value = '', handler: searchHandler, placeholder = '', autofocus = true } = this.search || ({} as any)\n const { handler: filterHandler } = this.filter || ({} as any)\n\n const searchable = typeof searchHandler == 'function'\n const filterable = typeof filterHandler == 'function'\n\n return html`\n ${Boolean(this.backdrop)\n ? html`\n <div\n id=\"backdrop\"\n ?hidden=${!this.backdrop}\n @click=${(e: Event) => this.onClose(e, true /* escape */)}\n ></div>\n `\n : html``}\n\n <div\n overlayed\n hovering=${this.hovering || 'center'}\n direction=${ifDefined(direction)}\n size=${this.size || 'medium'}\n @close-overlay=${(e: Event) => {\n e.stopPropagation()\n this.onClose(e)\n }}\n @transitionstart=${(e: Event) => {\n /* to hide scrollbar during transition */\n ;(e.target as HTMLElement).removeAttribute('settled')\n }}\n @transitionend=${(e: Event) => {\n ;(e.target as HTMLElement).setAttribute('settled', '')\n }}\n @click=${(e: MouseEvent) => {\n if (this.backdrop && e.target === this.content) {\n this.onClose(e, true /* escape */)\n }\n }}\n >\n <div\n header\n @mousedown=${this.onDragStart.bind(this)}\n @touchstart=${this.onDragStart.bind(this)}\n draggable=\"false\"\n >\n <mwc-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</mwc-icon>\n ${this.movable ? html`<mwc-icon>drag_indicator</mwc-icon>` : html``}\n <slot name=\"header\">\n ${this.title || this.closable\n ? html`\n <h1>\n ${this.title || ''} ${this.help\n ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>`\n : html``}\n </h1>\n `\n : html``}\n ${searchable || filterable\n ? html`\n <div search>\n ${searchable\n ? html` <ox-input-search\n .placeholder=${placeholder}\n .value=${value || ''}\n ?autofocus=${autofocus}\n @change=${(e: Event) => {\n searchHandler(this.firstElementChild, (e.target as any).value)\n }}\n ></ox-input-search>`\n : html``}\n ${this.help && searchable ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>` : html``}\n ${filterable\n ? html`<mwc-icon @click=${(e: MouseEvent) => filterHandler(this.firstElementChild)}\n >tune</mwc-icon\n >`\n : html``}\n </div>\n `\n : html``}\n ${this.help && !searchable && !this.title /* help only */\n ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>`\n : html``}\n </slot>\n <mwc-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} close>close</mwc-icon>\n </div>\n\n <div content>\n <slot> </slot>\n </div>\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('templateProperties') && this.templateProperties) {\n var template = this.firstElementChild\n if (template) {\n for (let prop in this.templateProperties) {\n //@ts-ignore\n template[prop] = this.templateProperties[prop]\n }\n }\n }\n }\n\n firstUpdated() {\n requestAnimationFrame(() => {\n /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */\n this.overlayed?.setAttribute('opened', 'true')\n })\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.movable = this.movable && !isHandheldDevice()\n\n if (this.movable) {\n document.addEventListener('mouseup', this.dragEndHandler)\n document.addEventListener('touchend', this.dragEndHandler)\n document.addEventListener('touchcancel', this.dragEndHandler)\n document.addEventListener('mousemove', this.dragMoveHandler)\n document.addEventListener('touchmove', this.dragMoveHandler)\n }\n }\n\n disconnectedCallback() {\n document.dispatchEvent(\n new CustomEvent('overlay-closed', {\n detail: this.name\n })\n )\n\n if (this.movable) {\n document.removeEventListener('mouseup', this.dragEndHandler!)\n document.removeEventListener('touchend', this.dragEndHandler!)\n document.removeEventListener('touchcancel', this.dragEndHandler!)\n document.removeEventListener('mousemove', this.dragMoveHandler!)\n document.removeEventListener('touchmove', this.dragMoveHandler!)\n }\n\n super.disconnectedCallback()\n }\n\n onDragStart(e: Event) {\n if (!this.movable) {\n return\n }\n\n const point = getPoint(e)\n\n if (point) {\n this.dragStart = point\n e.stopPropagation()\n return false\n }\n }\n\n onDragMove(e: Event) {\n if (!this.movable || !this.dragStart) {\n return false\n }\n\n const point = getPoint(e)\n\n if (!point) {\n return false\n }\n\n e.stopPropagation()\n e.preventDefault()\n\n const dragStart = point\n var { x, y } = point\n\n x -= this.dragStart.x\n y -= this.dragStart.y\n\n this.dragStart = dragStart\n\n const overlayed = this.overlayed\n\n var boundingRect = overlayed.getBoundingClientRect()\n\n overlayed.style.left =\n Math.min(document.body.offsetWidth - 40, Math.max(40 - overlayed.offsetWidth, boundingRect.left + x)) + 'px'\n overlayed.style.top = Math.min(document.body.offsetHeight - 40, Math.max(0, boundingRect.top + y)) + 'px'\n\n overlayed.style.transform = 'initial'\n\n return false\n }\n\n onDragEnd(e: Event) {\n if (this.movable && this.dragStart) {\n e.stopPropagation()\n e.preventDefault()\n\n delete this.dragStart\n }\n }\n\n close() {\n this.parentNode?.removeChild(this)\n }\n\n onClose(e: Event, escape?: boolean) {\n e.stopPropagation()\n /* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */\n\n if (this.historical) {\n var state = history.state\n var overlay = (state || {}).overlay\n\n if (!overlay || overlay.name !== this.name) {\n return\n }\n\n /* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */\n if (escape && !overlay.escapable) {\n return true\n }\n\n history.back()\n } else {\n this.close()\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-floating-overlay.js","sourceRoot":"","sources":["../../src/ox-floating-overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isHandheldDevice } from '@operato/utils'\n\nfunction getPoint(e: Event): { x: number; y: number } | undefined {\n if ((e as MouseEvent).button == 0) {\n return {\n x: (e as MouseEvent).clientX,\n y: (e as MouseEvent).clientY\n }\n } else if ((e as TouchEvent).touches?.length == 1) {\n const touch = (e as TouchEvent).touches[0]\n return {\n x: touch.clientX,\n y: touch.clientY\n }\n } else {\n return\n }\n}\n\n@customElement('ox-floating-overlay')\nexport class OxFloatingOverlay extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n /* for layout style */\n :host {\n position: relative;\n z-index: var(--z-index, 1);\n }\n\n :host([hovering='edge']) {\n /* edge hovering 인 경우에는 상위 relative position 크기와 위치를 반영한다. */\n position: initial;\n }\n\n #backdrop {\n position: fixed;\n left: 0;\n top: 0;\n\n width: 100vw;\n height: 100vh;\n height: 100dvh;\n\n background-color: var(--overlay-background-color);\n }\n\n [overlayed] {\n position: absolute;\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: transparent;\n }\n\n [overlayed][hovering='center'] {\n position: fixed;\n\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n opacity: 0;\n }\n\n [overlayed][hovering='center'][opened] {\n opacity: 1;\n transition: opacity 0.3s ease-in;\n }\n\n [hovering='center'] {\n width: var(--overlay-center-normal-width, 60%);\n height: var(--overlay-center-normal-height, 60%);\n }\n\n [hovering='center'][size='small'] {\n width: var(--overlay-center-small-width, 40%);\n height: var(--overlay-center-small-height, 40%);\n }\n\n [hovering='center'][size='large'] {\n width: var(--overlay-center-large-width, 100%);\n height: var(--overlay-center-large-height, 100%);\n }\n\n [header] {\n --help-icon-color: #fff;\n --help-icon-hover-color: #fff;\n\n pointer-events: initial;\n }\n\n [content] {\n flex: 1;\n overflow: hidden;\n }\n\n ::slotted(*) {\n box-sizing: border-box;\n pointer-events: initial;\n }\n\n [hovering='center'] [content] ::slotted(*) {\n width: 100%;\n height: 100%;\n }\n [direction='up'],\n [direction='down'] {\n width: 100%;\n\n max-height: 0;\n transition: max-height 0.7s ease-in;\n }\n [direction='up'] {\n bottom: 0;\n }\n [direction='down'] {\n top: 0;\n }\n\n [direction='up'][opened],\n [direction='down'][opened] {\n max-height: 100vh;\n max-height: 100dvh;\n }\n\n [settled][direction='down'] [content],\n [settled][direction='up'] [content] {\n overflow-y: auto;\n }\n\n [direction='left'],\n [direction='right'] {\n height: 100%;\n\n max-width: 0;\n transition: max-width 0.5s ease-in;\n }\n [direction='left'] {\n right: 0;\n }\n [direction='right'] {\n left: 0;\n }\n\n [direction='left'][opened],\n [direction='right'][opened] {\n max-width: 100vw;\n }\n\n [settled][direction='left'] [content],\n [settled][direction='right'] [content] {\n overflow-x: auto;\n }\n\n @media screen and (max-width: 460px) {\n [direction='up'],\n [direction='down'] {\n max-height: 100vh;\n max-height: 100dvh;\n }\n\n [direction='left'],\n [direction='right'] {\n max-width: 100vw;\n }\n }\n `,\n css`\n /* for header style */\n [header] {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n background-color: var(--overlay-header-background-color);\n color: var(--overlay-header-color);\n }\n\n slot[name='header'] {\n flex: 1;\n\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n }\n\n [name='header']::slotted(*) {\n margin: 0 auto;\n }\n\n [name='header'] > h1 {\n text-transform: capitalize;\n font: var(--overlay-header-font);\n }\n\n [historyback] {\n margin-left: 10px;\n margin-right: auto;\n }\n\n [close] {\n margin-left: auto;\n margin-right: 10px;\n }\n\n [historyback],\n [close] {\n display: none;\n }\n\n [closable][close] {\n display: block;\n }\n\n [search] ox-help-icon {\n color: var(--secondary-color);\n }\n\n [search] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n align-self: center;\n color: var(--secondary-color);\n background-color: var(--opacity-light-color);\n border-radius: 999em;\n padding: 0 10px;\n }\n\n [search] > * {\n align-self: center;\n }\n\n @media screen and (max-width: 460px) {\n [closable][historyback] {\n display: block;\n }\n\n [closable][close] {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Boolean }) backdrop?: boolean = false\n @property({ type: String }) direction?: 'up' | 'down' | 'left' | 'right'\n @property({ type: String, reflect: true }) hovering?: 'center' | 'edge' | 'next'\n @property({ type: String }) size?: 'small' | 'medium' | 'large'\n @property({ type: String }) name?: string\n @property({ type: String }) title: string = ''\n @property({ type: Boolean }) closable?: boolean = false\n @property({ type: Object }) templateProperties: any\n @property({ type: Object }) help: any\n @property({ type: Boolean }) historical?: boolean = false\n @property({ type: Boolean }) movable?: boolean = false\n @property({ type: Object }) search?: {\n value?: string\n handler?: (instance: any, value: string) => void\n placeholder?: string\n }\n @property({ type: Object }) filter?: { handler?: (instance: any) => void }\n @property({ type: Number, attribute: 'z-index' }) zIndex?: number\n\n private dragStart?: { x: number; y: number }\n private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n\n @query('[overlayed]') overlayed!: HTMLDivElement\n @query('[content]') content!: HTMLDivElement\n\n render() {\n const direction = this.hovering == 'center' ? undefined : this.direction\n\n const { value = '', handler: searchHandler, placeholder = '', autofocus = true } = this.search || ({} as any)\n const { handler: filterHandler } = this.filter || ({} as any)\n\n const searchable = typeof searchHandler == 'function'\n const filterable = typeof filterHandler == 'function'\n\n return html`\n ${Boolean(this.backdrop)\n ? html`\n <div\n id=\"backdrop\"\n ?hidden=${!this.backdrop}\n @click=${(e: Event) => this.onClose(e, true /* escape */)}\n ></div>\n `\n : html``}\n\n <div\n overlayed\n hovering=${this.hovering || 'center'}\n direction=${ifDefined(direction)}\n size=${this.size || 'medium'}\n @close-overlay=${(e: Event) => {\n e.stopPropagation()\n this.onClose(e)\n }}\n @transitionstart=${(e: Event) => {\n /* to hide scrollbar during transition */\n ;(e.target as HTMLElement).removeAttribute('settled')\n }}\n @transitionend=${(e: Event) => {\n ;(e.target as HTMLElement).setAttribute('settled', '')\n }}\n @click=${(e: MouseEvent) => {\n if (this.backdrop && e.target === this.content) {\n this.onClose(e, true /* escape */)\n }\n }}\n >\n <div\n header\n @mousedown=${this.onDragStart.bind(this)}\n @touchstart=${this.onDragStart.bind(this)}\n draggable=\"false\"\n >\n <mwc-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</mwc-icon>\n ${this.movable ? html`<mwc-icon>drag_indicator</mwc-icon>` : html``}\n <slot name=\"header\">\n ${this.title || this.closable\n ? html`\n <h1>\n ${this.title || ''} ${this.help\n ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>`\n : html``}\n </h1>\n `\n : html``}\n ${searchable || filterable\n ? html`\n <div search>\n ${searchable\n ? html` <ox-input-search\n .placeholder=${placeholder}\n .value=${value || ''}\n ?autofocus=${autofocus}\n @change=${(e: Event) => {\n searchHandler(this.firstElementChild, (e.target as any).value)\n }}\n ></ox-input-search>`\n : html``}\n ${this.help && searchable ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>` : html``}\n ${filterable\n ? html`<mwc-icon @click=${(e: MouseEvent) => filterHandler(this.firstElementChild)}\n >tune</mwc-icon\n >`\n : html``}\n </div>\n `\n : html``}\n ${this.help && !searchable && !this.title /* help only */\n ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>`\n : html``}\n </slot>\n <mwc-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} close>close</mwc-icon>\n </div>\n\n <div content>\n <slot> </slot>\n </div>\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('templateProperties') && this.templateProperties) {\n var template = this.firstElementChild\n if (template) {\n for (let prop in this.templateProperties) {\n //@ts-ignore\n template[prop] = this.templateProperties[prop]\n }\n }\n }\n }\n\n firstUpdated() {\n if (this.zIndex) {\n this.style.setProperty('--z-index', String(this.zIndex))\n }\n\n requestAnimationFrame(() => {\n /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */\n this.overlayed?.setAttribute('opened', 'true')\n })\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.movable = this.movable && !isHandheldDevice()\n\n if (this.movable) {\n document.addEventListener('mouseup', this.dragEndHandler)\n document.addEventListener('touchend', this.dragEndHandler)\n document.addEventListener('touchcancel', this.dragEndHandler)\n document.addEventListener('mousemove', this.dragMoveHandler)\n document.addEventListener('touchmove', this.dragMoveHandler)\n }\n }\n\n disconnectedCallback() {\n document.dispatchEvent(\n new CustomEvent('overlay-closed', {\n detail: this.name\n })\n )\n\n if (this.movable) {\n document.removeEventListener('mouseup', this.dragEndHandler!)\n document.removeEventListener('touchend', this.dragEndHandler!)\n document.removeEventListener('touchcancel', this.dragEndHandler!)\n document.removeEventListener('mousemove', this.dragMoveHandler!)\n document.removeEventListener('touchmove', this.dragMoveHandler!)\n }\n\n super.disconnectedCallback()\n }\n\n onDragStart(e: Event) {\n if (!this.movable) {\n return\n }\n\n const point = getPoint(e)\n\n if (point) {\n this.dragStart = point\n e.stopPropagation()\n return false\n }\n }\n\n onDragMove(e: Event) {\n if (!this.movable || !this.dragStart) {\n return false\n }\n\n const point = getPoint(e)\n\n if (!point) {\n return false\n }\n\n e.stopPropagation()\n e.preventDefault()\n\n const dragStart = point\n var { x, y } = point\n\n x -= this.dragStart.x\n y -= this.dragStart.y\n\n this.dragStart = dragStart\n\n const overlayed = this.overlayed\n\n var boundingRect = overlayed.getBoundingClientRect()\n\n overlayed.style.left =\n Math.min(document.body.offsetWidth - 40, Math.max(40 - overlayed.offsetWidth, boundingRect.left + x)) + 'px'\n overlayed.style.top = Math.min(document.body.offsetHeight - 40, Math.max(0, boundingRect.top + y)) + 'px'\n\n overlayed.style.transform = 'initial'\n\n return false\n }\n\n onDragEnd(e: Event) {\n if (this.movable && this.dragStart) {\n e.stopPropagation()\n e.preventDefault()\n\n delete this.dragStart\n }\n }\n\n close() {\n this.parentNode?.removeChild(this)\n }\n\n onClose(e: Event, escape?: boolean) {\n e.stopPropagation()\n /* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */\n\n if (this.historical) {\n var state = history.state\n var overlay = (state || {}).overlay\n\n if (!overlay || overlay.name !== this.name) {\n return\n }\n\n /* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */\n if (escape && !overlay.escapable) {\n return true\n }\n\n history.back()\n } else {\n this.close()\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import '@material/mwc-button';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
export declare class OxPrompt extends LitElement {
|
|
4
|
+
static styles: import("lit").CSSResult[];
|
|
5
|
+
type?: 'success' | 'error' | 'warning' | 'info' | 'question';
|
|
6
|
+
icon?: 'success' | 'error' | 'warning' | 'info' | 'question';
|
|
7
|
+
titler?: string;
|
|
8
|
+
text?: string;
|
|
9
|
+
footer?: string;
|
|
10
|
+
position?: 'top' | 'top-start' | 'top-end' | 'center' | 'center-start' | 'center-end' | 'bottom' | 'bottom-start' | 'bottom-end';
|
|
11
|
+
toast?: boolean;
|
|
12
|
+
confirmButton?: {
|
|
13
|
+
text: string;
|
|
14
|
+
color?: string;
|
|
15
|
+
};
|
|
16
|
+
cancelButton?: {
|
|
17
|
+
text: string;
|
|
18
|
+
color?: string;
|
|
19
|
+
};
|
|
20
|
+
callback?: Function;
|
|
21
|
+
_parent?: Element;
|
|
22
|
+
private resolveFn;
|
|
23
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
24
|
+
onConfirm(): void;
|
|
25
|
+
onCancel(): void;
|
|
26
|
+
protected _onfocusout: (e: FocusEvent) => void;
|
|
27
|
+
protected _onkeydown: (e: KeyboardEvent) => void;
|
|
28
|
+
protected _onkeyup: (e: KeyboardEvent) => void;
|
|
29
|
+
protected _onmouseup: (e: MouseEvent) => void;
|
|
30
|
+
protected _onmousedown: (e: MouseEvent) => void;
|
|
31
|
+
protected _oncontext: (e: Event) => void;
|
|
32
|
+
protected _onclick: (e: MouseEvent) => void;
|
|
33
|
+
protected _onclose: (e: Event) => void;
|
|
34
|
+
protected _oncollapse: (e: Event) => void;
|
|
35
|
+
protected _onwindowblur: (e: Event) => void;
|
|
36
|
+
connectedCallback(): void;
|
|
37
|
+
static open({ template, type, icon, title, text, footer, confirmButton, cancelButton, top, left, right, bottom, width, height, parent }: {
|
|
38
|
+
template?: unknown;
|
|
39
|
+
type?: 'success' | 'error' | 'warning' | 'info' | 'question';
|
|
40
|
+
icon?: 'success' | 'error' | 'warning' | 'info' | 'question';
|
|
41
|
+
title?: string;
|
|
42
|
+
text?: string;
|
|
43
|
+
footer?: string;
|
|
44
|
+
confirmButton?: {
|
|
45
|
+
text: string;
|
|
46
|
+
color?: string;
|
|
47
|
+
};
|
|
48
|
+
cancelButton?: {
|
|
49
|
+
text: string;
|
|
50
|
+
color?: string;
|
|
51
|
+
};
|
|
52
|
+
top?: number;
|
|
53
|
+
left?: number;
|
|
54
|
+
right?: number;
|
|
55
|
+
bottom?: number;
|
|
56
|
+
width?: string;
|
|
57
|
+
height?: string;
|
|
58
|
+
parent?: Element | null;
|
|
59
|
+
}): Promise<boolean>;
|
|
60
|
+
open({ left, top, right, bottom, width, height, silent }: {
|
|
61
|
+
left?: number;
|
|
62
|
+
top?: number;
|
|
63
|
+
right?: number;
|
|
64
|
+
bottom?: number;
|
|
65
|
+
width?: string;
|
|
66
|
+
height?: string;
|
|
67
|
+
silent?: boolean;
|
|
68
|
+
}): Promise<boolean>;
|
|
69
|
+
guaranteeFocus(target?: HTMLElement): void;
|
|
70
|
+
close(): void;
|
|
71
|
+
}
|
|
@@ -0,0 +1,293 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import '@material/mwc-button';
|
|
3
|
+
import { css, html, nothing, LitElement } from 'lit';
|
|
4
|
+
import { render } from 'lit-html';
|
|
5
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
6
|
+
let OxPrompt = class OxPrompt extends LitElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(...arguments);
|
|
9
|
+
this.titler = '';
|
|
10
|
+
this.resolveFn = null;
|
|
11
|
+
this._onfocusout = function (e) {
|
|
12
|
+
const to = e.relatedTarget;
|
|
13
|
+
if (!this.contains(to)) {
|
|
14
|
+
/* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */
|
|
15
|
+
// @ts-ignore for debug
|
|
16
|
+
!window.POPUP_DEBUG && this.close();
|
|
17
|
+
}
|
|
18
|
+
}.bind(this);
|
|
19
|
+
this._onkeydown = function (e) {
|
|
20
|
+
e.stopPropagation();
|
|
21
|
+
switch (e.key) {
|
|
22
|
+
case 'Esc': // for IE/Edge
|
|
23
|
+
case 'Escape':
|
|
24
|
+
this.close();
|
|
25
|
+
break;
|
|
26
|
+
}
|
|
27
|
+
}.bind(this);
|
|
28
|
+
this._onkeyup = function (e) {
|
|
29
|
+
e.stopPropagation();
|
|
30
|
+
}.bind(this);
|
|
31
|
+
this._onmouseup = function (e) {
|
|
32
|
+
e.stopPropagation();
|
|
33
|
+
}.bind(this);
|
|
34
|
+
this._onmousedown = function (e) {
|
|
35
|
+
e.stopPropagation();
|
|
36
|
+
}.bind(this);
|
|
37
|
+
this._oncontext = function (e) {
|
|
38
|
+
e.stopPropagation();
|
|
39
|
+
}.bind(this);
|
|
40
|
+
this._onclick = function (e) {
|
|
41
|
+
e.stopPropagation();
|
|
42
|
+
}.bind(this);
|
|
43
|
+
this._onclose = function (e) {
|
|
44
|
+
this.close();
|
|
45
|
+
}.bind(this);
|
|
46
|
+
this._oncollapse = function (e) {
|
|
47
|
+
e.stopPropagation();
|
|
48
|
+
this.close();
|
|
49
|
+
}.bind(this);
|
|
50
|
+
this._onwindowblur = function (e) {
|
|
51
|
+
// @ts-ignore for debug
|
|
52
|
+
!window.POPUP_DEBUG && this.close();
|
|
53
|
+
}.bind(this);
|
|
54
|
+
}
|
|
55
|
+
render() {
|
|
56
|
+
var _a, _b;
|
|
57
|
+
return html `
|
|
58
|
+
${this.titler ? html ` <div titler>${this.titler}</div> ` : nothing}
|
|
59
|
+
<div content>
|
|
60
|
+
${this.icon || this.type ? html ` <mwc-icon icon>${this.icon || this.type}</mwc-icon> ` : nothing}
|
|
61
|
+
${this.text ? html ` <div text>${this.text}</div> ` : nothing}
|
|
62
|
+
<slot> </slot>
|
|
63
|
+
${this.footer ? html ` <div footer>${this.footer}</div> ` : nothing}
|
|
64
|
+
</div>
|
|
65
|
+
<div buttons>
|
|
66
|
+
${this.confirmButton
|
|
67
|
+
? html ` <mwc-button raised @click=${(e) => this.onConfirm()}>${(_a = this.confirmButton) === null || _a === void 0 ? void 0 : _a.text}</mwc-button> `
|
|
68
|
+
: nothing}
|
|
69
|
+
${this.cancelButton
|
|
70
|
+
? html ` <mwc-button raised @click=${(e) => this.onCancel()}>${(_b = this.cancelButton) === null || _b === void 0 ? void 0 : _b.text}</mwc-button> `
|
|
71
|
+
: nothing}
|
|
72
|
+
</div>
|
|
73
|
+
`;
|
|
74
|
+
}
|
|
75
|
+
onConfirm() {
|
|
76
|
+
this.resolveFn && this.resolveFn(true);
|
|
77
|
+
this.close();
|
|
78
|
+
}
|
|
79
|
+
onCancel() {
|
|
80
|
+
this.resolveFn && this.resolveFn(false);
|
|
81
|
+
this.close();
|
|
82
|
+
}
|
|
83
|
+
connectedCallback() {
|
|
84
|
+
super.connectedCallback();
|
|
85
|
+
this.addEventListener('focusout', this._onfocusout);
|
|
86
|
+
this.addEventListener('keydown', this._onkeydown);
|
|
87
|
+
this.addEventListener('keyup', this._onkeyup);
|
|
88
|
+
this.addEventListener('click', this._onclick);
|
|
89
|
+
this.addEventListener('mouseup', this._onmouseup);
|
|
90
|
+
this.addEventListener('mousedown', this._onmousedown);
|
|
91
|
+
this.addEventListener('context', this._oncontext);
|
|
92
|
+
this.addEventListener('ox-close', this._onclose);
|
|
93
|
+
this.addEventListener('ox-collapse', this._oncollapse);
|
|
94
|
+
this.setAttribute('tabindex', '0'); // make this element focusable
|
|
95
|
+
this.guaranteeFocus();
|
|
96
|
+
}
|
|
97
|
+
static open({ template, type, icon, title, text, footer, confirmButton, cancelButton, top, left, right, bottom, width, height, parent }) {
|
|
98
|
+
const owner = parent || document.body;
|
|
99
|
+
const target = document.createElement('ox-prompt');
|
|
100
|
+
target.type = type;
|
|
101
|
+
target.icon = icon;
|
|
102
|
+
target.text = text;
|
|
103
|
+
target.titler = title;
|
|
104
|
+
target.footer = footer;
|
|
105
|
+
target.confirmButton = confirmButton;
|
|
106
|
+
target.cancelButton = cancelButton;
|
|
107
|
+
render(template, target);
|
|
108
|
+
target._parent = owner;
|
|
109
|
+
owner.appendChild(target);
|
|
110
|
+
return target.open({ top, left, right, bottom, width, height });
|
|
111
|
+
}
|
|
112
|
+
open({ left, top, right, bottom, width, height, silent = false }) {
|
|
113
|
+
if (width) {
|
|
114
|
+
this.style.maxWidth = width;
|
|
115
|
+
this.style.overflowX = 'auto';
|
|
116
|
+
}
|
|
117
|
+
if (height) {
|
|
118
|
+
this.style.maxHeight = height;
|
|
119
|
+
this.style.overflowY = 'auto';
|
|
120
|
+
}
|
|
121
|
+
if (left === undefined && top === undefined && right === undefined && bottom === undefined) {
|
|
122
|
+
this.style.left = '50%';
|
|
123
|
+
this.style.top = '50%';
|
|
124
|
+
this.style.transform = 'translateX(-50%) translateY(-50%)';
|
|
125
|
+
}
|
|
126
|
+
else {
|
|
127
|
+
if (left !== undefined)
|
|
128
|
+
this.style.left = `${left}px`;
|
|
129
|
+
if (top !== undefined)
|
|
130
|
+
this.style.top = `${top}px`;
|
|
131
|
+
if (right !== undefined)
|
|
132
|
+
this.style.right = `${right}px`;
|
|
133
|
+
if (bottom !== undefined)
|
|
134
|
+
this.style.bottom = `${bottom}px`;
|
|
135
|
+
}
|
|
136
|
+
this.setAttribute('active', '');
|
|
137
|
+
// adjust popup position
|
|
138
|
+
requestAnimationFrame(() => {
|
|
139
|
+
const vh = document.body.clientHeight;
|
|
140
|
+
const vw = document.body.clientWidth;
|
|
141
|
+
var bounding = this.getBoundingClientRect();
|
|
142
|
+
var h = bounding.height;
|
|
143
|
+
var w = bounding.width;
|
|
144
|
+
var t = bounding.top;
|
|
145
|
+
var l = bounding.left;
|
|
146
|
+
// If the popup is too large, it will cause overflow scrolling.
|
|
147
|
+
if (vh < h) {
|
|
148
|
+
this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`;
|
|
149
|
+
this.style.overflow = 'auto';
|
|
150
|
+
h = vh;
|
|
151
|
+
}
|
|
152
|
+
if (vw < w) {
|
|
153
|
+
this.style.width = `${Math.min(Math.max(Math.floor((vw * 2) / 3), vw - (l + 20)), vw)}px`;
|
|
154
|
+
this.style.overflow = 'auto';
|
|
155
|
+
w = vw;
|
|
156
|
+
}
|
|
157
|
+
// To prevent pop-ups from crossing screen boundaries, use the
|
|
158
|
+
const computedStyle = getComputedStyle(this);
|
|
159
|
+
if (t < 0) {
|
|
160
|
+
this.style.top = `calc(${computedStyle.top} + ${t}px)`; // 현재의 top 값에 t를 추가한다.
|
|
161
|
+
this.style.bottom = '';
|
|
162
|
+
}
|
|
163
|
+
else if (vh < t + h) {
|
|
164
|
+
this.style.top = `calc(${computedStyle.top} - ${t + h - vh}px)`; // 현재의 top 값에 차감한다.
|
|
165
|
+
this.style.bottom = '';
|
|
166
|
+
}
|
|
167
|
+
if (l < 0) {
|
|
168
|
+
this.style.left = `calc(${computedStyle.left} + ${l}px)`; // 현재의 left 값에 l를 추가한다.
|
|
169
|
+
this.style.right = '';
|
|
170
|
+
}
|
|
171
|
+
else if (vw < l + w) {
|
|
172
|
+
this.style.left = `calc(${computedStyle.left} - ${l + w - vw}px)`; // 현재의 left 값에 차감한다.
|
|
173
|
+
this.style.right = '';
|
|
174
|
+
}
|
|
175
|
+
});
|
|
176
|
+
// auto focusing
|
|
177
|
+
!silent && this.guaranteeFocus();
|
|
178
|
+
/* When the window is out of focus, all pop-ups should disappear. */
|
|
179
|
+
window.addEventListener('blur', this._onwindowblur);
|
|
180
|
+
return new Promise(resolve => {
|
|
181
|
+
this.resolveFn = resolve;
|
|
182
|
+
});
|
|
183
|
+
}
|
|
184
|
+
guaranteeFocus(target) {
|
|
185
|
+
const focusible = (target || this).querySelector(':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex="-1"])');
|
|
186
|
+
if (focusible) {
|
|
187
|
+
;
|
|
188
|
+
focusible.focus();
|
|
189
|
+
}
|
|
190
|
+
else {
|
|
191
|
+
this.focus();
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
close() {
|
|
195
|
+
this.removeAttribute('active');
|
|
196
|
+
window.removeEventListener('blur', this._onwindowblur);
|
|
197
|
+
if (this._parent) {
|
|
198
|
+
/* this case is when the popup is opened by OxPrompt.open(...) */
|
|
199
|
+
this.removeEventListener('focusout', this._onfocusout);
|
|
200
|
+
this.removeEventListener('keydown', this._onkeydown);
|
|
201
|
+
this.removeEventListener('keyup', this._onkeyup);
|
|
202
|
+
this.removeEventListener('click', this._onclick);
|
|
203
|
+
this.removeEventListener('ox-close', this._onclose);
|
|
204
|
+
this.removeEventListener('ox-collapse', this._oncollapse);
|
|
205
|
+
this.removeEventListener('mouseup', this._onmouseup);
|
|
206
|
+
this.removeEventListener('mousedown', this._onmousedown);
|
|
207
|
+
this.removeEventListener('context', this._oncontext);
|
|
208
|
+
this._parent.removeChild(this);
|
|
209
|
+
delete this._parent;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
};
|
|
213
|
+
OxPrompt.styles = [
|
|
214
|
+
css `
|
|
215
|
+
:host {
|
|
216
|
+
position: absolute;
|
|
217
|
+
display: none;
|
|
218
|
+
background-color: var(--theme-white-color, #fff);
|
|
219
|
+
z-index: 100;
|
|
220
|
+
padding: 0;
|
|
221
|
+
box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
|
|
222
|
+
box-sizing: border-box;
|
|
223
|
+
min-width: fit-content;
|
|
224
|
+
line-height: initial;
|
|
225
|
+
text-align: initial;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
:host([active]) {
|
|
229
|
+
display: block;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
:host(*:focus) {
|
|
233
|
+
outline: none;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
[titler] {
|
|
237
|
+
padding: var(--default-padding, 6px);
|
|
238
|
+
background-color: var(--primary-color, #ccc);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
[content] {
|
|
242
|
+
display: flex;
|
|
243
|
+
flex-direction: column;
|
|
244
|
+
gap: 6px;
|
|
245
|
+
padding: var(--default-padding, 6px);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
[buttons] {
|
|
249
|
+
display: flex;
|
|
250
|
+
justify-content: flex-end;
|
|
251
|
+
gap: 6px;
|
|
252
|
+
padding: var(--default-padding, 6px);
|
|
253
|
+
}
|
|
254
|
+
`
|
|
255
|
+
];
|
|
256
|
+
__decorate([
|
|
257
|
+
property({ type: String })
|
|
258
|
+
], OxPrompt.prototype, "type", void 0);
|
|
259
|
+
__decorate([
|
|
260
|
+
property({ type: String })
|
|
261
|
+
], OxPrompt.prototype, "icon", void 0);
|
|
262
|
+
__decorate([
|
|
263
|
+
property({ type: String })
|
|
264
|
+
], OxPrompt.prototype, "titler", void 0);
|
|
265
|
+
__decorate([
|
|
266
|
+
property({ type: String })
|
|
267
|
+
], OxPrompt.prototype, "text", void 0);
|
|
268
|
+
__decorate([
|
|
269
|
+
property({ type: String })
|
|
270
|
+
], OxPrompt.prototype, "footer", void 0);
|
|
271
|
+
__decorate([
|
|
272
|
+
property({ type: String })
|
|
273
|
+
], OxPrompt.prototype, "position", void 0);
|
|
274
|
+
__decorate([
|
|
275
|
+
property({ type: Boolean })
|
|
276
|
+
], OxPrompt.prototype, "toast", void 0);
|
|
277
|
+
__decorate([
|
|
278
|
+
property({ type: Object })
|
|
279
|
+
], OxPrompt.prototype, "confirmButton", void 0);
|
|
280
|
+
__decorate([
|
|
281
|
+
property({ type: Object })
|
|
282
|
+
], OxPrompt.prototype, "cancelButton", void 0);
|
|
283
|
+
__decorate([
|
|
284
|
+
property({ type: Object })
|
|
285
|
+
], OxPrompt.prototype, "callback", void 0);
|
|
286
|
+
__decorate([
|
|
287
|
+
state()
|
|
288
|
+
], OxPrompt.prototype, "_parent", void 0);
|
|
289
|
+
OxPrompt = __decorate([
|
|
290
|
+
customElement('ox-prompt')
|
|
291
|
+
], OxPrompt);
|
|
292
|
+
export { OxPrompt };
|
|
293
|
+
//# sourceMappingURL=ox-prompt.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-prompt.js","sourceRoot":"","sources":["../../src/ox-prompt.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-button'\n\nimport { css, html, nothing, LitElement } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('ox-prompt')\nexport class OxPrompt extends LitElement {\n static styles = [\n css`\n :host {\n position: absolute;\n display: none;\n background-color: var(--theme-white-color, #fff);\n z-index: 100;\n padding: 0;\n box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n box-sizing: border-box;\n min-width: fit-content;\n line-height: initial;\n text-align: initial;\n }\n\n :host([active]) {\n display: block;\n }\n\n :host(*:focus) {\n outline: none;\n }\n\n [titler] {\n padding: var(--default-padding, 6px);\n background-color: var(--primary-color, #ccc);\n }\n\n [content] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: var(--default-padding, 6px);\n }\n\n [buttons] {\n display: flex;\n justify-content: flex-end;\n gap: 6px;\n padding: var(--default-padding, 6px);\n }\n `\n ]\n\n @property({ type: String }) type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n @property({ type: String }) icon?: 'success' | 'error' | 'warning' | 'info' | 'question'\n @property({ type: String }) titler?: string = ''\n @property({ type: String }) text?: string\n @property({ type: String }) footer?: string\n @property({ type: String }) position?:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'center'\n | 'center-start'\n | 'center-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n @property({ type: Boolean }) toast?: boolean\n @property({ type: Object }) confirmButton?: { text: string; color?: string }\n @property({ type: Object }) cancelButton?: { text: string; color?: string }\n @property({ type: Object }) callback?: Function\n\n @state() _parent?: Element\n\n private resolveFn: ((value: boolean) => void) | null = null\n\n render() {\n return html`\n ${this.titler ? html` <div titler>${this.titler}</div> ` : nothing}\n <div content>\n ${this.icon || this.type ? html` <mwc-icon icon>${this.icon || this.type}</mwc-icon> ` : nothing}\n ${this.text ? html` <div text>${this.text}</div> ` : nothing}\n <slot> </slot>\n ${this.footer ? html` <div footer>${this.footer}</div> ` : nothing}\n </div>\n <div buttons>\n ${this.confirmButton\n ? html` <mwc-button raised @click=${(e: Event) => this.onConfirm()}>${this.confirmButton?.text}</mwc-button> `\n : nothing}\n ${this.cancelButton\n ? html` <mwc-button raised @click=${(e: Event) => this.onCancel()}>${this.cancelButton?.text}</mwc-button> `\n : nothing}\n </div>\n `\n }\n\n onConfirm() {\n this.resolveFn && this.resolveFn(true)\n this.close()\n }\n\n onCancel() {\n this.resolveFn && this.resolveFn(false)\n this.close()\n }\n\n protected _onfocusout: (e: FocusEvent) => void = function (this: OxPrompt, e: FocusEvent) {\n const to = e.relatedTarget as HTMLElement\n\n if (!this.contains(to)) {\n /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */\n // @ts-ignore for debug\n !window.POPUP_DEBUG && this.close()\n }\n }.bind(this)\n\n protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPrompt, e: KeyboardEvent) {\n e.stopPropagation()\n\n switch (e.key) {\n case 'Esc': // for IE/Edge\n case 'Escape':\n this.close()\n break\n }\n }.bind(this)\n\n protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxPrompt, e: KeyboardEvent) {\n e.stopPropagation()\n }.bind(this)\n\n protected _onmouseup: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n e.stopPropagation()\n }.bind(this)\n\n protected _onmousedown: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n e.stopPropagation()\n }.bind(this)\n\n protected _oncontext: (e: Event) => void = function (this: OxPrompt, e: Event) {\n e.stopPropagation()\n }.bind(this)\n\n protected _onclick: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n e.stopPropagation()\n }.bind(this)\n\n protected _onclose: (e: Event) => void = function (this: OxPrompt, e: Event) {\n this.close()\n }.bind(this)\n\n protected _oncollapse: (e: Event) => void = function (this: OxPrompt, e: Event) {\n e.stopPropagation()\n this.close()\n }.bind(this)\n\n protected _onwindowblur: (e: Event) => void = function (this: OxPrompt, e: Event) {\n // @ts-ignore for debug\n !window.POPUP_DEBUG && this.close()\n }.bind(this)\n\n connectedCallback() {\n super.connectedCallback()\n\n this.addEventListener('focusout', this._onfocusout)\n this.addEventListener('keydown', this._onkeydown)\n this.addEventListener('keyup', this._onkeyup)\n this.addEventListener('click', this._onclick)\n this.addEventListener('mouseup', this._onmouseup)\n this.addEventListener('mousedown', this._onmousedown)\n this.addEventListener('context', this._oncontext)\n this.addEventListener('ox-close', this._onclose)\n this.addEventListener('ox-collapse', this._oncollapse)\n\n this.setAttribute('tabindex', '0') // make this element focusable\n this.guaranteeFocus()\n }\n\n public static open({\n template,\n type,\n icon,\n title,\n text,\n footer,\n confirmButton,\n cancelButton,\n top,\n left,\n right,\n bottom,\n width,\n height,\n parent\n }: {\n template?: unknown\n type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n icon?: 'success' | 'error' | 'warning' | 'info' | 'question'\n title?: string\n text?: string\n footer?: string\n confirmButton?: { text: string; color?: string }\n cancelButton?: { text: string; color?: string }\n top?: number\n left?: number\n right?: number\n bottom?: number\n width?: string\n height?: string\n parent?: Element | null\n }): Promise<boolean> {\n const owner = parent || document.body\n const target = document.createElement('ox-prompt') as OxPrompt\n\n target.type = type\n target.icon = icon\n target.text = text\n target.titler = title\n target.footer = footer\n target.confirmButton = confirmButton\n target.cancelButton = cancelButton\n\n render(template, target)\n\n target._parent = owner\n owner.appendChild(target)\n\n return target.open({ top, left, right, bottom, width, height })\n }\n\n open({\n left,\n top,\n right,\n bottom,\n width,\n height,\n silent = false\n }: {\n left?: number\n top?: number\n right?: number\n bottom?: number\n width?: string\n height?: string\n silent?: boolean\n }): Promise<boolean> {\n if (width) {\n this.style.maxWidth = width\n this.style.overflowX = 'auto'\n }\n\n if (height) {\n this.style.maxHeight = height\n this.style.overflowY = 'auto'\n }\n\n if (left === undefined && top === undefined && right === undefined && bottom === undefined) {\n this.style.left = '50%'\n this.style.top = '50%'\n this.style.transform = 'translateX(-50%) translateY(-50%)'\n } else {\n if (left !== undefined) this.style.left = `${left}px`\n if (top !== undefined) this.style.top = `${top}px`\n if (right !== undefined) this.style.right = `${right}px`\n if (bottom !== undefined) this.style.bottom = `${bottom}px`\n }\n\n this.setAttribute('active', '')\n\n // adjust popup position\n requestAnimationFrame(() => {\n const vh = document.body.clientHeight\n const vw = document.body.clientWidth\n\n var bounding = this.getBoundingClientRect()\n\n var h = bounding.height\n var w = bounding.width\n var t = bounding.top\n var l = bounding.left\n\n // If the popup is too large, it will cause overflow scrolling.\n if (vh < h) {\n this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`\n this.style.overflow = 'auto'\n h = vh\n }\n\n if (vw < w) {\n this.style.width = `${Math.min(Math.max(Math.floor((vw * 2) / 3), vw - (l + 20)), vw)}px`\n this.style.overflow = 'auto'\n w = vw\n }\n\n // To prevent pop-ups from crossing screen boundaries, use the\n const computedStyle = getComputedStyle(this)\n\n if (t < 0) {\n this.style.top = `calc(${computedStyle.top} + ${t}px)` // 현재의 top 값에 t를 추가한다.\n this.style.bottom = ''\n } else if (vh < t + h) {\n this.style.top = `calc(${computedStyle.top} - ${t + h - vh}px)` // 현재의 top 값에 차감한다.\n this.style.bottom = ''\n }\n\n if (l < 0) {\n this.style.left = `calc(${computedStyle.left} + ${l}px)` // 현재의 left 값에 l를 추가한다.\n this.style.right = ''\n } else if (vw < l + w) {\n this.style.left = `calc(${computedStyle.left} - ${l + w - vw}px)` // 현재의 left 값에 차감한다.\n this.style.right = ''\n }\n })\n\n // auto focusing\n !silent && this.guaranteeFocus()\n\n /* When the window is out of focus, all pop-ups should disappear. */\n window.addEventListener('blur', this._onwindowblur)\n\n return new Promise(resolve => {\n this.resolveFn = resolve\n })\n }\n\n guaranteeFocus(target?: HTMLElement) {\n const focusible = (target || this).querySelector(\n ':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex=\"-1\"])'\n )\n\n if (focusible) {\n ;(focusible as HTMLElement).focus()\n } else {\n this.focus()\n }\n }\n\n close() {\n this.removeAttribute('active')\n\n window.removeEventListener('blur', this._onwindowblur)\n\n if (this._parent) {\n /* this case is when the popup is opened by OxPrompt.open(...) */\n this.removeEventListener('focusout', this._onfocusout)\n this.removeEventListener('keydown', this._onkeydown)\n this.removeEventListener('keyup', this._onkeyup)\n this.removeEventListener('click', this._onclick)\n this.removeEventListener('ox-close', this._onclose)\n this.removeEventListener('ox-collapse', this._oncollapse)\n this.removeEventListener('mouseup', this._onmouseup)\n this.removeEventListener('mousedown', this._onmousedown)\n this.removeEventListener('context', this._oncontext)\n\n this._parent.removeChild(this)\n delete this._parent\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
declare const _default: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: string;
|
|
5
|
+
argTypes: {};
|
|
6
|
+
};
|
|
7
|
+
export default _default;
|
|
8
|
+
interface Story<T> {
|
|
9
|
+
(args: T): TemplateResult;
|
|
10
|
+
args?: Partial<T>;
|
|
11
|
+
argTypes?: Record<string, unknown>;
|
|
12
|
+
}
|
|
13
|
+
interface ArgTypes {
|
|
14
|
+
}
|
|
15
|
+
export declare const Regular: Story<ArgTypes>;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import { OxPrompt } from '../src/ox-prompt';
|
|
3
|
+
export default {
|
|
4
|
+
title: 'OxPrompt - Normal',
|
|
5
|
+
component: 'ox-prompt',
|
|
6
|
+
argTypes: {}
|
|
7
|
+
};
|
|
8
|
+
function popup(e) {
|
|
9
|
+
const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
|
|
10
|
+
OxPrompt.open({
|
|
11
|
+
text: 'Are you sure to exit this page ?',
|
|
12
|
+
confirmButton: { text: 'Confirm' },
|
|
13
|
+
cancelButton: { text: 'Cancel' }
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
const Template = ({}) => html `
|
|
17
|
+
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
18
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
19
|
+
|
|
20
|
+
<style>
|
|
21
|
+
#place {
|
|
22
|
+
width: 100%;
|
|
23
|
+
height: 500px;
|
|
24
|
+
background: lightgreen;
|
|
25
|
+
text-align: center;
|
|
26
|
+
line-height: 500px;
|
|
27
|
+
}
|
|
28
|
+
</style>
|
|
29
|
+
|
|
30
|
+
<div id="place" @click=${(e) => popup(e)}>Click this to prompt image</div>
|
|
31
|
+
`;
|
|
32
|
+
export const Regular = Template.bind({});
|
|
33
|
+
Regular.args = {};
|
|
34
|
+
//# sourceMappingURL=ox-prompt-normal.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-prompt-normal.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt-normal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,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,QAAQ,CAAC,IAAI,CAAC;QACZ,IAAI,EAAE,kCAAkC;QACxC,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KACjC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CACjD,IAAI,CAAA;;;;;;;;;;;;;;6BAcuB,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;GACrD,CAAA;AAEH,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'\n\nexport default {\n title: 'OxPrompt - Normal',\n component: 'ox-prompt',\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 OxPrompt.open({\n text: 'Are you sure to exit this page ?',\n confirmButton: { text: 'Confirm' },\n cancelButton: { text: 'Cancel' }\n })\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) =>\n 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 <style>\n #place {\n width: 100%;\n height: 500px;\n background: lightgreen;\n text-align: center;\n line-height: 500px;\n }\n </style>\n\n <div id=\"place\" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>\n `\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
|