updates

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/forms.py

@@ -2,6 +2,8 @@
 
 from django import forms
 
+from {{ cookiecutter.repo_name }}.util.widgets import ToggleWidget
+
 
 class FormTest(forms.Form):
     template_name = "samples/test_form.jinja"
@@ -30,8 +32,10 @@ class FormTest(forms.Form):
     textarea = forms.CharField(widget=forms.Textarea())
 
     checkbox = forms.BooleanField()
-    choice = forms.ChoiceField(
-        choices=[("choice1", "choice 1"), ("choice2", "choice 2")]
+    toggle = forms.BooleanField(widget=ToggleWidget)
+    choice = forms.ChoiceField(choices=[("choice1", "Choice 1"), ("choice2", "Choice 2")])
+    radio_choice = forms.ChoiceField(
+        choices=[("choice1", "Choice 1"), ("choice2", "Choice 2")], widget=forms.RadioSelect
     )
     file = forms.FileField()
 

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/clearable_file_input.html

@@ -1,2 +1,2 @@
 {% from 'forms/clearable_file_input.jinja' import clearable_file_input_widget %}
-{{clearable_file_input_widget(widget, id=widget.attrs.id)}}
+{{clearable_file_input_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/date.html

@@ -1,2 +1,2 @@
 {% from 'forms/date_datetime.jinja' import date_datetime_widget %} {{
-date_datetime_widget(widget, id=widget.attrs.id, date=True) }}
+date_datetime_widget(widget, date=True) }}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/datetime.html

@@ -1,2 +1,2 @@
 {% from 'forms/date_datetime.jinja' import date_datetime_widget %} {{
-date_datetime_widget(widget, id=widget.attrs.id, true) }}
+date_datetime_widget(widget, time=True, date=True) }}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input.html

@@ -1,2 +1 @@
-{% from 'forms/input.jinja' import input_widget %} {{input_widget(widget,
-id=widget.attrs.id)}}
+{% from 'forms/input.jinja' import input_widget %} {{input_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input_option.html

@@ -1,3 +1,2 @@
-{% from 'forms/input_option.jinja' import widget_to_input_option %}
-
-{{widget_to_input_option(widget)}}
+{% from 'forms/input_option.jinja' import input_option_widget %}
+{{input_option_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/password.html

@@ -1,3 +1 @@
-{% from 'forms/password.jinja' import widget_to_password %}
-
-{{widget_to_password(widget)}}
+{% from 'forms/password.jinja' import password_widget %} {{password_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/radio.html

@@ -1,3 +1 @@
-{% from 'forms/radio.jinja' import widget_to_radio %}
-
-{{ widget_to_radio(widget) }}
+{% from 'forms/radio.jinja' import radio_widget %} {{ radio_widget(widget) }}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select.html

@@ -1,2 +1 @@
-{% from 'forms/select.jinja' import select_widget %} {{select_widget(widget,
-id=widget.attrs.id)}}
+{% from 'forms/select.jinja' import select_widget %} {{select_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select_option.html

@@ -1,3 +1 @@
-{% from 'forms/select.jinja' import select_option %}
-
-{{ select_option(widget.value, widget.label, widget.attrs) }}
+{% from 'forms/select.jinja' import select_option %} {{ select_option(widget) }}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/textarea.html

@@ -1,2 +1 @@
-{% from 'forms/textarea.jinja' import textarea_widget %} {{textarea_widget(widget,
-id=widget.attrs.id)}}
+{% from 'forms/textarea.jinja' import textarea_widget %} {{textarea_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/time.html

@@ -0,0 +1,2 @@
+{% from 'forms/date_datetime.jinja' import date_datetime_widget %} {{
+date_datetime_widget(widget, time=True) }}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/toggle.html

@@ -1,3 +1 @@
-{% from 'forms/toggle.jinja' import widget_to_toggle %}
-
-{{widget_to_toggle(widget)}}
+{% from 'forms/toggle.jinja' import toggle_widget %} {{toggle_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja

@@ -1,17 +1,8 @@
 {% from 'components/util.jinja' import attributes, get_event_name_from_id %}
+{% from "forms/wrappers.jinja" import boolean_shell %}
 
 {% macro checkbox_field(field, errors) %}
-    <div class="relative flex items-start{% if errors %} error{% endif %}">
-        <div class="flex items-center h-5">{{ checkbox_widget(field.field.widget, value=field.value(), id=field.id_for_label) }}</div>
-        <div class="ml-3 text-sm">
-            {% if field.label %}{{ field.label_tag() }}{% endif %}
-            {% if field.help_text %}
-            <p class="text-gray-500">
-                {{ field.help_text|safe }}
-            </p>
-            {% endif %}
-        </div>
-    </div>
+    {{ boolean_shell(field, errors, wrapper_classes="gap-4") }}
 {% endmacro %}
 
 {% macro checkbox_widget(widget, value=False, id="") %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/clearable_file_input.jinja

@@ -1,26 +1,27 @@
 {% from 'forms/input.jinja' import input_widget %}
+{% from "forms/wrappers.jinja" import file_shell %}
 {% from 'forms/checkbox.jinja' import checkbox_widget %}
 {% from 'components/util.jinja' import get_event_name_from_id %}
 
 {% macro clearable_file_input_field(field, errors) %}
-    {{ clearable_file_input_widget(field.field.widget, value=field.value(), id=field.id_for_label)}}
+    {{ file_shell(field, errors) }}
 {% endmacro %}
 
-{% macro clearable_file_input_widget(widget, value=None, id="") %}
+{% macro clearable_file_input_widget(widget) %}
     {% set attrs = widget.attrs or {} %}
-    {% set event_name = get_event_name_from_id(id) %}
+    {% set event_name = get_event_name_from_id(attrs.id) %}
 
     <div
          class="w-full input flex items-center pb-2">
         {% if is_initial %}
-            {{widget.initial_text}}: <a href="{{value.url}}">{{value}}</a>
+            {{widget.initial_text}}: <a href="{{widget.value.url}}">{{widget.value}}</a>
             {% if not required %}
                 {{ checkbox_widget({"type": "checkbox", "name": widget.checkbox_name, "attrs":{'id': widget.checkbox_id, 'disabled': attrs.disabled}}) }}
                 <label for="{{widget.checkbox_id}}">{{widget.clear_checkbox_label}}</label>
             {% endif %}
             <br>
             {{widget.input_text}}:
         {% endif %}
-        {{ input_widget(widget, type="file", input_classes="flex justify-center text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-focus") }}
+        {{ input_widget(widget, input_classes="flex justify-center text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-focus") }}
     </div>
 {% endmacro %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja

@@ -2,24 +2,24 @@
 {% from 'components/util.jinja' import attributes, get_event_name_from_id %}
 
 {% macro datetime_field(field, errors) %}
-    {{ input_shell(field, errors, date_datetime_widget(field.field.widget, value=field.value(), id=field.id_for_label, time=True, date=True)) }}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
 {% macro date_field(field, errors) %}
-    {{ input_shell(field, errors, date_datetime_widget(field.field.widget, value=field.value(), id=field.id_for_label, time=False, date=True)) }}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
 {% macro time_field(field, errors) %}
-    {{ input_shell(field, errors, date_datetime_widget(field.field.widget, value=field.value(), id=field.id_for_label, time=True, date=False)) }}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
 
-{% macro date_datetime_widget(widget, value=None, id="", time=False, date=False) %}
+{% macro date_datetime_widget(widget, time=False, date=False) %}
     {% set attrs = widget.attrs or {} %}
-    {% do attrs.update({"name": widget.name, "value": value, "id": id}) %}
-    {% set event_name = get_event_name_from_id(id) %}
+    {% do attrs.update({"name": widget.name, "value": widget.value}) %}
+    {% set event_name = get_event_name_from_id(widget.attrs.id) %}
 
-    <div @click="picker.open()" x-data="dateTime('{{ event_name }}', '{{ value or "" }}', {{ 'true' if time else 'false' }}, {{ 'true' if date else 'false' }})"
+    <div @click="picker.open()" x-data="dateTime('{{ event_name }}', '{{ widget.value or "" }}', {{ 'true' if time else 'false' }}, {{ 'true' if date else 'false' }})"
          class="w-full input" :class="{'has-focus': active}">
         <input class="w-full rounded-md border border-gray-200 px-3 py-2.5 flatpickr flatpickr-input" x-ref="picker" type="text" {{ attributes(attrs) }}/>
     </div>

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input.jinja

@@ -1,34 +1,34 @@
 {% from 'components/util.jinja' import attributes, get_event_name_from_id %}
 {% from "forms/wrappers.jinja" import input_shell %}
 
-{% macro input_field(field, errors, input_classes="") %}
-    {{ input_shell(field, errors, input_widget(field.field.widget, value=field.value(),  id=field.id_for_label, input_classes=input_classes)) }}
+{% macro input_field(field, errors) %}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
-{% macro number_field(field, errors, input_classes="") %}
-    {{ input_shell(field, errors, input_widget(field.field.widget, value=field.value(),  id=field.id_for_label, type="number", input_classes=input_classes)) }}
+{% macro number_field(field, errors) %}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
-{% macro email_field(field, errors, input_classes="") %}
-    {{ input_shell(field, errors, input_widget(field.field.widget, value=field.value(),  id=field.id_for_label, type="email", input_classes=input_classes)) }}
+{% macro email_field(field, errors) %}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
-{% macro url_field(field, errors, input_classes="") %}
-    {{ input_shell(field, errors, input_widget(field.field.widget, value=field.value(), id=field.id_for_label, type="url", input_classes=input_classes)) }}
+{% macro url_field(field, errors) %}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
 {# password_field has it's own file "password.jinja" #}
 
-{% macro input_widget(widget, value=None, id="", type="text", input_classes="") %}
+{% macro input_widget(widget, input_classes="") %}
     {% set attrs = widget.attrs or {} %}
-    {% do attrs.update({"name": widget.name, "value": value, "type": type, "id": id}) %}
+    {% do attrs.update({"name": widget.name, "value": widget.value, "type": widget.type}) %}
     {% set disabled, readonly = widget.attrs.disabled, attrs.readonly %}
     {% set noedit = disabled or readonly %}
-    {% set event_name = get_event_name_from_id(id) %}
+    {% set event_name = get_event_name_from_id(widget.attrs.id) %}
     <input
         x-model.debounce.500ms="value"
         :class="{'has-focus': active}"
-        x-data="input('{{ event_name }}', '{{ value or "" }}')"
+        x-data="input('{{ event_name }}', '{{ widget.value or "" }}')"
         x-ref="input" class="input {{ input_classes or ""}} {{attrs.classes or ""}}" {{ attributes(attrs)}}
     />
 {% endmacro %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input_option.jinja

@@ -1,12 +1,7 @@
-{% from 'forms/input.jinja' import input %}
-{% macro input_option(type="text", name=none, value=none, event_name="", color='primary', attrs={}, left_icon='', right_icon='', wrap_label=False, label="") %}
-    {% if wrap_label %}
-        <label{% if attrs.id %} for="{{ attrs.id }}"{% endif %}>
-    {% endif %}
-    {{ input(type=type, name=name, value=value, event_name=event_name, color=color, attrs=attrs, left_icon=left_icon, right_icon=right_icon) }}
-    {% if wrap_label %} {{ label }}</label>{% endif %}
-{% endmacro %}
-{# takes a django widget and calls our input macro with the appropriate args #}
-{% macro widget_to_input_option(widget) %}
-    {{ input_option(type=widget.type, name=widget.name, value=widget.value, event_name=widget.attrs.id, attrs=widget.attrs, wrap_label=widget.wrap_label, label=widget.label) }}
+{% from 'forms/input.jinja' import input_widget %}
+
+{% macro input_option_widget(widget) %}
+    {% if widget.wrap_label %}<label{% if widget.attrs.id %} for="{{ widget.attrs.id }}"{% endif %}>{% endif %}
+    {{ input_widget(widget) }}
+    {% if widget.wrap_label %} {{ widget.label }}</label>{% endif %}
 {% endmacro %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/js/date_datetime.ts

@@ -4,7 +4,12 @@ import "flatpickr/dist/themes/light.css";
 import { AlpineDataCallback } from "../../../static_source/js";
 import inputListener from "./common";
 
-const dateTime = (eventName: string, value: string, enableTime: boolean): AlpineComponent => ({
+const dateTime = (
+  eventName: string,
+  value: string,
+  enableTime: boolean,
+  enableCalendar: boolean
+): AlpineComponent => ({
   eventName,
   value,
   enableTime,
@@ -25,6 +30,7 @@ const dateTime = (eventName: string, value: string, enableTime: boolean): Alpine
       enableTime,
       dateFormat,
       defaultDate: value,
+      noCalendar: !enableCalendar,
       onChange: (_, dateString) => {
         this.value = dateString;
       },

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja

@@ -4,21 +4,23 @@
 {% endmacro %}
 
 {% macro password_widget(widget) %}
+    {% set attrs = widget.attrs or {} %}
+    {% do attrs.update({"name": widget.name}) %}
     {% set event_name = get_event_name_from_id(widget.attrs.id) %}
     <div
         x-data="password('{{ event_name }}', '{{ widget.value }}', 'password')"
         x-ref="input"
         :class="active ? 'has-focus' : ''"
         class="w-full z-10 flex items-center relative password"
     >
-    <input x-model.debounce.500ms="value" :type="type" class="!pr-10" {{ attributes(widget.attrs) }} />
-        <div class="absolute inset-y-0 right-4 flex items-center cursor-pointer"
+    <input x-model.debounce.500ms="value" :type="type" class="!pr-10" {{ attributes(attrs) }} />
+        <div class="absolute inset-y-0 right-0 flex items-center cursor-pointer"
              @click="type='password'"
              x-cloak
-             x-show="type==='text'">
+             x-show={type==='text'">
             {{ heroicon_outline("eye-slash", class="w-6 h-6") }}
         </div>
-        <div class="absolute inset-y-0 right-4 flex items-center cursor-pointer"
+        <div class="absolute inset-y-0 right-0 flex items-center cursor-pointer"
              @click="type='text'"
              x-show="type==='password'">
             {{ heroicon_outline("eye", class="w-6 h-6") }}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/radio.jinja

@@ -1,29 +1,15 @@
-{% macro radio(name="", value="", optgroups="", attrs={}) %}
-    {% if attrs.radio_active_color %}
-        {% set radio_active_color = "{{attrs.radio_active_color}}" %}
-    {% else %}
-        {% set radio_active_color = "primary" %}
-    {% endif %}
-    {% if attrs.radio_class %}
-        {% set radio_class = "{{attrs.radio_class}}" %}
-    {% else %}
-        {% set radio_class = "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white ring-1 ring-gray-600" %}
-    {% endif %}
-    <div class="radio py-4">
-        <div x-data="{value: '{{value.0}}'}" x-radio x-model="value" class="flex flex-col gap-4">
-            {% for group_name, group_choices, group_index in optgroups %}
-                {{ radio_optgroup(group_name, group_choices, group_index, radio_class, radio_active_color) }}
-            {% endfor %}
-        </div>
-    </div>
+{% from "forms/wrappers.jinja" import radio_shell %}
+
+{% macro radio_field(field, errors) %}
+    {{ radio_shell(field, errors) }}
 {% endmacro %}
 
 {% macro radio_optgroup(name, choices, index, radio_class, radio_active_color) %}
     {% for choice in choices %}
         <div
             x-radio:option
             value="{{choice.value}}"
-            class="flex items-center"
+            class="flex items-center cursor-pointer"
         >
             <input
                 id="{{ choice.attrs.id }}"
@@ -46,6 +32,25 @@
     {% endfor %}
 {% endmacro %}
 
-{% macro widget_to_radio(widget) %}
-    {{ radio(name=widget.name, value=widget.value, optgroups=widget.optgroups, attrs=widget.attrs) }}
+{% macro radio_widget(widget) %}
+    {% set attrs = widget.attrs or {} %}
+    {% do attrs.update({"name": widget.name, "value": widget.value, "type": widget.type}) %}
+
+    {% if attrs.radio_active_color %}
+        {% set radio_active_color = "{{attrs.radio_active_color}}" %}
+    {% else %}
+        {% set radio_active_color = "primary" %}
+    {% endif %}
+    {% if attrs.radio_class %}
+        {% set radio_class = "{{attrs.radio_class}}" %}
+    {% else %}
+        {% set radio_class = "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white ring-1 ring-gray-600" %}
+    {% endif %}
+    <div class="radio py-4">
+        <div x-data="{value: '{{widget.value}}'}" x-radio x-model="value" class="flex flex-col gap-4">
+            {% for group_name, group_choices, group_index in widget.optgroups %}
+                {{ radio_optgroup(group_name, group_choices, group_index, radio_class, radio_active_color) }}
+            {% endfor %}
+        </div>
+    </div>
 {% endmacro %}