@blueking/bkui-knowledge 0.0.1-beta.13 → 0.0.1-beta.15

package/knowledge/examples/vue2/tag-input/hover-clear-demo.vue

@@ -0,0 +1,37 @@
+<template>
+  <bk-tag-input
+    :placeholder="placeholder"
+    show-clear-only-hover
+    v-model="tags"
+    :list="list">
+  </bk-tag-input>
+  <p>请输入<code>州</code>来体验下搜索效果</p>
+</template>
+<script>
+
+import { bkTagInput } from '@'
+
+export default {
+  components: {
+    bkTagInput
+  },
+  data () {
+    return {
+      placeholder: '请输入城市',
+      tags: ['shenzhen'],
+      list: [
+        { id: 'shenzhen', name: '深圳' },
+        { id: 'guangzhou', name: '广州' },
+        { id: 'beijing', name: '北京' },
+        { id: 'shanghai', name: '上海' },
+        { id: 'hangzhou', name: '杭州' },
+        { id: 'nanjing', name: '南京' },
+        { id: 'chognqing', name: '重庆' },
+        { id: 'taibei', name: '台北' },
+        { id: 'haikou', name: '海口' }
+      ]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/tag-input/item-disabled-demo.vue

@@ -0,0 +1,34 @@
+<template>
+  <bk-tag-input
+    v-model="tagsWithDisabled"
+    :list="listWithDisabledItem"
+    :trigger="'focus'">
+  </bk-tag-input>
+</template>
+<script>
+
+import { bkTagInput } from '@'
+
+export default {
+  components: {
+    bkTagInput
+  },
+  data () {
+    return {
+      tagsWithDisabled: [],
+      listWithDisabledItem: [
+        { id: 'shenzhen', name: '深圳', disabled: true },
+        { id: 'guangzhou', name: '广州' },
+        { id: 'beijing', name: '北京', disabled: true },
+        { id: 'shanghai', name: '上海', disabled: true },
+        { id: 'hangzhou', name: '杭州' },
+        { id: 'nanjing', name: '南京' },
+        { id: 'chognqing', name: '重庆' },
+        { id: 'taibei', name: '台北' },
+        { id: 'haikou', name: '海口' }
+      ]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/tag-input/more-config-demo.vue

@@ -0,0 +1,49 @@
+<template>
+  <bk-tag-input
+    :save-key="saveKey"
+    :search-key="searchKey"
+    :display-key="displayKey"
+    v-model="sports"
+    :list="sportList"
+    :tpl="tpl">
+  </bk-tag-input>
+  <p>请输入关键字<code>football</code>来体验下搜索效果</p>
+</template>
+<script>
+
+import { bkTagInput } from '@'
+
+export default {
+  components: {
+    bkTagInput
+  },
+  data () {
+    return {
+      saveKey: 'item',
+      searchKey: 'label',
+      displayKey: 'label',
+      sports: [],
+      sportList: [
+        { item: 'football', label: '足球' },
+        { item: 'basketball', label: '篮球' },
+        { item: 'badminton', label: '羽毛球' },
+        { item: 'volleyball', label: '排球' },
+        { item: 'baseball', label: '棒球' }
+      ]
+    }
+  },
+  methods: {
+    tpl (node, ctx, highlightKeyword) {
+      const parentClass = 'bk-selector-node'
+      const textClass = 'text'
+      const innerHtml = `${highlightKeyword(node.item)} (${node.label})`
+      return (
+        <div class={parentClass}>
+          <span class={textClass} domPropsInnerHTML={innerHtml}></span>
+        </div>
+      )
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/tag-input/multi-field-search-demo.vue

@@ -0,0 +1,48 @@
+<template>
+  <bk-tag-input
+    placeholder="请输入 username 或 nickname"
+    display-key="username"
+    save-key="username"
+    :tpl="multipleTpl"
+    :list="multipleList"
+    :search-key="multipleSearchKey"
+    v-model="multipleSelected">
+  </bk-tag-input>
+  <p>请输入<code>J</code>或<code>杰克</code>来体验下搜索效果</p>
+</template>
+<script>
+
+import { bkTagInput } from '@'
+
+export default {
+  components: {
+    bkTagInput
+  },
+  data () {
+    return {
+      multipleSelected: [],
+      multipleSearchKey: ['username', 'nickname'],
+      multipleList: [
+        { username: 'HelloWorld', nickname: 'HelloWorld' },
+        { username: 'Jack', nickname: '杰克' },
+        { username: 'Json', nickname: '杰森' },
+        { username: 'Jane', nickname: '简' },
+        { username: 'Arman', nickname: '阿尔曼' }
+      ]
+    }
+  },
+  methods: {
+    multipleTpl (node, ctx, highlightKeyword) {
+      const parentClass = 'bk-selector-node'
+      const textClass = 'text'
+      const innerHtml = `${highlightKeyword(node.username)} (${node.nickname})`
+      return (
+        <div class={parentClass}>
+          <span class={textClass} domPropsInnerHTML={innerHtml}></span>
+        </div>
+      )
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/tag-input/trigger-demo.vue

@@ -0,0 +1,38 @@
+<template>
+  <bk-tag-input
+    v-model="tags"
+    :list="list"
+    :placeholder="placeholder"
+    :trigger="'focus'"
+    :allow-next-focus="false">
+  </bk-tag-input>
+  <p>请输入<code>州</code>来体验下搜索效果</p>
+</template>
+<script>
+
+import { bkTagInput } from '@'
+
+export default {
+  components: {
+    bkTagInput
+  },
+  data () {
+    return {
+      placeholder: '请输入城市',
+      tags: ['shenzhen'],
+      list: [
+        { id: 'shenzhen', name: '深圳' },
+        { id: 'guangzhou', name: '广州' },
+        { id: 'beijing', name: '北京' },
+        { id: 'shanghai', name: '上海' },
+        { id: 'hangzhou', name: '杭州' },
+        { id: 'nanjing', name: '南京' },
+        { id: 'chognqing', name: '重庆' },
+        { id: 'taibei', name: '台北' },
+        { id: 'haikou', name: '海口' }
+      ]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/tag-input/with-group-demo.vue

@@ -0,0 +1,53 @@
+<template>
+  <bk-tag-input
+    v-model="tagList"
+    :list="list1"
+    :use-group="true"
+    :trigger="'focus'">
+  </bk-tag-input>
+  <p>请输入关键字<code>省</code>来体验下搜索效果</p>
+</template>
+<script>
+
+import { bkTagInput } from '@'
+
+export default {
+  components: {
+    bkTagInput
+  },
+  data () {
+    return {
+      tagList: [],
+      list1: [
+        {
+          id: '1',
+          name: '华中地区',
+          children: [
+            { id: '1-1', name: '河南省' },
+            { id: '1-2', name: '湖北省' },
+            { id: '1-3', name: '湖南省' }
+          ]
+        },
+        {
+          id: '2',
+          name: '华北地区',
+          children: [
+            { id: '2-1', name: '北京市' },
+            { id: '2-2', name: '山西省' },
+            { id: '2-3', name: '河北省' }
+          ]
+        },
+        {
+          id: '3',
+          name: '华南地区',
+          children: [
+            { id: '3-1', name: '广东省' },
+            { id: '3-2', name: '海南省，' }
+          ]
+        }
+      ]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/tag-input/with-tooltip-demo.vue

@@ -0,0 +1,54 @@
+<template>
+  <bk-tag-input
+    v-model="tagList"
+    :list="list1"
+    :tooltip-key="'desc'"
+    :use-group="true"
+    :trigger="'focus'">
+  </bk-tag-input>
+  <p>请输入关键字<code>省</code>来体验下搜索效果</p>
+</template>
+<script>
+
+import { bkTagInput } from '@'
+
+export default {
+  components: {
+    bkTagInput
+  },
+  data () {
+    return {
+      tagList: [],
+      list1: [
+        {
+          id: '1',
+          name: '华中地区',
+          children: [
+            { id: '1-1', name: '河南省', desc: '河南省河南省' },
+            { id: '1-2', name: '湖北省', desc: '湖北省湖北省' },
+            { id: '1-3', name: '湖南省', desc: '湖南省湖南省' }
+          ]
+        },
+        {
+          id: '2',
+          name: '华北地区',
+          children: [
+            { id: '2-1', name: '北京市', desc: '北京市北京市' },
+            { id: '2-2', name: '山西省', desc: '山西省山西省' },
+            { id: '2-3', name: '河北省', desc: '河北省河北省' }
+          ]
+        },
+        {
+          id: '3',
+          name: '华南地区',
+          children: [
+            { id: '3-1', name: '广东省', desc: '广东省广东省' },
+            { id: '3-2', name: '海南省', desc: '海南省海南省' }
+          ]
+        }
+      ]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/time-picker/basic-demo.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <bk-time-picker v-model="initTime" :placeholder="'选择时间'" @change="change" transfer :ext-popover-cls="'custom-popover-cls'"></bk-time-picker>
+  </div>
+</template>
+<script>
+
+import { bkTimePicker } from '@'
+
+export default {
+  components: {
+    bkTimePicker
+  },
+  data () {
+    return {
+      initTime: '12:12:12'
+    }
+  },
+  methods: {
+    change (time) {
+      console.error(time)
+      console.error(this.initTime)
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/time-picker/cross-day-demo.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <bk-time-picker
+      v-model="initTimeRange2"
+      :placeholder="'选择时间范围'"
+      :type="'timerange'"
+      :allow-cross-day="true">
+    </bk-time-picker>
+  </div>
+</template>
+<script>
+
+import { bkTimePicker } from '@'
+
+export default {
+  components: {
+    bkTimePicker
+  },
+  data () {
+    return {
+      initTimeRange2: ['23:00:00', '10:00:00']
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/time-picker/custom-format-demo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <bk-time-picker v-model="initTimeCustom1" :format="'HH时mm分ss秒'"></bk-time-picker>
+  </div>
+</template>
+<script>
+
+import { bkTimePicker } from '@'
+
+export default {
+  components: {
+    bkTimePicker
+  },
+  data () {
+    return {
+      initTimeCustom1: '13:13:13'
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/time-picker/disabled-time-demo.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <bk-time-picker v-model="initTime"
+      :disabled-hours="[1, 2, 3, 4, 5, 10, 15, 16, 17, 18]"
+      :disabled-minutes="[0, 5, 10, 15, 20, 25, 30, 35, 40 ,45, 50, 55]"
+      :disabled-seconds="[0, 4, 6, 10, 12, 16, 18, 22, 24, 28, 30, 24, 36, 40, 42, 46, 48, 52, 54]" />
+  </div>
+</template>
+<script>
+
+import { bkTimePicker } from '@'
+
+export default {
+  components: {
+    bkTimePicker
+  },
+  data () {
+    return {
+      initTime: '12:12:12'
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/time-picker/editable-demo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <bk-time-picker v-model="initTime" :placeholder="'选择时间'" :editable="true"></bk-time-picker>
+  </div>
+</template>
+<script>
+
+import { bkTimePicker } from '@'
+
+export default {
+  components: {
+    bkTimePicker
+  },
+  data () {
+    return {
+      initTime: '12:12:12'
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/time-picker/format-no-second-demo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <bk-time-picker v-model="initTimeCustom2" :format="'HH时mm分'"></bk-time-picker>
+  </div>
+</template>
+<script>
+
+import { bkTimePicker } from '@'
+
+export default {
+  components: {
+    bkTimePicker
+  },
+  data () {
+    return {
+      initTimeCustom2: new Date()
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/time-picker/no-enter-demo.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <bk-time-picker :enter-mode="false" :placeholder="'请选择时间'"></bk-time-picker>
+  </div>
+</template>
+<script>
+
+import { bkTimePicker } from '@'
+
+export default {
+  components: {
+    bkTimePicker
+  }
+}
+
+</script>

package/knowledge/examples/vue2/time-picker/simple-time-picker-demo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <bk-time-picker behavior="simplicity" v-model="initTime" :placeholder="'选择时间'"></bk-time-picker>
+  </div>
+</template>
+<script>
+
+import { bkTimePicker } from '@'
+
+export default {
+  components: {
+    bkTimePicker
+  },
+  data () {
+    return {
+      initTime: '12:12:12'
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/time-picker/time-picker-disabled-demo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <bk-time-picker disabled v-model="initTime" :placeholder="'选择时间'"></bk-time-picker>
+  </div>
+</template>
+<script>
+
+import { bkTimePicker } from '@'
+
+export default {
+  components: {
+    bkTimePicker
+  },
+  data () {
+    return {
+      initTime: '12:12:12'
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/time-picker/time-range-demo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <bk-time-picker v-model="initTimeRange1" :placeholder="'选择时间范围'" :type="'timerange'"></bk-time-picker>
+  </div>
+</template>
+<script>
+
+import { bkTimePicker } from '@'
+
+export default {
+  components: {
+    bkTimePicker
+  },
+  data () {
+    return {
+      initTimeRange1: ['00:00:00', '23:59:59']
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/timeline/basic-demo.vue

@@ -0,0 +1,35 @@
+<template>
+  <bk-timeline :list="list" @select="select"></bk-timeline>
+</template>
+<script>
+
+import { bkTimeline } from '@'
+
+export default {
+  components: {
+    bkTimeline
+  },
+  data () {
+    return {
+      list: [
+        { tag: '由pony上线到蓝鲸市场 ', content: '<span class="timeline-update-time">2019-12-15 11:00</span>', size: 'large' },
+        { tag: '由tony部署到生产环境并发布至应用市场', content: '<span class="timeline-update-time">2019-12-12 11:23</span>' },
+        { tag: '由allen部署到预发布环境', content: '<span class="timeline-update-time">2019-12-12 10:20</span>' },
+        { tag: '由allen上线到蓝鲸市场', content: '<span class="timeline-update-time">2019-12-09 11:23</span>' }
+      ]
+    }
+  },
+  methods: {
+    select (data) {
+      alert('选择了：' + data.tag)
+    }
+  }
+}
+
+</script>
+<style lang="postcss">
+.timeline-update-time {
+        font-size: 12px;
+        color: #979ba5;
+    }
+</style>

package/knowledge/examples/vue2/timeline/custom-node-icon-demo.vue

@@ -0,0 +1,94 @@
+<template>
+  <bk-container :col="12">
+    <bk-row>
+      <bk-col :span="6">
+        <bk-timeline :list="customIconList1"></bk-timeline>
+      </bk-col>
+      <bk-col :span="6">
+        <bk-timeline :list="customIconList2"></bk-timeline>
+      </bk-col>
+    </bk-row>
+  </bk-container>
+</template>
+<script>
+
+import { bkTimeline, bkContainer, bkCol, bkRow } from '@'
+
+export default {
+  components: {
+    bkTimeline,
+    bkContainer,
+    bkCol,
+    bkRow
+  },
+  data () {
+    return {
+      customIconList1: [
+        { tag: 'pony审批通过，并附“同意”', content: '<span class="timeline-update-time">2020-03-06 11:23</span>', color: 'green', filled: true },
+        { tag: 'tony审批通过，并附“同意”', content: '<span class="timeline-update-time">2020-03-07 10:20</span>', color: 'green', filled: true },
+        {
+          tag: 'allen审批不通过，并附“不同意”',
+          content: '<span class="timeline-update-time">2020-03-07 22:20</span>',
+          color: 'red',
+          icon: this.$createElement('i', {
+            class: 'bk-icon icon-close-circle',
+            style: { color: 'red' }
+          })
+        },
+        {
+          tag: '等待mark审批',
+          color: 'blue',
+          icon: this.$createElement('i', {
+            class: 'bk-icon icon-circle-2-1 icon-loading',
+            style: { color: 'blue' }
+          })
+        }
+      ],
+      customIconList2: [
+        {
+          tag: '<b>管理员</b>',
+          content: '<div class="timeline-content"><p style="color: #63656e;">由pony上线到蓝鲸市场</p><p><span class="timeline-update-time">2019-12-12 11:23</span></p></div>',
+          color: 'green',
+          filled: true
+        },
+        {
+          tag: '<b>组长</b>',
+          content: '<div class="timeline-content"><p style="color: #63656e;">由tony部署到生产环境并发布至应用市场</p><p><span class="timeline-update-time">2019-12-12 11:23</span></p></div>',
+          color: 'green',
+          filled: true
+        },
+        {
+          tag: '<b>总监</b>',
+          content: '由allen部署到预发布环境',
+          color: 'blue',
+          icon: 'image'
+        },
+        { tag: '<b>总经理</b>', content: '由allen上线到蓝鲸市场' }
+      ]
+    }
+  }
+}
+
+</script>
+<style lang="postcss">
+.timeline-update-time {
+        font-size: 14px;
+        color: #979ba5;
+    }
+    .timeline-content {
+        p {
+            margin-top: 0;
+            margin-bottom: 8px;
+        }
+    }
+    .icon-loading {
+        display: inline-block;
+        animation: loadingCircle 1s infinite linear;
+        font-size: 12px;
+    }
+    @keyframes loadingCircle {
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+</style>