docs(grid): add grid customs doc and demo

examples/sites/demos/apis/grid.js

@@ -159,6 +159,19 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'grid-faq#custom-column'
         },
+        {
+          name: 'customs',
+          typeAnchorName: 'ICustomConfig',
+          type: 'ICustomConfig[]',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '表格的初始化个性配置，可以控制表格列是否隐藏，设置列宽。优先级高于grid-column上的配置。',
+            'en-US':
+              'Initialize the table personalized configuration to control whether the table columns are hidden and set the column width. It takes precedence over the configuration on grid-column.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'grid-faq#custom-column'
+        },
         {
           name: 'data',
           typeAnchorName: 'IRow',
@@ -4212,6 +4225,19 @@ interface ICellClassNameArgs {
   // 单元格所在行的序号
   seq: number
   $seq: string // 已弃用
+}`
+    },
+    {
+      name: 'ICustomConfig',
+      type: 'type',
+      code: `
+interface ICustomConfig {
+  // 表格列字段
+  property: string
+  // 是否显示
+  visible?: boolean
+  // 列宽
+  width?: number | string
 }`
     }
   ]

examples/sites/demos/pc/app/grid/custom/default-customs-composition-api.vue

@@ -0,0 +1,66 @@
+<template>
+  <tiny-grid :data="tableData" :resizable="true" :customs="customs">
+    <template #toolbar>
+      <tiny-grid-toolbar id="default-customs" :resizable="{ storage: true }" setting></tiny-grid-toolbar>
+    </template>
+    <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    <tiny-grid-column field="address" :resizable="false" title="地址"></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const customs = ref([
+  { property: 'name', visible: false },
+  { property: 'employees', width: 200 }
+])
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD 科技 YX 公司',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+    employees: 800
+  },
+  {
+    id: '2',
+    name: 'WWW 科技 YX 公司',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+    employees: 300
+  },
+  {
+    id: '3',
+    name: 'RFV 有限责任公司',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+    employees: 1300
+  },
+  {
+    id: '4',
+    name: 'TGB 科技 YX 公司',
+    address: '龙岩',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+    employees: 360
+  },
+  {
+    id: '5',
+    name: 'YHN 科技 YX 公司',
+    address: '韶关',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+    employees: 810
+  },
+  {
+    id: '6',
+    name: 'WSX 科技 YX 公司',
+    address: '黄冈',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+    employees: 800
+  }
+])
+</script>

examples/sites/demos/pc/app/grid/custom/default-customs.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('初始化个性配置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-custom#custom-default-csutoms')
+  const demo = page.locator('#custom-default-csutoms')
+  await expect(demo.getByRole('cell', { name: '名称' })).not.toBeVisible()
+  await expect(page.getByRole('cell', { name: '员工数' })).toBeVisible()
+})

examples/sites/demos/pc/app/grid/custom/default-customs.vue

@@ -0,0 +1,75 @@
+<template>
+  <tiny-grid :data="tableData" :resizable="true" :customs="customs">
+    <template #toolbar>
+      <tiny-grid-toolbar id="default-customs" :resizable="{ storage: true }" setting></tiny-grid-toolbar>
+    </template>
+    <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    <tiny-grid-column field="address" :resizable="false" title="地址"></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
+  },
+  data() {
+    return {
+      customs: [
+        { property: 'name', visible: false },
+        { property: 'employees', width: 200 }
+      ],
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD 科技 YX 公司',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+          employees: 800
+        },
+        {
+          id: '2',
+          name: 'WWW 科技 YX 公司',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+          employees: 300
+        },
+        {
+          id: '3',
+          name: 'RFV 有限责任公司',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+          employees: 1300
+        },
+        {
+          id: '4',
+          name: 'TGB 科技 YX 公司',
+          address: '龙岩',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+          employees: 360
+        },
+        {
+          id: '5',
+          name: 'YHN 科技 YX 公司',
+          address: '韶关',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+          employees: 810
+        },
+        {
+          id: '6',
+          name: 'WSX 科技 YX 公司',
+          address: '黄冈',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+          employees: 800
+        }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/grid/webdoc/grid-custom.js

@@ -13,6 +13,17 @@ export default {
       },
       codeFiles: ['custom/column-width.vue']
     },
+    {
+      demoId: 'custom-default-csutoms',
+      name: { 'zh-CN': '初始化个性配置', 'en-US': 'Initialize personal configuration' },
+      desc: {
+        'zh-CN':
+          '<p>在 <code>grid</code> 标签上配置 <code>customs</code> 可以设置表格的初始化个性配置，可以控制表格列的隐藏，列宽等。</p>\n',
+        'en-US':
+          '<p>Configure <code>resizable=&quot;true&quot;</code> on the <code>grid</code> tag to adjust the column width, and configure <code>resizable=&quot;{storage: true}&quot;</code> on the <code>toolbar</code> tag to save the column width in <code>localStorage</code> on the local host. The column width of the table on the refreshed page is displayed based on the column width after being dragged.</p>\n'
+      },
+      codeFiles: ['custom/default-customs.vue']
+    },
     {
       demoId: 'custom-column-simple',
       name: { 'zh-CN': '简化版列设置', 'en-US': 'Manually Reset Columns' },

examples/sites/demos/pc/app/grid/webdoc/grid-editor.js

@@ -7,7 +7,7 @@ export default {
       name: { 'zh-CN': '内置编辑器', 'en-US': 'Grid-editor-built-in editor' },
       desc: {
         'zh-CN': `
-        <p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。</p>
+        <p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件，<code>attrs</code>配置组件的属性， <code>events</code> 配置组件事件。</p>
         <div class="tip custom-block">
           <p class="custom-block-title">特别说明：</p>
           <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件且均为浏览器原生组件并非 TinyVue 组件，需要使用其他组件可参考自定义编辑器。</p>
@@ -23,7 +23,7 @@ export default {
       name: { 'zh-CN': '自定义编辑器', 'en-US': 'Introducing the TINY component as the editor' },
       desc: {
         'zh-CN': `
-        <p> <code>grid</code> 标签上配置 <code>edit-config</code>。\n在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染自定义编辑组件或者 TinyVue 提供的组件。</p>
+        <p> <code>grid</code> 标签上配置 <code>edit-config</code>。\n在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染自定义编辑组件或者 TinyVue 提供的组件。<code>attrs</code>配置组件的属性， <code>events</code> 配置组件事件。</p>
         `,
         'en-US':
           '<p>Introduces the TinyVue <code>Select</code> component through <code>attribute configuration</code>. </p>\n'