@privyid/persona 1.2.1 → 1.2.2-dev.2

package/dist/components/text/Text.vue.d.ts

@@ -0,0 +1,69 @@
+import type { PropType } from 'vue';
+import type { StyleVariant, ElementVariant } from '.';
+import type { WeightVariant, TransformVariant } from '../heading';
+import type { RouteLocationRaw } from 'vue-router';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    weight: WeightVariant;
+    transform: TransformVariant;
+    variant: StyleVariant;
+    href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+    element: ElementVariant;
+}, {}, {}, {}, 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/text/index.d.ts

@@ -0,0 +1,2 @@
+export type StyleVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subheading' | 'subheading2' | 'body' | 'body2' | 'btn' | 'btn2' | 'caption' | 'caption2' | 'formlabel' | 'formlabel2' | 'overline';
+export type ElementVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p' | 'a' | 'label';

package/dist/components/textarea/Textarea.vue

@@ -0,0 +1,162 @@
+<template>
+  <div
+    data-testid="textarea"
+    :class="classNames">
+    <textarea
+      ref="textarea"
+      v-model="model"
+      data-testid="textarea-input"
+      class="textarea__input"
+      v-bind="$attrs"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :rows="rows"
+      :maxlength="maxlength"
+      :aria-valuemax="maxlength"
+      @beforeinput="checkOnInput(accept, $event)"
+      @input="handleInput" />
+    <div
+      v-if="showCounter"
+      data-testid="calendar-counter"
+      class="textarea__counter">
+      {{ charactersLength }}<span v-if="maxlength">/{{ maxlength }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  checkOnInput,
+  useVModel
+} from "../input";
+import {
+  computed,
+  onMounted,
+  watch,
+  ref
+} from "vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: void 0
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  autoGrow: {
+    type: Boolean,
+    default: false
+  },
+  resize: {
+    type: Boolean,
+    default: false
+  },
+  showCounter: {
+    type: Boolean,
+    default: false
+  },
+  rows: {
+    type: [Number, String],
+    default: 3
+  },
+  maxlength: {
+    type: [Number, String],
+    default: void 0
+  },
+  accept: {
+    type: String,
+    default: void 0
+  }
+});
+defineEmits(["input", "update:modelValue"]);
+const textarea = ref();
+const model = useVModel(props);
+const classNames = computed(() => {
+  const results = ["textarea"];
+  if (props.resize)
+    results.push("textarea--resize");
+  if (props.disabled)
+    results.push("textarea--disabled");
+  if (props.autoGrow)
+    results.push("textarea--autogrow");
+  if (props.readonly)
+    results.push("textarea--readonly");
+  if (props.error)
+    results.push("textarea--error", "state--error");
+  return results;
+});
+const charactersLength = computed(() => model.value ? model.value.length : "0");
+watch(() => props.autoGrow, (value) => {
+  if (value)
+    calculateRowHeight();
+  else
+    textarea.value.style.removeProperty("height");
+}, { flush: "post" });
+onMounted(() => {
+  if (props.autoGrow && textarea.value)
+    calculateRowHeight();
+});
+function calculateRowHeight() {
+  textarea.value.style.height = "auto";
+  textarea.value.style.height = `${textarea.value.scrollHeight}px`;
+}
+function handleInput() {
+  if (props.autoGrow)
+    calculateRowHeight();
+}
+</script>
+
+<style lang="postcss">
+.textarea {
+  @apply flex flex-auto relative;
+
+  &__input {
+    @apply p-3 rounded border border-solid border-subtlest hover:border-subtle focus:border-subtle placeholder:text-muted w-full outline-none text-default bg-default resize-none min-h-[46px] focus:ring-4 focus:ring-subtle/10 focus:z-1;
+    @apply dark:border-dark-subtlest hover:dark:border-dark-subtle focus:dark:border-dark-subtle placeholder:dark:text-dark-muted dark:text-dark-default dark:bg-dark-default focus:dark:ring-dark-subtle/10;
+
+    .textarea--readonly & {
+      @apply hover:border-subtlest focus:border-subtlest focus:ring-0 focus:z-0;
+      @apply hover:dark:border-dark-subtlest focus:dark:border-dark-subtlest;
+    }
+
+    .textarea--disabled & {
+      @apply bg-base border-subtle pointer-events-none text-muted;
+      @apply dark:bg-dark-base dark:border-dark-subtle dark:text-dark-muted;
+    }
+
+    .textarea--resize & {
+      @apply resize-y;
+    }
+
+    .textarea--autogrow & {
+      @apply overflow-hidden;
+    }
+
+    .state--error &,
+    .textarea--error & {
+      @apply border-danger-emphasis hover:border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
+    }
+  }
+
+  &__counter {
+    @apply text-right text-muted text-xs absolute bottom-1 right-1 pointer-events-none z-1;
+    @apply dark:text-dark-muted;
+  }
+}
+</style>

