@citizenplane/pimp 18.9.10 → 18.9.11

package/package.json

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

package/src/components/CpMenu.vue

@@ -1,15 +1,32 @@
 <template>
   <div class="cpMenu">
     <div v-if="isDrawer" class="cpMenu__drawerOverlay" :class="drawerOverlayDynamicClass" />
-    <div
-      ref="trigger"
-      :aria-controls="menuId"
-      :aria-expanded="isOpen"
-      :aria-haspopup="popupType"
-      class="cpMenu__trigger"
-      @click="toggle"
-    >
-      <slot name="trigger" />
+
+    <div class="cpMenu__anchor">
+      <div
+        ref="trigger"
+        :aria-controls="menuId"
+        :aria-expanded="isOpen"
+        :aria-haspopup="popupType"
+        class="cpMenu__trigger"
+        @click="toggle"
+      >
+        <slot name="trigger" />
+      </div>
+
+      <primevue-popover
+        v-if="!isDrawer"
+        ref="popover"
+        append-to="self"
+        close-on-escape
+        dismissable
+        :pt="popoverPt"
+        @hide="onHide"
+        @show="onShow"
+      >
+        <cp-menu-list v-if="hasItems" :id="menuId" :items="items" @async-complete="onItemClick" @click="onItemClick" />
+        <slot v-else />
+      </primevue-popover>
     </div>
 
     <primevue-drawer
@@ -43,19 +60,6 @@
       <cp-menu-list v-if="hasItems" :id="menuId" :items="items" @async-complete="onItemClick" @click="onItemClick" />
       <slot v-else />
     </primevue-drawer>
-
-    <primevue-popover
-      v-else
-      ref="popover"
-      close-on-escape
-      dismissable
-      :pt="popoverPt"
-      @hide="onHide"
-      @show="isOpen = true"
-    >
-      <cp-menu-list v-if="hasItems" :id="menuId" :items="items" @async-complete="onItemClick" @click="onItemClick" />
-      <slot v-else />
-    </primevue-popover>
   </div>
 </template>
 
@@ -74,12 +78,15 @@ import CpMenuList from '@/components/CpMenuList.vue'
 import { Breakpoints } from '@/constants/layout'
 import { getKeyboardFocusableElements } from '@/helpers/dom'
 
+export type CpMenuPlacement = 'start' | 'end'
+
 export interface Props {
   class?: string
   forcePopover?: boolean
   isFullHeightDrawer?: boolean
   items?: MenuItem[]
   keepOpenOnClick?: boolean
+  placement?: CpMenuPlacement
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -87,6 +94,7 @@ const props = withDefaults(defineProps<Props>(), {
   isFullHeightDrawer: false,
   items: undefined,
   keepOpenOnClick: false,
+  placement: 'start',
 })
 
 const emits = defineEmits<{
@@ -106,11 +114,11 @@ const isDrawer = computed(() => isMobileViewport.value && !props.forcePopover)
 const hasItems = computed(() => props.items?.length)
 const popupType = computed(() => (hasItems.value ? 'menu' : 'dialog'))
 
-const popoverPt = {
+const popoverPt = computed(() => ({
   root: { class: ['cpMenu__menu', props.class] },
   content: { class: 'cpMenu__menuContent' },
   transition: { name: 'scale-elastic', duration: 100 },
-}
+}))
 
 const drawerOverlayDynamicClass = computed(() => ({
   'cpMenu__drawerOverlay--isOpen': isOpen.value,
@@ -123,9 +131,14 @@ const drawerPt = {
   transition: { name: 'drawer', duration: 300 },
 }
 
+const isPopoverPlacementEnd = computed(() => props.placement === 'end')
+
 const show = (event: Event) => {
-  if (isDrawer.value) isOpen.value = true
-  else popover.value?.show(event, trigger.value)
+  if (isDrawer.value) {
+    isOpen.value = true
+  } else {
+    popover.value?.show(event, trigger.value)
+  }
   emits('show')
 }
 
@@ -140,8 +153,11 @@ const onItemClick = () => {
 }
 
 const toggle = (event: Event) => {
-  if (isDrawer.value) isOpen.value = !isOpen.value
-  else popover.value?.toggle(event, trigger.value)
+  if (isDrawer.value) {
+    isOpen.value = !isOpen.value
+  } else {
+    popover.value?.toggle(event, trigger.value)
+  }
 }
 
 const focusTrigger = () => {
@@ -159,6 +175,27 @@ const onHide = () => {
   focusTrigger()
 }
 
+const alignPopoverEnd = () => {
+  if (!popover.value) return
+
+  const { container: popoverElement, target: triggerElement } = popover.value as unknown as {
+    container: HTMLElement | null
+    target: HTMLElement | null
+  }
+
+  if (!popoverElement || !triggerElement) return
+
+  const triggerWidth = triggerElement.offsetWidth
+  const popoverWidth = popoverElement.offsetWidth
+
+  popoverElement.style.marginLeft = `${(popoverWidth - triggerWidth) * -1}px`
+}
+
+const onShow = async () => {
+  isOpen.value = true
+  if (isPopoverPlacementEnd.value) alignPopoverEnd()
+}
+
 defineExpose({ show, hide, toggle })
 </script>
 
@@ -166,20 +203,26 @@ defineExpose({ show, hide, toggle })
 .cpMenu {
   display: contents;
 
+  &__anchor {
+    display: inline-flex;
+  }
+
   &__trigger {
     display: inline-flex;
     cursor: pointer;
   }
 
   &__menu {
-    position: absolute;
     min-width: calc(var(--cp-dimensions-1) * 62.5);
     border-radius: var(--cp-radius-md);
     margin-top: var(--cp-spacing-sm-md);
     background-color: var(--cp-background-primary);
     box-shadow: var(--cp-shadows-overlay);
-    transform-origin: top;
     will-change: opacity, transform;
+
+    &[data-p-popover-flipped="true"] {
+      margin-top: calc(var(--cp-spacing-sm-md) * -1);
+    }
   }
 
   &__menuContent {

package/src/stories/CpMenu.stories.ts

@@ -39,6 +39,13 @@ const meta = {
       description: 'Keep the menu open when clicking an item.',
       table: { defaultValue: { summary: 'false' } },
     },
+    placement: {
+      control: 'select',
+      options: ['start', 'end'],
+      description:
+        'Horizontal alignment of the popover relative to the trigger. `start`/`end` align the popover edge to the matching trigger edge; the menu auto-flips horizontally when there is not enough room.',
+      table: { defaultValue: { summary: 'start' } },
+    },
   },
   decorators: [() => ({ template: '<div style="min-height: 60vh; padding: 80px;"><story /></div>' })],
 } satisfies Meta<typeof CpMenu>
@@ -52,7 +59,11 @@ type Story = StoryObj<typeof meta>
  * a separator and a critical "Delete" action.
  */
 export const Default: Story = {
-  render: () => ({
+  args: {
+    forcePopover: true,
+    placement: 'start',
+  },
+  render: (args) => ({
     components: { CpButton, CpMenu },
     setup() {
       const isLoading = ref(false)
@@ -83,10 +94,10 @@ export const Default: Story = {
         },
       ])
 
-      return { items }
+      return { args, items }
     },
     template: `
-      <CpMenu :items="items" class="defaultMenu">
+      <CpMenu v-bind="args" :items="items" class="defaultMenu">
         <template #trigger>
           <CpButton>Open menu</CpButton>
         </template>
@@ -160,6 +171,40 @@ export const FullHeightDrawer: Story = {
   }),
 }
 
+/**
+ * Use `placement` to control the popover's horizontal alignment. Switch the
+ * `placement` control to compare `start` and `end`: each aligns the popover's
+ * matching edge to the trigger's. The popover auto-flips horizontally when it
+ * would overflow. The trigger is centered here so the difference is easy to see.
+ */
+export const Placement: Story = {
+  args: {
+    forcePopover: true,
+    placement: 'end',
+  },
+  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: center; min-height: 320px;">
+        <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.