@gcsa/console-vue 0.1.0

package/src/components/GcsaDateTimePicker.vue

@@ -0,0 +1,379 @@
+<template>
+  <DatePicker.Root
+    :open="open"
+    :model-value="pickerValue"
+    :locale="resolvedLocale"
+    :start-of-week="startOfWeek"
+    :positioning="positioningOptions"
+    :close-on-select="false"
+    :disabled="disabled"
+    :invalid="invalid"
+    :min="minDateValue"
+    :max="maxDateValue"
+    :format="formatDateValue"
+    :parse="parseDateValue"
+    @update:open="onOpenChange"
+    @update:model-value="onDateDraftChange"
+  >
+    <DatePicker.Control class="gcsa-date-picker__control" :data-invalid="invalid || undefined">
+      <DatePicker.Input
+        class="gcsa-date-picker__input gcsa-input"
+        :placeholder="resolvedPlaceholder"
+        readonly
+      />
+      <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-datetime-picker__content gcsa-ui-surface">
+          <div class="gcsa-datetime-picker__body">
+            <div class="gcsa-datetime-picker__calendar">
+              <DatePicker.View view="day">
+                <DatePicker.Context v-slot="dp">
+                  <div class="gcsa-datetime-picker__header">
+                    <button
+                      type="button"
+                      class="gcsa-datetime-picker__nav gcsa-focus-ring"
+                      :aria-label="messages.prevYear"
+                      @mousedown.prevent
+                      @click="dp.focusYear(dp.focusedValue.year - 1)"
+                    >
+                      «
+                    </button>
+                    <DatePicker.PrevTrigger
+                      class="gcsa-datetime-picker__nav gcsa-focus-ring"
+                      :aria-label="messages.prevMonth"
+                    >
+                      ‹
+                    </DatePicker.PrevTrigger>
+                    <div class="gcsa-datetime-picker__title">{{ formatMonthTitle(dp.focusedValue) }}</div>
+                    <DatePicker.NextTrigger
+                      class="gcsa-datetime-picker__nav gcsa-focus-ring"
+                      :aria-label="messages.nextMonth"
+                    >
+                      ›
+                    </DatePicker.NextTrigger>
+                    <button
+                      type="button"
+                      class="gcsa-datetime-picker__nav gcsa-focus-ring"
+                      :aria-label="messages.nextYear"
+                      @mousedown.prevent
+                      @click="dp.focusYear(dp.focusedValue.year + 1)"
+                    >
+                      »
+                    </button>
+                  </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>
+                </DatePicker.Context>
+              </DatePicker.View>
+            </div>
+            <div class="gcsa-datetime-picker__time">
+              <div class="gcsa-datetime-picker__time-title">{{ messages.selectTime }}</div>
+              <div class="gcsa-time-picker__spinner gcsa-datetime-picker__spinner">
+                <div
+                  ref="hourColumn"
+                  class="gcsa-time-picker__column"
+                  role="listbox"
+                  :aria-label="messages.selectTime"
+                  @scroll="onColumnScroll('hour', $event)"
+                >
+                  <button
+                    v-for="hour in hours"
+                    :key="hour"
+                    type="button"
+                    class="gcsa-time-picker__cell"
+                    :class="{ 'gcsa-time-picker__cell--selected': hour === draftHour }"
+                    role="option"
+                    :aria-selected="hour === draftHour"
+                    @mousedown.prevent
+                    @click="selectHour(hour)"
+                  >
+                    {{ hour }}
+                  </button>
+                </div>
+                <div
+                  ref="minuteColumn"
+                  class="gcsa-time-picker__column"
+                  role="listbox"
+                  :aria-label="globalMessages.timeMinute"
+                  @scroll="onColumnScroll('minute', $event)"
+                >
+                  <button
+                    v-for="minute in minutes"
+                    :key="minute"
+                    type="button"
+                    class="gcsa-time-picker__cell"
+                    :class="{ 'gcsa-time-picker__cell--selected': minute === draftMinute }"
+                    role="option"
+                    :aria-selected="minute === draftMinute"
+                    @mousedown.prevent
+                    @click="selectMinute(minute)"
+                  >
+                    {{ minute }}
+                  </button>
+                </div>
+                <div
+                  ref="secondColumn"
+                  class="gcsa-time-picker__column"
+                  role="listbox"
+                  :aria-label="globalMessages.timeSecond"
+                  @scroll="onColumnScroll('second', $event)"
+                >
+                  <button
+                    v-for="second in seconds"
+                    :key="second"
+                    type="button"
+                    class="gcsa-time-picker__cell"
+                    :class="{ 'gcsa-time-picker__cell--selected': second === draftSecond }"
+                    role="option"
+                    :aria-selected="second === draftSecond"
+                    @mousedown.prevent
+                    @click="selectSecond(second)"
+                  >
+                    {{ second }}
+                  </button>
+                </div>
+                <div class="gcsa-time-picker__selection" aria-hidden="true" />
+              </div>
+            </div>
+          </div>
+          <div class="gcsa-datetime-picker__footer">
+            <button
+              type="button"
+              class="gcsa-datetime-picker__now"
+              @mousedown.prevent
+              @click="selectNow"
+            >
+              {{ messages.now }}
+            </button>
+            <button type="button" class="gcsa-datetime-picker__confirm" @mousedown.prevent @click="confirm">
+              {{ globalMessages.confirm }}
+            </button>
+          </div>
+        </DatePicker.Content>
+      </DatePicker.Positioner>
+    </GcsaPortal>
+  </DatePicker.Root>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+import { DatePicker, parseDate } from '@ark-ui/vue/date-picker';
+import type { DateValue } from '@ark-ui/vue/date-picker';
+import {
+  gcsaTimePickerScrollIndex,
+  gcsaTimePickerScrollTop,
+  getGcsaLocaleMessages,
+  getGcsaStartOfWeek,
+  createGcsaPopupPositioning,
+  type GcsaConsoleLocale
+} from '@gcsa/console-core';
+import type { GcsaDateTimePickerProps } from '../types/componentProps';
+import GcsaPortal from './GcsaPortal.vue';
+import { useGcsaLocale } from '../composables/useGcsaLocale';
+import {
+  gcsaDatePickerFormat,
+  gcsaDatePickerParse,
+  gcsaDateValueToOutputString,
+  gcsaJoinDateTime,
+  gcsaNormalizeDateBoundary,
+  gcsaSplitDateTime,
+  gcsaStringToDateValues
+} from '../utils/gcsaDateValue';
+
+defineOptions({ name: 'GcsaDateTimePicker' });
+
+const positioningOptions = createGcsaPopupPositioning({ fitViewport: true });
+
+const props = defineProps<GcsaDateTimePickerProps>();
+
+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 globalMessages = computed(() => getGcsaLocaleMessages(resolvedLocale.value));
+const startOfWeek = computed(() => getGcsaStartOfWeek(resolvedLocale.value));
+const resolvedPlaceholder = computed(() => props.placeholder ?? messages.value.placeholderDateTime);
+
+const open = ref(false);
+const draftDate = ref('');
+const draftHour = ref('00');
+const draftMinute = ref('00');
+const draftSecond = ref('00');
+const hourColumn = ref<HTMLElement | null>(null);
+const minuteColumn = ref<HTMLElement | null>(null);
+const secondColumn = ref<HTMLElement | null>(null);
+
+let hourTimer: number | undefined;
+let minuteTimer: number | undefined;
+let secondTimer: number | undefined;
+
+const hours = computed(() => Array.from({ length: 24 }, (_, index) => String(index).padStart(2, '0')));
+const minutes = computed(() => Array.from({ length: 60 }, (_, index) => String(index).padStart(2, '0')));
+const seconds = computed(() => Array.from({ length: 60 }, (_, index) => String(index).padStart(2, '0')));
+
+const pickerValue = computed(() => gcsaStringToDateValues(draftDate.value, 'date'));
+const displayValue = computed(() => props.modelValue ?? '');
+
+const minDateValue = computed(() => {
+  const normalized = gcsaNormalizeDateBoundary(gcsaSplitDateTime(props.min).date, 'date');
+  return normalized ? parseDate(normalized) : undefined;
+});
+const maxDateValue = computed(() => {
+  const normalized = gcsaNormalizeDateBoundary(gcsaSplitDateTime(props.max).date, 'date');
+  return normalized ? parseDate(normalized) : undefined;
+});
+
+function formatMonthTitle(value: DateValue) {
+  return `${value.year} - ${String(value.month).padStart(2, '0')}`;
+}
+
+function draftTimeValue() {
+  return `${draftHour.value}:${draftMinute.value}:${draftSecond.value}`;
+}
+
+function applyTimeParts(time: string) {
+  const [hour = '00', minute = '00', second = '00'] = time.split(':');
+  draftHour.value = hour.padStart(2, '0');
+  draftMinute.value = minute.padStart(2, '0');
+  draftSecond.value = second.padStart(2, '0').slice(0, 2);
+}
+
+function formatDateValue(date: DateValue, details: { locale: string; timeZone: string }) {
+  const datePart = gcsaDatePickerFormat(date, details, 'date');
+  if (!datePart) return displayValue.value;
+  return gcsaJoinDateTime(datePart, draftTimeValue());
+}
+
+function parseDateValue(value: string, details: { locale: string; timeZone: string }) {
+  const { date, time } = gcsaSplitDateTime(value);
+  if (time) applyTimeParts(time);
+  return gcsaDatePickerParse(date, details, 'date');
+}
+
+function syncDraftFromValue(value = props.modelValue) {
+  const { date, time } = gcsaSplitDateTime(value);
+  draftDate.value = date;
+  applyTimeParts(time);
+}
+
+function scrollColumns() {
+  nextTick(() => {
+    if (hourColumn.value) {
+      hourColumn.value.scrollTop = gcsaTimePickerScrollTop(hours.value.indexOf(draftHour.value));
+    }
+    if (minuteColumn.value) {
+      minuteColumn.value.scrollTop = gcsaTimePickerScrollTop(minutes.value.indexOf(draftMinute.value));
+    }
+    if (secondColumn.value) {
+      secondColumn.value.scrollTop = gcsaTimePickerScrollTop(seconds.value.indexOf(draftSecond.value));
+    }
+  });
+}
+
+function onOpenChange(nextOpen: boolean) {
+  if (props.disabled) return;
+  open.value = nextOpen;
+  if (nextOpen) {
+    syncDraftFromValue();
+    scrollColumns();
+  }
+}
+
+function onDateDraftChange(value: DateValue[]) {
+  draftDate.value = gcsaDateValueToOutputString(value?.[0], 'date');
+}
+
+function selectHour(hour: string) {
+  draftHour.value = hour;
+  scrollColumns();
+}
+
+function selectMinute(minute: string) {
+  draftMinute.value = minute;
+  scrollColumns();
+}
+
+function selectSecond(second: string) {
+  draftSecond.value = second;
+  scrollColumns();
+}
+
+function onColumnScroll(type: 'hour' | 'minute' | 'second', event: Event) {
+  const element = event.currentTarget as HTMLElement;
+  const timers = { hour: hourTimer, minute: minuteTimer, second: secondTimer };
+  const timer = timers[type];
+  window.clearTimeout(timer);
+  const nextTimer = window.setTimeout(() => {
+    const values = type === 'hour' ? hours.value : type === 'minute' ? minutes.value : seconds.value;
+    const index = gcsaTimePickerScrollIndex(element.scrollTop, values.length);
+    const value = values[index];
+    if (type === 'hour' && value) selectHour(value);
+    if (type === 'minute' && value) selectMinute(value);
+    if (type === 'second' && value) selectSecond(value);
+  }, 80);
+  if (type === 'hour') hourTimer = nextTimer;
+  else if (type === 'minute') minuteTimer = nextTimer;
+  else secondTimer = nextTimer;
+}
+
+function selectNow() {
+  const now = new Date();
+  draftDate.value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+  draftHour.value = String(now.getHours()).padStart(2, '0');
+  draftMinute.value = String(now.getMinutes()).padStart(2, '0');
+  draftSecond.value = String(now.getSeconds()).padStart(2, '0');
+  scrollColumns();
+}
+
+function confirm() {
+  if (!draftDate.value) return;
+  emit('update:modelValue', gcsaJoinDateTime(draftDate.value, draftTimeValue()));
+  open.value = false;
+}
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (!open.value) syncDraftFromValue();
+  },
+  { immediate: true }
+);
+</script>

