@houaoran/designer 1.0.0

package/src/components/style/StyleConfig.vue

@@ -0,0 +1,307 @@
+<template>
+    <div class="_fd-style-config">
+        <BoxSpaceInput v-model="space" @change="onInput" style="margin-bottom: 10px;"></BoxSpaceInput>
+        <BoxSizeInput v-model="size" @change="onInput"></BoxSizeInput>
+        <ConfigItem :label="t('style.color')">
+            <ColorInput v-model="color" @change="onInput"></ColorInput>
+        </ConfigItem>
+        <BackgroundInput v-model="background" @change="onInput"></BackgroundInput>
+        <BorderInput v-model="border" @change="onInput"></BorderInput>
+        <RadiusInput v-model="radius" @change="onInput"/>
+        <FontInput v-model="font" @change="onInput"/>
+        <ShadowInput v-model="boxShadow" @change="onInput"></ShadowInput>
+        <PositionInput v-model="position" @change="onInput"></PositionInput>
+        <ConfigItem :label="t('style.opacity')" class="_fd-opacity-input">
+            <el-slider :show-tooltip="false" v-model="opacity"
+                       @change="onInput"></el-slider>
+            <span>{{ opacity }}%</span>
+        </ConfigItem>
+        <ConfigItem :label="t('style.scale')" class="_fd-opacity-input">
+            <el-slider :min="80" :max="120" :show-tooltip="false" v-model="scale"
+                       @change="onInput"></el-slider>
+            <span>{{ scale }}%</span>
+        </ConfigItem>
+        <ConfigItem :label="t('props.custom')" :info="Object.keys(formData).length > 0 ? t('struct.configured') : ''">
+            <template #append>
+                <TableOptions v-model="formData" @change="onInput" v-bind="{
+                column: [{label: t('props.key'), key: 'label'}, {label: t('props.value'), key: 'value'}],
+                valueType: 'object'
+            }"></TableOptions>
+            </template>
+        </ConfigItem>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+import BoxSizeInput from './BoxSizeInput.vue';
+import BoxSpaceInput from './BoxSpaceInput.vue';
+import BorderInput from './BorderInput.vue';
+import RadiusInput from './RadiusInput.vue';
+import FontInput from './FontInput.vue';
+import ConfigItem from './ConfigItem.vue';
+import ColorInput from './ColorInput.vue';
+import ShadowInput from './ShadowInput.vue';
+import {isNull} from '../../utils/index';
+import TableOptions from '../TableOptions.vue';
+import PositionInput from './PositionInput.vue';
+import toLine from '@form-create/utils/lib/toline';
+import toCase from "@form-create/utils/lib/tocase";
+import BackgroundInput from './BackgroundInput.vue';
+
+const fontKey = [
+    'fontFamily',
+    'fontSize',
+    'fontWeight',
+    'fontStyle',
+    'textDecoration',
+    'textAlign',
+    'lineHeight',
+    'letterSpacing',
+];
+
+const positionKey = [
+    'position',
+    'top',
+    'left',
+    'bottom',
+    'right',
+];
+
+const backgroundKey = ['backgroundColor', 'backgroundImage', 'backgroundSize', 'backgroundPosition', 'backgroundRepeat'];
+
+const sizeKey = [
+    'height',
+    'width',
+    'minWidth',
+    'minHeight',
+    'maxWidth',
+    'maxHeight',
+    'overflow'
+];
+
+const styleKey = [
+    'color',
+    'scale',
+    'borderRadius',
+    'boxShadow',
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'margin',
+    'padding',
+    'opacity',
+    'borderStyle',
+    'borderColor',
+    'borderWidth',
+    'borderTopStyle',
+    'borderTopColor',
+    'borderTopWidth',
+    'borderLeftStyle',
+    'borderLeftColor',
+    'borderLeftWidth',
+    'borderBottomStyle',
+    'borderBottomColor',
+    'borderBottomWidth',
+    'borderRightStyle',
+    'borderRightColor',
+    'borderRightWidth',
+    ...fontKey,
+    ...sizeKey,
+    ...positionKey,
+    ...backgroundKey,
+];
+
+export default defineComponent({
+    name: 'StyleConfig',
+    inject: ['designer'],
+    emits: ['update:modelValue'],
+    components: {
+        PositionInput,
+        TableOptions,
+        ColorInput,
+        ConfigItem,
+        RadiusInput,
+        BoxSizeInput,
+        BoxSpaceInput,
+        BorderInput,
+        ShadowInput,
+        FontInput,
+        BackgroundInput,
+    },
+    props: {
+        modelValue: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    watch: {
+        modelValue() {
+            this.tidyStyle();
+        },
+    },
+    data() {
+        const t = this.designer.setupState.t;
+        return {
+            t,
+            formData: {},
+            size: {},
+            space: {},
+            border: {},
+            font: {},
+            position: {},
+            background: {},
+            radius: '',
+            color: '',
+            boxShadow: '',
+            opacity: 100,
+            scale: 100,
+        }
+    },
+    methods: {
+        tidyStyle() {
+            const style = {...this.modelValue || {}};
+            const space = {};
+            Object.keys(style).forEach(k => {
+                const key = toCase(k);
+                if (['margin', 'padding'].indexOf(k) > -1) {
+                    space[key] = style[k];
+                } else if (k.indexOf('margin') > -1 || k.indexOf('padding') > -1) {
+                    space[key] = style[k];
+                }
+            });
+
+            const size = {};
+            sizeKey.forEach(k => {
+                if (style[k]) {
+                    size[k] = style[k];
+                }
+            });
+
+            const position = {};
+            positionKey.forEach(k => {
+                if (style[k]) {
+                    position[k] = style[k];
+                }
+            });
+
+            this.radius = style.borderRadius || '';
+            delete style.borderRadius;
+
+            const border = {};
+            Object.keys(style).forEach(k => {
+                if (k.indexOf('border') === 0) {
+                    border[k] = style[k];
+                }
+            });
+
+            let opacity = isNull(style.opacity) ? 100 : (parseFloat(style.opacity) || 0);
+            if (opacity && opacity < 1) {
+                opacity = opacity * 100;
+            }
+
+            let scale = style.scale;
+            if (isNull(style.scale)) {
+                scale = 100
+            } else if (isNaN(Number(scale))) {
+                scale = parseFloat(scale) || 100;
+            } else {
+                scale = scale > 0 ? scale * 100 : 0;
+            }
+
+            const font = {};
+            fontKey.forEach(k => {
+                if (style[k]) {
+                    font[k] = style[k];
+                }
+            });
+
+            const background = {};
+            backgroundKey.forEach(k => {
+                if (style[k]) {
+                    background[k] = style[k];
+                }
+            });
+            this.opacity = opacity;
+            this.scale = scale;
+            this.size = size;
+            this.position = position;
+            this.space = space;
+            this.border = border;
+            this.font = font;
+            this.background = background;
+            this.boxShadow = style.boxShadow || '';
+            this.color = style.color || '';
+            styleKey.forEach(k => {
+                delete style[k];
+            })
+            this.formData = style;
+        },
+        onInput() {
+            let temp = {...this.formData};
+            let overStyle = {};
+            styleKey.forEach(k => {
+                if (temp[k]) {
+                    overStyle[k] = temp[k];
+                    delete temp[k];
+                } else {
+                    const v = toLine(k);
+                    if (temp[v]) {
+                        overStyle[k] = temp[v];
+                        delete temp[v];
+                    }
+
+                }
+            })
+            const style = {
+                ...temp,
+                color: this.color || '',
+                opacity: (this.opacity >= 0 && this.opacity < 100) ? (this.opacity + '%') : '',
+                borderRadius: this.radius || '',
+                boxShadow: this.boxShadow || '',
+                scale: (this.scale >= 0 && this.scale !== 100) ? (this.scale + '%') : '',
+                ...this.space, ...this.size, ...this.border, ...this.font, ...this.position, ...this.background, ...overStyle
+            }
+            Object.keys(style).forEach(k => {
+                if (isNull(style[k])) {
+                    delete style[k];
+                }
+            })
+            this.$emit('update:modelValue', style);
+        },
+    },
+    created() {
+        this.tidyStyle();
+    }
+
+});
+</script>
+
+<style>
+._fd-style-config {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+._fd-opacity-input ._fd-ci-con {
+    display: flex;
+    justify-content: space-between;
+    width: 150px;
+    align-items: center;
+}
+
+._fd-opacity-input ._fd-ci-con > span {
+    width: 32px;
+}
+
+._fd-opacity-input .el-slider {
+    flex: 1;
+    margin-right: 15px;
+}
+</style>

package/src/components/table/Table.vue

@@ -0,0 +1,252 @@
+<template>
+    <el-col :span="24">
+        <div class="_fc-table" :class="{ 'is-mini': mini, 'is-table-form': formStyle }">
+            <table border="1" cellspacing="0" cellpadding="0" :style="tableColor">
+                <template v-for="(_,pid) in rule.row" :key="pid">
+                    <tr>
+                        <template v-for="(_, idx) in rule.col" :key="`${pid}${idx}`">
+                            <td v-if="lattice[pid][idx].show"
+                                v-bind="lattice[pid][idx] ? {colspan:lattice[pid][idx].colspan, rowspan:lattice[pid][idx].rowspan} : {}"
+                                valign="top"
+                                :class="(tdClass && tdClass[`${pid}:${idx}`]) || ''"
+                                :style="[tableColor, (tdStyle && tdStyle[`${pid}:${idx}`]) || {}]">
+                                <slot :name="`${pid}:${idx}`"></slot>
+                                <template v-for="slot in lattice[pid][idx].slot">
+                                    <slot :name="`${slot}`"></slot>
+                                </template>
+                            </td>
+                        </template>
+                    </tr>
+                </template>
+            </table>
+        </div>
+    </el-col>
+</template>
+
+<script>
+
+export default {
+    name: 'FcTable',
+    props: {
+        mini: Boolean,
+        formStyle: Boolean,
+        label: String,
+        width: [Number, String],
+        border: {
+            type: Boolean,
+            default: true
+        },
+        borderWidth: String,
+        borderColor: String,
+        rule: {
+            type: Object,
+            default: () => ({row: 1, col: 1})
+        },
+    },
+    watch: {
+        rule: {
+            handler() {
+                this.initRule();
+                this.loadRule();
+                this.tdStyle = this.rule.style || {};
+                this.tdClass = this.rule.class || {};
+            },
+            immediate: true,
+            deep: true,
+        }
+    },
+    data() {
+        return {
+            tdStyle: {},
+            tdClass: {},
+            lattice: {},
+        };
+    },
+    computed: {
+        tableColor() {
+            const border = {};
+            if (this.border === false) {
+                border['border'] = '0 none';
+            } else {
+                if (this.borderColor) {
+                    border['borderColor'] = this.borderColor;
+                }
+                if (this.borderWidth) {
+                    border['borderWidth'] = this.borderWidth;
+                }
+            }
+            return border;
+        },
+    },
+    methods: {
+        initRule() {
+            const rule = this.rule;
+            if (!rule.style) {
+                rule.style = {};
+            }
+            if (!rule.layout) {
+                rule.layout = [];
+            }
+            if (!rule.row) {
+                rule.row = 1;
+            }
+            if (!rule.col) {
+                rule.col = 1;
+            }
+        },
+        loadRule() {
+            const lattice = [];
+            const rule = this.rule || {row: 1, col: 1};
+            for (let index = 0; index < rule.row; index++) {
+                const sub = [];
+                lattice.push(sub);
+                for (let idx = 0; idx < rule.col; idx++) {
+                    sub.push({rowspan: 1, colspan: 1, slot: [], show: true});
+                }
+            }
+            [...(rule.layout || [])].forEach((v, i) => {
+                if (((!v.row || v.row <= 0) && (!v.col || v.col <= 0)) || !lattice[v.top] || !lattice[v.top][v.left] || !lattice[v.top][v.left].show) {
+                    rule.layout.splice(i, 1);
+                    return;
+                }
+                const data = lattice[v.top][v.left];
+                data.layout = v;
+                let col = 1;
+                let row = 1;
+                if (v.col) {
+                    col = (v.col + v.left) > rule.col ? rule.col - v.left : v.col;
+                    data.colspan = col;
+                }
+                if (v.row) {
+                    row = (v.row + v.top) > rule.row ? rule.row - v.top : v.row;
+                    data.rowspan = row;
+                }
+                if (row && col) {
+                    for (let index = 0; index < row; index++) {
+                        const row = lattice[v.top + index];
+                        if (row) {
+                            for (let idx = 0; idx < col; idx++) {
+                                if (!idx && !index)
+                                    continue;
+
+                                if (row[v.left + idx]) {
+                                    row[v.left + idx].show = false;
+                                }
+                                data.slot.push(`${v.top + index}:${v.left + idx}`);
+                            }
+                        }
+                    }
+                }
+            });
+
+            const checkCol = (col) => {
+                return !!(!col || col.layout || !col.show);
+            };
+
+            lattice.forEach((v, index) => {
+                v.forEach((item, idx) => {
+                    let right = false;
+                    let bottom = false;
+                    if (item.layout) {
+                        const col = item.layout.col || 1;
+                        const row = item.layout.row || 1;
+                        for (let i = 0; i < col; i++) {
+                            if (!lattice[index + row] || checkCol(lattice[index + row][idx + i])) {
+                                bottom = true;
+                                continue;
+                            }
+                        }
+                        for (let i = 0; i < row; i++) {
+                            if (!lattice[index + i] || checkCol(lattice[index + i][idx + col])) {
+                                right = true;
+                                continue;
+                            }
+                        }
+                    } else {
+                        right = checkCol(v[idx + 1]);
+                        bottom = lattice[index + 1] ? checkCol(lattice[index + 1][idx]) : true;
+                    }
+                    item.right = right;
+                    item.bottom = bottom;
+                });
+            });
+            this.lattice = lattice;
+        },
+    }
+};
+</script>
+
+<style>
+
+._fc-table {
+    overflow: auto;
+}
+
+._fc-table > table {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    table-layout: fixed;
+    border: 1px solid #EBEEF5;
+    border-bottom: 0 none;
+    border-right: 0 none;
+    border-collapse: collapse;
+}
+
+._fc-table tr {
+    min-height: 50px;
+}
+
+._fc-table td {
+    padding: 5px;
+    min-height: 50px;
+    min-width: 80px;
+    position: relative;
+    box-sizing: border-box;
+    overflow-wrap: break-word;
+    /*white-space: nowrap;*/
+    overflow: hidden;
+    border: 0 none;
+    border-right: 1px solid #EBEEF5;
+    border-bottom: 1px solid #EBEEF5;
+    text-align: center;
+    vertical-align: middle;
+}
+
+._fc-table.is-mini td {
+    padding: 0;
+    min-height: 12px;
+}
+
+._fc-table.is-mini .el-form-item {
+    padding: 0;
+    margin: 0;
+}
+
+._fc-table.is-table-form .el-form-item {
+    margin-bottom: 1px;
+}
+
+._fc-table.is-table-form .el-form-item.is-error {
+    margin-bottom: 22px;
+}
+
+._fc-table.is-table-form .el-form-item__label,
+._fc-table.is-table-form .van-field__label {
+    display: none !important;
+}
+
+._fc-table.is-table-form .el-form-item__content {
+    display: flex;
+    margin-left: 0 !important;
+    width: 100% !important;
+}
+
+._fc-table.is-table-form .el-input-number,
+._fc-table.is-table-form .el-select,
+._fc-table.is-table-form .el-slider,
+._fc-table.is-table-form .el-cascader,
+._fc-table.is-table-form .el-date-editor {
+    width: 100%;
+}
+</style>