docs(wrappers): test wrappers docs index

vue-wrappers-documentation/README.md

@@ -0,0 +1,45 @@
+
+# Kendo Validator Vue Wrapper Documentation
+
+## Root Directory
+- [Overview](kendo-validator-vue-wrapper/docs/index.md)
+- [Custom Validation](kendo-validator-vue-wrapper/docs/custom-validation.md)
+- [Examples](kendo-validator-vue-wrapper/docs/examples)
+- [API](kendo-validator-vue-wrapper/docs/api)
+
+<details>
+  <summary>## API Directory</summary>
+  <ul>
+    <li><a href="kendo-validator-vue-wrapper/docs/api/index.md">index.md</a></li>
+    <li><a href="kendo-validator-vue-wrapper/docs/api/Validator.md">Validator.md</a></li>
+  </ul>
+</details>
+
+
+# Kendo Window Vue Wrapper Documentation
+
+## Root Directory
+- [Actions](kendo-window-vue-wrapper/docs/actions.md)
+- [RTL Support](kendo-window-vue-wrapper/docs/rtl-support.md)
+- [Overview](kendo-window-vue-wrapper/docs/index.md)
+- [Constrain Movement](kendo-window-vue-wrapper/docs/constrain-movement.md)
+- [Keyboard Navigation](kendo-window-vue-wrapper/docs/keyboard-navigation.md)
+- [Animation Effects](kendo-window-vue-wrapper/docs/animation-effects.md)
+- [Dimensions](kendo-window-vue-wrapper/docs/dimensions.md)
+- [Loading Content with AJAX](kendo-window-vue-wrapper/docs/loading-content-with-ajax.md)
+- [Position](kendo-window-vue-wrapper/docs/position.md)
+
+<details>
+  <summary>## Examples Directory</summary>
+  <ul>
+    <li><a href="kendo-window-vue-wrapper/docs/examples/actions">actions</a></li>
+    <li><a href="kendo-window-vue-wrapper/docs/examples/animation">animation</a></li>
+    <li><a href="kendo-window-vue-wrapper/docs/examples/dimensions">dimensions</a></li>
+    <li><a href="kendo-window-vue-wrapper/docs/examples/overview">overview</a></li>
+    <li><a href="kendo-window-vue-wrapper/docs/examples/rtl">rtl</a></li>
+    <li><a href="kendo-window-vue-wrapper/docs/examples/ajax">ajax</a></li>
+    <li><a href="kendo-window-vue-wrapper/docs/examples/constrain">constrain</a></li>
+    <li><a href="kendo-window-vue-wrapper/docs/examples/keyboard-navigation">keyboard-navigation</a></li>
+    <li><a href="kendo-window-vue-wrapper/docs/examples/position">position</a></li>
+  </ul>
+</details>

vue-wrappers-documentation/kendo-validator-vue-wrapper/api/Validator.md

@@ -0,0 +1,37 @@
+---
+title: Validator API
+description: "API Index | Validator"
+api_reference: true
+slug: api_validatordirective
+---
+
+# Validator
+
+The Validator receives its options through the `v-kendo-validator` directive. All available options for the [Kendo Validator widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/validator) are available as options for the directive.
+
+```html-no-run
+<form id="ticketsForm" ref="myForm" v-kendo-validator="setup" @submit.prevent="onSubmit">
+ ...
+</form>
+
+...
+
+new Vue({
+    data: {
+        setup: {
+            rules: {
+                greaterdate (input) {
+                    if (input.is("[name='RetireDate'") && input.val() != "") {
+                        var date = kendo.parseDate(input.val()),
+                                            otherDate = kendo.parseDate(kendo.jQuery("[name='HireDate']").val());
+                        return otherDate == null || otherDate.getTime() < date.getTime();
+                    }
+                    return true;
+                }
+            },
+            messages: {
+                greaterdate: 'Retire date should be greater than Hire date'
+            }
+        }
+});
+```

vue-wrappers-documentation/kendo-validator-vue-wrapper/api/index.md

@@ -0,0 +1,14 @@
+---
+title: Validator API
+page_title: Validator API - Components - Kendo UI for Vue
+description: "List of API members in the @progress/kendo-validator-vue-wrapper package, part of Kendo UI for Vue."
+slug: api_validator
+api_reference: true
+position: 1
+---
+
+# Validator API
+
+## Directives
+
+* [`v-kendo-validator`]({% slug api_validatordirective %})

vue-wrappers-documentation/kendo-validator-vue-wrapper/custom-validation.md

