@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,66 @@
-const t=["primary","secondary","success","warning","danger","muted"];class DbDivider extends HTMLElement{static get observedAttributes(){return["orientation","thickness","color","length","variant","margin"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("orientation")||"horizontal",i=this.getAttribute("variant")||"solid",s=Number(this.getAttribute("thickness")||1),r=this.getAttribute("color"),d=this.getAttribute("length"),n=this.getAttribute("margin");this.className=["designbase-wc-divider",`designbase-wc-divider--${e}`,`designbase-wc-divider--${i}`,r&&t.includes(r)?`designbase-wc-divider--${r}`:""].filter(Boolean).join(" "),this.setAttribute("role","separator"),this.setAttribute("aria-orientation",e),this.style.border="none",this.style.background="none",this.style.margin="",this.style.width="",this.style.height="","vertical"===e?(this.style.display="inline-block",this.style.borderLeft=`${s}px ${i} var(--db-border-base)`,this.style.verticalAlign="middle",d&&(this.style.height=d.endsWith("px")||d.endsWith("%")?d:`${d}px`)):(this.style.display="block",this.style.width="100%",this.style.borderTop=`${s}px ${i} var(--db-border-base)`),r&&!t.includes(r)&&("vertical"===e?this.style.borderLeftColor=r:this.style.borderTopColor=r),n&&(this.style.margin=/^\d+$/.test(n)?`${n}px`:n)}}customElements.get("db-divider")||customElements.define("db-divider",DbDivider);export{DbDivider};
+const COLOR_PRESETS = ['primary', 'secondary', 'success', 'warning', 'danger', 'muted'];
+class DbDivider extends HTMLElement {
+    static get observedAttributes() {
+        return ['orientation', 'thickness', 'color', 'length', 'variant', 'margin'];
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+    render() {
+        const orientation = this.getAttribute('orientation') || 'horizontal';
+        const variant = this.getAttribute('variant') || 'solid';
+        const thickness = Number(this.getAttribute('thickness') || 1);
+        const color = this.getAttribute('color');
+        const length = this.getAttribute('length');
+        const margin = this.getAttribute('margin');
+        this.className = [
+            'designbase-wc-divider',
+            `designbase-wc-divider--${orientation}`,
+            `designbase-wc-divider--${variant}`,
+            color && COLOR_PRESETS.includes(color)
+                ? `designbase-wc-divider--${color}`
+                : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.setAttribute('role', 'separator');
+        this.setAttribute('aria-orientation', orientation);
+        this.style.border = 'none';
+        this.style.background = 'none';
+        this.style.margin = '';
+        this.style.width = '';
+        this.style.height = '';
+        if (orientation === 'vertical') {
+            this.style.display = 'inline-block';
+            this.style.borderLeft = `${thickness}px ${variant} var(--db-border-base)`;
+            this.style.verticalAlign = 'middle';
+            if (length) {
+                this.style.height = length.endsWith('px') || length.endsWith('%') ? length : `${length}px`;
+            }
+        }
+        else {
+            this.style.display = 'block';
+            this.style.width = '100%';
+            this.style.borderTop = `${thickness}px ${variant} var(--db-border-base)`;
+        }
+        if (color && !COLOR_PRESETS.includes(color)) {
+            if (orientation === 'vertical') {
+                this.style.borderLeftColor = color;
+            }
+            else {
+                this.style.borderTopColor = color;
+            }
+        }
+        if (margin) {
+            this.style.margin = /^\d+$/.test(margin) ? `${margin}px` : margin;
+        }
+    }
+}
+if (!customElements.get('db-divider')) {
+    customElements.define('db-divider', DbDivider);
+}
+
+export { DbDivider };

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

@@ -1 +1,245 @@
-const t=["left","right","top","bottom"],e=["s","m","l","xl","full"];class DbDrawer extends HTMLElement{constructor(){super(...arguments),this.isMounted=!1,this.isActive=!1,this.previousActiveElement=null,this.keyHandler=null}static get observedAttributes(){return["open","title","position","size","show-close-button","close-on-backdrop-click","close-on-escape","animation-duration","show-overlay","overlay-closable","z-index","trap-focus","drawer-id"]}connectedCallback(){this.style.display="contents",this.render(),this.syncOpenState()}disconnectedCallback(){this.clearTimers(),this.detachEscape(),this.root?.remove(),this.root=void 0,document.body.style.overflow="",this.previousActiveElement&&this.previousActiveElement.focus()}attributeChangedCallback(t){this.isConnected&&("open"!==t?(this.render(),this.isMounted&&this.syncActiveClasses()):this.syncOpenState())}isOpenRequested(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}clearTimers(){null!=this.enterFrame&&(cancelAnimationFrame(this.enterFrame),this.enterFrame=void 0),this.exitTimer&&(clearTimeout(this.exitTimer),this.exitTimer=void 0)}attachEscape(){this.keyHandler||(this.keyHandler=t=>{"Escape"===t.key&&"false"!==this.getAttribute("close-on-escape")&&this.close()},document.addEventListener("keydown",this.keyHandler))}detachEscape(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}close(){this.setAttribute("open","false"),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}collectChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"))}syncOpenState(){const t=this.isOpenRequested(),e=Number(this.getAttribute("animation-duration")||300);if(this.clearTimers(),t)return this.render(),this.isMounted=!0,this.isActive=!1,this.syncActiveClasses(),this.root&&!this.root.isConnected&&document.body.append(this.root),"false"!==this.getAttribute("trap-focus")&&(this.previousActiveElement=document.activeElement),this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=void 0,this.isActive=!0,this.syncActiveClasses(),"false"!==this.getAttribute("trap-focus")&&this.container?.focus()})}),document.body.style.overflow="hidden",void this.attachEscape();this.isActive=!1,this.syncActiveClasses(),this.exitTimer=setTimeout(()=>{this.exitTimer=void 0,this.isMounted=!1,this.syncActiveClasses(),this.root?.remove(),document.body.style.overflow="",this.detachEscape(),"false"!==this.getAttribute("trap-focus")&&this.previousActiveElement&&(this.previousActiveElement.focus(),this.previousActiveElement=null)},e),this.detachEscape()}syncActiveClasses(){this.root&&(this.root.classList.toggle("designbase-wc-drawer--open",this.isActive),this.root.classList.toggle("designbase-wc-drawer--closing",this.isMounted&&!this.isActive),this.overlay?.classList.toggle("designbase-wc-drawer__overlay--open",this.isActive),this.container?.classList.toggle("designbase-wc-drawer__container--open",this.isActive))}render(){const i=t.includes(this.getAttribute("position")||"right")&&this.getAttribute("position")||"right",s=e.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",r=this.getAttribute("title"),n="false"!==this.getAttribute("show-close-button"),o="false"!==this.getAttribute("show-overlay"),a=this.getAttribute("animation-duration")||"300",c=this.getAttribute("z-index")||"1000",l=this.getAttribute("drawer-id")||"drawer",h=this.collectChildren();this.root||(this.root=document.createElement("div"),this.root.setAttribute("data-wc-internal",""),this.overlay=document.createElement("div"),this.overlay.className="designbase-wc-drawer__overlay",this.overlay.setAttribute("aria-hidden","true"),this.overlay.addEventListener("click",t=>{if(t.target!==this.overlay)return;const e="false"!==this.getAttribute("overlay-closable"),i="false"!==this.getAttribute("close-on-backdrop-click");e&&i&&this.close()}),this.container=document.createElement("div"),this.container.className=`designbase-wc-drawer__container designbase-wc-drawer__container--${i}`,this.container.setAttribute("role","dialog"),this.container.setAttribute("aria-modal","true"),this.container.tabIndex=-1,this.container.addEventListener("click",t=>t.stopPropagation()),this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-drawer__content",this.container.append(this.contentEl)),this.root.className=["designbase-wc-drawer",`designbase-wc-drawer--${i}`,`designbase-wc-drawer--${s}`].join(" "),this.root.style.setProperty("--drawer-animation-duration",`${a}ms`),this.root.style.setProperty("--drawer-z-index",c),this.container.className=`designbase-wc-drawer__container designbase-wc-drawer__container--${i}`,this.container.id=l,r?this.container.setAttribute("aria-labelledby",`${l}-title`):this.container.removeAttribute("aria-labelledby"),this.contentEl.id=`${l}-content`,this.root.replaceChildren(),o&&this.overlay&&this.root.append(this.overlay);if(Boolean(r)||n){const t=document.createElement("div");if(t.className="designbase-wc-drawer__header",r){const e=document.createElement("h2");e.className="designbase-wc-drawer__title",e.id=`${l}-title`,e.textContent=r,t.append(e)}if(n){const e=document.createElement("db-button");e.className="designbase-wc-drawer__close-button",e.setAttribute("variant","ghost"),e.setAttribute("size","s"),e.setAttribute("icon-only",""),e.setAttribute("start-icon","close"),e.setAttribute("aria-label","닫기"),e.addEventListener("db-click",t=>{t.stopPropagation(),this.close()}),t.append(e)}this.container.replaceChildren(t,this.contentEl)}else this.container.replaceChildren(this.contentEl);this.contentEl.replaceChildren(...h),this.root.append(this.container),this.isMounted&&!this.root.isConnected&&document.body.append(this.root)}}customElements.get("db-drawer")||customElements.define("db-drawer",DbDrawer);export{DbDrawer};
+const POSITIONS = ['left', 'right', 'top', 'bottom'];
+const SIZES = ['s', 'm', 'l', 'xl', 'full'];
+class DbDrawer extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.isMounted = false;
+        this.isActive = false;
+        this.previousActiveElement = null;
+        this.keyHandler = null;
+    }
+    static get observedAttributes() {
+        return [
+            'open',
+            'title',
+            'position',
+            'size',
+            'show-close-button',
+            'close-on-backdrop-click',
+            'close-on-escape',
+            'animation-duration',
+            'show-overlay',
+            'overlay-closable',
+            'z-index',
+            'trap-focus',
+            'drawer-id',
+        ];
+    }
+    connectedCallback() {
+        this.style.display = 'contents';
+        this.render();
+        this.syncOpenState();
+    }
+    disconnectedCallback() {
+        this.clearTimers();
+        this.detachEscape();
+        this.root?.remove();
+        this.root = undefined;
+        document.body.style.overflow = '';
+        if (this.previousActiveElement) {
+            this.previousActiveElement.focus();
+        }
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === 'open') {
+            this.syncOpenState();
+            return;
+        }
+        this.render();
+        if (this.isMounted) {
+            this.syncActiveClasses();
+        }
+    }
+    isOpenRequested() {
+        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
+    }
+    clearTimers() {
+        if (this.enterFrame != null) {
+            cancelAnimationFrame(this.enterFrame);
+            this.enterFrame = undefined;
+        }
+        if (this.exitTimer) {
+            clearTimeout(this.exitTimer);
+            this.exitTimer = undefined;
+        }
+    }
+    attachEscape() {
+        if (this.keyHandler)
+            return;
+        this.keyHandler = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            if (this.getAttribute('close-on-escape') === 'false')
+                return;
+            this.close();
+        };
+        document.addEventListener('keydown', this.keyHandler);
+    }
+    detachEscape() {
+        if (!this.keyHandler)
+            return;
+        document.removeEventListener('keydown', this.keyHandler);
+        this.keyHandler = null;
+    }
+    close() {
+        this.setAttribute('open', 'false');
+        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
+    }
+    collectChildren() {
+        return Array.from(this.children).filter((child) => !child.hasAttribute('data-wc-internal'));
+    }
+    syncOpenState() {
+        const shouldOpen = this.isOpenRequested();
+        const duration = Number(this.getAttribute('animation-duration') || 300);
+        this.clearTimers();
+        if (shouldOpen) {
+            this.render();
+            this.isMounted = true;
+            this.isActive = false;
+            this.syncActiveClasses();
+            if (this.root && !this.root.isConnected) {
+                document.body.append(this.root);
+            }
+            if (this.getAttribute('trap-focus') !== 'false') {
+                this.previousActiveElement = document.activeElement;
+            }
+            this.enterFrame = requestAnimationFrame(() => {
+                this.enterFrame = requestAnimationFrame(() => {
+                    this.enterFrame = undefined;
+                    this.isActive = true;
+                    this.syncActiveClasses();
+                    if (this.getAttribute('trap-focus') !== 'false') {
+                        this.container?.focus();
+                    }
+                });
+            });
+            document.body.style.overflow = 'hidden';
+            this.attachEscape();
+            return;
+        }
+        this.isActive = false;
+        this.syncActiveClasses();
+        this.exitTimer = setTimeout(() => {
+            this.exitTimer = undefined;
+            this.isMounted = false;
+            this.syncActiveClasses();
+            this.root?.remove();
+            document.body.style.overflow = '';
+            this.detachEscape();
+            if (this.getAttribute('trap-focus') !== 'false' && this.previousActiveElement) {
+                this.previousActiveElement.focus();
+                this.previousActiveElement = null;
+            }
+        }, duration);
+        this.detachEscape();
+    }
+    syncActiveClasses() {
+        if (!this.root)
+            return;
+        this.root.classList.toggle('designbase-wc-drawer--open', this.isActive);
+        this.root.classList.toggle('designbase-wc-drawer--closing', this.isMounted && !this.isActive);
+        this.overlay?.classList.toggle('designbase-wc-drawer__overlay--open', this.isActive);
+        this.container?.classList.toggle('designbase-wc-drawer__container--open', this.isActive);
+    }
+    render() {
+        const position = POSITIONS.includes((this.getAttribute('position') || 'right'))
+            ? this.getAttribute('position') || 'right'
+            : 'right';
+        const size = SIZES.includes((this.getAttribute('size') || 'm'))
+            ? this.getAttribute('size') || 'm'
+            : 'm';
+        const title = this.getAttribute('title');
+        const showClose = this.getAttribute('show-close-button') !== 'false';
+        const showOverlay = this.getAttribute('show-overlay') !== 'false';
+        const animationDuration = this.getAttribute('animation-duration') || '300';
+        const zIndex = this.getAttribute('z-index') || '1000';
+        const drawerId = this.getAttribute('drawer-id') || 'drawer';
+        const userChildren = this.collectChildren();
+        if (!this.root) {
+            this.root = document.createElement('div');
+            this.root.setAttribute('data-wc-internal', '');
+            this.overlay = document.createElement('div');
+            this.overlay.className = 'designbase-wc-drawer__overlay';
+            this.overlay.setAttribute('aria-hidden', 'true');
+            this.overlay.addEventListener('click', (event) => {
+                if (event.target !== this.overlay)
+                    return;
+                const overlayClosable = this.getAttribute('overlay-closable') !== 'false';
+                const closeOnBackdrop = this.getAttribute('close-on-backdrop-click') !== 'false';
+                if (overlayClosable && closeOnBackdrop)
+                    this.close();
+            });
+            this.container = document.createElement('div');
+            this.container.className = `designbase-wc-drawer__container designbase-wc-drawer__container--${position}`;
+            this.container.setAttribute('role', 'dialog');
+            this.container.setAttribute('aria-modal', 'true');
+            this.container.tabIndex = -1;
+            this.container.addEventListener('click', (event) => event.stopPropagation());
+            this.contentEl = document.createElement('div');
+            this.contentEl.className = 'designbase-wc-drawer__content';
+            this.container.append(this.contentEl);
+        }
+        this.root.className = [
+            'designbase-wc-drawer',
+            `designbase-wc-drawer--${position}`,
+            `designbase-wc-drawer--${size}`,
+        ].join(' ');
+        this.root.style.setProperty('--drawer-animation-duration', `${animationDuration}ms`);
+        this.root.style.setProperty('--drawer-z-index', zIndex);
+        this.container.className = `designbase-wc-drawer__container designbase-wc-drawer__container--${position}`;
+        this.container.id = drawerId;
+        if (title) {
+            this.container.setAttribute('aria-labelledby', `${drawerId}-title`);
+        }
+        else {
+            this.container.removeAttribute('aria-labelledby');
+        }
+        this.contentEl.id = `${drawerId}-content`;
+        this.root.replaceChildren();
+        if (showOverlay && this.overlay) {
+            this.root.append(this.overlay);
+        }
+        const headerNeeded = Boolean(title) || showClose;
+        if (headerNeeded) {
+            const header = document.createElement('div');
+            header.className = 'designbase-wc-drawer__header';
+            if (title) {
+                const heading = document.createElement('h2');
+                heading.className = 'designbase-wc-drawer__title';
+                heading.id = `${drawerId}-title`;
+                heading.textContent = title;
+                header.append(heading);
+            }
+            if (showClose) {
+                const close = document.createElement('db-button');
+                close.className = 'designbase-wc-drawer__close-button';
+                close.setAttribute('variant', 'ghost');
+                close.setAttribute('size', 's');
+                close.setAttribute('icon-only', '');
+                close.setAttribute('start-icon', 'close');
+                close.setAttribute('aria-label', '닫기');
+                close.addEventListener('db-click', (event) => {
+                    event.stopPropagation();
+                    this.close();
+                });
+                header.append(close);
+            }
+            this.container.replaceChildren(header, this.contentEl);
+        }
+        else {
+            this.container.replaceChildren(this.contentEl);
+        }
+        this.contentEl.replaceChildren(...userChildren);
+        this.root.append(this.container);
+        if (this.isMounted && !this.root.isConnected) {
+            document.body.append(this.root);
+        }
+    }
+}
+if (!customElements.get('db-drawer')) {
+    customElements.define('db-drawer', DbDrawer);
+}
+
+export { DbDrawer };