@opentiny/vue-docs 3.23.0 → 3.24.0

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

@@ -1,100 +1,55 @@
 <template>
-  <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: 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="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-    <tiny-grid-column
-      field="boole"
-      title="布尔值"
-      align="center"
-      format-text="boole"
-      :editor="checkboxEdit"
-    ></tiny-grid-column>
-  </tiny-grid>
+  <div>
+    <tiny-grid
+      :data="tableData"
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+      height="420px"
+      :tiny_mcp_config="{
+        server,
+        business: {
+          id: 'company-information',
+          description: '公司人员信息表'
+        }
+      }"
+    >
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="company" title="公司名称"></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="城市"></tiny-grid-column>
+    </tiny-grid>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
+import { ref } from 'vue'
 import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
-import { reactive } from 'vue'
+import { useNextServer } from '@opentiny/next-vue'
 
-const tableData = reactive([
-  {
-    id: '1',
-    name: 'GFD 科技 YX 公司',
-    city: '福州',
-    employees: 800,
-    createdDate: '2014-04-30 00:56:00',
-    boole: false
-  },
-  {
-    id: '2',
-    name: 'WWW 科技 YX 公司',
-    city: '深圳',
-    employees: 300,
-    createdDate: '2016-07-08 12:36:22',
-    boole: true
-  },
-  {
-    id: '3',
-    name: 'RFV 有限责任公司',
-    city: '中山',
-    employees: 1300,
-    createdDate: '2014-02-14 14:14:14',
-    boole: false
-  },
-  {
-    id: '4',
-    name: 'TGB 科技 YX 公司',
-    city: '龙岩',
-    employees: 360,
-    createdDate: '2013-01-13 13:13:13',
-    boole: true
-  },
-  {
-    id: '5',
-    name: 'YHN 科技 YX 公司',
-    city: '韶关',
-    employees: 810,
-    createdDate: '2012-12-12 12:12:12',
-    boole: true
-  },
-  {
-    id: '6',
-    name: 'WSX 科技 YX 公司',
-    city: '黄冈',
-    employees: 800,
-    createdDate: '2011-11-11 11:11:11',
-    boole: true
-  },
-  {
-    id: '7',
-    name: 'KBG 物业 YX 公司',
-    city: '赤壁',
-    employees: 400,
-    createdDate: '2016-04-30 23:56:00',
-    boole: false
-  },
-  {
-    id: '8',
-    name: '深圳市福德宝网络技术 YX 公司',
-    boole: true,
-    city: '厦门',
-    createdDate: '2016-06-03 13:53:25',
-    employees: 540
-  }
-])
+// 初始化表格数据
+const _table = [
+  { company: 'GFD 有限责任公司', city: '广州', employees: 800, createdDate: '2014-04-30 00:56:00' },
+  { company: 'AWE 有限责任公司', city: '深圳', employees: 500, createdDate: '2015-05-01 01:01:01' },
+  { company: 'ASD 有限责任公司', city: '中山', employees: 400, createdDate: '2013-03-03 03:03:03' },
+  { company: 'ZXC 有限责任公司', city: '广州', employees: 1000, createdDate: '2012-02-02 02:02:02' },
+  { company: 'VBN 有限责任公司', city: '深圳', employees: 600, createdDate: '2011-01-01 01:01:01' },
+  { company: 'QWE 有限责任公司', city: '中山', employees: 700, createdDate: '2016-08-08 08:08:08' },
+  { company: 'RTY 有限责任公司', city: '广州', employees: 900, createdDate: '2015-09-09 09:09:09' },
+  { company: 'UIO 有限责任公司', city: '深圳', employees: 1100, createdDate: '2014-10-10 10:10:10' },
+  { company: 'HJK 有限责任公司', city: '中山', employees: 1200, createdDate: '2013-11-11 11:11:11' },
+  { company: 'WWW 有限责任公司', city: '深圳', employees: 300, createdDate: '2016-07-08 12:36:22' },
+  { company: 'RFV 有限责任公司', city: '中山', employees: 1300, createdDate: '2014-02-14 14:14:14' },
+  { company: 'TGB 有限责任公司', city: '广州', employees: 360, createdDate: '2013-01-13 13:13:13' },
+  { company: 'YHN 有限责任公司', city: '深圳', employees: 810, createdDate: '2012-12-12 12:12:12' },
+  { company: 'WSX 有限责任公司', city: '中山', employees: 800, createdDate: '2011-11-11 11:11:11' },
+  { company: 'KBG 有限责任公司', city: '深圳', employees: 400, createdDate: '2014-04-30 23:56:00' },
+  { company: 'SZB 有限责任公司', city: '深圳', employees: 1400, createdDate: '2016-06-03 13:53:25' }
+]
 
