@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/time/Time.vue

@@ -1,257 +0,0 @@
-<template>
-  <p-card
-    data-testid="time"
-    class="time"
-    element="div">
-    <div class="time__container">
-      <TimeItem
-        v-model="hour"
-        :options="hourOptions"
-        time-type="hour"
-        class="time__items--hour" />
-
-      <div class="time__separator">
-        {{ timeSeparator }}
-      </div>
-
-      <TimeItem
-        v-model="minute"
-        :options="minuteOptions"
-        time-type="minute"
-        class="time__items--minute" />
-
-      <TimeItem
-        v-if="is12Hour"
-        v-model="ampm"
-        :options="periodOptions"
-        time-type="ampm"
-        class="time__items--ampm" />
-    </div>
-    <template
-      v-if="$slots.default"
-      #footer>
-      <div class="time__action">
-        <slot :confirm="confirm" />
-      </div>
-    </template>
-  </p-card>
-</template>
-
-<script setup lang="ts">
-import pCard from '../card/Card.vue'
-import TimeItem from './TimeItem.vue'
-import type { PropType } from 'vue-demi'
-import {
-  watch,
-  computed,
-  nextTick,
-  onBeforeMount,
-  ref,
-} from 'vue-demi'
-import { watchDebounced } from '@vueuse/core'
-import { useVModel } from '../input'
-import {
-  format,
-  formatISO,
-  isDate,
-  parse,
-  startOfDay,
-} from 'date-fns'
-import type { TimeModel, TimeContext } from './index'
-import {
-  getHourUnits,
-  getMinuteUnits,
-  parseTime,
-  validateInterval,
-} from './utils'
-
-const props = defineProps({
-  modelValue: {
-    type   : [Date, Object] as PropType<Date | TimeModel>,
-    default: undefined,
-  },
-  timeSeparator: {
-    type   : String,
-    default: ':',
-  },
-  is12Hour: {
-    type   : Boolean,
-    default: false,
-  },
-  hourInterval: {
-    type     : Number,
-    default  : 1,
-    validator: (value: number, prop) => {
-      return validateInterval('hour', value, prop.is12Hour as boolean)
-    },
-  },
-  minuteInterval: {
-    type     : Number,
-    default  : 1,
-    validator: (value: number) => {
-      return validateInterval('minute', value)
-    },
-  },
-  min: {
-    type   : Date,
-    default: undefined,
-  },
-  max: {
-    type   : Date,
-    default: undefined,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [unknown],
-  'context': [TimeContext],
-  'change': [TimeContext],
-}>()
-
-const model      = useVModel(props)
-const localModel = ref<Date>(startOfDay(new Date()))
-
-const hour   = ref('00')
-const minute = ref('00')
-const ampm   = ref<'AM' | 'PM' | '-'>('AM')
-
-const timeLabel = computed(() => {
-  const time = `${hour.value}:${minute.value}`
-
-  return props.is12Hour ? `${time} ${ampm.value}` : time
-})
-
-const timeFormat = computed(() => props.is12Hour ? 'hh:mm a' : 'HH:mm')
-
-const hourOptions = computed(() => {
-  return getHourUnits(localModel.value, props.is12Hour, props.hourInterval, props.min, props.max)
-})
-
-const minuteOptions = computed(() => {
-  return getMinuteUnits(localModel.value, Number(hour.value), props.minuteInterval, props.min, props.max)
-})
-
-const periodOptions = computed(() => {
-  return ['AM', 'PM'] // TODO: should handle for period within time range
-})
-
-watchDebounced([
-  hour,
-  minute,
-  ampm,
-], () => {
-  const date = parse(timeLabel.value, timeFormat.value, localModel.value)
-
-  emit('change', getContext(date))
-}, { flush: 'post', debounce: 300 })
-
-watch(model, init)
-
-onBeforeMount(init)
-
-function init () {
-  try {
-    if (!model.value)
-      return
-
-    if (isDate(model.value)) {
-      localModel.value = new Date(model.value as Date)
-
-      const { hh, mm, a } = parseTime(localModel.value, timeFormat.value)
-
-      assignTime(hh, mm, a)
-    } else {
-      const { hh, mm, a } = (model.value as TimeModel)
-
-      assignTime(hh, mm, a)
-
-      localModel.value = parse(timeLabel.value, timeFormat.value, new Date())
-
-      !props.is12Hour && a && console.warn('Please provide is12Hour props to parse time to 12 Hour Format')
-    }
-  } catch (error) {
-    console.warn(error)
-  }
-}
-
-function confirm (): void {
-  try {
-    localModel.value = parse(timeLabel.value, timeFormat.value, localModel.value)
-
-    model.value = isDate(model.value)
-      ? new Date(localModel.value)
-      : {
-          hh: hour.value,
-          mm: minute.value,
-          a : props.is12Hour ? ampm.value : undefined,
-        }
-
-    emit('context', getContext(localModel.value))
-  } catch (error) {
-    console.warn(error)
-  }
-}
-
-async function assignTime (hh: string, mm: string, a?: 'AM' | 'PM' | '-') {
-  hour.value   = hh ?? '00'
-  minute.value = mm ?? '00'
-  ampm.value   = a ?? 'AM'
-
-  await nextTick()
-}
-
-function getContext (date: Date): TimeContext {
-  return {
-    time   : format(date, timeFormat.value),
-    date   : date,
-    dateISO: formatISO(date),
-  }
-}
-</script>
-
-<style lang="postcss">
-.time {
-  --p-card-padding-x: 2rem;
-  --p-card-padding-y: 2rem;
-
-  @apply flex flex-col shadow-xl;
-  @apply max-w-[320px] overflow-hidden;
-
-  &.card {
-    @apply border-transparent dark:border-transparent;
-  }
-
-  &__container {
-    @apply flex items-center justify-center w-full min-h-[144px] space-x-2;
-  }
-
-  &__separator {
-    @apply px-2.5 py-3;
-  }
-
-  &__action {
-    @apply grid grid-flow-col auto-cols-fr;
-
-    &--cancel,
-    &--confirm {
-      @apply mx-2;
-    }
-  }
-
-  .card__body {
-    @apply pb-6;
-  }
-
-  .card__footer {
-    @apply pt-0;
-  }
-
-  .splide__track {
-    @apply px-2;
-  }
-
-  .dropdown__subitem & {
-    @apply shadow-none;
-  }
-}
-</style>

package/dist/components/time/TimeItem.vue

@@ -1,117 +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 lang="ts">
-import {
-  ref,
-  onMounted,
-  watch,
-  computed,
-} from 'vue-demi'
-import { watchDebounced } from '@vueuse/core'
-import type {
-  PropType,
-  Ref,
-} from 'vue-demi'
-import { useTime } from './index'
-import { useVModel } from '../input'
-import type { Options } from '@splidejs/splide'
-import '@splidejs/splide/css/core'
-
-type TimeType = 'hour' | 'minute' | 'ampm'
-
-const props = defineProps({
-  modelValue: {
-    type   : String,
-    default: '00',
-  },
-  timeType: {
-    type   : String as PropType<TimeType>,
-    default: 'hour',
-  },
-  options: {
-    type   : Array<string>,
-    default: () => [],
-  },
-})
-
-const { splide, activeSplide, initSplide } = useTime()
-
-const model     = useVModel(props)
-const container = ref<HTMLDivElement>()
-
-const timeOptions = computed(() => props.options)
-
-watch(activeSplide, (value) => {
-  model.value = props.options[value]
-})
-
-watchDebounced(timeOptions, (value) => {
-  if (!splide.value)
-    return
-
-  const splideOptions: Options = {
-    ...splide.value.options,
-    clones: value.length === 1 ? 0 : undefined,
-  }
-
-  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: Options = {
-      start: timeOptions.value.indexOf(model.value),
-      type : props.timeType === 'ampm' ? 'slide' : 'loop',
-    }
-
-    await initSplide(container as Ref<HTMLDivElement>, 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/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.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;
-}