@ncds/ui-admin 1.8.0 → 1.8.2

package/dist/ui-admin/assets/styles/style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 :root {
   --primary-red-50: #fffafd;
   --primary-red-100: #ffeaee;
@@ -112,6 +113,8 @@
   --font-size-display-md: 36px;
   --font-size-display-lg: 48px;
   --font-size-display-xl: 60px;
+  /* z-index (고도몰 기준) */
+  --z-index-tooltip: 2000;
 }
 
 :root {
@@ -960,6 +963,10 @@ button {
 .ncua-checkbox-input:has(input:disabled:checked)::before {
   background-image: var(--check-icon-disabled);
 }
+.ncua-checkbox-input.has-indeterminate :where(input) {
+  border-color: var(--gray-700);
+  background-color: var(--gray-50);
+}
 .ncua-checkbox-input.has-indeterminate::before {
   background-image: var(--indeterminate-icon);
 }
@@ -2804,6 +2811,8 @@ button {
   display: flex;
   flex-direction: column;
   gap: 4px;
+  max-width: 320px;
+  font-size: var(--font-size-xxs);
   box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
 }
 .ncua-tooltip__bg::after {
@@ -2814,7 +2823,9 @@ button {
 .ncua-tooltip__content {
   line-height: 14px;
   width: max-content;
+  max-width: 296px;
   font-weight: 100;
+  word-break: keep-all;
 }
 .ncua-tooltip__close-button {
   position: absolute;
@@ -3061,7 +3072,7 @@ button {
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: 2000;
+  z-index: var(--z-index-tooltip);
   display: block;
 }
 
@@ -3071,11 +3082,15 @@ button {
   top: -99999px;
   opacity: 0;
   transition: opacity 0.18s ease;
-  pointer-events: auto;
+  pointer-events: none;
+  z-index: var(--z-index-tooltip);
   right: auto;
   bottom: auto;
   transform: none;
 }
+.ncua-tooltip-panel.ncua-tooltip__bg--visible {
+  pointer-events: auto;
+}
 
 :root {
   --select-height-xs: 28px;
@@ -3523,8 +3538,17 @@ button {
 .ncua-pagination__before {
   margin-inline: 4px 8px;
 }
+.ncua-pagination__item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
 .ncua-pagination__item + .ncua-pagination__item {
   margin-inline-start: 4px;
+  margin-top: 0;
 }
 .ncua-pagination__page-num {
   font-size: 14px;
@@ -5584,29 +5608,53 @@ button {
   box-shadow: var(--shadow-xs);
   overflow: hidden;
 }
+.ncua-table__scroll-area {
+  position: relative;
+}
+.ncua-table__scroll-area:hover .ncua-table__scrollbar, .ncua-table__scroll-area[data-dragging] .ncua-table__scrollbar {
+  opacity: 1;
+}
 .ncua-table__scroll-container {
   width: 100%;
   overflow-y: auto;
+  scrollbar-width: none;
 }
 .ncua-table__scroll-container::-webkit-scrollbar {
-  width: 16px;
+  display: none;
 }
-.ncua-table__scroll-container::-webkit-scrollbar-track {
-  background: transparent;
-  padding: 4px;
-  margin-top: 40px;
+.ncua-table__scrollbar {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  bottom: 2px;
+  width: 6px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+  border-radius: 8px;
 }
-.ncua-table__scroll-container::-webkit-scrollbar-thumb {
-  background: var(--gray-200);
+.ncua-table__scrollbar-thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background: var(--gray-100);
   border-radius: 8px;
-  border: 5px solid transparent;
-  background-clip: padding-box;
-  min-height: 40px;
+  cursor: pointer;
+  pointer-events: auto;
+}
+.ncua-table__scrollbar-thumb:hover {
+  background: var(--gray-200);
+}
+.ncua-table__scrollbar-thumb:active {
+  background: var(--gray-300);
+  cursor: grabbing;
 }
 .ncua-table__table {
   display: table;
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
   border-spacing: 0;
   table-layout: fixed;
   margin-bottom: 0;
@@ -5617,6 +5665,7 @@ button {
 }
 .ncua-table__header tr {
   border-bottom: none;
+  height: 40px;
 }
 .ncua-table__header-cell {
   padding: 0 16px;
@@ -5651,9 +5700,16 @@ button {
 .ncua-table__header-cell-text {
   white-space: nowrap;
 }
+.ncua-table .ncua-checkbox-input,
+.ncua-table .ncua-radio-input {
+  vertical-align: middle;
+}
 .ncua-table .ncua-checkbox-input::before {
   pointer-events: none;
 }
+.ncua-table__header-cell:has(> .ncua-checkbox-input), .ncua-table__header-cell:has(> .ncua-radio-input), .ncua-table__cell:has(> .ncua-checkbox-input), .ncua-table__cell:has(> .ncua-radio-input) {
+  line-height: 0;
+}
 .ncua-table__sort-icon {
   display: inline-flex;
   align-items: center;
@@ -5676,20 +5732,21 @@ button {
   background: var(--base-white);
 }
 .ncua-table__row {
-  min-height: 48px;
+  height: 48px;
   background: var(--base-white);
   transition: background-color 0.15s ease;
 }
 .ncua-table__row:nth-child(2n), .ncua-table__row:nth-child(2n+1) {
   background-color: var(--base-white);
 }
-.ncua-table__row td {
+.ncua-table__row td,
+.ncua-table__row th.ncua-table__cell {
   border-bottom: 1px solid var(--gray-100);
 }
-.ncua-table__row:last-child td {
+.ncua-table__row:last-child td, .ncua-table__row:last-child th.ncua-table__cell {
   border-bottom: none;
 }
-.ncua-table__row--selected {
+.ncua-table__row--selected:nth-child(n) {
   background: var(--gray-50);
 }
 .ncua-table__row--selected td:first-child {
@@ -5705,23 +5762,39 @@ button {
   background: var(--base-black);
   z-index: 1;
 }
-.ncua-table__row--warning {
-  background: var(--warning-50, #fffaeb);
+.ncua-table__row--warning.ncua-table__row--selected:nth-child(n) {
+  background: var(--orange-50);
 }
-.ncua-table__row--warning td {
-  border-bottom-color: var(--warning-200, #fedf89);
+.ncua-table__row--warning.ncua-table__row--selected td,
+.ncua-table__row--warning.ncua-table__row--selected th {
+  background: var(--orange-50);
 }
-.ncua-table__row--error {
-  background: var(--error-50, #fef3f2);
+.ncua-table__row--error.ncua-table__row--selected:nth-child(n) {
+  background: var(--primary-red-50);
 }
-.ncua-table__row--error td {
-  border-bottom-color: var(--error-200, #fecdca);
+.ncua-table__row--error.ncua-table__row--selected td,
+.ncua-table__row--error.ncua-table__row--selected th {
+  background: var(--primary-red-50);
 }
-.ncua-table--hoverable .ncua-table__row:not(.ncua-table__row--selected):not(.ncua-table__row--warning):not(.ncua-table__row--error):hover {
-  background: var(--gray-50);
+.ncua-table--hoverable .ncua-table__row:not(.ncua-table__row--selected):hover {
+  background: color-mix(in srgb, var(--gray-50) 40%, transparent);
 }
-.ncua-table--hoverable .ncua-table__row--selected:hover {
-  background: var(--gray-100);
+.ncua-table--hoverable .ncua-table__row--selected:not(.ncua-table__row--warning):not(.ncua-table__row--error):hover {
+  background: color-mix(in srgb, var(--gray-200) 10%, var(--gray-50));
+}
+.ncua-table--hoverable .ncua-table__row--selected.ncua-table__row--warning:hover {
+  background: color-mix(in srgb, var(--gray-200) 10%, var(--orange-50));
+}
+.ncua-table--hoverable .ncua-table__row--selected.ncua-table__row--warning:hover td,
+.ncua-table--hoverable .ncua-table__row--selected.ncua-table__row--warning:hover th {
+  background: transparent;
+}
+.ncua-table--hoverable .ncua-table__row--selected.ncua-table__row--error:hover {
+  background: color-mix(in srgb, var(--gray-200) 10%, var(--primary-red-50));
+}
+.ncua-table--hoverable .ncua-table__row--selected.ncua-table__row--error:hover td,
+.ncua-table--hoverable .ncua-table__row--selected.ncua-table__row--error:hover th {
+  background: transparent;
 }
 .ncua-table__cell {
   padding: 10px 8px;
@@ -5732,13 +5805,13 @@ button {
   text-align: center;
   vertical-align: middle;
   border-right: 1px solid var(--gray-100);
-  min-height: 48px;
+  height: 48px;
   word-break: break-word;
 }
 .ncua-table__cell:last-child {
   border-right: none;
 }
-.ncua-table__checkbox-cell {
+.ncua-table__checkbox-cell, .ncua-table__radio-cell {
   width: 56px;
   min-width: 56px;
   max-width: 56px;
@@ -5746,13 +5819,13 @@ button {
   vertical-align: middle;
   border-right: 1px solid var(--gray-100);
 }
-.ncua-table__checkbox-cell--header {
+.ncua-table__checkbox-cell--header, .ncua-table__radio-cell--header {
   padding: 0 16px;
   background: var(--gray-100);
   border-right-color: var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
 }
-.ncua-table__checkbox-cell--body {
+.ncua-table__checkbox-cell--body, .ncua-table__radio-cell--body {
   padding: 12px 16px;
   height: 48px;
 }
@@ -5803,16 +5876,18 @@ button {
 .ncua-table--selectable .ncua-table__table {
   background: var(--base-white);
 }
+.ncua-table--selectable .ncua-table__scroll-area,
 .ncua-table--selectable .ncua-table__scroll-container,
-.ncua-table--selectable > .ncua-table__table {
+.ncua-table--selectable > .ncua-table__table:not(.ncua-table__table--head) {
   box-shadow: 0 1px 0 0 var(--gray-200);
 }
 .ncua-table--selectable:has(.ncua-table__footer) {
   padding-bottom: 0;
   background: var(--base-white);
 }
+.ncua-table--selectable:has(.ncua-table__footer) .ncua-table__scroll-area,
 .ncua-table--selectable:has(.ncua-table__footer) .ncua-table__scroll-container,
-.ncua-table--selectable:has(.ncua-table__footer) > .ncua-table__table {
+.ncua-table--selectable:has(.ncua-table__footer) > .ncua-table__table:not(.ncua-table__table--head) {
   box-shadow: none;
 }
 .ncua-table--in-data-grid.ncua-table--selectable .ncua-table__header-cell:first-child,
@@ -5821,40 +5896,64 @@ button {
   border-left: none;
 }
 .ncua-table--in-data-grid.ncua-table--selectable.ncua-table--fixed-header .ncua-table__header-cell:first-child {
-  box-shadow: inset 0 -1px 0 0 var(--gray-200), inset -1px 0 0 0 var(--gray-200);
+  border-left: none;
 }
 .ncua-table--fixed-header {
   position: relative;
-}
-.ncua-table--fixed-header::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 16px;
-  height: 40px;
-  background: var(--gray-100);
-  border-bottom: 1px solid var(--gray-200);
-  z-index: 11;
-  pointer-events: none;
+  overflow: clip;
 }
 .ncua-table--fixed-header .ncua-table__header-cell {
   position: sticky;
   top: 0;
   z-index: 10;
-  border-bottom: none;
-  border-right: none;
-  box-shadow: inset 0 -1px 0 0 var(--gray-200), inset -1px 0 0 0 var(--gray-200);
+  padding: 0 16px;
+  height: 40px;
 }
-.ncua-table--fixed-header .ncua-table__header-cell:last-child {
-  border-right: none;
-  box-shadow: inset 0 -1px 0 0 var(--gray-200);
+.ncua-table--fixed-header .ncua-table__scrollbar {
+  top: calc(40px + 8px);
+  right: 4px;
+  bottom: 8px;
+}
+.ncua-table--horizontal .ncua-table__header-cell {
+  height: 40px;
+  min-height: 40px;
+}
+.ncua-table--vertical {
+  overflow: visible;
+}
+.ncua-table--vertical .ncua-table__scroll-container {
+  overflow: visible;
 }
-.ncua-table--fixed-header.ncua-table--selectable .ncua-table__header-cell:first-child {
-  box-shadow: inset 0 -1px 0 0 var(--gray-200), inset -1px 0 0 0 var(--gray-200), inset 1px 0 0 0 var(--gray-100);
+.ncua-table--vertical .ncua-table__body > .ncua-table__row:first-child > .ncua-table__cell:first-child {
+  border-top-left-radius: var(--border-radius-md);
 }
-.ncua-table--vertical .ncua-table__row td:first-child,
-.ncua-table--vertical .ncua-table__row th:first-child {
+.ncua-table--vertical .ncua-table__body > .ncua-table__row:first-child > .ncua-table__cell:last-child {
+  border-top-right-radius: var(--border-radius-md);
+}
+.ncua-table--vertical .ncua-table__body > .ncua-table__row:last-child > .ncua-table__cell:first-child {
+  border-bottom-left-radius: var(--border-radius-md);
+}
+.ncua-table--vertical .ncua-table__body > .ncua-table__row:last-child > .ncua-table__cell:last-child {
+  border-bottom-right-radius: var(--border-radius-md);
+}
+.ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row:first-child > .ncua-table__cell:first-child {
+  border-top-left-radius: 0;
+}
+.ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row:first-child > .ncua-table__cell:last-child {
+  border-top-right-radius: 0;
+}
+.ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row:last-child > .ncua-table__cell:first-child {
+  border-bottom-left-radius: 0;
+}
+.ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row:last-child > .ncua-table__cell:last-child {
+  border-bottom-right-radius: 0;
+}
+.ncua-table--vertical .ncua-table__body > .ncua-table__row td,
+.ncua-table--vertical .ncua-table__body > .ncua-table__row th {
+  height: 48px;
+}
+.ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child,
+.ncua-table--vertical .ncua-table__body > .ncua-table__row th:first-child {
   width: 240px;
   min-width: 240px;
   max-width: 240px;
@@ -5867,12 +5966,31 @@ button {
   background: var(--gray-50);
   border-right: 1px solid var(--gray-100);
 }
-.ncua-table--vertical .ncua-table__row td:last-child,
-.ncua-table--vertical .ncua-table__row th:last-child {
+.ncua-table--vertical .ncua-table__body > .ncua-table__row td:last-child,
+.ncua-table--vertical .ncua-table__body > .ncua-table__row th:last-child {
   padding: 10px 16px;
   text-align: left;
   font-weight: var(--font-weights-commerce-sans-4);
 }
+.ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row td:first-child,
+.ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row th:first-child {
+  width: auto;
+  min-width: 0;
+  max-width: none;
+  padding: 10px 8px;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-4);
+  line-height: var(--line-heights-xs);
+  text-align: center;
+  background: var(--base-white);
+  border-right: 1px solid var(--gray-100);
+}
+.ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row td:last-child,
+.ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row th:last-child {
+  padding: 10px 8px;
+  text-align: center;
+  font-weight: var(--font-weights-commerce-sans-4);
+}
 .ncua-table--vertical .ncua-table__required {
   color: var(--primary-red-500, #ec1d31);
   font-size: var(--font-size-sm);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -17,8 +17,11 @@
     "patch": "pnpm version patch",
     "prestart": "cross-env NODE_ENV=production pnpm run build",
     "publish:npm": "pnpm run build:npm && npm publish --access=public",
+    "publish:npm:alpha": "pnpm run build:npm && npm publish --access=public --tag alpha",
     "publish:cdn": "pnpm run build:cdn && node scripts/publish-cdn.js",
     "start": "webpack --node-env development",
+    "check:meta": "tsx scripts/check-meta.ts",
+    "test": "vitest run --config vitest.config.ts",
     "tsc": "tsc --pretty --listFiles"
   },
   "author": {
@@ -108,7 +111,9 @@
     "style-loader": "3.3.4",
     "ts-loader": "9.5.4",
     "ts-node": "10.9.2",
+    "tsx": "^4.21.0",
     "typescript": "5.0.4",
+    "vitest": "^4.1.4",
     "webpack": "5.105.4",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.2"

package/dist/cjs/assets/scripts/baseBox.js

@@ -1,146 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BaseBox = void 0;
-/**
- * SelectBox와 ComboBox의 공통 기능을 담는 베이스 클래스
- */
-class BaseBox {
-  constructor(element) {
-    this.targetSelect = null;
-    this.isInitializing = true;
-    this.lastValue = '';
-    this.element = element;
-    this.targetSelect = this.findTargetSelect(element);
-  }
-  /** 초기화 완료 처리 (서브클래스 생성자 마지막에 호출) */
-  completeInitialization() {
-    setTimeout(() => {
-      this.isInitializing = false;
-    }, 0);
-  }
-  /**
-   * 타겟 select 요소 찾기
-   */
-  findTargetSelect(element) {
-    // 1. 직접 select 태그인 경우
-    if (element.tagName === 'SELECT') {
-      return element;
-    }
-    // 2. 자식으로 select 태그가 있는 경우
-    const selectChild = element.querySelector('select');
-    if (selectChild) {
-      return selectChild;
-    }
-    // 3. data-target 속성으로 지정된 경우
-    const targetId = element.getAttribute('data-target');
-    if (targetId) {
-      const targetElement = document.getElementById(targetId);
-      if (targetElement && targetElement.tagName === 'SELECT') {
-        return targetElement;
-      }
-    }
-    return null;
-  }
-  /**
-   * HTML에서 속성 파싱
-   */
-  parseAttributesFromHTML() {
-    const attributes = {};
-    if (this.targetSelect) {
-      // select 요소의 속성들
-      if (this.targetSelect.disabled) attributes.disabled = true;
-      if (this.targetSelect.value) attributes.value = this.targetSelect.value;
-      // placeholder는 첫 번째 빈 option에서 가져오기
-      const firstOption = this.targetSelect.querySelector('option[value=""], option:not([value])');
-      if (firstOption) {
-        attributes.placeholder = firstOption.textContent || this.defaultPlaceholder;
-      }
-    }
-    // 컨테이너 요소의 data 속성들
-    const containerAttributes = this.element.dataset;
-    if (containerAttributes.placeholder) attributes.placeholder = containerAttributes.placeholder;
-    if (containerAttributes.size) attributes.size = containerAttributes.size;
-    if (containerAttributes.disabled === 'true') attributes.disabled = true;
-    return attributes;
-  }
-  /**
-   * 값 변환 훅 - SelectBox에서 originalValue 매핑을 위해 오버라이드
-   * 기본 동작: 그대로 문자열 변환
-   */
-  resolveValue(value) {
-    return String(value);
-  }
-  /**
-   * 타겟 select와 동기화 (Single 모드)
-   */
-  syncWithTargetSelect(value) {
-    if (this.targetSelect) {
-      this.targetSelect.value = this.resolveValue(value);
-      const event = new Event('change', {
-        bubbles: true
-      });
-      this.targetSelect.dispatchEvent(event);
-    }
-  }
-  /**
-   * 타겟 select와 동기화 (Multiple 모드)
-   */
-  syncWithTargetSelectMultiple(values) {
-    if (this.targetSelect && this.targetSelect.multiple) {
-      // 모든 옵션 선택 해제
-      Array.from(this.targetSelect.options).forEach(option => {
-        option.selected = false;
-      });
-      // 선택된 값들에 해당하는 옵션들 선택
-      values.forEach(value => {
-        const resolved = this.resolveValue(value);
-        const option = this.targetSelect.querySelector(`option[value="${resolved}"]`);
-        if (option) {
-          option.selected = true;
-        }
-      });
-      const event = new Event('change', {
-        bubbles: true
-      });
-      this.targetSelect.dispatchEvent(event);
-    }
-  }
-  // UnifiedBoxManager 위임 메서드들
-  getOptions() {
-    return this.unifiedSelectBox.getOptions();
-  }
-  updateOptions(newOptions) {
-    this.unifiedSelectBox.updateOptions(newOptions);
-  }
-  setDisabled(disabled) {
-    this.unifiedSelectBox.setDisabled(disabled);
-  }
-  open() {
-    this.unifiedSelectBox.open();
-  }
-  close() {
-    this.unifiedSelectBox.close();
-  }
-  focus() {
-    this.unifiedSelectBox.focus();
-  }
-  destroy() {
-    this.unifiedSelectBox.destroy();
-  }
-  selectAll() {
-    this.unifiedSelectBox.selectAll();
-  }
-  deselectAll() {
-    this.unifiedSelectBox.deselectAll();
-  }
-  isMultiple() {
-    return this.unifiedSelectBox.isMultiple();
-  }
-  toggleSelectAll() {
-    this.unifiedSelectBox.toggleSelectAll();
-  }
-}
-exports.BaseBox = BaseBox;