@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/select/SelectTags.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="select__tags">
-    <template
-      v-for="(item, i) in shownItems"
-      :key="i">
-      <p-label
-        data-testid="select-tag"
-        variant="light"
-        size="xs">
-        {{ item.text }}
-      </p-label>
-    </template>
-    <template v-if="items.length > displayLimit">
-      <p-label
-        data-testid="select-tag-others"
-        variant="light"
-        size="xs">
-        {{ otherText }}
-      </p-label>
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import type { SelectItem } from '.'
-import pLabel from '../label/Label.vue'
-
-const props = defineProps({
-  items: {
-    type   : Array as PropType<SelectItem[]>,
-    default: () => ([]),
-  },
-  displayLimit: {
-    type   : Number,
-    default: 2,
-  },
-  limitText: {
-    type   : String,
-    default: '+{n} Other(s)',
-  },
-})
-
-const shownItems = computed(() => {
-  return props.items.slice(0, props.displayLimit)
-})
-
-const otherText = computed(() => {
-  return props.limitText.replaceAll('{n}', String(props.items.length - props.displayLimit))
-})
-</script>
-
-<style lang="postcss">
-.select__tags {
-  @apply flex space-x-1 items-center min-h-6;
-}
-</style>

package/dist/components/select/adapter/adapter.d.ts

@@ -1,17 +0,0 @@
-import type { Ref } from 'vue-demi';
-import type { SelectItem, SelectProps } from '..';
-export interface AdapterContext {
-    props: SelectProps;
-    keyword: Ref<string>;
-    isOpen: Ref<boolean>;
-    isLoading: Ref<boolean>;
-    menuEl: Ref<HTMLDivElement>;
-}
-export interface Adapter {
-    setup: (context: AdapterContext) => Ref<SelectItem[]>;
-}
-/**
- * normalizing props.options to SelectItem[]
- */
-export declare function useOptionsProp(props: Pick<SelectProps, 'options'>): import("vue-demi").ComputedRef<SelectItem[]>;
-export declare function defineAdapter(adapter: Adapter): Adapter;

package/dist/components/select/adapter/adapter.mjs

@@ -1,20 +0,0 @@
-import { computed } from "vue-demi";
-export function useOptionsProp(props) {
-  return computed(() => {
-    if (Array.isArray(props.options)) {
-      return props.options.map((item) => {
-        if (typeof item === "string") {
-          return {
-            text: item,
-            value: item
-          };
-        }
-        return item;
-      });
-    }
-    return [];
-  });
-}
-export function defineAdapter(adapter) {
-  return adapter;
-}

package/dist/components/select/adapter/async-adapter.d.ts

@@ -1,17 +0,0 @@
-import type { SelectItem } from '..';
-import { watch } from 'vue-demi';
-export type LoadFn = (keyword: string, page: number, perPage: number, value: unknown) => Promise<SelectItem[]>;
-export type WatchDeps = Parameters<typeof watch>[0];
-export interface AsyncAdapterOptions {
-    /**
-     * Default perPage
-     * @default 20
-     */
-    perPage: number;
-    /**
-     * Typing debounce time
-     * @default 500
-     */
-    debounceTime: number;
-}
-export default function defineAsyncAdapter(loadFn: LoadFn, deps?: WatchDeps, opts?: Partial<AsyncAdapterOptions>): import("./adapter").Adapter;

package/dist/components/select/adapter/async-adapter.mjs

@@ -1,61 +0,0 @@
-import { tryOnMounted } from "@vueuse/shared";
-import { defineAdapter } from "./adapter.mjs";
-import { onFinishTyping, onStartTyping } from "../utils/use-on-typing.mjs";
-import { ref, watch } from "vue-demi";
-import { onScrollBottom } from "../utils/use-on-scroll.mjs";
-import defu from "defu";
-export default function defineAsyncAdapter(loadFn, deps, opts) {
-  const config = defu(opts, { perPage: 20, debounceTime: 500 });
-  return defineAdapter({
-    setup({ isLoading, keyword, menuEl, props }) {
-      const options = ref([]);
-      const page = ref(1);
-      const isFinish = ref(false);
-      const isTyping = ref(false);
-      function load() {
-        isLoading.value = true;
-        loadFn(keyword.value, page.value, config.perPage, props.modelValue).then((result) => {
-          if (Array.isArray(result) && result.length > 0) {
-            options.value = [...options.value, ...result];
-            page.value = page.value + 1;
-          }
-          if (!Array.isArray(result) || result.length < config.perPage)
-            isFinish.value = true;
-        }).catch(console.error).finally(() => {
-          isLoading.value = false;
-        });
-      }
-      function reset() {
-        isFinish.value = false;
-        page.value = 1;
-        options.value = [];
-      }
-      if (deps !== void 0) {
-        watch(deps, () => {
-          keyword.value = "";
-          reset();
-          load();
-        });
-      }
-      tryOnMounted(() => {
-        load();
-      });
-      onStartTyping(keyword, () => {
-        isTyping.value = true;
-        reset();
-      });
-      onFinishTyping(keyword, () => {
-        isTyping.value = false;
-        load();
-      }, config.debounceTime);
-      watch(isTyping, (value) => {
-        isLoading.value = value;
-      });
-      onScrollBottom(menuEl, () => {
-        if (!isLoading.value && !isFinish.value)
-          load();
-      });
-      return options;
-    }
-  });
-}

package/dist/components/select/adapter/basic-adapter.d.ts

@@ -1,5 +0,0 @@
-/**
- * Filter options using simple .include search algorithm
- */
-declare const _default: import("./adapter").Adapter;
-export default _default;

package/dist/components/select/adapter/basic-adapter.mjs

@@ -1,13 +0,0 @@
-import { computed } from "vue-demi";
-import { defineAdapter, useOptionsProp } from "./adapter.mjs";
-export default defineAdapter({
-  setup({ props, keyword }) {
-    const options = useOptionsProp(props);
-    const filtered = computed(() => {
-      return options.value.filter((item) => {
-        return item.text.toLowerCase().includes(keyword.value.toLowerCase());
-      });
-    });
-    return filtered;
-  }
-});

package/dist/components/select/adapter/fuzzy-adapter.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("./adapter").Adapter;
-export default _default;

package/dist/components/select/adapter/fuzzy-adapter.mjs

@@ -1,24 +0,0 @@
-import Fuse from "fuse.js";
-import {
-  computed,
-  shallowRef,
-  watch
-} from "vue-demi";
-import { defineAdapter, useOptionsProp } from "./adapter.mjs";
-export default defineAdapter({
-  setup({ props, keyword }) {
-    const fuse = shallowRef();
-    const normalizeOptions = useOptionsProp(props);
-    const filteredOptions = computed(() => {
-      if (!keyword.value)
-        return normalizeOptions.value;
-      return fuse.value.search(keyword.value).map((result) => {
-        return result.item;
-      });
-    });
-    watch(normalizeOptions, (items) => {
-      fuse.value = new Fuse(items, { keys: ["text", "value"] });
-    }, { immediate: true });
-    return filteredOptions;
-  }
-});

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

@@ -1,15 +0,0 @@
-export interface SelectItem {
-    text: string;
-    value: unknown;
-    disabled?: boolean;
-    [key: string]: unknown;
-}
-export interface SelectProps {
-    modelValue: unknown;
-    selected?: SelectItem;
-    options?: SelectItem[] | string[];
-}
-export declare function defineOptions(options: SelectItem[]): SelectItem[];
-export declare function findSelected(items: SelectItem[], value: unknown): SelectItem;
-export declare function filterSelected(items: SelectItem[], value: unknown[]): SelectItem[];
-export declare function mergeUniq(...arrays: SelectItem[][]): SelectItem[];

