@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroTimeField/FuroTimeField.vue

@@ -0,0 +1,251 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  TimeField as RekaTimeField,
+} from 'reka-ui/namespaced'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroTimeFieldContext from './FuroTimeFieldContext.js'
+
+export default defineComponent({
+  name: 'FuroTimeField',
+
+  components: {
+    TimeFieldRoot: RekaTimeField['Root'],
+    TimeFieldInput: RekaTimeField['Input'],
+    FuroIcon,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<FuroTimeFieldContext['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  emits: FuroTimeFieldContext.EMIT_EVENT_HASH,
+
+  /** @type {FuroTimeFieldSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroTimeFieldContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+
+/**
+ * @import { FuroTimeFieldSetup } from './FuroTimeFieldContext.js'
+ */
+</script>
+
+<template>
+  <div
+    class="unit-form-control time-field"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <button
+      type="button"
+      class="stepper decrement"
+      :disabled="!context.canDecrement()"
+      :aria-label="context.decrementLabel"
+      @mousedown.prevent
+      @click="context.onDecrementValue()"
+    >
+      <slot name="decrement-icon">
+        <FuroIcon name="ph:caret-down" />
+      </slot>
+    </button>
+
+    <TimeFieldRoot
+      v-slot="{ segments }"
+      :ref="context.rootElementRef"
+      class="field"
+      :class="{
+        invalid: context.isInvalid,
+        disabled: context.isDisabled(),
+      }"
+      :aria-invalid="context.isInvalid"
+      v-bind="context.extractRootAttributes()"
+      @update:model-value="context.onChangeValue({
+        time: $event,
+      })"
+    >
+      <template
+        v-for="{ part, value } in segments"
+        :key="part"
+      >
+        <TimeFieldInput
+          v-if="context.isLiteralPart({ part })"
+          :part="part"
+        >
+          {{ value }}
+        </TimeFieldInput>
+        <TimeFieldInput
+          v-else
+          class="field-input"
+          :part="part"
+        >
+          {{
+            context.formatSegmentValue({
+              part,
+              value,
+            })
+          }}
+        </TimeFieldInput>
+      </template>
+    </TimeFieldRoot>
+
+    <button
+      type="button"
+      class="stepper increment"
+      :disabled="!context.canIncrement()"
+      :aria-label="context.incrementLabel"
+      @mousedown.prevent
+      @click="context.onIncrementValue()"
+    >
+      <slot name="increment-icon">
+        <FuroIcon name="ph:caret-up" />
+      </slot>
+    </button>
+  </div>
+</template>
+
+<style>
+@layer furo {
+  .unit-form-control.time-field {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+
+    width: fit-content;
+    min-width: 0;
+    height: var(--size-input-height);
+
+    border-radius: var(--size-border-radius-medium);
+    border: var(--size-thinnest) solid var(--color-input);
+
+    background-color: transparent;
+
+    overflow: hidden;
+
+    transition-duration: var(--transition-timer);
+    transition-property: border-color;
+  }
+
+  .unit-form-control.time-field:focus-within {
+    outline: none;
+    border-color: var(--color-ring);
+  }
+
+  .unit-form-control.time-field > .field {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+
+    min-width: 0;
+    height: 100%;
+
+    padding-block: 0.25rem;
+    padding-inline: 0.25rem;
+
+    background-color: transparent;
+
+    color: var(--color-foreground);
+    font: var(--font-body-medium);
+    font-variant-numeric: tabular-nums;
+
+    white-space: nowrap;
+
+    transition-duration: var(--transition-timer);
+    transition-property: color, background-color;
+
+    @media (width < 48rem) {
+      font-size: var(--font-size-small);
+    }
+  }
+
+  .unit-form-control.time-field > .field.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .unit-form-control.time-field.invalid,
+  .unit-form-control.time-field:has(> .field.invalid) {
+    border-color: var(--color-destructive);
+  }
+
+  .unit-form-control.time-field > .stepper {
+    border: none;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+
+    height: 100%;
+
+    padding: 0.5rem;
+
+    background-color: transparent;
+
+    color: var(--color-foreground);
+    font: var(--font-body-medium);
+
+    cursor: pointer;
+  }
+
+  .unit-form-control.time-field > .stepper:disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .unit-form-control.time-field > .field > .field-input {
+    border-radius: var(--size-border-radius-small);
+
+    padding: 0.125rem;
+
+    display: inline-block;
+    color: var(--color-foreground);
+    font: var(--font-body-medium);
+    caret-color: var(--color-foreground);
+    outline: none;
+    font-variant-numeric: tabular-nums;
+
+    transition-property: background-color, color;
+    transition-duration: var(--transition-timer);
+  }
+
+  .unit-form-control.time-field > .field > .field-input[data-placeholder] {
+    color: var(--color-muted-foreground);
+  }
+
+  .unit-form-control.time-field > .field > .field-input:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+}
+</style>