表格筛选功能增加右侧滑动布局模式

resources/assets/dcat-admin/slider.js

@@ -0,0 +1,242 @@
+
+(function ($) {
+    function Slider(cnf) {
+        this.opts = {
+            direction: cnf.direction || "left",
+            wight: cnf.width || null,
+            height: cnf.height || null,
+            dom: $(cnf.dom),
+            time: cnf.time || null,
+            shade: cnf.shade,
+            closeShade: (typeof cnf.closeShade == 'undefined') ? true : cnf.closeShade,
+            callback: cnf.callback || null,
+            background: cnf.background || null,
+            top: cnf.top || null,
+            right: cnf.right || null,
+            bottom: cnf.bottom || null,
+            left: cnf.left || null,
+            zIndex: cnf.zIndex || 97,
+            hasTopNavbar: (typeof cnf.hasTopNavbar == 'undefined') ? true : cnf.hasTopNavbar,
+        };
+        this.id = this.randomString();
+        this.dom = this.opts.dom[0];
+        this.container = null;
+        this.inner = null;
+        this.shade = null;
+        this.opened = false;
+        this.init()
+    }
+
+    Slider.prototype = {
+        isMobile: function () {
+            return navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i) ? true : false
+        },
+
+        isSmallScreen: function () {
+            return screen.width <= 767
+        },
+
+        addEvent: function (f, e, d) {
+            if (f.attachEvent) {
+                f.attachEvent("on" + e, d)
+            } else {
+                f.addEventListener(e, d, false)
+            }
+        },
+
+        randomString: function () {
+            return Math.random().toString(36).substr(2, 6)
+        },
+
+        init: function () {
+            var self = this;
+            if (! self.dom) {
+                throw new Error('Invalid dom');
+            }
+            var mainDiv = document.createElement("div");
+            var innderDiv = document.createElement("div");
+            var shadeDiv = document.createElement("div");
+
+            mainDiv.setAttribute("class", "da-slider-main da-slider-" + self.id);
+            innderDiv.setAttribute("class", "da-slider-inner");
+            shadeDiv.setAttribute("class", "da-slider-shade");
+
+            innderDiv.appendChild(self.dom);
+            mainDiv.appendChild(innderDiv);
+            mainDiv.appendChild(shadeDiv);
+
+            $("body")[0].appendChild(mainDiv);
+
+            self.container = mainDiv;
+            self.inner = innderDiv;
+            self.shade = shadeDiv;
+
+            switch (self.opts.direction) {
+                case "t":
+                case "top":
+                    self.top = self.opts.top || 0;
+                    self.left = self.opts.left || 0;
+                    self.width = self.opts.width || "100%";
+                    self.height = self.opts.height || "30%";
+                    self.translate = "0,-100%,0";
+                    break;
+                case "b":
+                case "bottom":
+                    self.bottom = self.opts.bottom || 0;
+                    self.left = self.opts.left || 0;
+                    self.width = self.opts.width || "100%";
+                    self.height = self.opts.height || "30%";
+                    self.translate = "0,100%,0";
+                    break;
+                case "r":
+                case "right":
+                    self.bottom = self.opts.bottom || 0;
+                    self.right = self.opts.right || 0;
+                    self.width = self.opts.width || "30%";
+                    self.height = self.opts.height || self.autoHeight() + "px";
+                    self.translate = "100%,0,0";
+                    break;
+                default:
+                    self.bottom = self.opts.bottom || 0;
+                    self.left = self.opts.left || 0;
+                    self.width = self.opts.width || "30%";
+                    self.height = self.opts.height || self.autoHeight() + "px";
+                    self.translate = "-100%,0,0"
+            }
+
+            mainDiv.style.display = "none";
+            mainDiv.style.position = "fixed";
+            mainDiv.style.top = "0";
+            mainDiv.style.left = "0";
+            mainDiv.style.width = "100%";
+            mainDiv.style.height = "100%";
+            mainDiv.style.zIndex = self.opts.zIndex + 1;
+
+            innderDiv.style.position = "absolute";
+            innderDiv.style.top = self.top;
+            innderDiv.style.bottom = self.bottom;
+            innderDiv.style.left = self.left;
+            innderDiv.style.right = self.right;
+            innderDiv.style.backgroundColor = self.opts.background;
+            innderDiv.style.transform = "translate3d(" + self.translate + ")";
+            innderDiv.style.webkitTransition = "all .2s ease-out";
+            innderDiv.style.transition = "all .2s ease-out";
+            innderDiv.style.zIndex = self.opts.zIndex + 2;
+            innderDiv.style.boxShadow = '1px 1px 5px #ccc';
+            innderDiv.style.overflowY = 'auto';
+            innderDiv.style.padding = '10px';
+
+            shadeDiv.style.width = "100%";
+            shadeDiv.style.height = "100%";
+            shadeDiv.style.opacity = "0";
+            if (self.opts.shade !== false) {
+                shadeDiv.style.backgroundColor = self.opts.shade || "rgb(0, 0, 0, 0.3)";
+            }
+            shadeDiv.style.zIndex = self.opts.zIndex;
+            shadeDiv.style.webkitTransition = "all .2s ease-out";
+            shadeDiv.style.transition = "all .2s ease-out";
+            shadeDiv.style.webkitBackfaceVisibility = "hidden";
+
+            self.resize();
+            self.addListeners();
+        },
+
+        resize: function () {
+            var self = this,
+                d = this.opts.direction,
+                map = {'t': 1, 'top': 1, 'b': 1, 'bottom': 1},
+                dom = this.inner;
+
+            if (! this.opts.height && ! (d in map)) {
+                self.height = this.autoHeight() + "px";
+                dom.style.height = '100%'
+            }
+            if (this.isSmallScreen() && ! (d in map)) {
+                self.width = '100%';
+                dom.style.width = '100%'
+            }
+
+            $(dom).slimScroll({
+                width: '99.7%',
+                height: self.height,
+            });
+
+            $(this.container).find('.slimScrollDiv').css({
+                bottom: self.bottom,
+                top: self.top,
+                right: self.right,
+                left: self.left,
+                position: 'absolute',
+                width: self.width,
+                height: self.height,
+                // 'box-shadow': '1px 1px 5px #ccc',
+            });
+        },
+
+        autoHeight: function () {
+            return document.documentElement.clientHeight
+                - (this.opts.hasTopNavbar ? (this.isSmallScreen() ? 120 : 60) : 0)
+        },
+
+        toggle: function () {
+            this.opened ? this.close() : this.open();
+        },
+
+        open: function () {
+            var self = this;
+            self.container.style.display = "block";
+            self.opened = true;
+            setTimeout(function () {
+                self.inner.style.transform = "translate3d(0,0,0)";
+                self.inner.style.webkitTransform = "translate3d(0,0,0)";
+                self.shade.style.opacity = 0.5
+            }, 30);
+            if (self.opts.time) {
+                self.timer = setTimeout(function () {
+                    self.close()
+                }, self.opts.time)
+            }
+        },
+
+        close: function () {
+            var self = this;
+            self.timer && clearTimeout(self.timer);
+            self.inner.style.webkitTransform = "translate3d(" + self.translate + ")";
+            self.inner.style.transform = "translate3d(" + self.translate + ")";
+            self.shade.style.opacity = 0;
+            self.opened = false;
+
+            setTimeout(function () {
+                self.container.style.display = "none";
+                self.timer = null;
+                self.opts.callback && self.opts.callback()
+            }, 300)
+        },
+
+        destroy: function () {
+            this.container.remove();
+        },
+
+        onClick: function (dom, callback) {
+            this.addEvent(dom, (this.isMobile() ? "touchend" : "click"), callback)
+        },
+
+        addListeners: function () {
+            var self = this;
+            self.addEvent(self.shade, "touchmove", function (f) {
+                f.preventDefault()
+            });
+            self.onClick(self.shade, function (f) {
+                if (self.opts.closeShade) {
+                    self.close()
+                }
+            });
+
+            $(window).resize(function () {
+                self.resize()
+            })
+        }
+    };
+
+    LA.Slider = Slider
+})(jQuery);

resources/views/filter/between-datetime.blade.php

@@ -0,0 +1,10 @@
+<div class="filter-input col-sm-{{ $width }}"  style="{!! $style !!}">
+    <div class="form-group">
+        <div class="input-group input-group-sm">
+            <span class="input-group-addon"><b>{{$label}}</b>  &nbsp;<i class="fa fa-calendar"></i></span>
+            <input autocomplete="off" type="text" class="form-control" id="{{$id['start']}}" placeholder="{{$label}}" name="{{$name['start']}}" value="{{ request($name['start'], \Illuminate\Support\Arr::get($value, 'start')) }}">
+            <span class="input-group-addon" style="border-left: 0; border-right: 0;">To</span>
+            <input autocomplete="off" type="text" class="form-control" id="{{$id['end']}}" placeholder="{{$label}}" name="{{$name['end']}}" value="{{ request($name['end'], \Illuminate\Support\Arr::get($value, 'end')) }}">
+        </div>
+    </div>
+</div>

resources/views/filter/between.blade.php

@@ -1,4 +1,4 @@
-<div class="filter-input col-md-{{ $width }} "  style="{!! $style !!}">
+<div class="filter-input col-sm-{{ $width }} "  style="{!! $style !!}">
     <div class="form-group" >
         <div class="input-group input-group-sm">
             <span class="input-group-addon"><b>{!! $label !!}</b></span>

resources/views/filter/betweenDatetime.blade.php

@@ -1,10 +0,0 @@
-<div class="filter-input col-md-{{ $width }}"  style="{!! $style !!}">
-    <div class="form-group">
-        <div class="input-group input-group-sm">
-            <span class="input-group-addon"><b>{{$label}}</b>  &nbsp;<i class="fa fa-calendar"></i></span>
-            <input type="text" class="form-control" id="{{$id['start']}}" placeholder="{{$label}}" name="{{$name['start']}}" value="{{ request($name['start'], \Illuminate\Support\Arr::get($value, 'start')) }}">
-            <span class="input-group-addon" style="border-left: 0; border-right: 0;">To</span>
-            <input type="text" class="form-control" id="{{$id['end']}}" placeholder="{{$label}}" name="{{$name['end']}}" value="{{ request($name['end'], \Illuminate\Support\Arr::get($value, 'end')) }}">
-        </div>
-    </div>
-</div>

resources/views/filter/datetime.blade.php

@@ -17,5 +17,5 @@
     <div class="input-group-addon">
         <b>{{$label}}</b> &nbsp;<i class="fa fa-calendar"></i>
     </div>
-        <input class="form-control" id="{{$id}}" placeholder="{{$label}}" name="{{$name}}" value="{{ request($name, $value) }}">
+        <input class="form-control" id="{{$id}}" autocomplete="off" placeholder="{{$label}}" name="{{$name}}" value="{{ request($name, $value) }}">
 </div>

resources/views/filter/gt.blade.php

@@ -1,3 +1,3 @@
-<div class="filter-input col-md-{{ $width }} " >
+<div class="filter-input col-sm-{{ $width }} " >
     <div class="form-group">@include($presenter->view())</div>
 </div>

resources/views/filter/lt.blade.php

@@ -1,3 +1,3 @@
-<div class="filter-input col-md-{{ $width }} " >
+<div class="filter-input col-sm-{{ $width }} " >
     <div class="form-group">@include($presenter->view())</div>
 </div>

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

@@ -0,0 +1,30 @@
+<div class="hidden">
+    <div 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-trans submit">
+                        <i class="fa fa-search"></i> &nbsp;{{ __('admin.search') }}
+                    </button>
+                    @if(!$disableResetButton)
+                        <a href="{!! $action !!}" class="reset btn btn-trans btn-default">
+                            <i class="fa fa-undo"></i> &nbsp;{{ __('admin.reset') }}
+                        </a>
+                    @endif
+                </div>
+
+                <div class="pull-right">
+                    <span class="btn btn-trans close-slider">
+                        <i class=" ti-shift-right"></i>
+                    </span>
+                </div>
+            </div>
+
+            @foreach($layout->columns() as $column)
+                @foreach($column->filters() as $filter)
+                    {!! $filter->render() !!}
+                @endforeach
+            @endforeach
+        </form>
+    </div>
+</div><?php

