mirror of
https://github.com/django-components/django-components.git
synced 2025-08-21 22:44:06 +00:00
Deployed 1e4b556 to dev with MkDocs 1.6.1 and mike 2.1.3
This commit is contained in:
github-actions
parent
d527e10af5
commit
952396ba51
41 changed files with 482 additions and 465 deletions
|
|
@ -72,14 +72,14 @@
|
|||
<a id=__codelineno-6-8 name=__codelineno-6-8 href=#__codelineno-6-8></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=o>/</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-6-9 name=__codelineno-6-9 href=#__codelineno-6-9></a> <span class=p></</span><span class=nt>body</span><span class=p>></span>
|
||||
<a id=__codelineno-6-10 name=__codelineno-6-10 href=#__codelineno-6-10></a><span class=p></</span><span class=nt>html</span><span class=p>></span>
|
||||
</code></pre></div> </li> </ol> <h3 id=4-link-js-and-css-to-a-component>4. Link JS and CSS to a component<a class=headerlink href=#4-link-js-and-css-to-a-component title="Permanent link">¤</a></h3> <p>Finally, we return to our Python component in <code>calendar.py</code> to tie this together.</p> <p>To link JS and CSS defined in other files, use <a href=../../../reference/api#django_components.Component.js_file><code>js_file</code></a> and <a href=../../../reference/api#django_components.Component.css_file><code>css_file</code></a> attributes:</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>Component</span>
|
||||
</code></pre></div> </li> </ol> <h3 id=4-link-js-and-css-to-a-component>4. Link JS and CSS to a component<a class=headerlink href=#4-link-js-and-css-to-a-component title="Permanent link">¤</a></h3> <p>Finally, we return to our Python component in <code>calendar.py</code> to tie this together.</p> <p>To link JS and CSS defined in other files, use <a href=../../../reference/api#django_components.Component.js_file><code>js_file</code></a> and <a href=../../../reference/api#django_components.Component.css_file><code>css_file</code></a> attributes:</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
|
||||
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a>
|
||||
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=k>class</span> <span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>"calendar.html"</span>
|
||||
<a id=__codelineno-7-5 name=__codelineno-7-5 href=#__codelineno-7-5></a> <span class=n>js_file</span> <span class=o>=</span> <span class=s2>"calendar.js"</span> <span class=c1># <--- new</span>
|
||||
<a id=__codelineno-7-6 name=__codelineno-7-6 href=#__codelineno-7-6></a> <span class=n>css_file</span> <span class=o>=</span> <span class=s2>"calendar.css"</span> <span class=c1># <--- new</span>
|
||||
<a id=__codelineno-7-7 name=__codelineno-7-7 href=#__codelineno-7-7></a>
|
||||
<a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
||||
<a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
||||
<a id=__codelineno-7-9 name=__codelineno-7-9 href=#__codelineno-7-9></a> <span class=k>return</span> <span class=p>{</span>
|
||||
<a id=__codelineno-7-10 name=__codelineno-7-10 href=#__codelineno-7-10></a> <span class=s2>"date"</span><span class=p>:</span> <span class=s2>"1970-01-01"</span><span class=p>,</span>
|
||||
<a id=__codelineno-7-11 name=__codelineno-7-11 href=#__codelineno-7-11></a> <span class=p>}</span>
|
||||
|
|
@ -97,14 +97,14 @@
|
|||
a component is rendered on the page.
|
||||
|
||||
This is not true for JS and CSS defined in `Media.js/css`, where the linked JS / CSS are rendered as is.
|
||||
--> <h3 id=5-link-additional-js-and-css-to-a-component>5. Link additional JS and CSS to a component<a class=headerlink href=#5-link-additional-js-and-css-to-a-component title="Permanent link">¤</a></h3> <p>Your components may depend on third-party packages or styling, or other shared logic. To load these additional dependencies, you can use a nested <a href=../../../reference/api#django_components.Component.Media><code>Media</code> class</a>.</p> <p>This <code>Media</code> class behaves similarly to <a href=https://docs.djangoproject.com/en/5.1/topics/forms/media/#assets-as-a-static-definition>Django's Media class</a>, with a few differences:</p> <ol> <li>Our Media class accepts various formats for the JS and CSS files: either a single file, a list, or (CSS-only) a dictonary (see below).</li> <li>Individual JS / CSS files can be any of <code>str</code>, <code>bytes</code>, <code>Path</code>, <a href=https://dev.to/doridoro/django-safestring-afj><code>SafeString</code></a>, or a function.</li> <li>Our Media class does NOT support <a href=https://docs.djangoproject.com/en/5.1/topics/forms/media/#extend>Django's <code>extend</code> keyword</a>.</li> </ol> <p><a href=../../fundamentals/defining_js_css_html_files/ >Learn more</a> about using Media.</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>Component</span>
|
||||
--> <h3 id=5-link-additional-js-and-css-to-a-component>5. Link additional JS and CSS to a component<a class=headerlink href=#5-link-additional-js-and-css-to-a-component title="Permanent link">¤</a></h3> <p>Your components may depend on third-party packages or styling, or other shared logic. To load these additional dependencies, you can use a nested <a href=../../../reference/api#django_components.Component.Media><code>Media</code> class</a>.</p> <p>This <code>Media</code> class behaves similarly to <a href=https://docs.djangoproject.com/en/5.1/topics/forms/media/#assets-as-a-static-definition>Django's Media class</a>, with a few differences:</p> <ol> <li>Our Media class accepts various formats for the JS and CSS files: either a single file, a list, or (CSS-only) a dictonary (see below).</li> <li>Individual JS / CSS files can be any of <code>str</code>, <code>bytes</code>, <code>Path</code>, <a href=https://dev.to/doridoro/django-safestring-afj><code>SafeString</code></a>, or a function.</li> <li>Our Media class does NOT support <a href=https://docs.djangoproject.com/en/5.1/topics/forms/media/#extend>Django's <code>extend</code> keyword</a>.</li> </ol> <p><a href=../../fundamentals/defining_js_css_html_files/ >Learn more</a> about using Media.</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
|
||||
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a>
|
||||
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a><span class=k>class</span> <span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>"calendar.html"</span>
|
||||
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a> <span class=n>js_file</span> <span class=o>=</span> <span class=s2>"calendar.js"</span>
|
||||
<a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a> <span class=n>css_file</span> <span class=o>=</span> <span class=s2>"calendar.css"</span>
|
||||
<a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></a>
|
||||
<a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a> <span class=k>class</span> <span class=nc>Media</span><span class=p>:</span> <span class=c1># <--- new</span>
|
||||
<a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span> <span class=c1># <--- new</span>
|
||||
<a id=__codelineno-8-9 name=__codelineno-8-9 href=#__codelineno-8-9></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span>
|
||||
<a id=__codelineno-8-10 name=__codelineno-8-10 href=#__codelineno-8-10></a> <span class=s2>"path/to/shared.js"</span><span class=p>,</span>
|
||||
<a id=__codelineno-8-11 name=__codelineno-8-11 href=#__codelineno-8-11></a> <span class=s2>"https://unpkg.com/alpinejs@3.14.7/dist/cdn.min.js"</span><span class=p>,</span> <span class=c1># AlpineJS</span>
|
||||
|
|
@ -114,22 +114,22 @@
|
|||
<a id=__codelineno-8-15 name=__codelineno-8-15 href=#__codelineno-8-15></a> <span class=s2>"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"</span><span class=p>,</span> <span class=c1># Tailwind</span>
|
||||
<a id=__codelineno-8-16 name=__codelineno-8-16 href=#__codelineno-8-16></a> <span class=p>]</span>
|
||||
<a id=__codelineno-8-17 name=__codelineno-8-17 href=#__codelineno-8-17></a>
|
||||
<a id=__codelineno-8-18 name=__codelineno-8-18 href=#__codelineno-8-18></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-18 name=__codelineno-8-18 href=#__codelineno-8-18></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-19 name=__codelineno-8-19 href=#__codelineno-8-19></a> <span class=k>return</span> <span class=p>{</span>
|
||||
<a id=__codelineno-8-20 name=__codelineno-8-20 href=#__codelineno-8-20></a> <span class=s2>"date"</span><span class=p>:</span> <span class=s2>"1970-01-01"</span><span class=p>,</span>
|
||||
<a id=__codelineno-8-21 name=__codelineno-8-21 href=#__codelineno-8-21></a> <span class=p>}</span>
|
||||
</code></pre></div> <div class="admonition note"> <p class=admonition-title>Note</p> <p>Same as with the "primary" JS and CSS, the file paths files can be either:</p> <ol> <li>Relative to the Python component file (as seen above),</li> <li>Relative to any of the component directories as defined by <a href=../../../reference/settings/#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> and/or <a href=../../../reference/settings/#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> (e.g. <code>[your apps]/components</code> dir and <code>[project root]/components</code>)</li> </ol> </div> <div class="admonition info"> <p class=admonition-title>Info</p> <p>The <code>Media</code> nested class is shaped based on <a href=https://docs.djangoproject.com/en/5.1/topics/forms/media/ >Django's Media class</a>.</p> <p>As such, django-components allows multiple formats to define the nested Media class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=c1># Single files</span>
|
||||
<a id=__codelineno-9-2 name=__codelineno-9-2 href=#__codelineno-9-2></a><span class=k>class</span> <span class=nc>Media</span><span class=p>:</span>
|
||||
<a id=__codelineno-9-2 name=__codelineno-9-2 href=#__codelineno-9-2></a><span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
|
||||
<a id=__codelineno-9-3 name=__codelineno-9-3 href=#__codelineno-9-3></a> <span class=n>js</span> <span class=o>=</span> <span class=s2>"calendar.js"</span>
|
||||
<a id=__codelineno-9-4 name=__codelineno-9-4 href=#__codelineno-9-4></a> <span class=n>css</span> <span class=o>=</span> <span class=s2>"calendar.css"</span>
|
||||
<a id=__codelineno-9-5 name=__codelineno-9-5 href=#__codelineno-9-5></a>
|
||||
<a id=__codelineno-9-6 name=__codelineno-9-6 href=#__codelineno-9-6></a><span class=c1># Lists of files</span>
|
||||
<a id=__codelineno-9-7 name=__codelineno-9-7 href=#__codelineno-9-7></a><span class=k>class</span> <span class=nc>Media</span><span class=p>:</span>
|
||||
<a id=__codelineno-9-7 name=__codelineno-9-7 href=#__codelineno-9-7></a><span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
|
||||
<a id=__codelineno-9-8 name=__codelineno-9-8 href=#__codelineno-9-8></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>"calendar.js"</span><span class=p>,</span> <span class=s2>"calendar2.js"</span><span class=p>]</span>
|
||||
<a id=__codelineno-9-9 name=__codelineno-9-9 href=#__codelineno-9-9></a> <span class=n>css</span> <span class=o>=</span> <span class=p>[</span><span class=s2>"calendar.css"</span><span class=p>,</span> <span class=s2>"calendar2.css"</span><span class=p>]</span>
|
||||
<a id=__codelineno-9-10 name=__codelineno-9-10 href=#__codelineno-9-10></a>
|
||||
<a id=__codelineno-9-11 name=__codelineno-9-11 href=#__codelineno-9-11></a><span class=c1># Dictionary of media types for CSS</span>
|
||||
<a id=__codelineno-9-12 name=__codelineno-9-12 href=#__codelineno-9-12></a><span class=k>class</span> <span class=nc>Media</span><span class=p>:</span>
|
||||
<a id=__codelineno-9-12 name=__codelineno-9-12 href=#__codelineno-9-12></a><span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
|
||||
<a id=__codelineno-9-13 name=__codelineno-9-13 href=#__codelineno-9-13></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>"calendar.js"</span><span class=p>,</span> <span class=s2>"calendar2.js"</span><span class=p>]</span>
|
||||
<a id=__codelineno-9-14 name=__codelineno-9-14 href=#__codelineno-9-14></a> <span class=n>css</span> <span class=o>=</span> <span class=p>{</span>
|
||||
<a id=__codelineno-9-15 name=__codelineno-9-15 href=#__codelineno-9-15></a> <span class=s2>"all"</span><span class=p>:</span> <span class=p>[</span><span class=s2>"calendar.css"</span><span class=p>,</span> <span class=s2>"calendar2.css"</span><span class=p>],</span>
|
||||
|
|
|
|||
|
|
@ -60,19 +60,19 @@
|
|||
<a id=__codelineno-7-12 name=__codelineno-7-12 href=#__codelineno-7-12></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"calendar"</span><span class=p>></span>
|
||||
<a id=__codelineno-7-13 name=__codelineno-7-13 href=#__codelineno-7-13></a> Today's date is <span class=p><</span><span class=nt>i</span><span class=p>></span>2024-12-14<span class=p></</span><span class=nt>i</span><span class=p>></span>
|
||||
<a id=__codelineno-7-14 name=__codelineno-7-14 href=#__codelineno-7-14></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||||
</code></pre></div> <p>The first instance rendered <code>2024-12-16</code>, while the rest rendered <code>2024-12-14</code>!</p> <p>Why? Remember that in the <a href=../../../reference/api#django_components.Component.get_context_data><code>get_context_data()</code></a> method of our Calendar component, we pre-process the date. If the date falls on Saturday or Sunday, we shift it to next Monday:</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=kn>from</span> <span class=nn>datetime</span> <span class=kn>import</span> <span class=n>date</span>
|
||||
</code></pre></div> <p>The first instance rendered <code>2024-12-16</code>, while the rest rendered <code>2024-12-14</code>!</p> <p>Why? Remember that in the <a href=../../../reference/api#django_components.Component.get_context_data><code>get_context_data()</code></a> method of our Calendar component, we pre-process the date. If the date falls on Saturday or Sunday, we shift it to next Monday:</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=kn>from</span><span class=w> </span><span class=nn>datetime</span><span class=w> </span><span class=kn>import</span> <span class=n>date</span>
|
||||
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a>
|
||||
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
|
||||
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
|
||||
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a>
|
||||
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a><span class=c1># If date is Sat or Sun, shift it to next Mon, so the date is always workweek.</span>
|
||||
<a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a><span class=k>def</span> <span class=nf>to_workweek_date</span><span class=p>(</span><span class=n>d</span><span class=p>:</span> <span class=n>date</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a><span class=k>def</span><span class=w> </span><span class=nf>to_workweek_date</span><span class=p>(</span><span class=n>d</span><span class=p>:</span> <span class=n>date</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></a> <span class=o>...</span>
|
||||
<a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a>
|
||||
<a id=__codelineno-8-9 name=__codelineno-8-9 href=#__codelineno-8-9></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"calendar"</span><span class=p>)</span>
|
||||
<a id=__codelineno-8-10 name=__codelineno-8-10 href=#__codelineno-8-10></a><span class=k>class</span> <span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-10 name=__codelineno-8-10 href=#__codelineno-8-10></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-11 name=__codelineno-8-11 href=#__codelineno-8-11></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>"calendar.html"</span>
|
||||
<a id=__codelineno-8-12 name=__codelineno-8-12 href=#__codelineno-8-12></a> <span class=o>...</span>
|
||||
<a id=__codelineno-8-13 name=__codelineno-8-13 href=#__codelineno-8-13></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>date</span><span class=p>:</span> <span class=n>date</span><span class=p>,</span> <span class=n>extra_class</span><span class=p>:</span> <span class=nb>str</span> <span class=o>|</span> <span class=kc>None</span> <span class=o>=</span> <span class=kc>None</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-13 name=__codelineno-8-13 href=#__codelineno-8-13></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>date</span><span class=p>:</span> <span class=n>date</span><span class=p>,</span> <span class=n>extra_class</span><span class=p>:</span> <span class=nb>str</span> <span class=o>|</span> <span class=kc>None</span> <span class=o>=</span> <span class=kc>None</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-14 name=__codelineno-8-14 href=#__codelineno-8-14></a> <span class=n>workweek_date</span> <span class=o>=</span> <span class=n>to_workweek_date</span><span class=p>(</span><span class=n>date</span><span class=p>)</span>
|
||||
<a id=__codelineno-8-15 name=__codelineno-8-15 href=#__codelineno-8-15></a> <span class=k>return</span> <span class=p>{</span>
|
||||
<a id=__codelineno-8-16 name=__codelineno-8-16 href=#__codelineno-8-16></a> <span class=s2>"date"</span><span class=p>:</span> <span class=n>workweek_date</span><span class=p>,</span>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue