add tag

components/index.js

@@ -17,3 +17,5 @@ export { default as Pagination } from './pagination'
 export { default as Row } from './grid/Row'
 
 export { default as Col } from './grid/Col'
+
+export { default as Tag } from './tag'

components/style.js

@@ -3,3 +3,4 @@ import './icon/style'
 import './radio/style'
 import './checkbox/style'
 import './grid/style'
+import './tag/style'

components/tag/CheckableTag.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="classes" @click="handleClick">
+    <slot />
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'CheckableTag',
+  model: {
+    prop: 'checked',
+  },
+  props: {
+    prefixCls: {
+      default: 'ant-tag',
+      type: String,
+    },
+    checked: Boolean,
+  },
+  computed: {
+    classes () {
+      const { prefixCls, checked } = this
+      return {
+        [`${prefixCls}`]: true,
+        [`${prefixCls}-checkable`]: true,
+        [`${prefixCls}-checkable-checked`]: checked,
+      }
+    },
+  },
+  methods: {
+    handleClick () {
+      const { checked } = this
+      this.$emit('input', !checked)
+      this.$emit('change', !checked)
+    },
+  },
+}
+</script>

components/tag/Tag.vue

@@ -0,0 +1,77 @@
+<template>
+  <transition
+    :name="`${prefixCls}-zoom`"
+    appear
+    @after-leave="animationEnd"
+  >
+    <div
+      v-if="!closed"
+      :class="classes"
+      :style="tagStyle"
+    >
+      <span :class="`${prefixCls}-text`">
+        <slot></slot>
+      </span>
+      <Icon v-if="closable" type="cross" @click="close" />
+    </div>
+  </transition>
+</template>
+<script>
+import Icon from '../icon'
+
+export default {
+  name: 'Tag',
+  components: { Icon },
+  props: {
+    prefixCls: {
+      default: 'ant-tag',
+      type: String,
+    },
+    color: String,
+    closable: Boolean,
+    styles: {
+      default: () => ({}),
+      type: Object,
+    },
+  },
+  data () {
+    const isPresetColor = (color) => {
+      if (!color) { return false }
+      return /^(pink|red|yellow|orange|cyan|green|blue|purple)(-inverse)?$/.test(color)
+    }
+    return {
+      closed: false,
+      isPresetColor: isPresetColor(this.color),
+    }
+  },
+  computed: {
+    classes () {
+      const { prefixCls, color, isPresetColor } = this
+      return {
+        [`${prefixCls}`]: true,
+        [`${prefixCls}-${color}`]: isPresetColor,
+        [`${prefixCls}-has-color`]: (color && !isPresetColor),
+      }
+    },
+    tagStyle () {
+      const { color, styles, isPresetColor } = this
+      return {
+        backgroundColor: (color && !isPresetColor) ? color : null,
+        ...styles,
+      }
+    },
+  },
+  methods: {
+    animationEnd () {
+      this.$emit('after-close')
+    },
+    close (e) {
+      this.$emit('close', e)
+      if (e.defaultPrevented) {
+        return
+      }
+      this.closed = true
+    },
+  },
+}
+</script>

components/tag/demo/basic.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <Tag>Tag 1</Tag>
+    <Tag><a href="https://github.com/vueComponent/ant-design">Link</a></Tag>
+    <Tag closable @close="log">Tag 2</Tag>
+    <Tag closable @close="preventDefault">Prevent Default</Tag>
+  </div>
+</template>
+<script>
+import { Tag } from 'antd'
+export default {
+  methods: {
+    log (e) {
+      console.log(e)
+    },
+    preventDefault (e) {
+      e.preventDefault()
+      console.log('Clicked! But prevent default.')
+    },
+  },
+  components: {
+    Tag,
+  },
+}
+</script>

components/tag/demo/checkable.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <CheckableTag v-model="checked1" @change="handleChange">Tag1</CheckableTag>
+    <CheckableTag v-model="checked2" @change="handleChange">Tag2</CheckableTag>
+    <CheckableTag v-model="checked3" @change="handleChange">Tag3</CheckableTag>
+  </div>
+</template>
+<script>
+import { Tag } from 'antd'
+export default {
+  data () {
+    return {
+      checked1: false,
+      checked2: false,
+      checked3: false,
+    }
+  },
+  methods: {
+    handleChange (checked) {
+      console.log(checked)
+    },
+  },
+  components: {
+    Tag,
+    CheckableTag: Tag.CheckableTag,
+  },
+}
+</script>

