@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/select/select-search-demo.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="demo">
+    <bk-select
+      class="bk-select"
+      v-model="selectedValue"
+      :filter-option="filterOption"
+      filterable
+      multiple
+      @search-change="searchChange"
+    >
+      <bk-option
+        v-for="(item, index) in datasource"
+        :id="item.value"
+        :key="index"
+        :name="item.label"
+      />
+    </bk-select>
+    <bk-select
+      class="bk-select"
+      v-model="selectedValue"
+      :filter-option="filterOption"
+      :input-search="false"
+      :list="searchList"
+      :remote-method="searchDataSource"
+      filterable
+      multiple
+    />
+    <bk-select
+      class="bk-select"
+      v-model="selectedValue"
+      :input-search="false"
+      multiple-mode="tag"
+      filterable
+      multiple
+    >
+      <bk-option
+        v-for="(item, index) in datasource"
+        :id="item.value"
+        :key="index"
+        :name="item.label"
+      />
+    </bk-select>
+    <bk-select
+      class="bk-select"
+      v-model="selectedValue"
+      multiple-mode="tag"
+      allow-create
+      filterable
+      multiple
+    >
+      <bk-option
+        v-for="(item, index) in datasource"
+        :id="item.value"
+        :key="index"
+        :name="item.label"
+      />
+    </bk-select>
+    <bk-select
+      class="bk-select"
+      :remote-method="remoteMethod"
+      multiple-mode="tag"
+      filterable
+      multiple
+    >
+      <bk-option
+        v-for="(item, index) in list"
+        :id="item.value"
+        :key="item.value"
+        :name="item.label"
+        :order="index"
+      />
+    </bk-select>
+  </div>
+</template>
+<script setup>
+  import { onMounted, ref } from 'vue';
+  const datasource = ref([
+    {
+      value: 'climbing',
+      label: '爬山',
+    },
+    {
+      value: 'running',
+      label: '跑步',
+    },
+    {
+      value: 'unknow',
+      label: '未知',
+    },
+    {
+      value: 'fitness',
+      label: '健身',
+    },
+    {
+      value: 'bike',
+      label: '骑车',
+    },
+    {
+      value: 'dancing',
+      label: '跳舞',
+    },
+    {
+      value: 'sleep',
+      label: '睡觉',
+      disabled: true,
+    },
+  ]);
+  const selectedValue = ref('dancing');
+  const list = ref([]);
+  const remoteMethod = async value =>
+    new Promise(resolve => {
+      if (!value) {
+        list.value = [];
+        resolve('ok');
+      } else {
+        setTimeout(() => {
+          list.value = new Array(10).fill('').map((_, i) => ({
+            value: `${i}-${value}`,
+            label: `label-${value}-${i}`,
+          }));
+          resolve('ok');
+        }, 1000);
+      }
+    });
+  const filterOption = (input, options) => options.name?.includes(input);
+
+  const searchList = ref();
+  const searchDataSource = key => {
+    searchList.value = datasource.value.filter(item => item.label.includes(key));
+  };
+
+  function searchChange(value) {
+    console.log(value);
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      searchList.value = JSON.parse(JSON.stringify(datasource.value));
+    }, 1000);
+  });
+</script>
+<style scoped>
+  .demo {
+    display: flex;
+  }
+
+  .bk-select {
+    width: 300px;
+    margin-right: 20px;
+  }
+</style>

