@privyid/persona 1.1.2 → 1.2.0

package/dist/components/dropdown/utils/use-focus.spec.mjs

@@ -0,0 +1,54 @@
+import { queryByTestId } from "@testing-library/dom";
+import { useFocus } from "./use-focus.mjs";
+import { shallowRef } from "vue-demi";
+import { vi } from "vitest";
+vi.mock("tabbable", () => {
+  return {
+    focusable(target) {
+      return target.children;
+    }
+  };
+});
+it("should be able travel focus on elements", () => {
+  const div = document.createElement("div");
+  div.innerHTML = `
+    <button data-testid="1">A</button>
+    <button data-testid="2">B</button>
+    <button data-testid="3">C</button>
+  `;
+  document.body.append(div);
+  const target = shallowRef(div);
+  const { next, prev } = useFocus(target);
+  const itemA = queryByTestId(div, "1");
+  const itemB = queryByTestId(div, "2");
+  next();
+  expect(itemA).toHaveFocus();
+  expect(itemB).not.toHaveFocus();
+  next();
+  expect(itemA).not.toHaveFocus();
+  expect(itemB).toHaveFocus();
+  prev();
+  expect(itemA).toHaveFocus();
+  expect(itemB).not.toHaveFocus();
+});
+it("should stop focus on last item if loop set to false", () => {
+  const div = document.createElement("div");
+  div.innerHTML = `
+    <button data-testid="1">A</button>
+    <button data-testid="2">B</button>
+  `;
+  document.body.append(div);
+  const target = shallowRef(div);
+  const { next } = useFocus(target, false);
+  const itemA = queryByTestId(div, "1");
+  const itemB = queryByTestId(div, "2");
+  next();
+  expect(itemA).toHaveFocus();
+  expect(itemB).not.toHaveFocus();
+  next();
+  expect(itemA).not.toHaveFocus();
+  expect(itemB).toHaveFocus();
+  next();
+  expect(itemA).not.toHaveFocus();
+  expect(itemB).toHaveFocus();
+});

package/dist/components/dropdown-subitem/DropdownSubitem.spec.d.ts

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

package/dist/components/dropdown-subitem/DropdownSubitem.spec.mjs

@@ -0,0 +1,114 @@
+import { fireEvent, render } from "@testing-library/vue";
+import DropdownSubitem from "./DropdownSubitem.vue";
+import DropdownItem from "../dropdown/DropdownItem.vue";
+it("should be able to render child", () => {
+  const screen = render({
+    components: { DropdownSubitem, DropdownItem },
+    template: `
+      <DropdownSubitem>
+        <DropdownItem>Item 1</DropdownItem>
+        <DropdownItem>Item 2</DropdownItem>
+      </DropdownSubitem>
+    `
+  });
+  const dropdown = screen.queryByTestId("dropdown-subitem");
+  const item1 = screen.queryByText("Item 1");
+  const item2 = screen.queryByText("Item 2");
+  expect(dropdown).toBeInTheDocument();
+  expect(item1).toBeInTheDocument();
+  expect(item2).toBeInTheDocument();
+});
+it("should able to render subitem", async () => {
+  const screen = render({
+    components: { DropdownSubitem, DropdownItem },
+    template: `
+      <DropdownSubitem>
+        <DropdownItem>Item 1</DropdownItem>
+        <DropdownItem>Item 2</DropdownItem>
+
+        <DropdownSubitem text="Subitem">
+          <DropdownItem>Item 3</DropdownItem>
+          <DropdownItem>Item 4</DropdownItem>
+        </DropdownSubitem>
+      </DropdownSubitem>
+    `
+  });
+  const subitem = screen.queryByText("Subitem");
+  expect(subitem).toBeInTheDocument();
+  await fireEvent.click(subitem);
+  const item1 = screen.queryByText("Item 1");
+  const item2 = screen.queryByText("Item 2");
+  const item3 = screen.queryByText("Item 3");
+  const item4 = screen.queryByText("Item 4");
+  expect(item3).toBeInTheDocument();
+  expect(item4).toBeInTheDocument();
+  expect(item1).not.toBeInTheDocument();
+  expect(item2).not.toBeInTheDocument();
+});
+it("should able to back main menu after click sub menu", async () => {
+  const screen = render({
+    components: { DropdownSubitem, DropdownItem },
+    template: `
+      <DropdownSubitem>
+        <DropdownItem>Item 1</DropdownItem>
+        <DropdownItem>Item 2</DropdownItem>
+
+        <DropdownSubitem text="Subitem">
+          <DropdownItem>Item 3</DropdownItem>
+          <DropdownItem>Item 4</DropdownItem>
+        </DropdownSubitem>
+      </DropdownSubitem>
+    `
+  });
+  const subitem = screen.queryByText("Subitem");
+  expect(subitem).toBeInTheDocument();
+  await fireEvent.click(subitem);
+  const item3 = screen.queryByText("Item 3");
+  const item4 = screen.queryByText("Item 4");
+  const back = screen.queryByTestId("dropdown-back");
+  expect(back).toBeInTheDocument();
+  expect(item3).toBeInTheDocument();
+  expect(item4).toBeInTheDocument();
+  await fireEvent.click(back);
+  const item1 = screen.queryByText("Item 1");
+  const item2 = screen.queryByText("Item 2");
+  expect(item1).toBeInTheDocument();
+  expect(item2).toBeInTheDocument();
+});
+it("should able to modify button content via slot `button-content`", async () => {
+  const screen = render({
+    components: { DropdownSubitem, DropdownItem },
+    template: `
+      <DropdownSubitem>
+        <DropdownItem>Item 1</DropdownItem>
+        <DropdownItem>Item 2</DropdownItem>
+
+        <DropdownSubitem>
+          <template #button-content>
+            <span data-testid="custom-button">
+              Coba
+            </span>
+          </template>
+          <DropdownItem>Item 3</DropdownItem>
+          <DropdownItem>Item 4</DropdownItem>
+        </DropdownSubitem>
+      </DropdownSubitem>
+    `
+  });
+  const subitem = screen.queryByTestId("custom-button");
+  await fireEvent.click(subitem);
+  const item3 = screen.queryByText("Item 3");
+  const item4 = screen.queryByText("Item 4");
+  const back = screen.queryByTestId("dropdown-back");
+  expect(back).toBeInTheDocument();
+  expect(item3).toBeInTheDocument();
+  expect(item4).toBeInTheDocument();
+});
+it("should caret icon if `no-caret` is provided", () => {
+  const screen = render({
+    components: { DropdownSubitem },
+    template: "<DropdownSubitem />"
+  });
+  const caret = screen.queryByTestId("dropdown-subitem-next");
+  expect(caret).not.toBeInTheDocument();
+});

