epic-designer-gold 0.0.1 → 0.0.2

package/packages/core/components/tree/src/treeNodeItem.vue

@@ -1,120 +0,0 @@
-<template>
-  <li
-    class="epic-tree-node"
-    :class="{
-      expanded: props.schema.children?.length,
-      'level-1': props.schema.id === pageSchema.schemas[0]?.id,
-    }"
-  >
-    <a>
-      <span
-        v-if="
-          props.schema.children?.length && props.schema.id !== pageSchema.schemas[0]?.id
-        "
-        class="icon-expanded"
-        :class="{ expanded }"
-        @click="handleExpanded"
-      >
-        <EIcon name="icon--epic--caret-right-outlined" />
-      </span>
-      <TreeNodeText />
-    </a>
-    <ETreeNodes
-      v-if="props.schema.children?.length"
-      class="epic-tree-sublist"
-      :class="{ expanded }"
-      v-model:schemas="props.schema.children"
-      :parentSchema="props.schema"
-    />
-  </li>
-</template>
-<script lang="ts" setup>
-import { ComponentSchema, PageSchema } from "../../../types/epic-designer";
-import EIcon from "../../icon";
-import { inject, computed, Ref, h, defineComponent, Slots } from "vue";
-import { pluginManager } from "@epic-designer/utils";
-import ETreeNodes from "./treeNodes.vue";
-defineOptions({
-  name: "ETreeNodeItem",
-});
-
-const props = defineProps<{
-  schema: ComponentSchema;
-}>();
-
-const slots = inject("slots", {}) as Slots;
-const pageSchema = inject("pageSchema", {}) as PageSchema;
-
-const expandedKeys = inject("expandedKeys") as Ref<string[]>;
-const treeProps = inject("treeProps") as any;
-const selectedKeys = inject("selectedKeys") as Ref<string[]>;
-
-const handleSelect = inject("handleSelect") as (
-  id: string,
-  componentSchema: ComponentSchema
-) => {};
-
-const expanded = computed(() => {
-  return expandedKeys.value.includes(props.schema.id ?? "");
-});
-
-const TreeNodeText = defineComponent({
-  setup() {
-    return () =>
-      h(
-        "span",
-        {
-          class: {
-            text: true,
-            hover: treeProps.hoverKey === props.schema.id,
-            checked: selectedKeys.value.includes(props.schema.id!),
-          },
-          onClick: () => handleSelect(props.schema.id!, props.schema),
-        },
-        slots["tree-node"]?.(props) ??
-          h(
-            "span",
-            { class: "epic-text-padding flex" },
-            {
-              default: () => [
-                h(
-                  "span",
-                  { class: "max-w-full truncate" },
-                  props.schema.label ??
-                    pluginManager.getComponentConfingByType(props.schema.type)
-                      ?.defaultSchema.label
-                ),
-                h(
-                  "span",
-                  { class: "epic-node-type-text flex-1 w-0 truncate" },
-                  props.schema.id
-                ),
-              ],
-            }
-          )
-      );
-  },
-});
-
-function handleExpanded() {
-  const id = props.schema.id;
-  if (!id) {
-    return false;
-  }
-
-  if (expandedKeys.value.includes(id)) {
-    expandedKeys.value = expandedKeys.value.filter((item) => item !== id);
-  } else {
-    expandedKeys.value.push(id);
-  }
-}
-
-function init() {
-  const id = props.schema.id;
-  if (!id || !props.schema.children?.length) {
-    return false;
-  }
-  expandedKeys.value.push(id);
-}
-init();
-</script>

package/packages/core/components/tree/src/treeNodes.vue

@@ -1,70 +0,0 @@
-<template>
-  <draggable v-if="!pluginManager.getComponentConfingByType(props.parentSchema?.type || '')?.editConstraints?.childImmovable"
-    v-model="modelSchemas" item-key="id" :component-data="{
-    }" class="epic-draggable-range" v-bind="{
-      animation: 200,
-      tag: 'ul',
-      group: 'tree-draggable',
-      ghostClass: 'moveing',
-      draggable: '.draggable-item',
-      disabled: !treeProps.draggable || modelSchemas[0]?.id === pageSchema.schemas[0]?.id
-    }" @start="handleSelect($event.oldIndex)">
-    <template #item="{ element, index }">
-      <ETreeNodeItem :class="isDraggable(element)" :key="element.id" :schema="element" />
-    </template>
-  </draggable>
-
-  <ul v-else>
-    <ETreeNodeItem v-for="( element ) in modelSchemas" :key="element.id" :schema="element" />
-  </ul>
-</template>
-<script lang="ts" setup>
-import { computed, inject } from 'vue'
-import { ComponentSchema, Designer, PageSchema } from '../../../types/epic-designer'
-import ETreeNodeItem from './treeNodeItem.vue'
-import draggable from 'vuedraggable'
-import { pluginManager } from '@epic-designer/utils'
-
-defineOptions({
-  name: 'ETreeNodes'
-})
-
-const designer = inject('designer') as Designer
-const pageSchema = inject('pageSchema') as PageSchema
-const treeProps = inject('treeProps') as any
-
-const props = defineProps<{
-  schemas: ComponentSchema[],
-  parentSchema?: ComponentSchema
-}>()
-const emit = defineEmits(['update:schemas'])
-const modelSchemas = computed({
-  get() {
-    // 判断props.schemas是否存在值
-    return props.schemas
-  },
-  set(e) {
-    emit('update:schemas', e)
-  }
-})
-
-/**
- * 选中点击节点元素
- * @param index
- */
-function handleSelect(index: number) {
-  designer.setDisableHover(true)
-  designer.setCheckedNode(modelSchemas.value![index])
-}
-
-function isDraggable(schema: ComponentSchema) {
-  // 判断当前节点类型是否允许拖拽
-  if (schema.id === pageSchema.schemas[0]?.id || pluginManager.getComponentConfingByType(schema.type)?.editConstraints?.immovable) {
-    // 禁止拖拽
-    return 'unmover-item'
-  }
-
-  return 'draggable-item'
-}
-
-</script>

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

@@ -1,177 +0,0 @@
-.epic-event-item {
-  .epic-event-info {
-    display: flex;
-    background-color: var(--epic-event-item-color);
-    padding: 0 12px;
-    justify-content: space-between;
-    align-items: center;
-    height: 36px;
-    border: 1px solid var(--epic-border-color);
-    color: var(--epic-text-main);
-    margin: 0px -1px -1px 0px;
-  }
-
-  .epic-event-btn>span {
-    cursor: pointer;
-  }
-
-  .epic-action-editor-main {
-    .epic-editor-item {
-      margin: 8px 0px;
-      border: 1px solid var(--epic-border-color);
-      color: var(--epic-text-main);
-      padding: 8px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-
-  }
-}
-
-.epic-modal-action-main {
-  display: flex;
-  height: 100%;
-}
-
-.epic-modal-left-panel,
-.epic-script-left-panel {
-  width: 240px;
-  border: 1px solid var(--epic-border-color);
-  overflow: auto;
-  padding: 8px;
-  box-sizing: border-box;
-
-  .fun-btn {
-    border: 1px solid var(--epic-border-color);
-    padding: 8px 12px;
-    border-radius: 3px;
-    cursor: pointer;
-    margin-bottom: 6px;
-
-    &.checked {
-      background-color: var(--epic-primary-hover-color);
-      border-color: var(--epic-primary-color);
-      color: var(--epic-primary-color);
-    }
-  }
-}
-
-.epic-modal-right-panel,
-.epic-script-right-panel {
-  flex: 1;
-  border: 1px solid var(--epic-border-color);
-  margin-left: 8px;
-  padding: 8px;
-
-  .action-select {
-    margin-right: 8px;
-    min-width: 175px;
-  }
-}
-
-.epic-script-edit {
-  display: flex;
-
-  .epic-script-left-panel {
-    .epic-tree-select {
-      height: 240px;
-      overflow: auto;
-    }
-
-    .tree-node-item,
-    .epic-action-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0 8px;
-
-      .action {
-        opacity: 0;
-        pointer-events: none;
-        color: var(--epic-primary-color);
-      }
-
-      &:hover .action {
-        opacity: 1;
-        pointer-events: all;
-      }
-    }
-
-
-  }
-
-  .epic-script-right-panel {
-    // width: 240px;
-    // flex: none;
-  }
-}
-
-.epic-action-select {
-  border-top: 1px solid var(--epic-border-color);
-  margin-top: 12px;
-  padding: 8px;
-  padding-right: 0;
-  overflow: auto;
-
-  .epic-action-item {
-    height: 32px;
-    line-height: 32px;
-    padding-left: 12px;
-    border-radius: 3px;
-    cursor: pointer;
-    border: 1px solid transparent;
-
-    &:hover {
-      background-color: var(--epic-primary-hover-color);
-      color: var(--epic-primary-color);
-    }
-
-    &.checked {
-      background-color: var(--epic-primary-hover-color);
-      border-color: var(--epic-primary-color);
-      color: var(--epic-primary-color);
-    }
-  }
-}
-
-.epic-editor-item {
-  display: flex;
-  align-items: center;
-  padding-top: 6px;
-
-  .epic-action-box {
-    display: flex;
-    align-items: center;
-
-
-    .epic-del-btn {
-      width: 30px;
-      height: 100%;
-      text-align: center;
-      cursor: pointer;
-
-      &:hover {
-        color: #f22;
-      }
-    }
-
-    .epic-edit-btn {
-      width: 30px;
-      height: 100%;
-      text-align: center;
-      cursor: pointer;
-
-      &:hover {
-        color: var(--epic-primary-color);
-      }
-    }
-  }
-}
-
-.add-btn {
-  cursor: pointer;
-  margin-top: 6px;
-  color: var(--epic-primary-color);
-}

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

