@privyid/persona 1.2.0 → 1.2.1-rc.0

package/dist/components/datepicker/Datepicker.spec.mjs

@@ -1,240 +0,0 @@
-import { fireEvent, render } from "@testing-library/vue";
-import { vi } from "vitest";
-import { nextTick, ref } from "vue-demi";
-import Datepicker from "./Datepicker.vue";
-import { delay } from "nanodelay";
-const CalendarStub = vi.fn();
-it("should be render properly without props", () => {
-  const screen = render({
-    components: { Datepicker },
-    template: `
-      <Datepicker />
-    `
-  });
-  const picker = screen.queryByTestId("datepicker");
-  expect(picker).toBeInTheDocument();
-});
-it("should open if input is focused", async () => {
-  const screen = render({
-    components: { Datepicker },
-    template: `
-      <Datepicker />
-    `
-  });
-  const input = screen.queryByTestId("datepicker-input");
-  input.focus();
-  await nextTick();
-  const picker = screen.queryByTestId("datepicker");
-  const calendar = screen.queryByTestId("calendar");
-  expect(picker).toHaveClass("datepicker--open");
-  expect(calendar).toBeVisible();
-  await fireEvent.click(window);
-  await delay(0);
-  expect(picker).not.toHaveClass("datepicker--open");
-  expect(calendar).not.toBeVisible();
-});
-it("should be able set input placeholder via prop `placeholder`", () => {
-  const screen = render({
-    components: { Datepicker },
-    template: `
-      <Datepicker placeholder="Pick A Date" />
-    `
-  });
-  const input = screen.queryByTestId("datepicker-input");
-  expect(input).toHaveAttribute("placeholder", "Pick A Date");
-});
-it("should be able to set display format via prop `format`", () => {
-  const model = ref(new Date(2022, 0, 31));
-  const screen = render({
-    components: { Datepicker },
-    template: `
-      <Datepicker
-        v-model="model"
-        format="yyyy-MM-dd"
-        placeholder="Pick A Date" />
-    `,
-    setup() {
-      return { model };
-    }
-  });
-  const input = screen.queryByTestId("datepicker-input");
-  expect(input).toHaveValue("2022-01-31");
-});
-it("should have style disabled if props disabled is provided", () => {
-  const screen = render({
-    components: { Datepicker },
-    template: `
-      <Datepicker disabled />
-    `
-  });
-  const datepicker = screen.queryByTestId("datepicker");
-  expect(datepicker).toHaveClass("datepicker", "datepicker--disabled");
-});
-it("should have not able to open if datepicker is disabled", async () => {
-  const screen = render({
-    components: { Datepicker },
-    template: `
-      <Datepicker disabled />
-    `
-  });
-  const datepicker = screen.queryByTestId("datepicker");
-  const input = screen.queryByTestId("datepicker-input");
-  input.focus();
-  await nextTick();
-  expect(datepicker).toHaveClass("datepicker--disabled");
-  expect(datepicker).not.toHaveClass("datepicker--open");
-});
-it("should have not able to open if datepicker is readonly", async () => {
-  const screen = render({
-    components: { Datepicker },
-    template: `
-      <Datepicker readonly />
-    `
-  });
-  const datepicker = screen.queryByTestId("datepicker");
-  const input = screen.queryByTestId("datepicker-input");
-  input.focus();
-  await nextTick();
-  expect(datepicker).toHaveClass("datepicker--readonly");
-  expect(datepicker).not.toHaveClass("datepicker--open");
-});
-it("should close calendar (popup) if user selected the date", async () => {
-  const screen = render({
-    components: { Datepicker },
-    template: `
-      <Datepicker />
-    `
-  });
-  const input = screen.queryByTestId("datepicker-input");
-  input.focus();
-  await nextTick();
-  let picker = screen.queryByTestId("datepicker");
-  let calendar = screen.queryByTestId("calendar");
-  expect(picker).toHaveClass("datepicker--open");
-  expect(calendar).toBeVisible();
-  const items = screen.queryAllByTestId("calendar-item");
-  await fireEvent.click(items.at(0));
-  picker = screen.queryByTestId("datepicker");
-  calendar = screen.queryByTestId("calendar");
-  expect(picker).not.toHaveClass("datepicker--open");
-  expect(calendar).not.toBeVisible();
-});
-it("should passing prop `min` into Calendar component", () => {
-  render({
-    components: { Datepicker },
-    template: `
-      <Datepicker :min="new Date(2022, 0, 1)" />
-    `
-  }, { global: { stubs: { Calendar: CalendarStub } } });
-  const props = expect.objectContaining({ min: new Date(2022, 0, 1) });
-  expect(CalendarStub).toBeCalledWith(props, null);
-});
-it("should passing prop `max` into Calendar component", () => {
-  render({
-    components: { Datepicker },
-    template: `
-      <Datepicker :max="new Date(2022, 0, 1)" />
-    `
-  }, { global: { stubs: { Calendar: CalendarStub } } });
-  const props = expect.objectContaining({ max: new Date(2022, 0, 1) });
-  expect(CalendarStub).toBeCalledWith(props, null);
-});
-it("should passing prop `mode` into Calendar component", () => {
-  render({
-    components: { Datepicker },
-    template: `
-      <Datepicker mode="year" />
-    `
-  }, { global: { stubs: { Calendar: CalendarStub } } });
-  const props = expect.objectContaining({ mode: "year" });
-  expect(CalendarStub).toBeCalledWith(props, null);
-});
-it("should have error style if prop error was provided", () => {
-  const screen = render({
-    components: { Datepicker },
-    template: `
-      <Datepicker error />
-    `
-  });
-  const datepicker = screen.queryByTestId("datepicker");
-  expect(datepicker).toHaveClass("datepicker--error", "state--error");
-});
-it("should display date range format on range mode", () => {
-  const model = ref([new Date(2022, 0, 1), new Date(2022, 0, 31)]);
-  const screen = render({
-    components: { Datepicker },
-    template: `
-      <Datepicker
-        v-model="model"
-        format="yyyy-MM-dd"
-        placeholder="Pick A Date"
-        range />
-    `,
-    setup() {
-      return { model };
-    }
-  });
-  const input = screen.queryByTestId("datepicker-input");
-  expect(input).toHaveValue("2022-01-01 - 2022-01-31");
-});
-it("should modify v-model:start and v-model:end when using props `range`", async () => {
-  const start = ref(new Date(2022, 0, 15));
-  const end = ref(new Date(2022, 0, 31));
-  const screen = render({
-    components: { Datepicker },
-    template: `
-      <Datepicker
-        v-model:start="start"
-        v-model:end="end"
-        range />
-    `,
-    setup() {
-      return { start, end };
-    }
-  });
-  const input = screen.queryByTestId("datepicker-input");
-  input.focus();
-  await nextTick();
-  const items = screen.queryAllByTestId("calendar-item");
-  const expected = [new Date(2022, 0, 1), new Date(2022, 0, 8)];
-  await fireEvent.click(items.at(13));
-  expect(start.value).toBeDate();
-  expect(end.value).toBeUndefined();
-  await fireEvent.click(items.at(20));
-  expect(start.value).toBeDate();
-  expect(end.value).toBeDate();
-  expect(start.value.toISOString()).toBe(expected[0].toISOString());
-  expect(end.value.toISOString()).toBe(expected[1].toISOString());
-  expect(input).toHaveValue("01/01/2022 - 08/01/2022");
-  start.value = void 0;
-  end.value = void 0;
-  await nextTick();
-  expect(input).toHaveValue("");
-  start.value = new Date(2023, 0, 1);
-  end.value = new Date(2023, 1, 1);
-  await nextTick();
-  expect(input).toHaveValue("01/01/2023 - 01/02/2023");
-});
-it("should show clear button when prop `clearable`", async () => {
-  const model = ref(new Date(2022, 0, 1));
-  const screen = render({
-    components: { Datepicker },
-    template: `
-      <Datepicker
-        v-model="model"
-        format="yyyy-MM-dd"
-        placeholder="Pick A Date"
-        clearable />
-    `,
-    setup() {
-      return { model };
-    }
-  });
-  const input = screen.queryByTestId("datepicker-input");
-  const clear = screen.queryByTestId("input-clear");
-  expect(input).toHaveValue("2022-01-01");
-  expect(clear).toBeVisible();
-  await fireEvent.click(clear);
-  expect(model.value).toBeUndefined();
-  expect(clear).not.toBeVisible();
-});

