@privyid/persona 1.2.0 → 1.2.1

package/dist/components/nav/NavItemDropdown.spec.mjs

@@ -1,140 +0,0 @@
-import { fireEvent, render } from "@testing-library/vue";
-import { delay } from "nanodelay";
-import { ref, nextTick } from "vue-demi";
-import Nav from "./Nav.vue";
-import NavItemDropdown from "./NavItemDropdown.vue";
-it("should rendered properly without any props", () => {
-  const screen = render({
-    components: { Nav, NavItemDropdown },
-    template: `
-      <Nav>
-        <NavItemDropdown />
-      </Nav>
-    `
-  });
-  const dropdown = screen.queryByTestId("nav-item-dropdown");
-  expect(dropdown).toBeInTheDocument();
-  expect(dropdown).toHaveClass("nav__item", "nav__item--dropdown");
-});
-it("should be able to change button text via props `text`", () => {
-  const screen = render({
-    components: { Nav, NavItemDropdown },
-    template: `
-      <Nav>
-        <NavItemDropdown text="text" />
-      </Nav>
-    `
-  });
-  const text = screen.queryByText("text");
-  expect(text).toBeInTheDocument();
-});
-it("should be able to change to icon mode via `icon` prop", () => {
-  const screen = render({
-    components: { Nav, NavItemDropdown },
-    template: `
-      <Nav>
-        <NavItemDropdown icon />
-      </Nav>
-    `
-  });
-  const button = screen.queryByTestId("dropdown-activator");
-  expect(button).toHaveClass("btn--variant-ghost", "btn--icon");
-});
-it("should be able to hide dropdown caret with `no-caret` prop", () => {
-  const screen = render({
-    components: { Nav, NavItemDropdown },
-    template: `
-      <Nav>
-        <NavItemDropdown no-caret />
-      </Nav>
-    `
-  });
-  const button = screen.queryByTestId("dropdown-activator");
-  const caret = screen.queryByTestId("dropdown-caret");
-  expect(button).toBeInTheDocument();
-  expect(caret).not.toBeInTheDocument();
-});
-it("should be able to set size of dropdown with `size` prop", () => {
-  const screen = render({
-    components: { Nav, NavItemDropdown },
-    template: `
-      <Nav>
-        <NavItemDropdown size="sm" />
-      </Nav>
-    `
-  });
-  const button = screen.queryByTestId("dropdown-activator");
-  expect(button).toBeInTheDocument();
-  expect(button).toHaveClass("btn--sm");
-});
-it("should be able to set placement of dropdown with `placement` prop", async () => {
-  const screen = render({
-    components: { Nav, NavItemDropdown },
-    template: `
-      <Nav>
-        <NavItemDropdown placement="bottom-start" />
-      </Nav>
-    `
-  });
-  await delay(0);
-  const dropdown = screen.queryByTestId("dropdown-menu");
-  expect(dropdown).toHaveAttribute("data-popper-placement", "bottom-start");
-});
-it("should be able to toggle dropdown via v-model", async () => {
-  const model = ref(false);
-  const screen = render({
-    components: { Nav, NavItemDropdown },
-    template: `
-      <Nav>
-        <NavItemDropdown v-model="model" />
-      </Nav>
-    `,
-    setup() {
-      return { model };
-    }
-  });
-  let dropdown = screen.queryByTestId("dropdown-menu");
-  expect(dropdown).not.toBeVisible();
-  model.value = true;
-  await nextTick();
-  dropdown = screen.queryByTestId("dropdown-menu");
-  expect(dropdown).toBeVisible();
-  await fireEvent.click(window);
-  await delay(0);
-  expect(model.value).toBe(false);
-  expect(dropdown).not.toBeVisible();
-});
-it("should be able to add class in the dropdown container via `menu-class` props", () => {
-  const screen = render({
-    components: { NavItemDropdown },
-    template: `
-      <NavItemDropdown menu-class="custom-dropdown" />
-    `
-  });
-  const menu = screen.queryByTestId("dropdown-menu");
-  expect(menu).toBeInTheDocument();
-  expect(menu).toHaveClass("custom-dropdown");
-});
-it("should be able to add size in the dropdown container via `menu-size` props", () => {
-  const screen = render({
-    components: { NavItemDropdown },
-    template: `
-      <NavItemDropdown menu-size="lg" />
-    `
-  });
-  const menu = screen.queryByTestId("dropdown");
-  expect(menu).toBeInTheDocument();
-  expect(menu).toHaveClass("dropdown--menu-lg");
-  expect(menu).not.toHaveClass("dropdown--menu-sm");
-});
-it("should be able to add divider in the dropdown-item via `divider` props", () => {
-  const screen = render({
-    components: { NavItemDropdown },
-    template: `
-      <NavItemDropdown divider />
-    `
-  });
-  const dropdown = screen.queryByTestId("dropdown");
-  expect(dropdown).toBeInTheDocument();
-  expect(dropdown).toHaveClass("dropdown--divider");
-});

