@privyid/persona 1.2.0 → 1.2.1

package/dist/components/datepicker/index.md

@@ -1,376 +0,0 @@
----
-title: Datepicker · Components
-description: Base button component
----
-
-<script setup>
-  import pDatepicker from './Datepicker.vue'
-  import Banner from '../banner/Banner.vue'
-  import { ref } from 'vue-demi'
-  import { startOfYear, endOfYear, endOfMonth } from 'date-fns'
-
-  const value  = ref()
-  const result = ref()
-  const start  = ref()
-  const end    = ref()
-
-  const min = startOfYear(new Date())
-  const max = endOfYear(new Date())
-
-  const thisMonth = endOfMonth(new Date())
-</script>
-
-# Datepicker
-
-> Base input type date
-
-## Usage
-
-### Simple Usage
-
-<preview>
-  <p-datepicker clearable />
-</preview>
-
-```vue
-<template>
-  <p-datepicker />
-</template>
-```
-
-## Sizing
-Datepicker has 4 variants size: `xs`, `sm`, `md`, `lg`, default is `md`.
-
-<preview class="flex-col space-y-3">
-  <p-datepicker size="xs" />
-  <p-datepicker size="sm" />
-  <p-datepicker size="md" />
-  <p-datepicker size="lg" />
-</preview>
-
-```vue
-<template>
-  <p-datepicker size="xs" />
-  <p-datepicker size="sm" />
-  <p-datepicker size="md" />
-  <p-datepicker size="lg" />
-</template>
-```
-
-## Placement
-
-You can customize the datepicker position using the `placement` prop. 
-This flexibility ensures that the datepicker fits seamlessly within your user interface. 
-The placement prop determines where the datepicker will appear in relation to the input field. 
-
-<preview>
-  <p-datepicker placement="left" />
-</preview>
-
-```vue
-<template>
-  <p-datepicker placement="left" />
-</template>
-```
-
-### Combining Placement
-
-You can further refine the placement by combining it with a suffix to adjust vertical/horizontal alignment.
-This suffix is useful for aligning the datepicker with the start (`*-start`) or end (`*-end`) of the input field.
-
-<preview class="flex-col space-y-6">
-  <p-datepicker placement="bottom-end" />
-</preview>
-
-```vue
-<template>
-  <p-datepicker placement="bottom-end" />
-</template>
-```
-
-## Placeholder
-
-You can set input placeholder via `placeholder` props
-
-<preview>
-  <p-datepicker placeholder="Pick A Date" />
-</preview>
-
-```vue
-<template>
-  <p-datepicker placeholder="Pick A Date" />
-</template>
-```
-
-## Display Format
-
-You can date via prop `format`. default is `dd/MM/yyyy`
-
-<Banner><strong>Please note</strong>, this component internally use <b>date-fns</b> for date formatting. The format tokens differ from Moment.js. See: <a href="https://date-fns.org/docs/format" target="_blank">date-fns</a></Banner>
-
-<preview>
-  <p-datepicker
-    v-model="value"
-    format="yyyy-MM-dd" />
-</preview>
-
-```vue
-<template>
-  <p-datepicker
-    v-model="value"
-    format="yyyy-MM-dd" />
-</template>
-```
-
-## Limiting Date
-
-You can limit the date via `min` or `max` props
-
-<preview>
-  <p-datepicker
-    :min="min"
-    :max="max" />
-</preview>
-
-```vue
-<template>
-  <!-- Limit this year only -->
-  <p-datepicker
-    :min="min"
-    :max="max" />
-</template>
-
-<script lang="ts" setup>
-  import { startOfYear, endOfYear } from 'date-fns'
-
-  const min = startOfYear(new Date())
-  const max = endOfYear(new Date())
-</script>
-```
-
-## Mode Variant
-
-There 3 available mode: `date` , `month`, `year`. default is `date`. it will limit user input the date.
-
-for example, mode `month` make user can only select the month, but can't select what spesific date.
-
-<preview class="flex-col items-center space-y-2">
-  <p-datepicker
-    format="dd MMM yyyy"
-    mode="date" />
-  <p-datepicker
-    format="MMM yyyy"
-    mode="month" />
-  <p-datepicker
-    format="yyyy"
-    mode="year" />
-</preview>
-
-```vue
-<template>
-  <p-datepicker
-    format="dd MMM yyyy"
-    mode="date" />
-  <p-datepicker
-    format="MMM yyyy"
-    mode="month" />
-  <p-datepicker
-    format="yyyy"
-    mode="year" />
-</template>
-```
-
-## Range Picker
-
-Set prop `range` to `true` to enable date range picker mode.
-
-<preview>
-  <p-datepicker range />
-</preview>
-
-```vue
-<template>
-  <p-datepicker range />
-</template>
-```
-
-### Min and Max Range
-
-You can limit minimal and maximal date range to pick using prop `min-range` and `max-range`.
-
-<preview>
-  <p-datepicker range min-range="3D" max-range="7D" />
-</preview>
-
-```vue
-<template>
-  <!-- Limit min 3 days and max 7 days -->
-  <p-datepicker range min-range="3D" max-range="7D" />
-</template>
-```
-
-👉 See [here](/components/calendar/#min-and-max-range-format) to more information about range format value.
-
-## Disabled State
-
-<preview class="flex-col items-center space-y-2">
-  <p-datepicker disabled />
-</preview>
-
-```vue
-<template>
-  <p-datepicker disabled />
-</template>
-```
-
-## Readonly state
-<preview>
-  <p-datepicker readonly />
-</preview>
-
-```vue
-<template>
-  <p-datepicker readonly />
-</template>
-```
-
-## Error state
-<preview>
-  <p-datepicker error />
-</preview>
-
-```vue
-<template>
-  <p-datepicker error />
-</template>
-```
-
-## Clearable
-
-Add clear button to input with prop `clearable`.
-
-<preview class="flex-col space-y-3">
-  <p-datepicker clearable />
-</preview>
-
-```vue
-<template>
-  <p-datepicker clearable />
-</template>
-```
-
-## Binding v-model
-
-<preview>
-  <p-datepicker v-model="value" />
-</preview>
-
-```vue
-<template>
-  <p-datepicker v-vmodel="value" />
-</template>
-```
-
-**Result :**
-
-<pre class="max-w-full truncate"><code>{{ value ?? '-' }}</code></pre>
-
-### v-model in range mode
-
-There are 2 ways to use v-model in `range` mode.
-
-#### 1. Using basic v-model
-
-You can use basic `v-model` to handle date range input, The value will be tuple of Date, `[start, end]`
-
-<preview class="flex-col">
-  <p-datepicker v-model="result" range />
-</preview>
-
-**result:**
-
-<pre class="truncate"><code>{{ result ?? '-' }}</code></pre>
-
-```vue
-<template>
-  <p-datepicker v-model="result" range />
-</template>
-```
-
-#### 2. using v-model:start and v-model:end
-
-You can specific binding the value using `v-model:start` or `v-model:end`
-
-<preview class="flex-col">
-  <p-datepicker
-    v-model:start="start"
-    v-model:end="end"
-    range />
-</preview>
-
-**start:**
-
-<pre class="truncate"><code>{{ start ?? '-' }}</code></pre>
-
-**end:**
-
-<pre class="truncate"><code>{{ end ?? '-' }}</code></pre>
-
-```vue
-<template>
-  <p-datepicker
-    v-model:start="start"
-    v-model:end="end"
-    range />
-</template>
-```
-
-## API
-
-### Props
-
-| Props             |              Type               |   Default    | Description                                             |
-|-------------------|:-------------------------------:|:------------:|---------------------------------------------------------|
-| `modelValue`      |             `Date`              |     `-`      | `v-model` value                                         |
-| `size`            |            `String`             |     `md`     | Input size variant, valid value: `xs`, `sm`, `md`, `lg` |
-| `start`           |             `Date`              |     `-`      | `v-model:start` value                                   |
-| `end`             |             `Date`              |     `-`      | `v-model:end` value                                     |
-| `placeholder`     |            `String`             |     `-`      | Input placeholder                                       |
-| `format`          |            `String`             | `dd/MM/yyyy` | Date format                                             |
-| `disabled`        |            `Boolean`            |   `false`    | Disabled state                                          |
-| `readonly`        |            `Boolean`            |   `false`    | Readonly state                                          |
-| `error`           |            `Boolean`            |   `false`    | Error state                                             |
-| `clearable`       |            `Boolean`            |   `false`    | Enable clear                                            |
-| `mode`            |            `String`             |     `-`      | Calendar mode valid value: `date`, `month`, `year`      |
-| `min`             |             `Date`              |     `-`      | Minimum date can be selected                            |
-| `max`             |             `Date`              |     `-`      | Maximum date can be selected                            |
-| `range`           |            `Boolean`            |   `false`    | Enable range picker mode                                |
-| `minRange`        |            `String`             |     `-`      | Minimum range date should be selected                   |
-| `maxRange`        |            `String`             |     `-`      | Maximum range date should be selected                   |
-| `container-class` | `String` or `Array` or `Object` |     `-`      | CSS class to add in the input container                 |
-
-### Slots
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td colspan="2" class="text-center">There no slots here</td>
-    </tr>
-  </tbody>
-</table>
-
-### Events
-
-| Name     | Arguments          | Description              |
-|----------|--------------------|--------------------------|
-| `change` | Native Date object | Event when date selected |
-
-## See Also
-
-- [Calendar](/components/calendar/)

package/dist/components/dialog/Dialog.vue

@@ -1,130 +0,0 @@
-<template>
-  <Modal
-    v-if="context"
-    :key="id"
-    v-model="modal"
-    v-bind="context.attrs"
-    class="modal-dialog"
-    :title="context.title"
-    :size="context.size"
-    :centered="context.centered"
-    :dismissable="context.dismissable"
-    :no-close-on-backdrop="context.noCloseOnBackdrop"
-    @show="onModalShow"
-    @hide="onModalHide"
-    @close="onCancel">
-    <template #header>
-      <template v-if="dialogIcon">
-        <div class="modal-dialog__icon">
-          <component
-            :is="dialogIcon"
-            :class="context.iconClass"
-            v-bind="context.iconAttrs" />
-        </div>
-      </template>
-      <Heading
-        v-p-md.inline="context.title"
-        class="modal__title"
-        element="h6" />
-    </template>
-    <template #default>
-      <template v-if="typeof context.content === 'function'">
-        <component :is="context.content" />
-      </template>
-      <template v-else>
-        <span v-p-md.inline="context.text" />
-      </template>
-    </template>
-    <template #footer>
-      <dialog-footer
-        :align="context.footerAlign"
-        :cancel-class="context.cancel.className"
-        :cancel-visible="context.cancel.visible"
-        :cancel-color="context.cancel.color"
-        :cancel-variant="context.cancel.variant"
-        :cancel-text="context.cancel.text"
-        :cancel-attrs="context.cancel.attrs"
-        :confirm-class="context.confirm.className"
-        :confirm-visible="context.confirm.visible"
-        :confirm-color="context.confirm.color"
-        :confirm-variant="context.confirm.variant"
-        :confirm-text="context.confirm.text"
-        :confirm-attrs="context.confirm.attrs"
-        @confirm="onConfirm"
-        @cancel="onCancel" />
-    </template>
-  </Modal>
-</template>
-
-<script setup>
-import {
-  h,
-  ref,
-  computed,
-  nextTick,
-  shallowRef
-} from "vue-demi";
-import Modal from "../modal/Modal.vue";
-import Heading from "../heading/Heading.vue";
-import DialogFooter from "./DialogFooter.vue";
-import { vPMd } from "../markdown";
-import { until } from "@vueuse/core";
-const id = ref();
-const modal = ref(false);
-const processing = ref(false);
-const context = shallowRef();
-const dialogIcon = computed(() => {
-  if (context.value.icon) {
-    if (typeof context.value.icon === "string") {
-      return () => h("img", {
-        "src": context.value.icon,
-        "width": 20,
-        "height": 20,
-        "data-testid": "dialog-icon-image"
-      });
-    }
-    return context.value.icon;
-  }
-});
-async function show(options) {
-  id.value = Symbol("DialogId");
-  context.value = options;
-  await nextTick();
-  modal.value = true;
-  processing.value = true;
-  await until(processing).toBe(false);
-}
-async function hide() {
-  modal.value = false;
-  processing.value = true;
-  await until(processing).toBe(false);
-}
-async function onConfirm() {
-  await hide();
-  context.value.onConfirm();
-}
-async function onCancel() {
-  await hide();
-  context.value.onCancel();
-}
-function onModalHide() {
-  processing.value = false;
-}
-function onModalShow() {
-  processing.value = false;
-}
-defineExpose({
-  show,
-  hide
-});
-</script>
-
-<style lang="postcss">
-.modal-dialog {
-  --p-modal-z-index: theme(zIndex.dialog);
-
-  &__icon {
-    @apply mt-1 mr-2;
-  }
-}
-</style>

package/dist/components/dialog/Dialog.vue.d.ts

@@ -1,8 +0,0 @@
-import type { DialogContext } from '.';
-declare function show(options: DialogContext): Promise<void>;
-declare function hide(): Promise<void>;
-declare const _default: import("vue-demi").DefineComponent<{}, {
-    show: typeof show;
-    hide: typeof hide;
-}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/dialog/DialogFooter.vue

@@ -1,121 +0,0 @@
-<template>
-  <div
-    data-testid="dialog-footer"
-    :class="footerClassNames">
-    <Button
-      v-if="cancelVisible"
-      v-bind="cancelAttrs"
-      :class="cancelClass"
-      :color="cancelColor"
-      :variant="cancelVariant"
-      @click="cancel">
-      {{ cancelText }}
-    </Button>
-
-    <Button
-      v-if="confirmVisible"
-      v-bind="confirmAttrs"
-      :class="confirmClass"
-      :color="confirmColor"
-      :variant="confirmVariant"
-      @click="confirm">
-      {{ confirmText }}
-    </Button>
-  </div>
-</template>
-
-<script setup>
-import Button from "../button/Button.vue";
-import { computed } from "vue-demi";
-const props = defineProps({
-  align: {
-    type: String,
-    default: "start"
-  },
-  cancelClass: {
-    type: String,
-    default: void 0
-  },
-  cancelVisible: {
-    type: Boolean,
-    default: true
-  },
-  cancelColor: {
-    type: String,
-    default: "default"
-  },
-  cancelVariant: {
-    type: String,
-    default: "link"
-  },
-  cancelText: {
-    type: String,
-    default: "Cancel"
-  },
-  cancelAttrs: {
-    type: Object,
-    default: void 0
-  },
-  confirmClass: {
-    type: String,
-    default: void 0
-  },
-  confirmVisible: {
-    type: Boolean,
-    default: true
-  },
-  confirmColor: {
-    type: String,
-    default: "info"
-  },
-  confirmVariant: {
-    type: String,
-    default: "solid"
-  },
-  confirmText: {
-    type: String,
-    default: "Confirm"
-  },
-  confirmAttrs: {
-    type: Object,
-    default: void 0
-  }
-});
-const emit = defineEmits(["cancel", "confirm"]);
-const footerClassNames = computed(() => {
-  const result = ["modal-dialog__footer"];
-  if (props.align)
-    result.push(`modal-dialog__footer--align-${props.align}`);
-  return result;
-});
-function cancel() {
-  emit("cancel");
-}
-function confirm() {
-  emit("confirm");
-}
-</script>
-
-<style lang="postcss">
-.modal-dialog {
-  &__footer {
-    @apply flex items-center space-x-3;
-
-    &--align {
-      &-left,
-      &-start {
-        @apply justify-start;
-      }
-
-      &-right,
-      &-end {
-        @apply justify-end;
-      }
-
-      &-center {
-        @apply justify-center;
-      }
-    }
-  }
-}
-</style>