@privyid/persona 0.3.0

package/dist/components/dropdown/Dropdown.vue

@@ -0,0 +1,231 @@
+<template>
+  <div
+    ref="dropdown"
+    class="dropdown"
+    :class="{ 'dropdown--open': isOpen }"
+    data-testid="dropdown">
+    <slot
+      name="activator"
+      :toggle="toggle"
+      :open="open"
+      :close="close"
+      :is-open="isOpen">
+      <Button
+        data-testid="dropdown-activator"
+        class="dropdown__activator"
+        :variant="variant"
+        :color="color"
+        :size="size"
+        :icon="icon"
+        :pill="pill"
+        :disabled="disabled"
+        @click.prevent="toggle">
+        <slot name="button-content">
+          {{ text }}
+        </slot>
+        <IconArrow
+          v-if="!noCaret"
+          class="dropdown__caret"
+          data-testid="dropdown-caret" />
+      </Button>
+    </slot>
+
+    <Transition name="fade">
+      <div
+        v-show="isOpen"
+        ref="menu"
+        data-testid="dropdown-menu"
+        class="dropdown__menu">
+        <DropdownGroup
+          ref="wizard"
+          class="dropdown__menuContainer">
+          <slot />
+        </DropdownGroup>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent,
+  provide,
+  watch,
+  toRef
+} from "vue-demi";
+import {
+  templateRef,
+  onClickOutside,
+  onKeyStroke
+} from "@vueuse/core";
+import Button from "../button/Button.vue";
+import DropdownGroup from "../dropdown-subitem/DropdownSubitem.vue";
+import { useFocus } from "./utils/use-focus";
+import { usePopper } from "./utils/use-popper";
+import { useVModel } from "../input/use-input";
+import IconArrow from "@carbon/icons-vue/lib/chevron--down/16";
+export const DROPDOWN_CONTEXT = Symbol("DROPDOWN_CONTEXT");
+export default defineComponent({
+  components: {
+    Button,
+    DropdownGroup,
+    IconArrow
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    text: {
+      type: String,
+      default: ""
+    },
+    placement: {
+      type: String,
+      default: "bottom-start"
+    },
+    variant: {
+      type: String,
+      default: "solid"
+    },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    icon: {
+      type: Boolean,
+      default: false
+    },
+    pill: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    noCaret: {
+      type: Boolean,
+      default: false
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: [
+    "show",
+    "hide",
+    "update:modelValue"
+  ],
+  setup(props, { emit }) {
+    const target = templateRef("dropdown");
+    const menu = templateRef("menu");
+    const wizard = templateRef("wizard");
+    const placement = toRef(props, "placement");
+    const popper = usePopper(target, menu, placement);
+    const isOpen = useVModel(props);
+    const { next: nextFocus, prev: prevFocus } = useFocus(menu);
+    function toggle() {
+      if (!props.disabled) {
+        if (isOpen.value)
+          close();
+        else
+          open();
+      }
+    }
+    function open() {
+      if (!props.disabled) {
+        isOpen.value = true;
+        emit("show");
+      }
+    }
+    function close() {
+      if (!props.disabled) {
+        isOpen.value = false;
+        emit("hide");
+      }
+    }
+    onClickOutside(menu, () => {
+      if (isOpen.value) {
+        setTimeout(() => {
+          close();
+        });
+      }
+    }, { ignore: [target] });
+    onKeyStroke("Escape", (event) => {
+      const target2 = event.target;
+      if (isOpen.value) {
+        close();
+        if (typeof target2.blur === "function")
+          target2.blur();
+      }
+    });
+    onKeyStroke(["ArrowUp"], (event) => {
+      event.preventDefault();
+      if (isOpen.value)
+        prevFocus();
+    });
+    onKeyStroke(["ArrowDown"], (event) => {
+      event.preventDefault();
+      if (isOpen.value)
+        nextFocus();
+    });
+    onKeyStroke(["Tab"], (event) => {
+      event.preventDefault();
+      if (isOpen.value) {
+        if (event.shiftKey)
+          prevFocus();
+        else
+          nextFocus();
+      }
+    });
+    watch(isOpen, (value) => {
+      if (value && popper.value)
+        popper.value.update();
+      else if (wizard.value)
+        wizard.value.reset();
+    }, { immediate: true });
+    provide(DROPDOWN_CONTEXT, {
+      isOpen,
+      toggle,
+      open,
+      close
+    });
+    return {
+      isOpen,
+      toggle,
+      open,
+      close
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.dropdown {
+  @apply relative inline-flex;
+
+  &__menu {
+    @apply max-h-64 border rounded w-full min-w-[15rem] bg-white z-10 border-secondary-25 shadow-xl overflow-x-hidden overflow-y-auto relative;
+  }
+
+  &__menuContainer > .dropdown__item:first-child,
+  &__menuContainer > .dropdown__subitem:first-child .dropdown__item {
+    @apply rounded-t;
+  }
+
+  &__menuContainer > .dropdown__item:last-child,
+  &__menuContainer > .dropdown__subitem:last-child .dropdown__item {
+    @apply rounded-b;
+  }
+
+  &__activator > &__caret {
+    @apply self-center;
+  }
+}
+</style>

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

@@ -0,0 +1,113 @@
+import { InjectionKey, PropType, Ref } from 'vue-demi';
+import { Placement } from './utils/use-popper';
+interface DropdownContext {
+    close: () => void;
+    open: () => void;
+    toggle: () => void;
+    isOpen: Ref<boolean>;
+}
+export declare const DROPDOWN_CONTEXT: InjectionKey<DropdownContext>;
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    icon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    isOpen: Ref<boolean>;
+    toggle: () => void;
+    open: () => void;
+    close: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "show" | "hide")[], "show" | "update:modelValue" | "hide", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    icon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onShow?: (...args: any[]) => any;
+    onHide?: (...args: any[]) => any;
+}, {
+    icon: boolean;
+    variant: StyleVariant;
+    size: SizeVariant;
+    color: ColorVariant;
+    pill: boolean;
+    disabled: boolean;
+    modelValue: boolean;
+    text: string;
+    placement: Placement;
+    noCaret: boolean;
+}>;
+export default _default;

package/dist/components/dropdown/DropdownItem.vue

@@ -0,0 +1,44 @@
+<template>
+  <button
+    data-testid="dropdown-item"
+    class="dropdown__item"
+    @click="handleOnClick">
+    <slot>
+      {{ text }}
+    </slot>
+  </button>
+</template>
+
+<script>
+import { defineComponent, inject } from "vue-demi";
+import { DROPDOWN_CONTEXT } from "./Dropdown.vue";
+export default defineComponent({
+  props: {
+    text: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const context = inject(DROPDOWN_CONTEXT, void 0, true);
+    function handleOnClick(event) {
+      emit("click", event);
+      if (context?.close && !event.defaultPrevented)
+        context.close();
+    }
+    return { handleOnClick };
+  }
+});
+</script>
+
+<style lang="postcss">
+.dropdown__item {
+  @apply px-3 py-2 cursor-pointer text-body-100 w-full select-none text-left;
+
+  &:hover,
+  &:focus-visible {
+    @apply bg-background-75;
+  }
+}
+</style>

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

@@ -0,0 +1,18 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    handleOnClick: (event: Event) => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "click"[], "click", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    onClick?: (...args: any[]) => any;
+}, {
+    text: string;
+}>;
+export default _default;

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { createPopper, Instance as Popper, Placement } from '@popperjs/core';
+import { Ref } from 'vue-demi';
+export declare type PopperParameters = Parameters<typeof createPopper>;
+export declare type PoppperOption = PopperParameters[2];
+export type { Placement, } from '@popperjs/core';
+export declare function usePopper(reference: Ref<PopperParameters[0]>, menu: Ref<PopperParameters[1]>, placement: Ref<Placement>): import("vue-demi").ShallowRef<Popper>;

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

@@ -0,0 +1,32 @@
+import {
+  createPopper
+} from "@popperjs/core";
+import { tryOnMounted, tryOnUnmounted } from "@vueuse/shared";
+import {
+  shallowRef,
+  watch
+} from "vue-demi";
+export function usePopper(reference, menu, placement) {
+  const popper = shallowRef();
+  tryOnMounted(() => {
+    popper.value = createPopper(reference.value, menu.value, {
+      placement: placement.value,
+      modifiers: [
+        {
+          name: "offset",
+          options: { offset: [0, 6] }
+        },
+        { name: "preventOverflow" }
+      ]
+    });
+  });
+  watch(placement, async (value) => {
+    if (popper.value)
+      await popper.value.setOptions({ placement: value });
+  });
+  tryOnUnmounted(() => {
+    if (popper.value !== void 0)
+      popper.value.destroy();
+  });
+  return popper;
+}

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

@@ -0,0 +1,168 @@
+<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>
+import DropdownItem from "../dropdown/DropdownItem.vue";
+import IconNext from "@carbon/icons-vue/lib/chevron--right/16";
+import IconBack from "@carbon/icons-vue/lib/arrow--left/16";
+import {
+  defineComponent,
+  inject,
+  provide,
+  ref,
+  shallowRef,
+  computed,
+  watch
+} from "vue-demi";
+import { DROPDOWN_TREE } from "./use-dropdown-subitem";
+export default defineComponent({
+  components: {
+    DropdownItem,
+    IconNext,
+    IconBack
+  },
+  props: {
+    text: {
+      type: String,
+      default: ""
+    },
+    noCaret: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["click"],
+  setup(props, { slots, emit }) {
+    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();
+    }
+    return {
+      isRoot,
+      tree,
+      view,
+      next,
+      back,
+      reset,
+      canBack,
+      transition,
+      handleOnClick
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.dropdown__subitem {
+  &-btn {
+    @apply flex items-center gap-1;
+
+    &-back {
+      @apply flex-shrink-0;
+    }
+  }
+
+  &-content {
+    @apply flex-grow;
+  }
+
+  &-next,
+  &-back {
+    @apply flex-shrink-0;
+  }
+}
+</style>

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

@@ -0,0 +1,35 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    isRoot: import("vue-demi").ComputedRef<boolean>;
+    tree: import("vue-demi").ShallowRef<import("./use-dropdown-subitem").DropdownNode>;
+    view: import("vue-demi").ComputedRef<import("vue-demi").Slot>;
+    next: () => void;
+    back: () => void;
+    reset: () => void;
+    canBack: import("vue-demi").ComputedRef<boolean>;
+    transition: import("vue-demi").Ref<"none" | "slide-left" | "slide-right">;
+    handleOnClick: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "click"[], "click", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClick?: (...args: any[]) => any;
+}, {
+    text: string;
+    noCaret: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,12 @@
+import { 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/use-dropdown-subitem.mjs

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