Skip to content

Commit 6f7d7f2

Browse files
koutskouts
committed
fix: updated vuepress-plugin-vue-example
1 parent eb64a74 commit 6f7d7f2

File tree

6 files changed

+387
-2995
lines changed

6 files changed

+387
-2995
lines changed

‎docs/.vuepress/client.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import './styles/styles.scss'
2-
import { defineClientConfig } from '@vuepress/client'
2+
import { defineClientConfig } from 'vuepress/client'
33
import Dataset from '@/Dataset.vue'
44
import DatasetInfo from '@/DatasetInfo.vue'
55
import DatasetItem from '@/DatasetItem.vue'

‎docs/.vuepress/config.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { webpackBundler } from '@vuepress/bundler-webpack'
1+
import { viteBundler } from '@vuepress/bundler-vite'
22
import { docsearchPlugin } from '@vuepress/plugin-docsearch'
3+
import { shikiPlugin } from '@vuepress/plugin-shiki'
34
import { defaultTheme } from '@vuepress/theme-default'
45
import * as path from 'path'
56
import * as url from 'url'
@@ -9,9 +10,14 @@ import { vueExamplePlugin } from 'vuepress-plugin-vue-example'
910
const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
1011

1112
export default defineUserConfig({
13+
bundler: viteBundler(),
1214
plugins: [
15+
shikiPlugin({
16+
theme: 'github-dark-default',
17+
langs: ['bash', 'css', 'sass', 'scss', 'js', 'ts', 'json', 'vue', 'md', 'diff'],
18+
}),
1319
vueExamplePlugin({
14-
componentsPath: '/docs/.vuepress/components/',
20+
componentsPath: '../components/',
1521
}),
1622
docsearchPlugin({
1723
apiKey: 'a05c686d69be9a09e66f93b07bc7f855',
@@ -22,10 +28,6 @@ export default defineUserConfig({
2228
dest: 'public',
2329
title: 'vue-dataset',
2430
description: 'A vue component to display datasets with filtering, paging and sorting capabilities!',
25-
bundler: webpackBundler({
26-
postcss: {},
27-
vue: {},
28-
}),
2931
theme: defaultTheme({
3032
contributors: false,
3133
repo: 'https://github.com/kouts/vue-dataset/tree/next',

‎docs/.vuepress/styles/styles.scss

+122-49
Original file line numberDiff line numberDiff line change
@@ -3,66 +3,122 @@ $link-color: $primary !default;
33
$link-hover-color: lighten($link-color, 15%) !default;
44

55
/* Bootstrap imports */
6-
@import '~bootstrap/scss/_functions';
7-
@import '~bootstrap/scss/_variables';
6+
@import 'bootstrap/scss/_functions';
7+
@import 'bootstrap/scss/_variables';
88

9-
10-
@import '~bootstrap/scss/_mixins';
11-
@import '~bootstrap/scss/_root';
12-
@import '~bootstrap/scss/_reboot';
13-
@import '~bootstrap/scss/_type';
9+
@import 'bootstrap/scss/_mixins';
10+
@import 'bootstrap/scss/_root';
11+
@import 'bootstrap/scss/_reboot';
12+
@import 'bootstrap/scss/_type';
1413
/*
15-
@import '~bootstrap/scss/_images';
16-
@import '~bootstrap/scss/_code';
14+
@import 'bootstrap/scss/_images';
15+
@import 'bootstrap/scss/_code';
1716
*/
18-
@import '~bootstrap/scss/_grid';
19-
@import '~bootstrap/scss/_tables';
20-
@import '~bootstrap/scss/_forms';
21-
@import '~bootstrap/scss/_buttons';
17+
@import 'bootstrap/scss/_grid';
18+
@import 'bootstrap/scss/_tables';
19+
@import 'bootstrap/scss/_forms';
20+
@import 'bootstrap/scss/_buttons';
2221
/*
23-
@import '~bootstrap/scss/_transitions';
24-
@import '~bootstrap/scss/_dropdown';
22+
@import 'bootstrap/scss/_transitions';
23+
@import 'bootstrap/scss/_dropdown';
2524
*/
26-
@import '~bootstrap/scss/_button-group';
25+
@import 'bootstrap/scss/_button-group';
2726
/*
28-
@import '~bootstrap/scss/_input-group';
27+
@import 'bootstrap/scss/_input-group';
2928
*/
30-
@import '~bootstrap/scss/_custom-forms';
31-
@import '~bootstrap/scss/_nav';
29+
@import 'bootstrap/scss/_custom-forms';
30+
@import 'bootstrap/scss/_nav';
3231
/*
33-
@import '~bootstrap/scss/_navbar';
32+
@import 'bootstrap/scss/_navbar';
3433
*/
35-
@import '~bootstrap/scss/_card';
34+
@import 'bootstrap/scss/_card';
3635
/*
37-
@import '~bootstrap/scss/_breadcrumb';
36+
@import 'bootstrap/scss/_breadcrumb';
3837
*/
39-
@import '~bootstrap/scss/_pagination';
40-
@import '~bootstrap/scss/_badge';
38+
@import 'bootstrap/scss/_pagination';
39+
@import 'bootstrap/scss/_badge';
4140
/*
42-
@import '~bootstrap/scss/_jumbotron';
43-
@import '~bootstrap/scss/_alert';
44-
@import '~bootstrap/scss/_progress';
45-
@import '~bootstrap/scss/_media';
46-
@import '~bootstrap/scss/_list-group';
47-
@import '~bootstrap/scss/_close';
48-
@import '~bootstrap/scss/_toasts';
49-
@import '~bootstrap/scss/_modal';
50-
@import '~bootstrap/scss/_tooltip';
51-
@import '~bootstrap/scss/_popover';
52-
@import '~bootstrap/scss/_carousel';
53-
@import '~bootstrap/scss/_spinners';
41+
@import 'bootstrap/scss/_jumbotron';
42+
@import 'bootstrap/scss/_alert';
43+
@import 'bootstrap/scss/_progress';
44+
@import 'bootstrap/scss/_media';
45+
@import 'bootstrap/scss/_list-group';
46+
@import 'bootstrap/scss/_close';
47+
@import 'bootstrap/scss/_toasts';
48+
@import 'bootstrap/scss/_modal';
49+
@import 'bootstrap/scss/_tooltip';
50+
@import 'bootstrap/scss/_popover';
51+
@import 'bootstrap/scss/_carousel';
52+
@import 'bootstrap/scss/_spinners';
5453
*/
55-
@import '~bootstrap/scss/_utilities';
54+
@import 'bootstrap/scss/_utilities';
5655
/*
57-
@import '~bootstrap/scss/_print';
56+
@import 'bootstrap/scss/_print';
5857
*/
5958

6059
/* Max-widths */
61-
.mw1 {max-width: 35px !important;} .mw2 {max-width: 90px !important;} .mw3 {max-width: 145px !important;} .mw4 {max-width: 200px !important;} .mw5 {max-width: 255px !important;} .mw6 {max-width: 310px !important;} .mw7 {max-width: 365px !important;} .mw8 {max-width: 420px !important;} .mw9 {max-width: 475px !important;} .mw10 {max-width: 530px !important;} .mw11 {max-width: 585px !important;} .mw12 {max-width: 640px !important;} .mw13 {max-width: 695px !important;} .mw14 {max-width: 750px !important;} .mw15 {max-width: 805px !important;} .mw16 {max-width: 860px !important;} .mw17 {max-width: 915px !important;} .mw18 {max-width: 970px !important;}
62-
blockquote p {color: #777;}
60+
.mw1 {
61+
max-width: 35px !important;
62+
}
63+
.mw2 {
64+
max-width: 90px !important;
65+
}
66+
.mw3 {
67+
max-width: 145px !important;
68+
}
69+
.mw4 {
70+
max-width: 200px !important;
71+
}
72+
.mw5 {
73+
max-width: 255px !important;
74+
}
75+
.mw6 {
76+
max-width: 310px !important;
77+
}
78+
.mw7 {
79+
max-width: 365px !important;
80+
}
81+
.mw8 {
82+
max-width: 420px !important;
83+
}
84+
.mw9 {
85+
max-width: 475px !important;
86+
}
87+
.mw10 {
88+
max-width: 530px !important;
89+
}
90+
.mw11 {
91+
max-width: 585px !important;
92+
}
93+
.mw12 {
94+
max-width: 640px !important;
95+
}
96+
.mw13 {
97+
max-width: 695px !important;
98+
}
99+
.mw14 {
100+
max-width: 750px !important;
101+
}
102+
.mw15 {
103+
max-width: 805px !important;
104+
}
105+
.mw16 {
106+
max-width: 860px !important;
107+
}
108+
.mw17 {
109+
max-width: 915px !important;
110+
}
111+
.mw18 {
112+
max-width: 970px !important;
113+
}
114+
blockquote p {
115+
color: #777;
116+
}
63117

64118
/* Font sizes */
65-
.font-16 { font-size: 16px; }
119+
.font-16 {
120+
font-size: 16px;
121+
}
66122

67123
/* Browsers support table */
68124
#browsers-support + table .icon.outbound {
@@ -96,16 +152,17 @@ blockquote p {color: #777;}
96152
}
97153

98154
/* Fix margin-bottom for headers */
99-
.theme-container .theme-default-content:not(.custom) h2,
100-
.theme-container .theme-default-content:not(.custom) h3,
101-
.theme-container .theme-default-content:not(.custom) h4,
102-
.theme-container .theme-default-content:not(.custom) h5,
155+
.theme-container .theme-default-content:not(.custom) h2,
156+
.theme-container .theme-default-content:not(.custom) h3,
157+
.theme-container .theme-default-content:not(.custom) h4,
158+
.theme-container .theme-default-content:not(.custom) h5,
103159
.theme-container .theme-default-content:not(.custom) h6 {
104160
margin-bottom: 1rem;
105161
}
106162

107163
/* Fix footer nav links */
108-
.page-nav .nav-link, .page-meta .nav-link {
164+
.page-nav .nav-link,
165+
.page-meta .nav-link {
109166
display: inline;
110167
padding: 0;
111168
}
@@ -125,13 +182,13 @@ blockquote p {color: #777;}
125182
}
126183

127184
/* Fix card titles */
128-
.theme-container .theme-default-content:not(.custom) .card > .card-body > h5.card-title,
185+
.theme-container .theme-default-content:not(.custom) .card > .card-body > h5.card-title,
129186
.theme-container .theme-default-content:not(.custom) .card > .card-body > h6 {
130187
margin: 0px;
131188
padding: 0px;
132189
}
133190

134-
.theme-container .theme-default-content:not(.custom) .card>.card-body h3 {
191+
.theme-container .theme-default-content:not(.custom) .card > .card-body h3 {
135192
margin: 0px 0px 8px 0px;
136193
padding: 0px;
137194
}
@@ -152,4 +209,20 @@ h3 {
152209
/* Fix code blocks */
153210
code {
154211
font-family: inherit;
155-
}
212+
}
213+
214+
/* Fix Dataset pagination links */
215+
.theme-default-content ul.pagination li a {
216+
text-decoration: none;
217+
}
218+
219+
/* Fix Dataset card title spacing */
220+
.theme-default-content h5.card-title {
221+
position: relative;
222+
padding-top: 3rem;
223+
}
224+
225+
/* Fix navbar item hover */
226+
.vp-navbar-item > a:hover {
227+
border-bottom: none;
228+
}

‎docs/installation/index.md

+7-12
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,24 @@
11
## Using module bundlers
22

3-
Most likely you are using a module bundler like [Webpack](https://webpack.js.org/), which makes it easy to directly include `vue-dataset` into your project.
3+
Most likely you are using a module bundler like [Webpack](https://webpack.js.org/), which makes it easy to directly include `vue-dataset` into your project.
44

55
Install `vue-dataset@next` via npm
6-
```
6+
7+
```bash
78
npm install vue-dataset@next --save
89
```
910

10-
Use the ```import``` statement to include the `vue-dataset` components into your bundle.
11+
Use the `import` statement to include the `vue-dataset` components into your bundle.
1112

1213
```js
13-
import {
14-
Dataset,
15-
DatasetItem,
16-
DatasetInfo,
17-
DatasetPager,
18-
DatasetSearch,
19-
DatasetShow
20-
} from 'vue-dataset'
14+
import { Dataset, DatasetItem, DatasetInfo, DatasetPager, DatasetSearch, DatasetShow } from 'vue-dataset'
2115
```
2216

2317
## Using a script tag
2418

2519
A `vue-dataset.umd.js` file suitable for including `vue-dataset` using a `script` tag into your page, is resides inside the `dist` folder.
2620

27-
``` html
21+
```html
2822
<script type="text/javascript" src="vue-dataset.umd.js"></script>
2923
```
3024

@@ -43,6 +37,7 @@ app.component('DatasetShow', VueDataset.DatasetShow)`
4337
```
4438

4539
## Translations
40+
4641
It's possible to customize the texts of `vue-dataset` by extending the `Dataset` component using the following pattern.
4742
4843
```js

‎package.json

+11-6
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,10 @@
5050
"@vitest/coverage-v8": "^2.0.5",
5151
"@vue/compiler-sfc": "^3.4.38",
5252
"@vue/test-utils": "^2.4.6",
53-
"@vuepress/bundler-webpack": "^2.0.0-rc.9",
54-
"@vuepress/client": "2.0.0-rc.2",
55-
"@vuepress/plugin-docsearch": "2.0.0-rc.26",
56-
"@vuepress/theme-default": "^2.0.0-rc.26",
53+
"@vuepress/bundler-vite": "2.0.0-rc.15",
54+
"@vuepress/plugin-docsearch": "2.0.0-rc.41",
55+
"@vuepress/plugin-shiki": "2.0.0-rc.41",
56+
"@vuepress/theme-default": "^2.0.0-rc.41",
5757
"bootstrap": "^4.6.2",
5858
"eslint": "^9.9.0",
5959
"husky": "^9.1.4",
@@ -62,12 +62,17 @@
6262
"make-coverage-badge": "^1.2.0",
6363
"prettier": "3.3.3",
6464
"sass": "~1.77.8",
65+
"shiki": "^1.14.1",
6566
"vite": "^5.4.1",
6667
"vite-plugin-html": "^3.2.2",
6768
"vitest": "^2.0.5",
6869
"vue-router": "^4.4.3",
69-
"vuepress": "^2.0.0-rc.9",
70-
"vuepress-plugin-vue-example": "2.0.8",
70+
"vuepress": "2.0.0-rc.15",
71+
"vuepress-plugin-vue-example": "3.0.2",
7172
"vuex": "^4.1.0"
73+
},
74+
"resolutions": {
75+
"@typescript-eslint/utils": "^8.0.0",
76+
"vuepress": "2.0.0-rc.15"
7277
}
7378
}

0 commit comments

Comments
 (0)