package/dist/components/dropdown-subitem/DropdownSubitem.vue

@@ -48,116 +48,87 @@
   </Transition>
 </template>
 
-<script lang="ts" setup>
-import DropdownItem from '../dropdown/DropdownItem.vue'
-import IconNext from '@privyid/persona-icon/vue/chevron-right/16.vue'
-import IconBack from '@privyid/persona-icon/vue/arrow-left/16.vue'
-import type { VNode } from 'vue-demi'
+<script setup>
+import DropdownItem from "../dropdown/DropdownItem.vue";
+import IconNext from "@privyid/persona-icon/vue/chevron-right/16.vue";
+import IconBack from "@privyid/persona-icon/vue/arrow-left/16.vue";
 import {
   inject,
   provide,
   ref,
   shallowRef,
   computed,
-  watch,
-} from 'vue-demi'
-import type { DropdownContext } from '.'
-import { DROPDOWN_TREE } from '.'
-
+  watch
+} from "vue-demi";
+import { DROPDOWN_TREE } from ".";
 defineProps({
   text: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   noCaret: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const slots = defineSlots<{
-  'button-back'(): VNode[],
-  'button-content'(props: {
-    next: () => void,
-    back: () => void,
-  }): VNode[],
-}>()
-
-const emit = defineEmits<{
-  'click': [MouseEvent],
-}>()
-
-const context    = inject(DROPDOWN_TREE, undefined, true)
-const transition = ref<'slide-left' | 'slide-right' | 'none'>('slide-left')
-
+    type: Boolean,
+    default: false
+  }
+});
+const slots = defineSlots();
+const emit = defineEmits(["click"]);
+const context = inject(DROPDOWN_TREE, void 0, true);
+const transition = ref("slide-left");
 const isRoot = computed(() => {
-  return context === undefined
-})
-
-const tree: DropdownContext['tree'] = context?.tree ?? shallowRef({
+  return context === void 0;
+});
+const tree = context?.tree ?? shallowRef({
   _level: 0,
-  slots : slots,
-})
-
-const next: DropdownContext['next'] = () => {
+  slots
+});
+const next = () => {
   tree.value = {
     _level: tree.value._level + 1,
-    prev  : tree.value,
-    slots : slots,
-  }
-}
-
-const back: DropdownContext['back'] = () => {
+    prev: tree.value,
+    slots
+  };
+};
+const back = () => {
   if (tree.value.prev)
-    tree.value = tree.value.prev
-}
-
+    tree.value = tree.value.prev;
+};
 const view = computed(() => {
-  return tree.value.slots.default
-})
-
+  return tree.value.slots.default;
+});
 const canBack = computed(() => {
-  return Boolean(isRoot.value && tree.value.prev)
-})
-
+  return Boolean(isRoot.value && tree.value.prev);
+});
 watch(tree, (value, oldValue) => {
-  transition.value = value._level > oldValue._level
-    ? 'slide-left'
-    : 'slide-right'
-})
-
+  transition.value = value._level > oldValue._level ? "slide-left" : "slide-right";
+});
 if (isRoot.value) {
   provide(DROPDOWN_TREE, {
     tree,
     next,
-    back,
-  })
+    back
+  });
 }
