epic-designer-gold 0.0.1 → 0.0.2

package/packages/ui/elementPlus/upload-file/uploadFile.ts

@@ -1,114 +0,0 @@
-import { type PropType, defineComponent, h, nextTick, computed, ref, watch } from 'vue'
-import { ElMessage, ElUpload, ElButton, type UploadProps, type UploadUserFile, type UploadRawFile } from 'element-plus'
-export default defineComponent({
-  props: {
-    modelValue: {
-      type: Array as PropType<UploadUserFile[]>,
-      default: () => []
-    }
-  },
-  emits: ['update:modelValue'],
-  setup (props, { emit, attrs }) {
-    const fileList = ref<UploadUserFile[]>([])
-    watch(fileList, (e) => {
-      emit('update:modelValue', e)
-    })
-    // 处理传递进来的值
-    watch(
-      () => props.modelValue,
-      (e) => {
-        if ((e != null) && e.length > 0 && (fileList.value != null)) {
-          // props modelValue 等于 data 不进行处理
-          if (fileList.value === e) return
-          fileList.value.length = 0
-          fileList.value.push(...e)
-        }
-      },
-      { deep: true, immediate: true }
-    )
-
-    // function handleChange : UploadProps['onChange']  (e: UploadUserFile[]) => {
-    //   nextTick(() => { fileList.value = e })
-    // }
-    const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles): void => {
-      nextTick(() => { fileList.value = uploadFiles })
-    }
-    // 处理数据结果
-    // const handleChange = (info: UploadChangeParam): void => {
-    //   if (info.file.status === 'uploading') {
-    //     return
-    //   }
-    //
-    //   if (info.file.status === 'done') {
-    //     // Get this url from response in real world.
-    //     const url = info.file.response?.data?.url
-    //     if (!info.file.url && !url) {
-    //       info.file.status = 'error'
-    //       ElMessage.error('上传失败')
-    //       return
-    //     }
-    //     // 赋值url
-    //     info.file.url = url
-    //   }
-    //
-    //   if (info.file.status === 'error') {
-    //     ElMessage.error('upload error')
-    //   }
-    // }
-
-    // 上传前处理
-    const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile): void => {
-      // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-      // if (!isJpgOrPng) {
-      //   message.error('您只能上传JPG/PNG文件!');
-      // }
-      // const isLt2M = file.size / 1024 / 1024 < 2;
-      // if (!isLt2M) {
-      //   message.error('图片大小超过 2MB!');
-      // }
-      // return isJpgOrPng && isLt2M;
-    }
-    const handleSuccess: UploadProps['onSuccess'] = (response, uploadFile, uploadFiles) => {
-      console.log(uploadFiles)
-    }
-    const handleError: UploadProps['onError'] = (error, uploadFile, uploadFiles) => {
-      ElMessage.error('上传失败')
-      console.error(error)
-    }
-    // ts报错先忽略了
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    const getUploadProps = computed<UploadProps>(() => ({
-      ...attrs,
-      "file-list": fileList.value,
-      onBeforeUpload: beforeUpload,
-      onChange: handleChange,
-      onSuccess: handleSuccess,
-      onError: handleError
-    }))
-
-    return () => {
-      return h('div', null, {
-        default: () => [
-          h(ElUpload, getUploadProps.value, {
-            default: () => [
-              h(
-                ElButton,
-                {},
-                {
-                  default: () => [
-                    h('span', {
-                      class: 'icon--epic icon--epic--cloud-upload-outlined text-lg',
-                      style: { 'margin-right': '2px' }
-                    }),
-                    h('span', null, { default: () => '上传文件' })
-                  ]
-                }
-              )
-            ]
-          })
-        ]
-      })
-    }
-  }
-})

package/packages/ui/elementPlus/upload-image/index.ts

