@jetlinks-web/components 3.0.1-rc → 3.0.1

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)

package/lib/EditTable/FormItem.js

@@ -21,7 +21,6 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "computed": "setup-const",
   "reactive": "setup-const",
   "watch": "setup-const",
-  "defineOptions": "setup-const",
   "provide": "setup-const",
   "get": "setup-maybe-ref",
   "isArray": "setup-maybe-ref",
@@ -29,8 +28,12 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "useInjectError": "setup-maybe-ref",
   "useInjectForm": "setup-maybe-ref",
   "TABLE_FORM_ITEM_ERROR": "setup-maybe-ref",
+  "genEditTableStyle": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "emit": "setup-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "context": "setup-maybe-ref",
   "globalErrorMessage": "setup-maybe-ref",
   "hideTimer": "setup-let",
@@ -47,18 +50,15 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "onFieldBlur": "setup-const",
   "onFieldChange": "setup-const"
 } */
-import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, Fragment as _Fragment } from "vue";
+import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, unref as _unref, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, renderSlot as _renderSlot, Fragment as _Fragment } from "vue";
 const _hoisted_1 = { style: { "color": "#1d2129" } };
-const _hoisted_2 = {
-    key: 0,
-    class: "jetlinks-table-form-error-target"
-};
-const _hoisted_3 = ["id"];
+const _hoisted_2 = ["id"];
 import { onBeforeUnmount, computed, reactive, watch, provide } from "vue";
 import { get, isArray } from 'lodash-es';
 import { useProvideFormItemContext } from 'ant-design-vue/es/form/FormItemContext';
 import { useInjectError, useInjectForm } from "./hooks";
 import { TABLE_FORM_ITEM_ERROR } from "./consts";
