@privyid/persona 0.21.0 → 0.23.0

package/dist/components/strengthbar/Strengthbar.vue.d.ts

@@ -1,18 +1,18 @@
 declare const _default: import("vue-demi").DefineComponent<{
     length: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     value: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     min: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     max: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
 }, {
@@ -21,24 +21,24 @@ declare const _default: import("vue-demi").DefineComponent<{
     status: import("vue-demi").ComputedRef<"high" | "mid" | "low">;
 }, 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<{
     length: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     value: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     min: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     max: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
 }>>, {
-    value: string | number;
     length: string | number;
+    value: string | number;
     min: string | number;
     max: string | number;
 }, {}>;

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

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'vue-demi';
 import { LiteralUnion } from 'type-fest';
-type KeyType<T> = LiteralUnion<keyof T & string, string>;
-type LabelType<T> = LiteralUnion<Capitalize<keyof T & string>, string>;
+export type KeyType<T> = LiteralUnion<keyof T & string, string>;
+export type LabelType<T> = LiteralUnion<Capitalize<keyof T & string>, string>;
 export type ApperanceVariant = 'card' | 'table';
 export interface TableField<T = Record<string, unknown>> {
     /**
@@ -24,12 +24,10 @@ export interface TableField<T = Record<string, unknown>> {
     thClass?: HTMLAttributes['class'];
 }
 export declare function baseFormatter(value: unknown): string;
-export declare function defineTable<T>(fields: Array<TableField<T>> | string[]): Array<TableField<T>>;
-export declare function withKey(item: Record<string, unknown>): Omit<Record<string, unknown>, "_key"> & Omit<{
+export declare function defineTable<T = unknown>(fields: Array<TableField<T>> | string[]): Array<TableField<T>>;
+export declare function withKey(item: object): Omit<object, never> & Omit<{
     _key: symbol;
-}, "_key"> & {
-    _key: unknown;
-};
+}, never> & {};
 export declare function withoutKey(item: Record<string, unknown>): Pick<Record<string, unknown>, string>;
 /**
  * Add unit to unitless value
@@ -37,4 +35,3 @@ export declare function withoutKey(item: Record<string, unknown>): Pick<Record<s
  * @param unit default unit
  */
 export declare function withUnit(value?: number | string | undefined, unit?: string): string | number | undefined;
-export {};

package/dist/components/table-flex/TableFlex.vue

@@ -107,7 +107,7 @@
   </div>
 </template>
 
-<script lang="ts" setup generic="T extends Record<string, unknown>">
+<script lang="ts" setup generic="T">
 import {
   computed,
   HTMLAttributes,
@@ -120,6 +120,7 @@ import {
   withKey,
   withoutKey,
   withUnit,
+  KeyType,
 } from '../table'
 import Checkbox from '../checkbox/Checkbox.vue'
 import { useVModel } from '../input'
@@ -178,17 +179,15 @@ const props = defineProps({
 })
 
 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 emit  = defineEmits<{
+  'update:modelValue': [T[]],
+  'update:items': [T[]],
 }>()
 
 const rows = computed<T[]>({
   get () {
     return props.items.map((item) => {
-      return withKey(item) as T
+      return withKey(item as Record<string, unknown>) as T
     })
   },
   set (items) {
@@ -215,10 +214,14 @@ const classNames = computed(() => {
 })
 
 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,
+  empty:() => VNode[],
+  row:(props: { index: number, item: T }) => VNode[],
+  [K: `cell(${string})`]:(props: { index: number }) => VNode[],
+  [K: `head(${string})`]:(props: { field: TableField<T>, label: string }) => VNode[],
+} & {
+  [K in KeyType<T> as `cell(${K})`]:(props: { item: T, index: number }) => VNode[]
+} & {
+  [K in KeyType<T> as `head(${K})`]:(props: { field: TableField<T>, label: string }) => VNode[]
 }>()
 </script>
 

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

@@ -1,115 +1,112 @@
 <template>
-  <div
+  <TableStaticRoot
     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">
+    :scrollable="scrollable"
+    :class="classNames"
+    :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">
-          <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>
+          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>
-      </tbody>
-    </table>
-  </div>
+      </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>
+  </TableStaticRoot>
 </template>
 
-<script lang="ts" setup generic="T extends Record<string, unknown>">
+<script lang="ts" setup generic="T">
 import {
   computed,
   HTMLAttributes,
@@ -122,8 +119,10 @@ import {
   withKey,
   withoutKey,
   withUnit,
+  KeyType,
 } from '../table'
 import Checkbox from '../checkbox/Checkbox.vue'
+import TableStaticRoot from './TableStaticRoot.vue'
 import { useVModel } from '../input'
 import IconDrag from '@privyid/persona-icon/vue/draggable/20.vue'
 import Draggable from 'vuedraggable'
@@ -177,20 +176,22 @@ const props = defineProps({
     ] as PropType<HTMLAttributes['class']>,
     default: undefined,
   },
+  scrollable: {
+    type   : Boolean,
+    default: true,
+  },
 })
 
 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 emit  = defineEmits<{
+  'update:modelValue': [T[]],
+  'update:items': [T[]],
 }>()
 
 const rows = computed<T[]>({
   get () {
     return props.items.map((item) => {
-      return withKey(item) as T
+      return withKey(item as Record<string, unknown>) as T
     })
   },
   set (items) {
@@ -213,11 +214,14 @@ const classNames = computed(() => {
   if (props.noLabel)
     result.push('table-static--no-label')
 
+  if (props.scrollable)
+    result.push('table-static--scrollable')
+
   return result
 })
 
 const selectableRows = computed(() => {
-  return props.items.filter((item) => item._selectable !== false)
+  return props.items.filter((item) => (item as Record<string, unknown>)._selectable !== false)
 })
 
 const selectAll = computed({
@@ -227,7 +231,7 @@ const selectAll = computed({
   set (value) {
     if (selectAll.value !== value) {
       model.value = value
-        ? selectableRows.value.map((item) => withoutKey(item)) as T[]
+        ? selectableRows.value.map((item) => withoutKey(item as Record<string, unknown>)) as T[]
         : []
     }
   },
@@ -239,10 +243,14 @@ const indeterminate = computed(() => {
 })
 
 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,
+  empty:() => VNode[],
+  row:(props: { index: number, item: T }) => VNode[],
+  [K: `cell(${string})`]:(props: { index: number }) => VNode[],
+  [K: `head(${string})`]:(props: { field: TableField<T>, label: string }) => VNode[],
+} & {
+  [K in KeyType<T> as `cell(${K})`]:(props: { item: T, index: number }) => VNode[]
+} & {
+  [K in KeyType<T> as `head(${K})`]:(props: { field: TableField<T>, label: string }) => VNode[]
 }>()
 </script>
 
@@ -255,7 +263,7 @@ defineSlots<{
   --p-table-border: theme(borderColor.default.DEFAULT);
   --p-table-border-dark: theme(borderColor.dark.default.DEFAULT);
 
-  @apply w-full overflow-auto overscroll-contain;
+  @apply w-full;
 
   &__table {
     @apply min-w-full table;
@@ -329,5 +337,9 @@ defineSlots<{
       }
     }
   }
+
+  &--scrollable {
+    @apply overflow-auto overscroll-contain;
+  }
 }
 </style>

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

@@ -0,0 +1,42 @@
+<template>
+  <template v-if="scrollable">
+    <div
+      class="table-static"
+      v-bind="$attrs">
+      <table
+        class="table-static__table"
+        :class="tableClass">
+        <slot />
+      </table>
+    </div>
+  </template>
+  <template v-else>
+    <table
+      class="table-static__table"
+      :class="tableClass"
+      v-bind="$attrs">
+      <slot />
+    </table>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { HTMLAttributes, PropType } from 'vue-demi'
+
+defineOptions({ inheritAttrs: false })
+
+defineProps({
+  scrollable: {
+    type   : Boolean,
+    default: true,
+  },
+  tableClass: {
+    type: [
+      String,
+      Array,
+      Object,
+    ] as PropType<HTMLAttributes['class']>,
+    default: undefined,
+  },
+})
+</script>

package/dist/components/tabs/Tab.vue

@@ -10,19 +10,17 @@
   </section>
 </template>
 
-<script>
-import { defineComponent } from "vue-demi";
-export default defineComponent({
-  name: "Tab",
-  props: {
-    title: {
-      type: String,
-      default: ""
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  }
-});
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type   : String,
+    default: '',
+  },
+  disabled: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+defineOptions({ name: 'Tab' })
 </script>

package/dist/components/tabs/TabContent.vue

@@ -1,27 +1,68 @@
-<script>
+<template>
+  <render />
+</template>
+
+<script lang="ts" setup>
 import {
-  defineComponent,
-  h
-} from "vue-demi";
-import { findAllChildren, toBoolean } from "../utils/vnode";
-export default defineComponent({
-  props: {
-    active: {
-      type: Number,
-      required: true
-    }
+  VNode,
+  Transition,
+  h,
+  ref,
+  watch,
+  resolveComponent,
+} from 'vue-demi'
+import { findAllChildren, toBoolean } from '../utils/vnode'
+
+const props = defineProps({
+  active: {
+    type    : Number,
+    required: true,
   },
-  setup(props, { slots }) {
-    return () => {
-      return findAllChildren(slots.default(), "Tab").map((vnode, index) => {
-        const isDisabled = toBoolean(vnode.props?.disabled);
-        const isActive = index === props.active && !isDisabled;
-        return h(vnode, {
-          dataTabid: index,
-          style: { display: isActive ? "block" : "none" }
-        });
-      });
-    };
+  keepAlive: {
+    type   : Boolean,
+    default: false,
+  },
+  vertical: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+const transition = ref(props.vertical ? 'slide-top' : 'slide-left')
+
+watch(() => props.active, (value, last) => {
+  transition.value = value < last
+    ? (props.vertical ? 'slide-bottom' : 'slide-right')
+    : (props.vertical ? 'slide-top' : 'slide-left')
+})
+
+const slots = defineSlots<{
+  default:() => VNode[],
+}>()
+
+const render = () => {
+  const tab = findAllChildren(slots.default(), 'Tab')
+    .map((vnode, index) => {
+      const isDisabled = toBoolean(vnode.props?.disabled)
+      const isActive   = index === props.active && !isDisabled
+
+      return h(vnode, {
+        key      : index,
+        dataTabid: index,
+        style    : { display: isActive ? 'block' : 'none' },
+      })
+    })
+    .at(props.active)
+
+  const body = () => {
+    return props.keepAlive
+      ? h(resolveComponent('keep-alive'), () => tab)
+      : tab
   }
-});
+
+  return h(Transition, {
+    name: transition.value,
+    mode: 'out-in',
+  }, body)
+}
 </script>