package/dist/components/select/index.mjs

@@ -1,20 +0,0 @@
-import { isEqual, valueIn } from "../utils/value.mjs";
-export function defineOptions(options) {
-  return options;
-}
-export function findSelected(items, value) {
-  return items.find((item) => isEqual(item.value, value)) ?? { text: "", value: void 0 };
-}
-export function filterSelected(items, value) {
-  return Array.isArray(value) ? items.filter((item) => valueIn(value, item.value)) : [];
-}
-export function mergeUniq(...arrays) {
-  const result = [];
-  for (const items of arrays) {
-    for (const item of items) {
-      if (!result.some((last) => isEqual(item, last)))
-        result.push(item);
-    }
-  }
-  return result;
-}

package/dist/components/select/utils/use-on-scroll.d.ts

@@ -1,2 +0,0 @@
-import type { Ref } from 'vue-demi';
-export declare function onScrollBottom(element: Ref<HTMLElement>, handler: (event: Event) => void): void;

package/dist/components/select/utils/use-on-scroll.mjs

@@ -1,9 +0,0 @@
-import { useEventListener } from "@vueuse/core";
-export function onScrollBottom(element, handler) {
-  useEventListener(element, "scroll", (event) => {
-    const target = event.target;
-    const isBottom = target.scrollTop + target.offsetHeight >= target.scrollHeight;
-    if (isBottom)
-      handler(event);
-  }, { passive: true });
-}

package/dist/components/select/utils/use-on-typing.d.ts

@@ -1,3 +0,0 @@
-import type { Ref } from 'vue-demi';
-export declare function onStartTyping(model: Ref<string>, handler: () => void): void;
-export declare function onFinishTyping(model: Ref<string>, handler: () => void, debounceTime?: number): void;

package/dist/components/select/utils/use-on-typing.mjs

@@ -1,8 +0,0 @@
-import { watchDebounced } from "@vueuse/shared";
-import { watch } from "vue-demi";
-export function onStartTyping(model, handler) {
-  watch(model, handler);
-}
-export function onFinishTyping(model, handler, debounceTime = 500) {
-  watchDebounced(model, handler, { debounce: debounceTime });
-}

package/dist/components/sheet/Sheet.vue

@@ -1,230 +0,0 @@
-<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 lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import {
-  computed,
-  nextTick,
-  ref,
-  watch,
-} from 'vue-demi'
-import { useVModel } from '../input'
-import type { AddonPositionVariant } from '../pdf-object'
-import type { SizeVariant } from '../modal'
-import { onKeyStroke } from '@vueuse/core'
-
-const props = defineProps({
-  modelValue: {
-    type   : Boolean,
-    default: false,
-  },
-  position: {
-    type   : String as PropType<AddonPositionVariant>,
-    default: 'left',
-  },
-  size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'sm',
-  },
-  noCloseOnBackdrop: {
-    type   : Boolean,
-    default: false,
-  },
-  noCloseOnEsc: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [boolean],
-  'close': [Event],
-}>()
-
-const target = ref<HTMLDivElement>()
-const model  = useVModel(props)
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.position)
-    result.push(`sheet--${props.position}`)
-
-  // eslint-disable-next-line unicorn/explicit-length-check
-  if (props.size)
-    result.push(`sheet--${props.size}`)
-
-  return result
-})
-
-const transition = computed(() => {
-  return `sheet--${props.position}`
-})
-
-function close (event: Event = new CustomEvent('close')): void {
-  emit('close', event)
-
-  if (!event.defaultPrevented)
-    model.value = false
-}
-
-function closeOnBackdrop (event: Event): void {
-  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/shimmer/Shimmer.vue

@@ -1,123 +0,0 @@
-<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 lang="ts" setup>
-import { defineProps } from 'vue-demi'
-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/index.d.ts

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

package/dist/components/shimmer/index.mjs

@@ -1,10 +0,0 @@
-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 {};
-  }
-};