haiwei-ui 1.0.2 → 1.0.3

package/.prettierrc

@@ -1,6 +1,8 @@
 {
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true,
-    "printWidth": 200
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 500,
+  "vueIndentScriptAndStyle": true,
+  "htmlWhitespaceSensitivity": "ignore"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haiwei-ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "HaiWei前端组件库",
   "author": "Eric",
   "license": "ISC",

package/packages/components/list/components/querybar/index.vue

@@ -64,7 +64,9 @@ export default {
   data() {
     return {
       // 是否显示高级查询
-      showAdvanced: false
+      showAdvanced: false,
+      // 动态计算的高度
+      dynamicHeight: ''
     }
   },
   props: {
@@ -104,17 +106,23 @@ export default {
     advancedStyle() {
       return {
         width: this.advanced_.width,
-        height: this.advanced_.height
+        height: this.advanced_.height || this.dynamicHeight
       }
     }
   },
   methods: {
-    query() {
+    query() { 
       this.$parent.page.index = 1
       this.$parent.query()
+      // 如果高级查询框显示，重新计算高度
+      if (this.showAdvanced && !this.advanced_.height) {
+        this.$nextTick(() => {
+          this.calculateAdvancedHeight()
+        })
+      }
     },
     /** 表单重置 */
-    reset() {
+    reset() { 
       if (this.$refs.normalForm) {
         this.$refs.normalForm.reset()
       }
@@ -126,6 +134,25 @@ export default {
     validate(action) {
       return this.$refs.normalForm.validate(action)
     },
+    /** 计算高级查询框高度 */
+    calculateAdvancedHeight() {
+      if (!this.$refs.advancedBox) return
+      
+      const $box = this.$refs.advancedBox
+      const boxHeader = $box.querySelector('.nm-box-header')?.offsetHeight || 0
+      const boxFooter = $box.querySelector('.nm-box-footer')?.offsetHeight || 0
+      const form = $box.querySelector('.nm-form')
+      if (!form) return
+      
+      let boxHeight = form.offsetHeight + boxHeader + boxFooter + 20
+      if (!this.advanced_.inline) {
+        boxHeight += 20
+      }
+      $box.style.height = boxHeight + 'px'
+      // 保存动态计算的高度，避免后续样式被覆盖
+      this.dynamicHeight = boxHeight + 'px'
+    },
+
     /** 高级查询按钮点击事件 */
     onAdvancedClick() {
       this.showAdvanced = !this.showAdvanced
@@ -152,13 +179,7 @@ export default {
 
           // 设置高度
           if (!this.advanced_.height) {
-            const boxHeader = $box.querySelector('.nm-box-header').offsetHeight
-            const boxFooter = $box.querySelector('.nm-box-footer').offsetHeight
-            let boxHeight = $box.querySelector('.nm-form').offsetHeight + boxHeader + boxFooter + 20
-            if (!this.advanced_.inline) {
-              boxHeight += 20
-            }
-            $box.style.height = boxHeight + 'px'
+            this.calculateAdvancedHeight()
           }
         })
       }

package/packages/components/list/index.vue

@@ -260,7 +260,7 @@ export default {
     /**合计行文本 */
     sumText: String,
     /**合计行自定义逻辑方法 */
-    summaryMethod: Function
+    summaryMethod: Function 
   },
   computed: {
     ...mapState('app/loading', { loadingText_: 'text', loadingBackground: 'background', loadingSpinner: 'spinner' }),
@@ -280,7 +280,7 @@ export default {
   },
   methods: {
     /** 查询方法 */
-    query() {
+    query() { 
       if (this.$refs.querybar) {
         this.$refs.querybar.validate(() => {
           this.doQuery()
@@ -292,26 +292,21 @@ export default {
     doQuery() {
       if (this.loading_) {
         return
-      }
-
+      }  
       this.loading_ = true
-      let fullModel = Object.assign({}, this.model)
-
+      let fullModel = Object.assign({}, this.model) 
       // 设置分页
-      fullModel.page = this.page
-
+      fullModel.page = this.page  
       this.action(fullModel)
-        .then(data => {
-          this.rows = data.rows
+        .then(data => { 
+          this.rows = data.rows 
           this.total = data.total
-          this.data = data.data
-
+          this.data = data.data 
           // 回到顶部
           this.$refs.table.scrollTop()
           // 重新绘制布局
           this.$refs.table.doLayout()
-          this.loading_ = false
-
+          this.loading_ = false 
           if (this.noClearSelection) {
             this.$nextTick(() => {
               this.rows.forEach(m => {

package/src/api/config.js

@@ -3,7 +3,7 @@ const getUI = () => {
     resolve({
       system: {
         /** 标题 */
-        title: 'NetModular前端文档',
+        title: 'UI',
         /** logo */
         logo: '',
         /** 用户信息页(路由名称) */

package/src/components/code-preview/index.vue

@@ -10,68 +10,68 @@
   </div>
 </template>
 <script>
-export default {
-  data() {
-    return {
-      visible: false,
-      drawer: {
-        header: true,
-        title: '代码预览',
-        icon: 'preview',
-        width: '50%',
-        draggable: true
-      },
-      timer: null
-    }
-  },
-  props: ['code'],
-  methods: {
-    onCBtnlick() {
-      this.visible = !this.visible
-    },
-    run() {
-      window.addEventListener('message', this.receiveMessage, false)
-      const runUrl = window.location.href.split('#')[0] + '#/run'
-      const runWindow = window.open(runUrl, '_blank')
-      this.timer = setInterval(() => {
-        runWindow.postMessage(this.code, runUrl)
-      }, 300)
+  export default {
+    data() {
+      return {
+        visible: false,
+        drawer: {
+          header: true,
+          title: '代码预览',
+          icon: 'preview',
+          width: '50%',
+          draggable: true
+        },
+        timer: null
+      }
     },
-    receiveMessage(event) {
-      if (this.timer && event.origin === window.location.origin) {
-        clearInterval(this.timer)
+    props: ['code'],
+    methods: {
+      onCBtnlick() {
+        this.visible = !this.visible
+      },
+      run() {
+        window.addEventListener('message', this.receiveMessage, false)
+        const runUrl = window.location.href.split('#')[0] + '#/run'
+        const runWindow = window.open(runUrl, '_blank')
+        this.timer = setInterval(() => {
+          runWindow.postMessage(this.code, runUrl)
+        }, 300)
+      },
+      receiveMessage(event) {
+        if (this.timer && event.origin === window.location.origin) {
+          clearInterval(this.timer)
+        }
       }
     }
   }
-}
 </script>
 <style lang="scss">
-.nm-code-preview {
-  &-btn {
-    padding: 0;
-    position: absolute;
-    right: 5px;
-    bottom: 5px;
-    width: 44px;
-    height: 44px;
-    line-height: 44px;
-    border-radius: 22px;
-    font-size: 1.5rem;
-    text-align: center;
-    z-index: 9999;
-    transition: all 0.3s ease-in-out;
-  }
-}
-.nm-code-preview-drawer {
-  .nm-drawer-modal,
-  .nm-drawer-dialog {
-    z-index: 9998;
-  }
-  .el-scrollbar__wrap {
-    background: #2b2b2b;
+  .nm-code-preview {
+    &-btn {
+      padding: 0;
+      position: absolute;
+      right: 5px;
+      bottom: 5px;
+      width: 44px;
+      height: 44px;
+      line-height: 44px;
+      border-radius: 22px;
+      font-size: 1.5rem;
+      text-align: center;
+      z-index: 9999;
+      transition: all 0.3s ease-in-out;
+    }
   }
-  .el-scrollbar__view {
-    padding: 0;
+  .nm-code-preview-drawer {
+    .nm-drawer-modal,
+    .nm-drawer-dialog {
+      z-index: 9998;
+    }
+    .el-scrollbar__wrap {
+      background: #2b2b2b;
+    }
+    .el-scrollbar__view {
+      padding: 0;
+    }
   }
-}
 </style>

package/src/components/tmpl/components/attributes/index.vue

@@ -13,7 +13,7 @@
   </section>
 </template>
 <script>
-export default {
-  props: ['data']
-}
+  export default {
+    props: ['data']
+  }
 </script>

package/src/components/tmpl/components/events/index.vue

@@ -9,7 +9,7 @@
   </section>
 </template>
 <script>
-export default {
-  props: ['data']
-}
+  export default {
+    props: ['data']
+  }
 </script>

package/src/components/tmpl/components/methods/index.vue

@@ -9,7 +9,7 @@
   </section>
 </template>
 <script>
-export default {
-  props: ['data']
-}
+  export default {
+    props: ['data']
+  }
 </script>

package/src/components/tmpl/components/slots/index.vue

@@ -8,7 +8,7 @@
   </section>
 </template>
 <script>
-export default {
-  props: ['data']
-}
+  export default {
+    props: ['data']
+  }
 </script>

package/src/components/tmpl/index.vue

@@ -24,54 +24,54 @@
   </nm-container>
 </template>
 <script>
-import NmAttributes from './components/attributes'
-import NmMethods from './components/methods'
-import NmEvents from './components/events'
-import NmSlots from './components/slots'
-export default {
-  name: 'Tmpl',
-  components: { NmAttributes, NmMethods, NmEvents, NmSlots },
-  props: {
-    title: {
-      type: String
-    },
-    icon: {
-      type: String
-    },
-    attrs: {
-      type: Array
-    },
-    slots: {
-      type: Array
-    },
-    methods: {
-      type: Array
-    },
-    events: {
-      type: Array
+  import NmAttributes from './components/attributes'
+  import NmMethods from './components/methods'
+  import NmEvents from './components/events'
+  import NmSlots from './components/slots'
+  export default {
+    name: 'Tmpl',
+    components: { NmAttributes, NmMethods, NmEvents, NmSlots },
+    props: {
+      title: {
+        type: String
+      },
+      icon: {
+        type: String
+      },
+      attrs: {
+        type: Array
+      },
+      slots: {
+        type: Array
+      },
+      methods: {
+        type: Array
+      },
+      events: {
+        type: Array
+      }
     }
   }
-}
 </script>
 <style lang="scss">
-.nm-tmpl {
-  &-box {
-    margin-bottom: 30px;
-    &-title {
-      margin: 10px 0;
-      font-size: 25px;
+  .nm-tmpl {
+    &-box {
+      margin-bottom: 30px;
+      &-title {
+        margin: 10px 0;
+        font-size: 25px;
+      }
+    }
+    .el-alert__title {
+      font-size: 17px;
     }
-  }
-  .el-alert__title {
-    font-size: 17px;
-  }
 
-  .el-alert__description {
-    margin-top: 10px;
-    font-size: 15px;
-    p {
-      margin-bottom: 10px;
+    .el-alert__description {
+      margin-top: 10px;
+      font-size: 15px;
+      p {
+        margin-bottom: 10px;
+      }
     }
   }
-}
 </style>

package/src/style/element-ui.scss

@@ -1,11 +1,11 @@
 .el-alert {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .el-row {
-    margin-bottom: 15px;
+  margin-bottom: 15px;
 }
 
 .el-button-group {
-    margin-right: 15px;
-}
+  margin-right: 15px;
+}

package/src/views/components/advanced/details/_index/index.vue

@@ -2,23 +2,23 @@
   <nm-tmpl v-bind="tmpl"></nm-tmpl>
 </template>
 <script>
-import page from './page.js'
-import attrs from './data/attrs.js'
-import slots from './data/slots.js'
-export default {
-  name: page.name,
-  data() {
-    return {
-      tmpl: {
-        title: '详情页(nm-details)',
-        icon: 'detail',
-        attrs,
-        slots
+  import page from './page.js'
+  import attrs from './data/attrs.js'
+  import slots from './data/slots.js'
+  export default {
+    name: page.name,
+    data() {
+      return {
+        tmpl: {
+          title: '详情页(nm-details)',
+          icon: 'detail',
+          attrs,
+          slots
+        }
       }
+    },
+    created() {
+      this.setTabName(this.tmpl.title)
     }
-  },
-  created() {
-    this.setTabName(this.tmpl.title)
   }
-}
 </script>

package/src/views/components/advanced/details/demo1/demo.vue

@@ -4,56 +4,56 @@
   </nm-box>
 </template>
 <script>
-export default {
-  data() {
-    return {
-      details: {
-        action() {
-          return new Promise(resolve => {
-            resolve({
-              id: 1,
-              title: '三星Galaxy Node 10',
-              price: 6999,
-              store: 98989,
-              des: `三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy
+  export default {
+    data() {
+      return {
+        details: {
+          action() {
+            return new Promise(resolve => {
+              resolve({
+                id: 1,
+                title: '三星Galaxy Node 10',
+                price: 6999,
+                store: 98989,
+                des: `三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy
          Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10
          三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10
          三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10
          三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10
          三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10`
+              })
             })
-          })
-        },
-        options: [
-          [
-            {
-              label: '编号',
-              prop: 'id'
-            },
-            {
-              label: '产品名称',
-              prop: 'title'
-            }
-          ],
-          [
-            {
-              label: '价格',
-              prop: 'price'
-            },
-            {
-              label: '库存',
-              prop: 'store'
-            }
-          ],
-          [
-            {
-              label: '介绍',
-              prop: 'des'
-            }
+          },
+          options: [
+            [
+              {
+                label: '编号',
+                prop: 'id'
+              },
+              {
+                label: '产品名称',
+                prop: 'title'
+              }
+            ],
+            [
+              {
+                label: '价格',
+                prop: 'price'
+              },
+              {
+                label: '库存',
+                prop: 'store'
+              }
+            ],
+            [
+              {
+                label: '介绍',
+                prop: 'des'
+              }
+            ]
           ]
-        ]
+        }
       }
     }
   }
-}
 </script>

package/src/views/components/advanced/details/demo1/index.vue

@@ -5,17 +5,17 @@
   </nm-container>
 </template>
 <script>
-import page from './page.js'
-import Demo from './demo'
-import code from '!!raw-loader!./demo'
-export default {
-  name: page.name,
-  components: { Demo },
-  data() {
-    return {
-      timer: null,
-      code
+  import page from './page.js'
+  import Demo from './demo'
+  import code from '!!raw-loader!./demo'
+  export default {
+    name: page.name,
+    components: { Demo },
+    data() {
+      return {
+        timer: null,
+        code
+      }
     }
   }
-}
 </script>

package/src/views/components/advanced/drag-sort/_index/index.vue

@@ -2,23 +2,23 @@
   <nm-tmpl v-bind="tmpl"></nm-tmpl>
 </template>
 <script>
-import page from './page.js'
-import attrs from './data/attrs.js'
-import events from './data/events'
-export default {
-  name: page.name,
-  data() {
-    return {
-      tmpl: {
-        title: '拖动排序(nm-drag-sort)',
-        icon: 'list',
-        attrs,
-        events
+  import page from './page.js'
+  import attrs from './data/attrs.js'
+  import events from './data/events'
+  export default {
+    name: page.name,
+    data() {
+      return {
+        tmpl: {
+          title: '拖动排序(nm-drag-sort)',
+          icon: 'list',
+          attrs,
+          events
+        }
       }
+    },
+    created() {
+      this.setTabName(this.tmpl.title)
     }
-  },
-  created() {
-    this.setTabName(this.tmpl.title)
   }
-}
 </script>