@opentiny/vue-docs 3.28.1 → 3.30.0

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

@@ -3,28 +3,23 @@
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称" :filter="customFilter">
       <template #filter="data">
-        <input v-model="customFilterData.input" />
-        <button @click="data.context.commitFilter(customFilter)">confirm</button>
-        <button
-          @click="
-            () => {
-              customFilterData.input = ''
-              data.context.clearFilter()
-            }
-          "
-        >
-          clear
-        </button>
-        <button
-          @click="
-            () => {
-              customFilterData.input = ''
-              data.context.resetFilter()
-            }
-          "
-        >
-          reset
-        </button>
+        <ul class="tiny-grid__filter-panel custom-filter-panel">
+          <li class="filter-option__input">
+            <tiny-input
+              v-model="customFilterData.input"
+              placeholder="输入名称关键词筛选"
+              clearable
+              size="small"
+            />
+          </li>
+          <li class="tiny-grid__filter-option filter-option__btns">
+            <tiny-button type="primary" size="small" @click="data.context.commitFilter(customFilter)">
+              确定
+            </tiny-button>
+            <tiny-button size="small" @click="handleReset(data.context)">重置</tiny-button>
+            <tiny-button size="small" @click="handleClear(data.context)">清除全部</tiny-button>
+          </li>
+        </ul>
       </template>
     </tiny-grid-column>
     <tiny-grid-column field="area" title="区域"></tiny-grid-column>
@@ -35,7 +30,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyInput, TinyButton } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -89,4 +84,32 @@ const customFilter = ref({ method: customFilterMethod })
 function customFilterMethod({ row }) {
   return row.name.includes(customFilterData.value.input)
 }
+
+function handleReset(context) {
+  customFilterData.value.input = ''
+  context.resetFilter()
+}
+
+function handleClear(context) {
+  customFilterData.value.input = ''
+  context.clearFilter()
+}
 </script>
