@tsed/tailwind-formio 1.11.1 → 1.13.0

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

@@ -0,0 +1,16 @@
+<nav aria-label="navigation" id="{{ ctx.wizardKey }}-header">
+  <div class="classic-pagination row justify-content-center" style="border-bottom:0;">
+    {% ctx.panels.forEach(function(panel, index) { %}
+      <div class="classic-pagination-page col-xs-12 col-sm-6 col-md-3
+          {{ctx.currentPage < index ? ' disabled' : ''}}
+          {{ctx.currentPage === index ? ' active' : ''}}
+          {{ctx.currentPage > index ? ' complete' : ''}}">
+        <div class="text-center classic-pagination-title">{{ctx.t(panel.title, { _userInput: true })}}</div>
+        {% if (ctx.panels.length > 1) { %}
+          <div class="progress"><div class="progress-bar"></div></div>
+        {% } %} 
+        <span ref="{{ctx.wizardKey}}-link" class="classic-pagination-dot"></span>
+      </div>
+    {% }) %}
+  </div>
+</nav>

package/src/templates/tailwind/wizardHeaderClassic/index.ts

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

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

@@ -0,0 +1,14 @@
+<nav aria-label="navigation" id="{{ ctx.wizardKey }}-header">
+  <ul class="pagination flex-column">
+    {% ctx.panels.forEach(function(panel, index) { %}
+    <li class="col-xs-12 page-item{{ctx.currentPage === index ? ' active' : ''}}" style="cursor: pointer;">
+      <span class="page-link" ref="{{ctx.wizardKey}}-link" style="margin-left: 0px;">
+        {{ctx.t(panel.title, { _userInput: true })}}
+        {% if (panel.tooltip && ctx.currentPage === index) { %}
+        <i ref="{{ctx.wizardKey}}-tooltip" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{panel.tooltip}}"></i>
+        {% } %}
+      </span>
+    </li>
+    {% }) %}
+  </ul>
+</nav>

package/src/templates/tailwind/wizardHeaderVertical/index.ts

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

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

@@ -1,22 +1,28 @@
-<ul class="list-inline" id="{{ ctx.wizardKey }}-nav">
-  {% if (ctx.buttons.cancel) { %}
-  <li class="list-inline-item">
-    <button class="btn btn-secondary btn-wizard-nav-cancel" ref="{{ctx.wizardKey}}-cancel">{{ctx.t('cancel')}}</button>
-  </li>
-  {% } %}
-  {% if (ctx.buttons.previous) { %}
-  <li class="list-inline-item">
-    <button class="btn btn-primary btn-wizard-nav-previous" ref="{{ctx.wizardKey}}-previous">{{ctx.t('previous')}}</button>
-  </li>
-  {% } %}
-  {% if (ctx.buttons.next) { %}
-  <li class="list-inline-item">
-    <button class="btn btn-primary btn-wizard-nav-next" ref="{{ctx.wizardKey}}-next">{{ctx.t('next')}}</button>
-  </li>
-  {% } %}
-  {% if (ctx.buttons.submit) { %}
-  <li class="list-inline-item">
-    <button class="btn btn-primary btn-wizard-nav-submit" ref="{{ctx.wizardKey}}-submit">{{ctx.t('submit')}}</button>
-  </li>
-  {% } %}
+<ul class="formio-wizard-nav-container list-inline" id="{{ ctx.wizardKey }}-nav">
+  {% ctx.buttonOrder.forEach(function(button) { %}
+    {% if (button === 'cancel' && ctx.buttons.cancel) { %}
+    <li>
+      <button class="btn btn-secondary btn-wizard-nav-cancel" ref="{{ctx.wizardKey}}-cancel" aria-label="{{ctx.t('cancelButtonAriaLabel')}}">{{ctx.t('cancel')}}</button>
+    </li>
+    {% } %}
+    {% if (button === 'previous' && ctx.buttons.previous) { %}
+    <li>
+      <button class="btn btn-primary btn-wizard-nav-previous" ref="{{ctx.wizardKey}}-previous" aria-label="{{ctx.t('previousButtonAriaLabel')}}">{{ctx.t('previous')}}</button>
+    </li>
+    {% } %}
+    {% if (button === 'next' && ctx.buttons.next) { %}
+    <li>
+      <button class="btn btn-primary btn-wizard-nav-next" ref="{{ctx.wizardKey}}-next" aria-label="{{ctx.t('nextButtonAriaLabel')}}">{{ctx.t('next')}}</button>
+    </li>
+    {% } %}
+    {% if (button === 'submit' && ctx.buttons.submit) { %}
+    <li>
+      {% if (ctx.disableWizardSubmit){ %}
+      <button disabled class="btn btn-primary btn-wizard-nav-submit" ref="{{ctx.wizardKey}}-submit" aria-label="{{ctx.t('submitButtonAriaLabel')}}">{{ctx.t('submit')}}</button>
+      {% } else { %}
+      <button class="btn btn-primary btn-wizard-nav-submit" ref="{{ctx.wizardKey}}-submit" aria-label="{{ctx.t('submitButtonAriaLabel')}}">{{ctx.t('submit')}}</button>
+      {% } %}
+    </li>
+    {% } %}
+  {% }) %}
 </ul>

