Merge branch 'refactor-mobile-site' of github.com:opentiny/tiny-vue into refactor-mobile-site

Author: James-9696

.github/workflows/auto-all-publish.yml

@@ -67,11 +67,14 @@ jobs:
       - name: Run Build ThemeMobile
         run: pnpm build:themeMobile
 
+      - name: Run Build Utils
+        run: pnpm build:utils
+
       - name: Run Build Runtime
         run: pnpm build:runtime
 
       - name: Publish Vue3 And Vue2 components
-        run: pnpm pub:all
+        run: pnpm pub:all && pnpm pub:utils
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 

.github/workflows/dispatch-all-publish-alpha.yml

@@ -79,13 +79,16 @@ jobs:
       - name: Run Build ThemeMobile
         run: pnpm build:themeMobile
 
+      - name: Run Build Utils
+        run: pnpm build:utils
+
       - name: Run Build Runtime
         run: pnpm build:runtime
 
       - name: Run Release alpha
         run: pnpm release:alpha
 
       - name: Publish Vue3 And Vue2 components
-        run: pnpm pub:all && pnpm pub:site
+        run: pnpm pub:all && pnpm pub:utils && pnpm pub:site
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_OPENTINY_VUE_TOKEN }}

.github/workflows/dispatch-renderless-theme-publish-alpha.yml

@@ -7,7 +7,7 @@ on:
       components:
         description: |
           输入需要打包的模块名称，多个以英文逗号分隔,
-          例如： `theme,renderless,runtime,docs`
+          例如： `theme,renderless,runtime,docs,utils`
         required: true
         type: string
 concurrency:
@@ -25,8 +25,9 @@ jobs:
           script: |
             const branchName = `${{ github.ref_name }}`
             const moduleName = `${{ inputs.components }}`
+            const validModuleNames = ['theme', 'renderless', 'runtime', 'docs','utils']
 
-            if (!moduleName.includes('theme') && !moduleName.includes('renderless') && !moduleName.includes('docs') && !moduleName.includes('runtime')) {
+            if (!validModuleNames.some(name => moduleName.includes(name))) {
               throw new Error('请输入正确的包名称')
             }
 
@@ -80,6 +81,10 @@ jobs:
         if: contains(inputs.components, 'runtime') == true
         run: pnpm build:runtime
 
+      - name: Run Build Utils
+        if: contains(inputs.components, 'utils') == true
+        run: pnpm build:utils
+
       - name: Run Release alpha
         run: pnpm release:alpha -u
 
@@ -89,6 +94,13 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_OPENTINY_VUE_TOKEN }}
 
+      - name: Publish Utils
+        if: contains(inputs.components, 'utils') == true
+        run: |
+          pnpm pub:utils
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_OPENTINY_VUE_TOKEN }}
+
       - name: Publish Docs
         if: contains(inputs.components, 'docs') == true
         run: |

examples/nuxt/playground/package.json

