Vue directive modifier syntax lacking pattern matching

[tmorehouse]

In our project, we have directives that used modifiers, but are not guaranteed to be an exact string. Some modifiers are words, some could a string of digits (supplied by the user), and others might be a combination of letters and digits:

v-my-directive.click.d100.o1234

Where we allow the user to supply an arbitrary value (say after .d###, to specify a delay value).

There appears to be no way to specify that a modifier could match a regular expression. It only appears that #definitions/name can only be an exact string. Perhaps a new type could be created for directive modifiers?

Also, we allow passing element IDs via modifers. Since we do not know the user's IDs ahead of time, is it possible to define wildcard modifiers?

[piotrtomiak]

@tmorehouse Thanks for looking into this so quickly! Current state of planned support is to provide code completion, but without a validation for modifiers. The idea of having regular expressions for validation of modifiers is really nice and I will think on how to modify current schema to allow this.

[tmorehouse]

A similar issue arrives for scoped slot names that are not known until run-time. In the case of <b-table>, the slot names are derivations of the column field names (i.e. head(fieldName), cell(fieldName), etc), which are dependent upon user supplied data.

[piotrtomiak]

Ok, this problem is harder to solve I think. I'll have and look and we'll see if there is anything we could do about it.

[piotrtomiak]

How about simply replacing name with pattern:

"vue-modifiers": [
  {
    "pattern": "d[0-9]+"
    "description": "Specifies delay in milliseconds after which action is executed. E.g. `d100`"
  }
]

and

"slots"/"vue-scoped-slots": [
  {
    "pattern": "cell\([a-zA-Z_$][a-zA-Z_$0-9]*\)"
    "description": "..."
  }
]

Would that be sufficient from your perspective?

As far as element IDs are concerned, if those are HTML elements we could add reference property with XPath matching HTML element IDs. Did I got it right?

[tmorehouse]

Element IDs could be anything (as long as it is a valid HTML ID).

Pattern as an alternative to name would be good (name is also still handy).

It also depends on how it is presented to the user... either as a pattern or name, and if auto-complete is available or just a prompt of the possible arguments

[piotrtomiak]

Hmm, if we leave the name than I can imagine following code completion item:

cell({key}) *cell\([a-zA-Z$][a-zA-Z$0-9]**\)

Which upon completion results in (| shows caret position):

v-slot:cell(|)=""

[tmorehouse]

That might work well...

[piotrtomiak]

Web-types schema has been updated.