@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/popover/index.tsx

@@ -0,0 +1,425 @@
+/* eslint-disable */
+/*
+* 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 type { IPropsTableItem } from '../../typings';
+
+import Always from './demo/always.vue';
+import Base from './demo/base.vue';
+import Callback from './demo/callback.vue';
+import ManualTrigger from './demo/manual-trigger.vue';
+import MouseEvent from './demo/mouse-event.vue';
+import Position from './demo/position.vue';
+import HideIgnoreReference from './demo/hide-ignore-reference.vue';
+import Slot from './demo/slot.vue';
+
+const props: IPropsTableItem[] = [
+  {
+    name: 'content',
+    type: 'String',
+    default: '',
+    desc: '显示的内容',
+    optional: [],
+  },
+  {
+    name: 'placement',
+    type: 'String',
+    default: 'top',
+    desc: '组件显示位置',
+    optional: ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'],
+  },
+  {
+    name: 'theme',
+    type: 'String',
+    default: 'dark',
+    desc: '组件主题色',
+    optional: ['dark', 'light'],
+  },
+  {
+    name: 'trigger',
+    type: 'String',
+    default: 'hover',
+    desc: '触发方式。如果值为manual，则通过isShow控制显示、隐藏',
+    optional: ['click', 'hover', 'manual'],
+  },
+  {
+    name: 'isShow',
+    type: 'Boolean',
+    default: 'false',
+    desc: '控制显示、隐藏',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'arrow',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否显示箭头',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'width',
+    type: 'Number, String',
+    default: 'auto',
+    desc: '提示框的内容容器的宽度',
+    optional: [],
+  },
+  {
+    name: 'height',
+    type: 'Number, String',
+    default: 'auto',
+    desc: '提示框的内容容器的高度',
+    optional: [],
+  },
+  {
+    name: 'maxHeight',
+    type: 'Number, String',
+    default: 'auto',
+    desc: '提示框的内容容器的最大高度',
+    optional: [],
+  },
+  {
+    name: 'maxWidth',
+    type: 'Number, String',
+    default: 'auto',
+    desc: '提示框的内容容器的最大宽度',
+    optional: [],
+  },
+  {
+    name: 'always',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否总是可见',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'disabled',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否禁用提示框',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'allowHtml',
+    type: 'Boolean',
+    default: 'false',
+    desc: 'Content 是否支持传入HTML string',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'trigger',
+    type: 'String',
+    default: 'hover',
+    desc: ' 触发方式',
+    optional: ['click', 'hover', 'manual'],
+  },
+  {
+    name: 'renderType',
+    type: 'String',
+    default: 'auto',
+    desc: ' content 渲染方式, auto: 默认渲染模式，shown：弹出层容器挂载完毕才会渲染内部组件',
+    optional: ['auto', 'shown'],
+  },
+  {
+    name: 'padding',
+    type: 'number',
+    default: '5',
+    desc: '弹出填充',
+    optional: [],
+  },
+  {
+    name: 'offset',
+    type: 'number | IAxesOffsets',
+    default: '6',
+    desc: `弹出位置偏移， IAxesOffsets：{
+        mainAxis?: number;
+        crossAxis?: number;
+        alignmentAxis?: number | null;
+    }`,
+    optional: [],
+  },
+  {
+    name: 'boundary',
+    type: 'String, HTMLElement',
+    default: 'parent',
+    desc: '弹出内容绑定元素',
+    optional: ['parent', 'document.body'],
+  },
+  {
+    name: 'zIndex',
+    type: 'number',
+    default: 'undefined',
+    desc: '层级',
+    optional: [],
+  },
+  {
+    name: 'disableTeleport',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否禁用 Teleport',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'autoPlacement',
+    type: 'Boolean',
+    default: 'false',
+    desc: '自动选择具有最多可用空间的展示位置',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'autoVisibility',
+    type: 'Boolean',
+    default: 'true',
+    desc: '当有滚动条，滚动出可视范围时自动隐藏pop',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'disableOutsideClick',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否禁用clickoutside',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'disableTransform',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否禁用css transform更新位移',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'reference',
+    type: 'string | HTMLElement',
+    default: 'null',
+    desc: '自定义 reference',
+    optional: [],
+  },
+  {
+    name: 'popoverDelay',
+    type: 'number | number[]',
+    default: '100',
+    desc: '用于设置显示隐藏延迟时间，如果设置为数值类型，则表示显示和隐藏都延迟指定数值，如果需要分开设置显示隐藏请设置为数组[showDelay, hideDealy]',
+    optional: [],
+  },
+  {
+    name: 'extCls',
+    type: 'string',
+    default: '',
+    desc: '配置自定义样式类名，传入的类会被加在组件最外层的 DOM',
+    optional: [],
+  },
+  {
+    name: 'referenceCls',
+    type: 'string',
+    default: '',
+    desc: '配置自定义样式类名，传入的类会被加在 Reference 外部的 div 上',
+    optional: [],
+  },
+  {
+    name: 'hideIgnoreReference',
+    type: 'Boolean',
+    default: 'false',
+    desc: '点击 Reference 占位区是否忽略收起 popover',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'componentEventDelay',
+    type: 'number',
+    default: '',
+    desc: `* 自定义Content组件渲染，point-event延迟渲染时间
+    * 避免子组件point-event渲染时触发popover鼠标事件
+    * 如果设置为0，则不启用此设置`,
+    optional: [],
+  },
+  {
+    name: 'clickContentAutoHide',
+    type: 'Boolean',
+    default: 'false',
+    desc: '非 manual 模式，点击 content 自动隐藏面板',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'renderDirective',
+    type: 'String',
+    default: 'if',
+    desc: '渲染方式，值为 show 时，气泡内容 dom 元素不会销毁',
+    optional: ['if', 'show'],
+  },
+];
+
+const events: IPropsTableItem[] = [
+  {
+    name: 'after-show',
+    type: 'Function',
+    default: '',
+    desc: '显示提示框时触发函数',
+    optional: [],
+  },
+  {
+    name: 'after-hidden',
+    type: 'Function',
+    default: '',
+    desc: '隐藏提示框时触发函数',
+    optional: [],
+  },
+];
+
+const methods: IPropsTableItem[] = [
+  {
+    name: 'show',
+    type: 'Function',
+    default: '',
+    desc: '弹出popover',
+    optional: [],
+  },
+  {
+    name: 'hide',
+    type: 'Function',
+    default: '',
+    desc: '隐藏popover',
+    optional: [],
+  },
+  {
+    name: 'stopHide',
+    type: 'Function',
+    default: '',
+    desc: '阻止隐藏popover',
+    optional: [],
+  },
+  {
+    name: 'updatePopover',
+    type: 'Function',
+    default: '',
+    desc: '更新popover配置，参数 (virtualEl = null, props = {})',
+    optional: [],
+  },
+  {
+    name: 'handleClickOutside',
+    type: 'Function',
+    default: '',
+    desc: '触发click outside',
+    optional: [],
+  }
+];
+
+const qaData: IPropsTableItem[] = [
+  {
+    name: 'hover事件弹出 table 组件闪退',
+    desc: '设置 componentEventDelay = number(大于0的数值， 300 - 500), 避免子组件point-event渲染时触发popover鼠标事件',
+  }
+];
+
+const QAColumMap = {
+  name: '问题',
+  desc: '说明',
+};
+
+const demos = [
+  {
+    title: '基础用法',
+    desc: '最简单的用法',
+    componentName: 'popover',
+    demoName: 'demo/base',
+    DemoComponent: Base,
+  },
+  {
+    title: '超长内容',
+    desc: '通过自定义 slot 显示多行文本或更复杂的样式',
+    componentName: 'popover',
+    demoName: 'demo/slot',
+    DemoComponent: Slot,
+  },
+  {
+    title: '不同位置',
+    desc: '通过 placement 属性展示十二种方位的提示',
+    componentName: 'popover',
+    demoName: 'demo/position',
+    DemoComponent: Position,
+  },
+  {
+    title: '总是显示',
+    desc: '设置属性 always 总是显示提示框',
+    componentName: 'popover',
+    demoName: 'demo/always',
+    DemoComponent: Always,
+  },
+  {
+    title: '自定义回调函数',
+    desc: '自定义显示以及隐藏时的回调函数',
+    componentName: 'popover',
+    demoName: 'demo/callback',
+    DemoComponent: Callback,
+  },
+  {
+    title: 'manual click',
+    desc: 'manual click',
+    componentName: 'popover',
+    demoName: 'demo/manual-trigger',
+    DemoComponent: ManualTrigger,
+  },
+  {
+    title: 'mouse click',
+    desc: 'mouse click',
+    componentName: 'popover',
+    demoName: 'demo/mouse-event',
+    DemoComponent: MouseEvent,
+  },
+  {
+    title: '点击占位区弹窗不收起',
+    desc: '设置 hideIgnoreReference: true，若占位区为非行内元素，请配置 referenceCls: 类名',
+    componentName: 'popover',
+    demoName: 'demo/hide-ignore-reference',
+    DemoComponent: HideIgnoreReference,
+  },
+];
+
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          name="Popover 弹出框提示"
+          desc="当鼠标指向页面元素时给出简单的提示"
+          designLink="https://bkdesign.bk.tencent.com/design/116"/>
+        {
+          demos.map(({ DemoComponent, ...demo }) => (
+            <DemoBox {...demo}>
+              <DemoComponent />
+            </DemoBox>
+          ))
+        }
+        <PropsBox title="属性" subtitle="" propsData={props}></PropsBox>
+        <PropsBox title="事件" subtitle="" propsData={events}></PropsBox>
+        <PropsBox title="方法" subtitle="" propsData={methods}></PropsBox>
+        <PropsBox title="Q & A" subtitle="" columnMap={ QAColumMap } propsData={qaData}></PropsBox>
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <bk-process
+      :controllable="state.controllable"
+      :cur-process="state.curprocess"
+      @click="processChanged"
+    />
+  </div>
+</template>
+;
+<script>
+  import { defineComponent, reactive } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        curprocess: 2,
+        controllable: true,
+      });
+
+      // 改变当前选中值
+      const processChanged = index => {
+        state.curprocess = index;
+      };
+
+      return {
+        state,
+        processChanged,
+      };
+    },
+  });
+</script>

package/knowledge/examples/process/index.tsx

@@ -0,0 +1,141 @@
+/*
+ * 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 { type IPropsTableItem } from '../../typings';
+import BaseDemo from './base-demo.vue';
+import LoadingDemo from './loading-demo.vue';
+import StatusDemo from './status-demo.vue';
+
+const processProps: IPropsTableItem[] = [
+  {
+    name: 'list',
+    type: 'Array',
+    default: '--',
+    desc: 'process 数据源',
+    optional: [],
+  },
+  {
+    name: 'display-key',
+    type: 'String',
+    default: 'content',
+    desc: '循环 list 时，显示字段的 key 值',
+    optional: [],
+  },
+  {
+    name: 'controllable',
+    type: 'Boolean',
+    default: 'false',
+    desc: '步骤可否被控制前后跳转',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'cur-process',
+    type: 'Number',
+    default: 1,
+    desc: '当前步骤的索引值',
+    optional: [],
+  },
+  {
+    name: 'ext-cls',
+    type: 'String',
+    default: '--',
+    desc: '配置自定义样式类名，传入的类会被加在组件最外层的 DOM .bk-process 上',
+    optional: [],
+  },
+];
+
+const processEvents: IPropsTableItem[] = [
+  {
+    name: 'update:cur-process',
+    type: 'Function',
+    default: '回调参数（变化后的步骤 index）',
+    desc: '更新当前流程步骤',
+    optional: [],
+  },
+  {
+    name: 'click',
+    type: 'Function',
+    default: '回调参数（变化后的步骤 index）',
+    desc: '当前步骤变化时的回调',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  name: 'Process',
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='Process 步骤组件'
+          link={`${import.meta.env.VITE_APP_BASE_URL ?? ''}/process`}
+          name='Process 步骤'
+        />
+        <DemoBox
+          componentName='process'
+          demoName='base-demo'
+          desc='默认配置list，配置 controllable 可控制 process 前后跳转'
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='process'
+          demoName='loading-demo'
+          desc='在 list 数据源中配置, 设置status 为 loading'
+          title='loading状态'
+        >
+          <LoadingDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='process'
+          demoName='status-demo'
+          desc='配置 steps 的不同状态, 使用 status 属性设置当前步骤状态，支持 default、done、loading、error。 同样也可以是用icon属性添加icon '
+          title='步骤状态、自定义icon配置'
+        >
+          <StatusDemo />
+        </DemoBox>
+
+        <PropsBox
+          propsData={processProps}
+          subtitle=''
+          title='属性'
+        />
+
+        <PropsBox
+          propsData={processEvents}
+          subtitle=''
+          title='事件'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/process/loading-demo.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <bk-process
+      :cur-process="state.curprocess"
+      :list="state.list"
+    />
+  </div>
+</template>
+;
+<script>
+  import { defineComponent, reactive } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        list: [
+          { content: '测试一', description: '这是描述' },
+          { content: '测试二', description: '这是描述2', status: 'loading' },
+          { content: '测试三' },
+          { content: '测试四' },
+        ],
+        curprocess: 2,
+      });
+
+      return {
+        state,
+      };
+    },
+  });
+</script>

package/knowledge/examples/process/status-demo.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <bk-process
+      :controllable="state.controllable"
+      :cur-process="state.curprocess"
+      :list="state.list"
+      @click="processChanged"
+    />
+  </div>
+</template>
+;
+<script>
+  import { defineComponent, reactive } from 'vue';
+
+  import { Bk } from 'bkui-vue/lib/icon';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        list: [
+          { content: '测试一', description: '这是描述' },
+          { content: '测试二', description: '这是描述2', status: 'loading' },
+          { content: '测试三', description: '这是描述3', status: 'error' },
+          { content: '测试四', description: '这是描述4', icon: Bk },
+          { content: '测试五', description: '这是描述5' },
+        ],
+        controllable: true,
+        curprocess: 3,
+      });
+
+      // 改变当前选中值
+      const processChanged = index => {
+        state.curprocess = index;
+      };
+
+      return {
+        state,
+        processChanged,
+      };
+    },
+  });
+</script>