feat: add PartialQueryButton to the playground

empathyco · Jun 4, 2024 · 7bbfafd · 7bbfafd
1 parent b00d030
commit 7bbfafd
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 1 deletion.
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
@@ -26,7 +26,8 @@ import {
   TestHighlight,
   TestBaseResultImages,
   TestBasePanel,
-  TestBaseKeyboardNavigation
+  TestBaseKeyboardNavigation,
+  TestPartialResultsList
 } from './';
 
 const routes = [
@@ -164,6 +165,11 @@ const routes = [
     path: '/base-keyboard-navigation',
     name: 'TestBaseKeyboardNavigation',
     component: TestBaseKeyboardNavigation
+  },
+  {
+    path: '/partial-results-list',
+    name: 'PartialResultsList',
+    component: TestPartialResultsList
   }
 ];
 

diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/index.ts b/packages/_vue3-migration-test/src/x-modules/search/components/index.ts
@@ -1,3 +1,4 @@
 export { default as TestSortDropdown } from './test-sort-dropdown.vue';
 export { default as TestSortList } from './test-sort-list.vue';
 export { default as TestSortPickerList } from './test-sort-picker-list.vue';
+export { default as TestPartialResultsList } from './test-partial-results-list.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/test-partial-results-list.vue b/packages/_vue3-migration-test/src/x-modules/search/components/test-partial-results-list.vue
@@ -0,0 +1,50 @@
+<template>
+  <PartialResultsList>
+    <template #default="{ partialResult }">
+      <span data-test="partial-query">{{ partialResult.query }}</span>
+      <BaseGrid #result="{ item }" :columns="4" :items="partialResult.results">
+        {{ item.id }}
+      </BaseGrid>
+      <PartialQueryButton :query="partialResult.query">
+        <template #default="{ query }">Ver todos {{ query }}</template>
+      </PartialQueryButton>
+    </template>
+  </PartialResultsList>
+
+  <div v-if="clickPartialQueryButton" class="text-content">
+    <span>The user has clicked on a partial query button!!</span>
+    <button @click="restartParialQueryButton" class="text-button">return</button>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import PartialQueryButton from '../../../../../x-components/src/x-modules/search/components/partial-query-button.vue';
+  import BaseGrid from '../../../../../x-components/src/components/base-grid.vue';
+  import PartialResultsList from '../../../../../x-components/src/x-modules/search/components/partial-results-list.vue';
+  import { use$x } from '../../../../../x-components/src/composables/use-$x';
+
+  const _x = use$x();
+
+  const clickPartialQueryButton = ref(false);
+
+  const restartParialQueryButton = () => (clickPartialQueryButton.value = false);
+
+  _x.on('UserClickedPartialQuery', false).subscribe(() => (clickPartialQueryButton.value = true));
+</script>
+
+<style>
+  .x-partial-results-list {
+    gap: 12px;
+  }
+
+  .text-content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .text-button {
+    max-width: fit-content;
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/x-modules/search/x-module.ts b/packages/_vue3-migration-test/src/x-modules/search/x-module.ts
@@ -3,6 +3,7 @@ import { getBannersStub } from '../../../../x-components/src/__stubs__/banners-s
 import { getPromotedsStub } from '../../../../x-components/src/__stubs__/promoteds-stubs.factory';
 import { PrivateXModuleOptions } from '../../../../x-components/src/plugins';
 import { SearchXModule } from '../../../../x-components/src/x-modules/search';
+import { getPartialResultsStub } from '../../../../x-components/src/__stubs__/partials-results-stubs.factory';
 
 export const searchXModule = {
   storeModule: {
@@ -11,6 +12,7 @@ export const searchXModule = {
       results: getResultsStub(10),
       promoteds: getPromotedsStub(),
       banners: getBannersStub(),
+      partialResults: getPartialResultsStub(),
       status: 'success'
     }
   }