@privyid/persona 1.2.1 → 1.2.2-dev.2

package/dist/components/cropper/utils/use-pinch.mjs

@@ -0,0 +1,50 @@
+import {
+  onBeforeUnmount,
+  onMounted,
+  shallowRef
+} from "vue";
+import { throttle } from "lodash-es";
+export function usePinch(target, hooks) {
+  const instance = shallowRef();
+  onMounted(async () => {
+    if (target.value) {
+      const { default: Interact } = await import("interactjs");
+      const onmove = throttle(
+        hooks.onmove,
+        1e3 / 120
+        /* limit 120fps */
+      );
+      const onpinch = throttle(
+        hooks.onpinch,
+        1e3 / 120
+        /* limit 120fps */
+      );
+      instance.value = Interact(target.value).styleCursor(true).gesturable({
+        inertia: true,
+        onstart: hooks.onstart,
+        onmove: onpinch,
+        onend: onpinch,
+        modifiers: [
+          Interact.modifiers.restrict({
+            restriction: "parent",
+            endOnly: true
+          })
+        ]
+      }).draggable({
+        inertia: true,
+        onstart: hooks.onstart,
+        onmove,
+        onend: onmove,
+        modifiers: [
+          Interact.modifiers.restrict({
+            restriction: "parent",
+            endOnly: true
+          })
+        ]
+      });
+    }
+  });
+  onBeforeUnmount(async () => {
+    instance.value?.unset();
+  });
+}

package/dist/components/cropper/utils/use-preview.d.ts

@@ -0,0 +1,3 @@
+import type { MaybeRef } from '@vueuse/core';
+import type { Ref } from 'vue';
+export declare function usePreview(file: MaybeRef<string | globalThis.File>, fallback?: string): Ref<string>;

package/dist/components/cropper/utils/use-preview.mjs

@@ -0,0 +1,21 @@
+import { createSpinner } from "../../avatar/utils/create-image.mjs";
+import {
+  ref,
+  unref,
+  watchEffect
+} from "vue";
+export function usePreview(file, fallback = createSpinner(512, 512)) {
+  const preview = ref(fallback);
+  watchEffect((onCleanup) => {
+    const value = unref(file);
+    if (typeof window !== "undefined" && value instanceof globalThis.File) {
+      const url = window.URL.createObjectURL(value);
+      onCleanup(() => {
+        window.URL.revokeObjectURL(url);
+      });
+      preview.value = url;
+    } else
+      preview.value = typeof value === "string" && value ? value : fallback;
+  });
+  return preview;
+}

package/dist/components/cropper/utils/use-ratio.d.ts

@@ -0,0 +1,9 @@
+import type { ComputedRef } from 'vue';
+export interface RatioProp {
+    width?: number | string;
+    height?: number | string;
+    ratio?: number;
+}
+export declare function useRatio(props: RatioProp, defaultValue?: number): ComputedRef<number>;
+export declare function useRatioWidth(props: RatioProp): ComputedRef<number | undefined>;
+export declare function useRatioHeight(props: RatioProp): ComputedRef<number | undefined>;

package/dist/components/cropper/utils/use-ratio.mjs

@@ -0,0 +1,24 @@
+import { computed } from "vue";
+export function useRatio(props, defaultValue = 1) {
+  return computed(() => {
+    if (props.width && props.height)
+      return Number.parseFloat(`${props.width}`) / Number.parseFloat(`${props.height}`);
+    return props.ratio ?? defaultValue;
+  });
+}
+export function useRatioWidth(props) {
+  return computed(() => {
+    if (props.width)
+      return Number.parseFloat(`${props.width}`);
+    if (props.height && props.ratio)
+      return Number.parseFloat(`${props.height}`) * props.ratio;
+  });
+}
+export function useRatioHeight(props) {
+  return computed(() => {
+    if (props.height)
+      return Number.parseFloat(`${props.height}`);
+    if (props.width && props.ratio)
+      return Number.parseFloat(`${props.width}`) / props.ratio;
+  });
+}

package/dist/components/datepicker/Datepicker.vue

@@ -0,0 +1,204 @@
+<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 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 {
+  computed,
+  ref,
+  watch
+} from "vue";
+import { useVModel } from "../input";
+import IconCalendar from "@privyid/persona-icon/vue/calendar/16.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  modelValue: {
+    type: [Date, Array],
+    default: void 0
+  },
+  size: {
+    type: String,
+    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: void 0
+  },
+  start: {
+    type: Date,
+    default: void 0
+  },
+  end: {
+    type: Date,
+    default: void 0
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  format: {
+    type: String,
+    default: "dd/MM/yyyy"
+  },
+  max: {
+    type: Date,
+    default: void 0
+  },
+  min: {
+    type: Date,
+    default: void 0
+  },
+  mode: {
+    type: String,
+    default: "date"
+  },
+  range: {
+    type: Boolean,
+    default: false
+  },
+  minRange: {
+    type: String,
+    default: void 0
+  },
+  maxRange: {
+    type: String,
+    default: void 0
+  },
+  placement: {
+    type: String,
+    default: "bottom-start"
+  }
+});
+const emit = defineEmits(["change", "update:modelValue", "update:start", "update:end"]);
+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, 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 = [];
+  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 = void 0;
+}
+function onSelected(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/datepicker/Datepicker.vue.d.ts

@@ -0,0 +1,181 @@
+import type { PropType } from 'vue';
+import type { CalendarMode } from '../calendar/adapter/adapter';
+import type { SizeVariant } from '../button';
+import type { Placement } from '@floating-ui/dom';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<Date | [Date, Date]>;
+        default: undefined;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    containerClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    start: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    end: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    min: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    mode: {
+        type: PropType<CalendarMode>;
+        default: string;
+    };
+    range: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minRange: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    maxRange: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => void;
+    change: (args_0: unknown) => void;
+    "update:start": (args_0: Date) => void;
+    "update:end": (args_0: Date) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<Date | [Date, Date]>;
+        default: undefined;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    containerClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    start: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    end: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    min: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    mode: {
+        type: PropType<CalendarMode>;
+        default: string;
+    };
+    range: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minRange: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    maxRange: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+    onChange?: ((args_0: unknown) => any) | undefined;
+    "onUpdate:start"?: ((args_0: Date) => any) | undefined;
+    "onUpdate:end"?: ((args_0: Date) => any) | undefined;
+}>, {
+    size: SizeVariant;
+    modelValue: Date | [Date, Date];
+    disabled: boolean;
+    error: boolean;
+    mode: "date" | "month" | "year";
+    max: Date;
+    placement: Placement;
+    start: Date;
+    end: Date;
+    readonly: boolean;
+    min: Date;
+    range: boolean;
+    minRange: string;
+    maxRange: string;
+    clearable: boolean;
+    containerClass: string | unknown[] | Record<string, any>;
+    placeholder: string;
+    format: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/dialog/Dialog.vue

@@ -0,0 +1,130 @@
+<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";
+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

@@ -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").DefineComponent<{}, {
+    show: typeof show;
+    hide: typeof hide;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;