@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroTimeField/TimeFieldEmitPayload.js

@@ -0,0 +1,74 @@
+import BaseEmitPayload from '../../../emit-payload/BaseEmitPayload.js'
+
+/**
+ * TimeFieldEmitPayload.
+ *
+ * @extends {BaseEmitPayload<TimeFieldRawEvent, HTMLElement>}
+ */
+export default class TimeFieldEmitPayload extends BaseEmitPayload {
+  /**
+   * Get the event detail.
+   *
+   * @returns {TimeFieldRawEvent['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
+  }
+
+  /**
+   * Selected time as `HH:MM:SS` string, or `null` when cleared.
+   *
+   * @returns {string | null}
+   */
+  get value () {
+    return this.eventDetail?.value
+      ?? null
+  }
+
+  /**
+   * Whether the payload carries an empty (null) value.
+   *
+   * @returns {boolean}
+   */
+  hasEmptyValue () {
+    return this.value === null
+  }
+
+  /**
+   * Whether the payload carries a non-null time value.
+   *
+   * @returns {boolean}
+   */
+  hasValue () {
+    return !this.hasEmptyValue()
+  }
+}
+
+/**
+ * @typedef {CustomEvent<{
+ *   target: HTMLElement | null
+ *   value: string | null
+ * }>} TimeFieldRawEvent
+ */
+
+/**
+ * @typedef {{
+ *   rawEvent: TimeFieldRawEvent
+ * }} TimeFieldEmitPayloadParams
+ */
+
+/**
+ * @typedef {TimeFieldEmitPayloadParams} TimeFieldEmitPayloadFactoryParams
+ */

package/lib/components/molecules/FuroToggleGroup/FuroToggleGroup.vue

@@ -0,0 +1,211 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  ToggleGroup as RekaToggleGroup,
+} from 'reka-ui/namespaced'
+
+import FuroToggleGroupContext from './FuroToggleGroupContext.js'
+
+export default defineComponent({
+  name: 'FuroToggleGroup',
+
+  components: {
+    ToggleGroupRoot: RekaToggleGroup['Root'],
+    ToggleGroupOption: RekaToggleGroup['Item'],
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroToggleGroupContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  emits: FuroToggleGroupContext.EMIT_EVENT_HASH,
+
+  /**
+   * Setup of this component.
+   *
+   * @type {import('./FuroToggleGroupContext.js').FuroToggleGroupSetup}
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroToggleGroupContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <ToggleGroupRoot
+    :ref="context.groupRootElementRef"
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...$attrs,
+    }"
+    :class="context.extractRootClassNames()"
+    :type="context.resolveSelectionMode()"
+    :orientation="context.resolveOrientation()"
+    :disabled="context.isDisabled()"
+    :model-value="context.internalValueRef.value"
+    @update:model-value="context.onChangeValue({
+      rawValue: $event,
+    })"
+  >
+    <ToggleGroupOption
+      v-for="option of context.options"
+      :key="option.value"
+      :value="option.value"
+      :disabled="context.isOptionDisabled({ option })"
+      :class="context.extractItemClassNames({ option })"
+    >
+      <slot
+        name="option"
+        :option="option"
+        :pressed="context.isSelected({ value: option.value })"
+      >
+        {{ context.extractOptionLabel({ option }) }}
+      </slot>
+    </ToggleGroupOption>
+  </ToggleGroupRoot>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-toggle-group {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-space-tiny);
+
+    min-width: 0;
+  }
+
+  .unit-toggle-group.vertical {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .unit-toggle-group.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .unit-toggle-group-item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-space-small);
+
+    min-width: 0;
+
+    border: var(--size-thinnest) solid transparent;
+    border-radius: var(--size-border-radius-medium);
+
+    padding-block: 0.5rem;
+    padding-inline: 0.75rem;
+
+    height: var(--size-input-height);
+
+    background-color: transparent;
+
+    color: var(--color-foreground);
+    font: inherit;
+    font-size: var(--font-size);
+    font-weight: var(--font-weight-medium, 500);
+    line-height: var(--font-line-height-body, 1.4);
+    white-space: nowrap;
+
+    cursor: pointer;
+
+    transition-duration: var(--transition-timer);
+    transition-property: color, background-color, border-color, box-shadow;
+  }
+
+  .unit-toggle-group-item:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-toggle-group-item.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .unit-toggle-group-item.default:hover {
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
+  }
+
+  .unit-toggle-group-item.outline {
+    border-color: var(--color-border);
+  }
+
+  .unit-toggle-group-item.outline:hover {
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
+  }
+
+  /* Pressed state wins over hover (declared after the :hover rules). */
+  .unit-toggle-group-item.default[data-state="on"],
+  .unit-toggle-group-item.outline[data-state="on"] {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-toggle-group-item.outline[data-state="on"] {
+    border-color: var(--color-border);
+    box-shadow: inset 0 0 0 0.0625rem var(--color-border);
+  }
+
+  /* Keep the focus ring visible when an active outline item is focused. */
+  .unit-toggle-group-item.outline[data-state="on"]:focus-visible {
+    box-shadow:
+      inset 0 0 0 0.0625rem var(--color-border),
+      0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-toggle-group-item.default[data-state="on"]:hover,
+  .unit-toggle-group-item.outline[data-state="on"]:hover {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+    filter: brightness(0.95);
+  }
+
+  .unit-toggle-group-item.size-sm {
+    height: 2rem;
+
+    padding-block: 0.25rem;
+    padding-inline: 0.5rem;
+
+    font-size: var(--font-size-small);
+  }
+
+  .unit-toggle-group-item.size-lg {
+    height: 2.75rem;
+
+    padding-block: 0.625rem;
+    padding-inline: 1rem;
+
+    font-size: var(--font-size-large);
+  }
+}
+</style>