dtable-ui-component 0.1.75-beta1 → 0.1.75-beta10

package/lib/css/cell-formatter.css

@@ -2,246 +2,3 @@
   overflow: hidden;
   line-height: 1;
 }
-
-/* collaborator */
-.dtable-ui.collaborator-item {
-  display: inline-flex;
-  align-items: center;
-  margin-right: 10px;
-  padding: 0 8px 0 2px;
-  height: 20px;
-  font-size: 13px;
-  border-radius: 10px;
-  background: #eaeaea;
-}
-
-.dtable-ui.collaborator-item .collaborator-avatar,
-.dtable-ui.collaborator-item .collaborator-name,
-.dtable-ui.collaborator-item .collaborator-remove {
-  height: 20px;
-  line-height: 20px;
-}
-
-.dtable-ui.collaborator-item .collaborator-avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 4px 0 2px;
-}
-
-.dtable-ui.collaborator-item .collaborator-avatar img {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-}
-
-.dtable-ui.collaborator-item .collaborator-remove {
-  display: inline-block;
-  width: 14px;
-  margin: 0 -2px 0 2px;
-}
-
-.dtable-ui.collaborator-item .collaborator-remove .dtable-font {
-  display: inline-block;
-  font-size: 12px;
-  color: #909090;
-  transform: scale(.8);
-  cursor: pointer;
-}
-
-.dtable-ui.collaborator-item .collaborator-remove .dtable-font:hover {
-  color: #666666;
-  cursor: pointer;
-}
-
-/* long-text */
-.dtable-ui.long-text-formatter {
-  display: flex;
-  align-items: center;
-  height: 28px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dtable-ui.long-text-formatter.article {
-  display: block;
-  height: auto;
-  overflow: auto;
-}
-
-.dtable-ui.long-text-formatter .long-text-links,
-.dtable-ui.long-text-formatter .long-text-check-list {
-  display: inline-block;
-  height: 20px;
-  padding: 2px;
-  margin: 4px;
-  color: #9c9c9c;
-  background-color: #f0f0f0;
-  border-radius: 3px;
-  line-height: 16px;
-}
-
-.dtable-ui.long-text-formatter .long-text-check-list .dtable-font,
-.dtable-ui.long-text-formatter .long-text-links .dtable-font {
-  margin-right: 4px;
-  font-size: 12px;
-}
-
-.dtable-ui.long-text-formatter .long-text-check-list .long-text-check-list-completed {
-  color: #61BD4F;
-}
-
-.dtable-ui.long-text-formatter .long-text-images {
-  margin-right: -10px;
-}
-
-.dtable-ui.long-text-formatter .long-text-images img {
-  max-width: 28px;
-  max-height: 28px;
-  border: 1px solid #f0f0f0;
-  box-sizing: border-box;
-  border-radius: 3px;
-}
-
-.dtable-ui.long-text-formatter .long-text-images .image-number {
-  display: inline-block;
-  min-width: 14px;
-  padding: 0 3px;
-  line-height: 14px;
-  font-style: normal;
-  font-size: 12px;
-  border-radius: 6px;
-  background-color: #999;
-  color: #fff;
-  transform: translate(-50%, 9px) scale(0.8);
-}
-
-.dtable-ui.file-formatter {
-  display: flex;
-  align-items: center;
-}
-
-.dtable-ui.file-formatter .file-item-icon {
-  display: inline-block;
-  height: 28px;
-  width: 28px;
-  border: 1px solid #f0f0f0;
-}
-
-.dtable-ui.file-formatter .file-item-count {
-  display: inline-block;
-  padding: 0 3px;
-  min-width: 14px;
-  line-height: 14px;
-  font-size: 12px;
-  border-radius: 6px;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #fff;
-  background-color: #999;
-  -webkit-transform: translate(-50%, 8px) scale(.8);
-  transform: translate(-50%, 8px) scale(.8);
-}
-
-
-.dtable-ui.image-formatter {
-  display: flex;
-  align-items: center;
-}
-
-.dtable-ui.image-formatter .image-item {
-  display: inline-block;
-  height: 28px;
-  width: 28px;
-  margin-right: 4px;
-  border: 1px solid #f0f0f0;
-}
-
-.dtable-ui.image-formatter .image-item:hover {
-  border: 1px solid #c9c9c9;
-}
-
-.dtable-ui.image-formatter .image-item-count {
-  display: inline-block;
-  padding: 0 3px;
-  min-width: 14px;
-  line-height: 14px;
-  font-size: 12px;
-  border-radius: 6px;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #fff;
-  background-color: #999;
-  -webkit-transform: translate(-50%, 8px) scale(.8);
-  transform: translate(-50%, 8px) scale(.8);
-}
-
-.dtable-ui.link-formmatter {
-  display: inline-flex;
-  align-items: center;
-  overflow: hidden;
-  flex-wrap: nowrap;
-}
-
-.dtable-ui.link-formatter .link-item {
-  display: inline-flex;
-  height: 20px;
-  max-width: 230px;
-  padding: 0 8px 0 2px;
-  align-items: center;
-  font-size: 13px;
-  margin-right: 10px;
-  border-radius: 3px;
-  background: #eceff4;
-  cursor: pointer;
-}
-
-.dtable-ui.link-formatter .link-item .link-name {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/* 
-* url formatter 
-* email formatter 
-*/
-
-.dtable-ui.url-formatter,
-.dtable-ui.email-formatter {
-  text-decoration: underline;
-}
-
-.dtable-ui.formula-formatter.multiple .formula-formatter-content-item {
-  display: inline-flex;
-  margin-right: 10px;
-}
-
-
-.dtable-ui.formula-formatter.multiple .formula-formatter-content-item.simple-cell-formatter {
-  height: 20px;
-  padding: 0 8px;
-  align-items: center;
-  background: #eceff4;
-  border-radius: 3px;
-}
-
-.dtable-ui.formula-formatter.multiple .formula-formatter-content-item .collaborator {
-  margin-right: 0;
-}
-
-/* button */
-.dtable-ui.button-formatter {
-  height: 26px;
-  width: 80px;
-  padding: 5px 8px;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 3px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}

package/lib/css/mb-cell-editor.css

@@ -0,0 +1,55 @@
+@media screen and (max-width: 767.8px) {
+  .dtable-ui-mb-editor-popover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    background-color: #f5f5f5;
+    z-index: 9;
+  }
+
+  .dtable-ui-mb-editor-header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-editor-header .editor-header-left-content {
+    min-width: 50px;
+    padding: 13px 16px;
+    font-size: 14px;
+    color: #888;
+  }
+
+  .dtable-ui-mb-editor-header .editor-header-title {
+    flex: 1;
+    font-size: 18px;
+    text-align: center;
+    text-overflow: ellipsis;
+    color: #333;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .dtable-ui-mb-editor-header .editor-header-right-content {
+    min-width: 50px;
+    padding: 13px 16px;
+    font-size: 14px;
+    color: #888;
+  }
+
+  .dtable-ui-mb-editor-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin-top: 50px;
+    overflow: auto;
+  }
+}

