@openreachtech/furo-vue 1.3.1

package/lib/components/atoms/FuroButton/FuroButtonContext.js

@@ -0,0 +1,328 @@
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+import ButtonEmitPayload from './ButtonEmitPayload.js'
+
+/**
+ * Furo-owned parcel keys (not forwarded to Reka Primitive).
+ */
+const FURO_BUTTON_PARCEL_KEYS = new Set([
+  'variant',
+  'size',
+  'disabled',
+  'loading',
+  'asChild',
+  'type',
+])
+
+/**
+ * Context class for managing FuroButton component.
+ *
+ * @extends {BaseFuroContext<null, Props, EmitEventName>}
+ */
+export default class FuroButtonContext extends BaseFuroContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroButtonContextParams} params
+   */
+  constructor ({
+    props,
+    componentContext,
+  }) {
+    super({
+      props,
+      componentContext,
+    })
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof FuroButtonContext ? X : never} T, X
+   * @override
+   * @param {FuroButtonContextFactoryParams} params - Parameters of this factory method.
+   * @returns {InstanceType<T>} An instance of this class.
+   * @this {T}
+   */
+  static create ({
+    props,
+    componentContext,
+  }) {
+    return /** @type {InstanceType<T>} */ (
+      new this({
+        props,
+        componentContext,
+      })
+    )
+  }
+
+  /**
+   * Get emit event name.
+   *
+   * @override
+   * @returns {Readonly<{
+   *   CLICK: 'click'
+   * }>}
+   */
+  static get EMIT_EVENT_NAME () {
+    return {
+      CLICK: 'click',
+    }
+  }
+
+  /**
+   * Get emit options.
+   *
+   * @returns {{
+   *   click: (payload: import('./ButtonEmitPayload.js').default) => void
+   * }}
+   */
+  static get EMIT_EVENT_HASH () {
+    return {
+      [this.EMIT_EVENT_NAME.CLICK]: payload => {},
+    }
+  }
+
+  /**
+   * get: Constructor of `EmitPayload`.
+   *
+   * @returns {typeof ButtonEmitPayload}
+   */
+  static get EmitPayloadCtor () {
+    return ButtonEmitPayload
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroButtonContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroButtonContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * Parcel passed from parent via props (merged with defaults).
+   *
+   * @override
+   * @returns {FuroButtonParcel}
+   */
+  get parcel () {
+    return {
+      variant: 'default',
+      size: 'default',
+      disabled: false,
+      loading: false,
+      asChild: false,
+      type: 'button',
+      ...this.props.parcel,
+    }
+  }
+
+  /**
+   * Whether the button is disabled.
+   *
+   * @returns {boolean}
+   */
+  isDisabled () {
+    return Boolean(this.parcel.disabled)
+      || this.hasBooleanAttribute({ name: 'disabled' })
+  }
+
+  /**
+   * Whether the button is in a loading state.
+   *
+   * @returns {boolean}
+   */
+  isLoading () {
+    return Boolean(this.parcel.loading)
+  }
+
+  /**
+   * Whether interaction should be blocked.
+   *
+   * @returns {boolean}
+   */
+  isInteractionBlocked () {
+    return this.isDisabled()
+      || this.isLoading()
+  }
+
+  /**
+   * Extract CSS class map for the button root.
+   *
+   * @returns {Record<string, boolean>}
+   */
+  extractRootClassNames () {
+    const variant = this.parcel.variant
+      ?? 'default'
+
+    const size = this.parcel.size
+      ?? 'default'
+
+    const sizeClassEntries = size === 'default'
+      ? []
+      : [[`size-${size}`, true]]
+
+    return Object.fromEntries([
+      ['unit-button', true],
+      [variant, true],
+      ...sizeClassEntries,
+      ['disabled', this.isDisabled()],
+      ['loading', this.isLoading()],
+    ])
+  }
+
+  /**
+   * Extract root attributes forwarded to Reka Primitive.
+   *
+   * @returns {Record<string, unknown>}
+   */
+  extractRootAttributes () {
+    const parcelEntries = Object.entries(this.parcel)
+
+    return Object.fromEntries(
+      parcelEntries.filter(([key]) => !FURO_BUTTON_PARCEL_KEYS.has(key))
+    )
+  }
+
+  /**
+   * Extract Reka Primitive props from parcel.
+   *
+   * @returns {{
+   *   as: 'button'
+   *   asChild: boolean
+   *   disabled: boolean
+   *   type: FuroButtonType
+   * }}
+   */
+  extractPrimitiveParcel () {
+    const type = this.parcel.type
+      ?? 'button'
+
+    return {
+      as: 'button',
+      asChild: Boolean(this.parcel.asChild),
+      disabled: this.isInteractionBlocked(),
+      type,
+    }
+  }
+
+  /**
+   * Extract ARIA attributes for the button root.
+   *
+   * @returns {{
+   *   'aria-disabled': 'true' | undefined
+   *   'aria-busy': 'true' | undefined
+   * }}
+   */
+  extractAriaAttributes () {
+    const ariaDisabled = this.isDisabled()
+      ? 'true'
+      : undefined
+
+    const ariaBusy = this.isLoading()
+      ? 'true'
+      : undefined
+
+    return {
+      'aria-disabled': ariaDisabled,
+      'aria-busy': ariaBusy,
+    }
+  }
+
+  /**
+   * Handle native click on the button root.
+   *
+   * @param {{
+   *   rawEvent: MouseEvent | PointerEvent
+   * }} params - Parameters.
+   */
+  onClick ({
+    rawEvent,
+  }) {
+    if (this.isInteractionBlocked()) {
+      return
+    }
+
+    const payload = this.Ctor.EmitPayloadCtor.create({
+      rawEvent,
+    })
+
+    this.emit(
+      this.EMIT_EVENT_NAME.CLICK,
+      payload
+    )
+  }
+}
+
+/**
+ * @typedef {import('../../../contexts/BaseFuroContext.js').BaseFuroContextParams & {
+ *   props: Props
+ *   componentContext: ComponentContext
+ * }} FuroButtonContextParams
+ */
+
+/**
+ * @typedef {FuroButtonContextParams} FuroButtonContextFactoryParams
+ */
+
+/**
+ * @typedef {keyof typeof FuroButtonContext.EMIT_EVENT_NAME} EmitEventName
+ */
+
+/**
+ * @typedef {'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'} FuroButtonVariant
+ */
+
+/**
+ * @typedef {'default' | 'sm' | 'lg' | 'icon'} FuroButtonSize
+ */
+
+/**
+ * @typedef {'button' | 'submit' | 'reset'} FuroButtonType
+ */
+
+/**
+ * @typedef {{
+ *   parcel?: FuroButtonParcel | null
+ * }} Props
+ */
+
+/**
+ * @typedef {{
+ *   variant?: FuroButtonVariant
+ *   size?: FuroButtonSize
+ *   disabled?: boolean
+ *   loading?: boolean
+ *   asChild?: boolean
+ *   type?: FuroButtonType
+ * }} FuroButtonParcel
+ */
+
+/**
+ * @typedef {(
+ *   props: Props,
+ *   componentContext: ComponentContext
+ * ) => {
+ *   context: FuroButtonContext
+ * }} FuroButtonSetup
+ */
+
+/**
+ * @typedef {typeof FuroButtonContext.EMIT_EVENT_HASH} FuroButtonEmitHash
+ */
+
+/**
+ * @typedef {import('vue').SlotsType<{
+ *   default: {}
+ *   loading: {}
+ * }>} FuroButtonSlots
+ */
+
+/**
+ * @typedef {import('vue').SetupContext<FuroButtonEmitHash, FuroButtonSlots>} ComponentContext
+ */

package/lib/components/atoms/FuroCheckbox/CheckboxEmitPayload.js

@@ -0,0 +1,106 @@
+import BaseEmitPayload from '../../../emit-payload/BaseEmitPayload.js'
+
+/**
+ * CheckboxEmitPayload.
+ *
+ * @extends {BaseEmitPayload<CheckboxRawEvent, HTMLElement>}
+ */
+export default class CheckboxEmitPayload extends BaseEmitPayload {
+  /**
+   * Get the event detail.
+   *
+   * @returns {CheckboxRawEvent['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 checked state after the change.
+   *
+   * @returns {FuroCheckboxValue | null}
+   */
+  get value () {
+    return this.eventDetail?.value
+      ?? null
+  }
+
+  /**
+   * Whether the checkbox is indeterminate after the change.
+   *
+   * @returns {boolean}
+   */
+  get indeterminate () {
+    return this.eventDetail?.indeterminate
+      ?? false
+  }
+
+  /**
+   * Whether the checkbox is in the indeterminate state.
+   *
+   * @returns {boolean}
+   */
+  isIndeterminate () {
+    return this.indeterminate
+  }
+
+  /**
+   * Whether the checkbox is checked.
+   *
+   * @returns {boolean | null}
+   */
+  isChecked () {
+    if (typeof this.value !== 'boolean') {
+      return null
+    }
+
+    return this.value
+  }
+
+  /**
+   * Whether the checkbox is unchecked.
+   *
+   * @returns {boolean | null}
+   */
+  isUnchecked () {
+    if (typeof this.value !== 'boolean') {
+      return null
+    }
+
+    return !this.value
+  }
+}
+
+/**
+ * @typedef {import('./FuroCheckboxContext.js').FuroCheckboxValue} FuroCheckboxValue
+ */
+
+/**
+ * @typedef {{
+ *   rawEvent: CheckboxRawEvent
+ * }} CheckboxEmitPayloadParams
+ */
+
+/**
+ * @typedef {CustomEvent<{
+ *   target: HTMLElement | null
+ *   value: FuroCheckboxValue | null
+ *   indeterminate: boolean
+ * }>} CheckboxRawEvent
+ */
+
+/**
+ * @typedef {CheckboxEmitPayloadParams} CheckboxEmitPayloadFactoryParams
+ */

