coreui-form/src/js/tpl.js

CoreUI form

let tpl = Object.create(null)
tpl['form-control.html'] = ' <div id="coreui-form-<%= form.id %>-control-<%= control.index %>" class="coreui-form__control_container" <% if ( ! control.show) { %>style="display:none"<% } %>> <%- control.content %> </div>'
tpl['form-error.html'] = '<div class="coreui-form__error alert alert-danger alert-dismissible fade show mb-3 <%= options.class %>"> <%- message %> <% if (options.dismiss) { %> <button type="button" class="btn-close" data-bs-dismiss="alert"></button> <% } %> </div>'
tpl['form-field-attach.html'] = '<div class="<%= directionClass %> content-<%= contentId %>"></div>'
tpl['form-field-group.html'] = '<div id="coreui-form-<%= id %>" class="coreui-form__group_container mb-3"> <div class="coreui-form__group_label pe-2"> <h6 class="coreui-form__field_label_text col-form-label"> <%- group.label %> <% if (group.showCollapsible) { %> <button type="button" class="btn btn-link btn-collapsible text-dark"> <% if ( ! group.show) { %> <i class="bi bi-chevron-right"></i> <% } else { %> <i class="bi bi-chevron-down"></i> <% } %> </button> <% } %> </h6> </div> <div class="coreui-form__group_content"<% if ( ! group.show) { %> style="display:none"<% } %>></div> </div>'
tpl['form-field-label.html'] = '<div id="coreui-form-<%= id %>" class="coreui-form__field_container d-flex flex-column flex-md-row mb-3<% if ( ! field.show) { %> d-none<% } %>"> <% if (field.labelWidth !== 0 && field.labelWidth !== \'0px\') { %> <div class="coreui-form__field_label text-md-end text-sm-start pe-2"<% if (field.labelWidth) { %> style="min-width:<%= field.labelWidth %>;width:<%= field.labelWidth %>"<% } %>> <div class="coreui-form__field_label_content col-form-label"> <% if (field.required) { %> <span class="coreui-form__field_label_req text-danger">*</span> <% } %> <% if (field.help) { %> <span class="coreui-form__field_label_help text-body-secondary" title="<%- field.help %>" data-bs-toggle="tooltip" data-bs-placement="bottom"> <i class="bi bi-question-circle"></i> </span> <% } %> <span class="coreui-form__field_label_text fw-medium"><%- field.label %></span> <% if (field.descriptionLabel) { %> <div class="coreui-form__field_label_description text-muted"> <small><%- field.descriptionLabel %></small> </div> <% } %> </div> </div> <% } %> <div class="coreui-form__field_content flex-fill"> <% if (field.prefix) { %> <span class="coreui-form__field-prefix d-inline-block align-top ps-1"> <%- field.prefix %> </span> <% } %> <div class="d-inline-block content-<%= contentId %>"></div> <% if (field.suffix) { %> <span class="coreui-form__field-suffix d-inline-block align-top ps-1"> <%- field.suffix %> </span> <% } %> <% if (issetAttachFields) { %> <div class="coreui-form__attach-fields <%= directionClass %>"></div> <% } %> <% if (field.description) { %> <div class="coreui-form__field_description text-muted"> <small><%- field.description %></small> </div> <% } %> </div> </div>'
tpl['form.html'] = '<div id="coreui-form-<%= form.id %>" class="coreui-form mb-2" <% if (widthSizes) { %>style="<%= widthSizes.join(\';\') %>"<% } %>> <% if (form.title) { %> <h5 class="mb-4"><%- form.title %></h5> <% } %> <form action="<%= form.send.url %>" method="<%= form.send.method %>"<%- formAttr %>> <div class="coreui-form__fields d-flex justify-content-start flex-column flex-wrap"></div> <% if (controls) { %> <div class="coreui-form__controls d-flex justify-content-start flex-sm-wrap flex-md-nowrap"> <% if (form.controlsOffset !== 0 && form.controlsOffset !== \'0px\') { %> <div class="d-none d-md-block" style="width:<%= form.controlsOffset %>;min-width:<%= form.controlsOffset %>"></div> <% } %> <div class="d-flex justify-content-start flex-wrap gap-2"> <% $.each(controls, function(key, control) { %> <% if (control.content !== null) { %> <div id="coreui-form-<%= form.id %>-control-<%= control.index %>" class="coreui-form__control_container" <% if ( ! control.show) { %>style="display:none"<% } %>> </div> <% } %> <% }); %> </div> </div> <% } %> </form> </div>'
tpl['controls/button.html'] = '<button <%- attr %>><%- content %></button>'
tpl['controls/link.html'] = '<a href="<%- url %>"<%- attr %>><%- content %></a>'
tpl['fields/checkbox-btn.html'] = '<% if (readonly) { %> <div class="coreui-form__field-readonly col-form-label"><%- selectedItems.join(\', \') %></div> <% } else { %> <div class="pt-2"> <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group"> <% $.each(options, function(key, option) { %> <input <%- option.attr %>> <label class="<%= field.optionsClass %>" for="<%= option.id %>"><%= option.text %></label> <% }); %> </div> </div> <% } %>'
tpl['fields/checkbox.html'] = '<% if (readonly) { %> <div class="coreui-form__field-readonly col-form-label"><%- selectedItems.join(\', \') %></div> <% } else { %> <div class="pt-2"> <% $.each(options, function(key, option) { %> <div class="form-check<% if (field.inline) { %> form-check-inline<% } %>"> <input <%- option.attr %>/> <label class="form-check-label" for="<%= option.id %>"><%= option.text %></label> </div> <% }); %> </div> <% } %>'
tpl['fields/color.html'] = '<% if (readonly) { %> <div class="coreui-form__field-readonly col-form-label rounded-1" style="width: 14px;height: 14px;background-color: <%= value %>"></div> <% } else { %> <input <%- attr %>/> <% if (datalist.length > 0) { %> <datalist id="<%= datalistId %>"> <% $.each(datalist, function(key, item) { %> <option <%- item.attr %>/> <% }); %> </datalist> <% } %> <% } %>'
tpl['fields/dataset-row-readonly.html'] = '<tr class="coreui-form__field-dataset-item"> <% $.each(options, function(key, option) { %> <td class="pe-2 pb-1"> <%- option.value %> </td> <% }); %> </tr>'
tpl['fields/dataset-row.html'] = '<tr class="coreui-form__field-dataset-item" id="dataset-item-<%= hashItem %>"> <% $.each(options, function(key, option) { %> <td class="pe-1 pb-1"> <% if (option.type === \'select\') { %> <select <%- option.attr %>> <% $.each(option.items, function(key, item) { %> <option <%- item.attr %>><%- item.text %></option> <% }); %> </select> <% } else if (option.type === \'switch\') { %> <div class="form-check form-switch"> <input <%- option.attr %>/> </div> <% } else { %> <input <%- option.attr %>> <% } %> </td> <% }); %> <td class="pb-1"> <button type="button" class="btn btn-link btn-dataset-remove" data-item-id="dataset-item-<%= hashItem %>"> <i class="bi bi-x text-muted"></i> </button> </td> </tr>'
tpl['fields/dataset.html'] = '<% if (readonly) { %> <table class="coreui-form__field-dataset-container" <% if (rows.length == 0) { %> style="display:none"<% } %>> <thead> <tr> <% $.each(headers, function(key, item) { %> <td class="text-muted pe-2"><small><%= item.title %></small></td> <% }); %> </tr> </thead> <tbody class="coreui-form__field-dataset-list"> <% $.each(rows, function(key, row) { %> <%- row %> <% }); %> </tbody> </table> <% } else { %> <table class="coreui-form__field-dataset-container" <% if (rows.length == 0) { %> style="display:none"<% } %>> <thead> <tr> <% $.each(headers, function(key, item) { %> <td class="text-muted"><small><%= item.title %></small></td> <% }); %> <td></td> </tr> </thead> <tbody class="coreui-form__field-dataset-list"> <% $.each(rows, function(key, row) { %> <%- row %> <% }); %> </tbody> </table> <button type="button" class="btn btn-link btn-dataset-add"><%= lang.dataset_add %></button> <% } %>'
tpl['fields/file-upload.html'] = ' <% if (showButton) { %> <button type="button" class="btn btn-outline-secondary fileup-btn"> <%= lang.file_upload_select %> <input type="file" id="fileup-<%= id %>"<% if (isMultiple) { %> multiple<% } %><% if (accept) { %> accept="<%= accept %>"<% } %>> </button> <% } else { %> <input type="file" id="fileup-<%= id %>"<% if (isMultiple) { %> multiple<% } %><% if (accept) { %> accept="<%= accept %>"<% } %> style="display:none"> <% } %> <% if (showDropzone) { %> <div id="fileup-<%= id %>-dropzone" class="fileup-dropzone p-4 d-inline-block text-primary-emphasis fs-5 rounded-4 text-center <% if (showButton) { %>mt-2<% } %>>"> <i class="bi bi-folder2-open"></i> <%= lang.file_upload_dropzone %> </div> <% } %> <div id="fileup-<%= id %>-queue"></div>'
tpl['fields/hidden.html'] = '<% if ( ! readonly) { %> <input <%- attr %>/> <% } %>'
tpl['fields/input.html'] = '<% if (readonly) { %> <div class="coreui-form__field-readonly col-form-label"><%- value %></div> <% } else { %> <input <%- attr %>/> <% if (datalist.length > 0) { %> <datalist id="<%= datalistId %>"> <% $.each(datalist, function(key, item) { %> <option <%- item.attr %>/> <% }); %> </datalist> <% } %> <% } %>'
tpl['fields/modal-loading.html'] = '<div class="py-4 d-flex justify-content-center align-items-center gap-2"> <div class="spinner-border mr-2"></div> <%= lang.modal_loading %> </div> '
tpl['fields/modal.html'] = '<% if (readonly) { %> <div class="coreui-form__field-readonly col-form-label"><%= text %></div> <% } else { %> <div class="input-group"<% if (width) { %> style="width:<%= width %>"<% } %>> <input <%- attr %>/> <input type="hidden" name="<%= name %>" value="<%= value %>" class="coreui-form-modal-value"/> <% if ( ! required) { %> <button class="btn btn-outline-secondary btn-modal-clear border-secondary-subtle" type="button"> <i class="bi bi-x"></i> </button> <% } %> <button class="btn btn-outline-secondary btn-modal-select border-secondary-subtle" type="button"><%= lang.modal_select %></button> </div> <% } %>'
tpl['fields/passwordRepeat.html'] = '<% if (readonly) { %> <div class="coreui-form__field-readonly col-form-label"><%- value %></div> <% } else { %> <div class="d-flex gap-1 align-items-center"> <input <%- attr %>/> <% if (showBtn) { %> <div class="input-group flex-nowrap"> <input <%- attr2 %>/> <button class="btn btn-outline-secondary border-secondary-subtle btn-password-change" type="button" data-change="<%- lang.change %>" data-cancel="<%- lang.cancel %>"><%= btn_text %></button> </div> <% } else { %> <input <%- attr2 %>/> <% } %> </div> <% } %>'
tpl['fields/radio-btn.html'] = '<% if (readonly) { %> <div class="coreui-form__field-readonly col-form-label"><%- selectedItem %></div> <% } else { %> <div class="pt-2"> <div class="btn-group" role="group"> <% $.each(options, function(key, option) { %> <input <%- option.attr %>> <label class="<%= optionsClass %>" for="<%= option.id %>"><%= option.text %></label> <% }); %> </div> </div> <% } %>'
tpl['fields/radio.html'] = '<% if (readonly) { %> <div class="coreui-form__field-readonly col-form-label"><%- selectedItem %></div> <% } else { %> <div class="pt-2"> <% $.each(options, function(key, option) { %> <div class="form-check<% if (inline) { %> form-check-inline<% } %>"> <input <%- option.attr %>/> <label class="form-check-label" for="<%= option.id %>"><%= option.text %></label> </div> <% }); %> </div> <% } %>'
tpl['fields/select.html'] = '<% if (readonly) { %> <div class="coreui-form__field-readonly col-form-label"><%= readonlyOptions.join(\', \') %></div> <% } else { %> <select <%- attr %>> <% $.each(options, function(key, option) { %> <% if (option.type === \'group\') { %> <optgroup<%- option.attr %>/> <% $.each(option.options, function(key, groupOption) { %> <option <%- groupOption.attr %>/><%= groupOption.text %></option> <% }); %> </optgroup> <% } else { %> <option <%- option.attr %>/><%= option.text %></option> <% } %> <% }); %> </select> <% } %>'
tpl['fields/switch.html'] = '<% if (readonly) { %> <div class="coreui-form__field-readonly col-form-label"><%= valueY == value ? lang.switch_yes : lang.switch_no %></div> <% } else { %> <div class="form-check form-switch pt-2"> <input <%- attr %>/> </div> <% } %>'
tpl['fields/textarea.html'] = '<% if (readonly) { %> <div class="coreui-form__field-readonly col-form-label"><%- value %></div> <% } else { %> <textarea <%- attr %>><%- value %></textarea> <% } %>'
tpl['fields/wysiwyg.html'] = '<% if (readonly) { %> <div class="coreui-form__field-readonly col-form-label"><%- value %></div> <% } else { %> <textarea name="<%= name %>" id="editor-<%= editorHash %>"><%- value %></textarea> <% } %>';
export default tpl;