package/src/components/GcsaDescriptions.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="gcsa-descriptions gcsa-ui-surface">
+    <div v-for="item in items" :key="item.label" class="gcsa-descriptions__row">
+      <div class="gcsa-descriptions__label">{{ item.label }}</div>
+      <div class="gcsa-descriptions__value">{{ item.value }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { GcsaDescriptionsProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaDescriptions' });
+
+defineProps<GcsaDescriptionsProps>();
+</script>

package/src/components/GcsaDivider.vue

@@ -0,0 +1,11 @@
+<template>
+  <hr class="gcsa-divider" />
+</template>
+
+<script setup lang="ts">
+import type { GcsaDividerProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaDivider' });
+
+defineProps<GcsaDividerProps>();
+</script>

package/src/components/GcsaDrawer.vue

@@ -0,0 +1,97 @@
+<template>
+  <Dialog.Root :open="open" lazy-mount unmount-on-exit @update:open="onOpenChange">
+    <Dialog.Backdrop class="gcsa-drawer__backdrop" :style="backdropStyle" />
+    <Dialog.Positioner
+      :class="['gcsa-drawer__positioner', `gcsa-drawer__positioner--${placement}`]"
+      :style="positionerStyle"
+    >
+      <Dialog.Content
+        :class="['gcsa-drawer__panel', 'gcsa-ui-surface', `gcsa-drawer__panel--${placement}`]"
+      >
+        <Dialog.CloseTrigger
+          v-if="closable"
+          class="gcsa-drawer__close"
+          :aria-label="messages.close"
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+            <path
+              d="M2 2l10 10M12 2L2 12"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+            />
+          </svg>
+        </Dialog.CloseTrigger>
+        <header v-if="title" class="gcsa-drawer__header">
+          <Dialog.Title as-child>
+            <div class="gcsa-drawer__title">{{ title }}</div>
+          </Dialog.Title>
+        </header>
+        <div
+          ref="bodyRef"
+          class="gcsa-drawer__body"
+          :class="{ 'gcsa-drawer__body--titled': title }"
+        >
+          <slot />
+        </div>
+        <div v-if="$slots.footer" class="gcsa-drawer__footer">
+          <slot name="footer" />
+        </div>
+      </Dialog.Content>
+    </Dialog.Positioner>
+  </Dialog.Root>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { Dialog } from '@ark-ui/vue/dialog';
+import type { GcsaDrawerProps } from '../types/componentProps';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import { usePreserveScrollOnFocus } from '../composables/usePreserveScrollOnFocus';
+import { useGcsaZIndex } from '../composables/useGcsaZIndex';
+
+defineOptions({ name: 'GcsaDrawer' });
+
+const messages = useGcsaLocaleMessages();
+const bodyRef = ref<HTMLElement | null>(null);
+const { nextZIndex } = useGcsaZIndex();
+const backdropZ = ref<number>();
+const positionerZ = ref<number>();
+
+const props = withDefaults(
+  defineProps<GcsaDrawerProps>(),
+  {
+    closable: true,
+    placement: 'right'
+  }
+);
+
+const emit = defineEmits<{
+  'update:open': [value: boolean];
+}>();
+
+usePreserveScrollOnFocus(bodyRef, computed(() => props.open));
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open) {
+      backdropZ.value = nextZIndex();
+      positionerZ.value = nextZIndex();
+    }
+  },
+  { immediate: true }
+);
+
+const backdropStyle = computed(() =>
+  backdropZ.value == null ? undefined : { zIndex: backdropZ.value }
+);
+
+const positionerStyle = computed(() =>
+  positionerZ.value == null ? undefined : { zIndex: positionerZ.value }
+);
+
+function onOpenChange(open: boolean) {
+  emit('update:open', open);
+}
+</script>

package/src/components/GcsaDropdown.vue

@@ -0,0 +1,84 @@
+<template>
+  <span class="gcsa-dropdown-anchor" :class="rootClass">
+    <Menu.Root
+      :positioning="positioningOptions"
+      @select="onSelect"
+      @open-change="(details) => onOpenChange(details.open)"
+    >
+    <Menu.Trigger v-if="hasTriggerSlot" as-child>
+      <slot name="trigger" />
+    </Menu.Trigger>
+    <Menu.Trigger v-else>
+      <GcsaButton variant="secondary">{{ resolvedTriggerLabel }}</GcsaButton>
+    </Menu.Trigger>
+    <GcsaPortal :portalled="portalled">
+      <Menu.Positioner class="gcsa-dropdown-positioner" :style="positionerStyle">
+        <Menu.Content class="gcsa-dropdown gcsa-ui-surface" :style="contentStyle">
+          <Menu.Item
+            v-for="item in items"
+            :key="item.key"
+            :value="item.key"
+            :disabled="item.disabled"
+            class="gcsa-dropdown__item"
+          >
+            <Menu.ItemText>{{ item.label }}</Menu.ItemText>
+          </Menu.Item>
+        </Menu.Content>
+      </Menu.Positioner>
+    </GcsaPortal>
+  </Menu.Root>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useSlots } from 'vue';
+import { Menu } from '@ark-ui/vue/menu';
+import { createGcsaPopupPositioning } from '@gcsa/console-core';
+import type { GcsaDropdownProps } from '../types/componentProps';
+import GcsaButton from './GcsaButton.vue';
+import GcsaPortal from './GcsaPortal.vue';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import { useGcsaPopupZIndex } from '../composables/useGcsaPopupZIndex';
+
+defineOptions({ name: 'GcsaDropdown', inheritAttrs: false });
+
+const attrs = useAttrs();
+const rootClass = computed(() => attrs.class);
+
+const props = withDefaults(
+  defineProps<GcsaDropdownProps>(),
+  {
+    placement: 'bottom-start',
+    portalled: true,
+    gutter: 4
+  }
+);
+
+const messages = useGcsaLocaleMessages();
+const { zIndex: popupZIndex, onOpenChange } = useGcsaPopupZIndex();
+const resolvedTriggerLabel = computed(() => props.triggerLabel ?? messages.value.menu);
+const hasTriggerSlot = computed(() => Boolean(useSlots().trigger));
+
+const positionerStyle = computed(() =>
+  popupZIndex.value == null ? undefined : { zIndex: popupZIndex.value }
+);
+
+const contentStyle = computed(() =>
+  popupZIndex.value == null ? undefined : { zIndex: popupZIndex.value }
+);
+
+const positioningOptions = computed(() =>
+  createGcsaPopupPositioning({
+    placement: props.placement,
+    gutter: props.gutter
+  })
+);
+
+const emit = defineEmits<{
+  select: [key: string];
+}>();
+
+function onSelect(details: { value: string }) {
+  emit('select', details.value);
+}
+</script>

