haiwei-ui 1.0.0

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

@@ -0,0 +1,86 @@
+export default [
+  {
+    name: 'size',
+    desc: '尺寸，默认按照框架的字号设置',
+    type: 'string',
+    opt: 'medium / small / mini',
+    def: '-'
+  },
+  {
+    name: 'type',
+    desc: '类型，与ElementUI相同',
+    type: 'string',
+    opt: 'primary/success/warning/danger/info/text',
+    def: '-'
+  },
+  {
+    name: 'plain',
+    desc: '是否朴素按钮',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'round',
+    desc: '是否圆角按钮',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'circle',
+    desc: '是否圆形按钮',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'loading',
+    desc: '是否加载中状态',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'disabled',
+    desc: '是否禁用状态',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'autofocus',
+    desc: '是否默认聚焦',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'nativeType',
+    desc: '原生 type 属性 button/submit/reset',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'icon',
+    desc: '图标，只能使用图标库中已有的图标',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'text',
+    desc: '按钮文本',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'code',
+    desc: '按钮编码，用于按钮权限控制',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  }
+]

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

@@ -0,0 +1,7 @@
+export default [
+  {
+    name: 'click',
+    desc: '点击事件',
+    params: '无'
+  }
+]

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

@@ -0,0 +1,6 @@
+export default [
+  {
+    name: '-',
+    desc: '自定义按钮内容'
+  }
+]

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

