@privyid/persona 1.2.1 → 1.2.2-dev.2

package/dist/components/dropdown/Dropdown.vue

@@ -0,0 +1,381 @@
+<template>
+  <div
+    ref="root"
+    class="dropdown"
+    :class="[{ 'dropdown--open': isOpen, 'dropdown--no-caret': noCaret }, classNames]"
+    :style="{ '--p-dropdown-root-width': `${width}px` }"
+    data-testid="dropdown">
+    <slot
+      name="activator"
+      :toggle="toggle"
+      :open="open"
+      :close="close"
+      :is-open="isOpen">
+      <Button
+        data-testid="dropdown-activator"
+        class="dropdown__activator"
+        :class="buttonClass"
+        :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"
+      :css="!noAnimation"
+      @after-enter="$emit('show')"
+      @after-leave="$emit('hide')">
+      <div
+        v-show="isOpen && !isHidden"
+        ref="menu"
+        data-testid="dropdown-menu"
+        class="dropdown__menu"
+        :class="[menuClass, containerSize]">
+        <div
+          v-if="$slots.prepend"
+          class="drowdown__menu__prepend">
+          <slot name="prepend" />
+        </div>
+        <div
+          ref="menuBody"
+          class="dropdown__menu__body">
+          <DropdownGroup
+            ref="wizard"
+            class="dropdown__menu__container">
+            <slot />
+          </DropdownGroup>
+        </div>
+        <div
+          v-if="$slots.append"
+          class="drowdown__menu__append">
+          <slot name="append" />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import {
+  provide,
+  watch,
+  toRef,
+  watchEffect,
+  computed,
+  ref
+} from "vue";
+import {
+  onClickOutside,
+  onKeyStroke,
+  useElementSize
+} from "@vueuse/core";
+import Button from "../button/Button.vue";
+import DropdownGroup from "../dropdown-subitem/DropdownSubitem.vue";
+import { useFocus } from "./utils/use-focus";
+import {
+  autoUpdate,
+  computePosition,
+  offset,
+  flip,
+  shift,
+  hide
+} from "@floating-ui/dom";
+import { useVModel } from "../input";
+import IconArrow from "@privyid/persona-icon/vue/chevron-down/20.vue";
+import { DROPDOWN_CONTEXT } from ".";
+defineOptions({
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+});
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  text: {
+    type: String,
+    default: ""
+  },
+  placement: {
+    type: String,
+    default: "bottom-start"
+  },
+  variant: {
+    type: String,
+    default: "solid"
+  },
+  color: {
+    type: String,
+    default: "default"
+  },
+  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
+  },
+  divider: {
+    type: Boolean,
+    default: false
+  },
+  menuClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  },
+  buttonClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  },
+  menuSize: {
+    type: String,
+    default: "sm"
+  },
+  /**
+   * For testing only
+   */
+  noAnimation: {
+    type: Boolean,
+    default: false
+  }
+});
+defineEmits(["show", "hide", "update:modelValue"]);
+const slots = defineSlots();
+const root = ref();
+const menu = ref();
+const menuBody = ref();
+const wizard = ref();
+const placement = toRef(props, "placement");
+const isOpen = useVModel(props);
+const isHidden = ref(false);
+const { next: nextFocus, prev: prevFocus } = useFocus(menuBody);
+const { width } = useElementSize(root);
+const classNames = computed(() => {
+  const result = [""];
+  if (props.divider)
+    result.push("dropdown--divider");
+  if (props.menuSize)
+    result.push(`dropdown--menu-${props.menuSize}`);
+  return result;
+});
+const containerSize = computed(() => {
+  const result = [""];
+  if (slots.prepend)
+    result.push("dropdown__menu--has-prepend");
+  if (slots.append)
+    result.push("dropdown__menu--has-append");
+  return result;
+});
+function toggle() {
+  if (!props.disabled) {
+    if (isOpen.value)
+      close();
+    else
+      open();
+  }
+}
+function open() {
+  if (!props.disabled)
+    isOpen.value = true;
+}
+function close() {
+  if (!props.disabled)
+    isOpen.value = false;
+}
+onClickOutside(menu, () => {
+  if (isOpen.value) {
+    setTimeout(() => {
+      close();
+    });
+  }
+}, { ignore: [root] });
+onKeyStroke("Escape", (event) => {
+  const target = event.target;
+  if (isOpen.value) {
+    close();
+    if (typeof target.blur === "function")
+      target.blur();
+  }
+});
+onKeyStroke(["ArrowUp"], (event) => {
+  if (isOpen.value) {
+    event.preventDefault();
+    prevFocus();
+  }
+});
+onKeyStroke(["ArrowDown"], (event) => {
+  if (isOpen.value) {
+    event.preventDefault();
+    nextFocus();
+  }
+});
+onKeyStroke(["Tab"], (event) => {
+  if (isOpen.value) {
+    event.preventDefault();
+    if (event.shiftKey)
+      prevFocus();
+    else
+      nextFocus();
+  }
+});
+watchEffect((onCleanup) => {
+  if (root.value && menu.value) {
+    const cleanup = autoUpdate(root.value, menu.value, () => {
+      computePosition(root.value, menu.value, {
+        strategy: "absolute",
+        placement: placement.value,
+        middleware: [
+          flip(),
+          shift(),
+          offset(8),
+          hide()
+        ]
+      }).then(({ x, y, placement: placement2, middlewareData }) => {
+        if (menu.value) {
+          menu.value.dataset.popperPlacement = placement2;
+          menu.value.style.left = `${x || 0}px`;
+          menu.value.style.top = `${y || 0}px`;
+          isHidden.value = middlewareData.hide.referenceHidden;
+        }
+      });
+    }, { animationFrame: true });
+    onCleanup(cleanup);
+  }
+}, { flush: "post" });
+watch(isOpen, (value) => {
+  if (!value && wizard.value)
+    wizard.value.reset();
+}, { immediate: true });
+provide(DROPDOWN_CONTEXT, {
+  isOpen,
+  toggle,
+  open,
+  close
+});
+defineExpose({
+  menuBody,
+  menu,
+  root,
+  open,
+  close
+});
+</script>
+
+<style lang="postcss">
+.dropdown {
+  --p-dropdown-z-index: theme(zIndex.dropdown);
+  --p-dropdown-size-xl: 36rem; /* 576px */
+  --p-dropdown-size-lg: 30rem; /* 480px */
+  --p-dropdown-size-md: 20rem; /* 320px */
+  --p-dropdown-size-sm: 15rem; /* 240px */
+  --p-dropdown-max-height: theme(spacing.64);
+
+  @apply inline-flex;
+
+  &--menu-xl {
+    --p-dropdown-size: var(--p-dropdown-size-xl);
+  }
+
+  &--menu-lg {
+    --p-dropdown-size: var(--p-dropdown-size-lg);
+  }
+
+  &--menu-md {
+    --p-dropdown-size: var(--p-dropdown-size-md);
+  }
+
+  &--menu-sm {
+    --p-dropdown-size: var(--p-dropdown-size-sm);
+  }
+
+  &--menu-auto {
+    --p-dropdown-size: auto;
+  }
+
+  &--menu-full {
+    --p-dropdown-size: var(--p-dropdown-root-width);
+  }
+
+  &__menu {
+    @apply border rounded bg-default z-[var(--p-dropdown-z-index)] border-default shadow-xl absolute flex flex-col overflow-hidden w-[var(--p-dropdown-size)];
+    @apply dark:bg-dark-default dark:border-dark-default;
+
+    &__prepend,
+    &__append {
+      @apply shrink-0;
+    }
+
+    &__body {
+      @apply max-h-[var(--p-dropdown-max-height)] overflow-x-hidden overflow-y-auto grow;
+    }
+
+    &:not(&--has-prepend) &__container {
+      > .dropdown__item {
+        &:first-child,
+        .dropdown__subitem:first-child & {
+          @apply rounded-t-sm;
+        }
+      }
+    }
+
+    &:not(&--has-append) &__container {
+      > .dropdown__item {
+        &:last-child,
+        .dropdown__subitem:last-child & {
+          @apply rounded-b-sm;
+        }
+      }
+    }
+  }
+
+  &__activator > &__caret {
+    @apply self-center -mr-[3px];
+  }
+
+  &&--divider {
+    .dropdown {
+      &__menu {
+        :where(.checkbox, .radio, .dropdown__item) {
+          @apply border-b border-solid border-b-subtle-alpha last:border-b-0;
+          @apply dark:border-b-dark-subtle-alpha;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,301 @@
+import type { PropType, VNode } from 'vue';
+import type { Placement } from '@floating-ui/dom';
+import type { StyleVariant, ColorVariant, SizeVariant } from '../button';
+import type { MenuSizeVariant } from '.';
+declare function open(): void;
+declare function close(): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        activator(props: {
+            isOpen: boolean;
+            open: () => void;
+            close: () => void;
+            toggle: () => void;
+        }): VNode[];
+        'button-content': () => VNode[];
+        prepend: () => VNode[];
+        append: () => VNode[];
+    }> & {
+        activator(props: {
+            isOpen: boolean;
+            open: () => void;
+            close: () => void;
+            toggle: () => void;
+        }): VNode[];
+        'button-content': () => VNode[];
+        prepend: () => VNode[];
+        append: () => VNode[];
+    };
+    refs: {
+        root: HTMLDivElement;
+        menu: HTMLDivElement;
+        menuBody: HTMLDivElement;
+        wizard: ({
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{
+                text: string;
+                noCaret: boolean;
+            }> & Omit<{
+                readonly text: string;
+                readonly noCaret: boolean;
+                readonly onClick?: ((args_0: MouseEvent) => any) | undefined;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "text" | "noCaret">;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any> | undefined;
+            }>;
+            $root: import("vue").ComponentPublicInstance | null;
+            $parent: import("vue").ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: "click", args_0: MouseEvent) => void;
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+                text: {
+                    type: StringConstructor;
+                    default: string;
+                };
+                noCaret: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
+            }>> & Readonly<{
+                onClick?: ((args_0: MouseEvent) => any) | undefined;
+            }>, {
+                reset: () => void;
+                next: () => void;
+                back: () => void;
+            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                click: (args_0: MouseEvent) => void;
+            }, string, {
+                text: string;
+                noCaret: boolean;
+            }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{
+            text: string;
+            noCaret: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            text: {
+                type: StringConstructor;
+                default: string;
+            };
+            noCaret: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & Readonly<{
+            onClick?: ((args_0: MouseEvent) => any) | undefined;
+        }>, "reset" | "next" | "back" | ("text" | "noCaret")> & import("vue").ShallowUnwrapRef<{
+            reset: () => void;
+            next: () => void;
+            back: () => void;
+        }> & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: Readonly<{
+                'button-back'(): VNode[];
+                'button-content'(props: {
+                    next: () => void;
+                    back: () => void;
+                }): VNode[];
+            }> & {
+                'button-back'(): VNode[];
+                'button-content'(props: {
+                    next: () => void;
+                    back: () => void;
+                }): VNode[];
+            };
+        }) | null;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").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;
+    };
+    divider: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    menuClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    buttonClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    menuSize: {
+        type: PropType<MenuSizeVariant>;
+        default: string;
+    };
+    /**
+     * For testing only
+     */
+    noAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    menuBody: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    menu: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    root: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    open: typeof open;
+    close: typeof close;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: boolean) => void;
+    show: () => void;
+    hide: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").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;
+    };
+    divider: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    menuClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    buttonClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    menuSize: {
+        type: PropType<MenuSizeVariant>;
+        default: string;
+    };
+    /**
+     * For testing only
+     */
+    noAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+    onShow?: (() => any) | undefined;
+    onHide?: (() => any) | undefined;
+}>, {
+    text: string;
+    size: SizeVariant;
+    modelValue: boolean;
+    disabled: boolean;
+    noCaret: boolean;
+    icon: boolean;
+    pill: boolean;
+    variant: StyleVariant;
+    divider: boolean;
+    color: ColorVariant;
+    placement: Placement;
+    menuClass: string | unknown[] | Record<string, any>;
+    buttonClass: string | unknown[] | Record<string, any>;
+    menuSize: MenuSizeVariant;
+    noAnimation: 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/DropdownHeader.vue

@@ -0,0 +1,33 @@
+<template>
+  <Subheading
+    overline
+    data-testid="dropdown-header"
+    weight="medium"
+    class="dropdown__header">
+    <span>
+      <slot />
+    </span>
+    <span
+      v-if="$slots.action"
+      data-testid="dropdown-header-action"
+      class="dropdown__header__action">
+      <slot name="action" />
+    </span>
+  </Subheading>
+</template>
+
+<script setup>
+import Subheading from "../subheading/Subheading.vue";
+</script>
+
+<style lang="postcss">
+.dropdown {
+  &__header {
+    @apply px-4 pt-3 pb-1 flex items-center justify-between;
+
+    &__action {
+      @apply normal-case font-medium;
+    }
+  }
+}
+</style>