@privyid/persona 1.1.2 → 1.2.0

package/dist/components/table-static/index.spec.mjs

@@ -0,0 +1,267 @@
+import { nextTick, ref } from "vue-demi";
+import { useTableQuery } from "./index.mjs";
+describe("useTableQuery", () => {
+  it("should able to filter by object", async () => {
+    const list = ref([
+      {
+        id: 1,
+        name: "Tarjono",
+        age: 20,
+        gender: "male"
+      },
+      {
+        id: 2,
+        name: "Yuki",
+        age: 25,
+        gender: "female"
+      },
+      {
+        id: 3,
+        name: "Agus",
+        age: 33,
+        gender: "male"
+      },
+      {
+        id: 4,
+        name: "Tumijah",
+        age: 70,
+        gender: "female"
+      },
+      {
+        id: 5,
+        name: "Admojo",
+        age: 55,
+        gender: "male"
+      }
+    ]);
+    const filterBy = ref({ gender: "male" });
+    const items = useTableQuery(list, { filterBy });
+    expect(items.value).toStrictEqual([
+      {
+        id: 1,
+        name: "Tarjono",
+        age: 20,
+        gender: "male"
+      },
+      {
+        id: 3,
+        name: "Agus",
+        age: 33,
+        gender: "male"
+      },
+      {
+        id: 5,
+        name: "Admojo",
+        age: 55,
+        gender: "male"
+      }
+    ]);
+    filterBy.value.gender = "female";
+    await nextTick();
+    expect(items.value).toStrictEqual([
+      {
+        id: 2,
+        name: "Yuki",
+        age: 25,
+        gender: "female"
+      },
+      {
+        id: 4,
+        name: "Tumijah",
+        age: 70,
+        gender: "female"
+      }
+    ]);
+  });
+  it("should able to sorting list", async () => {
+    const list = ref([
+      {
+        id: 1,
+        name: "Tarjono",
+        age: 20,
+        gender: "male"
+      },
+      {
+        id: 2,
+        name: "Yuki",
+        age: 25,
+        gender: "female"
+      },
+      {
+        id: 3,
+        name: "Agus",
+        age: 33,
+        gender: "male"
+      },
+      {
+        id: 4,
+        name: "Tumijah",
+        age: 70,
+        gender: "female"
+      },
+      {
+        id: 5,
+        name: "Admojo",
+        age: 55,
+        gender: "male"
+      }
+    ]);
+    const sortBy = ref({ name: "asc" });
+    const items = useTableQuery(list, { sortBy });
+    expect(items.value).toStrictEqual([
+      {
+        id: 5,
+        name: "Admojo",
+        age: 55,
+        gender: "male"
+      },
+      {
+        id: 3,
+        name: "Agus",
+        age: 33,
+        gender: "male"
+      },
+      {
+        id: 1,
+        name: "Tarjono",
+        age: 20,
+        gender: "male"
+      },
+      {
+        id: 4,
+        name: "Tumijah",
+        age: 70,
+        gender: "female"
+      },
+      {
+        id: 2,
+        name: "Yuki",
+        age: 25,
+        gender: "female"
+      }
+    ]);
+    sortBy.value = { age: "desc" };
+    await nextTick();
+    expect(items.value).toStrictEqual([
+      {
+        id: 4,
+        name: "Tumijah",
+        age: 70,
+        gender: "female"
+      },
+      {
+        id: 5,
+        name: "Admojo",
+        age: 55,
+        gender: "male"
+      },
+      {
+        id: 3,
+        name: "Agus",
+        age: 33,
+        gender: "male"
+      },
+      {
+        id: 2,
+        name: "Yuki",
+        age: 25,
+        gender: "female"
+      },
+      {
+        id: 1,
+        name: "Tarjono",
+        age: 20,
+        gender: "male"
+      }
+    ]);
+  });
+  it("should able to limit list", async () => {
+    const list = ref([
+      {
+        id: 1,
+        name: "Tarjono",
+        age: 20,
+        gender: "male"
+      },
+      {
+        id: 2,
+        name: "Yuki",
+        age: 25,
+        gender: "female"
+      },
+      {
+        id: 3,
+        name: "Agus",
+        age: 33,
+        gender: "male"
+      },
+      {
+        id: 4,
+        name: "Tumijah",
+        age: 70,
+        gender: "female"
+      },
+      {
+        id: 5,
+        name: "Admojo",
+        age: 55,
+        gender: "male"
+      }
+    ]);
+    const perPage = ref(3);
+    const page = ref(1);
+    const items = useTableQuery(list, { page, perPage });
+    expect(items.value).toStrictEqual([
+      {
+        id: 1,
+        name: "Tarjono",
+        age: 20,
+        gender: "male"
+      },
+      {
+        id: 2,
+        name: "Yuki",
+        age: 25,
+        gender: "female"
+      },
+      {
+        id: 3,
+        name: "Agus",
+        age: 33,
+        gender: "male"
+      }
+    ]);
+    perPage.value = 2;
+    await nextTick();
+    expect(items.value).toStrictEqual([
+      {
+        id: 1,
+        name: "Tarjono",
+        age: 20,
+        gender: "male"
+      },
+      {
+        id: 2,
+        name: "Yuki",
+        age: 25,
+        gender: "female"
+      }
+    ]);
+    page.value = 2;
+    await nextTick();
+    expect(items.value).toStrictEqual([
+      {
+        id: 3,
+        name: "Agus",
+        age: 33,
+        gender: "male"
+      },
+      {
+        id: 4,
+        name: "Tumijah",
+        age: 70,
+        gender: "female"
+      }
+    ]);
+  });
+});

