@pocketprep/ui-kit 3.4.49 → 3.4.51

package/lib/components/Forms/CheckboxOption.vue

@@ -23,9 +23,13 @@
             :is-dark-mode="isDarkMode"
             :has-label="true"
         />
-        <label :id="checkboxId" class="uikit-checkbox-option__label">
-            {{ label }}
-        </label>
+        <slot name="label">
+            <label :id="checkboxId" class="uikit-checkbox-option__label">
+                <slot name="labelContent">
+                    {{ label }}
+                </slot>
+            </label>
+        </slot>
     </div>
 </template>
 

package/lib/components/Forms/Select.vue

@@ -69,6 +69,7 @@
                     'uikit-select__input--focus': focus,
                     'uikit-select__input--disabled': disabled,
                     'uikit-select__input--show-dropdown': showDropdown,
+                    'uikit-select__input--show-text-clear': showTypeaheadClear,
                 }"
                 :placeholder="placeholder"
                 :aria-label="label"
@@ -77,6 +78,17 @@
                 @keydown.stop="keyPressedContainer"
                 @click="showDropdown = true"
             >
+            <Icon
+                v-if="dropdownOverride || (showTypeaheadClear && searchText)"
+                v-dark="isDarkMode"
+                type="close"
+                class="uikit-select__x"
+                :class="{
+                    'uikit-select__x--with-arrow': !dropdownOverride,
+                }"
+                @mousedown.prevent
+                @click="performCloseActions"
+            />
             <Icon
                 v-if="!dropdownOverride"
                 v-dark="isDarkMode"
@@ -87,14 +99,8 @@
                     'uikit-select__arrow--focus': focus,
                     'uikit-select__arrow--show-dropdown': showDropdown,
                 }"
-                @click="showDropdown = true"
-            />
-            <Icon
-                v-else
-                v-dark="isDarkMode"
-                type="close"
-                class="uikit-select__x"
-                @click="performCloseActions"
+                @mousedown.prevent
+                @click="showDropdown = !showDropdown"
             />
             <ul
                 v-show="showDropdown && !disabled"
@@ -106,6 +112,7 @@
                     'uikit-select__list--subtext': subtext,
                 }"
             >
+                <slot name="dropdownListHeader" />
                 <slot name="dropdownList">
                     <li
                         v-for="item in filteredData"
@@ -177,8 +184,8 @@ export default class Select extends Vue {
     @Prop() error?: boolean
     @Prop() openMenuAbove?: boolean
     @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) dropdownOverride!: boolean
-    // Can override the icon to be an X instead
+    @Prop({ default: false }) dropdownOverride!: boolean // Can override the icon to be an X instead
+    @Prop({ default: false }) showTypeaheadClear!: boolean
 
     hover = false
     focus = false
@@ -233,11 +240,10 @@ export default class Select extends Vue {
 
         if (this.typeahead && !this.searchText) {
             this.emitUpdateModelValue(null)
-        }
-        if (this.typeahead && this.searchText && this.filteredData.length < 1 && !this.dropdownOverride) {
+        } else if (this.typeahead && this.searchText && this.filteredData.length < 1 && !this.dropdownOverride) {
             this.emitUpdateModelValue(null)
             this.searchText = ''
-        } else if (this.typeahead && this.searchText && this.filteredData[0]) {
+        } else if (this.typeahead && this.searchText && this.filteredData.length === 1 && this.filteredData[0]) {
             this.emitUpdateModelValue(this.filteredData[0])
         }
     }
@@ -386,7 +392,12 @@ export default class Select extends Vue {
          * If the dropdown is showing an X, there is some logic we need...
          * The first time, it should clear out search text -- the second time it should collapse dropdown
          *  */
-        this.searchText ? this.searchText = '' : this.showDropdown = false
+        if (this.searchText) {
+            this.emitUpdateModelValue(null)
+            this.searchText = ''
+        } else {
+            this.showDropdown = false
+        }
     }
 
     @Watch('showDropdown')
@@ -543,6 +554,10 @@ export default class Select extends Vue {
         cursor: text !important;
         padding-right: 32px;
 
+        &--show-text-clear {
+            padding-right: 60px;
+        }
+
         &--error {
             border: 1px solid $red-pegasus;
         }
@@ -632,6 +647,10 @@ export default class Select extends Vue {
         color: $steel;
         z-index: 1;
 
+        &--with-arrow {
+            right: 34px;
+        }
+
         &:hover {
             color: $brand-blue;
             cursor: pointer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.49",
+  "version": "3.4.51",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {