@privyid/persona 0.25.2 → 0.27.0

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

@@ -66,7 +66,7 @@ import {
 import Button from "../button/Button.vue";
 import { useVModel } from "../input";
 import SignatureDrawDesktop from "./SignatureDrawDesktop.vue";
-import rotateImage from "./utils/rotate-image";
+import { replaceColor, rotateImage } from "./utils/image";
 import IconEdit from "@privyid/persona-icon/vue/edit/20.vue";
 import { pAspectRatio } from "../aspect-ratio";
 import { usePreview } from "../cropper";
@@ -153,6 +153,14 @@ export default defineComponent({
       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");

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

@@ -94,8 +94,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     color: string;
-    modelValue: string | File;
     placeholder: string;
+    modelValue: string | File;
     modelModifiers: ModelModifier;
     width: number;
     height: number;

package/dist/components/signature-draw/utils/image.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Rotate base64 image
+ * @param url base64 url
+ * @param degrees rotate degress
+ */
+export declare function rotateImage(url: string, degrees: number): Promise<string>;
+export declare function replaceColor(url: string, color: string): Promise<string>;

package/dist/components/signature-draw/utils/{rotate-image.mjs → image.mjs}

@@ -1,5 +1,6 @@
 import loadImage from "../../avatar/utils/load-image.mjs";
-export default async function rotateImage(url, degrees) {
+import { replaceColor as canvasReplaceColor } from "./canvas.mjs";
+export async function rotateImage(url, degrees) {
   const canvas = document.createElement("canvas");
   const context = canvas.getContext("2d");
   const image = await loadImage(url);
@@ -10,3 +11,13 @@ export default async function rotateImage(url, degrees) {
   context.drawImage(image, image.width / -2, image.height / -2);
   return canvas.toDataURL();
 }
+export async function replaceColor(url, color) {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  const image = await loadImage(url);
+  canvas.width = image.width;
+  canvas.height = image.height;
+  context.drawImage(image, 0, 0);
+  canvasReplaceColor(canvas, color);
+  return canvas.toDataURL();
+}

package/dist/components/signature-text/SignatureText.vue.d.ts

@@ -89,9 +89,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     text: string;
     modelValue: string | File;
     modelModifiers: ModelModifier;
+    font: string;
     width: number;
     height: number;
-    font: string;
     maxlength: string | number;
     maxwords: string | number;
 }, {}>;

package/dist/components/steps/Steps.vue.d.ts

@@ -74,8 +74,8 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     modelValue: number;
     direction: DirectionVariant;
-    loop: boolean;
     animation: AnimationVariant;
+    loop: boolean;
     onBeforePrev: TravelHook;
     onBeforeNext: TravelHook;
     keepAlive: boolean;

package/dist/components/textarea/Textarea.vue.d.ts

@@ -104,11 +104,11 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     error: boolean;
     resize: boolean;
+    placeholder: string;
+    accept: AcceptVariant;
     modelValue: string;
     disabled: boolean;
     readonly: boolean;
-    placeholder: string;
-    accept: AcceptVariant;
     maxlength: string | number;
     showCounter: boolean;
     rows: string | number;

package/dist/components/toggle/Toggle.vue.d.ts

@@ -95,8 +95,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
     value: any;
     variant: StyleVariant;

package/dist/components/tooltip/Tooltip.vue

@@ -119,7 +119,7 @@ export default defineComponent({
   @apply z-[var(--p-tooltip-z-index)] px-4 py-3 rounded text-xs inline-block absolute drop-shadow-sm;
 
   &__arrow {
-    @apply absolute after:w-4 after:h-4 after:block after:rounded-[3px] after:rotate-45 after:left-0 after:content-[''] after:z-0;
+    @apply absolute text-xs after:w-4 after:h-4 after:block after:rounded-[3px] after:rotate-45 after:left-0 after:content-[''] after:z-0;
 
     [data-popper-placement^="left"] > & {
       @apply -right-[6px];

package/dist/components/tooltip/TooltipContainer.vue

@@ -7,7 +7,9 @@
       :key="id"
       v-model="item.isShow"
       v-bind="item">
-      <span v-p-md.inline="item.text" />
+      <span
+        v-p-md.inline="item.text"
+        class="tooltip__text" />
     </Tooltip>
   </div>
 </template>

package/dist/components/utils/date.d.ts

@@ -17,6 +17,6 @@ export declare function installLocale(name: string, locale: Locale): void;
  * Get locale pack
  * @param name language name, ex: 'fr'
  */
-export declare function getLocale(name?: "id" | "en" | (string & {
+export declare function getLocale(name?: (string & {
     _?: undefined;
-})): any;
+}) | "id" | "en"): any;

package/dist/core/index.d.ts

@@ -34,3 +34,4 @@ export { findAllChildren, toBoolean, } from '../components/utils/vnode';
 export { createSpinner, createAlias, createText, } from '../components/avatar/utils/create-image';
 export { useSelector, } from '../components/pdf-object/utils/use-selector';
 export { getDocument, } from '../components/pdf-viewer/utils/pdfjs';
+export { usePopoverPromise, } from '../components/popover';

package/dist/core/index.mjs

@@ -119,3 +119,6 @@ export {
 export {
   getDocument
 } from "../components/pdf-viewer/utils/pdfjs";
+export {
+  usePopoverPromise
+} from "../components/popover";

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.25.2"
+  "version": "0.27.0"
 }

package/dist/types.d.mts

@@ -1,5 +1,6 @@
 
-import { ModuleOptions } from './module'
+import type { ModuleOptions } from './module'
+
 
 declare module '@nuxt/schema' {
   interface NuxtConfig { ['persona']?: Partial<ModuleOptions> }
@@ -12,4 +13,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { ModuleOptions, default } from './module'
+export type { ModuleOptions, default } from './module'

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 
-import { ModuleOptions } from './module'
+import type { ModuleOptions } from './module'
+
 
 declare module '@nuxt/schema' {
   interface NuxtConfig { ['persona']?: Partial<ModuleOptions> }
@@ -12,4 +13,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { ModuleOptions, default } from './module'
+export type { ModuleOptions, default } from './module'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona",
   "description": "Persona core package",
-  "version": "0.25.2",
+  "version": "0.27.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",
@@ -60,11 +60,11 @@
   "dependencies": {
     "@floating-ui/dom": "1.5.3",
     "@juggle/resize-observer": "3.4.0",
-    "@nuxt/kit": "3.7.4",
+    "@nuxt/kit": "3.8.2",
     "@splidejs/splide": "4.1.4",
     "@testing-library/dom": "9.3.3",
     "@testing-library/user-event": "14.5.1",
-    "@vueuse/core": "10.5.0",
+    "@vueuse/core": "10.7.0",
     "@vueuse/math": "10.3.0",
     "@zxing/browser": "0.1.4",
     "@zxing/library": "0.20.0",
@@ -74,7 +74,7 @@
     "defu": "6.1.3",
     "fast-equals": "^5.0.0",
     "fuse.js": "7.0.0",
-    "interactjs": "1.10.20",
+    "interactjs": "1.10.26",
     "lodash-es": "4.17.21",
     "marked": "5.1.2",
     "nanodelay": "2.0.2",
@@ -92,8 +92,8 @@
     "extends @privyid/browserslist-config"
   ],
   "peerDependencies": {
-    "@privyid/browserslist-config": "^0.25.2",
-    "@privyid/tailwind-preset": "^0.25.2",
+    "@privyid/browserslist-config": "^0.27.0",
+    "@privyid/tailwind-preset": "^0.27.0",
     "postcss-custom-properties": "^12.1.11 || ^13.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
@@ -102,13 +102,13 @@
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.5.0",
-    "@nuxt/schema": "3.7.4",
+    "@nuxt/schema": "3.8.2",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@privyid/browserslist-config": "^0.25.2",
-    "@privyid/tailwind-preset": "^0.25.2",
+    "@privyid/browserslist-config": "^0.27.0",
+    "@privyid/tailwind-preset": "^0.27.0",
     "@types/sanitize-html": "^2",
     "browserslist-to-esbuild": "^1.2.0",
-    "nuxt": "3.7.4",
+    "nuxt": "3.8.2",
     "postcss-custom-properties": "^13.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",

package/dist/components/signature-draw/utils/rotate-image.d.ts

@@ -1,6 +0,0 @@
-/**
- * Rotate base64 image
- * @param url base64 url
- * @param degrees rotate degress
- */
-export default function rotateImage(url: string, degrees: number): Promise<string>;