@sellmate/design-system 1.27.1 → 1.29.0

package/dist/esm/sd-pagination.entry.js

@@ -0,0 +1,171 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-Dz490Ukt.js';
+
+const pagination = {
+	height: "24",
+	paddingX: "6",
+	radius: "6",
+	gap: "12",
+	move: {
+		gap: "4"
+	},
+	icon: "12",
+	typography: {
+		"default": {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "500",
+			lineHeight: "20"},
+		selected: {
+			fontWeight: "700"}
+	},
+	item: {
+		bg: {
+			hover: "#EEEEEE",
+			selected: "#E6F1FF"
+		},
+		content: {
+			"default": "#555555",
+			hover: "#004290",
+			selected: "#004290"
+		}
+	},
+	simple: {
+		gap: "8"
+	}
+};
+var paginationTokens = {
+	pagination: pagination
+};
+
+const PAGINATION_LAYOUT = {
+    height: `${paginationTokens.pagination.height}px`,
+    paddingX: `${paginationTokens.pagination.paddingX}px`,
+    radius: `${paginationTokens.pagination.radius}px`,
+    gap: `${paginationTokens.pagination.gap}px`,
+    moveGap: `${paginationTokens.pagination.move.gap}px`,
+    simpleGap: `${paginationTokens.pagination.simple.gap}px`,
+    iconSize: Number(paginationTokens.pagination.icon),
+};
+const PAGINATION_TYPOGRAPHY = {
+    fontFamily: paginationTokens.pagination.typography.default.fontFamily,
+    fontSize: `${paginationTokens.pagination.typography.default.fontSize}px`,
+    lineHeight: `${paginationTokens.pagination.typography.default.lineHeight}px`,
+    fontWeightDefault: paginationTokens.pagination.typography.default.fontWeight,
+    fontWeightSelected: paginationTokens.pagination.typography.selected.fontWeight,
+};
+const PAGINATION_COLORS = {
+    contentDefault: paginationTokens.pagination.item.content.default,
+    contentHover: paginationTokens.pagination.item.content.hover,
+    contentSelected: paginationTokens.pagination.item.content.selected,
+    bgHover: paginationTokens.pagination.item.bg.hover,
+    bgSelected: paginationTokens.pagination.item.bg.selected,
+    // TODO: 토큰 반영 후 교체 — nav 화살표 색상은 현재 토큰에 없음
+    iconDefault: '#888888',
+};
+
+const sdPaginationCss = () => `sd-pagination{display:inline-flex}.sd-pagination{display:inline-flex;align-items:center;gap:var(--sd-pagination-gap);font-family:var(--sd-pagination-font-family)}.sd-pagination__group{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);min-width:calc(var(--sd-pagination-height) * 2 + var(--sd-pagination-move-gap))}.sd-pagination__group--prev{justify-content:flex-end}.sd-pagination__group--next{justify-content:flex-start}.sd-pagination__numbers{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap)}.sd-pagination__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-height);height:var(--sd-pagination-height);padding:0;background:transparent;border:0;border-radius:var(--sd-pagination-radius);cursor:pointer;outline:none}.sd-pagination__nav:hover{background-color:var(--sd-pagination-bg-hover)}.sd-pagination__item{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-item-width);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);background:transparent;border:0;border-radius:var(--sd-pagination-radius);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height);cursor:pointer;outline:none;box-sizing:border-box}.sd-pagination__item:hover{background-color:var(--sd-pagination-bg-hover);color:var(--sd-pagination-content-hover)}.sd-pagination__item--selected{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}.sd-pagination__item--selected:hover{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected)}.sd-pagination__info{display:inline-flex;align-items:center;gap:var(--sd-pagination-simple-gap);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height)}.sd-pagination__current{color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}`;
+
+const PER_PAGE = 10;
+const BUTTON_WIDTH = {
+    1: 24,
+    2: 34,
+    3: 40,
+    4: 48,
+    5: 56,
+};
+const SdPagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pageChange = createEvent(this, "sdPageChange", 7);
+    }
+    /** 현재 페이지 번호 */
+    currentPage = 1;
+    /** 마지막 페이지 번호 */
+    lastPage = 1;
+    /** true이면 현재/마지막 페이지만 표시하는 단순 모드 */
+    simple = false;
+    /** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
+    pageChange;
+    get pageNumbers() {
+        const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
+        const end = Math.min(start + PER_PAGE - 1, this.lastPage);
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    }
+    get buttonWidth() {
+        const lastPageNum = this.pageNumbers.at(-1) ?? 1;
+        const maxPageLength = lastPageNum.toString().length;
+        return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
+    }
+    get isFirstGroup() {
+        return this.currentPage <= PER_PAGE;
+    }
+    get isLastGroup() {
+        const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
+        return startPageGroup + PER_PAGE - 1 >= this.lastPage;
+    }
+    handlePageChange = (page) => {
+        if (page < 1 || page > this.lastPage)
+            return;
+        this.currentPage = page;
+        this.pageChange.emit(page);
+    };
+    handleGroupChange = (direction) => {
+        const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
+        const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
+        this.handlePageChange(newPage);
+    };
+    renderNavButton(iconName, ariaLabel, onClick) {
+        return (h("button", { type: "button", class: "sd-pagination__nav", "aria-label": ariaLabel, onClick: onClick }, h("sd-icon", { name: iconName, size: PAGINATION_LAYOUT.iconSize, color: PAGINATION_COLORS.iconDefault })));
+    }
+    renderPrevButtons() {
+        if (this.simple) {
+            if (this.currentPage <= 1)
+                return null;
+            return (h(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page', () => this.handlePageChange(this.currentPage - 1))));
+        }
+        if (this.isFirstGroup)
+            return null;
+        return (h(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page group', () => this.handleGroupChange('backward'))));
+    }
+    renderNextButtons() {
+        if (this.simple) {
+            if (this.currentPage >= this.lastPage)
+                return null;
+            return (h(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page', () => this.handlePageChange(this.currentPage + 1)), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
+        }
+        if (this.isLastGroup)
+            return null;
+        return (h(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page group', () => this.handleGroupChange('forward')), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
+    }
+    render() {
+        const cssVars = {
+            '--sd-pagination-height': PAGINATION_LAYOUT.height,
+            '--sd-pagination-padding-x': PAGINATION_LAYOUT.paddingX,
+            '--sd-pagination-radius': PAGINATION_LAYOUT.radius,
+            '--sd-pagination-gap': PAGINATION_LAYOUT.gap,
+            '--sd-pagination-move-gap': PAGINATION_LAYOUT.moveGap,
+            '--sd-pagination-simple-gap': PAGINATION_LAYOUT.simpleGap,
+            '--sd-pagination-font-family': PAGINATION_TYPOGRAPHY.fontFamily,
+            '--sd-pagination-font-size': PAGINATION_TYPOGRAPHY.fontSize,
+            '--sd-pagination-line-height': PAGINATION_TYPOGRAPHY.lineHeight,
+            '--sd-pagination-font-weight-default': PAGINATION_TYPOGRAPHY.fontWeightDefault,
+            '--sd-pagination-font-weight-selected': PAGINATION_TYPOGRAPHY.fontWeightSelected,
+            '--sd-pagination-content': PAGINATION_COLORS.contentDefault,
+            '--sd-pagination-content-hover': PAGINATION_COLORS.contentHover,
+            '--sd-pagination-content-selected': PAGINATION_COLORS.contentSelected,
+            '--sd-pagination-bg-hover': PAGINATION_COLORS.bgHover,
+            '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
+            '--sd-pagination-item-width': `${this.buttonWidth}px`,
+        };
+        return (h("div", { key: '78ef11e415c8d086e0a5f582fa5b4568ed3e49a4', class: {
+                'sd-pagination': true,
+                'sd-pagination--simple': this.simple,
+            }, style: cssVars }, h("div", { key: '360cdb85715508d2f8155851b11928031015909c', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+                'sd-pagination__item': true,
+                'sd-pagination__item--selected': this.currentPage === n,
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '3726aaab29e0347cf7ae5e2aebad268e33eb33c7', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+    }
+};
+SdPagination.style = sdPaginationCss();
+
+export { SdPagination as sd_pagination };

package/dist/esm/sd-popover.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-BZg-6aSz.js';
-import { T as TooltipArrow } from './tooltipArrow-BAi-pktU.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-Dz490Ukt.js';
+import { T as TooltipArrow } from './tooltipArrow-CEHVt90h.js';
 
 const popover = {
 	"default": {

package/dist/esm/sd-popup.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-BZg-6aSz.js';
+import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
 import { o as overlayTokens } from './component.overlay-De0OtxK5.js';
-import { s as systemTokens } from './system-BJfiMC9H.js';
+import { s as systemTokens } from './system-Bth2l1cy.js';
 
 const popup$1 = {
 	header: {
@@ -102,7 +102,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (h("div", { key: 'cc0381250b37b498e93fd7f8d932ad95ff802bcc', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '07b4378a9c8d292f73e0a6307ec2b6335087cc9f', class: "sd-popup__header" }, h("h2", { key: 'a17318a803d2d825e0a85f43ff436944424bb213', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'f2147c40fbd425565f6e61e62e2da2d97eacb27a', class: "sd-popup__body" }, h("slot", { key: '5600679290a775e53e838fd5ea2d9cfc1008130f' })), this.useFooter && (h("footer", { key: '2bfa07724438b8afa03a0654359ab760498ef7dc', class: "sd-popup__footer" }, h("div", { key: 'd70c88b18b23bd8d1b3f6d4899d65b25e378b9aa', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '42d7108b390bf460398dcbc128a837784ba5c544', name: "footer-left" })), h("sd-button", { key: '0525a19c52caef0dcaf0eb2783391132d53d18db', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: 'd86bb173d6fe8540e8b96f5dff4c8285cbf9ff91', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '0f006173fda3be589cdc208f382ed1898c49396a', class: "sd-popup__header" }, h("h2", { key: '62179c692f08b21e6386175b153d4f8c1013ea53', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'a1a786d9d71f0a17eb4f3bce3a6b1ae8a1fa3367', class: "sd-popup__body" }, h("slot", { key: '40b772fd34963ef78507dddf81474eb5e1a58174' })), this.useFooter && (h("footer", { key: '40c981163f237b44764dec66205e01203a0d150d', class: "sd-popup__footer" }, h("div", { key: '0c91d37584c0bc5f74b510430a83889aea4abb93', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '120c41484fee23d160a1fa7b5ab7cd70c1422d12', name: "footer-left" })), h("sd-button", { key: '6dadd08ab99380d0e55730888fbbd2fea88bcfe9', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();

package/dist/esm/sd-radio-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BZg-6aSz.js';
+import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
 
 const radioButton = {
 	xs: {

package/dist/esm/sd-radio.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BZg-6aSz.js';
+import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
 
 const radio = {
 	size: "16",
@@ -31,8 +31,7 @@ const radio = {
 	label: {
 		"default": "#222222",
 		disabled: "#888888"
-	}
-};
+	}};
 var radioTokens = {
 	radio: radio
 };