@onereach/ui-components 4.15.3-beta.3053.0 → 4.15.3-beta.3054.0

package/dist/bundled/v2/components/OrInputV3/OrInput.js

@@ -166,7 +166,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-76960543]{min-width:0;background:0 0;outline:0}input[type=number][data-v-76960543]::-webkit-inner-spin-button{display:none}input[type=search][data-v-76960543]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-fea72d76]{min-width:0;background:0 0;outline:0}input[type=number][data-v-fea72d76]::-webkit-inner-spin-button{display:none}input[type=search][data-v-fea72d76]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -426,7 +426,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-76960543";
+const __vue_scope_id__ = "data-v-fea72d76";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

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

@@ -18,6 +18,7 @@ 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';
@@ -44,7 +45,6 @@ import '../../index-760079e7.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 import '../../hooks/useValidationAttributes.js';
-import '../../hooks/useResponsive/useResponsive.js';
 import '../OrInputBoxV3/styles.js';
 import '../OrLabelV3/styles.js';
 import '../OrMenuItemV3/styles.js';
@@ -206,7 +206,7 @@ var script = defineComponent({
     const selection = computed(() => {
       const modelValue = proxyModelValue.value;
       if (Array.isArray(modelValue)) {
-        return modelValue.map(value => props.options.find(option => option.value === value));
+        return modelValue.map(value => props.options.find(option => option.value === value)).filter(value => !!value);
       }
       return props.options.find(option => option.value === modelValue);
     });
@@ -270,6 +270,10 @@ var script = defineComponent({
       innerItems,
       outerItems
     } = useOverflow(control);
+    // Utils
+    const {
+      isMobile
+    } = useResponsive();
     return {
       root,
       inputBox,
@@ -297,7 +301,8 @@ var script = defineComponent({
       close,
       deselect,
       innerItems,
-      outerItems
+      outerItems,
+      isMobile
     };
   }
 });
@@ -402,16 +407,22 @@ var __vue_render__ = function () {
   }, {
     "model": _vm.proxyModelValue
   })] : [_c('span', {
-    class: _vm.placeholderStyles
-  }, [_vm._v(_vm._s(_vm.placeholder))])]] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
+    class: _vm.placeholderStyles,
+    attrs: {
+      "disabled": _vm.disabled ? '' : null
+    }
+  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
     return [_c('span', {
       staticClass: "truncate"
-    }, [_vm._v("\n                " + _vm._s(_vm.selection.label) + "\n              ")])];
+    }, [_vm._v("\n                " + _vm._s(_vm.selection && _vm.selection.label) + "\n              ")])];
   }, {
     "model": _vm.proxyModelValue
   })] : [_c('span', {
-    class: _vm.placeholderStyles
-  }, [_vm._v(_vm._s(_vm.placeholder))])]]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n        +" + _vm._s(_vm.outerItems.length) + "\n      ")] : _vm._e(), _vm._v(" "), _c('div', {
+    class: _vm.placeholderStyles,
+    attrs: {
+      "disabled": _vm.disabled ? '' : null
+    }
+  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n        +" + _vm._s(_vm.outerItems.length) + "\n      ")] : _vm._e(), _vm._v(" "), _c('div', {
     class: ['layout-inline-row', 'gap-sm']
   }, [!_vm.multiple && _vm.proxyModelValue ? [_c('OrIconButton', {
     attrs: {
@@ -440,7 +451,20 @@ var __vue_render__ = function () {
       "custom-styles": _vm.dropdownStyles,
       "disable-default-styles": true
     }
-  }, [_vm.resolvedSearchOptions.length > 0 ? [_vm.groupByFunction ? _vm._l(_vm.groupedOptions, function (group, groupName) {
+  }, [_vm.isMobile ? [_c('OrInput', {
+    class: _vm.searchControlStyles,
+    attrs: {
+      "type": 'search',
+      "placeholder": 'Search'
+    },
+    model: {
+      value: _vm.searchText,
+      callback: function ($$v) {
+        _vm.searchText = $$v;
+      },
+      expression: "searchText"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.resolvedSearchOptions.length > 0 ? [_vm.groupByFunction ? _vm._l(_vm.groupedOptions, function (group, groupName) {
     return _c('OrExpansionPanel', {
       key: groupName,
       attrs: {

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

@@ -40,6 +40,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     deselect: (option: SelectOption) => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     options: {
         type: PropType<SelectOption[]>;
@@ -228,6 +229,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     deselect: (option: SelectOption) => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string | number | object | string[] | object[] | number[];
     label: string;

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

@@ -15,10 +15,10 @@ const SelectControl = [
 // Typography
 'typography-inherit'];
 const SelectSearchControl = [
-// Box
-'w-full',
+// Layout
+'grow',
 // Spacing
-'!mx-none', '!my-none'];
+'!mx-lg md:!mx-none', '!my-sm md:!my-none'];
 const SelectPlaceholder = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',