orio-ui 1.23.2 → 1.24.0

package/dist/runtime/components/view/Dates.vue.d.ts

@@ -1,9 +1,6 @@
-export interface ResumeDate {
-    startDate: string;
-    endDate?: string | null;
-}
+import { type DateRange } from "../../utils/date.js";
 interface Props {
-    dates: ResumeDate;
+    dates: DateRange;
     month?: boolean;
     size?: "small" | "medium" | "large";
     type?: "text" | "title" | "subtitle" | "italics";

package/dist/runtime/i18n/en.json

@@ -4,12 +4,15 @@
     "selected": "{count} selected",
     "noOptions": "No options found"
   },
-  "dateRangePicker": {
-    "startBeforeEnd": "Start date must be before end date.",
-    "present": "Present"
+  "calendar": {
+    "previousMonth": "Previous month",
+    "nextMonth": "Next month"
+  },
+  "datePicker": {
+    "placeholder": "Select a date"
   },
-  "dates": {
-    "present": "Present"
+  "dateRangePicker": {
+    "placeholder": "Select a date range"
   },
   "validation": {
     "fieldError": "Error on this field"

package/dist/runtime/i18n/uk.json

@@ -4,12 +4,15 @@
     "selected": "{count} обрано",
     "noOptions": "Опцій не знайдено"
   },
-  "dateRangePicker": {
-    "startBeforeEnd": "Дата початку має бути раніше дати завершення.",
-    "present": "Теперішній час"
+  "calendar": {
+    "previousMonth": "Попередній місяць",
+    "nextMonth": "Наступний місяць"
+  },
+  "datePicker": {
+    "placeholder": "Оберіть дату"
   },
-  "dates": {
-    "present": "Теперішній час"
+  "dateRangePicker": {
+    "placeholder": "Оберіть діапазон дат"
   },
   "validation": {
     "fieldError": "Помилка в цьому полі"

package/dist/runtime/index.d.ts

@@ -11,8 +11,10 @@ export { default as CheckBox } from "./components/CheckBox.vue.js";
 export { default as CheckboxGroup, type CheckboxOption, type CheckboxGroupProps, } from "./components/CheckboxGroup.vue.js";
 export { default as RadioButton, type RadioButtonProps, } from "./components/RadioButton.vue.js";
 export { default as SwitchButton } from "./components/SwitchButton.vue.js";
-export { default as DatePicker } from "./components/DatePicker.vue.js";
-export { default as DateRangePicker } from "./components/DateRangePicker.vue.js";
+export { default as Calendar, type CalendarProps, } from "./components/Calendar.vue.js";
+export { default as DatePicker } from "./components/date/Picker.vue.js";
+export { default as DateRangePicker } from "./components/date/RangePicker.vue.js";
+export { type DateRange, parseISO, formatISO, formatDate } from "./utils/date.js";
 export { default as Selector } from "./components/Selector.vue.js";
 export { default as TaggableSelector } from "./components/TaggableSelector.vue.js";
 export { default as Tag } from "./components/Tag.vue.js";

package/dist/runtime/index.js

@@ -15,8 +15,12 @@ export {
   default as RadioButton
 } from "./components/RadioButton.vue";
 export { default as SwitchButton } from "./components/SwitchButton.vue";
-export { default as DatePicker } from "./components/DatePicker.vue";
-export { default as DateRangePicker } from "./components/DateRangePicker.vue";
+export {
+  default as Calendar
+} from "./components/Calendar.vue";
+export { default as DatePicker } from "./components/date/Picker.vue";
+export { default as DateRangePicker } from "./components/date/RangePicker.vue";
+export { parseISO, formatISO, formatDate } from "./utils/date.js";
 export { default as Selector } from "./components/Selector.vue";
 export { default as TaggableSelector } from "./components/TaggableSelector.vue";
 export { default as Tag } from "./components/Tag.vue";

package/dist/runtime/utils/date.d.ts

@@ -0,0 +1,10 @@
+export interface DateRange {
+    start: string | null;
+    end: string | null;
+}
+export declare function parseISO(value: string | null | undefined): Date | null;
+export declare function formatISO(date: Date): string;
+export declare function isSameDay(a: Date, b: Date): boolean;
+export declare function startOfMonth(date: Date): Date;
+export declare function addMonths(date: Date, count: number): Date;
+export declare function formatDate(value: string | null | undefined, locale: string, options?: Intl.DateTimeFormatOptions): string;

package/dist/runtime/utils/date.js

@@ -0,0 +1,38 @@
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+export function parseISO(value) {
+  if (!value) return null;
+  const match = ISO_DATE.exec(value);
+  if (!match) return null;
+  const [, y, m, d] = match;
+  const date = new Date(Number(y), Number(m) - 1, Number(d));
+  if (Number.isNaN(date.getTime())) return null;
+  if (date.getFullYear() !== Number(y) || date.getMonth() !== Number(m) - 1 || date.getDate() !== Number(d)) {
+    return null;
+  }
+  return date;
+}
+export function formatISO(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+export function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+export function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+export function addMonths(date, count) {
+  return new Date(date.getFullYear(), date.getMonth() + count, 1);
+}
+const DEFAULT_DATE_FORMAT = {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+};
+export function formatDate(value, locale, options = DEFAULT_DATE_FORMAT) {
+  const date = parseISO(value);
+  if (!date) return "";
+  return new Intl.DateTimeFormat(locale, options).format(date);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "1.23.2",
+  "version": "1.24.0",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",

package/dist/runtime/components/DatePicker.d.vue.ts

@@ -1,15 +0,0 @@
-interface Props {
-    month?: boolean;
-}
-type __VLS_Props = Props;
-type __VLS_ModelProps = {
-    "date": string | null | undefined;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:date": (value: string | null | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:date"?: ((value: string | null | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/DatePicker.vue

@@ -1,24 +0,0 @@
-<script setup>
-defineProps({
-  month: { type: Boolean, required: false }
-});
-const date = defineModel("date", { type: null, ...{
-  required: true
-} });
-</script>
-
-<template>
-  <orio-control-element v-slot="{ id }" class="date-picker" v-bind="$attrs">
-    <input
-      :id
-      v-model="date"
-      :type="month ? 'month' : 'date'"
-      class="date-input"
-      :name="id"
-    />
-  </orio-control-element>
-</template>
-
-<style scoped>
-.date-picker *{cursor:pointer;width:100%}.date-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-sizing:border-box;color:var(--color-text);padding:.4rem .6rem;transition:border-color .2s ease}.date-input:focus,.date-input:hover{border-color:var(--color-accent)}.date-input:focus{outline:none}.date-input:disabled{background-color:var(--color-surface);color:var(--color-muted);cursor:not-allowed}.date-input::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(36%) sepia(65%) saturate(325%) hue-rotate(180deg);opacity:.7;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.date-input::-webkit-calendar-picker-indicator:hover{opacity:1}
-</style>

package/dist/runtime/components/DatePicker.vue.d.ts

@@ -1,15 +0,0 @@
-interface Props {
-    month?: boolean;
-}
-type __VLS_Props = Props;
-type __VLS_ModelProps = {
-    "date": string | null | undefined;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:date": (value: string | null | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:date"?: ((value: string | null | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/DateRangePicker.d.vue.ts

@@ -1,18 +0,0 @@
-import type { ResumeDate } from "./view/Dates.vue.js";
-export interface DateRangePickerProps {
-    month?: boolean;
-}
-type __VLS_Props = DateRangePickerProps;
-type __VLS_ModelProps = {
-    "dates": ResumeDate;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
-    dateIsCorrect: import("vue").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:dates": (value: ResumeDate) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:dates"?: ((value: ResumeDate) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/DateRangePicker.vue

@@ -1,67 +0,0 @@
-<script setup>
-import { ref, watch, computed } from "vue";
-import { useI18n } from "vue-i18n";
-defineProps({
-  month: { type: Boolean, required: false }
-});
-const { t } = useI18n();
-const dates = defineModel("dates", { type: Object, ...{ required: true } });
-const present = ref(dates.value.endDate !== "" && !dates.value.endDate);
-watch(present, (value) => {
-  if (value) {
-    dates.value.endDate = null;
-  } else {
-    dates.value.endDate = "";
-  }
-});
-const dateIsCorrect = computed(() => {
-  if (dates.value.startDate && dates.value.endDate) {
-    return new Date(dates.value.startDate) <= new Date(dates.value.endDate);
-  }
-  return true;
-});
-defineExpose({ dateIsCorrect });
-</script>
-
-<template>
-  <orio-control-element
-    v-bind="$attrs"
-    :error="!dateIsCorrect ? t('dateRangePicker.startBeforeEnd') : null"
-  >
-    <div class="date-range-picker">
-      <orio-date-picker
-        v-model:date="dates.startDate"
-        class="error-fields"
-        :month
-      />
-      <orio-date-picker
-        v-model:date="dates.endDate"
-        class="error-fields"
-        :month
-      />
-      <orio-check-box v-model="present">
-        {{ t("dateRangePicker.present") }}
-      </orio-check-box>
-    </div>
-  </orio-control-element>
-</template>
-
-<style scoped>
-.date-range-picker {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.date-range-picker > * {
-  min-width: 0;
-}
-.date-range-picker .date-picker {
-  margin-inline: 0;
-}
-.date-range-picker .date-picker:first-child {
-  margin-inline-end: 0.5rem;
-}
-.date-range-picker .checkbox {
-  margin-inline-start: 0.25rem;
-}
-</style>

package/dist/runtime/components/DateRangePicker.vue.d.ts

@@ -1,18 +0,0 @@
-import type { ResumeDate } from "./view/Dates.vue.js";
-export interface DateRangePickerProps {
-    month?: boolean;
-}
-type __VLS_Props = DateRangePickerProps;
-type __VLS_ModelProps = {
-    "dates": ResumeDate;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
-    dateIsCorrect: import("vue").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:dates": (value: ResumeDate) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:dates"?: ((value: ResumeDate) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;