Skip to content

Commit 8e58f33

Browse files
zdravkovzdravkov
committed
chore: add componnet exmaples
1 parent 351353c commit 8e58f33

File tree

304 files changed

+49161
-85
lines changed

Some content is hidden

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

304 files changed

+49161
-85
lines changed

‎kendo-nuxt3/.DS_Store

6 KB
Binary file not shown.

‎kendo-nuxt3/app.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div>
3-
<NuxtWelcome />
3+
<Navigation />
4+
<NuxtPage />
45
</div>
56
</template>

‎kendo-nuxt3/components/Navigation.vue

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<KButton @click="handleClick"> {{visible ? ' Hide Navigation' : 'Show Navigation' }}</KButton>
3+
<div v-if="visible" id="rootnav">
4+
<NuxtLink to="/">Home</NuxtLink> |
5+
<NuxtLink to="/next">Next</NuxtLink> |
6+
<NuxtLink to="/form">form</NuxtLink> |
7+
<NuxtLink to="/grid">Grid</NuxtLink> |
8+
<NuxtLink to="/drawer">Drawer</NuxtLink> |
9+
<NuxtLink to="/splitbutton">SplitButton</NuxtLink> |
10+
<NuxtLink to="/scrollview">scrollview</NuxtLink> |
11+
<NuxtLink to="/numerictextbox">Numeric</NuxtLink> |
12+
<NuxtLink to="/daterangepicker">DateRangePicker</NuxtLink> |
13+
<NuxtLink to="/loader">Loader</NuxtLink> |
14+
<NuxtLink to="/progressbar">ProgressBar</NuxtLink> |
15+
<NuxtLink to="/stepper">Stepper</NuxtLink> |
16+
<NuxtLink to="/editor">Editor</NuxtLink> |
17+
<NuxtLink to="/textarea">textarea</NuxtLink> |
18+
<NuxtLink to="/switch">switch</NuxtLink> |
19+
<NuxtLink to="/tooltip">tooltip</NuxtLink> |
20+
<NuxtLink to="/arcgauge">arcgauge</NuxtLink> |
21+
<NuxtLink to="/circulargauge">circulargauge</NuxtLink> |
22+
<NuxtLink to="/lineargauge">lineargauge</NuxtLink> |
23+
<NuxtLink to="/scheduler">scheduler</NuxtLink> |
24+
<NuxtLink to="/chart">chart</NuxtLink> |
25+
<NuxtLink to="/splitter">splitter</NuxtLink> |
26+
<NuxtLink to="/slider">slider</NuxtLink> |
27+
<NuxtLink to="/panelbar">panelbar</NuxtLink> |
28+
<NuxtLink to="/tabstrip">tabstrip</NuxtLink> |
29+
<NuxtLink to="/indicators">indicators</NuxtLink> |
30+
<NuxtLink to="/notification">notification</NuxtLink> |
31+
<NuxtLink to="/treeview">treeview</NuxtLink> |
32+
<NuxtLink to="/dropdowns">dropdowns</NuxtLink> |
33+
<NuxtLink to="/colors">colors</NuxtLink> |
34+
<NuxtLink to="/datepicker">datepicker</NuxtLink> |
35+
<NuxtLink to="/treelist">treelist</NuxtLink> |
36+
<NuxtLink to="/layouts">layouts</NuxtLink> |
37+
<NuxtLink to="/listview">listview</NuxtLink> |
38+
</div>
39+
</template>
40+
41+
<script lang="ts">
42+
import { computed } from 'vue';
43+
import { Button } from "@progress/kendo-vue-buttons";
44+
45+
export default {
46+
components: {
47+
KButton: Button
48+
},
49+
provide(this: any) {
50+
return {
51+
visible: computed(() => this.visible)
52+
}
53+
},
54+
data() {
55+
return {
56+
visible: true
57+
};
58+
},
59+
methods: {
60+
handleClick(this: any) {
61+
this.visible = !this.visible;
62+
}
63+
}
64+
}
65+
</script>

‎kendo-nuxt3/nuxt.config.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
// https://v3.nuxtjs.org/api/configuration/nuxt.config
22
export default defineNuxtConfig({
3-
3+
css: [
4+
'@progress/kendo-theme-default/dist/all.css',
5+
],
6+
pages:true
47
})

‎kendo-nuxt3/package.json

