starfish-form-custom 1.0.0

package/src/styles/collapse.scss

@@ -0,0 +1,15 @@
+.collapse_box {
+  .draggable-box {
+    min-height: 50px;
+    background: white;
+    border: 1px #ccc dashed;
+    box-sizing: border-box;
+    width: 100%;
+  }
+  :deep(.el-collapse-item__content) {
+    padding-bottom: 5px;
+    > * {
+      width: 100%;
+    }
+  }
+}

package/src/styles/custom-cpm.scss

@@ -0,0 +1,5 @@
+.starfish-formitem-nomiddle {
+  .label {
+    align-self: flex-start;
+  }
+}

package/src/styles/divider.scss

@@ -0,0 +1,16 @@
+.starfish-form-divider {
+  top: 6px;
+  .control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    .divider {
+      flex: 1;
+      height: 2px;
+      background: #000;
+      border-radius: 2px;
+      margin-left: 10px;
+    }
+  }
+}

package/src/styles/form-action.scss

@@ -0,0 +1,92 @@
+.common-layout {
+  padding: 15px;
+  height: 100%;
+  box-sizing: border-box;
+  .action-header {
+    height: 40px;
+    padding: 5px;
+    border-bottom: 1px solid #eee;
+    background: #f2f6fc;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  .is-vertical {
+    flex-direction: column;
+  }
+  .event-script-aside {
+    border-right: 1px solid #eee;
+  }
+  .el-main {
+    padding: 0;
+    overflow: hidden;
+  }
+  .coding {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  .action-list {
+    margin: 10px;
+    .action {
+      border: 1px solid #dcdfe6;
+      background: #fff;
+      border-radius: 3px;
+      box-sizing: border-box;
+      padding: 10px !important;
+      height: auto;
+      line-height: 1;
+      cursor: default;
+      position: relative;
+      font-size: 14px;
+      white-space: nowrap;
+      &.selectAction {
+        background: #e4e7ed;
+        color: #303133;
+      }
+      .event-script-menu-i {
+        position: absolute;
+        font-size: 12px;
+        left: 5px;
+        top: 13px;
+        width: 45px;
+        text-align: center;
+        color: #67c23a;
+      }
+      .event-script-menu-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        width: 170px;
+        margin-left: 50px;
+        vertical-align: middle;
+      }
+      .event-script-menu-action {
+        display: inline-block;
+        padding-right: 10px;
+        color: #666;
+        font-weight: 600;
+        vertical-align: middle;
+        > i {
+          margin-left: 3px;
+        }
+      }
+    }
+    .action + .action {
+      margin-top: 6px;
+    }
+  }
+  .func_main {
+    padding: 10px;
+  }
+  .event-script-main {
+    padding: 0;
+    .event-script-main-header {
+      text-align: right;
+      justify-content: flex-end;
+    }
+  }
+}

package/src/styles/formedit.scss

@@ -0,0 +1,69 @@
+.starfish-editor,
+.starfish-form,
+.starfish-dynamicform {
+  .el-form-item__content {
+    margin-left: 0 !important;
+    margin-bottom: 12px;
+    display: block;
+  }
+  .el-form-item {
+    margin-bottom: 0 !important;
+  }
+  .el-form-item__error {
+    top: 100%;
+    left: 15px !important;
+  }
+  .el-form {
+    padding-bottom: 64px;
+  }
+  .jsoneditor-poweredBy {
+    display: none;
+  }
+  .starfish-formitem {
+    text-align: left;
+    position: relative;
+    margin: 0 12px;
+    &.starfish-vertical {
+      display: flex;
+      align-items: center;
+      .control {
+        width: 100%;
+      }
+    }
+    &.formCover {
+      padding-bottom: 12px;
+    }
+    .label {
+      font-size: 14px;
+      height: 25px;
+      line-height: 25px;
+      padding-right: 12px;
+      box-sizing: border-box;
+      white-space: nowrap;
+      &.label_right {
+        float: left;
+        text-align: right;
+        position: absolute;
+      }
+      &.label_left {
+        float: left;
+        text-align: left;
+        position: absolute;
+      }
+    }
+    .item_require {
+      color: red;
+    }
+  }
+}
+
+// #app .fullscreen {
+//   position: fixed;
+//   left: 0;
+//   top: 0;
+//   height: 100%;
+//   width: 100%;
+//   z-index: 1810;
+//   transform: translate(0, 0);
+//   -webkit-transform: translate(0, 0);
+// }

