django-spire 0.25.2__py3-none-any.whl → 0.26.0__py3-none-any.whl

django_spire/core/templates/django_spire/form/field/base_field.html

@@ -0,0 +1,128 @@
+{% load django_glue %}
+
+<div x-data="{
+        value: null
+    }"
+        {% if glue_model_field %}
+     x-modelable="value"
+     x-model="{{ glue_model_field }}"
+        {% endif %}
+
+        {% if glue_field %}
+     x-modelable="value"
+     x-model="{{ glue_field }}.value"
+        {% endif %}
+>
+    <div
+            x-data="{
+            glue_field: undefined,
+            init() {
+                    let glue_model_field_name = '{{ glue_model_field }}'
+                    let glue_field_name = '{{ glue_field }}'
+
+                    if (glue_model_field_name) {
+                        this.init_glue_model_field(glue_model_field_name)
+                    } else if (glue_field_name) {
+                        this.init_glue_field(glue_field_name)
+                    }
+
+                    if (this.is_valid_glue_field()) {
+                        this.set_field_attrs()
+                        this.add_error_event_listener()
+                    }
+
+                    this.$watch('glue_field', value => {
+                        if (this.is_valid_glue_field()) {
+                            this.set_field_attrs()
+                        }
+                    })
+            },
+            init_glue_model_field(glue_model_field_name) {
+                let path = glue_model_field_name.split('.')
+                this.glue_field = this[`${path[0]}`]['glue_fields'][`${path[1]}`]
+            },
+            init_glue_field(glue_field_name) {
+                this.glue_field = glue_field_name.split('.').reduce((acc, part) => acc && acc[part], this)
+            },
+            set_field_attrs() {
+                let form_field = this.$refs.glue_field
+
+                // Remove attrs that no longer exist
+                let attr_names = this.glue_field._attr_names
+                for (const attr_name of this.glue_field._historic_attr_names) {
+                        if (!attr_names.includes(attr_name)) {
+                            form_field.removeAttribute(attr_name)
+                        }
+                    }
+
+                // Set attrs on field
+                for (let attr of this.glue_field.attrs) {
+                    form_field.setAttribute(attr.name, attr.value)
+                }
+            },
+            add_error_event_listener() {
+                this.$refs.glue_field.addEventListener('invalid', (e) => {
+                    e.preventDefault();
+                    this.glue_field.error = e.target.validationMessage
+                    this.$refs.glue_field.scrollIntoView({ behavior: 'smooth', block: 'center' })
+                })
+            },
+            is_valid_glue_field() {
+                return this.glue_field && this.$refs.glue_field
+            }
+        }"
+    >
+        {% block field_label %}
+            <label
+                    x-cloak
+                    x-show="!glue_field._hide_label"
+                    x-ref="label"
+                    class="form-label"
+                    :for="glue_field.id"
+            >
+                <span x-text="glue_field.label"></span>
+                <span x-cloak x-show="glue_field.required" class="text-danger">*</span>
+
+                <template x-if="glue_field.help_text && glue_field.help_text.trim() !== ''">
+                    <span
+                            x-data="{ is_tooltip_visible: false }"
+                            class="position-relative mx-2"
+                    >
+                        <button
+                                type="button"
+                                class="btn btn-link p-0 lh-1"
+                                style="text-decoration: none; color: inherit; outline: none !important; box-shadow: none !important;"
+                                @mouseenter="is_tooltip_visible = true"
+                                @mouseleave="is_tooltip_visible = false"
+                                @click="is_tooltip_visible = !is_tooltip_visible; $event.currentTarget.blur();"
+                                @focus="$event.currentTarget.blur();"
+                        >
+                            <i class="bi bi-question-circle-fill" style="font-size: 0.75rem;"></i>
+                        </button>
+                        <div
+                                x-show="is_tooltip_visible"
+                                class="fs-sm position-absolute p-2 rounded mt-2"
+                                style="
+                                min-width: 200px;
+                                z-index: 1000;
+                                top: 100%;
+                                left: 0;
+                                background-color: rgba(33, 37, 41, 0.85);
+                                color: #fff;
+                                font-weight: 400;
+                            "
+                                x-text="glue_field.help_text"
+                        ></div>
+                    </span>
+                </template>
+            </label>
+        {% endblock %}
+
+        {% block field_content %}
+        {% endblock %}
+
+        <div x-show="glue_field.error">
+            <span class="text-danger glue-fs--1" x-text="glue_field.error"></span>
+        </div>
+    </div>
+</div>

django_spire/core/templates/django_spire/form/field/char_field.html

@@ -0,0 +1 @@
+{% include 'django_spire/form/field/input_field.html' with input_type='text' %}

django_spire/core/templates/django_spire/form/field/color_field.html

@@ -0,0 +1 @@
+{% include 'django_spire/form/field/input_field.html' with input_type='color' %}

django_spire/core/templates/django_spire/form/field/date_field.html

@@ -0,0 +1 @@
+{% include 'django_spire/form/field/input_field.html' with input_type='date' %}

django_spire/core/templates/django_spire/form/field/datetime_field.html

@@ -0,0 +1 @@
+{% include 'django_spire/form/field/input_field.html' with input_type='datetime-local' %}

django_spire/core/templates/django_spire/form/field/decimal_field.html

@@ -0,0 +1 @@
+{% include 'django_spire/form/field/input_field.html' with input_type='number' %}

django_spire/core/templates/django_spire/form/field/element/select_checkmark_element.html

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" class="bi bi-check ms-1" viewBox="0 0 16 16"
+     fill="currentColor">
+    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+</svg>

django_spire/core/templates/django_spire/form/field/element/select_down_arrow_element.html

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-chevron-down"
+     viewBox="0 0 16 16">
+    <path fill-rule="evenodd"
+          d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+</svg>

django_spire/core/templates/django_spire/form/field/email_field.html

@@ -0,0 +1 @@
+{% include 'django_spire/form/field/input_field.html' with input_type='email' %}

django_spire/core/templates/django_spire/form/field/input_field.html

@@ -0,0 +1,13 @@
+{% extends 'django_spire/form/field/base_field.html' %}
+
+{% block field_content %}
+    <input
+            {% if input_type %}type="{{ input_type }}"
+            {% else %}type="{% block input_type %}text{% endblock %}"{% endif %}
+            {% block input_field_attrs %}{{ input_field_attrs }}{% endblock %}
+            class="{% block input_field_class %}{% if input_field_class %}{{ input_field_class }}{% else %}form-control{% endif %}{% endblock %}"
+            x-ref="glue_field"
+            x-model="value"
+            :id="glue_field.id"
+    >
+{% endblock %}

django_spire/core/templates/django_spire/form/field/item/select_choice_item.html

@@ -0,0 +1,15 @@
+<div class="d-flex align-items-center justify-content-center" style="width: 35px;">
+    {% block choice_checkmark %}
+        <template x-if="value === choice[0]">
+            {% include 'django_spire/form/field/element/select_checkmark_element.html' %}
+        </template>
+
+        <template x-if="value != choice[0]">
+            <span class="ms-3 ps-2"></span>
+        </template>
+    {% endblock %}
+</div>
+
+<div class="d-flex align-items-center">
+    <span class="text-truncate" x-text="choice[1]"></span>
+</div>

django_spire/core/templates/django_spire/form/field/item/selected_choice_item.html

@@ -0,0 +1,5 @@
+{% extends 'django_spire/form/field/item/select_choice_item.html' %}
+
+{% block choice_checkmark %}
+    {% include 'django_spire/form/field/element/select_checkmark_element.html' %}
+{% endblock %}

django_spire/core/templates/django_spire/form/field/list_field.html

@@ -0,0 +1,112 @@
+{% extends "django_spire/form/field/base_field.html" %}
+
+{% block field_content %}
+    <div
+            x-data="{
+            item: null,
+            available: [],
+            choices: [],
+            selected: [],
+            queryset: [],
+
+            async init() {
+                this.glue_field.available = await this.glue_field.queryset.all();
+                this.glue_field.choices = await this.glue_field.queryset.to_choices();
+                this.glue_field.selected = await this.glue_field.selected.all();
+
+                this.selected = this.glue_field.selected
+                  ? Object.entries(this.glue_field.selected).map(([id, values]) => ({ id, ...values }))
+                  : [];
+            },
+
+            async add_item() {
+                let item = this.glue_field.value;
+                let found = this.glue_field.choices.find(choice => choice[0] == item);
+
+                if (item && found) {
+                    let selection = this.glue_field.available[item - 1];
+
+                    this.selected.push({
+                        id: item,
+                        ...selection
+                    });
+
+                    this.glue_field.choices = this.glue_field.choices.filter(choice => choice[0] != item);
+
+                    if (this.glue_field.choices.length > 0) {
+                        this.glue_field.value = this.glue_field.choices[0][0];
+                    } else {
+                        this.glue_field.value = '';
+                    }
+                }
+            },
+
+            async remove_item(index) {
+                let removed = this.selected[index]
+                this.selected.splice(index, 1)
+
+                this.glue_field.value = ''
+
+                let label = this.glue_field.display_label
+
+                this.glue_field.choices = [
+                    ...this.glue_field.choices,
+                    [removed.id, removed[label]]
+                ]
+
+                this.glue_field.value = removed.id
+            }
+        }"
+            x-effect="
+            glue_field.hide_label();
+        "
+    >
+        <div class="row g-2 mb-2">
+            <div x-ref="component">
+                {% block component_field %}
+                    <div class="col-10">
+                        {% include "django_spire/form/field/search_and_select_field.html" with glue_field=glue_field %}
+                    </div>
+                {% endblock %}
+            </div>
+
+            {% block add_item_button %}
+                <div class="col-2 d-flex align-items-stretch">
+                    <button
+                            type="button"
+                            @click.prevent="add_item()"
+                            class="glue-btn glue-btn-primary w-100 h-100"
+                    >
+                        Add
+                    </button>
+                </div>
+            {% endblock %}
+        </div>
+
+        <template x-if="selected.length === 0">
+            <div class="mt-4">
+                No item(s) selected.
+            </div>
+        </template>
+
+        <template x-for="(item, index) in selected" :key="item.id">
+            <div class="row align-items-center glue-bg-layer-two-hover glue-list-item-container glue-border-bottom glue-border py-2">
+                {% if row %}
+                    {% include row %}
+                {% else %}
+                    {% block item_row_content %}
+                    {% endblock %}
+
+                    {% block remove_item_button %}
+                    {% endblock %}
+                {% endif %}
+            </div>
+        </template>
+
+        <input
+                type="hidden"
+                name="{{ glue_field.name }}"
+                :value="JSON.stringify(selected)"
+        >
+    </div>
+{% endblock %}

django_spire/core/templates/django_spire/form/field/multi_file_field.html

@@ -0,0 +1,90 @@
+{% extends 'django_spire/form/field/_base_file_field.html' %}
+
+{% block x-data %}
+    async handle_files_change(event) {
+    let files = Array.from(event.target.files || []);
+
+    for (let file of files) {
+    if (file.size > this.maximum_filesize) {
+    alert(`The file is too large (${this.format_file_size(file.size)}). Maximum size is
+    ${this.format_file_size(this.maximum_filesize)}.`);
+    continue;
+    }
+
+    let index = this.files.findIndex(existing => existing.name === file.name);
+
+    if (index !== -1) {
+    URL.revokeObjectURL(this.files[index].data);
+    URL.revokeObjectURL(this.files[index].preview);
+    this.files.splice(index, 1);
+    }
+
+    let file_id = Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+    let processed = file;
+
+    if (file.type.startsWith('image/') && file.type !== 'image/svg+xml' && this.compression) {
+    processed = await this.compress(file);
+    }
+
+    this.objects[file_id] = processed;
+
+    let data = URL.createObjectURL(processed);
+
+    this.files.push({
+    id: file_id,
+    name: processed.name,
+    size: processed.size,
+    type: processed.type,
+    data: data,
+    preview: processed.type.startsWith('image/') ? data : null
+    });
+
+    this.show_dropdown = false;
+    }
+
+    this.update_value();
+    this.show_dropdown = true;
+    this.update_form_files();
+
+    this.$refs.file_input.value = '';
+    this.$refs.camera_input.value = '';
+    },
+
+    remove_file(file_id) {
+    let file = this.files.find(file => file.id === file_id);
+
+    if (file) {
+    URL.revokeObjectURL(file.data);
+    if (file.preview) URL.revokeObjectURL(file.preview);
+    }
+
+    delete this.objects[file_id];
+
+    this.files = this.files.filter(file => file.id !== file_id);
+
+    this.update_value();
+    this.update_form_files();
+
+    if (this.files.length === 0) {
+    this.show_dropdown = false;
+    }
+    }
+{% endblock %}
+
+{% block upload_attributes %}multiple{% endblock %}
+{% block file_input_attributes %}multiple{% endblock %}
+{% block camera_input_attributes %}multiple{% endblock %}
+
+{% block selection_display %}
+    <template x-if="files.length === 0">
+        <span>No files selected</span>
+    </template>
+
+    <template x-if="files.length > 0">
+        <span x-text="files.length + ' files selected'"></span>
+    </template>
+{% endblock %}
+
+{% block drop_area_text %}
+    <span>Click to add or drag and drop files here</span>
+{% endblock %}

django_spire/core/templates/django_spire/form/field/multi_select_field.html

@@ -0,0 +1,155 @@
+{% extends 'django_spire/form/field/base_field.html' %}
+
+{% block field_content %}
+    {# This can be removed and need to insert input fields to have getlist and get effect #}
+    <div
+            class="position-relative"
+            x-data="{
+            show_dropdown: false,
+            search: '',
+            init () {
+                this.parse_value()
+
+                this.$watch('glue_field.value', value => {
+                    this.parse_value()
+                })
+            },
+            add_choice(choice) {
+                this.glue_field.value.push(choice[0])
+            },
+            get get_selected_choices() {
+                if (!Array.isArray(this.glue_field.value)) {
+                    return []
+                }
+                return this.glue_field.choices.filter(choice => this.glue_field.value.includes(choice[0]))
+            },
+            get filtered_choices() {
+                if (!Array.isArray(this.glue_field.value)) {
+                    return []
+                }
+
+                const filtered_array = this.glue_field.choices.filter(choice => !this.glue_field.value.includes(choice[0]) && choice[1] !== '----------')
+
+                const search = this.search.toLowerCase()
+                return filtered_array.filter(filtered_choice => filtered_choice[1].toLowerCase().includes(search))
+            },
+            focus_input() {
+                setTimeout(() => this.$refs.search_input.focus(), 100)
+            },
+            parse_value(){
+                // It is already an array!
+                if (Array.isArray(this.glue_field.value)) {
+                    return
+                }
+
+                // Parse the initial value into an array.
+                if (typeof(this.glue_field.value) == 'string' && this.glue_field.value.startsWith('[')){
+                    value = JSON.parse(this.glue_field.value)
+                    return
+                }
+
+                // Must be an array.
+                this.glue_field.value = []
+            },
+            remove_choice(choice) {
+                this.glue_field.value = this.glue_field.value.filter(val => val !== choice[0])
+            },
+        }"
+    >
+        <template x-for="choice in get_selected_choices" :key="choice[0]">
+            <input hidden type="text" :name="glue_field.name" :value="choice[0]">
+
+        </template>
+        <div x-ref="inputs"></div>
+
+        {% block selected_choices %}
+            <button
+                    class="form-control text-start d-flex justify-content-between"
+                    type="button"
+                    @click="show_dropdown = !show_dropdown; focus_input();"
+            >
+                <span class="d-flex flex-wrap align-items-center">
+                    <template x-for="choice in get_selected_choices" :key="choice[0]">
+                        <div class="d-inline-block my-1">
+                            <span class="badge rounded-pill glue-fs--1 text-app-glue-primary fw-normal border me-1">
+                                <span x-text="choice[1]"></span>
+                            </span>
+                        </div>
+                    </template>
+
+                    <template x-if="get_selected_choices.length === 0">
+                        <span>----------</span>
+                    </template>
+                </span>
+
+                <span class="d-flex align-items-center">
+                    {% include 'django_spire/form/field/element/select_down_arrow_element.html' %}
+                </span>
+            </button>
+        {% endblock %}
+
+        <div
+                x-cloak
+                x-show="show_dropdown"
+                @click.outside="show_dropdown = false"
+                class="shadow border rounded-2 mt-2 position-absolute z-3 bg-app-glue-layer-one w-100 p-0 list-group"
+                style="max-height: 350px; overflow-y: auto; z-index: 3;"
+                @keydown.escape="show_dropdown = false"
+                x-trap.inert="show_dropdown"
+        >
+            <div class="glue-fs--2 fw-bold ms-2 my-1">
+                Select Many <span>"<span x-text="glue_field.label"></span>"</span>
+            </div>
+
+            <div class="m-1">
+                <input
+                        x-model="search"
+                        class="form-control py-1 glue-fs--2"
+                        placeholder="Search..."
+                        type="text"
+                        x-ref="search_input"
+                        @keydown.enter.prevent="add_choice(filtered_choices[0])"
+                >
+            </div>
+
+            <template x-for="(choice, index) in get_selected_choices" :key="index">
+                <div
+                        class="glue-cursor-pointer glue-user-select py-1 d-flex align-items-center list-group-item px-0 bg-app-glue-layer-one-hover"
+                        tabindex="0"
+                        @click="remove_choice(choice)"
+                        @keydown.enter.prevent="remove_choice(choice)"
+                >
+                    {% block selected_choice_item %}
+                        {% include 'django_spire/form/field/item/selected_choice_item.html' %}
+                    {% endblock %}
+                </div>
+            </template>
+
+            <template x-if="get_selected_choices.length > 0 && filtered_choices.length !== 0">
+                <div>
+                    <span class="d-block glue-fs--2 ms-3">Choices</span>
+                </div>
+            </template>
+
+            <template x-for="(choice, index) in filtered_choices" :key="choice[0]">
+                <div
+                        class="glue-user-select py-1 d-flex align-items-center list-group-item px-0"
+                        tabindex="0"
+                        @click="glue_field.disabled_choices.includes(choice[0]) ? '' : add_choice(choice)"
+                        :class="glue_field.disabled_choices.includes(choice[0]) ? 'opacity-50 glue-user-select glue-cursor-not-allowed' : 'glue-cursor-pointer bg-app-glue-layer-one-hover'"
+                        @keydown.enter.prevent="add_choice(choice)"
+                >
+                    {% block choice_item %}
+                        {% include 'django_spire/form/field/item/select_choice_item.html' %}
+                    {% endblock %}
+                </div>
+            </template>
+
+            <template x-if="filtered_choices.length === 0">
+                <div class="py-1">
+                    <span class="d-block glue-fs--2 ms-3">No available choices</span>
+                </div>
+            </template>
+        </div>
+    </div>
+{% endblock %}

django_spire/core/templates/django_spire/form/field/number_field.html

@@ -0,0 +1,11 @@
+{% extends 'django_spire/form/field/base_field.html' %}
+
+{% block field_content %}
+    <input
+            {% if input_type %}type="{{ input_type }}"{% else %}type="number"{% endif %}
+            class="form-control"
+            x-ref="glue_field"
+            x-model="value"
+            :id="glue_field.id"
+    >
+{% endblock %}

django_spire/core/templates/django_spire/form/field/password_field.html

@@ -0,0 +1 @@
+{% include 'django_spire/form/field/input_field.html' with input_type='password' %}

django_spire/core/templates/django_spire/form/field/radio_field.html

@@ -0,0 +1,24 @@
+{% extends 'django_spire/form/field/base_field.html' %}
+
+{% block field_content %}
+    <div class="form-group">
+        <template x-for="choice in glue_field.choices" :key="choice[0]">
+            <div class="form-check">
+                <input
+                        type="radio"
+                        class="form-check-input"
+                        :id="glue_field.id + '_' + choice[0]"
+                        :name="glue_field.name"
+                        :value="choice[0]"
+                        :checked="value === choice[0]"
+                        @change="this.value =choice[0]"
+                >
+                <label
+                        class="form-check-label"
+                        :for="glue_field.id + '_' + choice[0]"
+                        x-text="choice[1]"
+                ></label>
+            </div>
+        </template>
+    </div>
+{% endblock %}

django_spire/core/templates/django_spire/form/field/range_field.html

@@ -0,0 +1 @@
+{% include 'django_spire/form/field/input_field.html' with input_type='range' %}