yj-kikimore 0.1.3 → 0.1.4

package/README.md

@@ -1,7 +1,7 @@
 <h1 align="center">yj-Kikimore</h1>
 
 <p align="center">
-  几个 Element Plus / Element 组件的封装。
+  基于 Vue 3 + Element Plus 的组件封装。
 </p>
 
 <br>
@@ -72,49 +72,9 @@ app
 
 <br>
 
-### Element (Vue 2)
-
-#### 局部注册
-
-```vue
-<script>
-import { KiFormDialog, KiPopButton, KiPopSwitch, KiSelect } from 'yj-kikimore'
-
-export default {
-  components: { KiFormDialog, KiPopButton, KiPopSwitch, KiSelect },
-}
-</script>
-```
-
-#### 全局注册
-
-```ts
-import Vue from 'vue'
-import { KiFormDialog, KiPopButton, KiPopSwitch, KiSelect } from 'yj-kikimore'
-
-Vue.use(FormDialog, {
-  // 全局配置
-})
-Vue.use(KiPopButton, {
-  // 全局配置
-})
-Vue.use(KiPopSwitch, {
-  // 全局配置
-})
-Vue.use(KiSelect, {
-  // 全局配置
-})
-```
-
-#### ~~CDN~~
-
-⚠ 暂不支持。
-
-<br>
-
 ## FormDialog
 
