@opentiny/vue-docs 3.26.8 → 3.27.0

package/demos/pc/app/query-builder/limit.vue

@@ -0,0 +1,555 @@
+<template>
+  <div>
+    <tiny-query-builder ref="queryBuilder" max-height="400" :config="config" :query="query"></tiny-query-builder>
+  </div>
+</template>
+
+<script>
+import { TinyQueryBuilder } from '@opentiny/vue'
+import { random } from '@opentiny/utils'
+
+export default {
+  components: {
+    TinyQueryBuilder
+  },
+  data() {
+    return {
+      config,
+      query: this.getInitialQuery()
+    }
+  },
+  methods: {
+    getInitialQuery() {
+      const initialQuery = {
+        id: generateID(),
+        combinator: 'and',
+        not: false,
+        rules: [
+          {
+            id: generateID(),
+            field: 'firstName',
+            value: 'Stev',
+            operator: 'beginsWith'
+          },
+          {
+            id: generateID(),
+            field: 'lastName',
+            value: 'Vai, Vaughan',
+            operator: 'in'
+          },
+          {
+            id: generateID(),
+            field: 'age',
+            operator: '>',
+            value: '28'
+          },
+          {
+            id: generateID(),
+            combinator: 'or',
+            rules: [
+              {
+                id: generateID(),
+                field: 'isMusician',
+                operator: '=',
+                value: true
+              },
+              {
+                id: generateID(),
+                field: 'instrument',
+                operator: '=',
+                value: 'Guitar'
+              }
+            ]
+          },
+          {
+            id: generateID(),
+            rules: [
+              {
+                id: generateID(),
+                field: 'isMusician',
+                value: true,
+                operator: '='
+              },
+              {
+                id: generateID(),
+                field: 'instrument',
+                value: 'Guitar',
+                operator: '='
+              }
+            ],
+            combinator: 'or'
+          },
+          {
+            id: generateID(),
+            field: 'groupedField1',
+            operator: '=',
+            value: 'groupedField4',
+            valueSource: 'field'
+          },
+          {
+            id: generateID(),
+            field: 'birthdate',
+            operator: 'between',
+            value: '1954-10-03,1960-06-06'
+          }
+        ]
+      }
+
+      return initialQuery
+    }
+  }
+}
+
+const generateID = () =>
+  '00-0-4-2-000'.replace(/[^-]/g, (s) => (((random() + ~~s) * 0x10000) >> s).toString(16).padStart(4, '0'))
+
+const operators = [
+  { name: '=', label: '等于' },
+  { name: '!=', label: '不等于' },
+  { name: '<', label: '小于' },
+  { name: '>', label: '大于' },
+  { name: '<=', label: '小于等于' },
+  { name: '>=', label: '大于等于' },
+  { name: 'contains', label: '包含' },
+  { name: 'beginsWith', label: '开头为' },
+  { name: 'endsWith', label: '结束为' },
+  { name: 'doesNotContain', label: '不包含' },
+  { name: 'null', label: '为空' },
+  { name: 'notNull', label: '不为空' },
+  { name: 'between', label: '介于' },
+  { name: 'in', label: 'in' },
+  { name: 'notIn', label: 'not in' }
+]
+
+const config = {
+  operators,
+  groupLimit: 3,
+  ruleLimit: 7,
+  showLockButtons: false,
+  combinators: [
+    {
+      name: 'and',
+      label: '且'
+    },
+    {
+      name: 'or',
+      label: '或'
+    }
+  ],
+  fields: [
+    {
+      name: 'firstName',
+      label: 'First Name',
+      placeholder: '请输入',
+      validator: (r) => !!r.value
+    },
+    {
+      name: 'lastName',
+      label: 'Last Name',
+      placeholder: 'Enter last name',
+      defaultOperator: 'beginsWith',
+      validator: (r) => !!r.value
+    },
+    {
+      name: 'age',
+      label: 'Age',
+      inputType: 'number',
+      validator: (r) => !!r.value
+    },
+    {
+      name: 'isMusician',
+      label: 'Is a musician',
+      valueEditorType: 'checkbox',
+      operators: [
+        {
+          name: '=',
+          label: '='
+        }
+      ],
+      defaultValue: false,
+      validator: (r) => !!r.value
+    },
+    {
+      name: 'instrument',
+      label: 'Primary instrument',
+      valueEditorType: 'select',
+      values: [
+        {
+          label: 'Percussion instruments',
+          options: [
+            {
+              name: 'Tambourine',
+              label: 'Tambourine'
+            },
+            {
+              name: 'Triangle',
+              label: 'Triangle'
+            },
+            {
+              name: 'Vibraphone',
+              label: 'Vibraphone'
+            },
+            {
+              name: 'Washboard',
+              label: 'Washboard'
+            },
+            {
+              name: 'Wood block',
+              label: 'Wood block'
+            },
+            {
+              name: 'Wooden fish',
+              label: 'Wooden fish'
+            },
+            {
+              name: 'Xylophone',
+              label: 'Xylophone'
+            }
+          ]
+        },
+        {
+          label: 'Membranophones',
+          options: [
+            {
+              name: 'Drum',
+              label: 'Drum'
+            },
+            {
+              name: 'Drum kit',
+              label: 'Drum kit'
+            },
+            {
+              name: "Jew's harp",
+              label: "Jew's harp"
+            },
+            {
+              name: 'Octaban',
+              label: 'Octaban'
+            },
+            {
+              name: 'Samphor',
+              label: 'Samphor'
+            },
+            {
+              name: 'Snare drum',
+              label: 'Snare drum'
+            },
+            {
+              name: 'Timpani',
+              label: 'Timpani'
+            },
+            {
+              name: 'Tom-tom',
+              label: 'Tom-tom'
+            }
+          ]
+        },
+        {
+          label: 'Wind instruments',
+          options: [
+            {
+              name: 'Slide whistle',
+              label: 'Slide whistle'
+            },
+            {
+              name: 'Sousaphone',
+              label: 'Sousaphone'
+            },
+            {
+              name: 'Trombone',
+              label: 'Trombone'
+            },
+            {
+              name: 'Trumpet',
+              label: 'Trumpet'
+            },
+            {
+              name: 'Tuba',
+              label: 'Tuba'
+            },
+            {
+              name: 'Whistle',
+              label: 'Whistle'
+            }
+          ]
+        },
+        {
+          label: 'Stringed instruments',
+          options: [
+            {
+              name: 'Ukulele',
+              label: 'Ukulele'
+            },
+            {
+              name: 'Viol',
+              label: 'Viol'
+            },
+            {
+              name: 'Violin',
+              label: 'Violin'
+            },
+            {
+              name: 'Washtub bass',
+              label: 'Washtub bass'
+            }
+          ]
+        },
+        {
+          label: 'Electronic instruments',
+          options: [
+            {
+              name: 'Teleharmonium',
+              label: 'Teleharmonium'
+            },
+            {
+              name: 'Tenori-on',
+              label: 'Tenori-on'
+            },
+            {
+              name: 'Theremin',
+              label: 'Theremin'
+            },
+            {
+              name: 'trautonium',
+              label: 'trautonium'
+            },
+            {
+              name: 'Turntablism',
+              label: 'Turntablism'
+            },
+            {
+              name: 'Turntable',
+              label: 'Turntable'
+            }
+          ]
+        }
+      ],
+      defaultValue: 'Cowbell',
+      operators: [
+        {
+          name: '=',
+          label: '='
+        },
+        {
+          name: 'in',
+          label: 'in'
+        }
+      ]
+    },
+    {
+      name: 'alsoPlays',
+      label: 'Also plays',
+      valueEditorType: 'multiselect',
+      values: [
+        {
+          label: 'Percussion instruments',
+          options: [
+            {
+              name: 'Tambourine',
+              label: 'Tambourine'
+            },
+            {
+              name: 'Triangle',
+              label: 'Triangle'
+            },
+            {
+              name: 'Vibraphone',
+              label: 'Vibraphone'
+            },
+            {
+              name: 'Washboard',
+              label: 'Washboard'
+            },
+            {
+              name: 'Wood block',
+              label: 'Wood block'
+            },
+            {
+              name: 'Wooden fish',
+              label: 'Wooden fish'
+            },
+            {
+              name: 'Xylophone',
+              label: 'Xylophone'
+            }
+          ]
+        },
+        {
+          label: 'Membranophones',
+          options: [
+            {
+              name: 'Drum',
+              label: 'Drum'
+            },
+            {
+              name: 'Drum kit',
+              label: 'Drum kit'
+            },
+            {
+              name: "Jew's harp",
+              label: "Jew's harp"
+            },
+            {
+              name: 'Octaban',
+              label: 'Octaban'
+            },
+            {
+              name: 'Samphor',
+              label: 'Samphor'
+            },
+            {
+              name: 'Snare drum',
+              label: 'Snare drum'
+            },
+            {
+              name: 'Timpani',
+              label: 'Timpani'
+            },
+            {
+              name: 'Tom-tom',
+              label: 'Tom-tom'
+            }
+          ]
+        },
+        {
+          label: 'Wind instruments',
+          options: [
+            {
+              name: 'Slide whistle',
+              label: 'Slide whistle'
+            },
+            {
+              name: 'Sousaphone',
+              label: 'Sousaphone'
+            },
+            {
+              name: 'Trombone',
+              label: 'Trombone'
+            },
+            {
+              name: 'Trumpet',
+              label: 'Trumpet'
+            },
+            {
+              name: 'Tuba',
+              label: 'Tuba'
+            },
+            {
+              name: 'Whistle',
+              label: 'Whistle'
+            }
+          ]
+        },
+        {
+          label: 'Stringed instruments',
+          options: [
+            {
+              name: 'Ukulele',
+              label: 'Ukulele'
+            },
+            {
+              name: 'Viol',
+              label: 'Viol'
+            },
+            {
+              name: 'Violin',
+              label: 'Violin'
+            },
+            {
+              name: 'Washtub bass',
+              label: 'Washtub bass'
+            }
+          ]
+        },
+        {
+          label: 'Electronic instruments',
+          options: [
+            {
+              name: 'trautonium',
+              label: 'trautonium'
+            },
+            {
+              name: 'Turntablism',
+              label: 'Turntablism'
+            },
+            {
+              name: 'Turntable',
+              label: 'Turntable'
+            }
+          ]
+        }
+      ],
+      defaultValue: 'More cowbell',
+      operators: [
+        {
+          name: 'in',
+          label: 'in'
+        }
+      ]
+    },
+    {
+      name: 'gender',
+      label: 'Gender',
+      operators: [
+        {
+          name: '=',
+          label: '='
+        }
+      ],
+      valueEditorType: 'radio',
+      values: [
+        {
+          name: 'M',
+          label: 'Male'
+        },
+        {
+          name: 'F',
+          label: 'Female'
+        },
+        {
+          name: 'O',
+          label: 'Other'
+        }
+      ]
+    },
+    {
+      name: 'datetime',
+      label: 'Show Time',
+      inputType: 'datetime-local'
+    },
+    {
+      name: 'alarm',
+      label: 'Daily Alarm',
+      inputType: 'time'
+    },
+    {
+      name: 'groupedField1',
+      label: 'Grouped Field 1',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
+    },
+    {
+      name: 'groupedField2',
+      label: 'Grouped Field 2',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
+    },
+    {
+      name: 'groupedField3',
+      label: 'Grouped Field 3',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
+    },
+    {
+      name: 'groupedField4',
+      label: 'Grouped Field 4',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
+    }
+  ]
+}
+</script>

