@citizenplane/pimp 8.26.0 → 8.27.0

package/src/components/inputs/CpInput.vue

@@ -4,7 +4,7 @@
       {{ capitalizedLabel }} <span v-if="isRequired" class="u-asterisk">*</span>
       <cp-tooltip v-if="tooltip" :content="tooltip">
         <button type="button" class="cpInput__tooltip">
-          <cp-icon class="cpInput__tooltipIcon" type="cp-tooltip" />
+          <cp-icon class="cpInput__tooltipIcon" type="tooltip" />
         </button>
       </cp-tooltip>
     </base-input-label>
@@ -56,72 +56,55 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, useAttrs, useSlots, computed, nextTick, onMounted, useId } from 'vue'
 
 import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
 
 import { randomString, capitalizeFirstLetter } from '@/helpers'
 
-const props = defineProps({
-  modelValue: {
-    type: [String, Number, Boolean],
-    default: '',
-  },
-  tooltip: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  inputId: {
-    type: String,
-    default: null,
-  },
-  isInvalid: {
-    type: Boolean,
-    default: false,
-  },
-  errorMessage: {
-    type: String,
-    default: '',
-  },
-  mask: {
-    type: [String, Object],
-    default: null,
-  },
-  hideInvalidityIcon: {
-    type: Boolean,
-    default: false,
-  },
-  removeBorder: {
-    type: Boolean,
-    default: false,
-  },
-  isLarge: {
-    type: Boolean,
-    default: false,
-  },
-  isSearch: {
-    type: Boolean,
-    default: false,
-  },
-  help: {
-    type: String,
-    default: '',
-  },
+interface Props {
+  errorMessage?: string
+  help?: string
+  hideInvalidityIcon?: boolean
+  inputId?: string | null
+  isInvalid?: boolean
+  isLarge?: boolean
+  isSearch?: boolean
+  label?: string
+  mask?: string | Record<string, unknown> | null
+  modelValue?: string | number | boolean
+  removeBorder?: boolean
+  tooltip?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  tooltip: '',
+  label: '',
+  inputId: null,
+  isInvalid: false,
+  errorMessage: '',
+  mask: null,
+  hideInvalidityIcon: false,
+  removeBorder: false,
+  isLarge: false,
+  isSearch: false,
+  help: '',
 })
 
-const emit = defineEmits(['update:modelValue'])
+interface Emits {
+  (e: 'update:modelValue', value: string | number | boolean): void
+}
+
+const emit = defineEmits<Emits>()
 
 defineOptions({ inheritAttrs: false })
 
 const attrs = useAttrs()
 
 // class is a reserved word, we can't remove 'class' property from attrs
-// eslint-disable-next-line
+
 const { ['class']: value, id, ...restAttributes } = attrs
 
 const inputIdentifier = ref(id || randomString())
@@ -135,7 +118,7 @@ const slots = useSlots()
 
 const capitalizedLabel = computed(() => capitalizeFirstLetter(props.label))
 
-const inputModel = defineModel({
+const inputModel = defineModel<string | number | boolean>({
   type: [String, Number, Boolean],
   default: '',
   set(newValue) {
@@ -181,11 +164,11 @@ const iconInvalidityClasses = computed(() => {
 const DOMElement = computed(() => cpInputContainer.value.children.namedItem(inputIdentifier.value))
 
 const displayErrorMessage = computed(() => isInputInvalid.value && props.errorMessage.length)
-const isClearButtonVisible = computed(() => props.isSearch && inputModel.value.length)
+const isClearButtonVisible = computed(() => props.isSearch && inputModel.value.toString().length)
 
 const displayHelp = computed(() => props.help?.length && !displayErrorMessage.value)
 
-const handleChange = (newValue) => {
+const handleChange = (newValue: string | number | boolean) => {
   emit('update:modelValue', newValue)
   checkInputValidity()
 }
@@ -203,7 +186,7 @@ const checkInputValidity = () => {
     (DOMElement.value.validity && DOMElement.value.validity.valueMissing)
 }
 
-const checkAttribute = (attribute) => attrs[attribute] === '' || attrs[attribute] === true
+const checkAttribute = (attribute: string) => attrs[attribute] === '' || attrs[attribute] === true
 
 const clearInputValue = () => emit('update:modelValue', '')
 

package/src/components/inputs/CpTextarea.vue

@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed } from 'vue'
 
 import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
@@ -35,57 +35,37 @@ import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vu
 
 import { randomString, capitalizeFirstLetter } from '@/helpers'
 
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-    required: false,
-  },
-  label: {
-    type: String,
-    default: '',
-    required: false,
-  },
-  placeholder: {
-    type: String,
-    default: '',
-    required: true,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  inputId: {
-    type: String,
-    default: '',
-    required: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  isInvalid: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  errorMessage: {
-    type: String,
-    default: '',
-    required: false,
-  },
-  height: {
-    type: Number,
-    default: 200,
-    required: false,
-  },
+interface Props {
+  disabled?: boolean
+  errorMessage?: string
+  height?: number
+  inputId?: string
+  isInvalid?: boolean
+  label?: string
+  modelValue?: string
+  placeholder?: string
+  required?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  label: '',
+  placeholder: '',
+  required: false,
+  inputId: '',
+  disabled: false,
+  isInvalid: false,
+  errorMessage: '',
+  height: 200,
 })
 
-const emit = defineEmits(['update:modelValue'])
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+}
+
+const emit = defineEmits<Emits>()
 
-const textareaModel = defineModel({
+const textareaModel = defineModel<string>({
   type: String,
   default: '',
   required: false,
@@ -101,7 +81,7 @@ const capitalizedLabel = computed(() => capitalizeFirstLetter(props.label))
 
 const displayErrorMessage = computed(() => props.isInvalid && props.errorMessage.length)
 
-const handleChange = (newValue) => emit('update:modelValue', newValue)
+const handleChange = (newValue: string) => emit('update:modelValue', newValue)
 </script>
 
 <style lang="scss">