Mentions

<script setup lang="ts">
import { Mentions } from "@bysages/vue";
import { ref } from "vue";

const text = ref("");

const teammates = [
  { label: "Lin Hua", value: "lin" },
  { label: "Mei Chen", value: "mei" },
  { label: "Hong Wei", value: "hong" },
  { label: "Yan Wu", value: "yan" },
  { label: "Zhou Lan", value: "zhou" },
];
</script>

<template>
  <div class="w-full">
    <Mentions
      v-model="text"
      :items="teammates"
      placeholder="Describe the task and @who should read it…"
    />
    <p role="status" class="mt-4 text-sm text-tertiary">
      {{ text ? `Field holds: ${text}` : "The field is empty." }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { Mentions } from "@bysages/vue";
import { ref } from "vue";

const text = ref("Review with #");

const reviews = [
  { label: "Design review", value: "design-review" },
  { label: "Editorial review", value: "editorial-review" },
  { label: "Civic review", value: "civic-review" },
];
</script>

<template>
  <!-- A different trigger character, for systems where @ already means
       something else. -->
  <Mentions
    v-model="text"
    :items="reviews"
    trigger="#"
    placeholder="Tag a review…"
    class="w-full"
  />
</template>

<script setup lang="ts">
import { Field, Mentions } from "@bysages/vue";
import { ref } from "vue";

const text = ref("");

const teammates = [
  { label: "Lin Hua", value: "lin" },
  { label: "Mei Chen", value: "mei" },
  { label: "Hong Wei", value: "hong" },
  { label: "Yan Wu", value: "yan" },
  { label: "Zhou Lan", value: "zhou" },
];
</script>

<template>
  <!-- Inside a Field.Root the field picks up the label wiring and the
       invalid state on its own. -->
  <Field.Root invalid class="w-full">
    <Field.Label>Describe the task</Field.Label>
    <Mentions
      v-model="text"
      :items="teammates"
      placeholder="Describe the task and @who should read it…"
    />
    <Field.ErrorText>Every task needs a body before it files.</Field.ErrorText>
  </Field.Root>
</template>