@jetlinks-web/components 2.4.25 → 2.5.0

package/lib/EditTable/group.js

@@ -0,0 +1,355 @@
+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: {
+  "options": "props",
+  "activeKey": "props",
+  "readonly": "props",
+  "Modal": "setup-maybe-ref",
+  "randomNumber": "setup-maybe-ref",
+  "isFullScreen": "setup-maybe-ref",
+  "useTableGroupError": "setup-maybe-ref",
+  "useTableWrapper": "setup-maybe-ref",
+  "ref": "setup-const",
+  "defineOptions": "setup-const",
+  "useLocaleReceiver": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "emit": "setup-const",
+  "contextLocale": "setup-maybe-ref",
+  "myActiveKey": "setup-ref",
+  "visible": "setup-ref",
+  "type": "setup-ref",
+  "errorMap": "setup-maybe-ref",
+  "tableWrapperRef": "setup-maybe-ref",
+  "addIndex": "setup-ref",
+  "formRef": "setup-ref",
+  "formData": "setup-maybe-ref",
+  "onAdd": "setup-const",
+  "onEdit": "setup-const",
+  "onCancel": "setup-const",
+  "onOk": "setup-const",
+  "change": "setup-const",
+  "menuClick": "setup-const",
+  "popContainer": "setup-const",
+  "modalContainer": "setup-const"
+} */
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, createBlock as _createBlock, createCommentVNode as _createCommentVNode, vShow as _vShow, withDirectives as _withDirectives } from "vue";
+const _hoisted_1 = { class: "jetlinks-table-group-warp" };
+const _hoisted_2 = { class: "jetlinks-table-group-error-warp" };
+const _hoisted_3 = { style: { "color": "#1d2129" } };
+const _hoisted_4 = /*#__PURE__*/ _createElementVNode("div", { class: "jetlinks-table-group-error-target" }, null, -1 /* HOISTED */);
+const _hoisted_5 = {
+    key: 1,
+    class: "jetlinks-table-group-error-warp"
+};
+const _hoisted_6 = { style: { "color": "#1d2129" } };
+const _hoisted_7 = /*#__PURE__*/ _createElementVNode("div", { class: "jetlinks-table-group-error-target" }, null, -1 /* HOISTED */);
+import { Modal } from "ant-design-vue";
+import { randomNumber } from "@jetlinks-web/utils";
+import { isFullScreen } from "./utils";
+import { useTableGroupError, useTableWrapper } from './context';
+import { ref, } from 'vue';
+import { useLocaleReceiver } from "../LocaleReciver";
+const __sfc_main__ = Object.assign({
+    name: 'JEditTableGroup'
+}, {
+    props: {
+        options: {
+            type: Array,
+            default: () => []
+        },
+        activeKey: {
+            type: String,
+            default: undefined
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['delete', 'edit', 'add', 'change', 'update:activeKey'],
+    setup(__props, { emit: __emit }) {
+        const props = __props;
+        const emit = __emit;
+        const [contextLocale] = useLocaleReceiver('EditTable');
+        const myActiveKey = ref(props.activeKey);
+        const visible = ref(false);
+        const type = ref(contextLocale.value.Group.addGroup);
+        const errorMap = useTableGroupError();
+        const tableWrapperRef = useTableWrapper();
+        const addIndex = ref(0);
+        const formRef = ref();
+        const formData = reactive({
+            label: undefined
+        });
+        const onAdd = (targetKey, action) => {
+            // if(props.readonly) return
+            if (action === 'add') {
+                type.value = 'add';
+                // 获取上一个包含 “分组_” 的信息
+                const groupName = props.options.filter(item => item.label.includes(contextLocale.value.Group.one));
+                let index = addIndex.value + 1;
+                let findStatus = false;
+                while (!findStatus) {
+                    const status = groupName.some(item => {
+                        const [_, _index] = item.label.split('_');
+                        if (index === Number(_index)) {
+                            index = Number(_index) + 1;
+                            return true;
+                        }
+                        return false;
+                    });
+                    findStatus = !status;
+                }
+                addIndex.value = index;
+                formData.label = contextLocale.value.Group.one + index;
+                onOk();
+            }
+        };
+        const onEdit = (record) => {
+            visible.value = true;
+            type.value = 'edit';
+            formData.label = record.label;
+        };
+        const onCancel = () => {
+            formRef.value.resetFields();
+            visible.value = false;
+        };
+        const onOk = () => {
+            const data = { ...formData };
+            if (type.value === 'add') {
+                data.value = 'group_' + randomNumber();
+                myActiveKey.value = data.value;
+                emit(type.value, data);
+                emit('change', data.value, data.label);
+                emit('update:activeKey', data.value);
+                visible.value = false;
+            }
+            else {
+                formRef.value.validate().then(() => {
+                    data.value = myActiveKey.value;
+                    emit(type.value, data);
+                    emit('change', data.value, data.label);
+                    visible.value = false;
+                });
+            }
+        };
+        const change = () => {
+            const item = props.options.find(item => item.value === myActiveKey.value);
+            emit('change', myActiveKey.value, item.label);
+            emit('update:activeKey', myActiveKey.value);
+        };
+        const menuClick = (e, record) => {
+            if (props.readonly)
+                return;
+            if (e.key === 'edit') {
+                onEdit(record);
+            }
+            else {
+                Modal.confirm({
+                    title: contextLocale.value.Group.deleteMessage,
+                    onOk: () => {
+                        // activeKey 根据数据长度进行左右移动
+                        const index = props.options.findIndex(item => item.value === record.value);
+                        let label = '';
+                        if (index !== 0 && index === props.options.length - 1) {
+                            myActiveKey.value = props.options[index - 1].value;
+                            label = props.options[index - 1].label;
+                        }
+                        else if (index === 0 && props.options.length === 1) {
+                            myActiveKey.value = props.options[0].value;
+                            label = props.options[0].label;
+                        }
+                        else {
+                            myActiveKey.value = props.options[index + 1].value;
+                            label = props.options[index + 1].label;
+                        }
+                        emit('delete', record.value, index);
+                        emit('change', myActiveKey.value, label);
+                    },
+                });
+            }
+        };
+        const popContainer = (e) => {
+            return tableWrapperRef.value || e;
+        };
+        const modalContainer = (e) => {
+            if (isFullScreen()) {
+                return tableWrapperRef.value || document.body;
+            }
+            return document.body;
+        };
+        onMounted(() => {
+            myActiveKey.value = _optionalChain([props, 'access', _2 => _2.options, 'access', _3 => _3[0], 'optionalAccess', _4 => _4.value]);
+            emit('change', myActiveKey.value, _optionalChain([props, 'access', _5 => _5.options, 'access', _6 => _6[0], 'optionalAccess', _7 => _7.label]));
+            emit('update:activeKey', myActiveKey.value);
+        });
+        watch(() => props.activeKey, (val) => {
+            myActiveKey.value = val;
+        });
+        return (_ctx, _cache) => {
+            const _component_a_menu_item = _resolveComponent("a-menu-item");
+            const _component_a_menu = _resolveComponent("a-menu");
+            const _component_a_tooltip = _resolveComponent("a-tooltip");
+            const _component_a_dropdown = _resolveComponent("a-dropdown");
+            const _component_a_tab_pane = _resolveComponent("a-tab-pane");
+            const _component_a_tabs = _resolveComponent("a-tabs");
+            const _component_a_input = _resolveComponent("a-input");
+            const _component_a_form_item = _resolveComponent("a-form-item");
+            const _component_a_button = _resolveComponent("a-button");
+            const _component_a_form = _resolveComponent("a-form");
+            const _component_a_modal = _resolveComponent("a-modal");
+            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+                _createVNode(_component_a_tabs, {
+                    type: "editable-card",
+                    activeKey: myActiveKey.value,
+                    "onUpdate:activeKey": _cache[0] || (_cache[0] = $event => ((myActiveKey).value = $event)),
+                    onEdit: onAdd,
+                    hideAdd: __props.readonly,
+                    onChange: change
+                }, {
+                    default: _withCtx(() => [
+                        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(__props.options, (item) => {
+                            return (_openBlock(), _createBlock(_component_a_tab_pane, {
+                                key: item.value,
+                                closable: false
+                            }, {
+                                tab: _withCtx(() => [
+                                    (myActiveKey.value === item.value)
+                                        ? (_openBlock(), _createBlock(_component_a_dropdown, {
+                                            key: 0,
+                                            trigger: ['click'],
+                                            getPopupContainer: (node) => _unref(tableWrapperRef) || node,
+                                            disabled: __props.readonly
+                                        }, {
+                                            overlay: _withCtx(() => [
+                                                _createVNode(_component_a_menu, {
+                                                    onClick: (e) => { menuClick(e, item); }
+                                                }, {
+                                                    default: _withCtx(() => [
+                                                        _createVNode(_component_a_menu_item, { key: "edit" }, {
+                                                            default: _withCtx(() => [
+                                                                _createTextVNode(_toDisplayString(_unref(contextLocale).Group.edit), 1 /* TEXT */)
+                                                            ]),
+                                                            _: 1 /* STABLE */
+                                                        }),
+                                                        _createVNode(_component_a_menu_item, { key: "delete" }, {
+                                                            default: _withCtx(() => [
+                                                                _createTextVNode(_toDisplayString(_unref(contextLocale).Group.delete), 1 /* TEXT */)
+                                                            ]),
+                                                            _: 1 /* STABLE */
+                                                        })
+                                                    ]),
+                                                    _: 2 /* DYNAMIC */
+                                                }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"])
+                                            ]),
+                                            default: _withCtx(() => [
+                                                _createElementVNode("div", _hoisted_2, [
+                                                    _createTextVNode(_toDisplayString(item.label) + " (" + _toDisplayString(item.effective) + ") ", 1 /* TEXT */),
+                                                    (_unref(errorMap)[item.value])
+                                                        ? (_openBlock(), _createBlock(_component_a_tooltip, {
+                                                            key: 0,
+                                                            color: "#ffffff",
+                                                            arrowPointAtCenter: true,
+                                                            "get-popup-container": popContainer
+                                                        }, {
+                                                            title: _withCtx(() => [
+                                                                _createElementVNode("span", _hoisted_3, _toDisplayString(_unref(contextLocale).Group.validate), 1 /* TEXT */)
+                                                            ]),
+                                                            default: _withCtx(() => [
+                                                                _hoisted_4
+                                                            ]),
+                                                            _: 1 /* STABLE */
+                                                        }))
+                                                        : _createCommentVNode("v-if", true)
+                                                ])
+                                            ]),
+                                            _: 2 /* DYNAMIC */
+                                        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["getPopupContainer", "disabled"]))
+                                        : (_openBlock(), _createElementBlock("div", _hoisted_5, [
+                                            _createTextVNode(_toDisplayString(item.label) + " (" + _toDisplayString(item.effective) + ") ", 1 /* TEXT */),
+                                            (_unref(errorMap)[item.value])
+                                                ? (_openBlock(), _createBlock(_component_a_tooltip, {
+                                                    key: 0,
+                                                    color: "#ffffff",
+                                                    arrowPointAtCenter: true,
+                                                    getContainer: popContainer
+                                                }, {
+                                                    title: _withCtx(() => [
+                                                        _createElementVNode("span", _hoisted_6, _toDisplayString(_unref(contextLocale).Group.validate), 1 /* TEXT */)
+                                                    ]),
+                                                    default: _withCtx(() => [
+                                                        _hoisted_7
+                                                    ]),
+                                                    _: 1 /* STABLE */
+                                                }))
+                                                : _createCommentVNode("v-if", true)
+                                        ]))
+                                ]),
+                                _: 2 /* DYNAMIC */
+                            }, 1024 /* DYNAMIC_SLOTS */));
+                        }), 128 /* KEYED_FRAGMENT */))
+                    ]),
+                    _: 1 /* STABLE */
+                }, 8 /* PROPS */, ["activeKey", "hideAdd"]),
+                _createVNode(_component_a_modal, {
+                    visible: visible.value,
+                    title: _unref(contextLocale).Group.editGroup,
+                    maskClosable: false,
+                    getContainer: modalContainer,
+                    onCancel: onCancel,
+                    onOk: onOk
+                }, {
+                    default: _withCtx(() => [
+                        _createVNode(_component_a_form, {
+                            ref_key: "formRef",
+                            ref: formRef,
+                            model: _unref(formData),
+                            onFinish: onOk
+                        }, {
+                            default: _withCtx(() => [
+                                _createVNode(_component_a_form_item, {
+                                    name: "label",
+                                    rules: [{ required: true, message: _unref(contextLocale).Group.placeholder }, { max: 16, message: _unref(contextLocale).Group.max }]
+                                }, {
+                                    default: _withCtx(() => [
+                                        _createVNode(_component_a_input, {
+                                            value: _unref(formData).label,
+                                            "onUpdate:value": _cache[1] || (_cache[1] = $event => ((_unref(formData).label) = $event)),
+                                            placeholder: _unref(contextLocale).Group.placeholder
+                                        }, null, 8 /* PROPS */, ["value", "placeholder"])
+                                    ]),
+                                    _: 1 /* STABLE */
+                                }, 8 /* PROPS */, ["rules"]),
+                                _withDirectives(_createVNode(_component_a_form_item, null, {
+                                    default: _withCtx(() => [
+                                        _createVNode(_component_a_button, { "html-type": "submit" })
+                                    ]),
+                                    _: 1 /* STABLE */
+                                }, 512 /* NEED_PATCH */), [
+                                    [_vShow, false]
+                                ])
+                            ]),
+                            _: 1 /* STABLE */
+                        }, 8 /* PROPS */, ["model"])
+                    ]),
+                    _: 1 /* STABLE */
+                }, 8 /* PROPS */, ["visible", "title"])
+            ]));
+        };
+    }
+});
+export default __sfc_main__;

