@citizenplane/pimp 8.5.0 → 8.5.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citizenplane/pimp",
3
- "version": "8.5.0",
3
+ "version": "8.5.1",
4
4
  "scripts": {
5
5
  "dev": "vite --host",
6
6
  "build": "vite build",
@@ -2,4 +2,3 @@
2
2
 
3
3
  $component-size-default: px-to-em(44);
4
4
  $component-size-large: px-to-em(54);
5
- $component-size-small: px-to-rem(32);
@@ -29,9 +29,11 @@
29
29
  />
30
30
  <div v-if="hasAfterIcon" class="cpInput__icon cpInput__icon--isAfter">
31
31
  <slot v-if="hasAfterIconSlot" name="input-icon-after" />
32
- <button v-if="isSearch" type="button" class="cpInput__clear" @click="clearInputValue">
33
- <cp-icon type="x" class="cpInput__clearIcon" />
34
- </button>
32
+ <transition name="fade">
33
+ <button v-if="isClearButtonVisible" type="button" class="cpInput__clear" @click="clearInputValue">
34
+ <cp-icon type="x" class="cpInput__clearIcon" />
35
+ </button>
36
+ </transition>
35
37
  </div>
36
38
  </div>
37
39
  <transition-expand>
@@ -183,6 +185,9 @@ export default {
183
185
  displayErrorMessage() {
184
186
  return this.isInputInvalid && this.errorMessage.length
185
187
  },
188
+ isClearButtonVisible() {
189
+ return this.isSearch && this.modelValue.length
190
+ },
186
191
  },
187
192
  mounted() {
188
193
  this.$nextTick(() => this.checkInputValidity())