@openreachtech/furo-vue 1.3.1

package/lib/components/atoms/FuroEmailField/EmailFieldEmitPayload.js

@@ -0,0 +1,74 @@
+import BaseEmitPayload from '../../../emit-payload/BaseEmitPayload.js'
+
+/**
+ * EmailFieldEmitPayload.
+ *
+ * @extends {BaseEmitPayload<EmailFieldRawEvent, HTMLInputElement>}
+ */
+export default class EmailFieldEmitPayload extends BaseEmitPayload {
+  /**
+   * Current string value of the email field.
+   *
+   * @returns {string | null}
+   */
+  get value () {
+    return this.controlElement?.value
+      ?? null
+  }
+
+  /**
+   * Extract trimmed string value from the email field.
+   *
+   * @returns {string | null}
+   */
+  extractTrimmedValue () {
+    return this.value?.trim()
+      ?? null
+  }
+
+  /**
+   * Whether the raw field value is empty (missing control is treated as empty).
+   *
+   * @returns {boolean}
+   */
+  hasEmptyText () {
+    return this.value
+      ? this.value.length === 0
+      : true
+  }
+
+  /**
+   * Whether the trimmed field value is empty (missing control is treated as empty).
+   *
+   * @returns {boolean}
+   */
+  hasEmptyTrimmedText () {
+    const trimmedFieldValue = this.extractTrimmedValue()
+
+    return trimmedFieldValue
+      ? trimmedFieldValue.length === 0
+      : true
+  }
+
+  /**
+   * Whether the raw field value has at least one character (whitespace counts).
+   *
+   * @returns {boolean}
+   */
+  hasEnteredText () {
+    return !this.hasEmptyText()
+  }
+
+  /**
+   * Whether the trimmed field value has at least one non-whitespace character.
+   *
+   * @returns {boolean}
+   */
+  hasEnteredTrimmedText () {
+    return !this.hasEmptyTrimmedText()
+  }
+}
+
+/**
+ * @typedef {InputEvent | FocusEvent | KeyboardEvent} EmailFieldRawEvent
+ */

package/lib/components/atoms/FuroEmailField/FuroEmailField.vue

