@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroAutocompleteField/AutocompleteEmitPayload.js

@@ -0,0 +1,225 @@
+import BaseEmitPayload from '../../../emit-payload/BaseEmitPayload.js'
+
+/**
+ * AutocompleteEmitPayload.
+ *
+ * @extends {BaseEmitPayload<AutocompleteRawEvent, HTMLElement>}
+ */
+export default class AutocompleteEmitPayload extends BaseEmitPayload {
+  /**
+   * Get the event detail.
+   *
+   * @returns {AutocompleteRawEvent['detail'] | null}
+   */
+  get eventDetail () {
+    return this.rawEvent?.detail
+      ?? null
+  }
+
+  /**
+   * Get the control element from the raw event.
+   *
+   * @override
+   * @returns {HTMLElement | null}
+   */
+  get controlElement () {
+    return this.eventDetail?.target
+      ?? null
+  }
+
+  /**
+   * Search keyword at emit time.
+   *
+   * @returns {string}
+   */
+  get searchKeyword () {
+    return this.eventDetail?.searchKeyword
+      ?? ''
+  }
+
+  /**
+   * Matched option for the selected value.
+   *
+   * @returns {FuroAutocompleteOption | FuroAcceptableValue}
+   */
+  get selectedOption () {
+    return this.eventDetail?.selectedOption
+      ?? null
+  }
+
+  /**
+   * Zero-based selected option index.
+   *
+   * @returns {number | null}
+   */
+  get selectedIndex () {
+    return this.eventDetail?.selectedIndex
+      ?? null
+  }
+
+  /**
+   * Selected options for multi-select mode.
+   *
+   * @returns {Array<FuroAutocompleteOption | FuroAcceptableValue>}
+   */
+  get selectedOptions () {
+    return this.eventDetail?.selectedOptions
+      ?? []
+  }
+
+  /**
+   * Zero-based group index for the selected option.
+   *
+   * @returns {number | null}
+   */
+  get selectedGroupIndex () {
+    return this.eventDetail?.selectedGroupIndex
+      ?? null
+  }
+
+  /**
+   * Extract value from the selected option.
+   *
+   * @param {{
+   *   option?: FuroAutocompleteOption | FuroAcceptableValue
+   * }} [params] - Parameters of this method.
+   * @returns {FuroAutocompleteOption | FuroAcceptableValue}
+   */
+  extractValue ({
+    option = this.selectedOption,
+  } = {}) {
+    if (
+      option
+      && typeof option === 'object'
+      && 'value' in option
+    ) {
+      return option.value
+        ?? null
+    }
+
+    return option
+  }
+
+  /**
+   * Extract selected values from selected options.
+   *
+   * @returns {Array<FuroAcceptableValue>}
+   */
+  extractValues () {
+    return this.selectedOptions
+      .map(it => this.extractValue({
+        option: it,
+      }))
+  }
+
+  /**
+   * Whether the autocomplete value is empty.
+   *
+   * @returns {boolean}
+   */
+  hasEmptyValue () {
+    const values = this.extractValues()
+    const value = this.extractValue()
+
+    return value === null
+      || values.length === 0
+  }
+
+  /**
+   * Whether the autocomplete has a selected value.
+   *
+   * @returns {boolean}
+   */
+  hasSelectedValue () {
+    return !this.hasEmptyValue()
+  }
+
+  /**
+   * Extract trimmed search keyword.
+   *
+   * @returns {string}
+   */
+  extractTrimmedSearchKeyword () {
+    return this.searchKeyword.trim()
+  }
+
+  /**
+   * Whether the selected value matches the given option value (strict equality).
+   *
+   * @param {{
+   *   value?: FuroAcceptableValue
+   * }} [params] - Parameters of this method.
+   * @returns {boolean}
+   */
+  matchesOption ({
+    value,
+  } = {}) {
+    const givenValue = this.extractValue({
+      option: value,
+    })
+    const defaultValue = this.extractValue()
+
+    return givenValue === defaultValue
+  }
+}
+
+/**
+ * @typedef {string | number | bigint | Record<string, *> | null}  FuroAcceptableValue
+ */
+
+/**
+ * Public list row shape for applications. Additional JSON-serializable keys are allowed.
+ *
+ * @typedef {{
+ *   label: string
+ *   value: FuroAcceptableValue
+ *   disabled?: boolean
+ *   icon?: IconProps
+ *   indicatorIcon?: IconProps
+ *   separator?: boolean
+ *   options?: Array<FuroAutocompleteOption | FuroAcceptableValue>
+ *   [key: string]: *
+ * }} FuroAutocompleteOption
+ */
+
+/**
+ * Internal Reka row props. Not part of the public application API.
+ *
+ * @typedef {Reka.ComboboxItemProps
+ *   & Reka.ComboboxItemIndicatorProps} RekaComboboxOptionProps
+ */
+
+/**
+ * @typedef {{
+ *   name: string
+ *   size?: string
+ *   style?: import('vue').CSSProperties
+ *   class?: string
+ * }} IconProps
+ */
+
+/**
+ * @typedef {CustomEvent<{
+ *   target: HTMLElement | null
+ *   searchKeyword: string
+ *   isMultiple: boolean
+ *   selectedOption: FuroAutocompleteOption | FuroAcceptableValue
+ *   selectedOptions: Array<FuroAutocompleteOption | FuroAcceptableValue>
+ *   selectedIndex: number
+ *   selectedGroupIndex: number | null
+ * }>} AutocompleteRawEvent
+ */
+
+/**
+ * @typedef {{
+ *   rawEvent: AutocompleteRawEvent
+ * }} AutocompleteEmitPayloadParams
+ */
+
+/**
+ * @typedef {AutocompleteEmitPayloadParams} AutocompleteEmitPayloadFactoryParams
+ */
+
+/**
+ * @import * as Reka from 'reka-ui'
+ */