releases 4.1.21

x-extends · Sep 10, 2024 · d162cb8 · d162cb8
1 parent e8e2143
commit d162cb8
Show file tree

Hide file tree

Showing 82 changed files with 1,568 additions and 883 deletions.
diff --git a/README.md b/README.md
@@ -92,7 +92,7 @@
 
 [👀 Vxe Table](https://vxetable.cn)  
 
-* [x] table 表格
+* [x] table 表格-基础表格
 * [x] column 表格-列
 * [x] colgroup 表格-分组列
 * [x] toolbar 表格-工具栏
@@ -109,8 +109,89 @@ npm install vxe-pc-ui
 import VxeUI from 'vxe-pc-ui'
 import 'vxe-pc-ui/lib/style.css'
 // ...
+// ...
+import VxeTable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+// ...
+
+createApp(App).use(VxeUI).use(VxeTable).mount('#app')
+```
+
+### CDN
+
+使用第三方 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响  
+***不建议将第三方的 CDN 地址用于正式环境，因为该连接随时都可能会失效***  
+
+```HTML
+<!-- style -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui/lib/style.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css">
+<!-- vue -->
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<!-- table -->
+<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
+<script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui"></script>
+<script src="https://cdn.jsdelivr.net/npm/vxe-table@next"></script>
+```
 
-createApp(App).use(VxeUI).mount('#app')
+## 示例
+
+```html
+<template>
+  <div>
+    <vxe-form
+      ref="formRef"
+      :data="formData"
+      @submit="submitEvent">
+      <vxe-form-item title="名称" field="name" span="12" :item-render="{}">
+        <template #default="params">
+          <vxe-input v-model="formData.name""></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="角色" field="role" span="12" :item-render="{}">
+        <template #default="params">
+          <vxe-input v-model="formData.role"></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="年龄" field="age" span="12" :item-render="{}">
+        <template #default="params">
+          <vxe-input v-model="formData.age"></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item align="center" span="24" :item-render="{}">
+        <template #default>
+          <vxe-button type="submit" status="primary">提交</vxe-button>
+          <vxe-button type="reset">重置</vxe-button>
+        </template>
+      </vxe-form-item>
+    </vxe-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { VxeUI, VxeFormInstance, VxeFormEvents } from 'vxe-pc-ui'
+
+interface FormDataVO {
+  name: string
+  nickname: string
+  sex: string
+  role: string
+}
+
+const formRef = ref<VxeFormInstance<FormDataVO>>()
+
+const formData = ref<FormDataVO>({
+  name: '',
+  nickname: '',
+  sex: '',
+  role: ''
+})
+
+const submitEvent: VxeFormEvents.Submit = () => {
+  VxeUI.modal.message({ content: '保存成功', status: 'success' })
+}
+</script>
 ```
 
 ## QQ 交流群

diff --git a/examples/views/countdown/CountdownTest.vue b/examples/views/countdown/CountdownTest.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>
-      <vxe-countdown model-value="10000">
+      <vxe-countdown v-model="val1">
         <template #default="{ diffConf }">
           <span>{{ diffConf.HH }}</span>
           <span>：</span>
@@ -12,13 +12,18 @@
       </vxe-countdown>
     </p>
     <p>
-      <vxe-countdown model-value="300000"></vxe-countdown>
+      <vxe-countdown v-model="val2"></vxe-countdown>
     </p>
     <p>
-      <vxe-countdown model-value="3000000" format="HH:mm:ss"></vxe-countdown>
+      <vxe-countdown v-model="val3" format="HH:mm:ss"></vxe-countdown>
     </p>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
+
+const val1 = ref(100000)
+const val2 = ref(300000)
+const val3 = ref(3000000)
 </script>
diff --git a/examples/views/icon-picker/IconPickerTest.vue b/examples/views/icon-picker/IconPickerTest.vue
@@ -2,10 +2,10 @@
   <div>
     <p>
       <vxe-icon-picker v-model="demo1.val1"></vxe-icon-picker>
-      <vxe-icon-picker v-model="demo1.val1" clearable></vxe-icon-picker>
+      <vxe-icon-picker v-model="demo1.val2" clearable transfer></vxe-icon-picker>
     </p>
     <p>
-      <vxe-icon-picker v-model="demo1.val1" readonly></vxe-icon-picker>
+      <vxe-icon-picker v-model="demo1.val2" readonly></vxe-icon-picker>
     </p>
   </div>
 </template>
@@ -14,6 +14,8 @@
 import { reactive } from 'vue'
 
 const demo1 = reactive({
-  val1: ''
+  val1: '',
+  val2: '',
+  val3: 'vxe-icon-print'
 })
 </script>
diff --git a/examples/views/input/InputTest.vue b/examples/views/input/InputTest.vue
@@ -9,7 +9,7 @@
 
     <p>
       <vxe-input v-model="demo1.value200" placeholder="可清除" showWordCount></vxe-input>
-      <vxe-input v-model="demo1.value200" placeholder="可清除" showWordCount maxlength="20"></vxe-input>
+      <vxe-input v-model="demo1.value200" placeholder="可清除" showWordCount max-length="20"></vxe-input>
       <vxe-input v-model="demo1.value200" placeholder="可清除" showWordCount clearable></vxe-input>
       <vxe-input v-model="demo1.value201" placeholder="带图标" prefix-icon="vxe-icon-time" suffix-icon="vxe-icon-time" clearable></vxe-input>
       <vxe-input v-model="demo1.value202" placeholder="只读的" suffix-icon="vxe-icon-time" readonly></vxe-input>

diff --git a/examples/views/pager/PagerTest.vue b/examples/views/pager/PagerTest.vue
@@ -68,9 +68,9 @@
         <template #left>
           <vxe-button content="更多操作" size="small">
             <template #dropdowns>
-              <vxe-button content="批量修改" type="text"></vxe-button>
-              <vxe-button content="批量管理" type="text"></vxe-button>
-              <vxe-button content="批量删除" type="text"></vxe-button>
+              <vxe-button content="批量修改" mode="text"></vxe-button>
+              <vxe-button content="批量管理" mode="text"></vxe-button>
+              <vxe-button content="批量删除" mode="text"></vxe-button>
             </template>
           </vxe-button>
         </template>

diff --git a/examples/views/pulldown/PulldownTest.vue b/examples/views/pulldown/PulldownTest.vue
@@ -71,7 +71,7 @@
       </vxe-pulldown>
     </p>
     <p>
-      <vxe-pulldown :options="pullOptions" trigger="click" showPopupShadow>
+      <vxe-pulldown :options="pullOptions" trigger="click" showPopupShadow transfer>
         <template #default>
           <img src="https://vxeui.com/resource/img/bq546.gif" style="width: 30px;height: 30px;" />
         </template>

diff --git a/examples/views/select/SelectTest.vue b/examples/views/select/SelectTest.vue
@@ -4,19 +4,19 @@
       <vxe-select v-model="demo1.value10" placeholder="默认尺寸">
         <template #header>
           <div>
-            <vxe-button type="text">按钮</vxe-button>
-            <vxe-button type="text">按钮</vxe-button>
-            <vxe-button type="text">按钮</vxe-button>
-            <vxe-button type="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
           </div>
         </template>
 
         <template #footer>
           <div>
-            <vxe-button type="text">按钮</vxe-button>
-            <vxe-button type="text">按钮</vxe-button>
-            <vxe-button type="text">按钮</vxe-button>
-            <vxe-button type="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
           </div>
         </template>
         <vxe-option v-for="num in 15" :key="num" :value="num" :label="`选项${num}`"></vxe-option>
@@ -39,19 +39,19 @@
       <vxe-select v-model="demo1.value21" placeholder="可搜索" filterable clearable>
         <template #header>
           <div>
-            <vxe-button type="text">按钮</vxe-button>
-            <vxe-button type="text">按钮</vxe-button>
-            <vxe-button type="text">按钮</vxe-button>
-            <vxe-button type="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
           </div>
         </template>
 
         <template #footer>
           <div>
-            <vxe-button type="text">按钮</vxe-button>
-            <vxe-button type="text">按钮</vxe-button>
-            <vxe-button type="text">按钮</vxe-button>
-            <vxe-button type="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
+            <vxe-button mode="text">按钮</vxe-button>
           </div>
         </template>
         <vxe-option v-for="num in 11" :key="num" :value="num" :label="`选项${num}`"></vxe-option>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.1.19",
+  "version": "4.1.21",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -25,7 +25,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "@vxe-ui/core": "^4.0.7"
+    "@vxe-ui/core": "^4.0.9"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.21.0",

diff --git a/packages/anchor/src/anchor-link.ts b/packages/anchor/src/anchor-link.ts
@@ -107,10 +107,10 @@ export default defineComponent({
       ])
     }
 
-    $xeAnchorLink.renderVN = renderVN
-
     provide('$xeAnchorLink', $xeAnchorLink)
 
+    $xeAnchorLink.renderVN = renderVN
+
     return $xeAnchorLink
   },
   render () {

diff --git a/packages/anchor/src/anchor.ts b/packages/anchor/src/anchor.ts
@@ -224,10 +224,10 @@ export default defineComponent({
       removeContainerElemScroll()
     })
 
-    $xeAnchor.renderVN = renderVN
-
     provide('$xeAnchor', $xeAnchor)
 
+    $xeAnchor.renderVN = renderVN
+
     return $xeAnchor
   },
   render () {

diff --git a/packages/breadcrumb/src/breadcrumb.ts b/packages/breadcrumb/src/breadcrumb.ts
@@ -79,10 +79,10 @@ export default defineComponent({
       }, defaultSlot ? defaultSlot({}) : renderItems())
     }
 
-    $xeBreadcrumb.renderVN = renderVN
-
     provide('$xeBreadcrumb', $xeBreadcrumb)
 
+    $xeBreadcrumb.renderVN = renderVN
+
     return $xeBreadcrumb
   },
   render () {

diff --git a/packages/button/src/button-group.ts b/packages/button/src/button-group.ts
@@ -85,6 +85,9 @@ export default defineComponent({
 
     provide('$xeButtonGroup', $xeButtonGroup)
 
-    return renderVN
+    return $xeButtonGroup
+  },
+  render () {
+    return this.renderVN()
   }
 })
diff --git a/packages/button/src/button.ts b/packages/button/src/button.ts
@@ -5,7 +5,7 @@ import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
 import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { warnLog } from '../../ui/src/log'
 
-import type { VxeButtonConstructor, VxeButtonPropTypes, VxeButtonEmits, ButtonReactData, ButtonMethods, ButtonPrivateRef, ButtonInternalData, VxeButtonGroupConstructor, VxeButtonGroupPrivateMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, ValueOf } from '../../../types'
+import type { VxeButtonConstructor, VxeButtonPropTypes, VxeButtonEmits, ButtonReactData, ButtonMethods, ButtonPrivateRef, ButtonInternalData, VxeButtonGroupConstructor, VxeButtonGroupPrivateMethods, VxeTableConstructor, VxeDrawerConstructor, VxeDrawerMethods, VxeTablePrivateMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, ValueOf } from '../../../types'
 
 export default defineComponent({
   name: 'VxeButton',
@@ -98,9 +98,10 @@ export default defineComponent({
   setup (props, context) {
     const { slots, emit } = context
 
-    const $xeModal = inject<VxeModalConstructor & VxeModalMethods | null>('$xeModal', null)
-    const $xeTable = inject<VxeTableConstructor & VxeTablePrivateMethods | null>('$xeTable', null)
-    const $xeForm = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
+    const $xeModal = inject<(VxeModalConstructor & VxeModalMethods)| null>('$xeModal', null)
+    const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null)
+    const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
+    const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods)| null>('$xeForm', null)
     const $xeButtonGroup = inject<(VxeButtonGroupConstructor & VxeButtonGroupPrivateMethods) | null>('$xeButtonGroup', null)
 
     const xID = XEUtils.uniqueId()
@@ -149,7 +150,7 @@ export default defineComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable || $xeModal || $xeForm) {
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
           return true
         }
       }