epic-designer-gold 0.0.4 → 0.0.6

package/packages/core/extensions/EOptionsEditor/optionItem.vue

@@ -1,72 +0,0 @@
-<template>
-  <draggable v-model="innerValue" item-key="id" :component-data="{
-    type: 'transition-group',
-  }" group="option-list" handle=".handle" :animation="200">
-    <template #item="{ element: option, index }">
-      <div>
-        <div :class="tree ? 'grid-cols-[16px_auto_auto_16px_16px]' : 'grid-cols-[16px_auto_auto_16px]'"
-          class="option-item text-16px grid text-$epic-text-secondary gap-2 items-center mb-2">
-          <EIcon class="mr-2 cursor-move handle" name="icon--epic--drag" />
-          <Input v-model="option.label" v-model:value="option.label" placeholder="label"></Input>
-          <Input v-model="option.value" v-model:value="option.value" placeholder="value"></Input>
-          <EIcon v-if="tree" class="cursor-pointer text-lg!" name="icon--epic--add-rounded" @click="handleAddChildren(option)" />
-          <EIcon class="hover:text-red cursor-pointer" name="icon--epic--delete-outline-rounded" @click="handleRemove(index)" />
-        </div>
-        <div class="pl-4" v-if="option.children">
-          <EOptionItem v-model="option.children" />
-        </div>
-      </div>
-    </template>
-  </draggable>
-</template>
-
-<script lang="ts" setup>
-import draggable from 'vuedraggable'
-import { pluginManager } from '@epic-designer/utils'
-import { inject } from 'vue';
-import EIcon from '../../components/icon'
-import { useVModel } from '@vueuse/core'
-
-interface Option {
-  label: string,
-  value: string,
-  children?: Option[]
-}
-
-defineOptions({
-  name: 'EOptionItem'
-})
-
-const props = defineProps<{
-  modelValue: Option[],
-}>()
-const Input = pluginManager.getComponent('input')
-const tree = inject('tree', false)
-const emit = defineEmits(['update:modelValue'])
-const innerValue = useVModel(props, 'modelValue', emit)
-
-
-/**
- *  添加选项子选项
- */
-function handleAddChildren(option: Option) {
-  const childrenOption: Option = {
-    label: "",
-    value: ""
-  }
-
-  if (option.children) {
-    option.children.push(childrenOption)
-  } else {
-    option.children = [childrenOption]
-  }
-}
-
-/**
- * 删除选项
- * @param index 
- */
-function handleRemove(index: number) {
-  innerValue.value = innerValue.value.filter((_item, i) => i !== index)
-}
-</script>

package/packages/core/extensions/ERuleEditor/ERuleItem.vue

@@ -1,136 +0,0 @@
-<template>
-  <div
-    class="rule-item-main bg-white m-t-2 p-2 rounded  border border-solid border-gray-200 hover:border-primary transition-all relative">
-    <template v-for="(componentSchema, index) in ruleItemSchemas" :key="index">
-      <div v-if="componentSchema.show ? componentSchema.show() : true" class="flex m-t-2 first:m-0">
-        <div class="epic-attr-label" title="校验时机">
-          {{ componentSchema.label }}
-        </div>
-        <div class="epic-attr-input">
-          <ENode v-model="modelRule[componentSchema.model]" :componentSchema="{ ...componentSchema, noFormItem: true }" @change="handleUpdate" />
-        </div>
-      </div>
-    </template>
-    <div
-      class="rule-btn-delete absolute top-0 text-md right-0 transition-all w-24px h-24px cursor-pointer rounded-bl-2 flex justify-center items-center color-white"
-      @click="handleDelete">
-      <EIcon name="icon--epic--delete-outline-rounded" />
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { FormItemRule } from './types'
-import { computed, inject } from 'vue'
-import { PageManager } from '@epic-designer/utils'
-import ENode from '../../components/node/index'
-import EIcon from '../../components/icon'
-import { typeOptions, triggerOptions, lenTypeOptions } from './data'
-const emit = defineEmits(['change', 'delete', 'update:rule'])
-const props = defineProps<{
-  rule: FormItemRule,
-}>()
-
-const modelRule = computed({
-  get() {
-    return props.rule
-  },
-  set(value) {
-    emit('update:rule', value)
-  }
-})
-
-const pageManager = inject('pageManager', {}) as PageManager
-
-const methodOptions = computed(() => {
-  return Object.entries(pageManager.funcs.value)
-    .filter(([key, value]) => typeof value === 'function')
-    .map(([label]) => ({ label, value: label }))
-})
-
-const ruleItemSchemas = [
-  {
-    type: 'select',
-    label: '校验时机',
-    model: 'trigger',
-    componentProps: { options: triggerOptions, placeholder: '校验时机', multiple: true, mode: 'multiple' }
-  },
-  {
-    type: 'switch',
-    label: '自定义规则',
-    model: 'isValidator'
-  },
-  {
-    type: 'select',
-    label: '校验函数',
-    model: 'validator',
-    show() { return Boolean(modelRule.value.isValidator) },
-    componentProps: { options: methodOptions.value, placeholder: '校验函数' }
-  },
-  {
-    type: 'select',
-    label: '类型',
-    model: 'type',
-    show() { return !modelRule.value.isValidator },
-    componentProps: { options: typeOptions, placeholder: '类型' }
-  },
-  {
-    type: 'input',
-    label: '正则校验',
-    model: 'pattern',
-    show() { return !modelRule.value.isValidator },
-    componentProps: { placeholder: '正则校验' }
-  },
-  {
-    type: 'number',
-    label: '字段长度',
-    model: 'len',
-    show() { return lenTypeOptions.includes(modelRule.value.type ?? '') },
-    componentProps: { min: 0, placeholder: '字段长度' }
-  },
-  {
-    type: 'number',
-    label: '最小长度',
-    model: 'min',
-    show() { return lenTypeOptions.includes(modelRule.value.type ?? '') },
-    componentProps: { min: 0, placeholder: '最小长度' }
-  },
-  {
-    type: 'number',
-    label: '最大长度',
-    model: 'max',
-    show() { return lenTypeOptions.includes(modelRule.value.type ?? '') },
-    componentProps: { min: 0, placeholder: '最大长度' }
-  },
-  {
-    type: 'input',
-    label: '校验信息',
-    model: 'message',
-    componentProps: { placeholder: '校验信息' }
-  }
-]
-
-/**
- * 更新校验规则
- */
-function handleUpdate() {
-  const v = modelRule.value
-  if (v.isValidator) {
-    delete v.type
-    delete v.pattern
-    delete v.len
-    delete v.min
-    delete v.max
-  } else {
-    delete v.validator
-  }
-  emit('change', v)
-}
-
-/**
- * 删除校验规则
- */
-function handleDelete() {
-  emit('delete')
-}
-
-</script>

