epic-designer-gold 1.0.1 → 1.0.2

package/packages/core/components/tree/src/index.less

@@ -1,117 +0,0 @@
-.epic-tree {
-  .epic-tree-main {
-    padding-right: 10px;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-  }
-
-  a {
-    color: var(--epic-text-main);
-    display: flex;
-
-    &:hover {
-      color: var(--epic-text-main);
-    }
-
-    .text {
-      display: inline-block;
-      width: 100%;
-
-      &.hover {
-        background-color: var(--epic-widget-hover-color);
-      }
-
-      &.checked {
-        background: var(--epic-primary-hover-color);
-        color: var(--epic-primary-color);
-      }
-
-      .epic-text-padding {
-        padding: 0 6px;
-        white-space: nowrap;
-        color: var(--epic-text-main);
-
-        &.hidden {
-          color: var(--epic-text-helper);
-        }
-      }
-    }
-  }
-
-  .epic-node-type-text {
-    font-size: var(--epic-text-sm);
-    color: var(--epic-text-disabled);
-    margin-left: 6px;
-  }
-
-  .epic-tree-node {
-    &.level-1 {
-      padding-left: 10px;
-    }
-
-    padding-left: 16px;
-    min-height: 30px;
-    line-height: 30px;
-    cursor: pointer;
-
-    .icon-expanded {
-      position: absolute;
-      left: 8px;
-      transition: transform 0.3s;
-      color: var(--epic-border-color);
-      font-size: var(--epic-text-sm);
-
-      &.expanded {
-        transform: rotate(90deg);
-      }
-    }
-  }
-
-  .epic-tree-sublist {
-    height: 0;
-    overflow: hidden;
-
-    &.expanded {
-      height: auto;
-    }
-
-    .epic-tree-node {
-      position: relative;
-
-      &::after,
-      &::before {
-        content: "";
-        position: absolute;
-        background: var(--epic-border-color);
-        z-index: 99;
-      }
-
-      &::after {
-        width: 1px;
-        height: 100%;
-        left: 4px;
-        top: 0;
-      }
-
-      &::before {
-        width: 8px;
-        height: 1px;
-        left: 4px;
-        top: 13px;
-      }
-
-      &.expanded::before {
-        display: none;
-      }
-
-      &:last-child {
-        &::after {
-          height: 13px;
-        }
-      }
-    }
-  }
-}

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

@@ -1,113 +0,0 @@
-<template>
-  <div class="epic-tree h-full flex flex-col">
-    <!-- 搜素框 start -->
-    <div class="epic-search-box px-10px py-6px">
-      <Input placeholder="搜索节点" clearable allowClear v-model="keyword" v-model:value="keyword">
-      <template #prefix>
-        <EIcon name="icon--epic--search-rounded" />
-      </template>
-      </Input>
-    </div>
-    <!-- 搜素框 end -->
-    <div class="epic-tree-main flex-1 overflow-auto h-0">
-      <ul>
-        <ETreeNodes v-model:schemas="getTreeData" />
-      </ul>
-      <div v-show="!getTreeData.length" class="text-center pt-42px text-gray-400">没有查询到的数据</div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ComponentSchema } from '../../../types/epic-designer'
-import type { PropType } from 'vue'
-import { ref, provide, computed, useSlots } from 'vue'
-import ETreeNodes from './treeNodes.vue'
-import EIcon from '../../icon'
-import { pluginManager } from '@epic-designer/utils'
-
-defineOptions({
-  name: 'ETree'
-})
-const slots = useSlots()
-provide('slots', slots)
-
-const Input = pluginManager.getComponent('input')
-
-const keyword = ref("")
-const expandedKeys = ref([])
-const props = defineProps({
-  options: {
-    type: Array as PropType<ComponentSchema[]>,
-    default: () => []
-  },
-  hoverKey: {
-    type: String,
-    default: ''
-  },
-  selectedKeys: {
-    type: Array,
-    default: () => []
-  },
-  draggable: {
-    type: Boolean,
-    default: false
-  },
-})
-
-const emits = defineEmits(['update:selectedKeys', 'nodeClick'])
-const selectedKeysComputed = computed({
-  get() {
-    return props.selectedKeys
-  },
-  set(value) {
-    emits('update:selectedKeys', value)
-  }
-})
-
-
-const getTreeData = computed({
-  get() {
-    return filterTreeByLabel(props.options, keyword.value)
-  },
-  set(e) {
-    console.log(e)
-  }
-})
-
-/**
- * 通过label 过滤节点
- * @param tree 节点树
- * @param labelToFilter 过滤关键字
- */
-function filterTreeByLabel(tree, labelToFilter) {
-  const filteredTree: ComponentSchema[] = [];
-
-  tree.forEach((item: ComponentSchema) => {
-    if (item.label?.includes(labelToFilter)) {
-      filteredTree.push(item);
-    } else if (item.children) {
-      const filteredChildren = filterTreeByLabel(item.children, labelToFilter);
-      if (filteredChildren.length > 0) {
-        // Clone the item and replace its children
-        const clonedItem = { ...item };
-        clonedItem.children = filteredChildren;
-        filteredTree.push(clonedItem);
-      }
-    }
-  });
-
-  return filteredTree;
-}
-
-
-function handleSelect(id: string, componentSchema: ComponentSchema) {
-  selectedKeysComputed.value = [id]
-  emits('nodeClick', { id, componentSchema })
-}
-
-provide('expandedKeys', expandedKeys)
-provide('selectedKeys', selectedKeysComputed)
-provide('treeProps', props)
-provide('handleSelect', handleSelect)
-
-</script>

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);
-}