refactor(Select): props -> dependency injection (#100)

Co-authored-by: Yuniel Acosta Pérez <[email protected]>
Shyam-Chen · Apr 3, 2024 · 15b486d · 15b486d
1 parent 311f4c1
commit 15b486d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git a/app/src/routes/(backstage)/(library)/data-entry/selects/single-selects/+page.vue b/app/src/routes/(backstage)/(library)/data-entry/selects/single-selects/+page.vue
@@ -4,7 +4,7 @@ import { XBreadcrumb, XCard, XSelect } from '@x/ui';
 
 import WithTable from './WithTable.vue';
 import WithTableInDialog from './WithTableInDialog.vue';
-import InPopover from './InPopover.vue';
+import WithinPopover from './WithinPopover.vue';
 
 const flux = reactive({
   select1: '',
@@ -106,10 +106,10 @@ const flux = reactive({
   </section>
 
   <section class="my-8">
-    <h2 class="text-3xl font-bold my-4 pt-6">In Popover</h2>
+    <h2 class="text-3xl font-bold my-4 pt-6">Within Popover</h2>
 
     <XCard>
-      <InPopover />
+      <WithinPopover />
     </XCard>
   </section>
 

diff --git a/...ntry/selects/single-selects/InPopover.vue → .../selects/single-selects/WithinPopover.vue b/...ntry/selects/single-selects/InPopover.vue → .../selects/single-selects/WithinPopover.vue
@@ -28,7 +28,6 @@ const flux = reactive({
           v-model:value="flux.select"
           :label="'Example label'"
           :options="flux.select1Options"
-          useParentOffset
         />
       </XCard>
     </template>

diff --git a/ui/src/components/popover/Popover.vue b/ui/src/components/popover/Popover.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { nextTick, ref, computed, reactive, watch } from 'vue';
+import { nextTick, ref, computed, reactive, watch, provide } from 'vue';
 import { vOnClickOutside } from '@vueuse/components';
 
 import useScrollParent from '../../composables/scroll-parent/useScrollParent';
@@ -88,6 +88,10 @@ watch(
     }
   },
 );
+
+provide('Popover', {
+  withinPopover: true,
+});
 </script>
 
 <template>

diff --git a/ui/src/components/select/Select.vue b/ui/src/components/select/Select.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, reactive, computed, watch, watchEffect, nextTick } from 'vue';
+import { ref, reactive, computed, watch, watchEffect, nextTick, inject } from 'vue';
 import { onClickOutside } from '@vueuse/core';
 import { useLocale } from 'vue-localer';
 
@@ -35,7 +35,6 @@ const props = withDefaults(
     notFoundContent?: string;
     invalid?: boolean | string;
     help?: string;
-    useParentOffset?: boolean;
   }>(),
   {
     label: '',
@@ -50,7 +49,6 @@ const props = withDefaults(
     notFoundContent: '',
     invalid: undefined,
     help: '',
-    useParentOffset: false,
   },
 );
 
@@ -61,6 +59,8 @@ const emit = defineEmits<{
 
 const locale = useLocale();
 
+const popover = inject('Popover', { withinPopover: false });
+
 const flux = reactive({
   show: false,
   direction: 'down' as 'down' | 'up',
@@ -116,19 +116,19 @@ function resizePanel() {
   const parentRect = offsetParent.getBoundingClientRect();
 
   selectPanel.value.style.width = `${rect.width}px`;
-  selectPanel.value.style.left = props.useParentOffset
+  selectPanel.value.style.left = popover.withinPopover
     ? `${rect.left - parentRect.left}px`
     : `${rect.left}px`;
 
   const center = window.innerHeight / 2;
 
   if (rect.top > center) {
-    selectPanel.value.style.top = props.useParentOffset
+    selectPanel.value.style.top = popover.withinPopover
       ? `${rect.top - parentRect.top}px`
       : `${rect.top}px`;
     flux.direction = 'up';
   } else {
-    selectPanel.value.style.top = props.useParentOffset
+    selectPanel.value.style.top = popover.withinPopover
       ? `${rect.bottom - parentRect.top}px`
       : `${rect.bottom}px`;
     flux.direction = 'down';