@citizenplane/pimp 18.25.0 → 18.25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.25.0",
+  "version": "18.25.1",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpMenu.vue

@@ -63,10 +63,11 @@
 </template>
 
 <script setup lang="ts">
+import { useResizeObserver } from '@vueuse/core'
 import PrimevueDrawer from 'primevue/drawer'
 import type { MenuItem } from 'primevue/menuitem'
 import PrimevuePopover from 'primevue/popover'
-import { computed, nextTick, ref, useId } from 'vue'
+import { computed, nextTick, ref, shallowRef, useId } from 'vue'
 
 import { useIsBreakpoint } from '@/composables/useIsBreakpoint'
 
@@ -107,6 +108,7 @@ const trigger = ref<HTMLElement | null>(null)
 const popover = ref<InstanceType<typeof PrimevuePopover>>()
 const closeButton = ref<InstanceType<typeof CpButton> | null>(null)
 const isOpen = ref(false)
+const observedPopoverElement = shallowRef<HTMLElement | null>(null)
 const menuId = useId()
 
 const isMobileViewport = useIsBreakpoint(Breakpoints.TABLET)
@@ -186,30 +188,56 @@ const focusCloseButton = () => {
 
 const onHide = () => {
   isOpen.value = false
+  observedPopoverElement.value = null
   focusTrigger()
   emits('hide')
 }
 
-const alignPopoverEnd = () => {
-  if (!popover.value) return
+const getPopoverElements = () => {
+  if (!popover.value) return null
 
   const { container: popoverElement, target: triggerElement } = popover.value as unknown as {
     container: HTMLElement | null
     target: HTMLElement | null
   }
 
-  if (!popoverElement || !triggerElement) return
+  if (!popoverElement || !triggerElement) return null
+
+  return { popoverElement, triggerElement }
+}
 
-  const triggerWidth = triggerElement.offsetWidth
-  const popoverWidth = popoverElement.offsetWidth
+const getPopoverRightEdge = (popoverElement: HTMLElement) => {
+  const offsetParent = popoverElement.offsetParent as HTMLElement | null
+  const offsetParentLeft = offsetParent?.getBoundingClientRect().left ?? 0
 
-  popoverElement.style.marginLeft = `${(popoverWidth - triggerWidth) * -1}px`
+  return offsetParentLeft + popoverElement.offsetLeft + popoverElement.offsetWidth
 }
 
+const alignPopoverEnd = () => {
+  const elements = getPopoverElements()
+  if (!elements) return
+
+  const { popoverElement, triggerElement } = elements
+  popoverElement.style.marginLeft = ''
+
+  const gapAfterTriggerEnd = getPopoverRightEdge(popoverElement) - triggerElement.getBoundingClientRect().right
+  if (!gapAfterTriggerEnd) return
+
+  popoverElement.style.marginLeft = `${gapAfterTriggerEnd * -1}px`
+}
+
+useResizeObserver(observedPopoverElement, alignPopoverEnd)
+
 const onShow = async () => {
   isOpen.value = true
-  if (isPopoverPlacementEnd.value) alignPopoverEnd()
   emits('show')
+
+  if (!isPopoverPlacementEnd.value) return
+
+  await nextTick()
+
+  alignPopoverEnd()
+  observedPopoverElement.value = getPopoverElements()?.popoverElement ?? null
 }
 
 defineExpose({ show, hide, toggle })

package/src/stories/CpLanguageSwitcher.stories.ts

@@ -7,6 +7,9 @@ import CpLanguageSwitcher from '@/components/CpLanguageSwitcher.vue'
 const STORY_TRIGGER_LAYOUT =
   'display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; width: 100%;'
 
+const STORY_EDGE_TRIGGER_LAYOUT =
+  'display: flex; align-items: center; justify-content: flex-end; min-height: 60vh; width: 100%; padding: 0 16px;'
+
 const LANGS_WITH_FLAGS = [
   { code: 'fr', name: 'Français', flag: 'fr' },
   { code: 'en', name: 'English', flag: 'gb' },
@@ -113,6 +116,31 @@ export const WithoutFlags: Story = {
   }),
 }
 
+/**
+ * `placement="end"` with the trigger pinned to the right edge of the canvas, the navbar
+ * case: PrimeVue's collision handling already right-aligns the popover there, so the
+ * popover's right edge must sit flush with the trigger's, not shifted left.
+ */
+export const PlacementEndAtViewportEdge: Story = {
+  args: {
+    langs: LANGS_WITH_FLAGS,
+    modelValue: 'fr',
+    placement: 'end',
+  },
+  render: (args) => ({
+    components: { CpLanguageSwitcher },
+    setup() {
+      const currentCode = ref(args.modelValue)
+      return { args, currentCode }
+    },
+    template: `
+      <div style="${STORY_EDGE_TRIGGER_LAYOUT}">
+        <CpLanguageSwitcher v-bind="args" v-model="currentCode" />
+      </div>
+    `,
+  }),
+}
+
 /**
  * Mobile viewport — the list moves into a bottom sheet. No `sheetTitle` is passed,
  * so the header collapses to its drag handle and the languages start right under it.

package/src/stories/CpMenu.stories.ts

@@ -5,7 +5,7 @@ import CpButton from '@/components/CpButton.vue'
 import CpMenu from '@/components/CpMenu.vue'
 
 const meta = {
-  title: 'Molecules/CpMenu',
+  title: 'Organisms/CpMenu',
   component: CpMenu,
   parameters: {
     docs: {
@@ -208,6 +208,42 @@ export const Placement: Story = {
   }),
 }
 
+/**
+ * The same `placement="end"` menu with its trigger pinned to the right edge of the
+ * canvas, where PrimeVue's collision handling already right-aligns the popover on the
+ * trigger. The popover's right edge must sit flush with the trigger's, not shifted left.
+ */
+export const PlacementEndAtViewportEdge: Story = {
+  args: {
+    forcePopover: true,
+    placement: 'end',
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: (args) => ({
+    components: { CpButton, CpMenu },
+    setup() {
+      const items = [
+        { label: 'Edit', leadingIcon: 'edit', command: () => alert('Edit clicked') },
+        { label: 'Duplicate', leadingIcon: 'copy', command: () => alert('Duplicate clicked') },
+        { separator: true },
+        { label: 'Delete', leadingIcon: 'trash-2', isCritical: true, command: () => alert('Delete clicked') },
+      ]
+      return { args, items }
+    },
+    template: `
+      <div style="display: flex; align-items: center; justify-content: flex-end; min-height: 320px; width: 100%;">
+        <CpMenu v-bind="args" :items="items">
+          <template #trigger>
+            <CpButton>Open menu</CpButton>
+          </template>
+        </CpMenu>
+      </div>
+    `,
+  }),
+}
+
 /**
  * Use the default slot to render arbitrary content inside the popover —
  * useful for forms, share panels, filters, etc.