Merge pull request #3 from 1962247851/feat-v1.5.8

Feat v1.5.8

README.md

@@ -4,7 +4,7 @@
 
 ## 发布前的调试
 
-现在当前项目执行
+先在当前项目执行
 
 ```shell
 npm link
@@ -57,12 +57,14 @@ Vue.use(OrVuetify)
 import Vue from 'vue'
 import {
     BaseMaterialCard,
+    OrAvatar,
     OrBaseDataIterator,
     OrBaseDataTable,
     OrBaseDialog,
     OrBaseMenu,
     OrBaseTreeList,
     OrEmpty,
+    OrFileField,
     OrInputDialog,
     OrLoadMoreFooter,
     OrNoMoreData,
@@ -82,6 +84,8 @@ Vue.component('OrNotFound', OrNotFound)
 Vue.component('OrSearch', OrSearch)
 Vue.component('OrBaseDialog', OrBaseDialog)
 Vue.component('OrInputDialog', OrInputDialog)
+Vue.component('OrAvatar', OrAvatar)
+Vue.component('OrFileField', OrFileField)
 ```
 
 ### 工具类等

components/or/OrFileField.vue

@@ -0,0 +1,125 @@
+<!--
+  - MIT License
+  -
+  - Copyright (c) 2021 苗锦洲
+  -
+  - Permission is hereby granted, free of charge, to any person obtaining a copy
+  - of this software and associated documentation files (the "Software"), to deal
+  - in the Software without restriction, including without limitation the rights
+  - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  - copies of the Software, and to permit persons to whom the Software is
+  - furnished to do so, subject to the following conditions:
+  -
+  - The above copyright notice and this permission notice shall be included in all
+  - copies or substantial portions of the Software.
+  -
+  - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  - SOFTWARE.
+  -->
+
+<template>
+  <v-form ref="form" @submit.native.prevent>
+    <v-text-field
+        :value="value"
+        :loading="loading"
+        :disabled="loading"
+        clearable
+        v-bind="$attrs"
+        :outlined="outlined"
+        :rules="textRules"
+        :error-messages="error"
+        :label="label"
+        @change="$emit('input', $event)"
+        @keydown.enter="$emit('keydown-enter')"
+    >
+      <template #append-outer>
+        <v-form ref="fileForm" @submit.native.prevent>
+          <v-file-input
+              :disabled="loading"
+              hide-input
+              hide-details
+              :rules="rules"
+              :accept="accept"
+              class="pt-0 mt-0 or-file-field"
+              @change="onFileSelected"
+          />
+        </v-form>
+      </template>
+    </v-text-field>
+  </v-form>
+</template>
+
+<script>
+export default {
+  name: 'OrFileField',
+  props: {
+    value: {
+      type: String,
+      default: null
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    textRules: {
+      type: Array,
+      default: null
+    },
+    rules: {
+      type: Array,
+      default: null
+    },
+    accept: {
+      type: String,
+      default: 'image/*'
+    },
+    errorWhenFileNotValid: {
+      type: String,
+      default: '文件过大，请重新选择'
+    },
+    outlined: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['input', 'keydown-enter', 'change'],
+  data: () => ({
+    error: null
+  }),
+  methods: {
+    validate () {
+      return this.$refs.form.validate() && this.$refs.fileForm.validate()
+    },
+    onFileSelected (file) {
+      if (file == null) {
+        return
+      }
+      if (!this.$refs.fileForm.validate()) {
+        this.error = this.errorWhenFileNotValid
+        setTimeout(() => {
+          this.error = null
+          this.$refs.fileForm.resetValidation()
+        }, 2000)
+      } else {
+        this.$emit('change', file)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.or-file-field .v-input__prepend-outer {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+</style>

components/or/OrInputDialog.vue

@@ -101,8 +101,12 @@ export default {
     close () {
       this.$refs.dialog.close()
     },
-    confirm(){
-      this.$emit('onConfirm',this.input)
+    confirm () {
+      if (!this.$refs.form.validate()) {
+        this.cancelLoading()
+        return
+      }
+      this.$emit('onConfirm', this.input)
     },
     cancelLoading () {
       this.$refs.dialog.cancelLoading()

components/or/base/OrBaseDialog.vue

@@ -26,7 +26,7 @@
   <v-dialog
       v-model="value"
       :persistent="loadingModel||(persistent==null?loading:persistent)"
-      width="80%"
+      :width="width"
       scrollable
       @input="input"
   >
@@ -90,6 +90,10 @@ export default {
     title: {
       type: String,
       required: true
+    },
+    width:{
+      type: [String, Number],
+      default: '80%'
     }
   },
   data: () => ({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordinaryroad-vuetify",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "private": false,
   "main": "src/main.js"
 }

src/components/index.js

@@ -10,4 +10,5 @@ export * from './or/OrInputDialog'
 export * from './or/OrLoadMoreFooter'
 export * from './or/OrNoMoreData'
 export * from './or/OrNotFound'
-export * from './or/OrSearch'
+export * from './or/OrSearch'
+export * from './or/OrFileField'

src/components/or/OrFileField.js

@@ -0,0 +1,4 @@
+import OrFileField from '../../../components/or/OrFileField.vue'
+
+export { OrFileField }
+export default OrFileField

src/locales/en.json

@@ -68,7 +68,10 @@
   "retry": "Retry",
   "role": "Role",
   "rules": {
-    "contentNotEmpty": "The content can not be blank."
+    "contentNotEmpty": "The content can not be empty.",
+    "contentNotBlank": "The content can not be blank.",
+    "inputNotInteger": "The input must be an integer.",
+    "maxNFileSize": "File size should be less than or equal to {0}."
   },
   "search": "Search",
   "settings": "Settings",

src/locales/zh-Hans.json

@@ -68,7 +68,10 @@
   "retry": "重试",
   "role": "角色",
   "rules": {
-    "contentNotEmpty": "内容不能为空"
+    "contentNotEmpty": "内容不能为空",
+    "contentNotBlank": "内容不能为空",
+    "inputNotInteger": "输入必须为整数",
+    "maxNFileSize": "文件大小不能超过{0}"
   },
   "search": "搜索",
   "settings": "设置",

src/rules/index.js

@@ -29,7 +29,7 @@ module.exports = {
     $t = $t || t
   },
   required: value => (value !== undefined) || $t('required'),
-  notBlank: value => (!!value && String(value).length > 0) || $t('required'),
+  notBlank: value => (!!value && String(value).trim().length > 0) || $t('rules.contentNotBlank'),
   min6Chars: value => (!value || String(value).length >= 6) || $t('minNChars', [6]),
   max10Chars: value => (!value || String(value).length <= 10) || $t('maxNChars', [10]),
   max11Chars: value => (!value || String(value).length <= 11) || $t('maxNChars', [11]),
@@ -43,5 +43,6 @@ module.exports = {
   max500Chars: value => (!value || String(value).length <= 500) || $t('maxNChars', [500]),
   max1000Chars: value => (!value || String(value).length <= 1000) || $t('maxNChars', [1000]),
   max10Size: value => (!value || value.length <= 10) || $t('maxNSize', [10]),
-  maxFileSize10MB: value => (!value || value.size <= 10000000) || 'File size should be less than or equal to 10 MB.'
+  maxFileSize10MB: value => (!value || value.size <= 10000000) || $t('rules.maxNFileSize', ['10MB']),
+  integer: value => Number.isInteger(Number(value)) || $t('rules.inputNotInteger'),
 }