package/lib/formatterConfig/index.js

@@ -0,0 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var _FormatterConfig;
+
+import React from 'react';
+import { CellType } from '../constants';
+import CheckboxFormatter from '../CheckboxFormatter';
+import ImageFormatter from '../ImageFormatter';
+import LongTextFormatter from '../LongTextFormatter';
+import TextCellFormatter from '../TextFormatter';
+import SingleSelectFormatter from '../SingleSelectFormatter';
+import MultipleSelectFormatter from '../MultipleSelectFormatter';
+import FileFormatter from '../FileFormatter';
+import LinkFormatter from '../LinkFormatter';
+import CollaboratorFormatter from '../CollaboratorFormatter';
+import NumberFormatter from '../NumberFormatter';
+import DateFormatter from '../DateFormatter';
+import CreatorFormatter from '../CreatorFormatter';
+import CTimeFormatter from '../CTimeFormatter';
+import LastModifierFormatter from '../LastModifierFormatter';
+import MTimeFormatter from '../MTimeFormatter';
+import GeolocationFormatter from '../GeolocationFormatter';
+import FormulaFormatter from '../FormulaFormatter';
+import AutoNumberFormatter from '../AutoNumberFormatter';
+import UrlFormatter from '../UrlFormatter';
+import EmailFormatter from '../EmailFormatter';
+import DurationFormatter from '../DurationFormatter';
+import RateFormatter from '../RateFormatter';
+import ButtonFormatter from '../ButtonFormatter';
+var FormatterConfig = (_FormatterConfig = {}, _defineProperty(_FormatterConfig, CellType.DEFAULT, /*#__PURE__*/React.createElement(TextCellFormatter, null)), _defineProperty(_FormatterConfig, CellType.TEXT, /*#__PURE__*/React.createElement(TextCellFormatter, null)), _defineProperty(_FormatterConfig, CellType.CHECKBOX, /*#__PURE__*/React.createElement(CheckboxFormatter, null)), _defineProperty(_FormatterConfig, CellType.LONG_TEXT, /*#__PURE__*/React.createElement(LongTextFormatter, null)), _defineProperty(_FormatterConfig, CellType.SINGLE_SELECT, /*#__PURE__*/React.createElement(SingleSelectFormatter, null)), _defineProperty(_FormatterConfig, CellType.IMAGE, /*#__PURE__*/React.createElement(ImageFormatter, null)), _defineProperty(_FormatterConfig, CellType.FILE, /*#__PURE__*/React.createElement(FileFormatter, null)), _defineProperty(_FormatterConfig, CellType.MULTIPLE_SELECT, /*#__PURE__*/React.createElement(MultipleSelectFormatter, null)), _defineProperty(_FormatterConfig, CellType.COLLABORATOR, /*#__PURE__*/React.createElement(CollaboratorFormatter, null)), _defineProperty(_FormatterConfig, CellType.NUMBER, /*#__PURE__*/React.createElement(NumberFormatter, null)), _defineProperty(_FormatterConfig, CellType.DATE, /*#__PURE__*/React.createElement(DateFormatter, null)), _defineProperty(_FormatterConfig, CellType.LINK, /*#__PURE__*/React.createElement(LinkFormatter, null)), _defineProperty(_FormatterConfig, CellType.CREATOR, /*#__PURE__*/React.createElement(CreatorFormatter, null)), _defineProperty(_FormatterConfig, CellType.CTIME, /*#__PURE__*/React.createElement(CTimeFormatter, null)), _defineProperty(_FormatterConfig, CellType.LAST_MODIFIER, /*#__PURE__*/React.createElement(LastModifierFormatter, null)), _defineProperty(_FormatterConfig, CellType.MTIME, /*#__PURE__*/React.createElement(MTimeFormatter, null)), _defineProperty(_FormatterConfig, CellType.GEOLOCATION, /*#__PURE__*/React.createElement(GeolocationFormatter, null)), _defineProperty(_FormatterConfig, CellType.FORMULA, /*#__PURE__*/React.createElement(FormulaFormatter, null)), _defineProperty(_FormatterConfig, CellType.AUTO_NUMBER, /*#__PURE__*/React.createElement(AutoNumberFormatter, null)), _defineProperty(_FormatterConfig, CellType.URL, /*#__PURE__*/React.createElement(UrlFormatter, null)), _defineProperty(_FormatterConfig, CellType.EMAIL, /*#__PURE__*/React.createElement(EmailFormatter, null)), _defineProperty(_FormatterConfig, CellType.DURATION, /*#__PURE__*/React.createElement(DurationFormatter, null)), _defineProperty(_FormatterConfig, CellType.RATE, /*#__PURE__*/React.createElement(RateFormatter, null)), _defineProperty(_FormatterConfig, CellType.BUTTON, /*#__PURE__*/React.createElement(ButtonFormatter, null)), _FormatterConfig);
+export default FormatterConfig;

