dtable-ui-component 6.0.110-aik.7 → 6.0.110-aik.9

package/lib/AsyncUserSelect/index.css

@@ -40,7 +40,7 @@
   border: none;
   border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   border-radius: 4px 4px 0 0;
-  padding: .375rem .5rem !important;
+  padding: .375rem 1rem !important;
 }
 
 .dtable-ui-user-select-container .form-control:focus {

package/lib/DTableCustomizeSelect/index.css

@@ -4,7 +4,7 @@
 
 .dtable-select.custom-select {
   display: flex;
-  padding: 0 10px;
+  padding: 0 16px;
   border-radius: 3px;
   align-items: center;
   justify-content: space-between;
@@ -39,14 +39,10 @@
 .dtable-select .dtable-icon-down3 {
   display: inline-block;
   font-size: 12px;
-  color: #999;
+  color: #666666;
   transition: all 0.1s;
 }
 
-.dtable-select .dtable-icon-down3:hover {
-  color: #555;
-}
-
 .dtable-select .selected-option {
   display: flex;
   flex: 1;
@@ -98,3 +94,17 @@
   font-size: 14px;
   white-space: nowrap;
 }
+
+.option-group-content .form-control {
+  border: none;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  border-radius: 4px 4px 0 0;
+  padding: .375rem 1rem !important;
+  height: 32px;
+}
+
+.option-group-content .form-control:focus {
+  border-color: transparent !important;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  box-shadow: none !important;
+}

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -205,7 +205,7 @@
 .option-group-dtable-ui-collaborator-selector .option:hover,
 .option-group-dtable-ui-collaborator-selector .option.option-active {
   color: #212529;
-  background-color: #f7f7f7;
+  background-color: #f5f5f5;
 }
 
 .dtable-ui-filters-list .dtable-ui-multiple-select-selector .option.option-active .select-option-name,
@@ -333,7 +333,7 @@
   display: inline-flex;
   align-items: center;
   height: 20px;
-  margin-right: 10px;
+  margin-right: 4px;
   padding: 0 8px 0 2px;
   font-size: 13px;
   border-radius: 10px;

package/lib/DTableGroupSelect/index.css

@@ -90,6 +90,7 @@
   font-size: 14px !important;
   color: #212529;
   margin-left: 6px;
+  margin-right: 8px
 }
 
 .group-select .selected-option-show .selected-option-item .dtable-icon-x {
@@ -107,7 +108,7 @@
   border: none;
   border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   border-radius: 4px 4px 0 0;
-  padding: .375rem .5rem !important;
+  padding: .375rem 1rem !important;
   height: 32px;
 }
 

package/lib/DTableGroupSelect/index.js

@@ -86,7 +86,7 @@ class DTableGroupSelect extends _react.Component {
         children: [selectedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "selected-option-show",
           children: selectedOptions.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            className: "selected-option-item mr-1 pr-1 pl-2",
+            className: "selected-option-item",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "selected-option-item-name",
               children: item.name

package/lib/DTableGroupSelect/select-option-group.css

@@ -13,7 +13,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.25rem 8px !important;
+  padding: 0.25rem 8px;
 }
 
 .group-selector .option .dtable-icon-check-mark {
@@ -26,8 +26,8 @@
 }
 
 .group-selector .option.option-active {
-  background-color: #f5f5f5 !important;
-  color: #212529 !important;
+  background-color: #f5f5f5;
+  color: #212529;
   cursor: pointer;
 }
 
@@ -35,10 +35,6 @@
   color: #666666 !important;
 }
 
-.group-selector .option .select-option-name .single-select-option {
-  margin: 0 0 0 12px;
-}
-
 .group-selector .option .select-option-name .multiple-select-option {
   margin: 0;
 }

package/lib/SelectOptionGroup/index.css

@@ -6,7 +6,7 @@
   min-height: 60px;
   min-width: 100%;
   max-width: 15rem;
-  padding: 0.5rem 0;
+  padding-top: 0.25rem;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   background: #fff;
   border: 1px solid rgba(0, 40, 100, 0.12);
@@ -17,11 +17,11 @@
 .option-group .option-group-search {
   width: 100%;
   min-width: 170px;
-  padding: 0 10px 6px;
+  padding: 8px 10px 0 !important
 }
 
 .option-group-search .form-control {
-  height: 31px;
+  height: 32px;
 }
 
 .option-group .none-search-result {
@@ -52,8 +52,7 @@
 }
 
 .option.option-active {
-  background-color: #20a0ff;
-  color: #fff;
+  background-color: #f5f5f5;
   cursor: pointer;
 }
 
@@ -73,10 +72,6 @@
   color: #aaa;
 }
 
-.option .select-option-name .single-select-option {
-  margin: 0 0 0 12px;
-}
-
 .option .select-option-name .multiple-select-option {
   margin: 0;
 }
@@ -110,3 +105,16 @@
 .option-group-selector-multiple-select .option.option-active .select-option-name {
   color: #212529;
 }
+
+.option-group-selector-single-select .option-group-search {
+  padding-top: 8px !important;
+}
+
+.option-group-selector-single-select .option .select-option-name .single-select-option {
+  margin: 0;
+}
+
+
+.option-group-selector-single-select .form-control {
+  padding: .375rem 1rem !important;
+}

package/lib/SelectOptionGroup/index.js

@@ -215,7 +215,7 @@ class SelectOptionGroup extends _react.Component {
       style = {
         position: 'fixed',
         left: position.x,
-        top: position.y + position.height,
+        top: position.y + position.height + 4,
         minWidth: position.width,
         opacity: 0
       };
@@ -232,7 +232,7 @@ class SelectOptionGroup extends _react.Component {
         style: style,
         onMouseDown: this.onMouseDown,
         children: [isShowSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "editor-list-delete mb-2",
+          className: "editor-list-delete",
           onClick: e => e.stopPropagation(),
           children: value.label || ''
         }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.110-aik.7",
+  "version": "6.0.110-aik.9",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.4",