@jetlinks-web/components 3.3.11 → 3.3.13

package/lib/Skeleton/components/Page.js

@@ -4,12 +4,17 @@
   "loading": "props",
   "List": "setup-const",
   "Detail": "setup-const",
-  "props": "setup-reactive-const"
+  "computed": "setup-const",
+  "theme": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "token": "setup-maybe-ref",
+  "pageStyle": "setup-ref"
 } */
-import { renderSlot as _renderSlot, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = { style: { "padding": "24px", "background-color": "#ffffff", "height": "100%" } };
+import { renderSlot as _renderSlot, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, createElementBlock as _createElementBlock } from "vue";
 import List from "./List.js";
 import Detail from "./Detail.js";
+import { computed } from "vue";
+import { theme } from "ant-design-vue";
 const __sfc_main__ = Object.assign({
     name: 'JSkeletonPage'
 }, {
@@ -29,8 +34,16 @@ const __sfc_main__ = Object.assign({
     },
     setup(__props) {
         const props = __props;
+        const { token } = theme.useToken();
+        const pageStyle = computed(() => ({
+            padding: '24px',
+            backgroundColor: token.value.colorBgContainer,
+            height: '100%',
+        }));
         return (_ctx, _cache) => {
-            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+            return (_openBlock(), _createElementBlock("div", {
+                style: _normalizeStyle(pageStyle.value)
+            }, [
                 (__props.type === 'list')
                     ? (_openBlock(), _createBlock(List, {
                         key: 0,
@@ -55,7 +68,7 @@ const __sfc_main__ = Object.assign({
                         _: 3 /* FORWARDED */
                     }, 8 /* PROPS */, ["loading"]))
                     : _renderSlot(_ctx.$slots, "default", { key: 2 })
-            ]));
+            ], 4 /* STYLE */));
         };
     }
 });

package/lib/Skeleton/style/index.js

@@ -13,9 +13,6 @@ var JSkeletonSizeLg = '36px';
 var JSkeletonSizeSm = '16px';
 var JSkeletonSize = '24px';
 var JSkeletonBorderRadius = '8px';
-var JSkeletonBg = '#f0f2f5';
-var JSkeletonBg1 = '#e6e8eb';
-var JSkeletonBorder = "4px solid ".concat(JSkeletonBg);
 var JSkeletonFlex = {
   display: 'flex',
   gap: '24px',
@@ -34,6 +31,10 @@ var genSkeletonStyle = function genSkeletonStyle(config) {
   var _$concat6;
   var componentCls = config.componentCls,
     token = config.token;
+  var JSkeletonBg = token.colorFillQuaternary;
+  var JSkeletonBg1 = token.colorFillSecondary;
+  var JSkeletonBorder = "".concat(token.lineWidth * 4, "px solid ").concat(JSkeletonBg);
+  var JSkeletonCardBorder = "".concat(token.lineWidth * 2, "px solid ").concat(token.colorBorderSecondary);
   return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(componentCls, "-flex"), JSkeletonFlex), "".concat(componentCls, "-flex-between"), (0, _objectSpread2.default)((0, _objectSpread2.default)({}, JSkeletonFlex), {}, {
     background: JSkeletonBg,
     height: JSkeletonSize,
@@ -41,7 +42,12 @@ var genSkeletonStyle = function genSkeletonStyle(config) {
   })), "".concat(componentCls, "-flex-column"), (0, _objectSpread2.default)((0, _objectSpread2.default)({}, JSkeletonFlex), {}, {
     justifyContent: 'space-between'
   })), "".concat(componentCls), (_$concat6 = {
-    height: '100%'
+    height: '100%',
+    '--j-skeleton-bg': JSkeletonBg,
+    '--j-skeleton-bg-active': JSkeletonBg1,
+    '--j-skeleton-border': JSkeletonBorder,
+    '--j-skeleton-card-border': JSkeletonCardBorder,
+    '--j-skeleton-table-header-bg': token.colorFillTertiary
   }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat6, "".concat(componentCls, "-item"), {
     background: "linear-gradient(90deg, ".concat(JSkeletonBg, " 25%, ").concat(JSkeletonBg1, " 50%, ").concat(JSkeletonBg, " 75%)"),
     backgroundSize: '400% 100%',
@@ -90,7 +96,7 @@ var genSkeletonStyle = function genSkeletonStyle(config) {
     padding: '12px 6px',
     borderRadius: '8px'
   }), "".concat(componentCls, "-table-header"), {
-    backgroundColor: 'lightgrey'
+    backgroundColor: token.colorFillTertiary
   }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat6, "".concat(componentCls, "-table-action"), {
     width: '200px',
     display: 'grid',
@@ -103,7 +109,7 @@ var genSkeletonStyle = function genSkeletonStyle(config) {
   }), "".concat(componentCls, "-card"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(componentCls, "-card-content"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
     display: 'flex',
     gap: '16px',
-    border: '2px solid #f0f2f5',
+    border: JSkeletonCardBorder,
     borderRadius: '8px',
     padding: '24px',
     marginBottom: '16px'

package/lib/Title/style/index.js

@@ -18,7 +18,7 @@ var genTitleStyle = function genTitleStyle(config) {
   }, "".concat(componentCls, "-content"), {
     position: 'relative',
     paddingLeft: '10px',
-    color: 'rgba(0, 0, 0, 0.8)',
+    color: token.colorTextHeading,
     fontWeight: 600,
     lineHeight: 1,
     '&::before': {
@@ -27,7 +27,7 @@ var genTitleStyle = function genTitleStyle(config) {
       left: 0,
       width: 4,
       height: '100%',
-      background: '#1890ff',
+      background: token.colorPrimary,
       borderRadius: '0 3px 3px 0',
       content: '""'
     }

package/lib/VirtualTable/style/index.js

@@ -5,8 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
-var genVirtualTableStyle = function genVirtualTableStyle() {
+var _scrollbar = require("../../style/scrollbar");
+var genVirtualTableStyle = function genVirtualTableStyle(config) {
+  var token = config.token;
   return {
     '.virtual-table-wrapper': {
       display: 'flex',
@@ -24,11 +27,11 @@ var genVirtualTableStyle = function genVirtualTableStyle() {
           }
         }
       },
-      '.virtual-table-body': {
+      '.virtual-table-body': (0, _objectSpread2.default)({
         'overflow-y': 'auto',
         position: 'relative',
         'min-height': '100px'
-      },
+      }, (0, _scrollbar.genTokenScrollbarStyle)(token)),
       '.virtual-table-header-fixed': {
         // 位移的容器，提升位移动画性能
         'will-change': 'transform'

package/lib/style/scrollbar.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genTokenScrollbarStyle = void 0;
+var genTokenScrollbarStyle = exports.genTokenScrollbarStyle = function genTokenScrollbarStyle(token) {
+  return {
+    scrollbarWidth: 'thin',
+    scrollbarColor: "".concat(token.colorFillSecondary, " ").concat(token.colorFillQuaternary),
+    '&::-webkit-scrollbar': {
+      width: 10,
+      height: 10
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: token.colorFillQuaternary
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: token.colorFillSecondary,
+      borderRadius: token.borderRadiusLG,
+      border: "".concat(token.lineWidth * 2, "px solid ").concat(token.colorFillQuaternary)
+    },
+    '&::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: token.colorFill
+    },
+    '&::-webkit-scrollbar-corner': {
+      backgroundColor: token.colorFillQuaternary
+    }
+  };
+};

package/lib/style/styleRegister.js

@@ -7,18 +7,52 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _vue = require("vue");
+var _antDesignVue = require("ant-design-vue");
 var _internal = require("ant-design-vue/es/theme/internal");
+var _context = require("ant-design-vue/es/config-provider/context");
+var _style = require("ant-design-vue/es/style");
 var _variable = _interopRequireDefault(require("./variable"));
 var genCompoentStyle = function genCompoentStyle(styleFn) {
-  return (0, _internal.genComponentStyleHook)('jetlinks-components', function (_token, info) {
-    var componentToken = {
-      token: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _token), _variable.default),
-      hashId: info.hashId,
-      componentCls: ".".concat(_token.prefixCls)
-    };
-    return (0, _toConsumableArray2.default)(styleFn.map(function (item) {
-      return item(componentToken);
-    }));
-  });
+  return function (_prefixCls) {
+    var prefixCls = (0, _vue.computed)(function () {
+      return (0, _vue.unref)(_prefixCls);
+    });
+    var _theme$useToken = _antDesignVue.theme.useToken(),
+      themeRef = _theme$useToken.theme,
+      token = _theme$useToken.token,
+      hashId = _theme$useToken.hashId;
+    var _useConfigContextInje = (0, _context.useConfigContextInject)(),
+      getPrefixCls = _useConfigContextInje.getPrefixCls,
+      iconPrefixCls = _useConfigContextInje.iconPrefixCls;
+    var rootPrefixCls = (0, _vue.computed)(function () {
+      return getPrefixCls();
+    });
+    var componentInfo = (0, _vue.computed)(function () {
+      return {
+        theme: themeRef.value,
+        token: token.value,
+        hashId: hashId.value,
+        path: ['jetlinks-components', prefixCls.value, rootPrefixCls.value, iconPrefixCls.value]
+      };
+    });
+    var wrapSSR = (0, _internal.useStyleRegister)(componentInfo, function () {
+      var componentCls = ".".concat(prefixCls.value);
+      var componentToken = {
+        token: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, token.value), _variable.default), {}, {
+          componentCls: componentCls,
+          prefixCls: prefixCls.value,
+          iconCls: ".".concat(iconPrefixCls.value),
+          antCls: ".".concat(rootPrefixCls.value)
+        }),
+        hashId: hashId.value,
+        componentCls: componentCls
+      };
+      return [(0, _style.genCommonStyle)(token.value, prefixCls.value)].concat((0, _toConsumableArray2.default)(styleFn.map(function (item) {
+        return item(componentToken);
+      })));
+    });
+    return [wrapSSR, hashId];
+  };
 };
 var _default = exports.default = genCompoentStyle;

package/lib/style/variable.js

@@ -4,7 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = {
-  textColorTitle: '#000',
-  textColorSubtitle: '#263237'
-};
+var _default = exports.default = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetlinks-web/components",
-  "version": "3.3.11",
+  "version": "3.3.13",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",