@privyid/persona 1.0.0-rc.3 → 1.0.0-rc.4

package/dist/components/accordion/AccordionItems.vue

@@ -37,7 +37,7 @@ export default defineComponent({
       return items.map((item, i) => {
         const isExpand = props.multiple && Array.isArray(props.modelValue) ? props.modelValue.includes(i) : props.modelValue === i;
         return h(item, {
-          "noCaret": item.props.noCaret ?? props.noCaret,
+          "noCaret": item.props?.noCaret ?? props.noCaret,
           "modelValue": isExpand,
           "onUpdate:modelValue": (value) => {
             setValue(value, i);

package/dist/components/avatar/AvatarTruncate.vue.d.ts

@@ -10,7 +10,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     length: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
 }, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
@@ -21,7 +21,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     length: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
 }>>, {

package/dist/components/banner/Banner.vue

@@ -3,7 +3,7 @@
     v-if="show"
     data-testid="banner"
     :class="classNames"
-    :style="{ 'background-image': backgroundUrl ? `url('${backgroundUrl}')`: 'none' }">
+    :style="styleBg">
     <div
       v-if="!noIcon"
       class="banner__icon"
@@ -32,7 +32,11 @@
 import IconInfo from '@privyid/persona-icon/vue/information-circle-solid/20.vue'
 import IconDanger from '@privyid/persona-icon/vue/exclamation-circle-solid/20.vue'
 import IconClose from '@privyid/persona-icon/vue/close/16.vue'
-import type { PropType, VNode } from 'vue-demi'
+import type {
+  PropType,
+  StyleValue,
+  VNode,
+} from 'vue-demi'
 import { ref, computed } from 'vue-demi'
 import type { StyleVariant } from '.'
 
@@ -58,6 +62,10 @@ const props = defineProps({
     type   : String,
     default: undefined,
   },
+  backgroundDarkUrl: {
+    type   : String,
+    default: undefined,
+  },
   backgroundOverlay: {
     type   : Boolean,
     default: false,
@@ -85,6 +93,19 @@ const classNames = computed(() => {
   return result
 })
 
+const styleBg = computed<StyleValue>(() => {
+  const result: StyleValue = {}
+
+  if (props.backgroundUrl) {
+    result['--p-banner-bg-image']      = `url("${props.backgroundUrl}")`
+    result['--p-banner-bg-dark-image'] = props.backgroundDarkUrl
+      ? `url("${props.backgroundDarkUrl}")`
+      : `url("${props.backgroundUrl}")`
+  }
+
+  return result
+})
+
 const icon = computed(() => {
   return BannerIcons[props.variant]
 })
@@ -105,8 +126,11 @@ defineSlots<{
 
 <style lang="postcss">
 .banner {
-  @apply p-4 flex space-x-2 rounded text-subtle;
-  @apply dark:text-dark-subtle;
+  --p-banner-bg-image: none;
+  --p-banner-bg-dark-image: none;
+
+  @apply p-4 flex space-x-2 rounded text-subtle bg-[image:var(--p-banner-bg-image)];
+  @apply dark:text-dark-subtle dark:bg-[image:var(--p-banner-bg-dark-image)];
 
   a {
     &:not(.btn) {

package/dist/components/calendar/Calendar.vue

@@ -102,11 +102,13 @@ import {
   startOfMonth,
   min as minDate,
   max as maxDate,
-  minTime as MIN_TIME,
-  maxTime as MAX_TIME,
   add,
   sub,
 } from 'date-fns'
+import {
+  minTime as MIN_TIME,
+  maxTime as MAX_TIME,
+} from 'date-fns/constants'
 import { syncRef } from '@vueuse/core'
 
 const Adapters: Record<CalendarMode, CalendarAdapter> = {

package/dist/components/calendar/adapter/date.mjs

@@ -11,7 +11,8 @@ import {
   isAfter,
   isBefore,
   isWithinInterval,
-  set
+  set,
+  isDate
 } from "date-fns";
 import { defineAdapter } from "./adapter.mjs";
 import { formatDate } from "../../utils/date.mjs";
@@ -76,7 +77,7 @@ export default defineAdapter({
     return !min || isAfter(date, min) || isWithinInterval(min, { start, end });
   },
   setValue(value, lastValue) {
-    return lastValue ? set(lastValue, {
+    return isDate(lastValue) ? set(lastValue, {
       year: value.getFullYear(),
       month: value.getMonth(),
       date: value.getDate()

package/dist/components/calendar/adapter/month.mjs

@@ -4,6 +4,7 @@ import {
   endOfYear,
   isAfter,
   isBefore,
+  isDate,
   isSameMonth,
   isWithinInterval,
   set,
@@ -57,7 +58,7 @@ export default defineAdapter({
     return !min || isAfter(date, min) || isWithinInterval(min, getInterval(date));
   },
   setValue(value, lastValue) {
-    return lastValue ? set(lastValue, {
+    return isDate(lastValue) ? set(lastValue, {
       year: value.getFullYear(),
       month: value.getMonth()
     }) : value;

package/dist/components/calendar/adapter/year.mjs

@@ -3,6 +3,7 @@ import {
   addYears,
   eachYearOfInterval,
   endOfDecade,
+  isDate,
   isAfter,
   isBefore,
   isSameYear,
@@ -57,6 +58,6 @@ export default defineAdapter({
     return !min || isAfter(date, min) || isWithinInterval(min, getInterval(date));
   },
   setValue(value, lastValue) {
-    return lastValue ? set(lastValue, { year: value.getFullYear() }) : value;
+    return isDate(lastValue) ? set(lastValue, { year: value.getFullYear() }) : value;
   }
 });

package/dist/components/contextual-bar/ContextualBar.vue

@@ -11,10 +11,14 @@
       class="contextual-bar"
       v-bind="$attrs"
       :class="classNames"
-      :style="{ 'background-image': backgroundUrl ? `url('${backgroundUrl}')`: 'none' }">
+      :style="styleBg">
       <div
         data-testid="contextual-bar-wrapper"
-        :class="[{ 'contextual-bar__wrapper--with-message' : (message || $slots.message), 'contextual-bar__wrapper--with-action' : $slots.action } ,'contextual-bar__wrapper']">
+        class="contextual-bar__wrapper"
+        :class="{
+          'contextual-bar__wrapper--with-message': (message || $slots.message),
+          'contextual-bar__wrapper--with-action': $slots.action
+        }">
         <span
           v-if="$slots.icon"
           data-testid="contextual-bar-icon"
@@ -65,7 +69,11 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType, VNode } from 'vue-demi'
+import type {
+  PropType,
+  StyleValue,
+  VNode,
+} from 'vue-demi'
 import {
   computed,
   onMounted,
@@ -89,6 +97,10 @@ const props = defineProps({
     type   : String,
     default: undefined,
   },
+  backgroundDarkUrl: {
+    type   : String,
+    default: undefined,
+  },
   dismissable: {
     type   : Boolean,
     default: true,
@@ -142,6 +154,19 @@ const classNames = computed(() => {
   return result
 })
 
+const styleBg = computed<StyleValue>(() => {
+  const result: StyleValue = {}
+
+  if (props.backgroundUrl) {
+    result['--p-contextual-bar-bg-image']      = `url("${props.backgroundUrl}")`
+    result['--p-contextual-bar-bg-dark-image'] = props.backgroundDarkUrl
+      ? `url("${props.backgroundDarkUrl}")`
+      : `url("${props.backgroundUrl}")`
+  }
+
+  return result
+})
+
 function onEnter (target: HTMLDivElement) {
   target.style.setProperty('transform', `translateY(-${target.clientHeight}px)`)
 
@@ -178,6 +203,9 @@ defineSlots<{
 
 <style lang="postcss">
 .contextual-bar {
+  --p-contextual-bar-bg-image: none;
+  --p-contextual-bar-bg-dark-image: none;
+
   @apply fixed z-50 top-0 left-0 p-6 w-full max-w-[100vw];
 
   &__body {
@@ -207,7 +235,8 @@ defineSlots<{
   * are available
   */
   &--background-image {
-    @apply bg-no-repeat bg-cover bg-[top_center];
+    @apply bg-no-repeat bg-cover bg-[top_center] bg-[image:var(--p-contextual-bar-bg-image)];
+    @apply dark:bg-[image:var(--p-contextual-bar-bg-dark-image)]
   }
 
   /**

package/dist/components/cropper/Cropper.vue

@@ -374,6 +374,8 @@ defineExpose({
   fit,
   canvas,
   image,
+  angle,
+  scale,
 })
 
 defineSlots<{

package/dist/components/dialog/Dialog.vue

@@ -14,6 +14,14 @@
     @hide="onModalHide"
     @close="onCancel">
     <template #header>
+      <template v-if="dialogIcon">
+        <div class="dialog__icon">
+          <component
+            :is="dialogIcon"
+            :class="context.iconClass"
+            v-bind="context.iconAttrs" />
+        </div>
+      </template>
       <Heading
         v-p-md.inline="context.title"
         class="modal__title"
@@ -49,7 +57,13 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, ref } from 'vue-demi'
+import {
+  h,
+  ref,
+  computed,
+  nextTick,
+  shallowRef,
+} from 'vue-demi'
 import Modal from '../modal/Modal.vue'
 import Heading from '../heading/Heading.vue'
 import DialogFooter from './DialogFooter.vue'
@@ -60,7 +74,22 @@ import { until } from '@vueuse/core'
 const id         = ref<symbol>()
 const modal      = ref(false)
 const processing = ref(false)
-const context    = ref<DialogContext>()
+const context    = shallowRef<DialogContext>()
+
+const dialogIcon = computed(() => {
+  if (context.value.icon) {
+    if (typeof context.value.icon === 'string') {
+      return () => h('img', {
+        'src'        : context.value.icon,
+        'width'      : 20,
+        'height'     : 20,
+        'data-testid': 'dialog-icon-image',
+      })
+    }
+
+    return context.value.icon
+  }
+})
 
 async function show (options: DialogContext) {
   id.value      = Symbol('DialogId')
@@ -112,5 +141,9 @@ defineExpose({
 <style lang="postcss">
 .dialog {
   --p-modal-z-index: theme(zIndex.dialog);
+
+  &__icon {
+    @apply mt-1 mr-2;
+  }
 }
 </style>

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

@@ -1,6 +1,6 @@
 import type { SizeVariant } from '../modal';
 import type { SizeVariant as InputSizeVariant, StyleVariant as FooterButtonStyleVariant, ColorVariant as FooterButtonColorVariant } from '../button';
-import type { VNode } from 'vue-demi';
+import type { VNode, Component, HTMLAttributes } from 'vue-demi';
 import type { AcceptVariant } from '../input';
 import type { AdditionalAttr } from '../global/types';
 export type FooterAlignVariant = 'start' | 'end';
@@ -15,6 +15,9 @@ interface DialogButton {
 }
 export interface DialogOptions {
     title: string;
+    icon?: string | Component;
+    iconClass?: HTMLAttributes['class'];
+    iconAttrs?: AdditionalAttr;
     text?: string;
     size?: SizeVariant;
     centered?: boolean;

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

@@ -11,7 +11,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: () => never[];
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor | ObjectConstructor | DateConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
         default: undefined;
     };
 }, {
@@ -30,7 +30,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: () => never[];
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor | ObjectConstructor | DateConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
         default: undefined;
     };
 }>> & {

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

@@ -6,15 +6,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         required: true;
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor | ObjectConstructor | DateConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor | ObjectConstructor | DateConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor | ObjectConstructor | DateConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {
@@ -30,15 +30,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         required: true;
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor | ObjectConstructor | DateConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor | ObjectConstructor | DateConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor | ObjectConstructor | DateConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {

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

@@ -146,7 +146,10 @@ function clear () {
     dropzone.value.clear()
 }
 
-defineExpose({ dropzone })
+defineExpose({
+  dropzone,
+  clear,
+})
 </script>
 
 <style lang="postcss">

package/dist/components/input-pin/InputPin.vue

@@ -17,8 +17,8 @@
       :error="error"
       @keydown="onKeyDown($event)"
       @beforeinput.prevent="setValue(i - 1, $event)"
-      @keyup.left.stop.prevent="prevFocus"
-      @keyup.right.stop.prevent="nextFocus" />
+      @keydown.left.stop.prevent="prevFocus"
+      @keydown.right.stop.prevent="nextFocus" />
   </div>
 </template>
 
@@ -100,7 +100,10 @@ const classNames = computed(() => {
   return result
 })
 
-const { next: nextFocus, prev: prevFocus } = useFocus(root, false)
+const {
+  next: nextFocus,
+  prev: prevFocus,
+} = useFocus(root, false)
 
 const model = computed<string[]>({
   get () {
@@ -138,19 +141,18 @@ function setValue (index: number, event: InputEvent) {
 }
 
 function onKeyDown (event: KeyboardEvent) {
-  const target = event.target as HTMLInputElement
+  if (!props.readonly && !props.disabled) {
+    const target = event.target as HTMLInputElement
 
-  if (props.readonly || props.disabled)
-    return
+    if (target.value && [...event.key].length === 1 && !event.ctrlKey && !event.metaKey) {
+      event.preventDefault()
 
-  if (target.value && [...event.key].length === 1 && !event.ctrlKey && !event.metaKey) {
-    event.preventDefault()
+      target.dispatchEvent(new InputEvent('beforeinput', { inputType: 'insertText', data: event.key }))
+    } else if (event.key === 'Backspace') {
+      event.preventDefault()
 
-    target.dispatchEvent(new InputEvent('beforeinput', { inputType: 'insertText', data: event.key }))
-  } else if (event.key === 'Backspace') {
-    event.preventDefault()
-
-    target.dispatchEvent(new InputEvent('beforeinput', { inputType: 'deleteContentBackward' }))
+      target.dispatchEvent(new InputEvent('beforeinput', { inputType: 'deleteContentBackward' }))
+    }
   }
 }
 </script>

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

@@ -6,6 +6,10 @@ export interface MarkdownOption {
      * @link https://marked.js.org/using_advanced#inline
      */
     inline: boolean;
+    /**
+     * Escape value char before encode
+     */
+    escape: boolean;
     /**
      * Disabled sanitize HTML result
      */

package/dist/components/markdown/index.mjs

@@ -1,19 +1,23 @@
 import { parse, parseInline } from "marked";
 import { sanitize } from "@jill64/universal-sanitizer";
 import defu from "defu";
+import { escape } from "html-escaper";
 export function markdown(text = "", _option = {}) {
   const options = defu(_option, {
     inline: false,
+    escape: false,
     unsecure: false,
     marked: { mangle: false, headerIds: false }
   });
-  const html = options.inline ? parseInline(text, options.marked) : parse(text, options.marked);
+  const value = options.escape ? escape(text) : text;
+  const html = options.inline ? parseInline(value, options.marked) : parse(value, options.marked);
   if (html && !options.unsecure)
     return sanitize(html);
   return html;
 }
 export const pMd = (el, { value, modifiers }) => {
   el.innerHTML = markdown(value, {
+    escape: modifiers.escape,
     inline: modifiers.inline,
     unsecure: modifiers.unsecure
   });

package/dist/components/meta.json

@@ -1,20 +1,20 @@
 {
-  "PAccordion": "components/accordion/Accordion.vue",
-  "PAccordionItem": "components/accordion/AccordionItem.vue",
-  "PAccordionItems": "components/accordion/AccordionItems.vue",
   "PAvatar": "components/avatar/Avatar.vue",
   "PAvatarGroup": "components/avatar/AvatarGroup.vue",
   "PAvatarTruncate": "components/avatar/AvatarTruncate.vue",
   "PBadge": "components/badge/Badge.vue",
+  "PAccordion": "components/accordion/Accordion.vue",
+  "PAccordionItem": "components/accordion/AccordionItem.vue",
+  "PAccordionItems": "components/accordion/AccordionItems.vue",
   "PBanner": "components/banner/Banner.vue",
+  "PButton": "components/button/Button.vue",
+  "PCalendar": "components/calendar/Calendar.vue",
+  "PButtonGroup": "components/button-group/ButtonGroup.vue",
   "PBreadcrumb": "components/breadcrumbs/Breadcrumb.vue",
   "PBreadcrumbItem": "components/breadcrumbs/BreadcrumbItem.vue",
   "PBreadcrumbItemDropdown": "components/breadcrumbs/BreadcrumbItemDropdown.vue",
-  "PButton": "components/button/Button.vue",
-  "PButtonGroup": "components/button-group/ButtonGroup.vue",
-  "PCalendar": "components/calendar/Calendar.vue",
-  "PCamera": "components/camera/Camera.vue",
   "PCaption": "components/caption/Caption.vue",
+  "PCamera": "components/camera/Camera.vue",
   "PCard": "components/card/Card.vue",
   "PCardSection": "components/card/CardSection.vue",
   "PCarousel": "components/carousel/Carousel.vue",
@@ -24,35 +24,34 @@
   "PChart": "components/chart/Chart.vue",
   "PChartSet": "components/chart/ChartSet.vue",
   "PChartVal": "components/chart/ChartVal.vue",
-  "PCollapse": "components/collapse/Collapse.vue",
   "PContextualBar": "components/contextual-bar/ContextualBar.vue",
-  "PCropper": "components/cropper/Cropper.vue",
+  "PCollapse": "components/collapse/Collapse.vue",
   "PDatepicker": "components/datepicker/Datepicker.vue",
+  "PCropper": "components/cropper/Cropper.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",
+  "PDot": "components/dot/Dot.vue",
   "PDropdownSubitem": "components/dropdown-subitem/DropdownSubitem.vue",
-  "PDropzone": "components/dropzone/Dropzone.vue",
   "PFilterbar": "components/filterbar/Filterbar.vue",
   "PFormGroup": "components/form-group/FormGroup.vue",
+  "PDropzone": "components/dropzone/Dropzone.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",
+  "PInputFile": "components/input-file/InputFile.vue",
   "PInputPassword": "components/input-password/InputPassword.vue",
-  "PInputPin": "components/input-pin/InputPin.vue",
   "PInputRange": "components/input-range/InputRange.vue",
+  "PInputPin": "components/input-pin/InputPin.vue",
   "PLabel": "components/label/Label.vue",
   "PListGroup": "components/list-group/ListGroup.vue",
   "PListGroupItem": "components/list-group/ListGroupItem.vue",
   "PMain": "components/main/Main.vue",
-  "PModal": "components/modal/Modal.vue",
   "PNav": "components/nav/Nav.vue",
   "PNavCollapse": "components/nav/NavCollapse.vue",
   "PNavForm": "components/nav/NavForm.vue",
@@ -60,23 +59,24 @@
   "PNavItemDropdown": "components/nav/NavItemDropdown.vue",
   "PNavSubItem": "components/nav/NavSubItem.vue",
   "PNavText": "components/nav/NavText.vue",
+  "PModal": "components/modal/Modal.vue",
   "PNavbar": "components/navbar/Navbar.vue",
   "PNavbarBrand": "components/navbar/NavbarBrand.vue",
   "PNavbarNav": "components/navbar/NavbarNav.vue",
   "PNavbarToggle": "components/navbar/NavbarToggle.vue",
-  "PNavbarNavMenu": "components/navbar-menu/NavbarNavMenu.vue",
   "PNotify": "components/notify/Notify.vue",
   "PNotifyGroup": "components/notify/NotifyGroup.vue",
   "PNotifyItem": "components/notify/NotifyItem.vue",
+  "PNavbarNavMenu": "components/navbar-menu/NavbarNavMenu.vue",
   "POverlay": "components/overlay/Overlay.vue",
   "PPage": "components/page/Page.vue",
   "PPagination": "components/pagination/Pagination.vue",
-  "PPdfHelipad": "components/pdf-helipad/PdfHelipad.vue",
   "PPdfObject": "components/pdf-object/PdfObject.vue",
   "PPdfObjectAddon": "components/pdf-object/PdfObjectAddon.vue",
   "PPdfObjectDebugger": "components/pdf-object/PdfObjectDebugger.vue",
   "PPdfObjects": "components/pdf-object/PdfObjects.vue",
   "PPdfText": "components/pdf-text/PdfText.vue",
+  "PPdfHelipad": "components/pdf-helipad/PdfHelipad.vue",
   "PPdfError": "components/pdf-viewer/PdfError.vue",
   "PPdfLoading": "components/pdf-viewer/PdfLoading.vue",
   "PPdfNavigation": "components/pdf-viewer/PdfNavigation.vue",
@@ -87,8 +87,9 @@
   "PProgressItem": "components/progress/ProgressItem.vue",
   "PProgressIndicator": "components/progress-indicator/ProgressIndicator.vue",
   "PProgressbar": "components/progressbar/Progressbar.vue",
-  "PRingbar": "components/ringbar/Ringbar.vue",
   "PRadio": "components/radio/Radio.vue",
+  "PQrcode": "components/qrcode/Qrcode.vue",
+  "PRingbar": "components/ringbar/Ringbar.vue",
   "PSelect": "components/select/Select.vue",
   "PSelectInput": "components/select/SelectInput.vue",
   "PSelectTags": "components/select/SelectTags.vue",
@@ -108,24 +109,24 @@
   "PSpinnerRing": "components/spinner/SpinnerRing.vue",
   "PSpinnerRinggo": "components/spinner/SpinnerRinggo.vue",
   "PSpread": "components/spread/Spread.vue",
+  "PStrengthbar": "components/strengthbar/Strengthbar.vue",
   "PStep": "components/steps/Step.vue",
   "PStepSlider": "components/steps/StepSlider.vue",
   "PSteps": "components/steps/Steps.vue",
-  "PStrengthbar": "components/strengthbar/Strengthbar.vue",
   "PSubheading": "components/subheading/Subheading.vue",
   "PTable": "components/table/Table.vue",
-  "PTableFlex": "components/table-flex/TableFlex.vue",
   "PTableStatic": "components/table-static/TableStatic.vue",
   "PTableStaticRoot": "components/table-static/TableStaticRoot.vue",
+  "PTableFlex": "components/table-flex/TableFlex.vue",
   "PTab": "components/tabs/Tab.vue",
   "PTabContent": "components/tabs/TabContent.vue",
   "PTabs": "components/tabs/Tabs.vue",
   "PText": "components/text/Text.vue",
   "PTextarea": "components/textarea/Textarea.vue",
+  "PTimepicker": "components/timepicker/Timepicker.vue",
   "PTime": "components/time/Time.vue",
   "PTimeItem": "components/time/TimeItem.vue",
   "PToast": "components/toast/Toast.vue",
-  "PTimepicker": "components/timepicker/Timepicker.vue",
   "PToggle": "components/toggle/Toggle.vue",
   "PTooltip": "components/tooltip/Tooltip.vue",
   "PTooltipContainer": "components/tooltip/TooltipContainer.vue",

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

@@ -90,6 +90,10 @@ const props = defineProps({
   },
 })
 
+defineEmits<{
+  'update:modelValue': [unknown],
+}>()
+
 const model   = useVModel(props)
 const preview = usePreview(model, createSpinner(props.width, props.height))
 const srcset  = ref('')

package/dist/components/pdf-viewer/utils/use-viewer.mjs

@@ -6,7 +6,7 @@ import {
   watch
 } from "vue-demi";
 import useLoading from "../../overlay/utils/use-loading.mjs";
-import { useClamp } from "@vueuse/math";
+import { useClamp, useMax } from "@vueuse/math";
 import { createEventHook } from "@vueuse/core";
 import {
   createEventBus,
@@ -23,7 +23,7 @@ export function useViewer(container, viewer) {
   const pdfLinkService = shallowRef();
   const totalPage = computed(() => pdfDoc.value?.numPages ?? 0);
   const scale = useClamp(1, 0.1, 2);
-  const page = useClamp(1, 1, totalPage);
+  const page = useClamp(1, 1, useMax(totalPage, 1));
   const loading = useLoading();
   const ready = shallowRef(false);
   const error = shallowRef();

package/dist/components/popup/Popup.vue

@@ -52,29 +52,18 @@ import type { Component, PropType } from 'vue-demi'
 import {
   computed,
   h,
-  markRaw,
 } from 'vue-demi'
 import type {
   PopupActionOption,
   PopupStyleVariant,
   PopupTypeVariant,
 } from '.'
-import IconInfo from '@privyid/persona-icon/vue/information-circle-solid/20.vue'
-import IconSuccess from '@privyid/persona-icon/vue/checkmark/20.vue'
-import IconWarning from '@privyid/persona-icon/vue/exclamation-circle-solid/20.vue'
-import IconError from '@privyid/persona-icon/vue/exclamation-triangle-solid/20.vue'
 import IconClose from '@privyid/persona-icon/vue/close/16.vue'
 import { vPMd } from '../markdown'
 import type { ColorVariant } from '../button'
 import type { AdditionalAttr } from '../global/types'
 import { useNotifyItem } from '../notify'
-
-const ToastIcons = {
-  info   : markRaw(IconInfo),
-  success: markRaw(IconSuccess),
-  warning: markRaw(IconWarning),
-  error  : markRaw(IconError),
-}
+import { PopupIcons } from '.'
 
 const props = defineProps({
   title: {
@@ -155,7 +144,7 @@ const classIcon = computed(() => {
 
 const toastIcon = computed(() => {
   if (!props.icon)
-    return ToastIcons[props.type]
+    return PopupIcons[props.type]
 
   if (typeof props.icon === 'string') {
     return () => h('img', {

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

@@ -26,6 +26,12 @@ interface Option extends Omit<NotifyOption, 'component'> {
     dismissable?: boolean;
     actions?: PopupActionOption[];
 }
+export declare const PopupIcons: {
+    info: any;
+    success: any;
+    warning: any;
+    error: any;
+};
 export type PopupOption = RequireAtLeastOne<Option, 'text' | 'title'>;
 declare function showPopup(text: string, title?: string, type?: PopupTypeVariant, variant?: PopupStyleVariant): Promise<PopupInstance>;
 declare function showPopup(option: PopupOption): Promise<PopupInstance>;

package/dist/components/popup/index.mjs

@@ -1,5 +1,15 @@
 import { markRaw } from "vue-demi";
 import { showNotify } from "../notify/index.mjs";
+import IconInfo from "@privyid/persona-icon/vue/information-circle-solid/20.vue";
+import IconSuccess from "@privyid/persona-icon/vue/checkmark/20.vue";
+import IconWarning from "@privyid/persona-icon/vue/exclamation-circle-solid/20.vue";
+import IconError from "@privyid/persona-icon/vue/exclamation-triangle-solid/20.vue";
+export const PopupIcons = {
+  info: markRaw(IconInfo),
+  success: markRaw(IconSuccess),
+  warning: markRaw(IconWarning),
+  error: markRaw(IconError)
+};
 async function showPopup(textOrOption, title, type, variant) {
   if (typeof textOrOption === "string") {
     return await showPopup({

package/dist/components/qrcode/Qrcode.vue

@@ -0,0 +1,174 @@
+<template>
+  <img
+    data-testid="qrcode"
+    class="qrcode"
+    :width="size"
+    :height="size"
+    :src="preview"
+    :alt="String(data)">
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue-demi'
+import {
+  computed,
+  onMounted,
+  shallowRef,
+} from 'vue-demi'
+import type QRCode from 'qr-code-styling'
+import type {
+  Options,
+  ErrorCorrectionLevel,
+  TypeNumber,
+  Mode,
+} from 'qr-code-styling'
+import type { StyleVariant } from '.'
+import type { ModelModifier } from '../dropzone'
+import { defuFn } from 'defu'
+import { usePreview } from '../cropper/utils/use-preview'
+import { useVModel } from '../input'
+import { createSpinner } from '../avatar/utils/create-image'
+import { fromBase64 } from '../utils/base64'
+import { toDataURL } from '../signature-draw/utils/canvas'
+import { watchDebounced } from '@vueuse/core'
+
+const props = defineProps({
+  modelValue: {
+    type   : [String, globalThis.File],
+    default: undefined,
+  },
+  modelModifiers: {
+    type   : Object as PropType<ModelModifier>,
+    default: () => ({} as ModelModifier),
+  },
+  data: {
+    type   : undefined as PropType<any>,
+    default: undefined,
+  },
+  variant: {
+    type   : String as PropType<StyleVariant>,
+    default: 'square',
+  },
+  size: {
+    type   : [Number, String],
+    default: 200,
+  },
+  logo: {
+    type   : String,
+    default: undefined,
+  },
+  logoSize: {
+    type   : [Number, String],
+    default: 0.8,
+  },
+  logoMargin: {
+    type   : [Number, String],
+    default: 8,
+  },
+  color: {
+    type   : String,
+    default: '#000000',
+  },
+  bgColor: {
+    type   : String,
+    default: '#ffffff',
+  },
+  ecc: {
+    type   : String as PropType<ErrorCorrectionLevel>,
+    default: 'M',
+  },
+  typeNumber: {
+    type   : Number as PropType<TypeNumber>,
+    default: 0,
+  },
+  mode: {
+    type   : String as PropType<Mode>,
+    default: undefined,
+  },
+  options: {
+    type   : Object as PropType<Options>,
+    default: undefined,
+  },
+})
+
+const model   = useVModel(props)
+const preview = usePreview(model, createSpinner(Number(props.size)))
+const qrCode  = shallowRef<QRCode>()
+
+const qrOptions = computed(() => {
+  return defuFn<Options, [Options]>(props.options, {
+    type       : 'canvas',
+    data       : props.data,
+    width      : props.size as number,
+    height     : props.size as number,
+    image      : props.logo,
+    dotsOptions: {
+      type : props.variant,
+      color: props.color,
+    },
+    cornersDotOptions   : { type: props.variant === 'dots' ? 'dot' : undefined },
+    cornersSquareOptions: { type: props.variant === 'dots' ? 'extra-rounded' : undefined },
+    qrOptions           : {
+      mode                : props.mode,
+      typeNumber          : props.typeNumber,
+      errorCorrectionLevel: props.ecc,
+    },
+    imageOptions: {
+      margin   : props.logoMargin as number,
+      imageSize: props.logoSize as number,
+    },
+    backgroundOptions: { color: props.bgColor },
+  })
+})
+
+watchDebounced(() => [
+  props.data,
+  props.variant,
+  props.size,
+  props.logo,
+  props.logoSize,
+  props.logoMargin,
+  props.color,
+  props.bgColor,
+  props.ecc,
+  props.typeNumber,
+  props.mode,
+  props.options,
+], () => {
+  load()
+}, { debounce: 300 })
+
+onMounted(() => {
+  load()
+})
+
+async function load () {
+  if (props.data) {
+    if (qrCode.value)
+      qrCode.value.update(qrOptions.value)
+    else {
+      const { default: QRStyling } = await import('qr-code-styling')
+
+      qrCode.value = new QRStyling(qrOptions.value)
+    }
+
+    const canvas = await qrCode.value._getElement('png')
+    const result = toDataURL(canvas as HTMLCanvasElement, 'image/png')
+    const value  = props.modelModifiers.base64
+      ? result
+      : fromBase64(result)
+
+    model.value = value
+  }
+}
+
+defineEmits<{
+  'update:modelValue': [unknown],
+}>()
+</script>
+
+<style lang="postcss">
+.qrcode {
+  @apply max-w-full h-auto;
+}
+</style>

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

@@ -0,0 +1 @@
+export type StyleVariant = 'square' | 'rounded' | 'dots';

package/dist/components/shimmer/Shimmer.vue

@@ -90,7 +90,7 @@ defineProps({
   },
 })
 
-const uid = uniqueId('shimmer')
+const uid = uniqueId('shimmer-')
 </script>
 
 <style lang="postcss">

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

@@ -14,7 +14,6 @@ import {
   ref,
   computed,
   onMounted,
-  watch,
 } from 'vue-demi'
 import { useVModel } from '../input'
 import { createSpinner } from '../avatar/utils/create-image'
@@ -23,6 +22,7 @@ import generate from './utils/generate-text'
 import { usePreview } from '../cropper'
 import type { ModelModifier } from '../dropzone'
 import { fromBase64 } from '../utils/base64'
+import { watchDebounced } from '@vueuse/core'
 
 const props = defineProps({
   modelValue: {
@@ -93,7 +93,7 @@ const name = computed(() => {
   )
 })
 
-watch(() => [
+watchDebounced(() => [
   props.text,
   props.font,
   props.color,
@@ -103,7 +103,7 @@ watch(() => [
   props.maxlength,
 ], () => {
   load()
-})
+}, { debounce: 300 })
 
 onMounted(() => {
   load()

package/dist/components/utils/date.mjs

@@ -1,5 +1,4 @@
-import id from "date-fns/locale/id/index";
-import en from "date-fns/locale/en-US/index";
+import { id, enUS as en } from "date-fns/locale";
 import { getLang } from "../global/store.mjs";
 import { format } from "date-fns";
 import defu from "defu";

package/dist/core/index.d.ts

@@ -2,7 +2,7 @@ export { useSingleton, removeSingleton, resetInstance, } from '../components/glo
 export { hideOverlay, showOverlay, } from '../components/overlay';
 export { hideTooltip, showTooltip, toggleTooltip, } from '../components/tooltip';
 export { default as toast, } from '../components/toast';
-export { default as popup, } from '../components/popup';
+export { default as popup, PopupIcons, } from '../components/popup';
 export { default as notify, useNotifyItem, } from '../components/notify';
 export * as dialog from '../components/dialog';
 export { type SelectItem, defineOptions, } from '../components/select';

package/dist/core/index.mjs

@@ -16,7 +16,8 @@ export {
   default as toast
 } from "../components/toast";
 export {
-  default as popup
+  default as popup,
+  PopupIcons
 } from "../components/popup";
 export {
   default as notify,

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "1.0.0-rc.3"
+  "version": "1.0.0-rc.4"
 }

package/dist/module.mjs

@@ -9,7 +9,6 @@ const module = defineNuxtModule({
   defaults: { font: true, prefix: "p" },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    nuxt.options.alias["date-fns/locale"] = "date-fns/esm/locale";
     if (options.font) {
       nuxt.options.app.head.link?.push(
         { rel: "preconnect", href: "https://fonts.googleapis.com" },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona",
   "description": "Persona core package",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.4",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",
@@ -28,7 +28,7 @@
       "import": "./dist/directive/index.mjs",
       "types": "./dist/directive/index.d.ts"
     },
-    "./components/*": "./dist/components/"
+    "./components/": "./dist/components/"
   },
   "typesVersions": {
     "*": {
@@ -52,16 +52,16 @@
   "scripts": {
     "prepack": "yarn build",
     "prepare": "yarn dev:prepare",
-    "build": "nuxt-module-build",
+    "build": "nuxt-module-build build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
   },
   "dependencies": {
     "@floating-ui/dom": "1.6.3",
-    "@jill64/universal-sanitizer": "^1.0.2",
+    "@jill64/universal-sanitizer": "1.2.7",
     "@juggle/resize-observer": "3.4.0",
-    "@nuxt/kit": "3.10.3",
+    "@nuxt/kit": "3.11.1",
     "@splidejs/splide": "4.1.4",
     "@testing-library/dom": "9.3.4",
     "@testing-library/user-event": "14.5.2",
@@ -71,13 +71,13 @@
     "@zxing/library": "0.20.0",
     "chart.js": "4.4.2",
     "core-js": "3",
-    "date-fns": "2.30.0",
+    "date-fns": "3.6.0",
     "defu": "6.1.4",
-    "fast-equals": "^5.0.0",
+    "fast-equals": "5.0.1",
     "fuse.js": "7.0.0",
-    "interactjs": "1.10.26",
+    "interactjs": "1.10.27",
     "lodash-es": "4.17.21",
-    "marked": "11.2.0",
+    "marked": "12.0.1",
     "nanodelay": "2.0.2",
     "pdfjs-dist": "3.11.174",
     "scroll-into-view": "1.16.2",
@@ -92,8 +92,8 @@
     "extends @privyid/browserslist-config"
   ],
   "peerDependencies": {
-    "@privyid/browserslist-config": "^1.0.0-rc.3",
-    "@privyid/tailwind-preset": "^1.0.0-rc.2",
+    "@privyid/browserslist-config": "^1.0.0-rc.4",
+    "@privyid/tailwind-preset": "^1.0.0-rc.4",
     "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.10.3",
+    "@nuxt/schema": "3.11.1",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@privyid/browserslist-config": "^1.0.0-rc.3",
-    "@privyid/tailwind-preset": "^1.0.0-rc.2",
+    "@privyid/browserslist-config": "^1.0.0-rc.4",
+    "@privyid/tailwind-preset": "^1.0.0-rc.4",
     "@types/sanitize-html": "^2",
     "browserslist-to-esbuild": "^2.0.0",
-    "nuxt": "3.10.3",
+    "nuxt": "3.11.1",
     "postcss-custom-properties": "^13.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",