@jetlinks-web/components 2.0.36 → 2.0.38

package/es/EditTable/components/ContextMenu/Menu.js

@@ -0,0 +1,154 @@
+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: {
+  "data": "props",
+  "onClose": "props",
+  "onClick": "props",
+  "onCopy": "props",
+  "paste": "props",
+  "onMounted": "setup-const",
+  "ref": "setup-const",
+  "nextTick": "setup-const",
+  "defineOptions": "setup-const",
+  "AIcon": "setup-maybe-ref",
+  "Menu": "setup-maybe-ref",
+  "MenuItem": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "contextMenu": "setup-ref",
+  "showDetail": "setup-maybe-ref",
+  "showPaste": "setup-maybe-ref",
+  "showDelete": "setup-maybe-ref",
+  "clickFunc": "setup-const",
+  "close": "setup-const"
+} */
+import { unref as _unref, createVNode as _createVNode, createTextVNode as _createTextVNode, withCtx as _withCtx, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { onMounted, ref, nextTick, } from "vue";
+import { AIcon } from '../../../components';
+import { Menu } from 'ant-design-vue';
+const __sfc_main__ = Object.assign({
+    name: 'JEditTableContextMenu'
+}, {
+    props: {
+        data: { type: Object, default: () => ({}) },
+        onClose: { type: Function, default: () => { } },
+        onClick: { type: Function, default: () => { } },
+        onCopy: { type: Function, default: () => { } },
+        paste: { type: Object, default: () => ({}) }
+    },
+    setup(__props) {
+        const MenuItem = Menu.Item;
+        const props = __props;
+        const contextMenu = ref(null);
+        const showDetail = computed(() => {
+            return !props.data.id;
+        });
+        const showPaste = computed(() => {
+            return !props.paste;
+        });
+        const showDelete = computed(() => {
+            return _optionalChain([props, 'access', _2 => _2.data, 'access', _3 => _3.expands, 'optionalAccess', _4 => _4.isProduct]);
+        });
+        const clickFunc = ({ key }) => {
+            if (key === 'copy') {
+                props.onCopy(props.data);
+            }
+            props.onClick(key);
+        };
+        const close = (e) => {
+            setTimeout(() => {
+                props.onClose();
+            }, 300);
+        };
+        onMounted(async () => {
+            // 确保组件已经渲染
+            await nextTick();
+            // 触发组件focus
+            contextMenu.value.focus();
+        });
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createElementBlock("div", {
+                class: "metadata-context-menu",
+                ref_key: "contextMenu",
+                ref: contextMenu,
+                tabindex: "-1",
+                onBlur: close
+            }, [
+                _createVNode(_unref(Menu), { onClick: clickFunc }, {
+                    default: _withCtx(() => [
+                        _createVNode(_unref(MenuItem), { key: "add" }, {
+                            icon: _withCtx(() => [
+                                _createVNode(_unref(AIcon), { type: "PlusSquareOutlined" })
+                            ]),
+                            default: _withCtx(() => [
+                                _createTextVNode(" 新增行 ")
+                            ]),
+                            _: 1 /* STABLE */
+                        }),
+                        _createVNode(_unref(MenuItem), { key: "copy" }, {
+                            icon: _withCtx(() => [
+                                _createVNode(_unref(AIcon), { type: "icon-copy" })
+                            ]),
+                            default: _withCtx(() => [
+                                _createTextVNode(" 复制行 ")
+                            ]),
+                            _: 1 /* STABLE */
+                        }),
+                        _createVNode(_unref(MenuItem), {
+                            key: "paste",
+                            disabled: _unref(showPaste)
+                        }, {
+                            icon: _withCtx(() => [
+                                _createVNode(_unref(AIcon), { type: "icon-paste" })
+                            ]),
+                            default: _withCtx(() => [
+                                _createTextVNode(" 粘贴行 ")
+                            ]),
+                            _: 1 /* STABLE */
+                        }, 8 /* PROPS */, ["disabled"]),
+                        _createVNode(_unref(MenuItem), {
+                            key: "detail",
+                            disabled: _unref(showDetail)
+                        }, {
+                            icon: _withCtx(() => [
+                                _createVNode(_unref(AIcon), { type: "icon-chakan" })
+                            ]),
+                            default: _withCtx(() => [
+                                _createTextVNode(" 查看详情 ")
+                            ]),
+                            _: 1 /* STABLE */
+                        }, 8 /* PROPS */, ["disabled"]),
+                        _createVNode(_unref(MenuItem), {
+                            key: "delete",
+                            class: "danger",
+                            disabled: _unref(showDelete)
+                        }, {
+                            icon: _withCtx(() => [
+                                _createVNode(_unref(AIcon), { type: "DeleteOutlined" })
+                            ]),
+                            default: _withCtx(() => [
+                                _createTextVNode(" 删除 ")
+                            ]),
+                            _: 1 /* STABLE */
+                        }, 8 /* PROPS */, ["disabled"])
+                    ]),
+                    _: 1 /* STABLE */
+                })
+            ], 544 /* NEED_HYDRATION, NEED_PATCH */));
+        };
+    }
+});
+export default __sfc_main__;