+42-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,47 @@
88
"postinstall": "nuxt prepare"
99
},
1010
"devDependencies": {
11-
"nuxt": "latest"
11+
"nuxt": "rc"
12+
},
13+
"dependencies": {
14+
"@progress/kendo-theme-default": "latest",
15+
"@progress/kendo-data-query": "^1.5.0",
16+
"@progress/kendo-date-math": "^1.5.4",
17+
"@progress/kendo-drawing": "^1.8.0",
18+
"@progress/kendo-licensing": "^1.0.1",
19+
"@progress/kendo-vue-common": "3.7.3",
20+
"@progress/kendo-vue-animation": "3.7.3",
21+
"@progress/kendo-vue-buttons": "3.7.3",
22+
"@progress/kendo-vue-charts": "3.7.3",
23+
"@progress/kendo-vue-data-tools": "3.7.3",
24+
"@progress/kendo-vue-dateinputs": "3.7.3",
25+
"@progress/kendo-vue-dialogs": "3.7.3",
26+
"@progress/kendo-vue-dropdowns": "3.7.3",
27+
"@progress/kendo-vue-excel-export": "3.7.3",
28+
"@progress/kendo-vue-form": "3.7.3",
29+
"@progress/kendo-vue-grid": "3.7.3",
30+
"@progress/kendo-vue-treelist": "3.7.3",
31+
"@progress/kendo-vue-indicators": "3.7.3",
32+
"@progress/kendo-vue-inputs": "3.7.3",
33+
"@progress/kendo-vue-intl": "3.7.3",
34+
"@progress/kendo-vue-labels": "3.7.3",
35+
"@progress/kendo-vue-layout": "3.7.3",
36+
"@progress/kendo-vue-pdf": "3.7.3",
37+
"@progress/kendo-vue-popup": "3.7.3",
38+
"@progress/kendo-vue-upload": "3.7.3",
39+
"@progress/kendo-vue-progressbars": "3.7.3",
40+
"@progress/kendo-vue-editor": "3.7.3",
41+
"@progress/kendo-vue-gauges": "3.7.3",
42+
"@progress/kendo-vue-tooltip": "3.7.3",
43+
"@progress/kendo-vue-scheduler": "3.7.3",
44+
"@progress/kendo-vue-notification": "3.7.3",
45+
"@progress/kendo-vue-treeview": "3.7.3",
46+
"@progress/kendo-vue-scrollview": "3.7.3",
47+
"@progress/kendo-vue-listview": "3.7.3",
48+
"prosemirror-markdown": "1.10.1",
49+
"hammerjs": "^2.0.0",
50+
"cldr-core": "^41.0.0",
51+
"cldr-dates-full": "^41.0.0",
52+
"cldr-numbers-full": "^41.0.0"
1253
}
1354
}

‎kendo-nuxt3/pages/.DS_Store

8 KB
Binary file not shown.

‎kendo-nuxt3/pages/arcgauge/.DS_Store

6 KB
Binary file not shown.

‎kendo-nuxt3/pages/arcgauge/center/cldr.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { load } from '@progress/kendo-vue-intl';
2+
import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
3+
import currencyData from 'cldr-core/supplemental/currencyData.json';
4+
import weekData from 'cldr-core/supplemental/weekData.json';
5+
import bgNumbers from 'cldr-numbers-full/main/bg/numbers.json';
6+
import bgCurrencies from 'cldr-numbers-full/main/bg/currencies.json';
7+
import bgCaGregorian from 'cldr-dates-full/main/bg/ca-gregorian.json';
8+
import bgDataFields from 'cldr-dates-full/main/bg/dateFields.json';
9+
import bgTimeZoneNames from 'cldr-dates-full/main/bg/timeZoneNames.json';
10+
11+
function loadCldr() {
12+
load(
13+
likelySubtags,
14+
currencyData,
15+
weekData,
16+
bgNumbers,
17+
bgCurrencies,
18+
bgCaGregorian,
19+
bgDataFields,
20+
bgTimeZoneNames
21+
);
22+
}
23+
24+
export { loadCldr };

