feat: add types (#126)

docs/faq.md

@@ -0,0 +1,13 @@
+## 在 TypeScript 中指定组件的类型
+
+```html
+<script lang="ts">
+// 需要引入这个
+// import { VEditorType } from '@femessage/v-editor'
+export default {
+  mounted() {
+    (this.$refs.editor as VEditorType).height = 120
+  },
+}
+</script>
+```

package.json

@@ -22,6 +22,7 @@
   "browser": {
     "./sfc": "src/v-editor.vue"
   },
+  "types": "src/v-editor.d.ts",
   "scripts": {
     "dev": "vue-styleguidist server",
     "test": "jest --verbose",

src/v-editor.d.ts

@@ -0,0 +1,72 @@
+import Vue, {VueConstructor} from 'vue'
+
+declare module '@femessage/v-editor' {
+  class FemessageComponent extends Vue {
+    static install(vue: typeof Vue): void
+  }
+
+  type CombinedVueInstance<
+    Instance extends Vue,
+    Data,
+    Methods,
+    Computed,
+    Props
+  > = Data & Methods & Computed & Props & Instance
+
+  type ExtendedVue<
+    Instance extends Vue,
+    Data,
+    Methods,
+    Computed,
+    Props
+  > = VueConstructor<
+    CombinedVueInstance<Instance, Data, Methods, Computed, Props> & Vue
+  >
+
+  type Combined<Data, Methods, Computed, Props> = Data &
+    Methods &
+    Computed &
+    Props
+
+  type VEditorData = {
+    editor: any
+    ClassicEditor: any
+    isFullScreen: boolean
+    uploaderAccept: string
+    previewImageUrl: string
+  }
+
+  type VEditorMethods = {}
+
+  type VEditorComputed = {}
+
+  type VEditorProps = {
+    placeholder: string
+    height: number | string
+    uploadOptions: object
+    value: string
+    editorOptions: object
+    disabled: boolean
+    onUploadFail: (status: boolean, error?: any) => void
+    autosize: object
+  }
+
+  type VEditor = Combined<
+    VEditorData,
+    VEditorMethods,
+    VEditorComputed,
+    VEditorProps
+  >
+
+  export interface VEditorType extends FemessageComponent, VEditor {}
+
+  const VEditorConstruction: ExtendedVue<
+    Vue,
+    VEditorData,
+    VEditorMethods,
+    VEditorComputed,
+    VEditorProps
+  >
+
+  export default VEditorConstruction
+}

styleguide.config.js

@@ -39,6 +39,10 @@ module.exports = {
       name: 'Demo',
       sections: demoSections,
       sectionDepth: 2
+    },
+    {
+      name: 'FAQ',
+      content: 'docs/faq.md'
     }
   ],
   webpackConfig: {