cosmic-components - npm Package Compare versions

Comparing version 0.0.1-alpha.32 to 0.0.1-alpha.33

dist/Tabs/index.js

@@ -72,3 +72,9 @@ var __extends = (this && this.__extends) || (function () {
                 // 是否点击滚动居中
-                targetCenter: false });
+                targetCenter: false, 
+                // 是否可以通过左右翻页按钮控制翻页
+                pageControl: false, 
+                // 左侧箭头是否显示
+                leftArrowShow: false, 
+                // 右侧箭头是否显示
+                rightArrowShow: true });
         };
@@ -154,2 +160,23 @@ Tabs.prototype.inited = function () {
         };
+        // 翻页
+        Tabs.prototype.turnPage = function (direction) {
+            var scroller = this.ref('scroll');
+            if (this.data.get('scroll')) {
+                // @ts-ignore
+                var scrollCoord = ((direction === 'left') ? -1 : 1) * scroller.offsetWidth;
+                // @ts-ignore
+                scroller.scrollBy(scrollCoord, 0);
+            }
+        };
+        // 判断是否隐藏左右按钮
+        Tabs.prototype.scrollNav = function () {
+            if (!this.data.get('pageControl')) {
+                return;
+            }
+            var scroller = this.ref('scroll');
+            var scrollLeft = scroller.scrollLeft;
+            // 判断是否靠最左边和最右边,留5px的buffer
+            this.data.set('leftArrowShow', scrollLeft > 5);
+            this.data.set('rightArrowShow', scroller.scrollWidth - scroller.clientWidth - scrollLeft > 5);
+        };
         // 标签项点击
@@ -217,3 +244,3 @@ Tabs.prototype.handleLabelClick = function (label, index, e) {
         };
-        Tabs.template = "\n        <div class=\"{{newStyles.tabs}}\">\n            <div\n                s-if=\"labelList && labelList.length > 1\"\n                class=\"{{ newStyles.tabsNavWrapper }}\"\n            >\n                <slot name=\"prefix\"></slot>\n                <div\n                    rl-type=\"stop\"\n                    s-ref=\"scroll\"\n                    class=\"{{ newStyles.tabsNav }} {{ scroll ? newStyles.tabsNavScroll : '' }}\"\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                <slot name=\"suffix\"></slot>\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=\"scrollNav()\"\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 () {
@@ -220,0 +247,0 @@ var cursorLeft = this.data.get('cursorLeft');

package.json

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

src/Tabs/API.md

@@ -13,2 +13,3 @@ ## API
 |targetCenter|是否点击居中|boolean|--|false|
+|pageControl|是否可以通过左右翻页按钮控制翻页|boolean|--|false|
 
@@ -29,4 +30,4 @@ ### TabPane
 |default|默认槽位，填充 TabPane 列表|
-|prefix|tabs前置插槽|
-|suffix|tabs后置插槽|
+|prefix|tabs前置插槽, 可定制翻页功能的左侧标识|
+|suffix|tabs后置插槽, 可定制翻页功能的右侧标识|
 
@@ -33,0 +34,0 @@ ### TabPane

src/Tabs/index.ts

@@ -33,7 +33,20 @@ /**
             >
-                <slot name="prefix"></slot>
                 <div
+                    s-if="scroll && pageControl"
+                    style="{{leftArrowShow ? '' : 'display: none'}}"
+                    class="{{ newStyles.leftArrow }}"
+                    on-click="turnPage('left')">
+                    <slot name="prefix">
+                        <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">
+                            <g transform="translate(3, 5) scale(-1, 1) translate(-3, -5) translate(-4, -2)" fill="#858585">
+                                <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>
+                            </g>
+                        </svg>
+                    </slot>
+                </div>
+                <div
                     rl-type="stop"
                     s-ref="scroll"
                     class="{{ newStyles.tabsNav }} {{ scroll ? newStyles.tabsNavScroll : '' }}"
+                    on-scroll="scrollNav()"
                 >
@@ -49,4 +62,16 @@ <div
                 </div>
-                <slot name="suffix"></slot>
                 <div
+                    s-if="scroll && pageControl"
+                    style="{{rightArrowShow ? '' : 'display: none'}}"
+                    class="{{newStyles.rightArrow}}"
+                    on-click="turnPage('right')">
+                    <slot name="suffix">
+                        <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">
+                            <g fill="#858585">
+                                <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>
+                            </g>
+                        </svg>
+                    </slot>
+                </div>
+                <div
                     class="{{newStyles.tabsDivider}}"
@@ -117,4 +142,12 @@ />
             // 是否点击滚动居中
-            targetCenter: false
+            targetCenter: false,
 
+            // 是否可以通过左右翻页按钮控制翻页
+            pageControl: false,
+
+            // 左侧箭头是否显示
+            leftArrowShow: false,
+
+            // 右侧箭头是否显示
+            rightArrowShow: true
         };
@@ -216,2 +249,27 @@ }
 
+    // 翻页
+    turnPage(direction: string) {
+        let scroller = this.ref('scroll');
+
+        if (this.data.get('scroll')) {
+            // @ts-ignore
+            let scrollCoord = ((direction === 'left') ? -1 : 1) * scroller.offsetWidth;
+            // @ts-ignore
+            scroller.scrollBy(scrollCoord, 0);
+        }
+    }
+
+    // 判断是否隐藏左右按钮
+    scrollNav() {
+        if (!this.data.get('pageControl')) {
+            return;
+        }
+
+        let scroller = this.ref('scroll') as unknown as HTMLElement;
+        let scrollLeft = scroller.scrollLeft;
+        // 判断是否靠最左边和最右边,留5px的buffer
+        this.data.set('leftArrowShow', scrollLeft > 5);
+        this.data.set('rightArrowShow', scroller.scrollWidth - scroller.clientWidth - scrollLeft > 5);
+    }
+
     // 标签项点击
@@ -218,0 +276,0 @@ handleLabelClick(label: Label, index: number, e: Event) {

src/Tabs/interface.ts

@@ -7,2 +7,4 @@ import {BaseProps} from '../Base/interface';
     scroll?: boolean;
+    targetCenter?: boolean;
+    pageControl?: boolean;
 }
@@ -16,3 +18,4 @@
     contentHeight: string;
-    targetCenter: boolean;
+    leftArrowShow: boolean;
+    rightArrowShow: boolean;
 }
@@ -19,0 +22,0 @@

types/Tabs/index.d.ts

@@ -16,4 +16,6 @@ import Base from '../Base';
     attached(): void;
+    turnPage(direction: string): void;
+    scrollNav(): void;
     handleLabelClick(label: Label, index: number, e: Event): void;
 }
 export {};

types/Tabs/interface.d.ts

@@ -6,2 +6,4 @@ import { BaseProps } from '../Base/interface';
     scroll?: boolean;
+    targetCenter?: boolean;
+    pageControl?: boolean;
 }
@@ -14,3 +16,4 @@ export interface State {
     contentHeight: string;
-    targetCenter: boolean;
+    leftArrowShow: boolean;
+    rightArrowShow: boolean;
 }
@@ -17,0 +20,0 @@ export interface TabPaneProps extends BaseProps {

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

512392

increased by1.59%

Lines of code

8746

increased by1.1%

No dependency changes