[Feature Request] Slots for v-textarea and v-text-field

Problem to solve

This can be used to provide users with a quick way to input data without cluttering the ui. You are able to tag notes using #Important, make links clickable within text fields and highlight special search terms like assigned-to:me in a search inputs.

Proposed solution

Example:

<template>
  <v-text-field v-model="text" :slots="slots">
    <template slot="days" slot-scope="{ match, removeMatch, deleteText }">
      <!-- removeMatch keeps the text but doesn't render the slot in its place (it will match again if the matched text changes (eg appending a "s" to "day")) -->
      <v-chip @click="removeMatch">
        <v-icon left>mdi-calendar-clock</v-icon>
        <!-- match is the return value of RegExp.exec() -->
        {{match[0]}}
        <!-- deleteText removes the matched text -->
        <v-icon right @click.stop="deleteText">mdi-close</v-icon>
      </v-chip>
    </template>
  </v-text-field>
</template>
<script>
export default {
  data() {
    return {
      text: "",
      slots: [
        {
          // this slot will replace matched text with the component provided via slots ...
          match: /\bin\s+(\d+)\sdays?\b/,
          // ... only if this method returns true
          verify(match) {
            return Number(match[1]) < 100;
          },
          // the name of the slot
          name: "days",
          // limits the number of matches; if the user were to input "in 1 day" twice, only the latter occurence will be matched
          limit: 1,
        },
      ],
    };
  },
};
</script>

The result should look like this example from todoist:

removeMatch should work like this :

There is an example with <a :href="match[0]">{{match[0]}}</a> as template:

Another example with a list of available values:

For this to work, an additional method getItems has to be provided. The list itself should be similar to v-combobox.

<script>
export default {
  data() {
    return {
      text: "",
      projects: [
        // value will be inserted upon click, text will be displayed in the list (if no list-item slot is provided)
        { text: "Inbox", value: "#Inbox" },
        { text: "School", value: "#School" },
        { text: "Demo Project", value: "#Demo Project" },
      ],
      slots: [
        {
          match: /\b#([\w\s])+\b/i,
          verify(match) {
            // only render the chip if the project exists
            return !!this.projects.find(
              (project) => project.value === match[1],
            );
          },
          // all items to display in the list, can be customized using the list-item slot
          getItems() {
            return new Promise((resolve) => {
              setTimeout(() => {
                resolve(this.projects);
              }, 500);
            });
          },
          name: "project",
          // no limit
          limit: 0,
        },
      ],
    };
  },
};
</script>

[lukas-tr]

@lukas-tr Mind sharing codepen examples?

https://eager-elion-d7d275.netlify.app/ https://github.com/lukas-tr/vuetify-tiptap-example

[Liwoj]

@KaelWD Sounds cool. Can you direct us to some example or documentation please ?