Skip to content

Commit 5d3a9ba

Browse files
PekoPPTPekoPPT
authored
docs: move options api demos to public repo (#688)
1 parent 760130e commit 5d3a9ba

File tree

4,206 files changed

+400036
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

4,206 files changed

+400036
-0
lines changed

‎vue-options-api-demos/README.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Kendo UI for Vue Options API Demos Index
2+
3+
This folder contains examples for the Options API demos of the Kendo UI for Vue suite. The examples demonstrate how the different Kendo UI for Vue components are used in various scenarios. Below is a list of subfolders, each containing examples for a specific feature:
4+
5+
- [Animation](./animation/examples)
6+
- [Buttons](./buttons/examples)
7+
- [Charts](./charts/examples)
8+
- [Common](./common/examples)
9+
- [Conversational UI](./conversational-ui/examples)
10+
- [Data Tools](./datatools/examples)
11+
- [Date Inputs](./dateinputs/examples)
12+
- [Dialogs](./dialogs/examples)
13+
- [Dropdowns](./dropdowns/examples)
14+
- [Editor](./editor/examples)
15+
- [Excel](./excel/examples)
16+
- [Form](./form/examples)
17+
- [Gauges](./gauges/examples)
18+
- [Grid](./grid/examples)
19+
- [Indicators](./indicators/examples)
20+
- [Inputs](./inputs/examples)
21+
- [Internationalization (Intl)](./intl/examples)
22+
- [Labels](./labels/examples)
23+
- [Layout](./layout/examples)
24+
- [ListBox](./listbox/examples)
25+
- [ListView](./listview/examples)
26+
- [Notification](./notification/examples)
27+
- [PDF](./pdf/examples)
28+
- [Popup](./popup/examples)
29+
- [Progress Bars](./progressbars/examples)
30+
- [Scheduler](./scheduler/examples)
31+
- [ScrollView](./scrollview/examples)
32+
- [Tooltip](./tooltip/examples)
33+
- [TreeList](./treelist/examples)
34+
- [TreeView](./treeview/examples)
35+
- [Upload](./upload/examples)
36+
37+
Each subfolder contains example implementations and usage scenarios for the respective feature, demonstrating the usage of the Kendo UI for Vue suite in the context of Options API.

‎vue-options-api-demos/animation/animations/entering/main.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue';
2+
import App from './main.vue';
3+
4+
createApp(App).mount('#app');

‎vue-options-api-demos/animation/animations/entering/main.vue

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div class="example">
3+
<div>
4+
<dl>
5+
<dt>
6+
Animate:
7+
</dt>
8+
<dd>
9+
<kbutton @click="animate">Animate</kbutton>
10+
</dd>
11+
</dl>
12+
<Animation :appear="show"
13+
:transition-name="'custom-animation'">
14+
<div class="content">CONTENT</div>
15+
</Animation>
16+
</div>
17+
</div>
18+
</template>
19+
<script>
20+
import './styles.css';
21+
import { Button } from '@progress/kendo-vue-buttons';
22+
import { Animation } from '@progress/kendo-vue-animation';
23+
24+
export default {
25+
components: {
26+
'Animation': Animation,
27+
'kbutton': Button
28+
},
29+
data: function () {
30+
return {
31+
show: true
32+
};
33+
},
34+
methods:{
35+
animate(){
36+
this.show = !this.show;
37+
}
38+
}
39+
}
40+
</script>

‎vue-options-api-demos/animation/animations/entering/styles.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.custom-animation-enter {
2+
opacity: 0;
3+
}
4+
.custom-animation-enter-active {
5+
transition: opacity .5s;
6+
}
7+
8+
.content {
9+
width: 100px;
10+
padding: 10px;
11+
color: #787878;
12+
background-color: #fcf7f8;
13+
font-size: 13px;
14+
font-family: Helvetica, Arial, sans-serif;
15+
letter-spacing: 1px;
16+
text-align: center;
17+
border: 1px solid rgba(0,0,0,.05);
18+
}

‎vue-options-api-demos/animation/animations/exiting/main.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue';
2+
import App from './main.vue';
3+
4+
createApp(App).mount('#app');

‎vue-options-api-demos/animation/animations/exiting/main.vue

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<div class="example">
3+
<div>
4+
<dl>
5+
<dt>
6+
Animate:
7+
</dt>
8+
<dd>
9+
<kbutton @click="animate">Animate</kbutton>
10+
</dd>
11+
</dl>
12+
<Animation :appear="show"
13+
:transition-name="'custom-animation'"
14+
:component-child-class-name="'child'">
15+
<div class="content">CONTENT</div>
16+
</Animation>
17+
</div>
18+
</div>
19+
</template>
20+
<script>
21+
import './styles.css';
22+
import { Animation } from '@progress/kendo-vue-animation';
23+
import { Button } from '@progress/kendo-vue-buttons';
24+
25+
export default {
26+
components: {
27+
'Animation': Animation,
28+
'kbutton': Button
29+
},
30+
data: function () {
31+
return {
32+
show: true
33+
};
34+
},
35+
methods:{
36+
animate(){
37+
this.show = !this.show;
38+
}
39+
}
40+
}
41+
</script>

‎vue-options-api-demos/animation/animations/exiting/styles.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.custom-animation-exit {
2+
opacity: 0;
3+
}
4+
.custom-animation-exit-active {
5+
transition: opacity .5s;
6+
}
7+
8+
.content {
9+
width: 100px;
10+
padding: 10px;
11+
color: #787878;
12+
background-color: #fcf7f8;
13+
font-size: 13px;
14+
font-family: Helvetica, Arial, sans-serif;
15+
letter-spacing: 1px;
16+
text-align: center;
17+
border: 1px solid rgba(0,0,0,.05);
18+
}
19+
20+
.child{
21+
opacity: 100;
22+
}

‎vue-options-api-demos/animation/api/expand-props/main.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue';
2+
import App from './main.vue';
3+
4+
createApp(App).mount('#app');

‎vue-options-api-demos/animation/api/expand-props/main.vue

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div class="row">
3+
<div class="col-md-6">
4+
<dl>
5+
<dt>
6+
Expand: {{direction}}
7+
</dt>
8+
<dd>
9+
<kbutton @click="onClick">Animate</kbutton>
10+
</dd>
11+
</dl>
12+
<Expand :appear="show" :direction="direction">
13+
<div class="content">
14+
Content
15+
</div >
16+
</Expand>
17+
</div>
18+
<div class="col-md-6">
19+
<dl>
20+
<dt>
21+
Direction:
22+
</dt>
23+
<dd>
24+
<div class="example-config">
25+
<label>
26+
<input
27+
type="radio"
28+
name="direction"
29+
:value="'vertical'"
30+
:checked="direction === 'vertical'"
31+
@click="onChange"
32+
/>
33+
&nbsp;Vertical
34+
</label>
35+
<br />
36+
<label>
37+
<input
38+
type="radio"
39+
name="direction"
40+
:value="'horizontal'"
41+
:checked="direction === 'horizontal'"
42+
@click="onChange"
43+
/>
44+
&nbsp;Horizontal
45+
</label>
46+
</div>
47+
</dd>
48+
</dl>
49+
</div>
50+
</div>
51+
</template>
52+
<script>
53+
import './styles.css';
54+
import { Expand } from '@progress/kendo-vue-animation';
55+
import { Button } from '@progress/kendo-vue-buttons';
56+
57+
export default {
58+
components: {
59+
'Expand': Expand,
60+
'kbutton': Button
61+
},
62+
data: function () {
63+
return {
64+
show: false,
65+
direction: 'vertical'
66+
};
67+
},
68+
methods:{
69+
onClick (e) {
70+
this.show = !this.show;
71+
},
72+
onChange (e) {
73+
this.direction = e.target.value;
74+
}
75+
}
76+
}
77+
</script>

‎vue-options-api-demos/animation/api/expand-props/styles.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.content {
2+
width: 100px;
3+
padding: 10px;
4+
color: #787878;
5+
background-color: #fcf7f8;
6+
font-size: 13px;
7+
font-family: Helvetica, Arial, sans-serif;
8+
letter-spacing: 1px;
9+
text-align: center;
10+
border: 1px solid rgba(0,0,0,.05);
11+
}

‎vue-options-api-demos/animation/api/fade-props/main.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue';
2+
import App from './main.vue';
3+
4+
createApp(App).mount('#app');

‎vue-options-api-demos/animation/api/fade-props/main.vue

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="row">
3+
<div class="col-md-6">
4+
<dl>
5+
<dt>
6+
Fade: {{direction}}
7+
</dt>
8+
<dd>
9+
<kbutton @click="onClick">Animate</kbutton>
10+
</dd>
11+
</dl>
12+
<Fade :appear="index%2" :direction="direction" :stack-children="true">
13+
<div class="content" key='key'>{{index}}</div>
14+
</Fade>
15+
</div>
16+
</div>
17+
</template>
18+
<script>
19+
import './styles.css';
20+
import { Fade } from '@progress/kendo-vue-animation';
21+
import { Button } from '@progress/kendo-vue-buttons';
22+
23+
export default {
24+
components: {
25+
'Fade': Fade,
26+
'kbutton': Button
27+
},
28+
data: function () {
29+
return {
30+
index: 1,
31+
};
32+
},
33+
methods:{
34+
onClick (e) {
35+
this.index = this.index + 1;
36+
}
37+
}
38+
}
39+
</script>

‎vue-options-api-demos/animation/api/fade-props/styles.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.content {
2+
width: 100px;
3+
padding: 10px;
4+
color: #787878;
5+
background-color: #fcf7f8;
6+
font-size: 13px;
7+
font-family: Helvetica, Arial, sans-serif;
8+
letter-spacing: 1px;
9+
text-align: center;
10+
border: 1px solid rgba(0,0,0,.05);
11+
}

‎vue-options-api-demos/animation/api/push-props/main.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue';
2+
import App from './main.vue';
3+
4+
createApp(App).mount('#app');

0 commit comments

Comments
 (0)