@onereach/ui-components 8.18.3-beta.3946.0 → 8.18.3

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

@@ -265,7 +265,7 @@ import { TagsOverflow } from '../or-tags-v3';
 import { OrSelectMultipleControl, OrSelectSingleControl } from './partials';
 import { SelectSize } from './props';
 import { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectSearchControl } from './styles';
-import { RawValue, SelectGroupByFunction, SelectOption, SelectSearchFunction, SelectValue } from './types';
+import { SelectGroupByFunction, SelectOption, SelectSearchFunction, SelectValue } from './types';
 
 export default defineComponent({
   components: {
@@ -564,7 +564,7 @@ export default defineComponent({
       }
     }
 
-    function deselect(option: RawValue): void {
+    function deselect(option: string): void {
       const modelValue = proxyModelValue.value;
 
       if (Array.isArray(modelValue)) {
@@ -572,7 +572,7 @@ export default defineComponent({
       }
     }
 
-    function toggleOption(option: RawValue): void {
+    function toggleOption(option: string): void {
       const modelValue = proxyModelValue.value;
 
       if (Array.isArray(modelValue)) {

package/src/components/or-tabs-v3/OrTabs.vue

@@ -50,7 +50,15 @@
     </div>
 
     <div :class="contentStyles">
-      <slot :name="String(proxyModelValue)" />
+      <template v-for="tab in items">
+        <div
+          v-if="isTabRendered(tab.value)"
+          v-show="String(proxyModelValue) === String(tab.value)"
+          :key="tab.value"
+        >
+          <slot :name="String(tab.value)" />
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -99,6 +107,11 @@ export default defineComponent({
       type: String as PropType<`${TabsVariant}`>,
       default: () => TabsVariant.Default,
     },
+
+    keepAlive: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [
@@ -177,6 +190,10 @@ export default defineComponent({
       };
     }
 
+    function isTabRendered(value: string|number): boolean {
+      return props.keepAlive || proxyModelValue.value === value;
+    }
+
     // Effects
     watch([
       () => props.items,
@@ -223,6 +240,7 @@ export default defineComponent({
       proxyModelValue,
       activeTab,
       selectTab,
+      isTabRendered,
     };
   },
 });