fix(kprompt): proceed on enter (#2317)

Kong · Jul 31, 2024 · 9babd3c · 9babd3c
1 parent 37b78b6
commit 9babd3c
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 12 deletions.
diff --git a/docs/components/prompt.md b/docs/components/prompt.md
@@ -86,7 +86,7 @@ A string to be displayed as the prompt dialog title. Can also be [slotted](#titl
 
 ### confirmationText
 
-A string the user must type before the action button becomes enabled.
+A string the user must type before the action button becomes enabled. Pressing `Enter` in the confirmation text input will trigger the `proceed` action.
 
 <KButton @click="prompt4Visible = true">Prompt</KButton>
 <KPrompt
@@ -354,16 +354,41 @@ interface ModalAttributes {
 />
 ```
 
+### errorMessage
+
+Error message text that will be displayed once user attempts to proceed after having typed in the wrong confirmation prompt. Default value is "You must enter the text as indicated above to confirm.".
+
+<KButton @click="prompt14Visible = true">Prompt</KButton>
+<KPrompt
+  confirmation-text="confirm"
+  error-message="Wrong confirmation text entered."
+  confirmation-prompt="Type in something other than {confirmationText} and press Enter."
+  :visible="prompt14Visible"
+  @cancel="closeAllPrompts"
+  @proceed="closeAllPrompts"
+/>
+
+```html
+<KPrompt
+  error-message="Wrong confirmation text entered."
+  confirmation-text="confirm"
+  confirmation-prompt="Type in something other than {confirmationText} and press Enter."
+  :visible="promptVisible"
+  @cancel="handlePromptClose"
+  @proceed="handlePromptProceed"
+/>
+```
+
 ## Slots
 
 ### default
 
 Slot for prompt content.
 
-<KButton @click="prompt14Visible = true">Prompt</KButton>
+<KButton @click="prompt15Visible = true">Prompt</KButton>
 <KPrompt
   title="Prompt"
-  :visible="prompt14Visible"
+  :visible="prompt15Visible"
   @cancel="closeAllPrompts"
   @proceed="closeAllPrompts"
 >
@@ -389,10 +414,10 @@ Slot for prompt content.
 
 Slot for title string.
 
-<KButton @click="prompt15Visible = true">Prompt</KButton>
+<KButton @click="prompt16Visible = true">Prompt</KButton>
 <KPrompt
   title="Title"
-  :visible="prompt15Visible"
+  :visible="prompt16Visible"
   @cancel="closeAllPrompts"
   @proceed="closeAllPrompts"
 >
@@ -444,6 +469,7 @@ const closeAllPrompts = () => {
   prompt13Visible.value = false
   prompt14Visible.value = false
   prompt15Visible.value = false
+  prompt16Visible.value = false
 }
 
 const prompt1Visible = ref<boolean>(false)
@@ -461,6 +487,7 @@ const prompt12Visible = ref<boolean>(false)
 const prompt13Visible = ref<boolean>(false)
 const prompt14Visible = ref<boolean>(false)
 const prompt15Visible = ref<boolean>(false)
+const prompt16Visible = ref<boolean>(false)
 </script>
 
 <style lang="scss" scoped>
@@ -469,4 +496,4 @@ const prompt15Visible = ref<boolean>(false)
   flex-direction: column;
   gap: $kui-space-50;
 }
-</style>
+</style>
diff --git a/src/components/KPrompt/KPrompt.vue b/src/components/KPrompt/KPrompt.vue
@@ -12,7 +12,7 @@
     :title="title || 'Confirm your action'"
     :visible="visible"
     @cancel="$emit('cancel')"
-    @proceed="$emit('proceed')"
+    @proceed="handleProceed"
   >
     <template
       v-if="$slots.title"
@@ -46,6 +46,9 @@
           autocapitalize="off"
           autocomplete="off"
           data-testid="confirmation-input"
+          :error="displayErrorState"
+          :error-message="errorMessage"
+          @keydown.enter.prevent="onEnter"
         />
       </div>
     </template>
@@ -54,7 +57,7 @@
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, ref, useAttrs, watch, nextTick } from 'vue'
+import { computed, ref, useAttrs, watch } from 'vue'
 import KModal from '@/components/KModal/KModal.vue'
 import KInput from '@/components/KInput/KInput.vue'
 import type { ButtonAppearance, ModalAttributes } from '@/types'
@@ -112,11 +115,15 @@ const props = defineProps({
     type: Object as PropType<ModalAttributes>,
     default: () => ({}),
   },
+  errorMessage: {
+    type: String,
+    default: 'You must enter the text as indicated above to confirm.',
+  },
 })
 
 const attrs = useAttrs()
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'cancel'): void
   (e: 'proceed'): void
 }>()
@@ -139,6 +146,7 @@ const sanitizedAttrs = computed(() => {
 })
 
 const confirmationInput = ref<string>('')
+const displayErrorState = ref<boolean>(false)
 
 const actionButtonDisabledValue = computed(() => {
   if (props.actionButtonDisabled) {
@@ -152,10 +160,23 @@ const confirmationPromptText = computed((): string[] => {
   return props.confirmationPrompt.split('{confirmationText}')
 })
 
-watch(() => props.visible, async (visible: boolean) => {
-  if (visible) {
-    await nextTick()
+const handleProceed = () => {
+  displayErrorState.value = false
+  emit('proceed')
+}
+
+const onEnter = () => {
+  if (!actionButtonDisabledValue.value) {
+    handleProceed()
+  } else {
+    displayErrorState.value = true
+  }
+}
+
+watch(() => props.visible, (visible: boolean) => {
+  if (!visible) {
     confirmationInput.value = ''
+    displayErrorState.value = false
   }
 })
 </script>