@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroDatePicker/FuroDatePicker.vue

@@ -0,0 +1,661 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  DatePicker as RekaDatePicker,
+} from 'reka-ui/namespaced'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroDatePickerContext from './FuroDatePickerContext.js'
+
+export default defineComponent({
+  name: 'FuroDatePicker',
+
+  components: {
+    FuroIcon,
+    // The DefineComponent casts below work around reka-ui not re-exporting its
+    // Calendar slot types (CalendarCellTriggerSlot / CalendarNextSlot /
+    // CalendarPrevSlot) from the package root, which blocks portable
+    // declaration emit (TS9006/TS2742). Remove the casts once reka-ui exports
+    // those types publicly.
+    DatePickerRoot: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['Root']),
+    DatePickerField: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['Field']),
+    DatePickerInput: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['Input']),
+    DatePickerTrigger: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['Trigger']),
+    DatePickerContent: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['Content']),
+    DatePickerCalendar: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['Calendar']),
+    DatePickerHeader: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['Header']),
+    DatePickerPrev: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['Prev']),
+    DatePickerNext: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['Next']),
+    DatePickerGrid: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['Grid']),
+    DatePickerGridHead: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['GridHead']),
+    DatePickerGridRow: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['GridRow']),
+    DatePickerHeadCell: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['HeadCell']),
+    DatePickerGridBody: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['GridBody']),
+    DatePickerCell: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['Cell']),
+    DatePickerCellTrigger: /** @type {import('vue').DefineComponent} */ (RekaDatePicker['CellTrigger']),
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<FuroDatePickerContext['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+    triggerParcel: {
+      /** @type {import('vue').PropType<FuroDatePickerContext['triggerParcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+    contentParcel: {
+      /** @type {import('vue').PropType<FuroDatePickerContext['contentParcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  emits: FuroDatePickerContext.EMIT_EVENT_HASH,
+
+  /** @type {FuroDatePickerSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroDatePickerContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+
+/**
+ * @import { FuroDatePickerSetup } from './FuroDatePickerContext.js'
+ */
+</script>
+
+<template>
+  <div
+    class="unit-form-control date-picker"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <DatePickerRoot
+      v-bind="context.extractRootAttributes()"
+      @update:model-value="context.onChangeValue({
+        calendarDate: $event,
+      })"
+      @update:placeholder="context.onPlaceholderChange({
+        calendarDate: $event,
+      })"
+    >
+      <DatePickerField
+        v-slot="{ segments }"
+        class="field"
+        :class="{
+          invalid: context.isInvalid,
+          disabled: context.isDisabled,
+        }"
+        :aria-invalid="context.isInvalid"
+        v-bind="context.extractTriggerAttributes()"
+      >
+        <template
+          v-for="{ part, value } in segments"
+          :key="part"
+        >
+          <DatePickerInput
+            v-if="context.isSlashCharacterPart({ part })"
+            :part="part"
+          >
+            {{ value }}
+          </DatePickerInput>
+          <DatePickerInput
+            v-else
+            class="field-input"
+            :part="part"
+          >
+            {{ context.formatSegmentValue({ part, value }) }}
+          </DatePickerInput>
+        </template>
+
+        <slot name="field-suffix" />
+
+        <DatePickerTrigger
+          :ref="context.triggerElementRef"
+          class="trigger"
+          :disabled="context.isDisabled"
+        >
+          <slot name="trigger-icon">
+            <FuroIcon
+              name="ph:calendar"
+              class="trigger-icon"
+            />
+          </slot>
+        </DatePickerTrigger>
+      </DatePickerField>
+
+      <DatePickerContent
+        class="unit-date-picker-content"
+        :side-offset="4"
+        v-bind="context.extractContentAttributes()"
+      >
+        <DatePickerCalendar
+          v-slot="{ weekDays, grid }"
+          class="calendar"
+        >
+          <DatePickerHeader class="calendar-header">
+            <DatePickerPrev class="calendar-nav-button">
+              <slot name="prev-icon">
+                <FuroIcon
+                  name="ph:caret-left"
+                  class="nav-icon"
+                />
+              </slot>
+            </DatePickerPrev>
+
+            <div class="calendar-caption">
+              <select
+                class="caption-select"
+                :value="grid[0].value.month"
+                @change="context.onMonthChange({
+                  changeEvent: $event,
+                  currentYear: grid[0].value.year,
+                })"
+              >
+                <option
+                  v-for="month in context.extractCalendarMonths()"
+                  :key="month.value"
+                  :value="month.value"
+                >
+                  {{ month.label }}
+                </option>
+              </select>
+
+              <select
+                class="caption-select"
+                :value="grid[0].value.year"
+                @change="context.onYearChange({
+                  changeEvent: $event,
+                  currentMonth: grid[0].value.month,
+                })"
+              >
+                <option
+                  v-for="year in context.extractCalendarYears()"
+                  :key="year.value"
+                  :value="year.value"
+                >
+                  {{ year.value }}
+                </option>
+              </select>
+            </div>
+
+            <DatePickerNext class="calendar-nav-button">
+              <slot name="next-icon">
+                <FuroIcon
+                  name="ph:caret-right"
+                  class="nav-icon"
+                />
+              </slot>
+            </DatePickerNext>
+          </DatePickerHeader>
+
+          <div class="calendar-grids">
+            <DatePickerGrid
+              v-for="month in grid"
+              :key="month.value.toString()"
+              class="calendar-grid"
+            >
+              <DatePickerGridHead>
+                <DatePickerGridRow class="calendar-head-row">
+                  <DatePickerHeadCell
+                    v-for="day in weekDays"
+                    :key="day"
+                    class="calendar-head-cell"
+                  >
+                    {{ day }}
+                  </DatePickerHeadCell>
+                </DatePickerGridRow>
+              </DatePickerGridHead>
+
+              <DatePickerGridBody>
+                <DatePickerGridRow
+                  v-for="(weekRow, weekIndex) in month.rows"
+                  :key="weekIndex"
+                  class="calendar-row"
+                >
+                  <DatePickerCell
+                    v-for="dayDate in weekRow"
+                    :key="dayDate.toString()"
+                    :date="dayDate"
+                    class="calendar-cell"
+                  >
+                    <DatePickerCellTrigger
+                      :day="dayDate"
+                      :month="month.value"
+                      class="calendar-cell-trigger"
+                    />
+                  </DatePickerCell>
+                </DatePickerGridRow>
+              </DatePickerGridBody>
+            </DatePickerGrid>
+          </div>
+        </DatePickerCalendar>
+
+        <slot name="content-footer" />
+
+        <div
+          v-if="context.hasFooterButtons()"
+          class="calendar-actions"
+        >
+          <button
+            v-if="context.hasTodayButton()"
+            type="button"
+            class="calendar-action today"
+            :disabled="context.isDisabled"
+            @click="context.onSelectToday()"
+          >
+            {{ context.todayButtonText }}
+          </button>
+
+          <button
+            v-if="context.hasClearButton()"
+            type="button"
+            class="calendar-action clear"
+            :disabled="context.isDisabled"
+            @click="context.onClearValue()"
+          >
+            {{ context.clearButtonText }}
+          </button>
+        </div>
+      </DatePickerContent>
+    </DatePickerRoot>
+  </div>
+</template>
+
+<style>
+@layer furo {
+  .unit-form-control.date-picker > .field {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+
+    min-width: fit-content;
+    height: var(--size-input-height);
+
+    padding-block: 0.25rem;
+    padding-inline: 0.75rem;
+
+    border-radius: var(--size-border-radius-medium);
+    border: var(--size-thinnest) solid var(--color-input);
+
+    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, border-color;
+
+    @media (width < 48rem) {
+      font-size: var(--font-size-small);
+    }
+  }
+
+  .unit-form-control.date-picker > .field:focus-within {
+    outline: none;
+    border-color: var(--color-ring);
+  }
+
+  .unit-form-control.date-picker > .field.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .unit-form-control.date-picker > .field.invalid {
+    border-color: var(--color-destructive);
+  }
+
+  .unit-form-control.date-picker > .field.invalid:focus-within {
+    border-color: var(--color-destructive);
+  }
+
+  .unit-form-control.date-picker > .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.date-picker > .field > .field-input[data-placeholder] {
+    color: var(--color-muted-foreground);
+  }
+
+  .unit-form-control.date-picker > .field > .field-input:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-form-control.date-picker > .field > .trigger {
+    margin-inline-start: auto;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: 0.25rem;
+
+    border: none;
+    background: transparent;
+
+    color: var(--color-muted-foreground);
+    cursor: pointer;
+
+    transition-property: color;
+    transition-duration: var(--transition-timer);
+  }
+
+  .unit-form-control.date-picker > .field > .trigger:hover {
+    color: var(--color-foreground);
+  }
+
+  .unit-form-control.date-picker > .field > .trigger:focus-visible {
+    outline: 0.125rem solid var(--color-ring);
+    outline-offset: 0.0625rem;
+    border-radius: var(--size-border-radius-small);
+  }
+
+  .unit-form-control.date-picker > .field > .trigger .trigger-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  /* Content popover */
+  .unit-date-picker-content {
+    z-index: var(--value-z-index-layer-popover);
+
+    max-width: var(--reka-popper-available-width);
+    max-height: var(--reka-popper-available-height);
+
+    border-radius: var(--size-border-radius-medium);
+    border: var(--size-thinnest) solid var(--color-border);
+
+    padding: 0.75rem;
+
+    overflow-y: auto;
+
+    background-color: var(--color-popover);
+    color: var(--color-popover-foreground);
+    box-shadow: var(--shadow-strong);
+    font-family: var(--font-family);
+  }
+
+  .unit-date-picker-content[data-state="open"] {
+    animation: furo-date-picker-in 120ms ease;
+  }
+
+  .unit-date-picker-content[data-state="closed"] {
+    animation: furo-date-picker-out 100ms ease;
+  }
+
+  .unit-date-picker-content > .calendar-actions {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--size-space-small);
+
+    margin-block-start: 0.75rem;
+    padding-block-start: 0.75rem;
+
+    border-block-start: var(--size-thinnest) solid var(--color-border);
+  }
+
+  .calendar-actions > .calendar-action {
+    border: none;
+    border-radius: var(--size-border-radius-medium);
+
+    padding-block: 0.25rem;
+    padding-inline: 0.5rem;
+
+    background-color: transparent;
+    color: var(--color-popover-foreground);
+    font: var(--font-label-tiny);
+
+    cursor: pointer;
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color;
+  }
+
+  .calendar-actions > .calendar-action:hover {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .calendar-actions > .calendar-action:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  @keyframes furo-date-picker-in {
+    from {
+      opacity: 0;
+      transform: translateY(-0.25rem) scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes furo-date-picker-out {
+    from {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-0.25rem) scale(0.97);
+    }
+  }
+
+  /* Calendar */
+  .unit-date-picker-content > .calendar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-medium);
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-header > .calendar-nav-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1.75rem;
+    height: 1.75rem;
+
+    border-radius: var(--size-border-radius-small);
+    border: var(--size-thinnest) solid var(--color-border);
+
+    background-color: transparent;
+    cursor: pointer;
+
+    transition-property: background-color, color;
+    transition-duration: var(--transition-timer);
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-header > .calendar-nav-button:hover {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-header > .calendar-nav-button:focus-visible {
+    outline: 0.125rem solid var(--color-ring);
+    outline-offset: 0.0625rem;
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-header > .calendar-caption {
+    display: flex;
+    align-items: center;
+    gap: var(--size-space-small);
+
+    flex: 1;
+    justify-content: center;
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-header > .calendar-caption > .caption-select {
+    padding-block: 0.25rem;
+    padding-inline-start: 0.5rem;
+    padding-inline-end: 0.25rem;
+
+    border: var(--size-thinnest) solid var(--color-border);
+    border-radius: var(--size-border-radius-small);
+
+    background-color: transparent;
+    color: var(--color-foreground);
+
+    font: var(--font-label-tiny);
+    font-weight: var(--font-weight-semibold, 600);
+
+    cursor: pointer;
+
+    transition-property: border-color, background-color;
+    transition-duration: var(--transition-timer);
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-header > .calendar-caption > .caption-select:hover {
+    border-color: var(--color-ring);
+    background-color: var(--color-accent);
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-header > .calendar-caption > .caption-select:focus-visible {
+    outline: 0.125rem solid var(--color-ring);
+    outline-offset: 0.0625rem;
+    border-color: var(--color-ring);
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-grids > .calendar-grid {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-grids > .calendar-grid > thead > .calendar-head-row > .calendar-head-cell {
+    width: 2.25rem;
+
+    padding-block: 0.25rem;
+
+    color: var(--color-muted-foreground);
+    font: var(--font-body-small);
+    text-align: center;
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-grids > .calendar-grid > tbody > .calendar-row > .calendar-cell {
+    padding: 0;
+    text-align: center;
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-grids > .calendar-grid > tbody > .calendar-row > .calendar-cell > .calendar-cell-trigger {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 2.25rem;
+    height: 2.25rem;
+
+    border-radius: var(--size-border-radius-small);
+    border: none;
+
+    background-color: transparent;
+    font: var(--font-body-small);
+    cursor: pointer;
+
+    transition-property: background-color, color;
+    transition-duration: var(--transition-timer);
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-grids > .calendar-grid > tbody > .calendar-row > .calendar-cell > .calendar-cell-trigger:hover:not([data-disabled]):not([data-selected]) {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-grids > .calendar-grid > tbody > .calendar-row > .calendar-cell > .calendar-cell-trigger[data-focused]:not([data-selected]) {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+    outline: 0.125rem solid var(--color-ring);
+    outline-offset: 0.0625rem;
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-grids > .calendar-grid > tbody > .calendar-row > .calendar-cell > .calendar-cell-trigger[data-selected] {
+    background-color: var(--color-primary);
+    color: var(--color-primary-foreground);
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-grids > .calendar-grid > tbody > .calendar-row > .calendar-cell > .calendar-cell-trigger[data-selected][data-focused] {
+    outline: 0.125rem solid var(--color-primary-foreground);
+    outline-offset: -0.1875rem;
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-grids > .calendar-grid > tbody > .calendar-row > .calendar-cell > .calendar-cell-trigger[data-today]:not([data-selected])::after {
+    content: '';
+
+    position: absolute;
+    inset-block-end: 0.1875rem;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+
+    width: 0.25rem;
+    height: 0.25rem;
+
+    border-radius: 50%;
+    background-color: var(--color-primary);
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-grids > .calendar-grid > tbody > .calendar-row > .calendar-cell > .calendar-cell-trigger[data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .unit-date-picker-content > .calendar > .calendar-grids > .calendar-grid > tbody > .calendar-row > .calendar-cell > .calendar-cell-trigger[data-outside-view] {
+    color: var(--color-muted-foreground);
+    opacity: 0.5;
+  }
+}
+</style>