@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/input-password/InputPassword.vue

@@ -1,110 +0,0 @@
-<template>
-  <p-input
-    class="input-password"
-    :model-value="modelValue"
-    :size="size"
-    :disabled="disabled"
-    :readonly="readonly"
-    :error="error"
-    :clearable="clearable"
-    :container-class="containerClass"
-    :accept="accept"
-    :type="isShow ? 'text' : 'password'"
-    @clear="$emit('clear', $event)"
-    @update:model-value="$emit('update:modelValue', $event)">
-    <template #append>
-      <IconHide
-        v-if="isShow"
-        class="input-password__toggle"
-        @click.prevent.stop="toggle" />
-      <IconShow
-        v-else
-        class="input-password__toggle"
-        @click.prevent.stop="toggle" />
-    </template>
-  </p-input>
-</template>
-
-<script lang="ts" setup>
-import pInput from '../input/Input.vue'
-import IconShow from '@privyid/persona-icon/vue/view/20.vue'
-import IconHide from '@privyid/persona-icon/vue/view-off/20.vue'
-import { ref } from 'vue-demi'
-import type { PropType } from 'vue-demi'
-import type { SizeVariant } from '../button'
-import type { AcceptVariant } from '../input/utils/accept'
-
-defineProps({
-  modelValue: {
-    type   : [String, Number],
-    default: undefined,
-  },
-  size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
-  },
-  disabled: {
-    type   : Boolean,
-    default: false,
-  },
-  readonly: {
-    type   : Boolean,
-    default: false,
-  },
-  error: {
-    type   : Boolean,
-    default: false,
-  },
-  clearable: {
-    type   : Boolean,
-    default: false,
-  },
-  containerClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-  accept: {
-    type   : String as PropType<AcceptVariant>,
-    default: undefined,
-  },
-})
-
-defineEmits<{
-  'update:modelValue': [string | number],
-  'clear': [MouseEvent],
-}>()
-
-const isShow = ref(false)
-
-function toggle () {
-  isShow.value = !isShow.value
-}
-</script>
-
-<style lang="postcss">
-.input-password {
-  @apply pr-9;
-
-  &__toggle {
-    @apply absolute right-[0.15rem] top-1/2 -translate-y-1/2 cursor-pointer z-1 text-default/30 hover:text-subtle;
-    @apply dark:text-dark-default/30 hover:dark:text-dark-subtle;
-
-    .input--disabled ~ & {
-      @apply pointer-events-none text-muted;
-      @apply dark:text-dark-muted;
-    }
-  }
-
-  &.input--clearable {
-    @apply pr-16;
-
-    + .input__clear {
-      @apply right-10;
-    }
-  }
-}
-</style>

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

@@ -1,2 +0,0 @@
-import type { MaybeRef } from '@vueuse/core';
-export declare function usePasswordStrength(input: MaybeRef<string>): import("vue-demi").Ref<number, number>;

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

@@ -1,17 +0,0 @@
-import { watchDebounced } from "@vueuse/core";
-import {
-  ref,
-  unref
-} from "vue-demi";
-export function usePasswordStrength(input) {
-  const score = ref(0);
-  watchDebounced(() => unref(input), async (value) => {
-    if (value) {
-      const { default: zxcvbn } = await import("zxcvbn");
-      const result = zxcvbn(value);
-      score.value = Math.round(result.score / 4 * 6 + 1);
-    } else
-      score.value = 0;
-  }, { debounce: 300 });
-  return score;
-}

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

