[6.x] Publish forms

resources/js/bootstrap/statamic.js

@@ -32,6 +32,7 @@ import Echo from '../components/Echo';
 import Permission from '../components/Permission';
 import autosize from 'autosize';
 import DateFormatter from '@statamic/components/DateFormatter.js';
+import wait from '@statamic/util/wait.js';
 
 let bootingCallbacks = [];
 let bootedCallbacks = [];
@@ -110,6 +111,18 @@ export default {
         return this.$app.config.globalProperties.$theme;
     },
 
+    get $fieldActions() {
+        return this.$app.config.globalProperties.$fieldActions;
+    },
+
+    get $dirty() {
+        return this.$app.config.globalProperties.$dirty;
+    },
+
+    get $events() {
+        return this.$app.config.globalProperties.$events;
+    },
+
     get user() {
         return this.$config.get('user');
     },
@@ -189,9 +202,7 @@ export default {
                 return permissions.includes('super') || permissions.includes(permission);
             },
             $wait(ms) {
-                return new Promise((resolve) => {
-                    setTimeout(resolve, ms);
-                });
+                return wait(ms);
             },
         });
 

resources/js/components/field-conditions/ShowField.js

@@ -0,0 +1,72 @@
+import Validator from '@statamic/components/field-conditions/Validator.js';
+import { data_get } from '@statamic/bootstrap/globals.js';
+import { nextTick } from 'vue';
+
+export default class {
+    constructor(store, values, extraValues) {
+        this.store = store;
+        this.values = values;
+        this.extraValues = extraValues;
+    }
+
+    showField(field, dottedKey) {
+        let dottedFieldPath = dottedKey || field.handle;
+        let dottedPrefix = dottedKey ? dottedKey.replace(new RegExp('\.' + field.handle + '$'), '') : '';
+
+        // If we know the field is to permanently hidden, bypass validation.
+        if (field.visibility === 'hidden' || this.shouldForceHiddenField(dottedFieldPath)) {
+            this.setHiddenFieldState({
+                dottedKey: dottedFieldPath,
+                hidden: 'force',
+                omitValue: false,
+            });
+
+            return false;
+        }
+
+        // Use validation to determine whether field should be shown.
+        let validator = new Validator(field, { ...this.values, ...this.extraValues }, dottedFieldPath, this.store);
+        let passes = validator.passesConditions();
+
+        // If the field is configured to always save, never omit value.
+        if (field.always_save === true) {
+            this.setHiddenFieldState({
+                dottedKey: dottedFieldPath,
+                hidden: !passes,
+                omitValue: false,
+            });
+
+            return passes;
+        }
+
+        // Ensure DOM is updated to ensure all revealers are properly loaded and tracked before committing to store.
+        nextTick(() => {
+            this.setHiddenFieldState({
+                dottedKey: dottedFieldPath,
+                hidden: !passes,
+                omitValue: field.type === 'revealer' || !validator.passesNonRevealerConditions(dottedPrefix),
+            });
+        });
+
+        return passes;
+    }
+
+    setHiddenFieldState({ dottedKey, hidden, omitValue }) {
+        const currentValue = this.store.hiddenFields[dottedKey];
+
+        // Prevent infinite loops
+        if (currentValue && currentValue.hidden === hidden && currentValue.omitValue === omitValue) {
+            return;
+        }
+
+        this.store.setHiddenField({
+            dottedKey,
+            hidden,
+            omitValue,
+        });
+    }
+
+    shouldForceHiddenField(dottedFieldPath) {
+        return data_get(this.store.hiddenFields[dottedFieldPath], 'hidden') === 'force';
+    }
+}

resources/js/components/field-conditions/ValidatorMixin.js

@@ -1,74 +1,11 @@
-import Validator from './Validator.js';
-import { data_get } from '../../bootstrap/globals.js';
+import ShowField from './ShowField.js';
 
 export default {
-    inject: ['publishContainer'],
+    inject: ['store'],
 
     methods: {
         showField(field, dottedKey) {
-            let dottedFieldPath = dottedKey || field.handle;
-            let dottedPrefix = dottedKey ? dottedKey.replace(new RegExp('\.' + field.handle + '$'), '') : '';
-
-            // If we know the field is to permanently hidden, bypass validation.
-            if (field.visibility === 'hidden' || this.shouldForceHiddenField(dottedFieldPath)) {
-                this.setHiddenFieldState({
-                    dottedKey: dottedFieldPath,
-                    hidden: 'force',
-                    omitValue: false,
-                });
-
-                return false;
-            }
-
-            // Use validation to determine whether field should be shown.
-            let validator = new Validator(
-                field,
-                { ...this.values, ...this.extraValues },
-                dottedFieldPath,
-                this.publishContainer.store,
-            );
-            let passes = validator.passesConditions();
-
-            // If the field is configured to always save, never omit value.
-            if (field.always_save === true) {
-                this.setHiddenFieldState({
-                    dottedKey: dottedFieldPath,
-                    hidden: !passes,
-                    omitValue: false,
-                });
-
-                return passes;
-            }
-
-            // Ensure DOM is updated to ensure all revealers are properly loaded and tracked before committing to store.
-            this.$nextTick(() => {
-                this.setHiddenFieldState({
-                    dottedKey: dottedFieldPath,
-                    hidden: !passes,
-                    omitValue: field.type === 'revealer' || !validator.passesNonRevealerConditions(dottedPrefix),
-                });
-            });
-
-            return passes;
-        },
-
-        setHiddenFieldState({ dottedKey, hidden, omitValue }) {
-            const currentValue = this.publishContainer.store.hiddenFields[dottedKey];
-
-            // Prevent infinite loops
-            if (currentValue && currentValue.hidden === hidden && currentValue.omitValue === omitValue) {
-                return;
-            }
-
-            this.publishContainer.store.setHiddenField({
-                dottedKey,
-                hidden,
-                omitValue,
-            });
-        },
-
-        shouldForceHiddenField(dottedFieldPath) {
-            return data_get(this.publishContainer.store.hiddenFields[dottedFieldPath], 'hidden') === 'force';
+            return new ShowField(this.store, this.values, this.extraValues).showField(field, dottedKey);
         },
     },
 };

