[5.x] Ability to opt out of async slug behavior, and opt out in field…

… settings (#10075)
statamic · May 14, 2024 · d140dd4 · d140dd4
1 parent 5497ef2
commit d140dd4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/resources/js/components/fieldtypes/SlugFieldtype.vue b/resources/js/components/fieldtypes/SlugFieldtype.vue
@@ -5,6 +5,7 @@
         :from="source"
         :separator="separator"
         :language="language"
+        :async="config.async"
         @slugifying="syncing = true"
         @slugified="syncing = false"
         v-model="slug"

diff --git a/resources/js/components/slugs/Slugify.vue b/resources/js/components/slugs/Slugify.vue
@@ -17,12 +17,19 @@ export default {
         enabled: {
             type: Boolean,
             default: true
+        },
+        async: {
+            type: Boolean,
+            default: true
         }
     },
 
     data() {
+        let slugifier = this.$slug.in(this.language).separatedBy(this.separator);
+        if (this.async) slugifier.async();
+
         return {
-            slugifier: this.$slug.async().in(this.language).separatedBy(this.separator),
+            slugifier,
             slug: null,
             shouldSlugify: this.enabled && !this.to
         }
@@ -74,6 +81,14 @@ export default {
         },
 
         slugify() {
+            if (! this.async) {
+                return new Promise((resolve, reject) => {
+                    const slug = this.slugifier.create(this.from);
+                    this.slug = slug;
+                    resolve(slug);
+                });
+            }
+
             return new Promise((resolve, reject) => {
                 this.$emit('slugifying');
                 this.slugifier.create(this.from).then(slug => {

diff --git a/src/Fields/Field.php b/src/Fields/Field.php
@@ -486,6 +486,7 @@ public static function commonFieldOptions(): Fields
                 'instructions' => __('statamic::messages.fields_handle_instructions'),
                 'type' => 'slug',
                 'from' => 'display',
+                'async' => false,
                 'separator' => '_',
                 'validate' => [
                     'required',