@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/carousel/Carousel.vue

@@ -1,202 +0,0 @@
-<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 lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  provide,
-  ref,
-  watch,
-} from 'vue-demi'
-import CarouselBody from './CarouselBody.vue'
-import ProgressIndicator from '../progress-indicator/ProgressIndicator.vue'
-import type { DirectionVariant } from '../steps'
-import '@splidejs/splide/css/core'
-import { defu } from 'defu'
-import type { AlignmentVariant } from '.'
-import { CAROUSEL_INSTANCE } from '.'
-import type { Options, Splide } from '@splidejs/splide'
-import { useVModel } from '../input'
-
-const props = defineProps({
-  modelValue: {
-    type   : Number,
-    default: 1,
-  },
-  direction: {
-    type   : String as PropType<DirectionVariant>,
-    default: 'horizontal',
-  },
-  align: {
-    type   : String as PropType<AlignmentVariant>,
-    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: 5000,
-  },
-  splideOptions: {
-    type   : Object as PropType<Options>,
-    default: () => ({}),
-  },
-  noProgress: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [number],
-  'change': [number],
-}>()
-
-const model     = useVModel(props)
-const container = ref<HTMLDivElement>()
-const slider    = ref<Splide>()
-const length    = ref(1)
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.direction)
-    result.push(`carousel--${props.direction}`)
-
-  if (props.align)
-    result.push(`carousel--${props.align}`)
-
-  return result
-})
-
-const options = computed<Options>(() => {
-  return defu<Options, [Options]>(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: number) {
-  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/CarouselBody.vue

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

package/dist/components/carousel/CarouselItem.vue

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

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

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

package/dist/components/carousel/index.mjs

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

package/dist/components/chart/Chart.vue

@@ -1,155 +0,0 @@
-<template>
-  <div
-    v-p-aspect-ratio="16/9"
-    class="chart"
-    data-testid="chart"
-    :class="classNames">
-    <slot />
-    <canvas
-      ref="canvas"
-      data-testid="chart-canvas"
-      class="chart__canvas" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type {
-  Chart,
-  ChartData,
-  ChartType,
-  ChartOptions,
-} from 'chart.js/auto'
-import { watchIgnorable } from '@vueuse/core'
-import type { PropType, VNode } from 'vue-demi'
-import {
-  onMounted,
-  watch,
-  shallowRef,
-  onBeforeUnmount,
-  toRef,
-  computed,
-  nextTick,
-  ref,
-} from 'vue-demi'
-import type { LegendPosition } from '.'
-import { defuFn } from 'defu'
-import getAdapter from './adapter/index'
-import { createChart } from './utils/use-chart'
-import { vPAspectRatio } from '../aspect-ratio'
-
-const props = defineProps({
-  variant: {
-    type   : String as PropType<ChartType>,
-    default: 'line',
-  },
-  legend: {
-    type   : String as PropType<LegendPosition>,
-    default: 'bottom',
-  },
-  data: {
-    type   : Object as PropType<ChartData>,
-    default: undefined,
-  },
-  options: {
-    type   : Object as PropType<ChartOptions>,
-    default: undefined,
-  },
-})
-
-const slots = defineSlots<{
-  'default'(): VNode[],
-}>()
-
-const instance = shallowRef<Chart>()
-const canvas   = ref<HTMLCanvasElement>()
-const variant  = toRef(props, 'variant')
-const legend   = toRef(props, 'legend')
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.variant)
-    result.push(`chart--${props.variant}`)
-
-  if (props.legend)
-    result.push(`chart--${props.legend}`)
-
-  return result
-})
-
-const data = computed<ChartData>(() => {
-  return defuFn(
-    props.data as ChartData,
-    getAdapter(variant.value)?.getDatasets(slots?.default?.() ?? []),
-  )
-})
-
-const options = computed<ChartOptions>(() => {
-  return defuFn(
-    props.options as PropType<ChartOptions>,
-    {
-      plugins: {
-        legend: {
-          display : legend.value !== 'none',
-          position: legend.value === 'none' ? undefined : legend.value,
-          labels  : {
-            color: '#9CA3AF',
-            font : {
-              family: 'DM Sans',
-              size  : 12,
-              weight: 600,
-            },
-          },
-        },
-      },
-    },
-    getAdapter(variant.value)?.getStyle(),
-  )
-})
-
-async function initChart () {
-  if (instance.value)
-    instance.value.destroy()
-
-  instance.value = await createChart(
-    canvas.value as HTMLCanvasElement,
-    variant.value,
-    data.value,
-    options.value,
-  )
-}
-
-const { ignoreUpdates } = watchIgnorable(data, (newData) => {
-  if (instance.value) {
-    instance.value.data = newData
-    instance.value.update()
-  }
-})
-
-watch([variant, legend], () => {
-  ignoreUpdates(async () => {
-    await initChart()
-    await nextTick()
-  })
-}, { flush: 'pre' })
-
-onMounted(() => {
-  initChart()
-})
-
-onBeforeUnmount(() => {
-  if (instance.value)
-    instance.value.destroy()
-})
-
-</script>
-
-<style lang="postcss">
-.chart {
-  --p-chart-padding-x: theme(spacing.4);
-  --p-chart-padding-y: theme(spacing.4);
-
-  @apply w-full bg-default px-[var(--p-chart-padding-x)] py-[var(--p-chart-padding-y)];
-  @apply dark:bg-dark-default;
-}
-</style>

