feat: vue3 ts迁移 & ts支持完善

Qymh · Aug 31, 2019 · 2a6d071 · 2a6d071
1 parent a582b4a
commit 2a6d071
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 37 deletions.
diff --git a/packages/@qymh/q-select/types/options.d.ts b/packages/@qymh/q-select/types/options.d.ts
@@ -68,8 +68,9 @@ export interface QSelect {
   ): PromiseCall<K, V>;
   scrollTo<K, V>(column: number, index: number): PromiseCall<K, V>;
 
-  setIndex<K, V>(index: number): PromiseCall<K, V>;
-  setKey<K, V>(index: number): PromiseCall<K, V>;
+  setIndex<K, V>(index: number[]): PromiseCall<K, V>;
+  setKey<K, V>(key: any[]): PromiseCall<K, V>;
+  setValue<K, V>(value: any[]): PromiseCall<K, V>;
   setData<K, V>(data: Data<K, V>, index?: number[]): PromiseCall<K, V>;
   setTitle<K>(title: K): void;
 

diff --git a/packages/@qymh/vue-q-select/package.json b/packages/@qymh/vue-q-select/package.json
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@qymh/q-select": "^0.3.7",
+    "@vue/composition-api": "^0.2.1",
     "vue": "^2.6.10",
     "vue-function-api": "^2.2.0"
   }

diff --git a/packages/@qymh/vue-q-select/src/index.ts b/packages/@qymh/vue-q-select/src/index.ts
@@ -1,14 +1,14 @@
-import QSelect from './vue/Index.vue';
+import QSelect from './vue';
 // eslint-disable-next-line
 import { VueConstructor } from 'vue';
-import { plugin } from 'vue-function-api';
+import VueCompositionApi from '@vue/composition-api';
 import '@qymh/q-select/dist/q-select.css';
 interface Options {
   name?: string;
 }
 export default {
   install(Vue: VueConstructor, options: Options = {}) {
-    Vue.use(plugin);
+    Vue.use(VueCompositionApi);
     Vue.component(options.name || 'QSelect', QSelect as any);
   }
 };
diff --git a/packages/@qymh/vue-q-select/src/vue/.eslintrc.js b/packages/@qymh/vue-q-select/src/vue/.eslintrc.js
@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['qymh/vue']
+  extends: ['qymh/typescript']
 };
diff --git a/...ages/@qymh/vue-q-select/src/vue/Index.vue → packages/@qymh/vue-q-select/src/vue/index.ts b/...ages/@qymh/vue-q-select/src/vue/Index.vue → packages/@qymh/vue-q-select/src/vue/index.ts
@@ -1,12 +1,38 @@
-<script lang="ts">
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  createComponent
+} from '@vue/composition-api';
 import Vue from 'vue';
-import QSelect from '@qymh/q-select/src/index';
-import { value, onMounted, onDestroyed, watch } from 'vue-function-api';
+import QSelect from '@qymh/q-select';
+
 import { assert } from '@qymh/q-select/src/uitls';
