@privyid/persona 1.2.1 → 1.2.2-rc.2

package/dist/components/calendar/Calendar.vue

@@ -0,0 +1,396 @@
+<template>
+  <p-card
+    data-testid="calendar"
+    class="calendar"
+    element="div"
+    :viewmode="viewmode"
+    :class="classNames">
+    <div class="calendar__nav">
+      <p-button
+        data-testid="calendar-prev"
+        variant="solid"
+        icon
+        type="button"
+        :disabled="!canPrev"
+        :readonly="disabled || readonly"
+        @click="prev">
+        <IconBack />
+      </p-button>
+
+      <p-button
+        data-testid="calendar-title"
+        class="calendar__nav-title"
+        variant="solid"
+        type="button"
+        :readonly="disabled || readonly"
+        @click="changeMode(1)">
+        {{ title }}
+      </p-button>
+
+      <p-button
+        data-testid="calendar-next"
+        variant="solid"
+        icon
+        type="button"
+        :readonly="disabled || readonly"
+        :disabled="!canNext"
+        @click="next">
+        <IconNext />
+      </p-button>
+    </div>
+
+    <Transition
+      :name="transition"
+      mode="out-in">
+      <div
+        :key="`${cursor.toISOString()}+${viewmode}`"
+        data-testid="calendar-items"
+        class="calendar__items"
+        :viewmode="viewmode">
+        <template
+          v-for="(item, i) in items"
+          :key="i">
+          <p-button
+            variant="solid"
+            type="button"
+            data-testid="calendar-item"
+            class="calendar__item-btn"
+            :readonly="item.readonly || disabled || readonly"
+            :active="item.active"
+            :disabled="item.disabled"
+            :class="{
+  'calendar__item--in-range': isInRange(item),
+  'calendar__item--head': item.head,
+  'calendar__item--tail': item.tail
+}"
+            @click="selectItem(item)"
+            @mouseover="setHover(item)">
+            {{ item.text }}
+          </p-button>
+        </template>
+      </div>
+    </Transition>
+  </p-card>
+</template>
+
+<script setup>
+import pButton from "../button/Button.vue";
+import pCard from "../card/Card.vue";
+import IconNext from "@privyid/persona-icon/vue/chevron-right/20.vue";
+import IconBack from "@privyid/persona-icon/vue/chevron-left/20.vue";
+import {
+  ref,
+  computed,
+  watch
+} from "vue";
+import {
+  CalendarFormat,
+  validateDuration,
+  parseDuration
+} from "./adapter/adapter";
+import DateAdapter from "./adapter/date";
+import MonthAdapter from "./adapter/month";
+import YearAdapter from "./adapter/year";
+import {
+  isWithinInterval,
+  startOfMonth,
+  min as minDate,
+  max as maxDate,
+  add,
+  sub
+} from "date-fns";
+import {
+  minTime as MIN_TIME,
+  maxTime as MAX_TIME
+} from "date-fns/constants";
+import { syncRef } from "@vueuse/core";
+const Adapters = {
+  date: DateAdapter,
+  month: MonthAdapter,
+  year: YearAdapter
+};
+const props = defineProps({
+  modelValue: {
+    type: [Date, Array],
+    default: void 0
+  },
+  start: {
+    type: Date,
+    default: void 0
+  },
+  end: {
+    type: Date,
+    default: void 0
+  },
+  disabled: {
+    type: Boolean,
+    default: void 0
+  },
+  readonly: {
+    type: Boolean,
+    default: void 0
+  },
+  min: {
+    type: Date,
+    default: () => new Date(MIN_TIME)
+  },
+  max: {
+    type: Date,
+    default: () => new Date(MAX_TIME)
+  },
+  mode: {
+    type: String,
+    default: "date"
+  },
+  range: {
+    type: Boolean,
+    default: false
+  },
+  minRange: {
+    type: String,
+    default: void 0,
+    validator(value) {
+      return validateDuration(value);
+    }
+  },
+  maxRange: {
+    type: String,
+    default: void 0,
+    validator(value) {
+      return validateDuration(value);
+    }
+  }
+});
+const emit = defineEmits(["update:modelValue", "update:start", "update:end", "change"]);
+const viewmode = ref(props.mode);
+const transition = ref("slide-left");
+const localStart = ref(Array.isArray(props.modelValue) ? props.modelValue[0] : props.start ?? props.modelValue);
+const localEnd = ref(Array.isArray(props.modelValue) ? props.modelValue[1] : props.end ?? props.modelValue);
+const vStart = computed({
+  get() {
+    return Array.isArray(props.modelValue) ? props.modelValue?.[0] : props.start ?? props.modelValue;
+  },
+  set(value) {
+    emit("update:start", value);
+  }
+});
+const vEnd = computed({
+  get() {
+    return Array.isArray(props.modelValue) ? props.modelValue?.[1] : props.end ?? props.modelValue;
+  },
+  set(value) {
+    emit("update:end", value);
+  }
+});
+const cursor = ref(startOfMonth(localStart.value ?? /* @__PURE__ */ new Date()));
+const hover = ref();
+const minRange = computed(() => parseDuration(props.minRange));
+const maxRange = computed(() => parseDuration(props.maxRange));
+const isTempLock = computed(() => props.range && localStart.value && !localEnd.value);
+const min = computed(() => {
+  return isTempLock.value ? maxDate([add(localStart.value, minRange.value ?? {}), props.min]) : props.min;
+});
+const max = computed(() => {
+  return isTempLock.value && maxRange.value ? minDate([add(localStart.value, maxRange.value), props.max]) : sub(props.max, minRange.value ?? {});
+});
+const context = {
+  cursor,
+  start: localStart,
+  end: localEnd,
+  min,
+  max
+};
+const adapter = computed(() => {
+  return Adapters[viewmode.value];
+});
+const title = computed(() => {
+  return adapter.value.getTitle(context);
+});
+const items = computed(() => {
+  return adapter.value.getItems(context);
+});
+const canNext = computed(() => {
+  return adapter.value.canNext(context);
+});
+const canPrev = computed(() => {
+  return adapter.value.canPrev(context);
+});
+const classNames = computed(() => {
+  const result = [];
+  if (props.disabled)
+    result.push("calendar--disabled");
+  if (props.readonly)
+    result.push("calendar--readonly");
+  if (props.range)
+    result.push("calendar--range");
+  return result;
+});
+function next() {
+  if (!props.disabled && !props.readonly)
+    cursor.value = adapter.value.getNextCursor(context);
+}
+function prev() {
+  if (!props.disabled && !props.readonly)
+    cursor.value = adapter.value.getPrevCursor(context);
+}
+function changeMode(step = 1) {
+  if (!props.disabled && !props.readonly) {
+    const index = CalendarFormat.indexOf(viewmode.value);
+    const newMode = CalendarFormat[index + step];
+    if (newMode)
+      viewmode.value = newMode;
+  }
+}
+function selectItem(item) {
+  if (viewmode.value === props.mode) {
+    if (props.range && (localStart.value && !localEnd.value)) {
+      const startValue = minDate([localStart.value, item.value]);
+      const endValue = maxDate([localStart.value, item.value]);
+      localStart.value = adapter.value.setValue(startValue, localStart.value);
+      localEnd.value = adapter.value.setValue(endValue, localEnd.value);
+    } else {
+      localStart.value = adapter.value.setValue(item.value, localStart.value);
+      localEnd.value = void 0;
+    }
+  } else {
+    cursor.value = item.value;
+    changeMode(-1);
+  }
+}
+function setHover(item) {
+  if (props.range && !item.readonly && !item.disabled)
+    hover.value = item.value;
+}
+function isInRange(item) {
+  if (props.range && localStart.value && (localEnd.value || hover.value) && !item.readonly && !item.active) {
+    return isWithinInterval(item.value, {
+      start: minDate([localStart.value, localEnd.value ?? hover.value]),
+      end: maxDate([localStart.value, localEnd.value ?? hover.value])
+    });
+  }
+  return false;
+}
+syncRef(localStart, vStart, { immediate: false });
+syncRef(localEnd, vEnd, { immediate: false });
+watch([localStart, localEnd], ([startVal, endVal]) => {
+  if (props.range) {
+    if (startVal && endVal) {
+      emit("update:modelValue", [startVal, endVal]);
+      emit("change", [startVal, endVal]);
+    }
+  } else {
+    emit("update:modelValue", startVal);
+    emit("change", startVal);
+  }
+});
+watch(() => props.mode, (value) => {
+  const newIndex = CalendarFormat.indexOf(value);
+  const currentIndex = CalendarFormat.indexOf(viewmode.value);
+  if (newIndex > currentIndex)
+    viewmode.value = value;
+});
+watch([viewmode, cursor], ([vm, cursor2], [vmOld, cursorOld]) => {
+  const mode = CalendarFormat.indexOf(vm) - CalendarFormat.indexOf(vmOld);
+  if (mode === 0)
+    transition.value = cursor2 > cursorOld ? "slide-left" : "slide-right";
+  else
+    transition.value = mode > 0 ? "zoom-out" : "zoom-in";
+});
+</script>
+
+<style lang="postcss">
+.calendar {
+  @apply flex flex-col space-y-2 text-sm shadow-xl;
+
+  &.card {
+    @apply border-transparent;
+    @apply dark:border-transparent;
+  }
+
+  &__nav {
+    @apply flex justify-between space-x-2 mb-2;
+
+    &-title {
+      @apply grow;
+    }
+  }
+
+  .btn.btn--variant-solid {
+    @apply justify-center;
+
+    &.btn--default {
+      @apply border-transparent bg-transparent text-default font-normal;
+      @apply dark:border-transparent dark:bg-transparent dark:text-dark-subtle hover:dark:text-dark-default;
+
+      &.calendar__nav-title {
+        @apply font-medium;
+      }
+
+      &[active="true"] {
+        @apply bg-brand-accent border-brand-accent text-state-emphasis cursor-default;
+        @apply dark:bg-dark-brand-accent dark:border-dark-brand-accent dark:text-dark-state-emphasis;
+      }
+
+      &[disabled][active="false"] {
+        @apply text-muted;
+        @apply dark:text-dark-muted;
+      }
+
+      &.calendar__item--in-range {
+        @apply bg-info rounded-none;
+        @apply dark:bg-dark-info;
+      }
+    }
+
+    &[readonly] {
+      @apply pointer-events-none font-medium;
+    }
+  }
+
+  .calendar__items {
+    &[viewmode="date"] {
+      @apply grid grid-cols-7 gap-y-1;
+
+      .calendar__item-btn.btn--md {
+        @apply p-1 md:p-2;
+      }
+
+      .calendar__item-btn:nth-child(-n+7) {
+        @apply font-medium;
+      }
+
+      .calendar__item-btn:nth-child(7n-6) {
+        &:not([active="true"]) {
+          @apply text-danger dark:text-dark-danger;
+        }
+      }
+    }
+
+    &[viewmode="month"],
+    &[viewmode="year"] {
+      @apply grid grid-cols-4 gap-y-1;
+      .btn--md {
+        @apply px-3;
+      }
+    }
+  }
+
+  &--range {
+    .calendar__item--head:not(.calendar__item--tail) {
+      @apply rounded-r-none;
+    }
+
+    .calendar__item--tail:not(.calendar__item--head) {
+      @apply rounded-l-none;
+    }
+  }
+
+  &--disabled {
+    @apply opacity-50;
+  }
+
+  .dropdown__subitem & {
+    @apply shadow-none;
+  }
+}
+</style>

