From 1cf264934a38c85437960614fdd5b3978e92b208 Mon Sep 17 00:00:00 2001 From: Justin Xiao Date: Mon, 20 Nov 2023 02:14:14 -0800 Subject: [PATCH] docs: add documentation --- README.md | 61 +++++++++++++++++------------------- package.json | 2 +- src/stories/Introduction.mdx | 22 ++++++++++--- src/stories/VWafermap.mdx | 40 ++++++----------------- 4 files changed, 56 insertions(+), 69 deletions(-) diff --git a/README.md b/README.md index 8225f57..641807a 100644 --- a/README.md +++ b/README.md @@ -62,65 +62,56 @@ To use this wafermap component, follow these steps: npm install vue-wafer-painter ``` -2. Import the component into your Vue application: +2. Import CSS in main.js / main.ts: ```javascript - import VWafermap from 'vue-wafer-painter' + import { createApp } from 'vue' + import './style.css' + + import 'vue-wafer-painter/dist/style.css' // add this row + + import App from './App.vue' + + createApp(App).mount('#app') ``` -3. Add the VWafermap component to your template: +3. Import and add the component to your template: ```html + ``` ### Usage
VWafermap -Here's a example of Coords data: - -```javascript -//src\packages\VWafermap\src\types.ts - -export interface Coords { - info: Array - x: number - y: number - dut: number - color: string -} - -const coords = [ - { x: -2, y: -2, info: ['1'], dut: 1, color: '#ff8080' }, - { x: 0, y: 1, info: ['2'], dut: 2, color: 'green' }, - { x: 1, y: 0, info: ['4'], dut: 1, color: 'rgb(0, 102, 204)' } - { x: 2, y: 0, info: ['7', '789'], dut: 1, color: 'red' }, - { x: 2, y: 2, info: ['9'], dut: 3, color: '#b800e6' } -] - -``` - Here's the simplest example of using the VWafermap component: ```html - - ``` @@ -182,6 +173,10 @@ Here's the simplest example of using the VWafermap component: --- +## 📝 Todo + +- [x] Better TypeScript support + ## 📄 License This project is licensed under the MIT License. See the [LICENSE](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository) file for additional info. diff --git a/package.json b/package.json index ec47757..febbbb1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "vue-wafer-painter", "description": "The Wafermap component library based on Vue 3 provides a versatile and customizable solution for visualizing wafermaps, commonly used in semiconductor manufacturing.", - "version": "1.0.7", + "version": "1.0.8", "private": false, "author": "ttpss930141011 (https://github.com/ttpss930141011)", "license": "MIT", diff --git a/src/stories/Introduction.mdx b/src/stories/Introduction.mdx index 7cfe23f..e25aa4c 100644 --- a/src/stories/Introduction.mdx +++ b/src/stories/Introduction.mdx @@ -44,18 +44,30 @@ To use this wafermap component, follow these steps: npm install vue-wafer-painter ``` -2. Import the component into your Vue application: +2. Import CSS in main.js / main.ts: - ```javascript - import VWafermap from 'vue-wafer-painter' - ``` +```javascript +import { createApp } from 'vue' +import './style.css' + +import 'vue-wafer-painter/dist/style.css' // add this row + +import App from './App.vue' + +createApp(App).mount('#app') +``` -3. Add the VWafermap component to your template: +3. Import and add the component to your template: ```html + ``` ## 📄 License diff --git a/src/stories/VWafermap.mdx b/src/stories/VWafermap.mdx index f712193..f6d0a23 100644 --- a/src/stories/VWafermap.mdx +++ b/src/stories/VWafermap.mdx @@ -38,47 +38,26 @@ VWafermap is used to draw a 2D wafermap with a given set of coordinates. ## 🧑‍💻 Usage -Here's a example of Coords data: - -```javascript -//src\packages\VWafermap\src\types.ts - -export interface Coords { - info: Array - x: number - y: number - dut: number - color: string -} - -const coords = [ - { x: -2, y: -2, info: ['1'], dut: 1, color: '#ff8080' }, - { x: 0, y: 1, info: ['2'], dut: 2, color: 'green' }, - { x: 1, y: 0, info: ['4'], dut: 1, color: 'rgb(0, 102, 204)' } - { x: 2, y: 0, info: ['7', '789'], dut: 1, color: 'red' }, - { x: 2, y: 2, info: ['9'], dut: 3, color: '#b800e6' } -] - -``` - Here's the simplest example of using the VWafermap component: ```html - - ``` @@ -315,4 +294,5 @@ flex-direction: column; } `} +