[5.x] Improved JS slugs

resources/js/app.js

@@ -67,6 +67,7 @@ Vue.prototype.$echo = Statamic.$echo;
 Vue.prototype.$bard = Statamic.$bard;
 Vue.prototype.$keys = Statamic.$keys;
 Vue.prototype.$reveal = Statamic.$reveal;
+Vue.prototype.$slug = Statamic.$slug;
 
 import Moment from 'moment';
 window.moment = Vue.moment = Vue.prototype.$moment = Moment;

resources/js/bootstrap/components.js

@@ -43,7 +43,7 @@ import LoadingGraphic from '../components/LoadingGraphic.vue';
 import DropdownList from '../components/DropdownList.vue';
 import DropdownItem from '../components/DropdownItem.vue';
 import ValidationErrors from '../components/ValidationErrors.vue';
-import Slugify from '../components/Slugify.vue';
+import Slugify from '../components/slugs/Slugify.vue';
 import ElementContainer from '../components/ElementContainer.vue';
 import Avatar from '../components/Avatar.vue';
 import Breadcrumb from '../components/Breadcrumb.vue';

resources/js/bootstrap/globals.js

@@ -120,4 +120,12 @@ export function closestVm(el, name) {
         if (!name || name === vm.$options.name) return vm;
         vm = vm.$parent;
     }
-}
+}
+
+export function str_slug(string) {
+    return Statamic.$slug.create(string);
+}
+
+export function snake_case(string) {
+    return Statamic.$slug.separatedBy('_').create(string);
+}

resources/js/components/Statamic.js

@@ -7,6 +7,7 @@ import Reveal from './Reveal';
 import Components from './Components';
 import FieldConditions from './FieldConditions';
 import Callbacks from './Callbacks';
+import Slugs from './slugs/Manager.js';
 const echo = new Echo;
 const bard = new Bard;
 const keys = new Keys;
@@ -15,6 +16,7 @@ const reveal = new Reveal;
 const components = new Components;
 const conditions = new FieldConditions;
 const callbacks = new Callbacks;
