el-crud-page 1.0.2 → 1.0.4

package/dist/index.esm.js

@@ -2018,7 +2018,7 @@ var __vue_render__$2 = function __vue_render__() {
         }
       });
     })], 2) : item.type === "date" ? _c("el-date-picker", {
-      style: item.range ? _vm.dateRangeStyle : _vm.inputStyle,
+      style: _vm.inputStyle,
       attrs: {
         type: item.range ? "daterange" : "date",
         placeholder: item.placeholder,
@@ -2091,21 +2091,21 @@ __vue_render__$2._withStripped = true;
 /* style */
 var __vue_inject_styles__$2 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-ba1b80d0_0", {
-    source: ".container-main[data-v-ba1b80d0] {\n  background-color: #fff;\n}\n.el-crud-query[data-v-ba1b80d0] {\n  overflow: hidden;\n  padding: 10px;\n}\n.el-crud-query .el-crud-query-form[data-v-ba1b80d0] {\n  margin-bottom: -10px;\n}\n.el-crud-query .el-crud-query-form[data-v-ba1b80d0] .el-form-item--mini.el-form-item, .el-crud-query .el-crud-query-form[data-v-ba1b80d0] .el-form-item--small.el-form-item {\n  margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=queryForm.vue.map */",
+  inject("data-v-b77b7a9a_0", {
+    source: ".container-main[data-v-b77b7a9a] {\n  background-color: #fff;\n}\n.el-crud-query[data-v-b77b7a9a] {\n  overflow: hidden;\n  padding: 10px;\n}\n.el-crud-query .el-crud-query-form[data-v-b77b7a9a] {\n  margin-bottom: -10px;\n}\n.el-crud-query .el-crud-query-form[data-v-b77b7a9a] .el-form-item--mini.el-form-item, .el-crud-query .el-crud-query-form[data-v-b77b7a9a] .el-form-item--small.el-form-item {\n  margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=queryForm.vue.map */",
     map: {
       "version": 3,
       "sources": ["/Users/tonwe/git/el-crud-page/src/queryForm.vue", "queryForm.vue"],
       "names": [],
       "mappings": "AAgUA;EACA,sBAAA;AC/TA;ADiUA;EACA,gBAAA;EACA,aAAA;AC9TA;AD+TA;EACA,oBAAA;AC7TA;ADgUA;EACA,mBAAA;AC9TA;;AAEA,wCAAwC",
       "file": "queryForm.vue",
-      "sourcesContent": ["<template>\n    <!-- \n     \n    queryItems: [\n                // input string\n                {\n                    label: \"项目名称\",\n                    prop: \"name\",\n                    type: \"input\",\n                    placeholder: \"请输入项目名称\",\n                },\n                // select\n                {\n                    label: \"申办单位\",\n                    prop: \"sponsorId\",\n                    type: \"select\",\n                    placeholder: \"请选择申办单位\",\n                    options: [],\n                },\n                // date日期\n                {\n                    label: \"创建日期\",\n                    prop: [\"createDateStart\", \"createDateEnd\"],\n                    type: \"date\",\n                    range: true,\n                    placeholder: \"请选择创建日期\",\n                },\n                // datetime 时间\n                {\n                    label: \"更新时间\",\n                    prop: \"updateTime\",\n                    type: \"datetime\",\n                    placeholder: \"请选择更新时间\",\n                },\n            ],\n    \n    -->\n    <div class=\"container-main el-crud-query\" v-if=\"queryItems.length\">\n        <el-form :model=\"queryParams\" :size=\"size\" :style=\"{ maxHeight: expand ? '' : (formMaxHeight + 'px') }\"\n            ref=\"queryForm\" :inline=\"inline\" :label-width=\"labelWidthStr\" class=\"el-crud-query-form\" @submit.native.prevent>\n            <el-form-item v-for=\"item in queryFormItems\" v-show=\"expand || !item.hidden\" :label=\"item.label\"\n                :prop=\"item.prop\" :key=\"item.prop\">\n                <el-input v-if=\"item.type === 'input'\" v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\"\n                    clearable @keyup.enter.native=\"handleQuery\" :style=\"inputStyle\"></el-input>\n                <el-select v-else-if=\"item.type === 'select'\" v-model=\"queryParams[item.prop]\"\n                    :placeholder=\"item.placeholder\" clearable filterable\n                    @visible-change=\"($event) => item.visibleChange && item.visibleChange($event, queryParams)\"\n                    :style=\"inputStyle\">\n                    \n                    <template v-if=\"typeof item.options === 'function'\">\n                        <el-option v-for=\"option in item.options()\" :key=\"option.value\" :label=\"option.label\" :value=\"option.value\"></el-option>\n                    </template>\n                    <template v-else>\n                        <el-option v-for=\"option in item.options\" :key=\"option.value\" :label=\"option.label\" :value=\"option.value\"></el-option>\n                    </template>\n\n                </el-select>\n\n                <el-date-picker v-else-if=\"item.type === 'date'\" :type=\"item.range ? 'daterange' : 'date'\"\n                    v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\" clearable\n                    :start-placeholder=\"item['startPlaceholder'] || '开始日期'\"\n                    :end-placeholder=\"item['endPlaceholder'] || '结束日期'\" :range-separator=\"item['rangeSeparator']\"\n                    :value-format=\"item['valueFormat'] || 'yyyy-MM-dd'\"\n                    :style=\"item.range ? dateRangeStyle : inputStyle\"></el-date-picker>\n                <el-date-picker v-else-if=\"item.type === 'datetime'\" :type=\"item.range ? 'datetimerange' : 'datetime'\"\n                    v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\" clearable\n                    :start-placeholder=\"item['startPlaceholder'] || '开始时间'\"\n                    :end-placeholder=\"item['endPlaceholder'] || '结束时间'\" :range-separator=\"item['rangeSeparator']\"\n                    :value-format=\"item['valueFormat'] || 'yyyy-MM-dd HH:mm:ss'\"\n                    :style=\"item.range ? dateRangeStyle : inputStyle\"></el-date-picker>\n            </el-form-item>\n            <el-form-item label=\" \" ref=\"queryFormBtn\">\n                <el-button type=\"primary\" icon=\"el-icon-search\" @click=\"handleQuery\">搜索</el-button>\n                <el-button icon=\"el-icon-refresh\" @click=\"resetQuery\">重置</el-button>\n                <el-button type=\"text\" @click=\"handelExpand\" v-if=\"needExpand\">\n                    <span>更多</span>\n                    <i :class=\"expand ? 'el-icon-arrow-up' : 'el-icon-arrow-down'\"></i>\n                </el-button>\n            </el-form-item>\n        </el-form>\n    </div>\n\n</template>\n\n<script>\n\nimport { debounce } from './utils'\nexport default {\n    props: {\n\n        // queryParams: {\n        //     type: Object,\n        //     required: true\n        // },\n        queryItems: {\n            type: Array,\n            required: true\n        },\n        size: {\n            type: String,\n            default: 'mini'\n        },\n        labelWidth: {\n            type: Number,\n            default: 80\n        },\n        inputWidth: {\n            type: Number,\n            default: 200\n        },\n        lineClamp: {\n            type: Number,\n            default: 1\n        },\n        inline: {\n            type: Boolean,\n            default: true\n        }\n\n    },\n    watch: {\n        queryItems: {\n            handler(val) {\n                this.reset()\n            },\n            deep: true,\n            immediate: true\n        }\n    },\n    created() {\n         \n    },\n    data() {\n        return {\n            queryParams: {},\n            queryFormItems: [],\n            formMaxHeight: 0,\n            expand: false,\n            needExpand: false,\n            // 用于展示窗口大小变化绑定\n            $_sidebarElm: null,\n            $_resizeHandler: null\n        }\n    },\n    computed: {\n        labelWidthStr() {\n            if (typeof this.labelWidth === 'number') {\n                return this.labelWidth + 'px';\n            }\n            return this.labelWidth + 'px';\n        },\n        inputStyle() {\n            return {\n                width: this.inputWidth + 'px'\n            };\n        },\n        dateRangeStyle() {\n            return {\n                width: (this.inputWidth * 2 + this.labelWidth + 10) + 'px'\n            };\n        }\n    },\n    mounted() {\n        this.$nextTick(() => {\n            this.formMaxHeight = this.measureHeight() * this.lineClamp; \n            // this.handleNeedExpand()\n            this.redraw();\n            this.bindResize();\n            setTimeout(() => {\n                this.$_resizeHandler && this.$_resizeHandler();\n            }, 100);\n            \n        });\n\n    },\n    activated() {\n        if (!this.$_resizeHandler) {\n            this.bindResize();\n        }\n    },\n    beforeDestroy() {\n        this.unbindResize();\n    },\n    deactivated() {\n        this.unbindResize();\n    },\n    methods: {\n        $_sidebarResizeHandler(e) {\n            if (e.propertyName === 'width') {\n                this.$_resizeHandler()\n            }\n        },\n        // 展示窗口大小变化绑定\n        bindResize() {\n            this.$_resizeHandler = debounce(() => {\n                this.drawTime = 0;\n                this.queryFormItems.forEach(item => {\n                    item.hidden = false;\n                });\n                this.$nextTick(() => {\n                    this.handleNeedExpand()\n                    this.redraw();\n                })\n\n            }, 100)\n\n            window.addEventListener('resize', this.$_resizeHandler);\n            this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]\n            this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)\n\n\n        },\n        // unbindResize \n        unbindResize() {\n            window.removeEventListener('resize', this.$_resizeHandler)\n            this.$_resizeHandler = null\n            this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)\n        },\n        handelExpand() {\n            this.drawTime = 0;\n            this.expand = !this.expand;\n            this.$_resizeHandler();\n\n        },\n        handleNeedExpand() {\n            const $queryForm = this.$refs?.queryForm?.$el;\n            let scrollHeight = $queryForm.scrollHeight;\n            if ( this.formMaxHeight < scrollHeight) {\n                this.needExpand = true;\n            } else {\n                this.needExpand = false;\n            }\n\n        },\n        // \n        redraw() {\n            if (typeof this.drawTime == 'undefined') {\n                this.drawTime = 0;\n            }\n            if (this.drawTime > 60) {\n                return;\n            }\n            // 确保DOM完全渲染后再执行某些操作\n            const $queryForm = this.$refs?.queryForm?.$el;\n            if ($queryForm) {\n                $queryForm.style.overflow = \"hidden\";\n            }\n            this.$nextTick(() => {\n                let scrollHeight = $queryForm.scrollHeight;\n                let clientHeight = $queryForm.clientHeight;\n                if (scrollHeight > clientHeight) {\n                    this.drawTime++;\n                    let noHiddenItems = this.queryFormItems.filter(item => !item.hidden);\n                    let lastItem = noHiddenItems.find((item, index) => (noHiddenItems.length - 1 == index))\n                    if (lastItem) {\n                        this.$set(lastItem, 'hidden', true);\n                        this.redraw();\n                    }\n\n                }\n                // 判断是否有滚动条\n\n            });\n\n\n        },\n\n        //测量单行高度 + margin-top + margin-bottom\n        measureHeight() {\n            let queryFormBtn = this.$refs.queryFormBtn;\n            if(queryFormBtn){\n                let queryFormBtnHeight = queryFormBtn.$el.clientHeight || 29;\n                let queryFormItemsMarginTop = parseInt(window.getComputedStyle(queryFormBtn.$el).marginTop);\n                let queryFormItemsMarginBottom = parseInt(window.getComputedStyle(queryFormBtn.$el).marginBottom);\n                return queryFormBtnHeight + queryFormItemsMarginTop + queryFormItemsMarginBottom\n            }\n            \n        },\n\n        reset() {\n            this.queryItems.forEach(item => {\n                this.$set(this.queryParams, item.prop, null);\n            });\n            this.queryFormItems = this.queryItems.map(item => {\n                let placeholder = item.placeholder;\n                if( !placeholder){\n\n                    switch (item.type) {\n                        case 'input':\n                            placeholder = '请输入' + item.label;\n                            break;\n                        default:\n                            placeholder = '请选择' + item.label;\n                    }\n\n                }\n\n\n                return {\n                    ...item,\n                    placeholder,\n                    hidden: false\n                }\n            }); \n        },\n        resetQuery() {\n\n            this.$refs.queryForm?.resetFields();\n            this.handleQuery();\n        },\n        handleQuery() {\n            this.$emit('queryTable', this.queryParams);\n        }\n\n    }\n}\n\n</script>\n\n<style scoped lang=\"scss\">\n.container-main{\n    background-color: #fff;\n}\n.el-crud-query{\n    overflow: hidden;\n    padding: 10px;\n    .el-crud-query-form {\n        margin-bottom: -10px;\n\n        &::v-deep {\n            .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{\n                margin-bottom: 10px;\n            }\n        }\n    }\n}\n\n\n</style>\n", ".container-main {\n  background-color: #fff;\n}\n\n.el-crud-query {\n  overflow: hidden;\n  padding: 10px;\n}\n.el-crud-query .el-crud-query-form {\n  margin-bottom: -10px;\n}\n.el-crud-query .el-crud-query-form::v-deep .el-form-item--mini.el-form-item, .el-crud-query .el-crud-query-form::v-deep .el-form-item--small.el-form-item {\n  margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=queryForm.vue.map */"]
+      "sourcesContent": ["<template>\n    <!-- \n     \n    queryItems: [\n                // input string\n                {\n                    label: \"项目名称\",\n                    prop: \"name\",\n                    type: \"input\",\n                    placeholder: \"请输入项目名称\",\n                },\n                // select\n                {\n                    label: \"申办单位\",\n                    prop: \"sponsorId\",\n                    type: \"select\",\n                    placeholder: \"请选择申办单位\",\n                    options: [],\n                },\n                // date日期\n                {\n                    label: \"创建日期\",\n                    prop: [\"createDateStart\", \"createDateEnd\"],\n                    type: \"date\",\n                    range: true,\n                    placeholder: \"请选择创建日期\",\n                },\n                // datetime 时间\n                {\n                    label: \"更新时间\",\n                    prop: \"updateTime\",\n                    type: \"datetime\",\n                    placeholder: \"请选择更新时间\",\n                },\n            ],\n    \n    -->\n    <div class=\"container-main el-crud-query\" v-if=\"queryItems.length\">\n        <el-form :model=\"queryParams\" :size=\"size\" :style=\"{ maxHeight: expand ? '' : (formMaxHeight + 'px') }\"\n            ref=\"queryForm\" :inline=\"inline\" :label-width=\"labelWidthStr\" class=\"el-crud-query-form\" @submit.native.prevent>\n            <el-form-item v-for=\"item in queryFormItems\" v-show=\"expand || !item.hidden\" :label=\"item.label\"\n                :prop=\"item.prop\" :key=\"item.prop\">\n                <el-input v-if=\"item.type === 'input'\" v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\"\n                    clearable @keyup.enter.native=\"handleQuery\" :style=\"inputStyle\"></el-input>\n                <el-select v-else-if=\"item.type === 'select'\" v-model=\"queryParams[item.prop]\"\n                    :placeholder=\"item.placeholder\" clearable filterable\n                    @visible-change=\"($event) => item.visibleChange && item.visibleChange($event, queryParams)\"\n                    :style=\"inputStyle\">\n                    \n                    <template v-if=\"typeof item.options === 'function'\">\n                        <el-option v-for=\"option in item.options()\" :key=\"option.value\" :label=\"option.label\" :value=\"option.value\"></el-option>\n                    </template>\n                    <template v-else>\n                        <el-option v-for=\"option in item.options\" :key=\"option.value\" :label=\"option.label\" :value=\"option.value\"></el-option>\n                    </template>\n\n                </el-select>\n\n                <el-date-picker v-else-if=\"item.type === 'date'\" :type=\"item.range ? 'daterange' : 'date'\"\n                    v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\" clearable\n                    :start-placeholder=\"item['startPlaceholder'] || '开始日期'\"\n                    :end-placeholder=\"item['endPlaceholder'] || '结束日期'\" :range-separator=\"item['rangeSeparator']\"\n                    :value-format=\"item['valueFormat'] || 'yyyy-MM-dd'\"\n                    :style=\"inputStyle\"></el-date-picker>\n                <el-date-picker v-else-if=\"item.type === 'datetime'\" :type=\"item.range ? 'datetimerange' : 'datetime'\"\n                    v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\" clearable\n                    :start-placeholder=\"item['startPlaceholder'] || '开始时间'\"\n                    :end-placeholder=\"item['endPlaceholder'] || '结束时间'\" :range-separator=\"item['rangeSeparator']\"\n                    :value-format=\"item['valueFormat'] || 'yyyy-MM-dd HH:mm:ss'\"\n                    :style=\"item.range ? dateRangeStyle : inputStyle\"></el-date-picker>\n            </el-form-item>\n            <el-form-item label=\" \" ref=\"queryFormBtn\">\n                <el-button type=\"primary\" icon=\"el-icon-search\" @click=\"handleQuery\">搜索</el-button>\n                <el-button icon=\"el-icon-refresh\" @click=\"resetQuery\">重置</el-button>\n                <el-button type=\"text\" @click=\"handelExpand\" v-if=\"needExpand\">\n                    <span>更多</span>\n                    <i :class=\"expand ? 'el-icon-arrow-up' : 'el-icon-arrow-down'\"></i>\n                </el-button>\n            </el-form-item>\n        </el-form>\n    </div>\n\n</template>\n\n<script>\n\nimport { debounce } from './utils'\nexport default {\n    props: {\n\n        // queryParams: {\n        //     type: Object,\n        //     required: true\n        // },\n        queryItems: {\n            type: Array,\n            required: true\n        },\n        size: {\n            type: String,\n            default: 'mini'\n        },\n        labelWidth: {\n            type: Number,\n            default: 80\n        },\n        inputWidth: {\n            type: Number,\n            default: 200\n        },\n        lineClamp: {\n            type: Number,\n            default: 1\n        },\n        inline: {\n            type: Boolean,\n            default: true\n        }\n\n    },\n    watch: {\n        queryItems: {\n            handler(val) {\n                this.reset()\n            },\n            deep: true,\n            immediate: true\n        }\n    },\n    created() {\n         \n    },\n    data() {\n        return {\n            queryParams: {},\n            queryFormItems: [],\n            formMaxHeight: 0,\n            expand: false,\n            needExpand: false,\n            // 用于展示窗口大小变化绑定\n            $_sidebarElm: null,\n            $_resizeHandler: null\n        }\n    },\n    computed: {\n        labelWidthStr() {\n            if (typeof this.labelWidth === 'number') {\n                return this.labelWidth + 'px';\n            }\n            return this.labelWidth + 'px';\n        },\n        inputStyle() {\n            return {\n                width: this.inputWidth + 'px'\n            };\n        },\n        dateRangeStyle() {\n            return {\n                width: (this.inputWidth * 2 + this.labelWidth + 10) + 'px'\n            };\n        }\n    },\n    mounted() {\n        this.$nextTick(() => {\n            this.formMaxHeight = this.measureHeight() * this.lineClamp; \n            // this.handleNeedExpand()\n            this.redraw();\n            this.bindResize();\n            setTimeout(() => {\n                this.$_resizeHandler && this.$_resizeHandler();\n            }, 100);\n            \n        });\n\n    },\n    activated() {\n        if (!this.$_resizeHandler) {\n            this.bindResize();\n        }\n    },\n    beforeDestroy() {\n        this.unbindResize();\n    },\n    deactivated() {\n        this.unbindResize();\n    },\n    methods: {\n        $_sidebarResizeHandler(e) {\n            if (e.propertyName === 'width') {\n                this.$_resizeHandler()\n            }\n        },\n        // 展示窗口大小变化绑定\n        bindResize() {\n            this.$_resizeHandler = debounce(() => {\n                this.drawTime = 0;\n                this.queryFormItems.forEach(item => {\n                    item.hidden = false;\n                });\n                this.$nextTick(() => {\n                    this.handleNeedExpand()\n                    this.redraw();\n                })\n\n            }, 100)\n\n            window.addEventListener('resize', this.$_resizeHandler);\n            this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]\n            this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)\n\n\n        },\n        // unbindResize \n        unbindResize() {\n            window.removeEventListener('resize', this.$_resizeHandler)\n            this.$_resizeHandler = null\n            this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)\n        },\n        handelExpand() {\n            this.drawTime = 0;\n            this.expand = !this.expand;\n            this.$_resizeHandler();\n\n        },\n        handleNeedExpand() {\n            const $queryForm = this.$refs?.queryForm?.$el;\n            let scrollHeight = $queryForm.scrollHeight;\n            if ( this.formMaxHeight < scrollHeight) {\n                this.needExpand = true;\n            } else {\n                this.needExpand = false;\n            }\n\n        },\n        // \n        redraw() {\n            if (typeof this.drawTime == 'undefined') {\n                this.drawTime = 0;\n            }\n            if (this.drawTime > 60) {\n                return;\n            }\n            // 确保DOM完全渲染后再执行某些操作\n            const $queryForm = this.$refs?.queryForm?.$el;\n            if ($queryForm) {\n                $queryForm.style.overflow = \"hidden\";\n            }\n            this.$nextTick(() => {\n                let scrollHeight = $queryForm.scrollHeight;\n                let clientHeight = $queryForm.clientHeight;\n                if (scrollHeight > clientHeight) {\n                    this.drawTime++;\n                    let noHiddenItems = this.queryFormItems.filter(item => !item.hidden);\n                    let lastItem = noHiddenItems.find((item, index) => (noHiddenItems.length - 1 == index))\n                    if (lastItem) {\n                        this.$set(lastItem, 'hidden', true);\n                        this.redraw();\n                    }\n\n                }\n                // 判断是否有滚动条\n\n            });\n\n\n        },\n\n        //测量单行高度 + margin-top + margin-bottom\n        measureHeight() {\n            let queryFormBtn = this.$refs.queryFormBtn;\n            if(queryFormBtn){\n                let queryFormBtnHeight = queryFormBtn.$el.clientHeight || 29;\n                let queryFormItemsMarginTop = parseInt(window.getComputedStyle(queryFormBtn.$el).marginTop);\n                let queryFormItemsMarginBottom = parseInt(window.getComputedStyle(queryFormBtn.$el).marginBottom);\n                return queryFormBtnHeight + queryFormItemsMarginTop + queryFormItemsMarginBottom\n            }\n            \n        },\n\n        reset() {\n            this.queryItems.forEach(item => {\n                this.$set(this.queryParams, item.prop, null);\n            });\n            this.queryFormItems = this.queryItems.map(item => {\n                let placeholder = item.placeholder;\n                if( !placeholder){\n\n                    switch (item.type) {\n                        case 'input':\n                            placeholder = '请输入' + item.label;\n                            break;\n                        default:\n                            placeholder = '请选择' + item.label;\n                    }\n\n                }\n\n\n                return {\n                    ...item,\n                    placeholder,\n                    hidden: false\n                }\n            }); \n        },\n        resetQuery() {\n\n            this.$refs.queryForm?.resetFields();\n            this.handleQuery();\n        },\n        handleQuery() {\n            this.$emit('queryTable', this.queryParams);\n        }\n\n    }\n}\n\n</script>\n\n<style scoped lang=\"scss\">\n.container-main{\n    background-color: #fff;\n}\n.el-crud-query{\n    overflow: hidden;\n    padding: 10px;\n    .el-crud-query-form {\n        margin-bottom: -10px;\n\n        &::v-deep {\n            .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{\n                margin-bottom: 10px;\n            }\n        }\n    }\n}\n\n\n</style>\n", ".container-main {\n  background-color: #fff;\n}\n\n.el-crud-query {\n  overflow: hidden;\n  padding: 10px;\n}\n.el-crud-query .el-crud-query-form {\n  margin-bottom: -10px;\n}\n.el-crud-query .el-crud-query-form::v-deep .el-form-item--mini.el-form-item, .el-crud-query .el-crud-query-form::v-deep .el-form-item--small.el-form-item {\n  margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=queryForm.vue.map */"]
     },
     media: undefined
   });
 };
 /* scoped */
-var __vue_scope_id__$2 = "data-v-ba1b80d0";
+var __vue_scope_id__$2 = "data-v-b77b7a9a";
 /* module identifier */
 var __vue_module_identifier__$2 = undefined;
 /* functional template */
@@ -2791,7 +2791,7 @@ var __vue_component__ = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__
 }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
 
-___$insertStylesToHeader(".el-crud .flex {\n  display: flex;\n}\n.el-crud .inline-flex {\n  display: inline-flex;\n}\n.el-crud .hidden {\n  display: none;\n}\n.el-crud .block {\n  display: block;\n}\n.el-crud .inline-block {\n  display: inline-block;\n}\n.el-crud .flex-row {\n  flex-direction: row;\n}\n.el-crud .flex-row-reverse {\n  flex-direction: row-reverse;\n}\n.el-crud .flex-col {\n  flex-direction: column;\n}\n.el-crud .flex-col-reverse {\n  flex-direction: column-reverse;\n}\n.el-crud .flex-wrap {\n  flex-wrap: wrap;\n}\n.el-crud .flex-nowrap {\n  flex-wrap: nowrap;\n}\n.el-crud .flex-wrap-reverse {\n  flex-wrap: wrap-reverse;\n}\n.el-crud .justify-start {\n  justify-content: flex-start;\n}\n.el-crud .justify-end {\n  justify-content: flex-end;\n}\n.el-crud .justify-center {\n  justify-content: center;\n}\n.el-crud .justify-between {\n  justify-content: space-between;\n}\n.el-crud .justify-around {\n  justify-content: space-around;\n}\n.el-crud .justify-evenly {\n  justify-content: space-evenly;\n}\n.el-crud .items-start {\n  align-items: flex-start;\n}\n.el-crud .items-end {\n  align-items: flex-end;\n}\n.el-crud .items-center {\n  align-items: center;\n}\n.el-crud .items-baseline {\n  align-items: baseline;\n}\n.el-crud .items-stretch {\n  align-items: stretch;\n}\n.el-crud .content-start {\n  align-content: flex-start;\n}\n.el-crud .content-end {\n  align-content: flex-end;\n}\n.el-crud .content-center {\n  align-content: center;\n}\n.el-crud .content-between {\n  align-content: space-between;\n}\n.el-crud .content-around {\n  align-content: space-around;\n}\n.el-crud .content-evenly {\n  align-content: space-evenly;\n}\n.el-crud .self-auto {\n  align-self: auto;\n}\n.el-crud .self-start {\n  align-self: flex-start;\n}\n.el-crud .self-end {\n  align-self: flex-end;\n}\n.el-crud .self-center {\n  align-self: center;\n}\n.el-crud .self-stretch {\n  align-self: stretch;\n}\n.el-crud .flex-1 {\n  flex: 1 1 0%;\n}\n.el-crud .flex-auto {\n  flex: 1 1 auto;\n}\n.el-crud .flex-initial {\n  flex: 0 1 auto;\n}\n.el-crud .flex-none {\n  flex: none;\n}\n.el-crud .grow {\n  flex-grow: 1;\n}\n.el-crud .grow-0 {\n  flex-grow: 0;\n}\n.el-crud .shrink {\n  flex-shrink: 1;\n}\n.el-crud .shrink-0 {\n  flex-shrink: 0;\n}\n.el-crud .w-full {\n  width: 100%;\n}\n.el-crud .w-auto {\n  width: auto;\n}\n.el-crud .h-full {\n  height: 100%;\n}\n.el-crud .h-auto {\n  height: auto;\n}\n.el-crud .h-screen {\n  height: 100vh;\n}\n.el-crud .m-0 {\n  margin: 0;\n}\n.el-crud .m-auto {\n  margin: auto;\n}\n.el-crud .mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.el-crud .my-auto {\n  margin-top: auto;\n  margin-bottom: auto;\n}\n.el-crud .text-left {\n  text-align: left;\n}\n.el-crud .text-center {\n  text-align: center;\n}\n.el-crud .text-right {\n  text-align: right;\n}\n.el-crud .text-justify {\n  text-align: justify;\n}\n.el-crud .font-normal {\n  font-weight: 400;\n}\n.el-crud .font-medium {\n  font-weight: 500;\n}\n.el-crud .font-semibold {\n  font-weight: 600;\n}\n.el-crud .font-bold {\n  font-weight: 700;\n}\n.el-crud .overflow-hidden {\n  overflow: hidden;\n}\n.el-crud .overflow-auto {\n  overflow: auto;\n}\n.el-crud .overflow-scroll {\n  overflow: scroll;\n}\n.el-crud .overflow-x-auto {\n  overflow-x: auto;\n}\n.el-crud .overflow-y-auto {\n  overflow-y: auto;\n}\n.el-crud .relative {\n  position: relative;\n}\n.el-crud .absolute {\n  position: absolute;\n}\n.el-crud .fixed {\n  position: fixed;\n}\n.el-crud .sticky {\n  position: sticky;\n}\n.el-crud .cursor-pointer {\n  cursor: pointer;\n}\n.el-crud .cursor-not-allowed {\n  cursor: not-allowed;\n}\n.el-crud-toolbar {\n  margin-top: 10px;\n}\n.el-crud .crud-table {\n  margin-top: 10px;\n}\n\n/*# sourceMappingURL=output.css.map */");
+___$insertStylesToHeader(".el-crud .flex {\n  display: flex;\n}\n.el-crud .inline-flex {\n  display: inline-flex;\n}\n.el-crud .hidden {\n  display: none;\n}\n.el-crud .block {\n  display: block;\n}\n.el-crud .inline-block {\n  display: inline-block;\n}\n.el-crud .flex-row {\n  flex-direction: row;\n}\n.el-crud .flex-row-reverse {\n  flex-direction: row-reverse;\n}\n.el-crud .flex-col {\n  flex-direction: column;\n}\n.el-crud .flex-col-reverse {\n  flex-direction: column-reverse;\n}\n.el-crud .flex-wrap {\n  flex-wrap: wrap;\n}\n.el-crud .flex-nowrap {\n  flex-wrap: nowrap;\n}\n.el-crud .flex-wrap-reverse {\n  flex-wrap: wrap-reverse;\n}\n.el-crud .justify-start {\n  justify-content: flex-start;\n}\n.el-crud .justify-end {\n  justify-content: flex-end;\n}\n.el-crud .justify-center {\n  justify-content: center;\n}\n.el-crud .justify-between {\n  justify-content: space-between;\n}\n.el-crud .justify-around {\n  justify-content: space-around;\n}\n.el-crud .justify-evenly {\n  justify-content: space-evenly;\n}\n.el-crud .items-start {\n  align-items: flex-start;\n}\n.el-crud .items-end {\n  align-items: flex-end;\n}\n.el-crud .items-center {\n  align-items: center;\n}\n.el-crud .items-baseline {\n  align-items: baseline;\n}\n.el-crud .items-stretch {\n  align-items: stretch;\n}\n.el-crud .content-start {\n  align-content: flex-start;\n}\n.el-crud .content-end {\n  align-content: flex-end;\n}\n.el-crud .content-center {\n  align-content: center;\n}\n.el-crud .content-between {\n  align-content: space-between;\n}\n.el-crud .content-around {\n  align-content: space-around;\n}\n.el-crud .content-evenly {\n  align-content: space-evenly;\n}\n.el-crud .self-auto {\n  align-self: auto;\n}\n.el-crud .self-start {\n  align-self: flex-start;\n}\n.el-crud .self-end {\n  align-self: flex-end;\n}\n.el-crud .self-center {\n  align-self: center;\n}\n.el-crud .self-stretch {\n  align-self: stretch;\n}\n.el-crud .flex-1 {\n  flex: 1 1 0%;\n}\n.el-crud .flex-auto {\n  flex: 1 1 auto;\n}\n.el-crud .flex-initial {\n  flex: 0 1 auto;\n}\n.el-crud .flex-none {\n  flex: none;\n}\n.el-crud .grow {\n  flex-grow: 1;\n}\n.el-crud .grow-0 {\n  flex-grow: 0;\n}\n.el-crud .shrink {\n  flex-shrink: 1;\n}\n.el-crud .shrink-0 {\n  flex-shrink: 0;\n}\n.el-crud .w-full {\n  width: 100%;\n}\n.el-crud .w-auto {\n  width: auto;\n}\n.el-crud .h-full {\n  height: 100%;\n}\n.el-crud .h-auto {\n  height: auto;\n}\n.el-crud .h-screen {\n  height: 100vh;\n}\n.el-crud .m-0 {\n  margin: 0;\n}\n.el-crud .m-auto {\n  margin: auto;\n}\n.el-crud .mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.el-crud .my-auto {\n  margin-top: auto;\n  margin-bottom: auto;\n}\n.el-crud .text-left {\n  text-align: left;\n}\n.el-crud .text-center {\n  text-align: center;\n}\n.el-crud .text-right {\n  text-align: right;\n}\n.el-crud .text-justify {\n  text-align: justify;\n}\n.el-crud .font-normal {\n  font-weight: 400;\n}\n.el-crud .font-medium {\n  font-weight: 500;\n}\n.el-crud .font-semibold {\n  font-weight: 600;\n}\n.el-crud .font-bold {\n  font-weight: 700;\n}\n.el-crud .overflow-hidden {\n  overflow: hidden;\n}\n.el-crud .overflow-auto {\n  overflow: auto;\n}\n.el-crud .overflow-scroll {\n  overflow: scroll;\n}\n.el-crud .overflow-x-auto {\n  overflow-x: auto;\n}\n.el-crud .overflow-y-auto {\n  overflow-y: auto;\n}\n.el-crud .relative {\n  position: relative;\n}\n.el-crud .absolute {\n  position: absolute;\n}\n.el-crud .fixed {\n  position: fixed;\n}\n.el-crud .sticky {\n  position: sticky;\n}\n.el-crud .cursor-pointer {\n  cursor: pointer;\n}\n.el-crud .cursor-not-allowed {\n  cursor: not-allowed;\n}\n.el-crud .crud-table {\n  margin-top: 10px;\n}\n\n/*# sourceMappingURL=output.css.map */");
 
 export { __vue_component__ as Crud, __vue_component__$4 as CrudTable, __vue_component__$2 as QueryForm };
 //# sourceMappingURL=index.esm.js.map