tntd 2.8.42 → 2.8.44

package/lib/scroll-bar/scrollBar.less

@@ -0,0 +1,59 @@
+.tntd-scroll-bar {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+.tntd-scroll-bar-wrap {
+  height: 100%;
+  overflow: auto;
+}
+.tntd-scroll-bar-wrap-hidden-default {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+.tntd-scroll-bar-view {
+  width: fit-content;
+  min-width: 100%;
+}
+.tntd-scroll-bar-bar {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  z-index: 1;
+  border-radius: 4px;
+
+  &.vertical {
+    top: 2px;
+    width: 6px;
+
+    > div {
+      width: 100%;
+    }
+  }
+
+  &.horizontal {
+    left: 2px;
+    height: 6px;
+
+    > div {
+      height: 100%;
+    }
+  }
+}
+.tntd-scroll-bar-thumb {
+  position: relative;
+  display: block;
+  width: 0;
+  height: 0;
+  cursor: pointer;
+  background-color: #909399;
+  border-radius: inherit;
+  opacity: 0.3;
+  transition: 0.3s background-color;
+
+  &:hover {
+    opacity: 0.5;
+  }
+}

package/lib/scroll-bar/util.d.ts

@@ -0,0 +1,40 @@
+export const GAP: 4;
+export namespace BAR_MAP {
+    namespace vertical {
+        const offset: string;
+        const scroll: string;
+        const scrollSize: string;
+        const size: string;
+        const key: string;
+        const axis: string;
+        const client: string;
+        const direction: string;
+    }
+    namespace horizontal {
+        const offset_1: string;
+        export { offset_1 as offset };
+        const scroll_1: string;
+        export { scroll_1 as scroll };
+        const scrollSize_1: string;
+        export { scrollSize_1 as scrollSize };
+        const size_1: string;
+        export { size_1 as size };
+        const key_1: string;
+        export { key_1 as key };
+        const axis_1: string;
+        export { axis_1 as axis };
+        const client_1: string;
+        export { client_1 as client };
+        const direction_1: string;
+        export { direction_1 as direction };
+    }
+}
+export function renderThumbStyle({ move, size, bar }: {
+    move: any;
+    size: any;
+    bar: any;
+}): {
+    [x: number]: any;
+    transform: string;
+};
+//# sourceMappingURL=util.d.ts.map

package/lib/scroll-bar/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../src/scroll-bar/util.js"],"names":[],"mappings":"AAAA,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBb;;;;;;;EAGL"}

package/lib/scroll-bar/util.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderThumbStyle = exports.GAP = exports.BAR_MAP = void 0;
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+var GAP = exports.GAP = 4; // top 2 + bottom 2 of bar instance
+var BAR_MAP = exports.BAR_MAP = {
+  vertical: {
+    offset: 'offsetHeight',
+    scroll: 'scrollTop',
+    scrollSize: 'scrollHeight',
+    size: 'height',
+    key: 'vertical',
+    axis: 'Y',
+    client: 'clientY',
+    direction: 'top'
+  },
+  horizontal: {
+    offset: 'offsetWidth',
+    scroll: 'scrollLeft',
+    scrollSize: 'scrollWidth',
+    size: 'width',
+    key: 'horizontal',
+    axis: 'X',
+    client: 'clientX',
+    direction: 'left'
+  }
+};
+var renderThumbStyle = exports.renderThumbStyle = function renderThumbStyle(_ref) {
+  var move = _ref.move,
+    size = _ref.size,
+    bar = _ref.bar;
+  return _defineProperty(_defineProperty({}, bar.size, size), "transform", "translate".concat(bar.axis, "(").concat(move, "%)"));
+};

package/lib/scroll-bar/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/scroll-bar/util.js"],"names":[],"mappings":";;;AAAa,QAAA,GAAG,GAAG,CAAC,CAAA,CAAC,mCAAmC;AAE3C,QAAA,OAAO,GAAG;IACrB,QAAQ,EAAE;QACR,MAAM,EAAE,cAAc;QACtB,MAAM,EAAE,WAAW;QACnB,UAAU,EAAE,cAAc;QAC1B,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,UAAU;QACf,IAAI,EAAE,GAAG;QACT,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,KAAK;KACjB;IACD,UAAU,EAAE;QACV,MAAM,EAAE,aAAa;QACrB,MAAM,EAAE,YAAY;QACpB,UAAU,EAAE,aAAa;QACzB,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,YAAY;QACjB,IAAI,EAAE,GAAG;QACT,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,MAAM;KAClB;CACF,CAAA;AAEM,MAAM,gBAAgB,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC;IACxD,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI;IAChB,SAAS,EAAE,YAAY,GAAG,CAAC,IAAI,IAAI,IAAI,IAAI;CAC5C,CAAC,CAAA;AAHW,QAAA,gBAAgB,oBAG3B","sourcesContent":["export const GAP = 4 // top 2 + bottom 2 of bar instance\n\nexport const BAR_MAP = {\n  vertical: {\n    offset: 'offsetHeight',\n    scroll: 'scrollTop',\n    scrollSize: 'scrollHeight',\n    size: 'height',\n    key: 'vertical',\n    axis: 'Y',\n    client: 'clientY',\n    direction: 'top',\n  },\n  horizontal: {\n    offset: 'offsetWidth',\n    scroll: 'scrollLeft',\n    scrollSize: 'scrollWidth',\n    size: 'width',\n    key: 'horizontal',\n    axis: 'X',\n    client: 'clientX',\n    direction: 'left',\n  },\n}\n\nexport const renderThumbStyle = ({ move, size, bar }) => ({\n  [bar.size]: size,\n  transform: `translate${bar.axis}(${move}%)`,\n})\n"]}

package/lib/style/core/base.less

@@ -508,3 +508,5 @@ mark {
 .clearfix {
   .clearfix();
 }
+
+.scrollbar-base();

package/lib/style/mixins/index.less

@@ -8,3 +8,4 @@
 @import 'reset';
 @import 'operation-unit';
 @import 'typography';
+@import 'scrollbar';

package/lib/style/mixins/scrollbar.less

@@ -0,0 +1,54 @@
+@scrollbar-width: 8px;          // 滚动条基础宽度（Webkit有效，Firefox仅支持thin/none/auto）
+@scrollbar-radius: 3px;         // 滚动条圆角
+@track-color: transparent;      // 默认轨道颜色（透明更适配不同背景）
+@thumb-color: #C9D2DD;          // 默认滑块颜色（浅灰）
+@thumb-hover: #8B919E; // 悬停滑块颜色（深灰）
+
+/* 深色主题变量（通过覆盖变量实现主题切换） */
+// @dark-track: rgba(255, 255, 255, 0.05);   // 深色轨道
+// @dark-thumb: rgba(255, 255, 255, 0.2);    // 深色滑块
+// @dark-thumb-hover: rgba(255, 255, 255, 0.3); // 深色悬停
+
+/* 核心滚动条混合（建议添加到需要滚动的容器类） */
+.scrollbar-base() {
+    /* Firefox兼容 */
+    // scrollbar-width: none;  // 仅支持thin/none/auto，thin对应约6px宽度
+    /* 关键：防止滚动条占用容器内空间 */
+    // box-sizing: border-box;
+
+    /* Webkit内核（Chrome/Safari等） */
+    &::-webkit-scrollbar {
+        width: @scrollbar-width;   // 垂直滚动条宽度
+        height: @scrollbar-width;  // 水平滚动条高度
+    }
+
+    &::-webkit-scrollbar-track {
+        background: @track-color;
+        border-radius: @scrollbar-radius;
+        margin: 2px 0;  // 上下留空避免贴边（垂直滚动条）               // 若需要水平滚动条留空可添加 margin: 0 2px;
+    }
+    &::-webkit-scrollbar-track-piece {
+        -webkit-border-radius: 0;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        height: @scrollbar-width;
+        background: @thumb-color;
+        border-radius: @scrollbar-radius;
+        transition: background 0.2s ease;  // 颜色过渡动画
+        cursor: pointer;
+    }
+
+    &::-webkit-scrollbar-thumb:hover{
+        background: @thumb-hover;  // 直接修改背景色更自然
+        opacity: 0.8;
+    }
+
+    /* 可选：隐藏滚动条但保留滚动功能（需配合overflow: auto） */
+    &.scrollbar-hidden {
+        &::-webkit-scrollbar {
+            width: 0;
+            height: 0;
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tntd",
-    "version": "2.8.42",
+    "version": "2.8.44",
     "license": "MIT",
     "scripts": {
         "start": "heft start --storybook",