@privyid/persona 1.2.0 → 1.2.1

package/dist/components/signature-draw/SignatureDrawDesktop.vue

@@ -1,148 +0,0 @@
-<template>
-  <div
-    class="signature-draw signature-draw--desktop"
-    data-testid="signature-draw-desktop">
-    <canvas
-      ref="canvas"
-      class="signature-draw__canvas"
-      data-testid="signature-draw-canvas"
-      :width="width"
-      :height="height" />
-    <Caption
-      v-if="isBlank"
-      class="signature-draw__placeholder"
-      data-testid="signature-draw-placeholder">
-      {{ placeholder }}
-    </Caption>
-    <div
-      v-if="!isBlank"
-      class="signature-draw__control">
-      <Button
-        data-testid="signature-draw-reset"
-        variant="link"
-        size="xs"
-        class="signature-draw__reset"
-        pill
-        @click="reset()">
-        <span>{{ resetLabel }}</span>
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {
-  onMounted,
-  ref,
-  watch
-} from "vue-demi";
-import {
-  clearAll,
-  drawLine,
-  placeImage,
-  replaceColor,
-  toDataURL
-} from "./utils/canvas";
-import useDraw from "./utils/use-draw";
-import { useVModel } from "../input";
-import { createLines } from "./utils/smooth-line";
-import Caption from "../caption/Caption.vue";
-import Button from "../button/Button.vue";
-import { usePreview } from "../cropper";
-import { fromBase64 } from "../utils/base64";
-const props = defineProps({
-  modelValue: {
-    type: [String, globalThis.File],
-    default: ""
-  },
-  modelModifiers: {
-    type: Object,
-    default: () => ({})
-  },
-  width: {
-    type: Number,
-    default: 430
-  },
-  height: {
-    type: Number,
-    default: 230
-  },
-  color: {
-    type: String,
-    default: "#000000"
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  },
-  resetLabel: {
-    type: String,
-    default: "Reset"
-  }
-});
-const model = useVModel(props);
-const preview = usePreview(model, "");
-const isBlank = ref(true);
-const canvas = ref();
-const lines = createLines(15);
-function reset() {
-  clearAll(canvas.value);
-  isBlank.value = true;
-  model.value = "";
-}
-function setColor(color) {
-  if (!isBlank.value) {
-    replaceColor(canvas.value, color);
-    const result = toDataURL(canvas.value);
-    const value = props.modelModifiers.base64 ? result : fromBase64(result);
-    model.value = value;
-  }
-}
-watch(() => props.color, setColor);
-useDraw(canvas, {
-  onstart(event) {
-    for (const line of lines)
-      line.start(event.pageX, event.pageY);
-  },
-  onmove(event) {
-    for (const line of lines) {
-      const coordinate = line.move(event.pageX, event.pageY);
-      const options = { color: props.color };
-      drawLine(canvas.value, coordinate, options);
-    }
-    const result = toDataURL(canvas.value);
-    const value = props.modelModifiers.base64 ? result : fromBase64(result);
-    isBlank.value = false;
-    model.value = value;
-  }
-});
-onMounted(() => {
-  if (model.value && preview.value) {
-    placeImage(canvas.value, preview.value);
-    isBlank.value = false;
-  }
-});
-</script>
-
-<style lang="postcss">
-  .signature-draw {
-    @apply relative inline-block;
-
-    &--desktop {
-      .signature-draw__canvas {
-        @apply bg-default touch-none cursor-crosshair border rounded border-dashed;
-      }
-    }
-
-    &__placeholder {
-      @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none text-center text-muted;
-    }
-
-    &__reset {
-      @apply absolute right-1 top-1 bg-default;
-      &.btn--variant-link.btn--default {
-        @apply dark:text-dark-subtlest hover:dark:text-dark-on-emphasis;
-      }
-    }
-  }
-</style>

package/dist/components/signature-draw/SignatureDrawDesktop.vue.d.ts

