{"version":3,"file":"KrSort.cjs","sources":["../../../../../packages/src/kr-sort/KrSort.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                    :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=\"id\"\n                    handle=\".operation-drag\"\n                    ghostClass=\"option-ghost-class\"\n                >\n                    <template #item=\"{ element, index }\">\n                        <li class=\"content-item\">\n                            <div class=\"placeholder-content\">\n                                <!-- 输入框 -->\n                                <div class=\"operation-drag\">\n                                    <!-- <img src=\"@/images/icon/operation_drag2@3x.png\" /> -->\n                                    <svg-icon name=\"operationSort\" class=\"svg-icon\" />\n                                </div>\n                                <rich-text-editor\n                                    :class=\"element.other ? 'content-input content-input-other' : 'content-input'\"\n                                    v-model:valueData=\"element.value\"\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.buttonShow || element.buttonShowHover\">\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-sort\">\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});\n// 复制题目，删除题目, 数据改变, 单题预览;\nconst emits = defineEmits([\"copyQuestion\", \"deleteQuestion\", \"change\", \"singlePreview\", \"numberChange\"]);\nconst batchEdit = ref(null);\nconst titileInput = ref(null);\nwatch(\n    () => props.dataList,\n    (curr, old) => {\n        emits(\"change\", curr);\n    },\n    { deep: true }\n);\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\n// 添加单个选项\nfunction addSingleOption(other) {\n    // other 是其他选项 true和undefined\n    let defaultHolder = other ? \"其他\" : `选项${props.dataList.optionsList.length + 1}`;\n    let obj = {\n        value: defaultHolder,\n        id: `1-${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.content {\n    width: calc(100% - 206px);\n}\n.content-item {\n    position: relative;\n    // background-color: #fff;\n    position: relative;\n    margin-bottom: 6px;\n    padding-left: 23px;\n    cursor: pointer;\n    .content-input {\n        color: rgba(112, 120, 134, 1) !important;\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    .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    .operation-delete {\n        width: 18px;\n        height: 18px;\n        margin-left: 10px;\n        .svg-icon {\n            width: 100%;\n            height: 100%;\n            &:hover {\n                color: red;\n            }\n        }\n    }\n    .operation-drag {\n        position: absolute;\n        left: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 18px;\n        height: 18px;\n        color: #9aa1ad;\n        .svg-icon {\n            width: 100%;\n            height: 100%;\n            &:hover {\n                color: #2672ff;\n            }\n        }\n    }\n}\n</style>\n"],"names":["batchEdit","ref","titileInput","watch","props","curr","old","emits","provide","expose","openBatchDialog","confirmOption","data","deleteOption","index","addSingleOption","other","obj"],"mappings":"klCA6GAA,EAAAC,EAAAA,IAAA,IAAA,EACAC,EAAAD,EAAAA,IAAA,IAAA,EACAE,EAAA,MACA,IAAAC,EAAA,SACA,CAAAC,EAAAC,IAAA,CACAC,EAAA,SAAAF,CAAA,CACA,EACA,CAAA,KAAA,EAAA,CACA,EAEAG,EAAAA,QAAA,OAAAJ,EAAA,QAAA,EACAK,EAAA,CAAA,YAAAP,CAAA,CAAA,EAGA,SAAAQ,GAAA,CACAV,EAAA,MAAA,cAAA,GACAA,EAAA,MAAA,UAAA,EACA,CAEA,SAAAW,EAAAC,EAAA,CACAR,EAAA,SAAA,YAAAQ,CACA,CAGA,SAAAC,EAAAC,EAAA,CACAV,EAAA,SAAA,YAAA,OAAAU,EAAA,CAAA,CACA,CAGA,SAAAC,EAAAC,EAAA,CAGA,IAAAC,EAAA,CACA,MAFAD,EAAA,KAAA,KAAAZ,EAAA,SAAA,YAAA,OAAA,IAGA,GAAA,KAAAA,EAAA,SAAA,YAAA,OAAA,IACA,MAAAY,CACA,EACAZ,EAAA,SAAA,YAAA,KAAAa,CAAA,CACA"}