@privyid/persona 1.2.1 → 1.2.2-rc.1

package/dist/components/accordion/Accordion.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    :class="classNames"
+    data-testid="accordion">
+    <AccordionItems
+      v-model="model"
+      :no-caret="noCaret"
+      :multiple="multiple">
+      <slot>
+        <Item
+          v-for="(item, i) in items"
+          :key="i"
+          :title="item.title"
+          :disabled="item.disabled">
+          <div class="p-4">
+            {{ item.content }}
+          </div>
+        </Item>
+      </slot>
+    </AccordionItems>
+  </div>
+</template>
+
+<script setup>
+import { useVModel } from "../input";
+import {} from ".";
+import { computed } from "vue";
+import Item from "./AccordionItem.vue";
+import AccordionItems from "./AccordionItems.vue";
+const props = defineProps({
+  modelValue: {
+    type: [Number, Array],
+    default: void 0
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  flush: {
+    type: Boolean,
+    default: false
+  },
+  pill: {
+    type: Boolean,
+    default: false
+  },
+  noCaret: {
+    type: Boolean,
+    default: false
+  },
+  items: {
+    type: Array,
+    default: () => []
+  }
+});
+defineEmits(["update:modelValue"]);
+const model = useVModel(props);
+const classNames = computed(() => {
+  const result = ["accordion"];
+  if (props.flush)
+    result.push("accordion--flush");
+  if (props.pill)
+    result.push("accordion--pills");
+  return result;
+});
+</script>
+
+<style lang="postcss">
+.accordion {
+  --p-accordion-border: theme(borderColor.default.DEFAULT);
+  --p-accordion-border-dark: theme(borderColor.dark.default.DEFAULT);
+  --p-accordion-item-border: theme(borderColor.default.DEFAULT);
+  --p-accordion-item-border-dark: theme(borderColor.dark.default.DEFAULT);
+  --p-accordion-divide: theme(divideColor.default.DEFAULT);
+  --p-accordion-divide-dark: theme(divideColor.dark.default.DEFAULT);
+
+  @apply flex flex-col w-full;
+  @apply border border-[var(--p-accordion-border)] rounded;
+  @apply dark:border-[var(--p-accordion-border-dark)];
+
+  & > &__item {
+    @apply first:rounded-t last:rounded-b;
+  }
+
+  &--pills {
+    @apply gap-2 border-0 rounded-none;
+
+    > .accordion__item {
+      @apply border rounded border-[var(--p-accordion-item-border)];
+      @apply dark:border-[var(--p-accordion-item-border-dark)];
+
+      > .accordion__item__activator {
+        @apply rounded-t-sm;
+      }
+    }
+  }
+
+  &:not(&--pills) {
+    @apply divide-y divide-[var(--p-accordion-divide)];
+    @apply dark:divide-[var(--p-accordion-divide-dark)];
+  }
+
+  &--flush {
+    @apply border-0 rounded-none;
+
+    > .accordion__item {
+      @apply first:rounded-none last:rounded-none;
+    }
+  }
+}
+</style>

package/dist/components/accordion/Accordion.vue.d.ts

@@ -0,0 +1,80 @@
+import { type AccordionItem } from '.';
+import type { PropType } from 'vue';
+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").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<number | number[]>;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flush: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    items: {
+        type: PropType<AccordionItem[]>;
+        default: () => AccordionItem[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<number | number[]>;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flush: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    items: {
+        type: PropType<AccordionItem[]>;
+        default: () => AccordionItem[];
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+}>, {
+    modelValue: number | number[];
+    noCaret: boolean;
+    multiple: boolean;
+    flush: boolean;
+    pill: boolean;
+    items: AccordionItem[];
+}, {}, {}, {}, 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/accordion/AccordionItem.vue

@@ -0,0 +1,224 @@
+<template>
+  <div
+    :class="classNames"
+    data-testid="accordion-item"
+    :disabled="disabled">
+    <slot
+      name="activator"
+      :toggle="toggle"
+      :expanded="model">
+      <div
+        class="accordion__item__activator"
+        data-testid="accordion-item-activator"
+        @click="toggle">
+        <div
+          class="accordion__item__title"
+          :class="titleClass"
+          data-testid="accordion-item-title">
+          <div
+            v-if="accordionIcon"
+            class="accordion__item__icon"
+            data-testid="accordion-item-icon"
+            :class="iconClass">
+            <component
+              :is="accordionIcon" />
+          </div>
+          <slot name="title">
+            <Subheading>
+              {{ title }}
+            </Subheading>
+          </slot>
+        </div>
+        <slot
+          v-if="!noCaret"
+          name="caret"
+          :expanded="model">
+          <ChevronUp
+            v-if="model"
+            class="accordion__item__caret"
+            data-testid="accordion-item-caret" />
+          <ChevronDown
+            v-else
+            class="accordion__item__caret"
+            data-testid="accordion-item-caret" />
+        </slot>
+      </div>
+    </slot>
+
+    <p-collapse
+      :model-value="model"
+      class="accordion__item__content"
+      :class="contentClass"
+      data-testid="accordion-item-content">
+      <slot :expanded="model" />
+    </p-collapse>
+  </div>
+</template>
+
+<script setup>
+import { useVModel } from "../input";
+import {
+  computed,
+  watch,
+  h
+} from "vue";
+import Subheading from "../subheading/Subheading.vue";
+import pCollapse from "../collapse/Collapse.vue";
+import ChevronUp from "@privyid/persona-icon/vue/chevron-up/16.vue";
+import ChevronDown from "@privyid/persona-icon/vue/chevron-down/16.vue";
+defineOptions({ name: "AccordionItem" });
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  noCaret: {
+    type: Boolean,
+    default: false
+  },
+  icon: {
+    type: [
+      String,
+      Object,
+      Function
+    ],
+    default: void 0
+  },
+  titleClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  },
+  contentClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  },
+  iconClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  }
+});
+const emit = defineEmits(["update:modelValue", "expand", "collapse"]);
+const model = useVModel(props);
+const classNames = computed(() => {
+  const result = ["accordion__item"];
+  if (props.disabled)
+    result.push("accordion__item--disabled");
+  if (model.value)
+    result.push("expanded");
+  else
+    result.push("collapsed");
+  return result;
+});
+const accordionIcon = computed(() => {
+  if (props.icon) {
+    if (typeof props.icon === "string") {
+      return () => h("img", {
+        "src": props.icon,
+        "max-width": "100%",
+        "height": "auto",
+        "data-testid": "accordion-item-icon-image"
+      });
+    }
+    return props.icon;
+  }
+});
+function toggle() {
+  if (!props.disabled)
+    model.value = !model.value;
+}
+watch(model, (value) => {
+  if (value)
+    emit("expand");
+  else
+    emit("collapse");
+});
+defineSlots();
+</script>
+
+<style lang="postcss">
+.accordion__item {
+  --p-accordion-bg: theme(backgroundColor.default.DEFAULT);
+  --p-accordion-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+  --p-accordion-collapsed-border: theme(borderColor.default.DEFAULT);
+  --p-accordion-collapsed-border-dark: theme(borderColor.dark.default.DEFAULT);
+  --p-accordion-expanded-border: theme(borderColor.default.DEFAULT);
+  --p-accordion-expanded-border-dark: theme(borderColor.dark.default.DEFAULT);
+  --p-accordion-expanded-activator-bg: theme(backgroundColor.default.alpha);
+  --p-accordion-expanded-activator-bg-dark: theme(backgroundColor.dark.default.alpha);
+  --p-accordion-expanded-activator-color: theme(textColor.default);
+  --p-accordion-expanded-activator-color-dark: theme(textColor.dark.default);
+
+  @apply w-full bg-[color:var(--p-accordion-bg)];
+  @apply dark:bg-[color:var(--p-accordion-bg-dark)];
+
+  &:not(.accordion &) {
+    @apply rounded border;
+
+    &.collapsed {
+      @apply border-[color:var(--p-accordion-collapsed-border)];
+      @apply dark:border-[color:var(--p-accordion-collapsed-border-dark)];
+    }
+
+    &.expanded {
+      @apply border-[color:var(--p-accordion-expanded-border)];
+      @apply dark:border-[color:var(--p-accordion-expanded-border-dark)];
+    }
+
+    .accordion__item__activator {
+      @apply bg-[color:var(--p-accordion-expanded-activator-bg)];
+      @apply dark:bg-[color:var(--p-accordion-expanded-activator-bg-dark)];
+    }
+  }
+
+  &__activator {
+    @apply flex justify-between items-center p-4 cursor-pointer space-x-2;
+
+    .expanded & {
+      @apply bg-[color:var(--p-accordion-expanded-activator-bg)];
+      @apply dark:bg-[color:var(--p-accordion-expanded-activator-bg-dark)];
+
+      .accordion__item__title,
+      .subheading {
+        @apply text-[color:var(--p-accordion-expanded-activator-color)];
+        @apply dark:text-[color:var(--p-accordion-expanded-activator-color-dark)];
+      }
+    }
+  }
+
+  &__title {
+    @apply grow flex;
+  }
+
+  &__caret {
+    @apply flex-shrink-0;
+  }
+
+  &:is(&--disabled) {
+    @apply pointer-events-none;
+
+    > .accordion__item__activator {
+      @apply opacity-50;
+    }
+  }
+}
+</style>

