@privyid/persona 0.3.0 → 0.5.0

package/dist/components/steps/Step.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="step"
+    data-testid="step">
+    <slot
+      :step="step"
+      :next="next"
+      :prev="prev"
+      :can-prev="canPrev"
+      :can-next="canNext"
+      :to-step="toStep" />
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent
+} from "vue-demi";
+import { useStep } from ".";
+export default defineComponent({
+  name: "Step",
+  props: {
+    onBeforePrev: {
+      type: Function,
+      default: () => true
+    },
+    onBeforeNext: {
+      type: Function,
+      default: () => true
+    }
+  },
+  setup(props) {
+    const {
+      canNext,
+      canPrev,
+      toStep,
+      step,
+      next,
+      prev,
+      onBeforeNext,
+      onBeforePrev
+    } = useStep();
+    onBeforeNext(props.onBeforeNext);
+    onBeforePrev(props.onBeforePrev);
+    return {
+      canNext,
+      canPrev,
+      toStep,
+      prev,
+      next,
+      step
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,32 @@
+import { PropType } from 'vue-demi';
+import { TravelHook } from '.';
+declare const _default: import("vue-demi").DefineComponent<{
+    onBeforePrev: {
+        type: PropType<TravelHook>;
+        default: () => boolean;
+    };
+    onBeforeNext: {
+        type: PropType<TravelHook>;
+        default: () => boolean;
+    };
+}, {
+    canNext: import("vue-demi").Ref<boolean>;
+    canPrev: import("vue-demi").Ref<boolean>;
+    toStep: (...args: any[]) => void;
+    prev: (...args: any[]) => void;
+    next: (...args: any[]) => void;
+    step: import("vue-demi").Ref<number>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    onBeforePrev: {
+        type: PropType<TravelHook>;
+        default: () => boolean;
+    };
+    onBeforeNext: {
+        type: PropType<TravelHook>;
+        default: () => boolean;
+    };
+}>>, {
+    onBeforePrev: TravelHook;
+    onBeforeNext: TravelHook;
+}>;
+export default _default;

package/dist/components/steps/StepSlider.vue

@@ -0,0 +1,39 @@
+<script>
+import {
+  defineComponent,
+  h,
+  KeepAlive,
+  ref,
+  Transition,
+  watch
+} from "vue-demi";
+import { findAllChildren } from "../utils/vnode";
+export default defineComponent({
+  props: {
+    active: {
+      type: Number,
+      default: 0
+    },
+    keepAlive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots }) {
+    const transition = ref("slide-left");
+    watch(() => props.active, (value, old) => {
+      transition.value = value > old ? "slide-left" : "slide-right";
+    });
+    return () => {
+      const step = findAllChildren(slots.default(), "Step").at(props.active);
+      const body = () => {
+        return props.keepAlive ? h(KeepAlive, () => h(step, { key: props.active })) : h(step, { key: props.active });
+      };
+      return h(Transition, {
+        name: transition.value,
+        mode: "out-in"
+      }, body);
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,25 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    active: {
+        type: NumberConstructor;
+        default: number;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    active: {
+        type: NumberConstructor;
+        default: number;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    active: number;
+    keepAlive: boolean;
+}>;
+export default _default;

package/dist/components/steps/Steps.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    class="steps"
+    data-testid="steps">
+    <StepSlider
+      :active="model - 1"
+      :keep-alive="keepAlive">
+      <slot />
+    </StepSlider>
+  </div>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  provide,
+  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";
+export default defineComponent({
+  components: { StepSlider },
+  props: {
+    modelValue: {
+      type: Number,
+      default: 1
+    },
+    keepAlive: {
+      type: Boolean,
+      default: false
+    },
+    onBeforePrev: {
+      type: Function,
+      default: () => true
+    },
+    onBeforeNext: {
+      type: Function,
+      default: () => true
+    },
+    onFinished: {
+      type: Function,
+      default: noop
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue"],
+  setup(props, { slots }) {
+    const onNextHooks = ref([props.onBeforeNext]);
+    const onPrevHooks = ref([props.onBeforePrev]);
+    const model = useVModel(props);
+    const total = computed(() => {
+      return findAllChildren(slots.default(), "Step").length;
+    });
+    const step = useClamp(model, 1, total);
+    const canNext = computed(() => {
+      return model.value <= total.value;
+    });
+    const canPrev = computed(() => {
+      return model.value > 1;
+    });
+    async function next() {
+      if (canNext.value)
+        await toStep(model.value + 1);
+    }
+    async function prev() {
+      if (canPrev.value)
+        await toStep(model.value - 1);
+    }
+    async function toStep(to) {
+      const from = model.value;
+      const hooks = to > from ? onNextHooks.value : onPrevHooks.value;
+      if (await runAllHooks(hooks, to, from)) {
+        if (to <= total.value)
+          step.value = to;
+        else
+          await props.onFinished();
+      }
+    }
+    syncRef(step, model);
+    provide(STEPS_CONTEXT, {
+      step,
+      next,
+      prev,
+      canNext,
+      canPrev,
+      toStep,
+      onPrevHooks,
+      onNextHooks
+    });
+    return { model };
+  }
+});
+</script>
+
+<style lang="postcss">
+  .steps {
+    @apply w-full;
+  }
+</style>

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

@@ -0,0 +1,56 @@
+import { PropType } from 'vue-demi';
+import { TravelHook, FinishedHook } from '.';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onBeforePrev: {
+        type: PropType<TravelHook>;
+        default: () => boolean;
+    };
+    onBeforeNext: {
+        type: PropType<TravelHook>;
+        default: () => boolean;
+    };
+    onFinished: {
+        type: PropType<FinishedHook>;
+        default: (...args: any[]) => void;
+    };
+}, {
+    model: import("vue-demi").Ref<number>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onBeforePrev: {
+        type: PropType<TravelHook>;
+        default: () => boolean;
+    };
+    onBeforeNext: {
+        type: PropType<TravelHook>;
+        default: () => boolean;
+    };
+    onFinished: {
+        type: PropType<FinishedHook>;
+        default: (...args: any[]) => void;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    modelValue: number;
+    onBeforePrev: TravelHook;
+    onBeforeNext: TravelHook;
+    keepAlive: boolean;
+    onFinished: FinishedHook;
+}>;
+export default _default;

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

@@ -0,0 +1,26 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue-demi';
+export declare type TravelHook = (to: number, from: number) => boolean | Promise<boolean>;
+export declare type FinishedHook = () => void | Promise<void>;
+export interface StepContext {
+    next: () => void;
+    prev: () => void;
+    toStep: (step: number) => void;
+    step: Ref<number>;
+    canPrev: ComputedRef<boolean>;
+    canNext: ComputedRef<boolean>;
+    onPrevHooks: Ref<TravelHook[]>;
+    onNextHooks: Ref<TravelHook[]>;
+}
+export declare const STEPS_CONTEXT: InjectionKey<StepContext>;
+export declare function useStep(): {
+    onBeforePrev: (hook: TravelHook) => void;
+    onBeforeNext: (hook: TravelHook) => void;
+    next: (...args: any[]) => void;
+    prev: (...args: any[]) => void;
+    toStep: (...args: any[]) => void;
+    step: Ref<number>;
+    canPrev: Ref<boolean>;
+    canNext: Ref<boolean>;
+    onPrevHooks: Ref<any[]>;
+    onNextHooks: Ref<any[]>;
+};

package/dist/components/steps/index.mjs

@@ -0,0 +1,52 @@
+import { tryOnUnmounted } from "@vueuse/core";
+import { runAllHooks } from "./utils/hook.mjs";
+import { noop } from "lodash-es";
+import {
+  inject,
+  ref
+} from "vue-demi";
+export const STEPS_CONTEXT = Symbol("STEPS_CONTEXT");
+export function useStep() {
+  const context = inject(STEPS_CONTEXT, () => {
+    console.warn("<p-step> must be placed inside <p-steps>");
+    return {
+      next: noop,
+      prev: noop,
+      toStep: noop,
+      step: ref(1),
+      canPrev: ref(false),
+      canNext: ref(false),
+      onPrevHooks: ref([]),
+      onNextHooks: ref([])
+    };
+  }, true);
+  const localPrevHooks = ref([]);
+  const localNextHooks = ref([]);
+  function onBeforePrev(hook) {
+    localPrevHooks.value.unshift(hook);
+  }
+  function onBeforeNext(hook) {
+    localNextHooks.value.unshift(hook);
+  }
+  const onPrevHookTrap = async (...args) => {
+    return await runAllHooks(localPrevHooks.value, ...args);
+  };
+  const onNextHookTrap = async (...args) => {
+    return await runAllHooks(localNextHooks.value, ...args);
+  };
+  context.onPrevHooks.value.unshift(onPrevHookTrap);
+  context.onNextHooks.value.unshift(onNextHookTrap);
+  tryOnUnmounted(() => {
+    const pi = context.onPrevHooks.value.indexOf(onPrevHookTrap);
+    const ni = context.onNextHooks.value.indexOf(onNextHookTrap);
+    if (pi > -1)
+      context.onPrevHooks.value.splice(pi, 1);
+    if (ni > -1)
+      context.onNextHooks.value.splice(ni, 1);
+  });
+  return {
+    ...context,
+    onBeforePrev,
+    onBeforeNext
+  };
+}

package/dist/components/steps/utils/hook.d.ts

@@ -0,0 +1,10 @@
+export declare type HookFn = (...args: unknown[]) => unknown | Promise<unknown>;
+export declare function runHook<H extends HookFn>(hook: H, ...args: Parameters<H>): Promise<boolean>;
+export declare function runAllHooks<H extends HookFn>(hooks: Iterable<H>, ...args: Parameters<H>): Promise<boolean>;
+export declare class Hook<H extends HookFn> {
+    protected hooks: H[];
+    constructor();
+    add(hook: H): this;
+    remove(hook: H): this;
+    run(...args: Parameters<H>): Promise<boolean>;
+}

package/dist/components/steps/utils/hook.mjs

@@ -0,0 +1,34 @@
+export async function runHook(hook, ...args) {
+  try {
+    return await hook(...args) !== false;
+  } catch {
+    return false;
+  }
+}
+export async function runAllHooks(hooks, ...args) {
+  let result = true;
+  for (const hook of hooks) {
+    result = await runHook(hook, ...args);
+    if (!result)
+      break;
+  }
+  return result;
+}
+export class Hook {
+  constructor() {
+    this.hooks = [];
+  }
+  add(hook) {
+    this.hooks.unshift(hook);
+    return this;
+  }
+  remove(hook) {
+    const index = this.hooks.indexOf(hook);
+    if (index > -1)
+      this.hooks.splice(index, 1);
+    return this;
+  }
+  async run(...args) {
+    return await runAllHooks(this.hooks, ...args);
+  }
+}

package/dist/components/strengthbar/Strengthbar.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    class="strengthbar"
+    :data-status="status">
+    <div
+      v-for="(active, i) in items"
+      :key="i"
+      class="strengthbar__bar"
+      :class="{ 'strengthbar--active': active }" />
+  </div>
+</template>
+
+<script>
+import { useToNumber } from "@vueuse/core";
+import {
+  computed,
+  defineComponent,
+  toRef
+} from "vue-demi";
+export default defineComponent({
+  props: {
+    length: {
+      type: [Number, String],
+      default: 6
+    },
+    value: {
+      type: [Number, String],
+      default: 0
+    },
+    min: {
+      type: [Number, String],
+      default: 0
+    },
+    max: {
+      type: [Number, String],
+      default: 6
+    }
+  },
+  setup(props) {
+    const min = useToNumber(toRef(props, "min"), { nanToZero: true });
+    const max = useToNumber(toRef(props, "max"), { nanToZero: true });
+    const value = useToNumber(toRef(props, "value"), { nanToZero: true });
+    const length = useToNumber(toRef(props, "length"), { nanToZero: true });
+    const strength = computed(() => {
+      return (value.value - min.value) / (max.value - min.value);
+    });
+    const items = computed(() => {
+      return Array.from({ length: length.value }).map((_, i) => {
+        return Math.round(strength.value * length.value) >= i + 1;
+      });
+    });
+    const status = computed(() => {
+      const val = strength.value * 3;
+      if (val > 2)
+        return "high";
+      else if (val > 1)
+        return "mid";
+      else
+        return "low";
+    });
+    return {
+      strength,
+      items,
+      status
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.strengthbar {
+  @apply flex w-full space-x-4;
+
+  &__bar {
+    @apply rounded-full h-1 bg-subtle-alpha flex-grow transition-colors duration-150;
+  }
+
+  &&[data-status="low"] {
+    .strengthbar--active {
+      @apply bg-danger-emphasis;
+    }
+  }
+
+  &&[data-status="mid"] {
+    .strengthbar--active {
+      @apply bg-warning-emphasis;
+    }
+  }
+
+  &&[data-status="high"] {
+    .strengthbar--active {
+      @apply bg-success-emphasis;
+    }
+  }
+}
+</style>

package/dist/components/strengthbar/Strengthbar.vue.d.ts

@@ -0,0 +1,45 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}, {
+    strength: import("vue-demi").ComputedRef<number>;
+    items: import("vue-demi").ComputedRef<boolean[]>;
+    status: import("vue-demi").ComputedRef<"high" | "mid" | "low">;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>>, {
+    length: string | number;
+    value: string | number;
+    min: string | number;
+    max: string | number;
+}>;
+export default _default;