@privyid/persona 1.2.1 → 1.2.2-dev.2

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

@@ -0,0 +1,112 @@
+<template>
+  <Sidebar
+    data-testid="sidebar-menu"
+    :type="type"
+    :fixed="fixed"
+    :sticky="sticky"
+    :toggleable="toggleable"
+    :align="align">
+    <template #brand>
+      <slot />
+    </template>
+    <slot name="prepend" />
+    <SidebarNav
+      v-for="(menu, id) in menus"
+      :key="id"
+      :title="menu.title"
+      :title-action-label="menu.titleActionLabel"
+      :title-action-url="menu.titleActionUrl"
+      :bottom="menu.bottom"
+      :condensed="menu.condensed"
+      :collapsible="menu.collapsible"
+      v-bind="menu.attrs">
+      <!-- IF: Menu has maxlength -->
+      <template
+        v-if="menu.maxLength">
+        <template
+          v-for="(item, i) in menu.items?.slice(0, menu.maxLength)"
+          :key="i">
+          <SidebarMenuItem
+            :item="item"
+            :menu="menu" />
+        </template>
+        <NavCollapse
+          v-if="menu.maxLength"
+          :show-less-text="showLessText"
+          :show-more-text="showMoreText"
+          data-testid="sidebar-toggle">
+          <template
+            v-for="(item, i) in menu.items?.slice(menu.maxLength, menu.items.length)"
+            :key="i">
+            <SidebarMenuItem
+              :item="item"
+              :menu="menu" />
+          </template>
+        </NavCollapse>
+      </template>
+      <!-- ENDIF -->
+
+      <template v-else>
+        <template
+          v-for="(item, i) in menu.items"
+          :key="i">
+          <SidebarMenuItem
+            :item="item"
+            :menu="menu" />
+        </template>
+      </template>
+    </SidebarNav>
+    <slot name="append" />
+    <template
+      v-if="$slots.bottom"
+      #bottom>
+      <slot name="bottom" />
+    </template>
+  </Sidebar>
+</template>
+
+<script setup>
+import Sidebar from "../sidebar/Sidebar.vue";
+import SidebarNav from "../sidebar/SidebarNav.vue";
+import NavCollapse from "../nav/NavCollapse.vue";
+import SidebarMenuItem from "./SidebarMenuItem.vue";
+defineProps({
+  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"
+  }
+});
+defineSlots();
+</script>

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

