@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/sheet/Sheet.vue

@@ -0,0 +1,210 @@
+<template>
+  <div
+    ref="target"
+    class="sheet"
+    data-testid="sheet"
+    :class="classNames">
+    <transition
+      name="fade">
+      <div
+        v-show="model"
+        data-testid="sheet-backdrop"
+        class="sheet__backdrop"
+        @click="closeOnBackdrop" />
+    </transition>
+    <transition
+      :name="transition">
+      <div
+        v-if="model"
+        ref="target"
+        data-testid="sheet-content"
+        class="sheet__content"
+        v-bind="$attrs">
+        <slot :close="close" />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import {
+  computed,
+  nextTick,
+  ref,
+  watch
+} from "vue";
+import { useVModel } from "../input";
+import { onKeyStroke } from "@vueuse/core";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  position: {
+    type: String,
+    default: "left"
+  },
+  size: {
+    type: String,
+    default: "sm"
+  },
+  noCloseOnBackdrop: {
+    type: Boolean,
+    default: false
+  },
+  noCloseOnEsc: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["update:modelValue", "close"]);
+const target = ref();
+const model = useVModel(props);
+const classNames = computed(() => {
+  const result = [];
+  if (props.position)
+    result.push(`sheet--${props.position}`);
+  if (props.size)
+    result.push(`sheet--${props.size}`);
+  return result;
+});
+const transition = computed(() => {
+  return `sheet--${props.position}`;
+});
+function close(event = new CustomEvent("close")) {
+  emit("close", event);
+  if (!event.defaultPrevented)
+    model.value = false;
+}
+function closeOnBackdrop(event) {
+  if (!props.noCloseOnBackdrop)
+    close(event);
+}
+onKeyStroke("Escape", (event) => {
+  if (model.value && !props.noCloseOnEsc)
+    close(event);
+}, { eventName: "keydown" });
+watch(model, (value) => {
+  if (value === false) {
+    nextTick(() => {
+      emit("close", new CustomEvent("close"));
+    });
+  }
+});
+</script>
+
+<style lang="postcss">
+.sheet {
+  --p-sheet-size-xl: 960px;
+  --p-sheet-size-lg: 800px;
+  --p-sheet-size-md: 600px;
+  --p-sheet-size-sm: 300px;
+  --p-sheet-min-size: 250px;
+  --p-sheet-max-size: 90%;
+  --p-sheet-z-index: theme(zIndex.modal);
+  --p-sheet-dismiss-z-index: calc(var(--p-sheet-z-index) + 1);
+
+  @apply fixed z-[var(--p-sheet-z-index)];
+
+  &--sm {
+    --p-sheet-size: var(--p-sheet-size-sm);
+  }
+
+  &--md {
+    --p-sheet-size: var(--p-sheet-size-md);
+  }
+
+  &--lg {
+    --p-sheet-size: var(--p-sheet-size-lg);
+  }
+
+  &--xl {
+    --p-sheet-size: var(--p-sheet-size-xl);
+  }
+
+  &__content {
+    @apply fixed bg-default overflow-auto text-default shadow-2xl;
+    @apply dark:bg-dark-default dark:text-dark-default;
+  }
+
+  &__backdrop {
+    @apply fixed inset-0 bg-inverse/30;
+    @apply dark:bg-dark-inverse/30;
+  }
+
+  /* Base transition */
+  &--left,
+  &--right,
+  &--top,
+  &--bottom {
+    &-enter-active,
+    &-leave-active {
+      @apply transition-[opacity,transform] duration-150 ease-out;
+    }
+  }
+
+  /* Left */
+  &--left {
+    .sheet__content {
+      @apply left-0 top-0 h-full;
+    }
+
+    &-enter-from,
+    &-leave-to {
+      @apply opacity-0 -translate-x-full;
+    }
+  }
+
+  /* Right */
+  &--right {
+    .sheet__content {
+      @apply right-0 top-0;
+    }
+
+    &-enter-from,
+    &-leave-to {
+      @apply opacity-0 translate-x-full;
+    }
+  }
+
+  /* Top */
+  &--top {
+    .sheet__content {
+      @apply right-0 top-0;
+    }
+
+    &-enter-from,
+    &-leave-to {
+      @apply opacity-0 -translate-y-full;
+    }
+  }
+
+  /* Bottom */
+  &--bottom {
+    .sheet__content {
+      @apply right-0 bottom-0 w-full;
+    }
+
+    &-enter-from,
+    &-leave-to {
+      @apply opacity-0 translate-y-full;
+    }
+  }
+
+  /* Horizontal Size */
+  &--left,
+  &--right {
+    .sheet__content {
+      @apply h-full w-[var(--p-sheet-size)] min-w-[var(--p-sheet-min-size)] max-w-[var(--p-sheet-max-size)];
+    }
+  }
+
+  /* Vertical Size */
+  &--top,
+  &--bottom {
+    .sheet__content {
+      @apply w-full h-[var(--p-sheet-size)] min-h-[var(--p-sheet-min-size)] max-h-[var(--p-sheet-max-size)];
+    }
+  }
+}
+</style>

package/dist/components/sheet/Sheet.vue.d.ts

@@ -0,0 +1,79 @@
+import type { PropType } from 'vue';
+import type { AddonPositionVariant } from '../pdf-object';
+import type { SizeVariant } from '../modal';
+declare function close(event?: Event): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            close: typeof close;
+        }): any;
+    };
+    refs: {
+        target: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: PropType<AddonPositionVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    noCloseOnBackdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCloseOnEsc: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: boolean) => void;
+    close: (args_0: Event) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: PropType<AddonPositionVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    noCloseOnBackdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCloseOnEsc: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+    onClose?: ((args_0: Event) => any) | undefined;
+}>, {
+    size: SizeVariant;
+    modelValue: boolean;
+    noCloseOnEsc: boolean;
+    noCloseOnBackdrop: boolean;
+    position: AddonPositionVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/shimmer/Shimmer.vue

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

package/dist/components/shimmer/Shimmer.vue.d.ts

@@ -0,0 +1,47 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: SVGSVGElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    width: string | number;
+    height: string | number;
+    responsive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,2 @@
+import type { Directive } from 'vue';
+export declare const vBindOnce: Directive;

package/dist/components/shimmer/index.mjs

@@ -0,0 +1,10 @@
+export const vBindOnce = {
+  created(el, binding) {
+    el.setAttribute(binding.arg, binding.value);
+  },
+  getSSRProps(binding) {
+    if (binding.arg && binding.value)
+      return { [binding.arg]: binding.value };
+    return {};
+  }
+};

package/dist/components/sidebar/Sidebar.vue

@@ -0,0 +1,225 @@
+<template>
+  <aside
+    ref="sidebar"
+    data-testid="sidebar"
+    class="sidebar"
+    :class="classNames">
+    <slot
+      v-if="$slots.brand"
+      name="brand" />
+    <div
+      ref="sidebarMenus"
+      data-testid="sidebar-menus"
+      class="sidebar__menus">
+      <SidebarContent>
+        <slot />
+      </SidebarContent>
+    </div>
+    <div
+      ref="bottom"
+      data-testid="sidebar-bottom"
+      class="sidebar__bottom">
+      <SidebarContent bottom>
+        <slot />
+      </SidebarContent>
+      <slot name="bottom" />
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import {
+  computed,
+  provide,
+  ref
+} from "vue";
+import { SIDEBAR_SETTINGS } from ".";
+import { useVModel } from "../input";
+import SidebarContent from "./SidebarContent.vue";
+const props = defineProps({
+  variant: {
+    type: String,
+    default: "pills"
+  },
+  align: {
+    type: String,
+    default: "left"
+  },
+  type: {
+    type: String,
+    default: "wide"
+  },
+  fixed: {
+    type: Boolean,
+    default: false
+  },
+  sticky: {
+    type: Boolean,
+    default: false
+  },
+  toggleable: {
+    type: String,
+    default: void 0
+  },
+  modelValue: {
+    type: Boolean,
+    default: true
+  }
+});
+defineOptions({
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+});
+defineEmits(["update:modelValue"]);
+defineSlots();
+const model = useVModel(props);
+const bottom = ref();
+const classNames = computed(() => {
+  const result = [""];
+  if (props.type)
+    result.push(`sidebar--${props.type}`);
+  if (props.align)
+    result.push(`sidebar--${props.align}`);
+  if (props.variant)
+    result.push(`sidebar--${props.variant}`);
+  if (props.fixed)
+    result.push("sidebar--fixed");
+  if (props.sticky)
+    result.push("sidebar--sticky");
+  if (props.toggleable)
+    result.push(`sidebar--toggleable sidebar--toggleable-${props.toggleable}`);
+  if (props.toggleable && props.fixed && model.value)
+    result.push("sidebar--show");
+  return result;
+});
+provide(SIDEBAR_SETTINGS, {
+  variant: props.variant,
+  align: props.align,
+  type: props.type
+});
+</script>
+
+<style lang="postcss">
+.sidebar {
+  --p-sidebar-size-narrow: 60px;
+  --p-sidebar-size-wide: 230px;
+  --p-sidebar-bg: theme(backgroundColor.DEFAULT);
+  --p-sidebar-bg-dark: theme(backgroundColor.dark.DEFAULT);
+  --p-sidebar-z-index: theme(zIndex.fixed);
+  --p-sidebar-sticky-top: theme(spacing.0);
+  --p-sidebar-fixed-top: theme(spacing.0);
+  --p-sidebar-padding-x: theme(spacing.2);
+  --p-sidebar-padding-left: var(--p-sidebar-padding-x);
+  --p-sidebar-padding-right: var(--p-sidebar-padding-x);
+  --p-sidebar-padding-y: theme(spacing.4);
+  --p-sidebar-padding-top: var(--p-sidebar-padding-y);
+  --p-sidebar-padding-bottom: var(--p-sidebar-padding-y);
+  --p-sidebar-shadow: theme(boxShadow.lg);
+
+  @apply bg-[color:var(--p-sidebar-bg)] pt-[var(--p-sidebar-padding-top)] pb-[var(--p-sidebar-padding-bottom)] pl-[var(--p-sidebar-padding-left)] pr-[var(--p-sidebar-padding-right)] flex flex-col items-stretch;
+  @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
+
+  /**
+  * Default sidebar has
+  * 230px width
+  */
+  &:not(.sidebar--narrow) {
+    @apply w-[var(--p-sidebar-size-wide)];
+  }
+
+  /**
+  * Right-align sidebar
+  */
+  &:not(.sidebar--fixed) {
+    &.sidebar--right {
+      @apply ml-auto;
+    }
+  }
+
+  /**
+  * Fixed sidebar
+  */
+  &&--fixed {
+    @apply fixed z-[var(--p-sidebar-z-index)] top-[var(--p-sidebar-fixed-top)] h-full transition-all;
+    box-shadow: var(--p-sidebar-shadow);
+
+    .sidebar__menus {
+      @apply grow h-full overflow-y-auto py-2;
+    }
+
+    &:not(.sidebar--right) {
+      @apply left-0;
+    }
+
+    .sidebar__bottom {
+      @apply w-full bg-[color:var(--p-sidebar-bg)] shrink-0 pt-2;
+      @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
+    }
+
+    /**
+    * Right-align in fixed
+    */
+    &.sidebar--right {
+      @apply left-auto right-0;
+    }
+
+    /**
+    * Toggleable sidebar
+    */
+    &.sidebar--toggleable {
+      &:where(&&-all, &&-lg, &&-md, &&-sm) {
+        &:is(.sidebar--show) {
+          @apply left-0 transition-[left] ease-out delay-75;
+        }
+      }
+
+      &:where(&&-all, &&-lg, &&-md, &&-sm) {
+        @apply -left-[100%] transition-[left] ease-in delay-75;
+      }
+
+      &&-lg {
+        @apply lg:left-0;
+      }
+
+      &&-md {
+        @apply md:left-0;
+      }
+
+      &&-sm {
+        @apply sm:left-0;
+      }
+    }
+  }
+
+  /**
+  * Sticky sidebar
+  */
+  &&--sticky {
+    @apply sticky top-[var(--p-sidebar-sticky-top)] z-sticky;
+  }
+
+  /**
+  * Narrow sidebar
+  * is 60px width
+  */
+  &&--narrow {
+    @apply w-[var(--p-sidebar-size-narrow)];
+  }
+
+  /**
+  * Sidebar with tabs
+  * and lines variant
+  */
+  &&--tabs,
+  &&--lines {
+    @apply pr-0 py-2 border-r border-r-default;
+    @apply dark:border-r-dark-default;
+  }
+
+  &&--lines {
+    @apply px-0;
+  }
+}
+</style>