@@ -0,0 +1,119 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import FuroEmailFieldContext from './FuroEmailFieldContext.js'
+
+export default defineComponent({
+  name: 'FuroEmailField',
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroEmailFieldContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  emits: FuroEmailFieldContext.EMIT_EVENT_HASH,
+
+  /**
+   * Setup of this component.
+   *
+   * @type {import('./FuroEmailFieldContext.js').FuroEmailFieldSetup}
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroEmailFieldContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <input
+    class="unit-form-control email"
+    :class="{
+      invalid: context.isInvalid(),
+    }"
+    type="email"
+    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.email {
+    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.email::placeholder {
+    color: var(--color-muted-foreground);
+  }
+
+  .unit-form-control.email:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .unit-form-control.email:focus-visible {
+    outline: none;
+    border-color: var(--color-ring);
+  }
+
+  .unit-form-control.email.invalid {
+    border-color: var(--color-destructive);
+  }
+
+  .unit-form-control.email.invalid:focus-visible {
+    border-color: var(--color-destructive);
+  }
+}
+</style>

package/lib/components/atoms/FuroEmailField/FuroEmailFieldContext.js

@@ -0,0 +1,311 @@
+import {
+  ref,
+} from 'vue'
+
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+import EmailFieldEmitPayload from './EmailFieldEmitPayload.js'
+
+/**
+ * Context class for managing FuroEmailField component.
+ *
+ * @extends {BaseFuroContext<null, Props, EmitEventName>}
+ */
+export default class FuroEmailFieldContext extends BaseFuroContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroEmailFieldContextParams} params
+   */
+  constructor ({
+    props,
+    componentContext,
+    refHash,
+  }) {
+    super({
+      props,
+      componentContext,
+    })
+
+    this.refHash = refHash
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof FuroEmailFieldContext ? X : never} T, X
+   * @override
+   * @param {FuroEmailFieldContextFactoryParams} 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
+   */
+  static buildRefHash () {
+    return {
+      internalValueRef: 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('./EmailFieldEmitPayload.js').default) => void
+   *   'commit-value': (payload: import('./EmailFieldEmitPayload.js').default) => void
+   *   'update:value': (payload: string | 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]: payload => true,
+    }
+  }
+
+  /**
+   * get: Constructor of `EmitPayload`
+   *
+   * @returns {typeof EmailFieldEmitPayload}
+   */
+  static get EmitPayloadCtor () {
+    return EmailFieldEmitPayload
+  }
+
+  /**
+   * Create an instance of `EmailFieldEmitPayload`.
+   *
+   * @param {{
+   *   rawEvent: import('./EmailFieldEmitPayload.js').EmailFieldRawEvent
+   * }} params - Parameters.
+   * @returns {InstanceType<typeof EmailFieldEmitPayload>}
+   */
+  static createEmitPayload ({
+    rawEvent,
+  }) {
+    return this.EmitPayloadCtor.create({
+      rawEvent,
+    })
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroEmailFieldContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroEmailFieldContext} */ (this.constructor)
+  }
+
+  /**
+   * Get internal value ref.
+   *
+   * @returns {import('vue').Ref<string | null>}
+   */
+  get internalValueRef () {
+    return this.refHash.internalValueRef
+  }
+
+  /**
+   * Setup component context.
+   *
+   * @template {X extends FuroEmailFieldContext ? X : never} T, X
+   * @override
+   * @returns {T} - For method chaining.
+   * @this {T}
+   */
+  setupComponent () {
+    this.watch(
+      [
+        () => this.parcel?.value,
+        () => this.attrs?.value,
+      ],
+      ([
+        parcelEmailValue = null,
+        attrsEmailValue = null,
+      ]) => {
+        const rawValue = parcelEmailValue
+          ?? attrsEmailValue
+
+        if (rawValue === null) {
+          this.internalValueRef.value = null
+
+          return
+        }
+
+        this.internalValueRef.value = String(rawValue)
+      },
+      {
+        immediate: true,
+      }
+    )
+
+    return this
+  }
+
+  /**
+   * Generate input attributes without type attribute.
+   *
+   * @returns {Omit<import('vue').InputHTMLAttributes, 'type'>}
+   */
+  generateInputAttributes () {
+    const {
+      type,
+      ...restAttributes
+    } = this.attrs
+
+    return restAttributes
+  }
+
+  /**
+   * Whether the email field is invalid.
+   *
+   * @returns {boolean}
+   */
+  isInvalid () {
+    return Boolean(this.parcel?.invalid)
+  }
+
+  /**
+   * Respond to blur and keypress.enter event from the native element.
+   *
+   * @param {{
+   *   rawEvent: FocusEvent | KeyboardEvent
+   * }} params - Parameters.
+   */
+  onCommitValue ({
+    rawEvent,
+  }) {
+    const payload = this.Ctor.EmitPayloadCtor.create({
+      rawEvent,
+    })
+
+    this.emit(
+      this.EMIT_EVENT_NAME.COMMIT_VALUE,
+      payload
+    )
+
+    // To support v-model:value.
+    this.emit(
+      this.EMIT_EVENT_NAME.UPDATE_VALUE,
+      payload.value
+    )
+  }
+
+  /**
+   * Respond to input event from the native element.
+   *
+   * @param {{
+   *   rawEvent: InputEvent
+   * }} params - Parameters.
+   */
+  onChangeValue ({
+    rawEvent,
+  }) {
+    const payload = this.Ctor.EmitPayloadCtor.create({
+      rawEvent,
+    })
+
+    this.emit(
+      this.EMIT_EVENT_NAME.CHANGE_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<string | null>
+ *   }
+ * }} FuroEmailFieldContextParams
+ */
+
+/**
+ * @typedef {Omit<FuroEmailFieldContextParams, 'refHash'> & {
+ *   refHash?: {
+ *     internalValueRef: import('vue').Ref<string | null>
+ *   }
+ * }} FuroEmailFieldContextFactoryParams
+ */
+
+/**
+ * @typedef {keyof typeof FuroEmailFieldContext.EMIT_EVENT_NAME} EmitEventName
+ */
+
+/**
+ * @typedef {Omit<import('vue').InputHTMLAttributes, 'type'> & {
+ *   parcel?: FuroEmailFieldParcel | null
+ * }} Props
+ */
+
+/**
+ * @typedef {import('vue').SetupContext<FuroEmailFieldEmitHash>} ComponentContext
+ */
+
+/**
+ * @typedef {{
+ *   value?: string | null
+ *   invalid?: boolean
+ * }} FuroEmailFieldParcel
+ */
+
+/**
+ * @typedef {typeof FuroEmailFieldContext.EMIT_EVENT_HASH} FuroEmailFieldEmitHash
+ */
+
+/**
+ * @typedef {(
+ *   props: Props,
+ *   componentContext: ComponentContext
+ * ) => {
+ *   context: FuroEmailFieldContext
+ * }} FuroEmailFieldSetup
+ */

