@citizenplane/pimp 8.26.1 → 8.27.0

package/src/components/lists-and-table/CpTableEmptyState.vue

@@ -10,15 +10,12 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    placeholder: {
-      type: String,
-      required: true,
-    },
-  },
+<script setup lang="ts">
+interface Props {
+  placeholder: string
 }
+
+defineProps<Props>()
 </script>
 
 <style lang="scss">

package/src/components/selects/CpMultiselect.vue

@@ -67,96 +67,61 @@
   </div>
 </template>
 
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import AutoComplete from 'primevue/autocomplete'
-
+<script setup lang="ts">
 import { absolutePosition, getOuterWidth } from '@primeuix/utils/dom'
+import AutoComplete from 'primevue/autocomplete'
+import { ref, computed, onMounted } from 'vue'
 
 import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
-import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
 import BaseSelectClearButton from '@/components/core/BaseSelectClearButton.vue'
+import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
 
 import { isEmpty } from '@/helpers/object'
 
-const props = defineProps({
-  label: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  required: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  name: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  placeholder: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  isInvalid: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  isClearable: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  isLoading: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  multiple: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  options: {
-    type: Array,
-    required: false,
-    default: () => [],
-  },
-  optionLabel: {
-    type: String,
-    required: false,
-    default: 'name',
-  },
-  trackBy: {
-    type: String,
-    required: false,
-    default: 'id',
-  },
-  emptyMessage: {
-    type: String,
-    required: false,
-    default: 'No results found',
-  },
-  errorMessage: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  modelValue: {
-    type: [Array, Object],
-    required: false,
-  },
+interface Props {
+  disabled?: boolean
+  emptyMessage?: string
+  errorMessage?: string
+  isClearable?: boolean
+  isInvalid?: boolean
+  isLoading?: boolean
+  label?: string
+  modelValue?: Record<string, unknown>[] | Record<string, unknown> | null
+  multiple?: boolean
+  name?: string
+  optionLabel?: string
+  options?: unknown[]
+  placeholder?: string
+  required?: boolean
+  trackBy?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  required: false,
+  name: '',
+  placeholder: '',
+  isInvalid: false,
+  isClearable: false,
+  isLoading: false,
+  disabled: false,
+  multiple: false,
+  options: () => [],
+  optionLabel: 'name',
+  trackBy: 'id',
+  emptyMessage: 'No results found',
+  errorMessage: '',
+  modelValue: null,
 })
 
-const emit = defineEmits(['search', 'select', 'clear'])
+interface Emits {
+  (e: 'search', query: string): void
+  (e: 'select', option: Record<string, unknown>): void
+  (e: 'clear'): void
+  (e: 'update:modelValue', value: Record<string, unknown> | Record<string, unknown>[] | null): void
+}
+
+const emit = defineEmits<Emits>()
 
 const selectModel = computed({
   get() {
@@ -183,7 +148,7 @@ const passThroughConfig = {
   loader: { class: 'cpMultiselect__hidden' },
 }
 
-const multiselect = ref(null)
+const multiselect = ref<InstanceType<typeof AutoComplete> | null>(null)
 
 const isDropdownOpen = computed(() => multiselect.value?.overlayVisible)
 
@@ -203,29 +168,33 @@ const displayClearButton = computed(() => {
   return props.isClearable && !isEmpty(selectModel.value)
 })
 
-const handleSearch = (event) => emit('search', event.query)
+const handleSearch = (event: { query: string }) => emit('search', event.query)
 const handleClear = () => (selectModel.value = null)
 
 const toggleDropdown = () => {
   if (isDropdownOpen.value) {
-    multiselect.value.hide()
+    multiselect.value?.hide()
   } else {
-    multiselect.value.show()
+    multiselect.value?.show()
   }
 }
 
-const handleUpdateModelValue = (value) => {
+const handleUpdateModelValue = (value: Record<string, unknown> | null) => {
   // Autocomplete will set the model value to the query string if not blocked
   if (!value || typeof value === 'string') {
     return
   }
 }
 
-const overrideAlignOverlay = () => (multiselect.value.alignOverlay = alignOverlay)
+const overrideAlignOverlay = () => {
+  if (multiselect.value) {
+    multiselect.value.alignOverlay = alignOverlay
+  }
+}
 
 const alignOverlay = () => {
-  const target = multiselect.value.$el
-  if (!multiselect.value.overlay || !target) return
+  const target = multiselect.value?.$el
+  if (!multiselect.value?.overlay || !target) return
 
   multiselect.value.overlay.style.width = `${getOuterWidth(target)}px`
 

package/src/components/selects/CpSelect.vue

@@ -15,7 +15,7 @@
         class="cpSelect__inner"
         @input="handleChange"
       >
-        <option :disabled="hideDefaultValue || null" value="">{{ defaultValue }}</option>
+        <option :disabled="hideDefaultValue" value="">{{ defaultValue }}</option>
         <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option>
       </select>
     </div>
@@ -32,100 +32,80 @@
   </div>
 </template>
 
-<script>
-import { randomString } from '@/helpers'
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
 
 import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
 import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
 
-import { capitalizeFirstLetter } from '@/helpers'
-
-export default {
-  name: 'CpSelect',
-  components: {
-    BaseInputLabel,
-    TransitionExpand,
-  },
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    modelValue: {
-      type: [String, Number],
-      default: '',
-    },
-    hideDefaultValue: {
-      type: Boolean,
-      default: false,
-    },
-    defaultValue: {
-      type: String,
-      default: 'Select an option',
-    },
-    options: {
-      type: Array,
-      required: true,
-    },
-    name: {
-      type: String,
-      default: null,
-    },
-    required: {
-      type: Boolean,
-      default: null,
-    },
-    disabled: {
-      type: Boolean,
-      default: null,
-    },
-    autocomplete: {
-      type: String,
-      default: 'on',
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    isLarge: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      selectReferenceId: '',
-    }
-  },
-  computed: {
-    capitalizedLabel() {
-      return capitalizeFirstLetter(this.label)
-    },
-    dynamicClasses() {
-      return {
-        'cpSelect--isInvalid': this.isInvalid,
-        'cpSelect--isDisabled': this.disabled,
-        'cpSelect--isLarge': this.isLarge,
-      }
-    },
-    displayErrorMessage() {
-      return this.isInvalid && this.errorMessage.length
-    },
-  },
-  mounted() {
-    this.selectReferenceId = randomString()
-  },
-  methods: {
-    handleChange(e) {
-      this.$emit('update:modelValue', e.target.value)
-    },
-  },
+import { randomString, capitalizeFirstLetter } from '@/helpers'
+
+interface SelectOption {
+  label: string
+  value: string | number
+}
+
+interface Props {
+  autocomplete?: string
+  defaultValue?: string
+  disabled?: boolean
+  errorMessage?: string
+  hideDefaultValue?: boolean
+  isInvalid?: boolean
+  isLarge?: boolean
+  label?: string
+  modelValue?: string | number
+  name?: string
+  options: SelectOption[]
+  required?: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void
 }
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  modelValue: '',
+  hideDefaultValue: false,
+  defaultValue: 'Select an option',
+  name: undefined,
+  required: false,
+  disabled: false,
+  autocomplete: 'on',
+  isInvalid: false,
+  errorMessage: '',
+  isLarge: false,
+})
+
+const emit = defineEmits<Emits>()
+
+const selectReferenceId = ref('')
+
+const capitalizedLabel = computed(() => {
+  return capitalizeFirstLetter(props.label)
+})
+
+const dynamicClasses = computed(() => {
+  return {
+    'cpSelect--isInvalid': props.isInvalid,
+    'cpSelect--isDisabled': props.disabled,
+    'cpSelect--isLarge': props.isLarge,
+  }
+})
+
+const displayErrorMessage = computed(() => {
+  return props.isInvalid && props.errorMessage.length
+})
+
+const handleChange = (e: Event): void => {
+  const target = e.target as HTMLSelectElement
+  emit('update:modelValue', target.value)
+}
+
+onMounted(() => {
+  selectReferenceId.value = randomString()
+})
 </script>
 
 <style lang="scss">

package/src/components/selects/CpSelectMenu.vue

@@ -46,106 +46,104 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { animate } from 'animejs'
+import { ref, computed, nextTick } from 'vue'
 
-export default {
-  props: {
-    values: {
-      type: Array,
-      default: () => [],
-      required: true,
-    },
-    selectedValue: {
-      type: Object,
-      default: () => {},
-      required: true,
-    },
-    isMultiSelect: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    hasFilter: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    dropdownTitle: {
-      type: String,
-      default: 'Select value',
-      required: false,
-    },
-    dropdownFilterPlaceholder: {
-      type: String,
-      default: 'Filter...',
-      required: false,
-    },
-    dropdownEmptyViewPlaceholder: {
-      type: String,
-      default: 'No option found',
-      required: false,
-    },
-    closeOnSelect: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
-  },
-  emits: ['update:selectedValue', 'on-close', 'on-filter-change'],
-  data() {
-    return {
-      isDropdownOpen: false,
-    }
-  },
-  computed: {
-    inputType() {
-      return (this.isMultiSelect && 'checkbox') || 'radio'
-    },
-  },
-  methods: {
-    enter() {
-      animate(this.$refs.dropdownRef, {
-        scale: [0.8, 1],
-        opacity: [0, 1],
-        duration: 200,
-        ease: 'cubicBezier(0.175, 0.885, 0.32, 1.175)',
-      })
-    },
-    toggleDropdown() {
-      this.isDropdownOpen = !this.isDropdownOpen
-
-      if (this.isDropdownOpen && this.hasFilter) {
-        this.$nextTick(() => this.$refs.dropdownFilterRef.focus())
-      }
-    },
-    closeDropdown() {
-      if (!this.isDropdownOpen) {
-        return
-      }
+interface SelectValue {
+  label: string
+  value: string
+}
 
-      this.isDropdownOpen = false
-      this.resetInputValue()
-      this.$emit('on-close')
-    },
-    onChange(value) {
-      if (value.value !== this.selectedValue.value) {
-        this.$emit('update:selectedValue', value)
-      }
-      if (this.closeOnSelect) {
-        this.closeDropdown()
+interface Props {
+  closeOnSelect?: boolean
+  dropdownEmptyViewPlaceholder?: string
+  dropdownFilterPlaceholder?: string
+  dropdownTitle?: string
+  hasFilter?: boolean
+  isMultiSelect?: boolean
+  selectedValue: SelectValue
+  values: SelectValue[]
+}
+
+interface Emits {
+  (e: 'update:selectedValue', value: SelectValue): void
+  (e: 'onClose'): void
+  (e: 'onFilterChange', value: string): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isMultiSelect: false,
+  hasFilter: false,
+  dropdownTitle: 'Select value',
+  dropdownFilterPlaceholder: 'Filter...',
+  dropdownEmptyViewPlaceholder: 'No option found',
+  closeOnSelect: true,
+})
+
+const emit = defineEmits<Emits>()
+
+const isDropdownOpen = ref(false)
+const dropdownRef = ref<HTMLElement>()
+const dropdownFilterRef = ref<HTMLInputElement>()
+
+const inputType = computed(() => {
+  return props.isMultiSelect ? 'checkbox' : 'radio'
+})
+
+const enter = (): void => {
+  if (dropdownRef.value) {
+    animate(dropdownRef.value, {
+      scale: [0.8, 1],
+      opacity: [0, 1],
+      duration: 200,
+      ease: 'cubicBezier(0.175, 0.885, 0.32, 1.175)',
+    })
+  }
+}
+
+const toggleDropdown = (): void => {
+  isDropdownOpen.value = !isDropdownOpen.value
+
+  if (isDropdownOpen.value && props.hasFilter) {
+    nextTick(() => {
+      if (dropdownFilterRef.value) {
+        dropdownFilterRef.value.focus()
       }
-    },
-    updateFilterValue(event) {
-      this.$emit('on-filter-change', event.target.value)
-    },
-    resetInputValue() {
-      this.$emit('on-filter-change', '')
-    },
-    isSelectedValue(value) {
-      return value === this.selectedValue.value
-    },
-  },
+    })
+  }
+}
+
+const closeDropdown = (): void => {
+  if (!isDropdownOpen.value) {
+    return
+  }
+
+  isDropdownOpen.value = false
+  resetInputValue()
+  emit('onClose')
+}
+
+const onChange = (value: SelectValue): void => {
+  if (value.value !== props.selectedValue.value) {
+    emit('update:selectedValue', value)
+  }
+  if (props.closeOnSelect) {
+    closeDropdown()
+  }
+}
+
+const updateFilterValue = (event: Event): void => {
+  const target = event.target as HTMLInputElement
+  emit('onFilterChange', target.value)
+}
+
+const resetInputValue = (): void => {
+  emit('onFilterChange', '')
+}
+
+const isSelectedValue = (value: string): boolean => {
+  return value === props.selectedValue.value
 }
 </script>