@blueking/ai-ui-sdk 0.1.19-beta.9 → 0.1.19

package/dist/components/render-t-table/index.script.vue.js

@@ -0,0 +1,317 @@
+import { defineComponent as _defineComponent, Fragment as _Fragment, createVNode as _createVNode2, createTextVNode as _createTextVNode2 } from 'vue';
+import { createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, renderSlot as _renderSlot, mergeProps as _mergeProps, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+    class: "t-table-row-height"
+};
+import { ref, watch } from 'vue';
+import RenderSearchEmpty from '../render-search-empty/index.vue.js';
+export default /*@__PURE__*/ _defineComponent({
+    props: {
+        columns: {},
+        isLoading: {
+            type: Boolean
+        },
+        tableData: {},
+        pagination: {},
+        layout: {
+            default: (props)=>props.pagination ? [
+                    'total',
+                    'limit',
+                    'list'
+                ] : []
+        },
+        containerHeight: {},
+        search: {},
+        rowClassName: {},
+        rowKey: {},
+        height: {}
+    },
+    emits: [
+        "sort-change",
+        "page-change",
+        "page-size-change",
+        "row-mouseleave",
+        "select-change",
+        "row-click",
+        "row-mouseenter",
+        "update:search"
+    ],
+    setup (__props, { emit: __emit }) {
+        const props = __props;
+        const emits = __emit;
+        const rowHeight = ref();
+        const columnControllerVisible = ref(false);
+        const getMaxHeight = ()=>{
+            return props.pagination ? 'calc(100% - 48px)' : '100%';
+        };
+        const getDefaultColumns = ()=>{
+            // 只要有一项配置了 defaultShow 则需要列配置按钮
+            const isSetting = props.columns.some((column)=>column.defaultShow);
+            if (isSetting) {
+                return props.columns.filter((column)=>column.defaultShow).map((item)=>item.colKey);
+            }
+            return props.columns.map((column)=>column.colKey);
+        };
+        const displayColumns = ref(getDefaultColumns());
+        const getRowClassName = ({ row, rowIndex })=>{
+            if (!row || rowIndex === undefined) {
+                return;
+            }
+            const customRowClass = typeof props.rowClassName === 'function' ? props.rowClassName(row, rowIndex) : props.rowClassName;
+            const classList = [];
+            if (typeof customRowClass === 'string') {
+                classList.push(...customRowClass.split(/\s+/).filter(Boolean));
+            } else if (Array.isArray(customRowClass)) {
+                classList.push(...customRowClass.filter((c)=>typeof c === 'string' && c));
+            } else if (customRowClass && typeof customRowClass === 'object') {
+                classList.push(...Object.keys(customRowClass).filter((key)=>customRowClass[key]));
+            }
+            const heightClass = classList.findLast((item)=>item.includes('g-height'));
+            if (heightClass && !rowHeight.value) {
+                rowHeight.value = heightClass;
+            }
+            const classNames = classList.filter((item)=>!item.includes('g-height'));
+            return [
+                ...new Set([
+                    ...classNames,
+                    rowHeight.value
+                ])
+            ].join(' ');
+        };
+        const getSettingColumns = ()=>{
+            if (getDefaultColumns().length === props.columns.length) {
+                return props.columns;
+            }
+            const columns = [
+                ...props.columns
+            ];
+            const lastColKey = displayColumns.value[displayColumns.value.length - 1];
+            const lastIndex = columns.findIndex((col)=>col.colKey === lastColKey);
+            if (lastIndex === -1) return columns;
+            const lastColumn = columns[lastIndex];
+            const newColumn = Object.assign(Object.assign({
+                minWidth: '120'
+            }, lastColumn), {
+                title: (...args)=>{
+                    let originalContent;
+                    if (typeof lastColumn.title === 'function') {
+                        originalContent = lastColumn.title(...args);
+                    } else {
+                        originalContent = lastColumn.title || '--';
+                    }
+                    return _createVNode2(_Fragment, null, [
+                        _createVNode2("span", null, [
+                            originalContent
+                        ]),
+                        _createVNode2("i", {
+                            "class": 'bkaidev-icon bkaidev-shezhi g-text-14 g-text-light-gray g-hover-text-blue g-ml-4 g-cursor-pointer',
+                            "onClick": ()=>showSetting()
+                        }, null)
+                    ]);
+                }
+            });
+            columns[lastIndex] = newColumn;
+            return columns;
+        };
+        const handleColumnChange = (columns)=>{
+            const colKeyColumns = props.columns.filter((column)=>column.colKey);
+            if (!columns.length) {
+                return displayColumns.value = colKeyColumns.map((column)=>column.colKey);
+            }
+            // 根据 columns 重新定义 展示列顺序
+            displayColumns.value = colKeyColumns.filter((column)=>columns.includes(column.colKey)).map((item)=>item.colKey);
+        };
+        const showSetting = ()=>{
+            columnControllerVisible.value = true;
+        };
+        const getColumnControllerConfig = ()=>({
+                // 隐藏组件内部的 列配置按钮
+                hideTriggerButton: true,
+                // 允许哪些列参与显示-隐藏控制
+                fields: props.columns.map((item)=>item.colKey),
+                // 透传弹框组件全部属性
+                dialogProps: {
+                    preventScrollThrough: true,
+                    dialogClassName: 't-table-dialog',
+                    showOverlay: true,
+                    header: ()=>_createVNode2("span", {
+                            "class": "t-table-dialog-header"
+                        }, [
+                            _createTextVNode2("\u8868\u683C\u8BBE\u7F6E")
+                        ])
+                }
+            });
+        const handleSelectChange = (keys, { selectedRowData })=>{
+            emits('select-change', keys, selectedRowData);
+        };
+        const handlePageChange = (page)=>{
+            emits('page-change', page);
+        };
+        const handlePageSizeChange = (pageSize)=>{
+            emits('page-size-change', pageSize);
+        };
+        const handleSortChange = (config, { col })=>{
+            emits('sort-change', config, {
+                col
+            });
+        };
+        const handleRowClick = ({ row })=>{
+            emits('row-click', row);
+        };
+        const handleRowMouseenter = ({ row })=>{
+            emits('row-mouseenter', row);
+        };
+        const handleRowMouseleave = ()=>{
+            emits('row-mouseleave');
+        };
+        const handleUpdateSearch = (search)=>{
+            emits('update:search', search);
+        };
+        watch(()=>props.columns.map((col)=>col.colKey), (newColKeys, oldColKeys)=>{
+            if (newColKeys.some((colKey, index)=>colKey !== oldColKeys[index])) {
+                displayColumns.value = getDefaultColumns();
+            }
+        });
+        return (_ctx, _cache)=>{
+            var _a;
+            const _component_bk_radio_button = _resolveComponent("bk-radio-button");
+            const _component_bk_radio_group = _resolveComponent("bk-radio-group");
+            const _component_bk_loading = _resolveComponent("bk-loading");
+            const _component_t_enhanced_table = _resolveComponent("t-enhanced-table");
+            const _component_bk_pagination = _resolveComponent("bk-pagination");
+            return _openBlock(), _createElementBlock("section", {
+                style: _normalizeStyle({
+                    height: _ctx.height
+                })
+            }, [
+                _createVNode(_component_t_enhanced_table, _mergeProps(_ctx.$attrs, {
+                    "column-controller-visible": columnControllerVisible.value,
+                    "onUpdate:columnControllerVisible": _cache[1] || (_cache[1] = ($event)=>columnControllerVisible.value = $event),
+                    "cell-empty-content": "--",
+                    "max-height": getMaxHeight(),
+                    loading: _ctx.isLoading,
+                    "row-key": _ctx.rowKey,
+                    "header-affixed-top": !!((_a = _ctx.tableData) === null || _a === void 0 ? void 0 : _a.length),
+                    "display-columns": displayColumns.value,
+                    "column-controller": getColumnControllerConfig(),
+                    class: `t-t-table ${_ctx.$attrs.class}`,
+                    data: _ctx.tableData,
+                    columns: getSettingColumns(),
+                    "row-class-name": getRowClassName,
+                    "expand-icon": false,
+                    onSortChange: handleSortChange,
+                    onDisplayColumnsChange: handleColumnChange,
+                    onSelectChange: handleSelectChange,
+                    onRowClick: handleRowClick,
+                    onRowMouseenter: handleRowMouseenter,
+                    onRowMouseleave: handleRowMouseleave
+                }), {
+                    columnControllerBottomContent: _withCtx(()=>[
+                            _createElementVNode("section", _hoisted_1, [
+                                _cache[5] || (_cache[5] = _createTextVNode(" 表格行高： ")),
+                                _createVNode(_component_bk_radio_group, {
+                                    modelValue: rowHeight.value,
+                                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event)=>rowHeight.value = $event)
+                                }, {
+                                    default: _withCtx(()=>[
+                                            _createVNode(_component_bk_radio_button, {
+                                                label: "g-height-42"
+                                            }, {
+                                                default: _withCtx(()=>_cache[2] || (_cache[2] = [
+                                                        _createTextVNode(" 小 ")
+                                                    ])),
+                                                _: 1 /* STABLE */ ,
+                                                __: [
+                                                    2
+                                                ]
+                                            }),
+                                            _createVNode(_component_bk_radio_button, {
+                                                label: "g-height-60"
+                                            }, {
+                                                default: _withCtx(()=>_cache[3] || (_cache[3] = [
+                                                        _createTextVNode(" 中 ")
+                                                    ])),
+                                                _: 1 /* STABLE */ ,
+                                                __: [
+                                                    3
+                                                ]
+                                            }),
+                                            _createVNode(_component_bk_radio_button, {
+                                                label: "g-height-78"
+                                            }, {
+                                                default: _withCtx(()=>_cache[4] || (_cache[4] = [
+                                                        _createTextVNode(" 大 ")
+                                                    ])),
+                                                _: 1 /* STABLE */ ,
+                                                __: [
+                                                    4
+                                                ]
+                                            })
+                                        ]),
+                                    _: 1 /* STABLE */ 
+                                }, 8 /* PROPS */ , [
+                                    "modelValue"
+                                ])
+                            ])
+                        ]),
+                    empty: _withCtx(()=>[
+                            _createVNode(RenderSearchEmpty, {
+                                scene: "part",
+                                search: _ctx.search,
+                                "onUpdate:search": handleUpdateSearch
+                            }, null, 8 /* PROPS */ , [
+                                "search"
+                            ])
+                        ]),
+                    expandedRow: _withCtx(({ row })=>[
+                            _renderSlot(_ctx.$slots, "expandedRow", {
+                                row: row
+                            }, undefined, true)
+                        ]),
+                    sortIcon: _withCtx(()=>_cache[6] || (_cache[6] = [
+                            _createElementVNode("i", {
+                                class: "bkaidev-icon bkaidev-angle-up-fill-3 g-text-light-gray"
+                            }, null, -1 /* HOISTED */ )
+                        ])),
+                    loading: _withCtx(()=>[
+                            _createVNode(_component_bk_loading, {
+                                loading: true
+                            })
+                        ]),
+                    _: 3 /* FORWARDED */ 
+                }, 16 /* FULL_PROPS */ , [
+                    "column-controller-visible",
+                    "max-height",
+                    "loading",
+                    "row-key",
+                    "header-affixed-top",
+                    "display-columns",
+                    "column-controller",
+                    "class",
+                    "data",
+                    "columns"
+                ]),
+                _ctx.pagination ? (_openBlock(), _createBlock(_component_bk_pagination, {
+                    key: 0,
+                    size: "small",
+                    class: _normalizeClass({
+                        't-t-pagination': true,
+                        'pagination-loading': _ctx.isLoading
+                    }),
+                    "model-value": _ctx.pagination.current,
+                    count: _ctx.pagination.count,
+                    limit: _ctx.pagination.limit,
+                    layout: _ctx.layout,
+                    onChange: handlePageChange,
+                    onLimitChange: handlePageSizeChange
+                }, null, 8 /* PROPS */ , [
+                    "class",
+                    "model-value",
+                    "count",
+                    "limit",
+                    "layout"
+                ])) : _createCommentVNode("v-if", true)
+            ], 4 /* STYLE */ );
+        };
+    }
+});

package/dist/components/render-t-table/index.vue.css

@@ -0,0 +1,196 @@
+
+.t-t-pagination[data-v-dswtt8f9] {
+  position: relative;
+  padding: 16px 16px 0 16px;
+}
+.t-t-pagination[data-v-dswtt8f9] .bk-pagination-list.is-last {
+    margin-left: auto;
+}
+.pagination-loading[data-v-dswtt8f9]::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.6);
+    z-index: 72;
+}
+.t-t-table[data-v-dswtt8f9] {
+  display: inline;
+  font-size: 12px;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__th-cell-inner {
+    color: #313238;
+}
+.t-t-table[data-v-dswtt8f9] th {
+    padding: 0 16px;
+    height: 42px;
+    background-color: #FAFBFD !important;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__body tr {
+    color: #63656e;
+    font-size: 12px;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__body tr td {
+      padding: 0 16px;
+      height: 40px;
+      background-color: #fff;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__body tr:hover td {
+    background-color: #f5f7fa !important;
+    color: #63656E;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__content .t-table__body .t-table__empty-row {
+    background-color: #fff !important;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__content .t-table__body .t-table__empty-row >td {
+      border: none;
+}
+.t-t-table[data-v-dswtt8f9] th .t-table__ellipsis {
+    width: auto !important;
+}
+.t-t-table[data-v-dswtt8f9] .t-loading__gradient.t-icon-loading {
+    display: none;
+}
+.t-t-table[data-v-dswtt8f9]:first-of-type .t-table__affixed-header-elm-wrap{
+      width: calc(100% - 6px) !important;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__affixed-header-elm-wrap>div {
+      width: 100% !important;
+      scrollbar-width: none;
+}
+.t-t-table[data-v-dswtt8f9] .t-table--layout-fixed{
+    width: 100% !important;
+}
+.t-t-table[data-v-dswtt8f9] .bk-exception-description{
+    margin-bottom: 0;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__content{
+    z-index: 2;
+    max-height: 100%;
+    overflow: auto;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__content::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__content::-webkit-scrollbar-thumb {
+      width: 6px;
+      height: 6px;
+      border-radius: 3px;
+      background-color: #dcdee5;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__content::-webkit-scrollbar-thumb:hover {
+        background-color: #979ba5;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__ellipsis.t-text-ellipsis:has(.checkbox){
+    line-height: 100%;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__cell--sort-trigger.t-table__double-icons{
+    gap: 5px;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__sort-icon--active>i{
+    color: #3a84ff !important;
+}
+.t-t-table[data-v-dswtt8f9] .t-table__cell--fixed-left:has(.checkbox){
+    line-height: 100%;
+}
+
+
+.t-table-dialog {
+  padding: 0px !important;
+  border-radius: 0px;
+  box-shadow: 0 0 6px #dcdee5;
+  color: #26323d;
+}
+.t-table-dialog .t-table-dialog-header {
+    margin: 24px;
+    font-weight: 400;
+    display: inline-block;
+    height: 26px;
+    font-size: 20px;
+    line-height: 26px;
+    color: #313238;
+}
+.t-table-dialog .t-dialog__close {
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    top: 2px;
+    right: 9px;
+}
+.t-table-dialog .t-checkbox__label {
+    display: flex;
+    align-items: center;
+    color: #63656e;
+}
+.t-table-dialog .t-table__column-controller-block {
+    justify-content: end;
+    display: flex;
+    border: none !important;
+    padding: 0 !important;
+}
+.t-table-dialog .t-table__column-controller-desc {
+    font-size: 14px;
+    line-height: 22px;
+    color: #313238;
+    text-align: left;
+    position: absolute;
+    top: 74px;
+    left: 24px;
+    font-weight: 400;
+}
+.t-table-dialog .t-table__column-controller-body {
+    padding: 0 24px;
+}
+.t-table-dialog .t-table-row-height {
+    display: flex;
+    height: 76px;
+    font-size: 14px;
+    border-top: solid 1px #f0f1f5;
+    align-items: center;
+    color: #26323d;
+}
+.t-table-dialog .t-table-row-height .bk-radio-button {
+      width: 68px;
+      height: 26px;
+}
+.t-table-dialog .t-table-row-height .bk-radio-button .bk-radio-button-label {
+        line-height: 26px;
+        height: 100%;
+}
+.t-table-dialog .t-dialog__footer {
+    display: flex;
+    height: 50px;
+    padding: 0 24px;
+    border-top: 1px solid #dcdee5;
+    border-radius: 0 0 2px 2px;
+    justify-content: flex-end;
+    align-items: center;
+}
+.t-table-dialog .t-dialog__footer .t-button--theme-primary {
+      background-color: #3a84ff;
+      border: none;
+}
+.t-table-dialog .t-dialog__footer .t-button--theme-default {
+      background-color: #fff;
+      color: #63656e;
+      border: 1px solid #c4c6cc;
+}
+.t-table-dialog .t-dialog__body {
+    padding: 0;
+}
+.t-table-dialog .t-table__column-controller-item {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+.t-table-dialog .t-checkbox.t-is-checked .t-checkbox__input {
+      background: #3a84ff;
+      border: 1px solid hsl(223, 7%, 62%);
+}
+.t-table-dialog .t-checkbox.t-is-indeterminate .t-checkbox__input {
+      background: #3a84ff;
+      border: 1px solid #979ba5;
+}

package/dist/components/render-t-table/index.vue.d.ts

@@ -0,0 +1,58 @@
+import type { IPagination, ITTableCol } from '@/types/common';
+declare const __VLS_export: <T, S>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<{
+        columns: Array<ITTableCol<T>>;
+        isLoading?: boolean;
+        tableData: T[];
+        pagination?: IPagination;
+        layout?: string[];
+        containerHeight?: string;
+        search?: S;
+        rowClassName?: string | string[] | Record<string, boolean> | ((row: T, index: number) => string | number | string[] | Record<string, boolean>);
+        rowKey: string;
+        height?: string;
+    } & {
+        "onUpdate:search"?: (search: S) => any;
+        "onRow-mouseleave"?: () => any;
+        "onSort-change"?: (config: {
+            descending: boolean;
+        }, val: {
+            col: {
+                sortKey: string;
+            };
+        }) => any;
+        "onSelect-change"?: (keys: string | number[], selectedRowData: T[]) => any;
+        "onPage-change"?: (val: number) => any;
+        "onPage-size-change"?: (val: number) => any;
+        "onRow-click"?: (row: T) => any;
+        "onRow-mouseenter"?: (row: T) => any;
+    }> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        expandedRow?: (props: {
+            row: T;
+        }) => any;
+    };
+    emit: {
+        (event: "sort-change", config: {
+            descending: boolean;
+        }, val: {
+            col: {
+                sortKey: string;
+            };
+        }): void;
+        (event: "page-change" | "page-size-change", val: number): void;
+        (event: "row-mouseleave"): void;
+        (event: "select-change", keys: string | number[], selectedRowData: T[]): void;
+        (event: "row-click" | "row-mouseenter", row: T): void;
+        (event: "update:search", search: S): void;
+    };
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/components/render-t-table/index.vue.js

@@ -0,0 +1,5 @@
+import script from './index.script.vue.js';
+script.__scopeId = "data-v-dswtt8f9";
+script.__file = "./src/components/render-t-table/index.vue";
+import './index.vue.css';
+export default script;