@privyid/persona 0.21.0 → 0.23.0

package/dist/components/meta.json

@@ -0,0 +1,135 @@
+{
+  "PAccordion": "components/accordion/Accordion.vue",
+  "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",
+  "PButton": "components/button/Button.vue",
+  "PButtonGroup": "components/button-group/ButtonGroup.vue",
+  "PCamera": "components/camera/Camera.vue",
+  "PCalendar": "components/calendar/Calendar.vue",
+  "PCaption": "components/caption/Caption.vue",
+  "PCard": "components/card/Card.vue",
+  "PCardSection": "components/card/CardSection.vue",
+  "PCarousel": "components/carousel/Carousel.vue",
+  "PCarouselBody": "components/carousel/CarouselBody.vue",
+  "PCarouselItem": "components/carousel/CarouselItem.vue",
+  "PChart": "components/chart/Chart.vue",
+  "PChartSet": "components/chart/ChartSet.vue",
+  "PChartVal": "components/chart/ChartVal.vue",
+  "PCheckbox": "components/checkbox/Checkbox.vue",
+  "PCollapse": "components/collapse/Collapse.vue",
+  "PContextualBar": "components/contextual-bar/ContextualBar.vue",
+  "PCropper": "components/cropper/Cropper.vue",
+  "PDatepicker": "components/datepicker/Datepicker.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",
+  "PFilterbar": "components/filterbar/Filterbar.vue",
+  "PFormGroup": "components/form-group/FormGroup.vue",
+  "PHeading": "components/heading/Heading.vue",
+  "PInput": "components/input/Input.vue",
+  "PInputFile": "components/input-file/InputFile.vue",
+  "PInputGroup": "components/input-group/InputGroup.vue",
+  "PInputGroupAddon": "components/input-group/InputGroupAddon.vue",
+  "PInputPassword": "components/input-password/InputPassword.vue",
+  "PInputPin": "components/input-pin/InputPin.vue",
+  "PInputRange": "components/input-range/InputRange.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",
+  "PNavItem": "components/nav/NavItem.vue",
+  "PNavItemDropdown": "components/nav/NavItemDropdown.vue",
+  "PNavSubItem": "components/nav/NavSubItem.vue",
+  "PNavText": "components/nav/NavText.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",
+  "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",
+  "PPdfError": "components/pdf-viewer/PdfError.vue",
+  "PPdfLoading": "components/pdf-viewer/PdfLoading.vue",
+  "PPdfNavigation": "components/pdf-viewer/PdfNavigation.vue",
+  "PPdfViewer": "components/pdf-viewer/PdfViewer.vue",
+  "PProgress": "components/progress/Progress.vue",
+  "PProgressItem": "components/progress/ProgressItem.vue",
+  "PProgressIndicator": "components/progress-indicator/ProgressIndicator.vue",
+  "PProgressbar": "components/progressbar/Progressbar.vue",
+  "PRadio": "components/radio/Radio.vue",
+  "PRingbar": "components/ringbar/Ringbar.vue",
+  "PSelect": "components/select/Select.vue",
+  "PSelectInput": "components/select/SelectInput.vue",
+  "PSelectTags": "components/select/SelectTags.vue",
+  "PSheet": "components/sheet/Sheet.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",
+  "PSignatureDraw": "components/signature-draw/SignatureDraw.vue",
+  "PSignatureDrawDesktop": "components/signature-draw/SignatureDrawDesktop.vue",
+  "PSignatureDrawMobile": "components/signature-draw/SignatureDrawMobile.vue",
+  "PSignatureText": "components/signature-text/SignatureText.vue",
+  "PSpinner": "components/spinner/Spinner.vue",
+  "PSpinnerRing": "components/spinner/SpinnerRing.vue",
+  "PSpinnerRinggo": "components/spinner/SpinnerRinggo.vue",
+  "PSpread": "components/spread/Spread.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",
+  "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",
+  "PToast": "components/toast/Toast.vue",
+  "PToastContainer": "components/toast/ToastContainer.vue",
+  "PToastRoot": "components/toast/ToastRoot.vue",
+  "PToggle": "components/toggle/Toggle.vue",
+  "PTooltip": "components/tooltip/Tooltip.vue",
+  "PTooltipContainer": "components/tooltip/TooltipContainer.vue",
+  "PTour": "components/tour/Tour.vue",
+  "PTourDialog": "components/tour/TourDialog.vue",
+  "PTourHighlight": "components/tour/TourHighlight.vue",
+  "PTruncate": "components/truncate/Truncate.vue",
+  "PWizard": "components/wizard/Wizard.vue",
+  "PWizardBody": "components/wizard/WizardBody.vue",
+  "PWizardHeader": "components/wizard/WizardHeader.vue",
+  "PWizardStep": "components/wizard/WizardStep.vue",
+  "PIconCheckbox": "components/checkbox/icon/IconCheckbox.vue",
+  "PIconInderteminate": "components/checkbox/icon/IconInderteminate.vue",
+  "PPinnedDate": "components/filterbar/pinned/PinnedDate.vue",
+  "PPinnedMultiselect": "components/filterbar/pinned/PinnedMultiselect.vue",
+  "PPinnedSelect": "components/filterbar/pinned/PinnedSelect.vue",
+  "PPinnedToggle": "components/filterbar/pinned/PinnedToggle.vue"
+}

