@privyid/persona 0.21.0 → 0.23.0

package/dist/components/sidebar/SidebarNav.vue

@@ -1,15 +1,17 @@
 <template>
   <div
+    v-if="title || titleActionLabel || collapsible"
     class="sidebar__title"
     data-testid="sidebar-title"
-    :class="[(!title && titleActionLabel) ? 'justify-end' : 'justify-between', {
+    :class="{
       'sidebar__title__collapsible': (collapsible && type !== 'narrow'),
       'sidebar__title--collapsed': !isExpand,
-    }]"
+    }"
     v-bind="$attrs"
     @click.prevent="toggleExpand">
     <Caption
       v-if="title"
+      class="sidebar__title__caption"
       weight="bold"
       transform="capitalize">
       {{ title }}
@@ -17,6 +19,7 @@
     <Text
       v-if="titleActionLabel && titleActionUrl"
       data-testid="sidebar-nav-action"
+      class="sidebar__title__action"
       variant="caption"
       :href="titleActionUrl">
       {{ titleActionLabel }}
@@ -31,7 +34,6 @@
     v-if="!bottom"
     :model-value="isExpand">
     <Nav
-      ref="root"
       class="sidebar__nav"
       :class="{ 'sidebar__nav--collapsed' : !isExpand }"
       data-testid="sidebar-nav"
@@ -46,96 +48,73 @@
     </Nav>
   </Collapse>
   <template v-else>
-    <div class="sidebar__bottom">
-      <Nav
-        class="sidebar__nav"
-        data-testid="sidebar-nav"
-        vertical
-        :title="title"
-        :variant="variant"
-        :condensed="condensed"
-        :align="align"
-        :class="classNames">
-        <slot />
-      </Nav>
-    </div>
+    <Nav
+      class="sidebar__nav sidebar__nav--bottom"
+      data-testid="sidebar-nav"
+      vertical
+      :title="title"
+      :variant="variant"
+      :condensed="condensed"
+      :align="align">
+      <slot />
+    </Nav>
   </template>
 </template>
 
