Feature/sidebar collipse icon support control (#876)

* feat(Sideber): collapse-support-control * feat(Sideber): collapse-support-control-api * fix(Sidebar): unable-collapse-cancel-toggle
vusion · Jun 13, 2024 · 196aa86 · 196aa86
1 parent 112d096
commit 196aa86
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -32,8 +32,8 @@
     "deploy:doc-entry": "vusion deploy --framework cloud-ui -v minor dist-doc-entry",
     "usage": "node ./scripts/lcap",
     "deploy:dev": "node bin/deploy-lcp-tgz --platform=http://defaulttenant.lcap.codewave-dev.163yun.com && lcap deploy dist-theme --platform http://defaulttenant.lcap.codewave-dev.163yun.com && node bin/deploy-lcp-images --platform=http://defaulttenant.lcap.codewave-dev.163yun.com",
-    "deploy:test": "node bin/deploy-lcp-tgz --platform=http://defaulttenant.lcap.codewave-test.163yun.com/ && lcap deploy dist-theme --platform http://defaulttenant.lcap.codewave-test.163yun.com/ && node bin/deploy-lcp-images --platform=http://defaulttenant.lcap.codewave-test.163yun.com/",
-    "deploy:pre": "npm test && lcap deploy dist-theme --platform http://defaulttenant.lcap.hadri.163yun.com && node bin/deploy-lcp-images --platform=http://defaulttenant.lcap.hadri.163yun.com",
+    "deploy:test": "node bin/deploy-lcp-tgz --platform=http://defaulttenant.lcap.code.sovell.com/ && lcap deploy dist-theme --platform http://defaulttenant.lcap.code.sovell.com/ && node bin/deploy-lcp-images --platform=http://defaulttenant.lcap.code.sovell.com/",
+    "deploy:pre": "lcap deploy dist-theme --platform http://defaulttenant.lcap.hadri.163yun.com && node bin/deploy-lcp-images --platform=http://defaulttenant.lcap.hadri.163yun.com",
     "deploy:online": "npm test && lcap deploy dist-theme --platform http://netease-template.lcap.163yun.com && node bin/deploy-lcp-images --platform=http://netease-template.lcap.163yun.com",
     "prepublishOnly": "rm -rf node_modules/.cache && npm run build && npm run build:theme && npm run build:raw && vusion readme && vusion vetur && git add .",
     "postpublish": "npm run build:docs && vusion ghpages",

diff --git a/src/components/u-sidebar.vue/api.ts b/src/components/u-sidebar.vue/api.ts
@@ -21,6 +21,13 @@ namespace nasl.ui {
             })
             expanded: nasl.core.Boolean,
         ): void {}
+
+        @Method({
+            title: 'undefined',
+            description: '展开/折叠所有分组',
+        })
+        toggleCollapse(): void {}
+
         constructor(options?: Partial<USidebarOptions<T, V>>) { super(); }
     }
 
@@ -196,14 +203,25 @@ namespace nasl.ui {
         })
         collapseMode: 'fold' | 'expand' = 'expand';
 
+        @Prop<USidebarOptions<T, V>, 'showCollapseIcon'>({
+            group: '交互属性',
+            title: '是否展示伸缩图标',
+            description: '是否展示伸缩图标',
+            setter: {
+                concept: 'SwitchSetter',
+            },
+            if: _ => _.enableCollapse === true,
+        })
+        showCollapseIcon: nasl.core.Boolean = true;
+
         @Prop<USidebarOptions<T, V>, 'expandIcon'>({
             group: '交互属性',
             title: '展开图标',
             description: '侧边栏展开图标',
             setter: {
                 concept: 'IconSetter',
             },
-            if: _ => _.enableCollapse === true,
+            if: _ => _.enableCollapse === true && _.showCollapseIcon === true,
         })
         expandIcon: nasl.core.String = 'expand';
 
@@ -214,7 +232,7 @@ namespace nasl.ui {
             setter: {
                 concept: 'IconSetter',
             },
-            if: _ => _.enableCollapse === true,
+            if: _ => _.enableCollapse === true && _.showCollapseIcon === true,
         })
         foldIcon: nasl.core.String = 'fold';
 

diff --git a/src/components/u-sidebar.vue/api.yaml b/src/components/u-sidebar.vue/api.yaml
@@ -174,6 +174,17 @@
       description: 侧边栏是否折叠
       dependency:
         - "enable-collapse": true
+    - name: showCollapseIcon
+      title: 是否展示伸缩图标
+      type: boolean
+      default: true
+      description: 是否展示伸缩图标
+      group: 交互属性
+      dependency:
+        - "enable-collapse": true
+      brifeDoc: ""
+      docDescription: 是否展示伸缩图标。
+      tooltipLink: ""
     - name: expand-icon
       title: 展开图标
       type: icon
@@ -256,6 +267,9 @@
           type: USidebar
           description: 发送事件实例
   methods:
+    - name: toggleCollapse
+      description: 展开/折叠侧边栏
+      params: []
     - name: toggleAll
       description: 展开/折叠所有分组
       params:

diff --git a/src/components/u-sidebar.vue/index.vue b/src/components/u-sidebar.vue/index.vue
@@ -35,7 +35,7 @@
             :class="$style.resizer"
             @mousedown="handleResizerMouseDown">
         </div>
-        <div :class="$style.bottom" :expanded="!currentCollapse" v-if="enableCollapse">
+        <div :class="$style.bottom" :expanded="!currentCollapse" v-if="enableCollapse && showCollapseIcon">
           <div :class="$style.expanderIcon" @click="toggleCollapse" vusion-click-enabled>
             <i-ico
                 :name="currentCollapse ? expandIcon : foldIcon"
@@ -81,6 +81,7 @@ export default {
         collapsibleField: { type: String, default: 'collapsible' },
         minWidth: { type: Number, default: 56 },
         collapseMode: { type: String, default: 'expand', validator: (value) => /^(expand|fold)$/.test(value) },
+        showCollapseIcon: { type: Boolean, default: true },
         expandIcon: { type: String, default: 'expand' },
         foldIcon: { type: String, default: 'fold' },
     },
@@ -184,7 +185,21 @@ export default {
             this.isTransitionEnd = true;
         },
         toggleCollapse() {
+            if(!this.enableCollapse) return;
             this.currentWidth = this.currentCollapse ? null : this.minWidth;
+            if (
+              this.currentCollapse
+              && this.$vnode.data
+              && this.$vnode.data.staticStyle
+              && this.$vnode.data.staticStyle.width
+            ) {
+              const cw = parseInt(this.$vnode.data.staticStyle.width);
+
+              if (!isNaN(cw)) {
+                this.currentWidth = cw;
+              }
+            }
+
             this.updateCollapse(!this.currentCollapse);
             this.isTransitionEnd = false;
         },