@@ -1,160 +0,0 @@
-<template>
-  <Collapse v-model="activeNames" v-model:activeKey="activeNames" v-model:expanded-names="activeNames">
-    <CollapseItem v-for="(item) in filterEventList" :key="item.title" :title="item.title" :header="item.title"
-      :name="item.title">
-      <EActionEditorItem v-model="modelValueComputed" :item-events="item.events" :all-events="allEvents"
-        :events="events" @add="handleOpen" @edit="handleOpenEdit" />
-    </CollapseItem>
-  </Collapse>
-  <EActionModal ref="EActionModalRef" @add="handleAdd" @edit="handleEdit" />
-</template>
-
-<script lang="ts" setup>
-import { PropType, computed, ref, nextTick, toRaw, watch } from 'vue'
-import EActionEditorItem from './src/EActionEditorItem.vue'
-import { pluginManager } from '@epic-designer/utils'
-import EActionModal from './src/EActionModal.vue'
-const Collapse = pluginManager.getComponent('Collapse')
-const CollapseItem = pluginManager.getComponent('CollapseItem')
-
-const EActionModalRef = ref<any>(null)
-let editIndex = 0
-const props = defineProps({
-  eventList: {
-    type: Array as PropType<any>,
-    default: () => []
-  },
-  modelValue: {
-    type: Object as PropType<any>
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-const modelValueComputed = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value) {
-    emit('update:modelValue', value)
-  }
-})
-const activeNames = ref<string[]>([])
-
-// 过滤无事件
-const filterEventList = computed(() => {
-  return props.eventList.filter((item: { events: string | any[]; }) => item.events.length)
-})
-
-const allEvents = computed(() => {
-  return props.eventList.map((item: { events: any; }) => item.events).flat()
-})
-
-
-
-
-const events = ref<any>({})
-
-
-
-
-allEvents.value.forEach((item: any) => {
-
-  events.value[item.type] = computed({
-    get() {
-      return modelValueComputed.value?.[item.type] ?? []
-    },
-    set(e) {
-      if (e && e.length) {
-        modelValueComputed.value[item.type] = e.map(item => toRaw(item))
-      } else {
-        // 事件动作为空时，则清除该事件列表
-        delete modelValueComputed.value[item.type]
-      }
-    }
-  })
-
-})
-
-// 监视 filterEventList.value 的变化
-watch(() => filterEventList.value, (e) => {
-  // 当 filterEventList.value 变化时执行回调函数
-  if (e.length) {
-    // 如果 filterEventList.value 不为空数组
-    // 过滤出满足条件的事件，并将它们的标题存储在 activeNames.value 中
-    activeNames.value = e.filter(item => {
-      // 对于每个事件项，检查其包含的事件类型
-      for (let i = 0; i < item.events.length; i++) {
-        const type = item.events[i].type
-        // 如果 events.value[type] 不为空数组，则返回 true
-        if (events.value[type].length) {
-          return true
-        }
-      }
-      // 如果事件项中没有任何一个事件类型满足条件，则返回 false
-      return false
-    }).map(item => item.title) // 将满足条件的事件项的标题映射成一个新的数组
-  }
-}, {
-  // 配置选项
-  immediate: true // 立即执行一次回调函数
-})
-
-
-
-let currentType: string = ''
-/**
- * 打开动作配置窗口
- * @param type
- */
-function handleOpen(type: string) {
-  EActionModalRef.value?.handleOpen()
-  currentType = type
-}
-
-
-/**
- * 打开动作配置窗口-编辑
- * @param {number} index - 要编辑事件的索引
- * @param {string} type - 事件类型
- * @param {any} action - 要执行的动作
- */
-function handleOpenEdit(index: number, type: string, action) {
-  // 如果 EActionModalRef.value 不为 null 或 undefined，则调用其 handleOpenEdit 方法
-  EActionModalRef.value?.handleOpenEdit(action)
-
-  // 将要编辑的事件的索引赋值给 editIndex
-  editIndex = index
-
-  // 将事件的类型赋值给 currentType
-  currentType = type
-}
-
-/**
- * 编辑事件的函数
- * @param {any} action - 动作数据
- */
-function handleEdit(action: any) {
-  // 将编辑后的动作替换掉 events.value[currentType][editIndex]
-  events.value[currentType][editIndex] = action
-
-  // 更新 modelValueComputed.value[currentType]，使用新的数组代替原始数组
-  modelValueComputed.value[currentType] = [...(events.value[currentType] ?? [])]
-}
-
-
-/**
- * 添加组件事件
- * @param {any} action - 要执行的动作
- */
-function handleAdd(action: any) {
-  // 如果 modelValueComputed.value 为 null 或 undefined，则创建一个新的对象
-  if (!modelValueComputed.value) {
-    modelValueComputed.value = { [currentType]: [...(events.value[currentType] ?? []), action] }
-    return
-  }
-
-  // 否则，直接在 modelValueComputed.value[currentType] 中添加新的动作
-  modelValueComputed.value[currentType] = [...(events.value[currentType] ?? []), action]
-}
-
-</script>