@@ -1,87 +0,0 @@
-import { type ComponentConfigModel } from "@epic-designer/utils";
-export default {
-  component: () => import("./uploadImage"),
-  groupName: "表单",
-  icon: "icon--epic--imagesmode-outline-rounded",
-  sort: 920,
-  defaultSchema: {
-    label: "上传图片",
-    type: "upload-image",
-    field: "uploadImage",
-    input: true,
-    componentProps: {
-      action: "https://examples.epicjs.cn/static/upload-img.json",
-      name: "file",
-      showFileList: true,
-    },
-  },
-  config: {
-    attribute: [
-      {
-        label: "字段名",
-        type: "input",
-        field: "field",
-      },
-      {
-        label: "标题",
-        type: "input",
-        field: "label",
-      },
-      {
-        label: "请求地址",
-        type: "input",
-        field: "componentProps.action",
-      },
-      {
-        label: "上传文件字段",
-        type: "input",
-        field: "componentProps.name",
-      },
-      {
-        label: "多选",
-        type: "switch",
-        field: "componentProps.multiple",
-      },
-      {
-        label: "展示文件列表",
-        type: "switch",
-        field: "componentProps.showFileList",
-      },
-      {
-        label: "拖拽上传",
-        type: "switch",
-        field: "componentProps.drag",
-      },
-      {
-        label: "允许上传最大数量",
-        type: "number",
-        field: "componentProps.limit",
-        componentProps: {
-          min: 0,
-          placeholder: "请输入",
-        },
-      },
-      {
-        label: "禁用",
-        type: "switch",
-        field: "componentProps.disabled",
-      },
-      {
-        label: "隐藏",
-        type: "switch",
-        field: "componentProps.hidden",
-      },
-      {
-        label: "表单校验",
-        type: "ERuleEditor",
-        layout: "vertical",
-        field: "rules",
-        describe: "校验规则需要配合表单使用",
-        componentProps: {
-          ruleType: "array",
-        },
-      },
-    ],
-  },
-  bindModel: "modelValue",
-} as ComponentConfigModel;

package/packages/ui/elementPlus/upload-image/uploadImage.ts

@@ -1,150 +0,0 @@
-import { type PropType, defineComponent, h, nextTick, computed, ref, watch } from 'vue'
-import { ElUpload, ElMessage, ElImageViewer, type UploadProps, type UploadUserFile } from 'element-plus'
-
-// 封装上传文件组件
-export default defineComponent({
-  props: {
-    modelValue: {
-      type: Array as PropType<UploadUserFile[]>,
-      default: () => []
-    }
-  },
-  emits: ['update:modelValue'],
-  setup (props, { emit, attrs }) {
-    const fileList = ref<UploadUserFile[]>([])
-
-    const imgUrl = ref('')
-    const visible = ref(false)
-    const setVisible = (value: boolean): void => {
-      visible.value = value
-    }
-
-    watch(fileList, (e) => {
-      emit('update:modelValue', e)
-    })
-    // 处理传递进来的值
-    watch(
-      () => props.modelValue,
-      (e) => {
-        if (e != null && e.length > 0 && fileList.value != null) {
-          // props modelValue 等于 data 不进行处理
-          if (fileList.value === e) return
-          fileList.value.length = 0
-          fileList.value.push(...e)
-        }
-      },
-      { deep: true, immediate: true }
-    )
-
-    const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles): void => {
-      nextTick(() => { fileList.value = uploadFiles })
-    }
-
-    // 处理数据结果
-    // const handleChange = (info: UploadChangeParam): void => {
-    //   if (info.file.status === 'uploading') {
-    //     return
-    //   }
-    //
-    //   if (info.file.status === 'done') {
-    //     // Get this url from response in real world.
-    //     const url: string | undefined = info.file.response?.data?.url
-    //     if (!info.file.url && !url) {
-    //       info.file.status = 'error'
-    //       message.error('上传失败')
-    //       return
-    //     }
-    //     // 赋值url
-    //     info.file.url = url
-    //     info.file.thumbUrl = url
-    //   }
-    //
-    //   if (info.file.status === 'error') {
-    //     message.error('upload error')
-    //   }
-    // }
-
-    const handleSuccess: UploadProps['onSuccess'] = (response, uploadFile, uploadFiles) => {
-      console.log(uploadFiles)
-    }
-    const handleError: UploadProps['onError'] = (error, uploadFile, uploadFiles) => {
-      ElMessage.error('上传失败')
-      console.error(error)
-    }
-
-    // 上传前处理
-    const beforeUpload = (file: any): void => {
-      // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-      // if (!isJpgOrPng) {
-      //   message.error('您只能上传JPG/PNG文件!');
-      // }
-      // const isLt2M = file.size / 1024 / 1024 < 2;
-      // if (!isLt2M) {
-      //   message.error('图片大小超过 2MB!');
-      // }
-      // return isJpgOrPng && isLt2M;
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    const getUploadProps = computed<UploadProps>(() => ({
-      ...attrs,
-      'file-list':fileList.value,
-      'list-type': 'picture-card',
-      accept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
-      onBeforeUpload: beforeUpload,
-      onChange: handleChange,
-      onSuccess: handleSuccess,
-      onError: handleError,
-      onPreview: handlePreview
-    }))
-
-    /**
-     * 预览功能
-     * @param {*} e
-     */
-    const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
-      if (!uploadFile.url) return
-      imgUrl.value = uploadFile.url
-      setVisible(true)
-    }
-
-    return () => {
-      // const type = attrs.type;
-      return h(
-        'div',
-        {
-          class: 'epic-upload-image'
-        },
-        {
-          default: () => [
-            h(ElUpload, getUploadProps.value, {
-              default: () => [
-                h('div', { style: { 'text-align': 'center' } }, {
-                  default: () => [
-                    h('span', {
-                      class: 'icon--epic icon--epic--cloud-upload-outlined mr-2px text-lg',
-                    }),
-                    h(
-                      'div',
-                      { class: 'ant-upload-text' },
-                      { default: () => '点击上传' }
-                    )
-                  ]
-                })
-              ]
-            }),
-            (() => {
-              if (!visible.value) {
-                return
-              }
-              return h(ElImageViewer, {
-                urlList: [imgUrl.value],
-                onClose: () => { setVisible(false) }
-              })
-            })()
-          ]
-        }
-      )
-    }
-  }
-})

