epic-designer-gold 0.0.4 → 0.0.5

package/packages/ui/naiveUi/color-picker/index.ts

@@ -1,182 +0,0 @@
-import { type ComponentConfigModel } from "@epic-designer/utils";
-export default {
-  component: async () =>
-    (await import("naive-ui/lib/color-picker")).NColorPicker,
-  groupName: "表单",
-  icon: "icon--epic--palette-outline",
-  sort: 950,
-  defaultSchema: {
-    label: "颜色选择器",
-    type: "color-picker",
-    field: "color-picker",
-    input: true,
-    componentProps: {
-      type: "color",
-      modes: ["hex"],
-      showAlpha: true
-    },
-  },
-  config: {
-    attribute: [
-      {
-        label: "字段名",
-        type: "input",
-        field: "field",
-      },
-      {
-        label: "标题",
-        type: "input",
-        field: "label",
-      },
-      {
-        label: "默认值",
-        type: "color-picker",
-        field: "componentProps.defaultValue",
-      },
-      {
-        label: "尺寸",
-        type: "select",
-        defaultValue: "default",
-        componentProps: {
-          placeholder: "请选择",
-          clearable: true,
-          options: [
-            {
-              label: "大号",
-              value: "large",
-            },
-            {
-              label: "中等",
-              value: "medium",
-            },
-            {
-              label: "小型",
-              value: "small",
-            },
-          ],
-        },
-        field: "componentProps.size",
-      },
-      {
-        label: "菜单弹出的位置",
-        type: "select",
-        field: "componentProps.placement",
-        componentProps: {
-          placeholder: "请选择",
-          clearable: true,
-          options: [
-            {
-              label: "top-start",
-              value: "top-start",
-            },
-            {
-              label: "top",
-              value: "top",
-            },
-            {
-              label: "top-end",
-              value: "top-end",
-            },
-            {
-              label: "right-start",
-              value: "right-start",
-            },
-            {
-              label: "right",
-              value: "right",
-            },
-            {
-              label: "right-end",
-              value: "right-end",
-            },
-            {
-              label: "bottom-start",
-              value: "bottom-start",
-            },
-            {
-              label: "bottom",
-              value: "bottom",
-            },
-            {
-              label: "bottom-end",
-              value: "bottom-end",
-            },
-            {
-              label: "left-start",
-              value: "left-start",
-            },
-            {
-              label: "left",
-              value: "left",
-            },
-            {
-              label: "left-end",
-              value: "left-end",
-            },
-          ],
-        },
-      },
-      {
-        label: "格式",
-        type: "checkbox",
-        field: "componentProps.modes",
-        componentProps: {
-          options: [
-            {
-              label: "rgb",
-              value: "rgb",
-            },
-            {
-              label: "hex",
-              value: "hex",
-            },
-            {
-              label: "hsl",
-              value: "hsl",
-            },
-            {
-              label: "hsv",
-              value: "hsv",
-            },
-          ],
-          max: 1,
-        },
-      },
-      {
-        label: "展示预览块",
-        type: "switch",
-        field: "componentProps.showPreview",
-      },
-      {
-        label: "可调节透明度",
-        type: "switch",
-        field: "componentProps.showAlpha",
-      },
-      {
-        label: "禁用",
-        type: "switch",
-        field: "componentProps.disabled",
-      },
-      {
-        label: "隐藏",
-        type: "switch",
-        field: "componentProps.hidden",
-      },
-      {
-        label: "表单校验",
-        type: "ERuleEditor",
-        layout: "vertical",
-        field: "rules",
-        describe: "校验规则需要配合表单使用",
-      },
-    ],
-    event: [
-      {
-        type: "change",
-        describe: "值变化时",
-      },
-    ],
-    action: [],
-  },
-  bindModel: "value",
-} as ComponentConfigModel;

package/packages/ui/naiveUi/date-picker/index.ts

