@houaoran/designer 1.0.0

package/src/components/style/BorderInput.vue

@@ -0,0 +1,242 @@
+<template>
+    <ConfigItem :label="t('style.border')">
+        <div class="line-box" :style="borderStyleStr">
+            <div class="line-box-con"></div>
+        </div>
+        <template #append>
+            <div class="_fd-border-input">
+                <div class="_fd-bi-left">
+                    <div class="_fd-bil-row">
+                        <div class="_fd-bil-col" :class="active === 'Top' ? 'active' : ''" @click="active = 'Top'">┳
+                        </div>
+                    </div>
+                    <div class="_fd-bil-row">
+                        <div class="_fd-bil-col" :class="active === 'Left' ? 'active' : ''" @click="active = 'Left'">┣
+                        </div>
+                        <div class="_fd-bil-col" :class="active === '' ? 'active' : ''" @click="active = ''">╋</div>
+                        <div class="_fd-bil-col" :class="active === 'Right' ? 'active' : ''" @click="active = 'Right'">
+                            ┫
+                        </div>
+                    </div>
+                    <div class="_fd-bil-row">
+                        <div class="_fd-bil-col" :class="active === 'Bottom' ? 'active' : ''"
+                             @click="active = 'Bottom'">┻
+                        </div>
+                    </div>
+                </div>
+                <div class="_fd-bi-right">
+                    <el-select v-model="curStyle" clearable>
+                        <el-option
+                            v-for="item in lineType"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        >
+                            <div class="_fd-bi-opt">
+                                <div class="_line" :class="item.value"></div>
+                            </div>
+                        </el-option>
+                    </el-select>
+                    <SizeInput v-model="curWidth"/>
+                    <ColorInput v-model="curColor"/>
+                </div>
+            </div>
+        </template>
+    </ConfigItem>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+import SizeInput from './SizeInput.vue';
+import ColorInput from './ColorInput.vue';
+import ConfigItem from './ConfigItem.vue';
+import {toLine} from '@form-create/utils';
+
+export default defineComponent({
+    name: 'BorderInput',
+    components: {ColorInput, SizeInput, ConfigItem},
+    inject: ['designer'],
+    emits: ['update:modelValue', 'change'],
+    props: {
+        modelValue: {
+            type: Object,
+            default: () => ({}),
+        }
+    },
+    watch: {
+        modelValue() {
+            this.tidyValue();
+            this.initCur();
+        },
+        active() {
+            this.initCur();
+        },
+    },
+    computed: {
+        borderStyleStr() {
+            let str = '';
+            Object.keys(this.borderStyle).forEach((key) => {
+                if (this.borderStyle[key] !== '') {
+                    str += toLine(key) + ': ' + this.borderStyle[key] + ';';
+                }
+            }, {})
+            return str;
+        },
+    },
+    data() {
+        const t = this.designer.setupState.t;
+        return {
+            t,
+            active: '',
+            borderStyle: {},
+            curStyle: '',
+            curColor: '',
+            curWidth: '',
+            lineType: ['solid', 'dashed', 'dotted', 'double'].map(k => {
+                return {value: k, label: t('style.' + k)}
+            }),
+            position: ['Top', 'Left', 'Bottom', 'Right'],
+            type: ['Style', 'Color', 'Width'],
+            unwatch: null,
+        }
+    },
+    methods: {
+        tidyValue() {
+            const key = [];
+            this.borderStyle = {};
+            ['', ...this.position].forEach(k => {
+                this.type.forEach(t => {
+                    key.push('border' + k + t);
+                });
+            });
+            key.forEach(k => {
+                this.borderStyle[k] = this.modelValue[k] || '';
+            });
+        },
+        onInput() {
+            const style = Object.keys(this.borderStyle).reduce((acc, key) => {
+                if (this.borderStyle[key] !== '') {
+                    acc[key] = this.borderStyle[key]
+                }
+                return acc
+            }, {})
+            this.$emit('update:modelValue', style)
+            this.$emit('change', style)
+        },
+        pushCur() {
+            this.borderStyle['border' + this.active + 'Style'] = this.curStyle || '';
+            this.borderStyle['border' + this.active + 'Color'] = this.curColor || '';
+            this.borderStyle['border' + this.active + 'Width'] = this.curWidth || '';
+            this.onInput();
+        },
+        initCur() {
+            this.unwatch && this.unwatch();
+            this.curStyle = this.borderStyle['border' + this.active + 'Style'] || '';
+            this.curColor = this.borderStyle['border' + this.active + 'Color'] || '';
+            this.curWidth = this.borderStyle['border' + this.active + 'Width'] || '';
+            this.unwatch = this.$watch(() => [this.curStyle, this.curColor, this.curWidth], () => {
+                this.pushCur();
+            });
+        },
+    },
+    created() {
+        this.tidyValue();
+        this.initCur();
+    }
+
+});
+</script>
+
+<style>
+._fd-border-input {
+    width: 100%;
+    height: 110px;
+    display: flex;
+    justify-content: center;
+}
+
+._fd-border-input ._fd-bi-left {
+    width: 115px;
+    height: 115px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+._fd-border-input ._fd-bi-right {
+    width: 140px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 5px;
+}
+
+._fd-border-input ._fd-bi-right ._fd-color-input {
+    width: 140px;
+}
+
+._fd-bi-opt {
+    width: 100%;
+    display: flex;
+    height: 100%;
+    align-items: center;
+}
+
+._fd-bi-opt ._line {
+    width: 100%;
+}
+
+._fd-bi-opt .solid {
+    border: 1px solid #000;
+}
+
+._fd-bi-opt .dashed {
+    border: 1px dashed #000;
+}
+
+._fd-bi-opt .dotted {
+    border: 1px dotted #000;
+}
+
+._fd-bi-opt .double {
+    border: 1px double #000;
+}
+
+._fd-border-input ._fd-bil-row {
+    height: 38px;
+    display: flex;
+    justify-content: center;
+}
+
+._fd-border-input ._fd-bil-col {
+    width: 22px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin: 8px;
+    font-size: 16px;
+}
+
+._fd-border-input ._fd-bil-col.active {
+    outline: 1px dashed #2E73FF;
+    color: #2E73FF;
+}
+
+.line-box {
+    width: 150px;
+    height: 20px;
+    padding: 1px;
+    box-sizing: border-box;
+}
+
+.line-box-con {
+    width: 100%;
+    height: 100%;
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAD5JREFUOE9jZGBg+M+AChjR+HjlQYqHgQFoXibNS+gBBjKMpDAZHAaQ5GQGBgYUV4+mA7QAgaYokgJ14NMBAK1TIAlUJpxYAAAAAElFTkSuQmCC");
+    opacity: 0.3;
+}
+
+</style>

package/src/components/style/BoxSizeInput.vue

@@ -0,0 +1,166 @@
+<template>
+    <div class="_fd-box-size-input">
+        <ConfigItem :label="t('props.size')" :info="Object.keys(modelValue).length > 0 ? t('struct.configured') : ''">
+            <template #append>
+                <el-form label-position="top" size="small">
+                    <el-form-item :label="t('style.' + key)" v-for="key in keys" :key="key">
+                        <SizeInput v-model="boxStyle[key]" @change="onInput"></SizeInput>
+                    </el-form-item>
+                    <el-form-item :label="t('style.overflow.name')" style="grid-column: span 2;">
+                        <el-radio-group :modelValue="boxStyle.overflow">
+                            <el-tooltip
+                                effect="dark"
+                                :content="t('style.overflow.' + item.value)"
+                                placement="top"
+                                persistent
+                                :hide-after="0"
+                                v-for="item in overflow"
+                                :key="item.value"
+                            >
+                                <el-radio-button :label="item.value" :value="item.value"
+                                                 @click="changeOverflow(item.value)">
+                                    <template v-if="item.text">
+                                        <span style="font-size: 12px;line-height: 16px;">Auto
+                                        </span>
+                                    </template>
+                                    <template v-else>
+                                        <i class="fc-icon" :class="item.icon"></i>
+                                    </template>
+                                </el-radio-button>
+                            </el-tooltip>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-form>
+            </template>
+        </ConfigItem>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+import ConfigItem from './ConfigItem.vue';
+import SizeInput from './SizeInput.vue';
+
+export default defineComponent({
+    name: 'BoxSizeInput',
+    components: {SizeInput, ConfigItem},
+    props: {
+        modelValue: {
+            type: Object,
+            default: () => ({}),
+        }
+    },
+    inject: ['designer'],
+    emits: ['update:modelValue', 'change'],
+    data() {
+        return {
+            overflow: [
+                {
+                    value: 'visible',
+                    icon: 'icon-eye',
+                },
+                {
+                    value: 'hidden',
+                    icon: 'icon-eye-close',
+                },
+                {
+                    value: 'scroll',
+                    icon: 'icon-scroll',
+                },
+                {
+                    value: 'auto',
+                    text: 'Auto',
+                },
+            ],
+            keys: ['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight'],
+            boxStyle: {
+                width: '',
+                minWidth: '',
+                maxWidth: '',
+                height: '',
+                minHeight: '',
+                maxHeight: '',
+                overflow: '',
+            },
+        }
+    },
+    watch: {
+        modelValue() {
+            this.tidyValue();
+        },
+    },
+    computed: {
+        t() {
+            return this.designer.setupState.t;
+        }
+    },
+    methods: {
+        tidyValue() {
+            this.boxStyle = {
+                width: '',
+                minWidth: '',
+                maxWidth: '',
+                height: '',
+                minHeight: '',
+                maxHeight: '',
+                overflow: '',
+            };
+            if (!this.modelValue) {
+                return;
+            }
+            Object.keys(this.boxStyle).forEach(k => {
+                if (this.modelValue[k]) {
+                    this.boxStyle[k] = this.modelValue[k];
+                }
+            });
+        },
+        onInput() {
+            const style = Object.keys(this.boxStyle).reduce((acc, key) => {
+                if (this.boxStyle[key] !== '') {
+                    acc[key] = this.boxStyle[key]
+                }
+                return acc
+            }, {})
+            this.$emit('update:modelValue', style)
+            this.$emit('change', style)
+        },
+        changeOverflow(val) {
+            this.boxStyle.overflow = this.boxStyle.overflow === val ? '' : val;
+            this.onInput();
+        },
+        change(type, e) {
+            this.boxStyle[type] = e.target.value;
+        },
+    },
+    created() {
+        this.tidyValue();
+    }
+});
+
+</script>
+
+<style>
+._fd-box-size-input .el-form {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    width: 100%;
+    grid-column-gap: 10px;
+}
+
+._fd-box-size-input .el-radio-group {
+    width: 100%;
+}
+
+._fd-box-size-input .el-radio-button__inner {
+    width: 100%;
+    padding: 4px;
+}
+
+._fd-box-size-input .el-radio-button {
+    flex: 1;
+}
+
+._fd-box-size-input ._fd-size-input .el-input-number--small {
+    width: 100%;
+}
+</style>

package/src/components/style/BoxSpaceInput.vue

@@ -0,0 +1,269 @@
+<template>
+    <div class="_fd-box-space-input">
+        <div class="_padding">
+            <span class="_padding-title">
+                {{ t('style.margin') }}
+            </span>
+            <input class="_fd-input _fd-top" placeholder="        " :value="boxStyle.marginTop" type="text"
+                   @blur="(e)=>setValue('margin','Top', e)" @input="(e)=>change('marginTop', e)" @keydown.enter="(e)=>setValue('margin','Top', e)">
+            <input class="_fd-input _fd-right" placeholder="        " :value="boxStyle.marginRight" type="text"
+                   @blur="(e)=>setValue('margin','Right', e)" @input="(e)=>change('marginRight', e)" @keydown.enter="(e)=>setValue('margin','Right', e)">
+            <input class="_fd-input _fd-bottom" placeholder="        " :value="boxStyle.marginBottom" type="text"
+                   @blur="(e)=>setValue('margin','Bottom', e)" @input="(e)=>change('marginBottom', e)" @keydown.enter="(e)=>setValue('margin','Bottom', e)">
+            <input class="_fd-input _fd-left" placeholder="        " :value="boxStyle.marginLeft" type="text"
+                   @blur="(e)=>setValue('margin','Left', e)" @input="(e)=>change('marginLeft', e)" @keydown.enter="(e)=>setValue('margin','Left', e)">
+            <div class="_fd-help">
+                <i class="fc-icon icon-link2" title="lock" :class="marginLock ? 'active' : ''"
+                   @click="lock('margin')"></i>
+                <i class="fc-icon icon-delete-circle" title="clear" @click="clear('margin')"></i>
+            </div>
+            <div class="_margin">
+                <span class="_margin-title">
+                    {{ t('style.padding') }}
+                </span>
+                <div class="_fd-help">
+                    <i class="fc-icon icon-link2" title="lock" :class="paddingLock ? 'active' : ''"
+                       @click="lock('padding')"></i>
+                    <i class="fc-icon icon-delete-circle" title="clear" @click="clear('padding')"></i>
+                </div>
+                <input class="_fd-input _fd-top" placeholder="        " :value="boxStyle.paddingTop" type="text"
+                       @blur="(e)=>setValue('padding','Top', e)" @input="(e)=>change('paddingTop', e)" @keydown.enter="(e)=>setValue('padding','Top', e)">
+                <input class="_fd-input _fd-right" placeholder="        " :value="boxStyle.paddingRight" type="text"
+                       @blur="(e)=>setValue('padding','Right', e)" @input="(e)=>change('paddingRight', e)" @keydown.enter="(e)=>setValue('padding','Right', e)">
+                <input class="_fd-input _fd-bottom" placeholder="        " :value="boxStyle.paddingBottom" type="text"
+                       @blur="(e)=>setValue('padding','Bottom', e)" @input="(e)=>change('paddingBottom', e)" @keydown.enter="(e)=>setValue('padding','Bottom', e)">
+                <input class="_fd-input _fd-left" placeholder="        " :value="boxStyle.paddingLeft" type="text"
+                       @blur="(e)=>setValue('padding','Left', e)" @input="(e)=>change('paddingLeft', e)" @keydown.enter="(e)=>setValue('padding','Left', e)">
+                <div class="_box">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+import ConfigItem from './ConfigItem.vue';
+
+export default defineComponent({
+    name: 'BoxSpaceInput',
+    components: {ConfigItem},
+    props: {
+        modelValue: {
+            type: Object,
+            default: () => ({}),
+        }
+    },
+    inject: ['designer'],
+    emits: ['update:modelValue', 'change'],
+    data() {
+        return {
+            position: ['Top', 'Right', 'Bottom', 'Left'],
+            boxStyle: {
+                margin: '',
+                padding: '',
+                marginLeft: '',
+                marginRight: '',
+                marginTop: '',
+                marginBottom: '',
+                paddingLeft: '',
+                paddingRight: '',
+                paddingTop: '',
+                paddingBottom: '',
+            },
+            marginLock: false,
+            paddingLock: false,
+        }
+    },
+    watch: {
+        modelValue() {
+            this.tidyValue();
+        },
+    },
+    computed: {
+        t() {
+            return this.designer.setupState.t;
+        }
+    },
+    methods: {
+        tidyValue() {
+            this.boxStyle = {};
+            ['margin', 'padding'].forEach(k => {
+                this.boxStyle[k] = this.modelValue[k] || '';
+                this.position.forEach(p => {
+                    this.boxStyle[k + p] = this.tidySize(this.modelValue[k + p] || this.modelValue[k] || '');
+                });
+            })
+        },
+        onInput() {
+            const style = Object.keys(this.boxStyle).reduce((acc, key) => {
+                if (this.boxStyle[key] !== '') {
+                    acc[key] = this.boxStyle[key]
+                }
+                return acc
+            }, {})
+            this.$emit('update:modelValue', style)
+            this.$emit('change', style)
+        },
+        tidySize(val) {
+            const regex = /^(\d*\.?\d+)(px|rem|%|vh|vw|em)$/
+            if (!regex.test(val)) {
+                if (val === 'auto') {
+                    return val;
+                }
+                const number = parseInt(val);
+                if (isNaN(number)) {
+                    return '';
+                } else {
+                    return number + 'px';
+                }
+            }
+            return val;
+        },
+        setValue(type, key, e) {
+            const value = this.tidySize(e.target.value);
+            if (!type) {
+                this.boxStyle[key] = value;
+            } else if (this[type + 'Lock']) {
+                this.position.forEach(v => {
+                    this.boxStyle[type + v] = value;
+                })
+            } else {
+                this.boxStyle[type + key] = value;
+            }
+            this.onInput();
+        },
+        change(type, e) {
+            this.boxStyle[type] = e.target.value;
+        },
+        clear(type) {
+            this.position.forEach(v => {
+                this.boxStyle[type + v] = '';
+            })
+            this.onInput();
+        },
+        lock(type) {
+            const key = type + 'Lock';
+            this[key] = !this[key];
+        },
+
+    },
+    created() {
+        this.tidyValue();
+    }
+});
+
+</script>
+
+<style>
+
+._fd-box-space-input {
+    color: #000000;
+}
+
+._fd-box-space-input ._padding, ._fd-box-space-input ._margin {
+    width: 100%;
+    height: 180px;
+    background-color: #F2CEA5;
+    padding: 40px 55px;
+    box-sizing: border-box;
+    position: relative;
+}
+
+html.dark ._fd-box-space-input ._padding, ._fd-box-space-input ._margin {
+    background-color: #A9855C;
+}
+
+._fd-box-space-input ._margin {
+    width: 100%;
+    height: 100px;
+    background-color: #C6CF92;
+}
+
+._fd-box-space-input ._fd-input {
+    display: inline-block;
+    width: 30%;
+    max-width: 40px;
+    height: 20px;
+    border: 0 none;
+    padding: 0;
+    margin: 0;
+    outline: 0 none;
+    text-align: center;
+    font-size: 12px;
+    background-color: unset;
+    text-decoration: underline;
+}
+
+._fd-box-space-input ._fd-input:hover, ._fd-box-space-input ._fd-input:focus {
+    background-color: #ECECEC;
+    opacity: 0.9;
+    color: #262626;
+}
+
+._fd-box-space-input ._fd-left, ._fd-box-space-input ._fd-right {
+    position: absolute;
+    left: 7px;
+    top: 50%;
+    margin-top: -10px;
+}
+
+._fd-box-space-input ._fd-top, ._fd-box-space-input ._fd-bottom {
+    position: absolute;
+    left: 50%;
+    top: 5px;
+    margin-left: -20px;
+}
+
+._fd-box-space-input ._fd-bottom {
+    top: unset;
+    bottom: 15px;
+}
+
+._fd-box-space-input ._fd-right {
+    left: unset;
+    right: 2px;
+}
+
+._fd-box-space-input ._box {
+    width: 100%;
+    height: 100%;
+    background-color: #94B5C0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+._fd-box-space-input ._padding-title, ._fd-box-space-input ._margin-title {
+    position: absolute;
+    top: 2px;
+    left: 4px;
+}
+
+._fd-box-space-input ._fd-help {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    color: #AAAAAA;
+}
+
+._fd-box-space-input ._padding .fc-icon {
+    cursor: pointer;
+    color: #262626;
+    font-size: 12px;
+}
+
+._fd-box-space-input ._padding .fc-icon + .fc-icon {
+    margin-left: 2px;
+}
+
+._fd-box-space-input .fc-icon.active {
+    color: #2E73FF;
+}
+
+._fd-box-space-input ._fd-x {
+    margin: 0 5px;
+}
+</style>