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

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

@@ -0,0 +1,216 @@
+{% extends 'django_spire/form/field/base_field.html' %}
+
+{% block field_content %}
+    <input
+            type="text"
+            x-model="value"
+            x-ref="glue_field"
+            hidden
+    >
+
+    <div
+            class="position-relative"
+            x-data="{
+            show_dropdown: false,
+            files: [],
+            objects: {},
+
+            accept: '{{ accept|default:'' }}',
+            compression: {{ compression|default:'true' }},
+            compression_ratio: {{ compression_ratio|default:'0.75' }},
+            disable_camera: '{{ disable_camera|default:'False' }}' === 'True',
+            disable_file: '{{ disable_file|default:'False' }}' === 'True',
+            maximum_filesize: {{ maximum_filesize|default:'10' }} * 1024 * 1024,
+            units: ['B', 'KB', 'MB', 'GB'],
+
+            init() {
+                if (!this.value) return;
+
+                try {
+                    this.files = Array.isArray(this.value) ? this.value : JSON.parse(this.value);
+                } catch(e) {
+                    this.files = [];
+                }
+
+                this.update_form_files();
+            },
+
+            async compress(file, quality = 0.75, maximum_width = 1920) {
+                try {
+                    let image = await createImageBitmap(file);
+
+                    let scale = Math.min(
+                        1,
+                        maximum_width / Math.max(image.width, image.height)
+                    );
+
+                    let width = image.width * scale;
+                    let height = image.height * scale;
+
+                    let canvas = Object.assign(document.createElement('canvas'), { width: width, height: height });
+                    let ctx = canvas.getContext('2d');
+
+                    ctx.drawImage(image, 0, 0, width, height);
+
+                    let filename = file.name.replace(/\.[^/.]+$/, '') + '.jpg';
+
+                    return new Promise(result => canvas.toBlob(
+                        blob => result(new File([blob], filename, { type: 'image/jpeg' })),
+                        'image/jpeg',
+                        quality
+                    ));
+                } catch (error) {
+                    console.error('Compression failed:', error);
+                    return file;
+                }
+            },
+
+            format_file_size(bytes) {
+                if (!bytes) return '';
+
+                let size = bytes;
+                let index = 0;
+
+                while (size >= 1024 && index < this.units.length - 1) {
+                    size /= 1024;
+                    index++;
+                }
+
+                return `${size.toFixed(1)} ${this.units[index]}`;
+            },
+
+            take_photo() {
+                this.$refs.camera_input.click();
+            },
+
+            truncate_name(name, max = 30) {
+                return name && name.length > max ? name.slice(0, max - 3) + '...' : name;
+            },
+
+            update_form_files() {
+                let transfer = new DataTransfer();
+
+                for (let object in this.objects) {
+                    transfer.items.add(this.objects[object]);
+                }
+
+                this.$refs.upload.files = transfer.files;
+            },
+
+            update_value() {
+                this.value = this.files.length > 0 ? JSON.stringify(this.files) : null;
+            },
+
+            {% block x-data %}{% endblock %}
+        }"
+    >
+        <input
+                type="file"
+                :name="{{ glue_field }}.name"
+                x-ref="upload"
+                class="d-none"
+                :accept="accept"
+                {% block upload_attributes %}{% endblock %}
+        >
+
+        <div class="d-flex">
+            <button
+                    class="form-control text-start d-flex justify-content-between flex-grow-1"
+                    type="button"
+                    @click="show_dropdown = !show_dropdown"
+                    :class="disable_file ? 'd-none' : ''"
+            >
+                <span class="d-flex flex-wrap align-items-center">
+                    {% block selection_display %}{% endblock %}
+                </span>
+
+                <span class="d-flex align-items-center">
+                    {% include 'django_glue/form/field/element/select_down_arrow_element.html' %}
+                </span>
+            </button>
+
+            <button
+                    type="button"
+                    class="btn border ms-2"
+                    @click="take_photo()"
+                    :class="disable_camera ? 'd-none' : ''"
+            >
+                <i class="bi bi-camera"></i>
+            </button>
+        </div>
+
+        <input
+                type="file"
+                x-ref="file_input"
+                class="d-none"
+                @change="handle_files_change"
+                :accept="accept"
+                :class="disable_file ? 'd-none' : ''"
+                {% block file_input_attributes %}{% endblock %}
+        >
+
+        <input
+                type="file"
+                x-ref="camera_input"
+                class="d-none"
+                @change="handle_files_change"
+                accept="image/*"
+                capture="environment"
+                :class="disable_camera ? 'd-none' : ''"
+                {% block camera_input_attributes %}{% endblock %}
+        >
+
+        <div
+                x-cloak
+                x-show="show_dropdown"
+                @click.outside="show_dropdown = false"
+                class="shadow border rounded-2 mt-2 bg-app-glue-layer-one w-100 p-0 list-group"
+                style="max-height: 350px; overflow-y: auto;"
+        >
+            <template x-for="file in files" :key="file.id">
+                <div
+                        class="py-2 d-flex align-items-center list-group-item px-2 bg-app-glue-layer-one-hover"
+                >
+                    <div class="me-2" style="width: 40px; height: 40px;">
+                        <template x-if="file.preview">
+                            <img :src="file.preview" class="img-fluid rounded"
+                                 style="max-width: 40px; max-height: 40px; object-fit: cover;">
+                        </template>
+
+                        <template x-if="!file.preview">
+                            <div class="d-flex align-items-center justify-content-center rounded"
+                                 style="width: 40px; height: 40px;">
+                                <i class="bi bi-file-earmark"></i>
+                            </div>
+                        </template>
+                    </div>
+
+                    <div class="flex-grow-1 ms-2">
+                        <div class="text-truncate" x-text="truncate_name(file.name)"></div>
+                        <div class="glue-fs--2" x-text="format_file_size(file.size)"></div>
+                    </div>
+
+                    <div class="d-flex align-items-center">
+                        <i
+                                class="bi bi-trash text-danger glue-cursor-pointer mx-2"
+                                @click="remove_file(file.id)"
+                        ></i>
+                    </div>
+                </div>
+            </template>
+
+            <div
+                    class="m-2 border border-dashed rounded p-3 text-center bg-app-glue-layer-one glue-cursor-pointer"
+                    @dragover.prevent="$el.classList.add('border-primary')"
+                    @dragleave.prevent="$el.classList.remove('border-primary')"
+                    @drop.prevent="$el.classList.remove('border-primary'); handle_files_change({target: {files: $event.dataTransfer.files}})"
+                    @click="$refs.file_input.click()"
+            >
+                <div>
+                    <i class="bi bi-cloud-arrow-up me-2"></i>
+                    {% block drop_area_text %}{% endblock %}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}

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