package/dist/components/datepicker/Datepicker.vue

@@ -1,204 +0,0 @@
-<template>
-  <Dropdown
-    v-model="isOpen"
-    class="datepicker"
-    data-testid="datepicker"
-    aria-label="datepicker"
-    :placement="placement"
-    :class="classNames"
-    :disabled="disabled">
-    <template #activator>
-      <Input
-        v-bind="$attrs"
-        :value="value"
-        :model-value="value"
-        data-testid="datepicker-input"
-        class="datepicker__input"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :error="error"
-        :size="size"
-        :clearable="clearable"
-        :container-class="containerClass"
-        readonly
-        @clear="onClear"
-        @focus="onFocus">
-        <template #append>
-          <IconCalendar
-            class="datepicker__icon" />
-        </template>
-      </Input>
-    </template>
-
-    <Calendar
-      v-model="model"
-      class="datepicker__calendar"
-      :start="start"
-      :end="end"
-      :disabled="disabled"
-      :readonly="readonly"
-      :max="max"
-      :min="min"
-      :mode="mode"
-      :range="range"
-      :min-range="minRange"
-      :max-range="maxRange"
-      @change="onSelected"
-      @update:start="$emit('update:start', $event)"
-      @update:end="$emit('update:end', $event)" />
-  </Dropdown>
-</template>
-
-<script setup>
-import Dropdown from "../dropdown/Dropdown.vue";
-import Input from "../input/Input.vue";
-import Calendar from "../calendar/Calendar.vue";
-import { format as formatDate, isDate } from "date-fns";
-import {
-  computed,
-  ref,
-  watch
-} from "vue-demi";
-import { useVModel } from "../input";
-import IconCalendar from "@privyid/persona-icon/vue/calendar/16.vue";
-defineOptions({ inheritAttrs: false });
-const props = defineProps({
-  modelValue: {
-    type: [Date, Array],
-    default: void 0
-  },
-  size: {
-    type: String,
-    default: "md"
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  error: {
-    type: Boolean,
-    default: false
-  },
-  clearable: {
-    type: Boolean,
-    default: false
-  },
-  containerClass: {
-    type: [
-      String,
-      Array,
-      Object
-    ],
-    default: void 0
-  },
-  start: {
-    type: Date,
-    default: void 0
-  },
-  end: {
-    type: Date,
-    default: void 0
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  },
-  format: {
-    type: String,
-    default: "dd/MM/yyyy"
-  },
-  max: {
-    type: Date,
-    default: void 0
-  },
-  min: {
-    type: Date,
-    default: void 0
-  },
-  mode: {
-    type: String,
-    default: "date"
-  },
-  range: {
-    type: Boolean,
-    default: false
-  },
-  minRange: {
-    type: String,
-    default: void 0
-  },
-  maxRange: {
-    type: String,
-    default: void 0
-  },
-  placement: {
-    type: String,
-    default: "bottom-start"
-  }
-});
-const emit = defineEmits(["change", "update:modelValue", "update:start", "update:end"]);
-const model = useVModel(props);
-const isOpen = ref(false);
-const value = computed(() => {
-  const dates = Array.isArray(model.value) ? model.value : [model.value];
-  return dates.map((date) => {
-    return isDate(date) ? formatDate(date, props.format) : "";
-  }).filter(Boolean).join(" - ");
-});
-watch(() => props.start, (start) => {
-  if (Array.isArray(model.value))
-    model.value[0] = start;
-});
-watch(() => props.end, (end) => {
-  if (Array.isArray(model.value))
-    model.value[1] = end;
-});
-const classNames = computed(() => {
-  const result = [];
-  if (isOpen.value)
-    result.push("datepicker--open");
-  if (props.disabled)
-    result.push("datepicker--disabled");
-  if (props.readonly)
-    result.push("datepicker--readonly");
-  if (props.error)
-    result.push("datepicker--error", "state--error");
-  return result;
-});
-function onFocus() {
-  if (!props.disabled && !props.readonly)
-    isOpen.value = true;
-}
-function onClear() {
-  if (!props.disabled && !props.readonly)
-    model.value = void 0;
-}
-function onSelected(event) {
-  isOpen.value = false;
-  emit("change", event);
-}
-</script>
-
-<style lang="postcss">
-.datepicker {
-  &__input {
-    @apply pr-8 truncate;
-  }
-
-  &__icon {
-    @apply transition-transform duration-150 text-muted pointer-events-none;
-    @apply dark:text-dark-muted;
-  }
-
-  > .dropdown__menu {
-    --p-dropdown-size: auto;
-    --p-dropdown-max-height: 100%;
-
-    @apply min-w-max max-h-min;
-  }
-}
-</style>

package/dist/components/datepicker/Datepicker.vue.d.ts

@@ -1,181 +0,0 @@
-import type { PropType } from 'vue-demi';
-import type { CalendarMode } from '../calendar/adapter/adapter';
-import type { SizeVariant } from '../button';
-import type { Placement } from '@floating-ui/dom';
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<Date | [Date, Date]>;
-        default: undefined;
-    };
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    error: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    containerClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    start: {
-        type: DateConstructor;
-        default: undefined;
-    };
-    end: {
-        type: DateConstructor;
-        default: undefined;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    format: {
-        type: StringConstructor;
-        default: string;
-    };
-    max: {
-        type: DateConstructor;
-        default: undefined;
-    };
-    min: {
-        type: DateConstructor;
-        default: undefined;
-    };
-    mode: {
-        type: PropType<CalendarMode>;
-        default: string;
-    };
-    range: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    minRange: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    maxRange: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    placement: {
-        type: PropType<Placement>;
-        default: string;
-    };
-}>, {}, {}, {}, {}, 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;
-    };
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    error: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    containerClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    start: {
-        type: DateConstructor;
-        default: undefined;
-    };
-    end: {
-        type: DateConstructor;
-        default: undefined;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    format: {
-        type: StringConstructor;
-        default: string;
-    };
-    max: {
-        type: DateConstructor;
-        default: undefined;
-    };
-    min: {
-        type: DateConstructor;
-        default: undefined;
-    };
-    mode: {
-        type: PropType<CalendarMode>;
-        default: string;
-    };
-    range: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    minRange: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    maxRange: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    placement: {
-        type: PropType<Placement>;
-        default: string;
-    };
-}>> & 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;
-}>, {
-    size: SizeVariant;
-    modelValue: Date | [Date, Date];
-    disabled: boolean;
-    error: boolean;
-    mode: "date" | "month" | "year";
-    max: Date;
-    placement: Placement;
-    start: Date;
-    end: Date;
-    readonly: boolean;
-    min: Date;
-    range: boolean;
-    minRange: string;
-    maxRange: string;
-    clearable: boolean;
-    containerClass: string | unknown[] | Record<string, any>;
-    placeholder: string;
-    format: string;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;