@jetlinks-web/components 2.7.0 → 3.0.0

package/lib/ProLayout/TopHeader/index.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.topNavHeaderProps = exports.baseHeaderProps = exports.TopNavHeader = void 0;
-var _vue = require("vue");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _vue = require("vue");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _vcResizeObserver = _interopRequireDefault(require("ant-design-vue/lib/vc-resize-observer"));
@@ -16,10 +17,8 @@ var _defaultSettings = require("../defaultSettings");
 var _RouteContext = require("../RouteContext");
 var _BaseMenu = _interopRequireDefault(require("../SiderMenu/BaseMenu"));
 var _util = require("../util");
+var _style = _interopRequireDefault(require("../style"));
 var _excluded = ["rightContentRender"];
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
-}
 var baseHeaderProps = exports.baseHeaderProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettingProps), {}, {
   prefixCls: _vueTypes.default.string.def('ant-pro'),
   collapsed: _vueTypes.default.looseBool,
@@ -104,6 +103,13 @@ var TopNavHeader = exports.TopNavHeader = function TopNavHeader(props) {
     mode = props.mode;
   var context = (0, _RouteContext.useRouteContext)();
   var prefixCls = "".concat(propPrefixCls || _RouteContext.defaultPrefixCls, "-top-nav-header");
+  var stylePrefixCls = (0, _vue.computed)(function () {
+    return 'pro-layout';
+  });
+  var _useProLayoutStyle = (0, _style.default)(stylePrefixCls),
+    _useProLayoutStyle2 = (0, _slicedToArray2.default)(_useProLayoutStyle, 2),
+    wrapSSR = _useProLayoutStyle2[0],
+    hashId = _useProLayoutStyle2[1];
   var headerDom = (0, _SiderMenu.defaultRenderLogoAndTitle)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     collapsed: false
   }),
