@citizenplane/pimp 8.32.2 → 8.32.5

package/src/components/CpMultiselect.vue

@@ -30,7 +30,7 @@
       </template>
       <template #chip="{ value, removeCallback }">
         <slot name="selected-option" :option="value" :remove="removeCallback">
-          <cp-badge is-clearable size="sm" @on-clear="removeCallback()">
+          <cp-badge is-clearable size="sm" @on-clear="removeCallback">
             <template #leading-icon>
               <slot name="selected-option-leading-icon" :option="value" />
             </template>
@@ -73,7 +73,6 @@ import { isEmpty } from '@/helpers/object'
 
 interface Emits {
   (e: 'search', query: string): void
-  (e: 'select', option: Record<string, unknown>): void
   (e: 'clear'): void
   (e: 'update:modelValue', value: Record<string, unknown> | Record<string, unknown>[] | null): void
 }
@@ -129,8 +128,14 @@ const selectModel = computed({
   },
 })
 
-const passThroughConfig = {
-  root: { class: 'cpMultiselect__select' },
+const hasMultipleValues = computed(() => Array.isArray(selectModel.value) && selectModel.value.length > 0)
+
+const multiselectDynamicClass = computed(() => {
+  return hasMultipleValues.value ? 'cpMultiselect__select--hasMultipleValues' : ''
+})
+
+const passThroughConfig = computed(() => ({
+  root: { class: `cpMultiselect__select ${multiselectDynamicClass.value}` },
   inputmultiple: { class: 'cpMultiselect__tags' },
   dropdown: { class: 'cpMultiselect__toggle' },
   inputchip: { class: 'cpMultiselect__inputWrapper' },
@@ -139,16 +144,15 @@ const passThroughConfig = {
   list: { class: 'cpMultiselect__list' },
   option: { class: 'cpMultiselect__option' },
   loader: { class: 'cpMultiselect__hidden' },
-}
+}))
 
 const multiselect = ref<InstanceType<typeof AutoComplete> | null>(null)
 
+// @ts-expect-error 'overlayVisible' does not exist on type instance of AutoComplete
 const isDropdownOpen = computed(() => multiselect.value?.overlayVisible)
 
 const chevronDynamicClass = computed(() => {
-  return {
-    'cpMultiselect__dropdownIcon--isRotated': isDropdownOpen.value,
-  }
+  return { 'cpMultiselect__dropdownIcon--isRotated': isDropdownOpen.value }
 })
 
 const displayPrefix = computed(() => {
@@ -166,8 +170,10 @@ const handleClear = () => (selectModel.value = null)
 
 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()
   }
 }
@@ -181,16 +187,22 @@ const handleUpdateModelValue = (value: Record<string, unknown> | null) => {
 
 const overrideAlignOverlay = () => {
   if (multiselect.value) {
+    // @ts-expect-error 'alignOverlay' does not exist on type instance of AutoComplete
     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)
 }
 
@@ -208,6 +220,9 @@ onMounted(() => overrideAlignOverlay())
   }
 
   &__prefix {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
     order: -1;
 
     &:empty {
@@ -217,14 +232,17 @@ onMounted(() => overrideAlignOverlay())
 
   &__select {
     display: flex;
-    min-height: fn.px-to-rem(46);
     align-items: center;
     justify-content: space-between;
-    padding: fn.px-to-rem(8);
+    padding: fn.px-to-rem(10.5);
     border: 1px solid colors.$border-color;
     border-radius: fn.px-to-rem(10);
     gap: sp.$space;
 
+    &--hasMultipleValues {
+      padding: fn.px-to-rem(9.5) fn.px-to-rem(10.5);
+    }
+
     &:has(input:focus-visible) {
       box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$primary-color, $lightness: 70%);
     }
@@ -272,21 +290,15 @@ onMounted(() => overrideAlignOverlay())
     padding: 0;
     flex: 1;
     font-size: fn.px-to-rem(14);
-    line-height: fn.px-to-rem(24);
+    line-height: fn.px-to-rem(22);
     background-color: transparent;
+    width: 100%;
 
     &:disabled {
       cursor: not-allowed;
     }
   }
 
-  &__input {
-    padding: 0;
-    flex: 1;
-    font-size: fn.px-to-rem(14);
-    line-height: fn.px-to-rem(24);
-  }
-
   &__dropdownIcon {
     @include mx.square-sizing(16);
 

package/src/components/index.ts

@@ -1,45 +1,33 @@
 import { vTooltip } from 'floating-vue'
-// PLUGINS
 import { vMaska } from 'maska/vue'
 import PrimeVue from 'primevue/config'
 import { App } from 'vue'
 import { BindOnceDirective } from 'vue-bind-once'
 
-// DIRECTIVES
 import ClickOutside from '../directives/ClickOutside'
 import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
 import CpAirlineLogo from './CpAirlineLogo.vue'
-// Feedback indicators
 import CpAlert from './CpAlert.vue'
-// COMPONENTS
-// Atomic elements
 import CpBadge from './CpBadge.vue'
-// Buttons
 import CpButton from './CpButton.vue'
 import CpCalendar from './CpCalendar.vue'
-// Toggles
 import CpCheckbox from './CpCheckbox.vue'
-// Date pickers
+import CpContextualMenu from './CpContextualMenu.vue'
 import CpDate from './CpDate.vue'
 import CpDatepicker from './CpDatepicker.vue'
 import CpDialog from './CpDialog.vue'
 import CpDialogWrapper from './CpDialogWrapper.vue'
-// Typography
 import CpHeading from './CpHeading.vue'
-// Visual
 import CpIcon from './CpIcon.vue'
-// Inputs
 import CpInput from './CpInput.vue'
-// Dropdown menus
 import CpLoader from './CpLoader.vue'
+import CpMenuItem from './CpMenuItem.vue'
 import CpMultiselect from './CpMultiselect.vue'
 import CpPartnerBadge from './CpPartnerBadge.vue'
 import CpRadio from './CpRadio.vue'
-// Selects
 import CpSelect from './CpSelect.vue'
 import CpSelectMenu from './CpSelectMenu.vue'
 import CpSwitch from './CpSwitch.vue'
-// List and Tables
 import CpTable from './CpTable.vue'
 import CpTextarea from './CpTextarea.vue'
 import CpToaster from './CpToaster.vue'
@@ -52,11 +40,8 @@ import IconGroupBy from './icons/IconGroupBy.vue'
 import IconOta from './icons/IconOta.vue'
 import IconSupplier from './icons/IconSupplier.vue'
 import IconThirdParty from './icons/IconThirdParty.vue'
-// Icons
 import IconTooltip from './icons/IconTooltip.vue'
-// Helpers and Utilities
 import TransitionExpand from './TransitionExpand.vue'
-// Methods
 import createToaster from '@/plugins/toaster'
 
 const Components = {
@@ -67,6 +52,8 @@ const Components = {
   CpDialogWrapper,
   CpDialog,
   CpDate,
+  CpContextualMenu,
+  CpMenuItem,
   CpCoreDatepicker,
   CpDatepicker,
   CpCalendar,

package/src/stories/CpContextualMenu.stories.ts

@@ -0,0 +1,68 @@
+import { computed, ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpContextualMenu from '@/components/CpContextualMenu.vue'
+
+const meta = {
+  title: 'CpContextualMenu',
+  component: CpContextualMenu,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A component that displays airline logos using IATA codes. Fetches logos from Kiwi.com CDN and displays them with customizable sizes.',
+      },
+    },
+  },
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'The items to display in the menu',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: '[]' },
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CpContextualMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { CpContextualMenu },
+    setup() {
+      const menu = ref<InstanceType<typeof CpContextualMenu>>()
+      const showMenu = (event: MouseEvent) => menu.value?.show(event)
+
+      const isLoading = ref(false)
+
+      const items = computed(() => [
+        {
+          label: 'Download',
+          icon: 'download',
+          isLoading: isLoading.value,
+          command: () => {
+            isLoading.value = true
+            setTimeout(() => (isLoading.value = false), 2000)
+          },
+        },
+        {
+          label: 'Delete',
+          icon: 'trash-2',
+          isCritical: true,
+          command: () => alert('Delete clicked'),
+        },
+      ])
+
+      return { args, menu, showMenu, isLoading, items }
+    },
+    template: `
+      <p @contextmenu="showMenu">Right click on me to open the menu</p>
+      <CpContextualMenu :items="items" ref="menu" />
+    `,
+  }),
+}

