@operato/popup 1.0.0-beta.7 → 1.0.0

package/src/ox-floating-overlay.ts

@@ -0,0 +1,330 @@
+import '@material/mwc-icon'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { ScrollbarStyles } from '@operato/styles'
+
+@customElement('ox-floating-overlay')
+export class OxFloatingOverlay extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      /* for layout style */
+      :host {
+        position: relative;
+        z-index: 1;
+      }
+
+      :host([hovering='edge']) {
+        /* edge hovering 인 경우에는 상위 relative position 크기와 위치를 반영한다. */
+        position: initial;
+      }
+
+      #backdrop {
+        position: fixed;
+        left: 0;
+        top: 0;
+
+        width: 100vw;
+        height: 100vh;
+
+        background-color: var(--overlay-background-color);
+      }
+
+      [overlayed] {
+        position: absolute;
+
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: transparent;
+        pointer-events: none;
+      }
+
+      [overlayed][hovering='center'] {
+        position: fixed;
+
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+
+        opacity: 0;
+      }
+
+      [overlayed][hovering='center'][opened] {
+        opacity: 1;
+        transition: opacity 0.3s ease-in;
+      }
+
+      [hovering='center'] {
+        width: var(--overlay-center-normal-width, 60%);
+        height: var(--overlay-center-normal-height, 60%);
+      }
+
+      [hovering='center'][size='small'] {
+        width: var(--overlay-center-small-width, 40%);
+        height: var(--overlay-center-small-height, 40%);
+      }
+
+      [hovering='center'][size='large'] {
+        width: var(--overlay-center-large-width, 100%);
+        height: var(--overlay-center-large-height, 100%);
+      }
+
+      [header] {
+        --help-icon-color: #fff;
+        --help-icon-hover-color: #fff;
+
+        pointer-events: initial;
+      }
+
+      [content] {
+        flex: 1;
+
+        overflow: hidden;
+      }
+
+      ::slotted(*) {
+        box-sizing: border-box;
+        pointer-events: initial;
+      }
+
+      [hovering='center'] [content] ::slotted(*) {
+        width: 100%;
+        height: 100%;
+      }
+      [direction='up'],
+      [direction='down'] {
+        width: 100%;
+
+        max-height: 0;
+        transition: max-height 0.7s ease-in;
+      }
+      [direction='up'] {
+        bottom: 0;
+      }
+      [direction='down'] {
+        top: 0;
+      }
+
+      [direction='up'][opened],
+      [direction='down'][opened] {
+        max-height: 100vh;
+      }
+
+      [settled][direction='down'] [content],
+      [settled][direction='up'] [content] {
+        overflow-y: auto;
+      }
+
+      [direction='left'],
+      [direction='right'] {
+        height: 100%;
+
+        max-width: 0;
+        transition: max-width 0.5s ease-in;
+      }
+      [direction='left'] {
+        right: 0;
+      }
+      [direction='right'] {
+        left: 0;
+      }
+
+      [direction='left'][opened],
+      [direction='right'][opened] {
+        max-width: 100vw;
+      }
+
+      [settled][direction='left'] [content],
+      [settled][direction='right'] [content] {
+        overflow-x: auto;
+      }
+
+      @media screen and (max-width: 460px) {
+        [direction='up'],
+        [direction='down'] {
+          max-height: 100vh;
+        }
+
+        [direction='left'],
+        [direction='right'] {
+          max-width: 100vw;
+        }
+      }
+    `,
+    css`
+      /* for header style */
+      [header] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        background-color: var(--overlay-header-background-color);
+        color: var(--overlay-header-color);
+      }
+
+      slot[name='header'] {
+        flex: 1;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [name='header']::slotted(*) {
+        margin: 0 auto;
+      }
+
+      [name='header'] > h1 {
+        text-transform: capitalize;
+        font: var(--overlay-header-font);
+      }
+
+      [historyback] {
+        margin-left: 10px;
+        margin-right: auto;
+      }
+
+      [close] {
+        margin-left: auto;
+        margin-right: 10px;
+      }
+
+      [historyback],
+      [close] {
+        display: none;
+      }
+
+      [closable][close] {
+        display: block;
+      }
+
+      @media screen and (max-width: 460px) {
+        [closable][historyback] {
+          display: block;
+        }
+
+        [closable][close] {
+          display: none;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Boolean }) backdrop?: boolean = false
+  @property({ type: String }) direction?: 'up' | 'down' | 'left' | 'right'
+  @property({ type: String, reflect: true }) hovering?: 'center' | 'edge' | 'next'
+  @property({ type: String }) size?: 'small' | 'medium' | 'large'
+  @property({ type: String }) name?: string
+  @property({ type: String }) title: string = ''
+  @property({ type: Boolean }) closable?: boolean = false
+  @property({ type: Object }) templateProperties: any
+  @property({ type: Object }) help: any
+  @property({ type: Boolean }) historical?: boolean = false
+
+  render() {
+    var direction = this.hovering == 'center' ? false : this.direction
+
+    return html`
+      ${Boolean(this.backdrop)
+        ? html` <div id="backdrop" ?hidden=${!this.backdrop} @click=${() => this.onClose(true)}></div> `
+        : html``}
+
+      <div
+        overlayed
+        hovering=${this.hovering || 'center'}
+        direction=${direction}
+        size=${this.size || 'medium'}
+        @close-overlay=${(e: Event) => {
+          e.stopPropagation()
+          this.onClose()
+        }}
+        @transitionstart=${(e: Event) => {
+          /* to hide scrollbar during transition */
+          ;(e.target as HTMLElement).removeAttribute('settled')
+        }}
+        @transitionend=${(e: Event) => {
+          ;(e.target as HTMLElement).setAttribute('settled', '')
+        }}
+      >
+        <div header>
+          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} historyback>arrow_back</mwc-icon>
+          <slot name="header">
+            ${this.title || this.closable
+              ? html`
+                  <h1>
+                    ${this.title || ''}&nbsp;${this.help
+                      ? html` <ox-help-icon .topic=${this.help}></ox-help-icon>`
+                      : html``}
+                  </h1>
+                `
+              : html``}</slot
+          >
+          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} close>close</mwc-icon>
+        </div>
+
+        <div content>
+          <slot> </slot>
+        </div>
+      </div>
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('templateProperties') && this.templateProperties) {
+      var template = this.firstElementChild
+      if (template) {
+        for (let prop in this.templateProperties) {
+          //@ts-ignore
+          template[prop] = this.templateProperties[prop]
+        }
+      }
+    }
+  }
+
+  firstUpdated() {
+    requestAnimationFrame(() => {
+      /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */
+      this.renderRoot.querySelector('[overlayed]')?.setAttribute('opened', 'true')
+    })
+  }
+
+  disconnectedCallback() {
+    document.dispatchEvent(
+      new CustomEvent('overlay-closed', {
+        detail: this.name
+      })
+    )
+
+    super.disconnectedCallback()
+  }
+
+  close() {
+    this.parentElement?.removeChild(this)
+  }
+
+  onClose(escape?: boolean) {
+    /* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */
+
+    if (this.historical) {
+      var state = history.state
+      var overlay = (state || {}).overlay
+
+      if (!overlay || overlay.name !== this.name) {
+        return
+      }
+
+      /* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */
+      if (escape && !overlay.escapable) {
+        return true
+      }
+
+      history.back()
+    } else {
+      this.close()
+    }
+  }
+}

package/src/ox-popup.ts

@@ -1,8 +1,8 @@
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
+import { render } from 'lit-html'
 import { customElement, state } from 'lit/decorators.js'
 
 import { ScrollbarStyles } from '@operato/styles'
-import { render } from 'lit-html'
 
 @customElement('ox-popup')
 export class OxPopup extends LitElement {
@@ -18,6 +18,8 @@ export class OxPopup extends LitElement {
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
         box-sizing: border-box;
         min-width: fit-content;
+        line-height: initial;
+        text-align: initial;
       }
 
       :host([active]) {

package/stories/open-popup.stories.ts

@@ -0,0 +1,81 @@
+import { html, TemplateResult } from 'lit'
+
+import { openPopup, PopupOptions } from '../src/open-popup'
+
+export default {
+  title: 'openPopup',
+  component: 'ox-popup',
+  argTypes: {
+    title: { constol: 'string' },
+    size: { control: 'select', options: ['large', 'medium', 'small'] },
+    hovering: { control: 'select', options: ['center', 'next', 'edge'] },
+    closable: { control: 'boolean' },
+    escapable: { control: 'boolean' },
+    backdrop: { control: 'boolean' },
+    help: { constol: 'string' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  title: string
+  size: 'large' | 'medium' | 'small'
+  hovering: 'center' | 'next' | 'edge'
+  closable: boolean
+  escapable: boolean
+  backdrop: boolean
+  help: string
+}
+
+function popup(e: MouseEvent, options: PopupOptions) {
+  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href
+
+  return openPopup(html`<img src=${noImage} />`, options)
+}
+
+const Template: Story<ArgTypes> = ({
+  title = '',
+  size = 'medium',
+  hovering = 'center',
+  closable,
+  escapable,
+  backdrop,
+  help
+}: ArgTypes) =>
+  html`
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+    <style>
+      #place {
+        width: 100%;
+        height: 500px;
+        background: lightgreen;
+        text-align: center;
+        line-height: 500px;
+      }
+    </style>
+
+    <div
+      id="place"
+      @click=${(e: MouseEvent) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}
+    >
+      Click this to popup image
+    </div>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {
+  title: 'Regular popup',
+  size: 'medium',
+  hovering: 'center',
+  closable: true,
+  escapable: true,
+  backdrop: true,
+  help: ''
+}

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

@@ -0,0 +1,65 @@
+import '@material/mwc-icon'
+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: 'OxPopuList',
+  component: 'ox-popup-list',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+function popup(e: MouseEvent) {
+  const popupList = document.querySelector('#popup-list') as OxPopupList
+  popupList?.open({
+    top: e.pageY,
+    left: e.pageX
+  })
+}
+
+const Template: Story<ArgTypes> = ({}: ArgTypes) =>
+  html`
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <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>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {}

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

@@ -0,0 +1,145 @@
+import '../src/ox-popup-menu.js'
+import '../src/ox-popup-menuitem.js'
+import '@material/mwc-icon'
+import '@operato/input/ox-checkbox.js'
+
+import { html, TemplateResult } from 'lit'
+
+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')
+        }}
+      >
+        <mwc-icon slot="icon">article</mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem label="home">
+        <mwc-icon slot="icon">home</mwc-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('mwc-icon')
+          icon && (icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check')
+        }}
+        alive-on-select
+      >
+        <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem label="verified" @selected=${(e: Event) => console.log('selected verified')}>
+        <mwc-icon slot="icon">verified</mwc-icon>
+        <ox-popup-menu>
+          <ox-popup-menuitem
+            label="article"
+            @selected=${function (e: Event) {
+              console.log('article selected')
+            }}
+            alive-on-select
+          >
+            <mwc-icon slot="icon">article</mwc-icon>
+          </ox-popup-menuitem>
+
+          <ox-popup-menuitem label="home">
+            <mwc-icon slot="icon">home</mwc-icon>
+          </ox-popup-menuitem>
+
+          <ox-popup-menuitem label="verified">
+            <mwc-icon slot="icon">verified</mwc-icon>
+            <ox-popup-menu>
+              <ox-popup-menuitem label="article">
+                <mwc-icon slot="icon">article</mwc-icon>
+              </ox-popup-menuitem>
+
+              <ox-popup-menuitem label="home">
+                <mwc-icon slot="icon">home</mwc-icon>
+              </ox-popup-menuitem>
+
+              <ox-popup-menuitem label="verified">
+                <mwc-icon slot="icon">verified</mwc-icon>
+              </ox-popup-menuitem>
+
+              <ox-popup-menuitem label="checkbox">
+                <input type="checkbox" slot="icon" />
+              </ox-popup-menuitem>
+
+              <div separator></div>
+            </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.pageY,
+    left: e.pageX,
+    parent: e.target as HTMLElement
+  })
+}
+
+const Template: Story<ArgTypes> = ({}: ArgTypes) =>
+  html`
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <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 menu</div>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {}

package/stories/ox-popup.stories.ts

@@ -0,0 +1,46 @@
+import { html, TemplateResult } from 'lit'
+
+import { OxPopup } from '../src/ox-popup'
+
+export default {
+  title: 'ContextMenu',
+  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.pageY,
+    left: e.pageX,
+    parent: e.target as HTMLElement
+  })
+}
+
+const Template: Story<ArgTypes> = ({}: ArgTypes) =>
+  html`
+    <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 image</div>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {}