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

package/dist/esm/v3/{OrSelect-a6e29937.js → OrSelect-ba0f0da3.js}

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
+import { defineComponent, ref, computed, getCurrentInstance, 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';
@@ -6,19 +6,59 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import '@onereach/styles/tailwind.config.json';
 import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
-import { s as script$1 } from './OrCheckbox-4433eaa6.js';
-import { s as script$2 } from './OrError-c01d0c29.js';
-import { s as script$3 } from './OrExpansionPanel-cb469c25.js';
-import { s as script$4 } from './OrHint-06ab89d7.js';
-import { s as script$6 } from './OrIconButton-6b7afbb3.js';
-import { s as script$5 } from './OrIcon-62793572.js';
-import { s as script$8, I as InputBoxSize } from './OrInputBox-912a6254.js';
-import { s as script$7 } from './OrInput-4aa8ef29.js';
-import { s as script$9 } from './OrLabel-d4c46bb6.js';
-import { s as script$a } from './OrMenuItem-54062d59.js';
-import { s as script$b } from './OrPopover-4ae174d0.js';
-import { s as script$c } from './OrTag-05c5e0fd.js';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
+import { s as script$2 } from './OrCheckbox-4433eaa6.js';
+import { s as script$3 } from './OrError-c01d0c29.js';
+import { s as script$4 } from './OrExpansionPanel-cb469c25.js';
+import { s as script$5 } from './OrHint-06ab89d7.js';
+import { s as script$7 } from './OrIconButton-6b7afbb3.js';
+import { s as script$6 } from './OrIcon-62793572.js';
+import { s as script$9, I as InputBoxSize } from './OrInputBox-912a6254.js';
+import { s as script$8 } from './OrInput-4aa8ef29.js';
+import { s as script$a } from './OrLabel-d4c46bb6.js';
+import { s as script$b } from './OrMenuItem-54062d59.js';
+import { s as script$c } from './OrPopover-4ae174d0.js';
+import { s as script$d } from './OrTag-05c5e0fd.js';
+import { openBlock, createElementBlock, normalizeClass, renderSlot, resolveComponent, resolveDirective, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
+
+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$1 = ["disabled"];
+function render$1(_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$1);
+}
+
+script$1.render = render$1;
+script$1.__file = "src/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue";
 
 const Select = [
 // Layout
@@ -41,13 +81,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',
@@ -82,18 +115,19 @@ const SelectNoSearchResults = [
 
 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,
@@ -160,6 +194,10 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
+    enableClear: {
+      type: Boolean,
+      default: false
+    },
     searchFunction: {
       type: Function,
       default: async (searchText, options) => {
@@ -203,11 +241,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)];
@@ -216,10 +258,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 = [];
@@ -319,7 +364,6 @@ var script = defineComponent({
       rootStyles,
       controlStyles,
       searchControlStyles,
-      placeholderStyles,
       dropdownStyles,
       dropdownItemStyles,
       noSearchResultsStyles,
@@ -327,6 +371,7 @@ var script = defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
+      showClear,
       selection,
       searchText,
       internalSearchOptions,
@@ -345,27 +390,26 @@ var script = defineComponent({
 });
 
 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");
@@ -417,28 +461,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,
@@ -451,7 +501,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',
@@ -580,14 +630,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 */)]),

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-98342176.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-851db474.js';
 export { s as OrSelect } from '../OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from '../OrSelect-a6e29937.js';
+export { s as OrSelectV3 } from '../OrSelect-ba0f0da3.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from '../OrSidebar-8f9b7502.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-79a7c625.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;
@@ -82,7 +86,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     controlStyles: import("vue-demi").ComputedRef<string[]>;
     searchControlStyles: import("vue-demi").ComputedRef<string[]>;
-    placeholderStyles: import("vue-demi").ComputedRef<string[]>;
     dropdownStyles: import("vue-demi").ComputedRef<string[]>;
     dropdownItemStyles: import("vue-demi").ComputedRef<string[]>;
     noSearchResultsStyles: import("vue-demi").ComputedRef<string[]>;
@@ -90,6 +93,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 +167,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 +203,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-a6e29937.js';
+export { s as OrSelectV3 } from '../../OrSelect-ba0f0da3.js';
 export { I as SelectSize } from '../../OrInputBox-912a6254.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';

package/dist/esm/v3/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, 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<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    disabled: boolean;
+}>;
+export default _default;

package/dist/esm/v3/components/or-select-v3/partials/or-select-placeholder/styles.d.ts

@@ -0,0 +1 @@
+export declare const SelectPlaceholder: string[];

package/dist/esm/v3/components/or-select-v3/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/esm/v3/index.js

@@ -75,7 +75,7 @@ export { s as OrSearch } from './OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from './OrSearch-98342176.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-851db474.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-a6e29937.js';
+export { s as OrSelectV3 } from './OrSelect-ba0f0da3.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from './OrSidebar-8f9b7502.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-79a7c625.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "5.3.0-beta.3171.0",
+  "version": "5.3.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -156,5 +156,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "7da78a6b42da15543fd27404761ce65ab98cd645"
 }

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

@@ -47,8 +47,8 @@
               <OrTag
                 v-for="option in selection"
                 :key="option.value"
-                :variant="'reset'"
-                :disabled="disabled || readonly"
+                :variant="readonly || disabled ? 'tag' : 'reset'"
+                :disabled="disabled"
                 @reset="deselect(option)"
               >
                 {{ option.label }}
@@ -57,12 +57,9 @@
           </template>
 
           <template v-else-if="popoverState === 'closed' || !enableSearch">
-            <span
-              :class="placeholderStyles"
-              :disabled="disabled ? '' : null"
-            >
+            <OrSelectPlaceholder :disabled="disabled">
               {{ placeholder }}
-            </span>
+            </OrSelectPlaceholder>
           </template>
         </template>
 
@@ -79,12 +76,9 @@
           </template>
 
           <template v-else-if="popoverState === 'closed' || !enableSearch">
-            <span
-              :class="placeholderStyles"
-              :disabled="disabled ? '' : null"
-            >
+            <OrSelectPlaceholder :disabled="disabled">
               {{ placeholder }}
-            </span>
+            </OrSelectPlaceholder>
           </template>
         </template>
       </div>
@@ -111,7 +105,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 +263,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';
@@ -285,8 +279,9 @@ import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { OrTagV3 as OrTag } from '../or-tag-v3';
+import OrSelectPlaceholder from './partials/or-select-placeholder/OrSelectPlaceholder.vue';
 import { SelectSize } from './props';
-import { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectPlaceholder, SelectSearchControl } from './styles';
+import { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectSearchControl } from './styles';
 import { SelectGroupByFunction, SelectOption, SelectSearchFunction } from './types';
 
 export default defineComponent({
@@ -302,6 +297,7 @@ export default defineComponent({
     OrLabel,
     OrMenuItem,
     OrPopover,
+    OrSelectPlaceholder,
     OrTag,
   },
 
@@ -386,6 +382,11 @@ export default defineComponent({
       default: false,
     },
 
+    enableClear: {
+      type: Boolean,
+      default: false,
+    },
+
     searchFunction: {
       type: Function as PropType<SelectSearchFunction>,
 
@@ -435,6 +436,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',
@@ -449,10 +453,6 @@ export default defineComponent({
       ...SelectSearchControl,
     ]);
 
-    const placeholderStyles = computed(() => [
-      ...SelectPlaceholder,
-    ]);
-
     const dropdownStyles = computed(() => [
       ...SelectDropdown,
       ...popover.value?.isFlipped ? SelectDropdownFlipped : SelectDropdownDefault,
@@ -469,7 +469,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 +477,10 @@ export default defineComponent({
         : isEmptyValue(proxyModelValue.value);
     });
 
+    const showClear = computed(() => {
+      return enableClear.value && !isEmptyModelValue.value;
+    });
+
     onMounted(() => {
       if (!proxyModelValue.value && props.multiple) {
         proxyModelValue.value = [];
@@ -598,7 +602,6 @@ export default defineComponent({
       rootStyles,
       controlStyles,
       searchControlStyles,
-      placeholderStyles,
       dropdownStyles,
       dropdownItemStyles,
       noSearchResultsStyles,
@@ -606,6 +609,7 @@ export default defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
+      showClear,
       selection,
       searchText,
       internalSearchOptions,

package/src/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+    :disabled="disabled ? '' : null"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi';
+import { SelectPlaceholder } from './styles';
+
+export default defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  expose: [
+    'root',
+  ],
+
+  setup() {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-select-placeholder-v3',
+      ...SelectPlaceholder,
+    ]);
+
+    return {
+      root,
+      rootStyles,
+    };
+  },
+});
+</script>

package/src/components/or-select-v3/partials/or-select-placeholder/styles.ts

@@ -0,0 +1,11 @@
+export const SelectPlaceholder: string[] = [
+  // Interactivity
+  'interactivity-none',
+
+  // Typography
+  'typography-inherit truncate',
+
+  // Theme
+  'theme-foreground-outline',
+  'dark:theme-foreground-outline-dark',
+];

package/src/components/or-select-v3/styles.ts

@@ -32,18 +32,6 @@ export const SelectSearchControl: string[] = [
   '!my-sm md:!my-none',
 ];
 
-export const SelectPlaceholder: string[] = [
-  // Theme
-  'theme-foreground-outline',
-  'dark:theme-foreground-outline-dark',
-
-  // Interactivity
-  'select-none',
-
-  // Typography
-  'truncate',
-];
-
 export const SelectDropdown: string[] = [
   // Overflow
   'overflow-y-auto',