@privyid/persona 1.2.1 → 1.2.2-dev.2

package/dist/components/global/use-singleton.d.ts

@@ -0,0 +1,21 @@
+import type { DefineComponent, Ref } from 'vue';
+export type Component = DefineComponent<any, any, any>;
+export type ComponentInstance<C extends Component> = InstanceType<C>;
+export interface GlobalInstance<C extends Component> {
+    component: C;
+    ref: Ref<ComponentInstance<C>>;
+}
+/**
+ * Reset all instances
+ */
+export declare function resetInstance(): Promise<void>;
+/**
+ * Create global component, return one if component is exist
+ * @param component Vue Component
+ */
+export declare function useSingleton<C extends Component>(component: C): Promise<ComponentInstance<C>>;
+/**
+ * Remove global component
+ * @param component Vue Component
+ */
+export declare function removeSingleton<C extends Component>(component: C): Promise<void>;

package/dist/components/global/use-singleton.mjs

@@ -0,0 +1,60 @@
+import PQueue from "./utils/queue.mjs";
+import {
+  createApp,
+  h,
+  ref,
+  unref,
+  shallowRef,
+  triggerRef,
+  nextTick
+} from "vue";
+let instances;
+let container;
+const queue = new PQueue();
+async function createInstance(id, component) {
+  if (!instances)
+    instances = shallowRef(/* @__PURE__ */ new Map());
+  if (!container) {
+    const target = document.createElement("div");
+    const app = createApp({
+      name: "GlobalContainer",
+      render: () => {
+        return [...instances.value.values()].map((item) => {
+          return h(item.component, { ref: item.ref });
+        });
+      }
+    });
+    document.body.append(target);
+    app.mount(target);
+    target.id = "global";
+    container = app;
+  }
+  let instance = instances.value.get(id);
+  if (!instance) {
+    instance = { component, ref: ref() };
+    instances.value.set(id, instance);
+    triggerRef(instances);
+    await nextTick();
+  }
+  return unref(instance.ref);
+}
+async function removeInstance(id) {
+  if (instances && container) {
+    instances.value.delete(id);
+    triggerRef(instances);
+    await nextTick();
+  }
+}
+export async function resetInstance() {
+  if (instances) {
+    instances.value.clear();
+    triggerRef(instances);
+    await nextTick();
+  }
+}
+export async function useSingleton(component) {
+  return await queue.add(() => createInstance(component, component));
+}
+export async function removeSingleton(component) {
+  return await queue.add(() => removeInstance(component));
+}

package/dist/components/global/utils/queue.d.ts

@@ -0,0 +1,16 @@
+type Task<R> = () => Promise<R>;
+interface QueueJob<R> {
+    resolve: (value: R) => void;
+    reject: (reason: unknown) => void;
+    run: Task<R>;
+}
+export default class Queue {
+    protected queue: Array<QueueJob<unknown>>;
+    protected running: boolean;
+    constructor();
+    protected enqueue(job: QueueJob<unknown>): void;
+    protected dequeue(): QueueJob<unknown> | undefined;
+    add<R>(task: Task<R>): Promise<R>;
+    protected run(): void;
+}
+export {};

package/dist/components/global/utils/queue.mjs

@@ -0,0 +1,35 @@
+export default class Queue {
+  queue;
+  running;
+  constructor() {
+    this.queue = [];
+    this.running = false;
+  }
+  enqueue(job) {
+    this.queue.push(job);
+  }
+  dequeue() {
+    return this.queue.shift();
+  }
+  async add(task) {
+    return await new Promise((resolve, reject) => {
+      const queue = {
+        resolve,
+        reject,
+        run: task
+      };
+      this.enqueue(queue);
+      this.run();
+    });
+  }
+  run() {
+    if (this.queue.length > 0 && !this.running) {
+      this.running = true;
+      const job = this.dequeue();
+      job.run().then(job.resolve).catch(job.reject).finally(() => {
+        this.running = false;
+        this.run();
+      });
+    }
+  }
+}

package/dist/components/heading/Heading.vue

