@citizenplane/pimp 10.9.2 → 11.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.9.2",
+  "version": "11.0.0",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/assets/styles/utilities/_index.scss

@@ -7,6 +7,15 @@
   overflow: hidden;
 }
 
+.u-layout-box-padding,
+%u-layout-box-padding {
+  padding: var(--cp-spacing-2xl);
+
+  @media (max-width: 650px) {
+    padding: var(--cp-spacing-xl);
+  }
+}
+
 .u-asterisk {
   position: relative;
   top: fn.px-to-rem(-3);

package/src/components/CpDialog.vue

@@ -1,19 +1,35 @@
 <template>
   <div class="cpDialog">
-    <dialog ref="dialogElement" class="cpDialog__dialog" @keydown.esc.stop.prevent="handleClose">
-      <div class="cpDialog__overlay" />
+    <dialog
+      ref="dialogElement"
+      :aria-describedby="ariaDescribedby"
+      :aria-labelledby="titleId"
+      aria-modal="true"
+      class="cpDialog__dialog"
+      @keydown.esc.stop.prevent="handleClose"
+    >
+      <div aria-hidden="true" class="cpDialog__overlay" />
       <main ref="dialogContainer" class="cpDialog__container" :style="dynamicStyle" @keydown.tab="trapFocus">
-        <header v-if="hasHeaderSlot" class="cpDialog__header">
-          <slot name="header" />
-          <button class="cpDialog__close" type="button" @click="handleClose">
-            <cp-icon type="x" />
+        <header class="cpDialog__header">
+          <div class="cpDialog__left">
+            <div class="cpDialog__title">
+              <slot name="title">
+                <h2 :id="titleId">{{ title }}</h2>
+              </slot>
+            </div>
+            <div v-if="hasSubtitle" :id="subtitleId" class="cpDialog__subtitle">
+              <slot name="subtitle">
+                <p>{{ subtitle }}</p>
+              </slot>
+            </div>
+          </div>
+          <button aria-label="Close dialog" class="cpDialog__close" type="button" @click="handleClose">
+            <cp-icon aria-hidden="true" type="x" />
           </button>
         </header>
-        <slot>
-          <section class="cpDialog__content">
-            <slot name="content" />
-          </section>
-        </slot>
+        <section class="cpDialog__content">
+          <slot />
+        </section>
         <footer v-if="hasFooterSlot" class="cpDialog__footer">
           <slot name="footer" />
         </footer>
@@ -23,12 +39,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useSlots, onMounted, nextTick, onBeforeUnmount } from 'vue'
+import { computed, ref, useSlots, onMounted, nextTick, onBeforeUnmount, useId } from 'vue'
 
 import { getKeyboardFocusableElements, handleTrapFocus } from '@/helpers/dom'
 
 interface Props {
   maxWidth?: number
+  subtitle?: string
+  title: string
 }
 
 interface Emits {
@@ -37,10 +55,17 @@ interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   maxWidth: 600,
+  subtitle: '',
 })
 
 const emit = defineEmits<Emits>()
 
+const dialogId = useId()
+const titleId = computed(() => `${dialogId}-title`)
+const subtitleId = computed(() => `${dialogId}-subtitle`)
+
+const ariaDescribedby = computed(() => (hasSubtitle.value ? subtitleId.value : undefined))
+
 const slots = useSlots()
 
 const dialogElement = ref<HTMLDialogElement | null>(null)
@@ -48,8 +73,8 @@ const dialogContainer = ref<HTMLElement | null>(null)
 
 const dynamicStyle = computed(() => ({ maxWidth: `${props.maxWidth}px` }))
 
-const hasHeaderSlot = computed(() => !!slots.header)
-
+const hasSubtitleSlot = computed(() => !!slots.subtitle)
+const hasSubtitle = computed(() => !!props.subtitle || hasSubtitleSlot.value)
 const hasFooterSlot = computed(() => !!slots.footer)
 
 const handleClose = () => emit('close')
