@citizenplane/pimp 8.26.0 → 8.27.0

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>
 

package/src/components/toggles/CpCheckbox.vue

@@ -26,63 +26,36 @@
   </label>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, ref, onMounted, useSlots } from 'vue'
 
-import { capitalizeFirstLetter, randomString } from '@/helpers'
 import { ToggleColors } from '@/constants'
+import { capitalizeFirstLetter, randomString } from '@/helpers'
 
-const props = defineProps({
-  modelValue: {
-    type: [Array, Boolean],
-    default: () => [],
-    required: false,
-  },
-  checkboxValue: {
-    type: [String, Number],
-    default: '',
-    required: false,
-  },
-  checkboxLabel: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  isDisabled: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  groupName: {
-    type: String,
-    default: '',
-    required: false,
-  },
-  capitalizeLabel: {
-    type: Boolean,
-    default: true,
-  },
-  color: {
-    type: String,
-    required: false,
-    default: ToggleColors.BLUE,
-    validator: (value) => Object.values(ToggleColors).includes(value),
-  },
-  reverseLabel: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  autofocus: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  helper: {
-    type: String,
-    required: false,
-    default: '',
-  },
+interface Props {
+  autofocus?: boolean
+  capitalizeLabel?: boolean
+  checkboxLabel?: string
+  checkboxValue?: string | number
+  color?: string
+  groupName?: string
+  helper?: string
+  isDisabled?: boolean
+  modelValue?: boolean | unknown[]
+  reverseLabel?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  checkboxValue: '',
+  checkboxLabel: '',
+  isDisabled: false,
+  groupName: '',
+  capitalizeLabel: true,
+  color: ToggleColors.BLUE,
+  reverseLabel: false,
+  autofocus: false,
+  helper: '',
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -92,6 +65,9 @@ const checkboxUniqueId = ref('')
 
 const isChecked = computed({
   get() {
+    if (Array.isArray(props.modelValue)) {
+      return props.modelValue.includes(props.checkboxValue)
+    }
     return props.modelValue
   },
   set(newValue) {
@@ -123,7 +99,22 @@ const labelComputedClasses = computed(() => {
 
 onMounted(() => (checkboxUniqueId.value = randomString()))
 
-const onChange = () => emit('update:modelValue', checkedProxy.value)
+const onChange = (value: string | number) => {
+  if (Array.isArray(props.modelValue)) {
+    const currentValues = [...props.modelValue]
+    const valueIndex = currentValues.indexOf(value)
+
+    if (valueIndex > -1) {
+      currentValues.splice(valueIndex, 1)
+    } else {
+      currentValues.push(value)
+    }
+
+    emit('update:modelValue', currentValues)
+  } else {
+    emit('update:modelValue', !props.modelValue)
+  }
+}
 </script>
 
 <style lang="scss">

package/src/components/toggles/CpRadio.vue

@@ -28,67 +28,56 @@
   </div>
 </template>
 
-<script>
-import { capitalizeFirstLetter, randomString } from '@/helpers'
+<script setup lang="ts">
+import { ref } from 'vue'
+
 import { ToggleColors } from '@/constants'
+import { capitalizeFirstLetter, randomString } from '@/helpers'
 
-export default {
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-      required: true,
-    },
-    options: {
-      type: Array,
-      required: true,
-    },
-    groupName: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    color: {
-      type: String,
-      required: false,
-      default: ToggleColors.BLUE,
-      validator: (value) => Object.values(ToggleColors).includes(value),
-    },
-    autofocus: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      radioUniqueId: '',
-    }
-  },
-  mounted() {
-    this.radioUniqueId = randomString()
-  },
-  methods: {
-    onChange(value) {
-      this.$emit('update:modelValue', value)
-    },
-    getRadioId(index) {
-      return `${this.radioUniqueId}${index}`
-    },
-    isActive(value) {
-      return value === this.modelValue
-    },
-    computedClasses({ value, disabled }) {
-      return [
-        {
-          'cpRadio--isActive': this.isActive(value),
-          'cpRadio--isDisabled': disabled,
-        },
-        `cpRadio--is${capitalizeFirstLetter(this.color)}`,
-      ]
+interface RadioOption {
+  additionalData?: string
+  description?: string
+  disabled?: boolean
+  label: string
+  value: string
+}
+
+interface Props {
+  autofocus?: boolean
+  color?: string
+  groupName?: string
+  modelValue: string
+  options: RadioOption[]
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  groupName: '',
+  color: ToggleColors.BLUE,
+  autofocus: false,
+})
+
+const emit = defineEmits<Emits>()
+
+const radioUniqueId = ref(randomString())
+
+const onChange = (value: string): void => emit('update:modelValue', value)
+
+const getRadioId = (index: number): string => `${radioUniqueId.value}${index}`
+
+const isActive = (value: string): boolean => value === props.modelValue
+
+const computedClasses = ({ value, disabled }: { disabled?: boolean; value: string }) => {
+  return [
+    {
+      'cpRadio--isActive': isActive(value),
+      'cpRadio--isDisabled': disabled,
     },
-  },
+    `cpRadio--is${capitalizeFirstLetter(props.color)}`,
+  ]
 }
 </script>