package/dist/components/accordion/AccordionItem.vue.d.ts

@@ -0,0 +1,121 @@
+import type { VNode, PropType, Component } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        activator(props: {
+            toggle: () => void;
+            expanded: boolean;
+        }): VNode[];
+        caret(props: {
+            expanded: boolean;
+        }): VNode[];
+        default(props: {
+            expanded: boolean;
+        }): VNode[];
+    }> & {
+        activator(props: {
+            toggle: () => void;
+            expanded: boolean;
+        }): VNode[];
+        caret(props: {
+            expanded: boolean;
+        }): VNode[];
+        default(props: {
+            expanded: boolean;
+        }): VNode[];
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: PropType<string | Component>;
+        default: undefined;
+    };
+    titleClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    contentClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    iconClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: boolean) => void;
+    collapse: () => void;
+    expand: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: PropType<string | Component>;
+        default: undefined;
+    };
+    titleClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    contentClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    iconClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+    onCollapse?: (() => any) | undefined;
+    onExpand?: (() => any) | undefined;
+}>, {
+    title: string;
+    modelValue: boolean;
+    disabled: boolean;
+    noCaret: boolean;
+    icon: string | Component;
+    titleClass: string | unknown[] | Record<string, any>;
+    contentClass: string | unknown[] | Record<string, any>;
+    iconClass: string | unknown[] | Record<string, any>;
+}, {}, {}, {}, 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/accordion/AccordionItems.vue

