@blueking/bkui-knowledge 0.0.1-beta.1

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

@@ -0,0 +1,99 @@
+<template>
+  <bk-search-select
+    v-model="value"
+    :data="data"
+    :validate-values="validateValues"
+  />
+</template>
+<script setup>
+  import { ref } from 'vue';
+  const data = [
+    {
+      name: '实例状态',
+      id: '1',
+      multiple: true,
+      placeholder: '请选择/请输入',
+      noValidate: true,
+      children: [
+        {
+          name: '创建中',
+          id: '1-2',
+        },
+        {
+          name: '运行中',
+          id: '1-3',
+          disabled: false,
+        },
+        {
+          name: '已关机',
+          id: '1-4',
+        },
+      ],
+    },
+    {
+      name: '实例业务',
+      id: '2',
+      placeholder: '输入格式为XXX',
+      noValidate: false,
+      children: [
+        {
+          name: '王者荣耀',
+          id: '2-1',
+          disabled: false,
+        },
+        {
+          name: '刺激战场',
+          id: '2-2',
+        },
+        {
+          name: '绝地求生',
+          id: '2-3',
+        },
+      ],
+      conditions: [
+        {
+          name: '>',
+          id: '>',
+        },
+        {
+          name: '>=',
+          id: '>=',
+        },
+        {
+          name: '<=',
+          id: '<=',
+        },
+        {
+          name: '<',
+          id: '<',
+        },
+        {
+          name: '=',
+          id: '=',
+        },
+      ],
+    },
+    {
+      name: 'IP地址',
+      id: '3',
+      disabled: true,
+    },
+    {
+      name: '实例名',
+      id: '4',
+    },
+    {
+      name: '实例地址',
+      id: '5',
+    },
+    {
+      name: '测试六',
+      id: '6',
+    },
+  ];
+  const value = ref([]);
+  const validateValues = async (item, values) => {
+    console.info(item, values);
+    return !item ? '格式错误' : true;
+  };
+</script>

package/knowledge/examples/search-select/value-behavior.vue

@@ -0,0 +1,56 @@
+<template>
+  <bk-search-select
+    v-model="value"
+    :data="data"
+    :unique-select="true"
+    value-behavior="need-key"
+  />
+</template>
+<script setup>
+  import { ref, shallowRef } from 'vue';
+  const data = shallowRef([
+    {
+      name: '实例状态',
+      id: '1',
+      multiple: true,
+      children: [
+        {
+          name: 'redis 创 建 中 ',
+          id: '1-2',
+        },
+        {
+          name: '运行中',
+          id: '1-3',
+        },
+        {
+          name: '已关机',
+          id: '1-4',
+        },
+      ],
+    },
+    {
+      name: '实例业务',
+      id: '2',
+      children: [
+        {
+          name: '王者荣耀',
+          id: '2-1',
+          disabled: false,
+        },
+        {
+          name: '刺激战场',
+          id: '2-2',
+        },
+        {
+          name: '绝地求生',
+          id: '2-3',
+        },
+      ],
+    },
+    {
+      name: 'IP地址',
+      id: '3',
+    },
+  ]);
+  const value = ref([]);
+</script>

package/knowledge/examples/select/select-allow-create.vue

@@ -0,0 +1,95 @@
+<template>
+  <div style="display: flex">
+    <bk-select
+      class="bk-select"
+      v-model="selectedValueMultiple"
+      multiple-mode="tag"
+      allow-create
+      filterable
+      multiple
+      show-select-all
+    >
+      <bk-option
+        v-for="(item, index) in datasource"
+        :disabled="item.disabled"
+        :id="item.value"
+        :key="index"
+        :name="item.label"
+      />
+    </bk-select>
+    <bk-select
+      class="bk-select"
+      v-model="selectedValueMultiple"
+      allow-create
+      filterable
+      multiple
+      show-select-all
+    >
+      <bk-option
+        v-for="(item, index) in datasource"
+        :disabled="item.disabled"
+        :id="item.value"
+        :key="index"
+        :name="item.label"
+      />
+    </bk-select>
+    <bk-select
+      class="bk-select"
+      v-model="selectedValueSingle"
+      allow-create
+      filterable
+    >
+      <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 { ref } from 'vue';
+
+  const selectedValueMultiple = ref('running');
+  const selectedValueSingle = ref('');
+
+  const datasource = [
+    {
+      value: 'climbing',
+      label: '爬山',
+    },
+    {
+      value: 'running',
+      label: '跑步',
+    },
+    {
+      value: 'unknow',
+      label: '未知',
+    },
+    {
+      value: 'fitness',
+      label: '健身',
+    },
+    {
+      value: 'bike',
+      label: '骑车',
+    },
+    {
+      value: 'dancing',
+      label: '跳舞',
+    },
+    {
+      value: 'sleep',
+      label: '睡觉',
+      disabled: true,
+    },
+  ];
+</script>
+<style scoped>
+  .bk-select {
+    width: 300px;
+    margin-right: 10px;
+  }
+</style>

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

