@privyid/persona 0.3.0

package/dist/components/nav/NavItem.vue

@@ -0,0 +1,149 @@
+<template>
+  <li
+    data-testid="nav-item"
+    class="nav__item"
+    :class="navItemClass">
+    <a
+      data-testid="nav-link"
+      :href="link"
+      :target="target"
+      :class="classNames">
+      <span
+        v-if="$slots.icon"
+        data-testid="nav-icon"
+        class="nav__link__icon">
+        <slot name="icon" />
+      </span>
+      <span
+        v-if="$slots.default"
+        data-testid="nav-label"
+        class="nav__link__label">
+        <slot />
+      </span>
+    </a>
+  </li>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent
+} from "vue-demi";
+export default defineComponent({
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    href: {
+      type: String,
+      default: void 0
+    },
+    target: {
+      type: String,
+      default: "_self"
+    }
+  },
+  setup(props, { slots }) {
+    const classNames = computed(() => {
+      const result = ["nav__link"];
+      if (props.active)
+        result.push("nav__link--active");
+      if (props.disabled)
+        result.push("nav__link--disabled");
+      if (slots.icon)
+        result.push("nav__link--icon");
+      return result;
+    });
+    const navItemClass = computed(() => {
+      const result = [""];
+      if (props.active)
+        result.push("nav__item--active");
+      return result;
+    });
+    const link = computed(() => {
+      let permalink;
+      if (!props.disabled)
+        permalink = props.href;
+      return permalink;
+    });
+    return {
+      classNames,
+      navItemClass,
+      link
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.nav {
+  &__item {
+    &&--no-label {
+      .nav__link__label {
+        @apply hidden;
+      }
+    }
+  }
+
+  &__link {
+    @apply block p-3 -mb-[1px] border border-transparent rounded-t text-base cursor-pointer hover:no-underline text-body-50 hover:text-body-100;
+
+    &--active {
+      @apply text-body-100 cursor-default;
+    }
+
+    &--disabled {
+      @apply text-subtext-50 hover:text-subtext-50 focus:text-subtext-50 active:text-subtext-50 cursor-default pointer-events-none;
+    }
+
+    &--icon {
+      @apply flex items-center;
+
+      .nav__link__icon {
+        @apply grow-0;
+
+        img {
+          @apply w-5 h-5;
+        }
+      }
+
+      .nav__link__label {
+        @apply shrink ml-3 w-full;
+      }
+    }
+
+    &__label {
+      @apply flex;
+    }
+  }
+
+  &:is(.nav--justified, .nav--fill) {
+    .nav__link {
+      &--icon {
+        .nav__link__label {
+          .badge {
+            @apply ml-auto;
+          }
+        }
+      }
+
+      &__label {
+        .badge {
+          @apply ml-auto;
+        }
+      }
+    }
+  }
+
+  &&--condensed {
+    .nav__link {
+      @apply py-1;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,47 @@
+import { PropType } from 'vue-demi';
+declare type TargetVariant = '_blank' | '_self' | '_parent' | '_top';
+declare const _default: import("vue-demi").DefineComponent<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    href: {
+        type: StringConstructor;
+        default: any;
+    };
+    target: {
+        type: PropType<TargetVariant>;
+        default: string;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    navItemClass: import("vue-demi").ComputedRef<string[]>;
+    link: import("vue-demi").ComputedRef<string>;
+}, 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<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    href: {
+        type: StringConstructor;
+        default: any;
+    };
+    target: {
+        type: PropType<TargetVariant>;
+        default: string;
+    };
+}>>, {
+    disabled: boolean;
+    target: TargetVariant;
+    active: boolean;
+    href: string;
+}>;
+export default _default;

package/dist/components/nav/NavItemDropdown.vue

@@ -0,0 +1,56 @@
+<template>
+  <li
+    data-testid="nav-item-dropdown"
+    class="nav__item nav__item--dropdown">
+    <Dropdown
+      :text="text"
+      :icon="icon"
+      placement="bottom-end"
+      variant="ghost"
+      no-caret>
+      <template #button-content>
+        <slot name="button-content">
+          {{ text }}
+        </slot>
+      </template>
+
+      <slot />
+    </Dropdown>
+  </li>
+</template>
+
+<script>
+import { defineComponent } from "vue-demi";
+import Dropdown from "../dropdown/Dropdown.vue";
+export default defineComponent({
+  components: { Dropdown },
+  props: {
+    text: {
+      type: String,
+      default: ""
+    },
+    icon: {
+      type: Boolean,
+      default: false
+    }
+  }
+});
+</script>
+
+<style lang="postcss">
+.nav {
+  &__item {
+    &--dropdown {
+      @apply ml-auto;
+    }
+  }
+
+  &--fill {
+    .nav__item {
+      &--dropdown {
+        @apply text-right;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,23 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, unknown, 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<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    icon: boolean;
+    text: string;
+}>;
+export default _default;

package/dist/components/nav/NavSubItem.vue

@@ -0,0 +1,137 @@
+<template>
+  <li
+    data-testid="nav-subitem"
+    class="nav__subitem"
+    :class="classNames">
+    <div
+      class="nav__subitem__parent"
+      data-testid="nav-subitem-parent"
+      @click.prevent="collapse">
+      <span
+        v-if="$slots.icon"
+        class="nav__link__icon">
+        <slot name="icon" />
+      </span>
+      <span class="nav__link__label">
+        {{ text }}
+      </span>
+      <IconArrow
+        v-if="collapsible"
+        class="nav__link__caret" />
+    </div>
+    <slot />
+  </li>
+</template>
+
+<script>
+import {
+  defineComponent,
+  computed,
+  inject
+} from "vue-demi";
+import { SIDEBAR_SETTINGS } from "../sidebar/Sidebar.vue";
+import IconArrow from "@carbon/icons-vue/lib/chevron--down/16";
+export default defineComponent({
+  components: { IconArrow },
+  props: {
+    text: {
+      type: String,
+      default: void 0
+    },
+    collapsible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots }) {
+    const settings = inject(SIDEBAR_SETTINGS, void 0, true);
+    const type = settings?.type;
+    const classNames = computed(() => {
+      const result = [];
+      if (slots.icon)
+        result.push("nav__subitem--icon");
+      if (props.collapsible && type !== "narrow")
+        result.push("nav__subitem--collapsible nav__subitem--collapsed");
+      return result;
+    });
+    function collapse(event) {
+      if (props.collapsible && type !== "narrow") {
+        const container = event.target.closest("li");
+        container?.classList.toggle("nav__subitem--collapsed");
+      }
+    }
+    return { classNames, collapse };
+  }
+});
+</script>
+
+<style lang="postcss">
+.nav {
+  &__subitem {
+    @apply block text-base text-body-50;
+
+    &&--collapsible {
+      .nav__subitem__parent {
+        @apply cursor-pointer text-body-100 relative;
+      }
+
+      .nav__link__caret {
+        @apply absolute right-0 rotate-180 origin-center ease-in-out duration-150;
+      }
+
+      &.nav__subitem--collapsed {
+        .nav__subitem__parent {
+          @apply text-body-50;
+        }
+
+        > .sidebar__nav,
+        > .nav {
+          @apply hidden;
+        }
+
+        .nav__link__caret {
+          @apply rotate-0 ease-in-out duration-150;
+        }
+      }
+    }
+
+    &__parent {
+      @apply flex flex-row items-center p-3 border border-transparent cursor-default rounded;
+    }
+
+    .nav {
+      @apply pt-0 ml-5 select-none;
+    }
+
+    &&--icon {
+      .nav {
+        @apply ml-5;
+      }
+
+      .nav__link__icon {
+        @apply grow-0;
+
+        img {
+          @apply w-5 h-5;
+        }
+      }
+
+      .nav__link__label {
+        @apply shrink ml-3 w-full select-none;
+
+        .badge {
+          @apply ml-auto;
+        }
+      }
+    }
+  }
+
+  &&--condensed {
+    .nav__subitem {
+      &__parent {
+        @apply py-1;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,26 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    text: {
+        type: StringConstructor;
+        default: any;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    collapse: (event: Event) => void;
+}, 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<{
+    text: {
+        type: StringConstructor;
+        default: any;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    text: string;
+    collapsible: boolean;
+}>;
+export default _default;

package/dist/components/overlay/Overlay.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    v-if="loading"
+    data-testid="overlay"
+    class="overlay">
+    <div class="overlay__icon">
+      <img
+        :src="icon"
+        alt="overlay-icon">
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue-demi";
+import useLoading from "./utils/use-loading";
+import Icon from "./assets/icon-white.svg";
+export default defineComponent({
+  setup() {
+    const loading = useLoading({ elapsed: false });
+    function show() {
+      loading.value = true;
+    }
+    function hide() {
+      loading.value = false;
+    }
+    return {
+      show,
+      hide,
+      loading,
+      icon: Icon
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+@keyframes overlayLoading {
+  from {
+    opacity: 1;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(1.5);
+  }
+}
+
+.overlay {
+  @apply fixed top-0 left-0 right-0 bottom-0 w-screen h-screen z-50 bg-overlay-primary flex items-center justify-center select-none will-change-[transform,opacity];
+
+  &__icon {
+    @apply w-10 md:w-16 animate-[overlayLoading_1s_ease-in-out_infinite];
+
+    & > img {
+      @apply max-w-full h-auto;
+    }
+  }
+}
+</style>

package/dist/components/overlay/Overlay.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("vue-demi").DefineComponent<{}, {
+    show: () => void;
+    hide: () => void;
+    loading: import("vue-demi").WritableComputedRef<boolean>;
+    icon: any;
+}, {}, {}, {}, 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<{}>>, {}>;
+export default _default;

package/dist/components/overlay/assets/icon-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="204" height="131" version="1.1" viewBox="0 0 204 131"><title>Logo / Negative / Icon</title><desc>Created with Sketch.</desc><defs><linearGradient id="linearGradient-1" x1="38.772%" x2="99.746%" y1="36.946%" y2="100%"><stop offset="0%" stop-color="#000" stop-opacity="0"/><stop offset="10.271%" stop-color="#000" stop-opacity=".054"/><stop offset="19.657%" stop-color="#000" stop-opacity=".106"/><stop offset="30.31%" stop-color="#000" stop-opacity=".192"/><stop offset="38.65%" stop-color="#000" stop-opacity=".245"/><stop offset="100%" stop-color="#000"/></linearGradient></defs><g id="Logo-/-Negative-/-Icon" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#FFF" d="M19.1359203,111.815313 C30.9636339,123.668638 47.3036075,131 65.352117,131 C83.4004497,131 99.7402465,123.668638 111.567783,111.815313 L204,19.1846867 C192.172286,7.33136183 175.832313,0 157.78398,0 C139.735471,0 123.395674,7.33136183 111.568137,19.1845095 L111.56796,19.1846867 C99.7402465,7.33136183 83.4004497,0 65.3522937,0 C26.5673268,0 2.02528496,29.2248333 0,66.4713328 C0.256828333,84.1728482 7.52049215,100.17473 19.1359203,111.815313 Z"/><path id="Path" fill="url(#linearGradient-1)" d="M112,19.2653956 C100.126484,7.36220448 83.7234126,0 65.6053663,0 C26.6702071,0 2.03312774,29.3477806 0,66.7509741 C0.257822885,84.5269588 7.54961478,100.59616 19.2100229,112.285714 L112,19.2653956 Z"/></g></svg>

package/dist/components/overlay/use-overlay.d.ts

@@ -0,0 +1,2 @@
+export declare function showOverlay(): Promise<void>;
+export declare function hideOverlay(): Promise<void>;

package/dist/components/overlay/use-overlay.mjs

@@ -0,0 +1,8 @@
+import { useSingleton } from "../global/use-singleton.mjs";
+import Overlay from "./Overlay.vue";
+export async function showOverlay() {
+  (await useSingleton(Overlay)).show();
+}
+export async function hideOverlay() {
+  (await useSingleton(Overlay)).hide();
+}

package/dist/components/overlay/utils/use-loading.d.ts

@@ -0,0 +1,4 @@
+export interface LoadingOptions {
+    elapsed: number | boolean;
+}
+export default function useLoading(options_?: LoadingOptions): import("vue-demi").WritableComputedRef<boolean>;

package/dist/components/overlay/utils/use-loading.mjs

@@ -0,0 +1,27 @@
+import { tryOnMounted } from "@vueuse/shared";
+import { computed, ref } from "vue-demi";
+export default function useLoading(options_) {
+  const options = { elapsed: true, ...options_ };
+  const counter = ref(0);
+  const elapsed = ref(options.elapsed !== false);
+  const loading = computed({
+    get() {
+      return counter.value > 0 || elapsed.value;
+    },
+    set(value) {
+      if (value)
+        counter.value++;
+      else
+        counter.value--;
+    }
+  });
+  tryOnMounted(() => {
+    if (options.elapsed !== false) {
+      const elapsedTime = options.elapsed === true ? 200 : options.elapsed;
+      setTimeout(() => {
+        elapsed.value = false;
+      }, elapsedTime);
+    }
+  });
+  return loading;
+}