@@ -151,64 +176,81 @@ $dialog-breakpoint: 550px;
 
   &__header,
   &__footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    padding: var(--cp-spacing-xl) var(--cp-spacing-2xl);
   }
 
   &__header {
-    position: relative;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--cp-spacing-md);
     border-bottom: 1px solid var(--cp-border-soft);
   }
 
+  &__left {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  &__title > * {
+    @extend %u-text-ellipsis;
+  }
+
+  &__title,
+  &__title > h2 {
+    font-size: var(--cp-text-size-xl);
+    font-weight: 600;
+    line-height: var(--cp-line-height-xl);
+  }
+
+  &__subtitle,
+  &__subtitle > p {
+    font-size: var(--cp-text-size-sm);
+    font-weight: 400;
+    line-height: var(--cp-line-height-md);
+    color: var(--cp-text-secondary);
+  }
+
   &__close {
-    position: absolute;
-    top: var(--cp-spacing-2xl);
-    right: var(--cp-spacing-2xl);
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     padding: var(--cp-spacing-sm);
     border-radius: var(--cp-radius-md);
     color: var(--cp-foreground-secondary);
-    transition: 0.2s ease-in-out;
-    transform: translate(var(--cp-dimensions-1), calc(var(--cp-dimensions-1) * -1));
+    transition: 200ms ease-in-out;
     transition-property: color, background-color;
 
     &:hover {
       color: var(--cp-foreground-primary);
+      background-color: var(--cp-background-secondary);
     }
 
     &:focus-visible {
-      outline: calc(var(--cp-dimensions-0_5) * 1.5) solid var(--cp-focus);
+      outline: fn.px-to-rem(2) solid var(--cp-focus);
     }
   }
 
   &__content {
+    @extend %u-layout-box-padding;
+
     overflow: auto;
     min-height: 0;
     flex: 1;
   }
 
   &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
     &:not(:empty) {
       border-top: 1px solid var(--cp-border-soft);
-      padding: var(--cp-spacing-xl) var(--cp-spacing-2xl);
-    }
-
-    &--noBorder {
-      border-top: none;
     }
   }
 }
 
