{"version":3,"file":"ClassicContentEditable-BSsnA6oo.mjs","names":[],"sources":["../src/components/form/ClassicContentEditable.vue","../src/components/form/ClassicContentEditable.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"tag\"\n    ref=\"element\"\n    class=\"classic-content-editable\"\n    contenteditable\n    :placeholder=\"placeholder\"\n    @input=\"emitUpdate\"\n    @blur=\"emitUpdate\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef, watch } from 'vue';\n\n\n//Props \nconst props = defineProps({\n  tag: { default: \"span\", type: String },\n  modelValue: { default: \"\", type: String },\n  placeholder: { default: \"\", type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"update:modelValue\"]);\n\n//Data\nconst elementRef = useTemplateRef('element');\n\n//Watch\nwatch(()=>props.modelValue, () => {\n  const element = elementRef?.value as HTMLElement;\n  if (element.innerText !== props.modelValue) {\n    updateContent(props.modelValue);\n  }\n});\n\nonMounted(()=>updateContent(props.modelValue))\n\n//Methods\nfunction updateContent(newcontent: string) {\n  const element = elementRef?.value as HTMLElement;\n  element.innerText = newcontent;\n}\nfunction emitUpdate() {\n  const element = elementRef?.value as HTMLElement;\n  if (null !== element) {\n    emit( \"update:modelValue\",element.innerText);\n  }\n}\n</script>\n<style lang=\"scss\">\n\n.octopus-app .classic-content-editable {\n  &[placeholder]:empty::before {\n    content: attr(placeholder);\n    color: var(--octopus-primary);\n  }\n\n  &[placeholder]:empty:focus::before {\n    content: \"\";\n  }\n}\n</style>\n","<template>\n  <component\n    :is=\"tag\"\n    ref=\"element\"\n    class=\"classic-content-editable\"\n    contenteditable\n    :placeholder=\"placeholder\"\n    @input=\"emitUpdate\"\n    @blur=\"emitUpdate\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef, watch } from 'vue';\n\n\n//Props \nconst props = defineProps({\n  tag: { default: \"span\", type: String },\n  modelValue: { default: \"\", type: String },\n  placeholder: { default: \"\", type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"update:modelValue\"]);\n\n//Data\nconst elementRef = useTemplateRef('element');\n\n//Watch\nwatch(()=>props.modelValue, () => {\n  const element = elementRef?.value as HTMLElement;\n  if (element.innerText !== props.modelValue) {\n    updateContent(props.modelValue);\n  }\n});\n\nonMounted(()=>updateContent(props.modelValue))\n\n//Methods\nfunction updateContent(newcontent: string) {\n  const element = elementRef?.value as HTMLElement;\n  element.innerText = newcontent;\n}\nfunction emitUpdate() {\n  const element = elementRef?.value as HTMLElement;\n  if (null !== element) {\n    emit( \"update:modelValue\",element.innerText);\n  }\n}\n</script>\n<style lang=\"scss\">\n\n.octopus-app .classic-content-editable {\n  &[placeholder]:empty::before {\n    content: attr(placeholder);\n    color: var(--octopus-primary);\n  }\n\n  &[placeholder]:empty:focus::before {\n    content: \"\";\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAGb,MAAM,aAAa,eAAe,SAAS;EAG3C,YAAU,MAAM,kBAAkB;GAEhC,KADgB,YAAY,OAChB,cAAc,MAAM,YAC9B,cAAc,MAAM,UAAU;EAElC,CAAC;EAED,gBAAc,cAAc,MAAM,UAAU,CAAC;EAG7C,SAAS,cAAc,YAAoB;GACzC,MAAM,UAAU,YAAY;GAC5B,QAAQ,YAAY;EACtB;EACA,SAAS,aAAa;GACpB,MAAM,UAAU,YAAY;GAC5B,IAAI,SAAS,SACX,KAAM,qBAAoB,QAAQ,SAAS;EAE/C;;;;;;;;;;;;;;;;;;qBChDE,YAQE,wBAPK,OAAA,GAAG,GAAA;EACR,KAAI;EACJ,OAAM;EACN,iBAAA;EACC,aAAa,OAAA;EACb,SAAO,OAAA;EACP,QAAM,OAAA"}