epic-designer-gold 1.0.0 → 1.0.1

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

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <div>
+      <Number v-model:value="span" v-model="span" style="width: 100%" :min="1" :max="24" />
+    </div>
+    <!-- <div v-for="(item, index) in colList" :key="index" class="EColEditor-item">
+      <Number
+        v-model:value="item.componentProps.span"
+        v-model="item.componentProps.span"
+        style="width: 100%"
+        :min="1"
+        :max="24"
+      /> -->
+    <!-- <div v-if="colList.length > 1" class="epic-del-btn">
+        <span @click="handleDelete(index)">
+          <EIcon name="icon-shanchu1" />
+        </span>
+      </div> -->
+    <!-- </div>
+    <div class="add-btn" @click="handleAdd">添加</div> -->
+  </div>
+</template>
+<script lang="ts" setup>
+import { pluginManager, getUUID } from "@epic-designer/utils";
+import { ComponentSchema } from "../../types/epic-designer";
+import { ref, watch } from "vue";
+import { computed, PropType } from "vue";
+import EIcon from "../../components/icon";
+
+const Number = pluginManager.getComponent("number");
+const span = ref(0);
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<ComponentSchema[]>,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+// const colList = computed({
+//   get() {
+//     console.log("%c [  ]-37", "font-size:13px; background:pink; color:#bf2c9f;", props.modelValue);
+//     return props.modelValue;
+//   },
+//   set(e) {
+//     console.log("%c [ e ]-41", "font-size:13px; background:pink; color:#bf2c9f;", e);
+//     emit("update:modelValue", e);
+//   },
+// });
+watch(
+  () => props.modelValue,
+  () => {
+    span.value = props.modelValue.length;
+  },
+  {
+    immediate: true,
+  }
+);
+watch(
+  () => span.value,
+  (e) => {
+    let arr = new Array(e).fill({}).map((el) => {
+      return {
+        type: "col",
+        children: [],
+        componentProps: {
+          span: 24 / e,
+        },
+        id: getUUID(),
+      };
+    });
+    emit("update:modelValue", arr);
+  },
+  {
+    // immediate: true,
+  }
+);
+// /**
+//  * 新增栅格Col
+//  */
+// function handleAdd() {
+//   const colItem = {
+//     type: "col",
+//     children: [],
+//     componentProps: {
+//       span: 12,
+//     },
+//     id: getUUID(),
+//   };
+//   colList.value.push(colItem);
+// }
+
+// /**
+//  * 删除栅格Col
+//  * @param index
+//  */
+// function handleDelete(index: number) {
+//   colList.value = colList.value.filter((item, i) => index !== i);
+// }
+</script>

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

@@ -0,0 +1,184 @@
+.e-data-source {
+    position: relative;
+}
+
+.el-drawer__header {
+    margin-bottom: 0 !important;
+}
+
+button {
+    position: relative;
+}
+
+.icon-numbers {
+    position: absolute;
+    right: -8px;
+    top: -8px;
+    min-width: 18px;
+    min-height: 18px;
+    background-color: #3e8bf2;
+    color: #fff;
+    padding: 4px;
+    font-size: 12px;
+    border-radius: 50%;
+}
+
+.drawer-content {
+    border: 1px solid #ccc;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+
+    &-left {
+        width: 35%;
+        height: 100%;
+        border-right: 1px solid #ccc;
+        padding: 16px 12px;
+
+        button {
+            width: 100%;
+            height: 36px;
+            margin-bottom: 12px;
+        }
+
+        >div {
+            height: calc(100% - 48px);
+            overflow: auto;
+        }
+
+        .source-item {
+            &.active {
+                background: #ecf5ff;
+            }
+
+            display: flex;
+            align-items: center;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            height: 38px;
+            // padding: 0 12px;
+            justify-content: space-between;
+            margin-bottom: 8px;
+            width: 100%;
+            cursor: pointer;
+
+            &:hover {
+                background: #ecf5ff;
+                width: 100%;
+            }
+
+            &-title {
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+                height: 100%;
+                // margin-left: 12px;
+                width: calc(100% - 40px);
+                user-select: none;
+
+                >div:first-child {
+                    color: #6ac33e;
+                    // margin-right: 8px;
+                    width: 54px;
+                    margin-left: 6px;
+                    font-weight: bold;
+                }
+
+                >div:last-child {
+                    width: calc(100% - 60px);
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+            }
+
+            &-icon {
+                width: 40px;
+                height: 40px;
+                // padding-right: 12px;
+                padding: 12px;
+                color: rgb(250, 16, 16);
+            }
+
+        }
+    }
+
+    &-right {
+        width: 65%;
+        height: 100%;
+
+        .content-right-btn {
+            height: 60px;
+            // border-bottom: 1px solid #ccc;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 16px;
+        }
+
+        .content {
+            height: calc(100% - 60px);
+
+            &-empty {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                color: #666;
+            }
+
+            &-form {
+                padding: 16px;
+            }
+        }
+    }
+}
+
+.form-flex {
+    display: flex;
+    justify-content: space-between;
+}
+
+.form-item {
+    &-title {
+        font-size: 14px;
+        color: #606266;
+        display: inline-block;
+        height: auto;
+        line-height: 22px;
+        margin-bottom: 8px;
+        text-align: left;
+        vertical-align: middle;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        >div:first-child {
+            // margin-right: 8px;
+        }
+    }
+
+    &-content {
+        .content-item {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8px;
+
+            .icon-bg {
+                background-color: red;
+                border-radius: 50%;
+                padding: 4px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+
+            }
+        }
+
+    }
+}