@privyid/persona 0.3.0

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

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

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

@@ -0,0 +1,3 @@
+import { ChartAdapter } from './adapter';
+export declare type ChartType = 'line' | 'bar' | 'pie';
+export default function getAdapter(type: ChartType): ChartAdapter;

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

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

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

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

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

@@ -0,0 +1,63 @@
+import { startCase } from "lodash-es";
+import { defineAdapter } from "./adapter.mjs";
+import { colorHash } from "../../avatar/utils/color-hash.mjs";
+import { findAllChildren } from "../../utils/vnode.mjs";
+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);
+        if (item) {
+          item.data.push(value.props.value);
+          item.borderColor.push(color);
+          item.backgroundColor.push(color);
+        } else {
+          datasets.set(value.props.name, {
+            label: startCase(value.props.name),
+            data: [value.props.value],
+            borderColor: [color],
+            backgroundColor: [color]
+          });
+        }
+      }
+      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"
+            }
+          },
+          grid: { borderColor: "#BFBFBF" }
+        },
+        y: {
+          ticks: {
+            color: "#9CA3AF",
+            font: {
+              family: "DM Sans",
+              size: 12,
+              weight: "600"
+            }
+          },
+          grid: {
+            borderColor: "#BFBFBF",
+            borderDash: [4]
+          }
+        }
+      }
+    };
+  }
+});

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

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

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

@@ -0,0 +1,33 @@
+import { startCase } from "lodash-es";
+import { colorHash } from "../../avatar/utils/color-hash.mjs";
+import { findAllChildren } from "../../utils/vnode.mjs";
+import { defineAdapter } from "./adapter.mjs";
+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 color = value.props.color ?? colorHash(value.props.name).at(1);
+        if (item) {
+          item.data.push(value.props.value);
+          item.backgroundColor.push(color);
+        } else {
+          datasets.set(set.props.name, {
+            label: startCase(set.props.name),
+            data: [value.props.value],
+            backgroundColor: [color]
+          });
+        }
+        labels.push(startCase(value.props.name));
+      }
+    }
+    return { labels, datasets: [...datasets.values()] };
+  },
+  getStyle() {
+    return {};
+  }
+});

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

@@ -0,0 +1,2 @@
+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/use-chart.mjs

@@ -0,0 +1,9 @@
+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;
+}

package/dist/components/checkbox/Checkbox.vue

