haiwei-ui 1.0.0

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

@@ -0,0 +1,25 @@
+<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'
+export default {
+  name: page.name,
+  data() {
+    return {
+      val: '',
+      tmpl: {
+        title: '标签(nm-tabs)',
+        icon: 'card',
+        attrs,
+        slots
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,23 @@
+<template>
+  <nm-container>
+    <nm-box page header title="文本示例" icon="list">
+      <el-divider>简单示例</el-divider>
+      <nm-label type="info">info</nm-label>
+      <nm-label type="success">success</nm-label>
+      <nm-label type="warning">warning</nm-label>
+      <nm-label type="primary">primary</nm-label>
+      <nm-label type="danger">danger</nm-label>
+      <el-divider>左侧箭头</el-divider>
+      <nm-label type="success" arrowed>《虞美人》</nm-label>
+      <nm-label type="warning" arrowed-in>春花秋月何时了，往事知多少。</nm-label>
+      <el-divider>右侧箭头</el-divider>
+      <nm-label type="success" arrowed-right>《虞美人》</nm-label>
+      <nm-label type="warning" arrowed-right-in>春花秋月何时了，往事知多少。</nm-label>
+      <el-divider>尺寸</el-divider>
+      <nm-label type="success" arrowed-right>OLDLI</nm-label>
+      <nm-label type="success" size="medium" arrowed-in arrowed-right>OLDLI</nm-label>
+      <nm-label type="success" size="small" arrowed-in arrowed-right-in>OLDLI</nm-label>
+      <nm-label type="success" size="mini" arrowed-in arrowed-right>OLDLI</nm-label>
+    </nm-box>
+  </nm-container>
+</template>

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

@@ -0,0 +1,24 @@
+<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
+    }
+  },
+  created() {
+    this.setTabName('标签示例代码')
+  }
+}
+</script>

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

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

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

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

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

@@ -0,0 +1,6 @@
+export default [
+  {
+    name: 'update',
+    desc: '重绘滚动条'
+  }
+]

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

@@ -0,0 +1,27 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert title="注意事项" type="warning" :closable="false">滚动条的父元素必须设置高度</el-alert>
+  </nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs.js'
+import methods from './data/methods.js'
+export default {
+  name: page.name,
+  data() {
+    return {
+      val: '',
+      tmpl: {
+        title: '滚动条(nm-scrollbar)',
+        icon: 'list',
+        attrs,
+        methods
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

@@ -0,0 +1,15 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '滚动条'
+  this.name = 'components-scrollbar-index'
+  this.path = '/components/scrollbar/index'
+  this.icon = 'card'
+  this.sort = 8
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

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

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="12">
+        <section style="height:400px;background-color:#fff">
+          <nm-scrollbar>
+            <p v-for="i in 100" :key="i">第{{ i }}个</p>
+          </nm-scrollbar>
+        </section>
+      </el-col>
+      <el-col :span="12">
+        <section style="height:400px;background-color:#fff">
+          <nm-scrollbar horizontal>
+            <p v-for="i in 100" :key="i">
+              <span v-for="m in i" :key="i + '' + m">hahaah</span>
+            </p>
+          </nm-scrollbar>
+        </section>
+      </el-col>
+    </el-row>
+  </div>
+</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/base/scrollbar/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/scrollbar/demo1/page.js

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

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

@@ -0,0 +1,37 @@
+export default [
+  {
+    name: 'v-model/value',
+    desc: '分割比例',
+    type: 'Number, String',
+    opt: '-',
+    def: '0.5'
+  },
+  {
+    name: 'mode',
+    desc: '分割模式，水平/垂直',
+    type: 'String',
+    opt: 'horizontal/vertical',
+    def: 'horizontal'
+  },
+  {
+    name: 'max',
+    desc: '最大值',
+    type: 'Number, String',
+    opt: '-',
+    def: '40px'
+  },
+  {
+    name: 'min',
+    desc: '最小值',
+    type: 'Number, String',
+    opt: '-',
+    def: '40px'
+  },
+  {
+    name: 'loading',
+    desc: '显示加载动画',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  }
+]

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

@@ -0,0 +1,17 @@
+export default [
+  {
+    name: 'on-move-start',
+    desc: '开始移动',
+    params: ''
+  },
+  {
+    name: 'on-moving',
+    desc: '移动中',
+    params: 'event'
+  },
+  {
+    name: 'on-move-end',
+    desc: '移动结束',
+    params: ''
+  }
+]

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

@@ -0,0 +1,29 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert type="warning">
+      <p>本组件从iView移植而来</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-split)',
+        icon: 'list',
+        attrs,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,27 @@
+<template>
+  <nm-split v-model="split">
+    <template v-slot:left>
+      <nm-box page>左侧面板</nm-box>
+    </template>
+    <template v-slot:right>
+      <nm-split v-model="split1" mode="vertical">
+        <template v-slot:top>
+          <nm-box page>上方面板</nm-box>
+        </template>
+        <template v-slot:bottom>
+          <nm-box page>下方面板</nm-box>
+        </template>
+      </nm-split>
+    </template>
+  </nm-split>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      split: 0.3,
+      split1: 0.3
+    }
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,9 @@
+export default [
+  {
+    name: 'fullscreen',
+    desc: '是否显示全屏按钮',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  }
+]

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

@@ -0,0 +1,12 @@
+export default [
+  {
+    name: 'collapse-change',
+    desc: '折叠事件',
+    params: '折叠状态'
+  },
+  {
+    name: 'fullscreen-change',
+    desc: '全屏事件',
+    params: '全屏状态'
+  }
+]

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

@@ -0,0 +1,12 @@
+export default [
+  {
+    name: 'openFullscreen',
+    desc: '打开全屏',
+    params: '-'
+  },
+  {
+    name: 'closeFullscreen',
+    desc: '关闭全屏',
+    params: '-'
+  }
+]

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

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

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

@@ -0,0 +1,31 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert type="warning" show-icon :closable="false">该组件主要时为了控制Element-UI里面的标签页组件布局用的，他能够让内部的el-tabs标签高度100%</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-tabs)',
+        icon: 'card',
+        attrs,
+        slots,
+        methods,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,79 @@
+<template>
+  <nm-container>
+    <nm-split v-model="split">
+      <template v-slot:left>
+        <nm-box page header title="标签页示例" icon="list">
+          <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"></el-tree>
+        </nm-box>
+      </template>
+      <template v-slot:right>
+        <nm-tabs>
+          <el-tabs v-model="tab">
+            <el-tab-pane v-for="i in 5" :key="i" :name="`tab${i}`">
+              <span slot="label">
+                <nm-icon name="list"></nm-icon>
+                Tab{{ i }}
+              </span>
+              <nm-box>
+                <p>这里是Tab{{ i }}</p>
+              </nm-box>
+            </el-tab-pane>
+          </el-tabs>
+        </nm-tabs>
+      </template>
+    </nm-split>
+  </nm-container>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      split: 0.2,
+      tab: 'tab1',
+      data: [
+        {
+          id: 1,
+          label: '一级 2',
+          children: [
+            {
+              id: 3,
+              label: '二级 2-1',
+              children: [
+                {
+                  id: 4,
+                  label: '三级 3-1-1'
+                },
+                {
+                  id: 5,
+                  label: '三级 3-1-2',
+                  disabled: true
+                }
+              ]
+            },
+            {
+              id: 2,
+              label: '二级 2-2',
+              disabled: true,
+              children: [
+                {
+                  id: 6,
+                  label: '三级 3-2-1'
+                },
+                {
+                  id: 7,
+                  label: '三级 3-2-2',
+                  disabled: true
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,24 @@
+<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
+    }
+  },
+  created() {
+    this.setTabName('标签页示例代码')
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,9 @@
+export default [
+  {
+    name: 'fullscreen',
+    desc: '是否显示全屏按钮',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  }
+]