feat(@dpc-sdp/ripple-ui-forms): add rplEvents to all field types

Author: lambry

packages/ripple-ui-forms/src/components/RplFormAlert/RplFormAlert.vue

@@ -6,7 +6,7 @@ import { useMediaQuery } from '@vueuse/core'
 interface Props {
   status: 'error' | 'success'
   title: string
-  fields: {
+  fields?: {
     fieldId: string
     text: string
   }[]

packages/ripple-ui-forms/src/components/RplFormDate/RplFormDate.vue

@@ -9,6 +9,8 @@ import { watch, ref } from 'vue'
 import { format, isMatch, isValid, parse } from 'date-fns'
 import RplFormInput from '../RplFormInput/RplFormInput.vue'
 import useFormkitFriendlyEventEmitter from '../../composables/useFormkitFriendlyEventEmitter.js'
+import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
+import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 
 type DatePart = 'day' | 'month' | 'year'
 interface InternalDate {
@@ -20,6 +22,7 @@ interface InternalDate {
 interface Props {
   id: string
   name: string
+  label?: string
   disabled?: boolean
   required: boolean
   invalid?: boolean | DatePart[]
@@ -33,11 +36,17 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   required: false,
   invalid: false,
+  label: undefined,
   variant: 'default',
   dateFormat: 'yyyy-MM-dd'
 })
 
-const emit = defineEmits<{ (e: 'onChange', value: string[]): void }>()
+const emit = defineEmits<{
+  (e: 'onChange', value: string[]): void
+  (e: 'update', payload: rplEventPayload & { action: 'exit' }): void
+}>()
+
+const { emitRplEvent } = useRippleEvent('rpl-form-input', emit)
 
 const ingestValue = (dateStr: string): InternalDate | null => {
   // An empty external value is valid, so we should clear all the inputs
@@ -198,6 +207,20 @@ const isPartInvalid = (part: DatePart) => {
 
   return false
 }
+
+const handleUpdate = (event) => {
+  emitRplEvent(
+    'update',
+    {
+      ...event,
+      id: props.id,
+      field: 'date',
+      label: props?.label,
+      value: `${internalDay.value}-${internalMonth.value}-${internalYear.value}`
+    },
+    { global: true }
+  )
+}
 </script>
 
 <template>
@@ -220,6 +243,8 @@ const isPartInvalid = (part: DatePart) => {
         :disabled="disabled"
         :required="required"
         :invalid="isPartInvalid('day')"
+        :global-events="false"
+        @update="handleUpdate"
         @input="handleChangeDay"
       />
     </div>
@@ -240,6 +265,8 @@ const isPartInvalid = (part: DatePart) => {
         :disabled="disabled"
         :required="required"
         :invalid="isPartInvalid('month')"
+        :global-events="false"
+        @update="handleUpdate"
         @input="handleChangeMonth"
       />
     </div>
@@ -260,6 +287,8 @@ const isPartInvalid = (part: DatePart) => {
         :disabled="disabled"
         :required="required"
         :invalid="isPartInvalid('day')"
+        :global-events="false"
+        @update="handleUpdate"
         @input="handleChangeYear"
       />
     </div>

packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue

@@ -6,13 +6,16 @@ export default {
 
 <script setup lang="ts">
 import { RplIcon } from '@dpc-sdp/ripple-ui-core/vue'
-import { computed, ref, watch, nextTick } from 'vue'
+import { computed, ref, watch, nextTick, inject } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 import useFormkitFriendlyEventEmitter from '../../composables/useFormkitFriendlyEventEmitter'
 import MultiValueLabel from './MultiValueLabel.vue'
+import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
+import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 
 export interface RplFormDropdownProps {
   id: string
+  label?: string
   labelId: string
   value?: string | string[]
   disabled?: boolean
@@ -32,6 +35,7 @@ export interface RplFormDropdownProps {
 
 const props = withDefaults(defineProps<RplFormDropdownProps>(), {
   value: undefined,
+  label: undefined,
   disabled: false,
   variant: 'default',
   placeholder: 'Select',
@@ -43,7 +47,13 @@ const props = withDefaults(defineProps<RplFormDropdownProps>(), {
   multiple: false
 })
 
-const emit = defineEmits<{ (e: 'onChange', value: string[]): void }>()
+const emit = defineEmits<{
+  (e: 'onChange', value: string[]): void
+  (e: 'update', payload: rplEventPayload & { action: 'select' }): void
+}>()
+
+const form: object = inject('form')
+const { emitRplEvent } = useRippleEvent('rpl-form-input', emit)
 
 const containerRef = ref(null)
 const inputRef = ref(null)
@@ -138,9 +148,9 @@ const handleArrowDown = () => {
 }
 
 const handleSelectOption = (optionValue) => {
-  if (props.multiple) {
-    let newValue
+  let newValue = optionValue
 
+  if (props.multiple) {
     if (!Array.isArray(props.value)) {
       // Value is empty, just create a new array
       newValue = [optionValue]
@@ -156,8 +166,22 @@ const handleSelectOption = (optionValue) => {
     useFormkitFriendlyEventEmitter(props, emit, 'onChange', newValue)
   } else {
     handleClose(true)
-    useFormkitFriendlyEventEmitter(props, emit, 'onChange', optionValue)
+    useFormkitFriendlyEventEmitter(props, emit, 'onChange', newValue)
   }
+
+  emitRplEvent(
+    'update',
+    {
+      action: 'select',
+      field: 'dropdown',
+      id: props.id,
+      label: props?.label,
+      value: newValue,
+      contextId: form?.id,
+      contextName: form?.name
+    },
+    { global: true }
+  )
 }
 
 const isOptionSelected = (optionValue) => {

packages/ripple-ui-forms/src/components/RplFormInput/RplFormInput.vue

@@ -14,10 +14,11 @@ import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 interface Props {
   id: string
   disabled?: boolean
-  className: string
+  className?: string
   value?: string
-  type: string
+  type?: string
   name: string
+  label?: string
   prefixIcon?: string
   suffixIcon?: string
   minlength?: number
@@ -29,6 +30,7 @@ interface Props {
   invalid?: boolean
   required?: boolean
   centeredText?: boolean
+  globalEvents?: boolean
   onInput: (payload: Event) => void
   onBlur: (payload: Event) => void
 }
@@ -37,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
   type: 'text',
   className: 'rpl-form__input',
   value: undefined,
+  label: undefined,
   prefixIcon: undefined,
   suffixIcon: undefined,
   minlength: undefined,
@@ -49,6 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
   invalid: false,
   variant: 'default',
   centeredText: false,
+  globalEvents: true,
   onInput: () => null,
   onBlur: () => null
 })
@@ -57,9 +61,8 @@ const emit = defineEmits<{
   (e: 'update', payload: rplEventPayload & { action: 'exit' }): void
 }>()
 
-const { emitRplEvent } = useRippleEvent('rpl-form-input', emit)
-
 const form: object = inject('form')
+const { emitRplEvent } = useRippleEvent('rpl-form-input', emit)
 
 const classes = computed(() => {
   return {
@@ -81,14 +84,15 @@ const handleChange = () => {
     'update',
     {
       action: 'exit',
+      field: 'input',
       id: props.id,
       type: props.type,
-      label: props.name,
+      label: props?.label,
       value: props.value,
       contextId: form?.id,
       contextName: form?.name
     },
-    { global: true }
+    { global: props.globalEvents }
   )
 }
 </script>

packages/ripple-ui-forms/src/components/RplFormOptionButtons/RplFormOptionButtons.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import useFormkitFriendlyEventEmitter from '../../composables/useFormkitFriendlyEventEmitter'
+import { inject } from 'vue'
+import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
+import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 
 export interface Props {
   id: string
   name: string
   value: string
+  label?: string
   disabled?: boolean
   perfectSquares?: boolean
   onChange: (value: string) => void
@@ -16,6 +20,7 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
   disabled: false,
   variant: 'default',
   layout: 'block',
@@ -24,11 +29,30 @@ const props = withDefaults(defineProps<Props>(), {
   options: () => []
 })
 
-const emit = defineEmits<{ (e: 'onChange', value: string[]): void }>()
+const emit = defineEmits<{
+  (e: 'onChange', value: string[]): void
+  (e: 'update', payload: rplEventPayload & { action: 'select' }): void
+}>()
+
+const form: object = inject('form')
+const { emitRplEvent } = useRippleEvent('rpl-form-input', emit)
 
 const handleChange = (selectedId: string) => {
-  // TODO - Wire up event bus handling here
   useFormkitFriendlyEventEmitter(props, emit, 'onChange', selectedId)
+
+  emitRplEvent(
+    'update',
+    {
+      action: 'select',
+      field: 'option-buttons',
+      id: props.id,
+      label: props?.label,
+      value: selectedId,
+      contextId: form?.id,
+      contextName: form?.name
+    },
+    { global: true }
+  )
 }
 
 const isChecked = (optionId: string): boolean => {

packages/ripple-ui-forms/src/components/RplFormOptions/RplFormCheckboxGroup.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import RplFormOption from './RplFormOption.vue'
 import useFormkitFriendlyEventEmitter from '../../composables/useFormkitFriendlyEventEmitter'
+import { inject } from 'vue'
+import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
+import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 
 interface Props {
   id: string
   value: string[]
+  label?: string
   disabled?: boolean
   variant?: 'default' | 'reverse'
   onChange: (value: string[]) => void
@@ -17,13 +21,20 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
   disabled: false,
   variant: 'default',
   onChange: () => undefined,
   options: () => []
 })
 
-const emit = defineEmits<{ (e: 'onChange', value: string[]): void }>()
+const emit = defineEmits<{
+  (e: 'onChange', value: string[]): void
+  (e: 'update', payload: rplEventPayload & { action: 'select' }): void
+}>()
+
+const form: object = inject('form')
+const { emitRplEvent } = useRippleEvent('rpl-form-input', emit)
 
 const handleToggle = (selectedValue: string) => {
   let newValue
@@ -41,8 +52,21 @@ const handleToggle = (selectedValue: string) => {
     newValue = [...props.value, selectedValue]
   }
 
-  // TODO - Wire up event bus handling here
   useFormkitFriendlyEventEmitter(props, emit, 'onChange', newValue)
+
+  emitRplEvent(
+    'update',
+    {
+      action: 'select',
+      id: props.id,
+      field: 'checkbox-group',
+      label: props?.label,
+      value: newValue,
+      contextId: form?.id,
+      contextName: form?.name
+    },
+    { global: true }
+  )
 }
 
 const isChecked = (optionValue: string): boolean => {
@@ -63,6 +87,7 @@ const isChecked = (optionValue: string): boolean => {
       :label="option.label"
       :disabled="disabled || option.disabled"
       :checked="isChecked(option.value)"
+      :global-events="false"
       @on-change="handleToggle(option.value)"
     />
   </div>