@@ -1,213 +0,0 @@
-import { type ComponentConfigModel } from "@epic-designer/utils";
-export default {
-  component: async () => (await import("naive-ui/lib/date-picker")).NDatePicker,
-  groupName: "表单",
-  icon: "icon--epic--calendar-month-outline-rounded",
-  sort: 910,
-  defaultSchema: {
-    label: "日期选择器",
-    type: "date",
-    field: "date",
-    input: true,
-    componentProps: {
-      type: "date",
-      placeholder: "请选择",
-      format: "yyyy-MM-dd",
-      valueFormat: "yyyy-MM-dd",
-    },
-  },
-  config: {
-    attribute: [
-      {
-        label: "字段名",
-        type: "input",
-        field: "field",
-      },
-      {
-        label: "标题",
-        type: "input",
-        field: "label",
-      },
-      {
-        label: "默认值",
-        type: "date",
-        field: "componentProps.defaultValue",
-      },
-      {
-        label: "尺寸",
-        type: "select",
-        field: "componentProps.size",
-        componentProps: {
-          placeholder: "请选择",
-          clearable: true,
-          options: [
-            {
-              label: "大号",
-              value: "large",
-            },
-            {
-              label: "中等",
-              value: "medium",
-            },
-            {
-              label: "小型",
-              value: "small",
-            },
-          ],
-        },
-      },
-      {
-        label: "占位内容",
-        type: "input",
-        field: "componentProps.placeholder",
-      },
-      {
-        label: "日期类型",
-        type: "select",
-        field: "componentProps.type",
-        componentProps: {
-          options: [
-            {
-              label: "日期",
-              value: "date",
-            },
-            {
-              label: "日期时间",
-              value: "datetime",
-            },
-            {
-              label: "日期范围",
-              value: "daterange",
-            },
-            {
-              label: "时间范围",
-              value: "datetimerange",
-            },
-            {
-              label: "月份",
-              value: "month",
-            },
-            {
-              label: "月份范围",
-              value: "monthrange",
-            },
-            {
-              label: "年份",
-              value: "year",
-            },
-
-            {
-              label: "季度",
-              value: "quarter",
-            },
-            {
-              label: "周",
-              value: "week",
-            },
-          ],
-        },
-        onChange({ values, value }) {
-          values.componentProps.defaultValue = null;
-          console.log(value);
-          if (["date", "daterange", "dates"].includes(value)) {
-            values.componentProps.format = "yyyy-MM-dd";
-            values.componentProps.valueFormat = "yyyy-MM-dd";
-          } else if (["week"].includes(value)) {
-            values.componentProps.format = null;
-            values.componentProps.valueFormat = "yyyy-MM-dd";
-          } else if (["quarter"].includes(value)) {
-            values.componentProps.format = null;
-            values.componentProps.valueFormat = "yyyy-MM-dd";
-          } else if (["month", "monthrange"].includes(value)) {
-            values.componentProps.format = "yyyy-MM";
-            values.componentProps.valueFormat = "yyyy-MM";
-          } else if (["datetime", "datetimerange"].includes(value)) {
-            values.componentProps.format = "yyyy-MM-dd HH:mm:ss";
-            values.componentProps.valueFormat = "yyyy-MM-dd HH:mm:ss";
-          } else if (["year"].includes(value)) {
-            values.componentProps.format = "yyyy";
-            values.componentProps.valueFormat = "yyyy";
-          }
-        },
-      },
-      {
-        label: "显示格式",
-        type: "input",
-        field: "componentProps.format",
-      },
-      {
-        label: "数据格式",
-        type: "input",
-        field: "componentProps.valueFormat",
-      },
-      {
-        label: "分割符",
-        type: "input",
-        field: "componentProps.separator",
-        componentProps: {
-          placeholder: "请输入",
-          clearable: true,
-        },
-        show: ({ values }) =>
-          ["daterange", "datetimerange", "monthrange"].includes(
-            values.componentProps.type
-          ),
-      },
-      {
-        label: "start框占位符",
-        type: "input",
-        field: "componentProps.startPlaceholder",
-        componentProps: {
-          placeholder: "请输入",
-          clearable: true,
-        },
-        show: ({ values }) =>
-          ["daterange", "datetimerange", "monthrange"].includes(
-            values.componentProps.type
-          ),
-      },
-      {
-        label: "end框占位符",
-        type: "input",
-        field: "componentProps.endPlaceholder",
-        componentProps: {
-          placeholder: "请输入",
-          clearable: true,
-        },
-        show: ({ values }) =>
-          ["daterange", "datetimerange", "monthrange"].includes(
-            values.componentProps.type
-          ),
-      },
-      {
-        label: "可清空",
-        type: "switch",
-        field: "componentProps.clearable",
-      },
-      {
-        label: "禁用",
-        type: "switch",
-        field: "componentProps.disabled",
-      },
-      {
-        label: "隐藏",
-        type: "switch",
-        field: "componentProps.hidden",
-      },
-      {
-        label: "表单校验",
-        type: "ERuleEditor",
-        layout: "vertical",
-        field: "rules",
-        describe: "校验规则需要配合表单使用",
-      },
-    ],
-    event: [
-      {
-        type: "change",
-        describe: "值变化时",
-      },
-    ],
-  },
-  bindModel: "formatted-value",
-} as ComponentConfigModel;

package/packages/ui/naiveUi/form/form.vue

@@ -1,98 +0,0 @@
-<template>
-  <div v-if="visible" class="form-main" style="height: 100%">
-    <NForm ref="form" :model="formData" v-bind="componentProps" style="height: 100%">
-      <slot name="edit-node">
-        <slot v-for="item in children" name="node" :componentSchema="item" />
-      </slot>
-    </NForm>
-  </div>
-</template>
-<script lang="ts" setup>
-import type { Ref, PropType } from 'vue'
-import { ref, computed, inject, reactive, provide, onMounted } from 'vue'
-import { NForm } from 'naive-ui/lib/form'
-import type { ComponentSchema, FormDataModel } from '@epic-designer/core/types/epic-designer'
-import { type PageManager } from '@epic-designer/utils'
-
-interface FormInstance extends InstanceType<typeof NForm> {
-  getData?: () => FormDataModel
-  clearValidate?: () => void
-  setData?: (FormDataModel) => void
-}
-
-const props = defineProps({
-  componentSchema: {
-    type: Object as PropType<ComponentSchema>,
-    require: true,
-    default: () => ({})
-  }
-})
-const pageManager = inject('pageManager', {}) as PageManager
-const form = ref<FormInstance | null>(null)
-const forms = inject('forms', {}) as Ref<{ [name: string]: FormInstance }>
-const visible = ref(true)
-const formData = reactive<FormDataModel>({})
-provide('formData', formData)
-pageManager.addFormData(formData, props.componentSchema?.componentProps?.name)
-/**
- * 获取表单数据
- * @param formName 表单name
- */
-function getData(): FormDataModel {
-  return formData
-}
-
-/**
- * 设置表单数据
- * @param data
- */
- function setData (data: FormDataModel) {
-  Object.assign(formData, data)
-}
-
-/**
- * 校验表单数据
- * @param data
- */
- function validate() {
-  return form.value?.validate()
-}
-
-/**
- * 清除的表单验证信息
- * @param data
- */
- function clearValidate() {
-  return form.value?.restoreValidation()
-}
-
-
-// form组件需要特殊处理
-onMounted(async (): Promise<void> => {
-  if (props.componentSchema?.type === 'form' && forms.value && form.value) {
-    const name = props.componentSchema?.componentProps?.name ??
-    props.componentSchema?.name ?? 'default' as string
-
-    forms.value[name] = form.value as any
-    form.value.getData = getData
-    form.value.setData = setData
-  }
-})
-
-const componentProps = computed(() => {
-  const recordProps = props.componentSchema!.componentProps
-  return recordProps
-})
-
-const children = computed(() => {
-  return props.componentSchema!.children ?? []
-})
-
-defineExpose({
-  form,
-  getData,
-  setData,
-  validate,
-  clearValidate
-})
-</script>

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

