@veritree/ui 0.27.0 → 0.28.0-1

package/src/components/Form/VTInputDate.vue

@@ -0,0 +1,602 @@
+<template>
+  <!-- Range date picker -->
+  <DateRangePickerRoot
+    v-if="isRange"
+    v-model="rangeValue"
+    v-model:open="isOpen"
+    :min-value="minCalendarDate"
+    :max-value="maxCalendarDate"
+    :number-of-months="columns"
+    :fixed-weeks="fixedWeeks"
+    :initial-focus="initialFocus"
+    :placeholder="placeholder"
+    @update:model-value="onRangeSelect"
+  >
+    <DateRangePickerField v-slot="{ segments }">
+      <DateRangePickerTrigger
+        :id="id"
+        :class="classComputed"
+        :data-testid="dataTestid"
+        :disabled="disabled"
+      >
+        <span v-if="displayText">{{ displayText }}</span>
+        <slot v-else name="label">
+          <span class="text-gray-500">{{ label || format }}</span>
+        </slot>
+        <span
+          v-if="!iconless"
+          :class="[
+            disabled ? 'bg-gray-200' : 'bg-white',
+            'pointer-events-none absolute right-3 top-1/2 -translate-y-1/2',
+          ]"
+        >
+          <IconCalendar class="-z-0 h-5 w-5 scale-90 text-gray-600" />
+        </span>
+      </DateRangePickerTrigger>
+    </DateRangePickerField>
+
+    <DateRangePickerContent
+      :side-offset="4"
+      class="vt-datepicker-content"
+    >
+      <DateRangePickerCalendar v-slot="{ grid, weekDays }">
+        <DateRangePickerHeader class="vt-calendar-header">
+          <DateRangePickerPrev class="vt-calendar-nav">
+            <IconChevronLeft class="h-4 w-4" />
+          </DateRangePickerPrev>
+          <DateRangePickerHeading class="vt-calendar-heading" />
+          <DateRangePickerNext class="vt-calendar-nav">
+            <IconChevronRight class="h-4 w-4" />
+          </DateRangePickerNext>
+        </DateRangePickerHeader>
+        <div class="vt-calendar-grids">
+          <DateRangePickerGrid
+            v-for="month in grid"
+            :key="month.value.toString()"
+            class="vt-calendar-grid unstyled"
+          >
+            <DateRangePickerGridHead>
+              <DateRangePickerGridRow>
+                <DateRangePickerHeadCell
+                  v-for="day in weekDays"
+                  :key="day"
+                  class="vt-calendar-head-cell"
+                >
+                  {{ day }}
+                </DateRangePickerHeadCell>
+              </DateRangePickerGridRow>
+            </DateRangePickerGridHead>
+            <DateRangePickerGridBody>
+              <DateRangePickerGridRow
+                v-for="(weekDates, index) in month.rows"
+                :key="`weekDate-${index}`"
+              >
+                <DateRangePickerCell
+                  v-for="weekDate in weekDates"
+                  :key="weekDate.toString()"
+                  :date="weekDate"
+                  class="vt-calendar-cell"
+                >
+                  <DateRangePickerCellTrigger
+                    :day="weekDate"
+                    :month="month.value"
+                    class="vt-calendar-cell-trigger"
+                  />
+                </DateRangePickerCell>
+              </DateRangePickerGridRow>
+            </DateRangePickerGridBody>
+          </DateRangePickerGrid>
+        </div>
+      </DateRangePickerCalendar>
+      <div class="mt-2 flex">
+        <VTButton size="small" variant="secondary" @click.prevent="onClear">
+          Clear
+        </VTButton>
+      </div>
+    </DateRangePickerContent>
+  </DateRangePickerRoot>
+
+  <!-- Single date picker -->
+  <DatePickerRoot
+    v-else
+    v-model="singleValue"
+    v-model:open="isOpen"
+    :min-value="minCalendarDate"
+    :max-value="maxCalendarDate"
+    :number-of-months="columns"
+    :fixed-weeks="fixedWeeks"
+    :initial-focus="initialFocus"
+    :placeholder="placeholder"
+    @update:model-value="onSingleSelect"
+  >
+    <DatePickerField v-slot="{ segments }">
+      <DatePickerTrigger
+        :id="id"
+        :class="classComputed"
+        :data-testid="dataTestid"
+        :disabled="disabled"
+      >
+        <span v-if="displayText">{{ displayText }}</span>
+        <slot v-else name="label">
+          <span class="text-gray-500">{{ label || format }}</span>
+        </slot>
+        <span
+          v-if="!iconless"
+          :class="[
+            disabled ? 'bg-gray-200' : 'bg-white',
+            'pointer-events-none absolute right-3 top-1/2 -translate-y-1/2',
+          ]"
+        >
+          <IconCalendar class="-z-0 h-5 w-5 scale-90 text-gray-600" />
+        </span>
+      </DatePickerTrigger>
+    </DatePickerField>
+
+    <DatePickerContent
+      :side-offset="4"
+      class="vt-datepicker-content"
+    >
+      <DatePickerCalendar v-slot="{ grid, weekDays }">
+        <DatePickerHeader class="vt-calendar-header">
+          <DatePickerPrev class="vt-calendar-nav">
+            <IconChevronLeft class="h-4 w-4" />
+          </DatePickerPrev>
+          <DatePickerHeading class="vt-calendar-heading" />
+          <DatePickerNext class="vt-calendar-nav">
+            <IconChevronRight class="h-4 w-4" />
+          </DatePickerNext>
+        </DatePickerHeader>
+        <div class="vt-calendar-grids">
+          <DatePickerGrid
+            v-for="month in grid"
+            :key="month.value.toString()"
+            class="vt-calendar-grid unstyled"
+          >
+            <DatePickerGridHead>
+              <DatePickerGridRow>
+                <DatePickerHeadCell
+                  v-for="day in weekDays"
+                  :key="day"
+                  class="vt-calendar-head-cell"
+                >
+                  {{ day }}
+                </DatePickerHeadCell>
+              </DatePickerGridRow>
+            </DatePickerGridHead>
+            <DatePickerGridBody>
+              <DatePickerGridRow
+                v-for="(weekDates, index) in month.rows"
+                :key="`weekDate-${index}`"
+              >
+                <DatePickerCell
+                  v-for="weekDate in weekDates"
+                  :key="weekDate.toString()"
+                  :date="weekDate"
+                  class="vt-calendar-cell"
+                >
+                  <DatePickerCellTrigger
+                    :day="weekDate"
+                    :month="month.value"
+                    class="vt-calendar-cell-trigger"
+                  />
+                </DatePickerCell>
+              </DatePickerGridRow>
+            </DatePickerGridBody>
+          </DatePickerGrid>
+        </div>
+      </DatePickerCalendar>
+      <div class="mt-2 flex">
+        <VTButton size="small" variant="secondary" @click.prevent="onClear">
+          Clear
+        </VTButton>
+      </div>
+    </DatePickerContent>
+  </DatePickerRoot>
+</template>
+
+<script>
+import {
+  DatePickerRoot,
+  DatePickerField,
+  DatePickerTrigger,
+  DatePickerContent,
+  DatePickerCalendar,
+  DatePickerHeader,
+  DatePickerHeading,
+  DatePickerPrev,
+  DatePickerNext,
+  DatePickerGrid,
+  DatePickerGridHead,
+  DatePickerGridBody,
+  DatePickerGridRow,
+  DatePickerHeadCell,
+  DatePickerCell,
+  DatePickerCellTrigger,
+  DateRangePickerRoot,
+  DateRangePickerField,
+  DateRangePickerTrigger,
+  DateRangePickerContent,
+  DateRangePickerCalendar,
+  DateRangePickerHeader,
+  DateRangePickerHeading,
+  DateRangePickerPrev,
+  DateRangePickerNext,
+  DateRangePickerGrid,
+  DateRangePickerGridHead,
+  DateRangePickerGridBody,
+  DateRangePickerGridRow,
+  DateRangePickerHeadCell,
+  DateRangePickerCell,
+  DateRangePickerCellTrigger,
+} from 'reka-ui';
+import { CalendarDate, today, getLocalTimeZone } from '@internationalized/date';
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(utc);
+
+export default {
+  name: 'VTInputDate',
+
+  components: {
+    DatePickerRoot, DatePickerField, DatePickerTrigger, DatePickerContent,
+    DatePickerCalendar, DatePickerHeader, DatePickerHeading, DatePickerPrev,
+    DatePickerNext, DatePickerGrid, DatePickerGridHead, DatePickerGridBody,
+    DatePickerGridRow, DatePickerHeadCell, DatePickerCell, DatePickerCellTrigger,
+    DateRangePickerRoot, DateRangePickerField, DateRangePickerTrigger,
+    DateRangePickerContent, DateRangePickerCalendar, DateRangePickerHeader,
+    DateRangePickerHeading, DateRangePickerPrev, DateRangePickerNext,
+    DateRangePickerGrid, DateRangePickerGridHead, DateRangePickerGridBody,
+    DateRangePickerGridRow, DateRangePickerHeadCell, DateRangePickerCell,
+    DateRangePickerCellTrigger,
+  },
+
+  mixins: [formControlMixin, formControlStyleMixin],
+
+  props: {
+    id: {
+      type: String,
+      default: null,
+    },
+    dataTestid: {
+      type: String,
+      default: null,
+    },
+    label: {
+      type: String,
+      default: null,
+    },
+    format: {
+      type: String,
+      default: 'YYYY-MM-DD',
+    },
+    min: {
+      type: [String, Date],
+      default: null,
+    },
+    max: {
+      type: [String, Date],
+      default: null,
+    },
+    iconless: {
+      type: Boolean,
+      default: false,
+    },
+    useUtc: {
+      type: Boolean,
+      default: false,
+    },
+    placement: {
+      type: String,
+      default: 'bottom-start',
+    },
+    isRange: {
+      type: Boolean,
+      default: false,
+    },
+    columns: {
+      type: Number,
+      default: 1,
+    },
+    fixedWeeks: {
+      type: Boolean,
+      default: true,
+    },
+    initialFocus: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['update:modelValue', 'change', 'shown', 'hidden'],
+
+  data() {
+    return {
+      singleValue: undefined,
+      rangeValue: undefined,
+      placeholder: today(getLocalTimeZone()),
+      isOpen: false,
+    };
+  },
+
+  computed: {
+    displayText() {
+      if (!this.modelValue) return '';
+
+      if (this.isRange) {
+        const start = this.modelValue.start || this.modelValue[0];
+        const end = this.modelValue.end || this.modelValue[1];
+        if (start && end) {
+          return `${this.formatDate(start)} – ${this.formatDate(end)}`;
+        }
+        return '';
+      }
+
+      return this.formatDate(this.modelValue);
+    },
+
+    minCalendarDate() {
+      return this.toCalendarDate(this.min);
+    },
+
+    maxCalendarDate() {
+      return this.toCalendarDate(this.max);
+    },
+  },
+
+  watch: {
+    modelValue: {
+      immediate: true,
+      handler(val) {
+        if (!val) {
+          this.singleValue = undefined;
+          this.rangeValue = undefined;
+          return;
+        }
+
+        if (this.isRange) {
+          const start = val.start || val[0];
+          const end = val.end || val[1];
+          if (start && end) {
+            this.rangeValue = {
+              start: this.toCalendarDate(start),
+              end: this.toCalendarDate(end),
+            };
+          }
+        } else {
+          this.singleValue = this.toCalendarDate(val);
+        }
+      },
+    },
+
+    isOpen(val) {
+      if (val) {
+        this.$emit('shown');
+      } else {
+        // Reset placeholder to selected date or today so focus is correct on reopen
+        if (this.singleValue) {
+          this.placeholder = this.singleValue;
+        } else if (this.rangeValue?.start) {
+          this.placeholder = this.rangeValue.start;
+        } else {
+          this.placeholder = today(getLocalTimeZone());
+        }
+        this.$emit('hidden');
+      }
+    },
+  },
+
+  methods: {
+    toCalendarDate(value) {
+      if (!value) return undefined;
+      if (value instanceof CalendarDate) return value;
+      const d = dayjs(value);
+      if (!d.isValid()) return undefined;
+      return new CalendarDate(d.year(), d.month() + 1, d.date());
+    },
+
+    calendarDateToString(calDate) {
+      if (!calDate) return null;
+      return `${calDate.year}-${String(calDate.month).padStart(2, '0')}-${String(calDate.day).padStart(2, '0')}`;
+    },
+
+    formatDate(value) {
+      if (!value) return '';
+      let date = dayjs(value);
+      if (this.useUtc) {
+        date = date.utc();
+      }
+      return date.format(this.format);
+    },
+
+    onSingleSelect(calDate) {
+      if (!calDate) return;
+      const value = this.calendarDateToString(calDate);
+      this.$emit('update:modelValue', value);
+      this.$emit('change', value);
+      this.isOpen = false;
+    },
+
+    onRangeSelect(range) {
+      if (!range?.start || !range?.end) return;
+      const value = {
+        start: this.calendarDateToString(range.start),
+        end: this.calendarDateToString(range.end),
+      };
+      this.$emit('update:modelValue', value);
+      this.$emit('change', value);
+    },
+
+    onClear() {
+      this.singleValue = undefined;
+      this.rangeValue = undefined;
+      this.$emit('update:modelValue', null);
+      this.$emit('change', null);
+      this.isOpen = false;
+    },
+  },
+};
+</script>
+
+<style>
+.vt-datepicker-content {
+  background: white;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  z-index: 50;
+  animation: vt-datepicker-enter 0.15s ease-out;
+}
+
+.vt-datepicker-content[data-state="closed"] {
+  animation: vt-datepicker-leave 0.1s ease-in;
+}
+
+@keyframes vt-datepicker-enter {
+  from {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes vt-datepicker-leave {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+}
+
+.vt-calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.25rem 0 0.5rem;
+}
+
+.vt-calendar-heading {
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: #374151;
+}
+
+.vt-calendar-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.375rem;
+  border: none;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+}
+
+.vt-calendar-nav:hover {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+
+.vt-calendar-grids {
+  display: flex;
+  gap: 1rem;
+}
+
+.vt-calendar-grid {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.vt-calendar-head-cell,
+.vt-calendar-cell-trigger {
+  text-align: center;
+}
+
+.vt-calendar-head-cell {
+  height: 2rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #9ca3af;
+}
+
+.vt-calendar-cell {
+  padding: 1px;
+}
+
+.vt-calendar-cell-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.375rem;
+  border: none;
+  background: transparent;
+  font-size: 0.8125rem;
+  color: #374151;
+  cursor: pointer;
+}
+
+.vt-calendar-cell-trigger:hover {
+  background-color: #f3f4f6;
+}
+
+.vt-calendar-cell-trigger[data-selected] {
+  background-color: #191919;
+  color: white;
+}
+
+.vt-calendar-cell-trigger[data-today] {
+  font-weight: 700;
+}
+
+.vt-calendar-cell-trigger[data-focused],
+.vt-calendar-cell-trigger:focus-visible {
+  outline: 2px solid #191919;
+  outline-offset: -2px;
+}
+
+.vt-calendar-cell-trigger[data-disabled] {
+  color: #d1d5db;
+  pointer-events: none;
+}
+
+.vt-calendar-cell-trigger[data-outside-view] {
+  color: #d1d5db;
+}
+
+.vt-calendar-cell-trigger[data-unavailable] {
+  color: #d1d5db;
+  text-decoration: line-through;
+}
+
+/* Range selection styles */
+.vt-calendar-cell-trigger[data-selection-start] {
+  background-color: #191919;
+  color: white;
+  border-radius: 0.375rem 0 0 0.375rem;
+}
+
+.vt-calendar-cell-trigger[data-selection-end] {
+  background-color: #191919;
+  color: white;
+  border-radius: 0 0.375rem 0.375rem 0;
+}
+
+.vt-calendar-cell-trigger[data-highlighted] {
+  background-color: #e5e7eb;
+  border-radius: 0;
+}
+</style>

package/src/components/Form/VTInputIcon.vue

@@ -2,13 +2,12 @@
   <div :class="classComputedWrapper">
     <input
       :class="classComputed"
-      :value="value"
+      :value="modelValue"
       :disabled="disabled"
-      v-bind="$attrs"
-      v-on="listeners"
+      v-bind="attrsComputed"
     />
     <div :class="classComputedWrapperIcon">
-      <component :is="icon" class="h-5 w-5" />
+      <slot name="icon" />
     </div>
   </div>
 </template>
@@ -22,11 +21,6 @@ export default {
   mixins: [formControlIconMixin],
 
   props: {
-    icon: {
-      type: String,
-      default: null,
-      required: true,
-    },
     iconPlacement: {
       type: String,
       default: 'left',