Merge pull request #857 from PrefectHQ/enhancement-moar-positions-202…

…3-07-24

Enhancement: More positions!

demo/components/PositionSelect.vue

@@ -7,58 +7,38 @@
 <script lang="ts" setup>
   import PSelect from '@/components/Select/PSelect.vue'
   import { PositionMethod } from '@/types/position'
-  import { left, right, bottom, top, topRight, bottomRight, topLeft, bottomLeft } from '@/utilities/position'
+
+  /*  eslint import/namespace: ['error', { allowComputed: true }] */
+  import * as positions from '@/utilities/position'
   import { computed } from 'vue'
 
+  type PositionsKey = keyof typeof positions
+
   const props = defineProps<{
-    // using any because vue's type warnings for props is dumb...
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    position: any,
+    position: PositionMethod | PositionMethod[],
   }>()
 
   const emit = defineEmits<{
     (event: 'update:position', value: PositionMethod | PositionMethod[]): void,
   }>()
 
-  const keyToFunction = new Map([
-    ['left', left],
-    ['right', right],
-    ['bottom', bottom],
-    ['top', top],
-    ['top right', topRight],
-    ['bottom right', bottomRight],
-    ['top left', topLeft],
-    ['bottom left', bottomLeft],
-  ])
-
-  const functionToKey = new Map([
-    [left, 'left'],
-    [right, 'right'],
-    [bottom, 'bottom'],
-    [top, 'top'],
-    [topRight, 'top right'],
-    [bottomRight, 'bottom right'],
-    [topLeft, 'top left'],
-    [bottomLeft, 'bottom left'],
-  ])
-
-  const options = Array.from(keyToFunction.keys())
+  const options = Object.keys(positions)
 
   const selected = computed({
     get: (): string | string[] => {
       if (Array.isArray(props.position)) {
-        return props.position.map(key => functionToKey.get(key)!)
+        return props.position.map(position => position.name)
       }
 
-      return functionToKey.get(props.position)!
+      return props.position.name
     },
     set: (value: string | string[]): void => {
       if (typeof value === 'string') {
-        emit('update:position', keyToFunction.get(value)!)
+        emit('update:position', positions[value as PositionsKey])
       } else {
         // eslint-disable-next-line id-length
         const sorted = [...value].sort((a, b) => options.indexOf(a) - options.indexOf(b))
-        const selected = sorted.map(key => keyToFunction.get(key)!)
+        const selected = sorted.map(key => positions[key as PositionsKey])
 
         emit('update:position', selected)
       }

demo/sections/components/PopOver.vue

@@ -33,7 +33,7 @@
         </div>
         <template v-if="showManual">
           <div ref="manualContent" class="bg-primary text-white p-2" :style="manualStyles">
-            <span>Manual Composition Content</span>
+            <span>Manual <br> Composition Content</span>
           </div>
         </template>
       </div>
@@ -75,7 +75,7 @@
             </p-heading>
             <div class="flex gap-2 items-center flex-wrap">
               <template v-for="i in 5" :key="i">
-                <p-pop-over :group="group" :placement="top">
+                <p-pop-over :group="group" :placement="positionMethods.top">
                   <template #target="{ open }">
                     <p-button @mouseover="open">
                       Open {{ i }}
@@ -98,12 +98,15 @@
 <script lang="ts" setup>
   import { usePositionStyles, useMostVisiblePositionStyles } from '@/compositions/position'
   import { usePopOverGroup } from '@/compositions/usePopOverGroup'
-  import { left, right, top } from '@/utilities/position'
+
+  /*  eslint import/namespace: ['error', { allowComputed: true }] */
+  import * as positionMethods from '@/utilities/position'
+
   import { ref } from 'vue'
   import ComponentPage from '@/demo/components/ComponentPage.vue'
   import PositionSelect from '@/demo/components/PositionSelect.vue'
 
-  const position = ref(left)
+  const position = ref(positionMethods.leftTop)
   const showManual = ref(false)
   const {
     target: manualTarget,
@@ -112,7 +115,7 @@
     styles: manualStyles,
   } = usePositionStyles(position)
 
-  const positions = ref([left, right])
+  const positions = ref([positionMethods.left, positionMethods.right])
   const showDynamic = ref(false)
   const {
     target: dynamicTarget,

src/utilities/position.ts

@@ -74,6 +74,46 @@ export const bottomLeft: PositionMethod = function(target: DOMRect, content: DOM
   const top = target.top - container.top + target.height
   const left = target.right - container.left - target.width
 
+  return {
+    top,
+    left,
+  }
+}
+
+export const leftBottom: PositionMethod = function(target: DOMRect, content: DOMRect, container: DOMRect): Position {
+  const top = target.bottom - container.top - content.height
+  const left = target.left - container.left - content.width
+
+  return {
+    top,
+    left,
+  }
+}
+
+export const rightBottom: PositionMethod = function(target: DOMRect, content: DOMRect, container: DOMRect): Position {
+  const top = target.bottom - container.top - content.height
+  const left = target.left - container.left + target.width
+
+  return {
+    top,
+    left,
+  }
+}
+
+export const leftTop: PositionMethod = function(target: DOMRect, content: DOMRect, container: DOMRect): Position {
+  const top = target.top - container.top
+  const left = target.left - container.left - content.width
+
+  return {
+    top,
+    left,
+  }
+}
+
+export const rightTop: PositionMethod = function(target: DOMRect, content: DOMRect, container: DOMRect): Position {
+  const top = target.top - container.top
+  const left = target.left - container.left + target.width
+
   return {
     top,
     left,