package/dist/components/nav/NavItemDropdown.vue

@@ -1,104 +0,0 @@
-<template>
-  <li
-    data-testid="nav-item-dropdown"
-    class="nav__item nav__item--dropdown">
-    <Dropdown
-      v-model="model"
-      :text="text"
-      :icon="icon"
-      :variant="variant"
-      :size="size"
-      :placement="placement"
-      :no-caret="noCaret"
-      :divider="divider"
-      :menu-class="menuClass"
-      :menu-size="menuSize">
-      <template #button-content>
-        <slot name="button-content">
-          {{ text }}
-        </slot>
-      </template>
-      <slot />
-    </Dropdown>
-  </li>
-</template>
-
-<script setup>
-import Dropdown from "../dropdown/Dropdown.vue";
-import { useVModel } from "../input";
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  text: {
-    type: String,
-    default: ""
-  },
-  icon: {
-    type: Boolean,
-    default: false
-  },
-  size: {
-    type: String,
-    default: "md"
-  },
-  variant: {
-    type: String,
-    default: "ghost"
-  },
-  noCaret: {
-    type: Boolean,
-    default: false
-  },
-  placement: {
-    type: String,
-    default: "bottom-end"
-  },
-  menuClass: {
-    type: [
-      String,
-      Array,
-      Object
-    ],
-    default: void 0
-  },
-  menuSize: {
-    type: String,
-    default: "sm"
-  },
-  divider: {
-    type: Boolean,
-    default: false
-  }
-});
-defineEmits(["update:modelValue"]);
-const model = useVModel(props);
-defineSlots();
-</script>
-
-<style lang="postcss">
-.nav {
-  &__item {
-    &--dropdown {
-      @apply ml-auto relative;
-
-      .dropdown {
-        &__menu {
-          .dropdown__item {
-            @apply px-3;
-          }
-        }
-      }
-    }
-  }
-
-  &--fill {
-    .nav__item {
-      &--dropdown {
-        @apply text-right;
-      }
-    }
-  }
-}
-</style>

package/dist/components/nav/NavItemDropdown.vue.d.ts

@@ -1,122 +0,0 @@
-import type { PropType, VNode } from 'vue-demi';
-import type { Placement } from '@floating-ui/core';
-import type { SizeVariant, StyleVariant } from '../button';
-import type { MenuSizeVariant } from '../dropdown';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        default(): VNode[];
-        'button-content'(): VNode[];
-    }> & {
-        default(): VNode[];
-        'button-content'(): VNode[];
-    };
-    refs: {};
-    rootEl: HTMLLIElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    text: {
-        type: StringConstructor;
-        default: string;
-    };
-    icon: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    variant: {
-        type: PropType<StyleVariant>;
-        default: string;
-    };
-    noCaret: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    placement: {
-        type: PropType<Placement>;
-        default: string;
-    };
-    menuClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    menuSize: {
-        type: PropType<MenuSizeVariant>;
-        default: string;
-    };
-    divider: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: boolean) => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    text: {
-        type: StringConstructor;
-        default: string;
-    };
-    icon: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    variant: {
-        type: PropType<StyleVariant>;
-        default: string;
-    };
-    noCaret: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    placement: {
-        type: PropType<Placement>;
-        default: string;
-    };
-    menuClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    menuSize: {
-        type: PropType<MenuSizeVariant>;
-        default: string;
-    };
-    divider: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
-}>, {
-    text: string;
-    size: SizeVariant;
-    modelValue: boolean;
-    noCaret: boolean;
-    icon: boolean;
-    variant: StyleVariant;
-    divider: boolean;
-    placement: Placement;
-    menuClass: string | unknown[] | Record<string, any>;
-    menuSize: MenuSizeVariant;
-}, {}, {}, {}, string, import("vue-demi").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/nav/NavSubItem.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/nav/NavSubItem.spec.mjs

@@ -1,107 +0,0 @@
-import { render, fireEvent } from "@testing-library/vue";
-import Nav from "./Nav.vue";
-import NavItem from "./NavItem.vue";
-import NavSubItem from "./NavSubItem.vue";
-import IconEdit from "@privyid/persona-icon/vue/edit/20.vue";
-import IconDocument from "@privyid/persona-icon/vue/document-filled/20.vue";
-it("should rendered properly without any props", () => {
-  const screen = render({
-    components: {
-      Nav,
-      NavItem,
-      NavSubItem
-    },
-    template: `
-      <Nav>
-        <NavSubItem>
-        </NavSubItem>
-      </Nav>
-    `
-  });
-  const navSubItem = screen.queryByTestId("nav-subitem");
-  expect(navSubItem).toBeInTheDocument();
-  expect(navSubItem).toHaveClass("nav__subitem");
-});
-it("should be able to change parent-submenu text via props `text`", () => {
-  const screen = render({
-    components: {
-      Nav,
-      NavItem,
-      NavSubItem
-    },
-    template: `
-      <Nav>
-        <NavSubItem text="Documents">
-          <Nav>
-            <NavItem active>To Sign</NavItem>
-            <NavItem>To Review</NavItem>
-          </Nav>
-        </NavSubItem>
-      </Nav>
-    `
-  });
-  const navSubItem = screen.queryByTestId("nav-subitem");
-  const text = screen.queryByText("Documents");
-  expect(navSubItem).toBeInTheDocument();
-  expect(navSubItem).toHaveClass("nav__subitem");
-  expect(text).toBeInTheDocument();
-});
-it("should be able to add icon via slot `icon`", () => {
-  const screen = render({
-    components: {
-      Nav,
-      NavItem,
-      IconEdit,
-      NavSubItem,
-      IconDocument
-    },
-    template: `
-      <Nav>
-        <NavSubItem text="Documents">
-          <template #icon>
-            <IconDocument />
-          </template>
-          <Nav>
-            <NavItem active>To Sign</NavItem>
-            <NavItem>To Review</NavItem>
-          </Nav>
-        </NavSubItem>
-      </Nav>
-    `
-  });
-  const navSubItem = screen.queryByTestId("nav-subitem");
-  expect(navSubItem).toBeInTheDocument();
-  expect(navSubItem).toHaveClass("nav__subitem--icon");
-});
-it("should toggle submenu if `collapsible` prop was added", async () => {
-  const screen = render({
-    components: {
-      Nav,
-      NavItem,
-      IconEdit,
-      NavSubItem,
-      IconDocument
-    },
-    template: `
-      <Nav>
-        <NavSubItem text="Documents" collapsible>
-          <template #icon>
-            <IconDocument />
-          </template>
-          Document
-          <Nav>
-            <NavItem active>To Sign</NavItem>
-            <NavItem>To Review</NavItem>
-          </Nav>
-        </NavSubItem>
-      </Nav>
-    `
-  });
-  const navSubItem = screen.queryByTestId("nav-subitem");
-  const item = screen.queryByTestId("nav-subitem-parent");
-  expect(navSubItem).toBeInTheDocument();
-  expect(item).toBeInTheDocument();
-  expect(navSubItem).toHaveClass("nav__subitem--collapsed");
-  await fireEvent.click(item);
-  expect(navSubItem).not.toHaveClass("nav__subitem--collapsed");
-});

package/dist/components/nav/NavSubItem.vue

