@privyid/persona 1.1.1 → 1.2.0

package/dist/components/select/utils/use-on-typing.spec.mjs

@@ -0,0 +1,34 @@
+import { vi } from "vitest";
+import { nextTick, ref } from "vue-demi";
+import { onFinishTyping, onStartTyping } from "./use-on-typing.mjs";
+describe("onStartTyping", () => {
+  it("should invoke handler when value changed", async () => {
+    const model = ref("");
+    const handler = vi.fn();
+    onStartTyping(model, handler);
+    model.value = "Coba Lagi";
+    await nextTick();
+    expect(handler).toBeCalled();
+  });
+});
+describe("onFinishTyping", () => {
+  beforeAll(() => {
+    vi.useFakeTimers();
+  });
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+  it("should invoke handler when value finished change (500ms after last changed)", async () => {
+    const model = ref("");
+    const handler = vi.fn();
+    onFinishTyping(model, handler);
+    model.value = "Coba";
+    await nextTick();
+    model.value = "Coba Lagi";
+    await nextTick();
+    expect(handler).not.toBeCalled();
+    vi.advanceTimersByTime(500);
+    await nextTick();
+    expect(handler).toBeCalled();
+  });
+});

package/dist/components/sheet/Sheet.spec.d.ts

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

package/dist/components/sheet/Sheet.spec.mjs

@@ -0,0 +1,118 @@
+import { fireEvent, render } from "@testing-library/vue";
+import { nextTick, ref } from "vue-demi";
+import pSheet from "./Sheet.vue";
+it("should render properly", () => {
+  const screen = render({
+    components: { pSheet },
+    template: `
+      <p-sheet />
+    `
+  });
+  const sheet = screen.queryByTestId("sheet");
+  expect(sheet).toBeInTheDocument();
+  expect(sheet).toHaveClass("sheet--left");
+});
+it("should able position using prop `position`", () => {
+  const screen = render({
+    components: { pSheet },
+    template: `
+      <p-sheet position="top" />
+    `
+  });
+  const sheet = screen.queryByTestId("sheet");
+  expect(sheet).toBeInTheDocument();
+  expect(sheet).toHaveClass("sheet--top");
+  expect(sheet).not.toHaveClass("sheet--left");
+});
+it("should able to show hide using v-model", async () => {
+  const model = ref(false);
+  const screen = render({
+    components: { pSheet },
+    template: `
+      <p-sheet v-model="model" />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const sheet = screen.queryByTestId("sheet");
+  expect(sheet).toBeInTheDocument();
+  model.value = true;
+  await nextTick();
+  const content = screen.queryByTestId("sheet-content");
+  const backdrop = screen.queryByTestId("sheet-backdrop");
+  expect(content).toBeInTheDocument();
+  expect(backdrop).toBeVisible();
+});
+it("should hide the sheet if backdrop clicked", async () => {
+  const model = ref(false);
+  const screen = render({
+    components: { pSheet },
+    template: `
+      <p-sheet v-model="model" />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const sheet = screen.queryByTestId("sheet");
+  expect(sheet).toBeInTheDocument();
+  model.value = true;
+  await nextTick();
+  const content = screen.queryByTestId("sheet-content");
+  const backdrop = screen.queryByTestId("sheet-backdrop");
+  expect(content).toBeInTheDocument();
+  expect(backdrop).toBeVisible();
+  await fireEvent.click(backdrop);
+  expect(model.value).toBe(false);
+  expect(content).not.toBeInTheDocument();
+  expect(backdrop).not.toBeVisible();
+});
+it("should not hide the sheet when backdrop clicked if set `no-close-on-backdrop`", async () => {
+  const model = ref(false);
+  const screen = render({
+    components: { pSheet },
+    template: `
+      <p-sheet v-model="model" no-close-on-backdrop />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const sheet = screen.queryByTestId("sheet");
+  expect(sheet).toBeInTheDocument();
+  model.value = true;
+  await nextTick();
+  const content = screen.queryByTestId("sheet-content");
+  const backdrop = screen.queryByTestId("sheet-backdrop");
+  expect(content).toBeInTheDocument();
+  expect(backdrop).toBeVisible();
+  await fireEvent.click(backdrop);
+  expect(model.value).toBe(true);
+  expect(content).toBeInTheDocument();
+  expect(backdrop).toBeVisible();
+});
+it("should close when `escape` key was pressed", async () => {
+  const model = ref(false);
+  const screen = render({
+    components: { pSheet },
+    template: `
+      <p-sheet v-model="model" no-close-on-backdrop />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const sheet = screen.queryByTestId("sheet");
+  expect(sheet).toBeInTheDocument();
+  model.value = true;
+  await nextTick();
+  const content = screen.queryByTestId("sheet-content");
+  const backdrop = screen.queryByTestId("sheet-backdrop");
+  expect(content).toBeInTheDocument();
+  expect(backdrop).toBeVisible();
+  await fireEvent.keyDown(window, { key: "Escape" });
+  expect(model.value).toBe(false);
+  expect(content).not.toBeInTheDocument();
+  expect(backdrop).not.toBeVisible();
+});

package/dist/components/sheet/Sheet.vue

@@ -26,91 +26,71 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
+<script setup>
 import {
   computed,
   nextTick,
   ref,
-  watch,
-} from 'vue-demi'
-import { useVModel } from '../input'
-import type { AddonPositionVariant } from '../pdf-object'
-import type { SizeVariant } from '../modal'
-import { onKeyStroke } from '@vueuse/core'
-
+  watch
+} from "vue-demi";
+import { useVModel } from "../input";
+import { onKeyStroke } from "@vueuse/core";
 const props = defineProps({
   modelValue: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   position: {
-    type   : String as PropType<AddonPositionVariant>,
-    default: 'left',
+    type: String,
+    default: "left"
   },
   size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'sm',
+    type: String,
+    default: "sm"
   },
   noCloseOnBackdrop: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   noCloseOnEsc: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [boolean],
-  'close': [Event],
-}>()
-
-const target = ref<HTMLDivElement>()
-const model  = useVModel(props)
-
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["update:modelValue", "close"]);
+const target = ref();
+const model = useVModel(props);
 const classNames = computed(() => {
-  const result: string[] = []
-
+  const result = [];
   if (props.position)
-    result.push(`sheet--${props.position}`)
-
-  // eslint-disable-next-line unicorn/explicit-length-check
+    result.push(`sheet--${props.position}`);
   if (props.size)
-    result.push(`sheet--${props.size}`)
-
-  return result
-})
-
+    result.push(`sheet--${props.size}`);
+  return result;
+});
 const transition = computed(() => {
-  return `sheet--${props.position}`
-})
-
-function close (event: Event = new CustomEvent('close')): void {
-  emit('close', event)
-
+  return `sheet--${props.position}`;
+});
+function close(event = new CustomEvent("close")) {
+  emit("close", event);
   if (!event.defaultPrevented)
-    model.value = false
+    model.value = false;
 }
-
-function closeOnBackdrop (event: Event): void {
+function closeOnBackdrop(event) {
   if (!props.noCloseOnBackdrop)
-    close(event)
+    close(event);
 }
-
-onKeyStroke('Escape', (event) => {
+onKeyStroke("Escape", (event) => {
   if (model.value && !props.noCloseOnEsc)
-    close(event)
-}, { eventName: 'keydown' })
-
+    close(event);
+}, { eventName: "keydown" });
 watch(model, (value) => {
   if (value === false) {
     nextTick(() => {
-      emit('close', new CustomEvent('close'))
-    })
+      emit("close", new CustomEvent("close"));
+    });
   }
-})
+});
 </script>
 
 <style lang="postcss">

package/dist/components/sheet/Sheet.vue.d.ts

@@ -0,0 +1,79 @@
+import type { PropType } from 'vue-demi';
+import type { AddonPositionVariant } from '../pdf-object';
+import type { SizeVariant } from '../modal';
+declare function close(event?: Event): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            close: typeof close;
+        }): any;
+    };
+    refs: {
+        target: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: PropType<AddonPositionVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    noCloseOnBackdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCloseOnEsc: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: boolean) => void;
+    close: (args_0: Event) => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: PropType<AddonPositionVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    noCloseOnBackdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCloseOnEsc: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+    onClose?: ((args_0: Event) => any) | undefined;
+}>, {
+    size: SizeVariant;
+    modelValue: boolean;
+    noCloseOnEsc: boolean;
+    noCloseOnBackdrop: boolean;
+    position: AddonPositionVariant;
+}, {}, {}, {}, 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/sheet/index.md