-export default {
-  setup(props, context) {
-    let pending = value(true);
-    const uid = value(0);
+
+interface IProps {
+  visible: boolean;
+  data: Data;
+  index: number[];
+  title: string;
+  count: number;
+  chunkHeight: number;
+  confirmBtn: string;
+  cancelBtn: string;
+  inline: boolean;
+  loading: boolean;
+  deep: boolean;
+  disableDefaultCancel: boolean;
+  defaultKey: any[];
+  defaultValue: any[];
+  bkIndex: number;
+  selectIndex: number;
+}
+
+const Component = createComponent({
+  setup(props: IProps, context) {
+    const pending = ref(true);
+    const uid = ref(0);
     let ins: QSelect;
 
     onMounted(() => {
@@ -21,8 +47,10 @@ export default {
         confirmBtn: props.confirmBtn,
         loading: props.loading,
         disableDefaultCancel: props.disableDefaultCancel,
+        bkIndex: props.bkIndex,
+        selectIndex: props.selectIndex,
         ready(value, key, data) {
-          pending = false;
+          pending.value = false;
           context.emit('ready', value, key, data);
         },
         cancel() {
@@ -38,11 +66,14 @@ export default {
         },
         show() {
           context.emit('show');
+        },
+        hide() {
+          context.emit('hide');
         }
       });
     });
 
-    onDestroyed(() => {
+    onBeforeUnmount(() => {
       ins && ins.destroy();
     });
 
@@ -74,70 +105,83 @@ export default {
       }
     };
 
-    const setData = (data, index) => {
+    const setData = (data: Data, index?: number[]) => {
       if (warnIns()) {
         return ins.setData(data, index);
       }
+      return '';
     };
 
-    const setColumnData = (column, data) => {
+    const setColumnData = (
+      column: number | number[],
+      data: NotGangedData | NotGangedData[]
+    ) => {
       if (warnIns()) {
         return ins.setColumnData(column, data);
       }
+      return '';
     };
 
     const scrollTo = (column: number, index: number) => {
       if (warnIns()) {
         return ins.scrollTo(column, index);
       }
+      return '';
     };
 
-    const setIndex = index => {
+    const setIndex = (index: number[]) => {
       if (warnIns()) {
         return ins.setIndex(index);
       }
+      return '';
     };
 
-    const setTitle = title => {
+    const setTitle = (title: string) => {
       if (warnIns()) {
         return ins.setTitle(title);
       }
     };
 
-    const setValue = value => {
+    const setValue = (value: any[]) => {
       if (warnIns()) {
         return ins.setValue(value);
       }
+      return '';
     };
 
-    const setKey = key => {
+    const setKey = (key: any[]) => {
       if (warnIns()) {
         return ins.setKey(key);
       }
+      return '';
     };
 
     const getData = () => {
       if (warnIns()) {
-        return ins.getChangeCallData();
+        return ins.getData();
       }
+      return [];
     };
 
     const getIndex = () => {
       if (warnIns()) {
         return ins.getIndex();
       }
+      return [];
     };
 
     const getValue = () => {
       if (warnIns()) {
         return ins.getValue();
       }
+      return [];
     };
 
     const getKey = () => {
       if (warnIns()) {
         return ins.getKey();
       }
+      return [];
     };
 
     const setLoading = () => {
@@ -156,7 +200,7 @@ export default {
       () => props.defaultKey,
       val => {
         if (val && val.length) {
-          if (pending) {
+          if (pending.value) {
             Vue.nextTick(() => {
               ins.setKey(props.defaultKey);
             });
@@ -171,7 +215,7 @@ export default {
       () => props.defaultValue,
       val => {
         if (val && val.length) {
-          if (pending) {
+          if (pending.value) {
             Vue.nextTick(() => {
               ins.setValue(props.defaultValue);
             });
@@ -186,15 +230,15 @@ export default {
       () => props.visible,
       val => {
         if (val) {
-          if (pending) {
+          if (pending.value) {
             Vue.nextTick(() => {
               show();
             });
           } else {
             show();
           }
         } else {
-          if (!pending) {
+          if (!pending.value) {
             context.emit('hide');
             close();
           }
@@ -206,12 +250,12 @@ export default {
       () => props.loading,
       val => {
         if (val) {
-          if (pending) {
+          if (pending.value) {
           } else {
             setLoading();
           }
         } else {
-          if (!pending) {
+          if (!pending.value) {
             cancelLoading();
           }
         }
@@ -220,7 +264,7 @@ export default {
 
     watch(
       () => props.data,
-      val => {
+      (val: Data) => {
         setData(val);
         if (props.defaultValue && props.defaultValue.length) {
           setValue(props.defaultValue);
@@ -259,8 +303,7 @@ export default {
     );
 
     return {
-      pending,
-      ins,
+      uid,
       destroy,
       setIndex,
       setData,
@@ -272,8 +315,7 @@ export default {
       getData,
       getIndex,
       getValue,
-      getKey,
-      uid
+      getKey
     };
   },
   name: 'QSelect',
@@ -350,15 +392,26 @@ export default {
     defaultValue: {
       type: Array,
       default: () => []
+    },
+    // 背景index
+    bkIndex: {
+      type: Number,
+      default: 500
+    },
+    // select index
+    selectIndex: {
+      type: Number,
+      default: 600
     }
   },
-  render(h) {
+  render(this: any, h) {
     this.uid = this._uid;
     if (this.inline) {
       return h('div', { class: `q-select-inline--${this._uid}` });
     } else {
       return h('');
     }
   }
-};
-</script>
+});
+
+export default Component;
diff --git a/packages/@qymh/vue-q-select/types/component.d.ts b/packages/@qymh/vue-q-select/types/component.d.ts
@@ -47,4 +47,8 @@ export class VueQSelect extends Vue {
   deep?: boolean;
 
   disableDefaultCancel?: boolean;
+
+  bkIndex: number;
+
+  selectIndex: number;
 }
diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -27,7 +27,7 @@ declare type Data = GangedData[] | NotGangedData[];
 declare type FunctionKeys = 'ready' | 'cancel' | 'confirm' | 'hide' | 'show';
 
 declare type QOptions = {
-  id: number;
+  id?: number;
   target: string;
   loading: boolean;
   data: Data;

diff --git a/yarn.lock b/yarn.lock
@@ -2144,6 +2144,13 @@
     sass "^1.18.0"
     stylus "^0.54.5"
 
+"@vue/composition-api@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.2.1.tgz#d6b4327b308ac474982536f86bf44dd00271742d"
+  integrity sha512-eRmvToKbNjFXYyuFZ8e9KUcBXwDj0PQR1ngZP4u3R2jR9yjIbvgEsj7IKoddSKYiEkMttn+JiaSKX7n+REQBBw==
+  dependencies:
+    tslib "^1.9.3"
+
 "@zkochan/cmd-shim@^3.1.0":
   version "3.1.0"
   resolved "https://registry.npm.taobao.org/@zkochan/cmd-shim/download/@zkochan/cmd-shim-3.1.0.tgz#2ab8ed81f5bb5452a85f25758eb9b8681982fd2e"