@gct-paas/core-web 0.1.4-dev.10 → 0.1.4-dev.11

package/es/modules/gct-table/controller/table-row/table-row.controller.mjs

@@ -0,0 +1,70 @@
+import { reactive } from 'vue';
+import { TableRowState } from '../../state/table-row/table-row.state.mjs';
+import { TableActionItemController } from '../table-item/table-action-item.controller.mjs';
+import { TableEditItemController } from '../table-item/table-edit-item.controller.mjs';
+import { TableItemController } from '../table-item/table-item.controller.mjs';
+import { CountLatch } from '../../utils/count-latch/count-latch.mjs';
+import '@gct-paas/core';
+
+class TableRowController {
+  constructor(table, model, data) {
+    this.table = table;
+    this.model = model;
+    this.data = data;
+  }
+  item = {};
+  fields = [];
+  state = this.createState();
+  activeCount = new CountLatch();
+  get key() {
+    return this.data[this.model.key];
+  }
+  async init() {
+    const all = this.model.columns.map((col) => {
+      let c = null;
+      switch (col.type) {
+        case "edit":
+          c = new TableEditItemController(this, col);
+          break;
+        case "actions":
+          c = new TableActionItemController(this, col);
+          break;
+        default:
+          c = new TableItemController(this, col);
+      }
+      this.fields.push(col.name);
+      c.state = reactive(c.state);
+      this.item[col.name] = c;
+      return c;
+    });
+    await Promise.all(all);
+  }
+  change(name, newVal, oldVal) {
+    this.table.change(this, name, newVal, oldVal);
+  }
+  async destroy() {
+    const keys = Object.keys(this.item);
+    const all = keys.map((key) => this.item[key].destroy());
+    this.item = {};
+    await Promise.all(all);
+  }
+  active() {
+    if (this.activeCount.isLock) {
+      this.activeCount.lock();
+      return;
+    }
+    this.activeCount.lock();
+    this.state.active = true;
+    this.activeCount.await().then(() => {
+      this.state.active = false;
+    });
+  }
+  unActive() {
+    this.activeCount.unlock();
+  }
+  createState() {
+    return new TableRowState();
+  }
+}
+
+export { TableRowController };

package/es/{editor/gct-form-i18n/gct-form-i18n.d.ts → modules/gct-table/editor/gct-table-date/gct-table-date.d.ts}

@@ -1,38 +1,49 @@
 import { PropType } from 'vue';
-import { IFormItemController, INumberEditor } from '@gct-paas/core';
-export declare const GctFormI18n: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+import { ITextEditor } from '../../../gct-form';
+import { ITableEditItemController } from '../../interface';
+/**
+ * 文本编辑器
+ */
+export declare const GctTableDate: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     c: {
-        type: PropType<IFormItemController>;
+        type: PropType<ITableEditItemController>;
         required: true;
     };
     model: {
-        type: PropType<INumberEditor>;
+        type: PropType<ITextEditor>;
         required: true;
     };
     value: {
         type: StringConstructor;
         default: string;
     };
+    isEdit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
     val: import('vue').WritableComputedRef<any, any>;
-    i18nConfigValue: import('vue').WritableComputedRef<any, any>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     c: {
-        type: PropType<IFormItemController>;
+        type: PropType<ITableEditItemController>;
         required: true;
     };
     model: {
-        type: PropType<INumberEditor>;
+        type: PropType<ITextEditor>;
         required: true;
     };
     value: {
         type: StringConstructor;
         default: string;
     };