package/packages/core/extensions/ERuleEditor/data.ts

@@ -1,24 +0,0 @@
-export const typeOptions = [
-  { label: "string", value: "string" },
-  { label: "number", value: "number" },
-  { label: "boolean", value: "boolean" },
-  { label: "method", value: "method" },
-  { label: "regexp", value: "regexp" },
-  { label: "integer", value: "integer" },
-  { label: "float", value: "float" },
-  { label: "array", value: "array" },
-  { label: "object", value: "object" },
-  // { label: 'enum', value: 'enum' },
-  { label: "date", value: "date" },
-  { label: "url", value: "url" },
-  { label: "hex", value: "hex" },
-  { label: "email", value: "email" },
-  { label: "any", value: "any" },
-];
-
-export const triggerOptions = [
-  { label: "change", value: "change" },
-  { label: "blur", value: "blur" },
-];
-
-export const lenTypeOptions = ["string", "number", "url", "array", "email"];

package/packages/core/extensions/ERuleEditor/index.less

@@ -1,17 +0,0 @@
-.rule-item-main {
-  background-color: var(--epic-view-color);
-  border-color: var(--epic-border-color);
-  &:hover{
-  border-color: var(--epic-primary-color);
-  }
-  .rule-btn-delete {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  &:hover > .rule-btn-delete {
-    opacity: 1;
-    pointer-events: all;
-    background-color: var(--epic-primary-color);
-  }
-}

package/packages/core/extensions/ERuleEditor/index.vue

@@ -1,157 +0,0 @@
-<template>
-  <div>
-    <div
-      class="rule-item-main m-t-2 p-2 rounded border border-solid transition-all relative"
-    >
-      <template v-for="(componentSchema, index) in requiredRuleSchemas" :key="index">
-        <div
-          v-if="componentSchema.show ? componentSchema.show() : true"
-          class="flex m-t-2 first:m-0"
-        >
-          <div class="epic-attr-label">
-            {{ componentSchema.label }}
-          </div>
-          <div class="flex-1">
-            <ENode
-              v-model="requiredRule[componentSchema.model]"
-              :componentSchema="{ ...componentSchema, noFormItem: true }"
-              @change="handleUpdate"
-            />
-          </div>
-        </div>
-      </template>
-    </div>
-    <ERuleItem
-      v-for="(item, index) in rules"
-      :key="index"
-      v-model:rule="rules[index]"
-      @delete="handleDelete(index)"
-      @change="handleUpdate"
-    />
-    <Button class="m-t-2" @click="handleAdd"> 添加规则 </Button>
-  </div>
-</template>
-<script lang="ts" setup>
-import { pluginManager, deepClone } from "@epic-designer/utils";
-import { ref, watchEffect, PropType } from "vue";
-import { FormItemRule } from "./types";
-import ERuleItem from "./ERuleItem.vue";
-import ENode from "../../components/node/index";
-import { triggerOptions, typeOptions } from "./data";
-import { useVModel } from "@vueuse/core";
-const Button = pluginManager.getComponent("button");
-const props = defineProps({
-  ruleType: {
-    type: String,
-    default: "string",
-  },
-  modelValue: {
-    type: Array as PropType<FormItemRule[] | undefined>,
-    default: undefined,
-  },
-});
-const emits = defineEmits(["update:modelValue"]);
-const innerValue = useVModel(props, "modelValue", emits);
-const requiredRule = ref<FormItemRule>({
-  required: false,
-  message: "必填项",
-  type: props.ruleType,
-  trigger: ["change"],
-});
-
-const requiredRuleSchemas = [
-  {
-    type: "switch",
-    label: "必填项",
-    model: "required",
-  },
-  {
-    type: "select",
-    label: "校验时机",
-    model: "trigger",
-    show() {
-      return Boolean(requiredRule.value.required);
-    },
-    componentProps: {
-      options: triggerOptions,
-      placeholder: "校验时机",
-      multiple: true,
-      mode: "multiple",
-    },
-  },
-  {
-    type: "select",
-    label: "类型",
-    model: "type",
-    show() {
-      return Boolean(requiredRule.value.required);
-    },
-    componentProps: { options: typeOptions, placeholder: "类型" },
-  },
-  {
-    type: "input",
-    label: "校验信息",
-    model: "message",
-    show() {
-      return Boolean(requiredRule.value.required);
-    },
-    componentProps: { placeholder: "校验信息" },
-  },
-];
-
-const rules = ref<FormItemRule[]>([]);
-
-watchEffect(() => {
-  if (!innerValue.value) return;
-  rules.value = [];
-  innerValue.value.forEach((item) => {
-    // 必填项单独存储
-    if (typeof item.required !== "undefined") {
-      requiredRule.value = item;
-    } else {
-      rules.value.push(item);
-    }
-  });
-});
-
-/**
- * 新增检验规则
- */
-function handleAdd() {
-  rules.value.push({
-    message: "",
-    type: props.ruleType,
-    trigger: ["change"],
-  });
-  handleUpdate();
-}
-
-/**
- * 更新校验规则
- */
-function handleUpdate() {
-  // 存在必填项时,合并其他规则
-  if (requiredRule.value.required) {
-    innerValue.value = deepClone([...rules.value, requiredRule.value]);
-    return;
-  }
-
-  // 存在其他规则
-  if (rules.value.length) {
-    innerValue.value = deepClone(rules.value);
-    return;
-  }
-
-  // 没有任何校验规则
-  innerValue.value = undefined;
-}
-
-/**
- * 通过下标删除校验规则项
- * @param index
- */
-function handleDelete(index: number) {
-  rules.value.splice(index, 1);
-  handleUpdate();
-}
-</script>

package/packages/core/extensions/ERuleEditor/types.ts

@@ -1,17 +0,0 @@
-export interface RuleItem {
-  required?: boolean
-  type?: string
-  pattern?: RegExp | string
-  min?: number
-  max?: number
-  len?: number
-  enum?: Array<string | number | boolean | null | undefined>
-  whitespace?: boolean
-  validator?: string
-  isValidator?: boolean
-  message?: string | ((a?: string) => string)
-}
-export interface FormItemRule extends RuleItem {
-  trigger?: string | string[]
-  [model: string]: any
-}

package/packages/core/extensions/MonacoEditor/index.ts

@@ -1,31 +0,0 @@
-import { type ComponentConfigModel } from '@epic-designer/utils'
-export default {
-  component: async () => await import('./index.vue'),
-  defaultSchema: {
-    label: '代码编辑器',
-    type: 'monacoEditor',
-    field: 'monacoEditor',
-    icon: 'epic-icon-write',
-    input: true
-  },
-  config: {
-    attribute: [
-      {
-        label: '字段名',
-        type: 'input',
-        field: 'field'
-      },
-      {
-        label: '标题',
-        type: 'input',
-        field: 'label'
-      },
-      {
-        label: '默认值',
-        type: 'monacoEditor',
-        field: 'componentProps.defaultValue'
-      }
-    ]
-  },
-  bindModel: 'model-value'
-} as ComponentConfigModel

package/packages/core/extensions/MonacoEditor/index.vue

@@ -1,150 +0,0 @@
-<template>
-  <div ref="editContainer" class="epic-code-editor" />
-</template>
-<script setup lang="ts">
-import { ref, watch, nextTick, onMounted } from "vue";
-import * as monaco from "monaco-editor";
-import type { editor } from "monaco-editor";
-import { useTheme } from "@epic-designer/hooks";
-const props = withDefaults(
-  defineProps<{
-    language?: string;
-    readOnly?: boolean;
-    valueFormat?: string;
-    modelValue?: any;
-    config?: editor.IStandaloneEditorConstructionOptions;
-    lineNumbers?: "on" | "off";
-    autoToggleTheme?: boolean;
-    theme?: "vs-light" | "vs-dark" | "hc-black";
-  }>(),
-  {
-    language: "json",
-    readOnly: false,
-    valueFormat: "string",
-    lineNumbers: "on",
-    theme: "vs-light",
-    config: () => ({
-      selectOnLineNumbers: true,
-      minimap: {
-        enabled: false,
-      },
-    }),
-  }
-);
-
-const emit = defineEmits(["update:modelValue"]);
-
-const editContainer = ref<HTMLElement | null>(null);
-
-let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null;
-const { isDark } = useTheme();
-
-function handleToggleTheme() {
-  if (isDark.value) {
-    monaco.editor.setTheme("vs-dark");
-  } else {
-    monaco.editor.setTheme("vs-light");
-  }
-}
-
-/**
- * 设置文本
- * @param text
- */
-function setValue(text: string) {
-  monacoEditor?.setValue(text || "");
-}
-
-/**
- * 光标处插入文本
- * @param text
- */
-function insertText(text: string) {
-  // 获取光标位置
-  const position = monacoEditor?.getPosition();
-  // 未获取到光标位置信息
-  if (!position) {
-    return;
-  }
-  // 插入
-  monacoEditor?.executeEdits("", [
-    {
-      range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
-      text,
-    },
-  ]);
-  // 设置新的光标位置
-  monacoEditor?.setPosition({ ...position, column: position.column + text.length });
-  // 重新聚焦
-  monacoEditor?.focus();
-}
-
-onMounted(() => {
-  monacoEditor = monaco.editor.create(editContainer.value as HTMLElement, {
-    value: getValue(),
-    ...props.config,
-    language: props.language,
-    readOnly: props.readOnly,
-    lineNumbers: props.lineNumbers,
-    theme: props.theme,
-    scrollBeyondLastLine: false,
-    scrollbar: {
-      verticalScrollbarSize: 10,
-      horizontalScrollbarSize: 10,
-    },
-    automaticLayout: true,
-  });
-
-  // 自动切换主题
-  if (props.autoToggleTheme) {
-    watch(
-      () => isDark.value,
-      () => {
-        nextTick(() => handleToggleTheme());
-      },
-      {
-        immediate: true,
-      }
-    );
-  }
-
-  // 获取值
-  function getValue() {
-    // valueFormat 为json 格式，需要转换处理
-    if (props.valueFormat === "json") {
-      if (props.modelValue) {
-        return JSON.stringify(props.modelValue, null, 2);
-      }
-    }
-    return props.modelValue ?? "";
-  }
-
-  // 监听值变化
-  monacoEditor.onDidChangeModelContent(() => {
-    const currenValue = monacoEditor?.getValue();
-
-    // valueFormat 为json 格式，需要转换处理
-    if (props.valueFormat === "json" && currenValue) {
-      emit("update:modelValue", JSON.parse(currenValue));
-      return;
-    }
-
-    emit("update:modelValue", currenValue ?? "");
-  });
-});
-
-defineExpose({
-  setValue,
-  insertText,
-});
-</script>
-<style lang="less" scoped>
-.epic-code-editor {
-  width: 100%;
-  min-height: 150px;
-
-  :deep(.monaco-editor) {
-    height: 100%;
-  }
-}
-</style>

package/packages/core/extensions/Page/index.ts

@@ -1,23 +0,0 @@
-import { type ComponentConfigModel } from "@epic-designer/utils";
-
-export default {
-  component: async () => await import("./index.vue"),
-  defaultSchema: {
-    label: "页面",
-    type: "page",
-    componentProps: {},
-    children: [],
-  },
-  config: {
-    attribute: [
-      {
-        label: "页面名称",
-        type: "input",
-        componentProps: {
-          placeholder: "请输入",
-        },
-        field: "componentProps.name",
-      },
-    ],
-  },
-} as ComponentConfigModel;

package/packages/core/extensions/Page/index.vue

@@ -1,27 +0,0 @@
-<template>
-  <div
-    class="h-full box-border wh-full!"
-  >
-    <slot name="edit-node">
-      <slot
-        v-for="item in children"
-        name="node"
-        :componentSchema="item"
-      />
-    </slot>
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { ComponentSchema } from '../../types/epic-designer'
-
-const props = defineProps<{
-  componentSchema:ComponentSchema
-}>()
-
-
-const children = computed(() => {
-  return props.componentSchema.children ?? []
-})
-
-</script>