feat: add types (#22)

docs/faq.md

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

package.json

@@ -25,6 +25,7 @@
   "browser": {
     "./sfc": "src/index.vue"
   },
+  "types": "src/index.d.ts",
   "scripts": {
     "dev": "vue-cli-service styleguidist",
     "build": "yarn build:umd & yarn build:esm & yarn doc",

src/index.d.ts

@@ -0,0 +1,124 @@
+import {
+  GanttPropData,
+  GanttData,
+  GanttItem,
+  CollapsedMap,
+  GanttPropNode,
+  Bus,
+  GanttNode,
+  ColUnit,
+} from './utils/types'
+import Vue, { VueConstructor, PropType } from 'vue'
+
+declare module '@femessage/v-gantt' {
+  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 VGanttData = {
+    collapsedMap: CollapsedMap
+
+    scrollTop: number
+
+    dragData: {
+      node: null | GanttNode
+      movedCols: number
+    }
+
+    resizeData: {
+      node: null | GanttNode
+      resizedCols: number
+    }
+
+    bus: Bus
+  }
+
+  type VGanttMethods = {
+    initBus: () => void
+
+    onDelete: ({
+      id,
+      done,
+    }: {
+      id: GanttPropNode['id']
+      done: Function
+    }) => void
+
+    onMove: ({
+      id,
+      pid,
+      index,
+      done,
+    }: {
+      id: GanttPropNode['id']
+      pid?: GanttPropNode['id']
+      index: number
+      done: Function
+    }) => void
+
+    onDragStart: ({ id }: { id: GanttItem['id'] }) => void
+
+    onDrag: ({ movedCols }: { movedCols: number }) => void
+
+    onDragEnd: () => void
+
+    onResizeStart: ({ id }: { id: GanttItem['id'] }) => void
+
+    onResize: ({ resizedCols }: { resizedCols: number }) => void
+
+    onResizeEnd: () => void
+  }
+
+  type VGanttComputed = {
+    ganttData: GanttData
+  }
+
+  type VGanttProps = {
+    rowH: number
+
+    colW: number
+
+    data: PropType<GanttPropData>
+
+    view: PropType<ColUnit>
+
+    treeAttrs: { [key: string]: any }
+  }
+
+  type VGantt = Combined<VGanttData, VGanttMethods, VGanttComputed, VGanttProps>
+
+  export interface VGanttType extends FemessageComponent, VGantt {}
+
+  const VGanttConstruction: ExtendedVue<
+    Vue,
+    VGanttData,
+    VGanttMethods,
+    VGanttComputed,
+    VGanttProps
+  >
+
+  export default VGanttConstruction
+}

styleguide.config.js

@@ -2,6 +2,39 @@
 const path = require('path')
 const glob = require('glob')
 
+const sections = (() => {
+  const docs = glob
+    .sync('docs/*.md')
+    .map((p) => ({ name: path.basename(p, '.md'), content: p }))
+  const demos = []
+  let faq = '' // 约定至多只有一个faq.md
+  const guides = []
+  docs.forEach((d) => {
+    if (/^faq$/i.test(d.name)) {
+      d.name = d.name.toUpperCase()
+      faq = d
+    } else if (/^guide-/.test(d.name)) {
+      guides.push(d)
+    } else {
+      demos.push(d)
+    }
+  })
+  return [
+    {
+      name: 'Components',
+      components: 'src/index.vue',
+      usageMode: 'expand',
+    },
+    {
+      name: 'Demo',
+      sections: demos,
+      sectionDepth: 2,
+    },
+    ...(faq ? [faq] : []),
+    ...(guides.length ? [{ name: 'Guide', sections: guides }] : []),
+  ]
+})()
+
 module.exports = {
   title: 'v-gantt 文档',
   styleguideDir: 'docs',
@@ -11,19 +44,7 @@ module.exports = {
     url: 'https://github.com/FEMessage/v-gantt',
   },
   require: ['./styleguide.config.extra.js'],
-  sections: [
-    {
-      name: 'Components',
-      components: 'src/index.vue',
-      usageMode: 'expand',
-    },
-    {
-      name: 'Demo',
-      sections: glob
-        .sync('docs/*.md')
-        .map((p) => ({ name: path.basename(p, '.md'), content: p })),
-    },
-  ],
+  sections,
   exampleMode: 'expand',
   dangerouslyUpdateWebpackConfig(webpackConfig) {
     /**