@onereach/ui-components 10.3.4-beta.4324.0 → 10.3.4-beta.4327.0

package/dist/bundled/v2/components/OrSelectV3/OrSelect.js

@@ -1,12 +1,11 @@
 import { defineComponent, ref, toRefs, computed, watch, getCurrentInstance } from 'vue-demi';
-import { i as useFocus } from '../../index-fe85dfd9.js';
+import { castToMultipleValue } from './utils/castToMultipleValue.js';
+import { h as useFocus } from '../../index-13c63b4c.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import __vue_component__$5 from '../OrTagsV3/OrTags.js';
-import { isEqual } from '../../utils/isEqual.js';
 import { TagsOverflow } from '../OrTagsV3/props.js';
-import { isNil } from '../../utils/isNil.js';
-import { toArray } from '../../utils/toArray.js';
+import { isEqual } from '../../utils/isEqual.js';
 import { isEmpty } from '../../utils/isEmpty.js';
 import { Select, SelectControl, SelectSearchControl, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './styles.js';
 import __vue_component__$6 from '../OrCheckboxV3/OrCheckbox.js';
@@ -15,18 +14,15 @@ import __vue_component__$8 from '../OrExpansionPanelV3/OrExpansionPanel.js';
 import __vue_component__$9 from '../OrHintV3/OrHint.js';
 import __vue_component__$a from '../OrIconV3/OrIcon.js';
 import __vue_component__$b from '../OrIconButtonV3/OrIconButton.js';
-import { _ as __vue_component__$c } from '../../OrInput-9b115866.js';
+import { _ as __vue_component__$c } from '../../OrInput-436fb208.js';
 import __vue_component__$d from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$e from '../OrLabelV3/OrLabel.js';
 import __vue_component__$f from '../OrMenuItemV3/OrMenuItem.js';
 import __vue_component__$g from '../OrPopoverV3/OrPopover.js';
-import { searchItemsByLabel } from '../../helpers/searchItemsByLabel.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
 import useResponsive from '../../hooks/useResponsive/useResponsive.js';
-import { include } from '../../utils/include.js';
-import { exclude } from '../../utils/exclude.js';
 
 const SelectControlInput = [
 // Base
@@ -249,12 +245,12 @@ var script$2 = defineComponent({
       default: ''
     },
     model: {
-      type: undefined,
-      default: []
+      type: [Object, String, Number, Array],
+      default: () => []
     },
     options: {
       type: Array,
-      default: []
+      default: () => []
     },
     overflow: {
       type: String,
@@ -262,7 +258,7 @@ var script$2 = defineComponent({
     },
     placeholder: {
       type: String,
-      default: undefined
+      default: ''
     },
     readonly: {
       type: Boolean,
@@ -304,7 +300,7 @@ var script$2 = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-select-multiple-control-v3', ...SelectMultipleControlRoot]);
     // Computed
-    const value = computed(() => isNil(model.value) ? [] : toArray(model.value));
+    const value = computed(() => castToMultipleValue(model.value));
     const isEmpty = computed(() => value.value.length === 0);
     const selection = computed(() => {
       if (model.value === undefined || model.value === null) {
@@ -459,16 +455,16 @@ var script$1 = defineComponent({
       default: ''
     },
     model: {
-      type: undefined,
+      type: [Object, String, Number, Array],
       default: undefined
     },
     options: {
       type: Array,
-      default: []
+      default: () => []
     },
     placeholder: {
       type: String,
-      default: undefined
+      default: ''
     },
     disabled: {
       type: Boolean,
@@ -612,26 +608,22 @@ var script = defineComponent({
     event: 'update:modelValue'
   },
   props: {
-    modelValue: {
-      type: undefined,
-      default: undefined
-    },
     options: {
       type: Array,
-      default: []
+      default: () => []
     },
     searchOptions: {
       type: Array,
-      default: []
+      default: () => []
+    },
+    modelValue: {
+      type: [Object, String, Number, Array],
+      default: undefined
     },
     multiple: {
       type: Boolean,
       default: false
     },
-    overflow: {
-      type: String,
-      default: () => TagsOverflow.Hidden
-    },
     size: {
       type: String,
       default: () => InputBoxSize.M
@@ -674,7 +666,14 @@ var script = defineComponent({
     },
     searchFunction: {
       type: Function,
-      default: searchItemsByLabel
+      default: async (searchText, options) => {
+        return options.filter(_ref => {
+          let {
+            label
+          } = _ref;
+          return label.toLowerCase().includes(searchText.toLowerCase());
+        });
+      }
     },
     groupByFunction: {
       type: Function,
@@ -683,6 +682,10 @@ var script = defineComponent({
     externalControl: {
       type: Boolean,
       default: false
+    },
+    overflow: {
+      type: String,
+      default: () => TagsOverflow.Hidden
     }
   },
   emits: ['update:modelValue', 'focus', 'blur', 'search'],
@@ -750,8 +753,8 @@ var script = defineComponent({
       return props.externalControl ? props.searchOptions : internalSearchOptions.value;
     });
     const searchText = ref('');
-    watch([() => props.externalControl, searchText, () => props.options], async _ref => {
-      let [externalControl, searchText, options] = _ref;
+    watch([() => props.externalControl, searchText, () => props.options], async _ref2 => {
+      let [externalControl, searchText, options] = _ref2;
       if (externalControl) {
         context.emit('search', searchText);
       } else {
@@ -812,31 +815,26 @@ var script = defineComponent({
         }
       }
     }
-    function selectOption(item) {
-      if (props.multiple) {
-        proxyModelValue.value = include(item.value, toArray(proxyModelValue.value));
-      } else {
-        proxyModelValue.value = item.value;
-      }
-    }
-    function deselectOption(item) {
-      if (props.multiple) {
-        proxyModelValue.value = exclude(item.value, toArray(proxyModelValue.value));
-      } else {
-        proxyModelValue.value = null;
+    function deselect(option) {
+      const modelValue = proxyModelValue.value;
+      if (Array.isArray(modelValue)) {
+        proxyModelValue.value = modelValue.filter(value => value !== option);
       }
     }
-    function toggleOption(item) {
-      if (props.multiple) {
-        const model = toArray(proxyModelValue.value);
-        if (!model.includes(item.value)) {
-          proxyModelValue.value = include(item.value, model);
+    function toggleOption(option) {
+      const modelValue = proxyModelValue.value;
+      if (multiple.value) {
+        if (modelValue && Array.isArray(modelValue) && modelValue.includes(option)) {
+          deselect(option);
         } else {
-          proxyModelValue.value = exclude(item.value, model);
+          proxyModelValue.value = [...castToMultipleValue(modelValue), option];
         }
       } else {
-        proxyModelValue.value = proxyModelValue.value !== item.value ? item.value : null;
+        proxyModelValue.value = option;
       }
+      clearSearchControl();
+    }
+    function clearSearchControl() {
       searchText.value = '';
     }
     // Utils
@@ -873,9 +871,9 @@ var script = defineComponent({
       toggle,
       close,
       open,
-      selectOption,
-      deselectOption,
+      deselect,
       toggleOption,
+      clearSearchControl,
       isDesktop,
       isMobile
     };
@@ -960,9 +958,7 @@ var __vue_render__ = function () {
         "is-open": _vm.popoverState === 'open'
       },
       on: {
-        "reset": function ($event) {
-          return _vm.deselectOption($event);
-        }
+        "reset": _vm.deselect
       },
       scopedSlots: _vm._u([{
         key: "tag",
@@ -1091,7 +1087,7 @@ var __vue_render__ = function () {
         on: {
           "click": function ($event) {
             $event.stopPropagation();
-            return _vm.toggleOption(option);
+            return _vm.toggleOption(option.value);
           }
         }
       }, [_vm._t("optionTemplate", function () {
@@ -1111,7 +1107,7 @@ var __vue_render__ = function () {
       on: {
         "click": function ($event) {
           $event.stopPropagation();
-          !option.disabled && _vm.toggleOption(option);
+          !option.disabled && _vm.toggleOption(option.value);
         }
       }
     }, [_c('OrCheckbox', {
@@ -1124,7 +1120,7 @@ var __vue_render__ = function () {
     }, [_c('div', {
       on: {
         "click": function ($event) {
-          !option.disabled && _vm.toggleOption(option);
+          !option.disabled && _vm.toggleOption(option.value);
         }
       }
     }, [_vm._t("optionTemplate", function () {
@@ -1144,7 +1140,7 @@ var __vue_render__ = function () {
       on: {
         "click": function ($event) {
           $event.stopPropagation();
-          _vm.toggleOption(option);
+          _vm.toggleOption(option.value);
           _vm.close();
         }
       }
@@ -1160,29 +1156,33 @@ var __vue_render__ = function () {
     return [_vm._v("\n            No results\n          ")];
   }, {
     "searchText": _vm.searchText
-  })], 2)]], 2)], 1), _vm._v(" "), _vm.$slots.hint || _vm.hint ? [_c('OrHint', {
+  })], 2)]], 2)], 1), _vm._v(" "), _c('div', {
     directives: [{
       name: "show",
       rawName: "v-show",
       value: !_vm.error,
       expression: "!error"
     }],
+    class: ['contents']
+  }, [_vm.$slots.hint || _vm.hint ? [_c('OrHint', {
     attrs: {
       "disabled": _vm.disabled
     }
   }, [_vm._t("hint", function () {
-    return [_vm._v("\n        " + _vm._s(_vm.hint) + "\n      ")];
-  })], 2)] : _vm._e(), _vm._v(" "), _c('OrError', {
+    return [_vm._v("\n          " + _vm._s(_vm.hint) + "\n        ")];
+  })], 2)] : _vm._e()], 2), _vm._v(" "), _c('div', {
     directives: [{
       name: "show",
       rawName: "v-show",
       value: typeof _vm.error === 'string' && _vm.error.length > 0,
       expression: "typeof error === 'string' && error.length > 0"
     }],
+    class: ['contents']
+  }, [_c('OrError', {
     attrs: {
       "disabled": _vm.disabled
     }
-  }, [_vm._v("\n    " + _vm._s(_vm.error) + "\n  ")])], 2);
+  }, [_vm._v("\n      " + _vm._s(_vm.error) + "\n    ")])], 1)], 2);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrSelectV3/OrSelect.vue.d.ts

@@ -1,8 +1,7 @@
 import { PropType } from 'vue-demi';
-import { GroupFunction, SearchFunction } from '../../types';
 import { InputBoxSize } from '../or-input-box-v3';
 import { TagsOverflow } from '../or-tags-v3';
-import { SelectItem, SelectModelValue } from './types';
+import { RawValue, SelectGroupByFunction, SelectOption, SelectSearchFunction, SelectValue } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     inputBox: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
@@ -37,47 +36,43 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlId: import("@vue/composition-api").Ref<string>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<SelectModelValue>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<SelectValue>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     showClear: import("@vue/composition-api").ComputedRef<boolean>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
+        value: RawValue;
         label: string;
-        value: import("./types").SelectItemValue;
         disabled?: boolean | undefined;
     }[]>;
-    resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectItem[]>;
-    groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectItem[]>>;
+    resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
+    groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectOption[]>>;
     toggle: () => void;
     close: () => void;
     open: () => void;
-    selectOption: (item: SelectItem) => void;
-    deselectOption: (item: SelectItem) => void;
-    toggleOption: (item: SelectItem) => void;
+    deselect: (option: RawValue) => void;
+    toggleOption: (option: RawValue) => void;
+    clearSearchControl: () => void;
     isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
     isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
-    modelValue: {
-        type: PropType<SelectModelValue>;
-        default: undefined;
-    };
     options: {
-        type: PropType<SelectItem[]>;
-        default: SelectItem[];
+        type: PropType<SelectOption[]>;
+        default: () => never[];
     };
     searchOptions: {
-        type: PropType<SelectItem[]>;
-        default: SelectItem[];
+        type: PropType<SelectOption[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: PropType<SelectValue>;
+        default: undefined;
     };
     multiple: {
         type: BooleanConstructor;
         default: boolean;
     };
-    overflow: {
-        type: PropType<"wrap" | "scroll" | "hidden">;
-        default: () => TagsOverflow.Hidden;
-    };
     size: {
         type: PropType<"m" | "s">;
         default: () => InputBoxSize.M;
@@ -119,38 +114,38 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: boolean;
     };
     searchFunction: {
-        type: PropType<SearchFunction<SelectItem>>;
-        default: SearchFunction<SelectItem>;
+        type: PropType<SelectSearchFunction>;
+        default: SelectSearchFunction;
     };
     groupByFunction: {
-        type: PropType<GroupFunction<SelectItem>>;
+        type: PropType<SelectGroupByFunction>;
         default: undefined;
     };
     externalControl: {
         type: BooleanConstructor;
         default: boolean;
     };
-}, import("@vue/composition-api").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<SelectModelValue>;
-        default: undefined;
+    overflow: {
+        type: PropType<"wrap" | "scroll" | "hidden">;
+        default: () => TagsOverflow.Hidden;
     };
+}, import("@vue/composition-api").ExtractPropTypes<{
     options: {
-        type: PropType<SelectItem[]>;
-        default: SelectItem[];
+        type: PropType<SelectOption[]>;
+        default: () => never[];
     };
     searchOptions: {
-        type: PropType<SelectItem[]>;
-        default: SelectItem[];
+        type: PropType<SelectOption[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: PropType<SelectValue>;
+        default: undefined;
     };
     multiple: {
         type: BooleanConstructor;
         default: boolean;
     };
-    overflow: {
-        type: PropType<"wrap" | "scroll" | "hidden">;
-        default: () => TagsOverflow.Hidden;
-    };
     size: {
         type: PropType<"m" | "s">;
         default: () => InputBoxSize.M;
@@ -192,25 +187,28 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: boolean;
     };
     searchFunction: {
-        type: PropType<SearchFunction<SelectItem>>;
-        default: SearchFunction<SelectItem>;
+        type: PropType<SelectSearchFunction>;
+        default: SelectSearchFunction;
     };
     groupByFunction: {
-        type: PropType<GroupFunction<SelectItem>>;
+        type: PropType<SelectGroupByFunction>;
         default: undefined;
     };
     externalControl: {
         type: BooleanConstructor;
         default: boolean;
     };
+    overflow: {
+        type: PropType<"wrap" | "scroll" | "hidden">;
+        default: () => TagsOverflow.Hidden;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    modelValue: SelectModelValue;
-    options: SelectItem[];
-    searchOptions: SelectItem[];
+    modelValue: SelectValue;
+    label: string;
+    options: SelectOption[];
+    searchOptions: SelectOption[];
     multiple: boolean;
-    overflow: "wrap" | "scroll" | "hidden";
     size: "m" | "s";
-    label: string;
     placeholder: string;
     hint: string;
     error: string | boolean;
@@ -219,9 +217,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disableDefaultStyles: boolean;
     enableSearch: boolean;
     enableClear: boolean;
-    searchFunction: SearchFunction<SelectItem>;
-    groupByFunction: GroupFunction<SelectItem>;
+    searchFunction: SelectSearchFunction;
+    groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
+    overflow: "wrap" | "scroll" | "hidden";
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -258,34 +257,33 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlId: import("@vue/composition-api").Ref<string>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<SelectModelValue>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<SelectValue>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     showClear: import("@vue/composition-api").ComputedRef<boolean>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
+        value: RawValue;
         label: string;
-        value: import("./types").SelectItemValue;
         disabled?: boolean | undefined;
     }[]>;
-    resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectItem[]>;
-    groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectItem[]>>;
+    resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
+    groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectOption[]>>;
     toggle: () => void;
     close: () => void;
     open: () => void;
-    selectOption: (item: SelectItem) => void;
-    deselectOption: (item: SelectItem) => void;
-    toggleOption: (item: SelectItem) => void;
+    deselect: (option: RawValue) => void;
+    toggleOption: (option: RawValue) => void;
+    clearSearchControl: () => void;
     isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
     isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
-    modelValue: SelectModelValue;
-    options: SelectItem[];
-    searchOptions: SelectItem[];
+    modelValue: SelectValue;
+    label: string;
+    options: SelectOption[];
+    searchOptions: SelectOption[];
     multiple: boolean;
-    overflow: "wrap" | "scroll" | "hidden";
     size: "m" | "s";
-    label: string;
     placeholder: string;
     hint: string;
     error: string | boolean;
@@ -294,19 +292,19 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disableDefaultStyles: boolean;
     enableSearch: boolean;
     enableClear: boolean;
-    searchFunction: SearchFunction<SelectItem>;
-    groupByFunction: GroupFunction<SelectItem>;
+    searchFunction: SelectSearchFunction;
+    groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
+    overflow: "wrap" | "scroll" | "hidden";
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: SelectModelValue;
-    options: SelectItem[];
-    searchOptions: SelectItem[];
+    modelValue: SelectValue;
+    label: string;
+    options: SelectOption[];
+    searchOptions: SelectOption[];
     multiple: boolean;
-    overflow: "wrap" | "scroll" | "hidden";
     size: "m" | "s";
-    label: string;
     placeholder: string;
     hint: string;
     error: string | boolean;
@@ -315,8 +313,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disableDefaultStyles: boolean;
     enableSearch: boolean;
     enableClear: boolean;
-    searchFunction: SearchFunction<SelectItem>;
-    groupByFunction: GroupFunction<SelectItem>;
+    searchFunction: SelectSearchFunction;
+    groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
+    overflow: "wrap" | "scroll" | "hidden";
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrSelectV3/types.d.ts

@@ -1,4 +1,13 @@
-import { Item, ModelValue } from '../../types';
-export type SelectModelValue = ModelValue<SelectItemValue | SelectItemValue[]>;
-export type SelectItem = Item<SelectItemValue>;
-export type SelectItemValue = string | number | object;
+export interface SelectOption {
+    value: RawValue;
+    label: string;
+    disabled?: boolean;
+}
+export type RawValue = string | number | object;
+export interface SelectSearchFunction {
+    (searchText: string, options: SelectOption[]): Promise<SelectOption[]>;
+}
+export interface SelectGroupByFunction {
+    (option: SelectOption): string;
+}
+export type SelectValue = RawValue | RawValue[] | undefined;

package/dist/bundled/v2/components/OrSelectV3/utils/castToMultipleValue.d.ts

@@ -0,0 +1,2 @@
+import { SelectValue } from '../types';
+export declare function castToMultipleValue(value: SelectValue): SelectValue[];

package/dist/bundled/v2/components/OrSelectV3/utils/castToMultipleValue.js

@@ -0,0 +1,10 @@
+import { isEmpty } from '../../../utils/isEmpty.js';
+
+function castToMultipleValue(value) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  return isEmpty(value) ? [] : [value];
+}
+
+export { castToMultipleValue };

package/dist/bundled/v2/components/OrSidebar/OrSidebar.js

@@ -1,4 +1,4 @@
-import { g as useDraggable } from '../../index-fe85dfd9.js';
+import { f as useDraggable } from '../../index-13c63b4c.js';
 import { defineComponent, ref } from 'vue-demi';
 import { OrSidebarSide } from './constants.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';

package/dist/bundled/v2/components/OrSlider/OrSlider.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref } from 'vue-demi';
-import { o as onClickOutside, g as useDraggable } from '../../index-fe85dfd9.js';
+import { o as onClickOutside, f as useDraggable } from '../../index-13c63b4c.js';
 import { f as addClass, h as removeClass } from '../../dom-59fe0ee3.js';
 import __vue_component__$1 from '../OrIcon/OrIcon.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';

package/dist/bundled/v2/components/OrSliderV3/OrSlider.js

@@ -1,4 +1,4 @@
-import { f as useElementBounding, u as useElementHover, g as useDraggable } from '../../index-fe85dfd9.js';
+import { e as useElementBounding, u as useElementHover, f as useDraggable } from '../../index-13c63b4c.js';
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { SliderColor, SliderOrientation } from './props.js';
 import { Slider, SliderOrientations, SliderRail, SliderRailOrientations, SliderTrack, SliderTrackColors, SliderThumb, SliderThumbColors, SliderBreakpointMark, SliderBreakpointMarkColors, SliderLabel, SliderLabelOrientations, SliderLabelMark, SliderLabelMarkOrientations } from './styles.js';
@@ -35,7 +35,7 @@ var script = defineComponent({
     },
     breakpoints: {
       type: Array,
-      default: []
+      default: () => []
     },
     color: {
       type: String,
@@ -173,16 +173,16 @@ var script = defineComponent({
       onEnd: onDrag
     });
     // Constraints
-    watch(() => props.minValue, value => {
+    watch(toRef(props, 'minValue'), value => {
       if (value >= props.maxValue) {
-        throw new Error('[OrSlider]: `minValue` must be lesser than `maxValue`.');
+        throw new Error('OrRangeSlider: `minValue` cannot be greater or equal to `maxValue`.');
       }
     }, {
       immediate: true
     });
-    watch(() => props.maxValue, value => {
+    watch(toRef(props, 'maxValue'), value => {
       if (value <= props.minValue) {
-        throw new Error('[OrSlider]: `maxValue` must be greater than `minValue`.');
+        throw new Error('OrRangeSlider: `maxValue` cannot be lesser or equal to `minValue`.');
       }
     }, {
       immediate: true

package/dist/bundled/v2/components/OrSliderV3/OrSlider.vue.d.ts

@@ -43,7 +43,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     breakpoints: {
         type: PropType<number[]>;
-        default: number[];
+        default: () => never[];
     };
     color: {
         type: PropType<"primary" | "secondary">;
@@ -82,7 +82,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     breakpoints: {
         type: PropType<number[]>;
-        default: number[];
+        default: () => never[];
     };
     color: {
         type: PropType<"primary" | "secondary">;