@kp-ui/lowcode-pc 1.0.0-alpha.1

package/assets/file-upload-widget.mjs

@@ -0,0 +1,248 @@
+import { defineComponent, computed, onMounted, resolveComponent, createBlock, createCommentVNode, unref, openBlock, mergeProps, withCtx, createVNode, createElementVNode, normalizeClass, isRef, createTextVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
+import FormItemWrapper from "./form-item-wrapper.mjs";
+import { u as useField } from "./useField.mjs";
+import { useFilesystemApi, useFilePreview, SvgIcon, TpfModal, FileIcon } from "tmgc2-share";
+import { message } from "ant-design-vue";
+import { C as ComponentNameEnum, W as WidgetTypeEnum, _ as _export_sfc } from "./install.mjs";
+const _hoisted_1 = ["loading", "disabled"];
+const _hoisted_2 = {
+  gutter: 20,
+  class: "fileUploadTip"
+};
+const _hoisted_3 = {
+  key: 0
+};
+const _hoisted_4 = {
+  key: 1
+};
+const _hoisted_5 = ["src"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: WidgetTypeEnum.fileUpload,
+    componentName: ComponentNameEnum.FieldWidget
+  },
+  __name: "file-upload-widget",
+  props: {
+    widget: {},
+    field: {},
+    designer: {},
+    parentWidget: {},
+    parentList: {},
+    indexOfParentList: {},
+    subFormRowIndex: {},
+    subFormRowId: {},
+    subFormColIndex: {}
+  },
+  setup(__props, {
+    expose: __expose
+  }) {
+    const filesystemApi = useFilesystemApi();
+    const props = __props;
+    const {
+      loading,
+      rules,
+      i18nt,
+      fieldEditor,
+      field,
+      fieldModel,
+      isReadMode,
+      designState,
+      handleHidden,
+      handleDisabled,
+      defineExposed,
+      executeFunction
+    } = useField(props);
+    const handleOnBeforeUpload = (file) => {
+      if (field.options.onBeforeUpload) {
+        const result = executeFunction({
+          functionBody: field.options.onBeforeUpload,
+          params: {
+            file
+          },
+          keys: ["file"]
+        });
+        if (typeof result === "boolean") {
+          return result;
+        } else {
+          return true;
+        }
+      }
+      return true;
+    };
+    const isShowUploader = computed(() => {
+      var _a;
+      return (((_a = fieldModel.value) == null ? void 0 : _a.length) || 0) < (field.options.limit || 1);
+    });
+    const customRequest = async (upload) => {
+      const {
+        accept,
+        maxSize,
+        limit,
+        businessType,
+        multiple
+      } = field.options;
+      const fileName = upload.file.name;
+      const fieldTypesArr = accept.map((item) => item.toLowerCase());
+      const fieldTypes = fileName.slice(fileName.lastIndexOf("."));
+      if (!fieldTypesArr.includes(fieldTypes.toLowerCase())) {
+        return message.error(`目前仅支持${accept}格式的文件`);
+      }
+      if (maxSize && upload.file.size > maxSize * 1024 * 1024) {
+        message.error(`文件大小不能超过${maxSize}M`);
+        return;
+      }
+      const flag = handleOnBeforeUpload(upload);
+      if (!flag) return;
+      loading.value = true;
+      try {
+        const res = await filesystemApi.uploadFileObject({
+          businessType,
+          file: upload.file
+        });
+        const {
+          fileName: name
+        } = res.data.object;
+        if (limit > 1) {
+          const findIndex = fieldModel.value.findIndex((item) => item.name === name);
+          if (findIndex > -1) {
+            fieldModel.value.splice(findIndex, 1);
+          }
+          if (fieldModel.value.length < limit) {
+            fieldModel.value.push({
+              ...res.data.object,
+              name
+            });
+          }
+        } else {
+          fieldModel.value = [{
+            ...res.data.object,
+            name
+          }];
+        }
+      } finally {
+        loading.value = false;
+      }
+    };
+    const initFileListFieldModel = () => {
+      if (designState) {
+        return;
+      }
+      if (fieldModel.value) {
+        if (typeof fieldModel.value === "string") {
+          fieldModel.value = JSON.parse(fieldModel.value);
+        }
+      }
+    };
+    const acceptType = computed(() => {
+      const {
+        accept
+      } = field.options;
+      if (accept == null ? void 0 : accept.length) {
+        return accept.join(",");
+      } else {
+        return "*";
+      }
+    });
+    const {
+      handlePreview,
+      previewVisible,
+      previewImage,
+      previewTitle
+    } = useFilePreview();
+    const iconRender = ({
+      file
+    }) => {
+      const fileObj = {
+        fileName: file.name,
+        fileType: file.name.slice(file.name.lastIndexOf("."))
+      };
+      return createVNode(FileIcon, {
+        "file": fileObj
+      }, null);
+    };
+    const removeFile = (file) => {
+      const findInx = fieldModel.value.findIndex((item) => item.uid === file.uid);
+      fieldModel.value.splice(findInx, 1);
+    };
+    const descCol = computed(() => {
+      const {
+        accept,
+        maxSize
+      } = field.options;
+      const acceptList = (accept || []).join(",");
+      return [acceptList.length ? i18nt("支持扩展名") + `${acceptList}` : "", maxSize ? i18nt("支持文件大小") + `${maxSize}M` : ""].filter(Boolean);
+    });
+    onMounted(() => {
+      initFileListFieldModel();
+    });
+    __expose({
+      ...defineExposed
+    });
+    return (_ctx, _cache) => {
+      const _component_a_space = resolveComponent("a-space");
+      const _component_a_upload = resolveComponent("a-upload");
+      return !unref(handleHidden) ? (openBlock(), createBlock(FormItemWrapper, mergeProps({
+        key: 0
+      }, props, {
+        rules: unref(rules)
+      }), {
+        default: withCtx(() => [createVNode(_component_a_upload, {
+          ref_key: "fieldEditor",
+          ref: fieldEditor,
+          disabled: unref(handleDisabled) || unref(isReadMode),
+          class: normalizeClass(["dynamicPseudoAfter", ["tpf-upload", {
+            isReadonly: unref(isReadMode)
+          }]]),
+          multiple: unref(field).options.multiple,
+          accept: acceptType.value,
+          "file-list": unref(fieldModel),
+          "onUpdate:fileList": _cache[0] || (_cache[0] = ($event) => isRef(fieldModel) ? fieldModel.value = $event : null),
+          listType: unref(field).options.uploadListType,
+          customRequest,
+          iconRender,
+          onPreview: unref(handlePreview),
+          onRemove: removeFile
+        }, {
+          default: withCtx(() => [isShowUploader.value ? (openBlock(), createBlock(_component_a_space, {
+            key: 0,
+            size: 10,
+            align: "start"
+          }, {
+            default: withCtx(() => [createElementVNode("div", {
+              loading: unref(loading),
+              class: "tpf-button",
+              type: "primary",
+              disabled: unref(handleDisabled)
+            }, [createVNode(unref(SvgIcon), {
+              "icon-class": "daochu"
+            }), _cache[2] || (_cache[2] = createTextVNode(" 上传文件 "))], 8, _hoisted_1)]),
+            _: 1
+          })) : createCommentVNode("", true)]),
+          _: 1
+        }, 8, ["disabled", "class", "multiple", "accept", "file-list", "listType", "onPreview"]), createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(descCol.value, (item, inx) => {
+          return openBlock(), createElementBlock("div", {
+            key: inx
+          }, [descCol.value.length > 1 ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(inx + 1) + "、" + toDisplayString(item), 1)) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(item), 1))]);
+        }), 128))]), createVNode(unref(TpfModal), {
+          visible: unref(previewVisible),
+          "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => isRef(previewVisible) ? previewVisible.value = $event : null),
+          title: unref(previewTitle),
+          footer: null
+        }, {
+          default: withCtx(() => [createElementVNode("img", {
+            style: {
+              "width": "100%"
+            },
+            src: unref(previewImage)
+          }, null, 8, _hoisted_5)]),
+          _: 1
+        }, 8, ["visible", "title"])]),
+        _: 1
+      }, 16, ["rules"])) : createCommentVNode("", true);
+    };
+  }
+});
+const fileUploadWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fd798690"]]);
+export {
+  fileUploadWidget as default
+};

package/assets/form-item-wrapper.mjs

@@ -0,0 +1,140 @@
+import { defineComponent, inject, computed, resolveComponent, createElementBlock, openBlock, createVNode, unref, normalizeClass, withCtx, renderSlot, createElementVNode, createCommentVNode, Fragment, toDisplayString } from "vue";
+import { SvgIcon } from "tmgc2-share";
+import { FormItem } from "ant-design-vue";
+import { u as useDesigner, _ as _export_sfc } from "./install.mjs";
+const _hoisted_1 = {
+  class: "field-wrapper"
+};
+const _hoisted_2 = {
+  class: "label-box"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "custom-label"
+};
+const _hoisted_4 = {
+  class: "label-text"
+};
+const _hoisted_5 = {
+  class: "label-text"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "label-text"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "form-item-wrapper"
+  },
+  __name: "form-item-wrapper",
+  props: {
+    rules: {},
+    widget: {},
+    field: {},
+    designer: {},
+    parentWidget: {
+      default: null
+    },
+    parentList: {},
+    indexOfParentList: {
+      default: 0
+    },
+    subFormRowIndex: {},
+    subFormRowId: {},
+    subFormColIndex: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const getSubFormName = inject("getSubFormName", () => "");
+    const getSubFormFieldFlag = inject("getSubFormFieldFlag", () => false);
+    const {
+      formConfig,
+      designState
+    } = useDesigner();
+    const labelWidth = computed(() => {
+      var _a, _b, _c, _d, _e;
+      if ((_b = (_a = props.field) == null ? void 0 : _a.options) == null ? void 0 : _b.labelHidden) {
+        return 0;
+      }
+      if ((_d = (_c = props.field) == null ? void 0 : _c.options) == null ? void 0 : _d.labelWidth) {
+        return props.field.options.labelWidth;
+      }
+      return (_e = formConfig.value) == null ? void 0 : _e.labelWidth;
+    });
+    const label = computed(() => {
+      var _a, _b, _c, _d;
+      if ((_b = (_a = props.field) == null ? void 0 : _a.options) == null ? void 0 : _b.labelHidden) {
+        return "";
+      }
+      return (_d = (_c = props.field) == null ? void 0 : _c.options) == null ? void 0 : _d.label;
+    });
+    const labelAlign = computed(() => {
+      var _a, _b, _c;
+      if ((_b = (_a = props.field) == null ? void 0 : _a.options) == null ? void 0 : _b.labelAlign) {
+        return props.field.options.labelAlign;
+      }
+      return ((_c = formConfig.value) == null ? void 0 : _c.labelAlign) || "right";
+    });
+    const subFormName = computed(() => () => {
+      return getSubFormName ? getSubFormName() : "";
+    });
+    const size = computed(() => {
+      var _a, _b, _c;
+      if ((_b = (_a = props.field) == null ? void 0 : _a.options) == null ? void 0 : _b.size) {
+        return props.field.options.size;
+      }
+      return ((_c = formConfig.value) == null ? void 0 : _c.size) || "middle";
+    });
+    const subFormItemFlag = computed(() => {
+      return getSubFormFieldFlag ? getSubFormFieldFlag() : false;
+    });
+    const getPropName = computed(() => {
+      if (subFormItemFlag.value && !designState) {
+        return subFormName.value + "." + props.subFormRowIndex + "." + props.field.options.name;
+      } else return props.field.options.name;
+    });
+    const customClass = computed(() => props.field.options.customClass ? props.field.options.customClass.join(" ") : "");
+    return (_ctx, _cache) => {
+      const _component_a_tooltip = resolveComponent("a-tooltip");
+      return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(FormItem), {
+        labelCol: {
+          style: {
+            width: labelWidth.value + "px"
+          }
+        },
+        title: label.value,
+        size: size.value,
+        rules: _ctx.rules,
+        name: getPropName.value,
+        labelAlign: labelAlign.value,
+        class: normalizeClass([customClass.value])
+      }, {
+        label: withCtx(() => [createElementVNode("div", _hoisted_2, [!!_ctx.field.options.labelIconClass ? (openBlock(), createElementBlock("span", _hoisted_3, [_ctx.field.options.labelIconPosition === "front" ? (openBlock(), createElementBlock(Fragment, {
+          key: 0
+        }, [createVNode(_component_a_tooltip, {
+          title: _ctx.field.options.labelIconTooltip
+        }, {
+          default: withCtx(() => [createVNode(unref(SvgIcon), {
+            "icon-class": _ctx.field.options.labelIconClass
+          }, null, 8, ["icon-class"])]),
+          _: 1
+        }, 8, ["title"]), createElementVNode("div", _hoisted_4, toDisplayString(label.value), 1)], 64)) : _ctx.field.options.labelIconPosition === "rear" ? (openBlock(), createElementBlock(Fragment, {
+          key: 1
+        }, [createElementVNode("div", _hoisted_5, toDisplayString(label.value), 1), createVNode(_component_a_tooltip, {
+          title: _ctx.field.options.labelIconTooltip
+        }, {
+          default: withCtx(() => [createVNode(unref(SvgIcon), {
+            "icon-class": _ctx.field.options.labelIconClass
+          }, null, 8, ["icon-class"])]),
+          _: 1
+        }, 8, ["title"])], 64)) : createCommentVNode("", true)])) : (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(label.value), 1))])]),
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+        _: 3
+      }, 8, ["labelCol", "title", "size", "rules", "name", "labelAlign", "class"])]);
+    };
+  }
+});
+const FormItemWrapper = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4322845c"]]);
+export {
+  FormItemWrapper as default
+};

package/assets/grid-col-widget.mjs

@@ -0,0 +1,97 @@
+import { computed, defineComponent, mergeModels, useModel, reactive, resolveComponent, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, mergeProps, withModifiers, unref, withCtx, createVNode } from "vue";
+import { C as ComponentNameEnum, e as ContainerTypeEnum, u as useDesigner, R as RenderWidgetList, g as WidgetContextMenu, _ as _export_sfc } from "./install.mjs";
+function useWidget(widget) {
+  const options = computed(() => widget.options || {});
+  const customClass = computed(
+    () => widget.options.customClass ? widget.options.customClass.join(" ") : ""
+  );
+  return {
+    customClass,
+    options
+  };
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: ContainerTypeEnum.GridColWidget,
+    componentName: ComponentNameEnum.ContainerWidget,
+    inheritAttrs: false
+  },
+  __name: "grid-col-widget",
+  props: /* @__PURE__ */ mergeModels({
+    widget: {},
+    field: {},
+    parentWidget: {},
+    indexOfParentList: { default: 0 },
+    subFormRowIndex: {},
+    subFormRowId: {},
+    colHeight: { default: null }
+  }, {
+    "list": {
+      default: () => []
+    },
+    "listModifiers": {}
+  }),
+  emits: ["update:list"],
+  setup(__props) {
+    const props = __props;
+    const list = useModel(__props, "list");
+    const { customClass, options } = useWidget(props.widget);
+    const { selected, selectWidget } = useDesigner();
+    const colHeightStyle = computed(() => {
+      return props.colHeight ? { height: props.colHeight } : {};
+    });
+    const layoutProps = computed(() => ({
+      span: options.value.span || 12,
+      offset: options.value.offset || 0,
+      push: options.value.push || 0,
+      pull: options.value.pull || 0
+    }));
+    const contextMenuState = reactive({
+      visible: false,
+      x: 0,
+      y: 0
+    });
+    const onContextMenu = (event) => {
+      contextMenuState.x = event.clientX;
+      contextMenuState.y = event.clientY;
+      contextMenuState.visible = true;
+    };
+    return (_ctx, _cache) => {
+      const _component_a_col = resolveComponent("a-col");
+      return openBlock(), createElementBlock(Fragment, null, [
+        (openBlock(), createBlock(_component_a_col, mergeProps({ class: "grid-cell" }, layoutProps.value, {
+          class: [unref(selected)(_ctx.widget.id) ? "selected" : "", unref(customClass)],
+          style: colHeightStyle.value,
+          key: _ctx.widget.id,
+          onClick: _cache[1] || (_cache[1] = withModifiers(($event) => unref(selectWidget)(_ctx.widget), ["stop"])),
+          onContextmenu: withModifiers(onContextMenu, ["prevent", "stop"])
+        }), {
+          default: withCtx(() => [
+            createVNode(unref(RenderWidgetList), {
+              list: _ctx.widget.widgetList,
+              "onUpdate:list": _cache[0] || (_cache[0] = ($event) => _ctx.widget.widgetList = $event),
+              parentWidget: _ctx.widget
+            }, null, 8, ["list", "parentWidget"])
+          ]),
+          _: 1
+        }, 16, ["class", "style"])),
+        contextMenuState.visible ? (openBlock(), createBlock(unref(WidgetContextMenu), {
+          key: 0,
+          visible: contextMenuState.visible,
+          "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => contextMenuState.visible = $event),
+          list: list.value,
+          "onUpdate:list": _cache[3] || (_cache[3] = ($event) => list.value = $event),
+          x: contextMenuState.x,
+          y: contextMenuState.y,
+          widget: _ctx.widget,
+          index: _ctx.indexOfParentList,
+          parentWidget: _ctx.parentWidget
+        }, null, 8, ["visible", "list", "x", "y", "widget", "index", "parentWidget"])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+const GridColWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a00bba10"]]);
+export {
+  GridColWidget as default
+};

package/assets/grid-sub-form-widget.mjs

@@ -0,0 +1,33 @@
+import { defineComponent, createElementBlock, openBlock, createVNode, unref } from "vue";
+import { C as ComponentNameEnum, e as ContainerTypeEnum, R as RenderWidgetList, _ as _export_sfc } from "./install.mjs";
+const _hoisted_1 = { class: "sub-form-container" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: ContainerTypeEnum.GridSubFormWidget,
+    componentName: ComponentNameEnum.ContainerWidget
+  },
+  __name: "grid-sub-form-widget",
+  props: {
+    widget: {},
+    field: {},
+    parentWidget: {},
+    indexOfParentList: {},
+    subFormRowIndex: {},
+    subFormRowId: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(RenderWidgetList), {
+          list: _ctx.widget.widgetList,
+          "onUpdate:list": _cache[0] || (_cache[0] = ($event) => _ctx.widget.widgetList = $event),
+          parentWidget: _ctx.widget
+        }, null, 8, ["list", "parentWidget"])
+      ]);
+    };
+  }
+});
+const gridSubFormWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-49c81f5e"]]);
+export {
+  gridSubFormWidget as default
+};

