chip/label

update

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

@@ -0,0 +1,13 @@
+.label {
+  display: inline;
+  padding: .24em .6em .34em;
+  font-size: 87%;
+  font-weight: 600;
+  line-height: 1;
+  color: $white;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+  cursor: pointer;
+}

resources/assets/dcat/sass/dcat-app.scss

@@ -63,6 +63,8 @@ ol, ul, dl {
 @import "./components/grid-selector";
 // box
 @import "./components/box";
+// label
+@import "./components/label";
 
 body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
    font-size: 1.3rem;

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

@@ -2593,6 +2593,20 @@ table.dataTable.complex-headers tfoot td {
   border: 1px solid #d9d9d9;
 }
 
+.label {
+  display: inline;
+  padding: 0.24em 0.6em 0.34em;
+  font-size: 87%;
+  font-weight: 600;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25em;
+  cursor: pointer;
+}
+
 body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
   font-size: 1.3rem;
 }

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

@@ -133,6 +133,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 var $ = jQuery,
     _pjaxResponded = false,
     bootingCallbacks = [],
+    _actions = {},
     defaultOptions = {
   pjax_container_selector: '#pjax-container'
 };
@@ -340,6 +341,20 @@ var Dcat = /*#__PURE__*/function () {
     key: "Translator",
     value: function Translator(lang) {
       return new _extensions_Translator__WEBPACK_IMPORTED_MODULE_1__["default"](this, lang);
+    } // 注册动作
+
+  }, {
+    key: "addAction",
+    value: function addAction(name, callback) {
+      if (typeof callback === 'function') {
+        _actions[name] = callback;
+      }
+    } // 获取动作
+
+  }, {
+    key: "actions",
+    value: function actions() {
+      return _actions;
     }
   }]);
 
@@ -362,17 +377,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return DataActions; });
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var actions = {
+var defaultActions = {
   // 刷新按钮
-  refreshAction: function refreshAction(Dcat) {
-    $('[data-action="refresh"]').off('click').click(function () {
+  refresh: function refresh($action, Dcat) {
+    return function () {
       Dcat.reload($(this).data('url'));
-    });
+    };
   },
   // 删除按钮初始化
-  deleteAction: function deleteAction(Dcat) {
+  "delete": function _delete($action, Dcat) {
     var lang = Dcat.lang;
-    $('[data-action="delete"]').off('click').click(function () {
+    return function () {
       var url = $(this).data('url'),
           redirect = $(this).data('redirect');
       Dcat.confirm(lang.delete_confirm, url, function () {
@@ -396,11 +411,11 @@ var actions = {
           }
         });
       });
-    });
+    };
   },
   // 批量删除按钮初始化
-  batchDeleteAction: function batchDeleteAction(Dcat) {
-    $('[data-action="batch-delete"]').off('click').on('click', function () {
+  'batch-delete': function batchDelete($action, Dcat) {
+    return function () {
       var url = $(this).data('url'),
           name = $(this).data('name'),
           keys = Dcat.grid.selected(name),
@@ -431,20 +446,21 @@ var actions = {
           }
         });
       });
-    });
+    };
   },
   // 图片预览
-  imagePreview: function imagePreview(Dcat) {
-    $('[data-action="preview"]').off('click').click(function () {
+  'preview-img': function previewImg($action, Dcat) {
+    return function () {
       return Dcat.previewImage($(this).attr('src'));
-    });
+    };
   },
-  popover: function popover() {
+  'popover': function popover($action) {
     $('.popover').remove();
-    $('[data-action="popover"]').popover();
+    return function () {
+      $action.popover();
+    };
   },
-  // box-collapse
-  boxActions: function boxActions() {
+  'box-actions': function boxActions() {
     $('.box [data-action="collapse"]').click(function (e) {
       e.preventDefault();
       $(this).find('i').toggleClass('icon-minus icon-plus');
@@ -460,8 +476,19 @@ var actions = {
 var DataActions = function DataActions(Dcat) {
   _classCallCheck(this, DataActions);
 
-  for (var name in actions) {
-    actions[name](Dcat);
+  var actions = $.extend(defaultActions, Dcat.actions()),
+      $action,
+      name,
+      func;
+
+  for (name in actions) {
+    $action = $("[data-action=\"".concat(name, "\"]"));
+    func = actions[name]($action, Dcat);
+
+    if (typeof func === 'function') {
+      // 必须先取消再绑定，否则可能造成重复绑定的效果
+      $action.off('click').click(func);
+    }
   }
 };
 
@@ -597,10 +624,9 @@ var Pjax = /*#__PURE__*/function () {
   _createClass(Pjax, [{
     key: "boot",
     value: function boot(Dcat) {
-      var container = Dcat.config.pjax_container_selector;
-
-      var _this = this;
-
+      var container = Dcat.config.pjax_container_selector,
+          formContainer = 'form[pjax-container]',
+          scriptContainer = 'script[data-exec-on-popstate]';
       $.pjax.defaults.timeout = 5000;
       $.pjax.defaults.maxCacheLength = 0;
       $('a:not(a[target="_blank"])').click(function (event) {
@@ -611,36 +637,29 @@ var Pjax = /*#__PURE__*/function () {
       $d.on('pjax:timeout', function (event) {
         event.preventDefault();
       });
-      $d.off('submit', 'form[pjax-container]').on('submit', 'form[pjax-container]', function (event) {
+      $d.off('submit', formContainer).on('submit', formContainer, function (event) {
         $.pjax.submit(event, container);
       });
       $d.on("pjax:popstate", function () {
         $d.one("pjax:end", function (event) {
-          $(event.target).find("script[data-exec-on-popstate]").each(function () {
+          $(event.target).find(scriptContainer).each(function () {
             $.globalEval(this.text || this.textContent || this.innerHTML || '');
           });
         });
       });
       $d.on('pjax:send', function (xhr) {
         if (xhr.relatedTarget && xhr.relatedTarget.tagName && xhr.relatedTarget.tagName.toLowerCase() === 'form') {
-          var $submit_btn = $('form[pjax-container] :submit');
-
-          if ($submit_btn) {
-            $submit_btn.button('loading');
-          }
+          $(formContainer + ' :submit').button('loading');
         }
 
         Dcat.NP.start();
       });
       $d.on('pjax:complete', function (xhr) {
         if (xhr.relatedTarget && xhr.relatedTarget.tagName && xhr.relatedTarget.tagName.toLowerCase() === 'form') {
-          var $submit_btn = $('form[pjax-container] :submit');
-
-          if ($submit_btn) {
-            $submit_btn.button('reset');
-          }
+          $(formContainer + ' :submit').button('reset');
         }
-
+      });
+      $d.on('pjax:loaded', function () {
         Dcat.NP.done();
       });
     }

src/Controllers/LogController.php

@@ -44,7 +44,7 @@ class LogController extends Controller
         $grid->method(trans('admin.method'))->responsive()->display(function ($method) {
             $color = Arr::get(OperationLogModel::$methodColors, $method, 'default');
 
-            return "<span class=\"label label-$color\">$method</span>";
+            return "<span class=\"label bg-$color\">$method</span>";
         })->filterByValue();
 
         $grid->path(trans('admin.uri'))->responsive()->display(function ($v) {

src/Controllers/PermissionController.php

@@ -2,6 +2,7 @@
 
 namespace Dcat\Admin\Controllers;
 
+use Dcat\Admin\Admin;
 use Dcat\Admin\Form;
 use Dcat\Admin\Grid;
 use Dcat\Admin\Layout\Content;
@@ -109,13 +110,15 @@ class PermissionController extends AdminController
                     $path = trim(admin_base_path($path), '/');
                 }
 
-                return "<code>$path</code>";
+                $color = Admin::color()->primaryDarker();
+
+                return "<code style='color:{$color}'>$path</code>";
             })->implode('&nbsp;&nbsp;');
 
             $method = collect($method ?: ['ANY'])->unique()->map(function ($name) {
                 return strtoupper($name);
             })->map(function ($name) {
-                return "<span class='label label-primary'>{$name}</span>";
+                return "<span class='label bg-primary'>{$name}</span>";
             })->implode('&nbsp;').'&nbsp;';
 
             $payload .= "</div>&nbsp; $method<a class=\"dd-nodrag\">$path</a>";
@@ -149,7 +152,7 @@ class PermissionController extends AdminController
             $method = collect($method)->map(function ($name) {
                 return strtoupper($name);
             })->map(function ($name) {
-                return "<span class='label label-primary'>{$name}</span>";
+                return "<span class='label bg-primary'>{$name}</span>";
             })->implode('&nbsp;').'&nbsp;';
 
             return collect($path)->filter()->map(function ($path) use ($method) {
@@ -158,7 +161,7 @@ class PermissionController extends AdminController
                     $method = collect(explode(',', $method))->map(function ($name) {
                         return strtoupper($name);
                     })->map(function ($name) {
-                        return "<span class='label label-primary'>{$name}</span>";
+                        return "<span class='label bg-primary'>{$name}</span>";
                     })->implode('&nbsp;').'&nbsp;';
                 }
 
@@ -223,7 +226,7 @@ class PermissionController extends AdminController
                 $method = collect($method)->map(function ($name) {
                     return strtoupper($name);
                 })->map(function ($name) {
-                    return "<span class='label label-primary'>{$name}</span>";
+                    return "<span class='label bg-primary'>{$name}</span>";
                 })->implode('&nbsp;');
 
                 if (! empty(config('admin.route.prefix'))) {

src/Controllers/UserController.php

@@ -35,7 +35,7 @@ class UserController extends AdminController
             $grid->id('ID')->sortable();
             $grid->username;
             $grid->name;
-            $grid->roles->pluck('name')->label('primary');
+            $grid->roles->pluck('name')->chip('primary', 3);
 
             $permissionModel = config('admin.database.permissions_model');
             $roleModel = config('admin.database.roles_model');

src/Grid/Column.php

@@ -18,11 +18,12 @@ use Illuminate\Support\Traits\Macroable;
 /**
  * @method $this switch(string $color = '')
  * @method $this switchGroup($columns = [], string $color = '')
- * @method $this image($server = '', int $width = 200, int $height = 200);
- * @method $this label($style = 'success', int $max = null);
+ * @method $this image($server = '', int $width = 200, int $height = 200)
+ * @method $this label($style = 'success', int $max = null)
+ * @method $this chip($style = 'success', int $max = null)
  * @method $this button($style = 'success');
  * @method $this link($href = '', $target = '_blank');
- * @method $this badge($style = 'red');
+ * @method $this badge($style = 'success', int $max = null);
  * @method $this progressBar($style = 'primary', $size = 'sm', $max = 100)
  * @method $this checkbox($options = [])
  * @method $this radio($options = [])
@@ -87,6 +88,7 @@ class Column
         'downloadable'     => Displayers\Downloadable::class,
         'copyable'         => Displayers\Copyable::class,
         'orderable'        => Displayers\Orderable::class,
+        'chip'             => Displayers\Chip::class,
     ];
 
     /**

src/Grid/Displayers/Badge.php

@@ -2,18 +2,7 @@
 
 namespace Dcat\Admin\Grid\Displayers;
 
-use Illuminate\Contracts\Support\Arrayable;
-
-class Badge extends AbstractDisplayer
+class Badge extends Label
 {
-    public function display($style = 'red')
-    {
-        if ($this->value instanceof Arrayable) {
-            $this->value = $this->value->toArray();
-        }
-
-        return collect((array) $this->value)->map(function ($name) use ($style) {
-            return "<span class='badge bg-{$style}'>$name</span>";
-        })->implode('&nbsp;');
-    }
+    protected $baseClass = 'badge';
 }

src/Grid/Displayers/Chip.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace Dcat\Admin\Grid\Displayers;
+
+use Dcat\Admin\Support\Helper;
+
+class Chip extends AbstractDisplayer
+{
+    public function display($style = 'primary', $max = null)
+    {
+        $class = $style;
+        $background = '';
+        $textColor = '';
+
+        if (strpos($style, '#') === 0 || strpos($style, '(') !== false) {
+            $class = '';
+            $background = "style='background:{$style}'";
+            $textColor = 'text-white';
+        }
+
+        return collect($this->value($max))->map(function ($name) use ($class, $background, $textColor) {
+            return <<<HTML
+<div class="chip chip-{$class}" {$background}>
+  <div class="chip-body">
+    <div class="chip-text {$textColor}">{$name}</div>
+  </div>
+</div>
+HTML;
+        })->implode('&nbsp;');
+    }
+
+    protected function value($max)
+    {
+        $values = Helper::array($this->value);
+
+        if ($max && count($values) > $max) {
+            $values = array_slice($values, 0, $max);
+            $values[] = '...';
+        }
+
+        return $values;
+    }
+}

src/Grid/Displayers/Image.php

@@ -22,7 +22,7 @@ class Image extends AbstractDisplayer
                 $src = Storage::disk(config('admin.upload.disk'))->url($path);
             }
 
-            return "<img data-init='preview' src='$src' style='max-width:{$width}px;max-height:{$height}px;cursor:pointer' class='img img-thumbnail' />";
+            return "<img data-action='preview-img' src='$src' style='max-width:{$width}px;max-height:{$height}px;cursor:pointer' class='img img-thumbnail' />";
         })->implode('&nbsp;');
     }
 }

src/Grid/Displayers/Label.php

@@ -2,24 +2,37 @@
 
 namespace Dcat\Admin\Grid\Displayers;
 
-use Illuminate\Contracts\Support\Arrayable;
+use Dcat\Admin\Support\Helper;
 
 class Label extends AbstractDisplayer
 {
-    public function display($style = 'success', $max = null)
+    protected $baseClass = 'label';
+    protected $stylePrefix = 'bg';
+
+    public function display($style = 'primary', $max = null)
     {
-        if ($this->value instanceof Arrayable) {
-            $this->value = $this->value->toArray();
+        $class = $style;
+        $background = '';
+
+        if (strpos($style, '#') === 0 || strpos($style, '(') !== false) {
+            $class = '';
+            $background = "style='background:{$style}'";
         }
 
-        $values = (array) $this->value;
+        return collect($this->value($max))->map(function ($name) use ($class, $background) {
+            return "<span class='{$this->baseClass} {$this->stylePrefix}-{$class}' {$background}>$name</span>";
+        })->implode('&nbsp;');
+    }
+
+    protected function value($max)
+    {
+        $values = Helper::array($this->value);
+
         if ($max && count($values) > $max) {
             $values = array_slice($values, 0, $max);
             $values[] = '...';
         }
 
-        return collect($values)->map(function ($name) use ($style) {
-            return "<span class='label label-{$style}'>$name</span>";
-        })->implode('&nbsp;');
+        return $values;
     }
 }