@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/dropdown/DropdownItem.vue

@@ -1,103 +0,0 @@
-<template>
-  <component
-    :is="tagName"
-    data-testid="dropdown-item"
-    class="dropdown__item"
-    :class="classNames"
-    :href="href"
-    :disabled="disabled"
-    @click="handleOnClick">
-    <slot>
-      {{ text }}
-    </slot>
-  </component>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import {
-  inject,
-  computed,
-} from 'vue-demi'
-import { DROPDOWN_CONTEXT } from '.'
-import type { TagVariant } from '../button'
-import type { RouteLocationRaw } from 'vue-router'
-
-const props = defineProps({
-  text: {
-    type   : String,
-    default: '',
-  },
-  href: {
-    type   : [String, Object] as PropType<RouteLocationRaw>,
-    default: undefined,
-  },
-  active: {
-    type   : Boolean,
-    default: false,
-  },
-  disabled: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits<{
-  'click': [Event],
-}>()
-
-const context = inject(DROPDOWN_CONTEXT, undefined, true)
-
-function handleOnClick (event: Event) {
-  emit('click', event)
-
-  if ((context?.close && !event.defaultPrevented) || (event.defaultPrevented && props.href))
-    context.close()
-}
-
-const classNames = computed(() => {
-  const result: string[] = ['']
-
-  if (props.active)
-    result.push('dropdown__item--active')
-
-  return result
-})
-
-const tagName = computed(() => {
-  let tag: TagVariant = 'button'
-
-  if (props.href)
-    tag = 'a'
-
-  return tag
-})
-</script>
-
-<style lang="postcss">
-.dropdown__item {
-  @apply px-4 py-2 block cursor-pointer text-default w-full select-none text-left;
-  @apply dark:text-dark-default;
-
-  &:is(a) {
-    @apply no-underline hover:no-underline hover:text-default;
-    @apply hover:dark:text-dark-default;
-  }
-
-  &:hover,
-  &:focus-visible {
-    @apply bg-default-alpha text-default;
-    @apply dark:bg-dark-default-alpha dark:text-dark-default;
-  }
-
-  &&--active,
-  &.selected {
-    @apply bg-default-alpha text-default;
-    @apply dark:bg-dark-default-alpha cursor-default dark:text-dark-default;
-  }
-
-  &:disabled {
-    @apply opacity-50 pointer-events-none;
-  }
-}
-</style>

package/dist/components/dropdown/DropdownText.vue

@@ -1,34 +0,0 @@
-<template>
-  <div
-    data-testid="dropdown-text"
-    class="dropdown__item dropdown__item--text">
-    <slot />
-  </div>
-</template>
-<style lang="postcss">
-.dropdown__item {
-  &--text {
-    @apply cursor-text text-subtle hover:text-subtle;
-    @apply dark:text-dark-subtle dark:hover:text-dark-subtle;
-
-    &:has(.checkbox, .radio) {
-      @apply py-0 px-0;
-
-      .checkbox,
-      .radio {
-        @apply py-2 px-4;
-      }
-    }
-
-    &:not(:has(.checkbox, .radio)) {
-      @apply hover:bg-transparent;
-      @apply dark:hover:bg-transparent;
-    }
-
-    .checkbox,
-    .radio {
-      @apply flex;
-    }
-  }
-}
-</style>

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

@@ -1,10 +0,0 @@
-import type { Ref, InjectionKey } from 'vue-demi';
-export type MenuSizeVariant = 'sm' | 'md' | 'lg' | 'xl' | 'auto';
-interface DropdownContext {
-    close: () => void;
-    open: () => void;
-    toggle: () => void;
-    isOpen: Ref<boolean>;
-}
-export declare const DROPDOWN_CONTEXT: InjectionKey<DropdownContext>;
-export {};

package/dist/components/dropdown/index.mjs

@@ -1 +0,0 @@
-export const DROPDOWN_CONTEXT = Symbol("DROPDOWN_CONTEXT");

package/dist/components/dropdown/utils/use-focus.d.ts

@@ -1,5 +0,0 @@
-import type { Ref } from 'vue-demi';
-export declare function useFocus(target: Ref<HTMLElement>, loop?: boolean): {
-    next: () => void;
-    prev: () => void;
-};

package/dist/components/dropdown/utils/use-focus.mjs

@@ -1,22 +0,0 @@
-import { clamp } from "lodash-es";
-import { focusable } from "tabbable";
-export function useFocus(target, loop = true) {
-  function travel(step) {
-    const elements = focusable(target.value);
-    const index = elements.indexOf(document.activeElement);
-    const nextIndex = loop ? (index + step) % elements.length : clamp(index + step, 0, elements.length - 1);
-    const targetFocus = elements.at(nextIndex);
-    if (targetFocus !== void 0)
-      targetFocus.focus();
-  }
-  function next() {
-    travel(1);
-  }
-  function prev() {
-    travel(-1);
-  }
-  return {
-    next,
-    prev
-  };
-}

package/dist/components/dropdown-subitem/DropdownSubitem.vue

@@ -1,182 +0,0 @@
-<template>
-  <Transition
-    :name="transition"
-    mode="out-in">
-    <div
-      :key="tree._level"
-      data-testid="dropdown-subitem"
-      class="dropdown__subitem">
-      <template
-        v-if="canBack">
-        <DropdownItem
-          key="btn-back"
-          data-testid="dropdown-back"
-          class="dropdown__subitem__btn dropdown__subitem__btn--back"
-          @click.prevent="back()">
-          <slot name="button-back">
-            <IconBack class="dropdown__subitem__next" />
-            <div class="dropdown__group-content" />
-          </slot>
-        </DropdownItem>
-      </template>
-
-      <template v-if="!isRoot">
-        <DropdownItem
-          key="btn-next"
-          class="dropdown__subitem__btn"
-          @click.prevent="handleOnClick">
-          <div class="dropdown__subitem__content">
-            <slot
-              name="button-content"
-              :next="next"
-              :back="back">
-              {{ text }}
-            </slot>
-          </div>
-          <IconNext
-            v-if="!noCaret"
-            data-testid="dropdown-subitem-next"
-            class="dropdown__subitem__next" />
-        </DropdownItem>
-      </template>
-
-      <template v-else>
-        <component
-          :is="view" />
-      </template>
-    </div>
-  </Transition>
-</template>
-
-<script lang="ts" setup>
-import DropdownItem from '../dropdown/DropdownItem.vue'
-import IconNext from '@privyid/persona-icon/vue/chevron-right/16.vue'
-import IconBack from '@privyid/persona-icon/vue/arrow-left/16.vue'
-import type { VNode } from 'vue-demi'
-import {
-  inject,
-  provide,
-  ref,
-  shallowRef,
-  computed,
-  watch,
-} from 'vue-demi'
-import type { DropdownContext } from '.'
-import { DROPDOWN_TREE } from '.'
-
-defineProps({
-  text: {
-    type   : String,
-    default: '',
-  },
-  noCaret: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const slots = defineSlots<{
-  'button-back'(): VNode[],
-  'button-content'(props: {
-    next: () => void,
-    back: () => void,
-  }): VNode[],
-}>()
-
-const emit = defineEmits<{
-  'click': [MouseEvent],
-}>()
-
-const context    = inject(DROPDOWN_TREE, undefined, true)
-const transition = ref<'slide-left' | 'slide-right' | 'none'>('slide-left')
-
-const isRoot = computed(() => {
-  return context === undefined
-})
-
-const tree: DropdownContext['tree'] = context?.tree ?? shallowRef({
-  _level: 0,
-  slots : slots,
-})
-
-const next: DropdownContext['next'] = () => {
-  tree.value = {
-    _level: tree.value._level + 1,
-    prev  : tree.value,
-    slots : slots,
-  }
-}
-
-const back: DropdownContext['back'] = () => {
-  if (tree.value.prev)
-    tree.value = tree.value.prev
-}
-
-const view = computed(() => {
-  return tree.value.slots.default
-})
-
-const canBack = computed(() => {
-  return Boolean(isRoot.value && tree.value.prev)
-})
-
-watch(tree, (value, oldValue) => {
-  transition.value = value._level > oldValue._level
-    ? 'slide-left'
-    : 'slide-right'
-})
-
-if (isRoot.value) {
-  provide(DROPDOWN_TREE, {
-    tree,
-    next,
-    back,
-  })
-}
-
-function reset () {
-  if (isRoot.value) {
-    tree.value = {
-      prev  : undefined,
-      _level: 0,
-      slots : slots,
-    }
-  }
-}
-
-function handleOnClick () {
-  const event = new MouseEvent('click')
-
-  emit('click', event)
-
-  if (!event.defaultPrevented)
-    next()
-}
-
-defineExpose({
-  reset,
-  next,
-  back,
-})
-</script>
-
-<style lang="postcss">
-.dropdown__subitem {
-  &__btn {
-    @apply flex items-center space-x-1;
-
-    &--back {
-      @apply shrink-0;
-    }
-  }
-
-  &__content {
-    @apply grow;
-  }
-
-  &__next,
-  &__back {
-    @apply shrink-0;
-  }
-}
-</style>

package/dist/components/dropdown-subitem/index.d.ts

@@ -1,12 +0,0 @@
-import type { InjectionKey, ShallowRef, Slots } from 'vue-demi';
-export interface DropdownNode {
-    _level: number;
-    prev?: DropdownNode;
-    slots: Slots;
-}
-export interface DropdownContext {
-    tree: ShallowRef<DropdownNode>;
-    next: () => void;
-    back: () => void;
-}
-export declare const DROPDOWN_TREE: InjectionKey<DropdownContext>;

package/dist/components/dropdown-subitem/index.mjs

@@ -1 +0,0 @@
-export const DROPDOWN_TREE = Symbol("DropdownTree");

package/dist/components/dropzone/Dropzone.vue

@@ -1,261 +0,0 @@
-<template>
-  <label
-    class="dropzone"
-    :class="[classNames, containerClass]"
-    data-testid="dropzone"
-    @drop.prevent="onDrop"
-    @dragover.prevent
-    @dragenter.prevent="isDragover = true"
-    @dragleave.prevent="isDragover = false"
-    @mouseover="isHovered = true"
-    @mouseout="isHovered = false">
-    <input
-      ref="input"
-      data-testid="dropzone-input"
-      class="dropzone__input"
-      type="file"
-      :multiple="multiple !== false"
-      :accept="accept"
-      :disabled="(disabled || readonly)"
-      v-bind="$attrs"
-      @change="onChange">
-    <slot
-      :is-dragover="isDragover"
-      :is-hovered="isHovered"
-      :disabled="disabled"
-      :readonly="readonly"
-      :model="model"
-      :raw-model="rawModel"
-      :browse="browse"
-      :clear="clear" />
-  </label>
-</template>
-
-<script lang="ts" setup>
-import acceptFile from './utils/accept'
-import type { PropType, VNode } from 'vue-demi'
-import {
-  computed,
-  nextTick,
-  ref,
-  toRef,
-} from 'vue-demi'
-import { useVModel } from '../input'
-import { toBase64 } from '../utils/base64'
-import { useToNumber } from '@vueuse/shared'
-import { watchIgnorable } from '@vueuse/core'
-import type { ModelModifier, MultipleType } from '.'
-
-defineOptions({ inheritAttrs: false })
-
-const props = defineProps({
-  modelValue: {
-    type: [
-      globalThis.File,
-      Array,
-      String,
-    ] as PropType<globalThis.File | globalThis.File[] | string | string[]>,
-    default: undefined,
-  },
-  modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
-  },
-  multiple: {
-    type   : [Boolean, String] as PropType<boolean | MultipleType>,
-    default: false,
-  },
-  maxlength: {
-    type   : [Number, String],
-    default: undefined,
-  },
-  accept: {
-    type   : String,
-    default: '',
-  },
-  clearOnCancel: {
-    type   : Boolean,
-    default: false,
-  },
-  disabled: {
-    type   : Boolean,
-    default: false,
-  },
-  readonly: {
-    type   : Boolean,
-    default: false,
-  },
-  containerClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [unknown],
-  'change': [unknown],
-  'cancel': [],
-}>()
-
-const model     = useVModel(props)
-const rawModel  = ref<globalThis.File | globalThis.File[]>()
-const input     = ref<HTMLInputElement>()
-const maxlength = useToNumber(toRef(props, 'maxlength'), { method: 'parseInt' })
-
-const isDragover = ref(false)
-const isHovered  = ref(false)
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (isDragover.value)
-    result.push('dropzone--dragover')
-
-  if (isHovered.value)
-    result.push('dropzone--hover')
-
-  if (props.disabled)
-    result.push('dropzone--disabled')
-
-  if (props.readonly)
-    result.push('dropzone--readonly')
-
-  return result
-})
-
-const { ignoreUpdates } = watchIgnorable(() => props.modelValue, (value) => {
-  if (value) {
-    if (Array.isArray(value))
-      rawModel.value = value.filter((item) => item instanceof globalThis.File)
-    else {
-      if (value instanceof globalThis.File)
-        rawModel.value = value
-    }
-  }
-}, { immediate: true })
-
-function browse () {
-  input.value.value = ''
-  input.value.click()
-}
-
-function clear () {
-  input.value.value = ''
-  rawModel.value    = undefined
-  model.value       = undefined
-}
-
-function onDrop (event: DragEvent) {
-  if (!props.disabled && !props.readonly) {
-    const files = event.dataTransfer.files
-
-    isDragover.value = false
-
-    handleFiles(files)
-  }
-}
-
-function onChange (event: Event) {
-  const target = event.target as HTMLInputElement
-  const files  = target.files
-
-  handleFiles(files)
-
-  if (props.multiple === 'append') {
-    /* Issue with multiselect with same file(s), need to be reset */
-    nextTick(() => {
-      target.value = ''
-    })
-  }
-}
-
-function filesToBase64 (files: globalThis.File | globalThis.File[]): Promise<string | string[]> {
-  if (Array.isArray(files))
-    return Promise.all(files.map((file) => toBase64(file)))
-
-  return toBase64(files)
-}
-
-async function handleFiles (fileList: globalThis.FileList) {
-  if (fileList.length > 0) {
-    // eslint-disable-next-line unicorn/prefer-spread
-    const files = acceptFile(props.accept, Array.from(fileList))
-    const file  = props.multiple === false ? files.at(0) : files
-
-    let value: typeof props.modelValue = file
-
-    // multiple="append"
-    if (props.multiple === 'append' && Array.isArray(model.value))
-      value = [...model.value as globalThis.File[], ...value as globalThis.File[]]
-
-    // maxlength
-    if (Number.isInteger(maxlength.value) && Array.isArray(value))
-      value = value.slice(0, maxlength.value)
-
-    // keep original value before converting base64
-    rawModel.value = value
-
-    // v-model.base64
-    if (props.modelModifiers.base64)
-      value = await filesToBase64(file)
-
-    ignoreUpdates(() => {
-      model.value = value
-    })
-
-    emit('change', value)
-  } else {
-    if (props.clearOnCancel)
-      clear()
-
-    emit('cancel')
-  }
-}
-
-defineExpose({
-  browse,
-  clear,
-  input,
-})
-
-defineSlots<{
-  'default'(props: {
-    isDragover: boolean,
-    isHovered: boolean,
-    disabled: boolean,
-    readonly: boolean,
-    model: unknown,
-    rawModel: File | File[],
-    browse: () => void,
-    clear: () => void,
-  }): VNode[],
-}>()
-</script>
-
-<style lang="postcss">
-.dropzone {
-  @apply cursor-pointer block w-full relative;
-
-  &__input {
-    @apply absolute w-[.1px] h-[.1px] opacity-0 overflow-hidden -z-1 bottom-0 right-0;
-  }
-
-  * {
-    @apply pointer-events-none;
-  }
-
-  &:disabled,
-  &--disabled {
-    @apply pointer-events-none;
-  }
-
-  a,
-  button {
-    @apply pointer-events-auto;
-  }
-}
-</style>

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

@@ -1,4 +0,0 @@
-export interface ModelModifier {
-    base64?: boolean;
-}
-export type MultipleType = 'replace' | 'append';

package/dist/components/dropzone/utils/accept.d.ts

@@ -1 +0,0 @@
-export default function attrAccept(accept: string, files: globalThis.File[]): globalThis.File[];

package/dist/components/dropzone/utils/accept.mjs

@@ -1,17 +0,0 @@
-export default function attrAccept(accept, files) {
-  if (!accept)
-    return files;
-  return files.filter((file) => {
-    const fileName = String(file.name).toLowerCase();
-    const mimeType = String(file.type).toLowerCase();
-    const acceptedTypes = accept.split(",");
-    return acceptedTypes.some((type) => {
-      const validType = type.trim().toLowerCase();
-      if (validType.charAt(0) === ".")
-        return fileName.endsWith(validType);
-      if (validType.endsWith("/*"))
-        return mimeType.replace(/\/.*$/, "") === validType.replace(/\/.*$/, "");
-      return mimeType === validType;
-    });
-  });
-}