package/knowledge/examples/select/select-slot-demo.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="demo">
+    <div>
+      <div>
+        <h4>tag</h4>
+        <bk-select class="bk-select" v-model="selectedValue" multiple-mode="tag" collapse-tags filterable multiple
+          show-select-all>
+          <bk-option v-for="(item, index) in datasource" :id="item.value" :key="index" :name="item.label" />
+          <template #tag="{ selected }">
+            {{ selected.map(item => `${item.label}( ${item.value} )`).join('；') }}
+          </template>
+        </bk-select>
+      </div>
+      <div>
+        <h4>tagRender</h4>
+        <bk-select class="bk-select" v-model="selectedValue" multiple-mode="tag" collapse-tags filterable multiple
+          show-select-all>
+          <bk-option v-for="(item, index) in datasource" :id="item.value" :key="index" :name="item.label" />
+          <template #tagRender="{ label, value }">
+            {{ `自定义内容-${label}-${value}` }}
+          </template>
+        </bk-select>
+      </div>
+      <div>
+        <h4>trigger</h4>
+        <bk-select class="bk-select" v-model="selectedValue" :input-search="false" filterable multiple>
+          <template #trigger="{ selected }">
+            <span>{{ selected }}</span>
+          </template>
+          <bk-option v-for="(item, index) in datasource" :id="item.value" :key="index" :name="item.label" />
+        </bk-select>
+      </div>
+      <div>
+        <h4>extension</h4>
+        <bk-select class="bk-select" v-model="selectedValue" filterable @toggle="handleToggle">
+          <bk-option v-for="(item, index) in datasource" :disabled="item.disabled" :id="item.value" :key="index"
+            :name="item.label" />
+          <template #extension>
+            <div class="custom-extension">
+              <div v-if="showEdit" style="display: flex; align-items: center">
+                <bk-input ref="inputRef" v-model="optionName" size="small" @enter="addOption" />
+                <done style="font-size: 22px; color: #2dcb56; cursor: pointer; margin-left: 6px" @click="addOption" />
+                <error style="font-size: 16px; color: #c4c6cc; cursor: pointer; margin-left: 2px"
+                  @click="showEdit = false" />
+              </div>
+              <div v-else style="display: flex; align-items: center; justify-content: center">
+                <span style="display: flex; align-items: center; cursor: pointer" @click="handleShowEdit">
+                  <plus style="font-size: 20px" />
+                  新增
+                </span>
+                <span style="display: flex; align-items: center; position: absolute; right: 12px">
+                  <bk-divider direction="vertical" type="solid" />
+                  <spinner v-if="isLoading" style="font-size: 14px; color: #3a84ff" />
+                  <right-turn-line v-else style="font-size: 14px; cursor: pointer" @click="refresh" />
+                </span>
+              </div>
+            </div>
+          </template>
+        </bk-select>
+      </div>
+    </div>
+    <div>
+      <div>
+        <h4>prefix</h4>
+        <bk-select class="bk-select" v-model="selectedValue" :input-search="false" filterable multiple>
+          <template #prefix>
+            <span style="padding: 0 12px; line-height: 32px; background: #ccc">运动选项</span>
+          </template>
+          <bk-option v-for="(item, index) in datasource" :id="item.value" :key="index" :name="item.label" />
+        </bk-select>
+      </div>
+      <div>
+        <h4>prefix(属性)</h4>
+        <bk-select class="bk-select" v-model="selectedValue" :input-search="false" prefix="运动选项" filterable multiple>
+          <bk-option v-for="(item, index) in datasource" :id="item.value" :key="index" :name="item.label" />
+        </bk-select>
+      </div>
+      <div>
+        <h4>prefix(属性)</h4>
+        <bk-select class="bk-select" v-model="selectedValue" :auto-height="false" multiple-mode="tag" prefix="运动选项"
+          collapse-tags filterable multiple show-select-all>
+          <bk-option v-for="(item, index) in datasource" :id="item.value" :key="index" :name="item.label" />
+        </bk-select>
+      </div>
+    </div>
+    <div>
+      <div>
+        <h4>optionRender</h4>
+        只用使用list 列表才会有效。
+        <bk-select class="bk-select" v-model="selectedValue" :input-search="false" :list="datasource"
+          display-key="label" id-key="value" enable-virtual-render filterable multiple>
+          <template #optionRender="{ item }">
+            <span>{{ item.label }}</span>
+          </template>
+        </bk-select>
+      </div>
+      <div>
+        <h4>optionRender</h4>
+        <bk-select class="bk-select" v-model="selectedValue2" :input-search="false" :list="datasource"
+          display-key="label" id-key="value" filterable>
+          <template #optionRender="{ item }">
+            <span>{{ item.label }}</span>
+            <span>({{ item.value }})</span>
+          </template>
+        </bk-select>
+      </div>
+      <div>
+        <h4>option</h4>
+        <bk-select class="bk-select" v-model="selectedValue2" :input-search="false" filterable multiple>
+          <bk-option v-for="(item, index) in datasource" :id="item.value" :key="index" :name="item.label">
+            <div style="width: 100%" @click.prevent.stop>
+              <bk-input v-if="editOption === item.value" style="width: 100px" @enter="addOptions" />
+              <div v-else @click="handleEditOption(item.value)">
+                {{ item.label }}
+              </div>
+            </div>
+          </bk-option>
+        </bk-select>
+      </div>
+      <!-- suffix -->
+      <div>
+        <h4>suffix icon</h4>
+        <bk-select class="bk-select" v-model="selectedValue2" :input-search="false" :list="datasource"
+          display-key="label" id-key="value" filterable :clearable="false">
+          <template #suffix>
+            <Done />
+          </template>
+        </bk-select>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+import { Done, Error, Plus, RightTurnLine, Spinner } from '@bkui-vue/lib/icon';
+
+const datasource = ref([
+  {
+    value: 1,
+    label: '爬山',
+  },
+  {
+    value: 2,
+    label: '跑步',
+  },
+  {
+    value: 3,
+    label: '未知',
+  },
+  {
+    value: 4,
+    label: '健身',
+  },
+  {
+    value: 5,
+    label: '骑车',
+  },
+  {
+    value: 6,
+    label: '跳舞',
+  },
+]);
+const selectedValue = ref([1, 2, 3, 4]);
+const selectedValue2 = ref(1);
+
+const showEdit = ref(false);
+const handleToggle = value => {
+  console.log(value);
+};
+const inputRef = ref();
+const handleShowEdit = () => {
+  showEdit.value = true;
+  setTimeout(() => {
+    inputRef.value.focus();
+  });
+};
+const optionName = ref('');
+const addOption = () => {
+  if (optionName.value.trim()) {
+    datasource.value.push({
+      value: Math.random() + optionName.value,
+      label: optionName.value,
+    });
+    optionName.value = '';
+  }
+  showEdit.value = false;
+};
+
+const isLoading = ref(false);
+const refresh = () => {
+  isLoading.value = true;
+  setTimeout(() => {
+    isLoading.value = false;
+  }, 2000);
+};
+
+const editOption = ref('');
+const handleEditOption = value => {
+  editOption.value = value;
+};
+const addOptions = value => {
+  datasource.value.push({
+    value,
+    label: value,
+  });
+  editOption.value = '';
+};
+</script>
+<style lang="postcss" scoped>
+.demo>div {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.bk-select {
+  width: 300px;
+  margin-right: 20px;
+}
+
+.custom-extension {
+  width: 100%;
+  color: #63656e;
+  padding: 0 12px;
+}
+</style>

package/knowledge/examples/select/select-style-demo.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="style-demo">
+    <!-- small -->
+    <p>
+      small
+      <bk-select
+        class="bk-select"
+        v-model="selectedValue"
+        size="small"
+      >
+        <bk-option
+          v-for="(item, index) in datasource"
+          :id="item.value"
+          :key="index"
+          :name="item.label"
+        />
+      </bk-select>
+    </p>
+    <!-- default -->
+    <p>
+      default
+      <bk-select
+        class="bk-select"
+        v-model="selectedValue"
+      >
+        <bk-option
+          v-for="(item, index) in datasource"
+          :id="item.value"
+          :key="index"
+          :name="item.label"
+        />
+      </bk-select>
+    </p>
+    <!-- large -->
+    <p>
+      large
+      <bk-select
+        class="bk-select"
+        v-model="selectedValue"
+        :inputTooltipsOptions="{ sameWidth: false }"
+        size="large"
+        filterable
+        multiple
+      >
+        <bk-option
+          v-for="(item, index) in datasource"
+          :id="item.value"
+          :key="index"
+          :name="item.label"
+        />
+      </bk-select>
+    </p>
+    <!-- simplicity small -->
+    <p>
+      simplicity tag
+      <bk-select
+        class="bk-select"
+        v-model="selectedValue"
+        behavior="simplicity"
+        multiple-mode="tag"
+        collapse-tags
+        filterable
+        multiple
+      >
+        <bk-option
+          v-for="(item, index) in datasource"
+          :id="item.value"
+          :key="index"
+          :name="item.label"
+        />
+      </bk-select>
+    </p>
+  </div>
+</template>
+<script setup>
+  import { ref } from 'vue';
+  const datasource = ref([
+    {
+      value: 'climbing',
+      label: '爬山',
+    },
+    {
+      value: 'running',
+      label: '跑步',
+    },
+    {
+      value: 'unknow',
+      label: '未知',
+    },
+    {
+      value: 'fitness',
+      label: '健身',
+    },
+    {
+      value: 'bike',
+      label: '骑车',
+    },
+    {
+      value: 'dancing',
+      label: '跳舞',
+    },
+    {
+      value: 'sleep',
+      label: '睡觉',
+      disabled: true,
+    },
+  ]);
+  const selectedValue = ref('running');
+</script>
+<style scoped>
+  .style-demo {
+    display: flex;
+  }
+
+  .bk-select {
+    width: 200px;
+    margin-right: 20px;
+  }
+</style>

package/knowledge/examples/select/select-tree-demo.vue

@@ -0,0 +1,130 @@
+<template>
+  <bk-select ref="selectRef" multiple-mode="tag" custom-content multiple display-key="name" id-key="id" collapseTags
+    :autoHeight="false" @tag-remove="handleRemoveTag">
+    <bk-tree ref="treeRef" style="color: #63656e" :data="treeData" children="children" label="name" show-checkbox
+      @node-checked="handleNodeChecked" />
+  </bk-select>
+</template>
+<script setup>
+import { computed, ref } from 'vue';
+
+const treeData = ref([
+  {
+    name: '方案成熟',
+    isOpen: true,
+    content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+    id: '1',
+    children: [
+      {
+        name: 'child-1-方案成熟-拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        id: '1-1',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        name: 'child-1-覆盖全面',
+        id: '1-2',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+        children: [],
+      },
+      {
+        name: 'child-1-开放平台',
+        id: '1-3',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        children: [
+          {
+            name: 'child-1-方案成熟',
+            id: '1-3-1',
+            content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+            children: [],
+          },
+          {
+            name: 'child-1-覆盖全面',
+            id: '1-3-2',
+            content:
+              '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+            children: [],
+          },
+          {
+            name: 'child-1-开放平台',
+            id: '1-3-3',
+            isOpen: true,
+            content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: '覆盖全面',
+    id: '2',
+    content:
+      '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+    id: '//',
+    children: [
+      {
+        name: 'child-2-方案成熟',
+        id: '2-1',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        name: 'child-2-覆盖全面',
+        id: '2-2',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+        children: [],
+      },
+      {
+        name: 'child-2-开放平台',
+        id: '2-3',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        children: [],
+      },
+    ],
+  },
+  {
+    name: '开放平台',
+    id: '3',
+    content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+    children: [
+      {
+        name: 'child-3-方案成熟',
+        id: '3-1',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        name: 'child-3-覆盖全面',
+        id: '3-2',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+        children: [],
+      },
+      {
+        name: 'child-3-开放平台',
+        id: '3-3',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        children: [],
+      },
+    ],
+  },
+]);
+const checked = ref([]);
+const treeRef = ref();
+const selectRef = ref();
+const handleNodeChecked = nodes => {
+  // 勾选节点(移除的时候需要找到这个节点)
+  checked.value = nodes;
+  // 设置select数据(需要配置displayKey和idKey属性才能识别)
+  selectRef.value.setSelected(nodes)
+};
+const handleRemoveTag = id => {
+  // 查找勾选节点
+  const node = checked.value.find(node => node.id === id);
+  // 设置取消树的勾选状态
+  treeRef.value.setChecked(node, false);
+};
+</script>

package/knowledge/examples/select/select-trigger-demo.vue

@@ -0,0 +1,74 @@
+<template>
+  <div style="display: flex">
+    <BkButton style="margin-right: 10px;" @click="handleChangeTrigger">
+      {{ `${trigger === 'default' ? '默认方式' : '手动方式'}` }}（点击修改）
+    </BkButton>
+    <template v-if="trigger === 'manual'">
+      <BkButton style="margin-right: 10px;" @click="showPopover">
+        显示Content
+      </BkButton>
+      <BkButton style="margin-right: 10px;" @click="hidePopover">
+        隐藏Content
+      </BkButton>
+    </template>
+    <bk-select class="bk-select" v-model="selectedValue" auto-focus filterable :trigger="trigger" ref="selectRef">
+      <bk-option v-for="(item, index) in datasource" :disabled="item.disabled" :id="item.value" :key="index"
+        :name="item.label" />
+    </bk-select>
+  </div>
+</template>
+<script setup>
+import { onBeforeMount, ref } from 'vue';
+import BkButton from '@bkui-vue/button';
+
+const datasource = ref([
+  {
+    value: 'climbing',
+    label: '爬山',
+  },
+  {
+    value: { a: 123 },
+    label: '跑步',
+  },
+  {
+    value: { b: 456 },
+    label: '未知',
+  },
+  {
+    value: 'fitness',
+    label: '健身',
+  },
+  {
+    value: 'bike',
+    label: '骑车',
+  },
+  {
+    value: 'dancing',
+    label: '跳舞',
+  },
+  {
+    value: 'sleep',
+    label: '睡觉',
+    disabled: true,
+  },
+]);
+
+const selectedValue = ref({ b: 456 });
+
+const trigger = ref('manual')
+const handleChangeTrigger = () => {
+  trigger.value = trigger.value === 'default' ? 'manual' : 'default'
+}
+const selectRef = ref()
+const showPopover = () => {
+  selectRef.value?.showPopover()
+}
+const hidePopover = () => {
+  selectRef.value?.hidePopover()
+}
+</script>
+<style scoped>
+.bk-select {
+  width: 300px;
+}
+</style>