@openreachtech/furo-vue 1.3.1

package/lib/components/atoms/FuroNumberField/FuroNumberFieldContext.js

@@ -0,0 +1,442 @@
+import {
+  ref,
+} from 'vue'
+
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+import NumberFieldEmitPayload from './NumberFieldEmitPayload.js'
+
+/**
+ * Context class for managing FuroNumberField component.
+ *
+ * @extends {BaseFuroContext<null, Props, EmitEventName>}
+ */
+export default class FuroNumberFieldContext extends BaseFuroContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroNumberFieldContextParams} params
+   */
+  constructor ({
+    props,
+    componentContext,
+    refHash,
+  }) {
+    super({
+      props,
+      componentContext,
+    })
+
+    this.refHash = refHash
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof FuroNumberFieldContext ? X : never} T, X
+   * @override
+   * @param {FuroNumberFieldContextFactoryParams} 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 {{
+   *   internalValueRef: import('vue').Ref<number | null>
+   *   inputElementRef: import('vue').Ref<HTMLInputElement | null>
+   * }}
+   */
+  static buildRefHash () {
+    return {
+      internalValueRef: ref(null),
+      inputElementRef: ref(null),
+    }
+  }
+
+  /**
+   * Get emit event name.
+   *
+   * @override
+   * @returns {Readonly<{
+   *   CHANGE_VALUE: 'change-value'
+   *   COMMIT_VALUE: 'commit-value'
+   *   UPDATE_VALUE: 'update:value'
+   * }>}
+   */
+  static get EMIT_EVENT_NAME () {
+    return {
+      CHANGE_VALUE: 'change-value',
+      COMMIT_VALUE: 'commit-value',
+      UPDATE_VALUE: 'update:value',
+    }
+  }
+
+  /**
+   * Get emit options.
+   *
+   * @returns {{
+   *   'change-value': (payload: import('./NumberFieldEmitPayload.js').default) => void
+   *   'commit-value': (payload: import('./NumberFieldEmitPayload.js').default) => void
+   *   'update:value': (value: number | null) => void
+   * }}
+   */
+  static get EMIT_EVENT_HASH () {
+    return {
+      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.COMMIT_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: value => true,
+    }
+  }
+
+  /**
+   * get: Constructor of `EmitPayload`.
+   *
+   * @returns {typeof NumberFieldEmitPayload}
+   */
+  static get EmitPayloadCtor () {
+    return NumberFieldEmitPayload
+  }
+
+  /**
+   * Create an instance of `EmitPayload`.
+   *
+   * @param {{
+   *   rawValue: number | null
+   * }} params - Parameters.
+   * @returns {InstanceType<typeof NumberFieldEmitPayload>}
+   */
+  static createEmitPayload ({
+    rawValue,
+  }) {
+    return this.EmitPayloadCtor.create({
+      rawEvent: rawValue,
+    })
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroNumberFieldContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroNumberFieldContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * Get internal value ref.
+   *
+   * @returns {import('vue').Ref<number | null>}
+   */
+  get internalValueRef () {
+    return this.refHash.internalValueRef
+  }
+
+  /**
+   * Parcel passed from parent via props.
+   * Get input element ref.
+   *
+   * @returns {import('vue').Ref<HTMLInputElement | null>}
+   */
+  get inputElementRef () {
+    return this.refHash.inputElementRef
+  }
+
+  /**
+   * @returns {Props['parcel']}
+   */
+  get parcel () {
+    return this.props.parcel
+      ?? null
+  }
+
+  /**
+   * Input parcel passed from parent via props.
+   *
+   * @returns {FuroNumberFieldParcel['inputParcel'] & import('vue').InputHTMLAttributes | null}
+   */
+  get inputParcel () {
+    return this.parcel?.inputParcel
+      ?? null
+  }
+
+  /**
+   * Decrement parcel passed from parent via props.
+   *
+   * @returns {FuroNumberFieldParcel['decrementParcel']}
+   */
+  get decrementParcel () {
+    return this.parcel?.decrementParcel
+      ?? null
+  }
+
+  /**
+   * Increment parcel passed from parent via props.
+   *
+   * @returns {FuroNumberFieldParcel['incrementParcel']}
+   */
+  get incrementParcel () {
+    return this.parcel?.incrementParcel
+      ?? null
+  }
+
+  /**
+   * Placeholder passed from parent via props.
+   *
+   * @returns {HTMLInputElement['placeholder'] | null}
+   */
+  get placeholder () {
+    return (/** @type {import('vue').InputHTMLAttributes} */ (this.attrs))
+      .placeholder
+      ?? null
+  }
+
+  /**
+   * Name passed from parent via props.
+   *
+   * @returns {HTMLInputElement['name'] | null}
+   */
+  get name () {
+    return (/** @type {import('vue').InputHTMLAttributes} */ (this.attrs))
+      .name
+      ?? null
+  }
+
+  /**
+   * Setup component context.
+   *
+   * @template {X extends FuroNumberFieldContext ? X : never} T, X
+   * @override
+   * @returns {T} - For method chaining.
+   * @this {T}
+   */
+  setupComponent () {
+    this.watch(
+      () => this.parcel?.value,
+      parcelNumberValue => {
+        this.internalValueRef.value = parcelNumberValue ?? null
+      },
+      {
+        immediate: true,
+      }
+    )
+
+    return this
+  }
+
+  /**
+   * Extract root attributes from parcel.
+   *
+   * @returns {Omit<import('reka-ui').NumberFieldRootProps, 'modelValue' | 'defaultValue'> | null}
+   */
+  extractRootAttributes () {
+    return this.parcel
+      ?? null
+  }
+
+  /**
+   * Extract placeholder attribute.
+   *
+   * @returns {HTMLInputElement['placeholder']}
+   */
+  extractPlaceholderAttribute () {
+    return this.placeholder
+      ?? ''
+  }
+
+  /**
+   * Extract name attribute.
+   *
+   * @returns {HTMLInputElement['name']}
+   */
+  extractNameAttribute () {
+    return this.name
+      ?? ''
+  }
+
+  /**
+   * Whether the number field is invalid.
+   *
+   * @returns {boolean}
+   */
+  isInvalid () {
+    return Boolean(this.parcel?.invalid)
+  }
+
+  /**
+   * Build a custom event.
+   *
+   * @param {{
+   *   name: string
+   *   value: number | null
+   * }} params - Parameters.
+   * @returns {import('./NumberFieldEmitPayload.js').NumberFieldRawEvent}
+   */
+  buildCustomEvent ({
+    name,
+    value,
+  }) {
+    return new CustomEvent(
+      name,
+      {
+        detail: {
+          target: this.inputElementRef.value,
+          value,
+        },
+      }
+    )
+  }
+
+  /**
+   * Handle value update emitted by Reka UI NumberFieldRoot.
+   * Called on every `update:modelValue` event (typing, stepping, wheel).
+   *
+   * @param {{
+   *   rawValue: number | null
+   * }} params - Parameters.
+   */
+  onChangeValue ({
+    rawValue,
+  }) {
+    const customEvent = this.buildCustomEvent({
+      name: this.EMIT_EVENT_NAME.CHANGE_VALUE,
+      value: rawValue,
+    })
+    const payload = this.Ctor.EmitPayloadCtor.create({
+      rawEvent: customEvent,
+    })
+
+    this.internalValueRef.value = payload.value
+
+    this.emit(
+      this.EMIT_EVENT_NAME.CHANGE_VALUE,
+      payload
+    )
+
+    // To support v-model:value.
+    this.emit(
+      this.EMIT_EVENT_NAME.UPDATE_VALUE,
+      payload.value
+    )
+  }
+
+  /**
+   * Handle commit event (blur or Enter key press on the input).
+   *
+   * @param {{
+   *   rawValue: number | null
+   * }} params - Parameters.
+   */
+  onCommitValue ({
+    rawValue,
+  }) {
+    const customEvent = this.buildCustomEvent({
+      name: this.EMIT_EVENT_NAME.COMMIT_VALUE,
+      value: rawValue,
+    })
+    const payload = this.Ctor.EmitPayloadCtor.create({
+      rawEvent: customEvent,
+    })
+
+    this.internalValueRef.value = payload.value
+
+    this.emit(
+      this.EMIT_EVENT_NAME.COMMIT_VALUE,
+      payload
+    )
+
+    // To support v-model:value.
+    this.emit(
+      this.EMIT_EVENT_NAME.UPDATE_VALUE,
+      payload.value
+    )
+  }
+}
+
+/**
+ * @typedef {import('../../../contexts/BaseFuroContext.js').BaseFuroContextParams & {
+ *   props: Props
+ *   componentContext: ComponentContext
+ *   refHash: {
+ *     internalValueRef: import('vue').Ref<number | null>
+ *     inputElementRef: import('vue').Ref<HTMLInputElement | null>
+ *   }
+ * }} FuroNumberFieldContextParams
+ */
+
+/**
+ * @typedef {Omit<FuroNumberFieldContextParams, 'refHash'> & {
+ *   refHash?: {
+ *     internalValueRef: import('vue').Ref<number | null>
+ *     inputElementRef: import('vue').Ref<HTMLInputElement | null>
+ *   }
+ * }} FuroNumberFieldContextFactoryParams
+ */
+
+/**
+ * @typedef {keyof typeof FuroNumberFieldContext.EMIT_EVENT_NAME} EmitEventName
+ */
+
+/**
+ * @typedef {import('vue').HTMLAttributes & {
+ *   parcel?: FuroNumberFieldParcel | null
+ * }} Props
+ */
+
+/**
+ * @typedef {import('vue').SetupContext<FuroNumberFieldEmitHash, FuroNumberFieldSlots>} ComponentContext
+ */
+
+/**
+ * @typedef {import('vue').SlotsType<{
+ *   increment?: {
+ *     value: number
+ *   }
+ *   decrement?: {
+ *     value: number
+ *   }
+ * }>} FuroNumberFieldSlots
+ */
+
+/**
+ * @typedef {Omit<import('reka-ui').NumberFieldRootProps, 'modelValue' | 'defaultValue'> & {
+ *   value?: number | null
+ *   invalid?: boolean
+ *   inputParcel?: import('reka-ui').NumberFieldInputProps & import('vue').InputHTMLAttributes | null
+ *   decrementParcel?: import('reka-ui').NumberFieldDecrementProps | null
+ *   incrementParcel?: import('reka-ui').NumberFieldIncrementProps | null
+ * }} FuroNumberFieldParcel
+ */
+
+/**
+ * @typedef {typeof FuroNumberFieldContext.EMIT_EVENT_HASH} FuroNumberFieldEmitHash
+ */
+
+/**
+ * @typedef {(
+ *   props: Props,
+ *   componentContext: ComponentContext
+ * ) => {
+ *   context: FuroNumberFieldContext
+ * }} FuroNumberFieldSetup
+ */