package/dist/components/chart/ChartSet.vue

@@ -1,32 +0,0 @@
-<template>
-  <slot />
-</template>
-
-<script lang="ts" setup>
-import type { ChartDataset } from 'chart.js/auto'
-import type { PropType } from 'vue-demi'
-
-defineOptions({
-  name        : 'ChartSet',
-  inheritAttrs: false,
-})
-
-defineProps({
-  name: {
-    type    : [String, Number],
-    required: true,
-  },
-  color: {
-    type   : String,
-    default: undefined,
-  },
-  fill: {
-    type   : String,
-    default: undefined,
-  },
-  options: {
-    type   : Object as PropType<ChartDataset>,
-    default: undefined,
-  },
-})
-</script>

package/dist/components/chart/ChartVal.vue

@@ -1,36 +0,0 @@
-<template>
-  <slot />
-</template>
-
-<script lang="ts" setup>
-import type { ChartDataset } from 'chart.js/auto'
-import type { PropType } from 'vue-demi'
-
-defineOptions({
-  name        : 'ChartVal',
-  inheritAttrs: false,
-})
-
-defineProps({
-  name: {
-    type   : [String, Number],
-    default: undefined,
-  },
-  value: {
-    type   : undefined as PropType<any>,
-    default: undefined,
-  },
-  color: {
-    type   : String,
-    default: undefined,
-  },
-  fill: {
-    type   : String,
-    default: undefined,
-  },
-  options: {
-    type   : Object as PropType<ChartDataset>,
-    default: undefined,
-  },
-})
-</script>

package/dist/components/chart/adapter/adapter.d.ts

@@ -1,7 +0,0 @@
-import type { ChartData, ChartOptions } from 'chart.js/auto';
-import type { VNode } from 'vue-demi';
-export interface ChartAdapter {
-    getStyle: () => ChartOptions;
-    getDatasets: (vnodes: VNode[]) => ChartData;
-}
-export declare function defineAdapter(adapter: ChartAdapter): ChartAdapter;

package/dist/components/chart/adapter/adapter.mjs

@@ -1,3 +0,0 @@
-export function defineAdapter(adapter) {
-  return adapter;
-}

package/dist/components/chart/adapter/bubble.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("./adapter").ChartAdapter;
-export default _default;

package/dist/components/chart/adapter/bubble.mjs

@@ -1,26 +0,0 @@
-import { findAllChildren } from "../../utils/vnode.mjs";
-import { defineAdapter } from "./adapter.mjs";
-import defu from "defu";
-import { startCase } from "lodash-es";
-import { colorHash } from "../../avatar/utils/color-hash.mjs";
-export default defineAdapter({
-  getDatasets(vnodes) {
-    return {
-      datasets: findAllChildren(vnodes, "ChartSet").map((set) => {
-        const color = set.props.color ?? colorHash(set.props.name).at(1);
-        const fill = set.props.fill ?? color;
-        return defu(set.props.options, {
-          label: startCase(set.props.name),
-          backgroundColor: fill,
-          borderColor: color,
-          data: findAllChildren(set.children.default(), "ChartVal").map((value) => {
-            return value.props.value;
-          })
-        });
-      })
-    };
-  },
-  getStyle() {
-    return {};
-  }
-});

package/dist/components/chart/adapter/index.d.ts

@@ -1,3 +0,0 @@
-import type { ChartAdapter } from './adapter';
-import type { ChartType } from 'chart.js/auto';
-export default function getAdapter(type: ChartType): ChartAdapter;

package/dist/components/chart/adapter/index.mjs

