@privyid/persona 1.2.0 → 1.2.1

package/dist/components/checkbox/index.md

@@ -1,389 +0,0 @@
----
-title: Checkbox · Components
-description: Base checkbox form
----
-
-<script setup>
-  import Banner from "../banner/Banner.vue"
-  import pCheckbox from "./Checkbox.vue"
-  import pCaption from "../caption/Caption.vue"
-  import pCard from "../card/Card.vue"
-  import IconBee from '@privyid/persona-icon/vue/persona/20.vue'
-  import { ref, computed } from "vue-demi"
-
-  const value    = ref(false)
-  const value2   = ref(false)
-  const modelA   = ref(false)
-  const modelB   = ref('disagree')
-  const selected = ref([])
-  const selected2= ref([])
-
-  const items  = ref(['apple', 'grape', 'orange'])
-  const result = ref(['apple'])
-
-  const selectAll = computed({
-    get () {
-      return result.value.length === items.value.length
-    },
-    set (value) {
-      if (selectAll.value !== value)
-        result.value = value ? [...items.value] : []
-    },
-  })
-
-  const indeterminate = computed(() => {
-    return result.value.length > 0
-      && result.value.length < items.value.length
-  })
-</script>
-
-# Checkbox
-
-> Base checkbox form
-
-## Usage
-
-### Simple Usage
-
-<preview>
-  <p-checkbox>Checklist Label</p-checkbox>
-</preview>
-
-```vue
-<template>
-  <p-checkbox>Checklist Label</p-checkbox>
-</template>
-```
-
-### With Subtext
-
-<preview>
-  <p-checkbox>
-    <div>Checklist Label</div>
-    <p-caption>Text</p-caption>
-  </p-checkbox>
-</preview>
-
-```vue
-<template>
-  <p-checkbox>
-    <div>Checklist Label</div>
-    <p-caption>Text</p-caption>
-  </p-checkbox>
-</template>
-```
-
-## Disabled State
-
-<preview>
-  <p-checkbox disabled>
-    Checkbox Label
-  </p-checkbox>
-</preview>
-
-```vue
-<template>
-  <p-checkbox disabled>
-    Checkbox Label
-  </p-checkbox>
-</template>
-```
-
-## Readonly State
-
-<preview>
-  <p-checkbox readonly>
-    Checkbox Label
-  </p-checkbox>
-</preview>
-
-```vue
-<template>
-  <p-checkbox readonly>
-    Checkbox Label
-  </p-checkbox>
-</template>
-```
-
-## Binding v-model
-
-<preview class="flex-col items-center">
-  <p-checkbox v-model="modelA">Checkbox Label</p-checkbox>
-</preview>
-
-**Result :**
-
-<pre><code>{{ modelA }}</code></pre>
-
-```vue
-<template>
-  <p-checkbox v-model="modelA">Text</p-checkbox>
-</template>
-```
-
-### Custom v-model value
-
-By default, value of toggle is always `Boolean`, but you can change it with `value` and `unchecked-value`.
-
-<preview class="flex-col items-center">
-  <p-checkbox v-model="modelB" value="agree" unchecked-value="disagree">
-    I agree with Term and Condition
-  </p-checkbox>
-</preview>
-
-**Result :**
-
-<pre><code>{{ modelB }}</code></pre>
-
-```vue
-<template>
-  <p-checkbox
-    v-model="model"
-    value="agree"
-    unchecked-value="disagree">
-    Active
-  </p-checkbox>
-</template>
-```
-
-### Array v-model
-
-If v-model **state** is an *array* it will append the value instead of replacing it.
-
-<Banner><strong>Warn!</strong> selected order is not guaranteed</Banner>
-
-<preview class="flex-col items-center">
-  <div class="flex flex-col space-y-3">
-    <p-checkbox v-model="selected" value="apple">Apple</p-checkbox>
-    <p-checkbox v-model="selected" value="grape">Grape</p-checkbox>
-    <p-checkbox v-model="selected" value="pineapple">Pineapple</p-checkbox>
-    <p-checkbox v-model="selected" :value="{ id: 1, name: 'Tarjono' }">Object</p-checkbox>
-    <p-checkbox v-model="selected" :value="['Item 1']">Array</p-checkbox>
-  </div>
-</preview>
-
-**Selected :**
-
-<pre class="whitespace-normal"><code>{{ selected }}</code></pre>
-
-```vue
-<template>
-  <div class="flex flex-col space-y-3">
-    <p-checkbox v-model="selected" value="apple">Apple</p-checkbox>
-    <p-checkbox v-model="selected" value="grape">Grape</p-checkbox>
-    <p-checkbox v-model="selected" value="pineapple">Pineapple</p-checkbox>
-    <p-checkbox v-model="selected" :value="{ id: 1, name: 'Tarjono' }">Object</p-checkbox>
-    <p-checkbox v-model="selected" :value="['Item 1']">Array</p-checkbox>
-  </div>
-</template>
-```
-
-## Indeterminate (3-state)
-
-Indeterminate is condition between `checked` and `unchecked`. It's usefull for case like: **selectAll** feature.
-
-<preview class="flex-col items-center">
-  <div class="flex flex-col space-y-3">
-    <p-checkbox
-      v-model="selectAll"
-      :indeterminate="indeterminate">
-      Select All
-    </p-checkbox>
-    <template v-for="item of items">
-      <p-checkbox v-model="result" :value="item" class="ml-4">
-        {{ item }}
-      </p-checkbox>
-    </template>
-  </div>
-</preview>
-
-**Result :**
-
-<pre class="whitespace-normal"><code>{{ result }}</code></pre>
-
-```vue
-<template>
-  <div class="flex flex-col space-y-3">
-    <p-checkbox
-      v-model="selectAll"
-      :indeterminate="indeterminate">
-      Select All
-    </p-checkbox>
-
-    <template v-for="item of items">
-      <p-checkbox v-model="result" :value="item" class="ml-4">
-        {{ item }}
-      </p-checkbox>
-    </template>
-  </div>
-</template>
-
-<script setup>
-  const items  = ref(['apple', 'grape', 'orange'])
-  const result = ref([])
-
-  const selectAll = computed({
-    get () {
-      return result.value.length === items.value.length
-    },
-    set (value) {
-      if (selectAll.value !== value)
-        result.value = value ? [...items.value] : []
-    },
-  })
-
-  const indeterminate = computed(() => {
-    return result.value.length > 0
-      && result.value.length < items.value.length
-  })
-</script>
-```
-
-## Custom Appearance
-
-It's possible to create checkbox with custom appearance. If don't wanna see "check-appearance", don't forget to add value `none` in prop `appearance`.
-
-<preview class="justify-center">
-  <div class="flex flex-col space-y-3">
-    <p-checkbox appearance="none" v-model="selected2" value="Olivia Withness">
-      <template #default>
-        <p-card
-          element="div"
-          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
-          sectioned>
-          <div class="flex items-center space-x-3">
-            <IconBee class="text-muted dark:text-dark-muted" />
-            <div>
-              Olivia Withness
-              <p-caption>olivia@eth.com</p-caption>
-            </div>
-          </div>
-        </p-card>
-      </template>
-    </p-checkbox>
-    <p-checkbox appearance="none" v-model="selected2" value="Hyuga Kojiro">
-      <template #default>
-        <p-card
-          element="div"
-          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
-          sectioned>
-          <div class="flex items-center space-x-3">
-            <IconBee class="text-muted dark:text-dark-muted" />
-            <div>
-              Hyuga Kojiro
-              <p-caption>hyuga@gmail.com</p-caption>
-            </div>
-          </div>
-        </p-card>
-      </template>
-    </p-checkbox>
-    <p-checkbox appearance="none" v-model="selected2" value="Marsha Timoty" disabled>
-      <template #default>
-        <p-card
-          element="div"
-          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
-          sectioned>
-          <div class="flex items-center space-x-3">
-            <IconBee class="text-muted dark:text-dark-muted" />
-            <div>
-              Marsha Timoty
-              <p-caption>timoty@marsha.com</p-caption>
-            </div>
-          </div>
-        </p-card>
-      </template>
-    </p-checkbox>
-  </div>
-</preview>
-
-**Selected :**
-
-<pre><code>{{ selected2 }}</code></pre>
-
-```vue
-<template>
-  <div class="flex flex-col space-y-3">
-    <p-checkbox appearance="none" v-model="selected" value="Olivia Withness">
-      <template #default>
-        <p-card
-          element="div"
-          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
-          sectioned>
-          <div class="flex items-center space-x-3">
-            <IconBee class="text-muted dark:text-dark-muted" />
-            <div>
-              Olivia Withness
-              <p-caption>olivia@eth.com</p-caption>
-            </div>
-          </div>
-        </p-card>
-      </template>
-    </p-checkbox>
-    <p-checkbox appearance="none" v-model="selected" value="Hyuga Kojiro">
-      <template #default>
-        <p-card
-          element="div"
-          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
-          sectioned>
-          <div class="flex items-center space-x-3">
-            <IconBee class="text-muted dark:text-dark-muted" />
-            <div>
-              Hyuga Kojiro
-              <p-caption>hyuga@gmail.com</p-caption>
-            </div>
-          </div>
-        </p-card>
-      </template>
-    </p-checkbox>
-    <p-checkbox appearance="none" v-model="selected" value="Marsha Timoty" disabled>
-      <template #default>
-        <p-card
-          element="div"
-          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
-          sectioned>
-          <div class="flex items-center space-x-3">
-            <IconBee class="text-muted dark:text-dark-muted" />
-            <div>
-              Marsha Timoty
-              <p-caption>timoty@marsha.com</p-caption>
-            </div>
-          </div>
-        </p-card>
-      </template>
-    </p-checkbox>
-  </div>
-</template>
-```
-
-## API
-
-### Props
-
-| Props            |   Type    | Default | Description                                                                |
-|------------------|:---------:|:-------:|----------------------------------------------------------------------------|
-| `checked`        | `Boolean` | `false` | Checked condition. if it is `true`, Checkbox will be checked on first time |
-| `value`          |   `Any`   | `true`  | Checked value                                                              |
-| `uncheckedValue` |   `Any`   | `false` | Unchecked value                                                            |
-| `disabled`       | `Boolean` | `false` | Disabled state                                                             |
-| `readonly`       | `Boolean` | `false` | Readonly state                                                             |
-| `indeterminate`  | `Boolean` | `false` | Indeterminate state                                                        |
-| `modelValue`     |   `Any`   |   `-`   | `v-model` value                                                            |
-
-### Slots
-
-| Name      | Description                |
-|-----------|----------------------------|
-| `default` | Content to place in toggle |
-
-### Events
-
-| Name     | Arguments | Description              |
-|----------|-----------|--------------------------|
-| `change` | Boolean   | Event when value changed |
-
-## See Also
-- [Toggle][toggle]
-- [Radio][radio]
-
-[Toggle]: /components/toggle/index
-[Radio]: /components/radio/index

