haiwei-ui 1.0.0

package/src/views/components/advanced/list-dialog/demo1/demo.vue

@@ -0,0 +1,75 @@
+<template>
+  <nm-box>
+    <nm-button type="success" text="查询列表" @click="show = true"></nm-button>
+    <nm-list-dialog v-bind="dialog" :visible.sync="show">
+      <nm-list v-bind="list">
+        <template v-slot:querybar>
+          <el-form-item label="姓名：" prop="name">
+            <el-input v-model="list.model.name" />
+          </el-form-item>
+        </template>
+
+        <template v-slot:col-operation>
+          <nm-button type="text" text="编辑" icon="edit" />
+          <nm-button-delete type="text" :action="remove" id="1" @success="onSuccess" />
+        </template>
+      </nm-list>
+    </nm-list-dialog>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      show: false,
+      dialog: {
+        title: '列表页对话框示例',
+        icon: 'list',
+        width: '80%',
+        height: '80%'
+      },
+      list: {
+        noHeader: true,
+        action: this.query,
+        model: {
+          name: ''
+        },
+        cols: [
+          {
+            name: 'id',
+            label: '编号',
+            show: false
+          },
+          {
+            name: 'name',
+            label: '姓名'
+          },
+          {
+            name: 'age',
+            label: '年龄'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    query() {
+      const rows = [
+        { id: 1, name: '张三', age: 22 },
+        { id: 2, name: '李四', age: 26 },
+        { id: 3, name: '王五', age: 26 }
+      ]
+      return new Promise(resolve => {
+        resolve({
+          rows,
+          total: 3
+        })
+      })
+    },
+    remove() {},
+    onSuccess() {
+      this.query()
+    }
+  }
+}
+</script>

package/src/views/components/advanced/list-dialog/demo1/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <nm-container>
+    <demo />
+    <nm-code-preview :code="code" />
+  </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
+    }
+  }
+}
+</script>

package/src/views/components/advanced/list-dialog/demo1/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '示例代码'
+  this.name = 'components-list-dialog-demo1'
+  this.path = '/components/list-dialog/demo1'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/advanced/listbox/_index/data/attrs.js

@@ -0,0 +1,30 @@
+export default [
+  {
+    name: 'v-model/value',
+    desc: '绑定值',
+    type: 'Arrary',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'title',
+    desc: '标题',
+    type: 'String',
+    opt: '-',
+    def: '列表'
+  },
+  {
+    name: 'icon',
+    desc: '图标',
+    type: 'String',
+    opt: '-',
+    def: 'select'
+  },
+  {
+    name: 'no-count',
+    desc: '不显示数量',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  }
+]

package/src/views/components/advanced/listbox/_index/data/events.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    name: 'remove',
+    desc: '删除事件',
+    params: 'removeValue,values'
+  }
+]

package/src/views/components/advanced/listbox/_index/data/slots.js

@@ -0,0 +1,6 @@
+export default [
+  {
+    name: '-',
+    desc: '自定义列表'
+  }
+]

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

