@privyid/persona 1.1.1 → 1.2.0

package/dist/components/datepicker/index.md

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

@@ -28,7 +28,7 @@
         element="h6" />
     </template>
     <template #default>
-      <template v-if="(typeof context.content === 'function')">
+      <template v-if="typeof context.content === 'function'">
         <component :is="context.content" />
       </template>
       <template v-else>
@@ -56,86 +56,67 @@
   </Modal>
 </template>
 
-<script lang="ts" setup>
+<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 type { DialogContext } from '.'
-import { vPMd } from '../markdown'
-import { until } from '@vueuse/core'
-
-const id         = ref<symbol>()
-const modal      = ref(false)
-const processing = ref(false)
-const context    = shallowRef<DialogContext>()
-
+  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',
-      })
+    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
+    return context.value.icon;
   }
-})
-
-async function show (options: DialogContext) {
-  id.value      = Symbol('DialogId')
-  context.value = options
-
-  await nextTick()
-
-  modal.value      = true
-  processing.value = true
-
-  // Wait animation done
-  await until(processing).toBe(false)
+});
+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
-
-  // Wait animation done
-  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 onConfirm() {
+  await hide();
+  context.value.onConfirm();
 }
-
-async function onCancel () {
-  await hide()
-
-  context.value.onCancel()
+async function onCancel() {
+  await hide();
+  context.value.onCancel();
 }
-
-function onModalHide () {
-  processing.value = false
+function onModalHide() {
+  processing.value = false;
 }
-
-function onModalShow () {
-  processing.value = false
+function onModalShow() {
+  processing.value = false;
 }
-
 defineExpose({
   show,
-  hide,
-})
+  hide
+});
 </script>
 
 <style lang="postcss">

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

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

@@ -24,92 +24,75 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import Button from '../button/Button.vue'
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import type {
-  StyleVariant as FooterButtonStyleVariant,
-  ColorVariant as FooterButtonColorVariant,
-} from '../button'
-import type { FooterAlignVariant } from '.'
-import type { AdditionalAttr } from '../global/types'
-
+<script setup>
+import Button from "../button/Button.vue";
+import { computed } from "vue-demi";
 const props = defineProps({
   align: {
-    type   : String as PropType<FooterAlignVariant>,
-    default: 'start',
+    type: String,
+    default: "start"
   },
   cancelClass: {
-    type   : String,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   cancelVisible: {
-    type   : Boolean,
-    default: true,
+    type: Boolean,
+    default: true
   },
   cancelColor: {
-    type   : String as PropType<FooterButtonColorVariant>,
-    default: 'default',
+    type: String,
+    default: "default"
   },
   cancelVariant: {
-    type   : String as PropType<FooterButtonStyleVariant>,
-    default: 'link',
+    type: String,
+    default: "link"
   },
   cancelText: {
-    type   : String,
-    default: 'Cancel',
+    type: String,
+    default: "Cancel"
   },
   cancelAttrs: {
-    type   : Object as PropType<AdditionalAttr>,
-    default: undefined,
+    type: Object,
+    default: void 0
   },
   confirmClass: {
-    type   : String,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   confirmVisible: {
-    type   : Boolean,
-    default: true,
+    type: Boolean,
+    default: true
   },
   confirmColor: {
-    type   : String as PropType<FooterButtonColorVariant>,
-    default: 'info',
+    type: String,
+    default: "info"
   },
   confirmVariant: {
-    type   : String as PropType<FooterButtonStyleVariant>,
-    default: 'solid',
+    type: String,
+    default: "solid"
   },
   confirmText: {
-    type   : String,
-    default: 'Confirm',
+    type: String,
+    default: "Confirm"
   },
   confirmAttrs: {
-    type   : Object as PropType<AdditionalAttr>,
-    default: undefined,
-  },
-})
-
-const emit = defineEmits<{
-  'cancel': [],
-  'confirm': [],
-}>()
-
+    type: Object,
+    default: void 0
+  }
+});
+const emit = defineEmits(["cancel", "confirm"]);
 const footerClassNames = computed(() => {
-  const result: string[] = ['modal-dialog__footer']
-
+  const result = ["modal-dialog__footer"];
   if (props.align)
-    result.push(`modal-dialog__footer--align-${props.align}`)
-
-  return result
-})
-
-function cancel (): void {
-  emit('cancel')
+    result.push(`modal-dialog__footer--align-${props.align}`);
+  return result;
+});
+function cancel() {
+  emit("cancel");
 }
-
-function confirm (): void {
-  emit('confirm')
+function confirm() {
+  emit("confirm");
 }
 </script>