@operato/popup 8.0.0-beta.0 → 8.0.0-beta.1

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

@@ -1,215 +0,0 @@
-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'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'sortable OxPopupList',
-  component: 'ox-popup-list',
-  argTypes: {
-    preventCloseOnBlur: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  preventCloseOnBlur: boolean
-}
-
-function popup(e: MouseEvent) {
-  const popupList = document.querySelector('#popup-list') as OxPopupList
-  popupList?.open({
-    top: e.offsetY,
-    left: e.offsetX
-  })
-}
-
-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> = ({ preventCloseOnBlur }: 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"
-  />
-  <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>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    #place {
-      position: relative;
-      width: 100%;
-      height: 100px;
-      background: lightgreen;
-      text-align: center;
-      line-height: 100px;
-      padding: 20px;
-      margin: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-
-    #place-child {
-      position: relative;
-      display: block;
-      width: 100%;
-      height: 100%;
-      background-color: var(--md-sys-color-primary);
-      color: var(--md-sys-color-on-primary);
-    }
-
-    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: 10000;
-      background-color: var(--md-sys-color-surface);
-    }
-  </style>
-
-  <div id="place">
-    <div id="place-child" @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
-        ?prevent-close-on-blur=${preventCloseOnBlur}
-      >
-        <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>
-  <div overlay>OVERLAYED</div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {}

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

@@ -1,121 +0,0 @@
-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: {
-    preventCloseOnBlur: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  preventCloseOnBlur: boolean
-}
-
-function popup(e: MouseEvent, preventCloseOnBlur: boolean) {
-  const popupList = document.querySelector('#popup-list') as OxPopupList
-  popupList.preventCloseOnBlur = preventCloseOnBlur
-
-  popupList?.open({
-    top: e.offsetY,
-    left: e.offsetX
-  })
-}
-
-const Template: Story<ArgTypes> = ({ preventCloseOnBlur }: 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"
-  />
-  <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>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    #container {
-      display: flex;
-    }
-
-    #noise {
-      width: 100px;
-      height: 100px;
-    }
-
-    #place {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-      width: 50%;
-      height: 50%;
-      text-align: center;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-      border: 2px solid var(--md-sys-color-primary);
-    }
-  </style>
-
-  <div id="container">
-    <div id="noise"></div>
-    <div id="place" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
-      Click this to popup list
-      <ox-popup-list
-        id="popup-list"
-        @select=${(e: Event) => console.log('select', e.target)}
-        multiple
-        ?prevent-close-on-blur=${preventCloseOnBlur}
-      >
-        <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>
-    </div>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  preventCloseOnBlur: true
-}

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