package/src/styles/grid.scss

@@ -0,0 +1,12 @@
+.starfish-grid_box {
+  padding: 5px;
+  .grid-col {
+    min-height: 60px;
+  }
+  .draggable-box {
+    height: 100%;
+    background: white;
+    border: 1px #ccc dashed;
+    box-sizing: border-box;
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,12 @@
+@import "./formedit.scss";
+@import "./rule.scss";
+@import "./keyvalueConfig.scss";
+@import "./action.scss";
+@import "./showrule.scss";
+@import "./custom-cpm.scss";
+@import "./grid.scss";
+@import "./table.scss";
+@import "./divider.scss";
+@import "./collapse.scss";
+@import "./tabs.scss";
+@import "./form-action.scss";

package/src/styles/keyvalueConfig.scss

@@ -0,0 +1,56 @@
+.starfish-keyValueItem {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 12px;
+  border: 1px solid #eee;
+  margin-bottom: 6px;
+  border-radius: 10px;
+  padding: 10px 0;
+  .keyValueSelect {
+    width: 30px;
+    text-align: center;
+  }
+  .keyValueInput {
+    flex: 1;
+    .inputItem {
+      line-height: 20px;
+    }
+    > div {
+      margin-bottom: 7px;
+      span {
+        display: block;
+        margin-bottom: 6px;
+      }
+    }
+  }
+  .keyValueControl {
+    width: 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    > div {
+      width: 17px;
+      height: 17px;
+      border: 1px solid #eee;
+      border-radius: 50%;
+      background: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 5px 0;
+    }
+    .add {
+      background: #409eff;
+      color: white;
+    }
+    .remove {
+      background: red;
+      color: white;
+    }
+    i {
+      font-size: 12px;
+    }
+  }
+}

package/src/styles/rule.scss

@@ -0,0 +1,17 @@
+.starfish-editor,
+.starfish-form,
+.starfish-dynamicform {
+  #jsoneditor {
+    position: relative;
+    z-index: 1;
+    .fullScreen {
+      position: absolute;
+      right: 10px;
+      line-height: 1;
+      z-index: 2;
+      top: 10px;
+      color: white;
+      font-size: 18px;
+    }
+  }
+}

package/src/styles/showrule.scss

@@ -0,0 +1,5 @@
+.starfish-editor-showrule {
+  .label {
+    align-self: flex-start;
+  }
+}

package/src/styles/table.scss

@@ -0,0 +1,19 @@
+.starfish-table_box {
+  .table_layout {
+    width: 100%;
+    &.table_layout_border {
+      border: 1px solid #ccc;
+    }
+    td {
+      vertical-align: top;
+    }
+    .draggable-box {
+      min-height: 60px;
+      background: white;
+      border: 1px #ccc dashed;
+      box-sizing: border-box;
+      min-width: 50px;
+      height: 100%;
+    }
+  }
+}

package/src/styles/tabs.scss

@@ -0,0 +1,5 @@
+.starfish-tabs_box {
+  .draggable-box {
+    min-height: 50px;
+  }
+}

package/src/utils/customHooks.ts

@@ -0,0 +1,22 @@
+import { watch, getCurrentInstance, ComponentInternalInstance } from "vue";
+
+function useWatch(props: any) {
+  const vm = getCurrentInstance() as ComponentInternalInstance;
+  // 预览模式下才有效
+  if (!props.data.fieldName && !props.item.controlItems) {
+    watch(
+      () => props.data[props.item.data.fieldName],
+      (val, oldVal) => {
+        if (props.item.data.action && props.item.data.action.onChange) {
+          window.VApp.$Flex.funcExec(props.item.data.action.onChange, vm.proxy, [val, oldVal, props.data]);
+        }
+        vm.emit("change");
+      },
+      {
+        deep: true,
+      }
+    );
+  }
+}
+
+export { useWatch };