@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,94 +1 @@
-const VARIANTS = ['text', 'circular', 'rectangular', 'rounded'];
-const SIZES = ['xs', 's', 'm', 'l', 'xl'];
-function getDefaultSize(variant, size) {
-    if (variant === 'circular') {
-        switch (size) {
-            case 'xs': return '16px';
-            case 's': return '24px';
-            case 'l': return '48px';
-            case 'xl': return '64px';
-            default: return '32px';
-        }
-    }
-    switch (size) {
-        case 'xs': return '12px';
-        case 's': return '16px';
-        case 'l': return '24px';
-        case 'xl': return '32px';
-        default: return '20px';
-    }
-}
-function getTextLineHeight(size) {
-    switch (size) {
-        case 'xs': return '12px';
-        case 's': return '16px';
-        case 'l': return '24px';
-        case 'xl': return '32px';
-        default: return '20px';
-    }
-}
-function toCssSize(value) {
-    return /^\d+$/.test(value) ? `${value}px` : value;
-}
-class DbSkeleton extends HTMLElement {
-    static get observedAttributes() {
-        return ['variant', 'size', 'width', 'height', 'animation', 'lines', 'line-spacing', 'last-line-width', 'aria-label'];
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback() {
-        if (!this.isConnected)
-            return;
-        this.render();
-    }
-    render() {
-        const variant = this.getAttribute('variant') || 'text';
-        const size = this.getAttribute('size') || 'm';
-        const animation = this.getAttribute('animation') || 'pulse';
-        const lines = Number(this.getAttribute('lines') || 1);
-        const width = this.getAttribute('width');
-        const height = this.getAttribute('height');
-        const lineSpacing = this.getAttribute('line-spacing') || '8px';
-        const lastLineWidth = this.getAttribute('last-line-width') || '60%';
-        const resolvedVariant = VARIANTS.includes(variant) ? variant : 'text';
-        const resolvedSize = SIZES.includes(size) ? size : 'm';
-        const nextClassName = [
-            'designbase-wc-skeleton',
-            `designbase-wc-skeleton--${resolvedVariant}`,
-            `designbase-wc-skeleton--${resolvedSize}`,
-            `designbase-wc-skeleton--${animation}`,
-            (width || height) && 'designbase-wc-skeleton--custom-size',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        if (this.className !== nextClassName) {
-            this.className = nextClassName;
-        }
-        const nextAriaLabel = this.getAttribute('aria-label') ?? `${resolvedVariant} 스켈레톤 로딩 중`;
-        if (this.getAttribute('aria-label') !== nextAriaLabel) {
-            this.setAttribute('aria-label', nextAriaLabel);
-        }
-        this.setAttribute('role', 'status');
-        this.setAttribute('aria-live', 'polite');
-        this.replaceChildren();
-        this.style.width = width ? toCssSize(width) : (resolvedVariant === 'circular' ? getDefaultSize(resolvedVariant, resolvedSize) : '100%');
-        this.style.height = height
-            ? toCssSize(height)
-            : (resolvedVariant === 'circular' ? getDefaultSize(resolvedVariant, resolvedSize) : getTextLineHeight(resolvedSize));
-        if (resolvedVariant === 'text' && lines > 1) {
-            for (let index = 1; index < lines; index += 1) {
-                const line = document.createElement('div');
-                line.className = 'designbase-wc-skeleton__line';
-                line.style.marginTop = toCssSize(lineSpacing);
-                if (index === lines - 1)
-                    line.style.width = toCssSize(lastLineWidth);
-                this.append(line);
-            }
-        }
-    }
-}
-if (!customElements.get('db-skeleton'))
-    customElements.define('db-skeleton', DbSkeleton);
-
-export { DbSkeleton };
+const e=["text","circular","rectangular","rounded"],t=["xs","s","m","l","xl"];function getDefaultSize(e,t){if("circular"===e)switch(t){case"xs":return"16px";case"s":return"24px";case"l":return"48px";case"xl":return"64px";default:return"32px"}switch(t){case"xs":return"12px";case"s":return"16px";case"l":return"24px";case"xl":return"32px";default:return"20px"}}function toCssSize(e){return/^\d+$/.test(e)?`${e}px`:e}class DbSkeleton extends HTMLElement{static get observedAttributes(){return["variant","size","width","height","animation","lines","line-spacing","last-line-width","aria-label"]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}render(){const s=this.getAttribute("variant")||"text",i=this.getAttribute("size")||"m",n=this.getAttribute("animation")||"pulse",r=Number(this.getAttribute("lines")||1),a=this.getAttribute("width"),l=this.getAttribute("height"),c=this.getAttribute("line-spacing")||"8px",u=this.getAttribute("last-line-width")||"60%",o=e.includes(s)?s:"text",h=t.includes(i)?i:"m",d=["designbase-wc-skeleton",`designbase-wc-skeleton--${o}`,`designbase-wc-skeleton--${h}`,`designbase-wc-skeleton--${n}`,(a||l)&&"designbase-wc-skeleton--custom-size"].filter(Boolean).join(" ");this.className!==d&&(this.className=d);const b=this.getAttribute("aria-label")??`${o} 스켈레톤 로딩 중`;if(this.getAttribute("aria-label")!==b&&this.setAttribute("aria-label",b),this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.replaceChildren(),this.style.width=a?toCssSize(a):"circular"===o?getDefaultSize(o,h):"100%",this.style.height=l?toCssSize(l):"circular"===o?getDefaultSize(o,h):function getTextLineHeight(e){switch(e){case"xs":return"12px";case"s":return"16px";case"l":return"24px";case"xl":return"32px";default:return"20px"}}(h),"text"===o&&r>1)for(let e=1;e<r;e+=1){const t=document.createElement("div");t.className="designbase-wc-skeleton__line",t.style.marginTop=toCssSize(c),e===r-1&&(t.style.width=toCssSize(u)),this.append(t)}}}customElements.get("db-skeleton")||customElements.define("db-skeleton",DbSkeleton);export{DbSkeleton};

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

@@ -1,102 +1 @@
-const TYPES = ['circular', 'dots', 'bars', 'pulse', 'ripple'];
-const SIZES = ['xs', 's', 'm', 'l', 'xl'];
-class DbSpinner extends HTMLElement {
-    static get observedAttributes() {
-        return ['type', 'size', 'color', 'speed', 'label', 'show-label'];
-    }
-    get type() {
-        return this.getAttribute('type') || 'circular';
-    }
-    set type(value) {
-        this.setAttribute('type', value);
-    }
-    get size() {
-        return this.getAttribute('size') || 'm';
-    }
-    set size(value) {
-        this.setAttribute('size', value);
-    }
-    get color() {
-        return this.getAttribute('color') || '';
-    }
-    set color(value) {
-        if (value)
-            this.setAttribute('color', value);
-        else
-            this.removeAttribute('color');
-    }
-    get speed() {
-        return Number(this.getAttribute('speed') || 1);
-    }
-    set speed(value) {
-        this.setAttribute('speed', String(value));
-    }
-    get label() {
-        return this.getAttribute('label') || '로딩 중...';
-    }
-    set label(value) {
-        this.setAttribute('label', value);
-    }
-    get showLabel() {
-        return this.hasAttribute('show-label');
-    }
-    set showLabel(value) {
-        this.toggleAttribute('show-label', value);
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-    render() {
-        this.className = Array.from(this.classList)
-            .filter((className) => !className.startsWith('designbase-wc-spinner'))
-            .join(' ');
-        this.classList.add('designbase-wc-spinner');
-        this.classList.add(`designbase-wc-spinner--${TYPES.includes(this.type) ? this.type : 'circular'}`);
-        this.classList.add(`designbase-wc-spinner--${SIZES.includes(this.size) ? this.size : 'm'}`);
-        this.setAttribute('role', 'status');
-        this.setAttribute('aria-live', 'polite');
-        this.setAttribute('aria-busy', 'true');
-        if (this.showLabel)
-            this.setAttribute('aria-label', this.label);
-        this.style.setProperty('--spinner-speed', `${this.speed}s`);
-        if (this.color)
-            this.style.setProperty('--spinner-color', this.color);
-        else
-            this.style.removeProperty('--spinner-color');
-        this.innerHTML = `${this.renderSpinner()}${this.showLabel && this.label
-            ? `<span class="designbase-wc-spinner__label" aria-hidden="true">${this.escape(this.label)}</span>`
-            : ''}`;
-    }
-    renderSpinner() {
-        switch (this.type) {
-            case 'dots':
-                return '<span class="designbase-wc-spinner__dots" aria-hidden="true"><span class="designbase-wc-spinner__dot"></span><span class="designbase-wc-spinner__dot"></span><span class="designbase-wc-spinner__dot"></span></span>';
-            case 'bars':
-                return '<span class="designbase-wc-spinner__bars" aria-hidden="true"><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span></span>';
-            case 'pulse':
-                return '<span class="designbase-wc-spinner__pulse" aria-hidden="true"></span>';
-            case 'ripple':
-                return '<span class="designbase-wc-spinner__ripple" aria-hidden="true"><span class="designbase-wc-spinner__ripple-circle"></span><span class="designbase-wc-spinner__ripple-circle"></span></span>';
-            case 'circular':
-            default:
-                return '<svg class="designbase-wc-spinner__circular" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="designbase-wc-spinner__circular-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle><circle class="designbase-wc-spinner__circular-indicator" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></circle></svg>';
-        }
-    }
-    escape(value) {
-        return value.replace(/[&<>"']/g, (char) => ({
-            '&': '&amp;',
-            '<': '&lt;',
-            '>': '&gt;',
-            '"': '&quot;',
-            "'": '&#39;',
-        }[char] || char));
-    }
-}
-if (!customElements.get('db-spinner')) {
-    customElements.define('db-spinner', DbSpinner);
-}
-
-export { DbSpinner };
+const s=["circular","dots","bars","pulse","ripple"],e=["xs","s","m","l","xl"];class DbSpinner extends HTMLElement{static get observedAttributes(){return["type","size","color","speed","label","show-label"]}get type(){return this.getAttribute("type")||"circular"}set type(s){this.setAttribute("type",s)}get size(){return this.getAttribute("size")||"m"}set size(s){this.setAttribute("size",s)}get color(){return this.getAttribute("color")||""}set color(s){s?this.setAttribute("color",s):this.removeAttribute("color")}get speed(){return Number(this.getAttribute("speed")||1)}set speed(s){this.setAttribute("speed",String(s))}get label(){return this.getAttribute("label")||"로딩 중..."}set label(s){this.setAttribute("label",s)}get showLabel(){return this.hasAttribute("show-label")}set showLabel(s){this.toggleAttribute("show-label",s)}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){this.className=Array.from(this.classList).filter(s=>!s.startsWith("designbase-wc-spinner")).join(" "),this.classList.add("designbase-wc-spinner"),this.classList.add(`designbase-wc-spinner--${s.includes(this.type)?this.type:"circular"}`),this.classList.add(`designbase-wc-spinner--${e.includes(this.size)?this.size:"m"}`),this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.setAttribute("aria-busy","true"),this.showLabel&&this.setAttribute("aria-label",this.label),this.style.setProperty("--spinner-speed",`${this.speed}s`),this.color?this.style.setProperty("--spinner-color",this.color):this.style.removeProperty("--spinner-color"),this.innerHTML=`${this.renderSpinner()}${this.showLabel&&this.label?`<span class="designbase-wc-spinner__label" aria-hidden="true">${this.escape(this.label)}</span>`:""}`}renderSpinner(){switch(this.type){case"dots":return'<span class="designbase-wc-spinner__dots" aria-hidden="true"><span class="designbase-wc-spinner__dot"></span><span class="designbase-wc-spinner__dot"></span><span class="designbase-wc-spinner__dot"></span></span>';case"bars":return'<span class="designbase-wc-spinner__bars" aria-hidden="true"><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span></span>';case"pulse":return'<span class="designbase-wc-spinner__pulse" aria-hidden="true"></span>';case"ripple":return'<span class="designbase-wc-spinner__ripple" aria-hidden="true"><span class="designbase-wc-spinner__ripple-circle"></span><span class="designbase-wc-spinner__ripple-circle"></span></span>';default:return'<svg class="designbase-wc-spinner__circular" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="designbase-wc-spinner__circular-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle><circle class="designbase-wc-spinner__circular-indicator" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></circle></svg>'}}escape(s){return s.replace(/[&<>"']/g,s=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[s]||s))}}customElements.get("db-spinner")||customElements.define("db-spinner",DbSpinner);export{DbSpinner};

package/dist/esm/components/db-split-view.js

@@ -1,297 +1 @@
-class DbSplitView extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.panelSizes = [];
-        this.draggingIndex = null;
-        this.panelSources = [];
-        this.isSyncing = false;
-        this.isObserving = false;
-        this.handleMouseDown = (index) => (event) => {
-            event.preventDefault();
-            this.draggingIndex = index;
-            document.body.style.cursor = this.getDirection() === 'horizontal' ? 'col-resize' : 'row-resize';
-            document.body.style.userSelect = 'none';
-        };
-        this.handleMouseMove = (event) => {
-            if (this.draggingIndex === null)
-                return;
-            if (!this.panelSources.length)
-                return;
-            const direction = this.getDirection();
-            const mode = this.getMode();
-            const splitterSize = this.getSplitterSize();
-            const rect = this.getBoundingClientRect();
-            const panel = this.panelSources[this.draggingIndex];
-            if (!panel)
-                return;
-            const config = this.readPanelConfig(panel, this.draggingIndex, this.panelSources.length);
-            let newSize = this.panelSizes[this.draggingIndex];
-            if (direction === 'horizontal') {
-                const containerWidth = rect.width;
-                const mouseX = event.clientX - rect.left;
-                let offsetX = 0;
-                for (let i = 0; i < this.draggingIndex; i++) {
-                    const size = this.panelSizes[i];
-                    offsetX += mode === 'fixed' ? size : size * containerWidth;
-                    offsetX += splitterSize;
-                }
-                const rawSize = mouseX - offsetX;
-                if (mode === 'fixed') {
-                    newSize = Math.max(config.minSize || 0, Math.min(config.maxSize || containerWidth, rawSize));
-                }
-                else {
-                    newSize = rawSize / containerWidth;
-                    const minSplit = config.minSize ? config.minSize / containerWidth : 0;
-                    const maxSplit = config.maxSize ? config.maxSize / containerWidth : 1;
-                    newSize = Math.max(minSplit, Math.min(maxSplit, newSize));
-                }
-            }
-            else {
-                const containerHeight = rect.height;
-                const mouseY = event.clientY - rect.top;
-                let offsetY = 0;
-                for (let i = 0; i < this.draggingIndex; i++) {
-                    const size = this.panelSizes[i];
-                    offsetY += mode === 'fixed' ? size : size * containerHeight;
-                    offsetY += splitterSize;
-                }
-                const rawSize = mouseY - offsetY;
-                if (mode === 'fixed') {
-                    newSize = Math.max(config.minSize || 0, Math.min(config.maxSize || containerHeight, rawSize));
-                }
-                else {
-                    newSize = rawSize / containerHeight;
-                    const minSplit = config.minSize ? config.minSize / containerHeight : 0;
-                    const maxSplit = config.maxSize ? config.maxSize / containerHeight : 1;
-                    newSize = Math.max(minSplit, Math.min(maxSplit, newSize));
-                }
-            }
-            this.panelSizes[this.draggingIndex] = newSize;
-            this.applyPanelSizes();
-            this.classList.toggle('designbase-wc-split-view--dragging', true);
-        };
-        this.handleMouseUp = () => {
-            if (this.draggingIndex === null)
-                return;
-            this.draggingIndex = null;
-            document.body.style.cursor = '';
-            document.body.style.userSelect = '';
-            this.classList.toggle('designbase-wc-split-view--dragging', false);
-        };
-    }
-    static get observedAttributes() {
-        return ['direction', 'mode', 'splitter-size', 'splitter-color', 'splitter-hover-color', 'gap', 'full-width', 'full-height'];
-    }
-    connectedCallback() {
-        this.style.display = 'flex';
-        this.style.boxSizing = 'border-box';
-        this.collectPanelSources();
-        this.initPanelSizes();
-        this.sync();
-        this.observer = new MutationObserver(() => {
-            if (this.isSyncing)
-                return;
-            this.collectPanelSources();
-            this.initPanelSizes();
-            this.sync();
-        });
-        this.startObserving();
-        document.addEventListener('mousemove', this.handleMouseMove);
-        document.addEventListener('mouseup', this.handleMouseUp);
-    }
-    disconnectedCallback() {
-        this.stopObserving();
-        document.removeEventListener('mousemove', this.handleMouseMove);
-        document.removeEventListener('mouseup', this.handleMouseUp);
-        this.draggingIndex = null;
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
-    }
-    startObserving() {
-        if (!this.observer || this.isObserving)
-            return;
-        this.observer.observe(this, { childList: true });
-        this.isObserving = true;
-    }
-    stopObserving() {
-        if (!this.observer || !this.isObserving)
-            return;
-        this.observer.disconnect();
-        this.isObserving = false;
-    }
-    attributeChangedCallback() {
-        if (this.isConnected)
-            this.sync();
-    }
-    collectPanelSources() {
-        this.panelSources = [];
-        // Keep tracking original panel nodes even after wrapping.
-        const slotted = Array.from(this.querySelectorAll('[slot="panel"]'));
-        if (slotted.length) {
-            this.panelSources = slotted;
-            return;
-        }
-        const wrapped = Array.from(this.querySelectorAll(':scope > .designbase-wc-split-view__panel > .designbase-wc-split-view__panel-body'));
-        if (wrapped.length) {
-            this.panelSources = wrapped
-                .map((body) => body.firstElementChild)
-                .filter((node) => node instanceof HTMLElement);
-        }
-    }
-    readPanelConfig(element, index, total) {
-        const sizeAttr = element.getAttribute('data-size');
-        const minSizeAttr = element.getAttribute('data-min-size');
-        const maxSizeAttr = element.getAttribute('data-max-size');
-        const mode = this.getMode();
-        let size;
-        if (sizeAttr != null && sizeAttr !== '') {
-            size = Number(sizeAttr);
-        }
-        return {
-            size: size !== undefined && Number.isFinite(size)
-                ? size
-                : mode === 'ratio'
-                    ? 1 / total
-                    : 200,
-            minSize: minSizeAttr ? Number(minSizeAttr) : undefined,
-            maxSize: maxSizeAttr ? Number(maxSizeAttr) : undefined,
-            resizable: element.getAttribute('data-resizable') !== 'false',
-            flexible: element.hasAttribute('data-flexible') ||
-                (element.getAttribute('data-flexible') !== 'false' && index === total - 1),
-        };
-    }
-    initPanelSizes() {
-        const total = this.panelSources.length;
-        if (!total)
-            return;
-        if (this.panelSizes.length === total)
-            return;
-        const mode = this.getMode();
-        this.panelSizes = this.panelSources.map((panel, index) => {
-            const config = this.readPanelConfig(panel, index, total);
-            return config.size ?? (mode === 'ratio' ? 1 / total : 200);
-        });
-    }
-    getDirection() {
-        const value = this.getAttribute('direction') || 'horizontal';
-        return value === 'vertical' ? 'vertical' : 'horizontal';
-    }
-    getMode() {
-        const value = this.getAttribute('mode') || 'ratio';
-        return value === 'fixed' ? 'fixed' : 'ratio';
-    }
-    getSplitterSize() {
-        return Number(this.getAttribute('splitter-size') || 4);
-    }
-    getGap() {
-        return Number(this.getAttribute('gap') || 0);
-    }
-    applyPanelSizes() {
-        if (!this.panelSources.length)
-            return;
-        const direction = this.getDirection();
-        const mode = this.getMode();
-        const panels = Array.from(this.querySelectorAll(':scope > .designbase-wc-split-view__panel'));
-        panels.forEach((panelEl, index) => {
-            const source = this.panelSources[index];
-            if (!source)
-                return;
-            const config = this.readPanelConfig(source, index, this.panelSources.length);
-            const size = this.panelSizes[index];
-            const isFlexible = config.flexible;
-            panelEl.style.width = '';
-            panelEl.style.height = '';
-            panelEl.style.flexBasis = '';
-            panelEl.style.flexGrow = '';
-            panelEl.style.flexShrink = '';
-            panelEl.style.minHeight = '';
-            panelEl.style.minWidth = '';
-            if (isFlexible) {
-                panelEl.style.flex = '1 1 0';
-                if (direction === 'vertical')
-                    panelEl.style.minHeight = '0';
-                else
-                    panelEl.style.minWidth = '0';
-            }
-            else {
-                const basis = mode === 'fixed' ? `${size}px` : `${size * 100}%`;
-                panelEl.style.flex = `0 0 ${basis}`;
-            }
-            panelEl.classList.toggle('designbase-wc-split-view__panel--flexible', Boolean(isFlexible));
-            panelEl.classList.toggle('designbase-wc-split-view__panel--fixed', !isFlexible);
-        });
-    }
-    sync() {
-        this.isSyncing = true;
-        this.stopObserving();
-        this.collectPanelSources();
-        this.initPanelSizes();
-        if (!this.panelSources.length) {
-            this.isSyncing = false;
-            this.startObserving();
-            return;
-        }
-        const direction = this.getDirection();
-        const mode = this.getMode();
-        const gap = this.getGap();
-        const splitterSize = this.getSplitterSize();
-        const splitterColor = this.getAttribute('splitter-color');
-        const splitterHoverColor = this.getAttribute('splitter-hover-color');
-        this.className = [
-            'designbase-wc-split-view',
-            `designbase-wc-split-view--direction-${direction}`,
-            `designbase-wc-split-view--mode-${mode}`,
-            this.hasAttribute('full-width') && 'designbase-wc-split-view--full-width',
-            this.hasAttribute('full-height') && 'designbase-wc-split-view--full-height',
-            this.draggingIndex !== null && 'designbase-wc-split-view--dragging',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.style.setProperty('--splitter-size', `${splitterSize}px`);
-        if (splitterColor)
-            this.style.setProperty('--splitter-color', splitterColor);
-        else
-            this.style.removeProperty('--splitter-color');
-        if (splitterHoverColor)
-            this.style.setProperty('--splitter-hover-color', splitterHoverColor);
-        else
-            this.style.removeProperty('--splitter-hover-color');
-        if (gap > 0)
-            this.style.gap = `${gap}px`;
-        else
-            this.style.gap = '';
-        const existingPanels = Array.from(this.querySelectorAll(':scope > .designbase-wc-split-view__panel'));
-        const existingSplitters = Array.from(this.querySelectorAll(':scope > .designbase-wc-split-view__splitter'));
-        existingPanels.forEach((node) => node.remove());
-        existingSplitters.forEach((node) => node.remove());
-        this.panelSources.forEach((source, index) => {
-            const config = this.readPanelConfig(source, index, this.panelSources.length);
-            const isLast = index === this.panelSources.length - 1;
-            const isResizable = config.resizable !== false && !isLast;
-            const panelEl = document.createElement('div');
-            panelEl.className = 'designbase-wc-split-view__panel';
-            const body = document.createElement('div');
-            body.className = 'designbase-wc-split-view__panel-body';
-            if (source.parentElement !== body) {
-                body.append(source);
-            }
-            panelEl.append(body);
-            this.append(panelEl);
-            if (!isLast && isResizable && gap === 0) {
-                const splitter = document.createElement('div');
-                splitter.className = `designbase-wc-split-view__splitter designbase-wc-split-view__splitter--direction-${direction}`;
-                splitter.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
-                splitter.addEventListener('mousedown', this.handleMouseDown(index));
-                this.append(splitter);
-            }
-        });
-        this.applyPanelSizes();
-        this.isSyncing = false;
-        this.startObserving();
-    }
-}
-if (!customElements.get('db-split-view')) {
-    customElements.define('db-split-view', DbSplitView);
-}
-
-export { DbSplitView };
+class DbSplitView extends HTMLElement{constructor(){super(...arguments),this.panelSizes=[],this.draggingIndex=null,this.panelSources=[],this.isSyncing=!1,this.isObserving=!1,this.handleMouseDown=e=>t=>{t.preventDefault(),this.draggingIndex=e,document.body.style.cursor="horizontal"===this.getDirection()?"col-resize":"row-resize",document.body.style.userSelect="none"},this.handleMouseMove=e=>{if(null===this.draggingIndex)return;if(!this.panelSources.length)return;const t=this.getDirection(),i=this.getMode(),s=this.getSplitterSize(),n=this.getBoundingClientRect(),l=this.panelSources[this.draggingIndex];if(!l)return;const r=this.readPanelConfig(l,this.draggingIndex,this.panelSources.length);let o=this.panelSizes[this.draggingIndex];if("horizontal"===t){const t=n.width,l=e.clientX-n.left;let a=0;for(let e=0;e<this.draggingIndex;e++){const n=this.panelSizes[e];a+="fixed"===i?n:n*t,a+=s}const h=l-a;if("fixed"===i)o=Math.max(r.minSize||0,Math.min(r.maxSize||t,h));else{o=h/t;const e=r.minSize?r.minSize/t:0,i=r.maxSize?r.maxSize/t:1;o=Math.max(e,Math.min(i,o))}}else{const t=n.height,l=e.clientY-n.top;let a=0;for(let e=0;e<this.draggingIndex;e++){const n=this.panelSizes[e];a+="fixed"===i?n:n*t,a+=s}const h=l-a;if("fixed"===i)o=Math.max(r.minSize||0,Math.min(r.maxSize||t,h));else{o=h/t;const e=r.minSize?r.minSize/t:0,i=r.maxSize?r.maxSize/t:1;o=Math.max(e,Math.min(i,o))}}this.panelSizes[this.draggingIndex]=o,this.applyPanelSizes(),this.classList.toggle("designbase-wc-split-view--dragging",!0)},this.handleMouseUp=()=>{null!==this.draggingIndex&&(this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect="",this.classList.toggle("designbase-wc-split-view--dragging",!1))}}static get observedAttributes(){return["direction","mode","splitter-size","splitter-color","splitter-hover-color","gap","full-width","full-height"]}connectedCallback(){this.style.display="flex",this.style.boxSizing="border-box",this.collectPanelSources(),this.initPanelSizes(),this.sync(),this.observer=new MutationObserver(()=>{this.isSyncing||(this.collectPanelSources(),this.initPanelSizes(),this.sync())}),this.startObserving(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp)}disconnectedCallback(){this.stopObserving(),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect=""}startObserving(){this.observer&&!this.isObserving&&(this.observer.observe(this,{childList:!0}),this.isObserving=!0)}stopObserving(){this.observer&&this.isObserving&&(this.observer.disconnect(),this.isObserving=!1)}attributeChangedCallback(){this.isConnected&&this.sync()}collectPanelSources(){this.panelSources=[];const e=Array.from(this.querySelectorAll('[slot="panel"]'));if(e.length)return void(this.panelSources=e);const t=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel > .designbase-wc-split-view__panel-body"));t.length&&(this.panelSources=t.map(e=>e.firstElementChild).filter(e=>e instanceof HTMLElement))}readPanelConfig(e,t,i){const s=e.getAttribute("data-size"),n=e.getAttribute("data-min-size"),l=e.getAttribute("data-max-size"),r=this.getMode();let o;return null!=s&&""!==s&&(o=Number(s)),{size:void 0!==o&&Number.isFinite(o)?o:"ratio"===r?1/i:200,minSize:n?Number(n):void 0,maxSize:l?Number(l):void 0,resizable:"false"!==e.getAttribute("data-resizable"),flexible:e.hasAttribute("data-flexible")||"false"!==e.getAttribute("data-flexible")&&t===i-1}}initPanelSizes(){const e=this.panelSources.length;if(!e)return;if(this.panelSizes.length===e)return;const t=this.getMode();this.panelSizes=this.panelSources.map((i,s)=>this.readPanelConfig(i,s,e).size??("ratio"===t?1/e:200))}getDirection(){return"vertical"===(this.getAttribute("direction")||"horizontal")?"vertical":"horizontal"}getMode(){return"fixed"===(this.getAttribute("mode")||"ratio")?"fixed":"ratio"}getSplitterSize(){return Number(this.getAttribute("splitter-size")||4)}getGap(){return Number(this.getAttribute("gap")||0)}applyPanelSizes(){if(!this.panelSources.length)return;const e=this.getDirection(),t=this.getMode();Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")).forEach((i,s)=>{const n=this.panelSources[s];if(!n)return;const l=this.readPanelConfig(n,s,this.panelSources.length),r=this.panelSizes[s],o=l.flexible;if(i.style.width="",i.style.height="",i.style.flexBasis="",i.style.flexGrow="",i.style.flexShrink="",i.style.minHeight="",i.style.minWidth="",o)i.style.flex="1 1 0","vertical"===e?i.style.minHeight="0":i.style.minWidth="0";else{const e="fixed"===t?`${r}px`:100*r+"%";i.style.flex=`0 0 ${e}`}i.classList.toggle("designbase-wc-split-view__panel--flexible",Boolean(o)),i.classList.toggle("designbase-wc-split-view__panel--fixed",!o)})}sync(){if(this.isSyncing=!0,this.stopObserving(),this.collectPanelSources(),this.initPanelSizes(),!this.panelSources.length)return this.isSyncing=!1,void this.startObserving();const e=this.getDirection(),t=this.getMode(),i=this.getGap(),s=this.getSplitterSize(),n=this.getAttribute("splitter-color"),l=this.getAttribute("splitter-hover-color");this.className=["designbase-wc-split-view",`designbase-wc-split-view--direction-${e}`,`designbase-wc-split-view--mode-${t}`,this.hasAttribute("full-width")&&"designbase-wc-split-view--full-width",this.hasAttribute("full-height")&&"designbase-wc-split-view--full-height",null!==this.draggingIndex&&"designbase-wc-split-view--dragging"].filter(Boolean).join(" "),this.style.setProperty("--splitter-size",`${s}px`),n?this.style.setProperty("--splitter-color",n):this.style.removeProperty("--splitter-color"),l?this.style.setProperty("--splitter-hover-color",l):this.style.removeProperty("--splitter-hover-color"),this.style.gap=i>0?`${i}px`:"";const r=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")),o=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__splitter"));r.forEach(e=>e.remove()),o.forEach(e=>e.remove()),this.panelSources.forEach((t,s)=>{const n=this.readPanelConfig(t,s,this.panelSources.length),l=s===this.panelSources.length-1,r=!1!==n.resizable&&!l,o=document.createElement("div");o.className="designbase-wc-split-view__panel";const a=document.createElement("div");if(a.className="designbase-wc-split-view__panel-body",t.parentElement!==a&&a.append(t),o.append(a),this.append(o),!l&&r&&0===i){const t=document.createElement("div");t.className=`designbase-wc-split-view__splitter designbase-wc-split-view__splitter--direction-${e}`,t.style.cursor="horizontal"===e?"col-resize":"row-resize",t.addEventListener("mousedown",this.handleMouseDown(s)),this.append(t)}}),this.applyPanelSizes(),this.isSyncing=!1,this.startObserving()}}customElements.get("db-split-view")||customElements.define("db-split-view",DbSplitView);export{DbSplitView};

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

