@operato/popup 2.0.0-beta.9 → 7.0.0-rc.10

package/src/ox-floating-overlay.ts

@@ -1,4 +1,5 @@
 import '@material/web/icon/icon.js'
+import '@operato/input/ox-input-search.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -55,8 +56,8 @@ export class OxFloatingOverlay extends LitElement {
         height: 100vh;
         height: 100dvh;
 
-        background-color: var(--md-sys-color-primary);
-        opacity: 0.2;
+        background-color: var(--md-sys-color-shadow, #000);
+        opacity: 0.4;
       }
 
       [overlayed] {
@@ -75,11 +76,13 @@ export class OxFloatingOverlay extends LitElement {
         transform: translate(-50%, -50%);
 
         opacity: 0;
+        border: 2px solid var(--md-sys-color-primary);
       }
 
       [overlayed][hovering='center'][opened] {
         opacity: 1;
         transition: opacity 0.3s ease-in;
+        background-color: var(--md-sys-color-surface-container-lowest);
       }
 
       [hovering='center'] {
@@ -186,9 +189,9 @@ export class OxFloatingOverlay extends LitElement {
         display: flex;
         flex-direction: row;
         align-items: center;
-        background-color: var(--md-sys-color-primary-container);
+        background-color: var(--md-sys-color-primary);
         font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
-        color: var(--md-sys-color-on-primary-container);
+        color: var(--md-sys-color-on-primary);
       }
 
       slot[name='header'] {
@@ -235,13 +238,24 @@ export class OxFloatingOverlay extends LitElement {
       }
 
       [search] {
+        --help-icon-color: var(--md-sys-color-primary);
+        --help-icon-hover-color: var(--md-sys-color-primary);
+        --help-icon-opacity: 0.2;
+        --help-icon-size: 20px;
+
+        --md-icon-size: 20px;
+
+        --input-search-padding: var(--spacing-medium);
+        --input-search-focus-border-bottom: none;
+        --input-search-font: normal 16px var(--theme-font);
+
         display: flex;
         justify-content: space-between;
         align-items: center;
 
         align-self: center;
-        color: var(--md-sys-color-on-secondary-container);
-        background-color: var(--opacity-light-color);
+        color: var(--md-sys-color-primary);
+        background-color: var(--md-sys-color-on-primary);
         border-radius: 999em;
         padding: 0 var(--spacing-medium);
       }
@@ -250,6 +264,12 @@ export class OxFloatingOverlay extends LitElement {
         align-self: center;
       }
 
+      ox-input-search {
+        color: var(--md-sys-color-primary);
+        background-color: var(--md-sys-color-on-primary);
+        border-radius: var(--md-sys-shape-corner-full);
+      }
+
       @media screen and (max-width: 460px) {
         [closable][historyback] {
           display: block;

package/src/ox-popup-list.ts

@@ -8,7 +8,7 @@ import Sortable from 'sortablejs'
 import { OxPopup } from './ox-popup'
 
 function guaranteeFocus(element: HTMLElement) {
-  // 1. 옵션 엘리먼트의 하위 첫번째 focusible 엘리먼트에 focus 기회를 준다.
+  // 1. Give focus opportunity to the first focusable element within the option element.
   const focusible = element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
 
   if (focusible) {
@@ -16,7 +16,7 @@ function guaranteeFocus(element: HTMLElement) {
     return
   }
 
-  // 2. 자신을 포함해서 가장 가까운 부모에게 focus 기회를 준다.
+  // 2. Give focus opportunity to the closest parent, including itself.
   const closest = element.closest(
     'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
   ) as HTMLElement
@@ -35,10 +35,11 @@ export class OxPopupList extends OxPopup {
       :host {
         display: none;
         align-items: stretch;
-        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));
+        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface-container-lowest));
         z-index: 100;
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
         padding: var(--spacing-small) 0;
+        border-radius: var(--md-sys-shape-corner-small, 5px);
 
         color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
         font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
@@ -283,15 +284,20 @@ export class OxPopupList extends OxPopup {
     const to = e.relatedTarget as HTMLElement
 
     if (!this.contains(to)) {
-      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup-list는 닫혀야 한다. */
+      /* If the focus has clearly moved to an element outside of my range, the ox-popup-list should be closed. */
       // @ts-ignore for debug
-      !this.debug && !window.POPUP_DEBUG && this.close()
+      !this.preventCloseOnBlur && !this.debug && !window.POPUP_DEBUG && this.close()
     }
   }.bind(this)
 
   protected _onclick: (e: MouseEvent) => void = function (this: OxPopupList, e: MouseEvent) {
     e.stopPropagation()
 
+    // Check if the click event target is a checkbox
+    if ((e.target as HTMLElement).closest('input[type="checkbox"]')) {
+      return // Do not proceed if it's a checkbox click
+    }
+
     const option = (e.target as HTMLElement)?.closest('[option]')
     if (option) {
       this.setActive(option, true)
@@ -323,6 +329,10 @@ export class OxPopupList extends OxPopup {
             )
           },
           onMove: e => {
+            // Check if the drag event target is a checkbox
+            if ((e.dragged as HTMLElement).querySelector('input[type="checkbox"]')) {
+              return false // Prevent sorting if it's a checkbox drag
+            }
             this.locked = true
           }
         })

package/src/ox-popup-menu.ts

@@ -72,7 +72,7 @@ export class OxPopupMenu extends OxPopup {
       }
 
       ::slotted(ox-popup-menuitem[active]) {
-        border-left: 3px solid var(--md-ref-palette-primary50);
+        border-left: 3px solid var(--md-sys-color-primary);
         font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
       }
 

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

@@ -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'
 
@@ -98,27 +99,22 @@ export class OxPrompt extends LitElement {
 
       #confirm {
         --md-filled-button-container-color: var(--md-sys-color-primary);
-        --md-filled-button-label-text-color: var(--md-sys-color-primary-container);
+        --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
         --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
         --md-filled-button-container-height: var(--form-element-height-medium);
         --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
         --md-filled-button-leading-space: var(--spacing-large);
         --md-filled-button-trailing-space: var(--spacing-large);
-        --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);
-        --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);
-        --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);
       }
 
       #cancel {
+        --md-outlined-button-container-color: var(--md-sys-color-surface-variant);
         --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);
         --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
         --md-outlined-button-container-height: var(--form-element-height-medium);
         --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
         --md-outlined-button-leading-space: var(--spacing-large);
         --md-outlined-button-trailing-space: var(--spacing-large);
-        --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);
-        --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);
-        --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);
       }
     `
   ]
@@ -163,6 +159,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 +188,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 +225,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 +280,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 +327,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 +347,7 @@ export class OxPrompt extends LitElement {
     width,
     height,
     parent,
+    preventCloseOnBlur,
     callback
   }: {
     template?: unknown
@@ -362,6 +365,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 +378,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);
@@ -63,7 +61,7 @@ body {
 
   --grid-record-dirty-border-top: 24px solid rgba(var(--md-sys-color-primary-rgb), 0.6);
   --grid-record-dirty-border-left: 24px solid transparent;
-  --grid-record-dirty-icon-font: bold 10px/12px var(--mdc-icon-font, 'Material Icons');
+  --grid-record-dirty-icon-font: bold 10px/12px var(--md-icon-font, 'Material Symbols Outlined');
   --grid-record-dirty-icon-size: var(--fontsize-large);
   --grid-record-dirty-color: var(--md-sys-color-surface);