@operato/popup 2.0.0-alpha.99 → 2.0.0-beta.4

package/src/ox-prompt.ts

@@ -1,5 +1,6 @@
 import '@material/web/button/elevated-button.js'
 import '@material/web/icon/icon.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { css, html, nothing, LitElement } from 'lit'
 import { render } from 'lit-html'
@@ -20,21 +21,21 @@ const TYPES_ICON = {
 @customElement('ox-prompt')
 export class OxPrompt extends LitElement {
   static styles = [
+    MDTypeScaleStyles,
     ScrollbarStyles,
     css`
       :host {
-        --prompt-container-border-radius: 12px;
-        --prompt-container-box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
-
         position: absolute;
-        display: none;
-        background-color: var(--theme-white-color, #fff);
+        display: flex;
+        flex-direction: column;
+        gap: var(--ox-prompt-gap, var(--spacing-medium));
+        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));
         z-index: 100;
-        padding: var(--padding-wide);
-        box-shadow: var(--prompt-container-box-shadow);
-        border-radius: var(--prompt-container-border-radius);
+        padding: var(--ox-prompt-container-padding, var(--spacing-medium));
+        box-shadow: var(--ox-prompt-container-box-shadow, 2px 3px 10px 5px rgba(0, 0, 0, 0.15));
+        border-radius: var(--ox-prompt-container-border-radius, var(--md-sys-shape-corner-medium));
         box-sizing: border-box;
-        min-width: 260px;
+        min-width: 300;
         line-height: initial;
         text-align: initial;
       }
@@ -48,23 +49,25 @@ export class OxPrompt extends LitElement {
       }
 
       [titler] {
-        padding: var(--default-padding, 6px);
-        font: var(--title-font);
-        color: var(--title-text-color);
+        padding: var(--ox-prompt-title-padding, var(--spacing-medium));
+        padding-bottom: 0;
+        color: var(--ox-prompt-title-color, var(--md-sys-color-primary));
+        font-size: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
+        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
       }
 
       [content] {
         display: flex;
         flex-direction: column;
-        gap: var(--margin-default);
-        padding: var(--padding-default);
-        color: var(--primary-text-color);
+        gap: var(--ox-prompt-content-gap, var(--spacing-medium));
+        padding: var(--ox-prompt-content-padding, var(--spacing-medium));
+        color: var(--ox-prompt-body-color, var(--md-sys-color-on-surface));
         word-break: keep-all;
 
         md-icon {
           align-self: center;
-          --md-icon-size: 60px;
-          color: var(--primary-color);
+          --md-icon-size: var(--icon-size-huge);
+          color: var(--ox-prompt-body-color-variant, var(--md-sys-color-primary));
         }
       }
 
@@ -73,7 +76,7 @@ export class OxPrompt extends LitElement {
       }
 
       [content].error md-icon {
-        color: var(--status-danger-color, #d14946);
+        color: var(--status-danger-color, var(--md-sys-color-error));
       }
 
       [content].info md-icon {
@@ -86,11 +89,37 @@ export class OxPrompt extends LitElement {
 
       [buttons] {
         display: flex;
-        gap: var(--margin-default);
-        padding: var(--padding-wide) 0 var(--padding-narrow) 0;
-        border-top: var(--border-dark-color);
+        border-top: 1px solid var(--md-sys-color-surface-variant);
+        gap: var(--ox-prompt-buttons-spacing, var(--spacing-large));
+        padding: var(--ox-prompt-buttons-padding, var(--spacing-medium));
+        padding-top: var(--spacing-large);
         justify-content: center;
       }
+
+      #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-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-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);
+      }
     `
   ]
 
@@ -145,26 +174,26 @@ export class OxPrompt extends LitElement {
 
   render() {
     return html`
-      ${this.titler ? html` <div titler>${this.titler}</div> ` : nothing}
-      <div content class="${this.type || 'info'}">
+      ${this.titler ? html` <div titler class="md-typescale-title-large">${this.titler}</div> ` : nothing}
+      <div content class="${this.type || 'info'} md-typescale-body-large">
         ${this.icon || this.type
           ? html` <md-icon icon>${this.icon || TYPES_ICON[this.type || 'info']}</md-icon> `
           : nothing}
         ${this.text ? html` <div text>${this.text}</div> ` : nothing}
         <slot> </slot>
-        ${this.footer ? html` <div footer>${this.footer}</div> ` : nothing}
+        ${this.footer ? html` <div footer class="md-typescale-body-large">${this.footer}</div> ` : nothing}
       </div>
       <div buttons>
         ${this.confirmButton
           ? html`
-              <md-elevated-button raised @click=${(e: Event) => this.onConfirm()}
+              <md-filled-button id="confirm" @click=${(e: Event) => this.onConfirm()}
                 >${this.confirmButton?.text}</md-elevated-button
               >
             `
           : nothing}
         ${this.cancelButton
           ? html`
-              <md-elevated-button raised @click=${(e: Event) => this.onCancel()}
+              <md-outlined-button id="cancel" @click=${(e: Event) => this.onCancel()}
                 >${this.cancelButton?.text}</md-elevated-button
               >
             `
@@ -195,7 +224,12 @@ export class OxPrompt extends LitElement {
     if (!this.contains(to)) {
       /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */
       // @ts-ignore for debug
-      !window.POPUP_DEBUG && this.close()
+      if (window.POPUP_DEBUG) {
+        return
+      }
+
+      this.resolveFn && this.resolveFn(false)
+      this.close()
     }
   }.bind(this)
 
@@ -205,6 +239,7 @@ export class OxPrompt extends LitElement {
     switch (e.key) {
       case 'Esc': // for IE/Edge
       case 'Escape':
+        this.resolveFn && this.resolveFn(false)
         this.close()
         break
     }
@@ -231,17 +266,25 @@ export class OxPrompt extends LitElement {
   }.bind(this)
 
   protected _onclose: (e: Event) => void = function (this: OxPrompt, e: Event) {
+    this.resolveFn && this.resolveFn(false)
     this.close()
   }.bind(this)
 
   protected _oncollapse: (e: Event) => void = function (this: OxPrompt, e: Event) {
     e.stopPropagation()
+
+    this.resolveFn && this.resolveFn(false)
     this.close()
   }.bind(this)
 
   protected _onwindowblur: (e: Event) => void = function (this: OxPrompt, e: Event) {
     // @ts-ignore for debug
-    !window.POPUP_DEBUG && this.close()
+    if (window.POPUP_DEBUG) {
+      return
+    }
+
+    this.resolveFn && this.resolveFn(false)
+    this.close()
   }.bind(this)
 
   connectedCallback() {

package/stories/open-popup.stories.ts

@@ -1,6 +1,8 @@
+import '@material/web/all.js'
 import { html, TemplateResult } from 'lit'
 
 import { openPopup, PopupOptions } from '../src/open-popup'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'openPopup',
@@ -12,7 +14,8 @@ export default {
     closable: { control: 'boolean' },
     escapable: { control: 'boolean' },
     backdrop: { control: 'boolean' },
-    help: { constol: 'string' }
+    help: { constol: 'string' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -30,6 +33,7 @@ interface ArgTypes {
   escapable: boolean
   backdrop: boolean
   help: string
+  theme?: 'light' | 'dark'
 }
 
 function popup(e: MouseEvent, options: PopupOptions) {
@@ -45,9 +49,14 @@ const Template: Story<ArgTypes> = ({
   closable,
   escapable,
   backdrop,
-  help
+  help,
+  theme = 'light'
 }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <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"
@@ -62,17 +71,30 @@ const Template: Story<ArgTypes> = ({
     rel="stylesheet"
   />
 
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
   <style>
     #place {
       width: 100%;
       height: 500px;
-      background: lightgreen;
       text-align: center;
-      line-height: 500px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <div id="place" @click=${(e: MouseEvent) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div
+    id="place"
+    @click=${(e: MouseEvent) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}
+    class="md-typescale-display-medium"
+  >
     Click this to popup image
   </div>
 `

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

@@ -0,0 +1,188 @@
+import '@material/web/icon/icon.js'
+import '@material/web/button/outlined-button.js'
+import '@operato/input/ox-checkbox.js'
+import '../src/ox-popup-list.js'
+
+import { html, TemplateResult } from 'lit'
+
+import { OxPopupList } from '../src/ox-popup-list.js'
+
+export default {
+  title: 'sortable OxPopupList',
+  component: 'ox-popup-list',
+  argTypes: {
+    debug: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  debug: boolean
+}
+
+function popup(e: MouseEvent) {
+  const popupList = document.querySelector('#popup-list') as OxPopupList
+  popupList?.open({
+    top: e.pageY,
+    left: e.pageX
+  })
+}
+
+const columns = [
+  {
+    name: 'AAAAAA',
+    hidden: false
+  },
+  {
+    name: 'BBBBBB',
+    hidden: true
+  },
+  {
+    name: 'CCCCCC',
+    hidden: false
+  },
+  {
+    name: 'DDDDDD',
+    hidden: false
+  },
+  {
+    name: 'EEEEEE',
+    hidden: false
+  },
+  {
+    name: 'FFFFFF',
+    hidden: false
+  },
+  {
+    name: 'GGGGGG',
+    hidden: false
+  },
+  {
+    name: 'HHHHHH',
+    hidden: false
+  },
+  {
+    name: 'IIIIII',
+    hidden: false
+  },
+  {
+    name: 'JJJJJJ',
+    hidden: false
+  },
+  {
+    name: 'KKKKKK',
+    hidden: false
+  },
+  {
+    name: 'LLLLLL',
+    hidden: false
+  },
+  {
+    name: 'MMMMMM',
+    hidden: false
+  }
+]
+
+const Template: Story<ArgTypes> = ({ debug }: ArgTypes) => html`
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    #place {
+      width: 100%;
+      height: 100px;
+      background: lightgreen;
+      text-align: center;
+      line-height: 100px;
+    }
+
+    ox-popup-list {
+      width: 240px;
+      max-height: 240px;
+      overflow: hidden;
+    }
+
+    [titler] {
+      --md-icon-size: 1.2em;
+      --md-outlined-button-container-height: 24px;
+      --md-outlined-button-container-shape: 4px;
+      --md-outlined-button-leading-space: 4px;
+      --md-outlined-button-trailing-space: 4px;
+
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      text-transform: capitalize;
+    }
+
+    md-outlined-button {
+      margin-left: auto;
+    }
+
+    [option] {
+      position: relative; /* 상대 위치 설정 */
+      cursor: move; /* 커서를 이동 가능 표시로 변경 */
+      user-select: none;
+    }
+
+    [option]::after {
+      content: '☰'; /* 드래그 핸들 아이콘 (혹은 기호) */
+      position: absolute; /* 절대 위치 설정 */
+      top: 0; /* 위에서부터 10px */
+      right: 10px; /* 오른쪽에서부터 10px */
+      font-size: 20px; /* 폰트 크기 설정 */
+      color: #888; /* 폰트 색상 설정 */
+    }
+
+    div[overlay] {
+      display: block;
+      width: 300px;
+      height: 300px;
+      left: 100px;
+      top: 100px;
+      z-index: 10;
+      background-color: var(--md-sys-color-surface);
+    }
+  </style>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e)}>
+    Click this to popup list
+    <ox-popup-list
+      id="popup-list"
+      @select=${(e: Event) => console.log('select', e.target)}
+      @sorted=${(e: Event) => {
+        console.log('sorted\n', (e as CustomEvent).detail.map((element: any) => element.value).join('\n'))
+      }}
+      multiple
+      sortable
+      ?debug=${debug}
+    >
+      <div slot="header" titler>Plain Text <md-outlined-button>save</md-outlined-button></div>
+      ${columns.map(
+        column => html`
+        <ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option />${column.name}</ox-checkbox>
+      `
+      )}
+    </ox-popup-list>
+  </div>
+
+  <div overlay>OVERLAYED</div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {}

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

@@ -1,15 +1,18 @@
-import '@material/web/icon/icon.js'
+import '@material/web/all.js'
 import '@operato/input/ox-checkbox.js'
 import '../src/ox-popup-list.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { OxPopupList } from '../src/ox-popup-list.js'
 
 export default {
   title: 'OxPopupList',
   component: 'ox-popup-list',
-  argTypes: {}
+  argTypes: {
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
 }
 
 interface Story<T> {
@@ -18,7 +21,9 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-interface ArgTypes {}
+interface ArgTypes {
+  theme?: 'light' | 'dark'
+}
 
 function popup(e: MouseEvent) {
   const popupList = document.querySelector('#popup-list') as OxPopupList
@@ -28,8 +33,13 @@ function popup(e: MouseEvent) {
   })
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
+const Template: Story<ArgTypes> = ({ 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" />
+  <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"
@@ -42,36 +52,47 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) =>
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
-  
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
   <style>
-      #place {
-        width: 100%;
-        height: 500px;
-        background: lightgreen;
-        text-align: center;
-        line-height: 500px;
-      }
-    </style>
-
-    <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to popup list</div>
-    <ox-popup-list id="popup-list" @select=${(e: Event) => console.log('select', e.target)} multiple>
-      <div option>Plain Text</div>
-
-      <div option>
-        <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
-      </div>
-
-      <div option>
-        <input id="checkbox-01" type="checkbox" />
-        <label for="checkbox-01">custom option</label>
-      </div>
-      
-      <div option>
-        <label for="text-01">value</label>
-        <input id="text-01" type="text" value="Plain text input" />
-      </div>
-    </ox-popup-list>
-  `
+    #place {
+      width: 100%;
+      height: 500px;
+      text-align: center;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  </style>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e)} class="md-typescale-display-medium">
+    Click this to popup list
+  </div>
+  <ox-popup-list id="popup-list" @select=${(e: Event) => console.log('select', e.target)} multiple>
+    <div option>Plain Text</div>
+
+    <div option>
+      <ox-checkbox label="checkbox" slot="icon" checked>checkbox</ox-checkbox>
+    </div>
+
+    <div option>
+      <input id="checkbox-01" type="checkbox" />
+      <label for="checkbox-01">custom option</label>
+    </div>
+
+    <div option>
+      <label for="text-01">value</label>
+      <input id="text-01" type="text" value="Plain text input" />
+    </div>
+  </ox-popup-list>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/stories/ox-popup-menu.stories.ts

@@ -1,16 +1,19 @@
+import '@material/web/all.js'
 import '../src/ox-popup-menu.js'
 import '../src/ox-popup-menuitem.js'
-import '@material/web/icon/icon.js'
 import '@operato/input/ox-checkbox.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { OxPopupMenu } from '../src/ox-popup-menu.js'
 
 export default {
   title: 'OxPopuMenu',
   component: 'ox-popup-menu',
-  argTypes: {}
+  argTypes: {
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
 }
 
 interface Story<T> {
@@ -19,7 +22,9 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-interface ArgTypes {}
+interface ArgTypes {
+  theme?: 'light' | 'dark'
+}
 
 function popup(e: MouseEvent) {
   OxPopupMenu.open({
@@ -86,7 +91,6 @@ function popup(e: MouseEvent) {
                 <input type="checkbox" slot="icon" />
               </ox-popup-menuitem>
 
-              <div separator></div>
             </ox-popup-menu>
           </ox-popup-menuitem>
 
@@ -125,7 +129,13 @@ function popup(e: MouseEvent) {
   })
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ 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" />
+  <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"
@@ -139,17 +149,28 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
     rel="stylesheet"
   />
 
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
   <style>
     #place {
       width: 100%;
       height: 500px;
-      background: lightgreen;
       text-align: center;
-      line-height: 500px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to popup menu</div>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e)} class="md-typescale-display-medium">
+    Click this to popup menu
+  </div>
 `
 
 export const Regular = Template.bind({})