分步表单

resources/assets/dcat/extra/step.scss

@@ -0,0 +1,460 @@
+@import "../sass/variables/variables";
+
+.sw-toolbar-bottom {
+  margin-top: 20px;
+  margin-left: 5px;
+}
+
+/* ---------------------------------------------------------------------------------------------------------------- */
+
+.dcat-step-box {
+  margin: 0 auto;
+}
+.dcat-step {
+  box-sizing: border-box;
+  padding: 0;
+  color: rgba(0, 0, 0, .65);
+  /*font-variant: tabular-nums;*/
+  line-height: 1.5;
+  list-style: none;
+  /*font-feature-settings: "tnum";*/
+  display: flex;
+  width: 100%;
+  font-size: 0;
+  margin: 0 auto 30px;
+}
+
+.dcat-step-item {
+  position: relative;
+  display: inline-block;
+  flex: 1 1;
+  overflow: hidden;
+  vertical-align: top
+}
+
+.dcat-step-item-container {
+  outline: 0;
+  border: 0!important;
+}
+
+.dcat-step-item:last-child {
+  flex: none
+}
+
+.dcat-step-item:last-child > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after, .dcat-step-item:last-child > .dcat-step-item-container > .dcat-step-line {
+  display: none
+}
+
+.dcat-step-content, .dcat-step-icons {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.dcat-step-icons {
+  width: 32px;
+  height: 32px;
+  margin-right: 8px;
+  font-size: 16px;
+  line-height: 32px;
+  text-align: center;
+  border: 1px solid rgba(0, 0, 0, .25);
+  border-radius: 32px;
+  transition: background-color .3s, border-color .3s;
+}
+
+.dcat-step-icons > .dcat-step-icon {
+  position: relative;
+  top: -1px;
+  color: rgba(0,0,0,.25);
+  line-height: 1
+}
+
+.dcat-step-line {
+  position: absolute;
+  top: 12px;
+  left: 0;
+  width: 100%;
+  padding: 0 10px
+}
+
+.dcat-step-line:after {
+  display: inline-block;
+  width: 100%;
+  height: 1px;
+  background: #e8e8e8;
+  border-radius: 1px;
+  transition: background .3s;
+  content: ""
+}
+
+.dcat-step-title {
+  position: relative;
+  display: inline-block;
+  padding-right: 16px;
+  color: rgba(0, 0, 0, .65);
+  font-size: 16px;
+  line-height: 32px
+}
+
+.dcat-step-title:after {
+  position: absolute;
+  top: 16px;
+  left: 100%;
+  display: block;
+  width: 9999px;
+  height: 1px;
+  background: #e8e8e8;
+  content: ""
+}
+
+.dcat-step-desc {
+  color: rgba(0, 0, 0, .45);
+  font-size: 14px
+}
+
+.active .dcat-step-icons {
+  background-color: #fff;
+  border-color: var(--primary)
+}
+
+.active .dcat-step-icons > .dcat-step-icon {
+  color: var(--primary)
+}
+
+.active .dcat-step-icons > .dcat-step-icon .dcat-step-icon-dot {
+  background: var(--primary)
+}
+
+.active > .dcat-step-item-container > .dcat-step-content > .dcat-step-title {
+  color: rgba(0, 0, 0, .85)
+}
+
+.active > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after {
+  background-color: #e8e8e8
+}
+
+.active > .dcat-step-item-container > .dcat-step-content > .dcat-step-desc {
+  color: rgba(0, 0, 0, .65)
+}
+
+.active > .dcat-step-item-container > .dcat-step-line:after {
+  background-color: #e8e8e8
+}
+
+.active .dcat-step-icons {
+  background: var(--primary)
+}
+
+.active .dcat-step-icons > .dcat-step-icon {
+  color: #fff
+}
+
+.active .dcat-step-title {
+  font-weight: 500
+}
+
+.done .dcat-step-icons {
+  background-color: #fff;
+  border-color: var(--primary)
+}
+
+.done .dcat-step-icons > .dcat-step-icon {
+  color: var(--primary)
+}
+
+.done .dcat-step-icons > .dcat-step-icon .dcat-step-icon-dot {
+  background: var(--primary)
+}
+
+.done > .dcat-step-item-container > .dcat-step-content > .dcat-step-title {
+  color: rgba(0, 0, 0, .65)
+}
+
+.done > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after {
+  background-color: var(--primary)
+}
+
+.done > .dcat-step-item-container > .dcat-step-content > .dcat-step-desc {
+  color: rgba(0, 0, 0, .45)
+}
+
+.done > .dcat-step-item-container > .dcat-step-line:after {
+  background-color: var(--primary)
+}
+
+.danger .dcat-step-icons {
+  background-color: #fff;
+  border-color: var(--danger-dark)
+}
+
+.danger .dcat-step-icons > .dcat-step-icon {
+  color: var(--danger-dark)
+}
+
+.danger .dcat-step-icons > .dcat-step-icon .dcat-step-icon-dot {
+  background: var(--danger-dark)
+}
+
+.danger > .dcat-step-item-container > .dcat-step-content > .dcat-step-title {
+  color: var(--danger-dark)
+}
+
+.danger > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after {
+  background-color: #e8e8e8
+}
+
+.danger > .dcat-step-item-container > .dcat-step-content > .dcat-step-desc {
+  color: var(--danger-dark)
+}
+
+.danger > .dcat-step-item-container > .dcat-step-line:after {
+  background-color: #e8e8e8
+}
+
+.dcat-step-item.dcat-step-next-error .dcat-step-title:after {
+  background: var(--danger-dark)
+}
+
+.dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button] {
+  cursor: pointer
+}
+
+.dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button] .dcat-step-desc, .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button] .dcat-step-icons .dcat-step-icon, .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button] .dcat-step-title {
+  transition: color .3s
+}
+
+.dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-desc .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-title {
+  color: var(--primary)
+}
+
+.dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-icons {
+  border-color: var(--primary)
+}
+
+.dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-icons .dcat-step-icon {
+  color: var(--primary)
+}
+
+.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item {
+  margin-right: 16px;
+  white-space: nowrap
+}
+
+.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item:last-child {
+  margin-right: 0
+}
+
+.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item:last-child .dcat-step-title {
+  padding-right: 0
+}
+
+.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-line {
+  display: none
+}
+
+.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-desc {
+  max-width: 140px;
+  white-space: normal
+}
+
+.dcat-step-sm.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item {
+  margin-right: 12px
+}
+
+.dcat-step-sm.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item:last-child {
+  margin-right: 0
+}
+
+.dcat-step-sm .dcat-step-icons {
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 24px
+}
+
+.dcat-step-sm .dcat-step-title {
+  padding-right: 12px;
+  font-size: 14px;
+  line-height: 24px
+}
+
+.dcat-step-sm .dcat-step-title:after {
+  top: 12px
+}
+
+.dcat-step-sm .dcat-step-desc {
+  color: rgba(0, 0, 0, .45);
+  font-size: 14px
+}
+
+.dcat-step-sm .dcat-step-line {
+  top: 8px
+}
+
+@media (max-width: 540px) {
+  .dcat-step-horizontal.dcat-step-label-horizontal {
+    display: block
+  }
+
+  .dcat-step-box .nav-tabs > li {
+    float: none;
+  }
+
+  .dcat-step-box .nav-tabs>li>a {
+    padding: 0;
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-item {
+    display: block;
+    overflow: visible
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-icons {
+    float: left;
+    margin-right: 16px
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-content {
+    display: block;
+    overflow: hidden
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-title {
+    line-height: 32px
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-desc {
+    padding-bottom: 12px
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal > .dcat-step-item > .dcat-step-item-container > .dcat-step-line {
+    position: absolute;
+    top: 0;
+    left: 16px;
+    width: 1px;
+    height: 100%;
+    padding: 38px 0 6px
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal > .dcat-step-item > .dcat-step-item-container > .dcat-step-line:after {
+    width: 1px;
+    height: 100%
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal > .dcat-step-item:not(:last-child) > .dcat-step-item-container > .dcat-step-line {
+    display: none;
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal > .dcat-step-item > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after {
+    display: none;
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal.dcat-step-sm .dcat-step-item-container .dcat-step-title {
+    line-height: 24px
+  }
+}
+
+.dcat-step-label-vertical .dcat-step-item {
+  overflow: visible
+}
+
+.dcat-step-label-vertical .dcat-step-line {
+  margin-left: 51px;
+  padding: 3.5px 24px;
+  left: 18px;
+  top: 23px;
+}
+
+.dcat-step-label-vertical .dcat-step-content {
+  display: block;
+  width: 104px;
+  margin-top: 8px;
+  text-align: center
+}
+
+.dcat-step-label-vertical .dcat-step-icons {
+  display: inline-block;
+  margin-left: 36px
+}
+
+.dcat-step-label-vertical .dcat-step-title {
+  padding-right: 0
+}
+
+.dcat-step-label-vertical .dcat-step-title:after {
+  display: none
+}
+
+.dcat-step-label-vertical.dcat-step-sm:not(.dcat-step-dot) .dcat-step-icons {
+  margin-left: 40px
+}
+
+.dcat-step-dot .dcat-step-title, .dcat-step-dot.dcat-step-sm .dcat-step-title {
+  line-height: 1.5
+}
+
+.dcat-step-dot .dcat-step-line, .dcat-step-dot.dcat-step-sm .dcat-step-line {
+  top: 2px;
+  width: 100%;
+  margin: 0 0 0 70px;
+  padding: 0
+}
+
+.dcat-step-dot .dcat-step-line:after, .dcat-step-dot.dcat-step-sm .dcat-step-line:after {
+  width: calc(100% - 20px);
+  height: 3px;
+  margin-left: 12px
+}
+
+.dcat-step-dot .dcat-step-item:first-child .dcat-step-icon-dot, .dcat-step-dot.dcat-step-sm .dcat-step-item:first-child .dcat-step-icon-dot {
+  left: 2px
+}
+
+.dcat-step-dot .dcat-step-icons, .dcat-step-dot.dcat-step-sm .dcat-step-icons {
+  width: 8px;
+  height: 8px;
+  margin-left: 67px;
+  padding-right: 0;
+  line-height: 8px;
+  background: 0 0;
+  border: 0
+}
+
+.dcat-step-dot .dcat-step-icons .dcat-step-icon-dot, .dcat-step-dot.dcat-step-sm .dcat-step-icons .dcat-step-icon-dot {
+  position: relative;
+  float: left;
+  width: 100%;
+  height: 100%;
+  border-radius: 100px;
+  transition: all .3s
+}
+
+.dcat-step-dot .dcat-step-icons .dcat-step-icon-dot:after, .dcat-step-dot.dcat-step-sm .dcat-step-icons .dcat-step-icon-dot:after {
+  position: absolute;
+  top: -12px;
+  left: -26px;
+  width: 60px;
+  height: 32px;
+  background: rgba(0, 0, 0, .001);
+  content: ""
+}
+
+.dcat-step-dot .dcat-step-content, .dcat-step-dot.dcat-step-sm .dcat-step-content {
+  width: 140px
+}
+
+.dcat-step-dot .active .dcat-step-icons, .dcat-step-dot.dcat-step-sm .active .dcat-step-icons {
+  width: 10px;
+  height: 10px;
+  line-height: 10px
+}
+
+.dcat-step-dot .active .dcat-step-icons .dcat-step-icon-dot, .dcat-step-dot.dcat-step-sm .active .dcat-step-icons .dcat-step-icon-dot {
+  top: -1px
+}
+
+.dcat-step-item a {
+  font-weight: normal!important;
+}

resources/assets/dcat/plugins/SmartWizard/dist/js/jquery.smartWizard.js

@@ -0,0 +1,633 @@
+/*!
+ * SmartWizard v4.2.2
+ * The awesome jQuery step wizard plugin with Bootstrap support
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipuraj.me
+ *
+ * Licensed under the terms of the MIT License
+ * https://github.com/techlab/SmartWizard/blob/master/LICENSE
+ */
+
+;(function ($, window, document, undefined) {
+    "use strict";
+    // Default options
+
+    var defaults = {
+        selected: 0, // Initial selected step, 0 = first step
+        keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
+        autoAdjustHeight: true, // Automatically adjust content height
+        cycleSteps: false, // Allows to cycle the navigation of steps
+        backButtonSupport: true, // Enable the back button support
+        useURLhash: true, // Enable selection of the step based on url hash
+        showStepURLhash: true, // Show url hash based on step
+        lang: { // Language variables for button
+            next: 'Next',
+            previous: 'Previous'
+        },
+        toolbarSettings: {
+            toolbarPosition: 'bottom', // none, top, bottom, both
+            toolbarButtonPosition: 'end', // start, end
+            showNextButton: true, // show/hide a Next button
+            showPreviousButton: true, // show/hide a Previous button
+            toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
+        },
+        anchorSettings: {
+            anchorClickable: true, // Enable/Disable anchor navigation
+            enableAllAnchors: false, // Activates all anchors clickable all times
+            markDoneStep: true, // Add done css
+            markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
+            removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
+            enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
+        },
+        contentURL: null, // content url, Enables Ajax content loading. Can also set as data data-content-url on anchor
+        contentCache: true, // cache step contents, if false content is fetched always from ajax url
+        ajaxSettings: {}, // Ajax extra settings
+        disabledSteps: [], // Array Steps disabled
+        errorSteps: [], // Highlight step with errors
+        hiddenSteps: [], // Hidden steps
+        theme: 'default', // theme for the wizard, related css need to include for other than default theme
+        transitionEffect: 'none', // Effect on navigation, none/slide/fade
+        transitionSpeed: '400'
+    };
+
+    // The plugin constructor
+    function SmartWizard(element, options) {
+        // Merge user settings with default, recursively
+        this.options = $.extend(true, {}, defaults, options);
+        // Main container element
+        this.main = $(element);
+        // Navigation bar element
+        this.nav = this.main.children('ul');
+        // Step anchor elements
+        this.steps = $("li > a", this.nav);
+        // Content container
+        this.container = this.main.children('div');
+        // Content pages
+        this.pages = this.container.children('div');
+        // Active step index
+        this.current_index = null;
+        // Call initial method
+        this.init();
+    }
+
+    $.extend(SmartWizard.prototype, {
+
+        init: function () {
+            // Set the elements
+            this._setElements();
+            // Add toolbar
+            this._setToolbar();
+            // Assign plugin events
+            this._setEvents();
+
+            var idx = this.options.selected;
+            // Get selected step from the url
+            if (this.options.useURLhash) {
+                // Get step number from url hash if available
+                var hash = window.location.hash;
+                if (hash && hash.length > 0) {
+                    var elm = $("a[href*='" + hash + "']", this.nav);
+                    if (elm.length > 0) {
+                        var id = this.steps.index(elm);
+                        idx = id >= 0 ? id : idx;
+                    }
+                }
+            }
+
+            if (idx > 0 && this.options.anchorSettings.markDoneStep && this.options.anchorSettings.markAllPreviousStepsAsDone) {
+                // Mark previous steps of the active step as done
+                // this.steps.eq(idx).parent('li').prevAll().addClass("done");
+                this._setDone(this.steps.eq(idx).parent('li').prevAll());
+            }
+
+            // Show the initial step
+            this._showStep(idx);
+        },
+
+        // PRIVATE FUNCTIONS
+
+        _setElements: function () {
+            // Set the main element
+            this.main.addClass('sw-main sw-theme-' + this.options.theme);
+            // Set anchor elements
+            this.nav.addClass('step-anchor'); // nav-justified  nav-pills
+
+            // Make the anchor clickable
+            if (this.options.anchorSettings.enableAllAnchors !== false && this.options.anchorSettings.anchorClickable !== false) {
+                this.steps.parent('li').addClass('clickable');
+            }
+            // Set content container
+            this.container.addClass('sw-container tab-content');
+            // Set content pages
+            this.pages.addClass('tab-pane step-content');
+
+            // Disabled steps
+            var mi = this;
+            if (this.options.disabledSteps && this.options.disabledSteps.length > 0) {
+                $.each(this.options.disabledSteps, function (i, n) {
+                    mi.steps.eq(n).parent('li').addClass('disabled');
+                });
+            }
+            // Error steps
+            if (this.options.errorSteps && this.options.errorSteps.length > 0) {
+                $.each(this.options.errorSteps, function (i, n) {
+                    mi.steps.eq(n).parent('li').addClass('danger');
+                });
+            }
+            // Hidden steps
+            if (this.options.hiddenSteps && this.options.hiddenSteps.length > 0) {
+                $.each(this.options.hiddenSteps, function (i, n) {
+                    mi.steps.eq(n).parent('li').addClass('hidden');
+                });
+            }
+
+            return true;
+        },
+        _setToolbar: function () {
+            // Skip right away if the toolbar is not enabled
+            if (this.options.toolbarSettings.toolbarPosition === 'none') {
+                return true;
+            }
+            console.log(this.options.toolbarSettings.toolbarPosition);
+
+            // Create the toolbar buttons
+            var btnNext = this.options.toolbarSettings.showNextButton !== false ? $('<button></button>').text(this.options.lang.next).addClass('btn btn-default sw-btn-next').attr('type', 'button') : null;
+            var btnPrevious = this.options.toolbarSettings.showPreviousButton !== false ? $('<button></button>').text(this.options.lang.previous).addClass('btn btn-default sw-btn-prev').attr('type', 'button') : null;
+            var btnGroup = $('<div></div>').addClass('btn-group mr-2 sw-btn-group').attr('role', 'group').append(btnPrevious, btnNext);
+
+
+            var box1 = $('<div></div>').addClass('col-sm-2');
+            var box2 = $('<div></div>').addClass('col-sm-10').append(btnGroup);
+
+            // Add extra toolbar buttons
+            var btnGroupExtra = null;
+
+            if (this.options.toolbarSettings.toolbarExtraButtons && this.options.toolbarSettings.toolbarExtraButtons.length > 0) {
+                btnGroupExtra = $('<span></span>').addClass('mr-2 sw-btn-group-extra').attr('role', 'group');
+                $.each(this.options.toolbarSettings.toolbarExtraButtons, function (i, n) {
+                    btnGroupExtra.append(n.clone(true));
+                });
+            }
+
+            var toolbarTop, toolbarBottom;
+            // Append toolbar based on the position
+            switch (this.options.toolbarSettings.toolbarPosition) {
+                case 'top':
+                    toolbarTop = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-top justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
+                    toolbarTop.append(box1, box2);
+                    if (this.options.toolbarSettings.toolbarButtonPosition === 'left') {
+                        box2.append(btnGroupExtra);
+                    } else {
+                        box2.prepend(btnGroupExtra);
+                    }
+                    this.container.before(toolbarTop);
+                    break;
+                case 'bottom':
+                    toolbarBottom = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
+                    toolbarBottom.append(box1, box2);
+                    if (this.options.toolbarSettings.toolbarButtonPosition === 'left') {
+                        box2.append(btnGroupExtra);
+                    } else {
+                        box2.prepend(btnGroupExtra);
+                    }
+                    this.container.after(toolbarBottom);
+                    break;
+                case 'both':
+                    toolbarTop = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-top justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
+                    toolbarTop.append(box1, box2);
+                    if (this.options.toolbarSettings.toolbarButtonPosition === 'left') {
+                        box2.append(btnGroupExtra);
+                    } else {
+                        box2.prepend(btnGroupExtra);
+                    }
+                    this.container.before(toolbarTop);
+
+                    toolbarBottom = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
+                    toolbarBottom.append(box1, box2);
+                    if (this.options.toolbarSettings.toolbarButtonPosition === 'left') {
+                        box2.append(btnGroupExtra.clone(true));
+                    } else {
+                        box2.prepend(btnGroupExtra.clone(true));
+                    }
+                    this.container.after(toolbarBottom);
+                    break;
+                default:
+                    toolbarBottom = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
+                    toolbarBottom.append(box1, box2);
+                    if (this.options.toolbarSettings.toolbarButtonPosition === 'left') {
+                        box2.append(btnGroupExtra);
+                    } else {
+                        box2.prepend(btnGroupExtra);
+                    }
+                    this.container.after(toolbarBottom);
+                    break;
+            }
+            return true;
+        },
+        _setEvents: function () {
+            // Anchor click event
+            var mi = this;
+            $(this.steps).on("click", function (e) {
+                e.preventDefault();
+                if (mi.options.anchorSettings.anchorClickable === false) {
+                    return true;
+                }
+                var idx = mi.steps.index(this);
+                if (mi.options.anchorSettings.enableAnchorOnDoneStep === false && mi.steps.eq(idx).parent('li').hasClass('done')) {
+                    return true;
+                }
+
+                if (idx !== mi.current_index) {
+                    if (mi.options.anchorSettings.enableAllAnchors !== false && mi.options.anchorSettings.anchorClickable !== false) {
+                        mi._showStep(idx);
+                    } else {
+                        if (mi.steps.eq(idx).parent('li').hasClass('done')) {
+                            mi._showStep(idx);
+                        }
+                    }
+                }
+            });
+
+            // Keyboard navigation event
+            if (this.options.keyNavigation) {
+                $(document).keyup(function (e) {
+                    mi._keyNav(e);
+                });
+            }
+
+            // Back/forward browser button event
+            if (this.options.backButtonSupport) {
+                $(window).on('hashchange', function (e) {
+                    if (!mi.options.useURLhash) {
+                        return true;
+                    }
+                    if (window.location.hash) {
+                        var elm = $("a[href*='" + window.location.hash + "']", mi.nav);
+                        if (elm && elm.length > 0) {
+                            e.preventDefault();
+                            mi._showStep(mi.steps.index(elm));
+                        }
+                    }
+                });
+            }
+
+            return true;
+        },
+        _showNext: function () {
+            var si = this.current_index + 1;
+            // Find the next not disabled step
+            for (var i = si; i < this.steps.length; i++) {
+                if (!this.steps.eq(i).parent('li').hasClass('disabled') && !this.steps.eq(i).parent('li').hasClass('hidden')) {
+                    si = i;
+                    break;
+                }
+            }
+
+            if (this.steps.length <= si) {
+                if (!this.options.cycleSteps) {
+                    return false;
+                }
+                si = 0;
+            }
+            this._showStep(si);
+            return true;
+        },
+        _showPrevious: function () {
+            var si = this.current_index - 1;
+            // Find the previous not disabled step
+            for (var i = si; i >= 0; i--) {
+                if (!this.steps.eq(i).parent('li').hasClass('disabled') && !this.steps.eq(i).parent('li').hasClass('hidden')) {
+                    si = i;
+                    break;
+                }
+            }
+            if (0 > si) {
+                if (!this.options.cycleSteps) {
+                    return false;
+                }
+                si = this.steps.length - 1;
+            }
+            this._showStep(si);
+            return true;
+        },
+        _showStep: function (idx) {
+            // If step not found, skip
+            if (!this.steps.eq(idx)) {
+                return false;
+            }
+            // If current step is requested again, skip
+            if (idx == this.current_index) {
+                return false;
+            }
+            // If it is a disabled step, skip
+            if (this.steps.eq(idx).parent('li').hasClass('disabled') || this.steps.eq(idx).parent('li').hasClass('hidden')) {
+                return false;
+            }
+            // Load step content
+            this._loadStepContent(idx);
+            return true;
+        },
+        _loadStepContent: function (idx) {
+            var mi = this;
+            // Get current step elements
+            var curTab = this.steps.eq(this.current_index);
+            // Get the direction of step navigation
+            var stepDirection = '';
+            var elm = this.steps.eq(idx);
+            var contentURL = elm.data('content-url') && elm.data('content-url').length > 0 ? elm.data('content-url') : this.options.contentURL;
+
+            if (this.current_index !== null && this.current_index !== idx) {
+                stepDirection = this.current_index < idx ? "forward" : "backward";
+            }
+
+            // Trigger "leaveStep" event
+            if (this.current_index !== null && this._triggerEvent("leaveStep", [curTab, this.current_index, stepDirection]) === false) {
+                return false;
+            }
+
+            if (contentURL && contentURL.length > 0 && (!elm.data('has-content') || !this.options.contentCache)) {
+                // Get ajax content and then show step
+                var selPage = elm.length > 0 ? $(elm.attr("href"), this.main) : null;
+
+                var ajaxSettings = $.extend(true, {}, {
+                    url: contentURL,
+                    type: "POST",
+                    data: { step_number: idx },
+                    dataType: "text",
+                    beforeSend: function () {
+                        elm.parent('li').addClass('loading');
+                    },
+                    error: function (jqXHR, status, message) {
+                        elm.parent('li').removeClass('loading');
+                        $.error(message);
+                    },
+                    success: function (res) {
+                        if (res && res.length > 0) {
+                            elm.data('has-content', true);
+                            selPage.html(res);
+                        }
+                        elm.parent('li').removeClass('loading');
+                        mi._transitPage(idx);
+                    }
+                }, this.options.ajaxSettings);
+
+                $.ajax(ajaxSettings);
+            } else {
+                // Show step
+                this._transitPage(idx);
+            }
+            return true;
+        },
+        _transitPage: function (idx) {
+            var mi = this;
+            // Get current step elements
+            var curTab = this.steps.eq(this.current_index);
+            var curPage = curTab.length > 0 ? $(curTab.attr("href"), this.main) : null;
+            // Get step to show elements
+            var selTab = this.steps.eq(idx);
+            var selPage = selTab.length > 0 ? $(selTab.attr("href"), this.main) : null;
+            // Get the direction of step navigation
+            var stepDirection = '';
+            if (this.current_index !== null && this.current_index !== idx) {
+                stepDirection = this.current_index < idx ? "forward" : "backward";
+            }
+
+            var stepPosition = 'middle';
+            if (idx === 0) {
+                stepPosition = 'first';
+            } else if (idx === this.steps.length - 1) {
+                stepPosition = 'final';
+            }
+
+            this.options.transitionEffect = this.options.transitionEffect.toLowerCase();
+            this.pages.finish();
+            if (this.options.transitionEffect === 'slide') {
+                // normal slide
+                if (curPage && curPage.length > 0) {
+                    curPage.slideUp('fast', this.options.transitionEasing, function () {
+                        selPage.slideDown(mi.options.transitionSpeed, mi.options.transitionEasing);
+                    });
+                } else {
+                    selPage.slideDown(this.options.transitionSpeed, this.options.transitionEasing);
+                }
+            } else if (this.options.transitionEffect === 'fade') {
+                // normal fade
+                if (curPage && curPage.length > 0) {
+                    curPage.fadeOut('fast', this.options.transitionEasing, function () {
+                        selPage.fadeIn('fast', mi.options.transitionEasing, function () {
+                            $(this).show();
+                        });
+                    });
+                } else {
+                    selPage.fadeIn(this.options.transitionSpeed, this.options.transitionEasing, function () {
+                        $(this).show();
+                    });
+                }
+            } else {
+                if (curPage && curPage.length > 0) {
+                    curPage.hide();
+                }
+                selPage.show();
+            }
+            // Change the url hash to new step
+            this._setURLHash(selTab.attr("href"));
+            // Update controls
+            this._setAnchor(idx);
+            // Set the buttons based on the step
+            this._setButtons(idx);
+            // Fix height with content
+            this._fixHeight(idx);
+            // Update the current index
+            this.current_index = idx;
+
+            // Trigger "showStep" event
+            this._triggerEvent("showStep", [selTab, this.current_index, stepDirection, stepPosition]);
+            return true;
+        },
+        _setAnchor: function (idx) {
+            // Current step anchor > Remove other classes and add done class
+            this.steps.eq(this.current_index).parent('li').removeClass("active danger loading");
+            if (this.options.anchorSettings.markDoneStep !== false && this.current_index !== null) {
+                this._setDone(this.steps.eq(this.current_index).parent('li'));
+                if (this.options.anchorSettings.removeDoneStepOnNavigateBack !== false) {
+                    this._removeDone(this.steps.eq(idx).parent('li').nextAll());
+                }
+            }
+
+            // Next step anchor > Remove other classes and add active class
+            this.steps.eq(idx).parent('li').removeClass("danger loading").addClass("active");
+            this._removeDone(this.steps.eq(idx).parent('li'));
+            return true;
+        },
+
+        _setDone: function ($li) {
+            $li.addClass("done");
+
+            $li.find('.la-step-icon').html('<i style="vertical-align:middle"><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i>');
+        },
+
+        //
+        _removeDone: function ($lis) {
+            $lis.removeClass("done");
+
+            $lis.each(function (k, li) {
+                var $icon = $(li).find('.la-step-icon');
+
+                $icon.text($icon.data('index') + 1);
+            });
+
+
+        },
+
+        _setButtons: function (idx) {
+            // Previous/Next Button enable/disable based on step
+            if (!this.options.cycleSteps) {
+                if (0 >= idx) {
+                    $('.sw-btn-prev', this.main).addClass("disabled");
+                } else {
+                    $('.sw-btn-prev', this.main).removeClass("disabled");
+                }
+                if (this.steps.length - 1 <= idx) {
+                    $('.sw-btn-next', this.main).addClass("disabled");
+                } else {
+                    $('.sw-btn-next', this.main).removeClass("disabled");
+                }
+            }
+            return true;
+        },
+
+        // HELPER FUNCTIONS
+
+        _keyNav: function (e) {
+            var mi = this;
+            // Keyboard navigation
+            switch (e.which) {
+                case 37:
+                    // left
+                    mi._showPrevious();
+                    e.preventDefault();
+                    break;
+                case 39:
+                    // right
+                    mi._showNext();
+                    e.preventDefault();
+                    break;
+                default:
+                    return; // exit this handler for other keys
+            }
+        },
+        _fixHeight: function (idx) {
+            // Auto adjust height of the container
+            if (this.options.autoAdjustHeight) {
+                var selPage = this.steps.eq(idx).length > 0 ? $(this.steps.eq(idx).attr("href"), this.main) : null;
+                this.container.finish().animate({ minHeight: selPage.outerHeight() }, this.options.transitionSpeed, function () {});
+            }
+            return true;
+        },
+        _triggerEvent: function (name, params) {
+            // Trigger an event
+            var e = $.Event(name);
+            this.main.trigger(e, params);
+            if (e.isDefaultPrevented()) {
+                return false;
+            }
+            return e.result;
+        },
+        _setURLHash: function (hash) {
+            if (this.options.showStepURLhash && window.location.hash !== hash) {
+                window.location.hash = hash;
+            }
+        },
+
+        // PUBLIC FUNCTIONS
+
+        theme: function (v) {
+            if (this.options.theme === v) {
+                return false;
+            }
+            this.main.removeClass('sw-theme-' + this.options.theme);
+            this.options.theme = v;
+            this.main.addClass('sw-theme-' + this.options.theme);
+            // Trigger "themeChanged" event
+            this._triggerEvent("themeChanged", [this.options.theme]);
+        },
+        next: function () {
+            this._showNext();
+        },
+        prev: function () {
+            this._showPrevious();
+        },
+        reset: function () {
+            // Trigger "beginReset" event
+            if (this._triggerEvent("beginReset") === false) {
+                return false;
+            }
+
+            // Reset all elements and classes
+            this.container.stop(true);
+            this.pages.stop(true);
+            this.pages.hide();
+            this.current_index = null;
+            this._setURLHash(this.steps.eq(this.options.selected).attr("href"));
+            $(".sw-toolbar", this.main).remove();
+            this.steps.removeClass();
+            this.steps.parents('li').removeClass();
+            this.steps.data('has-content', false);
+            this.init();
+
+            // Trigger "endReset" event
+            this._triggerEvent("endReset");
+        },
+        stepState: function (stepArray, state) {
+            var mi = this;
+            stepArray = $.isArray(stepArray) ? stepArray : [stepArray];
+            var selSteps = $.grep(this.steps, function (n, i) {
+                return $.inArray(i, stepArray) !== -1 && i !== mi.current_index;
+            });
+            if (selSteps && selSteps.length > 0) {
+                switch (state) {
+                    case 'disable':
+                        $(selSteps).parents('li').addClass('disabled');
+                        break;
+                    case 'enable':
+                        $(selSteps).parents('li').removeClass('disabled');
+                        break;
+                    case 'hide':
+                        $(selSteps).parents('li').addClass('hidden');
+                        break;
+                    case 'show':
+                        $(selSteps).parents('li').removeClass('hidden');
+                        break;
+                }
+            }
+        }
+    });
+
+    // Wrapper for the plugin
+    $.fn.smartWizard = function (options) {
+        var args = arguments;
+        var instance;
+
+        if (options === undefined || typeof options === 'object') {
+            return this.each(function () {
+                if (!$.data(this, "smartWizard")) {
+                    $.data(this, "smartWizard", new SmartWizard(this, options));
+                }
+            });
+        } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
+            instance = $.data(this[0], 'smartWizard');
+
+            if (options === 'destroy') {
+                $.data(this, 'smartWizard', null);
+            }
+
+            if (instance instanceof SmartWizard && typeof instance[options] === 'function') {
+                return instance[options].apply(instance, Array.prototype.slice.call(args, 1));
+            } else {
+                return this;
+            }
+        }
+    };
+})(jQuery, window, document);

resources/assets/dcat/sass/components/_form.scss

@@ -26,6 +26,7 @@ select.form-control:not([multiple=multiple]) {
 
 .control-label {
   padding-top: 7px;
+  padding-right: 5px;
   margin-bottom: 0;
   font-size: 1rem;
   text-transform: capitalize;

resources/dist/css/plugins/loaders/animations/ball-grid-beat.css

@@ -27,66 +27,66 @@
 }
 
 .ball-grid-beat > div:nth-child(1) {
-  -webkit-animation-delay: 0.69s;
-          animation-delay: 0.69s;
-  -webkit-animation-duration: 1.45s;
-          animation-duration: 1.45s;
+  -webkit-animation-delay: 0.03s;
+          animation-delay: 0.03s;
+  -webkit-animation-duration: 1.28s;
+          animation-duration: 1.28s;
 }
 
 .ball-grid-beat > div:nth-child(2) {
   -webkit-animation-delay: 0.27s;
           animation-delay: 0.27s;
-  -webkit-animation-duration: 1.23s;
-          animation-duration: 1.23s;
+  -webkit-animation-duration: 1.31s;
+          animation-duration: 1.31s;
 }
 
 .ball-grid-beat > div:nth-child(3) {
-  -webkit-animation-delay: 0.5s;
-          animation-delay: 0.5s;
-  -webkit-animation-duration: 1.34s;
-          animation-duration: 1.34s;
+  -webkit-animation-delay: 0.09s;
+          animation-delay: 0.09s;
+  -webkit-animation-duration: 0.85s;
+          animation-duration: 0.85s;
 }
 
 .ball-grid-beat > div:nth-child(4) {
-  -webkit-animation-delay: -0.11s;
-          animation-delay: -0.11s;
-  -webkit-animation-duration: 0.83s;
-          animation-duration: 0.83s;
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+  -webkit-animation-duration: 1.57s;
+          animation-duration: 1.57s;
 }
 
 .ball-grid-beat > div:nth-child(5) {
-  -webkit-animation-delay: 0.08s;
-          animation-delay: 0.08s;
-  -webkit-animation-duration: 0.83s;
-          animation-duration: 0.83s;
+  -webkit-animation-delay: 0.35s;
+          animation-delay: 0.35s;
+  -webkit-animation-duration: 1.19s;
+          animation-duration: 1.19s;
 }
 
 .ball-grid-beat > div:nth-child(6) {
-  -webkit-animation-delay: 0.76s;
-          animation-delay: 0.76s;
-  -webkit-animation-duration: 1s;
-          animation-duration: 1s;
+  -webkit-animation-delay: 0.78s;
+          animation-delay: 0.78s;
+  -webkit-animation-duration: 1.44s;
+          animation-duration: 1.44s;
 }
 
 .ball-grid-beat > div:nth-child(7) {
-  -webkit-animation-delay: 0.06s;
-          animation-delay: 0.06s;
-  -webkit-animation-duration: 1.09s;
-          animation-duration: 1.09s;
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+  -webkit-animation-duration: 0.96s;
+          animation-duration: 0.96s;
 }
 
 .ball-grid-beat > div:nth-child(8) {
-  -webkit-animation-delay: 0.08s;
-          animation-delay: 0.08s;
-  -webkit-animation-duration: 1.06s;
-          animation-duration: 1.06s;
+  -webkit-animation-delay: -0.11s;
+          animation-delay: -0.11s;
+  -webkit-animation-duration: 1.18s;
+          animation-duration: 1.18s;
 }
 
 .ball-grid-beat > div:nth-child(9) {
-  -webkit-animation-delay: 0.07s;
-          animation-delay: 0.07s;
-  -webkit-animation-duration: 1.41s;
-          animation-duration: 1.41s;
+  -webkit-animation-delay: 0.24s;
+          animation-delay: 0.24s;
+  -webkit-animation-duration: 1.15s;
+          animation-duration: 1.15s;
 }
 
 .ball-grid-beat > div {

resources/dist/css/plugins/loaders/animations/ball-grid-pulse.css

@@ -39,66 +39,66 @@
 }
 
 .ball-grid-pulse > div:nth-child(1) {
-  -webkit-animation-delay: 0.8s;
-          animation-delay: 0.8s;
-  -webkit-animation-duration: 1.32s;
-          animation-duration: 1.32s;
+  -webkit-animation-delay: -0.18s;
+          animation-delay: -0.18s;
+  -webkit-animation-duration: 0.85s;
+          animation-duration: 0.85s;
 }
 
 .ball-grid-pulse > div:nth-child(2) {
-  -webkit-animation-delay: 0.77s;
-          animation-delay: 0.77s;
-  -webkit-animation-duration: 1.49s;
-          animation-duration: 1.49s;
+  -webkit-animation-delay: 0.49s;
+          animation-delay: 0.49s;
+  -webkit-animation-duration: 0.98s;
+          animation-duration: 0.98s;
 }
 
 .ball-grid-pulse > div:nth-child(3) {
-  -webkit-animation-delay: 0.4s;
-          animation-delay: 0.4s;
-  -webkit-animation-duration: 0.82s;
-          animation-duration: 0.82s;
+  -webkit-animation-delay: 0.29s;
+          animation-delay: 0.29s;
+  -webkit-animation-duration: 1.37s;
+          animation-duration: 1.37s;
 }
 
 .ball-grid-pulse > div:nth-child(4) {
-  -webkit-animation-delay: 0.75s;
-          animation-delay: 0.75s;
-  -webkit-animation-duration: 1.58s;
-          animation-duration: 1.58s;
+  -webkit-animation-delay: 0.18s;
+          animation-delay: 0.18s;
+  -webkit-animation-duration: 1.46s;
+          animation-duration: 1.46s;
 }
 
 .ball-grid-pulse > div:nth-child(5) {
-  -webkit-animation-delay: 0.19s;
-          animation-delay: 0.19s;
-  -webkit-animation-duration: 0.93s;
-          animation-duration: 0.93s;
+  -webkit-animation-delay: 0.66s;
+          animation-delay: 0.66s;
+  -webkit-animation-duration: 0.98s;
+          animation-duration: 0.98s;
 }
 
 .ball-grid-pulse > div:nth-child(6) {
-  -webkit-animation-delay: 0.52s;
-          animation-delay: 0.52s;
-  -webkit-animation-duration: 1.56s;
-          animation-duration: 1.56s;
+  -webkit-animation-delay: -0.18s;
+          animation-delay: -0.18s;
+  -webkit-animation-duration: 1.4s;
+          animation-duration: 1.4s;
 }
 
 .ball-grid-pulse > div:nth-child(7) {
-  -webkit-animation-delay: 0.09s;
-          animation-delay: 0.09s;
-  -webkit-animation-duration: 1.34s;
-          animation-duration: 1.34s;
+  -webkit-animation-delay: -0.16s;
+          animation-delay: -0.16s;
+  -webkit-animation-duration: 1.14s;
+          animation-duration: 1.14s;
 }
 
 .ball-grid-pulse > div:nth-child(8) {
-  -webkit-animation-delay: -0.17s;
-          animation-delay: -0.17s;
-  -webkit-animation-duration: 0.96s;
-          animation-duration: 0.96s;
+  -webkit-animation-delay: 0.45s;
+          animation-delay: 0.45s;
+  -webkit-animation-duration: 0.67s;
+          animation-duration: 0.67s;
 }
 
 .ball-grid-pulse > div:nth-child(9) {
-  -webkit-animation-delay: -0.02s;
-          animation-delay: -0.02s;
-  -webkit-animation-duration: 1.04s;
-          animation-duration: 1.04s;
+  -webkit-animation-delay: 0.62s;
+          animation-delay: 0.62s;
+  -webkit-animation-duration: 1.03s;
+          animation-duration: 1.03s;
 }
 
 .ball-grid-pulse > div {

resources/dist/css/plugins/loaders/animations/line-scale-random.css

@@ -31,31 +31,31 @@
 }
 
 .line-scale-party > div:nth-child(1) {
-  -webkit-animation-delay: 0.14s;
-          animation-delay: 0.14s;
-  -webkit-animation-duration: 0.47s;
-          animation-duration: 0.47s;
+  -webkit-animation-delay: 0.43s;
+          animation-delay: 0.43s;
+  -webkit-animation-duration: 1s;
+          animation-duration: 1s;
 }
 
 .line-scale-party > div:nth-child(2) {
-  -webkit-animation-delay: -0.07s;
-          animation-delay: -0.07s;
-  -webkit-animation-duration: 0.97s;
-          animation-duration: 0.97s;
+  -webkit-animation-delay: 0.56s;
+          animation-delay: 0.56s;
+  -webkit-animation-duration: 0.72s;
+          animation-duration: 0.72s;
 }
 
 .line-scale-party > div:nth-child(3) {
-  -webkit-animation-delay: 0.52s;
-          animation-delay: 0.52s;
-  -webkit-animation-duration: 1.26s;
-          animation-duration: 1.26s;
+  -webkit-animation-delay: 0.64s;
+          animation-delay: 0.64s;
+  -webkit-animation-duration: 0.47s;
+          animation-duration: 0.47s;
 }
 
 .line-scale-party > div:nth-child(4) {
-  -webkit-animation-delay: 0.1s;
-          animation-delay: 0.1s;
-  -webkit-animation-duration: 0.9s;
-          animation-duration: 0.9s;
+  -webkit-animation-delay: -0.05s;
+          animation-delay: -0.05s;
+  -webkit-animation-duration: 0.83s;
+          animation-duration: 0.83s;
 }
 
 .line-scale-party > div {

resources/dist/css/plugins/loaders/loaders.css

@@ -1454,66 +1454,66 @@
 }
 
 .ball-grid-beat > div:nth-child(1) {
-  -webkit-animation-delay: 0.26s;
-          animation-delay: 0.26s;
-  -webkit-animation-duration: 1.52s;
-          animation-duration: 1.52s;
+  -webkit-animation-delay: 0.55s;
+          animation-delay: 0.55s;
+  -webkit-animation-duration: 0.74s;
+          animation-duration: 0.74s;
 }
 
 .ball-grid-beat > div:nth-child(2) {
-  -webkit-animation-delay: 0.3s;
-          animation-delay: 0.3s;
-  -webkit-animation-duration: 1.2s;
-          animation-duration: 1.2s;
+  -webkit-animation-delay: 0.25s;
+          animation-delay: 0.25s;
+  -webkit-animation-duration: 1.15s;
+          animation-duration: 1.15s;
 }
 
 .ball-grid-beat > div:nth-child(3) {
-  -webkit-animation-delay: 0.7s;
-          animation-delay: 0.7s;
-  -webkit-animation-duration: 1.07s;
-          animation-duration: 1.07s;
+  -webkit-animation-delay: 0.27s;
+          animation-delay: 0.27s;
+  -webkit-animation-duration: 0.99s;
+          animation-duration: 0.99s;
 }
 
 .ball-grid-beat > div:nth-child(4) {
-  -webkit-animation-delay: 0.03s;
-          animation-delay: 0.03s;
-  -webkit-animation-duration: 1.14s;
-          animation-duration: 1.14s;
+  -webkit-animation-delay: -0.04s;
+          animation-delay: -0.04s;
+  -webkit-animation-duration: 1.17s;
+          animation-duration: 1.17s;
 }
 
 .ball-grid-beat > div:nth-child(5) {
-  -webkit-animation-delay: 0.58s;
-          animation-delay: 0.58s;
-  -webkit-animation-duration: 1.59s;
-          animation-duration: 1.59s;
+  -webkit-animation-delay: -0.07s;
+          animation-delay: -0.07s;
+  -webkit-animation-duration: 0.87s;
+          animation-duration: 0.87s;
 }
 
 .ball-grid-beat > div:nth-child(6) {
-  -webkit-animation-delay: -0.15s;
-          animation-delay: -0.15s;
-  -webkit-animation-duration: 0.72s;
-          animation-duration: 0.72s;
+  -webkit-animation-delay: 0.39s;
+          animation-delay: 0.39s;
+  -webkit-animation-duration: 0.9s;
+          animation-duration: 0.9s;
 }
 
 .ball-grid-beat > div:nth-child(7) {
-  -webkit-animation-delay: -0.01s;
-          animation-delay: -0.01s;
-  -webkit-animation-duration: 1.52s;
-          animation-duration: 1.52s;
+  -webkit-animation-delay: -0.08s;
+          animation-delay: -0.08s;
+  -webkit-animation-duration: 1.43s;
+          animation-duration: 1.43s;
 }
 
 .ball-grid-beat > div:nth-child(8) {
-  -webkit-animation-delay: -0.17s;
-          animation-delay: -0.17s;
-  -webkit-animation-duration: 1.47s;
-          animation-duration: 1.47s;
+  -webkit-animation-delay: 0.59s;
+          animation-delay: 0.59s;
+  -webkit-animation-duration: 1.17s;
+          animation-duration: 1.17s;
 }
 
 .ball-grid-beat > div:nth-child(9) {
-  -webkit-animation-delay: 0.47s;
-          animation-delay: 0.47s;
-  -webkit-animation-duration: 0.86s;
-          animation-duration: 0.86s;
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s;
+  -webkit-animation-duration: 0.71s;
+          animation-duration: 0.71s;
 }
 
 .ball-grid-beat > div {
@@ -1575,66 +1575,66 @@
 }
 
 .ball-grid-pulse > div:nth-child(1) {
-  -webkit-animation-delay: 0.38s;
-          animation-delay: 0.38s;
-  -webkit-animation-duration: 0.76s;
-          animation-duration: 0.76s;
+  -webkit-animation-delay: 0.63s;
+          animation-delay: 0.63s;
+  -webkit-animation-duration: 1.24s;
+          animation-duration: 1.24s;
 }
 
 .ball-grid-pulse > div:nth-child(2) {
-  -webkit-animation-delay: 0.17s;
-          animation-delay: 0.17s;
-  -webkit-animation-duration: 1.26s;
-          animation-duration: 1.26s;
+  -webkit-animation-delay: 0.32s;
+          animation-delay: 0.32s;
+  -webkit-animation-duration: 1.25s;
+          animation-duration: 1.25s;
 }
 
 .ball-grid-pulse > div:nth-child(3) {
-  -webkit-animation-delay: -0.06s;
-          animation-delay: -0.06s;
-  -webkit-animation-duration: 0.7s;
-          animation-duration: 0.7s;
+  -webkit-animation-delay: 0.63s;
+          animation-delay: 0.63s;
+  -webkit-animation-duration: 1s;
+          animation-duration: 1s;
 }
 
 .ball-grid-pulse > div:nth-child(4) {
-  -webkit-animation-delay: -0.12s;
-          animation-delay: -0.12s;
-  -webkit-animation-duration: 0.84s;
-          animation-duration: 0.84s;
+  -webkit-animation-delay: 0.01s;
+          animation-delay: 0.01s;
+  -webkit-animation-duration: 1.13s;
+          animation-duration: 1.13s;
 }
 
 .ball-grid-pulse > div:nth-child(5) {
-  -webkit-animation-delay: 0.44s;
-          animation-delay: 0.44s;
-  -webkit-animation-duration: 0.74s;
-          animation-duration: 0.74s;
+  -webkit-animation-delay: 0.59s;
+          animation-delay: 0.59s;
+  -webkit-animation-duration: 0.81s;
+          animation-duration: 0.81s;
 }
 
 .ball-grid-pulse > div:nth-child(6) {
-  -webkit-animation-delay: 0.57s;
-          animation-delay: 0.57s;
-  -webkit-animation-duration: 1.04s;
-          animation-duration: 1.04s;
+  -webkit-animation-delay: -0.16s;
+          animation-delay: -0.16s;
+  -webkit-animation-duration: 0.65s;
+          animation-duration: 0.65s;
 }
 
 .ball-grid-pulse > div:nth-child(7) {
-  -webkit-animation-delay: 0.28s;
-          animation-delay: 0.28s;
-  -webkit-animation-duration: 0.66s;
-          animation-duration: 0.66s;
+  -webkit-animation-delay: 0.68s;
+          animation-delay: 0.68s;
+  -webkit-animation-duration: 1.34s;
+          animation-duration: 1.34s;
 }
 
 .ball-grid-pulse > div:nth-child(8) {
-  -webkit-animation-delay: 0.5s;
-          animation-delay: 0.5s;
-  -webkit-animation-duration: 0.66s;
-          animation-duration: 0.66s;
+  -webkit-animation-delay: 0.54s;
+          animation-delay: 0.54s;
+  -webkit-animation-duration: 1.51s;
+          animation-duration: 1.51s;
 }
 
 .ball-grid-pulse > div:nth-child(9) {
-  -webkit-animation-delay: 0.7s;
-          animation-delay: 0.7s;
-  -webkit-animation-duration: 1.12s;
-          animation-duration: 1.12s;
+  -webkit-animation-delay: 0.51s;
+          animation-delay: 0.51s;
+  -webkit-animation-duration: 0.73s;
+          animation-duration: 0.73s;
 }
 
 .ball-grid-pulse > div {
@@ -2181,31 +2181,31 @@
 }
 
 .line-scale-party > div:nth-child(1) {
-  -webkit-animation-delay: -0.01s;
-          animation-delay: -0.01s;
-  -webkit-animation-duration: 0.66s;
-          animation-duration: 0.66s;
+  -webkit-animation-delay: 0.62s;
+          animation-delay: 0.62s;
+  -webkit-animation-duration: 0.65s;
+          animation-duration: 0.65s;
 }
 
 .line-scale-party > div:nth-child(2) {
-  -webkit-animation-delay: -0.09s;
-          animation-delay: -0.09s;
-  -webkit-animation-duration: 0.67s;
-          animation-duration: 0.67s;
+  -webkit-animation-delay: 0.59s;
+          animation-delay: 0.59s;
+  -webkit-animation-duration: 0.47s;
+          animation-duration: 0.47s;
 }
 
 .line-scale-party > div:nth-child(3) {
-  -webkit-animation-delay: -0.15s;
-          animation-delay: -0.15s;
-  -webkit-animation-duration: 0.67s;
-          animation-duration: 0.67s;
+  -webkit-animation-delay: 0.75s;
+          animation-delay: 0.75s;
+  -webkit-animation-duration: 0.33s;
+          animation-duration: 0.33s;
 }
 
 .line-scale-party > div:nth-child(4) {
-  -webkit-animation-delay: 0.71s;
-          animation-delay: 0.71s;
-  -webkit-animation-duration: 0.52s;
-          animation-duration: 0.52s;
+  -webkit-animation-delay: 0.33s;
+          animation-delay: 0.33s;
+  -webkit-animation-duration: 0.44s;
+          animation-duration: 0.44s;
 }
 
 .line-scale-party > div {

resources/dist/dcat/css/dcat-app.css

@@ -1902,6 +1902,7 @@ select.form-control:not([multiple=multiple]) {
 
 .control-label {
   padding-top: 7px;
+  padding-right: 5px;
   margin-bottom: 0;
   font-size: 1rem;
   text-transform: capitalize;

resources/dist/dcat/extra/step.css

@@ -0,0 +1,474 @@
+.sw-toolbar-bottom {
+  margin-top: 20px;
+  margin-left: 5px;
+}
+
+/* ---------------------------------------------------------------------------------------------------------------- */
+
+.dcat-step-box {
+  margin: 0 auto;
+}
+
+.dcat-step {
+  box-sizing: border-box;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  /*font-variant: tabular-nums;*/
+  line-height: 1.5;
+  list-style: none;
+  /*font-feature-settings: "tnum";*/
+  display: flex;
+  width: 100%;
+  font-size: 0;
+  margin: 0 auto 30px;
+}
+
+.dcat-step-item {
+  position: relative;
+  display: inline-block;
+  flex: 1 1;
+  overflow: hidden;
+  vertical-align: top;
+}
+
+.dcat-step-item-container {
+  outline: 0;
+  border: 0 !important;
+}
+
+.dcat-step-item:last-child {
+  flex: none;
+}
+
+.dcat-step-item:last-child > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after,
+.dcat-step-item:last-child > .dcat-step-item-container > .dcat-step-line {
+  display: none;
+}
+
+.dcat-step-content,
+.dcat-step-icons {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.dcat-step-icons {
+  width: 32px;
+  height: 32px;
+  margin-right: 8px;
+  font-size: 16px;
+  line-height: 32px;
+  text-align: center;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 32px;
+  transition: background-color 0.3s, border-color 0.3s;
+}
+
+.dcat-step-icons > .dcat-step-icon {
+  position: relative;
+  top: -1px;
+  color: rgba(0, 0, 0, 0.25);
+  line-height: 1;
+}
+
+.dcat-step-line {
+  position: absolute;
+  top: 12px;
+  left: 0;
+  width: 100%;
+  padding: 0 10px;
+}
+
+.dcat-step-line:after {
+  display: inline-block;
+  width: 100%;
+  height: 1px;
+  background: #e8e8e8;
+  border-radius: 1px;
+  transition: background 0.3s;
+  content: "";
+}
+
+.dcat-step-title {
+  position: relative;
+  display: inline-block;
+  padding-right: 16px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 16px;
+  line-height: 32px;
+}
+
+.dcat-step-title:after {
+  position: absolute;
+  top: 16px;
+  left: 100%;
+  display: block;
+  width: 9999px;
+  height: 1px;
+  background: #e8e8e8;
+  content: "";
+}
+
+.dcat-step-desc {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+}
+
+.active .dcat-step-icons {
+  background-color: #fff;
+  border-color: var(--primary);
+}
+
+.active .dcat-step-icons > .dcat-step-icon {
+  color: var(--primary);
+}
+
+.active .dcat-step-icons > .dcat-step-icon .dcat-step-icon-dot {
+  background: var(--primary);
+}
+
+.active > .dcat-step-item-container > .dcat-step-content > .dcat-step-title {
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.active > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after {
+  background-color: #e8e8e8;
+}
+
+.active > .dcat-step-item-container > .dcat-step-content > .dcat-step-desc {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.active > .dcat-step-item-container > .dcat-step-line:after {
+  background-color: #e8e8e8;
+}
+
+.active .dcat-step-icons {
+  background: var(--primary);
+}
+
+.active .dcat-step-icons > .dcat-step-icon {
+  color: #fff;
+}
+
+.active .dcat-step-title {
+  font-weight: 500;
+}
+
+.done .dcat-step-icons {
+  background-color: #fff;
+  border-color: var(--primary);
+}
+
+.done .dcat-step-icons > .dcat-step-icon {
+  color: var(--primary);
+}
+
+.done .dcat-step-icons > .dcat-step-icon .dcat-step-icon-dot {
+  background: var(--primary);
+}
+
+.done > .dcat-step-item-container > .dcat-step-content > .dcat-step-title {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.done > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after {
+  background-color: var(--primary);
+}
+
+.done > .dcat-step-item-container > .dcat-step-content > .dcat-step-desc {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.done > .dcat-step-item-container > .dcat-step-line:after {
+  background-color: var(--primary);
+}
+
+.danger .dcat-step-icons {
+  background-color: #fff;
+  border-color: var(--danger-dark);
+}
+
+.danger .dcat-step-icons > .dcat-step-icon {
+  color: var(--danger-dark);
+}
+
+.danger .dcat-step-icons > .dcat-step-icon .dcat-step-icon-dot {
+  background: var(--danger-dark);
+}
+
+.danger > .dcat-step-item-container > .dcat-step-content > .dcat-step-title {
+  color: var(--danger-dark);
+}
+
+.danger > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after {
+  background-color: #e8e8e8;
+}
+
+.danger > .dcat-step-item-container > .dcat-step-content > .dcat-step-desc {
+  color: var(--danger-dark);
+}
+
+.danger > .dcat-step-item-container > .dcat-step-line:after {
+  background-color: #e8e8e8;
+}
+
+.dcat-step-item.dcat-step-next-error .dcat-step-title:after {
+  background: var(--danger-dark);
+}
+
+.dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button] {
+  cursor: pointer;
+}
+
+.dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button] .dcat-step-desc,
+.dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button] .dcat-step-icons .dcat-step-icon,
+.dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button] .dcat-step-title {
+  transition: color 0.3s;
+}
+
+.dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-desc .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-title {
+  color: var(--primary);
+}
+
+.dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-icons {
+  border-color: var(--primary);
+}
+
+.dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-icons .dcat-step-icon {
+  color: var(--primary);
+}
+
+.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item {
+  margin-right: 16px;
+  white-space: nowrap;
+}
+
+.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item:last-child {
+  margin-right: 0;
+}
+
+.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item:last-child .dcat-step-title {
+  padding-right: 0;
+}
+
+.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-line {
+  display: none;
+}
+
+.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-desc {
+  max-width: 140px;
+  white-space: normal;
+}
+
+.dcat-step-sm.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item {
+  margin-right: 12px;
+}
+
+.dcat-step-sm.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item:last-child {
+  margin-right: 0;
+}
+
+.dcat-step-sm .dcat-step-icons {
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 24px;
+}
+
+.dcat-step-sm .dcat-step-title {
+  padding-right: 12px;
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.dcat-step-sm .dcat-step-title:after {
+  top: 12px;
+}
+
+.dcat-step-sm .dcat-step-desc {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+}
+
+.dcat-step-sm .dcat-step-line {
+  top: 8px;
+}
+
+@media (max-width: 540px) {
+  .dcat-step-horizontal.dcat-step-label-horizontal {
+    display: block;
+  }
+
+  .dcat-step-box .nav-tabs > li {
+    float: none;
+  }
+
+  .dcat-step-box .nav-tabs > li > a {
+    padding: 0;
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-item {
+    display: block;
+    overflow: visible;
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-icons {
+    float: left;
+    margin-right: 16px;
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-content {
+    display: block;
+    overflow: hidden;
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-title {
+    line-height: 32px;
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-desc {
+    padding-bottom: 12px;
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal > .dcat-step-item > .dcat-step-item-container > .dcat-step-line {
+    position: absolute;
+    top: 0;
+    left: 16px;
+    width: 1px;
+    height: 100%;
+    padding: 38px 0 6px;
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal > .dcat-step-item > .dcat-step-item-container > .dcat-step-line:after {
+    width: 1px;
+    height: 100%;
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal > .dcat-step-item:not(:last-child) > .dcat-step-item-container > .dcat-step-line {
+    display: none;
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal > .dcat-step-item > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after {
+    display: none;
+  }
+
+  .dcat-step-horizontal.dcat-step-label-horizontal.dcat-step-sm .dcat-step-item-container .dcat-step-title {
+    line-height: 24px;
+  }
+}
+
+.dcat-step-label-vertical .dcat-step-item {
+  overflow: visible;
+}
+
+.dcat-step-label-vertical .dcat-step-line {
+  margin-left: 51px;
+  padding: 3.5px 24px;
+  left: 18px;
+  top: 23px;
+}
+
+.dcat-step-label-vertical .dcat-step-content {
+  display: block;
+  width: 104px;
+  margin-top: 8px;
+  text-align: center;
+}
+
+.dcat-step-label-vertical .dcat-step-icons {
+  display: inline-block;
+  margin-left: 36px;
+}
+
+.dcat-step-label-vertical .dcat-step-title {
+  padding-right: 0;
+}
+
+.dcat-step-label-vertical .dcat-step-title:after {
+  display: none;
+}
+
+.dcat-step-label-vertical.dcat-step-sm:not(.dcat-step-dot) .dcat-step-icons {
+  margin-left: 40px;
+}
+
+.dcat-step-dot .dcat-step-title,
+.dcat-step-dot.dcat-step-sm .dcat-step-title {
+  line-height: 1.5;
+}
+
+.dcat-step-dot .dcat-step-line,
+.dcat-step-dot.dcat-step-sm .dcat-step-line {
+  top: 2px;
+  width: 100%;
+  margin: 0 0 0 70px;
+  padding: 0;
+}
+
+.dcat-step-dot .dcat-step-line:after,
+.dcat-step-dot.dcat-step-sm .dcat-step-line:after {
+  width: calc(100% - 20px);
+  height: 3px;
+  margin-left: 12px;
+}
+
+.dcat-step-dot .dcat-step-item:first-child .dcat-step-icon-dot,
+.dcat-step-dot.dcat-step-sm .dcat-step-item:first-child .dcat-step-icon-dot {
+  left: 2px;
+}
+
+.dcat-step-dot .dcat-step-icons,
+.dcat-step-dot.dcat-step-sm .dcat-step-icons {
+  width: 8px;
+  height: 8px;
+  margin-left: 67px;
+  padding-right: 0;
+  line-height: 8px;
+  background: 0 0;
+  border: 0;
+}
+
+.dcat-step-dot .dcat-step-icons .dcat-step-icon-dot,
+.dcat-step-dot.dcat-step-sm .dcat-step-icons .dcat-step-icon-dot {
+  position: relative;
+  float: left;
+  width: 100%;
+  height: 100%;
+  border-radius: 100px;
+  transition: all 0.3s;
+}
+
+.dcat-step-dot .dcat-step-icons .dcat-step-icon-dot:after,
+.dcat-step-dot.dcat-step-sm .dcat-step-icons .dcat-step-icon-dot:after {
+  position: absolute;
+  top: -12px;
+  left: -26px;
+  width: 60px;
+  height: 32px;
+  background: rgba(0, 0, 0, 0.001);
+  content: "";
+}
+
+.dcat-step-dot .dcat-step-content,
+.dcat-step-dot.dcat-step-sm .dcat-step-content {
+  width: 140px;
+}
+
+.dcat-step-dot .active .dcat-step-icons,
+.dcat-step-dot.dcat-step-sm .active .dcat-step-icons {
+  width: 10px;
+  height: 10px;
+  line-height: 10px;
+}
+
+.dcat-step-dot .active .dcat-step-icons .dcat-step-icon-dot,
+.dcat-step-dot.dcat-step-sm .active .dcat-step-icons .dcat-step-icon-dot {
+  top: -1px;
+}
+
+.dcat-step-item a {
+  font-weight: normal !important;
+}
+

resources/dist/dcat/plugins/SmartWizard/dist/js/jquery.smartWizard.js

@@ -0,0 +1,633 @@
+/*!
+ * SmartWizard v4.2.2
+ * The awesome jQuery step wizard plugin with Bootstrap support
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipuraj.me
+ *
+ * Licensed under the terms of the MIT License
+ * https://github.com/techlab/SmartWizard/blob/master/LICENSE
+ */
+
+;(function ($, window, document, undefined) {
+    "use strict";
+    // Default options
+
+    var defaults = {
+        selected: 0, // Initial selected step, 0 = first step
+        keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
+        autoAdjustHeight: true, // Automatically adjust content height
+        cycleSteps: false, // Allows to cycle the navigation of steps
+        backButtonSupport: true, // Enable the back button support
+        useURLhash: true, // Enable selection of the step based on url hash
+        showStepURLhash: true, // Show url hash based on step
+        lang: { // Language variables for button
+            next: 'Next',
+            previous: 'Previous'
+        },
+        toolbarSettings: {
+            toolbarPosition: 'bottom', // none, top, bottom, both
+            toolbarButtonPosition: 'end', // start, end
+            showNextButton: true, // show/hide a Next button
+            showPreviousButton: true, // show/hide a Previous button
+            toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
+        },
+        anchorSettings: {
+            anchorClickable: true, // Enable/Disable anchor navigation
+            enableAllAnchors: false, // Activates all anchors clickable all times
+            markDoneStep: true, // Add done css
+            markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
+            removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
+            enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
+        },
+        contentURL: null, // content url, Enables Ajax content loading. Can also set as data data-content-url on anchor
+        contentCache: true, // cache step contents, if false content is fetched always from ajax url
+        ajaxSettings: {}, // Ajax extra settings
+        disabledSteps: [], // Array Steps disabled
+        errorSteps: [], // Highlight step with errors
+        hiddenSteps: [], // Hidden steps
+        theme: 'default', // theme for the wizard, related css need to include for other than default theme
+        transitionEffect: 'none', // Effect on navigation, none/slide/fade
+        transitionSpeed: '400'
+    };
+
+    // The plugin constructor
+    function SmartWizard(element, options) {
+        // Merge user settings with default, recursively
+        this.options = $.extend(true, {}, defaults, options);
+        // Main container element
+        this.main = $(element);
+        // Navigation bar element
+        this.nav = this.main.children('ul');
+        // Step anchor elements
+        this.steps = $("li > a", this.nav);
+        // Content container
+        this.container = this.main.children('div');
+        // Content pages
+        this.pages = this.container.children('div');
+        // Active step index
+        this.current_index = null;
+        // Call initial method
+        this.init();
+    }
+
+    $.extend(SmartWizard.prototype, {
+
+        init: function () {
+            // Set the elements
+            this._setElements();
+            // Add toolbar
+            this._setToolbar();
+            // Assign plugin events
+            this._setEvents();
+
+            var idx = this.options.selected;
+            // Get selected step from the url
+            if (this.options.useURLhash) {
+                // Get step number from url hash if available
+                var hash = window.location.hash;
+                if (hash && hash.length > 0) {
+                    var elm = $("a[href*='" + hash + "']", this.nav);
+                    if (elm.length > 0) {
+                        var id = this.steps.index(elm);
+                        idx = id >= 0 ? id : idx;
+                    }
+                }
+            }
+
+            if (idx > 0 && this.options.anchorSettings.markDoneStep && this.options.anchorSettings.markAllPreviousStepsAsDone) {
+                // Mark previous steps of the active step as done
+                // this.steps.eq(idx).parent('li').prevAll().addClass("done");
+                this._setDone(this.steps.eq(idx).parent('li').prevAll());
+            }
+
+            // Show the initial step
+            this._showStep(idx);
+        },
+
+        // PRIVATE FUNCTIONS
+
+        _setElements: function () {
+            // Set the main element
+            this.main.addClass('sw-main sw-theme-' + this.options.theme);
+            // Set anchor elements
+            this.nav.addClass('step-anchor'); // nav-justified  nav-pills
+
+            // Make the anchor clickable
+            if (this.options.anchorSettings.enableAllAnchors !== false && this.options.anchorSettings.anchorClickable !== false) {
+                this.steps.parent('li').addClass('clickable');
+            }
+            // Set content container
+            this.container.addClass('sw-container tab-content');
+            // Set content pages
+            this.pages.addClass('tab-pane step-content');
+
+            // Disabled steps
+            var mi = this;
+            if (this.options.disabledSteps && this.options.disabledSteps.length > 0) {
+                $.each(this.options.disabledSteps, function (i, n) {
+                    mi.steps.eq(n).parent('li').addClass('disabled');
+                });
+            }
+            // Error steps
+            if (this.options.errorSteps && this.options.errorSteps.length > 0) {
+                $.each(this.options.errorSteps, function (i, n) {
+                    mi.steps.eq(n).parent('li').addClass('danger');
+                });
+            }
+            // Hidden steps
+            if (this.options.hiddenSteps && this.options.hiddenSteps.length > 0) {
+                $.each(this.options.hiddenSteps, function (i, n) {
+                    mi.steps.eq(n).parent('li').addClass('hidden');
+                });
+            }
+
+            return true;
+        },
+        _setToolbar: function () {
+            // Skip right away if the toolbar is not enabled
+            if (this.options.toolbarSettings.toolbarPosition === 'none') {
+                return true;
+            }
+            console.log(this.options.toolbarSettings.toolbarPosition);
+
+            // Create the toolbar buttons
+            var btnNext = this.options.toolbarSettings.showNextButton !== false ? $('<button></button>').text(this.options.lang.next).addClass('btn btn-default sw-btn-next').attr('type', 'button') : null;
+            var btnPrevious = this.options.toolbarSettings.showPreviousButton !== false ? $('<button></button>').text(this.options.lang.previous).addClass('btn btn-default sw-btn-prev').attr('type', 'button') : null;
+            var btnGroup = $('<div></div>').addClass('btn-group mr-2 sw-btn-group').attr('role', 'group').append(btnPrevious, btnNext);
+
+
+            var box1 = $('<div></div>').addClass('col-sm-2');
+            var box2 = $('<div></div>').addClass('col-sm-10').append(btnGroup);
+
+            // Add extra toolbar buttons
+            var btnGroupExtra = null;
+
+            if (this.options.toolbarSettings.toolbarExtraButtons && this.options.toolbarSettings.toolbarExtraButtons.length > 0) {
+                btnGroupExtra = $('<span></span>').addClass('mr-2 sw-btn-group-extra').attr('role', 'group');
+                $.each(this.options.toolbarSettings.toolbarExtraButtons, function (i, n) {
+                    btnGroupExtra.append(n.clone(true));
+                });
+            }
+
+            var toolbarTop, toolbarBottom;
+            // Append toolbar based on the position
+            switch (this.options.toolbarSettings.toolbarPosition) {
+                case 'top':
+                    toolbarTop = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-top justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
+                    toolbarTop.append(box1, box2);
+                    if (this.options.toolbarSettings.toolbarButtonPosition === 'left') {
+                        box2.append(btnGroupExtra);
+                    } else {
+                        box2.prepend(btnGroupExtra);
+                    }
+                    this.container.before(toolbarTop);
+                    break;
+                case 'bottom':
+                    toolbarBottom = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
+                    toolbarBottom.append(box1, box2);
+                    if (this.options.toolbarSettings.toolbarButtonPosition === 'left') {
+                        box2.append(btnGroupExtra);
+                    } else {
+                        box2.prepend(btnGroupExtra);
+                    }
+                    this.container.after(toolbarBottom);
+                    break;
+                case 'both':
+                    toolbarTop = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-top justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
+                    toolbarTop.append(box1, box2);
+                    if (this.options.toolbarSettings.toolbarButtonPosition === 'left') {
+                        box2.append(btnGroupExtra);
+                    } else {
+                        box2.prepend(btnGroupExtra);
+                    }
+                    this.container.before(toolbarTop);
+
+                    toolbarBottom = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
+                    toolbarBottom.append(box1, box2);
+                    if (this.options.toolbarSettings.toolbarButtonPosition === 'left') {
+                        box2.append(btnGroupExtra.clone(true));
+                    } else {
+                        box2.prepend(btnGroupExtra.clone(true));
+                    }
+                    this.container.after(toolbarBottom);
+                    break;
+                default:
+                    toolbarBottom = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
+                    toolbarBottom.append(box1, box2);
+                    if (this.options.toolbarSettings.toolbarButtonPosition === 'left') {
+                        box2.append(btnGroupExtra);
+                    } else {
+                        box2.prepend(btnGroupExtra);
+                    }
+                    this.container.after(toolbarBottom);
+                    break;
+            }
+            return true;
+        },
+        _setEvents: function () {
+            // Anchor click event
+            var mi = this;
+            $(this.steps).on("click", function (e) {
+                e.preventDefault();
+                if (mi.options.anchorSettings.anchorClickable === false) {
+                    return true;
+                }
+                var idx = mi.steps.index(this);
+                if (mi.options.anchorSettings.enableAnchorOnDoneStep === false && mi.steps.eq(idx).parent('li').hasClass('done')) {
+                    return true;
+                }
+
+                if (idx !== mi.current_index) {
+                    if (mi.options.anchorSettings.enableAllAnchors !== false && mi.options.anchorSettings.anchorClickable !== false) {
+                        mi._showStep(idx);
+                    } else {
+                        if (mi.steps.eq(idx).parent('li').hasClass('done')) {
+                            mi._showStep(idx);
+                        }
+                    }
+                }
+            });
+
+            // Keyboard navigation event
+            if (this.options.keyNavigation) {
+                $(document).keyup(function (e) {
+                    mi._keyNav(e);
+                });
+            }
+
+            // Back/forward browser button event
+            if (this.options.backButtonSupport) {
+                $(window).on('hashchange', function (e) {
+                    if (!mi.options.useURLhash) {
+                        return true;
+                    }
+                    if (window.location.hash) {
+                        var elm = $("a[href*='" + window.location.hash + "']", mi.nav);
+                        if (elm && elm.length > 0) {
+                            e.preventDefault();
+                            mi._showStep(mi.steps.index(elm));
+                        }
+                    }
+                });
+            }
+
+            return true;
+        },
+        _showNext: function () {
+            var si = this.current_index + 1;
+            // Find the next not disabled step
+            for (var i = si; i < this.steps.length; i++) {
+                if (!this.steps.eq(i).parent('li').hasClass('disabled') && !this.steps.eq(i).parent('li').hasClass('hidden')) {
+                    si = i;
+                    break;
+                }
+            }
+
+            if (this.steps.length <= si) {
+                if (!this.options.cycleSteps) {
+                    return false;
+                }
+                si = 0;
+            }
+            this._showStep(si);
+            return true;
+        },
+        _showPrevious: function () {
+            var si = this.current_index - 1;
+            // Find the previous not disabled step
+            for (var i = si; i >= 0; i--) {
+                if (!this.steps.eq(i).parent('li').hasClass('disabled') && !this.steps.eq(i).parent('li').hasClass('hidden')) {
+                    si = i;
+                    break;
+                }
+            }
+            if (0 > si) {
+                if (!this.options.cycleSteps) {
+                    return false;
+                }
+                si = this.steps.length - 1;
+            }
+            this._showStep(si);
+            return true;
+        },
+        _showStep: function (idx) {
+            // If step not found, skip
+            if (!this.steps.eq(idx)) {
+                return false;
+            }
+            // If current step is requested again, skip
+            if (idx == this.current_index) {
+                return false;
+            }
+            // If it is a disabled step, skip
+            if (this.steps.eq(idx).parent('li').hasClass('disabled') || this.steps.eq(idx).parent('li').hasClass('hidden')) {
+                return false;
+            }
+            // Load step content
+            this._loadStepContent(idx);
+            return true;
+        },
+        _loadStepContent: function (idx) {
+            var mi = this;
+            // Get current step elements
+            var curTab = this.steps.eq(this.current_index);
+            // Get the direction of step navigation
+            var stepDirection = '';
+            var elm = this.steps.eq(idx);
+            var contentURL = elm.data('content-url') && elm.data('content-url').length > 0 ? elm.data('content-url') : this.options.contentURL;
+
+            if (this.current_index !== null && this.current_index !== idx) {
+                stepDirection = this.current_index < idx ? "forward" : "backward";
+            }
+
+            // Trigger "leaveStep" event
+            if (this.current_index !== null && this._triggerEvent("leaveStep", [curTab, this.current_index, stepDirection]) === false) {
+                return false;
+            }
+
+            if (contentURL && contentURL.length > 0 && (!elm.data('has-content') || !this.options.contentCache)) {
+                // Get ajax content and then show step
+                var selPage = elm.length > 0 ? $(elm.attr("href"), this.main) : null;
+
+                var ajaxSettings = $.extend(true, {}, {
+                    url: contentURL,
+                    type: "POST",
+                    data: { step_number: idx },
+                    dataType: "text",
+                    beforeSend: function () {
+                        elm.parent('li').addClass('loading');
+                    },
+                    error: function (jqXHR, status, message) {
+                        elm.parent('li').removeClass('loading');
+                        $.error(message);
+                    },
+                    success: function (res) {
+                        if (res && res.length > 0) {
+                            elm.data('has-content', true);
+                            selPage.html(res);
+                        }
+                        elm.parent('li').removeClass('loading');
+                        mi._transitPage(idx);
+                    }
+                }, this.options.ajaxSettings);
+
+                $.ajax(ajaxSettings);
+            } else {
+                // Show step
+                this._transitPage(idx);
+            }
+            return true;
+        },
+        _transitPage: function (idx) {
+            var mi = this;
+            // Get current step elements
+            var curTab = this.steps.eq(this.current_index);
+            var curPage = curTab.length > 0 ? $(curTab.attr("href"), this.main) : null;
+            // Get step to show elements
+            var selTab = this.steps.eq(idx);
+            var selPage = selTab.length > 0 ? $(selTab.attr("href"), this.main) : null;
+            // Get the direction of step navigation
+            var stepDirection = '';
+            if (this.current_index !== null && this.current_index !== idx) {
+                stepDirection = this.current_index < idx ? "forward" : "backward";
+            }
+
+            var stepPosition = 'middle';
+            if (idx === 0) {
+                stepPosition = 'first';
+            } else if (idx === this.steps.length - 1) {
+                stepPosition = 'final';
+            }
+
+            this.options.transitionEffect = this.options.transitionEffect.toLowerCase();
+            this.pages.finish();
+            if (this.options.transitionEffect === 'slide') {
+                // normal slide
+                if (curPage && curPage.length > 0) {
+                    curPage.slideUp('fast', this.options.transitionEasing, function () {
+                        selPage.slideDown(mi.options.transitionSpeed, mi.options.transitionEasing);
+                    });
+                } else {
+                    selPage.slideDown(this.options.transitionSpeed, this.options.transitionEasing);
+                }
+            } else if (this.options.transitionEffect === 'fade') {
+                // normal fade
+                if (curPage && curPage.length > 0) {
+                    curPage.fadeOut('fast', this.options.transitionEasing, function () {
+                        selPage.fadeIn('fast', mi.options.transitionEasing, function () {
+                            $(this).show();
+                        });
+                    });
+                } else {
+                    selPage.fadeIn(this.options.transitionSpeed, this.options.transitionEasing, function () {
+                        $(this).show();
+                    });
+                }
+            } else {
+                if (curPage && curPage.length > 0) {
+                    curPage.hide();
+                }
+                selPage.show();
+            }
+            // Change the url hash to new step
+            this._setURLHash(selTab.attr("href"));
+            // Update controls
+            this._setAnchor(idx);
+            // Set the buttons based on the step
+            this._setButtons(idx);
+            // Fix height with content
+            this._fixHeight(idx);
+            // Update the current index
+            this.current_index = idx;
+
+            // Trigger "showStep" event
+            this._triggerEvent("showStep", [selTab, this.current_index, stepDirection, stepPosition]);
+            return true;
+        },
+        _setAnchor: function (idx) {
+            // Current step anchor > Remove other classes and add done class
+            this.steps.eq(this.current_index).parent('li').removeClass("active danger loading");
+            if (this.options.anchorSettings.markDoneStep !== false && this.current_index !== null) {
+                this._setDone(this.steps.eq(this.current_index).parent('li'));
+                if (this.options.anchorSettings.removeDoneStepOnNavigateBack !== false) {
+                    this._removeDone(this.steps.eq(idx).parent('li').nextAll());
+                }
+            }
+
+            // Next step anchor > Remove other classes and add active class
+            this.steps.eq(idx).parent('li').removeClass("danger loading").addClass("active");
+            this._removeDone(this.steps.eq(idx).parent('li'));
+            return true;
+        },
+
+        _setDone: function ($li) {
+            $li.addClass("done");
+
+            $li.find('.la-step-icon').html('<i style="vertical-align:middle"><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i>');
+        },
+
+        //
+        _removeDone: function ($lis) {
+            $lis.removeClass("done");
+
+            $lis.each(function (k, li) {
+                var $icon = $(li).find('.la-step-icon');
+
+                $icon.text($icon.data('index') + 1);
+            });
+
+
+        },
+
+        _setButtons: function (idx) {
+            // Previous/Next Button enable/disable based on step
+            if (!this.options.cycleSteps) {
+                if (0 >= idx) {
+                    $('.sw-btn-prev', this.main).addClass("disabled");
+                } else {
+                    $('.sw-btn-prev', this.main).removeClass("disabled");
+                }
+                if (this.steps.length - 1 <= idx) {
+                    $('.sw-btn-next', this.main).addClass("disabled");
+                } else {
+                    $('.sw-btn-next', this.main).removeClass("disabled");
+                }
+            }
+            return true;
+        },
+
+        // HELPER FUNCTIONS
+
+        _keyNav: function (e) {
+            var mi = this;
+            // Keyboard navigation
+            switch (e.which) {
+                case 37:
+                    // left
+                    mi._showPrevious();
+                    e.preventDefault();
+                    break;
+                case 39:
+                    // right
+                    mi._showNext();
+                    e.preventDefault();
+                    break;
+                default:
+                    return; // exit this handler for other keys
+            }
+        },
+        _fixHeight: function (idx) {
+            // Auto adjust height of the container
+            if (this.options.autoAdjustHeight) {
+                var selPage = this.steps.eq(idx).length > 0 ? $(this.steps.eq(idx).attr("href"), this.main) : null;
+                this.container.finish().animate({ minHeight: selPage.outerHeight() }, this.options.transitionSpeed, function () {});
+            }
+            return true;
+        },
+        _triggerEvent: function (name, params) {
+            // Trigger an event
+            var e = $.Event(name);
+            this.main.trigger(e, params);
+            if (e.isDefaultPrevented()) {
+                return false;
+            }
+            return e.result;
+        },
+        _setURLHash: function (hash) {
+            if (this.options.showStepURLhash && window.location.hash !== hash) {
+                window.location.hash = hash;
+            }
+        },
+
+        // PUBLIC FUNCTIONS
+
+        theme: function (v) {
+            if (this.options.theme === v) {
+                return false;
+            }
+            this.main.removeClass('sw-theme-' + this.options.theme);
+            this.options.theme = v;
+            this.main.addClass('sw-theme-' + this.options.theme);
+            // Trigger "themeChanged" event
+            this._triggerEvent("themeChanged", [this.options.theme]);
+        },
+        next: function () {
+            this._showNext();
+        },
+        prev: function () {
+            this._showPrevious();
+        },
+        reset: function () {
+            // Trigger "beginReset" event
+            if (this._triggerEvent("beginReset") === false) {
+                return false;
+            }
+
+            // Reset all elements and classes
+            this.container.stop(true);
+            this.pages.stop(true);
+            this.pages.hide();
+            this.current_index = null;
+            this._setURLHash(this.steps.eq(this.options.selected).attr("href"));
+            $(".sw-toolbar", this.main).remove();
+            this.steps.removeClass();
+            this.steps.parents('li').removeClass();
+            this.steps.data('has-content', false);
+            this.init();
+
+            // Trigger "endReset" event
+            this._triggerEvent("endReset");
+        },
+        stepState: function (stepArray, state) {
+            var mi = this;
+            stepArray = $.isArray(stepArray) ? stepArray : [stepArray];
+            var selSteps = $.grep(this.steps, function (n, i) {
+                return $.inArray(i, stepArray) !== -1 && i !== mi.current_index;
+            });
+            if (selSteps && selSteps.length > 0) {
+                switch (state) {
+                    case 'disable':
+                        $(selSteps).parents('li').addClass('disabled');
+                        break;
+                    case 'enable':
+                        $(selSteps).parents('li').removeClass('disabled');
+                        break;
+                    case 'hide':
+                        $(selSteps).parents('li').addClass('hidden');
+                        break;
+                    case 'show':
+                        $(selSteps).parents('li').removeClass('hidden');
+                        break;
+                }
+            }
+        }
+    });
+
+    // Wrapper for the plugin
+    $.fn.smartWizard = function (options) {
+        var args = arguments;
+        var instance;
+
+        if (options === undefined || typeof options === 'object') {
+            return this.each(function () {
+                if (!$.data(this, "smartWizard")) {
+                    $.data(this, "smartWizard", new SmartWizard(this, options));
+                }
+            });
+        } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
+            instance = $.data(this[0], 'smartWizard');
+
+            if (options === 'destroy') {
+                $.data(this, 'smartWizard', null);
+            }
+
+            if (instance instanceof SmartWizard && typeof instance[options] === 'function') {
+                return instance[options].apply(instance, Array.prototype.slice.call(args, 1));
+            } else {
+                return this;
+            }
+        }
+    };
+})(jQuery, window, document);

resources/views/form.blade.php → resources/views/form/container.blade.php

@@ -1,28 +1,30 @@
-@if($showHeader)
-<div class="box-header with-border">
-    <h3 class="box-title" style="line-height:30px">{!! $form->title() !!}</h3>
-    <div class="pull-right">{!! $form->renderTools() !!}</div>
-</div>
-@endif
-<div class="box-body" style="padding:{{ $tabObj->isEmpty() ? '18px 0 12px' : '0'}}">
-    @if(!$tabObj->isEmpty())
-        @include('admin::form.tab', compact('tabObj', 'form'))
-    @else
-        <div class="fields-group">
-            @if($form->hasRows())
-                @foreach($form->rows() as $row)
-                    {!! $row->render() !!}
-                @endforeach
-            @else
-                @foreach($form->fields() as $field)
-                    {!! $field->render() !!}
-                @endforeach
-            @endif
-        </div>
-    @endif
-</div>
-{!! $form->renderFooter() !!}
-
-@foreach($form->hiddenFields() as $field)
-    {!! $field->render() !!}
-@endforeach
+@if($showHeader)
+    <div class="box-header with-border mb-1">
+        <h3 class="box-title" style="line-height:30px">{!! $form->title() !!}</h3>
+        <div class="pull-right">{!! $form->renderTools() !!}</div>
+    </div>
+@endif
+<div class="box-body">
+    @if(!$tabObj->isEmpty())
+        @include('admin::form.tab', compact('tabObj', 'form'))
+    @else
+        <div class="fields-group">
+            @if($form->hasRows())
+                @foreach($form->rows() as $row)
+                    {!! $row->render() !!}
+                @endforeach
+            @else
+                @foreach($form->fields() as $field)
+                    @if(! $field->hasAttribute('block-field'))
+                    {!! $field->render() !!}
+                    @endif
+                @endforeach
+            @endif
+        </div>
+    @endif
+</div>
+{!! $form->renderFooter() !!}
+
+@foreach($form->hiddenFields() as $field)
+    {!! $field->render() !!}
+@endforeach

resources/views/form/done-step.blade.php

@@ -1,26 +1,26 @@
 <style>
-    .la-done-step {
+    .dcat-done-step {
         max-width: 560px;
         margin: 0 auto;
         padding: 24px 0 8px;
     }
-    .la-done-step .st-icon {
+    .dcat-done-step .st-icon {
         color: {{ Dcat\Admin\Admin::color()->success() }};
         font-size: 72px;
         text-align:center;
     }
-    .la-done-step .st-content {
+    .dcat-done-step .st-content {
         text-align:center;
     }
-    .la-done-step .st-title {
+    .dcat-done-step .st-title {
         font-size: 24px;
     }
-    .la-done-step .st-desc {
+    .dcat-done-step .st-desc {
         color: rgba(0,0,0,.5);
         font-size: 14px;
         line-height: 1.6;
     }
-    .la-done-step .st-btn {
+    .dcat-done-step .st-btn {
         margin: 30px 0 10px;
     }
 </style>

resources/views/form/steps.blade.php

@@ -7,41 +7,41 @@
 
 <div class="box-body">
     @if($steps->count())
-        <div class="fields-group la-step-box" style="padding: {{ $steps->getOption('padding') }};max-width: {{ $steps->getOption('width') }}">
+        <div class="fields-group dcat-step-box" style="padding: {{ $steps->getOption('padding') }};max-width: {{ $steps->getOption('width') }}">
 
-            <ul class="la-step-horizontal la-step-label-horizontal la-step ">
+            <ul class="dcat-step-horizontal dcat-step-label-horizontal dcat-step ">
                 @foreach($steps->all() as $step)
-                <li class="la-step-item">
-                    <a href="#{{ $step->getElementId() }}" class="la-step-item-container">
-                        <div class="la-step-line"></div>
-                        <div class="la-step-icons">
-                            <span class="la-step-icon" data-index="{{ $step->index() }}">{{ $step->index() + 1 }}</span>
+                <li class="dcat-step-item">
+                    <a href="#{{ $step->getElementId() }}" class="dcat-step-item-container">
+                        <div class="dcat-step-line"></div>
+                        <div class="dcat-step-icons">
+                            <span class="dcat-step-icon" data-index="{{ $step->index() }}">{{ $step->index() + 1 }}</span>
                         </div>
-                        <div class="la-step-content">
-                            <div class="la-step-title">{!! $step->title() !!}</div>
-                            <div class="la-step-desc"> {{ $step->description() }} </div>
+                        <div class="dcat-step-content">
+                            <div class="dcat-step-title">{!! $step->title() !!}</div>
+                            <div class="dcat-step-desc"> {{ $step->description() }} </div>
                         </div>
                     </a>
                 </li>
                 @endforeach
 
-                <li class="la-step-item">
-                    <a href="#{{ $steps->done()->getElementId() }}" class="la-step-item-container">
-                        <div class="la-step-line"></div>
-                        <div class="la-step-icons">
-                            <span class="la-step-icon" data-index="{{ $steps->count() }}"> {{ $steps->count() + 1 }} </span>
+                <li class="dcat-step-item">
+                    <a href="#{{ $steps->done()->getElementId() }}" class="dcat-step-item-container">
+                        <div class="dcat-step-line"></div>
+                        <div class="dcat-step-icons">
+                            <span class="dcat-step-icon" data-index="{{ $steps->count() }}"> {{ $steps->count() + 1 }} </span>
                         </div>
-                        <div class="la-step-content">
-                            <div class="la-step-title">{{ $steps->done()->title() }}</div>
-                            <div class="la-step-desc"></div>
+                        <div class="dcat-step-content">
+                            <div class="dcat-step-title">{{ $steps->done()->title() }}</div>
+                            <div class="dcat-step-desc"></div>
                         </div>
                     </a>
                 </li>
             </ul>
-            <div class="la-step-form">
+            <div class="dcat-step-form">
                 {!! $steps->build() !!}
 
-                <div id="{{ $steps->done()->getElementId() }}" class="la-done-step" style="display: none;">
+                <div id="{{ $steps->done()->getElementId() }}" class="dcat-done-step" style="display: none;">
                 </div>
             </div>
         </div>
@@ -63,7 +63,7 @@ $lastStep = $step;
 <script>
 Dcat.ready(function () {
     var form = $('#{{ $form->getElementId() }}'),
-        box = form.find('.la-step-box'),
+        box = form.find('.dcat-step-box'),
         stepInput = form.find('.current-step-input'),
         allStepInput = form.find('.all-steps-input'),
         smartWizard,
@@ -71,7 +71,7 @@ Dcat.ready(function () {
 
     var submitBtn = $('<button style="margin-left: 10px"></button>')
         .text('{{ trans('admin.submit') }}')
-        .addClass('btn btn-primary step-submit-btn disabled hide')
+        .addClass('btn btn-primary step-submit-btn disabled d-none')
         .on('click', function(){
             var $t = $(this);
 
@@ -96,7 +96,7 @@ Dcat.ready(function () {
 
                 if (state) {
                     if (data) {
-                        form.find('.la-done-step').html(data);
+                        form.find('.dcat-done-step').html(data);
                     }
 
                     smartWizard.next();
@@ -167,7 +167,7 @@ Dcat.ready(function () {
 
     // 获取步骤表单
     function getForm(idx) {
-        return box.find('.la-step-form [data-toggle="validator"]').eq(idx);
+        return box.find('.dcat-step-form [data-toggle="validator"]').eq(idx);
     }
 
     // 构建参数
@@ -258,11 +258,11 @@ Dcat.ready(function () {
             sbm = box.find('.step-submit-btn');
 
         if (smartWizard.current_index == last) {
-            sbm.removeClass('disabled hide');
+            sbm.removeClass('disabled d-none');
             next.hide();
             prev.show();
         } else {
-            sbm.addClass('disabled hide');
+            sbm.addClass('disabled d-none');
             if (smartWizard.current_index !== 0) {
                 prev.show();
             } else {

resources/views/show.blade.php

@@ -1,11 +0,0 @@
-<div class="row">
-    <div class="col-md-12">{!! $panel !!}</div>
-
-    @if($relations->count())
-    <div class="col-md-12 show-relation-container" style="top:10px">
-        @foreach($relations as $relation)
-            {!!  $relation->render() !!}
-        @endforeach
-    </div>
-    @endif
-</div>

resources/views/show/container.blade.php

@@ -0,0 +1,11 @@
+<div class="row">
+    <div class="col-md-12">{!! $panel !!}</div>
+
+    @if($relations->count())
+        <div class="col-md-12 show-relation-container" style="top:10px">
+            @foreach($relations as $relation)
+                {!!  $relation->render() !!}
+            @endforeach
+        </div>
+    @endif
+</div>

resources/views/tree.blade.php → resources/views/tree/container.blade.php

@@ -1,50 +1,50 @@
-<div class="card-header pb-1">
-
-    <div>
-        <div class="btn-group" style="margin-right:3px">
-            <button class="btn btn-primary btn-sm {{ $id }}-tree-tools" data-action="expand">
-                <i class="feather icon-plus-square"></i>&nbsp;<span class="d-none d-sm-inline">{{ trans('admin.expand') }}</span>
-            </button>
-            <button class="btn btn-primary btn-sm {{ $id }}-tree-tools" data-action="collapse">
-                <i class="feather icon-minus-square"></i><span class="d-none d-sm-inline">&nbsp;{{ trans('admin.collapse') }}</span>
-            </button>
-        </div>
-
-        @if($useSave)
-            &nbsp;<div class="btn-group" style="margin-right:3px">
-                <button class="btn btn-primary btn-sm {{ $id }}-save" ><i class="feather icon-save"></i><span class="d-none d-sm-inline">&nbsp;{{ trans('admin.save') }}</span></button>
-            </div>
-        @endif
-
-        @if($useRefresh)
-            &nbsp;<div class="btn-group" style="margin-right:3px">
-                <button class="btn btn-primary btn-sm" data-action="refresh" ><i class="feather icon-refresh-cw"></i><span class="d-none d-sm-inline">&nbsp;{{ trans('admin.refresh') }}</span></button>
-            </div>
-        @endif
-
-        @if($tools)
-            &nbsp;<div class="btn-group" style="margin-right:3px">
-                {!! $tools !!}
-            </div>
-        @endif
-    </div>
-
-    <div>
-        {!! $createButton !!}
-    </div>
-
-</div>
-
-<div class="card-body table-responsive">
-    <div class="dd" id="{{ $id }}">
-        <ol class="dd-list">
-            @if($items)
-                @foreach($items as $branch)
-                    @include($branchView)
-                @endforeach
-            @else
-                <span class="help-block" style="margin-bottom:0"><i class="feather icon-alert-circle"></i>&nbsp;{{ trans('admin.no_data') }}</span>
-            @endif
-        </ol>
-    </div>
-</div>
+<div class="card-header pb-1">
+
+    <div>
+        <div class="btn-group" style="margin-right:3px">
+            <button class="btn btn-primary btn-sm {{ $id }}-tree-tools" data-action="expand">
+                <i class="feather icon-plus-square"></i>&nbsp;<span class="d-none d-sm-inline">{{ trans('admin.expand') }}</span>
+            </button>
+            <button class="btn btn-primary btn-sm {{ $id }}-tree-tools" data-action="collapse">
+                <i class="feather icon-minus-square"></i><span class="d-none d-sm-inline">&nbsp;{{ trans('admin.collapse') }}</span>
+            </button>
+        </div>
+
+        @if($useSave)
+            &nbsp;<div class="btn-group" style="margin-right:3px">
+                <button class="btn btn-primary btn-sm {{ $id }}-save" ><i class="feather icon-save"></i><span class="d-none d-sm-inline">&nbsp;{{ trans('admin.save') }}</span></button>
+            </div>
+        @endif
+
+        @if($useRefresh)
+            &nbsp;<div class="btn-group" style="margin-right:3px">
+                <button class="btn btn-primary btn-sm" data-action="refresh" ><i class="feather icon-refresh-cw"></i><span class="d-none d-sm-inline">&nbsp;{{ trans('admin.refresh') }}</span></button>
+            </div>
+        @endif
+
+        @if($tools)
+            &nbsp;<div class="btn-group" style="margin-right:3px">
+                {!! $tools !!}
+            </div>
+        @endif
+    </div>
+
+    <div>
+        {!! $createButton !!}
+    </div>
+
+</div>
+
+<div class="card-body table-responsive">
+    <div class="dd" id="{{ $id }}">
+        <ol class="dd-list">
+            @if($items)
+                @foreach($items as $branch)
+                    @include($branchView)
+                @endforeach
+            @else
+                <span class="help-block" style="margin-bottom:0"><i class="feather icon-alert-circle"></i>&nbsp;{{ trans('admin.no_data') }}</span>
+            @endif
+        </ol>
+    </div>
+</div>

resources/views/widgets/form.blade.php

@@ -12,7 +12,7 @@
     @endif
     
     <!-- /.box-body -->
-    @if(count($buttons) > 0)
+    @if($buttons['submit'] || $buttons['reset'])
     <div class="box-footer row" style="display: flex">
         <div class="col-md-2"> &nbsp;</div>
 

src/Form.php

@@ -1598,12 +1598,18 @@ class Form implements Renderable
     /**
      * @param int     $width
      * @param Closure $callback
+     *
+     * @return $this
      */
     public function block(int $width, \Closure $callback)
     {
         $layout = $this->builder->layout();
 
-        $layout->column($width, $callback($layout->form()));
+        $callback($form = $layout->form());
+
+        $layout->column($width, $form);
+
+        return $this;
     }
 
     /**
@@ -1633,7 +1639,7 @@ class Form implements Renderable
      *
      * @return bool|void
      */
-    public function inModal(\Closure $callback = null)
+    public function inDialog(\Closure $callback = null)
     {
         if (! $callback) {
             return DialogForm::is();

src/Form/BlockForm.php

@@ -0,0 +1,91 @@
+<?php
+
+namespace Dcat\Admin\Form;
+
+use Dcat\Admin\Form;
+use Dcat\Admin\Support\Helper;
+use Dcat\Admin\Widgets\Form as WidgetForm;
+
+class BlockForm extends WidgetForm
+{
+    /**
+     * @var Form
+     */
+    protected $form;
+
+    /**
+     * @var Builder
+     */
+    protected $builder;
+
+    /**
+     * @var string
+     */
+    protected $title;
+
+    public function __construct(Form $form)
+    {
+        $this->form = $form;
+        $this->builder = $form->builder();
+
+        $this->initFields();
+
+        $this->initFormAttributes();
+    }
+
+    public function title($title)
+    {
+        $this->title = $title;
+
+        return $this;
+    }
+
+    /**
+     * Add a form field to form.
+     *
+     * @param Field $field
+     *
+     * @return $this
+     */
+    public function pushField(Field &$field)
+    {
+        $this->form->builder()->fields()->push($field);
+        $this->fields->push($field);
+
+        $field->attribute('block-field', true);
+
+        $field->setForm($this->form);
+        $field->width($this->width['field'], $this->width['label']);
+
+        $field::collectAssets();
+
+        return $this;
+    }
+
+    public function render()
+    {
+        $view = Helper::render(parent::render());
+
+        $style = $this->title ? '' : 'padding-top: 13px';
+
+        return <<<HTML
+<div class='box' style="{$style}">
+    {$this->renderHeader()} 
+    {$view}
+</div>
+HTML;
+    }
+
+    protected function renderHeader()
+    {
+        if (! $this->title) {
+            return;
+        }
+
+        return <<<HTML
+<div class="box-header with-border mb-1">
+    <h3 class="box-title">{$this->title}</h3>
+</div>
+HTML;
+    }
+}

src/Form/Builder.php

@@ -93,7 +93,7 @@ class Builder
      *
      * @var string
      */
-    protected $view = 'admin::form';
+    protected $view = 'admin::form.container';
 
     /**
      * Form title.
@@ -103,7 +103,7 @@ class Builder
     protected $title;
 
     /**
-     * @var MultipleForm[]
+     * @var BlockForm[]
      */
     protected $multipleForms = [];
 
@@ -203,9 +203,9 @@ class Builder
     }
 
     /**
-     * @param MultipleForm $form
+     * @param BlockForm $form
      */
-    public function addForm(MultipleForm $form)
+    public function addForm(BlockForm $form)
     {
         $this->multipleForms[] = $form;
 

src/Form/Field.php

@@ -678,6 +678,16 @@ class Field implements Renderable
         return $this;
     }
 
+    /**
+     * @param string $key
+     *
+     * @return bool
+     */
+    public function hasAttribute(string $key)
+    {
+        return array_key_exists($key, $this->attributes);
+    }
+
     /**
      * Specifies a regular expression against which to validate the value of the input.
      *

src/Form/Layout.php

@@ -51,11 +51,11 @@ class Layout
     /**
      * @param \Closure|null $callback
      *
-     * @return MultipleForm
+     * @return BlockForm
      */
     public function form(\Closure $callback = null)
     {
-        $form = new Form\MultipleForm($this->form);
+        $form = new Form\BlockForm($this->form);
 
         $this->form->builder()->addForm($form);
 

src/Form/MultipleForm.php

@@ -1,47 +0,0 @@
-<?php
-
-namespace Dcat\Admin\Form;
-
-use Dcat\Admin\Form;
-use Dcat\Admin\Widgets\Form as WidgetForm;
-
-class MultipleForm extends WidgetForm
-{
-    /**
-     * @var Form
-     */
-    protected $form;
-
-    /**
-     * @var Builder
-     */
-    protected $builder;
-
-    public function __construct(Form $form)
-    {
-        $this->form = $form;
-        $this->builder = $form->builder();
-
-        $this->initFields();
-
-        $this->initFormAttributes();
-    }
-
-    /**
-     * Add a form field to form.
-     *
-     * @param Field $field
-     *
-     * @return $this
-     */
-    public function pushField(Field &$field)
-    {
-        $this->fields->push($field);
-
-        $field->setForm($this->form);
-
-        $field::collectAssets();
-
-        return $this;
-    }
-}

src/Form/Step/Builder.php

@@ -3,8 +3,8 @@
 namespace Dcat\Admin\Form\Step;
 
 use Closure;
-use Dcat\Admin\Contracts\UploadField as UploadFieldInterface;
 use Dcat\Admin\Admin;
+use Dcat\Admin\Form\StepForm as Form;
 use Dcat\Admin\Form as ParentForm;
 use Illuminate\Support\Arr;
 
@@ -334,8 +334,7 @@ class Builder
      */
     protected function collectAssets()
     {
-        Admin::js('vendor/dcat-admin/SmartWizard/dist/js/jquery.smartWizard.min.js');
-        Admin::css('vendor/dcat-admin/SmartWizard/dist/css/step.min.css');
+        Admin::collectAssets('@smart-wizard');
     }
 
     /**

src/Form/Step/Form.php → src/Form/StepForm.php

@@ -1,11 +1,11 @@
 <?php
 
-namespace Dcat\Admin\Form\Step;
+namespace Dcat\Admin\Form;
 
 use Dcat\Admin\Form as ParentForm;
 use Dcat\Admin\Widgets\Form as WidgetForm;
 
-class Form extends WidgetForm
+class StepForm extends WidgetForm
 {
     /**
      * @var string

src/Layout/Asset.php

@@ -171,6 +171,10 @@ class Asset
         '@apex-charts' => [
             'js' => '@admin/vendors/js/charts/apexcharts.min.js',
         ],
+        '@smart-wizard' => [
+            'js' => '@admin/dcat/plugins/SmartWizard/dist/js/jquery.smartWizard.min.js',
+            'css' => '@admin/dcat/extra/step.css',
+        ],
     ];
 
     /**

src/Show.php

@@ -31,7 +31,7 @@ class Show implements Renderable
     /**
      * @var string
      */
-    protected $view = 'admin::show';
+    protected $view = 'admin::show.container';
 
     /**
      * @var Repository

src/Tree.php

@@ -46,7 +46,7 @@ class Tree implements Renderable
      * @var string
      */
     protected $view = [
-        'tree'   => 'admin::tree',
+        'tree'   => 'admin::tree.container',
         'branch' => 'admin::tree.branch',
     ];