@designbasekorea/ui-wc 0.5.6 → 0.6.1

package/dist/esm/components/db-confirm.js

@@ -1,191 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-class DbConfirm extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.root = null;
-        this.keyHandler = null;
-    }
-    static get observedAttributes() {
-        return [
-            'open',
-            'title',
-            'message',
-            'confirm-text',
-            'cancel-text',
-            'confirm-variant',
-            'variant',
-            'size',
-            'show-icon',
-            'initial-focus',
-            'confirm-disabled',
-            'cancel-disabled',
-            'close-on-escape',
-            'close-on-backdrop',
-        ];
-    }
-    connectedCallback() {
-        this.render();
-    }
-    disconnectedCallback() {
-        this.detachEscape();
-        document.body.style.overflow = '';
-        this.root?.remove();
-        this.root = null;
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-    isOpen() {
-        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
-    }
-    attachEscape() {
-        if (this.keyHandler)
-            return;
-        this.keyHandler = (event) => {
-            if (event.key !== 'Escape')
-                return;
-            if (this.getAttribute('close-on-escape') === 'false')
-                return;
-            this.dispatchCancel();
-        };
-        document.addEventListener('keydown', this.keyHandler);
-    }
-    detachEscape() {
-        if (!this.keyHandler)
-            return;
-        document.removeEventListener('keydown', this.keyHandler);
-        this.keyHandler = null;
-    }
-    dispatchCancel() {
-        this.setAttribute('open', 'false');
-        this.dispatchEvent(new CustomEvent('db-cancel', { bubbles: true, composed: true }));
-        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
-    }
-    dispatchConfirm() {
-        this.setAttribute('open', 'false');
-        this.dispatchEvent(new CustomEvent('db-confirm', { bubbles: true, composed: true }));
-        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
-    }
-    iconForVariant(variant) {
-        if (variant === 'success')
-            return 'award';
-        if (variant === 'warning')
-            return 'bell-active';
-        if (variant === 'danger')
-            return 'cloud-close';
-        return 'bulb';
-    }
-    iconSize(size) {
-        if (size === 's')
-            return 20;
-        if (size === 'l')
-            return 32;
-        return 24;
-    }
-    render() {
-        this.root?.remove();
-        this.root = null;
-        this.detachEscape();
-        if (!this.isOpen()) {
-            document.body.style.overflow = '';
-            this.replaceChildren();
-            return;
-        }
-        document.body.style.overflow = 'hidden';
-        this.attachEscape();
-        const title = this.getAttribute('title') || '';
-        const message = this.getAttribute('message') || this.textContent?.trim() || '';
-        const confirmText = this.getAttribute('confirm-text') || '확인';
-        const cancelText = this.getAttribute('cancel-text') || '취소';
-        const confirmVariant = this.getAttribute('confirm-variant') || 'primary';
-        const variant = this.getAttribute('variant') || 'info';
-        const size = this.getAttribute('size') || 's';
-        const showIcon = this.getAttribute('show-icon') !== 'false';
-        const initialFocus = this.getAttribute('initial-focus') || 'confirm';
-        const confirmDisabled = this.getAttribute('confirm-disabled') === 'true';
-        const cancelDisabled = this.getAttribute('cancel-disabled') === 'true';
-        const overlay = document.createElement('div');
-        overlay.className = 'designbase-wc-confirm__overlay';
-        overlay.setAttribute('role', 'dialog');
-        overlay.setAttribute('aria-modal', 'true');
-        if (title)
-            overlay.setAttribute('aria-labelledby', 'confirm-title');
-        overlay.setAttribute('aria-describedby', 'confirm-content');
-        overlay.addEventListener('click', (event) => {
-            if (event.target !== overlay)
-                return;
-            if (this.getAttribute('close-on-backdrop') === 'false')
-                return;
-            this.dispatchCancel();
-        });
-        const modal = document.createElement('div');
-        modal.className = [
-            'designbase-wc-confirm__modal',
-            `designbase-wc-confirm__modal--${variant}`,
-            `designbase-wc-confirm__modal--${size}`,
-            !showIcon && 'designbase-wc-confirm__modal--no-icon',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const header = document.createElement('div');
-        header.className = [
-            'designbase-wc-confirm__header',
-            !showIcon && 'designbase-wc-confirm__header--no-icon',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        if (showIcon) {
-            const icon = document.createElement('div');
-            icon.className = 'designbase-wc-confirm__icon';
-            icon.append(createDbIcon(this.iconForVariant(variant), this.iconSize(size)));
-            header.append(icon);
-        }
-        const titleArea = document.createElement('div');
-        titleArea.className = 'designbase-wc-confirm__title-area';
-        if (title) {
-            const heading = document.createElement('h2');
-            heading.id = 'confirm-title';
-            heading.className = 'designbase-wc-confirm__title';
-            heading.textContent = title;
-            titleArea.append(heading);
-        }
-        header.append(titleArea);
-        modal.append(header);
-        const content = document.createElement('div');
-        content.id = 'confirm-content';
-        content.className = 'designbase-wc-confirm__content';
-        content.textContent = message;
-        modal.append(content);
-        const footer = document.createElement('div');
-        footer.className = 'designbase-wc-confirm__footer';
-        const cancel = document.createElement('db-button');
-        cancel.setAttribute('variant', 'tertiary');
-        cancel.setAttribute('full-width', '');
-        cancel.textContent = cancelText;
-        if (cancelDisabled)
-            cancel.setAttribute('disabled', '');
-        cancel.addEventListener('db-click', () => this.dispatchCancel());
-        const confirm = document.createElement('db-button');
-        confirm.setAttribute('variant', confirmVariant);
-        confirm.setAttribute('full-width', '');
-        confirm.textContent = confirmText;
-        if (confirmDisabled)
-            confirm.setAttribute('disabled', '');
-        confirm.addEventListener('db-click', () => this.dispatchConfirm());
-        footer.append(cancel, confirm);
-        modal.append(footer);
-        overlay.append(modal);
-        document.body.append(overlay);
-        this.root = overlay;
-        requestAnimationFrame(() => {
-            const focusTarget = initialFocus === 'cancel' ? cancel : confirm;
-            focusTarget.focus();
-        });
-    }
-}
-if (!customElements.get('db-confirm')) {
-    customElements.define('db-confirm', DbConfirm);
-}
-
-export { DbConfirm };
+import{createDbIcon as e}from"./db-icons.js";class DbConfirm extends HTMLElement{constructor(){super(...arguments),this.root=null,this.keyHandler=null}static get observedAttributes(){return["open","title","message","confirm-text","cancel-text","confirm-variant","variant","size","show-icon","initial-focus","confirm-disabled","cancel-disabled","close-on-escape","close-on-backdrop"]}connectedCallback(){this.render()}disconnectedCallback(){this.detachEscape(),document.body.style.overflow="",this.root?.remove(),this.root=null}attributeChangedCallback(){this.render()}isOpen(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}attachEscape(){this.keyHandler||(this.keyHandler=e=>{"Escape"===e.key&&"false"!==this.getAttribute("close-on-escape")&&this.dispatchCancel()},document.addEventListener("keydown",this.keyHandler))}detachEscape(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}dispatchCancel(){this.setAttribute("open","false"),this.dispatchEvent(new CustomEvent("db-cancel",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}dispatchConfirm(){this.setAttribute("open","false"),this.dispatchEvent(new CustomEvent("db-confirm",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}iconForVariant(e){return"success"===e?"award":"warning"===e?"bell-active":"danger"===e?"cloud-close":"bulb"}iconSize(e){return"s"===e?20:"l"===e?32:24}render(){if(this.root?.remove(),this.root=null,this.detachEscape(),!this.isOpen())return document.body.style.overflow="",void this.replaceChildren();document.body.style.overflow="hidden",this.attachEscape();const t=this.getAttribute("title")||"",i=this.getAttribute("message")||this.textContent?.trim()||"",n=this.getAttribute("confirm-text")||"확인",s=this.getAttribute("cancel-text")||"취소",c=this.getAttribute("confirm-variant")||"primary",o=this.getAttribute("variant")||"info",a=this.getAttribute("size")||"s",r="false"!==this.getAttribute("show-icon"),d=this.getAttribute("initial-focus")||"confirm",l="true"===this.getAttribute("confirm-disabled"),m="true"===this.getAttribute("cancel-disabled"),b=document.createElement("div");b.className="designbase-wc-confirm__overlay",b.setAttribute("role","dialog"),b.setAttribute("aria-modal","true"),t&&b.setAttribute("aria-labelledby","confirm-title"),b.setAttribute("aria-describedby","confirm-content"),b.addEventListener("click",e=>{e.target===b&&"false"!==this.getAttribute("close-on-backdrop")&&this.dispatchCancel()});const u=document.createElement("div");u.className=["designbase-wc-confirm__modal",`designbase-wc-confirm__modal--${o}`,`designbase-wc-confirm__modal--${a}`,!r&&"designbase-wc-confirm__modal--no-icon"].filter(Boolean).join(" ");const h=document.createElement("div");if(h.className=["designbase-wc-confirm__header",!r&&"designbase-wc-confirm__header--no-icon"].filter(Boolean).join(" "),r){const t=document.createElement("div");t.className="designbase-wc-confirm__icon",t.append(e(this.iconForVariant(o),this.iconSize(a))),h.append(t)}const p=document.createElement("div");if(p.className="designbase-wc-confirm__title-area",t){const e=document.createElement("h2");e.id="confirm-title",e.className="designbase-wc-confirm__title",e.textContent=t,p.append(e)}h.append(p),u.append(h);const f=document.createElement("div");f.id="confirm-content",f.className="designbase-wc-confirm__content",f.textContent=i,u.append(f);const v=document.createElement("div");v.className="designbase-wc-confirm__footer";const g=document.createElement("db-button");g.setAttribute("variant","tertiary"),g.setAttribute("full-width",""),g.textContent=s,m&&g.setAttribute("disabled",""),g.addEventListener("db-click",()=>this.dispatchCancel());const E=document.createElement("db-button");E.setAttribute("variant",c),E.setAttribute("full-width",""),E.textContent=n,l&&E.setAttribute("disabled",""),E.addEventListener("db-click",()=>this.dispatchConfirm()),v.append(g,E),u.append(v),b.append(u),document.body.append(b),this.root=b,requestAnimationFrame(()=>{("cancel"===d?g:E).focus()})}}customElements.get("db-confirm")||customElements.define("db-confirm",DbConfirm);export{DbConfirm};

package/dist/esm/components/db-container.js

@@ -1,39 +1 @@
-const SIZES = ['s', 'm', 'l', 'xl', 'full'];
-const PADDINGS = ['none', 's', 'm', 'l', 'xl'];
-class DbContainer extends HTMLElement {
-    static get observedAttributes() {
-        return ['size', 'padding', 'max-width', 'full-width'];
-    }
-    connectedCallback() {
-        this.syncClasses();
-    }
-    attributeChangedCallback() {
-        this.syncClasses();
-    }
-    syncClasses() {
-        const size = this.getAttribute('size') || 'l';
-        const padding = this.getAttribute('padding') || 'm';
-        const maxWidth = this.getAttribute('max-width');
-        this.className = [
-            'designbase-wc-container',
-            `designbase-wc-container--size-${SIZES.includes(size) ? size : 'l'}`,
-            PADDINGS.includes(padding) && `designbase-wc-container--padding-${padding}`,
-            this.hasAttribute('full-width') && 'designbase-wc-container--full-width',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        if (this.hasAttribute('full-width')) {
-            this.style.maxWidth = '100%';
-        }
-        else if (maxWidth) {
-            this.style.maxWidth = maxWidth.includes('px') || maxWidth.includes('%') ? maxWidth : `${maxWidth}px`;
-        }
-        else {
-            this.style.removeProperty('max-width');
-        }
-    }
-}
-if (!customElements.get('db-container'))
-    customElements.define('db-container', DbContainer);
-
-export { DbContainer };
+const t=["s","m","l","xl","full"],e=["none","s","m","l","xl"];class DbContainer extends HTMLElement{static get observedAttributes(){return["size","padding","max-width","full-width"]}connectedCallback(){this.syncClasses()}attributeChangedCallback(){this.syncClasses()}syncClasses(){const s=this.getAttribute("size")||"l",i=this.getAttribute("padding")||"m",n=this.getAttribute("max-width");this.className=["designbase-wc-container",`designbase-wc-container--size-${t.includes(s)?s:"l"}`,e.includes(i)&&`designbase-wc-container--padding-${i}`,this.hasAttribute("full-width")&&"designbase-wc-container--full-width"].filter(Boolean).join(" "),this.hasAttribute("full-width")?this.style.maxWidth="100%":n?this.style.maxWidth=n.includes("px")||n.includes("%")?n:`${n}px`:this.style.removeProperty("max-width")}}customElements.get("db-container")||customElements.define("db-container",DbContainer);export{DbContainer};

package/dist/esm/components/db-context-menu.js

@@ -1,265 +1 @@
-class DbContextMenu extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.externalTarget = null;
-        this.activeSubMenu = null;
-        this.onExternalContextMenu = null;
-        this.handleDocumentMouseDown = (event) => {
-            if (!this.open)
-                return;
-            const target = event.target;
-            if (this.menuEl?.contains(target))
-                return;
-            // 트리거 영역 안이라도 좌클릭(또는 우클릭 외 버튼)이면 닫는다.
-            // 우클릭(button 2)만 재오픈/위치이동을 위해 닫지 않고 넘긴다.
-            if (event.button === 2 && (this.targetWrap?.contains(target) || this.externalTarget?.contains(target))) {
-                return;
-            }
-            this.close();
-        };
-        this.handleKeyDown = (event) => {
-            if (!this.open)
-                return;
-            if (event.key === 'Escape')
-                this.close();
-        };
-        this.handleContextMenu = (event) => {
-            if (this.hasAttribute('disabled'))
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-            this.openAt(event.clientX, event.clientY);
-        };
-    }
-    static get observedAttributes() {
-        return ['open', 'x', 'y', 'items', 'target-id', 'disabled'];
-    }
-    get open() {
-        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
-    }
-    set open(value) {
-        if (value)
-            this.setAttribute('open', 'true');
-        else
-            this.removeAttribute('open');
-    }
-    get items() {
-        try {
-            return JSON.parse(this.getAttribute('items') || '[]');
-        }
-        catch {
-            return [];
-        }
-    }
-    set items(value) {
-        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    connectedCallback() {
-        this.style.display = 'contents';
-        requestAnimationFrame(() => {
-            this.renderTarget();
-            this.syncMenu();
-        });
-        document.addEventListener('mousedown', this.handleDocumentMouseDown);
-        document.addEventListener('keydown', this.handleKeyDown);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('mousedown', this.handleDocumentMouseDown);
-        document.removeEventListener('keydown', this.handleKeyDown);
-        this.unbindExternalTarget();
-        this.menuEl?.remove();
-        this.menuEl = undefined;
-    }
-    attributeChangedCallback(name) {
-        if (!this.isConnected)
-            return;
-        if (name === 'target-id') {
-            this.unbindExternalTarget();
-            this.bindExternalTarget();
-            return;
-        }
-        if (name === 'open' || name === 'x' || name === 'y' || name === 'items') {
-            this.syncMenu();
-        }
-    }
-    openAt(x, y) {
-        this.setAttribute('x', String(x));
-        this.setAttribute('y', String(y));
-        this.setAttribute('open', 'true');
-        this.dispatchEvent(new CustomEvent('db-open', {
-            bubbles: true,
-            composed: true,
-            detail: { x, y },
-        }));
-        this.syncMenu();
-    }
-    close() {
-        this.activeSubMenu = null;
-        this.removeAttribute('open');
-        this.menuEl?.remove();
-        this.menuEl = undefined;
-        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
-    }
-    collectTargetChildren() {
-        const fromHost = Array.from(this.children).filter((child) => !child.hasAttribute('data-wc-internal') && child !== this.targetWrap);
-        if (fromHost.length > 0)
-            return fromHost;
-        return Array.from(this.targetWrap?.children || []);
-    }
-    bindExternalTarget() {
-        const targetId = this.getAttribute('target-id');
-        if (!targetId)
-            return;
-        this.externalTarget = document.getElementById(targetId);
-        if (!this.externalTarget)
-            return;
-        this.onExternalContextMenu = (event) => this.handleContextMenu(event);
-        this.externalTarget.addEventListener('contextmenu', this.onExternalContextMenu);
-    }
-    unbindExternalTarget() {
-        if (this.externalTarget && this.onExternalContextMenu) {
-            this.externalTarget.removeEventListener('contextmenu', this.onExternalContextMenu);
-        }
-        this.externalTarget = null;
-        this.onExternalContextMenu = null;
-    }
-    renderTarget() {
-        const targetChildren = this.collectTargetChildren();
-        const targetId = this.getAttribute('target-id');
-        if (!targetId) {
-            if (!this.targetWrap) {
-                this.targetWrap = document.createElement('div');
-                this.targetWrap.className = 'designbase-wc-context-menu__target';
-                this.targetWrap.addEventListener('contextmenu', this.handleContextMenu);
-            }
-            this.replaceChildren();
-            targetChildren.forEach((child) => this.targetWrap.append(child));
-            if (targetChildren.length > 0) {
-                this.append(this.targetWrap);
-            }
-        }
-        else {
-            this.replaceChildren();
-            this.bindExternalTarget();
-        }
-    }
-    adjustPosition() {
-        if (!this.menuEl)
-            return;
-        const x = Number(this.getAttribute('x') || 0);
-        const y = Number(this.getAttribute('y') || 0);
-        const rect = this.menuEl.getBoundingClientRect();
-        let adjustedX = x;
-        let adjustedY = y;
-        if (x + rect.width > window.innerWidth)
-            adjustedX = x - rect.width;
-        if (y + rect.height > window.innerHeight)
-            adjustedY = y - rect.height;
-        this.menuEl.style.left = `${Math.max(0, adjustedX)}px`;
-        this.menuEl.style.top = `${Math.max(0, adjustedY)}px`;
-    }
-    createMenuItem(item) {
-        const menuItem = document.createElement('db-menu-item');
-        menuItem.setAttribute('label', item.label || item.id);
-        menuItem.setAttribute('type', 'block');
-        menuItem.setAttribute('menu-style', 'dropdown');
-        if (item.icon)
-            menuItem.setAttribute('icon', item.icon);
-        if (item.disabled)
-            menuItem.setAttribute('disabled', '');
-        if (item.variant)
-            menuItem.setAttribute('variant', item.variant);
-        if (item.subItems?.length) {
-            menuItem.setAttribute('sub-items', JSON.stringify(item.subItems));
-            menuItem.setAttribute('expandable', '');
-        }
-        menuItem.addEventListener('db-click', () => {
-            if (item.disabled)
-                return;
-            if (!item.subItems?.length) {
-                this.dispatchEvent(new CustomEvent('db-select', {
-                    detail: { item },
-                    bubbles: true,
-                    composed: true,
-                }));
-                this.close();
-            }
-        });
-        menuItem.addEventListener('db-child-click', (event) => {
-            const child = event.detail?.child;
-            this.dispatchEvent(new CustomEvent('db-select', {
-                detail: { item: child },
-                bubbles: true,
-                composed: true,
-            }));
-            this.close();
-        });
-        return menuItem;
-    }
-    renderItem(item, index) {
-        if (item.divider || item.isDivider) {
-            const divider = document.createElement('db-divider');
-            divider.className = 'designbase-wc-divider';
-            return divider;
-        }
-        const wrapper = document.createElement('div');
-        wrapper.className = 'designbase-wc-context-menu__item-wrapper';
-        wrapper.append(this.createMenuItem(item));
-        const hasSubMenu = Boolean(item.subItems?.length);
-        if (hasSubMenu) {
-            const submenu = document.createElement('div');
-            submenu.className = [
-                'designbase-wc-context-menu__submenu',
-                this.activeSubMenu === item.id && 'designbase-wc-context-menu__submenu--open',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            item.subItems?.forEach((subItem, subIndex) => {
-                const child = this.renderItem(subItem, subIndex);
-                if (child)
-                    submenu.append(child);
-            });
-            wrapper.addEventListener('mouseenter', () => {
-                this.activeSubMenu = item.id;
-                submenu.classList.add('designbase-wc-context-menu__submenu--open');
-            });
-            wrapper.addEventListener('mouseleave', () => {
-                this.activeSubMenu = null;
-                submenu.classList.remove('designbase-wc-context-menu__submenu--open');
-            });
-            wrapper.append(submenu);
-        }
-        return wrapper;
-    }
-    syncMenu() {
-        this.menuEl?.remove();
-        this.menuEl = undefined;
-        if (!this.open)
-            return;
-        const x = Number(this.getAttribute('x') || 0);
-        const y = Number(this.getAttribute('y') || 0);
-        const items = this.items;
-        const menu = document.createElement('div');
-        menu.className = 'designbase-wc-context-menu';
-        menu.setAttribute('data-wc-internal', '');
-        menu.style.position = 'fixed';
-        menu.style.left = `${x}px`;
-        menu.style.top = `${y}px`;
-        menu.style.zIndex = '1000';
-        menu.setAttribute('role', 'menu');
-        menu.setAttribute('aria-orientation', 'vertical');
-        items.forEach((item, index) => {
-            const node = this.renderItem(item, index);
-            if (node)
-                menu.append(node);
-        });
-        document.body.append(menu);
-        this.menuEl = menu;
-        requestAnimationFrame(() => this.adjustPosition());
-    }
-}
-if (!customElements.get('db-context-menu')) {
-    customElements.define('db-context-menu', DbContextMenu);
-}
-
-export { DbContextMenu };
+class DbContextMenu extends HTMLElement{constructor(){super(...arguments),this.externalTarget=null,this.activeSubMenu=null,this.onExternalContextMenu=null,this.handleDocumentMouseDown=t=>{if(!this.open)return;const e=t.target;this.menuEl?.contains(e)||2===t.button&&(this.targetWrap?.contains(e)||this.externalTarget?.contains(e))||this.close()},this.handleKeyDown=t=>{this.open&&"Escape"===t.key&&this.close()},this.handleContextMenu=t=>{this.hasAttribute("disabled")||(t.preventDefault(),t.stopPropagation(),this.openAt(t.clientX,t.clientY))}}static get observedAttributes(){return["open","x","y","items","target-id","disabled"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open","true"):this.removeAttribute("open")}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.renderTarget(),this.syncMenu()}),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleKeyDown),this.unbindExternalTarget(),this.menuEl?.remove(),this.menuEl=void 0}attributeChangedCallback(t){if(this.isConnected)return"target-id"===t?(this.unbindExternalTarget(),void this.bindExternalTarget()):void("open"!==t&&"x"!==t&&"y"!==t&&"items"!==t||this.syncMenu())}openAt(t,e){this.setAttribute("x",String(t)),this.setAttribute("y",String(e)),this.setAttribute("open","true"),this.dispatchEvent(new CustomEvent("db-open",{bubbles:!0,composed:!0,detail:{x:t,y:e}})),this.syncMenu()}close(){this.activeSubMenu=null,this.removeAttribute("open"),this.menuEl?.remove(),this.menuEl=void 0,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}collectTargetChildren(){const t=Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal")&&t!==this.targetWrap);return t.length>0?t:Array.from(this.targetWrap?.children||[])}bindExternalTarget(){const t=this.getAttribute("target-id");t&&(this.externalTarget=document.getElementById(t),this.externalTarget&&(this.onExternalContextMenu=t=>this.handleContextMenu(t),this.externalTarget.addEventListener("contextmenu",this.onExternalContextMenu)))}unbindExternalTarget(){this.externalTarget&&this.onExternalContextMenu&&this.externalTarget.removeEventListener("contextmenu",this.onExternalContextMenu),this.externalTarget=null,this.onExternalContextMenu=null}renderTarget(){const t=this.collectTargetChildren();this.getAttribute("target-id")?(this.replaceChildren(),this.bindExternalTarget()):(this.targetWrap||(this.targetWrap=document.createElement("div"),this.targetWrap.className="designbase-wc-context-menu__target",this.targetWrap.addEventListener("contextmenu",this.handleContextMenu)),this.replaceChildren(),t.forEach(t=>this.targetWrap.append(t)),t.length>0&&this.append(this.targetWrap))}adjustPosition(){if(!this.menuEl)return;const t=Number(this.getAttribute("x")||0),e=Number(this.getAttribute("y")||0),n=this.menuEl.getBoundingClientRect();let i=t,s=e;t+n.width>window.innerWidth&&(i=t-n.width),e+n.height>window.innerHeight&&(s=e-n.height),this.menuEl.style.left=`${Math.max(0,i)}px`,this.menuEl.style.top=`${Math.max(0,s)}px`}createMenuItem(t){const e=document.createElement("db-menu-item");return e.setAttribute("label",t.label||t.id),e.setAttribute("type","block"),e.setAttribute("menu-style","dropdown"),t.icon&&e.setAttribute("icon",t.icon),t.disabled&&e.setAttribute("disabled",""),t.variant&&e.setAttribute("variant",t.variant),t.subItems?.length&&(e.setAttribute("sub-items",JSON.stringify(t.subItems)),e.setAttribute("expandable","")),e.addEventListener("db-click",()=>{t.disabled||t.subItems?.length||(this.dispatchEvent(new CustomEvent("db-select",{detail:{item:t},bubbles:!0,composed:!0})),this.close())}),e.addEventListener("db-child-click",t=>{const e=t.detail?.child;this.dispatchEvent(new CustomEvent("db-select",{detail:{item:e},bubbles:!0,composed:!0})),this.close()}),e}renderItem(t,e){if(t.divider||t.isDivider){const t=document.createElement("db-divider");return t.className="designbase-wc-divider",t}const n=document.createElement("div");n.className="designbase-wc-context-menu__item-wrapper",n.append(this.createMenuItem(t));if(Boolean(t.subItems?.length)){const e=document.createElement("div");e.className=["designbase-wc-context-menu__submenu",this.activeSubMenu===t.id&&"designbase-wc-context-menu__submenu--open"].filter(Boolean).join(" "),t.subItems?.forEach((t,n)=>{const i=this.renderItem(t,n);i&&e.append(i)}),n.addEventListener("mouseenter",()=>{this.activeSubMenu=t.id,e.classList.add("designbase-wc-context-menu__submenu--open")}),n.addEventListener("mouseleave",()=>{this.activeSubMenu=null,e.classList.remove("designbase-wc-context-menu__submenu--open")}),n.append(e)}return n}syncMenu(){if(this.menuEl?.remove(),this.menuEl=void 0,!this.open)return;const t=Number(this.getAttribute("x")||0),e=Number(this.getAttribute("y")||0),n=this.items,i=document.createElement("div");i.className="designbase-wc-context-menu",i.setAttribute("data-wc-internal",""),i.style.position="fixed",i.style.left=`${t}px`,i.style.top=`${e}px`,i.style.zIndex="1000",i.setAttribute("role","menu"),i.setAttribute("aria-orientation","vertical"),n.forEach((t,e)=>{const n=this.renderItem(t,e);n&&i.append(n)}),document.body.append(i),this.menuEl=i,requestAnimationFrame(()=>this.adjustPosition())}}customElements.get("db-context-menu")||customElements.define("db-context-menu",DbContextMenu);export{DbContextMenu};

package/dist/esm/components/db-countdown.js

@@ -1,146 +1 @@
-const SIZES = ['s', 'm', 'l'];
-const VARIANTS = ['default', 'compact', 'minimal'];
-class DbCountdown extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.timer = null;
-        this.targetTime = Date.now();
-    }
-    static get observedAttributes() {
-        return [
-            'end-date',
-            'duration',
-            'size',
-            'variant',
-            'show-days',
-            'show-hours',
-            'show-minutes',
-            'show-seconds',
-            'show-labels',
-        ];
-    }
-    connectedCallback() {
-        this.setupTargetTime();
-        this.start();
-    }
-    disconnectedCallback() {
-        this.stop();
-    }
-    attributeChangedCallback() {
-        this.setupTargetTime();
-        this.render();
-    }
-    boolAttr(name, fallback = false) {
-        if (!this.hasAttribute(name))
-            return fallback;
-        const value = this.getAttribute(name);
-        return value === '' || value === 'true';
-    }
-    optionAttr(name, options, fallback) {
-        const value = this.getAttribute(name);
-        return value && options.includes(value) ? value : fallback;
-    }
-    setupTargetTime() {
-        const endDate = this.getAttribute('end-date');
-        const duration = Number(this.getAttribute('duration'));
-        if (endDate) {
-            const parsed = new Date(endDate).getTime();
-            this.targetTime = Number.isFinite(parsed) ? parsed : Date.now();
-            return;
-        }
-        if (Number.isFinite(duration) && duration > 0) {
-            this.targetTime = Date.now() + duration * 1000;
-            return;
-        }
-        this.targetTime = Date.now();
-    }
-    getRemaining() {
-        const total = this.targetTime - Date.now();
-        if (total <= 0)
-            return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 };
-        return {
-            days: Math.floor(total / (1000 * 60 * 60 * 24)),
-            hours: Math.floor((total / (1000 * 60 * 60)) % 24),
-            minutes: Math.floor((total / (1000 * 60)) % 60),
-            seconds: Math.floor((total / 1000) % 60),
-            total,
-        };
-    }
-    stop() {
-        if (this.timer !== null) {
-            window.clearInterval(this.timer);
-            this.timer = null;
-        }
-    }
-    start() {
-        this.stop();
-        this.render();
-        this.timer = window.setInterval(() => {
-            const remaining = this.getRemaining();
-            this.render();
-            this.dispatchEvent(new CustomEvent('db-tick', { detail: remaining, bubbles: true, composed: true }));
-            if (remaining.total <= 0) {
-                this.stop();
-                this.dispatchEvent(new CustomEvent('db-complete', { bubbles: true, composed: true }));
-            }
-        }, 1000);
-    }
-    two(value) {
-        return String(value).padStart(2, '0');
-    }
-    render() {
-        const size = this.optionAttr('size', SIZES, 'm');
-        const variant = this.optionAttr('variant', VARIANTS, 'default');
-        const showLabels = this.boolAttr('show-labels', true);
-        const remaining = this.getRemaining();
-        this.className = [
-            'designbase-wc-countdown',
-            `designbase-wc-countdown--${size}`,
-            `designbase-wc-countdown--${variant}`,
-            showLabels && 'designbase-wc-countdown--with-labels',
-            remaining.total <= 0 && 'designbase-wc-countdown--expired',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const labels = {
-            days: this.getAttribute('label-days') || '일',
-            hours: this.getAttribute('label-hours') || '시간',
-            minutes: this.getAttribute('label-minutes') || '분',
-            seconds: this.getAttribute('label-seconds') || '초',
-        };
-        const units = [
-            { key: 'days', value: remaining.days, show: this.boolAttr('show-days', true) },
-            { key: 'hours', value: remaining.hours, show: this.boolAttr('show-hours', true) },
-            { key: 'minutes', value: remaining.minutes, show: this.boolAttr('show-minutes', true) },
-            { key: 'seconds', value: remaining.seconds, show: this.boolAttr('show-seconds', true) },
-        ].filter((item) => item.show);
-        const nodes = [];
-        for (let i = 0; i < units.length; i += 1) {
-            const unit = units[i];
-            const unitEl = document.createElement('div');
-            unitEl.className = 'designbase-wc-countdown__unit';
-            const valueEl = document.createElement('div');
-            valueEl.className = 'designbase-wc-countdown__value';
-            valueEl.textContent = this.two(unit.value);
-            unitEl.append(valueEl);
-            if (showLabels) {
-                const labelEl = document.createElement('div');
-                labelEl.className = 'designbase-wc-countdown__label';
-                labelEl.textContent = labels[unit.key];
-                unitEl.append(labelEl);
-            }
-            nodes.push(unitEl);
-            if (i < units.length - 1 && variant !== 'minimal') {
-                const sep = document.createElement('div');
-                sep.className = 'designbase-wc-countdown__separator';
-                sep.textContent = ':';
-                nodes.push(sep);
-            }
-        }
-        this.replaceChildren(...nodes);
-    }
-}
-if (!customElements.get('db-countdown'))
-    customElements.define('db-countdown', DbCountdown);
-
-export { DbCountdown };
+const t=["s","m","l"],e=["default","compact","minimal"];class DbCountdown extends HTMLElement{constructor(){super(...arguments),this.timer=null,this.targetTime=Date.now()}static get observedAttributes(){return["end-date","duration","size","variant","show-days","show-hours","show-minutes","show-seconds","show-labels"]}connectedCallback(){this.setupTargetTime(),this.start()}disconnectedCallback(){this.stop()}attributeChangedCallback(){this.setupTargetTime(),this.render()}boolAttr(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}optionAttr(t,e,s){const n=this.getAttribute(t);return n&&e.includes(n)?n:s}setupTargetTime(){const t=this.getAttribute("end-date"),e=Number(this.getAttribute("duration"));if(t){const e=new Date(t).getTime();return void(this.targetTime=Number.isFinite(e)?e:Date.now())}Number.isFinite(e)&&e>0?this.targetTime=Date.now()+1e3*e:this.targetTime=Date.now()}getRemaining(){const t=this.targetTime-Date.now();return t<=0?{days:0,hours:0,minutes:0,seconds:0,total:0}:{days:Math.floor(t/864e5),hours:Math.floor(t/36e5%24),minutes:Math.floor(t/6e4%60),seconds:Math.floor(t/1e3%60),total:t}}stop(){null!==this.timer&&(window.clearInterval(this.timer),this.timer=null)}start(){this.stop(),this.render(),this.timer=window.setInterval(()=>{const t=this.getRemaining();this.render(),this.dispatchEvent(new CustomEvent("db-tick",{detail:t,bubbles:!0,composed:!0})),t.total<=0&&(this.stop(),this.dispatchEvent(new CustomEvent("db-complete",{bubbles:!0,composed:!0})))},1e3)}two(t){return String(t).padStart(2,"0")}render(){const s=this.optionAttr("size",t,"m"),n=this.optionAttr("variant",e,"default"),o=this.boolAttr("show-labels",!0),i=this.getRemaining();this.className=["designbase-wc-countdown",`designbase-wc-countdown--${s}`,`designbase-wc-countdown--${n}`,o&&"designbase-wc-countdown--with-labels",i.total<=0&&"designbase-wc-countdown--expired"].filter(Boolean).join(" ");const a={days:this.getAttribute("label-days")||"일",hours:this.getAttribute("label-hours")||"시간",minutes:this.getAttribute("label-minutes")||"분",seconds:this.getAttribute("label-seconds")||"초"},r=[{key:"days",value:i.days,show:this.boolAttr("show-days",!0)},{key:"hours",value:i.hours,show:this.boolAttr("show-hours",!0)},{key:"minutes",value:i.minutes,show:this.boolAttr("show-minutes",!0)},{key:"seconds",value:i.seconds,show:this.boolAttr("show-seconds",!0)}].filter(t=>t.show),d=[];for(let t=0;t<r.length;t+=1){const e=r[t],s=document.createElement("div");s.className="designbase-wc-countdown__unit";const i=document.createElement("div");if(i.className="designbase-wc-countdown__value",i.textContent=this.two(e.value),s.append(i),o){const t=document.createElement("div");t.className="designbase-wc-countdown__label",t.textContent=a[e.key],s.append(t)}if(d.push(s),t<r.length-1&&"minimal"!==n){const t=document.createElement("div");t.className="designbase-wc-countdown__separator",t.textContent=":",d.push(t)}}this.replaceChildren(...d)}}customElements.get("db-countdown")||customElements.define("db-countdown",DbCountdown);export{DbCountdown};