Skip to content

Commit 817d09f

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Adding example
1 parent 51103aa commit 817d09f

File tree

9 files changed

+166
-59
lines changed

9 files changed

+166
-59
lines changed

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
function gtag() { dataLayer.push(arguments); }
44
gtag('js', new Date());
55

6-
gtag('config', 'UA-XXXXXXXXX-X');</script><meta name="base" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/"><meta name="charset" content="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="vuetify-resize-drawer, vuetify, navigation drawer, drawer, resize, resizable, vue, vue2, plugin, log, javascript, magical, webdevnerdstuff, wdns"><meta name="description" content="tbd"><meta name="author" content="WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)"><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="rating" content="General"><meta name="theme-color" content="#21252a"><meta name="og:type" content="website"><meta name="og:title" content="Vuetify Resize Drawer"><meta name="og:image" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/images/vuetify-resize-drawer-social.jpg"><meta name="og:image:alt" content="tbd"><meta name="og:image:width" content="1200"><meta name="og:image:height" content="630"><meta name="og:description" content="tbd"><meta name="og:site_name" content="Vuetify Resize Drawer"><meta name="og:locale" content="en_US"></head><body><noscript><strong>We're sorry but Vuetify Resize Drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script><script defer="defer" src="vuetify-resize-drawer.js?66e0787317dc8f23071a"></script></body></html>
6+
gtag('config', 'UA-XXXXXXXXX-X');</script><meta name="base" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/"><meta name="charset" content="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="vuetify-resize-drawer, vuetify, navigation drawer, drawer, resize, resizable, vue, vue2, plugin, log, javascript, magical, webdevnerdstuff, wdns"><meta name="description" content="tbd"><meta name="author" content="WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)"><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="rating" content="General"><meta name="theme-color" content="#21252a"><meta name="og:type" content="website"><meta name="og:title" content="Vuetify Resize Drawer"><meta name="og:image" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/images/vuetify-resize-drawer-social.jpg"><meta name="og:image:alt" content="tbd"><meta name="og:image:width" content="1200"><meta name="og:image:height" content="630"><meta name="og:description" content="tbd"><meta name="og:site_name" content="Vuetify Resize Drawer"><meta name="og:locale" content="en_US"></head><body><noscript><strong>We're sorry but Vuetify Resize Drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script><script defer="defer" src="vuetify-resize-drawer.js?22d7eea06b96d770c76b"></script></body></html>

‎docs/vuetify-resize-drawer.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@
8686
"postcss-html": "^1.3.0",
8787
"postcss-import": "^14.1.0",
8888
"postcss-scss": "^4.0.3",
89+
"prism-themes": "git+https://github.com/PrismJS/prism-themes.git",
8990
"sass": "~1.32.12",
9091
"sass-loader": "^12.4.0",
9192
"style-loader": "^3.3.1",

‎src/App.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@
5757
</template>
5858
</v-navigation-drawer>
5959

60-
<!-- @update="logEvent($event, 'update')" -->
6160
<ResizeDrawer
6261
name="ResizeDrawer"
6362
clipped
@@ -75,10 +74,6 @@
7574
@input="drawerInput"
7675
@transitionend="drawerTransitionend"
7776
>
78-
<!-- <template #handle>
79-
<v-icon>mdi-arrow-right-circle</v-icon>
80-
</template> -->
81-
8277
<template #prepend>
8378
<header>
8479
<v-list-item>
@@ -257,6 +252,9 @@ export default {
257252
</script>
258253

259254
<style lang="scss">
255+
@import 'prism-themes/themes/prism-night-owl.css';
256+
@import 'vue-code-highlight/themes/window.css';
257+
260258
html {
261259
scroll-behavior: smooth;
262260
scroll-padding-top: 70px;

‎src/components/Documentation.vue‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,8 @@
2525

2626
<v-row>
2727
<v-col cols="12">
28-
<vue-code-highlight language="js">
29-
<vue-code-highlight language="shell">
30-
<pre>npm i vuetify-resize-drawer</pre>
31-
</vue-code-highlight>
28+
<vue-code-highlight language="bash">
29+
<pre>npm i vuetify-resize-drawer</pre>
3230
</vue-code-highlight>
3331
</v-col>
3432
</v-row>
@@ -53,8 +51,8 @@
5351
<!-- SASS Variables -->
5452
<SassVariables :classes="classes" />
5553

56-
<!-- Examples -->
57-
<Examples :classes="classes" />
54+
<!-- Example -->
55+
<Example :classes="classes" />
5856

5957
<!-- Dependencies -->
6058
<Dependencies :classes="classes" :links="links" />
@@ -72,7 +70,7 @@ import { component as VueCodeHighlight } from 'vue-code-highlight';
7270
import Dependencies from '@components/documentation/Dependencies.vue';
7371
import Description from '@components/documentation/Description.vue';
7472
import Events from '@components/documentation/Events.vue';
75-
import Examples from '@components/documentation/Examples.vue';
73+
import Example from '@components/documentation/Example.vue';
7674
import Legal from '@components/documentation/Legal.vue';
7775
import License from '@components/documentation/License.vue';
7876
import Props from '@components/documentation/Props.vue';
@@ -86,7 +84,7 @@ export default {
8684
Dependencies,
8785
Description,
8886
Events,
89-
Examples,
87+
Example,
9088
Legal,
9189
License,
9290
Props,
@@ -116,13 +114,5 @@ export default {
116114
appLink: 'app-link text-decoration-none primary--text font-weight-medium d-inline-block font-weight-bold',
117115
},
118116
}),
119-
created() {
120-
121-
},
122117
};
123118
</script>
124-
125-
<style lang="scss">
126-
@import 'vue-code-highlight/themes/prism-tomorrow.css';
127-
@import 'vue-code-highlight/themes/window.css';
128-
</style>

