@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

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

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

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