@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/datepicker/Datepicker.vue

@@ -1,235 +0,0 @@
-<template>
-  <Dropdown
-    v-model="isOpen"
-    class="datepicker"
-    data-testid="datepicker"
-    aria-label="datepicker"
-    :placement="placement"
-    :class="classNames"
-    :disabled="disabled">
-    <template #activator>
-      <Input
-        v-bind="$attrs"
-        :value="value"
-        :model-value="value"
-        data-testid="datepicker-input"
-        class="datepicker__input"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :error="error"
-        :size="size"
-        :clearable="clearable"
-        :container-class="containerClass"
-        readonly
-        @clear="onClear"
-        @focus="onFocus">
-        <template #append>
-          <IconCalendar
-            class="datepicker__icon" />
-        </template>
-      </Input>
-    </template>
-
-    <Calendar
-      v-model="model"
-      class="datepicker__calendar"
-      :start="start"
-      :end="end"
-      :disabled="disabled"
-      :readonly="readonly"
-      :max="max"
-      :min="min"
-      :mode="mode"
-      :range="range"
-      :min-range="minRange"
-      :max-range="maxRange"
-      @change="onSelected"
-      @update:start="$emit('update:start', $event)"
-      @update:end="$emit('update:end', $event)" />
-  </Dropdown>
-</template>
-
-<script lang="ts" setup>
-import Dropdown from '../dropdown/Dropdown.vue'
-import Input from '../input/Input.vue'
-import Calendar from '../calendar/Calendar.vue'
-import { format as formatDate, isDate } from 'date-fns'
-import type { PropType } from 'vue-demi'
-import {
-  computed,
-  ref,
-  watch,
-} from 'vue-demi'
-import type { CalendarMode } from '../calendar/adapter/adapter'
-import { useVModel } from '../input'
-import IconCalendar from '@privyid/persona-icon/vue/calendar/16.vue'
-import type { SizeVariant } from '../button'
-import type { Placement } from '@floating-ui/dom'
-
-defineOptions({ inheritAttrs: false })
-
-const props = defineProps({
-  modelValue: {
-    type   : [Date, Array] as PropType<Date | [Date, Date]>,
-    default: undefined,
-  },
-  size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
-  },
-  disabled: {
-    type   : Boolean,
-    default: false,
-  },
-  readonly: {
-    type   : Boolean,
-    default: false,
-  },
-  error: {
-    type   : Boolean,
-    default: false,
-  },
-  clearable: {
-    type   : Boolean,
-    default: false,
-  },
-  containerClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-  start: {
-    type   : Date,
-    default: undefined,
-  },
-  end: {
-    type   : Date,
-    default: undefined,
-  },
-  placeholder: {
-    type   : String,
-    default: '',
-  },
-  format: {
-    type   : String,
-    default: 'dd/MM/yyyy',
-  },
-  max: {
-    type   : Date,
-    default: undefined,
-  },
-  min: {
-    type   : Date,
-    default: undefined,
-  },
-  mode: {
-    type   : String as PropType<CalendarMode>,
-    default: 'date',
-  },
-  range: {
-    type   : Boolean,
-    default: false,
-  },
-  minRange: {
-    type   : String,
-    default: undefined,
-  },
-  maxRange: {
-    type   : String,
-    default: undefined,
-  },
-  placement: {
-    type   : String as PropType<Placement>,
-    default: 'bottom-start',
-  },
-})
-
-const emit = defineEmits<{
-  'change': [unknown],
-  'update:modelValue': [unknown],
-  'update:start': [Date],
-  'update:end': [Date],
-}>()
-
-const model  = useVModel(props)
-const isOpen = ref(false)
-
-const value = computed(() => {
-  const dates = Array.isArray(model.value)
-    ? model.value
-    : [model.value]
-
-  return dates.map((date) => {
-    return isDate(date)
-      ? formatDate(date as Date, props.format)
-      : ''
-  }).filter(Boolean).join(' - ')
-})
-
-watch(() => props.start, (start) => {
-  if (Array.isArray(model.value))
-    model.value[0] = start
-})
-
-watch(() => props.end, (end) => {
-  if (Array.isArray(model.value))
-    model.value[1] = end
-})
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (isOpen.value)
-    result.push('datepicker--open')
-
-  if (props.disabled)
-    result.push('datepicker--disabled')
-
-  if (props.readonly)
-    result.push('datepicker--readonly')
-
-  if (props.error)
-    result.push('datepicker--error', 'state--error')
-
-  return result
-})
-
-function onFocus () {
-  if (!props.disabled && !props.readonly)
-    isOpen.value = true
-}
-
-function onClear () {
-  if (!props.disabled && !props.readonly)
-    model.value = undefined
-}
-
-function onSelected (event: Event) {
-  isOpen.value = false
-
-  emit('change', event)
-}
-</script>
-
-<style lang="postcss">
-.datepicker {
-  &__input {
-    @apply pr-8 truncate;
-  }
-
-  &__icon {
-    @apply transition-transform duration-150 text-muted pointer-events-none;
-    @apply dark:text-dark-muted;
-  }
-
-  > .dropdown__menu {
-    --p-dropdown-size: auto;
-    --p-dropdown-max-height: 100%;
-
-    @apply min-w-max max-h-min;
-  }
-}
-</style>

