@privyid/persona 1.2.1 → 1.2.2-rc.2

package/dist/components/notify/index.mjs

@@ -0,0 +1,18 @@
+import { inject } from "vue";
+import { useSingleton } from "../global/use-singleton.mjs";
+import { noop } from "lodash-es";
+export const NOTIFY_CONTEXT = Symbol("NotifyContext");
+export async function showNotify(options) {
+  const { default: Notify } = await import("./Notify.vue");
+  const instance = await useSingleton(Notify);
+  return instance.show(options);
+}
+export function useNotifyItem() {
+  return inject(NOTIFY_CONTEXT, () => {
+    return {
+      close: noop,
+      update: noop
+    };
+  }, true);
+}
+export default showNotify;

package/dist/components/overlay/Overlay.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    v-if="loading"
+    data-testid="overlay"
+    class="overlay">
+    <div class="overlay__icon">
+      <img
+        :src="icon"
+        alt="overlay-icon">
+    </div>
+  </div>
+</template>
+
+<script setup>
+import useLoading from "./utils/use-loading";
+import Icon from "./assets/icon-white.svg";
+defineProps({
+  icon: {
+    type: String,
+    default: Icon
+  }
+});
+const loading = useLoading({ elapsed: false });
+function show() {
+  loading.value = true;
+}
+function hide() {
+  loading.value = false;
+}
+defineExpose({
+  show,
+  hide
+});
+</script>
+
+<style lang="postcss">
+@keyframes overlayLoading {
+  from {
+    opacity: 1;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(1.5);
+  }
+}
+
+.overlay {
+  --p-overlay-z-index: theme(zIndex.overlay);
+
+  @apply z-[var(--p-overlay-z-index)] fixed top-0 left-0 right-0 bottom-0 w-screen h-screen 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];
+
+    & > img {
+      @apply max-w-full h-auto;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,19 @@
+declare function show(): void;
+declare function hide(): void;
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        default: any;
+    };
+}>, {
+    show: typeof show;
+    hide: typeof hide;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        default: any;
+    };
+}>> & Readonly<{}>, {
+    icon: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+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/index.d.ts

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

package/dist/components/overlay/index.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").WritableComputedRef<boolean, boolean>;

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

@@ -0,0 +1,28 @@
+import defu from "defu";
+import { tryOnMounted } from "@vueuse/shared";
+import { computed, ref } from "vue";
+export default function useLoading(options_) {
+  const options = defu(options_, { elapsed: true });
+  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;
+}

package/dist/components/page/Page.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    class="page"
+    data-testid="page"
+    :class="classNames">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useVModel } from "../input";
+const props = defineProps({
+  expand: {
+    type: String,
+    default: void 0
+  },
+  type: {
+    type: String,
+    default: "narrow"
+  },
+  modelValue: {
+    type: Boolean,
+    default: true
+  }
+});
+defineEmits(["update:modelValue"]);
+const model = useVModel(props);
+const classNames = computed(() => {
+  const result = [""];
+  if (props.expand)
+    result.push(`page--expand page--expand-${props.expand}`);
+  if (props.expand && model.value)
+    result.push("page--expanded");
+  if (props.type)
+    result.push(`page--type-${props.type}`);
+  return result;
+});
+</script>
+
+<style lang="postcss">
+.page {
+  --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) {
+      &:is(.page--expanded) {
+        @apply transition-[padding] ease-out delay-75;
+
+        &.page--type-wide {
+          @apply pl-[var(--p-page-type-wide)];
+        }
+
+        &.page--type-narrow {
+          @apply pl-[var(--p-page-type-narrow)];
+        }
+      }
+    }
+
+    &:where(&&-all, &&-lg, &&-md, &&-sm) {
+      @apply pl-0 transition-[padding] ease-in delay-75;
+    }
+
+    &&-lg {
+      @apply lg:pl-[var(--p-page-type-narrow)];
+
+      &:not(.page--type-narrow) {
+        @apply lg:pl-[var(--p-page-type-wide)];
+      }
+    }
+
+    &&-md {
+      @apply md:pl-[var(--p-page-type-narrow)];
+
+      &:not(.page--type-narrow) {
+        @apply md:pl-[var(--p-page-type-wide)];
+      }
+    }
+
+    &&-sm {
+      @apply sm:pl-[var(--p-page-type-narrow)];
+
+      &:not(.page--type-narrow) {
+        @apply sm:pl-[var(--p-page-type-wide)];
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,54 @@
+import type { PropType } from 'vue';
+import type { ToggleableVariant } from '../navbar';
+import type { TypeVariant } from '../sidebar';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    expand: {
+        type: PropType<ToggleableVariant>;
+        default: undefined;
+    };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    expand: {
+        type: PropType<ToggleableVariant>;
+        default: undefined;
+    };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+}>, {
+    type: TypeVariant;
+    modelValue: boolean;
+    expand: ToggleableVariant;
+}, {}, {}, {}, 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/pagination/Pagination.vue

@@ -0,0 +1,373 @@
+<template>
+  <div
+    data-testid="pagination"
+    :class="classNames">
+    <div
+      v-if="quickJump"
+      class="pagination__quickjump"
+      data-testid="pagination-quickjump">
+      {{ pageLabel }}
+      <Select
+        v-model="model"
+        :searchable="false"
+        :size="selectSize"
+        data-testid="pagination-select"
+        :options="pageOptions"
+        @change="({ value }) => selectPage(value)" />
+      <slot
+        name="quick-jump-count"
+        :total="totalPageCount">
+        of {{ totalPageCount }}
+      </slot>
+    </div>
+    <nav
+      v-else
+      class="pagination__items">
+      <Button
+        v-if="variant === 'far'"
+        data-testid="pagination-nav-first"
+        variant="solid"
+        size="sm"
+        :disabled="!canPrev"
+        class="pagination__items__nav-first"
+        icon
+        @click="selectPage(1)">
+        <slot name="first-navigation">
+          {{ firstNavLabel }}
+        </slot>
+      </Button>
+      <Button
+        v-if="variant === 'short' || variant === 'far'"
+        data-testid="pagination-nav-prev"
+        variant="solid"
+        size="sm"
+        :disabled="!canPrev"
+        class="pagination__items__nav-prev"
+        icon
+        @click="prev">
+        <slot name="prev-navigation">
+          <template v-if="navigationText">
+            {{ prevNavLabel }}
+          </template>
+          <IconPrev v-else />
+        </slot>
+      </Button>
+      <template v-if="!navigationOnly">
+        <Button
+          v-for="(page, index) in pageItems"
+          :key="index"
+          data-testid="pagination-item"
+          variant="solid"
+          size="sm"
+          icon
+          :readonly="typeof page === 'string'"
+          :active="page === model"
+          @click="selectPage(page)">
+          {{ page }}
+        </Button>
+      </template>
+      <Button
+        v-if="variant === 'short' || variant === 'far'"
+        data-testid="pagination-nav-next"
+        variant="solid"
+        size="sm"
+        :disabled="!canNext"
+        class="pagination__items__nav-next"
+        icon
+        @click="next">
+        <slot name="next-navigation">
+          <template v-if="navigationText">
+            {{ nextNavLabel }}
+          </template>
+          <IconNext v-else />
+        </slot>
+      </Button>
+      <Button
+        v-if="variant === 'far'"
+        data-testid="pagination-nav-last"
+        variant="solid"
+        size="sm"
+        :disabled="!canNext"
+        class="pagination__items__nav-last"
+        icon
+        @click="selectPage(totalPageCount)">
+        <slot name="last-navigation">
+          {{ lastNavLabel }}
+        </slot>
+      </Button>
+    </nav>
+    <div
+      v-if="showCounter || showDetail"
+      class="pagination__count"
+      data-testid="pagination-count">
+      <slot
+        name="pagination-count"
+        :page="modelValue"
+        :per-page="perPage"
+        :range="rowRange"
+        :total-page="totalPageCount"
+        :total="total">
+        {{ rowRange[0] }} - {{ rowRange[1] }} of {{ total }}
+      </slot>
+    </div>
+    <div
+      v-if="showPerPage || showDetail"
+      class="pagination__options"
+      data-testid="pagination-option">
+      {{ showRowsLabel }}
+      <Select
+        v-model="rowPerPage"
+        :searchable="false"
+        :size="selectSize"
+        :options="rowPerPageOptions" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, watch } from "vue";
+import Button from "../button/Button.vue";
+import Select from "../select/Select.vue";
+import IconPrev from "@privyid/persona-icon/vue/chevron-left/20.vue";
+import IconNext from "@privyid/persona-icon/vue/chevron-right/20.vue";
+import { useVModel } from "../input";
+import { usePagination } from ".";
+import { getPageRange } from "./utils/calculate-page";
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1
+  },
+  quickJump: {
+    type: Boolean,
+    default: false
+  },
+  showCounter: {
+    type: Boolean,
+    default: false
+  },
+  showPerPage: {
+    type: Boolean,
+    default: false
+  },
+  showDetail: {
+    type: Boolean,
+    default: false
+  },
+  navigationText: {
+    type: Boolean,
+    default: false
+  },
+  navigationOnly: {
+    type: Boolean,
+    default: false
+  },
+  variant: {
+    type: String,
+    default: "short"
+  },
+  perPage: {
+    type: Number,
+    default: 10
+  },
+  perPageOptions: {
+    type: Array,
+    default: () => [
+      10,
+      20,
+      30
+    ]
+  },
+  total: {
+    type: Number,
+    default: 0
+  },
+  displayLimit: {
+    type: Number,
+    default: 10
+  },
+  pageLabel: {
+    type: String,
+    default: "Page"
+  },
+  prevNavLabel: {
+    type: String,
+    default: "Previous"
+  },
+  nextNavLabel: {
+    type: String,
+    default: "Next"
+  },
+  firstNavLabel: {
+    type: String,
+    default: "First"
+  },
+  lastNavLabel: {
+    type: String,
+    default: "Last"
+  },
+  showRowsLabel: {
+    type: String,
+    default: "Show rows"
+  },
+  selectSize: {
+    type: String,
+    default: "md"
+  }
+});
+const emit = defineEmits(["update:modelValue", "update:perPage", "change"]);
+const classNames = computed(() => {
+  const results = ["pagination"];
+  if (props.navigationOnly)
+    results.push("pagination--navonly");
+  return results;
+});
+const model = useVModel(props);
+const {
+  pageItems,
+  rowRange,
+  totalPageCount,
+  canNext,
+  canPrev
+} = usePagination(props);
+const pageOptions = computed(() => {
+  return getPageRange(1, totalPageCount.value).map((page) => {
+    return {
+      text: String(page),
+      value: page
+    };
+  });
+});
+const rowPerPageOptions = computed(() => {
+  return props.perPageOptions.map((option) => {
+    return {
+      text: String(option),
+      value: option
+    };
+  });
+});
+const rowPerPage = computed({
+  get() {
+    return props.perPage;
+  },
+  set(value) {
+    emit("update:perPage", value);
+  }
+});
+watch(totalPageCount, (value) => {
+  if (model.value > value)
+    model.value = value || 1;
+});
+function next() {
+  model.value = Math.min(model.value + 1, totalPageCount.value);
+  emit("change", model.value);
+}
+function prev() {
+  model.value = Math.max(model.value - 1, 1);
+  emit("change", model.value);
+}
+function selectPage(page) {
+  if (typeof page === "string") return;
+  if (model.value !== page) {
+    model.value = page;
+    emit("change", page);
+  }
+}
+defineExpose({
+  next,
+  prev
+});
+defineSlots();
+</script>
+
+<style lang="postcss">
+/**
+* Component Name: Pagination
+* Component URI : https://www.figma.com/file/JIYmbyRYZHc9bnVp6Npm9K/B-A-S-E-%2F-Components?node-id=338%3A15323&t=u3Y7jHGZtoyAFn21-4
+* Date Created  : December 22, 2022
+* Last Update   : December 22, 2022
+*/
+.pagination {
+  @apply relative flex flex-wrap justify-start items-center w-full;
+
+  &&--navonly {
+    .pagination {
+      &__items {
+        @apply order-4 ml-4 only:ml-auto;
+      }
+
+      &__count {
+        @apply ml-0 mr-auto;
+      }
+    }
+  }
+
+  &__quickjump,
+  &__items,
+  &__options {
+    @apply flex flex-wrap items-center text-default;
+    @apply dark:text-dark-default;
+  }
+
+  &__quickjump {
+    .dropdown {
+      @apply mx-3;
+    }
+  }
+
+  &__items {
+    @apply space-x-2;
+
+    .btn--icon.btn--sm {
+      @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 text-default;
+    @apply dark:text-dark-default;
+  }
+
+  &__options {
+    @apply justify-between items-center ml-auto;
+
+    .dropdown {
+      @apply ml-3;
+    }
+  }
+
+  .dropdown {
+    @apply max-w-[80px];
+
+    &__menu {
+      @apply min-w-fit;
+    }
+  }
+
+  .btn {
+    @apply transition-none;
+  }
+
+  .btn--variant-solid {
+    @apply justify-center items-center hover:shadow-none;
+
+    &.btn--default {
+      @apply bg-transparent hover:bg-ground focus:bg-ground border-transparent focus:border-default hover:border-default text-default font-normal focus:outline-none;
+      @apply dark:bg-transparent hover:dark:bg-dark-ground focus:dark:bg-dark-ground dark:border-transparent focus:dark:border-dark-default hover:dark:border-dark-default dark:text-dark-default;
+
+      &[active="true"] {
+        @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] {
+        @apply pointer-events-none;
+      }
+    }
+  }
+}
+</style>