{"version":3,"file":"ClassicTagInput-HM3VUbHp.mjs","names":[],"sources":["../src/components/form/ClassicTagInput.vue","../src/components/form/ClassicTagInput.vue"],"sourcesContent":["<template>\n    <div\n        class=\"d-flex flex-wrap border align-items-center rounded px-2\"\n    >\n        <div\n            v-for=\"(tag, index) in tags\"\n            :key=\"tag\"\n            class=\"vs__selected p-0 my-0 mx-1\"\n            :class=\"getClass(tag)\"\n        >\n            <!--<button\n                v-if=\"index !== tagToEdit\"-->\n            <button\n                :id=\"'display-input-tag-' + index\"\n                class=\"btn-transparent d-flex align-items\"\n                @click=\"startEditTag(index, tag)\"\n            >\n                <!--<img\n                    v-if=\"isOuestFranceTag(tag)\"\n                    width=\"20\"\n                    height=\"20\"\n                    class=\"ouest-france-logo\"\n                    title=\"Ouest France Logo\"\n                    aria-hidden=\"true\"\n                    alt=\"\"\n                    src=\"/img/ouest_france_logo.svg\"\n                >-->\n                <span>{{ tag }}</span>\n            </button>\n            <!--<input\n                v-else\n                :id=\"'form-input-tag-' + index\"\n                v-model=\"tagToEditTempValue\"\n                :title=\"$t('Edit')\"\n                @blur=\"finishEditTag(index)\"\n                @keydown.enter=\"finishEditTag(index)\"\n            >-->\n\n            <button class=\"btn-transparent\" @click=\"removeTag(index)\">\n                <CloseIcon />\n            </button>\n        </div>\n        <input\n            v-if=\"editing\"\n            :id=\"'form-input-tag'\"\n            v-model=\"tagToEditTempValue\"\n            :title=\"$t('Edit')\"\n            @blur=\"finishEditTag\"\n            @keydown.enter=\"finishEditTag\"\n        >\n        <button\n            class=\"btn btn-add-tag m-1\"\n            :title=\"$t('Add a tag')\"\n            @click=\"createNewTag\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\n\nimport CloseIcon from \"vue-material-design-icons/Close.vue\";\n\nconst { tags, tagClass } = defineProps<{\n    /** Currently selected tags */\n    tags: string[];\n    /** The class to apply to the tags */\n    tagClass?: string|string[]|((tag: string) => string|string[]);\n}>();\n\nconst emit = defineEmits<{\n    /** Update tags */\n    (e: 'update:tags', tags: string[]): void\n}>();\n\n//const tagToEdit: Ref<number | undefined> = ref(undefined);\nconst editing = ref(false);\nconst tagToEditTempValue = ref(\"\");\n\nfunction getClass(tag: string): string|string[]|undefined {\n    if (typeof tagClass === 'function') {\n        return tagClass(tag);\n    } else {\n        return tagClass;\n    }\n}\n\nfunction removeTag(index: number): void {\n    const newTags = [...tags];\n    newTags.splice(index, 1);\n    console.log(index, newTags);\n    emit('update:tags', newTags);\n}\n\nfunction startEditTag(index: number, tag: string): void {\n    //tagToEditTempValue.value = tags[index];\n    //tagToEdit.value = index;\n    // editing.value = true;\n    /*nextTick(() => {\n        document.getElementById(\"form-input-tag-\" + index)?.focus();\n    });*/\n}\n\nfunction finishEditTag(/*index: number*/): void {\n    /*if (index !== tagToEdit.value) {\n        return;\n    }\n    tagToEdit.value = undefined;\n\n    if (tagToEditTempValue.value.length) {\n        const newTags = [...tags];\n        newTags.splice(\n            index,\n            1,\n            ...tagToEditTempValue.value.split(\",\"),\n        );\n        emit('update:tags', newTags);\n    } else {\n        const newTags = [...tags];\n        newTags.splice(index, 1);\n        emit('update:tags', newTags);\n    }*/\n\n    if (tagToEditTempValue.value === '') {\n        return;\n    }\n\n    const newTags = [...tags, tagToEditTempValue.value];\n    tagToEditTempValue.value = '';\n    editing.value = false;\n    emit('update:tags', newTags);\n}\n\nfunction createNewTag(): void {\n    /*const newTags = [...tags, ''];\n    emit('update:tags', newTags);\n    startEditTag(tags.length - 1, '');*/\n    editing.value = true;\n}\n\n</script>\n\n<style scoped lang=\"scss\">\n.btn-add-tag {\n    padding: 4px;\n    line-height: 1;\n\n    &::after {\n        content: \"+\";\n        color: var(--octopus-primary);\n        font-size: 14px;\n        font-weight: bold;\n    }\n}\n</style>","<template>\n    <div\n        class=\"d-flex flex-wrap border align-items-center rounded px-2\"\n    >\n        <div\n            v-for=\"(tag, index) in tags\"\n            :key=\"tag\"\n            class=\"vs__selected p-0 my-0 mx-1\"\n            :class=\"getClass(tag)\"\n        >\n            <!--<button\n                v-if=\"index !== tagToEdit\"-->\n            <button\n                :id=\"'display-input-tag-' + index\"\n                class=\"btn-transparent d-flex align-items\"\n                @click=\"startEditTag(index, tag)\"\n            >\n                <!--<img\n                    v-if=\"isOuestFranceTag(tag)\"\n                    width=\"20\"\n                    height=\"20\"\n                    class=\"ouest-france-logo\"\n                    title=\"Ouest France Logo\"\n                    aria-hidden=\"true\"\n                    alt=\"\"\n                    src=\"/img/ouest_france_logo.svg\"\n                >-->\n                <span>{{ tag }}</span>\n            </button>\n            <!--<input\n                v-else\n                :id=\"'form-input-tag-' + index\"\n                v-model=\"tagToEditTempValue\"\n                :title=\"$t('Edit')\"\n                @blur=\"finishEditTag(index)\"\n                @keydown.enter=\"finishEditTag(index)\"\n            >-->\n\n            <button class=\"btn-transparent\" @click=\"removeTag(index)\">\n                <CloseIcon />\n            </button>\n        </div>\n        <input\n            v-if=\"editing\"\n            :id=\"'form-input-tag'\"\n            v-model=\"tagToEditTempValue\"\n            :title=\"$t('Edit')\"\n            @blur=\"finishEditTag\"\n            @keydown.enter=\"finishEditTag\"\n        >\n        <button\n            class=\"btn btn-add-tag m-1\"\n            :title=\"$t('Add a tag')\"\n            @click=\"createNewTag\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\n\nimport CloseIcon from \"vue-material-design-icons/Close.vue\";\n\nconst { tags, tagClass } = defineProps<{\n    /** Currently selected tags */\n    tags: string[];\n    /** The class to apply to the tags */\n    tagClass?: string|string[]|((tag: string) => string|string[]);\n}>();\n\nconst emit = defineEmits<{\n    /** Update tags */\n    (e: 'update:tags', tags: string[]): void\n}>();\n\n//const tagToEdit: Ref<number | undefined> = ref(undefined);\nconst editing = ref(false);\nconst tagToEditTempValue = ref(\"\");\n\nfunction getClass(tag: string): string|string[]|undefined {\n    if (typeof tagClass === 'function') {\n        return tagClass(tag);\n    } else {\n        return tagClass;\n    }\n}\n\nfunction removeTag(index: number): void {\n    const newTags = [...tags];\n    newTags.splice(index, 1);\n    console.log(index, newTags);\n    emit('update:tags', newTags);\n}\n\nfunction startEditTag(index: number, tag: string): void {\n    //tagToEditTempValue.value = tags[index];\n    //tagToEdit.value = index;\n    // editing.value = true;\n    /*nextTick(() => {\n        document.getElementById(\"form-input-tag-\" + index)?.focus();\n    });*/\n}\n\nfunction finishEditTag(/*index: number*/): void {\n    /*if (index !== tagToEdit.value) {\n        return;\n    }\n    tagToEdit.value = undefined;\n\n    if (tagToEditTempValue.value.length) {\n        const newTags = [...tags];\n        newTags.splice(\n            index,\n            1,\n            ...tagToEditTempValue.value.split(\",\"),\n        );\n        emit('update:tags', newTags);\n    } else {\n        const newTags = [...tags];\n        newTags.splice(index, 1);\n        emit('update:tags', newTags);\n    }*/\n\n    if (tagToEditTempValue.value === '') {\n        return;\n    }\n\n    const newTags = [...tags, tagToEditTempValue.value];\n    tagToEditTempValue.value = '';\n    editing.value = false;\n    emit('update:tags', newTags);\n}\n\nfunction createNewTag(): void {\n    /*const newTags = [...tags, ''];\n    emit('update:tags', newTags);\n    startEditTag(tags.length - 1, '');*/\n    editing.value = true;\n}\n\n</script>\n\n<style scoped lang=\"scss\">\n.btn-add-tag {\n    padding: 4px;\n    line-height: 1;\n\n    &::after {\n        content: \"+\";\n        color: var(--octopus-primary);\n        font-size: 14px;\n        font-weight: bold;\n    }\n}\n</style>"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAsEA,MAAM,OAAO;EAMb,MAAM,UAAU,IAAI,KAAK;EACzB,MAAM,qBAAqB,IAAI,EAAE;EAEjC,SAAS,SAAS,KAAwC;GACtD,IAAI,OAAO,QAAA,aAAa,YACpB,OAAO,QAAA,SAAS,GAAG;QAEnB,OAAO,QAAA;EAEf;EAEA,SAAS,UAAU,OAAqB;GACpC,MAAM,UAAU,CAAC,GAAG,QAAA,IAAI;GACxB,QAAQ,OAAO,OAAO,CAAC;GACvB,QAAQ,IAAI,OAAO,OAAO;GAC1B,KAAK,eAAe,OAAO;EAC/B;EAEA,SAAS,aAAa,OAAe,KAAmB,CAOxD;EAEA,SAAS,gBAAuC;GAoB5C,IAAI,mBAAmB,UAAU,IAC7B;GAGJ,MAAM,UAAU,CAAC,GAAG,QAAA,MAAM,mBAAmB,KAAK;GAClD,mBAAmB,QAAQ;GAC3B,QAAQ,QAAQ;GAChB,KAAK,eAAe,OAAO;EAC/B;EAEA,SAAS,eAAqB;GAI1B,QAAQ,QAAQ;EACpB;;;;;;;;;;;;;;;;;;;;;mBCxIQ,OAAM,0DAAyD;;;;;;qBADnE,mBAsDM,OAtDN,YAsDM;oBAnDF,mBAqCM,UAAA,MAAA,WApCqB,OAAA,OAAf,KAAK,UAAK;uBADtB,mBAqCM,OAAA;IAnCD,KAAK;IACN,OAAK,eAAA,CAAC,8BACE,OAAA,SAAS,GAAG,CAAA,CAAA;;IAEpB,mBAAA,uDAAA;IAEA,mBAgBS,UAAA;KAfJ,IAAE,uBAAyB;KAC5B,OAAM;KACL,UAAK,WAAE,OAAA,aAAa,OAAO,GAAG;QAE/B,mBAAA,oXAAA,GAUA,mBAAsB,QAAA,MAAA,gBAAb,GAAG,GAAA,CAAA,CAAA,GAAA,GAAA,UAAA;IAEhB,mBAAA,kSAAA;IASA,mBAES,UAAA;KAFD,OAAM;KAAmB,UAAK,WAAE,OAAA,UAAU,KAAK;QACnD,YAAa,OAAA,YAAA,CAAA,GAAA,GAAA,UAAA;;;EAIX,OAAA,UAAA,gBAAA,UAAA,GADV,mBAOC,SAAA;;GALI,IAAI;gEACI,OAAA,qBAAkB;GAC1B,OAAO,KAAA,GAAE,MAAA;GACT,QAAM,OAAA;GACN,WAAO,SAAQ,OAAA,eAAa,CAAA,OAAA,CAAA;2CAHpB,OAAA,kBAAkB,CAAA,CAAA,IAAA,mBAAA,QAAA,IAAA;EAK/B,mBAIE,UAAA;GAHE,OAAM;GACL,OAAO,KAAA,GAAE,WAAA;GACT,SAAO,OAAA"}