@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/card/Card.vue.d.ts

@@ -0,0 +1,118 @@
+import type { PropType, VNode } from 'vue';
+import type { ElementVariant, SpacingVariant } from '.';
+declare function close(): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        header(): VNode[];
+        action(): VNode[];
+        footer(): VNode[];
+        default(): VNode[];
+    }> & {
+        header(): VNode[];
+        action(): VNode[];
+        footer(): VNode[];
+        default(): VNode[];
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    sectioned: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    callout: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    bodyClass: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    spacing: {
+        type: PropType<SpacingVariant>;
+        default: string;
+    };
+}>, {
+    close: typeof close;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismissed: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    sectioned: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    callout: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    bodyClass: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    spacing: {
+        type: PropType<SpacingVariant>;
+        default: string;
+    };
+}>> & Readonly<{
+    onDismissed?: (() => any) | undefined;
+}>, {
+    title: string;
+    disabled: boolean;
+    dismissable: boolean;
+    readonly: boolean;
+    element: ElementVariant;
+    bodyClass: string | unknown[];
+    spacing: SpacingVariant;
+    sectioned: boolean;
+    callout: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/card/CardSection.vue

@@ -0,0 +1,69 @@
+<template>
+  <div
+    data-testid="card-section"
+    :class="classNames">
+    <div
+      v-if="$slots.header"
+      data-testid="card-header"
+      class="card__header">
+      <slot name="header" />
+    </div>
+
+    <div
+      v-else-if="title"
+      class="card__header card__header--default">
+      <Subheading
+        class="card__header__title"
+        weight="medium"
+        overline>
+        {{ title }}
+      </Subheading>
+
+      <span
+        v-if="$slots.action"
+        data-testid="card-header-action"
+        class="card__header__action">
+        <slot name="action" />
+      </span>
+    </div>
+
+    <div class="card__body">
+      <slot />
+    </div>
+
+    <footer
+      v-if="$slots.footer"
+      data-testid="card-footer"
+      class="card__footer">
+      <slot name="footer" />
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import Subheading from "../subheading/Subheading.vue";
+import { computed } from "vue";
+const props = defineProps({
+  title: {
+    type: String,
+    default: void 0
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+});
+const classNames = computed(() => {
+  const result = ["card__section"];
+  if (props.disabled)
+    result.push("card__section--disabled");
+  if (props.readonly)
+    result.push("card__section--readonly");
+  return result;
+});
+defineSlots();
+</script>

package/dist/components/card/CardSection.vue.d.ts

@@ -0,0 +1,56 @@
+import type { VNode } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        header: () => VNode[];
+        action: () => VNode[];
+        footer: () => VNode[];
+        default: () => VNode[];
+    }> & {
+        header: () => VNode[];
+        action: () => VNode[];
+        footer: () => VNode[];
+        default: () => VNode[];
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    disabled: boolean;
+    readonly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,2 @@
+export type ElementVariant = 'div' | 'section' | 'article';
+export type SpacingVariant = 'sm' | 'md' | 'lg' | 'xl';

package/dist/components/carousel/Carousel.vue

@@ -0,0 +1,177 @@
+<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 setup>
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
+  watch
+} from "vue";
+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";
+const props = defineProps({
+  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
+  }
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+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}`),
+    start: props.modelValue - 1
+  });
+});
+watch(model, (value) => {
+  if (slider.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);
+</script>
+
+<style lang="postcss">
+.carousel {
+  @apply flex items-center justify-center w-full;
+
+  &__progress {
+    @apply 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,123 @@
+import type { PropType } from 'vue';
+import type { DirectionVariant } from '../steps';
+import '@splidejs/splide/css/core';
+import type { AlignmentVariant } from '.';
+import type { Options } from '@splidejs/splide';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        container: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignmentVariant>;
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplayInterval: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    splideOptions: {
+        type: PropType<Options>;
+        default: () => {};
+    };
+    noProgress: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: number) => void;
+    change: (args_0: number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignmentVariant>;
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplayInterval: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    splideOptions: {
+        type: PropType<Options>;
+        default: () => {};
+    };
+    noProgress: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
+    onChange?: ((args_0: number) => any) | undefined;
+}>, {
+    modelValue: number;
+    width: string | number;
+    height: string | number;
+    align: AlignmentVariant;
+    autoplay: boolean;
+    direction: DirectionVariant;
+    loop: boolean;
+    autoplayInterval: string | number;
+    splideOptions: Options;
+    noProgress: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/carousel/CarouselBody.vue

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

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

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/carousel/CarouselItem.vue

@@ -0,0 +1,10 @@
+<template>
+  <div
+    class="carousel__item splide__slide">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+
+</script>

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

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,4 @@
+import type { Splide } from '@splidejs/splide';
+import type { InjectionKey, Ref } from 'vue';
+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");