@openreachtech/furo-vue 1.3.1

package/lib/components/organisms/FuroAlertDialog/FuroAlertDialogContext.js

@@ -0,0 +1,608 @@
+import {
+  ref,
+} from 'vue'
+
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Parcel keys handled explicitly or Furo-only — excluded from the v-bind spread to the root host.
+ * `open` and `disabled` are forwarded via dedicated bindings (not dropped).
+ * The remaining keys are Furo-only display/behavior values with no root-primitive analog.
+ */
+const ROOT_SPREAD_EXCLUDED_PARCEL_KEYS = new Set([
+  'open',
+  'disabled',
+  'title',
+  'description',
+  'confirmText',
+  'cancelText',
+  'tone',
+  'closeOnEscape',
+  'size',
+  'busy',
+  'initialFocus',
+])
+
+const DEFAULT_CONFIRM_TEXT = 'Confirm'
+const DEFAULT_CANCEL_TEXT = 'Cancel'
+
+/**
+ * Context class for FuroAlertDialog organism.
+ *
+ * @extends {BaseFuroContext<null, Props, EmitEventName>}
+ */
+export default class FuroAlertDialogContext extends BaseFuroContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroAlertDialogContextParams} params - Parameters of this constructor.
+   */
+  constructor ({
+    props,
+    componentContext,
+
+    refHash,
+  }) {
+    super({
+      props,
+      componentContext,
+    })
+
+    this.refHash = refHash
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof FuroAlertDialogContext ? X : never} T, X
+   * @override
+   * @param {FuroAlertDialogContextFactoryParams} params - Parameters of this factory method.
+   * @returns {InstanceType<T>} An instance of this class.
+   * @this {T}
+   */
+  static create ({
+    props,
+    componentContext,
+
+    refHash = this.buildRefHash(),
+  }) {
+    return /** @type {InstanceType<T>} */ (
+      new this({
+        props,
+        componentContext,
+
+        refHash,
+      })
+    )
+  }
+
+  /**
+   * Build ref hash.
+   *
+   * @override
+   * @returns {FuroAlertDialogContextParams['refHash']}
+   */
+  static buildRefHash () {
+    return {
+      openRef: ref(false),
+    }
+  }
+
+  /**
+   * Get emit event name.
+   *
+   * @override
+   * @returns {Readonly<{
+   *   CONFIRM: 'confirm'
+   *   CANCEL: 'cancel'
+   *   OPEN_CHANGE: 'open:change'
+   *   UPDATE_OPEN: 'update:open'
+   * }>}
+   */
+  static get EMIT_EVENT_NAME () {
+    return {
+      CONFIRM: 'confirm',
+      CANCEL: 'cancel',
+      OPEN_CHANGE: 'open:change',
+      UPDATE_OPEN: 'update:open',
+    }
+  }
+
+  /**
+   * Get emit options.
+   *
+   * @returns {{
+   *   confirm: () => void
+   *   cancel: () => void
+   *   'open:change': (payload: { open: boolean }) => void
+   *   'update:open': (open: boolean) => void
+   * }}
+   */
+  static get EMIT_EVENT_HASH () {
+    return {
+      [this.EMIT_EVENT_NAME.CONFIRM]: () => {},
+      [this.EMIT_EVENT_NAME.CANCEL]: () => {},
+      [this.EMIT_EVENT_NAME.OPEN_CHANGE]: payload => {},
+      [this.EMIT_EVENT_NAME.UPDATE_OPEN]: payload => {},
+    }
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroAlertDialogContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroAlertDialogContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * Get internal open ref.
+   *
+   * @returns {import('vue').Ref<boolean>}
+   */
+  get openRef () {
+    return this.refHash.openRef
+  }
+
+  /**
+   * Parcel passed from parent via props.
+   *
+   * @override
+   * @returns {NonNullable<Props['parcel']>}
+   */
+  get parcel () {
+    return {
+      open: null,
+      disabled: false,
+      title: null,
+      description: null,
+      confirmText: DEFAULT_CONFIRM_TEXT,
+      cancelText: DEFAULT_CANCEL_TEXT,
+      tone: 'default',
+      closeOnEscape: true,
+      size: 'default',
+      busy: false,
+      initialFocus: null,
+      ...this.props.parcel,
+    }
+  }
+
+  /**
+   * Whether open state is controlled via parcel.
+   *
+   * @returns {boolean}
+   */
+  isOpenControlled () {
+    return (this.parcel?.open ?? null) !== null
+  }
+
+  /**
+   * Whether the trigger is disabled.
+   *
+   * @returns {boolean}
+   */
+  isDisabled () {
+    const disabledByParcel = Boolean(this.parcel?.disabled)
+    const disabledByAttrs = this.hasBooleanAttribute({ name: 'disabled' })
+
+    return disabledByParcel || disabledByAttrs
+  }
+
+  /**
+   * Whether the alert dialog is in a busy state (blocks dismissal during async confirm).
+   *
+   * @returns {boolean}
+   */
+  isBusy () {
+    return this.parcel?.busy === true
+  }
+
+  /**
+   * Resolve open state for the root host element.
+   *
+   * @returns {boolean}
+   */
+  extractOpenValue () {
+    if (this.isOpenControlled()) {
+      return Boolean(this.parcel?.open)
+    }
+
+    return this.openRef.value
+  }
+
+  /**
+   * Extract root class names.
+   *
+   * @returns {Record<string, boolean>}
+   */
+  extractRootClassNames () {
+    return {
+      'unit-alert-dialog': true,
+      disabled: this.isDisabled(),
+    }
+  }
+
+  /**
+   * Extract attributes forwarded to the root host element.
+   *
+   * @returns {Record<string, unknown>}
+   */
+  extractRootAttributes () {
+    const parcelEntries = Object.entries(this.parcel ?? {})
+
+    return Object.fromEntries(
+      parcelEntries.filter(([key]) => !ROOT_SPREAD_EXCLUDED_PARCEL_KEYS.has(key))
+    )
+  }
+
+  /**
+   * Resolve the content size variant.
+   *
+   * @returns {FuroAlertDialogSize}
+   */
+  extractSize () {
+    return this.parcel?.size
+      ?? 'default'
+  }
+
+  /**
+   * Extract content class names (size variant + busy state).
+   *
+   * @returns {Record<string, boolean>}
+   */
+  extractContentClassNames () {
+    const size = this.extractSize()
+
+    const sizeClassEntries = size === 'default'
+      ? []
+      : [[size, true]]
+
+    return Object.fromEntries([
+      ['unit-alert-dialog-content', true],
+      ...sizeClassEntries,
+      ['busy', this.isBusy()],
+    ])
+  }
+
+  /**
+   * CSS selector (scoped to dialog content) for the element to focus on open.
+   *
+   * @returns {string | null}
+   */
+  extractInitialFocusSelector () {
+    return this.parcel?.initialFocus
+      ?? null
+  }
+
+  /**
+   * Title text rendered in the alert dialog heading.
+   *
+   * @returns {string | null}
+   */
+  extractTitle () {
+    return this.parcel?.title
+      ?? null
+  }
+
+  /**
+   * Description text rendered below the heading.
+   *
+   * @returns {string | null}
+   */
+  extractDescription () {
+    return this.parcel?.description
+      ?? null
+  }
+
+  /**
+   * Whether a description region should render (parcel text or `description` slot).
+   *
+   * @returns {boolean}
+   */
+  hasDescription () {
+    const hasDescriptionText = this.extractDescription() !== null
+    const hasDescriptionSlot = Boolean(this.componentContext.slots?.description)
+
+    return hasDescriptionText || hasDescriptionSlot
+  }
+
+  /**
+   * Label for the confirm action button.
+   *
+   * @returns {string}
+   */
+  extractConfirmText () {
+    return this.parcel?.confirmText
+      ?? DEFAULT_CONFIRM_TEXT
+  }
+
+  /**
+   * Label for the cancel action button.
+   *
+   * @returns {string}
+   */
+  extractCancelText () {
+    return this.parcel?.cancelText
+      ?? DEFAULT_CANCEL_TEXT
+  }
+
+  /**
+   * Resolve the confirm button parcel (variant follows tone, loading follows busy).
+   *
+   * @returns {{
+   *   variant: 'default' | 'destructive'
+   *   loading: boolean
+   *   disabled: boolean
+   * }}
+   */
+  generateConfirmButtonParcel () {
+    const variant = this.parcel?.tone === 'destructive'
+      ? 'destructive'
+      : 'default'
+
+    return {
+      variant,
+      loading: this.isBusy(),
+      disabled: this.isBusy(),
+    }
+  }
+
+  /**
+   * Resolve the cancel button parcel.
+   *
+   * @returns {{
+   *   variant: 'outline'
+   *   disabled: boolean
+   * }}
+   */
+  generateCancelButtonParcel () {
+    return {
+      variant: 'outline',
+      disabled: this.isBusy(),
+    }
+  }
+
+  /**
+   * Whether the Escape key dismisses the alert dialog.
+   *
+   * @returns {boolean}
+   */
+  shouldCloseOnEscape () {
+    return this.parcel?.closeOnEscape !== false
+  }
+
+  /**
+   * Handle outside interaction — alert dialogs always force a decision, never dismiss on outside click.
+   *
+   * @param {{
+   *   rawEvent: Event
+   * }} params
+   */
+  onInteractOutside ({
+    rawEvent,
+  }) {
+    rawEvent.preventDefault()
+  }
+
+  /**
+   * Handle Escape key — treat as cancel, or veto while busy / when disabled.
+   *
+   * @param {{
+   *   rawEvent: Event
+   * }} params
+   */
+  onEscapeKeyDown ({
+    rawEvent,
+  }) {
+    rawEvent.preventDefault()
+
+    if (
+      this.isBusy()
+      || !this.shouldCloseOnEscape()
+    ) {
+      return
+    }
+
+    this.onCancel()
+  }
+
+  /**
+   * Handle the alert dialog's initial-focus moment — focus a custom element when configured.
+   *
+   * @param {{
+   *   rawEvent: Event
+   * }} params
+   */
+  onOpenAutoFocus ({
+    rawEvent,
+  }) {
+    const selector = this.extractInitialFocusSelector()
+
+    if (selector === null) {
+      return
+    }
+
+    const root = /** @type {Element | null} */ (rawEvent.currentTarget)
+    const target = /** @type {HTMLElement | null} */ (
+      root?.querySelector(selector)
+      ?? null
+    )
+
+    if (target === null) {
+      return
+    }
+
+    rawEvent.preventDefault()
+
+    target.focus()
+  }
+
+  /**
+   * Handle the confirm action — emit confirm, then close.
+   */
+  onConfirm () {
+    this.emit(
+      this.EMIT_EVENT_NAME.CONFIRM
+    )
+
+    this.closeInternal()
+  }
+
+  /**
+   * Handle the cancel action — emit cancel, then close.
+   */
+  onCancel () {
+    this.emit(
+      this.EMIT_EVENT_NAME.CANCEL
+    )
+
+    this.closeInternal()
+  }
+
+  /**
+   * Drive the alert dialog to a closed state and notify the parent.
+   * Skips the open-state mutation while busy so async confirm flows stay open.
+   */
+  closeInternal () {
+    if (this.isBusy()) {
+      return
+    }
+
+    if (!this.isOpenControlled()) {
+      this.openRef.value = false
+    }
+
+    this.emit(
+      this.EMIT_EVENT_NAME.UPDATE_OPEN,
+      false
+    )
+
+    this.emit(
+      this.EMIT_EVENT_NAME.OPEN_CHANGE,
+      {
+        open: false,
+      }
+    )
+  }
+
+  /**
+   * Handle open state updates from the root host element (trigger open, etc.).
+   *
+   * @param {{
+   *   isOpen: boolean
+   * }} params
+   */
+  onOpenChange ({
+    isOpen,
+  }) {
+    if (
+      this.isBusy()
+      && !isOpen
+    ) {
+      return
+    }
+
+    if (!this.isOpenControlled()) {
+      this.openRef.value = isOpen
+    }
+
+    this.emit(
+      this.EMIT_EVENT_NAME.UPDATE_OPEN,
+      isOpen
+    )
+
+    this.emit(
+      this.EMIT_EVENT_NAME.OPEN_CHANGE,
+      {
+        open: isOpen,
+      }
+    )
+  }
+}
+
+/**
+ * @typedef {import('../../../contexts/BaseFuroContext.js').BaseFuroContextParams & {
+ *   props: Props
+ *   componentContext: ComponentContext
+ *   refHash: {
+ *     openRef: import('vue').Ref<boolean>
+ *   }
+ * }} FuroAlertDialogContextParams
+ */
+
+/**
+ * @typedef {Omit<FuroAlertDialogContextParams, 'refHash'> & {
+ *   refHash?: FuroAlertDialogContextParams['refHash']
+ * }} FuroAlertDialogContextFactoryParams
+ */
+
+/**
+ * @typedef {keyof typeof FuroAlertDialogContext.EMIT_EVENT_NAME} EmitEventName
+ */
+
+/**
+ * @typedef {import('vue').HTMLAttributes & {
+ *   parcel?: FuroAlertDialogParcel | null
+ * }} Props
+ */
+
+/**
+ * Closed-set Furo behavior for `<FuroAlertDialog>`.
+ * JSON-serializable only. Not an open passthrough to the internal dialog library.
+ *
+ * @typedef {{
+ *   open?: boolean | null
+ *   disabled?: boolean
+ *   title?: string | null
+ *   description?: string | null
+ *   confirmText?: string
+ *   cancelText?: string
+ *   tone?: FuroAlertDialogTone
+ *   closeOnEscape?: boolean
+ *   size?: FuroAlertDialogSize
+ *   busy?: boolean
+ *   initialFocus?: string | null
+ * }} FuroAlertDialogParcel
+ */
+
+/**
+ * @typedef {'default' | 'destructive'} FuroAlertDialogTone
+ */
+
+/**
+ * @typedef {'sm' | 'default' | 'lg'} FuroAlertDialogSize
+ */
+
+/**
+ * @typedef {import('vue').SetupContext<FuroAlertDialogEmitHash, FuroAlertDialogSlots>} ComponentContext
+ */
+
+/**
+ * @typedef {typeof FuroAlertDialogContext.EMIT_EVENT_HASH} FuroAlertDialogEmitHash
+ */
+
+/**
+ * @typedef {import('vue').SlotsType<{
+ *   trigger: {}
+ *   title: {}
+ *   description: {}
+ *   default: {}
+ *   footer: {
+ *     confirm: () => void
+ *     cancel: () => void
+ *   }
+ * }>} FuroAlertDialogSlots
+ */
+
+/**
+ * @typedef {(
+ *   props: Props,
+ *   componentContext: ComponentContext
+ * ) => {
+ *   context: FuroAlertDialogContext
+ * }} FuroAlertDialogSetup
+ */