@@ -0,0 +1,21 @@
+---
+title: Custom Validation
+page_title: Custom Validation - Validator - Kendo UI for Vue
+description: "Use custom validation in the Kendo UI Validator wrapper for Vue."
+slug: custom_validation_validator
+position: 1
+---
+
+# Custom Validation
+
+Apart from the [built-in validation rules](https://docs.telerik.com/kendo-ui/controls/editors/validator/overview#default-rules-for-validation) it provides, the Validator enables you to set custom validation rules.
+
+{% meta height:500 %}
+{% embed_file custom-validation/main.vue preview %}
+{% embed_file custom-validation/main.js %}
+{% endmeta %}
+
+## Suggested Links
+
+* [Kendo UI Validator for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/validator/overview)
+* [API Reference of the Validator Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/validator)

vue-wrappers-documentation/kendo-validator-vue-wrapper/examples/custom-validation/main.js

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+import { ValidatorInstaller } from '@progress/kendo-validator-vue-wrapper'
+
+const app = createApp(App)
+app.use(ValidatorInstaller)
+app.mount('#app')
+

vue-wrappers-documentation/kendo-validator-vue-wrapper/examples/custom-validation/main.vue

@@ -0,0 +1,91 @@
+<template>
+<div>
+    <form id="ticketsForm" ref="myForm" v-kendo-validator="set" @submit.prevent="onSubmit">
+        <div>
+            <label for="HireDate">Hire Date:</label>
+            <datepicker id="HireDate"
+                              name="HireDate"
+                              style="width: 250px"
+                              required="required"
+                              v-model="date">
+            </datepicker>
+            <br />
+            <span data-for='HireDate' class='k-invalid-msg'></span>
+        </div>
+        <br />
+        <div>
+            <label for="RetireDate">Retire Date:</label>
+            <datepicker id="RetireDate"
+                              style="width: 250px"
+                              name="RetireDate"
+                              required="required">
+            </datepicker>
+            <br />
+            <span data-for='RetireDate' class='k-invalid-msg'></span>
+        </div>
+        <div>
+            <button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" type="submit">Submit</button>
+        </div>
+    </form>
+
+    <div class="status"></div>
+</div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-dateinputs-vue-wrapper';
+
+export default {
+    components: {
+       'datepicker': DatePicker
+    },
+    data: function () {
+        return  {
+            date: null,
+            set: {
+                rules: {
+                    greaterdate (input) {
+                        if (input.is("[name='RetireDate'") && input.val() != "") {
+                            var date = kendo.parseDate(input.val()),
+                                                otherDate = kendo.parseDate(kendo.jQuery("[name='HireDate']").val());
+                            return otherDate == null || otherDate.getTime() < date.getTime();
+                        }
+                        return true;
+                    }
+                },
+                messages: {
+                    greaterdate: 'Retire date should be greater than Hire date'
+                }
+            }
+        };
+    },
+    methods: {
+        onSubmit: function (ev) {
+            var validator = kendo.jQuery(this.$refs.myForm).getKendoValidator()
+            var status = kendo.jQuery('.status')
+            if (validator.validate()) {
+                status.text('Hooray! Your data is submitted!')
+                  .removeClass('invalid')
+                  .addClass('valid')
+            } else {
+                status.text('Oops! There is invalid data in the form.')
+                  .removeClass('valid')
+                  .addClass('invalid')
+            }
+        }
+    }
+}
+</script>
+<style>
+    .k-button, .status {
+        margin-top: 10px;
+    }
+    .k-invalid-msg {
+        display: inline-block;
+    }
+    .invalid {
+        color: red;
+    }
+    .valid {
+        color: green;
+    }
+</style>

vue-wrappers-documentation/kendo-validator-vue-wrapper/examples/overview/main.js

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+import { ValidatorInstaller } from '@progress/kendo-validator-vue-wrapper'
+
+const app = createApp(App)
+app.use(ValidatorInstaller)
+app.mount('#app')
+

vue-wrappers-documentation/kendo-validator-vue-wrapper/examples/overview/main.vue

@@ -0,0 +1,50 @@
+<template>
+<div>
+    <form id="ticketsForm" ref="myForm" v-kendo-validator @submit.prevent="onSubmit">
+        <input type="search"
+            id="search"
+            name="search"
+            required
+            validationMessage="Field is required"
+            class="k-textbox" />
+
+		<div>
+			<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" type="submit">Submit</button>
+		</div>
+    </form>
+
+    <div class="status"></div>
+</div>
+</template>
+
+<style>
+    .k-button, .status {
+        margin-top: 10px;
+    }
+    .invalid {
+        color: red;
+    }
+    .valid {
+        color: green;
+    }
+</style>
+
+<script>
+export default {
+    methods: {
+        onSubmit: function (ev) {
+            var validator = kendo.jQuery(this.$refs.myForm).getKendoValidator()
+            var status = kendo.jQuery('.status')
+            if (validator.validate()) {
+                status.text('Hooray! Your data is submitted!')
+                  .removeClass('invalid')
+                  .addClass('valid')
+            } else {
+                status.text('Oops! There is invalid data in the form.')
+                  .removeClass('valid')
+                  .addClass('invalid')
+            }
+        }
+    }
+}
+</script>

vue-wrappers-documentation/kendo-validator-vue-wrapper/index.md

@@ -0,0 +1,76 @@
+---
+title: Overview
+page_title: Validator Overview - Components - Kendo UI for Vue
+description: "Get an overview of the features the Kendo UI Validator wrapper for Vue delivers and use the component in Vue projects."
+slug: overview_validator
+position: 0
+---
+
+# Validator Overview
+
+The Validator supports the validation of values and other types of user input.
+
+The Validator wrapper for Vue is a client-side wrapper for the [Kendo UI Validator](https://docs.telerik.com/kendo-ui/api/javascript/ui/validator) widget.
+
+<div data-component="StartFreeTrialSection"></div>
+
+## Basic Usage
+
+The following example demonstrates how to initialize the Validator.
+
+{% meta height:200 %}
+{% embed_file overview/main.vue preview %}
+{% embed_file overview/main.js %}
+{% endmeta %}
+
+## Installation
+
+To initialize the Validator, either:
+
+* [Use the CDN service]({% slug using_cdn %}), or
+* [Use Webpack](#toc-initializing-with-webpack).
+
+### Initializing with Webpack
+
+1. Install Kendo UI and add a theme.
+
+  	```sh
+  	npm install --save @progress/kendo-ui
+  	npm install --save @progress/kendo-theme-default
+  	```
+
+1. Install the Kendo UI Validator package for Vue.
+
+  	```sh
+  	npm install --save @progress/kendo-validator-vue-wrapper
+  	```
+
+1. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the `main.js` file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.
+
+  	```js-no-run
+  	import '@progress/kendo-ui' // This will import the entire Kendo UI library
+    // As an alternative, you could import only the scripts that are used by a specific widget:
+    // import '@progress/kendo-ui/js/kendo.validator' // Imports only the Validator script and its dependencies
+
+  	import '@progress/kendo-theme-default/dist/all.css'
+
+  	import { Validator, ValidatorInstaller } from '@progress/kendo-validator-vue-wrapper'
+
+  	Vue.use(ValidatorInstaller)
+
+  	new Vue({
+  		el: '#vueapp',
+  		components: {
+  			Validator
+  		}
+  	})
+  	```
+
+## Functionality and Features
+
+The Validator supports [custom validation]({% slug custom_validation_validator %}).
+
+## Suggested Links
+
+* [Kendo UI Validator for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/validator/overview)
+* [API Reference of the Validator Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/validator)

vue-wrappers-documentation/kendo-window-vue-wrapper/docs/actions.md

@@ -0,0 +1,37 @@
+---
+title: Actions
+page_title: Customizing Actions - Window - Kendo UI for Vue
+description: "Use the predefined and create custom user actions when working with the Kendo UI Window wrapper for Vue."
+slug: actions_window_wrapper
+canonicalLink: "https://www.telerik.com/kendo-vue-ui/components/dialogs/window/"
+position: 4
+---
+
+<div><WrapperBanner link="/kendo-vue-ui/components/dialogs/window"></WrapperBanner></div>    
+
+# Actions
+
+The following example demonstrates how to create a modal Window with a predefined position and enable all user actions.
+
+## Predefined User Actions
+
+The order of the values in the `actions` array determines the order in which the action buttons are rendered in the title of a Window. The `maximize` action serves both as a button for expanding a Window to fill the screen and as a button to restore a Window to its previous size. The `minimize` action collapses a Window to its title.
+
+{% meta height:370 %}
+{% embed_file actions/predefined/main.vue preview %}
+{% embed_file actions/predefined/main.js %}
+{% endmeta %}
+
+## Custom User Actions
+
+If the user supplies a non-recognized action name, the Window treats that action name as a custom action. As a result, the Window renders the `k-icon` and `k-i-actionname` (all lowercase) CSS classes for it and does not automatically attach a `click` event handler. By default, the Kendo UI stylesheets provide an icon for `"custom"`-named actions&mdash;however, you can use any other name for the non-recognized action and then capture and handle the `click` events in a standard way.
+
+{% meta height:370 %}
+{% embed_file actions/custom/main.vue preview %}
+{% embed_file actions/custom/main.js %}
+{% endmeta %}
+
+## Suggested Links
+
+* [Kendo UI Window for jQuery](https://docs.telerik.com/kendo-ui/controls/layout/window/overview)
+* [API Reference of the Window Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/window)