components/tag/demo/colorful.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h4 style="margin-bottom: 16px">Presets:</h4>
+    <div>
+      <Tag color="pink">pink</Tag>
+      <Tag color="red">red</Tag>
+      <Tag color="orange">orange</Tag>
+      <Tag color="green">green</Tag>
+      <Tag color="cyan">cyan</Tag>
+      <Tag color="blue">blue</Tag>
+      <Tag color="purple">purple</Tag>
+    </div>
+    <h4 style="margin: '16px 0'">Custom:</h4>
+    <div>
+      <Tag color="#f50">#f50</Tag>
+      <Tag color="#2db7f5">#2db7f5</Tag>
+      <Tag color="#87d068">#87d068</Tag>
+      <Tag color="#108ee9">#108ee9</Tag>
+    </div>
+  </div>
+</template>
+<script>
+import { Tag } from 'antd'
+export default {
+  components: {
+    Tag,
+  },
+}
+</script>

components/tag/demo/control.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <template v-for="(tag, index) in tags">
+      <ToolTip v-if="tag.length > 20" :key="tag" :title="tag">
+        <Tag :key="tag" :closable="index !== 0" @after-close="() => handleClose(tag)">
+          {{`${tag.slice(0, 20)}...`}}
+        </Tag>
+      </ToolTip>
+      <Tag v-else :key="tag" :closable="index !== 0" @after-close="() => handleClose(tag)">
+        {{tag}}
+      </Tag>
+    </template>
+    <Input
+      v-if="inputVisible"
+      ref="input"
+      type="text"
+      size="small"
+      :style="{ width: 78 }"
+      :value="inputValue"
+      @change="handleInputChange"
+      @blur="handleInputConfirm"
+      @keyup.enter="handleInputConfirm"
+    />
+    <AntButton v-else size="small" type="dashed" @click="showInput">+ New Tag</AntButton>
+  </div>
+</template>
+<script>
+import { Tag, Button, ToolTip } from 'antd'
+export default {
+  data () {
+    return {
+      tags: ['Unremovable', 'Tag 2', 'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'],
+      inputVisible: false,
+      inputValue: '',
+    }
+  },
+  methods: {
+    handleClose (removedTag) {
+      const tags = this.tags.filter(tag => tag !== removedTag)
+      console.log(tags)
+      this.tags = tags
+    },
+
+    showInput () {
+      this.inputVisible = true
+      this.$nextTick(function () {
+        this.$refs.input.focus()
+      })
+    },
+
+    handleInputChange (e) {
+      this.inputValue = e.target.value
+    },
+
+    handleInputConfirm () {
+      const inputValue = this.inputValue
+      let tags = this.tags
+      if (inputValue && tags.indexOf(inputValue) === -1) {
+        tags = [...tags, inputValue]
+      }
+      console.log(tags)
+      Object.assign(this, {
+        tags,
+        inputVisible: false,
+        inputValue: '',
+      })
+    },
+  },
+  components: {
+    Tag,
+    AntButton: Button,
+    ToolTip,
+  },
+}
+</script>

components/tag/demo/hot-tags.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <strong :style="{ marginRight: 8 }">Categories:</strong>
+    <template v-for=" tag in tags">
+      <CheckableTag
+        :key="tag"
+        :checked="selectedTags.indexOf(tag) > -1"
+        @change="(checked) => handleChange(tag, checked)"
+      >
+        {{tag}}
+      </CheckableTag>
+    </template>
+  </div>
+</template>
+<script>
+import { Tag } from 'antd'
+export default {
+  data () {
+    return {
+      checked1: false,
+      checked2: false,
+      checked3: false,
+      tags: ['Movies', 'Books', 'Music', 'Sports'],
+      selectedTags: [],
+    }
+  },
+  methods: {
+    handleChange (tag, checked) {
+      const { selectedTags } = this
+      const nextSelectedTags = checked
+        ? [...selectedTags, tag]
+        : selectedTags.filter(t => t !== tag)
+      console.log('You are interested in: ', nextSelectedTags)
+      this.selectedTags = nextSelectedTags
+    },
+  },
+  components: {
+    Tag,
+    CheckableTag: Tag.CheckableTag,
+  },
+}
+</script>