package/lib/index.js

@@ -1,64 +1,45 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.toaster = exports.setLocale = exports.getNumberDisplayString = exports.getDateDisplayString = exports.formatStringToNumber = exports.formatNumberString = exports.UrlFormatter = exports.TextFormatter = exports.TextEditor = exports.SingleSelectFormatter = exports.SingleSelectEditor = exports.RateFormatter = exports.NumberFormatter = exports.NumberEditor = exports.MultipleSelectFormatter = exports.MTimeFormatter = exports.LongTextFormatter = exports.Loading = exports.LinkFormatter = exports.LinkEditor = exports.LastModifierFormatter = exports.ImagePreviewerLightbox = exports.ImageFormatter = exports.GeolocationFormatter = exports.FormulaFormatter = exports.FileItemFormatter = exports.FileFormatter = exports.EmailFormatter = exports.DurationFormatter = exports.DateFormatter = exports.DateEditor = exports.CreatorFormatter = exports.CollaboratorItem = exports.CollaboratorFormatter = exports.CollaboratorEditor = exports.CheckboxFormatter = exports.CheckboxEditor = exports.CTimeFormatter = exports.ButtonFormatter = exports.AutoNumberFormatter = void 0;
-
-var _toast = _interopRequireDefault(require("./components/toast"));
-
-exports.toaster = _toast.default;
-
-var _lang = require("./lang");
-
-exports.setLocale = _lang.setLocale;
-
-var _valueFormatUtils = require("./utils/value-format-utils");
-
-exports.getDateDisplayString = _valueFormatUtils.getDateDisplayString;
-exports.getNumberDisplayString = _valueFormatUtils.getNumberDisplayString;
-exports.formatStringToNumber = _valueFormatUtils.formatStringToNumber;
-exports.formatNumberString = _valueFormatUtils.formatNumberString;
-
-var _loading = _interopRequireDefault(require("./components/loading"));
-
-exports.Loading = _loading.default;
-
-var _cellFormatter = require("./components/cell-formatter");
-
-exports.TextFormatter = _cellFormatter.TextFormatter;
-exports.NumberFormatter = _cellFormatter.NumberFormatter;
-exports.CheckboxFormatter = _cellFormatter.CheckboxFormatter;
-exports.DateFormatter = _cellFormatter.DateFormatter;
-exports.SingleSelectFormatter = _cellFormatter.SingleSelectFormatter;
-exports.MultipleSelectFormatter = _cellFormatter.MultipleSelectFormatter;
-exports.CollaboratorFormatter = _cellFormatter.CollaboratorFormatter;
-exports.ImageFormatter = _cellFormatter.ImageFormatter;
-exports.FileFormatter = _cellFormatter.FileFormatter;
-exports.LongTextFormatter = _cellFormatter.LongTextFormatter;
-exports.GeolocationFormatter = _cellFormatter.GeolocationFormatter;
-exports.LinkFormatter = _cellFormatter.LinkFormatter;
-exports.FormulaFormatter = _cellFormatter.FormulaFormatter;
-exports.CTimeFormatter = _cellFormatter.CTimeFormatter;
-exports.CreatorFormatter = _cellFormatter.CreatorFormatter;
-exports.LastModifierFormatter = _cellFormatter.LastModifierFormatter;
-exports.MTimeFormatter = _cellFormatter.MTimeFormatter;
-exports.AutoNumberFormatter = _cellFormatter.AutoNumberFormatter;
-exports.UrlFormatter = _cellFormatter.UrlFormatter;
-exports.EmailFormatter = _cellFormatter.EmailFormatter;
-exports.DurationFormatter = _cellFormatter.DurationFormatter;
-exports.RateFormatter = _cellFormatter.RateFormatter;
-exports.ButtonFormatter = _cellFormatter.ButtonFormatter;
-exports.FileItemFormatter = _cellFormatter.FileItemFormatter;
-exports.ImagePreviewerLightbox = _cellFormatter.ImagePreviewerLightbox;
-exports.CollaboratorItem = _cellFormatter.CollaboratorItem;
-
-var _cellEditor = require("./components/cell-editor");
-
-exports.TextEditor = _cellEditor.TextEditor;
-exports.NumberEditor = _cellEditor.NumberEditor;
-exports.CheckboxEditor = _cellEditor.CheckboxEditor;
-exports.SingleSelectEditor = _cellEditor.SingleSelectEditor;
-exports.CollaboratorEditor = _cellEditor.CollaboratorEditor;
-exports.DateEditor = _cellEditor.DateEditor;
-exports.LinkEditor = _cellEditor.LinkEditor;
+// toaster
+export { default as toaster } from './toaster'; // Loading
+
+export { default as Loading } from './Loading';
+export { setLocale } from './lang'; // utils
+
+export { getDateDisplayString, getNumberDisplayString, formatStringToNumber, formatNumberString } from './utils/value-format-utils'; // formatter
+
+export { default as CheckboxFormatter } from './CheckboxFormatter';
+export { default as ImageFormatter } from './ImageFormatter';
+export { default as LongTextFormatter } from './LongTextFormatter';
+export { default as SimpleLongTextFormatter } from './SimpleLongTextFormatter';
+export { default as HtmlLongTextFormatter } from './HtmlLongTextFormatter';
+export { default as TextFormatter } from './TextFormatter';
+export { default as SingleSelectFormatter } from './SingleSelectFormatter';
+export { default as MultipleSelectFormatter } from './MultipleSelectFormatter';
+export { default as FileFormatter } from './FileFormatter';
+export { default as LinkFormatter } from './LinkFormatter';
+export { default as CollaboratorFormatter } from './CollaboratorFormatter';
+export { default as NumberFormatter } from './NumberFormatter';
+export { default as DateFormatter } from './DateFormatter';
+export { default as CreatorFormatter } from './CreatorFormatter';
+export { default as CTimeFormatter } from './CTimeFormatter';
+export { default as LastModifierFormatter } from './LastModifierFormatter';
+export { default as MTimeFormatter } from './MTimeFormatter';
+export { default as GeolocationFormatter } from './GeolocationFormatter';
+export { default as FormulaFormatter } from './FormulaFormatter';
+export { default as AutoNumberFormatter } from './AutoNumberFormatter';
+export { default as UrlFormatter } from './UrlFormatter';
+export { default as EmailFormatter } from './EmailFormatter';
+export { default as DurationFormatter } from './DurationFormatter';
+export { default as RateFormatter } from './RateFormatter';
+export { default as ButtonFormatter } from './ButtonFormatter';
+export { default as ImagePreviewerLightbox } from './ImagePreviewerLightbox';
+export { default as CollaboratorItem } from './CollaboratorItem';
+export { default as FileItemFormatter } from './FileItemFormatter'; // editor
+
+export { default as TextEditor } from './TextEditor';
+export { default as NumberEditor } from './NumberEditor';
+export { default as CheckboxEditor } from './CheckboxEditor';
+export { default as SingleSelectEditor } from './SingleSelectEditor';
+export { default as MultipleSelectEditor } from './MultipleSelectEditor';
+export { default as CollaboratorEditor } from './CollaboratorEditor';
+export { default as DateEditor } from './DateEditor';
+export { default as LinkEditor } from './LinkEditor';

