@privyid/persona 1.2.0 → 1.2.1-rc.0

package/dist/components/input-range/InputRange.spec.mjs

@@ -1,180 +0,0 @@
-import { fireEvent, render } from "@testing-library/vue";
-import { vi } from "vitest";
-import {
-  resetHook,
-  triggerDrag,
-  useDrag
-} from "./__mocks__/use-drag.mjs";
-import { useElementBounding } from "./__mocks__/use-element-bounding.mjs";
-import InputRange from "./InputRange.vue";
-import { ref } from "vue-demi";
-import { delay } from "nanodelay";
-class FakeMouseEvent extends MouseEvent {
-  pageX;
-  constructor(type, pageX) {
-    super(type);
-    this.pageX = pageX;
-  }
-}
-vi.mock("./utils/use-drag.ts", () => ({ default: useDrag }));
-vi.mock("@vueuse/core", async () => {
-  const vueuse = await vi.importActual("@vueuse/core");
-  return {
-    ...vueuse,
-    useElementBounding
-  };
-});
-beforeEach(() => {
-  resetHook();
-});
-it("should render properly without any prop", () => {
-  const screen = render({
-    components: { InputRange },
-    template: "<input-range />"
-  });
-  const input = screen.queryByTestId("input-range");
-  expect(input).toBeInTheDocument();
-  expect(input).toHaveClass("input-range");
-});
-it("should have double thumb if multiple prop is provided", () => {
-  const screen = render({
-    components: { InputRange },
-    template: "<input-range multiple />"
-  });
-  const start = screen.queryByTestId("thumb-start");
-  expect(start).toBeInTheDocument();
-  expect(start).toBeVisible();
-});
-it("should have disabled state if prop disabled was provided", () => {
-  const screen = render({
-    components: { InputRange },
-    template: "<input-range disabled />"
-  });
-  const input = screen.queryByTestId("input-range");
-  expect(input).toBeInTheDocument();
-  expect(input).toHaveClass("input-range", "input-range--disabled");
-});
-it("should have readonly state if prop readonly was provided", () => {
-  const screen = render({
-    components: { InputRange },
-    template: "<input-range readonly />"
-  });
-  const input = screen.queryByTestId("input-range");
-  expect(input).toBeInTheDocument();
-  expect(input).toHaveClass("input-range", "input-range--readonly");
-});
-it("should have error state if prop error was provided", () => {
-  const screen = render({
-    components: { InputRange },
-    template: "<input-range error />"
-  });
-  const input = screen.queryByTestId("input-range");
-  expect(input).toBeInTheDocument();
-  expect(input).toHaveClass("input-range", "input-range--error", "state--error");
-});
-it("should able to change value inside v-model", async () => {
-  const model = ref(100);
-  const screen = render({
-    components: { InputRange },
-    template: '<input-range v-model="model" />',
-    setup() {
-      return { model };
-    }
-  });
-  await delay(0);
-  const thumbEnd = screen.queryByTestId("thumb-end");
-  await triggerDrag(thumbEnd, 70);
-  expect(model.value).toBe(70);
-});
-it("should able to change value inside v-model (multiple)", async () => {
-  const model = ref([0, 100]);
-  const screen = render({
-    components: { InputRange },
-    template: '<input-range v-model="model" multiple />',
-    setup() {
-      return { model };
-    }
-  });
-  await delay(0);
-  const thumbStart = screen.queryByTestId("thumb-start");
-  const thumbEnd = screen.queryByTestId("thumb-end");
-  await triggerDrag(thumbStart, 30);
-  await triggerDrag(thumbEnd, 70);
-  expect(model.value).toStrictEqual([30, 70]);
-});
-it("also able to change value inside v-model:start and v-model:end", async () => {
-  const start = ref(0);
-  const end = ref(100);
-  const screen = render({
-    components: { InputRange },
-    template: `
-      <input-range
-        v-model:start="start"
-        v-model:end="end"
-        multiple
-      />
-    `,
-    setup() {
-      return {
-        start,
-        end
-      };
-    }
-  });
-  await delay(0);
-  const thumbStart = screen.queryByTestId("thumb-start");
-  const thumbEnd = screen.queryByTestId("thumb-end");
-  await triggerDrag(thumbStart, 30);
-  await triggerDrag(thumbEnd, 70);
-  expect(start.value).toStrictEqual(30);
-  expect(end.value).toStrictEqual(70);
-});
-it("should have value between min and max value", async () => {
-  const model = ref(100);
-  const screen = render({
-    components: { InputRange },
-    template: '<input-range v-model="model" min="100" max="500" />',
-    setup() {
-      return { model };
-    }
-  });
-  await delay(0);
-  const thumbEnd = screen.queryByTestId("thumb-end");
-  await triggerDrag(thumbEnd, 70);
-  expect(model.value).toBe(0.7 * (500 - 100) + 100);
-});
-it("should able to set value using click on trackbar", async () => {
-  const model = ref([40, 60]);
-  const screen = render({
-    components: { InputRange },
-    template: '<input-range v-model="model" multiple />',
-    setup() {
-      return { model };
-    }
-  });
-  await delay(0);
-  const lowerTrack = screen.queryByTestId("track-lower");
-  const activeTrack = screen.queryByTestId("track-active");
-  const upperTrack = screen.queryByTestId("track-upper");
-  await fireEvent(lowerTrack, new FakeMouseEvent("click", 20));
-  expect(model.value).toStrictEqual([20, 60]);
-  await fireEvent(upperTrack, new FakeMouseEvent("click", 90));
-  expect(model.value).toStrictEqual([20, 90]);
-  await fireEvent(activeTrack, new FakeMouseEvent("click", 40));
-  await fireEvent(activeTrack, new FakeMouseEvent("click", 80));
-  expect(model.value).toStrictEqual([40, 80]);
-});
-it("should goto nearest value of step", async () => {
-  const model = ref(100);
-  const screen = render({
-    components: { InputRange },
-    template: '<input-range v-model="model" step="25" />',
-    setup() {
-      return { model };
-    }
-  });
-  await delay(0);
-  const thumbEnd = screen.queryByTestId("thumb-end");
-  await triggerDrag(thumbEnd, 60);
-  expect(model.value).toBe(50);
-});