@@ -0,0 +1,128 @@
+<template>
+  <component
+    :is="elementNames"
+    data-testid="heading"
+    class="heading"
+    :class="classNames">
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  element: {
+    type: String,
+    default: "h3"
+  },
+  weight: {
+    type: String,
+    default: "normal"
+  },
+  transform: {
+    type: String,
+    default: "normalcase"
+  }
+});
+const elementNames = computed(() => {
+  return props.element;
+});
+const classNames = computed(() => {
+  const result = [`${props.element}`];
+  if (props.transform)
+    result.push(`heading--${props.transform}`);
+  if (props.weight)
+    result.push(`heading--${props.weight}`);
+  return result;
+});
+</script>
+
+<style lang="postcss">
+.h {
+  &1 {
+    @apply text-7xl;
+  }
+  &2 {
+    @apply text-6xl;
+  }
+  &3 {
+    @apply text-5xl;
+  }
+  &4 {
+    @apply text-4xl;
+  }
+  &5 {
+    @apply text-2xl;
+  }
+  &6 {
+    @apply text-xl;
+  }
+
+  &eading {
+    /**
+    * Weight variant
+    * of heading
+    */
+    &:not([class^='text-'], [class*='text-']) {
+      @apply text-default;
+      @apply dark:text-dark-default;
+    }
+
+    &--thin {
+      @apply font-thin;
+    }
+
+    &--extralight {
+      @apply font-extralight;
+    }
+
+    &--light {
+      @apply font-light;
+    }
+
+    &--normal {
+      @apply font-normal;
+    }
+
+    &--semibold {
+      @apply font-semibold;
+    }
+
+    &--medium {
+      @apply font-medium;
+    }
+
+    &--bold {
+      @apply font-bold;
+    }
+
+    &--extrabold {
+      @apply font-extrabold;
+    }
+
+    &--black {
+      @apply font-black;
+    }
+
+    /**
+    * Text transform
+    * of heading
+    */
+    &--normalcase {
+      @apply normal-case;
+    }
+
+    &--lowercase {
+      @apply lowercase;
+    }
+
+    &--capitalize {
+      @apply capitalize;
+    }
+
+    &--uppercase {
+      @apply uppercase;
+    }
+  }
+}
+</style>

package/dist/components/heading/Heading.vue.d.ts

@@ -0,0 +1,49 @@
+import type { PropType } from 'vue';
+import type { ElementVariant, TransformVariant, WeightVariant } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    weight: WeightVariant;
+    transform: TransformVariant;
+    element: ElementVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,3 @@
+export type ElementVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type WeightVariant = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
+export type TransformVariant = 'normalcase' | 'lowercase' | 'capitalize' | 'uppercase';

package/dist/components/input/Input.vue

@@ -0,0 +1,215 @@
+<template>
+  <div
+    class="input"
+    :class="containerClass"
+    data-testid="input-container">
+    <span
+      v-if="$slots.prepend"
+      class="input__prepend">
+      <slot name="prepend" />
+    </span>
+    <input
+      ref="input"
+      v-model="model"
+      class="input__form"
+      data-testid="input"
+      :disabled="disabled"
+      :readonly="readonly"
+      :class="classNames"
+      v-bind="$attrs"
+      @beforeinput="checkOnInput(accept, $event)">
+    <IconClear
+      v-show="clearable && model"
+      class="input__clear"
+      data-testid="input-clear"
+      @click="clear" />
+    <span
+      v-if="$slots.append"
+      class="input__append">
+      <slot name="append" />
+    </span>
+  </div>
+</template>
+
+<script setup>
+import {
+  computed,
+  inject,
+  ref
+} from "vue";
+import { useVModel } from ".";
+import IconClear from "@privyid/persona-icon/vue/close-circle-solid/20.vue";
+import { INPUTGROUP_SETTING } from "../input-group";
+import { checkOnInput } from "./utils/accept";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    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
+  },
+  accept: {
+    type: String,
+    default: void 0
+  }
+});
+const emit = defineEmits(["update:modelValue", "clear"]);
+const slots = defineSlots();
+const input = ref();
+const model = useVModel(props);
+const setting = inject(INPUTGROUP_SETTING, void 0, false);
+const classNames = computed(() => {
+  const result = [];
+  if (setting?.size.value)
+    result.push(`input--${setting?.size.value}`);
+  else if (props.size)
+    result.push(`input--${props.size}`);
+  if (props.disabled)
+    result.push("input--disabled");
+  if (props.readonly)
+    result.push("input--readonly");
+  if (props.error)
+    result.push("input--error", "state--error");
+  if (props.clearable)
+    result.push("input--clearable");
+  if (slots.prepend)
+    result.push("input--has-prepend");
+  if (slots.append)
+    result.push("input--has-append");
+  return result;
+});
+function clear(event) {
+  emit("clear", event);
+  if (!props.disabled && !props.readonly && !event.defaultPrevented)
+    model.value = "";
+}
+defineExpose({
+  input,
+  clear
+});
+</script>
+
+<style lang="postcss">
+.input {
+  @apply w-full relative bg-default rounded;
+  @apply dark:bg-dark-default;
+
+  &__form {
+    @apply py-[10px] px-3 text-base relative rounded border border-solid border-subtlest hover:border-subtle text-default w-full outline-none bg-transparent;
+    @apply dark:border-dark-subtlest hover:dark:border-dark-subtle dark:text-dark-default dark:bg-transparent;
+
+    &::placeholder,
+    &__placeholder {
+      @apply text-muted;
+      @apply dark:text-dark-muted;
+    }
+
+    &:disabled,
+    &--disabled,
+    &[disabled="true"],
+    .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;
+    }
+
+    &:focus {
+      @apply border-subtle ring-4 ring-subtle/10 z-1;
+      @apply dark:border-dark-subtle dark:ring-dark-subtle/10;
+    }
+  }
+
+  &--xs {
+    @apply text-sm py-[2px] rounded-xs;
+  }
+
+  &--sm {
+    @apply py-[4px] rounded-sm;
+  }
+
+  &--md {
+    @apply py-[10px];
+  }
+
+  &--lg {
+    @apply py-4;
+  }
+
+  .state--error,
+  .state--error & > &__form:not(.no--error),
+  &--error,
+  &-group--error.input-group .input > .input__form:not(.no--error) {
+    @apply border-danger-emphasis hover:border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
+    @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
+  }
+
+  .input__clear {
+    @apply text-default/30 cursor-pointer hover:text-danger z-[2];
+    @apply dark:text-dark-default/30 hover:dark:text-dark-danger;
+  }
+
+  &__prepend,
+  &__append {
+    @apply absolute top-0 h-full flex items-center z-[2];
+  }
+
+  &__prepend {
+    @apply left-3;
+  }
+
+  &__append {
+    @apply right-3;
+  }
+
+  &--has {
+    &-prepend {
+      @apply pl-9;
+    }
+
+    &-append {
+      @apply pr-9;
+    }
+  }
+
+  &--clearable {
+    @apply pr-9;
+
+    + .input__clear {
+      @apply absolute right-3 top-1/2 -translate-y-1/2;
+    }
+
+    &:where(.input--has-append) {
+      @apply pr-[4.15rem];
+      + .input__clear {
+        @apply right-[2.45rem];
+      }
+    }
+  }
+}
+</style>

