@privyid/persona 1.1.1 → 1.2.0

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

@@ -38,220 +38,170 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   syncRef,
   useElementBounding,
-  useToNumber,
-} from '@vueuse/core'
-import { useClamp } from '@vueuse/math'
-import type {
-  PropType,
-  StyleValue,
-} from 'vue-demi'
+  useToNumber
+} from "@vueuse/core";
+import { useClamp } from "@vueuse/math";
 import {
   computed,
   ref,
   toRef,
-  watch,
-} from 'vue-demi'
-import useDrag from './utils/use-drag'
-
+  watch
+} from "vue-demi";
+import useDrag from "./utils/use-drag";
 const props = defineProps({
   modelValue: {
-    type   : [Number, Array] as PropType<number | [number, number]>,
-    default: undefined,
+    type: [Number, Array],
+    default: void 0
   },
   start: {
-    type   : Number,
-    default: undefined,
+    type: Number,
+    default: void 0
   },
   end: {
-    type   : Number,
-    default: undefined,
+    type: Number,
+    default: void 0
   },
   step: {
-    type   : [String, Number],
-    default: 1,
+    type: [String, Number],
+    default: 1
   },
   min: {
-    type   : [String, Number],
-    default: 0,
+    type: [String, Number],
+    default: 0
   },
   max: {
-    type   : [String, Number],
-    default: 100,
+    type: [String, Number],
+    default: 100
   },
   multiple: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   disabled: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   readonly: {
-    type   : Boolean,
-    default: false,
+    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)
-
+    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 () {
+  get() {
     if (Array.isArray(props.modelValue))
-      return props.modelValue[0]
-
-    return props.start ?? minimum.value
-  },
-  set (value: number) {
-    emit('update:start', value)
+      return props.modelValue[0];
+    return props.start ?? minimum.value;
   },
-})
-
+  set(value) {
+    emit("update:start", value);
+  }
+});
 const vEnd = computed({
-  get () {
+  get() {
     if (Array.isArray(props.modelValue))
-      return props.modelValue[1]
-
+      return props.modelValue[1];
     if (Number.isFinite(props.modelValue))
-      return props.modelValue
-
-    return props.end ?? maximum.value
-  },
-  set (value: number) {
-    emit('update:end', value)
+      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
-})
-
+  return (startValue.value - minimum.value) / (maximum.value - minimum.value) * 100;
+});
 const endPercentage = computed(() => {
-  return (endValue.value - minimum.value) / (maximum.value - minimum.value) * 100
-})
-
+  return (endValue.value - minimum.value) / (maximum.value - minimum.value) * 100;
+});
 const classNames = computed(() => {
-  const result: string[] = []
-
+  const result = [];
   if (props.disabled)
-    result.push('input-range--disabled')
-
+    result.push("input-range--disabled");
   if (props.readonly)
-    result.push('input-range--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
+    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: MouseEvent) {
+function onClickLowerTrack(event) {
   if (!props.disabled && !props.readonly)
-    startValue.value = getValue(event)
+    startValue.value = getValue(event);
 }
-
-function onClickActiveTrack (event: MouseEvent) {
+function onClickActiveTrack(event) {
   if (!props.disabled && !props.readonly) {
-    const value = getValue(event)
-
+    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
-       */
+      const ds = Math.abs(value - startValue.value);
+      const de = Math.abs(value - endValue.value);
       if (ds < de) {
-        startValue.value = value
-
-        return
+        startValue.value = value;
+        return;
       }
     }
-
-    endValue.value = value
+    endValue.value = value;
   }
 }
-
-function onClickUpperTrack (event: MouseEvent) {
+function onClickUpperTrack(event) {
   if (!props.disabled && !props.readonly)
-    endValue.value = getValue(event)
+    endValue.value = getValue(event);
 }
-
 useDrag(thumbStart, (event) => {
   if (!props.disabled && !props.readonly)
-    startValue.value = getValue(event)
-})
-
+    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 })
-
+    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
-
+  localStart.value = startVal;
+  localEnd.value = endVal;
   if (props.multiple) {
-    emit('update:modelValue', [startVal, endVal])
-    emit('change', [startVal, endVal])
+    emit("update:modelValue", [startVal, endVal]);
+    emit("change", [startVal, endVal]);
   } else {
-    emit('update:modelValue', endVal)
-    emit('change', endVal)
+    emit("update:modelValue", endVal);
+    emit("change", endVal);
   }
-})
+});
 </script>
 
 <style lang="postcss">

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

@@ -0,0 +1,106 @@
+import type { PropType } from 'vue-demi';
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").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-demi").ComponentOptionsMixin, import("vue-demi").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-demi").PublicProps, Readonly<import("vue-demi").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;
+    min: string | number;
+    step: string | number;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,8 @@
+import type { Ref } from 'vue-demi';
+type Handler = (event: {
+    pageX: number;
+}) => void;
+export declare function useDrag(el: Ref<HTMLElement>, handler: Handler): void;
+export declare function triggerDrag(el: HTMLElement, pageX: number): Promise<void>;
+export declare function resetHook(): Promise<void>;
+export {};

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