-function checkboxEdit(h, { row }) {
-  return (
-    <input
-      type="checkbox"
-      checked={row.boole}
-      onChange={(event) => {
-        row.boole = event.target.checked
-      }}
-    />
-  )
-}
+const tableData = ref(_table)
+
+const { server } = useNextServer({
+  serverInfo: { name: 'company-information', version: '1.0.0' }
+})
 </script>

package/demos/pc/app/grid/base/basic-usage.spec.js

@@ -4,5 +4,5 @@ test('标签式表格', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid#base-basic-usage')
 
-  await expect(page.getByRole('row', { name: '1 800 2014-04-30 00:56:00 福州' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'GFD 有限责任公司' })).toBeVisible()
 })

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

@@ -1,21 +1,17 @@
 <template>
-  <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: 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="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-    <tiny-grid-column
-      field="boole"
-      title="布尔值"
-      align="center"
-      format-text="boole"
-      :editor="checkboxEdit"
-    ></tiny-grid-column>
-  </tiny-grid>
+  <div>
+    <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" height="420px">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="company" title="公司名称"></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="城市"></tiny-grid-column>
+    </tiny-grid>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
@@ -24,125 +20,26 @@ export default {
     TinyGridColumn
   },
   data() {
-    const tableData = [
-      {
-        id: '1',
-        name: 'GFD 科技 YX 公司',
-        city: '福州',
-        employees: 800,
-        createdDate: '2014-04-30 00:56:00',
-        boole: false
-      },
-      {
-        id: '2',
-        name: 'WWW 科技 YX 公司',
-        city: '深圳',
-        employees: 300,
-        createdDate: '2016-07-08 12:36:22',
-        boole: true
-      },
-      {
-        id: '3',
-        name: 'RFV 有限责任公司',
-        city: '中山',
-        employees: 1300,
-        createdDate: '2014-02-14 14:14:14',
-        boole: false
-      },
-      {
-        id: '4',
-        name: 'TGB 科技 YX 公司',
-        city: '龙岩',
-        employees: 360,
-        createdDate: '2013-01-13 13:13:13',
-        boole: true
-      },
-      {
-        id: '5',
-        name: 'YHN 科技 YX 公司',
-        city: '韶关',
-        employees: 810,
-        createdDate: '2012-12-12 12:12:12',
-        boole: true
-      },
-      {
-        id: '6',
-        name: 'WSX 科技 YX 公司',
-        city: '黄冈',
-        employees: 800,
-        createdDate: '2011-11-11 11:11:11',
-        boole: true
-      },
-      {
-        id: '7',
-        name: 'KBG 物业 YX 公司',
-        city: '赤壁',
-        employees: 400,
-        createdDate: '2016-04-30 23:56:00',
-        boole: false
-      },
-      {
-        id: '8',
-        name: '深圳市福德宝网络技术 YX 公司',
-        boole: true,
-        city: '厦门',
-        createdDate: '2016-06-03 13:53:25',
-        employees: 540
-      }
+    const _table = [
+      { company: 'GFD 有限责任公司', city: '广州', employees: 800, createdDate: '2014-04-30 00:56:00' },
+      { company: 'AWE 有限责任公司', city: '深圳', employees: 500, createdDate: '2015-05-01 01:01:01' },
+      { company: 'ASD 有限责任公司', city: '中山', employees: 400, createdDate: '2013-03-03 03:03:03' },
+      { company: 'ZXC 有限责任公司', city: '广州', employees: 1000, createdDate: '2012-02-02 02:02:02' },
+      { company: 'VBN 有限责任公司', city: '深圳', employees: 600, createdDate: '2011-01-01 01:01:01' },
+      { company: 'QWE 有限责任公司', city: '中山', employees: 700, createdDate: '2016-08-08 08:08:08' },
+      { company: 'RTY 有限责任公司', city: '广州', employees: 900, createdDate: '2015-09-09 09:09:09' },
+      { company: 'UIO 有限责任公司', city: '深圳', employees: 1100, createdDate: '2014-10-10 10:10:10' },
+      { company: 'HJK 有限责任公司', city: '中山', employees: 1200, createdDate: '2013-11-11 11:11:11' },
+      { company: 'WWW 有限责任公司', city: '深圳', employees: 300, createdDate: '2016-07-08 12:36:22' },
+      { company: 'RFV 有限责任公司', city: '中山', employees: 1300, createdDate: '2014-02-14 14:14:14' },
+      { company: 'TGB 有限责任公司', city: '广州', employees: 360, createdDate: '2013-01-13 13:13:13' },
+      { company: 'YHN 有限责任公司', city: '深圳', employees: 810, createdDate: '2012-12-12 12:12:12' },
+      { company: 'WSX 有限责任公司', city: '中山', employees: 800, createdDate: '2011-11-11 11:11:11' },
+      { company: 'KBG 有限责任公司', city: '深圳', employees: 400, createdDate: '2014-04-30 23:56:00' },
+      { company: 'SZB 有限责任公司', city: '深圳', employees: 1400, createdDate: '2016-06-03 13:53:25' }
     ]
-
     return {
-      op: {
-        editConfig: {
-          trigger: 'click',
-          mode: 'cell',
-          showStatus: true
-        },
-        columns: [
-          {
-            type: 'index',
-            width: 60
-          },
-          {
-            type: 'selection',
-            width: 60
-          },
-          {
-            field: 'employees',
-            title: '员工数'
-          },
-          {
-            field: 'createdDate',
-            title: '创建日期'
-          },
-          {
-            field: 'city',
-            title: '城市'
-          },
-          {
-            field: 'boole',
-            title: '布尔值',
-            align: 'center',
-            formatText: 'boole',
-            editor: this.checkboxEdit
-          }
-        ],
-        data: tableData
-      },
-      tableData
-    }
-  },
-  methods: {
-    checkboxEdit(h, { row }) {
-      return (
-        <input
-          type="checkbox"
-          checked={row.boole}
-          onChange={(event) => {
-            row.boole = event.target.checked
-          }}
-        />
-      )
+      tableData: _table
     }
   }
 }

