tab form

resources/assets/dcat/js/extensions/Form.js

@@ -23,11 +23,11 @@ class Form {
             // tab表单css选择器
             tabSelector: '.tab-pane',
             // 错误信息模板
-            errorTemplate: '<label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {message}</label><br/>',
+            errorTemplate: '<label class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {message}</label><br/>',
             // 保存成功后自动跳转
             autoRedirect: false,
-            // 不允许自动移除表单错误信息
-            disableAutoRemoveError: false,
+            // 自动移除表单错误信息
+            autoRemoveError: true,
             // 表单提交之前事件监听，返回false可以中止表单继续提交
             before: function () {},
             // 表单提交之后事件监听，返回false可以中止后续逻辑
@@ -152,10 +152,19 @@ class Form {
     showError($form, column, errors) {
         let _this = this,
             $field = _this.queryFieldByName($form, column),
+            $group = $field.closest(_this.options.groupSelector),
             render = function (msg) {
-                $group.find(_this.options.errorContainerSelector).first().append(
-                    _this.options.errorTemplate.replace('{message}', msg)
-                );
+                $group.addClass(_this.options.errorClass);
+
+                if (typeof msg === 'string') {
+                    msg = [msg];
+                }
+
+                for (let j in msg) {
+                    $group.find(_this.options.errorContainerSelector).first().append(
+                        _this.options.errorTemplate.replace('{message}', msg[j])
+                    );
+                }
             };
 
         queryTabTitleError(_this, $field).removeClass('d-none');
@@ -170,19 +179,9 @@ class Form {
             return;
         }
 
-        let $group = $field.closest(_this.options.groupSelector), j;
-
-        $group.addClass(_this.options.errorClass);
-
-        if (typeof errors === 'string') {
-            render(errors)
-        } else {
-            for (j in errors) {
-                render(errors[j])
-            }
-        }
+        render(errors);
 
-        if (! _this.options.disableAutoRemoveError) {
+        if (_this.options.autoRemoveError) {
             removeErrorWhenValChanged(_this, $field, column);
         }
 
@@ -251,11 +250,12 @@ class Form {
 
     // 移除给定字段的错误信息
     removeError($field, column) {
-        let parent = $field.parents(this.options.groupSelector),
-            errorClass = this.options.errorClass;
+        let options = this.options,
+            parent = $field.parents(options.groupSelector),
+            errorClass = this.errorClass;
 
         parent.removeClass(errorClass);
-        parent.find('error').html('');
+        parent.find(options.errorContainerSelector).html('');
 
         // tab页下没有错误信息了，隐藏title的错误图标
         let tab;
@@ -312,33 +312,32 @@ Form.submitted = function (success, error) {
 
 // 当字段值变化时移除错误信息
 function removeErrorWhenValChanged(form, $field, column) {
-    let _this = form,
-        removeError = function () {
-            _this.removeError($field, column)
-        };
-
-    $field.one('change', removeError);
-    $field.off('blur', removeError).on('blur', function () {
-        if (_this.isValueChanged($field, column))  {
-            removeError();
+    let remove = function () {
+        form.removeError($field, column)
+    };
+
+    $field.one('change', remove);
+    $field.off('blur', remove).on('blur', function () {
+        if (form.isValueChanged($field, column))  {
+            remove();
         }
     });
 
     // 表单值发生变化就移除错误信息
-    function handle() {
+    let interval = function () {
         setTimeout(function () {
             if (! $field.length) {
                 return;
             }
-            if (_this.isValueChanged($field, column)) {
-                return removeError();
+            if (form.isValueChanged($field, column)) {
+                return remove();
             }
 
-            handle();
+            interval();
         }, 500);
-    }
+    };
 
-    handle();
+    interval();
 }
 
 
@@ -348,17 +347,17 @@ function getTabId(form, $field) {
 
 function queryTabByField(form, $field)
 {
-    let id = getTabId(form, $field);
+    let tabId = getTabId(form, $field);
 
-    if (! id) {
+    if (! tabId) {
         return $('<none></none>');
     }
 
-    return $('#' + id);
+    return $(`a[href="#${tabId}"]`);
 }
 
 function queryTabTitleError(form, $field) {
-    return queryTabByField(form, $field).find('.text-danger');
+    return queryTabByField(form, $field).find('.has-tab-error');
 }
 
 // 触发钩子事件

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

@@ -30,7 +30,7 @@
   }
 }
 
-.nav-theme-primary, .nav-theme-success, .nav-theme-info, .nav-theme-danger, .nav-theme-default {
+.nav-theme-primary, .nav-theme-success, .nav-theme-info, .nav-theme-danger {
   .nav.nav-tabs {
     background: $primary;
     padding-left: 10px;

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

@@ -2698,8 +2698,7 @@ table.dataTable.complex-headers tfoot td {
 .nav-theme-primary .nav.nav-tabs,
 .nav-theme-success .nav.nav-tabs,
 .nav-theme-info .nav.nav-tabs,
-.nav-theme-danger .nav.nav-tabs,
-.nav-theme-default .nav.nav-tabs {
+.nav-theme-danger .nav.nav-tabs {
   background: #5c6bc6;
   padding-left: 10px;
   border-radius: 0.4rem;
@@ -2709,32 +2708,28 @@ table.dataTable.complex-headers tfoot td {
 .nav-theme-primary .nav.nav-tabs .nav-item .nav-link,
 .nav-theme-success .nav.nav-tabs .nav-item .nav-link,
 .nav-theme-info .nav.nav-tabs .nav-item .nav-link,
-.nav-theme-danger .nav.nav-tabs .nav-item .nav-link,
-.nav-theme-default .nav.nav-tabs .nav-item .nav-link {
+.nav-theme-danger .nav.nav-tabs .nav-item .nav-link {
   color: rgba(255, 255, 255, 0.5);
 }
 
 .nav-theme-primary .nav.nav-tabs .nav-item .nav-link.active,
 .nav-theme-success .nav.nav-tabs .nav-item .nav-link.active,
 .nav-theme-info .nav.nav-tabs .nav-item .nav-link.active,
-.nav-theme-danger .nav.nav-tabs .nav-item .nav-link.active,
-.nav-theme-default .nav.nav-tabs .nav-item .nav-link.active {
+.nav-theme-danger .nav.nav-tabs .nav-item .nav-link.active {
   color: #fff;
 }
 
 .nav-theme-primary .nav.nav-tabs .nav-item .nav-link.active:after,
 .nav-theme-success .nav.nav-tabs .nav-item .nav-link.active:after,
 .nav-theme-info .nav.nav-tabs .nav-item .nav-link.active:after,
-.nav-theme-danger .nav.nav-tabs .nav-item .nav-link.active:after,
-.nav-theme-default .nav.nav-tabs .nav-item .nav-link.active:after {
+.nav-theme-danger .nav.nav-tabs .nav-item .nav-link.active:after {
   background: #fff !important;
 }
 
 .nav-theme-primary .nav-tabs .nav-item,
 .nav-theme-success .nav-tabs .nav-item,
 .nav-theme-info .nav-tabs .nav-item,
-.nav-theme-danger .nav-tabs .nav-item,
-.nav-theme-default .nav-tabs .nav-item {
+.nav-theme-danger .nav-tabs .nav-item {
   margin-bottom: 2px;
 }
 

resources/dist/dcat/js/dcat-app.js

@@ -1597,11 +1597,11 @@ var Form = /*#__PURE__*/function () {
       // tab表单css选择器
       tabSelector: '.tab-pane',
       // 错误信息模板
-      errorTemplate: '<label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {message}</label><br/>',
+      errorTemplate: '<label class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {message}</label><br/>',
       // 保存成功后自动跳转
       autoRedirect: false,
-      // 不允许自动移除表单错误信息
-      disableAutoRemoveError: false,
+      // 自动移除表单错误信息
+      autoRemoveError: true,
       // 表单提交之前事件监听，返回false可以中止表单继续提交
       before: function before() {},
       // 表单提交之后事件监听，返回false可以中止后续逻辑
@@ -1727,8 +1727,17 @@ var Form = /*#__PURE__*/function () {
     value: function showError($form, column, errors) {
       var _this = this,
           $field = _this.queryFieldByName($form, column),
+          $group = $field.closest(_this.options.groupSelector),
           render = function render(msg) {
-        $group.find(_this.options.errorContainerSelector).first().append(_this.options.errorTemplate.replace('{message}', msg));
+        $group.addClass(_this.options.errorClass);
+
+        if (typeof msg === 'string') {
+          msg = [msg];
+        }
+
+        for (var j in msg) {
+          $group.find(_this.options.errorContainerSelector).first().append(_this.options.errorTemplate.replace('{message}', msg[j]));
+        }
       };
 
       queryTabTitleError(_this, $field).removeClass('d-none'); // 保存字段原始数据
@@ -1743,19 +1752,9 @@ var Form = /*#__PURE__*/function () {
         return;
       }
 
-      var $group = $field.closest(_this.options.groupSelector),
-          j;
-      $group.addClass(_this.options.errorClass);
+      render(errors);
 
-      if (typeof errors === 'string') {
-        render(errors);
-      } else {
-        for (j in errors) {
-          render(errors[j]);
-        }
-      }
-
-      if (!_this.options.disableAutoRemoveError) {
+      if (_this.options.autoRemoveError) {
         removeErrorWhenValChanged(_this, $field, column);
       }
 
@@ -1829,10 +1828,11 @@ var Form = /*#__PURE__*/function () {
   }, {
     key: "removeError",
     value: function removeError($field, column) {
-      var parent = $field.parents(this.options.groupSelector),
-          errorClass = this.options.errorClass;
+      var options = this.options,
+          parent = $field.parents(options.groupSelector),
+          errorClass = this.errorClass;
       parent.removeClass(errorClass);
-      parent.find('error').html(''); // tab页下没有错误信息了，隐藏title的错误图标
+      parent.find(options.errorContainerSelector).html(''); // tab页下没有错误信息了，隐藏title的错误图标
 
       var tab;
 
@@ -1892,33 +1892,32 @@ Form.submitted = function (success, error) {
 
 
 function removeErrorWhenValChanged(form, $field, column) {
-  var _this = form,
-      removeError = function removeError() {
-    _this.removeError($field, column);
+  var remove = function remove() {
+    form.removeError($field, column);
   };
 
-  $field.one('change', removeError);
-  $field.off('blur', removeError).on('blur', function () {
-    if (_this.isValueChanged($field, column)) {
-      removeError();
+  $field.one('change', remove);
+  $field.off('blur', remove).on('blur', function () {
+    if (form.isValueChanged($field, column)) {
+      remove();
     }
   }); // 表单值发生变化就移除错误信息
 
-  function handle() {
+  var interval = function interval() {
     setTimeout(function () {
       if (!$field.length) {
         return;
       }
 
-      if (_this.isValueChanged($field, column)) {
-        return removeError();
+      if (form.isValueChanged($field, column)) {
+        return remove();
       }
 
-      handle();
+      interval();
     }, 500);
-  }
+  };
 
-  handle();
+  interval();
 }
 
 function getTabId(form, $field) {
@@ -1926,17 +1925,17 @@ function getTabId(form, $field) {
 }
 
 function queryTabByField(form, $field) {
-  var id = getTabId(form, $field);
+  var tabId = getTabId(form, $field);
 
-  if (!id) {
+  if (!tabId) {
     return $('<none></none>');
   }
 
-  return $('#' + id);
+  return $("a[href=\"#".concat(tabId, "\"]"));
 }
 
 function queryTabTitleError(form, $field) {
-  return queryTabByField(form, $field).find('.text-danger');
+  return queryTabByField(form, $field).find('.has-tab-error');
 } // 触发钩子事件
 
 

resources/views/form/error.blade.php

@@ -1,17 +1,17 @@
-<div class="help-block  with-errors"></div>
+<div class="help-block with-errors"></div>
 
 @if(is_array($errorKey))
     @foreach($errorKey as $key => $col)
         @if($errors->has($col.$key))
             @foreach($errors->get($col.$key) as $message)
-                <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$message}}</label><br/>
+                <label class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</label><br/>
             @endforeach
         @endif
     @endforeach
 @else
     @if($errors->has($errorKey))
         @foreach($errors->get($errorKey) as $message)
-            <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$message}}</label><br/>
+            <label class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</label><br/>
         @endforeach
     @endif
 @endif

resources/views/form/keyvalue.blade.php

@@ -30,7 +30,7 @@
                                 <error></error>
                                 @if($errors->has($keysErrorKey))
                                     @foreach($errors->get($keysErrorKey) as $message)
-                                        <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$message}}</label><br/>
+                                        <label class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</label><br/>
                                     @endforeach
                                 @endif
                                 <input name="{{ $name }}[keys][{{ (int) $k }}]" value="{{ old("{$column}.keys.{$k}", $k) }}" class="form-control" required/>
@@ -44,7 +44,7 @@
                                 <error></error>
                                 @if($errors->has($valsErrorKey))
                                     @foreach($errors->get($valsErrorKey) as $message)
-                                        <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$message}}</label><br/>
+                                        <label class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</label><br/>
                                     @endforeach
                                 @endif
                                 <input name="{{ $name }}[values][{{ (int) $k }}]" value="{{ old("{$column}.values.{$k}", $v) }}" class="form-control" />

resources/views/form/listfield.blade.php

@@ -8,7 +8,7 @@
 
         @if($errors->has($listErrorKey))
             @foreach($errors->get($listErrorKey) as $message)
-                <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$message}}</label><br/>
+                <label class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</label><br/>
             @endforeach
         @endif
         <error></error>
@@ -32,7 +32,7 @@
                                 <error></error>
                                 @if($errors->has($itemErrorKey))
                                     @foreach($errors->get($itemErrorKey) as $message)
-                                        <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$message}}</label><br/>
+                                        <label class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</label><br/>
                                     @endforeach
                                 @endif
                             </div>

resources/views/form/tab.blade.php

@@ -1,19 +1,16 @@
-<div class="nav-tabs-default">
-    <ul class="nav nav-tabs">
-
+<div>
+    <ul class="nav nav-tabs pl-1">
         @foreach($tabObj->getTabs() as $tab)
-            <li {{ $tab['active'] ? 'class=active' : '' }}>
-                <a href="#tab-{{ $tab['id'] }}" data-toggle="tab">
-                    {!! $tab['title'] !!} <i class="fa fa-exclamation-circle text-red hide"></i>
+            <li class="nav-item">
+                <a class="nav-link {{ $tab['active'] ? 'active' : '' }}" href="#{{ $tab['id'] }}" data-toggle="tab">
+                    {!! $tab['title'] !!} &nbsp;<i class="feather icon-alert-circle has-tab-error text-danger d-none"></i>
                 </a>
             </li>
         @endforeach
-
     </ul>
-    <div class="tab-content fields-group" style="padding:18px 0">
-
+    <div class="tab-content fields-group mt-2" style="padding:18px 0">
         @foreach($tabObj->getTabs() as $tab)
-            <div class="tab-pane {{ $tab['active'] ? 'active' : '' }}" id="tab-{{ $tab['id'] }}">
+            <div class="tab-pane {{ $tab['active'] ? 'active' : '' }}" id="{{ $tab['id'] }}">
                 @foreach($tab['fields'] as $field)
                     {!! $field->render() !!}
                 @endforeach

resources/views/pages/login.blade.php

@@ -44,7 +44,7 @@
                                         @if($errors->has('username'))
                                         <span class="invalid-feedback text-danger" role="alert">
                                             @foreach($errors->get('username') as $message)
-                                                <span class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$message}}</span><br>
+                                                <span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br>
                                             @endforeach
                                         </span>
                                         @endif
@@ -72,7 +72,7 @@
                                         @if($errors->has('password'))
                                             <span class="invalid-feedback text-danger" role="alert">
                                             @foreach($errors->get('password') as $message)
-                                                    <span class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$message}}</span><br>
+                                                    <span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br>
                                             @endforeach
                                             </span>
                                         @endif

src/Extension/Grid/CreateExtensionButton.php

@@ -1,107 +0,0 @@
-<?php
-
-namespace Dcat\Admin\Extension\Grid;
-
-use Dcat\Admin\Admin;
-use Illuminate\Contracts\Support\Renderable;
-
-class CreateExtensionButton implements Renderable
-{
-    public function render()
-    {
-        Admin::style(
-            <<<'CSS'
-.popover {max-width:350px}
-CSS
-        );
-
-        $this->setupScript();
-
-        $label = trans('admin.new');
-
-        return "<button id='create-extension' class='btn btn-outline-primary'><i class=\"feather icon-plus\"></i> &nbsp;$label</button>";
-    }
-
-    protected function setupScript()
-    {
-        $submit = trans('admin.submit');
-
-        $url = admin_url('helpers/extensions/create');
-
-        Admin::script(
-            <<<JS
-var content = '<div class="form-group row" style="margin-top:5px;width: 200px"><error></error>'
-    + '<div class="input-group input-group-sm"><span class="input-group-addon"><i class="ti-pencil"></i></span>'
-    + '<input type="text" class="form-control " placeholder="Package Name" name="name" ></div></div>'
-    + '<div class="form-group row"><error></error>'
-    + '<div class="input-group input-group-sm"><span class="input-group-addon"><i class="ti-pencil"></i></span>'
-    + '<input type="text" class="form-control " placeholder="Namespace" name="namespace" value="Dcat\\\\Admin\\\\Extension\\\\Your name" ></div></div>'
-    + '<button id="submit-create" class="btn btn-primary btn-sm waves-effect waves-light">{$submit}</button>';            
-            
-$('#create-extension').popover({
-    html: true,
-    title: '',
-    content: content,
-});
-
-$('#create-extension').on('shown.bs.popover', function () {
-    var errTpl = '<label class="control-label"><i class="fa fa-times-circle-o"></i> {msg}</label>';
-    $('#submit-create').click(function () {
-        var _name = $('input[name="name"]'),
-            _namespace = $('input[name="namespace"]'),
-            name = _name.val(), 
-            namespace = _namespace.val();
-        
-        if (!name) {
-            return displayError(_name, 'The Name is required.');
-        }
-        if (!isValid(name) || name.indexOf('/') === -1) {
-            return displayError(_name, 'The "'+name+'" is not a valid package name, please input a name like ":vendor/:name".');
-        }
-        removeError(_name);
-        
-        if (!namespace) {
-            return displayError(_namespace, 'The Namespace is required.');
-        }
-         if (!isValid(namespace)) {
-            return displayError(_namespace, 'The "'+namespace+'" is not a valid namespace.');
-        }
-        removeError(_namespace);
-        
-        $('.popover').loading();
-        $.post('$url', {
-            _token: Dcat.token,
-            name: name,
-            namespace: namespace,
-        }, function (response) {
-            $('.popover').loading(false);
-        
-           if (!response.status) {
-               Dcat.error(response.message);
-           } else {
-               $('#create-extension').popover('hide');
-           }
-           
-           $('.content').prepend('<div class="row"><div class="col-md-12">'+response.content+'</div></div>');
-        });
-        
-    });
-    
-    function displayError(obj, msg) {
-        obj.parents('.form-group').addClass('has-error');
-        obj.parents('.form-group').find('error').html(errTpl.replace('{msg}', msg));
-    }
-    
-    function removeError(obj) {
-        obj.parents('.form-group').removeClass('has-error');
-        obj.parents('.form-group').find('error').html('');
-    }
-    
-    function isValid(str) { 
-        return /^[\w-\/\\\\]+$/.test(str); 
-    }
-});
-JS
-        );
-    }
-}

src/Form/Field/HasMany.php

@@ -552,7 +552,7 @@ $('#has-many-{$this->column} > .header').off('click', '.add').on('click', '.add'
 if ($('.has-error').length) {
     $('.has-error').parent('.tab-pane').each(function () {
         var tabId = '#'+$(this).attr('id');
-        $('li a[href="'+tabId+'"] i').removeClass('hide');
+        $('li a[href="'+tabId+'"] i').removeClass('d-none');
     });
     
     var first = $('.has-error:first').parent().attr('id');