Dev dzil

composer.json

@@ -8,7 +8,8 @@
         "widget",
         "yii2-dynamicform",
         "copy DOM element",
-        "yii2 dynamic form"
+        "yii2 dynamic form",
+        "Dev Dev Dzil"
     ],
     "type": "yii2-extension",
     "license": "BSD-3-Clause",
@@ -26,8 +27,8 @@
     ],
     "require": {
         "yiisoft/yii2": "~2.0.5",
-        "symfony/css-selector": "~2.8|~3.0",
-        "symfony/dom-crawler": "~2.8|~3.0"
+        "symfony/css-selector": "*",
+        "symfony/dom-crawler": "*"
     },
     "autoload": {
         "psr-4": {

src/DynamicFormWidget.php

@@ -234,9 +234,26 @@ public function run()
         $this->_options['template'] = trim($document->saveHTML());
 
         if (isset($this->_options['min']) && $this->_options['min'] === 0 && $this->model->isNewRecord) {
-            $content = $this->removeItems($content);
-        }
 
+            /**
+             * This is will be handle for ajax request,
+             * if all attribute from formFields at least one attribute is not emtpy,
+             * prevent the html element to be removed.
+             */
+            $isRemovedItems = true;
+            foreach ($this->formFields as $field) {
+                if(!empty($this->model->{$field})) {
+                    $isRemovedItems = false;
+                    break;
+                }
+            }
+
+            if($isRemovedItems){
+                $content = $this->removeItems($content);
+            }
+
+        }
+
         $this->hashOptions();
         $view = $this->getView();
         $widgetRegistered = $this->registerHashVarWidget();

src/assets/yii2-dynamic-form.js

@@ -66,30 +66,18 @@
         });
 
         $template.find('input, textarea, select').each(function() {
-            if ($(this).is(':checkbox') || $(this).is(':radio')) {
-                var type         = ($(this).is(':checkbox')) ? 'checkbox' : 'radio';
-                var inputName    = $(this).attr('name');
-                var $inputHidden = $template.find('input[type="hidden"][name="' + inputName + '"]').first();
-                var count        = $template.find('input[type="' + type +'"][name="' + inputName + '"]').length;
-
-                if ($inputHidden && count === 1) {
-                    $(this).val(1);
-                    $inputHidden.val(0);
-                }
+            $(this).val('');
+        });
 
-                $(this).prop('checked', false);
-            } else if($(this).is('select')) {
-                $(this).find('option:selected').removeAttr("selected");
-            } else {
-                $(this).val(''); 
+        $template.find('input[type="checkbox"], input[type="radio"]').each(function() {
+            var inputName = $(this).attr('name');
+            var $inputHidden = $template.find('input[type="hidden"][name="' + inputName + '"]').first();
+            if ($inputHidden) {
+                $(this).val(1);
+                $inputHidden.val(0);
             }
         });
 
-        // remove "error/success" css class
-        var yiiActiveFormData = $('#' + widgetOptions.formId).yiiActiveForm('data');
-        $template.find('.' + yiiActiveFormData.settings.errorCssClass).removeClass(yiiActiveFormData.settings.errorCssClass);
-        $template.find('.' + yiiActiveFormData.settings.successCssClass).removeClass(yiiActiveFormData.settings.successCssClass);
-
         return $template;
     };
 
@@ -115,7 +103,7 @@
         var count = _count($elem, widgetOptions);
 
         if (count < widgetOptions.limit) {
-            $toclone = $(widgetOptions.template);
+            $toclone = widgetOptions.template;
             $newclone = $toclone.clone(false, false);
 
             if (widgetOptions.insertPosition === 'top') {
@@ -318,36 +306,10 @@
         });
     };
 
-    var _restoreKrajeeDepdrop = function($elem) {
-        var configDepdrop = $.extend(true, {}, eval($elem.attr('data-krajee-depdrop')));
-        var inputID = $elem.attr('id');
-        var matchID = inputID.match(regexID);
-
-        if (matchID && matchID.length === 4) {
-            for (index = 0; index < configDepdrop.depends.length; ++index) {
-                var match = configDepdrop.depends[index].match(regexID);
-                if (match && match.length === 4) {
-                    configDepdrop.depends[index] = match[1] + matchID[2] + match[3];
-                }
-            }
-        }
-
-        $elem.depdrop(configDepdrop);
-    };
-
     var _restoreSpecialJs = function(widgetOptions) {
         var widgetOptionsRoot = _getWidgetOptionsRoot(widgetOptions);
 
-        // "jquery.inputmask"
-        var $hasInputmask = $(widgetOptionsRoot.widgetItem).find('[data-plugin-inputmask]');
-        if ($hasInputmask.length > 0) {
-            $hasInputmask.each(function() {
-                $(this).inputmask('remove');
-                $(this).inputmask(eval($(this).attr('data-plugin-inputmask')));
-            });
-        }
-
-        // "kartik-v/yii2-widget-datepicker"
+        // "kartik-v/yii2-widget-datepicker" yang lama
         var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-datepicker]');
         if ($hasDatepicker.length > 0) {
             $hasDatepicker.each(function() {
@@ -356,6 +318,75 @@
             });
         }
 
