@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/pdf-text/PdfText.vue

@@ -1,138 +0,0 @@
-<template>
-  <img
-    class="pdf-text"
-    :width="width"
-    :height="height"
-    :src="preview"
-    :srcset="srcset"
-    :alt="text">
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { onMounted, ref } from 'vue-demi'
-import { createSpinner } from '../avatar/utils/create-image'
-import { usePreview } from '../cropper'
-import type { ModelModifier } from '../dropzone'
-import { useVModel } from '../input'
-import { fromBase64 } from '../utils/base64'
-import { watchDebounced } from '@vueuse/core'
-import generate from './utils/text-to-image'
-
-const props = defineProps({
-  modelValue: {
-    type   : [String, globalThis.File],
-    default: undefined,
-  },
-  modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
-  },
-  text: {
-    type   : String,
-    default: '',
-  },
-  width: {
-    type   : Number,
-    default: 198,
-  },
-  height: {
-    type   : Number,
-    default: 106,
-  },
-  color: {
-    type   : String,
-    default: '#4a5362',
-  },
-  size: {
-    type   : Number,
-    default: 16,
-  },
-  minSize: {
-    type   : Number,
-    default: 11,
-  },
-  maxSize: {
-    type   : Number,
-    default: 72,
-  },
-  fixedSize: {
-    type   : Boolean,
-    default: false,
-  },
-  font: {
-    type   : String,
-    default: 'DM Sans',
-  },
-  lineHeight: {
-    type   : Number,
-    default: 1.5,
-  },
-  padding: {
-    type   : Number,
-    default: 12,
-  },
-  label: {
-    type   : String,
-    default: '',
-  },
-  labelColor: {
-    type   : String,
-    default: '#9EA0A2',
-  },
-  labelFont: {
-    type   : String,
-    default: undefined,
-  },
-  labelSize: {
-    type   : Number,
-    default: 12,
-  },
-})
-
-defineEmits<{
-  'update:modelValue': [unknown],
-}>()
-
-const model   = useVModel(props)
-const preview = usePreview(model, createSpinner(props.width, props.height))
-const srcset  = ref('')
-
-watchDebounced(() => [
-  props.text,
-  props.width,
-  props.height,
-  props.color,
-  props.size,
-  props.fixedSize,
-  props.font,
-  props.lineHeight,
-  props.padding,
-  props.label,
-  props.labelColor,
-  props.labelFont,
-  props.labelSize,
-], () => {
-  load()
-}, { debounce: 300 })
-
-onMounted(() => {
-  load()
-})
-
-async function load () {
-  const result = await generate(props)
-  const value  = props.modelModifiers.base64
-    ? result
-    : fromBase64(result)
-
-  model.value  = value
-  srcset.value = `${await generate(props, 2)} 2x`
-}
-</script>
-
-<style lang="postcss">
-.pdf-object .pdf-text {
-  @apply w-full h-full;
-}
-</style>

package/dist/components/pdf-text/utils/text-to-image.d.ts

@@ -1,68 +0,0 @@
-interface GenerateOptions {
-    /**
-     * Canvas's element
-     */
-    canvas?: HTMLCanvasElement;
-    /**
-     * Text to be generated
-     */
-    text: string;
-    /**
-     * Image width
-     */
-    width: number;
-    /**
-     * Image height
-     */
-    height: number;
-    /**
-     * Text color
-     */
-    color: string;
-    /**
-     * Text font size
-     */
-    size: number;
-    /**
-     * Minimum font size
-     */
-    minSize: number;
-    /**
-     * Maximum font size
-     */
-    maxSize: number;
-    /**
-     * Autofit mode
-     */
-    fixedSize: boolean;
-    /**
-     * Text font family
-     */
-    font: string;
-    /**
-     * Text line height
-     */
-    lineHeight: number;
-    /**
-     * Text box padding
-     */
-    padding: number;
-    /**
-     * Label text
-     */
-    label?: string;
-    /**
-     * Label color
-     */
-    labelColor?: string;
-    /**
-     * Label font family
-     */
-    labelFont?: string;
-    /**
-     * Label font size
-     */
-    labelSize?: number;
-}
-export default function generate(options: GenerateOptions, dpi?: number): Promise<string>;
-export {};

package/dist/components/pdf-text/utils/text-to-image.mjs

