@privyid/persona 1.1.1 → 1.2.0

package/dist/components/steps/Step.vue

@@ -13,24 +13,19 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import type { TravelHook } from '.'
-import { useStep } from '.'
-
-defineOptions({ name: 'Step' })
-
+<script setup>
+import { useStep } from ".";
+defineOptions({ name: "Step" });
 const props = defineProps({
   onBeforePrev: {
-    type   : Function as PropType<TravelHook>,
-    default: () => true,
+    type: Function,
+    default: () => true
   },
   onBeforeNext: {
-    type   : Function as PropType<TravelHook>,
-    default: () => true,
-  },
-})
-
+    type: Function,
+    default: () => true
+  }
+});
 const {
   canNext,
   canPrev,
@@ -40,10 +35,8 @@ const {
   next,
   prev,
   onBeforeNext: addOnBeforeNext,
-  onBeforePrev: addOnBeforePrev,
-} = useStep()
-
-// Registering Hooks
-addOnBeforeNext(props.onBeforeNext)
-addOnBeforePrev(props.onBeforePrev)
+  onBeforePrev: addOnBeforePrev
+} = useStep();
+addOnBeforeNext(props.onBeforeNext);
+addOnBeforePrev(props.onBeforePrev);
 </script>

package/dist/components/steps/Step.vue.d.ts

@@ -0,0 +1,48 @@
+import type { PropType } from 'vue-demi';
+import type { TravelHook } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            step: number;
+            next: () => void;
+            prev: () => void;
+            total: number;
+            canPrev: boolean;
+            canNext: boolean;
+            toStep: (step: number) => void;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    onBeforePrev: {
+        type: PropType<TravelHook>;
+        default: () => boolean;
+    };
+    onBeforeNext: {
+        type: PropType<TravelHook>;
+        default: () => boolean;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    onBeforePrev: {
+        type: PropType<TravelHook>;
+        default: () => boolean;
+    };
+    onBeforeNext: {
+        type: PropType<TravelHook>;
+        default: () => boolean;
+    };
+}>> & Readonly<{}>, {
+    onBeforePrev: TravelHook;
+    onBeforeNext: TravelHook;
+}, {}, {}, {}, 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/steps/StepSlider.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/steps/StepSlider.spec.mjs

