Skip to content

Commit 150deb8

Browse files
DjalerDjaler
committed
docs: demo on github pages
1 parent a1dadf4 commit 150deb8

File tree

11 files changed

+253
-2
lines changed

11 files changed

+253
-2
lines changed

‎.github/workflows/demo.yml

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
name: Deploy demo to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ master ]
6+
7+
permissions:
8+
contents: write
9+
10+
jobs:
11+
demo:
12+
runs-on: ubuntu-latest
13+
14+
steps:
15+
- name: Check out Git repository
16+
uses: actions/checkout@v2
17+
- name: Set up Node.js
18+
uses: actions/setup-node@v2
19+
with:
20+
node-version: 16.9
21+
- name: Cache pnpm modules
22+
uses: actions/cache@v2
23+
with:
24+
path: ~/.pnpm-store
25+
key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
26+
restore-keys: ${{ runner.os }}-
27+
- name: Install dependencies
28+
run: corepack pnpm install
29+
- name: Run build
30+
run: npm run demo:build
31+
- name: Deploy demo
32+
uses: JamesIves/[email protected]
33+
with:
34+
branch: gh-pages
35+
folder: packages/demo/dist

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
"test:vue3": "npm run switch-vue3 && cd packages/tests-vue3 && npm run test",
1313
"test:all": "npm run test:core && npm run test:vue2 && npm run test:vue3",
1414
"build": "cd packages/core && npm run build",
15+
"demo": "cd packages/demo && npm run dev",
16+
"demo:build": "cd packages/demo && npm run build",
1517
"prerelease": "npm run lint && npm run test:all && npm run build",
1618
"release": "standard-version --preset @djaler/standard",
1719
"release:github": "conventional-github-releaser --preset @djaler/standard",

‎packages/core/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
[![npm](https://img.shields.io/npm/v/vue-use-route-query?style=for-the-badge)](https://www.npmjs.com/package/vue-use-route-query)
22
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-use-route-query?style=for-the-badge)](https://bundlephobia.com/result?p=vue-use-route-query)
3+
[![demo](https://img.shields.io/badge/demo-green?style=for-the-badge)](https://djaler.github.io/vue-use-route-query/#/)
34

45
# Vue Use Route Query
56

‎packages/demo/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>vue-use-router-query demo</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="./src/main.ts"></script>
11+
</body>
12+
</html>

‎packages/demo/package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "demo",
3+
"private": true,
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build"
7+
},
8+
"dependencies": {
9+
"@picocss/pico": "1.5.2",
10+
"vue": "3.2.33",
11+
"vue-router": "4.0.14",
12+
"vue-use-route-query": "workspace:*"
13+
},
14+
"devDependencies": {
15+
"@vitejs/plugin-vue": "2.3.2",
16+
"@vue/compiler-sfc": "3.2.33",
17+
"vite": "2.9.8"
18+
}
19+
}

‎packages/demo/src/App.vue

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<main class="container">
3+
<router-view/>
4+
</main>
5+
</template>
6+
7+
<script lang="ts">
8+
import { defineComponent } from 'vue';
9+
10+
export default defineComponent({
11+
name: 'App',
12+
});
13+
</script>

‎packages/demo/src/main.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import '@picocss/pico/css/pico.min.css';
2+
3+
import { createApp } from 'vue';
4+
import { createRouter, createWebHashHistory } from 'vue-router';
5+
6+
import App from './App.vue';
7+
import Main from './views/Main.vue';
8+
9+
const router = createRouter({
10+
history: createWebHashHistory(),
11+
routes: [
12+
{ path: '/', component: Main },
13+
],
14+
});
15+
16+
createApp(App)
17+
.use(router)
18+
.mount('#app');

‎packages/demo/src/shims-vue.d.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
declare module '*.vue' {
2+
import { DefineComponent } from 'vue';
3+
4+
const component: DefineComponent;
5+
export default component;
6+
}

‎packages/demo/src/views/Main.vue

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<template>
2+
<form>
3+
<label>
4+
String
5+
<input v-model="stringQuery" type="text">
6+
</label>
7+
8+
<label>
9+
Integer
10+
<input v-model.number="integerQuery" type="number">
11+
</label>
12+
13+
<label>
14+
Boolean
15+
<input v-model="booleanQuery" type="checkbox">
16+
</label>
17+
18+
<label>
19+
Enum
20+
<select v-model="enumQuery">
21+
<option></option>
22+
<option value="a">A</option>
23+
<option value="b">B</option>
24+
<option value="c">C</option>
25+
</select>
26+
</label>
27+
</form>
28+
</template>
29+
30+
<script lang="ts">
31+
import { defineComponent } from 'vue';
32+
import { useRouteQuery, enumTransformer, integerTransformer, booleanTransformer } from 'vue-use-route-query/src';
33+
34+
enum Enum {
35+
A = 'a',
36+
B = 'b',
37+
C = 'c'
38+
}
39+
40+
export default defineComponent({
41+
name: 'Main',
42+
setup() {
43+
const stringQuery = useRouteQuery('string', '');
44+
const integerQuery = useRouteQuery('integer', 0, integerTransformer);
45+
const booleanQuery = useRouteQuery('boolean', false, booleanTransformer);
46+
const enumQuery = useRouteQuery('enum', null, enumTransformer(Enum));
47+
48+
return {
49+
stringQuery,
50+
integerQuery,
51+
booleanQuery,
52+
enumQuery,
53+
};
54+
},
55+
});
56+
</script>
57+
58+
<style scoped>
59+
60+
</style>

‎packages/demo/vite.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import vue from '@vitejs/plugin-vue';
2+
import { defineConfig } from 'vite';
3+
4+
export default defineConfig({
5+
base: '/vue-use-route-query/',
6+
plugins: [
7+
vue(),
8+
],
9+
optimizeDeps: {
10+
exclude: [
11+
'vue-demi',
12+
],
13+
},
14+
});

‎pnpm-lock.yaml

+73-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)