docs(grid): [grid] update grid docs (#996)

* docs(grid): [grid] update grid docs

* docs(grid): [grid] update grid docs

examples/sites/demos/pc/app/grid/data-source/static-data-composition-api.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
 
 const tableData = ref([
   {

examples/sites/demos/pc/app/grid/expand/expand-config-composition-api.vue

@@ -84,7 +84,7 @@ onMounted(() => {
 
   allData.forEach((item, index) => {
     if (index % 2 === 0) {
-      expandConfigData.value.expandRowKeys.push(item._RID) // 添加默认展开指定行
+      expandConfigData.expandRowKeys.push(item._RID) // 添加默认展开指定行
     }
   })
 })

examples/sites/demos/pc/app/grid/filter/simple-date-filter.spec.ts

@@ -4,29 +4,11 @@ test('简化版筛选面板-时间日期菜单', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-filter#filter-simple-date-filter')
   await page.getByRole('cell', { name: '开始时间' }).getByRole('img').click()
-  await page
-    .locator('li')
-    .filter({
-      hasText: '开始日期2023 年11 月日一二三四五六29303112345678910111213141516171819202122232425262728293012'
-    })
-    .getByRole('textbox')
-    .click()
-  await page.getByRole('textbox', { name: '选择日期' }).click()
+  await page.locator('.tiny-input__suffix-inner').nth(0).click()
   await page.getByRole('textbox', { name: '选择日期' }).fill('2021-12-03')
-  await page.getByRole('textbox', { name: '选择时间' }).click()
   await page.getByRole('button', { name: '确定' }).nth(1).click()
-  await page.getByRole('button', { name: '确定' }).nth(1).click()
-  await page
-    .locator('li')
-    .filter({
-      hasText: '结束日期2023 年11 月日一二三四五六29303112345678910111213141516171819202122232425262728293012'
-    })
-    .getByRole('textbox')
-    .click()
-  await page.getByRole('textbox', { name: '选择日期' }).click()
+  await page.locator('.tiny-input__suffix-inner').nth(1).click()
   await page.getByRole('textbox', { name: '选择日期' }).fill('2023-11-19')
-  await page.getByRole('textbox', { name: '选择时间' }).click()
-  await page.getByRole('button', { name: '确定' }).nth(1).click()
   await page.getByRole('button', { name: '确定' }).nth(1).click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.getByRole('cell', { name: 'Elisa Menez' }).getByText('Elisa Menez')).toBeVisible()

examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue

@@ -30,7 +30,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {

examples/sites/demos/pc/app/grid/operation-column/selection-config.vue

@@ -29,13 +29,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { Grid, GridColumn } from '@opentiny/vue'
 
 export default {
   components: {
     TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGridColumn: GridColumn
   },
   data() {
     const tableData = [

examples/sites/demos/pc/app/grid/slot/editor-slot-composition-api.vue

@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn, Input as TinyInput } from '@opentiny/vue'
 

examples/sites/demos/pc/app/grid/slot/header-slot-composition-api.vue

@@ -5,7 +5,9 @@
       <tiny-grid-column field="name" title="名称"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工人数"></tiny-grid-column>
       <tiny-grid-column field="area" title="所属区域">
-        <template #header> <icon-mark-on></icon-mark-on> <span class="location-area">位置区域</span> </template>
+        <template #header>
+          <tiny-icon-mark-on></tiny-icon-mark-on> <span class="location-area">位置区域</span>
+        </template>
       </tiny-grid-column>
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
@@ -70,6 +72,7 @@ const tableData = ref([
 ])
 const TinyIconMarkOn = IconMarkOn()
 </script>
+
 <style scoped>
 .location-area {
   margin-left: 10px;

examples/sites/demos/pc/app/grid/slot/header-slot.vue

@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, GridColumn } from '@opentiny/vue'
 import { IconMarkOn } from '@opentiny/vue-icon'
 
@@ -79,6 +79,7 @@ export default {
   }
 }
 </script>
+
 <style scoped>
 .location-area {
   margin-left: 10px;