@citizenplane/pimp 14.0.2 → 14.1.0

package/package.json

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

package/src/components/CpAccordion.vue

@@ -10,24 +10,32 @@
       type="button"
       @click="handleClick"
     >
-      <div class="cpAccordion__title">
-        <cp-icon v-if="displayLeadingIcon" class="cpAccordion__icon" size="16" :type="dynamicIcon" />
-        <div class="cpAccordion__leading">
-          <span>{{ title }}</span>
-          <slot name="leading-slot" />
+      <div class="cpAccordion__headerContent">
+        <cp-item-actions
+          v-if="hasActions"
+          :actions="resolvedActions"
+          class="cpAccordion__actions"
+          :class="actionsDynamicClasses"
+          :quick-options-limit="resolvedQuickOptionsLimit"
+        />
+        <div class="cpAccordion__title">
+          <cp-icon v-if="displayLeadingIcon" class="cpAccordion__icon" size="16" :type="dynamicIcon" />
+          <div class="cpAccordion__leading">
+            <span class="cpAccordion__titleText">{{ title }}</span>
+            <slot name="leading-slot" />
+          </div>
+        </div>
+        <div v-if="displayTrailingSection" class="cpAccordion__trailing">
+          <span v-if="hasTrailingSlot" class="cpAccordion__desktopTrailingSlot">
+            <slot name="trailing-slot" />
+          </span>
+          <cp-icon v-if="displayActionTrigger" class="cpAccordion__more" size="16" type="more-horizontal" />
+          <cp-icon v-if="displayTrailingIcon" class="cpAccordion__icon" size="16" :type="dynamicIcon" />
         </div>
       </div>
-      <div class="cpAccordion__trailing">
+      <span v-if="hasTrailingSlot" class="cpAccordion__mobileTrailingSlot">
         <slot name="trailing-slot" />
-        <cp-icon v-if="displayActionTrigger" class="cpAccordion__more" size="16" type="more-horizontal" />
-        <cp-icon v-if="displayTrailingIcon" class="cpAccordion__icon" size="16" :type="dynamicIcon" />
-      </div>
-      <cp-item-actions
-        v-if="hasActions"
-        :actions="resolvedActions"
-        class="cpAccordion__actions"
-        :quick-options-limit="resolvedQuickOptionsLimit"
-      />
+      </span>
     </button>
     <cp-transition-expand>
       <div v-if="isToggled" :id="accordionContentId" :aria-labelledby="accordionId" class="cpAccordion__content">
@@ -38,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useId } from 'vue'
+import { computed, ref, useId, useSlots } from 'vue'
 
 import type { MenuItem } from 'primevue/menuitem'
 
@@ -64,6 +72,8 @@ export type CpAccordionProps =
 
 const props = defineProps<CpAccordionProps>()
 
+const slots = useSlots()
+
 const isToggled = ref(props.defaultOpenState)
 
 const accordionId = useId()
