@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/pc/app/grid/data-source/undefined-field-defalut-value-composition-api.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <tiny-button @click="addRow">新增行</tiny-button>
+    <tiny-grid ref="gridRef" :data="tableData" :edit-config="editConfig">
+      <template #toolbar>
+        <tiny-grid-toolbar id="undefined-field-defalut-value" :setting="{ storage: 'local' }"></tiny-grid-toolbar>
+      </template>
+      <tiny-grid-column field="field1" title="所属区域" :editor="{}">
+        <template #edit="{ row }">
+          <tiny-input v-model="row.field1" />
+        </template>
+      </tiny-grid-column>
+      <tiny-grid-column field="field2" title="地址" :editor="{ defaultValue: '' }">
+        <template #edit="{ row }">
+          <tiny-input v-model="row.field2" />
+        </template>
+      </tiny-grid-column>
+      <tiny-grid-column field="field3" title="邮编" :editor="{ defaultValue: '' }">
+        <template #edit="{ row }">
+          <tiny-input v-model="row.field3" />
+        </template>
+      </tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { TinyGrid, TinyGridColumn, TinyInput, TinyButton, TinyGridToolbar } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const tableData = ref([
+  {
+    field1: 'field1'
+  },
+  {
+    field1: 'field1'
+  }
+])
+
+const editConfig = ref({
+  trigger: 'click',
+  mode: 'cell',
+  autofocus: 'input'
+})
+
+const gridRef = ref(null)
+
+const addRow = () => {
+  gridRef.value.insert({})
+}
+</script>

package/demos/pc/app/grid/data-source/undefined-field-defalut-value.spec.js

@@ -0,0 +1,52 @@
+import { test, expect } from '@playwright/test'
+
+test('缺省数据默认值', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-data-source#undefined-field-defalut-value')
+
+  const demo = page.locator('#undefined-field-defalut-value')
+  const custom = page.locator('.tiny-grid-custom')
+
+  const firstRow = demo.locator('.tiny-grid-body__row:visible').nth(0)
+
+  // 缺省值的修改能够正常显示角标
+  await firstRow.locator('td').nth(1).click()
+  await firstRow.locator('.tiny-input__inner').click()
+  await firstRow.locator('.tiny-input__inner').fill('1')
+  await firstRow.locator('td').nth(2).click()
+  await firstRow.locator('.tiny-input__inner').click()
+  await expect(firstRow.locator('td').nth(1)).toHaveClass(/col__valid-success/)
+  await firstRow.locator('.tiny-input__inner').fill('2')
+  await firstRow.locator('td').nth(1).click()
+  await expect(firstRow.locator('td').nth(2)).toHaveClass(/col__valid-success/)
+
+  // 新增行能成功进入编辑态
+  await demo.locator('.tiny-button').click()
+  await firstRow.locator('td').nth(1).click()
+  await firstRow.locator('.tiny-input__inner').click()
+  await firstRow.locator('.tiny-input__inner').fill('1')
+  await expect(firstRow.locator('.tiny-input__inner')).toHaveValue('1')
+
+  // 测试：新增行后通过个性化面板设置列隐藏，新增的行不应该消失
+  const rowsBefore = await demo.locator('.tiny-grid-body__row:visible').count()
+  expect(rowsBefore).toBeGreaterThan(2) // 原始2行 + 新增的1行
+
+  await page.locator('.tiny-grid-custom__setting-btn').click()
+
+  await custom.getByRole('row', { name: '地址' }).getByTitle('显示').getByRole('img').click()
+
+  await custom.getByRole('button', { name: '确定' }).click()
+
+  await expect(page.getByRole('cell', { name: '地址' })).not.toBeVisible()
+
+  // 6. 验证新增的行仍然存在（行数应该保持不变）
+  const rowsAfter = await demo.locator('.tiny-grid-body__row:visible').count()
+  expect(rowsAfter).toBe(rowsBefore)
+
+  // 7. 验证新增的行数据仍然可以编辑
+  const newRow = demo.locator('.tiny-grid-body__row:visible').first()
+  await newRow.locator('td').nth(0).click() // 点击第一列
+  await newRow.locator('.tiny-input__inner').click()
+  await newRow.locator('.tiny-input__inner').fill('test')
+  await expect(newRow.locator('.tiny-input__inner')).toHaveValue('test')
+})

package/demos/pc/app/grid/data-source/undefined-field-defalut-value.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <tiny-button @click="addRow">新增行</tiny-button>
+    <tiny-grid ref="grid" :data="tableData" :edit-config="editConfig">
+      <template #toolbar>
+        <tiny-grid-toolbar id="undefined-field-defalut-value" :setting="{ storage: 'local' }"></tiny-grid-toolbar>
+      </template>
+      <tiny-grid-column field="field1" title="所属区域" :editor="{}">
+        <template #edit="{ row }">
+          <tiny-input v-model="row.field1" />
+        </template>
+      </tiny-grid-column>
+      <tiny-grid-column field="field2" title="地址" :editor="{ defaultValue: '' }">
+        <template #edit="{ row }">
+          <tiny-input v-model="row.field2" />
+        </template>
+      </tiny-grid-column>
+      <tiny-grid-column field="field3" title="邮编" :editor="{ defaultValue: '' }">
+        <template #edit="{ row }">
+          <tiny-input v-model="row.field3" />
+        </template>
+      </tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { TinyGrid, TinyGridColumn, TinyInput, TinyButton, TinyGridToolbar } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn,
+    TinyInput,
+    TinyButton,
+    TinyGridToolbar
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          field1: 'field1'
+        },
+        {
+          field1: 'field1'
+        }
+      ],
+      editConfig: {
+        trigger: 'click',
+        mode: 'cell',
+        autofocus: 'input'
+      }
+    }
+  },
+  methods: {
+    addRow() {
+      this.$refs.grid.insert({})
+    }
+  }
+}
+</script>

package/demos/pc/app/grid/editor/custom-editor-select-composition-api.vue

@@ -12,7 +12,8 @@
         title="区域"
         :editor="{
           component: TinySelect,
-          attrs: { options, textField: 'name', valueField: 'id' }
+          attrs: { options, textField: 'name', valueField: 'id' },
+          event: { change: hangeChange }
         }"
         :format-config="{ data: options, label: 'name', value: 'id' }"
         format-text="enum"
@@ -36,6 +37,10 @@
 import { ref } from 'vue'
 import { TinyGrid, TinyGridColumn, TinySelect } from '@opentiny/vue'
 
+function hangeChange(value) {
+  console.log('handleChnage', value)
+}
+
 const options = ref([
   { name: '华中区', id: '1' },
   { name: '华东区', id: '2' },

package/demos/pc/app/grid/editor/custom-editor-select.spec.js

@@ -3,9 +3,10 @@ import { test, expect } from '@playwright/test'
 test('引入组件作为编辑器', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-editor#editor-custom-editor-select')
-  await page.getByText('华中区').first().click()
-  await page.getByRole('textbox', { name: '请选择' }).click()
-  await page.getByRole('list').getByText('西南区').click()
-  await page.getByRole('cell', { name: '创建时间' }).click()
+  const demo = page.locator('#editor-custom-editor-select')
+  await demo.getByText('华中区').first().click()
+  await demo.locator('.tiny-input__inner').click()
+  await page.locator('.tiny-option-label').filter({ hasText: '西南区' }).click()
+  await demo.locator('.tiny-grid__body thead').click()
   await expect(page.locator('.tiny-grid-body__row').first()).toContainText('西南区')
 })

package/demos/pc/app/grid/editor/custom-editor-select.vue

@@ -12,7 +12,8 @@
         title="区域"
         :editor="{
           component: TinySelect,
-          attrs: { options, textField: 'name', valueField: 'id' }
+          attrs: { options, textField: 'name', valueField: 'id' },
+          event: { change: hangeChange }
         }"
         :format-config="{ data: options, label: 'name', value: 'id' }"
         format-text="enum"
@@ -146,6 +147,9 @@ export default {
   methods: {
     renderName(h, { row }) {
       return <span style="color:goldenrod">{row.name}</span>
+    },
+    hangeChange(value) {
+      console.log('handleChnage', value)
     }
   }
 }

package/demos/pc/app/grid/editor/mutil-render.spec.js

@@ -7,7 +7,10 @@ test('Grid-编辑器 - 下拉多选', async ({ page }) => {
     width: 1600,
     height: 1200
   })
-  await page.getByText('华中区;华南区').click()
+  const demo = page.locator('#editor-mutil-render')
+  const firstRow = demo.locator('.tiny-grid-body__row:visible').first()
+  await firstRow.locator('td').nth(2).click()
+  await page.waitForTimeout(2500)
   await page.locator('.tiny-input__suffix-inner > .tiny-svg').click()
   await page.locator('li').filter({ hasText: '华东区' }).click()
   await page.getByRole('cell', { name: '创建时间' }).click()

package/demos/pc/app/grid/filter/server-filter-composition-api.vue

@@ -99,7 +99,7 @@ function filterChangeEvent({ filters }) {
   })
 }
 
-function getData({ page, sort, data, filters }) {
+function getData({ page, filters }) {
   return new Promise((resolve) => {
     setTimeout(() => {
       // 此处为用户自定义的服务端分页、排序、过滤服务

package/demos/pc/app/grid/filter/server-filter.vue

@@ -106,7 +106,7 @@ export default {
         status: 'info'
       })
     },
-    getData({ page, sort, data, filters }) {
+    getData({ page, filters }) {
       return new Promise((resolve) => {
         setTimeout(() => {
           // 此处为用户自定义的服务端分页、排序、过滤服务

package/demos/pc/app/grid/webdoc/grid-data-source.js

@@ -62,6 +62,18 @@ export default {
         'en-US': ''
       },
       codeFiles: ['data-source/defslot-protochain-fetch.vue']
+    },
+    {
+      demoId: 'undefined-field-defalut-value',
+      name: { 'zh-CN': '缺省数据的默认值', 'en-US': '' },
+      desc: {
+        'zh-CN': `
+        <p>在可编辑表格组件中，当编辑器检测到当前数据行缺少对应字段时，会自动创建该字段。字段的初始化值遵循以下规则：</p>
+        <p>1. 若配置了 <code>editor.defaultValue</code>，则使用该值作为初始值</p>
+        <p>2.若未配置 <code>editor.defaultValue</code>，则默认使用 <code>null</code>作为初始值</p>`,
+        'en-US': ''
+      },
+      codeFiles: ['data-source/undefined-field-defalut-value.vue']
     }
   ],
   apis: [{ name: 'grid-data-source', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

package/demos/pc/app/grid-select/basic-usage-composition-api.vue

@@ -1,5 +1,18 @@
 <template>
+  <p>场景 1：单选</p>
+  <br />
   <tiny-grid-select v-model="value" :grid-op="gridOpSingle" value-field="id" text-field="city"></tiny-grid-select>
+  <br />
+  <br />
+  <p>场景 2：多选</p>
+  <br />
+  <tiny-grid-select
+    v-model="value2"
+    multiple
+    :grid-op="gridOpMulti"
+    value-field="id"
+    text-field="city"
+  ></tiny-grid-select>
 </template>
 
 <script setup>
@@ -7,7 +20,7 @@ import { ref, reactive } from 'vue'
 import { TinyGridSelect } from '@opentiny/vue'
 
 const value = ref('')
-
+const value2 = ref([])
 const gridOpSingle = reactive({
   data: [
     { id: '001', area: '华南区', province: '广东省', city: '广州市' },
@@ -23,6 +36,21 @@ const gridOpSingle = reactive({
     { field: 'city', title: '城市', width: 60 }
   ]
 })
+const gridOpMulti = reactive({
+  data: [
+    { id: '001', area: '华南区', province: '广东省', city: '广州市' },
+    { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
+    { id: '003', area: '华南区', province: '广东省', city: '珠海市' },
+    { id: '004', area: '华南区', province: '广东省', city: '佛山市' },
+    { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+  ],
+  columns: [
+    { type: 'selection', title: '' },
+    { field: 'area', title: '区域', width: 90 },
+    { field: 'province', title: '省份', width: 60 },
+    { field: 'city', title: '城市', width: 60 }
+  ]
+})
 </script>
 
 <style scoped>

package/demos/pc/app/grid-select/basic-usage.vue

@@ -1,5 +1,18 @@
 <template>
-  <tiny-grid-select v-model="value" :grid-op="gridOpSingle" value-field="id" text-field="city"></tiny-grid-select>
+  <div id="basic-usage">
+    <p>场景 1：单选</p>
+    <tiny-grid-select v-model="value" :grid-op="gridOpSingle" value-field="id" text-field="city"></tiny-grid-select>
+    <br />
+    <br />
+    <p>场景 2：多选</p>
+    <tiny-grid-select
+      v-model="value2"
+      multiple
+      :grid-op="gridOpMulti"
+      value-field="id"
+      text-field="city"
+    ></tiny-grid-select>
+  </div>
 </template>
 
 <script>
@@ -12,6 +25,7 @@ export default {
   data() {
     return {
       value: '',
+      value2: [],
       gridOpSingle: {
         data: [
           { id: '001', area: '华南区', province: '广东省', city: '广州市' },
@@ -26,6 +40,21 @@ export default {
           { field: 'province', title: '省份', width: 60 },
           { field: 'city', title: '城市', width: 60 }
         ]
+      },
+      gridOpMulti: {
+        data: [
+          { id: '001', area: '华南区', province: '广东省', city: '广州市' },
+          { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
+          { id: '003', area: '华南区', province: '广东省', city: '珠海市' },
+          { id: '004', area: '华南区', province: '广东省', city: '佛山市' },
+          { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+        ],
+        columns: [
+          { type: 'selection', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
       }
     }
   }

package/demos/pc/app/grid-select/config.spec.ts

@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test'
+test.use({
+  viewport: { width: 1920, height: 1080 }
+})
+test('grid-select 禁用选项', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-select#config')
+
+  const wrap = page.locator('#config')
+  const single = wrap.locator('.tiny-grid-select').first()
+  const singleInput = single.locator('.tiny-input__inner')
+
+  await singleInput.click()
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const rows = dropdown.getByRole('row')
+
+  // 第 1 行被禁用，点击后不应该选中
+  await rows.nth(0).getByRole('cell').nth(1).click()
+  await expect(singleInput).toHaveValue('')
+
+  // 第 2 行可用，点击后可以选中
+  await page.getByRole('row', { name: '华南区 广东省 深圳市' }).locator('div').first().click()
+  await expect(singleInput).toHaveValue('深圳市')
+})

package/demos/pc/app/grid-select/config.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="config">
     <p>场景 1：单选</p>
     <br />
     <tiny-grid-select

package/demos/pc/app/grid-select/extra-query-params-composition-api.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="demo-select">
+    <div>父选项：</div>
+    <br />
+    <tiny-grid-select
+      v-model="parentValue"
+      multiple
+      clearable
+      filterable
+      remote
+      text-field="label"
+      value-field="id"
+      :grid-op="gridOpParent"
+      :init-query="loadParents"
+      :remote-method="remoteParents"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      @change="handleParentChange"
+    ></tiny-grid-select>
+    <br /><br />
+    <div>子选项：</div>
+    <br />
+    <tiny-grid-select
+      v-model="childValue"
+      multiple
+      clearable
+      filterable
+      remote
+      text-field="label"
+      value-field="id"
+      :grid-op="gridOpChild"
+      :extra-query-params="parentValue"
+      :init-query="loadChildren"
+      :remote-method="remoteChildren"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+    ></tiny-grid-select>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { TinyGridSelect } from '@opentiny/vue'
+
+const parentValue = ref(['001'])
+const childValue = ref(['001'])
+
+const parentOptions = [
+  { id: '001', label: '指南' },
+  { id: '002', label: '组件' }
+]
+
+const childOptions = [
+  { id: '001', label: '安装', parent: '001' },
+  { id: '002', label: '开发', parent: '001' },
+  { id: '004', label: '框架风格', parent: '002' },
+  { id: '005', label: '表单组件', parent: '002' },
+  { id: '006', label: '数据组件', parent: '002' },
+  { id: '007', label: '提示组件', parent: '002' },
+  { id: '008', label: '导航组件', parent: '002' },
+  { id: '009', label: '其他组件', parent: '002' }
+]
+
+const gridOpParent = reactive({
+  data: [],
+  height: 260,
+  columns: [
+    { type: 'selection', title: '' },
+    { field: 'label', title: '父级' }
+  ]
+})
+
+const gridOpChild = reactive({
+  data: [],
+  height: 260,
+  columns: [
+    { type: 'selection', title: '' },
+    { field: 'label', title: '子级' }
+  ]
+})
+
+const loadParents = () => Promise.resolve(parentOptions)
+const remoteParents = (keyword) => {
+  const list = parentOptions.filter((item) => item.label.includes(keyword || ''))
+  return Promise.resolve(list)
+}
+
+const loadChildren = (value, extraQueryParams) => filterChildren(extraQueryParams)
+const remoteChildren = (keyword, extraQueryParams) => filterChildren(extraQueryParams, keyword)
+
+const filterChildren = (parentIds, keyword = '') =>
+  new Promise((resolve) => {
+    const list = childOptions
+      .filter((child) => parentIds.includes(child.parent))
+      .filter((child) => child.label.includes(keyword || ''))
+    setTimeout(() => resolve(list), 300)
+  })
+
+const handleParentChange = (parents) => {
+  const childIds = childOptions
+    .filter((child) => parents.includes(child.parent))
+    .map((child) => child.id)
+  childValue.value = childValue.value.filter((value) => childIds.includes(value))
+}
+</script>
+
+<style scoped>
+.demo-select .tiny-grid-select {
+  width: 280px;
+}
+</style>
+

package/demos/pc/app/grid-select/extra-query-params.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test'
+
+test('grid-select 初始化查询传参', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-select#extra-query-params')
+  await page.waitForTimeout(1000)
+
+  const demo = page.locator('#extra-query-params')
+  // 选中指南
+  await page.getByLabel('示例', { exact: true }).getByText('指南').click()
+  await page.getByRole('row', { name: '指南' }).locator('path').nth(2).click()
+  await page.getByRole('row', { name: '组件' }).locator('path').first().click()
+  await page.getByLabel('示例', { exact: true }).getByText('组件').click()
+  await page.waitForTimeout(400)
+
+  // 选中框架风格
+  await page.locator('#extra-query-params').getByRole('textbox').nth(2).click()
+  await page.getByRole('row', { name: '框架风格' }).locator('path').first().click()
+  await page.locator('#extra-query-params').getByRole('textbox').nth(2).click()
+  await expect(page.getByLabel('示例', { exact: true }).getByText('框架风格')).toBeVisible()
+})

package/demos/pc/app/grid-select/extra-query-params.vue

@@ -0,0 +1,129 @@
+<template>
+  <div id="extra-query-params" class="demo-select">
+    <div>父选项：</div>
+    <br />
+    <tiny-grid-select
+      v-model="parentValue"
+      multiple
+      clearable
+      filterable
+      remote
+      text-field="label"
+      value-field="id"
+      :grid-op="gridOpParent"
+      :init-query="loadParents"
+      :remote-method="remoteParents"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      @change="handleParentChange"
+    ></tiny-grid-select>
+    <br /><br />
+    <div>子选项：</div>
+    <br />
+    <tiny-grid-select
+      v-model="childValue"
+      multiple
+      clearable
+      filterable
+      remote
+      text-field="label"
+      value-field="id"
+      :extra-query-params="parentValue"
+      :grid-op="gridOpChild"
+      :init-query="loadChildren"
+      :remote-method="remoteChildren"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+    ></tiny-grid-select>
+  </div>
+</template>
+
+<script>
+import { TinyGridSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGridSelect
+  },
+  created() {
+    this.parentOptions = [
+      { id: '001', label: '指南' },
+      { id: '002', label: '组件' }
+    ]
+    this.childOptions = [
+      { id: '001', label: '安装', parent: '001' },
+      { id: '002', label: '开发', parent: '001' },
+      { id: '004', label: '框架风格', parent: '002' },
+      { id: '005', label: '表单组件', parent: '002' },
+      { id: '006', label: '数据组件', parent: '002' },
+      { id: '007', label: '提示组件', parent: '002' },
+      { id: '008', label: '导航组件', parent: '002' },
+      { id: '009', label: '其他组件', parent: '002' }
+    ]
+  },
+  data() {
+    return {
+      parentValue: ['001'],
+      childValue: ['001'],
+      gridOpParent: {
+        data: [],
+        height: 260,
+        optimization: {
+          animat: true,
+          scrollY: { gt: 20 }
+        },
+        columns: [
+          { type: 'selection', title: '' },
+          { field: 'label', title: '父级' }
+        ]
+      },
+      gridOpChild: {
+        data: [],
+        height: 260,
+        optimization: {
+          animat: true,
+          scrollY: { gt: 20 }
+        },
+        columns: [
+          { type: 'selection', title: '' },
+          { field: 'label', title: '子级' }
+        ]
+      }
+    }
+  },
+  methods: {
+    loadParents() {
+      return Promise.resolve(this.parentOptions)
+    },
+    remoteParents(keyword) {
+      const list = this.parentOptions.filter((item) => item.label.includes(keyword || ''))
+      return Promise.resolve(list)
+    },
+    loadChildren(value, extraQueryParams) {
+      return this.filterChildren(extraQueryParams)
+    },
+    remoteChildren(keyword, extraQueryParams) {
+      return this.filterChildren(extraQueryParams, keyword)
+    },
+    filterChildren(parentIds, keyword = '') {
+      const list = this.childOptions
+        .filter((child) => parentIds.includes(child.parent))
+        .filter((child) => child.label.includes(keyword || ''))
+      return new Promise((resolve) => {
+        setTimeout(() => resolve(list), 300)
+      })
+    },
+    handleParentChange(parents) {
+      const childIds = this.childOptions
+        .filter((child) => parents.includes(child.parent))
+        .map((child) => child.id)
+      this.childValue = this.childValue.filter((value) => childIds.includes(value))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-select .tiny-grid-select {
+  width: 280px;
+}
+</style>
+