@@ -1,46 +1 @@
-const DIRECTIONS = ['vertical', 'horizontal'];
-const ALIGNMENTS = ['start', 'center', 'end', 'stretch'];
-const JUSTIFY = ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'];
-const SPACINGS = ['none', 'xs', 's', 'm', 'l', 'xl'];
-class DbStack extends HTMLElement {
-    static get observedAttributes() {
-        return ['direction', 'alignment', 'justify', 'spacing', 'full-width', 'full-height', 'wrap'];
-    }
-    connectedCallback() {
-        this.syncClasses();
-    }
-    attributeChangedCallback() {
-        this.syncClasses();
-    }
-    syncClasses() {
-        const direction = this.getAttribute('direction') || 'vertical';
-        const alignment = this.getAttribute('alignment') || 'start';
-        const justify = this.getAttribute('justify') || 'start';
-        const spacing = this.getAttribute('spacing') || 'm';
-        const spacingAlias = {
-            none: 'none',
-            xs: 'xs',
-            s: 'sm',
-            m: 'md',
-            l: 'lg',
-            xl: 'xl',
-        };
-        const safeSpacing = SPACINGS.includes(spacing) ? spacing : 'm';
-        this.className = [
-            'designbase-wc-stack',
-            `designbase-wc-stack--direction-${DIRECTIONS.includes(direction) ? direction : 'vertical'}`,
-            `designbase-wc-stack--alignment-${ALIGNMENTS.includes(alignment) ? alignment : 'start'}`,
-            `designbase-wc-stack--justify-${JUSTIFY.includes(justify) ? justify : 'start'}`,
-            `designbase-wc-stack--spacing-${spacingAlias[safeSpacing] || 'md'}`,
-            this.hasAttribute('full-width') && 'designbase-wc-stack--full-width',
-            this.hasAttribute('full-height') && 'designbase-wc-stack--full-height',
-            this.hasAttribute('wrap') && 'designbase-wc-stack--wrap',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
-}
-if (!customElements.get('db-stack'))
-    customElements.define('db-stack', DbStack);
-
-export { DbStack };
+const t=["vertical","horizontal"],s=["start","center","end","stretch"],e=["start","center","end","space-between","space-around","space-evenly"],a=["none","xs","s","m","l","xl"];class DbStack extends HTMLElement{static get observedAttributes(){return["direction","alignment","justify","spacing","full-width","full-height","wrap"]}connectedCallback(){this.syncClasses()}attributeChangedCallback(){this.syncClasses()}syncClasses(){const i=this.getAttribute("direction")||"vertical",c=this.getAttribute("alignment")||"start",n=this.getAttribute("justify")||"start",l=this.getAttribute("spacing")||"m",r=a.includes(l)?l:"m";this.className=["designbase-wc-stack",`designbase-wc-stack--direction-${t.includes(i)?i:"vertical"}`,`designbase-wc-stack--alignment-${s.includes(c)?c:"start"}`,`designbase-wc-stack--justify-${e.includes(n)?n:"start"}`,`designbase-wc-stack--spacing-${{none:"none",xs:"xs",s:"sm",m:"md",l:"lg",xl:"xl"}[r]||"md"}`,this.hasAttribute("full-width")&&"designbase-wc-stack--full-width",this.hasAttribute("full-height")&&"designbase-wc-stack--full-height",this.hasAttribute("wrap")&&"designbase-wc-stack--wrap"].filter(Boolean).join(" ")}}customElements.get("db-stack")||customElements.define("db-stack",DbStack);export{DbStack};