Skip to content

Commit 1bff93d

Browse files
A1GardA1Gard
committed
matched to boostrap 5.x
added switch type fixed some bugs for select and checkbox
1 parent 5147c61 commit 1bff93d

File tree

1 file changed

+85
-9
lines changed

1 file changed

+85
-9
lines changed

‎assets/js/engine.js‎

Lines changed: 85 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,8 @@ var app = new Vue({
118118
theme: 'bootstrap', // default theme
119119
method: 'get', // default methods
120120
old: '',
121-
flds: [], // list of field
121+
flds: [
122+
], // list of field
122123
// type of inputs
123124
typ: [
124125
'row',
@@ -127,6 +128,7 @@ var app = new Vue({
127128
'select',
128129
'submit',
129130
'form-divider',
131+
'switch'
130132
],
131133
// raw field for edit
132134
raw: {
@@ -177,13 +179,23 @@ var app = new Vue({
177179

178180
switch (this.theme) {
179181
case "bootstrap":
182+
183+
let defClass = '';
184+
if (field.option == 'checkbox' || field.option == 'radio'){
185+
defClass = 'class="form-check-label"';
186+
}
180187
// make bootstrap column
181188
out += `\t\t <div class="col-md-${field.size} mt-3">\n`;
182189
out += `\t\t\t <div class="form-group">\n`;
183-
out += `\t\t\t\t <label for="${field.id}"> \n`;
190+
if (defClass == 'class="form-check-label"'){
191+
out += inp;
192+
}
193+
out += `\t\t\t\t <label for="${field.id}" ${defClass}> \n`;
184194
out += `\t\t\t\t\t {{__('${field.label}')}} \n`;
185195
out += `\t\t\t\t </label> \n`;
186-
out += inp;
196+
if (defClass != 'class="form-check-label"'){
197+
out += inp;
198+
}
187199
out += `\t\t\t </div>\n`;
188200
out += `\t\t </div>\n`;
189201

@@ -277,7 +289,7 @@ var app = new Vue({
277289
}
278290
}
279291

280-
if(field.id == ''){
292+
if (field.id == '') {
281293
field.id = field.name;
282294
}
283295

@@ -306,10 +318,10 @@ var app = new Vue({
306318
// handle bootstrap class
307319
if (this.theme == 'bootstrap') {
308320
if (field.option == 'file') {
309-
var genClass = 'form-control-file' + ` @error('${field.name}') is-invalid @enderror`;
321+
var genClass = 'form-control' + ` @error('${field.name}') is-invalid @enderror`;
310322
} else if (field.option == 'checkbox') {
311-
var genClass = 'float-left ml-4 mt-1 form-check-inline' + ` @error('${field.name}') is-invalid @enderror`;
312-
} else{
323+
var genClass = 'form-check-input' + ` @error('${field.name}') is-invalid @enderror`;
324+
} else {
313325
var genClass = generalClass + ` @error('${field.name}') is-invalid @enderror`;
314326
}
315327
} else
@@ -390,15 +402,15 @@ var app = new Vue({
390402
inp += `\t\t\t\t @foreach(${rs} as ${r} ) \n`;
391403
inp += `\t\t\t\t\t <option value="{{ ${r}->${key} }}" ${old} > {{${r}->${title}}} </option> \n`;
392404
inp += `\t\t\t\t @endforeach \n`;
393-
inp += '\t\t\t </select>';
405+
inp += '\t\t\t </select>\n';
394406

395407
out += this.makeLabel(field, inp);
396408
break;
397409
case 'submit':
398410

399411
switch (this.theme) {
400412
case "bootstrap":
401-
out += `\t\t <div class="col-md-${field.size}">\n`;
413+
out += `\t\t <div class="col-12">\n`;
402414
var genClass = 'btn btn-primary mt-2';
403415

404416
break;
@@ -441,6 +453,70 @@ var app = new Vue({
441453
console.log('unknow theme');
442454
}
443455
break;
456+
case 'switch':
457+
458+
var old = '';
459+
if (this.old.trim() !== '') {
460+
old = ',' + this.old.replace('#name', field.name);
461+
}
462+
if (attrs.indexOf('value') === -1){
463+
attrs = ' value="1" ';
464+
}
465+
switch (this.theme) {
466+
case "bootstrap":
467+
// make bootstrap column
468+
out += `\t\t <div class="col-md-${field.size} mt-3">\n`;
469+
out += `\t\t\t <div class="form-check form-switch">\n`;
470+
out += `\t\t\t\t <input class="form-check-input ${additinalCls} @error('${field.name}') is-invalid @enderror"
471+
name="${field.name}" type="checkbox" id="${field.id}" @if(old('${field.name}'${old}) == 1) checked="" @endif
472+
${attrs}> \n`;
473+
out += `\t\t\t\t <label for="${field.id}"> \n`;
474+
out += `\t\t\t\t\t {{__('${field.label}')}} \n`;
475+
out += `\t\t\t\t </label> \n`;
476+
out += `\t\t\t </div>\n`;
477+
out += `\t\t </div>\n`;
478+
479+
break;
480+
case "semanticui":
481+
// make semanticui column
482+
out += `\t\t <div class="${$.trim(inWords(field.size))} wide column">\n`;
483+
out += `\t\t\t <div class="field">\n`;
484+
out += `\t\t\t\t <div class="ui toggle checkbox @error('${field.name}') error @enderror"> \n`;
485+
out += `\t\t\t\t <input type="checkbox @error('${field.name}') invalid @enderror ${additinalCls}" name="${field.name}" ${attrs}
486+
id="${field.id}" @if(old('${field.name}'${old}) == 1) checked="" @endif> \n ` ;
487+
out += `\t\t\t\t\t <label for="${field.id}"> \n`;
488+
out += `\t\t\t\t\t\t {{__('${field.label}')}} \n`;
489+
out += `\t\t\t\t\t </label> \n`;
490+
out += `\t\t\t\t </div> \n`;
491+
out += `\t\t\t </div>\n`;
492+
out += `\t\t </div>\n`;
493+
494+
break;
495+
case "materialize":
496+
// make bootstrap column
497+
out += `\t\t <div class="input-field col s${field.size}">\n`;
498+
out += `\t\t\t <div class="switch">\n`;
499+
500+
out += `\t\t\t\t <label for="${field.id}"> \n`;
501+
out += `\t\t\t\t\t <input type="checkbox ${additinalCls}" name="${field.name}" ${attrs}
502+
id="${field.id}" @if(old('${field.name}'${old}) == 1) checked="" @endif> \n ` ;
503+
out += `\t\t\t\t\t <span class="lever"></span> \n`;
504+
out += `\t\t\t\t\t {{__('${field.label}')}} \n`;
505+
out += `\t\t\t\t </label> \n`;
506+
507+
out += `\t\t\t </div>\n`;
508+
out += `\t\t </div>\n`;
509+
510+
break;
511+
default:
512+
513+
}
514+
515+
// genClass += additinalCls;
516+
// out += `\t\t\t <label> &nbsp; </label> \n`;
517+
// out += `\t\t\t <input name="${field.name}" id="${field.id}" type="submit" class="${genClass}" value="{{__('${field.label}')}}" ${attrs} /> \n`;
518+
// out += `\t\t </div>\n`;
519+
break;
444520
}
445521
}
446522

0 commit comments

Comments
 (0)