@@ -126,7 +132,7 @@ var TopNavHeader = exports.TopNavHeader = function TopNavHeader(props) {
     return props.layout === 'mix' && props.splitMenus ? 'horizontal' : mode;
   });
   var className = (0, _vue.computed)(function () {
-    return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, prefixCls, true), "light", props.theme === 'light'), "dark", props.theme === 'dark');
+    return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, prefixCls, true), hashId.value, true), "light", props.theme === 'light'), "dark", props.theme === 'dark');
   });
   var paddingLeft = (0, _vue.computed)(function () {
     return context.layoutType === _defaultSettings.LayoutType.PAD && props.collapsed ? context.headerLeftWidth + 'px' : 0;
@@ -146,11 +152,7 @@ var TopNavHeader = exports.TopNavHeader = function TopNavHeader(props) {
     "class": "".concat(prefixCls, "-logo"),
     "key": "logo",
     "id": "logo"
-  }, _isSlot(headerDom) ? headerDom : {
-    default: function _default() {
-      return [headerDom];
-    }
-  })]), (0, _vue.createVNode)("div", {
+  }, [headerDom])]), (0, _vue.createVNode)("div", {
     "style": {
       flex: 1
     },

package/lib/ProLayout/TopHeader/style.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genTopHeaderStyle = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(config) {
+  var token = config.token;
+  var topNavHeaderCls = "".concat(token.antCls, "-pro-top-nav-header");
+  var proLayoutGlobalHeaderCls = "".concat(token.antCls, "-pro-global-header");
+  var proLayoutHeaderBg = token.colorBgContainer;
+  var proLayoutHeaderHoverBg = token.colorBgContainer;
+  var proLayoutHeaderBoxShadow = '0 1px 4px rgba(0, 21, 41, 0.08)';
+  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, proLayoutGlobalHeaderCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+    padding: '0 16px',
+    backgroundColor: proLayoutHeaderBg,
+    boxShadow: proLayoutHeaderBoxShadow,
+    '> *': {
+      height: '100%'
+    }
+  }, "".concat(proLayoutGlobalHeaderCls, "-coppapsed-button"), {
+    display: 'flex',
+    alignItems: 'center',
+    marginLeft: '16px',
+    fontSize: '20px'
+  }), "".concat(proLayoutGlobalHeaderCls, "-layout"), (0, _defineProperty2.default)({}, "".concat(proLayoutGlobalHeaderCls, "-layout-mix"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    backgroundColor: '#001529'
+  }, "".concat(proLayoutGlobalHeaderCls, "-logo"), {
+    'h1': {
+      color: '#fff'
+    }
+  }), '.anticon', {
+    color: '#fff'
+  }))), "".concat(proLayoutGlobalHeaderCls, "-logo"), {
+    position: 'relative',
+    overflow: 'hidden',
+    a: {
+      display: 'flex',
+      alignItems: 'center',
+      height: '100%',
+      img: {
+        height: '28px'
+      },
+      h1: {
+        height: '32px',
+        margin: '0 0 0 12px',
+        color: token.colorPrimary,
+        fontWeight: 600,
+        fontSize: '18px',
+        lineHeight: '32px'
+      }
+    }
+  }), "".concat(proLayoutGlobalHeaderCls, "-menu"), (0, _defineProperty2.default)({
+    '.anticon': {
+      marginRight: '8px'
+    }
+  }, "".concat(token.antCls, "-dropdown-menu-item"), {
+    minWidth: '160px'
+  })), '.dark', {
+    height: '48px',
+    '.action': (0, _defineProperty2.default)({
+      color: 'rgba(255, 255, 255, 0.85)',
+      '> i': {
+        color: 'rgba(255, 255, 255, 0.85)'
+      },
+      '&:hover,&.opend': {
+        background: token.colorPrimary
+      }
+    }, "".concat(token.antCls, "-badge"), {
+      color: 'rgba(255, 255, 255, 0.85)'
+    })
+  })), topNavHeaderCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    boxShadow: '0 1px 4px 0 rgba(0, 21, 41, 0.12)',
+    transition: 'background 0.3s, width 0.2s'
+  }, "".concat(token.antCls, "-menu"), {
+    backgroundColor: 'transparent'
+  }), '&.light', (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    backgroundColor: token.colorBgContainer
+  }, "".concat(topNavHeaderCls, "-logo"), {
+    h1: {
+      color: token.colorTextHeading
+    }
+  }), '.anticon', {
+    color: 'inherit'
+  })), "".concat(topNavHeaderCls, "-main"), (0, _defineProperty2.default)({
+    display: 'flex',
+    height: '100%',
+    paddingLeft: '16px'
+  }, "".concat(topNavHeaderCls, "-main-left"), {
+    display: 'flex',
+    minWidth: '192px'
+  })), '.anticon', {
+    color: '#fff'
+  }), "".concat(topNavHeaderCls, "-logo"), {
+    position: 'relative',
+    minWidth: '165px',
+    height: '100%',
+    overflow: 'hidden',
+    img: {
+      display: 'inline-block',
+      height: '32px',
+      verticalAlign: 'middle'
+    },
+    h1: {
+      display: 'inline-block',
+      margin: '0 0 0 12px',
+      color: token.colorPrimary,
+      fontWeight: 600,
+      fontSize: '16px',
+      verticalAlign: 'top'
+    }
+  }), "".concat(topNavHeaderCls, "-menu"), (0, _defineProperty2.default)({
+    minWidth: 0
+  }, "".concat(token.antCls, "-menu").concat(token.antCls, "-meu-horizontal"), (0, _defineProperty2.default)({
+    height: '100%',
+    border: 'none'
+  }, "".concat(token.antCls, "-menu-item"), (0, _defineProperty2.default)({
+    height: '100%'
+  }, "".concat(token.antCls, "-badge"), {
+    color: 'unset'
+  }))))), "".concat(token.antCls, "-pro-menu-popup"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-badge"), {
+    color: 'unset'
+  }));
+};

package/lib/ProLayout/defaultSettings.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultSettings = exports.defaultSettingProps = exports.LayoutType = void 0;
 require("vue");
