@jetlinks-web/components 2.0.38 → 2.1.1

package/es/EditTable/Body.js

@@ -47,7 +47,8 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "scrollTo": "setup-const",
   "showContextMenu": "setup-const",
   "rowClick": "setup-const",
-  "updateSelectedKeys": "setup-const"
+  "updateSelectedKeys": "setup-const",
+  "getViewScrollRef": "setup-const"
 } */
 import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withModifiers as _withModifiers, normalizeClass as _normalizeClass, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode } from "vue";
 const _hoisted_1 = {
@@ -152,6 +153,7 @@ const __sfc_main__ = Object.assign({
         const updateSelectedKeys = (keys) => {
             selectedRowKeys.value = keys;
         };
+        const getViewScrollRef = () => viewScrollRef.value;
         watch(() => JSON.stringify(_optionalChain([props, 'access', _6 => _6.rowSelection, 'optionalAccess', _7 => _7.selectedRowKeys])), (val) => {
             selectedRowKeys.value = JSON.parse(val || '[]');
         }, { immediate: true });
@@ -188,7 +190,8 @@ const __sfc_main__ = Object.assign({
         });
         __expose({
             scrollTo,
-            updateSelectedKeys
+            updateSelectedKeys,
+            getViewScrollRef
         });
         return (_ctx, _cache) => {
             const _component_j_empty = _resolveComponent("j-empty");

package/es/EditTable/EditTable.js

@@ -83,7 +83,6 @@ const _hoisted_3 = {
     key: 0,
     class: "jetlinks-edit-table-horizontal-scroll"
 };
-const _hoisted_4 = /*#__PURE__*/ _createElementVNode("div", { class: "jetlinks-edit-table-horizontal-scroll-hidden" }, null, -1 /* HOISTED */);
 import { FULL_SCREEN, RIGHT_MENU, TABLE_DATA_SOURCE, TABLE_ERROR, TABLE_TOOL, TABLE_WRAPPER } from './consts';
 import { handleColumnsWidth } from './utils';
 import { useResizeObserver, useValidate, useFormContext } from './hooks';
@@ -213,7 +212,8 @@ const __sfc_main__ = Object.assign({
                 emit('searchVisibleChange', v);
             },
             scrollMap,
-            sortData
+            sortData,
+            columns: myColumns
         });
         const addField = (key, field) => {
             fields[key] = field;
@@ -235,7 +235,16 @@ const __sfc_main__ = Object.assign({
             fieldsErrMap.value[key] = message;
         }
         const scrollWidth = computed(() => {
-            return (props.dataSource.length * props.cellHeight) > props.height ? 17 : 0;
+            let _width = 0;
+            if (props.dataSource.length * props.cellHeight) {
+                _width = 17;
+            }
+            if (_optionalChain([tableBody, 'access', _2 => _2.value, 'optionalAccess', _3 => _3.getViewScrollRef])) {
+                const viewScrollDom = _optionalChain([tableBody, 'access', _4 => _4.value, 'optionalAccess', _5 => _5.getViewScrollRef, 'call', _6 => _6()]);
+                const bodyContainer = viewScrollDom.querySelector('.jetlinks-edit-table-body-container');
+                _width = viewScrollDom.offsetWidth - bodyContainer.offsetWidth;
+            }
+            return _width;
         });
         const onHorizontalScroll = () => {
             if (!horizontalScrollRef.value)
@@ -266,8 +275,8 @@ const __sfc_main__ = Object.assign({
                     dataIndex: '__serial',
                     title: options.title,
                     customRender: (customData) => {
-                        if (_optionalChain([props, 'access', _2 => _2.serial, 'optionalAccess', _3 => _3.customRender])) {
-                            return _optionalChain([props, 'access', _4 => _4.serial, 'optionalAccess', _5 => _5.customRender, 'call', _6 => _6(customData)]);
+                        if (_optionalChain([props, 'access', _7 => _7.serial, 'optionalAccess', _8 => _8.customRender])) {
+                            return _optionalChain([props, 'access', _9 => _9.serial, 'optionalAccess', _10 => _10.customRender, 'call', _11 => _11(customData)]);
                         }
                         return customData.index + 1;
                     },
@@ -276,8 +285,7 @@ const __sfc_main__ = Object.assign({
                 };
                 newColumns = [serial, ...props.columns];
             }
-            myColumns.value = handleColumnsWidth(newColumns, _width, _optionalChain([props, 'access', _7 => _7.scroll, 'optionalAccess', _8 => _8.x]));
-            console.log(width, _width, myColumns.value);
+            myColumns.value = handleColumnsWidth(newColumns, _width, _optionalChain([props, 'access', _12 => _12.scroll, 'optionalAccess', _13 => _13.x]));
         }
         const onScrollDown = (len) => {
             emit('scrollDown', len);
@@ -340,8 +348,9 @@ const __sfc_main__ = Object.assign({
                         _createVNode(Header, {
                             columns: myColumns.value,
                             style: _normalizeStyle({ width: tableStyle.width }),
-                            rowKey: _ctx.rowKey
-                        }, null, 8 /* PROPS */, ["columns", "style", "rowKey"]),
+                            rowKey: _ctx.rowKey,
+                            searchColumns: _ctx.searchColumns
+                        }, null, 8 /* PROPS */, ["columns", "style", "rowKey", "searchColumns"]),
                         _createElementVNode("div", {
                             class: "jetlinks-edit-table-header-scroll-hidden",
                             style: _normalizeStyle({ width: _unref(scrollWidth) + 'px' })
@@ -374,7 +383,7 @@ const __sfc_main__ = Object.assign({
                         ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["dataSource", "columns", "cellHeight", "height", "disableMenu", "rowKey", "rowSelection"]),
                         _renderSlot(_ctx.$slots, "bodyExtra")
                     ], 4 /* STYLE */),
-                    (_ctx.scroll.x)
+                    (_optionalChain([_ctx, 'access', _14 => _14.scroll, 'optionalAccess', _15 => _15.x]))
                         ? (_openBlock(), _createElementBlock("div", _hoisted_3, [
                             _createElementVNode("div", {
                                 class: "jetlinks-edit-table-horizontal-scroll-viewport",
@@ -390,7 +399,10 @@ const __sfc_main__ = Object.assign({
                                     })
                                 }, null, 4 /* STYLE */)
                             ], 544 /* NEED_HYDRATION, NEED_PATCH */),
-                            _hoisted_4
+                            _createElementVNode("div", {
+                                class: "jetlinks-edit-table-horizontal-scroll-hidden",
+                                style: _normalizeStyle({ width: _unref(scrollWidth) + 'px' })
+                            }, null, 4 /* STYLE */)
                         ]))
                         : _createCommentVNode("v-if", true)
                 ])

package/es/EditTable/FormItem.js

@@ -0,0 +1,213 @@
+function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+        return undefined;
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+        lastAccessLHS = value;
+        value = fn(value);
+    }
+    else if (op === 'call' || op === 'optionalCall') {
+        value = fn((...args) => value.call(lastAccessLHS, ...args));
+        lastAccessLHS = undefined;
+    }
+} return value; }
+/* Analyzed bindings: {
+  "name": "props",
+  "required": "props",
+  "onBeforeUnmount": "setup-const",
+  "computed": "setup-const",
+  "reactive": "setup-const",
+  "watch": "setup-const",
+  "defineOptions": "setup-const",
+  "get": "setup-maybe-ref",
+  "isArray": "setup-maybe-ref",
+  "useProvideFormItemContext": "setup-maybe-ref",
+  "useInjectError": "setup-maybe-ref",
+  "useInjectForm": "setup-maybe-ref",
+  "TABLE_FORM_ITEM_ERROR": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "emit": "setup-const",
+  "context": "setup-maybe-ref",
+  "globalErrorMessage": "setup-maybe-ref",
+  "hideTimer": "setup-let",
+  "eventKey": "setup-ref",
+  "errorMap": "setup-reactive-const",
+  "filedId": "setup-ref",
+  "filedName": "setup-ref",
+  "filedValue": "setup-ref",
+  "popContainer": "setup-const",
+  "removeTimer": "setup-const",
+  "showErrorTip": "setup-const",
+  "hideErrorTip": "setup-const",
+  "validateRules": "setup-const",
+  "onFieldBlur": "setup-const",
+  "onFieldChange": "setup-const"
+} */
+import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, Fragment as _Fragment, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = n => (_pushScopeId("data-v-1722999077877"), n = n(), _popScopeId(), n);
+const _hoisted_1 = { style: { "color": "#1d2129" } };
+const _hoisted_2 = {
+    key: 0,
+    class: "table-form-error-target"
+};
+const _hoisted_3 = ["id"];
+import { onBeforeUnmount, computed, reactive, watch, } from "vue";
+import { get, isArray } from 'lodash-es';
+import { useProvideFormItemContext } from 'ant-design-vue/es/form/FormItemContext';
+import { useInjectError, useInjectForm } from "./hooks";
+import { TABLE_FORM_ITEM_ERROR } from "./consts";
+const __sfc_main__ = Object.assign({
+    name: 'JEditTableFormItem'
+}, {
+    props: {
+        name: {
+            type: [String, Array],
+            default: undefined
+        },
+        required: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['change'],
+    setup(__props, { emit: __emit }) {
+        const props = __props;
+        const emit = __emit;
+        const context = useInjectForm();
+        const globalErrorMessage = useInjectError();
+        let hideTimer;
+        const eventKey = computed(() => {
+            const names = isArray(props.name) ? props.name : [props.name];
+            return names.join('-');
+        });
+        const errorMap = reactive({
+            message: '',
+            visible: false
+        });
+        const filedId = computed(() => {
+            const names = isArray(props.name) ? props.name : [props.name];
+            return names.join('_');
+        });
+        const filedName = computed(() => {
+            const names = isArray(props.name) ? props.name : [props.name];
+            const _rules = context.rules.value;
+            let tempKey = undefined;
+            for (const key of names) {
+                if (key in _rules) {
+                    tempKey = key;
+                }
+            }
+            return tempKey;
+        });
+        const filedValue = computed(() => {
+            return get(context.dataSource.value, props.name);
+        });
+        provide(TABLE_FORM_ITEM_ERROR, errorMap);
+        const popContainer = (e) => {
+            return e;
+        };
+        const removeTimer = () => {
+            if (hideTimer) {
+                window.clearTimeout(hideTimer);
+                hideTimer = null;
+            }
+        };
+        const showErrorTip = (msg) => {
+            removeTimer();
+            errorMap.message = msg;
+            errorMap.visible = true;
+        };
+        const hideErrorTip = () => {
+            errorMap.visible = false;
+            removeTimer();
+            hideTimer = setTimeout(() => {
+                errorMap.message = '';
+            }, 300);
+        };
+        const validateRules = () => {
+            let index = 0;
+            if (isArray(props.name)) {
+                index = props.name[0];
+            }
+            const promise = context.validateItem({ [filedName.value]: get(context.dataSource.value, props.name) }, index);
+            promise.catch(res => {
+                const error = _optionalChain([res, 'optionalAccess', _2 => _2.filter, 'call', _3 => _3(item => item.field === filedName.value)]) || [];
+                if (error.length === 0) {
+                    hideErrorTip();
+                    context.removeFieldError(eventKey.value);
+                }
+                else {
+                    removeTimer();
+                    errorMap.message = _optionalChain([error, 'access', _4 => _4[0], 'optionalAccess', _5 => _5.message]) || errorMap.message;
+                    errorMap.visible = !!error.length;
+                    context.addFieldError(eventKey.value, errorMap.message);
+                }
+                return errorMap.message;
+            });
+            return promise;
+        };
+        const onFieldBlur = () => {
+            // validateRules()
+        };
+        const onFieldChange = () => {
+            validateRules();
+            emit('change');
+        };
+        watch(() => globalErrorMessage.value, (val) => {
+            if (val[eventKey.value]) {
+                showErrorTip(val[eventKey.value]);
+            }
+            else {
+                hideErrorTip();
+            }
+        }, { immediate: true, deep: true });
+        useProvideFormItemContext({
+            id: filedId,
+            onFieldChange,
+            onFieldBlur,
+        }, computed(() => get(context.dataSource.value, props.name)));
+        onBeforeUnmount(() => {
+            hideErrorTip();
+        });
+        watch(() => [filedName.value, props.name], () => {
+            context.addField(eventKey.value, {
+                filedName: filedName.value,
+                eventKey: eventKey.value,
+                names: props.name,
+                validateRules,
+                showErrorTip
+            });
+        }, { immediate: true });
+        return (_ctx, _cache) => {
+            const _component_a_tooltip = _resolveComponent("a-tooltip");
+            return (_openBlock(), _createElementBlock(_Fragment, null, [
+                _createVNode(_component_a_tooltip, {
+                    color: "#ffffff",
+                    "get-popup-container": popContainer,
+                    arrowPointAtCenter: true
+                }, {
+                    title: _withCtx(() => [
+                        _createElementVNode("span", _hoisted_1, _toDisplayString(errorMap.message), 1 /* TEXT */)
+                    ]),
+                    default: _withCtx(() => [
+                        (errorMap.visible)
+                            ? (_openBlock(), _createElementBlock("div", _hoisted_2))
+                            : _createCommentVNode("v-if", true)
+                    ]),
+                    _: 1 /* STABLE */
+                }),
+                _createElementVNode("div", {
+                    id: eventKey.value,
+                    style: { "position": "relative" },
+                    class: _normalizeClass({ 'edit-table-form-has-error': errorMap.message })
+                }, [
+                    _renderSlot(_ctx.$slots, "default")
+                ], 10 /* CLASS, PROPS */, _hoisted_3)
+            ], 64 /* STABLE_FRAGMENT */));
+        };
+    }
+});
+export default __sfc_main__;

package/es/EditTable/Header.js

@@ -78,7 +78,7 @@ const __sfc_main__ = Object.assign({
         style: {
             type: Object,
             default: undefined
-        }
+        },
     },
     setup(__props) {
         const props = __props;
@@ -232,8 +232,9 @@ const __sfc_main__ = Object.assign({
                         key: 0,
                         searchKey: searchData.key,
                         rowKey: _ctx.rowKey,
+                        columns: _ctx.searchColumns,
                         onClose: _cache[0] || (_cache[0] = $event => (searchData.visible = false))
-                    }, null, 8 /* PROPS */, ["searchKey", "rowKey"]))
+                    }, null, 8 /* PROPS */, ["searchKey", "rowKey", "columns"]))
                     : _createCommentVNode("v-if", true)
             ], 64 /* STABLE_FRAGMENT */));
         };

