@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/slider/slider.tsx

@@ -0,0 +1,295 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { defineComponent } from 'vue';
+
+import DemoBox from '../../components/demo-box';
+import DemoTitle from '../../components/demo-title';
+import PropsBox from '../../components/props-box';
+import { IPropsTableItem } from '../../typings';
+import BaseDemo from './base-demo.vue';
+import CustomDemo from './custom-demo.vue';
+import InputDemo from './input-demo.vue';
+import StepDemo from './step-demo.vue';
+import VerticalDemo from './vertical-demo.vue';
+const sliderProps: IPropsTableItem[] = [
+  {
+    name: 'model-value / v-model',
+    type: 'Number | Array',
+    default: null,
+    desc: '滑动条的当前值，可以是单个数值或数组，数组用于范围选择',
+    optional: [],
+  },
+  {
+    name: 'extCls',
+    type: 'String',
+    default: '',
+    desc: '自定义类名',
+    optional: [],
+  },
+  {
+    name: 'vertical',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否为垂直模式',
+    optional: [],
+  },
+  {
+    name: 'height',
+    type: 'String',
+    default: '200px',
+    desc: '滑动选择器高度，vertical为true时使用',
+    optional: [],
+  },
+  {
+    name: 'disable',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否禁用滑块',
+    optional: [],
+  },
+  {
+    name: 'showTip',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否显示提示信息',
+    optional: [],
+  },
+  {
+    name: 'maxValue',
+    type: 'Number',
+    default: 100,
+    desc: '最大值',
+    optional: [],
+  },
+  {
+    name: 'minValue',
+    type: 'Number',
+    default: '0',
+    desc: '最小值',
+    optional: [],
+  },
+  {
+    name: 'step',
+    type: 'Number',
+    default: 1,
+    desc: '步长',
+    optional: [],
+  },
+  {
+    name: 'range',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否为分段式',
+    optional: [],
+  },
+  {
+    name: 'showInterval',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否显示刻度间隔',
+    optional: [],
+  },
+  {
+    name: 'showIntervalLabel',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否显示刻度间隔的文字',
+    optional: [],
+  },
+  {
+    name: 'showButtonLabel',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否显示滑块的值，不可与showIntervalLabel同时使用',
+    optional: [],
+  },
+  {
+    name: 'showBetweenLabel',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否只显示首尾刻度',
+    optional: [],
+  },
+  {
+    name: 'showInput',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否显示输入框',
+    optional: [],
+  },
+  {
+    name: 'customContent',
+    type: 'Object',
+    default: null,
+    desc: '自定义内容',
+    optional: [],
+  },
+  {
+    name: 'formatterLabel',
+    type: 'Function',
+    default: (value: number) => value,
+    desc: '自定义刻度标签格式',
+    optional: [],
+  },
+  {
+    name: 'formatterButtonLabel',
+    type: 'Function',
+    default: (value: number) => value,
+    desc: '自定义滑块下标签格式',
+    optional: [],
+  },
+  {
+    name: 'formatterTipLabel',
+    type: 'Function',
+    default: (value: number) => value,
+    desc: '自定义提示标签格式',
+    optional: [],
+  },
+  {
+    name: 'labelClick',
+    type: 'Boolean | Function',
+    default: 'false',
+    desc: '刻度标签点击事件，可以设置true或者false，设置true时触发会设置当前值为label所对应的step值，也可以设置自定义函数，返回true或者false或者number，返回true时，会触发change事件，返回number时，会设置当前值为返回的number值，返回false时，不触发change事件',
+    optional: [],
+  },
+];
+
+const sliderEvents: IPropsTableItem[] = [
+  {
+    name: 'update:modelValue',
+    type: 'Function',
+    default: '-',
+    desc: '更新 modelValue 时触发的回调',
+    optional: [],
+  },
+  {
+    name: 'change',
+    type: 'Function',
+    default: '-',
+    desc: '值变化时的回调',
+    optional: [],
+  },
+];
+
+const sliderSlots: IPropsTableItem[] = [
+  {
+    name: 'default',
+    type: 'Slot',
+    default: '-',
+    desc: '滑块的默认插槽，用于自定义内容',
+    optional: [],
+  },
+  {
+    name: 'start',
+    type: 'Slot',
+    default: '-',
+    desc: '滑块起始位置的插槽',
+    optional: [],
+  },
+  {
+    name: 'end',
+    type: 'Slot',
+    default: '-',
+    desc: '滑块结束位置的插槽',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  setup() {},
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='用于操作反馈的中间态(loading)、成功、失败等'
+          designLink='https://bkdesign.bk.tencent.com/design/139'
+          name='Slider 滑动选择器'
+        />
+        <DemoBox
+          componentName='slider'
+          demoName='base-demo'
+          desc='使用 v-model 将变量与 slider 滑杆进行数据绑定，默认最大值 max-value 为 100, 默认最小值为 min-value 0'
+          subtitle=''
+          title='基础用法'
+        >
+          <BaseDemo></BaseDemo>
+        </DemoBox>
+        <DemoBox
+          componentName='slider'
+          demoName='step-demo'
+          desc=''
+          subtitle=''
+          title='刻度'
+        >
+          <StepDemo></StepDemo>
+        </DemoBox>
+        <DemoBox
+          componentName='slider'
+          demoName='input-demo'
+          desc=''
+          subtitle=''
+          title='带输入'
+        >
+          <InputDemo></InputDemo>
+        </DemoBox>
+        <DemoBox
+          componentName='slider'
+          demoName='vertical-demo'
+          desc=''
+          subtitle=''
+          title='垂直'
+        >
+          <VerticalDemo></VerticalDemo>
+        </DemoBox>
+        <DemoBox
+          componentName='slider'
+          demoName='custom-demo'
+          desc=''
+          subtitle=''
+          title='自定义'
+        >
+          <CustomDemo></CustomDemo>
+        </DemoBox>
+        <PropsBox
+          propsData={sliderProps}
+          subtitle=''
+          title='Slider 属性'
+        />
+        <PropsBox
+          propsData={sliderEvents}
+          subtitle=''
+          title='Slider 事件'
+        />
+        <PropsBox
+          propsData={sliderSlots}
+          subtitle=''
+          title='Slider 插槽'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/slider/step-demo.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="demo">
+    <div>
+      <bk-slider
+        v-model="demo1"
+        :step="5"
+      />
+    </div>
+    <div :style="{ marginTop: '30px' }">
+      <bk-slider
+        v-model="demo2"
+        :step="5"
+        range
+        show-interval
+      />
+    </div>
+    <div :style="{ marginTop: '30px' }">
+      <bk-slider
+        v-model="demo1"
+        :step="5"
+        show-interval
+        show-interval-label
+      />
+    </div>
+    <div :style="{ marginTop: '50px' }">
+      <bk-slider
+        v-model="demo1"
+        :formatter-label="v => `${v}%`"
+        :step="5"
+        show-interval
+        show-interval-label
+      />
+    </div>
+    <div :style="{ marginTop: '50px' }">
+      <bk-slider
+        v-model="demo1"
+        :step="5"
+        show-button-label
+        show-interval
+      />
+    </div>
+  </div>
+</template>
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  import BkSlider from '@bkui-vue/slider';
+
+  export default defineComponent({
+    name: 'SiteBkSlider',
+    components: {
+      BkSlider,
+    },
+    setup() {
+      const demo1 = ref(20);
+      const demo2 = ref([5, 20]);
+      const demo3 = ref(10);
+      return {
+        demo1,
+        demo2,
+        demo3,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .demo {
+    width: 100%;
+  }
+</style>

package/knowledge/examples/slider/vertical-demo.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="demo">
+    <div>
+      <bk-slider
+        v-model="demo1"
+        vertical
+      />
+    </div>
+  </div>
+</template>
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  import BkSlider from '@bkui-vue/slider';
+
+  export default defineComponent({
+    name: 'SiteBkSlider',
+    components: {
+      BkSlider,
+    },
+    setup() {
+      const demo1 = ref(20);
+      return {
+        demo1,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .demo {
+    width: 100%;
+  }
+</style>

package/knowledge/examples/slider.tsx

@@ -0,0 +1,143 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+import { defineComponent, ref } from 'vue';
+
+import Slider from '@bkui-vue/slider';
+
+export default defineComponent({
+  name: 'Slider',
+  setup() {
+    const value = ref(0);
+    const value1 = ref(35);
+    const value3 = ref([5, 20]);
+    const value4 = ref(20);
+    const value5 = ref(0);
+    const value6 = ref(20);
+    const value7 = ref(10);
+    const value8 = ref(10);
+    const value9 = ref([5, 20]);
+    const value10 = ref(10);
+    const value11 = ref(20);
+    const value12 = ref(20);
+    const customContent = {
+      0: {
+        label: '糟糕',
+      },
+      20: {
+        label: '一般',
+      },
+      40: {
+        label: '还行',
+        tip: '还行勉勉强强',
+      },
+      60: {
+        label: '满意',
+      },
+      80: {
+        label: '很好',
+      },
+      100: {
+        label: '非常满意',
+      },
+    };
+    return () => (
+      <div style={{ padding: '20px' }}>
+        <div style={{ marginTop: '30px', color: '#2dcb56' }}>{value.value}</div>
+        <Slider v-model={value.value}></Slider>
+        <div style={{ marginTop: '30px', color: '#2dcb56' }}>{value1.value}</div>
+        <Slider
+          v-model={value1.value}
+          disable
+        ></Slider>
+        <div style={{ marginTop: '30px', color: '#2dcb56' }}>{value3.value.join(',')}</div>
+        <Slider
+          v-model={value3.value}
+          range
+        ></Slider>
+        <div style={{ marginTop: '30px', color: '#2dcb56' }}>{value4.value}</div>
+        <Slider
+          v-model={value4.value}
+          maxValue={500}
+          showBetweenLabel
+        ></Slider>
+        <div style={{ marginTop: '30px', color: '#2dcb56' }}>{value5.value}</div>
+        <Slider
+          v-model={value5.value}
+          step={5}
+          showButtonLabel
+          showInterval
+        ></Slider>
+        <div style={{ marginTop: '30px', color: '#2dcb56' }}>{value6.value}</div>
+        <Slider
+          v-model={value6.value}
+          step={10}
+          showInterval
+          showIntervalLabel
+        ></Slider>
+        <div style={{ marginTop: '30px', color: '#2dcb56' }}>{value7.value}</div>
+        <Slider
+          v-model={value7.value}
+          formatterLabel={(value: number) => `${value}%`}
+          step={10}
+          showInterval
+          showIntervalLabel
+        ></Slider>
+        <div style={{ marginTop: '30px', color: '#2dcb56' }}>{value8.value}</div>
+        <Slider
+          v-model={value8.value}
+          showButtonLabel
+          showInput
+        ></Slider>
+        <div style={{ marginTop: '30px', color: '#2dcb56' }}>{value9.value.join(',')}</div>
+        <Slider
+          v-model={value9.value}
+          range
+          showInput
+        ></Slider>
+        <div style={{ marginTop: '30px', color: '#2dcb56' }}>{value10.value}</div>
+        <Slider
+          v-model={value10.value}
+          vertical
+        ></Slider>
+        <div style={{ marginTop: '30px', color: '#2dcb56' }}>{value11.value}</div>
+        <Slider
+          v-model={value11.value}
+          formatterLabel={(value: number) => `${value}℃`}
+          step={20}
+          showInterval
+          showIntervalLabel
+          vertical
+        ></Slider>
+        <div style={{ marginTop: '30px', color: '#2dcb56' }}>{value12.value}</div>
+        <Slider
+          v-model={value12.value}
+          customContent={customContent}
+          step={20}
+        ></Slider>
+      </div>
+    );
+  },
+});

package/knowledge/examples/start/index.tsx

@@ -0,0 +1,42 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+import { defineComponent } from 'vue';
+
+import DemoTitle from '../../components/demo-title';
+import StartMd from './start.md';
+export default defineComponent({
+  render() {
+    return (
+      <div style='background: white'>
+        <DemoTitle
+          desc='本组件库基于Vue3研发，本节介绍如何在项目中结合 webpack 一起使用 @blueking/bkui-vue。'
+          name='快速上手'
+        />
+        <StartMd />
+      </div>
+    );
+  },
+});

package/knowledge/examples/start/start.md

@@ -0,0 +1,86 @@
+### 使用用 bkui-vue
+
+`bkui-vue` 支持两种引用方式，一种是 ` 完整引用`，一种是 `按需引入 `部分组件。
+
+### 完整引用
+
+在您的项目入口如下配置：
+
+```js
+import { createApp } from 'vue';
+import App from './App.vue';
+// 全量引入 bkui-vue
+import bkui from 'bkui-vue';
+// 全量引入 bkui-vue 样式
+import 'bkui-vue/dist/style.css';
+
+createApp(App).use(bkui).mount('#app');
+```
+
+### 按需引用
+
+`bkui-vue`是天然支持 `import { Button } from 'bkui-vue'` 这种语法实现按需引入的。
+
+如果在使用中遇到 `less` 文件没有被loader解析情况 则需要对应安装 `less-loader`并配置到您的项目构建中即可
+
+之后就可以用如下语法形式来实现按需引用了
+
+```js
+import { Button } from 'bkui-vue';
+```
+
+### 构建配置
+
+:::info
+如果您的项目很早就使用了`bkui-vue` 同时也使用了完整引入方式
+:::
+:::info
+或者您项目只想使用完整引入但是需要使用到 类似`import { Button } from 'bkui-vue' `按需语法引入 `dts `组件类型文件
+:::
+:::info
+或者 您并不想安装 `less` 解析器
+:::
+:::info
+那么您可以在您的项目构建工具 加上下面一行简单的配置即可完整使用了
+:::
+
+- [Webpack 配置](https://webpack.js.org/configuration/resolve/#resolvealias)
+
+  ```
+  // webpack config 配置
+  {
+    ...
+    resolve: {
+      alias: {
+        'bkui-vue': 'bkui-vue/dist/index.esm.js'
+      }
+    }
+  }
+  ```
+
+- [Vite 配置](https://vitejs.dev/config/shared-options#resolve-alias)
+
+  ```js
+  // vite config 配置
+  {
+    ...
+    resolve: {
+      alias: {
+        'bkui-vue': 'bkui-vue/dist/index.esm.js'
+      }
+    }
+  }
+  ```
+
+### 组件库暴露出来的一些工具方法
+
+组件库暴露出了内部一些与组件逻辑无关的、通用的方法。目前暴露出来的有1个，如下：
+
+:::info
+无论是全量引入还是按需引入组件库或者是根本没有引入组件库，都可以使用如下方式使用组件库提供的工具方法
+:::
+
+```js
+// 单独使用图标组件使用，可以使用如下方式引入
+import Info from 'bkui-vue/lib/icon/info';
+```

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

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <bk-steps
+      :cur-step="2"
+      status="error"
+    />
+  </div>
+</template>