package/packages/core/extensions/EActionEditor/src/EActionEditorItem.vue

@@ -1,133 +0,0 @@
-<template>
-  <div v-for="item in itemEvents" :key="item.type" class="epic-event-item">
-    <div class="epic-event-info">
-      <div class="epic-event-label" :title="item.describe">
-        {{ item.describe }}
-      </div>
-      <div class="epic-event-btn text-lg flex items-center text-$epic-text-secondary">
-        <EIcon name="icon--epic--add-rounded" @click="handleOpen(item.type)" />
-      </div>
-    </div>
-    <div class="epic-action-editor-main">
-      <draggable v-model="props.events[item.type]" item-key="id" :component-data="{
-        type: 'transition-group',
-      }" group="option-list" handle=".handle" :animation="200">
-        <template #item="{ element: action, index }">
-          <div class="epic-editor-item rounded">
-            <div class="w-36px flex items-center text-lg">
-              <EIcon class="mr-2 text-lg cursor-move handle text-$epic-text-medium" name="icon--epic--drag" />
-            </div>
-            <div class="flex-1">
-              <div v-if="action.type === 'component'">
-                {{ getLabel(action.componentId) }}
-              </div>
-              <div v-else-if="action.type === 'custom'">
-                自定义函数
-              </div>
-              <div v-else-if="action.type === 'public'">
-                公共函数
-              </div>
-              {{ action.methodName }}
-            </div>
-            <div class="epic-action-box text-lg text-$epic-text-medium">
-              <div class="epic-edit-btn" @click="handleEdit(index, item.type, action)">
-                <EIcon name="icon--epic--page-info-outline-rounded" />
-              </div>
-              <div class="epic-del-btn" @click="handleDelete(index, item.type)">
-                <EIcon name="icon--epic--delete-outline-rounded" />
-              </div>
-            </div>
-          </div>
-        </template>
-      </draggable>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { type PropType, inject } from 'vue'
-import { findSchemaById } from '@epic-designer/utils'
-import { PageSchema } from '../../../types/epic-designer'
-import EIcon from '../../../components/icon'
-import draggable from 'vuedraggable'
-
-const props = defineProps({
-  itemEvents: {
-    type: Array as PropType<any>,
-    default: () => []
-  },
-  allEvents: {
-    type: Array as PropType<any>,
-    default: () => []
-  },
-  modelValue: {
-    type: Object as PropType<any>,
-    default: () => []
-  },
-  events: {
-    type: Object as PropType<any>,
-    default: () => ({})
-  }
-})
-const emit = defineEmits(['add', 'edit', 'update:modelValue'])
-
-const pageSchema = inject('pageSchema') as PageSchema
-
-/**
- * 打开动作配置窗口
- * @param type
- */
-function handleOpen(type: string) {
-  emit('add', type)
-}
-
-/**
- * 获取组件label
- * @param id
- */
-function getLabel(id: string) {
-  const schema = findSchemaById(pageSchema.schemas, id)
-  return schema.label
-}
-
-/**
- * 删除
- * @param index
- */
-function handleDelete(index: number, type: string) {
-  const newEvents = getNewEvents(type)
-  newEvents[type] = props.events[type].filter((_item: any, i: number) => index !== i)
-  if (!newEvents[type]?.length) {
-    delete newEvents[type]
-  }
-  emit('update:modelValue', newEvents)
-}
-
-/**
- * 修改事件
- * @param index
- * @param type
- * @param action
- */
-function handleEdit(index: number, type: string, action: any) {
-  emit('edit', index, type, action)
-}
-
-/**
- * 获取新的事件数据，过滤空数据
- * @param type
- */
-function getNewEvents(type: string) {
-  const newEvents: { [type: string]: any } = {}
-  props.allEvents.forEach((item: any) => {
-    if (!props.events[item.type].length) {
-      return false
-    }
-    if (item.type === type) {
-      return false
-    }
-    newEvents[item.type] = props.events[item.type]
-  })
-  return newEvents
-}
-
-</script>