+
+<style scoped>
+.custom-filter-panel {
+  padding: 12px 16px;
+  min-width: 260px;
+}
+.custom-filter-panel .filter-option__input {
+  margin-bottom: 12px;
+}
+.custom-filter-panel .filter-option__input :deep(.tiny-input) {
+  width: 100%;
+}
+.custom-filter-panel .filter-option__btns {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+</style>

package/demos/pc/app/grid/filter/custom-filter.spec.js

@@ -7,6 +7,6 @@ test('列筛选规则', async ({ page }) => {
   await page.locator('.tiny-grid__filter-wrapper.filter__active input').click()
   await page.locator('.tiny-grid__filter-wrapper.filter__active input').press('CapsLock')
   await page.locator('.tiny-grid__filter-wrapper.filter__active input').fill('WWW')
-  await page.getByRole('button', { name: 'confirm' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await expect(page.getByRole('cell', { name: 'WWW 科技 YX 公司' })).toBeVisible()
 })

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

@@ -3,28 +3,23 @@
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称" :filter="customFilter">
       <template #filter="data">
-        <input v-model="customFilterData.input" />
-        <button @click="data.context.commitFilter(customFilter)">confirm</button>
-        <button
-          @click="
-            () => {
-              customFilterData.input = ''
-              data.context.clearFilter()
-            }
-          "
-        >
-          clear
-        </button>
-        <button
-          @click="
-            () => {
-              customFilterData.input = ''
-              data.context.resetFilter()
-            }
-          "
-        >
-          reset
-        </button>
+        <ul class="tiny-grid__filter-panel custom-filter-panel">
+          <li class="filter-option__input">
+            <tiny-input
+              v-model="customFilterData.input"
+              placeholder="输入名称关键词筛选"
+              clearable
+              size="small"
+            />
+          </li>
+          <li class="tiny-grid__filter-option filter-option__btns">
+            <tiny-button type="primary" size="small" @click="data.context.commitFilter(customFilter)">
+              确定
+            </tiny-button>
+            <tiny-button size="small" @click="handleReset(data.context)">重置</tiny-button>
+            <tiny-button size="small" @click="handleClear(data.context)">清除全部</tiny-button>
+          </li>
+        </ul>
       </template>
     </tiny-grid-column>
     <tiny-grid-column field="area" title="区域"></tiny-grid-column>
@@ -34,12 +29,14 @@
 </template>
 
 <script lang="jsx">
-import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyInput, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
     TinyGrid,
-    TinyGridColumn
+    TinyGridColumn,
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
@@ -96,7 +93,33 @@ export default {
   methods: {
     customFilterMethod({ row }) {
       return row.name.includes(this.customFilterData.input)
+    },
+    handleReset(context) {
+      this.customFilterData.input = ''
+      context.resetFilter()
+    },
+    handleClear(context) {
+      this.customFilterData.input = ''
+      context.clearFilter()
     }
   }
 }
 </script>
+
+<style scoped>
+.custom-filter-panel {
+  padding: 12px 16px;
+  min-width: 260px;
+}
+.custom-filter-panel .filter-option__input {
+  margin-bottom: 12px;
+}
+.custom-filter-panel .filter-option__input :deep(.tiny-input) {
+  width: 100%;
+}
+.custom-filter-panel .filter-option__btns {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid :data="tableData" @toolbar-button-click="toolbarButtonClickEvent">
+  <tiny-grid :data="tableData" :filter-popper-options="popperConfigs" @toolbar-button-click="toolbarButtonClickEvent">
     <template #toolbar>
       <tiny-grid-toolbar :buttons="toolbarButtons"> </tiny-grid-toolbar>
     </template>
@@ -30,6 +30,10 @@ const filteData = [
   { label: '韶关', value: '韶关' }
 ]
 
+const popperConfigs = {
+  bubbling: true
+}
+
 const toolbarButtons = ref([
   {
     code: 'clearFilter',

package/demos/pc/app/grid/filter/default-filter.spec.ts

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/test'
 test('表格过滤', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-filter#filter-default-filter')
+  await page.setViewportSize({ width: 1920, height: 1980 })
   await page
     .getByRole('cell', { name: '公司名称鼠标移入可以动态提示 tooltip，公司名称鼠标移入可以动态提示 tooltip' })
     .getByRole('img')

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid :data="tableData" @toolbar-button-click="toolbarButtonClickEvent">
+  <tiny-grid :data="tableData" :filter-popper-options="popperConfigs" @toolbar-button-click="toolbarButtonClickEvent">
     <template #toolbar>
       <tiny-grid-toolbar :buttons="toolbarButtons"> </tiny-grid-toolbar>
     </template>
@@ -37,6 +37,9 @@ export default {
   },
   data() {
     return {
+      popperConfigs: {
+        bubbling: true
+      },
       toolbarButtons: [
         {
           code: 'clearFilter',

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

@@ -0,0 +1,71 @@
+<template>
+  <tiny-grid :data="tableData" @filter-change="filterChangeEvent">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column
+      field="status"
+      title="状态"
+      :filter="statusFilter"
+      :formatter="statusFormatter"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="region"
+      title="区域"
+      :filter="regionFilter"
+      :formatter="regionFormatter"
+    ></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
+
+const tableData = ref([
+  { id: '1', status: 'active', region: 'east' },
+  { id: '2', status: 'inactive', region: 'south' },
+  { id: '3', status: 'active', region: 'west' },
+  { id: '4', status: 'pending', region: 'east' }
+])
+
+const statusFilter = ref({
+  multi: true,
+  enumable: true,
+  inputFilter: false,
+  defaultFilter: false,
+  label: 'name',
+  value: 'code',
+  values: [
+    { code: 'active', name: '已启用' },
+    { code: 'inactive', name: '已停用' },
+    { code: 'pending', name: '待审核' }
+  ]
+})
+
+const regionFilter = ref({
+  multi: true,
+  enumable: true,
+  inputFilter: false,
+  defaultFilter: false,
+  label: 'regionName',
+  value: 'regionCode',
+  values: [
+    { regionCode: 'east', regionName: '华东区' },
+    { regionCode: 'south', regionName: '华南区' },
+    { regionCode: 'west', regionName: '华西区' }
+  ]
+})
+
+function filterChangeEvent({ filters }) {
+  TinyModal.message({ message: `筛选条件：${JSON.stringify(filters)}`, status: 'info' })
+}
+
+function statusFormatter({ cellValue }) {
+  const map = { active: '已启用', inactive: '已停用', pending: '待审核' }
+  return map[cellValue] || cellValue
+}
+
+function regionFormatter({ cellValue }) {
+  const map = { east: '华东区', south: '华南区', west: '华西区' }
+  return map[cellValue] || cellValue
+}
+</script>

package/demos/pc/app/grid/filter/filter-label-value.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test'
+
+test('label/value 字段映射 - 状态列筛选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#filter-label-value-filter')
+
+  // 状态列使用 label:name value:code，选项显示 已启用/已停用/待审核
+  await page.getByRole('cell', { name: '状态' }).getByRole('img').first().click()
+  await page.getByTitle('已启用').click()
+  await page.getByRole('button', { name: '确定' }).click()
+
+  // 筛选 status=active 的行，应显示 2 条
+  await expect(page.locator('.tiny-grid-body__row:visible')).toHaveCount(2)
+})
+
+test('label/value 字段映射 - 区域列筛选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#filter-label-value-filter')
+
+  // 区域列使用 label:regionName value:regionCode
+  await page.getByRole('cell', { name: '区域' }).getByRole('img').first().click()
+  await page.getByTitle('华东区').click()
+  await page.getByRole('button', { name: '确定' }).click()
+
+  // 筛选 region=east 的行，应显示 2 条
+  await expect(page.locator('.tiny-grid-body__row:visible')).toHaveCount(2)
+})

package/demos/pc/app/grid/filter/filter-label-value.vue

@@ -0,0 +1,78 @@
+<template>
+  <tiny-grid :data="tableData" @filter-change="filterChangeEvent">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column
+      field="status"
+      title="状态"
+      :filter="statusFilter"
+      :formatter="statusFormatter"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="region"
+      title="区域"
+      :filter="regionFilter"
+      :formatter="regionFormatter"
+    ></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn
+  },
+  data() {
+    return {
+      tableData: [
+        { id: '1', status: 'active', region: 'east' },
+        { id: '2', status: 'inactive', region: 'south' },
+        { id: '3', status: 'active', region: 'west' },
+        { id: '4', status: 'pending', region: 'east' }
+      ],
+      // 使用 label/value 字段映射：后端返回 code/name，前端显示 name
+      statusFilter: {
+        multi: true,
+        enumable: true,
+        inputFilter: false,
+        defaultFilter: false,
+        label: 'name',
+        value: 'code',
+        values: [
+          { code: 'active', name: '已启用' },
+          { code: 'inactive', name: '已停用' },
+          { code: 'pending', name: '待审核' }
+        ]
+      },
+      regionFilter: {
+        multi: true,
+        enumable: true,
+        inputFilter: false,
+        defaultFilter: false,
+        label: 'regionName',
+        value: 'regionCode',
+        values: [
+          { regionCode: 'east', regionName: '华东区' },
+          { regionCode: 'south', regionName: '华南区' },
+          { regionCode: 'west', regionName: '华西区' }
+        ]
+      }
+    }
+  },
+  methods: {
+    filterChangeEvent({ filters }) {
+      TinyModal.message({ message: `筛选条件：${JSON.stringify(filters)}`, status: 'info' })
+    },
+    statusFormatter({ cellValue }) {
+      const map = { active: '已启用', inactive: '已停用', pending: '待审核' }
+      return map[cellValue] || cellValue
+    },
+    regionFormatter({ cellValue }) {
+      const map = { east: '华东区', south: '华南区', west: '华西区' }
+      return map[cellValue] || cellValue
+    }
+  }
+}
+</script>

package/demos/pc/app/grid/filter/input-filter-custom-component-composition-api.vue

@@ -0,0 +1,116 @@
+<template>
+  <tiny-grid :data="tableData" @filter-change="filterChangeEvent">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数" :filter="employeesFilter"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { h, ref } from 'vue'
+import { TinyGrid, TinyGridColumn, TinyInput, TinyModal } from '@opentiny/vue'
+
+// 范围输入组件：左最小值、右最大值，与 demo 同文件（使用 render 避免运行时编译）
+const RangeInput = {
+  name: 'RangeInput',
+  components: { TinyInput },
+  props: {
+    modelValue: {
+      type: [Object, String],
+      default: () => ({ min: '', max: '' })
+    }
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    rangeValue() {
+      const v = this.modelValue
+      if (!v || typeof v !== 'object') {
+        return { min: '', max: '' }
+      }
+      return { min: v.min ?? '', max: v.max ?? '' }
+    }
+  },
+  render() {
+    const { rangeValue } = this
+    return h('div', { class: 'range-input-wrapper' }, [
+      h(TinyInput, {
+        modelValue: rangeValue.min,
+        placeholder: '最小值',
+        size: 'small',
+        clearable: true,
+        'onUpdate:modelValue': (val) => {
+          this.$emit('update:modelValue', { ...rangeValue, min: val })
+        }
+      }),
+      h('span', { class: 'range-separator' }, '～'),
+      h(TinyInput, {
+        modelValue: rangeValue.max,
+        placeholder: '最大值',
+        size: 'small',
+        clearable: true,
+        'onUpdate:modelValue': (val) => {
+          this.$emit('update:modelValue', { ...rangeValue, max: val })
+        }
+      })
+    ])
+  }
+}
+
+const tableData = ref([
+  { id: '1', name: 'GFD 科技', city: '福州', employees: 200 },
+  { id: '2', name: 'WWW 科技', city: '深圳', employees: 500 },
+  { id: '3', name: 'RFV 公司', city: '中山', employees: 800 },
+  { id: '4', name: 'TGB 科技', city: '福州', employees: 350 },
+  { id: '5', name: 'YHN 科技', city: '韶关', employees: 1200 }
+])
+
+const employeesFilter = ref({
+  layout: 'input,base',
+  inputFilter: {
+    component: RangeInput,
+    attrs: {},
+    relation: 'range',
+    relations: [
+      {
+        label: '范围内',
+        value: 'range',
+        method: ({ value, input }) => {
+          if (!input || typeof input !== 'object') return true
+          const num = Number(value)
+          const minVal = input.min === '' || input.min === undefined ? null : Number(input.min)
+          const maxVal = input.max === '' || input.max === undefined ? null : Number(input.max)
+          if (isNaN(num)) return false
+          if (minVal !== null && !isNaN(minVal) && num < minVal) return false
+          if (maxVal !== null && !isNaN(maxVal) && num > maxVal) return false
+          return true
+        }
+      }
+    ]
+  }
+})
+
+function filterChangeEvent({ filters }) {
+  TinyModal.message({ message: `筛选条件：${JSON.stringify(filters)}`, status: 'info' })
+}
+</script>
+
+<style>
+/* 范围输入样式：筛选面板使用 popper 渲染，需非 scoped */
+.tiny-grid__filter-wrapper .range-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 0 8px;
+}
+.tiny-grid__filter-wrapper .range-input-wrapper .tiny-input {
+  flex: 1;
+  min-width: 90px;
+}
+.tiny-grid__filter-wrapper .range-input-wrapper .range-separator {
+  font-size: 12px;
+  color: var(--ti-common-color-text-placeholder, #adb0b8);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+</style>

package/demos/pc/app/grid/filter/input-filter-custom-component.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义输入组件 - 范围筛选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#filter-input-custom-component')
+
+  // 点击员工数列筛选图标
+  await page.getByRole('cell', { name: '员工数' }).getByRole('img').first().click()
+
+  // 等待筛选面板打开并填写范围：最小值 300，最大值 600
+  const filterPanel = page.locator('.tiny-grid__filter-wrapper.filter__active')
+  await filterPanel.waitFor({ state: 'visible' })
+  await filterPanel.getByPlaceholder('最小值').nth(1).fill('300')
+  await filterPanel.getByPlaceholder('最大值').nth(1).fill('600')
+
+  await filterPanel.getByRole('button', { name: '确定' }).click()
+
+  // 应显示员工数在 300-600 之间的行：500(WWW)、350(TGB)，使用 :visible 只统计可见行
+  await expect(page.locator('.tiny-grid-body__row:visible')).toHaveCount(2)
+})

package/demos/pc/app/grid/filter/input-filter-custom-component.vue

@@ -0,0 +1,126 @@
+<template>
+  <tiny-grid :data="tableData" @filter-change="filterChangeEvent">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数" :filter="employeesFilter"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { h } from 'vue'
+import { TinyGrid, TinyGridColumn, TinyInput, TinyModal } from '@opentiny/vue'
+
+// 范围输入组件：左最小值、右最大值，与 demo 同文件（使用 render 避免运行时编译）
+const RangeInput = {
+  name: 'RangeInput',
+  components: { TinyInput },
+  props: {
+    modelValue: {
+      type: [Object, String],
+      default: () => ({ min: '', max: '' })
+    }
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    rangeValue() {
+      const v = this.modelValue
+      if (!v || typeof v !== 'object') {
+        return { min: '', max: '' }
+      }
+      return { min: v.min ?? '', max: v.max ?? '' }
+    }
+  },
+  render() {
+    const { rangeValue } = this
+    return h('div', { class: 'range-input-wrapper' }, [
+      h(TinyInput, {
+        modelValue: rangeValue.min,
+        placeholder: '最小值',
+        size: 'small',
+        clearable: true,
+        'onUpdate:modelValue': (val) => {
+          this.$emit('update:modelValue', { ...rangeValue, min: val })
+        }
+      }),
+      h('span', { class: 'range-separator' }, '～'),
+      h(TinyInput, {
+        modelValue: rangeValue.max,
+        placeholder: '最大值',
+        size: 'small',
+        clearable: true,
+        'onUpdate:modelValue': (val) => {
+          this.$emit('update:modelValue', { ...rangeValue, max: val })
+        }
+      })
+    ])
+  }
+}
+
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn
+  },
+  data() {
+    return {
+      tableData: [
+        { id: '1', name: 'GFD 科技', city: '福州', employees: 200 },
+        { id: '2', name: 'WWW 科技', city: '深圳', employees: 500 },
+        { id: '3', name: 'RFV 公司', city: '中山', employees: 800 },
+        { id: '4', name: 'TGB 科技', city: '福州', employees: 350 },
+        { id: '5', name: 'YHN 科技', city: '韶关', employees: 1200 }
+      ],
+      employeesFilter: {
+        layout: 'input,base',
+        inputFilter: {
+          component: RangeInput,
+          attrs: {},
+          relation: 'range',
+          relations: [
+            {
+              label: '范围内',
+              value: 'range',
+              method: ({ value, input }) => {
+                if (!input || typeof input !== 'object') return true
+                const num = Number(value)
+                const minVal = input.min === '' || input.min === undefined ? null : Number(input.min)
+                const maxVal = input.max === '' || input.max === undefined ? null : Number(input.max)
+                if (isNaN(num)) return false
+                if (minVal !== null && !isNaN(minVal) && num < minVal) return false
+                if (maxVal !== null && !isNaN(maxVal) && num > maxVal) return false
+                return true
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  methods: {
+    filterChangeEvent({ filters }) {
+      TinyModal.message({ message: `筛选条件：${JSON.stringify(filters)}`, status: 'info' })
+    }
+  }
+}
+</script>
+
+<style>
+/* 范围输入样式：筛选面板使用 popper 渲染，需非 scoped */
+.tiny-grid__filter-wrapper .range-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 0 8px;
+}
+.tiny-grid__filter-wrapper .range-input-wrapper .tiny-input {
+  flex: 1;
+  min-width: 90px;
+}
+.tiny-grid__filter-wrapper .range-input-wrapper .range-separator {
+  font-size: 12px;
+  color: var(--ti-common-color-text-placeholder, #adb0b8);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+</style>