@tsed/tailwind-formio 1.11.1 → 1.13.0

package/lib/templates/tailwind/wizardNav/form.ejs.js

@@ -4,40 +4,64 @@ Object.defineProperty(exports, "__esModule", {
 exports.default=function(ctx) {
 var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<ul class="list-inline" id="' +
+__p += '<ul class="formio-wizard-nav-container list-inline" id="' +
 ((__t = ( ctx.wizardKey )) == null ? '' : __t) +
 '-nav">\n  ';
- if (ctx.buttons.cancel) { ;
-__p += '\n  <li class="list-inline-item">\n    <button class="btn btn-secondary btn-wizard-nav-cancel" ref="' +
+ ctx.buttonOrder.forEach(function(button) { ;
+__p += '\n    ';
+ if (button === 'cancel' && ctx.buttons.cancel) { ;
+__p += '\n    <li>\n      <button class="btn btn-secondary btn-wizard-nav-cancel" ref="' +
 ((__t = (ctx.wizardKey)) == null ? '' : __t) +
-'-cancel">' +
+'-cancel" aria-label="' +
+((__t = (ctx.t('cancelButtonAriaLabel'))) == null ? '' : __t) +
+'">' +
 ((__t = (ctx.t('cancel'))) == null ? '' : __t) +
-'</button>\n  </li>\n  ';
+'</button>\n    </li>\n    ';
  } ;
-__p += '\n  ';
- if (ctx.buttons.previous) { ;
-__p += '\n  <li class="list-inline-item">\n    <button class="btn btn-primary btn-wizard-nav-previous" ref="' +
+__p += '\n    ';
+ if (button === 'previous' && ctx.buttons.previous) { ;
+__p += '\n    <li>\n      <button class="btn btn-primary btn-wizard-nav-previous" ref="' +
 ((__t = (ctx.wizardKey)) == null ? '' : __t) +
-'-previous">' +
+'-previous" aria-label="' +
+((__t = (ctx.t('previousButtonAriaLabel'))) == null ? '' : __t) +
+'">' +
 ((__t = (ctx.t('previous'))) == null ? '' : __t) +
-'</button>\n  </li>\n  ';
+'</button>\n    </li>\n    ';
  } ;
-__p += '\n  ';
- if (ctx.buttons.next) { ;
-__p += '\n  <li class="list-inline-item">\n    <button class="btn btn-primary btn-wizard-nav-next" ref="' +
+__p += '\n    ';
+ if (button === 'next' && ctx.buttons.next) { ;
+__p += '\n    <li>\n      <button class="btn btn-primary btn-wizard-nav-next" ref="' +
 ((__t = (ctx.wizardKey)) == null ? '' : __t) +
-'-next">' +
+'-next" aria-label="' +
+((__t = (ctx.t('nextButtonAriaLabel'))) == null ? '' : __t) +
+'">' +
 ((__t = (ctx.t('next'))) == null ? '' : __t) +
-'</button>\n  </li>\n  ';
+'</button>\n    </li>\n    ';
  } ;
-__p += '\n  ';
- if (ctx.buttons.submit) { ;
-__p += '\n  <li class="list-inline-item">\n    <button class="btn btn-primary btn-wizard-nav-submit" ref="' +
+__p += '\n    ';
+ if (button === 'submit' && ctx.buttons.submit) { ;
+__p += '\n    <li>\n      ';
+ if (ctx.disableWizardSubmit){ ;
+__p += '\n      <button disabled class="btn btn-primary btn-wizard-nav-submit" ref="' +
 ((__t = (ctx.wizardKey)) == null ? '' : __t) +
-'-submit">' +
+'-submit" aria-label="' +
+((__t = (ctx.t('submitButtonAriaLabel'))) == null ? '' : __t) +
+'">' +
 ((__t = (ctx.t('submit'))) == null ? '' : __t) +
-'</button>\n  </li>\n  ';
+'</button>\n      ';
+ } else { ;
+__p += '\n      <button class="btn btn-primary btn-wizard-nav-submit" ref="' +
+((__t = (ctx.wizardKey)) == null ? '' : __t) +
+'-submit" aria-label="' +
+((__t = (ctx.t('submitButtonAriaLabel'))) == null ? '' : __t) +
+'">' +
+((__t = (ctx.t('submit'))) == null ? '' : __t) +
+'</button>\n      ';
+ } ;
+__p += '\n    </li>\n    ';
  } ;
+__p += '\n  ';
+ }) ;
 __p += '\n</ul>\n';
 return __p
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/tailwind-formio",
-  "version": "1.11.1",
+  "version": "1.13.0",
   "description": "Tailwind templates for form.io forms.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -14,10 +14,7 @@
   },
   "scripts": {
     "watch": "nodemon --watch ./src --ext ts,js,ejs --exec \"yarn build\"",
-    "build": "tsc --noEmit false && gulp templates && yarn webpack",
-    "lint:fix": "yarn lint --fix",
-    "lint": "yarn eslint --config .eslintrc --cache --quiet \"./src/**/*.{ts,tsx,js,jsx}\"",
-    "prettier": "prettier '{src,test}/**/*.{ts,tsx,js,jsx}' --write"
+    "build": "tsc --noEmit false && gulp templates && yarn webpack"
   },
   "dependencies": {},
   "peerDependencies": {},

package/readme.md

@@ -42,7 +42,6 @@ If you use `create-react-app`, you'll need to follow the official tailwind guide
 
 Edit the `craco.config.js` (or `postcss.config.js`) and add the `postcss-nested` to the postcss plugins list:
 
-
 ```diff
 module.exports = {
   style: {
@@ -68,8 +67,8 @@ npx tailwindcss-cli@latest init
 Edit the `tailwind.config.js` and copy the following content:
 
 ```js
-const primary = 'hsla(208, 100%, 43%, 1)'
-const secondary = 'hsla(190, 81%, 42%, 1)'
+const primary = "hsla(208, 100%, 43%, 1)";
+const secondary = "hsla(190, 81%, 42%, 1)";
 
 module.exports = {
   purge: [],
@@ -79,142 +78,126 @@ module.exports = {
       colors: {
         primary: {
           DEFAULT: primary,
-          50: 'hsla(208, 100%, 91%, 1)',
-          100: 'hsla(208, 100%, 83%, 1)',
-          200: 'hsla(208, 100%, 75%, 1)',
-          300: 'hsla(208, 100%, 67%, 1)',
-          400: 'hsla(208, 100%, 59%, 1)',
-          500: 'hsla(208, 100%, 51%, 1)',
+          50: "hsla(208, 100%, 91%, 1)",
+          100: "hsla(208, 100%, 83%, 1)",
+          200: "hsla(208, 100%, 75%, 1)",
+          300: "hsla(208, 100%, 67%, 1)",
+          400: "hsla(208, 100%, 59%, 1)",
+          500: "hsla(208, 100%, 51%, 1)",
           600: primary,
-          700: 'hsla(208, 100%, 35%, 1)',
-          800: 'hsla(208, 100%, 27%, 1)',
-          900: 'hsla(208, 100%, 19%, 1)'
+          700: "hsla(208, 100%, 35%, 1)",
+          800: "hsla(208, 100%, 27%, 1)",
+          900: "hsla(208, 100%, 19%, 1)"
         },
         secondary: {
           DEFAULT: secondary,
-          50: 'hsla(190, 81%, 90%, 1)',
-          100: 'hsla(190, 81%, 82%, 1)',
-          200: 'hsla(190, 81%, 74%, 1)',
-          300: 'hsla(190, 81%, 66%, 1)',
-          400: 'hsla(190, 81%, 58%, 1)',
-          500: 'hsla(190, 81%, 50%, 1)',
+          50: "hsla(190, 81%, 90%, 1)",
+          100: "hsla(190, 81%, 82%, 1)",
+          200: "hsla(190, 81%, 74%, 1)",
+          300: "hsla(190, 81%, 66%, 1)",
+          400: "hsla(190, 81%, 58%, 1)",
+          500: "hsla(190, 81%, 50%, 1)",
           600: secondary,
-          700: 'hsla(190, 81%, 34%, 1)',
-          800: 'hsla(190, 81%, 28%, 1)',
-          900: 'hsla(190, 81%, 20%, 1)'
+          700: "hsla(190, 81%, 34%, 1)",
+          800: "hsla(190, 81%, 28%, 1)",
+          900: "hsla(190, 81%, 20%, 1)"
         },
-        'gray-darker': '#504747'
+        "gray-darker": "#504747"
       },
       spacing: {
-        '7.5': '1.875rem', // 30px
-        15: '3.75rem', // 60px
-        22: '5.5rem', // 88px
-        25: '6.25rem', // 100px
-        26: '6.5rem', // 104px
-        30: '8.5rem', // 136px
-        32: '9rem', // 144px
-        68: '17rem' // 272px
+        7.5: "1.875rem", // 30px
+        15: "3.75rem", // 60px
+        22: "5.5rem", // 88px
+        25: "6.25rem", // 100px
+        26: "6.5rem", // 104px
+        30: "8.5rem", // 136px
+        32: "9rem", // 144px
+        68: "17rem" // 272px
       },
       padding: {
-        px: '1px'
+        px: "1px"
       },
       margin: {
-        px: '1px',
-        '-px': '-1px',
-        '-2px': '-2px',
-        auto: 'auto'
+        px: "1px",
+        "-px": "-1px",
+        "-2px": "-2px",
+        auto: "auto"
       },
       fontSize: {
-        micro: '.5rem', // 8px
-        xxs: '.625rem', // 10px
-        md: '1.125rem' // 18px
+        micro: ".5rem", // 8px
+        xxs: ".625rem", // 10px
+        md: "1.125rem" // 18px
       },
       fontWeight: {
         hairline: 100
       },
       fontFamily: {
-        brand: [
-          'Source Sans Pro',
-          'sans-serif'
-        ],
-        sans: [
-          'Source Sans Pro',
-          'sans-serif'
-        ],
-        serif: [
-          'Source Sans Pro',
-          'sans-serif'
-        ],
-        inconsolata: ['Inconsolata'],
-        source: [
-          'source-code-pro',
-          'Menlo',
-          'Monaco',
-          'Consolas',
-          'Courier New',
-          'monospace'
-        ]
+        brand: ["Source Sans Pro", "sans-serif"],
+        sans: ["Source Sans Pro", "sans-serif"],
+        serif: ["Source Sans Pro", "sans-serif"],
+        inconsolata: ["Inconsolata"],
+        source: ["source-code-pro", "Menlo", "Monaco", "Consolas", "Courier New", "monospace"]
       },
       minWidth: {
-        site: '18.75rem',
-        'input-mini': '17.5rem',
-        'input-small': '31.25rem',
-        'input-medium': '36.3125rem',
-        'input-large': '61.45rem',
-        'button-mini': '5.5rem',
-        'button-small': '7rem',
-        'button-medium': '9.875rem',
-        'button-large': '10rem'
+        site: "18.75rem",
+        "input-mini": "17.5rem",
+        "input-small": "31.25rem",
+        "input-medium": "36.3125rem",
+        "input-large": "61.45rem",
+        "button-mini": "5.5rem",
+        "button-small": "7rem",
+        "button-medium": "9.875rem",
+        "button-large": "10rem"
       },
       width: {
-        arrow: '.8rem',
-        '3/10': '30%',
-        '7/10': '70%',
-        '9/10': '90%',
-        '12/25': '48%'
+        arrow: ".8rem",
+        "3/10": "30%",
+        "7/10": "70%",
+        "9/10": "90%",
+        "12/25": "48%"
       },
       maxWidth: {
-        sm: '30rem',
-        md: '40rem',
-        lg: '50rem',
-        xl: '60rem',
-        '2xl': '70rem',
-        '3xl': '80rem',
-        '4xl': '90rem',
-        '5xl': '100rem',
-        '1/4': '25%',
-        '1/2': '50%',
-        '3/5': '60%',
-        '4/5': '80%',
-        '9/10': '90%',
-        'site-mini': '17.5rem',
-        'site-small': '31.25rem',
-        'site-medium': '43.75rem',
-        'site-large': '56.25rem',
-        site: '73.75rem',
-        screen: '100vw'
+        sm: "30rem",
+        md: "40rem",
+        lg: "50rem",
+        xl: "60rem",
+        "2xl": "70rem",
+        "3xl": "80rem",
+        "4xl": "90rem",
+        "5xl": "100rem",
+        "1/4": "25%",
+        "1/2": "50%",
+        "3/5": "60%",
+        "4/5": "80%",
+        "9/10": "90%",
+        "site-mini": "17.5rem",
+        "site-small": "31.25rem",
+        "site-medium": "43.75rem",
+        "site-large": "56.25rem",
+        site: "73.75rem",
+        screen: "100vw"
       },
       height: {
-        arrow: '.4rem',
-        px: '1px',
-        4: '1rem',
-        5: '1.25rem',
-        8: '1.8rem',
-        9: '2.25rem',
-        10: '2.5rem',
-        11: '2.75rem',
-        12: '3rem',
-        16: '4rem',
-        24: '6rem',
-        32: '8rem'
+        arrow: ".4rem",
+        px: "1px",
+        4: "1rem",
+        5: "1.25rem",
+        8: "1.8rem",
+        9: "2.25rem",
+        10: "2.5rem",
+        11: "2.75rem",
+        12: "3rem",
+        16: "4rem",
+        24: "6rem",
+        32: "8rem"
       },
       borderWidth: {
-        1: '1px',
-        5: '5px'
+        1: "1px",
+        5: "5px"
       },
       borderRadius: {
-        half: '50%',
-        full: '100%'
+        half: "50%",
+        full: "100%"
       },
       zIndex: {
         1: 1,
@@ -225,11 +208,11 @@ module.exports = {
         6: 6
       },
       fill: {
-        transparent: 'transparent'
+        transparent: "transparent"
       },
       flex: {
-        '2': '2 2 0%',
-        '3': '3 3 0%'
+        2: "2 2 0%",
+        3: "3 3 0%"
       }
     }
   },
@@ -240,7 +223,7 @@ module.exports = {
     borderCollapse: true
   },
   plugins: []
-}
+};
 ```
 
 Then create a `tailwind.css` in `styles` directory and add the following lines:
@@ -301,18 +284,17 @@ reportWebVitals();
 Finally, start the application!
 
 ## Contributors
+
 Please read [contributing guidelines here](./CONTRIBUTING.md).
 
 <a href="https://github.com/TypedProject/tsed/graphs/contributors"><img src="https://opencollective.com/tsed/contributors.svg?width=890" /></a>
 
-
 ## Backers
 
 Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/tsed#backer)]
 
 <a href="https://opencollective.com/tsed#backers" target="_blank"><img src="https://opencollective.com/tsed/tiers/backer.svg?width=890"></a>
 
-
 ## Sponsors
 
 Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/tsed#sponsor)]
@@ -330,4 +312,3 @@ The above copyright notice and this permission notice shall be included in all c
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 [travis]: https://travis-ci.org/
-

package/src/templates/stories/builder.stories.js

@@ -67,12 +67,7 @@ export default {
 };
 
 export const Sandbox = (args) => {
-  return (
-    <WrapperFormBuilder
-      form={{ ...args.form, display: args.display }}
-      options={{ template: args.template, iconset: args.iconset }}
-    />
-  );
+  return <WrapperFormBuilder form={{ ...args.form, display: args.display }} options={{ template: args.template, iconset: args.iconset }} />;
 };
 
 Sandbox.args = {
@@ -1177,8 +1172,7 @@ Sandbox.args = {
             key: "address1",
             type: "textfield",
             input: true,
-            customConditional:
-              "show = _.get(instance, 'parent.manualMode', false);",
+            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
             placeholder: "",
             prefix: "",
             customClass: "",
@@ -1240,8 +1234,7 @@ Sandbox.args = {
             key: "address2",
             type: "textfield",
             input: true,
-            customConditional:
-              "show = _.get(instance, 'parent.manualMode', false);",
+            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
             placeholder: "",
             prefix: "",
             customClass: "",
@@ -1303,8 +1296,7 @@ Sandbox.args = {
             key: "city",
             type: "textfield",
             input: true,
-            customConditional:
-              "show = _.get(instance, 'parent.manualMode', false);",
+            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
             placeholder: "",
             prefix: "",
             customClass: "",
@@ -1366,8 +1358,7 @@ Sandbox.args = {
             key: "state",
             type: "textfield",
             input: true,
-            customConditional:
-              "show = _.get(instance, 'parent.manualMode', false);",
+            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
             placeholder: "",
             prefix: "",
             customClass: "",
@@ -1429,8 +1420,7 @@ Sandbox.args = {
             key: "country",
             type: "textfield",
             input: true,
-            customConditional:
-              "show = _.get(instance, 'parent.manualMode', false);",
+            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
             placeholder: "",
             prefix: "",
             customClass: "",
@@ -1492,8 +1482,7 @@ Sandbox.args = {
             key: "zip",
             type: "textfield",
             input: true,
-            customConditional:
-              "show = _.get(instance, 'parent.manualMode', false);",
+            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
             placeholder: "",
             prefix: "",
             customClass: "",
@@ -1907,11 +1896,7 @@ Sandbox.args = {
     display: "form",
     access: [
       {
-        roles: [
-          "5d0797bc872fc747da559858",
-          "5d0797bc872fc71d05559859",
-          "5d0797bc872fc7da3b55985a"
-        ],
+        roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
         type: "read_all"
       }
     ],

package/src/templates/stories/pagination.stories.js

@@ -18,12 +18,7 @@ export const Sandbox = (args) => {
       <nav aria-label='...'>
         <ul className='pagination'>
           <li className='page-item disabled'>
-            <a
-              className='page-link'
-              href='#'
-              tabIndex='-1'
-              aria-disabled='true'
-            >
+            <a className='page-link' href='#' tabIndex='-1' aria-disabled='true'>
               Previous
             </a>
           </li>

package/src/templates/stories/wizard.stories.js

@@ -67,12 +67,7 @@ export default {
 };
 
 export const Sandbox = (args) => {
-  return (
-    <WrapperFormBuilder
-      form={{ ...args.form, display: args.display }}
-      options={{ template: args.template, iconset: args.iconset }}
-    />
-  );
+  return <WrapperFormBuilder form={{ ...args.form, display: args.display }} options={{ template: args.template, iconset: args.iconset }} />;
 };
 
 Sandbox.args = {
@@ -1177,8 +1172,7 @@ Sandbox.args = {
             key: "address1",
             type: "textfield",
             input: true,
-            customConditional:
-              "show = _.get(instance, 'parent.manualMode', false);",
+            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
             placeholder: "",
             prefix: "",
             customClass: "",
@@ -1240,8 +1234,7 @@ Sandbox.args = {
             key: "address2",
             type: "textfield",
             input: true,
-            customConditional:
-              "show = _.get(instance, 'parent.manualMode', false);",
+            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
             placeholder: "",
             prefix: "",
             customClass: "",
@@ -1303,8 +1296,7 @@ Sandbox.args = {
             key: "city",
             type: "textfield",
             input: true,
-            customConditional:
-              "show = _.get(instance, 'parent.manualMode', false);",
+            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
             placeholder: "",
             prefix: "",
             customClass: "",
@@ -1366,8 +1358,7 @@ Sandbox.args = {
             key: "state",
             type: "textfield",
             input: true,
-            customConditional:
-              "show = _.get(instance, 'parent.manualMode', false);",
+            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
             placeholder: "",
             prefix: "",
             customClass: "",
@@ -1429,8 +1420,7 @@ Sandbox.args = {
             key: "country",
             type: "textfield",
             input: true,
-            customConditional:
-              "show = _.get(instance, 'parent.manualMode', false);",
+            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
             placeholder: "",
             prefix: "",
             customClass: "",
@@ -1492,8 +1482,7 @@ Sandbox.args = {
             key: "zip",
             type: "textfield",
             input: true,
-            customConditional:
-              "show = _.get(instance, 'parent.manualMode', false);",
+            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
             placeholder: "",
             prefix: "",
             customClass: "",
@@ -1907,11 +1896,7 @@ Sandbox.args = {
     display: "form",
     access: [
       {
-        roles: [
-          "5d0797bc872fc747da559858",
-          "5d0797bc872fc71d05559859",
-          "5d0797bc872fc7da3b55985a"
-        ],
+        roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
         type: "read_all"
       }
     ],

package/src/templates/tailwind/address/form.ejs

@@ -7,6 +7,7 @@
       {% } %}
       value="{{ ctx.displayValue }}"
       autocomplete="off"
+      aria-label="{{ctx.t('autocomplete')}}"
     >
     {% if (!ctx.component.disableClearIcon) { %}
       <i

package/src/templates/tailwind/address/html.ejs

@@ -0,0 +1 @@
+<div ref="value">{% if (ctx.displayValue) { %}{{ctx.displayValue}}{% } else { %}-{% } %}</div>

package/src/templates/tailwind/alert/form.ejs

@@ -0,0 +1,10 @@
+<div
+  {% for (var attr in ctx.attrs) { %}
+    {{attr}}="{{ctx.attrs[attr]}}"
+  {% } %}
+>
+  {{ctx.message}}
+  {% if (ctx.options.vpat) { %}
+    <span class="sr-only" id="hotkey-i-{{ctx.form._id}}">{{ctx.t('errorListHotkey')}}</span>
+  {% } %}
+</div>

package/src/templates/tailwind/alert/index.js

@@ -0,0 +1,3 @@
+import form from "./form.ejs";
+
+export default { form };