package/dist/components/checkbox/index.mjs

@@ -1,34 +0,0 @@
-import { syncRef } from "@vueuse/shared";
-import {
-  computed,
-  getCurrentInstance,
-  ref
-} from "vue-demi";
-import { valueIn, isEqual } from "../utils/value.mjs";
-function isChecked(modelValue, checked) {
-  if (Array.isArray(modelValue))
-    return valueIn(modelValue, checked);
-  return isEqual(modelValue, checked);
-}
-export function useVModel(props) {
-  const { emit } = getCurrentInstance();
-  const localValue = ref(isChecked(props.modelValue, props.value) || props.checked);
-  const model = computed({
-    get() {
-      return isChecked(props.modelValue, props.value) || props.checked;
-    },
-    set(value) {
-      const newValue = value ? props.value : props.uncheckedValue;
-      if (Array.isArray(props.modelValue)) {
-        if (value) {
-          if (!valueIn(props.modelValue, newValue))
-            emit("update:modelValue", [...props.modelValue, newValue]);
-        } else
-          emit("update:modelValue", props.modelValue.filter((old) => !isEqual(old, props.value)));
-      } else
-        emit("update:modelValue", newValue);
-    }
-  });
-  syncRef(localValue, model, { immediate: false });
-  return localValue;
-}