resources/js/components/fieldtypes/Fieldtype.vue

@@ -48,6 +48,8 @@ export default {
         },
         namePrefix: String,
         fieldPathPrefix: String,
+        metaPathPrefix: String,
+        id: String,
     },
 
     methods: {
@@ -95,9 +97,7 @@ export default {
         },
 
         fieldId() {
-            let prefix = this.fieldPathPrefix ? this.fieldPathPrefix + '.' : '';
-
-            return prefix + 'field_' + this.config.handle;
+            return this.id;
         },
 
         fieldActionPayload() {

resources/js/components/fieldtypes/GroupFieldtype.vue

@@ -10,31 +10,14 @@
                 >
                 </publish-field-fullscreen-header>
                 <section :class="{ 'mt-14 p-4': fullScreenMode }">
-                    <div :class="{ 'replicator-set rounded-sm border shadow-sm dark:border-dark-900': config.border }">
-                        <div
-                            class="publish-fields @container"
-                            :class="{ 'replicator-set-body': config.border, '-mx-4': !config.border }"
+                    <div :class="{ 'replicator-set dark:border-dark-900 rounded-sm border shadow-sm': config.border }">
+                        <FieldsProvider
+                            :fields="fields"
+                            :field-path-prefix="fieldPathPrefix || handle"
+                            :meta-path-prefix="metaPathPrefix || handle"
                         >
-                            <set-field
-                                v-for="field in fields"
-                                :key="field.handle"
-                                v-show="showField(field, fieldPath(field.handle))"
-                                :field="field"
-                                :meta="meta[field.handle]"
-                                :value="value[field.handle]"
-                                :parent-name="name"
-                                :set-index="0"
-                                :errors="errors(field.handle)"
-                                :field-path="fieldPath(field.handle)"
-                                :read-only="isReadOnly"
-                                :show-field-previews="config.replicator_preview"
-                                @updated="updated(field.handle, $event)"
-                                @meta-updated="updateMeta(field.handle, $event)"
-                                @focus="$emit('focus')"
-                                @blur="$emit('blur')"
-                                @replicator-preview-updated="previewUpdated(field.handle, $event)"
-                            />
-                        </div>
+                            <Fields class="p-4" />
+                        </FieldsProvider>
                     </div>
                 </section>
             </div>
@@ -56,19 +39,19 @@
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import SetField from './replicator/Field.vue';
 import { ValidatesFieldConditions } from '../field-conditions/FieldConditions.js';
 import ManagesPreviewText from './replicator/ManagesPreviewText';
+import Fields from '@statamic/components/ui/Publish/Fields.vue';
+import FieldsProvider from '@statamic/components/ui/Publish/FieldsProvider.vue';
 
 export default {
     mixins: [Fieldtype, ValidatesFieldConditions, ManagesPreviewText],
-    components: { SetField },
+    components: { Fields, FieldsProvider },
     data() {
         return {
             containerWidth: null,
             focused: false,
             fullScreenMode: false,
-            previews: {},
             provide: {
                 group: this.makeGroupProvide(),
             },
@@ -85,6 +68,9 @@ export default {
         fields() {
             return this.config.fields;
         },
+        previews() {
+            return data_get(this.store.previews, this.fieldPathPrefix || this.handle) || {};
+        },
         replicatorPreview() {
             if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
@@ -152,10 +138,6 @@ export default {
             this.$emit('meta-updated', { ...this.meta, [handle]: value });
         },
 
-        previewUpdated(handle, value) {
-            this.previews = { ...this.previews, [handle]: value };
-        },
-
         fieldPath(handle) {
             return (this.fieldPathPrefix || this.handle) + '.' + handle;
         },

resources/js/components/fieldtypes/SlugFieldtype.vue

@@ -18,6 +18,7 @@
             :id="fieldId"
             :isReadOnly="isReadOnly"
             :name="slug"
+            :disabled="isReadOnly"
             @focus="$emit('focus')"
             @blur="$emit('blur')"
         >

resources/js/components/fieldtypes/TextFieldtype.vue

@@ -7,13 +7,13 @@
         :autocomplete="config.autocomplete"
         :autoselect="config.autoselect"
         :type="config.input_type"
-        :isReadOnly="isReadOnly"
+        :disabled="isReadOnly"
         :prepend="__(config.prepend)"
         :append="__(config.append)"
         :limit="config.character_limit"
         :placeholder="__(config.placeholder)"
         :name="name"
-        :id="fieldId"
+        :id="id"
         :direction="config.direction"
         @update:model-value="inputUpdated"
         @focus="$emit('focus')"