package/src/stories/CpMultiselect.stories.ts

@@ -112,7 +112,7 @@ export const Single: Story = {
       <div style="padding: 20px;">
         <CpMultiselect v-model="selectedSupplier" v-bind="args" :options="dynamicOptions" :is-loading="isLoading" @search="handleSearch">
           <template #prefix>
-            <cp-partner-badge type="supplier" size="xs" />
+            <cp-partner-badge type="supplier" size="sm" />
           </template>
           <template #option="{ option }">
             <div style="display: flex; align-items: center; gap: 8px;">
@@ -191,7 +191,7 @@ export const Multiple: Story = {
       <div style="padding: 20px;">
         <CpMultiselect v-model="selectedAirlines" v-bind="args" :options="dynamicOptions" :is-loading="isLoading" @search="handleSearch">
           <template #prefix>
-            <cp-partner-badge type="airline" size="xs" />
+            <cp-partner-badge type="airline" size="sm" />
           </template>
           <template #selected-option-leading-icon="{ option }">
             <cp-airline-logo :iata-code="option.iata_code" size="14" />
@@ -225,7 +225,7 @@ export const Invalid: Story = {
       <div style="padding: 20px;">
         <CpMultiselect v-model="selectedSupplier" v-bind="args">
           <template #prefix>
-            <cp-partner-badge type="supplier" size="xs" />
+            <cp-partner-badge type="supplier" size="sm" />
           </template>
           <template #option="{ option }">
             <div style="display: flex; align-items: center; gap: 8px;">

package/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "compilerOptions": {
     "isolatedModules": true,
+    "moduleResolution": "bundler",
+    "module": "esnext",
     "strict": true,
     "jsx": "preserve",
     "jsxImportSource": "vue",