package/assets/grid-widget.mjs

@@ -0,0 +1,52 @@
+import { defineComponent, resolveComponent, createElementBlock, openBlock, createBlock, withCtx, Fragment, renderList } from "vue";
+import GridColWidget from "./grid-col-widget.mjs";
+import { C as ComponentNameEnum, e as ContainerTypeEnum, a as useAppRef, _ as _export_sfc } from "./install.mjs";
+const _hoisted_1 = { class: "grid-container" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: ContainerTypeEnum.grid,
+    componentName: ComponentNameEnum.ContainerWidget
+  },
+  __name: "grid-widget",
+  props: {
+    widget: {},
+    field: {},
+    parentWidget: {},
+    indexOfParentList: {},
+    subFormRowIndex: {},
+    subFormRowId: {}
+  },
+  setup(__props) {
+    const { initRefList } = useAppRef();
+    initRefList();
+    return (_ctx, _cache) => {
+      const _component_a_row = resolveComponent("a-row");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(), createBlock(_component_a_row, {
+          key: _ctx.widget.id,
+          gutter: _ctx.widget.options.gutter
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.widget.cols, (colWidget, colIdx) => {
+              return openBlock(), createBlock(GridColWidget, {
+                key: colWidget.id,
+                field: colWidget,
+                widget: colWidget,
+                list: _ctx.widget.cols,
+                "onUpdate:list": _cache[0] || (_cache[0] = ($event) => _ctx.widget.cols = $event),
+                "index-of-parent-list": colIdx,
+                "parent-widget": _ctx.widget,
+                "col-height": _ctx.widget.options.colHeight
+              }, null, 8, ["field", "widget", "list", "index-of-parent-list", "parent-widget", "col-height"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["gutter"]))
+      ]);
+    };
+  }
+});
+const gridWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-40047deb"]]);
+export {
+  gridWidget as default
+};

