@citizenplane/pimp 18.13.0 → 18.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CpMultiselect.vue.d.ts +9 -9
- package/dist/components/CpMultiselect.vue.d.ts.map +1 -1
- package/dist/pimp.es.js +27 -21
- package/dist/pimp.umd.js +23 -23
- package/package.json +1 -1
- package/src/components/CpMultiselect.vue +11 -0
- package/src/stories/CpMultiselect.stories.ts +1 -5
package/package.json
CHANGED
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
:pt="passThroughConfig"
|
|
30
30
|
:suggestions="dynamicOptions"
|
|
31
31
|
:typeahead
|
|
32
|
+
@blur="handleBlur"
|
|
32
33
|
@click="handleClick"
|
|
33
34
|
@complete="handleSearch"
|
|
34
35
|
@hide="handleOverlayHidden"
|
|
@@ -196,6 +197,7 @@ type ExtendedAutoComplete = InstanceType<typeof AutoComplete> & {
|
|
|
196
197
|
overlay: HTMLElement
|
|
197
198
|
overlayVisible: boolean
|
|
198
199
|
show: () => void
|
|
200
|
+
writeValue: (value: unknown, event?: Event) => void
|
|
199
201
|
}
|
|
200
202
|
|
|
201
203
|
const multiselect = ref<ExtendedAutoComplete | null>(null)
|
|
@@ -245,6 +247,15 @@ const handleClear = () => (selectModel.value = null)
|
|
|
245
247
|
const handleOverlayShown = () => emit('overlayShown')
|
|
246
248
|
const handleOverlayHidden = () => emit('overlayHidden')
|
|
247
249
|
|
|
250
|
+
const handleBlur = () => {
|
|
251
|
+
if (props.multiple) {
|
|
252
|
+
const inputElement = getInputElement()
|
|
253
|
+
if (inputElement) inputElement.value = ''
|
|
254
|
+
} else {
|
|
255
|
+
multiselect.value?.writeValue(selectModel.value)
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
|
|
248
259
|
const handleValueChange = (newValue: string | object) => {
|
|
249
260
|
if (typeof newValue !== 'string') return
|
|
250
261
|
searchQuery.value = newValue
|
|
@@ -100,7 +100,6 @@ export const Single: Story = {
|
|
|
100
100
|
<CpMultiselect v-model="selectedSupplier" v-bind="args">
|
|
101
101
|
<template #prefix>
|
|
102
102
|
<div class="baseSelectAirline__prefix">
|
|
103
|
-
<partner-badge size="sm" type="airline" variant="soft" />
|
|
104
103
|
<cp-airline-logo :iata-code="getOptionIataCode(selectedSupplier)" size="20" />
|
|
105
104
|
</div>
|
|
106
105
|
</template>
|
|
@@ -192,12 +191,9 @@ export const Invalid: Story = {
|
|
|
192
191
|
template: `
|
|
193
192
|
<div style="padding: 20px; max-width: 25rem;">
|
|
194
193
|
<CpMultiselect v-model="selectedSupplier" v-bind="args">
|
|
195
|
-
<template #prefix>
|
|
196
|
-
<cp-partner-badge type="supplier" size="sm" />
|
|
197
|
-
</template>
|
|
198
194
|
<template #option="{ option }">
|
|
199
195
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
200
|
-
|
|
196
|
+
<cp-icon type="supplier" size="16" />
|
|
201
197
|
{{ option.name }}
|
|
202
198
|
</div>
|
|
203
199
|
</template>
|