feat(unplugin-tiny-vue): add TinyVueResolver

* fix(action-menu): [action-menu] fix no divided bug

* fix(action-menu): [action-menu] fix no divided bug

examples/sites/demos/apis/action-menu.js

@@ -165,11 +165,11 @@ export default {
       type: 'interface',
       code: `
 interface IItemData {
-  label: string           // 菜单项文本
+  label?: string           // 菜单项文本
-  disabled: boolean       // 是否禁用
+  disabled?: boolean       // 是否禁用
-  divided: boolean        // 是否显示分割线
+  divided?: boolean        // 是否显示分割线
-  children: IItemData[]   // 菜单项子集
+  children?: IItemData[]   // 菜单项子集
-  icon: Component      // 菜单项图标
+  icon?: Component      // 菜单项图标
 }
 `
     },

examples/sites/demos/pc/app/action-menu/basic-usage-composition-api.vue

@@ -17,7 +17,8 @@ const options = ref([
     label: '关机'
   },
   {
-    label: '重启'
+    label: '重启',
+    divided: true
   },
   {
     label: '网络设置',

examples/sites/demos/pc/app/action-menu/basic-usage.vue

@@ -22,7 +22,8 @@ export default {
           label: '关机'
         },
         {
-          label: '重启'
+          label: '重启',
+          divided: true
         },
         {
           label: '网络设置',

examples/sites/demos/pc/webdoc/changelog.md

@@ -1,5 +1,68 @@
 # 更新日志
 
+## v2.15.0/v3.15.0
+
+`2024/04/08`
+
+## What's Changed
+
+### Exciting New Features 🎉
+
+- feat(sites): add theme route by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1478
+- Cgm/add theme route by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1479
+- fix(transfer ): update transfer xdesign by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1496
+- feat(form): [form] add xDesign theme by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1507
+- feat(action-menu): [action-menu] add XDesign theme by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1514
+- feat(date-picker): [date-picker] date picker add quarter type by @kagol in https://github.com/opentiny/tiny-vue/pull/1513
+- feat(statistic): statistic component by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1491
+- feat(select): add show-proportion props of select component by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1503
+- feat(rich-text-editor): [rich-text-editor] add image drag adjustment by @HAOUEHF in https://github.com/opentiny/tiny-vue/pull/1504
+- feat(grid): [grid] add XDesign theme by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1518
+- feat: Adapting to the X-design theme by @zzcr in https://github.com/opentiny/tiny-vue/pull/1534
+- feat(charts): refactor chart components and replace chart-core with hui-charts by @Davont
+  - refactored the underlying chart-core library which is used by all chart components
+  - chart-core uses hui-charts instead of echarts as the underlying logic of the chart
+  - chart components add a unified entry `option` based on the original API to facilitate unified calls
+  - improved documentation and demos for all chart components
+  - add theme switching function to adapt to different business needs
+  - add chart status function `chartInstance`, providing 5 states: `loading`, `error`, `empty`, `stateEmpty`, `customize`
+
+### Bug Fixes 🐛
+
+- fix(site): anchor offset by @GaoNeng-wWw in https://github.com/opentiny/tiny-vue/pull/1477
+- fix(select): fix select/picker bugs by @zzcr in https://github.com/opentiny/tiny-vue/pull/1487
+- fix(vue-component): [mind-map] border-radius & border by @GaoNeng-wWw in https://github.com/opentiny/tiny-vue/pull/1510
+- fix(quarter-panel): [date-picker] add mono: true by @kagol in https://github.com/opentiny/tiny-vue/pull/1519
+- fix: Custom header height of dialog-box by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1530
+- fix(search): [search] fixed the maxlength attribute bug in search by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1528
+- fix(rich-text-editor): fix right package name by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/1535
+- fix(docs): fix the issue of the theme switch button not being centered by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1533
+- fix(AMap): fix the problem of failure to display the AMap case in the document by @Davont
+- fix(chart-heatMap): fix tooltip display error in bar-chart by @Davont
+- fix(chart-bar): fix the problem of abnormal gap display when the histogram width is too low by @Davont
+- fix(chart-histogram): fix the problem of histogram chart displaying blank in special scenarios by @Davont
+
+### Other Changes
+
+- docs(sites): add deep style in scoped by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1473
+- fix(ip-address): [ip-address] add spaces by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1475
+- docs(steps): optimization of steps docs by @Huangyilin19 in https://github.com/opentiny/tiny-vue/pull/1474
+- docs: add project name to issue template by @kagol in https://github.com/opentiny/tiny-vue/pull/1486
+- docs(grid): [grid] fix tree-grid-insert-delete-update demo by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1495
+- docs(sites): fix site overview input error by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1499
+- docs: update changelog by @kagol in https://github.com/opentiny/tiny-vue/pull/1501
+- [select] Optimized remote search demo by @Huangyilin19 in https://github.com/opentiny/tiny-vue/pull/1488
+- ci(publish): add github action auto publish by @zzcr in https://github.com/opentiny/tiny-vue/pull/1512
+- docs(date-picker): [date-picker] fix format docs by @kagol in https://github.com/opentiny/tiny-vue/pull/1522
+- docs(Numeric): [examples] add the description of change-compat for ch… by @AcWrong02 in https://github.com/opentiny/tiny-vue/pull/1521
+- docs(sites): add aui adapter document by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1516
+- ci(publish): add dispatch publish action by @zzcr in https://github.com/opentiny/tiny-vue/pull/1517
+- fix: update numeric demo style by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1526
+
+## New Contributors
+
+- @HAOUEHF made their first contribution in https://github.com/opentiny/tiny-vue/pull/1504
+
 ## v2.14.0/v3.14.0
 
 `2024/03/07`

examples/sites/demos/pc/webdoc/import-components.md

@@ -22,7 +22,7 @@ Vite
 import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
 
 export default {
-  plugins: [autoImportPlugin()]
+  plugins: [autoImportPlugin('vite')]
 }
 ```
 
@@ -33,13 +33,53 @@ Webpack
 
 const autoImportPlugin = require('@opentiny/unplugin-tiny-vue')
 
-module.exports = {
+module.exports = defineConfig({
-  plugins: [autoImportPlugin()]
+  configureWebpack: {
-}
+    plugins: [autoImportPlugin('webpack')]
+  }
+})
 ```
 
 这样你就能直接在项目中使用 TinyVue 的组件，这些组件都是自动按需导入的，无需手动导入，且不用担心项目体积变得太大。
 
+你也可以只使用 TinyVueResolver，这样就可以和其他组件库一起使用。
+
+Vite
+
+```ts
+// vite.config.ts
+
+import Components from 'unplugin-vue-components/vite'
+import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
+
+export default {
+  plugins: [
+    Components({
+      resolvers: [TinyVueResolver]
+    })
+  ]
+}
+```
+
+Webpack
+
+```js
+// webpack.config.js
+
+const Components = require('unplugin-vue-components/webpack').default
+const TinyVueResolver = require('@opentiny/unplugin-tiny-vue').TinyVueResolver
+
+module.exports = defineConfig({
+  configureWebpack: {
+    plugins: [
+      Components({
+        resolvers: [TinyVueResolver]
+      })
+    ]
+  }
+})
+```
+
 想了解更多自动按需导入的信息，请参考：[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 和 [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)。
 
 ### 多组件引入

examples/sites/index.html

@@ -18,7 +18,7 @@
     <app-root></app-root>
     <div id="app" class="wp100 hp100 pt60 of-hidden"></div>
     <!-- prettier-ignore -->
-    <script id="tinyui-design-common" src="https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/tinyui-design-common/1.0.5.20240330164329/tinyui-design-common.min.js"></script>
+    <script id="tinyui-design-common" src="https://res.hc-cdn.com/tinyui-design-common/1.0.5.20230707170109/tinyui-design-common.min.js"></script>
     <script type="module" src="./src/main.js"></script>
   </body>
 </html>

examples/sites/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.2.20",
+  "version": "2.2.21",
   "license": "MIT",
   "scripts": {
     "start": "vite",

examples/sites/playground/App.vue

@@ -17,7 +17,7 @@ import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
 
-const VERSION = 'tiny-vue-version-3.14'
+const VERSION = 'tiny-vue-version-3.15'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
 
@@ -28,7 +28,7 @@ const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
 const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览
 
-const versions = ['3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
+const versions = ['3.15', '3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
 const latestVersion = isPreview ? versions[0] : localStorage.getItem(VERSION) || versions[0]
 const cdnHost = localStorage.getItem('setting-cdn')
 const getRuntime = (version) => {

internals/unplugin-tiny-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/unplugin-tiny-vue",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A vite auto import plugin for TinyVue",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -35,7 +35,7 @@
     "vite": ">=4"
   },
   "dependencies": {
-    "magic-string": "^0.27.0"
+    "unplugin-vue-components": "^0.26.0"
   },
   "devDependencies": {
     "rimraf": "^5.0.5",

internals/unplugin-tiny-vue/src/index.ts

@@ -1,62 +1,37 @@
-import MagicString from 'magic-string'
+import AutoVite from 'unplugin-vue-components/vite'
-import type { Plugin } from 'vite'
+import AutoWebpack from 'unplugin-vue-components/webpack'
+import AutoRollup from 'unplugin-vue-components/rollup'
+import AutoEsbuild from 'unplugin-vue-components/esbuild'
+import AutoRspack from 'unplugin-vue-components/rspack'
 
-function pascalCase(str: string) {
+const supportMap = {
-  const camelCaseStr = str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
+  'vite': AutoVite,
-  return camelCaseStr.charAt(0).toUpperCase() + camelCaseStr.slice(1)
+  'webpack': AutoWebpack,
+  'rollup': AutoRollup,
+  'esbuild': AutoEsbuild,
+  'rspack': AutoRspack
 }
 
-const resolveVue = (code: string, s: MagicString) => {
+export const TinyVueResolver = (componentName) => {
-  const results: any = []
+  if (componentName.startsWith('Tiny') && !componentName.startsWith('TinyIcon')) {
-
+    return {
-  for (const match of code.matchAll(/_resolveComponent[0-9]*\("(.+?)"\)/g)) {
+      name: componentName.slice(4),
-    const matchedName = match[1]
+      from: '@opentiny/vue'
-    if (match.index != null && matchedName && !matchedName.startsWith('_')) {
-      const start = match.index
-      const end = start + match[0].length
-      results.push({
-        rawName: matchedName,
-        replace: (resolved: string) => s.overwrite(start, end, resolved)
-      })
-    }
-  }
-
-  return results
-}
-
-const findComponent = (rawName: string, name: string, s: MagicString) => {
-  if (!name.match(/^Tiny[a-zA-Z]/)) {
-    return
-  }
-  s.prepend(`import ${name} from '@opentiny/vue-${rawName.slice(5)}';\n`)
-}
-
-const transformCode = (code) => {
-  const s = new MagicString(code)
-  const results = resolveVue(code, s)
-
-  for (const { rawName, replace } of results) {
-    const name = pascalCase(rawName)
-    findComponent(rawName, name, s)
-    replace(name)
-  }
-
-  const result = s.toString()
-  return result
-}
-
-export default function vitePluginAutoImport(): Plugin {
-  return {
-    name: '@opentiny/auto-import',
-
-    transform(code, id) {
-      // 不处理node_modules内的依赖
-      if (/\.(?:vue)$/.test(id) && !/(node_modules)/.test(id)) {
-        return {
-          code: transformCode(code),
-          map: null
-        }
-      }
     }
   }
 }
+
+/** TinyVue 自动导入组件的插件，支持Vite,Webpack,Rollup 等常见的构建工具。
+ * 目前不支持Tiny Icon的自动导入
+ * @example
+ * import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
+ * plugins: [autoImportPlugin('vite')]
+ */
+export default (name) => {
+  // 兼容webpack/vite的差异
+  const autoPlugin = supportMap[name].default || supportMap[name]
+
+  return autoPlugin({
+    resolvers: [TinyVueResolver]
+  })
+}

packages/renderless/types/action-menu.type.ts

@@ -23,14 +23,23 @@ import type {
   computedSuffixIcon
 } from '../src/action-menu'
 
+export interface IActonMenuOptionsItem {
+  label?: string
+  disabled?: boolean
+  divided?: boolean
+  children?: IActonMenuOptionsItem[]
+  icon?: any
+  [key: string]: any
+}
+
 export interface IActionMenuState {
-  visibleOptions: object
+  visibleOptions: IActonMenuOptionsItem[]
-  moreOptions: object
+  moreOptions: IActonMenuOptionsItem[]
   isCardMode: boolean
   spacing: string | number
   maxShowNum: number
   moreText: string
-  suffixIcon: string | Object
+  suffixIcon: string | object
 }
 
 export type IActionMenuProps = ExtractPropTypes<typeof actionMenuProps>

packages/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme",
-  "version": "3.15.0",
+  "version": "3.15.1",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "main": "index.css",
   "homepage": "https://opentiny.design/tiny-vue",
@@ -87,4 +87,4 @@
       ]
     }
   }
-}
+}

packages/theme/src/grid/table.less

@@ -1003,6 +1003,9 @@
     // 部分场景下浏览器缩放比例导致表头和表体错位问题
     th.col__gutter {
       width: 0;
+      position: sticky;
+      right: 0;
+      background-color: var(--ti-grid-header-background-color);
     }
   }
 

packages/theme/src/tree/index.less

@@ -319,12 +319,6 @@
     }
   }
 
-  &.is-leaf:not(.is-root) {
-    .@{tree-node-prefix-cls}__content {
-      padding-left: var(--ti-tree-node-icon-font-size);
-    }
-  }
-
   &__content {
     display: flex;
     align-items: center;

packages/vue/src/action-menu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-action-menu",
-  "version": "3.15.0",
+  "version": "3.15.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -24,4 +24,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}

packages/vue/src/action-menu/src/pc.vue

@@ -42,6 +42,7 @@
               <tiny-dropdown-item
                 v-for="(item, index) in state.moreOptions"
                 :key="index"
+                :divided="item.divided"
                 :item-data="item"
                 :label="item[textField]"
                 :disabled="item.disabled"

packages/vue/src/grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-grid",
-  "version": "3.15.0",
+  "version": "3.15.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -31,4 +31,4 @@
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
-}
+}

packages/vue/src/grid/src/filter/src/methods.ts

@@ -267,9 +267,10 @@ export default {
       if (this.$grid.pagerConfig) {
         this.$grid.pagerConfig.currentPage = 1
       }
-      // 3、抛出filter-change事件（在服务端筛选时grid才会注册filter-change事件处理）
-      emitEvent(this, 'filter-change', [{ filters, $table: this }])
     }
+    // 3、抛出filter-change事件（在服务端筛选时grid会注册filter-change事件处理，然后grid会再次抛出filter-change）
+    // （在本地筛选时table会直接对业务抛出filter-change）
+    emitEvent(this, 'filter-change', [{ filters, $table: this }])
 
     this.updateFooter()
 
@@ -327,7 +328,8 @@ export default {
 
     // 如果清除所有列筛选或者参数传递的清除列存在才发送事件，从reload执行过来的不发送事件
     if (field === true || column) {
-      emitEvent(this, 'filter-change', [{ filters: {}, $table: this }])
+      const filters = columnfilters(this.visibleColumn)
+      emitEvent(this, 'filter-change', [{ filters, $table: this }])
     }
 
     this.clearSelection()