@privyid/persona 0.19.0 → 0.21.0

package/dist/components/table-static/TableStatic.vue

@@ -0,0 +1,333 @@
+<template>
+  <div
+    data-testid="table-static"
+    class="table-static"
+    :class="classNames">
+    <table
+      class="table-static__table"
+      :class="tableClass">
+      <thead
+        v-if="!noLabel"
+        class="table-static__headers">
+        <tr :class="trClass">
+          <th
+            v-if="draggable"
+            class="table-static__header table-static__drag" />
+          <th
+            v-if="selectable"
+            class="table-static__header table-static__checkbox">
+            <Checkbox
+              v-model="selectAll"
+              data-testid="table-static-select-all"
+              :indeterminate="indeterminate" />
+          </th>
+          <th
+            v-for="field in fields"
+            :key="field.key"
+            class="table-static__header"
+            data-testid="table-static-header"
+            :style="field.width ? { width: withUnit(field.width) } : {}"
+            :class="field.thClass"
+            :data-header="field.key">
+            <slot
+              :name="`head(${field.key})`"
+              :label="field.label"
+              :field="field">
+              {{ field.label }}
+            </slot>
+          </th>
+        </tr>
+      </thead>
+      <Draggable
+        v-if="items.length > 0"
+        v-model="rows"
+        class="table-static__body"
+        handle=".table-static__drag"
+        item-key="_key"
+        tag="tbody"
+        :disabled="!draggable">
+        <template #item="{ element, index }">
+          <tr
+            class="table-static__row"
+            :class="trClass"
+            data-role="row">
+            <slot
+              name="row"
+              :item="element"
+              :index="index">
+              <td
+                v-if="draggable"
+                class="table-static__cell table-static__drag"
+                data-testid="table-static-drag-handle">
+                <IconDrag />
+              </td>
+              <td
+                v-if="selectable"
+                class="table-static__cell table-static__checkbox">
+                <Checkbox
+                  v-model="model"
+                  data-testid="table-static-select"
+                  :value="withoutKey(element)"
+                  :disabled="element._selectable === false" />
+              </td>
+              <td
+                v-for="field in fields"
+                :key="field.key"
+                class="table-static__cell"
+                data-testid="table-static-cell"
+                :class="field.tdClass"
+                :data-cell="field.key">
+                <slot
+                  :name="`cell(${field.key})`"
+                  :index="index"
+                  :item="element">
+                  {{ field.formatter(element[field.key], element) }}
+                </slot>
+              </td>
+            </slot>
+          </tr>
+        </template>
+      </Draggable>
+      <tbody
+        v-else
+        class="table-static__body">
+        <tr
+          class="table-static__row">
+          <td
+            :colspan="fields.length"
+            data-testid="table-static-empty"
+            class="table-static__cell table-static__cell--empty datatable__state-empty">
+            <slot name="empty">
+              <span class="flex items-center justify-center text-subtle dark:text-dark-subtle">
+                {{ emptyLabel }}
+              </span>
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts" setup generic="T extends Record<string, unknown>">
+import {
+  computed,
+  HTMLAttributes,
+  PropType,
+  VNode,
+} from 'vue-demi'
+import {
+  ApperanceVariant,
+  TableField,
+  withKey,
+  withoutKey,
+  withUnit,
+} from '../table'
+import Checkbox from '../checkbox/Checkbox.vue'
+import { useVModel } from '../input'
+import IconDrag from '@privyid/persona-icon/vue/draggable/20.vue'
+import Draggable from 'vuedraggable'
+
+const props = defineProps({
+  apperance: {
+    type   : String as PropType<ApperanceVariant>,
+    default: 'table',
+  },
+  modelValue: {
+    type   : Array as PropType<T[]>,
+    default: () => ([]),
+  },
+  fields: {
+    type   : Array as PropType<TableField<T>[]>,
+    default: () => ([]),
+  },
+  items: {
+    type   : Array as PropType<T[]>,
+    default: () => ([]),
+  },
+  selectable: {
+    type   : Boolean,
+    default: false,
+  },
+  draggable: {
+    type   : Boolean,
+    default: false,
+  },
+  emptyLabel: {
+    type   : String,
+    default: 'There are no records to show',
+  },
+  noLabel: {
+    type   : Boolean,
+    default: false,
+  },
+  tableClass: {
+    type: [
+      String,
+      Array,
+      Object,
+    ] as PropType<HTMLAttributes['class']>,
+    default: undefined,
+  },
+  trClass: {
+    type: [
+      String,
+      Array,
+      Object,
+    ] as PropType<HTMLAttributes['class']>,
+    default: undefined,
+  },
+})
+
+const model = useVModel(props)
+
+// eslint-disable-next-line func-call-spacing
+const emit = defineEmits<{
+  (event: 'update:modelValue', items: T[]): void,
+  (event: 'update:items', items: T[]): void,
+}>()
+
+const rows = computed<T[]>({
+  get () {
+    return props.items.map((item) => {
+      return withKey(item) as T
+    })
+  },
+  set (items) {
+    emit('update:items', items)
+  },
+})
+
+const classNames = computed(() => {
+  const result: string[] = []
+
+  if (props.apperance)
+    result.push(`table-static--${props.apperance}`)
+
+  if (props.selectable)
+    result.push('table-static--selectable')
+
+  if (props.draggable)
+    result.push('table-static--draggable')
+
+  if (props.noLabel)
+    result.push('table-static--no-label')
+
+  return result
+})
+
+const selectableRows = computed(() => {
+  return props.items.filter((item) => item._selectable !== false)
+})
+
+const selectAll = computed({
+  get () {
+    return model.value.length === selectableRows.value.length
+  },
+  set (value) {
+    if (selectAll.value !== value) {
+      model.value = value
+        ? selectableRows.value.map((item) => withoutKey(item)) as T[]
+        : []
+    }
+  },
+})
+
+const indeterminate = computed(() => {
+  return model.value.length > 0
+    && model.value.length < selectableRows.value.length
+})
+
+defineSlots<{
+  empty:() => VNode,
+  row:(props: { index: number, item: T, [key: string]: any }) => VNode,
+  [colKey: `head(${string})`]:(props: { label: string, field: TableField<T>, [key: string]: any }) => VNode,
+  [colKey: `cell(${string})`]:(props: { index: number, item: T, [key: string]: any }) => VNode,
+}>()
+</script>
+
+<style lang="postcss">
+.table-static {
+  --p-table-bg: theme(backgroundColor.default.DEFAULT);
+  --p-table-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+  --p-table-header-bg: var(--p-table-bg);
+  --p-table-header-bg-dark: var(--p-table-bg-dark);
+  --p-table-border: theme(borderColor.default.DEFAULT);
+  --p-table-border-dark: theme(borderColor.dark.default.DEFAULT);
+
+  @apply w-full overflow-auto overscroll-contain;
+
+  &__table {
+    @apply min-w-full table;
+  }
+
+  &__headers {
+    @apply pt-4 bg-[color:var(--p-table-bg)];
+    @apply dark:bg-[color:var(--p-table-bg-dark)];
+
+    .table-static__header {
+      @apply px-3 text-xs border-x-0;
+
+      &.table-static__drag,
+      &.table-static__checkbox {
+        @apply w-[1%];
+      }
+    }
+
+    + .table-static__body {
+      @apply pt-2;
+    }
+  }
+
+  & &__row > &__cell {
+    @apply ml-2 py-4 px-3 text-sm text-default whitespace-pre;
+    @apply dark:text-dark-default;
+
+    &.table-static__drag {
+      @apply cursor-grabbing md:mx-3;
+    }
+  }
+
+  & &__headers &__header {
+    @apply bg-[color:var(--p-table-header-bg)];
+    @apply dark:bg-[color:var(--p-table-header-bg-dark)];
+  }
+
+  & &__body > &__row {
+    @apply border-t border-[color:var(--p-table-border)] bg-[color:var(--p-table-bg)];
+    @apply dark:border-[color:var(--p-table-border-dark)] dark:bg-[color:var(--p-table-bg-dark)];
+  }
+
+  &--no-label {
+    .table-static__body > .table-static__row:first-child {
+      @apply border-t-0;
+    }
+  }
+
+  &--table {
+    .table-static__row .table-static__cell,
+    .table-static__headers .table-static__header {
+      @apply border-0;
+    }
+  }
+
+  &--card {
+    .table-static__table {
+      @apply border-separate border-spacing-y-2;
+    }
+
+    .table-static__row .table-static__cell,
+    .table-static__headers .table-static__header {
+      @apply border-x-0 border-y;
+
+      &:first-child {
+        @apply rounded-l border-l;
+      }
+
+      &:last-child {
+        @apply rounded-r border-r;
+      }
+    }
+  }
+}
+</style>