+        // "kartik-v/yii2-widget-datepicker" yang baru
+        var $hasKvDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-kvdatepicker]');
+        if ($hasKvDatepicker.length) {
+            $hasKvDatepicker.each(function() {
+                var $input = $(this);
+
+                // ambil config asli dari attribute, kalau ada
+                var config = $input.attr('data-krajee-kvdatepicker');
+                var options = {};
+                if (config) {
+                    try {
+                        options = eval(config); // parse opsi asli dari PHP
+                    } catch (e) {
+                        console.warn('kvDatepicker config parse error', e);
+                    }
+                }
+
+                // kalau masih kosong → fallback ke default
+                if ($.isEmptyObject(options)) {
+                    options = {
+                        format: 'dd-mm-yyyy',
+                        autoclose: true,
+                        todayHighlight: true,
+                        todayBtn: true
+                    };
+                }
+
+                // hapus binding lama supaya tidak tabrakan
+                $input.removeData('kvDatepicker');
+                $input.removeAttr('data-krajee-kvdatepicker');
+
+                // re-init kvDatepicker
+                $input.kvDatepicker(options);
+
+                // ==== tambahan: sinkronisasi ke hidden input DateControl ====
+                var $hiddenInput = $input.parent().next();
+                if ($hiddenInput.hasClass('datecontrol-save-options')) {
+                    // helper manual kalau ev.format tidak ada
+                    var formatDateManual = function(d) {
+                        const yyyy = d.getFullYear();
+                        const mm = String(d.getMonth() + 1).padStart(2, "0");
+                        const dd = String(d.getDate()).padStart(2, "0");
+                        return yyyy + "-" + mm + "-" + dd;
+                    };
+
+                    // pastikan tidak bind ganda
+                    $input.off("changeDate._dynform clearDate._dynform");
+
+                    // event pilih tanggal
+                    $input.on("changeDate._dynform", function(ev) {
+                        if (ev.date) {
+                            var formatted = ev.format
+                                ? ev.format("yyyy-mm-dd")
+                                : formatDateManual(ev.date);
+                            $hiddenInput.val(formatted).trigger("change");
+                        } else {
+                            $hiddenInput.val("").trigger("change");
+                        }
+                    });
+
+                    // event clear
+                    $input.on("clearDate._dynform", function() {
+                        $hiddenInput.val("").trigger("change");
+                    });
+                }
+            });
+        }
+
+
         // "kartik-v/yii2-widget-timepicker"
         var $hasTimepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-timepicker]');
         if ($hasTimepicker.length > 0) {
@@ -428,11 +459,20 @@
         var $hasDepdrop = $(widgetOptionsRoot.widgetItem).find('[data-krajee-depdrop]');
         if ($hasDepdrop.length > 0) {
             $hasDepdrop.each(function() {
-                if ($(this).data('select2') === undefined) {
-                    $(this).removeData().off();
-                    $(this).unbind();
-                    _restoreKrajeeDepdrop($(this));
+                $(this).removeData().off();
+                $(this).unbind();
+                var configDepdrop = eval($(this).attr('data-krajee-depdrop'));
+                var inputID = $(this).attr('id');
+                var matchID = inputID.match(regex);
+                if (matchID && matchID.length === 4) {
+                    for (index = 0; index < configDepdrop.depends.length; ++index) {
+                        var match = configDepdrop.depends[index].match(regex);
+                        if (match && match.length === 4) {
+                            configDepdrop.depends[index] = match[1] + matchID[2] + match[3];
+                        }
+                    }
                 }
+                $(this).depdrop(configDepdrop);
             });
         }
 
@@ -442,34 +482,20 @@
             $hasSelect2.each(function() {
                 var id = $(this).attr('id');
                 var configSelect2 = eval($(this).attr('data-krajee-select2'));
-
-                if ($(this).data('select2')) {
-                    $(this).select2('destroy');
-                }
-
-                var configDepdrop = $(this).data('depdrop');
-                if (configDepdrop) {
-                    configDepdrop = $.extend(true, {}, configDepdrop);
-                    $(this).removeData().off();
-                    $(this).unbind();
-                    _restoreKrajeeDepdrop($(this));
-                }
-
-                $.when($('#' + id).select2(configSelect2)).done(initSelect2Loading(id, '.select2-container--krajee'));
-
-                var kvClose = 'kv_close_' + id.replace(/\-/g, '_');
-
-                $('#' + id).on('select2:opening', function(ev) {
-                    initSelect2DropStyle(id, kvClose, ev);
+                $(this).select2('destroy');
+                $.when($('#' + id).select2(configSelect2)).done(initSelect2Loading(id));
+                $('#' + id).on('select2-open', function() {
+                    initSelect2DropStyle(id)
                 });
-
-                $('#' + id).on('select2:unselect', function() {
-                    window[kvClose] = true;
-                });
-
-               if (configDepdrop) {
-                    var loadingText = (configDepdrop.loadingText) ? configDepdrop.loadingText : 'Loading ...';
-                    initDepdropS2(id, loadingText);
+                if ($(this).attr('data-krajee-depdrop')) {
+                    $(this).on('depdrop.beforeChange', function(e,i,v) {
+                        var configDepdrop = eval($(this).attr('data-krajee-depdrop'));
+                        var loadingText = (configDepdrop.loadingText)? configDepdrop.loadingText : 'Loading ...';
+                        $('#' + id).select2('data', {text: loadingText});
+                    });
+                    $(this).on('depdrop.change', function(e,i,v,c) {
+                        $('#' + id).select2('val', $('#' + id).val());
+                    });
                 }
             });
         }