@verbb/formie-browser 1.0.4 → 1.0.6

package/src/css/theme/fields/_combobox.css

@@ -0,0 +1,246 @@
+/*
+ * Combobox styles are intentionally unlayered. The combobox module injects this
+ * sheet at runtime, and unlayered third-party CSS would otherwise win over
+ * @layer formie-theme rules.
+ *
+ * Tom Select default CSS is not imported; these rules provide the minimum
+ * structure plus Formie theme styling for searchable dropdowns.
+ */
+
+.formie-field .ts-wrapper.formie-combobox {
+    width: 100%;
+    display: block;
+    position: relative;
+    min-height: 0;
+    border: 0;
+    padding: 0;
+    background: none;
+    box-shadow: none;
+}
+
+.formie-field select[data-formie-combobox-input].tomselected,
+.formie-field select[data-formie-combobox-input].ts-hidden-accessible {
+    display: none !important;
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-control {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+    width: 100%;
+    border: var(--formie-border-width) solid var(--formie-color-border);
+    border-radius: var(--formie-radius-sm);
+    background-color: var(--formie-color-surface);
+    background-image: none;
+    min-height: var(--formie-control-height);
+    padding: calc(var(--formie-control-padding-y) - 1px) var(--formie-control-padding-x);
+    box-shadow: none;
+    font-size: var(--formie-control-font-size);
+    line-height: var(--formie-line-height-tight);
+    color: var(--formie-color-text);
+    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
+    gap: var(--formie-space-1);
+}
+
+.formie-field .ts-wrapper.formie-combobox.single .ts-control {
+    --ts-pr-min: var(--formie-control-padding-x);
+    --ts-pr-caret: calc(var(--formie-select-indicator-size) + var(--formie-space-1));
+    padding-right: calc(var(--formie-control-padding-x) + var(--formie-select-indicator-size) + var(--formie-space-2)) !important;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-position: right var(--formie-space-2) center;
+    background-repeat: no-repeat;
+    background-size: var(--formie-select-indicator-size) var(--formie-select-indicator-size);
+}
+
+.formie-field .ts-wrapper.formie-combobox.single .ts-control::after {
+    display: none;
+}
+
+.formie-field .ts-wrapper.formie-combobox.multi .ts-control {
+    padding: calc(var(--formie-control-padding-y) - 2px) var(--formie-control-padding-x) calc(var(--formie-control-padding-y) - 4px);
+    --ts-pr-min: var(--formie-control-padding-x);
+}
+
+.formie-field .ts-wrapper.formie-combobox.multi.has-items .ts-control {
+    padding-left: var(--formie-control-padding-x);
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-control > input {
+    flex: 1 1 auto;
+    min-width: 7rem;
+    max-width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    border: 0 !important;
+    background: none !important;
+    box-shadow: none !important;
+    color: var(--formie-color-text);
+    font: inherit;
+    font-size: var(--formie-control-font-size);
+    line-height: inherit;
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-control > input:focus {
+    outline: none !important;
+}
+
+.formie-field .ts-wrapper.formie-combobox.has-items .ts-control > input {
+    margin: 0 var(--formie-space-1) !important;
+}
+
+.formie-field .ts-wrapper.formie-combobox.input-hidden .ts-control > input {
+    opacity: 0;
+    position: absolute;
+    left: -10000px;
+}
+
+.formie-field .ts-wrapper.formie-combobox.single .ts-control,
+.formie-field .ts-wrapper.formie-combobox.single .ts-control > input {
+    cursor: pointer;
+}
+
+.formie-field .ts-wrapper.formie-combobox.single.input-active .ts-control,
+.formie-field .ts-wrapper.formie-combobox.single.input-active .ts-control > input {
+    cursor: text;
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-control .items-placeholder {
+    color: var(--formie-color-text-muted);
+    font: inherit;
+    font-size: var(--formie-control-font-size);
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-control > input::placeholder {
+    color: var(--formie-color-text-muted);
+}
+
+.formie-field .ts-wrapper.formie-combobox.focus .ts-control,
+.formie-field .ts-wrapper.formie-combobox .ts-control:focus-within,
+.formie-field .ts-wrapper.formie-combobox.dropdown-active .ts-control {
+    outline: 0;
+    border-color: var(--formie-color-focus-ring);
+    box-shadow: var(--formie-shadow-focus);
+    border-radius: var(--formie-radius-sm);
+}
+
+.formie-field-has-error .ts-wrapper.formie-combobox .ts-control {
+    border-color: var(--formie-color-danger);
+}
+
+.formie-field-has-error .ts-wrapper.formie-combobox.focus .ts-control,
+.formie-field-has-error .ts-wrapper.formie-combobox .ts-control:focus-within,
+.formie-field-has-error .ts-wrapper.formie-combobox.dropdown-active .ts-control {
+    border-color: var(--formie-color-danger);
+    box-shadow: var(--formie-shadow-danger-focus);
+}
+
+.formie-field .ts-wrapper.formie-combobox.multi .ts-control > .item,
+.formie-field .ts-wrapper.formie-combobox.multi .ts-control [data-value] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--formie-space-1);
+    margin: 0 var(--formie-space-1) var(--formie-space-1) 0;
+    padding: 0 var(--formie-space-2);
+    background: var(--formie-color-surface-muted, rgba(15, 23, 42, 0.06));
+    background-image: none;
+    border: var(--formie-border-width) solid var(--formie-color-border);
+    border-radius: var(--formie-radius-sm);
+    box-shadow: none;
+    color: var(--formie-color-text);
+    text-shadow: none;
+    line-height: calc(var(--formie-control-height) - var(--formie-space-3));
+}
+
+.formie-field .ts-wrapper.formie-combobox.multi .ts-control > .item.active,
+.formie-field .ts-wrapper.formie-combobox.multi .ts-control [data-value].active {
+    background: var(--formie-color-surface-muted, rgba(15, 23, 42, 0.06));
+    color: var(--formie-color-text);
+}
+
+.formie-field .ts-wrapper.formie-combobox.plugin-remove_button .item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--formie-space-1);
+}
+
+.formie-field .ts-wrapper.formie-combobox.plugin-remove_button:not(.rtl) .item {
+    padding-right: var(--formie-space-2) !important;
+}
+
+.formie-field .ts-wrapper.formie-combobox.plugin-remove_button .item .remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    box-shadow: none;
+    text-decoration: none;
+    color: var(--formie-color-text-muted);
+    font-size: 1.125em;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.formie-field .ts-wrapper.formie-combobox.plugin-remove_button .item .remove:hover,
+.formie-field .ts-wrapper.formie-combobox.plugin-remove_button .item .remove:focus {
+    background: none;
+    text-decoration: none;
+    color: var(--formie-color-text);
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    z-index: var(--formie-z-popover, 30);
+    border: var(--formie-border-width) solid var(--formie-color-border);
+    border-radius: var(--formie-radius-sm);
+    background: var(--formie-color-surface);
+    box-shadow: var(--formie-shadow-popover, 0 8px 24px rgba(15, 23, 42, 0.12));
+    margin-top: var(--formie-space-1);
+    box-sizing: border-box;
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown-content {
+    overflow: hidden auto;
+    max-height: 200px;
+    scroll-behavior: smooth;
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .option,
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .optgroup-header,
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .no-results {
+    color: var(--formie-color-text);
+    padding: var(--formie-space-2) var(--formie-control-padding-x);
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown [data-selectable] {
+    cursor: pointer;
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .option.active,
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .option:hover,
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .active {
+    background: var(--formie-color-surface-muted, rgba(15, 23, 42, 0.05));
+    color: var(--formie-color-text);
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .highlight {
+    background: rgba(59, 130, 246, 0.18);
+    border-radius: 2px;
+}
+
+.formie-field .ts-wrapper.formie-combobox.disabled .ts-control {
+    opacity: 0.6;
+    background-color: var(--formie-color-surface-muted, rgba(15, 23, 42, 0.04));
+    cursor: not-allowed;
+}

package/src/css/theme/fields/_select.css

@@ -34,4 +34,17 @@
         border-color: var(--formie-color-danger);
         box-shadow: var(--formie-shadow-danger-focus);
     }
+
+    /* Tom Select copies native select classes onto its wrapper; keep combobox chrome on .ts-control only. */
+    .formie-field .ts-wrapper.formie-combobox,
+    .formie-field .ts-wrapper.formie-combobox.formie-select,
+    .formie-field .ts-wrapper.formie-combobox.formie-dropdown-input {
+        border: 0;
+        padding: 0;
+        min-height: 0;
+        background: none;
+        background-image: none;
+        box-shadow: none;
+        appearance: none;
+    }
 }

package/src/css/theme/fields/_signature.css

@@ -36,4 +36,23 @@
         font-size: 0;
         line-height: 0;
     }
+
+    [data-formie-field-type="signature"] .formie-signature-pad {
+        position: relative;
+    }
+
+    [data-formie-field-type="signature"] .formie-signature-message {
+        margin: 0;
+        padding: var(--formie-space-3);
+        border: var(--formie-signature-border);
+        border-radius: var(--formie-signature-border-radius);
+        background: var(--formie-signature-background);
+        color: var(--formie-color-text-muted);
+        font-size: var(--formie-font-size-sm);
+        line-height: var(--formie-line-height-base);
+    }
+
+    [data-formie-field-type="signature"].formie-signature-has-message .formie-signature-canvas {
+        display: none;
+    }
 }

package/src/css/theme/fields/_upload-manager.css

@@ -0,0 +1,279 @@
+@layer formie-theme {
+    .formie-upload-manager {
+        display: flex;
+        flex-direction: column;
+        gap: var(--formie-gap-field);
+    }
+
+    .formie-upload-manager-dropzone {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--formie-space-2);
+        padding: var(--formie-space-4);
+        min-height: calc(var(--formie-control-height) * 3);
+        border: var(--formie-border-width) dashed var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+        background: var(--formie-color-surface-subtle);
+        color: var(--formie-color-text);
+        text-align: center;
+        cursor: pointer;
+        transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
+    }
+
+    .formie-upload-manager-dropzone:hover,
+    .formie-upload-manager-dropzone.formie-upload-manager-dropzone-active {
+        border-color: var(--formie-color-focus-ring);
+        background: var(--formie-color-surface-muted);
+    }
+
+    .formie-upload-manager-dropzone:focus {
+        outline: 0;
+    }
+
+    .formie-upload-manager-dropzone:focus-visible {
+        box-shadow: 0 0 0 var(--formie-focus-ring-width) var(--formie-color-focus-ring);
+    }
+
+    .formie-field-has-error .formie-upload-manager-dropzone {
+        border-color: var(--formie-color-danger);
+    }
+
+    .formie-upload-manager-prompt {
+        margin: 0;
+        font-size: var(--formie-font-size-sm);
+        color: var(--formie-color-text-muted);
+    }
+
+    .formie-upload-manager-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--formie-space-2);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .formie-upload-manager-item {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 8rem) auto;
+        align-items: center;
+        gap: var(--formie-space-2);
+        padding: var(--formie-space-2) var(--formie-space-3);
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+        background: var(--formie-color-surface);
+    }
+
+    .formie-upload-manager-item.is-error {
+        border-color: var(--formie-color-danger);
+    }
+
+    .formie-upload-manager-item.is-complete .formie-upload-manager-progress {
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+    }
+
+    .formie-upload-manager-filename {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: var(--formie-font-size-sm);
+    }
+
+    .formie-upload-manager-progress {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: var(--formie-space-1);
+        min-height: var(--formie-button-icon-button-size);
+        align-self: center;
+        opacity: 1;
+        visibility: visible;
+        transition: opacity 200ms ease, visibility 200ms ease;
+    }
+
+    .formie-upload-manager-progress-track {
+        position: relative;
+        height: 0.375rem;
+        border-radius: var(--formie-radius-full);
+        background: var(--formie-color-surface-muted);
+        overflow: hidden;
+    }
+
+    .formie-upload-manager-progress-bar {
+        height: 100%;
+        width: 0;
+        border-radius: inherit;
+        background: var(--formie-color-primary);
+        transition: width 180ms ease-out, background-color 200ms ease;
+    }
+
+    .formie-upload-manager-item.is-upload-complete .formie-upload-manager-progress-bar {
+        width: 100% !important;
+        background: var(--formie-color-success, var(--formie-color-primary));
+    }
+
+    .formie-upload-manager-item.is-uploading:not(.is-upload-complete) .formie-upload-manager-progress-track[data-indeterminate="true"] .formie-upload-manager-progress-bar,
+    .formie-upload-manager-item.is-preparing .formie-upload-manager-progress-bar,
+    .formie-upload-manager-item.is-processing .formie-upload-manager-progress-bar {
+        width: 35%;
+        animation: formie-upload-manager-progress-indeterminate 1.1s ease-in-out infinite;
+    }
+
+    .formie-upload-manager-item.is-processing .formie-upload-manager-progress-bar {
+        opacity: 0.85;
+    }
+
+    .formie-upload-manager-item.is-processing .formie-upload-manager-progress-label {
+        color: var(--formie-color-text);
+    }
+
+    @keyframes formie-upload-manager-progress-indeterminate {
+        0% {
+            transform: translateX(-120%);
+        }
+
+        100% {
+            transform: translateX(320%);
+        }
+    }
+
+    .formie-upload-manager-progress-label {
+        font-size: var(--formie-font-size-xs);
+        line-height: 1.2;
+        color: var(--formie-color-text-muted);
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    .formie-upload-manager-item.is-upload-complete .formie-upload-manager-progress-label {
+        color: var(--formie-color-success, var(--formie-color-primary));
+        font-weight: var(--formie-font-weight-medium);
+    }
+
+    .formie-upload-manager-error {
+        grid-column: 1 / -1;
+        font-size: var(--formie-font-size-xs);
+        color: var(--formie-color-danger);
+    }
+
+    .formie-upload-manager-browse-button {
+        margin-top: var(--formie-space-1);
+    }
+
+    .formie-upload-manager-actions {
+        display: flex;
+        align-items: center;
+        gap: var(--formie-space-2);
+        align-self: center;
+        flex-shrink: 0;
+    }
+
+    .formie-upload-manager-sort-controls {
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.0625rem;
+        padding: 0;
+        border-radius: var(--formie-radius-sm);
+        background: transparent;
+    }
+
+    .formie-upload-manager-sort-controls[hidden] {
+        display: none;
+    }
+
+    .formie-upload-manager-sort-button,
+    .formie-upload-manager-action-button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.375rem;
+        height: 1.375rem;
+        padding: 0;
+        border: 0;
+        border-radius: var(--formie-radius-sm);
+        background: transparent;
+        color: var(--formie-color-text-muted);
+        cursor: pointer;
+        font-size: 0;
+        line-height: 0;
+        text-indent: -9999px;
+        overflow: hidden;
+        white-space: nowrap;
+        transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
+    }
+
+    .formie-upload-manager-sort-button {
+        width: 1.375rem;
+        height: 1.375rem;
+    }
+
+    .formie-upload-manager-sort-button:hover:not(:disabled),
+    .formie-upload-manager-action-button:hover {
+        background: var(--formie-color-surface-muted);
+        color: var(--formie-color-text);
+    }
+
+    .formie-upload-manager-sort-button:focus-visible,
+    .formie-upload-manager-action-button:focus-visible {
+        outline: 0;
+        box-shadow: 0 0 0 var(--formie-focus-ring-width) var(--formie-color-focus-ring);
+    }
+
+    .formie-upload-manager-sort-button:disabled {
+        opacity: 0.28;
+        cursor: not-allowed;
+    }
+
+    .formie-upload-manager-sort-button::after,
+    .formie-upload-manager-action-button::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        content: '';
+        transform: translate(-50%, -50%);
+        background-color: currentColor;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center;
+        -webkit-mask-size: contain;
+        mask-size: contain;
+    }
+
+    .formie-upload-manager-sort-button[data-formie-icon="arrow-up"] {
+        --formie-upload-manager-icon-mask: var(--formie-icon-mask-arrow-up);
+    }
+
+    .formie-upload-manager-sort-button[data-formie-icon="arrow-down"] {
+        --formie-upload-manager-icon-mask: var(--formie-icon-mask-arrow-down);
+    }
+
+    .formie-upload-manager-action-button[data-formie-icon="close"] {
+        --formie-upload-manager-icon-mask: var(--formie-icon-mask-close);
+    }
+
+    .formie-upload-manager-sort-button::after {
+        width: 0.75rem;
+        height: 0.75rem;
+        -webkit-mask-image: var(--formie-upload-manager-icon-mask);
+        mask-image: var(--formie-upload-manager-icon-mask);
+    }
+
+    .formie-upload-manager-action-button::after {
+        width: 0.825rem;
+        height: 0.825rem;
+        -webkit-mask-image: var(--formie-upload-manager-icon-mask);
+        mask-image: var(--formie-upload-manager-icon-mask);
+    }
+
+    .formie-upload-manager-remove-button {
+        flex-shrink: 0;
+    }
+}

