@onereach/ui-components 5.3.0-beta.3171.0 → 5.3.0

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

@@ -1,25 +1,25 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
+import { defineComponent, ref, computed, getCurrentInstance, 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';
-import __vue_component__$2 from '../OrErrorV3/OrError.js';
-import __vue_component__$3 from '../OrExpansionPanelV3/OrExpansionPanel.js';
-import __vue_component__$4 from '../OrHintV3/OrHint.js';
-import __vue_component__$5 from '../OrIconV3/OrIcon.js';
-import __vue_component__$6 from '../OrIconButtonV3/OrIconButton.js';
-import __vue_component__$7 from '../OrInputV3/OrInput.js';
-import __vue_component__$8 from '../OrInputBoxV3/OrInputBox.js';
-import __vue_component__$9 from '../OrLabelV3/OrLabel.js';
-import __vue_component__$a from '../OrMenuItemV3/OrMenuItem.js';
-import __vue_component__$b from '../OrPopoverV3/OrPopover.js';
-import __vue_component__$c from '../OrTagV3/OrTag.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import { Select, SelectControl, SelectSearchControl, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './styles.js';
+import __vue_component__$2 from '../OrCheckboxV3/OrCheckbox.js';
+import __vue_component__$3 from '../OrErrorV3/OrError.js';
+import __vue_component__$4 from '../OrExpansionPanelV3/OrExpansionPanel.js';
+import __vue_component__$5 from '../OrHintV3/OrHint.js';
+import __vue_component__$6 from '../OrIconV3/OrIcon.js';
+import __vue_component__$7 from '../OrIconButtonV3/OrIconButton.js';
+import __vue_component__$8 from '../OrInputV3/OrInput.js';
+import __vue_component__$9 from '../OrInputBoxV3/OrInputBox.js';
+import __vue_component__$a from '../OrLabelV3/OrLabel.js';
+import __vue_component__$b from '../OrMenuItemV3/OrMenuItem.js';
+import __vue_component__$c from '../OrPopoverV3/OrPopover.js';
+import __vue_component__$d from '../OrTagV3/OrTag.js';
 import { useOverflow } from '../../hooks/useOverflow.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import useResponsive from '../../hooks/useResponsive/useResponsive.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrCheckboxV3/styles.js';
 import '../OrLabelV3/props.js';
 import '../../hooks/useIdAttribute.js';
@@ -64,20 +64,87 @@ import '../../utils/isVisible.js';
 import '../OrTagV3/props.js';
 import '../OrTagV3/styles.js';
 
+const SelectPlaceholder = [
+// Interactivity
+'interactivity-none',
+// Typography
+'typography-inherit truncate',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+var script$1 = defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-select-placeholder-v3', ...SelectPlaceholder]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+/* script */
+const __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "disabled": _vm.disabled ? '' : null
+    }
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$1 = [];
+
+/* style */
+const __vue_inject_styles__$1 = undefined;
+/* scoped */
+const __vue_scope_id__$1 = undefined;
+/* module identifier */
+const __vue_module_identifier__$1 = undefined;
+/* functional template */
+const __vue_is_functional_template__$1 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$1,
+  staticRenderFns: __vue_staticRenderFns__$1
+}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
+var OrSelectPlaceholder = __vue_component__$1;
+
 var script = defineComponent({
   components: {
-    OrCheckbox: __vue_component__$1,
-    OrError: __vue_component__$2,
-    OrExpansionPanel: __vue_component__$3,
-    OrHint: __vue_component__$4,
-    OrIcon: __vue_component__$5,
-    OrIconButton: __vue_component__$6,
-    OrInput: __vue_component__$7,
-    OrInputBox: __vue_component__$8,
-    OrLabel: __vue_component__$9,
-    OrMenuItem: __vue_component__$a,
-    OrPopover: __vue_component__$b,
-    OrTag: __vue_component__$c
+    OrCheckbox: __vue_component__$2,
+    OrError: __vue_component__$3,
+    OrExpansionPanel: __vue_component__$4,
+    OrHint: __vue_component__$5,
+    OrIcon: __vue_component__$6,
+    OrIconButton: __vue_component__$7,
+    OrInput: __vue_component__$8,
+    OrInputBox: __vue_component__$9,
+    OrLabel: __vue_component__$a,
+    OrMenuItem: __vue_component__$b,
+    OrPopover: __vue_component__$c,
+    OrSelectPlaceholder,
+    OrTag: __vue_component__$d
   },
   directives: {
     DropdownClose,
@@ -144,6 +211,10 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
+    enableClear: {
+      type: Boolean,
+      default: false
+    },
     searchFunction: {
       type: Function,
       default: async (searchText, options) => {
@@ -187,11 +258,15 @@ 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]);
     const searchControlStyles = computed(() => [...SelectSearchControl]);
-    const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
       return [...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
@@ -200,10 +275,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 = [];
@@ -303,7 +381,6 @@ var script = defineComponent({
       rootStyles,
       controlStyles,
       searchControlStyles,
-      placeholderStyles,
       dropdownStyles,
       dropdownItemStyles,
       noSearchResultsStyles,
@@ -311,6 +388,7 @@ var script = defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
+      showClear,
       selection,
       searchText,
       internalSearchOptions,
@@ -395,8 +473,8 @@ var __vue_render__ = function () {
       return _c('OrTag', {
         key: option.value,
         attrs: {
-          "variant": 'reset',
-          "disabled": _vm.disabled || _vm.readonly
+          "variant": _vm.readonly || _vm.disabled ? 'tag' : 'reset',
+          "disabled": _vm.disabled
         },
         on: {
           "reset": function ($event) {
@@ -407,10 +485,9 @@ var __vue_render__ = function () {
     });
   }, {
     "model": _vm.proxyModelValue
-  })] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('span', {
-    class: _vm.placeholderStyles,
+  })] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('OrSelectPlaceholder', {
     attrs: {
-      "disabled": _vm.disabled ? '' : null
+      "disabled": _vm.disabled
     }
   }, [_vm._v("\n            " + _vm._s(_vm.placeholder) + "\n          ")])] : _vm._e()] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
     return [_c('span', {
@@ -418,10 +495,9 @@ var __vue_render__ = function () {
     }, [_vm._v("\n              " + _vm._s(_vm.selection && _vm.selection.label) + "\n            ")])];
   }, {
     "model": _vm.proxyModelValue
-  })] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('span', {
-    class: _vm.placeholderStyles,
+  })] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('OrSelectPlaceholder', {
     attrs: {
-      "disabled": _vm.disabled ? '' : null
+      "disabled": _vm.disabled
     }
   }, [_vm._v("\n            " + _vm._s(_vm.placeholder) + "\n          ")])] : _vm._e()]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n      +" + _vm._s(_vm.outerItems.length) + "\n    ")] : _vm._e(), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
     ref: "searchControl",