package/packages/ui/index.ts

@@ -1,22 +0,0 @@
-import { pluginManager } from "@epic-designer/utils";
-
-
-export function setupAntd() {
-  import("./antd").then(({ setupAntd }) => {
-    setupAntd.bind(null, pluginManager)();
-  });
-}
-
-export function setupElementPlus() {
-  import("./elementPlus").then(({ setupElementPlus }) => {
-    setupElementPlus.bind(null, pluginManager)();
-  });
-}
-
-export function setupNaiveUi() {
-  import("./naiveUi").then(({ setupNaiveUi }) => {
-    setupNaiveUi.bind(null, pluginManager)();
-  });
-}
-
-

package/packages/ui/naiveUi/button/button.ts

@@ -1,25 +0,0 @@
-import type { PropType } from 'vue'
-import { defineComponent, h, renderSlot } from 'vue'
-import { NButton } from 'naive-ui'
-import { type ComponentSchema } from '@epic-designer/core/types/epic-designer'
-
-// 二次封装组件
-export default defineComponent({
-  props: {
-    componentSchema: {
-      type: Object as PropType<ComponentSchema>,
-      default: () => ({})
-    }
-  },
-  setup (props, { slots }) {
-    return () => {
-      const componentProps: Record<string, any> = {
-        ...props.componentSchema?.componentProps
-      }
-
-      return h(NButton, componentProps, {
-        default: () => renderSlot(slots, 'default', {}, () => [props.componentSchema?.label])
-      })
-    }
-  }
-})

package/packages/ui/naiveUi/button/index.ts