resources/views/filter/where.blade.php

@@ -1,3 +1,3 @@
-<div class="filter-input col-md-{{ $width }} " style="{!! $style !!}">
+<div class="filter-input col-sm-{{ $width }} " style="{!! $style !!}">
     <div class="form-group">@include($presenter->view())</div>
 </div>

resources/views/form/daterange.blade.php

@@ -10,14 +10,14 @@
             <div class="col-lg-6">
                 <div class="input-group">
                     <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
-                    <input type="text" name="{{$name['start']}}" value="{{ old($column['start'], $value['start']) }}" class="form-control {{$class['start']}}" style="width: 150px" {!! $attributes !!} />
+                    <input autocomplete="off" type="text" name="{{$name['start']}}" value="{{ old($column['start'], $value['start']) }}" class="form-control {{$class['start']}}" style="width: 150px" {!! $attributes !!} />
                 </div>
             </div>
 
             <div class="col-lg-6">
                 <div class="input-group">
                     <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
-                    <input type="text" name="{{$name['end']}}" value="{{ old($column['end'], $value['end']) }}" class="form-control {{$class['end']}}" style="width: 150px" {!! $attributes !!} />
+                    <input autocomplete="off" type="text" name="{{$name['end']}}" value="{{ old($column['end'], $value['end']) }}" class="form-control {{$class['end']}}" style="width: 150px" {!! $attributes !!} />
                 </div>
             </div>
         </div>

resources/views/form/datetimerange.blade.php

@@ -10,14 +10,14 @@
             <div class="col-lg-6">
                 <div class="input-group">
                     <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
-                    <input type="text" name="{{$name['start']}}" value="{{ old($column['start'], $value['start']) }}" class="form-control {{$class['start']}}" style="width:180px" {!! $attributes !!} />
+                    <input autocomplete="off" type="text" name="{{$name['start']}}" value="{{ old($column['start'], $value['start']) }}" class="form-control {{$class['start']}}" style="width:180px" {!! $attributes !!} />
                 </div>
             </div>
 
             <div class="col-lg-6">
                 <div class="input-group">
                     <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
-                    <input type="text" name="{{$name['end']}}" value="{{ old($column['end'], $value['end']) }}" class="form-control {{$class['end']}}" style="width: 180px" {!! $attributes !!} />
+                    <input autocomplete="off" type="text" name="{{$name['end']}}" value="{{ old($column['end'], $value['end']) }}" class="form-control {{$class['end']}}" style="width: 180px" {!! $attributes !!} />
                 </div>
             </div>
         </div>

resources/views/form/timerange.blade.php

@@ -10,14 +10,14 @@
             <div class="col-lg-6">
                 <div class="input-group">
                     <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
-                    <input type="text" name="{{$name['start']}}" value="{{ old($column['start'], $value['start']) }}" class="form-control {{$class['start']}}" style="width: 150px" {!! $attributes !!} />
+                    <input autocomplete="off" type="text" name="{{$name['start']}}" value="{{ old($column['start'], $value['start']) }}" class="form-control {{$class['start']}}" style="width: 150px" {!! $attributes !!} />
                 </div>
             </div>
 
             <div class="col-lg-6">
                 <div class="input-group">
                     <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
-                    <input type="text" name="{{$name['end']}}" value="{{ old($column['end'], $value['end']) }}" class="form-control {{$class['end']}}" style="width: 150px" {!! $attributes !!} />
+                    <input autocomplete="off" type="text" name="{{$name['end']}}" value="{{ old($column['end'], $value['end']) }}" class="form-control {{$class['end']}}" style="width: 150px" {!! $attributes !!} />
                 </div>
             </div>
         </div>

src/Controllers/LogController.php

@@ -84,9 +84,7 @@ class LogController extends Controller
 
             $filter->equal('ip', 'IP');
 