@@ -0,0 +1,176 @@
+<template>
+  <label
+    data-testid="checkbox"
+    class="checkbox"
+    :class="classNames"
+    @click.prevent="toggle">
+    <input
+      type="checkbox"
+      :checked="model"
+      :name="name"
+      :disabled="disabled || readonly"
+      :value="value">
+    <span class="checkbox__icon">
+      <!-- checked icon -->
+      <template v-if="indeterminate">
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 14 2"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg">
+          <rect
+            width="14"
+            height="2"
+            fill="white" />
+        </svg>
+      </template>
+      <template v-else>
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 14 10"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M3.81581 8.48528L5.23002 9.8995L6.64423 8.48528L13.7153 1.41421L12.3011 0L5.23002 7.07107L1.69449 3.53553L0.280273 4.94975L3.81581 8.48528Z"
+            fill="white" />
+        </svg>
+      </template>
+    </span>
+    <span class="checkbox__label">
+      <slot />
+    </span>
+  </label>
+</template>
+
+<script>
+import { useVModel } from "./use-checkbox";
+import { computed, defineComponent } from "vue-demi";
+export default defineComponent({
+  props: {
+    name: {
+      type: String,
+      default: void 0
+    },
+    modelValue: {
+      type: [
+        String,
+        Number,
+        Boolean,
+        Array,
+        Object,
+        Date
+      ],
+      default: false
+    },
+    value: {
+      type: [
+        String,
+        Number,
+        Boolean,
+        Array,
+        Object,
+        Date
+      ],
+      default: true
+    },
+    uncheckedValue: {
+      type: [
+        String,
+        Number,
+        Boolean,
+        Array,
+        Object,
+        Date
+      ],
+      default: false
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    indeterminate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["change", "update:modelValue"],
+  setup(props) {
+    const model = useVModel(props);
+    const classNames = computed(() => {
+      const result = [];
+      if (model.value)
+        result.push("checkbox--checked");
+      if (props.indeterminate)
+        result.push("checkbox--indeterminate");
+      if (props.disabled)
+        result.push("checkbox--disabled");
+      if (props.readonly)
+        result.push("checkbox--readonly");
+      return result;
+    });
+    function toggle() {
+      if (!props.readonly && !props.disabled)
+        model.value = !model.value;
+    }
+    return {
+      model,
+      classNames,
+      toggle
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.checkbox {
+  @apply inline-flex gap-2 relative cursor-pointer select-none items-baseline;
+
+  & > input[type="checkbox"] {
+    @apply appearance-none w-0 h-0 opacity-0 absolute;
+  }
+
+  &__icon {
+    @apply w-5 h-5 border rounded-tn border-secondary-25 inline-flex items-center justify-center bg-white;
+
+    & > svg {
+      @apply w-3;
+    }
+  }
+
+  &--checked,
+  &--indeterminate {
+    .checkbox__icon {
+      @apply bg-primary-100 border-primary-100;
+    }
+  }
+
+  &--disabled {
+    @apply opacity-50;
+  }
+
+  .dropdown__menu & {
+    @apply px-3 py-2 cursor-pointer text-body-100 w-full select-none text-left;
+
+    &:hover,
+    &:focus-visible {
+      @apply bg-background-75;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,88 @@
+export interface ChangedInteface {
+    value: any;
+    state: boolean;
+}
+declare const _default: import("vue-demi").DefineComponent<{
+    name: {
+        type: StringConstructor;
+        default: any;
+    };
+    modelValue: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    value: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    uncheckedValue: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    model: import("vue-demi").Ref<boolean>;
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    toggle: () => 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<{
+    name: {
+        type: StringConstructor;
+        default: any;
+    };
+    modelValue: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    value: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    uncheckedValue: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    name: string;
+    value: string | number | boolean | unknown[] | Record<string, any> | Date;
+    disabled: boolean;
+    modelValue: string | number | boolean | unknown[] | Record<string, any> | Date;
+    readonly: boolean;
+    uncheckedValue: string | number | boolean | unknown[] | Record<string, any> | Date;
+    checked: boolean;
+    indeterminate: boolean;
+}>;
+export default _default;

package/dist/components/checkbox/use-checkbox.d.ts

@@ -0,0 +1,7 @@
+import { InputProps } from '../input/use-input';
+export interface CheckboxProps extends InputProps<unknown> {
+    checked: boolean;
+    value: unknown;
+    uncheckedValue: unknown;
+}
+export declare function useVModel(props: CheckboxProps): import("vue-demi").Ref<boolean>;

package/dist/components/checkbox/use-checkbox.mjs

@@ -0,0 +1,37 @@
+import { syncRef } from "@vueuse/shared";
+import {
+  computed,
+  getCurrentInstance,
+  ref
+} from "vue-demi";
+import { valueIn, isEqual } from "../utils/value.mjs";
+function isChecked(modelValue, checked) {
+  if (Array.isArray(modelValue))
+    return valueIn(modelValue, checked);
+  return isEqual(modelValue, checked);
+}
+export function useVModel(props) {
+  const { emit } = getCurrentInstance();
+  const checked = props.value;
+  const unchecked = props.uncheckedValue;
+  const localValue = ref(isChecked(props.modelValue, checked) || props.checked);
+  const model = computed({
+    get() {
+      return isChecked(props.modelValue, checked) || props.checked;
+    },
+    set(value) {
+      const newValue = value ? checked : unchecked;
+      if (Array.isArray(props.modelValue)) {
+        if (value) {
+          if (!valueIn(props.modelValue, newValue))
+            emit("update:modelValue", [...props.modelValue, newValue]);
+        } else
+          emit("update:modelValue", props.modelValue.filter((old) => !isEqual(old, checked)));
+      } else
+        emit("update:modelValue", newValue);
+      emit("change", value);
+    }
+  });
+  syncRef(localValue, model);
+  return localValue;
+}

package/dist/components/datepicker/Datepicker.vue

@@ -0,0 +1,143 @@
+<template>
+  <Dropdown
+    v-model="isOpen"
+    class="datepicker"
+    data-testid="datepicker"
+    aria-label="datepicker"
+    :class="classNames"
+    :disabled="disabled">
+    <template #activator>
+      <Input
+        :value="value"
+        :model-value="value"
+        data-testid="datepicker-input"
+        class="datepicker__input"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        readonly
+        @focus="onFocus" />
+      <IconCalendar
+        class="datepicker__icon" />
+    </template>
+
+    <Calendar
+      v-model="model"
+      :disabled="disabled"
+      :readonly="readonly"
+      :max="max"
+      :min="min"
+      :mode="mode"
+      class="datepicker__calendar"
+      @change="onSelected" />
+  </Dropdown>
+</template>
+
+<script>
+import Dropdown from "../dropdown/Dropdown.vue";
+import Input from "../input/Input.vue";
+import Calendar from "../calendar/Calendar.vue";
+import { format as formatDate, isDate } from "date-fns";
+import {
+  computed,
+  defineComponent,
+  ref
+} from "vue-demi";
+import { useVModel } from "../input/use-input";
+import IconCalendar from "@carbon/icons-vue/lib/calendar/16";
+export default defineComponent({
+  components: {
+    Dropdown,
+    Input,
+    Calendar,
+    IconCalendar
+  },
+  props: {
+    modelValue: {
+      type: Date,
+      default: void 0
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    format: {
+      type: String,
+      default: "dd/MM/yyyy"
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    readonly: {
+      type: Boolean,
+      default: void 0
+    },
+    max: {
+      type: Date,
+      default: void 0
+    },
+    min: {
+      type: Date,
+      default: void 0
+    },
+    mode: {
+      type: String,
+      default: "date"
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["change", "update:modelValue"],
+  setup(props, { emit }) {
+    const model = useVModel(props);
+    const isOpen = ref(false);
+    const value = computed(() => {
+      return isDate(model.value) ? formatDate(model.value, props.format) : "";
+    });
+    const classNames = computed(() => {
+      const result = [];
+      if (isOpen.value)
+        result.push("datepicker--open");
+      if (props.disabled)
+        result.push("datepicker--disabled");
+      if (props.readonly)
+        result.push("datepicker--readonly");
+      return result;
+    });
+    function onFocus() {
+      if (!props.disabled && !props.readonly)
+        isOpen.value = true;
+    }
+    function onSelected(event) {
+      isOpen.value = false;
+      emit("change", event);
+    }
+    return {
+      isOpen,
+      classNames,
+      model,
+      value,
+      onFocus,
+      onSelected
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.datepicker {
+  &__input {
+    @apply pr-8 truncate;
+  }
+
+  &__icon {
+    @apply absolute right-3 top-0 bottom-0 my-auto transition-transform duration-150 text-secondary-75 pointer-events-none;
+  }
+
+  > .dropdown__menu {
+    @apply min-w-max max-h-min;
+  }
+}
+</style>

package/dist/components/datepicker/Datepicker.vue.d.ts

@@ -0,0 +1,88 @@
+import { PropType } from 'vue-demi';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: DateConstructor;
+        default: any;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    max: {
+        type: DateConstructor;
+        default: any;
+    };
+    min: {
+        type: DateConstructor;
+        default: any;
+    };
+    mode: {
+        type: PropType<"date" | "month" | "year">;
+        default: string;
+    };
+}, {
+    isOpen: import("vue-demi").Ref<boolean>;
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    model: import("vue-demi").Ref<Date>;
+    value: import("vue-demi").ComputedRef<string>;
+    onFocus: () => void;
+    onSelected: (event: Event) => 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: DateConstructor;
+        default: any;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    max: {
+        type: DateConstructor;
+        default: any;
+    };
+    min: {
+        type: DateConstructor;
+        default: any;
+    };
+    mode: {
+        type: PropType<"date" | "month" | "year">;
+        default: string;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    disabled: boolean;
+    min: Date;
+    max: Date;
+    modelValue: Date;
+    readonly: boolean;
+    mode: "date" | "month" | "year";
+    format: string;
+    placeholder: string;
+}>;
+export default _default;