滑动面板

update

resources/assets/dcat/js/dcat-app.js

@@ -116,6 +116,9 @@ function boot(Dcat) {
     return Dcat;
 }
 
+/**
+ * @returns {Dcat}
+ */
 win.CreateDcat = function(config) {
     return boot(new Dcat(config));
 };

resources/assets/dcat/js/extensions/DialogForm.js

@@ -98,13 +98,14 @@ export default class DialogForm {
             return;
         }
 
-        $(w.document).one('pjax:complete', function () { // 跳转新页面时移除弹窗
-            _this._destory(counter);
+        // 刷新或跳转页面时移除弹窗
+        Dcat.onPjaxComplete(() => {
+            _this.destory(counter);
         });
 
         _this.isLoading = 1;
 
-        (! $btn) || $btn.button('loading');
+        $btn && $btn.button('loading');
 
         $.get(url, function (tpl) {
             _this.isLoading = 0;

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

@@ -32,9 +32,7 @@ class Form {
         }, options);
 
         _this.originalValues = {};
-        _this.$form = typeof _this.options.form === 'object'
-            ? _this.options.form
-            : $(_this.options.form).first();
+        _this.$form = $(_this.options.form).first();
     }
 
     _execute() {

resources/assets/dcat/js/extensions/Helpers.js

@@ -136,7 +136,7 @@ export default class Helpers {
         let len1 = this.len(array),
             len2 = this.len(array2), i;
 
-        if (len1 != len2) {
+        if (len1 !== len2) {
             return false;
         }
 
@@ -149,13 +149,23 @@ export default class Helpers {
                 return true;
             }
 
-            if (typeof array[i] == 'object' && typeof array2[i] == 'object') {
-                if (! this.equal(array[i], array2[i], strict))
+            if (typeof array[i] === 'object' && typeof array2[i] === 'object') {
+                if (! this.equal(array[i], array2[i], strict)) {
                     return false;
+                }
+                continue;
             }
-            else if (array[i] != array2[i]) {
-                return false;
+
+            if (strict) {
+                if (array[i] !== array2[i]) {
+                    return false;
+                }
+            } else {
+                if (array[i] != array2[i]) {
+                    return false;
+                }
             }
+
         }
         return true;
     }
@@ -171,4 +181,13 @@ export default class Helpers {
             subject
         );
     }
+
+    /**
+     * 生成随机字符串
+     *
+     * @returns {string}
+     */
+    random(len) {
+        return Math.random().toString(12).substr(2, len || 16)
+    }
 }

resources/assets/dcat/js/extensions/Loading.js

@@ -1,5 +1,5 @@
 
-let tpl = '<div class="dcat-loading flex items-center justify-center pin" style="{style}">{svg}</div>',
+let tpl = '<div class="dcat-loading d-flex items-center align-items-center justify-content-center pin" style="{style}">{svg}</div>',
     loading = '.dcat-loading',
     LOADING_SVG = [
         '<svg width="{width}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-disk" style="background: none;"><g transform="translate(50,50)"><g ng-attr-transform="scale({{config.scale}})" transform="scale(0.5)"><circle cx="0" cy="0" r="50" ng-attr-fill="{{config.c1}}" fill="{color}"></circle><circle cx="0" ng-attr-cy="{{config.cy}}" ng-attr-r="{{config.r}}" ng-attr-fill="{{config.c2}}" cy="-35" r="15" fill="#ffffff" transform="rotate(101.708)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 0 0;360 0 0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></g></g></svg>',
@@ -22,7 +22,7 @@ class Loading {
             defStyle = 'position:absolute;left:10px;right:10px;',
             content;
 
-        _this.$container = typeof options.container === 'object' ? options.container : $(options.container);
+        _this.$container = $(options.container);
 
         content = $(
             tpl

resources/assets/dcat/js/extensions/Slider.js

@@ -1,7 +1,54 @@
 
+let idPrefix = 'dcat-slider-',
+    template = `<div id="{id}" class="customizer {class}">
+    <div class="customizer-content position-fixed p-1 ps ps--active-y"></div>
+</div>`;
+
 export default class Slider {
-    constructor(options) {
+    constructor(Dcat, options) {
+        let _this = this;
+
+        _this.options = $.extend({
+            target: null,
+            class: null,
+            autoDestory: true,
+        }, options);
+
+        _this.id = idPrefix + Dcat.helpers.random();
+        _this.$target = $(_this.options.target);
+        _this.$container = $(
+            template
+                .replace('{id}', _this.id)
+                .replace('{class}', _this.options.class || '')
+        );
+
+        _this.$container.appendTo('body');
+        _this.$container.find('.customizer-content').append(_this.$target);
+
+        // 滚动条
+        new PerfectScrollbar(`#${_this.id} .customizer-content`);
+
+        if (_this.options.autoDestory) {
+            // 刷新或跳转页面时移除面板
+            Dcat.onPjaxComplete(() => {
+                _this.destory();
+            });
+        }
+    }
+
+    open() {
+        this.$container.addClass('open');
+    }
 
+    close() {
+        this.$container.removeClass('open');
     }
 
+    toggle() {
+        this.$container.toggleClass('open');
+    }
+
+    destory() {
+        this.$container.remove()
+    }
 }

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

@@ -27,4 +27,13 @@
     content: "\E842";
     font-size: 0.7rem;
   }
-}
+}
+
+.right-side-filter-container .header {
+  border-bottom: 1px solid $divider-color;
+  width: 100%;
+  background: #fff;
+  z-index: 10;
+  top: 0;
+  margin-left: -1rem;
+}

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

@@ -5,20 +5,4 @@
 .pin {
   right: 0;
   left: 0;
-}
-
-.justify-center {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-.items-center {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-.flex {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
 }

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

@@ -96,4 +96,5 @@ code {
 pre {
   padding: 7px;
   white-space: pre-wrap;
+  margin-bottom: 0;
 }

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

@@ -1749,18 +1749,6 @@ html body .content .content-wrapper {
   left: 0;
 }
 
-.justify-center {
-  justify-content: center;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.flex {
-  display: flex;
-}
-
 .btn {
   padding: 0.75rem 1.45rem !important;
   font-size: 0.95rem;
@@ -1977,6 +1965,15 @@ table.data-thumb-view.dataTable tbody tr:hover {
   font-size: 0.7rem;
 }
 
+.right-side-filter-container .header {
+  border-bottom: 1px solid #f4f4f4;
+  width: 100%;
+  background: #fff;
+  z-index: 10;
+  top: 0;
+  margin-left: -1rem;
+}
+
 .dropdown .dropdown-menu {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
   border: 1px solid rgba(0, 0, 0, 0.03);
@@ -2147,5 +2144,6 @@ code {
 pre {
   padding: 7px;
   white-space: pre-wrap;
+  margin-bottom: 0;
 }
 

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

@@ -766,6 +766,10 @@ function boot(Dcat) {
   $(Dcat.boot.bind(Dcat));
   return Dcat;
 }
+/**
+ * @returns {Dcat}
+ */
+
 
 win.CreateDcat = function (config) {
   return boot(new _Dcat__WEBPACK_IMPORTED_MODULE_0__["default"](config));
@@ -1252,14 +1256,14 @@ var DialogForm = /*#__PURE__*/function () {
         } catch (e) {}
 
         return;
-      }
+      } // 刷新或跳转页面时移除弹窗
+
 
-      $(w.document).one('pjax:complete', function () {
-        // 跳转新页面时移除弹窗
-        _this._destory(counter);
+      Dcat.onPjaxComplete(function () {
+        _this.destory(counter);
       });
       _this.isLoading = 1;
-      !$btn || $btn.button('loading');
+      $btn && $btn.button('loading');
       $.get(url, function (tpl) {
         _this.isLoading = 0;
 
@@ -1405,8 +1409,6 @@ var DialogForm = /*#__PURE__*/function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jquery_form_jquery_form_min__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../jquery-form/jquery.form.min */ "./resources/assets/dcat/js/jquery-form/jquery.form.min.js");
 /* harmony import */ var _jquery_form_jquery_form_min__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_jquery_form_jquery_form_min__WEBPACK_IMPORTED_MODULE_0__);
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -1448,7 +1450,7 @@ var Form = /*#__PURE__*/function () {
       after: function after() {}
     }, options);
     _this.originalValues = {};
-    _this.$form = _typeof(_this.options.form) === 'object' ? _this.options.form : $(_this.options.form).first();
+    _this.$form = $(_this.options.form).first();
   }
 
   _createClass(Form, [{
@@ -1989,7 +1991,7 @@ var Helpers = /*#__PURE__*/function () {
           len2 = this.len(array2),
           i;
 
-      if (len1 != len2) {
+      if (len1 !== len2) {
         return false;
       }
 
@@ -2002,10 +2004,22 @@ var Helpers = /*#__PURE__*/function () {
           return true;
         }
 
-        if (_typeof(array[i]) == 'object' && _typeof(array2[i]) == 'object') {
-          if (!this.equal(array[i], array2[i], strict)) return false;
-        } else if (array[i] != array2[i]) {
-          return false;
+        if (_typeof(array[i]) === 'object' && _typeof(array2[i]) === 'object') {
+          if (!this.equal(array[i], array2[i], strict)) {
+            return false;
+          }
+
+          continue;
+        }
+
+        if (strict) {
+          if (array[i] !== array2[i]) {
+            return false;
+          }
+        } else {
+          if (array[i] != array2[i]) {
+            return false;
+          }
         }
       }
 
@@ -2021,6 +2035,17 @@ var Helpers = /*#__PURE__*/function () {
 
       return str.replace(new RegExp(_replace, "g"), subject);
     }
+    /**
+     * 生成随机字符串
+     *
+     * @returns {string}
+     */
+
+  }, {
+    key: "random",
+    value: function random(len) {
+      return Math.random().toString(12).substr(2, len || 16);
+    }
   }]);
 
   return Helpers;
@@ -2039,15 +2064,13 @@ var Helpers = /*#__PURE__*/function () {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-var tpl = '<div class="dcat-loading flex items-center justify-center pin" style="{style}">{svg}</div>',
+var tpl = '<div class="dcat-loading d-flex items-center align-items-center justify-content-center pin" style="{style}">{svg}</div>',
     loading = '.dcat-loading',
     LOADING_SVG = ['<svg width="{width}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-disk" style="background: none;"><g transform="translate(50,50)"><g ng-attr-transform="scale({{config.scale}})" transform="scale(0.5)"><circle cx="0" cy="0" r="50" ng-attr-fill="{{config.c1}}" fill="{color}"></circle><circle cx="0" ng-attr-cy="{{config.cy}}" ng-attr-r="{{config.r}}" ng-attr-fill="{{config.c2}}" cy="-35" r="15" fill="#ffffff" transform="rotate(101.708)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 0 0;360 0 0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></g></g></svg>', '<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto block" style="width:{width};{svg_style}" viewBox="0 0 120 30" fill="{color}"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"/><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle></svg>'];
 
@@ -2069,7 +2092,7 @@ var Loading = /*#__PURE__*/function () {
         defStyle = 'position:absolute;left:10px;right:10px;',
         content;
 
-    _this.$container = _typeof(options.container) === 'object' ? options.container : $(options.container);
+    _this.$container = $(options.container);
     content = $(tpl.replace('{svg}', options.svg).replace('{color}', options.color).replace('{color}', options.color).replace('{width}', options.width).replace('{style}', "".concat(defStyle, "background:").concat(options.background, ";z-index:").concat(options.zIndex, ";").concat(options.style)));
     content.appendTo(_this.$container);
   }
@@ -2379,9 +2402,67 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Slider; });
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var Slider = function Slider(options) {
-  _classCallCheck(this, Slider);
-};
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+var idPrefix = 'dcat-slider-',
+    template = "<div id=\"{id}\" class=\"customizer {class}\">\n    <div class=\"customizer-content position-fixed p-1 ps ps--active-y\"></div>\n</div>";
+
+var Slider = /*#__PURE__*/function () {
+  function Slider(Dcat, options) {
+    _classCallCheck(this, Slider);
+
+    var _this = this;
+
+    _this.options = $.extend({
+      target: null,
+      "class": null,
+      autoDestory: true
+    }, options);
+    _this.id = idPrefix + Dcat.helpers.random();
+    _this.$target = $(_this.options.target);
+    _this.$container = $(template.replace('{id}', _this.id).replace('{class}', _this.options["class"] || ''));
+
+    _this.$container.appendTo('body');
+
+    _this.$container.find('.customizer-content').append(_this.$target); // 滚动条
+
+
+    new PerfectScrollbar("#".concat(_this.id, " .customizer-content"));
+
+    if (_this.options.autoDestory) {
+      // 刷新或跳转页面时移除面板
+      Dcat.onPjaxComplete(function () {
+        _this.destory();
+      });
+    }
+  }
+
+  _createClass(Slider, [{
+    key: "open",
+    value: function open() {
+      this.$container.addClass('open');
+    }
+  }, {
+    key: "close",
+    value: function close() {
+      this.$container.removeClass('open');
+    }
+  }, {
+    key: "toggle",
+    value: function toggle() {
+      this.$container.toggleClass('open');
+    }
+  }, {
+    key: "destory",
+    value: function destory() {
+      this.$container.remove();
+    }
+  }]);
+
+  return Slider;
+}();
 
 
 

resources/lang/en/admin.php

@@ -28,7 +28,7 @@ return [
     'client' => [
         'delete_confirm'    => 'Are you sure to delete this item ?',
         'confirm'           => 'Confirm',
-        'cancel'            => 'cancel',
+        'cancel'            => 'Cancel',
         'refresh_succeeded' => 'Refresh succeeded !',
 
         '500' => 'Internal server error !',

resources/views/filter/right-side-container.blade.php

@@ -1,22 +1,22 @@
 <div class="hidden">
-    <div style="{!! $style !!}"  id="{{ $filterID }}">
+    <div class="right-side-filter-container" style="{!! $style !!}"  id="{{ $filterID }}">
         <form action="{!! $action !!}" class="form-horizontal" pjax-container method="get">
-            <div class="right-side-filter-container">
-                <div class="pull-left">
-                    <button type="submit" class=" btn btn-sm btn-primary submit">
-                        <i class="fa fa-search"></i> &nbsp;{{ __('admin.search') }}
-                    </button>&nbsp;
-                    @if(!$disableResetButton)
-                        <a href="{!! $action !!}" class="reset btn btn-sm btn-white">
-                            <i class="fa fa-undo"></i> &nbsp;{{ __('admin.reset') }}
-                        </a>
-                    @endif
-                </div>
+            <div class="mb-1" style="height: 55px">
+                <div class="p-1 position-fixed d-flex justify-content-between header">
+                    <div>
+                        <button type="submit" class=" btn btn-sm btn-primary submit">
+                            <i class="fa fa-search"></i> &nbsp;{{ __('admin.search') }}
+                        </button>&nbsp;
+                        @if(!$disableResetButton)
+                            <a href="{!! $action !!}" class="reset btn btn-sm btn-white">
+                                <i class="fa fa-undo"></i> &nbsp;{{ __('admin.reset') }}
+                            </a>
+                        @endif
+                    </div>
 
-                <div class="pull-right">
-                    <span class="btn btn-trans close-slider font-16">
-                        <i class="ti-shift-right"></i>
-                    </span>
+                    <a href="#" class="close-slider customizer-close" style="top: 12px;right: 10px;">
+                        <i class="feather icon-x"></i>
+                    </a>
                 </div>
             </div>
 

resources/views/layouts/vertical.blade.php

@@ -9,6 +9,9 @@
 
         console.log(123, Dcat)
         Dcat.ready(function () {
+
+            setTimeout(function () {
+            }, 1000)
         })
     </script>
 

src/Grid/Displayers/DialogTree.php

@@ -151,7 +151,9 @@ class DialogTree extends AbstractDisplayer
         $val = $this->format($this->value);
 
         return <<<EOF
-<a href="javascript:void(0)" class="{$this->getSelectorPrefix()}-open-tree" data-checked="{$this->checkedAll}" data-val="{$val}"><i class='ti-layout-list-post'></i> $btn</a>
+<a href="javascript:void(0)" class="{$this->getSelectorPrefix()}-open-tree" data-checked="{$this->checkedAll}" data-val="{$val}">
+    <i class='feather icon-align-right'></i> $btn
+</a>
 EOF;
     }
 

src/Grid/Displayers/Downloadable.php

@@ -26,7 +26,7 @@ class Downloadable extends AbstractDisplayer
 
             return <<<HTML
 <a href='$src' download='{$name}' target='_blank' class='text-muted'>
-    <i class="fa fa-download"></i> {$name}
+    <i class="feather icon-download"></i> {$name}
 </a>
 HTML;
         })->implode('<br>');

src/Grid/Displayers/Expand.php

@@ -42,7 +42,7 @@ class Expand extends AbstractDisplayer
 
         return <<<EOT
 <span class="grid-expand" data-inserted="0" data-key="{$key}" data-toggle="collapse" data-target="#grid-collapse-{$key}">
-   <a href="javascript:void(0)"><i class="fa fa-angle-double-right"></i>  $button</a>
+   <a href="javascript:void(0)"><i class="feather icon-chevrons-right"></i>  $button</a>
 </span>
 <template class="grid-expand-{$key}">
     <div id="grid-collapse-{$key}" class="collapse">$html</div>
@@ -78,7 +78,7 @@ $('.grid-expand').off('click').click(function () {
         $(this).data('inserted', 1);
     }
     
-    $("i", this).toggleClass("fa-angle-double-right fa-angle-double-down");
+    $("i", this).toggleClass("icon-chevrons-right icon-chevrons-down");
 });
 JS;
         Admin::script($script);

src/Grid/Filter.php

@@ -155,7 +155,7 @@ class Filter implements Renderable
     /**
      * @var string
      */
-    protected $style = 'padding:18px 15px 8px';
+    protected $style = 'padding:0';
 
     /**
      * @var bool

src/Grid/Tools/FilterButton.php

@@ -58,18 +58,15 @@ class FilterButton extends AbstractTool
     
      function initSlider() {
         slider = new Dcat.Slider({
-            direction: 'r',
-            dom: '#{$id}',
-            background: '#FFF',
-            shade: false,
-            width: '480px',
+            target: '#{$id}',
         });
         
-        $(document).one('pjax:complete', function () {// 跳转新页面时移除弹窗
-            slider.destroy();
-        });
+        slider
+            .\$container
+            .find('.right-side-filter-container .header')
+            .width(slider.\$container.width() - 20);
         
-        expand && slider.open();
+        expand && setTimeout(slider.open, 10);
     }
     
     expand && setTimeout(initSlider, 10);