package/dist/components/tabs/Tab.spec.d.ts

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

package/dist/components/tabs/Tab.spec.mjs

@@ -0,0 +1,54 @@
+import { render } from "@testing-library/vue";
+import pTabs from "./Tabs.vue";
+import pTab from "./Tab.vue";
+import { delay } from "nanodelay";
+import IconEdit from "@privyid/persona-icon/vue/edit/20.vue";
+it("should rendered properly without any props", () => {
+  const screen = render({
+    components: { pTabs, pTab },
+    template: `
+      <p-tabs>
+        <p-tab title="To Sign">To Sign Content</p-tab>
+      </p-tabs>
+    `
+  });
+  const tabPanel = screen.queryByTestId("tab-panel");
+  const text = screen.queryByText("To Sign Content");
+  expect(tabPanel).toBeInTheDocument();
+  expect(tabPanel).toHaveClass("tab__panel");
+  expect(text).toBeInTheDocument();
+});
+it("should be `disabled` by setting the `disabled` prop", () => {
+  const screen = render({
+    components: { pTabs, pTab },
+    template: `
+      <p-tabs>
+        <p-tab title="To Sign" disabled>To Sign Content</p-tab>
+      </p-tabs>
+    `
+  });
+  const tabContent = screen.queryByTestId("tab-content");
+  expect(tabContent).not.toBeVisible();
+});
+it("should have style no-label when Tab navigation is just an icon", async () => {
+  const screen = render({
+    components: {
+      pTabs,
+      pTab,
+      IconEdit
+    },
+    template: `
+      <p-tabs>
+        <p-tab>
+          <template #icon>
+            <IconEdit />
+          </template>
+        </p-tab>
+      </p-tabs>
+    `
+  });
+  await delay(2);
+  const tab = screen.queryByTestId("tab");
+  expect(tab).toBeInTheDocument();
+  expect(tab).toHaveClass("nav__item--no-label");
+});

package/dist/components/tabs/Tab.vue

@@ -10,25 +10,17 @@
   </section>
 </template>
 
-<script lang="ts" setup>
-import type { VNode } from 'vue-demi'
-
+<script setup>
 defineProps({
   title: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   disabled: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-defineOptions({ name: 'Tab' })
-
-defineSlots<{
-  'title'(): VNode[],
-  'icon'(): VNode[],
-  'default'(): VNode[],
-}>()
+    type: Boolean,
+    default: false
+  }
+});
+defineOptions({ name: "Tab" });
+defineSlots();
 </script>