package/demos/pc/app/query-builder/webdoc/query-builder.js

@@ -12,7 +12,7 @@ export default {
         'zh-CN': `
         <div class="tip custom-block"> 
           <p class=\"custom-block-title\"> config 属性说明 </p>
-          <code>autoSelectField</code>：范围域是否会默认选择，勾选则默认为第一个选项；反之则默认为-----  \n <code>autoSelectOperator</code>：运算符是否会默认选择，勾选则默认选择第一个选项，反之则默认为-----  \n       <code>disabled</code>：禁用所有规则  \n       <code>parsenumbers</code>：数字会被转化为 Number 类型，而非 String 类型  \n       <code>showCloneButtons</code>：展示复制按钮，即整条规则可以被复制  \n       <code>showCombinatorsBetweenRules</code>：组合子数组统一修改，且不再展示在连线上，以下拉选择形式出现  \n       <code>showLockButtons</code>：展示锁定按钮，即整条规则可以被锁定  \n       <code>showNotToggle</code>：展示 not 条件切换框  \n       <code>displayOnlyField</code>：是否仅展示字段选择器  \n       </div>  \n       二、fields 数据配置  \n      <pre> <code>\n       fields 中的数据（只用于说明各字段含义，无业务特定性）  \n       {  \n name: 'isMusician', //name：格式化数据中的值（形参）  \n label: 'Is a musician', //label：范围域在规则生成器中对外展示名称  \n valueEditorType: 'checkbox', //placeholder：值域的默认缺省值  \n operators: [ //运算符自定义，name 为格式化数据中的值，label 为范围域对外展示的名称  \n   {  \n     name: '=',  \n     label: '='  \n   }  \n ],  \n bindProps: { // 通过 bindProps 参数可对某一类组件进行参数控制  \n   input:{  \n     clearable:true  \n   },  \n   select:{  \n     filterable:true  \n   }  \n },  \n defaultValue: false, //defaultOperator：运算符的默认缺省选择  \n validator: (r) => !!r.value //validator：校验规则（该功能点还在迭代开发中……）  \n inputType: 'number', //值域的数值类型  \n valueEditorType: 'radio' //值域编辑器的类型  \n defaultValue: false, //值域的默认值  \n values: [ //值域的可选域配置（下拉）  \n   {  \n      label: 'Percussion instruments',  \n      options: [  \n       {  \n            name: 'Clapstick',  \n            label: 'Clapstick'  \n       }  \n     ]  \n   }  \n ],  \n values: [ //值域的可选域配置（单选）  \n   {  \n      name: 'M',  \n      label: 'Male'  \n   },  \n   {  \n      name: 'F',  \n      label: 'Female'  \n   },  \n   {  \n      name: 'O',  \n      label: 'Other'  \n   }  \n ],  \n valueSources: ['field', 'value'], //值域类型可选择  \n comparator: 'groupNumber', //分组时的比较器  \n groupNumber: 'group1', //分组的组别  \n       },  \n       // 组合子数组配置，label 为展示字符，name 为数据值  \n       combinators: [  \n {  \n   name: 'and',  \n   label: '且'  \n },  \n {  \n   name: 'or',  \n   label: '或'  \n }  \n       ]  \n       </code></pre>  <br>`,
+          <code>autoSelectField</code>：范围域是否会默认选择，勾选则默认为第一个选项；反之则默认为-----  \n <code>autoSelectOperator</code>：运算符是否会默认选择，勾选则默认选择第一个选项，反之则默认为-----  \n       <code>disabled</code>：禁用所有规则  \n       <code>parseNumbers</code>：数字会被转化为 Number 类型，而非 String 类型  \n       <code>showCloneButtons</code>：展示复制按钮，即整条规则可以被复制  \n       <code>showCombinatorsBetweenRules</code>：组合子数组统一修改，且不再展示在连线上，以下拉选择形式出现  \n       <code>showLockButtons</code>：展示锁定按钮，即整条规则可以被锁定  \n       <code>showNotToggle</code>：展示 not 条件切换框  \n       <code>displayOnlyField</code>：是否仅展示字段选择器  \n       </div>  \n       二、fields 数据配置  \n      <pre> <code>\n       fields 中的数据（只用于说明各字段含义，无业务特定性）  \n       {  \n name: 'isMusician', //name：格式化数据中的值（形参）  \n label: 'Is a musician', //label：范围域在规则生成器中对外展示名称  \n valueEditorType: 'checkbox', //placeholder：值域的默认缺省值  \n operators: [ //运算符自定义，name 为格式化数据中的值，label 为范围域对外展示的名称  \n   {  \n     name: '=',  \n     label: '='  \n   }  \n ],  \n bindProps: { // 通过 bindProps 参数可对某一类组件进行参数控制  \n   input:{  \n     clearable:true  \n   },  \n   select:{  \n     filterable:true  \n   }  \n },  \n defaultValue: false, //defaultOperator：运算符的默认缺省选择  \n validator: (r) => !!r.value //validator：校验规则（该功能点还在迭代开发中……）  \n inputType: 'number', //值域的数值类型  \n valueEditorType: 'radio' //值域编辑器的类型  \n defaultValue: false, //值域的默认值  \n values: [ //值域的可选域配置（下拉）  \n   {  \n      label: 'Percussion instruments',  \n      options: [  \n       {  \n            name: 'Clapstick',  \n            label: 'Clapstick'  \n       }  \n     ]  \n   }  \n ],  \n values: [ //值域的可选域配置（单选）  \n   {  \n      name: 'M',  \n      label: 'Male'  \n   },  \n   {  \n      name: 'F',  \n      label: 'Female'  \n   },  \n   {  \n      name: 'O',  \n      label: 'Other'  \n   }  \n ],  \n valueSources: ['field', 'value'], //值域类型可选择  \n comparator: 'groupNumber', //分组时的比较器  \n groupNumber: 'group1', //分组的组别  \n       },  \n       // 组合子数组配置，label 为展示字符，name 为数据值  \n       combinators: [  \n {  \n   name: 'and',  \n   label: '且'  \n },  \n {  \n   name: 'or',  \n   label: '或'  \n }  \n       ]  \n       </code></pre>  <br>`,
         'en-US': ''
       },
       codeFiles: ['basic-usage.vue']
@@ -54,6 +54,34 @@ export default {
       },
       codeFiles: ['max-height.vue']
     },
