wip

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

@@ -95,7 +95,7 @@ a.btn-sm, .btn-group-sm > a.btn {
 }
 
 .btn-light {
-  border-color: #f7f7f9!important;
+  border-color: $input-border-color!important;
   background-color: #f7f7f9!important;
   color: #444;
 }
@@ -164,3 +164,15 @@ a.btn-sm, .btn-group-sm > a.btn {
   background: rgba($primary, .05);
 }
 
+.number-group {
+  .input-group-btn:first-child .btn {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    border-right: 0;
+  }
+  .input-group-btn:last-child .btn {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+}
+

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

@@ -10,7 +10,7 @@
 
 input.form-control, div.form-control {
   //max-height: 36px;
-  min-height: 36px;
+  min-height: $input-height;
   border-radius: $card-border-radius;
 }
 
@@ -149,12 +149,12 @@ select.form-control:not([multiple=multiple]) {
 }
 
 .select2-container .select2-selection--multiple {
-  min-height: 36px!important;
+  min-height: $input-height!important;
   //max-height: 36px!important;
 }
 
 .select2-container--classic .select2-selection--single, .select2-container--default .select2-selection--single {
-  min-height: 36px;
+  min-height: $input-height;
   padding: 5px;
   border: 1px solid rgba(0,0,0,.2);
 }

resources/assets/dcat/sass/variables/_variables.scss

@@ -31,3 +31,5 @@ $btn-group-btn-shadow: 0 2px 0 0 rgba(0,0,0,.08);
 $menu-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
 
 $card-border-radius: .25rem;
+
+$input-height: 34px;

resources/views/form/captcha.blade.php

@@ -18,4 +18,10 @@
         @include('admin::form.help-block')
 
     </div>
-</div>
+</div>
+
+<script once>
+    $('.field-refresh-captcha').off('click').on('click', function () {
+        $(this).attr('src', $(this).attr('data-url')+'?'+Math.random());
+    });
+</script>

resources/views/form/checkbox.blade.php

@@ -19,3 +19,11 @@
 
     </div>
 </div>
+
+@if(! empty($canCheckAll))
+<script once>
+    $('[name="_check_all_"]').on('change', function () {
+        $(this).parents('.form-field').find('input[type="checkbox"]').prop('checked', this.checked);
+    });
+</script>
+@endif

resources/views/form/color.blade.php

@@ -1,5 +1,8 @@
-<div class="{{$viewClass['form-group']}}">
+<style>
+    .popover{z-index:29891015}
+</style>
 
+<div class="{{$viewClass['form-group']}}">
     <div for="{{ $id }}" class="{{$viewClass['label']}} control-label">
         <span>{!! $label !!}</span>
     </div>
@@ -19,6 +22,11 @@
         </div>
 
         @include('admin::form.help-block')
-
     </div>
-</div>
+</div>
+
+<script require="@color">
+    $('{{ $selector }}').colorpicker({!! json_encode($options) !!}).on('colorpickerChange', function(event) {
+        $(this).parents('.input-group').find('.input-group-prepend i').css('background-color', event.color.toString());
+    });
+</script>

resources/views/form/daterange.blade.php

@@ -30,3 +30,16 @@
 
     </div>
 </div>
+
+<script require="@moment,@bootstrap-datetimepicker">
+    var options = {!! json_encode($options) !!};
+
+    $('{{ $selector['start'] }}').datetimepicker(options);
+    $('{{ $selector['end'] }}').datetimepicker($.extend(options, {useCurrent: false}));
+    $("{{ $selector['start'] }}").on("dp.change", function (e) {
+        $('{{ $selector['end'] }}').data("DateTimePicker").minDate(e.date);
+    });
+    $("{{ $selector['end'] }}").on("dp.change", function (e) {
+        $('{{ $selector['start'] }}').data("DateTimePicker").maxDate(e.date);
+    });
+</script>

resources/views/form/editor.blade.php

@@ -12,3 +12,25 @@
 
     </div>
 </div>
+
+<script require="@tinymce">
+    var opts = {!! $options !!};
+
+    opts.selector = replaceNestedFormIndex(opts.selector);
+
+    if (! opts.init_instance_callback) {
+        opts.init_instance_callback = function (editor) {
+            editor.on('Change', function(e) {
+                var content = e.target.getContent();
+                if (! content) {
+                    content = e.level.fragments;
+                    content = content.length && content.join('');
+                }
+
+                $(replaceNestedFormIndex('#{{ $id }}')).val(String(content).replace('<p><br data-mce-bogus="1"></p>', '').replace('<p><br></p>', ''));
+            });
+        }
+    }
+
+    tinymce.init(opts)
+</script>

resources/views/form/file.blade.php

@@ -1,4 +1,4 @@
-<div id="{{ $containerId }}" class="{{$viewClass['form-group']}}">
+<div id="{{ $id }}-container" class="{{$viewClass['form-group']}}">
 
     <label for="{{$column}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
@@ -32,4 +32,53 @@
 
         @include('admin::form.help-block')
     </div>
-</div>
+</div>
+
+<script require="@webuploader">
+    var uploader,
+        newPage,
+        cID = replaceNestedFormIndex('#{{ $id }}-container'),
+        ID = replaceNestedFormIndex('#{{ $id }}'),
+        options = {!! $options !!};
+
+    init();
+
+    function init() {
+        var opts = $.extend({
+            selector: cID,
+            addFileButton: cID+' .add-file-button',
+            inputSelector: ID,
+        }, options);
+
+        opts.upload = $.extend({
+            pick: {
+                id: cID+' .file-picker',
+                name: '_file_',
+                label: '<i class="feather icon-folder"></i>&nbsp; {!! trans('admin.uploader.add_new_media') !!}'
+            },
+            dnd: cID+' .dnd-area',
+            paste: cID+' .web-uploader'
+        }, opts);
+
+        uploader = Dcat.Uploader(opts);
+        uploader.build();
+        uploader.preview();
+
+        function resize() {
+            setTimeout(function () {
+                if (! uploader) return;
+
+                uploader.refreshButton();
+                resize();
+
+                if (! newPage) {
+                    newPage = 1;
+                    $(document).one('pjax:complete', function () {
+                        uploader = null;
+                    });
+                }
+            }, 250);
+        }
+        resize();
+    }
+</script>

resources/views/form/keyvalue.blade.php

@@ -1,3 +1,7 @@
+<style>
+    td .form-group {margin-bottom: 0 !important;}
+</style>
+
 <div class="{{$viewClass['form-group']}}">
 
     <label class="{{$viewClass['label']}} control-label">{{$label}}</label>
@@ -64,31 +68,47 @@
     </div>
 </div>
 
-<template class="{{$class}}-tpl">
-    <tr>
-        <td>
-            <div class="form-group  ">
-                <div class="col-sm-12">
-                    <div class="help-block with-errors"></div>
-                    <input name="{{ $name }}[keys][{key}]" class="form-control" required/>
+<template>
+    <template class="{{$class}}-tpl">
+        <tr>
+            <td>
+                <div class="form-group  ">
+                    <div class="col-sm-12">
+                        <div class="help-block with-errors"></div>
+                        <input name="{{ $name }}[keys][{key}]" class="form-control" required/>
+                    </div>
                 </div>
-            </div>
-        </td>
-        <td>
-            <div class="form-group  ">
-                <div class="col-sm-12">
-                    <div class="help-block with-errors"></div>
-                    <input name="{{ $name }}[values][{key}]" class="form-control" />
+            </td>
+            <td>
+                <div class="form-group  ">
+                    <div class="col-sm-12">
+                        <div class="help-block with-errors"></div>
+                        <input name="{{ $name }}[values][{key}]" class="form-control" />
+                    </div>
                 </div>
-            </div>
-        </td>
+            </td>
 
-        <td class="form-group">
-            <div>
-                <div class="{{ $class }}-remove btn btn-white btn-sm pull-right">
-                    <i class="feather icon-trash">&nbsp;</i>{{ __('admin.remove') }}
+            <td class="form-group">
+                <div>
+                    <div class="{{ $class }}-remove btn btn-white btn-sm pull-right">
+                        <i class="feather icon-trash">&nbsp;</i>{{ __('admin.remove') }}
+                    </div>
                 </div>
-            </div>
-        </td>
-    </tr>
-</template>
+            </td>
+        </tr>
+    </template>
+</template>
+
+<script>
+    var index = {{ $count }};
+    $('.{{ $class }}-add').on('click', function () {
+        var tpl = $('template.{{ $class }}-tpl').html().replace('{key}', index).replace('{key}', index);
+        $('tbody.kv-{{ $class }}-table').append(tpl);
+
+        index++;
+    });
+
+    $('tbody').on('click', '.{{ $class }}-remove', function () {
+        $(this).closest('tr').remove();
+    });
+</script>

resources/views/form/listbox.blade.php

@@ -17,3 +17,7 @@
 
     </div>
 </div>
+
+<script require="@jquery.bootstrap-duallistbox">
+    $("{{ $selector }}").bootstrapDualListbox({!! $settings !!});
+</script>

resources/views/form/listfield.blade.php

@@ -1,3 +1,7 @@
+<style>
+    td .form-group {margin-bottom: 0 !important;}
+</style>
+
 <div class="{{$viewClass['form-group']}}">
 
     <label class="{{$viewClass['label']}} control-label">{{$label}}</label>
@@ -11,7 +15,7 @@
 
         <table class="table table-hover">
 
-            <tbody class="list-{{$columnClass}}-table">
+            <tbody class="list-{{$class}}-table">
 
             @foreach(($value ?: []) as $k => $v)
 
@@ -26,7 +30,7 @@
                     </td>
 
                     <td style="width: 85px;">
-                        <div class="{{$columnClass}}-remove btn btn-white btn-sm pull-right">
+                        <div class="{{$class}}-remove btn btn-white btn-sm pull-right">
                             <i class="feather icon-trash">&nbsp;</i>{{ __('admin.remove') }}
                         </div>
                     </td>
@@ -37,7 +41,7 @@
             <tr>
                 <td></td>
                 <td>
-                    <div class="{{ $columnClass }}-add btn btn-primary btn-outline btn-sm pull-right">
+                    <div class="{{ $class }}-add btn btn-primary btn-outline btn-sm pull-right">
                         <i class="feather icon-save"></i>&nbsp;{{ __('admin.new') }}
                     </div>
                 </td>
@@ -47,21 +51,36 @@
     </div>
 </div>
 
-<template class="{{$columnClass}}-tpl">
-    <tr>
-        <td>
-            <div class="form-group">
-                <div class="col-sm-12">
-                    <input name="{{ $name }}[values][{key}]" class="form-control" />
-                    <div class="help-block with-errors"></div>
+<template>
+    <template class="{{$class}}-tpl">
+        <tr>
+            <td>
+                <div class="form-group">
+                    <div class="col-sm-12">
+                        <input name="{{ $name }}[values][{key}]" class="form-control" />
+                        <div class="help-block with-errors"></div>
+                    </div>
                 </div>
-            </div>
-        </td>
+            </td>
+
+            <td style="width: 85px;">
+                <div class="{{$class}}-remove btn btn-white btn-sm pull-right">
+                    <i class="feather icon-trash">&nbsp;</i>{{ __('admin.remove') }}
+                </div>
+            </td>
+        </tr>
+    </template>
+</template>
+
+<script>
+    var index = {{ $count }};
+    $('.{{ $class }}-add').on('click', function () {
+        var tpl = $('template.{{ $class }}-tpl').html().replace('{key}', index);
+        $('tbody.list-{{ $class }}-table').append(tpl);
 
-        <td style="width: 85px;">
-            <div class="{{$columnClass}}-remove btn btn-white btn-sm pull-right">
-                <i class="feather icon-trash">&nbsp;</i>{{ __('admin.remove') }}
-            </div>
-        </td>
-    </tr>
-</template>
+        index++;
+    });
+    $('tbody').on('click', '.{{ $class }}-remove', function () {
+        $(this).closest('tr').remove();
+    });
+</script>

resources/views/form/markdown.blade.php

@@ -1,3 +1,7 @@
+<style>
+    .editormd-fullscreen {z-index: 99999999;}
+</style>
+
 <div class="{{$viewClass['form-group']}}">
 
     <label for="{{$id}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
@@ -14,3 +18,7 @@
 
     </div>
 </div>
+
+<script require="@markdown">
+    editormd(replaceNestedFormIndex("{{ $id }}"), {!! $options !!});
+</script>

resources/views/form/number.blade.php

@@ -1,3 +1,7 @@
+<style>
+    .number-group .input-group{flex-wrap: nowrap}
+</style>
+
 <div class="{{$viewClass['form-group']}}">
 
     <div for="{{ $id }}" class="{{$viewClass['label']}} control-label">
@@ -23,4 +27,14 @@
         @include('admin::form.help-block')
 
     </div>
-</div>
+</div>
+
+<script require="@number-input">
+    $('{{ $selector }}:not(.initialized)')
+        .addClass('initialized')
+        .bootstrapNumber({
+            upClass: 'primary shadow-0',
+            downClass: 'light shadow-0',
+            center: true
+        });
+</script>

resources/views/form/selecttable.blade.php

@@ -20,4 +20,19 @@
         @include('admin::form.help-block')
 
     </div>
-</div>
+</div>
+
+<script require="@select-table">
+    {!! $dialogScript !!}
+
+    Dcat.grid.SelectTable({
+        dialog: replaceNestedFormIndex('#{$this->dialog->id()}'),
+        container: replaceNestedFormIndex('#{$this->getAttribute('id')}'),
+        input: replaceNestedFormIndex('#hidden-{$this->id}'),
+        @if(isset($max))
+        multiple: true,
+        max: {{ $max }},
+        @endif
+        values: {!! $options !!},
+    });
+</script>

resources/views/form/slider.blade.php

@@ -12,3 +12,9 @@
 
     </div>
 </div>
+
+<script require="@ionslider">
+    setTimeout(function () {
+        $('{{ $selector }}').ionRangeSlider({!! $options !!})
+    }, 400);
+</script>

resources/views/form/switchfield.blade.php

@@ -12,3 +12,13 @@
 
     </div>
 </div>
+
+<script require="@switchery">
+    var $input = $('[data-plugin="{{ $formId }}switchery"]');
+
+    $input.parent().find('.switchery').remove();
+
+    $input.each(function() {
+        new Switchery($(this)[0], $(this).data())
+    })
+</script>

resources/views/form/tags.blade.php

@@ -17,3 +17,75 @@
 
     </div>
 </div>
+
+<script require="@select2">
+    var options = {
+        tags: true,
+        tokenSeparators: [',', ';', '，', '；', ' '],
+        createTag: function(params) {
+            if (/[,;，； ]/.test(params.term)) {
+                var str = params.term.trim().replace(/[,;，；]*$/, '');
+                return { id: str, text: str }
+            } else {
+                return null;
+            }
+        }
+    };
+
+    @if(isset($ajax))
+    options = $.extend(options, {
+        ajax: {
+            url: "{!! $ajax['url'] !!}",
+            dataType: 'json',
+            delay: 250,
+            cache: true,
+            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
+                    }
+                };
+            },
+        },
+        escapeMarkup: function (markup) {
+            return markup;
+        },
+    });
+    @endif
+
+    $("{{ $selector }}").select2(options);
+</script>
+
+{{--解决输入中文后无法回车结束的问题。--}}
+<script once>
+    var selector = '.select2-selection--multiple .select2-search__field';
+    $(document).off('keyup', selector).on('keyup', selector, function (event) {
+        try {
+            if (event.keyCode == 13) {
+                var $this = $(this), optionText = $this.val();
+                if (optionText != "" && $this.find("option[value='" + optionText + "']").length === 0) {
+                    var $select = $this.parents('.select2-container').prev("select");
+                    var newOption = new Option(optionText, optionText, true, true);
+                    $select.append(newOption).trigger('change');
+                    $this.val('');
+                    $select.select2('close');
+                }
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    });
+</script>

src/Form/Field.php

@@ -273,12 +273,11 @@ class Field implements Renderable
     }
 
     /**
-     * @param string|null $relationName
-     * @param string      $relationPrimaryKey
+     * @param array $options
      *
      * @return $this
      */
-    public function setNestedFormRelation(?string $relationName, $relationPrimaryKey)
+    public function setNestedFormRelation(array $options = [])
     {
         if (is_array($this->id)) {
             $this->id = array_map(function ($v) {
@@ -1129,7 +1128,7 @@ class Field implements Renderable
      */
     public function variables()
     {
-        return array_merge($this->variables, [
+        return array_merge([
             'id'          => $this->id,
             'name'        => $this->getElementName(),
             'help'        => $this->help,
@@ -1144,7 +1143,8 @@ class Field implements Renderable
             'disabled'    => $this->attributes['disabled'] ?? false,
             'formId'      => $this->getFormElementId(),
             'selector'    => $this->getElementClassSelector(),
-        ]);
+            'options'     => $this->options,
+        ], $this->variables);
     }
 
     protected function isCreating()

src/Form/Field/Button.php

@@ -31,9 +31,9 @@ class Button extends Field
     public function on($event, $callback)
     {
         $this->script = <<<JS
-        $('{$this->getElementClassSelector()}').on('$event', function() {
-            $callback
-        });
+$('{$this->getElementClassSelector()}').on('$event', function() {
+    $callback
+});
 JS;
     }
 }

src/Form/Field/Captcha.php

@@ -31,12 +31,6 @@ class Captcha extends Text
 
     public function render()
     {
-        $this->script = <<<'JS'
-$('.field-refresh-captcha').off('click').on('click', function () {
-    $(this).attr('src', $(this).attr('data-url')+'?'+Math.random());
-});
-JS;
-
         $this->addVariables(['captchaSrc' => captcha_src()]);
 
         return parent::render();

src/Form/Field/Checkbox.php

@@ -10,9 +10,6 @@ class Checkbox extends MultipleSelect
 {
     use CanCascadeFields;
 
-    public static $css = [];
-    public static $js = [];
-
     protected $style = 'primary';
 
     protected $cascadeEvent = 'change';
@@ -96,8 +93,6 @@ class Checkbox extends MultipleSelect
             'checkAll' => $this->makeCheckAllCheckbox(),
         ]);
 
-        $this->script = ';';
-
         return parent::render();
     }
 
@@ -107,19 +102,8 @@ class Checkbox extends MultipleSelect
             return;
         }
 
-        $this->addCheckAllScript();
+        $this->addVariables(['canCheckAll' => $this->canCheckAll]);
 
         return WidgetCheckbox::make('_check_all_', [__('admin.all')]);
     }
-
-    protected function addCheckAllScript()
-    {
-        Admin::script(
-            <<<'JS'
-$('[name="_check_all_"]').on('change', function () {
-    $(this).parents('.form-field').find('input[type="checkbox"]').prop('checked', this.checked);
-});
-JS
-        );
-    }
 }

src/Form/Field/Color.php

@@ -2,18 +2,8 @@
 
 namespace Dcat\Admin\Form\Field;
 
-use Dcat\Admin\Admin;
-
 class Color extends Text
 {
-    protected static $css = [
-        '@admin/dcat/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css',
-    ];
-
-    protected static $js = [
-        '@admin/dcat/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js',
-    ];
-
     protected $view = 'admin::form.color';
 
     /**
@@ -46,17 +36,6 @@ class Color extends Text
         return $this->mergeOptions(['format' => 'rgba']);
     }
 
-    protected function addScript()
-    {
-        $options = json_encode($this->options);
-
-        $this->script = <<<JS
-$('{$this->getElementClassSelector()}').colorpicker($options).on('colorpickerChange', function(event) {
-    $(this).parents('.input-group').find('.input-group-prepend i').css('background-color', event.color.toString());
-});
-JS;
-    }
-
     /**
      * Render this filed.
      *
@@ -64,10 +43,6 @@ JS;
      */
     public function render()
     {
-        Admin::style('.popover{z-index:29891015}');
-
-        $this->addScript();
-
         $this->defaultAttribute('style', 'width: 160px;flex:none');
 
         return parent::render();

src/Form/Field/Currency.php

@@ -4,12 +4,6 @@ namespace Dcat\Admin\Form\Field;
 
 class Currency extends Text
 {
-    public static $js = '@jquery.inputmask';
-    public static $css = '@jquery.inputmask';
-
-    /**
-     * @var string
-     */
     protected $symbol = '$';
 
     /**

src/Form/Field/DateRange.php

@@ -6,19 +6,8 @@ use Dcat\Admin\Form\Field;
 
 class DateRange extends Field
 {
-    public static $js = [
-        '@moment',
-        '@bootstrap-datetimepicker',
-    ];
-    public static $css = '@bootstrap-datetimepicker';
-
     protected $format = 'YYYY-MM-DD';
 
-    /**
-     * Column name.
-     *
-     * @var string
-     */
     protected $column = [];
 
     public function __construct($column, $arguments)
@@ -46,29 +35,13 @@ class DateRange extends Field
     {
         $this->options['locale'] = config('app.locale');
 
-        $startOptions = json_encode($this->options);
-        $endOptions = json_encode($this->options + ['useCurrent' => false]);
-
-        $class = $this->getElementClassSelector();
-
-        $this->script = <<<JS
-            $('{$class['start']}').datetimepicker($startOptions);
-            $('{$class['end']}').datetimepicker($endOptions);
-            $("{$class['start']}").on("dp.change", function (e) {
-                $('{$class['end']}').data("DateTimePicker").minDate(e.date);
-            });
-            $("{$class['end']}").on("dp.change", function (e) {
-                $('{$class['start']}').data("DateTimePicker").maxDate(e.date);
-            });
-JS;
+        $this->addVariables(['options' => $this->options]);
 
         return parent::render();
     }
 
     /**
-     * Get validation messages for the field.
-     *
-     * @return array|mixed
+     * {@inheritDoc}
      */
     public function getValidationMessages()
     {

src/Form/Field/Decimal.php

@@ -4,9 +4,6 @@ namespace Dcat\Admin\Form\Field;
 
 class Decimal extends Text
 {
-    public static $js = '@jquery.inputmask';
-    public static $css = '@jquery.inputmask';
-
     /**
      * @see https://github.com/RobinHerbots/Inputmask#options
      *

src/Form/Field/Editor.php

@@ -14,10 +14,6 @@ use Dcat\Admin\Support\JavaScript;
  */
 class Editor extends Field
 {
-    protected static $js = [
-        '@tinymce',
-    ];
-
     protected $options = [
         'plugins' => [
             'advlist',
@@ -124,9 +120,6 @@ class Editor extends Field
             $this->options['images_upload_url'] = $this->defaultImageUploadUrl();
         }
 
-        // 内容更改后保存到隐藏表单
-        $this->options['init_instance_callback'] = JavaScript::make($this->buildSaveContentScript());
-
         return JavaScript::format($this->options);
     }
 
@@ -155,40 +148,14 @@ class Editor extends Field
         );
     }
 
-    /**
-     * @return string
-     */
-    protected function buildSaveContentScript()
-    {
-        return <<<JS
-function (editor) {
-    editor.on('Change', function(e) {
-        var content = e.target.getContent();
-        if (! content) {
-            content = e.level.fragments;
-            content = content.length && content.join('');
-        }
-        
-      $(replaceNestedFormIndex('#{$this->id}')).val(String(content).replace('<p><br data-mce-bogus="1"></p>', '').replace('<p><br></p>', ''));
-    });
-}
-JS;
-    }
-
     /**
      * @return string
      */
     public function render()
     {
-        $this->script = <<<JS
-(function () {
-    var opts = {$this->formatOptions()};
-
-    opts.selector = replaceNestedFormIndex(opts.selector);
-    
-    tinymce.init(opts)
-})();
-JS;
+        $this->addVariables([
+            'options' => $this->formatOptions(),
+        ]);
 
         return parent::render();
     }

src/Form/Field/Embeds.php

@@ -261,6 +261,8 @@ class Embeds extends Field
      */
     public function render()
     {
-        return parent::render()->with(['form' => $this->buildEmbeddedForm()]);
+        $this->addVariables(['form' => $this->buildEmbeddedForm()]);
+
+        return parent::render();
     }
 }

src/Form/Field/File.php

@@ -9,33 +9,17 @@ use Dcat\Admin\Support\Helper;
 use Dcat\Admin\Support\JavaScript;
 use Illuminate\Support\Arr;
 use Illuminate\Support\Facades\Validator;
-use Illuminate\Support\Str;
 
 class File extends Field implements UploadFieldInterface
 {
-    use WebUploader, UploadField;
+    use WebUploader,
+        UploadField;
 
-    protected static $css = [
-        '@webuploader',
-    ];
-
-    protected static $js = [
-        '@webuploader',
-    ];
-
-    protected $containerId;
-
-    /**
-     * @param string $column
-     * @param array  $arguments
-     */
     public function __construct($column, $arguments = [])
     {
         parent::__construct($column, $arguments);
 
         $this->setupDefaultOptions();
-
-        $this->containerId = $this->generateId();
     }
 
     public function setElementName($name)
@@ -97,9 +81,7 @@ class File extends Field implements UploadFieldInterface
     }
 
     /**
-     * @param string $file
-     *
-     * @return mixed|string
+     * {@inheritDoc}
      */
     protected function prepareInputValue($file)
     {
@@ -113,25 +95,19 @@ class File extends Field implements UploadFieldInterface
     }
 
     /**
-     * @param string|null $relationName
-     * @param string      $relationPrimaryKey
-     *
-     * @return $this
+     * {@inheritDoc}
      */
-    public function setNestedFormRelation(?string $relationName, $relationPrimaryKey)
+    public function setNestedFormRelation(array $options = [])
     {
-        $this->options['formData']['_relation'] = [$relationName, $relationPrimaryKey];
+        $this->options['formData']['_relation'] = [$options['relation'], $options['key']];
 
-        $this->containerId .= NestedForm::DEFAULT_KEY_NAME;
         $this->id .= NestedForm::DEFAULT_KEY_NAME;
 
         return $this;
     }
 
     /**
-     * Set field as disabled.
-     *
-     * @return $this
+     * {@inheritDoc}
      */
     public function disable()
     {
@@ -169,7 +145,7 @@ class File extends Field implements UploadFieldInterface
     }
 
     /**
-     * @return string
+     * {@inheritDoc}
      */
     public function render()
     {
@@ -181,74 +157,16 @@ class File extends Field implements UploadFieldInterface
 
         $this->forceOptions();
         $this->formatValue();
-        $this->addScript();
 
         $this->addVariables([
             'fileType'      => $this->options['isImage'] ? '' : 'file',
-            'containerId'   => $this->containerId,
             'showUploadBtn' => ($this->options['autoUpload'] ?? false) ? false : true,
+            'options'       => JavaScript::format($this->options),
         ]);
 
         return parent::render();
     }
 
-    protected function addScript()
-    {
-        $newButton = trans('admin.uploader.add_new_media');
-        $options = JavaScript::format($this->options);
-
-        $this->script = <<<JS
-(function () {
-    var uploader, 
-        newPage, 
-        cID = replaceNestedFormIndex('#{$this->containerId}'),
-        ID = replaceNestedFormIndex('#{$this->id}'),
-        options = {$options};
-
-    init();
-
-    function init() {
-        var opts = $.extend({
-            selector: cID,
-            addFileButton: cID+' .add-file-button',
-            inputSelector: ID,
-        }, options);
-
-        opts.upload = $.extend({
-            pick: {
-                id: cID+' .file-picker',
-                name: '_file_',
-                label: '<i class="feather icon-folder"></i>&nbsp; {$newButton}'
-            },
-            dnd: cID+' .dnd-area',
-            paste: cID+' .web-uploader'
-        }, opts);
-
-        uploader = Dcat.Uploader(opts);
-        uploader.build();
-        uploader.preview();
-
-        function resize() {
-            setTimeout(function () {
-                if (! uploader) return;
-
-                uploader.refreshButton();
-                resize();
-
-                if (! newPage) {
-                    newPage = 1;
-                    $(document).one('pjax:complete', function () {
-                        uploader = null;
-                    });
-                }
-            }, 250);
-        }
-        resize();
-    }
-})();
-JS;
-    }
-
     /**
      * @return void
      */
@@ -260,12 +178,4 @@ JS;
             $this->default = implode(',', $this->default);
         }
     }
-
-    /**
-     * @return string
-     */
-    protected function generateId()
-    {
-        return 'file-'.Str::random(8);
-    }
 }