@@ -0,0 +1,50 @@
+<script>
+import { defineComponent, h } from "vue";
+import { findAllChildren } from "../utils/vnode";
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: [Number, Array],
+      default: void 0
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    noCaret: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { slots, emit }) {
+    function setValue(isExpand, i) {
+      if (props.multiple) {
+        const value = Array.isArray(props.modelValue) ? props.modelValue : [];
+        if (isExpand)
+          emit("update:modelValue", [...value, i]);
+        else
+          emit("update:modelValue", value.filter((x) => x !== i));
+      } else {
+        if (isExpand)
+          emit("update:modelValue", i);
+        else if (props.modelValue === i)
+          emit("update:modelValue");
+      }
+    }
+    return () => {
+      const items = findAllChildren(slots.default(), "AccordionItem");
+      return items.map((item, i) => {
+        const isExpand = props.multiple && Array.isArray(props.modelValue) ? props.modelValue.includes(i) : props.modelValue === i;
+        return h(item, {
+          "noCaret": item.props?.noCaret ?? props.noCaret,
+          "modelValue": isExpand,
+          "onUpdate:modelValue": (value) => {
+            setValue(value, i);
+          }
+        });
+      });
+    };
+  }
+});
+</script>

package/dist/components/accordion/AccordionItems.vue.d.ts

@@ -0,0 +1,41 @@
+/**
+ * TODO: Migrate this component to script setup after defineRender has been release
+ * https://github.com/vuejs/rfcs/discussions/585
+ */
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<number | number[]>;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<number | number[]>;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: number | number[];
+    noCaret: boolean;
+    multiple: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,7 @@
+export interface AccordionItem {
+    title: string;
+    content: string;
+    disabled?: boolean;
+    noCaret?: boolean;
+}
+export declare function defineAccordion(items: AccordionItem[]): AccordionItem[];

package/dist/components/accordion/index.mjs

@@ -0,0 +1,3 @@
+export function defineAccordion(items) {
+  return items;
+}

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1,3 @@
+import type { Directive } from 'vue';
+export declare const pAspectRatio: Directive<HTMLElement, number>;
+export declare const vPAspectRatio: import("vue").ObjectDirective<HTMLElement, number, string, string>;

package/dist/components/aspect-ratio/index.mjs

@@ -0,0 +1,21 @@
+import { calculateRatio } from "./utils/calculate-ratio.mjs";
+import { getObserver } from "./utils/resize-observer.mjs";
+export const pAspectRatio = {
+  async mounted(el, { value, modifiers }) {
+    const observer = await getObserver();
+    el.dataset.aspectRatio = `${value}`;
+    el.dataset.aspectFixed = modifiers.fixed ? "true" : "false";
+    calculateRatio(el, value, !!modifiers.fixed);
+    observer.observe(el);
+  },
+  updated(el, { value, modifiers }) {
+    el.dataset.aspectRatio = `${value}`;
+    el.dataset.aspectFixed = modifiers.fixed ? "true" : "false";
+    calculateRatio(el, value, !!modifiers.fixed);
+  },
+  async beforeUnmount(el) {
+    const observer = await getObserver();
+    observer.unobserve(el);
+  }
+};
+export const vPAspectRatio = pAspectRatio;

package/dist/components/aspect-ratio/utils/calculate-ratio.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Calculate and apply ratio to element
+ * @param el HTMLElement
+ * @param ratio aspect ratio
+ * @param fixed enable fixed size
+ */
+export declare function calculateRatio(el: HTMLElement, ratio: number, fixed?: boolean): void;

package/dist/components/aspect-ratio/utils/calculate-ratio.mjs

@@ -0,0 +1,10 @@
+export function calculateRatio(el, ratio, fixed = false) {
+  if (Number.isFinite(ratio)) {
+    const width = el.clientWidth;
+    const height = width / ratio;
+    if (fixed)
+      el.style.height = `${height}px`;
+    else
+      el.style.minHeight = `${height}px`;
+  }
+}

package/dist/components/aspect-ratio/utils/resize-observer.d.ts

@@ -0,0 +1 @@
+export declare function getObserver(): Promise<ResizeObserver>;