+    {
+      demoId: 'handle',
+      name: {
+        'zh-CN': '显示与禁用设置',
+        'en-US': 'Display and Disable Settings'
+      },
+      desc: {
+        'zh-CN':
+          '添加 <code>disabled</code> 属性是否全部禁用，添加 <code>showNewRule</code> 属性是否显示新增条件，添加 <code>showNewGroup</code> 属性是否显示新增子条件组，添加 <code>isRuleDisable</code> 属性是否禁用新增条件，添加 <code>isGroupDisable</code> 属性是否禁用新增子条件组。',
+        'en-US':
+          'Add <code>disabled</code> property to disable all, add <code>showNewRule</code> property to show new condition, add <code>showNewGroup</code> property to show new sub-condition group, add <code>isRuleDisable</code> property to disable new rule, add <code>isGroupDisable</code> property to disable new group.'
+      },
+      codeFiles: ['handle.vue']
+    },
+    {
+      demoId: 'limit',
+      name: {
+        'zh-CN': '限制数量',
+        'en-US': 'Limit Settings'
+      },
+      desc: {
+        'zh-CN':
+          '添加 <code>ruleLimit</code> 属性设置新增条件的最大数量，<code>groupLimit</code> 属性设置新增子条件组的最大数量。',
+        'en-US':
+          'Add <code>ruleLimit</code> property to set the maximum number of new rules, <code>groupLimit</code> property to set the maximum number of new sub-condition groups.'
+      },
+      codeFiles: ['limit.vue']
+    },
     {
       demoId: 'sub-component-param',
       name: {

package/demos/pc/app/radio/dynamic-disable.vue

@@ -31,7 +31,7 @@ export default {
     return {
       radio: '禁用',
       radio1: '6',
-      radio2: '1',
+      radio2: '3',
       dataArr: [
         { lable: '3', value: '备选项 1' },
         { lable: '6', value: '备选项 2' },

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

@@ -0,0 +1,41 @@
+<template>
+  <!-- 给 space 容器加 id，方便 e2e 定位 -->
+  <div id="space-basic-usage">
+    <!-- 方向按钮 -->
+    <tiny-button type="primary" @click="setDirection('row')">行</tiny-button>
+    <tiny-button type="success" @click="setDirection('column')">列</tiny-button>
+
+    <!-- 间距按钮 -->
+    <div style="margin: 10px 0">
+      <tiny-button @click="value += 5">增加间距 +5</tiny-button>
+      <tiny-button @click="value -= 5">减少间距 -5</tiny-button>
+    </div>
+
+    <!-- 在 tiny-space 上加一个 class，保证 E2E 稳定 -->
+    <tiny-space class="tiny-space" :size="value" :direction="direction">
+      <tiny-button style="margin: 0" v-for="n in 3" :key="n">按钮 {{ n }}</tiny-button>
+    </tiny-space>
+  </div>
+</template>
+
+<script>
+import { TinyButton, TinySpace } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySpace,
+    TinyButton
+  },
+  data() {
+    return {
+      value: 10, // 初始间距
+      direction: 'column' // 初始方向为 column
+    }
+  },
+  methods: {
+    setDirection(direction) {
+      this.direction = direction
+    }
+  }
+}
+</script>

package/demos/pc/app/space/basic-usage.spec.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test'
+
+test('Space Basic Demo - direction & size (按钮版)', async ({ page }) => {
+  await page.goto('space#space-basic-usage')
+
+  const space = page.locator('#space-basic-usage .tiny-space')
+  await space.waitFor({ state: 'visible', timeout: 5000 })
+
+  const getGap = async () =>
+    await space.evaluate((el) => {
+      const style = getComputedStyle(el)
+      return style.gap || '0px'
+    })
+
+  const getFlexDirection = async () => await space.evaluate((el) => getComputedStyle(el).flexDirection)
+
+  // 初始状态检查
+  expect(await getFlexDirection()).toBe('column')
+  expect(await getGap()).toBe('10px')
+
+  // 点击“行”按钮 -> flex-direction 应变成 row
+  const rowButton = page.locator('#space-basic-usage .tiny-button', { hasText: '行' })
+  await rowButton.click()
+  expect(await getFlexDirection()).toBe('row')
+
+  // 点击增加间距按钮 -> gap 应变成 15px
+  const increaseGap = page.locator('#space-basic-usage .tiny-button', { hasText: '增加间距 +5' })
+  await increaseGap.click()
+  await page.waitForTimeout(50) // 等待 DOM 更新
+  expect(await getGap()).toBe('15px')
+
+  // 点击减少间距按钮 -> gap 应变回 10px
+  const decreaseGap = page.locator('#space-basic-usage .tiny-button', { hasText: '减少间距 -5' })
+  await decreaseGap.click()
+  await page.waitForTimeout(50)
+  expect(await getGap()).toBe('10px')
+})