Tag 标签 ​

<template>
  <div class="mb-4">
    <w-title>默认样式</w-title>
    <div class="flex gap-2">
      <w-tag type="primary" hit>标签 1</w-tag>
      <w-tag type="success">标签 2</w-tag>
      <w-tag type="info">标签 3</w-tag>
      <w-tag type="warning">标签 4</w-tag>
      <w-tag type="danger">标签 5</w-tag>
      <w-tag type="error">标签 5</w-tag>
    </div>
    <w-divider />
  </div>
  <div class="mb-4">
    <w-title
      >Tag 组件提供了三个不同的主题：dark、light 和 plain。 通过设置 effect
      属性来改变主题，默认为 light。</w-title
    >
    <div class="flex gap-2 mb-4">
      <w-tag type="primary" effect="dark">标签 1</w-tag>
      <w-tag type="success" effect="dark">标签 2</w-tag>
      <w-tag type="info" effect="dark">标签 3</w-tag>
      <w-tag type="warning" effect="dark">标签 4</w-tag>
      <w-tag type="danger" effect="dark">标签 5</w-tag>
    </div>
    <div class="flex gap-2">
      <w-tag type="primary" effect="plain">标签 1</w-tag>
      <w-tag type="success" effect="plain">标签 2</w-tag>
      <w-tag type="info" effect="plain">标签 3</w-tag>
      <w-tag type="warning" effect="plain">标签 4</w-tag>
      <w-tag type="danger" effect="plain">标签 5</w-tag>
    </div>
    <w-divider />
  </div>
  <div class="mb-4">
    <w-title>边框描边：hit</w-title>
    <div class="flex gap-2">
      <w-tag type="primary" hit>标签 1</w-tag>
      <w-tag type="success" hit>标签 2</w-tag>
      <w-tag type="info" hit>标签 3</w-tag>
      <w-tag type="warning" hit>标签 4</w-tag>
      <w-tag type="danger" hit>标签 5</w-tag>
    </div>
    <w-divider />
  </div>
  <div class="mb-4">
    <w-title>圆形标签：round</w-title>
    <div class="flex gap-2">
      <w-tag type="primary" round>标签 1</w-tag>
      <w-tag type="success" round>标签 2</w-tag>
      <w-tag type="info" round>标签 3</w-tag>
      <w-tag type="warning" round>标签 4</w-tag>
      <w-tag type="danger" round>标签 5</w-tag>
    </div>
    <w-divider />
  </div>
  <div class="mb-4">
    <w-title>尺寸：large、default、small、mini</w-title>
    <div class="flex gap-2">
      <w-tag type="primary" size="large">标签 1</w-tag>
      <w-tag type="success">标签 2</w-tag>
      <w-tag type="info" size="small">标签 3</w-tag>
      <w-tag type="warning" size="mini">标签 4</w-tag>
    </div>
  </div>
</template>

<template>
  <div class="mb-4">
    <w-title>默认样式</w-title>
    <div class="flex gap-2">
      <w-check-tag>默认</w-check-tag>
      <w-check-tag type="primary">主要</w-check-tag>
      <w-check-tag type="success">成功</w-check-tag>
    </div>
    <w-divider />
  </div>
  <div class="mb-4">
    <w-title>默认样式</w-title>
    <div class="flex gap-2">
      <w-check-tag :checked="checked" @change="onChange"
        >点我切换试试</w-check-tag
      >
      <w-check-tag :checked="checked1" type="primary" @change="onChange1">
        Tag 1
      </w-check-tag>
      <w-check-tag :checked="checked2" type="success" @change="onChange2">
        Tag 2
      </w-check-tag>
      <w-check-tag :checked="checked3" type="info" @change="onChange3">
        Tag 3
      </w-check-tag>
      <w-check-tag :checked="checked4" type="warning" @change="onChange4">
        Tag 4
      </w-check-tag>
      <w-check-tag :checked="checked5" type="danger" @change="onChange5">
        Tag 5
      </w-check-tag>
      <w-check-tag
        :checked="checked6"
        disabled
        type="success"
        @change="onChange6"
      >
        Tag 6
      </w-check-tag>
    </div>
    <w-divider />
  </div>

  <div class="mb-4">
    <w-title>禁用</w-title>
    <div class="flex gap-2 mb-4">
      <w-check-tag disabled>默认禁用</w-check-tag>
      <w-check-tag type="primary" disabled>主要禁用</w-check-tag>
      <w-check-tag type="success" disabled>成功禁用</w-check-tag>
      <w-check-tag type="danger" disabled>主要禁用</w-check-tag>
      <w-check-tag type="warning" disabled>成功禁用</w-check-tag>
      <w-check-tag type="info" disabled>普通禁用</w-check-tag>
    </div>
    <div class="flex gap-2">
      <w-check-tag checked disabled>选中默认禁用</w-check-tag>
      <w-check-tag checked type="primary" disabled>选中主要禁用</w-check-tag>
      <w-check-tag checked type="success" disabled>选中成功禁用</w-check-tag>
      <w-check-tag checked type="danger" disabled>选中主要禁用</w-check-tag>
      <w-check-tag checked type="warning" disabled>选中成功禁用</w-check-tag>
      <w-check-tag checked type="info" disabled>选中普通禁用</w-check-tag>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checked = ref(true)
const checked1 = ref(true)
const checked2 = ref(false)
const checked3 = ref(false)
const checked4 = ref(true)
const checked5 = ref(false)
const checked6 = ref(false)

const onChange = (status: boolean) => {
  checked.value = status
}

const onChange1 = (status: boolean) => {
  checked1.value = status
}

const onChange2 = (status: boolean) => {
  checked2.value = status
}

const onChange3 = (status: boolean) => {
  checked3.value = status
}

const onChange4 = (status: boolean) => {
  checked4.value = status
}

const onChange5 = (status: boolean) => {
  checked5.value = status
}

const onChange6 = (status: boolean) => {
  checked6.value = status
}
</script>

<template>
  <div class="flex gap-2">
    <w-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
      {{ tag.name }}
    </w-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TagProps } from 'win-design-next'

interface TagsItem {
  name: string
  type: TagProps['type']
}

const tags = ref<TagsItem[]>([
  { name: 'Tag 1', type: 'primary' },
  { name: 'Tag 2', type: 'success' },
  { name: 'Tag 3', type: 'info' },
  { name: 'Tag 4', type: 'warning' },
  { name: 'Tag 5', type: 'danger' },
])
</script>

<template>
  <div class="flex gap-2" style="flex-wrap: wrap">
    <w-tag
      v-for="tag in dynamicTags"
      :key="tag"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)"
    >
      {{ tag }}
    </w-tag>
    <w-input
      v-if="inputVisible"
      ref="InputRef"
      v-model="inputValue"
      class="w-20"
      size="small"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <w-button v-else class="button-new-tag" size="small" @click="showInput">
      + New Tag
    </w-button>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { WInput } from 'win-design-next'
import type { InputInstance } from 'win-design-next'

const inputValue = ref('')
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const InputRef = ref<InputInstance>()

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>