components/tag/demo/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h1>Basic</h1>
+    <Basic />
+    <h1>Checkable</h1>
+    <Checkable />
+    <h1>Colorful</h1>
+    <Colorful />
+    <h1>Control</h1>
+    <Control />
+    <h1>HotTags</h1>
+    <HotTags />
+  </div>
+</template>
+<script>
+import Basic from './basic'
+import Checkable from './checkable'
+import Colorful from './colorful'
+import Control from './control'
+import HotTags from './hot-tags'
+export default {
+  components: {
+    Basic,
+    Checkable,
+    Colorful,
+    Control,
+    HotTags,
+  },
+}
+</script>

components/tag/index.js

@@ -0,0 +1,6 @@
+import Tag from './Tag.vue'
+import CheckableTag from './CheckableTag.vue'
+
+Tag.CheckableTag = CheckableTag
+export default Tag
+

components/tag/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'

components/tag/style/index.less

@@ -0,0 +1,122 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@tag-prefix-cls: ~"@{ant-prefix}-tag";
+
+.@{tag-prefix-cls} {
+  display: inline-block;
+  line-height: 20px;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: @border-radius-base;
+  border: @border-width-base @border-style-base @border-color-split;
+  background: @tag-default-bg;
+  font-size: @tag-font-size;
+  transition: all 0.3s @ease-out;
+  opacity: 1;
+  margin-right: 8px;
+  cursor: pointer;
+  white-space: nowrap;
+
+  &:hover {
+    opacity: 0.85;
+  }
+
+  &,
+  a,
+  a:hover {
+    color: @tag-default-color;
+  }
+
+  &-text {
+    a:first-child:last-child {
+      display: inline-block;
+      margin: 0 -8px;
+      padding: 0 8px;
+    }
+  }
+
+  .@{iconfont-css-prefix}-cross {
+    .iconfont-size-under-12px(10px);
+    cursor: pointer;
+    font-weight: bold;
+    margin-left: 3px;
+    transition: all 0.3s @ease-out;
+    opacity: 0.66;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &-has-color {
+    border-color: transparent;
+    &,
+    a,
+    a:hover,
+    .@{iconfont-css-prefix}-cross,
+    .@{iconfont-css-prefix}-cross:hover {
+      color: #fff;
+    }
+  }
+
+  &-checkable {
+    background-color: transparent;
+    border-color: transparent;
+    &:not(&-checked):hover {
+      color: @primary-color;
+    }
+    &:active,
+    &-checked {
+      color: #fff;
+    }
+    &-checked {
+      background-color: @primary-6;
+    }
+    &:active {
+      background-color: @primary-7;
+    }
+  }
+
+  &-close {
+    width: 0 !important;
+    padding: 0;
+    margin: 0;
+  }
+
+  &-zoom-enter,
+  &-zoom-enter-active {
+    animation: antFadeIn 0.2s @ease-in-out-circ;
+    animation-fill-mode: both;
+  }
+
+  &-zoom-leave-active {
+    animation: antZoomOut 0.3s @ease-in-out-circ;
+    animation-fill-mode: both;
+    width: 0 !important;
+    padding: 0;
+    margin: 0;
+  }
+
+  @colors: pink, red, orange, yellow, cyan, green, blue, purple;
+
+  // mixin to iterate over colors and create CSS class for each one
+  .make-color-classes(@i: length(@colors)) when (@i > 0) {
+    .make-color-classes(@i - 1);
+    @color: extract(@colors, @i);
+    @lightColor: "@{color}-2";
+    @darkColor: "@{color}-6";
+    &-@{color} {
+      color: @@darkColor;
+      background: @@lightColor;
+      border-color: @@lightColor;
+    }
+    &-@{color}-inverse {
+      background: @@darkColor;
+      border-color: @@darkColor;
+      color: #fff;
+    }
+  }
+
+  .make-color-classes();
+}