+const slug = new Slugs;
 
 export default new Vue({
     data() {
@@ -63,6 +65,10 @@ export default new Vue({
             return keys;
         },
 
+        $slug() {
+            return slug;
+        },
+
         user() {
             return this.$config.get('user');
         }

resources/js/components/blueprints/Section.vue

@@ -148,7 +148,7 @@ export default {
 
         'editingSection.display': function(display) {
             if (this.editingSection && this.handleSyncedWithDisplay) {
-                this.editingSection.handle = this.$slugify(display, '_');
+                this.editingSection.handle = snake_case(display);
             }
         }
 

resources/js/components/blueprints/Sections.vue

@@ -110,7 +110,7 @@ export default {
                 display: this.newSectionText,
                 instructions: null,
                 icon: null,
-                handle: this.$slugify(this.newSectionText, '_'),
+                handle: snake_case(this.newSectionText),
                 fields: []
             };
 

resources/js/components/blueprints/Tab.vue

@@ -152,7 +152,7 @@ export default {
 
         fieldUpdated(handle, value) {
             if (handle === 'display' && this.handleSyncedWithDisplay) {
-                this.handle = this.$slugify(value, '_');
+                this.handle = snake_case(value);
             }
 
             if (handle === 'handle') {

resources/js/components/blueprints/Tabs.vue

@@ -280,7 +280,7 @@ export default {
             this.tabs.push({
                 _id: id,
                 display: this.newTabText,
-                handle: this.$slugify(this.newTabText, '_'),
+                handle: snake_case(this.newTabText),
                 instructions: null,
                 icon: null,
                 sections: []

resources/js/components/collections/CreateForm.vue

@@ -15,7 +15,10 @@
             </div>
             <div class="mb-4">
                 <label class="font-bold text-base mb-1" for="name">{{ __('Handle') }}</label>
-                <input type="text" v-model="handle" class="input-text" tabindex="2">
+                <div class="relative">
+                    <loading-graphic inline text="" v-if="slug.busy" class="absolute top-3 right-3"/>
+                    <input type="text" v-model="handle" class="input-text" tabindex="2">
+                </div>
                 <div class="text-2xs text-gray-600 mt-2 flex items-center">
                     {{ __('messages.collection_configure_handle_instructions') }}
                 </div>
@@ -43,19 +46,20 @@ export default {
     data() {
         return {
             title: null,
-            handle: null
+            handle: null,
+            slug: this.$slug.async().separatedBy('_'),
         }
     },
 
     watch: {
-        'title': function(val) {
-            this.handle = this.$slugify(val, '_');
+        title(title) {
+            this.slug.create(title).then(slug => this.handle = slug);
         }
     },
 
     computed: {
         canSubmit() {
-            return Boolean(this.title && this.handle);
+            return Boolean(this.title && this.handle && !this.slug.busy);
         },
     },
 

resources/js/components/data-list/FilterPresets.vue

@@ -101,7 +101,7 @@ export default {
         },
 
         savingPresetSlug() {
-            return this.$slugify(this.savingPresetName, '_');
+            return snake_case(this.savingPresetName);
         },
     },
 

resources/js/components/data-list/Filters.vue

@@ -208,7 +208,7 @@ export default {
         },
 
         savingPresetHandle() {
-            return this.$slugify(this.savingPresetName, '_');
+            return snake_case(this.savingPresetName);
         },
 
         isUpdatingPreset() {

resources/js/components/fieldsets/CreateForm.vue

@@ -15,7 +15,10 @@
             </div>
             <div class="mb-4">
                 <label class="font-bold text-base mb-1" for="name">{{ __('Handle') }}</label>
-                <input type="text" v-model="handle" class="input-text" tabindex="2">
+                <div class="relative">
+                    <loading-graphic inline text="" v-if="slug.busy" class="absolute top-3 right-3"/>
+                    <input type="text" v-model="handle" class="input-text" tabindex="2">
+                </div>
                 <div class="text-2xs text-gray-600 mt-2 flex items-center">
                     {{ __('messages.fieldsets_handle_instructions') }}
                 </div>
@@ -43,19 +46,20 @@ export default {
     data() {
         return {
             title: null,
-            handle: null
+            handle: null,
+            slug: this.$slug.async().separatedBy('_'),
         }
     },
 
     watch: {
-        'title': function(val) {
-            this.handle = this.$slugify(val, '_');
+        title(title) {
+            this.slug.create(title).then(slug => this.handle = slug);
         }
     },
 
     computed: {
         canSubmit() {
-            return Boolean(this.title && this.handle);
+            return Boolean(this.title && this.handle && !this.slug.busy);
         },
     },
 

resources/js/components/fieldtypes/SlugFieldtype.vue

@@ -5,6 +5,8 @@
         :from="source"
         :separator="separator"
         :language="language"
+        @slugifying="syncing = true"
+        @slugified="syncing = false"
         v-model="slug"
     >
         <div>
@@ -21,7 +23,8 @@
             >
                 <template v-slot:append v-if="config.show_regenerate">
                     <button class="input-group-append items-center flex" @click="sync" v-tooltip="__('Regenerate from: :field', { 'field': config.from })">
-                        <svg-icon name="light/synchronize" class="w-5 h-5" />
+                        <svg-icon name="light/synchronize" class="w-5 h-5" v-show="!syncing" />
+                        <div class="w-5 h-5" v-show="syncing"><loading-graphic inline text="" class="mt-0.5 ml-0.5" /></div>
                     </button>
                 </template>
             </text-input>
@@ -41,7 +44,8 @@ export default {
     data() {
         return {
             slug: this.value,
-            generate: this.config.generate
+            generate: this.config.generate,
+            syncing: false,
         }
     },
 

resources/js/components/forms/CreateForm.vue

@@ -15,7 +15,10 @@
             </div>
             <div class="mb-4">
                 <label class="font-bold text-base mb-1" for="name">{{ __('Handle') }}</label>
-                <input type="text" v-model="handle" class="input-text" tabindex="2">
+                <div class="relative">
+                    <loading-graphic inline text="" v-if="slug.busy" class="absolute top-3 right-3"/>
+                    <input type="text" v-model="handle" class="input-text" tabindex="2">
+                </div>
                 <div class="text-2xs text-gray-600 mt-2 flex items-center">
                     {{ __('messages.form_configure_handle_instructions') }}
                 </div>
@@ -43,19 +46,20 @@ export default {
     data() {
         return {
             title: null,
-            handle: null
+            handle: null,
+            slug: this.$slug.async().separatedBy('_'),
         }
     },
 
     watch: {
-        'title': function(val) {
-            this.handle = this.$slugify(val, '_');
+        title(title) {
+            this.slug.create(title).then(slug => this.handle = slug);
         }
     },
 
     computed: {
         canSubmit() {
-            return Boolean(this.title && this.handle);
+            return Boolean(this.title && this.handle && !this.slug.busy);
         },
     },
 

resources/js/components/globals/Create.vue

@@ -15,7 +15,10 @@
             </div>
             <div class="mb-4">
                 <label class="font-bold text-base mb-1" for="name">{{ __('Handle') }}</label>
-                <input type="text" v-model="handle" class="input-text" tabindex="2">
+                <div class="relative">
+                    <loading-graphic inline text="" v-if="slug.busy" class="absolute top-3 right-3"/>
+                    <input type="text" v-model="handle" class="input-text" tabindex="2">
+                </div>
                 <div class="text-2xs text-gray-600 mt-2 flex items-center">
                     {{ __('messages.globals_configure_handle_instructions') }}
                 </div>
@@ -42,19 +45,20 @@ export default {
     data() {
         return {
             title: null,
-            handle: null
+            handle: null,
+            slug: this.$slug.async().separatedBy('_'),
         }
     },
 
     watch: {
-        'title': function(val) {
-            this.handle = this.$slugify(val, '_');
+        title(title) {
+            this.slug.create(title).then(slug => this.handle = slug);
         }
     },
 
     computed: {
         canSubmit() {
-            return Boolean(this.title && this.handle);
+            return Boolean(this.title && this.handle && !this.slug.busy);
         },
     },