docs: move options api demos to public repo

vue-options-api-demos/README.md

@@ -0,0 +1,37 @@
+# Kendo UI for Vue Options API Demos Index
+
+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:
+
+- [Animation](./animation/examples)
+- [Buttons](./buttons/examples)
+- [Charts](./charts/examples)
+- [Common](./common/examples)
+- [Conversational UI](./conversational-ui/examples)
+- [Data Tools](./datatools/examples)
+- [Date Inputs](./dateinputs/examples)
+- [Dialogs](./dialogs/examples)
+- [Dropdowns](./dropdowns/examples)
+- [Editor](./editor/examples)
+- [Excel](./excel/examples)
+- [Form](./form/examples)
+- [Gauges](./gauges/examples)
+- [Grid](./grid/examples)
+- [Indicators](./indicators/examples)
+- [Inputs](./inputs/examples)
+- [Internationalization (Intl)](./intl/examples)
+- [Labels](./labels/examples)
+- [Layout](./layout/examples)
+- [ListBox](./listbox/examples)
+- [ListView](./listview/examples)
+- [Notification](./notification/examples)
+- [PDF](./pdf/examples)
+- [Popup](./popup/examples)
+- [Progress Bars](./progressbars/examples)
+- [Scheduler](./scheduler/examples)
+- [ScrollView](./scrollview/examples)
+- [Tooltip](./tooltip/examples)
+- [TreeList](./treelist/examples)
+- [TreeView](./treeview/examples)
+- [Upload](./upload/examples)
+
+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

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');

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

@@ -0,0 +1,40 @@
+<template>
+      <div class="example">
+        <div>
+            <dl>
+                <dt>
+                    Animate:
+                </dt>
+                <dd>
+                     <kbutton @click="animate">Animate</kbutton>
+                </dd>
+            </dl>
+            <Animation :appear="show"
+                    :transition-name="'custom-animation'">
+                <div class="content">CONTENT</div>
+            </Animation>
+        </div>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Button } from '@progress/kendo-vue-buttons';
+import { Animation } from '@progress/kendo-vue-animation';
+
+export default {
+    components: {
+      'Animation': Animation,
+      'kbutton': Button
+    },
+     data: function () {
+        return {
+             show: true
+        };
+    },
+    methods:{
+        animate(){
+             this.show = !this.show;
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,18 @@
+.custom-animation-enter {
+  opacity: 0;
+}
+.custom-animation-enter-active {
+  transition: opacity .5s;
+}
+
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}

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

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');

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

@@ -0,0 +1,41 @@
+<template>
+     <div class="example">
+        <div>
+            <dl>
+                <dt>
+                    Animate:
+                </dt>
+                <dd>
+                     <kbutton @click="animate">Animate</kbutton>
+                </dd>
+            </dl>
+            <Animation :appear="show"
+                    :transition-name="'custom-animation'"
+                    :component-child-class-name="'child'">
+                <div class="content">CONTENT</div>
+            </Animation>
+        </div>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Animation } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Animation': Animation,
+      'kbutton': Button
+    },
+     data: function () {
+        return {
+             show: true
+        };
+    },
+    methods:{
+        animate(){
+             this.show = !this.show;
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,22 @@
+.custom-animation-exit {
+  opacity: 0;    
+}
+.custom-animation-exit-active {
+  transition: opacity .5s;
+}
+
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
+
+.child{
+  opacity: 100;
+}

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

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');

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

@@ -0,0 +1,77 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Expand: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Expand :appear="show" :direction="direction">
+                         <div class="content">
+                            Content
+                            </div >
+                    </Expand>
+                </div>
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Direction:
+                        </dt>
+                        <dd>
+                            <div class="example-config">
+                                <label>
+                                    <input
+                                         type="radio"
+                                         name="direction"
+                                         :value="'vertical'"
+                                         :checked="direction === 'vertical'"
+                                         @click="onChange"
+                                     />
+                                    &nbsp;Vertical
+                                </label>
+                                <br />
+                                <label>
+                                    <input
+                                         type="radio"
+                                         name="direction"
+                                         :value="'horizontal'"
+                                         :checked="direction === 'horizontal'"
+                                         @click="onChange"
+                                     />
+                                    &nbsp;Horizontal
+                                </label>
+                            </div>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Expand } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Expand': Expand,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+             show: false,
+            direction: 'vertical'
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.show = !this.show;
+        },
+        onChange (e) {
+            this.direction = e.target.value;
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }

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

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');

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

@@ -0,0 +1,39 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Fade: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Fade :appear="index%2" :direction="direction" :stack-children="true">
+                       <div class="content" key='key'>{{index}}</div>
+                    </Fade>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Fade } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'Fade': Fade,
+        'kbutton': Button
+    },
+    data: function () {
+        return {
+            index: 1,
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.index = this.index + 1;
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }

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

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');