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

[lukas-tr]

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>

[Franco-gario]

This, i need this.

Did you find any workaround to achieve what you are showing in the gifs?

[lukas-tr]

This, i need this.

Did you find any workaround to achieve what you are showing in the gifs?

No, the gifs are recorded from https://todoist.com

[Franco-gario]

This, i need this.
Did you find any workaround to achieve what you are showing in the gifs?

No, the gifs are recorded from https://todoist.com

Thank you for you quick answer.
Unfortunately I could not find a workaround either.
Let's hope they implement it!

Regards

[denmasyarikin]

I need it too for google place autocomplete, any suggestion?

[lukas-tr]

I need it too for google place autocomplete, any suggestion?

Seems like https://vuetifyjs.com/en/components/autocompletes/#asynchronous-items might do the job.

[lukas-tr]

We ended up using tiptap in the meantime. https://tiptap.dev/suggestions

[lukas-tr]

Might be a little late, but tiptap allows you to render arbitrary Vue components within the editor. Together with a slightly modified version of @tiptap/extension-mention and some input rules, I can create exactly what I showed in the gifs. It's more work to integrate than my proposed solution, but on the other hand it's way more customizable.

Demos
https://www.tiptap.dev/examples/interactivity
https://www.tiptap.dev/guide/node-views/

[KaelWD]

I think we'll just recommend using tiptap for this, it's a pretty complex feature and seems to have been done well already. In Vuetify 3 it should be fairly easy to integrate with the v-input styles: #13554

[lukas-tr]

@lukas-tr Mind sharing codepen examples?

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

[Shinigami92]

I also need this feature, but the tiptap example doesn't fulfill my needs due to it is not a v-text-field anymore. But I need all the other stuff like :rules, :placeholder, outlined, :counter ...
Also I just need an input, not a textarea.

[KaelWD]

@Shinigami92 Vuetify 3 allows you to use tiptap but with all the v-text-field styles. There isn't a good example currently but you would put an unstyled tiptap inside VField inside VInput.
https://vuetifyjs.com/en/components/inputs/

[Liwoj]

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