InputTag ​

<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { FormItem, InputTag, Submit } from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'

const form = createForm()
const { SchemaField, SchemaArrayField } = createSchemaField({
  components: {
    FormItem,
    InputTag,
  },
})

async function log(value: any) {
  console.log(value)
}
</script>

<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaArrayField
        name="skills"
        title="Tech Tags"
        x-decorator="FormItem"
        x-component="InputTag"
        :default="['Vue', 'TypeScript']"
        :x-component-props="{
          placeholder: 'Enter text and press Enter to add',
        }"
      />
      <SchemaArrayField
        name="frameworks"
        title="Frameworks of Interest"
        x-decorator="FormItem"
        x-component="InputTag"
        :x-component-props="{
          placeholder: 'Duplicates allowed, whitespace trimmed automatically',
          saveOnBlur: false,
        }"
      />
    </SchemaField>
    <Submit style="margin-top: 12px" @submit="log">
      Submit
    </Submit>
  </FormProvider>
</template>

<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { FormItem, InputTag, Submit } from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'

const form = createForm()
const { SchemaField, SchemaArrayField } = createSchemaField({
  components: {
    FormItem,
    InputTag,
  },
})

async function log(value: any) {
  console.log(value)
}
</script>

<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaArrayField
        name="roles"
        title="Limit Count"
        x-decorator="FormItem"
        x-component="InputTag"
        :default="['Frontend', 'Experience Design']"
        :x-component-props="{
          placeholder: 'Up to 3 tags',
          max: 3,
          clearable: true,
          collapseTags: true,
          collapseTagsTooltip: true,
          maxCollapseTags: 1,
        }"
      />
      <SchemaArrayField
        name="shortcuts"
        title="Custom Trigger"
        x-decorator="FormItem"
        x-component="InputTag"
        :x-component-props="{
          placeholder: 'Press Space or enter a comma to add',
          trigger: 'Space',
          delimiter: ',',
          saveOnBlur: true,
          draggable: true,
        }"
      />
    </SchemaField>
    <Submit style="margin-top: 12px" @submit="log">
      Submit
    </Submit>
  </FormProvider>
</template>

<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { FormItem, InputTag, Submit } from '@silver-formily/element-plus'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm()

async function log(value: any) {
  console.log(value)
}
</script>

<template>
  <FormProvider :form="form">
    <Field
      name="topics"
      title="Discussion Topics"
      :decorator="[FormItem]"
      :component="[InputTag, { placeholder: 'Custom Styling', clearable: true, collapseTagsTooltip: true }]"
      :initial-value="['Formily', 'Element Plus']"
    >
      <template #prefix>
        <span class="demo-input-tag-prefix">Topic</span>
      </template>
      <template #suffix>
        <span class="demo-input-tag-suffix">Press Enter to submit</span>
      </template>
      <template #tag="{ value, index, field }">
        <span class="demo-input-tag-chip">
          {{ index + 1 }}. {{ value }}
          <small v-if="field?.title">({{ field?.title }})</small>
        </span>
      </template>
    </Field>
    <Submit style="margin-top: 16px" @submit="log">
      Submit
    </Submit>
  </FormProvider>
</template>

<style scoped>
.demo-input-tag-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  color: var(--vp-c-text-2);
}

.demo-input-tag-suffix {
  font-size: 12px;
  color: var(--vp-c-text-3);
}

.demo-input-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 999px;
  background-color: var(--vp-c-bg-soft);
  color: var(--vp-c-text-1);
}
</style>