@@ -1,178 +0,0 @@
-<template>
-  <li
-    ref="root"
-    data-testid="nav-subitem"
-    class="nav__subitem"
-    :class="classNames">
-    <div
-      class="nav__subitem__parent"
-      data-testid="nav-subitem-parent"
-      @click.prevent="toggleExpand">
-      <span
-        v-if="$slots.icon"
-        class="nav__link__icon">
-        <slot name="icon" />
-      </span>
-      <span class="nav__link__label">
-        {{ text }}
-      </span>
-      <IconArrow
-        v-if="collapsible"
-        class="nav__link__caret" />
-    </div>
-    <Collapse :model-value="isExpand">
-      <slot />
-    </Collapse>
-  </li>
-</template>
-
-<script setup>
-import {
-  computed,
-  inject,
-  ref,
-  onMounted
-} from "vue-demi";
-import { SIDEBAR_SETTINGS } from "../sidebar";
-import IconArrow from "@privyid/persona-icon/vue/chevron-down/16.vue";
-import Collapse from "../collapse/Collapse.vue";
-const props = defineProps({
-  text: {
-    type: String,
-    default: void 0
-  },
-  collapsible: {
-    type: Boolean,
-    default: false
-  }
-});
-const slots = defineSlots();
-const settings = inject(SIDEBAR_SETTINGS, void 0, true);
-const root = ref();
-const collapsible = computed(() => props.collapsible && settings?.type !== "narrow");
-const isExpand = ref(!props.collapsible);
-const classNames = computed(() => {
-  const result = [];
-  if (slots.icon)
-    result.push("nav__subitem--icon");
-  if (collapsible.value) {
-    result.push("nav__subitem--collapsible");
-    if (isExpand.value)
-      result.push("nav__subitem--expanded");
-    else
-      result.push("nav__subitem--collapsed");
-  }
-  return result;
-});
-function toggleExpand() {
-  if (collapsible.value)
-    isExpand.value = !isExpand.value;
-}
-onMounted(() => {
-  if (collapsible.value && root.value) {
-    isExpand.value = root.value.querySelectorAll(".router-link-active:not(.nav__link--exact),.router-link-exact-active.nav__link--exact").length > 0;
-  }
-});
-</script>
-
-<style lang="postcss">
-.nav {
-  &__subitem {
-    /**
-    * there is some tricky here.
-    * default text is set with muted color
-    * (used for disabled state)
-    * in the future, when all sub-item
-    * is disabled, parent menu
-    * will disabled too
-    */
-    @apply block text-base text-muted;
-    @apply dark:text-dark-muted;
-
-    &&--collapsible {
-      /**
-      * when menu is collapsible,
-      * parent menu is set to
-      * active state
-      */
-      .nav__subitem__parent {
-        @apply cursor-pointer text-default relative;
-        @apply dark:text-dark-default;
-      }
-
-      .nav__link__caret {
-        @apply absolute right-3 rotate-180 origin-center ease-in-out duration-150;
-      }
-
-      &.nav__subitem--collapsed {
-        .nav__link__caret {
-          @apply rotate-0;
-        }
-      }
-    }
-
-    &__parent {
-      @apply flex flex-row items-center p-3 border border-transparent cursor-default rounded;
-    }
-
-    .nav {
-      @apply pt-3 select-none;
-    }
-
-    &&--icon {
-      .nav__link__icon {
-        @apply grow-0;
-
-        img {
-          @apply w-5 h-5;
-        }
-      }
-
-      .nav__link__label {
-        @apply shrink pl-3 w-full select-none;
-
-        .badge {
-          @apply ml-auto;
-        }
-      }
-    }
-
-    /**
-    * when all of sub-item has no
-    * disabled state, set text color
-    * of parent with default color
-    * (used for active or hover state)
-    */
-    &:has(ul > li:not(.nav__item--disabled)) {
-      .nav__subitem__parent {
-        @apply text-default;
-        @apply dark:text-dark-default;
-      }
-    }
-
-    /**
-    * when menu is set to collapsible
-    * and its collapsed, then styling parent
-    * with normal state
-    */
-    &:is(&--collapsible&--collapsed):has(ul > li:not(.nav__item--disabled)) {
-      .nav__subitem__parent {
-        @apply text-subtle hover:text-default;
-        @apply dark:text-dark-subtle hover:dark:text-dark-default;
-      }
-    }
-
-    .sidebar__nav .nav__link__label {
-      @apply pl-8;
-    }
-  }
-
-  &&--condensed {
-    .nav__subitem {
-      &__parent {
-        @apply py-1;
-      }
-    }
-  }
-}
-</style>

package/dist/components/nav/NavSubItem.vue.d.ts

@@ -1,45 +0,0 @@
-import type { VNode } from 'vue-demi';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        icon(): VNode[];
-        default(): VNode[];
-    }> & {
-        icon(): VNode[];
-        default(): VNode[];
-    };
-    refs: {
-        root: HTMLLIElement;
-    };
-    rootEl: HTMLLIElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    collapsible: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    collapsible: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    text: string;
-    collapsible: boolean;
-}, {}, {}, {}, string, import("vue-demi").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/nav/NavText.spec.d.ts

@@ -1 +0,0 @@
-export {};