@operato/popup 2.0.0-beta.5 → 7.0.0-rc.0

package/src/ox-prompt.ts

@@ -1,4 +1,5 @@
-import '@material/web/button/elevated-button.js'
+import '@material/web/button/filled-button.js'
+import '@material/web/button/outlined-button.js'
 import '@material/web/icon/icon.js'
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
@@ -163,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.
    */
@@ -187,14 +193,14 @@ export class OxPrompt extends LitElement {
         ${this.confirmButton
           ? html`
               <md-filled-button id="confirm" @click=${(e: Event) => this.onConfirm()}
-                >${this.confirmButton?.text}</md-elevated-button
+                >${this.confirmButton?.text}</md-filled-button
               >
             `
           : nothing}
         ${this.cancelButton
           ? html`
               <md-outlined-button id="cancel" @click=${(e: Event) => this.onCancel()}
-                >${this.cancelButton?.text}</md-elevated-button
+                >${this.cancelButton?.text}</md-outlined-button
               >
             `
           : nothing}
@@ -224,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
       }
 
@@ -279,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
     }
 
@@ -326,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.
    */
@@ -345,6 +352,7 @@ export class OxPrompt extends LitElement {
     width,
     height,
     parent,
+    preventCloseOnBlur,
     callback
   }: {
     template?: unknown
@@ -362,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
@@ -374,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

@@ -6,12 +6,14 @@ import '../src/ox-popup-list.js'
 import { html, TemplateResult } from 'lit'
 
 import { OxPopupList } from '../src/ox-popup-list.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'sortable OxPopupList',
   component: 'ox-popup-list',
   argTypes: {
-    debug: { control: 'boolean' }
+    preventCloseOnBlur: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -22,7 +24,8 @@ interface Story<T> {
 }
 
 interface ArgTypes {
-  debug: boolean
+  preventCloseOnBlur: boolean
+  theme?: 'light' | 'dark'
 }
 
 function popup(e: MouseEvent) {
@@ -88,7 +91,13 @@ const columns = [
   }
 ]
 
-const Template: Story<ArgTypes> = ({ debug }: 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" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
@@ -102,6 +111,10 @@ const Template: Story<ArgTypes> = ({ debug }: ArgTypes) => html`
     rel="stylesheet"
   />
 
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
   <style>
     #place {
       width: 100%;
@@ -109,6 +122,9 @@ const Template: Story<ArgTypes> = ({ debug }: ArgTypes) => html`
       background: lightgreen;
       text-align: center;
       line-height: 100px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
 
     ox-popup-list {
@@ -160,6 +176,10 @@ const Template: Story<ArgTypes> = ({ debug }: ArgTypes) => html`
     }
   </style>
 
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
   <div id="place" @click=${(e: MouseEvent) => popup(e)}>
     Click this to popup list
     <ox-popup-list
@@ -170,7 +190,7 @@ const Template: Story<ArgTypes> = ({ debug }: 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
 }

package/themes/grist-theme.css

@@ -48,11 +48,9 @@ body {
   --grid-record-wide-fontsize: var(--md-sys-typescale-label-medium-size);
   --grid-record-selected-background-color: var(--md-sys-color-primary-container);
   --grid-record-selected-color: var(--md-sys-color-primary);
-  --grid-record-focused-background-color: var(--md-sys-color-secondary-container);
   --grid-record-focused-border: 1px solid var(--md-sys-color-outline-variant);
   --grid-record-focused-cell-background-color: var(--md-sys-color-secondary-container);
   --grid-record-focused-cell-border: 1px dashed var(--md-sys-color-outline);
-  --grid-record-focused-color: var(--md-sys-color-secondary);
   --grid-record-focused-box-shadow: 0px 2px 0px 0px rgb(0 0 0 / 10%);
   --grid-record-emphasized-background-color: var(--md-sys-color-tertiary-container);
   --grid-record-emphasized-color: var(--md-sys-color-tertiary);