cherrypy-foundation 1.0.0__py3-none-any.whl

cherrypy_foundation/components/ColorModes.jinja

@@ -0,0 +1,70 @@
+{# def header="Toggle theme", light_label="Light", dark_label="Dark", auto_label="Auto" #}
+{#css vendor/bootstrap5/css/bootstrap.min.css #}
+{#js vendor/popper/popper.min.js, vendor/bootstrap5/js/bootstrap.min.js, vendor/bootstrap5/js/color-modes.js #}
+<svg class="d-none" xmlns="http://www.w3.org/2000/svg">
+  <symbol id="check2" viewbox="0 0 16 16">
+  <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z">
+  </path>
+  </symbol>
+  <symbol id="circle-half" viewbox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>
+  </symbol>
+  <symbol id="moon-stars-fill" viewbox="0 0 16 16">
+  <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z">
+  </path>
+  <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z">
+  </path>
+  </symbol>
+  <symbol id="sun-fill" viewbox="0 0 16 16">
+  <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z">
+  </path>
+  </symbol>
+</svg>
+<li>
+  <span id="bd-theme" class="dropdown-item disabled">
+    <span id="bd-theme-text">{{ header }}</span>
+    <svg aria-hidden="true"
+         class="theme-icon-active visually-hidden"
+         width="16"
+         height="16">
+      <use href="#circle-half">
+      </use>
+    </svg>
+  </span>
+</li>
+<li>
+  <button aria-pressed="false"
+          class="dropdown-item"
+          data-bs-theme-value="light"
+          type="button">
+    <svg aria-hidden="true" class="me-2" width="16" height="16">
+      <use href="#sun-fill">
+      </use>
+    </svg>
+    {{ light_label }}
+  </button>
+</li>
+<li>
+  <button aria-pressed="false"
+          class="dropdown-item"
+          data-bs-theme-value="dark"
+          type="button">
+    <svg aria-hidden="true" class="me-2" width="16" height="16">
+      <use href="#moon-stars-fill">
+      </use>
+    </svg>
+    {{ dark_label }}
+  </button>
+</li>
+<li>
+  <button aria-pressed="true"
+          class="dropdown-item"
+          data-bs-theme-value="auto"
+          type="button">
+    <svg aria-hidden="true" class="me-2 " width="16" height="16">
+      <use href="#circle-half">
+      </use>
+    </svg>
+    {{ auto_label }}
+  </button>
+</li>

cherrypy_foundation/components/Datatable.css

@@ -0,0 +1,47 @@
+/* Remove default margin from layout */
+div.dt-container div.dt-layout-row {
+    margin: 0;
+}
+
+/* Remove default seperator */
+div.dt-container.dt-empty-footer .dt-scroll-body {
+    border-bottom: 0;
+}
+
+/* Show hide Action button */
+.dt-container tr .btn-hover {
+    opacity: 0;
+}
+
+.dt-container tr:hover .btn-hover {
+    opacity: 1;
+}
+
+/*
+* Hide responsive column "none" during loading.
+*/
+.dt-container th.none {
+    display: none;
+}
+
+/* Fix background color of button collection in DarkMode */
+div.dt-button-collection {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    border-color: var(--bs-border-color-translucent);
+}
+
+/* Css for responsive details render tableHidden */
+table.dtr-details .dtr-title-cell {
+  width: 15%;
+  white-space: nowrap;
+  vertical-align: top;
+  padding: 8px 10px;
+}
+
+table.dtr-details .dtr-data-cell {
+  width: 85%;
+  white-space: normal;
+  word-break: break-word;
+  padding: 8px 10px;
+}

cherrypy_foundation/components/Datatable.jinja

@@ -0,0 +1,63 @@
+{# def data, columns=[], order=[], empty_message=None, info_message=None, searching=True, buttons=[], paging=True, page_length=25, length_change=True, buttons_cfg={}, layout={}, server_side=False, state_save=True, auto_width=False, responsive=False, rowgroup=False, fixed_header=False, scroll_y=False #}
+{#css vendor/bootstrap5/css/bootstrap.min.css, vendor/datatables/css/dataTables.dataTables.css, vendor/datatables-extensions/Buttons/css/buttons.dataTables.min.css, vendor/datatables-extensions/FixedHeader/css/fixedHeader.dataTables.css, vendor/datatables-extensions/Responsive/css/responsive.dataTables.min.css, vendor/datatables-extensions/rowgroup/css/rowGroup.dataTables.min.css #}
+{#js vendor/jquery/jquery.min.js, vendor/popper/popper.min.js, vendor/bootstrap5/js/bootstrap.min.js, vendor/datatables-extensions/JSZip/jszip.min.js, vendor/datatables-extensions/pdfmake/build/pdfmake.min.js, vendor/datatables-extensions/pdfmake/build/vfs_fonts.js, vendor/datatables/js/dataTables.min.js, vendor/datatables-extensions/Responsive/js/dataTables.responsive.min.js, vendor/datatables-extensions/Buttons/js/dataTables.buttons.min.js, vendor/datatables-extensions/Buttons/js/buttons.html5.min.js, vendor/datatables-extensions/FixedHeader/js/dataTables.fixedHeader.min.js, vendor/datatables-extensions/rowgroup/js/dataTables.rowGroup.js #}
+{% set classes = {
+  "sPaging": "d-flex justify-content-center",
+  "sPageButton": "btn btn-outline-primary ms-1 me-1",
+  "sPageButtonActive": "active"
+} %}
+{% set language = {
+  "url": url_for('language', _('en')),
+  "info": info_message or (_(' from _START_ to _END_ of _TOTAL_ total') if paging else _('Showing total of _TOTAL_')),
+  "emptyTable": empty_message or _('List is empty'),
+} %}
+{# Use jinja recursive loop to merge buttons config. #}
+{% set buttons_cfg_default = {
+  "dom": {
+    "button": {
+      "className": "btn btn-sm ms-1 mb-2 mb-sm-0",
+      "active": "active"
+    },
+    "collection": {
+      "tag": "div",
+      "button": {
+        "tag": "a",
+        "className": "btn btn-sm btn-link mb-2 mb-sm-0 w-100 text-start",
+        "active": "active",
+        "disabled": "disabled"
+      }
+    }
+  }
+} %}
+{% set ns = namespace(buttons_cfg = dict(buttons_cfg_default), stack_value=[]) %}
+{% set ns.stack_value = [ns.buttons_cfg] %}
+{% for key, value in buttons_cfg.items() recursive %}
+  {% if value is mapping %}
+    {% do ns.stack_value.append( ns.stack_value[-1].get(key, {}) ) %}
+    {{ loop(value.items() ) }}
+    {% set value = ns.stack_value.pop() %}
+  {% endif %}
+  {% do ns.stack_value[-1].__setitem__(key, value) %}
+{% endfor %}
+{% do ns.buttons_cfg.__setitem__('buttons', buttons) %}
+<table {{ attrs.render(class="table table-hover",
+   width="100%",
+   data_ajax=data,
+   data_auto_width=auto_width | tojson,
+   data_buttons=ns.buttons_cfg | tojson,
+   data_classes=classes | tojson,
+   data_columns=columns | tojson,
+   data_layout=layout | tojson,
+   data_fixed_header=fixed_header | tojson,
+   data_language=language | tojson,
+   data_length_change=length_change | tojson,
+   data_order=order | tojson | e,
+   data_page_length=page_length | tojson,
+   data_paging=paging | tojson,
+   data_responsive=responsive | tojson,
+   data_row_group=rowgroup | tojson,
+   data_searching=searching | tojson,
+   data_server_side=server_side | tojson,
+   data_state_save=state_save | tojson,
+   data_scroll_y=scroll_y) }}>
+</table>

cherrypy_foundation/components/Datatable.js

@@ -0,0 +1,358 @@
+/**
+ * Cherrypy-foundation
+ * Copyright (C) 2026 IKUS Software
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/* Throw a JavaScript error. */
+$.fn.dataTable.ext.errMode = 'throw';
+
+$.fn.dataTable.rowGroupRender = $.fn.dataTable.rowGroupRender || {};
+
+/**
+ * Buttons to filter content of datatable.
+ *
+ * Options:
+ * - search: Define the search criteria when filter is active
+ * - search_off: Define the search criteria when filter is not active (optional)
+ * - regex: True to enable regex lookup (optional)
+ * - multi: True to enablemultiple selection for the same column.
+ */
+$.fn.dataTable.ext.buttons.filter = {
+    init: function(dt, node, config) {
+        if (config.search_off && config.multi) {
+            console.error('search_off and multi are not supported together');
+        }
+        const that = this;
+        dt.on('search.dt', function() {
+            let activate;
+            const curSearch = dt.column(config.column).search();
+            if (config.multi) {
+                const terms = curSearch.replace(/^\(/, '').replace(/\)$/, '').split('|');
+                activate = terms.includes(config.search);
+            } else {
+                activate = dt.column(config.column).search() === config.search;
+            }
+            that.active(activate);
+        });
+    },
+    action: function(e, dt, node, config) {
+        const curSearch = dt.column(config.column).search();
+        let terms = curSearch.replace(/^\(/, '').replace(/\)$/, '').split('|').filter(item => item !== '');
+        if (node.hasClass('active')) {
+            if (config.search_off) {
+                // Disable - replace by our search_off pattern
+                terms = [config.search_off];
+            } else {
+                // Disable - remove from term.
+                terms = terms.filter(item => item != config.search)
+            }
+        } else if (config.multi) {
+            // Enable - add new terms
+            terms.push(config.search)
+        } else {
+            // Enable - replace all terms
+            terms = [config.search];
+        }
+        let search;
+        if (terms.length == 0) {
+            search = '';
+        } else if (terms.length == 1) {
+            search = terms[0];
+        } else {
+            search = '(' + terms.join('|') + ')';
+        }
+        dt.column(config.column).search(search, true);
+        dt.draw(true);
+    }
+};
+$.fn.dataTable.ext.buttons.btnfilter = {
+    extend: 'filter',
+    className: 'cdt-btn-filter'
+};
+$.fn.dataTable.ext.buttons.collectionfilter = {
+    align: 'button-right',
+    autoClose: true,
+    background: false,
+    extend: 'collection',
+    className: 'cdt-btn-collectionfilter',
+    init: function(dt, node, config) {
+        const that = this;
+        dt.on('search.dt', function() {
+            const activate = dt.column(config.column).search() !== '';
+            that.active(activate);
+        });
+    },
+};
+/**
+ * Button to reset the filters of datatable.
+ * Default settings are restored using init() API.
+ */
+$.fn.dataTable.ext.buttons.reset = {
+    text: 'Reset',
+    action: function(e, dt, node, config) {
+        dt.search('');
+        if (dt.init().aoSearchCols) {
+            const searchCols = dt.init().aoSearchCols;
+            for (let i = 0; i < searchCols.length; i++) {
+                const search = searchCols[i].search || "";
+                dt.column(i).search(search);
+            }
+        } else {
+            dt.columns().search('');
+        }
+        dt.draw(true);
+    }
+};
+/**
+ * Default render
+ */
+$.fn.dataTable.render.button = function ({
+  label = 'changeme',
+  className = 'btn btn-sm btn-primary btn-hover text-nowrap',
+  ...attrs
+} = {}) {
+  const { escapeHtml } = DataTable.util;
+
+  const attr = (name, value) => {
+    if (value == null || value === false) return '';
+    if (value === true) return ` ${name}`;
+    return ` ${name}="${escapeHtml(String(value))}"`;
+  };
+
+  return {
+    display: function (data, type, row, meta) {
+      if (!data) return '';
+
+      const href = encodeURI(String(data));
+
+      // If caller supplies `class`, prefer it over className
+      const { class: clsFromAttrs, ...rest } = attrs;
+      const classValue = clsFromAttrs ?? className;
+
+      const known = attr('class', classValue);
+
+      const extra = Object.entries(rest)
+        .map(([k, v]) => attr(k, v))
+        .join('');
+
+      return `<a${known}${extra} href="${escapeHtml(href)}">${escapeHtml(label)}</a>`;
+    },
+  };
+};
+$.fn.dataTable.render.choices = function(choices) {
+    let lookup = null;
+    if (Array.isArray(choices)) {
+        // Convert array of tuples to a lookup object
+        lookup = Object.fromEntries(choices);
+    } else if (typeof choices === "object" && choices !== null) {
+        // Already a dictionary
+        lookup = choices;
+    }
+    return {
+        display: function(data, type, row, meta) {
+            return (lookup && data in lookup) ? lookup[data] : data;
+        },
+    };
+}
+
+// Build a child-row table showing only the hidden columns
+$.fn.dataTable.Responsive.renderer.tableHidden =  function (options) {
+  options = $.extend(
+    {
+      tableClass: '',
+      empty: '—' // placeholder when a hidden cell is empty
+    },
+    options
+  );
+
+  return function (api, rowIdx, columns) {
+    const data = $.map(columns, function (col) {
+      if (!col.hidden) {
+        return '';
+      }
+
+      const klass = col.className
+        ? 'class="' + col.className + '"'
+        : '';
+
+      const title =
+        '' !== col.title
+          ? col.title + ':'
+          : '';
+
+      // Treat null/undefined/empty-string as empty
+      const cell =
+        col.data !== null &&
+        col.data !== undefined &&
+        col.data !== ''
+          ? col.data
+          : options.empty;
+
+      return (
+        '<tr ' +
+        klass +
+        ' data-dt-row="' +
+        col.rowIndex +
+        '" data-dt-column="' +
+        col.columnIndex +
+        '">' +
+        '<th class="dtr-title-cell">' +
+        title +
+        '</th> ' +
+        '<td class="dtr-data-cell">' +
+        cell +
+        '</td>' +
+        '</tr>'
+      );
+    }).join('');
+
+    // If there are no hidden columns, return false so no child row is shown
+    return data
+      ? $(
+          '<table class="' +
+            options.tableClass +
+            ' dtr-details" width="100%"/>'
+        ).append(data)
+      : false;
+  };
+}
+
+// Resolve one spec (render/startRender/endRender) into a callable
+function resolveRenderSpec(source, key) {
+    if (!source || !key || source[key] == null) return;
+
+    const value = source[key];
+    let fn;
+
+    if (typeof value === 'function') {
+        // Case A: already a function — use as-is
+        fn = value;
+    } else {
+        // Case B: value is a string naming a render factory, e.g. 'number', 'text', 'ellipsis', 'myPlugin'
+        const factoryName = value;
+        let renderNS;
+        if(key == 'render') {
+            renderNS = $.fn.dataTable?.render;
+        } else if(key == 'startRender' || key == 'endRender') {
+            renderNS = $.fn.dataTable?.rowGroupRender;
+        } else if(key == 'renderer') {
+            renderNS = $.fn.dataTable?.Responsive?.renderer;
+        }
+        
+        const factory = renderNS?.[factoryName];
+        if (typeof factory !== 'function') {
+            console.warn(`DataTables render factory '${factoryName}' not found`);
+            return;
+        }
+
+        // Support kwargs | args | arg
+        if (source[`${key}_kwargs`]) {
+            fn = factory({...source[`${key}_kwargs`]});
+        } else if (source[`${key}_args`]) {
+            fn = factory(...source[`${key}_args`]);
+        } else if (Object.hasOwn(source, `${key}_arg`)) {
+            fn = factory(source[`${key}_arg`]);
+        } else {
+            fn = factory();
+        }
+    }
+
+    return fn;
+}
+
+jQuery(function() {
+    $('table[data-ajax]').each(function(_idx) {
+        /* Load column properties */
+        let columns = $(this).attr('data-columns');
+        $(this).removeAttr('data-columns');
+        columns = JSON.parse(columns);
+        $.each(columns, function(_index, item) {
+            item.render = resolveRenderSpec(item, 'render');
+        });
+
+        /* Process rowGroup render */
+        let rowGroup = $(this).attr('data-row-group');
+        $(this).removeAttr('data-row-group');
+        rowGroup = JSON.parse(rowGroup);
+        if(rowGroup && typeof rowGroup === 'object') {
+            rowGroup.startRender = resolveRenderSpec(rowGroup, 'startRender');
+            rowGroup.endRender = resolveRenderSpec(rowGroup, 'endRender');
+        }
+
+        /* Process responsive details render */
+        let responsive = $(this).attr('data-responsive');
+        $(this).removeAttr('data-responsive');
+        responsive = JSON.parse(responsive);
+        if(responsive && typeof responsive === 'object') {
+            responsive.renderer = resolveRenderSpec(responsive, 'renderer');
+        }
+
+        let searchCols = columns.map(function(item, _index) {
+            if (item.search !== undefined) {
+                return {
+                    "search": item.search,
+                    "regex": item.regex || false
+                };
+            }
+            return null;
+        });
+        let dt = $(this).DataTable({
+            columns: columns,
+            rowGroup: rowGroup,
+            responsive: responsive,
+            searchCols: searchCols,
+            drawCallback: function(_settings) {
+                // This callback show or hide the pagination when required
+                if (_settings.aanFeatures.p) {
+                    if (_settings._iDisplayLength > _settings.fnRecordsDisplay()) {
+                        $(_settings.aanFeatures.p[0]).parent().hide();
+                    } else {
+                        $(_settings.aanFeatures.p[0]).parent().show();
+                    }
+                }
+                // This callback is responsible to add and remove 'sorting-x-x' class
+                // to allow CSS customization of the table based on the sorted column
+                this.removeClass(function(_index, className) {
+                    return className.split(/\s+/).filter(function(c) {
+                        return c.startsWith('sorted-');
+                    }).join(' ');
+                });
+                // Add sorting class when sorting without filter
+                if (this.api().order() && this.api().order()[0] && this.api().order()[0][0] >= 0 && this.api().search() === '') {
+                    const colIdx = this.api().order()[0][0];
+                    const direction = this.api().order()[0][1]
+                    this.addClass('sorted-' + colIdx + '-' + direction);
+                    const colName = _settings.aoColumns[colIdx].name;
+                    if (colName) {
+                        this.addClass('sorted-' + colName + '-' + direction);
+                    }
+                }
+            },
+            initComplete: function() {
+                // Remove no-footer class to fix CSS display with bootstrap5
+                $(this).removeClass("no-footer");
+                // If searching is enabled, focus on search field.
+                $("div.dataTables_filter input").focus();
+                // Trigger responsive recalculation on window resize
+                $(window).on('resize', function() {
+                    dt.columns.adjust().responsive.recalc();
+                });
+            },
+            processing: true,
+            deferRender: true,
+        });
+    });
+});

cherrypy_foundation/components/Field.css

@@ -0,0 +1,10 @@
+/* Adjust style of form check box */
+ul.form-list-widget  {
+    list-style: none;
+}
+
+/* Change color of read-only fields */
+input[type="text"][readonly], select[readonly] {
+    background-color: var(--bs-tertiary-bg);
+    cursor: not-allowed;
+}

cherrypy_foundation/components/Field.jinja

@@ -0,0 +1,66 @@
+{# def field, floating=False #}
+{#css vendor/bootstrap5/css/bootstrap.min.css #}
+{#js vendor/jquery/jquery.min.js, vendor/popper/popper.min.js, vendor/bootstrap5/js/bootstrap.min.js #}
+{# djlint:off #}
+{% set bootstrap_class_table = {
+  "CheckboxInput": ("form-check-input", "form-check-label", False, True),
+  "EmailInput": ("form-control", "form-label", True, False),
+  "NumberInput": ("form-control", "form-label", True, False),
+  "PasswordInput": ("form-control", "form-label", True, False),
+  "Select": ("form-select", "form-label", True, False),
+  "SubmitInput": ("btn", "d-none", False, False),
+  "TextArea": ("form-control", "form-label", True, False),
+  "TextInput": ("form-control", "form-label", True, False),
+  "RadioInput": ("form-check", "form-label", False, False),
+  "ListWidget": ("form-list-widget", "form-label", False, False)
+} %}
+{# djlint:on #}
+{# Add proper class if field is invalid. #}
+{% if field.errors %}
+  {% do attrs.add_class('is-invalid') %}
+{% endif %}
+{# Also include render_kw if any #}
+{% if field.render_kw %}
+  {% do attrs.set(**field.render_kw) %}
+{% endif %}
+{% if field.widget.input_type is defined and field.widget.input_type == 'hidden' %}
+  {{ field.widget(field, **attrs.as_dict) }}
+{% else %}
+  {# For each widget list supported options. #}
+  {# Assign propert bootstrap class based on wtform widget #}
+  {% set input_class, label_class, floating_supported, label_always_last = bootstrap_class_table.get(field.widget.__class__.__name__) or ('', 'form-label', False, False) %}
+  {% set label_last = (floating and floating_supported) or label_always_last %}
+  {% do attrs.add_class(input_class) %}
+  {# Used for input-group #}
+  {% set prepend = attrs.get('prepend', None) %}
+  {% set append = attrs.get('append', None) %}
+  {% set input_group = prepend or append %}
+  {# Build container & label specific attributes #}
+  {% set container_attrs = attrs.__class__({'class': 'mb-2 form-field'}) %}
+  {% set label_attrs = attrs.__class__({'class': label_class}) %}
+  {% for key, value in attrs.as_dict.items() %}
+    {% if key.startswith('container-') or key.startswith('container_') %}
+      {% do container_attrs.set(**{key[10:]: value|string}) %}
+    {% endif %}
+    {% if key.startswith('label-') or key.startswith('label_') %}
+      {% do label_attrs.set(**{key[6:]: value|string}) %}
+    {% endif %}
+  {% endfor %}
+  <div {{ container_attrs.as_dict | xmlattr }}>
+    {% if floating and floating_supported %}<div class="form-floating">{% endif %}
+      {% if not label_last %}{{ field.label(**label_attrs.as_dict) }}{% endif %}
+      {% if input_group %}
+        <div class="input-group">
+          {% if prepend %}<span class="input-group-text">{{ prepend }}</span>{% endif %}
+        {% endif %}
+        {{ field.widget(field, **attrs.as_dict) }}
+        {% if input_group %}
+          {% if append %}<span class="input-group-text">{{ append }}</span>{% endif %}
+        </div>
+      {% endif %}
+      {% if label_last %}{{ field.label(**label_attrs.as_dict) }}{% endif %}
+      {% for error in field.errors %}<div class="invalid-feedback">{{ error }}</div>{% endfor %}
+      {% if field.description %}<div class="form-text small test-secondary">{{ field.description }}</div>{% endif %}
+      {% if floating and floating_supported %}</div>{% endif %}
+  </div>
+{% endif %}

cherrypy_foundation/components/Field.js

@@ -0,0 +1,56 @@
+/**
+ * Control showif
+ */
+jQuery(function() {
+    function escape(v) {
+        return v.replace(/(:|\.|\[|\]|,|=)/g, "\\$1");
+    }
+    $('[data-showif-field]').each(function() {
+        const elem = $(this);
+        const field = $(this).data('showif-field');
+        const operator = $(this).data('showif-operator');
+        const value = $(this).data('showif-value');
+        // Lookup field
+        if (!field) {
+            return;
+        }
+        const fieldElem = $("[name='" + escape(field) + "']");
+        if (fieldElem.length > 0) {
+            function updateShowIf() {
+                const curValue = fieldElem.val();
+                let visible = false;
+                if (operator == 'eq') {
+                    visible = curValue == value;
+                } else if (operator == 'ne') {
+                    visible = curValue != value;
+                } else if (operator == 'in' && Array.isArray(value)) {
+                    visible = $.inArray(curValue, value) >= 0;
+                }
+                // To handle the initial state, manually add the collapse class before creating the collapsable class.
+                const parent = elem.closest('.form-field');
+                if (!parent.hasClass('collapse')) {
+                    parent.addClass('collapse');
+                    if (visible) {
+                        parent.addClass('show');
+                    }
+                }
+                // Update widget visibility accordingly.
+                let collapsible = bootstrap.Collapse.getOrCreateInstance(parent, {
+                    toggle: false
+                });
+                if (visible) {
+                    collapsible.show();
+                    elem.removeAttr('disabled');
+                } else {
+                    collapsible.hide();
+                    elem.attr('disabled', '1');
+                }
+            }
+            // Attach event to field.
+            fieldElem.change(function() {
+                updateShowIf();
+            })
+            updateShowIf();
+        }
+    });
+});

cherrypy_foundation/components/Fields.jinja

@@ -0,0 +1,4 @@
+{# def form, floating=False #}
+<div class="row">
+  {% for id, field in form._fields.items() %}<Field field={{ field }} floating={{ floating }} />{% endfor %}
+</div>