wip

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

@@ -4,13 +4,6 @@
   border-radius: $card-border-radius;
 }
 
-.card.dcat-box {
-  .card-header {
-    border-bottom: 1px solid $divider-color;
-    padding: 1.1rem;
-  }
-}
-
 .card .card-header {
   padding: 1.1rem 1.1rem 0;
   align-items: center;

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

@@ -30,6 +30,13 @@
   }
 }
 
+.dcat-box.card {
+  .card-header {
+    border-bottom: 0;
+    padding: 1.3rem 1.5rem
+  }
+}
+
 // 过滤器滑动面板
 .right-side-filter-container .header {
   border-bottom: 1px solid $divider-color;
@@ -72,9 +79,19 @@
       margin-bottom: 1rem;
     }
   }
+
+  .dcat-box.card {
+    .card-header {
+      padding: .8rem 0
+    }
+  }
 }
 
 body:not(.dark-mode) .simple-grid {
+  .card {
+    box-shadow: none;
+  }
+
   .table-collapse {
     box-shadow: none;
     background: transparent;

resources/views/filter/gt.blade.php

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

resources/views/filter/lt.blade.php

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

resources/views/filter/select.blade.php

@@ -11,4 +11,26 @@
             <option value="{{$select}}" {{ Dcat\Admin\Support\Helper::equal($select, request($name, $value)) ?'selected':'' }}>{{$option}}</option>
         @endforeach
     </select>
-</div>
+</div>
+
+@include('admin::scripts.select')
+
+<script require="@select2">
+    var configs = {!! json_encode($configs) !!};
+
+    @yield('admin.select-ajax')
+
+    @if(isset($remote))
+    $.ajax({!! $remote['ajaxOptions'] !!}).done(function(data) {
+        $("{{ $selector }}").select2($.extend({!! json_encode($configs) !!}, {
+            data: data,
+        })).val({!! $values !!}).trigger("change");
+    });
+    @else
+    $("{!! $selector !!}").select2(configs);
+    @endif
+</script>
+
+@yield('admin.select-load')
+
+@yield('admin.select-lang')

resources/views/filter/where.blade.php

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

resources/views/form/select-script.blade.php

@@ -1,39 +1,10 @@
+
+@include('admin::scripts.select')
+
 <script require="@select2">
     var configs = {!! json_encode($configs) !!};
 
-    @if(isset($ajax))
-        configs = $.extend(configs, {
-        ajax: {
-            url: "{{ $ajax['url'] }}",
-            dataType: 'json',
-            delay: 250,
-            data: function (params) {
-                return {
-                    q: params.term,
-                    page: params.page
-                };
-            },
-            processResults: function (data, params) {
-                params.page = params.page || 1;
-
-                return {
-                    results: $.map(data.data, function (d) {
-                        d.id = d.{{ $ajax['idField'] }};
-                        d.text = d.{{ $ajax['textField'] }};
-                        return d;
-                    }),
-                    pagination: {
-                        more: data.next_page_url
-                    }
-                };
-            },
-            cache: true
-        },
-        escapeMarkup: function (markup) {
-            return markup;
-        }
-    });
-    @endif
+    @yield('admin.select-ajax')
 
     @if(isset($remoteOptions))
     $.ajax({!! json_encode($remoteOptions) !!}).done(function(data) {
@@ -56,32 +27,6 @@
     @endif
 </script>
 
-@if(isset($load))
-    <script once>
-        var selector = '{!! $selector !!}';
-
-        $(document).off('change', selector);
-        $(document).on('change', selector, function () {
-            var target = $(this).closest('.fields-group').find(".{{ $load['class'] }}");
-
-            if (String(this.value) !== '0' && ! this.value) {
-                return;
-            }
-            $.ajax("{{ $load['url'] }}?q="+this.value).then(function (data) {
-                target.find("option").remove();
-                $(target).select2({
-                    data: $.map(data, function (d) {
-                        d.id = d.{{ $load['idField'] }};
-                        d.text = d.{{ $load['textField'] }};
-                        return d;
-                    })
-                }).val(target.attr('data-value').split(',')).trigger('change');
-            });
-        });
-        $(selector).trigger('change');
-    </script>
-@endif
-
 @if(isset($loads))
     {{--loads联动--}}
     <script once>
@@ -123,33 +68,7 @@
     </script>
 @endif
 
+@yield('admin.select-load')
+
 {{--本地化--}}
-<script once>
-    @php
-        $lang = trans('select2');
-        $locale = config('app.locale');
-    @endphp
-    if ($.fn.select2) {
-        var e = $.fn.select2.amd;
-
-        e.define("select2/i18n/{{ $locale }}", [], function () {
-            return {
-                errorLoading: function () {
-                    return "{{ $lang['error_loading'] }}"
-                }, inputTooLong: function (e) {
-                    return "{{ $lang['input_too_long'] }}".replace(':num', e.input.length - e.maximum)
-                }, inputTooShort: function (e) {
-                    return "{{ $lang['input_too_short'] }}".replace(':num', e.minimum - e.input.length)
-                }, loadingMore: function () {
-                    return "{{ $lang['loading_more'] }}"
-                }, maximumSelected: function (e) {
-                    return "{{ $lang['maximum_selected'] }}".replace(':num', e.maximum)
-                }, noResults: function () {
-                    return "{{ $lang['no_results'] }}"
-                }, searching: function () {
-                    return "{{ $lang['searching'] }}"
-                }
-            }
-        }), {define: e.define, require: e.require}
-    }
-</script>
+@yield('admin.select-lang')

resources/views/form/selecttable.blade.php

@@ -26,9 +26,9 @@
     {!! $dialogScript !!}
 
     Dcat.grid.SelectTable({
-        dialog: replaceNestedFormIndex('#{$this->dialog->id()}'),
-        container: replaceNestedFormIndex('#{$this->getAttribute('id')}'),
-        input: replaceNestedFormIndex('#hidden-{$this->id}'),
+        dialog: replaceNestedFormIndex('#{{ $dialogId }}'),
+        container: replaceNestedFormIndex('#{{ $id }}'),
+        input: replaceNestedFormIndex('#hidden-{{ $id }}'),
         @if(isset($max))
         multiple: true,
         max: {{ $max }},

resources/views/grid/table.blade.php

@@ -1,7 +1,7 @@
 
 <div class="card dcat-box dt-bootstrap4">
 
-    <div class="card-header d-block pb-0" style="border: 0;padding: 1.3rem 1.5rem">
+    <div class="card-header d-block pb-0">
         @include('admin::grid.table-toolbar')
 {{--        <hr class="mb-0" style="margin-top: .6rem" />--}}
     </div>

resources/views/scripts/select.blade.php

@@ -0,0 +1,98 @@
+<script>
+@section('admin.select-ajax')
+    @if(isset($ajax))
+        configs = $.extend(configs, {
+        ajax: {
+            url: "{{ $ajax['url'] }}",
+            dataType: 'json',
+            delay: 250,
+            data: function (params) {
+                return {
+                    q: params.term,
+                    page: params.page
+                };
+            },
+            processResults: function (data, params) {
+                params.page = params.page || 1;
+
+                return {
+                    results: $.map(data.data, function (d) {
+                        d.id = d.{{ $ajax['idField'] }};
+                        d.text = d.{{ $ajax['textField'] }};
+                        return d;
+                    }),
+                    pagination: {
+                        more: data.next_page_url
+                    }
+                };
+            },
+            cache: true
+        },
+        escapeMarkup: function (markup) {
+            return markup;
+        }
+    });
+    @endif
+@endsection
+</script>
+
+@section('admin.select-load')
+    @if(isset($load))
+    <script once>
+        var selector = '{!! $selector !!}';
+
+        $(document).off('change', selector);
+        $(document).on('change', selector, function () {
+            var target = $(this).closest('.{{ $load['group'] ?? 'fields-group' }}').find(".{{ $load['class'] }}");
+
+            if (String(this.value) !== '0' && ! this.value) {
+                return;
+            }
+            $.ajax("{{ $load['url'] }}?q="+this.value).then(function (data) {
+                target.find("option").remove();
+                $(target).select2({
+                    data: $.map(data, function (d) {
+                        d.id = d.{{ $load['idField'] }};
+                        d.text = d.{{ $load['textField'] }};
+                        return d;
+                    })
+                }).val(target.attr('data-value').split(',')).trigger('change');
+            });
+        });
+        $(selector).trigger('change');
+    </script>
+    @endif
+@endsection
+
+@section('admin.select-lang')
+{{--本地化--}}
+<script once>
+    @php
+        $lang = trans('select2');
+        $locale = config('app.locale');
+    @endphp
+    if ($.fn.select2) {
+        var e = $.fn.select2.amd;
+
+        e.define("select2/i18n/{{ $locale }}", [], function () {
+            return {
+                errorLoading: function () {
+                    return "{{ $lang['error_loading'] }}"
+                }, inputTooLong: function (e) {
+                    return "{{ $lang['input_too_long'] }}".replace(':num', e.input.length - e.maximum)
+                }, inputTooShort: function (e) {
+                    return "{{ $lang['input_too_short'] }}".replace(':num', e.minimum - e.input.length)
+                }, loadingMore: function () {
+                    return "{{ $lang['loading_more'] }}"
+                }, maximumSelected: function (e) {
+                    return "{{ $lang['maximum_selected'] }}".replace(':num', e.maximum)
+                }, noResults: function () {
+                    return "{{ $lang['no_results'] }}"
+                }, searching: function () {
+                    return "{{ $lang['searching'] }}"
+                }
+            }
+        }), {define: e.define, require: e.require}
+    }
+</script>
+@endsection

src/Form/Field/SelectTable.php

@@ -152,6 +152,7 @@ class SelectTable extends Field
             'style'        => $this->style,
             'dialog'       => $this->dialog->render(),
             'placeholder'  => $this->placeholder(),
+            'dialogId'     => $this->dialog->id(),
             'dialogScript' => $this->dialog->getScript(),
         ]);
 

src/Grid/Filter/AbstractFilter.php

@@ -2,6 +2,7 @@
 
 namespace Dcat\Admin\Grid\Filter;
 
+use Dcat\Admin\Admin;
 use Dcat\Admin\Grid\Filter;
 use Dcat\Admin\Grid\Filter\Presenter\Checkbox;
 use Dcat\Admin\Grid\Filter\Presenter\DateTime;
@@ -578,29 +579,45 @@ abstract class AbstractFilter
      */
     protected function variables()
     {
-        $variables = $this->presenter()->variables();
-
-        $value = $this->value ?: Arr::get($this->parent->inputs(), $this->column);
-
         return array_merge([
             'id'        => $this->id,
             'name'      => $this->formatName($this->column),
             'label'     => $this->label,
-            'value'     => $value ?: $this->defaultValue,
-            'presenter' => $this->presenter(),
+            'value'     => $this->value(),
             'width'     => $this->width,
             'style'     => $this->style,
-        ], $variables);
+        ], $this->presenter()->variables());
+    }
+
+    public function value()
+    {
+        $value = $this->value ?: Arr::get($this->parent->inputs(), $this->column);
+
+        return $value === null || $value === '' ? $this->defaultValue : $value;
     }
 
     /**
      * Render this filter.
      *
-     * @return \Illuminate\View\View|string
+     * @return string
      */
     public function render()
     {
-        return view($this->view, $this->variables());
+        $variables = $this->variables();
+
+        $variables['presenter'] = $this->renderPresenter();
+
+        return Admin::view($this->view, $variables);
+    }
+
+    /**
+     * @return string
+     *
+     * @throws \Throwable
+     */
+    protected function renderPresenter()
+    {
+        return Admin::view($this->presenter->view(), $this->variables());
     }
 
     /**

src/Grid/Filter/Presenter/Presenter.php

@@ -32,6 +32,11 @@ abstract class Presenter
      */
     protected $width = null;
 
+    /**
+     * @var array
+     */
+    protected $variables = [];
+
     /**
      * Set parent filter.
      *
@@ -108,6 +113,13 @@ abstract class Presenter
         return $value;
     }
 
+    public function addVariables(array $variables)
+    {
+        $this->variables = array_merge($this->variables, $variables);
+
+        return $this;
+    }
+
     /**
      * Blade template variables for this presenter.
      *
@@ -115,7 +127,7 @@ abstract class Presenter
      */
     public function variables(): array
     {
-        return [];
+        return $this->variables;
     }
 
     /**

src/Grid/Filter/Presenter/Select.php

@@ -2,21 +2,12 @@
 
 namespace Dcat\Admin\Grid\Filter\Presenter;
 
-use Dcat\Admin\Admin;
-use Dcat\Admin\Form\Field\Select as SelectForm;
 use Illuminate\Contracts\Support\Arrayable;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Arr;
 
 class Select extends Presenter
 {
-    public static $js = [
-        '@select2',
-    ];
-    public static $css = [
-        '@select2',
-    ];
-
     /**
      * @var string
      */
@@ -57,8 +48,6 @@ class Select extends Presenter
     public function __construct($options)
     {
         $this->options = $options;
-
-        SelectForm::defineLang();
     }
 
     /**
@@ -107,23 +96,13 @@ class Select extends Presenter
             $this->options = $this->options->toArray();
         }
 
-        if (empty($this->script)) {
-            $configs = array_merge([
-                'allowClear'  => true,
-                'placeholder' => [
-                    'id'   => '',
-                    'text' => $this->placeholder(),
-                ],
-            ], $this->config);
-
-            $configs = json_encode($configs);
-
-            $this->script = <<<JS
-$(".{$this->getElementClass()}").select2($configs);
-JS;
-        }
-
-        Admin::script($this->script);
+        $this->addVariables([
+            'allowClear'  => true,
+            'placeholder' => [
+                'id'   => '',
+                'text' => $this->placeholder(),
+            ],
+        ]);
 
         return is_array($this->options) ? $this->options : [];
     }
@@ -182,16 +161,13 @@ JS;
         $ajaxOptions = [
             'url' => admin_url($url.'?'.http_build_query($parameters)),
         ];
-        $configs = array_merge([
+        $this->addDefaultConfig([
             'allowClear'  => true,
             'placeholder' => [
                 'id'   => '',
                 'text' => $this->placeholder(),
             ],
-        ], $this->config);
-
-        $configs = json_encode($configs);
-        $configs = substr($configs, 1, strlen($configs) - 2);
+        ]);
 
         $ajaxOptions = json_encode(array_merge($ajaxOptions, $options), JSON_UNESCAPED_UNICODE);
 
@@ -199,17 +175,32 @@ JS;
         $values = array_filter($values);
         $values = json_encode($values);
 
-        $this->script = <<<JS
+        return $this->addVariables([
+            'remote' => compact('ajaxOptions', 'values')
+        ]);
+    }
 
-$.ajax($ajaxOptions).done(function(data) {
-  $(".{$this->getElementClass()}").select2({
-    data: data,
-    $configs
-  }).val($values).trigger("change");
-  
-});
+    /**
+     * @param string|array $key
+     * @param mixed        $value
+     *
+     * @return $this
+     */
+    public function addDefaultConfig($key, $value = null)
+    {
+        if (is_array($key)) {
+            foreach ($key as $k => $v) {
+                $this->addDefaultConfig($k, $v);
+            }
+
+            return $this;
+        }
+
+        if (! isset($this->config[$key])) {
+            $this->config[$key] = $value;
+        }
 
-JS;
+        return $this;
     }
 
     /**
@@ -236,56 +227,20 @@ JS;
      * @param string $resourceUrl
      * @param $idField
      * @param $textField
+     *
+     * @return $this
      */
     public function ajax(string $resourceUrl, string $idField = 'id', string $textField = 'text')
     {
-        $configs = array_merge([
+        $this->addDefaultConfig([
             'allowClear'         => true,
             'placeholder'        => $this->placeholder(),
             'minimumInputLength' => 1,
-        ], $this->config);
-
-        $resourceUrl = admin_url($resourceUrl);
-
-        $configs = json_encode($configs);
-        $configs = substr($configs, 1, strlen($configs) - 2);
-
-        $this->script = <<<JS
-
-$(".{$this->getElementClass()}").select2({
-  ajax: {
-    url: "$resourceUrl",
-    dataType: 'json',
-    delay: 250,
-    data: function (params) {
-      return {
-        q: params.term,
-        page: params.page
-      };
-    },
-    processResults: function (data, params) {
-      params.page = params.page || 1;
-
-      return {
-        results: $.map(data.data, function (d) {
-                   d.id = d.$idField;
-                   d.text = d.$textField;
-                   return d;
-                }),
-        pagination: {
-          more: data.next_page_url
-        }
-      };
-    },
-    cache: true
-  },
-  $configs,
-  escapeMarkup: function (markup) {
-      return markup;
-  }
-});
-
-JS;
+        ]);
+
+        $url = admin_url($resourceUrl);
+
+        return $this->addVariables(['ajax' => compact('url', 'idField', 'textField')]);
     }
 
     /**
@@ -293,17 +248,24 @@ JS;
      */
     public function variables(): array
     {
-        return [
+        return array_merge([
             'options'   => $this->buildOptions(),
             'class'     => $this->getElementClass(),
+            'selector'  => $this->getElementClassSelector(),
             'selectAll' => $this->selectAll,
-        ];
+            'configs'   => $this->config,
+        ], $this->variables);
+    }
+
+    public function getElementClassSelector()
+    {
+        return '.'.$this->getElementClass();
     }
 
     /**
      * @return string
      */
-    protected function getElementClass(): string
+    public function getElementClass(): string
     {
         return $this->elementClass ?:
             ($this->elementClass = $this->getClass($this->filter->column()));
@@ -321,35 +283,13 @@ JS;
      */
     public function load($target, string $resourceUrl, string $idField = 'id', string $textField = 'text'): self
     {
-        $class = $this->getElementClass();
+        $class = $this->getClass($target);
 
-        $resourceUrl = admin_url($resourceUrl);
+        $url = admin_url($resourceUrl);
 
-        $script = <<<JS
-$(document).off('change', ".{$class}");
-$(document).on('change', ".{$class}", function () {
-    var target = $(this).closest('form').find(".{$this->getClass($target)}");
-    if (this.value !== '0' && ! this.value) {
-        return;
-    }
-    $.ajax("$resourceUrl?q="+this.value).then(function (data) {
-        target.find("option").remove();
-        $.each(data, function (i, item) {
-            $(target).append($('<option>', {
-                value: item.$idField,
-                text : item.$textField
-            }));
-        });
-        
-        $(target).val(target.attr('data-value')).trigger('change');
-    });
-});
-$(".{$class}").trigger('change')
-JS;
-
-        Admin::script($script);
+        $group = 'form';
 
-        return $this;
+        return $this->addVariables(['load' => compact('url', 'class', 'idField', 'textField', 'group')]);
     }
 
     /**