@onereach/ui-components 5.1.0 → 5.1.1-beta.3159.0

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

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, toRefs, onMounted, watch } from 'vue-demi';
 import { isEmptyValue } from '../../utils/isEmptyValue.js';
 import { Select, SelectControl, SelectSearchControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './styles.js';
 import __vue_component__$1 from '../OrCheckboxV3/OrCheckbox.js';
@@ -147,6 +147,10 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
+    enableClear: {
+      type: Boolean,
+      default: false
+    },
     searchFunction: {
       type: Function,
       default: async (searchText, options) => {
@@ -190,6 +194,11 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
+    // Props
+    const {
+      enableClear,
+      modelValue
+    } = toRefs(props);
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
@@ -203,10 +212,13 @@ var script = defineComponent({
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
     const isEmptyModelValue = computed(() => {
       return Array.isArray(proxyModelValue.value) ? proxyModelValue.value.length === 0 : isEmptyValue(proxyModelValue.value);
     });
+    const showClear = computed(() => {
+      return enableClear.value && !isEmptyModelValue.value;
+    });
     onMounted(() => {
       if (!proxyModelValue.value && props.multiple) {
         proxyModelValue.value = [];
@@ -314,6 +326,7 @@ var script = defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
+      showClear,
       selection,
       searchText,
       internalSearchOptions,
@@ -451,7 +464,7 @@ var __vue_render__ = function () {
     class: ['grow']
   })], _vm._v(" "), _c('div', {
     class: ['layout-inline-row', 'gap-sm']
-  }, [_vm.popoverState === 'closed' && !_vm.isEmptyModelValue ? [_c('OrIconButton', {
+  }, [_vm.showClear ? [_c('OrIconButton', {
     attrs: {
       "icon": 'close',
       "color": 'inherit',

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

@@ -29,6 +29,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
+    showClear: import("@vue/composition-api").ComputedRef<boolean>;
     selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
@@ -102,6 +103,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -171,6 +176,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -198,6 +207,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
@@ -231,6 +241,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
+    showClear: import("@vue/composition-api").ComputedRef<boolean>;
     selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
@@ -262,6 +273,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
@@ -282,6 +294,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;

package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-19739ac1.js → OrSelect.vue_vue_type_script_lang-20ddfbd0.js}

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, toRefs, onMounted, watch } from 'vue-demi';
 import { isEmptyValue } from './utils/isEmptyValue.js';
 import { Select, SelectControl, SelectSearchControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './components/OrSelectV3/styles.js';
 import './components/OrCheckboxV3/OrCheckbox.js';
@@ -112,6 +112,10 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
+    enableClear: {
+      type: Boolean,
+      default: false
+    },
     searchFunction: {
       type: Function,
       default: async (searchText, options) => {
@@ -155,6 +159,11 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
+    // Props
+    const {
+      enableClear,
+      modelValue
+    } = toRefs(props);
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
@@ -168,10 +177,13 @@ var script = defineComponent({
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
     const isEmptyModelValue = computed(() => {
       return Array.isArray(proxyModelValue.value) ? proxyModelValue.value.length === 0 : isEmptyValue(proxyModelValue.value);
     });
+    const showClear = computed(() => {
+      return enableClear.value && !isEmptyModelValue.value;
+    });
     onMounted(() => {
       if (!proxyModelValue.value && props.multiple) {
         proxyModelValue.value = [];
@@ -279,6 +291,7 @@ var script = defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
+      showClear,
       selection,
       searchText,
       internalSearchOptions,

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

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrSelect.vue_vue_type_script_lang-19739ac1.js';
-export { s as default } from '../../OrSelect.vue_vue_type_script_lang-19739ac1.js';
+import { s as script } from '../../OrSelect.vue_vue_type_script_lang-20ddfbd0.js';
+export { s as default } from '../../OrSelect.vue_vue_type_script_lang-20ddfbd0.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
 import 'vue-demi';
 import '../../utils/isEmptyValue.js';
@@ -192,7 +192,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       size: _ctx.size,
       "disable-default-styles": true,
       onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
-    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("div", _hoisted_5)), createElementVNode("div", _hoisted_6, [_ctx.popoverState === 'closed' && !_ctx.isEmptyModelValue ? (openBlock(), createBlock(_component_OrIconButton, {
+    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("div", _hoisted_5)), createElementVNode("div", _hoisted_6, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       icon: 'close',
       color: 'inherit',

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

@@ -58,6 +58,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -90,6 +94,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[] | undefined>;
     readonly: import("vue-demi").ComputedRef<boolean>;
     isEmptyModelValue: import("vue-demi").ComputedRef<boolean>;
+    showClear: import("vue-demi").ComputedRef<boolean>;
     selection: import("vue-demi").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("vue-demi").Ref<string>;
     internalSearchOptions: import("vue-demi").Ref<{
@@ -163,6 +168,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -195,6 +204,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;

package/dist/bundled/v3/components/OrSelectV3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-19739ac1.js';
+export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-20ddfbd0.js';
 export { InputBoxSize as SelectSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../../utils/isEmptyValue.js';

package/dist/bundled/v3/components/index.js

@@ -114,7 +114,7 @@ export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-e055677e.j
 export { s as OrSegmentedControlV3 } from '../OrSegmentedControl.vue_vue_type_script_lang-3a7df112.js';
 export { SegmentedControlSize } from './OrSegmentedControlV3/props.js';
 export { s as OrSelect } from '../OrSelect.vue_vue_type_script_lang-2516881b.js';
-export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-19739ac1.js';
+export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-20ddfbd0.js';
 export { s as OrSidebar } from '../OrSidebar.vue_vue_type_script_lang-81941fe6.js';
 export { OrSidebarSide } from './OrSidebar/constants.js';
 export { s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-47572822.js';

package/dist/bundled/v3/index.js

@@ -74,7 +74,7 @@ export { s as OrSegmentedControlV3 } from './OrSegmentedControl.vue_vue_type_scr
 import './components/OrSelect/OrSelect.js';
 export { s as OrSelect } from './OrSelect.vue_vue_type_script_lang-2516881b.js';
 import './components/OrSelectV3/OrSelect.js';
-export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-19739ac1.js';
+export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-20ddfbd0.js';
 import './components/OrSidebar/OrSidebar.js';
 export { s as OrSidebar } from './OrSidebar.vue_vue_type_script_lang-81941fe6.js';
 import './components/OrSidebarV3/OrSidebar.js';

package/dist/esm/v2/{OrSelect-ee398af5.js → OrSelect-667ece82.js}

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, toRefs, onMounted, watch } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 import { u as useOverflow } from './useOverflow-c856b7b7.js';
 import '@vueuse/core';
@@ -162,6 +162,10 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
+    enableClear: {
+      type: Boolean,
+      default: false
+    },
     searchFunction: {
       type: Function,
       default: async (searchText, options) => {
@@ -205,6 +209,11 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
+    // Props
+    const {
+      enableClear,
+      modelValue
+    } = toRefs(props);
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
@@ -218,10 +227,13 @@ var script = defineComponent({
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
     const isEmptyModelValue = computed(() => {
       return Array.isArray(proxyModelValue.value) ? proxyModelValue.value.length === 0 : isEmptyValue(proxyModelValue.value);
     });
+    const showClear = computed(() => {
+      return enableClear.value && !isEmptyModelValue.value;
+    });
     onMounted(() => {
       if (!proxyModelValue.value && props.multiple) {
         proxyModelValue.value = [];
@@ -329,6 +341,7 @@ var script = defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
+      showClear,
       selection,
       searchText,
       internalSearchOptions,
@@ -466,7 +479,7 @@ var __vue_render__ = function () {
     class: ['grow']
   })], _vm._v(" "), _c('div', {
     class: ['layout-inline-row', 'gap-sm']
-  }, [_vm.popoverState === 'closed' && !_vm.isEmptyModelValue ? [_c('OrIconButton', {
+  }, [_vm.showClear ? [_c('OrIconButton', {
     attrs: {
       "icon": 'close',
       "color": 'inherit',

package/dist/esm/v2/components/index.js

@@ -78,7 +78,7 @@ export { _ as OrSearch } from '../OrSearch-ac542dd6.js';
 export { _ as OrSearchV3 } from '../OrSearch-15ecfbf0.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-d4e32f80.js';
 export { _ as OrSelect } from '../OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from '../OrSelect-ee398af5.js';
+export { _ as OrSelectV3 } from '../OrSelect-667ece82.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from '../OrSidebar-18d20059.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-b490ff86.js';

package/dist/esm/v2/components/or-select-v3/OrSelect.vue.d.ts

@@ -29,6 +29,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
+    showClear: import("@vue/composition-api").ComputedRef<boolean>;
     selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
@@ -102,6 +103,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -171,6 +176,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -198,6 +207,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
@@ -231,6 +241,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
+    showClear: import("@vue/composition-api").ComputedRef<boolean>;
     selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
@@ -262,6 +273,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
@@ -282,6 +294,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;

package/dist/esm/v2/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-ee398af5.js';
+export { _ as OrSelectV3 } from '../../OrSelect-667ece82.js';
 export { I as SelectSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';

package/dist/esm/v2/index.js

@@ -78,7 +78,7 @@ export { _ as OrSearch } from './OrSearch-ac542dd6.js';
 export { _ as OrSearchV3 } from './OrSearch-15ecfbf0.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-d4e32f80.js';
 export { _ as OrSelect } from './OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from './OrSelect-ee398af5.js';
+export { _ as OrSelectV3 } from './OrSelect-667ece82.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from './OrSidebar-18d20059.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-b490ff86.js';

package/dist/esm/v3/{OrSelect-3a39f89e.js → OrSelect-c1c0fa31.js}

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, toRefs, onMounted, watch } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 import { u as useOverflow } from './useOverflow-c856b7b7.js';
 import '@vueuse/core';
@@ -161,6 +161,10 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
+    enableClear: {
+      type: Boolean,
+      default: false
+    },
     searchFunction: {
       type: Function,
       default: async (searchText, options) => {
@@ -204,6 +208,11 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
+    // Props
+    const {
+      enableClear,
+      modelValue
+    } = toRefs(props);
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
@@ -217,10 +226,13 @@ var script = defineComponent({
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
     const isEmptyModelValue = computed(() => {
       return Array.isArray(proxyModelValue.value) ? proxyModelValue.value.length === 0 : isEmptyValue(proxyModelValue.value);
     });
+    const showClear = computed(() => {
+      return enableClear.value && !isEmptyModelValue.value;
+    });
     onMounted(() => {
       if (!proxyModelValue.value && props.multiple) {
         proxyModelValue.value = [];
@@ -328,6 +340,7 @@ var script = defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
+      showClear,
       selection,
       searchText,
       internalSearchOptions,
@@ -452,7 +465,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       size: _ctx.size,
       "disable-default-styles": true,
       onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
-    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("div", _hoisted_5)), createElementVNode("div", _hoisted_6, [_ctx.popoverState === 'closed' && !_ctx.isEmptyModelValue ? (openBlock(), createBlock(_component_OrIconButton, {
+    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("div", _hoisted_5)), createElementVNode("div", _hoisted_6, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       icon: 'close',
       color: 'inherit',

package/dist/esm/v3/components/index.js

@@ -75,7 +75,7 @@ export { s as OrSearch } from '../OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from '../OrSearch-9c694c80.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-c8eb217d.js';
 export { s as OrSelect } from '../OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from '../OrSelect-3a39f89e.js';
+export { s as OrSelectV3 } from '../OrSelect-c1c0fa31.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from '../OrSidebar-34492810.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-f6f5ec80.js';

package/dist/esm/v3/components/or-select-v3/OrSelect.vue.d.ts

@@ -58,6 +58,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -90,6 +94,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[] | undefined>;
     readonly: import("vue-demi").ComputedRef<boolean>;
     isEmptyModelValue: import("vue-demi").ComputedRef<boolean>;
+    showClear: import("vue-demi").ComputedRef<boolean>;
     selection: import("vue-demi").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("vue-demi").Ref<string>;
     internalSearchOptions: import("vue-demi").Ref<{
@@ -163,6 +168,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -195,6 +204,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;

package/dist/esm/v3/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-3a39f89e.js';
+export { s as OrSelectV3 } from '../../OrSelect-c1c0fa31.js';
 export { I as SelectSize } from '../../OrInputBox-912a6254.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';

package/dist/esm/v3/index.js

@@ -75,7 +75,7 @@ export { s as OrSearch } from './OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from './OrSearch-9c694c80.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-c8eb217d.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-3a39f89e.js';
+export { s as OrSelectV3 } from './OrSelect-c1c0fa31.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from './OrSidebar-34492810.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-f6f5ec80.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "5.1.0",
+  "version": "5.1.1-beta.3159.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -148,6 +148,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "836bd5ff950876d0076ddc862dcc93d5f64ca794"
+  }
 }

package/src/components/or-select-v3/OrSelect.vue

@@ -111,7 +111,7 @@
       </template>
 
       <div :class="['layout-inline-row', 'gap-sm']">
-        <template v-if="popoverState === 'closed' && !isEmptyModelValue">
+        <template v-if="showClear">
           <OrIconButton
             :icon="'close'"
             :color="'inherit'"
@@ -269,7 +269,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, toRef, watch } from 'vue-demi';
+import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, toRefs, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useOverflow, useProxyModelValue, useResponsive } from '../../hooks';
 import { isEmptyValue } from '../../utils/isEmptyValue';
@@ -386,6 +386,11 @@ export default defineComponent({
       default: false,
     },
 
+    enableClear: {
+      type: Boolean,
+      default: false,
+    },
+
     searchFunction: {
       type: Function as PropType<SelectSearchFunction>,
 
@@ -435,6 +440,9 @@ export default defineComponent({
     const popoverRoot = computed(() => popover.value?.root);
     const popoverState = computed(() => popover.value?.state);
 
+    // Props
+    const { enableClear, modelValue } = toRefs(props);
+
     // Styles
     const rootStyles = computed(() => [
       'or-select-v3',
@@ -469,7 +477,7 @@ export default defineComponent({
     // State
     const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
 
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
 
     const isEmptyModelValue = computed(() => {
       return Array.isArray(proxyModelValue.value)
@@ -477,6 +485,10 @@ export default defineComponent({
         : isEmptyValue(proxyModelValue.value);
     });
 
+    const showClear = computed(() => {
+      return enableClear.value && !isEmptyModelValue.value;
+    });
+
     onMounted(() => {
       if (!proxyModelValue.value && props.multiple) {
         proxyModelValue.value = [];
@@ -606,6 +618,7 @@ export default defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
+      showClear,
       selection,
       searchText,
       internalSearchOptions,