@@ -1,147 +0,0 @@
-import { type ComponentConfigModel } from "@epic-designer/utils";
-
-export default {
-  component: () => import("./form.vue"),
-  groupName: "表单",
-  icon: "icon--epic--list-alt-outline-rounded",
-  sort: 600,
-  defaultSchema: {
-    label: "表单",
-    type: "form",
-    componentProps: {
-      name: "default",
-      labelWidth: 100,
-      labelCol: {
-        span: 5,
-      },
-      wrapperCol: {
-        span: 19,
-      },
-      hideRequiredMark: false
-    },
-    children: [],
-  },
-  config: {
-    attribute: [
-      {
-        label: "name",
-        type: "input",
-        field: "componentProps.name",
-      },
-      {
-        label: "标签宽度",
-        type: "EInputSize",
-        field: "componentProps.labelWidth",
-      },
-      {
-        label: "标签位置",
-        type: "select",
-        field: "componentProps.labelPlacement",
-        componentProps: {
-          placeholder: "请选择",
-          clearable: true,  
-          options: [
-            {
-              label: "左边",
-              value: "left",
-            },
-            {
-              label: "顶部",
-              value: "top",
-            },
-          ],
-        },
-      },
-      {
-        label: "标签对齐方式",
-        type: "select",
-        field: "componentProps.labelAlign",
-        componentProps: {
-          placeholder: "请选择",
-          clearable: true,
-          options: [
-            {
-              label: "左边",
-              value: "left",
-            },
-            {
-              label: "右边",
-              value: "right",
-            },
-          ],
-        },
-      },
-      {
-        label: "必填星号位置",
-        type: "select",
-        field: "componentProps.requireMarkPlacement",
-        componentProps: {
-          placeholder: "请选择",
-          clearable: true,
-          options: [
-            {
-              label: "左边",
-              value: "left",
-            },
-            {
-              label: "右边",
-              value: "right",
-            },
-          ],
-        },
-      },
-      {
-        label: "表单尺寸",
-        type: "select",
-        field: "componentProps.size",
-        componentProps: {
-          placeholder: "请选择",
-          clearable: true,
-          options: [
-            {
-              label: "大号",
-              value: "large",
-            },
-            {
-              label: "中等",
-              value: "medium",
-            },
-            {
-              label: "小型",
-              value: "small",
-            },
-          ],
-        },
-      },
-      {
-        label: "行内模式",
-        type: "switch",
-        field: "componentProps.inline",
-      },
-      {
-        label: "禁用",
-        type: "switch",
-        field: "componentProps.disabled",
-      },
-      {
-        label: '隐藏',
-        type: 'switch',
-        field: 'componentProps.hidden'
-      },
-    ],
-    action: [
-      {
-        type: "getData",
-        describe: "获取表单数据",
-      },
-      {
-        type: "setData",
-        describe: "设置表单数据",
-      },
-      {
-        type: "validate",
-        describe: "校验表单",
-      },
-    ],
-  },
-} as ComponentConfigModel;

package/packages/ui/naiveUi/form-item/formItem.vue

@@ -1,15 +0,0 @@
-<template>
-  <NFormItem
-    ref="form"
-    v-bind="attrs"
-    :path="attrs.field"
-  >
-    <slot />
-  </NFormItem>
-</template>
-<script lang="ts" setup>
-import { ref, useAttrs } from 'vue'
-import { NFormItem } from 'naive-ui/lib/form'
-const attrs = useAttrs() as any
-const form = ref<any>(null)
-</script>

package/packages/ui/naiveUi/form-item/index.ts

@@ -1,10 +0,0 @@
-import { type ComponentConfigModel } from '@epic-designer/utils'
-
-export default {
-  component: () => import('./formItem.vue'),
-  defaultSchema: {
-    label: '表单项',
-    type: 'form-item'
-  },
-  config: {}
-} as ComponentConfigModel

package/packages/ui/naiveUi/index.less

@@ -1,33 +0,0 @@
-// 折叠面板样式重置
-.n-collapse .n-collapse-item:first-child,
-.n-collapse .n-collapse-item {
-  > .n-collapse-item__header {
-    padding-top: 16px;
-    .n-collapse-item__header-main {
-      padding-left: 8px;
-    }
-  }
-}
-
-// 适配k-input-size样式
-.epic-input-size > .n-input-wrapper {
-  padding-right: 0;
-}
-
-.epic-modal-n {
-  margin: 0 auto 0 !important;
-  height: calc(100vh - 50px);
-  .n-card-header {
-    padding: 16px 16px 0;
-  }
-
-  .n-card__content {
-    padding: 0;
-    height: calc(100% - 56px);
-    .epic-modal-main {
-      height: calc(100% - 56px);
-      overflow: auto;
-      padding: 12px;
-    }
-  }
-}