package/es/EditTable/components/Search/Search.js

@@ -17,6 +17,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
 /* Analyzed bindings: {
   "searchKey": "props",
   "rowKey": "props",
+  "columns": "props",
   "Table": "setup-const",
   "useTableDataSource": "setup-maybe-ref",
   "useTableTool": "setup-maybe-ref",
@@ -39,7 +40,6 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "tableHeight": "setup-ref",
   "selectedRowKeys": "setup-ref",
   "tableRef": "setup-ref",
-  "columns": "setup-const",
   "selectedTableRow": "setup-const",
   "handleFilterArray": "setup-const",
   "search": "setup-const",
@@ -73,6 +73,10 @@ const __sfc_main__ = Object.assign({
         rowKey: {
             type: String,
             default: 'id'
+        },
+        columns: {
+            type: Array,
+            default: () => []
         }
     },
     emits: ['close'],
@@ -89,16 +93,6 @@ const __sfc_main__ = Object.assign({
         const tableHeight = ref(230);
         const selectedRowKeys = ref([]);
         const tableRef = ref();
-        const columns = [
-            {
-                title: '标识',
-                dataIndex: 'id',
-            },
-            {
-                title: '名称',
-                dataIndex: 'name',
-            }
-        ];
         const selectedTableRow = (record) => {
             tableTool.scrollTo({
                 ...record,
@@ -238,7 +232,7 @@ const __sfc_main__ = Object.assign({
                                     ref_key: "tableRef",
                                     ref: tableRef,
                                     "data-source": filterArray.value,
-                                    columns: columns,
+                                    columns: __props.columns,
                                     height: tableHeight.value,
                                     disableMenu: false,
                                     cellHeight: 36,
@@ -270,7 +264,7 @@ const __sfc_main__ = Object.assign({
                                         }, 1024 /* DYNAMIC_SLOTS */)
                                     ]),
                                     _: 1 /* STABLE */
