@opentiny/vue-docs 2.0.4 → 2.0.6

package/demos/app/file-upload/upload-request.vue

@@ -14,8 +14,7 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -39,7 +38,7 @@ export default {
   },
   methods: {
     beforeUpload() {
-      message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
+      Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
 
       return true
     }

package/demos/app/form/display-only-composition-api.vue

@@ -111,7 +111,6 @@ import {
   Option as TinyOption,
   Modal
 } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 const displayOnly = ref(true)
 const top = ref(false)
@@ -420,7 +419,7 @@ onMounted(() => {
 })
 
 function submitClick() {
-  alert('提交')
+  Modal.alert('提交')
 }
 
 function querySearch(queryString, cb) {

package/demos/app/form/display-only.vue

@@ -110,7 +110,6 @@ import {
   Option,
   Modal
 } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 export default {
   components: {
@@ -439,7 +438,7 @@ export default {
   },
   methods: {
     submitClick() {
-      alert('提交')
+      Modal.alert('提交')
     },
     querySearch(queryString, cb) {
       let restaurants = this.restaurants

package/demos/app/form/form-validate-field-composition-api.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="demo-form">
+    <tiny-form
+      ref="ruleFormRef"
+      hide-required-asterisk
+      :model="createData"
+      :rules="rules"
+      label-width="100px"
+      show-message
+    >
+      <tiny-form-item label="姓名" prop="users" required :validate-icon="validateIcon">
+        <tiny-input v-model="createData.users"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="日期" prop="datepicker">
+        <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
+      </tiny-form-item>
+      <tiny-form-item label="URL" prop="url">
+        <tiny-input v-model="createData.url"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="邮件" prop="email">
+        <tiny-input v-model="createData.email"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="文本">
+        <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="级联选择器" prop="cascader">
+        <tiny-cascader
+          v-model="createData.cascader"
+          :options="options2"
+          :popper-append-to-body="true"
+          filterable
+        ></tiny-cascader>
+      </tiny-form-item>
+      <tiny-form-item label="Numeric字段" prop="num1">
+        <tiny-numeric v-model="createData.num1"></tiny-numeric>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
+      <tiny-form-item>
+        <tiny-button type="primary" @click="validateSingleField"> 检验单个字段 </tiny-button>
+        <tiny-button type="primary" @click="validateFields"> 校验特定字段 </tiny-button>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import {
+  Form as TinyForm,
+  FormItem as TinyFormItem,
+  Input as TinyInput,
+  DatePicker as TinyDatePicker,
+  Button as TinyButton,
+  Modal,
+  RadioGroup as TinyRadioGroup,
+  Cascader as TinyCascader,
+  Numeric as TinyNumeric,
+  IpAddress as TinyIpAddress
+} from '@opentiny/vue'
+import { iconWarning } from '@opentiny/vue-icon'
+
+const ruleFormRef = ref()
+function handleClick() {
+  Modal.message({ message: 'click' })
+}
+const validateIcon = ref(iconWarning())
+const options = ref([
+  { label: 'A', text: '很好', events: { click: handleClick } },
+  { label: 'B', text: '一般' }
+])
+const options2 = ref([
+  {
+    value: 'zhinan',
+    label: '指南',
+    children: [
+      {
+        value: 'anzhuang',
+        label: '安装'
+      },
+      {
+        value: 'kaifa',
+        label: '开发'
+      }
+    ]
+  }
+])
+const createData = reactive({
+  radio: '',
+  users: '',
+  url: '',
+  email: '',
+  datepicker: '',
+  textarea: '',
+  ip: '',
+  num1: 0,
+  cascader: [] // 注意:级联选择器放在表单中校验时，默认值必须是数组
+})
+const rules = ref({
+  radio: [{ required: true, message: '必填', trigger: 'change' }],
+  users: [
+    { required: true, message: '必填', trigger: 'blur' },
+    { min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
+  ],
+  datepicker: { type: 'date' },
+  url: { type: 'url', required: true },
+  email: { type: 'email' },
+  cascader: [{ required: true, message: '必填', trigger: 'blur' }],
+  ip: [
+    {
+      validator: (rule, value, cb) => (value === '1.1.1.1' ? cb() : cb(new Error('必填1.1.1.1'))),
+      trigger: 'change'
+    }
+  ],
+  num1: [{ type: 'number', min: 2, max: 11, message: '必填 2~11 之间的数字', trigger: 'change' }]
+})
+
+function validateSingleField() {
+  ruleFormRef.value.validateField('users', (errMsg, fieldConfig) => {
+    if (errMsg) {
+      console.log(fieldConfig)
+    } else {
+      Modal.alert('姓名通过校验')
+    }
+  }) 
+}
+
+async function validateFields() {
+  const errArray = []
+  await ruleFormRef.value.validateField(['url', 'datepicker'], (errMsg, fieldConfig) => {
+    if (errMsg) {
+      errArray.push(fieldConfig)
+    }
+  })
+  if (errArray.length > 0) {
+    console.log(errArray)
+  } else {
+    Modal.alert('日期和url通过校验')
+  }
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>

package/demos/app/form/form-validate-field.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="demo-form">
+    <tiny-form
+      ref="ruleFormRef"
+      hide-required-asterisk
+      :model="createData"
+      :rules="rules"
+      label-width="100px"
+      show-message
+    >
+      <tiny-form-item label="姓名" prop="users" required :validate-icon="validateIcon">
+        <tiny-input v-model="createData.users"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="日期" prop="datepicker">
+        <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
+      </tiny-form-item>
+      <tiny-form-item label="URL" prop="url">
+        <tiny-input v-model="createData.url"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="邮件" prop="email">
+        <tiny-input v-model="createData.email"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="文本">
+        <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="级联选择器" prop="cascader">
+        <tiny-cascader
+          v-model="createData.cascader"
+          :options="options2"
+          :popper-append-to-body="true"
+          filterable
+        ></tiny-cascader>
+      </tiny-form-item>
+      <tiny-form-item label="Numeric字段" prop="num1">
+        <tiny-numeric v-model="createData.num1"></tiny-numeric>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
+      <tiny-form-item>
+        <tiny-button type="primary" @click="validateSingleField"> 检验单个字段 </tiny-button>
+        <tiny-button type="primary" @click="validateFields"> 校验特定字段 </tiny-button>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script>
+import {
+  Form,
+  FormItem,
+  Input,
+  DatePicker,
+  Button,
+  Modal,
+  RadioGroup,
+  Cascader,
+  Numeric,
+  IpAddress
+} from '@opentiny/vue'
+import { iconWarning } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyForm: Form,
+    TinyFormItem: FormItem,
+    TinyInput: Input,
+    TinyDatePicker: DatePicker,
+    TinyButton: Button,
+    TinyRadioGroup: RadioGroup,
+    TinyCascader: Cascader,
+    TinyNumeric: Numeric,
+    TinyIpAddress: IpAddress
+  },
+  data() {
+    return {
+      validateIcon: iconWarning(),
+      options: [
+        { label: 'A', text: '很好', events: { click: this.handleClick } },
+        { label: 'B', text: '一般' }
+      ],
+      options2: [
+        {
+          value: 'zhinan',
+          label: '指南',
+          children: [
+            {
+              value: 'anzhuang',
+              label: '安装'
+            },
+            {
+              value: 'kaifa',
+              label: '开发'
+            }
+          ]
+        }
+      ],
+      createData: {
+        radio: '',
+        users: '',
+        url: '',
+        email: '',
+        datepicker: '',
+        textarea: '',
+        ip: '',
+        num1: 0,
+        cascader: [] // 注意:级联选择器放在表单中校验时，默认值必须是数组
+      },
+      rules: {
+        radio: [{ required: true, message: '必填', trigger: 'change' }],
+        users: [
+          { required: true, message: '必填', trigger: 'blur' },
+          { min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
+        ],
+        datepicker: { type: 'date' },
+        url: { type: 'url', required: true },
+        email: { type: 'email' },
+        cascader: [{ required: true, message: '必填', trigger: 'blur' }],
+        ip: [
+          {
+            validator: (rule, value, cb) => (value === '1.1.1.1' ? cb() : cb(new Error('必填1.1.1.1'))),
+            trigger: 'change'
+          }
+        ],
+        num1: [{ type: 'number', min: 2, max: 11, message: '必填 2~11 之间的数字', trigger: 'change' }]
+      }
+    }
+  },
+  methods: {
+    validateSingleField() {
+      this.$refs.ruleFormRef.validateField('users', (errMsg, fieldConfig) => {
+        if (errMsg) {
+          console.log(fieldConfig)
+        } else {
+          Modal.alert('姓名通过校验')
+        }
+      }) 
+    },
+    async validateFields() {
+      const errArray = []
+      await this.$refs.ruleFormRef.validateField(['url', 'datepicker'], (errMsg, fieldConfig) => {
+        if (errMsg) {
+          errArray.push(fieldConfig)
+        }
+      })
+      if (errArray.length > 0) {
+        console.log(errArray)
+      } else {
+        Modal.alert('日期和url通过校验')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>

package/demos/app/form/frequently-used-form-composition-api.vue

@@ -40,9 +40,9 @@ import {
   DropTimes as TinyDropTimes,
   Tooltip as TinyTooltip,
   Input as TinyInput,
-  Button as TinyButton
+  Button as TinyButton,
+  Modal
 } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 const createData = reactive({
   quantity: '',
@@ -54,7 +54,7 @@ const createData = reactive({
 })
 
 function submitClick() {
-  alert('提交')
+  Modal.alert('提交')
 }
 </script>
 

package/demos/app/form/frequently-used-form.vue

@@ -30,8 +30,7 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Numeric, Radio, DatePicker, DropTimes, Tooltip, Input, Button } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Form, FormItem, Numeric, Radio, DatePicker, DropTimes, Tooltip, Input, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -59,7 +58,7 @@ export default {
   },
   methods: {
     submitClick() {
-      alert('提交')
+      Modal.alert('提交')
     }
   }
 }

package/demos/app/form/no-validate-to-add-composition-api.vue

@@ -53,8 +53,8 @@ import {
   Input as TinyInput,
   Select as TinySelect,
   Option as TinyOption
-} from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+} from '@opentiny/vue',Modal
+
 
 const reset = ref(false)
 const ruleForm = reactive({
@@ -105,9 +105,9 @@ const ruleFormRef = ref()
 function submitForm() {
   ruleFormRef.value.validate((valid) => {
     if (valid) {
-      alert('submit!')
+      Modal.alert('submit!')
     } else {
-      alert('error submit!!')
+      Modal.alert('error submit!!')
       return false
     }
   })

package/demos/app/form/no-validate-to-add.vue

@@ -51,9 +51,9 @@ import {
   DatePicker,
   Input,
   Select,
-  Option
+  Option,
+  Modal
 } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 export default {
   components: {
@@ -123,9 +123,9 @@ export default {
     submitForm() {
       this.$refs.ruleFormRef.validate((valid) => {
         if (valid) {
-          alert('submit!')
+          Modal.alert('submit!')
         } else {
-          alert('error submit!!')
+          Modal.alert('error submit!!')
           return false
         }
       })

package/demos/app/form/size-composition-api.vue

@@ -43,9 +43,9 @@ import {
   DropTimes as TinyDropTimes,
   Tooltip as TinyTooltip,
   Input as TinyInput,
-  Button as TinyButton
+  Button as TinyButton,
+  Modal
 } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 const sizeList = ref(['mini', 'small', 'medium'])
 const createData = reactive({
@@ -58,7 +58,7 @@ const createData = reactive({
 })
 
 function submitClick() {
-  alert('提交')
+  Modal.alert('提交')
 }
 </script>
 

package/demos/app/form/size.vue

@@ -33,8 +33,7 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Numeric, Radio, DatePicker, DropTimes, Tooltip, Input, Button } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Form, FormItem, Numeric, Radio, DatePicker, DropTimes, Tooltip, Input, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -63,7 +62,7 @@ export default {
   },
   methods: {
     submitClick() {
-      alert('提交')
+      Modal.alert('提交')
     }
   }
 }

package/demos/app/form/webdoc/form.js

@@ -35,6 +35,17 @@ export default {
       },
       'codeFiles': ['form-validation.vue']
     },
+    {
+      'demoId': 'form-validate-field',
+      'name': { 'zh-CN': '特定表单项校验', 'en-US': 'Form field Validation' },
+      'desc': {
+        'zh-CN':
+          "<p>用于校验表单中一个或多个特定表单项。</p>\n",
+        'en-US':
+          '<p>Validate one or several formItems of the form</p>\n'
+      },
+      'codeFiles': ['form-validate-field.vue']
+    },
     {
       'demoId': 'custom-validation-rule',
       'name': { 'zh-CN': '自定义校验规则', 'en-US': 'Customized Verification Rule' },
@@ -390,7 +401,7 @@ export default {
           'type': '',
           'defaultValue': '',
           'desc': { 'zh-CN': '对部分表单字段进行校验的方法', 'en-US': 'Method for verifying some fields in a form' },
-          'demoId': 'form-validation'
+          'demoId': 'form-validate-field'
         },
         {
           'name': 'resetFields',

package/demos/app/grid/event/toolbar-button-click-event-composition-api.vue

@@ -31,8 +31,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
-import { Modal } from '@opentiny/vue-modal'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
@@ -118,19 +117,19 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'delete': {
       if (data.length === 0) {
-        alert('请至少选中一条记录')
+        Modal.alert('请至少选中一条记录')
       }
       $grid.removeSelecteds()
       break
     }
     case 'getDelete': {
       const removeRecords = $grid.getRemoveRecords() // 获取删除的数据
-      alert('获取删除的数据' + JSON.stringify(removeRecords))
+      Modal.alert('获取删除的数据' + JSON.stringify(removeRecords))
       break
     }
     case 'save': {
       if (!updateData.length && !insertData.length && !removeData.length) {
-        alert('没有修改记录')
+        Modal.alert('没有修改记录')
       } else {
         Modal.message({
           message: '点击保存触发, 新增的数据',
@@ -144,7 +143,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'getRecordset': {
       const records = $grid.getRecordset()
-      alert('增删改记录集合：' + JSON.stringify(records))
+      Modal.alert('增删改记录集合：' + JSON.stringify(records))
       break
     }
   }

package/demos/app/grid/event/toolbar-button-click-event.vue

@@ -30,8 +30,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
-import { Modal } from '@opentiny/vue-modal'
+import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
 
 export default {
   components: {

package/demos/app/grid/grid_Example/gridValid/before-submit-validation-composition-api.vue

@@ -20,8 +20,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
 
 const validRules = {
   name: [
@@ -155,9 +154,9 @@ function toolbarButtonClickEvent({ code }) {
     case 'save': {
       basicGridRef.value.validate((valid) => {
         if (valid) {
-          alert('校验成功！')
+          Modal.alert('校验成功！')
         } else {
-          alert('校验不通过')
+          Modal.alert('校验不通过')
         }
       })
       break

package/demos/app/grid/grid_Example/gridValid/before-submit-validation.vue

@@ -19,8 +19,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -163,9 +162,9 @@ export default {
         case 'save': {
           this.$refs.basicGrid.validate((valid) => {
             if (valid) {
-              alert('校验成功！')
+              Modal.alert('校验成功！')
             } else {
-              alert('校验不通过')
+              Modal.alert('校验不通过')
             }
           })
           break

package/demos/app/grid/grid_Example/gridValid/select-validation-composition-api.vue

@@ -21,8 +21,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
 
 const validRules = {
   name: [
@@ -159,13 +158,13 @@ function toolbarButtonClickEvent({ code }) {
       if (selectRecords.length > 0) {
         basicGridRef.value.validate(selectRecords, (valid) => {
           if (valid) {
-            alert('校验成功！')
+            Modal.alert('校验成功！')
           } else {
-            alert('校验不通过')
+            Modal.alert('校验不通过')
           }
         })
       } else {
-        alert('未选中数据！')
+        Modal.alert('未选中数据！')
       }
       break
     }

package/demos/app/grid/grid_Example/gridValid/select-validation.vue

@@ -20,8 +20,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -167,13 +166,13 @@ export default {
           if (selectRecords.length > 0) {
             this.$refs.basicGrid.validate(selectRecords, (valid) => {
               if (valid) {
-                alert('校验成功！')
+                Modal.alert('校验成功！')
               } else {
-                alert('校验不通过')
+                Modal.alert('校验不通过')
               }
             })
           } else {
-            alert('未选中数据！')
+            Modal.alert('未选中数据！')
           }
           break
         }