@@ -1,148 +0,0 @@
-import { type ComponentConfigModel } from "@epic-designer/utils";
-export default {
-  component: () => import("./button"),
-  groupName: "表单",
-  icon: "icon--epic--fit-screen-rounded",
-  sort: 1200,
-  defaultSchema: {
-    label: "按钮",
-    type: "button",
-    field: "input",
-    input: false,
-    componentProps: {
-      bordered: true,
-      type: "default",
-      size: "medium",
-    },
-  },
-  config: {
-    attribute: [
-      {
-        label: "标题",
-        type: "input",
-        field: "label",
-      },
-      {
-        label: "类型",
-        type: "select",
-        componentProps: {
-          placeholder: "请选择",
-          options: [
-            {
-              label: "default",
-              value: "default",
-            },
-            {
-              label: "tertiary",
-              value: "tertiary",
-            },
-            {
-              label: "primary",
-              value: "primary",
-            },
-            {
-              label: "success",
-              value: "success",
-            },
-            {
-              label: "info",
-              value: "info",
-            },
-            {
-              label: "warning",
-              value: "warning",
-            },
-            {
-              label: "error",
-              value: "error",
-            },
-          ],
-        },
-        field: "componentProps.type",
-      },
-      {
-        label: "尺寸",
-        type: "select",
-        defaultValue: "default",
-        componentProps: {
-          placeholder: "请选择",
-          clearable: true,
-          options: [
-            {
-              label: "tiny",
-              value: "tiny",
-            },
-            {
-              label: "大号",
-              value: "large",
-            },
-            {
-              label: "中等",
-              value: "medium",
-            },
-            {
-              label: "小型",
-              value: "small",
-            },
-          ],
-        },
-        field: "componentProps.size",
-      },
-      {
-        label: "是否块级",
-        type: "switch",
-        field: "componentProps.block",
-      },
-      {
-        label: "显示边框",
-        type: "switch",
-        field: "componentProps.bordered",
-      },
-      {
-        label: "虚线框",
-        type: "switch",
-        field: "componentProps.dashed",
-      },
-      {
-        label: "圆角按钮",
-        type: "switch",
-        field: "componentProps.round",
-      },
-      {
-        label: "圆形按钮",
-        type: "switch",
-        field: "componentProps.circle",
-      },
-      {
-        label: "按钮颜色",
-        type: "color-picker",
-        field: "componentProps.color",
-      },
-      {
-        label: "是否透明",
-        type: "switch",
-        field: "componentProps.ghost",
-      },
-      {
-        label: "禁用",
-        type: "switch",
-        field: "componentProps.disabled",
-      },
-      {
-        label: "隐藏",
-        type: "switch",
-        field: "componentProps.hidden",
-      },
-    ],
-    event: [
-      {
-        type: "click",
-        describe: "点击按钮时",
-      },
-      {
-        type: "dblclick",
-        describe: "双击按钮时",
-      },
-    ],
-  },
-} as ComponentConfigModel;

package/packages/ui/naiveUi/card/card.ts

@@ -1,32 +0,0 @@
-import type { PropType } from 'vue'
-import { defineComponent, h, renderSlot } from 'vue'
-import { NCard } from 'naive-ui'
-import { type ComponentSchema } from '@epic-designer/core/types/epic-designer'
-export default defineComponent({
-  props: {
-    componentSchema: {
-      type: Object as PropType<ComponentSchema>,
-      require: true,
-      default: () => ({})
-    }
-  },
-  setup (props, { slots }) {
-    return () => {
-      const componentSchema = {
-        ...props.componentSchema,
-        title: props.componentSchema.label
-      } as ComponentSchema
-      const children = componentSchema.children ?? []
-      delete componentSchema.children
-
-      return h(NCard, componentSchema, {
-        default: () =>
-          renderSlot(slots, 'edit-node', {}, () =>
-            children.map((node: ComponentSchema) =>
-              renderSlot(slots, 'node', { componentSchema: node })
-            )
-          )
-      })
-    }
-  }
-})

package/packages/ui/naiveUi/card/index.ts

@@ -1,26 +0,0 @@
-import { type ComponentConfigModel } from "@epic-designer/utils";
-export default {
-  component: () => import("./card"),
-  groupName: "布局",
-  icon: "icon--epic--wysiwyg-rounded",
-  sort: 900,
-  defaultSchema: {
-    label: "卡片布局",
-    type: "card",
-    children: [],
-  },
-  config: {
-    attribute: [
-      {
-        label: "标题",
-        type: "input",
-        field: "label",
-      },
-      {
-        label: "隐藏",
-        type: "switch",
-        field: "componentProps.hidden",
-      },
-    ],
-  },
-} as ComponentConfigModel;