@@ -0,0 +1,116 @@
+<template>
+  <div style="display: flex">
+    <bk-select
+      class="bk-select"
+      v-model="selectedValue"
+      auto-focus
+      filterable
+      @select="handleSelect"
+    >
+      <bk-option
+        v-for="(item, index) in datasource"
+        :disabled="item.disabled"
+        :id="item.value"
+        :key="index"
+        :name="item.label"
+      />
+    </bk-select>
+    <bk-select
+      style="margin-left: 10px"
+      class="bk-select"
+      v-model="listValue"
+      :list="datasourceList"
+      disable-focus-behavior
+      filterable
+      multiple
+    />
+  </div>
+</template>
+<script setup>
+  import { onBeforeMount, ref } from 'vue';
+  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 listValue = ref(1);
+  const datasourceList = ref([
+    {
+      value: 'climbing',
+      label: '爬山',
+    },
+    {
+      value: { a: 123 },
+      label: '跑步',
+    },
+    {
+      value: { b: 456 },
+      label: '未知',
+      disabled: true
+    },
+    {
+      value: 'fitness',
+      label: '健身',
+    },
+    {
+      value: 'bike',
+      label: '骑车',
+    },
+    {
+      value: 'dancing',
+      label: '跳舞',
+    },
+    {
+      value: 'sleep',
+      label: '睡觉',
+      disabled: true,
+    },
+  ]);
+
+  const handleSelect = v => {
+    console.log(v);
+  };
+
+  onBeforeMount(() => {
+    new Array(100).fill(0).forEach((item, index) => {
+      datasourceList.value.push({
+        value: index,
+        label: `list-${index}`,
+      });
+    });
+  });
+</script>
+<style scoped>
+  .bk-select {
+    width: 300px;
+  }
+</style>

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="demo">
+    <bk-select
+      class="bk-select"
+      v-model="selectedValue"
+      filterable
+      multiple
+      show-select-all
+    >
+      <bk-option-group
+        label="分组1"
+        collapsible
+      >
+        <bk-option
+          v-for="(item, index) in datasource"
+          :id="item.value"
+          :key="index"
+          :name="item.label"
+        />
+      </bk-option-group>
+      <bk-option-group
+        label="分组2"
+        collapsible
+      >
+        <bk-option
+          label="运动-1"
+          value="1001"
+        />
+        <bk-option
+          label="运动-2"
+          value="1002"
+        />
+        <bk-option
+          label="运动-3"
+          value="1003"
+        />
+      </bk-option-group>
+    </bk-select>
+  </div>
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  import { BkOptionGroup } from '@bkui-vue/select';
+
+  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('');
+</script>
+<style scoped>
+  .demo {
+    display: flex;
+  }
+
+  .bk-select {
+    width: 300px;
+    margin-right: 20px;
+  }
+</style>

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

@@ -0,0 +1,140 @@
+<template>
+  <div class="demo">
+    <bk-select
+      class="bk-select"
+      v-model="selectedValue"
+      multiple
+      show-select-all
+      @deselect="handleDeselect"
+      @select="handleSelect"
+    >
+      <bk-option
+        v-for="(item, index) in datasource"
+        :id="item.value"
+        :key="index"
+        :name="item.label"
+      />
+    </bk-select>
+    <bk-select
+      selected-style="checkbox"
+      class="bk-select"
+      v-model="selectedAllValue"
+      all-option-id="all"
+      filterable
+      multiple
+      show-all
+      show-select-all
+    >
+      <bk-option
+        v-for="(item, index) in datasource"
+        :disabled="item.disabled"
+        :id="item.value"
+        :key="index"
+        :name="item.label"
+      />
+    </bk-select>
+    <bk-select
+      class="bk-select"
+      v-model="selectedAllValue2"
+      multiple-mode="tag"
+      filterable
+      multiple
+      show-all
+      show-select-all
+      @tag-remove="tagRemove"
+    >
+      <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="listValue"
+      :list="datasourceList"
+      multiple-mode="tag"
+      collapse-tags
+      filterable
+      multiple
+      show-select-all
+      @change="handleSelectChange"
+    />
+  </div>
+</template>
+<script setup>
+  import { onBeforeMount, 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', 'bike']);
+  const selectedAllValue = ref(['all'])
+  const selectedAllValue2 = ref(['climbing', 'running', 'unknow', 'fitness', 'bike', 'dancing', 'sleep'])
+
+  const listValue = ref([1, 2, 3, 4, 5, 6, 7, 8]);
+  const datasourceList = ref([]);
+
+  const tagRemove = val => {
+    console.log(val);
+  };
+
+  const handleSelect = v => {
+    console.log('select', v);
+  };
+
+  const handleDeselect = v => {
+    console.log('deselect', v);
+  };
+
+  const handleSelectChange = (v) => {
+    console.log(v);
+  };
+
+  onBeforeMount(() => {
+    new Array(10).fill(0).forEach((item, index) => {
+      datasourceList.value.push({
+        value: index,
+        label: `list-${index}`,
+      });
+    });
+  });
+</script>
+<style scoped>
+  .demo {
+    display: flex;
+  }
+
+  .bk-select {
+    width: 300px;
+    margin-right: 20px;
+  }
+</style>

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

@@ -0,0 +1,68 @@
+<template>
+  <bk-select
+    class="bk-select"
+    v-model="selectedValue"
+    :scroll-loading="scrollLoading"
+    filterable
+    @scroll-end="handleScrollEnd"
+  >
+    <bk-option
+      v-for="item in datasource"
+      :disabled="item.disabled"
+      :id="item.value"
+      :key="item.value"
+      :name="item.label"
+    />
+  </bk-select>
+</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('dancing');
+  const scrollLoading = ref(false);
+  const handleScrollEnd = () => {
+    scrollLoading.value = true;
+    setTimeout(() => {
+      datasource.value.push({
+        value: new Date().getTime(),
+        label: `滚动加载${new Date().getTime()}`,
+      });
+      scrollLoading.value = false;
+    }, 1000);
+  };
+</script>
+<style scoped>
+  .bk-select {
+    width: 300px;
+  }
+</style>