epic-designer-gold 0.0.4 → 0.0.5

package/packages/core/components/designer/src/modules/attributeView/eventView.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="epic-event-view">
-    <div v-if="checkedNode">
-      <EActionEditor
-        :key="checkedNode.id"
-        :event-list="eventList"
-        :model-value="getValueByPath(checkedNode!,`on`)"
-        @update:model-value="handleSetValue($event, `on`)"
-      />
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { Designer, PageSchema } from '../../../../../types/epic-designer'
-import { pluginManager, getValueByPath, setValueByPath,type Revoke } from '@epic-designer/utils'
-import { inject, computed } from 'vue'
-const pageSchema = inject('pageSchema') as PageSchema
-const designer = inject('designer') as Designer
-const revoke = inject('revoke') as Revoke
-const EActionEditor = pluginManager.getComponent('EActionEditor')
-
-const componentConfings = pluginManager.getComponentConfings()
-const checkedNode = computed(() => {
-  return designer.state.checkedNode
-})
-
-const eventList = computed(() => {
-  const eventList: any = [{
-    title: '生命周期',
-    events: [
-      {
-        type: 'vnodeBeforeMount',
-        describe: 'beforeMount'
-      },
-      {
-        type: 'vnodeMounted',
-        describe: 'mounted'
-      },
-      {
-        type: 'vnodeBeforeUpdate',
-        describe: 'beforeUpdate'
-      },
-      {
-        type: 'vnodeUpdated',
-        describe: 'updated'
-      },
-      {
-        type: 'vnodeBeforeUnmount',
-        describe: 'beforeUnmount'
-      },
-      {
-        type: 'vnodeUnmounted',
-        describe: 'unmounted'
-      },
-      {
-        type: 'vnodeErrorCaptured',
-        describe: 'errorCaptured'
-      }
-    ]
-  }]
-  const events = componentConfings[designer.state.checkedNode?.type ?? '']?.config.event ?? []
-  eventList.unshift({
-    title: '组件事件',
-    events
-  })
-  return eventList
-})
-
-/**
- * 设置属性值
- */
-function handleSetValue (value: any, field: string) {
-  setValueByPath( checkedNode.value!, field,value)
-  // 将修改过的组件属性推入撤销操作的栈中
-  revoke.push(pageSchema.schemas, '编辑组件属性')
-}
-</script>

package/packages/core/components/designer/src/modules/attributeView/index.less

@@ -1,36 +0,0 @@
-// 属性编辑
-.epic-attribute-view,
-.epic-style-view {
-  padding: 16px;
-  .epic-attr-item {
-    display: flex;
-    // align-items  : center;
-    margin-bottom: 12px;
-
-    &.vertical {
-      display: block;
-    }
-
-    // &:hover{
-    //   background-color: var(--epic-primary-color);
-    // }
-    .epic-attr-label {
-      width: 80px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      font-size: var(--epic-text-sm);
-      line-height: 32px;
-    }
-
-    .epic-attr-input {
-      flex: 1;
-      display: flex;
-      align-items: center;
-    }
-  }
-}
-
-.epic-designer-main .el-collapse .el-collapse-item__header {
-  box-sizing: border-box;
-}

package/packages/core/components/designer/src/modules/attributeView/styleView.vue

@@ -1,117 +0,0 @@
-<template>
-  <div class="epic-style-view" :key="checkedNode?.id">
-    <div v-for="item in componentStyles" :key="item.field">
-      <div v-if="isShow(item)" class="epic-attr-item" :class="item.layout">
-        <div v-if="item.label" class="epic-attr-label" :title="item.label">
-          {{ item.label }}
-        </div>
-        <div class="epic-attr-input">
-          <ENode
-            :componentSchema="{
-              ...item,
-              componentProps: {
-                ...item.componentProps,
-                ...(item.field === 'componentProps.defaultValue'
-                  ? checkedNode?.componentProps
-                  : {}),
-                input: false,
-                field: undefined,
-                hidden: false,
-              },
-              show: true,
-              noFormItem: true,
-            }"
-            :model-value="getValueByPath(item.editData ?? checkedNode!,item.field!)"
-            @update:model-value="handleSetValue($event, item.field!, item, item.editData)"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import ENode from '../../../../node/index'
-import { Designer, ComponentSchema, PageSchema } from '../../../../../types/epic-designer'
-import { type Revoke, getValueByPath, setValueByPath } from '@epic-designer/utils'
-
-import { inject, computed, nextTick } from 'vue'
-const designer = inject('designer') as Designer
-const pageSchema = inject('pageSchema') as PageSchema
-const revoke = inject('revoke') as Revoke
-
-const componentStyles: ComponentSchema[] = [
-  {
-    label: '宽度',
-    type: 'EInputSize',
-    field: 'componentProps.style.width'
-  },
-  {
-    label: '高度',
-    type: 'EInputSize',
-    field: 'componentProps.style.height'
-  },
-  {
-    label: '内边距',
-    type: 'EInputSize',
-    field: 'componentProps.style.padding'
-  },
-  {
-    label: '外边距',
-    type: 'EInputSize',
-    field: 'componentProps.style.margin'
-  },
-  {
-    label: '背景色',
-    type: 'color-picker',
-    field: 'componentProps.style.backgroundColor',
-    componentProps: {
-      type: 'color',
-      style: {
-        // width: '60px'
-      }
-    }
-  },
-  {
-    label: '字体颜色',
-    type: 'color-picker',
-    field: 'componentProps.style.color',
-    componentProps: {
-      type: 'color',
-      style: {
-      }
-    }
-  }
-]
-
-const checkedNode = computed(() => {
-  return designer.state.checkedNode
-})
-
-function isShow(item: ComponentSchema) {
-  // show属性为boolean类型则直接返回
-  if (typeof item.show === 'boolean') {
-    return item.show
-  }
-  return item.show?.({ values: checkedNode.value! }) ?? true
-}
-
-
-/**
- * 设置属性值
- */
-function handleSetValue(value: any, field: string, item: ComponentSchema, editData = checkedNode.value) {
-  if (typeof item.onChange === 'function') {
-    item.onChange({ value, values: editData!, componentStyles })
-  }
-  // 判断是否同步修改属性值
-  if (item.changeSync) {
-    setValueByPath(editData!, field, value)
-  } else {
-    nextTick(() => {
-      setValueByPath(editData!, field, value)
-    })
-  }
-  // 将修改过的组件属性推入撤销操作的栈中
-  revoke.push(pageSchema.schemas, '编辑组件属性')
-}
-</script>

