@privyid/persona 1.1.2 → 1.2.1

package/dist/components/calendar/Calendar.vue

@@ -1,465 +0,0 @@
-<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 lang="ts" 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 type { PropType } from 'vue-demi'
-import {
-  ref,
-  computed,
-  watch,
-} from 'vue-demi'
-import type {
-  CalendarAdapter,
-  CalendarContext,
-  CalendarItem,
-  CalendarMode,
-} from './adapter/adapter'
-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: Record<CalendarMode, CalendarAdapter> = {
-  date : DateAdapter,
-  month: MonthAdapter,
-  year : YearAdapter,
-}
-
-type TransitionMode = 'slide-left' | 'slide-right' | 'zoom-in' | 'zoom-out'
-
-const props = defineProps({
-  modelValue: {
-    type   : [Date, Array] as PropType<Date | [Date, Date]>,
-    default: undefined,
-  },
-  start: {
-    type   : Date,
-    default: undefined,
-  },
-  end: {
-    type   : Date,
-    default: undefined,
-  },
-  disabled: {
-    type   : Boolean,
-    default: undefined,
-  },
-  readonly: {
-    type   : Boolean,
-    default: undefined,
-  },
-  min: {
-    type   : Date,
-    default: () => new Date(MIN_TIME),
-  },
-  max: {
-    type   : Date,
-    default: () => new Date(MAX_TIME),
-  },
-  mode: {
-    type   : String as PropType<CalendarMode>,
-    default: 'date',
-  },
-  range: {
-    type   : Boolean,
-    default: false,
-  },
-  minRange: {
-    type   : String,
-    default: undefined,
-    validator (value: string) {
-      return validateDuration(value)
-    },
-  },
-  maxRange: {
-    type   : String,
-    default: undefined,
-    validator (value: string) {
-      return validateDuration(value)
-    },
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [unknown],
-  'update:start': [Date],
-  'update:end': [Date],
-  'change': [unknown],
-}>()
-
-const viewmode   = ref<CalendarMode>(props.mode)
-const transition = ref<TransitionMode>('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))
-
-/**
- * v-model:start
- */
-const vStart = computed({
-  get () {
-    return Array.isArray(props.modelValue)
-      ? props.modelValue?.[0]
-      : (props.start ?? props.modelValue)
-  },
-  set (value: Date) {
-    emit('update:start', value)
-  },
-})
-
-/**
- * v-model:end
- */
-const vEnd = computed({
-  get () {
-    return Array.isArray(props.modelValue)
-      ? props.modelValue?.[1]
-      : (props.end ?? props.modelValue)
-  },
-  set (value: Date) {
-    emit('update:end', value)
-  },
-})
-
-const cursor = ref(startOfMonth(localStart.value ?? new Date()))
-const hover  = ref<Date>()
-
-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: CalendarContext = {
-  cursor: cursor,
-  start : localStart,
-  end   : localEnd,
-  min   : min,
-  max   : 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: CalendarItem) {
-  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   = undefined
-    }
-  } else {
-    cursor.value = item.value
-
-    changeMode(-1)
-  }
-}
-
-function setHover (item: CalendarItem) {
-  if (props.range && !item.readonly && !item.disabled)
-    hover.value = item.value
-}
-
-function isInRange (item: CalendarItem) {
-  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 })
-
-/**
- * syncRef between v-model:start + v-model:end to v-model
- */
-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, cursor], [vmOld, cursorOld]) => {
-  const mode = CalendarFormat.indexOf(vm) - CalendarFormat.indexOf(vmOld)
-
-  if (mode === 0)
-    transition.value = cursor > 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/adapter/adapter.d.ts

@@ -1,32 +0,0 @@
-import type { Ref } from 'vue-demi';
-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

@@ -1,43 +0,0 @@
-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

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

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

@@ -1,86 +0,0 @@
-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

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

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

@@ -1,66 +0,0 @@
-import {
-  addYears,
-  eachMonthOfInterval,
-  endOfYear,
-  isAfter,
-  isBefore,
-  isDate,
-  isSameMonth,
-  isWithinInterval,
-  set,
-  startOfYear,
-  subYears
-} from "date-fns";
-import { defineAdapter } from "./adapter.mjs";
-import { formatDate } from "../../utils/date.mjs";
-function getInterval(date) {
-  const start = startOfYear(date);
-  const end = endOfYear(date);
-  return {
-    start,
-    end
-  };
-}
-export default defineAdapter({
-  getItems({ cursor, start, end, min, max }) {
-    return eachMonthOfInterval(getInterval(cursor.value)).map((date) => {
-      const isDisabled = !isSameMonth(min.value, date) && !isSameMonth(max.value, date) && !isWithinInterval(date, { start: min.value, end: max.value });
-      const isHead = isSameMonth(start.value, date);
-      const isTail = isSameMonth(end.value, date);
-      return {
-        value: date,
-        text: formatDate(date, "MMM"),
-        disabled: isDisabled,
-        readonly: false,
-        head: isHead,
-        tail: isTail,
-        active: isHead || isTail
-      };
-    });
-  },
-  getTitle({ cursor }) {
-    return cursor.value.getFullYear().toString();
-  },
-  getNextCursor({ cursor }) {
-    return addYears(cursor.value, 1);
-  },
-  getPrevCursor({ cursor }) {
-    return subYears(cursor.value, 1);
-  },
-  canNext(context) {
-    const max = context.max.value;
-    const date = this.getNextCursor(context);
-    return !max || isBefore(date, max) || isWithinInterval(max, getInterval(date));
-  },
-  canPrev(context) {
-    const min = context.min.value;
-    const date = this.getPrevCursor(context);
-    return !min || isAfter(date, min) || isWithinInterval(min, getInterval(date));
-  },
-  setValue(value, lastValue) {
-    return isDate(lastValue) ? set(lastValue, {
-      year: value.getFullYear(),
-      month: value.getMonth()
-    }) : value;
-  }
-});

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

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