package/dist/components/tabs/Tab.vue.d.ts

@@ -17,7 +17,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    disabled: boolean;
     title: string;
+    disabled: boolean;
 }, {}>;
 export default _default;

package/dist/components/text/Text.vue

@@ -35,8 +35,7 @@ export default defineComponent({
   },
   setup(props) {
     const hyperlink = computed(() => {
-      const tag = props.href ? "a" : "span";
-      return tag;
+      return props.href ? "a" : "span";
     });
     const classNames = computed(() => {
       const result = [""];
@@ -62,19 +61,30 @@ export default defineComponent({
 
 <style lang="postcss">
 .freetext {
-  &--hyperlink {
-    @apply underline decoration-solid text-info;
-    @apply dark:text-dark-info;
-  }
-
   /**
   * Weight variant
   * of text
   */
+  &--thin {
+    @apply font-thin;
+  }
+
+  &--extralight {
+    @apply font-extralight;
+  }
+
+  &--light {
+    @apply font-light;
+  }
+
   &--normal {
     @apply font-normal;
   }
 
+  &--semibold {
+    @apply font-semibold;
+  }
+
   &--medium {
     @apply font-medium;
   }
@@ -83,6 +93,14 @@ export default defineComponent({
     @apply font-bold;
   }
 
+  &--extrabold {
+    @apply font-extrabold;
+  }
+
+  &--black {
+    @apply font-black;
+  }
+
   /**
   * Text transform
   * of text
@@ -103,6 +121,14 @@ export default defineComponent({
     @apply uppercase;
   }
 
+  /**
+  * Hyperlink style
+   */
+  &--hyperlink {
+    @apply underline decoration-solid text-info;
+    @apply dark:text-dark-info;
+  }
+
   /**
   * Heading Style
   */
@@ -130,6 +156,7 @@ export default defineComponent({
   */
   &--subheading {
     @apply text-base font-medium;
+
   }
   &--subheading2 {
     @apply text-sm tracking-wide font-medium;
@@ -162,26 +189,32 @@ export default defineComponent({
     @apply text-xs;
   }
   &--caption2 {
-    @apply text-tn;
+    @apply text-tn font-medium;
   }
 
   /**
   * Form Label Style
   */
   &--formlabel {
-    @apply font-medium text-sm tracking-wide text-subtle;
-    @apply dark:text-dark-subtle;
+    @apply font-medium text-sm tracking-wide;
   }
   &--formlabel2 {
-    @apply font-medium text-xs leading-tightest text-subtle;
-    @apply dark:text-dark-subtle;
+    @apply font-bold text-xs leading-tightest;
+  }
+
+  &--formlabel,
+  &--formlabel2 {
+    &:not([class^='text-'], [class*='text-']) {
+      @apply text-subtle;
+      @apply dark:text-dark-subtle;
+    }
   }
 
   /**
   * Overline Style
   */
   &--overline {
-    @apply text-tn tracking-widest uppercase;
+    @apply text-tn font-medium tracking-widest uppercase;
   }
 }
 </style>

package/dist/components/text/Text.vue.d.ts

@@ -19,8 +19,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }, {
-    hyperlink: import("vue-demi").ComputedRef<String>;
-    classNames: import("vue-demi").ComputedRef<String[]>;
+    hyperlink: import("vue-demi").ComputedRef<"a" | "span">;
+    classNames: import("vue-demi").ComputedRef<string[]>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     variant: {
         type: PropType<StyleVariant>;

package/dist/components/toggle/Toggle.vue.d.ts

@@ -6,15 +6,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: boolean;
     };
     checked: {
@@ -51,15 +51,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: boolean;
     };
     checked: {
@@ -97,8 +97,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     readonly: boolean;
     uncheckedValue: string | number | boolean | Record<string, any> | unknown[] | Date;
     checked: boolean;
+    noLabel: boolean;
     checkedLabel: string;
     uncheckedLabel: string;
-    noLabel: boolean;
 }, {}>;
 export default _default;

package/dist/components/tour/Tour.vue.d.ts

@@ -1,11 +1,9 @@
-import TourDialog from './TourDialog.vue';
-type TourDialogProps = Partial<InstanceType<typeof TourDialog>['$props']>;
 declare const _default: import("vue-demi").DefineComponent<{}, {
     isShow: import("vue-demi").Ref<boolean>;
     dialog: import("vue-demi").ShallowRef<any>;
     target: import("vue-demi").ShallowRef<HTMLElement | undefined>;
-    show: (targetEl: HTMLElement, options: TourDialogProps) => void;
+    show: (targetEl: HTMLElement, options: any) => void;
     hide: () => void;
-    config: import("vue-demi").ShallowRef<Partial<any> | undefined>;
+    config: import("vue-demi").ShallowRef<any>;
 }, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/dist/components/tour/core/base.mjs

@@ -6,6 +6,17 @@ export var TourDirection = /* @__PURE__ */ ((TourDirection2) => {
   return TourDirection2;
 })(TourDirection || {});
 export class AbstractTour {
+  name;
+  /**
+   * Step direction, 1 for forward (next), -1 for backward (prev)
+   */
+  direction;
+  parent;
+  options;
+  onNextHooks;
+  onPrevHooks;
+  runOnPrevHooks;
+  runOnNextHooks;
   constructor(options) {
     this.direction = 1 /* FORWARD */;
     this.name = options?.name ?? Symbol("TourID");

package/dist/components/tour/core/step/conditional.mjs

@@ -7,6 +7,7 @@ export var ConditionalType = /* @__PURE__ */ ((ConditionalType2) => {
   return ConditionalType2;
 })(ConditionalType || {});
 export default class StepCondition extends AbstractStep {
+  routines;
   constructor(options) {
     super(options);
     this.routines = [

package/dist/components/tour/core/step/visit.mjs

@@ -2,10 +2,7 @@ import { useRouter } from "../../../global/router.mjs";
 import { TourDirection } from "../base.mjs";
 import { AbstractStep } from "../step.mjs";
 export default class StepVisit extends AbstractStep {
-  constructor() {
-    super(...arguments);
-    this.lastURL = "";
-  }
+  lastURL = "";
   async run() {
     const router = useRouter();
     const options = this.getOptions();

package/dist/components/tour/core/step.mjs

@@ -1,9 +1,6 @@
 import { AbstractTour, TourDirection } from "./base.mjs";
 export class AbstractStep extends AbstractTour {
-  constructor() {
-    super(...arguments);
-    this.cleanFns = [];
-  }
+  cleanFns = [];
   async dispose() {
     return await Promise.allSettled(this.cleanFns.map((clean) => clean()));
   }

package/dist/components/tour/core/tour.mjs

@@ -5,6 +5,10 @@ import {
   TourDirection
 } from "./base.mjs";
 export class Tour extends AbstractTour {
+  index;
+  steps;
+  onFinishedHooks;
+  running;
   constructor(options) {
     super(options);
     this.running = false;

package/dist/components/utils/base64.mjs

@@ -26,10 +26,10 @@ export function fromBase64(dataurl, filename, mimeType) {
     const [meta, body] = dataurl.split(",");
     const mime = mimeType ?? meta.match(/:(.*?);/)[1];
     const buffer = window.atob(body);
-    const u8int = new Uint8Array(buffer.length);
+    const uint8 = new Uint8Array(buffer.length);
     for (let i = 0; i < buffer.length; i++)
-      u8int[i] = buffer.codePointAt(i);
-    return new globalThis.File([u8int], name, { type: mime });
+      uint8[i] = buffer.codePointAt(i);
+    return new globalThis.File([uint8], name, { type: mime });
   } catch (error) {
     if (import.meta.env.DEV)
       console.warn(error);

package/dist/core/index.d.ts

@@ -13,9 +13,10 @@ export { toBase64, fromBase64, } from '../components/utils/base64';
 export { default as CaptureAdapter, } from '../components/camera/adapter/capture';
 export { default as LivenessAdapter, } from '../components/camera/adapter/liveness';
 export { default as QrCodeAdapter, } from '../components/camera/adapter/qr-code';
+export { defineAdapter, } from '../components/camera/adapter/adapter';
 export { defineFilter, } from '../components/filterbar';
 export { markdown, } from '../components/markdown';
-export { initAppContext, useAppContext, } from '../components/global/context';
+export { useStore, initStore, createStore, setStore, setLang, getLang, useLang, type State, } from '../components/global/store';
 export { useRouter, installRouter, } from '../components/global/router';
 export { createTour, } from '../components/tour';
 export { usePasswordStrength, } from '../components/input-password';
@@ -23,3 +24,6 @@ export { usePreview, } from '../components/cropper';
 export { usePdfContext, } from '../components/pdf-viewer';
 export { defineNavigation, } from '../components/breadcrumbs';
 export type { PdfHelipadResult, } from '../components/pdf-helipad';
+export { useStep, } from '../components/steps';
+export { defineAccordion, } from '../components/accordion';
+export { useVModel, } from '../components/input';

package/dist/core/index.mjs

@@ -48,6 +48,9 @@ export {
 export {
   default as QrCodeAdapter
 } from "../components/camera/adapter/qr-code";
+export {
+  defineAdapter
+} from "../components/camera/adapter/adapter";
 export {
   defineFilter
 } from "../components/filterbar";
@@ -55,9 +58,14 @@ export {
   markdown
 } from "../components/markdown";
 export {
-  initAppContext,
-  useAppContext
-} from "../components/global/context";
+  useStore,
+  initStore,
+  createStore,
+  setStore,
+  setLang,
+  getLang,
+  useLang
+} from "../components/global/store";
 export {
   useRouter,
   installRouter
@@ -77,3 +85,12 @@ export {
 export {
   defineNavigation
 } from "../components/breadcrumbs";
+export {
+  useStep
+} from "../components/steps";
+export {
+  defineAccordion
+} from "../components/accordion";
+export {
+  useVModel
+} from "../components/input";