package/assets/html-text-widget.mjs

@@ -0,0 +1,44 @@
+import { defineComponent, computed, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle } from "vue";
+import { u as useField } from "./useField.mjs";
+import { C as ComponentNameEnum, W as WidgetTypeEnum, _ as _export_sfc } from "./install.mjs";
+const _hoisted_1 = ["innerHTML"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: WidgetTypeEnum.htmlText,
+    componentName: ComponentNameEnum.FieldWidget
+  },
+  __name: "html-text-widget",
+  props: {
+    widget: {},
+    field: {},
+    designer: {},
+    parentWidget: {},
+    parentList: {},
+    indexOfParentList: {},
+    subFormRowIndex: {},
+    subFormRowId: {},
+    subFormColIndex: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const { fieldEditor, field, handleHidden, defineExposed } = useField(props);
+    const displayStyle = computed(() => field.options.bodyStyle || {});
+    __expose({
+      ...defineExposed
+    });
+    return (_ctx, _cache) => {
+      return !unref(handleHidden) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        ref_key: "fieldEditor",
+        ref: fieldEditor,
+        style: normalizeStyle(displayStyle.value),
+        class: "htmlContent",
+        innerHTML: unref(field).options.htmlContent
+      }, null, 12, _hoisted_1)) : createCommentVNode("", true);
+    };
+  }
+});
+const htmlTextWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6895d562"]]);
+export {
+  htmlTextWidget as default
+};