@citizenplane/pimp 8.26.1 → 8.28.1

package/src/components/{selects/CpSelect.vue → 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'
-
-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)
-    },
-  },
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+
+import BaseInputLabel from '@/components/BaseInputLabel.vue'
+import TransitionExpand from '@/components/TransitionExpand.vue'
+
+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 → 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/CpSwitch.vue → CpSwitch.vue}

@@ -22,76 +22,60 @@
   </label>
 </template>
 
-<script>
-import { capitalizeFirstLetter, randomString } from '@/helpers'
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
 import { ToggleColors } from '@/constants'
+import { capitalizeFirstLetter, randomString } from '@/helpers'
 
-export default {
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: null,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    groupName: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    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,
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      switchUniqueId: '',
-    }
-  },
-  computed: {
-    capitalizedColor() {
-      return capitalizeFirstLetter(this.color)
-    },
-    computedClasses() {
-      return [
-        {
-          'cpSwitch--hasLabel': this.label,
-          'cpSwitch--isActive': this.modelValue,
-          'cpSwitch--isDisabled': this.disabled,
-          'cpSwitch--isReversed': this.reverseLabel,
-        },
-        `cpSwitch--is${this.capitalizedColor}`,
-      ]
-    },
-  },
-  mounted() {
-    this.switchUniqueId = randomString()
-  },
-  methods: {
-    handleClick(value) {
-      this.$emit('update:modelValue', !value)
+interface Props {
+  autofocus?: boolean
+  color?: string
+  disabled?: boolean
+  groupName?: string
+  label?: string
+  modelValue?: boolean
+  reverseLabel?: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  label: '',
+  disabled: false,
+  groupName: '',
+  color: ToggleColors.BLUE,
+  reverseLabel: false,
+  autofocus: false,
+})
+
+const emit = defineEmits<Emits>()
+
+const switchUniqueId = ref('')
+
+switchUniqueId.value = randomString()
+
+const capitalizedColor = computed(() => {
+  return capitalizeFirstLetter(props.color)
+})
+
+const computedClasses = computed(() => {
+  return [
+    {
+      'cpSwitch--hasLabel': props.label,
+      'cpSwitch--isActive': props.modelValue,
+      'cpSwitch--isDisabled': props.disabled,
+      'cpSwitch--isReversed': props.reverseLabel,
     },
-  },
+    `cpSwitch--is${capitalizedColor.value}`,
+  ]
+})
+
+const handleClick = (value: boolean): void => {
+  emit('update:modelValue', !value)
 }
 </script>