package/src/js/core/create-formie-client.ts

@@ -13,6 +13,11 @@ import type { ThemeClassMap } from '#contracts/theme';
 import { dispatchFormieDomEvent } from '#core/dom-events';
 import { dispatchPageClientEventForSubmit } from '#core/page-client-event';
 import { syncPageTabErrors } from '#core/page-tab-errors';
+import {
+    enhanceServerRenderedFieldErrors,
+    focusFirstValidationError,
+    hasServerRenderedValidationErrors,
+} from '#core/validation-focus';
 import { clearSubmitFeedback, executeAjaxSubmitFlow, shouldKeepSubmitLoading } from '#core/submit-flow';
 import { applySubmitResultUi } from '#core/submit-result-ui';
 import { applyPageState, clearSubmitLoading, setSubmitLoading } from '#core/submit-result-state';
@@ -24,6 +29,7 @@ import { runSubmitPipeline } from '#submit/pipeline';
 import { clearSubmissionOnUnload, requestGraphqlRender, requestRefreshTokens, requestRender, requestSetPage } from '#transport/forms-api';
 import { createDebug } from '#utils/debug';
 import { createFormUnloadWarningGuard } from '#utils/unload-warning';
+import { getValidationScope } from '#validation/scope';
 import { FormieValidator } from '#validation/validator';
 import { bindSubmitReadiness } from '#validation/submit-readiness';
 
@@ -745,6 +751,22 @@ function bindFormEvents(
                         allowNativeSubmit = false;
                         clearInternalNavigation(form);
                         clearSubmitLoading(form);
+
+                        if (validator && shouldValidateOnSubmit(form)) {
+                            const { scope, final } = getValidationScope(form);
+                            const validationErrors = validator.submit(final ? form : scope, { final });
+
+                            if (validationErrors.length > 0) {
+                                applySubmitResultUi(form, {
+                                    ok: false,
+                                    stage: 'validate',
+                                    code: 'VALIDATION_FAILED',
+                                    message: validator.config.errorMessage || 'Validation failed.',
+                                    fieldErrors: validator.getFieldErrors(validationErrors),
+                                    formErrors: [validator.config.errorMessage || 'Validation failed.'],
+                                });
+                            }
+                        }
                     };
 
                     if (typeof form.requestSubmit === 'function') {
@@ -996,6 +1018,11 @@ export function createFormieClient(): FormieClient {
                 normalizeHeadlessManagedUrls(target, form, normalizedOptions);
             }
 
+            if (normalizedOptions.mode === 'server-rendered' && hasServerRenderedValidationErrors(form)) {
+                enhanceServerRenderedFieldErrors(form);
+                focusFirstValidationError(form);
+            }
+
             syncPageTabErrors(form);
         }
 

package/src/js/core/submit-result-ui.ts

@@ -1,6 +1,7 @@
 import type { FormSubmitResult } from '#contracts/schema';
 import { ensureFieldErrorContainer as resolveFieldErrorContainer } from '#core/field-error-container';
 import { syncPageTabErrors } from '#core/page-tab-errors';
+import { focusFirstValidationError } from '#core/validation-focus';
 import { setFormHiddenState } from '#core/submit-result-state';
 import { addThemeClasses, removeThemeClasses } from '#theme/theme-classes';
 
@@ -433,10 +434,9 @@ export function applySubmitResultUi(form: HTMLFormElement, result: FormSubmitRes
 
     if (result.formErrors?.length) {
         renderFormErrors(form, result.formErrors);
-        return;
-    }
-
-    if (!result.fieldErrors && result.message) {
+    } else if (!result.fieldErrors && result.message) {
         renderFormErrors(form, [result.message]);
     }
+
+    focusFirstValidationError(form);
 }