@@ -0,0 +1,112 @@
+import type { PropType, VNode } from 'vue';
+import type { TypeVariant } from '../sidebar';
+import type { Menu } from '.';
+import type { AlignVariant } from '../nav';
+import type { ToggleableVariant } from '../navbar';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        prepend(): VNode[];
+        append(): VNode[];
+        bottom(): VNode[];
+    }> & {
+        prepend(): VNode[];
+        append(): VNode[];
+        bottom(): VNode[];
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    menus: {
+        type: PropType<Menu[]>;
+        default: () => never[];
+    };
+    fixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignVariant>;
+        default: string;
+    };
+    toggleable: {
+        type: PropType<ToggleableVariant>;
+        default: undefined;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    showMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showLessText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    menus: {
+        type: PropType<Menu[]>;
+        default: () => never[];
+    };
+    fixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignVariant>;
+        default: string;
+    };
+    toggleable: {
+        type: PropType<ToggleableVariant>;
+        default: undefined;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    showMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showLessText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    type: TypeVariant;
+    length: string | number;
+    fixed: boolean;
+    toggleable: ToggleableVariant;
+    align: AlignVariant;
+    showMoreText: string;
+    showLessText: string;
+    sticky: boolean;
+    menus: Menu[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,67 @@
+<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 setup>
+import NavItem from "../nav/NavItem.vue";
+import NavSubItem from "../nav/NavSubItem.vue";
+import SidebarNav from "../sidebar/SidebarNav.vue";
+defineProps({
+  item: {
+    type: Object,
+    default: () => ({})
+  },
+  menu: {
+    type: Object,
+    default: () => ({})
+  }
+});
+</script>

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

@@ -0,0 +1,25 @@
+import type { PropType } from 'vue';
+import type { Menu, MenuItem } from '.';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    item: {
+        type: PropType<MenuItem>;
+        default: () => MenuItem;
+    };
+    menu: {
+        type: PropType<Menu>;
+        default: () => Menu;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    item: {
+        type: PropType<MenuItem>;
+        default: () => MenuItem;
+    };
+    menu: {
+        type: PropType<Menu>;
+        default: () => Menu;
+    };
+}>> & Readonly<{}>, {
+    menu: Menu;
+    item: MenuItem;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,138 @@
+import type { AdditionalAttr } from '../global/types';
+import type { Component } from '../global/use-singleton';
+import type { AlignVariant } from '../nav';
+import type { LiteralUnion } from 'type-fest';
+import type { RouteLocationRaw } from 'vue-router';
+type Access = LiteralUnion<'*', string>;
+export interface SubMenu {
+    /**
+     * Menu name
+     */
+    name: string;
+    /**
+     * Menu label
+     */
+    label: string;
+    /**
+     * Menu URL
+     */
+    url?: RouteLocationRaw;
+    /**
+     * Access Role
+     */
+    access?: Access | Access[];
+    /**
+     * Additional Attribute
+     */
+    attrs?: AdditionalAttr;
+    /**
+     * Active on exact match
+     * @default false
+     */
+    exact?: boolean;
+}
+export interface MenuItem {
+    /**
+     * Uniq name
+     */
+    name: string;
+    /**
+     * Menu title
+     */
+    label?: string;
+    /**
+     * Menu URL
+     */
+    url?: RouteLocationRaw;
+    /**
+     * Menu Icon
+     */
+    icon?: string | Component;
+    /**
+     * Menu role access
+     */
+    access?: Access | Access[];
+    /**
+     * Enable collapse
+     */
+    collapsible?: boolean;
+    /**
+     * Submenu items
+     */
+    submenu?: SubMenu[];
+    /**
+     * Additional attribute
+     */
+    attrs?: AdditionalAttr;
+    /**
+     * Active on exact match
+     * @default false
+     */
+    exact?: boolean;
+}
+export interface Menu {
+    /**
+     * Menu Title
+     */
+    title?: string;
+    /**
+     * Additional Action Label
+     */
+    titleActionLabel?: string;
+    /**
+     * Action URL
+     */
+    titleActionUrl?: RouteLocationRaw;
+    /**
+     * Enable collapse
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Set to bottom
+     * @default false
+     */
+    bottom?: boolean;
+    /**
+     * Enable condensed mode
+     * @default false
+     */
+    condensed?: boolean;
+    /**
+     * Role access
+     */
+    access?: Access | Access[];
+    /**
+     * Menu item
+     */
+    items?: MenuItem[];
+    /**
+     * Menu Aligment
+     */
+    align?: AlignVariant;
+    /**
+     * Maximal items to show
+     */
+    maxLength?: number;
+    /**
+     * Additional Attribute
+     */
+    attrs?: AdditionalAttr;
+    /**
+     * Active on exact match
+     * @default false
+     */
+    exact?: boolean;
+}
+/**
+ * Define menus
+ * @param menus
+ */
+export declare function defineMenu(menus: Menu[]): Menu[];
+/**
+ * Filter menu by role
+ * @param menus
+ * @param role
+ */
+export declare function filterMenu(menus: Menu[], role: string): Menu[];
+export {};

package/dist/components/sidebar-menu/index.mjs

@@ -0,0 +1,44 @@
+function hasAccess(access, role) {
+  if (!access || access === "*")
+    return true;
+  return Array.isArray(access) ? access.some((acc) => acc === "*" || acc === role) : access === role;
+}
+export function defineMenu(menus) {
+  return menus;
+}
+export function filterMenu(menus, role) {
+  const result = [];
+  for (const menu of menus) {
+    if (!hasAccess(menu.access, role))
+      continue;
+    if (!Array.isArray(menu.items) || menu.items.length === 0) {
+      result.push(menu);
+      continue;
+    }
+    const items = [];
+    for (const menuitem of menu.items) {
+      if (!hasAccess(menuitem.access, role))
+        continue;
+      if (!Array.isArray(menuitem.submenu) || menuitem.submenu.length === 0) {
+        items.push(menuitem);
+        continue;
+      }
+      const submenu = menuitem.submenu.filter((item) => {
+        return hasAccess(item.access, role);
+      });
+      if (submenu.length > 0) {
+        items.push({
+          ...menuitem,
+          submenu
+        });
+      }
+    }
+    if (items.length > 0) {
+      result.push({
+        ...menu,
+        items
+      });
+    }
+  }
+  return result;
+}

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

@@ -0,0 +1,91 @@
+<template>
+  <template v-if="ready">
+    <component
+      :is="view"
+      :model-value="modelValue"
+      :model-modifiers="modelModifiers"
+      :width="width"
+      :height="height"
+      :color="color"
+      :placeholder="placeholder"
+      :reset-label="resetLabel"
+      :open-draw-label="openDrawLabel"
+      :close-draw-label="closeDrawLabel"
+      @update:model-value="$emit('update:modelValue', $event)" />
+  </template>
+  <template v-else>
+    <div class="signature-draw">
+      <img
+        class="signature-draw__fallback"
+        :src="createSpinner(width, height)"
+        alt="signature-draw">
+    </div>
+  </template>
+</template>
+
+<script setup>
+import {
+  computed,
+  onMounted,
+  ref
+} from "vue";
+import SignatureDrawMobile from "./SignatureDrawMobile.vue";
+import SignatureDrawDesktop from "./SignatureDrawDesktop.vue";
+import { useMediaQuery } from "@vueuse/core";
+import { createSpinner } from "../avatar/utils/create-image";
+defineProps({
+  modelValue: {
+    type: [String, globalThis.File],
+    default: ""
+  },
+  modelModifiers: {
+    type: Object,
+    default: () => ({})
+  },
+  width: {
+    type: Number,
+    default: 430
+  },
+  height: {
+    type: Number,
+    default: 230
+  },
+  color: {
+    type: String,
+    default: "#000000"
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  resetLabel: {
+    type: String,
+    default: "Reset"
+  },
+  openDrawLabel: {
+    type: String,
+    default: "Click to Draw"
+  },
+  closeDrawLabel: {
+    type: String,
+    default: "Save"
+  }
+});
+defineEmits(["update:modelValue"]);
+const ready = ref(false);
+const isDesktop = useMediaQuery("(min-width: 768px)");
+const view = computed(() => {
+  return isDesktop.value ? SignatureDrawDesktop : SignatureDrawMobile;
+});
+onMounted(() => {
+  ready.value = true;
+});
+</script>
+
+<style lang="postcss">
+.signature-draw {
+  &__fallback {
+    @apply border rounded border-dashed;
+  }
+}
+</style>

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

@@ -0,0 +1,98 @@
+import type { PropType } from 'vue';
+import type { ModelModifier } from '../dropzone';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    openDrawLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeDrawLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    openDrawLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeDrawLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+}>, {
+    modelValue: string | File;
+    width: number;
+    height: number;
+    color: string;
+    placeholder: string;
+    modelModifiers: ModelModifier;
+    resetLabel: string;
+    openDrawLabel: string;
+    closeDrawLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;