package/demos/pc/app/grid/dynamically-columns/dynamically-columns.spec.js

@@ -4,7 +4,7 @@ test('根据日期动态生成列', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-dynamically-columns#dynamically-columns-dynamically-columns')
   await page.getByRole('textbox').nth(1).click()
-  await page.getByText('十二月').first().click()
-  await page.getByText('二月').nth(2).click()
-  await expect(page.getByRole('cell', { name: '12' })).toBeVisible()
+  await page.getByText('12 月').first().click()
+  await page.getByText('2 月').nth(2).click()
+  await expect(page.getByRole('cell', { name: '12' }).first()).toBeVisible()
 })

package/demos/pc/app/grid/webdoc/grid-ai-agent.js

@@ -0,0 +1,23 @@
+export default {
+  column: '1',
+  owner: '',
+  demos: [
+    {
+      demoId: 'grid-ai-agent',
+      name: { 'zh-CN': '表格智能体', 'en-US': 'grid agent' },
+      desc: {
+        'zh-CN': `表格智能体是表格组件面向 AI 领域的应用，提供了一个基于表格数据的智能体交互界面。用户可以通过自然语言与表格进行交互，智能体会根据表格内容和用户输入执行操作。<br>
+        目前表格智能体支持的操作包括：<br>
+        - 查询表格数据：用户可以输入自然语言查询表格中的数据，智能体会解析查询并返回结果，以及根据结果执行后续的操作。<br>
+        - 滚动到指定行：用户可以通过自然语言指令，将表格滚动到指定位置。<br>    
+        - 选中表格数据：用户可以通过自然语言指令，选中表格数据。<br>    
+        - 选中全部数据：用户可以通过自然语言指令，选中全部数据。<br>    
+
+        通过属性 <code>tiny_mcp_config</code> 可以配置表格的业务意义以及传入<code>server</code>对象，详见示例。`,
+        'en-US': ``
+      },
+      codeFiles: ['ai-agent/basic-usage.vue']
+    }
+  ],
+  apis: [{ name: 'grid-ai-agent', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
+}

package/demos/pc/app/popeditor/condition-layout-composition-api.vue

@@ -8,6 +8,7 @@
     text-field="name"
     value-field="id"
     :conditions="conditions"
+    :lock-scroll="false"
   ></tiny-popeditor>
 </template>
 

package/demos/pc/app/popeditor/condition-layout.spec.ts

@@ -11,6 +11,7 @@ test('PopEditor 布局与配置', async ({ page }) => {
   const rightLayout = dialogBox.locator('.tiny-popeditor-body__right')
 
   await textBox.click()
+  await expect(page.locator('body')).not.toHaveClass(/dialog-box__scroll-lock/)
   await expect(dialogBox).toBeVisible()
   await expect(leftLayout).toBeVisible()
   await expect(rightLayout).toBeVisible()

package/demos/pc/app/popeditor/condition-layout.vue

@@ -8,6 +8,7 @@
     text-field="name"
     value-field="id"
     :conditions="conditions"
+    :lock-scroll="false"
   ></tiny-popeditor>
 </template>
 

package/demos/pc/app/popeditor/webdoc/popeditor.js

@@ -38,9 +38,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>conditions</code> 项目里属性里的 <code>span</code> 配置栅格，<code>labelWidth</code> 配置 label 宽度，<code>component</code>配置自定义组件，并通过 <code>attrs</code> 配置组件属性。</p>',
+          '<p>通过 <code>conditions</code> 项目里属性里的 <code>span</code> 配置栅格，<code>labelWidth</code> 配置 label 宽度，<code>component</code>配置自定义组件，并通过 <code>attrs</code> 配置组件属性。<code>lock-scroll</code> 配置弹出窗口时是否禁用滚动条。</p>',
         'en-US':
-          '<p>Set <code>span</code> in the attributes of the <code>condition</code> project to configure the grid and <code>labelWidth</code> to configure the label width. <code>component</code>Configure custom components and set component attributes through <code>attrs</code></p>'
+          '<p>Set <code>span</code> in the attributes of the <code>condition</code> project to configure the grid and <code>labelWidth</code> to configure the label width. <code>component</code>Configure custom components and set component attributes through <code>attrs</code>.<code>lock-scroll</code>Configure whether to disable the scrollbar when a pop-up window appears.</p>'
       },
       codeFiles: ['condition-layout.vue']
     },

package/demos/pc/app/qr-code/style-composition-api.vue

@@ -1,14 +1,25 @@
 <template>
-  <tiny-qr-code v-bind="params"></tiny-qr-code>
+  <div class="qr-code-container">
+    <div>
+      <tiny-button @click="changeColor">改变颜色</tiny-button>
+    </div>
+    <br />
+    <tiny-qr-code v-bind="params"></tiny-qr-code>
+  </div>
 </template>
 
 <script setup>
-import { TinyQrCode } from '@opentiny/vue'
+import { TinyQrCode, TinyButton } from '@opentiny/vue'
+import { ref } from 'vue'
 
-const params = {
+const params = ref({
   value: '测试二维码数据',
   color: '#1677ff',
   size: 250,
   style: { background: '#f5f5f5', padding: '24px' }
+})
+
+const changeColor = () => {
+  params.value.color = '#666'
 }
 </script>

package/demos/pc/app/qr-code/style.vue

@@ -1,13 +1,20 @@
 <template>
-  <tiny-qr-code v-bind="params"></tiny-qr-code>
+  <div class="qr-code-container">
+    <div>
+      <tiny-button @click="changeColor">改变颜色</tiny-button>
+    </div>
+    <br />
+    <tiny-qr-code v-bind="params"></tiny-qr-code>
+  </div>
 </template>
 
 <script>
-import { TinyQrCode } from '@opentiny/vue'
+import { TinyQrCode, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyQrCode
+    TinyQrCode,
+    TinyButton
   },
   data() {
     return {
@@ -18,6 +25,11 @@ export default {
         style: { background: '#f5f5f5', padding: '24px' }
       }
     }
+  },
+  methods: {
+    changeColor() {
+      this.params.color = '#666'
+    }
   }
 }
 </script>

package/demos/pc/app/text-popup/{value.spec.ts → modelValue.spec.ts}

@@ -2,9 +2,9 @@ import { test, expect } from '@playwright/test'
 
 test('Textpopup 基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('text-popup#value')
+  await page.goto('text-popup#modelValue')
 
-  const preview = page.locator('#value')
+  const preview = page.locator('#modelValue')
   const small = preview.locator('input')
   const larger = preview.locator('textarea')
 

package/demos/pc/app/text-popup/webdoc/text-popup.js

@@ -55,16 +55,16 @@ export default {
       codeFiles: ['separtor.vue']
     },
     {
-      demoId: 'value',
+      demoId: 'modelValue',
       name: {
         'zh-CN': '绑定值',
         'en-US': 'Bound Value'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>value</code> 或 <code>v-model</code> 设置绑定值。</p>\n',
-        'en-US': '<p>You can set the binding value using <code>value</code> or <code>v-model</code>. </p>\n'
+        'zh-CN': '<p>通过 <code>modelValue</code> 或 <code>v-model</code> 设置绑定值。</p>\n',
+        'en-US': '<p>You can set the binding value using <code>modelValue</code> or <code>v-model</code>. </p>\n'
       },
-      codeFiles: ['value.vue']
+      codeFiles: ['modelValue.vue']
     },
     {
       demoId: 'clear-value',
@@ -76,7 +76,7 @@ export default {
         'zh-CN': '详细用法参考如下示例',
         'en-US': 'For details, see the following example.'
       },
-      codeFiles: ['clear-value.vue']
+      codeFiles: ['clear-modelValue.vue']
     },
     {
       demoId: 'width',
@@ -98,12 +98,12 @@ export default {
       support: {
         value: true
       },
-      description: '通过 value 或 v-model 设置绑定值，通过 placeholder 设置提示占位文本。',
+      description: '通过 modelValue 或 v-model 设置绑定值，通过 placeholder 设置提示占位文本。',
       cloud: {
         value: false
       },
-      apis: ['value', 'v-model', 'placeholder'],
-      demos: ['basic-usage', 'value', 'placeholder']
+      apis: ['modelValue', 'v-model', 'placeholder'],
+      demos: ['basic-usage', 'modelValue', 'placeholder']
     },
     {
       id: 'readonly',