+import genEditTableStyle from './style';
 const __sfc_main__ = Object.assign({
     name: 'JEditTableFormItem'
 }, {
@@ -76,6 +76,8 @@ const __sfc_main__ = Object.assign({
     setup(__props, { emit: __emit }) {
         const props = __props;
         const emit = __emit;
+        const prefixCls = computed(() => 'jetlinks-edit-table');
+        const [wrapSSR, hashId] = genEditTableStyle(prefixCls);
         const context = useInjectForm();
         const globalErrorMessage = useInjectError();
         let hideTimer;
@@ -89,18 +91,12 @@ const __sfc_main__ = Object.assign({
         });
         const filedId = computed(() => {
             const names = isArray(props.name) ? props.name : [props.name];
-            return names.join('_');
+            const [index, ...extra] = names;
+            return `${index}-${extra.join('.')}`;
         });
         const filedName = computed(() => {
             const names = isArray(props.name) ? props.name : [props.name];
-            const _rules = context.rules.value;
-            let tempKey = undefined;
-            for (const key of names) {
-                if (key in _rules) {
-                    tempKey = key;
-                }
-            }
-            return tempKey;
+            return [...names].pop();
         });
         const filedValue = computed(() => {
             return get(context.dataSource.value, props.name);
@@ -194,7 +190,10 @@ const __sfc_main__ = Object.assign({
                     ]),
                     default: _withCtx(() => [
                         (errorMap.visible)
-                            ? (_openBlock(), _createElementBlock("div", _hoisted_2))
+                            ? (_openBlock(), _createElementBlock("div", {
+                                key: 0,
+                                class: _normalizeClass(['jetlinks-table-form-error-target', _unref(hashId), 'hashId'])
+                            }, null, 2 /* CLASS */))
                             : _createCommentVNode("v-if", true)
                     ]),
                     _: 1 /* STABLE */
@@ -202,10 +201,10 @@ const __sfc_main__ = Object.assign({
                 _createElementVNode("div", {
                     id: eventKey.value,
                     style: { "position": "relative" },
-                    class: _normalizeClass({ 'jetlinks-edit-table-form-has-error': errorMap.message })
+                    class: _normalizeClass({ 'jetlinks-edit-table-form-has-error': errorMap.message, [_unref(hashId)]: true })
                 }, [
                     _renderSlot(_ctx.$slots, "default")
-                ], 10 /* CLASS, PROPS */, _hoisted_3)
+                ], 10 /* CLASS, PROPS */, _hoisted_2)
             ], 64 /* STABLE_FRAGMENT */));
         };
     }

package/lib/EditTable/Header.js

@@ -22,18 +22,22 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "SearchModal": "setup-maybe-ref",
   "Sort": "setup-maybe-ref",
   "reactive": "setup-const",
-  "defineOptions": "setup-const",
+  "computed": "setup-const",
   "useHScroll": "setup-maybe-ref",
   "useTableTool": "setup-maybe-ref",
   "HeaderItemRender": "setup-const",
+  "useEditTableStyle": "setup-maybe-ref",
   "props": "setup-reactive-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "tableTool": "setup-maybe-ref",
   "hScroll": "setup-maybe-ref",
   "searchData": "setup-reactive-const",
   "showFilter": "setup-const",
   "sortClick": "setup-const"
 } */
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, unref as _unref, mergeProps as _mergeProps, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
+import { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, mergeProps as _mergeProps, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
 const _hoisted_1 = ["id"];
 const _hoisted_2 = { class: "table-header-cell-title" };
 const _hoisted_3 = { class: "cell-title-box" };
@@ -47,9 +51,10 @@ const _hoisted_6 = {
     class: "table-header-cell-trigger"
 };
 import { SearchModal, Sort } from './components/Search';
-import { reactive, } from 'vue';
+import { reactive, computed } from 'vue';
 import { useHScroll, useTableTool } from "./hooks";
 import HeaderItemRender from './HeaderRender.js';
+import useEditTableStyle from './style';
 const __sfc_main__ = Object.assign({
     name: 'JEditTableHeader'
 }, {
@@ -73,6 +78,8 @@ const __sfc_main__ = Object.assign({
     },
     setup(__props) {
         const props = __props;
+        const prefixCls = computed(() => 'jetlinks-edit-table');
+        const [wrapSSR, hashId] = useEditTableStyle(prefixCls);
         const tableTool = useTableTool();
         const hScroll = useHScroll();
         const searchData = reactive({
@@ -89,7 +96,7 @@ const __sfc_main__ = Object.assign({
         return (_ctx, _cache) => {
             const _component_AIcon = _resolveComponent("AIcon");
             return (_openBlock(), _createElementBlock("div", {
-                class: "jetlinks-edit-table-header-container",
+                class: _normalizeClass(['jetlinks-edit-table-header-container', _unref(hashId)]),
                 style: _normalizeStyle(__props.style)
             }, [
                 (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(__props.columns, (item, index) => {
@@ -126,7 +133,10 @@ const __sfc_main__ = Object.assign({
                                         }, null, 8 /* PROPS */, ["onClick"]))
                                         : _createCommentVNode("v-if", true),
                                     (item.sort)
-                                        ? (_openBlock(), _createBlock(_unref(Sort), _mergeProps({ key: 1 }, item.sort, {
+                                        ? (_openBlock(), _createBlock(_unref(Sort), _mergeProps({
+                                            key: 1,
+                                            ref_for: true
+                                        }, item.sort, {
                                             key: item.dataIndex,
                                             active: _unref(tableTool).sortData.dataIndex === item.dataIndex,
                                             selectedRowKeys: _unref(tableTool).sortData.dataIndex === item.dataIndex ? _unref(tableTool).sortData.orderKeys : [],
@@ -147,7 +157,7 @@ const __sfc_main__ = Object.assign({
                         onClose: _cache[0] || (_cache[0] = $event => (searchData.visible = false))
                     }, null, 8 /* PROPS */, ["searchKey", "columns"]))
                     : _createCommentVNode("v-if", true)
-            ], 4 /* STYLE */));
+            ], 6 /* CLASS, STYLE */));
         };
     }
 });