@@ -16,17 +16,19 @@
   },
   "devDependencies": {
     "@opentiny-internal/unplugin-virtual-template": "workspace:*",
+    "@opentiny/utils": "workspace:~",
     "@opentiny/vue": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
+    "@opentiny/vue-directive": "workspace:~",
+    "@opentiny/vue-hooks": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~",
-    "@opentiny/vue-vite-import": "workspace:~",
+    "@opentiny/vue-vite-import": "~1.2.0",
     "@tiptap/vue-3": "^2.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "js-sha256": "^0.9.0",
     "onigasm": "^2.2.5",
     "postcss": "^8.4.16",
     "typescript": "^5.0.0",

examples/nuxt/playground/pages/InfiniteScroll.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import InfiniteScroll from '@opentiny/vue-renderless/common/deps/infinite-scroll'
+import { InfiniteScroll } from '@opentiny/vue-directive'
 import { ref } from 'vue'
 
 const count = ref(0)

examples/sites/demos/apis/date-panel.js

@@ -0,0 +1,221 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'date-panel',
+      type: 'component',
+      props: [
+        {
+          name: 'disabled-date',
+          type: 'function',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置部分禁用',
+            'en-US': 'Configuration section disabled.'
+          },
+          mode: ['pc'],
+          pcDemo: 'disabled-date'
+        },
+        {
+          name: 'format',
+          type: 'string',
+          defaultValue: "'yyyy-MM-dd'",
+          desc: {
+            'zh-CN': '面板选中日期格式',
+            'en-US': 'Select date format on the panel.'
+          },
+          mode: ['pc'],
+          pcDemo: 'format'
+        },
+        {
+          name: 'v-model/modelValue',
+          type: 'date | string | number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '绑定值',
+            'en-US': 'Set the initial value of the calendar component. ;Bound Value.'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'popper-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '为 DatePicker 面板添加的 class 类名',
+            'en-US': 'Class name added for DatePanel.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-suffix-icon'
+        },
+        {
+          name: 'readonly',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '设置日历组件是否只读',
+            'en-US': 'Set panel component is read-only.'
+          },
+          mode: ['pc'],
+          pcDemo: 'readonly'
+        },
+        {
+          name: 'show-week-number',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否展示周次序号',
+            'en-US': 'Display week number.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-weeks'
+        },
+        {
+          name: 'format-weeks',
+          type: '(customWeeks: number, weekFirstDays: string[]) => string',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '格式化周次序号，该回调函数有两个参数，customWeeks 用来获取自定义周次的序号，weekFirstDays 用来获取每周次中的首个日期',
+            'en-US':
+              'Format the week number, this callback function has two parameters: customWeeks is used to obtain the custom week number, and weekFirstDays is used to obtain the first date in the week number'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-weeks'
+        },
+        {
+          name: 'first-day-of-week',
+          type: 'number',
+          defaultValue: '7',
+          desc: {
+            'zh-CN': '设置每周的第一天是星期几，默认值是7，也就是星期天',
+            'en-US':
+              'Set the first day of each week as the day of the week, with a default value of 7, which is Sunday.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-weeks'
+        }
+      ],
+      events: [
+        {
+          name: 'select-change',
+          type: '(value: string) => void',
+          desc: {
+            'zh-CN': '用户确认选定的值时触发',
+            'en-US': 'This event is triggered when the user confirms the selected value.'
+          },
+          mode: ['pc'],
+          pcDemo: 'event'
+        }
+      ],
+      format: [
+        {
+          name: 'a',
+          desc: {
+            'zh-CN': 'am/pm',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'A',
+          desc: {
+            'zh-CN': 'AM/PM',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'd',
+          desc: {
+            'zh-CN': '日，不补0',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 'dd',
+          desc: {
+            'zh-CN': '日',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 'M',
+          desc: {
+            'zh-CN': '月，不补0',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 'MM',
+          desc: {
+            'zh-CN': '月',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 'W',
+          desc: {
+            'zh-CN': '周，不补0',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 'WW',
+          desc: {
+            'zh-CN': '周',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 'yyyy',
+          desc: {
+            'zh-CN': '年',
+            'en-US': ''
+          },
+          mode: ['pc']
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'IPickerOptions',
+      type: 'interface',
+      code: `
+interface IPickerOptions {
+  // 每周的第一天是星期几，默认值是7，也就是星期天
+  firstDayOfWeek: number
+  // 实现部分禁用，此时只能选择一部分日期
+  disabledDate: (time: Date) => boolean
+  // 选中日期后执行的回调，需要与 daterange 或 datetimerange 类型配合使用才生效
+  onPick: (range: { minDate: Date, maxDate: Date }) => void
+  // 快捷选项
+  shortcuts: {
+    text: string
+    onClick: (picker: { $emit: (type: string, date: Date) => void }) => void
+    type: 'startFrom' | 'EndAt'
+    startDate: Date
+    endDate: Date
+  }[]
+}
+      `
+    },
+    {
+      name: 'IType',
+      type: 'type',
+      code: `
+type IType = 'date' | 'dates' | 'daterange' | 'datetime' | 'datetimerange' | 'week' | 'month' | 'monthrange' | 'quarter' | 'year' | 'years' | 'yearrange'
+      `
+    }
+  ]
+}

examples/sites/demos/apis/grid.js

@@ -2490,24 +2490,12 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN':
-              '表格校验函数，如果指定 row 或 rows 则校验指定一行或多行，否则校验整个表格。该回调函数会在校验结束后被调用，并传入两个参数：（是否校验成功，最近一列未通过校验的字段）。若不传入回调函数，则会返回一个 promise',
+              '表格校验函数，如果指定 row 或 rows 则校验指定一行或多行，否则校验整个表格。该回调函数会在校验结束后被调用，并传入两个参数：（是否校验成功，最近一列未通过校验的字段）。若不传入回调函数，则会返回一个 promise, 校验成功返回 true (3.22.0新增)，校验失败返回错误信息对象',
             'en-US':
               'Table verification function. If a row or rows is specified, the specified row or multiple rows are verified. Otherwise, the entire table is verified. This callback function is called after the verification is complete and the following parameters are transferred: (Whether the verification is successful. The fields in the latest column fail the verification.) If no callback function is passed in, a promise is returned'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'grid-validation#validation-before-submit-validation'
-        },
-        {
-          name: 'validate(rows, callback)',
-          type: '',
-          defaultValue: '',
-          desc: {
-            'zh-CN':
-              '表格校验函数，如果指定 row 或 rows 则校验指定一行或多行，否则校验整个表格。该回调函数会在校验结束后被调用，并传入两个参数：（是否校验成功，最近一列未通过校验的字段）。若不传入回调函数，则会返回一个 promise',
-            'en-US': ''
-          },
-          mode: ['mobile-first'],
-          mfDemo: ''
         }
       ],
       slots: [

examples/sites/demos/apis/modal.js

@@ -315,12 +315,16 @@ export default {
         {
           name: 'show-close',
           type: 'boolean',
-          defaultValue: '',
+          defaultValue: 'true',
           desc: {
             'zh-CN': '是否显示关闭按钮，默认值为 true',
             'en-US': ''
           },
-          mode: ['mobile-first'],
+          meta: {
+            stable: '3.22.0'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'modal-other',
           mfDemo: ''
         },
         {

examples/sites/demos/mobile-first/app/select/memoize-usage.vue

@@ -15,7 +15,7 @@
 
 <script>
 import { TinySelect, TinyOption } from '@opentiny/vue'
-import Memorize from '@opentiny/vue-renderless/common/deps/memorize'
+import { Memorize } from '@opentiny/utils'
 
 const MemorizeInstance = new Memorize({ key: 'test456' })