@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/input-pin/InputPin.vue.d.ts

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

package/dist/components/input-pin/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Split string to array
+ * @param text
+ * @param length
+ */
+export declare function toArray(text: string | undefined, length: number): string[];

package/dist/components/input-pin/index.mjs

@@ -0,0 +1,3 @@
+export function toArray(text, length) {
+  return Array.from({ length }, (_, i) => text?.[i] ?? "");
+}

package/dist/components/input-range/InputRange.vue

@@ -0,0 +1,253 @@
+<template>
+  <div
+    data-testid="input-range"
+    class="input-range"
+    :class="classNames">
+    <div
+      ref="track"
+      class="input-range__tracks">
+      <!-- Lower Track -->
+      <div
+        v-show="multiple"
+        data-testid="track-lower"
+        class="input-range__track input-range__track-lower"
+        :style="lowerStyle"
+        @click.capture="onClickLowerTrack" />
+      <!-- Active Track -->
+      <div
+        data-testid="track-active"
+        class="input-range__track input-range__track-active"
+        :style="upperStyle"
+        @click.capture="onClickActiveTrack">
+        <div
+          v-show="multiple"
+          ref="thumbStart"
+          data-testid="thumb-start"
+          class="input-range__thumb input-range__thumb-start" />
+        <div
+          ref="thumbEnd"
+          data-testid="thumb-end"
+          class="input-range__thumb input-range__thumb-end" />
+      </div>
+      <!-- Upper Track -->
+      <div
+        data-testid="track-upper"
+        class="input-range__track input-range__track-upper"
+        @click.capture="onClickUpperTrack" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  syncRef,
+  useElementBounding,
+  useToNumber
+} from "@vueuse/core";
+import { useClamp } from "@vueuse/math";
+import {
+  computed,
+  ref,
+  toRef,
+  watch
+} from "vue";
+import useDrag from "./utils/use-drag";
+const props = defineProps({
+  modelValue: {
+    type: [Number, Array],
+    default: void 0
+  },
+  start: {
+    type: Number,
+    default: void 0
+  },
+  end: {
+    type: Number,
+    default: void 0
+  },
+  step: {
+    type: [String, Number],
+    default: 1
+  },
+  min: {
+    type: [String, Number],
+    default: 0
+  },
+  max: {
+    type: [String, Number],
+    default: 100
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["change", "update:modelValue", "update:end", "update:start"]);
+const track = ref();
+const thumbStart = ref();
+const thumbEnd = ref();
+const minimum = useToNumber(toRef(props, "min"));
+const maximum = useToNumber(toRef(props, "max"));
+const perStep = useToNumber(toRef(props, "step"));
+const localStart = ref(Array.isArray(props.modelValue) ? props.modelValue[0] : props.start ?? minimum.value);
+const localEnd = ref(Array.isArray(props.modelValue) ? props.modelValue[1] : props.end ?? props.modelValue ?? maximum.value);
+const minDrag = computed(() => props.multiple ? localStart.value + perStep.value : minimum.value);
+const maxDrag = computed(() => props.multiple ? localEnd.value - perStep.value : maximum.value);
+const startValue = useClamp(localStart.value, minimum, maxDrag);
+const endValue = useClamp(localEnd.value, minDrag, maximum);
+const { width, left } = useElementBounding(track);
+const vStart = computed({
+  get() {
+    if (Array.isArray(props.modelValue))
+      return props.modelValue[0];
+    return props.start ?? minimum.value;
+  },
+  set(value) {
+    emit("update:start", value);
+  }
+});
+const vEnd = computed({
+  get() {
+    if (Array.isArray(props.modelValue))
+      return props.modelValue[1];
+    if (Number.isFinite(props.modelValue))
+      return props.modelValue;
+    return props.end ?? maximum.value;
+  },
+  set(value) {
+    emit("update:end", value);
+  }
+});
+const startPercentage = computed(() => {
+  return (startValue.value - minimum.value) / (maximum.value - minimum.value) * 100;
+});
+const endPercentage = computed(() => {
+  return (endValue.value - minimum.value) / (maximum.value - minimum.value) * 100;
+});
+const classNames = computed(() => {
+  const result = [];
+  if (props.disabled)
+    result.push("input-range--disabled");
+  if (props.readonly)
+    result.push("input-range--readonly");
+  if (props.error)
+    result.push("input-range--error", "state--error");
+  return result;
+});
+const lowerStyle = computed(() => {
+  return { width: `${startPercentage.value}%` };
+});
+const upperStyle = computed(() => {
+  return { width: `${endPercentage.value - startPercentage.value}%` };
+});
+function getValue(event) {
+  const offset = event.pageX - left.value;
+  const percent = offset / width.value;
+  const value = percent * (maximum.value - minimum.value) + minimum.value;
+  const nearest = Math.round(value / perStep.value) * perStep.value;
+  return nearest;
+}
+function onClickLowerTrack(event) {
+  if (!props.disabled && !props.readonly)
+    startValue.value = getValue(event);
+}
+function onClickActiveTrack(event) {
+  if (!props.disabled && !props.readonly) {
+    const value = getValue(event);
+    if (props.multiple) {
+      const ds = Math.abs(value - startValue.value);
+      const de = Math.abs(value - endValue.value);
+      if (ds < de) {
+        startValue.value = value;
+        return;
+      }
+    }
+    endValue.value = value;
+  }
+}
+function onClickUpperTrack(event) {
+  if (!props.disabled && !props.readonly)
+    endValue.value = getValue(event);
+}
+useDrag(thumbStart, (event) => {
+  if (!props.disabled && !props.readonly)
+    startValue.value = getValue(event);
+});
+useDrag(thumbEnd, (event) => {
+  if (!props.disabled && !props.readonly)
+    endValue.value = getValue(event);
+});
+syncRef(startValue, vStart, { immediate: false });
+syncRef(endValue, vEnd, { immediate: false });
+watch([startValue, endValue], ([startVal, endVal]) => {
+  localStart.value = startVal;
+  localEnd.value = endVal;
+  if (props.multiple) {
+    emit("update:modelValue", [startVal, endVal]);
+    emit("change", [startVal, endVal]);
+  } else {
+    emit("update:modelValue", endVal);
+    emit("change", endVal);
+  }
+});
+</script>
+
+<style lang="postcss">
+.input-range {
+  @apply py-2 w-full;
+
+  &__tracks {
+    @apply relative flex w-full bg-ground cursor-pointer overflow-visible rounded;
+    @apply dark:bg-dark-ground;
+  }
+
+  &__track {
+    @apply h-2 rounded;
+
+    &-active {
+      @apply bg-brand-accent relative text-center;
+      @apply dark:bg-dark-brand-accent;
+    }
+
+    &-upper {
+      @apply grow;
+    }
+  }
+
+  &__thumb {
+    @apply w-4 h-4 rounded-full bg-default shadow-sm absolute top-1/2 bottom-0 -translate-y-1/2 border border-subtlest touch-none select-none;
+    @apply dark:bg-dark-layer-2 dark:border-dark-subtlest;
+
+    &:hover,
+    &:active {
+      @apply ring ring-info border-brand-accent;
+      @apply dark:ring-dark-info dark:border-dark-brand-accent;
+    }
+
+    &-start {
+      @apply -left-2;
+    }
+
+    &-end {
+      @apply -right-2;
+    }
+  }
+
+  &:disabled,
+  &--disabled {
+    @apply opacity-50 pointer-events-none;
+  }
+}
+</style>

package/dist/components/input-range/InputRange.vue.d.ts

@@ -0,0 +1,106 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<number | [number, number]>;
+        default: undefined;
+    };
+    start: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    end: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    step: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => void;
+    change: (args_0: unknown) => void;
+    "update:start": (args_0: number) => void;
+    "update:end": (args_0: number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<number | [number, number]>;
+        default: undefined;
+    };
+    start: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    end: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    step: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+    onChange?: ((args_0: unknown) => any) | undefined;
+    "onUpdate:start"?: ((args_0: number) => any) | undefined;
+    "onUpdate:end"?: ((args_0: number) => any) | undefined;
+}>, {
+    modelValue: number | [number, number];
+    disabled: boolean;
+    error: boolean;
+    multiple: boolean;
+    max: string | number;
+    start: number;
+    end: number;
+    readonly: boolean;
+    step: string | number;
+    min: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/input-range/utils/use-drag.d.ts

@@ -0,0 +1,3 @@
+import type { InteractEvent } from '@interactjs/types';
+import type { Ref } from 'vue';
+export default function useDrag(target: Ref<HTMLElement>, handler: (event: InteractEvent) => void): void;

package/dist/components/input-range/utils/use-drag.mjs

@@ -0,0 +1,26 @@
+import { throttle } from "lodash-es";
+import {
+  onBeforeUnmount,
+  shallowRef,
+  watch
+} from "vue";
+export default function useDrag(target, handler) {
+  const instance = shallowRef();
+  watch(target, async (element) => {
+    if (instance.value)
+      instance.value.unset();
+    if (element) {
+      const { default: Interact } = await import("interactjs");
+      const onmove = throttle(
+        handler,
+        1e3 / 120
+        /* limit 120fps */
+      );
+      instance.value = Interact(element).styleCursor(false).draggable({ onmove });
+    }
+  });
+  onBeforeUnmount(async () => {
+    if (instance.value)
+      instance.value.unset();
+  });
+}