@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,271 @@
-import{createDbIcon as t}from"./db-icons.js";class DbPagination extends HTMLElement{static get observedAttributes(){return["current-page","total-pages","total-items","page-size","page-size-options","size","variant","alignment","show-first-last","show-previous-next","show-page-size-selector","show-total","sibling-count","boundary-count","disabled","full-width"]}get currentPage(){return Number(this.getAttribute("current-page")||1)}set currentPage(t){this.setAttribute("current-page",String(t))}get totalPages(){return Number(this.getAttribute("total-pages")||1)}set totalPages(t){this.setAttribute("total-pages",String(t))}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}iconSize(){const t=this.getAttribute("size")||"m";return"s"===t?12:"l"===t?16:14}render(){const t=this.getAttribute("size")||"m",e=this.getAttribute("variant")||"default",a=this.getAttribute("alignment")||"center",i=this.hasAttribute("disabled"),n=this.hasAttribute("show-first-last"),s="false"!==this.getAttribute("show-previous-next"),r=this.hasAttribute("show-page-size-selector"),o=this.hasAttribute("show-total"),c=this.hasAttribute("full-width")||r||o,l=Number(this.getAttribute("total-items")||0),g=Number(this.getAttribute("page-size")||10),u=this.currentPage,b=this.totalPages,d=u<=1,p=u>=b;this.className=["designbase-wc-pagination",`designbase-wc-pagination--${t}`,`designbase-wc-pagination--${e}`,`designbase-wc-pagination--${a}`,i&&"designbase-wc-pagination--disabled",c&&"designbase-wc-pagination--full-width"].filter(Boolean).join(" "),this.setAttribute("role","navigation"),this.setAttribute("aria-label","페이지 네비게이션"),this.replaceChildren();const h=document.createElement("div");if(h.className=["designbase-wc-pagination__container",c&&"designbase-wc-pagination__container--full-width"].filter(Boolean).join(" "),o&&l>0){const t=document.createElement("div");t.className="designbase-wc-pagination__total",t.textContent=this.getTotalLabel(l,g,u),h.append(t)}const m=document.createElement("nav");m.className="designbase-wc-pagination__nav",m.setAttribute("aria-label","페이지 네비게이션");const A=document.createElement("ul");A.className="designbase-wc-pagination__list",n&&!d&&A.append(this.createIconButton("arrow-bar-left",1,"첫 페이지로 이동","first")),s&&!d&&A.append(this.createIconButton("chevron-left",u-1,"이전 페이지로 이동","previous")),this.getPageNumbers().forEach((t,e)=>{if("..."===t){const t=document.createElement("li");t.className="designbase-wc-pagination__ellipsis";const e=document.createElement("span");return e.className="designbase-wc-pagination__ellipsis-text",e.textContent="...",t.append(e),void A.append(t)}"number"==typeof t&&A.append(this.createPageButton(t,i))}),s&&!p&&A.append(this.createIconButton("chevron-right",u+1,"다음 페이지로 이동","next")),n&&!p&&A.append(this.createIconButton("arrow-bar-right",b,"마지막 페이지로 이동","last")),m.append(A),h.append(m),r&&h.append(this.createPageSizeSelector(t,g,i)),this.append(h)}getPageSizeOptions(){const t=this.getAttribute("page-size-options");if(!t)return[10,20,50,100];try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(t=>Number(t)).filter(t=>!Number.isNaN(t))}catch{}return[10,20,50,100]}getTotalLabel(t,e,a){return`${(a-1)*e+1}-${Math.min(a*e,t)} / ${t}개`}createPageSizeSelector(t,e,a){const i=document.createElement("div");i.className="designbase-wc-pagination__page-size";const n=document.createElement("label");n.className="designbase-wc-pagination__page-size-label";const s=document.createElement("span");s.className="designbase-wc-pagination__page-size-text",s.textContent="페이지당";const r=document.createElement("db-select");return r.className="designbase-wc-pagination__page-size-select",r.setAttribute("size",t),r.setAttribute("show-clear-button","false"),r.setAttribute("searchable","false"),r.setAttribute("options",JSON.stringify(this.getPageSizeOptions().map(t=>({value:String(t),label:String(t)})))),r.setAttribute("value",String(e)),a&&r.setAttribute("disabled",""),r.addEventListener("db-change",t=>{const a=t.detail,i=Number(a?.value);Number.isNaN(i)||i===e||(this.setAttribute("page-size",String(i)),this.dispatchEvent(new CustomEvent("db-page-size-change",{detail:{pageSize:i},bubbles:!0,composed:!0})))}),n.append(s,r),i.append(n),i}getPageNumbers(){const t=Number(this.getAttribute("sibling-count")||1),e=Number(this.getAttribute("boundary-count")||1),a=this.totalPages,i=this.currentPage;if(a<=2*t+3+2)return Array.from({length:a},(t,e)=>e+1);const n=Math.max(i-t,e),s=Math.min(i+t,a-e+1),r=n>e+2,o=s<a-e-1;if(!r&&o){const e=3+2*t;return[...Array.from({length:e},(t,e)=>e+1),"...",a]}if(r&&!o){const e=3+2*t;return[1,"...",...Array.from({length:e},(t,i)=>a-e+i+1)]}if(r&&o){return[1,"...",...Array.from({length:s-n+1},(t,e)=>n+e),"...",a]}return Array.from({length:a},(t,e)=>e+1)}createPageButton(t,e){const a=t===this.currentPage,i=document.createElement("li");i.className="designbase-wc-pagination__item";const n=document.createElement("button");return n.type="button",n.className=["designbase-wc-pagination__button",a&&"designbase-wc-pagination__button--active"].filter(Boolean).join(" "),n.textContent=String(t),n.disabled=e,a&&n.setAttribute("aria-current","page"),n.setAttribute("aria-label",`페이지 ${t}로 이동`),n.addEventListener("click",()=>this.select(t)),i.append(n),i}createIconButton(e,a,i,n){const s=document.createElement("li");s.className="designbase-wc-pagination__item";const r=document.createElement("button");return r.type="button",r.className=`designbase-wc-pagination__button designbase-wc-pagination__button--${n}`,r.disabled=this.hasAttribute("disabled"),r.setAttribute("aria-label",i),r.append(t(e,this.iconSize())),r.addEventListener("click",()=>this.select(a)),s.append(r),s}select(t){this.hasAttribute("disabled")||t===this.currentPage||t<1||t>this.totalPages||(this.currentPage=t,this.dispatchEvent(new CustomEvent("db-change",{detail:{page:t},bubbles:!0,composed:!0})))}}customElements.get("db-pagination")||customElements.define("db-pagination",DbPagination);export{DbPagination};
+import { createDbIcon } from './db-icons.js';
+
+class DbPagination extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            'current-page',
+            'total-pages',
+            'total-items',
+            'page-size',
+            'page-size-options',
+            'size',
+            'variant',
+            'alignment',
+            'show-first-last',
+            'show-previous-next',
+            'show-page-size-selector',
+            'show-total',
+            'sibling-count',
+            'boundary-count',
+            'disabled',
+            'full-width',
+        ];
+    }
+    get currentPage() {
+        return Number(this.getAttribute('current-page') || 1);
+    }
+    set currentPage(value) {
+        this.setAttribute('current-page', String(value));
+    }
+    get totalPages() {
+        return Number(this.getAttribute('total-pages') || 1);
+    }
+    set totalPages(value) {
+        this.setAttribute('total-pages', String(value));
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        if (!this.isConnected)
+            return;
+        this.render();
+    }
+    iconSize() {
+        const size = this.getAttribute('size') || 'm';
+        if (size === 's')
+            return 12;
+        if (size === 'l')
+            return 16;
+        return 14;
+    }
+    render() {
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const alignment = this.getAttribute('alignment') || 'center';
+        const disabled = this.hasAttribute('disabled');
+        const showFirstLast = this.hasAttribute('show-first-last');
+        const showPreviousNext = this.getAttribute('show-previous-next') !== 'false';
+        const showPageSizeSelector = this.hasAttribute('show-page-size-selector');
+        const showTotal = this.hasAttribute('show-total');
+        const fullWidth = this.hasAttribute('full-width') || showPageSizeSelector || showTotal;
+        const totalItems = Number(this.getAttribute('total-items') || 0);
+        const pageSize = Number(this.getAttribute('page-size') || 10);
+        const currentPage = this.currentPage;
+        const totalPages = this.totalPages;
+        const isFirstPage = currentPage <= 1;
+        const isLastPage = currentPage >= totalPages;
+        this.className = [
+            'designbase-wc-pagination',
+            `designbase-wc-pagination--${size}`,
+            `designbase-wc-pagination--${variant}`,
+            `designbase-wc-pagination--${alignment}`,
+            disabled && 'designbase-wc-pagination--disabled',
+            fullWidth && 'designbase-wc-pagination--full-width',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.setAttribute('role', 'navigation');
+        this.setAttribute('aria-label', '페이지 네비게이션');
+        this.replaceChildren();
+        const container = document.createElement('div');
+        container.className = [
+            'designbase-wc-pagination__container',
+            fullWidth && 'designbase-wc-pagination__container--full-width',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        if (showTotal && totalItems > 0) {
+            const totalEl = document.createElement('div');
+            totalEl.className = 'designbase-wc-pagination__total';
+            totalEl.textContent = this.getTotalLabel(totalItems, pageSize, currentPage);
+            container.append(totalEl);
+        }
+        const nav = document.createElement('nav');
+        nav.className = 'designbase-wc-pagination__nav';
+        nav.setAttribute('aria-label', '페이지 네비게이션');
+        const list = document.createElement('ul');
+        list.className = 'designbase-wc-pagination__list';
+        if (showFirstLast && !isFirstPage) {
+            list.append(this.createIconButton('arrow-bar-left', 1, '첫 페이지로 이동', 'first'));
+        }
+        if (showPreviousNext && !isFirstPage) {
+            list.append(this.createIconButton('chevron-left', currentPage - 1, '이전 페이지로 이동', 'previous'));
+        }
+        this.getPageNumbers().forEach((page, index) => {
+            if (page === '...') {
+                const item = document.createElement('li');
+                item.className = 'designbase-wc-pagination__ellipsis';
+                const text = document.createElement('span');
+                text.className = 'designbase-wc-pagination__ellipsis-text';
+                text.textContent = '...';
+                item.append(text);
+                list.append(item);
+                return;
+            }
+            if (typeof page !== 'number')
+                return;
+            list.append(this.createPageButton(page, disabled));
+        });
+        if (showPreviousNext && !isLastPage) {
+            list.append(this.createIconButton('chevron-right', currentPage + 1, '다음 페이지로 이동', 'next'));
+        }
+        if (showFirstLast && !isLastPage) {
+            list.append(this.createIconButton('arrow-bar-right', totalPages, '마지막 페이지로 이동', 'last'));
+        }
+        nav.append(list);
+        container.append(nav);
+        if (showPageSizeSelector) {
+            container.append(this.createPageSizeSelector(size, pageSize, disabled));
+        }
+        this.append(container);
+    }
+    getPageSizeOptions() {
+        const raw = this.getAttribute('page-size-options');
+        if (!raw)
+            return [10, 20, 50, 100];
+        try {
+            const parsed = JSON.parse(raw);
+            if (Array.isArray(parsed)) {
+                return parsed.map((value) => Number(value)).filter((value) => !Number.isNaN(value));
+            }
+        }
+        catch {
+            // ignore invalid JSON
+        }
+        return [10, 20, 50, 100];
+    }
+    getTotalLabel(totalItems, pageSize, currentPage) {
+        const start = (currentPage - 1) * pageSize + 1;
+        const end = Math.min(currentPage * pageSize, totalItems);
+        return `${start}-${end} / ${totalItems}개`;
+    }
+    createPageSizeSelector(size, pageSize, disabled) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'designbase-wc-pagination__page-size';
+        const label = document.createElement('label');
+        label.className = 'designbase-wc-pagination__page-size-label';
+        const text = document.createElement('span');
+        text.className = 'designbase-wc-pagination__page-size-text';
+        text.textContent = '페이지당';
+        const select = document.createElement('db-select');
+        select.className = 'designbase-wc-pagination__page-size-select';
+        select.setAttribute('size', size);
+        select.setAttribute('show-clear-button', 'false');
+        select.setAttribute('searchable', 'false');
+        select.setAttribute('options', JSON.stringify(this.getPageSizeOptions().map((option) => ({
+            value: String(option),
+            label: String(option),
+        }))));
+        select.setAttribute('value', String(pageSize));
+        if (disabled)
+            select.setAttribute('disabled', '');
+        select.addEventListener('db-change', (event) => {
+            const detail = event.detail;
+            const nextSize = Number(detail?.value);
+            if (Number.isNaN(nextSize) || nextSize === pageSize)
+                return;
+            this.setAttribute('page-size', String(nextSize));
+            this.dispatchEvent(new CustomEvent('db-page-size-change', {
+                detail: { pageSize: nextSize },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+        label.append(text, select);
+        wrapper.append(label);
+        return wrapper;
+    }
+    getPageNumbers() {
+        const siblingCount = Number(this.getAttribute('sibling-count') || 1);
+        const boundaryCount = Number(this.getAttribute('boundary-count') || 1);
+        const totalPages = this.totalPages;
+        const currentPage = this.currentPage;
+        const totalNumbers = siblingCount * 2 + 3;
+        const totalBlocks = totalNumbers + 2;
+        if (totalPages <= totalBlocks) {
+            return Array.from({ length: totalPages }, (_, index) => index + 1);
+        }
+        const leftSiblingIndex = Math.max(currentPage - siblingCount, boundaryCount);
+        const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages - boundaryCount + 1);
+        const shouldShowLeftDots = leftSiblingIndex > boundaryCount + 2;
+        const shouldShowRightDots = rightSiblingIndex < totalPages - boundaryCount - 1;
+        if (!shouldShowLeftDots && shouldShowRightDots) {
+            const leftItemCount = 3 + 2 * siblingCount;
+            return [...Array.from({ length: leftItemCount }, (_, index) => index + 1), '...', totalPages];
+        }
+        if (shouldShowLeftDots && !shouldShowRightDots) {
+            const rightItemCount = 3 + 2 * siblingCount;
+            return [
+                1,
+                '...',
+                ...Array.from({ length: rightItemCount }, (_, index) => totalPages - rightItemCount + index + 1),
+            ];
+        }
+        if (shouldShowLeftDots && shouldShowRightDots) {
+            const middleRange = Array.from({ length: rightSiblingIndex - leftSiblingIndex + 1 }, (_, index) => leftSiblingIndex + index);
+            return [1, '...', ...middleRange, '...', totalPages];
+        }
+        return Array.from({ length: totalPages }, (_, index) => index + 1);
+    }
+    createPageButton(page, disabled) {
+        const isActive = page === this.currentPage;
+        const item = document.createElement('li');
+        item.className = 'designbase-wc-pagination__item';
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = [
+            'designbase-wc-pagination__button',
+            isActive && 'designbase-wc-pagination__button--active',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        button.textContent = String(page);
+        button.disabled = disabled;
+        if (isActive)
+            button.setAttribute('aria-current', 'page');
+        button.setAttribute('aria-label', `페이지 ${page}로 이동`);
+        button.addEventListener('click', () => this.select(page));
+        item.append(button);
+        return item;
+    }
+    createIconButton(iconName, page, label, modifier) {
+        const item = document.createElement('li');
+        item.className = 'designbase-wc-pagination__item';
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = `designbase-wc-pagination__button designbase-wc-pagination__button--${modifier}`;
+        button.disabled = this.hasAttribute('disabled');
+        button.setAttribute('aria-label', label);
+        button.append(createDbIcon(iconName, this.iconSize()));
+        button.addEventListener('click', () => this.select(page));
+        item.append(button);
+        return item;
+    }
+    select(page) {
+        if (this.hasAttribute('disabled') || page === this.currentPage || page < 1 || page > this.totalPages) {
+            return;
+        }
+        this.currentPage = page;
+        this.dispatchEvent(new CustomEvent('db-change', {
+            detail: { page },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+if (!customElements.get('db-pagination')) {
+    customElements.define('db-pagination', DbPagination);
+}
+
+export { DbPagination };