package/packages/core/components/designer/src/modules/componentView/index.less

@@ -1,61 +0,0 @@
-// 组件选择面板
-.epic-component-view {
-  height: 100%;
-
-  .epic-componet-item {
-    cursor: pointer;
-    border: 1px solid var(--epic-border-color);
-    padding: 8px 10px;
-    border-radius: 4px;
-
-    .iconfont {
-      margin-right: 5px;
-      font-size: 16px;
-      color: var(--epic-text-secondary);
-    }
-
-    &:hover {
-      border-color: var(--epic-primary-color);
-      color: var(--epic-primary-color);
-      background-color: var(--epic-compoent-hover-color);
-
-      .iconfont {
-        color: var(--epic-primary-color);
-      }
-    }
-  }
-
-  .epic-tabs-box {
-    width: 62px;
-    height: 100%;
-    background: var(--epic-compoent-tabs-color);
-    padding: 12px 6px;
-    box-sizing: border-box;
-
-    .epic-tab {
-      height: 28px;
-      line-height: 28px;
-      border-radius: 6px;
-      font-size: var(--epic-text-sm);
-      font-weight: 500;
-      letter-spacing: 0em;
-      color: var(--epic-text-main);
-      margin-bottom: 10px;
-      text-align: center;
-
-      &.checked {
-        color: var(--epic-primary-color);
-        background-color: var(--epic-primary-hover-color);
-      }
-    }
-  }
-
-  .epic-search-box {
-    border-bottom: 1px solid var(--epic-border-color);
-
-    // element 搜素框样式
-    // .el-input__wrapper {
-    //   background-color: #f7f7f7;
-    // }
-  }
-}

package/packages/core/components/designer/src/modules/componentView/index.vue