package/lib/components/atoms/FuroCheckbox/FuroCheckbox.vue

@@ -0,0 +1,173 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Checkbox as RekaCheckbox,
+} from 'reka-ui/namespaced'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroCheckboxContext from './FuroCheckboxContext.js'
+
+export default defineComponent({
+  name: 'FuroCheckbox',
+
+  components: {
+    FuroIcon,
+    CheckboxRoot: RekaCheckbox.Root,
+    CheckboxIndicator: RekaCheckbox.Indicator,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroCheckboxContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  emits: FuroCheckboxContext.EMIT_EVENT_HASH,
+
+  /**
+   * Setup of this component.
+   *
+   * @type {import('./FuroCheckboxContext.js').FuroCheckboxSetup}
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroCheckboxContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <CheckboxRoot
+    :ref="context.checkboxRootElementRef"
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...$attrs,
+    }"
+    class="unit-form-control checkbox"
+    :class="{
+      invalid: context.isInvalid(),
+      disabled: context.isDisabled(),
+    }"
+    :style="context.extractCheckboxRootStyle()"
+    :aria-invalid="context.isInvalid()"
+    :disabled="context.isDisabled()"
+    :required="context.isRequired()"
+    :model-value="context.internalValueRef.value"
+    @update:model-value="context.onChangeValue({
+      rawValue: $event,
+    })"
+  >
+    <CheckboxIndicator class="indicator">
+      <slot
+        v-if="context.isIndeterminate()"
+        name="indeterminate-indicator"
+      >
+        <FuroIcon
+          name="ph:minus-bold"
+          class="indicator-icon"
+          :size="context.extractCheckboxIconSize()"
+        />
+      </slot>
+
+      <slot
+        v-else-if="context.isChecked()"
+        name="indicator"
+      >
+        <FuroIcon
+          name="ph:check-bold"
+          class="indicator-icon"
+          :size="context.extractCheckboxIconSize()"
+        />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-form-control.checkbox {
+    display: inline-grid;
+    place-content: center;
+
+    width: var(--furo-checkbox-size, 1.125rem);
+    height: var(--furo-checkbox-size, 1.125rem);
+
+    border: var(--size-thinnest) solid var(--color-input);
+    border-radius: var(--size-border-radius-2x-small);
+
+    background-color: transparent;
+
+    transition-duration: var(--transition-timer);
+    transition-property: color, background-color, border-color;
+  }
+
+  .unit-form-control.checkbox[data-state="checked"],
+  .unit-form-control.checkbox[data-state="indeterminate"] {
+    background-color: var(--color-selected);
+    border-color: var(--color-selected);
+    color: var(--color-selected-foreground);
+  }
+
+  /* :not(.invalid) so this does not outrank the invalid rule below on
+     specificity, which a bare :hover would. */
+  .unit-form-control.checkbox:not(.invalid)[data-state="checked"]:hover,
+  .unit-form-control.checkbox:not(.invalid)[data-state="indeterminate"]:hover {
+    background-color: var(--color-selected-darker);
+    border-color: var(--color-selected-darker);
+  }
+
+  .unit-form-control.checkbox.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .unit-form-control.checkbox:focus-visible {
+    outline: none;
+    border-color: var(--color-ring);
+  }
+
+  .unit-form-control.checkbox.invalid {
+    border-color: var(--color-destructive);
+  }
+
+  .unit-form-control.checkbox.invalid[data-state="checked"],
+  .unit-form-control.checkbox.invalid[data-state="indeterminate"] {
+    background-color: var(--color-destructive);
+    border-color: var(--color-destructive);
+    color: var(--color-destructive-foreground);
+  }
+
+  .unit-form-control.checkbox > .indicator {
+    display: grid;
+    place-content: center;
+
+    color: currentColor;
+  }
+
+  .unit-form-control.checkbox > .indicator > .indicator-icon,
+  .unit-form-control.checkbox > .indicator > :deep(svg) {
+    width: var(--furo-checkbox-icon-size, 1rem);
+    height: var(--furo-checkbox-icon-size, 1rem);
+  }
+}
+</style>