-            $filter->between('created_at')
-                ->width(4)
-                ->datetime();
+            $filter->between('created_at')->datetime();
         });
 
         return $grid;

src/Form/Field/Icon.php

@@ -14,7 +14,8 @@ setTimeout(function () {
 }, 10);
 JS;
 
-        $this->defaultAttribute('style', 'width: 200px');
+        $this->defaultAttribute('style', 'width: 200px')
+            ->defaultAttribute('autocomplete', 'off');
 
         return parent::render();
     }

src/Grid/Filter.php

@@ -63,12 +63,8 @@ class Filter implements Renderable
 {
     use HasBuilderEvents;
 
-    /**
-     * Ignore value.
-     *
-     * @var string
-     */
-    const IGNORE_VALUE = '___';
+    const MODE_PANEL = 'panel';
+    const MODE_RIGHT_SIDE = 'right-side';
 
     /**
      * @var array
@@ -122,7 +118,7 @@ class Filter implements Renderable
     /**
      * @var string
      */
-    protected $view = 'admin::filter.container';
+    protected $view;
 
     /**
      * @var string
@@ -186,6 +182,11 @@ class Filter implements Renderable
      */
     protected $inputs;
 
+    /**
+     * @var string
+     */
+    protected $mode = self::MODE_RIGHT_SIDE;
+
     /**
      * Create a new filter instance.
      *
@@ -197,7 +198,7 @@ class Filter implements Renderable
 
         $this->primaryKey = $model->getKeyName();
 
-        $this->filterID = $this->generateFilterId();
+        $this->filterID = $this->formatFilterId();
 
         $this->initLayout();
 
@@ -217,9 +218,11 @@ class Filter implements Renderable
     /**
      * @return string
      */
-    protected function generateFilterId()
+    protected function formatFilterId()
     {
-        return $this->model->grid()->getName().'-filter-box';
+        $gridName = $this->model->grid()->getName();
+
+        return 'filter-box'.($gridName ? '-'.$gridName : '');
     }
 
     /**
@@ -323,6 +326,38 @@ class Filter implements Renderable
         return $this;
     }
 
+    /**
+     * @param string|null $mode
+     *
+     * @return $this|string
+     */
+    public function mode(string $mode = null)
+    {
+        if ($mode === null) {
+            return $this->mode;
+        }
+
+        $this->mode = $mode;
+
+        return $this;
+    }
+
+    /**
+     * @return $this
+     */
+    public function panel()
+    {
+        return $this->mode(self::MODE_PANEL);
+    }
+
+    /**
+     * @return $this
+     */
+    public function rightSide()
+    {
+        return $this->mode(self::MODE_RIGHT_SIDE);
+    }
+
     /**
      * Get filter ID.
      *
@@ -395,7 +430,7 @@ class Filter implements Renderable
         $this->inputs = Arr::dot(request()->all());
 
         $this->inputs = array_filter($this->inputs, function ($input) {
-            return $input !== '' && ! is_null($input) && $input !== static::IGNORE_VALUE;
+            return $input !== '' && ! is_null($input);
         });
 
         $this->sanitizeInputs($this->inputs);
@@ -436,9 +471,9 @@ class Filter implements Renderable
     }
 
     /**
-     * @param $inputs
+     * @param array $inputs
      *
-     * @return array
+     * @return void
      */
     protected function sanitizeInputs(&$inputs)
     {
@@ -637,6 +672,10 @@ class Filter implements Renderable
 
         $this->callComposing();
 
+        Admin::style('.right-side-filter-container{border-bottom: 1px solid #f5f5f5;margin:-25px -25px 20px;height:48px;line-height: 48px;padding: 0 15px 12px;}');
+
+        $this->view = $this->mode === self::MODE_RIGHT_SIDE ? 'admin::filter.right-side-container' : 'admin::filter.container';
+
         return view($this->view)->with([
             'action'             => $this->action ?: $this->urlWithoutFilters(),
             'layout'             => $this->layout,

src/Grid/Filter/AbstractFilter.php

@@ -81,7 +81,7 @@ abstract class AbstractFilter
     /**
      * @var int
      */
-    protected $width = 3;
+    protected $width = 8;
 
     /**
      * @var string

src/Grid/Filter/Between.php

@@ -13,6 +13,11 @@ class Between extends AbstractFilter
      */
     protected $view = 'admin::filter.between';
 
+    /**
+     * @var int
+     */
+    protected $width = 11;
+
     /**
      * @var bool
      */
@@ -122,7 +127,7 @@ class Between extends AbstractFilter
      */
     public function datetime($options = [])
     {
-        $this->view = 'admin::filter.betweenDatetime';
+        $this->view = 'admin::filter.between-datetime';
 
         DateTime::collectAssets();
 

src/Grid/Filter/In.php

@@ -11,6 +11,11 @@ class In extends AbstractFilter
      */
     protected $query = 'whereIn';
 
+    /**
+     * @var int
+     */
+    protected $width = 10;
+
     /**
      * Get condition of this filter.
      *

src/Grid/Tools/FilterButton.php

@@ -3,6 +3,7 @@
 namespace Dcat\Admin\Grid\Tools;
 
 use Dcat\Admin\Admin;
+use Dcat\Admin\Grid\Filter;
 use Illuminate\Support\Str;
 
 class FilterButton extends AbstractTool
@@ -44,15 +45,57 @@ class FilterButton extends AbstractTool
      */
     protected function setupScripts()
     {
-        $id = $this->filter()->filterID();
-
-        Admin::script(
-            <<<JS
+        $filter = $this->filter();
+        $id = $filter->filterID();
+
+        if ($filter->mode() === Filter::MODE_RIGHT_SIDE) {
+            $expand = $filter->expand ? 'true' : 'false';
+
+            $script = <<<JS
+(function () {
+    var slider, 
+        expand = {$expand};
+    
+     function initSlider() {
+        slider = new LA.Slider({
+            direction: 'r',
+            dom: '#{$id}',
+            background: '#FFF',
+            shade: false,
+        });
+        
+        $(document).one('pjax:complete', function () {// 跳转新页面时移除弹窗
+            slider.destroy();
+        });
+        
+        expand && slider.open();
+    }
+    
+    expand && setTimeout(initSlider, 10);
+    
+    $('.{$this->getElementClassName()}').click(function () {
+        if (! slider) {
+            initSlider()
+        }
+        slider.toggle();
+       
+        return false
+    });
+    
+    $('#{$id} .close-slider').click(function () {
+        slider.close()
+    })
+})();
+JS;
+        } else {
+            $script = <<<JS
 $('.{$this->getElementClassName()}').click(function(){
     $('#{$id}').parent().collapse('toggle');
 }); 
-JS
-        );
+JS;
+        }
+
+        Admin::script($script);
     }
 
     /**

src/SimpleGrid.php

@@ -21,23 +21,17 @@ class SimpleGrid extends Grid
         $this->option('row_selector_clicktr', true);
 
         $this->tools->disableBatchActions();
+        $this->tools->disableFilterButton();
+
+        Content::composing(function (Content $content) {
+            $content->simple();
+        }, true);
     }
 
     protected function setupFilter()
     {
         parent::setupFilter();
 
-        $this->disableFilter();
-        $this->tools->disableFilterButton();
-
-        $this->filter
-            ->withoutInputBorder()
-            ->expand()
-            ->resetPosition()
-            ->hiddenResetButtonText();
-
-        Content::composing(function (Content $content) {
-            $content->simple()->prepend($this->filter);
-        }, true);
+        $this->filter->panel();
     }
 }

src/Traits/HasAssets.php

@@ -57,6 +57,7 @@ trait HasAssets
         'jquery.form'       => 'vendor/dcat-admin/jquery-form/dist/jquery.form.min.js',
         'waves'             => 'vendor/dcat-admin/waves/waves.min.js',
         'main'              => 'vendor/dcat-admin/dcat-admin/main.min.js',
+        'slider'            => 'vendor/dcat-admin/dcat-admin/slider.min.js',
     ];
 
     /**