@citizenplane/pimp 17.0.12 → 18.0.0

package/package.json

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

package/src/components/CpContextualMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <context-menu ref="menu" :model="items" :pt="passThroughConfig">
     <template #item="{ item, props }">
-      <cp-menu-item v-bind="{ ...item, ...props.action }" @on-async-command-complete="hide" />
+      <cp-menu-item v-bind="{ ...item, ...props.action }" :leading-icon="item.icon" @async-complete="hide" />
     </template>
   </context-menu>
 </template>

package/src/components/CpItemActions.vue

@@ -6,7 +6,7 @@
         v-bind="action"
         :key="index"
         hide-label
-        @click.stop="action.command"
+        :leading-icon="action.icon"
       />
     </cp-button-group>
     <cp-contextual-menu

package/src/components/CpMenu.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="cpMenu">
+    <div
+      ref="trigger"
+      :aria-controls="menuId"
+      :aria-expanded="isOpen"
+      :aria-haspopup="popupType"
+      class="cpMenu__trigger"
+      @click="toggle"
+    >
+      <slot name="trigger" />
+    </div>
+
+    <primevue-drawer
+      v-if="isDrawer"
+      v-model:visible="isOpen"
+      block-scroll
+      close-on-escape
+      dismissable
+      position="bottom"
+      :pt="drawerPt"
+      :show-close-icon="false"
+      @after-show="focusCloseButton"
+      @hide="onHide"
+    >
+      <div class="cpMenu__drawerToolbar">
+        <cp-button
+          ref="closeButton"
+          appearance="tertiary"
+          aria-label="Close drawer"
+          color="neutral"
+          is-square
+          size="sm"
+          @click="hide"
+        >
+          <template #leading-icon>
+            <cp-icon size="20" type="x" />
+          </template>
+        </cp-button>
+      </div>
+      <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>
+
+<script setup lang="ts">
+import PrimevueDrawer from 'primevue/drawer'
+import PrimevuePopover from 'primevue/popover'
+import { computed, nextTick, onUnmounted, ref, useId } from 'vue'
+
+import type { MenuItem } from 'primevue/menuitem'
+
+import CpButton from '@/components/CpButton.vue'
+import CpIcon from '@/components/CpIcon.vue'
+import CpMenuList from '@/components/CpMenuList.vue'
+
+import { getKeyboardFocusableElements } from '@/helpers/dom'
+
+export interface Props {
+  class?: string
+  forcePopover?: boolean
+  items?: MenuItem[]
+  keepOpenOnClick?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  class: undefined,
+  items: undefined,
+  keepOpenOnClick: false,
+})
+
+const MOBILE_BREAKPOINT_PX = 640
+
+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 menuId = useId()
+
+const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT_PX}px)`)
+const isMobileViewport = ref(mediaQuery.matches)
+const onMediaChange = (event: MediaQueryListEvent) => {
+  isMobileViewport.value = event.matches
+}
+mediaQuery.addEventListener('change', onMediaChange)
+onUnmounted(() => mediaQuery.removeEventListener('change', onMediaChange))
+
+const isDrawer = computed(() => isMobileViewport.value && !props.forcePopover)
+const hasItems = computed(() => props.items?.length)
+const popupType = computed(() => (hasItems.value ? 'menu' : 'dialog'))
+
+const popoverPt = {
+  root: { class: ['cpMenu__overlay', props.class] },
+  content: { class: 'cpMenu__overlayContent' },
+  transition: { name: 'scale-elastic', duration: 100 },
+}
+
+const drawerPt = {
+  root: { class: 'cpMenu__drawer' },
+  content: { class: 'cpMenu__drawerContent' },
+  mask: { class: 'cpMenu__drawerMask' },
+  header: { class: 'cpMenu__drawerHeader' },
+}
+
+const show = (event: Event) => {
+  if (isDrawer.value) isOpen.value = true
+  else popover.value?.show(event, trigger.value)
+}
+
+const hide = () => {
+  if (isDrawer.value) isOpen.value = false
+  else popover.value?.hide()
+}
+
+const onItemClick = () => {
+  if (!props.keepOpenOnClick) hide()
+}
+
+const toggle = (event: Event) => {
+  if (isDrawer.value) isOpen.value = !isOpen.value
+  else popover.value?.toggle(event, trigger.value)
+}
+
+const focusTrigger = () => {
+  if (!trigger.value) return
+  const [first] = getKeyboardFocusableElements(trigger.value) as HTMLElement[]
+  first?.focus()
+}
+
+const focusCloseButton = () => {
+  nextTick(() => (closeButton.value?.$el as HTMLElement | undefined)?.focus())
+}
+
+const onHide = () => {
+  isOpen.value = false
+  focusTrigger()
+}
+
+defineExpose({ show, hide, toggle })
+</script>
+
+<style lang="scss">
+.cpMenu {
+  display: contents;
+
+  &__trigger {
+    display: inline-flex;
+    cursor: pointer;
+  }
+
+  &__overlay {
+    position: absolute;
+    z-index: 22;
+    margin-top: var(--cp-spacing-lg);
+    min-width: calc(var(--cp-dimensions-1) * 62.5);
+    border-radius: var(--cp-radius-md);
+    background-color: var(--cp-background-primary);
+    box-shadow: var(--cp-shadows-overlay);
+    will-change: opacity, transform;
+    transform-origin: top;
+  }
+
+  &__overlayContent {
+    padding: var(--cp-spacing-sm) 0;
+  }
+
+  &__drawerMask {
+    position: fixed;
+    inset: 0;
+    z-index: 21;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    background-color: var(--cp-background-overlay);
+  }
+
+  &__drawer {
+    position: relative;
+    z-index: 22;
+    width: 100%;
+    max-height: 85vh;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--cp-background-primary);
+    border-radius: var(--cp-radius-lg) var(--cp-radius-lg) 0 0;
+    box-shadow: var(--cp-shadows-overlay);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  &__drawerHeader {
+    display: none;
+  }
+
+  &__drawerContent {
+    flex: 1;
+    overflow-y: auto;
+    padding-bottom: var(--cp-spacing-sm);
+  }
+
+  &__drawerToolbar {
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
+  }
+}
+
+.scale-elastic-enter-active,
+.scale-elastic-leave-active {
+  transition:
+    scale 200ms var(--cp-easing-elastic),
+    opacity 200ms ease;
+}
+
+.scale-elastic-enter-from,
+.scale-elastic-leave-to {
+  opacity: 0;
+  scale: 0.9;
+}
+
+.p-drawer-enter-active,
+.p-drawer-leave-active {
+  transition:
+    transform 300ms ease,
+    opacity 250ms ease;
+}
+
+.p-drawer-enter-from,
+.p-drawer-leave-to {
+  transform: translateY(100%);
+}
+</style>

package/src/components/CpMenuItem.vue

@@ -5,67 +5,73 @@
       :class="dynamicClass"
       :disabled="disabled"
       type="button"
-      @click="handleItemClick"
+      @click.stop="handleItemClick"
     >
       <transition :duration="100" mode="out-in" name="fade">
         <span v-if="isLoading" class="cpMenuItem__loaderWrapper">
-          <cp-loader class="cpMenuItem__loader" color="#B2B2BD" />
+          <cp-loader class="cpMenuItem__loader" color="accent" size="2xs" />
         </span>
-        <template v-else>
-          <slot name="icon">
-            <cp-icon class="cpMenuItem__icon" :type="icon" />
-          </slot>
-        </template>
+        <slot v-else-if="hasLeadingIcon" name="leading-icon">
+          <cp-icon :aria-label="ariaLabel" class="cpMenuItem__icon" size="16" :type="leadingIcon" />
+        </slot>
       </transition>
-      <span v-if="displayLabel" v-tooltip="tooltip" class="cpMenuItem__label">{{ label }}</span>
+      <span v-if="!hideLabel" v-tooltip="tooltip" class="cpMenuItem__label">{{ label }}</span>
+      <slot v-if="hasTrailingIcon" name="trailing-icon">
+        <cp-icon :aria-label="ariaLabel" class="cpMenuItem__icon" size="16" :type="trailingIcon" />
+      </slot>
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useSlots } from 'vue'
 
 import type { MenuItem } from 'primevue/menuitem'
 
 interface Props {
-  hideLabel?: boolean
   isAsync?: boolean
   isCritical?: boolean
-  isDisabled?: boolean
   isLoading?: boolean
-  reverseLabel?: boolean
+  isSelected?: boolean
+  leadingIcon?: string
   tooltip?: string
+  trailingIcon?: string
 }
 
-const props = withDefaults(defineProps<Props & Omit<MenuItem, 'class' | 'disabled' | 'key'>>(), {
+const props = withDefaults(defineProps<Props & Omit<MenuItem, 'class' | 'key' | 'icon'>>(), {
   label: '',
   tooltip: '',
-  icon: '',
   command: undefined,
+  leadingIcon: undefined,
+  trailingIcon: undefined,
+  isSelected: false,
+  hideLabel: false,
 })
 
-const emit = defineEmits(['onItemClick', 'onAsyncCommandComplete'])
+const emit = defineEmits(['click', 'asyncComplete'])
+
+const slots = useSlots()
 
 const dynamicClass = computed(() => ({
-  'cpMenuItem__button--reverseLabel': props.reverseLabel,
   'cpMenuItem__button--isCritical': props.isCritical,
+  'cpMenuItem__button--isSelected': props.isSelected,
 }))
 
-const disabled = computed(() => props.isLoading || props.isDisabled)
-
-const displayLabel = computed(() => !props.hideLabel && props.label)
+const disabled = computed(() => props.isLoading || props.disabled)
+const hasLeadingIcon = computed(() => !!props.leadingIcon || !!slots['leading-icon'])
+const hasTrailingIcon = computed(() => !!props.trailingIcon || !!slots['trailing-icon'])
+const ariaLabel = computed(() => (props.hideLabel ? props.label : undefined))
 
 const handleItemClick = async (event: Event) => {
-  if (props.isAsync && props.command) {
-    // Stop the event from bubbling up to prevent menu auto close
-    event.stopPropagation()
-
-    await props.command({ originalEvent: event, item: props })
-
-    emit('onAsyncCommandComplete')
+  if (!props.command) return
+
+  if (props.isAsync) {
+    await props.command(event)
+    emit('asyncComplete')
+  } else {
+    props.command(event)
+    emit('click')
   }
-
-  emit('onItemClick')
 }
 </script>
 
@@ -73,78 +79,57 @@ const handleItemClick = async (event: Event) => {
 .cpMenuItem {
   padding: 0 var(--cp-spacing-sm);
 
-  > * {
-    padding: var(--cp-spacing-md) var(--cp-spacing-md);
-  }
-
   &__button {
     @extend %u-focus-outline;
     @extend %u-text-ellipsis;
 
-    [data-p-focused='true'] & {
-      background-color: var(--cp-background-primary-hover);
-    }
-
-    [data-p-focused='true'] &--isCritical {
-      background-color: var(--cp-background-error-primary-hover);
-    }
+    --cp-menu-item-background-color: var(--cp-background-primary);
+    --cp-menu-item-background-color-hover: var(--cp-background-primary-hover);
+    --cp-menu-item-color: var(--cp-text-primary);
+    --cp-menu-item-color-hover: var(--cp-text-primary);
 
+    padding: var(--cp-spacing-sm-md) var(--cp-spacing-md);
     position: relative;
-    color: var(--cp-text-primary);
+    color: var(--cp-menu-item-color);
+    background-color: var(--cp-menu-item-background-color);
     display: flex;
     width: 100%;
     align-items: center;
-    gap: var(--cp-spacing-md);
+    gap: var(--cp-spacing-lg);
+    font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-sm);
     text-align: start;
+    transition:
+      background-color 100ms ease-in-out,
+      color 100ms ease-in-out;
 
-    &--reverseLabel {
-      flex-direction: row-reverse;
+    &:hover,
+    &:focus-visible {
+      background-color: var(--cp-menu-item-background-color-hover);
+      color: var(--cp-menu-item-color-hover);
     }
 
     &:disabled {
-      color: var(--cp-foreground-disabled);
+      --cp-menu-item-background-color-hover: var(--cp-background-primary);
+      --cp-menu-item-color: var(--cp-text-disabled);
+      --cp-menu-item-color-hover: var(--cp-text-disabled);
       cursor: not-allowed;
     }
 
-    &:hover,
-    &:focus-visible {
-      transition:
-        background-color 0.1s ease-in-out,
-        color 0.1s ease-in-out;
-    }
-
-    &:hover:not(:disabled):not(#{&}--isCritical),
-    &:focus-visible:not(:disabled):not(#{&}--isCritical) {
-      background-color: var(--cp-background-primary-hover);
-      color: var(--cp-foreground-primary);
+    &--isCritical:not(:disabled) {
+      --cp-menu-item-background-color-hover: var(--cp-background-error-primary-hover);
+      --cp-menu-item-color: var(--cp-foreground-error-primary);
+      --cp-menu-item-color-hover: var(--cp-foreground-error-primary-hover);
     }
 
-    &--isCritical {
-      color: var(--cp-foreground-error-primary);
-
-      &:is(:hover, :focus-visible):not(:disabled) {
-        background-color: var(--cp-background-error-primary-hover);
-        color: var(--cp-foreground-error-primary-hover);
-      }
+    &--isSelected:not(:disabled) {
+      --cp-menu-item-background-color: var(--cp-background-accent-primary);
+      --cp-menu-item-background-color-hover: var(--cp-background-accent-primary);
+      --cp-menu-item-color: var(--cp-text-accent-primary);
+      --cp-menu-item-color-hover: var(--cp-text-accent-primary-hover);
     }
   }
 
-  &__icon,
-  &__loader {
-    flex-shrink: 0;
-  }
-
-  &__icon,
-  &__loaderWrapper {
-    width: var(--cp-dimensions-4);
-    height: var(--cp-dimensions-4);
-  }
-
-  &__button:is(:hover, :focus-visible) &__icon {
-    color: currentColor;
-  }
-
   &__label {
     flex: 1;
   }
@@ -155,10 +140,5 @@ const handleItemClick = async (event: Event) => {
     align-items: center;
     justify-content: center;
   }
-
-  &__loader {
-    width: calc(var(--cp-dimensions-1) * 5.5);
-    height: calc(var(--cp-dimensions-1) * 5.5);
-  }
 }
 </style>

package/src/components/CpMenuList.vue

@@ -0,0 +1,54 @@
+<template>
+  <ul :id="id" class="cpMenuList">
+    <li v-for="(item, index) in items" :key="index" :class="getItemClass(item)" :role="getItemRole(item)">
+      <cp-menu-item
+        v-if="!item.separator"
+        v-bind="item"
+        role="menuitem"
+        @async-complete="emit('asyncComplete')"
+        @click="emit('click')"
+      />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem'
+
+import CpMenuItem from '@/components/CpMenuItem.vue'
+
+interface Props {
+  id?: string
+  items?: MenuItem[]
+}
+
+withDefaults(defineProps<Props>(), {
+  id: undefined,
+  items: () => [],
+})
+
+const emit = defineEmits(['click', 'asyncComplete'])
+
+const getItemClass = (item: MenuItem) => (item.separator ? 'cpMenuList__separator' : 'cpMenuList__item')
+const getItemRole = (item: MenuItem) => (item.separator ? 'separator' : 'none')
+</script>
+
+<style lang="scss">
+.cpMenuList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cp-spacing-sm);
+
+  &__item {
+    display: block;
+  }
+
+  &__separator {
+    height: 1px;
+    background-color: var(--cp-border-soft);
+  }
+}
+</style>

package/src/components/CpSelectableButton.vue

@@ -73,6 +73,7 @@ const dynamicClasses = computed(() => {
 
 <style lang="scss">
 .cpSelectableButton {
+  display: inline-flex;
   border-radius: var(--cp-selectable-border-radius);
   padding: var(--cp-selectable-border-padding);
   font-size: var(--cp-selectable-font-size);
@@ -179,7 +180,7 @@ const dynamicClasses = computed(() => {
     --cp-selectable-line-height: var(--cp-line-height-sm);
     --cp-selectable-body-padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
     --cp-selectable-body-gap: var(--cp-spacing-sm);
-    --cp-selectable-body-border-radius: var(--cp-radius-sm);
+    --cp-selectable-body-border-radius: fn.px-to-rem(5);
     --cp-selectable-icon-size: var(--cp-dimensions-4);
   }
 

package/src/components/index.ts

@@ -33,7 +33,9 @@ import CpIcon from './CpIcon.vue'
 import CpInput from './CpInput.vue'
 import CpItemActions from './CpItemActions.vue'
 import CpLoader from './CpLoader.vue'
+import CpMenu from './CpMenu.vue'
 import CpMenuItem from './CpMenuItem.vue'
+import CpMenuList from './CpMenuList.vue'
 import CpMultiselect from './CpMultiselect.vue'
 import CpRadio from './CpRadio.vue'
 import CpRadioGroup from './CpRadioGroup.vue'
@@ -79,7 +81,9 @@ const Components = {
   CpDialog,
   CpDate,
   CpContextualMenu,
+  CpMenu,
   CpMenuItem,
+  CpMenuList,
   CpItemActions,
   CpCoreDatepicker,
   CpDatepicker,
@@ -152,7 +156,9 @@ export {
   CpDialog,
   CpDate,
   CpContextualMenu,
+  CpMenu,
   CpMenuItem,
+  CpMenuList,
   CpItemActions,
   CpCoreDatepicker,
   CpDatepicker,