@@ -1,127 +0,0 @@
-<template>
-  <div class="epic-component-view flex flex-col">
-    <!-- 搜素框 start -->
-    <div class="epic-search-box px-10px py-6px">
-      <Input placeholder="搜索组件" v-model="keyword" clearable allowClear v-model:value="keyword">
-        <template #prefix>
-          <EIcon class="text-$epic-text-helper" name="icon--epic--search-rounded" />
-        </template>
-      </Input>
-    </div>
-    <!-- 搜素框 end -->
-    <div class="flex flex-1 overflow-auto">
-      <!-- 分类选项 start  -->
-      <div class="epic-tabs-box">
-        <div
-          class="epic-tab cursor-pointer truncate"
-          :class="{ checked: activeItem.title === item.title }"
-          v-for="(item, index) in getSchemaTypeList"
-          :key="index"
-          :title="item.title"
-          @click="handelChecked(item)"
-        >
-          {{ item.title }}
-        </div>
-      </div>
-      <!-- 分类选项 end  -->
-
-      <div class="h-full flex-1 overflow-auto py-2 box-border">
-        <draggable
-          v-model="getSourceSchemaList"
-          v-bind="{
-            group: { name: 'edit-draggable', pull: 'clone', put: false },
-            sort: false,
-            animation: 180,
-            ghostClass: 'moving',
-          }"
-          :clone="generateNewSchema"
-          item-key="id"
-          class="grid grid-cols-[auto_auto] px-10px gap-2"
-        >
-          <template #item="{ element }">
-            <div class="epic-componet-item flex items-center truncate" @click="handleClick(element)">
-              <EIcon :name="pluginManager.getComponentConfingByType(element.type).icon ?? ''" />
-              <div class="epic-componet-label flex-1 w-0 truncate">{{ element.label }}</div>
-            </div>
-          </template>
-        </draggable>
-        <div v-show="!getSourceSchemaList.length" class="text-center pt-42px text-gray-400">没有查询到的组件</div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import draggable from "vuedraggable";
-import { ref, computed, inject } from "vue";
-import { generateNewSchema, findSchemaInfoById, pluginManager, Revoke } from "@epic-designer/utils";
-import { ComponentSchema, PageSchema, Designer } from "../../../../../types/epic-designer";
-import { DesignerProps } from "../../types";
-
-import EIcon from "../../../../icon";
-const Input = pluginManager.getComponent("input");
-const pageSchema = inject("pageSchema") as PageSchema;
-const designer = inject("designer") as Designer;
-const revoke = inject("revoke") as Revoke;
-const designerProps = inject("designerProps") as Ref<DesignerProps>;
-const sourceSchema = pluginManager.getComponentSchemaGroups();
-const keyword = ref("");
-const allSchema = {
-  title: "全部",
-  list: [],
-};
-const activeItem = ref(allSchema);
-
-/**
- * 计算组件分类列表
- */
-const getSchemaTypeList = computed(() => {
-  return [allSchema, ...sourceSchema.value];
-});
-
-/**
- * 计算当前需要展示的组件列表
- */
-const getSourceSchemaList = computed(() => {
-  let sourceSchemaList: ComponentSchema[] = activeItem.value.list;
-  if (activeItem.value.title === "全部") {
-    const sourceSchemaAllList = sourceSchema.value.map((item) => {
-      return item.list;
-    });
-    sourceSchemaList = ([] as ComponentSchema[]).concat(...sourceSchemaAllList);
-  }
-  return sourceSchemaList.filter(
-    (item) => item.label?.includes(keyword.value) && (!designerProps.value.formMode || item.type !== "form")
-  );
-});
-
-function handelChecked(item) {
-  activeItem.value = item;
-}
-
-/**
- * 点击添加节点
- * @param e
- */
-function handleClick(schema: ComponentSchema) {
-  const data = findSchemaInfoById(pageSchema.schemas, designer.state.checkedNode?.id ?? "root");
-  if (!data) {
-    return false;
-  }
-  let { list, schema: checkedSchema, index } = data;
-
-  // 如果选中元素存在children字段，则添加到children中
-  if (
-    checkedSchema.children &&
-    !pluginManager.getComponentConfingByType(checkedSchema.type)?.editConstraints?.childImmovable
-  ) {
-    list = checkedSchema.children;
-    index = checkedSchema.children.length - 1;
-  }
-
-  const newSchema = generateNewSchema(schema);
-
-  list.splice(index + 1, 0, newSchema);
-  designer.setCheckedNode(newSchema);
-  revoke.push(pageSchema.schemas, "插入组件");
-}
-</script>

package/packages/core/components/designer/src/modules/editContainer/editNodeItem.vue

@@ -1,87 +0,0 @@
-<template>
-  <draggable
-    v-model="modelSchemas"
-    item-key="id"
-    :component-data="{
-      type: 'transition-group',
-    }"
-    class="epic-draggable-range"
-    v-bind="{
-      animation: 200,
-      group: 'edit-draggable',
-      handle: '.draggable-item',
-      ghostClass: 'moveing',
-    }"
-    @start="handleSelect($event.oldIndex)"
-    @end="handleEnd()"
-    @add="
-      handleSelect($event.newIndex);
-      handleAdd();
-    "
-  >
-    <template #item="{ element, index }">
-      <div class="widget-box" :class="isDraggable(element)" :key="index">
-        <ENodeItem :schema="element" />
-      </div>
-    </template>
-  </draggable>
-</template>
-<script lang="ts" setup>
-import draggable from "vuedraggable";
-import { computed, inject } from "vue";
-import { Revoke, pluginManager } from "@epic-designer/utils";
-import { ComponentSchema, PageSchema, Designer } from "../../../../../types/epic-designer";
-import ENodeItem from "./nodeItem.vue";
-
-const designer = inject("designer") as Designer;
-const pageSchema = inject("pageSchema") as PageSchema;
-const revoke = inject("revoke") as Revoke;
-defineOptions({
-  name: "EditNodeItem",
-});
-const props = defineProps<{
-  schemas: 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.setCheckedNode(modelSchemas.value![index]);
-  designer.setDisableHover(true);
-}
-
-function handleEnd() {
-  designer.setDisableHover();
-  revoke.push(pageSchema.schemas, "拖拽组件");
-}
-
-function handleAdd() {
-  revoke.push(pageSchema.schemas, "插入组件");
-}
-
-function isDraggable(schema: ComponentSchema) {
-  // 判断当前节点类型是否允许拖拽
-  if (
-    schema.id === pageSchema.schemas[0]?.id ||
-    pluginManager.getComponentConfingByType(schema.type)?.editConstraints?.immovable
-  ) {
-    // 禁止拖拽
-    return "unmover-item";
-  }
-
-  return "draggable-item";
-}
-</script>