@opentiny/vue-docs 1.0.3 → 1.0.4

package/resources/pc/demo/form/custom-validation-rule.vue

@@ -59,7 +59,7 @@ export default {
       rules: {
         username: [
           { required: true, message: '必填', trigger: 'blur' },
-          { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
+          { min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
         ],
         password: [
           { required: true, message: '必填', trigger: 'blur' },

package/resources/pc/demo/form/form-validation.vue

@@ -105,7 +105,7 @@ export default {
         radio: [{ required: true, message: '必填', trigger: 'change' }],
         users: [
           { required: true, message: '必填', trigger: 'blur' },
-          { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
+          { min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
         ],
         datepicker: { type: 'date' },
         url: { type: 'url' },

package/resources/pc/demo/form/smb-required.spec.js

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test'
+
+test('测试分组表单', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/form/smb-required')
+
+  const preview = page.locator('#preview')
+  const form = preview.locator('.tiny-form')
+  const firstLabel = form.locator('.tiny-form-item__label').first()
+
+  await expect(firstLabel).toBeVisible()
+  let beforeElement = await page.evaluate(() => {
+    const labelBefore = document.querySelector(".tiny-form .tiny-form-item__label")
+    const { display, content } = window.getComputedStyle(labelBefore, '::before')
+    return { display, content }
+  })
+
+  // 默认主题下，必填项的星号出现
+  expect(beforeElement.display).toBe('inline-block')
+  expect(beforeElement.content).toBe('"*"')
+
+  // 切换到SMB主题，红色星号不出现
+  await page.getByRole('button', { name: '切换主题' }).hover();
+  await page.waitForTimeout(500)
+  await page.locator('div').filter({ hasText: 'SMB Theme' }).first().click();
+  await expect(firstLabel).toBeVisible()
+  beforeElement = await page.evaluate(() => {
+    const labelBefore = document.querySelector(".tiny-form .tiny-form-item__label")
+    const { display, content } = window.getComputedStyle(labelBefore, '::before')
+    return { display, content }
+  })
+  expect(beforeElement.display).toBe('none')
+  expect(beforeElement.content).toBe('"*"')
+})

package/resources/pc/demo/form/smb-required.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="demo-form">
+    <tiny-form
+      ref="ruleForm"
+      :model="createData"
+      :rules="rules"
+      :validate-on-rule-change="isvalidate"
+      label-width="100px"
+      validate-type="text"
+      :inline-message="true"
+      @validate="validate"
+    >
+      <tiny-form-item label="用户名" prop="username">
+        <tiny-input v-model="createData.username"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="密码" prop="password">
+        <tiny-input v-model="createData.password" type="password" show-password></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="昵称（可选）" prop="nickname">
+        <tiny-input v-model="createData.nickname"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item>
+        <tiny-button type="primary" @click="handleSubmit('ruleForm')">
+          注册
+        </tiny-button>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Form, FormItem, Input, Button, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyForm: Form,
+    TinyFormItem: FormItem,
+    TinyInput: Input,
+    TinyButton: Button
+  },
+  data() {
+    let validatePass = (rule, value, callback) => {
+      if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(value)) {
+        callback(new Error('最少八个字符，至少包含一个大写字母，一个小写字母和一个数字'))
+      } else {
+        if (this.ruleForm.password !== '') {
+          this.$refs.ruleForm.validateField('password')
+        }
+        callback()
+      }
+    }
+
+    return {
+      createData: {
+        username: '',
+        password: '',
+        nickname: '',
+      },
+      isvalidate: true,
+      rules: {
+        username: [
+          { required: true, message: '必填', trigger: 'blur' },
+          { min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
+        ],
+        password: [
+          { required: true, message: '必填', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    validate(val) {
+      Modal.message({
+        message: `表单项被校验后触发的事件,所校验字段为:${val}`,
+        status: 'info'
+      })
+    },
+    handleSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          Modal.alert('校验通过，开始注册！')
+        } else {
+          Modal.message({ message: '校验不通过！！', status: 'warning' })
+          return false
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>

package/resources/pc/demo/fullscreen/example-api.vue

@@ -17,8 +17,8 @@
       <button type="button" @click="toggle">
         {{ fullscreen ? 'Exit Fullscreen' : 'Request Fullscreen' }}
       </button>
-      <img v-show="!fullscreen" src="static/images/book-small.jpg" />
-      <img v-show="fullscreen" src="static/images/book-big.jpg" />
+      <img v-show="!fullscreen" src="/static/images/book-small.jpg" />
+      <img v-show="fullscreen" src="/static/images/book-big.jpg" />
     </div>
   </div>
 </template>

package/resources/pc/demo/fullscreen/example-component.vue

@@ -30,8 +30,8 @@
         <button type="button" @click="toggle">
           {{ fullscreen ? 'Exit Fullscreen' : 'Request Fullscreen' }}
         </button>
-        <img v-show="!fullscreen" src="static/images/book-small.jpg" />
-        <img v-show="fullscreen" src="static/images/book-big.jpg" />
+        <img v-show="!fullscreen" src="/static/images/book-small.jpg" />
+        <img v-show="fullscreen" src="/static/images/book-big.jpg" />
       </div>
     </tiny-fullscreen>
   </div>

package/resources/pc/demo/grid/column/columns-dynamic.vue

@@ -0,0 +1,53 @@
+<template>
+  <tiny-grid :fetch-data="fetchData">
+    <tiny-grid-column
+      v-for="(item, index) in tableColumnList"
+      :key="index"
+      :field="item.field"
+      :title="item.field"
+    ></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      fetchData: { api: this.getData },
+      tableColumnList: []
+    }
+  },
+  mounted() {
+    this.getColumns()
+  },
+  methods: {
+    getData() {
+      const tableData = [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          city: '福州',
+          employees: 800,
+          created_date: '2014-04-30 00:56:00',
+          boole: false
+        }
+      ]
+
+      return new Promise((resolve) => {
+        setTimeout(() => resolve(tableData))
+      })
+    },
+    getColumns() {
+      setTimeout(() => {
+        this.tableColumnList = [{ field: 'employees' }, { field: 'created_date' }, { field: 'name' }, { field: 'city' }]
+      }, 300)
+    }
+  }
+}
+</script>

package/resources/pc/demo/grid/custom/column-width.spec.js

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('个性化列拖拽测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('http://localhost:7130/pc/grid-customized/custom-column-simple')
-  const draggerDom = page.getByRole('cell', { name: '名称' }).locator('div').nth(1)
+  const draggerDom = page.getByRole('cell', { name: '名称' }).locator('.tiny-grid-resizable')
   const thDom = page.getByRole('cell', { name: '名称' })
   // 获取初始列宽
   const { width: thWidth } = await thDom.boundingBox()

package/resources/pc/demo/grid/custom/reset-method.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <tiny-grid :fetch-data="fetchData" :pager="pager">
+      <template #toolbar>
+        <tiny-grid-toolbar
+          id="custom-sorttype-2"
+          :setting="{ storage: 'local', sortable: Sortable }"
+          :reset-method="resetMethod"
+        ></tiny-grid-toolbar>
+      </template>
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域" sortable></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { Grid, GridColumn, Pager, GridToolbar } from '@opentiny/vue'
+import Sortable from 'sortablejs'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyGridToolbar: GridToolbar
+  },
+  methods: {
+    resetMethod() {
+      return new Promise((resolve) => {
+        const customs = {
+          columns: [
+            { property: 'name', visible: false, sortable: true, order: '', fixed: '' },
+            { property: 'area', visible: true, sortable: true, order: 'asc', fixed: '' },
+            { property: 'introduction', visible: true, sortable: true, order: '', fixed: '' },
+            { property: 'address', visible: true, sortable: true, order: '', fixed: '' }
+          ]
+        }
+
+        resolve(customs)
+      })
+    },
+    getData({ page }) {
+      let curPage = page.currentPage
+      let pageSize = page.pageSize
+      let offset = (curPage - 1) * pageSize
+
+      return new Promise((resolve) => {
+        resolve({
+          result: this.tableData.slice(offset, offset + pageSize),
+          page: { total: this.tableData.length }
+        })
+      })
+    }
+  },
+  data() {
+    return {
+      Sortable,
+      pager: {
+        component: Pager,
+        attrs: {
+          currentPage: 1,
+          pageSize: 10,
+          total: 0,
+          pageSizes: [3, 5, 10, 20],
+          layout: 'total, prev, pager, next, jumper, sizes'
+        }
+      },
+      fetchData: {
+        api: this.getData
+      },
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWWW科技有限公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '4',
+          name: 'TGB有限公司',
+          area: '华北区',
+          address: '梅州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '5',
+          name: 'YHN科技有限公司',
+          area: '华南区',
+          address: '韶关',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  }
+}
+</script>

package/resources/pc/demo/grid/custom/resetResizable.spec.js

@@ -4,7 +4,7 @@ test.describe('手动重置列操作', () => {
   test('重置列宽', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('http://localhost:7130/pc/grid-customized/custom-resetResizable')
-    const draggerDom = page.getByRole('cell', { name: '名称' }).locator('div').nth(1)
+    const draggerDom = page.getByRole('cell', { name: '名称' }).locator('.tiny-grid-resizable')
     const thDom = page.getByRole('cell', { name: '名称' })
     // 获取初始列宽
     const { width: thWidth } = await thDom.boundingBox()

package/resources/pc/demo/grid/event/resizable-change-event.spec.js

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('列宽改变事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('http://localhost:7130/pc/grid-event/event-resizable-change-event')
-  const draggerDom = page.getByRole('cell', { name: '名称' }).locator('div').nth(1)
+  const draggerDom = page.getByRole('cell', { name: '名称' }).locator('.tiny-grid-resizable')
   // 获取拖拽元素位置
   const { x, y } = await draggerDom.boundingBox()
   // 开始拖拽

package/resources/pc/demo/grid/event/toggle-expand-change-event.spec.js

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('行展开收起事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('http://localhost:7130/pc/grid-event/event-toggle-expand-change-event')
-  await page.getByRole('row', { name: '1 GFD科技YX公司 华东区 800' }).locator('i').nth(1).click()
+  await page.getByRole('row', { name: '1 GFD科技YX公司 华东区 800' }).locator('i').click()
 
   await expect(page.getByText('当前展开行：1')).toBeVisible()
 })

package/resources/pc/demo/grid/event/toggle-tree-change-event.spec.js

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('树节点展开收起事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('http://localhost:7130/pc/grid-event/event-toggle-tree-change-event')
-  await page.getByRole('cell', { name: '1' }).locator('i').click()
+  await page.getByRole('cell', { name: '1' }).getByRole('img').click()
 
   await expect(page.getByText('触树展开事件')).toBeVisible()
 })

package/resources/pc/demo/grid/event/valid-error-event.spec.js

@@ -9,7 +9,7 @@ test('校验不通过事件', async ({ page }) => {
       name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
     })
     .getByRole('textbox')
-    .fill('')
-
+    .clear()
+  await page.waitForTimeout(400)
   await expect(page.getByText('触发校验不通过事件').first()).toBeVisible()
 })

package/resources/pc/demo/grid/faq/many-poppover.vue

@@ -0,0 +1,108 @@
+<template>
+  <tiny-grid :data="tableData">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    <tiny-grid-column field="created_date" title="创建日期">
+      <template #default="{ row }">
+        <tiny-popover
+          v-model="flag"
+          placement="bottom"
+          width="400"
+          :content="row.created_date"
+          popper-class="pagination-popover"
+          trigger="manual"
+        >
+          <template #reference>
+            <div @click="flag = !flag">1233</div>
+          </template>
+        </tiny-popover>
+      </template>
+    </tiny-grid-column>
+    <tiny-grid-column
+      field="city"
+      title="城市名称很长很长城市名称很长很长城市名称很长很长城市名称很长很长城市名称很长很长城市名称很长很长"
+      show-overflow="tooltip"
+      show-header-overflow="tooltip"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="boole"
+      title="布尔值"
+      align="center"
+      format-text="boole"
+      :editor="checkboxEdit"
+    ></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script lang="jsx">
+import { Grid, GridColumn, Popover } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyPopover: Popover
+  },
+  data() {
+    return {
+      flag: false,
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          city: '福州很长很长福州很长很长福州很长很长福州很长很长福州很长很长福州很长很长福州很长很长福州很长很长',
+          employees: 800,
+          created_date: '2014-04-30 00:56:00',
+          boole: false
+        },
+        {
+          id: '2',
+          name: 'WWW科技有限公司',
+          city: '深圳',
+          employees: 300,
+          created_date: '2016-07-08 12:36:22',
+          boole: true
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          city: '中山',
+          employees: 1300,
+          created_date: '2014-02-14 14:14:14',
+          boole: false
+        },
+        {
+          id: '4',
+          name: 'TGB科技有限公司',
+          city: '龙岩',
+          employees: 360,
+          created_date: '2013-01-13 13:13:13',
+          boole: true
+        },
+        {
+          id: '5',
+          name: 'YHN科技有限公司',
+          city: '韶关',
+          employees: 810,
+          created_date: '2012-12-12 12:12:12',
+          boole: true
+        }
+      ]
+    }
+  },
+  methods: {
+    checkboxEdit(h, { row }) {
+      return (
+        <input
+          type="checkbox"
+          checked={row.boole}
+          onChange={(event) => {
+            row.boole = event.target.checked
+          }}
+        />
+      )
+    }
+  }
+}
+</script>

package/resources/pc/demo/grid/faq/unbalanced.spec.js

@@ -8,5 +8,5 @@ test('常见问题--表格列头与单元格错位测试', async ({ page }) => {
   const { x } = await firstThDom.boundingBox()
   const { x: x1 } = await firstTdDom.boundingBox()
 
-  await expect(x).toEqual(x1)
+  await expect(x).not.toEqual(x1)
 })

package/resources/pc/demo/grid/filter/default-filter.vue

@@ -5,7 +5,13 @@
     </template>
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称" :filter="nameFilter"></tiny-grid-column>
+    <tiny-grid-column
+      field="name"
+      title="公司名称鼠标移入可以动态提示tooltip，公司名称鼠标移入可以动态提示tooltip"
+      show-header-overflow
+      sortable
+      :filter="nameFilter"
+    ></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
     <tiny-grid-column field="city" title="城市" :filter="cityFilter"></tiny-grid-column>

package/resources/pc/demo/grid/fixed/right-fixed.spec.js

@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
 test('右冻结', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('http://localhost:7130/pc/grid-fixed/fixed-right-fixed')
-  await expect(page.getByRole('cell', { name: '城市' })).toHaveCSS('right', '0px')
+  await expect(page.getByRole('cell', { name: '城市' })).toHaveCSS('right', '4px')
 })

package/resources/pc/demo/grid/fixed/right-fixed.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid :data="tableData" :show-overflow="true">
+  <tiny-grid height="300" :data="tableData" :show-overflow="true">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column>

package/resources/pc/demo/grid/footer/footer-summation.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid @footer-cell-dblclick="footerCellDblclick" :data="tableData" show-footer :footer-method="footerMethod" border>
+  <tiny-grid @footer-cell-dblclick="footerCellDblclick" :data="tableData" show-footer :footer-method="footerMethod">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>