package/dist/components/collapse/Collapse.spec.d.ts

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

package/dist/components/collapse/Collapse.spec.mjs

@@ -1,149 +0,0 @@
-import { render } from "@testing-library/vue";
-import { vi } from "vitest";
-import { useMediaQuery, setScreenWidth } from "./__mocks__/use-media-query.mjs";
-import { nextTick, ref } from "vue-demi";
-import pCollapse from "./Collapse.vue";
-import pNavbar from "../navbar/Navbar.vue";
-import { delay } from "nanodelay";
-vi.mock("@vueuse/core", async () => {
-  const vueuse = await vi.importActual("@vueuse/core");
-  return {
-    ...vueuse,
-    useMediaQuery
-  };
-});
-afterEach(() => {
-  vi.resetAllMocks();
-});
-it("should rendered properly without any props", () => {
-  const screen = render({
-    components: { pCollapse },
-    template: `
-      <p-collapse>
-        Hey there!
-      </p-collapse>
-    `
-  });
-  const collapse = screen.queryByTestId("collapse");
-  const text = screen.queryByText("Hey there!");
-  expect(collapse).toBeInTheDocument();
-  expect(collapse).toHaveClass("collapses");
-  expect(text).toBeInTheDocument();
-});
-it("should rendered properly without any props", async () => {
-  const model = ref(false);
-  const screen = render({
-    components: { pCollapse },
-    template: `
-      <p-collapse v-model="model">
-      </p-collapse>
-    `,
-    setup() {
-      return { model };
-    }
-  });
-  let collapse = screen.queryByTestId("collapse");
-  expect(collapse).toBeInTheDocument();
-  expect(collapse).toHaveClass("collapse--hide");
-  model.value = true;
-  await nextTick();
-  collapse = screen.queryByTestId("collapse");
-  expect(collapse).toHaveClass("collapse--show");
-  model.value = false;
-  await nextTick();
-  collapse = screen.queryByTestId("collapse");
-  expect(collapse).toHaveClass("collapse--hide");
-});
-it("should have style navbar-collapse via prop `is-nav`", () => {
-  const screen = render({
-    components: { pCollapse },
-    template: `
-      <p-collapse is-nav>
-        Hey there!
-      </p-collapse>
-    `
-  });
-  const collapse = screen.queryByTestId("collapse");
-  expect(collapse).toBeInTheDocument();
-  expect(collapse).toHaveClass("navbar--collapse");
-});
-it("Show content inside collapse automatically based on breakpoint `lg` via prop `toggleable`", async () => {
-  const screen = render({
-    components: { pNavbar, pCollapse },
-    template: `
-      <p-navbar toggleable="lg">
-        <p-collapse is-nav>
-          <span data-testid="collapse-content">hey</span>
-        </p-collapse>
-      </p-navbar>
-    `
-  });
-  await setScreenWidth(1080);
-  await delay(0);
-  const collapse = screen.queryByTestId("collapse");
-  const content = screen.queryAllByTestId("collapse-content");
-  expect(collapse).toBeInTheDocument();
-  expect(content.at(0)).toBeVisible();
-});
-it("Show content inside collapse automatically based on breakpoint `md` via prop `toggleable`", async () => {
-  const screen = render({
-    components: { pNavbar, pCollapse },
-    template: `
-      <p-navbar toggleable="md">
-        <p-collapse is-nav>
-          <span data-testid="collapse-content">hey</span>
-        </p-collapse>
-      </p-navbar>
-    `
-  });
-  await setScreenWidth(800);
-  await delay(0);
-  const collapse = screen.queryByTestId("collapse");
-  const content = screen.queryAllByTestId("collapse-content");
-  expect(collapse).toBeInTheDocument();
-  expect(content.at(0)).toBeVisible();
-});
-it("Show content inside collapse automatically based on breakpoint `sm` via prop `toggleable`", async () => {
-  const screen = render({
-    components: { pNavbar, pCollapse },
-    template: `
-      <p-navbar toggleable="sm">
-        <p-collapse is-nav>
-          <span data-testid="collapse-content">hey</span>
-        </p-collapse>
-      </p-navbar>
-    `
-  });
-  await setScreenWidth(650);
-  await delay(0);
-  const collapse = screen.queryByTestId("collapse");
-  const content = screen.queryAllByTestId("collapse-content");
-  expect(collapse).toBeInTheDocument();
-  expect(content.at(0)).toBeVisible();
-});
-it("should show content following v-model if breakpoint below value of prop `toggleable`", async () => {
-  const model = ref(false);
-  const screen = render({
-    components: { pNavbar, pCollapse },
-    template: `
-      <p-navbar toggleable="lg">
-        <p-collapse is-nav v-model="model">
-          <span data-testid="collapse-content">hey</span>
-        </p-collapse>
-      </p-navbar>
-    `,
-    setup() {
-      return { model };
-    }
-  });
-  await setScreenWidth(700);
-  await delay(0);
-  const collapse = screen.queryByTestId("collapse");
-  let content = screen.queryAllByTestId("collapse-content");
-  expect(collapse).toBeInTheDocument();
-  expect(content.at(0)).not.toBeVisible();
-  model.value = true;
-  await nextTick();
-  content = screen.queryAllByTestId("collapse-content");
-  expect(content.at(0)).toBeVisible();
-});

