@citizenplane/pimp 18.16.0 → 18.16.1

package/package.json

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

package/src/components/CpMultiselect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cpMultiselect">
+  <div class="cpMultiselect" :class="multiselectDynamicClasses">
     <base-input-label
       v-if="label"
       v-bind-once="{ for: multiselectId }"
@@ -216,6 +216,20 @@ const chevronDynamicClass = computed(() => {
 
 const hasPrefixSlot = computed(() => !!slots.prefix)
 
+const hasValue = computed(() => {
+  if (props.multiple) return !!selectModel.value?.length
+  return !isEmpty(selectModel.value)
+})
+
+const hasError = computed(() => (props.isInvalid ?? false) && !!props.errorMessage)
+
+const multiselectDynamicClasses = computed(() => ({
+  'cpMultiselect--hasPrefix': hasPrefixSlot.value,
+  'cpMultiselect--isMultiple': props.multiple ?? false,
+  'cpMultiselect--hasValue': hasValue.value,
+  'cpMultiselect--hasError': hasError.value,
+}))
+
 const displayClearButton = computed(() => {
   if (props.multiple) return false
   return props.isClearable && !isEmpty(selectModel.value)
@@ -348,6 +362,14 @@ onMounted(() => overrideAlignOverlay())
     }
   }
 
+  &--hasPrefix#{&}--isMultiple#{&}--hasValue .cpMultiselect__select {
+    gap: var(--cp-spacing-sm);
+  }
+
+  &--hasError .cpMultiselect__select {
+    margin-bottom: var(--cp-spacing-md);
+  }
+
   &__select {
     position: relative;
     display: flex;

package/src/stories/CpMultiselect.stories.ts

@@ -109,6 +109,36 @@ export const Single: Story = {
   }),
 }
 
+/**
+ * Multi-value selection with a supplier prefix badge. Selected options are
+ * rendered as chips.
+ */
+export const Multiple: Story = {
+  args: {
+    placeholder: 'Select suppliers',
+    multiple: true,
+    options: supplierOptions,
+    trackBy: 'id',
+  },
+  render: (args) => ({
+    components: { CpMultiselect },
+    setup() {
+      const selectedSuppliers = ref([])
+
+      return { args, selectedSuppliers }
+    },
+    template: `
+      <div style="padding: 20px; max-width: 25rem;">
+        <CpMultiselect v-model="selectedSuppliers" v-bind="args">
+          <template #prefix>
+            <cp-badge color="magenta" is-square leading-icon="supplier" size="sm" />
+          </template>
+        </CpMultiselect>
+      </div>
+    `,
+  }),
+}
+
 /**
  * Multi-value selection with an async search handler. Selected options are
  * rendered as chips and can be customized through `#tag-leading-icon` and