@privyid/persona 1.1.2 → 1.2.0

package/dist/components/sidebar-menu/SidebarMenu.spec.d.ts

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

package/dist/components/sidebar-menu/SidebarMenu.spec.mjs

@@ -0,0 +1,284 @@
+import { render, fireEvent } from "@testing-library/vue";
+import { delay } from "nanodelay";
+import SidebarMenu from "./SidebarMenu.vue";
+import { defineMenu } from "./index.mjs";
+import IconDashboard from "@privyid/persona-icon/vue/dashboard/20.vue";
+import IconDocument from "@privyid/persona-icon/vue/document-filled/20.vue";
+import IconUsers from "@privyid/persona-icon/vue/user-groups/20.vue";
+import IconSettings from "@privyid/persona-icon/vue/adjust/20.vue";
+const menus = defineMenu([
+  {
+    items: [
+      {
+        name: "dashboard",
+        label: "Dashboard",
+        url: "/",
+        icon: IconDashboard
+      },
+      {
+        name: "document",
+        label: "Documents",
+        url: "/",
+        icon: IconDocument,
+        collapsible: true,
+        submenu: [
+          {
+            name: "need-action",
+            label: "Need Action",
+            url: "/"
+          },
+          {
+            name: "in-progress",
+            label: "In Progress",
+            url: "/"
+          },
+          {
+            name: "others",
+            label: "Others",
+            url: "/"
+          }
+        ]
+      },
+      {
+        name: "contact",
+        label: "Contacts",
+        url: "/",
+        icon: IconUsers
+      }
+    ]
+  },
+  {
+    condensed: true,
+    title: "Quick Jump",
+    items: [
+      {
+        name: "rejects",
+        label: "Rejects",
+        url: "/"
+      },
+      {
+        name: "archives",
+        label: "Archives",
+        url: "/"
+      }
+    ]
+  },
+  {
+    bottom: true,
+    items: [
+      {
+        name: "settings",
+        label: "Settings",
+        icon: IconSettings,
+        url: "/"
+      },
+      {
+        name: "english",
+        label: "English",
+        url: "/",
+        icon: "./assets/images/img-flag.svg"
+      }
+    ]
+  }
+]);
+const toggleMenu = defineMenu([
+  {
+    maxLength: 2,
+    items: [
+      {
+        name: "home",
+        label: "Home",
+        url: "/",
+        icon: IconDashboard
+      },
+      {
+        name: "document",
+        label: "Document",
+        url: "/",
+        icon: IconDocument,
+        collapsible: true,
+        submenu: [
+          {
+            name: "need-action",
+            label: "Need Action",
+            url: "/"
+          },
+          {
+            name: "in-progress",
+            label: "In Progress",
+            url: "/"
+          }
+        ]
+      },
+      {
+        name: "setting",
+        label: "Setting",
+        url: "/",
+        icon: IconSettings
+      },
+      {
+        name: "user",
+        label: "User",
+        icon: IconUsers,
+        url: "/",
+        collapsible: true,
+        submenu: [
+          {
+            name: "need-action",
+            label: "Need Action",
+            url: "/"
+          }
+        ]
+      }
+    ]
+  }
+]);
+it("should rendered properly without any props", () => {
+  const screen = render({
+    components: { SidebarMenu },
+    template: `
+      <SidebarMenu />
+    `
+  });
+  const sidebar = screen.queryByTestId("sidebar-menu");
+  expect(sidebar).toBeInTheDocument();
+  expect(sidebar).toHaveClass("sidebar");
+});
+it("should be able to render menus", () => {
+  const screen = render({
+    components: { SidebarMenu },
+    template: '<SidebarMenu fixed :menus="menus" />',
+    setup() {
+      return { menus };
+    }
+  });
+  const sidebar = screen.getByTestId("sidebar-menu");
+  const names = screen.getAllByText("Dashboard");
+  expect(sidebar).toBeInTheDocument();
+  expect(sidebar).toHaveClass("sidebar--wide");
+  expect(names).toHaveLength(1);
+});
+it("should be able to change type via prop `type`", () => {
+  const screen = render({
+    components: { SidebarMenu },
+    template: `
+      <SidebarMenu type="narrow">
+      </SidebarMenu>
+    `
+  });
+  const sidebar = screen.queryByTestId("sidebar-menu");
+  expect(sidebar).toBeInTheDocument();
+  expect(sidebar).toHaveClass("sidebar--narrow", "sidebar--pills");
+});
+it("should be able to set alignment via prop `align`", () => {
+  const screen = render({
+    components: { SidebarMenu },
+    template: `
+      <SidebarMenu align="right">
+      </SidebarMenu>
+    `
+  });
+  const sidebar = screen.queryByTestId("sidebar-menu");
+  expect(sidebar).toBeInTheDocument();
+  expect(sidebar).toHaveClass("sidebar--right");
+});
+it("should be able to make sidebar fixed via prop `fixed`", () => {
+  const screen = render({
+    components: { SidebarMenu },
+    template: `
+      <SidebarMenu fixed>
+      </SidebarMenu>
+    `
+  });
+  const sidebar = screen.queryByTestId("sidebar-menu");
+  expect(sidebar).toBeInTheDocument();
+  expect(sidebar).toHaveClass("sidebar--fixed");
+});
+it("should be able to make sidebar sticky via prop `sticky`", () => {
+  const screen = render({
+    components: { SidebarMenu },
+    template: `
+      <SidebarMenu sticky />
+    `
+  });
+  const sidebar = screen.queryByTestId("sidebar-menu");
+  expect(sidebar).toBeInTheDocument();
+  expect(sidebar).toHaveClass("sidebar", "sidebar--sticky");
+});
+it("should be able to make sidebar expand automatically via prop `toggleable`", () => {
+  const screen = render({
+    components: { SidebarMenu },
+    template: `
+      <SidebarMenu toggleable="md">
+      </SidebarMenu>
+    `
+  });
+  const sidebar = screen.queryByTestId("sidebar-menu");
+  expect(sidebar).toBeInTheDocument();
+  expect(sidebar).toHaveClass("sidebar--toggleable", "sidebar--toggleable-md");
+});
+it("should be able limit the displayed menu in the sidebar with `maxLength`", async () => {
+  const screen = render({
+    components: { SidebarMenu },
+    template: `
+      <SidebarMenu :menus="toggleMenu" />
+    `,
+    setup() {
+      return { toggleMenu };
+    }
+  });
+  let toggle = screen.queryByTestId("sidebar-toggle");
+  const menu = screen.getAllByText("Home");
+  await delay(0);
+  expect(toggle).toBeInTheDocument();
+  expect(toggle).toHaveTextContent("More");
+  expect(menu).toHaveLength(1);
+  await fireEvent.click(toggle);
+  toggle = screen.queryByTestId("sidebar-toggle");
+  expect(toggle).toHaveTextContent("Less");
+});
+it("should able to add custom attribute using `attrs`", async () => {
+  const screen = render({
+    components: { SidebarMenu },
+    template: `
+      <SidebarMenu :menus="menus" />
+    `,
+    setup() {
+      return {
+        menus: defineMenu([
+          {
+            title: "Menu",
+            collapsible: true,
+            attrs: {
+              "data-testid": "level-1",
+              "class": "custom__class"
+            },
+            items: [
+              {
+                name: "menu-item",
+                label: "Menu Item",
+                url: "/",
+                attrs: { "data-testid": "level-2" },
+                submenu: [
+                  {
+                    name: "submenu",
+                    label: "Sub Menu",
+                    url: "/",
+                    attrs: { "data-testid": "level-3" }
+                  }
+                ]
+              }
+            ]
+          }
+        ])
+      };
+    }
+  });
+  const menu = screen.queryByTestId("level-1");
+  const menuItem = screen.queryByTestId("level-2");
+  const subMenu = screen.queryByTestId("level-3");
+  expect(menu).toBeInTheDocument();
+  expect(menuItem).toBeInTheDocument();
+  expect(subMenu).toBeInTheDocument();
+  expect(menu).toHaveClass("custom__class", "sidebar__title__collapsible");
+});