package/dist/components/input-range/InputRange.vue

@@ -1,253 +0,0 @@
-<template>
-  <div
-    data-testid="input-range"
-    class="input-range"
-    :class="classNames">
-    <div
-      ref="track"
-      class="input-range__tracks">
-      <!-- Lower Track -->
-      <div
-        v-show="multiple"
-        data-testid="track-lower"
-        class="input-range__track input-range__track-lower"
-        :style="lowerStyle"
-        @click.capture="onClickLowerTrack" />
-      <!-- Active Track -->
-      <div
-        data-testid="track-active"
-        class="input-range__track input-range__track-active"
-        :style="upperStyle"
-        @click.capture="onClickActiveTrack">
-        <div
-          v-show="multiple"
-          ref="thumbStart"
-          data-testid="thumb-start"
-          class="input-range__thumb input-range__thumb-start" />
-        <div
-          ref="thumbEnd"
-          data-testid="thumb-end"
-          class="input-range__thumb input-range__thumb-end" />
-      </div>
-      <!-- Upper Track -->
-      <div
-        data-testid="track-upper"
-        class="input-range__track input-range__track-upper"
-        @click.capture="onClickUpperTrack" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {
-  syncRef,
-  useElementBounding,
-  useToNumber
-} from "@vueuse/core";
-import { useClamp } from "@vueuse/math";
-import {
-  computed,
-  ref,
-  toRef,
-  watch
-} from "vue-demi";
-import useDrag from "./utils/use-drag";
-const props = defineProps({
-  modelValue: {
-    type: [Number, Array],
-    default: void 0
-  },
-  start: {
-    type: Number,
-    default: void 0
-  },
-  end: {
-    type: Number,
-    default: void 0
-  },
-  step: {
-    type: [String, Number],
-    default: 1
-  },
-  min: {
-    type: [String, Number],
-    default: 0
-  },
-  max: {
-    type: [String, Number],
-    default: 100
-  },
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  error: {
-    type: Boolean,
-    default: false
-  }
-});
-const emit = defineEmits(["change", "update:modelValue", "update:end", "update:start"]);
-const track = ref();
-const thumbStart = ref();
-const thumbEnd = ref();
-const minimum = useToNumber(toRef(props, "min"));
-const maximum = useToNumber(toRef(props, "max"));
-const perStep = useToNumber(toRef(props, "step"));
-const localStart = ref(Array.isArray(props.modelValue) ? props.modelValue[0] : props.start ?? minimum.value);
-const localEnd = ref(Array.isArray(props.modelValue) ? props.modelValue[1] : props.end ?? props.modelValue ?? maximum.value);
-const minDrag = computed(() => props.multiple ? localStart.value + perStep.value : minimum.value);
-const maxDrag = computed(() => props.multiple ? localEnd.value - perStep.value : maximum.value);
-const startValue = useClamp(localStart.value, minimum, maxDrag);
-const endValue = useClamp(localEnd.value, minDrag, maximum);
-const { width, left } = useElementBounding(track);
-const vStart = computed({
-  get() {
-    if (Array.isArray(props.modelValue))
-      return props.modelValue[0];
-    return props.start ?? minimum.value;
-  },
-  set(value) {
-    emit("update:start", value);
-  }
-});
-const vEnd = computed({
-  get() {
-    if (Array.isArray(props.modelValue))
-      return props.modelValue[1];
-    if (Number.isFinite(props.modelValue))
-      return props.modelValue;
-    return props.end ?? maximum.value;
-  },
-  set(value) {
-    emit("update:end", value);
-  }
-});
-const startPercentage = computed(() => {
-  return (startValue.value - minimum.value) / (maximum.value - minimum.value) * 100;
-});
-const endPercentage = computed(() => {
-  return (endValue.value - minimum.value) / (maximum.value - minimum.value) * 100;
-});
-const classNames = computed(() => {
-  const result = [];
-  if (props.disabled)
-    result.push("input-range--disabled");
-  if (props.readonly)
-    result.push("input-range--readonly");
-  if (props.error)
-    result.push("input-range--error", "state--error");
-  return result;
-});
-const lowerStyle = computed(() => {
-  return { width: `${startPercentage.value}%` };
-});
-const upperStyle = computed(() => {
-  return { width: `${endPercentage.value - startPercentage.value}%` };
-});
-function getValue(event) {
-  const offset = event.pageX - left.value;
-  const percent = offset / width.value;
-  const value = percent * (maximum.value - minimum.value) + minimum.value;
-  const nearest = Math.round(value / perStep.value) * perStep.value;
-  return nearest;
-}
-function onClickLowerTrack(event) {
-  if (!props.disabled && !props.readonly)
-    startValue.value = getValue(event);
-}
-function onClickActiveTrack(event) {
-  if (!props.disabled && !props.readonly) {
-    const value = getValue(event);
-    if (props.multiple) {
-      const ds = Math.abs(value - startValue.value);
-      const de = Math.abs(value - endValue.value);
-      if (ds < de) {
-        startValue.value = value;
-        return;
-      }
-    }
-    endValue.value = value;
-  }
-}
-function onClickUpperTrack(event) {
-  if (!props.disabled && !props.readonly)
-    endValue.value = getValue(event);
-}
-useDrag(thumbStart, (event) => {
-  if (!props.disabled && !props.readonly)
-    startValue.value = getValue(event);
-});
-useDrag(thumbEnd, (event) => {
-  if (!props.disabled && !props.readonly)
-    endValue.value = getValue(event);
-});
-syncRef(startValue, vStart, { immediate: false });
-syncRef(endValue, vEnd, { immediate: false });
-watch([startValue, endValue], ([startVal, endVal]) => {
-  localStart.value = startVal;
-  localEnd.value = endVal;
-  if (props.multiple) {
-    emit("update:modelValue", [startVal, endVal]);
-    emit("change", [startVal, endVal]);
-  } else {
-    emit("update:modelValue", endVal);
-    emit("change", endVal);
-  }
-});
-</script>
-
-<style lang="postcss">
-.input-range {
-  @apply py-2 w-full;
-
-  &__tracks {
-    @apply relative flex w-full bg-ground cursor-pointer overflow-visible rounded;
-    @apply dark:bg-dark-ground;
-  }
-
-  &__track {
-    @apply h-2 rounded;
-
-    &-active {
-      @apply bg-brand-accent relative text-center;
-      @apply dark:bg-dark-brand-accent;
-    }
-
-    &-upper {
-      @apply grow;
-    }
-  }
-
-  &__thumb {
-    @apply w-4 h-4 rounded-full bg-default shadow-sm absolute top-1/2 bottom-0 -translate-y-1/2 border border-subtlest touch-none select-none;
-    @apply dark:bg-dark-layer-2 dark:border-dark-subtlest;
-
-    &:hover,
-    &:active {
-      @apply ring ring-info border-brand-accent;
-      @apply dark:ring-dark-info dark:border-dark-brand-accent;
-    }
-
-    &-start {
-      @apply -left-2;
-    }
-
-    &-end {
-      @apply -right-2;
-    }
-  }
-
-  &:disabled,
-  &--disabled {
-    @apply opacity-50 pointer-events-none;
-  }
-}
-</style>