package/lib/EditTable/hooks/index.js

@@ -41,6 +41,18 @@ Object.keys(_useValidate).forEach(function (key) {
     }
   });
 });
+var _useGroup = require("./useGroup");
+Object.keys(_useGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useGroup[key];
+    }
+  });
+});
 var FormContextKey = 'form-context';
 var useFormContext = exports.useFormContext = function useFormContext(options) {
   (0, _vue.provide)(FormContextKey, options);

package/lib/EditTable/hooks/useGroup.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGroup = void 0;
+var _vue = require("vue");
+var useGroup = exports.useGroup = function useGroup() {
+  var openGroup = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var groupOptions = (0, _vue.ref)([]);
+  var groupActive = (0, _vue.reactive)({
+    value: undefined,
+    label: undefined
+  });
+  /**
+   * 更新当前选择的分组id
+   * @param key
+   * @param name
+   */
+  var updateGroupActive = function updateGroupActive(key, name) {
+    if (openGroup) {
+      groupActive.value = key;
+      groupActive.label = name;
+    }
+  };
+  var addGroup = function addGroup(val) {
+    if (openGroup) {
+      groupOptions.value.push(val);
+    }
+  };
+  var removeGroup = function removeGroup(index) {
+    if (openGroup) {
+      groupOptions.value.splice(index, 1);
+    }
+  };
+  var updateGroupOptions = function updateGroupOptions() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    if (openGroup) {
+      groupOptions.value = options;
+    }
+  };
+  return {
+    groupOptions: groupOptions,
+    groupActive: groupActive,
+    updateGroupActive: updateGroupActive,
+    addGroup: addGroup,
+    removeGroup: removeGroup,
+    updateGroupOptions: updateGroupOptions
+  };
+};

