@ninebone/datagrid 0.0.23 → 0.1.1

package/dist/css/nine-table.css

@@ -146,19 +146,22 @@ cell-combo-panel {
     margin: 0;
     resize: both;
 
-    .head {
+    input {
         display: none;
-        padding: 6px;
-        background: #f8f9fa;
+        width: 100%;
+        height: 32px;
+        box-sizing: border-box;
+        padding: 0px 8px;
+        border: none;
         border-bottom: 1px solid #e5e7eb;
-
-        input[type="text"] {
-            width: 100%;
-            height: 26px;
-            padding: 0 6px;
-            border: 1px solid #d1d5db;
-            border-radius: 3px;
-        }
+        border-radius: 0px;
+        outline: none;
+        font-size: 12px;
+        background: #fafafa;
+        color: #333;
+    }
+    input:focus {
+        background: #ffffff;
     }
 
     .footer {
@@ -170,7 +173,9 @@ cell-combo-panel {
         padding: 0 8px;
 
         label {
-            user-select: none;
+            display: flex;
+            align-items: center;
+            gap: 4px;
         }
 
         button {
@@ -201,11 +206,12 @@ cell-combo-panel.active {
 }
 
 cell-combo-panel.expand {
-    .head {
-        display: flex;
+    input {
+        display: block;
     }
 }
 
+
 cell-combo-panel.multi {
     .footer {
         display: flex;
@@ -214,7 +220,6 @@ cell-combo-panel.multi {
 }
 
 
-
 cell-combo-panel.loading {
     nine-table-simple {
         visibility: hidden;
@@ -287,6 +292,7 @@ cell-input-color {
         -moz-appearance: none;
         appearance: none;
         background-color: transparent;
+        border-radius: 0;
     }
 
     input[type=color]::-webkit-color-swatch {
@@ -559,7 +565,6 @@ tbody {
     .selected-left   { border-left: 2px solid var(--cell-selection-border-color); }
     .selected-right  { border-right: 2px solid var(--cell-selection-border-color); }
 }
-
 nine-table-col-expand {
     position: absolute;
     right: 2px;
@@ -952,13 +957,98 @@ nine-table-filter-panel.loading::before {
 
 :host([theme="simple"]) {
     col[data-col="0"], th[data-col="0"], td[data-col="0"] {
+        /**display: none; */
+    }
+    .ng-container-right {
+        /**display: none; */
+    }
+    tr {
+        height: 28px;
+        min-height: 28px;
+        max-height: 28px;
+    }
+}
+
+:host(.combo-list) {
+    :focus {
+        --border-right: 2px solid #ccc;
+    }
+
+    tr.selected {
+        transform: unset !important;
+
+        .CELL-ROW-INDICATOR {
+            display: table-cell;
+            background: darkgoldenrod;
+
+            cell-row-indicator {
+                display: none;
+            }
+        }
+    }
+
+    .ng-container-left {
+        width: 2px;
+        min-width: 2px;
+        --flex: unset;
+    }
+    col[data-col="0"], th[data-col="0"], td[data-col="0"] {
+        width: 2px;
+        min-width: 2px;
+        max-width: 2px;
+    }
+    col[data-col="1"], th[data-col="1"], td[data-col="1"] {
         display: none;
     }
+
     .ng-container-right {
         display: none;
     }
-    tr {
-        height: 26px;
+}
+
+:host(.multi) {
+
+    .ng-container-left {
+        width: 26px;
+        max-width: 26px;
+        /**
+        table {
+            width: 26px !important;
+            max-width: 26px !important;;
+        } */
+    }
+    /**
+    col[data-col="0"], th[data-col="0"] {
+        width: 2px !important;
+        max-width: 2px !important;
+    } */
+
+    col[data-col="0"], col[data-col="1"] {
+        display: table-column;
+    }
+    th[data-col="0"], td[data-col="1"] {
+        display: table-cell;
+        overflow: hidden;
+    }
+    col[data-col="1"], td[data-col="1"] {
+        width: 24px;
+        max-width: 24px;
+    }
+
+    th[data-col="0"] {
+        * {
+            display: none;
+        }
+    }
+
+    td[data-col="1"] {
+        padding: 0;
+        border-right: none;
+        cell-checkbox {
+            padding: 0;
+            width: 24px;
+            border-right: none;
+        }
     }
 }
 
@@ -1134,6 +1224,11 @@ cell-input, cell-input-number, cell-button, cell-input-color, cell-input-date, c
     }
 }
 
+.ng-container-left,.ng-container-right {
+    table {
+        width: 100%;
+    }
+}
 
 .empty-value {
     color: #999;