@privyid/persona 1.1.2 → 1.2.0

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

@@ -0,0 +1,149 @@
+import { render } from "@testing-library/vue";
+import Nav from "./Nav.vue";
+import NavItem from "./NavItem.vue";
+import IconEdit from "@privyid/persona-icon/vue/edit/20.vue";
+it("should rendered properly without any props", () => {
+  const screen = render({
+    components: { Nav, NavItem },
+    template: `
+      <Nav>
+        <NavItem>To Sign</NavItem>
+      </Nav>
+    `
+  });
+  const navItem = screen.queryByTestId("nav-item");
+  const navLink = screen.queryByTestId("nav-link");
+  const text = screen.queryByText("To Sign");
+  expect(navItem).toBeInTheDocument();
+  expect(navItem).toHaveClass("nav__item");
+  expect(navLink).toBeInTheDocument();
+  expect(navLink).toHaveClass("nav__link");
+  expect(text).toBeInTheDocument();
+});
+it("should have style `active` by setting the `active` prop", () => {
+  const screen = render({
+    components: { Nav, NavItem },
+    template: `
+      <Nav>
+        <NavItem active>To Sign</NavItem>
+      </Nav>
+    `
+  });
+  const navLink = screen.queryByTestId("nav-link");
+  expect(navLink).toBeInTheDocument();
+  expect(navLink).toHaveClass("nav__link", "nav__link--active");
+});
+it("should have style `disabled` by setting the `disabled` prop", () => {
+  const screen = render({
+    components: { Nav, NavItem },
+    template: `
+      <Nav>
+        <NavItem disabled>To Sign</NavItem>
+      </Nav>
+    `
+  });
+  const navLink = screen.queryByTestId("nav-link");
+  expect(navLink).toBeInTheDocument();
+  expect(navLink).toHaveClass("nav__link", "nav__link--disabled");
+});
+it("should have `target` by setting the `target` prop", () => {
+  const screen = render({
+    components: { Nav, NavItem },
+    template: `
+      <Nav>
+        <NavItem target="_blank">To Sign</NavItem>
+      </Nav>
+    `
+  });
+  const navLink = screen.queryByTestId("nav-link");
+  expect(navLink).toBeInTheDocument();
+  expect(navLink).toHaveAttribute("target", "_blank");
+});
+it("should have `href` by setting the `href` prop", () => {
+  const screen = render({
+    components: { Nav, NavItem },
+    template: `
+      <Nav>
+        <NavItem href="https://privy.id">To Sign</NavItem>
+      </Nav>
+    `
+  });
+  const navLink = screen.queryByTestId("nav-link");
+  expect(navLink).toBeInTheDocument();
+  expect(navLink).toHaveAttribute("href", "https://privy.id");
+});
+it("should be able to add icon via slot `icon`", () => {
+  const screen = render({
+    components: {
+      Nav,
+      NavItem,
+      IconEdit
+    },
+    template: `
+      <Nav>
+        <NavItem>
+          <template #icon>
+            <IconEdit />
+          </template>
+        </NavItem>
+      </Nav>
+    `
+  });
+  const navLink = screen.queryByTestId("nav-link");
+  expect(navLink).toBeInTheDocument();
+  expect(navLink).toHaveClass("nav__link--icon");
+});
+it("should be able to add link class via props `link-class`", () => {
+  const screen = render({
+    components: { Nav, NavItem },
+    template: `
+      <Nav>
+        <NavItem link-class="link-class">link</NavItem>
+      </Nav>
+    `
+  });
+  const navLink = screen.queryByTestId("nav-link");
+  expect(navLink).toHaveClass("link-class");
+});
+it("should be using router-link if url without http", () => {
+  const screen = render({
+    components: { Nav, NavItem },
+    template: `
+      <Nav>
+        <NavItem href="/">link</NavItem>
+      </Nav>
+    `
+  });
+  const navLink = screen.queryByTestId("nav-link");
+  expect(navLink).toBeInTheDocument();
+  expect(navLink).toContainHTML("nuxt-link");
+  expect(navLink).toHaveAttribute("href", "/");
+});
+it("should be remove href url if disabled", () => {
+  const screen = render({
+    components: { Nav, NavItem },
+    template: `
+      <Nav>
+        <NavItem href="/link" disabled>link</NavItem>
+      </Nav>
+    `
+  });
+  const navLink = screen.queryByTestId("nav-link");
+  expect(navLink).toBeInTheDocument();
+  expect(navLink).toContainHTML("nuxt-link");
+  expect(navLink).not.toHaveAttribute("href", "/link");
+});
+it("should be exact matching if prop exact set to true", () => {
+  const screen = render({
+    components: { Nav, NavItem },
+    template: `
+      <Nav>
+        <NavItem href="/link" exact>link</NavItem>
+      </Nav>
+    `
+  });
+  const navLink = screen.queryByTestId("nav-link");
+  expect(navLink).toBeInTheDocument();
+  expect(navLink).toContainHTML("nuxt-link");
+  expect(navLink).toHaveClass("nav__link--exact");
+});