package/dist/components/sidebar-menu/SidebarMenu.vue

@@ -65,59 +65,48 @@
   </Sidebar>
 </template>
 
-<script lang="ts" setup>
-import type { PropType, VNode } from 'vue-demi'
-import Sidebar from '../sidebar/Sidebar.vue'
-import type { TypeVariant } from '../sidebar'
-import SidebarNav from '../sidebar/SidebarNav.vue'
-import type { Menu } from '.'
-import type { AlignVariant } from '../nav'
-import type { ToggleableVariant } from '../navbar'
-import NavCollapse from '../nav/NavCollapse.vue'
-import SidebarMenuItem from './SidebarMenuItem.vue'
-
+<script setup>
+import Sidebar from "../sidebar/Sidebar.vue";
+import SidebarNav from "../sidebar/SidebarNav.vue";
+import NavCollapse from "../nav/NavCollapse.vue";
+import SidebarMenuItem from "./SidebarMenuItem.vue";
 defineProps({
   menus: {
-    type   : Array as PropType<Menu[]>,
-    default: () => ([]),
+    type: Array,
+    default: () => []
   },
   fixed: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   sticky: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   type: {
-    type   : String as PropType<TypeVariant>,
-    default: 'wide',
+    type: String,
+    default: "wide"
   },
   align: {
-    type   : String as PropType<AlignVariant>,
-    default: 'left',
+    type: String,
+    default: "left"
   },
   toggleable: {
-    type   : String as PropType<ToggleableVariant>,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   length: {
-    type   : [Number, String],
-    default: undefined,
+    type: [Number, String],
+    default: void 0
   },
   showMoreText: {
-    type   : String,
-    default: 'More',
+    type: String,
+    default: "More"
   },
   showLessText: {
-    type   : String,
-    default: 'Less',
-  },
-})
-
-defineSlots<{
-  'prepend'(): VNode[],
-  'append'(): VNode[],
-  'bottom'(): VNode[],
-}>()
+    type: String,
+    default: "Less"
+  }
+});
+defineSlots();
 </script>