-[el-dialog](https://element.eleme.cn/#/zh-CN/component/dialog) + [el-form](https://element.eleme.cn/#/zh-CN/component/form) 组合拳。
+[el-dialog](https://element-plus.org/zh-CN/component/dialog.html) + [el-form](https://element-plus.org/zh-CN/component/form.html) 组合拳。
 
 ### 特性
 
@@ -130,8 +90,8 @@ Vue.use(KiSelect, {
 | 名称                                            | 说明                                | 类型     | 默认值      |
 | ----------------------------------------------- | ----------------------------------- | -------- | ----------- |
 | title                                           | 对话框标题                          | string   |             |
-| v-model:show (Vue 3) /<br>show.sync (Vue 2)     | 是否显示                            | boolean  | `false`     |
-| modelValue (Vue 3) /<br>value (Vue 2) / v-model | 表单数据对象 (`el-form` 的 `model`) | any      |             |
+| v-model:show                                     | 是否显示                            | boolean  | `false`     |
+| modelValue                                       | 表单数据对象 (`el-form` 的 `model`) | any      |             |
 | elFormProps                                     | `el-form` 的属性                    | object   |             |
 | retrieve                                        | 读取数据                            | Function |             |
 | loading                                         | 读取状态                            | boolean  | `false`     |
@@ -157,7 +117,7 @@ Vue.use(KiSelect, {
 | validateCatch                      | 表单校验失败时触发                    | 同element表单 校验失败时的参数 |
 
 
-#### modelValue (Vue 3) / value (Vue 2) / v-model
+#### modelValue / v-model
 
 如果是 plain object 类型，将用于 `el-form` 的 `model`。
 
@@ -405,12 +365,12 @@ Vue.use(KiSelect, {
 
 | 名称                                              | 说明                              | 类型                                          | 默认值         |
 | ------------------------------------------------- | --------------------------------- | --------------------------------------------- | -------------- |
-| modelValue (Vue 3) /<br>value (Vue 2) / v-model   | 绑定值                            | any                                           |                |
-| v-model:options (Vue 3) /<br>options.sync (Vue 2) | 选项                              | any[]                                         |                |
+| modelValue                                         | 绑定值                            | any                                           |                |
+| v-model:options                                    | 选项                              | any[]                                         |                |
 | props                                             | 定位选项的各项属性                | object                                        |                |
 | search                                            | 远程搜索 (`remote-method` 封装)   | (query: string) =><br>Promise<any[]> \| any[] |                |
 | searchImmediately                                 | 是否立即执行远程搜索              | boolean                                       | `true`         |
-| v-model:label (Vue 3) /<br>label.sync (Vue 2)     | 绑定值对应的 `label` (单向数据流) | string \| string[]                            |                |
+| v-model:label                                      | 绑定值对应的 `label` (单向数据流) | string \| string[]                            |                |
 | showSelectAllCheckbox                             | 多选时是否显示全选框              | boolean                                       | `true`         |
 | selectAllCheckboxLabel                            | 全选框的文案                      | string                                        | `'Select All'` |
 | ...                                               | `el-select` 的属性                |                                               |                |
@@ -483,3 +443,11 @@ interface Props {
 UI 组件库的标杆 Ant Design 也是使用 `value` 与 `label` 命名。
 
 <br>
+
+## 升级日志
+
+### v0.13.4
+修复Select组件全选时未触发事件
+
+### v0.13.3
+FormDialog增加校验失败事件

package/package.json

@@ -1,17 +1,14 @@
 {
   "name": "yj-kikimore",
   "PascalCasedName": "YjKikimore",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
-  "packageManager": "pnpm@7.25.0",
-  "description": "Several components wrapper for Element Plus / Element.",
+  "description": "Several component wrappers for Element Plus (Vue 3).",
   "author": "yunjing",
   "license": "MIT",
   "keywords": [
     "vue",
-    "vue-demi",
     "element",
-    "element-ui",
     "element-plus"
   ],
   "exports": {
@@ -32,28 +29,21 @@
     "src"
   ],
   "scripts": {
-    "dev3": "cl switchVue 3 && vite --config ./demo/vue3/vite.config.ts --open",
-    "dev2.7": "cl switchVue 2.7 && vite --config ./demo/vue2.7/vite.config.ts --open",
-    "dev": "vite --config ./demo/vue2.6/vite.config.ts --open",
-    "build": "vite build",
+    "dev": "vite --config ./demo/vite.config.ts --open",
+    "build": "npx vite build",
     "release": "npx lint-staged && pnpm build && cl release"
   },
   "peerDependencies": {
     "element-plus": ">=2",
-    "element-ui": ">=2",
-    "vue": "2||3"
+    "vue": ">=3"
   },
   "peerDependenciesMeta": {
     "element-plus": {
       "optional": true
-    },
-    "element-ui": {
-      "optional": true
     }
   },
   "dependencies": {
     "lodash-es": "latest",
-    "vue-demi": "latest",
     "vue-global-config": "0.4.0"
   },
   "devDependencies": {
@@ -61,10 +51,11 @@
     "@commitlint/config-conventional": "latest",
     "@types/lodash-es": "latest",
     "@types/node": "latest",
-    "@vitejs/plugin-vue2": "latest",
-    "@vue/test-utils": "1",
+    "@element-plus/icons-vue": "latest",
+    "@vitejs/plugin-vue": "latest",
+    "@vue/test-utils": "latest",
     "case-police": "latest",
-    "element-ui": "latest",
+    "element-plus": "latest",
     "husky": "latest",
     "lint-staged": "latest",
     "rome": "latest",
@@ -81,8 +72,7 @@
     "vite-plugin-dts": "latest",
     "vls": "latest",
     "vti": "latest",
-    "vue": "2.7",
-    "vue-template-compiler": "2.7",
+    "vue": "latest",
     "vue-tsc": "latest",
     "zhlint": "latest"
   },

package/src/FormDialog/index.vue

@@ -7,7 +7,6 @@
       ref="elDialogRef"
       :key="key"
       v-model="show"
-      :visible="show"
       :title="Title"
       :destroyOnClose="false"
       :appendToBody="false"
@@ -16,37 +15,27 @@
       @closed="onClosed"
     >
       <!-- 向 el-dialog 传递 slot -->
-      <template #[headerSlotName]>
+      <template #header>
         <!-- 接收 slot -->
-        <component v-if="isGlobalSlot(Slots[headerSlotName])" :is="Slots[headerSlotName]()" />
-        <slot v-else :name="headerSlotName">
+        <component v-if="isGlobalSlot(Slots.header)" :is="Slots.header()" />
+        <slot v-else name="header">
           <span>{{ Title }}</span>
         </slot>
         <div style="display: flex; align-items: center">
-          <template v-if="isVue3">
-            <el-icon
-              v-if="ShowFullscreenToggle"
-              :class="fullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen'"
-              @click="toggleFullscreen()"
-            >
-              <Component :is="fullscreen ? 'CopyDocument' : 'FullScreen'" />
-            </el-icon>
-            <el-icon
-              v-if="ElDialogProps.showClose !== false"
-              class="el-icon-close"
-              @click="onCancel"
-            >
-              <Close />
-            </el-icon>
-          </template>
-          <template v-else>
-            <i
-              v-if="ShowFullscreenToggle"
-              :class="fullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen'"
-              @click="toggleFullscreen()"
-            />
-            <i v-if="ElDialogProps.showClose !== false" class="el-icon-close" @click="onCancel" />
-          </template>
+          <el-icon
+            v-if="ShowFullscreenToggle"
+            :class="fullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen'"
+            @click="toggleFullscreen()"
+          >
+            <Component :is="fullscreen ? 'CopyDocument' : 'FullScreen'" />
+          </el-icon>
+          <el-icon
+            v-if="ElDialogProps.showClose !== false"
+            class="el-icon-close"
+            @click="onCancel"
+          >
+            <Close />
+          </el-icon>
         </div>
       </template>
       <div v-loading="Loading" style="display: flex; flex-direction: column; overflow-y: hidden">
@@ -157,7 +146,6 @@
 </template>
 
 <script>
-import { isVue3 } from 'vue-demi'
 import { conclude, resolveConfig } from 'vue-global-config'
 import { cloneDeep, isPlainObject } from 'lodash-es'
 import { getListeners, isGlobalSlot } from '../utils'
@@ -168,11 +156,6 @@ const globalAttrs = {}
 const globalListeners = {}
 const globalSlots = {}
 
-const model = {
-  prop: isVue3 ? 'modelValue' : 'value',
-  event: isVue3 ? 'update:modelValue' : 'input'
-}
-
 const boolProps = [
   'show',
   'readonly',
@@ -196,7 +179,7 @@ export default {
     app.component(this.name, this)
   },
   props: {
-    [model.prop]: {},
+    modelValue: {},
     title: {},
     elFormProps: {},
     retrieve: {},
@@ -217,7 +200,7 @@ export default {
       ])
     )
   },
-  emits: [model.event, 'update:show', 'fullscreen-change'],
+  emits: ['update:modelValue', 'update:show', 'fullscreen-change'],
   data() {
     return {
       initialValue: undefined,
@@ -230,8 +213,7 @@ export default {
       beforeCloseIsPassed: false,
       fullscreen: false,
       labelWidth: undefined,
-      key: 0,
-      isVue3
+      key: 0
     }
   },
   computed: {
@@ -239,10 +221,7 @@ export default {
       return getListeners.call(this, globalListeners)
     },
     Slots() {
-      return conclude([isVue3 ? this.$slots : this.$scopedSlots, globalSlots])
-    },
-    headerSlotName() {
-      return isVue3 ? 'header' : 'title'
+      return conclude([this.$slots, globalSlots])
     },
     ConfirmButtonText() {
       return conclude([this.confirmButtonText, globalProps.confirmButtonText, 'OK'], {
@@ -295,7 +274,7 @@ export default {
       })
     },
     ValueIsPlainObject() {
-      return isPlainObject(this[model.prop])
+      return isPlainObject(this.modelValue)
     },
     Title() {
       return conclude([this.title, globalProps.title], {
@@ -363,7 +342,7 @@ export default {
     },
     ElFormProps() {
       return {
-        model: this[model.prop],
+        model: this.modelValue,
         ...conclude(
           [
             this.elFormProps,
@@ -373,7 +352,7 @@ export default {
               ref: 'elFormRef',
               labelWidth: this.labelWidth
               // model 不能写在这里因为会被深拷贝，将导致无法重置
-              // model: this[model.prop],
+              // model: this.modelValue,
             }
           ],
           {
@@ -431,7 +410,7 @@ export default {
     }
   },
   mounted() {
-    this.initialValue = cloneDeep(this[model.prop])
+    this.initialValue = cloneDeep(this.modelValue)
   },
   updated() {
     this.computeLabelWidth()
@@ -486,7 +465,7 @@ export default {
       this.$refs[this.ElFormProps.ref].resetFields()
     },
     onClosed() {
-      this.$emit(model.event, cloneDeep(this.initialValue))
+      this.$emit('update:modelValue', cloneDeep(this.initialValue))
       this.$refs[this.ElFormProps.ref]?.clearValidate()
       this.confirming = false
       this.denying = false
@@ -642,9 +621,8 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-// 兼容 Vue 2.6
-// TODO: Vue 3 中报警告
-::v-deep .el-dialog__wrapper {
+// Vue 3 中保留旧写法，避免 scoped 深选择器行为变化
+:deep() .el-dialog__wrapper {
   display: flex;
 
   .el-dialog {

package/src/PopButton/index.vue

@@ -49,7 +49,6 @@
               v-bind="ElPopconfirmConfig.attrs"
               v-on="ElPopconfirmConfig.listeners"
               @confirm="$emit('click', $event)"
-              @on-confirm="$emit('click', $event)"
             >
               <template #reference>
                 <el-button
@@ -72,7 +71,6 @@
 </template>
 
 <script>
-import { isVue3 } from 'vue-demi'
 import { conclude, resolveConfig } from 'vue-global-config'
 import { getListeners, isGlobalSlot } from '../utils'
 
@@ -102,7 +100,7 @@ export default {
       return getListeners.call(this, globalListeners)
     },
     Slots() {
-      return conclude([isVue3 ? this.$slots : this.$scopedSlots, globalSlots])
+      return conclude([this.$slots, globalSlots])
     },
     ElTooltipProps() {
       const result = conclude([

package/src/PopSwitch/index.vue

@@ -49,16 +49,15 @@
               v-bind="ElPopconfirmConfig.attrs"
               v-on="ElPopconfirmConfig.listeners"
               @confirm="onConfirm"
-              @on-confirm="onConfirm"
             >
               <template #reference>
                 <el-switch
                   v-bind="ElSwitchProps"
+                  class="ki-switch"
                   :class="{
-                    'ki-switch': !isVue3,
                     'inline-prompt': InlinePrompt,
                   }"
-                  @click.native="onClick"
+                  @click="onClick"
                 />
               </template>
             </el-popconfirm>
@@ -70,7 +69,6 @@
 </template>
 
 <script>
-import { isVue3 } from 'vue-demi'
 import { conclude, resolveConfig } from 'vue-global-config'
 import { getListeners, isGlobalSlot } from '../utils'
 import { getCharCount } from './utils'
@@ -80,11 +78,6 @@ const globalAttrs = {}
 const globalListeners = {}
 const globalSlots = {}
 
-const model = {
-  prop: isVue3 ? 'modelValue' : 'value',
-  event: isVue3 ? 'update:modelValue' : 'change',
-}
-
 const boolProps = [
   'inlinePrompt',
 ]
@@ -99,9 +92,8 @@ export default {
     Object.assign(globalSlots, slots)
     app.component(this.name, this)
   },
-  model,
   props: {
-    [model.prop]: {},
+    modelValue: {},
     elPopconfirmProps: {},
     elTooltipProps: {},
     elPopoverProps: {},
@@ -110,18 +102,13 @@ export default {
       default: undefined,
     }])),
   },
-  data() {
-    return {
-      isVue3,
-    }
-  },
-  emits: [model.event, 'confirm'],
+  emits: ['update:modelValue', 'confirm', 'change'],
   computed: {
     Listeners() {
       return getListeners.call(this, globalListeners)
     },
     Slots() {
-      return conclude([isVue3 ? this.$slots : this.$scopedSlots, globalSlots])
+      return conclude([this.$slots, globalSlots])
     },
     ElTooltipProps() {
       return conclude([
@@ -170,12 +157,15 @@ export default {
       })
     },
     ElSwitchProps() {
+      const attrs = { ...this.$attrs }
+      delete attrs.onChange
+
       return conclude([
         {
-          [model.prop]: this[model.prop],
+          modelValue: this.modelValue,
           inlinePrompt: this.InlinePrompt,
         },
-        this.$attrs,
+        attrs,
         globalAttrs,
         { ref: 'elSwitchRef' },
       ], {
@@ -209,19 +199,21 @@ export default {
       }
     },
     onConfirm(...e) {
-      this.$emit('confirm', ...e)
-      this.$emit(model.event, this.$refs[this.ElSwitchProps.ref].checked
+      const nextValue = this.$refs[this.ElSwitchProps.ref].checked
         ? (this.ElSwitchProps.inactiveValue ?? false)
-        : (this.ElSwitchProps.activeValue ?? true))
+        : (this.ElSwitchProps.activeValue ?? true)
+
+      this.$emit('confirm', ...e)
+      this.$emit('update:modelValue', nextValue)
+      this.$emit('change', nextValue)
     },
   },
 }
 </script>
 
 <style lang="scss" scoped>
-// 兼容 Vue 2.6
-// TODO: Vue 3 中报警告
-::v-deep .ki-switch.inline-prompt {
+// Vue 3 中保留旧写法，避免 scoped 深选择器行为变化
+:deep() .ki-switch.inline-prompt {
   .el-switch__label * {
     font-size: 12px;
   }

package/src/Select/index.vue

@@ -149,7 +149,6 @@
 </template>
 
 <script>
-import { isVue3 } from 'vue-demi'
 import { conclude, resolveConfig } from 'vue-global-config'
 import { cloneDeep, isPlainObject } from 'lodash-es'
 import { getListeners, isEmpty, isObject, notEmpty, unwrap, isGlobalSlot } from '../utils'
@@ -159,11 +158,6 @@ const globalAttrs = {}
 const globalListeners = {}
 const globalSlots = {}
 
-const model = {
-  prop: isVue3 ? 'modelValue' : 'value',
-  event: isVue3 ? 'update:modelValue' : 'input',
-}
-
 const boolProps = [
   'searchImmediately',
   'showSelectAllCheckbox',
@@ -180,7 +174,7 @@ export default {
     app.component(this.name, this)
   },
   props: {
-    [model.prop]: {},
+    modelValue: {},
     label: [String, Array],
     options: Array,
     props: {},
@@ -191,10 +185,10 @@ export default {
       default: undefined,
     }])),
   },
-  emits: [model.event, 'update:options', 'update:label', 'change'],
+  emits: ['update:modelValue', 'update:options', 'update:label', 'change'],
   data() {
     return {
-      innerValue: this[model.prop],
+      innerValue: this.modelValue,
       initialValue: undefined,
       loading: undefined,
       // 在组件内部维护一份 innerOptions 的目的：search 时可以不绑定 options
@@ -211,7 +205,7 @@ export default {
       return getListeners.call(this, globalListeners)
     },
     Slots() {
-      return conclude([isVue3 ? this.$slots : this.$scopedSlots, globalSlots])
+      return conclude([this.$slots, globalSlots])
     },
     ShowSelectAllCheckbox() {
       return conclude([this.showSelectAllCheckbox, globalProps.showSelectAllCheckbox, true], {
@@ -273,7 +267,7 @@ export default {
         this.setInnerOptions(newOptions)
       },
     },
-    [model.prop]: {
+    modelValue: {
       handler(newValue) {
         this.innerValue = newValue
         this.updateSelectAllStatus()
@@ -286,7 +280,7 @@ export default {
         if (isEmpty(newInnerValue)) {
           this.remoteMethod()
         }
-        this.$emit(model.event, newInnerValue)
+        this.$emit('update:modelValue', newInnerValue)
       },
     },
   },
@@ -296,7 +290,7 @@ export default {
     }
   },
   mounted() {
-    this.initialValue = cloneDeep(this[model.prop])
+    this.initialValue = cloneDeep(this.modelValue)
   },
   methods: {
     isGlobalSlot,
@@ -360,7 +354,7 @@ export default {
       this.$nextTick(() => {
         if (this.isMultiple) {
           const label = []
-          this.$refs[this.ElSelectProps.ref].selected.forEach((v) => {
+          this.$refs[this.ElSelectProps.ref].selected?.forEach((v) => {
             if (!v.currentLabel) {
               v.currentLabel = this.getLabel(v.value)
             }

package/src/src/utils.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPublicInstance } from 'vue-demi';
-export declare function getListeners(this: ComponentPublicInstance, globalListeners: Record<string, any>): any;
+import { ComponentPublicInstance } from 'vue';
+export declare function getListeners(this: ComponentPublicInstance, _globalListeners: Record<string, any>): any;
 export declare function isGlobalSlot(slot: any): any;
 export declare function isEmpty(value: any): boolean;
 export declare function notEmpty(value: any): boolean;

package/src/utils.ts

@@ -1,25 +1,8 @@
-import { conclude, getLocalListeners } from 'vue-global-config'
 import { at, isPlainObject } from 'lodash-es'
-import { isVue3 } from 'vue-demi'
-import type { ComponentPublicInstance } from 'vue-demi'
+import type { ComponentPublicInstance } from 'vue'
 
-export function getListeners(this: ComponentPublicInstance, globalListeners: Record<string, any>) {
-  if (isVue3) {
-    return {}
-  }
-
-  for (const k in globalListeners) {
-    globalListeners[k] = globalListeners[k].bind(this)
-  }
-
-  return conclude([getLocalListeners(this.$listeners)], {
-    default: globalListeners,
-    mergeFunction:
-      (localEventListener: Function, globalEventListener: Function) => (...args: any) => {
-        localEventListener(...args)
-        globalEventListener(...args)
-      },
-  })
+export function getListeners(this: ComponentPublicInstance, _globalListeners: Record<string, any>) {
+  return {}
 }
 
 export function isGlobalSlot(slot: any) {