‎kendo-nuxt3/pages/arcgauge/center/main.vue

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<template>
2+
<div>
3+
<div class="example-config">
4+
<label>Current locale: </label>
5+
<DropDownList
6+
:style="{
7+
'margin-left': 5,
8+
}"
9+
:value="locale"
10+
@change="onChange"
11+
:data-items="locales"
12+
/>
13+
</div>
14+
<intl :locale="locale">
15+
<div class="row" ref="locale" >
16+
17+
<div class="col-sm-12 col-md-2">
18+
<LinearGauge :pointer="pointer" :scale="scale" :ref="locale" />
19+
</div>
20+
<div class="col-sm-12 col-md-5">
21+
<RadialGauge :pointer="pointer" :scale="scale" />
22+
</div>
23+
<div class="col-sm-12 col-md-5">
24+
<ArcGauge :value="value" :scale="arcScale" />
25+
</div>
26+
<calendar :default-value="new Date()">
27+
</calendar>
28+
</div>
29+
</intl>
30+
</div>
31+
</template>
32+
33+
<script lang="ts">
34+
import { ArcGauge, LinearGauge, RadialGauge } from '@progress/kendo-vue-gauges';
35+
import { DropDownList } from '@progress/kendo-vue-dropdowns';
36+
import { IntlProvider } from '@progress/kendo-vue-intl';
37+
38+
import { load } from '@progress/kendo-vue-intl';
39+
import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
40+
import currencyData from 'cldr-core/supplemental/currencyData.json';
41+
import weekData from 'cldr-core/supplemental/weekData.json';
42+
import bgNumbers from 'cldr-numbers-full/main/bg/numbers.json';
43+
import bgCurrencies from 'cldr-numbers-full/main/bg/currencies.json';
44+
import bgCaGregorian from 'cldr-dates-full/main/bg/ca-gregorian.json';
45+
import bgDataFields from 'cldr-dates-full/main/bg/dateFields.json';
46+
import bgTimeZoneNames from 'cldr-dates-full/main/bg/timeZoneNames.json';
47+
import { Calendar } from '@progress/kendo-vue-dateinputs';
48+
49+
load(
50+
likelySubtags,
51+
currencyData,
52+
weekData,
53+
bgNumbers,
54+
bgCurrencies,
55+
bgCaGregorian,
56+
bgDataFields,
57+
bgTimeZoneNames
58+
);
59+
60+
export default {
61+
components: {
62+
ArcGauge,
63+
LinearGauge,
64+
RadialGauge,
65+
DropDownList,
66+
intl: IntlProvider,
67+
calendar: Calendar
68+
},
69+
data() {
70+
return {
71+
locale: 'bg-BG',
72+
locales: ['bg-BG', 'en-US'],
73+
value: 30,
74+
pointer: {
75+
value: 30,
76+
},
77+
scale: {
78+
labels: {
79+
format: 'c',
80+
},
81+
},
82+
arcScale: {
83+
labels: {
84+
format: 'c',
85+
visible: true,
86+
},
87+
majorTicks: {
88+
visible: true,
89+
},
90+
minorTicks: {
91+
visible: true,
92+
},
93+
},
94+
};
95+
},
96+
methods: {
97+
onChange(e) {
98+
this.locale = e.target.value;
99+
100+
},
101+
},
102+
};
103+
</script>

‎kendo-nuxt3/pages/arcgauge/color/main.vue

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div id="test-area">
3+
<div id="arc">
4+
{{arcPointer}}
5+
<ArcGauge :pointer="arcPointer" :style="gaugeStyles" />
6+
</div>
7+
</div>
8+
</template>
9+
<script lang="ts">
10+
import { ArcGauge } from '@progress/kendo-vue-gauges';
11+
12+
export default {
13+
components: {
14+
ArcGauge
15+
},
16+
computed: {
17+
arcPointer(){
18+
return { value: this.value};
19+
},
20+
radualPointer() {
21+
return [{
22+
value: this.value,
23+
color: 'red'
24+
}, {
25+
value: this.value >= 50 ? this.value / 2 : this.value * 2,
26+
color: 'green'
27+
}]
28+
}
29+
},
30+
data() {
31+
return {
32+
value: 3,
33+
toggle: true,
34+
gaugeStyles: {
35+
display: 'block'
36+
},
37+
colors: [{from: 0, to: 25, color: 'red'}, {from: 25, to: 100, color: 'green'}]
38+
};
39+
},
40+
mounted() {
41+
setInterval(
42+
() => {
43+
this.value = Math.ceil(Math.random() * 100);
44+
this.toggle = !this.toggle;
45+
},
46+
2000);
47+
}
48+
};
49+
</script>

‎kendo-nuxt3/pages/arcgauge/index.vue

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div>
3+
<div id="nav">
4+
<NuxtLink to="/arcgauge/overview/main">Overview</NuxtLink> |
5+
<NuxtLink to="/arcgauge/center/main">center</NuxtLink> |
6+
<NuxtLink to="/arcgauge/color/main">color</NuxtLink> |
7+
<NuxtLink to="/arcgauge/scale/main">scale</NuxtLink> |
8+
</div>
9+
10+
</div>
11+
</template>
12+
13+
<style scoped>
14+
15+
</style>
16+
17+
<script setup lang="ts">
18+
19+
</script>

0 commit comments

Comments
 (0)