@gcsa/console-vue 0.1.0

package/src/components/GcsaDatePicker.vue

@@ -0,0 +1,232 @@
+<template>
+  <DatePicker.Root
+    :model-value="pickerValue"
+    :locale="resolvedLocale"
+    :start-of-week="startOfWeek"
+    :positioning="positioningOptions"
+    open-on-click
+    close-on-select
+    :disabled="disabled"
+    :invalid="invalid"
+    :min="minValue"
+    :max="maxValue"
+    :min-view="isMonthPicker ? 'month' : undefined"
+    :max-view="isMonthPicker ? 'month' : undefined"
+    :default-view="isMonthPicker ? 'month' : undefined"
+    :format="formatValue"
+    :parse="parseValue"
+    @update:model-value="onPickerChange"
+  >
+    <DatePicker.Control class="gcsa-date-picker__control" :data-invalid="invalid || undefined">
+      <DatePicker.Input
+        class="gcsa-date-picker__input gcsa-input"
+        :placeholder="resolvedPlaceholder"
+      />
+      <DatePicker.Trigger
+        class="gcsa-date-picker__trigger gcsa-focus-ring"
+        :aria-label="messages.openCalendar"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <rect x="2" y="3" width="12" height="11" rx="1.5" stroke="currentColor" stroke-width="1.2" />
+          <path d="M2 6.5h12M5.5 1.5v2M10.5 1.5v2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
+        </svg>
+      </DatePicker.Trigger>
+    </DatePicker.Control>
+    <GcsaPortal>
+      <DatePicker.Positioner class="gcsa-date-picker__positioner">
+        <DatePicker.Content
+          class="gcsa-date-picker__content gcsa-ui-surface"
+          :class="{ 'gcsa-date-picker__content--month': isMonthPicker }"
+        >
+          <DatePicker.View :view="isMonthPicker ? 'month' : 'day'">
+            <DatePicker.Context v-slot="dp">
+              <template v-if="isMonthPicker">
+                <div class="gcsa-date-picker__header">
+                  <DatePicker.PrevTrigger
+                    class="gcsa-date-picker__nav gcsa-focus-ring"
+                    :aria-label="messages.prevYear"
+                  >
+                    <GcsaIcon name="chevronLeft" size="sm" />
+                  </DatePicker.PrevTrigger>
+                  <div class="gcsa-date-picker__selects">
+                    <div class="gcsa-date-picker__filter gcsa-date-picker__filter--year">
+                      <GcsaSelect
+                        :model-value="String(dp.focusedValue.year)"
+                        :options="gcsaDatePickerCellsToOptions(dp.getYears())"
+                        :portalled="false"
+                        :same-width="false"
+                        :list-max-height="240"
+                        :list-hint-threshold="100"
+                        @update:model-value="(v) => dp.focusYear(Number(v))"
+                      />
+                    </div>
+                  </div>
+                  <DatePicker.NextTrigger
+                    class="gcsa-date-picker__nav gcsa-focus-ring"
+                    :aria-label="messages.nextYear"
+                  >
+                    <GcsaIcon name="chevronLeft" size="sm" class="gcsa-date-picker__nav-icon--next" />
+                  </DatePicker.NextTrigger>
+                </div>
+                <DatePicker.Table class="gcsa-date-picker__table gcsa-date-picker__table--month" :columns="3">
+                  <DatePicker.TableBody>
+                    <DatePicker.TableRow v-for="(row, rowIndex) in dp.getMonthsGrid({ columns: 3 })" :key="rowIndex">
+                      <DatePicker.TableCell
+                        v-for="month in row"
+                        :key="month.value"
+                        :value="month.value"
+                        class="gcsa-date-picker__cell"
+                      >
+                        <DatePicker.TableCellTrigger class="gcsa-date-picker__month gcsa-focus-ring">
+                          {{ month.label }}
+                        </DatePicker.TableCellTrigger>
+                      </DatePicker.TableCell>
+                    </DatePicker.TableRow>
+                  </DatePicker.TableBody>
+                </DatePicker.Table>
+              </template>
+              <template v-else>
+                <div class="gcsa-date-picker__header">
+                  <DatePicker.PrevTrigger
+                    class="gcsa-date-picker__nav gcsa-focus-ring"
+                    :aria-label="messages.prevMonth"
+                  >
+                    <GcsaIcon name="chevronLeft" size="sm" />
+                  </DatePicker.PrevTrigger>
+                  <div class="gcsa-date-picker__selects">
+                    <div class="gcsa-date-picker__filter gcsa-date-picker__filter--month">
+                      <GcsaSelect
+                        :model-value="String(dp.focusedValue.month)"
+                        :options="gcsaDatePickerCellsToOptions(dp.getMonths())"
+                        :portalled="false"
+                        :same-width="false"
+                        :list-max-height="240"
+                        :list-hint-threshold="100"
+                        @update:model-value="(v) => dp.focusMonth(Number(v))"
+                      />
+                    </div>
+                    <div class="gcsa-date-picker__filter gcsa-date-picker__filter--year">
+                      <GcsaSelect
+                        :model-value="String(dp.focusedValue.year)"
+                        :options="gcsaDatePickerCellsToOptions(dp.getYears())"
+                        :portalled="false"
+                        :same-width="false"
+                        :list-max-height="240"
+                        :list-hint-threshold="100"
+                        @update:model-value="(v) => dp.focusYear(Number(v))"
+                      />
+                    </div>
+                  </div>
+                  <DatePicker.NextTrigger
+                    class="gcsa-date-picker__nav gcsa-focus-ring"
+                    :aria-label="messages.nextMonth"
+                  >
+                    <GcsaIcon name="chevronLeft" size="sm" class="gcsa-date-picker__nav-icon--next" />
+                  </DatePicker.NextTrigger>
+                </div>
+                <DatePicker.Table class="gcsa-date-picker__table">
+                  <DatePicker.TableHead>
+                    <DatePicker.TableRow>
+                      <DatePicker.TableHeader
+                        v-for="(weekDay, weekDayIndex) in dp.weekDays"
+                        :key="weekDay.short ?? weekDayIndex"
+                        class="gcsa-date-picker__weekday"
+                      >
+                        {{ weekDay.short }}
+                      </DatePicker.TableHeader>
+                    </DatePicker.TableRow>
+                  </DatePicker.TableHead>
+                  <DatePicker.TableBody>
+                    <DatePicker.TableRow v-for="(week, weekIndex) in dp.weeks" :key="weekIndex">
+                      <DatePicker.TableCell
+                        v-for="day in week"
+                        :key="day.toString()"
+                        :value="day"
+                        class="gcsa-date-picker__cell"
+                      >
+                        <DatePicker.TableCellTrigger class="gcsa-date-picker__day gcsa-focus-ring">
+                          {{ day.day }}
+                        </DatePicker.TableCellTrigger>
+                      </DatePicker.TableCell>
+                    </DatePicker.TableRow>
+                  </DatePicker.TableBody>
+                </DatePicker.Table>
+              </template>
+            </DatePicker.Context>
+          </DatePicker.View>
+        </DatePicker.Content>
+      </DatePicker.Positioner>
+    </GcsaPortal>
+  </DatePicker.Root>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { DatePicker, parseDate } from '@ark-ui/vue/date-picker';
+import type { DateValue } from '@ark-ui/vue/date-picker';
+import {
+  getGcsaLocaleMessages,
+  getGcsaStartOfWeek,
+  createGcsaPopupPositioning,
+  type GcsaDatePickerMode
+} from '@gcsa/console-core';
+import type { GcsaDatePickerProps } from '../types/componentProps';
+import GcsaIcon from './GcsaIcon.vue';
+import GcsaPortal from './GcsaPortal.vue';
+import GcsaSelect from './GcsaSelect.vue';
+import { useGcsaLocale } from '../composables/useGcsaLocale';
+import {
+  gcsaDatePickerCellsToOptions,
+  gcsaDatePickerFormat,
+  gcsaDatePickerParse,
+  gcsaDateValueToOutputString,
+  gcsaNormalizeDateBoundary,
+  gcsaStringToDateValues
+} from '../utils/gcsaDateValue';
+
+defineOptions({ name: 'GcsaDatePicker' });
+
+const positioningOptions = createGcsaPopupPositioning({ fitViewport: true });
+
+const props = withDefaults(
+  defineProps<GcsaDatePickerProps>(),
+  { picker: 'date' }
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+const configLocale = useGcsaLocale();
+const resolvedLocale = computed(() => props.locale ?? configLocale.value);
+const messages = computed(() => getGcsaLocaleMessages(resolvedLocale.value).datePicker);
+const startOfWeek = computed(() => getGcsaStartOfWeek(resolvedLocale.value));
+const isMonthPicker = computed(() => props.picker === 'month');
+const resolvedPlaceholder = computed(
+  () => props.placeholder ?? (isMonthPicker.value ? messages.value.placeholderMonth : messages.value.placeholder)
+);
+
+const pickerValue = computed(() => gcsaStringToDateValues(props.modelValue, props.picker));
+
+const minValue = computed(() => {
+  const normalized = gcsaNormalizeDateBoundary(props.min, props.picker);
+  return normalized ? parseDate(normalized) : undefined;
+});
+const maxValue = computed(() => {
+  const normalized = gcsaNormalizeDateBoundary(props.max, props.picker);
+  return normalized ? parseDate(normalized) : undefined;
+});
+
+function formatValue(date: DateValue, details: { locale: string; timeZone: string }) {
+  return gcsaDatePickerFormat(date, details, props.picker);
+}
+
+function parseValue(value: string, details: { locale: string; timeZone: string }) {
+  return gcsaDatePickerParse(value, details, props.picker);
+}
+
+function onPickerChange(value: DateValue[]) {
+  const first = value?.[0];
+  emit('update:modelValue', gcsaDateValueToOutputString(first, props.picker));
+}
+</script>

package/src/components/GcsaDateRangeMonthPanel.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="gcsa-date-range-picker__panel">
+    <div class="gcsa-date-range-picker__panel-header">
+      <DatePicker.PrevTrigger
+        v-if="showPrev"
+        class="gcsa-date-picker__nav gcsa-focus-ring"
+        :aria-label="navLabels.prevMonth"
+      >
+        <GcsaIcon name="chevronLeft" size="sm" />
+      </DatePicker.PrevTrigger>
+      <span v-else class="gcsa-date-range-picker__nav-spacer" aria-hidden="true" />
+      <div class="gcsa-date-range-picker__panel-label">{{ monthLabel }}</div>
+      <DatePicker.NextTrigger
+        v-if="showNext"
+        class="gcsa-date-picker__nav gcsa-focus-ring"
+        :aria-label="navLabels.nextMonth"
+      >
+        <GcsaIcon name="chevronLeft" size="sm" class="gcsa-date-picker__nav-icon--next" />
+      </DatePicker.NextTrigger>
+      <span v-else class="gcsa-date-range-picker__nav-spacer" aria-hidden="true" />
+    </div>
+    <DatePicker.Table class="gcsa-date-picker__table">
+      <DatePicker.TableHead>
+        <DatePicker.TableRow>
+          <DatePicker.TableHeader
+            v-for="(weekDay, weekDayIndex) in weekDays"
+            :key="weekDay.short ?? weekDayIndex"
+            class="gcsa-date-picker__weekday"
+          >
+            {{ weekDay.short }}
+          </DatePicker.TableHeader>
+        </DatePicker.TableRow>
+      </DatePicker.TableHead>
+      <DatePicker.TableBody>
+        <DatePicker.TableRow v-for="(week, weekIndex) in weeks" :key="weekIndex">
+          <DatePicker.TableCell
+            v-for="day in week"
+            :key="day.toString()"
+            :value="day"
+            class="gcsa-date-picker__cell"
+          >
+            <DatePicker.TableCellTrigger class="gcsa-date-picker__day gcsa-focus-ring">
+              {{ day.day }}
+            </DatePicker.TableCellTrigger>
+          </DatePicker.TableCell>
+        </DatePicker.TableRow>
+      </DatePicker.TableBody>
+    </DatePicker.Table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { DatePicker } from '@ark-ui/vue/date-picker';
+import type { GcsaDateRangeMonthPanelProps } from '../types/componentProps';
+import GcsaIcon from './GcsaIcon.vue';
+
+defineOptions({ name: 'GcsaDateRangeMonthPanel' });
+
+const props = defineProps<GcsaDateRangeMonthPanelProps>();
+
+const offset = computed(() => props.dp.getOffset({ months: props.monthOffset }));
+const weeks = computed(() => offset.value.weeks);
+const monthLabel = computed(() => offset.value.visibleRangeText.start);
+const weekDays = computed(() => props.dp.weekDays);
+</script>

package/src/components/GcsaDateRangePicker.vue

@@ -0,0 +1,208 @@
+<template>
+  <DatePicker.Root
+    :model-value="pickerValue"
+    :locale="resolvedLocale"
+    :start-of-week="startOfWeek"
+    :positioning="positioningOptions"
+    selection-mode="range"
+    :num-of-months="isMonthPicker ? 1 : 2"
+    open-on-click
+    close-on-select
+    :disabled="disabled"
+    :invalid="invalid"
+    :min="minValue"
+    :max="maxValue"
+    :min-view="isMonthPicker ? 'month' : undefined"
+    :max-view="isMonthPicker ? 'month' : undefined"
+    :default-view="isMonthPicker ? 'month' : undefined"
+    :format="formatValue"
+    :parse="parseValue"
+    @update:model-value="onPickerChange"
+  >
+    <DatePicker.Control
+      class="gcsa-date-range-picker__control gcsa-date-picker__control"
+      :data-invalid="invalid || undefined"
+    >
+      <DatePicker.Input
+        :index="0"
+        class="gcsa-date-picker__input gcsa-input"
+        :placeholder="resolvedPlaceholderStart"
+      />
+      <span class="gcsa-date-range-picker__separator" aria-hidden="true">
+        {{ messages.rangeSeparator }}
+      </span>
+      <DatePicker.Input
+        :index="1"
+        class="gcsa-date-picker__input gcsa-input"
+        :placeholder="resolvedPlaceholderEnd"
+      />
+      <DatePicker.Trigger
+        class="gcsa-date-picker__trigger gcsa-focus-ring"
+        :aria-label="messages.openCalendar"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <rect x="2" y="3" width="12" height="11" rx="1.5" stroke="currentColor" stroke-width="1.2" />
+          <path d="M2 6.5h12M5.5 1.5v2M10.5 1.5v2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
+        </svg>
+      </DatePicker.Trigger>
+    </DatePicker.Control>
+    <GcsaPortal>
+      <DatePicker.Positioner class="gcsa-date-picker__positioner">
+        <DatePicker.Content
+          class="gcsa-date-range-picker__content gcsa-date-picker__content gcsa-ui-surface"
+          :class="{ 'gcsa-date-range-picker__content--month': isMonthPicker }"
+        >
+          <DatePicker.View :view="isMonthPicker ? 'month' : 'day'">
+            <DatePicker.Context v-slot="dp">
+              <template v-if="isMonthPicker">
+                <div class="gcsa-date-range-picker__panel gcsa-date-range-picker__panel--month">
+                  <div class="gcsa-date-range-picker__panel-header">
+                    <DatePicker.PrevTrigger
+                      class="gcsa-date-picker__nav gcsa-focus-ring"
+                      :aria-label="messages.prevYear"
+                    >
+                      <GcsaIcon name="chevronLeft" size="sm" />
+                    </DatePicker.PrevTrigger>
+                    <div class="gcsa-date-picker__selects gcsa-date-range-picker__year-select">
+                      <div class="gcsa-date-picker__filter gcsa-date-picker__filter--year">
+                        <GcsaSelect
+                          :model-value="String(dp.focusedValue.year)"
+                          :options="gcsaDatePickerCellsToOptions(dp.getYears())"
+                          :portalled="false"
+                          :same-width="false"
+                          :list-max-height="240"
+                          :list-hint-threshold="100"
+                          @update:model-value="(v) => dp.focusYear(Number(v))"
+                        />
+                      </div>
+                    </div>
+                    <DatePicker.NextTrigger
+                      class="gcsa-date-picker__nav gcsa-focus-ring"
+                      :aria-label="messages.nextYear"
+                    >
+                      <GcsaIcon name="chevronLeft" size="sm" class="gcsa-date-picker__nav-icon--next" />
+                    </DatePicker.NextTrigger>
+                  </div>
+                  <DatePicker.Table class="gcsa-date-picker__table gcsa-date-picker__table--month" :columns="3">
+                    <DatePicker.TableBody>
+                      <DatePicker.TableRow
+                        v-for="(row, rowIndex) in dp.getMonthsGrid({ columns: 3 })"
+                        :key="rowIndex"
+                      >
+                        <DatePicker.TableCell
+                          v-for="month in row"
+                          :key="month.value"
+                          :value="month.value"
+                          class="gcsa-date-picker__cell"
+                        >
+                          <DatePicker.TableCellTrigger class="gcsa-date-picker__month gcsa-focus-ring">
+                            {{ month.label }}
+                          </DatePicker.TableCellTrigger>
+                        </DatePicker.TableCell>
+                      </DatePicker.TableRow>
+                    </DatePicker.TableBody>
+                  </DatePicker.Table>
+                </div>
+              </template>
+              <div v-else class="gcsa-date-range-picker__panels">
+                <GcsaDateRangeMonthPanel
+                  :dp="dp"
+                  :month-offset="0"
+                  show-prev
+                  :nav-labels="messages"
+                />
+                <GcsaDateRangeMonthPanel
+                  :dp="dp"
+                  :month-offset="1"
+                  show-next
+                  :nav-labels="messages"
+                />
+              </div>
+            </DatePicker.Context>
+          </DatePicker.View>
+        </DatePicker.Content>
+      </DatePicker.Positioner>
+    </GcsaPortal>
+  </DatePicker.Root>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { DatePicker, parseDate } from '@ark-ui/vue/date-picker';
+import type { DateValue } from '@ark-ui/vue/date-picker';
+import {
+  getGcsaLocaleMessages,
+  getGcsaStartOfWeek,
+  createGcsaPopupPositioning,
+  type GcsaConsoleLocale,
+  type GcsaDatePickerMode,
+  type GcsaDateRangeValue,
+  type GcsaMonthRangeValue
+} from '@gcsa/console-core';
+import type { GcsaDateRangePickerProps } from '../types/componentProps';
+import GcsaIcon from './GcsaIcon.vue';
+import GcsaPortal from './GcsaPortal.vue';
+import GcsaSelect from './GcsaSelect.vue';
+import GcsaDateRangeMonthPanel from './GcsaDateRangeMonthPanel.vue';
+import { useGcsaLocale } from '../composables/useGcsaLocale';
+import {
+  gcsaDatePickerCellsToOptions,
+  gcsaDatePickerFormat,
+  gcsaDatePickerParse,
+  gcsaDateRangeToDateValues,
+  gcsaDateValuesToRange,
+  gcsaNormalizeDateBoundary
+} from '../utils/gcsaDateValue';
+
+defineOptions({ name: 'GcsaDateRangePicker' });
+
+const positioningOptions = createGcsaPopupPositioning({ fitViewport: true });
+
+const props = withDefaults(
+  defineProps<GcsaDateRangePickerProps>(),
+  { picker: 'date' }
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: GcsaDateRangeValue | GcsaMonthRangeValue];
+}>();
+
+const configLocale = useGcsaLocale();
+const resolvedLocale = computed(() => props.locale ?? configLocale.value);
+const messages = computed(() => getGcsaLocaleMessages(resolvedLocale.value).datePicker);
+const startOfWeek = computed(() => getGcsaStartOfWeek(resolvedLocale.value));
+const isMonthPicker = computed(() => props.picker === 'month');
+const resolvedPlaceholderStart = computed(
+  () =>
+    props.placeholderStart ??
+    (isMonthPicker.value ? messages.value.placeholderStartMonth : messages.value.placeholderStart)
+);
+const resolvedPlaceholderEnd = computed(
+  () =>
+    props.placeholderEnd ??
+    (isMonthPicker.value ? messages.value.placeholderEndMonth : messages.value.placeholderEnd)
+);
+
+const pickerValue = computed(() => gcsaDateRangeToDateValues(props.modelValue, props.picker));
+
+const minValue = computed(() => {
+  const normalized = gcsaNormalizeDateBoundary(props.min, props.picker);
+  return normalized ? parseDate(normalized) : undefined;
+});
+const maxValue = computed(() => {
+  const normalized = gcsaNormalizeDateBoundary(props.max, props.picker);
+  return normalized ? parseDate(normalized) : undefined;
+});
+
+function formatValue(date: DateValue, details: { locale: string; timeZone: string }) {
+  return gcsaDatePickerFormat(date, details, props.picker);
+}
+
+function parseValue(value: string, details: { locale: string; timeZone: string }) {
+  return gcsaDatePickerParse(value, details, props.picker);
+}
+
+function onPickerChange(value: DateValue[]) {
+  emit('update:modelValue', gcsaDateValuesToRange(value, props.picker));
+}
+</script>