@privyid/persona 1.2.1 → 1.2.2-dev.2

package/dist/components/dialog/DialogFooter.vue

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

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

@@ -0,0 +1,132 @@
+import type { PropType } from 'vue';
+import type { StyleVariant as FooterButtonStyleVariant, ColorVariant as FooterButtonColorVariant } from '../button';
+import type { FooterAlignVariant } from '.';
+import type { AdditionalAttr } from '../global/types';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    align: {
+        type: PropType<FooterAlignVariant>;
+        default: string;
+    };
+    cancelClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    cancelVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cancelColor: {
+        type: PropType<FooterButtonColorVariant>;
+        default: string;
+    };
+    cancelVariant: {
+        type: PropType<FooterButtonStyleVariant>;
+        default: string;
+    };
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelAttrs: {
+        type: PropType<AdditionalAttr>;
+        default: undefined;
+    };
+    confirmClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    confirmVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirmColor: {
+        type: PropType<FooterButtonColorVariant>;
+        default: string;
+    };
+    confirmVariant: {
+        type: PropType<FooterButtonStyleVariant>;
+        default: string;
+    };
+    confirmText: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmAttrs: {
+        type: PropType<AdditionalAttr>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => void;
+    confirm: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    align: {
+        type: PropType<FooterAlignVariant>;
+        default: string;
+    };
+    cancelClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    cancelVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cancelColor: {
+        type: PropType<FooterButtonColorVariant>;
+        default: string;
+    };
+    cancelVariant: {
+        type: PropType<FooterButtonStyleVariant>;
+        default: string;
+    };
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelAttrs: {
+        type: PropType<AdditionalAttr>;
+        default: undefined;
+    };
+    confirmClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    confirmVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirmColor: {
+        type: PropType<FooterButtonColorVariant>;
+        default: string;
+    };
+    confirmVariant: {
+        type: PropType<FooterButtonStyleVariant>;
+        default: string;
+    };
+    confirmText: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmAttrs: {
+        type: PropType<AdditionalAttr>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    align: FooterAlignVariant;
+    cancelClass: string;
+    cancelVisible: boolean;
+    cancelColor: FooterButtonColorVariant;
+    cancelVariant: FooterButtonStyleVariant;
+    cancelText: string;
+    cancelAttrs: AdditionalAttr;
+    confirmClass: string;
+    confirmVisible: boolean;
+    confirmColor: FooterButtonColorVariant;
+    confirmVariant: FooterButtonStyleVariant;
+    confirmText: string;
+    confirmAttrs: AdditionalAttr;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,52 @@
+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';
+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

@@ -0,0 +1,86 @@
+import { useSingleton } from "../global/use-singleton.mjs";
+import defu from "defu";
+import {
+  ref,
+  h,
+  mergeProps
+} from "vue";
+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;
+}

package/dist/components/divider/Divider.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    data-testid="divider"
+    class="divider"
+    :class="classNames" />
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  vertical: {
+    type: Boolean,
+    default: false
+  }
+});
+const classNames = computed(() => {
+  const result = [];
+  if (props.vertical)
+    result.push("divider--vertical");
+  else
+    result.push("divider--horizontal");
+  return result;
+});
+</script>
+
+<style lang="postcss">
+.divider {
+  @apply bg-emphasis-alpha;
+  @apply dark:bg-dark-emphasis-alpha my-2;
+
+  &&--horizontal {
+    @apply w-full h-[1px];
+  }
+
+  &&--vertical,
+  .input-group > & {
+    @apply flex items-center my-0 py-3 border-subtle bg-transparent z-1 border-y;
+    @apply dark:border-dark-subtle dark:bg-transparent;
+
+    &::before {
+      @apply content-[''] bg-emphasis-alpha w-[1px] h-full;
+      @apply dark:bg-dark-emphasis-alpha;
+    }
+  }
+
+  .state--error & {
+    @apply border-danger-emphasis;
+    @apply dark:border-dark-danger-emphasis;
+
+    &::before {
+      @apply bg-danger-emphasis;
+      @apply dark:bg-dark-danger-emphasis;
+    }
+  }
+
+  .state--disabled & {
+    @apply bg-base border-subtle pointer-events-none text-muted;
+    @apply dark:bg-dark-base dark:border-dark-subtle dark:text-dark-muted;
+  }
+}
+</style>

package/dist/components/divider/Divider.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    vertical: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/dot/Dot.vue

@@ -0,0 +1,95 @@
+<template>
+  <span
+    data-testid="dot"
+    :class="classNames" />
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  color: {
+    type: String,
+    default: "default"
+  },
+  variant: {
+    type: String,
+    default: "default"
+  }
+});
+const classNames = computed(() => {
+  const result = ["dot"];
+  if (props.color)
+    result.push(`dot--${props.color}`);
+  if (props.variant)
+    result.push(`dot--variant-${props.variant}`);
+  return result;
+});
+</script>
+
+<style lang="postcss">
+/**
+* Component Name: Dot
+* Component URI : -
+* Date Created  : May 30, 2022
+* Last Update   : May 31, 2022
+*/
+
+/**
+* Dot is sub-component used for
+* Badge and Label components
+*/
+.dot {
+  /**
+  * Set size & shape of dot
+  */
+  @apply inline-block w-2 h-2 rounded-full box-border;
+
+  /**
+  * Provide colors variant
+  * default and 4 colors
+  * variant available
+  * primary, success
+  * warning & danger
+  */
+  &&--default {
+    --p-dot-bg-default: theme(backgroundColor.inverse);
+    --p-dot-bg-dark-default: theme(backgroundColor.dark.inverse);
+
+    @apply bg-[color:var(--p-dot-bg-default)];
+    @apply dark:bg-[color:var(--p-dot-bg-dark-default)];
+  }
+
+  &&--primary {
+    @apply bg-brand-accent;
+    @apply dark:bg-dark-brand-accent;
+  }
+
+  &&--info {
+    @apply bg-info-emphasis;
+    @apply dark:bg-dark-info-emphasis;
+  }
+
+  &&--success {
+    @apply bg-success-emphasis;
+    @apply dark:bg-dark-success-emphasis;
+  }
+
+  &&--warning {
+    @apply bg-warning-emphasis;
+    @apply dark:bg-dark-warning-emphasis;
+  }
+
+  &&--danger {
+    @apply bg-danger-emphasis;
+    @apply dark:bg-dark-danger-emphasis;
+  }
+
+  /**
+  * Set width of badge
+  * in pills variant
+  */
+  &&--variant-pills {
+    @apply w-12;
+  }
+}
+</style>

package/dist/components/dot/Dot.vue.d.ts

@@ -0,0 +1,26 @@
+import type { PropType } from 'vue';
+import type { StyleVariant } from '.';
+import type { ColorVariant } from '../button';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    variant: StyleVariant;
+    color: ColorVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1 @@
+export type StyleVariant = 'default' | 'pills';