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

package/src/ox-popup-menu.ts

@@ -1,247 +0,0 @@
-import { css, html, PropertyValues } from 'lit'
-import { render } from 'lit-html'
-import { customElement, property } from 'lit/decorators.js'
-
-import { OxPopup } from './ox-popup'
-import { convertToFixedPosition } from './position-converter.js'
-
-function focusClosest(element: HTMLElement) {
-  /* Find the closest focusable element. */
-  const closest = element.closest(
-    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-  ) as HTMLElement
-
-  closest?.focus()
-
-  return closest
-}
-
-/**
- * Custom element representing a popup menu. It extends OxPopup.
- */
-@customElement('ox-popup-menu')
-export class OxPopupMenu extends OxPopup {
-  static styles = [
-    ...OxPopup.styles,
-    css`
-      :host {
-        display: none;
-        flex-direction: column;
-        align-items: stretch;
-        background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));
-        color: var(--ox-popup-list-color, var(--md-sys-color-on-surface));
-        z-index: 100;
-        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
-        padding: var(--spacing-small) 0;
-        border-radius: var(--spacing-small);
-
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-      }
-
-      :host([active]) {
-        display: flex;
-      }
-
-      :host(*:focus) {
-        outline: none;
-      }
-
-      ::slotted(*) {
-        padding: var(--spacing-medium);
-        border-bottom: 1px solid var(--md-sys-color-surface-variant);
-        cursor: pointer;
-        color: var(--ox-popup-list-color, var(--md-sys-color-outline-variant));
-      }
-
-      ::slotted(*:focus) {
-        cursor: pointer;
-        outline: none;
-      }
-
-      ::slotted([menu]),
-      ::slotted(ox-popup-menuitem) {
-        border-left: 3px solid transparent;
-        background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));
-        color: var(--ox-popup-menu-color, var(--md-sys-color-on-surface));
-      }
-
-      ::slotted([menu][active]),
-      ::slotted([menu]:hover),
-      ::slotted(ox-popup-menuitem[active]),
-      ::slotted(ox-popup-menuitem:hover) {
-        background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-surface-variant));
-        color: var(--ox-popup-list-color-variant, var(--md-sys-color-on-surface-variant));
-      }
-
-      ::slotted(ox-popup-menuitem[active]) {
-        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));
-      }
-
-      ::slotted([separator]) {
-        height: 1px;
-        width: 100%;
-        padding: 0;
-        background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));
-      }
-    `
-  ]
-
-  /**
-   * Property to track the index of the active menu item.
-   */
-  @property({ type: Number }) activeIndex: number = 0
-
-  render() {
-    return html` <slot> </slot> `
-  }
-
-  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenu, e: KeyboardEvent) {
-    e.stopPropagation()
-
-    switch (e.key) {
-      case 'Esc': // for IE/Edge
-      case 'Escape':
-      case 'Left': // for IE/Edge
-      case 'ArrowLeft':
-        this.close()
-        break
-
-      case 'Up': // for IE/Edge
-      case 'ArrowUp':
-        this.activeIndex--
-        break
-
-      case 'Right': // for IE/Edge
-      case 'ArrowRight':
-      case 'Down': // for IE/Edge
-      case 'ArrowDown':
-        this.activeIndex++
-        break
-
-      case 'Enter':
-        e.stopPropagation()
-        var menu = (e.target as HTMLElement)?.closest('[menu], ox-popup-menuitem')
-        if (menu) {
-          this.select(menu)
-        }
-        break
-    }
-  }.bind(this)
-
-  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopupMenu, e: FocusEvent) {
-    const target = e.target as HTMLElement
-    const to = e.relatedTarget as HTMLElement
-    const from = target.closest('ox-popup-menu')
-
-    if (!to && from !== this) {
-      e.stopPropagation()
-
-      /* "하위의 POPUP-MENU 엘리먼트가 포커스를 잃었지만, 그 포커스를 받은 엘리먼트가 없다."는 의미는 그 서브메뉴가 클로즈된 것을 의미한다. */
-      this.setActive(this.activeIndex)
-    } else {
-      if (!this.contains(to)) {
-        /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, popup-menu는 닫혀야 한다. */
-        // @ts-ignore for debug
-        !window.POPUP_DEBUG && this.close()
-      }
-    }
-  }.bind(this)
-
-  protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenu, e: MouseEvent) {
-    e.stopPropagation()
-
-    const menu = (e.target as HTMLElement)?.closest('[menu], ox-popup-menuitem')
-    if (menu) {
-      this.setActive(menu)
-      this.select(menu)
-    }
-  }.bind(this)
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('activeIndex')) {
-      this.setActive(this.activeIndex)
-    }
-  }
-
-  /**
-   * Selects a menu item by dispatching a 'select' event.
-   * Closes the menu if the item doesn't have 'alive-on-select' attribute.
-   */
-  select(menu: Element) {
-    menu.dispatchEvent(new CustomEvent('select'))
-    if (!menu.hasAttribute('alive-on-select')) {
-      this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }))
-    }
-  }
-
-  /**
-   * Sets the active menu item based on the index or the menu element itself.
-   */
-  setActive(active: number | Element | null) {
-    const menus = Array.from(this.querySelectorAll(':scope > ox-popup-menuitem, :scope > [menu]'))
-
-    menus.map(async (menu, index) => {
-      if (typeof active === 'number' && index === (active + menus.length) % menus.length) {
-        menu.setAttribute('active', '')
-        focusClosest(menu as HTMLElement)
-
-        this.activeIndex = index
-      } else if (active === menu) {
-        if (this.activeIndex === index) {
-          /* 메뉴의 update를 유도하기 위해서 강제로 토글시킴 */
-          menu.removeAttribute('active')
-          await this.updateComplete
-          menu.setAttribute('active', '')
-        }
-
-        this.activeIndex = index
-      } else {
-        menu.removeAttribute('active')
-      }
-    })
-  }
-
-  /**
-   * Static method to open a popup menu with the provided template and position options.
-   * Creates and returns an instance of OxPopupMenu.
-   *
-   * @param {PopupOpenOptions}
-   */
-  static open({
-    template,
-    top,
-    left,
-    right,
-    bottom,
-    parent
-  }: {
-    template: unknown
-    top?: number
-    left?: number
-    right?: number
-    bottom?: number
-    parent?: Element | null
-  }): OxPopupMenu {
-    const target = document.createElement('ox-popup-menu') as OxPopupMenu
-    render(template, target)
-
-    target.setAttribute('active', '')
-
-    if (parent) {
-      var { left, top, right, bottom } = convertToFixedPosition({
-        left,
-        top,
-        right,
-        bottom,
-        relativeElement: parent as HTMLElement
-      })
-    }
-
-    document.body.appendChild(target)
-    target.removeAfterUse = true
-    target.open({ top, left, right, bottom })
-
-    return target
-  }
-}