package/lib/components/atoms/FuroFileField/FileFieldEmitPayload.js

@@ -0,0 +1,80 @@
+import BaseEmitPayload from '../../../emit-payload/BaseEmitPayload.js'
+
+/**
+ * FileFieldEmitPayload.
+ *
+ * @extends {BaseEmitPayload<FileFieldRawEvent, HTMLInputElement>}
+ */
+export default class FileFieldEmitPayload extends BaseEmitPayload {
+  /**
+   * Selected files from the file input control.
+   *
+   * @returns {FileList | Array<File>} - `controlElement.files`, or an empty array when the control is missing.
+   */
+  get files () {
+    return this.controlElement?.files
+      ?? []
+  }
+
+  /**
+   * First selected file, or `null` when there is no selection.
+   *
+   * @returns {File | null}
+   */
+  get firstFile () {
+    return this.files?.[0]
+      ?? null
+  }
+
+  /**
+   * Whether the file input control allows multiple file selection.
+   *
+   * @returns {boolean}
+   */
+  isMultiple () {
+    return Boolean(this.controlElement?.multiple)
+  }
+
+  /**
+   * Snapshot of selected files as a plain array.
+   *
+   * @returns {Array<File>}
+   */
+  extractFiles () {
+    const fileCollection = this.files
+
+    if (!fileCollection) {
+      return []
+    }
+
+    return Array.from(fileCollection)
+  }
+
+  /**
+   * Whether there is no selected file (missing control is treated as empty).
+   *
+   * @returns {boolean}
+   */
+  hasEmptySelection () {
+    const fileCollection = this.files
+
+    if (!fileCollection) {
+      return true
+    }
+
+    return fileCollection.length === 0
+  }
+
+  /**
+   * Whether at least one file is selected.
+   *
+   * @returns {boolean}
+   */
+  hasSelectedFiles () {
+    return !this.hasEmptySelection()
+  }
+}
+
+/**
+ * @typedef {Event} FileFieldRawEvent
+ */

package/lib/components/atoms/FuroFileField/FuroFileField.vue

@@ -0,0 +1,128 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import FuroFileFieldContext from './FuroFileFieldContext.js'
+
+export default defineComponent({
+  name: 'FuroFileField',
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroFileFieldContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  emits: FuroFileFieldContext.EMIT_EVENT_HASH,
+
+  /**
+   * Setup of this component.
+   *
+   * @type {import('./FuroFileFieldContext.js').FuroFileFieldSetup}
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroFileFieldContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <input
+    class="unit-form-control file"
+    :class="{
+      invalid: context.isInvalid(),
+    }"
+    type="file"
+    v-bind="context.generateInputAttributes()"
+    :aria-invalid="context.isInvalid()"
+    @change="context.onChangeValue({
+      rawEvent: $event,
+    })"
+  >
+</template>
+
+<style>
+@layer furo {
+  .unit-form-control.file {
+    display: flex;
+    align-items: center;
+
+    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;
+    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.file::file-selector-button {
+    margin-inline-end: 0.5rem;
+
+    border-radius: var(--size-border-radius-small);
+    border: none;
+
+    padding-block: 0.25rem;
+    padding-inline: 0.5rem;
+
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-foreground);
+
+    cursor: pointer;
+  }
+
+  .unit-form-control.file:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .unit-form-control.file:disabled::file-selector-button {
+    cursor: not-allowed;
+  }
+
+  .unit-form-control.file:focus-visible {
+    outline: none;
+    border-color: var(--color-ring);
+  }
+
+  .unit-form-control.file.invalid {
+    border-color: var(--color-destructive);
+  }
+
+  .unit-form-control.file.invalid:focus-visible {
+    border-color: var(--color-destructive);
+  }
+}
+</style>