@privyid/persona 0.17.1 → 0.18.0

package/dist/components/textarea/Textarea.vue

@@ -14,6 +14,7 @@
       :rows="rows"
       :maxlength="maxlength"
       :aria-valuemax="maxlength"
+      @beforeinput="checkOnInput(accept, $event)"
       @input="handleInput" />
     <div
       v-if="showCounter"
@@ -25,7 +26,10 @@
 </template>
 
 <script>
-import { useVModel } from "../input";
+import {
+  checkOnInput,
+  useVModel
+} from "../input";
 import {
   defineComponent,
   computed,
@@ -75,6 +79,10 @@ export default defineComponent({
     maxlength: {
       type: [Number, String],
       default: void 0
+    },
+    accept: {
+      type: String,
+      default: void 0
     }
   },
   models: {
@@ -122,6 +130,7 @@ export default defineComponent({
       model,
       classNames,
       handleInput,
+      checkOnInput,
       charactersLength,
       calculateRowHeight
     };

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

@@ -1,3 +1,5 @@
+import { AcceptVariant, checkOnInput } from '../input';
+import { PropType } from 'vue-demi';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: StringConstructor;
@@ -32,17 +34,22 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     rows: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     maxlength: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    accept: {
+        type: PropType<AcceptVariant>;
         default: undefined;
     };
 }, {
     model: import("vue-demi").Ref<string | undefined>;
     classNames: import("vue-demi").ComputedRef<string[]>;
     handleInput: () => void;
+    checkOnInput: typeof checkOnInput;
     charactersLength: import("vue-demi").ComputedRef<number | "0">;
     calculateRowHeight: () => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("input" | "update:modelValue")[], "input" | "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
@@ -79,11 +86,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     rows: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     maxlength: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    accept: {
+        type: PropType<AcceptVariant>;
         default: undefined;
     };
 }>> & {
@@ -97,6 +108,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     readonly: boolean;
     placeholder: string;
     maxlength: string | number;
+    accept: AcceptVariant;
     showCounter: boolean;
     rows: string | number;
     autoGrow: boolean;

package/dist/components/toast/Toast.vue

@@ -32,11 +32,11 @@ import {
   onMounted,
   onUnmounted
 } from "vue-demi";
-import IconInfo from "@carbon/icons-vue/lib/information--filled/24";
-import IconSuccess from "@carbon/icons-vue/lib/checkmark/24";
-import IconWarning from "@carbon/icons-vue/lib/warning--filled/24";
-import IconError from "@carbon/icons-vue/lib/warning--alt--filled/24";
-import IconClose from "@carbon/icons-vue/lib/close/16";
+import IconInfo from "@privyid/persona-icon/vue/information-circle-solid/24.vue";
+import IconSuccess from "@privyid/persona-icon/vue/checkmark/24.vue";
+import IconWarning from "@privyid/persona-icon/vue/exclamation-circle-solid/24.vue";
+import IconError from "@privyid/persona-icon/vue/exclamation-triangle-solid/24.vue";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
 const ToastIcons = {
   info: IconInfo,
   success: IconSuccess,

package/dist/components/toast/ToastContainer.vue

@@ -76,7 +76,7 @@ export default defineComponent({
   @apply z-[var(--p-toast-z-index)] fixed flex flex-col space-y-2 max-h-screen overflow-visible;
 
   &--top-right {
-    @apply top-0 right-0;
+    @apply top-2 right-4;
 
     .toast {
       &-enter-from,
@@ -87,7 +87,7 @@ export default defineComponent({
   }
 
   &--top-center {
-    @apply top-0 left-1/2 -translate-x-1/2;
+    @apply top-2 left-1/2 -translate-x-1/2;
 
     .toast {
       &-enter-from,
@@ -98,7 +98,7 @@ export default defineComponent({
   }
 
   &--top-left {
-    @apply top-0 left-0;
+    @apply top-2 left-4;
 
     .toast {
       &-enter-from,
@@ -109,7 +109,7 @@ export default defineComponent({
   }
 
   &--bottom-right {
-    @apply bottom-0 right-0;
+    @apply bottom-2 right-4;
 
     .toast {
       &-enter-from,
@@ -120,7 +120,7 @@ export default defineComponent({
   }
 
   &--bottom-center {
-    @apply  bottom-0 left-1/2 -translate-x-1/2;
+    @apply  bottom-2 left-1/2 -translate-x-1/2;
 
     .toast {
       &-enter-from,
@@ -131,7 +131,7 @@ export default defineComponent({
   }
 
   &--bottom-left {
-    @apply bottom-0 left-0;
+    @apply bottom-2 left-4;
 
     .toast {
       &-enter-from,

package/dist/components/toggle/Toggle.vue

@@ -140,7 +140,7 @@ export default defineComponent({
   @apply dark:text-dark-default;
 
   &__switch {
-    @apply flex items-center justify-center relative bg-subtle border-default;
+    @apply flex items-center justify-center relative bg-subtle border-default font-medium;
     @apply dark:bg-dark-subtle dark:border-dark-default;
   }
 

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

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

package/dist/components/tooltip/Tooltip.vue.d.ts

@@ -21,7 +21,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     isShow: import("vue-demi").Ref<boolean>;
     classNames: import("vue-demi").ComputedRef<string[]>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "show" | "hide")[], "update:modelValue" | "show" | "hide", 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, ("show" | "update:modelValue" | "hide")[], "show" | "update:modelValue" | "hide", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;

package/dist/components/tooltip/TooltipContainer.vue

@@ -40,14 +40,29 @@ export default defineComponent({
       }
     }
     function show(id) {
-      items.value.get(id).isShow = true;
+      const item = items.value.get(id);
+      const result = item.target.dispatchEvent(new CustomEvent("tooltip:show", {
+        detail: item,
+        cancelable: true
+      }));
+      if (result)
+        item.isShow = true;
     }
     function hide(id) {
-      items.value.get(id).isShow = false;
+      const item = items.value.get(id);
+      const result = item.target.dispatchEvent(new CustomEvent("tooltip:hide", {
+        detail: item,
+        cancelable: true
+      }));
+      if (result)
+        item.isShow = false;
     }
     function toggle(id) {
       const item = items.value.get(id);
-      item.isShow = !item.isShow;
+      if (item.isShow)
+        hide(id);
+      else
+        show(id);
     }
     function remove(id) {
       items.value.delete(id);

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

@@ -12,3 +12,6 @@ export interface TooltipItem extends TooltipOptions {
 }
 export declare const pTooltip: Directive<HTMLElement, string | boolean>;
 export declare const vPTooltip: import("vue-demi").ObjectDirective<HTMLElement, string | boolean>;
+export declare function showTooltip(selector: string | HTMLElement): Promise<void>;
+export declare function hideTooltip(selector: string | HTMLElement): Promise<void>;
+export declare function toggleTooltip(selector: string | HTMLElement): Promise<void>;

package/dist/components/tooltip/index.mjs

@@ -11,10 +11,14 @@ const handleMouseEnter = createHandler("hover", "show");
 const handleMouseLeave = createHandler("hover", "hide");
 const handleFocus = createHandler("focus", "show");
 const handleBlur = createHandler("focus", "hide");
+async function useTooltip() {
+  const { default: TooltipContainer } = await import("./TooltipContainer.vue");
+  const tooltip = await useSingleton(TooltipContainer);
+  return tooltip;
+}
 export const pTooltip = {
   async mounted(el, bindings) {
-    const { default: TooltipContainer } = await import("./TooltipContainer.vue");
-    const tooltip = await useSingleton(TooltipContainer);
+    const tooltip = await useTooltip();
     const action = parseAction(el, bindings);
     const color = parseColor(el, bindings);
     const text = parseText(el, bindings);
@@ -38,8 +42,7 @@ export const pTooltip = {
     el.addEventListener("blur", handleBlur, { passive: true });
   },
   async updated(el, bindings) {
-    const { default: TooltipContainer } = await import("./TooltipContainer.vue");
-    const tooltip = await useSingleton(TooltipContainer);
+    const tooltip = await useTooltip();
     const id = el.dataset.tooltipId;
     const action = parseAction(el, bindings);
     const color = parseColor(el, bindings);
@@ -80,3 +83,25 @@ export const pTooltip = {
   }
 };
 export const vPTooltip = pTooltip;
+function getTooltipId(selector) {
+  const targets = selector instanceof HTMLElement ? [selector] : [...document.querySelectorAll(selector)];
+  return targets.map((target) => target?.dataset.tooltipId).filter(Boolean);
+}
+export async function showTooltip(selector) {
+  const ids = getTooltipId(selector);
+  const tooltip = await useTooltip();
+  for (const id of ids)
+    tooltip.show(id);
+}
+export async function hideTooltip(selector) {
+  const ids = getTooltipId(selector);
+  const tooltip = await useTooltip();
+  for (const id of ids)
+    tooltip.hide(id);
+}
+export async function toggleTooltip(selector) {
+  const ids = getTooltipId(selector);
+  const tooltip = await useTooltip();
+  for (const id of ids)
+    tooltip.toggle(id);
+}

package/dist/components/tooltip/utils/parse-bindings.d.ts

@@ -17,6 +17,7 @@ export declare function parseAction(_el: HTMLElement, { modifiers }: DirectiveBi
 export declare function parseText(el: HTMLElement, bindings: DirectiveBinding<string | boolean>): string;
 /**
  * Parse color from modifiers
- * @param _el (unsuded)
+ * @param _el (unused)
+ * @param bindings directive bindings options
  */
 export declare function parseColor(_el: HTMLElement, { modifiers }: DirectiveBinding): ColorVariant;

package/dist/components/tooltip/utils/parse-bindings.mjs

@@ -25,6 +25,8 @@ export function parsePlacement(_el, { modifiers }) {
 }
 export function parseAction(_el, { modifiers }) {
   const result = [];
+  if (modifiers.manual)
+    result.push("manual");
   if (modifiers.focus)
     result.push("focus");
   if (modifiers.hover)

package/dist/components/tour/TourDialog.vue

@@ -89,7 +89,7 @@ import pSubheading from "../subheading/Subheading.vue";
 import pCaption from "../caption/Caption.vue";
 import pButton from "../button/Button.vue";
 import { pMd } from "../markdown";
-import IconClose from "@carbon/icons-vue/lib/close/16";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
 export default defineComponent({
   components: {
     pSubheading,

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

@@ -94,9 +94,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     onPrev?: ((...args: any[]) => any) | undefined;
 }, {
     image: string;
+    dismissable: boolean;
     text: string;
     title: string;
-    dismissable: boolean;
     step: number;
     highlight: boolean;
     totalStep: number;

package/dist/components/truncate/Truncate.vue

@@ -4,8 +4,10 @@
     mode="out-in">
     <span
       :key="`${expand}`"
+      v-p-tooltip="tooltip && !expandable && text.length > maxLength"
       class="truncate"
-      data-testid="truncate">
+      data-testid="truncate"
+      :title="text">
       {{ viewText }}
       <template v-if="expandable && text.length > maxLength">
         <a
@@ -25,7 +27,9 @@ import {
   ref,
   computed
 } from "vue-demi";
+import { pTooltip } from "../tooltip";
 export default defineComponent({
+  directives: { pTooltip },
   props: {
     text: {
       type: String,
@@ -50,6 +54,10 @@ export default defineComponent({
     showLessText: {
       type: String,
       default: "Show Less"
+    },
+    tooltip: {
+      type: Boolean,
+      default: true
     }
   },
   setup(props) {

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

@@ -4,7 +4,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     length: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     omission: {
@@ -23,6 +23,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     expand: import("vue-demi").Ref<boolean>;
     viewText: import("vue-demi").ComputedRef<string>;
@@ -34,7 +38,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     length: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     omission: {
@@ -53,9 +57,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     length: string | number;
     text: string;
+    tooltip: boolean;
     showMoreText: string;
     showLessText: string;
     omission: string;

package/dist/core/index.d.ts

@@ -1,12 +1,13 @@
 export { useSingleton, removeSingleton, resetInstance, } from '../components/global/use-singleton';
 export { hideOverlay, showOverlay, } from '../components/overlay';
+export { hideTooltip, showTooltip, toggleTooltip, } from '../components/tooltip';
 export { default as toast, } from '../components/toast';
 export * as dialog from '../components/dialog';
 export { defineOptions, } from '../components/select';
 export { default as defineAsyncAdapter, } from '../components/select/adapter/async-adapter';
 export { default as FuzzyAdapter, } from '../components/select/adapter/fuzzy-adapter';
 export { default as BasicAdapter, } from '../components/select/adapter/basic-adapter';
-export { defineMenu, } from '../components/sidebar-menu';
+export { defineMenu, filterMenu, } from '../components/sidebar-menu';
 export { defineTable, } from '../components/table';
 export { toBase64, fromBase64, } from '../components/utils/base64';
 export { default as CaptureAdapter, } from '../components/camera/adapter/capture';

package/dist/core/index.mjs

@@ -7,6 +7,11 @@ export {
   hideOverlay,
   showOverlay
 } from "../components/overlay";
+export {
+  hideTooltip,
+  showTooltip,
+  toggleTooltip
+} from "../components/tooltip";
 export {
   default as toast
 } from "../components/toast";
@@ -24,7 +29,8 @@ export {
   default as BasicAdapter
 } from "../components/select/adapter/basic-adapter";
 export {
-  defineMenu
+  defineMenu,
+  filterMenu
 } from "../components/sidebar-menu";
 export {
   defineTable

package/dist/module.json

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona",
   "description": "Persona core package",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",
@@ -58,31 +58,30 @@
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
   },
   "dependencies": {
-    "@carbon/icons-vue": "10.49.1",
     "@floating-ui/dom": "^1.0.4",
     "@juggle/resize-observer": "^3.4.0",
     "@nuxt/kit": "^3.3.2",
-    "@testing-library/dom": "^8.19.0",
+    "@testing-library/dom": "^9.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@vueuse/core": "10.2.1",
     "@vueuse/math": "10.2.1",
     "@zxing/browser": "0.1.4",
     "@zxing/library": "0.20.0",
-    "chart.js": "4.3.0",
+    "chart.js": "4.3.2",
     "core-js": "3",
     "date-fns": "2.30.0",
     "defu": "6.1.2",
-    "fast-equals": "^4.0.3",
+    "fast-equals": "^5.0.0",
     "fuse.js": "6.6.2",
     "interactjs": "1.10.17",
     "lodash-es": "4.17.21",
-    "marked": "^4.1.1",
+    "marked": "^5.0.0",
     "nanodelay": "2.0.2",
     "pdfjs-dist": "^3.2.146",
     "sanitize-html": "^2.8.1",
     "scroll-into-view": "^1.16.2",
-    "tabbable": "6.0.1",
-    "vue-demi": "0.13.11",
+    "tabbable": "6.2.0",
+    "vue-demi": "0.14.5",
     "vuedraggable": "next",
     "webfontloader": "1.6.28",
     "zxcvbn": "^4.4.2"
@@ -91,8 +90,9 @@
     "extends @privyid/browserslist-config"
   ],
   "peerDependencies": {
-    "@privyid/tailwind-preset": "^0.17.1",
-    "postcss-custom-properties": "^12.1.11",
+    "@privyid/browserslist-config": "^0.18.0",
+    "@privyid/tailwind-preset": "^0.18.0",
+    "postcss-custom-properties": "^12.1.11 || ^13.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
     "tailwind": ">=3.0.0",
@@ -100,13 +100,13 @@
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.4.0",
-    "@nuxt/schema": "3.3.3",
+    "@nuxt/schema": "3.6.5",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@privyid/browserslist-config": "^0.17.1",
-    "@privyid/tailwind-preset": "^0.17.1",
+    "@privyid/browserslist-config": "^0.18.0",
+    "@privyid/tailwind-preset": "^0.18.0",
     "@types/sanitize-html": "^2",
     "browserslist-to-esbuild": "^1.2.0",
-    "nuxt": "3.3.3",
+    "nuxt": "3.6.5",
     "postcss-custom-properties": "^13.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",