@privyid/persona 0.9.0 → 0.11.0

package/dist/components/navbar/NavbarNav.vue

@@ -53,14 +53,22 @@ export default defineComponent({
     .dropdown {
       &__activator {
         &.btn {
-          @apply px-3 border-transparent bg-transparent hover:bg-transparent shadow-none rounded font-normal text-subtle dark:text-muted hover:text-default dark:hover:text-on-emphasis hover:shadow-none hover:border-transparent;
+          @apply px-3 bg-transparent hover:bg-transparent shadow-none rounded font-normal text-subtle hover:text-default hover:shadow-none;
+          @apply dark:bg-transparent hover:dark:bg-transparent dark:text-dark-subtle hover:dark:text-dark-default;
+        }
+
+        &:not(.btn--variant-outline) {
+          &.btn {
+            @apply border-transparent hover:border-transparent;
+          }
         }
       }
 
       &--open {
         .dropdown__activator {
           &.btn {
-            @apply text-default dark:text-on-emphasis cursor-default border-transparent bg-transparent hover:bg-transparent;
+            @apply text-default cursor-default border-transparent bg-transparent hover:bg-transparent;
+            @apply dark:text-dark-default dark:bg-transparent hover:dark:bg-transparent;
           }
         }
       }
@@ -73,7 +81,8 @@ export default defineComponent({
         &--open {
           .dropdown__activator {
             &.btn {
-              @apply bg-subtle dark:bg-emphasis-alpha hover:bg-subtle dark:bg-emphasis-alpha;
+              @apply bg-subtle hover:bg-subtle;
+              @apply dark:bg-dark-subtle hover:dark:bg-dark-subtle;
             }
           }
         }
@@ -81,7 +90,8 @@ export default defineComponent({
 
       &.nav--condensed {
         .nav__link--active {
-          @apply bg-subtle dark:bg-emphasis-alpha;
+          @apply bg-subtle;
+          @apply dark:bg-dark-subtle;
         }
       }
     }
@@ -97,7 +107,8 @@ export default defineComponent({
         &--open {
           .dropdown__activator {
             &.btn {
-              @apply border-b-on-emphasis dark:border-b-default;
+              @apply border-b-inverse;
+              @apply dark:border-b-dark-inverse;
             }
           }
         }

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

@@ -6,8 +6,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }, {
-    variant: import("vue-demi").Ref<import("../nav").StyleVariant>;
-    condensed: import("vue-demi").Ref<boolean>;
+    variant: import("vue-demi").Ref<import("../nav").StyleVariant> | undefined;
+    condensed: import("vue-demi").Ref<boolean> | undefined;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     align: {
         type: PropType<AlignVariant>;

package/dist/components/navbar/NavbarToggle.vue

@@ -58,7 +58,8 @@ export default defineComponent({
     @apply inline-flex;
 
     &:is(.btn--variant-outline, .btn--default) {
-      @apply bg-emphasis-alpha dark:border-on-emphasis-alpha-subtle hover:shadow-none text-subtle dark:text-muted;
+      @apply bg-subtle hover:shadow-none text-subtle;
+      @apply dark:bg-dark-subtle dark:text-dark-subtle;
     }
 
     &&--all {

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

@@ -1,6 +1,6 @@
 import { InjectionKey, Ref } from 'vue-demi';
 import { StyleVariant } from '../nav';
-export declare type ToggleableVariant = 'sm' | 'md' | 'lg' | 'all';
+export type ToggleableVariant = 'sm' | 'md' | 'lg' | 'all';
 export interface NavbarSettings {
     variant: Ref<StyleVariant>;
     toggleable?: Ref<string | undefined>;

package/dist/components/overlay/Overlay.vue

@@ -53,7 +53,8 @@ export default defineComponent({
 }
 
 .overlay {
-  @apply fixed top-0 left-0 right-0 bottom-0 w-screen h-screen z-50 bg-emphasis/20 flex items-center justify-center select-none will-change-[transform,opacity];
+  @apply fixed top-0 left-0 right-0 bottom-0 w-screen h-screen z-50 bg-inverse/30 flex items-center justify-center select-none will-change-[transform,opacity];
+  @apply dark:bg-dark-inverse/30;
 
   &__icon {
     @apply w-10 md:w-16 animate-[overlayLoading_1s_ease-in-out_infinite];

package/dist/components/page/Page.vue

@@ -52,7 +52,11 @@ export default defineComponent({
 
 <style lang="postcss">
 .page {
-  @apply w-full;
+  --p-page-type-wide: 60px;
+  --p-page-type-narrow: 230px;
+
+  @apply w-full text-default;
+  @apply dark:text-dark-default;
 
   &&--expand {
     &:where(&&-all, &&-lg, &&-md, &&-sm) {
@@ -60,11 +64,11 @@ export default defineComponent({
         @apply transition-[padding] ease-out delay-75;
 
         &.page--type-wide {
-          @apply pl-[60px];
+          @apply pl-[var(--p-page-type-wide)];
         }
 
         &.page--type-narrow {
-          @apply pl-[230px];
+          @apply pl-[var(--p-page-type-narrow)];
         }
       }
     }
@@ -74,26 +78,26 @@ export default defineComponent({
     }
 
     &&-lg {
-      @apply lg:pl-[230px];
+      @apply lg:pl-[var(--p-page-type-narrow)];
 
       &:not(.page--type-narrow) {
-        @apply lg:pl-[60px];
+        @apply lg:pl-[var(--p-page-type-wide)];
       }
     }
 
     &&-md {
-      @apply md:pl-[230px];
+      @apply md:pl-[var(--p-page-type-narrow)];
 
       &:not(.page--type-narrow) {
-        @apply md:pl-[60px];
+        @apply md:pl-[var(--p-page-type-wide)];
       }
     }
 
     &&-sm {
-      @apply sm:pl-[230px];
+      @apply sm:pl-[var(--p-page-type-narrow)];
 
       &:not(.page--type-narrow) {
-        @apply sm:pl-[60px];
+        @apply sm:pl-[var(--p-page-type-wide)];
       }
     }
   }

package/dist/components/page/Page.vue.d.ts

@@ -4,7 +4,7 @@ import { TypeVariant } from '../sidebar';
 declare const _default: import("vue-demi").DefineComponent<{
     expand: {
         type: PropType<ToggleableVariant>;
-        default: any;
+        default: undefined;
     };
     type: {
         type: PropType<TypeVariant>;
@@ -19,7 +19,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     expand: {
         type: PropType<ToggleableVariant>;
-        default: any;
+        default: undefined;
     };
     type: {
         type: PropType<TypeVariant>;
@@ -30,7 +30,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    "onUpdate:modelValue"?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     type: TypeVariant;
     modelValue: boolean;

package/dist/components/pagination/Pagination.vue

@@ -26,6 +26,7 @@
         variant="solid"
         size="sm"
         :disabled="!canPrev"
+        class="pagination__items__nav-first"
         icon
         @click="selectPage(1)">
         <slot name="first-navigation">
@@ -38,6 +39,7 @@
         variant="solid"
         size="sm"
         :disabled="!canPrev"
+        class="pagination__items__nav-prev"
         icon
         @click="prev">
         <slot name="prev-navigation">
@@ -67,6 +69,7 @@
         variant="solid"
         size="sm"
         :disabled="!canNext"
+        class="pagination__items__nav-next"
         icon
         @click="next">
         <slot name="next-navigation">
@@ -82,6 +85,7 @@
         variant="solid"
         size="sm"
         :disabled="!canNext"
+        class="pagination__items__nav-last"
         icon
         @click="selectPage(totalPageCount)">
         <slot name="last-navigation">
@@ -322,7 +326,8 @@ export default defineComponent({
   &__quickjump,
   &__items,
   &__options {
-    @apply flex flex-wrap items-center;
+    @apply flex flex-wrap items-center text-default;
+    @apply dark:text-dark-default;
   }
 
   &__quickjump {
@@ -335,12 +340,16 @@ export default defineComponent({
     @apply space-x-2;
 
     .btn--icon.btn--sm {
-      @apply p-2 min-w-[34px];
+      @apply px-2 py-1 min-w-[34px];
+      &:is(.pagination__items__nav-first, .pagination__items__nav-prev, .pagination__items__nav-next, .pagination__items__nav-last) > svg {
+        @apply my-[0.15rem];
+      }
     }
   }
 
   &__count {
-    @apply ml-5;
+    @apply ml-5 text-default;
+    @apply dark:text-dark-default;
   }
 
   &__options {
@@ -357,10 +366,6 @@ export default defineComponent({
     &__menu {
       @apply min-w-fit;
     }
-
-    .input {
-      @apply py-1.5 leading-[1.4];
-    }
   }
 
   .btn {
@@ -371,10 +376,12 @@ export default defineComponent({
     @apply justify-center items-center hover:shadow-none;
 
     &.btn--default {
-      @apply bg-transparent hover:bg-subtle focus:bg-subtle border-transparent focus:border-default hover:border-default text-default font-normal focus:outline-none;
+      @apply bg-transparent hover:bg-base focus:bg-base border-transparent focus:border-default hover:border-default text-default font-normal focus:outline-none;
+      @apply dark:bg-transparent hover:dark:bg-dark-base focus:dark:bg-dark-base dark:border-transparent focus:dark:border-dark-default hover:dark:border-dark-default dark:text-dark-default;
 
       &[active="true"] {
-        @apply bg-accent-emphasis border-accent-emphasis text-on-emphasis cursor-default;
+        @apply bg-info-emphasis border-info-emphasis text-state-emphasis cursor-default;
+        @apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis dark:text-dark-state-emphasis;
       }
 
       &[readonly] {

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

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
 import { SelectItem } from '../select';
-declare type NavigationVariant = 'none' | 'short' | 'far';
+type NavigationVariant = 'none' | 'short' | 'far';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
@@ -92,7 +92,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     classNames: import("vue-demi").ComputedRef<string[]>;
     pageOptions: import("vue-demi").ComputedRef<SelectItem[]>;
     rowPerPageOptions: import("vue-demi").ComputedRef<SelectItem[]>;
-    pageItems: import("vue-demi").ComputedRef<(string | number)[]>;
+    pageItems: import("vue-demi").ComputedRef<(string | number)[] | undefined>;
     rowRange: import("vue-demi").ComputedRef<number[]>;
     totalPageCount: import("vue-demi").ComputedRef<number>;
     rowPerPage: import("vue-demi").WritableComputedRef<number>;
@@ -188,9 +188,9 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    "onUpdate:perPage"?: (...args: any[]) => any;
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:perPage"?: ((...args: any[]) => any) | undefined;
 }, {
     variant: NavigationVariant;
     modelValue: number;

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

@@ -5,7 +5,7 @@ interface PaginationProps {
     displayLimit: number;
 }
 export declare function usePagination(props: PaginationProps): {
-    pageItems: import("vue-demi").ComputedRef<(string | number)[]>;
+    pageItems: import("vue-demi").ComputedRef<(string | number)[] | undefined>;
     rowRange: import("vue-demi").ComputedRef<number[]>;
     totalPageCount: import("vue-demi").ComputedRef<number>;
     canNext: import("vue-demi").ComputedRef<boolean>;

package/dist/components/pagination/index.mjs

@@ -3,7 +3,7 @@ import {
   getPageItems,
   getPageRange,
   PAGE_PADDING
-} from "./utils/calculate-page";
+} from "./utils/calculate-page.mjs";
 export function usePagination(props) {
   const page = toRef(props, "modelValue");
   const perPage = toRef(props, "perPage");

package/dist/components/pagination/utils/calculate-page.d.ts

@@ -8,4 +8,4 @@ export declare function getSiblings(displayLimit: number): {
     totalSiblings: number;
     totalPageDisplay: number;
 };
-export declare function getPageItems(page: number, totalPageCount: number, displayLimit: number): (string | number)[];
+export declare function getPageItems(page: number, totalPageCount: number, displayLimit: number): (string | number)[] | undefined;

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

@@ -0,0 +1,134 @@
+<template>
+  <div
+    data-testid="pdf-helipad"
+    class="pdf-helipad"
+    :class="classNames">
+    <div
+      ref="object"
+      data-testid="pdf-helipad-object"
+      class="pdf-object pdf-object--external"
+      :style="{ width: `${width}px`, height: `${height}px` }">
+      <div class="pdf-object__container">
+        <slot />
+      </div>
+    </div>
+    <div
+      class="pdf-object pdf-object--external pdf-helipad__ghost"
+      :style="{ width: `${width}px`, height: `${height}px` }">
+      <div class="pdf-object__container">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+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
+    }
+  },
+  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 container = reference.closest(".pdf-objects");
+          const result = getPosition({
+            reference,
+            container,
+            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 };
+  }
+});
+</script>
+
+<style lang="postcss">
+.pdf-helipad {
+  @apply relative inline-block;
+
+  &__ghost {
+    @apply opacity-25 z-1 touch-none pointer-events-none;
+  }
+
+  &&--disabled {
+    @apply opacity-50;
+  }
+}
+</style>

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

@@ -0,0 +1,45 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    scale: {
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "landed"[], "landed", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    scale: {
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onLanded?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    width: number;
+    height: number;
+    scale: number;
+}>;
+export default _default;

package/dist/components/pdf-helipad/index.d.ts

@@ -0,0 +1,7 @@
+export interface PdfHelipadResult {
+    page: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}

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

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

package/dist/components/pdf-helipad/utils/use-drag.mjs

@@ -0,0 +1,38 @@
+import {
+  onScopeDispose,
+  shallowRef,
+  watch
+} from "vue-demi";
+export default function useDrag(target, options = {}) {
+  const enable = shallowRef(true);
+  const instance = shallowRef();
+  async function init() {
+    destroy();
+    if (target.value) {
+      const { default: Interact } = await import("interactjs");
+      instance.value = Interact(target.value).draggable({
+        inertia: true,
+        enabled: enable.value,
+        autoScroll: true,
+        onstart: options.onstart,
+        onmove: options.onmove,
+        onend: options.onend
+      });
+    }
+  }
+  function destroy() {
+    if (instance.value)
+      instance.value.unset();
+  }
+  watch(target, async () => {
+    await init();
+  });
+  watch(enable, (value) => {
+    if (instance.value)
+      instance.value.draggable(value);
+  });
+  onScopeDispose(() => {
+    destroy();
+  });
+  return enable;
+}

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

@@ -288,6 +288,7 @@ export default defineComponent({
 
   &__container {
     @apply overflow-visible relative border-2 border-dashed border-subtle rounded w-full h-full;
+    @apply dark:border-dark-subtle;
 
     &,
     & > * {
@@ -303,7 +304,8 @@ export default defineComponent({
   }
 
   &__resize {
-    @apply absolute w-3 h-3 bottom-0 right-0 translate-x-1/2 translate-y-1/2 bg-gray-20 rounded-full;
+    @apply absolute w-3 h-3 bottom-0 right-0 translate-x-1/2 translate-y-1/2 bg-subtle rounded-full;
+    @apply dark:bg-dark-subtle;
   }
 }
 </style>