@privyid/persona 0.21.0 → 0.22.0

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

@@ -1,112 +1,109 @@
 <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>">
@@ -124,6 +121,7 @@ import {
   withUnit,
 } 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,14 +175,16 @@ 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[]>({
@@ -213,6 +213,9 @@ const classNames = computed(() => {
   if (props.noLabel)
     result.push('table-static--no-label')
 
+  if (props.scrollable)
+    result.push('table-static--scrollable')
+
   return result
 })
 
@@ -255,7 +258,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 +332,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>

package/dist/components/tabs/Tabs.vue

@@ -21,7 +21,10 @@
           data-testid="tab"
           :disabled="tab.disabled"
           :active="i === active"
-          :class="{ 'nav__item--no-icon' : (!tab.slots.icon), 'nav__item--no-label' : (!tab.title && !tab.slots.title) }"
+          :class="{
+            'nav__item--no-icon' : (!tab.slots.icon),
+            'nav__item--no-label': (!tab.title && !tab.slots.title)
+          }"
           @click="selectTab(i, tab)">
           <template #icon>
             <template v-if="tab.slots.icon">
@@ -39,90 +42,105 @@
     </nav>
 
     <div class="tabs__content">
-      <tab-content :active="active">
+      <tab-content
+        :active="active"
+        :vertical="vertical"
+        :keep-alive="keepAlive">
         <slot />
       </tab-content>
     </div>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
+import {
+  VNode,
+  PropType,
+  computed,
+  Slots,
+} from 'vue-demi'
+import Nav from '../nav/Nav.vue'
 import {
-  defineComponent,
-  computed
-} from "vue-demi";
-import Nav from "../nav/Nav.vue";
-import NavItem from "../nav/NavItem.vue";
-import TabContent from "./TabContent.vue";
-import { useVModel } from "../input";
-import { findAllChildren, toBoolean } from "../utils/vnode";
-export default defineComponent({
-  components: {
-    Nav,
-    NavItem,
-    TabContent
+  StyleVariant as TabsStyleVariant,
+  AlignVariant as TabsAlignVariant,
+} from '../nav'
+import NavItem from '../nav/NavItem.vue'
+import TabContent from './TabContent.vue'
+import { useVModel } from '../input'
+import { findAllChildren, toBoolean } from '../utils/vnode'
+
+interface TabContext {
+  title: string,
+  disabled: boolean,
+  slots: Slots,
+}
+
+const props = defineProps({
+  variant: {
+    type   : String as PropType<TabsStyleVariant>,
+    default: 'tabs',
   },
-  props: {
-    variant: {
-      type: String,
-      default: "tabs"
-    },
-    align: {
-      type: String,
-      default: "left"
-    },
-    vertical: {
-      type: Boolean,
-      default: false
-    },
-    fill: {
-      type: Boolean,
-      default: false
-    },
-    justified: {
-      type: Boolean,
-      default: false
-    },
-    navWrapperClass: {
-      type: String,
-      default: void 0
-    },
-    modelValue: {
-      type: Number,
-      default: 0
-    }
+  align: {
+    type   : String as PropType<TabsAlignVariant>,
+    default: 'left',
   },
-  setup(props, { slots }) {
-    const classNames = computed(() => {
-      const result = [];
-      if (props.vertical && props.align)
-        result.push(`tabs--vertical-align-${props.align}`);
-      return result;
-    });
-    const active = useVModel(props);
-    const tabs = computed(() => {
-      const vnodes = slots.default ? slots.default() : [];
-      const tabs2 = findAllChildren(vnodes, "Tab");
-      return tabs2.map((vnode) => {
-        return {
-          title: vnode.props?.title,
-          disabled: toBoolean(vnode.props?.disabled),
-          slots: vnode.children
-        };
-      });
-    });
-    function selectTab(index, tab) {
-      if (!tab.disabled)
-        active.value = index;
-    }
+  vertical: {
+    type   : Boolean,
+    default: false,
+  },
+  fill: {
+    type   : Boolean,
+    default: false,
+  },
+  justified: {
+    type   : Boolean,
+    default: false,
+  },
+  navWrapperClass: {
+    type   : String,
+    default: undefined,
+  },
+  modelValue: {
+    type   : Number,
+    default: 0,
+  },
+  keepAlive: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+const classNames = computed(() => {
+  const result: string[] = []
+
+  if (props.vertical && props.align)
+    result.push(`tabs--vertical-align-${props.align}`)
+
+  return result
+})
+
+const slots = defineSlots<{
+  default:() => VNode[],
+}>()
+
+const active = useVModel(props)
+const tabs   = computed<TabContext[]>(() => {
+  const vnodes = slots.default ? slots.default() : []
+  const tabs   = findAllChildren(vnodes, 'Tab')
+
+  return tabs.map((vnode) => {
     return {
-      classNames,
-      active,
-      tabs,
-      selectTab
-    };
-  }
-});
+      title   : vnode.props?.title,
+      disabled: toBoolean(vnode.props?.disabled),
+      slots   : vnode.children as Slots,
+    }
+  })
+})
+
+function selectTab (index: number, tab: TabContext) {
+  if (!tab.disabled)
+    active.value = index
+}
 </script>
 
 <style lang="postcss">

package/dist/components/text/Text.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="hyperlink"
+    :is="elementNames"
     data-testid="freetext"
     class="freetext"
     :class="classNames"
@@ -31,11 +31,15 @@ export default defineComponent({
     transform: {
       type: String,
       default: "normalcase"
+    },
+    element: {
+      type: String,
+      default: "span"
     }
   },
   setup(props) {
-    const hyperlink = computed(() => {
-      return props.href ? "a" : "span";
+    const elementNames = computed(() => {
+      return props.href ? "a" : props.element;
     });
     const classNames = computed(() => {
       const result = [""];
@@ -52,8 +56,8 @@ export default defineComponent({
       return result;
     });
     return {
-      hyperlink,
-      classNames
+      classNames,
+      elementNames
     };
   }
 });
@@ -125,8 +129,12 @@ export default defineComponent({
   * Hyperlink style
    */
   &--hyperlink {
-    @apply underline decoration-solid text-info;
-    @apply dark:text-dark-info;
+    @apply underline decoration-solid;
+
+    &:not([class^='text-'], [class*='text-']) {
+      @apply text-link;
+      @apply dark:text-dark-link;
+    }
   }
 
   /**