src/Form/Field/Ip.php

@@ -4,9 +4,6 @@ namespace Dcat\Admin\Form\Field;
 
 class Ip extends Text
 {
-    public static $js = '@jquery.inputmask';
-    public static $css = '@jquery.inputmask';
-
     protected $rules = ['nullable', 'ip'];
 
     /**

src/Form/Field/KeyValue.php

@@ -65,46 +65,24 @@ class KeyValue extends Field
         return $input;
     }
 
-    protected function addScript()
-    {
-        $value = $this->value();
-
-        $number = $value ? count($value) : 0;
-        $class = $this->getElementClassString();
-
-        $this->script = <<<JS
-(function () {
-    var index = {$number};
-    $('.{$class}-add').on('click', function () {
-        var tpl = $('template.{$class}-tpl').html().replace('{key}', index).replace('{key}', index);
-        $('tbody.kv-{$class}-table').append(tpl);
-        
-        index++;
-    });
-    
-    $('tbody').on('click', '.{$class}-remove', function () {
-        $(this).closest('tr').remove();
-    });
-})();
-JS;
-    }
-
     protected function prepareInputValue($value)
     {
         unset($value[static::DEFAULT_FLAG_NAME]);
 
         if (empty($value)) {
-            return '[]';
+            return [];
         }
 
-        return json_encode(array_combine($value['keys'], $value['values']));
+        return array_combine($value['keys'], $value['values']);
     }
 
     public function render()
     {
-        $this->addScript();
+        $value = $this->value();
 
-        Admin::style('td .form-group {margin-bottom: 0 !important;}');
+        $this->addVariables([
+            'count' => $value ? count($value) : 0,
+        ]);
 
         return parent::render();
     }

src/Form/Field/ListField.php

@@ -133,39 +133,6 @@ class ListField extends Field
         return $input;
     }
 
-    /**
-     * {@inheritdoc}
-     */
-    protected function addScript()
-    {
-        $value = $this->value();
-
-        $number = $value ? count($value) : 0;
-
-        $this->script = <<<JS
-(function () {
-    var index = {$number};
-    $('.{$this->formatColumn()}-add').on('click', function () {
-        var tpl = $('template.{$this->formatColumn()}-tpl').html().replace('{key}', index);
-        $('tbody.list-{$this->formatColumn()}-table').append(tpl);
-        
-        index++;
-    });
-    $('tbody').on('click', '.{$this->formatColumn()}-remove', function () {
-        $(this).closest('tr').remove();
-    });
-})();
-JS;
-    }
-
-    /**
-     * @return mixed
-     */
-    protected function formatColumn()
-    {
-        return str_replace('.', '-', $this->column);
-    }
-
     /**
      * {@inheritdoc}
      */
@@ -174,10 +141,10 @@ JS;
         unset($value['values'][static::DEFAULT_FLAG_NAME]);
 
         if (empty($value['values'])) {
-            return '[]';
+            return [];
         }
 
-        return json_encode(array_values($value['values']));
+        return array_values($value['values']);
     }
 
     /**
@@ -185,11 +152,9 @@ JS;
      */
     public function render()
     {
-        $this->addScript();
-
-        Admin::style('td .form-group {margin-bottom: 0 !important;}');
+        $value = $this->value();
 
-        $this->addVariables(['columnClass' => $this->formatColumn()]);
+        $this->addVariables(['count' => $value ? count($value) : 0]);
 
         return parent::render();
     }

src/Form/Field/Listbox.php

@@ -9,9 +9,6 @@ namespace Dcat\Admin\Form\Field;
  */
 class Listbox extends MultipleSelect
 {
-    public static $js = '@jquery.bootstrap-duallistbox';
-    public static $css = '@jquery.bootstrap-duallistbox';
-
     protected $settings = [];
 
     public function settings(array $settings)
@@ -31,11 +28,7 @@ class Listbox extends MultipleSelect
             'filterPlaceHolder' => trans('admin.listbox.filter_placeholder'),
         ]);
 
-        $settings = json_encode($settings);
-
-        $this->script = <<<JS
-$("{$this->getElementClassSelector()}").bootstrapDualListbox($settings);
-JS;
+        $this->addVariables(['settings' => json_encode($settings)]);
 
         return parent::render();
     }

src/Form/Field/Markdown.php

@@ -12,15 +12,6 @@ use Dcat\Admin\Support\JavaScript;
  */
 class Markdown extends Field
 {
-    protected static $css = [
-        '@admin/dcat/plugins/editor-md/css/editormd.min.css',
-    ];
-
-    protected static $js = [
-        '@admin/dcat/plugins/editor-md/lib/raphael.min.js',
-        '@admin/dcat/plugins/editor-md/editormd.min.js',
-    ];
-
     /**
      * 编辑器配置.
      *
@@ -130,31 +121,6 @@ class Markdown extends Field
         return $this;
     }
 
-    /**
-     * 初始化js.
-     */
-    protected function addScript()
-    {
-        $this->options['path'] = admin_asset('@admin/dcat/plugins/editor-md/lib').'/';
-        $this->options['name'] = $this->column;
-        $this->options['placeholder'] = $this->placeholder();
-        $this->options['readonly'] = ! empty($this->attributes['readonly']) || ! empty($this->attributes['disabled']);
-
-        if (empty($this->options['imageUploadURL'])) {
-            $this->options['imageUploadURL'] = $this->defaultImageUploadUrl();
-        }
-
-        if (config('app.locale') !== 'zh-CN') {
-            Admin::js($this->language);
-        }
-
-        $opts = JavaScript::format($this->options);
-
-        $this->script = <<<JS
-editormd(replaceNestedFormIndex("{$this->id}"), {$opts});
-JS;
-    }
-
     /**
      * @return string
      */
@@ -185,9 +151,20 @@ JS;
      */
     public function render()
     {
-        $this->addScript();
+        $this->options['path'] = admin_asset('@admin/dcat/plugins/editor-md/lib').'/';
+        $this->options['name'] = $this->column;
+        $this->options['placeholder'] = $this->placeholder();
+        $this->options['readonly'] = ! empty($this->attributes['readonly']) || ! empty($this->attributes['disabled']);
+
+        if (empty($this->options['imageUploadURL'])) {
+            $this->options['imageUploadURL'] = $this->defaultImageUploadUrl();
+        }
+
+        if (config('app.locale') !== 'zh-CN') {
+            Admin::js($this->language);
+        }
 
-        Admin::style('.editormd-fullscreen {z-index: 99999999;}');
+        $this->addVariables(['options' => JavaScript::format($this->options)]);
 
         return parent::render();
     }

src/Form/Field/Mobile.php

@@ -4,9 +4,6 @@ namespace Dcat\Admin\Form\Field;
 
 class Mobile extends Text
 {
-    public static $js = '@jquery.inputmask';
-    public static $css = '@jquery.inputmask';
-
     /**
      * @see https://github.com/RobinHerbots/Inputmask#options
      *

src/Form/Field/MultipleSelectTable.php

@@ -31,20 +31,6 @@ class MultipleSelectTable extends SelectTable
         return $this;
     }
 
-    protected function addScript()
-    {
-        $this->script .= <<<JS
-Dcat.grid.SelectTable({
-    dialog: replaceNestedFormIndex('#{$this->dialog->id()}'),
-    container: replaceNestedFormIndex('#{$this->getAttribute('id')}'),
-    input: replaceNestedFormIndex('#hidden-{$this->id}'),
-    multiple: true,
-    max: {$this->max},
-    values: {$this->options},
-});
-JS;
-    }
-
     /**
      * 转化为数组格式保存.
      *
@@ -56,4 +42,11 @@ JS;
     {
         return Helper::array($value, true);
     }
+
+    public function render()
+    {
+        $this->addVariables(['max' => $this->max]);
+
+        return parent::render();
+    }
 }

src/Form/Field/Number.php

@@ -2,46 +2,10 @@
 
 namespace Dcat\Admin\Form\Field;
 
-use Dcat\Admin\Admin;
-
 class Number extends Text
 {
     protected $view = 'admin::form.number';
 
-    protected static $js = [
-        '@number-input',
-    ];
-
-    public function render()
-    {
-        $this->addScript();
-        $this->addStyle();
-
-        $this->defaultAttribute('style', 'width: 140px;flex:none');
-
-        $this->prepend('');
-
-        return parent::render();
-    }
-
-    protected function addScript()
-    {
-        $this->script = <<<JS
-$('{$this->getElementClassSelector()}:not(.initialized)')
-    .addClass('initialized')
-    .bootstrapNumber({
-        upClass: 'primary',
-        downClass: 'white',
-        center: true
-    });
-JS;
-    }
-
-    protected function addStyle()
-    {
-        Admin::style('.number-group .input-group{flex-wrap: nowrap}');
-    }
-
     /**
      * Set min value of number field.
      *
@@ -71,9 +35,7 @@ JS;
     }
 
     /**
-     * @param mixed $value
-     *
-     * @return int
+     * {@inheritDoc}
      */
     protected function prepareInputValue($value)
     {
@@ -81,11 +43,7 @@ JS;
     }
 
     /**
-     * Set or get value of the field.
-     *
-     * @param null $value
-     *
-     * @return mixed
+     * {@inheritDoc}
      */
     public function value($value = null)
     {
@@ -95,4 +53,13 @@ JS;
 
         return parent::value($value);
     }
+
+    public function render()
+    {
+        $this->defaultAttribute('style', 'width: 140px;flex:none');
+
+        $this->prepend('');
+
+        return parent::render();
+    }
 }

src/Form/Field/SelectTable.php

@@ -11,10 +11,6 @@ class SelectTable extends Field
 {
     use PlainInput;
 
-    protected static $js = [
-        '@select-table',
-    ];
-
     /**
      * @var DialogTable
      */
@@ -128,18 +124,6 @@ class SelectTable extends Field
         $this->options = json_encode($values);
     }
 
-    protected function addScript()
-    {
-        $this->script .= <<<JS
-Dcat.grid.SelectTable({
-    dialog: replaceNestedFormIndex('#{$this->dialog->id()}'),
-    container: replaceNestedFormIndex('#{$this->getAttribute('id')}'),
-    input: replaceNestedFormIndex('#hidden-{$this->id}'),
-    values: {$this->options},
-});
-JS;
-    }
-
     protected function setUpTable()
     {
         $this->dialog
@@ -163,17 +147,14 @@ JS;
             ->defaultAttribute('id', 'container-'.$this->getElementId());
 
         $this->addVariables([
-            'prepend'     => $this->prepend,
-            'append'      => $this->append,
-            'style'       => $this->style,
-            'dialog'      => $this->dialog->render(),
-            'placeholder' => $this->placeholder(),
+            'prepend'      => $this->prepend,
+            'append'       => $this->append,
+            'style'        => $this->style,
+            'dialog'       => $this->dialog->render(),
+            'placeholder'  => $this->placeholder(),
+            'dialogScript' => $this->dialog->getScript(),
         ]);
 
-        $this->script = $this->dialog->getScript();
-
-        $this->addScript();
-
         return parent::render();
     }
 

src/Form/Field/Slider.php

@@ -6,14 +6,6 @@ use Dcat\Admin\Form\Field;
 
 class Slider extends Field
 {
-    protected static $css = [
-        '@ionslider',
-    ];
-
-    protected static $js = [
-        '@ionslider',
-    ];
-
     protected $options = [
         'type'     => 'single',
         'prettify' => false,
@@ -22,9 +14,7 @@ class Slider extends Field
 
     public function render()
     {
-        $option = json_encode($this->options);
-
-        $this->script = "setTimeout(function () { $('{$this->getElementClassSelector()}').ionRangeSlider($option) }, 400);";
+        $this->addVariables(['options' => json_encode($this->options)]);
 
         return parent::render();
     }

src/Form/Field/SwitchField.php

@@ -7,9 +7,6 @@ use Dcat\Admin\Form\Field;
 
 class SwitchField extends Field
 {
-    public static $js = '@switchery';
-    public static $css = '@switchery';
-
     public function primary()
     {
         return $this->color(Admin::color()->primary());
@@ -107,21 +104,6 @@ class SwitchField extends Field
         $this->attribute('type', 'checkbox');
         $this->attribute('data-plugin', $this->getFormElementId().'switchery');
 
-        $this->script = <<<JS
-(function () {
-    function swty(){
-        var ipt = \$('[data-plugin="{$this->getFormElementId()}switchery"]');
-        
-        ipt.parent().find('.switchery').remove();
-        
-        ipt.each(function() {
-            new Switchery($(this)[0],$(this).data())
-        })
-    } 
-    swty();
-})()
-JS;
-
         return parent::render();
     }
 }

src/Form/Field/Tags.php

@@ -11,9 +11,6 @@ use Illuminate\Support\Collection;
 
 class Tags extends Field
 {
-    public static $js = '@select2';
-    public static $css = '@select2';
-
     /**
      * @var array
      */
@@ -175,39 +172,7 @@ class Tags extends Field
     {
         $url = admin_url($url);
 
-        $this->ajaxScript = <<<JS
-  ajax: {
-    url: "$url",
-    dataType: 'json',
-    delay: 250,
-    cache: true,
-    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
-        }
-      };
-    },
-  },
-  escapeMarkup: function (markup) {
-      return markup;
-  },
-JS;
-
-        return $this;
+        return $this->addVariables(['ajax' => compact('url', 'idField', 'textField')]);
     }
 
     /**
@@ -223,60 +188,17 @@ JS;
             );
         }
 
-        $this->addScript();
-
         if ($this->keyAsValue) {
             $options = $value + $this->options;
         } else {
             $options = array_unique(array_merge($value, (array) $this->options));
         }
 
-        return parent::render()->with([
+        $this->addVariables([
             'options'    => $options,
             'keyAsValue' => $this->keyAsValue,
         ]);
-    }
 
-    protected function addScript()
-    {
-        // 解决部分浏览器开启 tags: true 后无法输入中文的BUG
-        // 支持"逗号" "分号" "空格"结尾生成tags
-        $this->script = <<<JS
-$("{$this->getElementClassSelector()}").select2({
-    tags: true,
-    tokenSeparators: [',', ';', '，', '；', ' '],
-    {$this->ajaxScript}
-    createTag: function(params) {
-        if (/[,;，； ]/.test(params.term)) {
-            var str = params.term.trim().replace(/[,;，；]*$/, '');
-            return { id: str, text: str }
-        } else {
-            return null;
-        }
-    }
-});
-JS;
-
-        // 解决输入中文后无法回车结束的问题。
-        Admin::script(
-            <<<'JS'
-$(document).off('keyup', '.select2-selection--multiple .select2-search__field').on('keyup', '.select2-selection--multiple .select2-search__field', function (event) {
-    try {
-        if (event.keyCode == 13) {
-            var $this = $(this), optionText = $this.val();
-            if (optionText != "" && $this.find("option[value='" + optionText + "']").length === 0) {
-                var $select = $this.parents('.select2-container').prev("select");
-                var newOption = new Option(optionText, optionText, true, true);
-                $select.append(newOption).trigger('change');
-                $this.val('');
-                $select.select2('close');
-            }
-        }
-    } catch (e) {
-        console.error(e);
-    }
-});
-JS
-        );
+        return parent::render();
     }
 }

src/Form/Field/Textarea.php

@@ -36,6 +36,8 @@ class Textarea extends Field
             $this->value = json_encode($this->value, JSON_PRETTY_PRINT);
         }
 
-        return parent::render()->with(['rows' => $this->rows]);
+        $this->addVariables(['rows' => $this->rows]);
+
+        return parent::render();
     }
 }

src/Form/NestedForm.php

@@ -331,7 +331,10 @@ class NestedForm
             $field->attribute(Builder::BUILD_IGNORE, true);
         }
 
-        $field->setNestedFormRelation($this->relationName, $this->key);
+        $field->setNestedFormRelation([
+            'relation' => $this->relationName,
+            'key'      => $this->key,
+        ]);
 
         $field::collectAssets();
 

src/Layout/Asset.php

@@ -156,6 +156,15 @@ class Asset
                 '@admin/dcat/extra/markdown.css',
             ],
         ],
+        '@markdown' => [
+            'js' => [
+                '@admin/dcat/plugins/editor-md/lib/raphael.min.js',
+                '@admin/dcat/plugins/editor-md/editormd.min.js',
+            ],
+            'css' => [
+                '@admin/dcat/plugins/editor-md/css/editormd.min.css',
+            ],
+        ],
         '@jquery.inputmask' => [
             'js' => '@admin/dcat/plugins/input-mask/jquery.inputmask.bundle.min.js',
         ],
@@ -170,6 +179,10 @@ class Asset
             'js' => '@admin/dcat/plugins/fontawesome-iconpicker/dist/js/fontawesome-iconpicker.js',
             'css' => '@admin/dcat/plugins/fontawesome-iconpicker/dist/css/fontawesome-iconpicker.min.css',
         ],
+        '@color' => [
+            'js' => '@admin/dcat/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js',
+            'css' => '@admin/dcat/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css',
+        ],
     ];
 
     /**
@@ -328,10 +341,18 @@ class Asset
     /**
      * 根据别名设置需要载入的js和css脚本.
      *
-     * @param string $alias
+     * @param string|array $alias
      */
-    public function collect(?string $alias)
+    public function collect($alias)
     {
+        if (is_array($alias)) {
+            foreach ($alias as $v) {
+                $this->collect($v);
+            }
+
+            return;
+        }
+
         if (mb_strpos($alias, '@') !== 0) {
             $alias = '@'.$alias;
         }

src/Traits/HasHtml.php

@@ -19,7 +19,7 @@ trait HasHtml
     {
         $html = static::context()->html ?: [];
 
-        if ($content !== null) {
+        if ($content === null) {
             return implode('', array_unique($html));
         }
 
@@ -58,10 +58,10 @@ trait HasHtml
         $head = $dom->getElementsByTagName('head')->item(0) ?: null;
         $body = $dom->getElementsByTagName('body')->item(0) ?: null;
 
-        [$headHtml, $headScript] = static::resolveElement($head);
-        [$bodyHtml, $bodyScript] = static::resolveElement($body);
+        $head = static::resolveElement($head);
+        $body = static::resolveElement($body);
 
-        $script = $headScript.$bodyScript;
+        $script = $head['script'].$body['script'];
 
         $runScript = $options['runScript'] ?? true;
         if ($runScript) {
@@ -70,7 +70,7 @@ trait HasHtml
             $script = '';
         }
 
-        return [$headHtml.$bodyHtml, $script];
+        return [$head['html'].$body['html'], $script];
     }
 
     /**
@@ -120,7 +120,7 @@ trait HasHtml
 
         if (! empty($script = trim($element->nodeValue))) {
             if ($require = $element->getAttribute('require')) {
-                static::asset()->collect($require);
+                static::asset()->collect(explode(',', $require));
             }
 
             $script = '(function () {'.$script.'})();';
@@ -165,7 +165,7 @@ trait HasHtml
         $html = $script = '';
 
         if (! $element) {
-            return [$html, $script];
+            return ['html' => $html, 'script' => $script];
         }
 
         foreach ($element->childNodes as $child) {
@@ -181,6 +181,6 @@ trait HasHtml
             $html .= trim($element->ownerDocument->saveHTML($child));
         }
 
-        return [$html, $script];
+        return ['html' => $html, 'script' => $script];
     }
 }