From 3c03701d12663ffbb1c99d5927354df979d3b260 Mon Sep 17 00:00:00 2001
From: haild <haileduc1111@gmail.com>
Date: Wed, 13 Mar 2024 09:42:16 +0700
Subject: [PATCH 1/6] Update: Transition for IndexFilters

---
 src/components/Filters/Filters.vue           |  12 +-
 src/components/IndexFilters/IndexFilters.vue | 162 ++++++++++++++-----
 2 files changed, 126 insertions(+), 48 deletions(-)

diff --git a/src/components/Filters/Filters.vue b/src/components/Filters/Filters.vue
index 4123725e..f3659bc8 100644
--- a/src/components/Filters/Filters.vue
+++ b/src/components/Filters/Filters.vue
@@ -1,5 +1,8 @@
 <template lang="pug">
-div(:class="filtersClassName")
+div(
+  :class="filtersClassName",
+  :style="searchFieldStyle",
+)
   //- QueryField
   div(
     v-if="!hideQueryField",
@@ -13,7 +16,6 @@ div(:class="filtersClassName")
       )
         div(
           :class="styles.SearchField",
-          :style="searchFieldStyle",
         )
           SearchField(
             v-model="modelValue",
@@ -45,7 +47,7 @@ div(:class="filtersClassName")
 </template>
 
 <script setup lang="ts">
-import { type VNode, computed } from 'vue';
+import { type VNode, computed, ref } from 'vue';
 import { classNames } from '@/utilities/css';
 import type { AppliedFilterInterface, FilterInterface, VueNode } from '@/utilities/types';
 import {
@@ -159,8 +161,6 @@ const slots = defineSlots<{
   default?: (_?: VueNode) => VNode[];
 }>();
 
-// const modelValue = defineModel<string>();
-
 const modelValue = computed({
   get: () => props.queryValue || '',
   set: (value: string) => emits('query-change', value),
@@ -171,7 +171,7 @@ const filtersClassName = computed(() => classNames(
   props.hideQueryField && styles.hideQueryField,
 ));
 const searchFieldStyle = computed(() => {
-  return props.mountedState && !props.hideQueryField
+  return props.mountedState
     ? {
         ...defaultStyle,
         ...transitionStyles[props.mountedState],
diff --git a/src/components/IndexFilters/IndexFilters.vue b/src/components/IndexFilters/IndexFilters.vue
index 7842e672..820c4c0f 100644
--- a/src/components/IndexFilters/IndexFilters.vue
+++ b/src/components/IndexFilters/IndexFilters.vue
@@ -9,7 +9,7 @@ div(
     :class="indexFiltersClassName",
   )
     div(ref="defaultRef")
-      Container(v-if="mode !== IndexFiltersMode.Filtering")
+      Container(v-show="mode !== IndexFiltersMode.Filtering")
         InlineStack(
           align="start",
           block-align="center",
@@ -19,7 +19,7 @@ div(
           div(:class="tabsWrapperClassName")
             div(
               :class="styles.TabsInner",
-              :style="{...defaultStyle, ...transitionStyles[isSticky ? 'exited' : 'entered']}",
+              :style="{...defaultStyle, ...transitionStyles[transitionButtonState]}",
             )
               Tabs(
                 :tabs="tabs",
@@ -40,17 +40,27 @@ div(
               :class="styles.DesktopLoading",
             )
               Spinner(size="small")
-            template(v-if="mode === IndexFiltersMode.Default")
+            Transition(
+              name='custom-index-filters-button-transition',
+              @before-enter="onTransitionButtonBeforeEnter",
+              @enter="onTransitionButtonEnter",
+              @after-enter="onTransitionButtonAfterEnter",
+              @before-leave="onTransitionButtonBeforeLeave",
+              @leave="onTransitionButtonLeave",
+              @after-leave="onTransitionButtonAfterLeave",
+            )
               SearchFilterButton(
+                v-show="mode === IndexFiltersMode.Default"
                 v-if="!(hideFilters && hideQueryField)",
                 :label="searchFilterAriaLabel",
                 :tooltip-content="searchFilterTooltip",
                 :disabled="disabled",
                 :hide-query-field="hideQueryField",
                 :hide-filters="hideFilters",
-                :style="{...defaultStyle, ...transitionStyles[isSticky ? 'exited' : 'entered']}",
+                :style="{...defaultStyle, ...transitionStyles[transitionButtonState]}",
                 @click="handleClickFilterButton",
               )
+            template(v-if="mode === IndexFiltersMode.Default")
               EditColumnsButton(
                 v-if="showEditColumnsButton",
                 :disabled="disabled",
@@ -72,48 +82,56 @@ div(
                 :view-names="viewNames",
               )
     div(ref="filteringRef")
-      Filters(
-        v-if="mode === IndexFiltersMode.Filtering",
-        borderless-query-field,
-        :close-on-child-overlay-click="closeOnChildOverlayClick",
-        :query-value="queryValue",
-        :query-placeholder="queryPlaceholder",
-        :filters="filters",
-        :applied-filters="appliedFilters",
-        :hide-filters="hideFilters",
-        :hide-query-field="hideQueryField",
-        :disable-query-field="disableQueryField",
-        :focused="filtersFocused",
-        :loading="loading || isActionLoading",
-        :mounted-state="breakpoints.mdDown ? undefined : 'entered'",
-        @query-change="handleChangeSearch",
-        @query-clear="handleClearSearch",
-        @query-blur="handleQueryBlur",
-        @query-focus="handleQueryFocus",
-        @add-filter-click="emits('filter-click')",
-        @clear-all="emits('clear-all')",
+      Transition(
+        name='slide-fade',
+        @before-enter="onTransitionFiltersBeforeEnter",
+        @enter="onTransitionFiltersEnter",
+        @after-enter="onTransitionFiltersAfterEnter",
+        @before-leave="onTransitionFiltersBeforeLeave",
+        @leave="onTransitionFiltersLeave",
       )
-        div(:class="styles.ButtonWrap")
-          InlineStack(gap="200", align="start", block-align="center")
-            div(:style="{...defaultStyle, ...transitionStyles[isSticky ? 'exited' : 'entered']}")
-              UpdateButtons(
-                v-if="enhancedCancelAction || enhancedPrimaryAction",
-                :primaryAction="enhancedPrimaryAction",
-                :cancelAction="enhancedCancelAction",
+        Filters(
+          v-show="mode === IndexFiltersMode.Filtering",
+          borderless-query-field,
+          :close-on-child-overlay-click="closeOnChildOverlayClick",
+          :query-value="queryValue",
+          :query-placeholder="queryPlaceholder",
+          :filters="filters",
+          :applied-filters="appliedFilters",
+          :hide-filters="hideFilters",
+          :hide-query-field="hideQueryField",
+          :disable-query-field="disableQueryField",
+          :focused="filtersFocused",
+          :loading="loading || isActionLoading",
+          :mounted-state="breakpoints.mdDown ? undefined : transitionFiltersState",
+          @query-change="handleChangeSearch",
+          @query-clear="handleClearSearch",
+          @query-blur="handleQueryBlur",
+          @query-focus="handleQueryFocus",
+          @add-filter-click="emits('filter-click')",
+          @clear-all="emits('clear-all')",
+        )
+          div(:class="styles.ButtonWrap")
+            InlineStack(gap="200", align="start", block-align="center")
+              div(:style="{...defaultStyle, ...transitionStyles[transitionFiltersState]}")
+                UpdateButtons(
+                  v-if="enhancedCancelAction || enhancedPrimaryAction",
+                  :primaryAction="enhancedPrimaryAction",
+                  :cancelAction="enhancedCancelAction",
+                  :disabled="disabled",
+                  :view-names="viewNames",
+                )
+              SortButton(
+                v-if="sortOptions && sortOptions.length",
+                :choices="sortOptions",
+                :selected="sortSelected || ['']",
                 :disabled="disabled",
-                :view-names="viewNames",
+                v-bind="sortButtonEvents",
               )
-            SortButton(
-              v-if="sortOptions && sortOptions.length",
-              :choices="sortOptions",
-              :selected="sortSelected || ['']",
-              :disabled="disabled",
-              v-bind="sortButtonEvents",
-            )
 </template>
 
 <script setup lang="ts">
-import { ref, computed, getCurrentInstance } from 'vue';
+import { ref, computed, getCurrentInstance, Transition, watch } from 'vue';
 import useI18n from '@/use/useI18n';
 import { useToggle } from '@/use/useToggle';
 import { useIsSticky } from '@/use/useIsSticky';
@@ -244,6 +262,7 @@ const props = withDefaults(defineProps<IndexFiltersProps>(), {
   queryValue: '',
   isFlushWhenSticky: false,
   canCreateNewView: true,
+  autoFocusSearchField: true,
 });
 const emits: any = defineEmits<IndexFiltersEvents>();
 
@@ -261,6 +280,8 @@ const {intersectionRef, measurerRef, indexFilteringHeight, isSticky} =
 
 const defaultRef = ref<HTMLElement | null>(null);
 const filteringRef = ref<HTMLElement | null>(null);
+const transitionFiltersState = ref(props.mode === IndexFiltersMode.Filtering ? 'entering' : 'unmounted');
+const transitionButtonState = ref('entering');
 
 const isActionLoading = computed(() => props.primaryAction?.loading || props.cancelAction?.loading);
 const searchFilterTooltipLabelId = computed(() => {
@@ -348,8 +369,6 @@ const handleModeChange = (newMode: IndexFiltersMode) => {
   }
 };
 
-useOnValueChange(props.mode, handleModeChange);
-
 useEventListener('keydown', (event) => {
   const hasNoFiltersOrSearch = props.hideQueryField && props.hideFilters;
   if (props.disableKeyboardShortcuts || hasNoFiltersOrSearch) return;
@@ -410,4 +429,63 @@ function onPressF() {
   }
   beginEdit(IndexFiltersMode.Filtering);
 }
+
+// Filters Mode Transition Action
+function onTransitionFiltersBeforeEnter() {
+  transitionFiltersState.value = 'entering';
+}
+
+function onTransitionFiltersEnter() {
+  transitionFiltersState.value = 'entered';
+}
+
+function onTransitionFiltersAfterEnter() {
+  transitionFiltersState.value = 'entered';
+}
+
+function onTransitionFiltersBeforeLeave() {
+  transitionFiltersState.value = 'exiting';
+}
+
+function onTransitionFiltersLeave() {
+  transitionFiltersState.value = 'exited';
+}
+
+function onTransitionFiltersAfterLeave() {
+  transitionFiltersState.value = 'unmounted';
+}
+
+// - Button Filter Icon Transition Action
+function onTransitionButtonBeforeEnter() {
+  transitionButtonState.value = 'entering';
+}
+
+function onTransitionButtonEnter() {
+  transitionButtonState.value = 'entered';
+}
+
+function onTransitionButtonAfterEnter() {
+  transitionButtonState.value = 'entered';
+}
+
+function onTransitionButtonBeforeLeave() {
+  transitionButtonState.value = 'exiting';
+}
+
+function onTransitionButtonLeave() {
+  transitionButtonState.value = 'exited';
+}
+
+function onTransitionButtonAfterLeave() {
+  transitionButtonState.value = 'unmounted';
+}
+
+watch(
+  () => props.mode,
+  () => {
+    useOnValueChange(props.mode, handleModeChange(props.mode));
+  },
+  { flush: 'post' },
+);
 </script>
+

From 6a447640ca416f8f5f43ce228039bac8d3f8d8f6 Mon Sep 17 00:00:00 2001
From: haild <haileduc1111@gmail.com>
Date: Wed, 13 Mar 2024 09:43:32 +0700
Subject: [PATCH 2/6] Update: remove unexpected indent

---
 src/components/IndexFilters/IndexFilters.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/IndexFilters/IndexFilters.vue b/src/components/IndexFilters/IndexFilters.vue
index 820c4c0f..da24496b 100644
--- a/src/components/IndexFilters/IndexFilters.vue
+++ b/src/components/IndexFilters/IndexFilters.vue
@@ -488,4 +488,3 @@ watch(
   { flush: 'post' },
 );
 </script>
-

From 77cc43f92f7be47ede8e09ecf8e29aaa2cc8d0d2 Mon Sep 17 00:00:00 2001
From: haild <haileduc1111@gmail.com>
Date: Wed, 13 Mar 2024 10:11:37 +0700
Subject: [PATCH 3/6] Update: v-show -> v-if

---
 src/components/IndexFilters/IndexFilters.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/IndexFilters/IndexFilters.vue b/src/components/IndexFilters/IndexFilters.vue
index da24496b..6a370339 100644
--- a/src/components/IndexFilters/IndexFilters.vue
+++ b/src/components/IndexFilters/IndexFilters.vue
@@ -50,8 +50,7 @@ div(
               @after-leave="onTransitionButtonAfterLeave",
             )
               SearchFilterButton(
-                v-show="mode === IndexFiltersMode.Default"
-                v-if="!(hideFilters && hideQueryField)",
+                v-if="!(hideFilters && hideQueryField) && mode === IndexFiltersMode.Default",
                 :label="searchFilterAriaLabel",
                 :tooltip-content="searchFilterTooltip",
                 :disabled="disabled",
@@ -91,7 +90,7 @@ div(
         @leave="onTransitionFiltersLeave",
       )
         Filters(
-          v-show="mode === IndexFiltersMode.Filtering",
+          v-if="mode === IndexFiltersMode.Filtering",
           borderless-query-field,
           :close-on-child-overlay-click="closeOnChildOverlayClick",
           :query-value="queryValue",
@@ -432,7 +431,9 @@ function onPressF() {
 
 // Filters Mode Transition Action
 function onTransitionFiltersBeforeEnter() {
-  transitionFiltersState.value = 'entering';
+  setTimeout(() => {
+    transitionFiltersState.value = 'entering';
+  }, 1);
 }
 
 function onTransitionFiltersEnter() {

From de1a1f6e9d17fd6c71d5ab9ba4d4d821d8b6df5c Mon Sep 17 00:00:00 2001
From: haild <haileduc1111@gmail.com>
Date: Wed, 13 Mar 2024 11:25:37 +0700
Subject: [PATCH 4/6] Update: v-show -> v-if

---
 src/components/IndexFilters/IndexFilters.vue | 47 +++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/components/IndexFilters/IndexFilters.vue b/src/components/IndexFilters/IndexFilters.vue
index 6a370339..ccaa6d27 100644
--- a/src/components/IndexFilters/IndexFilters.vue
+++ b/src/components/IndexFilters/IndexFilters.vue
@@ -88,9 +88,10 @@ div(
         @after-enter="onTransitionFiltersAfterEnter",
         @before-leave="onTransitionFiltersBeforeLeave",
         @leave="onTransitionFiltersLeave",
+        @after-leave="onTransitionFiltersAfterLeave",
       )
         Filters(
-          v-if="mode === IndexFiltersMode.Filtering",
+          v-show="mode === IndexFiltersMode.Filtering",
           borderless-query-field,
           :close-on-child-overlay-click="closeOnChildOverlayClick",
           :query-value="queryValue",
@@ -437,48 +438,70 @@ function onTransitionFiltersBeforeEnter() {
 }
 
 function onTransitionFiltersEnter() {
-  transitionFiltersState.value = 'entered';
+  setTimeout(() => {
+    transitionFiltersState.value = 'entered';
+  }, 1);
 }
 
 function onTransitionFiltersAfterEnter() {
-  transitionFiltersState.value = 'entered';
+  setTimeout(() => {
+    transitionFiltersState.value = 'entered';
+  }, 1);
 }
 
 function onTransitionFiltersBeforeLeave() {
-  transitionFiltersState.value = 'exiting';
+  setTimeout(() => {
+    transitionFiltersState.value = 'exiting';
+  }, 1);
 }
 
 function onTransitionFiltersLeave() {
-  transitionFiltersState.value = 'exited';
+  setTimeout(() => {
+    transitionFiltersState.value = 'exited';
+  }, 1);
 }
 
 function onTransitionFiltersAfterLeave() {
-  transitionFiltersState.value = 'unmounted';
+  setTimeout(() => {
+    transitionFiltersState.value = 'unmounted';
+  }, 1);
 }
 
 // - Button Filter Icon Transition Action
 function onTransitionButtonBeforeEnter() {
-  transitionButtonState.value = 'entering';
+  setTimeout(() => {
+    transitionButtonState.value = 'entering';
+  }, 1);
 }
 
 function onTransitionButtonEnter() {
-  transitionButtonState.value = 'entered';
+  setTimeout(() => {
+    transitionButtonState.value = 'entered';
+  }, 1);
 }
 
 function onTransitionButtonAfterEnter() {
-  transitionButtonState.value = 'entered';
+  setTimeout(() => {
+    transitionButtonState.value = 'entered';
+  }, 1);
 }
 
 function onTransitionButtonBeforeLeave() {
-  transitionButtonState.value = 'exiting';
+  setTimeout(() => {
+    transitionButtonState.value = 'exiting';
+  }, 1);
 }
 
 function onTransitionButtonLeave() {
-  transitionButtonState.value = 'exited';
+  setTimeout(() => {
+    transitionButtonState.value = 'exited';
+  }, 1);
 }
 
 function onTransitionButtonAfterLeave() {
-  transitionButtonState.value = 'unmounted';
+  setTimeout(() => {
+    transitionButtonState.value = 'umnounted';
+  }, 1);
 }
 
 watch(

From 37796e1c281d33eb873b8ac4620218f8adf65b3a Mon Sep 17 00:00:00 2001
From: "oe.sonnh" <sonnh@ownego.com>
Date: Wed, 13 Mar 2024 14:48:01 +0700
Subject: [PATCH 5/6] Fix: transition for IndexFilter

---
 src/components/Filters/Filters.vue            |  12 +-
 .../components/FiltersBar/FiltersBar.vue      |  16 +-
 src/components/IndexFilters/IndexFilters.vue  | 208 +++++++++---------
 src/components/IndexFilters/types.ts          |   2 +
 src/utilities/use-on-value-change.ts          |  15 --
 5 files changed, 118 insertions(+), 135 deletions(-)
 delete mode 100644 src/utilities/use-on-value-change.ts

diff --git a/src/components/Filters/Filters.vue b/src/components/Filters/Filters.vue
index f3659bc8..9c3b2baa 100644
--- a/src/components/Filters/Filters.vue
+++ b/src/components/Filters/Filters.vue
@@ -1,5 +1,6 @@
 <template lang="pug">
 div(
+  ref="containerRef",
   :class="filtersClassName",
   :style="searchFieldStyle",
 )
@@ -39,7 +40,7 @@ div(
     :hide-query-field="hideQueryField",
     :disable-filters="disableFilters",
     :close-on-child-overlay-click="closeOnChildOverlayClick",
-    :mounted-state-styles="mountedStateStyles",
+    :style="mountedStateStyles",
     @add-filter-click="emits('add-filter-click')",
     @clear-all="emits('clear-all')",
   )
@@ -47,7 +48,7 @@ div(
 </template>
 
 <script setup lang="ts">
-import { type VNode, computed, ref } from 'vue';
+import { type VNode, computed } from 'vue';
 import { classNames } from '@/utilities/css';
 import type { AppliedFilterInterface, FilterInterface, VueNode } from '@/utilities/types';
 import {
@@ -59,6 +60,7 @@ import {
   SearchField,
 } from './components';
 import styles  from '@polaris/components/Filters/Filters.module.scss';
+import { type TransitionStatus } from '../IndexFilters/types';
 
 const TRANSITION_DURATION = 'var(--p-motion-duration-150)';
 const TRANSITION_MARGIN = '-36px';
@@ -105,8 +107,6 @@ const transitionFilterStyles = {
   },
 };
 
-type TransitionStatus = "entering" | "entered" | "exiting" | "exited" | "unmounted";
-
 export type FiltersProps = {
   /** Currently entered text in the query field */
   queryValue?: string;
@@ -171,6 +171,10 @@ const filtersClassName = computed(() => classNames(
   props.hideQueryField && styles.hideQueryField,
 ));
 const searchFieldStyle = computed(() => {
+  if (props.mountedState === 'entered') {
+    return undefined;
+  }
+
   return props.mountedState
     ? {
         ...defaultStyle,
diff --git a/src/components/Filters/components/FiltersBar/FiltersBar.vue b/src/components/Filters/components/FiltersBar/FiltersBar.vue
index 80623368..0fe98423 100644
--- a/src/components/Filters/components/FiltersBar/FiltersBar.vue
+++ b/src/components/Filters/components/FiltersBar/FiltersBar.vue
@@ -2,7 +2,6 @@
 div(
   aria-live="polite",
   :class="filterWrapperClass",
-  :style="mountedStateStyles",
 )
   div(:class="classNames(styles.FiltersInner)")
     div(:class="classNames(styles.FiltersStickyArea)")
@@ -70,7 +69,7 @@ div(
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import {
   Popover,
   ActionList,
@@ -81,7 +80,6 @@ import {
   Button,
 } from '@/components';
 import FilterPill from '../FilterPill/FilterPill.vue';
-import { useOnValueChange } from '@/utilities/use-on-value-change';
 import { classNames } from '@/utilities/css';
 import { useBreakpoints } from '@/use/useBreakpoints';
 import type {
@@ -112,7 +110,6 @@ type FiltersBarProps = {
   disableFilters?: boolean;
   /** Whether the filter should close when clicking inside another Popover. */
   closeOnChildOverlayClick?: boolean;
-  mountedStateStyles?: any;
 };
 
 type FilterBarEvents = {
@@ -156,10 +153,6 @@ const localPinnedFilters = ref<string[]>(
   pinnedFiltersFromPropsAndAppliedFilters.value.map((filter) => filter.name),
 );
 
-useOnValueChange(props.filters.length, () => {
-  localPinnedFilters.value = pinnedFiltersFromPropsAndAppliedFilters.value.map((filter) => filter.name);
-});
-
 const pinnedFilters = computed(() => {
   return localPinnedFilters.value
     .map((key) => props.filters.find((filter) => filter.name === key))
@@ -280,4 +273,11 @@ const handleClearAllFilters = () => {
 onMounted(() => {
   hasMounted.value = true;
 });
+
+watch(
+  () => props.filters.length,
+  () => {
+    localPinnedFilters.value = pinnedFiltersFromPropsAndAppliedFilters.value.map((filter) => filter.name);
+  },
+);
 </script>
diff --git a/src/components/IndexFilters/IndexFilters.vue b/src/components/IndexFilters/IndexFilters.vue
index ccaa6d27..816675df 100644
--- a/src/components/IndexFilters/IndexFilters.vue
+++ b/src/components/IndexFilters/IndexFilters.vue
@@ -9,46 +9,48 @@ div(
     :class="indexFiltersClassName",
   )
     div(ref="defaultRef")
-      Container(v-show="mode !== IndexFiltersMode.Filtering")
-        InlineStack(
-          align="start",
-          block-align="center",
-          :gap="{ xs: '0', md: '200'}",
-          :wrap="false",
-        )
-          div(:class="tabsWrapperClassName")
-            div(
-              :class="styles.TabsInner",
-              :style="{...defaultStyle, ...transitionStyles[transitionButtonState]}",
-            )
-              Tabs(
-                :tabs="tabs",
-                :selected="selected",
-                :disabled="Boolean(mode !== IndexFiltersMode.Default || disabled)",
-                :can-create-new-view="canCreateNewView",
-                @select="emits('select', $event)",
-                @create-new-view="emits('create-new-view', $event)",
+      Transition(
+        name='custom-index-filters-button-transition',
+        :css="false",
+        @before-enter="onTransitionButtonBeforeEnter",
+        @enter="onTransitionButtonEnter",
+        @after-enter="onTransitionButtonAfterEnter",
+        @before-leave="onTransitionButtonBeforeLeave",
+        @leave="onTransitionButtonLeave",
+        @after-leave="onTransitionButtonAfterLeave",
+      )
+        Container(v-if="mode !== IndexFiltersMode.Filtering")
+          InlineStack(
+            align="start",
+            block-align="center",
+            :gap="{ xs: '0', md: '200'}",
+            :wrap="false",
+          )
+            div(:class="tabsWrapperClassName")
+              div(
+                :class="styles.TabsInner",
+                :style="{...defaultStyle, ...transitionStyles[transitionButtonState]}",
               )
-            div(
-              v-if="isLoading && breakpoints.mdDown",
-              :class="styles.TabsLoading",
-            )
-              Spinner(size="small")
-          div(:class="styles.ActionWrap")
-            div(
-              v-if="isLoading && !breakpoints.mdDown",
-              :class="styles.DesktopLoading",
-            )
-              Spinner(size="small")
-            Transition(
-              name='custom-index-filters-button-transition',
-              @before-enter="onTransitionButtonBeforeEnter",
-              @enter="onTransitionButtonEnter",
-              @after-enter="onTransitionButtonAfterEnter",
-              @before-leave="onTransitionButtonBeforeLeave",
-              @leave="onTransitionButtonLeave",
-              @after-leave="onTransitionButtonAfterLeave",
-            )
+                Tabs(
+                  :tabs="tabs",
+                  :selected="selected",
+                  :disabled="Boolean(mode !== IndexFiltersMode.Default || disabled)",
+                  :can-create-new-view="canCreateNewView",
+                  @select="emits('select', $event)",
+                  @create-new-view="emits('create-new-view', $event)",
+                )
+              div(
+                v-if="isLoading && breakpoints.mdDown",
+                :class="styles.TabsLoading",
+              )
+                Spinner(size="small")
+            div(:class="styles.ActionWrap")
+              div(
+                v-if="isLoading && !breakpoints.mdDown",
+                :class="styles.DesktopLoading",
+              )
+                Spinner(size="small")
+
               SearchFilterButton(
                 v-if="!(hideFilters && hideQueryField) && mode === IndexFiltersMode.Default",
                 :label="searchFilterAriaLabel",
@@ -56,33 +58,36 @@ div(
                 :disabled="disabled",
                 :hide-query-field="hideQueryField",
                 :hide-filters="hideFilters",
-                :style="{...defaultStyle, ...transitionStyles[transitionButtonState]}",
+                :style="mountedStateStyles",
                 @click="handleClickFilterButton",
               )
-            template(v-if="mode === IndexFiltersMode.Default")
-              EditColumnsButton(
-                v-if="showEditColumnsButton",
-                :disabled="disabled",
-                @click="handleClickEditColumnsButton",
-              )
-              SortButton(
-                v-if="sortOptions && sortOptions.length",
-                :choices="sortOptions",
-                :selected="sortSelected || ['']",
-                :disabled="disabled",
-                v-bind="sortButtonEvents",
-              )
-            template(v-if="mode === IndexFiltersMode.EditingColumns")
-              UpdateButtons(
-                v-if="enhancedCancelAction || enhancedPrimaryAction",
-                :primaryAction="enhancedPrimaryAction",
-                :cancelAction="enhancedCancelAction",
-                :disabled="disabled",
-                :view-names="viewNames",
-              )
+
+              template(v-if="mode === IndexFiltersMode.Default")
+                EditColumnsButton(
+                  v-if="showEditColumnsButton",
+                  :disabled="disabled",
+                  @click="handleClickEditColumnsButton",
+                )
+                SortButton(
+                  v-if="sortOptions && sortOptions.length",
+                  :choices="sortOptions",
+                  :selected="sortSelected || ['']",
+                  :disabled="disabled",
+                  v-bind="sortButtonEvents",
+                )
+              template(v-if="mode === IndexFiltersMode.EditingColumns")
+                UpdateButtons(
+                  v-if="enhancedCancelAction || enhancedPrimaryAction",
+                  :primaryAction="enhancedPrimaryAction",
+                  :cancelAction="enhancedCancelAction",
+                  :disabled="disabled",
+                  :view-names="viewNames",
+                )
+
     div(ref="filteringRef")
       Transition(
         name='slide-fade',
+        :css="false",
         @before-enter="onTransitionFiltersBeforeEnter",
         @enter="onTransitionFiltersEnter",
         @after-enter="onTransitionFiltersAfterEnter",
@@ -91,7 +96,7 @@ div(
         @after-leave="onTransitionFiltersAfterLeave",
       )
         Filters(
-          v-show="mode === IndexFiltersMode.Filtering",
+          v-if="mode === IndexFiltersMode.Filtering",
           borderless-query-field,
           :close-on-child-overlay-click="closeOnChildOverlayClick",
           :query-value="queryValue",
@@ -131,14 +136,13 @@ div(
 </template>
 
 <script setup lang="ts">
-import { ref, computed, getCurrentInstance, Transition, watch } from 'vue';
+import { ref, computed, getCurrentInstance, Transition, watch, type CSSProperties } from 'vue';
 import useI18n from '@/use/useI18n';
 import { useToggle } from '@/use/useToggle';
 import { useIsSticky } from '@/use/useIsSticky';
 import { useBreakpoints } from '@/use/useBreakpoints';
 import { classNames } from '@/utilities/css';
 import { useEventListener } from '@/utilities/use-event-listener';
-import { useOnValueChange } from '@/utilities/use-on-value-change';
 import {
   InlineStack,
   Spinner,
@@ -158,16 +162,17 @@ import {
   type IndexFiltersCancelAction,
   type IndexFiltersPrimaryAction,
   type SortButtonChoice,
+  type TransitionStatus,
   IndexFiltersMode,
 } from './types';
 import styles from '@polaris/components/IndexFilters/IndexFilters.module.scss';
 
-const TRANSITION_DURATION = 150;
+const TRANSITION_DURATION = 'var(--p-motion-duration-150)';
 
 const DEFAULT_IGNORED_TAGS = ['INPUT', 'SELECT', 'TEXTAREA'];
 
 const defaultStyle = {
-  transition: `opacity ${TRANSITION_DURATION}ms var(--p-motion-ease)`,
+  transition: `opacity ${TRANSITION_DURATION} var(--p-motion-ease)`,
   opacity: 0,
 };
 
@@ -177,7 +182,7 @@ const transitionStyles = {
   exiting: {opacity: 0},
   exited: {opacity: 0},
   unmounted: {opacity: 0},
-};
+} as Record<TransitionStatus, CSSProperties>;
 
 type ExecutedCallback = (name: string) => Promise<boolean>;
 
@@ -280,8 +285,17 @@ const {intersectionRef, measurerRef, indexFilteringHeight, isSticky} =
 
 const defaultRef = ref<HTMLElement | null>(null);
 const filteringRef = ref<HTMLElement | null>(null);
-const transitionFiltersState = ref(props.mode === IndexFiltersMode.Filtering ? 'entering' : 'unmounted');
-const transitionButtonState = ref('entering');
+const transitionFiltersState = ref<TransitionStatus>(props.mode === IndexFiltersMode.Filtering ? 'entering' : 'unmounted');
+const transitionButtonState = ref<TransitionStatus>('entered');
+
+const mountedStateStyles = computed<CSSProperties>(() => {
+  return transitionButtonState.value
+    ? {
+        ...defaultStyle,
+        ...transitionStyles[transitionButtonState.value],
+      }
+    : {};
+});
 
 const isActionLoading = computed(() => props.primaryAction?.loading || props.cancelAction?.loading);
 const searchFilterTooltipLabelId = computed(() => {
@@ -361,7 +375,7 @@ const onExecutedCancelAction = () => {
   emits('set-mode', IndexFiltersMode.Default);
 };
 
-const handleModeChange = (newMode: IndexFiltersMode) => {
+const handleModeChange = (newMode: IndexFiltersMode, _oldMode: IndexFiltersMode) => {
   if (newMode === IndexFiltersMode.Filtering && props.autoFocusSearchField) {
     setFiltersFocused();
   } else {
@@ -432,82 +446,60 @@ function onPressF() {
 
 // Filters Mode Transition Action
 function onTransitionFiltersBeforeEnter() {
-  setTimeout(() => {
-    transitionFiltersState.value = 'entering';
-  }, 1);
+  setTimeout(() => transitionFiltersState.value = 'entering', 1);
 }
 
 function onTransitionFiltersEnter() {
-  setTimeout(() => {
-    transitionFiltersState.value = 'entered';
-  }, 1);
+  setTimeout(() => transitionFiltersState.value = 'entered', 1);
 }
 
 function onTransitionFiltersAfterEnter() {
-  setTimeout(() => {
-    transitionFiltersState.value = 'entered';
-  }, 1);
+  setTimeout(() => transitionFiltersState.value = 'entered', 1);
 }
 
 function onTransitionFiltersBeforeLeave() {
-  setTimeout(() => {
-    transitionFiltersState.value = 'exiting';
-  }, 1);
+  transitionFiltersState.value = 'exiting';
 }
 
 function onTransitionFiltersLeave() {
-  setTimeout(() => {
-    transitionFiltersState.value = 'exited';
-  }, 1);
+  transitionFiltersState.value = 'exited';
 }
 
 function onTransitionFiltersAfterLeave() {
-  setTimeout(() => {
-    transitionFiltersState.value = 'unmounted';
-  }, 1);
+  transitionFiltersState.value = 'unmounted';
 }
 
 // - Button Filter Icon Transition Action
 function onTransitionButtonBeforeEnter() {
-  setTimeout(() => {
-    transitionButtonState.value = 'entering';
-  }, 1);
+  transitionButtonState.value = 'entering';
 }
 
 function onTransitionButtonEnter() {
-  setTimeout(() => {
-    transitionButtonState.value = 'entered';
-  }, 1);
+  transitionButtonState.value = 'entered';
 }
 
 function onTransitionButtonAfterEnter() {
-  setTimeout(() => {
-    transitionButtonState.value = 'entered';
-  }, 1);
+  transitionButtonState.value = 'entered';
 }
 
 function onTransitionButtonBeforeLeave() {
-  setTimeout(() => {
-    transitionButtonState.value = 'exiting';
-  }, 1);
+  transitionButtonState.value = 'exiting';
 }
 
 function onTransitionButtonLeave() {
-  setTimeout(() => {
-    transitionButtonState.value = 'exited';
-  }, 1);
+  transitionButtonState.value = 'exited';
 }
 
 function onTransitionButtonAfterLeave() {
-  setTimeout(() => {
-    transitionButtonState.value = 'umnounted';
-  }, 1);
+  transitionButtonState.value = 'unmounted';
 }
 
 watch(
   () => props.mode,
-  () => {
-    useOnValueChange(props.mode, handleModeChange(props.mode));
+  (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      handleModeChange(newValue, oldValue);
+    }
   },
   { flush: 'post' },
 );
diff --git a/src/components/IndexFilters/types.ts b/src/components/IndexFilters/types.ts
index e3a63f49..f68221d8 100644
--- a/src/components/IndexFilters/types.ts
+++ b/src/components/IndexFilters/types.ts
@@ -1,5 +1,7 @@
 type SortValue = `${string} ${'asc' | 'desc'}`;
 
+export type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited' | 'unmounted';
+
 export interface SortButtonChoice {
   label: string;
   disabled?: boolean;
diff --git a/src/utilities/use-on-value-change.ts b/src/utilities/use-on-value-change.ts
deleted file mode 100644
index ff67a8f5..00000000
--- a/src/utilities/use-on-value-change.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { watch } from 'vue';
-
-export function useOnValueChange<T>(
-  value: T,
-  onChange: (value: T, oldValue: T) => void,
-) {
-  watch(
-    () => value,
-    (oldValue, newValue) => {
-      if (newValue !== oldValue) {
-        onChange(newValue, oldValue);
-      }
-    }
-  );
-}

From 6677bb35612657f67b3c20f98ccf6d2adda557f1 Mon Sep 17 00:00:00 2001
From: "oe.sonnh" <sonnh@ownego.com>
Date: Wed, 13 Mar 2024 15:09:16 +0700
Subject: [PATCH 6/6] Chore: v2.0.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 79f9cb01..9f160e25 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ownego/polaris-vue",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "polaris_version": "12.20.0",
   "description": "Shopify Polaris 12 - UI library for Vue 3",
   "author": "Ownego Team",