-var _vueTypes = _interopRequireDefault(require("ant-design-vue/lib/_util/vue-types"));
+var _vueTypes = _interopRequireDefault(require("ant-design-vue/es/_util/vue-types"));
 var defaultSettings = exports.defaultSettings = {
   theme: 'light',
   layout: 'mix',

package/lib/ProLayout/style/index.js

@@ -1,3 +1,14 @@
 "use strict";
 
-require("./style.less");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
+var _BasicLayoutStyle = require("../Basic/BasicLayoutStyle");
+var _HeaderStyle = require("../Basic/HeaderStyle");
+var _style = require("../PageContainer/style");
+var _style2 = require("../SiderMenu/style");
+var _style3 = require("../TopHeader/style");
+var _default = exports.default = (0, _styleRegister.default)([_BasicLayoutStyle.genBasicLayoutStyle, _HeaderStyle.genHeaderStyle, _style.genPageContainerStyle, _style2.genSiderMenuStyle, _style3.genTopHeaderStyle]);

package/lib/ProLayout/util.js

@@ -14,14 +14,14 @@ function clearMenuItem(menusData) {
   return menusData.map(function (item) {
     var _finalItem$meta;
     var finalItem = (0, _objectSpread2.default)({}, item);
-    if ((_finalItem$meta = finalItem.meta) === null || _finalItem$meta === void 0 ? void 0 : _finalItem$meta.hideInMenu) {
+    if ((_finalItem$meta = finalItem.meta) !== null && _finalItem$meta !== void 0 && _finalItem$meta.hideInMenu) {
       return null;
     }
-    if (finalItem && (finalItem === null || finalItem === void 0 ? void 0 : finalItem.children)) {
+    if (finalItem && finalItem !== null && finalItem !== void 0 && finalItem.children) {
       var _finalItem$meta2;
-      if (!((_finalItem$meta2 = finalItem.meta) === null || _finalItem$meta2 === void 0 ? void 0 : _finalItem$meta2.hideChildInMenu) && finalItem.children.some(function (child) {
+      if (!((_finalItem$meta2 = finalItem.meta) !== null && _finalItem$meta2 !== void 0 && _finalItem$meta2.hideChildInMenu) && finalItem.children.some(function (child) {
         var _child$meta;
-        return child && child.name && !((_child$meta = child.meta) === null || _child$meta === void 0 ? void 0 : _child$meta.hideInMenu);
+        return child && child.name && !((_child$meta = child.meta) !== null && _child$meta !== void 0 && _child$meta.hideInMenu);
       })) {
         return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
           children: clearMenuItem(finalItem.children)
@@ -38,7 +38,7 @@ function flatMap(menusData) {
   return menusData.map(function (item) {
     var _finalItem$meta3;
     var finalItem = (0, _objectSpread2.default)({}, item);
-    if (!finalItem.name || ((_finalItem$meta3 = finalItem.meta) === null || _finalItem$meta3 === void 0 ? void 0 : _finalItem$meta3.hideInMenu)) {
+    if (!finalItem.name || (_finalItem$meta3 = finalItem.meta) !== null && _finalItem$meta3 !== void 0 && _finalItem$meta3.hideInMenu) {
       return null;
     }
     if (finalItem.children) {

package/lib/ProTable/Alert.js

@@ -20,19 +20,23 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "computed": "setup-const",
   "_alertProps": "setup-maybe-ref",
   "useLocaleReceiver": "setup-maybe-ref",
+  "useProTableStyle": "setup-maybe-ref",
   "contextLocale": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "emits": "setup-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "_message": "setup-ref",
   "onClose": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { renderSlot as _renderSlot, unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = { class: "jtable-alert" };
-import { Alert, Button } from 'ant-design-vue/lib/';
+import { unref as _unref, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { Alert, Button } from 'ant-design-vue';
 import { computed } from "vue";
 import { _alertProps } from "./setting";
 import { useLocaleReceiver } from "../LocaleReciver/index";
+import useProTableStyle from './style';
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'Alert'
@@ -43,6 +47,8 @@ const __sfc_main__ = _defineComponent({
         const [contextLocale] = useLocaleReceiver('ProTable');
         const props = __props;
         const emits = __emit;
+        const prefixCls = computed(() => 'pro-table');
+        const [wrapSSR, hashId] = useProTableStyle(prefixCls);
         const _message = computed(() => {
             let locale = _optionalChain([contextLocale, 'access', _2 => _2.value, 'optionalAccess', _3 => _3.alert, 'optionalAccess', _4 => _4.selectItem]) || '';
             [_optionalChain([props, 'access', _5 => _5.rowSelection, 'optionalAccess', _6 => _6.selectedRowKeys, 'optionalAccess', _7 => _7.length]) || 0].forEach((item, index) => {
@@ -54,7 +60,9 @@ const __sfc_main__ = _defineComponent({
             emits('close');
         };
         return (_ctx, _cache) => {
-            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+            return (_openBlock(), _createElementBlock("div", {
+                class: _normalizeClass(['jtable-alert', _unref(hashId)])
+            }, [
                 _renderSlot(_ctx.$slots, "default", {}, () => [
                     _createVNode(_unref(Alert), {
                         type: "info",
@@ -74,7 +82,7 @@ const __sfc_main__ = _defineComponent({
                         _: 1 /* STABLE */
                     }, 8 /* PROPS */, ["message"])
                 ])
-            ]));
+            ], 2 /* CLASS */));
         };
     }
 });

package/lib/ProTable/Content.js

@@ -24,10 +24,14 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "omit": "setup-maybe-ref",
   "Empty": "setup-maybe-ref",
   "useTableInject": "setup-maybe-ref",
+  "useProTableStyle": "setup-maybe-ref",
   "useLocaleReceiver": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "slots": "setup-maybe-ref",
   "contextLocale": "setup-maybe-ref",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "_rowSelection": "setup-maybe-ref",
   "_columns": "setup-ref",
   "_slots": "setup-ref",
@@ -40,27 +44,27 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "handleCheckedAllChange": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, mergeProps as _mergeProps, createSlots as _createSlots, createBlock as _createBlock } from "vue";
-const _hoisted_1 = { class: "jtable-box" };
-const _hoisted_2 = {
+import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, mergeProps as _mergeProps, renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, normalizeProps as _normalizeProps, createSlots as _createSlots, createBlock as _createBlock } from "vue";
+const _hoisted_1 = {
     key: 0,
     class: "jtable-card"
 };
-const _hoisted_3 = {
+const _hoisted_2 = {
     key: 0,
     style: { "margin-bottom": "10px" }
 };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = {
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = {
     key: 2,
     class: "j-table-empty"
 };
 import { useSlots, computed } from 'vue';
 import { _contentProps } from "./setting";
-import { Table } from 'ant-design-vue/lib/';
+import { Table } from 'ant-design-vue';
 import { get, omit } from 'lodash-es';
 import Empty from '../Empty';
 import { useTableInject } from './hooks';
+import useProTableStyle from './style';
 import { useLocaleReceiver } from "../LocaleReciver";
 const __sfc_main__ = _defineComponent({
     ...{
@@ -77,6 +81,8 @@ const __sfc_main__ = _defineComponent({
         const props = __props;
         const slots = useSlots();
         const [contextLocale] = useLocaleReceiver('ProTable');
+        const prefixCls = computed(() => 'pro-table');
+        const [wrapSSR, hashId] = useProTableStyle(prefixCls);
         const _rowSelection = useTableInject();
         const _columns = computed(() => props.columns.filter((i) => !_optionalChain([i, 'optionalAccess', _2 => _2.hideInTable])));
         const _slots = computed(() => {
@@ -118,11 +124,13 @@ const __sfc_main__ = _defineComponent({
         };
         return (_ctx, _cache) => {
             const _component_a_checkbox = _resolveComponent("a-checkbox");
-            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+            return (_openBlock(), _createElementBlock("div", {
+                class: _normalizeClass(['jtable-box', _unref(hashId)])
+            }, [
                 (_ctx.mode === 'CARD')
-                    ? (_openBlock(), _createElementBlock("div", _hoisted_2, [
+                    ? (_openBlock(), _createElementBlock("div", _hoisted_1, [
                         (__rowSelection.value && __rowSelection.value.type === 'checkbox')
-                            ? (_openBlock(), _createElementBlock("div", _hoisted_3, [
+                            ? (_openBlock(), _createElementBlock("div", _hoisted_2, [
                                 _createVNode(_component_a_checkbox, {
                                     indeterminate: indeterminate.value,
                                     checked: checkedAll.value,
@@ -147,11 +155,11 @@ const __sfc_main__ = _defineComponent({
                                         key: item[props.rowKey],
                                         onClick: ($event) => (onClick(item))
                                     }, [
-                                        _renderSlot(_ctx.$slots, "card", _normalizeProps(_guardReactiveProps(item)))
-                                    ], 10 /* CLASS, PROPS */, _hoisted_4));
+                                        _renderSlot(_ctx.$slots, "card", _mergeProps({ ref_for: true }, item))
+                                    ], 10 /* CLASS, PROPS */, _hoisted_3));
                                 }), 128 /* KEYED_FRAGMENT */))
                             ], 4 /* STYLE */))
-                            : (_openBlock(), _createElementBlock("div", _hoisted_5, [
+                            : (_openBlock(), _createElementBlock("div", _hoisted_4, [
                                 _renderSlot(_ctx.$slots, "emptyText", {}, () => [
                                     _createVNode(_unref(Empty))
                                 ])
@@ -193,7 +201,7 @@ const __sfc_main__ = _defineComponent({
                             };
                         })
                     ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["row-selection", "dataSource", "columns", "scroll", "class"]))
-            ]));
+            ], 2 /* CLASS */));
         };
     }
 });

package/lib/ProTable/Header.js

@@ -1,24 +1,30 @@
 /* Analyzed bindings: {
   "initMode": "props",
+  "computed": "setup-const",
   "RadioGroup": "setup-maybe-ref",
   "RadioButton": "setup-maybe-ref",
   "AIcon": "setup-maybe-ref",
   "_headerProps": "setup-maybe-ref",
+  "useProTableStyle": "setup-maybe-ref",
   "props": "setup-reactive-const",
-  "emits": "setup-const"
+  "emits": "setup-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, unref as _unref, createVNode as _createVNode, withCtx as _withCtx, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from "vue";
-const _hoisted_1 = { class: "jtable-body-header" };
-const _hoisted_2 = { class: "jtable-body-header-left" };
-const _hoisted_3 = { class: "jtable-body-header-right" };
-const _hoisted_4 = {
+import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, createVNode as _createVNode, withCtx as _withCtx, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = { class: "jtable-body-header-left" };
+const _hoisted_2 = { class: "jtable-body-header-right" };
+const _hoisted_3 = {
     key: 0,
     class: "table-body-header-right-button"
 };
-import { RadioGroup, RadioButton } from 'ant-design-vue/lib/';
+import { computed } from 'vue';
+import { RadioGroup, RadioButton } from 'ant-design-vue';
 import AIcon from '../Icon';
 import { _headerProps } from './setting';
+import useProTableStyle from './style';
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'Header'
@@ -34,15 +40,19 @@ const __sfc_main__ = _defineComponent({
     setup(__props, { emit: __emit }) {
         const props = __props;
         const emits = __emit;
+        const prefixCls = computed(() => 'pro-table');
+        const [wrapSSR, hashId] = useProTableStyle(prefixCls);
         return (_ctx, _cache) => {
-            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
-                _createElementVNode("div", _hoisted_2, [
+            return (_openBlock(), _createElementBlock("div", {
+                class: _normalizeClass(['jtable-body-header', _unref(hashId)])
+            }, [
+                _createElementVNode("div", _hoisted_1, [
                     _renderSlot(_ctx.$slots, "headerLeftRender")
                 ]),
-                _createElementVNode("div", _hoisted_3, [
+                _createElementVNode("div", _hoisted_2, [
                     _renderSlot(_ctx.$slots, "headerRightRender"),
                     (!__props.initMode)
-                        ? (_openBlock(), _createElementBlock("div", _hoisted_4, [
+                        ? (_openBlock(), _createElementBlock("div", _hoisted_3, [
                             _createVNode(_unref(RadioGroup), {
                                 value: _ctx.mode,
                                 onChange: _cache[0] || (_cache[0] = (e) => emits('change', e))
@@ -66,7 +76,7 @@ const __sfc_main__ = _defineComponent({
                         ]))
                         : _createCommentVNode("v-if", true)
                 ])
-            ]));
+            ], 2 /* CLASS */));
         };
     }
 });

package/lib/ProTable/Pagination.js

@@ -19,20 +19,24 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "_paginationProps": "setup-maybe-ref",
   "computed": "setup-const",
   "useLocaleReceiver": "setup-maybe-ref",
+  "useProTableStyle": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "emits": "setup-const",
   "contextLocale": "setup-maybe-ref",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "className": "setup-ref",
   "_showTotal": "setup-const",
   "onChange": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { renderSlot as _renderSlot, unref as _unref, mergeProps as _mergeProps, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = { class: "jtable-pagination" };
-import { Pagination } from 'ant-design-vue/lib/';
+import { unref as _unref, renderSlot as _renderSlot, mergeProps as _mergeProps, createVNode as _createVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { Pagination } from 'ant-design-vue';
 import { _paginationProps } from "./setting";
 import { computed } from 'vue';
 import { useLocaleReceiver } from "../LocaleReciver";
+import useProTableStyle from './style';
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'JPagination'
@@ -43,6 +47,8 @@ const __sfc_main__ = _defineComponent({
         const props = __props;
         const emits = __emit;
         const [contextLocale] = useLocaleReceiver('ProTable');
+        const prefixCls = computed(() => 'pro-table');
+        const [wrapSSR, hashId] = useProTableStyle(prefixCls);
         const className = computed(() => {
             return {
                 'hide-content': !props.isShowContent,
@@ -62,7 +68,9 @@ const __sfc_main__ = _defineComponent({
             emits('change', page, size);
         };
         return (_ctx, _cache) => {
-            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+            return (_openBlock(), _createElementBlock("div", {
+                class: _normalizeClass(['jtable-pagination', _unref(hashId)])
+            }, [
                 _renderSlot(_ctx.$slots, "default", {}, () => [
                     _createVNode(_unref(Pagination), _mergeProps(props, {
                         total: _ctx.total,
@@ -73,7 +81,7 @@ const __sfc_main__ = _defineComponent({
                         onChange: onChange
                     }), null, 16 /* FULL_PROPS */, ["total", "pageSize", "current", "show-total", "class"])
                 ])
-            ]));
+            ], 2 /* CLASS */));
         };
     }
 });