@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroEditableField/FuroEditableFieldContext.js

@@ -0,0 +1,1018 @@
+import {
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  unref,
+} from 'vue'
+
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+import EditableEmitPayload from './EditableEmitPayload.js'
+import EditorCollisionProcessor from './processors/EditorCollisionProcessor.js'
+import ObjectProcessor from './processors/ObjectProcessor.js'
+
+/**
+ * Furo-owned parcel keys (not forwarded to Reka EditableRoot).
+ */
+const FURO_EDITABLE_PARCEL_KEYS = new Set([
+  'value',
+  'invalid',
+  'disabled',
+  'required',
+  'readonly',
+  'placeholder',
+  'emptyPreviewText',
+  'showActions',
+  'showEditing',
+  'showUndoChange',
+  'collisionBoundary',
+  'editLabel',
+  'undoLabel',
+  'submitLabel',
+  'cancelLabel',
+])
+
+const DEFAULT_EDIT_LABEL = 'Edit'
+const DEFAULT_UNDO_LABEL = 'Undo'
+const DEFAULT_SUBMIT_LABEL = 'Submit'
+const DEFAULT_CANCEL_LABEL = 'Cancel'
+
+/**
+ * Context class for managing FuroEditableField component.
+ *
+ * @extends {BaseFuroContext<null, Props, EmitEventName>}
+ */
+export default class FuroEditableFieldContext extends BaseFuroContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroEditableFieldContextParams} params
+   */
+  constructor ({
+    props,
+    componentContext,
+    refHash,
+    reactiveHash,
+  }) {
+    super({
+      props,
+      componentContext,
+    })
+
+    this.refHash = refHash
+    this.reactiveHash = reactiveHash
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof FuroEditableFieldContext ? X : never} T, X
+   * @override
+   * @param {FuroEditableFieldContextFactoryParams} params - Parameters of this factory method.
+   * @returns {InstanceType<T>} An instance of this class.
+   * @this {T}
+   */
+  static create ({
+    props,
+    componentContext,
+
+    refHash = this.buildRefHash(),
+    reactiveHash = this.buildReactiveHash(),
+  }) {
+    return /** @type {InstanceType<T>} */ (
+      new this({
+        props,
+        componentContext,
+
+        refHash,
+        reactiveHash,
+      })
+    )
+  }
+
+  /**
+   * Build ref hash.
+   *
+   * @override
+   */
+  static buildRefHash () {
+    return {
+      originalValueRef: ref(null),
+
+      committedValueRef: ref(null),
+      draftValueRef: ref(null),
+
+      editableRootInstanceRef: ref(null),
+      anchorElementRef: ref(null),
+      floatingEditorElementRef: ref(null),
+
+      scrollEventListenerRef: ref(null),
+      resizeEventListenerRef: ref(null),
+      editorPositionRevisionRef: ref(0),
+    }
+  }
+
+  /**
+   * Build reactive hash.
+   *
+   * @override
+   */
+  static buildReactiveHash () {
+    return {
+      statusReactive: reactive({
+        isShowEditing: false,
+      }),
+    }
+  }
+
+  /**
+   * Get emit event name.
+   *
+   * @override
+   * @returns {Readonly<{
+   *   COMMIT_VALUE: 'commit-value'
+   *   UPDATE_EDITING_STATE: 'update-editing-state'
+   * }>}
+   */
+  static get EMIT_EVENT_NAME () {
+    return {
+      COMMIT_VALUE: 'commit-value',
+      UPDATE_EDITING_STATE: 'update-editing-state',
+    }
+  }
+
+  /**
+   * Get emit options.
+   *
+   * @returns {{
+   *   'commit-value': (payload: import('./EditableEmitPayload.js').default) => void
+   *   'update-editing-state': (editingState: EdittingState) => void
+   * }}
+   */
+  static get EMIT_EVENT_HASH () {
+    return {
+      [this.EMIT_EVENT_NAME.COMMIT_VALUE]: payload => {},
+      [this.EMIT_EVENT_NAME.UPDATE_EDITING_STATE]: editing => {},
+    }
+  }
+
+  /**
+   * get: Constructor of `EmitPayload`
+   *
+   * @returns {typeof EditableEmitPayload}
+   */
+  static get EmitPayloadCtor () {
+    return EditableEmitPayload
+  }
+
+  /**
+   * get: Constructor of `ObjectProcessor`.
+   *
+   * @returns {typeof ObjectProcessor}
+   */
+  static get ObjectProcessorCtor () {
+    return ObjectProcessor
+  }
+
+  /**
+   * get: Constructor of `EditorCollisionProcessor`.
+   *
+   * @returns {typeof EditorCollisionProcessor}
+   */
+  static get EditorCollisionProcessorCtor () {
+    return EditorCollisionProcessor
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroEditableFieldContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroEditableFieldContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * @returns {import('vue').Ref<FuroEditableValue>}
+   */
+  get originalValueRef () {
+    return this.refHash.originalValueRef
+  }
+
+  /**
+   * @returns {import('vue').Ref<FuroEditableValue>}
+   */
+  get committedValueRef () {
+    return this.refHash.committedValueRef
+  }
+
+  /**
+   * @returns {import('vue').Ref<FuroEditableValue>}
+   */
+  get draftValueRef () {
+    return this.refHash.draftValueRef
+  }
+
+  /**
+   * @returns {import('vue').Ref<EditableRootMethods | null>}
+   */
+  get editableRootInstanceRef () {
+    return this.refHash.editableRootInstanceRef
+  }
+
+  /**
+   * @returns {import('vue').Ref<HTMLElement | null>}
+   */
+  get anchorElementRef () {
+    return this.refHash.anchorElementRef
+  }
+
+  /**
+   * @returns {import('vue').Ref<HTMLElement | null>}
+   */
+  get floatingEditorElementRef () {
+    return this.refHash.floatingEditorElementRef
+  }
+
+  /**
+   * @returns {import('vue').Ref<EventListener | null>}
+   */
+  get scrollEventListenerRef () {
+    return this.refHash.scrollEventListenerRef
+  }
+
+  /**
+   * @returns {import('vue').Ref<EventListener | null>}
+   */
+  get resizeEventListenerRef () {
+    return this.refHash.resizeEventListenerRef
+  }
+
+  /**
+   * @returns {import('vue').Ref<number>}
+   */
+  get editorPositionRevisionRef () {
+    return this.refHash.editorPositionRevisionRef
+  }
+
+  /**
+   * @returns {StatusReactive}
+   */
+  get statusReactive () {
+    return this.reactiveHash.statusReactive
+  }
+
+  /**
+   * Parcel passed from parent via props (merged defaults).
+   *
+   * @override
+   * @returns {FuroEditableFieldParcel}
+   */
+  get parcel () {
+    return {
+      emptyPreviewText: '---',
+      showActions: false,
+      showEditing: false,
+      showUndoChange: false,
+      ...this.props.parcel,
+    }
+  }
+
+  /**
+   * Setup component context.
+   *
+   * @template {X extends FuroEditableFieldContext ? X : never} T, X
+   * @override
+   * @returns {T} - For method chaining.
+   * @this {T}
+   */
+  setupComponent () {
+    onMounted(() => {
+      this.statusReactive.isShowEditing = this.parcel.showEditing ?? false
+      this.originalValueRef.value = this.parcel.value ?? null
+    })
+
+    onBeforeUnmount(() => {
+      this.teardownEditingScrollListener()
+      this.teardownEditingResizeListener()
+    })
+
+    // Sync internal value from parcel.
+    this.watch(
+      () => this.parcel.value,
+      parcelValue => {
+        this.committedValueRef.value = parcelValue ?? null
+        this.draftValueRef.value = parcelValue ?? null
+      },
+      {
+        immediate: true,
+      }
+    )
+
+    this.watch(
+      () => this.statusReactive.isShowEditing,
+      isShowEditing => {
+        if (!isShowEditing) {
+          this.teardownEditingScrollListener()
+          this.teardownEditingResizeListener()
+
+          return
+        }
+
+        this.setupEditingScrollListener()
+        this.setupEditingResizeListener()
+        this.scheduleEditorPositionRevision()
+      }
+    )
+
+    return this
+  }
+
+  /**
+   * Cancel editing on scroll.
+   *
+   * @param {{
+   *   scrollEvent: Event
+   * }} params - Parameters.
+   */
+  cancelEditingOnScroll ({
+    scrollEvent,
+  }) {
+    if (
+      !this.statusReactive.isShowEditing
+      || !this.floatingEditorElementRef.value
+    ) {
+      return
+    }
+
+    if (
+      scrollEvent.target instanceof Node
+      && this.floatingEditorElementRef.value.contains(scrollEvent.target)
+    ) {
+      return
+    }
+
+    this.editableRootInstanceRef.value?.cancel()
+  }
+
+  /**
+   * Setup scroll listener while editing.
+   */
+  setupEditingScrollListener () {
+    this.scrollEventListenerRef.value = scrollEvent =>
+      this.cancelEditingOnScroll({
+        scrollEvent,
+      })
+
+    window.addEventListener(
+      'scroll',
+      this.scrollEventListenerRef.value,
+      true
+    )
+  }
+
+  /**
+   * Teardown scroll listener while editing.
+   */
+  teardownEditingScrollListener () {
+    if (!this.scrollEventListenerRef.value) {
+      return
+    }
+
+    window.removeEventListener(
+      'scroll',
+      this.scrollEventListenerRef.value,
+      true
+    )
+
+    this.scrollEventListenerRef.value = null
+  }
+
+  /**
+   * Setup resize listener while editing.
+   */
+  setupEditingResizeListener () {
+    this.resizeEventListenerRef.value = () => {
+      this.incrementEditorPositionRevision()
+    }
+
+    window.addEventListener(
+      'resize',
+      this.resizeEventListenerRef.value
+    )
+  }
+
+  /**
+   * Teardown resize listener while editing.
+   */
+  teardownEditingResizeListener () {
+    if (!this.resizeEventListenerRef.value) {
+      return
+    }
+
+    window.removeEventListener(
+      'resize',
+      this.resizeEventListenerRef.value
+    )
+
+    this.resizeEventListenerRef.value = null
+  }
+
+  /**
+   * Increment editor position revision to trigger style recalculation.
+   */
+  incrementEditorPositionRevision () {
+    this.editorPositionRevisionRef.value += 1
+  }
+
+  /**
+   * Schedule editor position revision after layout is ready.
+   */
+  scheduleEditorPositionRevision () {
+    nextTick(() => {
+      requestAnimationFrame(() => {
+        this.incrementEditorPositionRevision()
+      })
+    })
+  }
+
+  /**
+   * Whether action triggers are shown.
+   *
+   * @returns {boolean}
+   */
+  shouldShowActionButtons () {
+    return Object.hasOwn(this.slots, 'edit-trigger')
+      || Object.hasOwn(this.slots, 'submit-trigger')
+      || Object.hasOwn(this.slots, 'cancel-trigger')
+      || Boolean(this.parcel.showActions)
+  }
+
+  /**
+   * Whether the field is invalid.
+   *
+   * @returns {boolean}
+   */
+  isInvalid () {
+    return Boolean(this.parcel?.invalid)
+  }
+
+  /**
+   * Whether the field is disabled.
+   *
+   * @returns {boolean}
+   */
+  isDisabled () {
+    return Boolean(this.parcel?.disabled)
+      || this.hasBooleanAttribute({ name: 'disabled' })
+  }
+
+  /**
+   * Whether the field is readonly.
+   *
+   * @returns {boolean}
+   */
+  isReadonly () {
+    return Boolean(this.parcel?.readonly)
+      || this.hasBooleanAttribute({ name: 'readonly' })
+  }
+
+  /**
+   * Whether the field is required.
+   *
+   * @returns {boolean}
+   */
+  isRequired () {
+    return Boolean(this.parcel?.required)
+      || this.hasBooleanAttribute({ name: 'required' })
+  }
+
+  /**
+   * Extract the accessible name of the edit trigger.
+   *
+   * @returns {string}
+   */
+  extractEditLabel () {
+    return this.parcel?.editLabel
+      ?? DEFAULT_EDIT_LABEL
+  }
+
+  /**
+   * Extract the accessible name of the undo control.
+   *
+   * @returns {string}
+   */
+  extractUndoLabel () {
+    return this.parcel?.undoLabel
+      ?? DEFAULT_UNDO_LABEL
+  }
+
+  /**
+   * Extract the accessible name of the submit control.
+   *
+   * @returns {string}
+   */
+  extractSubmitLabel () {
+    return this.parcel?.submitLabel
+      ?? DEFAULT_SUBMIT_LABEL
+  }
+
+  /**
+   * Extract the accessible name of the cancel control.
+   *
+   * @returns {string}
+   */
+  extractCancelLabel () {
+    return this.parcel?.cancelLabel
+      ?? DEFAULT_CANCEL_LABEL
+  }
+
+  /**
+   * Extract placeholder forwarded to Reka EditableRoot.
+   *
+   * @returns {FuroEditableFieldParcel['placeholder']}
+   */
+  extractPlaceholder () {
+    if (this.parcel?.placeholder) {
+      return this.parcel.placeholder
+    }
+
+    return (/** @type {import('vue').InputHTMLAttributes} */ (this.attrs))
+      .placeholder
+      ?? ''
+  }
+
+  /**
+   * Extract root attributes forwarded to Reka EditableRoot.
+   *
+   * @returns {Props['parcel']}
+   */
+  extractRootAttributes () {
+    const parcelEntries = Object.entries(this.parcel)
+
+    const parcelFilteredEntries = Object.fromEntries(
+      parcelEntries.filter(([key]) => !FURO_EDITABLE_PARCEL_KEYS.has(key))
+    )
+
+    return {
+      ...this.attrs,
+      ...parcelFilteredEntries,
+    }
+  }
+
+  /**
+   * Whether the value is empty.
+   *
+   * @returns {boolean}
+   */
+  hasEmptyValue () {
+    if (Array.isArray(this.committedValueRef.value)) {
+      return this.committedValueRef.value.length === 0
+    }
+
+    if (
+      this.committedValueRef.value
+      && typeof this.committedValueRef.value === 'object'
+    ) {
+      return Object.keys(this.committedValueRef.value).length === 0
+    }
+
+    return this.committedValueRef.value === null
+  }
+
+  /**
+   * Resolve preview label text.
+   *
+   * @returns {string}
+   */
+  resolvePreviewText () {
+    if (
+      this.committedValueRef.value
+      && typeof this.committedValueRef.value === 'object'
+    ) {
+      return JSON.stringify(this.committedValueRef.value)
+    }
+
+    return String(this.committedValueRef.value)
+  }
+
+  /**
+   * Build custom event.
+   *
+   * @param {{
+   *   name?: string
+   *   value?: FuroEditableValue
+   * }} [params] - Parameters.
+   * @returns {import('./EditableEmitPayload.js').EditableRawEvent}
+   */
+  buildCustomEvent ({
+    name = this.EMIT_EVENT_NAME.COMMIT_VALUE,
+    value = this.committedValueRef.value,
+  } = {}) {
+    return new CustomEvent(
+      name,
+      {
+        detail: {
+          target: null,
+          value,
+        },
+      })
+  }
+
+  /**
+   * Build payload.
+   *
+   * @param {{
+   *   rawEvent?: import('./EditableEmitPayload.js').EditableRawEvent
+   * }} [params] - Parameters.
+   * @returns {InstanceType<typeof EditableEmitPayload>}
+   */
+  buildEmitPayload ({
+    rawEvent = this.buildCustomEvent(),
+  } = {}) {
+    return this.Ctor.EmitPayloadCtor.create({
+      rawEvent,
+    })
+  }
+
+  /**
+   * Respond to submit committed value event (blur / enter dismiss).
+   *
+   * @param {{
+   *   value?: FuroEditableValue
+   * }} [params] - Parameters.
+   * @throws {Error} When not implemented.
+   */
+  onSubmitCommittedValue ({
+    value = this.draftValueRef.value,
+  } = {}) {
+    this.committedValueRef.value = value ?? this.draftValueRef.value ?? null
+
+    this.emit(
+      this.EMIT_EVENT_NAME.COMMIT_VALUE,
+      this.buildEmitPayload()
+    )
+  }
+
+  /**
+   * Respond to Reka update state event.
+   *
+   * @param {{
+   *   editingState: EdittingState
+   * }} params - Parameters.
+   * @throws {Error} When not implemented.
+   */
+  onUpdateEditingState ({
+    editingState,
+  }) {
+    this.statusReactive.isShowEditing = editingState === 'edit'
+
+    this.emit(
+      this.EMIT_EVENT_NAME.UPDATE_EDITING_STATE,
+      editingState
+    )
+
+    if (
+      editingState === 'edit'
+    ) {
+      nextTick(() => {
+        requestAnimationFrame(() => {
+          /** @type {HTMLElement | null} */(
+            this.floatingEditorElementRef.value
+              ?.querySelector('input, textarea')
+          )
+            ?.focus()
+        })
+      })
+    }
+  }
+
+  /**
+   * Update internal value.
+   *
+   * @param {{
+   *     value: FuroEditableValue
+   *  }} params - Parameters.
+   */
+  updateDraftValue ({
+    value,
+  }) {
+    this.draftValueRef.value = value ?? null
+  }
+
+  /**
+   * Build slot props.
+   *
+   * @param {{
+   *   defaultSlotProps: DefaultEditableRootSlotProps
+   * }} params - Parameters.
+   * @returns {FuroEditableSlotProps}
+   */
+  buildSlotProps ({
+    defaultSlotProps,
+  }) {
+    return {
+      ...defaultSlotProps,
+      committedValue: this.committedValueRef.value,
+      draftValue: this.draftValueRef.value,
+      updateDraftValue: this.updateDraftValue.bind(this),
+      undoChange: this.onUndoChange.bind(this),
+    }
+  }
+
+  /**
+   * Extract editor position elements.
+   *
+   * @returns {{
+   *   anchorElement: HTMLElement
+   *   floatingEditorElement: HTMLElement
+   * } | null}
+   */
+  extractEditorPositionElements () {
+    const anchorElement = this.anchorElementRef.value
+    const floatingEditorElement = this.floatingEditorElementRef.value
+
+    if (
+      !anchorElement
+      || !floatingEditorElement
+    ) {
+      return null
+    }
+
+    return {
+      anchorElement,
+      floatingEditorElement,
+    }
+  }
+
+  /**
+   * Extract collision boundary element.
+   *
+   * @returns {HTMLElement | null}
+   */
+  extractCollisionBoundaryElement () {
+    const {
+      collisionBoundary,
+    } = this.parcel
+
+    if (!collisionBoundary) {
+      return null
+    }
+
+    return unref(collisionBoundary) ?? null
+  }
+
+  /**
+   * Generate editor style.
+   *
+   * @returns {import('vue').CSSProperties}
+   */
+  generateEditorPositionStyle () {
+    if (!this.statusReactive.isShowEditing) {
+      return {}
+    }
+
+    return this.buildEditorPositionStyle({
+      editorPositionRevision: this.editorPositionRevisionRef.value,
+    })
+  }
+
+  /**
+   * Build editor position style.
+   *
+   * @param {{
+   *   editorPositionRevision: number
+   * }} params - Parameters.
+   * @returns {import('vue').CSSProperties}
+   */
+  buildEditorPositionStyle ({
+    editorPositionRevision,
+  }) {
+    if (editorPositionRevision < 0) {
+      return {}
+    }
+
+    const editorPositionElements = this.extractEditorPositionElements()
+
+    if (!editorPositionElements) {
+      return {}
+    }
+
+    const {
+      anchorElement,
+      floatingEditorElement,
+    } = editorPositionElements
+    const collisionBoundaryElement = this.extractCollisionBoundaryElement()
+
+    return this.Ctor.EditorCollisionProcessorCtor.create({
+      anchorRect: anchorElement.getBoundingClientRect(),
+      boundaryRect: collisionBoundaryElement?.getBoundingClientRect(),
+      editorWidth: floatingEditorElement.offsetWidth,
+      editorHeight: floatingEditorElement.offsetHeight,
+    })
+      .generateEditorPositionStyle()
+  }
+
+  /**
+   * Whether the original value has changed.
+   *
+   * @returns {boolean}
+   */
+  hasOriginalValueChanged () {
+    if (
+      Array.isArray(this.originalValueRef.value)
+      && Array.isArray(this.committedValueRef.value)
+    ) {
+      return this.originalValueRef.value.some((value, index) =>
+        !this.Ctor.ObjectProcessorCtor.create({
+          leftValue: value,
+          rightValue: this.committedValueRef.value[index],
+        })
+          .areDeepEqual()
+      )
+    }
+
+    if (
+      typeof this.originalValueRef.value === 'object'
+      && typeof this.committedValueRef.value === 'object'
+    ) {
+      return !this.Ctor.ObjectProcessorCtor.create({
+        leftValue: this.originalValueRef.value,
+        rightValue: this.committedValueRef.value,
+      })
+        .areDeepEqual()
+    }
+
+    return String(this.originalValueRef.value) !== String(this.committedValueRef.value)
+  }
+
+  /**
+   * Undo change.
+   */
+  onUndoChange () {
+    this.draftValueRef.value = this.originalValueRef.value ?? null
+    this.committedValueRef.value = this.originalValueRef.value ?? null
+
+    this.emit(
+      this.EMIT_EVENT_NAME.COMMIT_VALUE,
+      this.buildEmitPayload()
+    )
+  }
+
+  /**
+   * Whether the undo change button should be shown.
+   *
+   * @returns {boolean}
+   */
+  shouldShowUndoChange () {
+    return this.hasOriginalValueChanged()
+      && Boolean(this.parcel?.showUndoChange)
+  }
+}
+
+/**
+ * @typedef {'commit-value' | 'update:value' | 'update:state'} EmitEventName
+ */
+
+/**
+ * @typedef {*} FuroEditableValue
+ */
+
+/**
+ * @typedef {{
+ *   value?: FuroEditableValue
+ *   invalid?: boolean
+ *   disabled?: boolean
+ *   required?: boolean
+ *   readonly?: boolean
+ *   placeholder?: string
+ *   emptyPreviewText?: string
+ *   showActions?: boolean
+ *   showEditing?: boolean
+ *   showUndoChange?: boolean
+ *   submitMode?: 'blur' | 'enter' | 'both' | 'none'
+ *   activationMode?: 'dblclick' | 'focus' | 'none'
+ *   collisionBoundary?: import('vue').Ref<HTMLElement | null> | HTMLElement | null
+ *   editLabel?: string
+ *   undoLabel?: string
+ *   submitLabel?: string
+ *   cancelLabel?: string
+ * }} FuroEditableFieldParcel
+ */
+
+/**
+ * @typedef {{
+ *   parcel?: FuroEditableFieldParcel & import('vue').Attrs | null
+ * }} Props
+ */
+
+/**
+ * @typedef {{
+ *   isShowEditing: boolean
+ * }} StatusReactive
+ */
+
+/**
+ * @typedef {{
+ *   statusReactive: StatusReactive
+ * }} ReactiveHash
+ */
+
+/**
+ * @typedef {{
+ *   submit: () => void
+ *   cancel: () => void
+ *   edit: () => void
+ * }} EditableRootMethods
+ */
+
+/**
+ * @typedef {{
+ *   originalValueRef: import('vue').Ref<FuroEditableValue>
+ *   committedValueRef: import('vue').Ref<FuroEditableValue>
+ *   draftValueRef: import('vue').Ref<FuroEditableValue>
+ *   editableRootInstanceRef: import('vue').Ref<EditableRootMethods | null>
+ *   anchorElementRef: import('vue').Ref<HTMLElement | null>
+ *   floatingEditorElementRef: import('vue').Ref<HTMLElement | null>
+ *   scrollEventListenerRef: import('vue').Ref<EventListener | null>
+ *   resizeEventListenerRef: import('vue').Ref<EventListener | null>
+ *   editorPositionRevisionRef: import('vue').Ref<number>
+ * }} RefHash
+ */
+
+/**
+ * @typedef {import('../../../contexts/BaseFuroContext.js').BaseFuroContextParams & {
+ *   props: Props
+ *   componentContext: ComponentContext
+ *   refHash: RefHash
+ *   reactiveHash: ReactiveHash
+ * }} FuroEditableFieldContextParams
+ */
+
+/**
+ * @typedef {Omit<FuroEditableFieldContextParams, 'refHash' | 'reactiveHash'> & {
+ *   refHash?: FuroEditableFieldContextParams['refHash']
+ *   reactiveHash?: FuroEditableFieldContextParams['reactiveHash']
+ * }} FuroEditableFieldContextFactoryParams
+ */
+
+/**
+ * @typedef {'cancel' | 'submit' | 'edit'} EdittingState
+ */
+
+/**
+ * @typedef {typeof FuroEditableFieldContext.EMIT_EVENT_HASH} FuroEditableFieldEmitHash
+ */
+
+/**
+ * @typedef {{
+ *   isEditing: boolean
+ *   modelValue: string | null | undefined
+ *   isEmpty: boolean
+ *   submit: () => void
+ *   cancel: () => void
+ *   edit: () => void
+ * }} DefaultEditableRootSlotProps
+ */
+
+/**
+ * @typedef {DefaultEditableRootSlotProps & {
+ *   committedValue: FuroEditableValue
+ *   draftValue: FuroEditableValue
+ *   updateDraftValue: ({
+ *     value
+ *   }: {
+ *     value: FuroEditableValue
+ *   }) => void
+ *   undoChange: () => void
+ * }} FuroEditableSlotProps
+ */
+
+/**
+ * @typedef {import('vue').SlotsType<{
+ *   preview: FuroEditableSlotProps
+ *   editor: FuroEditableSlotProps
+ *   'edit-trigger': FuroEditableSlotProps
+ *   'submit-trigger': FuroEditableSlotProps
+ *   'cancel-trigger': FuroEditableSlotProps
+ *   'undo-trigger': FuroEditableSlotProps
+ * }>} FuroEditableFieldSlots
+ */
+
+/**
+ * @typedef {import('vue').SetupContext<FuroEditableFieldEmitHash, FuroEditableFieldSlots>} ComponentContext
+ */
+
+/**
+ * @typedef {(
+ *   props: Props,
+ *   componentContext: ComponentContext
+ * ) => {
+ *   context: FuroEditableFieldContext
+ * }} FuroEditableFieldSetup
+ */