@privyid/persona 0.3.0 → 0.5.0

package/dist/components/input-group/InputGroupAddon.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="input-group__addon">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss">
+.input-group {
+  &__addon {
+    @apply flex items-center text-muted rounded border border-solid border-muted outline-none bg-default;
+
+    .input-group--xs > & {
+      @apply text-xs px-3 py-2;
+    }
+
+    .input-group--sm > & {
+      @apply px-3 py-2;
+    }
+
+    .input-group--md > & {
+      @apply px-3 py-3;
+    }
+
+    .input-group--lg > & {
+      @apply px-3 py-4;
+    }
+
+    .state--error &,
+    .input-group--error & {
+      @apply border-danger-emphasis;
+
+      &:focus {
+        @apply ring-danger border-danger-emphasis;
+      }
+    }
+
+    .state--disabled &,
+    .input-group--disabled & {
+      @apply bg-muted border-muted pointer-events-none text-muted;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,62 @@
+<template>
+  <p-input
+    class="input-password"
+    :type="isShow ? 'text' : 'password'">
+    <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>
+import pInput from "../input/Input.vue";
+import IconShow from "@carbon/icons-vue/lib/view/16";
+import IconHide from "@carbon/icons-vue/lib/view--off/16";
+import { defineComponent, ref } from "vue-demi";
+export default defineComponent({
+  components: {
+    pInput,
+    IconShow,
+    IconHide
+  },
+  setup() {
+    const isShow = ref(false);
+    function toggle() {
+      isShow.value = !isShow.value;
+    }
+    return {
+      isShow,
+      toggle
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.input-password {
+  @apply pr-9;
+
+  &__toggle {
+    @apply absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer z-1;
+
+    .input--disabled ~ & {
+      @apply pointer-events-none text-muted;
+    }
+  }
+
+  &.input--clearable {
+    @apply pr-14;
+
+    + .input__clear {
+      @apply right-9;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,5 @@
+declare const _default: import("vue-demi").DefineComponent<{}, {
+    isShow: import("vue-demi").Ref<boolean>;
+    toggle: () => void;
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{}>>, {}>;
+export default _default;

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

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

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,145 @@
+<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)"
+      :clearable="false"
+      :readonly="readonly"
+      :disabled="disabled"
+      :error="error"
+      @input="setValue(i - 1, $event)"
+      @focus.passive="onFocus"
+      @keyup.delete.passive="onDelete"
+      @keyup.left.passive="prevFocus"
+      @keyup.right.passive="nextFocus"
+      @paste.passive="onPaste" />
+  </div>
+</template>
+
+<script>
+import pInput from "../input/Input.vue";
+import {
+  computed,
+  defineComponent,
+  toRef,
+  ref
+} from "vue-demi";
+import {
+  syncRef,
+  templateRef,
+  useToNumber
+} from "@vueuse/core";
+import { useFocus } from "../dropdown/utils/use-focus";
+export default defineComponent({
+  components: { pInput },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    length: {
+      type: [Number, String],
+      default: 5
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue", "clear"],
+  setup(props, { emit }) {
+    const root = templateRef("root");
+    const num = useToNumber(toRef(props, "length"));
+    const localModel = ref([...props.modelValue].slice(0, num.value).map((val) => val.trim()));
+    const classNames = computed(() => {
+      const result = [];
+      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({
+      get() {
+        return [...props.modelValue].slice(0, num.value);
+      },
+      set(value) {
+        const text = value.map((val) => val || " ").join("").trimEnd();
+        emit("update:modelValue", text);
+      }
+    });
+    syncRef(localModel, model, { deep: true });
+    function getValue(index) {
+      return localModel.value.at(index);
+    }
+    function setValue(index, event) {
+      const target = event.target;
+      const value = target.value;
+      localModel.value[index] = value;
+      if (root.value) {
+        if (value)
+          nextFocus();
+        else
+          prevFocus();
+      }
+    }
+    function onFocus(event) {
+      event.target.select();
+    }
+    function onDelete(event) {
+      if (root.value && !event.target.value)
+        prevFocus();
+    }
+    function onPaste(event) {
+      localModel.value = [...event.clipboardData.getData("Text")].slice(0, num.value);
+    }
+    return {
+      classNames,
+      num,
+      localModel,
+      getValue,
+      setValue,
+      onFocus,
+      onDelete,
+      onPaste,
+      nextFocus,
+      prevFocus
+    };
+  }
+});
+</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/InputPin.vue.d.ts

@@ -0,0 +1,64 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    num: import("vue-demi").ComputedRef<number>;
+    localModel: import("vue-demi").Ref<string[]>;
+    getValue: (index: number) => string;
+    setValue: (index: number, event: InputEvent) => void;
+    onFocus: (event: InputEvent) => void;
+    onDelete: (event: InputEvent) => void;
+    onPaste: (event: ClipboardEvent) => void;
+    nextFocus: () => void;
+    prevFocus: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "clear")[], "update:modelValue" | "clear", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onClear?: (...args: any[]) => any;
+}, {
+    error: boolean;
+    length: string | number;
+    disabled: boolean;
+    modelValue: string;
+    readonly: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,274 @@
+<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="onClickLowerTrack" />
+      <!-- Active Track -->
+      <div
+        ref="track-active"
+        data-testid="track-active"
+        class="input-range__track input-range__track-active"
+        :style="upperStyle"
+        @click="onClickActiveTrack">
+        <div
+          v-show="multiple"
+          ref="thumb-start"
+          data-testid="thumb-start"
+          class="input-range__thumb input-range__thumb-start" />
+        <div
+          ref="thumb-end"
+          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="onClickUpperTrack" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  syncRef,
+  templateRef,
+  useElementBounding,
+  useToNumber
+} from "@vueuse/core";
+import { useClamp } from "@vueuse/math";
+import {
+  computed,
+  defineComponent,
+  ref,
+  toRef,
+  watch
+} from "vue-demi";
+import useDrag from "./utils/use-drag";
+export default defineComponent({
+  props: {
+    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
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: [
+    "change",
+    "update:modelValue",
+    "update:end",
+    "update:start"
+  ],
+  setup(props, { emit }) {
+    const track = templateRef("track");
+    const thumbStart = templateRef("thumb-start");
+    const thumbEnd = templateRef("thumb-end");
+    const min = useToNumber(toRef(props, "min"));
+    const max = useToNumber(toRef(props, "max"));
+    const step = useToNumber(toRef(props, "step"));
+    const localStart = ref(Array.isArray(props.modelValue) ? props.modelValue[0] : props.start ?? min.value);
+    const localEnd = ref(Array.isArray(props.modelValue) ? props.modelValue[1] : props.end ?? props.modelValue ?? max.value);
+    const minDrag = computed(() => props.multiple ? localStart.value + step.value : min.value);
+    const maxDrag = computed(() => props.multiple ? localEnd.value - step.value : max.value);
+    const start = useClamp(localStart.value, min, maxDrag);
+    const end = useClamp(localEnd.value, minDrag, max);
+    const { width, left } = useElementBounding(track);
+    const startValue = computed({
+      get() {
+        if (Array.isArray(props.modelValue))
+          return props.modelValue[0];
+        return props.start ?? min.value;
+      },
+      set(value) {
+        emit("update:start", value);
+      }
+    });
+    const endValue = computed({
+      get() {
+        if (Array.isArray(props.modelValue))
+          return props.modelValue[1];
+        if (Number.isFinite(props.modelValue))
+          return props.modelValue;
+        return props.end ?? max.value;
+      },
+      set(value) {
+        emit("update:end", value);
+      }
+    });
+    const startPercentage = computed(() => {
+      return (start.value - min.value) / (max.value - min.value) * 100;
+    });
+    const endPercentage = computed(() => {
+      return (end.value - min.value) / (max.value - min.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 * (max.value - min.value) + min.value;
+      const nearest = Math.round(value / step.value) * step.value;
+      return nearest;
+    }
+    function onClickLowerTrack(event) {
+      if (!props.disabled && !props.readonly)
+        start.value = getValue(event);
+    }
+    function onClickActiveTrack(event) {
+      if (!props.disabled && !props.readonly) {
+        const value = getValue(event);
+        if (props.multiple) {
+          const ds = Math.abs(value - start.value);
+          const de = Math.abs(value - end.value);
+          if (ds < de) {
+            start.value = value;
+            return;
+          }
+        }
+        end.value = value;
+      }
+    }
+    function onClickUpperTrack(event) {
+      if (!props.disabled && !props.readonly)
+        end.value = getValue(event);
+    }
+    useDrag(thumbStart, (event) => {
+      if (!props.disabled && !props.readonly)
+        start.value = getValue(event);
+    });
+    useDrag(thumbEnd, (event) => {
+      if (!props.disabled && !props.readonly)
+        end.value = getValue(event);
+    });
+    syncRef(start, startValue);
+    syncRef(end, endValue);
+    watch([start, end], ([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);
+      }
+    });
+    return {
+      classNames,
+      lowerStyle,
+      upperStyle,
+      onClickLowerTrack,
+      onClickActiveTrack,
+      onClickUpperTrack
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.input-range {
+  @apply py-2 w-full;
+
+  &__tracks {
+    @apply relative flex w-full bg-subtle cursor-pointer overflow-visible rounded;
+  }
+
+  &__track {
+    @apply h-2 rounded;
+
+    &-active {
+      @apply bg-accent-emphasis relative text-center;
+    }
+
+    &-upper {
+      @apply flex-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-gray-25;
+    @apply touch-none select-none;
+
+    &:hover,
+    &:active {
+      @apply ring ring-accent border-accent-emphasis;
+    }
+
+    &-start {
+      @apply -left-2;
+    }
+
+    &-end {
+      @apply -right-2;
+    }
+  }
+
+  &:disabled,
+  &--disabled {
+    @apply opacity-50 pointer-events-none;
+  }
+}
+</style>