@citizenplane/pimp 9.7.7 → 9.7.9

package/package.json

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

package/src/components/CpMultiselect.vue

@@ -6,21 +6,21 @@
     <auto-complete
       ref="multiselect"
       v-model="selectModel"
-      :append-to="appendTo"
+      :append-to
       auto-option-focus
       :data-key="trackBy"
-      :disabled="disabled"
+      :disabled
       :force-selection
-      :input-class="inputClass"
+      :input-class
       :invalid="isInvalid"
-      :multiple="multiple"
-      :name="name"
-      :option-disabled="optionDisabled"
-      :option-label="optionLabel"
-      :placeholder="placeholder"
+      :multiple
+      :name
+      :option-disabled
+      :option-label
+      :placeholder
       :pt="passThroughConfig"
       :suggestions="options"
-      :typeahead="typeahead"
+      :typeahead
       @click="handleClick"
       @complete="handleSearch"
       @hide="handleOverlayHidden"
@@ -115,6 +115,7 @@ interface Props {
   options?: unknown[]
   placeholder?: string
   required?: boolean
+  size?: 'sm' | 'md'
   trackBy?: string
   withoutTypeahead?: boolean
 }
@@ -131,6 +132,7 @@ const props = withDefaults(defineProps<Props>(), {
   modelValue: null,
   optionDisabled: 'disabled',
   options: () => [],
+  size: 'md',
 })
 
 const emit = defineEmits<Emits>()
@@ -154,7 +156,7 @@ const inputClass = computed(() => ({
 }))
 
 const passThroughConfig = computed(() => ({
-  root: { class: `cpMultiselect__select` },
+  root: { class: `cpMultiselect__select cpMultiselect__select--${props.size}` },
   inputmultiple: { class: 'cpMultiselect__tags' },
   dropdown: { class: 'cpMultiselect__toggle' },
   inputchip: { class: 'cpMultiselect__inputWrapper' },
@@ -302,6 +304,10 @@ onMounted(() => overrideAlignOverlay())
     border-radius: fn.px-to-rem(8);
     gap: sp.$space;
 
+    &--sm {
+      padding: sp.$space-sm sp.$space-md;
+    }
+
     &:has(input:hover):not(:has(input:disabled)) {
       outline: fn.px-to-rem(1) solid colors.$primary-color;
     }
@@ -376,6 +382,7 @@ onMounted(() => overrideAlignOverlay())
     font-size: fn.px-to-rem(14);
     line-height: fn.px-to-rem(24);
     background-color: transparent;
+    width: 100%;
 
     &:disabled {
       color: colors.$gray-500;

package/src/components/CpTelInput.vue

@@ -48,6 +48,7 @@ import { Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Props {
+  autofocus?: boolean
   disabled?: boolean
   errorMessage?: string
   help?: string
@@ -68,6 +69,7 @@ const props = withDefaults(defineProps<Props>(), {
   help: '',
   disabled: false,
   isInvalid: false,
+  autofocus: false,
   required: false,
   tooltip: '',
   name: '',
@@ -114,7 +116,7 @@ const dropdownOptions = computed(() => ({
 }))
 
 const inputOptions = computed(() => ({
-  autofocus: true,
+  autofocus: props.autofocus,
   placeholder: props.placeholder,
   name: props.name,
   type: 'tel',

package/src/stories/CpMultiselect.stories.ts

@@ -95,6 +95,11 @@ const meta = {
       control: 'text',
       description: 'Property to track the selected option',
     },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+      description: 'Size of the multiselect',
+    },
   },
 } satisfies Meta<typeof CpMultiselect>
 
@@ -139,7 +144,7 @@ export const Single: Story = {
       return { args, selectedSupplier, dynamicOptions, handleSearch, isLoading }
     },
     template: `
-      <div style="padding: 20px;">
+      <div style="padding: 20px;width: 25rem;">
         <CpMultiselect v-model="selectedSupplier" v-bind="args" :options="dynamicOptions" :is-loading="isLoading" @search="handleSearch">
           <template #prefix>
             <cp-partner-badge type="supplier" size="sm" />