haiwei-ui 1.0.0

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

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

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

@@ -0,0 +1,75 @@
+<template>
+  <nm-box page header title="对话框示例" icon="dialog">
+    <nm-button type="success" text="简单对话框" @click="dialog.visible = true" />
+    <nm-button type="primary" text="自定义高度" @click="dialog1.visible = true" />
+    <nm-button type="warning" text="可全屏" @click="dialog2.visible = true" />
+    <nm-button text="点击模态框关闭" @click="dialog3.visible = true" />
+    <nm-button text="可拖拽" @click="dialog4.visible = true" />
+
+    <nm-dialog v-bind="dialog" :visible.sync="dialog.visible">
+      <el-alert title="简单对话框" type="success"></el-alert>
+      <el-alert title="简单对话框" type="success"></el-alert>
+      <el-alert title="简单对话框" type="success"></el-alert>
+      <el-alert title="简单对话框" type="success"></el-alert>
+    </nm-dialog>
+
+    <nm-dialog v-bind="dialog1" :visible.sync="dialog1.visible">
+      <el-alert title="通过 height 属性可自定义高度，超出会有滚动条" type="success"></el-alert>
+    </nm-dialog>
+
+    <nm-dialog v-bind="dialog2" :visible.sync="dialog2.visible">
+      <el-alert title="通过 fullscreen 属性可启用全屏功能" type="success"></el-alert>
+    </nm-dialog>
+
+    <nm-dialog v-bind="dialog3" :visible.sync="dialog3.visible">
+      <el-alert title="通过 closeOnClickModal 属性可启用点击模态框关闭" type="success"></el-alert>
+    </nm-dialog>
+
+    <nm-dialog v-bind="dialog4" :visible.sync="dialog4.visible">
+      <el-alert title="通过 draggable 属性可启用拖拽功能" type="success"></el-alert>
+    </nm-dialog>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialog: {
+        title: '简单对话框',
+        icon: 'dialog',
+        visible: false
+      },
+      dialog1: {
+        title: '自定义高度',
+        icon: 'dialog',
+        height: '500px',
+        visible: false
+      },
+      dialog2: {
+        title: '全屏功能',
+        icon: 'dialog',
+        height: '500px',
+        fullscreen: true,
+        visible: false
+      },
+      dialog3: {
+        title: '点击模态框关闭',
+        icon: 'dialog',
+        height: '500px',
+        fullscreen: true,
+        closeOnClickModal: true,
+        visible: false
+      },
+      dialog4: {
+        title: '可拖拽',
+        icon: 'dialog',
+        height: '500px',
+        fullscreen: true,
+        draggable: true,
+        visible: false
+      }
+    }
+  }
+}
+</script>
+<style></style>

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

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

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

@@ -0,0 +1,121 @@
+export default [
+  {
+    name: 'visible',
+    desc: '是否显示',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'header',
+    desc: '是否显示头部',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'footer',
+    desc: '是否显示底部',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'title',
+    desc: '标题',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'icon',
+    desc: '图标',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'placement',
+    desc: '位置',
+    type: 'String',
+    opt: 'left/right',
+    def: 'right'
+  },
+  {
+    name: 'width',
+    desc: '宽度，单位px或者百分比',
+    type: 'String',
+    opt: '-',
+    def: '30%'
+  },
+  {
+    name: 'horizontal',
+    desc: '是否显示水平滚动条',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'loading',
+    desc: '是否显示加载动画',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'append-to-body',
+    desc: '是否附加到Body，默认附加到nm-container',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'modal',
+    desc: '是否显示模态框',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'modal-click-close',
+    desc: '是否显示加载动画',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'customClass',
+    desc: '自定义class',
+    type: 'String',
+    opt: '-',
+    def: ''
+  },
+  {
+    name: 'fullscreen',
+    desc: '是否显示全屏按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'no-padding',
+    desc: '没有内边距',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'draggable',
+    desc: '是否可拖拽',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'no-scrollbar',
+    desc: '不显示滚动条',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  }
+]

package/src/views/components/base/drawer/_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/drawer/_index/data/slots.js

@@ -0,0 +1,22 @@
+export default [
+  {
+    name: '-',
+    desc: 'body里面的内容'
+  },
+  {
+    name: 'header',
+    desc: '头部'
+  },
+  {
+    name: 'toolbar',
+    desc: '头部工具栏，可用于自定义按钮'
+  },
+  {
+    name: 'footer',
+    desc: '底部'
+  },
+  {
+    name: 'trigger',
+    desc: '拖拽按钮'
+  }
+]

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

@@ -0,0 +1,30 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert title="按钮权限" type="warning" show-icon :closable="false">
+      <p>Element-UI组件库已经包含了el-drawer组件，只是本框架开始做的时候它还没有该组件，所以便一直保留了下来~</p>
+    </el-alert>
+  </nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs'
+import events from './data/events'
+import slots from './data/slots'
+export default {
+  name: page.name,
+  data() {
+    return {
+      tmpl: {
+        title: '抽屉(nm-drawer)',
+        icon: 'list',
+        attrs,
+        events,
+        slots
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,24 @@
+<template>
+  <nm-box page>
+    <nm-button @click="drawer1 = true">简单抽屉</nm-button>
+    <nm-button @click="drawer2 = true">左侧抽屉</nm-button>
+    <nm-button @click="drawer3 = true">在附加到body</nm-button>
+    <nm-button @click="drawer4 = true">可拖拽</nm-button>
+    <nm-drawer header title="简单抽屉" :visible.sync="drawer1"></nm-drawer>
+    <nm-drawer header title="左侧抽屉" placement="left" :visible.sync="drawer2"></nm-drawer>
+    <nm-drawer header title="在附加到body" append-to-body :visible.sync="drawer3"></nm-drawer>
+    <nm-drawer header title="可拖拽" draggable :visible.sync="drawer4"></nm-drawer>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      drawer1: false,
+      drawer2: false,
+      drawer3: false,
+      drawer4: false
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,22 @@
+<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/drawer/demo1/page.js

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

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

@@ -0,0 +1,37 @@
+export default [
+  {
+    name: 'direction',
+    desc: '布局方向，对应flex-direction属性',
+    type: 'String',
+    opt: 'column/row',
+    def: 'column'
+  },
+  {
+    name: 'fix',
+    desc: '固定宽度或高度',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'fix-mode',
+    desc: '固定模式',
+    type: 'top、bottom、left、right',
+    opt: '-',
+    def: 'top'
+  },
+  {
+    name: 'height',
+    desc: '高度',
+    type: 'String',
+    opt: '-',
+    def: '100%'
+  },
+  {
+    name: 'gutter',
+    desc: '间隔',
+    type: 'Number',
+    opt: '-',
+    def: '-'
+  }
+]

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

@@ -0,0 +1,18 @@
+export default [
+  {
+    name: 'top',
+    desc: '顶部区域,direction为column可用'
+  },
+  {
+    name: 'bottom',
+    desc: '底部区域,direction为column可用'
+  },
+  {
+    name: 'left',
+    desc: '左侧区域,direction为row可用'
+  },
+  {
+    name: 'right',
+    desc: '右侧区域,direction为row可用'
+  }
+]

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

@@ -0,0 +1,27 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert type="warning">nm-flex是一个布局组件，可以理解为对display:flex属性的一个封装，用于快速实现弹性布局。</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-tabs)',
+        icon: 'card',
+        attrs,
+        slots
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,59 @@
+<template>
+  <nm-container>
+    <nm-split v-model="split">
+      <template v-slot:left>
+        <nm-box page>
+          <nm-flex direction="row" fix-mode="left" height="500px" fix="150px">
+            <template v-slot:left>
+              <div class="page nm-bg-success">
+                <p class="nm-text-whrite">这里宽度是固定的</p>
+              </div>
+            </template>
+            <template v-slot:right>
+              <div class="page nm-bg-warning">
+                <p class="nm-text-whrite">
+                  这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的
+                </p>
+              </div>
+            </template>
+          </nm-flex>
+        </nm-box>
+      </template>
+      <template v-slot:right>
+        <nm-split v-model="split1" mode="vertical">
+          <template v-slot:top>
+            <nm-box page no-scrollbar>
+              <nm-flex fix-mode="top" fix="150px">
+                <template v-slot:top>
+                  <div class="page nm-bg-success">
+                    <p class="nm-text-whrite">这里宽度是固定的</p>
+                  </div>
+                </template>
+                <template v-slot:bottom>
+                  <div class="page nm-bg-warning">
+                    <p class="nm-text-whrite">
+                      这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的，这里宽度是弹性的
+                    </p>
+                  </div>
+                </template>
+              </nm-flex>
+            </nm-box>
+          </template>
+          <template v-slot:bottom>
+            <nm-box page />
+          </template>
+        </nm-split>
+      </template>
+    </nm-split>
+  </nm-container>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      split: 0.5,
+      split1: 0.5
+    }
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,51 @@
+export default [
+  {
+    name: 'text',
+    desc: '文本',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'type',
+    desc: 'type',
+    type: 'String',
+    opt: 'info/success/primary/warning/danger',
+    def: '-'
+  },
+  {
+    name: 'arrowed',
+    desc: '显示左侧箭头',
+    type: 'Boolean',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'arrowed-in',
+    desc: '显示左侧内箭头',
+    type: 'Boolean',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'arrowed-right',
+    desc: '显示右侧箭头',
+    type: 'Boolean',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'arrowed-right-in',
+    desc: '显示右侧内箭头',
+    type: 'Boolean',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'size',
+    desc: '尺寸',
+    type: 'String',
+    opt: 'medium/small/mini',
+    def: '根据系统设置字号'
+  }
+]

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

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