@privyid/persona 1.1.2 → 1.2.1-rc.0

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

@@ -1,123 +0,0 @@
-<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 lang="ts" setup>
-import type { PropType, VNode } from 'vue-demi'
-import Sidebar from '../sidebar/Sidebar.vue'
-import type { TypeVariant } from '../sidebar'
-import SidebarNav from '../sidebar/SidebarNav.vue'
-import type { Menu } from '.'
-import type { AlignVariant } from '../nav'
-import type { 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',
-  },
-})
-
-defineSlots<{
-  'prepend'(): VNode[],
-  'append'(): VNode[],
-  'bottom'(): VNode[],
-}>()
-</script>

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

@@ -1,70 +0,0 @@
-<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 type { PropType } from 'vue-demi'
-import type { 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/sidebar-menu/index.d.ts

@@ -1,138 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,101 +0,0 @@
-<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 lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import {
-  computed,
-  onMounted,
-  ref,
-} from 'vue-demi'
-import SignatureDrawMobile from './SignatureDrawMobile.vue'
-import SignatureDrawDesktop from './SignatureDrawDesktop.vue'
-import type { ModelModifier } from '../dropzone'
-import { useMediaQuery } from '@vueuse/core'
-import { createSpinner } from '../avatar/utils/create-image'
-
-defineProps({
-  modelValue: {
-    type   : [String, globalThis.File],
-    default: '',
-  },
-  modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
-  },
-  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': [unknown],
-}>()
-
-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/SignatureDrawDesktop.vue

@@ -1,165 +0,0 @@
-<template>
-  <div
-    class="signature-draw signature-draw--desktop"
-    data-testid="signature-draw-desktop">
-    <canvas
-      ref="canvas"
-      class="signature-draw__canvas"
-      data-testid="signature-draw-canvas"
-      :width="width"
-      :height="height" />
-    <Caption
-      v-if="isBlank"
-      class="signature-draw__placeholder"
-      data-testid="signature-draw-placeholder">
-      {{ placeholder }}
-    </Caption>
-    <div
-      v-if="!isBlank"
-      class="signature-draw__control">
-      <Button
-        data-testid="signature-draw-reset"
-        variant="link"
-        size="xs"
-        class="signature-draw__reset"
-        pill
-        @click="reset()">
-        <span>{{ resetLabel }}</span>
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import {
-  onMounted,
-  ref,
-  watch,
-} from 'vue-demi'
-import {
-  clearAll,
-  drawLine,
-  placeImage,
-  replaceColor,
-  toDataURL,
-} from './utils/canvas'
-import useDraw from './utils/use-draw'
-import { useVModel } from '../input'
-import { createLines } from './utils/smooth-line'
-import Caption from '../caption/Caption.vue'
-import Button from '../button/Button.vue'
-import type { ModelModifier } from '../dropzone'
-import { usePreview } from '../cropper'
-import { fromBase64 } from '../utils/base64'
-
-const props = defineProps({
-  modelValue: {
-    type   : [String, globalThis.File],
-    default: '',
-  },
-  modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
-  },
-  width: {
-    type   : Number,
-    default: 430,
-  },
-  height: {
-    type   : Number,
-    default: 230,
-  },
-  color: {
-    type   : String,
-    default: '#000000',
-  },
-  placeholder: {
-    type   : String,
-    default: '',
-  },
-  resetLabel: {
-    type   : String,
-    default: 'Reset',
-  },
-})
-
-const model   = useVModel(props)
-const preview = usePreview(model, '')
-const isBlank = ref(true)
-
-const canvas = ref<HTMLCanvasElement>()
-const lines  = createLines(15)
-
-function reset () {
-  clearAll(canvas.value)
-
-  isBlank.value = true
-  model.value   = ''
-}
-
-function setColor (color: string) {
-  if (!isBlank.value) {
-    replaceColor(canvas.value, color)
-
-    const result = toDataURL(canvas.value)
-    const value  = props.modelModifiers.base64 ? result : fromBase64(result)
-
-    model.value = value
-  }
-}
-
-watch(() => props.color, setColor)
-
-useDraw(canvas, {
-  onstart (event) {
-    for (const line of lines)
-      line.start(event.pageX, event.pageY)
-  },
-  onmove (event) {
-    for (const line of lines) {
-      const coordinate = line.move(event.pageX, event.pageY)
-      const options    = { color: props.color }
-
-      drawLine(canvas.value, coordinate, options)
-    }
-
-    const result = toDataURL(canvas.value)
-    const value  = props.modelModifiers.base64 ? result : fromBase64(result)
-
-    isBlank.value = false
-    model.value   = value
-  },
-})
-
-onMounted(() => {
-  if (model.value && preview.value) {
-    placeImage(canvas.value, preview.value)
-
-    isBlank.value = false
-  }
-})
-</script>
-
-<style lang="postcss">
-  .signature-draw {
-    @apply relative inline-block;
-
-    &--desktop {
-      .signature-draw__canvas {
-        @apply bg-default touch-none cursor-crosshair border rounded border-dashed;
-      }
-    }
-
-    &__placeholder {
-      @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none text-center text-muted;
-    }
-
-    &__reset {
-      @apply absolute right-1 top-1 bg-default;
-      &.btn--variant-link.btn--default {
-        @apply dark:text-dark-subtlest hover:dark:text-dark-on-emphasis;
-      }
-    }
-  }
-  </style>