package/dist/components/input/Input.vue.d.ts

@@ -0,0 +1,111 @@
+import type { PropType, VNode } from 'vue';
+import type { SizeVariant } from '../button';
+import type { AcceptVariant } from './utils/accept';
+declare function clear(event: MouseEvent): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        prepend(): VNode[];
+        append(): VNode[];
+    }> & {
+        prepend(): VNode[];
+        append(): VNode[];
+    };
+    refs: {
+        input: HTMLInputElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        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;
+    };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
+}>, {
+    input: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+    clear: typeof clear;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: (args_0: MouseEvent) => void;
+    "update:modelValue": (args_0: string | number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        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;
+    };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onClear?: ((args_0: MouseEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: string | number) => any) | undefined;
+}>, {
+    size: SizeVariant;
+    modelValue: string | number;
+    disabled: boolean;
+    error: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    containerClass: string | unknown[] | Record<string, any>;
+    accept: AcceptVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,6 @@
+import type { Ref } from 'vue';
+export interface InputProps<V = string> {
+    modelValue?: V;
+}
+export declare function useVModel<V>(props: InputProps<V>): Ref<V>;
+export { type AcceptVariant, isAccepted, removeUnaccepted, checkOnInput, } from './utils/accept';

package/dist/components/input/index.mjs

@@ -0,0 +1,25 @@
+import { syncRef } from "@vueuse/core";
+import {
+  computed,
+  getCurrentInstance,
+  ref
+} from "vue";
+export function useVModel(props) {
+  const localValue = ref(props.modelValue);
+  const { emit } = getCurrentInstance();
+  const model = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(value) {
+      emit("update:modelValue", value);
+    }
+  });
+  syncRef(localValue, model, { immediate: false });
+  return localValue;
+}
+export {
+  isAccepted,
+  removeUnaccepted,
+  checkOnInput
+} from "./utils/accept.mjs";

package/dist/components/input/utils/accept.d.ts

@@ -0,0 +1,26 @@
+import type { LiteralUnion } from 'type-fest';
+export declare const AcceptPresets: {
+    readonly num: "\\d";
+    readonly numeric: "\\d";
+    readonly digit: "\\d";
+    readonly alpha: "A-Za-z";
+    readonly 'alpha-num': "A-Za-z\\d";
+    readonly 'alpha-num-space': "A-Za-z\\d\\s";
+    readonly 'alpha-num-space-symbol': "A-Za-z\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly 'alpha-numeric': "A-Za-z\\d";
+    readonly 'alpha-numeric-space': "A-Za-z\\d\\s";
+    readonly 'alpha-numeric-space-symbol': "A-Za-z\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly 'alpha-space': "A-Za-z\\s";
+    readonly 'alpha-space-symbol': "A-Za-z\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly 'num-space': "\\d\\s";
+    readonly 'num-space-symbol': "\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly 'numeric-space': "\\d\\s";
+    readonly 'numeric-space-symbol': "\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly 'non-numeric': "A-Za-z\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly 'non-alpha': "\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+    readonly text: "A-Za-z\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+};
+export type AcceptVariant = LiteralUnion<keyof typeof AcceptPresets, string>;
+export declare function isAccepted(accept: AcceptVariant | undefined, text: string): boolean;
+export declare function removeUnaccepted(accept: AcceptVariant | undefined, text: string): string;
+export declare function checkOnInput(accept: AcceptVariant | undefined, event: Event): void;