@@ -1,16 +0,0 @@
-import Line from "./line.mjs";
-import Pie from "./pie.mjs";
-import Bubble from "./bubble.mjs";
-const CHART_ADAPTER_MAP = {
-  line: Line,
-  bar: Line,
-  radar: Line,
-  pie: Pie,
-  doughnut: Pie,
-  polarArea: Pie,
-  scatter: Bubble,
-  bubble: Bubble
-};
-export default function getAdapter(type) {
-  return CHART_ADAPTER_MAP[type];
-}

package/dist/components/chart/adapter/line.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("./adapter").ChartAdapter;
-export default _default;

package/dist/components/chart/adapter/line.mjs

@@ -1,66 +0,0 @@
-import { startCase } from "lodash-es";
-import { defineAdapter } from "./adapter.mjs";
-import { colorHash } from "../../avatar/utils/color-hash.mjs";
-import { findAllChildren } from "../../utils/vnode.mjs";
-import defu from "defu";
-export default defineAdapter({
-  getDatasets(vnodes) {
-    const sets = findAllChildren(vnodes, "ChartSet");
-    const datasets = /* @__PURE__ */ new Map();
-    const labels = [];
-    for (const set of sets) {
-      const values = findAllChildren(set.children.default(), "ChartVal");
-      for (const value of values) {
-        const item = datasets.get(value.props.name);
-        const color = value.props.color ?? colorHash(value.props.name).at(1);
-        const fill = value.props.fill ?? color;
-        if (item) {
-          item.data.push(value.props.value);
-          item.borderColor.push(color);
-          item.backgroundColor.push(fill);
-        } else {
-          datasets.set(value.props.name, defu(value.props.options, {
-            label: startCase(value.props.name),
-            data: [value.props.value],
-            borderColor: [color],
-            backgroundColor: [fill],
-            fill: !!value.props.fill
-          }));
-        }
-      }
-      labels.push(startCase(set.props.name));
-    }
-    return { labels, datasets: [...datasets.values()] };
-  },
-  getStyle() {
-    return {
-      scales: {
-        x: {
-          ticks: {
-            color: "#9CA3AF",
-            font: {
-              family: "DM Sans",
-              size: 12,
-              weight: 600
-            }
-          },
-          border: { color: "#BFBFBF" }
-        },
-        y: {
-          ticks: {
-            color: "#9CA3AF",
-            font: {
-              family: "DM Sans",
-              size: 12,
-              weight: 600
-            }
-          },
-          border: {
-            color: "#BFBFBF",
-            dash: [4]
-          }
-        }
-      }
-    };
-  }
-});

package/dist/components/chart/adapter/pie.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("./adapter").ChartAdapter;
-export default _default;

package/dist/components/chart/adapter/pie.mjs

@@ -1,34 +0,0 @@
-import { startCase } from "lodash-es";
-import { colorHash } from "../../avatar/utils/color-hash.mjs";
-import { findAllChildren } from "../../utils/vnode.mjs";
-import { defineAdapter } from "./adapter.mjs";
-import defu from "defu";
-export default defineAdapter({
-  getDatasets(vnodes) {
-    const sets = findAllChildren(vnodes, "ChartSet");
-    const datasets = /* @__PURE__ */ new Map();
-    const labels = [];
-    for (const set of sets) {
-      const values = findAllChildren(set.children.default(), "ChartVal");
-      for (const value of values) {
-        const item = datasets.get(set.props.name);
-        const fill = value.props.fill ?? value.props.color ?? colorHash(value.props.name).at(1);
-        if (item) {
-          item.data.push(value.props.value);
-          item.backgroundColor.push(fill);
-        } else {
-          datasets.set(set.props.name, defu(set.props.options, {
-            label: startCase(set.props.name),
-            data: [value.props.value],
-            backgroundColor: [fill]
-          }));
-        }
-        labels.push(startCase(value.props.name));
-      }
-    }
-    return { labels, datasets: [...datasets.values()] };
-  },
-  getStyle() {
-    return {};
-  }
-});

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

@@ -1,2 +0,0 @@
-import type { LayoutPosition } from 'chart.js';
-export type LegendPosition = 'none' | LayoutPosition;

package/dist/components/chart/utils/use-chart.d.ts

@@ -1,2 +0,0 @@
-import type { ChartData, ChartType, ChartOptions, Chart } from 'chart.js/auto';
-export declare function createChart(target: HTMLCanvasElement, type: ChartType, data: ChartData, options: ChartOptions): Promise<Chart>;

package/dist/components/chart/utils/use-chart.mjs

@@ -1,9 +0,0 @@
-export async function createChart(target, type, data, options) {
-  const { default: Chart } = await import("chart.js/auto");
-  const instance = new Chart(target, {
-    type,
-    data,
-    options
-  });
-  return instance;
-}