@formio/bootstrap3 - npm Package Compare versions

Comparing version 2.11.0 to 2.12.0-rc.1

Changelog.md

@@ -7,2 +7,9 @@ # Change Log
 
+## 2.12.0-rc.1
+### Changed
+ - FIO-1239: Implement wizard header type selection
+ - FIO-290 | FJS-1367: Feat: add an ability to specify Survey questions' and values' tooltips
+ - FIO-1112: Add vertical layout classes for tabs component
+ - FIO-175: Adds ability to use different masks for Value and for View
+
 ## 2.11.0
@@ -9,0 +16,0 @@ ### Fixed

lib/index.d.ts

@@ -120,2 +120,8 @@ declare const _default: {
             };
+            wizardHeaderClassic: {
+                form: string;
+            };
+            wizardHeaderVertical: {
+                form: string;
+            };
             wizardNav: {
@@ -122,0 +128,0 @@ form: string;

lib/templates/bootstrap3/builderEditForm/form.ejs.js

@@ -11,4 +11,6 @@ Object.defineProperty(exports, "__esModule", {
 ((__t = (ctx.t('Component'))) == null ? '' : __t) +
-'</p>\n  </div>\n  <div class="col col-sm-6">\n    <div class="pull-right" style="margin-right: 20px; margin-top: 10px">\n      <a href="' +
-((__t = (ctx.componentInfo.documentation)) == null ? '' : __t) +
+'</p>\n  </div>\n  ';
+ if (ctx.helplinks) { ;
+__p += '\n  <div class="col col-sm-6">\n    <div class="pull-right" style="margin-right: 20px; margin-top: 10px">\n      <a href="' +
+((__t = (ctx.t(ctx.helplinks + ctx.componentInfo.documentation))) == null ? '' : __t) +
 '" target="_blank">\n        <i class="' +
@@ -18,3 +20,5 @@ ((__t = (ctx.iconClass('new-window'))) == null ? '' : __t) +
 ((__t = (ctx.t('Help'))) == null ? '' : __t) +
-'</i>\n      </a>\n    </div>\n  </div>\n</div>\n<div class="row component-edit-content">\n  <div class="col component-edit-tabs ';
+'</i>\n      </a>\n    </div>\n  </div>\n';
+ } ;
+__p += '\n</div>\n<div class="row component-edit-content">\n  <div class="col component-edit-tabs ';
  if (ctx.preview) { ;
@@ -25,3 +29,3 @@ __p += 'col-sm-6';
  } ;
-__p += '">\n    <div class="editForm" ref="editForm">\n        ' +
+__p += '">\n    <div class="editForm" ref="editForm">\n      ' +
 ((__t = (ctx.editForm)) == null ? '' : __t) +
@@ -28,0 +32,0 @@ '\n    </div>\n    ';

lib/templates/bootstrap3/file/form.ejs.js

@@ -116,3 +116,3 @@ Object.defineProperty(exports, "__esModule", {
 '\n        ';
- if (ctx.self.imageUpload) { ;
+ if (ctx.self.imageUpload && ctx.component.webcam) { ;
 __p += '\n          <a href="#" ref="toggleCameraMode"><i class="fa fa-camera"></i> ' +
@@ -119,0 +119,0 @@ ((__t = (ctx.t('Use Camera,'))) == null ? '' : __t) +

lib/templates/bootstrap3/index.d.ts

@@ -117,2 +117,8 @@ declare const _default: {
     };
+    wizardHeaderClassic: {
+        form: string;
+    };
+    wizardHeaderVertical: {
+        form: string;
+    };
     wizardNav: {
@@ -119,0 +125,0 @@ form: string;

lib/templates/bootstrap3/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var resize_observer_polyfill_1 = require("resize-observer-polyfill");
+var ResizeObserverPolyfill = require('resize-observer-polyfill');
 var builder_1 = require("./builder");
@@ -38,2 +38,4 @@ var builderComponent_1 = require("./builderComponent");
 var wizardHeader_1 = require("./wizardHeader");
+var wizardHeaderClassic_1 = require("./wizardHeaderClassic");
+var wizardHeaderVertical_1 = require("./wizardHeaderVertical");
 var wizardNav_1 = require("./wizardNav");
@@ -57,3 +59,3 @@ var alert_1 = require("./alert");
         }
-        builder.scrollResizeObserver = new resize_observer_polyfill_1.default(function () {
+        builder.scrollResizeObserver = new ResizeObserverPolyfill(function () {
             setTimeout(function () {
@@ -113,2 +115,4 @@ var _a = builder.refs, form = _a.form, sidebar = _a.sidebar;
     wizardHeader: wizardHeader_1.default,
+    wizardHeaderClassic: wizardHeaderClassic_1.default,
+    wizardHeaderVertical: wizardHeaderVertical_1.default,
     wizardNav: wizardNav_1.default,
@@ -115,0 +119,0 @@ errorsList: errorsList_1.default,

lib/templates/bootstrap3/input/form.ejs.js

@@ -9,74 +9,78 @@ Object.defineProperty(exports, "__esModule", {
  if (ctx.prefix || ctx.suffix) { ;
-__p += '\n<div class="input-group">\n';
+__p += '\n<div class="input-group">\n  ';
  } ;
-__p += '\n';
+__p += '\n  ';
  if (ctx.prefix) { ;
-__p += '\n<div class="input-group-addon" ref="prefix">\n';
+__p += '\n    <div class="input-group-addon" ref="prefix">\n      ';
  if(ctx.prefix instanceof HTMLElement){ ;
-__p += '\n  ' +
+__p += '\n        ' +
 ((__t = ( ctx.t(ctx.prefix.outerHTML, { _userInput: true }) )) == null ? '' : __t) +
-'\n';
+'\n      ';
  } else{ ;
-__p += '\n  ' +
+__p += '\n        ' +
 ((__t = ( ctx.t(ctx.prefix, { _userInput: true }) )) == null ? '' : __t) +
-'\n';
+'\n      ';
  } ;
-__p += '\n</div>\n';
+__p += '\n    </div>\n  ';
  } ;
-__p += '\n';
+__p += '\n  ';
  if (!ctx.component.editor && !ctx.component.wysiwyg) { ;
-__p += '\n<' +
+__p += '\n    <' +
 ((__t = (ctx.input.type)) == null ? '' : __t) +
-'\n  ref="' +
+'\n      ref="' +
 ((__t = (ctx.input.ref ? ctx.input.ref : 'input')) == null ? '' : __t) +
-'"\n  ';
+'"\n      ';
  for (var attr in ctx.input.attr) { ;
-__p += '\n  ' +
+__p += '\n        ' +
 ((__t = (attr)) == null ? '' : __t) +
 '="' +
 ((__t = (ctx.input.attr[attr])) == null ? '' : __t) +
-'"\n  ';
+'"\n      ';
  } ;
-__p += '\n  id="' +
+__p += '\n      id="' +
 ((__t = (ctx.instance.id)) == null ? '' : __t) +
 '-' +
 ((__t = (ctx.component.key)) == null ? '' : __t) +
-'"\n>' +
+'"\n    >\n      ' +
 ((__t = (ctx.input.content)) == null ? '' : __t) +
-'</' +
+'\n    </' +
 ((__t = (ctx.input.type)) == null ? '' : __t) +
-'>\n';
+'>\n    ';
+ if (ctx.hasValueMaskInput) { ;
+__p += '\n      <input ref="valueMaskInput" />\n    ';
  } ;
 __p += '\n';
- if (ctx.component.editor || ctx.component.wysiwyg) { ;
-__p += '\n<div ref="input"></div>\n';
  } ;
 __p += '\n';
- if (ctx.component.showCharCount) { ;
-__p += '\n<span class="text-muted pull-right" ref="charcount"></span>\n';
+ if (ctx.component.editor || ctx.component.wysiwyg) { ;
+__p += '\n  <div ref="input"></div>\n';
  } ;
 __p += '\n';
- if (ctx.component.showWordCount) { ;
-__p += '\n<span class="text-muted pull-right" ref="wordcount"></span>\n';
- } ;
-__p += '\n';
  if (ctx.suffix) { ;
-__p += '\n<div class="input-group-addon" ref="suffix">\n';
+__p += '\n  <div class="input-group-addon" ref="suffix">\n    ';
  if(ctx.suffix instanceof HTMLElement){ ;
-__p += '\n  ' +
+__p += '\n      ' +
 ((__t = ( ctx.t(ctx.suffix.outerHTML, { _userInput: true }) )) == null ? '' : __t) +
-'\n';
+'\n    ';
  } else{ ;
-__p += '\n  ' +
+__p += '\n      ' +
 ((__t = ( ctx.t(ctx.suffix, { _userInput: true }) )) == null ? '' : __t) +
-'\n';
+'\n    ';
  } ;
-__p += '\n</div>\n';
+__p += '\n  </div>\n';
  } ;
 __p += '\n';
  if (ctx.prefix || ctx.suffix) { ;
-__p += '\n</div>\n';
+__p += '\n  </div>\n';
  } ;
 __p += '\n';
+ if (ctx.component.showCharCount) { ;
+__p += '\n<span class="text-muted pull-right" ref="charcount"></span>\n';
+ } ;
+__p += '\n';
+ if (ctx.component.showWordCount) { ;
+__p += '\n<span class="text-muted pull-right" ref="wordcount"></span>\n';
+ } ;
+__p += '\n';
 return __p
 }

lib/templates/bootstrap3/survey/form.ejs.js

@@ -9,11 +9,27 @@ Object.defineProperty(exports, "__esModule", {
  ctx.component.values.forEach(function(value) { ;
-__p += '\n      <th style="text-align: center;">' +
+__p += '\n      <th style="text-align: center;">\n        ' +
 ((__t = (ctx.t(value.label))) == null ? '' : __t) +
-'</th>\n      ';
+'\n        ';
+ if (value.tooltip) { ;
+__p += '\n          <i ref="tooltip" class="' +
+((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +
+' text-muted" data-tooltip="' +
+((__t = (value.tooltip)) == null ? '' : __t) +
+'"></i>\n        ';
+ } ;
+__p += '\n      </th>\n      ';
  }) ;
 __p += '\n    </tr>\n  </thead>\n  <tbody>\n    ';
  ctx.component.questions.forEach(function(question) { ;
-__p += '\n    <tr>\n      <td>' +
+__p += '\n    <tr>\n      <td>\n        ' +
 ((__t = (ctx.t(question.label))) == null ? '' : __t) +
-'</td>\n      ';
+'\n        ';
+ if (question.tooltip) { ;
+__p += '\n          <i ref="tooltip" class="' +
+((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +
+' text-muted" data-tooltip="' +
+((__t = (question.tooltip)) == null ? '' : __t) +
+'"></i>\n        ';
+ } ;
+__p += '\n      </td>\n      ';
  ctx.component.values.forEach(function(value) { ;
@@ -20,0 +36,0 @@ __p += '\n      <td style="text-align: center;">\n        <input type="radio" name="' +

lib/templates/bootstrap3/tab/form.ejs.js

@@ -7,10 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 function print() { __p += __j.call(arguments, '') }
-__p += '<ul class="nav nav-tabs">\n  ';
+__p += '<div class="tab-container' +
+((__t = ( ctx.component.verticalLayout ? ' card-vertical' : '')) == null ? '' : __t) +
+'">\n  <ul class="nav nav-tabs' +
+((__t = ( ctx.component.verticalLayout ? ' nav-tabs-vertical' : '')) == null ? '' : __t) +
+'">\n    ';
  ctx.component.components.forEach(function(tab, index) { ;
-__p += '\n  <li class="nav-item' +
+__p += '\n    <li class="nav-item' +
 ((__t = ( ctx.currentTab === index ? ' active' : '')) == null ? '' : __t) +
 '" role="presentation" ref="' +
 ((__t = (ctx.tabLikey)) == null ? '' : __t) +
-'">\n    <a class="nav-link' +
+'">\n      <a class="nav-link' +
 ((__t = ( ctx.currentTab === index ? ' active' : '')) == null ? '' : __t) +
+'' +
+((__t = ( ctx.component.verticalLayout ? ' nav-link-vertical' : '')) == null ? '' : __t) +
 '" href="#' +
@@ -22,16 +28,16 @@ ((__t = (tab.key)) == null ? '' : __t) +
 ((__t = (ctx.t(tab.label, { _userInput: true }))) == null ? '' : __t) +
-'</a>\n  </li>\n  ';
+'</a>\n    </li>\n    ';
  }) ;
-__p += '\n</ul>\n<div class="tab-content">\n  ';
+__p += '\n  </ul>\n  <div class="tab-content">\n    ';
  ctx.component.components.forEach(function(tab, index) { ;
-__p += '\n  <div role="tabpanel" class="tab-pane' +
+__p += '\n    <div role="tabpanel" class="tab-pane' +
 ((__t = ( ctx.currentTab === index ? ' active' : '')) == null ? '' : __t) +
 '" ref="' +
 ((__t = (ctx.tabKey)) == null ? '' : __t) +
-'"">' +
+'">' +
 ((__t = (ctx.tabComponents[index])) == null ? '' : __t) +
-'</div>\n  ';
+'</div>\n    ';
  }) ;
-__p += '\n</div>\n';
+__p += '\n  </div>\n</div>\n';
 return __p
 }

lib/templates/bootstrap3/wizard/form.ejs.js

@@ -5,15 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 exports.default=function(ctx) {
-var __t, __p = '';
+var __t, __p = '', __j = Array.prototype.join;
+function print() { __p += __j.call(arguments, '') }
 __p += '<div class="' +
 ((__t = (ctx.className)) == null ? '' : __t) +
-'">\n  <div style="position: relative;">\n    ' +
+'">\n  <div style="position: relative;">\n    ';
+ if (ctx.wizardHeaderType === 'wizardHeaderVertical') { ;
+__p += '\n      <div class="row">\n        <div class="col-sm-12 col-md-2">\n          ' +
 ((__t = ( ctx.wizardHeader )) == null ? '' : __t) +
-'\n    <div class="wizard-page" ref="' +
+'\n        </div>\n        <div class="wizard-page col-sm-offset-1 col-md-offset-0 col-sm-10" ref="' +
 ((__t = (ctx.wizardKey)) == null ? '' : __t) +
-'">\n      ' +
+'">\n          ' +
 ((__t = (ctx.components)) == null ? '' : __t) +
-'\n    </div>\n    ' +
+'\n        </div>\n      </div>\n      <div class="col-sm-offset-4 col-sm-7 col-md-offset-2 col-md-10" style="margin-top: 10px;">\n        ' +
 ((__t = ( ctx.wizardNav )) == null ? '' : __t) +
-'\n  </div>\n</div>';
+'\n      </div>\n    ';
+ } else { ;
+__p += ' \n      ' +
+((__t = ( ctx.wizardHeader )) == null ? '' : __t) +
+'\n      <div class="wizard-page" ref="' +
+((__t = (ctx.wizardKey)) == null ? '' : __t) +
+'">\n        ' +
+((__t = (ctx.components)) == null ? '' : __t) +
+'\n      </div>\n      ' +
+((__t = ( ctx.wizardNav )) == null ? '' : __t) +
+'\n    ';
+ } ;
+__p += ' \n  </div>\n</div>';
 return __p
 }

lib/templates/index.d.ts

@@ -118,2 +118,8 @@ declare const _default: {
         };
+        wizardHeaderClassic: {
+            form: string;
+        };
+        wizardHeaderVertical: {
+            form: string;
+        };
         wizardNav: {
@@ -120,0 +126,0 @@ form: string;

package.json

 {
   "name": "@formio/bootstrap3",
-  "version": "2.11.0",
+  "version": "2.12.0-rc.1",
   "description": "Bootstrap 3 templates for form.io",
@@ -34,7 +34,7 @@ "main": "lib/index.js",
   "devDependencies": {
-    "@types/chai": "^4.2.15",
+    "@types/chai": "^4.2.18",
     "@types/ejs": "^3.0.6",
     "@types/mocha": "^8.2.2",
-    "@types/node": "^14.14.36",
-    "@types/sinon": "^9.0.10",
+    "@types/node": "^15.6.1",
+    "@types/sinon": "^10.0.1",
     "chai": "^4.3.4",
@@ -45,12 +45,12 @@ "gulp": "^4.0.2",
     "gulp-template": "^5.0.0",
-    "mocha": "^8.3.2",
+    "mocha": "^8.4.0",
     "nyc": "^15.1.0",
     "pre-commit": "^1.2.2",
-    "sinon": "^10.0.0",
-    "ts-node": "^9.1.1",
+    "sinon": "^11.1.1",
+    "ts-node": "^10.0.0",
     "ts-sinon": "^2.0.1",
     "tslint": "^6.1.3",
-    "typescript": "^4.2.3",
-    "webpack": "^5.28.0",
-    "webpack-cli": "^4.5.0"
+    "typescript": "^4.3.2",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.0"
   },
@@ -57,0 +57,0 @@ "license": "MIT",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

94224

increased by6.7%

Number of package files

140

increased by4.48%

Lines of code

2595

increased by5.75%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes