@citizenplane/pimp 9.7.1 → 9.7.2

package/package.json

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

package/src/components/CpTelInput.vue

@@ -6,19 +6,24 @@
     <div class="cpTelInput__container">
       <vue-tel-input
         ref="telInputRef"
-        v-model="telModel"
+        v-model="inputModel"
         class="cpTelInput__wrapper"
         :class="wrapperDynamicClasses"
         :disabled
+        :dropdown-options
         :input-options
         mode="international"
         placeholder="Enter your phone number"
         valid-characters-only
-        @country-changed="focusOnInput"
+        @close="focusOnInput"
+        @open="handleDropdownOpen"
       >
         <template #arrow-icon>
           <cp-icon class="cpTelInput__arrow" size="20" type="chevron-down" />
         </template>
+        <template #search-icon>
+          <cp-icon class="cpTelInput__searchIcon" size="20" type="search" />
+        </template>
       </vue-tel-input>
     </div>
     <transition-expand mode="out-in">
@@ -33,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { useAttrs, ref, useId, computed, useTemplateRef } from 'vue'
+import { useAttrs, ref, useId, computed, nextTick } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
@@ -44,8 +49,10 @@ interface Props {
   disabled?: boolean
   errorMessage?: string
   help?: string
+  hideSearch?: boolean
   isInvalid?: boolean
   label?: string
+  name?: string
   placeholder?: string
   required?: boolean
   size?: Sizes
@@ -61,10 +68,13 @@ const props = withDefaults(defineProps<Props>(), {
   isInvalid: false,
   required: false,
   tooltip: '',
+  name: '',
+  hideSearch: false,
   size: Sizes.MD,
 })
 
-const telInputRef = useTemplateRef<HTMLInputElement>('telInputRef')
+const inputModel = defineModel<string>()
+const telInputRef = ref<HTMLInputElement | null>(null)
 
 const helpMessageId = useId()
 const errorMessageId = useId()
@@ -78,9 +88,17 @@ const wrapperDynamicClasses = computed(() => ({
   'cpTelInput__wrapper--isDisabled': props.disabled,
 }))
 
+const dropdownOptions = computed(() => ({
+  showSearchBox: !props.hideSearch,
+  showFlags: true,
+  tabindex: 0,
+  searchBoxPlaceholder: 'Search country...',
+}))
+
 const inputOptions = computed(() => ({
   autofocus: true,
   placeholder: props.placeholder,
+  name: props.name,
   styleClasses: {
     cpTelInput__input: true,
     'cpTelInput__input--isInvalid': props.isInvalid,
@@ -88,8 +106,6 @@ const inputOptions = computed(() => ({
   },
 }))
 
-const telModel = defineModel<string>('telModel')
-
 const inputIdentifier = ref<string>((attrs.id as string | undefined) || useId())
 
 const capitalizedLabel = computed(() => capitalizeFirstLetter(props.label))
@@ -98,9 +114,19 @@ const displayErrorMessage = computed(() => props.isInvalid && props.errorMessage
 
 const displayHelp = computed(() => props.help?.length && !displayErrorMessage.value)
 
-const focusOnInput = () => {
+const focusOnInput = async () => {
+  if (!telInputRef.value) return
+  setTimeout(() => telInputRef.value?.focus(), 1)
+}
+
+const handleDropdownOpen = async () => {
   if (!telInputRef.value) return
-  telInputRef.value.focus()
+  await nextTick()
+
+  const searchBox = telInputRef.value?.$el?.querySelector('input.vti__search_box')
+  if (!searchBox) return
+
+  setTimeout(() => searchBox.focus(), 1)
 }
 </script>
 
@@ -115,7 +141,7 @@ const focusOnInput = () => {
   }
 
   &__container {
-    z-index: 1;
+    z-index: 9;
     position: relative;
     display: flex;
   }
@@ -183,7 +209,8 @@ const focusOnInput = () => {
     }
   }
 
-  &__arrow {
+  &__arrow,
+  &__searchIcon {
     color: colors.$neutral-dark-1;
     transition: transform 150ms ease;
   }
@@ -199,6 +226,7 @@ const focusOnInput = () => {
 
     &:focus,
     &:focus-within {
+      z-index: 2;
       outline: fn.px-to-rem(2) solid colors.$primary-color;
     }
   }
@@ -239,21 +267,74 @@ const focusOnInput = () => {
     border-top-left-radius: fn.px-to-rem(10);
   }
 
-  .vti__dropdown-list {
+  .vti__search_box_container {
+    position: sticky;
+    top: 0;
+    display: flex;
+    margin-bottom: sp.$space-sm;
+  }
+
+  .vti__search_box {
+    box-shadow: 0 0 0 fn.px-to-rem(1) colors.$border-color;
+    appearance: none;
+    border-radius: fn.px-to-rem(6);
     width: 100%;
+    color: inherit;
+    padding: sp.$space-sm sp.$space-sm sp.$space-sm sp.$space;
+    line-height: fn.px-to-rem(24);
+    font-size: fn.px-to-rem(14);
+    text-indent: fn.px-to-rem(28);
+    border: none;
+
+    &:hover {
+      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$primary-color;
+    }
+
+    &:focus {
+      outline: fn.px-to-rem(2) solid colors.$primary-color;
+      background-color: colors.$neutral-light;
+    }
+
+    &::placeholder {
+      color: colors.$neutral-dark-1;
+    }
+  }
+
+  &__searchIcon {
+    @include mx.square-sizing(16);
+
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: fn.px-to-rem(12);
+  }
+
+  .vti__dropdown-list {
+    clip-path: inset(0 round fn.px-to-rem(10));
+    max-height: fn.px-to-rem(130);
+    width: calc(100% + fn.px-to-rem(2));
     padding: sp.$space-sm;
     border-radius: fn.px-to-rem(10);
+    border: fn.px-to-rem(1) solid colors.$border-color;
+
+    &:has(.vti__search_box) {
+      max-height: fn.px-to-rem(170);
+    }
 
     &.below {
       top: fn.px-to-rem(40) + sp.$space;
     }
+
+    &.above {
+      bottom: calc(100% + fn.px-to-rem(8));
+    }
   }
 
   .vti__dropdown-item {
     padding: sp.$space-md sp.$space-lg sp.$space-md sp.$space-md;
     display: flex;
     align-items: flex-start;
-    border-radius: fn.px-to-rem(4);
+    border-radius: fn.px-to-rem(6);
     font-size: fn.px-to-rem(14);
     line-height: fn.px-to-rem(24);
 
@@ -287,6 +368,15 @@ const focusOnInput = () => {
       padding: sp.$space-md sp.$space sp.$space-md sp.$space-md;
     }
 
+    .vti__search_box {
+      padding: sp.$space sp.$space-lg;
+      text-indent: fn.px-to-rem(24);
+    }
+
+    .cpTelInput__searchIcon {
+      left: fn.px-to-rem(16);
+    }
+
     .vti__dropdown-list.below {
       top: fn.px-to-rem(48) + sp.$space;
     }

package/src/components/index.ts

@@ -3,6 +3,8 @@ import { vMaska } from 'maska/vue'
 import PrimeVue from 'primevue/config'
 import { App } from 'vue'
 import { BindOnceDirective } from 'vue-bind-once'
+import VueTelInput from 'vue-tel-input'
+import 'vue-tel-input/vue-tel-input.css'
 
 import ClickOutside from '../directives/ClickOutside'
 import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
@@ -93,6 +95,7 @@ const Components = {
 const Pimp = {
   install(app: App, options: Record<string, unknown>) {
     app.use(PrimeVue, { unstyled: true })
+    app.use(VueTelInput)
 
     Object.keys(Components).forEach((name) => {
       app.component(name, Components[name as keyof typeof Components])