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

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

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <bk-date-picker :open="open" :value="value"
+      @change="handleChange"
+      @pick-success="handleOk"
+    >
+      <a slot="trigger" href="javascript:void(0)" @click="handleClick">
+        <template v-if="value === ''">Select date</template>
+        <template v-else>{{value}}</template>
+      </a>
+    </bk-date-picker>
+  </div>
+</template>
+<script>
+
+import { bkDatePicker } from '@'
+
+export default {
+  components: {
+    bkDatePicker
+  },
+  data () {
+    return {
+      value: '',
+      open: false
+    }
+  },
+  methods: {
+    handleClick () {
+      this.open = !this.open
+    },
+    handleChange (date) {
+      this.value = date
+    },
+    handleOk () {
+      console.log('handleOK')
+      this.open = false
+    }
+  }
+}
+
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <bk-date-picker class="mr15" :placeholder="'选择日期范围'" :type="'daterange'"></bk-date-picker>
+  </div>
+</template>
+<script>
+
+import { bkDatePicker } from '@'
+
+export default {
+  components: {
+    bkDatePicker
+  }
+}
+
+</script>

package/knowledge/examples/vue2/date-picker/datetime-range-demo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <bk-date-picker v-model="initDateTimeRange" :placeholder="'选择日期时间范围'" :type="'datetimerange'"></bk-date-picker>
+  </div>
+</template>
+<script>
+
+import { bkDatePicker } from '@'
+
+export default {
+  components: {
+    bkDatePicker
+  },
+  data () {
+    return {
+      initDateTimeRange: [new Date(), new Date()]
+    }
+  }
+}
+
+</script>

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

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <bk-date-picker v-model="initDateTimeRange" :placeholder="'选择日期时间范围'" :type="'datetimerange'" :editable="true"></bk-date-picker>
+  </div>
+</template>
+<script>
+
+import { bkDatePicker } from '@'
+
+export default {
+  components: {
+    bkDatePicker
+  },
+  data () {
+    return {
+      initDateTimeRange: ['2019-05-01 11:00:00', '2019-12-31 23:23:23']
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/date-picker/example-9-demo.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <bk-date-picker v-model="initDateTimeRange4UpToNow"
+      :placeholder="'选择日期时间范围'"
+      :type="'datetimerange'"
+      :up-to-now="true"
+      @change="change4UpToNow"
+      @open-change="openChange4UpToNow"
+      @pick-success="pickSuccess4UpToNow"></bk-date-picker>
+  </div>
+</template>
+<script>
+
+import { bkDatePicker } from '@'
+
+export default {
+  components: {
+    bkDatePicker
+  },
+  data () {
+    return {
+      initDateTimeRange4UpToNow: []
+    }
+  },
+  methods: {
+    change4UpToNow (date, type) {
+      console.log('change4UpToNow change', date, type)
+    },
+    openChange4UpToNow (state) {
+      console.log('openChange4UpToNow openChange', state)
+    },
+    pickSuccess4UpToNow () {
+      console.log('pickSuccess4UpToNow pickSuccess')
+    }
+  }
+}
+
+</script>

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

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <p class="mb5">点击 shortcuts 不会关闭弹层，只在 datetimerange 生效，因为 datetimerange 带有时间选择</p>
+    <bk-date-picker :shortcuts="shortcuts" :type="'datetimerange'"></bk-date-picker>
+    <p class="mb5">点击 shortcuts 会关闭弹层</p>
+    <bk-date-picker :shortcuts="shortcuts" :type="'datetimerange'" :shortcut-close="true" :use-shortcut-text="true"
+      @change="changeTest"
+      @open-change="openChangeTest"
+      @pick-success="pickSuccessTest"></bk-date-picker>
+    <p class="mb5">默认值为 shortcuts 中的选项</p>
+    <bk-date-picker :shortcuts="shortcuts" :type="'datetimerange'" :shortcut-close="true" :use-shortcut-text="true"
+      :shortcut-selected-index="2"
+      @change="changeTest"
+      @open-change="openChangeTest"
+      @shortcut-change="shortcutChange"
+      @pick-success="pickSuccessTest"></bk-date-picker>
+    <p class="mb5">快捷选项插槽</p>
+    <bk-date-picker
+      :value="initDateTimeRange"
+      :type="'datetimerange'">
+      <div slot="shortcuts">自定义插槽</div>
+    </bk-date-picker>
+  </div>
+</template>
+<script>
+
+import { bkDatePicker } from '@'
+
+export default {
+  components: {
+    bkDatePicker
+  },
+  data () {
+    return {
+      shortcuts: [
+        {
+          text: '今天',
+          value () {
+            const end = new Date()
+            const start = new Date(end.getFullYear(), end.getMonth(), end.getDate())
+            return [start, end]
+          },
+          onClick: picker => {
+            console.log(picker)
+          }
+        },
+        {
+          text: '近7天',
+          value () {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            return [start, end]
+          }
+        },
+        {
+          text: '近15天',
+          value () {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
+            return [start, end]
+          }
+        },
+        {
+          text: '近30天',
+          value () {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            return [start, end]
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    changeTest (date, type) {
+      console.log('changeTest change', date, type)
+    },
+    openChangeTest (state) {
+      console.log('openChangeTest openChange', state)
+    },
+    pickSuccessTest () {
+      console.log('pickSuccessTest pickSuccess')
+    },
+    shortcutChange (value, index) {
+      console.log('shortcutChange', value, index)
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/date-picker/simple-style-demo.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <bk-date-picker
+      behavior="simplicity"
+      class="mr15"
+      v-model="initDateTime"
+      :placeholder="'选择日期'">
+    </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/time-picker-options-demo.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <bk-date-picker :time-picker-options="timePickerOptions" :type="'datetime'"></bk-date-picker>
+  </div>
+</template>
+<script>
+
+import { bkDatePicker } from '@'
+
+export default {
+  components: {
+    bkDatePicker
+  },
+  data () {
+    return {
+      timePickerOptions: {
+        disabledHours: [1, 2, 3, 4, 5, 10],
+        disabledMinutes: [1, 2, 3, 4, 5, 10],
+        disabledSeconds: [10, 10, 20],
+        hideDisabledOptions: true
+      }
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/date-picker/time-setting-demo.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <bk-date-picker v-model="initDateTime" @change="change" :placeholder="'选择日期时间'" :type="'datetime'"></bk-date-picker>
+  </div>
+</template>
+<script>
+
+import { bkDatePicker } from '@'
+
+export default {
+  components: {
+    bkDatePicker
+  },
+  data () {
+    return {
+      initDateTime: new Date()
+    }
+  },
+  methods: {
+    change (date) {
+      console.error(date)
+      console.error(this.initDateTime)
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/date-picker/year-month-picker-demo.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <p class="mb5">年选择器</p>
+    <bk-date-picker type="year" v-model="initDateTime" @change="handleChange" :cell-class="getCellClass" />
+  </div>
+  <div>
+    <p class="mb5">月选择器</p>
+    <bk-date-picker type="month" v-model="initDateTime" @change="handleChange" :cell-class="getCellClass" />
+  </div>
+</template>
+<script>
+
+import { bkDatePicker } from '@'
+
+export default {
+  components: {
+    bkDatePicker
+  },
+  data () {
+    return {
+      initDateTime: new Date()
+    }
+  },
+  methods: {
+    handleChange (date) {
+      console.warn('handleChange', date)
+      this.value = date
+    },
+    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/dialog/async-demo.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <bk-button @click="exampleSetting3.custom1.visible = true">
+      异步关闭
+    </bk-button>
+    <bk-dialog v-model="exampleSetting3.custom1.visible"
+      :header-position="exampleSetting3.custom1.headerPosition"
+      :loading="exampleSetting3.custom1.loading"
+      @confirm="confirm"
+      @cancel="cancel"
+      @value-change="valueChange"
+      @after-leave="afterLeave"
+      title="文本标题">
+      点击确定后 {{exampleSetting3.custom1.countdown}} 秒关闭
+    </bk-dialog>
+  </div>
+</template>
+<script>
+
+import { bkButton, bkDialog } from '@'
+
+export default {
+  components: {
+    bkButton,
+    bkDialog
+  },
+  data () {
+    return {
+      exampleSetting3: {
+        custom1: {
+          visible: false,
+          loading: false,
+          countdown: 3,
+          headerPosition: 'left',
+          timer: null
+        }
+      }
+    }
+  },
+  methods: {
+    confirm () {
+      this.exampleSetting3.custom1.loading = true
+      this.exampleSetting3.custom1.timer = setInterval(() => {
+        this.exampleSetting3.custom1.countdown -= 1
+        if (this.exampleSetting3.custom1.countdown === 0) {
+          this.exampleSetting3.custom1.visible = false
+          this.exampleSetting3.custom1.loading = false
+          clearInterval(this.exampleSetting3.custom1.timer)
+        }
+      }, 1000)
+    },
+    cancel () {
+      console.warn('cancel')
+    },
+    valueChange (val) {
+      console.warn('valueChange', val)
+      if (!val) {
+        clearInterval(this.exampleSetting3.custom1.timer)
+      }
+    },
+    afterLeave () {
+      console.warn('afterLeave')
+      this.exampleSetting3.custom1.countdown = 3
+    }
+  }
+}
+
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <bk-button theme="primary" @click="exampleSetting1.primary.visible = true">
+      primary
+    </bk-button>
+    <bk-dialog v-model="exampleSetting1.primary.visible"
+      theme="primary"
+      :mask-close="false"
+      :header-position="exampleSetting1.primary.headerPosition"
+      title="这是标题">
+      primary 主题，点击遮罩不会关闭弹框，esc 按键会关闭弹框
+    </bk-dialog>
+  </div>
+</template>
+<script>
+
+import { bkButton, bkDialog } from '@'
+
+export default {
+  components: {
+    bkButton,
+    bkDialog
+  },
+  data () {
+    return {
+      exampleSetting1: {
+        primary: {
+          visible: false,
+          headerPosition: 'left'
+        }
+      }
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/dialog/custom-dialog-demo.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <bk-button @click="exampleSetting2.custom1.visible = true" class="mr10">
+      设置宽度
+    </bk-button>
+    <bk-dialog v-model="exampleSetting2.custom1.visible"
+      width="720"
+      :position="exampleSetting2.custom1.position"
+      title="文本标题">
+      <p>【首部及导言】</p>
+      <p>欢迎您使用腾讯蓝鲸智云软件及服务。</p>
+      <p>为使用腾讯蓝鲸智云软件（以下简称本软件）及服务，您应当阅读并遵守《腾讯蓝鲸智云软件许可及服务协议》（以下简称本协议），以及《腾讯服务协议》。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的单独协议，并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。</p>
+      <p>除非您已阅读并接受本协议所有条款，否则您无权下载、安装或使用本软件及相关服务。您的下载、安装、使用、登录等行为即视为您已阅读并同意上述协议的约束。</p>
+      <p>一、【协议的范围】</p>
+      <p>1.1【协议适用主体范围】</p>
+      <p>本协议是您与腾讯之间关于您下载、安装、使用、复制本软件，以及使用腾讯相关服务所订立的协议。</p>
+      <p>1.2【协议关系及冲突条款】</p>
+      <p>本协议被视为《腾讯服务协议》（链接地址:http://www.qq.com/contract.shtml，若链接地址变更的，则以变更后的链接地址所对应的内容为准；其他链接地址变更的情形，均适用前述约定。）的补充协议，是其不可分割的组成部分是其不可分割的组成部分。</p>
+    </bk-dialog>
+    <bk-button @click="exampleSetting2.custom2.visible = true" class="mr10">
+      配置按钮文案
+    </bk-button>
+    <bk-dialog v-model="exampleSetting2.custom2.visible"
+      :header-position="exampleSetting2.custom2.headerPosition"
+      :ok-text="exampleSetting2.custom2.okText"
+      :cancel-text="exampleSetting2.custom2.cancelText"
+      title="描述">
+      配置按钮文案
+    </bk-dialog>
+    <bk-button @click="exampleSetting2.custom3.visible = true" class="mr10">
+      自定义内容1
+    </bk-button>
+    <bk-dialog v-model="exampleSetting2.custom3.visible" title="填写名称"
+      :header-position="exampleSetting2.custom3.headerPosition"
+      :width="exampleSetting2.custom3.width">
+      <bk-input :placeholder="'文字个数不超过8个汉字'" style="margin-bottom: 15px;">
+      </bk-input>
+    </bk-dialog>
+    <bk-button @click="exampleSetting2.custom4.visible = true" class="mr10">
+      自定义内容2
+    </bk-button>
+    <bk-dialog v-model="exampleSetting2.custom4.visible" title="描述"
+      :header-position="exampleSetting2.custom4.headerPosition"
+      :width="exampleSetting2.custom4.width">
+      <bk-input :placeholder="'文字个数不超过8个汉字'" :type="'textarea'"
+        :rows="5" style="margin-bottom: 15px;">
+      </bk-input>
+    </bk-dialog>
+    <bk-button @click="exampleSetting2.custom5.visible = true" class="mr10">
+      不允许拖拽
+    </bk-button>
+    <bk-dialog v-model="exampleSetting2.custom5.visible"
+      :header-position="exampleSetting2.custom5.headerPosition"
+      :draggable="exampleSetting2.custom5.draggable">
+      <p slot="header">文本标题</p>
+      不允许拖拽
+    </bk-dialog>
+    <bk-button @click="exampleSetting2.custom6.visible = true" class="mr10">
+      不显示关闭 icon
+    </bk-button>
+    <bk-dialog v-model="exampleSetting2.custom6.visible"
+      :header-position="exampleSetting2.custom6.headerPosition"
+      :close-icon="exampleSetting2.custom6.closeIcon">
+      <p slot="header">文本标题</p>
+      不显示关闭 icon
+    </bk-dialog>
+  </div>
+</template>
+<script>
+
+import { bkButton, bkDialog, bkInput } from '@'
+
+export default {
+  components: {
+    bkButton,
+    bkDialog,
+    bkInput
+  },
+  data () {
+    return {
+      exampleSetting2: {
+        custom1: {
+          visible: false,
+          position: {
+            top: 100
+          }
+        },
+        custom2: {
+          visible: false,
+          headerPosition: 'left',
+          okText: '按钮1',
+          cancelText: '按钮2'
+        },
+        custom3: {
+          visible: false,
+          width: 480,
+          headerPosition: 'left'
+        },
+        custom4: {
+          visible: false,
+          width: 480,
+          headerPosition: 'left'
+        },
+        custom5: {
+          visible: false,
+          draggable: false,
+          headerPosition: 'left'
+        },
+        custom6: {
+          visible: false,
+          closeIcon: false,
+          headerPosition: 'left'
+        }
+      }
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/dialog/fullscreen-demo.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <bk-button @click="exampleSetting4.visible = true">
+      全屏弹框
+    </bk-button>
+    <bk-dialog v-model="exampleSetting4.visible"
+      :fullscreen="exampleSetting4.fullscreen"
+      title="全屏弹框标题">
+      <p>【首部及导言】</p>
+      <p>欢迎您使用腾讯蓝鲸智云软件及服务。</p>
+      <p>为使用腾讯蓝鲸智云软件（以下简称本软件）及服务，您应当阅读并遵守《腾讯蓝鲸智云软件许可及服务协议》（以下简称本协议），以及《腾讯服务协议》。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的单独协议，并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。</p>
+      <p>除非您已阅读并接受本协议所有条款，否则您无权下载、安装或使用本软件及相关服务。您的下载、安装、使用、登录等行为即视为您已阅读并同意上述协议的约束。</p>
+      <p>一、【协议的范围】</p>
+      <p>1.1【协议适用主体范围】</p>
+      <p>本协议是您与腾讯之间关于您下载、安装、使用、复制本软件，以及使用腾讯相关服务所订立的协议。</p>
+      <p>1.2【协议关系及冲突条款】</p>
+      <p>本协议被视为《腾讯服务协议》（链接地址:http://www.qq.com/contract.shtml，若链接地址变更的，则以变更后的链接地址所对应的内容为准；其他链接地址变更的情形，均适用前述约定。）的补充协议，是其不可分割的组成部分是其不可分割的组成部分。</p>
+    </bk-dialog>
+  </div>
+</template>
+<script>
+
+import { bkButton, bkDialog } from '@'
+export default {
+  components: {
+    bkButton,
+    bkDialog
+  },
+  data () {
+    return {
+      exampleSetting4: {
+        fullscreen: true,
+        visible: false
+      }
+    }
+  }
+}
+
+</script>