[5.x] Fix hyphens in JS slugs

[duncanmcclean]

This pull request fixes an issue where hyphens weren't being handled correctly in JS slugs.

Fixes #10533.

[jasonvarga]

This would make dashes never work. It's perfectly fine for slugs in general to have dashes. Usually that's only what should be used.

What's happening in the referenced issue is that the validation wants a handle which doesn't allow dashes.

But we are only telling it to use _ as a separator.

cms/src/Fields/Field.php

Line 494 in a074cb4

'separator' => '_',

The JS still allows you to manually type dashes. They're valid in PHP too:

Str::snake('foo bar-baz'); // foo_bar-baz

What we probably need is a new method that enforces changing dashes to underscores. Maybe something like:

Statamic.$slug.separatedBy('_').withReplacements({'-': '_'}).create(string);

replacements:
  '-': '_'

cms/resources/js/components/fieldtypes/SlugFieldtype.vue

Line 6 in d140dd4

:separator="separator"

The withReplacements could pass that object into the custom like you've done in this PR.

[duncanmcclean]

Good suggestion!

I've reverted my previous fix and instead went ahead with the replacements approach, which I've implemented on both the PHP & JS sides.

[jasonvarga]

Why'd this need to be removed?

[duncanmcclean]

I think I was thinking it might not be needed after these changes...

However, on second thought, I'll add it back since not all slug/handle fields specify replacements. 👍

[jasonvarga]

I realized (after you made all my requested changes 😬) that in PHP's Str::slug() if you were to use _ as a separator, JSON-LD would be converted to json-ld automatically.

So, I reverted the withReplacements stuff and instead just make dashes convert to the separator, when the separator isn't a dash. It matches PHP.

Everything you did was great and worked well, but I don't think we need it. Thank you and sorry!