cosmic-components - npm Package Compare versions

Comparing version 0.0.1-alpha.44 to 0.0.1-alpha.45

dist/Tabs/index.js

@@ -51,3 +51,5 @@ var __extends = (this && this.__extends) || (function () {
         function Tabs() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.timer = null;
+            return _this;
         }
@@ -176,2 +178,26 @@ Tabs.prototype.initData = function () {
         };
+        Tabs.prototype.getScrollLeft = function () {
+            var scroller = this.ref('scroll');
+            return scroller.scrollLeft;
+        };
+        Tabs.prototype.handleScroll = function () {
+            var _this = this;
+            var timer = this.timer;
+            if (timer !== null) {
+                clearTimeout(timer);
+                this.timer = null;
+            }
+            timer = setTimeout(function () {
+                _this.fire('tab-scroll', {
+                    type: 'end',
+                    scrollLeft: _this.getScrollLeft()
+                });
+            }, 150);
+            this.timer = timer;
+            this.fire('tab-scroll', {
+                type: 'scroll',
+                scrollLeft: this.getScrollLeft()
+            });
+            this.updateController();
+        };
         // 判断是否隐藏左右按钮
@@ -250,3 +276,3 @@ Tabs.prototype.updateController = function () {
         };
-        Tabs.template = "\n        <div class=\"{{newStyles.tabs}}\">\n            <div\n                s-if=\"labelList && labelList.length > 1\"\n                class=\"{{ newStyles.tabsNavWrapper }}\"\n            >\n                <div\n                    s-if=\"scroll && pageControl\"\n                    style=\"{{leftArrowShow ? '' : 'display: none'}}\"\n                    class=\"{{ newStyles.leftArrow }}\"\n                    on-click=\"turnPage('left')\">\n                    <slot name=\"prefix\">\n                        <svg width=\"6px\" height=\"11px\" viewBox=\"0 0 6 11\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n                            <g transform=\"translate(3, 5) scale(-1, 1) translate(-3, -5) translate(-4, -2)\" fill=\"#858585\">\n                                <path d=\"M9.18017788,2.01351121 L9.93093323,2.76426656 L5.71622196,6.97897783 C5.62053795,7.07466184 5.61317764,7.22522317 5.69414104,7.32934985 L5.71622196,7.3543555 L9.93093323,11.5690668 L9.18017788,12.3198221 L4.96546661,8.10511085 C4.46288391,7.60252815 4.44765413,6.79714316 4.91977728,6.2762088 L4.96546661,6.22822248 L9.18017788,2.01351121 Z\" transform=\"translate(7.253842, 7.166667) scale(-1, 1) translate(-7.253842, -7.166667) \"></path>\n                            </g>\n                        </svg>\n                    </slot>\n                </div>\n                <div\n                    rl-type=\"stop\"\n                    s-ref=\"scroll\"\n                    class=\"{{ newStyles.tabsNav }} {{ scroll ? newStyles.tabsNavScroll : '' }}\"\n                    on-scroll=\"updateController()\"\n                >\n                    <div\n                        s-for=\"label, labelIndex in labelList\"\n                        s-ref=\"{{'label' + labelIndex}}\"\n                        class=\"{{newStyles.tabsNavItem}} {{labelIndex === index ? newStyles.tabsNavSelected : ''}}\"\n                        on-click=\"handleLabelClick(label, labelIndex, $event)\"\n                    >\n                        {{label.text}}\n                    </div>\n                </div>\n                <div\n                    s-if=\"scroll && pageControl\"\n                    style=\"{{rightArrowShow ? '' : 'display: none'}}\"\n                    class=\"{{newStyles.rightArrow}}\"\n                    on-click=\"turnPage('right')\">\n                    <slot name=\"suffix\">\n                        <svg width=\"14px\" height=\"14px\" viewBox=\"0 0 14 14\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n                            <g fill=\"#858585\">\n                                <path d=\"M9.18017788,2.01351121 L9.93093323,2.76426656 L5.71622196,6.97897783 C5.62053795,7.07466184 5.61317764,7.22522317 5.69414104,7.32934985 L5.71622196,7.3543555 L9.93093323,11.5690668 L9.18017788,12.3198221 L4.96546661,8.10511085 C4.46288391,7.60252815 4.44765413,6.79714316 4.91977728,6.2762088 L4.96546661,6.22822248 L9.18017788,2.01351121 Z\" transform=\"translate(7.253842, 7.166667) scale(-1, 1) translate(-7.253842, -7.166667) \"></path>\n                            </g>\n                        </svg>\n                    </slot>\n                </div>\n                <div\n                    class=\"{{newStyles.tabsDivider}}\"\n                />\n                <div\n                    style=\"{{cursorStyle}}\"\n                    class=\"{{newStyles.tabsCursor}}\"\n                />\n            </div>\n            <div\n                s-ref=\"tabsContent\"\n                style=\"{{\n                    {\n                        height: contentHeight\n                    }\n                }}\"\n                class=\"{{newStyles.tabsContent}}\"\n            >\n                <slot></slot>\n            </div>\n        </div>\n    ";
+        Tabs.template = "\n        <div class=\"{{newStyles.tabs}}\">\n            <div\n                s-if=\"labelList && labelList.length > 1\"\n                class=\"{{ newStyles.tabsNavWrapper }}\"\n            >\n                <div\n                    s-if=\"scroll && pageControl\"\n                    style=\"{{leftArrowShow ? '' : 'display: none'}}\"\n                    class=\"{{ newStyles.leftArrow }}\"\n                    on-click=\"turnPage('left')\">\n                    <slot name=\"prefix\">\n                        <svg width=\"6px\" height=\"11px\" viewBox=\"0 0 6 11\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n                            <g transform=\"translate(3, 5) scale(-1, 1) translate(-3, -5) translate(-4, -2)\" fill=\"#858585\">\n                                <path d=\"M9.18017788,2.01351121 L9.93093323,2.76426656 L5.71622196,6.97897783 C5.62053795,7.07466184 5.61317764,7.22522317 5.69414104,7.32934985 L5.71622196,7.3543555 L9.93093323,11.5690668 L9.18017788,12.3198221 L4.96546661,8.10511085 C4.46288391,7.60252815 4.44765413,6.79714316 4.91977728,6.2762088 L4.96546661,6.22822248 L9.18017788,2.01351121 Z\" transform=\"translate(7.253842, 7.166667) scale(-1, 1) translate(-7.253842, -7.166667) \"></path>\n                            </g>\n                        </svg>\n                    </slot>\n                </div>\n                <div\n                    rl-type=\"stop\"\n                    s-ref=\"scroll\"\n                    class=\"{{ newStyles.tabsNav }} {{ scroll ? newStyles.tabsNavScroll : '' }}\"\n                    on-scroll=\"handleScroll()\"\n                >\n                    <div\n                        s-for=\"label, labelIndex in labelList\"\n                        s-ref=\"{{'label' + labelIndex}}\"\n                        class=\"{{newStyles.tabsNavItem}} {{labelIndex === index ? newStyles.tabsNavSelected : ''}}\"\n                        on-click=\"handleLabelClick(label, labelIndex, $event)\"\n                    >\n                        {{label.text}}\n                    </div>\n                </div>\n                <div\n                    s-if=\"scroll && pageControl\"\n                    style=\"{{rightArrowShow ? '' : 'display: none'}}\"\n                    class=\"{{newStyles.rightArrow}}\"\n                    on-click=\"turnPage('right')\">\n                    <slot name=\"suffix\">\n                        <svg width=\"14px\" height=\"14px\" viewBox=\"0 0 14 14\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n                            <g fill=\"#858585\">\n                                <path d=\"M9.18017788,2.01351121 L9.93093323,2.76426656 L5.71622196,6.97897783 C5.62053795,7.07466184 5.61317764,7.22522317 5.69414104,7.32934985 L5.71622196,7.3543555 L9.93093323,11.5690668 L9.18017788,12.3198221 L4.96546661,8.10511085 C4.46288391,7.60252815 4.44765413,6.79714316 4.91977728,6.2762088 L4.96546661,6.22822248 L9.18017788,2.01351121 Z\" transform=\"translate(7.253842, 7.166667) scale(-1, 1) translate(-7.253842, -7.166667) \"></path>\n                            </g>\n                        </svg>\n                    </slot>\n                </div>\n                <div\n                    class=\"{{newStyles.tabsDivider}}\"\n                />\n                <div\n                    style=\"{{cursorStyle}}\"\n                    class=\"{{newStyles.tabsCursor}}\"\n                />\n            </div>\n            <div\n                s-ref=\"tabsContent\"\n                style=\"{{\n                    {\n                        height: contentHeight\n                    }\n                }}\"\n                class=\"{{newStyles.tabsContent}}\"\n            >\n                <slot></slot>\n            </div>\n        </div>\n    ";
         Tabs.computed = __assign(__assign({}, Base_1.default.computed), { cursorStyle: function () {
@@ -253,0 +279,0 @@ var cursorLeft = this.data.get('cursorLeft');

package.json

 {
   "name": "cosmic-components",
-  "version": "0.0.1-alpha.44",
+  "version": "0.0.1-alpha.45",
   "main": "./dist/index.js",
@@ -5,0 +5,0 @@ "module": "./src/index.ts",

src/Tabs/API.md

@@ -45,2 +45,2 @@ ## API
 |tab-click|单个选项卡标签被点击时触发|被点击的 Tab 面板的索引及标签文案|
-|tab-scroll|选项卡滑动时触发|滑动距离坐标|
+|tab-scroll|选项卡滑动时触发|type: string(scroll：滚动中 / end：滚动结束)，scrollLeft: 滑动距离坐标|

src/Tabs/index.ts

@@ -50,3 +50,3 @@ /**
                     class="{{ newStyles.tabsNav }} {{ scroll ? newStyles.tabsNavScroll : '' }}"
-                    on-scroll="updateController()"
+                    on-scroll="handleScroll()"
                 >
@@ -111,2 +111,4 @@ <div
 
+    timer?: number | null = null;
+
     initData(): Data {
@@ -267,2 +269,27 @@ return {
 
+    getScrollLeft() {
+        const scroller = this.ref('scroll') as unknown as HTMLElement;
+        return scroller.scrollLeft;
+    }
+
+    handleScroll() {
+        let timer = this.timer as number | null;
+        if (timer !== null) {
+            clearTimeout(timer);
+            this.timer = null
+        }
+        timer = setTimeout(() => {
+            this.fire('tab-scroll', {
+                type: 'end',
+                scrollLeft: this.getScrollLeft()
+            });
+        }, 150) as unknown as number | null;
+        this.timer = timer;
+        this.fire('tab-scroll', {
+            type: 'scroll',
+            scrollLeft: this.getScrollLeft()
+        });
+        this.updateController();
+    }
+
     // 判断是否隐藏左右按钮
@@ -273,5 +300,4 @@ updateController() {
         }
-
-        let scroller = this.ref('scroll') as unknown as HTMLElement;
-        let scrollLeft = scroller.scrollLeft;
+        const scroller = this.ref('scroll') as unknown as HTMLElement;
+        const scrollLeft = scroller.scrollLeft;
         // 判断是否靠最左边和最右边,留5px的buffer
@@ -278,0 +304,0 @@ this.data.set('leftArrowShow', scrollLeft > 5);

types/Tabs/index.d.ts

@@ -13,2 +13,3 @@ import Base from '../Base';
     children?: Node[];
+    timer?: number | null;
     initData(): Data;
@@ -18,2 +19,4 @@ inited(): void;
     turnPage(direction: string): void;
+    getScrollLeft(): number;
+    handleScroll(): void;
     updateController(): void;
@@ -20,0 +23,0 @@ scrollToTarget(index: number): void;

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

513271

increased by0.48%

Lines of code

8799

increased by0.61%

No dependency changes