@@ -448,7 +524,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

@@ -21,7 +21,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -29,6 +28,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 +102,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 +175,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 +206,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;
@@ -223,7 +232,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -231,6 +239,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 +271,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 +292,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/v2/components/OrSelectV3/index.js

@@ -2,13 +2,13 @@ export { default as OrSelectV3 } from './OrSelect.js';
 export { InputBoxSize as SelectSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../../utils/isEmptyValue.js';
+import '../../normalize-component-6e8e3d80.js';
 import './styles.js';
 import '../OrCheckboxV3/OrCheckbox.js';
 import '../OrCheckboxV3/styles.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
-import '../../normalize-component-6e8e3d80.js';
 import '../../hooks/useIdAttribute.js';
 import '../../hooks/useControlAttributes.js';
 import '../../hooks/useProxyModelValue.js';

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

@@ -1,7 +1,6 @@
 export declare const Select: string[];
 export declare const SelectControl: string[];
 export declare const SelectSearchControl: string[];
-export declare const SelectPlaceholder: string[];
 export declare const SelectDropdown: string[];
 export declare const SelectDropdownDefault: string[];
 export declare const SelectDropdownFlipped: string[];

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

@@ -19,13 +19,6 @@ const SelectSearchControl = [
 'grow',
 // Spacing
 '!mx-lg md:!-mx-sm+', '!my-sm md:!my-none'];
-const SelectPlaceholder = [
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
-// Interactivity
-'select-none',
-// Typography
-'truncate'];
 const SelectDropdown = [
 // Overflow
 'overflow-y-auto',
@@ -58,4 +51,4 @@ const SelectNoSearchResults = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
-export { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectPlaceholder, SelectSearchControl };
+export { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectSearchControl };

package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-a69c2fd5.js → OrSelect.vue_vue_type_script_lang-21b9f7b7.js}

@@ -1,10 +1,11 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
+import { defineComponent, ref, computed, getCurrentInstance, 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 { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import { Select, SelectControl, SelectSearchControl, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './components/OrSelectV3/styles.js';
 import './components/OrCheckboxV3/OrCheckbox.js';
 import './components/OrErrorV3/OrError.js';
 import './components/OrExpansionPanelV3/OrExpansionPanel.js';
-import { s as script$3 } from './OrExpansionPanel.vue_vue_type_script_lang-fa265d9a.js';
+import { s as script$4 } from './OrExpansionPanel.vue_vue_type_script_lang-fa265d9a.js';
 import './components/OrHintV3/OrHint.js';
 import './components/OrIconV3/OrIcon.js';
 import './components/OrIconButtonV3/OrIconButton.js';
@@ -14,38 +15,79 @@ import './components/OrLabelV3/OrLabel.js';
 import './components/OrMenuItemV3/OrMenuItem.js';
 import './components/OrPopoverV3/OrPopover.js';
 import './components/OrTagV3/OrTag.js';
-import { s as script$c } from './OrTag.vue_vue_type_script_lang-6c4b09f4.js';
+import { s as script$d } from './OrTag.vue_vue_type_script_lang-6c4b09f4.js';
 import { useOverflow } from './hooks/useOverflow.js';
-import { s as script$1 } from './OrCheckbox.vue_vue_type_script_lang-38736023.js';
-import { s as script$2 } from './OrError.vue_vue_type_script_lang-df7b5e32.js';
-import { s as script$4 } from './OrHint.vue_vue_type_script_lang-0f5e8377.js';
-import { s as script$5 } from './OrIcon.vue_vue_type_script_lang-73f9cc63.js';
-import { s as script$6 } from './OrIconButton.vue_vue_type_script_lang-41affeb4.js';
-import { s as script$7 } from './OrInput.vue_vue_type_script_lang-4a384d2b.js';
-import { s as script$8 } from './OrInputBox.vue_vue_type_script_lang-137cb650.js';
-import { s as script$9 } from './OrLabel.vue_vue_type_script_lang-fcdfd80d.js';
-import { s as script$a } from './OrMenuItem.vue_vue_type_script_lang-1785286a.js';
-import { s as script$b } from './OrPopover.vue_vue_type_script_lang-d766f723.js';
+import { s as script$2 } from './OrCheckbox.vue_vue_type_script_lang-38736023.js';
+import { s as script$3 } from './OrError.vue_vue_type_script_lang-df7b5e32.js';
+import { s as script$5 } from './OrHint.vue_vue_type_script_lang-0f5e8377.js';
+import { s as script$6 } from './OrIcon.vue_vue_type_script_lang-73f9cc63.js';
+import { s as script$7 } from './OrIconButton.vue_vue_type_script_lang-41affeb4.js';
+import { s as script$8 } from './OrInput.vue_vue_type_script_lang-4a384d2b.js';
+import { s as script$9 } from './OrInputBox.vue_vue_type_script_lang-137cb650.js';
+import { s as script$a } from './OrLabel.vue_vue_type_script_lang-fcdfd80d.js';
+import { s as script$b } from './OrMenuItem.vue_vue_type_script_lang-1785286a.js';
+import { s as script$c } from './OrPopover.vue_vue_type_script_lang-d766f723.js';
 import { DropdownClose } from './directives/dropdown-close.js';
 import { DropdownOpen } from './directives/dropdown-open.js';
 import { InputBoxSize } from './components/OrInputBoxV3/props.js';
 import { useProxyModelValue } from './hooks/useProxyModelValue.js';
 import useResponsive from './hooks/useResponsive/useResponsive.js';
 
+const SelectPlaceholder = [
+// Interactivity
+'interactivity-none',
+// Typography
+'typography-inherit truncate',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+var script$1 = defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-select-placeholder-v3', ...SelectPlaceholder]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+const _hoisted_1 = ["disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles),
+    disabled: _ctx.disabled ? '' : null
+  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1);
+}
+
+script$1.render = render;
+script$1.__file = "src/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue";
+
 var script = defineComponent({
   components: {
-    OrCheckbox: script$1,
-    OrError: script$2,
-    OrExpansionPanel: script$3,
-    OrHint: script$4,
-    OrIcon: script$5,
-    OrIconButton: script$6,
-    OrInput: script$7,
-    OrInputBox: script$8,
-    OrLabel: script$9,
-    OrMenuItem: script$a,
-    OrPopover: script$b,
-    OrTag: script$c
+    OrCheckbox: script$2,
+    OrError: script$3,
+    OrExpansionPanel: script$4,
+    OrHint: script$5,
+    OrIcon: script$6,
+    OrIconButton: script$7,
+    OrInput: script$8,
+    OrInputBox: script$9,
+    OrLabel: script$a,
+    OrMenuItem: script$b,
+    OrPopover: script$c,
+    OrSelectPlaceholder: script$1,
+    OrTag: script$d
   },
   directives: {
     DropdownClose,
@@ -112,6 +154,10 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
+    enableClear: {
+      type: Boolean,
+      default: false
+    },
     searchFunction: {
       type: Function,
       default: async (searchText, options) => {
@@ -155,11 +201,15 @@ 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]);
     const searchControlStyles = computed(() => [...SelectSearchControl]);
-    const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
       return [...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
@@ -168,10 +218,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 = [];
@@ -271,7 +324,6 @@ var script = defineComponent({
       rootStyles,
       controlStyles,
       searchControlStyles,
-      placeholderStyles,
       dropdownStyles,
       dropdownItemStyles,
       noSearchResultsStyles,
@@ -279,6 +331,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-a69c2fd5.js';
-export { s as default } from '../../OrSelect.vue_vue_type_script_lang-a69c2fd5.js';
+import { s as script } from '../../OrSelect.vue_vue_type_script_lang-21b9f7b7.js';
+export { s as default } from '../../OrSelect.vue_vue_type_script_lang-21b9f7b7.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';
@@ -83,27 +83,26 @@ import '../../directives/dropdown-close.js';
 import '../../directives/dropdown-open.js';
 
 const _hoisted_1 = ["id", "tabindex", "disabled"];
-const _hoisted_2 = ["disabled"];
-const _hoisted_3 = {
+const _hoisted_2 = {
   class: "truncate"
 };
-const _hoisted_4 = ["disabled"];
-const _hoisted_5 = {
+const _hoisted_3 = {
   key: 2,
   class: /*#__PURE__*/normalizeClass(['grow'])
 };
-const _hoisted_6 = {
+const _hoisted_4 = {
   class: /*#__PURE__*/normalizeClass(['layout-inline-row', 'gap-sm'])
 };
-const _hoisted_7 = {
+const _hoisted_5 = {
   class: /*#__PURE__*/normalizeClass(['contents'])
 };
-const _hoisted_8 = {
+const _hoisted_6 = {
   class: /*#__PURE__*/normalizeClass(['contents'])
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
   const _component_OrTag = resolveComponent("OrTag");
+  const _component_OrSelectPlaceholder = resolveComponent("OrSelectPlaceholder");
   const _component_OrInput = resolveComponent("OrInput");
   const _component_OrIconButton = resolveComponent("OrIconButton");
   const _component_OrIcon = resolveComponent("OrIcon");
@@ -155,28 +154,34 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selection, option => {
       return openBlock(), createBlock(_component_OrTag, {
         key: option.value,
-        variant: 'reset',
-        disabled: _ctx.disabled || _ctx.readonly,
+        variant: _ctx.readonly || _ctx.disabled ? 'tag' : 'reset',
+        disabled: _ctx.disabled,
         onReset: $event => _ctx.deselect(option)
       }, {
         default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)]),
 
         _: 2 /* DYNAMIC */
-      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled", "onReset"]);
-    }), 128 /* KEYED_FRAGMENT */))]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createElementBlock("span", {
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "disabled", "onReset"]);
+    }), 128 /* KEYED_FRAGMENT */))]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createBlock(_component_OrSelectPlaceholder, {
       key: 1,
-      class: normalizeClass(_ctx.placeholderStyles),
-      disabled: _ctx.disabled ? '' : null
-    }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_2)) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
+      disabled: _ctx.disabled
+    }, {
+      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)]),
+
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
       key: 1
     }, [!_ctx.isEmptyModelValue ? renderSlot(_ctx.$slots, "valueTemplate", {
       key: 0,
       model: _ctx.proxyModelValue
-    }, () => [createElementVNode("span", _hoisted_3, toDisplayString(_ctx.selection && _ctx.selection.label), 1 /* TEXT */)]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createElementBlock("span", {
+    }, () => [createElementVNode("span", _hoisted_2, toDisplayString(_ctx.selection && _ctx.selection.label), 1 /* TEXT */)]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createBlock(_component_OrSelectPlaceholder, {
       key: 1,
-      class: normalizeClass(_ctx.placeholderStyles),
-      disabled: _ctx.disabled ? '' : null
-    }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_4)) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
+      disabled: _ctx.disabled
+    }, {
+      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)]),
+
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
       key: 0
     }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
       key: 1,
@@ -189,7 +194,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_3)), createElementVNode("div", _hoisted_4, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       icon: 'close',
       color: 'inherit',
@@ -318,14 +323,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 3 /* FORWARDED */
     }, 8 /* PROPS */, ["trigger", "custom-styles"])]),
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), withDirectives(createElementVNode("div", _hoisted_7, [_ctx.hint ? (openBlock(), createBlock(_component_OrHint, {
+  }, 8 /* PROPS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), withDirectives(createElementVNode("div", _hoisted_5, [_ctx.hint ? (openBlock(), createBlock(_component_OrHint, {
     key: 0,
     disabled: _ctx.disabled
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.hint), 1 /* TEXT */)]),
 
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_8, [createVNode(_component_OrError, {
+  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_6, [createVNode(_component_OrError, {
     disabled: _ctx.disabled
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),