@houaoran/designer 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@houaoran/designer",
-    "version": "1.0.0",
+    "version": "1.0.2",
     "description": "好用的Vue低代码可视化表单设计器，可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率。",
     "unpkg": "./dist/index.umd.js",
     "jsdelivr": "./dist/index.umd.js",

package/src/components/InputRange.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="_fc-input-range">
+        <el-input-number
+            v-model="start"
+            :min="min"
+            :max="end ?? max"
+            :step="step"
+            :disabled="disabled"
+            :placeholder="startPlaceholder"
+            controls-position="right"
+            @change="emitChange"
+        />
+        <span class="_fc-input-range-sep">{{ separator }}</span>
+        <el-input-number
+            v-model="end"
+            :min="start ?? min"
+            :max="max"
+            :step="step"
+            :disabled="disabled"
+            :placeholder="endPlaceholder"
+            controls-position="right"
+            @change="emitChange"
+        />
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'InputRange',
+    emits: ['update:modelValue', 'change'],
+    props: {
+        modelValue: {
+            type: Array,
+            default: () => [null, null],
+        },
+        min: Number,
+        max: Number,
+        step: { type: Number, default: 1 },
+        disabled: Boolean,
+        separator: { type: String, default: '~' },
+        startPlaceholder: String,
+        endPlaceholder: String,
+    },
+    computed: {
+        start: {
+            get() { return this.modelValue?.[0] ?? null; },
+            set(val) { this.update([val, this.end]); },
+        },
+        end: {
+            get() { return this.modelValue?.[1] ?? null; },
+            set(val) { this.update([this.start, val]); },
+        },
+    },
+    methods: {
+        update(val) {
+            this.$emit('update:modelValue', val);
+            this.$emit('change', val);
+        },
+        emitChange() {
+            this.$emit('change', [this.start, this.end]);
+        },
+    },
+});
+</script>
+
+<style scoped>
+._fc-input-range {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+}
+._fc-input-range-sep {
+    color: #909399;
+}
+</style>

package/src/config/index.js

@@ -40,11 +40,12 @@ import tableForm from './rule/tableForm';
 import tableFormColumn from './rule/tableFormColumn';
 import image from './rule/image';
 import signaturePad from './rule/signaturePad';
+import inputRange from './rule/inputRange';
 import title from './rule/title';
 
 
 const ruleList = [
-    input, textarea, password, number, radio, checkbox, select, _switch, rate, time, timeRange, slider, date, dateRange, color, cascader, upload, transfer, tree, treeSelect, editor, signaturePad,
+    input, textarea, password, number, inputRange, radio, checkbox, select, _switch, rate, time, timeRange, slider, date, dateRange, color, cascader, upload, transfer, tree, treeSelect, editor, signaturePad,
     group, subForm, tableForm, tableFormColumn,
     alert, button, text, title, html, divider, tag, image,
     row, table, tabs, space, card, collapse,

package/src/config/rule/inputRange.js

@@ -0,0 +1,39 @@
+import uniqueId from '@form-create/utils/lib/unique';
+import {localeProps} from '../../utils';
+
+const label = '数值范围';
+const name = 'inputRange';
+
+export default {
+    menu: 'main',
+    icon: 'icon-number',
+    label,
+    name,
+    input: true,
+    event: ['change'],
+    validate: ['array'],
+    rule({t}) {
+        return {
+            type: 'InputRange',
+            field: uniqueId(),
+            title: t('com.inputRange.name'),
+            info: '',
+            $required: false,
+            value: [null, null],
+            props: {
+                separator: '~',
+            },
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [
+            {type: 'switch', field: 'disabled'},
+            {type: 'inputNumber', field: 'min'},
+            {type: 'inputNumber', field: 'max'},
+            {type: 'inputNumber', field: 'step', props: {min: 0}, value: 1},
+            {type: 'input', field: 'separator', value: '~'},
+            {type: 'input', field: 'startPlaceholder'},
+            {type: 'input', field: 'endPlaceholder'},
+        ]);
+    },
+};

package/src/form/index.js

@@ -4,6 +4,7 @@ import FcTitle from '../components/FcTitle.vue';
 import SignaturePad from '../components/SignaturePad.vue';
 import TableForm from '../components/tableForm/TableForm.vue';
 import Table from '../components/table/Table.vue';
+import InputRange from '../components/InputRange.vue';
 import '../style/icon.css';
 
 const install = (formCreate) => {
@@ -12,6 +13,7 @@ const install = (formCreate) => {
     formCreate.component('SignaturePad', SignaturePad);
     formCreate.component('TableForm', TableForm);
     formCreate.component('FcTable', Table);
+    formCreate.component('InputRange', InputRange);
 }
 
 install(formCreate);

package/src/index.js

@@ -31,6 +31,7 @@ import ValueInput from './components/ValueInput.vue';
 import formCreate, {designerForm} from './utils/form';
 import FcEditor from '@form-create/component-wangeditor';
 import draggable from 'vuedraggable/src/vuedraggable';
+import InputRange from './components/InputRange.vue';
 import {
     compareVersion,
     copyTextToClipboard,
@@ -84,7 +85,7 @@ addComponent('FcTitle', FcTitle);
 addComponent('SignaturePad', SignaturePad);
 addComponent('TableForm', TableForm, TableFormView);
 addComponent('FcTable', Table, TableView);
-
+addComponent('InputRange', InputRange);
 const install = function (Vue) {
     Vue.component('FcDesigner', FcDesigner);
 };

package/src/locale/en.js

@@ -749,6 +749,18 @@ const En = {
                 placeholder: 'Placeholder'
             }
         },
+        inputRange: {
+            name: 'Input Range',
+            props: {
+                disabled: 'Disabled',
+                min: 'Minimum value',
+                max: 'Maximum value',
+                step: 'Step',
+                separator: 'Separator',
+                startPlaceholder: 'Start placeholder',
+                endPlaceholder: 'End placeholder',
+            }
+        },
         password: {
             name: 'Password',
             event: {

package/src/locale/zh-cn.js

@@ -750,6 +750,18 @@ const ZhCn = {
                 placeholder: '输入框占位文本'
             }
         },
+        inputRange: {
+            name: '数值范围',
+            props: {
+                disabled: '是否禁用',
+                min: '最小值',
+                max: '最大值',
+                step: '步长',
+                separator: '分隔符',
+                startPlaceholder: '起始占位符',
+                endPlaceholder: '结束占位符',
+            }
+        },
         password: {
             name: '密码输入框',
             event: {