fix(tinyvue): 同步内部代码，并修改grid组件再vue2下报错问题 (#254)

packages/renderless/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-renderless",
   "private": true,
-  "version": "3.8.5",
+  "version": "3.8.2",
   "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": [

packages/renderless/src/button-group/vue.ts

@@ -10,11 +10,11 @@
 *
 */
 
-import { handleClick } from './index'
+import { handleClick, moreNodeClick } from './index'
 
 export const api = ['state', 'handleClick', 'moreNodeClick']
 
-export const renderless = (props, { computed, reactive, watch, inject }, { emit, parent }) => {
+export function renderless(props, { computed, reactive, watch, inject }, { emit, parent }) {
   parent.tinyForm = parent.tinyForm || inject('form', null)
 
   const state = reactive({
@@ -44,7 +44,8 @@ export const renderless = (props, { computed, reactive, watch, inject }, { emit,
 
   const api = {
     state,
-    handleClick: handleClick({ emit, props, state })
+    handleClick: handleClick({ emit, props, state }),
+    moreNodeClick: moreNodeClick({ emit, props, state }),
   }
 
   return api

packages/renderless/src/pager/vue.ts

@@ -0,0 +1,5 @@
+export const api = []
+export function renderless() {
+  const api = {}
+  return api
+}

packages/theme-mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme-mobile",
-  "version": "3.8.5",
+  "version": "3.8.2",
   "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",
   "main": "index.css",

packages/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme",
-  "version": "3.8.0",
+  "version": "3.8.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/vue/src/grid/src/grid/grid.ts

@@ -274,7 +274,7 @@ export default {
   },
   render() {
     let { editConfig, fetchOption, listeners, loading, optimization, pager, pagerConfig, remoteFilter, remoteSort, selectToolbar } = this as any
-    let { seqIndex, $slots, tableCustoms, tableData, tableListeners, tableLoading, tableProps, toolbar, vSize, designConfig } = this as any
+    let { seqIndex, slots: $slots, tableCustoms, tableData, tableListeners, tableLoading, tableProps, toolbar, vSize, designConfig } = this as any
 
     // grid全局替换smb图标
     if (designConfig && designConfig.icons) {

packages/vue/src/option/package.json

@@ -14,8 +14,7 @@
   },
   "dependencies": {
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-icon": "workspace:~"
+    "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
 }

packages/vue/src/option/src/pc.vue

@@ -28,7 +28,7 @@
   >
     <span v-if="state.select.multiple && !state.select.state.multipleLimit">
       <tiny-checkbox
-        v-model="state.itemSelected"
+        :model-value="state.itemSelected"
         :disabled="disabled || state.groupDisabled || state.limitReached"
       ></tiny-checkbox>
     </span>
@@ -42,14 +42,11 @@
 import { renderless, api } from '@opentiny/vue-renderless/option/vue'
 import { $prefix, setup, defineComponent } from '@opentiny/vue-common'
 import Checkbox from '@opentiny/vue-checkbox'
-import { iconCheck, iconCheckedSur } from '@opentiny/vue-icon'
 
 export default defineComponent({
   name: $prefix + 'Option',
   componentName: 'Option',
   components: {
-    IconCheck: iconCheck(),
-    IconCheckedSur: iconCheckedSur(),
     TinyCheckbox: Checkbox
   },
   props: {

packages/vue/src/pager/src/pc.vue

@@ -13,7 +13,8 @@
 import Pager from '@opentiny/vue-pager-item'
 import Popover from '@opentiny/vue-popover'
 import { t } from '@opentiny/vue-locale'
-import { $prefix, h, defineComponent } from '@opentiny/vue-common'
+import { $prefix, h, setup, defineComponent } from '@opentiny/vue-common'
+import { renderless, api } from '@opentiny/vue-renderless/pager/vue'
 import {
   iconTriangleDown,
   iconChevronLeft,
@@ -80,6 +81,9 @@ export default defineComponent({
       internalTotal: this.total
     }
   },
+  setup(props, context) {
+    return setup({ props, context, renderless, api })
+  },
   render() {
     const layout = this.internalLayout
 
@@ -117,7 +121,7 @@ export default defineComponent({
           pageSizes={this.pageSizes}
         ></sizes>
       ),
-      slot: <slot>{typeof this.$slots.default === 'function' ? this.$slots.default() : this.$slots.default}</slot>,
+      slot: <slot>{this.slots.default && this.slots.default()}</slot>,
       total: <total></total>
     }
 
@@ -211,7 +215,7 @@ export default defineComponent({
             <div slot="reference" class="tiny-pager__popover">
               <div class="tiny-pager__input">
                 <input disabled={this.$parent.disabled} type="text" readonly="readonly" value={this.$parent.internalPageSize} />
-                <div class="tiny-pager__input-btn"><TriangleDown class={['tiny-svg-size', this.showSizes? 'tiny-svg-size__reverse-180': '']} /></div>
+                <div class="tiny-pager__input-btn"><TriangleDown class={['tiny-svg-size', this.showSizes ? 'tiny-svg-size__reverse-180' : '']} /></div>
               </div>
             </div>
           ),

packages/vue/src/select/src/pc.vue

@@ -262,7 +262,7 @@
               @mousedown.stop
               @mouseenter="state.hoverIndex = -9"
             >
-              <tiny-checkbox v-model="state.isSelectAll" :indeterminate="state.isHalfSelect" :class="state.selectCls">
+              <tiny-checkbox :model-value="state.isSelectAll" :indeterminate="state.isHalfSelect" :class="state.selectCls">
                 {{ t('ui.base.all') }}
               </tiny-checkbox>
             </li>