@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,211 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-class DbMenuItem extends HTMLElement {
-    static get observedAttributes() {
-        return [
-            'label',
-            'href',
-            'icon',
-            'active',
-            'disabled',
-            'badge',
-            'badge-color',
-            'size',
-            'variant',
-            'type',
-            'menu-style',
-            'expanded',
-            'expandable',
-            'sub-items',
-            'depth',
-        ];
-    }
-    get subItems() {
-        try {
-            return JSON.parse(this.getAttribute('sub-items') || '[]');
-        }
-        catch {
-            return [];
-        }
-    }
-    set subItems(value) {
-        this.setAttribute('sub-items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get expanded() {
-        return this.hasAttribute('expanded');
-    }
-    set expanded(value) {
-        this.toggleAttribute('expanded', value);
-    }
-    connectedCallback() {
-        this.render();
-    }
-    iconSize(size) {
-        if (size === 's')
-            return 16;
-        if (size === 'l')
-            return 24;
-        return 16;
-    }
-    render() {
-        const label = this.getAttribute('label') || '';
-        const href = this.getAttribute('href') || '';
-        const icon = this.getAttribute('icon');
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const type = this.getAttribute('type') || 'block';
-        const menuStyle = this.getAttribute('menu-style') || 'accordion';
-        const depth = Number(this.getAttribute('depth') || 0);
-        const active = this.hasAttribute('active');
-        const disabled = this.hasAttribute('disabled');
-        const badge = this.getAttribute('badge') || '';
-        const badgeColor = this.getAttribute('badge-color') || 'primary';
-        const subItems = this.subItems;
-        const hasChildren = subItems.length > 0;
-        const expandable = this.hasAttribute('expandable') || hasChildren;
-        const expanded = this.expanded;
-        const iconPx = this.iconSize(size);
-        const keepChildrenMounted = menuStyle === 'accordion' && hasChildren;
-        this.className = [
-            'designbase-wc-menu-item',
-            `designbase-wc-menu-item--${type}`,
-            `designbase-wc-menu-item--${size}`,
-            `designbase-wc-menu-item--${variant}`,
-            `designbase-wc-menu-item--${menuStyle}`,
-            `designbase-wc-menu-item--depth-${depth}`,
-            active && 'designbase-wc-menu-item--active',
-            disabled && 'designbase-wc-menu-item--disabled',
-            expandable && 'designbase-wc-menu-item--expandable',
-            expanded && 'designbase-wc-menu-item--expanded',
-            hasChildren && 'designbase-wc-menu-item--with-children',
-            badge && 'designbase-wc-menu-item--with-badge',
-            icon && 'designbase-wc-menu-item--with-icon',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.replaceChildren();
-        const content = document.createElement('div');
-        content.className = [
-            'designbase-wc-menu-item__content',
-            'designbase-wc-menu-item__content--clickable',
-        ].join(' ');
-        if (icon) {
-            const iconWrap = document.createElement('div');
-            iconWrap.className = [
-                'designbase-wc-menu-item__icon',
-                `designbase-wc-menu-item__icon--${variant}`,
-                active && 'designbase-wc-menu-item__icon--active',
-                disabled && 'designbase-wc-menu-item__icon--disabled',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            iconWrap.append(createDbIcon(icon, iconPx));
-            content.append(iconWrap);
-        }
-        const labelEl = document.createElement('span');
-        labelEl.className = 'designbase-wc-menu-item__label';
-        labelEl.textContent = label;
-        content.append(labelEl);
-        if (badge) {
-            const badgeEl = document.createElement('db-badge');
-            badgeEl.setAttribute('size', 's');
-            badgeEl.setAttribute('variant', badgeColor);
-            badgeEl.setAttribute('badge-style', 'number');
-            badgeEl.setAttribute('count', badge);
-            content.append(badgeEl);
-        }
-        if (hasChildren) {
-            const expandIcon = document.createElement('div');
-            expandIcon.className = 'designbase-wc-menu-item__expand-icon';
-            expandIcon.append(createDbIcon(expanded ? 'chevron-up' : 'chevron-down', 16));
-            content.append(expandIcon);
-        }
-        content.addEventListener('click', (event) => {
-            if (disabled)
-                return;
-            if (hasChildren && expandable) {
-                event.preventDefault();
-                this.expanded = !this.expanded;
-            }
-            else if (href) {
-                window.location.href = href;
-            }
-            this.dispatchEvent(new CustomEvent('db-click', {
-                detail: { label, href, expanded: this.expanded },
-                bubbles: true,
-                composed: true,
-            }));
-        });
-        this.append(content);
-        if (hasChildren && (expanded || keepChildrenMounted)) {
-            const children = document.createElement('div');
-            children.className = `designbase-wc-menu-item__children designbase-wc-menu-item__children--${menuStyle}`;
-            if (keepChildrenMounted) {
-                children.setAttribute('aria-hidden', expanded ? 'false' : 'true');
-            }
-            subItems.forEach((child) => {
-                const childMenuItem = document.createElement('db-menu-item');
-                childMenuItem.setAttribute('label', child.label);
-                childMenuItem.setAttribute('type', 'block');
-                childMenuItem.setAttribute('menu-style', menuStyle);
-                childMenuItem.setAttribute('size', size);
-                childMenuItem.setAttribute('depth', String(depth + 1));
-                if (child.href)
-                    childMenuItem.setAttribute('href', child.href);
-                if (child.icon)
-                    childMenuItem.setAttribute('icon', child.icon);
-                if (child.active)
-                    childMenuItem.setAttribute('active', '');
-                if (child.disabled)
-                    childMenuItem.setAttribute('disabled', '');
-                if (child.badge !== undefined)
-                    childMenuItem.setAttribute('badge', String(child.badge));
-                if (child.badgeColor)
-                    childMenuItem.setAttribute('badge-color', child.badgeColor);
-                if (child.variant)
-                    childMenuItem.setAttribute('variant', child.variant);
-                childMenuItem.addEventListener('db-click', (event) => {
-                    event.stopPropagation();
-                    if (child.disabled)
-                        return;
-                    this.dispatchEvent(new CustomEvent('db-child-click', {
-                        detail: { child },
-                        bubbles: true,
-                        composed: true,
-                    }));
-                });
-                children.append(childMenuItem);
-            });
-            this.append(children);
-        }
-    }
-    attributeChangedCallback(name) {
-        if (!this.isConnected)
-            return;
-        if (name === 'expanded' && this.getAttribute('menu-style') === 'accordion') {
-            this.syncExpandedState();
-            return;
-        }
-        this.render();
-    }
-    syncExpandedState() {
-        const expanded = this.expanded;
-        this.classList.toggle('designbase-wc-menu-item--expanded', expanded);
-        const expandIcon = this.querySelector('.designbase-wc-menu-item__expand-icon');
-        if (expandIcon) {
-            expandIcon.replaceChildren(createDbIcon(expanded ? 'chevron-up' : 'chevron-down', 16));
-        }
-        const children = this.querySelector('.designbase-wc-menu-item__children--accordion');
-        if (children) {
-            children.setAttribute('aria-hidden', expanded ? 'false' : 'true');
-        }
-        else if (expanded && this.subItems.length) {
-            this.render();
-        }
-    }
-}
-if (!customElements.get('db-menu-item')) {
-    customElements.define('db-menu-item', DbMenuItem);
-}
-
-export { DbMenuItem };
+import{createDbIcon as e}from"./db-icons.js";class DbMenuItem extends HTMLElement{static get observedAttributes(){return["label","href","icon","active","disabled","badge","badge-color","size","variant","type","menu-style","expanded","expandable","sub-items","depth"]}get subItems(){try{return JSON.parse(this.getAttribute("sub-items")||"[]")}catch{return[]}}set subItems(e){this.setAttribute("sub-items","string"==typeof e?e:JSON.stringify(e))}get expanded(){return this.hasAttribute("expanded")}set expanded(e){this.toggleAttribute("expanded",e)}connectedCallback(){this.render()}iconSize(e){return"s"===e?16:"l"===e?24:16}render(){const t=this.getAttribute("label")||"",i=this.getAttribute("href")||"",n=this.getAttribute("icon"),s=this.getAttribute("size")||"m",a=this.getAttribute("variant")||"default",d=this.getAttribute("type")||"block",c=this.getAttribute("menu-style")||"accordion",r=Number(this.getAttribute("depth")||0),b=this.hasAttribute("active"),u=this.hasAttribute("disabled"),m=this.getAttribute("badge")||"",o=this.getAttribute("badge-color")||"primary",l=this.subItems,h=l.length>0,g=this.hasAttribute("expandable")||h,p=this.expanded,A=this.iconSize(s),w="accordion"===c&&h;this.className=["designbase-wc-menu-item",`designbase-wc-menu-item--${d}`,`designbase-wc-menu-item--${s}`,`designbase-wc-menu-item--${a}`,`designbase-wc-menu-item--${c}`,`designbase-wc-menu-item--depth-${r}`,b&&"designbase-wc-menu-item--active",u&&"designbase-wc-menu-item--disabled",g&&"designbase-wc-menu-item--expandable",p&&"designbase-wc-menu-item--expanded",h&&"designbase-wc-menu-item--with-children",m&&"designbase-wc-menu-item--with-badge",n&&"designbase-wc-menu-item--with-icon"].filter(Boolean).join(" "),this.replaceChildren();const v=document.createElement("div");if(v.className=["designbase-wc-menu-item__content","designbase-wc-menu-item__content--clickable"].join(" "),n){const t=document.createElement("div");t.className=["designbase-wc-menu-item__icon",`designbase-wc-menu-item__icon--${a}`,b&&"designbase-wc-menu-item__icon--active",u&&"designbase-wc-menu-item__icon--disabled"].filter(Boolean).join(" "),t.append(e(n,A)),v.append(t)}const x=document.createElement("span");if(x.className="designbase-wc-menu-item__label",x.textContent=t,v.append(x),m){const e=document.createElement("db-badge");e.setAttribute("size","s"),e.setAttribute("variant",o),e.setAttribute("badge-style","number"),e.setAttribute("count",m),v.append(e)}if(h){const t=document.createElement("div");t.className="designbase-wc-menu-item__expand-icon",t.append(e(p?"chevron-up":"chevron-down",16)),v.append(t)}if(v.addEventListener("click",e=>{u||(h&&g?(e.preventDefault(),this.expanded=!this.expanded):i&&(window.location.href=i),this.dispatchEvent(new CustomEvent("db-click",{detail:{label:t,href:i,expanded:this.expanded},bubbles:!0,composed:!0})))}),this.append(v),h&&(p||w)){const e=document.createElement("div");e.className=`designbase-wc-menu-item__children designbase-wc-menu-item__children--${c}`,w&&e.setAttribute("aria-hidden",p?"false":"true"),l.forEach(t=>{const i=document.createElement("db-menu-item");i.setAttribute("label",t.label),i.setAttribute("type","block"),i.setAttribute("menu-style",c),i.setAttribute("size",s),i.setAttribute("depth",String(r+1)),t.href&&i.setAttribute("href",t.href),t.icon&&i.setAttribute("icon",t.icon),t.active&&i.setAttribute("active",""),t.disabled&&i.setAttribute("disabled",""),void 0!==t.badge&&i.setAttribute("badge",String(t.badge)),t.badgeColor&&i.setAttribute("badge-color",t.badgeColor),t.variant&&i.setAttribute("variant",t.variant),i.addEventListener("db-click",e=>{e.stopPropagation(),t.disabled||this.dispatchEvent(new CustomEvent("db-child-click",{detail:{child:t},bubbles:!0,composed:!0}))}),e.append(i)}),this.append(e)}}attributeChangedCallback(e){this.isConnected&&("expanded"!==e||"accordion"!==this.getAttribute("menu-style")?this.render():this.syncExpandedState())}syncExpandedState(){const t=this.expanded;this.classList.toggle("designbase-wc-menu-item--expanded",t);const i=this.querySelector(".designbase-wc-menu-item__expand-icon");i&&i.replaceChildren(e(t?"chevron-up":"chevron-down",16));const n=this.querySelector(".designbase-wc-menu-item__children--accordion");n?n.setAttribute("aria-hidden",t?"false":"true"):t&&this.subItems.length&&this.render()}}customElements.get("db-menu-item")||customElements.define("db-menu-item",DbMenuItem);export{DbMenuItem};