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

package/knowledge/examples/vue2/cascade/searchable-demo.vue

@@ -0,0 +1,70 @@
+<template>
+  <bk-cascade
+    v-model="seachValue"
+    :list="list"
+    filterable
+    style="width: 250px;">
+  </bk-cascade>
+</template>
+<script>
+
+import { bkCascade } from '@'
+
+export default {
+  components: {
+    bkCascade
+  },
+  data (s) {
+    return {
+      seachValue: [],
+      list: [
+        {
+          id: 'hunan',
+          name: '湖南',
+          children: [
+            {
+              id: 'changsha',
+              name: '长沙'
+            },
+            {
+              id: 'yueyang',
+              name: '岳阳'
+            }
+          ]
+        }, {
+          id: 'guangxi',
+          name: '广西'
+        }, {
+          id: 'yunnan',
+          name: '云南',
+          children: [
+            {
+              id: 'kunming',
+              name: '昆明',
+              children: [
+                {
+                  id: 'wuhuaqu',
+                  name: '五华区'
+                },
+                {
+                  id: 'guanduqu',
+                  name: '官渡区'
+                },
+                {
+                  id: 'xishanqu',
+                  name: '西山区'
+                }
+              ]
+            },
+            {
+              id: 'dali',
+              name: '大理'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/collapse/accordion-demo.vue

@@ -0,0 +1,37 @@
+<template>
+  <bk-collapse accordion>
+    <bk-collapse-item name="1">
+      方案成熟
+      <div slot="content" class="f13">拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维</div>
+    </bk-collapse-item>
+    <bk-collapse-item name="2">
+      覆盖全面
+      <div slot="content" class="f13">
+        从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="3">
+      开放平台
+      <div slot="content" class="f13">
+        开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="4">
+      高效运营
+      <div slot="content" class="f13">
+        通过蓝鲸智云体系，能够帮助企业快速实现运维基础服务自动化，从而加速DevOps转型实现工具文化，最大化提高运营效率。
+      </div>
+    </bk-collapse-item>
+  </bk-collapse>
+</template>
+<script>
+
+import { bkCollapse, bkCollapseItem } from '@'
+export default {
+  components: {
+    bkCollapse,
+    bkCollapseItem
+  }
+}
+
+</script>

package/knowledge/examples/vue2/collapse/animation-callback-demo.vue

@@ -0,0 +1,53 @@
+<template>
+  <bk-collapse v-model="activeNameDisabled">
+    <bk-collapse-item name="1" @after-leave="handleAfterLeave">
+      方案成熟
+      <div slot="content" class="f13">拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维</div>
+    </bk-collapse-item>
+    <bk-collapse-item name="2">
+      覆盖全面
+      <div slot="content" class="f13">
+        从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="3" @before-enter="handleBeforeEnter">
+      开放平台
+      <div slot="content" class="f13">
+        开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="4">
+      高效运营
+      <div slot="content" class="f13">
+        通过蓝鲸智云体系，能够帮助企业快速实现运维基础服务自动化，从而加速DevOps转型实现工具文化，最大化提高运营效率。
+      </div>
+    </bk-collapse-item>
+  </bk-collapse>
+</template>
+<script>
+
+import { bkCollapse, bkCollapseItem } from '@'
+export default {
+  components: {
+    bkCollapse,
+    bkCollapseItem
+  },
+  data () {
+    return {
+      activeNameDisabled: ['1', '2']
+    }
+  },
+  methods: {
+    handleAfterLeave () {
+      console.log('after-leave')
+      alert('after-leave')
+    },
+
+    handleBeforeEnter () {
+      console.log('before-enter')
+      alert('before-enter')
+    }
+  }
+}
+
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+  <bk-collapse v-model="activeName">
+    <bk-collapse-item name="1">
+      方案成熟
+      <div slot="content" class="f13">拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维;</div>
+    </bk-collapse-item>
+    <bk-collapse-item name="2">
+      覆盖全面
+      <div slot="content" class="f13">
+        从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="3">
+      开放平台
+      <div slot="content" class="f13">
+        开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="4">
+      高效运营
+      <div slot="content" class="f13">
+        通过蓝鲸智云体系，能够帮助企业快速实现运维基础服务自动化，从而加速DevOps转型实现工具文化，最大化提高运营效率。
+      </div>
+    </bk-collapse-item>
+  </bk-collapse>
+</template>
+<script>
+
+import { bkCollapse, bkCollapseItem } from '@'
+export default {
+  components: {
+    bkCollapse,
+    bkCollapseItem
+  },
+  data () {
+    return {
+      activeName: ['1']
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/collapse/click-event-demo.vue

@@ -0,0 +1,42 @@
+<template>
+  <bk-collapse @item-click="handlerClick">
+    <bk-collapse-item name="1">
+      方案成熟
+      <div slot="content" class="f13">拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维</div>
+    </bk-collapse-item>
+    <bk-collapse-item name="2">
+      覆盖全面
+      <div slot="content" class="f13">
+        从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="3">
+      开放平台
+      <div slot="content" class="f13">
+        开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="4">
+      高效运营
+      <div slot="content" class="f13">
+        通过蓝鲸智云体系，能够帮助企业快速实现运维基础服务自动化，从而加速DevOps转型实现工具文化，最大化提高运营效率。
+      </div>
+    </bk-collapse-item>
+  </bk-collapse>
+</template>
+<script>
+
+import { bkCollapse, bkCollapseItem } from '@'
+export default {
+  components: {
+    bkCollapse,
+    bkCollapseItem
+  },
+  methods: {
+    handlerClick (activeName) {
+      alert(activeName)
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/collapse/custom-panel-title-demo.vue

@@ -0,0 +1,65 @@
+<template>
+  <bk-collapse v-model="activeName" class="my-menu">
+    <bk-collapse-item name="1">
+      <i class="bk-icon icon-sitemap custom-icon"></i>集群
+      <div slot="content">
+        <ul class="list">
+          <li>生产环境</li>
+          <li>预发布环境</li>
+        </ul>
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="2">
+      <i class="bk-icon icon-work-manage custom-icon"></i>节点
+      <div slot="content">
+        <ul class="list">
+          <li>生产环境</li>
+          <li>预发布环境</li>
+        </ul>
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="3">
+      <i class="bk-icon icon-sitemap custom-icon"></i>变量
+      <div slot="content">
+        <ul class="list">
+          <li>生产环境</li>
+          <li>预发布环境</li>
+        </ul>
+      </div>
+    </bk-collapse-item>
+  </bk-collapse>
+</template>
+<script>
+
+import { bkCollapse, bkCollapseItem } from '@'
+export default {
+  components: {
+    bkCollapse,
+    bkCollapseItem
+  }
+}
+
+</script>
+<style lang="postcss">
+.my-menu {
+        width: 300px;
+        border: 1px solid #eee;
+        .custom-icon {
+            margin: 0 15px 0 20px;
+            font-size: 16px;
+        }
+        .list {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            > li {
+                font-size: 14px;
+                height: 36px;
+                line-height: 36px;
+                padding-left: 50px;
+                position: relative;
+                color: #63656e;
+            }
+        }
+    }
+</style>

package/knowledge/examples/vue2/collapse/custom-trigger-area-demo.vue

@@ -0,0 +1,46 @@
+<template>
+  <bk-collapse v-model="activeName">
+    <bk-collapse-item name="1" :custom-trigger-area="true">
+      方案成熟
+      <span slot="no-trigger" class="no-trigger-text">自定义触发区，可自定义鼠标事件,不响应组件鼠标事件</span>
+      <div slot="content" class="f13">拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维;</div>
+    </bk-collapse-item>
+    <bk-collapse-item name="2" :custom-trigger-area="true">
+      覆盖全面
+      <span slot="no-trigger" class="no-trigger-text">自定义触发区，可自定义鼠标事件,不响应组件鼠标事件</span>
+      <div slot="content" class="f13">
+        从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="3" :custom-trigger-area="true">
+      开放平台
+      <span slot="no-trigger" class="no-trigger-text">自定义触发区，可自定义鼠标事件,不响应组件鼠标事件</span>
+      <div slot="content" class="f13">
+        开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="4" :custom-trigger-area="true">
+      高效运营
+      <span slot="no-trigger" class="no-trigger-text">自定义触发区，可自定义鼠标事件,不响应组件鼠标事件</span>
+      <div slot="content" class="f13">
+        通过蓝鲸智云体系，能够帮助企业快速实现运维基础服务自动化，从而加速DevOps转型实现工具文化，最大化提高运营效率。
+      </div>
+    </bk-collapse-item>
+  </bk-collapse>
+</template>
+<script>
+
+import { bkCollapse, bkCollapseItem } from '@'
+export default {
+  components: {
+    bkCollapse,
+    bkCollapseItem
+  },
+  data () {
+    return {
+      activeName: ['1']
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/collapse/disabled-item-demo.vue

@@ -0,0 +1,42 @@
+<template>
+  <bk-collapse v-model="activeNameDisabled">
+    <bk-collapse-item name="1">
+      方案成熟
+      <div slot="content" class="f13">拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维</div>
+    </bk-collapse-item>
+    <bk-collapse-item name="2" disabled>
+      覆盖全面
+      <div slot="content" class="f13">
+        从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="3">
+      开放平台
+      <div slot="content" class="f13">
+        开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="4">
+      高效运营
+      <div slot="content" class="f13">
+        通过蓝鲸智云体系，能够帮助企业快速实现运维基础服务自动化，从而加速DevOps转型实现工具文化，最大化提高运营效率。
+      </div>
+    </bk-collapse-item>
+  </bk-collapse>
+</template>
+<script>
+
+import { bkCollapse, bkCollapseItem } from '@'
+export default {
+  components: {
+    bkCollapse,
+    bkCollapseItem
+  },
+  data () {
+    return {
+      activeNameDisabled: ['1', '2']
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/collapse/hide-mode-demo.vue

@@ -0,0 +1,65 @@
+<template>
+  <bk-collapse v-model="activeName" class="my-menu">
+    <bk-collapse-item name="1">
+      <i class="bk-icon icon-sitemap custom-icon"></i>集群
+      <div slot="content">
+        <ul class="list">
+          <li>生产环境</li>
+          <li>预发布环境</li>
+        </ul>
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="2" content-hidden-type="hidden">
+      <i class="bk-icon icon-work-manage custom-icon"></i>节点
+      <div slot="content">
+        <ul class="list">
+          <li>生产环境</li>
+          <li>预发布环境</li>
+        </ul>
+      </div>
+    </bk-collapse-item>
+    <bk-collapse-item name="3" content-hidden-type="hidden">
+      <i class="bk-icon icon-sitemap custom-icon"></i>变量
+      <div slot="content">
+        <ul class="list">
+          <li>生产环境</li>
+          <li>预发布环境</li>
+        </ul>
+      </div>
+    </bk-collapse-item>
+  </bk-collapse>
+</template>
+<script>
+
+import { bkCollapse, bkCollapseItem } from '@'
+export default {
+  components: {
+    bkCollapse,
+    bkCollapseItem
+  }
+}
+
+</script>
+<style lang="postcss">
+.my-menu {
+        width: 300px;
+        border: 1px solid #eee;
+        .custom-icon {
+            margin: 0 15px 0 20px;
+            font-size: 16px;
+        }
+        .list {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            > li {
+                font-size: 14px;
+                height: 36px;
+                line-height: 36px;
+                padding-left: 50px;
+                position: relative;
+                color: #63656e;
+            }
+        }
+    }
+</style>

package/knowledge/examples/vue2/compose-form-item/basic-demo.vue

@@ -0,0 +1,29 @@
+<template>
+  <bk-compose-form-item>
+    <bk-select v-model="value1" style="width: 100px" :clearable="false">
+      <bk-option id="qq" name="QQ"></bk-option>
+      <bk-option id="weixin" name="微信"></bk-option>
+    </bk-select>
+    <bk-input v-if="value1 === 'qq'" key="qq" placeholder="请输入QQ账号"></bk-input>
+    <bk-input v-if="value1 === 'weixin'" key="weixin" placeholder="请输入微信账号"></bk-input>
+  </bk-compose-form-item>
+</template>
+<script>
+
+import { bkComposeFormItem, bkInput, bkSelect, bkOption } from '@'
+
+export default {
+  components: {
+    bkComposeFormItem,
+    bkInput,
+    bkSelect,
+    bkOption
+  },
+  data () {
+    return {
+      value1: 'qq'
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/compose-form-item/more-combination-demo.vue

@@ -0,0 +1,46 @@
+<template>
+  <bk-compose-form-item>
+    <bk-select v-model="value2" style="width: 120px" :clearable="false">
+      <bk-option id="qq" name="QQ"></bk-option>
+      <bk-option id="weixin" name="微信"></bk-option>
+      <bk-option id="date" name="日期-时间"></bk-option>
+    </bk-select>
+    <template v-if="value2 === 'qq'">
+      <bk-select key="age" style="width: 80px" :clearable="false">
+        <bk-option id="boy" name="男"></bk-option>
+        <bk-option id="girl" name="女"></bk-option>
+      </bk-select>
+      <bk-input key="qq" placeholder="请输入QQ账号"></bk-input>
+      <bk-input key="nickname" placeholder="请输入昵称"></bk-input>
+    </template>
+    <template v-if="value2 === 'weixin'">
+      <bk-input key="weixin" placeholder="请输入微信账号"></bk-input>
+      <bk-input key="remark" placeholder="备注"></bk-input>
+    </template>
+    <template v-if="value2 === 'date'">
+      <bk-date-picker key="date" placeholder="请选择日期"></bk-date-picker>
+      <bk-time-picker key="dateTime" placeholder="请选择时间"></bk-time-picker>
+    </template>
+  </bk-compose-form-item>
+</template>
+<script>
+
+import { bkComposeFormItem, bkInput, bkSelect, bkOption, bkDatePicker, bkTimePicker } from '@'
+
+export default {
+  components: {
+    bkComposeFormItem,
+    bkInput,
+    bkSelect,
+    bkOption,
+    bkDatePicker,
+    bkTimePicker
+  },
+  data () {
+    return {
+      value2: 'qq'
+    }
+  }
+}
+
+</script>

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

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <bk-date-picker class="mr15" v-model="initDateTime" cell-class="null" :placeholder="'选择日期'" :ext-popover-cls="'custom-popover-cls'">
+      <div slot="header" style="height: 100px">
+        我是自定义 header
+      </div>
+      <div slot="footer" style="height: 100px">
+        我是自定义 footer
+      </div>
+    </bk-date-picker>
+  </div>
+</template>
+<script>
+
+import { bkDatePicker } from '@'
+
+export default {
+  components: {
+    bkDatePicker
+  },
+  data () {
+    return {
+      initDateTime: new Date()
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/date-picker/custom-cell-class-demo.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <bk-date-picker class="mr15" v-model="initDateTimeRange" :cell-class="getCellClass" :type="'datetimerange'" :placeholder="'选择日期'" :ext-popover-cls="'custom-popover-cls'"></bk-date-picker>
+  </div>
+</template>
+<script>
+
+import { bkDatePicker } from '@'
+
+export default {
+  components: {
+    bkDatePicker
+  },
+  data () {
+    return {
+      initDateTimeRange: [new Date(), new Date()]
+    }
+  },
+  methods: {
+    getCellClass (cell) {
+      const hasPoint = Math.random() * 10 > 5
+      return hasPoint ? 'cell-x-Class' : ''
+    }
+  }
+}
+
+</script>
+<style lang="postcss">
+.cell-x-Class {
+    position: relative;
+    &::after {
+      content: '';
+      height: 5px;
+      background: red;
+      position: absolute;
+      left: 15px;
+      /* right: 5px; */
+      bottom: 2px;
+      border-radius: 50%;
+      border: solid 1px red;
+      width: 5px;
+    }
+  }
+</style>

package/knowledge/examples/vue2/date-picker/custom-footer-demo.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <bk-date-picker v-model="initDateTimeRange" :placeholder="'选择日期时间范围'" :type="'datetimerange'" :footer-slot-cls="'custom-footer-wrapper'">
+      <div slot="footer" class="custom-footer">
+        我是自定义 footer
+      </div>
+    </bk-date-picker>
+  </div>
+</template>
+<script>
+
+import { bkDatePicker } from '@'
+
+export default {
+  components: {
+    bkDatePicker
+  },
+  data () {
+    return {
+      initDateTimeRange: [new Date(), new Date()]
+    }
+  }
+}
+
+</script>
+<style lang="postcss">
+.custom-footer-wrapper {
+        color: red;
+    }
+    .custom-footer {
+        text-align: center;
+    }
+</style>