package/dist/components/textarea/Textarea.vue.d.ts

@@ -0,0 +1,112 @@
+import type { AcceptVariant } from '../input';
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoGrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCounter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rows: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    maxlength: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (args_0: string) => void;
+    "update:modelValue": (args_0: string) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoGrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCounter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rows: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    maxlength: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onInput?: ((args_0: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+}>, {
+    modelValue: string;
+    disabled: boolean;
+    error: boolean;
+    resize: boolean;
+    readonly: boolean;
+    accept: AcceptVariant;
+    placeholder: string;
+    maxlength: string | number;
+    showCounter: boolean;
+    rows: string | number;
+    autoGrow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/time/Time.vue

@@ -0,0 +1,222 @@
+<template>
+  <p-card
+    data-testid="time"
+    class="time"
+    element="div">
+    <div class="time__container">
+      <TimeItem
+        v-model="hour"
+        :options="hourOptions"
+        time-type="hour"
+        class="time__items--hour" />
+
+      <div class="time__separator">
+        {{ timeSeparator }}
+      </div>
+
+      <TimeItem
+        v-model="minute"
+        :options="minuteOptions"
+        time-type="minute"
+        class="time__items--minute" />
+
+      <TimeItem
+        v-if="is12Hour"
+        v-model="ampm"
+        :options="periodOptions"
+        time-type="ampm"
+        class="time__items--ampm" />
+    </div>
+    <template
+      v-if="$slots.default"
+      #footer>
+      <div class="time__action">
+        <slot :confirm="confirm" />
+      </div>
+    </template>
+  </p-card>
+</template>
+
+<script setup>
+import pCard from "../card/Card.vue";
+import TimeItem from "./TimeItem.vue";
+import {
+  watch,
+  computed,
+  nextTick,
+  onBeforeMount,
+  ref
+} from "vue";
+import { watchDebounced } from "@vueuse/core";
+import { useVModel } from "../input";
+import {
+  format,
+  formatISO,
+  isDate,
+  parse,
+  startOfDay
+} from "date-fns";
+import {
+  getHourUnits,
+  getMinuteUnits,
+  parseTime,
+  validateInterval
+} from "./utils";
+const props = defineProps({
+  modelValue: {
+    type: [Date, Object],
+    default: void 0
+  },
+  timeSeparator: {
+    type: String,
+    default: ":"
+  },
+  is12Hour: {
+    type: Boolean,
+    default: false
+  },
+  hourInterval: {
+    type: Number,
+    default: 1,
+    validator: (value, prop) => {
+      return validateInterval("hour", value, prop.is12Hour);
+    }
+  },
+  minuteInterval: {
+    type: Number,
+    default: 1,
+    validator: (value) => {
+      return validateInterval("minute", value);
+    }
+  },
+  min: {
+    type: Date,
+    default: void 0
+  },
+  max: {
+    type: Date,
+    default: void 0
+  }
+});
+const emit = defineEmits(["update:modelValue", "context", "change"]);
+const model = useVModel(props);
+const localModel = ref(startOfDay(/* @__PURE__ */ new Date()));
+const hour = ref("00");
+const minute = ref("00");
+const ampm = ref("AM");
+const timeLabel = computed(() => {
+  const time = `${hour.value}:${minute.value}`;
+  return props.is12Hour ? `${time} ${ampm.value}` : time;
+});
+const timeFormat = computed(() => props.is12Hour ? "hh:mm a" : "HH:mm");
+const hourOptions = computed(() => {
+  return getHourUnits(localModel.value, props.is12Hour, props.hourInterval, props.min, props.max);
+});
+const minuteOptions = computed(() => {
+  return getMinuteUnits(localModel.value, Number(hour.value), props.minuteInterval, props.min, props.max);
+});
+const periodOptions = computed(() => {
+  return ["AM", "PM"];
+});
+watchDebounced([
+  hour,
+  minute,
+  ampm
+], () => {
+  const date = parse(timeLabel.value, timeFormat.value, localModel.value);
+  emit("change", getContext(date));
+}, { flush: "post", debounce: 300 });
+watch(model, init);
+onBeforeMount(init);
+function init() {
+  try {
+    if (!model.value)
+      return;
+    if (isDate(model.value)) {
+      localModel.value = new Date(model.value);
+      const { hh, mm, a } = parseTime(localModel.value, timeFormat.value);
+      assignTime(hh, mm, a);
+    } else {
+      const { hh, mm, a } = model.value;
+      assignTime(hh, mm, a);
+      localModel.value = parse(timeLabel.value, timeFormat.value, /* @__PURE__ */ new Date());
+      !props.is12Hour && a && console.warn("Please provide is12Hour props to parse time to 12 Hour Format");
+    }
+  } catch (error) {
+    console.warn(error);
+  }
+}
+function confirm() {
+  try {
+    localModel.value = parse(timeLabel.value, timeFormat.value, localModel.value);
+    model.value = isDate(model.value) ? new Date(localModel.value) : {
+      hh: hour.value,
+      mm: minute.value,
+      a: props.is12Hour ? ampm.value : void 0
+    };
+    emit("context", getContext(localModel.value));
+  } catch (error) {
+    console.warn(error);
+  }
+}
+async function assignTime(hh, mm, a) {
+  hour.value = hh ?? "00";
+  minute.value = mm ?? "00";
+  ampm.value = a ?? "AM";
+  await nextTick();
+}
+function getContext(date) {
+  return {
+    time: format(date, timeFormat.value),
+    date,
+    dateISO: formatISO(date)
+  };
+}
+</script>
+
+<style lang="postcss">
+.time {
+  --p-card-padding-x: 2rem;
+  --p-card-padding-y: 2rem;
+
+  @apply flex flex-col shadow-xl;
+  @apply max-w-[320px] overflow-hidden;
+
+  &.card {
+    @apply border-transparent dark:border-transparent;
+  }
+
+  &__container {
+    @apply flex items-center justify-center w-full min-h-[144px] space-x-2;
+  }
+
+  &__separator {
+    @apply px-2.5 py-3;
+  }
+
+  &__action {
+    @apply grid grid-flow-col auto-cols-fr;
+
+    &--cancel,
+    &--confirm {
+      @apply mx-2;
+    }
+  }
+
+  .card__body {
+    @apply pb-6;
+  }
+
+  .card__footer {
+    @apply pt-0;
+  }
+
+  .splide__track {
+    @apply px-2;
+  }
+
+  .dropdown__subitem & {
+    @apply shadow-none;
+  }
+}
+</style>

package/dist/components/time/Time.vue.d.ts

@@ -0,0 +1,104 @@
+import type { PropType } from 'vue';
+import type { TimeModel, TimeContext } from './index';
+declare function confirm(): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            confirm: typeof confirm;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<Date | TimeModel>;
+        default: undefined;
+    };
+    timeSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    is12Hour: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hourInterval: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number, prop: {
+            [x: string]: unknown;
+        }) => boolean;
+    };
+    minuteInterval: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    min: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    max: {
+        type: DateConstructor;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => void;
+    change: (args_0: TimeContext) => void;
+    context: (args_0: TimeContext) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<Date | TimeModel>;
+        default: undefined;
+    };
+    timeSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    is12Hour: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hourInterval: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number, prop: {
+            [x: string]: unknown;
+        }) => boolean;
+    };
+    minuteInterval: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    min: {
+        type: DateConstructor;
+        default: undefined;
+    };
+    max: {
+        type: DateConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+    onChange?: ((args_0: TimeContext) => any) | undefined;
+    onContext?: ((args_0: TimeContext) => any) | undefined;
+}>, {
+    modelValue: Date | TimeModel;
+    max: Date;
+    min: Date;
+    timeSeparator: string;
+    is12Hour: boolean;
+    hourInterval: number;
+    minuteInterval: number;
+}, {}, {}, {}, 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;
+    };
+};