{"version":3,"file":"stylesheets/7930.css?h=b912d5109d0029706d70","mappings":"AAsKA,+CACA,eACA","sources":["webpack://@studip/core/./resources/vue/components/questionnaires/InputArray.vue"],"sourcesContent":["<template>\n    <div class=\"input-array\">\n        <span aria-live=\"assertive\" class=\"sr-only\">{{ assistiveLive }}</span>\n\n        <table class=\"default nohover\">\n            <colgroup>\n                <col style=\"width: 16px\">\n                <col>\n                <col v-for=\"i in additionalColspan\" :key=\"`colspan-${i}`\">\n                <col style=\"width: 24px\">\n            </colgroup>\n            <thead>\n                <tr>\n                    <th class=\"dragcolumn\"></th>\n                    <th>{{ labelPlural }}</th>\n                    <slot name=\"header-cells\" />\n                    <th class=\"actions\"></th>\n                </tr>\n            </thead>\n            <Draggable v-model=\"options\" handle=\".dragarea\" tag=\"tbody\" class=\"statements\">\n                <tr v-for=\"(option, index) in options\" :key=\"index\">\n                    <td class=\"dragcolumn\">\n                        <a class=\"dragarea\"\n                           tabindex=\"0\"\n                           :title=\"$gettextInterpolate($gettext(`Sortierelement für %{label} %{option}. Drücken Sie die Tasten Pfeil-nach-oben oder Pfeil-nach-unten, um dieses Element in der Liste zu verschieben.`), {option, label}, true)\"\n                           @keydown=\"keyHandler($event, index)\"\n                           ref=\"draghandle\">\n                            <span class=\"drag-handle\"></span>\n                        </a>\n                    </td>\n                    <td>\n                        <input type=\"text\"\n                               ref=\"inputs\"\n                               :placeholder=\"label\"\n                               @paste=\"(ev) => onPaste(ev, index)\"\n                               v-model=\"options[index]\">\n                    </td>\n                    <slot name=\"body-cells\" />\n                    <td class=\"actions\">\n                        <StudipIcon name=\"delete\"\n                                     shape=\"trash\"\n                                     :size=\"20\"\n                                     @click.prevent=\"deleteOption(index)\"\n                                     :title=\"$gettextInterpolate($gettext('%{label} löschen'), {label}, true)\"\n                        />\n                    </td>\n                </tr>\n            </Draggable>\n            <tfoot>\n                <tr>\n                    <td :colspan=\"3 + additionalColspan\">\n                        <button class=\"as-link\"\n                                :title=\"$gettextInterpolate($gettext('%{label} hinzufügen'),  {label}, true)\"\n                                @click.prevent=\"addOption()\">\n                            <StudipIcon shape=\"add\" :size=\"20\" alt=\"\" />\n                        </button>\n                    </td>\n                </tr>\n            </tfoot>\n        </table>\n    </div>\n</template>\n\n<script>\nimport Draggable from 'vuedraggable';\nimport { $gettext } from '../../../assets/javascripts/lib/gettext';\n\nexport default {\n    name: 'input-array',\n    components: { Draggable },\n    props: {\n        additionalColspan: {\n            type: Number,\n            default: 0,\n        },\n        label: {\n            type: String,\n            default: $gettext('Option'),\n        },\n        labelPlural: {\n            type: String,\n            default: $gettext('Optionen'),\n        },\n        value: Array,\n    },\n    data() {\n        return {\n            options: [],\n            assistiveLive: '',\n        };\n    },\n    methods: {\n        addOption(val = '', position = this.options.length) {\n            this.$set(this.options, position, val.trim());\n\n            this.$nextTick(() => {\n                this.$refs.inputs[position].focus();\n            });\n        },\n        deleteOption(index) {\n            const question = this.options[index] ? this.$gettext('Wirklich löschen?') : true;\n            STUDIP.Dialog.confirm(question).done(() => {\n                this.$delete(this.options, index);\n            });\n        },\n        onPaste(ev, position) {\n            ev.clipboardData\n                .getData('text')\n                .split(\"\\n\")\n                .filter(str => str.trim().length > 0)\n                .forEach((value, index) => this.addOption(value, position + index));\n            ev.preventDefault();\n        },\n        keyHandler(e, index) {\n            if (e.keyCode !== 38 && e.keyCode !== 40) {\n                return;\n            }\n\n            e.preventDefault();\n\n            const moveUp = e.keyCode === 38;\n\n            this.moveElement(index, moveUp ? -1 : 1).then((newIndex) => {\n                this.assistiveLive = this.$gettextInterpolate(\n                    this.$gettext('Aktuelle Position in der Liste: %{pos} von %{listLength}.'),\n                    {pos: newIndex + 1, listLength: this.options.length}\n                );\n\n                this.$nextTick(() => {\n                    this.$refs['draghandle'][newIndex].focus();\n                });\n            })\n        },\n        moveElement(index, direction) {\n            if (this.options[index + direction] === undefined) {\n                return Promise.resolve(index);\n            }\n\n            const indices = [index, index + direction].sort();\n\n            this.options.splice(\n                Math.min(...indices),\n                2,\n                ...indices.reverse().map(idx => this.options[idx])\n            );\n\n            return Promise.resolve(index + direction);\n        }\n    },\n    watch: {\n        options: {\n            handler(current) {\n                this.$emit('input', current);\n            },\n            deep: true\n        },\n        value: {\n            handler(current) {\n                this.options = current;\n            },\n            immediate: true\n        }\n    }\n}\n</script>\n<style scoped>\n.input-array input[type=\"text\"] {\n    max-width: unset;\n}\n</style>\n"],"names":[],"sourceRoot":""}