haiwei-ui 1.0.0

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

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

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

@@ -0,0 +1,27 @@
+<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'
+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/txt/_index/page.js

@@ -0,0 +1,16 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '简单文本'
+  this.name = 'components-txt-index'
+  this.path = '/components/txt/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/txt/demo1/demo.vue

@@ -0,0 +1,21 @@
+<template>
+  <nm-container>
+    <nm-box page header title="文本示例" icon="list">
+      <el-divider>简单示例</el-divider>
+      <nm-txt type="success">《虞美人》</nm-txt>
+      <nm-txt type="warning">春花秋月何时了，往事知多少。</nm-txt>
+      <nm-txt type="primary">小楼昨夜又东风，</nm-txt>
+      <nm-txt type="danger">故国不堪回首月明中。</nm-txt>
+      <el-divider>图标</el-divider>
+      <nm-txt type="success" icon="list">《虞美人》</nm-txt>
+      <nm-txt type="warning" icon="user">春花秋月何时了，往事知多少。</nm-txt>
+      <nm-txt type="primary" icon="add">小楼昨夜又东风，</nm-txt>
+      <nm-txt type="danger" icon="edit">故国不堪回首月明中。</nm-txt>
+      <el-divider>字号</el-divider>
+      <nm-txt type="success" size="10">《虞美人》</nm-txt>
+      <nm-txt type="warning">春花秋月何时了，往事知多少。</nm-txt>
+      <nm-txt type="primary" size="23">小楼昨夜又东风，</nm-txt>
+      <nm-txt type="danger" size="30">故国不堪回首月明中。</nm-txt>
+    </nm-box>
+  </nm-container>
+</template>

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

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

package/src/views/components/form/checkbox-group/_index/data/attrs.js

@@ -0,0 +1,51 @@
+export default [
+  {
+    name: 'value',
+    desc: '选择的值',
+    type: 'Arrary',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'size',
+    desc: '多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效，默认皮肤的字号设置',
+    type: 'String',
+    opt: 'medium / small / mini',
+    def: '-'
+  },
+  {
+    name: 'disabled',
+    desc: '是否禁用',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'min',
+    desc: '可被勾选的 checkbox 的最小数量',
+    type: 'Number',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'max',
+    desc: '可被勾选的 checkbox 的最大数量',
+    type: 'Number',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'border',
+    desc: '是否显示边框',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'action',
+    desc: '数据项查询方法',
+    type: 'Function',
+    opt: '-',
+    def: '-'
+  }
+]

package/src/views/components/form/checkbox-group/_index/data/events.js

@@ -0,0 +1,12 @@
+export default [
+  {
+    name: 'change',
+    desc: '当绑定值变化时触发的事件',
+    params: '更新后的值/选择的项/所有项'
+  },
+  {
+    name: 'input',
+    desc: '当绑定值变化时触发的事件',
+    params: '更新后的值'
+  }
+]

package/src/views/components/form/checkbox-group/_index/data/methods.js

@@ -0,0 +1,14 @@
+export default [
+  {
+    name: 'refresh',
+    desc: '刷新选择项'
+  },
+  {
+    name: 'setCheckAll',
+    desc: '设置全选'
+  },
+  {
+    name: 'clear',
+    desc: '清除已选项'
+  }
+]

package/src/views/components/form/checkbox-group/_index/data/slots.js

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

