@privyid/persona 1.2.0 → 1.2.1

package/dist/components/time/Time.vue.d.ts

@@ -1,104 +0,0 @@
-import type { PropType } from 'vue-demi';
-import type { TimeModel, TimeContext } from './index';
-declare function confirm(): void;
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            confirm: typeof confirm;
-        }): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<Date | TimeModel>;
-        default: undefined;
-    };
-    timeSeparator: {
-        type: StringConstructor;
-        default: string;
-    };
-    is12Hour: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    hourInterval: {
-        type: NumberConstructor;
-        default: number;
-        validator: (value: number, prop: {
-            [x: string]: unknown;
-        }) => boolean;
-    };
-    minuteInterval: {
-        type: NumberConstructor;
-        default: number;
-        validator: (value: number) => boolean;
-    };
-    min: {
-        type: DateConstructor;
-        default: undefined;
-    };
-    max: {
-        type: DateConstructor;
-        default: undefined;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: unknown) => void;
-    change: (args_0: TimeContext) => void;
-    context: (args_0: TimeContext) => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<Date | TimeModel>;
-        default: undefined;
-    };
-    timeSeparator: {
-        type: StringConstructor;
-        default: string;
-    };
-    is12Hour: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    hourInterval: {
-        type: NumberConstructor;
-        default: number;
-        validator: (value: number, prop: {
-            [x: string]: unknown;
-        }) => boolean;
-    };
-    minuteInterval: {
-        type: NumberConstructor;
-        default: number;
-        validator: (value: number) => boolean;
-    };
-    min: {
-        type: DateConstructor;
-        default: undefined;
-    };
-    max: {
-        type: DateConstructor;
-        default: undefined;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
-    onChange?: ((args_0: TimeContext) => any) | undefined;
-    onContext?: ((args_0: TimeContext) => any) | undefined;
-}>, {
-    modelValue: Date | TimeModel;
-    max: Date;
-    min: Date;
-    timeSeparator: string;
-    is12Hour: boolean;
-    hourInterval: number;
-    minuteInterval: number;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/time/TimeItem.vue

@@ -1,96 +0,0 @@
-<template>
-  <div
-    ref="container"
-    class="time__items splide"
-    :class="`time__times--${timeType}`">
-    <div class="splide__track">
-      <div class="splide__list">
-        <div
-          v-for="option in options"
-          :key="option"
-          class="time__item splide__slide">
-          {{ option }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {
-  ref,
-  onMounted,
-  watch,
-  computed
-} from "vue-demi";
-import { watchDebounced } from "@vueuse/core";
-import { useTime } from "./index";
-import { useVModel } from "../input";
-import "@splidejs/splide/css/core";
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: "00"
-  },
-  timeType: {
-    type: String,
-    default: "hour"
-  },
-  options: {
-    type: Array,
-    default: () => []
-  }
-});
-const { splide, activeSplide, initSplide } = useTime();
-const model = useVModel(props);
-const container = ref();
-const timeOptions = computed(() => props.options);
-watch(activeSplide, (value) => {
-  model.value = props.options[value];
-});
-watchDebounced(timeOptions, (value) => {
-  if (!splide.value)
-    return;
-  const splideOptions = {
-    ...splide.value.options,
-    clones: value.length === 1 ? 0 : void 0
-  };
-  splide.value.options = splideOptions;
-  splide.value.refresh();
-  if (!value.includes(model.value))
-    model.value = value[0];
-}, { flush: "post", debounce: 50 });
-onMounted(async () => {
-  if (container.value) {
-    const splideOptions = {
-      start: timeOptions.value.indexOf(model.value),
-      type: props.timeType === "ampm" ? "slide" : "loop"
-    };
-    await initSplide(container, splideOptions);
-  }
-  splide.value?.on("refresh", () => {
-    const index = timeOptions.value.indexOf(model.value);
-    splide.value?.go(index === -1 ? 0 : index);
-  });
-});
-</script>
-
-<style lang="postcss">
-.time {
-  &__items {
-    &:before {
-      @apply absolute content-[''] w-[42px] h-12 border-default dark:border-dark-default border-y;
-      @apply top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%];
-    }
-  }
-
-  &__item {
-    @apply text-center px-2.5 py-3 text-subtle dark:text-dark-subtle cursor-pointer;
-    @apply transition-[color] duration-[50ms];
-
-    &.is-active {
-      @apply text-default dark:text-dark-default font-medium cursor-default;
-    }
-  }
-}
-</style>

package/dist/components/time/TimeItem.vue.d.ts

