@privyid/persona 0.21.0 → 0.22.0

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 | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    dialogClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    contentClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    bodyClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    footerClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        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 | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    dialogClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    contentClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    bodyClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    footerClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
@@ -97,9 +145,15 @@ declare const _default: import("vue-demi").DefineComponent<{
     text: string;
     title: string;
     centered: boolean;
+    noCloseOnBackdrop: boolean;
     modelValue: boolean;
+    bodyClass: string | Record<string, any> | unknown[];
     noCloseOnEsc: boolean;
-    noCloseOnBackdrop: 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/NavItemDropdown.vue.d.ts

@@ -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;

package/dist/components/pdf-helipad/PdfHelipad.vue

@@ -22,99 +22,115 @@
   </div>
 </template>
 
-<script>
-import { templateRef } from "@vueuse/core";
+<script lang="ts" setup>
+import '../pdf-object/PdfObject.vue'
+import { templateRef } from '@vueuse/core'
 import {
   computed,
-  defineComponent,
   ref,
   toRef,
   watch,
-  watchEffect
-} from "vue-demi";
-import { getPosition } from "../pdf-object/utils/position";
-import useDrag from "./utils/use-drag";
-export default defineComponent({
-  props: {
-    scale: {
-      type: Number,
-      default: 1
-    },
-    width: {
-      type: Number,
-      default: 198
-    },
-    height: {
-      type: Number,
-      default: 106
-    },
-    disabled: {
-      type: Boolean,
-      default: false
+  watchEffect,
+} from 'vue-demi'
+import { getPosition } from '../pdf-object/utils/position'
+import useDrag from './utils/use-drag'
+import type { PdfHelipadResult } from '.'
+import type { InteractEvent } from '@interactjs/types'
+
+const props = defineProps({
+  scale: {
+    type   : Number,
+    default: 1,
+  },
+  width: {
+    type   : Number,
+    default: 198,
+  },
+  height: {
+    type   : Number,
+    default: 106,
+  },
+  disabled: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  'landed': [PdfHelipadResult],
+  'click': [InteractEvent],
+}>()
+
+const object = templateRef<HTMLDivElement>('object')
+const scale  = toRef(props, 'scale')
+const width  = toRef(props, 'width')
+const height = toRef(props, 'height')
+
+const isDragged = ref(false)
+const x         = ref(0)
+const y         = ref(0)
+
+const classNames = computed(() => {
+  const result: string[] = []
+
+  if (props.disabled)
+    result.push('pdf-helipad--disabled')
+
+  return result
+})
+
+const draggable = useDrag(object, {
+  onstart () {
+    const { left, top } = object.value.getBoundingClientRect()
+
+    isDragged.value = true
+    x.value         = left
+    y.value         = top
+  },
+  onmove (event) {
+    x.value = event.clientX - (event.rect.width * scale.value / 2)
+    y.value = event.clientY - (event.rect.height * scale.value / 2)
+  },
+  onend (event) {
+    if (event.relatedTarget) {
+      const reference = event.relatedTarget
+      const result    = getPosition({
+        reference: reference as HTMLDivElement,
+        object   : object.value,
+        scale    : scale.value,
+      })
+
+      emit('landed', {
+        ...result,
+        width : width.value,
+        height: height.value,
+      })
     }
+
+    isDragged.value = false
+  },
+  ontap (event) {
+    emit('click', event)
   },
-  emits: ["landed"],
-  setup(props, { emit }) {
-    const object = templateRef("object");
-    const scale = toRef(props, "scale");
-    const width = toRef(props, "width");
-    const height = toRef(props, "height");
-    const isDragged = ref(false);
-    const x = ref(0);
-    const y = ref(0);
-    const classNames = computed(() => {
-      const result = [];
-      if (props.disabled)
-        result.push("pdf-helipad--disabled");
-      return result;
-    });
-    const draggable = useDrag(object, {
-      onstart() {
-        const { left, top } = object.value.getBoundingClientRect();
-        isDragged.value = true;
-        x.value = left;
-        y.value = top;
-      },
-      onmove(event) {
-        x.value = event.clientX - event.rect.width * scale.value / 2;
-        y.value = event.clientY - event.rect.height * scale.value / 2;
-      },
-      onend(event) {
-        if (event.relatedTarget) {
-          const reference = event.relatedTarget;
-          const result = getPosition({
-            reference,
-            object: object.value,
-            scale: scale.value
-          });
-          emit("landed", {
-            ...result,
-            width: width.value,
-            height: height.value
-          });
-        }
-        isDragged.value = false;
-      }
-    });
-    watchEffect(() => {
-      if (object.value) {
-        if (isDragged.value) {
-          object.value.style.position = "fixed";
-          object.value.style.transform = `translate(${x.value}px, ${y.value}px) scale(${scale.value})`;
-          object.value.style.zIndex = "50";
-        } else {
-          object.value.style.position = "absolute";
-          object.value.style.transform = "translate(0px, 0px)";
-          object.value.style.zIndex = "2";
-        }
-      }
-    });
-    watch(() => props.disabled, (isDisabled) => {
-      draggable.value = !isDisabled;
-    }, { immediate: true });
-    return { classNames };
+})
+
+watchEffect(() => {
+  if (object.value) {
+    if (isDragged.value) {
+      object.value.style.position  = 'fixed'
+      object.value.style.transform = `translate(${x.value}px, ${y.value}px) scale(${scale.value})`
+      object.value.style.zIndex    = '50'
+    } else {
+      object.value.style.position  = 'absolute'
+      object.value.style.transform = 'translate(0px, 0px)'
+      object.value.style.zIndex    = '2'
+    }
   }
-});
+})
+
+watch(() => props.disabled, (isDisabled) => {
+  draggable.value = !isDisabled
+}, { immediate: true })
 </script>
 
 <style lang="postcss">

package/dist/components/pdf-helipad/utils/use-drag.d.ts

@@ -1,8 +1,3 @@
-import type { InteractEvent } from '@interactjs/types';
 import { Ref } from 'vue-demi';
-export interface DragOptions {
-    onstart?: (event: InteractEvent) => void;
-    onmove?: (event: InteractEvent) => void;
-    onend?: (event: InteractEvent) => void;
-}
-export default function useDrag(target: Ref<HTMLElement>, options?: DragOptions): import("vue-demi").ShallowRef<boolean>;
+import { DragHooks } from '../../pdf-object/utils/use-drag';
+export default function useDrag(target: Ref<HTMLElement>, options?: DragHooks): import("vue-demi").ShallowRef<boolean>;