package/dist/components/tabs/Tab.vue.d.ts

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

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

package/dist/components/tabs/TabContent.spec.mjs

@@ -0,0 +1,52 @@
+import { KeepAlive } from "../steps/__mocks__/keep-alive.mjs";
+import { render } from "@testing-library/vue";
+import TabContent from "./TabContent.vue";
+import Tab from "./Tab.vue";
+import {
+  nextTick,
+  ref
+} from "vue-demi";
+import { vi } from "vitest";
+vi.mock("vue-demi", async () => {
+  const vueDemi = await vi.importActual("vue-demi");
+  return {
+    ...vueDemi,
+    KeepAlive
+  };
+});
+it("should showing active content only", async () => {
+  const active = ref(1);
+  const screen = render({
+    components: { TabContent, Tab },
+    template: `
+      <TabContent :active="active">
+        <Tab>1</Tab>
+        <Tab>2</Tab>
+      </TabContent>
+    `,
+    setup() {
+      return { active };
+    }
+  });
+  let tab = screen.queryByTestId("tab-panel");
+  expect(tab).toHaveTextContent("2");
+  active.value = 0;
+  await nextTick();
+  tab = screen.queryByTestId("tab-panel");
+  expect(tab).toHaveTextContent("1");
+});
+it("should keeping alive component if prop keep-alive is provided", async () => {
+  render({
+    components: { TabContent, Tab },
+    template: `
+      <TabContent :active="0" keep-alive>
+        <Tab>1</Tab>
+        <Tab>2</Tab>
+      </TabContent>
+    `,
+    setup() {
+      return {};
+    }
+  });
+  expect(KeepAlive).toBeCalled();
+});