package/src/components/GcsaEmpty.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="gcsa-empty gcsa-ui-surface">
+    <div class="gcsa-empty__icon" aria-hidden="true">
+      <slot name="icon">
+        <GcsaIcon name="resultEmpty" />
+      </slot>
+    </div>
+    <div class="gcsa-empty__title">{{ resolvedTitle }}</div>
+    <div v-if="description" class="gcsa-empty__desc">{{ description }}</div>
+    <div v-if="$slots.action" class="gcsa-empty__action">
+      <slot name="action" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import type { GcsaEmptyProps } from '../types/componentProps';
+import GcsaIcon from './GcsaIcon.vue';
+
+defineOptions({ name: 'GcsaEmpty' });
+
+const props = defineProps<GcsaEmptyProps>();
+
+const messages = useGcsaLocaleMessages();
+const resolvedTitle = computed(() => props.title ?? messages.value.emptyDefault);
+</script>

package/src/components/GcsaField.vue

@@ -0,0 +1,27 @@
+<template>
+  <Field.Root class="gcsa-field" :invalid="isInvalid">
+    <Field.Label v-if="label" class="gcsa-field__label">
+      {{ label }}
+      <span v-if="required" class="gcsa-field__required" aria-hidden="true">*</span>
+    </Field.Label>
+    <slot />
+    <Transition name="gcsa-field-feedback">
+      <Field.HelperText v-if="hint && !error" class="gcsa-field__hint" role="note">{{ hint }}</Field.HelperText>
+    </Transition>
+    <Transition name="gcsa-field-feedback">
+      <Field.ErrorText v-if="error" class="gcsa-field__error" role="alert">{{ error }}</Field.ErrorText>
+    </Transition>
+  </Field.Root>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Field } from '@ark-ui/vue/field';
+import type { GcsaFieldProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaField' });
+
+const props = defineProps<GcsaFieldProps>();
+
+const isInvalid = computed(() => props.invalid ?? Boolean(props.error));
+</script>