package/dist/components/nav/NavItem.vue

@@ -24,85 +24,63 @@
   </li>
 </template>
 
-<script lang="ts" setup>
-import type {
-  AnchorHTMLAttributes,
-  PropType,
-  VNode,
-} from 'vue-demi'
-import { computed } from 'vue-demi'
-import type { RouteLocationRaw } from 'vue-router'
-
+<script setup>
+import { computed } from "vue-demi";
 const props = defineProps({
   active: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   disabled: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   href: {
-    type   : [String, Object] as PropType<RouteLocationRaw>,
-    default: undefined,
+    type: [String, Object],
+    default: void 0
   },
   target: {
-    type   : String as PropType<AnchorHTMLAttributes['target']>,
-    default: '_self',
+    type: String,
+    default: "_self"
   },
   linkClass: {
     type: [
       String,
       Array,
-      Object,
+      Object
     ],
-    default: undefined,
+    default: void 0
   },
   exact: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const slots = defineSlots<{
-  'icon'(): VNode[],
-  'default'(): VNode[],
-}>()
-
+    type: Boolean,
+    default: false
+  }
+});
+const slots = defineSlots();
 const classNames = computed(() => {
-  const result: string[] = ['nav__link']
-
+  const result = ["nav__link"];
   if (props.active)
-    result.push('nav__link--active')
-
+    result.push("nav__link--active");
   if (props.disabled)
-    result.push('nav__link--disabled')
-
+    result.push("nav__link--disabled");
   if (slots.icon)
-    result.push('nav__link--icon')
-
+    result.push("nav__link--icon");
   if (props.exact)
-    result.push('nav__link--exact')
-
-  return result
-})
-
+    result.push("nav__link--exact");
+  return result;
+});
 const navItemClass = computed(() => {
-  const result: string[] = ['']
-
+  const result = [""];
   if (props.active)
-    result.push('nav__item--active')
-
+    result.push("nav__item--active");
   if (props.disabled)
-    result.push('nav__item--disabled')
-
-  return result
-})
-
+    result.push("nav__item--disabled");
+  return result;
+});
 const link = computed(() => {
   if (!props.disabled)
-    return props.href
-})
+    return props.href;
+});
 </script>
 
 <style lang="postcss">

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

@@ -0,0 +1,80 @@
+import type { AnchorHTMLAttributes, PropType, VNode } from 'vue-demi';
+import type { RouteLocationRaw } from 'vue-router';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        icon(): VNode[];
+        default(): VNode[];
+    }> & {
+        icon(): VNode[];
+        default(): VNode[];
+    };
+    refs: {};
+    rootEl: HTMLLIElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    target: {
+        type: PropType<AnchorHTMLAttributes["target"]>;
+        default: string;
+    };
+    linkClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    exact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    target: {
+        type: PropType<AnchorHTMLAttributes["target"]>;
+        default: string;
+    };
+    linkClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    exact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    target: string | undefined;
+    disabled: boolean;
+    href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+    active: boolean;
+    linkClass: string | unknown[] | Record<string, any>;
+    exact: 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/NavItemDropdown.spec.d.ts

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

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

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

@@ -23,74 +23,58 @@
   </li>
 </template>
 
-<script lang="ts" setup>
-import type { PropType, VNode } from 'vue-demi'
-import Dropdown from '../dropdown/Dropdown.vue'
-import type { Placement } from '@floating-ui/core'
-import type {
-  SizeVariant,
-  StyleVariant,
-} from '../button'
-import { useVModel } from '../input'
-import type { MenuSizeVariant } from '../dropdown'
-
+<script setup>
+import Dropdown from "../dropdown/Dropdown.vue";
+import { useVModel } from "../input";
 const props = defineProps({
   modelValue: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   text: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   icon: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
+    type: String,
+    default: "md"
   },
   variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'ghost',
+    type: String,
+    default: "ghost"
   },
   noCaret: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   placement: {
-    type   : String as PropType<Placement>,
-    default: 'bottom-end',
+    type: String,
+    default: "bottom-end"
   },
   menuClass: {
     type: [
       String,
       Array,
-      Object,
+      Object
     ],
-    default: undefined,
+    default: void 0
   },
   menuSize: {
-    type   : String as PropType<MenuSizeVariant>,
-    default: 'sm',
+    type: String,
+    default: "sm"
   },
   divider: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-defineEmits<{
-  'update:modelValue': [boolean],
-}>()
-
-const model = useVModel(props)
-
-defineSlots<{
-  'default'(): VNode[],
-  'button-content'(): VNode[],
-}>()
+    type: Boolean,
+    default: false
+  }
+});
+defineEmits(["update:modelValue"]);
+const model = useVModel(props);
+defineSlots();
 </script>
 
 <style lang="postcss">