@@ -1,188 +0,0 @@
-import '@material/web/all.js'
-import '@operato/input/ox-checkbox.js'
-import '../src/ox-popup-menu.js'
-import '../src/ox-popup-menuitem.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: {}
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {}
-
-function popup(e: MouseEvent) {
-  OxPopupMenu.open({
-    template: html`
-      <ox-popup-menuitem
-        label="article - click me"
-        @selected=${function (e: Event) {
-          console.log('first level article selected')
-        }}
-      >
-        <md-icon slot="icon">article</md-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem label="home">
-        <md-icon slot="icon">home</md-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem label="empty"> </ox-popup-menuitem>
-
-      <ox-popup-menuitem
-        label="click me to toggle"
-        @selected=${function (e: Event) {
-          const icon = (e.target as HTMLElement).querySelector('md-icon')
-          icon && (icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check')
-        }}
-        alive-on-select
-      >
-        <md-icon slot="icon" style="width: 20px;height: 20px;"></md-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem label="verified" @selected=${(e: Event) => console.log('selected verified')}>
-        <md-icon slot="icon">verified</md-icon>
-        <ox-popup-menu>
-          <ox-popup-menuitem
-            label="article"
-            @selected=${function (e: Event) {
-              console.log('article selected')
-            }}
-            alive-on-select
-          >
-            <md-icon slot="icon">article</md-icon>
-          </ox-popup-menuitem>
-
-          <ox-popup-menuitem label="home">
-            <md-icon slot="icon">home</md-icon>
-          </ox-popup-menuitem>
-
-          <ox-popup-menuitem label="verified">
-            <md-icon slot="icon">verified</md-icon>
-            <ox-popup-menu>
-              <ox-popup-menuitem label="article">
-                <md-icon slot="icon">article</md-icon>
-              </ox-popup-menuitem>
-
-              <ox-popup-menuitem label="home">
-                <md-icon slot="icon">home</md-icon>
-              </ox-popup-menuitem>
-
-              <ox-popup-menuitem label="verified">
-                <md-icon slot="icon">verified</md-icon>
-              </ox-popup-menuitem>
-
-              <ox-popup-menuitem label="checkbox">
-                <input type="checkbox" slot="icon" />
-              </ox-popup-menuitem>
-
-            </ox-popup-menu>
-          </ox-popup-menuitem>
-
-          <div separator></div>
-
-          <ox-popup-menuitem label="checkbox">
-            <input type="checkbox" slot="icon" />
-          </ox-popup-menuitem>
-        </ox-popup-menu>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem label="checkbox in icon area" alive-on-select>
-        <input type="checkbox" slot="icon" />
-      </ox-popup-menuitem>
-
-      <div separator></div>
-
-      <div menu>Plain Text</div>
-
-      <div menu alive-on-select>
-        <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
-      </div>
-
-      <div menu alive-on-select>
-        <input id="checkbox-01" type="checkbox" />
-        <label for="checkbox-01">custom menu</label>
-      </div>
-      <div menu alive-on-select>
-        <label for="text-01">value</label>
-        <input id="text-01" type="text" value="Plain text input" />
-      </div>
-    `,
-    top: e.offsetY,
-    left: e.offsetX,
-    parent: e.target as HTMLElement
-  })
-}
-
-const Template: Story<ArgTypes> = ({}: 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"
-  />
-  <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>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    #container {
-      display: flex;
-      flex-direction: row;
-      height: 600px;
-    }
-
-    #padding {
-      width: 100px;
-      height: 100px;
-    }
-
-    #place {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-      width: 50%;
-      height: 50%;
-      text-align: center;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div id="container">
-    <div id="padding"></div>
-    <div id="place" @click=${(e: MouseEvent) => popup(e)} class="md-typescale-display-medium">
-      Click this to popup menu
-    </div>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {}

package/stories/ox-popup.stories.ts

@@ -1,79 +0,0 @@
-import '@material/web/all.js'
-import { html, TemplateResult } from 'lit'
-
-import { OxPopup } from '../src/ox-popup'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'Simple Popup',
-  component: 'ox-popup',
-  argTypes: {}
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {}
-
-function popup(e: MouseEvent) {
-  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href
-
-  OxPopup.open({
-    template: html`<img src=${noImage} />`,
-    top: e.offsetY,
-    left: e.offsetX,
-    backdrop: true,
-    parent: e.target as HTMLElement
-  })
-}
-
-const Template: Story<ArgTypes> = ({}: 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"
-  />
-  <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>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    #place {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-      width: 50%;
-      height: 50%;
-      text-align: center;
-
-      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)} class="md-typescale-display-medium">
-    Click this to popup image
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {}

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

@@ -1,87 +0,0 @@
-import '@material/web/all.js'
-import { html, TemplateResult } from 'lit'
-
-import { OxPrompt } from '../src/ox-prompt'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'OxPrompt - Icon',
-  component: 'ox-prompt',
-  argTypes: {
-    type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },
-    preventCloseOnBlur: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  type: 'success' | 'error' | 'warning' | 'info' | 'question'
-  preventCloseOnBlur: boolean
-}
-
-function popup(
-  e: MouseEvent,
-  type: 'success' | 'error' | 'warning' | 'info' | 'question' = 'warning',
-  preventCloseOnBlur: boolean
-) {
-  OxPrompt.open({
-    title: 'Are you sure ?',
-    text: 'Are you sure to exit this page ?',
-    type,
-    icon: 'logout',
-    confirmButton: { text: 'Confirm' },
-    cancelButton: { text: 'Cancel' },
-    preventCloseOnBlur
-  })
-}
-
-const Template: Story<ArgTypes> = ({ type, preventCloseOnBlur }: 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"
-  />
-  <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>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    #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>
-
-  <div id="place" @click=${(e: MouseEvent) => popup(e, type, preventCloseOnBlur)} class="md-typescale-display-medium">
-    Click this to prompt image
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  type: 'warning',
-  preventCloseOnBlur: true
-}