@@ -0,0 +1,212 @@
+---
+title: Sheet · Components
+description: Off-Canvas container.
+---
+
+<script setup>
+  import { ref } from "vue-demi"
+  import pButton from "../button/Button.vue"
+  import pSheet from "./Sheet.vue"
+  import { vPAspectRatio } from '../aspect-ratio'
+
+  const model  = ref(false)
+  const left   = ref(false)
+  const right  = ref(false)
+  const top    = ref(false)
+  const bottom = ref(false)
+
+  const sm = ref(false)
+  const md = ref(false)
+  const lg = ref(false)
+  const xl = ref(false)
+</script>
+
+# Sheet
+
+> Off-Canvas container.
+
+## Usage
+
+### Simple Usage
+
+<p-button class="mt-4" @click="model = !model">
+  Live Demo
+</p-button>
+
+<p-sheet v-model="model" no-backdrop>
+  <div class="p-4">
+    Hello World
+  </div>
+</p-sheet>
+
+```vue
+<template>
+  <p-sheet v-model="isOpen">
+    <div class="p-4">
+      Hello World
+    </div>
+  </p-sheet>
+</template>
+
+<script setup lang="ts">
+  const isOpen = ref(true)
+</script>
+```
+
+## Position
+
+There are 4 positions you can use, `left`, `right`, `top` and `bottom`. Default is `left`.
+
+<div class="flex space-gap-3">
+  <p-button @click="left = true">
+    Left
+  </p-button>
+  <p-button @click="top = true">
+    Top
+  </p-button>
+  <p-button @click="right = true">
+    Right
+  </p-button>
+  <p-button @click="bottom = true">
+    Bottom
+  </p-button>
+</div>
+
+<p-sheet v-model="left" position="left">
+  <div class="p-4">
+    Position Left
+  </div>
+</p-sheet>
+<p-sheet v-model="top" position="top">
+  <div class="p-4">
+    Position Top
+  </div>
+</p-sheet>
+<p-sheet v-model="right" position="right">
+  <div class="p-4">
+    Position Right
+  </div>
+</p-sheet>
+<p-sheet v-model="bottom" position="bottom">
+  <div class="p-4">
+    Position Bottom
+  </div>
+</p-sheet>
+
+```vue
+<template>
+  <p-sheet v-model="model" position="left">
+    <div class="p-4">
+      Position Left
+    </div>
+  </p-sheet>
+  <p-sheet v-model="model2" position="top">
+    <div class="p-4">
+      Position Top
+    </div>
+  </p-sheet>
+  <p-sheet v-model="model3" position="right">
+    <div class="p-4">
+      Position Right
+    </div>
+  </p-sheet>
+  <p-sheet v-model="model4" position="bottom">
+    <div class="p-4">
+      Position Bottom
+    </div>
+  </p-sheet>
+</template>
+```
+
+## Sizing
+
+There are 4 sizes you can use, `sm`, `md`, `lg` and `xl`. Default is `sm`.
+
+<div class="flex space-gap-3">
+  <p-button @click="sm = true">
+    sm
+  </p-button>
+  <p-button @click="md = true">
+    md
+  </p-button>
+  <p-button @click="lg = true">
+    lg
+  </p-button>
+  <p-button @click="xl = true">
+    xl
+  </p-button>
+</div>
+
+<p-sheet v-model="sm" size="sm">
+  <div class="p-4">
+    Small
+  </div>
+</p-sheet>
+<p-sheet v-model="md" size="md">
+  <div class="p-4">
+    Medium
+  </div>
+</p-sheet>
+<p-sheet v-model="lg" size="lg">
+  <div class="p-4">
+    Large
+  </div>
+</p-sheet>
+<p-sheet v-model="xl" size="xl">
+  <div class="p-4">
+    Extra Large
+  </div>
+</p-sheet>
+
+```vue
+<template>
+  <p-sheet v-model="modelSM" size="sm">
+    <div class="p-4">
+      Small
+    </div>
+  </p-sheet>
+  <p-sheet v-model="modelMD" size="md">
+    <div class="p-4">
+      Medium
+    </div>
+  </p-sheet>
+  <p-sheet v-model="modelLG" size="lg">
+    <div class="p-4">
+      Large
+    </div>
+  </p-sheet>
+  <p-sheet v-model="modelXL" size="xl">
+    <div class="p-4">
+      Extra Large
+    </div>
+  </p-sheet>
+</template>
+```
+
+## API
+
+### Props
+
+| Props               |   Type    | Default | Description                                                    |
+|---------------------|:---------:|:-------:|----------------------------------------------------------------|
+| `position`          | `String`  | `left`  | Sheet positions, valid value: `left`, `right`, `top`, `bottom` |
+| `size`              | `String`  |  `sm`   | Sheet size, valid value: `sm`, `md`, `lg`, `xl`                |
+| `noCloseOnEsc`      | `Boolean` | `false` | No close modal while Escape was pressed                        |
+| `noCloseOnBackdrop` | `Boolean` | `false` | Disabled close when click on backdrop                          |
+
+### Slots
+
+| Name      | Description                       |
+|-----------|-----------------------------------|
+| `default` | Content to place inside the sheet |
+
+### Events
+
+| Name    | Arguments | Description                   |
+|---------|-----------|-------------------------------|
+| `close` | -         | Event when sheet wµill closed |
+
+## See Also
+
+- [Card](/components/card/)
+- [Modal](/components/modal/)