-                                }, 8 /* PROPS */, ["data-source", "height", "rowSelection"])
+                                }, 8 /* PROPS */, ["data-source", "columns", "height", "rowSelection"])
                             ]))
                             : _createCommentVNode("v-if", true),
                         (visible.value)

package/es/EditTable/index.js

@@ -1,9 +1,11 @@
 import EditTable from './EditTable.js';
 import EditTableBody from './Body.js';
 import EditTableHeader from './Header.js';
+import FormItem from './FormItem.js';
 EditTable.install = function (app) {
   app.component(EditTable.name, EditTable);
   app.component(EditTableBody.name, EditTableBody);
   app.component(EditTableHeader.name, EditTableHeader);
+  app.component(FormItem.name, FormItem);
 };
 export default EditTable;

package/es/EditTable/props.js

@@ -9,6 +9,18 @@ export var defaultProps = function defaultProps() {
       default: function _default() {
         return [];
       }
+    },
+    searchColumns: {
+      type: Array,
+      default: function _default() {
+        return [{
+          title: '标识',
+          dataIndex: 'id'
+        }, {
+          title: '名称',
+          dataIndex: 'name'
+        }];
+      }
     }
   };
 };

package/es/EditTable/style/body.less

@@ -1,76 +1,76 @@
-.jetlinks-edit-table-body-viewport {
-  max-height: 100%;
-  width: 100%;
-  overflow: hidden auto;
-  position: relative;
-
-  .jetlinks-edit-scrollbar {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    z-index: -1;
-  }
-
-  .jetlinks-edit-table-body-container {
-    display: flex;
-  }
-
-  .jetlinks-edit-table-center, & .jetlinks-edit-table-left,& .jetlinks-edit-table-right {
-    position: relative;
-    min-width: 0;
-    height: 100%;
-    z-index: 5;
-    flex-shrink: 0;
-    flex-grow: 0;
-
-    .jetlinks-edit-table-row {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      transition: top .2s, height .2s, background-color .1s;
-      border-bottom: 1px solid #ebebeb;
-      background-color: #fff;
-
-      &.jetlinks-edit-table-row-hover {
-        background-color: rgb(248, 248, 248);
-      }
-
-      &.jetlinks-edit-table-row-selected {
-        background-color: var(--ant-primary-1);
-      }
-
-      .jetlinks-edit-table-cell {
-        min-width: 0;
-      }
-
-      .body-cell-box {
-        padding: 0 12px;
-        position: relative;
-      }
-    }
-  }
-
-  .jetlinks-edit-table-left {
-    position: sticky;
-    left: 0;
-  }
-
-  .jetlinks-edit-table-right {
-    position: sticky;
-    right: 0;
-  }
-
-  .jetlinks-edit-table-center {
-    z-index: 1;
-    > div {
-      position: relative;
-    }
-  }
-}
-.jetlinks-edit-table-body-empty {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  padding-top: 24px;
-}
+.jetlinks-edit-table-body-viewport {
+  max-height: 100%;
+  width: 100%;
+  overflow: hidden auto;
+  position: relative;
+
+  .jetlinks-edit-scrollbar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    z-index: -1;
+  }
+
+  .jetlinks-edit-table-body-container {
+    display: flex;
+  }
+
+  .jetlinks-edit-table-center, & .jetlinks-edit-table-left,& .jetlinks-edit-table-right {
+    position: relative;
+    min-width: 0;
+    height: 100%;
+    z-index: 5;
+    flex-shrink: 0;
+    flex-grow: 0;
+
+    .jetlinks-edit-table-row {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      transition: top .2s, height .2s, background-color .1s;
+      border-bottom: 1px solid #ebebeb;
+      background-color: #fff;
+
+      &.jetlinks-edit-table-row-hover {
+        background-color: rgb(248, 248, 248);
+      }
+
+      &.jetlinks-edit-table-row-selected {
+        background-color: var(--ant-primary-1);
+      }
+
+      .jetlinks-edit-table-cell {
+        min-width: 0;
+      }
+
+      .body-cell-box {
+        padding: 0 12px;
+        position: relative;
+      }
+    }
+  }
+
+  .jetlinks-edit-table-left {
+    position: sticky;
+    left: 0;
+  }
+
+  .jetlinks-edit-table-right {
+    position: sticky;
+    right: 0;
+  }
+
+  .jetlinks-edit-table-center {
+    z-index: 1;
+    > div {
+      position: relative;
+    }
+  }
+}
+.jetlinks-edit-table-body-empty {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  padding-top: 24px;
+}