@@ -1,61 +0,0 @@
-import type { PropType } from 'vue-demi';
-import '@splidejs/splide/css/core';
-type TimeType = 'hour' | 'minute' | 'ampm';
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: string;
-    };
-    timeType: {
-        type: PropType<TimeType>;
-        default: string;
-    };
-    options: {
-        type: {
-            (arrayLength: number): string[];
-            (...items: string[]): string[];
-            new (arrayLength: number): string[];
-            new (...items: string[]): string[];
-            isArray(arg: any): arg is any[];
-            readonly prototype: any[];
-            from<T>(arrayLike: ArrayLike<T>): T[];
-            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
-            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            of<T>(...items: T[]): T[];
-            readonly [Symbol.species]: ArrayConstructor;
-        };
-        default: () => never[];
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: string;
-    };
-    timeType: {
-        type: PropType<TimeType>;
-        default: string;
-    };
-    options: {
-        type: {
-            (arrayLength: number): string[];
-            (...items: string[]): string[];
-            new (arrayLength: number): string[];
-            new (...items: string[]): string[];
-            isArray(arg: any): arg is any[];
-            readonly prototype: any[];
-            from<T>(arrayLike: ArrayLike<T>): T[];
-            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
-            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            of<T>(...items: T[]): T[];
-            readonly [Symbol.species]: ArrayConstructor;
-        };
-        default: () => never[];
-    };
-}>> & Readonly<{}>, {
-    modelValue: string;
-    options: string[];
-    timeType: TimeType;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/time/index.d.ts

@@ -1,19 +0,0 @@
-import type { MaybeRef } from '@vueuse/core';
-import type { Options, Splide } from '@splidejs/splide';
-export type TimeLimitation = Date | TimeModel | undefined;
-export interface TimeModel {
-    hh: string;
-    mm: string;
-    a?: 'AM' | 'PM' | '-';
-}
-export interface TimeContext {
-    time: string;
-    date: Date;
-    dateISO: string;
-}
-export declare function useTime(): {
-    splide: import("vue-demi").Ref<Splide | undefined, Splide | undefined>;
-    activeSplide: import("vue-demi").Ref<number, number>;
-    initSplide: (element: MaybeRef<HTMLDivElement>, options?: Options) => Promise<void>;
-    initSplideEvent: () => void;
-};

package/dist/components/time/index.md

@@ -1,247 +0,0 @@
----
-title: Time · Components
-description: Sub-component for Timepicker
----
-
-<script setup>
-  import pTime from "./Time.vue"
-  import pToggle from '../toggle/Toggle.vue'
-  import pButton from "../button/Button.vue"
-  import { ref, watch } from "vue-demi"
-  import { startOfDay, set } from 'date-fns'
-
-  const minTime = ref(set(new Date(), { hours: 1, minutes: 20 }))
-  const maxTime = ref(set(new Date(), { hours: 17, minutes: 30 }))
-
-  const is12Hour  = ref(false)
-  const model     = ref(new Date())
-  const timeModel = ref({
-    hh: '01',
-    mm: '30'
-  })
-</script>
-
-# Time
-
-> Sub-component for [Timepicker](/components/timepicker/)
-
-## Usage
-
-### Simple usage
-
-<preview>
-  <p-time />
-</preview>
-
-```vue
-<template>
-  <p-time />
-</template>
-```
-
-### Time Interval
-
-Set prop `hour-interval` or `minute-interval` to make time item use interval .
-
-<preview>
-  <p-time :hour-interval="2" :minute-interval="10" />
-</preview>
-
-```vue
-<template>
-  <p-time :hour-interval="2" :minute-interval="10" />
-</template>
-```
-
-### 12 Hour Format
-
-Set prop `is12-hour` to use 12 hour time format with am/pm period picker
-
-<preview>
-  <p-time is12-hour />
-</preview>
-
-```vue
-<template>
-  <p-time is12-hour />
-</template>
-```
-
-## Limit Time
-
-### Min and Max
-Time can limit the options to be selected using prop `min` and `max`. Default value of `min` is start of today and `max` is end of today.
-Both `min` and `max` props use `Date` type for widespread use.
-
-<preview>
-  <p-time :min="minTime" :max="maxTime" />
-</preview>
-
-```vue
-<template>
-  <p-time :min="min" :max="max" />
-</template>
-
-<script setup>
-import { set } from 'date-fns'
-
-const min = ref(set(new Date(), { hours: 1, minutes: 0 }))
-const max = ref(set(new Date(), { hours: 17, minutes: 30 }))
-</script>
-```
-
-### Min and Max with Interval
-
-<preview>
-  <p-time :min="minTime" :max="maxTime" :hour-interval="2" :minute-interval="10" />
-</preview>
-
-```vue
-<template>
-  <p-time :min="min" :max="max" />
-</template>
-
-<script setup>
-import { set } from 'date-fns'
-
-const min = ref(set(new Date(), { hours: 1, minutes: 20 }))
-const max = ref(set(new Date(), { hours: 17, minutes: 30 }))
-</script>
-```
-
-## Binding v-model
-
-Time `v-model` can support data type of `Date` and `TimeModel`. Which `TimeModel` is object with `hh`, `mm`, and `a` property.
-
-### Date v-model
-
-<preview>
-  <p-time v-model="model" v-slot="{ confirm }">
-    <p-button
-      variant="ghost"
-      class="mr-2">
-      Cancel
-    </p-button>
-    <p-button
-      variant="solid"
-      color="info"
-      @click="confirm">
-      Set
-    </p-button>
-  </p-time>
-</preview>
-
-**result:**
-
-<pre class="truncate"><code>{{ model }}</code></pre>
-
-
-```vue
-<template>
-  <p-time v-model="model" v-slot="{ confirm }">
-    <p-button
-      variant="ghost"
-      class="mr-2">
-      Cancel
-    </p-button>
-    <p-button
-      variant="solid"
-      color="info"
-      @click="confirm">
-      Set
-    </p-button>
-  </p-time>
-</template>
-
-<script setup>
-const model = ref(new Date())
-</script>
-```
-
-### TimeModel v-model
-
-<preview class="flex space-x-2">
-  <p-time v-model="timeModel" :is12-hour="is12Hour" v-slot="{ confirm }">
-    <p-button
-      variant="ghost"
-      class="mr-2">
-      Cancel
-    </p-button>
-    <p-button
-      variant="solid"
-      color="info"
-      @click="confirm">
-      Set
-    </p-button>
-  </p-time>
-  <p-toggle v-model="is12Hour">12-hour</p-toggle>
-</preview>
-
-**result:**
-
-<pre class="truncate"><code>{{ timeModel }}</code></pre>
-
-
-```vue
-<template>
-  <p-time v-model="model" v-slot="{ confirm }">
-    <p-button
-      variant="ghost"
-      class="mr-2">
-      Cancel
-    </p-button>
-    <p-button
-      variant="solid"
-      color="info"
-      @click="confirm">
-      Set
-    </p-button>
-  </p-time>
-</template>
-
-<script setup>
-import type { TimeModel } from '@privyid/persona/dist/components/time'
-
-const model = ref<TimeModel>({
-  hh: '01',
-  mm: '30'
-})
-</script>
-```
-
-## API
-
-### Props
-
-| Props             | Type                  | Default | Description                                                                                           |
-|-------------------|-----------------------|---------|-------------------------------------------------------------------------------------------------------|
-| `modelValue`      | `Date` or `TimeModel` | `-`     | `v-model` value accept `Date` and `TimeModel` object which have default value is current start of day |
-| `is12-hour`       | `Boolean`             | `false` | Enable hour item to be formatted to 12 Hour                                                           |
-| `hour-interval`   | `Number`              | `1`     | Step of each hour item                                                                                |
-| `minute-interval` | `Number`              | `1`     | Steap of each minute item                                                                             |
-| `min`             | `Date`                | `-`     | Minimum datetime to generate time items                                                               |
-| `max`             | `Date`                | `-`     | Maximum datetime to generate time items                                                               |
-
-### Slots
-
-| Name      | Description                                 |
-|-----------|---------------------------------------------|
-| `default` | Content to place at footer as footer action |
-
-`default` slot contains scoped slots
-
-| Scoped    | Type       | Default | Description                    |
-|-----------|------------|---------|--------------------------------|
-| `confirm` | `Function` | `-`     | Hook to update `v-model` value |
-
-### Events
-
-| Name      | Arguments     | Description                                                                                                                                                                             |
-|-----------|---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `context` | `TimeContext` | Event when `confirm` hook is triggered. `TimeContext` contains property `time` formatted as 24-hour or 12-hour, `date` is `Date` object, and `dateISO` formatted as standard ISO string |
-
-## See Also
-
-- [Timepicker][timepicker]
-
-[timepicker]: /components/timepicker/index

package/dist/components/time/index.mjs

@@ -1,53 +0,0 @@
-import {
-  onBeforeUnmount,
-  ref,
-  unref
-} from "vue-demi";
-import defu from "defu";
-export function useTime() {
-  const splide = ref();
-  const activeSplide = ref(1);
-  async function initSplide(element, options) {
-    const { Splide } = await import("@splidejs/splide");
-    const container = unref(element);
-    const splideOptions = defu(options, {
-      direction: "ttb",
-      height: "9rem",
-      width: "100%",
-      focus: "center",
-      perPage: 3,
-      perMove: 1,
-      arrows: false,
-      wheel: true,
-      wheelSleep: 150,
-      isNavigation: true,
-      pagination: false
-    });
-    splide.value = new Splide(container, splideOptions);
-    initSplideEvent();
-  }
-  function initSplideEvent() {
-    if (!splide.value)
-      return;
-    splide.value.on("mounted", onTimeLoad);
-    splide.value.on("move", onTimeChange);
-    splide.value.mount();
-  }
-  function onTimeLoad() {
-    if (!splide.value)
-      return;
-    activeSplide.value = splide.value.index;
-  }
-  function onTimeChange(index) {
-    activeSplide.value = index;
-  }
-  onBeforeUnmount(() => {
-    splide.value?.destroy();
-  });
-  return {
-    splide,
-    activeSplide,
-    initSplide,
-    initSplideEvent
-  };
-}

package/dist/components/time/utils/index.d.ts

@@ -1,9 +0,0 @@
-export declare function getHourUnits(model: Date, is12Hour: boolean, step?: number, min?: Date, max?: Date): string[];
-export declare function getMinuteUnits(model: Date, currentHour: number, step?: number, min?: Date, max?: Date): string[];
-export declare function getFormat(is12Hour: boolean): "hh:mm a" | "HH:mm";
-export declare function parseTime(date: Date, timeFormat: string): {
-    hh: string;
-    mm: string;
-    a: "AM" | "PM";
-};
-export declare function validateInterval(type: 'hour' | 'minute', value: number, is12Hour?: boolean): boolean;

package/dist/components/time/utils/index.mjs

@@ -1,82 +0,0 @@
-import {
-  set,
-  eachHourOfInterval,
-  eachMinuteOfInterval,
-  endOfDay,
-  format,
-  isBefore,
-  min as minDate,
-  max as maxDate,
-  startOfDay,
-  isSameHour,
-  endOfHour,
-  startOfHour
-} from "date-fns";
-import { uniq } from "lodash-es";
-export function getHourUnits(model, is12Hour, step = 1, min, max) {
-  if (isBefore(max, min)) {
-    console.warn("`max` value should greater than `min` value and vice versa");
-    return [];
-  }
-  let start = startOfDay(/* @__PURE__ */ new Date());
-  let end = endOfDay(/* @__PURE__ */ new Date());
-  if (min)
-    start = maxDate([model, min]);
-  if (max)
-    end = minDate([endOfDay(start), max]);
-  const hourUnits = eachHourOfInterval({
-    start,
-    end
-  }, { step });
-  const units = hourUnits.map((date) => {
-    if (is12Hour)
-      return format(date, "hh");
-    return format(date, "HH");
-  });
-  return uniq(units);
-}
-export function getMinuteUnits(model, currentHour, step = 1, min, max) {
-  if (isBefore(max, min)) {
-    console.warn("`max` value should greater than `min` value and vice versa");
-    return [];
-  }
-  let start = startOfDay(/* @__PURE__ */ new Date());
-  let end = endOfDay(/* @__PURE__ */ new Date());
-  if (min)
-    start = maxDate([model, min]);
-  if (max)
-    end = minDate([endOfDay(start), max]);
-  const currentTime = set(start, { hours: currentHour });
-  const minuteUnits = eachMinuteOfInterval({
-    start: isSameHour(currentTime, start) ? currentTime : startOfHour(currentTime),
-    end: isSameHour(currentTime, end) ? end : endOfHour(currentTime)
-  }, { step });
-  const units = minuteUnits.map((date) => {
-    return format(date, "mm");
-  });
-  return uniq(units);
-}
-export function getFormat(is12Hour) {
-  return is12Hour ? "hh:mm a" : "HH:mm";
-}
-export function parseTime(date, timeFormat) {
-  const [hh, mm] = format(date, timeFormat).split(":");
-  const a = format(date, "a");
-  return {
-    hh,
-    mm: mm.slice(0, 2),
-    a
-  };
-}
-export function validateInterval(type, value, is12Hour = false) {
-  let min = 0;
-  let max = 0;
-  if (type === "hour") {
-    min = 1;
-    max = is12Hour ? 12 : 24;
-  } else if (type === "minute") {
-    min = 1;
-    max = 60;
-  }
-  return value >= min && value < max;
-}

package/dist/components/time/utils/index.spec.d.ts

@@ -1,5 +0,0 @@
-export declare function createMockDate(): {
-    date: Date;
-    minDate: Date;
-    maxDate: Date;
-};