Add colorFieldTag helper

mojolicious · Oct 21, 2022 · 8a85cc9 · 8a85cc9
1 parent b5bbbaa
commit 8a85cc9
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,7 +6,7 @@
 ### Features
 
   * Added `isEmpty` getter to `Params` class.
-  * Added `fileFieldTag`, `searchFieldTag` and `passwordFieldTag` helpers.
+  * Added `colorFieldTag`, `fileFieldTag`, `searchFieldTag` and `passwordFieldTag` helpers.
 
 ## v1.7.0 (2022-10-14)
 

diff --git a/docs/Cheatsheet.md b/docs/Cheatsheet.md
@@ -460,6 +460,15 @@ Generate portable `<form>` tag with `ctx.formFor()`, containing a single button.
 
 Generate `<input>` tag of type `checkbox`. Previous input values will automatically get picked up and shown as default.
 
+#### colorFieldTag
+
+```
+%= await ctx.colorFieldTag('background')
+%= await ctx.colorFieldTag('background', {class: 'foo'})
+```
+
+Generate `<input>` tag of type `color`. Previous input values will automatically get picked up and shown as default.
+
 #### faviconTag
 
 ```

diff --git a/src/plugins/default-helpers.ts b/src/plugins/default-helpers.ts
@@ -28,7 +28,7 @@ export default function defaultHelpersPlugin(app: MojoApp): void {
 
   app.addHelper('assetTag', assetTag);
 
-  for (const type of ['search', 'text']) {
+  for (const type of ['color', 'search', 'text']) {
     app.addHelper(`${type}FieldTag`, async (ctx: MojoContext, name: string, attrs: TagAttrs = {}) => {
       return await inputTag(ctx, name, {...attrs, type});
     });

diff --git a/test/plugin-app.js b/test/plugin-app.js
@@ -69,7 +69,10 @@ t.test('Plugin app', async t => {
       sixteen: 'Sixteen',
       seventeen: 'Seventeen',
       eightteen: 'Eightteen',
-      nineteen: 'Nineteen'
+      nineteen: 'Nineteen',
+      twenty: 'Twenty',
+      twentyone: 'Twentyone',
+      twentytwo: 'Twentytwo'
     };
     (await ua.getOk('/form_helpers', {form})).statusIs(200).bodyIs(formTagHelpersFilledResult);
   });
@@ -118,6 +121,9 @@ File2: <%= await ctx.fileFieldTag('sixteen', {class: 'bar'}) %>
 Search1: <%= await ctx.searchFieldTag('seventeen') %>
 Search2: <%= await ctx.searchFieldTag('eightteen', {class: 'bar'}) %>
 Search3: <%= await ctx.searchFieldTag('nineteen', {class: 'bar', value: 'Default'}) %>
+Color1: <%= await ctx.colorFieldTag('twenty') %>
+Color2: <%= await ctx.colorFieldTag('twentyone', {class: 'bar'}) %>
+Color3: <%= await ctx.colorFieldTag('twentytwo', {class: 'bar', value: 'Default'}) %>
 `;
 
 const formTagHelpersResult = `
@@ -143,6 +149,9 @@ File2: <input class="bar" type="file" name="sixteen">
 Search1: <input type="search" name="seventeen">
 Search2: <input class="bar" type="search" name="eightteen">
 Search3: <input class="bar" value="Default" type="search" name="nineteen">
+Color1: <input type="color" name="twenty">
+Color2: <input class="bar" type="color" name="twentyone">
+Color3: <input class="bar" value="Default" type="color" name="twentytwo">
 `;
 
 const formTagHelpersFilledResult = `
@@ -168,6 +177,9 @@ File2: <input class="bar" type="file" name="sixteen">
 Search1: <input type="search" name="seventeen" value="Seventeen">
 Search2: <input class="bar" type="search" name="eightteen" value="Eightteen">
 Search3: <input class="bar" value="Nineteen" type="search" name="nineteen">
+Color1: <input type="color" name="twenty" value="Twenty">
+Color2: <input class="bar" type="color" name="twentyone" value="Twentyone">
+Color3: <input class="bar" value="Twentytwo" type="color" name="twentytwo">
 `;
 
 const tagHelperPlugin = `