-@media screen and (max-width: $dialog-breakpoint) {
-  .cpDialog__close {
-    top: var(--cp-spacing-xl);
-    right: var(--cp-spacing-xl);
-  }
-}
-
 @media (max-width: 650px) {
   .cpDialog__footer {
     padding: var(--cp-spacing-xl);

package/src/components/CpMultiselect.vue

@@ -1,17 +1,26 @@
 <template>
   <div class="cpMultiselect">
-    <base-input-label v-if="label" class="cpMultiselect__label" :is-invalid :required>
+    <base-input-label
+      v-if="label"
+      :id="labelId"
+      class="cpMultiselect__label"
+      :for="multiselectId"
+      :is-invalid
+      :required
+    >
       {{ label }}
     </base-input-label>
     <auto-complete
       ref="multiselect"
       v-model="selectModel"
       :append-to
+      :aria-labelledby="ariaLabelledby"
       auto-option-focus
       :data-key="trackBy"
       :disabled
       :force-selection
       :input-class
+      :input-id="multiselectId"
       :invalid="isInvalid"
       :multiple
       :name
@@ -24,6 +33,8 @@
       @click="handleClick"
       @complete="handleSearch"
       @hide="handleOverlayHidden"
+      @keydown.arrow-down="handleArrowKeys"
+      @keydown.arrow-up="handleArrowKeys"
       @keydown.enter="toggleDropdown"
       @keydown.esc.stop
       @show="handleOverlayShown"
@@ -61,12 +72,18 @@
           v-else
           class="cpMultiselect__toggle"
           :disabled="disabled"
+          tabindex="-1"
           type="button"
           @click.stop="handleDropdownIconClick"
         >
           <cp-icon class="cpMultiselect__dropdownIcon" :class="chevronDynamicClass" type="chevron-down" />
         </button>
-        <base-select-clear-button v-if="displayClearButton" class="cpMultiselect__clear" @click="handleClear" />
+        <base-select-clear-button
+          v-if="displayClearButton"
+          class="cpMultiselect__clear"
+          tabindex="-1"
+          @click="handleClear"
+        />
       </template>
     </auto-complete>
     <transition-expand mode="out-in">
@@ -80,7 +97,7 @@
 <script setup lang="ts">
 import { absolutePosition, getOuterWidth } from '@primeuix/utils/dom'
 import AutoComplete from 'primevue/autocomplete'
-import { ref, computed, onMounted, useSlots } from 'vue'
+import { ref, computed, onMounted, useSlots, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import BaseSelectClearButton from '@/components/BaseSelectClearButton.vue'
@@ -138,14 +155,20 @@ const emit = defineEmits<Emits>()
 
 const slots = useSlots()
 
+const multiselectId = useId()
+const labelId = useId()
+
+const ariaLabelledby = computed(() => (props.label ? labelId : undefined))
+
 const selectModel = computed({
   get() {
     return props.modelValue
   },
-  set(value) {
+  set(value: string | object | string[] | null) {
     if (typeof value === 'string') {
       return
     }
+
     emit('update:modelValue', value)
   },
 })
@@ -167,13 +190,21 @@ const passThroughConfig = computed(() => ({
   loader: { class: 'cpMultiselect__hidden' },
 }))
 
-const multiselect = ref<InstanceType<typeof AutoComplete> | null>(null)
+type ExtendedAutoComplete = InstanceType<typeof AutoComplete> & {
+  $el: HTMLElement
+  alignOverlay: () => void
+  hide: () => void
+  overlay: HTMLElement
+  overlayVisible: boolean
+  show: () => void
+}
+
+const multiselect = ref<ExtendedAutoComplete | null>(null)
 
 const searchQuery = ref('')
 
 const typeahead = computed(() => !props.withoutTypeahead)
 
-// @ts-expect-error 'overlayVisible' does not exist on type instance of AutoComplete
 const isDropdownOpen = computed(() => multiselect.value?.overlayVisible)
 
 const chevronDynamicClass = computed(() => {
@@ -202,11 +233,10 @@ const handleValueChange = (newValue: string | object) => {
 
 const getInputElement = () => {
   if (!multiselect.value) return null
-  // @ts-expect-error '$el' does not exist on type instance of AutoComplete
   return multiselect.value.$el?.querySelector('input') || null
 }
 
-const selectInputContent = () => {
+const selectInputElement = () => {
   const inputElement = getInputElement()
   if (inputElement) inputElement.select()
 }
@@ -215,13 +245,13 @@ const focusAndSelectInput = () => {
   const inputElement = getInputElement()
   if (inputElement) {
     inputElement.focus()
-    inputElement.select()
+    selectInputElement()
   }
 }
 
 const handleClick = () => {
   toggleDropdown()
-  selectInputContent()
+  selectInputElement()
 }
 
 const handleDropdownIconClick = () => {
@@ -229,12 +259,15 @@ const handleDropdownIconClick = () => {
   focusAndSelectInput()
 }
 
+const handleArrowKeys = () => {
+  if (isDropdownOpen.value) return
+  return toggleDropdown()
+}
+
 const toggleDropdown = () => {
   if (isDropdownOpen.value) {
-    // @ts-expect-error 'hide' does not exist on type instance of AutoComplete
     multiselect.value?.hide()
   } else {
-    // @ts-expect-error 'show' does not exist on type instance of AutoComplete
     multiselect.value?.show()
   }
 }
@@ -245,23 +278,17 @@ const handleUpdateModelValue = (value: Record<string, unknown> | string[] | null
 }
 
 const overrideAlignOverlay = () => {
-  if (multiselect.value) {
-    // @ts-expect-error 'alignOverlay' does not exist on type instance of AutoComplete
-    multiselect.value.alignOverlay = alignOverlay
-  }
+  if (!multiselect.value) return
+  multiselect.value.alignOverlay = alignOverlay
 }
 
 const alignOverlay = () => {
-  // @ts-expect-error 'el' does not exist on type instance of AutoComplete
   const target = multiselect.value?.$el
 
-  // @ts-expect-error 'overlay' does not exist on type instance of AutoComplete
   if (!multiselect.value?.overlay || !target) return
 
-  // @ts-expect-error 'overlay' does not exist on type instance of AutoComplete
   multiselect.value.overlay.style.width = `${getOuterWidth(target)}px`
 
-  // @ts-expect-error 'overlay' does not exist on type instance of AutoComplete
   absolutePosition(multiselect.value.overlay, target)
 }
 
@@ -470,7 +497,7 @@ onMounted(() => overrideAlignOverlay())
       color: var(--cp-foreground-primary);
     }
 
-    &[data-p-selected='true'] {
+    &[data-p-selected='true']:not([data-p-focused='true']) {
       background: var(--cp-background-accent-primary);
     }
 

package/src/stories/CpDialog.stories.ts

@@ -14,13 +14,6 @@ const meta = {
     },
     onClose: { action: 'closed' },
   },
-  parameters: {
-    styles: {
-      '.header': {
-        color: 'red',
-      },
-    },
-  },
 } satisfies Meta<typeof CpDialog>
 
 export default meta
@@ -29,6 +22,8 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     maxWidth: 600,
+    title: 'Dialog title',
+    subtitle: 'Dialog subtitle',
   },
   render: (args) => ({
     setup() {
@@ -39,14 +34,76 @@ export const Default: Story = {
       <CpButton @click="isOpen = true">Open Dialog</CpButton>
       <CpTransitionDialog>
         <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
-          <template #header>
-            <h1 style="padding: 16px 24px">Header slot</h1>
-            </template>
-            <p style="padding: 16px 24px">This is the default slot content. You can put any content here.</p>
-            <template #footer>
-              <CpButton @click="isOpen = false">Cancel</CpButton>
-              This is the footer slot
-            </template>
+          <template #title>Header slot</template>
+          <template #subtitle>Subtitle</template>
+          <p>This is the default slot content. You can put any content here.</p>
+          <template #footer>
+            <CpButton @click="isOpen = false">Cancel</CpButton>
+            This is the footer slot
+          </template>
+        </CpDialog>
+      </CpTransitionDialog>
+    `,
+  }),
+}
+
+export const TitleSubtitleWithProps: Story = {
+  args: {
+    maxWidth: 600,
+    title: 'Dialog title',
+  },
+  render: (args) => ({
+    setup() {
+      const isOpen = ref(false)
+      return { args, isOpen }
+    },
+    template: `
+      <CpButton @click="isOpen = true">Open Dialog with string title/subtitle</CpButton>
+      <CpTransitionDialog>
+        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
+          <p>This is the default slot content. You can put any content here.</p>
+          <template #footer>
+            <CpButton @click="isOpen = false">Cancel</CpButton>
+            This is the footer slot
+          </template>
+        </CpDialog>
+      </CpTransitionDialog>
+    `,
+  }),
+}
+
+export const TitleSubtitleWithSlots: Story = {
+  args: {
+    maxWidth: 560,
+    titleTag: 'div',
+    subtitleTag: 'div',
+  },
+  render: (args) => ({
+    setup() {
+      const isOpen = ref(false)
+      return { args, isOpen }
+    },
+    template: `
+      <CpButton @click="isOpen = true">Open Dialog (flex title/subtitle)</CpButton>
+      <CpTransitionDialog>
+        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false" title-tag="div" subtitle-tag="div">
+          <template #title>
+            <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
+              <cp-icon type="info" style="flex-shrink: 0;" />
+              <span>Dialog with flex layout</span>
+            </div>
+          </template>
+          <template #subtitle>
+            <div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
+              <span>Optional info</span>
+              <span style="color: var(--cp-text-tertiary);">•</span>
+              <span>Last updated today</span>
+            </div>
+          </template>
+          <p>Body content. Title and subtitle above are divs with flex layout.</p>
+          <template #footer>
+            <CpButton @click="isOpen = false">Close</CpButton>
+          </template>
         </CpDialog>
       </CpTransitionDialog>
     `,