diff --git a/README.md b/README.md index 5394640a..81fc075f 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ import { MucBanner } from "@muenchen/muc-patternlab-vue"; git clone https://github.com/it-at-m/muc-patternlab-vue.git cd muc-patternlab-vue npm install -npm run dev +npm run docs:dev ``` ## Documentation diff --git a/docs/.vitepress/components/DemoContainer.vue b/docs/.vitepress/components/DemoContainer.vue new file mode 100644 index 00000000..83102d02 --- /dev/null +++ b/docs/.vitepress/components/DemoContainer.vue @@ -0,0 +1,16 @@ + + + \ No newline at end of file diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts new file mode 100644 index 00000000..5c57de54 --- /dev/null +++ b/docs/.vitepress/config.ts @@ -0,0 +1,33 @@ +const path = require('path') + +module.exports = { + title: 'My Lib', + description: 'Just playing around.', + themeConfig: { + repo: 'https://github.com/wuruoyun/vue-component-lib-starter', + sidebar: [ + { + text: 'Introduction', + children: [ + { text: 'What is My Lib?', link: '/' }, + { text: 'Getting Started', link: '/guide/' }, + ], + }, { + text: 'Components', + children: [ + { text: 'MucBanner', link: '/components/muc-banner' }, + { text: 'MucButton', link: '/components/muc-button' }, + { text: 'MucIntro', link: '/components/muc-intro' }, + ], + } + ], + }, + vite: { + resolve: { + alias: { + 'muc-patternlab-vue': path.resolve(__dirname, '../../src'), + }, + dedupe: ['vue'], // avoid error when using dependencies that also use Vue + } + } +} diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css new file mode 100644 index 00000000..c65a98be --- /dev/null +++ b/docs/.vitepress/theme/custom.css @@ -0,0 +1,5 @@ +.demo-container { + border: 1px solid lightgrey; + border-radius: 5px; + padding: 10px 20px; +} \ No newline at end of file diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js new file mode 100644 index 00000000..17ae96e2 --- /dev/null +++ b/docs/.vitepress/theme/index.js @@ -0,0 +1,13 @@ +import DefaultTheme from 'vitepress/theme' +import DemoContainer from '../components/DemoContainer.vue' +import MucPatternlabVue from 'muc-patternlab-vue' + +import './custom.css' + +export default { + ...DefaultTheme, + enhanceApp({ app }) { + app.use(MucPatternlabVue) + app.component('DemoContainer', DemoContainer) + } +} diff --git a/docs/components/demo/MucBanner/Basic.vue b/docs/components/demo/MucBanner/Basic.vue new file mode 100644 index 00000000..33d38c0b --- /dev/null +++ b/docs/components/demo/MucBanner/Basic.vue @@ -0,0 +1,20 @@ + + \ No newline at end of file diff --git a/docs/components/demo/MucButton/Basic.vue b/docs/components/demo/MucButton/Basic.vue new file mode 100644 index 00000000..e1ffb954 --- /dev/null +++ b/docs/components/demo/MucButton/Basic.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/docs/components/demo/MucIntro/Basic.vue b/docs/components/demo/MucIntro/Basic.vue new file mode 100644 index 00000000..5b27b08e --- /dev/null +++ b/docs/components/demo/MucIntro/Basic.vue @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/docs/components/index.md b/docs/components/index.md new file mode 100644 index 00000000..bcf4a602 --- /dev/null +++ b/docs/components/index.md @@ -0,0 +1,3 @@ +# Components + +You may add a summary of the components here. \ No newline at end of file diff --git a/docs/components/muc-banner.md b/docs/components/muc-banner.md new file mode 100644 index 00000000..bfbb4aee --- /dev/null +++ b/docs/components/muc-banner.md @@ -0,0 +1,35 @@ + + +# muc-banner + +//todo describe banner + +## Example Usage + + + + + +<<< @/components/demo/MucBanner/Basic.vue + +## Reference + +### Properties + +| Name | Type | Default | Description | +| ---- | ------ | ------- | -------------- | +| msg | string | null | Messge to show | + +### Events + +| Name | Parameters | Description | +| ---- | ---------- | ----------- | +| | | | + +### Slots + +| Name | Parameters | Description | +| ---- | ---------- | ----------- | +| | | | diff --git a/docs/components/muc-button.md b/docs/components/muc-button.md new file mode 100644 index 00000000..aa9585fc --- /dev/null +++ b/docs/components/muc-button.md @@ -0,0 +1,35 @@ + + +# muc-button + +//todo describe button + +## Example Usage + + + + + +<<< @/components/demo/MucButton/Basic.vue + +## Reference + +### Properties + +| Name | Type | Default | Description | +| ---- | ------ | ------- | -------------- | +| msg | string | null | Messge to show | + +### Events + +| Name | Parameters | Description | +| ---- | ---------- | ----------- | +| | | | + +### Slots + +| Name | Parameters | Description | +| ---- | ---------- | ----------- | +| | | | diff --git a/docs/components/muc-intro.md b/docs/components/muc-intro.md new file mode 100644 index 00000000..1755ad15 --- /dev/null +++ b/docs/components/muc-intro.md @@ -0,0 +1,35 @@ + + +# muc-intro + +//todo describe intro + +## Example Usage + + + + + +<<< @/components/demo/MucIntro/Basic.vue + +## Reference + +### Properties + +| Name | Type | Default | Description | +| ---- | ------ | ------- | -------------- | +| msg | string | null | Messge to show | + +### Events + +| Name | Parameters | Description | +| ---- | ---------- | ----------- | +| | | | + +### Slots + +| Name | Parameters | Description | +| ---- | ---------- | ----------- | +| | | | diff --git a/docs/guide/index.md b/docs/guide/index.md new file mode 100644 index 00000000..acd35872 --- /dev/null +++ b/docs/guide/index.md @@ -0,0 +1,61 @@ +# Getting Started + +You may add the usage of the library here. + +## Setup + +This setup assumes your client app is created with Vite and vue-ts template, and you use 'npm link' to link to `my-lib` locally. + +In your `package.json`, you shall have the dependencies compatible with the following: + +```json +"dependencies": { + "vue": "^3.2.25" +} +``` + +In your `vite.config.ts`, you shall configure to dedupe `vue`: + +```ts +export default defineConfig({ + resolve: { + dedupe: ['vue'], + }, +}); +``` + +In your `main.ts`, you shall import the libraries and CSS: + +```ts +import 'my-lib/dist/style.css'; +``` + +In your Webcomponents Entry you should import the css and svg sprite for MDE5-Icons: + +```html + + + + + +``` + +Import components from this library in your own component: + +```html + +``` diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 00000000..b0a6f698 --- /dev/null +++ b/docs/index.md @@ -0,0 +1,3 @@ +# What is muc-patternlab-vue? + +//todo describe lib \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 56d44ab1..00000000 --- a/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - Muc Patternlab Vue Components Demo - - - - - - - -
- - - diff --git a/package.json b/package.json index dc466238..0818e8a0 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,6 @@ "license": "MIT", "version": "0.1.0", "private": false, - "type": "module", "module": "./dist/muc-patternlab-vue.es.js", "types": "./dist/types/index.d.ts", "repository": { @@ -20,16 +19,20 @@ ".": { "types": "./dist/types/index.d.ts", "import": "./dist/muc-patternlab-vue.es.js" - } + }, + "./dist/assets/temporary/muc-icons.svg": "./dist/assets/temporary/muc-icons.svg", + "./dist/assets/temporary/muenchende-fontface.css": "./dist/assets/temporary/muenchende-fontface.css", + "./dist/assets/temporary/muenchende-style.css": "./dist/assets/temporary/muenchende-style.css" }, "files": [ "src", "dist" ], "scripts": { - "dev": "vite", + "docs:dev": "vitepress dev docs", + "docs:build": "vitepress build docs", + "docs:serve": "vitepress serve docs", "build": "rimraf dist && npm run type-check && npm run build-only", - "preview": "vite preview", "test:unit": "vitest", "build-only": "vite build", "type-check": "vue-tsc --build --force", @@ -61,6 +64,7 @@ "semantic-release": "^23.0.0", "typescript": "~5.3.0", "vite": "^5.0.11", + "vitepress": "^0.22.4", "vite-plugin-dts": "^3.0.0", "vitest": "^1.2.2", "vue-tsc": "^1.8.27" diff --git a/src/App.vue b/src/App.vue deleted file mode 100644 index c191ae13..00000000 --- a/src/App.vue +++ /dev/null @@ -1,69 +0,0 @@ - - - - - diff --git a/src/main.ts b/src/main.ts deleted file mode 100644 index 01433bca..00000000 --- a/src/main.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' - -createApp(App).mount('#app')