{"version":3,"file":"EditableInput.js","sources":["../../src/Editable/EditableInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nexport interface EditableInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, watch } from 'vue'\nimport { useKbd } from '@/shared'\nimport { injectEditableRootContext } from './EditableRoot.vue'\n\nconst props = withDefaults(defineProps<EditableInputProps>(), {\n  as: 'input',\n})\n\nconst kbd = useKbd()\n\nconst context = injectEditableRootContext()\n\nconst disabled = computed(() => context.disabled.value)\n\nconst placeholder = computed(() => context.placeholder.value?.edit)\n\nconst { primitiveElement, currentElement: inputRef } = usePrimitiveElement()\n\nonMounted(() => {\n  context.inputRef.value = inputRef.value as HTMLInputElement\n  if (context.startWithEditMode.value) {\n    context.inputRef.value?.focus({ preventScroll: true })\n    if (context.selectOnFocus.value)\n      context.inputRef.value?.select()\n  }\n})\n\nwatch(context.isEditing, (value) => {\n  if (value) {\n    nextTick(() => {\n      context.inputRef.value?.focus({ preventScroll: true })\n      if (context.selectOnFocus.value)\n        context.inputRef.value?.select()\n    })\n  }\n})\n\nfunction handleSubmitKeyDown(event: KeyboardEvent) {\n  if ((context.submitMode.value === 'enter' || context.submitMode.value === 'both') && event.key === kbd.ENTER && !event.shiftKey && !event.metaKey)\n    context.submit()\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    v-bind=\"props\"\n    :value=\"context.inputValue.value\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :maxlength=\"context.maxLength.value\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"context.readonly.value ? '' : undefined\"\n    :readonly=\"context.readonly.value\"\n    aria-label=\"editable input\"\n    :hidden=\"context.autoResize.value ? undefined : !context.isEditing.value\"\n    :style=\"context.autoResize.value ? { all: 'unset', gridArea: '1 / 1 / auto / auto', visibility: !context.isEditing.value ? 'hidden' : undefined } : undefined\"\n    @input=\"context.inputValue.value = $event.target.value\"\n    @keydown.enter.space=\"handleSubmitKeyDown\"\n    @keydown.esc=\"context.cancel\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,MAAM,MAAO,EAAA;AAEnB,IAAA,MAAM,UAAU,yBAA0B,EAAA;AAE1C,IAAA,MAAM,QAAW,GAAA,QAAA,CAAS,MAAM,OAAA,CAAQ,SAAS,KAAK,CAAA;AAEtD,IAAA,MAAM,cAAc,QAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,IAAI,CAAA;AAElE,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAgB,EAAA,QAAA,KAAa,mBAAoB,EAAA;AAE3E,IAAA,SAAA,CAAU,MAAM;AACd,MAAQ,OAAA,CAAA,QAAA,CAAS,QAAQ,QAAS,CAAA,KAAA;AAClC,MAAI,IAAA,OAAA,CAAQ,kBAAkB,KAAO,EAAA;AACnC,QAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,QAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,UAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA;AACnC,KACD,CAAA;AAED,IAAM,KAAA,CAAA,OAAA,CAAQ,SAAW,EAAA,CAAC,KAAU,KAAA;AAClC,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,QAAA,CAAS,MAAM;AACb,UAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,UAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,YAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA,SAClC,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,SAAS,oBAAoB,KAAsB,EAAA;AACjD,MAAA,IAAA,CAAK,QAAQ,UAAW,CAAA,KAAA,KAAU,OAAW,IAAA,OAAA,CAAQ,WAAW,KAAU,KAAA,MAAA,KAAW,KAAM,CAAA,GAAA,KAAQ,IAAI,KAAS,IAAA,CAAC,KAAM,CAAA,QAAA,IAAY,CAAC,KAAM,CAAA,OAAA;AACxI,QAAA,OAAA,CAAQ,MAAO,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}