@privyid/persona 0.25.2 → 0.27.0

package/dist/components/meta.json

@@ -3,10 +3,10 @@
   "PAccordionItem": "components/accordion/AccordionItem.vue",
   "PAvatar": "components/avatar/Avatar.vue",
   "PBadge": "components/badge/Badge.vue",
+  "PBanner": "components/banner/Banner.vue",
   "PBreadcrumb": "components/breadcrumbs/Breadcrumb.vue",
   "PBreadcrumbItem": "components/breadcrumbs/BreadcrumbItem.vue",
   "PBreadcrumbItemDropdown": "components/breadcrumbs/BreadcrumbItemDropdown.vue",
-  "PBanner": "components/banner/Banner.vue",
   "PButton": "components/button/Button.vue",
   "PButtonGroup": "components/button-group/ButtonGroup.vue",
   "PCalendar": "components/calendar/Calendar.vue",
@@ -25,19 +25,20 @@
   "PContextualBar": "components/contextual-bar/ContextualBar.vue",
   "PCropper": "components/cropper/Cropper.vue",
   "PDatepicker": "components/datepicker/Datepicker.vue",
-  "PDivider": "components/divider/Divider.vue",
   "PDialog": "components/dialog/Dialog.vue",
   "PDialogFooter": "components/dialog/DialogFooter.vue",
+  "PDivider": "components/divider/Divider.vue",
   "PDot": "components/dot/Dot.vue",
   "PDropdown": "components/dropdown/Dropdown.vue",
   "PDropdownHeader": "components/dropdown/DropdownHeader.vue",
   "PDropdownItem": "components/dropdown/DropdownItem.vue",
-  "PDropdownSubitem": "components/dropdown-subitem/DropdownSubitem.vue",
   "PDropzone": "components/dropzone/Dropzone.vue",
+  "PDropdownSubitem": "components/dropdown-subitem/DropdownSubitem.vue",
   "PFilterbar": "components/filterbar/Filterbar.vue",
   "PFormGroup": "components/form-group/FormGroup.vue",
   "PHeading": "components/heading/Heading.vue",
   "PInput": "components/input/Input.vue",
+  "PinputColor": "components/input-color/inputColor.vue",
   "PInputFile": "components/input-file/InputFile.vue",
   "PInputGroup": "components/input-group/InputGroup.vue",
   "PInputGroupAddon": "components/input-group/InputGroupAddon.vue",
@@ -74,6 +75,7 @@
   "PPdfLoading": "components/pdf-viewer/PdfLoading.vue",
   "PPdfNavigation": "components/pdf-viewer/PdfNavigation.vue",
   "PPdfViewer": "components/pdf-viewer/PdfViewer.vue",
+  "PPopover": "components/popover/Popover.vue",
   "PProgress": "components/progress/Progress.vue",
   "PProgressItem": "components/progress/ProgressItem.vue",
   "PProgressIndicator": "components/progress-indicator/ProgressIndicator.vue",
@@ -84,19 +86,20 @@
   "PSelectInput": "components/select/SelectInput.vue",
   "PSelectTags": "components/select/SelectTags.vue",
   "PSheet": "components/sheet/Sheet.vue",
+  "PShimmer": "components/shimmer/Shimmer.vue",
   "PSidebar": "components/sidebar/Sidebar.vue",
   "PSidebarBrand": "components/sidebar/SidebarBrand.vue",
   "PSidebarContent": "components/sidebar/SidebarContent.vue",
   "PSidebarNav": "components/sidebar/SidebarNav.vue",
   "PSidebarMenu": "components/sidebar-menu/SidebarMenu.vue",
   "PSidebarMenuItem": "components/sidebar-menu/SidebarMenuItem.vue",
-  "PSignatureText": "components/signature-text/SignatureText.vue",
   "PSignatureDraw": "components/signature-draw/SignatureDraw.vue",
   "PSignatureDrawDesktop": "components/signature-draw/SignatureDrawDesktop.vue",
   "PSignatureDrawMobile": "components/signature-draw/SignatureDrawMobile.vue",
   "PSpinner": "components/spinner/Spinner.vue",
   "PSpinnerRing": "components/spinner/SpinnerRing.vue",
   "PSpinnerRinggo": "components/spinner/SpinnerRinggo.vue",
+  "PSignatureText": "components/signature-text/SignatureText.vue",
   "PSpread": "components/spread/Spread.vue",
   "PStep": "components/steps/Step.vue",
   "PStepSlider": "components/steps/StepSlider.vue",

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

