@ninebone/table 0.1.41 → 0.1.43

package/dist/css/nine-table-sheet.css

@@ -1,540 +0,0 @@
-nine-table-sheet {
-    display: none;
-    grid-template-columns: 1fr 0px;
-    grid-template-rows: 1fr 0px;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    box-sizing: border-box;
-    background: #ffffff;
-    overflow: hidden;
-
-    .ng-sheet-body {
-        display: block;
-        flex: 1 1 auto;
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-        overflow-x: hidden;
-        position: relative;
-        scrollbar-width: none;
-        &::-webkit-scrollbar { display: none; height: 0px; width: 0px; }
-    }
-
-    .ng-sheet-body-content {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        position: sticky;
-    }
-
-
-
-    .ng-container-left, .ng-container-body, .ng-container-right {
-        flex-direction: column;
-        position: relative;
-        background: #ffffff;
-    }
-    .ng-container-body {
-        display: flex;
-    }
-
-    .ng-container-left, .ng-container-right {
-        border: none;
-    }
-
-    .ng-scroll-edge {
-        display: none; /* 평소에는 기본 숨김 */
-    }
-}
-
-nine-table-sheet.active {
-    display: grid;
-}
-
-/* --- 세로 스크롤바가 활성화되었을 때만 CSS로 2열 너비 확장 및 요소 표시 --- */
-nine-table-sheet.vscroll-visible {
-    grid-template-columns: 1fr var(--scrollbar-size);
-
-    nine-table-vscrollbar {
-        display: flex;
-    }
-}
-
-/* --- 가로 스크롤바가 활성화되었을 때만 CSS로 행 높이 확장 및 요소 표시 --- */
-nine-table-sheet.hscroll-visible {
-    grid-template-rows: 1fr var(--scrollbar-size);
-
-    nine-table-hscrollbar, ng-scroll-edge {
-        display: flex;
-    }
-}
-
-
-
-
-nine-table-sheet .ng-container-left {
-    --border-right: 1px solid #e5e7eb;
-    flex-shrink: 0;
-    overflow: hidden !important;
-}
-
-nine-table-sheet .ng-container-body {
-    flex: 1;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-width: none;
-    &::-webkit-scrollbar { display: none; height: 0px; width: 0px; }
-}
-
-nine-table-sheet .ng-container-right {
-    flex-shrink: 0;
-    overflow: hidden;
-}
-nine-table-sheet .ng-container-left, nine-table-sheet .ng-container-right {
-    filter: brightness(99%);
-}
-
-
-
-/* --- 세로 스크롤바 (Grid Row 1, Col 2) --- */
-nine-table-vscrollbar {
-    grid-row: 1;
-    grid-column: 2;
-    width: var(--scrollbar-size);
-    height: 100%;
-    z-index: 50;
-}
-
-/* --- 가로 스크롤바 (Grid Row 2, Col 1 직속 안착) --- */
-nine-table-hscrollbar {
-    grid-row: 2;
-    grid-column: 1;
-    flex-direction: row;
-    height: var(--scrollbar-size);
-    min-height: var(--scrollbar-size);
-    background: #f9fafb;
-    border-top: 1px solid #e5e7eb;
-    z-index: 10;
-    overflow: hidden;
-    width: 100%;
-}
-
-/* --- 우하단 엣지 (Grid Row 2, Col 2) --- */
-nine-table-sheet .ng-scroll-edge {
-    grid-row: 2;
-    grid-column: 2;
-    width: var(--scrollbar-size);
-    height: var(--scrollbar-size);
-    background: #f3f4f6;
-    border-top: 1px solid #e5e7eb;
-    z-index: 10;
-}
-
-nine-table-sheet col {
-    width: attr(width px); /* 브라우저가 지원하는 경우 또는 아래 처럼 고정 셀렉터 활용 */
-}
-
-nine-table-sheet table {
-    border-collapse: separate;
-    border-spacing: 0;
-    width: auto;
-    min-width: 100%;
-    table-layout: fixed;
-    box-sizing: border-box;
-}
-nine-table-sheet[auto-fit-col="true"] table {
-    width: 100%;
-    min-width: 100%;
-}
-
-nine-table-sheet th, nine-table-sheet td {
-    box-sizing: border-box;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    padding: 0px 4px;
-    /* 💡 상하좌우 테두리 공간을 1px 고정으로 4방향 모두 잡아줍니다 */
-    border-top: 1px solid transparent;
-    border-left: 1px solid transparent;
-    border-right: 1px solid #e5e7eb;
-    border-bottom: 1px solid #e5e7eb;
-    font-size: 12px;
-    color: #111827;
-    position: relative;
-    outline: none;
-}
-
-nine-table-sheet th {
-    background-color: #f9fafb;
-    font-weight: 600;
-    text-align: left;
-    user-select: none;
-}
-
-
-
-/* 🎯 셀 선택 영역 스타일 (selected 및 테두리선들) */
-/* --- 🎯 셀 선택 및 포커스(시작점) 관련 스타일 (필수 추가) --- */
-nine-table-sheet td.selected,
-nine-table-sheet th.selected {
-    background-color: rgba(37, 99, 235, 0.08);
-}
-
-nine-table-sheet td.selected-start,
-nine-table-sheet th.selected-start {
-    background-color: transparent;
-}
-
-nine-table-sheet tr td.selected-top    { border-top: 2px solid #2563eb; }
-nine-table-sheet tr td.selected-bottom { border-bottom: 2px solid #2563eb; }
-nine-table-sheet tr td.selected-left   { border-left: 2px solid #2563eb; }
-nine-table-sheet tr td.selected-right  { border-right: 2px solid #2563eb; }
-
-/* 🎯 [복원] 컬럼 접기/펼치기 아이콘 컴포넌트 스타일 */
-nine-table-col-expand {
-    position: absolute;
-    --top: 50%;
-    right: 2px;
-    top: 2px;
-    --transform: translateY(-50%);
-    width: 12px;
-    height: 12px;
-    cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    z-index: 2;
-    pointer-events: auto;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%234b5563" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8m-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5"/></svg>');
-}
-
-nine-table-col-expand.expand {
-    right: 2px;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%234b5563" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5M10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5"/></svg>');
-}
-
-nine-table-col-expand.collapsed {
-    left: 50%;
-    right: auto;
-    transform: translate(-50%, 0);
-}
-
-nine-table-sheet th:has(nine-table-col-expand),
-nine-table-sheet td:has(nine-table-col-expand) {
-    position: relative;
-}
-
-/* 정렬 아이콘 여백 */
-nine-table-sheet thead th.asc::after,
-nine-table-sheet thead td.asc::after,
-nine-table-sheet thead th.desc::after,
-nine-table-sheet thead td.desc::after {
-    content: "";
-    display: inline-block;
-    width: 0;
-    height: 0;
-    flex-shrink: 0;
-    margin-left: 4px;
-    vertical-align: middle;
-}
-
-nine-table-sheet thead th.asc::after,
-nine-table-sheet thead td.asc::after {
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-bottom: 6px solid #2563eb;
-}
-
-nine-table-sheet thead th.desc::after,
-nine-table-sheet thead td.desc::after {
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 6px solid #dc2626;
-}
-
-nine-table-sheet[filtering="true"] .ng-sheet-header th,
-nine-table-sheet[filtering="true"] .ng-sheet-header td {
-    padding-right: 22px !important;
-}
-
-/* 필터 버튼 아이콘 */
-nine-table-filter-button {
-    position: absolute;
-    bottom: 2px;
-    right: 2px;
-    width: 12px;
-    height: 12px;
-    cursor: pointer;
-    z-index: 2;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    display: inline-block;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16"><path fill="%239ca3af" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/></svg>');
-}
-
-nine-table-filter-button.filtered {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16"><path fill="%232563eb" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5z"/></svg>');
-}
-
-nine-table-sheet .ng-nodata-overlay {
-    display: none;
-    position: absolute;
-    top: 0;        /* 👈 상단부터 */
-    left: 0;       /* 👈 좌측부터 */
-    right: 0;      /* 👈 우측까지 꽉 채움 */
-    bottom: 0;     /* 👈 하단까지 꽉 채움 (absolute로 전체 영역 커버) */
-    background: #ffffff;
-    z-index: 20;
-    align-items: center;
-    justify-content: center;
-    font-size: 12px;
-    color: #9ca3af;
-}
-
-
-
-nine-table-sheet .ng-col-mover-indi {
-    position: absolute;
-    width: 2px;
-    background-color: #2563eb;
-    display: none;
-    pointer-events: none;
-    z-index: 10020;
-    box-sizing: border-box;
-}
-
-nine-table-sheet .ng-col-mover-indi::before {
-    content: '';
-    position: absolute;
-    top: -6px;
-    left: -4px;
-    width: 0;
-    height: 0;
-    border-top: 6px solid #2563eb;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-}
-
-nine-table-sheet .ng-col-mover-indi::after {
-    content: '';
-    position: absolute;
-    bottom: -6px;
-    left: -4px;
-    width: 0;
-    height: 0;
-    border-bottom: 6px solid #2563eb;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-}
-
-nine-table-sheet .ng-col-mover-grip {
-    position: absolute;
-    box-sizing: border-box;
-    display: none;
-    pointer-events: none;
-    z-index: 10010;
-    background-color: rgba(37, 99, 235, 0.12);
-    border: none;
-    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
-    overflow: hidden;
-    backdrop-filter: blur(1px);
-    transition: background-color 0.15s ease, border-color 0.15s ease;
-}
-
-nine-table-sheet .ng-col-mover-grip .grip-header-content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    box-sizing: border-box;
-    z-index: 2;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-nine-table-sheet .ng-col-mover-grip.invalid {
-    background-color: rgba(239, 68, 68, 0.12);
-    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
-}
-
-nine-table-sheet .ng-col-mover-grip.invalid .grip-header-content {
-    border-bottom: 2px solid #ef4444;
-}
-
-nine-table-sheet .ng-col-mover-grip th,
-nine-table-sheet .ng-col-mover-grip td {
-    box-sizing: border-box;
-    user-select: none;
-    pointer-events: none;
-}
-
-/* 🎯 정렬 아이콘 공통 (가상 요소 - 헤더 및 드래그 그립 패널 공통 적용) */
-nine-table-sheet .ng-sheet-header th.asc::after,
-nine-table-sheet .ng-sheet-header td.asc::after,
-nine-table-sheet .ng-sheet-header th.desc::after,
-nine-table-sheet .ng-sheet-header td.desc::after,
-nine-table-sheet .ng-col-mover-grip th.asc::after,  /* 👈 그립 패널 타겟 추가 */
-nine-table-sheet .ng-col-mover-grip td.asc::after,
-nine-table-sheet .ng-col-mover-grip th.desc::after, /* 👈 그립 패널 타겟 추가 */
-nine-table-sheet .ng-col-mover-grip td.desc::after {
-    content: "";
-    display: inline-block;
-    width: 0;
-    height: 0;
-    flex-shrink: 0;
-    margin-left: 4px;
-    vertical-align: middle;
-}
-
-/* 오름차순 (▲): 위쪽을 가리키는 삼각형 */
-nine-table-sheet .ng-sheet-header th.asc::after,
-nine-table-sheet .ng-sheet-header td.asc::after,
-nine-table-sheet .ng-col-mover-grip th.asc::after,  /* 👈 추가 */
-nine-table-sheet .ng-col-mover-grip td.asc::after {
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-bottom: 6px solid #2563eb; /* 블루 포인트 */
-}
-
-/* 내림차순 (▼): 아래쪽을 가리키는 삼각형 */
-nine-table-sheet .ng-sheet-header th.desc::after,
-nine-table-sheet .ng-sheet-header td.desc::after,
-nine-table-sheet .ng-col-mover-grip th.desc::after, /* 👈 추가 */
-nine-table-sheet .ng-col-mover-grip td.desc::after {
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 6px solid #dc2626; /* 레드 포인트 */
-}
-
-nine-table-sheet th.resizable-edge,
-nine-table-sheet td.resizable-edge {
-    cursor: col-resize;
-}
-
-nine-table-sheet .ng-col-resizer-panel {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    display: none;
-    z-index: 9999;
-}
-
-nine-table-sheet .ng-col-resizer-panel.active {
-    display: block;
-}
-
-nine-table-sheet .ng-col-resizer-panel .grip {
-    position: absolute;
-    top: 0;
-    width: 1px;
-    height: 100%;
-    background-color: #2563eb;
-    left: var(--resizer-left, 0px);
-}
-
-nine-table-sheet .ng-col-resizer-panel .tooltip {
-    position: absolute;
-    top: 0px;
-    left: var(--tooltip-left, 0px);
-    width: var(--tooltip-width, 0px);
-    height: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    pointer-events: none;
-    z-index: 10000;
-}
-
-nine-table-sheet .ng-col-resizer-panel .tooltip .line-wrapper {
-    width: 100%;
-    height: 1px;
-    background-color: #2563eb;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-nine-table-sheet .ng-col-resizer-panel .resizer-overlay {
-    position: absolute;
-    top: 0;
-    left: var(--tooltip-left, 0px);
-    width: var(--tooltip-width, 0px);
-    height: 100%;
-    background-color: rgba(37, 99, 235, 0.12);
-    border-left: 1px dashed #2563eb;
-    border-right: 2px solid #2563eb;
-    box-sizing: border-box;
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding-top: 8px;
-    pointer-events: none;
-    opacity: 1;
-    transition: opacity 0.15s ease-out;
-}
-
-nine-table-sheet .ng-col-resizer-panel .resizer-overlay.fade-out {
-    opacity: 0;
-}
-
-nine-table-sheet th.resize-flash {
-    transition: background-color 0.3s ease;
-    background-color: rgba(37, 99, 235, 0.15);
-}
-
-nine-table-sheet .ng-col-resizer-panel .resizer-overlay .size-badge {
-    padding: 2px 8px;
-    font-size: 11px;
-    font-weight: 700;
-    color: #ffffff;
-    background-color: #1e40af;
-    border-radius: 4px;
-    line-height: 14px;
-    white-space: nowrap;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-nine-table-sheet tr.ng-sticky-header {
-    background-color: #f3f4f6 !important; /* 일반 행보다 살짝 진한 배경색 */
-    font-weight: 600;
-    z-index: 5; /* 다른 행들보다 위에 보이도록 설정 */
-    position: relative;
-}
-
-/* 스크롤되면서 밀려 내려갈 때 입체감을 주는 하단 그림자 효과 */
-nine-table-sheet tr.ng-sticky-header td {
-    border-bottom: 2px solid #d1d5db !important;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
-}
-
-
-td.invalid::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 0;
-    height: 0;
-    border-top: 2px solid red;
-    border-right: 2px solid red;
-    border-bottom: 2px solid transparent; /* 아래쪽은 투명하게 하여 삼각형 완성 */
-    border-left: 2px solid transparent;   /* 왼쪽은 투명하게 하여 삼각형 완성 */
-    z-index: 1;
-    pointer-events: none;
-}
-
-nine-table-sheet td[disabled="true"] {
-    input,button {
-        background: #f0f0f0;
-        opacity: 0.5;
-        pointer-events: none;
-    }
-}

package/dist/css/nine-table-vscrollbar.css

@@ -1,4 +0,0 @@
-nine-table-vscrollbar {
-    display: none; /* 평소에는 기본 숨김 */
-    border-top: 2px solid #333;
-}

package/dist/css/table.css

@@ -1,22 +0,0 @@
-thead {
-    display: table-header-group;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-}
-
-tfoot {
-    display: table-footer-group;
-    position: sticky;
-    bottom: 0;
-    z-index: 10;
-    background: red;
-}
-
-tbody {
-    position: relative;
-}
-
-tbody.foot {
-    height: 100vh;
-}