@@ -0,0 +1,49 @@
+import { KeepAlive } from "./__mocks__/keep-alive.mjs";
+import { render } from "@testing-library/vue";
+import { vi } from "vitest";
+import Step from "./Step.vue";
+import StepSlider from "./StepSlider.vue";
+vi.spyOn(console, "warn").mockReturnThis();
+vi.mock("vue-demi", async () => {
+  const vueDemi = await vi.importActual("vue-demi");
+  return {
+    ...vueDemi,
+    KeepAlive
+  };
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+it("should render only active step", () => {
+  const screen = render({
+    components: { Step, StepSlider },
+    template: `
+      <StepSlider :active="1">
+        <Step>Step 1</Step>
+        <Step>Step 2</Step>
+      </StepSlider>
+    `
+  });
+  const step1 = screen.queryByText("Step 1");
+  const step2 = screen.queryByText("Step 2");
+  expect(step1).not.toBeInTheDocument();
+  expect(step2).toBeInTheDocument();
+});
+it("should keeping alive component if prop keep-alive is provided", async () => {
+  render({
+    components: {
+      Step,
+      StepSlider
+    },
+    template: `
+      <StepSlider :active="0" keep-alive>
+        <Step>Step 1</Step>
+        <Step>Step 2</Step>
+      </StepSlider>
+    `,
+    setup() {
+      return {};
+    }
+  });
+  expect(KeepAlive).toBeCalled();
+});

package/dist/components/steps/Steps.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/steps/Steps.spec.mjs

@@ -0,0 +1,262 @@
+import { fireEvent, render } from "@testing-library/vue";
+import Steps from "./Steps.vue";
+import Step from "./Step.vue";
+import { delay } from "nanodelay";
+import { vi } from "vitest";
+import { ref } from "vue-demi";
+it("should render properly", () => {
+  const screen = render({
+    components: { Steps, Step },
+    template: `
+      <Steps>
+        <Step />
+        <Step />
+      </Steps>
+    `
+  });
+  const steps = screen.queryByTestId("steps");
+  expect(steps).toBeInTheDocument();
+});
+it("should able to slide to next step if `next()` called", async () => {
+  const screen = render({
+    components: { Steps, Step },
+    template: `
+      <Steps>
+        <Step>
+          <template #default="{ prev, next }">
+            <button @click="prev">
+              Prev
+            </button>
+            <button @click="next">
+              Next
+            </button>
+          </template>
+        </Step>
+        <Step>
+          <span>Step 2</span>
+        </Step>
+      </Steps>
+    `
+  });
+  const nextBtn = screen.queryByText("Next");
+  await fireEvent.click(nextBtn);
+  await delay(0);
+  const step2 = screen.queryByText("Step 2");
+  expect(step2).toBeInTheDocument();
+});
+it("should able to slide to previous step if `prev()` called", async () => {
+  const screen = render({
+    components: { Steps, Step },
+    template: `
+      <Steps :modelValue="2">
+        <Step>
+          <span>Step 1</span>
+        </Step>
+        <Step>
+          <template #default="{ prev, next }">
+            <button @click="prev">
+              Prev
+            </button>
+            <button @click="next">
+              Next
+            </button>
+          </template>
+        </Step>
+      </Steps>
+    `
+  });
+  const prevBtn = screen.queryByText("Prev");
+  await fireEvent.click(prevBtn);
+  await delay(0);
+  const step2 = screen.queryByText("Step 1");
+  expect(step2).toBeInTheDocument();
+});
+it("should able to slide to spesific step if `goStep()` called", async () => {
+  const screen = render({
+    components: { Steps, Step },
+    template: `
+      <Steps :modelValue="3">
+        <Step>
+          <span>Step 1</span>
+        </Step>
+        <Step>
+          <span>Step 2</span>
+        </Step>
+        <Step>
+          <template #default="{ toStep }">
+            <button @click="toStep(1)">
+              Goto Home
+            </button>
+          </template>
+        </Step>
+      </Steps>
+    `
+  });
+  const gotoBtn = screen.queryByText("Goto Home");
+  await fireEvent.click(gotoBtn);
+  await delay(0);
+  const step2 = screen.queryByText("Step 1");
+  expect(step2).toBeInTheDocument();
+});
+it("should trigger on-before-next when next() is called", async () => {
+  const onBeforeNext = vi.fn(() => true);
+  const screen = render({
+    components: { Step, Steps },
+    template: `
+      <Steps :on-before-next="onBeforeNext">
+        <Step>
+          <template #default="{ prev, next }">
+            <button @click="prev">
+              Prev
+            </button>
+            <button @click="next">
+              Next
+            </button>
+          </template>
+        </Step>
+        <Step />
+      </Steps>
+    `,
+    setup() {
+      return { onBeforeNext };
+    }
+  });
+  const next = screen.queryByText("Next");
+  await fireEvent.click(next);
+  await delay(0);
+  expect(onBeforeNext).toBeCalledWith(2, 1);
+});
+it("should trigger on-before-prev when prev() is called", async () => {
+  const onBeforePrev = vi.fn(() => true);
+  const screen = render({
+    components: { Step, Steps },
+    template: `
+      <Steps
+        :on-before-prev="onBeforePrev"
+        :modelValue="2">
+        <Step />
+        <Step>
+          <template #default="{ prev, next }">
+            <button @click="prev">
+              Prev
+            </button>
+            <button @click="next">
+              Next
+            </button>
+          </template>
+        </Step>
+        <Step />
+      </Steps>
+    `,
+    setup() {
+      return { onBeforePrev };
+    }
+  });
+  const prev = screen.queryByText("Prev");
+  await fireEvent.click(prev);
+  await delay(0);
+  expect(onBeforePrev).toBeCalledWith(1, 2);
+});
+it("should trigger on-finished when next() is called on last step", async () => {
+  const onFinished = vi.fn(() => true);
+  const screen = render({
+    components: { Step, Steps },
+    template: `
+      <Steps :on-finished="onFinished">
+        <Step>
+          <template #default="{ prev, next }">
+            <button @click="prev">
+              Prev
+            </button>
+            <button @click="next">
+              Next
+            </button>
+          </template>
+        </Step>
+      </Steps>
+    `,
+    setup() {
+      return { onFinished };
+    }
+  });
+  const next = screen.queryByText("Next");
+  await fireEvent.click(next);
+  await delay(0);
+  expect(onFinished).toBeCalled();
+});
+it("should modify value inside v-model", async () => {
+  const model = ref(1);
+  const screen = render({
+    components: { Steps, Step },
+    template: `
+      <Steps v-model="model">
+        <Step>
+          <template #default="{ prev, next }">
+            <button @click="prev">
+              Prev
+            </button>
+            <button @click="next">
+              Next
+            </button>
+          </template>
+        </Step>
+        <Step>
+          <span>Step 2</span>
+        </Step>
+      </Steps>
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const nextBtn = screen.queryByText("Next");
+  await fireEvent.click(nextBtn);
+  await delay(0);
+  expect(model.value).toBe(2);
+});
+it("should loop over to start if prop loop set to true", async () => {
+  const model = ref(3);
+  const screen = render({
+    components: { Steps, Step },
+    template: `
+      <Steps v-model="model" loop direction="vertical">
+        <Step>
+          <template #default="{ prev, next }">
+            Step 1
+            <button @click="prev">
+              Prev
+            </button>
+            <button @click="next">
+              Next
+            </button>
+          </template>
+        </Step>
+        <Step>
+          <span>Step 2</span>
+        </Step>
+        <Step>
+          <template #default="{ prev, next }">
+            Step 3
+            <button @click="prev">
+              Prev
+            </button>
+            <button @click="next">
+              Next
+            </button>
+          </template>
+        </Step>
+      </Steps>
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const nextBtn = screen.queryByText("Next");
+  await fireEvent.click(nextBtn);
+  await delay(0);
+  expect(model.value).toBe(1);
+  const prevBtn = screen.queryByText("Prev");
+  await fireEvent.click(prevBtn);
+  await delay(0);
+  expect(model.value).toBe(3);
+});

package/dist/components/steps/Steps.vue

@@ -11,125 +11,91 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { PropType, VNode } from 'vue-demi'
+<script setup>
 import {
   computed,
   provide,
-  ref,
-} from 'vue-demi'
-import StepSlider from './StepSlider.vue'
-import { useVModel } from '../input'
-import { findAllChildren } from '../utils/vnode'
-import type {
-  TravelHook,
-  FinishedHook,
-  DirectionVariant,
-  AnimationVariant,
-} from '.'
-import { STEPS_CONTEXT } from '.'
-import { syncRef } from '@vueuse/core'
-import { useClamp } from '@vueuse/math'
-import { runAllHooks } from './utils/hook'
-import { noop } from 'lodash-es'
-
+  ref
+} from "vue-demi";
+import StepSlider from "./StepSlider.vue";
+import { useVModel } from "../input";
+import { findAllChildren } from "../utils/vnode";
+import { STEPS_CONTEXT } from ".";
+import { syncRef } from "@vueuse/core";
+import { useClamp } from "@vueuse/math";
+import { runAllHooks } from "./utils/hook";
+import { noop } from "lodash-es";
 const props = defineProps({
   modelValue: {
-    type   : Number,
-    default: 1,
+    type: Number,
+    default: 1
   },
   keepAlive: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   direction: {
-    type   : String as PropType<DirectionVariant>,
-    default: 'horizontal',
+    type: String,
+    default: "horizontal"
   },
   loop: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   animation: {
-    type   : String as PropType<AnimationVariant>,
-    default: 'slide',
+    type: String,
+    default: "slide"
   },
   onBeforePrev: {
-    type   : Function as PropType<TravelHook>,
-    default: () => true,
+    type: Function,
+    default: () => true
   },
   onBeforeNext: {
-    type   : Function as PropType<TravelHook>,
-    default: () => true,
+    type: Function,
+    default: () => true
   },
   onFinished: {
-    type   : Function as PropType<FinishedHook>,
-    default: noop,
-  },
-})
-
-defineEmits<{
-  'update:modelValue': [number],
-}>()
-
-const slots = defineSlots<{
-  'default'(): VNode[],
-}>()
-
-const onNextHooks = ref([props.onBeforeNext])
-const onPrevHooks = ref([props.onBeforePrev])
-
-const model      = useVModel(props)
-const transition = ref(props.direction === 'vertical' ? 'slide-top' : 'slide-left')
-
+    type: Function,
+    default: noop
+  }
+});
+defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const onNextHooks = ref([props.onBeforeNext]);
+const onPrevHooks = ref([props.onBeforePrev]);
+const model = useVModel(props);
+const transition = ref(props.direction === "vertical" ? "slide-top" : "slide-left");
 const total = computed(() => {
-  return findAllChildren(slots.default(), 'Step').length
-})
-
-const step = useClamp(model, 1, total)
-
+  return findAllChildren(slots.default(), "Step").length;
+});
+const step = useClamp(model, 1, total);
 const canNext = computed(() => {
-  return props.loop || model.value <= total.value
-})
-
+  return props.loop || model.value <= total.value;
+});
 const canPrev = computed(() => {
-  return props.loop || model.value > 1
-})
-
-async function next () {
+  return props.loop || model.value > 1;
+});
+async function next() {
   if (canNext.value)
-    await toStep(model.value + 1)
+    await toStep(model.value + 1);
 }
