@privyid/persona 1.2.1 → 1.2.2-rc.2

package/dist/components/dropdown/DropdownHeader.vue.d.ts

@@ -0,0 +1,18 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        action?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, 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/dropdown/DropdownItem.vue

@@ -0,0 +1,87 @@
+<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 setup>
+import {
+  inject,
+  computed
+} from "vue";
+import { DROPDOWN_CONTEXT } from ".";
+const props = defineProps({
+  text: {
+    type: String,
+    default: ""
+  },
+  href: {
+    type: [String, Object],
+    default: void 0
+  },
+  active: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["click"]);
+const context = inject(DROPDOWN_CONTEXT, void 0, true);
+function handleOnClick(event) {
+  emit("click", event);
+  if (context?.close && !event.defaultPrevented || event.defaultPrevented && props.href)
+    context.close();
+}
+const classNames = computed(() => {
+  const result = [""];
+  if (props.active)
+    result.push("dropdown__item--active");
+  return result;
+});
+const tagName = computed(() => {
+  let tag = "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/DropdownItem.vue.d.ts

@@ -0,0 +1,62 @@
+import type { PropType } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (args_0: Event) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onClick?: ((args_0: Event) => any) | undefined;
+}>, {
+    text: string;
+    disabled: boolean;
+    href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+    active: 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/dropdown/DropdownText.vue

@@ -0,0 +1,34 @@
+<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/DropdownText.vue.d.ts

@@ -0,0 +1,17 @@
+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").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, 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/dropdown/index.d.ts

@@ -0,0 +1,10 @@
+import type { Ref, InjectionKey } from 'vue';
+export type MenuSizeVariant = 'sm' | 'md' | 'lg' | 'xl' | 'auto' | 'full';
+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

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

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

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

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,153 @@
+<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 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 {
+  inject,
+  provide,
+  ref,
+  shallowRef,
+  computed,
+  watch
+} from "vue";
+import { DROPDOWN_TREE } from ".";
+defineProps({
+  text: {
+    type: String,
+    default: ""
+  },
+  noCaret: {
+    type: Boolean,
+    default: false
+  }
+});
+const slots = defineSlots();
+const emit = defineEmits(["click"]);
+const context = inject(DROPDOWN_TREE, void 0, true);
+const transition = ref("slide-left");
+const isRoot = computed(() => {
+  return context === void 0;
+});
+const tree = context?.tree ?? shallowRef({
+  _level: 0,
+  slots
+});
+const next = () => {
+  tree.value = {
+    _level: tree.value._level + 1,
+    prev: tree.value,
+    slots
+  };
+};
+const 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: void 0,
+      _level: 0,
+      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/DropdownSubitem.vue.d.ts

@@ -0,0 +1,58 @@
+import type { VNode } from 'vue';
+declare function reset(): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        'button-back'(): VNode[];
+        'button-content'(props: {
+            next: () => void;
+            back: () => void;
+        }): VNode[];
+    }> & {
+        'button-back'(): VNode[];
+        'button-content'(props: {
+            next: () => void;
+            back: () => void;
+        }): VNode[];
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    reset: typeof reset;
+    next: () => void;
+    back: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (args_0: MouseEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onClick?: ((args_0: MouseEvent) => any) | undefined;
+}>, {
+    text: string;
+    noCaret: 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/dropdown-subitem/index.d.ts

@@ -0,0 +1,12 @@
+import type { InjectionKey, ShallowRef, Slots } from 'vue';
+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

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

package/dist/components/dropzone/Dropzone.vue

@@ -0,0 +1,205 @@
+<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 setup>
+import acceptFile from "./utils/accept";
+import {
+  computed,
+  nextTick,
+  ref,
+  toRef
+} from "vue";
+import { useVModel } from "../input";
+import { toBase64 } from "../utils/base64";
+import { useToNumber } from "@vueuse/shared";
+import { watchIgnorable } from "@vueuse/core";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  modelValue: {
+    type: [
+      globalThis.File,
+      Array,
+      String
+    ],
+    default: void 0
+  },
+  modelModifiers: {
+    type: Object,
+    default: () => ({})
+  },
+  multiple: {
+    type: [Boolean, String],
+    default: false
+  },
+  maxlength: {
+    type: [Number, String],
+    default: void 0
+  },
+  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: void 0
+  }
+});
+const emit = defineEmits(["update:modelValue", "change", "cancel"]);
+const model = useVModel(props);
+const rawModel = ref();
+const input = ref();
+const maxlength = useToNumber(toRef(props, "maxlength"), { method: "parseInt" });
+const isDragover = ref(false);
+const isHovered = ref(false);
+const classNames = computed(() => {
+  const result = [];
+  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 = void 0;
+  model.value = void 0;
+}
+function onDrop(event) {
+  if (!props.disabled && !props.readonly) {
+    const files = event.dataTransfer.files;
+    isDragover.value = false;
+    handleFiles(files);
+  }
+}
+function onChange(event) {
+  const target = event.target;
+  const files = target.files;
+  handleFiles(files);
+  if (props.multiple === "append") {
+    nextTick(() => {
+      target.value = "";
+    });
+  }
+}
+function filesToBase64(files) {
+  if (Array.isArray(files))
+    return Promise.all(files.map((file) => toBase64(file)));
+  return toBase64(files);
+}
+async function handleFiles(fileList) {
+  if (fileList.length > 0) {
+    const files = acceptFile(props.accept, Array.from(fileList));
+    const file = props.multiple === false ? files.at(0) : files;
+    let value = file;
+    if (props.multiple === "append" && Array.isArray(model.value))
+      value = [...model.value, ...value];
+    if (Number.isInteger(maxlength.value) && Array.isArray(value))
+      value = value.slice(0, maxlength.value);
+    rawModel.value = value;
+    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();
+</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>