@@ -1,170 +0,0 @@
-<template>
-  <div
-    ref="root"
-    data-testid="input-pin"
-    class="input-pin"
-    :class="classNames">
-    <p-input
-      v-for="i in num"
-      :key="i"
-      maxlength="1"
-      v-bind="$attrs"
-      :model-value="getValue(i - 1)"
-      :size="size"
-      :clearable="false"
-      :readonly="readonly"
-      :disabled="disabled"
-      :error="error"
-      @keydown="onKeyDown($event)"
-      @beforeinput.prevent="setValue(i - 1, $event)"
-      @keydown.left.stop.prevent="prevFocus"
-      @keydown.right.stop.prevent="nextFocus" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import pInput from '../input/Input.vue'
-import type { PropType } from 'vue-demi'
-import {
-  computed,
-  toRef,
-  ref,
-} from 'vue-demi'
-import {
-  syncRef,
-  useToNumber,
-} from '@vueuse/core'
-import { useFocus } from '../dropdown/utils/use-focus'
-import type { AcceptVariant } from '../input'
-import {
-  isAccepted,
-  removeUnaccepted,
-} from '../input'
-import { toArray } from '.'
-import type { SizeVariant } from '../button'
-
-defineOptions({ inheritAttrs: false })
-
-const props = defineProps({
-  modelValue: {
-    type   : String,
-    default: undefined,
-  },
-  size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
-  },
-  length: {
-    type   : [Number, String],
-    default: 5,
-  },
-  disabled: {
-    type   : Boolean,
-    default: false,
-  },
-  readonly: {
-    type   : Boolean,
-    default: false,
-  },
-  error: {
-    type   : Boolean,
-    default: false,
-  },
-  accept: {
-    type   : String as PropType<AcceptVariant>,
-    default: undefined,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [string],
-  'change': [string],
-}>()
-
-const root       = ref<HTMLDivElement>()
-const num        = useToNumber(toRef(props, 'length'))
-const localModel = ref<string[]>(toArray(props.modelValue, num.value))
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.disabled)
-    result.push('input-pin--disabled')
-
-  if (props.readonly)
-    result.push('input-pin--readonly')
-
-  if (props.error)
-    result.push('input-pin--error', 'state--error')
-
-  return result
-})
-
-const {
-  next: nextFocus,
-  prev: prevFocus,
-} = useFocus(root, false)
-
-const model = computed<string[]>({
-  get () {
-    return toArray(props.modelValue, num.value)
-  },
-  set (value: string[]) {
-    const text = value.map((val) => val || ' ').join('').trimEnd()
-
-    emit('change', text)
-    emit('update:modelValue', text)
-  },
-})
-
-syncRef(localModel, model, { deep: true, immediate: false })
-
-function getValue (index: number): string {
-  return localModel.value.at(index)
-}
-
-function setValue (index: number, event: InputEvent) {
-  if (event.inputType === 'insertFromPaste')
-    localModel.value = toArray(removeUnaccepted(props.accept, event.data), num.value)
-
-  else if (event.inputType !== 'insertLineBreak' && (!event.data || isAccepted(props.accept, event.data))) {
-    localModel.value[index] = event.data
-
-    if (root.value) {
-      if (event.inputType === 'deleteContentBackward')
-        prevFocus()
-
-      if (event.inputType === 'insertText')
-        nextFocus()
-    }
-  }
-}
-
-function onKeyDown (event: KeyboardEvent) {
-  if (!props.readonly && !props.disabled) {
-    const target = event.target as HTMLInputElement
-
-    if (target.value && [...event.key].length === 1 && !event.ctrlKey && !event.metaKey) {
-      event.preventDefault()
-
-      target.dispatchEvent(new InputEvent('beforeinput', { inputType: 'insertText', data: event.key }))
-    } else if (event.key === 'Backspace') {
-      event.preventDefault()
-
-      target.dispatchEvent(new InputEvent('beforeinput', { inputType: 'deleteContentBackward' }))
-    }
-  }
-}
-</script>
-
-<style lang="postcss">
-.input-pin {
-  @apply flex flex-row space-x-4;
-
-  .input__form {
-    -webkit-touch-callout: none;
-
-    @apply text-center;
-  }
-}
-</style>

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

@@ -1,6 +0,0 @@
-/**
- * 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

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

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

@@ -1,303 +0,0 @@
-<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 lang="ts" setup>
-import {
-  syncRef,
-  useElementBounding,
-  useToNumber,
-} from '@vueuse/core'
-import { useClamp } from '@vueuse/math'
-import type {
-  PropType,
-  StyleValue,
-} from 'vue-demi'
-import {
-  computed,
-  ref,
-  toRef,
-  watch,
-} from 'vue-demi'
-import useDrag from './utils/use-drag'
-
-const props = defineProps({
-  modelValue: {
-    type   : [Number, Array] as PropType<number | [number, number]>,
-    default: undefined,
-  },
-  start: {
-    type   : Number,
-    default: undefined,
-  },
-  end: {
-    type   : Number,
-    default: undefined,
-  },
-  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': [unknown],
-  'update:modelValue': [unknown],
-  'update:end': [number],
-  'update:start': [number],
-}>()
-
-const track      = ref<HTMLDivElement>()
-const thumbStart = ref<HTMLDivElement>()
-const thumbEnd   = ref<HTMLDivElement>()
-
-const minimum = useToNumber(toRef(props, 'min'))
-const maximum = useToNumber(toRef(props, 'max'))
-const perStep = useToNumber(toRef(props, 'step'))
-
-// Initial value
-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: number) {
-    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: number) {
-    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: string[] = []
-
-  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<StyleValue>(() => {
-  return { width: `${startPercentage.value}%` }
-})
-
-const upperStyle = computed<StyleValue>(() => {
-  return { width: `${(endPercentage.value - startPercentage.value)}%` }
-})
-
-function getValue (event: { pageX: number }): number {
-  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: MouseEvent) {
-  if (!props.disabled && !props.readonly)
-    startValue.value = getValue(event)
-}
-
-function onClickActiveTrack (event: MouseEvent) {
-  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 clicked near thumbStart, it changed the start value
-       * If not, change the end value
-       */
-      if (ds < de) {
-        startValue.value = value
-
-        return
-      }
-    }
-
-    endValue.value = value
-  }
-}
-
-function onClickUpperTrack (event: MouseEvent) {
-  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/utils/use-drag.d.ts

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

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

@@ -1,26 +0,0 @@
-import { throttle } from "lodash-es";
-import {
-  onBeforeUnmount,
-  shallowRef,
-  watch
-} from "vue-demi";
-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();
-  });
-}