-
-function reset () {
+function reset() {
   if (isRoot.value) {
     tree.value = {
-      prev  : undefined,
+      prev: void 0,
       _level: 0,
-      slots : slots,
-    }
+      slots
+    };
   }
 }
-
-function handleOnClick () {
-  const event = new MouseEvent('click')
-
-  emit('click', event)
-
+function handleOnClick() {
+  const event = new MouseEvent("click");
+  emit("click", event);
   if (!event.defaultPrevented)
-    next()
+    next();
 }
-
 defineExpose({
   reset,
   next,
-  back,
-})
+  back
+});
 </script>
 
 <style lang="postcss">

package/dist/components/dropdown-subitem/DropdownSubitem.vue.d.ts

@@ -0,0 +1,58 @@
+import type { VNode } from 'vue-demi';
+declare function reset(): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        'button-back'(): VNode[];
+        'button-content'(props: {
+            next: () => void;
+            back: () => void;
+        }): VNode[];
+    }> & {
+        'button-back'(): VNode[];
+        'button-content'(props: {
+            next: () => void;
+            back: () => void;
+        }): VNode[];
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    reset: typeof reset;
+    next: () => void;
+    back: () => void;
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    click: (args_0: MouseEvent) => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onClick?: ((args_0: MouseEvent) => any) | undefined;
+}>, {
+    text: string;
+    noCaret: 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/dropdown-subitem/index.md

@@ -0,0 +1,181 @@
+---
+title: Dropdown Subitem · Components
+description: Sub-component of Dropdown for nesting dropdown item.
+---
+
+<script setup>
+  import Persona from '@privyid/persona-icon/vue/persona/20.vue'
+  import Badge from '../badge/Badge.vue'
+  import Input from "../input/Input.vue"
+  import pDropdown from "../dropdown/Dropdown.vue"
+  import pDropdownItem from "../dropdown/DropdownItem.vue"
+  import pDropdownSubitem from "./DropdownSubitem.vue"
+  import Banner from '../banner/Banner.vue'
+  import Checkbox from '../checkbox/Checkbox.vue'
+  import { ref } from "vue-demi"
+
+  const show = ref(false)
+</script>
+
+# Dropdown Subitem
+
+> Sub-component of [Dropdown](/components/dropdown/) for nesting dropdown item.
+
+## Usage
+
+### Simple Usage
+
+<preview>
+  <p-dropdown text="Fruit">
+    <p-dropdown-subitem text="Fruit A">
+      <p-dropdown-item>Apple</p-dropdown-item>
+      <p-dropdown-item>Avocado</p-dropdown-item>
+    </p-dropdown-subitem>
+    <p-dropdown-subitem text="Fruit B">
+      <p-dropdown-item>Banana</p-dropdown-item>
+      <p-dropdown-item>Blueberry</p-dropdown-item>
+    </p-dropdown-subitem>
+  </p-dropdown>
+</preview>
+
+```vue
+<template>
+  <p-dropdown text="Fruit">
+    <p-dropdown-subitem text="Fruit A">
+      <p-dropdown-item>Apple</p-dropdown-item>
+      <p-dropdown-item>Avocado</p-dropdown-item>
+    </p-dropdown-subitem>
+    <p-dropdown-subitem text="Fruit B">
+      <p-dropdown-item>Banana</p-dropdown-item>
+      <p-dropdown-item>Blueberry</p-dropdown-item>
+    </p-dropdown-subitem>
+  </p-dropdown>
+</template>
+```
+
+### Multi Level Subitem
+
+<preview>
+  <p-dropdown text="Multi Level">
+    <p-dropdown-subitem text="Level A" backText="Kembali">
+      <p-dropdown-item>Item A-1</p-dropdown-item>
+      <p-dropdown-item>Item A-2</p-dropdown-item>
+      <p-dropdown-subitem text="Level AA">
+        <p-dropdown-item>Item AA-1</p-dropdown-item>
+        <p-dropdown-item>Item AA-2</p-dropdown-item>
+      </p-dropdown-subitem>
+    </p-dropdown-subitem>
+  </p-dropdown>
+</preview>
+
+```vue
+<template>
+  <p-dropdown text="Multi Level">
+    <p-dropdown-subitem text="Level A">
+      <p-dropdown-item>Item A-1</p-dropdown-item>
+      <p-dropdown-item>Item A-2</p-dropdown-item>
+      <p-dropdown-subitem text="Level AA">
+        <p-dropdown-item>Item AA-1</p-dropdown-item>
+        <p-dropdown-item>Item AA-2</p-dropdown-item>
+      </p-dropdown-subitem>
+    </p-dropdown-subitem>
+  </p-dropdown>
+</template>
+```
+
+## Custom Button Content
+
+Similar to [Dropdown][dropdown], You can change button content via slot `button-content`
+
+<preview>
+  <p-dropdown text="Custom Content">
+    <p-dropdown-subitem>
+      <template #button-content>
+        <Persona class="inline-block" /> Fruit A
+      </template>
+      <p-dropdown-item>Apple</p-dropdown-item>
+      <p-dropdown-item>Avocado</p-dropdown-item>
+    </p-dropdown-subitem>
+    <p-dropdown-subitem text="Fruit B">
+      <p-dropdown-item>Banana</p-dropdown-item>
+      <p-dropdown-item>Blueberry</p-dropdown-item>
+    </p-dropdown-subitem>
+  </p-dropdown>
+</preview>
+
+```vue
+<template>
+  <p-dropdown text="Custom Content">
+    <p-dropdown-subitem>
+      <template #button-content>
+        <Persona class="inline-block" /> Fruit A
+      </template>
+      <p-dropdown-item>Apple</p-dropdown-item>
+      <p-dropdown-item>Avocado</p-dropdown-item>
+    </p-dropdown-subitem>
+    <p-dropdown-subitem text="Fruit B">
+      <p-dropdown-item>Banana</p-dropdown-item>
+      <p-dropdown-item>Blueberry</p-dropdown-item>
+    </p-dropdown-subitem>
+  </p-dropdown>
+</template>
+```
+
+## Hide Caret
+
+Similar with [Dropdown][dropdown], you can hide caret icon with `no-caret` props.
+
+<preview>
+  <p-dropdown text="Fruit">
+    <p-dropdown-subitem text="with Caret">
+      <p-dropdown-item>Apple</p-dropdown-item>
+      <p-dropdown-item>Avocado</p-dropdown-item>
+    </p-dropdown-subitem>
+    <p-dropdown-subitem text="without Caret" no-caret>
+      <p-dropdown-item>Banana</p-dropdown-item>
+      <p-dropdown-item>Blueberry</p-dropdown-item>
+    </p-dropdown-subitem>
+  </p-dropdown>
+</preview>
+
+```vue
+<template>
+  <p-dropdown text="Fruit">
+    <p-dropdown-subitem text="with Caret">
+      <p-dropdown-item>Apple</p-dropdown-item>
+      <p-dropdown-item>Avocado</p-dropdown-item>
+    </p-dropdown-subitem>
+    <p-dropdown-subitem text="without Caret" no-caret>
+      <p-dropdown-item>Banana</p-dropdown-item>
+      <p-dropdown-item>Blueberry</p-dropdown-item>
+    </p-dropdown-subitem>
+  </p-dropdown>
+</template>
+```
+
+## API
+
+### Props
+
+| Props      |   Type    | Default | Description     |
+|------------|:---------:|:-------:|-----------------|
+| `text`     | `String`  |   `-`   | Text content    |
+| `no-caret` | `Boolean` | `false` | Hide caret icon |
+
+### Slots
+
+| Name      | Description                |
+|-----------|----------------------------|
+| `default` | Content to place in button |
+
+### Events
+
+| Name    | Arguments               | Description                  |
+|---------|-------------------------|------------------------------|
+| `click` | Native DOM Event object | Event when button is clicked |
+
+## See Also
+
+- [Dropdown][dropdown]
+
+[dropdown]: /components/dropdown/index

package/dist/components/dropzone/Dropzone.spec.d.ts

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