@privyid/persona 0.21.0 → 0.23.0

package/dist/components/tabs/Tabs.vue

@@ -21,7 +21,10 @@
           data-testid="tab"
           :disabled="tab.disabled"
           :active="i === active"
-          :class="{ 'nav__item--no-icon' : (!tab.slots.icon), 'nav__item--no-label' : (!tab.title && !tab.slots.title) }"
+          :class="{
+            'nav__item--no-icon' : (!tab.slots.icon),
+            'nav__item--no-label': (!tab.title && !tab.slots.title)
+          }"
           @click="selectTab(i, tab)">
           <template #icon>
             <template v-if="tab.slots.icon">
@@ -39,90 +42,105 @@
     </nav>
 
     <div class="tabs__content">
-      <tab-content :active="active">
+      <tab-content
+        :active="active"
+        :vertical="vertical"
+        :keep-alive="keepAlive">
         <slot />
       </tab-content>
     </div>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
+import {
+  VNode,
+  PropType,
+  computed,
+  Slots,
+} from 'vue-demi'
+import Nav from '../nav/Nav.vue'
 import {
-  defineComponent,
-  computed
-} from "vue-demi";
-import Nav from "../nav/Nav.vue";
-import NavItem from "../nav/NavItem.vue";
-import TabContent from "./TabContent.vue";
-import { useVModel } from "../input";
-import { findAllChildren, toBoolean } from "../utils/vnode";
-export default defineComponent({
-  components: {
-    Nav,
-    NavItem,
-    TabContent
+  StyleVariant as TabsStyleVariant,
+  AlignVariant as TabsAlignVariant,
+} from '../nav'
+import NavItem from '../nav/NavItem.vue'
+import TabContent from './TabContent.vue'
+import { useVModel } from '../input'
+import { findAllChildren, toBoolean } from '../utils/vnode'
+
+interface TabContext {
+  title: string,
+  disabled: boolean,
+  slots: Slots,
+}
+
+const props = defineProps({
+  variant: {
+    type   : String as PropType<TabsStyleVariant>,
+    default: 'tabs',
   },
-  props: {
-    variant: {
-      type: String,
-      default: "tabs"
-    },
-    align: {
-      type: String,
-      default: "left"
-    },
-    vertical: {
-      type: Boolean,
-      default: false
-    },
-    fill: {
-      type: Boolean,
-      default: false
-    },
-    justified: {
-      type: Boolean,
-      default: false
-    },
-    navWrapperClass: {
-      type: String,
-      default: void 0
-    },
-    modelValue: {
-      type: Number,
-      default: 0
-    }
+  align: {
+    type   : String as PropType<TabsAlignVariant>,
+    default: 'left',
   },
-  setup(props, { slots }) {
-    const classNames = computed(() => {
-      const result = [];
-      if (props.vertical && props.align)
-        result.push(`tabs--vertical-align-${props.align}`);
-      return result;
-    });
-    const active = useVModel(props);
-    const tabs = computed(() => {
-      const vnodes = slots.default ? slots.default() : [];
-      const tabs2 = findAllChildren(vnodes, "Tab");
-      return tabs2.map((vnode) => {
-        return {
-          title: vnode.props?.title,
-          disabled: toBoolean(vnode.props?.disabled),
-          slots: vnode.children
-        };
-      });
-    });
-    function selectTab(index, tab) {
-      if (!tab.disabled)
-        active.value = index;
-    }
+  vertical: {
+    type   : Boolean,
+    default: false,
+  },
+  fill: {
+    type   : Boolean,
+    default: false,
+  },
+  justified: {
+    type   : Boolean,
+    default: false,
+  },
+  navWrapperClass: {
+    type   : String,
+    default: undefined,
+  },
+  modelValue: {
+    type   : Number,
+    default: 0,
+  },
+  keepAlive: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+const classNames = computed(() => {
+  const result: string[] = []
+
+  if (props.vertical && props.align)
+    result.push(`tabs--vertical-align-${props.align}`)
+
+  return result
+})
+
+const slots = defineSlots<{
+  default:() => VNode[],
+}>()
+
+const active = useVModel(props)
+const tabs   = computed<TabContext[]>(() => {
+  const vnodes = slots.default ? slots.default() : []
+  const tabs   = findAllChildren(vnodes, 'Tab')
+
+  return tabs.map((vnode) => {
     return {
-      classNames,
-      active,
-      tabs,
-      selectTab
-    };
-  }
-});
+      title   : vnode.props?.title,
+      disabled: toBoolean(vnode.props?.disabled),
+      slots   : vnode.children as Slots,
+    }
+  })
+})
+
+function selectTab (index: number, tab: TabContext) {
+  if (!tab.disabled)
+    active.value = index
+}
 </script>
 
 <style lang="postcss">

package/dist/components/text/Text.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="hyperlink"
+    :is="elementNames"
     data-testid="freetext"
     class="freetext"
     :class="classNames"
@@ -31,11 +31,15 @@ export default defineComponent({
     transform: {
       type: String,
       default: "normalcase"
+    },
+    element: {
+      type: String,
+      default: "span"
     }
   },
   setup(props) {
-    const hyperlink = computed(() => {
-      return props.href ? "a" : "span";
+    const elementNames = computed(() => {
+      return props.href ? "a" : props.element;
     });
     const classNames = computed(() => {
       const result = [""];
@@ -52,8 +56,8 @@ export default defineComponent({
       return result;
     });
     return {
-      hyperlink,
-      classNames
+      classNames,
+      elementNames
     };
   }
 });
@@ -125,8 +129,12 @@ export default defineComponent({
   * Hyperlink style
    */
   &--hyperlink {
-    @apply underline decoration-solid text-info;
-    @apply dark:text-dark-info;
+    @apply underline decoration-solid;
+
+    &:not([class^='text-'], [class*='text-']) {
+      @apply text-link;
+      @apply dark:text-dark-link;
+    }
   }
 
   /**

package/dist/components/text/Text.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-import { StyleVariant } from '.';
+import { StyleVariant, ElementVariant } from '.';
 import { WeightVariant, TransformVariant } from '../heading';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
@@ -18,9 +18,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<TransformVariant>;
         default: string;
     };
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
 }, {
-    hyperlink: import("vue-demi").ComputedRef<"a" | "span">;
     classNames: import("vue-demi").ComputedRef<string[]>;
+    elementNames: import("vue-demi").ComputedRef<ElementVariant>;
 }, 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<{
     variant: {
         type: PropType<StyleVariant>;
@@ -38,10 +42,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<TransformVariant>;
         default: string;
     };
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
 }>>, {
     variant: StyleVariant;
     href: string;
     weight: WeightVariant;
     transform: TransformVariant;
+    element: ElementVariant;
 }, {}>;
 export default _default;

package/dist/components/text/index.d.ts

@@ -1 +1,2 @@
 export type StyleVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subheading' | 'subheading2' | 'body' | 'body2' | 'btn' | 'btn2' | 'caption' | 'caption2' | 'formlabel' | 'formlabel2' | 'overline';
+export type ElementVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p' | 'a' | 'label';

package/dist/components/textarea/Textarea.vue.d.ts

@@ -34,11 +34,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     rows: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     maxlength: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
     accept: {
@@ -46,7 +46,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
 }, {
-    model: import("vue-demi").Ref<string | undefined>;
+    model: import("vue-demi").Ref<string>;
     classNames: import("vue-demi").ComputedRef<string[]>;
     handleInput: () => void;
     checkOnInput: typeof checkOnInput;
@@ -86,11 +86,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     rows: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     maxlength: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
     accept: {

package/dist/components/toggle/Toggle.vue

@@ -4,7 +4,10 @@
     class="toggle"
     :class="classNames"
     @click.prevent="toggle">
-    <div class="toggle__switch">
+    <div
+      class="toggle__switch"
+      data-testid="toggle-switch"
+      :class="switchClass">
       <span
         v-if="noLabel === false"
         class="toggle__label toggle__checked-label">
@@ -98,6 +101,14 @@ export default defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    switchClass: {
+      type: [
+        String,
+        Array,
+        Object
+      ],
+      default: void 0
     }
   },
   models: {

package/dist/components/toggle/Toggle.vue.d.ts

@@ -6,15 +6,15 @@ 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;
     };
     uncheckedValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
         default: boolean;
     };
     checked: {
@@ -41,6 +41,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    switchClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
     model: import("vue-demi").Ref<boolean>;
@@ -51,15 +55,15 @@ 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;
     };
     uncheckedValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
         default: boolean;
     };
     checked: {
@@ -86,6 +90,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    switchClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -95,10 +103,11 @@ declare const _default: import("vue-demi").DefineComponent<{
     modelValue: string | number | boolean | Record<string, any> | unknown[] | Date;
     disabled: boolean;
     readonly: boolean;
-    uncheckedValue: string | number | boolean | Record<string, any> | unknown[] | Date;
     checked: boolean;
+    uncheckedValue: string | number | boolean | Record<string, any> | unknown[] | Date;
     noLabel: boolean;
     checkedLabel: string;
     uncheckedLabel: string;
+    switchClass: string | Record<string, any> | unknown[];
 }, {}>;
 export default _default;

package/dist/components/tooltip/index.mjs

@@ -64,7 +64,7 @@ export const pTooltip = {
       tooltip.hide(id);
     el.removeAttribute("title");
   },
-  async beforeUnmount(el, bindings) {
+  async unmounted(el, bindings) {
     const { default: TooltipContainer } = await import("./TooltipContainer.vue");
     const tooltip = await useSingleton(TooltipContainer);
     const id = el.dataset.tooltipId;

package/dist/components/tooltip/utils/create-handler.mjs

@@ -7,7 +7,7 @@ export default function createHandler(eventName, tooltipAction, prevent = false)
     const id = target.dataset.tooltipId;
     const enable = target.dataset.tooltipEnable !== "false";
     const action = target.dataset.tooltipAction;
-    if (enable && action.includes(eventName)) {
+    if (id && enable && action.includes(eventName)) {
       tooltip[tooltipAction](id);
       if (prevent)
         event.preventDefault();

package/dist/components/tour/TourDialog.vue

@@ -21,6 +21,7 @@
     <div class="tour__body">
       <p-subheading
         v-if="title"
+        class="tour__title"
         size="sm">
         <span
           v-p-md.inline="title"
@@ -170,6 +171,11 @@ export default defineComponent({
   &__body {
     @apply p-4 space-y-3;
 
+    .tour__title {
+      @apply text-on-emphasis;
+      @apply dark:text-dark-on-emphasis;
+    }
+
     > * {
       @apply text-on-emphasis;
       @apply dark:text-dark-on-emphasis;

package/dist/components/truncate/Truncate.vue

@@ -13,7 +13,7 @@
         <a
           data-testid="truncate-expand"
           href="#"
-          @click.prevent="toggle">
+          @click.stop.prevent="toggle">
           {{ expand ? showLessText : showMoreText }}
         </a>
       </template>

package/dist/components/truncate/Truncate.vue.d.ts

@@ -4,7 +4,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     length: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     omission: {
@@ -38,7 +38,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     length: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     omission: {

package/dist/components/utils/date.d.ts

@@ -0,0 +1,21 @@
+import { format, Locale } from 'date-fns';
+/**
+ * Format date using date-fns/format,
+ * Automatically switch local following global lang setting.
+ * @param date Date
+ * @param formatStr date format
+ */
+export declare function formatDate(...args: Parameters<typeof format>): string;
+/**
+ * Install locale pack
+ * @param name Language name, ex: `fr`
+ * @param locale Language Pack Object
+ */
+export declare function installLocale(name: string, locale: Locale): void;
+/**
+ * Get locale pack
+ * @param name language name, ex: 'fr'
+ */
+export declare function getLocale(name?: "id" | "en" | (string & {
+    _?: undefined;
+})): any;

package/dist/components/utils/date.mjs

@@ -0,0 +1,15 @@
+import id from "date-fns/locale/id/index";
+import en from "date-fns/locale/en-US/index";
+import { getLang } from "../global/store.mjs";
+import { format } from "date-fns";
+import defu from "defu";
+const localePacks = { en, id };
+export function formatDate(...args) {
+  return format(args[0], args[1], defu(args[2], { locale: getLocale() }));
+}
+export function installLocale(name, locale) {
+  localePacks[name] = locale;
+}
+export function getLocale(name = getLang()) {
+  return localePacks[name];
+}

package/dist/components/utils/vnode.mjs

@@ -11,7 +11,7 @@ export function findAllChildren(vnodes, ...names) {
     const vnode = scan.shift();
     if (vnode.type === Fragment && Array.isArray(vnode.children))
       scan.push(...vnode.children);
-    else if (vnode.type && names.includes(vnode.type.name))
+    else if (names[0] === "*" || vnode.type && names.includes(vnode.type.name))
       result.push(vnode);
   }
   return result;

package/dist/core/index.d.ts

@@ -27,3 +27,4 @@ export type { PdfHelipadResult, } from '../components/pdf-helipad';
 export { useStep, } from '../components/steps';
 export { defineAccordion, } from '../components/accordion';
 export { useVModel, } from '../components/input';
+export { installLocale, formatDate, } from '../components/utils/date';

package/dist/core/index.mjs

@@ -94,3 +94,7 @@ export {
 export {
   useVModel
 } from "../components/input";
+export {
+  installLocale,
+  formatDate
+} from "../components/utils/date";

package/dist/module.json

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona",
   "description": "Persona core package",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",
@@ -58,31 +58,31 @@
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.5.1",
+    "@floating-ui/dom": "1.5.3",
     "@juggle/resize-observer": "3.4.0",
-    "@nuxt/kit": "3.7.1",
+    "@nuxt/kit": "3.7.4",
     "@splidejs/splide": "4.1.4",
-    "@testing-library/dom": "9.3.1",
-    "@testing-library/user-event": "14.4.3",
+    "@testing-library/dom": "9.3.3",
+    "@testing-library/user-event": "14.5.1",
     "@vueuse/core": "10.3.0",
     "@vueuse/math": "10.3.0",
     "@zxing/browser": "0.1.4",
     "@zxing/library": "0.20.0",
-    "chart.js": "4.3.3",
+    "chart.js": "4.4.0",
     "core-js": "3",
     "date-fns": "2.30.0",
     "defu": "6.1.2",
     "fast-equals": "^5.0.0",
     "fuse.js": "6.6.2",
-    "interactjs": "1.10.18",
+    "interactjs": "1.10.19",
     "lodash-es": "4.17.21",
-    "marked": "5.0.0",
+    "marked": "5.1.2",
     "nanodelay": "2.0.2",
-    "pdfjs-dist": "3.2.146",
-    "sanitize-html": "2.8.1",
+    "pdfjs-dist": "3.11.174",
+    "sanitize-html": "2.11.0",
     "scroll-into-view": "1.16.2",
     "tabbable": "6.2.0",
-    "vue-collapsed": "1.2.7",
+    "vue-collapsed": "1.2.8",
     "vue-demi": "0.14.6",
     "vuedraggable": "next",
     "webfontloader": "1.6.28",
@@ -92,8 +92,8 @@
     "extends @privyid/browserslist-config"
   ],
   "peerDependencies": {
-    "@privyid/browserslist-config": "^0.21.0",
-    "@privyid/tailwind-preset": "^0.21.0",
+    "@privyid/browserslist-config": "^0.23.0",
+    "@privyid/tailwind-preset": "^0.23.0",
     "postcss-custom-properties": "^12.1.11 || ^13.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
@@ -102,13 +102,13 @@
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.5.0",
-    "@nuxt/schema": "3.7.1",
+    "@nuxt/schema": "3.7.4",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@privyid/browserslist-config": "^0.21.0",
-    "@privyid/tailwind-preset": "^0.21.0",
+    "@privyid/browserslist-config": "^0.23.0",
+    "@privyid/tailwind-preset": "^0.23.0",
     "@types/sanitize-html": "^2",
     "browserslist-to-esbuild": "^1.2.0",
-    "nuxt": "3.7.1",
+    "nuxt": "3.7.4",
     "postcss-custom-properties": "^13.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",