package/src/ox-popup-menuitem.ts

@@ -1,187 +0,0 @@
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { OxPopupMenu } from './ox-popup-menu'
-
-/**
- * Custom element representing a menu item within an OxPopup menu.
- * It can contain a label and an optional submenu.
- */
-@customElement('ox-popup-menuitem')
-export class OxPopupMenuItem extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: row;
-        position: relative;
-        align-items: center;
-      }
-
-      [icon] {
-        width: 20px;
-        display: flex;
-        flex-direction: row;
-        padding: 0;
-        margin: 0 var(--spacing-small) 0 0;
-        align-items: center;
-        justify-content: center;
-      }
-
-      [icon] > * {
-        flex: 1;
-      }
-
-      [label] {
-        flex: 1;
-        text-transform: capitalize;
-      }
-
-      ::slotted(*[slot='icon']) {
-        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-on-surface-variant));
-        font-size: var(--icon-size-small);
-      }
-
-      md-icon {
-        display: block;
-        width: 24px;
-        text-align: right;
-        font-size: var(--icon-size-small);
-        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-primary));
-        opacity: 0.7;
-      }
-    `
-  ]
-
-  /**
-   * Property indicating whether the menu item is active or not.
-   * When active, it may show a submenu.
-   */
-  @property({ type: Boolean }) active: boolean = false
-
-  /**
-   * The label to display for the menu item.
-   */
-  @property({ type: String }) label!: string
-
-  @state() _submenu?: OxPopupMenu
-
-  render() {
-    return html`
-      <div icon>
-        <slot name="icon"> </slot>
-      </div>
-      <div label>${this.label}</div>
-
-      ${this._submenu ? html`<md-icon>chevron_right</md-icon>` : html``}
-
-      <slot @slotchange=${this._onslotchange}> </slot>
-    `
-  }
-
-  firstUpdated() {
-    this.setAttribute('tabindex', '0')
-    this.addEventListener('keydown', this._onkeydown)
-    this.addEventListener('click', this._onclick)
-  }
-
-  protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenuItem, e: MouseEvent) {
-    if (!this._submenu) {
-      return
-    }
-
-    e.stopPropagation()
-
-    const parent = this.closest('ox-popup-menu') as OxPopupMenu
-    if (parent) {
-      parent.setActive(this)
-    }
-
-    this.dispatchEvent(new CustomEvent('select'))
-
-    requestAnimationFrame(() => {
-      this.expand(false)
-    })
-  }.bind(this)
-
-  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenuItem, e: KeyboardEvent) {
-    switch (e.key) {
-      case 'Right':
-      case 'ArrowRight':
-        e.stopPropagation()
-        this.expand(false)
-        break
-
-      case 'Left':
-      case 'ArrowLeft':
-        e.stopPropagation()
-        this.collapseSelf()
-        break
-
-      case 'Enter':
-        if (this._submenu) {
-          e.stopPropagation()
-          this.expand(false)
-        }
-        break
-    }
-  }.bind(this)
-
-  protected _onslotchange: (e: Event) => void = function (this: OxPopupMenuItem, e: Event) {
-    this._submenu = this.querySelector('ox-popup-menu') as OxPopupMenu
-  }.bind(this)
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('active')) {
-      this.updateActive()
-    }
-  }
-
-  updateActive() {
-    if (this.active) {
-      this.expand(true)
-    } else {
-      this.collapse()
-    }
-  }
-
-  /**
-   * Expands the submenu, if it exists.
-   * The submenu is displayed below and to the right of the menu item.
-   *
-   * @param {boolean} silent - If true, the submenu is opened silently without user interaction.
-   */
-  expand(silent: boolean) {
-    if (!this._submenu) {
-      return
-    }
-
-    const top = 0
-    const left = this.clientWidth
-
-    this._submenu.open({ top, left, silent })
-  }
-
-  /**
-   * Collapses the submenu, if it exists.
-   */
-  collapse() {
-    this._submenu?.close()
-  }
-
-  /**
-   * Dispatches a custom 'ox-collapse' event indicating that the menu item should collapse itself.
-   * This event can be used to trigger further interactions or logic in the application.
-   */
-  collapseSelf() {
-    this.dispatchEvent(new CustomEvent('ox-collapse', { bubbles: true, composed: true, detail: this }))
-  }
-
-  /**
-   * Dispatches a custom 'ox-close' event indicating that the menu item should close itself.
-   * This event can be used to trigger further interactions or logic in the application.
-   */
-  close() {
-    this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }))
-  }
-}