package/lib/lang/index.js

@@ -1,35 +1,20 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.getLocale = getLocale;
-exports.setLocale = setLocale;
-exports.substitute = substitute;
-
-var _de = _interopRequireDefault(require("../locals/de"));
-
-var _en = _interopRequireDefault(require("../locals/en"));
-
-var _fr = _interopRequireDefault(require("../locals/fr"));
-
-var _zhCN = _interopRequireDefault(require("../locals/zh-CN"));
-
+import de from '../locals/de';
+import en from '../locals/en';
+import fr from '../locals/fr';
+import zh_CN from '../locals/zh-CN';
 var langData = {
-  'de': _de.default,
-  'en': _en.default,
-  'fr': _fr.default,
-  'zh-cn': _zhCN.default
+  'de': de,
+  'en': en,
+  'fr': fr,
+  'zh-cn': zh_CN
 };
 var LANGUAGE = 'en';
 var LANGUAGE_MAP = {};
-
-function setLocale(args) {
+export function setLocale(args) {
   var lang = typeof args === 'string' ? args : LANGUAGE;
   LANGUAGE_MAP = langData[lang] || langData[LANGUAGE];
 }
-
-function getLocale(key, def) {
+export function getLocale(key, def) {
   if (!key) return def;
 
   if (!LANGUAGE_MAP[key]) {
@@ -38,8 +23,7 @@ function getLocale(key, def) {
 
   return LANGUAGE_MAP[key];
 }
-
-function substitute(str, obj) {
+export function substitute(str, obj) {
   if (typeof str === 'string') {
     if (str.indexOf('{') < 0) {
       return str;

package/lib/locals/de.js

@@ -1,7 +1,2 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
 var de = {};
-var _default = de;
-exports.default = _default;
+export default de;

package/lib/locals/en.js

@@ -1,7 +1,3 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
 var en = {
   Add_an_option: "Add an option",
   Find_an_option: "Find a option",
@@ -18,5 +14,4 @@ var en = {
   Please_select: "Please select",
   Clear: "Clear"
 };
-var _default = en;
-exports.default = _default;
+export default en;

package/lib/locals/fr.js

@@ -1,7 +1,2 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
 var fr = {};
-var _default = fr;
-exports.default = _default;
+export default fr;

package/lib/locals/zh-CN.js

@@ -1,7 +1,3 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
 var zh_CN = {
   Add_an_option: '添加一个选项',
   Find_an_option: "查找标签",
@@ -18,5 +14,4 @@ var zh_CN = {
   Please_select: "请选择",
   Clear: "清空"
 };
-var _default = zh_CN;
-exports.default = _default;
+export default zh_CN;

package/lib/select-editor/index.js

@@ -0,0 +1,4 @@
+import MBSelectEditorPopover from './mb-select-editor-popover';
+import PCSelectEditorPopover from './pc-select-editor-popover';
+import SelectEditorOption from './select-editor-option';
+export { MBSelectEditorPopover, PCSelectEditorPopover, SelectEditorOption };

package/lib/select-editor/mb-select-editor-popover/index.css

@@ -0,0 +1,127 @@
+@import url('../../css/mb-cell-editor.css');
+
+@media screen and (max-width: 767.8px) {
+  .dtable-ui-mb-select-editor-body .mb-selected-item {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-selected-item .title {
+    padding: 6px 16px;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-selected-item .content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-height: 50px;
+    padding: 8px 16px;
+    border-bottom: 1px solid #e9e9e9;
+    overflow: auto;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-selected-item .content .select-option-item {
+    margin: 3px 10px 3px 0;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-search-select-items {
+    padding: 8px 16px;
+    margin-top: 20px;
+    border-top: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e9e9e9;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-search-select-items > input {
+    outline: none;
+    height: 30px;
+    padding: 0;
+    line-height: 30px;
+    border: none;
+  }
+  .dtable-ui-mb-select-editor-body .mb-search-select-items > input:focus,
+  .dtable-ui-mb-select-editor-body .mb-search-select-items > input:active {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container {
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .title {
+    padding: 6px 16px;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .content {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .search-result-none {
+    padding: 16px 0;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .mb-select-option-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+    padding: 10px 10px 10px 16px;
+    font-size: 13px;
+    background-color: #fff;
+    color: #202428;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .mb-select-option-item + .mb-select-option-item {
+    border-top: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .mb-select-option-item .item-name {
+    display: inline-block;
+    padding: 0 10px;
+    margin-top: 5px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    text-overflow: ellipsis;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .mb-select-option-item .dtable-font {
+    font-size: 12px;
+    color: #798d99;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-create-select-item {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    padding: 0 10px;
+    margin-top: 20px;
+    border-top: 1px solid #dedede;
+    border-bottom: 1px solid #e9e9e9;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-create-select-item .dtable-font {
+    margin-right: 10px;
+    font-size: 12px;
+    font-weight: 600px;
+    transition: translateY(1px);
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-create-select-item .add-new-option {
+    font-size: 14px;
+    font-weight: 500px;
+  }
+
+}