epic-designer-gold 0.0.3 → 0.0.4

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

@@ -0,0 +1,72 @@
+<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

@@ -0,0 +1,136 @@
+<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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,17 @@
+.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

@@ -0,0 +1,157 @@
+<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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,150 @@
+<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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,27 @@
+<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>