@privyid/persona 0.16.0 → 0.17.1

package/dist/components/progress-indicator/ProgressIndicator.vue.d.ts

@@ -0,0 +1,42 @@
+import { StyleValue, PropType } from 'vue-demi';
+import { DirectionVariant } from '../steps';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}, {
+    nums: import("vue-demi").ComputedRef<number>;
+    setValue: (value: number) => void;
+    activeStyle: import("vue-demi").ComputedRef<StyleValue>;
+    classNames: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    length: string | number;
+    modelValue: number;
+    direction: DirectionVariant;
+}, {}>;
+export default _default;

package/dist/components/radio/Radio.vue

@@ -288,8 +288,8 @@ export default defineComponent({
 
     &:hover,
     &:focus-visible {
-      @apply bg-subtle;
-      @apply dark:bg-dark-subtle;
+      @apply bg-default-alpha;
+      @apply dark:bg-dark-default-alpha;
     }
   }
 }

package/dist/components/radio/Radio.vue.d.ts

@@ -10,11 +10,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
         default: boolean;
     };
     checked: {
@@ -43,11 +43,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
         default: boolean;
     };
     checked: {

package/dist/components/select/Select.vue

@@ -7,7 +7,7 @@
     :disabled="disabled"
     :class="classNames">
     <template #activator>
-      <Input
+      <p-input
         v-model="search"
         data-testid="select-search"
         class="select__search"
@@ -15,8 +15,11 @@
         :placeholder="placeholder"
         :disabled="disabled"
         :readonly="readonly"
-        @focus="onFocus" />
-      <IconArrow class="select__caret" />
+        @focus="onFocus">
+        <template #append>
+          <IconArrow class="select__caret" />
+        </template>
+      </p-input>
     </template>
 
     <template v-if="!isLoading && items.length === 0">
@@ -69,7 +72,7 @@
 <script>
 import Dropdown from "../dropdown/Dropdown.vue";
 import DropdownItem from "../dropdown/DropdownItem.vue";
-import Input from "../input/Input.vue";
+import pInput from "../input/Input.vue";
 import IconArrow from "@carbon/icons-vue/lib/chevron--down/16";
 import IconCheck from "@carbon/icons-vue/lib/checkmark--filled/16";
 import IconLoading from "../spinner/SpinnerRing.vue";
@@ -89,7 +92,7 @@ export default defineComponent({
   components: {
     Dropdown,
     DropdownItem,
-    Input,
+    pInput,
     IconArrow,
     IconCheck,
     IconLoading
@@ -262,7 +265,7 @@ export default defineComponent({
   }
 
   &__caret {
-    @apply absolute right-3 top-0 bottom-0 my-auto transition-transform duration-150 text-subtle pointer-events-none;
+    @apply transition-transform duration-150 text-subtle pointer-events-none;
     @apply dark:text-dark-subtle;
   }
 

package/dist/components/select/Select.vue.d.ts

@@ -4,7 +4,7 @@ import { Adapter } from './adapter/adapter';
 import { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
         default: string;
     };
     selected: {
@@ -62,7 +62,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     isSelected: (item: SelectItem) => boolean;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:selected" | "userInput")[], "change" | "update:modelValue" | "update:selected" | "userInput", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
         default: string;
     };
     selected: {
@@ -114,8 +114,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:selected"?: ((...args: any[]) => any) | undefined;
     onUserInput?: ((...args: any[]) => any) | undefined;
 }, {
-    size: SizeVariant;
     error: boolean;
+    size: SizeVariant;
     modelValue: string | number | boolean | Record<string, any> | unknown[] | Date;
     disabled: boolean;
     readonly: boolean;

package/dist/components/sidebar/Sidebar.vue.d.ts

@@ -69,9 +69,9 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    fixed: boolean;
     variant: StyleVariant;
     type: TypeVariant;
+    fixed: boolean;
     modelValue: boolean;
     align: AlignVariant;
     toggleable: ToggleableVariant;

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

@@ -18,8 +18,116 @@
       :bottom="menu.bottom"
       :condensed="menu.condensed"
       :collapsible="menu.collapsible">
+      <!-- IF: Menu has maxlength -->
+      <template
+        v-if="menu.maxLength">
+        <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">
+            <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">
+                {{ submenu.label }}
+              </NavItem>
+            </SidebarNav>
+          </NavSubItem>
+          <NavItem
+            v-else
+            :href="item.url"
+            :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>
+        <NavItem
+          v-if="menu.maxLength"
+          data-testid="sidebar-toggle"
+          @click.prevent="toggle">
+          <template #icon>
+            <IconLess v-if="expand" />
+            <IconMore v-else />
+          </template>
+          {{ expand ? showLessText : showMoreText }}
+        </NavItem>
+        <div v-show="expand">
+          <template
+            v-for="(item, i) in menu.items?.slice(menu.maxLength, menu.items.length)"
+            :key="i">
+            <NavSubItem
+              v-if="item.submenu"
+              :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">
+                  {{ submenu.label }}
+                </NavItem>
+              </SidebarNav>
+            </NavSubItem>
+            <NavItem
+              v-else
+              :href="item.url"
+              :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>
+        </div>
+      </template>
+      <!-- ENDIF -->
+
       <template
         v-for="(item, i) in menu.items"
+        v-else
         :key="i">
         <NavSubItem
           v-if="item.submenu"
@@ -72,17 +180,24 @@
 </template>
 
 <script>
-import { defineComponent } from "vue-demi";
+import {
+  defineComponent,
+  ref
+} 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 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
+    NavSubItem,
+    IconMore,
+    IconLess
   },
   props: {
     menus: {
@@ -108,7 +223,29 @@ export default defineComponent({
     toggleable: {
       type: String,
       default: void 0
+    },
+    length: {
+      type: [Number, String],
+      default: void 0
+    },
+    showMoreText: {
+      type: String,
+      default: "More"
+    },
+    showLessText: {
+      type: String,
+      default: "Less"
+    }
+  },
+  setup() {
+    const expand = ref(false);
+    function toggle() {
+      expand.value = !expand.value;
     }
+    return {
+      expand,
+      toggle
+    };
   }
 });
 </script>

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

@@ -28,7 +28,22 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<ToggleableVariant>;
         default: undefined;
     };
-}, unknown, 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: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    showMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showLessText: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    expand: import("vue-demi").Ref<boolean>;
+    toggle: () => void;
+}, 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<{
     menus: {
         type: PropType<Menu[]>;
         default: () => never[];
@@ -53,12 +68,27 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<ToggleableVariant>;
         default: undefined;
     };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    showMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showLessText: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>, {
-    fixed: boolean;
+    length: string | number;
     type: TypeVariant;
+    fixed: boolean;
     align: AlignVariant;
     toggleable: ToggleableVariant;
     sticky: boolean;
     menus: Menu[];
+    showMoreText: string;
+    showLessText: string;
 }, {}>;
 export default _default;

package/dist/components/sidebar-menu/index.d.ts

@@ -4,12 +4,14 @@ export interface SubMenu {
     name: string;
     label: string;
     url: string;
+    access?: string | string[];
 }
 export interface MenuItem {
     name: string;
     label?: string;
     url: string;
     icon?: string | Component;
+    access?: string | string[];
     collapsible?: boolean;
     submenu?: SubMenu[];
 }
@@ -22,5 +24,6 @@ export interface Menu {
     condensed?: boolean;
     items?: MenuItem[];
     align?: AlignVariant;
+    maxLength?: number;
 }
 export declare function defineMenu(menus: Menu[]): Menu[];

package/dist/components/signature-draw/SignatureDraw.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="view"
-    v-model="model"
+    :model-value="modelValue"
     :model-modifiers="modelModifiers"
     :width="width"
     :height="height"
@@ -9,7 +9,8 @@
     :placeholder="placeholder"
     :reset-label="resetLabel"
     :open-draw-label="openDrawLabel"
-    :close-draw-label="closeDrawLabel" />
+    :close-draw-label="closeDrawLabel"
+    @update:model-value="$emit('update:modelValue', $event)" />
 </template>
 
 <script>
@@ -18,7 +19,6 @@ import {
   computed,
   defineComponent
 } from "vue-demi";
-import { useVModel } from "../input";
 import SignatureDrawMobile from "./SignatureDrawMobile.vue";
 import SignatureDrawDesktop from "./SignatureDrawDesktop.vue";
 export default defineComponent({
@@ -65,13 +65,12 @@ export default defineComponent({
     event: "update:modelValue"
   },
   emits: ["update:modelValue"],
-  setup(props) {
-    const model = useVModel(props);
+  setup() {
     const isDesktop = useMediaQuery("(min-width: 768px)");
     const view = computed(() => {
       return isDesktop.value ? SignatureDrawDesktop : SignatureDrawMobile;
     });
-    return { view, model };
+    return { view };
   }
 });
 </script>

package/dist/components/signature-draw/SignatureDraw.vue.d.ts

@@ -42,7 +42,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     view: import("vue-demi").ComputedRef<any>;
-    model: import("vue-demi").Ref<string | File>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: (StringConstructor | {

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: {
@@ -68,11 +68,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: {
@@ -84,13 +84,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>>, {
-    color: string;
     text: string;
+    color: 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

@@ -3,9 +3,7 @@ import {
   defineComponent,
   h,
   KeepAlive,
-  ref,
-  Transition,
-  watch
+  Transition
 } from "vue-demi";
 import { findAllChildren } from "../utils/vnode";
 export default defineComponent({
@@ -17,20 +15,20 @@ export default defineComponent({
     keepAlive: {
       type: Boolean,
       default: false
+    },
+    transition: {
+      type: String,
+      default: "slide-left"
     }
   },
   setup(props, { slots }) {
-    const transition = ref("slide-left");
-    watch(() => props.active, (value, old) => {
-      transition.value = value > old ? "slide-left" : "slide-right";
-    });
     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 h(Transition, {
-        name: transition.value,
+        name: props.transition,
         mode: "out-in"
       }, body);
     };

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

@@ -7,6 +7,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
 }, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
     [key: string]: any;
 }>, 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<{
@@ -18,8 +22,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>, {
     active: number;
+    transition: string;
     keepAlive: boolean;
 }, {}>;
 export default _default;

package/dist/components/steps/Steps.vue

@@ -3,8 +3,9 @@
     class="steps"
     data-testid="steps">
     <StepSlider
-      :active="model - 1"
-      :keep-alive="keepAlive">
+      :active="step - 1"
+      :keep-alive="keepAlive"
+      :transition="transition">
       <slot />
     </StepSlider>
   </div>
@@ -38,6 +39,18 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    loop: {
+      type: Boolean,
+      default: false
+    },
+    animation: {
+      type: String,
+      default: "slide"
+    },
     onBeforePrev: {
       type: Function,
       default: () => true
@@ -60,15 +73,16 @@ export default defineComponent({
     const onNextHooks = ref([props.onBeforeNext]);
     const onPrevHooks = ref([props.onBeforePrev]);
     const model = useVModel(props);
+    const transition = ref(props.direction === "vertical" ? "slide-top" : "slide-left");
     const total = computed(() => {
       return findAllChildren(slots.default(), "Step").length;
     });
     const step = useClamp(model, 1, total);
     const canNext = computed(() => {
-      return model.value <= total.value;
+      return props.loop || model.value <= total.value;
     });
     const canPrev = computed(() => {
-      return model.value > 1;
+      return props.loop || model.value > 1;
     });
     async function next() {
       if (canNext.value)
@@ -81,10 +95,12 @@ export default defineComponent({
     async function toStep(to) {
       const from = model.value;
       const hooks = to > from ? onNextHooks.value : onPrevHooks.value;
-      if (await runAllHooks(hooks, to, from)) {
-        if (to <= total.value)
-          step.value = to;
-        else
+      const toIndex = props.loop ? ((to - 1) % total.value + total.value) % total.value + 1 : to;
+      if (await runAllHooks(hooks, toIndex, from)) {
+        if (toIndex <= total.value) {
+          transition.value = to > from ? props.direction === "vertical" ? `${props.animation}-top` : `${props.animation}-left` : props.direction === "vertical" ? `${props.animation}-bottom` : `${props.animation}-right`;
+          step.value = toIndex;
+        } else
           await props.onFinished();
       }
     }
@@ -99,7 +115,10 @@ export default defineComponent({
       onPrevHooks,
       onNextHooks
     });
-    return { model };
+    return {
+      transition,
+      step
+    };
   }
 });
 </script>