package/dist/components/collapse/Collapse.vue

@@ -1,58 +0,0 @@
-<template>
-  <v-collapse
-    data-testid="collapse"
-    class="collapses"
-    :class="classNames"
-    :when="model || isToggleable">
-    <slot />
-  </v-collapse>
-</template>
-
-<script setup>
-import { computed, inject } from "vue-demi";
-import { useVModel } from "../input";
-import { NAVBAR_SETTINGS } from "../navbar";
-import { useMediaQuery } from "@vueuse/core";
-import { Collapse as vCollapse } from "vue-collapsed";
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  isNav: {
-    type: Boolean,
-    default: false
-  }
-});
-defineEmits(["update:modelValue"]);
-const model = useVModel(props);
-const context = inject(NAVBAR_SETTINGS, void 0, true);
-const lg = useMediaQuery("(min-width: 1024px)");
-const md = useMediaQuery("(min-width: 768px)");
-const sm = useMediaQuery("(min-width: 640px)");
-const isToggleable = computed(() => {
-  if (context?.toggleable?.value === "lg")
-    return lg.value;
-  if (context?.toggleable?.value === "md")
-    return md.value;
-  if (context?.toggleable?.value === "sm")
-    return sm.value;
-  return model.value;
-});
-const classNames = computed(() => {
-  const result = [""];
-  if (model.value)
-    result.push("collapse--show");
-  else
-    result.push("collapse--hide");
-  if (props.isNav)
-    result.push("navbar--collapse");
-  return result;
-});
-</script>
-
-<style lang="postcss">
-.collapses {
-  @apply transition-[height] duration-300 ease-out;
-}
-</style>

package/dist/components/collapse/Collapse.vue.d.ts

@@ -1,42 +0,0 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    isNav: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: boolean) => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    isNav: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
-}>, {
-    modelValue: boolean;
-    isNav: 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/collapse/__mocks__/use-media-query.d.ts

@@ -1,2 +0,0 @@
-export declare const useMediaQuery: (query: string) => import("vue-demi").ComputedRef<boolean>;
-export declare function setScreenWidth(width: number): Promise<void>;

package/dist/components/collapse/__mocks__/use-media-query.mjs

@@ -1,17 +0,0 @@
-import {
-  computed,
-  nextTick,
-  ref
-} from "vue-demi";
-const screenWidth = ref(0);
-export const useMediaQuery = (query) => {
-  const minWidth = Number.parseInt(query.replaceAll(/\D/g, ""));
-  const result = computed(() => {
-    return screenWidth.value >= minWidth;
-  });
-  return result;
-};
-export async function setScreenWidth(width) {
-  screenWidth.value = width;
-  await nextTick();
-}