{"version":3,"file":"EditableRoot.js","sources":["../../src/Editable/EditableRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, FormFieldProps } from '@/shared/types'\nimport { useFocusOutside, usePointerDownOutside } from '@/DismissableLayer'\nimport { createContext, useDirection, useFormControl } from '@/shared'\n\ntype ActivationMode = 'focus' | 'dblclick' | 'none'\ntype SubmitMode = 'blur' | 'enter' | 'none' | 'both'\n\ntype EditableRootContext = {\n  id: Ref<string | undefined>\n  name: Ref<string | undefined>\n  maxLength: Ref<number | undefined>\n  disabled: Ref<boolean>\n  modelValue: Ref<string | null | undefined>\n  inputValue: Ref<string | null | undefined>\n  placeholder: Ref<{ edit: string, preview: string }>\n  isEditing: Ref<boolean>\n  submitMode: Ref<SubmitMode>\n  activationMode: Ref<ActivationMode>\n  selectOnFocus: Ref<boolean>\n  edit: () => void\n  cancel: () => void\n  submit: () => void\n  inputRef: Ref<HTMLInputElement | undefined>\n  startWithEditMode: Ref<boolean>\n  isEmpty: Ref<boolean>\n  readonly: Ref<boolean>\n  autoResize: Ref<boolean>\n}\n\nexport interface EditableRootProps extends PrimitiveProps, FormFieldProps {\n  /** The default value of the editable field */\n  defaultValue?: string\n  /** The value of the editable field */\n  modelValue?: string | null\n  /** The placeholder for the editable field */\n  placeholder?: string | { edit: string, preview: string }\n  /** The reading direction of the calendar when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether the editable field is disabled */\n  disabled?: boolean\n  /** Whether the editable field is read-only */\n  readonly?: boolean\n  /** The activation event of the editable field */\n  activationMode?: ActivationMode\n  /** Whether to select the text in the input when it is focused. */\n  selectOnFocus?: boolean\n  /** The submit event of the editable field */\n  submitMode?: SubmitMode\n  /** Whether to start with the edit mode active */\n  startWithEditMode?: boolean\n  /** The maximum number of characters allowed */\n  maxLength?: number\n  /** Whether the editable field should auto resize */\n  autoResize?: boolean\n  /** The id of the field */\n  id?: string\n}\n\nexport type EditableRootEmits = {\n  /** Event handler called whenever the model value changes */\n  'update:modelValue': [value: string]\n  /** Event handler called when a value is submitted */\n  'submit': [value: string | null | undefined]\n  /** Event handler called when the editable field changes state */\n  'update:state': [state: 'edit' | 'submit' | 'cancel']\n}\n\nexport const [injectEditableRootContext, provideEditableRootContext]\n  = createContext<EditableRootContext>('EditableRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<EditableRootProps>(), {\n  as: 'div',\n  disabled: false,\n  submitMode: 'blur',\n  activationMode: 'focus',\n  selectOnFocus: false,\n  placeholder: 'Enter text...',\n  autoResize: false,\n  required: false,\n})\n\nconst emits = defineEmits<EditableRootEmits>()\ndefineSlots<{\n  default?: (props: {\n    /** Whether the editable field is in edit mode */\n    isEditing: boolean\n    /** The value of the editable field */\n    modelValue: typeof modelValue.value\n    /** Whether the editable field is empty */\n    isEmpty: boolean\n    /** Function to submit the value of the editable */\n    submit: () => void\n    /** Function to cancel the value of the editable */\n    cancel: () => void\n    /** Function to set the editable in edit mode */\n    edit: () => void\n  }) => any\n}>()\n\nconst {\n  id,\n  name,\n  defaultValue,\n  startWithEditMode,\n  placeholder: propPlaceholder,\n  maxLength,\n  disabled,\n  dir: propDir,\n  submitMode,\n  activationMode,\n  selectOnFocus,\n  readonly,\n  autoResize,\n  required,\n} = toRefs(props)\n\nconst inputRef = ref<HTMLInputElement | undefined>()\nconst dir = useDirection(propDir)\nconst isEditing = ref(startWithEditMode.value ?? false)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: defaultValue.value ?? '',\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst isFormControl = useFormControl(currentElement)\n\nconst placeholder = computed(() => {\n  return typeof propPlaceholder.value === 'string' ? { edit: propPlaceholder.value, preview: propPlaceholder.value } : propPlaceholder.value\n})\n\nconst inputValue = ref(modelValue.value)\n\nwatch(() => modelValue.value, () => {\n  inputValue.value = modelValue.value\n}, { immediate: true, deep: true })\n\nfunction cancel() {\n  isEditing.value = false\n  emits('update:state', 'cancel')\n}\n\nfunction edit() {\n  isEditing.value = true\n  inputValue.value = modelValue.value\n\n  emits('update:state', 'edit')\n}\n\nfunction submit() {\n  modelValue.value = inputValue.value\n  isEditing.value = false\n\n  emits('update:state', 'submit')\n  emits('submit', modelValue.value)\n}\n\nfunction handleDismiss() {\n  if (isEditing.value) {\n    if (submitMode.value === 'blur' || submitMode.value === 'both')\n      submit()\n    else\n      cancel()\n  }\n}\n\nconst pointerDownOutside = usePointerDownOutside(() => handleDismiss(), currentElement, isEditing)\nconst focusOutside = useFocusOutside(() => handleDismiss(), currentElement)\nconst isEmpty = computed(() => modelValue.value === '')\n\ndefineExpose({\n  /** Function to submit the value of the editable */\n  submit,\n  /** Function to cancel the value of the editable */\n  cancel,\n  /** Function to set the editable in edit mode */\n  edit,\n})\n\nprovideEditableRootContext({\n  id,\n  name,\n  disabled,\n  isEditing,\n  maxLength,\n  modelValue,\n  inputValue,\n  placeholder,\n  edit,\n  cancel,\n  submit,\n  activationMode,\n  submitMode,\n  selectOnFocus,\n  inputRef,\n  startWithEditMode,\n  isEmpty,\n  readonly,\n  autoResize,\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    ref=\"primitiveElement\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :dir=\"dir\"\n    data-dismissable-layer\n    @focus.capture=\"focusOutside.onFocusCapture\"\n    @blur.capture=\"focusOutside.onBlurCapture\"\n    @pointerdown.capture=\"pointerDownOutside.onPointerDownCapture\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :is-editing=\"isEditing\"\n      :is-empty=\"isEmpty\"\n      :submit=\"submit\"\n      :cancel=\"cancel\"\n      :edit=\"edit\"\n    />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name\"\n      type=\"text\"\n      :value=\"modelValue\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":[],"mappings":"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"}