package/lib/components/atoms/FuroNumberField/NumberFieldEmitPayload.js

@@ -0,0 +1,162 @@
+import BaseEmitPayload from '../../../emit-payload/BaseEmitPayload.js'
+
+/**
+ * NumberFieldEmitPayload.
+ *
+ * @extends {BaseEmitPayload<NumberFieldRawEvent>}
+ */
+export default class NumberFieldEmitPayload extends BaseEmitPayload {
+  /**
+   * Get the event detail.
+   *
+   * @returns {NumberFieldRawEvent['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
+  }
+
+  /**
+   * Current numeric value of the number field.
+   * Returns `null` when the field is empty or cleared.
+   *
+   * @returns {number | null}
+   */
+  get value () {
+    return this.eventDetail?.value
+      ?? null
+  }
+
+  /**
+   * Whether the field value is empty (null).
+   *
+   * @returns {boolean}
+   */
+  hasEmptyValue () {
+    return this.value === null
+  }
+
+  /**
+   * Whether the field has a finite numeric value entered.
+   *
+   * @returns {boolean}
+   */
+  hasEnteredValue () {
+    return !this.hasEmptyValue()
+      && Number.isFinite(this.value)
+  }
+
+  /**
+   * Extract the `min` value attribute from the control element.
+   *
+   * @returns {number | null}
+   */
+  extractMinValueAttribute () {
+    return this.parseStringAsNumber({
+      stringValue: this.getElementAttribute({
+        key: 'min',
+      }),
+    })
+  }
+
+  /**
+   * Extract the `max` value attribute from the control element.
+   *
+   * @returns {number | null}
+   */
+  extractMaxValueAttribute () {
+    return this.parseStringAsNumber({
+      stringValue: this.getElementAttribute({
+        key: 'max',
+      }),
+    })
+  }
+
+  /**
+   * Whether the field value is greater than or equal to the control `min` attribute.
+   *
+   * @returns {boolean}
+   */
+  isGreaterThanOrEqualMin () {
+    const minAttributeValue = this.extractMinValueAttribute() ?? NaN
+    const inputValue = this.value ?? NaN
+
+    if (
+      isNaN(inputValue)
+      || isNaN(minAttributeValue)
+    ) {
+      return false
+    }
+
+    return inputValue >= minAttributeValue
+  }
+
+  /**
+   * Whether the field value is less than or equal to the control `max` attribute.
+   *
+   * @returns {boolean}
+   */
+  isLessThanOrEqualMax () {
+    const maxAttributeValue = this.extractMaxValueAttribute() ?? NaN
+    const inputValue = this.value ?? NaN
+
+    if (
+      isNaN(inputValue)
+      || isNaN(maxAttributeValue)
+    ) {
+      return false
+    }
+
+    return inputValue <= maxAttributeValue
+  }
+
+  /**
+   * Whether the field value lies between the control `min` and `max` attributes (inclusive).
+   *
+   * Requires both attributes to parse as finite numbers; otherwise returns `false`.
+   *
+   * @returns {boolean}
+   */
+  isWithinRange () {
+    const minAttributeValue = this.extractMinValueAttribute() ?? NaN
+    const maxAttributeValue = this.extractMaxValueAttribute() ?? NaN
+
+    if (
+      isNaN(minAttributeValue)
+      || isNaN(maxAttributeValue)
+    ) {
+      return false
+    }
+
+    return this.isGreaterThanOrEqualMin()
+      && this.isLessThanOrEqualMax()
+  }
+}
+
+/**
+ * @typedef {{
+ *   rawEvent: NumberFieldRawEvent
+ * }} NumberFieldEmitPayloadParams
+ */
+
+/**
+ * @typedef {CustomEvent<{
+ *   target: HTMLInputElement | null
+ *   value: number | null
+ * }>} NumberFieldRawEvent
+ */
+
+/**
+ * @typedef {NumberFieldEmitPayloadParams} NumberFieldEmitPayloadFactoryParams
+ */

