haiwei-ui 1.0.0

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

@@ -0,0 +1,31 @@
+<template>
+  <nm-box v-bind="box">
+    <el-alert title="全屏按钮" type="success" description="通过 fullscreen 属性可以开启全屏功能" show-icon :closable="false"></el-alert>
+    <el-alert title="折叠按钮" type="success" description="通过 collapse 属性可以开启折叠功能" show-icon :closable="false"></el-alert>
+    <el-alert title="自定义工具栏" type="warning" description="通过 toolbar 插槽可以实现自定义工具栏" show-icon :closable="false"></el-alert>
+
+    <template v-slot:toolbar>
+      <nm-button icon="system" @click="onClick" />
+    </template>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      box: {
+        header: true,
+        title: '工具栏示例',
+        icon: 'app',
+        fullscreen: true,
+        collapse: true
+      }
+    }
+  },
+  methods: {
+    onClick() {
+      this._success('我是自定义工具栏按钮')
+    }
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,58 @@
+<template>
+  <nm-box v-bind="box">
+    <el-alert
+      title="盒子页"
+      type="warning"
+      description="通过设置 page 属性为true，可以让盒子变成一个盒子页，盒子页高度会自动填充满整个父级元素，当内容超出时会有滚动条"
+      show-icon
+      :closable="false"
+    ></el-alert>
+    <pre>
+    水调歌头·明月几时有
+
+         苏轼
+
+    明月几时有？把酒问青天。
+
+    不知天上宫阙，今夕是何年。
+
+    我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
+
+    起舞弄清影，何似在人间？
+
+    转朱阁，低绮户，照无眠。
+
+    不应有恨，何事长向别时圆？
+
+    人有悲欢离合，月有阴晴圆缺，此事古难全。
+
+    但愿人长久，千里共婵娟
+    </pre>
+
+    <template v-slot:footer>
+      <nm-button type="success" text="确认" @click="onClick" />
+    </template>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      box: {
+        page: true,
+        header: true,
+        footer: true,
+        title: '盒子页示例',
+        icon: 'app',
+        fullscreen: true,
+        collapse: true
+      }
+    }
+  },
+  methods: {
+    onClick() {
+      this._success('保存成功')
+    }
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,30 @@
+export default [
+  {
+    name: 'span',
+    desc: '栅格占据的列数',
+    type: 'number',
+    opt: '-',
+    def: '24'
+  },
+  {
+    name: 'offset',
+    desc: '栅格左侧的间隔格数',
+    type: 'number',
+    opt: '-',
+    def: '0'
+  },
+  {
+    name: 'push',
+    desc: '栅格向右移动格数',
+    type: 'number',
+    opt: '-',
+    def: '0'
+  },
+  {
+    name: 'pull',
+    desc: '栅格向左移动格数',
+    type: 'number',
+    opt: '-',
+    def: '0'
+  }
+]

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

@@ -0,0 +1,6 @@
+export default [
+  {
+    name: '-',
+    desc: '内容'
+  }
+]

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

@@ -0,0 +1,27 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert title="盒子栅格列" type="warning" show-icon :closable="false">主要用于盒子的快速布局，通过指定 height 属性，可以让每一行中的盒子都一样高，常用于首页显示各种图表</el-alert>
+  </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 {
+      val: '',
+      tmpl: {
+        title: '盒子栅格化(nm-box-row)',
+        icon: 'card',
+        attrs,
+        slots
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <nm-box-row height="400px" style="margin-bottom:20px">
+      <nm-box-col :span="12">
+        <nm-box header title="盒子栅格化示例" icon="list"></nm-box>
+      </nm-box-col>
+      <nm-box-col :span="12">
+        <nm-box header title="盒子栅格化示例" icon="list"></nm-box>
+      </nm-box-col>
+    </nm-box-row>
+    <nm-box-row height="400px">
+      <nm-box-col :span="6" :offset="2">
+        <nm-box header title="盒子栅格化示例" icon="list"></nm-box>
+      </nm-box-col>
+      <nm-box-col :span="6">
+        <nm-box header title="盒子栅格化示例" icon="list"></nm-box>
+      </nm-box-col>
+      <nm-box-col :span="6">
+        <nm-box header title="盒子栅格化示例" icon="list"></nm-box>
+      </nm-box-col>
+    </nm-box-row>
+  </div>
+</template>

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

@@ -0,0 +1,21 @@
+<template>
+  <nm-container scrollbar>
+    <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-col/demo1/page.js

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

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

@@ -0,0 +1,16 @@
+export default [
+  {
+    name: 'height',
+    desc: '行高',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'gutter',
+    desc: '间隔',
+    type: 'Number',
+    opt: '-',
+    def: '5'
+  }
+]

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

@@ -0,0 +1,6 @@
+export default [
+  {
+    name: '-',
+    desc: '内容'
+  }
+]

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

@@ -0,0 +1,30 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert title="盒子栅格行" type="warning" show-icon :closable="false">
+      <p>主要用于盒子的快速布局，通过指定 height 属性，可以让每一行中的盒子都一样高，常用于首页显示各种图表</p>
+      <p>与Element-UI的栅格化布局类似，总共分24格，需要搭配 nm-box-col 来使用</p>
+    </el-alert>
+  </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 {
+      val: '',
+      tmpl: {
+        title: '盒子栅格行(nm-box-row)',
+        icon: 'card',
+        attrs,
+        slots
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <nm-box-row height="400px" style="margin-bottom:20px">
+      <nm-box-col :span="12">
+        <nm-box header title="盒子栅格化示例" icon="list"></nm-box>
+      </nm-box-col>
+      <nm-box-col :span="12">
+        <nm-box header title="盒子栅格化示例" icon="list"></nm-box>
+      </nm-box-col>
+    </nm-box-row>
+    <nm-box-row height="400px">
+      <nm-box-col :span="6">
+        <nm-box header title="盒子栅格化示例" icon="list"></nm-box>
+      </nm-box-col>
+      <nm-box-col :span="6">
+        <nm-box header title="盒子栅格化示例" icon="list"></nm-box>
+      </nm-box-col>
+      <nm-box-col :span="6">
+        <nm-box header title="盒子栅格化示例" icon="list"></nm-box>
+      </nm-box-col>
+      <nm-box-col :span="6">
+        <nm-box header title="盒子栅格化示例" icon="list"></nm-box>
+      </nm-box-col>
+    </nm-box-row>
+  </div>
+</template>

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

@@ -0,0 +1,21 @@
+<template>
+  <nm-container scrollbar>
+    <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-row/demo1/page.js

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

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

@@ -0,0 +1,44 @@
+export default [
+  {
+    name: 'label',
+    desc: '文本',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'value',
+    desc: '值',
+    type: 'String, Number',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'unit',
+    desc: '单位',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'icon',
+    desc: '图标',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'more',
+    desc: '显示更多',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'bg-color',
+    desc: '背景色',
+    type: 'string',
+    opt: 'success/primary/info/warning/danger/具体色值',
+    def: 'success'
+  }
+]

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

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

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

@@ -0,0 +1,30 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert title="小盒子" type="warning" show-icon :closable="false">
+      <p>主要用于盒子的快速布局，通过指定 height 属性，可以让每一行中的盒子都一样高，常用于首页显示各种图表</p>
+      <p>与Element-UI的栅格化布局类似，总共分24格，需要搭配 nm-box-col 来使用</p>
+    </el-alert>
+  </nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs.js'
+import events from './data/events.js'
+export default {
+  name: page.name,
+  data() {
+    return {
+      val: '',
+      tmpl: {
+        title: '小盒子(nm-box-small)',
+        icon: 'card',
+        attrs,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,50 @@
+<template>
+  <nm-box page>
+    <nm-box-row>
+      <nm-box-col :span="6">
+        <nm-box-small v-bind="box" @more="onMore" />
+      </nm-box-col>
+      <nm-box-col :span="6">
+        <nm-box-small v-bind="box1" @more="onMore" />
+      </nm-box-col>
+      <nm-box-col :span="6">
+        <nm-box-small v-bind="box2" />
+      </nm-box-col>
+    </nm-box-row>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      box: {
+        label: '总消费额',
+        value: 12352.11,
+        unit: '元',
+        icon: 'money',
+        more: true
+      },
+      box1: {
+        label: '总收入',
+        value: 42352.11,
+        unit: '元',
+        icon: 'money',
+        more: true,
+        bgColor: 'warning'
+      },
+      box2: {
+        label: '总支出',
+        value: 562352.11,
+        unit: '元',
+        icon: 'money',
+        bgColor: 'primary'
+      }
+    }
+  },
+  methods: {
+    onMore() {
+      this._success('没有更多了~')
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,21 @@
+<template>
+  <nm-container scrollbar>
+    <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-small/demo1/page.js

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