rich-core 0.0.1

package/styles/richform.scss

@@ -0,0 +1,950 @@
+.richform {
+    /*******整体布局*********/
+    font-size: var(--form-font-size);
+    position: relative;
+
+    .active-design {
+        border: 3px solid var(--form-active-design-border-color) !important;
+    }
+
+    .scrollbar {
+        min-height: 20px;
+        box-sizing: border-box;
+    }
+
+    .richform-border {
+        padding: 10px;
+        box-sizing: border-box;
+        border: 1px solid var(--form-border-color);
+    }
+
+    &.clear-richform {
+        min-height: 0px !important;
+
+        &:deep(.actions) {
+            margin: 0 !important;
+            padding: 0;
+        }
+
+        .field-wrapper>.field {
+            min-height: 0px !important;
+        }
+
+        .inline-no-grid {
+            margin: 0;
+        }
+
+        &:deep(.field) {
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    .ps {
+        width: 100%;
+    }
+
+    .no-ready {
+        width: 100%;
+        height: 100%;
+        color: var(--form-primary-color);
+        font-size: 15px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &.active-form-design {
+        border: 1px solid var(--form-active-design-border-color);
+    }
+
+    // 操作
+    .design-draggable,
+    .design-delete,
+    .design-copy {
+        display: inline-block;
+        position: absolute;
+        width: 22px;
+        height: 26px;
+        line-height: 26px;
+        color: #fff;
+        background: #409eff;
+        text-align: center;
+        cursor: pointer;
+        z-index: 99999;
+    }
+
+    .design-draggable {
+        left: 0;
+        top: 0;
+        z-index: 99;
+        cursor: move;
+    }
+
+    .design-copy {
+        right: 27px;
+        bottom: 0;
+        z-index: 99;
+    }
+
+    .design-delete {
+        right: 0px;
+        bottom: 0;
+        z-index: 99;
+    }
+
+    .design-field-name {
+        right: 1px;
+        top: 1px;
+        z-index: 99;
+        font-size: 10px;
+        display: inline-block;
+        position: absolute;
+        box-sizing: border-box;
+        padding: 1px;
+        color: #aaa;
+    }
+
+    // 拖拽过程配置
+    .design-draggable-ghost {
+        border-top: 5px solid #f56c6c;
+    }
+
+    // https://github.com/SortableJS/Vue.Draggable/issues/1008#issuecomment-782545024
+    .base-component-item {
+        width: 100%;
+        display: inline-block;
+        text-indent: -9999px;
+    }
+
+    .design-sortable-drag {
+        background: #f4dec9;
+    }
+
+    /*******布局*********/
+    .layout {
+        .active-design {
+            border: 3px solid var(--form-active-design-border-color);
+        }
+
+        padding-right: 0;
+
+        .field-border-top:first-child {
+            border-top: 1px solid var(--form-border-color);
+        }
+    }
+
+    /*******字段*********/
+    .field-wrapper {
+        position: relative;
+        color: var(--form-font-color);
+        box-sizing: border-box;
+
+        .field-clear-empty {
+            padding: 0 !important;
+        }
+
+        .required-field::before {
+            content: "*";
+            color: #f56c6c;
+            margin-right: 0.2em;
+            font-family: Verdana, Arial, Tahoma;
+            font-weight: 400;
+        }
+
+        // 控制标签和字段是否在一行显示
+        >.label-inline {
+            display: flex;
+        }
+
+        >.label-no-inline {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+
+        >.inline-no-grid {
+            // margin-bottom: 4px;
+        }
+
+        >.field-border {
+            border: 1px solid var(--form-border-color);
+            border-top: 0;
+        }
+
+        >.field {
+            align-items: center;
+            position: relative;
+            min-height: 48px;
+            box-sizing: border-box;
+
+            >.title-wrapper {
+                display: flex;
+                align-items: center;
+                word-break: break-all;
+
+                >.label-title {
+                    margin-left: 5px;
+                    display: flex;
+                    align-items: center;
+                    overflow: hidden;
+                    color: var(--form-field-title-color);
+                }
+
+                >.field-question {
+                    color: var(--form-field-question-bgcolor);
+                    cursor: pointer;
+                    margin: 0 2px;
+                }
+            }
+
+            >.field-value {
+                color: var(--form-field-value-color);
+            }
+
+            // 标签右对齐
+            .label-right {
+                justify-content: flex-end;
+                padding-right: 4px;
+                box-sizing: border-box;
+            }
+
+            .label-center {
+                justify-content: center;
+                padding-right: 4px;
+                box-sizing: border-box;
+            }
+
+            // 控制标签和字段垂直显示
+            >.label-vert {
+                justify-content: flex-start;
+                padding: 3px 0;
+            }
+
+            >.label-hori {
+                // min-height: 40px;
+            }
+
+            // 设计模式，开启遮罩
+            >.field-mask {
+                width: 100%;
+                position: relative;
+            }
+
+            // 设计模式是否开启遮罩，暂时去掉
+            >.field-mask::before {
+                content: "";
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                z-index: 99;
+                left: 0;
+                top: 0;
+            }
+
+            >.label-right-border {
+                width: 1px;
+                background: var(--form-border-color);
+            }
+
+            >.field-value {
+                display: flex;
+                align-items: center;
+                box-sizing: border-box;
+                padding: 0 3px; // 边框,不能改成margin否则会溢出
+                width: 100%;
+                position: relative;
+
+                >.error-message-top {
+                    position: absolute;
+                    top: -36px;
+                    height: 34px;
+                    line-height: 34px;
+                    text-align: center;
+                    z-index: 9999;
+                    padding: 0 4px;
+                    background-color: #f56c6c;
+                    color: #fff;
+                    border-radius: 5px;
+                }
+
+                >.error-message {
+                    font-size: 12px;
+                    height: 13px;
+                    line-height: 13px;
+                    color: var(--form-field-error-font-color);
+                    position: absolute;
+                    left: 0;
+                    bottom: -13px;
+                    z-index: 98;
+                }
+            }
+
+            // 当是上下布局时，取消padding-top
+            >.field-value-vert {
+                padding-top: 1px;
+                padding-left: 4px;
+                display: flex;
+                align-items: flex-start;
+                margin-bottom: 4px;
+
+                >.error-message {
+                    bottom: -13px;
+                }
+            }
+
+            // 去除element自带的margin-bottom
+            .el-form-item {
+                margin: 0;
+            }
+        }
+    }
+
+    /*******grid布局*********/
+    .grid-layout {
+        // margin-top: 2px;
+        position: relative;
+
+        &.grid-layout-border {
+            box-sizing: border-box;
+            border: 1px solid var(--form-border-color);
+            border-top: 0;
+            border-right: 0;
+        }
+
+        .grid-title {
+            color: var(--form-font-color);
+        }
+
+        .grid-title-border {
+            // border-top: 1px solid var(--form-border-color);
+            border-right: 1px solid var(--form-border-color);
+        }
+
+        .drag-wrapper {
+            top: 0;
+            left: 0;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
+            box-sizing: border-box;
+        }
+
+        .grid-title {
+            padding: 3px;
+        }
+
+        .gird-content {
+            display: flex;
+            position: relative;
+            box-sizing: border-box;
+
+            .grid-flex {
+                display: flex;
+                width: 100%;
+                height: 100%;
+            }
+
+            .grid-column {
+                width: 100%;
+                min-height: 62px;
+                padding: 6px 0 6px 6px;
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .grid-column-nowrap {
+                overflow: hidden;
+            }
+
+            .grid-column-padding {
+                padding: 6px;
+
+            }
+
+            .grid-column-top {
+                border-top: 1px solid var(--form-border-color);
+            }
+
+            .grid-column-border:not(:last-child) {
+                border-right: 1px solid var(--form-border-color);
+            }
+
+            .grid-column-border:last-child {
+                border-right: 1px solid var(--form-border-color);
+            }
+        }
+    }
+
+    /*******tab布局*********/
+    .tab-wrapper {
+        position: relative;
+        box-sizing: border-box;
+        border: 1px solid var(--form-border-color);
+        border-top: 0;
+
+        >.design-no-tabs {
+            width: 100%;
+            height: 40px;
+            position: absolute;
+            z-index: 2;
+        }
+
+        .tab-container {
+            min-height: 15px;
+            padding: 0 3px 2px 3px;
+        }
+    }
+
+    .tab-wrapper-no-border {
+        border: 0 !important;
+    }
+
+    /*******collapse布局*********/
+    .collapse-wrapper {
+        overflow: hidden;
+        box-sizing: border-box;
+        position: relative;
+
+        .collapse-title {
+            color: var(--form-primary-color);
+            font-size: 15px;
+            margin-left: 3px;
+        }
+
+        .collapse-container {
+            box-sizing: border-box;
+            padding: 0 5px;
+        }
+
+        >.design-no-collapse {
+            width: 100%;
+            height: 50px;
+            position: absolute;
+            left: 100px;
+        }
+    }
+
+    .collapse-wrapper-border {
+        border: 1px solid var(--form-border-color);
+        border-top: 0;
+        border-bottom: 0;
+        cursor: pointer;
+
+        .el-collapse {
+            border-top: 0 !important;
+        }
+    }
+
+    /*******actions*********/
+    .actions {
+        margin: 2px 0;
+
+        .right {
+            display: flex;
+            justify-content: flex-end;
+        }
+    }
+}
+
+/*******button widget子组件*********/
+.button-widget {
+    width: 100%;
+    height: 100%;
+}
+
+/*******cascader widget子组件*********/
+.el-cascader__tags .el-tag {
+    min-width: 55px !important;
+}
+
+.cascader-widget {
+    width: 100%;
+}
+
+/*******date-picker-widget widget子组件*********/
+.date-picker-widget {
+    width: 100%;
+
+    .el-input {
+        width: 100% !important;
+    }
+}
+
+/*******checkbox widget子组件*********/
+.checkbox-widget {
+    display: flex;
+    width: 100%;
+
+    .widget-checkAll {
+        margin-right: 20px;
+    }
+}
+
+/*******datetimepicker widget子组件*********/
+.date-picker-widget {
+    width: 100%;
+
+    .el-input {
+        width: 100% !important;
+    }
+}
+
+/*******draggablelist widget子组件*********/
+.draggable-list-widget {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin: 0;
+    padding: 0;
+
+    .draggable-list-icon,
+    .delete-list-icon {
+        width: 30px;
+        height: 30px;
+        line-height: 30px;
+        font-size: 25px;
+        cursor: pointer;
+    }
+
+    .delete-list-icon {
+        color: #fbc5c5;
+    }
+
+    .delete-list-icon:hover {
+        color: #f56c6c;
+    }
+
+    .draggable-list-icon {
+        color: #c8cbcc;
+        cursor: move;
+    }
+
+    .draggable-list-item {
+        display: flex;
+        align-items: center;
+        margin: 5px 0;
+
+        .list-handel-move {
+            color: #556567;
+        }
+
+        .input-draggable {
+            min-width: 60px;
+        }
+
+        .column-wrapper {
+            margin-right: 3px;
+        }
+    }
+
+    .toolbar {
+        display: flex;
+        align-items: center;
+
+        .draggable-list-add {
+            font-size: 14px;
+            color: #1890ff;
+            cursor: pointer;
+            margin-right: 15px
+        }
+
+        .arrow-icon {
+            display: flex;
+            align-items: center;
+            font-size: 15px;
+            cursor: pointer;
+            color: #1890ff;
+
+            &:hover {
+                color: #f56c6c;
+            }
+        }
+
+        .arrow-icon:first-of-type {
+            margin-right: 15px
+        }
+    }
+}
+
+/*******expression widget子组件*********/
+.option-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    margin-top: 3px;
+
+    >.option-item {
+        min-width: 200px;
+        height: 280px;
+        margin-right: 3px;
+        border: 1px solid #ddd;
+
+        >.title {
+            height: 25px;
+            line-height: 25px;
+            border-bottom: 1px solid #ddd;
+            padding: 0 3px;
+            box-sizing: border-box;
+        }
+
+        >.option-list {
+            height: 255px;
+            overflow-y: auto;
+
+            >.option {
+                height: 20px;
+                line-height: 20px;
+                padding: 0 3px;
+                box-sizing: border-box;
+            }
+
+            >.option:hover {
+                background: #bbb;
+                color: #fff;
+            }
+
+            >.disabled-option {
+                position: relative;
+            }
+
+            >.disabled-option::after {
+                content: "";
+                background: "#f00";
+                z-index: 1000;
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                cursor: not-allowed;
+            }
+        }
+    }
+}
+
+.sure-exp {
+    float: right;
+    margin-top: 3px;
+}
+
+/*******icon widget子组件*********/
+.icon-container {
+    display: flex;
+    flex-wrap: wrap;
+    max-height: 400px;
+    overflow: auto;
+    border-left: 1px solid #eee;
+    border-top: 1px solid #eee;
+
+    .icon-cell {
+        width: 50px;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        font-size: 21px;
+        border: 1px solid #eee;
+        border-left: 0;
+        border-top: 0;
+    }
+
+    .active-icon {
+        color: #4f9ffe;
+    }
+
+    .icon-cell:last-child {
+        border-right: 1px solid #eee;
+    }
+
+    .icon-cell:hover {
+        color: #4f9ffe;
+    }
+}
+
+.sure-icon {
+    float: right;
+    margin-top: 4px;
+}
+
+/*******inputnumber widget子组件*********/
+.inputnumber-widget {
+    width: 100%;
+}
+
+/*******ipinput widget子组件*********/
+.ipinput-widget {
+    width: 100%;
+    display: flex;
+    height: 36px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    line-height: normal;
+    border: 1px solid var(--form-border-color);
+    box-sizing: border-box;
+
+    .ip-segment {
+        display: inline-block;
+        width: 50px;
+        height: 26px;
+        line-height: normal;
+
+        input {
+            width: 36px;
+            height: 26px;
+            line-height: normal;
+            border: none;
+            outline: none;
+            text-align: center;
+            text-indent: 0px;
+            margin: 0px;
+            padding: 0px;
+            background-color: transparent;
+            color: var(--form-font-color);
+        }
+
+        i {
+            display: inline-block;
+            font-size: 18px;
+        }
+    }
+
+}
+
+.layout {
+    .field.error {
+        input {
+            border: 1px solid red;
+            background: transparentize(red, 0.8);
+        }
+    }
+}
+
+/*******select widget子组件*********/
+.select-widget-wrapper {
+    width: 100%;
+    height: 100%;
+
+    >.select-widget {
+        height: 100%;
+        width: 100%;
+    }
+}
+
+
+/*******slider widget子组件*********/
+.widget-slider {
+    width: 100%;
+    padding: 0 8px;
+
+    >.select-widget {
+        width: 100%;
+    }
+}
+
+/*******slot widget子组件*********/
+.slot-widget {
+    width: 100%;
+    height: 100%;
+}
+
+/*******table widget子组件*********/
+.popover-body {
+    height: 500px;
+}
+
+.table-widget {
+    box-sizing: border-box;
+    padding: 1px 0;
+    width: 100%;
+
+    .attr {
+        margin-right: 3px;
+    }
+
+    .fixed-popover {
+        z-index: 99;
+    }
+
+    .sure-table-popover {
+        float: right;
+        margin-bottom: 3px;
+    }
+}
+
+/*******text widget子组件*********/
+.text-widget {
+    width: 100%;
+
+    .text-text {
+        width: 100%;
+        display: flex;
+        color: var(--form-field-value-color);
+    }
+
+}
+
+/*******timepicker widget子组件*********/
+.timepicker-widget {
+    width: 100%;
+
+    .el-date-editor--timerange {
+        width: calc(100% - 20px) !important;
+    }
+
+    >.el-time {
+        width: 100%;
+    }
+}
+
+/*******tree widget子组件*********/
+// adjust element css
+.perfect-tree-tool-tip {
+    border-radius: 0;
+    padding: 2px 4px;
+}
+
+.field-row {
+    display: flex;
+    margin-bottom: 3px;
+    align-items: center;
+    margin-top: 5px;
+
+    .field-label {
+        width: 60px;
+        text-align: right;
+        margin-right: 4px;
+    }
+}
+
+// perfect-tree css
+.perfect-tree-wrapper {
+    width: 100%;
+    margin: 0 2px;
+    // background: #fff;
+
+    .show-add-template {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+
+        .add-template {
+            margin-bottom: 2px;
+            width: 97px;
+            margin-right: 2px;
+        }
+
+        .add-template:last-child {
+            margin-right: 0;
+        }
+    }
+
+    .perfect-tree-title {
+        height: 35px;
+        line-height: 35px;
+        border-bottom: 1px solid #d6d6d6;
+        font-size: 15px;
+    }
+
+    .perfect-tree-node {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 15px;
+
+        .tools {
+            display: flex;
+            position: absolute; // 避免抖动
+            right: 0;
+            z-index: 3;
+            background-color: #F5F7FA;
+
+            .tool-item {
+                margin-left: 7px;
+                display: none;
+            }
+        }
+
+        .node-icon {
+            margin-right: 1px;
+        }
+
+        .title {
+            padding: 3px 0;
+        }
+
+        .active-node {
+            color: #4f9ffe;
+        }
+    }
+
+    .perfect-tree-node:hover .tool-item {
+        display: block;
+    }
+}
+
+
+/*******treeselect widget子组件*********/
+.tree-select-icon {
+    .svg {
+        height: 1.2em;
+        line-height: 1.2em;
+        margin-bottom: -2px;
+    }
+}
+
+.tree-select-widget {
+    width: 100%;
+
+    .el-select {
+        width: 100%;
+    }
+}
+
+/*******upload widget子组件*********/
+.upload-widget {
+    width: 100%;
+    overflow: hidden;
+
+    .upload-type {
+        display: flex;
+        align-items: center;
+        height: 25px;
+        margin-bottom: 3px;
+        margin-top: 5px;
+
+        .type-label {
+            font-size: 12px;
+        }
+    }
+}
+
+/*******jscodding widget子组件*********/
+.jscodding-widget {
+    width: 100%;
+    height: 100%;
+
+    .code-container {
+        width: 100%;
+        height: 100%;
+        max-height: 150px;
+        resize: vertical;
+        overflow: auto;
+
+        .cm-editor {
+            height: 100%; // 自适应容器高度
+        }
+
+        .cm-gutter,
+        .cm-contnet {
+            min-height: 45px;
+        }
+    }
+
+    .sure-btn {
+        margin-top: 1px;
+    }
+}