package/dist/components/tabs/TabContent.vue.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
     active: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         required: true;
     };
     keepAlive: {
@@ -15,7 +15,7 @@ declare const _default: import("vue-demi").DefineComponent<import("vue-demi").Ex
     [key: string]: any;
 }>, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
     active: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         required: true;
     };
     keepAlive: {

package/dist/components/tabs/Tabs.spec.d.ts

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

package/dist/components/tabs/Tabs.spec.mjs

@@ -0,0 +1,148 @@
+import { fireEvent, render } from "@testing-library/vue";
+import pTabs from "./Tabs.vue";
+import pTab from "./Tab.vue";
+it("should rendered properly without any props", () => {
+  const screen = render({
+    components: { pTabs },
+    template: `
+      <p-tabs>
+      </p-tabs>
+    `
+  });
+  const tabs = screen.queryByTestId("tabs");
+  expect(tabs).toBeInTheDocument();
+  expect(tabs).toHaveClass("tabs");
+});
+it("should have style `fill` by setting the `fill` prop", () => {
+  const screen = render({
+    components: { pTabs },
+    template: `
+      <p-tabs fill>
+      </p-tabs>
+    `
+  });
+  const tabs = screen.queryByTestId("tabs-nav");
+  expect(tabs).toBeInTheDocument();
+  expect(tabs).toHaveClass("nav", "nav--fill");
+});
+it("should have style `justified` by setting the `justified` prop", () => {
+  const screen = render({
+    components: { pTabs },
+    template: `
+      <p-tabs justified>
+      </p-tabs>
+    `
+  });
+  const tabs = screen.queryByTestId("tabs-nav");
+  expect(tabs).toBeInTheDocument();
+  expect(tabs).toHaveClass("nav", "nav--justified");
+});
+it("should have style `vertical` by setting the `vertical` prop", () => {
+  const screen = render({
+    components: { pTabs },
+    template: `
+      <p-tabs vertical>
+      </p-tabs>
+    `
+  });
+  const tabs = screen.queryByTestId("tabs");
+  const nav = screen.queryByTestId("tabs-nav");
+  expect(tabs).toBeInTheDocument();
+  expect(tabs).toHaveClass("tabs", "tabs--vertical-align-left");
+  expect(nav).toBeInTheDocument();
+  expect(nav).toHaveClass("nav", "nav--vertical", "nav--align-left");
+});
+it("should have style `pills` if variant props set to `pills`", () => {
+  const screen = render({
+    components: { pTabs },
+    template: `
+      <p-tabs variant="pills">
+      </p-tabs>
+    `
+  });
+  const tabs = screen.queryByTestId("tabs-nav");
+  expect(tabs).toBeInTheDocument();
+  expect(tabs).toHaveClass("nav--pills");
+  expect(tabs).not.toHaveClass("nav--tabs");
+});
+it("should be able to change alignment via props `align`", () => {
+  const screen = render({
+    components: { pTabs },
+    template: `
+      <p-tabs align="center">
+      </p-tabs>
+    `
+  });
+  const tabs = screen.queryByTestId("tabs-nav");
+  expect(tabs).toBeInTheDocument();
+  expect(tabs).toHaveClass("nav", "nav--tabs", "nav--align-center");
+});
+it("should be able to change vertical tabs alignment via props `align`", () => {
+  const screen = render({
+    components: { pTabs },
+    template: `
+      <p-tabs align="right" vertical>
+      </p-tabs>
+    `
+  });
+  const tabs = screen.queryByTestId("tabs");
+  expect(tabs).toBeInTheDocument();
+  expect(tabs).toHaveClass("tabs", "tabs--vertical-align-right");
+});
+it("should be able to add nav wrapper class title via props `nav-wrapper-class`", () => {
+  const screen = render({
+    components: { pTabs },
+    template: `
+      <p-tabs nav-wrapper-class="w-64">
+      </p-tabs>
+    `
+  });
+  const tabsNav = screen.queryByTestId("tabs-nav-wrapper");
+  expect(tabsNav).toBeInTheDocument();
+  expect(tabsNav).toHaveClass("tabs__nav", "w-64");
+});
+it("should active when tab (except disable) is clicked", async () => {
+  const screen = render({
+    components: { pTabs, pTab },
+    template: `
+    <p-tabs>
+      <p-tab title="Home">Home page content</p-tab>
+      <p-tab title="Profile">Profile page content</p-tab>
+      <p-tab title="Setting" disabled>Setting page content</p-tab>
+    </p-tabs>
+    `
+  });
+  const tabs = screen.queryByTestId("tabs");
+  let tab = screen.queryAllByTestId("tab");
+  expect(tabs).toBeInTheDocument();
+  expect(tab.at(0)).toHaveClass("nav__item", "nav__item--active");
+  await fireEvent.click(tab.at(1));
+  tab = screen.queryAllByTestId("tab");
+  expect(tab.at(1)).toHaveClass("nav__item--active");
+  expect(tab.at(0)).not.toHaveClass("nav__item--active");
+});
+it("should work properly with v-for", async () => {
+  const screen = render({
+    components: { pTabs, pTab },
+    template: `
+      <p-tabs vertical>
+        <template v-for="i in 3">
+          <p-tab :title="i.toString()">Home page content {{ i }}</p-tab>
+        </template>
+      </p-tabs>
+    `
+  });
+  const tabs = screen.queryByTestId("tabs");
+  let tab = screen.queryAllByTestId("tab");
+  expect(tabs).toBeInTheDocument();
+  expect(tab).toHaveLength(3);
+  expect(tab.at(0)).toHaveClass("nav__item", "nav__item--active");
+  await fireEvent.click(tab.at(1));
+  tab = screen.queryAllByTestId("tab");
+  expect(tab.at(1)).toHaveClass("nav__item--active");
+  expect(tab.at(0)).not.toHaveClass("nav__item--active");
+  await fireEvent.click(tab.at(0));
+  tab = screen.queryAllByTestId("tab");
+  expect(tab.at(0)).toHaveClass("nav__item--active");
+  expect(tab.at(1)).not.toHaveClass("nav__item--active");
+});