@@ -143,10 +143,10 @@ declare const _default: import("vue-demi").DefineComponent<{
     dismissable: boolean;
     banner: boolean;
     text: string;
-    modelValue: boolean;
     title: string;
     centered: boolean;
     noCloseOnBackdrop: boolean;
+    modelValue: boolean;
     bodyClass: string | Record<string, any> | unknown[];
     noCloseOnEsc: boolean;
     modalBodyScrollable: boolean;

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

@@ -81,8 +81,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     fill: boolean;
     variant: StyleVariant;
     title: string;
-    vertical: boolean;
     align: AlignVariant;
+    vertical: boolean;
     condensed: boolean;
     justified: boolean;
     titleActionLabel: RouteLocationRaw;

package/dist/components/pagination/Pagination.vue.d.ts

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

package/dist/components/pdf-object/PdfObject.vue.d.ts

@@ -116,9 +116,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:height"?: ((...args: any[]) => any) | undefined;
 }, {
     y: number;
+    x: number;
     width: number;
     height: number;
-    x: number;
     autofocus: boolean;
     maxHeight: number;
     maxWidth: number;

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

@@ -151,14 +151,14 @@ declare const _default: import("vue-demi").DefineComponent<{
     size: number;
     color: string;
     text: string;
-    modelValue: string | File;
     label: string;
+    modelValue: string | File;
     modelModifiers: ModelModifier;
-    width: number;
-    height: number;
     font: string;
     padding: number;
     lineHeight: number;
+    width: number;
+    height: number;
     labelColor: string;
     minSize: number;
     maxSize: number;

package/dist/components/popover/Popover.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    ref="root"
+    data-testid="popover"
+    class="popover">
+    <slot
+      name="activator"
+      :is-show="isShow"
+      :toggle="toggle"
+      :show="show"
+      :hide="hide" />
+
+    <p-tooltip
+      ref="tooltip"
+      v-model="isShow"
+      class="popover__tooltip"
+      data-testid="popover-tooltip"
+      :color="color"
+      :placement="placement"
+      :target="root"
+      @show="$emit('show')"
+      @hide="$emit('hide')">
+      <slot
+        :is-show="isShow"
+        :toggle="toggle"
+        :show="show"
+        :hide="hide" />
+    </p-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType, VNode } from 'vue-demi'
+import type { Placement } from '@floating-ui/dom'
+import type { ColorVariant } from '../tooltip'
+import {
+  ref,
+  provide,
+  computed,
+} from 'vue-demi'
+import pTooltip from '../tooltip/Tooltip.vue'
+import { useVModel } from '../input'
+import { onClickOutside } from '@vueuse/core'
+import { POPOVER_CONTEXT } from '.'
+
+const props = defineProps({
+  modelValue: {
+    type   : Boolean,
+    default: false,
+  },
+  color: {
+    type   : String as PropType<ColorVariant>,
+    default: 'white',
+  },
+  placement: {
+    type   : String as PropType<Placement>,
+    default: 'top',
+  },
+  disabled: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+const root    = ref<HTMLDivElement>()
+const tooltip = ref<InstanceType<typeof pTooltip>>()
+const isShow  = useVModel(props)
+
+const tooltipEl = computed<HTMLElement>(() => tooltip.value.$el)
+
+onClickOutside(tooltipEl, () => {
+  if (isShow.value) {
+    // Add little delay too prevent race condition with v-model changing
+    setTimeout(() => {
+      hide()
+    })
+  }
+}, { ignore: [root] })
+
+function toggle () {
+  if (!props.disabled) {
+    if (isShow.value)
+      hide()
+    else
+      show()
+  }
+}
+
+function show () {
+  if (!props.disabled)
+    isShow.value = true
+}
+
+function hide () {
+  if (!props.disabled)
+    isShow.value = false
+}
+
+defineEmits<{
+  'show': [],
+  'hide': [],
+  'update:modelValue': [boolean],
+}>()
+
+defineSlots<{
+  'activator'(props: { isShow: boolean, show: () => void, hide: () => void, toggle: () => void }): VNode[],
+  'default'(props: { isShow: boolean, show: () => void, hide: () => void, toggle: () => void }): VNode[],
+}>()
+
+defineExpose({
+  isShow,
+  show,
+  hide,
+  toggle,
+})
+
+provide(POPOVER_CONTEXT, {
+  isShow,
+  show,
+  hide,
+  toggle,
+})
+</script>
+
+<style lang="postcss">
+.popover {
+  & > &__tooltip.tooltip {
+    @apply text-base;
+  }
+}
+</style>

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

@@ -0,0 +1,17 @@
+import { type InjectionKey, type Ref } from 'vue-demi';
+interface PopoverContext {
+    hide: () => void;
+    show: () => void;
+    toggle: () => void;
+    isShow: Ref<boolean>;
+}
+export declare const POPOVER_CONTEXT: InjectionKey<PopoverContext>;
+export declare function usePopoverPromise<R = any>(): {
+    start: () => Promise<R | undefined>;
+    finish: (result?: R | Error) => void;
+    bind: () => {
+        modelValue: boolean;
+        'onUpdate:modelValue'(value: boolean): void;
+    };
+};
+export {};

package/dist/components/popover/index.mjs

@@ -0,0 +1,52 @@
+import {
+  ref
+} from "vue-demi";
+export const POPOVER_CONTEXT = Symbol("POPOVER_CONTEXT");
+export function usePopoverPromise() {
+  const promise = ref();
+  const resolve = ref();
+  const reject = ref();
+  const isShow = ref(false);
+  function bind() {
+    return {
+      modelValue: isShow.value,
+      "onUpdate:modelValue"(value) {
+        if (resolve.value && !value)
+          finish();
+        isShow.value = value;
+      }
+    };
+  }
+  async function start() {
+    if (!promise.value) {
+      promise.value = new Promise((_resolve, _reject) => {
+        resolve.value = _resolve;
+        reject.value = _reject;
+      });
+    }
+    let result;
+    try {
+      isShow.value = true;
+      result = await promise.value;
+    } finally {
+      promise.value = void 0;
+      resolve.value = void 0;
+      reject.value = void 0;
+      isShow.value = false;
+    }
+    return result;
+  }
+  function finish(result) {
+    if (resolve.value && reject.value) {
+      if (result instanceof Error)
+        reject.value(result);
+      else
+        resolve.value(result);
+    }
+  }
+  return {
+    start,
+    finish,
+    bind
+  };
+}

package/dist/components/progress-indicator/ProgressIndicator.vue.d.ts

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

package/dist/components/radio/Radio.vue.d.ts

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

package/dist/components/radio/index.mjs

@@ -2,15 +2,14 @@ import { computed, getCurrentInstance } from "vue-demi";
 import { isEqual } from "../utils/value.mjs";
 export function useVModel(props) {
   const { emit } = getCurrentInstance();
-  const checked = props.value;
   const model = computed({
     get() {
-      return isEqual(props.modelValue, checked) || props.checked;
+      return isEqual(props.modelValue, props.value) || props.checked;
     },
     set(value) {
       emit("change", value);
       if (value)
-        emit("update:modelValue", checked);
+        emit("update:modelValue", props.value);
     }
   });
   return model;

package/dist/components/select/Select.vue

@@ -13,57 +13,61 @@
     :no-animation="noAnimation"
     @show="onOpened"
     @hide="onClosed">
-    <template #activator>
-      <SelectInput
-        data-testid="select-activator"
-        class="select__activator"
-        :size="size"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :readonly="readonly"
-        :error="error"
-        @focus="onFocus">
-        <template #default>
-          <template v-if="hasValue">
+    <template #activator="dropdownAttrs">
+      <slot
+        name="activator"
+        v-bind="dropdownAttrs">
+        <SelectInput
+          data-testid="select-activator"
+          class="select__activator"
+          :size="size"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :readonly="readonly"
+          :error="error"
+          @focus="onFocus">
+          <template #default>
+            <template v-if="hasValue">
+              <slot
+                name="selected"
+                :item="localModel"
+                :multiple="multiple">
+                <template v-if="props.multiple && Array.isArray(localModel)">
+                  <SelectTags
+                    :items="localModel"
+                    :display-limit="displayLimit"
+                    :limit-text="limitText" />
+                </template>
+                <template v-else>
+                  {{ (localModel as SelectItem)?.text }}
+                </template>
+              </slot>
+            </template>
+            <template v-else>
+              <div data-testid="select-placeholder">
+                <slot name="placeholder">
+                  <span class="input__form__placeholder">
+                    {{ placeholder }}
+                  </span>
+                </slot>
+              </div>
+            </template>
+          </template>
+          <template
+            v-if="!noCaret"
+            #append>
             <slot
-              name="selected"
-              :item="localModel"
-              :multiple="multiple">
-              <template v-if="props.multiple && Array.isArray(localModel)">
-                <SelectTags
-                  :items="localModel"
-                  :display-limit="displayLimit"
-                  :limit-text="limitText" />
-              </template>
-              <template v-else>
-                {{ (localModel as SelectItem)?.text }}
-              </template>
+              name="caret"
+              :is-open="isOpen"
+              :toggle="toggle">
+              <IconArrow
+                class="select__caret"
+                data-testid="select-caret-icon"
+                @click="toggle" />
             </slot>
           </template>
-          <template v-else>
-            <div data-testid="select-placeholder">
-              <slot name="placeholder">
-                <span class="input__form__placeholder">
-                  {{ placeholder }}
-                </span>
-              </slot>
-            </div>
-          </template>
-        </template>
-        <template
-          v-if="!noCaret"
-          #append>
-          <slot
-            name="caret"
-            :is-open="isOpen"
-            :toggle="toggleOpen">
-            <IconArrow
-              class="select__caret"
-              data-testid="select-caret-icon"
-              @click="toggleOpen" />
-          </slot>
-        </template>
-      </SelectInput>
+        </SelectInput>
+      </slot>
     </template>
 
     <template #prepend>
@@ -333,7 +337,7 @@ const localModel = ref<SelectItem | SelectItem[]>(
     : findSelected(items.value, props.modelValue),
 )
 
-const toggleOpen = () => {
+const toggle = () => {
   if (!props.disabled && !props.readonly)
     isOpen.value = !isOpen.value
 }
@@ -447,6 +451,14 @@ onStartTyping(() => {
     inputEl.value.focus()
   }
 })
+
+defineExpose({
+  keyword,
+  isOpen,
+  isLoading,
+  menuEl,
+  toggle,
+})
 </script>
 
 <style lang="postcss">

package/dist/components/shimmer/Shimmer.vue

@@ -0,0 +1,125 @@
+<template>
+  <svg
+    role="img"
+    class="shimmer"
+    :class="{ 'shimmer--responsive': responsive }"
+    data-testid="shimmer"
+    :width="width"
+    :height="height"
+    aria-labelledby="Loading..."
+    :viewBox="`0 0 ${width} ${height}`"
+    preserveAspectRatio="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <title id="loading-aria">Loading...</title>
+    <rect
+      x="0"
+      y="0"
+      width="100%"
+      height="100%"
+      :clip-path="`url(#clip-path-${uid})`"
+      :style="{ fill: `url('#fill-${uid}')` }" />
+    <defs>
+      <clipPath :id="`clip-path-${uid}`">
+        <slot>
+          <rect
+            x="0"
+            y="0"
+            rx="4"
+            ry="4"
+            width="100%"
+            height="100%" />
+        </slot>
+      </clipPath>
+      <linearGradient :id="`fill-${uid}`">
+        <stop
+          offset=".6"
+          class="shimmer__fg"
+          stop-opacity="1">
+          <animate
+            attributeName="offset"
+            dur="1s"
+            keyTimes="0; 0.25; 1"
+            repeatCount="indefinite"
+            values="-2; -2; 1" />
+        </stop>
+        <stop
+          offset="1.6"
+          class="shimmer__bg"
+          stop-opacity="1">
+          <animate
+            attributeName="offset"
+            dur="1s"
+            keyTimes="0; 0.25; 1"
+            repeatCount="indefinite"
+            values="-1; -1; 2" />
+        </stop>
+        <stop
+          offset="2.6"
+          class="shimmer__fg"
+          stop-opacity="1">
+          <animate
+            attributeName="offset"
+            dur="1s"
+            keyTimes="0; 0.25; 1"
+            repeatCount="indefinite"
+            values="0; 0; 3" />
+        </stop>
+      </linearGradient>
+    </defs>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  getCurrentInstance,
+  defineProps,
+} from 'vue-demi'
+
+defineProps({
+  width: {
+    type   : [Number, String],
+    default: 100,
+  },
+  height: {
+    type   : [Number, String],
+    default: 16,
+  },
+  responsive: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+const instance = getCurrentInstance()
+const uid      = computed(() => instance?.uid)
+</script>
+
+<style lang="postcss">
+.shimmer {
+  --p-shimmer-fg: theme('backgroundColor.subtle.DEFAULT');
+  --p-shimmer-bg: theme('backgroundColor.base.DEFAULT');
+  --p-shimmer-dark-bg: theme('backgroundColor.dark.subtle.DEFAULT');
+  --p-shimmer-dark-fg: theme('backgroundColor.dark.base');
+
+  &--responsive {
+    @apply w-full h-auto;
+  }
+}
+
+.shimmer__fg {
+  stop-color: var(--p-shimmer-fg);
+}
+
+.shimmer__bg {
+  stop-color: var(--p-shimmer-bg);
+}
+
+:is(.dark .shimmer__fg) {
+  stop-color: var(--p-shimmer-dark-fg);
+}
+
+:is(.dark .shimmer__bg) {
+  stop-color: var(--p-shimmer-dark-bg);
+}
+</style>

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

@@ -89,8 +89,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/SignatureDrawDesktop.vue

@@ -103,7 +103,9 @@ export default defineComponent({
     function setColor(color) {
       if (!isBlank.value) {
         replaceColor(canvas.value, color);
-        model.value = toDataURL(canvas.value);
+        const result = toDataURL(canvas.value);
+        const value = props.modelModifiers.base64 ? result : fromBase64(result);
+        model.value = value;
       }
     }
     watch(() => props.color, setColor);

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

@@ -73,8 +73,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;