package/es/EditTable/components/ContextMenu/index.js

@@ -0,0 +1,81 @@
+import MenuContext from './Menu.js';
+import { h, render } from 'vue';
+import { handlePureRecord } from "../../utils";
+import { omit } from "lodash-es";
+var curInstance = null;
+var seed = 1;
+var copyValue;
+var contextMenu = function contextMenu(e, data, context) {
+  if (curInstance) {
+    curInstance.destroy();
+  }
+  curInstance = null;
+  var id = seed++;
+  // 创建一个临时的div，用于挂载我们的菜单
+  var container = document.createElement('div');
+  // 获取body标签，用于挂载整个菜单
+  var appendTo = context.getPopupContainer() || document.body;
+  // 传给menu组件的props
+  var props = {
+    data: data,
+    onClose: function onClose() {
+      if (curInstance) {
+        curInstance.destroy();
+      }
+    },
+    onClick: function onClick(type) {
+      var copyRecord = handlePureRecord(copyValue);
+      if (copyRecord.expands) {
+        copyRecord.expands = omit(copyRecord.expands, ['isProduct']);
+      }
+      context.click(type, data, handlePureRecord(copyRecord));
+    },
+    onCopy: function onCopy(data) {
+      copyValue = data;
+      context.click('copy', data);
+    },
+    paste: !!copyValue
+  };
+  // 渲染虚拟节点
+  var vnode = h(MenuContext, props);
+  // vnode为需要渲染的虚拟节点，container为渲染的容器
+  render(vnode, container);
+  // 首先需要先把菜单真正渲染到页面，才能拿到它的宽度和高度
+  appendTo.appendChild(container.firstElementChild);
+  // 当前真正的菜单节点，上面输出的vnode中可以看到，el就是我们的菜单节点
+  var curMenu = vnode.el;
+  // 获取curMenu的高度和宽度，用于临界的计算
+  var offsetWidth = curMenu.offsetWidth,
+    offsetHeight = curMenu.offsetHeight;
+  // 获取body的可视区域的宽度
+  var clientWidth = appendTo.clientWidth;
+  // 取出右键点击时的坐标，clientX是距离左侧的位置，clientY是距离顶部的位置
+  var clientX = e.clientX,
+    clientY = e.clientY;
+  // 当前可视区域的宽度 - 当前鼠标距离浏览器左边的距离
+  // 如果 大于菜单的宽度，说明正常设置菜单距离左边界的距离,即设置style.left
+  // 否则菜单需要在鼠标左侧展示，即需要设置style.right组件距离可视区域右侧的距离
+  var leftOrRight = clientWidth - clientX > offsetWidth ? "left" : "right";
+  // 当前浏览器的高度(不包含滚动条) - 当前鼠标距离浏览器上边的距离
+  // 如果 大于菜单的高度，说明可以正常设置菜单距离上边界的距离,即设置style.top
+  // 否则需要设置菜单距离底部边界的位置，即style.bottom
+  var topOrBottom = window.innerHeight - clientY > offsetHeight ? "top" : "bottom";
+  var offsetLeft = Math.abs(clientWidth - clientX);
+  // 设置left或者right的style
+  curMenu.style[leftOrRight] = leftOrRight === "left" ? "".concat(clientX + 20, "px") : "".concat(offsetLeft, "px");
+  // 设置top或者bottom的style
+  curMenu.style[topOrBottom] = topOrBottom === 'bottom' ? '2px' : "".concat(clientY, "px");
+  var instance = {
+    id: id,
+    destroy: function destroy() {
+      curInstance = null;
+      render(null, container);
+    },
+    cleanCopy: function cleanCopy() {
+      copyValue = null;
+    }
+  };
+  curInstance = instance;
+  return instance;
+};
+export default contextMenu;

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