package/es/EditTable/style/index.css

@@ -192,8 +192,6 @@
 }
 .jetlinks-edit-table-horizontal-scroll {
   height: 17px;
-  min-height: 17px;
-  max-height: 17px;
   width: 100%;
   display: flex;
   position: relative;
@@ -205,15 +203,12 @@
   position: relative;
   flex: 1 1 0;
   height: 17px;
-  min-height: 17px;
-  max-height: 17px;
   width: 100%;
 }
 .jetlinks-edit-table-horizontal-scroll .jetlinks-edit-table-horizontal-scroll-viewport > div {
   height: 17px;
 }
 .jetlinks-edit-table-horizontal-scroll .jetlinks-edit-table-horizontal-scroll-hidden {
-  width: 17px;
   height: 100%;
   overflow-x: hidden;
 }

package/es/EditTable/style/index.less

@@ -14,8 +14,6 @@
 
 .jetlinks-edit-table-horizontal-scroll {
   height: 17px;
-  min-height: 17px;
-  max-height: 17px;
   width: 100%;
   display: flex;
   position: relative;
@@ -27,8 +25,6 @@
     position: relative;
     flex: 1 1 0;
     height: 17px;
-    min-height: 17px;
-    max-height: 17px;
     width: 100%;
 
     > div {
@@ -37,6 +33,6 @@
   }
 
   .jetlinks-edit-table-horizontal-scroll-hidden {
-    width: 17px; height: 100%; overflow-x: hidden;
+    height: 100%; overflow-x: hidden;
   }
 }