mirror of
https://github.com/django-components/django-components.git
synced 2025-08-16 20:20:14 +00:00
161 lines
No EOL
56 KiB
HTML
161 lines
No EOL
56 KiB
HTML
<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="A way to create simple reusable template components in Django."><link href=https://emilstenstrom.github.io/django-components/latest/reference/django_components/expression/ rel=canonical><link href=../context/ rel=prev><link href=../library/ rel=next><link rel=icon href=../../../assets/images/favicon.png><meta name=generator content="mkdocs-1.5.3, mkdocs-material-9.5.16"><title>expression - Django-Components</title><link rel=stylesheet href=../../../assets/stylesheets/main.bcfcd587.min.css><link rel=stylesheet href=../../../assets/stylesheets/palette.06af60db.min.css><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"><style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style><link rel=stylesheet href=../../../assets/_markdown_exec_pyodide.css><link rel=stylesheet href=../../../assets/_mkdocstrings.css><link rel=stylesheet href=../../../css/timeago.css><script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script><meta property=og:type content=website><meta property=og:title content="<code class=" doc-symbol doc-symbol-nav doc-symbol-module"></code> expression - Django-Components" > <meta property=og:description content="A way to create simple reusable template components in Django."><meta property=og:image content=https://emilstenstrom.github.io/django-components/latest/assets/images/social/reference/django_components/expression/index.png><meta property=og:image:type content=image/png><meta property=og:image:width content=1200><meta property=og:image:height content=630><meta content=https://emilstenstrom.github.io/django-components/latest/reference/django_components/expression/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="<code class=" doc-symbol doc-symbol-nav doc-symbol-module"></code> expression - Django-Components" > <meta name=twitter:description content="A way to create simple reusable template components in Django."><meta name=twitter:image content=https://emilstenstrom.github.io/django-components/latest/assets/images/social/reference/django_components/expression/index.png></head> <body dir=ltr data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo> <input class=md-toggle data-md-toggle=drawer type=checkbox id=__drawer autocomplete=off> <input class=md-toggle data-md-toggle=search type=checkbox id=__search autocomplete=off> <label class=md-overlay for=__drawer></label> <div data-md-component=skip> <a href=#django_components.expression class=md-skip> Skip to content </a> </div> <div data-md-component=announce> <aside class=md-banner> <div class="md-banner__inner md-grid md-typeset"> 🚨The documentation is still a work in progress. 🚨 </div> </aside> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> </div> <header class="md-header md-header--shadow" data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../../.. title=Django-Components class="md-header__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg> </label> <div class=md-header__title data-md-component=header-title> <div class=md-header__ellipsis> <div class=md-header__topic> <span class=md-ellipsis> Django-Components </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> expression </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media=(prefers-color-scheme) data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_0> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69m-9.15 3.96h2.3L12 9l-1.15 3.65Z"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme=default data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to dark mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_2 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31Z"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme=slate data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_2> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_0 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5c-.84 0-1.65.15-2.39.42L12 2M3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29L3.34 7m.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14L3.36 17M20.65 7l-1.77 3.79a7.023 7.023 0 0 0-2.38-4.15l4.15.36m-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29L20.64 17M12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44L12 22Z"/></svg> </label> </form> <script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <label class="md-header__button md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg> </label> <div class=md-search data-md-component=search role=dialog> <label class=md-search__overlay for=__search></label> <div class=md-search__inner role=search> <form class=md-search__form name=search> <input type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg> </label> <nav class=md-search__options aria-label=Search> <a href=javascript:void(0) class="md-search__icon md-icon" title=Share aria-label=Share data-clipboard data-clipboard-text data-md-component=search-share tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7 0-.24-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91 1.61 0 2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08Z"/></svg> </a> <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg> </button> </nav> <div class=md-search__suggest data-md-component=search-suggest></div> </form> <div class=md-search__output> <div class=md-search__scrollwrap data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/EmilStenstrom/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> </div> <div class=md-source__repository> EmilStenstrom/django-components </div> </a> </div> </nav> </header> <div class=md-container data-md-component=container> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=../../.. title=Django-Components class="md-nav__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg> </a> Django-Components </label> <div class=md-nav__source> <a href=https://github.com/EmilStenstrom/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> </div> <div class=md-source__repository> EmilStenstrom/django-components </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_1> <div class="md-nav__link md-nav__container"> <a href=../../.. class="md-nav__link "> <span class=md-ellipsis> README </span> </a> <label class="md-nav__link " for=__nav_1 id=__nav_1_label tabindex> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_1_label aria-expanded=false> <label class=md-nav__title for=__nav_1> <span class="md-nav__icon md-icon"></span> README </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../CHANGELOG/ class=md-nav__link> <span class=md-ellipsis> Changelog </span> </a> </li> <li class=md-nav__item> <a href=../../../CODE_OF_CONDUCT/ class=md-nav__link> <span class=md-ellipsis> Code of Conduct </span> </a> </li> <li class=md-nav__item> <a href=../../../license/ class=md-nav__link> <span class=md-ellipsis> License </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2 checked> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex> <span class=md-ellipsis> Reference </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=true> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Reference </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2_1 checked> <label class=md-nav__link for=__nav_2_1 id=__nav_2_1_label tabindex=0> <span class=md-ellipsis> API Reference </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_1_label aria-expanded=true> <label class=md-nav__title for=__nav_2_1> <span class="md-nav__icon md-icon"></span> API Reference </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2_1_1 checked> <div class="md-nav__link md-nav__container"> <a href=../ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components </span> </a> <label class="md-nav__link " for=__nav_2_1_1 id=__nav_2_1_1_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_2_1_1_label aria-expanded=true> <label class=md-nav__title for=__nav_2_1_1> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../app_settings/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> app_settings </span> </a> </li> <li class=md-nav__item> <a href=../apps/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> apps </span> </a> </li> <li class=md-nav__item> <a href=../attributes/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> attributes </span> </a> </li> <li class=md-nav__item> <a href=../autodiscover/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> autodiscover </span> </a> </li> <li class=md-nav__item> <a href=../component/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component </span> </a> </li> <li class=md-nav__item> <a href=../component_media/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_media </span> </a> </li> <li class=md-nav__item> <a href=../component_registry/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_registry </span> </a> </li> <li class=md-nav__item> <a href=../context/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> context </span> </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type=checkbox id=__toc> <label class="md-nav__link md-nav__link--active" for=__toc> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> expression </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> expression </span> </a> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#django_components.expression.process_aggregate_kwargs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code> process_aggregate_kwargs </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../library/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> library </span> </a> </li> <li class=md-nav__item> <a href=../logger/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> logger </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_1_13> <div class="md-nav__link md-nav__container"> <a href=../management/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> management </span> </a> <label class="md-nav__link " for=__nav_2_1_1_13 id=__nav_2_1_1_13_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_13_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_13> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> management </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_1_13_2> <div class="md-nav__link md-nav__container"> <a href=../management/commands/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> commands </span> </a> <label class="md-nav__link " for=__nav_2_1_1_13_2 id=__nav_2_1_1_13_2_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=5 aria-labelledby=__nav_2_1_1_13_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_13_2> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> commands </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../management/commands/startcomponent/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> startcomponent </span> </a> </li> <li class=md-nav__item> <a href=../management/commands/upgradecomponent/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> upgradecomponent </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../middleware/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> middleware </span> </a> </li> <li class=md-nav__item> <a href=../node/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> node </span> </a> </li> <li class=md-nav__item> <a href=../provide/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> provide </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_1_17> <div class="md-nav__link md-nav__container"> <a href=../safer_staticfiles/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> safer_staticfiles </span> </a> <label class="md-nav__link " for=__nav_2_1_1_17 id=__nav_2_1_1_17_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_17_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_17> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> safer_staticfiles </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../safer_staticfiles/apps/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> apps </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../slots/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> slots </span> </a> </li> <li class=md-nav__item> <a href=../tag_formatter/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> tag_formatter </span> </a> </li> <li class=md-nav__item> <a href=../template_loader/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> template_loader </span> </a> </li> <li class=md-nav__item> <a href=../template_parser/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> template_parser </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_1_22> <div class="md-nav__link md-nav__container"> <a href=../templatetags/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> templatetags </span> </a> <label class="md-nav__link " for=__nav_2_1_1_22 id=__nav_2_1_1_22_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_22_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_22> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> templatetags </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../templatetags/component_tags/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_tags </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../types/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> types </span> </a> </li> <li class=md-nav__item> <a href=../utils/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> utils </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component=sidebar data-md-type=toc> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#django_components.expression.process_aggregate_kwargs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code> process_aggregate_kwargs </span> </a> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> <a href=https://github.com/EmilStenstrom/django-components/edit/master/src/django_components/expression.py title="Edit this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4v-2m10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1 2.1 2.1Z"/></svg> </a> <a href=https://github.com/EmilStenstrom/django-components/raw/master/src/django_components/expression.py title="View source of this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.15 8.15 0 0 1-1.23-2Z"/></svg> </a> <div class="doc doc-object doc-module"> <h1 id=django_components.expression class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-module"></code> <span class="doc doc-object-name doc-module-name">expression</span> <a href=#django_components.expression class=headerlink title="Permanent link">¤</a></h1> <div class="doc doc-contents first"> <div class="doc doc-children"> <div class="doc doc-object doc-function"> <h2 id=django_components.expression.process_aggregate_kwargs class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">process_aggregate_kwargs</span> <a href=#django_components.expression.process_aggregate_kwargs class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>process_aggregate_kwargs</span><span class=p>(</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Mapping href=https://docs.python.org/3.12/library/typing.html#typing.Mapping>Mapping</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>])</span> <span class=o>-></span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span>
|
|
</code></pre></div> <div class="doc doc-contents "> <p>This function aggregates "prefixed" kwargs into dicts. "Prefixed" kwargs start with some prefix delimited with <code>:</code> (e.g. <code>attrs:</code>).</p> <p>Example: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>process_component_kwargs</span><span class=p>({</span><span class=s2>"abc:one"</span><span class=p>:</span> <span class=mi>1</span><span class=p>,</span> <span class=s2>"abc:two"</span><span class=p>:</span> <span class=mi>2</span><span class=p>,</span> <span class=s2>"def:three"</span><span class=p>:</span> <span class=mi>3</span><span class=p>,</span> <span class=s2>"four"</span><span class=p>:</span> <span class=mi>4</span><span class=p>})</span>
|
|
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=c1># {"abc": {"one": 1, "two": 2}, "def": {"three": 3}, "four": 4}</span>
|
|
</code></pre></div></p> <hr> <p>We want to support a use case similar to Vue's fallthrough attributes. In other words, where a component author can designate a prop (input) which is a dict and which will be rendered as HTML attributes.</p> <p>This is useful for allowing component users to tweak styling or add event handling to the underlying HTML. E.g.:</p> <p><code>class="pa-4 d-flex text-black"</code> or <code>@click.stop="alert('clicked!')"</code></p> <p>So if the prop is <code>attrs</code>, and the component is called like so: <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_comp"</span> <span class=nv>attrs</span><span class=o>=</span><span class=nv>attrs</span> <span class=cp>%}</span>
|
|
</code></pre></div></p> <p>then, if <code>attrs</code> is: <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=p>{</span><span class=s2>"class"</span><span class=p>:</span> <span class=s2>"text-red pa-4"</span><span class=p>,</span> <span class=s2>"@click"</span><span class=p>:</span> <span class=s2>"dispatch('my_event', 123)"</span><span class=p>}</span>
|
|
</code></pre></div></p> <p>and the component template is: <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=x><div </span><span class=cp>{%</span> <span class=k>html_attrs</span> <span class=nv>attrs</span> <span class=nv>add</span><span class=o>:</span><span class=nv>class</span><span class=o>=</span><span class=s2>"extra-class"</span> <span class=cp>%}</span><span class=x>></div></span>
|
|
</code></pre></div></p> <p>Then this renders: <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"text-red pa-4 extra-class"</span> <span class=err>@</span><span class=na>click</span><span class=o>=</span><span class=s>"dispatch('my_event', 123)"</span> <span class=p>></</span><span class=nt>div</span><span class=p>></span>
|
|
</code></pre></div></p> <p>However, this way it is difficult for the component user to define the <code>attrs</code> variable, especially if they want to combine static and dynamic values. Because they will need to pre-process the <code>attrs</code> dict.</p> <p>So, instead, we allow to "aggregate" props into a dict. So all props that start with <code>attrs:</code>, like <code>attrs:class="text-red"</code>, will be collected into a dict at key <code>attrs</code>.</p> <p>This provides sufficient flexiblity to make it easy for component users to provide "fallthrough attributes", and sufficiently easy for component authors to process that input while still being able to provide their own keys.</p> <details class=quote> <summary>Source code in <code>src/django_components/expression.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-75> 75</a></span>
|
|
<span class=normal><a href=#__codelineno-0-76> 76</a></span>
|
|
<span class=normal><a href=#__codelineno-0-77> 77</a></span>
|
|
<span class=normal><a href=#__codelineno-0-78> 78</a></span>
|
|
<span class=normal><a href=#__codelineno-0-79> 79</a></span>
|
|
<span class=normal><a href=#__codelineno-0-80> 80</a></span>
|
|
<span class=normal><a href=#__codelineno-0-81> 81</a></span>
|
|
<span class=normal><a href=#__codelineno-0-82> 82</a></span>
|
|
<span class=normal><a href=#__codelineno-0-83> 83</a></span>
|
|
<span class=normal><a href=#__codelineno-0-84> 84</a></span>
|
|
<span class=normal><a href=#__codelineno-0-85> 85</a></span>
|
|
<span class=normal><a href=#__codelineno-0-86> 86</a></span>
|
|
<span class=normal><a href=#__codelineno-0-87> 87</a></span>
|
|
<span class=normal><a href=#__codelineno-0-88> 88</a></span>
|
|
<span class=normal><a href=#__codelineno-0-89> 89</a></span>
|
|
<span class=normal><a href=#__codelineno-0-90> 90</a></span>
|
|
<span class=normal><a href=#__codelineno-0-91> 91</a></span>
|
|
<span class=normal><a href=#__codelineno-0-92> 92</a></span>
|
|
<span class=normal><a href=#__codelineno-0-93> 93</a></span>
|
|
<span class=normal><a href=#__codelineno-0-94> 94</a></span>
|
|
<span class=normal><a href=#__codelineno-0-95> 95</a></span>
|
|
<span class=normal><a href=#__codelineno-0-96> 96</a></span>
|
|
<span class=normal><a href=#__codelineno-0-97> 97</a></span>
|
|
<span class=normal><a href=#__codelineno-0-98> 98</a></span>
|
|
<span class=normal><a href=#__codelineno-0-99> 99</a></span>
|
|
<span class=normal><a href=#__codelineno-0-100>100</a></span>
|
|
<span class=normal><a href=#__codelineno-0-101>101</a></span>
|
|
<span class=normal><a href=#__codelineno-0-102>102</a></span>
|
|
<span class=normal><a href=#__codelineno-0-103>103</a></span>
|
|
<span class=normal><a href=#__codelineno-0-104>104</a></span>
|
|
<span class=normal><a href=#__codelineno-0-105>105</a></span>
|
|
<span class=normal><a href=#__codelineno-0-106>106</a></span>
|
|
<span class=normal><a href=#__codelineno-0-107>107</a></span>
|
|
<span class=normal><a href=#__codelineno-0-108>108</a></span>
|
|
<span class=normal><a href=#__codelineno-0-109>109</a></span>
|
|
<span class=normal><a href=#__codelineno-0-110>110</a></span>
|
|
<span class=normal><a href=#__codelineno-0-111>111</a></span>
|
|
<span class=normal><a href=#__codelineno-0-112>112</a></span>
|
|
<span class=normal><a href=#__codelineno-0-113>113</a></span>
|
|
<span class=normal><a href=#__codelineno-0-114>114</a></span>
|
|
<span class=normal><a href=#__codelineno-0-115>115</a></span>
|
|
<span class=normal><a href=#__codelineno-0-116>116</a></span>
|
|
<span class=normal><a href=#__codelineno-0-117>117</a></span>
|
|
<span class=normal><a href=#__codelineno-0-118>118</a></span>
|
|
<span class=normal><a href=#__codelineno-0-119>119</a></span>
|
|
<span class=normal><a href=#__codelineno-0-120>120</a></span>
|
|
<span class=normal><a href=#__codelineno-0-121>121</a></span>
|
|
<span class=normal><a href=#__codelineno-0-122>122</a></span>
|
|
<span class=normal><a href=#__codelineno-0-123>123</a></span>
|
|
<span class=normal><a href=#__codelineno-0-124>124</a></span>
|
|
<span class=normal><a href=#__codelineno-0-125>125</a></span>
|
|
<span class=normal><a href=#__codelineno-0-126>126</a></span>
|
|
<span class=normal><a href=#__codelineno-0-127>127</a></span>
|
|
<span class=normal><a href=#__codelineno-0-128>128</a></span>
|
|
<span class=normal><a href=#__codelineno-0-129>129</a></span>
|
|
<span class=normal><a href=#__codelineno-0-130>130</a></span>
|
|
<span class=normal><a href=#__codelineno-0-131>131</a></span>
|
|
<span class=normal><a href=#__codelineno-0-132>132</a></span>
|
|
<span class=normal><a href=#__codelineno-0-133>133</a></span>
|
|
<span class=normal><a href=#__codelineno-0-134>134</a></span>
|
|
<span class=normal><a href=#__codelineno-0-135>135</a></span>
|
|
<span class=normal><a href=#__codelineno-0-136>136</a></span>
|
|
<span class=normal><a href=#__codelineno-0-137>137</a></span>
|
|
<span class=normal><a href=#__codelineno-0-138>138</a></span>
|
|
<span class=normal><a href=#__codelineno-0-139>139</a></span>
|
|
<span class=normal><a href=#__codelineno-0-140>140</a></span>
|
|
<span class=normal><a href=#__codelineno-0-141>141</a></span>
|
|
<span class=normal><a href=#__codelineno-0-142>142</a></span>
|
|
<span class=normal><a href=#__codelineno-0-143>143</a></span>
|
|
<span class=normal><a href=#__codelineno-0-144>144</a></span>
|
|
<span class=normal><a href=#__codelineno-0-145>145</a></span>
|
|
<span class=normal><a href=#__codelineno-0-146>146</a></span>
|
|
<span class=normal><a href=#__codelineno-0-147>147</a></span>
|
|
<span class=normal><a href=#__codelineno-0-148>148</a></span>
|
|
<span class=normal><a href=#__codelineno-0-149>149</a></span>
|
|
<span class=normal><a href=#__codelineno-0-150>150</a></span>
|
|
<span class=normal><a href=#__codelineno-0-151>151</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-75 name=__codelineno-0-75></a><span class=k>def</span> <span class=nf>process_aggregate_kwargs</span><span class=p>(</span><span class=n>kwargs</span><span class=p>:</span> <span class=n>Mapping</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>])</span> <span class=o>-></span> <span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>]:</span>
|
|
<a id=__codelineno-0-76 name=__codelineno-0-76></a><span class=w> </span><span class=sd>"""</span>
|
|
<a id=__codelineno-0-77 name=__codelineno-0-77></a><span class=sd> This function aggregates "prefixed" kwargs into dicts. "Prefixed" kwargs</span>
|
|
<a id=__codelineno-0-78 name=__codelineno-0-78></a><span class=sd> start with some prefix delimited with `:` (e.g. `attrs:`).</span>
|
|
<a id=__codelineno-0-79 name=__codelineno-0-79></a>
|
|
<a id=__codelineno-0-80 name=__codelineno-0-80></a><span class=sd> Example:</span>
|
|
<a id=__codelineno-0-81 name=__codelineno-0-81></a><span class=sd> ```py</span>
|
|
<a id=__codelineno-0-82 name=__codelineno-0-82></a><span class=sd> process_component_kwargs({"abc:one": 1, "abc:two": 2, "def:three": 3, "four": 4})</span>
|
|
<a id=__codelineno-0-83 name=__codelineno-0-83></a><span class=sd> # {"abc": {"one": 1, "two": 2}, "def": {"three": 3}, "four": 4}</span>
|
|
<a id=__codelineno-0-84 name=__codelineno-0-84></a><span class=sd> ```</span>
|
|
<a id=__codelineno-0-85 name=__codelineno-0-85></a>
|
|
<a id=__codelineno-0-86 name=__codelineno-0-86></a><span class=sd> ---</span>
|
|
<a id=__codelineno-0-87 name=__codelineno-0-87></a>
|
|
<a id=__codelineno-0-88 name=__codelineno-0-88></a><span class=sd> We want to support a use case similar to Vue's fallthrough attributes.</span>
|
|
<a id=__codelineno-0-89 name=__codelineno-0-89></a><span class=sd> In other words, where a component author can designate a prop (input)</span>
|
|
<a id=__codelineno-0-90 name=__codelineno-0-90></a><span class=sd> which is a dict and which will be rendered as HTML attributes.</span>
|
|
<a id=__codelineno-0-91 name=__codelineno-0-91></a>
|
|
<a id=__codelineno-0-92 name=__codelineno-0-92></a><span class=sd> This is useful for allowing component users to tweak styling or add</span>
|
|
<a id=__codelineno-0-93 name=__codelineno-0-93></a><span class=sd> event handling to the underlying HTML. E.g.:</span>
|
|
<a id=__codelineno-0-94 name=__codelineno-0-94></a>
|
|
<a id=__codelineno-0-95 name=__codelineno-0-95></a><span class=sd> `class="pa-4 d-flex text-black"` or `@click.stop="alert('clicked!')"`</span>
|
|
<a id=__codelineno-0-96 name=__codelineno-0-96></a>
|
|
<a id=__codelineno-0-97 name=__codelineno-0-97></a><span class=sd> So if the prop is `attrs`, and the component is called like so:</span>
|
|
<a id=__codelineno-0-98 name=__codelineno-0-98></a><span class=sd> ```django</span>
|
|
<a id=__codelineno-0-99 name=__codelineno-0-99></a><span class=sd> {% component "my_comp" attrs=attrs %}</span>
|
|
<a id=__codelineno-0-100 name=__codelineno-0-100></a><span class=sd> ```</span>
|
|
<a id=__codelineno-0-101 name=__codelineno-0-101></a>
|
|
<a id=__codelineno-0-102 name=__codelineno-0-102></a><span class=sd> then, if `attrs` is:</span>
|
|
<a id=__codelineno-0-103 name=__codelineno-0-103></a><span class=sd> ```py</span>
|
|
<a id=__codelineno-0-104 name=__codelineno-0-104></a><span class=sd> {"class": "text-red pa-4", "@click": "dispatch('my_event', 123)"}</span>
|
|
<a id=__codelineno-0-105 name=__codelineno-0-105></a><span class=sd> ```</span>
|
|
<a id=__codelineno-0-106 name=__codelineno-0-106></a>
|
|
<a id=__codelineno-0-107 name=__codelineno-0-107></a><span class=sd> and the component template is:</span>
|
|
<a id=__codelineno-0-108 name=__codelineno-0-108></a><span class=sd> ```django</span>
|
|
<a id=__codelineno-0-109 name=__codelineno-0-109></a><span class=sd> <div {% html_attrs attrs add:class="extra-class" %}></div></span>
|
|
<a id=__codelineno-0-110 name=__codelineno-0-110></a><span class=sd> ```</span>
|
|
<a id=__codelineno-0-111 name=__codelineno-0-111></a>
|
|
<a id=__codelineno-0-112 name=__codelineno-0-112></a><span class=sd> Then this renders:</span>
|
|
<a id=__codelineno-0-113 name=__codelineno-0-113></a><span class=sd> ```html</span>
|
|
<a id=__codelineno-0-114 name=__codelineno-0-114></a><span class=sd> <div class="text-red pa-4 extra-class" @click="dispatch('my_event', 123)" ></div></span>
|
|
<a id=__codelineno-0-115 name=__codelineno-0-115></a><span class=sd> ```</span>
|
|
<a id=__codelineno-0-116 name=__codelineno-0-116></a>
|
|
<a id=__codelineno-0-117 name=__codelineno-0-117></a><span class=sd> However, this way it is difficult for the component user to define the `attrs`</span>
|
|
<a id=__codelineno-0-118 name=__codelineno-0-118></a><span class=sd> variable, especially if they want to combine static and dynamic values. Because</span>
|
|
<a id=__codelineno-0-119 name=__codelineno-0-119></a><span class=sd> they will need to pre-process the `attrs` dict.</span>
|
|
<a id=__codelineno-0-120 name=__codelineno-0-120></a>
|
|
<a id=__codelineno-0-121 name=__codelineno-0-121></a><span class=sd> So, instead, we allow to "aggregate" props into a dict. So all props that start</span>
|
|
<a id=__codelineno-0-122 name=__codelineno-0-122></a><span class=sd> with `attrs:`, like `attrs:class="text-red"`, will be collected into a dict</span>
|
|
<a id=__codelineno-0-123 name=__codelineno-0-123></a><span class=sd> at key `attrs`.</span>
|
|
<a id=__codelineno-0-124 name=__codelineno-0-124></a>
|
|
<a id=__codelineno-0-125 name=__codelineno-0-125></a><span class=sd> This provides sufficient flexiblity to make it easy for component users to provide</span>
|
|
<a id=__codelineno-0-126 name=__codelineno-0-126></a><span class=sd> "fallthrough attributes", and sufficiently easy for component authors to process</span>
|
|
<a id=__codelineno-0-127 name=__codelineno-0-127></a><span class=sd> that input while still being able to provide their own keys.</span>
|
|
<a id=__codelineno-0-128 name=__codelineno-0-128></a><span class=sd> """</span>
|
|
<a id=__codelineno-0-129 name=__codelineno-0-129></a> <span class=n>processed_kwargs</span> <span class=o>=</span> <span class=p>{}</span>
|
|
<a id=__codelineno-0-130 name=__codelineno-0-130></a> <span class=n>nested_kwargs</span><span class=p>:</span> <span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>]]</span> <span class=o>=</span> <span class=p>{}</span>
|
|
<a id=__codelineno-0-131 name=__codelineno-0-131></a> <span class=k>for</span> <span class=n>key</span><span class=p>,</span> <span class=n>val</span> <span class=ow>in</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>items</span><span class=p>():</span>
|
|
<a id=__codelineno-0-132 name=__codelineno-0-132></a> <span class=k>if</span> <span class=ow>not</span> <span class=n>is_aggregate_key</span><span class=p>(</span><span class=n>key</span><span class=p>):</span>
|
|
<a id=__codelineno-0-133 name=__codelineno-0-133></a> <span class=n>processed_kwargs</span><span class=p>[</span><span class=n>key</span><span class=p>]</span> <span class=o>=</span> <span class=n>val</span>
|
|
<a id=__codelineno-0-134 name=__codelineno-0-134></a> <span class=k>continue</span>
|
|
<a id=__codelineno-0-135 name=__codelineno-0-135></a>
|
|
<a id=__codelineno-0-136 name=__codelineno-0-136></a> <span class=c1># NOTE: Trim off the prefix from keys</span>
|
|
<a id=__codelineno-0-137 name=__codelineno-0-137></a> <span class=n>prefix</span><span class=p>,</span> <span class=n>sub_key</span> <span class=o>=</span> <span class=n>key</span><span class=o>.</span><span class=n>split</span><span class=p>(</span><span class=s2>":"</span><span class=p>,</span> <span class=mi>1</span><span class=p>)</span>
|
|
<a id=__codelineno-0-138 name=__codelineno-0-138></a> <span class=k>if</span> <span class=n>prefix</span> <span class=ow>not</span> <span class=ow>in</span> <span class=n>nested_kwargs</span><span class=p>:</span>
|
|
<a id=__codelineno-0-139 name=__codelineno-0-139></a> <span class=n>nested_kwargs</span><span class=p>[</span><span class=n>prefix</span><span class=p>]</span> <span class=o>=</span> <span class=p>{}</span>
|
|
<a id=__codelineno-0-140 name=__codelineno-0-140></a> <span class=n>nested_kwargs</span><span class=p>[</span><span class=n>prefix</span><span class=p>][</span><span class=n>sub_key</span><span class=p>]</span> <span class=o>=</span> <span class=n>val</span>
|
|
<a id=__codelineno-0-141 name=__codelineno-0-141></a>
|
|
<a id=__codelineno-0-142 name=__codelineno-0-142></a> <span class=c1># Assign aggregated values into normal input</span>
|
|
<a id=__codelineno-0-143 name=__codelineno-0-143></a> <span class=k>for</span> <span class=n>key</span><span class=p>,</span> <span class=n>val</span> <span class=ow>in</span> <span class=n>nested_kwargs</span><span class=o>.</span><span class=n>items</span><span class=p>():</span>
|
|
<a id=__codelineno-0-144 name=__codelineno-0-144></a> <span class=k>if</span> <span class=n>key</span> <span class=ow>in</span> <span class=n>processed_kwargs</span><span class=p>:</span>
|
|
<a id=__codelineno-0-145 name=__codelineno-0-145></a> <span class=k>raise</span> <span class=n>TemplateSyntaxError</span><span class=p>(</span>
|
|
<a id=__codelineno-0-146 name=__codelineno-0-146></a> <span class=sa>f</span><span class=s2>"Received argument '</span><span class=si>{</span><span class=n>key</span><span class=si>}</span><span class=s2>' both as a regular input (</span><span class=si>{</span><span class=n>key</span><span class=si>}</span><span class=s2>=...)"</span>
|
|
<a id=__codelineno-0-147 name=__codelineno-0-147></a> <span class=sa>f</span><span class=s2>" and as an aggregate dict ('</span><span class=si>{</span><span class=n>key</span><span class=si>}</span><span class=s2>:key=...'). Must be only one of the two"</span>
|
|
<a id=__codelineno-0-148 name=__codelineno-0-148></a> <span class=p>)</span>
|
|
<a id=__codelineno-0-149 name=__codelineno-0-149></a> <span class=n>processed_kwargs</span><span class=p>[</span><span class=n>key</span><span class=p>]</span> <span class=o>=</span> <span class=n>val</span>
|
|
<a id=__codelineno-0-150 name=__codelineno-0-150></a>
|
|
<a id=__codelineno-0-151 name=__codelineno-0-151></a> <span class=k>return</span> <span class=n>processed_kwargs</span>
|
|
</code></pre></div></td></tr></table></div> </details> </div> </div> </div> </div> </div> </article> </div> <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var tab,labels=set.querySelector(".tabbed-labels");for(tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <nav class="md-footer__inner md-grid" aria-label=Footer> <a href=../context/ class="md-footer__link md-footer__link--prev" aria-label='Previous: <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> context'> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg> </div> <div class=md-footer__title> <span class=md-footer__direction> Previous </span> <div class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> context </div> </div> </a> <a href=../library/ class="md-footer__link md-footer__link--next" aria-label='Next: <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> library'> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> library </div> </div> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener> Material for MkDocs </a> </div> <div class=md-social> <a href=https://github.com/EmilStenstrom/django-components target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> </a> <a href=https://pypi.org/project/django-components/ target=_blank rel=noopener title=pypi.org class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 448 512"><!-- Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"/></svg> </a> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <div class=md-progress data-md-component=progress role=progressbar></div> <script id=__config type=application/json>{"base": "../../..", "features": ["content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tabs.link", "navigation.expand", "navigation.footer", "navigation.instant", "navigation.instant.progress", "navigation.indexes", "navigation.sections", "navigation.tracking", "navigation.top", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../../assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"default": ["latest", "dev"], "provider": "mike"}}</script> <script src=../../../assets/javascripts/bundle.bd41221c.min.js></script> <script src=../../../assets/_markdown_exec_pyodide.js></script> <script src=../../../js/timeago.min.js></script> <script src=../../../js/timeago_mkdocs_material.js></script> </body> </html> |