@privyid/persona 0.20.0 → 0.21.0

package/dist/components/dropdown-subitem/DropdownSubitem.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     back: () => void;
     reset: () => void;
     canBack: import("vue-demi").ComputedRef<boolean>;
-    transition: import("vue-demi").Ref<"slide-left" | "slide-right" | "none">;
+    transition: import("vue-demi").Ref<"none" | "slide-left" | "slide-right">;
     handleOnClick: () => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "click"[], "click", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     text: {

package/dist/components/dropzone/Dropzone.vue.d.ts

@@ -77,14 +77,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
+    onCancel?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onCancel?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string | string[] | File | File[];
+    modelModifiers: ModelModifier;
     disabled: boolean;
     readonly: boolean;
-    modelModifiers: ModelModifier;
     multiple: boolean | MultipleType;
     maxlength: string | number;
     accept: string;

package/dist/components/filterbar/pinned/PinnedDate.vue.d.ts

@@ -58,10 +58,10 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    min: Date;
-    max: Date;
     modelValue: Date;
     mode: "date" | "month" | "year";
+    min: Date;
+    max: Date;
     format: string;
 }, {}>;
 export default _default;

package/dist/components/form-group/FormGroup.vue

@@ -20,71 +20,86 @@
         {{ caption }}</p-caption>
     </label>
 
-    <slot />
-
-    <transition
-      name="slide-up"
-      mode="out-in">
-      <p
-        v-if="error"
-        data-testid="form-group-error"
-        class="form-group__error">
-        {{ error }}
-      </p>
-      <p
-        v-else-if="description"
-        data-testid="form-group-description"
-        class="form-group__description">
-        {{ description }}
-      </p>
-    </transition>
+    <div class="form-group__inputs">
+      <slot />
+
+      <transition
+        name="slide-up"
+        mode="out-in">
+        <p
+          v-if="error"
+          data-testid="form-group-error"
+          class="form-group__error">
+          <slot name="error-icon">
+            <IconInfo
+              v-if="errorIcon"
+              data-testid="form-group-error-icon" />
+          </slot>
+          {{ error }}
+        </p>
+        <p
+          v-else-if="description"
+          data-testid="form-group-description"
+          class="form-group__description">
+          {{ description }}
+        </p>
+      </transition>
+    </div>
   </div>
 </template>
 