package/dist/components/calendar/Calendar.vue.d.ts

@@ -0,0 +1,120 @@
+import type { PropType } from 'vue';
+import type { CalendarMode } from './adapter/adapter';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<Date | [Date, Date]>;
+        default: undefined;
+    };
+    start: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    end: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    min: {
+        type: DateConstructor;
+        default: () => Date;
+    };
+    max: {
+        type: DateConstructor;
+        default: () => Date;
+    };
+    mode: {
+        type: PropType<CalendarMode>;
+        default: string;
+    };
+    range: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minRange: {
+        type: StringConstructor;
+        default: undefined;
+        validator(value: string): boolean;
+    };
+    maxRange: {
+        type: StringConstructor;
+        default: undefined;
+        validator(value: string): boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => void;
+    change: (args_0: unknown) => void;
+    "update:start": (args_0: Date) => void;
+    "update:end": (args_0: Date) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<Date | [Date, Date]>;
+        default: undefined;
+    };
+    start: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    end: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    min: {
+        type: DateConstructor;
+        default: () => Date;
+    };
+    max: {
+        type: DateConstructor;
+        default: () => Date;
+    };
+    mode: {
+        type: PropType<CalendarMode>;
+        default: string;
+    };
+    range: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minRange: {
+        type: StringConstructor;
+        default: undefined;
+        validator(value: string): boolean;
+    };
+    maxRange: {
+        type: StringConstructor;
+        default: undefined;
+        validator(value: string): boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+    onChange?: ((args_0: unknown) => any) | undefined;
+    "onUpdate:start"?: ((args_0: Date) => any) | undefined;
+    "onUpdate:end"?: ((args_0: Date) => any) | undefined;
+}>, {
+    modelValue: Date | [Date, Date];
+    disabled: boolean;
+    mode: "date" | "month" | "year";
+    max: Date;
+    start: Date;
+    end: Date;
+    readonly: boolean;
+    min: Date;
+    range: boolean;
+    minRange: string;
+    maxRange: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/calendar/adapter/adapter.d.ts

@@ -0,0 +1,32 @@
+import type { Ref } from 'vue';
+import { type Duration } from 'date-fns';
+export interface CalendarItem {
+    value: Date;
+    text: string;
+    disabled: boolean;
+    readonly: boolean;
+    active: boolean;
+    head: boolean;
+    tail: boolean;
+}
+export interface CalendarContext {
+    cursor: Ref<Date>;
+    start: Ref<Date>;
+    end: Ref<Date>;
+    min: Ref<Date | undefined>;
+    max: Ref<Date | undefined>;
+}
+export interface CalendarAdapter {
+    getItems: (this: this, context: CalendarContext) => CalendarItem[];
+    getTitle: (this: this, context: CalendarContext) => string;
+    getNextCursor: (this: this, context: CalendarContext) => Date;
+    getPrevCursor: (this: this, context: CalendarContext) => Date;
+    canNext: (this: this, context: CalendarContext) => boolean;
+    canPrev: (this: this, context: CalendarContext) => boolean;
+    setValue: (this: this, value: Date, lastValue?: Date) => Date;
+}
+export declare const CalendarFormat: readonly ["date", "month", "year"];
+export type CalendarMode = typeof CalendarFormat[number];
+export declare function defineAdapter(adapter: CalendarAdapter): CalendarAdapter;
+export declare function validateDuration(duration?: string): boolean;
+export declare function parseDuration(duration?: string): Duration | undefined;

package/dist/components/calendar/adapter/adapter.mjs

@@ -0,0 +1,43 @@
+import { chunk } from "lodash-es";
+export const CalendarFormat = [
+  "date",
+  "month",
+  "year"
+];
+export function defineAdapter(adapter) {
+  return adapter;
+}
+const DURATION_SUFFIX = {
+  Y: "years",
+  y: "years",
+  M: "months",
+  W: "weeks",
+  w: "weeks",
+  D: "days",
+  d: "days",
+  H: "hours",
+  h: "hours",
+  m: "minutes",
+  s: "seconds"
+};
+const DURATION_REGEX = /((-?\d+)([DHMWYdhmswy]))/;
+export function validateDuration(duration) {
+  if (!duration)
+    return false;
+  const match = duration.split(DURATION_REGEX).filter(Boolean);
+  const segment = chunk(match, 3);
+  return segment.every(([text]) => text.match(DURATION_REGEX));
+}
+export function parseDuration(duration) {
+  if (!duration)
+    return;
+  const match = duration.split(DURATION_REGEX).filter(Boolean);
+  const segment = chunk(match, 3);
+  const result = {};
+  for (const item of segment) {
+    const key = DURATION_SUFFIX[item[2]];
+    const value = Number.parseInt(item[1]);
+    result[key] = value + (result[key] ?? 0);
+  }
+  return result;
+}

package/dist/components/calendar/adapter/date.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./adapter").CalendarAdapter;
+export default _default;

package/dist/components/calendar/adapter/date.mjs

@@ -0,0 +1,86 @@
+import {
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  isSameDay,
+  isSameMonth,
+  startOfMonth,
+  startOfWeek,
+  addMonths,
+  subMonths,
+  isAfter,
+  isBefore,
+  isWithinInterval,
+  set,
+  isDate
+} from "date-fns";
+import { defineAdapter } from "./adapter.mjs";
+import { formatDate } from "../../utils/date.mjs";
+function getInterval(date) {
+  const start = startOfWeek(startOfMonth(date), { weekStartsOn: 0 });
+  const end = endOfWeek(endOfMonth(date), { weekStartsOn: 0 });
+  return {
+    start,
+    end
+  };
+}
+export default defineAdapter({
+  getItems({ cursor, start, end, min, max }) {
+    const dates = eachDayOfInterval(getInterval(cursor.value)).map((date) => {
+      const isDisabled = !isSameMonth(cursor.value, date) || !isWithinInterval(date, { start: min.value, end: max.value });
+      const isHead = isSameDay(start.value, date);
+      const isTail = isSameDay(end.value, date);
+      return {
+        value: date,
+        text: date.getDate().toString(),
+        disabled: isDisabled,
+        head: isHead,
+        tail: isTail,
+        active: isHead || isTail,
+        readonly: false
+      };
+    });
+    const days = dates.slice(0, 7).map((item) => {
+      return {
+        value: item.value,
+        text: formatDate(item.value, "EEEEEE"),
+        disabled: false,
+        readonly: true,
+        head: false,
+        tail: false,
+        active: false
+      };
+    });
+    return [...days, ...dates];
+  },
+  getTitle({ cursor }) {
+    return formatDate(cursor.value, "MMMM yyyy");
+  },
+  getNextCursor({ cursor }) {
+    return addMonths(cursor.value, 1);
+  },
+  getPrevCursor({ cursor }) {
+    return subMonths(cursor.value, 1);
+  },
+  canNext(context) {
+    const max = context.max.value;
+    const date = this.getNextCursor(context);
+    const start = startOfMonth(date);
+    const end = endOfMonth(date);
+    return !max || isBefore(date, max) || isWithinInterval(max, { start, end });
+  },
+  canPrev(context) {
+    const min = context.min.value;
+    const date = this.getPrevCursor(context);
+    const start = startOfMonth(date);
+    const end = endOfMonth(date);
+    return !min || isAfter(date, min) || isWithinInterval(min, { start, end });
+  },
+  setValue(value, lastValue) {
+    return isDate(lastValue) ? set(lastValue, {
+      year: value.getFullYear(),
+      month: value.getMonth(),
+      date: value.getDate()
+    }) : value;
+  }
+});

package/dist/components/calendar/adapter/month.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./adapter").CalendarAdapter;
+export default _default;