-
-async function prev () {
+async function prev() {
   if (canPrev.value)
-    await toStep(model.value - 1)
+    await toStep(model.value - 1);
 }
-
-async function toStep (to: number) {
-  const from  = model.value
-  const hooks = to > from
-    ? onNextHooks.value
-    : onPrevHooks.value
-
-  const toIndex = props.loop
-    ? (((to - 1) % total.value + total.value) % total.value) + 1
-    : to
-
+async function toStep(to) {
+  const from = model.value;
+  const hooks = to > from ? onNextHooks.value : onPrevHooks.value;
+  const toIndex = props.loop ? ((to - 1) % total.value + total.value) % total.value + 1 : to;
   if (await runAllHooks(hooks, toIndex, from)) {
     if (toIndex <= total.value) {
-      transition.value = to > from
-        ? (props.direction === 'vertical' ? `${props.animation}-top` : `${props.animation}-left`)
-        : (props.direction === 'vertical' ? `${props.animation}-bottom` : `${props.animation}-right`)
-
-      step.value = toIndex
+      transition.value = to > from ? props.direction === "vertical" ? `${props.animation}-top` : `${props.animation}-left` : props.direction === "vertical" ? `${props.animation}-bottom` : `${props.animation}-right`;
+      step.value = toIndex;
     } else
-      await props.onFinished()
+      await props.onFinished();
   }
 }
-
-syncRef(step, model)
-
+syncRef(step, model);
 provide(STEPS_CONTEXT, {
   step,
   next,
@@ -139,8 +105,8 @@ provide(STEPS_CONTEXT, {
   canPrev,
   toStep,
   onPrevHooks,
-  onNextHooks,
-})
+  onNextHooks
+});
 </script>
 
 <style lang="postcss">