@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/date-picker/trigger-slot-demo.vue

@@ -0,0 +1,149 @@
+<template>
+  <div style="display: flex">
+    <div>
+      <bk-date-picker
+        :open="open"
+        :value="dateValue"
+        @change="handleChange"
+        @clear="handleClear"
+        @open-change="handleOpenChange"
+        @pick-success="handleOk"
+      >
+        <template #trigger>
+          <a
+            href="javascript:void(0)"
+            @click="handleClick"
+          >
+            <template v-if="dateValue === ''"> Select date </template>
+            <template v-else>
+              {{ dateValue }}
+            </template>
+          </a>
+        </template>
+      </bk-date-picker>
+    </div>
+    <div style="margin-left: 40px">
+      <bk-date-picker
+        v-model="dateValue2"
+        :open="open2"
+        :shortcuts="shortcutsRange"
+        format="yyyy-MM-dd HH:mm:ss"
+        type="datetimerange"
+        use-shortcut-text
+        @change="handleChange2"
+        @clear="handleClear2"
+        @open-change="handleOpenChange2"
+        @pick-success="handleOk2"
+      >
+        <template #trigger="displayName">
+          <a
+            href="javascript:void(0)"
+            @click="handleClick2"
+          >
+            displayName:{{ displayName }}
+          </a>
+        </template>
+      </bk-date-picker>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { reactive, ref } from 'vue';
+
+  const dateValue = ref(''); // new Date();
+
+  const open = ref(false);
+
+  const handleChange = date => {
+    console.log('handleChange', date);
+    dateValue.value = date;
+  };
+  const handleClick = () => {
+    console.log('handleClick');
+    open.value = !open.value;
+  };
+  const handleOpenChange = isOpen => {
+    console.error('handleOpenChange');
+    console.log(isOpen);
+  };
+  const handleClear = () => {
+    console.log('handleClear');
+    open.value = false;
+  };
+  const handleOk = () => {
+    console.log('handleOK');
+    open.value = false;
+  };
+  const dateValue2 = reactive(['2022-07-21 12:02:26', '2022-08-20 12:02:26']);
+  const open2 = ref(false);
+  const shortcutsRange = reactive([
+    {
+      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];
+      },
+      onClick: picker => {
+        console.log(picker);
+      },
+    },
+    {
+      text: '近15天',
+      value() {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
+        return [start, end];
+      },
+      onClick: picker => {
+        console.log(picker);
+      },
+    },
+    {
+      text: '近30天',
+      value() {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
+      },
+      onClick: picker => {
+        console.log(picker);
+      },
+    },
+  ]);
+  const handleChange2 = date => {
+    console.log('handleChange', date);
+    dateValue2.value = date;
+  };
+  const handleClick2 = () => {
+    console.log('handleClick');
+    open2.value = !open.value;
+  };
+  const handleOpenChange2 = isOpen => {
+    console.error('handleOpenChange');
+    console.log(isOpen);
+  };
+  const handleClear2 = () => {
+    console.log('handleClear');
+    open2.value = false;
+  };
+  const handleOk2 = () => {
+    console.log('handleOK');
+    open2.value = false;
+  };
+</script>

package/knowledge/examples/date-picker/with-time-demo.vue

@@ -0,0 +1,44 @@
+<template>
+  <bk-date-picker
+    v-model="dateValue"
+    :disabled-date="disableDate"
+    type="datetime"
+    clearable
+    @change="handleChange"
+    @clear="handleClear"
+    @open-change="handleOpenChange"
+    @pick-success="handleOk"
+  >
+    <template #footer>
+      <div class="custom-footer">我是自定义 footer</div>
+    </template>
+    <!-- <template #confirm>
+      <div class="custom-footer">
+        我是自定义 confirm
+      </div>
+    </template> -->
+  </bk-date-picker>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  const dateValue = ref(new Date());
+  const disableDate = date => date && date.valueOf() < Date.now() - 86400;
+
+  const handleChange = date => {
+    console.log('handleChange', date);
+    dateValue.value = date;
+  };
+  const handleOpenChange = isOpen => {
+    console.error('handleOpenChange');
+    console.log(isOpen);
+  };
+  const handleClear = () => {
+    console.log('handleClear');
+    open.value = false;
+  };
+  const handleOk = () => {
+    console.log('handleOK');
+    open.value = false;
+  };
+</script>

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

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <p style="font-size: 14px">年选择器 {{ yearValue }}</p>
+    <bk-date-picker
+      v-model="initDateTime"
+      type="year"
+      @change="handleYearChange"
+    />
+  </div>
+  <div>
+    <p style="font-size: 14px">月选择器 {{ monthValue }}</p>
+    <bk-date-picker
+      v-model="initDateTime"
+      type="month"
+      @change="handleMonthChange"
+    />
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  const initDateTime = ref(new Date());
+  const yearValue = ref('');
+  const handleYearChange = val => {
+    console.warn('handleChange', val);
+    yearValue.value = val;
+  };
+  const monthValue = ref('');
+  const handleMonthChange = val => {
+    console.warn('handleChange', val);
+    monthValue.value = val;
+  };
+</script>

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

