@formio/uswds 2.4.8-rc.1 → 2.5.0-rc.1

package/lib/css/styles.css

@@ -41,6 +41,53 @@ span[role=link]:hover {
   display: none;
 }
 
+.dropdown-menu {
+  position: absolute;
+  z-index: 1000;
+  display: none;
+  min-width: 10rem;
+  padding: 0.5rem 0;
+  margin: 0;
+  font-size: 1rem;
+  color: #212529;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+.dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0.25rem 1rem;
+  clear: both;
+  font-weight: 400;
+  color: #212529;
+  text-align: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+}
+
+.dropdown-item:hover, .dropdown-item:focus {
+  color: #1e2125;
+  background-color: #e9ecef;
+}
+
+.dropdown-divider {
+  height: 0;
+  margin: 0.5rem 0;
+  overflow: hidden;
+  border-top: 1px solid #e9ecef;
+}
+
 .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
 .flatpickr-current-month input.cur-year:focus,
 .flatpickr-days:focus {

package/lib/index.d.ts

@@ -1,5 +1,4 @@
 declare const _default: {
-    framework: string;
     templates: {
         uswds: {
             transform(type: any, text: any): any;
@@ -56,6 +55,10 @@ declare const _default: {
                 form: string;
                 html: string;
             };
+            datatable: {
+                form: string;
+                html: string;
+            };
             day: {
                 form: string;
             };
@@ -191,8 +194,9 @@ declare const _default: {
         select: typeof import("./components/Select").default;
         radio: import("formiojs").ClassWithEditForm<typeof import("formiojs/types/components/_classes/field/field").Field>;
         button: typeof import("./components/button/Button").default;
-        checkbox: typeof import("./components/Checkbox/Checkbox").default;
+        checkbox: typeof import("./components/checkbox/Checkbox").default;
         selectboxes: typeof import("./components/selectboxes/SelectBoxes").default;
     };
+    framework: string;
 };
 export default _default;

package/lib/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var templates_1 = require("./templates");
 var components_1 = require("./components");
 exports.default = {
-    framework: 'uswds',
     templates: templates_1.default,
     components: components_1.default,
+    framework: 'uswds',
 };

package/lib/sass/styles.scss

@@ -67,6 +67,53 @@ span[role="link"] {
   display: none;
 }
 
+.dropdown-menu {
+  position: absolute;
+  z-index: 1000;
+  display: none;
+  min-width: 10rem;
+  padding: 0.5rem 0;
+  margin: 0;
+  font-size: 1rem;
+  color: #212529;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+.dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0.25rem 1rem;
+  clear: both;
+  font-weight: 400;
+  color: #212529;
+  text-align: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+}
+
+.dropdown-item:hover, .dropdown-item:focus {
+  color: #1e2125;
+  background-color: #e9ecef;
+}
+
+.dropdown-divider {
+  height: 0;
+  margin: 0.5rem 0;
+  overflow: hidden;
+  border-top: 1px solid #e9ecef;
+}
+
 .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
 .flatpickr-current-month input.cur-year:focus,
 .flatpickr-days:focus {

package/lib/templates/index.d.ts

@@ -54,6 +54,10 @@ declare const _default: {
             form: string;
             html: string;
         };
+        datatable: {
+            form: string;
+            html: string;
+        };
         day: {
             form: string;
         };

package/lib/templates/uswds/datatable/form.ejs.js

@@ -0,0 +1,43 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default=function(ctx) {
+var __t, __p = '', __j = Array.prototype.join;
+function print() { __p += __j.call(arguments, '') }
+__p += '<div ref="tableContainer"></div>\n<div class="formio-component-modal-wrapper formio-component-modal-wrapper-' +
+((__t = ( ctx.component.type )) == null ? '' : __t) +
+'" ref="componentModalWrapper">\n  <div class="formio-dialog formio-dialog-theme-default component-rendering-hidden" ref="dataTableModalWrapper">\n    <div class="formio-dialog-overlay" ref="dataTableModalOverlay"></div>\n    <div class="formio-dialog-content" ref="dataTableModalContents">\n      <div ref="dataTableModalContents">\n        <div class="editgrid-listgroup">\n          ';
+ if (ctx.header) { ;
+__p += '\n          <div>\n            ' +
+((__t = (ctx.header)) == null ? '' : __t) +
+'\n          </div>\n          ';
+ } ;
+__p += '\n          ';
+ ctx.rows.forEach(function(row, rowIndex) { ;
+__p += '\n          <div class="margin-bottom-1" ref="' +
+((__t = (ctx.ref.row)) == null ? '' : __t) +
+'">\n            ' +
+((__t = (row)) == null ? '' : __t) +
+'\n            ';
+ if (ctx.openRows[rowIndex] && !ctx.readOnly) { ;
+__p += '\n            <div class="editgrid-actions">\n              <button class="usa-button usa-button--accent-cool" ref="' +
+((__t = (ctx.ref.saveRow)) == null ? '' : __t) +
+'">' +
+((__t = (ctx.t(ctx.component.saveRow || 'Save'))) == null ? '' : __t) +
+'</button>\n              ';
+ if (ctx.component.removeRow) { ;
+__p += '\n              <button class="usa-button usa-button--secondary" ref="' +
+((__t = (ctx.ref.cancelRow)) == null ? '' : __t) +
+'">' +
+((__t = (ctx.t(ctx.component.removeRow || 'Cancel'))) == null ? '' : __t) +
+'</button>\n              ';
+ } ;
+__p += '\n            </div>\n            ';
+ } ;
+__p += '\n            <div class="usa-has-error">\n              <div class="editgrid-row-error text-base">\n                ' +
+((__t = (ctx.errors[rowIndex])) == null ? '' : __t) +
+'\n              </div>\n            </div>\n          </div>\n          ';
+ }) ;
+__p += '\n        </div>\n      </div>\n      <button class="formio-dialog-close float-right" aria-label="close" ref="dataTableModalClose"></button>\n    </div>\n  </div>\n</div>\n';
+return __p
+}

package/lib/templates/uswds/datatable/html.ejs.js

@@ -0,0 +1,47 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default=function(ctx) {
+var __t, __p = '', __j = Array.prototype.join;
+function print() { __p += __j.call(arguments, '') }
+__p += '<ul class="editgrid-listgroup usa-list usa-list--unstyled">\n  ';
+ if (ctx.header) { ;
+__p += '\n  <li class="position-relative display-block padding-105 border">\n    ' +
+((__t = (ctx.header)) == null ? '' : __t) +
+'\n  </li>\n  ';
+ } ;
+__p += '\n  ';
+ ctx.rows.forEach(function(row, rowIndex) { ;
+__p += '\n  <li class="position-relative display-block padding-105 border" ref="' +
+((__t = (ctx.editgridKey)) == null ? '' : __t) +
+'">\n    ' +
+((__t = (row)) == null ? '' : __t) +
+'\n    ';
+ if (ctx.openRows[rowIndex] && !ctx.readOnly) { ;
+__p += '\n    <div class="editgrid-actions">\n      <button class="usa-button usa-button--accent-cool" ref="' +
+((__t = (ctx.editgridKey)) == null ? '' : __t) +
+'-saveRow">' +
+((__t = (ctx.t(ctx.component.saveRow || 'Save'))) == null ? '' : __t) +
+'</button>\n      ';
+ if (ctx.component.removeRow) { ;
+__p += '\n      <button class="usa-button usa-button--secondary" ref="' +
+((__t = (ctx.editgridKey)) == null ? '' : __t) +
+'-cancelRow">' +
+((__t = (ctx.t(ctx.component.removeRow || 'Cancel'))) == null ? '' : __t) +
+'</button>\n      ';
+ } ;
+__p += '\n    </div>\n    ';
+ } ;
+__p += '\n    <div class="usa-has-error">\n      <div class="editgrid-row-error text-base">\n        ' +
+((__t = (ctx.errors[rowIndex])) == null ? '' : __t) +
+'\n      </div>\n    </div>\n  </li>\n  ';
+ }) ;
+__p += '\n  ';
+ if (ctx.footer) { ;
+__p += '\n  <li class="position-relative display-block padding-105 border">\n    ' +
+((__t = (ctx.footer)) == null ? '' : __t) +
+'\n  </li>\n  ';
+ } ;
+__p += '\n</ul>\n';
+return __p
+}

package/lib/templates/uswds/datatable/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    form: string;
+    html: string;
+};
+export default _default;

package/lib/templates/uswds/datatable/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var form_ejs_1 = require("./form.ejs");
+var html_ejs_1 = require("./html.ejs");
+exports.default = { form: form_ejs_1.default, html: html_ejs_1.default };

package/lib/templates/uswds/index.d.ts

@@ -53,6 +53,10 @@ declare const _default: {
         form: string;
         html: string;
     };
+    datatable: {
+        form: string;
+        html: string;
+    };
     day: {
         form: string;
     };

package/lib/templates/uswds/index.js

@@ -17,6 +17,7 @@ var component_1 = require("./component");
 var componentModal_1 = require("./componentModal");
 var container_1 = require("./container");
 var datagrid_1 = require("./datagrid");
+var datatable_1 = require("./datatable");
 var day_1 = require("./day");
 var dialog_1 = require("./dialog");
 var editgrid_1 = require("./editgrid");
@@ -81,6 +82,7 @@ exports.default = {
     componentModal: componentModal_1.default,
     container: container_1.default,
     datagrid: datagrid_1.default,
+    datatable: datatable_1.default,
     day: day_1.default,
     dialog: dialog_1.default,
     editgrid: editgrid_1.default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/uswds",
-  "version": "2.4.8-rc.1",
+  "version": "2.5.0-rc.1",
   "description": "US Web Design System templates for form.io",
   "main": "lib/index.js",
   "scripts": {