@@ -0,0 +1,52 @@
+{% extends 'django_spire/form/field/base_field.html' %}
+
+{% block field_content %}
+    <div
+            class="glue-form-group"
+            x-ref="glue_field"
+            x-data="{
+            selected_values: [],
+            init_value(value) {
+                if (value === null || value === undefined) {
+                    this.selectedValues = [];
+                } else if (Array.isArray(value)) {
+                    this.selectedValues = [...value];
+                } else {
+                    this.selectedValues = [value];
+                }
+            },
+            update_value() {
+                this.value = this.selectedValues.length > 0 ? this.selectedValues : null;
+            },
+            toggle_value(choice) {
+                if (this.selectedValues.includes(choice)) {
+                    this.selectedValues = this.selectedValues.filter(v => v !== choice);
+                } else {
+                    this.selectedValues.push(choice);
+                }
+                this.update_value();
+            }
+        }"
+            x-effect="init_value(value)"
+    >
+        <template x-for="choice in glue_field.choices" :key="choice[0]">
+            <div class="d-flex align-items-center mb-2">
+                <input
+                        type="checkbox"
+                        class="glue-form-check-input me-2"
+                        :id="glue_field.id + '_' + choice[0]"
+                        :name="glue_field.name"
+                        :value="choice[0]"
+                        :checked="selectedValues.includes(choice[0])"
+                        @change="toggle_value(choice[0])"
+                        style="accent-color: var(--glue-primary);"
+                >
+                <label
+                        class="glue-form-check-label glue-text-primary glue-cursor-pointer"
+                        :for="glue_field.id + '_' + choice[0]"
+                        x-text="choice[1]"
+                ></label>
+            </div>
+        </template>
+    </div>
+{% endblock %}

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 %}