@@ -1,120 +0,0 @@
-import { createCanvas } from "../../signature-draw/utils/canvas.mjs";
-import loadFont from "../../signature-text/utils/load-font.mjs";
-import { clamp } from "lodash-es";
-function wrapText(context, text, fontSize, fontFamily, maxWidth) {
-  const lines = [];
-  context.font = `${fontSize}px ${JSON.stringify(fontFamily)}`;
-  context.textBaseline = "top";
-  let line = "";
-  let i;
-  let test;
-  let metrics;
-  for (const paragraph of text.split("\n")) {
-    const words = paragraph.split(" ");
-    for (i = 0; i < words.length; i++) {
-      test = words[i];
-      metrics = context.measureText(test);
-      while (metrics.width > maxWidth) {
-        test = test.slice(0, Math.max(0, test.length - 1));
-        metrics = context.measureText(test);
-      }
-      if (words[i] !== test) {
-        words.splice(i + 1, 0, words[i].slice(test.length));
-        words[i] = test;
-      }
-      test = `${line + words[i]} `;
-      metrics = context.measureText(test);
-      if (metrics.width > maxWidth && i > 0) {
-        lines.push(line);
-        line = `${words[i]} `;
-      } else
-        line = test;
-    }
-    lines.push(line);
-    line = "";
-  }
-  return lines;
-}
-export default async function generate(options, dpi = 1) {
-  const {
-    text,
-    color,
-    padding,
-    font,
-    height,
-    width,
-    size,
-    minSize,
-    maxSize,
-    fixedSize,
-    label,
-    lineHeight
-  } = options;
-  await loadFont(font);
-  const canvas = options.canvas ?? createCanvas(width, height, dpi);
-  const context = canvas.getContext("2d");
-  const maxWidth = width - padding * 2;
-  let y = padding;
-  if (label) {
-    const labelSize = options.labelSize ?? size;
-    const labelFont = options.labelFont ?? font;
-    const labelColor = options.labelColor ?? color;
-    const labelLines = wrapText(
-      context,
-      label,
-      labelSize,
-      labelFont,
-      maxWidth
-    );
-    context.font = `${labelSize}px ${JSON.stringify(labelFont)}`;
-    context.textBaseline = "top";
-    context.textAlign = "start";
-    context.fillStyle = labelColor;
-    for (const line of labelLines) {
-      context.fillText(line, padding, y, maxWidth);
-      y += labelSize * lineHeight;
-    }
-  }
-  if (text) {
-    const maxHeight = height - (y + padding);
-    let fontSize = size;
-    let lines = wrapText(
-      context,
-      text,
-      fontSize,
-      font,
-      maxWidth
-    );
-    if (!fixedSize) {
-      let textHeight = lines.length * lineHeight;
-      let count = 0;
-      do {
-        const newFontSize = clamp(
-          Math.round((maxHeight / textHeight * fontSize + fontSize) / 2),
-          minSize,
-          maxSize
-        );
-        if (newFontSize === fontSize)
-          break;
-        fontSize = newFontSize;
-        lines = wrapText(
-          context,
-          text,
-          fontSize,
-          font,
-          maxWidth
-        );
-        textHeight = lines.length * lineHeight * fontSize;
-      } while (textHeight > maxHeight && ++count < 5);
-    }
-    context.font = `${fontSize}px ${JSON.stringify(font)}`;
-    context.textBaseline = "top";
-    context.textAlign = "start";
-    context.fillStyle = color;
-    for (const line of lines) {
-      context.fillText(line, padding, y, maxWidth);
-      y += fontSize * lineHeight;
-    }
-  }
-  return canvas.toDataURL("image/png");
-}

package/dist/components/pdf-viewer/PdfError.vue

@@ -1,74 +0,0 @@
-<template>
-  <div
-    v-p-aspect-ratio="1122/793"
-    data-testid="pdf-error"
-    class="pdf__error">
-    <Heading element="h3">
-      Failed to load PDF
-    </Heading>
-    <dl class="mt-7">
-      <dt>URL:</dt>
-      <dd class="truncate">
-        <a
-          :href="url"
-          target="_blank">
-          <code>{{ url }}</code>
-        </a>
-      </dd>
-      <dt>
-        Reason:
-      </dt>
-      <dd><code>{{ error.message }}</code></dd>
-      <dt>
-        PDFJS Version:
-      </dt>
-      <dd><code>{{ version }}</code></dd>
-    </dl>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { vPAspectRatio } from '../aspect-ratio'
-import type { PropType } from 'vue-demi'
-import { onMounted, ref } from 'vue-demi'
-import Heading from '../heading/Heading.vue'
-import { getVersion } from './utils/pdfjs'
-
-defineProps({
-  url: {
-    type   : String,
-    default: '',
-  },
-  error: {
-    type   : Object as PropType<Error>,
-    default: () => ({} as Error),
-  },
-})
-
-const version = ref('')
-
-onMounted(async () => {
-  version.value = await getVersion()
-})
-</script>
-
-<style lang="postcss">
-.pdf__error {
-  @apply shadow-lg mb-4 p-6 bg-danger w-full h-full max-w-[var(--p-pdf-container-width)] mx-auto text-default;
-  @apply dark:bg-dark-danger-emphasis dark:text-dark-default;
-
-  a {
-    &,
-    &:hover {
-      > code {
-        @apply text-danger;
-      }
-    }
-  }
-
-  :not(pre) code {
-    @apply bg-emphasis-alpha text-danger;
-    @apply dark:bg-dark-danger dark:text-dark-danger;
-  }
-}
-</style>

package/dist/components/pdf-viewer/PdfLoading.vue

@@ -1,24 +0,0 @@
-<template>
-  <div
-    data-testid="pdf-loading"
-    class="pdf__loading">
-    <img
-      :src="PDF_LOADING_IMG"
-      width="793"
-      height="1122">
-  </div>
-</template>
-
-<script lang="ts" setup>
-import PDF_LOADING_IMG from './assets/pdf-loading.svg'
-</script>
-
-<style lang="postcss">
-.pdf__loading {
-  @apply shadow-lg mb-4 p-4 bg-default max-w-[var(--p-pdf-container-width)] mx-auto;
-
-  > img {
-    @apply max-w-full object-contain h-auto;
-  }
-}
-</style>

package/dist/components/pdf-viewer/PdfNavigation.vue

@@ -1,169 +0,0 @@
-<template>
-  <div
-    data-testid="pdf-navigation"
-    class="pdf__navigation">
-    <div class="pdf__navigation-container">
-      <p-button
-        data-testid="pdf-zoom-out"
-        variant="ghost"
-        size="xs"
-        icon
-        @click="zoomOut">
-        <IconZoomOut />
-      </p-button>
-      <span class="pdf__navigation-scale">
-        {{ (scale * 100).toFixed(0) }}%
-      </span>
-      <p-button
-        data-testid="pdf-zoom-in"
-        variant="ghost"
-        size="xs"
-        icon
-        @click="zoomIn">
-        <IconZoomIn />
-      </p-button>
-      <p-divider vertical />
-      <p-select
-        v-model="page"
-        :options="pages"
-        size="xs" />
-      <span
-        data-testid="pdf-total"
-        class="pdf__navigation-total">
-        <slot name="num-of-pages-navigation">
-          {{ numOfPagesNavLabel }}
-        </slot> {{ totalPage }}</span>
-      <p-button
-        data-testid="pdf-start"
-        variant="ghost"
-        size="xs"
-        icon
-        @click="first">
-        <slot name="first-navigation">
-          {{ firstNavLabel }}
-        </slot>
-      </p-button>
-      <p-button
-        data-testid="pdf-prev"
-        variant="ghost"
-        size="xs"
-        icon
-        @click="prev">
-        <IconPrev />
-      </p-button>
-      <p-button
-        data-testid="pdf-next"
-        variant="ghost"
-        size="xs"
-        icon
-        @click="next">
-        <IconNext />
-      </p-button>
-      <p-button
-        data-testid="pdf-end"
-        variant="ghost"
-        size="xs"
-        icon
-        @click="last">
-        <slot name="last-navigation">
-          {{ lastNavLabel }}
-        </slot>
-      </p-button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue-demi'
-import { usePdfContext } from '.'
-import IconZoomIn from '@privyid/persona-icon/vue/zoom-in/20.vue'
-import IconZoomOut from '@privyid/persona-icon/vue/zoom-out/20.vue'
-import IconPrev from '@privyid/persona-icon/vue/chevron-up/20.vue'
-import IconNext from '@privyid/persona-icon/vue/chevron-down/20.vue'
-import pButton from '../button/Button.vue'
-import pDivider from '../divider/Divider.vue'
-import pSelect from '../select/Select.vue'
-import type { SelectItem } from '../select'
-
-defineProps({
-  firstNavLabel: {
-    type   : String,
-    default: 'First',
-  },
-  lastNavLabel: {
-    type   : String,
-    default: 'Last',
-  },
-  numOfPagesNavLabel: {
-    type   : String,
-    default: 'of',
-  },
-})
-
-const {
-  page,
-  scale,
-  totalPage,
-  zoomIn,
-  zoomOut,
-  next,
-  prev,
-  first,
-  last,
-} = usePdfContext()
-
-const pages = computed<SelectItem[]>(() => {
-  return Array.from({ length: totalPage.value }).map((_, i) => {
-    return {
-      text : `${i + 1}`,
-      value: i + 1,
-    }
-  })
-})
-</script>
-
-<style lang="postcss">
-.pdf {
-  &__navigation {
-    @apply absolute bottom-4 inset-x-0 justify-center items-center flex min-w-96 mx-auto z-10;
-
-    &-container {
-      @apply flex bg-inverse text-subtlest rounded p-2 space-x-1 items-center;
-      @apply dark:text-dark-default;
-
-      > .btn.btn--variant-ghost {
-        @apply text-subtlest hover:text-muted focus:text-muted;
-        @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default;
-      }
-
-      > .select {
-        --p-dropdown-size: theme(width.32);
-
-        @apply w-16;
-
-        > .input {
-          @apply bg-default-alpha;
-          @apply dark:bg-dark-default-alpha;
-
-          > .input__form {
-            @apply border-subtle-alpha bg-default-alpha text-state-emphasis;
-            @apply dark:border-dark-subtle-alpha dark:bg-dark-default-alpha dark:text-dark-state-emphasis;
-          }
-        }
-      }
-
-      > .divider {
-        @apply border-none bg-dark-emphasis-alpha;
-      }
-    }
-
-    &-page {
-      @apply w-20 inline-flex;
-    }
-
-    &-total {
-      @apply shrink-0 mr-3 !important;
-    }
-  }
-}
-</style>