@@ -0,0 +1,33 @@
+<template>
+  <bk-date-picker
+    ref="datePickerRef"
+    class="mr15"
+    :disabled-date="disabledDate"
+    :model-value="defaultValue"
+    :placeholder="'选择年份范围'"
+    type="yearrange"
+    @change="handleChange"
+    @pick-first="handlePickFirst"
+  />
+</template>
+
+<script setup>
+  import { reactive, ref } from 'vue';
+  const datePickerRef = ref(null);
+  const defaultValue = reactive([
+    new Date(new Date().getFullYear() + 10, new Date().getMonth() + 1),
+    new Date(new Date().getFullYear() + 15, new Date().getMonth() + 4),
+  ]);
+  // const defaultValue = reactive(['2024-01-01', '2024-03-01']);
+  const handleChange = date => {
+    defaultValue.value = date;
+    console.error(date);
+    console.error(datePickerRef);
+    // datePickerRef.value.pickerPanelRef.handleToggleTime();
+  };
+  const handlePickFirst = (val, type) => {
+    console.error(val, type);
+  };
+
+  const disabledDate = date => date && date.valueOf() < Date.now() - 86400;
+</script>

package/knowledge/examples/dialog/base-demo.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      text
+      @click="handleShow"
+    >
+      打开 dialog1
+    </bk-button>
+    <bk-dialog
+      v-model:is-show="isShow"
+      :draggable="true"
+      :show-mask="false"
+      title="描述1"
+      quick-close
+    >
+      <div>hello world - 111!</div>
+    </bk-dialog>
+
+    <bk-button
+      theme="primary"
+      text
+      @click="handleShow2"
+    >
+      打开 dialog2
+    </bk-button>
+    <bk-dialog
+      v-model:is-show="isShow2"
+      :draggable="true"
+      :show-mask="false"
+      title="描述2"
+      quick-close
+    >
+      <div>hello world - 111!</div>
+    </bk-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const isShow = ref(false);
+  const isShow2 = ref(false);
+
+  const handleShow = () => {
+    isShow.value = true;
+  };
+
+  const handleShow2 = () => {
+    isShow2.value = true;
+  };
+</script>

package/knowledge/examples/dialog/before-close-demo.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      text
+      @click="handleShow"
+    >
+      打开dialog
+    </bk-button>
+    <bk-dialog
+      v-model:is-show="isShow"
+      :before-close="beforeClose"
+      :theme="'primary'"
+      title="关闭前确认"
+      @confirm="handleConfirm"
+    >
+      <div>关闭前确认</div>
+    </bk-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  import BkButton from '@bkui-vue/button';
+  import BkDialog from '@bkui-vue/dialog';
+  import InfoBox from '@bkui-vue/info-box';
+
+  const isShow = ref(false);
+
+  const beforeClose = () =>
+    new Promise((resolve, reject) => {
+      InfoBox({
+        title: '确认关闭弹框',
+        onConfirm: () => resolve(true),
+        onCancel: () => reject(),
+      });
+    });
+
+  const handleShow = () => {
+    isShow.value = true;
+  };
+
+  const handleConfirm = () => {
+    isShow.value = false;
+  };
+</script>

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

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      text
+      @click="() => (isShow = true)"
+    >
+      全屏弹框
+    </bk-button>
+    <bk-dialog
+      v-model:is-show="isShow"
+      footer-align="center"
+      header-align="center"
+      title="全屏弹框标题"
+      fullscreen
+    >
+      <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>
+      <p>【首部及导言】</p>
+      <p>欢迎您使用腾讯蓝鲸智云软件及服务。</p>
+      <p>
+        为使用腾讯蓝鲸智云软件（以下简称本软件）及服务，您应当阅读并遵守《腾讯蓝鲸智云软件许可及服务协议》
+        （以下简称本协议），以及《腾讯服务协议》。请您务必审慎阅读、充分理解各条款内容，
+        特别是免除或者限制责任的条款，以及开通或使用某项服务的单独协议，并选择接受或不接受。
+        限制、免责条款可能以加粗形式提示您注意。
+      </p>
+      <p>
+        除非您已阅读并接受本协议所有条款，否则您无权下载、安装或使用本软件及相关服务。您的下载、安装、使用、
+        登录等行为即视为您已阅读并同意上述协议的约束。
+      </p>
+      <p>一、【协议的范围】</p>
+
+      <p>1.1【协议适用主体范围】</p>
+      <p>本协议是您与腾讯之间关于您下载、安装、使用、复制本软件，以及使用腾讯相关服务所订立的协议。</p>
+      <p>1.2【协议关系及冲突条款】</p>
+    </bk-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  import BkButton from '@bkui-vue/button';
+  import BkDialog from '@bkui-vue/dialog';
+
+  const isShow = ref(false);
+</script>