package/src/views/components/form/checkbox-group/_index/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert title="约定" type="warning" show-icon :closable="false">
+      <p>本多选框组件是在Element-UI的多选框组件基础上做的扩展，一般结合后端一起使用，组件会自动请求数据并绑定。</p>
+      <p>后端接口需要返回固定的格式</p>
+      <pre>
+        <code>
+          [
+              {
+                  //文本
+                  label:'',
+                  //值
+                  value:'',
+                  //是否禁用
+                  disabled:'',
+                  //扩展数据
+                  data:''
+              }
+          ]
+        </code>
+      </pre>
+    </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'
+import methods from './data/methods.js'
+export default {
+  name: page.name,
+  data() {
+    return {
+      tmpl: {
+        title: '多选框(nm-checkbox-group)',
+        icon: 'checkbox',
+        attrs,
+        slots,
+        events,
+        methods
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

package/src/views/components/form/checkbox-group/_index/page.js

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

package/src/views/components/form/checkbox-group/demo1/demo.vue

@@ -0,0 +1,84 @@
+<template>
+  <nm-box page>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <nm-box header footer title="基础用法" icon="edit">
+          <el-row>
+            <el-col :span="19" :offset="2">
+              <nm-form :model="model">
+                <el-form-item label="姓名：" prop="name">
+                  <el-input v-model="model.name" type="text" />
+                </el-form-item>
+                <el-form-item label="选择城市：" prop="checked">
+                  <nm-checkbox-group v-model="model.checked" :action="query" border />
+                </el-form-item>
+              </nm-form>
+            </el-col>
+          </el-row>
+          <template v-slot:footer>{{ modelStr }}</template>
+        </nm-box>
+      </el-col>
+      <el-col :span="12">
+        <nm-box header footer title="可禁用" icon="edit">
+          <el-alert title="禁用个别选项" type="warning" description="通过在接口中返回的数据项中指定 disabled:true 可以禁用对应的选项" show-icon :closable="false"></el-alert>
+          <el-row>
+            <el-col :span="19" :offset="2">
+              <nm-form :model="model1">
+                <el-form-item label="姓名：" prop="name">
+                  <el-input v-model="model1.name" type="text" />
+                </el-form-item>
+                <el-form-item label="选择城市：" prop="checked">
+                  <nm-checkbox-group v-model="model1.checked" :action="query1" border />
+                </el-form-item>
+              </nm-form>
+            </el-col>
+          </el-row>
+          <template v-slot:footer>{{ modelStr1 }}</template>
+        </nm-box>
+      </el-col>
+    </el-row>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      model: {
+        name: '',
+        checked: []
+      },
+      model1: {
+        name: '',
+        checked: []
+      }
+    }
+  },
+  computed: {
+    modelStr() {
+      return '当前模型：' + JSON.stringify(this.model)
+    },
+    modelStr1() {
+      return '当前模型：' + JSON.stringify(this.model1)
+    }
+  },
+  methods: {
+    query() {
+      return new Promise(resolve => {
+        resolve([
+          { label: '南京', value: 'nj' },
+          { label: '江苏', value: 'js' }
+        ])
+      })
+    },
+    query1() {
+      return new Promise(resolve => {
+        resolve([
+          { label: '南京', value: 'nj', disabled: true },
+          { label: '江苏', value: 'js' }
+        ])
+      })
+    }
+  }
+}
+</script>
+<style></style>

package/src/views/components/form/checkbox-group/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/form/checkbox-group/demo1/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '多选框组件'
+  this.name = 'components-checkbox-group-demo1'
+  this.path = '/components/checkbox-group/demo1'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/form/color-picker/_index/data/attrs.js

@@ -0,0 +1,58 @@
+export default [
+  {
+    name: 'value / v-model',
+    desc: '绑定值',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'clearable',
+    desc: '可清空的',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'size',
+    desc: '尺寸，默认或者为空时，按照皮肤的字号设置',
+    type: 'String',
+    opt: 'medium / small / mini',
+    def: '-'
+  },
+  {
+    name: 'disabled',
+    desc: '是否禁用',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'show-alpha',
+    desc: '是否支持透明度选择',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'color-format',
+    desc: '写入 v-model 的颜色的格式',
+    type: 'Number',
+    opt: 'hsl / hsv / hex / rgb',
+    def: 'hex（show-alpha 为 false）/ rgb（show-alpha 为 true）'
+  },
+  {
+    name: 'popperClass',
+    desc: 'ColorPicker 下拉框的类名',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'predefine',
+    desc: '预定义颜色',
+    type: 'Array',
+    opt: '-',
+    def: '-'
+  }
+]

package/src/views/components/form/color-picker/_index/data/events.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    name: 'change',
+    desc: '当绑定值变化时触发的事件',
+    params: '更新后的值'
+  }
+]

