@privyid/persona 0.15.0 → 0.16.0

package/dist/components/avatar/Avatar.vue.d.ts

@@ -22,7 +22,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     imgClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
 }, {
@@ -51,7 +51,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     imgClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
 }>> & {
@@ -60,9 +60,9 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     name: string;
     variant: TypeVariant;
+    size: SizeVariant;
     src: string;
     fallbackSrc: string;
-    size: SizeVariant;
     imgClass: string | Record<string, any> | unknown[];
 }, {}>;
 export default _default;

package/dist/components/button/Button.vue.d.ts

@@ -55,10 +55,10 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>>, {
     variant: StyleVariant;
-    size: SizeVariant;
-    href: string;
-    color: ColorVariant;
     icon: boolean;
+    color: ColorVariant;
+    href: string;
+    size: SizeVariant;
     pill: boolean;
 }, {}>;
 export default _default;

package/dist/components/calendar/Calendar.vue

@@ -1,12 +1,12 @@
 <template>
-  <Card
+  <p-card
     data-testid="calendar"
     class="calendar"
     element="div"
     :viewmode="viewmode"
     :class="classNames">
     <div class="calendar__nav">
-      <Button
+      <p-button
         data-testid="calendar-prev"
         variant="solid"
         icon
@@ -14,18 +14,18 @@
         :readonly="disabled || readonly"
         @click="prev">
         <IconBack />
-      </Button>
+      </p-button>
 
-      <Button
+      <p-button
         data-testid="calendar-title"
         class="calendar__nav-title"
         variant="solid"
         :readonly="disabled || readonly"
         @click="changeMode(1)">
         {{ title }}
-      </Button>
+      </p-button>
 
-      <Button
+      <p-button
         data-testid="calendar-next"
         variant="solid"
         icon
@@ -33,7 +33,7 @@
         :disabled="!canNext"
         @click="next">
         <IconNext />
-      </Button>
+      </p-button>
     </div>
 
     <Transition
@@ -47,41 +47,57 @@
         <template
           v-for="(item, i) in items"
           :key="i">
-          <Button
+          <p-button
             variant="solid"
             data-testid="calendar-item"
             :readonly="item.readonly || disabled || readonly"
             :active="item.active"
             :disabled="item.disabled"
-            @click="selectItem(item)">
+            :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 }}
-          </Button>
+          </p-button>
         </template>
       </div>
     </Transition>
-  </Card>
+  </p-card>
 </template>
 
 <script>
-import Button from "../button/Button.vue";
-import Card from "../card/Card.vue";
-import IconNext from "@carbon/icons-vue/lib/chevron--right/20";
-import IconBack from "@carbon/icons-vue/lib/chevron--left/20";
+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 {
   defineComponent,
   ref,
   computed,
-  watch,
-  toRef
+  watch
 } from "vue-demi";
 import {
-  CalendarFormat
+  CalendarFormat,
+  validateDuration,
+  parseDuration
 } 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";