package/dist/components/dialog/Dialog.vue

@@ -1,149 +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 lang="ts" 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>()
-
-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: 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 hide () {
-  modal.value      = false
-  processing.value = true
-
-  // Wait animation done
-  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/DialogFooter.vue

@@ -1,138 +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 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'
-
-const props = defineProps({
-  align: {
-    type   : String as PropType<FooterAlignVariant>,
-    default: 'start',
-  },
-  cancelClass: {
-    type   : String,
-    default: undefined,
-  },
-  cancelVisible: {
-    type   : Boolean,
-    default: true,
-  },
-  cancelColor: {
-    type   : String as PropType<FooterButtonColorVariant>,
-    default: 'default',
-  },
-  cancelVariant: {
-    type   : String as PropType<FooterButtonStyleVariant>,
-    default: 'link',
-  },
-  cancelText: {
-    type   : String,
-    default: 'Cancel',
-  },
-  cancelAttrs: {
-    type   : Object as PropType<AdditionalAttr>,
-    default: undefined,
-  },
-  confirmClass: {
-    type   : String,
-    default: undefined,
-  },
-  confirmVisible: {
-    type   : Boolean,
-    default: true,
-  },
-  confirmColor: {
-    type   : String as PropType<FooterButtonColorVariant>,
-    default: 'info',
-  },
-  confirmVariant: {
-    type   : String as PropType<FooterButtonStyleVariant>,
-    default: 'solid',
-  },
-  confirmText: {
-    type   : String,
-    default: 'Confirm',
-  },
-  confirmAttrs: {
-    type   : Object as PropType<AdditionalAttr>,
-    default: undefined,
-  },
-})
-
-const emit = defineEmits<{
-  'cancel': [],
-  'confirm': [],
-}>()
-
-const footerClassNames = computed(() => {
-  const result: string[] = ['modal-dialog__footer']
-
-  if (props.align)
-    result.push(`modal-dialog__footer--align-${props.align}`)
-
-  return result
-})
-
-function cancel (): void {
-  emit('cancel')
-}
-
-function confirm (): void {
-  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>

package/dist/components/dialog/index.d.ts

@@ -1,52 +0,0 @@
-import type { SizeVariant } from '../modal';
-import type { SizeVariant as InputSizeVariant, StyleVariant as FooterButtonStyleVariant, ColorVariant as FooterButtonColorVariant } from '../button';
-import type { VNode, Component, HTMLAttributes } from 'vue-demi';
-import type { AcceptVariant } from '../input';
-import type { AdditionalAttr } from '../global/types';
-export type FooterAlignVariant = 'start' | 'end';
-interface DialogButton {
-    text?: string;
-    visible?: boolean;
-    className?: string;
-    closeModal?: boolean;
-    color?: FooterButtonColorVariant;
-    variant?: FooterButtonStyleVariant;
-    attrs?: AdditionalAttr;
-}
-export interface DialogOptions {
-    title: string;
-    icon?: string | Component;
-    iconClass?: HTMLAttributes['class'];
-    iconAttrs?: AdditionalAttr;
-    text?: string;
-    size?: SizeVariant;
-    centered?: boolean;
-    dismissable?: boolean;
-    noCloseOnBackdrop?: boolean;
-    footerAlign?: FooterAlignVariant;
-    cancel?: DialogButton;
-    confirm?: DialogButton;
-    attrs?: AdditionalAttr;
-}
-export type DialogConfirmOption = DialogOptions;
-export type DialogAlertOption = Omit<DialogOptions, 'cancel'>;
-export interface DialogPromptOption extends DialogOptions {
-    value?: string;
-    input?: {
-        type?: string;
-        placeholder?: string;
-        size?: InputSizeVariant;
-        clearable?: boolean;
-        accept?: AcceptVariant;
-        attrs?: AdditionalAttr;
-    };
-}
-export interface DialogContext extends DialogOptions {
-    onConfirm: () => void;
-    onCancel: () => void;
-    content?: () => VNode;
-}
-export declare function confirm(options: DialogConfirmOption): Promise<boolean>;
-export declare function alert(options: DialogConfirmOption): Promise<void>;
-export declare function prompt(options: DialogPromptOption): Promise<string>;
-export {};

package/dist/components/dialog/index.mjs

@@ -1,86 +0,0 @@
-import { useSingleton } from "../global/use-singleton.mjs";
-import defu from "defu";
-import {
-  ref,
-  h,
-  mergeProps
-} from "vue-demi";
-import pInput from "../input/Input.vue";
-import pFormGroup from "../form-group/FormGroup.vue";
-export async function confirm(options) {
-  const { default: Dialog } = await import("./Dialog.vue");
-  const modal = await useSingleton(Dialog);
-  const result = await new Promise((resolve) => {
-    modal.show(defu(
-      {
-        onConfirm: () => resolve(true),
-        onCancel: () => resolve(false)
-      },
-      options,
-      {
-        title: "Confirm",
-        confirm: {},
-        cancel: {},
-        centered: true
-      }
-    ));
-  });
-  return result;
-}
-export async function alert(options) {
-  await confirm(defu(
-    { cancel: { visible: false } },
-    options,
-    {
-      title: "Alert",
-      confirm: { text: "Ok" }
-    }
-  ));
-}
-export async function prompt(options) {
-  const { default: Dialog } = await import("./Dialog.vue");
-  const model = ref(options.value);
-  const input = ref();
-  const modal = await useSingleton(Dialog);
-  const result = await new Promise((resolve) => {
-    modal.show(defu(
-      {
-        content: () => {
-          return h("form", {
-            onSubmit(event) {
-              event.preventDefault();
-              resolve(model.value);
-            }
-          }, [
-            h(pFormGroup, { label: options.text }, () => [
-              h(pInput, mergeProps(options.input?.attrs, {
-                "ref": input,
-                "type": options.input?.type,
-                "placeholder": options.input?.placeholder,
-                "size": options.input?.size,
-                "clearable": options.input?.clearable,
-                "accept": options.input?.accept,
-                "modelValue": model.value,
-                "onUpdate:modelValue": (value) => {
-                  model.value = value;
-                }
-              }))
-            ])
-          ]);
-        },
-        onConfirm: () => resolve(model.value),
-        onCancel: () => resolve("")
-      },
-      options,
-      {
-        title: "Question",
-        confirm: { text: "Submit" },
-        cancel: {},
-        centered: true
-      }
-    )).then(() => {
-      input.value?.input.focus();
-    });
-  });
-  return result;
-}