package/styles/alert.css

@@ -12,6 +12,15 @@
   &:last-child {
     @apply mb-0;
   }
+
+  ul {
+    @apply ml-5 pt-3 pb-2;
+
+    li {
+      @apply list-disc;
+    }
+  }
+
 }
 
 .alert-heading {

package/styles/choices.css

@@ -188,6 +188,9 @@
     .choices__item {
       @apply w-full;
     }
+    .choices__item.choices__item--selectable{
+      margin-bottom: -0.375rem;
+    }
   }
 
   &--multiple {

package/styles/fieldset.css

@@ -0,0 +1,5 @@
+.formio-component-fieldset {
+  legend {
+    @apply text-lg border-b-1 border-solid border-gray-300 w-full mb-3 pb-1;
+  }
+}

package/styles/form.css

@@ -136,6 +136,9 @@ textarea.form-control {
 
 .text-muted {
   @apply text-gray-500;
+  &[ref="tooltip"] {
+    @apply text-white;
+  }
 }
 
 .col-form-label {

package/styles/index.css

@@ -17,3 +17,4 @@
 @import "form-edit.css";
 @import "grid.css";
 @import "tabs.css";
+@import "fieldset.css";

package/styles/tables.css

@@ -6,6 +6,14 @@
   th,
   td {
     @apply p-3 align-top text-left border-t-1 border-solid border-gray-300;
+
+    &.align-middle {
+      vertical-align: middle;
+    }
+
+    &.align-bottom {
+      vertical-align: bottom;
+    }
   }
 
   thead th {
@@ -144,4 +152,4 @@
     }
   }
 }
-*/
+*/

package/tsconfig.json

@@ -10,10 +10,7 @@
     "rootDir": "src",
     "allowJs": true,
     "noEmit": true,
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "strictNullChecks": false,
@@ -24,14 +21,6 @@
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src/*.ts",
-    "src/*.ejs",
-    "src/**/*.ts",
-    "src/**/*.ejs"
-  ],
-  "exclude": [
-    "node_modules",
-    "**/*.spec.ts"
-  ]
+  "include": ["src/*.ts", "src/*.ejs", "src/**/*.ts", "src/**/*.ejs"],
+  "exclude": ["node_modules", "**/*.spec.ts"]
 }

package/.eslintrc

@@ -1,40 +0,0 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "extends": [
-    "standard",
-    "standard-react",
-    "prettier/standard",
-    "prettier/react",
-    "plugin:@typescript-eslint/recommended",
-    "prettier/@typescript-eslint",
-    "plugin:prettier/recommended"
-  ],
-  "env": {
-    "node": true,
-    "jest": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "ecmaFeatures": {
-      "legacyDecorators": true,
-      "jsx": true
-    }
-  },
-  "settings": {
-    "react": {
-      "version": "16"
-    }
-  },
-  "rules": {
-    "semi": ["error", "always"],
-    "space-before-function-paren": 0,
-    "react/prop-types": 0,
-    "react/jsx-handler-names": 0,
-    "react/jsx-fragments": 0,
-    "react/no-unused-prop-types": 0,
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/explicit-function-return-type": 0,
-    "import/export": 0
-  }
-}

package/.prettierrc

@@ -1,10 +0,0 @@
-{
-  "singleQuote": false,
-  "jsxSingleQuote": true,
-  "semi": true,
-  "tabWidth": 2,
-  "bracketSpacing": true,
-  "jsxBracketSameLine": false,
-  "arrowParens": "always",
-  "trailingComma": "none"
-}