package/src/views/components/form/color-picker/_index/index.vue

@@ -0,0 +1,24 @@
+<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'
+export default {
+  name: page.name,
+  data() {
+    return {
+      tmpl: {
+        title: '颜色选择器(nm-color-picker)',
+        icon: 'list',
+        attrs,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

package/src/views/components/form/color-picker/_index/page.js

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

package/src/views/components/form/color-picker/demo1/demo.vue

@@ -0,0 +1,44 @@
+<template>
+  <nm-box page>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <nm-box header title="基础用法" icon="edit">
+          <el-row>
+            <el-col :span="19" :offset="2">
+              <nm-form :model="model">
+                <el-form-item label="普通用法：" prop="color">
+                  <nm-color-picker v-model="model.color" />
+                </el-form-item>
+                <el-form-item label="禁用：" prop="color1">
+                  <nm-color-picker v-model="model.color1" disabled />
+                </el-form-item>
+                <el-form-item label="透明度：" prop="color1">
+                  <nm-color-picker v-model="model.color2" show-alpha />
+                </el-form-item>
+                <el-form-item label="预定义颜色：" prop="color1">
+                  <nm-color-picker v-model="model.color2" :predefine="predefine" />
+                </el-form-item>
+              </nm-form>
+            </el-col>
+          </el-row>
+        </nm-box>
+      </el-col>
+      <el-col :span="12"></el-col>
+    </el-row>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      model: {
+        color: '',
+        color1: '',
+        color2: ''
+      },
+      predefine: ['#ccc', '#744914', '#B80A04', '#808080']
+    }
+  }
+}
+</script>
+<style></style>

package/src/views/components/form/color-picker/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/form/color-picker/demo1/page.js

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

package/src/views/components/form/date-range-picker/_index/data/attrs.js

@@ -0,0 +1,37 @@
+export default [
+  {
+    name: 'start',
+    desc: '开始日期',
+    type: 'String、Date',
+    opt: '-',
+    def: '默认当前月1号，需要加.sync修饰符'
+  },
+  {
+    name: 'end',
+    desc: '结束日期',
+    type: 'String、Date',
+    opt: '-',
+    def: '默认今日，需要加.sync修饰符'
+  },
+  {
+    name: 'size',
+    desc: '尺寸，默认或者为空时，按照皮肤的字号设置',
+    type: 'String',
+    opt: 'medium / small / mini',
+    def: '-'
+  },
+  {
+    name: 'clearable',
+    desc: '可清空的',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'width',
+    desc: '宽度',
+    type: 'String',
+    opt: '-',
+    def: '240px'
+  }
+]

package/src/views/components/form/date-range-picker/_index/data/events.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    name: 'change',
+    desc: '当绑定值变化时触发的事件',
+    params: '更新后的值，一个数组，包含开始和结束日期'
+  }
+]

package/src/views/components/form/date-range-picker/_index/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    该组件主要用于再列表查询中包含日期区间的场景，比如再列表头部工具栏显示日期选择空间，该组件默认采用当前月的 1 号至当前日，所以你可以不指定日期。
+    <nm-upload-single v-model="file" action="123" />
+  </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 {
+      file: '',
+      tmpl: {
+        title: '日起段选择(nm-date-range-picker)',
+        icon: 'list',
+        attrs,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

package/src/views/components/form/date-range-picker/_index/page.js

@@ -0,0 +1,16 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '日期段选择'
+  this.name = 'components-date-range-picker-index'
+  this.path = '/components/date-range-picker/index'
+  this.icon = 'list'
+  this.group = 1
+  this.sort = 10
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page