@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,211 @@
-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};
+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 };