diff --git a/resources/js/components/fieldtypes/SlugFieldtype.vue b/resources/js/components/fieldtypes/SlugFieldtype.vue index f7581998af..8fee9b5ce7 100644 --- 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 index 12e1b78286..4c32be80d6 100644 --- 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 index 04895d1624..a2f9445006 100644 --- 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',