package/dist/components/shimmer/Shimmer.spec.d.ts

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

package/dist/components/shimmer/Shimmer.spec.mjs

@@ -0,0 +1,37 @@
+import { render } from "@testing-library/vue";
+import Shimmer from "./Shimmer.vue";
+it("should render properly without any prop", () => {
+  const screen = render({
+    components: { Shimmer },
+    template: `
+      <Shimmer />
+    `
+  });
+  const shimmer = screen.getByTestId("shimmer");
+  expect(shimmer).toBeInTheDocument();
+  expect(shimmer).toHaveClass("shimmer");
+});
+it("should able to change width and height with props `width` and `height`", () => {
+  const screen = render({
+    components: { Shimmer },
+    template: `
+      <Shimmer width="400" height="300" />
+    `
+  });
+  const shimmer = screen.getByTestId("shimmer");
+  expect(shimmer).toBeInTheDocument();
+  expect(shimmer).toHaveAttribute("width", "400");
+  expect(shimmer).toHaveAttribute("height", "300");
+  expect(shimmer).toHaveAttribute("viewBox", "0 0 400 300");
+});
+it("should enable responsive mode when props `responsive` was provided", () => {
+  const screen = render({
+    components: { Shimmer },
+    template: `
+      <Shimmer responsive />
+    `
+  });
+  const shimmer = screen.getByTestId("shimmer");
+  expect(shimmer).toBeInTheDocument();
+  expect(shimmer).toHaveClass("shimmer--responsive");
+});

package/dist/components/shimmer/Shimmer.vue

@@ -70,27 +70,25 @@
   </svg>
 </template>
 
-<script lang="ts" setup>
-import { defineProps } from 'vue-demi'
-import { vBindOnce } from '.'
-import { uniqueId } from 'lodash-es'
-
+<script setup>
+import { defineProps } from "vue-demi";
+import { vBindOnce } from ".";
+import { uniqueId } from "lodash-es";
 defineProps({
   width: {
-    type   : [Number, String],
-    default: 100,
+    type: [Number, String],
+    default: 100
   },
   height: {
-    type   : [Number, String],
-    default: 16,
+    type: [Number, String],
+    default: 16
   },
   responsive: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const uid = uniqueId('shimmer-')
+    type: Boolean,
+    default: false
+  }
+});
+const uid = uniqueId("shimmer-");
 </script>
 
 <style lang="postcss">