+    isEdit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;
 }>, {
     value: string;
+    isEdit: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default GctFormI18n;

package/es/modules/gct-table/editor/gct-table-date/gct-table-date.mjs

@@ -0,0 +1,93 @@
+import { defineComponent, createVNode, resolveComponent, mergeProps } from 'vue';
+import 'qx-util';
+import 'lodash-es';
+import { useGctFormValue } from '../../../gct-form/hooks/use-gct-form-value/use-gct-form-value.mjs';
+import '../../../gct-form/editor/gct-form-action/index.mjs';
+import '../../../gct-form/editor/gct-form-date-format-select/index.mjs';
+import '../../../gct-form/editor/gct-form-length-unit/index.mjs';
+import '../../../gct-form/editor/gct-form-color/index.mjs';
+import '../../../gct-form/editor/gct-form-date/index.mjs';
+import '../../../gct-form/editor/gct-form-formula/index.mjs';
+import '../../../gct-form/editor/gct-form-check-switch/index.mjs';
+import '../../../gct-form/editor/gct-form-group-select/index.mjs';
+import '../../../gct-form/editor/gct-form-i18n/index.mjs';
+import '../../../gct-form/editor/gct-form-icon-select/index.mjs';
+import '../../../gct-form/editor/gct-form-number/index.mjs';
+import '../../../gct-form/editor/gct-form-picker/index.mjs';
+import '../../../gct-form/editor/gct-form-pixel-config/index.mjs';
+import '../../../gct-form/editor/gct-form-select/index.mjs';
+import '../../../gct-form/editor/gct-form-span/index.mjs';
+import '../../../gct-form/editor/gct-form-switch/index.mjs';
+import '../../../gct-form/editor/gct-form-text/index.mjs';
+import '../../../gct-form/editor/gct-form-empty/index.mjs';
+import '../../../gct-form/editor/gct-form-textarea/index.mjs';
+import '../../../gct-form/editor/gct-form-radio/index.mjs';
+import '../../../gct-form/editor/gct-form-info/index.mjs';
+import '../../../gct-form/editor/gct-form-checkbox/index.mjs';
+import '../../../gct-form/editor/gct-form-model-select/index.mjs';
+import '../../../gct-form/editor/gct-form-multiple-choice/index.mjs';
+import '../../../gct-form/editor/gct-form-table/index.mjs';
+import '../../../gct-form/editor/gct-select-form-table/index.mjs';
+import { useNamespace } from '@gct-paas/core';
+import '../gct-table-text/gct-table-text.css';import '../../../gct-form/widgets/gct-form/gct-form-title-group/gct-form-title-group.css';import '../../../gct-form/widgets/gct-form/gct-form-tab-pane/gct-form-tab-pane.css';import '../../../gct-form/widgets/gct-form/gct-form-tab/gct-form-tab.css';import '../../../gct-form/widgets/gct-form/gct-form-line/gct-form-line.css';import '../../../gct-form/widgets/gct-form/gct-form-group/gct-form-group.css';import '../../../gct-form/widgets/gct-form/gct-form-collapse/gct-form-collapse.css';import '../../../gct-form/widgets/gct-form/gct-form-collapse-pane/gct-form-collapse-pane.css';import '../../../gct-form/widgets/gct-form/gct-form.css';import '../../../gct-form/widgets/gct-form/gct-form-item/gct-form-item.css';/* empty css                                                                   */
+/* empty css                                                */
+/* empty css                                                                                     */
+import 'ant-design-vue';
+/* empty css                                                                           */
+/* empty css                                                                     */
+/* empty css                                                                   */
+/* empty css                                                                 */
+/* empty css                                                                           */
+/* empty css                                                                                 */
+/* empty css                     */
+
+/**
+ * 文本编辑器
+ */
+const GctTableDate = /* @__PURE__ */ defineComponent({
+  name: 'GctTableDate',
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:value'],
+  setup() {
+    const ns = useNamespace('table-date');
+    const val = useGctFormValue();
+    return {
+      ns,
+      val
+    };
+  },
+  render() {
+    if (this.isEdit === false) {
+      return createVNode("div", {
+        "class": [this.ns.b(), this.ns.e('info')]
+      }, [this.c.value]);
+    }
+    return createVNode(resolveComponent("a-date-picker"), mergeProps({
+      "picker": "date",
+      "value": this.val,
+      "onUpdate:value": $event => this.val = $event
+    }, this.model.props || {}, {
+      "class": [this.ns.b(), this.ns.is('error', this.c.state.error)],
+      "placeholder": this.model.placeholder
+    }), null);
+  }
+});
+
+export { GctTableDate };

package/es/modules/gct-table/editor/gct-table-date/gct-table-date.provider.d.ts

@@ -0,0 +1,11 @@
+import { ITableEditorProvider } from '../../interface';
+/**
+ * 文本编辑器
+ *
+ * @export
+ * @class GctTableDateProvider
+ * @implements {ITableEditorProvider}
+ */
+export declare class GctTableDateProvider implements ITableEditorProvider {
+    component: string;
+}

package/es/modules/gct-table/editor/gct-table-date/gct-table-date.provider.mjs

@@ -0,0 +1,5 @@
+class GctTableDateProvider {
+  component = "gct-table-date";
+}
+
+export { GctTableDateProvider };

package/es/modules/gct-table/editor/gct-table-date/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;

package/es/modules/gct-table/editor/gct-table-date/index.mjs

@@ -0,0 +1,52 @@
+import { EditorType } from '../../../gct-form/constants/editor-type/editor-type.mjs';
+import 'vue';
+import 'qx-util';
+import 'lodash-es';
+import '../../../gct-form/editor/gct-form-action/index.mjs';
+import '../../../gct-form/editor/gct-form-date-format-select/index.mjs';
+import '../../../gct-form/editor/gct-form-length-unit/index.mjs';
+import '../../../gct-form/editor/gct-form-color/index.mjs';
+import '../../../gct-form/editor/gct-form-date/index.mjs';
+import '../../../gct-form/editor/gct-form-formula/index.mjs';
+import '../../../gct-form/editor/gct-form-check-switch/index.mjs';
+import '../../../gct-form/editor/gct-form-group-select/index.mjs';
+import '../../../gct-form/editor/gct-form-i18n/index.mjs';
+import '../../../gct-form/editor/gct-form-icon-select/index.mjs';
+import '../../../gct-form/editor/gct-form-number/index.mjs';
+import '../../../gct-form/editor/gct-form-picker/index.mjs';
+import '../../../gct-form/editor/gct-form-pixel-config/index.mjs';
+import '../../../gct-form/editor/gct-form-select/index.mjs';
+import '../../../gct-form/editor/gct-form-span/index.mjs';
+import '../../../gct-form/editor/gct-form-switch/index.mjs';
+import '../../../gct-form/editor/gct-form-text/index.mjs';
+import '../../../gct-form/editor/gct-form-empty/index.mjs';
+import '../../../gct-form/editor/gct-form-textarea/index.mjs';
+import '../../../gct-form/editor/gct-form-radio/index.mjs';
+import '../../../gct-form/editor/gct-form-info/index.mjs';
+import '../../../gct-form/editor/gct-form-checkbox/index.mjs';
+import '../../../gct-form/editor/gct-form-model-select/index.mjs';
+import '../../../gct-form/editor/gct-form-multiple-choice/index.mjs';
+import '../../../gct-form/editor/gct-form-table/index.mjs';
+import '../../../gct-form/editor/gct-select-form-table/index.mjs';
+import '@gct-paas/core';
+import '../../../gct-form/widgets/gct-form/gct-form-title-group/gct-form-title-group.css';import '../../../gct-form/widgets/gct-form/gct-form-tab-pane/gct-form-tab-pane.css';import '../../../gct-form/widgets/gct-form/gct-form-tab/gct-form-tab.css';import '../../../gct-form/widgets/gct-form/gct-form-line/gct-form-line.css';import '../../../gct-form/widgets/gct-form/gct-form-group/gct-form-group.css';import '../../../gct-form/widgets/gct-form/gct-form-collapse/gct-form-collapse.css';import '../../../gct-form/widgets/gct-form/gct-form-collapse-pane/gct-form-collapse-pane.css';import '../../../gct-form/widgets/gct-form/gct-form.css';import '../../../gct-form/widgets/gct-form/gct-form-item/gct-form-item.css';/* empty css                                                                   */
+/* empty css                                                */
+/* empty css                                                                                     */
+import 'ant-design-vue';
+/* empty css                                                                           */
+/* empty css                                                                     */
+/* empty css                                                                   */
+/* empty css                                                                 */
+/* empty css                                                                           */
+/* empty css                                                                                 */
+import { GctTableDateProvider } from './gct-table-date.provider.mjs';
+import { GctTableDate as GctTableDate$1 } from './gct-table-date.mjs';
+import { widthTableEditorInstall } from '../../utils/width-install/width-install.mjs';
+
+const GctTableDate = widthTableEditorInstall(
+  EditorType.DATE,
+  () => new GctTableDateProvider(),
+  GctTableDate$1
+);
+
+export { GctTableDate as default };

package/es/modules/gct-table/editor/gct-table-span/gct-table-span.css

@@ -0,0 +1,86 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-table-span {
+  line-height: 22px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.gct-table-span__icon {
+  color: var(--ant-primary-color);
+  margin-right: 4px;
+  font-size: 16px;
+  line-height: 1;
+  width: 16px;
+  display: inline-block;
+}
+
+.gct-table-span__text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #212528;
+}

package/es/modules/gct-table/editor/gct-table-span/gct-table-span.d.ts

@@ -0,0 +1,34 @@
+import { PropType } from 'vue';
+import { ITableEditItemController } from '../../interface';
+import { ISpanEditor } from '../../../gct-form';
+export declare const GctTableSpan: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<ITableEditItemController>;
+        required: true;
+    };
+    model: {
+        type: PropType<ISpanEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<ITableEditItemController>;
+        required: true;
+    };
+    model: {
+        type: PropType<ISpanEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    value: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/modules/gct-table/editor/gct-table-span/gct-table-span.mjs

@@ -0,0 +1,40 @@
+import { defineComponent, createVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './gct-table-span.css';/* empty css                     */
+
+const GctTableSpan = /* @__PURE__ */ defineComponent({
+  name: 'GctTableSpan',
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  setup() {
+    const ns = useNamespace('table-span');
+    return {
+      ns
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [this.model.icon ? createVNode("span", {
+      "class": this.ns.e('icon')
+    }, [createVNode("i", {
+      "class": `iconfont ${typeof this.model.icon === 'string' ? this.model.icon : this.model.icon(this.c.row.data)}`
+    }, null)]) : null, createVNode("span", {
+      "class": this.ns.e('text')
+    }, [this.value])]);
+  }
+});
+
+export { GctTableSpan };

package/es/modules/gct-table/editor/gct-table-span/gct-table-span.provider.d.ts

@@ -0,0 +1,13 @@
+import { ITableEditorProvider } from '../../interface';
+/**
+ * 纯文本展示
+ *
+ * @author zhanghanrui
+ * @date 2024-04-22 10:04:55
+ * @export
+ * @class GctTableSpanProvider
+ * @implements {ITableEditorProvider}
+ */
+export declare class GctTableSpanProvider implements ITableEditorProvider {
+    component: string;
+}

package/es/modules/gct-table/editor/gct-table-span/gct-table-span.provider.mjs

@@ -0,0 +1,5 @@
+class GctTableSpanProvider {
+  component = "gct-table-span";
+}
+
+export { GctTableSpanProvider };

package/es/modules/gct-table/editor/gct-table-span/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;

package/es/modules/gct-table/editor/gct-table-span/index.mjs

@@ -0,0 +1,52 @@
+import { GctTableSpanProvider } from './gct-table-span.provider.mjs';
+import { GctTableSpan as GctTableSpan$1 } from './gct-table-span.mjs';
+import { widthTableEditorInstall } from '../../utils/width-install/width-install.mjs';
+import { EditorType } from '../../../gct-form/constants/editor-type/editor-type.mjs';
+import 'vue';
+import 'qx-util';
+import 'lodash-es';
+import '../../../gct-form/editor/gct-form-action/index.mjs';
+import '../../../gct-form/editor/gct-form-date-format-select/index.mjs';
+import '../../../gct-form/editor/gct-form-length-unit/index.mjs';
+import '../../../gct-form/editor/gct-form-color/index.mjs';
+import '../../../gct-form/editor/gct-form-date/index.mjs';
+import '../../../gct-form/editor/gct-form-formula/index.mjs';
+import '../../../gct-form/editor/gct-form-check-switch/index.mjs';
+import '../../../gct-form/editor/gct-form-group-select/index.mjs';
+import '../../../gct-form/editor/gct-form-i18n/index.mjs';
+import '../../../gct-form/editor/gct-form-icon-select/index.mjs';
+import '../../../gct-form/editor/gct-form-number/index.mjs';
+import '../../../gct-form/editor/gct-form-picker/index.mjs';
+import '../../../gct-form/editor/gct-form-pixel-config/index.mjs';
+import '../../../gct-form/editor/gct-form-select/index.mjs';
+import '../../../gct-form/editor/gct-form-span/index.mjs';
+import '../../../gct-form/editor/gct-form-switch/index.mjs';
+import '../../../gct-form/editor/gct-form-text/index.mjs';
+import '../../../gct-form/editor/gct-form-empty/index.mjs';
+import '../../../gct-form/editor/gct-form-textarea/index.mjs';
+import '../../../gct-form/editor/gct-form-radio/index.mjs';
+import '../../../gct-form/editor/gct-form-info/index.mjs';
+import '../../../gct-form/editor/gct-form-checkbox/index.mjs';
+import '../../../gct-form/editor/gct-form-model-select/index.mjs';
+import '../../../gct-form/editor/gct-form-multiple-choice/index.mjs';
+import '../../../gct-form/editor/gct-form-table/index.mjs';
+import '../../../gct-form/editor/gct-select-form-table/index.mjs';
+import '@gct-paas/core';
+import '../../../gct-form/widgets/gct-form/gct-form-title-group/gct-form-title-group.css';import '../../../gct-form/widgets/gct-form/gct-form-tab-pane/gct-form-tab-pane.css';import '../../../gct-form/widgets/gct-form/gct-form-tab/gct-form-tab.css';import '../../../gct-form/widgets/gct-form/gct-form-line/gct-form-line.css';import '../../../gct-form/widgets/gct-form/gct-form-group/gct-form-group.css';import '../../../gct-form/widgets/gct-form/gct-form-collapse/gct-form-collapse.css';import '../../../gct-form/widgets/gct-form/gct-form-collapse-pane/gct-form-collapse-pane.css';import '../../../gct-form/widgets/gct-form/gct-form.css';import '../../../gct-form/widgets/gct-form/gct-form-item/gct-form-item.css';/* empty css                                                                   */
+/* empty css                                                */
+/* empty css                                                                                     */
+import 'ant-design-vue';
+/* empty css                                                                           */
+/* empty css                                                                     */
+/* empty css                                                                   */
+/* empty css                                                                 */
+/* empty css                                                                           */
+/* empty css                                                                                 */
+
+const GctTableSpan = widthTableEditorInstall(
+  EditorType.SPAN,
+  () => new GctTableSpanProvider(),
+  GctTableSpan$1
+);
+
+export { GctTableSpan as default };

package/es/modules/gct-table/editor/gct-table-text/gct-table-text.css

@@ -0,0 +1,80 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-table-text {
+  height: 26px;
+  padding: 0 8px;
+}
+.gct-table-text__info {
+  display: flex;
+  align-items: center;
+  border: 1px solid transparent;
+}
+
+.gct-table-text .ant-input-affix-wrapper-focused, .gct-table-text .ant-input-affix-wrapper:focus {
+  border-color: #3168EC;
+}
+.gct-table-text .ant-input-prefix, .gct-table-text .ant-input-suffix {
+  color: #C3C3C3;
+}