@@ -0,0 +1,20 @@
+import {
+  nextTick,
+  watch
+} from "vue-demi";
+const hook = /* @__PURE__ */ new Map();
+export function useDrag(el, handler) {
+  watch(el, (value) => {
+    if (value)
+      hook.set(value, handler);
+  }, { immediate: true });
+}
+export async function triggerDrag(el, pageX) {
+  const handler = hook.get(el);
+  if (handler)
+    handler({ pageX });
+  await nextTick();
+}
+export async function resetHook() {
+  hook.clear();
+}

package/dist/components/input-range/__mocks__/use-element-bounding.d.ts

@@ -0,0 +1,4 @@
+export declare function useElementBounding(): {
+    left: import("vue-demi").Ref<number, number>;
+    width: import("vue-demi").Ref<number, number>;
+};

package/dist/components/input-range/__mocks__/use-element-bounding.mjs

@@ -0,0 +1,7 @@
+import { ref } from "vue-demi";
+export function useElementBounding() {
+  return {
+    left: ref(0),
+    width: ref(100)
+  };
+}

package/dist/components/input-range/index.md

@@ -0,0 +1,191 @@
+---
+title: Input Range · Components
+description: Range input slider.
+---
+
+<script setup>
+  import pInputRange from './InputRange.vue'
+  import { ref } from 'vue-demi'
+
+  const result  = ref(50)
+  const result2 = ref([30, 70])
+  const start   = ref(0)
+  const end     = ref(100)
+</script>
+
+# Input Range
+
+> Range input slider.
+
+## Usage
+
+### Simple Usage
+
+<preview class="flex-col">
+  <p-input-range />
+</preview>
+
+```vue
+<template>
+  <p-input-range />
+</template>
+```
+
+### With min, max & step
+
+<preview class="flex-col">
+  <p-input-range min="0" max="100" step="25" />
+</preview>
+
+```vue
+<template>
+  <p-input-range min="0" max="100" step="25" />
+</template>
+```
+
+
+## Multiple Mode
+
+<preview class="flex-col">
+  <p-input-range multiple />
+</preview>
+
+```vue
+<template>
+  <p-input-range multiple />
+</template>
+```
+
+## Disabled State
+
+<preview class="flex-col">
+  <p-input-range disabled />
+</preview>
+
+```vue
+<template>
+  <p-input-range disabled />
+</template>
+```
+
+## Readonly State
+
+<preview class="flex-col">
+  <p-input-range readonly />
+</preview>
+
+```vue
+<template>
+  <p-input-range readonly />
+</template>
+```
+
+## Binding v-model
+
+<preview class="flex-col">
+  <p-input-range v-model="result" />
+</preview>
+
+**result:**
+
+<pre class="truncate"><code>{{ result ?? '-' }}</code></pre>
+
+```vue
+<template>
+  <p-input-range v-model="result" />
+</template>
+```
+
+### v-model in multiple mode
+
+There are 2 ways to use v-model in `multiple` mode.
+
+#### 1. Using basic v-model
+
+You can use basic `v-model` to handle multiple range input, The value will be tuple of number, `[start, end]`
+
+<preview class="flex-col">
+  <p-input-range v-model="result2" multiple />
+</preview>
+
+**result:**
+
+<pre class="truncate"><code>{{ result2 ?? '-' }}</code></pre>
+
+```vue
+<template>
+  <p-input-range v-model="result" multiple />
+</template>
+```
+
+#### 2. using v-model:start and v-model:end
+
+You can specific binding the value using `v-model:start` or `v-model:end`
+
+<preview class="flex-col">
+  <p-input-range
+    v-model:start="start"
+    v-model:end="end"
+    multiple />
+</preview>
+
+**start:**
+
+<pre class="truncate"><code>{{ start ?? '-' }}</code></pre>
+
+**end:**
+
+<pre class="truncate"><code>{{ end ?? '-' }}</code></pre>
+
+```vue
+<template>
+  <p-input-range
+    v-model:start="start"
+    v-model:end="end"
+    multiple />
+</template>
+```
+
+## API
+
+### Props
+
+| Props        |   Type    | Default | Description            |
+|--------------|:---------:|:-------:|------------------------|
+| `min`        | `Number`  |   `0`   | Lowest value in range  |
+| `max`        | `Number`  |  `100`  | Highest value in range |
+| `step`       | `Number`  |   `1`   | Step movement          |
+| `multiple`   | `Boolean` | `false` | Enable multiple mode   |
+| `disabled`   | `Boolean` | `false` | Disabled state         |
+| `readonly`   | `Boolean` | `false` | Readonly state         |
+| `error`      | `Boolean` | `false` | Error state            |
+| `modelValue` | `Number`  |   `-`   | v-model value          |
+| `start`      | `Number`  |   `-`   | v-model:start value    |
+| `end`        | `Number`  |   `-`   | v-model:end value      |
+
+### Slots
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" class="text-center">There no slots here</td>
+    </tr>
+  </tbody>
+</table>
+
+### Events
+
+| Name     | Arguments                      | Description              |
+|----------|--------------------------------|--------------------------|
+| `change` | `Number` \| `[Number, Number]` | Event when value changed |
+
+## See Also
+
+- [Input](/components/input/)
+- [Strengthbar](/components/strengthbar/)

package/dist/components/label/Label.spec.d.ts

@@ -0,0 +1 @@
+export {};