package/dist/components/sidebar-menu/SidebarMenu.vue.d.ts

@@ -0,0 +1,112 @@
+import type { PropType, VNode } from 'vue-demi';
+import type { TypeVariant } from '../sidebar';
+import type { Menu } from '.';
+import type { AlignVariant } from '../nav';
+import type { ToggleableVariant } from '../navbar';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        prepend(): VNode[];
+        append(): VNode[];
+        bottom(): VNode[];
+    }> & {
+        prepend(): VNode[];
+        append(): VNode[];
+        bottom(): VNode[];
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    menus: {
+        type: PropType<Menu[]>;
+        default: () => never[];
+    };
+    fixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignVariant>;
+        default: string;
+    };
+    toggleable: {
+        type: PropType<ToggleableVariant>;
+        default: undefined;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    showMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showLessText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    menus: {
+        type: PropType<Menu[]>;
+        default: () => never[];
+    };
+    fixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignVariant>;
+        default: string;
+    };
+    toggleable: {
+        type: PropType<ToggleableVariant>;
+        default: undefined;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    showMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showLessText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    type: TypeVariant;
+    length: string | number;
+    fixed: boolean;
+    toggleable: ToggleableVariant;
+    align: AlignVariant;
+    showMoreText: string;
+    showLessText: string;
+    menus: Menu[];
+    sticky: 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/sidebar-menu/SidebarMenuItem.vue

@@ -32,9 +32,9 @@
     :href="item.url"
     :exact="item.exact"
     :class="{
-      'nav__item--no-label': !item.label,
-      'nav__item--no-icon': !item.icon
-    }">
+  'nav__item--no-label': !item.label,
+  'nav__item--no-icon': !item.icon
+}">
     <template
       #icon>
       <template v-if="item.icon && typeof item.icon === 'string'">
@@ -50,21 +50,18 @@
   </NavItem>
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import type { Menu, MenuItem } from '.'
-import NavItem from '../nav/NavItem.vue'
-import NavSubItem from '../nav/NavSubItem.vue'
-import SidebarNav from '../sidebar/SidebarNav.vue'
-
+<script setup>
+import NavItem from "../nav/NavItem.vue";
+import NavSubItem from "../nav/NavSubItem.vue";
+import SidebarNav from "../sidebar/SidebarNav.vue";
 defineProps({
   item: {
-    type   : Object as PropType<MenuItem>,
-    default: () => ({} as MenuItem),
+    type: Object,
+    default: () => ({})
   },
   menu: {
-    type   : Object as PropType<Menu>,
-    default: () => ({} as Menu),
-  },
-})
+    type: Object,
+    default: () => ({})
+  }
+});
 </script>

package/dist/components/sidebar-menu/SidebarMenuItem.vue.d.ts

@@ -0,0 +1,25 @@
+import type { PropType } from 'vue-demi';
+import type { Menu, MenuItem } from '.';
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    item: {
+        type: PropType<MenuItem>;
+        default: () => MenuItem;
+    };
+    menu: {
+        type: PropType<Menu>;
+        default: () => Menu;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    item: {
+        type: PropType<MenuItem>;
+        default: () => MenuItem;
+    };
+    menu: {
+        type: PropType<Menu>;
+        default: () => Menu;
+    };
+}>> & Readonly<{}>, {
+    menu: Menu;
+    item: MenuItem;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;