@privyid/persona 0.15.0 → 0.17.0

package/dist/components/dropdown/Dropdown.vue.d.ts

@@ -51,6 +51,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
+    buttonClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
     menuSize: {
         type: PropType<MenuSizeVariant>;
         default: string;
@@ -111,6 +115,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
+    buttonClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
     menuSize: {
         type: PropType<MenuSizeVariant>;
         default: string;
@@ -122,16 +130,17 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     variant: StyleVariant;
     size: SizeVariant;
-    text: string;
-    color: ColorVariant;
     icon: boolean;
+    color: ColorVariant;
     pill: boolean;
+    text: string;
     modelValue: boolean;
     disabled: boolean;
     placement: Placement;
     noCaret: boolean;
     divider: boolean;
     menuClass: string | Record<string, any> | unknown[];
+    buttonClass: string | Record<string, any> | unknown[];
     menuSize: MenuSizeVariant;
 }, {}>;
 export default _default;

package/dist/components/dropdown/DropdownHeader.vue

@@ -0,0 +1,35 @@
+<template>
+  <Subheading
+    overline
+    data-testid="dropdown-header"
+    weight="medium"
+    class="dropdown__header">
+    <span>
+      <slot />
+    </span>
+    <span
+      v-if="$slots.action"
+      data-testid="dropdown-header-action"
+      class="dropdown__header__action">
+      <slot name="action" />
+    </span>
+  </Subheading>
+</template>
+
+<script>
+import { defineComponent } from "vue-demi";
+import Subheading from "../subheading/Subheading.vue";
+export default defineComponent({ components: { Subheading } });
+</script>
+
+<style lang="postcss">
+.dropdown {
+  &__header {
+    @apply px-4 pt-3 pb-1 flex items-center justify-between;
+
+    &__action {
+      @apply normal-case font-medium;
+    }
+  }
+}
+</style>

package/dist/components/dropdown/DropdownHeader.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue-demi").DefineComponent<{}, {}, {}, {}, {}, 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<{}>>, {}, {}>;
+export default _default;

package/dist/components/form-group/FormGroup.vue

@@ -1,14 +1,23 @@
 <template>
   <div
     class="form-group"
+    data-testid="form-group"
     :class="classNames">
-    <label class="form-group__label">
+    <label
+      data-testid="form-group-label"
+      class="form-group__label">
       <IconInfo
         v-if="hint"
         v-p-tooltip="hint"
+        data-testid="form-group-hint"
         class="form-group__hint" />
-      {{ label }}<sup v-if="required">*</sup>
-      <p-caption v-if="caption">{{ caption }}</p-caption>
+      {{ label }}<sup
+        v-if="required"
+        data-testid="form-group-required">*</sup>
+      <p-caption
+        v-if="caption"
+        data-testid="form-group-caption">
+        {{ caption }}</p-caption>
     </label>
 
     <slot />
@@ -18,11 +27,13 @@
       mode="out-in">
       <p
         v-if="error"
+        data-testid="form-group-error"
         class="form-group__error">
         {{ error }}
       </p>
       <p
         v-else-if="description"
+        data-testid="form-group-description"
         class="form-group__description">
         {{ description }}
       </p>
@@ -81,8 +92,8 @@ export default defineComponent({
   @apply flex flex-col mb-4;
 
   &__label {
-    @apply font-bold text-xs mb-2 relative text-default;
-    @apply dark:text-dark-default;
+    @apply font-bold text-xs mb-2 relative text-subtle;
+    @apply dark:text-dark-subtle;
 
     > sup {
       @apply text-danger;

package/dist/components/input/Input.vue

@@ -43,7 +43,7 @@ export default defineComponent({
   props: {
     modelValue: {
       type: [String, Number],
-      default: ""
+      default: void 0
     },
     size: {
       type: String,
@@ -114,8 +114,8 @@ export default defineComponent({
   @apply dark:bg-dark-default;
 
   &__form {
-    @apply py-[10px] px-3 text-base relative rounded border border-solid border-muted hover:border-subtle text-default placeholder:text-muted w-full outline-none;
-    @apply dark:border-dark-muted hover:dark:border-dark-subtle dark:text-dark-default placeholder:dark:text-dark-muted;
+    @apply py-[10px] px-3 text-base relative rounded border border-solid border-muted hover:border-subtle text-default placeholder:text-muted w-full outline-none bg-transparent;
+    @apply dark:border-dark-muted hover:dark:border-dark-subtle dark:text-dark-default placeholder:dark:text-dark-muted dark:bg-transparent;
 
     &:disabled,
     &--disabled,
@@ -147,6 +147,7 @@ export default defineComponent({
   }
 
   .state--error,
+  .state--error & > &__form,
   &--error,
   &-group--error.input-group .input > .input__form {
     @apply border-danger-emphasis hover:border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;

package/dist/components/input/Input.vue.d.ts

@@ -3,7 +3,7 @@ import { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: (NumberConstructor | StringConstructor)[];
-        default: string;
+        default: undefined;
     };
     size: {
         type: PropType<SizeVariant>;
@@ -27,12 +27,12 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
-    model: import("vue-demi").Ref<string | number>;
+    model: import("vue-demi").Ref<string | number | undefined>;
     clear: (event: MouseEvent) => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "clear")[], "update:modelValue" | "clear", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: (NumberConstructor | StringConstructor)[];
-        default: string;
+        default: undefined;
     };
     size: {
         type: PropType<SizeVariant>;

package/dist/components/input/index.mjs

@@ -15,6 +15,6 @@ export function useVModel(props) {
       emit("update:modelValue", value);
     }
   });
-  syncRef(localValue, model);
+  syncRef(localValue, model, { immediate: false });
   return localValue;
 }

package/dist/components/input-password/InputPassword.vue

@@ -17,8 +17,8 @@
 
 <script>
 import pInput from "../input/Input.vue";
-import IconShow from "@carbon/icons-vue/lib/view/16";
-import IconHide from "@carbon/icons-vue/lib/view--off/16";
+import IconShow from "@privyid/persona-icon/vue/view/20.vue";
+import IconHide from "@privyid/persona-icon/vue/view-off/20.vue";
 import { defineComponent, ref } from "vue-demi";
 export default defineComponent({
   components: {
@@ -44,7 +44,7 @@ export default defineComponent({
   @apply pr-9;
 
   &__toggle {
-    @apply absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer z-1 text-default/30 hover:text-subtle;
+    @apply absolute right-[0.15rem] top-1/2 -translate-y-1/2 cursor-pointer z-1 text-default/30 hover:text-subtle;
     @apply dark:text-dark-default/30 hover:dark:text-dark-subtle;
 
     .input--disabled ~ & {
@@ -54,10 +54,10 @@ export default defineComponent({
   }
 
   &.input--clearable {
-    @apply pr-14;
+    @apply pr-16;
 
     + .input__clear {
-      @apply right-9;
+      @apply right-10;
     }
   }
 }

package/dist/components/input-pin/InputPin.vue

@@ -43,7 +43,7 @@ export default defineComponent({
   props: {
     modelValue: {
       type: String,
-      default: ""
+      default: void 0
     },
     length: {
       type: [Number, String],
@@ -70,7 +70,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const root = templateRef("root");
     const num = useToNumber(toRef(props, "length"));
-    const localModel = ref([...props.modelValue.padEnd(num.value)].slice(0, num.value));
+    const localModel = ref([...props.modelValue?.padEnd(num.value) ?? ""].slice(0, num.value));
     const classNames = computed(() => {
       const result = [];
       if (props.disabled)
@@ -84,7 +84,7 @@ export default defineComponent({
     const { next: nextFocus, prev: prevFocus } = useFocus(root, false);
     const model = computed({
       get() {
-        return [...props.modelValue.padEnd(num.value)].slice(0, num.value);
+        return [...props.modelValue?.padEnd(num.value) ?? ""].slice(0, num.value);
       },
       set(value) {
         const text = value.map((val) => val || " ").join("").trimEnd();

package/dist/components/input-pin/InputPin.vue.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     length: {
         type: (NumberConstructor | StringConstructor)[];
@@ -33,7 +33,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "clear")[], "update:modelValue" | "clear", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     length: {
         type: (NumberConstructor | StringConstructor)[];

package/dist/components/input-range/InputRange.vue

@@ -122,7 +122,7 @@ export default defineComponent({
     const start = useClamp(localStart.value, min, maxDrag);
     const end = useClamp(localEnd.value, minDrag, max);
     const { width, left } = useElementBounding(track);
-    const startValue = computed({
+    const vStart = computed({
       get() {
         if (Array.isArray(props.modelValue))
           return props.modelValue[0];
@@ -132,7 +132,7 @@ export default defineComponent({
         emit("update:start", value);
       }
     });
-    const endValue = computed({
+    const vEnd = computed({
       get() {
         if (Array.isArray(props.modelValue))
           return props.modelValue[1];
@@ -203,8 +203,8 @@ export default defineComponent({
       if (!props.disabled && !props.readonly)
         end.value = getValue(event);
     });
-    syncRef(start, startValue);
-    syncRef(end, endValue);
+    syncRef(start, vStart);
+    syncRef(end, vEnd);
     watch([start, end], ([startVal, endVal]) => {
       localStart.value = startVal;
       localEnd.value = endVal;

package/dist/components/input-range/InputRange.vue.d.ts

@@ -47,7 +47,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     onClickLowerTrack: (event: MouseEvent) => void;
     onClickActiveTrack: (event: MouseEvent) => void;
     onClickUpperTrack: (event: MouseEvent) => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:end" | "update:start")[], "change" | "update:modelValue" | "update:end" | "update:start", 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, ("change" | "update:modelValue" | "update:start" | "update:end")[], "change" | "update:modelValue" | "update:start" | "update:end", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: PropType<number | [number, number]>;
         default: undefined;
@@ -91,18 +91,18 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:end"?: ((...args: any[]) => any) | undefined;
     "onUpdate:start"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:end"?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
-    min: string | number;
-    max: string | number;
     start: number;
     end: number;
+    min: string | number;
+    max: string | number;
     modelValue: number | [number, number];
     disabled: boolean;
     readonly: boolean;
-    multiple: boolean;
     step: string | number;
+    multiple: boolean;
 }, {}>;
 export default _default;

package/dist/components/label/Label.vue.d.ts

@@ -44,7 +44,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     variant: StyleVariant;
     size: SizeVariant;
-    color: ColorVariant;
     dismissable: boolean;
+    color: ColorVariant;
 }, {}>;
 export default _default;

package/dist/components/list-group/ListGroup.vue

@@ -0,0 +1,51 @@
+<template>
+  <span
+    class="list-group"
+    data-testid="list-group"
+    :class="classNames">
+    <slot />
+  </span>
+</template>
+<script>
+import { defineComponent, computed } from "vue-demi";
+export default defineComponent({
+  props: {
+    flush: {
+      type: Boolean,
+      default: false
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const classNames = computed(() => {
+      const result = [""];
+      if (props.flush)
+        result.push("list-group--flush");
+      if (props.horizontal)
+        result.push("list-group--horizontal");
+      return result;
+    });
+    return { classNames };
+  }
+});
+</script>
+<style lang="postcss">
+.list-group {
+  --p-list-group-bg: theme(backgroundColor.default.DEFAULT);
+  --p-list-group-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+
+  @apply flex flex-col max-w-full divide-y divide-default border border-default rounded-md bg-[color:var(--p-list-group-bg)];
+  @apply dark:border-dark-default dark:divide-dark-default dark:bg-[color:var(--p-list-group-bg-dark)];
+
+  &--flush {
+    @apply border-0 rounded-none;
+  }
+
+  &--horizontal {
+    @apply flex-row divide-x divide-y-0;
+  }
+}
+</style>

package/dist/components/list-group/ListGroup.vue.d.ts

@@ -0,0 +1,25 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    flush: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    horizontal: {
+        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<{
+    flush: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    horizontal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    horizontal: boolean;
+    flush: boolean;
+}, {}>;
+export default _default;

package/dist/components/list-group/ListGroupItem.vue

@@ -0,0 +1,94 @@
+<template>
+  <component
+    :is="elementNames"
+    data-testid="list-group-item"
+    class="list-group__item"
+    :aria-current="active"
+    :aria-disabled="disabled"
+    :class="classNames">
+    <slot />
+  </component>
+</template>
+<script>
+import {
+  defineComponent,
+  computed,
+  ref
+} from "vue-demi";
+import IconCheck from "@privyid/persona-icon/vue/checkmark-circle/20.vue";
+import pCaption from "../caption/Caption.vue";
+export default defineComponent({
+  components: { pCaption, IconCheck },
+  props: {
+    active: {
+      type: Boolean,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    element: {
+      type: String,
+      default: "span"
+    }
+  },
+  setup(props) {
+    const classNames = computed(() => {
+      const result = [""];
+      if (props.active)
+        result.push("list-group__item--active");
+      if (props.disabled)
+        result.push("list-group__item--disabled");
+      return result;
+    });
+    const elementNames = computed(() => {
+      const el = ref("");
+      el.value = props.element === "link" ? "a" : props.element;
+      return el.value;
+    });
+    return {
+      classNames,
+      elementNames
+    };
+  }
+});
+</script>
+<style lang="postcss">
+.list-group {
+  &__item {
+    --p-list-item-bg: theme(backgroundColor.default.DEFAULT);
+    --p-list-item-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+    --p-list-item-bg-active: theme(backgroundColor.default.alpha);
+    --p-list-item-bg-active-dark: theme(backgroundColor.dark.default.alpha);
+    --p-list-item-padding-x: theme(spacing.4);
+    --p-list-item-padding-y: theme(spacing.2);
+
+    @apply relative block px-[var(--p-list-item-padding-x)] py-[--p-list-item-padding-y] bg-[color:var(--p-list-item-bg)] first:rounded-t-md last:rounded-b-md text-default;
+    @apply dark:bg-[color:var(--p-list-item-bg-dark)] dark:text-dark-default;
+
+    .list-group--flush & {
+      @apply first:rounded-none last:rounded-none;
+    }
+
+    .list-group--horizontal & {
+      @apply first:rounded-l-md last:rounded-r-md first:rounded-tr-none last:rounded-bl-none;
+    }
+
+    a& {
+      @apply cursor-pointer text-default hover:bg-default-alpha;
+      @apply dark:text-dark-default dark:hover:bg-dark-default-alpha;
+    }
+
+    &:is(&--active) {
+      @apply bg-[color:var(--p-list-item-bg-active)] cursor-default;
+      @apply dark:bg-[color:var(--p-list-item-bg-active-dark)];
+    }
+
+    &:is(&--disabled) {
+      @apply cursor-default bg-[color:var(--p-list-item-bg)/50] hover:bg-[color:var(--p-list-item-bg)/50] text-default/50 hover:text-default/50;
+      @apply dark:bg-[color:var(--p-list-item-bg-dark)/50] dark:hover:bg-[color:var(--p-list-item-bg-dark)/50] dark:text-dark-default/50 dark:hover:text-dark-default/50;
+    }
+  }
+}
+</style>

package/dist/components/list-group/ListGroupItem.vue.d.ts

@@ -0,0 +1,37 @@
+import { PropType } from 'vue-demi';
+import { ElementVariant } from '.';
+declare const _default: import("vue-demi").DefineComponent<{
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    elementNames: 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<{
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+}>>, {
+    active: boolean;
+    disabled: boolean;
+    element: ElementVariant;
+}, {}>;
+export default _default;

package/dist/components/list-group/index.d.ts

@@ -0,0 +1 @@
+export type ElementVariant = 'div' | 'span' | 'link';

package/dist/components/modal/Modal.vue.d.ts

@@ -92,9 +92,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     size: SizeVariant;
-    text: string;
     dismissable: boolean;
     banner: boolean;
+    text: string;
     modelValue: boolean;
     title: string;
     centered: boolean;

package/dist/components/nav/Nav.vue

@@ -5,11 +5,20 @@
     <li
       v-if="title"
       class="nav__title">
-      <Caption
-        weight="bold"
-        transform="capitalize">
-        {{ title }}
-      </Caption>
+      <span class="nav__title__item">
+        <Caption
+          weight="bold"
+          transform="capitalize">
+          {{ title }}
+        </Caption>
+        <Text
+          v-if="titleActionLabel && titleActionUrl"
+          data-testid="nav-action"
+          variant="caption"
+          :href="titleActionUrl">
+          {{ titleActionLabel }}
+        </Text>
+      </span>
     </li>
     <slot />
   </ul>
@@ -21,8 +30,9 @@ import {
   defineComponent
 } from "vue-demi";
 import Caption from "../caption/Caption.vue";
+import Text from "../text/Text.vue";
 export default defineComponent({
-  components: { Caption },
+  components: { Caption, Text },
   props: {
     fill: {
       type: Boolean,
@@ -48,6 +58,14 @@ export default defineComponent({
       type: String,
       default: void 0
     },
+    titleActionLabel: {
+      type: String,
+      default: void 0
+    },
+    titleActionUrl: {
+      type: String,
+      default: void 0
+    },
     condensed: {
       type: Boolean,
       default: false
@@ -346,7 +364,11 @@ export default defineComponent({
   }
 
   &__title {
-    @apply absolute left-5 top-0 text-base inline-block;
+    @apply absolute left-5 top-0 text-base w-[calc(100%-1.75rem)]; /* 1.25rem + 0.75rem (padding) */
+
+    &__item {
+      @apply flex items-center w-full justify-between space-x-2;
+    }
 
     .caption {
       @apply text-subtle;