@privyid/persona 1.1.2 → 1.2.0

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

@@ -0,0 +1,58 @@
+import { vi } from "vitest";
+import {
+  runAllHooks,
+  runHook
+} from "./hook.mjs";
+describe("runHook", () => {
+  it("should execute hook", async () => {
+    const hook = vi.fn(() => true);
+    const result = await runHook(hook, 1, 2);
+    expect(hook).toBeCalledWith(1, 2);
+    expect(result).toBe(true);
+  });
+  it("should return false if hook thrown error", async () => {
+    const hook = vi.fn(() => true).mockRejectedValueOnce(new Error("ERR"));
+    const result = await runHook(hook, 1, 2);
+    expect(hook).toBeCalledWith(1, 2);
+    expect(result).toBe(false);
+  });
+  it("should return true if hook is return nothing but nor thrown an error", async () => {
+    const hook = vi.fn();
+    const result = await runHook(hook, 1, 2);
+    expect(hook).toBeCalledWith(1, 2);
+    expect(result).toBe(true);
+  });
+});
+describe("runAllHook", () => {
+  it("should execute all hooks", async () => {
+    const hook1 = vi.fn(() => true);
+    const hook2 = vi.fn(() => true);
+    const hook3 = vi.fn(() => true);
+    const hooks = [
+      hook1,
+      hook2,
+      hook3
+    ];
+    const result = await runAllHooks(hooks, 1, 2);
+    expect(hook1).toBeCalledWith(1, 2);
+    expect(hook2).toBeCalledWith(1, 2);
+    expect(hook3).toBeCalledWith(1, 2);
+    expect(result).toBe(true);
+  });
+  it("should not run hook if one of hook result false in the middle", async () => {
+    const hook1 = vi.fn(() => true);
+    const hook2 = vi.fn(() => true);
+    const hook3 = vi.fn(() => true);
+    const hooks = [
+      hook1,
+      hook2,
+      hook3
+    ];
+    hook2.mockReturnValueOnce(false);
+    const result = await runAllHooks(hooks, 1, 2);
+    expect(hook1).toBeCalledWith(1, 2);
+    expect(hook2).toBeCalledWith(1, 2);
+    expect(hook3).not.toBeCalledWith(1, 2);
+    expect(result).toBe(false);
+  });
+});

package/dist/components/strengthbar/Strengthbar.vue

@@ -10,58 +10,51 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { useToNumber } from '@vueuse/core'
+<script setup>
+import { useToNumber } from "@vueuse/core";
 import {
   computed,
-  toRef,
-} from 'vue-demi'
-
+  toRef
+} from "vue-demi";
 const props = defineProps({
   length: {
-    type   : [Number, String],
-    default: 6,
+    type: [Number, String],
+    default: 6
   },
   value: {
-    type   : [Number, String],
-    default: 0,
+    type: [Number, String],
+    default: 0
   },
   min: {
-    type   : [Number, String],
-    default: 0,
+    type: [Number, String],
+    default: 0
   },
   max: {
-    type   : [Number, String],
-    default: 6,
-  },
-})
-
-const minValue    = useToNumber(toRef(props, 'min'), { nanToZero: true })
-const maxValue    = useToNumber(toRef(props, 'max'), { nanToZero: true })
-const localValue  = useToNumber(toRef(props, 'value'), { nanToZero: true })
-const lengthValue = useToNumber(toRef(props, 'length'), { nanToZero: true })
-
+    type: [Number, String],
+    default: 6
+  }
+});
+const minValue = useToNumber(toRef(props, "min"), { nanToZero: true });
+const maxValue = useToNumber(toRef(props, "max"), { nanToZero: true });
+const localValue = useToNumber(toRef(props, "value"), { nanToZero: true });
+const lengthValue = useToNumber(toRef(props, "length"), { nanToZero: true });
 const strength = computed(() => {
-  return (localValue.value - minValue.value) / (maxValue.value - minValue.value)
-})
-
+  return (localValue.value - minValue.value) / (maxValue.value - minValue.value);
+});
 const items = computed(() => {
-  return Array.from({ length: lengthValue.value })
-    .map((_, i) => {
-      return Math.round(strength.value * lengthValue.value) >= (i + 1)
-    })
-})
-
+  return Array.from({ length: lengthValue.value }).map((_, i) => {
+    return Math.round(strength.value * lengthValue.value) >= i + 1;
+  });
+});
 const status = computed(() => {
-  const val = strength.value * 3
-
+  const val = strength.value * 3;
   if (val > 2)
-    return 'high'
+    return "high";
   else if (val > 1)
-    return 'mid'
+    return "mid";
   else
-    return 'low'
-})
+    return "low";
+});
 </script>
 
 <style lang="postcss">

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

@@ -0,0 +1,41 @@
+declare const _default: import("vue-demi").DefineComponent<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;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, 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;
+    };
+}>> & Readonly<{}>, {
+    length: string | number;
+    value: string | number;
+    max: string | number;
+    min: string | number;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/strengthbar/index.md

@@ -0,0 +1,155 @@
+---
+title: Strengthbar · Components
+description: Component for displaying measurment.
+---
+
+<script setup>
+  import pStrengthbar from './Strengthbar.vue'
+  import pInputPassword from '../input-password/InputPassword.vue'
+  import pInputRange from '../input-range/InputRange.vue'
+  import { usePasswordStrength } from '../input-password'
+  import { ref } from 'vue-demi'
+
+  const input = ref('')
+  const score = usePasswordStrength(input)
+
+  const range = ref(50)
+
+  const length = ref(6)
+  const range2 = ref(6)
+</script>
+
+# Strengthbar
+
+> Component for displaying measurment.
+
+## Usage
+
+### Simple Usage
+
+<preview class="flex-col space-y-4">
+  <p-strengthbar value="0" />
+  <p-strengthbar value="1" />
+  <p-strengthbar value="2" />
+  <p-strengthbar value="3" />
+  <p-strengthbar value="4" />
+  <p-strengthbar value="5" />
+  <p-strengthbar value="6" />
+</preview>
+
+```vue
+<template>
+  <p-strengthbar value="0" />
+  <p-strengthbar value="1" />
+  <p-strengthbar value="2" />
+  <p-strengthbar value="3" />
+  <p-strengthbar value="4" />
+  <p-strengthbar value="5" />
+  <p-strengthbar value="6" />
+</template>
+```
+
+### For Measuring Password
+
+<preview class="flex-col space-y-4">
+  <p-input-password v-model="input" placeholder="Input your password" />
+  <p-strengthbar :value="score" />
+</preview>
+
+```vue
+<template>
+  <p-input-password v-model="input" placeholder="Input your password" />
+  <p-strengthbar :value="score" />
+</template>
+
+<script setup>
+  import { ref } from 'vue-demi'
+  import { usePasswordStrength } from '@privyid/persona/core'
+
+  const input = ref('')
+  const score = usePasswordStrength(input)
+</script>
+```
+
+## Min and Max
+
+You can set lowest value and highest value for the value with prop `min` and `max`. It usefull when you combine it with [Input Range](/components/input-range/).
+Default is `0` and `6`
+
+<preview class="flex-col space-y-4">
+  <p-input-range v-model="range" min="0" max="100" />
+  <p-strengthbar :value="range" min="0" max="100"  />
+</preview>
+
+```vue
+<template>
+  <p-input-range v-model="range" min="0" max="100" />
+  <p-strengthbar :value="range" min="0" max="100"  />
+</template>
+```
+
+## Number of Bar
+
+You can set number of bar with prop `length`.
+
+<preview class="flex-col space-y-4">
+  <p-input-range v-model="length" min="1" max="12" />
+  <p-input-range v-model="range2" min="0" max="6" />
+  <p-strengthbar :value="range2" :length="length" />
+</preview>
+
+```vue
+<template>
+  <p-input-range v-model="length" min="1" max="12" />
+  <p-input-range v-model="value" min="0" max="6" />
+  <p-strengthbar :value="value" :length="length" />
+</template>
+```
+## API
+
+### Props
+
+| Props      |   Type    | Default | Description            |
+|------------|:---------:|:-------:|------------------------|
+| `min`      | `Number`  |   `0`   | Lowest value in range  |
+| `max`      | `Number`  |   `6`   | Highest value in range |
+| `value`    | `Number`  |   `-`   | Active bar value       |
+| `length`   | `Number`  |   `6`   | Number of bar          |
+
+### Slots
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" class="text-center">There no slots here</td>
+    </tr>
+  </tbody>
+</table>
+
+### Events
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Arguments</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="3" class="text-center">There no props here</td>
+    </tr>
+  </tbody>
+</table>
+
+## See Also
+
+- [Input Password](/components/input-password/)
+- [Input Range](/components/input-range/)

package/dist/components/subheading/Subheading.spec.d.ts

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

package/dist/components/subheading/Subheading.spec.mjs

@@ -0,0 +1,75 @@
+import { render } from "@testing-library/vue";
+import Subheading from "./Subheading.vue";
+it("should rendered properly without any props", () => {
+  const screen = render({
+    components: { Subheading },
+    template: `
+      <Subheading>
+        Subheading Title
+      </Subheading>
+    `
+  });
+  const subheading = screen.queryByTestId("subheading");
+  const text = screen.queryByText("Subheading Title");
+  expect(subheading).toBeInTheDocument();
+  expect(subheading).toHaveClass("subheading", "subheading--md");
+  expect(text).toBeInTheDocument();
+});
+it('should have style "sm" if size set to "sm"', () => {
+  const screen = render({
+    components: { Subheading },
+    template: `
+      <Subheading size="sm">
+        Title
+      </Subheading>
+    `
+  });
+  const subheading = screen.queryByTestId("subheading");
+  expect(subheading).toBeInTheDocument();
+  expect(subheading).toHaveClass("subheading", "subheading--sm");
+  expect(subheading).not.toHaveClass("subheading--md");
+});
+it('should have style "overline" if overline prop is provided', () => {
+  const screen = render({
+    components: { Subheading },
+    template: `
+      <Subheading overline>
+        Title
+      </Subheading>
+    `
+  });
+  const subheading = screen.queryByTestId("subheading");
+  expect(subheading).toBeInTheDocument();
+  expect(subheading).toHaveClass("subheading", "subheading--overline");
+  expect(subheading).not.toHaveClass("subheading--md", "subheading--sm");
+});
+it('should have style "bold" if props `weight` is set to bold', () => {
+  const screen = render({
+    components: { Subheading },
+    template: `
+      <Subheading weight="bold">
+        Subheading Text
+      </Subheading>
+    `
+  });
+  const subheading = screen.queryByTestId("subheading");
+  const text = screen.queryByText("Subheading Text");
+  expect(subheading).toBeInTheDocument();
+  expect(subheading).toHaveClass("subheading--bold");
+  expect(text).toBeInTheDocument();
+});
+it('should have style "uppercase" if props `transform` is set to uppercase', () => {
+  const screen = render({
+    components: { Subheading },
+    template: `
+      <Subheading transform="uppercase">
+        Subheading Text
+      </Subheading>
+    `
+  });
+  const subheading = screen.queryByTestId("subheading");
+  const text = screen.queryByText("Subheading Text");
+  expect(subheading).toBeInTheDocument();
+  expect(subheading).toHaveClass("subheading--uppercase");
+  expect(text).toBeInTheDocument();
+});

package/dist/components/subheading/Subheading.vue

@@ -6,49 +6,38 @@
   </h6>
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import type { SizeVariant } from '.'
-import type { WeightVariant, TransformVariant } from '../heading'
-
+<script setup>
+import { computed } from "vue-demi";
 const props = defineProps({
   size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
+    type: String,
+    default: "md"
   },
   weight: {
-    type   : String as PropType<WeightVariant>,
-    default: 'normal',
+    type: String,
+    default: "normal"
   },
   transform: {
-    type   : String as PropType<TransformVariant>,
-    default: 'normalcase',
+    type: String,
+    default: "normalcase"
   },
   overline: {
-    type   : Boolean,
-    default: undefined,
-  },
-})
-
+    type: Boolean,
+    default: void 0
+  }
+});
 const classNames = computed(() => {
-  const result: String[] = ['subheading']
-
+  const result = ["subheading"];
   if (props.overline)
-    result.push('subheading--overline')
-
-  // eslint-disable-next-line unicorn/explicit-length-check
+    result.push("subheading--overline");
   else if (props.size)
-    result.push(`subheading--${props.size}`)
-
+    result.push(`subheading--${props.size}`);
   if (props.transform)
-    result.push(`subheading--${props.transform}`)
-
+    result.push(`subheading--${props.transform}`);
   if (props.weight)
-    result.push(`subheading--${props.weight}`)
-
-  return result
-})
+    result.push(`subheading--${props.weight}`);
+  return result;
+});
 </script>
 
 <style lang="postcss">

package/dist/components/subheading/Subheading.vue.d.ts

@@ -0,0 +1,59 @@
+import type { PropType } from 'vue-demi';
+import type { SizeVariant } from '.';
+import type { WeightVariant, TransformVariant } from '../heading';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLHeadingElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
+    overline: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
+    overline: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: SizeVariant;
+    weight: WeightVariant;
+    transform: TransformVariant;
+    overline: boolean;
+}, {}, {}, {}, 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;
+    };
+};