@privyid/persona 0.17.0 → 0.18.0

package/dist/components/filterbar/pinned/PinnedDate.vue

@@ -9,12 +9,9 @@
     <template #button-content>
       {{ value ? value : schema.label }}
     </template>
-    <Subheading
-      class="px-4 pt-4 pb-1"
-      weight="medium"
-      overline>
+    <DropdownHeader>
       {{ schema.label }}
-    </Subheading>
+    </DropdownHeader>
 
     <Calendar
       v-model="model"
@@ -31,15 +28,15 @@ import {
   defineComponent,
   ref
 } from "vue-demi";
-import Subheading from "../../subheading/Subheading.vue";
 import Calendar from "../../calendar/Calendar.vue";
 import Dropdown from "../../dropdown/Dropdown.vue";
+import DropdownHeader from "../../dropdown/DropdownHeader.vue";
 import { useVModel } from "../../input";
 import { isDate, format as formatDate } from "date-fns";
 export default defineComponent({
   components: {
-    Subheading,
     Dropdown,
+    DropdownHeader,
     Calendar
   },
   props: {

package/dist/components/filterbar/pinned/PinnedMultiselect.vue

@@ -22,12 +22,9 @@
       </template>
     </template>
 
-    <Subheading
-      class="px-4 pt-4 pb-1"
-      weight="medium"
-      overline>
+    <DropdownHeader>
       {{ schema.label }}
-    </Subheading>
+    </DropdownHeader>
     <template
       v-for="(item, i) in items"
       :key="i">
@@ -48,8 +45,8 @@ import {
   ref
 } from "vue-demi";
 import Badge from "../../badge/Badge.vue";
-import Subheading from "../../subheading/Subheading.vue";
 import Dropdown from "../../dropdown/Dropdown.vue";
+import DropdownHeader from "../../dropdown/DropdownHeader.vue";
 import Checkbox from "../../checkbox/Checkbox.vue";
 import { useOptionsProp } from "../../select/adapter/adapter";
 import { useVModel } from "../../input";
@@ -57,8 +54,8 @@ import { isEqual } from "../../utils/value";
 export default defineComponent({
   components: {
     Badge,
-    Subheading,
     Dropdown,
+    DropdownHeader,
     Checkbox
   },
   props: {

package/dist/components/filterbar/pinned/PinnedSelect.vue

@@ -10,12 +10,10 @@
     <template #button-content>
       {{ selected ? selected.text : schema.label }}
     </template>
-    <Subheading
-      class="px-4 pt-4 pb-1"
-      weight="medium"
-      overline>
+    <DropdownHeader>
       {{ schema.label }}
-    </Subheading>
+    </DropdownHeader>
+
     <template
       v-for="(item, i) in items"
       :key="i">
@@ -36,16 +34,16 @@ import {
   defineComponent,
   ref
 } from "vue-demi";
-import Subheading from "../../subheading/Subheading.vue";
 import Dropdown from "../../dropdown/Dropdown.vue";
+import DropdownHeader from "../../dropdown/DropdownHeader.vue";
 import Radio from "../../radio/Radio.vue";
 import { useOptionsProp } from "../../select/adapter/adapter";
 import { useVModel } from "../../input";
 import { isEqual } from "../../utils/value";
 export default defineComponent({
   components: {
-    Subheading,
     Dropdown,
+    DropdownHeader,
     Radio
   },
   props: {

package/dist/components/form-group/FormGroup.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import IconInfo from "@carbon/icons-vue/lib/information--filled/16";
+import IconInfo from "@privyid/persona-icon/vue/information-circle-solid/20.vue";
 import pCaption from "../caption/Caption.vue";
 import { pTooltip } from "../tooltip";
 import { computed, defineComponent } from "vue-demi";

package/dist/components/global/router.d.ts

@@ -1,3 +1,4 @@
+import type { RouteLocationRaw } from 'vue-router';
 /**
  * Universal router which compatible in many enviroment
  */
@@ -5,7 +6,7 @@ interface RouterCompat {
     /**
      * redirect to URL
      */
-    toURL: (url: string) => unknown | Promise<unknown>;
+    toURL: (url: RouteLocationRaw) => unknown | Promise<unknown>;
     /**
       * Get current URL
       */

package/dist/components/input/Input.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="input"
+    :class="containerClass"
     data-testid="input-container">
     <span
       v-if="$slots.prepend"
@@ -14,7 +15,8 @@
       :disabled="disabled"
       :readonly="readonly"
       :class="classNames"
-      v-bind="$attrs">
+      v-bind="$attrs"
+      @beforeinput="checkOnInput(accept, $event)">
     <IconClear
       v-show="(clearable && model)"
       class="input__clear"
@@ -35,8 +37,11 @@ import {
   inject
 } from "vue-demi";
 import { useVModel } from ".";
-import IconClear from "@carbon/icons-vue/lib/close--filled/16";
+import IconClear from "@privyid/persona-icon/vue/close-circle-solid/20.vue";
 import { INPUTGROUP_SETTING } from "../input-group";
+import {
+  checkOnInput
+} from "./utils/accept";
 export default defineComponent({
   components: { IconClear },
   inheritAttrs: false,
@@ -64,6 +69,18 @@ export default defineComponent({
     clearable: {
       type: Boolean,
       default: false
+    },
+    containerClass: {
+      type: [
+        String,
+        Array,
+        Object
+      ],
+      default: void 0
+    },
+    accept: {
+      type: String,
+      default: void 0
     }
   },
   models: {
@@ -102,7 +119,8 @@ export default defineComponent({
     return {
       classNames,
       model,
-      clear
+      clear,
+      checkOnInput
     };
   }
 });
@@ -155,7 +173,7 @@ export default defineComponent({
   }
 
   .input__clear {
-    @apply text-default/30 cursor-pointer hover:text-danger z-1;
+    @apply text-default/30 cursor-pointer hover:text-danger z-[2];
     @apply dark:text-dark-default/30 hover:dark:text-dark-danger;
   }
 

package/dist/components/input/Input.vue.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue-demi';
 import { SizeVariant } from '../button';
+import { AcceptVariant, checkOnInput } from './utils/accept';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: (NumberConstructor | StringConstructor)[];
@@ -25,10 +26,19 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    containerClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
     model: import("vue-demi").Ref<string | number | undefined>;
     clear: (event: MouseEvent) => void;
+    checkOnInput: typeof checkOnInput;
 }, 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: (NumberConstructor | StringConstructor)[];
@@ -54,6 +64,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    containerClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
@@ -63,6 +81,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     modelValue: string | number;
     disabled: boolean;
     readonly: boolean;
+    accept: AcceptVariant;
     clearable: boolean;
+    containerClass: string | Record<string, any> | unknown[];
 }, {}>;
 export default _default;

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

@@ -3,3 +3,4 @@ export interface InputProps<V = string> {
     modelValue: V;
 }
 export declare function useVModel<V>(props: InputProps<V>): Ref<V>;
+export { type AcceptVariant, isAccepted, removeUnaccepted, checkOnInput, } from './utils/accept';

package/dist/components/input/index.mjs

@@ -18,3 +18,8 @@ export function useVModel(props) {
   syncRef(localValue, model, { immediate: false });
   return localValue;
 }
+export {
+  isAccepted,
+  removeUnaccepted,
+  checkOnInput
+} from "./utils/accept.mjs";

package/dist/components/input/utils/accept.d.ts

@@ -0,0 +1,26 @@
+import { LiteralUnion } from 'type-fest';
+export declare const AcceptPresets: {
+    readonly num: string;
+    readonly numeric: string;
+    readonly digit: string;
+    readonly alpha: string;
+    readonly 'alpha-num': string;
+    readonly 'alpha-num-space': string;
+    readonly 'alpha-num-space-symbol': string;
+    readonly 'alpha-numeric': string;
+    readonly 'alpha-numeric-space': string;
+    readonly 'alpha-numeric-space-symbol': string;
+    readonly 'alpha-space': string;
+    readonly 'alpha-space-symbol': string;
+    readonly 'num-space': string;
+    readonly 'num-space-symbol': string;
+    readonly 'numeric-space': string;
+    readonly 'numeric-space-symbol': string;
+    readonly 'non-numeric': string;
+    readonly 'non-alpha': string;
+    readonly text: string;
+};
+export type AcceptVariant = LiteralUnion<keyof typeof AcceptPresets, string>;
+export declare function isAccepted(accept: AcceptVariant | undefined, text: string): boolean;
+export declare function removeUnaccepted(accept: AcceptVariant | undefined, text: string): string;
+export declare function checkOnInput(accept: AcceptVariant | undefined, event: Event): void;

package/dist/components/input/utils/accept.mjs

@@ -0,0 +1,81 @@
+const ALPHA = "A-Za-z";
+const NUMERIC = "\\d";
+const SPACE = "\\s";
+const SYMBOL = "!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+const REGEX_ALPHA = `${ALPHA}`;
+const REGEX_NUMERIC = `${NUMERIC}`;
+const REGEX_ALPHA_NUMERIC = `${ALPHA}${NUMERIC}`;
+const REGEX_ALPHA_NUMERIC_SPACE = `${ALPHA}${NUMERIC}${SPACE}`;
+const REGEX_ALPHA_NUMERIC_SPACE_SYMBOL = `${ALPHA}${NUMERIC}${SPACE}${SYMBOL}`;
+const REGEX_ALPHA_SPACE = `${ALPHA}${SPACE}`;
+const REGEX_ALPHA_SPACE_SYMBOL = `${ALPHA}${SPACE}${SYMBOL}`;
+const REGEX_NUMERIC_SPACE = `${NUMERIC}${SPACE}`;
+const REGEX_NUMERIC_SPACE_SYMBOL = `${NUMERIC}${SPACE}${SYMBOL}`;
+export const AcceptPresets = {
+  "num": REGEX_NUMERIC,
+  "numeric": REGEX_NUMERIC,
+  "digit": REGEX_NUMERIC,
+  "alpha": REGEX_ALPHA,
+  "alpha-num": REGEX_ALPHA_NUMERIC,
+  "alpha-num-space": REGEX_ALPHA_NUMERIC_SPACE,
+  "alpha-num-space-symbol": REGEX_ALPHA_NUMERIC_SPACE_SYMBOL,
+  "alpha-numeric": REGEX_ALPHA_NUMERIC,
+  "alpha-numeric-space": REGEX_ALPHA_NUMERIC_SPACE,
+  "alpha-numeric-space-symbol": REGEX_ALPHA_NUMERIC_SPACE_SYMBOL,
+  "alpha-space": REGEX_ALPHA_SPACE,
+  "alpha-space-symbol": REGEX_ALPHA_SPACE_SYMBOL,
+  "num-space": REGEX_NUMERIC_SPACE,
+  "num-space-symbol": REGEX_NUMERIC_SPACE_SYMBOL,
+  "numeric-space": REGEX_NUMERIC_SPACE,
+  "numeric-space-symbol": REGEX_NUMERIC_SPACE_SYMBOL,
+  "non-numeric": REGEX_ALPHA_SPACE_SYMBOL,
+  "non-alpha": REGEX_NUMERIC_SPACE_SYMBOL,
+  "text": REGEX_ALPHA_NUMERIC_SPACE_SYMBOL
+};
+export function isAccepted(accept, text) {
+  if (!accept)
+    return true;
+  try {
+    const regexStr = AcceptPresets[accept.toLowerCase()] ?? accept;
+    const regex = new RegExp(`^[${regexStr}]+$`);
+    return regex.test(text);
+  } catch (error) {
+    if (import.meta.env.DEV)
+      console.error(error);
+    return true;
+  }
+}
+export function removeUnaccepted(accept, text) {
+  if (!accept)
+    return text;
+  try {
+    const regexStr = AcceptPresets[accept.toLowerCase()] ?? accept;
+    const regex = new RegExp(`[^${regexStr}]+`, "g");
+    return text.replaceAll(regex, "");
+  } catch (error) {
+    if (import.meta.env.DEV)
+      console.error(error);
+    return text;
+  }
+}
+export function checkOnInput(accept, event) {
+  if (event.data && !isAccepted(accept, event.data)) {
+    event.preventDefault();
+    if (event.inputType === "insertFromPaste") {
+      const target = event.target;
+      const oldValue = target.value;
+      const value = removeUnaccepted(accept, event.data);
+      const ss = target.selectionStart;
+      const se = target.selectionEnd;
+      const nextValue = `${oldValue.slice(0, ss)}${value}${oldValue.slice(se)}`;
+      try {
+        target.value = nextValue;
+        target.dispatchEvent(new InputEvent("input"));
+        target.setSelectionRange(value.length + ss, value.length + ss);
+      } catch (error) {
+        if (import.meta.env.DEV)
+          console.error(error);
+      }
+    }
+  }
+}

package/dist/components/input-file/InputFile.vue.d.ts

@@ -124,8 +124,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     disabled: boolean;
     readonly: boolean;
     modelModifiers: ModelModifier;
-    multiple: boolean | MultipleType;
     placeholder: string;
+    multiple: boolean | MultipleType;
     maxlength: string | number;
     accept: string;
     clearOnCancel: boolean;

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

@@ -19,7 +19,10 @@
 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 { defineComponent, ref } from "vue-demi";
+import {
+  ref,
+  defineComponent
+} from "vue-demi";
 export default defineComponent({
   components: {
     pInput,

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

@@ -1,5 +1,9 @@
-declare const _default: import("vue-demi").DefineComponent<{}, {
-    isShow: import("vue-demi").Ref<boolean>;
+import { Ref } from 'vue-demi';
+type Bindings = {
+    isShow: 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<{}>>, {}, {}>;
+};
+declare const _default: import("vue-demi").DefineComponent<any, Bindings, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<any>, {} | {
+    [x: string]: any;
+}, {}>;
 export default _default;

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

@@ -10,16 +10,15 @@
       maxlength="1"
       v-bind="$attrs"
       :model-value="getValue(i - 1)"
+      :size="size"
       :clearable="false"
       :readonly="readonly"
       :disabled="disabled"
       :error="error"
-      @input="setValue(i - 1, $event)"
-      @focus.passive="onFocus"
-      @keyup.delete.stop.prevent="onDelete"
+      @keydown="onKeyDown($event)"
+      @beforeinput.prevent="setValue(i - 1, $event)"
       @keyup.left.stop.prevent="prevFocus"
-      @keyup.right.stop.prevent="nextFocus"
-      @paste.passive="onPaste" />
+      @keyup.right.stop.prevent="nextFocus" />
   </div>
 </template>
 
@@ -37,6 +36,11 @@ import {
   useToNumber
 } from "@vueuse/core";
 import { useFocus } from "../dropdown/utils/use-focus";
+import {
+  isAccepted,
+  removeUnaccepted
+} from "../input";
+import { toArray } from ".";
 export default defineComponent({
   components: { pInput },
   inheritAttrs: false,
@@ -45,6 +49,10 @@ export default defineComponent({
       type: String,
       default: void 0
     },
+    size: {
+      type: String,
+      default: "md"
+    },
     length: {
       type: [Number, String],
       default: 5
@@ -60,17 +68,21 @@ export default defineComponent({
     error: {
       type: Boolean,
       default: false
+    },
+    accept: {
+      type: String,
+      default: void 0
     }
   },
   models: {
     prop: "modelValue",
     event: "update:modelValue"
   },
-  emits: ["update:modelValue", "clear"],
+  emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const root = templateRef("root");
     const num = useToNumber(toRef(props, "length"));
-    const localModel = ref([...props.modelValue?.padEnd(num.value) ?? ""].slice(0, num.value));
+    const localModel = ref(toArray(props.modelValue, num.value));
     const classNames = computed(() => {
       const result = [];
       if (props.disabled)
@@ -84,37 +96,42 @@ export default defineComponent({
     const { next: nextFocus, prev: prevFocus } = useFocus(root, false);
     const model = computed({
       get() {
-        return [...props.modelValue?.padEnd(num.value) ?? ""].slice(0, num.value);
+        return toArray(props.modelValue, num.value);
       },
       set(value) {
         const text = value.map((val) => val || " ").join("").trimEnd();
+        emit("change", text);
         emit("update:modelValue", text);
       }
     });
-    syncRef(localModel, model, { deep: true });
+    syncRef(localModel, model, { deep: true, immediate: false });
     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();
+      if (event.inputType === "insertFromPaste")
+        localModel.value = toArray(removeUnaccepted(props.accept, event.data), num.value);
+      else if (!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 onFocus(event) {
-      event.target.select();
-    }
-    function onDelete(event) {
-      if (root.value && !event.target.value.trim())
-        prevFocus();
-    }
-    function onPaste(event) {
-      localModel.value = [...event.clipboardData.getData("Text")].slice(0, num.value);
+    function onKeyDown(event) {
+      const target = event.target;
+      if (props.readonly || props.disabled)
+        return;
+      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" }));
+      }
     }
     return {
       classNames,
@@ -122,11 +139,9 @@ export default defineComponent({
       localModel,
       getValue,
       setValue,
-      onFocus,
-      onDelete,
-      onPaste,
       nextFocus,
-      prevFocus
+      prevFocus,
+      onKeyDown
     };
   }
 });

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

@@ -1,8 +1,15 @@
+import { PropType } from 'vue-demi';
+import { AcceptVariant } from '../input';
+import { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: StringConstructor;
         default: undefined;
     };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
     length: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -19,22 +26,28 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
 }, {
     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<{
+    onKeyDown: (event: KeyboardEvent) => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
         default: undefined;
     };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
     length: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -51,14 +64,20 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
 }>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onClear?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
     length: string | number;
+    size: SizeVariant;
     modelValue: string;
     disabled: boolean;
     readonly: boolean;
+    accept: AcceptVariant;
 }, {}>;
 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 [...(text ?? "").padEnd(length)].slice(0, length);
+}

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

@@ -12,14 +12,14 @@
         data-testid="track-lower"
         class="input-range__track input-range__track-lower"
         :style="lowerStyle"
-        @click="onClickLowerTrack" />
+        @click.capture="onClickLowerTrack" />
       <!-- Active Track -->
       <div
         ref="track-active"
         data-testid="track-active"
         class="input-range__track input-range__track-active"
         :style="upperStyle"
-        @click="onClickActiveTrack">
+        @click.capture="onClickActiveTrack">
         <div
           v-show="multiple"
           ref="thumb-start"
@@ -34,7 +34,7 @@
       <div
         data-testid="track-upper"
         class="input-range__track input-range__track-upper"
-        @click="onClickUpperTrack" />
+        @click.capture="onClickUpperTrack" />
     </div>
   </div>
 </template>
@@ -203,8 +203,8 @@ export default defineComponent({
       if (!props.disabled && !props.readonly)
         end.value = getValue(event);
     });
-    syncRef(start, vStart);
-    syncRef(end, vEnd);
+    syncRef(start, vStart, { immediate: false });
+    syncRef(end, vEnd, { immediate: false });
     watch([start, end], ([startVal, endVal]) => {
       localStart.value = startVal;
       localEnd.value = endVal;