fix(version): sync 3.15.0 bugfix

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

@@ -165,11 +165,11 @@ export default {
       type: 'interface',
       code: `
 interface IItemData {
-  label: string           // 菜单项文本
-  disabled: boolean       // 是否禁用
-  divided: boolean        // 是否显示分割线
-  children: IItemData[]   // 菜单项子集
-  icon: Component      // 菜单项图标
+  label?: string           // 菜单项文本
+  disabled?: boolean       // 是否禁用
+  divided?: boolean        // 是否显示分割线
+  children?: IItemData[]   // 菜单项子集
+  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/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 = {
-  plugins: [autoImportPlugin()]
-}
+module.exports = defineConfig({
+  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/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.16'
 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.15', '3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
+const versions = ['3.16', '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')
 

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 type { Plugin } from 'vite'
-
-function pascalCase(str: string) {
-  const camelCaseStr = str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
-  return camelCaseStr.charAt(0).toUpperCase() + camelCaseStr.slice(1)
+import AutoVite from 'unplugin-vue-components/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'
+
+const supportMap = {
+  'vite': AutoVite,
+  'webpack': AutoWebpack,
+  'rollup': AutoRollup,
+  'esbuild': AutoEsbuild,
+  'rspack': AutoRspack
 }
 
-const resolveVue = (code: string, s: MagicString) => {
-  const results: any = []
-
-  for (const match of code.matchAll(/_resolveComponent[0-9]*\("(.+?)"\)/g)) {
-    const matchedName = match[1]
-    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)
-      })
+export const TinyVueResolver = (componentName) => {
+  if (componentName.startsWith('Tiny') && !componentName.startsWith('TinyIcon')) {
+    return {
+      name: componentName.slice(4),
+      from: '@opentiny/vue'
     }
   }
-
-  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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-renderless",
   "private": true,
-  "version": "3.16.0",
+  "version": "3.16.1",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [
@@ -43,4 +43,4 @@
     "esno": "^0.16.3",
     "tsup": "7.2.0"
   }
-}
+}

packages/renderless/src/tabs/index.ts

@@ -11,6 +11,58 @@
  */
 import type { ITabsRenderlessParams, ITabsPane, ITabsCustomEvent, ITabsPaneVm } from '@/types'
 
+// 此处与aui区别开，将tabNav的方法抽离出来，从源头解决pane的排序问题
+const getOrderedPanes = (parent, panes) => {
+  const slotDefault = parent.$slots.default
+  let orders
+
+  if (typeof slotDefault === 'function') {
+    orders = []
+
+    const tabVnodes = slotDefault()
+    const handler = ({ type, componentOptions, props }) => {
+      let componentName = type && type.componentName
+
+      if (!componentName) componentName = componentOptions && componentOptions.Ctor.extendOptions.componentName
+
+      if (componentName === 'TabItem') {
+        const paneName = (props && props.name) || (componentOptions && componentOptions.propsData.name)
+
+        orders.push(paneName)
+      }
+    }
+
+    tabVnodes.forEach(({ type, componentOptions, props, children }) => {
+      if (
+        type &&
+        (type.toString() === 'Symbol(Fragment)' || // [email protected]之前的开发模式
+          type.toString() === 'Symbol(v-fgt)' || //   [email protected] 的变更
+          type.toString() === 'Symbol()') //          构建后
+      ) {
+        Array.isArray(children) &&
+          children.forEach(({ type, componentOptions, props }) => handler({ type, componentOptions, props }))
+      } else {
+        handler({ type, componentOptions, props })
+      }
+    })
+  }
+
+  // 此处不同步aui，vue3情况下插槽使用v-if生成的slotDefault有差异
+  if (orders.length > 0) {
+    let tmpPanes = []
+
+    orders.forEach((paneName) => {
+      let pane = panes.find((pane) => pane.name === paneName)
+
+      if (pane) tmpPanes.push(pane)
+    })
+
+    panes = tmpPanes
+  }
+
+  return panes
+}
+
 export const calcPaneInstances =
   ({
     constants,
@@ -44,24 +96,7 @@ export const calcPaneInstances =
           index > -1 ? (currentPanes[index] = vm) : currentPanes.push(vm)
         }
       })
-
-      const currentPaneStates = currentPanes.map((pane) => pane.state)
-      const paneStates = state.panes.map((pane) => pane.state)
-
-      let newPanes = [] as ITabsPaneVm[]
-      for (let i = 0; i < paneStates.length; i++) {
-        const paneState = paneStates[i]
-        const index = currentPaneStates.indexOf(paneState)
-
-        if (index > -1) {
-          newPanes.push(state.panes[i])
-          currentPanes.splice(index, 1)
-
-          currentPaneStates.splice(index, 1)
-        }
-      }
-
-      newPanes = newPanes.concat(currentPanes)
+      const newPanes = getOrderedPanes(parent, currentPanes) as ITabsPaneVm[]
 
       const panesChanged = !(
         newPanes.length === state.panes.length &&

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
-  moreOptions: object
+  visibleOptions: IActonMenuOptionsItem[]
+  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-saas/package.json

@@ -101,4 +101,4 @@
       ]
     }
   }
-}
+}

packages/theme-saas/src/index.less

@@ -99,6 +99,7 @@
 @import './logout/index.less';
 @import './menubar/index.less';
 @import './milestone/index.less';
+@import './mind-map/index.less';
 @import './modal/index.less';
 @import './month-range/index.less';
 @import './month-table/index.less';

packages/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme",
-  "version": "3.16.1",
+  "version": "3.16.2",
   "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",

packages/theme/src/grid/table.less

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