@privyid/persona 1.2.0 → 1.2.1-rc.0

package/dist/components/calendar/Calendar.vue

@@ -1,396 +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 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-demi";
-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

@@ -1,120 +0,0 @@
-import type { PropType } from 'vue-demi';
-import type { CalendarMode } from './adapter/adapter';
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").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-demi").ComponentOptionsMixin, import("vue-demi").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-demi").PublicProps, Readonly<import("vue-demi").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-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

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/adapter.spec.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,32 +0,0 @@
-import { parseDuration, validateDuration } from "./adapter.mjs";
-describe("validateDuration", () => {
-  const cases = [
-    ["", false],
-    ["4H", true],
-    ["8D7H", true],
-    ["8D7H30m", true],
-    ["DD", false],
-    ["88", false],
-    ["8D77", false],
-    ["8DHH77", false],
-    ["-4H", true],
-    ["1W-1D", true]
-  ];
-  it.each(cases)('"%s" should return "%s"', (input, expected) => {
-    expect(validateDuration(input)).toBe(expected);
-  });
-});
-describe("parseDuration", () => {
-  it("should able to parse single value", () => {
-    expect(parseDuration("4H")).toStrictEqual({ hours: 4 });
-  });
-  it("should able to parse multiple value", () => {
-    expect(parseDuration("1W4D")).toStrictEqual({ weeks: 1, days: 4 });
-  });
-  it("should sum value of multiple value with same token (suffix)", () => {
-    expect(parseDuration("3D4D")).toStrictEqual({ days: 7 });
-  });
-  it("should able to use negative value", () => {
-    expect(parseDuration("1W-1D")).toStrictEqual({ weeks: 1, days: -1 });
-  });
-});

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

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