@aplus-frontend/ui 0.0.1-beta.33 → 0.0.1-beta.35

package/es/src/ap-action/interface.d.ts

@@ -1,11 +1,12 @@
 import { DropdownProps, ModalFuncProps, PopconfirmProps } from 'ant-design-vue';
+import { VNode } from 'vue';
 
 export type ActionColor = 'primary' | 'success' | 'error' | 'warn';
 export type ApActionItemProps = {
     /**
      * 文本
      */
-    text?: string;
+    text?: string | VNode;
     /**
      * 预定义文本颜色
      */

package/es/src/ap-action/item/index.vue2.mjs

@@ -1,9 +1,9 @@
-import { defineComponent as p, ref as g, unref as i, computed as r, openBlock as s, createElementBlock as k, normalizeClass as C, createBlock as b, createCommentVNode as c, renderSlot as y, createTextVNode as v, toDisplayString as B } from "vue";
+import { defineComponent as y, ref as g, unref as r, computed as s, openBlock as n, createElementBlock as c, normalizeClass as C, createBlock as d, createCommentVNode as u, renderSlot as b, isVNode as v, resolveDynamicComponent as B, toDisplayString as A } from "vue";
 import "../../config-provider/index.mjs";
 import x from "ant-design-vue/es/button/LoadingIcon";
 import "../style/item.css";
-import { useNamespace as A } from "../../config-provider/hooks/use-namespace.mjs";
-const S = /* @__PURE__ */ p({
+import { useNamespace as h } from "../../config-provider/hooks/use-namespace.mjs";
+const I = { key: 1 }, V = /* @__PURE__ */ y({
   name: "ApActionItem",
   __name: "index",
   props: {
@@ -15,35 +15,35 @@ const S = /* @__PURE__ */ p({
     onClick: {},
     loading: { type: Boolean, default: !1 }
   },
-  setup(d) {
-    const e = d, { b: u, m: t } = A("action-item"), n = g(!1);
-    function f(o) {
-      var a;
-      i(l) || e.disabled || ((a = e.onClick) == null || a.call(e, o), e.onAction && (n.value = !0, e.onAction(o).finally(() => n.value = !1)));
+  setup(f) {
+    const e = f, { b: m, m: t } = h("action-item"), l = g(!1);
+    function p(o) {
+      var i;
+      r(a) || e.disabled || ((i = e.onClick) == null || i.call(e, o), e.onAction && (l.value = !0, e.onAction(o).finally(() => l.value = !1)));
     }
-    const l = r(() => e.loading || i(n)), m = r(() => [
-      u(),
+    const a = s(() => e.loading || r(l)), k = s(() => [
+      m(),
       t(e.color),
       e.disabled ? t("disabled") : null,
-      l.value ? t("loading") : null
+      a.value ? t("loading") : null
     ].filter(Boolean));
-    return (o, a) => o.visible ? (s(), k("span", {
+    return (o, i) => o.visible ? (n(), c("span", {
       key: 0,
-      onClick: f,
-      class: C(m.value)
+      onClick: p,
+      class: C(k.value)
     }, [
-      l.value ? (s(), b(i(x), {
+      a.value ? (n(), d(r(x), {
         key: 0,
         prefixCls: "btn",
         existIcon: !1,
         loading: ""
-      })) : c("", !0),
-      y(o.$slots, "default", {}, () => [
-        v(B(o.text || ""), 1)
+      })) : u("", !0),
+      b(o.$slots, "default", {}, () => [
+        v(o.text) ? (n(), d(B(o.text), { key: 0 })) : (n(), c("span", I, A(o.text || ""), 1))
       ])
-    ], 2)) : c("", !0);
+    ], 2)) : u("", !0);
   }
 });
 export {
-  S as default
+  V as default
 };

package/es/src/ap-table/hooks/use-table-paging.d.ts

@@ -0,0 +1,57 @@
+import { Ref } from 'vue';
+import { RequestData } from '../interface';
+import { ApFormExpose } from '../../ap-form';
+import { TablePaginationConfig } from 'ant-design-vue';
+
+export type UseTablePagingParams<DataType, ParamsType> = {
+    request: (params: any) => Promise<RequestData<DataType>>;
+    /**
+     * 是否手动执行，页面初始化后不执行网络请求，需要手动触发
+     * @param params
+     * @returns
+     */
+    manual?: boolean;
+    /**
+     * @description 默认情况下，请求第几页
+     * @default 1
+     */
+    defaultCurrent?: number;
+    /**
+     * 默认每页请求的数据条数
+     * @default 10
+     */
+    defaultPageSize?: number;
+    /**
+     * 额外的默认请求参数，这个参数变更不会触发网络请求
+     */
+    defaultParams?: ParamsType;
+    /**
+     * 数据请求前格式化请求参数
+     * @param values
+     * @returns
+     */
+    formatParams?: (values: any) => any;
+    /**
+     * 特殊类型参数类型对照表（会根据该对照表运行默认的参数格式化）
+     */
+    paramsValueTypeMap?: Record<string, any>;
+    /**
+     * 重设表单需要忽略的字段
+     */
+    resetFieldsIgnores?: string[];
+};
+export declare const useTablePaging: <DataType = any, ParamsType = Record<string, any>>({ manual, defaultCurrent, defaultPageSize, request, defaultParams, formatParams, paramsValueTypeMap, resetFieldsIgnores }: UseTablePagingParams<DataType, ParamsType>) => {
+    formRef: Ref<ApFormExpose<any> | undefined>;
+    submit: () => void;
+    reset: () => void;
+    refresh: () => void;
+    refreshByDelete: (n: number) => void;
+    data: Ref<{
+        total: number;
+        records: DataType[];
+        loading: boolean;
+    }>;
+    current: Ref<number>;
+    pageSize: Ref<number>;
+    onChange: (p: TablePaginationConfig) => void;
+};

package/es/src/ap-table/interface.d.ts

@@ -1,8 +1,8 @@
-import { CardProps } from 'ant-design-vue';
 import { ColumnType, TableProps } from 'ant-design-vue/es/table';
 import { CompareFn, SortOrder } from 'ant-design-vue/es/table/interface';
 import { ApFormSearchFormProps } from '../ap-form';
 import { ApFormItemDateProps, ApFormItemDateRangeProps, ApFormItemNumberProps, ApFormItemRadioProps, ApFormItemSelectProps, ApFormItemSwitchProps, ApFormItemTextAreaProps, ApFormItemTextProps } from 'src/ap-form/items/interface';
+import { CSSProperties } from 'vue';
 
 type ValueEnmuTyType = {
     text: string;
@@ -78,9 +78,8 @@ export type ApColumnType<ValueType extends keyof ApTableFormFields = 'text'> = E
      */
     fieldProps?: ApTableFormFields[ValueType];
 };
-type RequestData<T> = {
+export type RequestData<T> = {
     data: T[] | undefined;
-    success?: boolean;
     total?: number;
 } & Record<string, any>;
 export type ApTableProps<RecordType = any, ParamsType = any, ValueType extends keyof ApTableFormFields = 'text'> = Omit<TableProps<RecordType>, 'columns' | 'pagination'> & {
@@ -89,13 +88,9 @@ export type ApTableProps<RecordType = any, ParamsType = any, ValueType extends k
      */
     columns?: ApColumnType<ValueType>[];
     /**
-     * 是否是卡片模式
+     * 是否启用卡片样式
      */
     card?: boolean;
-    /**
-     * 卡片模式下属性设置
-     */
-    cardProps?: CardProps;
     /**
      * request请求参数，修改后会自动触发更新
      */
@@ -148,5 +143,13 @@ export type ApTableProps<RecordType = any, ParamsType = any, ValueType extends k
      * 是否显示分页器（特定的分页器）
      */
     pagination?: boolean;
+    /**
+     * 自定义查询表单容器样式
+     */
+    searchFormWrapperStyle?: CSSProperties;
+    /**
+     * 自定义表格样式
+     */
+    tableWrapperStyle?: CSSProperties;
 };
 export {};

package/es/src/ap-table/style/ap-table.css

@@ -0,0 +1,14 @@
+.aplus-ap-table-wrapper {
+  padding: 16px;
+  background-color: #fff;
+}
+.aplus-ap-table__search-wrapper {
+  padding: 16px;
+  padding-bottom: 0;
+  background-color: #fff;
+  margin-bottom: 16px;
+}
+.aplus-ap-table__form-wrapper {
+  padding: 16px;
+  background-color: #fff;
+}

package/es/src/ap-table/utils.d.ts

@@ -0,0 +1,8 @@
+export type FieldValueType = 'multiple' | 'multipleNumber' | 'dayjs' | 'dayjsRange' | 'dayjsDayRange' | 'number' | 'boolean' | 'object';
+export declare const formatParamsValueType: (type: FieldValueType | Record<string, FieldValueType>, value: any, cb: (t: FieldValueType, value: any) => any) => any;
+/**
+ * 解析数值
+ * @param t 值类型
+ * @param value 值
+ */
+export declare const parseFieldValue: (t: FieldValueType, value: any) => any;

package/es/src/basic/help.vue.d.ts

@@ -44,9 +44,9 @@ declare const _default: DefineComponent<{
      * Help text list
      */
     text: {
-        type: PropType<string[] | VNode< RendererNode, RendererElement, {
+        type: PropType<VNode< RendererNode, RendererElement, {
             [key: string]: any;
-        }> | VNodeChild>;
+        }> | string[] | VNodeChild>;
     };
 }, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
     /**
@@ -91,9 +91,9 @@ declare const _default: DefineComponent<{
      * Help text list
      */
     text: {
-        type: PropType<string[] | VNode< RendererNode, RendererElement, {
+        type: PropType<VNode< RendererNode, RendererElement, {
             [key: string]: any;
-        }> | VNodeChild>;
+        }> | string[] | VNodeChild>;
     };
 }>>, {
     color: string;

package/es/src/basic/index.d.ts

@@ -23,9 +23,9 @@ export declare const BasicHelp: {
             default: string;
         };
         text: {
-            type: PropType<string[] | VNode<RendererNode, RendererElement, {
+            type: PropType< VNode<RendererNode, RendererElement, {
                 [key: string]: any;
-            }> | VNodeChild>;
+            }> | string[] | VNodeChild>;
         };
     }>>, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly< ExtractPropTypes<{
         maxWidth: {
@@ -48,9 +48,9 @@ export declare const BasicHelp: {
             default: string;
         };
         text: {
-            type: PropType<string[] | VNode<RendererNode, RendererElement, {
+            type: PropType< VNode<RendererNode, RendererElement, {
                 [key: string]: any;
-            }> | VNodeChild>;
+            }> | string[] | VNodeChild>;
         };
     }>>, {
         color: string;
@@ -86,9 +86,9 @@ export declare const BasicHelp: {
             default: string;
         };
         text: {
-            type: PropType<string[] | VNode<RendererNode, RendererElement, {
+            type: PropType< VNode<RendererNode, RendererElement, {
                 [key: string]: any;
-            }> | VNodeChild>;
+            }> | string[] | VNodeChild>;
         };
     }>>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         color: string;
@@ -121,9 +121,9 @@ export declare const BasicHelp: {
         default: string;
     };
     text: {
-        type: PropType<string[] | VNode<RendererNode, RendererElement, {
+        type: PropType< VNode<RendererNode, RendererElement, {
             [key: string]: any;
-        }> | VNodeChild>;
+        }> | string[] | VNodeChild>;
     };
 }>>, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
     color: string;

package/es/src/modal/basic.vue2.mjs

@@ -10,13 +10,12 @@ import { omit as g } from "lodash-unified";
 import { deepMerge as oe } from "@aplus-frontend/utils";
 import { isFunction as te } from "@fruits-chain/utils";
 import "../config-provider/index.mjs";
-import "./style/index.css";
 import { useNamespace as ne } from "../config-provider/hooks/use-namespace.mjs";
 import le from "./components/modal-wrapper.vue2.mjs";
 import ae from "./components/modal-close.vue2.mjs";
 import re from "./components/modal-header.vue2.mjs";
 import se from "./components/modal-footer.vue2.mjs";
-const Me = /* @__PURE__ */ q({
+const be = /* @__PURE__ */ q({
   name: "BasicModal",
   inheritAttrs: !1,
   __name: "basic",
@@ -39,9 +38,9 @@ const Me = /* @__PURE__ */ q({
           o(i) && o(i).setModalHeight();
         });
       }
-    }, p = J();
-    p && r("register", F, p.uid);
-    const f = d(() => ({
+    }, f = J();
+    f && r("register", F, f.uid);
+    const p = d(() => ({
       ...t,
       ...o(v)
     })), {
@@ -51,10 +50,10 @@ const Me = /* @__PURE__ */ q({
     } = ee({
       modalWrapperRef: i,
       extHeightRef: w,
-      wrapClassName: K(f.value, "wrapClassName")
+      wrapClassName: K(p.value, "wrapClassName")
     }), l = d(() => ({
       ...{
-        ...o(f),
+        ...o(p),
         open: o(n),
         okButtonProps: void 0,
         cancelButtonProps: void 0,
@@ -64,7 +63,7 @@ const Me = /* @__PURE__ */ q({
     })), b = d(() => {
       const e = {
         ...B,
-        ...o(f),
+        ...o(p),
         open: o(n)
       };
       return e.wrapClassName = `${(e == null ? void 0 : e.wrapClassName) || ""} ${o(P)}vben-basic-modal-wrap`, o(c) ? g(e, ["height", "title"]) : g(e, "title");
@@ -77,7 +76,7 @@ const Me = /* @__PURE__ */ q({
     }), U(
       () => o(n),
       (e) => {
-        r("open-change", e), r("update:open", e), p && F.emitOpen && F.emitOpen(e, p.uid), S(() => {
+        r("open-change", e), r("update:open", e), f && F.emitOpen && F.emitOpen(e, f.uid), S(() => {
           t.scrollTop && e && o(i) && o(i).scrollTop();
         });
       },
@@ -164,7 +163,7 @@ const Me = /* @__PURE__ */ q({
         fn: s(() => [
           h(re, {
             helpMessage: l.value.helpMessage,
-            title: f.value.title,
+            title: p.value.title,
             onDblclick: z
           }, null, 8, ["helpMessage", "title"])
         ]),
@@ -197,5 +196,5 @@ const Me = /* @__PURE__ */ q({
   }
 });
 export {
-  Me as default
+  be as default
 };

package/es/src/modal/style/index.css

@@ -1,103 +0,0 @@
-.fullscreen-modal {
-  overflow: hidden;
-}
-.fullscreen-modal .ant-modal {
-  inset: 0 !important;
-  width: 100% !important;
-  max-width: 100%;
-  height: 100%;
-}
-.fullscreen-modal .ant-modal-content {
-  height: 100%;
-  overflow: hidden;
-}
-.fullscreen-modal .ant-modal-footer {
-  margin-top: 0;
-}
-.aplus-basic-modal {
-  width: 520px;
-  padding-bottom: 0;
-}
-.aplus-basic-modal .ant-modal-body > .aplus-scrollbar {
-  padding: 20px;
-  padding-bottom: 0;
-}
-.aplus-basic-modal .ant-modal-title {
-  font-size: 16px;
-  font-weight: bold;
-}
-.aplus-basic-modal .ant-modal-title .aplus-basic-title {
-  cursor: move !important;
-  padding-left: 0;
-}
-.aplus-basic-modal .ant-modal-body {
-  padding: 0;
-}
-.aplus-basic-modal .ant-modal-body > .aplus-scrollbar > .aplus-scrollbar__bar.is-horizontal {
-  display: none;
-}
-.aplus-basic-modal .ant-modal-large {
-  top: 60px;
-}
-.aplus-basic-modal .ant-modal-large .ant-modal--mini {
-  top: 16px;
-}
-.aplus-basic-modal .ant-modal-header {
-  padding: 15px 20px;
-  margin-bottom: 0;
-  border-bottom: 1px solid #dee4ed;
-}
-.aplus-basic-modal .ant-modal-content {
-  padding: 0 !important;
-}
-.aplus-basic-modal .ant-modal-footer {
-  padding: 20px;
-  margin-top: 0;
-}
-.aplus-basic-modal .ant-modal-footer button + button {
-  margin-left: 10px;
-}
-.aplus-basic-modal .ant-modal-close {
-  top: 0 !important;
-  right: 0 !important;
-  width: auto !important;
-  outline: none;
-  background: transparent !important;
-  font-weight: normal;
-}
-.aplus-basic-modal .ant-modal-close-x {
-  display: inline-block;
-  width: 96px;
-  height: 56px;
-  line-height: 56px !important;
-}
-.aplus-basic-modal .ant-modal-confirm-body .ant-modal-confirm-content > * {
-  color: #909399;
-}
-.aplus-basic-modal .ant-modal-confirm-confirm.error .ant-modal-confirm-body > .anticon {
-  color: #ed6f6f;
-}
-.aplus-basic-modal .ant-modal-confirm-btns .ant-btn:last-child {
-  margin-right: 0;
-}
-.aplus-basic-modal .ant-modal-confirm-info .ant-modal-confirm-body > .anticon {
-  color: #efbd47;
-}
-.aplus-basic-modal .ant-modal-confirm-confirm.success .ant-modal-confirm-body > .anticon {
-  color: #34b77c;
-}
-@media screen and (height <= 600px) {
-  .ant-modal {
-    top: 60px;
-  }
-}
-@media screen and (height <= 540px) {
-  .ant-modal {
-    top: 30px;
-  }
-}
-@media screen and (height <= 480px) {
-  .ant-modal {
-    top: 10px;
-  }
-}

package/es/src/pro-form/style/index.css

@@ -4,6 +4,3 @@
 .aplus-basic-form .ant-form-explain {
   font-size: 14px;
 }
-.aplus-basic-form--compact .ant-form-item {
-  margin-bottom: 8px !important;
-}

package/es/src/pro-form/style/table-form.css

@@ -1,3 +1,6 @@
+.aplus-pro-table-form .table-form-admin .ant-table-wrapper {
+  padding: 0;
+}
 .aplus-pro-table-form .table-form-admin .ant-table .ant-table-tbody > tr > td,
 .aplus-pro-table-form .table-form-admin .ant-table .ant-table-body .ant-table-tbody > tr.ant-table-row > td {
   padding: 18px 16px 0px ;

package/es/src/pro-table/components/editable/editable-cell.vue.d.ts

@@ -1,84 +1,4 @@
-import { CSSProperties, PropType, DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, PublicProps, ExtractPropTypes } from 'vue';
-import { BasicColumn } from '../../types/table';
-import { Recordable } from '../../../type';
-import { ComponentType } from '../../component-map';
+import { DefineSetupFnComponent, PublicProps } from 'vue';
 
-declare const _default: DefineComponent<{
-    value: {
-        type: PropType<string | number | boolean | Record<string, any>>;
-        default: string;
-    };
-    record: {
-        type: any;
-    };
-    column: {
-        type: PropType<BasicColumn>;
-        default: () => {};
-    };
-    index: {
-        type: NumberConstructor;
-        required: true;
-    };
-}, {
-    isEdit: Ref<boolean>;
-    ns: {
-        namespace: ComputedRef<string>;
-        b: (blockSuffix?: string) => string;
-        e: (element?: string | undefined) => string;
-        m: (modifier?: string | undefined) => string;
-        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
-        em: (element?: string | undefined, modifier?: string | undefined) => string;
-        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
-        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
-        is: {
-            (name: string, state: boolean | undefined): string;
-            (name: string): string;
-        };
-        cssVar: (object: Record<string, string>) => Record<string, string>;
-        cssVarName: (name: string) => string;
-        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
-        cssVarBlockName: (name: string) => string;
-    };
-    handleEdit: (e: Event) => void;
-    currentValueRef: Ref<any>;
-    handleSubmit: (needEmit?: boolean, valid?: boolean) => Promise<false | undefined>;
-    handleChange: (e: any) => Promise<void>;
-    handleCancel: () => void;
-    elRef: Ref<any>;
-    getComponent: ComputedRef<ComponentType>;
-    getRule: ComputedRef<boolean | ((text: string, record: Recordable<any>) => Promise<string>) | undefined>;
-    onClickOutside: () => void;
-    ruleMessage: Ref<string>;
-    getRuleVisible: ComputedRef<boolean | "">;
-    getComponentProps: ComputedRef<any>;
-    handleOptionsChange: (options: any) => void;
-    getWrapperStyle: ComputedRef<CSSProperties>;
-    getWrapperClass: ComputedRef<string>;
-    getRowEditable: ComputedRef<boolean>;
-    getValues: ComputedRef<any>;
-    handleEnter: () => Promise<void>;
-    handleSubmitClick: () => void;
-    spinning: Ref<boolean>;
-    getDisable: ComputedRef<boolean>;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
-    value: {
-        type: PropType<string | number | boolean | Record<string, any>>;
-        default: string;
-    };
-    record: {
-        type: any;
-    };
-    column: {
-        type: PropType<BasicColumn>;
-        default: () => {};
-    };
-    index: {
-        type: NumberConstructor;
-        required: true;
-    };
-}>>, {
-    value: string | number | boolean | Record<string, any>;
-    column: BasicColumn;
-    record: any;
-}, {}>;
+declare const _default: DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, PublicProps>;
 export default _default;

package/es/src/theme/antd-global-overwrite/admin/alert.css

@@ -1,21 +1,47 @@
 .ant-alert {
+  align-items: flex-start;
   width: 100%;
-  margin: 0 0 4px;
-  padding: 9px 12px;
+  padding: 6px 12px;
   border-radius: 4px;
 }
+.ant-alert .ant-alert-icon {
+  font-size: 16px;
+  transform: translateY(1px);
+  margin-inline-end: 8px;
+}
 .ant-alert .ant-alert-message {
-  color: #182948;
-  font-weight: bold;
+  color: #333333;
+  font-weight: normal !important;
   font-size: 12px;
-  line-height: 12px;
+  line-height: 18px;
 }
 .ant-alert .ant-alert-message .href {
-  color: #0070ff;
+  color: #1890ff;
   cursor: pointer;
 }
 .ant-alert .ant-alert-description {
+  color: #333333;
   font-weight: normal;
   font-size: 12px;
   line-height: 18px;
 }
+.ant-alert-with-description .ant-alert-message {
+  margin-bottom: 4px;
+  font-weight: bold !important;
+}
+.ant-alert-warning {
+  background: rgba(250, 173, 20, 0.1);
+  border: 1px solid rgba(250, 173, 20, 0.4);
+}
+.ant-alert-info {
+  background: rgba(24, 144, 255, 0.1);
+  border: 1px solid rgba(24, 144, 255, 0.4);
+}
+.ant-alert-success {
+  background: rgba(52, 183, 124, 0.1);
+  border: 1px solid rgba(52, 183, 124, 0.4);
+}
+.ant-alert-error {
+  background: rgba(255, 77, 79, 0.1);
+  border: 1px solid rgba(255, 77, 79, 0.4);
+}

package/es/src/theme/antd-global-overwrite/admin/form.css

@@ -17,6 +17,9 @@
 .ant-form .ant-form-item-control .ant-radio-wrapper .ant-radio.ant-radio-checked .ant-radio-inner::after {
   background-color: #34b77c;
 }
+.ant-form .ant-form-item-control .ant-select.ant-select-open .ant-select-selection-item {
+  color: #bfbfbf;
+}
 .ant-input::-moz-placeholder {
   color: #bfbfbf;
 }
@@ -38,20 +41,25 @@
 .ant-input-number .ant-input-number-input-wrap > input::placeholder {
   color: #bfbfbf;
 }
+input.ant-input[disabled] {
+  color: #666666;
+}
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] {
   padding: 16px;
 }
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
 }
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.ant-btn-primary {
   order: 1;
 }
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.ant-btn-default {
   order: 2;
+  margin-right: 0;
 }
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.ant-btn-link {
   order: 3;
+  margin-left: 0.5rem;
 }