+import {
+  isWithinInterval,
+  startOfMonth,
+  min as minDate,
+  max as maxDate,
+  minTime as MIN_TIME,
+  maxTime as MAX_TIME,
+  add,
+  sub
+} from "date-fns";
+import { syncRef } from "@vueuse/core";
 const Adapters = {
   date: DateAdapter,
   month: MonthAdapter,
@@ -89,14 +105,21 @@ const Adapters = {
 };
 export default defineComponent({
   components: {
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Button,
-    Card,
+    pButton,
+    pCard,
     IconNext,
     IconBack
   },
   props: {
     modelValue: {
+      type: [Date, Array],
+      default: void 0
+    },
+    start: {
+      type: Date,
+      default: void 0
+    },
+    end: {
       type: Date,
       default: void 0
     },
@@ -108,30 +131,81 @@ export default defineComponent({
       type: Boolean,
       default: void 0
     },
-    max: {
+    min: {
       type: Date,
-      default: void 0
+      default: () => new Date(MIN_TIME)
     },
-    min: {
+    max: {
       type: Date,
-      default: void 0
+      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);
+      }
     }
   },
-  emits: ["update:modelValue", "change"],
+  emits: [
+    "update:modelValue",
+    "update:start",
+    "update:end",
+    "change"
+  ],
   setup(props, { emit }) {
     const viewmode = ref(props.mode);
     const transition = ref("slide-left");
-    const cursor = ref(startOfMonth(props.modelValue ?? /* @__PURE__ */ new Date()));
-    const model = useVModel(props);
+    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,
-      model,
-      min: toRef(props, "min"),
-      max: toRef(props, "max")
+      start: localStart,
+      end: localEnd,
+      min,
+      max
     };
     const adapter = computed(() => {
       return Adapters[viewmode.value];
@@ -154,6 +228,8 @@ export default defineComponent({
         result.push("calendar--disabled");
       if (props.readonly)
         result.push("calendar--readonly");
+      if (props.range)
+        result.push("calendar--range");
       return result;
     });
     function next() {
@@ -174,13 +250,44 @@ export default defineComponent({
     }
     function selectItem(item) {
       if (viewmode.value === props.mode) {
-        model.value = item.value;
-        emit("change", item.value);
+        if (props.range && (localStart.value && !localEnd.value)) {
+          localEnd.value = maxDate([localStart.value, item.value]);
+          localStart.value = minDate([localStart.value, item.value]);
+        } else {
+          localStart.value = item.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);
+    syncRef(localEnd, vEnd);
+    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);
@@ -206,7 +313,9 @@ export default defineComponent({
       next,
       prev,
       changeMode,
-      selectItem
+      selectItem,
+      isInRange,
+      setHover
     };
   }
 });
@@ -245,6 +354,11 @@ export default defineComponent({
         @apply text-muted;
         @apply dark:text-dark-muted;
       }
+
+      &.calendar__item--in-range {
+        @apply bg-info rounded-none;
+        @apply dark:bg-dark-info;
+      }
     }
 
     &[readonly] {
@@ -254,7 +368,7 @@ export default defineComponent({
 
   .calendar__items {
     &[viewmode="date"] {
-      @apply grid grid-cols-7 gap-1;
+      @apply grid grid-cols-7 gap-y-1;
 
       .btn--md {
         @apply p-1 md:p-2;
@@ -267,13 +381,23 @@ export default defineComponent({
 
     &[viewmode="month"],
     &[viewmode="year"] {
-      @apply grid grid-cols-4 gap-1;
+      @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;
   }

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

@@ -3,6 +3,14 @@ import { CalendarItem } from './adapter/adapter';
 type TransitionMode = 'slide-left' | 'slide-right' | 'zoom-in' | 'zoom-out';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
+        type: PropType<Date | [Date, Date]>;
+        default: undefined;
+    };
+    start: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    end: {
         type: DateConstructor;
         default: undefined;
     };
@@ -14,18 +22,32 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    max: {
+    min: {
         type: DateConstructor;
-        default: undefined;
+        default: () => Date;
     };
-    min: {
+    max: {
         type: DateConstructor;
-        default: undefined;
+        default: () => Date;
     };
     mode: {
         type: PropType<"date" | "month" | "year">;
         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;
+    };
 }, {
     transition: import("vue-demi").Ref<TransitionMode>;
     title: import("vue-demi").ComputedRef<string>;
@@ -102,8 +124,18 @@ declare const _default: import("vue-demi").DefineComponent<{
     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<{
+    isInRange: (item: CalendarItem) => boolean;
+    setHover: (item: CalendarItem) => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:start" | "update:end")[], "change" | "update:modelValue" | "update:start" | "update:end", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
+        type: PropType<Date | [Date, Date]>;
+        default: undefined;
+    };
+    start: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    end: {
         type: DateConstructor;
         default: undefined;
     };
@@ -115,27 +147,48 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    max: {
+    min: {
         type: DateConstructor;
-        default: undefined;
+        default: () => Date;
     };
-    min: {
+    max: {
         type: DateConstructor;
-        default: undefined;
+        default: () => Date;
     };
     mode: {
         type: PropType<"date" | "month" | "year">;
         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;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:start"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:end"?: ((...args: any[]) => any) | undefined;
 }, {
+    start: Date;
+    end: Date;
     min: Date;
     max: Date;
-    modelValue: Date;
+    modelValue: Date | [Date, Date];
     disabled: boolean;
     readonly: boolean;
     mode: "date" | "month" | "year";
+    range: boolean;
+    minRange: string;
+    maxRange: string;
 }, {}>;
 export default _default;

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

@@ -1,16 +1,20 @@
 import { Ref } from 'vue-demi';
+import { 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>;
-    model: Ref<Date>;
-    max: Ref<Date | undefined>;
+    start: Ref<Date>;
+    end: Ref<Date>;
     min: Ref<Date | undefined>;
+    max: Ref<Date | undefined>;
 }
 export interface CalendarAdapter {
     getItems: (this: this, context: CalendarContext) => CalendarItem[];
@@ -30,3 +34,5 @@ export declare function defineAdapter(adapter: CalendarAdapter): CalendarAdapter
  * @param formatStr date format
  */
 export declare function formatDate(date: Date, formatStr: string): string;
+export declare function validateDuration(duration?: string): boolean;
+export declare function parseDuration(duration?: string): Duration | undefined;

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

@@ -1,7 +1,10 @@
-import { format } from "date-fns";
+import {
+  format
+} from "date-fns";
 import id from "date-fns/locale/id/index";
 import en from "date-fns/locale/en-US/index";
 import { getLang } from "../../global/context.mjs";
+import { chunk } from "lodash-es";
 const localePacks = { en, id };
 export const CalendarFormat = [
   "date",
@@ -14,3 +17,37 @@ export function defineAdapter(adapter) {
 export function formatDate(date, formatStr) {
   return format(date, formatStr, { locale: localePacks[getLang()] });
 }
+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.mjs

@@ -10,9 +10,7 @@ import {
   subMonths,
   isAfter,
   isBefore,
-  isWithinInterval,
-  minTime,
-  maxTime
+  isWithinInterval
 } from "date-fns";
 import {
   defineAdapter,
@@ -27,16 +25,18 @@ function getInterval(date) {
   };
 }
 export default defineAdapter({
-  getItems({ cursor, model, min, max }) {
+  getItems({ cursor, start, end, 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 });
+      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,
-        active: isSameDay(model.value, date),
+        head: isHead,
+        tail: isTail,
+        active: isHead || isTail,
         readonly: false
       };
     });
@@ -46,6 +46,8 @@ export default defineAdapter({
         text: formatDate(item.value, "EEEEEE"),
         disabled: false,
         readonly: true,
+        head: false,
+        tail: false,
         active: false
       };
     });

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

@@ -6,12 +6,13 @@ import {
   isBefore,
   isSameMonth,
   isWithinInterval,
-  maxTime,
-  minTime,
   startOfYear,
   subYears
 } from "date-fns";
-import { defineAdapter, formatDate } from "./adapter.mjs";
+import {
+  defineAdapter,
+  formatDate
+} from "./adapter.mjs";
 function getInterval(date) {
   const start = startOfYear(date);
   const end = endOfYear(date);
@@ -21,17 +22,19 @@ function getInterval(date) {
   };
 }
 export default defineAdapter({
-  getItems({ cursor, model, min, max }) {
+  getItems({ cursor, start, end, 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 });
+      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,
-        active: isSameMonth(model.value, date)
+        head: isHead,
+        tail: isTail,
+        active: isHead || isTail
       };
     });
   },