@privyid/persona 0.3.0

package/dist/components/calendar/Calendar.vue

@@ -0,0 +1,279 @@
+<template>
+  <div
+    data-testid="calendar"
+    class="calendar"
+    :viewmode="viewmode"
+    :class="classNames">
+    <div class="calendar__nav">
+      <Button
+        data-testid="calendar-prev"
+        variant="solid"
+        icon
+        size="sm"
+        :disabled="!canPrev"
+        :readonly="disabled || readonly"
+        @click="prev">
+        <IconBack />
+      </Button>
+
+      <Button
+        data-testid="calendar-title"
+        class="calendar__nav-title"
+        variant="solid"
+        size="sm"
+        :readonly="disabled || readonly"
+        @click="changeMode(1)">
+        {{ title }}
+      </Button>
+
+      <Button
+        data-testid="calendar-next"
+        variant="solid"
+        icon
+        size="sm"
+        :readonly="disabled || readonly"
+        :disabled="!canNext"
+        @click="next">
+        <IconNext />
+      </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">
+          <Button
+            variant="solid"
+            icon
+            data-testid="calendar-item"
+            :readonly="item.readonly || disabled || readonly"
+            :active="item.active"
+            :disabled="item.disabled"
+            @click="selectItem(item)">
+            {{ item.text }}
+          </Button>
+        </template>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script>
+import Button from "../button/Button.vue";
+import IconNext from "@carbon/icons-vue/lib/chevron--right/20";
+import IconBack from "@carbon/icons-vue/lib/chevron--left/20";
+import {
+  defineComponent,
+  ref,
+  computed,
+  watch,
+  toRef
+} from "vue-demi";
+import {
+  CalendarFormat
+} from "./adapter/adapter";
+import DateAdapter from "./adapter/date";
+import MonthAdapter from "./adapter/month";
+import YearAdapter from "./adapter/year";
+import { startOfMonth } from "date-fns";
+import { useVModel } from "../input/use-input";
+const Adapters = {
+  date: DateAdapter,
+  month: MonthAdapter,
+  year: YearAdapter
+};
+export default defineComponent({
+  components: {
+    Button,
+    IconNext,
+    IconBack
+  },
+  props: {
+    modelValue: {
+      type: Date,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    readonly: {
+      type: Boolean,
+      default: void 0
+    },
+    max: {
+      type: Date,
+      default: void 0
+    },
+    min: {
+      type: Date,
+      default: void 0
+    },
+    mode: {
+      type: String,
+      default: "date"
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit }) {
+    const viewmode = ref(props.mode);
+    const transition = ref("slide-left");
+    const cursor = ref(startOfMonth(props.modelValue ?? new Date()));
+    const model = useVModel(props);
+    const context = {
+      cursor,
+      model,
+      min: toRef(props, "min"),
+      max: toRef(props, "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");
+      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) {
+        model.value = item.value;
+        emit("change", item.value);
+      } else {
+        cursor.value = item.value;
+        changeMode(-1);
+      }
+    }
+    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 = mode > 0 ? "zoom-out" : "zoom-in";
+      else
+        transition.value = cursor2 > cursorOld ? "slide-left" : "slide-right";
+    });
+    return {
+      transition,
+      title,
+      items,
+      viewmode,
+      cursor,
+      canNext,
+      canPrev,
+      classNames,
+      next,
+      prev,
+      changeMode,
+      selectItem
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.calendar {
+  @apply p-2 md:p-4 bg-white flex flex-col gap-2 text-sm;
+
+  &__nav {
+    @apply flex justify-between gap-2;
+
+    &-title {
+      @apply flex-grow;
+    }
+  }
+
+  .btn--solid {
+    @apply border-0 justify-center bg-transparent text-body-100;
+
+    &:hover,
+    &:focus,
+    &:active {
+      @apply text-white;
+    }
+
+    &[readonly] {
+      @apply pointer-events-none;
+    }
+
+    &[active="true"] {
+      @apply bg-primary-100 text-white;
+
+      &:active {
+        @apply bg-primary-focused;
+      }
+    }
+  }
+
+  .calendar__items {
+    .btn--outline {
+      @apply font-normal;
+    }
+
+    &[viewmode="date"] {
+      @apply grid grid-cols-7 gap-1;
+
+      .btn--md {
+        @apply p-1 md:p-2;
+      }
+
+      .btn--outline:nth-child(-n+7) {
+        @apply font-medium;
+      }
+    }
+
+    &[viewmode="month"],
+    &[viewmode="year"] {
+      @apply grid grid-cols-4 gap-1;
+      .btn--md {
+        @apply px-3;
+      }
+    }
+  }
+
+  &--disabled {
+    @apply opacity-50;
+  }
+}
+</style>

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

@@ -0,0 +1,141 @@
+import { PropType } from 'vue-demi';
+import { CalendarItem } from './adapter/adapter';
+declare type TransitionMode = 'slide-left' | 'slide-right' | 'zoom-in' | 'zoom-out';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: DateConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    max: {
+        type: DateConstructor;
+        default: any;
+    };
+    min: {
+        type: DateConstructor;
+        default: any;
+    };
+    mode: {
+        type: PropType<"date" | "month" | "year">;
+        default: string;
+    };
+}, {
+    transition: import("vue-demi").Ref<TransitionMode>;
+    title: import("vue-demi").ComputedRef<string>;
+    items: import("vue-demi").ComputedRef<CalendarItem[]>;
+    viewmode: import("vue-demi").Ref<"date" | "month" | "year">;
+    cursor: import("vue-demi").Ref<{
+        toString: () => string;
+        toDateString: () => string;
+        toTimeString: () => string;
+        toLocaleString: {
+            (): string;
+            (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+        };
+        toLocaleDateString: {
+            (): string;
+            (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+        };
+        toLocaleTimeString: {
+            (): string;
+            (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+        };
+        valueOf: () => number;
+        getTime: () => number;
+        getFullYear: () => number;
+        getUTCFullYear: () => number;
+        getMonth: () => number;
+        getUTCMonth: () => number;
+        getDate: () => number;
+        getUTCDate: () => number;
+        getDay: () => number;
+        getUTCDay: () => number;
+        getHours: () => number;
+        getUTCHours: () => number;
+        getMinutes: () => number;
+        getUTCMinutes: () => number;
+        getSeconds: () => number;
+        getUTCSeconds: () => number;
+        getMilliseconds: () => number;
+        getUTCMilliseconds: () => number;
+        getTimezoneOffset: () => number;
+        setTime: (time: number) => number;
+        setMilliseconds: (ms: number) => number;
+        setUTCMilliseconds: (ms: number) => number;
+        setSeconds: (sec: number, ms?: number) => number;
+        setUTCSeconds: (sec: number, ms?: number) => number;
+        setMinutes: (min: number, sec?: number, ms?: number) => number;
+        setUTCMinutes: (min: number, sec?: number, ms?: number) => number;
+        setHours: (hours: number, min?: number, sec?: number, ms?: number) => number;
+        setUTCHours: (hours: number, min?: number, sec?: number, ms?: number) => number;
+        setDate: (date: number) => number;
+        setUTCDate: (date: number) => number;
+        setMonth: (month: number, date?: number) => number;
+        setUTCMonth: (month: number, date?: number) => number;
+        setFullYear: (year: number, month?: number, date?: number) => number;
+        setUTCFullYear: (year: number, month?: number, date?: number) => number;
+        toUTCString: () => string;
+        toISOString: () => string;
+        toJSON: (key?: any) => string;
+        getVarDate: () => VarDate;
+        [Symbol.toPrimitive]: {
+            (hint: "default"): string;
+            (hint: "string"): string;
+            (hint: "number"): number;
+            (hint: string): string | number;
+        };
+    }>;
+    canNext: import("vue-demi").ComputedRef<boolean>;
+    canPrev: import("vue-demi").ComputedRef<boolean>;
+    classNames: import("vue-demi").ComputedRef<any[]>;
+    next: () => void;
+    prev: () => void;
+    changeMode: (step?: number) => void;
+    selectItem: (item: CalendarItem) => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: DateConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    max: {
+        type: DateConstructor;
+        default: any;
+    };
+    min: {
+        type: DateConstructor;
+        default: any;
+    };
+    mode: {
+        type: PropType<"date" | "month" | "year">;
+        default: string;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    disabled: boolean;
+    min: Date;
+    max: Date;
+    modelValue: Date;
+    readonly: boolean;
+    mode: "date" | "month" | "year";
+}>;
+export default _default;

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

@@ -0,0 +1,25 @@
+import { Ref } from 'vue-demi';
+export interface CalendarItem {
+    value: Date;
+    text: string;
+    disabled: boolean;
+    readonly: boolean;
+    active: boolean;
+}
+export interface CalendarContext {
+    cursor: Ref<Date>;
+    model: Ref<Date>;
+    max: Ref<Date | undefined>;
+    min: 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;
+}
+export declare const CalendarFormat: readonly ["date", "month", "year"];
+export declare type CalendarMode = typeof CalendarFormat[number];
+export declare function defineAdapter(adapter: CalendarAdapter): CalendarAdapter;

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

@@ -0,0 +1,8 @@
+export const CalendarFormat = [
+  "date",
+  "month",
+  "year"
+];
+export function defineAdapter(adapter) {
+  return adapter;
+}

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,75 @@
+import {
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  isSameDay,
+  isSameMonth,
+  startOfMonth,
+  startOfWeek,
+  format,
+  addMonths,
+  subMonths,
+  isAfter,
+  isBefore,
+  isWithinInterval,
+  minTime,
+  maxTime
+} from "date-fns";
+import { defineAdapter } from "./adapter.mjs";
+function getInterval(date) {
+  const start = startOfWeek(startOfMonth(date), { weekStartsOn: 1 });
+  const end = endOfWeek(endOfMonth(date), { weekStartsOn: 1 });
+  return {
+    start,
+    end
+  };
+}
+export default defineAdapter({
+  getItems({ cursor, model, min, max }) {
+    const dates = eachDayOfInterval(getInterval(cursor.value)).map((date) => {
+      const start = min.value ?? minTime;
+      const end = max.value ?? maxTime;
+      const isDisabled = !isSameMonth(cursor.value, date) || !isWithinInterval(date, { start, end });
+      return {
+        value: date,
+        text: date.getDate().toString(),
+        disabled: isDisabled,
+        active: isSameDay(model.value, date),
+        readonly: false
+      };
+    });
+    const days = dates.slice(0, 7).map((item) => {
+      return {
+        value: item.value,
+        text: format(item.value, "EEEEEE"),
+        disabled: false,
+        readonly: true,
+        active: false
+      };
+    });
+    return [...days, ...dates];
+  },
+  getTitle({ cursor }) {
+    return format(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 });
+  }
+});

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

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

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

@@ -0,0 +1,58 @@
+import {
+  addYears,
+  eachMonthOfInterval,
+  endOfYear,
+  format,
+  isAfter,
+  isBefore,
+  isSameMonth,
+  isWithinInterval,
+  maxTime,
+  minTime,
+  startOfYear,
+  subYears
+} from "date-fns";
+import { defineAdapter } from "./adapter.mjs";
+function getInterval(date) {
+  const start = startOfYear(date);
+  const end = endOfYear(date);
+  return {
+    start,
+    end
+  };
+}
+export default defineAdapter({
+  getItems({ cursor, model, min, max }) {
+    return eachMonthOfInterval(getInterval(cursor.value)).map((date) => {
+      const start = min.value ?? minTime;
+      const end = max.value ?? maxTime;
+      const isDisabled = !isSameMonth(start, date) && !isSameMonth(end, date) && !isWithinInterval(date, { start, end });
+      return {
+        value: date,
+        text: format(date, "MMM"),
+        disabled: isDisabled,
+        readonly: false,
+        active: isSameMonth(model.value, date)
+      };
+    });
+  },
+  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));
+  }
+});

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

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

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

@@ -0,0 +1,58 @@
+import { defineAdapter } from "./adapter.mjs";
+import {
+  addYears,
+  eachYearOfInterval,
+  endOfDecade,
+  isAfter,
+  isBefore,
+  isSameYear,
+  isWithinInterval,
+  maxTime,
+  minTime,
+  startOfDecade,
+  subYears
+} from "date-fns";
+function getInterval(date) {
+  const start = startOfDecade(date);
+  const end = endOfDecade(date);
+  return {
+    start,
+    end
+  };
+}
+export default defineAdapter({
+  getItems({ cursor, model, min, max }) {
+    return eachYearOfInterval(getInterval(cursor.value)).map((date) => {
+      const start = min.value ?? minTime;
+      const end = max.value ?? maxTime;
+      const isDisabled = !isSameYear(start, date) && !isSameYear(end, date) && !isWithinInterval(date, { start, end });
+      return {
+        value: date,
+        text: date.getFullYear().toString(),
+        disabled: isDisabled,
+        readonly: false,
+        active: isSameYear(model.value, date)
+      };
+    });
+  },
+  getTitle({ cursor }) {
+    const { start, end } = getInterval(cursor.value);
+    return `${start.getFullYear()} - ${end.getFullYear()}`;
+  },
+  getNextCursor({ cursor }) {
+    return startOfDecade(addYears(cursor.value, 10));
+  },
+  getPrevCursor({ cursor }) {
+    return startOfDecade(subYears(cursor.value, 10));
+  },
+  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));
+  }
+});

package/dist/components/caption/Caption.vue

@@ -0,0 +1,38 @@
+<template>
+  <span
+    data-testid="caption"
+    :class="classNames">
+    <slot />
+  </span>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue-demi";
+export default defineComponent({
+  props: {
+    bold: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const classNames = computed(() => {
+      const result = ["caption"];
+      if (props.bold)
+        result.push("caption--bold");
+      return result;
+    });
+    return { classNames };
+  }
+});
+</script>
+
+<style lang="postcss">
+.caption {
+  @apply block text-subtext-100 text-sm;
+
+  &--bold {
+    @apply font-bold;
+  }
+}
+</style>