package/lib/EditTable/props.js

@@ -38,6 +38,12 @@ var bodyProps = exports.bodyProps = function bodyProps() {
         return [];
       }
     },
+    columns: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
     cellHeight: {
       type: Number,
       default: 50
@@ -56,11 +62,15 @@ var bodyProps = exports.bodyProps = function bodyProps() {
       type: Boolean,
       default: true
     },
-    rowSelection: {
-      type: Object,
-      default: undefined
+    rowKey: {
+      type: String,
+      default: 'id'
     },
-    scroll: {
+    openGroup: {
+      type: Boolean,
+      default: false
+    },
+    rowSelection: {
       type: Object,
       default: undefined
     }

package/lib/EditTable/style/body.less

@@ -13,16 +13,15 @@
   }
 
   .jetlinks-edit-table-body-container {
-    display: flex;
+    overflow: hidden;
+    height: 100%;
   }
 
-  .jetlinks-edit-table-center, & .jetlinks-edit-table-left,& .jetlinks-edit-table-right {
+  .jetlinks-edit-table-center {
     position: relative;
+    flex: 1 1 auto;
     min-width: 0;
     height: 100%;
-    z-index: 5;
-    flex-shrink: 0;
-    flex-grow: 0;
 
     .jetlinks-edit-table-row {
       width: 100%;
@@ -30,9 +29,12 @@
       align-items: center;
       transition: top .2s, height .2s, background-color .1s;
       border-bottom: 1px solid #ebebeb;
-      background-color: #fff;
+      .jetlinks-edit-table-cell{
+        position:absolute;
+        min-width: 0;;
+      }
 
-      &.jetlinks-edit-table-row-hover {
+      &:hover {
         background-color: rgb(248, 248, 248);
       }
 
@@ -40,31 +42,19 @@
         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;
+      .readonly-mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 4;
+      }
     }
   }
 }

package/lib/EditTable/style/form.less

@@ -0,0 +1,33 @@
+.jetlinks-table-form-error-target {
+  position: absolute;
+  right: 2px;
+  top: -9px;
+  border: 16px solid transparent;
+  border-top-color: @error-color;
+  border-right-width: 0;
+  border-bottom-width: 0;
+}
+
+.jetlinks-edit-table-form-has-error {
+
+  .select-no-value {
+    .ant-select-selector {
+      border-color: @error-color !important;
+      &:focus {
+        box-shadow: 0 0 0 2px var(--ant-error-color-outline) !important;
+      }
+    }
+  }
+
+  > input {
+    border-color: @error-color !important;
+
+    &:focus {
+      box-shadow: 0 0 0 2px var(--ant-error-color-outline) !important;
+    }
+  }
+
+  .jetlinks-table-form-required-aicon {
+    color: @error-color;
+  }
+}

package/lib/EditTable/style/group.less

@@ -0,0 +1,32 @@
+.jetlinks-table-group-warp {
+  .ant-tabs-nav {
+    margin-bottom: 0;
+    .ant-tabs-tab {
+      overflow: hidden;
+      position: relative;
+    }
+    .ant-tabs-tab-active {
+      background-color: #BAE0FF !important;
+      border-color: #91CAFF !important;
+
+    }
+
+    .ant-tabs-nav-add {
+      border: none;
+    }
+  }
+}
+
+.jetlinks-table-group-error-warp {
+  color: #1a1a1a !important;
+
+  .table-group-error-target {
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: 16px solid transparent;
+    border-top-color: @error-color;
+    border-right-width: 0;
+    border-bottom-width: 0;
+  }
+}

package/lib/EditTable/style/header.less

@@ -1,25 +1,6 @@
 .jetlinks-edit-table-header-container {
   height: 100%;
   position: relative;
-  display: flex;
-  width: 100%;
-
-  .jetlinks-header-left,& .jetlinks-header-center,& .jetlinks-header-right {
-    position: relative;
-    z-index: 5;
-    min-width: 0;
-    height: 100%;
-    width: 100%;
-    background: #fafafa;
-  }
-
-  .jetlinks-header-center {
-    z-index: 2;
-    > div {
-      position: relative;
-      height: 100%;
-    }
-  }
 
   .jetlinks-edit-table-header-cell {
     height: 100%;
@@ -27,12 +8,12 @@
     align-items: center;
     float: left;
     overflow: visible;
-    background: #fafafa;
+    position: absolute;
+    top: 0;
 
     .jetlinks-edit-table-header-cell-box {
       padding: 0 12px;
       width: 100%;
-      position: relative;
 
       &.header-cell-box-tool {
         display: flex;
@@ -75,3 +56,17 @@
     }
   }
 }
+
+.jetlinks-table-search {
+  .jetlinks-table-search-header {
+    display: flex;
+    justify-content: space-between;
+    .jetlinks-drag-modal-footer {
+      display: none;
+    }
+
+    .jetlinks-table-search-result-total {
+      color: @primary-color;
+    }
+  }
+}