@operato/popup 2.0.0-beta.30 → 2.0.0-beta.31

package/src/ox-popup.ts

@@ -34,6 +34,7 @@ export class OxPopup extends LitElement {
 
       :host([active]) {
         display: flex;
+        flex-direction: column;
       }
 
       :host(*:focus) {
@@ -42,7 +43,7 @@ export class OxPopup extends LitElement {
     `
   ]
 
-  @property({ type: Boolean }) debug: boolean = false
+  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false
 
   @state() _parent: Element | null = null
 
@@ -57,8 +58,8 @@ export class OxPopup extends LitElement {
 
     if (!this.contains(to)) {
       /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup은 닫혀야 한다. */
-      // @ts-ignore for debug
-      !this.debug && !window.POPUP_DEBUG && this.close()
+      // @ts-ignore for preventCloseOnBlur
+      !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()
     }
   }.bind(this)
 
@@ -104,8 +105,8 @@ export class OxPopup extends LitElement {
   }.bind(this)
 
   protected _onwindowblur: (e: Event) => void = function (this: OxPopup, e: Event) {
-    // @ts-ignore for debug
-    !this.debug && !window.POPUP_DEBUG && this.close()
+    // @ts-ignore for preventCloseOnBlur
+    !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()
   }.bind(this)
 
   connectedCallback() {
@@ -143,7 +144,8 @@ export class OxPopup extends LitElement {
     width,
     height,
     parent,
-    style
+    style,
+    preventCloseOnBlur
   }: {
     template: unknown
     top?: number
@@ -154,9 +156,13 @@ export class OxPopup extends LitElement {
     height?: string
     parent?: Element | null
     style?: string
+    preventCloseOnBlur?: boolean
   }): OxPopup {
     const owner = parent || document.body
     const target = document.createElement('ox-popup') as OxPopup
+    if (preventCloseOnBlur) {
+      target.preventCloseOnBlur = preventCloseOnBlur
+    }
     if (style) {
       target.style.cssText = style
     }

package/src/ox-prompt.ts

@@ -164,6 +164,11 @@ export class OxPrompt extends LitElement {
    */
   @property({ type: Object }) cancelButton?: { text: string; color?: string }
 
+  /**
+   * Prevents the popup from closing when it loses focus (blur event).
+   */
+  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false
+
   /**
    * A callback function called when the popup is closed, providing the result of the user's interaction.
    */
@@ -225,7 +230,7 @@ export class OxPrompt extends LitElement {
     if (!this.contains(to)) {
       /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */
       // @ts-ignore for debug
-      if (window.POPUP_DEBUG) {
+      if (this.preventCloseOnBlur || window.POPUP_DEBUG) {
         return
       }
 
@@ -280,7 +285,7 @@ export class OxPrompt extends LitElement {
 
   protected _onwindowblur: (e: Event) => void = function (this: OxPrompt, e: Event) {
     // @ts-ignore for debug
-    if (window.POPUP_DEBUG) {
+    if (this.preventCloseOnBlur || window.POPUP_DEBUG) {
       return
     }
 
@@ -327,6 +332,7 @@ export class OxPrompt extends LitElement {
    * @param {string} [options.width] - The maximum width of the popup (CSS string).
    * @param {string} [options.height] - The maximum height of the popup (CSS string).
    * @param {Element | null} [options.parent] - The parent element to which the popup should be attached. If not provided, it will be attached to the document body.
+   * @param {boolean} [options.preventCloseOnBlur] - Prevents the popup from closing when it loses focus (blur event).
    * @param {(result: { value: boolean }) => void} [options.callback] - A callback function that will be invoked when the user interacts with the popup, providing the result of the interaction.
    * @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.
    */
@@ -346,6 +352,7 @@ export class OxPrompt extends LitElement {
     width,
     height,
     parent,
+    preventCloseOnBlur,
     callback
   }: {
     template?: unknown
@@ -363,6 +370,7 @@ export class OxPrompt extends LitElement {
     width?: string
     height?: string
     parent?: Element | null
+    preventCloseOnBlur?: boolean
     callback?: (result: { value: boolean }) => void
   }): Promise<boolean> {
     const owner = parent || document.body
@@ -375,6 +383,7 @@ export class OxPrompt extends LitElement {
     target.footer = footer
     target.confirmButton = confirmButton
     target.cancelButton = cancelButton
+    target.preventCloseOnBlur = !!preventCloseOnBlur
 
     render(template, target)
 

package/stories/ox-popup-list-sortable.stories.ts

@@ -12,7 +12,7 @@ export default {
   title: 'sortable OxPopupList',
   component: 'ox-popup-list',
   argTypes: {
-    debug: { control: 'boolean' },
+    preventCloseOnBlur: { control: 'boolean' },
     theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
@@ -24,7 +24,7 @@ interface Story<T> {
 }
 
 interface ArgTypes {
-  debug: boolean
+  preventCloseOnBlur: boolean
   theme?: 'light' | 'dark'
 }
 
@@ -91,7 +91,7 @@ const columns = [
   }
 ]
 
-const Template: Story<ArgTypes> = ({ debug, theme }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ preventCloseOnBlur, theme }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -190,7 +190,7 @@ const Template: Story<ArgTypes> = ({ debug, theme }: ArgTypes) => html`
       }}
       multiple
       sortable
-      ?debug=${debug}
+      ?prevent-close-on-blur=${preventCloseOnBlur}
     >
       <div slot="header" titler>Plain Text <md-outlined-button>save</md-outlined-button></div>
       ${columns.map(

package/stories/ox-prompt-icon.stories.ts

@@ -9,7 +9,7 @@ export default {
   component: 'ox-prompt',
   argTypes: {
     type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },
-    debug: { control: 'boolean' },
+    preventCloseOnBlur: { control: 'boolean' },
     theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
@@ -22,7 +22,7 @@ interface Story<T> {
 
 interface ArgTypes {
   type: 'success' | 'error' | 'warning' | 'info' | 'question'
-  debug: boolean
+  preventCloseOnBlur: boolean
   theme?: 'light' | 'dark'
 }
 
@@ -30,23 +30,22 @@ function popup(
   e: MouseEvent,
   type: 'success' | 'error' | 'warning' | 'info' | 'question' = 'warning',
   theme: 'light' | 'dark',
-  debug: boolean
+  preventCloseOnBlur: boolean
 ) {
   const noImage = new URL('/assets/images/no-image.png', import.meta.url).href
 
-  //@ts-ignore
-  window.POPUP_DEBUG = debug
-
   OxPrompt.open({
     title: 'Are you sure ?',
     text: 'Are you sure to exit this page ?',
     type,
+    icon: noImage,
     confirmButton: { text: 'Confirm' },
-    cancelButton: { text: 'Cancel' }
+    cancelButton: { text: 'Cancel' },
+    preventCloseOnBlur
   })
 }
 
-const Template: Story<ArgTypes> = ({ type, debug, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ type, preventCloseOnBlur, theme = 'light' }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -85,7 +84,11 @@ const Template: Story<ArgTypes> = ({ type, debug, theme = 'light' }: ArgTypes) =
     document.body.classList.add('${theme}')
   </script>
 
-  <div id="place" @click=${(e: MouseEvent) => popup(e, type, theme, debug)} class="md-typescale-display-medium">
+  <div
+    id="place"
+    @click=${(e: MouseEvent) => popup(e, type, theme, preventCloseOnBlur)}
+    class="md-typescale-display-medium"
+  >
     Click this to prompt image
   </div>
 `
@@ -93,5 +96,5 @@ const Template: Story<ArgTypes> = ({ type, debug, theme = 'light' }: ArgTypes) =
 export const Regular = Template.bind({})
 Regular.args = {
   type: 'warning',
-  debug: true
+  preventCloseOnBlur: true
 }