@privyid/persona 1.2.0 → 1.2.1

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

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

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

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

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

@@ -1,153 +0,0 @@
-<template>
-  <Transition
-    :name="transition"
-    mode="out-in">
-    <div
-      :key="tree._level"
-      data-testid="dropdown-subitem"
-      class="dropdown__subitem">
-      <template
-        v-if="canBack">
-        <DropdownItem
-          key="btn-back"
-          data-testid="dropdown-back"
-          class="dropdown__subitem__btn dropdown__subitem__btn--back"
-          @click.prevent="back()">
-          <slot name="button-back">
-            <IconBack class="dropdown__subitem__next" />
-            <div class="dropdown__group-content" />
-          </slot>
-        </DropdownItem>
-      </template>
-
-      <template v-if="!isRoot">
-        <DropdownItem
-          key="btn-next"
-          class="dropdown__subitem__btn"
-          @click.prevent="handleOnClick">
-          <div class="dropdown__subitem__content">
-            <slot
-              name="button-content"
-              :next="next"
-              :back="back">
-              {{ text }}
-            </slot>
-          </div>
-          <IconNext
-            v-if="!noCaret"
-            data-testid="dropdown-subitem-next"
-            class="dropdown__subitem__next" />
-        </DropdownItem>
-      </template>
-
-      <template v-else>
-        <component
-          :is="view" />
-      </template>
-    </div>
-  </Transition>
-</template>
-
-<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 { DROPDOWN_TREE } from ".";
-defineProps({
-  text: {
-    type: String,
-    default: ""
-  },
-  noCaret: {
-    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 === void 0;
-});
-const tree = context?.tree ?? shallowRef({
-  _level: 0,
-  slots
-});
-const next = () => {
-  tree.value = {
-    _level: tree.value._level + 1,
-    prev: tree.value,
-    slots
-  };
-};
-const back = () => {
-  if (tree.value.prev)
-    tree.value = tree.value.prev;
-};
-const view = computed(() => {
-  return tree.value.slots.default;
-});
-const canBack = computed(() => {
-  return Boolean(isRoot.value && tree.value.prev);
-});
-watch(tree, (value, oldValue) => {
-  transition.value = value._level > oldValue._level ? "slide-left" : "slide-right";
-});
-if (isRoot.value) {
-  provide(DROPDOWN_TREE, {
-    tree,
-    next,
-    back
-  });
-}
-function reset() {
-  if (isRoot.value) {
-    tree.value = {
-      prev: void 0,
-      _level: 0,
-      slots
-    };
-  }
-}
-function handleOnClick() {
-  const event = new MouseEvent("click");
-  emit("click", event);
-  if (!event.defaultPrevented)
-    next();
-}
-defineExpose({
-  reset,
-  next,
-  back
-});
-</script>
-
-<style lang="postcss">
-.dropdown__subitem {
-  &__btn {
-    @apply flex items-center space-x-1;
-
-    &--back {
-      @apply shrink-0;
-    }
-  }
-
-  &__content {
-    @apply grow;
-  }
-
-  &__next,
-  &__back {
-    @apply shrink-0;
-  }
-}
-</style>

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

@@ -1,58 +0,0 @@
-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.d.ts

@@ -1,12 +0,0 @@
-import type { InjectionKey, ShallowRef, Slots } from 'vue-demi';
-export interface DropdownNode {
-    _level: number;
-    prev?: DropdownNode;
-    slots: Slots;
-}
-export interface DropdownContext {
-    tree: ShallowRef<DropdownNode>;
-    next: () => void;
-    back: () => void;
-}
-export declare const DROPDOWN_TREE: InjectionKey<DropdownContext>;

package/dist/components/dropdown-subitem/index.md

@@ -1,181 +0,0 @@
----
-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/dropdown-subitem/index.mjs

@@ -1 +0,0 @@
-export const DROPDOWN_TREE = Symbol("DropdownTree");

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

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