package/dist/components/input-range/InputRange.vue.d.ts

@@ -1,106 +0,0 @@
-import type { PropType } from 'vue-demi';
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<number | [number, number]>;
-        default: undefined;
-    };
-    start: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    end: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    step: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    min: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    max: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    multiple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    error: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: unknown) => void;
-    change: (args_0: unknown) => void;
-    "update:start": (args_0: number) => void;
-    "update:end": (args_0: number) => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<number | [number, number]>;
-        default: undefined;
-    };
-    start: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    end: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    step: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    min: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    max: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    multiple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    error: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
-    onChange?: ((args_0: unknown) => any) | undefined;
-    "onUpdate:start"?: ((args_0: number) => any) | undefined;
-    "onUpdate:end"?: ((args_0: number) => any) | undefined;
-}>, {
-    modelValue: number | [number, number];
-    disabled: boolean;
-    error: boolean;
-    multiple: boolean;
-    max: string | number;
-    start: number;
-    end: number;
-    readonly: boolean;
-    min: string | number;
-    step: string | number;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/input-range/__mocks__/use-drag.d.ts

@@ -1,8 +0,0 @@
-import type { Ref } from 'vue-demi';
-type Handler = (event: {
-    pageX: number;
-}) => void;
-export declare function useDrag(el: Ref<HTMLElement>, handler: Handler): void;
-export declare function triggerDrag(el: HTMLElement, pageX: number): Promise<void>;
-export declare function resetHook(): Promise<void>;
-export {};

package/dist/components/input-range/__mocks__/use-drag.mjs

@@ -1,20 +0,0 @@
-import {
-  nextTick,
-  watch
-} from "vue-demi";
-const hook = /* @__PURE__ */ new Map();
-export function useDrag(el, handler) {
-  watch(el, (value) => {
-    if (value)
-      hook.set(value, handler);
-  }, { immediate: true });
-}
-export async function triggerDrag(el, pageX) {
-  const handler = hook.get(el);
-  if (handler)
-    handler({ pageX });
-  await nextTick();
-}
-export async function resetHook() {
-  hook.clear();
-}

package/dist/components/input-range/__mocks__/use-element-bounding.d.ts

@@ -1,4 +0,0 @@
-export declare function useElementBounding(): {
-    left: import("vue-demi").Ref<number, number>;
-    width: import("vue-demi").Ref<number, number>;
-};

package/dist/components/input-range/__mocks__/use-element-bounding.mjs

@@ -1,7 +0,0 @@
-import { ref } from "vue-demi";
-export function useElementBounding() {
-  return {
-    left: ref(0),
-    width: ref(100)
-  };
-}