@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,538 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],a=["low","medium","high","urgent"],n={low:"낮음",medium:"보통",high:"높음",urgent:"긴급"};class DbKanban extends HTMLElement{constructor(){super(...arguments),this.dragState=null,this.dropTarget=null,this.handleBoardDragOver=e=>{if(!this.dragState)return;const t=e.target;t instanceof Element&&(t.closest(".designbase-wc-kanban__card")||t.closest(".designbase-wc-kanban__column-body"))||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"))},this.handleBoardDrop=e=>{if(!this.dragState)return;const t=e.target;t instanceof Element&&(t.closest(".designbase-wc-kanban__card")||t.closest(".designbase-wc-kanban__column-body"))||(e.preventDefault(),this.commitDrop())}}static get observedAttributes(){return["columns","size","disabled","draggable","show-column-count","show-add-card","allow-cross-column","full-width","empty-column-text"]}get columns(){try{const e=JSON.parse(this.getAttribute("columns")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.setAttribute("role","region"),this.setAttribute("aria-label","칸반 보드"),this.addEventListener("dragover",this.handleBoardDragOver),this.addEventListener("drop",this.handleBoardDrop),this.render()}disconnectedCallback(){this.removeEventListener("dragover",this.handleBoardDragOver),this.removeEventListener("drop",this.handleBoardDrop)}attributeChangedCallback(){this.isConnected&&this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const a=this.getAttribute(e);return""===a||"true"===a}getOption(e,t,a){const n=this.getAttribute(e);return n&&t.includes(n)?n:a}emitChange(e){this.columns=e,this.dispatchEvent(new CustomEvent("db-change",{detail:{columns:e},bubbles:!0,composed:!0}))}emitCardMove(e,t){this.columns=e,this.dispatchEvent(new CustomEvent("db-card-move",{detail:{...t,columns:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{columns:e},bubbles:!0,composed:!0}))}findCardLocation(e){for(const t of this.columns){const a=t.cards.findIndex(t=>t.id===e);if(a>=0)return{columnId:t.id,index:a}}return null}getAdjustedDropIndex(e,t){if(!this.dragState)return-1;const{columnId:a,cardIndex:n}=this.dragState;return a===e&&t>n?t-1:t}isValidDropTarget(e=this.dropTarget){if(!this.dragState||!e)return!1;const t=this.getAdjustedDropIndex(e.columnId,e.index);return!(t<0)&&(this.dragState.columnId!==e.columnId||t!==this.dragState.cardIndex)}moveCard(e,t,a){const n=this.findCardLocation(e);if(!n)return;const s=this.columns.map(e=>({...e,cards:[...e.cards]})),d=s.find(e=>e.id===n.columnId),r=s.find(e=>e.id===t);if(!d||!r)return;const[i]=d.cards.splice(n.index,1);if(!i)return;const o=this.getAdjustedDropIndex(t,a);r.cards.splice(Math.max(0,o),0,i),this.emitCardMove(s,{cardId:e,fromColumnId:n.columnId,toColumnId:t,fromIndex:n.index,toIndex:Math.max(0,o)})}setDropTarget(e){const t=e&&this.isValidDropTarget(e)?e:null;(this.dropTarget?`${this.dropTarget.columnId}:${this.dropTarget.index}`:"")!==(t?`${t.columnId}:${t.index}`:"")&&(this.dropTarget=t,this.updateDragClasses())}resetDragState(){this.dragState=null,this.dropTarget=null,this.classList.remove("designbase-wc-kanban--dragging"),this.updateDragClasses()}updateDragClasses(){const e=!!this.dragState;this.classList.toggle("designbase-wc-kanban--dragging",e),this.querySelectorAll(".designbase-wc-kanban__card").forEach(t=>{const a=t.dataset.cardId||"",n=e&&this.dragState?.cardId===a;t.classList.toggle("designbase-wc-kanban__card--dragged",n)}),this.querySelectorAll(".designbase-wc-kanban__column-body").forEach(e=>{const t=e.dataset.columnId||"",a=!!this.dropTarget&&this.dropTarget.columnId===t;e.classList.toggle("designbase-wc-kanban__column-body--drag-over",a)}),this.querySelectorAll(".designbase-wc-kanban__card").forEach(e=>{const t=e.dataset.columnId||"",a=Number(e.dataset.cardIndex||-1),n=!!this.dropTarget&&this.dropTarget.columnId===t&&this.dropTarget.index===a,s=this.columns.find(e=>e.id===t),d=!!this.dropTarget&&this.dropTarget.columnId===t&&s&&this.dropTarget.index===s.cards.length&&a===s.cards.length-1;e.classList.toggle("designbase-wc-kanban__card--drop-before",n),e.classList.toggle("designbase-wc-kanban__card--drop-after",d)})}getDropIndexFromPointer(e,t,a){const n=t.getBoundingClientRect();return e.clientY-n.top<n.height/2?a:a+1}getDropIndexFromColumnPointer(e,t){const a=Array.from(this.querySelectorAll(`.designbase-wc-kanban__column-body[data-column-id="${t}"] > .designbase-wc-kanban__card`));if(0===a.length)return 0;for(let t=0;t<a.length;t+=1){const n=a[t].getBoundingClientRect();if(e.clientY<n.top+n.height/2)return t}return a.length}commitDrop(){if(!this.dragState||!this.dropTarget||!this.isValidDropTarget())return void this.resetDragState();const{cardId:e}=this.dragState,{columnId:t,index:a}=this.dropTarget;this.resetDragState(),this.moveCard(e,t,a),this.render()}formatDueDate(e){const t=new Date(e);return Number.isNaN(t.getTime())?e:t.toLocaleDateString("ko-KR",{month:"short",day:"numeric"})}getInitials(e){return e.initials?e.initials:e.name.split(/\s+/).map(e=>e.charAt(0)).join("").slice(0,2).toUpperCase()}createTag(e){const t=document.createElement("span");return t.className=["designbase-wc-kanban__tag",e.variant&&`designbase-wc-kanban__tag--${e.variant}`].filter(Boolean).join(" "),t.textContent=e.label,t}createPriorityBadge(e){const t=document.createElement("span");return t.className=`designbase-wc-kanban__priority designbase-wc-kanban__priority--${e}`,t.textContent=n[e],t.setAttribute("aria-label",`우선순위 ${n[e]}`),t}createAssignee(e){const t=document.createElement("div");if(t.className="designbase-wc-kanban__assignee",t.title=e.name,e.avatar){const a=document.createElement("img");a.className="designbase-wc-kanban__assignee-avatar",a.src=e.avatar,a.alt=e.name,t.append(a)}else{const a=document.createElement("span");a.className="designbase-wc-kanban__assignee-initials",a.textContent=this.getInitials(e),t.append(a)}const a=document.createElement("span");return a.className="designbase-wc-kanban__assignee-name",a.textContent=e.name,t.append(a),t}bindCardDrag(e,t,a,n,s,d){e.draggable=s&&!d&&!t.disabled,e.addEventListener("dragstart",e=>{!s||d||t.disabled||(this.dragState={cardId:t.id,columnId:a,cardIndex:n},this.dropTarget=null,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",t.id)),this.classList.add("designbase-wc-kanban--dragging"),this.updateDragClasses())}),e.addEventListener("dragover",t=>{if(!this.dragState)return;t.preventDefault(),t.stopPropagation(),t.dataTransfer&&(t.dataTransfer.dropEffect="move");if(!this.getBool("allow-cross-column",!0)&&this.dragState.columnId!==a)return;const s=this.getDropIndexFromPointer(t,e,n);this.setDropTarget({columnId:a,index:s})}),e.addEventListener("dragleave",t=>{const a=e.getBoundingClientRect(),n=t.clientX-a.left,s=t.clientY-a.top;(n<0||n>a.width||s<0||s>a.height)&&this.setDropTarget(null)}),e.addEventListener("drop",e=>{e.preventDefault(),e.stopPropagation(),this.commitDrop()}),e.addEventListener("dragend",()=>{this.resetDragState(),this.render()})}createCard(t,n,s,d){const r=document.createElement("article");r.className=["designbase-wc-kanban__card",t.disabled&&"designbase-wc-kanban__card--disabled",t.priority&&`designbase-wc-kanban__card--priority-${t.priority}`].filter(Boolean).join(" "),r.dataset.cardId=t.id,r.dataset.columnId=n,r.dataset.cardIndex=String(s),r.setAttribute("role","listitem"),r.tabIndex=t.disabled?-1:0;const i=document.createElement("div");i.className="designbase-wc-kanban__card-title-row";const o=document.createElement("h4");if(o.className="designbase-wc-kanban__card-title",o.textContent=t.title,i.append(o),t.priority&&a.includes(t.priority)&&i.append(this.createPriorityBadge(t.priority)),r.append(i),t.description){const e=document.createElement("p");e.className="designbase-wc-kanban__card-description",e.textContent=t.description,r.append(e)}if(t.tags?.length){const e=document.createElement("div");e.className="designbase-wc-kanban__card-tags",t.tags.forEach(t=>e.append(this.createTag(t))),r.append(e)}const c=document.createElement("div");if(c.className="designbase-wc-kanban__card-footer",t.assignee&&c.append(this.createAssignee(t.assignee)),t.dueDate){const a=document.createElement("span");a.className="designbase-wc-kanban__due-date",a.append(e("calendar","l"===d.size?12:"m"===d.size?11:10));const n=document.createElement("span");n.textContent=this.formatDueDate(t.dueDate),a.append(n),c.append(a)}return c.childNodes.length>0&&r.append(c),r.addEventListener("click",e=>{d.disabled||this.dispatchEvent(new CustomEvent("db-card-click",{detail:{card:t,columnId:n},bubbles:!0,composed:!0}))}),r.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.dispatchEvent(new CustomEvent("db-card-click",{detail:{card:t,columnId:n},bubbles:!0,composed:!0})))}),this.bindCardDrag(r,t,n,s,d.draggable,d.disabled),r}createColumn(t,a){const n=document.createElement("section"),s=void 0!==t.limit&&t.cards.length>t.limit;n.className=["designbase-wc-kanban__column",s&&"designbase-wc-kanban__column--over-limit"].filter(Boolean).join(" "),n.dataset.columnId=t.id,n.setAttribute("role","group"),n.setAttribute("aria-label",t.title);const d=document.createElement("header");d.className="designbase-wc-kanban__column-header";const r=document.createElement("div");if(r.className="designbase-wc-kanban__column-title-wrap",t.color){const e=document.createElement("span");e.className="designbase-wc-kanban__column-color",e.style.backgroundColor=t.color,e.setAttribute("aria-hidden","true"),r.append(e)}const i=document.createElement("h3");if(i.className="designbase-wc-kanban__column-title",i.textContent=t.title,r.append(i),d.append(r),a.showColumnCount){const e=document.createElement("span");e.className="designbase-wc-kanban__column-count",e.textContent=void 0!==t.limit?`${t.cards.length}/${t.limit}`:String(t.cards.length),d.append(e)}n.append(d);const o=document.createElement("div");if(o.className="designbase-wc-kanban__column-body",o.dataset.columnId=t.id,o.setAttribute("role","list"),o.addEventListener("dragover",e=>{if(!this.dragState)return;e.preventDefault(),e.stopPropagation(),e.dataTransfer&&(e.dataTransfer.dropEffect="move");if(!this.getBool("allow-cross-column",!0)&&this.dragState.columnId!==t.id)return;const a=this.getDropIndexFromColumnPointer(e,t.id);this.setDropTarget({columnId:t.id,index:a})}),o.addEventListener("drop",e=>{e.preventDefault(),e.stopPropagation(),this.commitDrop()}),0===t.cards.length){const e=document.createElement("div");e.className="designbase-wc-kanban__column-empty",e.textContent=a.emptyColumnText,o.append(e)}else t.cards.forEach((e,n)=>{o.append(this.createCard(e,t.id,n,{size:a.size,draggable:a.draggable,disabled:a.disabled}))});if(n.append(o),a.showAddCard&&!a.disabled){const s=document.createElement("button");s.type="button",s.className="designbase-wc-kanban__add-card",s.append(e("plus","l"===a.size?14:"m"===a.size?12:10));const d=document.createElement("span");d.textContent="카드 추가",s.append(d),s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-add-card",{detail:{columnId:t.id},bubbles:!0,composed:!0}))}),n.append(s)}return n}render(){const e=this.getOption("size",t,"s"),a=this.getBool("disabled"),n=this.getBool("draggable",!0),s=this.getBool("show-column-count",!0),d=this.getBool("show-add-card"),r=this.getAttribute("empty-column-text")||"카드가 없습니다";this.className=["designbase-wc-kanban",`designbase-wc-kanban--${e}`,this.getBool("full-width")&&"designbase-wc-kanban--full-width",a&&"designbase-wc-kanban--disabled",this.classList.contains("designbase-wc-kanban--dragging")&&"designbase-wc-kanban--dragging"].filter(Boolean).join(" ");const i=document.createElement("div");i.className="designbase-wc-kanban__board";const o=document.createDocumentFragment();this.columns.forEach(t=>{o.append(this.createColumn(t,{size:e,draggable:n,showColumnCount:s,showAddCard:d,emptyColumnText:r,disabled:a}))}),i.append(o),this.replaceChildren(i),this.updateDragClasses()}}customElements.get("db-kanban")||customElements.define("db-kanban",DbKanban);export{DbKanban};
+import { createDbIcon } from './db-icons.js';
+
+const SIZES = ['s', 'm', 'l'];
+const PRIORITIES = ['low', 'medium', 'high', 'urgent'];
+const PRIORITY_LABELS = {
+    low: '낮음',
+    medium: '보통',
+    high: '높음',
+    urgent: '긴급',
+};
+class DbKanban extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.dragState = null;
+        this.dropTarget = null;
+        this.handleBoardDragOver = (event) => {
+            if (!this.dragState)
+                return;
+            const target = event.target;
+            if (target instanceof Element &&
+                (target.closest('.designbase-wc-kanban__card') ||
+                    target.closest('.designbase-wc-kanban__column-body'))) {
+                return;
+            }
+            event.preventDefault();
+            if (event.dataTransfer)
+                event.dataTransfer.dropEffect = 'move';
+        };
+        this.handleBoardDrop = (event) => {
+            if (!this.dragState)
+                return;
+            const target = event.target;
+            if (target instanceof Element &&
+                (target.closest('.designbase-wc-kanban__card') ||
+                    target.closest('.designbase-wc-kanban__column-body'))) {
+                return;
+            }
+            event.preventDefault();
+            this.commitDrop();
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'columns',
+            'size',
+            'disabled',
+            'draggable',
+            'show-column-count',
+            'show-add-card',
+            'allow-cross-column',
+            'full-width',
+            'empty-column-text',
+        ];
+    }
+    get columns() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('columns') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set columns(value) {
+        this.setAttribute('columns', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    connectedCallback() {
+        this.setAttribute('role', 'region');
+        this.setAttribute('aria-label', '칸반 보드');
+        this.addEventListener('dragover', this.handleBoardDragOver);
+        this.addEventListener('drop', this.handleBoardDrop);
+        this.render();
+    }
+    disconnectedCallback() {
+        this.removeEventListener('dragover', this.handleBoardDragOver);
+        this.removeEventListener('drop', this.handleBoardDrop);
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.render();
+    }
+    getBool(name, fallback = false) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = this.getAttribute(name);
+        return value === '' || value === 'true';
+    }
+    getOption(name, values, fallback) {
+        const value = this.getAttribute(name);
+        return value && values.includes(value) ? value : fallback;
+    }
+    emitChange(columns) {
+        this.columns = columns;
+        this.dispatchEvent(new CustomEvent('db-change', { detail: { columns }, bubbles: true, composed: true }));
+    }
+    emitCardMove(columns, detail) {
+        this.columns = columns;
+        this.dispatchEvent(new CustomEvent('db-card-move', {
+            detail: { ...detail, columns },
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new CustomEvent('db-change', { detail: { columns }, bubbles: true, composed: true }));
+    }
+    findCardLocation(cardId) {
+        for (const column of this.columns) {
+            const index = column.cards.findIndex((card) => card.id === cardId);
+            if (index >= 0)
+                return { columnId: column.id, index };
+        }
+        return null;
+    }
+    getAdjustedDropIndex(columnId, dropIndex) {
+        if (!this.dragState)
+            return -1;
+        const { columnId: fromColumnId, cardIndex: fromIndex } = this.dragState;
+        if (fromColumnId === columnId && dropIndex > fromIndex) {
+            return dropIndex - 1;
+        }
+        return dropIndex;
+    }
+    isValidDropTarget(target = this.dropTarget) {
+        if (!this.dragState || !target)
+            return false;
+        const adjusted = this.getAdjustedDropIndex(target.columnId, target.index);
+        if (adjusted < 0)
+            return false;
+        if (this.dragState.columnId === target.columnId && adjusted === this.dragState.cardIndex) {
+            return false;
+        }
+        return true;
+    }
+    moveCard(cardId, toColumnId, toIndex) {
+        const location = this.findCardLocation(cardId);
+        if (!location)
+            return;
+        const next = this.columns.map((column) => ({
+            ...column,
+            cards: [...column.cards],
+        }));
+        const fromColumn = next.find((column) => column.id === location.columnId);
+        const toColumn = next.find((column) => column.id === toColumnId);
+        if (!fromColumn || !toColumn)
+            return;
+        const [moved] = fromColumn.cards.splice(location.index, 1);
+        if (!moved)
+            return;
+        const adjustedIndex = this.getAdjustedDropIndex(toColumnId, toIndex);
+        toColumn.cards.splice(Math.max(0, adjustedIndex), 0, moved);
+        this.emitCardMove(next, {
+            cardId,
+            fromColumnId: location.columnId,
+            toColumnId,
+            fromIndex: location.index,
+            toIndex: Math.max(0, adjustedIndex),
+        });
+    }
+    setDropTarget(target) {
+        const next = target && this.isValidDropTarget(target) ? target : null;
+        const prevKey = this.dropTarget ? `${this.dropTarget.columnId}:${this.dropTarget.index}` : '';
+        const nextKey = next ? `${next.columnId}:${next.index}` : '';
+        if (prevKey === nextKey)
+            return;
+        this.dropTarget = next;
+        this.updateDragClasses();
+    }
+    resetDragState() {
+        this.dragState = null;
+        this.dropTarget = null;
+        this.classList.remove('designbase-wc-kanban--dragging');
+        this.updateDragClasses();
+    }
+    updateDragClasses() {
+        const hasDrag = !!this.dragState;
+        this.classList.toggle('designbase-wc-kanban--dragging', hasDrag);
+        this.querySelectorAll('.designbase-wc-kanban__card').forEach((cardEl) => {
+            const cardId = cardEl.dataset.cardId || '';
+            const isDragged = hasDrag && this.dragState?.cardId === cardId;
+            cardEl.classList.toggle('designbase-wc-kanban__card--dragged', isDragged);
+        });
+        this.querySelectorAll('.designbase-wc-kanban__column-body').forEach((bodyEl) => {
+            const columnId = bodyEl.dataset.columnId || '';
+            const isDropColumn = !!this.dropTarget && this.dropTarget.columnId === columnId;
+            bodyEl.classList.toggle('designbase-wc-kanban__column-body--drag-over', isDropColumn);
+        });
+        this.querySelectorAll('.designbase-wc-kanban__card').forEach((cardEl) => {
+            const columnId = cardEl.dataset.columnId || '';
+            const cardIndex = Number(cardEl.dataset.cardIndex || -1);
+            const showBefore = !!this.dropTarget &&
+                this.dropTarget.columnId === columnId &&
+                this.dropTarget.index === cardIndex;
+            const column = this.columns.find((entry) => entry.id === columnId);
+            const showAfterLast = !!this.dropTarget &&
+                this.dropTarget.columnId === columnId &&
+                column &&
+                this.dropTarget.index === column.cards.length &&
+                cardIndex === column.cards.length - 1;
+            cardEl.classList.toggle('designbase-wc-kanban__card--drop-before', showBefore);
+            cardEl.classList.toggle('designbase-wc-kanban__card--drop-after', showAfterLast);
+        });
+    }
+    getDropIndexFromPointer(event, cardEl, index) {
+        const rect = cardEl.getBoundingClientRect();
+        const offset = event.clientY - rect.top;
+        return offset < rect.height / 2 ? index : index + 1;
+    }
+    getDropIndexFromColumnPointer(event, columnId) {
+        const cards = Array.from(this.querySelectorAll(`.designbase-wc-kanban__column-body[data-column-id="${columnId}"] > .designbase-wc-kanban__card`));
+        if (cards.length === 0)
+            return 0;
+        for (let index = 0; index < cards.length; index += 1) {
+            const rect = cards[index].getBoundingClientRect();
+            if (event.clientY < rect.top + rect.height / 2)
+                return index;
+        }
+        return cards.length;
+    }
+    commitDrop() {
+        if (!this.dragState || !this.dropTarget || !this.isValidDropTarget()) {
+            this.resetDragState();
+            return;
+        }
+        const { cardId } = this.dragState;
+        const { columnId, index } = this.dropTarget;
+        this.resetDragState();
+        this.moveCard(cardId, columnId, index);
+        this.render();
+    }
+    formatDueDate(value) {
+        const date = new Date(value);
+        if (Number.isNaN(date.getTime()))
+            return value;
+        return date.toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' });
+    }
+    getInitials(assignee) {
+        if (assignee.initials)
+            return assignee.initials;
+        return assignee.name
+            .split(/\s+/)
+            .map((part) => part.charAt(0))
+            .join('')
+            .slice(0, 2)
+            .toUpperCase();
+    }
+    createTag(tag) {
+        const el = document.createElement('span');
+        el.className = [
+            'designbase-wc-kanban__tag',
+            tag.variant && `designbase-wc-kanban__tag--${tag.variant}`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        el.textContent = tag.label;
+        return el;
+    }
+    createPriorityBadge(priority) {
+        const el = document.createElement('span');
+        el.className = `designbase-wc-kanban__priority designbase-wc-kanban__priority--${priority}`;
+        el.textContent = PRIORITY_LABELS[priority];
+        el.setAttribute('aria-label', `우선순위 ${PRIORITY_LABELS[priority]}`);
+        return el;
+    }
+    createAssignee(assignee) {
+        const el = document.createElement('div');
+        el.className = 'designbase-wc-kanban__assignee';
+        el.title = assignee.name;
+        if (assignee.avatar) {
+            const img = document.createElement('img');
+            img.className = 'designbase-wc-kanban__assignee-avatar';
+            img.src = assignee.avatar;
+            img.alt = assignee.name;
+            el.append(img);
+        }
+        else {
+            const initials = document.createElement('span');
+            initials.className = 'designbase-wc-kanban__assignee-initials';
+            initials.textContent = this.getInitials(assignee);
+            el.append(initials);
+        }
+        const name = document.createElement('span');
+        name.className = 'designbase-wc-kanban__assignee-name';
+        name.textContent = assignee.name;
+        el.append(name);
+        return el;
+    }
+    bindCardDrag(cardEl, card, columnId, cardIndex, draggable, disabled) {
+        cardEl.draggable = draggable && !disabled && !card.disabled;
+        cardEl.addEventListener('dragstart', (event) => {
+            if (!draggable || disabled || card.disabled)
+                return;
+            this.dragState = { cardId: card.id, columnId, cardIndex };
+            this.dropTarget = null;
+            if (event.dataTransfer) {
+                event.dataTransfer.effectAllowed = 'move';
+                event.dataTransfer.setData('text/plain', card.id);
+            }
+            this.classList.add('designbase-wc-kanban--dragging');
+            this.updateDragClasses();
+        });
+        cardEl.addEventListener('dragover', (event) => {
+            if (!this.dragState)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.dataTransfer)
+                event.dataTransfer.dropEffect = 'move';
+            const allowCrossColumn = this.getBool('allow-cross-column', true);
+            if (!allowCrossColumn && this.dragState.columnId !== columnId)
+                return;
+            const nextIndex = this.getDropIndexFromPointer(event, cardEl, cardIndex);
+            this.setDropTarget({ columnId, index: nextIndex });
+        });
+        cardEl.addEventListener('dragleave', (event) => {
+            const rect = cardEl.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            if (x < 0 || x > rect.width || y < 0 || y > rect.height) {
+                this.setDropTarget(null);
+            }
+        });
+        cardEl.addEventListener('drop', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.commitDrop();
+        });
+        cardEl.addEventListener('dragend', () => {
+            this.resetDragState();
+            this.render();
+        });
+    }
+    createCard(card, columnId, cardIndex, options) {
+        const cardEl = document.createElement('article');
+        cardEl.className = [
+            'designbase-wc-kanban__card',
+            card.disabled && 'designbase-wc-kanban__card--disabled',
+            card.priority && `designbase-wc-kanban__card--priority-${card.priority}`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        cardEl.dataset.cardId = card.id;
+        cardEl.dataset.columnId = columnId;
+        cardEl.dataset.cardIndex = String(cardIndex);
+        cardEl.setAttribute('role', 'listitem');
+        cardEl.tabIndex = card.disabled ? -1 : 0;
+        const titleRow = document.createElement('div');
+        titleRow.className = 'designbase-wc-kanban__card-title-row';
+        const title = document.createElement('h4');
+        title.className = 'designbase-wc-kanban__card-title';
+        title.textContent = card.title;
+        titleRow.append(title);
+        if (card.priority && PRIORITIES.includes(card.priority)) {
+            titleRow.append(this.createPriorityBadge(card.priority));
+        }
+        cardEl.append(titleRow);
+        if (card.description) {
+            const description = document.createElement('p');
+            description.className = 'designbase-wc-kanban__card-description';
+            description.textContent = card.description;
+            cardEl.append(description);
+        }
+        if (card.tags?.length) {
+            const tags = document.createElement('div');
+            tags.className = 'designbase-wc-kanban__card-tags';
+            card.tags.forEach((tag) => tags.append(this.createTag(tag)));
+            cardEl.append(tags);
+        }
+        const footer = document.createElement('div');
+        footer.className = 'designbase-wc-kanban__card-footer';
+        if (card.assignee) {
+            footer.append(this.createAssignee(card.assignee));
+        }
+        if (card.dueDate) {
+            const due = document.createElement('span');
+            due.className = 'designbase-wc-kanban__due-date';
+            due.append(createDbIcon('calendar', options.size === 'l' ? 12 : options.size === 'm' ? 11 : 10));
+            const dueText = document.createElement('span');
+            dueText.textContent = this.formatDueDate(card.dueDate);
+            due.append(dueText);
+            footer.append(due);
+        }
+        if (footer.childNodes.length > 0)
+            cardEl.append(footer);
+        cardEl.addEventListener('click', (event) => {
+            if (options.disabled)
+                return;
+            this.dispatchEvent(new CustomEvent('db-card-click', {
+                detail: { card, columnId },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+        cardEl.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.dispatchEvent(new CustomEvent('db-card-click', {
+                    detail: { card, columnId },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        });
+        this.bindCardDrag(cardEl, card, columnId, cardIndex, options.draggable, options.disabled);
+        return cardEl;
+    }
+    createColumn(column, options) {
+        const columnEl = document.createElement('section');
+        const isOverLimit = column.limit !== undefined && column.cards.length > column.limit;
+        columnEl.className = [
+            'designbase-wc-kanban__column',
+            isOverLimit && 'designbase-wc-kanban__column--over-limit',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        columnEl.dataset.columnId = column.id;
+        columnEl.setAttribute('role', 'group');
+        columnEl.setAttribute('aria-label', column.title);
+        const header = document.createElement('header');
+        header.className = 'designbase-wc-kanban__column-header';
+        const titleWrap = document.createElement('div');
+        titleWrap.className = 'designbase-wc-kanban__column-title-wrap';
+        if (column.color) {
+            const color = document.createElement('span');
+            color.className = 'designbase-wc-kanban__column-color';
+            color.style.backgroundColor = column.color;
+            color.setAttribute('aria-hidden', 'true');
+            titleWrap.append(color);
+        }
+        const title = document.createElement('h3');
+        title.className = 'designbase-wc-kanban__column-title';
+        title.textContent = column.title;
+        titleWrap.append(title);
+        header.append(titleWrap);
+        if (options.showColumnCount) {
+            const count = document.createElement('span');
+            count.className = 'designbase-wc-kanban__column-count';
+            count.textContent =
+                column.limit !== undefined
+                    ? `${column.cards.length}/${column.limit}`
+                    : String(column.cards.length);
+            header.append(count);
+        }
+        columnEl.append(header);
+        const body = document.createElement('div');
+        body.className = 'designbase-wc-kanban__column-body';
+        body.dataset.columnId = column.id;
+        body.setAttribute('role', 'list');
+        body.addEventListener('dragover', (event) => {
+            if (!this.dragState)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.dataTransfer)
+                event.dataTransfer.dropEffect = 'move';
+            const allowCrossColumn = this.getBool('allow-cross-column', true);
+            if (!allowCrossColumn && this.dragState.columnId !== column.id)
+                return;
+            const nextIndex = this.getDropIndexFromColumnPointer(event, column.id);
+            this.setDropTarget({ columnId: column.id, index: nextIndex });
+        });
+        body.addEventListener('drop', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.commitDrop();
+        });
+        if (column.cards.length === 0) {
+            const empty = document.createElement('div');
+            empty.className = 'designbase-wc-kanban__column-empty';
+            empty.textContent = options.emptyColumnText;
+            body.append(empty);
+        }
+        else {
+            column.cards.forEach((card, index) => {
+                body.append(this.createCard(card, column.id, index, {
+                    size: options.size,
+                    draggable: options.draggable,
+                    disabled: options.disabled,
+                }));
+            });
+        }
+        columnEl.append(body);
+        if (options.showAddCard && !options.disabled) {
+            const addButton = document.createElement('button');
+            addButton.type = 'button';
+            addButton.className = 'designbase-wc-kanban__add-card';
+            addButton.append(createDbIcon('plus', options.size === 'l' ? 14 : options.size === 'm' ? 12 : 10));
+            const addLabel = document.createElement('span');
+            addLabel.textContent = '카드 추가';
+            addButton.append(addLabel);
+            addButton.addEventListener('click', () => {
+                this.dispatchEvent(new CustomEvent('db-add-card', {
+                    detail: { columnId: column.id },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+            columnEl.append(addButton);
+        }
+        return columnEl;
+    }
+    render() {
+        const size = this.getOption('size', SIZES, 's');
+        const disabled = this.getBool('disabled');
+        const draggable = this.getBool('draggable', true);
+        const showColumnCount = this.getBool('show-column-count', true);
+        const showAddCard = this.getBool('show-add-card');
+        const emptyColumnText = this.getAttribute('empty-column-text') || '카드가 없습니다';
+        this.className = [
+            'designbase-wc-kanban',
+            `designbase-wc-kanban--${size}`,
+            this.getBool('full-width') && 'designbase-wc-kanban--full-width',
+            disabled && 'designbase-wc-kanban--disabled',
+            this.classList.contains('designbase-wc-kanban--dragging') &&
+                'designbase-wc-kanban--dragging',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const board = document.createElement('div');
+        board.className = 'designbase-wc-kanban__board';
+        const fragment = document.createDocumentFragment();
+        this.columns.forEach((column) => {
+            fragment.append(this.createColumn(column, {
+                size,
+                draggable,
+                showColumnCount,
+                showAddCard,
+                emptyColumnText,
+                disabled,
+            }));
+        });
+        board.append(fragment);
+        this.replaceChildren(board);
+        this.updateDragClasses();
+    }
+}
+if (!customElements.get('db-kanban'))
+    customElements.define('db-kanban', DbKanban);
+
+export { DbKanban };

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

@@ -1 +1,66 @@
-class DbLabel extends HTMLElement{static get observedAttributes(){return["label","html-for","id","size","required","disabled","error"]}connectedCallback(){this.sync()}attributeChangedCallback(){this.sync()}sync(){const e=this.getAttribute("size")||"s",t=this.hasAttribute("required"),s=this.hasAttribute("disabled"),l=this.hasAttribute("error"),a=this.getAttribute("html-for"),i=this.getAttribute("id"),r=this.getAttribute("label");this.className=["designbase-wc-label",`designbase-wc-label--${e}`,s&&"designbase-wc-label--disabled",l&&"designbase-wc-label--error"].filter(Boolean).join(" ");let b=this.querySelector(":scope > label.designbase-wc-label__text");if(null!==r&&""!==r)b||(this.replaceChildren(),b=document.createElement("label"),b.className="designbase-wc-label__text",this.append(b)),b.textContent=r;else if(!b&&this.childNodes.length>0){b=document.createElement("label"),b.className="designbase-wc-label__text";Array.from(this.childNodes).forEach(e=>b.append(e)),this.append(b)}if(b&&(a?b.htmlFor=a:b.removeAttribute("for"),i?b.id=i:b.removeAttribute("id"),b.querySelector(".designbase-wc-label__required")?.remove(),t)){const e=document.createElement("span");e.className="designbase-wc-label__required",e.textContent="*",b.append(e)}}}customElements.get("db-label")||customElements.define("db-label",DbLabel);export{DbLabel};
+class DbLabel extends HTMLElement {
+    static get observedAttributes() {
+        return ['label', 'html-for', 'id', 'size', 'required', 'disabled', 'error'];
+    }
+    connectedCallback() {
+        this.sync();
+    }
+    attributeChangedCallback() {
+        this.sync();
+    }
+    sync() {
+        const size = this.getAttribute('size') || 's';
+        const required = this.hasAttribute('required');
+        const disabled = this.hasAttribute('disabled');
+        const error = this.hasAttribute('error');
+        const htmlFor = this.getAttribute('html-for');
+        const id = this.getAttribute('id');
+        const explicit = this.getAttribute('label');
+        this.className = [
+            'designbase-wc-label',
+            `designbase-wc-label--${size}`,
+            disabled && 'designbase-wc-label--disabled',
+            error && 'designbase-wc-label--error',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        let labelEl = this.querySelector(':scope > label.designbase-wc-label__text');
+        if (explicit !== null && explicit !== '') {
+            if (!labelEl) {
+                this.replaceChildren();
+                labelEl = document.createElement('label');
+                labelEl.className = 'designbase-wc-label__text';
+                this.append(labelEl);
+            }
+            labelEl.textContent = explicit;
+        }
+        else if (!labelEl && this.childNodes.length > 0) {
+            labelEl = document.createElement('label');
+            labelEl.className = 'designbase-wc-label__text';
+            const nodes = Array.from(this.childNodes);
+            nodes.forEach((node) => labelEl.append(node));
+            this.append(labelEl);
+        }
+        if (!labelEl)
+            return;
+        if (htmlFor)
+            labelEl.htmlFor = htmlFor;
+        else
+            labelEl.removeAttribute('for');
+        if (id)
+            labelEl.id = id;
+        else
+            labelEl.removeAttribute('id');
+        labelEl.querySelector('.designbase-wc-label__required')?.remove();
+        if (required) {
+            const mark = document.createElement('span');
+            mark.className = 'designbase-wc-label__required';
+            mark.textContent = '*';
+            labelEl.append(mark);
+        }
+    }
+}
+if (!customElements.get('db-label'))
+    customElements.define('db-label', DbLabel);
+
+export { DbLabel };