@privyid/persona 0.8.0 → 0.10.0

package/dist/components/radio/Radio.vue

@@ -199,7 +199,7 @@ export default defineComponent({
   */
   &&--checkbox {
     .radio__icon {
-      @apply rounded-sm;
+      @apply rounded-tn;
     }
   }
 

package/dist/components/sidebar/Sidebar.vue

@@ -13,6 +13,7 @@ import {
   provide
 } from "vue-demi";
 import { SIDEBAR_SETTINGS } from ".";
+import { useVModel } from "../input";
 export default defineComponent({
   props: {
     variant: {
@@ -30,14 +31,28 @@ export default defineComponent({
     fixed: {
       type: Boolean,
       default: false
+    },
+    toggleable: {
+      type: String,
+      default: void 0
+    },
+    modelValue: {
+      type: Boolean,
+      default: true
     }
   },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue"],
   setup(props) {
     provide(SIDEBAR_SETTINGS, {
       variant: props.variant,
       align: props.align,
       type: props.type
     });
+    const model = useVModel(props);
     const classNames = computed(() => {
       const result = ["sidebar"];
       if (props.type)
@@ -48,6 +63,10 @@ export default defineComponent({
         result.push(`sidebar--${props.variant}`);
       if (props.fixed)
         result.push("sidebar--fixed");
+      if (props.toggleable)
+        result.push(`sidebar--toggleable sidebar--toggleable-${props.toggleable}`);
+      if (props.toggleable && props.fixed && model.value)
+        result.push("sidebar--show");
       return result;
     });
     return { classNames };
@@ -59,28 +78,80 @@ export default defineComponent({
 .sidebar {
   @apply bg-default px-2 py-4;
 
+  /**
+  * Default sidebar has
+  * 230px width
+  */
   &:not(.sidebar--narrow) {
     @apply w-[230px];
   }
 
+  /**
+  * Right-align sidebar
+  */
   &:not(.sidebar--fixed) {
     &.sidebar--right {
       @apply ml-auto;
     }
   }
 
+  /**
+  * Fixed sidebar
+  */
   &&--fixed {
-    @apply fixed left-0 top-0 h-full;
+    @apply fixed top-0 h-full shadow-lg;
+
+    &:not(.sidebar--right) {
+      @apply left-0;
+    }
 
+    /**
+    * Right-align in fixed
+    */
     &.sidebar--right {
       @apply left-auto right-0;
     }
+
+    /**
+    * Toggleable sidebar
+    */
+    &.sidebar--toggleable {
+      &:where(&&-all, &&-lg, &&-md, &&-sm) {
+        &:is(.sidebar--show) {
+          @apply left-0 transition-[left] ease-out delay-75;
+        }
+      }
+
+      &:where(&&-all, &&-lg, &&-md, &&-sm) {
+        @apply -left-[100%] transition-[left] ease-in delay-75;
+      }
+
+      &&-lg {
+        @apply lg:left-0;
+      }
+
+      &&-md {
+        @apply md:left-0;
+      }
+
+      &&-sm {
+        @apply sm:left-0;
+      }
+    }
   }
 
+  /**
+  * Narrow sidebar
+  * is 60px width
+  */
   &&--narrow {
     @apply w-[60px];
   }
 
+  /**
+  * Sidebar with tabs
+  * and lines variant
+  */
   &&--tabs,
   &&--lines {
     @apply pr-0 py-2 border-r border-r-default;

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

@@ -1,6 +1,7 @@
 import { PropType } from 'vue-demi';
 import { TypeVariant } from '.';
 import { StyleVariant, AlignVariant } from '../nav';
+import { ToggleableVariant } from '../navbar';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<StyleVariant>;
@@ -18,9 +19,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    toggleable: {
+        type: PropType<ToggleableVariant>;
+        default: any;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
-}, 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<{
+}, 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<{
     variant: {
         type: PropType<StyleVariant>;
         default: string;
@@ -37,10 +46,22 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+    toggleable: {
+        type: PropType<ToggleableVariant>;
+        default: any;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
     fixed: boolean;
     variant: StyleVariant;
     type: TypeVariant;
+    modelValue: boolean;
     align: AlignVariant;
+    toggleable: ToggleableVariant;
 }>;
 export default _default;

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

@@ -3,6 +3,7 @@
     data-testid="sidebar-menu"
     :type="type"
     :fixed="fixed"
+    :toggleable="toggleable"
     :align="align">
     <slot />
     <SidebarNav
@@ -88,6 +89,10 @@ export default defineComponent({
     align: {
       type: String,
       default: "left"
+    },
+    toggleable: {
+      type: String,
+      default: void 0
     }
   }
 });

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

@@ -2,6 +2,7 @@ import { PropType } from 'vue-demi';
 import { TypeVariant } from '../sidebar';
 import { Menu } from '.';
 import { AlignVariant } from '../nav';
+import { ToggleableVariant } from '../navbar';
 declare const _default: import("vue-demi").DefineComponent<{
     menus: {
         type: PropType<Menu[]>;
@@ -19,6 +20,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<AlignVariant>;
         default: string;
     };
+    toggleable: {
+        type: PropType<ToggleableVariant>;
+        default: any;
+    };
 }, 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<{
     menus: {
         type: PropType<Menu[]>;
@@ -36,10 +41,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<AlignVariant>;
         default: string;
     };
+    toggleable: {
+        type: PropType<ToggleableVariant>;
+        default: any;
+    };
 }>>, {
     fixed: boolean;
     type: TypeVariant;
     align: AlignVariant;
+    toggleable: ToggleableVariant;
     menus: Menu[];
 }>;
 export default _default;

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

@@ -77,8 +77,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>>, {
     color: string;
-    modelValue: string | File;
     text: string;
+    modelValue: string | File;
     modelModifiers: ModelModifier;
     font: string;
     width: number;

package/dist/components/table/Table.vue

@@ -204,6 +204,10 @@ export default defineComponent({
     > .datatable__header {
       @apply px-3;
     }
+
+    + .datatable__body {
+      @apply pt-2;
+    }
   }
 
   .datatable__header {
@@ -215,16 +219,16 @@ export default defineComponent({
     }
 
     &.datatable__drag {
-      @apply invisible;
+      @apply invisible mx-3;
     }
   }
 
   &__row {
-    @apply flex space-x-2 w-full items-center bg-default;
+    @apply flex space-x-2 w-full items-start;
   }
 
   &__cell {
-    @apply py-4 px-3 text-sm text-default;
+    @apply py-4 px-3 text-sm text-default break-all;
 
     & > .datatable__header {
       @apply text-xs;
@@ -232,7 +236,7 @@ export default defineComponent({
 
     &.datatable__checkbox,
     &.datatable__drag {
-      @apply flex-shrink-0 flex-grow-0;
+      @apply flex-shrink-0 flex-grow-0 self-center;
     }
 
     &.datatable__checkbox {
@@ -256,13 +260,17 @@ export default defineComponent({
     }
 
     .datatable__row {
-      @apply rounded border border-default;
+      @apply rounded border border-default bg-default;
     }
   }
 
   &--static {
+    .datatable__headers {
+      @apply border-b border-b-default;
+    }
+
     .datatable__body {
-      @apply border-b border-b-default divide-y divide-default;
+      @apply border-b border-b-default divide-y divide-default bg-default;
     }
   }
 }

package/dist/components/table/Table.vue.d.ts

@@ -62,8 +62,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:items"?: (...args: any[]) => any;
 }, {
     variant: TypeVariant;
-    modelValue: Record<string, unknown>[];
     items: Record<string, unknown>[];
+    modelValue: Record<string, unknown>[];
     draggable: boolean;
     fields: TableField[];
     selectable: boolean;

package/dist/components/toggle/Toggle.vue

@@ -105,7 +105,7 @@ export default defineComponent({
     event: "update:modelValue"
   },
   emits: ["update:modelValue", "change"],
-  setup(props) {
+  setup(props, { slots }) {
     const model = useVModel(props);
     const classNames = computed(() => {
       const result = [];
@@ -117,6 +117,8 @@ export default defineComponent({
         result.push("toggle--disabled");
       if (props.readonly)
         result.push("toggle--readonly");
+      if (slots.default)
+        result.push("toggle--labeled");
       return result;
     });
     function toggle() {
@@ -137,7 +139,7 @@ export default defineComponent({
   @apply inline-flex cursor-pointer relative items-center select-none;
 
   &__switch {
-    @apply flex items-center justify-center relative bg-inactive border-subtle mr-4;
+    @apply flex items-center justify-center relative bg-inactive border-subtle;
   }
 
   &__pointer {
@@ -174,7 +176,7 @@ export default defineComponent({
 
   &&--flat {
     .toggle__switch {
-      @apply flex-row-reverse border-2 rounded-[6px] min-h-[1.5rem] min-w-[2.5rem];
+      @apply flex-row-reverse border-2 rounded-xs min-h-[1.5rem] min-w-[2.5rem];
     }
 
     .toggle__label {
@@ -212,5 +214,11 @@ export default defineComponent({
       @apply bg-inactive;
     }
   }
+
+  &&--labeled {
+    .toggle__switch {
+      @apply mr-4;
+    }
+  }
 }
 </style>

package/dist/components/tour/TourDialog.vue.d.ts

@@ -95,8 +95,8 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     image: string;
     dismissable: boolean;
-    title: string;
     text: string;
+    title: string;
     step: number;
     highlight: boolean;
     totalStep: number;

package/dist/components/tour/TourHighlight.vue

@@ -51,7 +51,7 @@ export default defineComponent({
   }
 
   &__highlight {
-    @apply absolute shadow-mask cursor-pointer rounded-sm;
+    @apply absolute shadow-mask cursor-pointer rounded-tn;
   }
 }
 </style>

package/dist/core/index.d.ts

@@ -18,5 +18,7 @@ export { initAppContext, useAppContext, } from '../components/global/context';
 export { useRouter, installRouter, } from '../components/global/router';
 export { createTour, } from '../components/tour';
 export { usePasswordStrength, } from '../components/input-password';
-export { usePreview, } from '../components/cropper/';
+export { usePreview, } from '../components/cropper';
 export { usePdfContext, } from '../components/pdf-viewer';
+export { defineNavigation, } from '../components/breadcrumbs';
+export type { PdfHelipadResult, } from '../components/pdf-helipad';

package/dist/core/index.mjs

@@ -64,7 +64,10 @@ export {
 } from "../components/input-password";
 export {
   usePreview
-} from "../components/cropper/";
+} from "../components/cropper";
 export {
   usePdfContext
 } from "../components/pdf-viewer";
+export {
+  defineNavigation
+} from "../components/breadcrumbs";

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.8.0"
+  "version": "0.10.0"
 }

package/dist/module.mjs

@@ -23,6 +23,7 @@ const module = defineNuxtModule({
     }
     await addComponentsDir({
       path: resolve("./components"),
+      pathPrefix: false,
       prefix: options.prefix,
       extensions: ["vue"]
     });
@@ -37,7 +38,8 @@ const module = defineNuxtModule({
         "webfontloader",
         "zxcvbn",
         "pdfjs-dist",
-        "pdfjs-dist/web/pdf_viewer"
+        "pdfjs-dist/web/pdf_viewer",
+        "vuedraggable"
       );
     });
   }

package/package.json

@@ -1,7 +1,13 @@
 {
   "name": "@privyid/persona",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "license": "MIT",
+  "repository": "https://github.com/privy-open-source/design-system",
+  "author": "Ade Novid <adenvt@gmail.com> (https://github.com/adenvt)",
+  "bugs": {
+    "url": "https://github.com/privy-open-source/design-system/issues"
+  },
+  "homepage": "https://privy-open-source.github.io/design-system/",
   "type": "module",
   "exports": {
     ".": {
@@ -48,17 +54,17 @@
     "@carbon/icons-vue": "10.49.1",
     "@floating-ui/dom": "^1.0.4",
     "@juggle/resize-observer": "^3.4.0",
-    "@nuxt/kit": "^3.0.0",
+    "@nuxt/kit": "^3.3.2",
     "@testing-library/dom": "^8.19.0",
     "@testing-library/user-event": "^14.4.3",
     "@vueuse/core": "9.11.1",
     "@vueuse/math": "^9.4.0",
     "@zxing/browser": "0.1.1",
     "@zxing/library": "0.19.2",
-    "chart.js": "4.2.0",
+    "chart.js": "4.2.1",
     "core-js": "3",
     "date-fns": "2.29.3",
-    "defu": "6.1.1",
+    "defu": "6.1.2",
     "fast-equals": "^4.0.3",
     "fuse.js": "6.6.2",
     "interactjs": "1.10.17",
@@ -74,8 +80,11 @@
     "webfontloader": "1.6.28",
     "zxcvbn": "^4.4.2"
   },
+  "browserslist": [
+    "extends @privyid/browserslist-config"
+  ],
   "peerDependencies": {
-    "@privyid/tailwind-preset": "^0.8.0",
+    "@privyid/tailwind-preset": "^0.10.0",
     "postcss-custom-properties": "^12.1.11",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
@@ -84,12 +93,14 @@
   },
   "devDependencies": {
     "@nuxt/module-builder": "latest",
-    "@nuxt/schema": "3.0.0",
+    "@nuxt/schema": "3.3.2",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@privyid/tailwind-preset": "^0.8.0",
+    "@privyid/browserslist-config": "^0.10.0",
+    "@privyid/tailwind-preset": "^0.10.0",
     "@types/sanitize-html": "^2",
+    "browserslist-to-esbuild": "^1.2.0",
     "del-cli": "5.0.0",
-    "nuxt": "3.0.0",
+    "nuxt": "3.3.2",
     "postcss-custom-properties": "^12.1.11",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",