@@ -0,0 +1,27 @@
+<template>
+  <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'
+import events from './data/events.js'
+export default {
+  name: page.name,
+  data() {
+    return {
+      val: '',
+      tmpl: {
+        title: '列表框(nm-listbox)',
+        icon: 'list',
+        attrs,
+        slots,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

package/src/views/components/advanced/listbox/_index/page.js

@@ -0,0 +1,16 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '列表框'
+  this.name = 'components-listbox-index'
+  this.path = '/components/listbox/index'
+  this.icon = 'card'
+  this.group = 2
+  this.sort = 6
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

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

@@ -0,0 +1,74 @@
+<template>
+  <nm-split v-model="split">
+    <template v-slot:left>
+      <nm-listbox title="已选用户" v-model="listbox"></nm-listbox>
+    </template>
+    <template v-slot:right>
+      <nm-list v-bind="list">
+        <template v-slot:querybar>
+          <el-form-item label="姓名：" prop="name">
+            <el-input v-model="list.model.name" />
+          </el-form-item>
+        </template>
+
+        <template v-slot:col-operation="{ row }">
+          <nm-button type="text" text="选择" @click="onSelect(row)" />
+        </template>
+      </nm-list>
+    </template>
+  </nm-split>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      split: 0.3,
+      listbox: [],
+      list: {
+        title: '用户列表',
+        icon: 'list',
+        action: this.query,
+        model: {
+          name: ''
+        },
+        cols: [
+          {
+            name: 'id',
+            label: '编号',
+            show: false
+          },
+          {
+            name: 'name',
+            label: '姓名'
+          },
+          {
+            name: 'age',
+            label: '年龄'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    query() {
+      const rows = [
+        { id: 1, name: '张三', age: 22 },
+        { id: 2, name: '李四', age: 26 },
+        { id: 3, name: '王五', age: 26 }
+      ]
+      return new Promise(resolve => {
+        resolve({
+          rows,
+          total: 3
+        })
+      })
+    },
+    onSelect(row) {
+      this.listbox.push({
+        label: row.name,
+        value: row.id
+      })
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,21 @@
+<template>
+  <nm-container>
+    <demo />
+    <nm-code-preview :code="code" />
+  </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
+    }
+  }
+}
+</script>

package/src/views/components/advanced/listbox/demo1/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '示例代码'
+  this.name = 'components-listbox-demo1'
+  this.path = '/components/listbox/demo1'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/base/box/_index/data/attrs.js

@@ -0,0 +1,128 @@
+export default [
+  {
+    name: 'title',
+    desc: '标题，只有设置header属性为true时才有',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'icon',
+    desc: '头部左侧的图标，只有设置header属性为true时才有',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'header',
+    desc: '是否显示头部',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'footer',
+    desc: '是否显示底部',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'footer-align',
+    desc: '底部对齐方式',
+    type: 'string',
+    opt: 'left/center/right',
+    def: 'right'
+  },
+  {
+    name: 'height',
+    desc: '高度，与css中的height属性相同，如：100%、100px，设置了固定高度后如果内容超出会有滚动条',
+    type: 'string',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'border',
+    desc: '是否显示顶部边框',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'border-color',
+    desc: '顶部边框的颜色',
+    type: 'string',
+    opt: 'success/primary/info/warning/danger/具体色值，如：#000',
+    def: 'success'
+  },
+  {
+    name: 'title-bold',
+    desc: '标题是否加粗',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'horizontal',
+    desc: '是否显示水平滚动条',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'loading',
+    desc: '是否显示loading动画',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'page',
+    desc: '是否是页模式，如果为true，则盒子的高度会填充满父级',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'fullscreen',
+    desc: '是否显示全屏按钮',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'collapse',
+    desc: '是否显示折叠按钮',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'custom-collapse-event',
+    desc: '自定义折叠事件，改参数会覆盖默认的折叠操作，当需要折叠部分内容时，可使用该参数',
+    type: 'Function',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'no-scrollbar',
+    desc: '不显示滚动条',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'no-padding',
+    desc: '没有内边距',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'refresh',
+    desc: '是否显示刷新按钮',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  }
+]

package/src/views/components/base/box/_index/data/events.js

@@ -0,0 +1,17 @@
+export default [
+  {
+    name: 'collapse-change',
+    desc: '折叠事件',
+    params: '折叠状态'
+  },
+  {
+    name: 'fullscreen-change',
+    desc: '全屏事件',
+    params: '全屏状态'
+  },
+  {
+    name: 'refresh',
+    desc: '刷新按钮点击事件',
+    params: '-'
+  }
+]

package/src/views/components/base/box/_index/data/methods.js

@@ -0,0 +1,17 @@
+export default [
+  {
+    name: 'openFullscreen',
+    desc: '打开全屏',
+    params: '-'
+  },
+  {
+    name: 'closeFullscreen',
+    desc: '关闭全屏',
+    params: '-'
+  },
+  {
+    name: 'scrollbarResize',
+    desc: '滚动条重置',
+    params: '-'
+  }
+]

package/src/views/components/base/box/_index/data/slots.js

@@ -0,0 +1,26 @@
+export default [
+  {
+    name: '-',
+    desc: '盒子里内容'
+  },
+  {
+    name: 'header',
+    desc: '头部'
+  },
+  {
+    name: 'title',
+    desc: '标题'
+  },
+  {
+    name: 'toolbar-before',
+    desc: '工具栏前面的插槽，当需要在工具栏前面添加内容的时候使用，如果使用了header插槽，该插槽不生效'
+  },
+  {
+    name: 'toolbar',
+    desc: '头部右侧的工具栏，如果使用了header插槽，该插槽不生效'
+  },
+  {
+    name: 'footer',
+    desc: '底部插槽，默认footer里面的内容靠右显示'
+  }
+]

package/src/views/components/base/box/_index/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert
+      title="盒子的滚动条"
+      type="warning"
+      description="如果设置了no-scrollbar属性为true，则始终不显示滚动条，反之，如果设置了height或者page属性，则显示滚动条"
+      show-icon
+      :closable="false"
+    ></el-alert>
+  </nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs.js'
+import slots from './data/slots.js'
+import methods from './data/methods.js'
+import events from './data/events.js'
+export default {
+  name: page.name,
+  data() {
+    return {
+      val: '',
+      tmpl: {
+        title: '盒子(nm-box)',
+        icon: 'card',
+        attrs,
+        slots,
+        methods,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

package/src/views/components/base/box/_index/page.js

@@ -0,0 +1,16 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '盒子'
+  this.name = 'components-box-index'
+  this.path = '/components/box/index'
+  this.icon = 'card'
+  this.group = 0
+  this.sort = 1
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/base/box/demo1/demo.vue

@@ -0,0 +1,33 @@
+<template>
+  <nm-box>
+    <pre>
+      《虞美人》
+
+           唐·李煜
+
+      春花秋月何时了，往事知多少。
+
+      小楼昨夜又东风，
+
+      故国不堪回首月明中。
+
+      雕栏玉砌应犹在，只是朱颜改。
+
+      问君能有几多愁，
+
+      恰似一江春水向东流。
+
+      风回小院庭芜绿，柳眼春相续。
+
+      凭阑半日独无言，
+
+      依旧竹声新月似当年。
+
+      笙歌未散尊前在，池面冰初解。
+
+      烛明香暗画楼深，
+
+      满鬓清霜残雪思难任。
+    </pre>
+  </nm-box>
+</template>

package/src/views/components/base/box/demo1/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <nm-container>
+    <demo />
+    <nm-code-preview :code="code" />
+  </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
+    }
+  }
+}
+</script>

package/src/views/components/base/box/demo1/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '简单盒子'
+  this.name = 'components-box-demo1'
+  this.path = '/components/box/demo1'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/base/box/demo2/demo.vue

@@ -0,0 +1,9 @@
+<template>
+  <nm-box header footer title="头尾示例" icon="app">
+    <el-alert title="头部设置" description="title、icon属性必须在header属性为true的时候才会生效" type="warning" :closable="false" show-icon></el-alert>
+    <el-alert title="底部设置" description="footer插槽必须在footer属性为true的时候才会生效" type="warning" :closable="false" show-icon></el-alert>
+    <template v-slot:footer>
+      <nm-button type="success" text="确认" />
+    </template>
+  </nm-box>
+</template>

package/src/views/components/base/box/demo2/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <nm-container>
+    <demo />
+    <nm-code-preview :code="code" />
+  </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
+    }
+  }
+}
+</script>

package/src/views/components/base/box/demo2/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '有头有尾'
+  this.name = 'components-box-demo2'
+  this.path = '/components/box/demo2'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page