‎src/components/Menu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default {
4444
{ title: 'Events', icon: 'mdi-calendar-star', href: '#events' },
4545
{ title: 'Slots', icon: 'mdi-slot-machine', href: '#slots' },
4646
{ title: 'SASS Variables', icon: 'mdi-sass', href: '#sass-variables' },
47-
{ title: 'Examples', icon: 'mdi-code-json', href: '#examples' },
47+
{ title: 'Example', icon: 'mdi-code-json', href: '#example' },
4848
{ title: 'Dependencies', icon: 'mdi-asterisk-circle-outline', href: '#dependencies' },
4949
{ title: 'License', icon: 'mdi-card-account-details-outline', href: '#license' },
5050
{ title: 'Legal', icon: 'mdi-scale-balance', href: '#legal' },

‎src/components/documentation/Example.vue‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<template>
2+
<v-row>
3+
<v-col class="mb-5" cols="12" id="example">
4+
<h2 :class="classes.h2">
5+
<a href="#example" :class="classes.headerA">#</a>
6+
Example
7+
</h2>
8+
9+
<v-tabs v-model="tab" centered>
10+
<v-tab v-for="item in items" :key="item.tab">
11+
{{ item.tab }}
12+
</v-tab>
13+
</v-tabs>
14+
15+
<v-tabs-items v-model="tab" class="pt-5">
16+
<v-tab-item v-for="item in items" :key="item.tab">
17+
<v-row>
18+
<v-col cols="10" offset="1">
19+
<template v-if="item.tab === 'Template'">
20+
<vue-code-highlight language="html">
21+
<pre>
22+
&lt;template>
23+
&lt;v-app id="home">
24+
&lt;ResizeDrawer
25+
name="ResizeDrawer"
26+
fixed
27+
:color="drawerOptions.color"
28+
:options="drawerOptions"
29+
:right="drawerOptions.right"
30+
:value="drawer"
31+
@close="drawerClose"
32+
@handle:click="handleClick"
33+
@handle:dblclick="handleDoubleClick"
34+
@handle:drag="handleDrag"
35+
@handle:mousedown="handleMousedown"
36+
@handle:mouseup="handleMouseup"
37+
@input="drawerInput"
38+
@transitionend="drawerTransitionend"
39+
>
40+
&lt;template #handle>
41+
&lt;v-icon>mdi-arrow-right-circle&lt;/v-icon>
42+
&lt;/template>
43+
44+
&lt;template #prepend>
45+
&lt;header>
46+
Prepend Slot
47+
&lt;/header>
48+
&lt;/template>
49+
50+
&lt;template #append>
51+
&lt;v-footer>Footer Slot&lt;/v-footer>
52+
&lt;/template>
53+
&lt;/ResizeDrawer>
54+
&lt;/v-app>
55+
&lt;/template></pre
56+
>
57+
</vue-code-highlight>
58+
</template>
59+
<template v-else>
60+
<vue-code-highlight language="js">
61+
<pre>
62+
&lt;script>
63+
import ResizeDrawer from 'vuetify-resize-drawer';
64+
65+
export default {
66+
name: 'App',
67+
components: {
68+
ResizeDrawer,
69+
},
70+
data: () => ({
71+
drawer: true,
72+
drawerOptions: {
73+
handlePosition: 'center',
74+
overlayColor: '#f00',
75+
overlayOpacity: '100%',
76+
right: false,
77+
saveWidth: true,
78+
storageName: 'vuetify-resize-drawer',
79+
width: '256px',
80+
},
81+
}),
82+
methods: {
83+
drawerClose(val) {
84+
// Do something...
85+
},
86+
drawerInput(val) {
87+
// Do something...
88+
},
89+
drawerTransitionend(evt) {
90+
// Do something...
91+
},
92+
handleClick(evt) {
93+
// Do something...
94+
},
95+
handleDoubleClick(evt) {
96+
// Do something...
97+
},
98+
handleDrag(evt) {
99+
// Do something...
100+
},
101+
handleMousedown(evt) {
102+
// Do something...
103+
},
104+
handleMouseup(evt) {
105+
// Do something...
106+
},
107+
},
108+
};
109+
&lt;/script></pre
110+
>
111+
</vue-code-highlight>
112+
</template>
113+
<br />
114+
</v-col>
115+
</v-row>
116+
</v-tab-item>
117+
</v-tabs-items>
118+
</v-col>
119+
</v-row>
120+
</template>
121+
122+
<script>
123+
import { component as VueCodeHighlight } from 'vue-code-highlight';
124+
125+
export default {
126+
name: 'Example',
127+
components: {
128+
VueCodeHighlight,
129+
},
130+
props: {
131+
classes: {
132+
type: Object,
133+
required: true,
134+
},
135+
},
136+
data: () => ({
137+
tab: null,
138+
items: [
139+
{ tab: 'Template', content: 'Tab 1 Content' },
140+
{ tab: 'Script', content: 'Tab 2 Content' },
141+
],
142+
}),
143+
methods: {
144+
},
145+
mounted() { },
146+
};
147+
</script>

‎src/components/documentation/Examples.vue‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

0 commit comments

Comments
 (0)