-<script>
-import IconInfo from "@privyid/persona-icon/vue/information-circle-solid/20.vue";
-import pCaption from "../caption/Caption.vue";
-import { pTooltip } from "../tooltip";
-import { computed, defineComponent } from "vue-demi";
-export default defineComponent({
-  components: { pCaption, IconInfo },
-  directives: { pTooltip },
-  props: {
-    required: {
-      type: Boolean,
-      default: false
-    },
-    label: {
-      type: String,
-      default: ""
-    },
-    caption: {
-      type: String,
-      default: ""
-    },
-    description: {
-      type: String,
-      default: ""
-    },
-    hint: {
-      type: String,
-      default: ""
-    },
-    error: {
-      type: String,
-      default: ""
-    }
+<script lang="ts" setup>
+import IconInfo from '@privyid/persona-icon/vue/information-circle-solid/20.vue'
+import pCaption from '../caption/Caption.vue'
+import { pTooltip as vPTooltip } from '../tooltip'
+import { computed } from 'vue-demi'
+
+const props = defineProps({
+  required: {
+    type   : Boolean,
+    default: false,
   },
-  setup(props) {
-    const classNames = computed(() => {
-      const result = [];
-      if (props.error)
-        result.push("form-group--error", "state--error");
-      return result;
-    });
-    return { classNames };
-  }
-});
+  label: {
+    type   : String,
+    default: '',
+  },
+  caption: {
+    type   : String,
+    default: '',
+  },
+  description: {
+    type   : String,
+    default: '',
+  },
+  hint: {
+    type   : String,
+    default: '',
+  },
+  error: {
+    type   : String,
+    default: '',
+  },
+  horizontal: {
+    type   : Boolean,
+    default: false,
+  },
+  errorIcon: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+const classNames = computed(() => {
+  const result: string[] = []
+
+  if (props.error)
+    result.push('form-group--error', 'state--error')
+
+  if (props.horizontal)
+    result.push('form-group--horizontal')
+
+  return result
+})
 </script>
 
 <style lang="postcss">
@@ -101,19 +116,31 @@ export default defineComponent({
     }
   }
 
-  & > &__description {
+  & > &__inputs > &__description {
     @apply text-xs my-2 text-subtle;
     @apply dark:text-dark-subtle;
   }
 
-  & > &__error {
-    @apply text-xs text-danger;
+  & > &__inputs > &__error {
+    @apply text-xs text-danger flex gap-1 items-center;
     @apply dark:text-dark-danger my-2;
   }
 
-  &__hint {
+  & > &__label > &__hint {
     @apply absolute right-0 text-info cursor-pointer focus:outline-none;
     @apply dark:text-dark-info;
   }
+
+  &&--horizontal {
+    @apply flex-row items-baseline;
+
+    & > .form-group__label {
+      @apply mb-0 mr-2 basis-1/3;
+    }
+
+    & > .form-group__inputs {
+      @apply flex-grow;
+    }
+  }
 }
 </style>

package/dist/components/global/store.d.ts

@@ -0,0 +1,27 @@
+import { Ref } from 'vue-demi';
+type Lang = 'id' | 'en';
+/**
+ * Simple vuex-like-store for global configuration
+ */
+export interface State {
+    lang: Lang;
+}
+export declare function createStore(): Ref<State>;
+export declare function setStore(state: Ref<State>): void;
+export declare function initStore(): Ref<State>;
+export declare function useStore(): Ref<State>;
+export declare function setLang(lang: Lang): void;
+export declare function getLang(): Lang;
+/**
+ * Return reactive global lang setting
+ * @example
+ * const lang = useLang()
+ *
+ * // set lang
+ * lang.value = 'en'
+ *
+ * // get lang
+ * console.log(lang.value)
+ */
+export declare function useLang(): Ref<Lang>;
+export {};

package/dist/components/global/store.mjs

@@ -0,0 +1,31 @@
+import {
+  effectScope,
+  ref,
+  toRef
+} from "vue-demi";
+let globalState;
+export function createStore() {
+  const scope = effectScope(true);
+  const state = scope.run(() => ref({ lang: "en" }));
+  return state;
+}
+export function setStore(state) {
+  globalState = state;
+}
+export function initStore() {
+  const store = createStore();
+  setStore(store);
+  return store;
+}
+export function useStore() {
+  return globalState;
+}
+export function setLang(lang) {
+  globalState.value.lang = lang;
+}
+export function getLang() {
+  return globalState?.value.lang ?? "en";
+}
+export function useLang() {
+  return toRef(globalState.value, "lang");
+}

package/dist/components/global/utils/queue.mjs

@@ -1,4 +1,6 @@
 export default class Queue {
+  queue;
+  running;
   constructor() {
     this.queue = [];
     this.running = false;

package/dist/components/input/utils/accept.d.ts

@@ -1,24 +1,24 @@
 import { LiteralUnion } from 'type-fest';
 export declare const AcceptPresets: {
-    readonly num: string;
-    readonly numeric: string;
-    readonly digit: string;
-    readonly alpha: string;
-    readonly 'alpha-num': string;
-    readonly 'alpha-num-space': string;
-    readonly 'alpha-num-space-symbol': string;
-    readonly 'alpha-numeric': string;
-    readonly 'alpha-numeric-space': string;
-    readonly 'alpha-numeric-space-symbol': string;
-    readonly 'alpha-space': string;
-    readonly 'alpha-space-symbol': string;
-    readonly 'num-space': string;
-    readonly 'num-space-symbol': string;
-    readonly 'numeric-space': string;
-    readonly 'numeric-space-symbol': string;
-    readonly 'non-numeric': string;
-    readonly 'non-alpha': string;
-    readonly text: string;
+    readonly num: "\\d";
+    readonly numeric: "\\d";
+    readonly digit: "\\d";
+    readonly alpha: "A-Za-z";
+    readonly 'alpha-num': "A-Za-z\\d";
+    readonly 'alpha-num-space': "A-Za-z\\d\\s";
+    readonly 'alpha-num-space-symbol': "A-Za-z\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly 'alpha-numeric': "A-Za-z\\d";
+    readonly 'alpha-numeric-space': "A-Za-z\\d\\s";
+    readonly 'alpha-numeric-space-symbol': "A-Za-z\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly 'alpha-space': "A-Za-z\\s";
+    readonly 'alpha-space-symbol': "A-Za-z\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly 'num-space': "\\d\\s";
+    readonly 'num-space-symbol': "\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly 'numeric-space': "\\d\\s";
+    readonly 'numeric-space-symbol': "\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly 'non-numeric': "A-Za-z\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly 'non-alpha': "\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly text: "A-Za-z\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
 };
 export type AcceptVariant = LiteralUnion<keyof typeof AcceptPresets, string>;
 export declare function isAccepted(accept: AcceptVariant | undefined, text: string): boolean;

package/dist/components/input-file/InputFile.vue.d.ts

@@ -113,17 +113,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>> & {
+    onCancel?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onCancel?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
     size: SizeVariant;
     modelValue: string | string[] | File | File[];
+    modelModifiers: ModelModifier;
     disabled: boolean;
     readonly: boolean;
-    modelModifiers: ModelModifier;
     multiple: boolean | MultipleType;
     placeholder: string;
     maxlength: string | number;

package/dist/components/input-password/InputPassword.vue.d.ts

@@ -3,7 +3,5 @@ type Bindings = {
     isShow: Ref<boolean>;
     toggle: () => void;
 };
-declare const _default: import("vue-demi").DefineComponent<any, Bindings, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<any>, {} | {
-    [x: string]: any;
-}, {}>;
+declare const _default: import("vue-demi").DefineComponent<any, Bindings, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, any, any, {}>;
 export default _default;

package/dist/components/input-range/InputRange.vue.d.ts

@@ -95,11 +95,11 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:end"?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
+    modelValue: number | [number, number];
     start: number;
     end: number;
     min: string | number;
     max: string | number;
-    modelValue: number | [number, number];
     disabled: boolean;
     readonly: boolean;
     step: string | number;

package/dist/components/label/Label.vue.d.ts

@@ -42,9 +42,9 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     onDismissed?: ((...args: any[]) => any) | undefined;
 }, {
+    color: ColorVariant;
     variant: StyleVariant;
-    dismissable: boolean;
     size: SizeVariant;
-    color: ColorVariant;
+    dismissable: boolean;
 }, {}>;
 export default _default;

package/dist/components/modal/Modal.vue

@@ -147,7 +147,7 @@ export default defineComponent({
     watch(model, (value) => {
       if (value === false) {
         nextTick(() => {
-          emit("close");
+          emit("close", new CustomEvent("close"));
         });
       }
     });

package/dist/components/modal/Modal.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-export type SizeVariant = 'sm' | 'md' | 'lg' | 'xl';
+import { SizeVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     title: {
         type: StringConstructor;
@@ -91,13 +91,13 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
+    size: SizeVariant;
     dismissable: boolean;
     banner: boolean;
-    size: SizeVariant;
     text: string;
-    modelValue: boolean;
     title: string;
     centered: boolean;
+    modelValue: boolean;
     noCloseOnEsc: boolean;
     noCloseOnBackdrop: boolean;
     modalBodyScrollable: boolean;

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

@@ -0,0 +1 @@
+export type SizeVariant = 'sm' | 'md' | 'lg' | 'xl';

package/dist/components/nav/NavItemDropdown.vue.d.ts

@@ -90,8 +90,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
-    icon: boolean;
     size: SizeVariant;
+    icon: boolean;
     divider: boolean;
     text: string;
     modelValue: boolean;

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

@@ -4,13 +4,15 @@
     :width="width"
     :height="height"
     :src="preview"
+    :srcset="srcset"
     :alt="text">
 </template>
 
 <script>
 import {
   defineComponent,
-  onMounted
+  onMounted,
+  ref
 } from "vue-demi";
 import { createSpinner } from "../avatar/utils/create-image";
 import { usePreview } from "../cropper";
@@ -92,6 +94,7 @@ export default defineComponent({
   setup(props) {
     const model = useVModel(props);
     const preview = usePreview(model, createSpinner(props.width, props.height));
+    const srcset = ref("");
     watchDebounced(() => [
       props.text,
       props.width,
@@ -116,8 +119,9 @@ export default defineComponent({
       const result = await generate(props);
       const value = props.modelModifiers.base64 ? result : fromBase64(result);
       model.value = value;
+      srcset.value = `${await generate(props, 2)} 2x`;
     }
-    return { preview };
+    return { preview, srcset };
   }
 });
 </script>

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

@@ -74,6 +74,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     preview: import("vue-demi").Ref<string>;
+    srcset: import("vue-demi").Ref<string>;
 }, 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<{
     modelValue: {
         type: (StringConstructor | {
@@ -147,11 +148,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: number;
     };
 }>>, {
+    color: string;
     size: number;
     text: string;
-    color: string;
-    modelValue: string | File;
     label: string;
+    modelValue: string | File;
     modelModifiers: ModelModifier;
     width: number;
     height: number;

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

@@ -64,5 +64,5 @@ interface GenerateOptions {
      */
     labelSize?: number;
 }
-export default function generate(options: GenerateOptions): Promise<string>;
+export default function generate(options: GenerateOptions, dpi?: number): Promise<string>;
 export {};

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

@@ -1,7 +1,7 @@
 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, lineHeight, fontFamily, maxWidth) {
+function wrapText(context, text, fontSize, fontFamily, maxWidth) {
   const lines = [];
   context.font = `${fontSize}px ${JSON.stringify(fontFamily)}`;
   context.textBaseline = "top";
@@ -35,7 +35,7 @@ function wrapText(context, text, fontSize, lineHeight, fontFamily, maxWidth) {
   }
   return lines;
 }
-export default async function generate(options) {
+export default async function generate(options, dpi = 1) {
   const {
     text,
     color,
@@ -47,33 +47,41 @@ export default async function generate(options) {
     minSize,
     maxSize,
     fixedSize,
-    label
+    label,
+    lineHeight
   } = options;
   await loadFont(font);
-  const canvas = options.canvas ?? createCanvas(width, height);
+  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;
-    context.fillText(label, padding, y);
-    y += labelSize * options.lineHeight;
+    for (const line of labelLines) {
+      context.fillText(line, padding, y);
+      y += labelSize * lineHeight;
+    }
   }
   if (text) {
-    const maxWidth = width - padding * 2;
     const maxHeight = height - (y + padding);
     let fontSize = size;
-    let lineHeight = fontSize * options.lineHeight;
     let lines = wrapText(
       context,
       text,
       fontSize,
-      lineHeight,
       font,
       maxWidth
     );
@@ -89,29 +97,23 @@ export default async function generate(options) {
         if (newFontSize === fontSize)
           break;
         fontSize = newFontSize;
-        lineHeight = fontSize * options.lineHeight;
         lines = wrapText(
           context,
           text,
           fontSize,
-          lineHeight,
           font,
           maxWidth
         );
-        textHeight = lines.length * lineHeight;
+        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;
-    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);
-      y += lineHeight;
+      y += fontSize * lineHeight;
     }
   }
   return canvas.toDataURL("image/png");

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

@@ -22,15 +22,20 @@
       <dt>
         PDFJS Version:
       </dt>
-      <dd><code>{{ pdfJs.version }}</code></dd>
+      <dd><code>{{ version }}</code></dd>
     </dl>
   </div>
 </template>
 
 <script>
 import { pAspectRatio } from "../aspect-ratio";
-import { defineComponent } from "vue-demi";
+import {
+  defineComponent,
+  onMounted,
+  ref
+} from "vue-demi";
 import Heading from "../heading/Heading.vue";
+import { getVersion } from "./utils/pdfjs";
 export default defineComponent({
   directives: { pAspectRatio },
   components: { Heading },
@@ -39,17 +44,17 @@ export default defineComponent({
       type: String,
       default: ""
     },
-    pdfJs: {
-      type: Object,
-      default: () => ({})
-    },
     error: {
       type: Object,
       default: () => ({})
     }
   },
   setup() {
-    return {};
+    const version = ref("");
+    onMounted(async () => {
+      version.value = await getVersion();
+    });
+    return { version };
   }
 });
 </script>