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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/popup",
   "description": "Webcomponent popup following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.99",
+  "version": "2.0.0-beta.12",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -60,8 +60,8 @@
   },
   "dependencies": {
     "@material/web": "^1.4.0",
-    "@operato/styles": "^2.0.0-alpha.99",
-    "@operato/utils": "^2.0.0-alpha.68",
+    "@operato/styles": "^2.0.0-beta.5",
+    "@operato/utils": "^2.0.0-beta.0",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -80,6 +80,7 @@
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
+    "sortablejs": "^1.15.2",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -96,5 +97,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "8641cdd871ffdbef9e5b2a79bbf3862fb0422e3e"
+  "gitHead": "08cd1f9bacfca1f0559ee61089a26087cc1876ba"
 }

package/src/ox-floating-overlay.ts

@@ -38,6 +38,7 @@ export class OxFloatingOverlay extends LitElement {
       :host {
         position: relative;
         z-index: var(--z-index, 10);
+        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
       }
 
       :host([hovering='edge']) {
@@ -54,7 +55,8 @@ export class OxFloatingOverlay extends LitElement {
         height: 100vh;
         height: 100dvh;
 
-        background-color: var(--overlay-background-color);
+        background-color: var(--md-sys-color-primary);
+        opacity: 0.2;
       }
 
       [overlayed] {
@@ -63,7 +65,6 @@ export class OxFloatingOverlay extends LitElement {
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        background: transparent;
       }
 
       [overlayed][hovering='center'] {
@@ -97,8 +98,8 @@ export class OxFloatingOverlay extends LitElement {
       }
 
       [header] {
-        --help-icon-color: #fff;
-        --help-icon-hover-color: #fff;
+        --help-icon-color: var(--md-sys-color-on-primary-container);
+        --help-icon-hover-color: var(--md-sys-color-on-primary-container);
 
         pointer-events: initial;
       }
@@ -185,9 +186,9 @@ export class OxFloatingOverlay extends LitElement {
         display: flex;
         flex-direction: row;
         align-items: center;
-
-        background-color: var(--overlay-header-background-color);
-        color: var(--overlay-header-color);
+        background-color: var(--md-sys-color-primary-container);
+        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
+        color: var(--md-sys-color-on-primary-container);
       }
 
       slot[name='header'] {
@@ -197,6 +198,7 @@ export class OxFloatingOverlay extends LitElement {
         flex-direction: row;
         align-items: center;
         justify-content: center;
+        text-transform: capitalize;
       }
 
       [name='header']::slotted(*) {
@@ -204,18 +206,18 @@ export class OxFloatingOverlay extends LitElement {
       }
 
       [name='header'] > h1 {
-        text-transform: capitalize;
-        font: var(--overlay-header-font);
+        font-size: var(--md-sys-typescale-title-medium-size, 1rem);
+        margin-block: 0.4rem;
       }
 
       [historyback] {
-        margin-left: 10px;
+        margin-left: var(--spacing-medium);
         margin-right: auto;
       }
 
       [close] {
         margin-left: auto;
-        margin-right: 10px;
+        margin-right: var(--spacing-medium);
       }
 
       [historyback],
@@ -225,10 +227,11 @@ export class OxFloatingOverlay extends LitElement {
 
       [closable][close] {
         display: block;
+        cursor: pointer;
       }
 
       [search] ox-help-icon {
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
       }
 
       [search] {
@@ -237,10 +240,10 @@ export class OxFloatingOverlay extends LitElement {
         align-items: center;
 
         align-self: center;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
         background-color: var(--opacity-light-color);
         border-radius: 999em;
-        padding: 0 10px;
+        padding: 0 var(--spacing-medium);
       }
 
       [search] > * {

package/src/ox-popup-list.ts

@@ -1,13 +1,14 @@
 import '@material/web/icon/icon.js'
 
-import { css, html, PropertyValues } from 'lit'
+import { css, CSSResult, html, PropertyValues } from 'lit'
 import { render } from 'lit-html'
 import { customElement, property, query, state } from 'lit/decorators.js'
+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) {
@@ -15,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
@@ -33,13 +34,14 @@ export class OxPopupList extends OxPopup {
     css`
       :host {
         display: none;
-        flex-direction: column;
         align-items: stretch;
-        background-color: var(--theme-white-color, #fff);
+        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));
         z-index: 100;
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
-        padding: 4px 0;
-        color: var(--theme-primary-text-color, #3c3938);
+        padding: var(--spacing-small) 0;
+
+        color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
+        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
         font:
           normal 14px 'Roboto',
           sans-serif;
@@ -47,6 +49,7 @@ export class OxPopupList extends OxPopup {
 
       :host([active]) {
         display: flex;
+        flex-direction: column;
       }
 
       :host(*:focus) {
@@ -62,10 +65,11 @@ export class OxPopupList extends OxPopup {
       }
 
       ::slotted(*) {
-        padding: 5px 10px;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        padding: var(--spacing-medium);
+        border-bottom: 1px solid var(--md-sys-color-surface-variant);
         cursor: pointer;
         outline: none;
+        color: var(--ox-popup-list-color, var(--md-sys-color-on-surface-variant));
       }
 
       ::slotted(*:focus) {
@@ -74,22 +78,20 @@ export class OxPopupList extends OxPopup {
 
       ::slotted([option][active]),
       ::slotted([option]:hover) {
-        background-color: #f6f6f6;
+        background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-primary-container));
+        color: var(--ox-popup-list-color-variant, var(--md-sys-color-primary));
       }
 
       ::slotted([option][selected]) {
-        border-left: 3px solid var(--primary-color, #38a25b);
-        font-weight: bold;
+        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: rgba(0, 0, 0, 0.15);
-      }
-      ::slotted([option] > input) {
-        border: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.3));
+        background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));
       }
 
       ::slotted([hidden]) {
@@ -100,22 +102,22 @@ export class OxPopupList extends OxPopup {
         display: flex;
         position: relative;
         align-items: center;
-        padding: 5px 10px;
+        padding: var(--spacing-small) var(--spacing-medium);
 
-        --md-icon-size: 20px;
+        --md-icon-size: var(--icon-size-small);
       }
 
       [search] [type='text'] {
         flex: 1;
         background-color: transparent;
         border: 0;
-        padding: 0 0 0 25px;
+        padding: 0 0 0 var(--spacing-huge);
         outline: none;
         width: 50px;
       }
 
       [search] md-icon {
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
 
       [search] md-icon[search-icon] {
@@ -124,13 +126,22 @@ export class OxPopupList extends OxPopup {
 
       [search] md-icon[delete-icon] {
         opacity: 0.5;
-        --md-icon-size: 14px;
+        --md-icon-size: var(--icon-size-tiny);
       }
 
       [nothing] {
         opacity: 0.5;
         text-align: center;
       }
+
+      div[body] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+      }
     `
   ]
 
@@ -138,20 +149,27 @@ export class OxPopupList extends OxPopup {
    * A boolean property that, when set to true, allows multiple options to be selected in the popup list.
    * @type {boolean}
    */
-  @property({ type: Boolean }) multiple: boolean = false
+  @property({ type: Boolean, attribute: true, reflect: true }) multiple: boolean = false
 
   /**
    * An optional attribute that specifies the name of the attribute used to mark selected options in the list.
    * @type {string|undefined}
    */
-  @property({ type: String, attribute: 'attr-selected' }) attrSelected?: string
+  @property({ type: String, attribute: 'attr-selected', reflect: true }) attrSelected?: string
 
   /**
    * A boolean property that, when set to true, enables the search functionality in the popup list.
    * Users can search/filter options by typing in a search bar.
    * @type {boolean|undefined}
    */
-  @property({ type: Boolean, attribute: 'with-search' }) withSearch?: boolean
+  @property({ type: Boolean, attribute: 'with-search', reflect: true }) withSearch?: boolean
+
+  /**
+   * A boolean property that, when set to true, enables the drag-and-drop sorting functionality within the popup list.
+   * This allows users to reorder the options in the list by dragging them into new positions.
+   * @type {boolean|undefined}
+   */
+  @property({ type: Boolean, attribute: 'sortable', reflect: true }) sortable?: boolean = false
 
   /**
    * The value(s) of the selected option(s) in the popup list.
@@ -165,6 +183,10 @@ export class OxPopupList extends OxPopup {
   @state() nothingToSelect: boolean = false
 
   @query('[search] input') searchInput!: HTMLInputElement
+  @query('div[body]') body!: HTMLDivElement
+
+  private sortableObject?: Sortable
+  private locked: boolean = false
 
   render() {
     return html`
@@ -193,12 +215,15 @@ export class OxPopupList extends OxPopup {
           `
         : html``}
 
-      <slot
-        @change=${(e: Event) => {
-          e.stopPropagation()
-        }}
-      >
-      </slot>
+      <div body>
+        <slot
+          @change=${(e: Event) => {
+            e.stopPropagation()
+          }}
+        >
+        </slot>
+      </div>
+
       ${this.nothingToSelect ? html`<label nothing>nothing to select</label>` : html``}
     `
   }
@@ -258,15 +283,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
-      !window.POPUP_DEBUG && this.close()
+      !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)
@@ -279,6 +309,35 @@ export class OxPopupList extends OxPopup {
       this.activeIndex !== undefined && this.setActive(this.activeIndex)
     }
 
+    if (changes.has('sortable')) {
+      this.sortableObject && this.sortableObject.destroy()
+
+      if (this.sortable) {
+        this.sortableObject = Sortable.create(this, {
+          handle: '[option]',
+          draggable: '[option]',
+          direction: 'vertical',
+          animation: 150,
+          touchStartThreshold: 10,
+          onEnd: e => {
+            this.locked = false
+            this.dispatchEvent(
+              new CustomEvent('sorted', {
+                detail: Array.from(this.querySelectorAll('[option]'))
+              })
+            )
+          },
+          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
+          }
+        })
+      }
+    }
+
     if (changes.has('searchKeyword')) {
       const attrSelected = this.attrSelected || 'selected'
       this.querySelectorAll(`[option]`).forEach(item => {
@@ -412,7 +471,8 @@ export class OxPopupList extends OxPopup {
     super.open(params)
 
     if (this.activeIndex === undefined) {
-      this.activeIndex = 0
+      const activeElement = this.querySelector(`[${this.attrSelected || 'selected'}]`)
+      this.setActive(activeElement || 0)
     } else {
       this.setActive(this.activeIndex)
     }
@@ -424,6 +484,10 @@ export class OxPopupList extends OxPopup {
    * or logic in the application.
    */
   override close() {
+    if (this.locked) {
+      return
+    }
+
     if (this.hasAttribute('active')) {
       this.dispatchEvent(
         new CustomEvent('close', {
@@ -447,7 +511,12 @@ export class OxPopupList extends OxPopup {
     left,
     right,
     bottom,
-    parent
+    parent,
+    multiple,
+    sortable,
+    attrSelected,
+    styles,
+    debug
   }: {
     template: unknown
     top?: number
@@ -455,9 +524,39 @@ export class OxPopupList extends OxPopup {
     right?: number
     bottom?: number
     parent?: Element | null
+    multiple?: boolean
+    sortable?: boolean
+    debug?: boolean
+    attrSelected?: string
+    styles: CSSResult
   }): OxPopupList {
     const owner = parent || document.body
     const target = document.createElement('ox-popup-list') as OxPopupList
+
+    if (styles) {
+      const style = document.createElement('style')
+      style.textContent = styles.cssText
+
+      const shadow = target.attachShadow({ mode: 'open' })
+      shadow.appendChild(style)
+    }
+
+    if (!!debug) {
+      target.setAttribute('debug', '')
+    }
+
+    if (!!multiple) {
+      target.setAttribute('multiple', '')
+    }
+
+    if (!!sortable) {
+      target.setAttribute('sortable', '')
+    }
+
+    if (attrSelected) {
+      target.setAttribute('attr-selected', attrSelected)
+    }
+
     render(template, target)
 
     target._parent = owner

package/src/ox-popup-menu.ts

@@ -27,13 +27,13 @@ export class OxPopupMenu extends OxPopup {
         display: none;
         flex-direction: column;
         align-items: stretch;
-        background-color: var(--theme-white-color, #fff);
+        background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));
         z-index: 100;
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
-        padding: 4px 0;
+        padding: var(--spacing-small) 0;
 
-        color: var(--theme-primary-text-color, #3c3938);
-        font: normal 14px 'Roboto', sans-serif;
+        color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
+        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
       }
 
       :host([active]) {
@@ -45,37 +45,42 @@ export class OxPopupMenu extends OxPopup {
       }
 
       ::slotted(*) {
-        padding: 5px 10px;
+        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][active]),
-      ::slotted([menu]:hover) {
-        background-color: #f6f6f6;
-      }
-
       ::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-primary-container));
+        color: var(--ox-popup-list-color-variant, var(--md-sys-color-primary));
       }
 
       ::slotted(ox-popup-menuitem[active]) {
-        border-left: 3px solid var(--primary-color, #38a25b);
-        font-weight: bold;
+        border-left: 3px solid var(--md-ref-palette-primary50);
+        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: rgba(0, 0, 0, 0.15);
-      }
-      ::slotted([menu] > input) {
-        border: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.3));
+        background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));
       }
     `
   ]

package/src/ox-popup-menuitem.ts

@@ -23,7 +23,7 @@ export class OxPopupMenuItem extends LitElement {
         display: flex;
         flex-direction: row;
         padding: 0;
-        margin: 0 4px 0 0;
+        margin: 0 var(--spacing-small) 0 0;
         align-items: center;
         justify-content: center;
       }
@@ -38,16 +38,16 @@ export class OxPopupMenuItem extends LitElement {
       }
 
       ::slotted(*[slot='icon']) {
-        color: var(--secondary-color, #476172);
-        font-size: 18px;
+        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: 18px;
-        color: var(--theme-primary-text-color, #3c3938);
+        font-size: var(--icon-size-small);
+        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-primary));
         opacity: 0.7;
       }
     `

package/src/ox-popup.ts

@@ -1,6 +1,6 @@
 import { css, html, LitElement } from 'lit'
 import { render } from 'lit-html'
-import { customElement, state } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import { ScrollbarStyles } from '@operato/styles'
 
@@ -21,7 +21,6 @@ export class OxPopup extends LitElement {
       :host {
         position: absolute;
         display: none;
-        background-color: var(--theme-white-color, #fff);
         z-index: 100;
         padding: 0;
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
@@ -29,10 +28,12 @@ export class OxPopup extends LitElement {
         min-width: fit-content;
         line-height: initial;
         text-align: initial;
+        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));
+        color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
       }
 
       :host([active]) {
-        display: block;
+        display: flex;
       }
 
       :host(*:focus) {
@@ -41,6 +42,8 @@ export class OxPopup extends LitElement {
     `
   ]
 
+  @property({ type: Boolean }) debug: boolean = false
+
   @state() _parent: Element | null = null
 
   private lastActive: HTMLElement = document.activeElement as HTMLElement
@@ -55,7 +58,7 @@ export class OxPopup extends LitElement {
     if (!this.contains(to)) {
       /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup은 닫혀야 한다. */
       // @ts-ignore for debug
-      !window.POPUP_DEBUG && this.close()
+      !this.debug && !window.POPUP_DEBUG && this.close()
     }
   }.bind(this)
 
@@ -102,7 +105,7 @@ export class OxPopup extends LitElement {
 
   protected _onwindowblur: (e: Event) => void = function (this: OxPopup, e: Event) {
     // @ts-ignore for debug
-    !window.POPUP_DEBUG && this.close()
+    !this.debug && !window.POPUP_DEBUG && this.close()
   }.bind(this)
 
   connectedCallback() {
@@ -249,19 +252,24 @@ export class OxPopup extends LitElement {
       const computedStyle = getComputedStyle(this)
 
       if (t < 0) {
-        this.style.top = '0'
+        this.style.top = '10px'
         this.style.bottom = ''
       } else if (vh < t + h) {
-        this.style.top = `calc(${computedStyle.top} - ${t + h - vh}px)` // 현재의 top 값에 차감한다.
+        this.style.top = `calc(${computedStyle.top} - ${t + h - vh + 10}px)` // 현재의 top 값에 차감한다.
         this.style.bottom = ''
+        // this.style.top = ''
+        // this.style.bottom = '10px'
       }
 
       if (l < 0) {
-        this.style.left = `calc(${computedStyle.left} - ${l}px)` // 현재의 left 값에 l를 차감한다. (왼쪽으로 이탈했기 때문에 오른쪽으로 가야 화면에 보임)
+        this.style.left = `calc(${computedStyle.left} - ${l - 10}px)` // 현재의 left 값에 l를 차감한다. (왼쪽으로 이탈했기 때문에 오른쪽으로 가야 화면에 보임)
+        // this.style.left = '10px'
         this.style.right = ''
       } else if (vw < l + w) {
-        this.style.left = `calc(${computedStyle.left} - ${l + w - vw}px)` // 현재의 left 값에 차감한다.
+        this.style.left = `calc(${computedStyle.left} - ${l + w - vw + 10}px)` // 현재의 left 값에 차감한다.
         this.style.right = ''
+        // this.style.left = ''
+        // this.style.right = '10px'
       }
     })