@@ -1,76 +0,0 @@
-import type { PropType } from 'vue-demi';
-import type { ModelModifier } from '../dropzone';
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: (StringConstructor | {
-            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
-            prototype: File;
-        })[];
-        default: string;
-    };
-    modelModifiers: {
-        type: PropType<ModelModifier>;
-        default: () => ModelModifier;
-    };
-    width: {
-        type: NumberConstructor;
-        default: number;
-    };
-    height: {
-        type: NumberConstructor;
-        default: number;
-    };
-    color: {
-        type: StringConstructor;
-        default: string;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    resetLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: (StringConstructor | {
-            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
-            prototype: File;
-        })[];
-        default: string;
-    };
-    modelModifiers: {
-        type: PropType<ModelModifier>;
-        default: () => ModelModifier;
-    };
-    width: {
-        type: NumberConstructor;
-        default: number;
-    };
-    height: {
-        type: NumberConstructor;
-        default: number;
-    };
-    color: {
-        type: StringConstructor;
-        default: string;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    resetLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    modelValue: string | File;
-    width: number;
-    height: number;
-    color: string;
-    placeholder: string;
-    modelModifiers: ModelModifier;
-    resetLabel: string;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/signature-draw/SignatureDrawMobile.spec.d.ts

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

package/dist/components/signature-draw/SignatureDrawMobile.spec.mjs

@@ -1,243 +0,0 @@
-import { render, fireEvent } from "@testing-library/vue";
-import { triggerDraw, useDraw } from "./__mocks__/use-draw.mjs";
-import * as canvas from "./__mocks__/canvas.mjs";
-import { vi } from "vitest";
-import { nextTick, ref } from "vue-demi";
-import { setWindow, useWindowSize } from "./__mocks__/use-window-size.mjs";
-import * as image from "./__mocks__/image.mjs";
-import SignatureDrawMobile from "./SignatureDrawMobile.vue";
-import { delay } from "nanodelay";
-vi.mock("./utils/use-draw.ts", () => ({ default: useDraw }));
-vi.mock("./utils/canvas.ts", () => canvas);
-vi.mock("./utils/image.ts", () => image);
-vi.mock("@vueuse/core", async () => {
-  const vueuse = await vi.importActual("@vueuse/core");
-  return {
-    ...vueuse,
-    useWindowSize
-  };
-});
-beforeEach(() => {
-  setWindow(375, 667);
-  vi.spyOn(window.URL, "createObjectURL").mockImplementation((file) => {
-    return `blob://${file.name}`;
-  });
-});
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-it("should render properly", () => {
-  const screen = render({
-    components: { SignatureDrawMobile },
-    template: "<SignatureDrawMobile />"
-  });
-  const draw = screen.queryByTestId("signature-draw-mobile");
-  expect(draw).toBeInTheDocument();
-});
-it("should open modal drawing if button `click to draw` clicked", async () => {
-  const screen = render({
-    components: { SignatureDrawMobile },
-    template: "<SignatureDrawMobile />"
-  });
-  const draw = screen.queryByTestId("signature-draw-mobile");
-  const open = screen.queryByText("Click to Draw");
-  expect(draw).toBeInTheDocument();
-  expect(open).toBeInTheDocument();
-  await fireEvent.click(open);
-  await delay(0);
-  const modal = screen.queryByTestId("signature-draw-modal");
-  const drawCanvas = screen.queryByTestId("signature-draw-desktop");
-  expect(modal).toBeInTheDocument();
-  expect(drawCanvas).toBeInTheDocument();
-});
-it("should go to rotate mode if screen width too small", async () => {
-  const screen = render({
-    components: { SignatureDrawMobile },
-    template: '<SignatureDrawMobile :width="430" />'
-  });
-  const draw = screen.queryByTestId("signature-draw-mobile");
-  const open = screen.queryByText("Click to Draw");
-  setWindow(400, 800);
-  await nextTick();
-  expect(draw).toBeInTheDocument();
-  expect(draw).toHaveClass("signature-draw--rotate");
-  expect(draw).not.toHaveClass("signature-draw--normal");
-  await fireEvent.click(open);
-  await delay(0);
-  const desktop = screen.queryByTestId("signature-draw-desktop");
-  const drawCanvas = screen.queryByTestId("signature-draw-canvas");
-  expect(desktop).toHaveClass("signature-draw--rotate");
-  expect(drawCanvas).toHaveAttribute("width", "230");
-  expect(drawCanvas).toHaveAttribute("height", "430");
-});
-it("should go as is screen width is enought", async () => {
-  const screen = render({
-    components: { SignatureDrawMobile },
-    template: '<SignatureDrawMobile :width="430" />'
-  });
-  const draw = screen.queryByTestId("signature-draw-mobile");
-  const open = screen.queryByText("Click to Draw");
-  setWindow(800, 400);
-  await nextTick();
-  expect(draw).toBeInTheDocument();
-  expect(draw).not.toHaveClass("signature-draw--rotate");
-  expect(draw).toHaveClass("signature-draw--normal");
-  await fireEvent.click(open);
-  const desktop = screen.queryByTestId("signature-draw-desktop");
-  const drawCanvas = screen.queryByTestId("signature-draw-canvas");
-  expect(desktop).toHaveClass("signature-draw--normal");
-  expect(drawCanvas).toHaveAttribute("width", "430");
-  expect(drawCanvas).toHaveAttribute("height", "230");
-});
-it("should disabled window scroll when modal opened, remove it when closed", async () => {
-  const screen = render({
-    components: { SignatureDrawMobile },
-    template: "<SignatureDrawMobile />"
-  });
-  const draw = screen.queryByTestId("signature-draw-mobile");
-  const open = screen.queryByText("Click to Draw");
-  expect(draw).toBeInTheDocument();
-  expect(open).toBeInTheDocument();
-  await fireEvent.click(open);
-  expect(document.body).toHaveStyle({ "overflow-y": "hidden" });
-  const close = screen.queryByText("Save");
-  await fireEvent.click(close);
-  expect(document.body).not.toHaveStyle({ "overflow-y": "hidden" });
-});
-it("should modify state in v-model", async () => {
-  const model = ref("");
-  const screen = render({
-    components: { SignatureDrawMobile },
-    template: '<SignatureDrawMobile v-model.base64="model" />',
-    setup() {
-      return { model };
-    }
-  });
-  const draw = screen.queryByTestId("signature-draw-mobile");
-  const open = screen.queryByText("Click to Draw");
-  expect(draw).toBeInTheDocument();
-  expect(open).toBeInTheDocument();
-  await fireEvent.click(open);
-  triggerDraw();
-  await nextTick();
-  const save = screen.queryByTestId("signature-draw-close");
-  const modal = screen.queryByTestId("signature-draw-modal");
-  await fireEvent.click(save);
-  await delay(1);
-  expect(model.value).toStartWith("data:image/png");
-  expect(modal).not.toBeInTheDocument();
-});
-it("should show preview of sign instead of button, if user has drawn", () => {
-  const model = ref("data:image/png;base64,123456789");
-  const screen = render({
-    components: { SignatureDrawMobile },
-    template: '<SignatureDrawMobile v-model="model" />',
-    setup() {
-      return { model };
-    }
-  });
-  const preview = screen.queryByTestId("signature-draw-preview");
-  expect(preview).toBeInTheDocument();
-});
-it("should open canvas if image preview is clicked", async () => {
-  const model = ref("data:image/png;base64,123456789");
-  const screen = render({
-    components: { SignatureDrawMobile },
-    template: '<SignatureDrawMobile v-model="model" />',
-    setup() {
-      return { model };
-    }
-  });
-  const preview = screen.queryByTestId("signature-draw-preview");
-  await fireEvent.click(preview);
-  await delay(1);
-  const modal = screen.queryByTestId("signature-draw-modal");
-  expect(modal).toBeInTheDocument();
-});
-it("should open canvas if edit button is clicked", async () => {
-  const model = ref("data:image/png;base64,123456789");
-  const screen = render({
-    components: { SignatureDrawMobile },
-    template: '<SignatureDrawMobile v-model="model" />',
-    setup() {
-      return { model };
-    }
-  });
-  const preview = screen.queryByTestId("signature-draw-edit");
-  await fireEvent.click(preview);
-  await delay(1);
-  const modal = screen.queryByTestId("signature-draw-modal");
-  expect(modal).toBeInTheDocument();
-});
-it("should change draw button label if `openDrawLabel` prop is provided", () => {
-  const screen = render({
-    components: { SignatureDrawMobile },
-    template: '<SignatureDrawMobile open-draw-label="Open" />'
-  });
-  const open = screen.queryByTestId("signature-draw-open");
-  expect(open).toBeInTheDocument();
-  expect(open).toHaveTextContent("Open");
-});
-it("should change save button label if `closeDrawLabel` prop is provided", async () => {
-  const screen = render({
-    components: { SignatureDrawMobile },
-    template: '<SignatureDrawMobile close-draw-label="Simpan" />'
-  });
-  const open = screen.queryByTestId("signature-draw-open");
-  await fireEvent.click(open);
-  await delay(1);
-  const close = screen.queryByTestId("signature-draw-close");
-  expect(close).toBeInTheDocument();
-  expect(close).toHaveTextContent("Simpan");
-});
-it("should able to replace color", async () => {
-  const color = ref("#000000");
-  const model = ref("data:image/png;base64,123456789");
-  const screen = render({
-    components: { SignatureDrawMobile },
-    template: '<SignatureDrawMobile v-model.base64="model" :color="color" />',
-    setup() {
-      return {
-        color,
-        model
-      };
-    }
-  });
-  const draw = screen.queryByTestId("signature-draw-mobile");
-  expect(draw).toBeInTheDocument();
-  color.value = "#abcdef";
-  await nextTick();
-  await delay(1);
-  expect(image.replaceColor).toHaveBeenCalledWith("data:image/png;base64,123456789", "#abcdef");
-  expect(model.value).toEndWith("color(#abcdef)");
-});
-it("should modify state in v-model when change color", async () => {
-  const model = ref();
-  const color = ref("#000000");
-  const screen = render({
-    components: { SignatureDrawMobile },
-    template: '<SignatureDrawMobile v-model="model" :color="color" />',
-    setup() {
-      return { model, color };
-    }
-  });
-  setWindow(800, 400);
-  const draw = screen.queryByTestId("signature-draw-mobile");
-  const open = screen.queryByText("Click to Draw");
-  expect(draw).toBeInTheDocument();
-  expect(open).toBeInTheDocument();
-  await fireEvent.click(open);
-  triggerDraw();
-  await nextTick();
-  const save = screen.queryByTestId("signature-draw-close");
-  const modal = screen.queryByTestId("signature-draw-modal");
-  await fireEvent.click(save);
-  await delay(1);
-  expect(model.value).toBeInstanceOf(File);
-  expect(modal).not.toBeInTheDocument();
-  const oldFile = model.value;
-  color.value = "#abcdef";
-  await nextTick();
-  await delay(1);
-  expect(model.value).not.toBe(oldFile);
-});

package/dist/components/signature-draw/SignatureDrawMobile.vue

@@ -1,212 +0,0 @@
-<template>
-  <div
-    v-p-aspect-ratio="width / height"
-    class="signature-draw signature-draw--mobile"
-    data-testid="signature-draw-mobile"
-    :class="classNames"
-    :style="style">
-    <div class="signature-draw__preview">
-      <template v-if="model">
-        <img
-          :src="preview"
-          alt="signature-draw-preview"
-          data-testid="signature-draw-preview"
-          @click="open()">
-        <Button
-          variant="link"
-          size="xs"
-          class="signature-draw__reset"
-          data-testid="signature-draw-edit"
-          icon
-          @click="open()">
-          <IconEdit />
-        </Button>
-      </template>
-      <template v-else>
-        <Button
-          data-testid="signature-draw-open"
-          @click="open()">
-          {{ openDrawLabel }}
-        </Button>
-      </template>
-    </div>
-    <transition name="zoom-in">
-      <div
-        v-if="isOpen"
-        class="signature-draw__modal"
-        data-testid="signature-draw-modal">
-        <SignatureDrawDesktop
-          v-model.base64="rawModel"
-          :class="classNames"
-          :placeholder="placeholder"
-          :color="color"
-          :width="mode === 'rotate' ? height : width"
-          :height="mode === 'rotate' ? width : height"
-          :reset-label="resetLabel" />
-        <Button
-          class="signature-draw__close"
-          nganu="1311"
-          data-testid="signature-draw-close"
-          @click="close()">
-          <span>{{ closeDrawLabel }}</span>
-        </Button>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script setup>
-import { useWindowSize } from "@vueuse/core";
-import {
-  computed,
-  ref,
-  watch
-} from "vue-demi";
-import Button from "../button/Button.vue";
-import { useVModel } from "../input";
-import SignatureDrawDesktop from "./SignatureDrawDesktop.vue";
-import { replaceColor, rotateImage } from "./utils/image";
-import IconEdit from "@privyid/persona-icon/vue/edit/20.vue";
-import { vPAspectRatio } from "../aspect-ratio";
-import { usePreview } from "../cropper";
-import { fromBase64 } from "../utils/base64";
-const props = defineProps({
-  modelValue: {
-    type: [String, globalThis.File],
-    default: ""
-  },
-  modelModifiers: {
-    type: Object,
-    default: () => ({})
-  },
-  width: {
-    type: Number,
-    default: 430
-  },
-  height: {
-    type: Number,
-    default: 230
-  },
-  color: {
-    type: String,
-    default: "#000000"
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  },
-  resetLabel: {
-    type: String,
-    default: "Reset"
-  },
-  openDrawLabel: {
-    type: String,
-    default: "Click to Draw"
-  },
-  closeDrawLabel: {
-    type: String,
-    default: "Save"
-  }
-});
-const model = useVModel(props);
-const preview = usePreview(model, "");
-const rawModel = ref("");
-const isOpen = ref(false);
-const screen = useWindowSize();
-const mode = computed(() => {
-  return screen.width.value < props.width + 32 ? "rotate" : "normal";
-});
-const classNames = computed(() => {
-  const result = [];
-  if (mode.value)
-    result.push(`signature-draw--${mode.value}`);
-  return result;
-});
-const style = computed(() => {
-  return {
-    width: `${props.width}px`,
-    aspectRatio: `${props.width / props.height}`
-  };
-});
-async function open() {
-  const result = preview.value && mode.value === "rotate" ? await rotateImage(preview.value, 90) : preview.value;
-  rawModel.value = result;
-  isOpen.value = true;
-}
-async function close() {
-  const result = rawModel.value && mode.value === "rotate" ? await rotateImage(rawModel.value, -90) : rawModel.value;
-  const value = props.modelModifiers.base64 ? result : fromBase64(result);
-  model.value = value;
-  isOpen.value = false;
-}
-watch(() => props.color, async (color) => {
-  if (!isOpen.value && preview.value) {
-    const result = await replaceColor(preview.value, color);
-    const value = props.modelModifiers.base64 ? result : fromBase64(result);
-    model.value = value;
-    isOpen.value = false;
-  }
-});
-watch(isOpen, (value) => {
-  if (value)
-    document.body.style.setProperty("overflow-y", "hidden");
-  else
-    document.body.style.removeProperty("overflow-y");
-});
-</script>
-
-<style lang="postcss">
-  .signature-draw {
-    &--mobile {
-      @apply border rounded border-dashed max-w-full text-center flex items-center justify-center bg-default;
-    }
-
-    &__modal {
-      @apply fixed w-full h-full top-0 left-0 bg-default z-50 flex items-center justify-center flex-col p-5;
-      @apply dark:bg-dark-default;
-    }
-
-    &__close {
-      @apply mt-4;
-    }
-
-    &--rotate {
-      .signature-draw__close {
-        @apply mr-4 mt-0;
-      }
-
-      .signature-draw__modal {
-        @apply flex-col-reverse;
-
-        &,
-        & * {
-          @apply vertical-lr;
-        }
-
-        .signature-draw__reset {
-          @apply bottom-1 top-auto;
-        }
-
-        .btn--xs {
-          @apply py-2 px-1 pi-1;
-        }
-
-        .btn--md {
-          @apply py-5 px-3 pi-3;
-        }
-      }
-    }
-
-    &__preview {
-      @apply w-full flex items-center justify-center;
-
-      .btn--variant-solid.btn--default {
-        @apply dark:text-dark-subtlest hover:dark:text-dark-on-emphasis;
-      }
-
-      & > img {
-        @apply w-full h-full;
-      }
-    }
-  }
-</style>