@citizenplane/pimp 10.1.11 → 10.2.0

package/package.json

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

package/src/components/CpInput.vue

@@ -16,6 +16,7 @@
     >
       <div v-if="hasBeforeIcon" class="cpInput__icon cpInput__icon--isBefore">
         <cp-icon v-if="isSearch" type="search" />
+        <cp-icon v-else-if="isEmail" type="mail" />
         <slot v-else name="leading-icon" />
       </div>
       <input
@@ -62,6 +63,8 @@ interface Emits {
 }
 
 interface Props {
+  autocomplete?: string
+  disabled?: boolean
   errorMessage?: string
   help?: string
   inputId?: string | null
@@ -70,23 +73,26 @@ interface Props {
   label?: string
   mask?: string | Record<string, unknown> | null
   modelValue?: string | number | boolean
+  placeholder?: string
   removeBorder?: boolean
+  required?: boolean
   size?: Sizes
   tooltip?: string
+  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  tooltip: '',
+  autocomplete: '',
+  errorMessage: '',
   label: '',
+  help: '',
   inputId: null,
-  isInvalid: false,
-  errorMessage: '',
   mask: null,
-  removeBorder: false,
-  isSearch: false,
-  help: '',
+  modelValue: '',
+  placeholder: '',
   size: Sizes.MD,
+  tooltip: '',
+  type: 'text',
 })
 
 const emit = defineEmits<Emits>()
@@ -125,6 +131,8 @@ const cpInputContainer = ref<HTMLDivElement | null>(null)
 const isDisabled = computed(() => checkAttribute('disabled'))
 const isRequired = computed(() => checkAttribute('required'))
 
+const isEmail = computed(() => props.type === 'email')
+
 const dynamicClasses = computed(() => {
   return [
     attrs.class,
@@ -141,7 +149,7 @@ const dynamicClasses = computed(() => {
 const isInputInvalid = computed(() => props.isInvalid || !isDOMElementValid.value)
 
 const hasBeforeIconSlot = computed(() => !!slots['leading-icon'])
-const hasBeforeIcon = computed(() => hasBeforeIconSlot.value || props.isSearch)
+const hasBeforeIcon = computed(() => hasBeforeIconSlot.value || props.isSearch || isEmail.value)
 
 const hasAfterIconSlot = computed(() => !!slots['trailing-icon'])
 const hasAfterIcon = computed(() => hasAfterIconSlot.value || props.isSearch)
@@ -288,8 +296,10 @@ onMounted(async () => {
     width: var(--cp-dimensions-4);
     height: var(--cp-dimensions-4);
 
+    color: var(--cp-foreground-secondary);
     display: flex;
     align-items: center;
+    flex-shrink: 0;
     left: var(--cp-dimensions-3_5);
     z-index: 1;
     position: absolute;

package/src/components/CpTelInput.vue

@@ -290,6 +290,7 @@ const handleOnValidate = (phoneObject: PhoneObject) => {
 
   .vti__flag {
     max-width: var(--cp-dimensions-5);
+    min-width: var(--cp-dimensions-5);
     border-radius: var(--cp-radius-xs);
   }