@privyid/persona 0.16.0 → 0.17.0

package/dist/components/avatar/Avatar.vue.d.ts

@@ -22,7 +22,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     imgClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
 }, {
@@ -51,7 +51,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     imgClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
 }>> & {
@@ -60,9 +60,9 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     name: string;
     variant: TypeVariant;
-    size: SizeVariant;
     src: string;
     fallbackSrc: string;
+    size: SizeVariant;
     imgClass: string | Record<string, any> | unknown[];
 }, {}>;
 export default _default;

package/dist/components/button/Button.vue.d.ts

@@ -55,10 +55,10 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>>, {
     variant: StyleVariant;
+    size: SizeVariant;
     icon: boolean;
     color: ColorVariant;
-    href: string;
-    size: SizeVariant;
     pill: boolean;
+    href: string;
 }, {}>;
 export default _default;

package/dist/components/card/Card.vue

@@ -130,6 +130,9 @@ export default defineComponent({
 * Last Update   : May 23, 2022
 */
 .card {
+  --p-card-padding-x: theme(spacing.6);
+  --p-card-padding-y: theme(spacing.6);
+
   @apply border bg-default border-default text-default rounded;
   @apply dark:bg-dark-default dark:border-dark-default dark:text-dark-default;
 
@@ -139,11 +142,11 @@ export default defineComponent({
   */
   &__header,
   &__body {
-    @apply pt-6 px-6;
+    @apply pt-[var(--p-card-padding-y)] px-[var(--p-card-padding-x)];
   }
 
   &__body {
-    @apply pb-6;
+    @apply pb-[var(--p-card-padding-y)];
 
     > .card__section {
       @apply pt-0;
@@ -159,7 +162,7 @@ export default defineComponent({
       * of margin-top
       */
       &:first-child {
-        @apply border-t mt-6;
+        @apply border-t mt-[var(--p-card-padding-y)];
       }
 
       &:last-child {
@@ -248,12 +251,12 @@ export default defineComponent({
     }
 
     &.card--disabled {
-      @apply px-6 pb-6;
+      @apply px-[var(--p-card-padding-x)] pb-[var(--p-card-padding-y)];
     }
   }
 
   &__footer {
-    @apply pb-6 px-6 pt-3;
+    @apply pb-[var(--p-card-padding-y)] px-[var(--p-card-padding-x)] pt-3;
   }
 }
 </style>

package/dist/components/carousel/Carousel.vue

@@ -0,0 +1,197 @@
+<template>
+  <div
+    class="carousel"
+    :class="classNames">
+    <div
+      ref="container"
+      class="carousel__container splide">
+      <CarouselBody>
+        <slot />
+      </CarouselBody>
+    </div>
+
+    <div
+      v-if="!noProgress"
+      class="carousel__progress">
+      <ProgressIndicator
+        v-model="model"
+        :length="length"
+        :direction="direction" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
+  watch
+} from "vue-demi";
+import CarouselBody from "./CarouselBody.vue";
+import ProgressIndicator from "../progress-indicator/ProgressIndicator.vue";
+import "@splidejs/splide/css/core";
+import { defu } from "defu";
+import { CAROUSEL_INSTANCE } from ".";
+import { useVModel } from "../input";
+export default defineComponent({
+  components: {
+    CarouselBody,
+    ProgressIndicator
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      default: 1
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    align: {
+      type: String,
+      default: "end"
+    },
+    width: {
+      type: [String, Number],
+      default: "100%"
+    },
+    height: {
+      type: [String, Number],
+      default: "auto"
+    },
+    loop: {
+      type: Boolean,
+      default: false
+    },
+    autoplay: {
+      type: Boolean,
+      default: false
+    },
+    autoplayInterval: {
+      type: [Number, String],
+      default: 5e3
+    },
+    splideOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    noProgress: {
+      type: Boolean,
+      default: false
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit }) {
+    const model = useVModel(props);
+    const container = ref();
+    const slider = ref();
+    const length = ref(1);
+    const classNames = computed(() => {
+      const result = [];
+      if (props.direction)
+        result.push(`carousel--${props.direction}`);
+      if (props.align)
+        result.push(`carousel--${props.align}`);
+      return result;
+    });
+    const options = computed(() => {
+      return defu(props.splideOptions, {
+        type: props.loop ? "loop" : "slide",
+        direction: props.direction === "vertical" ? "ttb" : "ltr",
+        width: props.width,
+        height: props.height,
+        focus: "center",
+        arrows: false,
+        pagination: false,
+        autoplay: props.autoplay,
+        interval: Number.parseInt(`${props.autoplayInterval}`)
+      });
+    });
+    watch(model, (value) => {
+      slider.value.go(value - 1);
+    });
+    watch(options, (value) => {
+      if (slider.value)
+        slider.value.options = value;
+    }, { deep: true });
+    function onMove(index) {
+      model.value = index + 1;
+      emit("change", index + 1);
+    }
+    function onLoaded() {
+      if (slider.value) {
+        nextTick(() => {
+          length.value = slider.value.length;
+          model.value = slider.value.index + 1;
+        });
+      }
+    }
+    onMounted(async () => {
+      if (container.value) {
+        const { Splide } = await import("@splidejs/splide");
+        slider.value = new Splide(container.value, options.value);
+        slider.value.on("mounted refresh", onLoaded);
+        slider.value.on("move", onMove);
+        slider.value.mount();
+      }
+    });
+    onBeforeUnmount(() => {
+      if (slider.value)
+        slider.value.destroy();
+    });
+    provide(CAROUSEL_INSTANCE, slider);
+    return {
+      model,
+      container,
+      classNames,
+      length,
+      options,
+      onMove,
+      onLoaded
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.carousel {
+  @apply flex items-center justify-center w-full;
+
+  &__progress {
+    @apply flex-shrink-0;
+  }
+
+  &--horizontal {
+    @apply space-y-2;
+
+    &.carousel--end {
+      @apply flex-col;
+    }
+
+    &.carousel--start {
+      @apply flex-col-reverse space-y-reverse;
+    }
+  }
+
+  &--vertical {
+    @apply space-x-2 items-stretch;
+
+    &.carousel--end {
+      @apply flex-row;
+    }
+
+    &.carousel--start {
+      @apply flex-row-reverse space-x-reverse;
+    }
+  }
+}
+</style>

package/dist/components/carousel/Carousel.vue.d.ts

@@ -0,0 +1,111 @@
+import { PropType } from 'vue-demi';
+import { DirectionVariant } from '../steps';
+import '@splidejs/splide/css/core';
+import { AlignmentVariant } from '.';
+import type { Options } from '@splidejs/splide';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignmentVariant>;
+        default: string;
+    };
+    width: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplayInterval: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    splideOptions: {
+        type: PropType<Options>;
+        default: () => {};
+    };
+    noProgress: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    model: import("vue-demi").Ref<number>;
+    container: import("vue-demi").Ref<HTMLDivElement | undefined>;
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    length: import("vue-demi").Ref<number>;
+    options: import("vue-demi").ComputedRef<Options>;
+    onMove: (index: number) => void;
+    onLoaded: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignmentVariant>;
+        default: string;
+    };
+    width: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplayInterval: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    splideOptions: {
+        type: PropType<Options>;
+        default: () => {};
+    };
+    noProgress: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: number;
+    direction: DirectionVariant;
+    align: AlignmentVariant;
+    width: string | number;
+    height: string | number;
+    loop: boolean;
+    autoplay: boolean;
+    autoplayInterval: string | number;
+    splideOptions: Options;
+    noProgress: boolean;
+}, {}>;
+export default _default;

package/dist/components/carousel/CarouselBody.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="splide__track">
+    <div class="splide__list">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent,
+  inject,
+  onUpdated
+} from "vue-demi";
+import { CAROUSEL_INSTANCE } from ".";
+export default defineComponent({
+  setup() {
+    const slider = inject(CAROUSEL_INSTANCE);
+    onUpdated(() => {
+      slider.value?.refresh();
+    });
+    return {};
+  }
+});
+</script>

package/dist/components/carousel/CarouselBody.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/carousel/CarouselItem.vue

@@ -0,0 +1,15 @@
+<template>
+  <div
+    class="carousel__item splide__slide">
+    <slot />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue-demi";
+export default defineComponent({
+  setup() {
+    return {};
+  }
+});
+</script>

package/dist/components/carousel/CarouselItem.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/carousel/index.d.ts

@@ -0,0 +1,4 @@
+import type { Splide } from '@splidejs/splide';
+import { InjectionKey, Ref } from 'vue-demi';
+export type AlignmentVariant = 'start' | 'end';
+export declare const CAROUSEL_INSTANCE: InjectionKey<Ref<Splide>>;

package/dist/components/carousel/index.mjs

@@ -0,0 +1 @@
+export const CAROUSEL_INSTANCE = Symbol("CarouselInstance");

package/dist/components/checkbox/Checkbox.vue

@@ -249,8 +249,8 @@ export default defineComponent({
 
     &:hover,
     &:focus-visible {
-      @apply bg-subtle;
-      @apply dark:bg-dark-subtle;
+      @apply bg-default-alpha;
+      @apply dark:bg-dark-default-alpha;
     }
   }
 }

package/dist/components/checkbox/Checkbox.vue.d.ts

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

package/dist/components/contextual-bar/ContextualBar.vue.d.ts

@@ -36,7 +36,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     close: (event: Event) => void;
     onEnter: (target: HTMLDivElement) => void;
     onLeave: (target: HTMLDivElement) => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("show" | "close" | "update:modelValue" | "hide")[], "show" | "close" | "update:modelValue" | "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, ("close" | "show" | "update:modelValue" | "hide")[], "close" | "show" | "update:modelValue" | "hide", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     variant: {
         type: PropType<StyleVariant>;
         default: string;
@@ -67,8 +67,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onShow?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
     onHide?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;

package/dist/components/cropper/Cropper.vue.d.ts

@@ -40,7 +40,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: number;
     };
     imgClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
     rounded: {
@@ -112,7 +112,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: number;
     };
     imgClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
     rounded: {

package/dist/components/cropper/utils/use-ratio.d.ts

@@ -4,6 +4,6 @@ export interface RatioProp {
     height?: number | string;
     ratio?: number;
 }
-export declare function useRatio(props: RatioProp): ComputedRef<number>;
+export declare function useRatio(props: RatioProp, defaultValue?: number): ComputedRef<number>;
 export declare function useRatioWidth(props: RatioProp): ComputedRef<number | undefined>;
 export declare function useRatioHeight(props: RatioProp): ComputedRef<number | undefined>;

package/dist/components/cropper/utils/use-ratio.mjs

@@ -1,9 +1,9 @@
 import { computed } from "vue-demi";
-export function useRatio(props) {
+export function useRatio(props, defaultValue = 1) {
   return computed(() => {
     if (props.width && props.height)
       return Number.parseFloat(`${props.width}`) / Number.parseFloat(`${props.height}`);
-    return props.ratio ?? 1;
+    return props.ratio ?? defaultValue;
   });
 }
 export function useRatioWidth(props) {

package/dist/components/datepicker/Datepicker.vue

@@ -14,6 +14,7 @@
         class="datepicker__input"
         :placeholder="placeholder"
         :disabled="disabled"
+        :error="error"
         readonly
         @focus="onFocus">
         <template #append>

package/dist/components/dropdown/Dropdown.vue

@@ -13,6 +13,7 @@
       <Button
         data-testid="dropdown-activator"
         class="dropdown__activator"
+        :class="buttonClass"
         :variant="variant"
         :color="color"
         :size="size"
@@ -133,6 +134,14 @@ export default defineComponent({
       ],
       default: void 0
     },
+    buttonClass: {
+      type: [
+        String,
+        Array,
+        Object
+      ],
+      default: void 0
+    },
     menuSize: {
       type: String,
       default: "sm"
@@ -272,11 +281,12 @@ export default defineComponent({
   --p-dropdown-size-lg: 30rem; /* 480px */
   --p-dropdown-size-md: 20rem; /* 320px */
   --p-dropdown-size-sm: 15rem; /* 240px */
+  --p-dropdown-max-height: theme(spacing.64);
 
   @apply relative inline-flex;
 
   &__menu {
-    @apply max-h-64 border rounded bg-default z-[var(--p-dropdown-z-index)] border-default shadow-xl overflow-x-hidden overflow-y-auto absolute;
+    @apply max-h-[var(--p-dropdown-max-height)] border rounded bg-default z-[var(--p-dropdown-z-index)] border-default shadow-xl overflow-x-hidden overflow-y-auto absolute;
     @apply dark:bg-dark-default dark:border-dark-default;
 
     &__container {

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

@@ -48,7 +48,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     menuClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    buttonClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
     menuSize: {
@@ -108,7 +112,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     menuClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    buttonClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
     menuSize: {
@@ -121,17 +129,18 @@ declare const _default: import("vue-demi").DefineComponent<{
     onHide?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
+    size: SizeVariant;
     icon: boolean;
     color: ColorVariant;
-    text: string;
-    size: SizeVariant;
     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;