@@ -0,0 +1,290 @@
+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: {
+  "searchKey": "props",
+  "rowKey": "props",
+  "Table": "setup-const",
+  "useTableDataSource": "setup-maybe-ref",
+  "useTableTool": "setup-maybe-ref",
+  "Ellipsis": "setup-maybe-ref",
+  "DragModal": "setup-maybe-ref",
+  "Button": "setup-maybe-ref",
+  "Input": "setup-maybe-ref",
+  "Space": "setup-maybe-ref",
+  "ref": "setup-const",
+  "defineOptions": "setup-const",
+  "props": "setup-reactive-const",
+  "emit": "setup-const",
+  "dataSource": "setup-maybe-ref",
+  "tableTool": "setup-maybe-ref",
+  "searchValue": "setup-ref",
+  "filterArray": "setup-ref",
+  "visible": "setup-ref",
+  "searchIndex": "setup-ref",
+  "modalHeight": "setup-ref",
+  "tableHeight": "setup-ref",
+  "selectedRowKeys": "setup-ref",
+  "tableRef": "setup-ref",
+  "columns": "setup-const",
+  "selectedTableRow": "setup-const",
+  "handleFilterArray": "setup-const",
+  "search": "setup-const",
+  "heightChange": "setup-const",
+  "onClose": "setup-const",
+  "onSelect": "setup-const"
+} */
+import { createElementVNode as _createElementVNode, unref as _unref, createVNode as _createVNode, createTextVNode as _createTextVNode, withCtx as _withCtx, withModifiers as _withModifiers, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createBlock as _createBlock } from "vue";
+const _hoisted_1 = { class: "edit-table-search" };
+const _hoisted_2 = { class: "edit-table-search-header" };
+const _hoisted_3 = /*#__PURE__*/ _createElementVNode("span", null, "查找", -1 /* HOISTED */);
+const _hoisted_4 = {
+    key: 0,
+    style: { "margin": "12px 0" }
+};
+const _hoisted_5 = { key: 1 };
+const _hoisted_6 = { class: "edit-table-search-result-total" };
+import Table from '../../EditTable.js';
+import { useTableDataSource, useTableTool } from "../../hooks";
+import { Ellipsis, DragModal } from '../../../components';
+import { Button, Input, Space } from 'ant-design-vue';
+import { ref, } from 'vue';
+const __sfc_main__ = Object.assign({
+    name: 'JEditTableSearch'
+}, {
+    props: {
+        searchKey: {
+            type: String,
+            default: 'id'
+        },
+        rowKey: {
+            type: String,
+            default: 'id'
+        }
+    },
+    emits: ['close'],
+    setup(__props, { emit: __emit }) {
+        const props = __props;
+        const emit = __emit;
+        const dataSource = useTableDataSource();
+        const tableTool = useTableTool();
+        const searchValue = ref();
+        const filterArray = ref([]);
+        const visible = ref(false);
+        const searchIndex = ref(-1);
+        const modalHeight = ref(100);
+        const tableHeight = ref(230);
+        const selectedRowKeys = ref([]);
+        const tableRef = ref();
+        const columns = [
+            {
+                title: '标识',
+                dataIndex: 'id',
+            },
+            {
+                title: '名称',
+                dataIndex: 'name',
+            }
+        ];
+        const selectedTableRow = (record) => {
+            tableTool.scrollTo({
+                ...record,
+                __serial: record.__oldSerial - 1
+            });
+            tableTool.selected([record[props.rowKey]]);
+        };
+        const handleFilterArray = () => {
+            const cloneDataSource = JSON.parse(JSON.stringify(dataSource.value || '[]')).map(item => Object.assign(item, { __oldSerial: item.__serial }));
+            return cloneDataSource.filter(item => {
+                if (item[props.searchKey]) {
+                    return item[props.searchKey].includes(searchValue.value);
+                }
+                return false;
+            });
+        };
+        const search = (key) => {
+            filterArray.value = handleFilterArray();
+            if (key === 'all') { // 查找全部
+                visible.value = true;
+                modalHeight.value = 400;
+                searchIndex.value = 0;
+            }
+            else if (key === 'next') { // 下一个
+                searchIndex.value += 1;
+            }
+            else { // 上一个
+                searchIndex.value -= 1;
+            }
+            if (searchIndex.value < 0) { // 小于0时，跳转到最后一个
+                searchIndex.value = filterArray.value.length - 1;
+            }
+            else if (searchIndex.value > filterArray.value.length - 1) { // 大于整体搜索结果时，跳转到第一个
+                searchIndex.value = 0;
+            }
+            const searchItem = filterArray.value[searchIndex.value];
+            if (key !== 'all' && visible.value) {
+                _optionalChain([tableRef, 'access', _2 => _2.value, 'optionalAccess', _3 => _3.scrollToByIndex, 'call', _4 => _4(searchIndex.value - 1)]); // 控制EditTable滚动到指定为止
+            }
+            if (filterArray.value.length > 1) {
+                selectedRowKeys.value = [searchItem[props.rowKey]];
+                selectedTableRow(searchItem);
+            }
+            else {
+                selectedRowKeys.value = [];
+                tableTool.selected([]);
+            }
+        };
+        const heightChange = (h) => {
+            if (h > 340) {
+                tableHeight.value = h - 160;
+            }
+        };
+        const onClose = () => {
+            emit('close');
+            tableTool.searchVisible(false);
+        };
+        const onSelect = (record) => {
+            searchIndex.value = filterArray.value.findIndex(item => item[props.rowKey] === record[props.rowKey]);
+            selectedRowKeys.value = [record[props.rowKey]];
+            selectedTableRow(record);
+        };
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createBlock(_unref(DragModal), {
+                width: 800,
+                height: modalHeight.value,
+                title: false,
+                dragRang: [600, 200],
+                bodyStyle: {
+                    overflow: 'hidden',
+                },
+                footer: false,
+                onHeightChange: heightChange
+            }, {
+                default: _withCtx(() => [
+                    _createElementVNode("div", _hoisted_1, [
+                        _createElementVNode("div", _hoisted_2, [
+                            _createElementVNode("div", null, [
+                                _createVNode(_unref(Space), null, {
+                                    default: _withCtx(() => [
+                                        _hoisted_3,
+                                        _createVNode(_unref(Input), {
+                                            value: searchValue.value,
+                                            "onUpdate:value": _cache[0] || (_cache[0] = $event => ((searchValue).value = $event)),
+                                            maxlength: 64,
+                                            placeholder: "请输入查找内容"
+                                        }, null, 8 /* PROPS */, ["value"]),
+                                        _createVNode(_unref(Button), {
+                                            type: "primary",
+                                            ghost: "",
+                                            onClick: _cache[1] || (_cache[1] = () => search('all'))
+                                        }, {
+                                            default: _withCtx(() => [
+                                                _createTextVNode("查找全部")
+                                            ]),
+                                            _: 1 /* STABLE */
+                                        }),
+                                        _createVNode(_unref(Button), {
+                                            type: "primary",
+                                            ghost: "",
+                                            onClick: _cache[2] || (_cache[2] = () => search('prev'))
+                                        }, {
+                                            default: _withCtx(() => [
+                                                _createTextVNode("上一个")
+                                            ]),
+                                            _: 1 /* STABLE */
+                                        }),
+                                        _createVNode(_unref(Button), {
+                                            type: "primary",
+                                            ghost: "",
+                                            onClick: _cache[3] || (_cache[3] = () => search('next'))
+                                        }, {
+                                            default: _withCtx(() => [
+                                                _createTextVNode("下一个")
+                                            ]),
+                                            _: 1 /* STABLE */
+                                        })
+                                    ]),
+                                    _: 1 /* STABLE */
+                                })
+                            ]),
+                            _createElementVNode("div", null, [
+                                _createVNode(_unref(Button), {
+                                    type: "primary",
+                                    onClick: _withModifiers(onClose, ["stop"])
+                                }, {
+                                    default: _withCtx(() => [
+                                        _createTextVNode("关闭")
+                                    ]),
+                                    _: 1 /* STABLE */
+                                })
+                            ])
+                        ]),
+                        (visible.value)
+                            ? (_openBlock(), _createElementBlock("div", _hoisted_4, [
+                                _createVNode(Table, {
+                                    ref_key: "tableRef",
+                                    ref: tableRef,
+                                    "data-source": filterArray.value,
+                                    columns: columns,
+                                    height: tableHeight.value,
+                                    disableMenu: false,
+                                    cellHeight: 36,
+                                    rowSelection: {
+                                        onSelect: onSelect,
+                                        selectedRowKeys: selectedRowKeys.value
+                                    },
+                                    serial: {
+                                        title: '行数'
+                                    }
+                                }, {
+                                    serial: _withCtx(({ record }) => [
+                                        _createElementVNode("span", null, _toDisplayString(record.__oldSerial), 1 /* TEXT */)
+                                    ]),
+                                    id: _withCtx(({ record }) => [
+                                        _createVNode(_unref(Ellipsis), null, {
+                                            default: _withCtx(() => [
+                                                _createTextVNode(_toDisplayString(record.id), 1 /* TEXT */)
+                                            ]),
+                                            _: 2 /* DYNAMIC */
+                                        }, 1024 /* DYNAMIC_SLOTS */)
+                                    ]),
+                                    name: _withCtx(({ record }) => [
+                                        _createVNode(_unref(Ellipsis), null, {
+                                            default: _withCtx(() => [
+                                                _createTextVNode(_toDisplayString(record.name), 1 /* TEXT */)
+                                            ]),
+                                            _: 2 /* DYNAMIC */
+                                        }, 1024 /* DYNAMIC_SLOTS */)
+                                    ]),
+                                    _: 1 /* STABLE */
+                                }, 8 /* PROPS */, ["data-source", "height", "rowSelection"])
+                            ]))
+                            : _createCommentVNode("v-if", true),
+                        (visible.value)
+                            ? (_openBlock(), _createElementBlock("div", _hoisted_5, [
+                                _createTextVNode(" 查找到 "),
+                                _createElementVNode("span", _hoisted_6, _toDisplayString(filterArray.value.length), 1 /* TEXT */),
+                                _createTextVNode(" 条相关属性 ")
+                            ]))
+                            : _createCommentVNode("v-if", true)
+                    ])
+                ]),
+                _: 1 /* STABLE */
+            }, 8 /* PROPS */, ["height"]));
+        };
+    }
+});
+export default __sfc_main__;

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