package/lib/components/atoms/FuroPasswordField/FuroPasswordField.vue

@@ -0,0 +1,119 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import FuroPasswordFieldContext from './FuroPasswordFieldContext.js'
+
+export default defineComponent({
+  name: 'FuroPasswordField',
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroPasswordFieldContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  emits: FuroPasswordFieldContext.EMIT_EVENT_HASH,
+
+  /**
+   * Setup of this component.
+   *
+   * @type {import('./FuroPasswordFieldContext.js').FuroPasswordFieldSetup}
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroPasswordFieldContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <input
+    class="unit-form-control password"
+    :class="{
+      invalid: context.isInvalid(),
+    }"
+    type="password"
+    v-bind="context.generateInputAttributes()"
+    :aria-invalid="context.isInvalid()"
+    :value="context.internalValueRef.value"
+    @input="context.onChangeValue({
+      rawEvent: $event,
+    })"
+    @blur="context.onCommitValue({
+      rawEvent: $event,
+    })"
+    @keypress.enter="context.onCommitValue({
+      rawEvent: $event,
+    })"
+  >
+</template>
+
+<style>
+@layer furo {
+  .unit-form-control.password {
+    display: flex;
+
+    border-radius: var(--size-border-radius-medium);
+    border: var(--size-thinnest) solid var(--color-input);
+
+    width: 100%;
+    min-width: 0;
+    height: var(--size-input-height);
+
+    padding-block: 0.25rem;
+    padding-inline: 0.625rem;
+
+    background-color: transparent;
+
+    color: var(--color-foreground);
+    font: var(--font-body-medium);
+
+    transition-duration: var(--transition-timer);
+    transition-property: color, background-color, border-color;
+
+    @media (width < 48rem) {
+      font-size: var(--font-size-small);
+    }
+  }
+
+  .unit-form-control.password::placeholder {
+    color: var(--color-muted-foreground);
+  }
+
+  .unit-form-control.password:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .unit-form-control.password:focus-visible {
+    outline: none;
+    border-color: var(--color-ring);
+  }
+
+  .unit-form-control.password.invalid {
+    border-color: var(--color-destructive);
+  }
+
+  .unit-form-control.password.invalid:focus-visible {
+    border-color: var(--color-destructive);
+  }
+}
+</style>