@@ -0,0 +1,28 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert title="按钮权限" type="warning" show-icon :closable="false">按钮的权限控制是通过 code 属性来控制的，只要按钮设置了code属性，那么就会经过权限处理，只有授权的才会显示</el-alert>
+  </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 {
+      tmpl: {
+        title: '按钮(nm-button)',
+        icon: 'button',
+        attrs,
+        slots,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,76 @@
+<template>
+  <nm-box page>
+    <el-row>
+      <nm-button text="默认按钮"></nm-button>
+      <nm-button type="primary" text="主要按钮"></nm-button>
+      <nm-button type="success" text="成功按钮"></nm-button>
+      <nm-button type="info" text="信息按钮"></nm-button>
+      <nm-button type="warning" text="警告按钮"></nm-button>
+      <nm-button type="danger" text="危险按钮"></nm-button>
+    </el-row>
+
+    <el-row>
+      <nm-button plain text="朴素按钮"></nm-button>
+      <nm-button type="primary" plain text="主要按钮"></nm-button>
+      <nm-button type="success" plain text="成功按钮"></nm-button>
+      <nm-button type="info" plain text="信息按钮"></nm-button>
+      <nm-button type="warning" plain text="警告按钮"></nm-button>
+      <nm-button type="danger" plain text="危险按钮"></nm-button>
+    </el-row>
+
+    <el-row>
+      <nm-button round text="圆角按钮"></nm-button>
+      <nm-button type="primary" round text="主要按钮"></nm-button>
+      <nm-button type="success" round text="成功按钮"></nm-button>
+      <nm-button type="info" round text="信息按钮"></nm-button>
+      <nm-button type="warning" round text="警告按钮"></nm-button>
+      <nm-button type="danger" round text="危险按钮"></nm-button>
+    </el-row>
+
+    <el-row>
+      <nm-button icon="search" circle></nm-button>
+      <nm-button type="primary" icon="edit" circle></nm-button>
+      <nm-button type="success" icon="select" circle></nm-button>
+      <nm-button type="info" icon="permission" circle></nm-button>
+      <nm-button type="warning" icon="refresh" circle></nm-button>
+      <nm-button type="danger" icon="delete" circle></nm-button>
+    </el-row>
+    <el-row>
+      <nm-button type="text" text="文字按钮"></nm-button>
+      <nm-button type="text" text="文字按钮" disabled></nm-button>
+    </el-row>
+    <el-row>
+      <nm-button type="primary" icon="edit"></nm-button>
+      <nm-button type="primary" icon="search" text="搜索"></nm-button>
+      <nm-button type="primary">
+        刷新
+        <nm-icon name="refresh"></nm-icon>
+      </nm-button>
+    </el-row>
+    <el-row>
+      <el-button-group>
+        <nm-button type="primary" icon="arrow-left" text="上一页"></nm-button>
+        <nm-button type="primary">
+          下一页
+          <nm-icon name="arrow-right"></nm-icon>
+        </nm-button>
+      </el-button-group>
+      <el-button-group>
+        <nm-button type="primary" icon="edit"></nm-button>
+        <nm-button type="primary" icon="preview"></nm-button>
+        <nm-button type="primary" icon="delete"></nm-button>
+      </el-button-group>
+    </el-row>
+    <el-row>
+      <nm-button type="primary" :loading="true" text="加载中"></nm-button>
+    </el-row>
+    <el-row>
+      <el-alert title="按钮尺寸" type="warning" description="按钮默认尺寸根据系统的字号大小设置" show-icon :closable="false"></el-alert>
+      <nm-button text="默认按钮"></nm-button>
+      <nm-button text="中等按钮" size="medium"></nm-button>
+      <nm-button text="小型按钮" size="small"></nm-button>
+      <nm-button text="超小按钮" size="mini"></nm-button>
+    </el-row>
+  </nm-box>
+</template>
+<style></style>

package/src/views/components/base/button/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/button/demo1/page.js

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

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

@@ -0,0 +1,92 @@
+<template>
+  <nm-box page>
+    <el-row>
+      <p>删除按钮与普通按钮的属性基本类似，除了使用options:{type:'',text:'',icon:''}来代替普通按钮的三个属性以外都一样</p>
+      <p>同时封装了二次提示以及执行api后的信息提示功能，删除成功后会触发success事件，可以通过监听该事件在删除成功后执行一些操作</p>
+      <br />
+      <p>删除按钮需要指定删除逻辑方法action以及删除数据的id(id属性可以接受任意类型的数据Number, String, Object, Array)，同时也可以通过msg属性指定删除成功后的提示信息</p>
+      <br />
+      <p>可通过no-icon属性设置不显示图标</p>
+      <br />
+      <nm-button-delete :options="{ type: 'danger' }" :action="remove" id="1" @success="onSuccess" />
+    </el-row>
+
+    <el-row style="height:400px">
+      <p>批量删除按钮与上面的删除按钮用法基本一致，不同之处在于它是与表格结合使用的，需要设置selection属性，用于选择要删除的数据</p>
+      <br />
+      <p>可以通过show-property属性，设置二次提示时展示要删除的数据，show-property是要展示的数据在table中对应的列名称</p>
+      <br />
+      <nm-list v-bind="list">
+        <template v-slot:querybar-buttons="{ selection }">
+          <nm-button-delete-batch :action="remove" :selection="selection" show-property="name" @success="onSuccess" />
+        </template>
+      </nm-list>
+    </el-row>
+    <el-row style="height:400px">
+      <p>复制到粘贴板按钮</p>
+      <br />
+      <p>基于<a href="https://github.com/Inndy/vue-clipboard2">https://github.com/Inndy/vue-clipboard2</a>附件封装的复制到粘贴板按钮</p>
+      <p>
+        <br />
+        <nm-button-copy copy="复制的内容" /></p
+    ></el-row>
+
+    <!--在线编辑预览不支持闭合的方式，请使用下面的代码方式-->
+    <!-- <nm-button>默认按钮</nm-button> -->
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: {
+        title: '批量删除示例',
+        action: this.query,
+        multiple: true,
+        search: { enabled: false },
+        cols: [
+          {
+            name: 'id',
+            label: '编号',
+            width: 240
+          },
+          {
+            name: 'name',
+            label: '名称'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    remove() {
+      return new Promise(resolve => {
+        resolve({ code: 1 })
+      })
+    },
+    query() {
+      return new Promise(resolve => {
+        resolve({
+          rows: [
+            { id: 1, name: '张三' },
+            { id: 2, name: '李四' }
+          ],
+          total: 2
+        })
+      })
+    },
+    onSuccess() {
+      this._success('删除成功了')
+    }
+  }
+}
+</script>
+
+<style>
+.el-row {
+  margin-bottom: 20px;
+}
+.el-button-group {
+  margin-right: 20px;
+}
+</style>

package/src/views/components/base/button/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/button/demo2/page.js

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

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

@@ -0,0 +1,16 @@
+export default [
+  {
+    name: 'scrollbar',
+    desc: '是否显示滚动条',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'horizontal',
+    desc: '是否显示水平滚动条',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  }
+]

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

@@ -0,0 +1,25 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert title="说明" type="warning" :description="desc" show-icon :closable="false"></el-alert>
+  </nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs.js'
+export default {
+  name: page.name,
+  data() {
+    return {
+      desc: '所有页面级组件都要包裹在 nm-container 容器里面，而容器仅能用于包裹在页面级组件的外面，容器自动填充满整个内容区域，如果启用了滚动条，当容器内页面高度超出时，会显示滚动条',
+      tmpl: {
+        title: '容器(nm-container)',
+        icon: 'list',
+        attrs
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,128 @@
+export default [
+  {
+    name: 'header',
+    desc: '显示头部',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'title',
+    desc: 'Dialog 的标题，也可通过具名 title传入',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'icon',
+    desc: '头部左侧图标',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'width',
+    desc: 'Dialog 的宽度',
+    type: 'Number / String',
+    opt: '',
+    def: '50%'
+  },
+  {
+    name: 'height',
+    desc: 'Dialog 的高度',
+    type: 'Number / String',
+    opt: '-',
+    def: '自适应'
+  },
+  {
+    name: 'padding',
+    desc: '内边距',
+    type: 'Number',
+    opt: '-',
+    def: '0'
+  },
+  {
+    name: 'footer',
+    desc: '显示底部',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'modal',
+    desc: '是否需要遮罩层',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'close-on-click-modal',
+    desc: '是否可以通过点击 modal 关闭 Dialog',
+    type: 'Boolean',
+    opt: '-',
+    def: '手动设置优先，默认与系统中的设置一致'
+  },
+  {
+    name: 'show-close',
+    desc: '是否显示关闭按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'before-close',
+    desc: '关闭前的回调，会暂停 Dialog 的关闭',
+    type: 'Function',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'fullscreen',
+    desc: '是否显示全屏按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'no-scrollbar',
+    desc: '不包含滚动条',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'loading',
+    desc: '显示loading',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'draggable',
+    desc: '是否可拖拽',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'drag-out-page',
+    desc: '是否可拖出页面',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'drag-min-width',
+    desc: '拖出页面区域后保留的最小宽度',
+    type: 'Number',
+    opt: '-',
+    def: '100'
+  },
+  {
+    name: 'footer-close-button',
+    desc: '是否显示底部关闭按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  }
+]

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

@@ -0,0 +1,27 @@
+export default [
+  {
+    name: 'fullscreen-change',
+    desc: '全屏切换事件',
+    params: '全屏状态'
+  },
+  {
+    name: 'open',
+    desc: '打开事件',
+    params: '-'
+  },
+  {
+    name: 'opened',
+    desc: '打开后事件',
+    params: '-'
+  },
+  {
+    name: 'close',
+    desc: '关闭事件',
+    params: '-'
+  },
+  {
+    name: 'closed',
+    desc: '关闭后事件',
+    params: '-'
+  }
+]

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

@@ -0,0 +1,22 @@
+export default [
+  {
+    name: 'triggerFullscreen',
+    desc: '全屏切换',
+    params: '-'
+  },
+  {
+    name: 'openFullscreen',
+    desc: '打开全屏',
+    params: '-'
+  },
+  {
+    name: 'closeFullscreen',
+    desc: '关闭全屏',
+    params: '-'
+  },
+  {
+    name: 'updateScrollbar',
+    desc: '重绘滚动条',
+    params: '-'
+  }
+]

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

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

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

@@ -0,0 +1,28 @@
+<template>
+  <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.js'
+import slots from './data/slots'
+import methods from './data/methods'
+export default {
+  name: page.name,
+  data() {
+    return {
+      tmpl: {
+        title: '对话框(nm-dialog)',
+        icon: 'dialog',
+        attrs,
+        events,
+        slots,
+        methods
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>