added max length to prompt

caneara · Sep 21, 2022 · 5482f77 · 5482f77
1 parent 3b593fb
commit 5482f77
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 17 deletions.
diff --git a/docs/pages/prompt.md b/docs/pages/prompt.md
@@ -23,7 +23,7 @@ You can use the toggle at the top right of the page to switch between light and
 <!-- Demo -->
 <div class="bg-gray-100 dark:bg-black flex justify-center rounded-md p-6 mt-8">
     <ClientOnly>
-        <PromptComponent :visible="show" @cancel="show = false" :lines="3" @continue="show = false"></PromptComponent>
+        <PromptComponent :visible="show" @cancel="show = false" :lines="3" :maxLength="15" @continue="show = false"></PromptComponent>
     </ClientOnly>
     <button @click="show = true"
             class="bg-sky-700 text-white px-3 py-1 mt-10 mb-12 rounded-md">
@@ -82,6 +82,19 @@ When set to `1`, an `input` is used. When set to `2+`, a `textarea` is used.
 <v-prompt :lines="6"></v-prompt>
 ```
 
+### maxLength
+
+- Type: `Number`
+- Default: `null`
+
+Set the maximum number of characters that should be allowed.
+
+When set to `null`, no limit is enforced by the browser.
+
+```html
+<v-prompt :maxLength="30"></v-prompt>
+```
+
 ### summary
 
 - Type: `String`
@@ -172,14 +185,15 @@ async provideFeedback()
         'In order to proceed, some input is required from you.',
         'Your response',
         '',
-        3
+        3,
+        100
     );
 
     alert(result === '' ? 'Cancel' : 'Continue');
 },
 ```
 
-The `prompt` method accepts five parameters, which are used to set the [title](#title), [summary](#summary), [label](#label), fallback text (if cancelled) and [lines](#lines) properties of the component.
+The `prompt` method accepts six parameters, which are used to set the [title](#title), [summary](#summary), [label](#label), fallback text (if cancelled), [lines](#lines) and  [maxLength](#maxlength) properties of the component.
 
 ## Custom styling
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@caneara/varnish",
     "author": "Caneara",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "license": "MIT",
     "description": "A library of UI components built using Vue.js and TailwindCSS.",
     "repository": {

diff --git a/src/components/prompt.vue b/src/components/prompt.vue
@@ -23,7 +23,9 @@
                    :label="label"
                    :lines="lines"
                    v-model="content"
-                   icon="fas fa-signature">
+                   :maxLength="maxLength"
+                   icon="fas fa-signature"
+                   @return="$emit('continue', content)">
         </v-textbox>
 
         <!-- Actions -->
@@ -94,11 +96,12 @@
          *
          */
         props : {
-            'label'   : { type : String,  default : 'Your response' },
-            'lines'   : { type : Number,  default : 1 },
-            'summary' : { type : String,  default : 'In order to proceed, some input is required. Please enter it below, then press continue, or press cancel.' },
-            'title'   : { type : String,  default : 'Awaiting your response...' },
-			'visible' : { type : Boolean, default : false },
+            'label'     : { type : String,  default : 'Your response' },
+            'lines'     : { type : Number,  default : 1 },
+            'maxLength' : { type : Number,  default : null },
+            'summary'   : { type : String,  default : 'In order to proceed, some input is required. Please enter it below, then press continue, or press cancel.' },
+            'title'     : { type : String,  default : 'Awaiting your response...' },
+			'visible'   : { type : Boolean, default : false },
         },
     }
 </script>
diff --git a/src/components/textbox.vue b/src/components/textbox.vue
@@ -121,7 +121,15 @@
              */
             interceptKeystroke(event)
             {
-                if (event.key === 'Enter') this.$emit('return');
+                if (event.key === 'Enter' && event.shiftKey) {
+                    return 13;
+                }
+
+                if (event.key === 'Enter' && ! event.shiftKey) {
+                    event.preventDefault();
+
+                    return this.$emit('return');
+                }
             },
         }
     }

diff --git a/src/mixins/Dialog.js b/src/mixins/Dialog.js
@@ -119,18 +119,19 @@ export default
          * Request that the user provide some feedback.
          *
          */
-        prompt(title = null, summary = null, label = null, fallback = '', lines = 1)
+        prompt(title = null, summary = null, label = null, fallback = '', lines = 1, maxLength = null)
         {
             let dialog = this.createDialogElement();
 
             return new Promise((resolve, reject) =>
             {
                 dialog.container = createApp(PromptComponent, {
-                    label   : label ?? 'Your response',
-                    lines   : lines,
-                    summary : summary ?? 'In order to proceed, some input is required. Please enter it below, then press continue, or press cancel.',
-                    title   : title ?? 'Awaiting your response...',
-                    visible : true,
+                    label     : label ?? 'Your response',
+                    lines     : lines,
+                    maxLength : maxLength,
+                    summary   : summary ?? 'In order to proceed, some input is required. Please enter it below, then press continue, or press cancel.',
+                    title     : title ?? 'Awaiting your response...',
+                    visible   : true,
                     onCancel : () => {
                         resolve(fallback);