@@ -87,15 +97,22 @@ const resolvedHideActionTrigger = computed(() => {
 const hasActions = computed(() => resolvedActions.value.length > 0)
 const hasLeadingIcon = computed(() => resolvedIconPosition.value === 'leading')
 const hasTrailingIcon = computed(() => resolvedIconPosition.value === 'trailing')
+const hasTrailingSlot = computed(() => !!slots['trailing-slot'])
 
 const displayActionTrigger = computed(() => !resolvedHideActionTrigger.value && hasActions.value)
 const displayLeadingIcon = computed(() => hasLeadingIcon.value || hasActions.value)
 const displayTrailingIcon = computed(() => hasTrailingIcon.value && !hasActions.value)
 
+const displayTrailingSection = computed(() => {
+  return hasTrailingSlot.value || displayActionTrigger.value || displayTrailingIcon.value
+})
+
 const dynamicIcon = computed(() => (isToggled.value ? 'chevron-up' : 'chevron-down'))
 
 const dynamicClasses = computed(() => [{ 'cpAccordion--isOpen': isToggled.value }])
 
+const actionsDynamicClasses = computed(() => ({ 'cpAccordion__actions--hasTrailingSlot': hasTrailingSlot.value }))
+
 const handleClick = () => (isToggled.value = !isToggled.value)
 </script>
 
@@ -106,6 +123,14 @@ const handleClick = () => (isToggled.value = !isToggled.value)
   background-color: var(--cp-background-primary);
   width: 100%;
 
+  &__headerContent {
+    display: flex;
+    flex-shrink: 0;
+    width: 100%;
+    justify-content: space-between;
+    gap: var(--cp-spacing-lg);
+  }
+
   &__header {
     @extend %u-focus-outline;
 
@@ -129,6 +154,7 @@ const handleClick = () => (isToggled.value = !isToggled.value)
     font-weight: 500;
     font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-sm);
+    overflow: hidden;
   }
 
   &__icon {
@@ -140,6 +166,12 @@ const handleClick = () => (isToggled.value = !isToggled.value)
   &__leading {
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    text-align: left;
+  }
+
+  &__titleText {
+    @extend %u-text-ellipsis;
   }
 
   &__trailing {
@@ -149,15 +181,59 @@ const handleClick = () => (isToggled.value = !isToggled.value)
     position: relative;
   }
 
+  &__desktopTrailingSlot {
+    display: flex;
+  }
+
+  &__mobileTrailingSlot {
+    display: none;
+    text-align: left;
+    padding-left: var(--cp-spacing-3xl);
+  }
+
   &__actions {
+    right: 0;
+    top: 0;
+    height: 100%;
     background: linear-gradient(270deg, var(--cp-utility-neutral-100) 0%, rgba(242, 246, 250, 0) 100%);
     padding: 0 var(--cp-spacing-md) 0 15%;
+    transform: translate3d(calc(var(--cp-dimensions-1) * 1.25), 0%, 0);
     display: flex;
     align-items: center;
+    z-index: 1;
   }
 
   &__more {
     color: var(--cp-foreground-primary);
   }
 }
+
+@media (hover: hover) and (pointer: fine) {
+  [cp-item-actions-trigger]:has(.cpItemActions--isDropdownOpen) .cpItemActions,
+  [cp-item-actions-trigger]:is(:focus-within, :focus-visible, :hover) .cpItemActions {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+// var(--cp-breakpoint-sm) = 40rem = 400px
+@include mx.media-query-max(40rem) {
+  .cpAccordion {
+    &__header {
+      flex-wrap: wrap;
+    }
+
+    &__desktopTrailingSlot {
+      display: none;
+    }
+
+    &__mobileTrailingSlot {
+      display: flex;
+    }
+
+    &__actions--hasTrailingSlot {
+      align-items: flex-start;
+      top: fn.px-to-rem(8);
+    }
+  }
+}
 </style>

package/src/components/CpMultiselect.vue

@@ -28,7 +28,7 @@
       :option-label
       :placeholder
       :pt="passThroughConfig"
-      :suggestions="options"
+      :suggestions="dynamicOptions"
       :typeahead
       @click="handleClick"
       @complete="handleSearch"
@@ -126,6 +126,7 @@ interface Props {
   modelValue?: Record<string, unknown>[] | Record<string, unknown> | string[] | null
   multiple?: boolean
   name?: string
+  onSearch?: (query: string) => void
   optionDisabled?: string | ((option: unknown) => boolean)
   optionLabel?: string
   options?: unknown[]
@@ -141,7 +142,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: '',
   name: '',
   placeholder: '',
-  optionLabel: undefined,
+  optionLabel: 'name',
   trackBy: undefined,
   emptyMessage: 'No results found',
   errorMessage: '',
@@ -149,6 +150,7 @@ const props = withDefaults(defineProps<Props>(), {
   optionDisabled: 'disabled',
   options: () => [],
   size: 'md',
+  onSearch: undefined,
 })
 
 const emit = defineEmits<Emits>()
@@ -218,7 +220,27 @@ const displayClearButton = computed(() => {
   return props.isClearable && !isEmpty(selectModel.value)
 })
 
-const handleSearch = (event: { query: string }) => emit('search', event.query)
+const hasRegisteredOnSearch = computed(() => props.onSearch !== undefined)
+
+const handleSearch = (event: { query: string }) => {
+  if (hasRegisteredOnSearch.value) {
+    return emit('search', event.query)
+  }
+
+  // If no onSearch is registered, toggle the dropdown (if hidden) to show the options
+  if (!isDropdownOpen.value) {
+    toggleDropdown()
+  }
+}
+
+const dynamicOptions = computed(() => {
+  if (hasRegisteredOnSearch.value) return props.options
+
+  return props.options.filter((option: unknown) => {
+    const optionLabel = typeof option === 'object' ? (option as Record<string, unknown>)[props.optionLabel] : option
+    return (optionLabel as string).toLowerCase().includes(searchQuery.value.toLowerCase())
+  })
+})
 const handleClear = () => (selectModel.value = null)
 const handleOverlayShown = () => emit('overlayShown')
 const handleOverlayHidden = () => emit('overlayHidden')

package/src/stories/CpAccordion.stories.ts

@@ -37,7 +37,7 @@ const defaultStoryActions: MenuItem[] = [
 ]
 
 const meta = {
-  title: 'Navigation/CpAccordion',
+  title: 'Visual/CpAccordion',
   component: CpAccordion,
   argTypes: {
     title: {
@@ -177,22 +177,6 @@ export const Documentation: Story = {
                 <div :style="sampleContentStyle" />
               </CpAccordion>
             </div>
-            <div :style="docCellStyle">
-              <span :style="docLabelStyle">Hover</span>
-              <CpAccordion
-                title="DIDA TRAVEL"
-                :default-open-state="false"
-                icon-position="leading"
-                style="background: var(--cp-background-primary-hover);"
-                :actions="actions"
-                :quick-options-limit="3"
-              >
-                <template #trailing-slot>
-                  This is a trailing slot
-                </template>
-                <div :style="sampleContentStyle" />
-              </CpAccordion>
-            </div>
             <div :style="docCellStyle">
               <span :style="docLabelStyle">Hide Action Trigger</span>
               <CpAccordion

package/src/stories/CpAccordionGroup.stories.ts

@@ -43,7 +43,7 @@ const defaultItemActions: MenuItem[] = [
 ]
 
 const meta = {
-  title: 'Navigation/CpAccordionGroup',
+  title: 'Visual/CpAccordionGroup',
   component: CpAccordionGroup,
   argTypes: {
     variant: {

package/src/stories/CpMultiselect.stories.ts

@@ -113,43 +113,23 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Single: Story = {
+export const DefaultSearchHandler: Story = {
   args: {
     placeholder: 'Select a supplier',
     multiple: false,
     options: supplierOptions,
-    optionLabel: 'name',
     trackBy: 'id',
     isClearable: true,
   },
   render: (args) => ({
     components: { CpMultiselect },
     setup() {
-      const searchQuery = ref('')
-      const isLoading = ref(false)
-
-      const originalOptions = ref(args.options)
-      const dynamicOptions = ref(toValue(originalOptions))
       const selectedSupplier = ref(null)
-
-      const handleSearch = async (query: string) => {
-        isLoading.value = true
-        searchQuery.value = query
-
-        await new Promise((resolve) => setTimeout(resolve, 500))
-
-        dynamicOptions.value = originalOptions.value?.filter((option) => {
-          return (option as IOption).name.toLowerCase().includes(searchQuery.value.toLowerCase())
-        })
-
-        isLoading.value = false
-      }
-
-      return { args, selectedSupplier, dynamicOptions, handleSearch, isLoading }
+      return { args, selectedSupplier }
     },
     template: `
       <div style="padding: 20px;width: 25rem;">
-        <CpMultiselect v-model="selectedSupplier" v-bind="args" :options="dynamicOptions" :is-loading="isLoading" @search="handleSearch">
+        <CpMultiselect v-model="selectedSupplier" v-bind="args">
           <template #prefix>
             <cp-partner-badge type="supplier" size="sm" />
           </template>