{"version":3,"file":"KrMultipleChoice.cjs","sources":["../../../../../packages/src/kr-multiple-choice/KrMultipleChoice.vue"],"sourcesContent":["<template>\n    <!-- 单选题 -->\n    <div class=\"question-item\">\n        <div class=\"question-item-num\">\n            <question-title v-if=\"titleIsEdit\" :dataList=\"dataList\" @numberBlur=\"(e) => emits('numberChange', e)\" />\n            <div v-else style=\"margin-top: 8px\">{{ dataList.questionNumber }}</div>\n        </div>\n        <div class=\"question-item-content\">\n            <div class=\"title\">\n                <rich-text-editor ref=\"titileInput\" class=\"titile-input\" v-model:valueData=\"dataList.title\" />\n            </div>\n            <ul class=\"content\">\n                <draggable\n                    :class=\"dataList.array != '1' ? 'mul-colums' : ''\"\n                    :group=\"{\n                        name: 'name1',\n                        put: false,\n                        pull: false,\n                    }\"\n                    force-fallback=\"true\"\n                    v-model=\"dataList.optionsList\"\n                    animation=\"300\"\n                    itemKey=\"value\"\n                    handle=\".operation-drag\"\n                    ghostClass=\"option-ghost-class\"\n                >\n                    <template #item=\"{ element, index }\">\n                        <li\n                            class=\"content-item\"\n                            :style=\"{\n                                paddingLeft: element.type != 'group' ? '32px' : '',\n                            }\"\n                        >\n                            <div class=\"placeholder-content\">\n                                <div v-if=\"element.type != 'group'\" class=\"icon-box\">\n                                    <div class=\"icon\"></div>\n                                </div>\n                                <!-- 输入框 -->\n                                <rich-text-editor\n                                    :class=\"element.other ? 'content-input content-input-other' : 'content-input'\"\n                                    v-model:valueData=\"element.label\"\n                                    @mouseenter=\"() => (element.buttonShowHover = true)\"\n                                    @mouseleave=\"() => (element.buttonShowHover = false)\"\n                                    @focus=\"() => (element.buttonShow = true)\"\n                                    @blur=\"() => (element.buttonShow = false)\"\n                                >\n                                    <template #operation>\n                                        <!-- 鼠标触摸展示的按钮 -->\n                                        <div class=\"operation-box\" v-show=\"element.buttonShowHover || element.buttonShow\">\n                                            <div class=\"operation-drag\">\n                                                <el-tooltip content=\"长按拖动\" effect=\"customized\" placement=\"top\">\n                                                    <svg-icon name=\"operationDrag\" class=\"svg-icon\" />\n                                                </el-tooltip>\n                                            </div>\n                                            <div class=\"operation-group\" v-if=\"element.type != 'group'\" @click=\"groupOption(index)\">\n                                                <el-tooltip content=\"分组\" effect=\"customized\" placement=\"top\">\n                                                    <svg-icon name=\"operationVector\" class=\"svg-icon\" />\n                                                </el-tooltip>\n                                            </div>\n                                            <div class=\"operation-delete\" v-if=\"dataList.optionsList.length > 1\" @click=\"deleteOption(index)\">\n                                                <el-tooltip content=\"删除\" effect=\"customized\" placement=\"top\">\n                                                    <svg-icon name=\"operationDelete\" class=\"svg-icon\" />\n                                                </el-tooltip>\n                                            </div>\n                                        </div>\n                                    </template>\n                                </rich-text-editor>\n                            </div>\n                        </li>\n                    </template>\n                </draggable>\n            </ul>\n            <!-- 底部操作栏 -->\n            <div class=\"footer-operation\">\n                <action-bar\n                    class=\"action-bar\"\n                    @addCopy=\"() => emits('copyQuestion', dataList)\"\n                    @deleteQuestion=\"() => emits('deleteQuestion')\"\n                    @view=\"(e) => emits('singlePreview', e)\"\n                >\n                    <!-- 添加左侧操作按钮 -->\n                    <template #operation>\n                        <div class=\"bottom-operation\">\n                            <div class=\"button1\" @click=\"addSingleOption(false)\"><svg-icon name=\"addOption\" class=\"icon\" />添加选项</div>\n                            <div class=\"button1\" @click=\"addSingleOption(true)\"><svg-icon name=\"addOption\" class=\"icon\" />添加其他项</div>\n                            <div class=\"button1\" @click=\"openBatchDialog\"><svg-icon name=\"batchEdit\" class=\"icon\" />批量编辑选项</div>\n                        </div>\n                    </template>\n                </action-bar>\n            </div>\n            <batch-edit ref=\"batchEdit\" :optionsList=\"dataList.optionsList\" @confirmOption=\"confirmOption\" />\n        </div>\n    </div>\n</template>\n<script setup name=\"kr-multiple-choice\">\n// js\nimport Draggable from \"vuedraggable\";\nimport { ref, watch, provide } from \"vue\";\n// components\nimport RichTextEditor from \"@/components/editor/RichTextEditor.vue\";\nimport ActionBar from \"@/components/action/ActionBar.vue\";\nimport BatchEdit from \"@/components/dialog/BatchEdit.vue\";\nimport QuestionTitle from \"@/components/question/QuestionNumber.vue\";\n\n// props\nconst props = defineProps({\n    // 是否展示底部操作栏\n    footerShow: {\n        type: Boolean,\n        default: true,\n    },\n    // 题号是否可编辑\n    titleIsEdit: {\n        type: Boolean,\n        default: true,\n    },\n    // 数据渲染\n    dataList: {\n        type: Object,\n        default: () => ({}),\n    },\n});\nconst emits = defineEmits([\"copyQuestion\", \"deleteQuestion\", \"change\", \"singlePreview\", \"numberChange\"]); // 复制题目，删除题目, 数据改变, 单题预览;\n\nconst batchEdit = ref(null);\nconst titileInput = ref(null);\nlet liWidth = ref(\"\");\n\nwatch(\n    () => props.dataList,\n    (curr, old) => {\n        const array = props.dataList.array;\n        const width = [\"\", \"100%\", \"50%\", \"33%\"];\n        // 每列宽度\n        liWidth.value = width[array];\n\n        // 绑定数据改变时调change方法\n        emits(\"change\", curr);\n    },\n    { deep: true }\n);\nprovide(\"data\", props.dataList);\ndefineExpose({ titileInput });\n\n// 打开批量编辑选项弹框\nfunction openBatchDialog() {\n    batchEdit.value.dialogVisible = true;\n    batchEdit.value.newOption = \"\";\n}\n\nfunction confirmOption(data) {\n    props.dataList.optionsList = data;\n}\n\n// 删除当前选项\nfunction deleteOption(index) {\n    props.dataList.optionsList.splice(index, 1);\n}\n// 当前题型前添加分组\nfunction groupOption(index) {\n    // other 是其他选项 true和undefined\n    let defaultHolder = \"组\";\n    let obj = {\n        label: defaultHolder,\n        value: props.dataList.optionsList.length + 1,\n        type: \"group\",\n    };\n    props.dataList.optionsList.splice(index, 0, obj);\n}\n// 添加单个选项\nfunction addSingleOption(other) {\n    // other 是其他选项 true和undefined\n    let defaultHolder = other ? \"其他\" : `选项${props.dataList.optionsList.length + 1}`;\n    let obj = {\n        label: defaultHolder,\n        value: props.dataList.optionsList.length + 1,\n        other,\n    };\n    props.dataList.optionsList.push(obj);\n}\n</script>\n<style lang=\"scss\" scoped>\n@use \"@/css/common.scss\" as *;\n\n.mul-colums {\n    display: flex;\n    flex-wrap: wrap;\n    .content-item {\n        width: v-bind(liWidth);\n    }\n}\n.content {\n    width: calc(100% - 200px);\n    margin-left: 0 !important;\n    .content-item {\n        // background-color: #fff;\n        position: relative;\n        margin-bottom: 6px;\n\n        cursor: pointer;\n        .icon-box {\n            position: absolute;\n            top: 50%;\n            left: 9px;\n            transform: translateY(-50%);\n            .icon {\n                width: 16px;\n                height: 16px;\n                border: 1px solid #ccc;\n                border-radius: 2px;\n                background-color: #fff;\n            }\n        }\n        .content-input-other {\n            :deep(.editor-content::after) {\n                position: relative;\n                top: 4px;\n                content: \"\";\n                display: inline-block;\n                width: 92px;\n                height: 19px;\n                border: 1px solid rgba(235, 237, 243, 1);\n                border-radius: 4px;\n                background-color: #fff;\n                margin-left: 10px;\n            }\n        }\n        .content-input {\n            width: calc(100% - 110px);\n            color: rgba(112, 120, 134, 1) !important;\n        }\n        .operation-box {\n            display: flex;\n            align-items: center;\n            position: absolute;\n            top: 50%;\n            right: 0;\n            transform: translate(100%, -50%);\n            color: #9aa1ad;\n        }\n        .left-drag-icon,\n        .operation-delete,\n        .operation-add,\n        .operation-drag,\n        .operation-group {\n            width: 20px;\n            height: 20px;\n            margin-left: 15px;\n            .svg-icon {\n                width: 100%;\n                height: 100%;\n                &:hover {\n                    color: rgb(34, 64, 195);\n                }\n            }\n        }\n        .operation-delete .svg-icon:hover {\n            color: red;\n        }\n    }\n}\n</style>\n"],"names":["batchEdit","ref","titileInput","liWidth","watch","props","curr","old","array","width","emits","provide","expose","openBatchDialog","confirmOption","data","deleteOption","index","groupOption","obj","addSingleOption","other"],"mappings":"iyCA4HA,MAAAA,EAAAC,EAAAA,IAAA,IAAA,EACAC,EAAAD,EAAAA,IAAA,IAAA,EACA,IAAAE,EAAAF,EAAAA,IAAA,EAAA,EAEAG,EAAA,MACA,IAAAC,EAAA,SACA,CAAAC,EAAAC,IAAA,CACA,MAAAC,EAAAH,EAAA,SAAA,MACAI,EAAA,CAAA,GAAA,OAAA,MAAA,KAAA,EAEAN,EAAA,MAAAM,EAAAD,CAAA,EAGAE,EAAA,SAAAJ,CAAA,CACA,EACA,CAAA,KAAA,EAAA,CACA,EACAK,EAAAA,QAAA,OAAAN,EAAA,QAAA,EACAO,EAAA,CAAA,YAAAV,CAAA,CAAA,EAGA,SAAAW,GAAA,CACAb,EAAA,MAAA,cAAA,GACAA,EAAA,MAAA,UAAA,EACA,CAEA,SAAAc,EAAAC,EAAA,CACAV,EAAA,SAAA,YAAAU,CACA,CAGA,SAAAC,EAAAC,EAAA,CACAZ,EAAA,SAAA,YAAA,OAAAY,EAAA,CAAA,CACA,CAEA,SAAAC,EAAAD,EAAA,CAGA,IAAAE,EAAA,CACA,MAFA,IAGA,MAAAd,EAAA,SAAA,YAAA,OAAA,EACA,KAAA,OACA,EACAA,EAAA,SAAA,YAAA,OAAAY,EAAA,EAAAE,CAAA,CACA,CAEA,SAAAC,EAAAC,EAAA,CAGA,IAAAF,EAAA,CACA,MAFAE,EAAA,KAAA,KAAAhB,EAAA,SAAA,YAAA,OAAA,IAGA,MAAAA,EAAA,SAAA,YAAA,OAAA,EACA,MAAAgB,CACA,EACAhB,EAAA,SAAA,YAAA,KAAAc,CAAA,CACA"}