Merge remote-tracking branch 'origin/master' into docs

ownego · Mar 13, 2024 · e589415 · e589415
2 parents 67e30ca + 6677bb3
commit e589415
Show file tree

Hide file tree

Showing 6 changed files with 209 additions and 125 deletions.
diff --git 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",

diff --git a/src/components/Filters/Filters.vue b/src/components/Filters/Filters.vue
@@ -1,5 +1,9 @@
 <template lang="pug">
-div(:class="filtersClassName")
+div(
+  ref="containerRef",
+  :class="filtersClassName",
+  :style="searchFieldStyle",
+)
   //- QueryField
   div(
     v-if="!hideQueryField",
@@ -13,7 +17,6 @@ div(:class="filtersClassName")
       )
         div(
           :class="styles.SearchField",
-          :style="searchFieldStyle",
         )
           SearchField(
             v-model="modelValue",
@@ -37,7 +40,7 @@ div(:class="filtersClassName")
     :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')",
   )
@@ -57,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';
@@ -103,8 +107,6 @@ const transitionFilterStyles = {
   },
 };
 
-type TransitionStatus = "entering" | "entered" | "exiting" | "exited" | "unmounted";
-
 export type FiltersProps = {
   /** Currently entered text in the query field */
   queryValue?: string;
@@ -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,11 @@ const filtersClassName = computed(() => classNames(
   props.hideQueryField && styles.hideQueryField,
 ));
 const searchFieldStyle = computed(() => {
-  return props.mountedState && !props.hideQueryField
+  if (props.mountedState === 'entered') {
+    return undefined;
+  }
+
+  return props.mountedState
     ? {
         ...defaultStyle,
         ...transitionStyles[props.mountedState],

diff --git 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>