@@ -0,0 +1 @@
+export { default as Search } from './Search.js';

package/es/EditTable/consts.js

@@ -0,0 +1,7 @@
+export var TABLE_WRAPPER = Symbol('table-wrapper');
+export var FULL_SCREEN = Symbol('full');
+export var RIGHT_MENU = Symbol('right-menu');
+export var TABLE_ERROR = Symbol('table-error');
+export var TABLE_DATA_SOURCE = Symbol('table-data-source');
+export var TABLE_TOOL = Symbol('table-tool');
+export var TABLE_FORM_ITEM_ERROR = Symbol('table-form-item-error');

package/es/EditTable/hooks/index.js

@@ -0,0 +1,40 @@
+import { provide, inject, computed } from 'vue';
+import { RIGHT_MENU, TABLE_DATA_SOURCE, TABLE_ERROR, TABLE_WRAPPER, TABLE_TOOL, TABLE_FORM_ITEM_ERROR, FULL_SCREEN } from "../consts";
+export * from './useResizeObserver';
+export * from './useValidate';
+var FormContextKey = 'form-context';
+export var useFormContext = function useFormContext(options) {
+  provide(FormContextKey, options);
+};
+export var useInjectForm = function useInjectForm() {
+  return inject(FormContextKey, {
+    addField: function addField(key, field) {},
+    dataSource: computed(function () {
+      return [];
+    }),
+    rules: computed(function () {
+      return undefined;
+    })
+  });
+};
+export var useInjectError = function useInjectError() {
+  return inject(TABLE_ERROR);
+};
+export var useTableWrapper = function useTableWrapper() {
+  return inject(TABLE_WRAPPER);
+};
+export var useRightMenuContext = function useRightMenuContext() {
+  return inject(RIGHT_MENU);
+};
+export var useTableDataSource = function useTableDataSource() {
+  return inject(TABLE_DATA_SOURCE, []);
+};
+export var useTableTool = function useTableTool() {
+  return inject(TABLE_TOOL, false);
+};
+export var useFormItemError = function useFormItemError() {
+  return inject(TABLE_FORM_ITEM_ERROR);
+};
+export var useTableFullScreen = function useTableFullScreen() {
+  return inject(FULL_SCREEN);
+};

package/es/EditTable/hooks/useResizeObserver.js

@@ -0,0 +1,31 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import { onBeforeUnmount, onMounted } from "vue";
+import ResizeObserver from "resize-observer-polyfill";
+import { debounce } from "lodash-es";
+export var useResizeObserver = function useResizeObserver(tableWrapper, cb) {
+  var observer;
+  var onResize = function onResize(e) {
+    var rect = {};
+    var _iterator = _createForOfIteratorHelper(e),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var entry = _step.value;
+        rect = entry.contentRect;
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    cb(rect, e);
+  };
+  onMounted(function () {
+    observer = new ResizeObserver(debounce(onResize, 100));
+    observer.observe(tableWrapper.value);
+  });
+  onBeforeUnmount(function () {
+    var _observer;
+    (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.unobserve(tableWrapper.value);
+  });
+};