package/dist/components/modal/Modal.vue

@@ -13,21 +13,33 @@
         mode="out-in">
         <div
           v-show="model"
-          class="modal__dialog">
+          class="modal__dialog"
+          :class="dialogClass"
+          data-testid="modal-dialog">
+          <span
+            v-if="dismissable && (size === 'full' && freeDistraction)"
+            data-testid="modal-free-distraction-dismiss"
+            class="modal__dismiss"
+            @click="close">
+            <IconCloseFull class="text-state-emphasis dark:text-dark-state-emphasis" />
+          </span>
           <div
             class="modal__content"
+            :class="contentClass"
+            data-testid="modal-content"
             @click.stop>
             <span
-              v-if="dismissable"
+              v-if="dismissable && size !== 'full'"
               data-testid="modal-dismiss"
               class="modal__dismiss"
               @click="close">
               <IconClose />
             </span>
             <div
-              v-if="$slots.header || title"
+              v-if="($slots.header || title) && (size !== 'full' || freeDistraction)"
               data-testid="modal-header"
-              class="modal__header">
+              class="modal__header"
+              :class="headerClass">
               <slot name="header">
                 <Heading
                   v-if="title"
@@ -39,15 +51,51 @@
             </div>
             <div
               data-testid="modal-body"
-              :class="[ { 'modal__body--scroll' : modalBodyScrollable }, 'modal__body' ]">
-              <slot>
+              :class="[ { 'modal__body--scroll' : modalBodyScrollable}, (size !== 'full' || freeDistraction) ? bodyClass : '', 'modal__body' ]">
+              <div
+                v-if="size === 'full' && !freeDistraction"
+                class="modal--full__content">
+                <div
+                  class="modal--full__header">
+                  <span
+                    v-if="dismissable"
+                    class="modal--full__header__dismiss">
+                    <Button
+                      variant="link"
+                      data-testid="modal-full-dismiss"
+                      @click="close">
+                      <IconCloseFull />
+                    </Button>
+                  </span>
+                  <div
+                    data-testid="modal-full-header"
+                    class="modal--full__header__title"
+                    :class="headerClass">
+                    <slot name="header">
+                      <Heading
+                        v-if="title"
+                        class="modal__title"
+                        element="h6">
+                        {{ title }}
+                      </Heading>
+                    </slot>
+                  </div>
+                </div><!-- /header -->
+                <div :class="bodyClass">
+                  <slot name="body">
+                    {{ text }}
+                  </slot>
+                </div><!-- /body -->
+              </div><!-- /content -->
+              <slot v-else>
                 {{ text }}
               </slot>
             </div>
             <div
-              v-if="$slots.footer"
+              v-if="$slots.footer && (size !== 'full' || freeDistraction)"
               data-testid="modal-footer"
-              class="modal__footer">
+              class="modal__footer"
+              :class="footerClass">
               <slot
                 name="footer"
                 :close="close" />
@@ -68,10 +116,17 @@ import {
 } from "vue-demi";
 import { onKeyStroke } from "@vueuse/core";
 import Heading from "../heading/Heading.vue";
+import Button from "../button/Button.vue";
 import IconClose from "@privyid/persona-icon/vue/close/16.vue";