-<script>
+<script lang="ts" setup>
 import {
-  computed,
-  defineComponent,
   inject,
-  ref
-} from "vue-demi";
-import Nav from "../nav/Nav.vue";
-import Caption from "../caption/Caption.vue";
-import Text from "../text/Text.vue";
-import { SIDEBAR_SETTINGS } from ".";
-import Collapse from "../collapse/Collapse.vue";
-import IconArrow from "@privyid/persona-icon/vue/chevron-down/16.vue";
-export default defineComponent({
-  components: {
-    Nav,
-    Caption,
-    Text,
-    IconArrow,
-    Collapse
-  },
+  ref,
+} from 'vue-demi'
+import Nav from '../nav/Nav.vue'
+import Caption from '../caption/Caption.vue'
+import Text from '../text/Text.vue'
+import { SIDEBAR_SETTINGS } from '.'
+import Collapse from '../collapse/Collapse.vue'
+import IconArrow from '@privyid/persona-icon/vue/chevron-down/16.vue'
+
+defineOptions({
+  name        : 'SidebarNav',
   inheritAttrs: false,
-  props: {
-    title: {
-      type: String,
-      default: void 0
-    },
-    titleActionLabel: {
-      type: String,
-      default: void 0
-    },
-    titleActionUrl: {
-      type: String,
-      default: void 0
-    },
-    bottom: {
-      type: Boolean,
-      default: false
-    },
-    condensed: {
-      type: Boolean,
-      default: false
-    },
-    collapsible: {
-      type: Boolean,
-      default: false
-    }
+})
+
+const props = defineProps({
+  title: {
+    type   : String,
+    default: undefined,
   },
-  setup(props) {
-    const settings = inject(SIDEBAR_SETTINGS, void 0, true);
-    const variant = settings?.variant;
-    const align = settings?.align;
-    const type = settings?.type;
-    const isExpand = ref(true);
-    const classNames = computed(() => {
-      const result = [""];
-      if (props.bottom)
-        result.push("sidebar__nav--bottom");
-      return result;
-    });
-    function toggleExpand() {
-      if (props.collapsible)
-        isExpand.value = !isExpand.value;
-    }
-    return {
-      isExpand,
-      variant,
-      align,
-      type,
-      classNames,
-      toggleExpand
-    };
-  }
-});
+  titleActionLabel: {
+    type   : String,
+    default: undefined,
+  },
+  titleActionUrl: {
+    type   : String,
+    default: undefined,
+  },
+  bottom: {
+    type   : Boolean,
+    default: false,
+  },
+  condensed: {
+    type   : Boolean,
+    default: false,
+  },
+  collapsible: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+const settings = inject(SIDEBAR_SETTINGS, undefined, true)
+const variant  = settings?.variant
+const align    = settings?.align
+const type     = settings?.type
+const isExpand = ref(true)
+
+function toggleExpand (): void {
+  if (props.collapsible)
+    isExpand.value = !isExpand.value
+}
 </script>
 
 <style lang="postcss">
@@ -152,6 +131,10 @@ export default defineComponent({
     .nav__title {
       @apply hidden;
     }
+
+    .nav__subitem &.nav {
+      @apply pt-0;
+    }
   }
 
   &&--narrow {
@@ -220,7 +203,15 @@ export default defineComponent({
   }
 
   &__title {
-    @apply relative z-1 flex items-center -mb-9 px-3 mt-5;
+    @apply relative z-1 flex items-center -mb-9 px-3 mt-5 justify-end;
+
+    &__caption {
+      @apply flex-grow;
+    }
+
+    &__action {
+      @apply flex-shrink-0;
+    }
 
     &__collapsible {
       @apply cursor-pointer select-none;

package/dist/components/sidebar-menu/SidebarMenu.vue

@@ -25,55 +25,9 @@
         <template
           v-for="(item, i) in menu.items?.slice(0, menu.maxLength)"
           :key="i">
-          <NavSubItem
-            v-if="item.submenu"
-            data-testid="sidebar-submenu"
-            :text="item.label"
-            :collapsible="item.collapsible"
-            v-bind="item.attrs">
-            <template #icon>
-              <template v-if="item.icon && typeof item.icon === 'string'">
-                <img
-                  :src="item.icon"
-                  alt="icon-menu">
-              </template>
-              <template v-else-if="item.icon">
-                <component :is="item.icon" />
-              </template>
-            </template>
-            <SidebarNav :condensed="menu.condensed">
-              <NavItem
-                v-for="(submenu, x) in item.submenu"
-                :key="x"
-                :href="submenu.url"
-                :exact="submenu.exact"
-                v-bind="submenu.attrs">
-                {{ submenu.label }}
-              </NavItem>
-            </SidebarNav>
-          </NavSubItem>
-          <NavItem
-            v-else
-            v-bind="item.attrs"
-            :href="item.url"
-            :exact="item.exact"
-            :class="{
-              'nav__item--no-label': !item.label,
-              'nav__item--no-icon': !item.icon
-            }">
-            <template
-              #icon>
-              <template v-if="item.icon && typeof item.icon === 'string'">
-                <img
-                  :src="item.icon"
-                  alt="icon-menu">
-              </template>
-              <template v-else-if="item.icon">
-                <component :is="item.icon" />
-              </template>
-            </template>
-            {{ item.label }}
-          </NavItem>
+          <SidebarMenuItem
+            :item="item"
+            :menu="menu" />
         </template>
         <NavCollapse
           v-if="menu.maxLength"
@@ -83,54 +37,9 @@
           <template
             v-for="(item, i) in menu.items?.slice(menu.maxLength, menu.items.length)"
             :key="i">
-            <NavSubItem
-              v-if="item.submenu"
-              v-bind="item.attrs"
-              :text="item.label"
-              :collapsible="item.collapsible">
-              <template #icon>
-                <template v-if="item.icon && typeof item.icon === 'string'">
-                  <img
-                    :src="item.icon"
-                    alt="icon-menu">
-                </template>
-                <template v-else-if="item.icon">
-                  <component :is="item.icon" />
-                </template>
-              </template>
-              <SidebarNav :condensed="menu.condensed">
-                <NavItem
-                  v-for="(submenu, x) in item.submenu"
-                  :key="x"
-                  :href="submenu.url"
-                  :exact="submenu.exact"
-                  v-bind="submenu.attrs">
-                  {{ submenu.label }}
-                </NavItem>
-              </SidebarNav>
-            </NavSubItem>
-            <NavItem
-              v-else
-              v-bind="item.attrs"
-              :href="item.url"
-              :exact="item.exact"
-              :class="{
-                'nav__item--no-label': !item.label,
-                'nav__item--no-icon' : !item.icon,
-              }">
-              <template
-                #icon>
-                <template v-if="item.icon && typeof item.icon === 'string'">
-                  <img
-                    :src="item.icon"
-                    alt="icon-menu">
-                </template>
-                <template v-else-if="item.icon">
-                  <component :is="item.icon" />
-                </template>
-              </template>
-              {{ item.label }}
-            </NavItem>
+            <SidebarMenuItem
+              :item="item"
+              :menu="menu" />
           </template>
         </NavCollapse>
       </template>
@@ -140,54 +49,9 @@
         <template
           v-for="(item, i) in menu.items"
           :key="i">
-          <NavSubItem
-            v-if="item.submenu"
-            :text="item.label"
-            :collapsible="item.collapsible"
-            v-bind="item.attrs">
-            <template #icon>
-              <template v-if="item.icon && typeof item.icon === 'string'">
-                <img
-                  :src="item.icon"
-                  alt="icon-menu">
-              </template>
-              <template v-else-if="item.icon">
-                <component :is="item.icon" />
-              </template>
-            </template>
-            <SidebarNav :condensed="menu.condensed">
-              <NavItem
-                v-for="(submenu, x) in item.submenu"
-                :key="x"
-                :href="submenu.url"
-                :exact="submenu.exact"
-                v-bind="submenu.attrs">
-                {{ submenu.label }}
-              </NavItem>
-            </SidebarNav>
-          </NavSubItem>
-          <NavItem
-            v-else
-            v-bind="item.attrs"
-            :href="item.url"
-            :exact="item.exact"
-            :class="{
-              'nav__item--no-label': !item.label,
-              'nav__item--no-icon': !item.icon,
-            }">
-            <template
-              #icon>
-              <template v-if="item.icon && typeof item.icon === 'string'">
-                <img
-                  :src="item.icon"
-                  alt="icon-menu">
-              </template>
-              <template v-else-if="item.icon">
-                <component :is="item.icon" />
-              </template>
-            </template>
-            {{ item.label }}
-          </NavItem>
+          <SidebarMenuItem
+            :item="item"
+            :menu="menu" />
         </template>
       </template>
     </SidebarNav>
@@ -199,64 +63,53 @@
   </Sidebar>
 </template>
 
-<script>
-import {
-  defineComponent
-} from "vue-demi";
-import Sidebar from "../sidebar/Sidebar.vue";
-import SidebarNav from "../sidebar/SidebarNav.vue";
-import NavItem from "../nav/NavItem.vue";
-import NavSubItem from "../nav/NavSubItem.vue";
-import NavCollapse from "../nav/NavCollapse.vue";
-import IconMore from "@privyid/persona-icon/vue/chevron-down/16.vue";
-import IconLess from "@privyid/persona-icon/vue/chevron-up/16.vue";
-export default defineComponent({
-  components: {
-    Sidebar,
-    SidebarNav,
-    NavItem,
-    NavSubItem,
-    NavCollapse,
-    IconMore,
-    IconLess
+<script lang="ts" setup>
+import { PropType } from 'vue-demi'
+import Sidebar from '../sidebar/Sidebar.vue'
+import { TypeVariant } from '../sidebar'
+import SidebarNav from '../sidebar/SidebarNav.vue'
+import { Menu } from '.'
+import { AlignVariant } from '../nav'
+import { ToggleableVariant } from '../navbar'
+import NavCollapse from '../nav/NavCollapse.vue'
+import SidebarMenuItem from './SidebarMenuItem.vue'
+
+defineProps({
+  menus: {
+    type   : Array as PropType<Menu[]>,
+    default: () => ([]),
+  },
+  fixed: {
+    type   : Boolean,
+    default: false,
+  },
+  sticky: {
+    type   : Boolean,
+    default: false,
+  },
+  type: {
+    type   : String as PropType<TypeVariant>,
+    default: 'wide',
+  },
+  align: {
+    type   : String as PropType<AlignVariant>,
+    default: 'left',
+  },
+  toggleable: {
+    type   : String as PropType<ToggleableVariant>,
+    default: undefined,
+  },
+  length: {
+    type   : [Number, String],
+    default: undefined,
+  },
+  showMoreText: {
+    type   : String,
+    default: 'More',
+  },
+  showLessText: {
+    type   : String,
+    default: 'Less',
   },
-  props: {
-    menus: {
-      type: Array,
-      default: () => []
-    },
-    fixed: {
-      type: Boolean,
-      default: false
-    },
-    sticky: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String,
-      default: "wide"
-    },
-    align: {
-      type: String,
-      default: "left"
-    },
-    toggleable: {
-      type: String,
-      default: void 0
-    },
-    length: {
-      type: [Number, String],
-      default: void 0
-    },
-    showMoreText: {
-      type: String,
-      default: "More"
-    },
-    showLessText: {
-      type: String,
-      default: "Less"
-    }
-  }
-});
+})
 </script>

package/dist/components/sidebar-menu/SidebarMenuItem.vue

@@ -0,0 +1,70 @@
+<template>
+  <NavSubItem
+    v-if="item.submenu"
+    data-testid="sidebar-submenu"
+    :text="item.label"
+    :collapsible="item.collapsible"
+    v-bind="item.attrs">
+    <template #icon>
+      <template v-if="item.icon && typeof item.icon === 'string'">
+        <img
+          :src="item.icon"
+          alt="icon-menu">
+      </template>
+      <template v-else-if="item.icon">
+        <component :is="item.icon" />
+      </template>
+    </template>
+    <SidebarNav :condensed="menu.condensed">
+      <NavItem
+        v-for="(submenu, x) in item.submenu"
+        :key="x"
+        :href="submenu.url"
+        :exact="submenu.exact"
+        v-bind="submenu.attrs">
+        {{ submenu.label }}
+      </NavItem>
+    </SidebarNav>
+  </NavSubItem>
+  <NavItem
+    v-else
+    v-bind="item.attrs"
+    :href="item.url"
+    :exact="item.exact"
+    :class="{
+      'nav__item--no-label': !item.label,
+      'nav__item--no-icon': !item.icon
+    }">
+    <template
+      #icon>
+      <template v-if="item.icon && typeof item.icon === 'string'">
+        <img
+          :src="item.icon"
+          alt="icon-menu">
+      </template>
+      <template v-else-if="item.icon">
+        <component :is="item.icon" />
+      </template>
+    </template>
+    {{ item.label }}
+  </NavItem>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue-demi'
+import { Menu, MenuItem } from '.'
+import NavItem from '../nav/NavItem.vue'
+import NavSubItem from '../nav/NavSubItem.vue'
+import SidebarNav from '../sidebar/SidebarNav.vue'
+
+defineProps({
+  item: {
+    type   : Object as PropType<MenuItem>,
+    default: () => ({} as MenuItem),
+  },
+  menu: {
+    type   : Object as PropType<Menu>,
+    default: () => ({} as Menu),
+  },
+})
+</script>

package/dist/components/signature-text/SignatureText.vue.d.ts

@@ -25,11 +25,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     maxwords: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     maxlength: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     font: {
@@ -69,11 +69,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     maxwords: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     maxlength: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     font: {
@@ -89,9 +89,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     text: string;
     modelValue: string | File;
     modelModifiers: ModelModifier;
+    font: string;
     width: number;
     height: number;
-    font: string;
     maxlength: string | number;
     maxwords: string | number;
 }, {}>;

package/dist/components/steps/StepSlider.vue

@@ -2,7 +2,7 @@
 import {
   defineComponent,
   h,
-  KeepAlive,
+  resolveComponent,
   Transition
 } from "vue-demi";
 import { findAllChildren } from "../utils/vnode";
@@ -25,7 +25,7 @@ export default defineComponent({
     return () => {
       const step = findAllChildren(slots.default(), "Step").at(props.active);
       const body = () => {
-        return props.keepAlive ? h(KeepAlive, () => h(step, { key: props.active })) : h(step, { key: props.active });
+        return props.keepAlive ? h(resolveComponent("keep-alive"), () => h(step, { key: props.active })) : h(step, { key: props.active });
       };
       return h(Transition, {
         name: props.transition,

package/dist/components/steps/Steps.vue.d.ts

@@ -73,9 +73,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: number;
-    direction: DirectionVariant;
-    loop: boolean;
     animation: AnimationVariant;
+    loop: boolean;
+    direction: DirectionVariant;
     onBeforePrev: TravelHook;
     onBeforeNext: TravelHook;
     keepAlive: boolean;