@jetlinks-web/components 3.0.1-rc → 3.1.0

package/lib/AutoComplete/AutoComplete.js

@@ -19,10 +19,10 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "AutoComplete": "setup-maybe-ref",
   "autoCompleteProps": "setup-maybe-ref",
   "ref": "setup-const",
-  "defineOptions": "setup-const",
+  "watch": "setup-const",
   "props": "setup-reactive-const",
   "emit": "setup-const",
-  "options": "setup-ref",
+  "_options": "setup-ref",
   "onSearch": "setup-const",
   "dropdownVisibleChange": "setup-const"
 } */
@@ -30,7 +30,7 @@ import { defineComponent as _defineComponent } from 'vue';
 import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, unref as _unref, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 import { AutoComplete } from 'ant-design-vue';
 import { autoCompleteProps } from 'ant-design-vue/lib/auto-complete';
-import { ref, } from 'vue';
+import { ref, watch } from 'vue';
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'JAutoComplete'
@@ -46,29 +46,33 @@ const __sfc_main__ = _defineComponent({
     setup(__props, { emit: __emit }) {
         const props = __props;
         const emit = __emit;
-        const options = ref(props.options);
+        const _options = ref([]);
         /**
          * 根据关键词提示
          * @param searchText 关键词
          */
         const onSearch = (searchText) => {
-            options.value = _optionalChain([props, 'access', _2 => _2.options, 'optionalAccess', _3 => _3.filter, 'call', _4 => _4((item) => !!_optionalChain([item, 'access', _5 => _5[props.searchKey], 'optionalAccess', _6 => _6.includes, 'call', _7 => _7(searchText)]))]) || [];
-            if (!options.value.length) {
-                options.value.unshift({ label: searchText, value: searchText });
+            _options.value = _optionalChain([props, 'access', _2 => _2.options, 'optionalAccess', _3 => _3.filter, 'call', _4 => _4((item) => !!_optionalChain([item, 'access', _5 => _5[props.searchKey], 'optionalAccess', _6 => _6.includes, 'call', _7 => _7(searchText)]))]) || [];
+            if (!_options.value.length) {
+                _options.value.unshift({ label: searchText, value: searchText });
             }
         };
         const dropdownVisibleChange = (open) => {
             if (!open) {
                 // 关闭还原下拉options
                 setTimeout(() => {
-                    options.value = props.options || [];
+                    _options.value = props.options || [];
                 });
             }
         };
+        watch(() => JSON.stringify(props.options), // 处理options变化
+        () => {
+            _options.value = props.options || [];
+        }, { immediate: true });
         return (_ctx, _cache) => {
             return (_openBlock(), _createBlock(_unref(AutoComplete), _mergeProps(props, {
                 style: { "width": "100%" },
-                options: options.value,
+                options: _options.value,
                 onSearch: onSearch,
                 onDropdownVisibleChange: dropdownVisibleChange
             }), {

package/lib/BadgeStatus/Badge.js

@@ -3,7 +3,6 @@
   "status": "props",
   "statusNames": "props",
   "computed": "setup-const",
-  "defineOptions": "setup-const",
   "getHexColor": "setup-maybe-ref",
   "Badge": "setup-maybe-ref",
   "props": "setup-reactive-const",
@@ -11,7 +10,7 @@
 } */
 import { defineComponent as _defineComponent } from 'vue';
 import { unref as _unref, openBlock as _openBlock, createBlock as _createBlock } from "vue";
-import { computed, } from 'vue';
+import { computed } from 'vue';
 import { getHexColor } from './color';
 import { Badge } from 'ant-design-vue';
 const __sfc_main__ = _defineComponent({

package/lib/BadgeStatus/color.js

@@ -14,9 +14,9 @@ var colorMap = {
 var getHexColor = exports.getHexColor = function getHexColor(code) {
   var pe = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.1;
   var _color = colorMap[code] || colorMap.default;
-  if (code === 'default') {
-    pe = 0.1;
-  }
+  // if (code === 'default') {
+  //   pe = 0.1
+  // }
   return "rgba(".concat(_color, ", ").concat(pe, ")");
 };
 var _default = exports.default = colorMap;

package/lib/CardSelect/CardSelect.js

@@ -10,21 +10,22 @@
   "computed": "setup-const",
   "ref": "setup-const",
   "watch": "setup-const",
-  "defineOptions": "setup-const",
+  "genCompoentStyle": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "emit": "setup-const",
   "selectKeys": "setup-ref",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "CardSelectStyle": "setup-ref",
   "isMultiple": "setup-ref",
   "handleSelect": "setup-const"
 } */
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
+import { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle } from "vue";
 const _hoisted_1 = ["onClick"];
-const _hoisted_2 = { class: "j-card-select-item-content" };
-const _hoisted_3 = { class: "j-card-select-title" };
-const _hoisted_4 = { class: "j-card-select-describe" };
 import { has } from 'lodash-es';
-import { computed, ref, watch, } from 'vue';
+import { computed, ref, watch } from 'vue';
+import genCompoentStyle from './style';
 const __sfc_main__ = Object.assign({
     name: 'JCardSelect'
 }, {
@@ -63,6 +64,8 @@ const __sfc_main__ = Object.assign({
         const props = __props;
         const emit = __emit;
         const selectKeys = ref([]);
+        const prefixCls = computed(() => 'j-card-select');
+        const [wrapSSR, hashId] = genCompoentStyle(prefixCls);
         const CardSelectStyle = computed(() => {
             const _column = props.column > 0 && props.layout === 'horizontal' ? props.column : 1;
             return {
@@ -103,7 +106,7 @@ const __sfc_main__ = Object.assign({
         }, { immediate: true });
         return (_ctx, _cache) => {
             return (_openBlock(), _createElementBlock("div", {
-                class: "j-card-select",
+                class: _normalizeClass(['j-card-select', _unref(hashId)]),
                 style: _normalizeStyle(CardSelectStyle.value)
             }, [
                 (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(__props.options, (item) => {
@@ -111,19 +114,26 @@ const __sfc_main__ = Object.assign({
                         class: _normalizeClass({
                             'j-card-select-item': true,
                             'disabled': __props.disabled || item.disabled,
-                            'active': selectKeys.value.includes(item.value)
+                            'active': selectKeys.value.includes(item.value),
+                            [_unref(hashId)]: true
                         }),
                         onClick: () => handleSelect(item.value, item)
                     }, [
                         _renderSlot(_ctx.$slots, "itemRender", { node: item }, () => [
-                            _createElementVNode("div", _hoisted_2, [
-                                _createElementVNode("div", _hoisted_3, _toDisplayString(item.label), 1 /* TEXT */),
-                                _createElementVNode("div", _hoisted_4, _toDisplayString(item.describe), 1 /* TEXT */)
-                            ])
+                            _createElementVNode("div", {
+                                class: _normalizeClass(['j-card-select-item-content', _unref(hashId)])
+                            }, [
+                                _createElementVNode("div", {
+                                    class: _normalizeClass(['j-card-select-title', _unref(hashId)])
+                                }, _toDisplayString(item.label), 3 /* TEXT, CLASS */),
+                                _createElementVNode("div", {
+                                    class: _normalizeClass(['j-card-select-describe', _unref(hashId)])
+                                }, _toDisplayString(item.describe), 3 /* TEXT, CLASS */)
+                            ], 2 /* CLASS */)
                         ])
                     ], 10 /* CLASS, PROPS */, _hoisted_1));
                 }), 256 /* UNKEYED_FRAGMENT */))
-            ], 4 /* STYLE */));
+            ], 6 /* CLASS, STYLE */));
         };
     }
 });

package/lib/CardSelect/style/index.js

@@ -1,3 +1,32 @@
 "use strict";
 
-require("./index.less");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
+var genCardSelectStyle = function genCardSelectStyle(config) {
+  var componentCls = config.componentCls,
+    token = config.token;
+  return (0, _defineProperty2.default)({}, componentCls, (0, _defineProperty2.default)({
+    display: 'grid',
+    gap: '12px'
+  }, "".concat(componentCls, "-item"), (0, _defineProperty2.default)({
+    padding: '12px',
+    border: '1px solid #e6e6e6',
+    borderRadius: '@border-radius-base',
+    cursor: 'pointer',
+    '&.active': {
+      borderColor: token.colorPrimary
+    },
+    '&.disabled': {
+      cursor: 'not-allowed',
+      opacity: 0.7
+    }
+  }, "".concat(componentCls, "-describe"), {
+    color: token.textColorSubtitle
+  })));
+};
+var _default = exports.default = (0, _styleRegister.default)([genCardSelectStyle]);

package/lib/CheckButton/CheckButton.js

@@ -8,20 +8,24 @@
   "computed": "setup-const",
   "ref": "setup-const",
   "watch": "setup-const",
-  "defineOptions": "setup-const",
   "isArray": "setup-maybe-ref",
+  "useCheckButtonStyle": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "emit": "setup-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "myValue": "setup-ref",
   "optionsMap": "setup-ref",
   "_options": "setup-ref",
   "selected": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
+import { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
 const _hoisted_1 = ["onClick"];
-import { computed, ref, watch, } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { isArray } from '@jetlinks-web/utils';
+import useCheckButtonStyle from './style';
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'JCheckButton'
@@ -56,6 +60,9 @@ const __sfc_main__ = _defineComponent({
     setup(__props, { emit: __emit }) {
         const props = __props;
         const emit = __emit;
+        // 使用样式
+        const prefixCls = computed(() => 'j-check-button');
+        const [wrapSSR, hashId] = useCheckButtonStyle(prefixCls);
         const myValue = ref();
         const optionsMap = ref(new Map());
         const _options = computed(() => {
@@ -99,7 +106,7 @@ const __sfc_main__ = _defineComponent({
         };
         return (_ctx, _cache) => {
             return (_openBlock(), _createElementBlock("div", {
-                class: _normalizeClass(['j-check-button', props.class]),
+                class: _normalizeClass(['j-check-button', props.class, _unref(hashId)]),
                 style: _normalizeStyle(__props.style)
             }, [
                 (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_options.value, (item) => {
@@ -109,6 +116,7 @@ const __sfc_main__ = _defineComponent({
                             'j-check-button-item',
                             myValue.value.includes(item.value) ? 'selected' : '',
                             item.disabled ? 'disabled' : '',
+                            _unref(hashId)
                         ]),
                         onClick: () => {
                             selected(item.value, item.disabled);

package/lib/CheckButton/style/index.js

@@ -1,3 +1,48 @@
 "use strict";
 
-require("./index.less");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
+var genCheckButtonStyle = function genCheckButtonStyle(config) {
+  var componentCls = config.componentCls,
+    token = config.token;
+  return (0, _defineProperty2.default)({}, componentCls, (0, _defineProperty2.default)({
+    display: 'flex',
+    gap: '16px',
+    width: '100%'
+  }, "".concat(componentCls, "-item"), {
+    flex: 1,
+    minWidth: 0,
+    padding: '8px',
+    borderRadius: token.borderRadius,
+    backgroundColor: '#f2f3f5',
+    transition: 'all 0.3s',
+    color: '#333',
+    textAlign: 'center',
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: token.colorPrimary,
+      opacity: 0.85,
+      color: '#fff'
+    },
+    '&.selected': {
+      backgroundColor: token.colorPrimary,
+      color: '#fff'
+    },
+    '&.disabled': {
+      backgroundColor: '#f5f5f5',
+      color: '#ccc',
+      cursor: 'not-allowed',
+      '&:hover': {
+        backgroundColor: '#f5f5f5',
+        color: '#ccc',
+        opacity: 1
+      }
+    }
+  }));
+};
+var _default = exports.default = (0, _styleRegister.default)([genCheckButtonStyle]);

package/lib/DragModal/DragModal.js

@@ -23,12 +23,12 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "footer": "props",
   "ref": "setup-const",
   "useSlots": "setup-const",
-  "defineOptions": "setup-const",
   "computed": "setup-const",
   "onMounted": "setup-const",
   "watch": "setup-const",
   "Button": "setup-maybe-ref",
   "useLocaleReceiver": "setup-maybe-ref",
+  "genDragModalStyle": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "emits": "setup-const",
   "slots": "setup-maybe-ref",
@@ -40,6 +40,9 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "baseHeight": "setup-ref",
   "baseLeft": "setup-ref",
   "baseTop": "setup-ref",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "styles": "setup-ref",
   "getFixed": "setup-const",
   "onDrag": "setup-const",
@@ -49,18 +52,19 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "onOk": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, withCtx as _withCtx, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, unref as _unref, createTextVNode as _createTextVNode, Transition as _Transition } from "vue";
+import { unref as _unref, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, withCtx as _withCtx, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, createTextVNode as _createTextVNode, Transition as _Transition } from "vue";
 const _hoisted_1 = {
     key: 0,
-    class: "header"
+    class: /*@__PURE__*/ _normalizeClass(["header"])
 };
 const _hoisted_2 = {
     key: 1,
-    class: "jetlinks-drag-modal-footer"
+    class: /*@__PURE__*/ _normalizeClass(["jetlinks-drag-modal-footer"])
 };
 import { ref, useSlots, computed, onMounted, watch } from 'vue';
 import { Button } from 'ant-design-vue';
 import { useLocaleReceiver } from "../LocaleReciver/index";
+import genDragModalStyle from './style';
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'JDragModal'
@@ -104,6 +108,8 @@ const __sfc_main__ = _defineComponent({
         const baseHeight = ref(props.height || 100);
         const baseLeft = ref(100);
         const baseTop = ref(100);
+        const prefixCls = computed(() => 'jetlinks-drag-modal');
+        const [wrapSSR, hashId] = genDragModalStyle(prefixCls);
         const styles = computed(() => {
             return {
                 top: getFixed(baseTop.value) + 'px',
@@ -244,7 +250,7 @@ const __sfc_main__ = _defineComponent({
                 ref_key: "dialog",
                 ref: dialog,
                 style: _normalizeStyle(styles.value),
-                class: "jetlinks-drag-modal"
+                class: _normalizeClass(["jetlinks-drag-modal", _unref(hashId)])
             }, [
                 _createVNode(_Transition, { name: "dialog" }, {
                     default: _withCtx(() => [
@@ -269,7 +275,7 @@ const __sfc_main__ = _defineComponent({
                                 ]))
                                 : _createCommentVNode("v-if", true),
                             _createElementVNode("div", {
-                                class: "jetlinks-drag-modal-body",
+                                class: _normalizeClass(["jetlinks-drag-modal-body"]),
                                 style: _normalizeStyle(__props.bodyStyle)
                             }, [
                                 _renderSlot(_ctx.$slots, "default")
@@ -307,10 +313,10 @@ const __sfc_main__ = _defineComponent({
                     _: 3 /* FORWARDED */
                 }),
                 _createElementVNode("div", {
-                    class: "jetlinks-drag-modal-range drag-bottom-right",
+                    class: _normalizeClass(['jetlinks-drag-modal-range', 'drag-bottom-right']),
                     onMousedown: _cache[0] || (_cache[0] = _withModifiers(($event) => (rangeMove($event, "drag-bottom-right")), ["stop"]))
                 }, null, 32 /* NEED_HYDRATION */)
-            ], 4 /* STYLE */));
+            ], 6 /* CLASS, STYLE */));
         };
     }
 });

package/lib/DragModal/style/index.js

@@ -1,3 +1,71 @@
 "use strict";
 
-require("./index.less");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
+var genDragModalStyle = function genDragModalStyle(config) {
+  var componentCls = config.componentCls,
+    token = config.token;
+  return (0, _defineProperty2.default)({}, componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    position: 'fixed',
+    zIndex: 1000
+  }, "".concat(componentCls, "-sprite"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    zIndex: 23456765435,
+    backgroundColor: '#ffffff',
+    borderRadius: 4,
+    border: '1px solid #91CAFF',
+    boxShadow: '0 3px 8px 0 rgba(22, 119, 255, 0.24)',
+    header: {
+      padding: '5px 15px',
+      fontSize: 18,
+      fontWeight: 700,
+      color: '#333',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      borderBottom: '1px solid #f0f0f0',
+      cursor: 'move'
+    }
+  }, "".concat(componentCls, "-body"), {
+    flex: 1,
+    minHeight: 0,
+    overflowY: 'auto',
+    padding: '24px 20px'
+  }), "".concat(componentCls, "-footer"), {
+    borderTop: '1px solid #f0f0f0',
+    padding: '5px 15px'
+  })), "".concat(componentCls, "-range"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    position: 'absolute',
+    width: '16px',
+    height: '16px',
+    borderRadius: '100%',
+    zIndex: 23456765436
+  }, 'drag-bottom-right', (0, _defineProperty2.default)({
+    bottom: '-6px',
+    right: '-6px'
+  }, '&:hover', {
+    cursor: 'nwse-resize'
+  })), 'drag-bottom-left', (0, _defineProperty2.default)({
+    bottom: '-6px',
+    left: '-6px'
+  }, '&:hover', {
+    cursor: 'nesw-resize'
+  })), 'drag-top-right', {
+    top: '-6px',
+    right: '-6px'
+  }), 'drag-top-left', {
+    top: '-6px',
+    left: '-6px'
+  })));
+};
+var _default = exports.default = (0, _styleRegister.default)([genDragModalStyle]);

package/lib/EditTable/Body.js

@@ -32,8 +32,12 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "nextTick": "setup-const",
   "Empty": "setup-const",
   "CellRender": "setup-const",
+  "genEditTableStyle": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "emit": "setup-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "viewScrollRef": "setup-ref",
   "tableCenterRef": "setup-ref",
   "virtualRang": "setup-reactive-const",
@@ -51,7 +55,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "rowClick": "setup-const",
   "updateSelectedKeys": "setup-const"
 } */
-import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createCommentVNode as _createCommentVNode, createBlock as _createBlock, withModifiers as _withModifiers, normalizeClass as _normalizeClass, createVNode as _createVNode } from "vue";
+import { unref as _unref, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createCommentVNode as _createCommentVNode, createBlock as _createBlock, withModifiers as _withModifiers, normalizeClass as _normalizeClass, createVNode as _createVNode } from "vue";
 const _hoisted_1 = { style: { position: 'relative' } };
 const _hoisted_2 = ["data-row-key", "onContextmenu", "onClick"];
 const _hoisted_3 = {
@@ -74,6 +78,7 @@ import { bodyProps } from "./props";
 import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import Empty from '../Empty/Empty.js';
 import CellRender from './CellRender.js';
+import genEditTableStyle from './style';
 const __sfc_main__ = Object.assign({
     name: 'JEditTableBody'
 }, {
@@ -95,6 +100,8 @@ const __sfc_main__ = Object.assign({
     setup(__props, { expose: __expose, emit: __emit }) {
         const props = __props;
         const emit = __emit;
+        const prefixCls = computed(() => 'jetlinks-edit-table');
+        const [wrapSSR, hashId] = genEditTableStyle(prefixCls);
         const viewScrollRef = ref();
         const tableCenterRef = ref();
         const virtualRang = reactive({
@@ -212,7 +219,7 @@ const __sfc_main__ = Object.assign({
                     key: 0,
                     ref_key: "viewScrollRef",
                     ref: viewScrollRef,
-                    class: "jetlinks-edit-table-body-viewport",
+                    class: _normalizeClass(['jetlinks-edit-table-body-viewport', _unref(hashId)]),
                     style: _normalizeStyle({ ..._ctx.style, height: _ctx.height + 'px' }),
                     onScroll: onScroll
                 }, [
@@ -293,7 +300,7 @@ const __sfc_main__ = Object.assign({
                                 : _createCommentVNode("v-if", true)
                         ], 4 /* STYLE */)
                     ])
-                ], 36 /* STYLE, NEED_HYDRATION */))
+                ], 38 /* CLASS, STYLE, NEED_HYDRATION */))
                 : _renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
                     _createElementVNode("div", _hoisted_6, [
                         _createVNode(Empty)

package/lib/EditTable/EditTable.js

@@ -41,7 +41,6 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "useSlots": "setup-const",
   "ref": "setup-const",
   "reactive": "setup-const",
-  "defineOptions": "setup-const",
   "computed": "setup-const",
   "watch": "setup-const",
   "bodyProps": "setup-maybe-ref",
@@ -52,9 +51,13 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "Body": "setup-const",
   "Group": "setup-const",
   "useLocaleReceiver": "setup-maybe-ref",
+  "useEditTableStyle": "setup-maybe-ref",
   "emit": "setup-const",
   "contextLocale": "setup-maybe-ref",
   "props": "setup-reactive-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "slots": "setup-maybe-ref",
   "myColumns": "setup-ref",
   "tableWrapper": "setup-ref",
@@ -109,7 +112,6 @@ const _hoisted_3 = {
     key: 0,
     class: "jetlinks-table-horizontal-scroll"
 };
-const _hoisted_4 = /*#__PURE__*/ _createElementVNode("div", { style: { "width": "15px", "height": "100%", "overflow-x": "hidden" } }, null, -1 /* HOISTED */);
 import { FULL_SCREEN, RIGHT_MENU, TABLE_DATA_SOURCE, TABLE_ERROR, TABLE_GROUP_ACTIVE, TABLE_GROUP_ERROR, TABLE_GROUP_OPTIONS, TABLE_H_SCROLL, TABLE_OPEN_GROUP, TABLE_TOOL, TABLE_WRAPPER } from './consts';
 import { handleColumnsWidth } from './utils';
 import { useGroup, useResizeObserver, useValidate } from './hooks';
@@ -123,6 +125,7 @@ import Header from './Header.js';
 import Body from './Body.js';
 import Group from './group.js';
 import { useLocaleReceiver } from "../LocaleReciver";
+import useEditTableStyle from './style';
 const defaultGroupId = 'group_1';
 const __sfc_main__ = Object.assign({
     name: 'JEditTable'
@@ -155,6 +158,8 @@ const __sfc_main__ = Object.assign({
         const emit = __emit;
         const [contextLocale] = useLocaleReceiver('EditTable');
         const props = __props;
+        const prefixCls = computed(() => 'jetlinks-edit-table');
+        const [wrapSSR, hashId] = useEditTableStyle(prefixCls);
         const slots = useSlots();
         const myColumns = ref([]);
         const tableWrapper = ref();
@@ -456,7 +461,8 @@ const __sfc_main__ = Object.assign({
             return (_openBlock(), _createElementBlock("div", {
                 class: _normalizeClass({
                     'jetlinks-edit-table-wrapper': true,
-                    'table-full-screen': _unref(isFullscreen)
+                    'table-full-screen': _unref(isFullscreen),
+                    [_unref(hashId)]: true
                 }),
                 ref_key: "tableWrapper",
                 ref: tableWrapper
@@ -515,18 +521,18 @@ const __sfc_main__ = Object.assign({
                                 class: "jetlinks-table-horizontal-scroll-bar",
                                 ref_key: "scrollBarRef",
                                 ref: scrollBarRef,
-                                style: _normalizeStyle({
+                                style: {
                                     width: 'calc(100% - 15px)',
                                     height: '100%',
                                     overflowX: 'scroll'
-                                }),
+                                },
                                 onScroll: onHorizontalScroll
                             }, [
                                 _createElementVNode("div", {
                                     style: _normalizeStyle({ minWidth: horizontalScrollWidth.value + 'px', maxWidth: horizontalScrollWidth.value + 'px', height: '100%' })
                                 }, null, 4 /* STYLE */)
-                            ], 36 /* STYLE, NEED_HYDRATION */),
-                            _hoisted_4
+                            ], 544 /* NEED_HYDRATION, NEED_PATCH */),
+                            _cache[1] || (_cache[1] = _createElementVNode("div", { style: { "width": "15px", "height": "100%", "overflow-x": "hidden" } }, null, -1 /* CACHED */))
                         ]))
                         : _createCommentVNode("v-if", true),
                     (_ctx.dataSource.length && _ctx.openGroup)