+import IconCloseFull from "@privyid/persona-icon/vue/close/24.vue";
 import { useVModel } from "../input";
 export default defineComponent({
-  components: { Heading, IconClose },
+  components: {
+    Heading,
+    Button,
+    IconClose,
+    IconCloseFull
+  },
   props: {
     title: {
       type: String,
@@ -112,6 +167,50 @@ export default defineComponent({
     centered: {
       type: Boolean,
       default: false
+    },
+    freeDistraction: {
+      type: Boolean,
+      default: false
+    },
+    headerClass: {
+      type: [
+        String,
+        Array,
+        Object
+      ],
+      default: void 0
+    },
+    dialogClass: {
+      type: [
+        String,
+        Array,
+        Object
+      ],
+      default: void 0
+    },
+    contentClass: {
+      type: [
+        String,
+        Array,
+        Object
+      ],
+      default: void 0
+    },
+    bodyClass: {
+      type: [
+        String,
+        Array,
+        Object
+      ],
+      default: void 0
+    },
+    footerClass: {
+      type: [
+        String,
+        Array,
+        Object
+      ],
+      default: void 0
     }
   },
   models: {
@@ -129,6 +228,8 @@ export default defineComponent({
         result.push("modal--centered");
       if (props.banner)
         result.push("modal--banner");
+      if (props.freeDistraction && props.size === "full")
+        result.push("modal--free-distraction");
       return result;
     });
     function close(event) {
@@ -172,6 +273,7 @@ export default defineComponent({
   /**
   * modal sizing variables
   */
+  --p-modal-size-full: 1022px;
   --p-modal-size-xl: 960px;
   --p-modal-size-lg: 800px;
   --p-modal-size-md: 600px;
@@ -234,11 +336,20 @@ export default defineComponent({
     }
   }
 
+  /**
+  * Set padding
+  * in body and footer
+  * of modal
+  */
   &__body,
   &__footer {
     @apply p-6;
   }
 
+  /**
+  * Modal variant
+  * Scroll
+  */
   &__body {
     &&--scroll {
       @apply max-h-[var(--p-modal-body-scrollable-max-height)] min-h-[var(--p-modal-body-scrollable-min-height)] overflow-y-auto overscroll-contain;
@@ -256,9 +367,9 @@ export default defineComponent({
   }
 
   /**
-  * Modal has 4 different size
-  * eg: small, medium, large
-  * and extra large. default
+  * Modal has 5 different size
+  * eg: small, medium, large,
+  * extra large and full. default
   * size are medium
   */
   &&--xl {
@@ -285,6 +396,98 @@ export default defineComponent({
     }
   }
 
+  /**
+  * Modal has 2 types of
+  * full size, eg: full and
+  * free-distraction
+  */
+  &&--full {
+    /**
+    * Style of Modal full
+    * except free distraction type
+    */
+    &:not(.modal--free-distraction) {
+      /**
+      * Make modal dialog and
+      * modal content full height
+      */
+      .modal__dialog {
+        @apply h-full min-h-full;
+      }
+      .modal__content {
+        @apply w-full max-w-full my-0 rounded-none;
+      }
+
+      /**
+      * Reset modal body
+      */
+      .modal__body {
+        @apply p-0 h-full;
+      }
+
+      /**
+      * Custom modal content
+      * in full size
+      */
+      .modal--full__content {
+        @apply flex flex-col justify-items-stretch h-full;
+      }
+
+      /**
+      * Custom modal header
+      * in full size
+      */
+      .modal--full__header {
+        @apply flex h-[60px] border-b border-b-default shrink-0;
+        @apply dark:border-b-dark-default;
+
+        &__dismiss {
+          @apply flex items-center border-r shrink-0 border-r-default bg-default;
+          @apply dark:border-r-dark-default dark:bg-dark-default;
+        }
+
+        &__title {
+          @apply flex grow items-stretch;
+
+          .modal__title {
+            @apply items-center flex;
+          }
+        }
+
+        &__content {
+          @apply grow flex items-stretch;
+        }
+
+        &__navigation {
+          @apply shrink-0 flex items-center border-l border-l-default px-3 space-x-1 bg-default;
+          @apply dark:border-l-dark-default dark:bg-dark-default;
+        }
+      }
+    }
+
+    /**
+    * Styling modal full
+    * with free distraction type
+    */
+    &:is(.modal--free-distraction) {
+      @apply bg-inverse/80;
+      @apply dark:bg-dark-inverse/80;
+
+      .modal__content {
+        @apply w-[var(--p-modal-size-full)];
+      }
+
+      .modal__dismiss {
+        @apply absolute right-5 top-5 p-[10px] rounded bg-default-alpha cursor-pointer;
+        @apply dark:bg-dark-default-alpha;
+      }
+
+      .modal__title {
+        @apply pr-0;
+      }
+    }
+  }
+
   /**
   * Modal vertically center
   * in the viewport

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

@@ -41,6 +41,30 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    freeDistraction: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    headerClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    dialogClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    contentClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    bodyClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    footerClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
 }, {
     model: import("vue-demi").Ref<boolean>;
     classNames: import("vue-demi").ComputedRef<string[]>;
@@ -87,6 +111,30 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    freeDistraction: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    headerClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    dialogClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    contentClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    bodyClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    footerClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
@@ -95,11 +143,17 @@ declare const _default: import("vue-demi").DefineComponent<{
     dismissable: boolean;
     banner: boolean;
     text: string;
+    modelValue: boolean;
     title: string;
     centered: boolean;
-    modelValue: boolean;
-    noCloseOnEsc: boolean;
     noCloseOnBackdrop: boolean;
+    bodyClass: string | Record<string, any> | unknown[];
+    noCloseOnEsc: boolean;
     modalBodyScrollable: boolean;
+    freeDistraction: boolean;
+    headerClass: string | Record<string, any> | unknown[];
+    dialogClass: string | Record<string, any> | unknown[];
+    contentClass: string | Record<string, any> | unknown[];
+    footerClass: string | Record<string, any> | unknown[];
 }, {}>;
 export default _default;

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

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

package/dist/components/nav/Nav.vue

@@ -115,6 +115,10 @@ export default defineComponent({
     @apply first:ml-2 mr-2 last:mr-0;
   }
 
+  &__item > &__link {
+    @apply no-underline transition-colors duration-150 ease-out;
+  }
+
   & > &__item {
     .nav__link {
       @apply text-subtle;
@@ -357,7 +361,7 @@ export default defineComponent({
       }
 
       &__link {
-        @apply mb-0 -mr-[1px];
+        @apply mb-0;
       }
 
       &__title {

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

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

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

@@ -18,7 +18,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     linkClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
     exact: {
@@ -47,7 +47,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     linkClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
     exact: {

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

@@ -32,7 +32,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     menuClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
     menuSize: {
@@ -75,7 +75,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     menuClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
     menuSize: {
@@ -95,8 +95,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     divider: boolean;
     text: string;
     modelValue: boolean;
-    placement: Placement;
     noCaret: boolean;
+    placement: Placement;
     menuClass: string | Record<string, any> | unknown[];
     menuSize: MenuSizeVariant;
 }, {}>;

package/dist/components/nav/NavSubItem.vue

@@ -127,14 +127,10 @@ export default defineComponent({
     }
 
     .nav {
-      @apply pt-0 ml-5 select-none;
+      @apply pt-3 select-none;
     }
 
     &&--icon {
-      .nav {
-        @apply ml-5;
-      }
-
       .nav__link__icon {
         @apply grow-0;
 
@@ -144,7 +140,7 @@ export default defineComponent({
       }
 
       .nav__link__label {
-        @apply shrink ml-3 w-full select-none;
+        @apply shrink pl-3 w-full select-none;
 
         .badge {
           @apply ml-auto;
@@ -176,6 +172,10 @@ export default defineComponent({
         @apply dark:text-dark-subtle hover:dark:text-dark-default;
       }
     }
+
+    .sidebar__nav .nav__link__label {
+      @apply pl-8;
+    }
   }
 
   &&--condensed {

package/dist/components/navbar/Navbar.vue.d.ts

@@ -48,8 +48,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    fixed: boolean;
     variant: StyleVariant;
+    fixed: boolean;
     toggleable: ToggleableVariant | undefined;
     condensed: boolean;
     sticky: boolean;

package/dist/components/navbar/NavbarBrand.vue

@@ -20,7 +20,7 @@ export default defineComponent({
 </script>
 
 <style lang="postcss">
-  .navbar {
+  a.navbar {
     &__brand {
       @apply inline-block mr-4 text-xl py-1 font-medium text-default no-underline cursor-pointer hover:no-underline;
       @apply dark:text-dark-default;