npm - @kizmann/nano-ui - Versions diffs - 1.0.0 → 1.0.2 - Mend

@kizmann/nano-ui 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/README.md +1 -114
package/dist/nano-ui.css +1 -0
package/dist/nano-ui.js +4 -0
package/dist/nano-ui.js.map +1 -0
package/dist/themes/dark.css +1 -0
package/dist/themes/light.css +1 -0
package/package.json +12 -6
package/src/drawer/src/drawer/drawer.js +8 -8
package/src/drawer/src/drawer/drawer.scss +8 -2
package/src/form/src/form-item/form-item.scss +6 -1
package/src/map/src/map/map.scss +1 -0
package/src/map/src/map-marker/map-marker.js +1 -1
package/src/resizer/src/resizer/resizer.js +6 -4
package/src/root/vars.scss +1 -1
package/src/scrollbar/src/scrollbar/scrollbar.next.js +1 -1
package/src/scrollbar/src/scrollbar/scrollbar.scss +3 -2
package/src/select/src/select/select.js +1 -1
package/src/slider/src/slider/slider.js +5 -0
package/src/slider/src/slider/slider.scss +4 -0
package/src/table/src/table/table.scss +6 -2
package/src/table/src/table-column/table-column.scss +0 -1
package/themes/macos/button/src/button/button.scss +9 -0
package/themes/macos/radio/src/radio/radio.scss +1 -1
package/themes/macos/root/vars-dark.scss +1 -1
package/themes/macos/root/vars-light.scss +1 -1
package/themes/macos/root/vars.scss +0 -1
package/themes/macos/scrollbar/src/scrollbar/scrollbar.scss +1 -1
package/themes/macos/select/src/select/select.scss +1 -1
package/themes/macos/slider/src/slider/slider.scss +23 -3
package/themes/macos/tags/src/tags-item/tags-item.scss +4 -2
package/.github/workflows/compile-deploy-publish.yml +0 -65
package/assets/nano-ui-dark.svg +0 -19
package/assets/nano-ui-light.svg +0 -19
package/assets/pico-js-dark.svg +0 -19
package/assets/pico-js-light.svg +0 -19
package/babel.config.js +0 -17
package/demos/builder.html +0 -411
package/demos/button/index.html +0 -129
package/demos/cascader/index.html +0 -127
package/demos/chart/index.html +0 -53
package/demos/checkbox/index.html +0 -97
package/demos/config/index.html +0 -95
package/demos/confirm/index.html +0 -78
package/demos/datepicker/index.html +0 -69
package/demos/draggable/index.html +0 -127
package/demos/form/index.html +0 -83
package/demos/form.html +0 -462
package/demos/grid.html +0 -321
package/demos/input/index.html +0 -100
package/demos/map/index.html +0 -81
package/demos/matrix/index.html +0 -104
package/demos/modal/index.html +0 -98
package/demos/overview.html +0 -1468
package/demos/paginator/index.html +0 -58
package/demos/popover/index.html +0 -103
package/demos/radio/index.html +0 -71
package/demos/resizer/index.html +0 -106
package/demos/scrollbar.html +0 -328
package/demos/select/index.html +0 -174
package/demos/select.html +0 -164
package/demos/style.css +0 -50
package/demos/switch/index.html +0 -69
package/demos/table/index.html +0 -126
package/demos/tabs/index.html +0 -110
package/demos/tabs.html +0 -293
package/demos/textarea/index.html +0 -77
package/demos/timepicker/index.html +0 -66
package/demos/transfer/index.html +0 -88
package/demos/wysiwyg/index.html +0 -49
package/docs/README.md +0 -34
package/docs/_sidebar.md +0 -37
package/docs/files/data/draggable.md +0 -143
package/docs/files/data/map.md +0 -1
package/docs/files/data/paginator.md +0 -23
package/docs/files/data/table.md +0 -247
package/docs/files/data/virtualscroller.md +0 -2
package/docs/files/form/button.md +0 -131
package/docs/files/form/cascader.md +0 -164
package/docs/files/form/checkbox.md +0 -179
package/docs/files/form/datepicker.md +0 -78
package/docs/files/form/form.md +0 -52
package/docs/files/form/input.md +0 -90
package/docs/files/form/radio.md +0 -150
package/docs/files/form/select.md +0 -202
package/docs/files/form/switch.md +0 -98
package/docs/files/form/textarea.md +0 -102
package/docs/files/form/timepicker.md +0 -78
package/docs/files/form/transfer.md +0 -30
package/docs/files/others/config.md +0 -261
package/docs/files/others/confirm.md +0 -51
package/docs/files/others/drawer.md +0 -32
package/docs/files/others/loader.md +0 -22
package/docs/files/others/map.md +0 -32
package/docs/files/others/modal.md +0 -32
package/docs/files/others/notification.md +0 -52
package/docs/files/others/popover.md +0 -36
package/docs/files/others/resizer.md +0 -8
package/docs/files/others/scrollbar.md +0 -8
package/docs/files/others/tabs.md +0 -32
package/docs/index.template.html +0 -76
package/docs/src/js/backup.js +0 -128
package/docs/src/js/helper/item-helper.js +0 -0
package/docs/src/js/index.js +0 -21
package/docs/src/js/plugin/title-plugin.js +0 -0
package/docs/src/js/plugin/vue-demo-plugin.js +0 -97
package/docs/src/js/theme/basic.js +0 -31
package/docs/src/js/theme/docsify.js +0 -11
package/docs/src/scss/index-dark.scss +0 -3
package/docs/src/scss/index-light.scss +0 -3
package/docs/src/scss/index.scss +0 -15
package/docs/src/scss/mixins/base.scss +0 -14
package/docs/src/scss/mixins/grid.scss +0 -213
package/docs/src/scss/mixins/media.scss +0 -35
package/docs/src/scss/mixins/space.scss +0 -61
package/docs/src/scss/root/vars-dark.scss +0 -15
package/docs/src/scss/root/vars-light.scss +0 -15
package/docs/src/scss/root/vars.scss +0 -110
package/docs/src/scss/theme/default.scss +0 -123
package/docs/src/scss/theme/header.scss +0 -147
package/docs/src/scss/theme/layout.scss +0 -186
package/docs/src/scss/theme/loader.scss +0 -63
package/docs/src/scss/theme/markdown.scss +0 -79
package/docs/src/scss/theme/navigation.scss +0 -58
package/docs/src/scss/theme/progress.scss +0 -9
package/docs/src/scss/theme/search.scss +0 -119
package/docs/src/scss/theme/syntax.scss +0 -142
package/docs/src/scss/theme/table.scss +0 -63
package/favicon/apple-touch-icon.png +0 -0
package/favicon/favicon-96x96.png +0 -0
package/favicon/favicon.ico +0 -0
package/favicon/favicon.svg +0 -3
package/favicon/site.webmanifest +0 -21
package/favicon/web-app-manifest-192x192.png +0 -0
package/favicon/web-app-manifest-512x512.png +0 -0
package/mix-manifest.json +0 -4
package/postcss.config.js +0 -14
package/webpack.config.js +0 -211
package/webservy.json +0 -8
/package/{.nojekyll → dist/.ignore.js} +0 -0

package/demos/chart/index.html DELETED Viewed

@@ -1,53 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Nano UI Chart</title>
-    <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <link rel="stylesheet" href="../../dist/nano-ui.css">
-    <link rel="stylesheet" href="../style.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
-    <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
-    <script src="../../dist/nano-ui.js"></script>
-</head>
-<body>
-<div id="app">
-    <n-form :form="form">
-        <n-form-item label="Test">
-            <n-chart />
-        </n-form-item>
-    </n-form>
-</div>
-<script>
-    pi.Dom.ready(() => {
-        Vue.config.devtools = true;
-        var config = {
-            data: function() {
-                var form = {
-                    test: false
-                };
-                return {
-                    form: form, inverse: false
-                };
-            }
-        };
-        window.App = new Vue(config).$mount('#app');
-    })
-</script>
-</body>
-</html>

package/demos/checkbox/index.html DELETED Viewed

@@ -1,97 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Nano UI Checkbox</title>
-    <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <link rel="stylesheet" href="../../dist/nano-ui.css">
-    <link rel="stylesheet" href="../style.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
-    <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
-    <script src="../../dist/nano-ui.js"></script>
-</head>
-<body>
-<div id="app">
-    <n-form :form="form" :class="{ 'n-inverse': inverse }">
-        <n-form-item label="Inverse">
-            <n-checkbox v-model="inverse">Inverse</n-checkbox>
-        </n-form-item>
-        <n-form-item label="Small">
-            <n-checkbox v-model="form.option" size="small">Option</n-checkbox>
-        </n-form-item>
-        <n-form-item label="Default">
-            <n-checkbox v-model="form.option" size="default">Option</n-checkbox>
-        </n-form-item>
-        <n-form-item label="Large">
-            <n-checkbox v-model="form.option" size="large">Option</n-checkbox>
-        </n-form-item>
-        <n-form-item label="Disabled">
-            <n-checkbox v-model="form.option" :disabled="true">Option</n-checkbox>
-        </n-form-item>
-        <n-form-item label="Group Vertical">
-            <n-checkbox-group align="vertical" v-model="form.options">
-                <n-checkbox :global="true">Check all</n-checkbox>
-                <n-checkbox value="foo">Foo</n-checkbox>
-                <n-checkbox value="bar">Bar</n-checkbox>
-                <n-checkbox value="james">James</n-checkbox>
-                <n-checkbox value="bond">Bond</n-checkbox>
-                <n-checkbox value="chuck">Chuck</n-checkbox>
-                <n-checkbox value="norris">Norris</n-checkbox>
-            </n-checkbox-group>
-        </n-form-item>
-        <n-form-item label="Group Horizontal">
-            <n-checkbox-group align="horizontal" v-model="form.options">
-                <n-checkbox :global="true">Check all</n-checkbox>
-                <n-checkbox value="foo">Foo</n-checkbox>
-                <n-checkbox value="bar">Bar</n-checkbox>
-                <n-checkbox value="james">James</n-checkbox>
-                <n-checkbox value="bond">Bond</n-checkbox>
-                <n-checkbox value="chuck">Chuck</n-checkbox>
-                <n-checkbox value="norris">Norris</n-checkbox>
-            </n-checkbox-group>
-        </n-form-item>
-        <n-form-item label="Object">
-            <pre>{{ form }}</pre>
-        </n-form-item>
-    </n-form>
-</div>
-<script>
-    pi.Dom.ready(() => {
-        Vue.config.devtools = true;
-        var config = {
-            data: function() {
-                var form = {
-                    option: false, options: []
-                };
-                return {
-                    form: form, inverse: false
-                };
-            }
-        };
-        window.App = new Vue(config).$mount('#app');
-    })
-</script>
-</body>
-</html>

package/demos/config/index.html DELETED Viewed

@@ -1,95 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Nano UI Draggable</title>
-    <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <link rel="stylesheet" href="../../dist/nano-ui.css">
-    <link rel="stylesheet" href="../style.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
-    <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
-    <script src="../../dist/nano-ui.js"></script>
-</head>
-<body>
-<div id="app">
-    <n-config :value="value" :config="config"></n-config>
-</div>
-<script>
-    (function (Nano) {
-        'use strict';
-        pi.Dom.ready(function () {
-            Vue.config.devtools = true;
-            var config = {
-                data: function() {
-                    let config = {
-                        'NForm': {
-                            content: {
-                                'NFormItem:1': {
-                                    vIf: function (value) {
-                                        console.log(this);
-                                        return value.test3 === 'two';
-                                    },
-                                    props: {
-                                        label: 'Test 1'
-                                    },
-                                    content: {
-                                        'NInput': {
-                                            model: {
-                                                path: 'test1'
-                                            }
-                                        }
-                                    }
-                                },
-                                'NFormItem:3': {
-                                    props: {
-                                        label: 'Test 3'
-                                    },
-                                    content: {
-                                        'NInput': {
-                                            model: {
-                                                path: 'test3'
-                                            }
-                                        }
-                                    }
-                                },
-                                'NFormItem:2': {
-                                    props: {
-                                        label: 'Test 2'
-                                    },
-                                    content: {
-                                        'NInput': {
-                                            model: {
-                                                path: 'test2'
-                                            }
-                                        }
-                                    }
-                                },
-                            }
-                        }
-                    };
-                    return { value: {}, config: config };
-                }
-            };
-            window.App = new Vue(config).$mount('#app');
-        });
-    })(window.Nano);
-</script>
-</body>
-</html>

package/demos/confirm/index.html DELETED Viewed

@@ -1,78 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Nano UI Confirm</title>
-    <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <link rel="stylesheet" href="../../dist/nano-ui.css">
-    <link rel="stylesheet" href="../style.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
-    <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
-    <script src="../../dist/nano-ui.js"></script>
-</head>
-<body style="position: relative;">
-<div id="app">
-    <div class="n-form">
-        <n-button type="primary">
-            Confirm
-        </n-button>
-        <n-confirm type="primary">
-            Hello 01!
-        </n-confirm>
-        <n-button type="success">
-            Confirm
-        </n-button>
-        <n-confirm type="success">
-            Hello 01!
-        </n-confirm>
-        <n-button type="warning">
-            Confirm
-        </n-button>
-        <n-confirm type="warning">
-            Hello 01!
-        </n-confirm>
-        <n-button type="danger">
-            Confirm
-        </n-button>
-        <n-confirm type="danger" :closable="true">
-            Hello 01!
-        </n-confirm>
-        <n-button type="info">
-            Confirm
-        </n-button>
-        <n-confirm type="info" :closable="true">
-            Hello 01!
-        </n-confirm>
-    </div>
-</div>
-<script>
-    pi.Dom.ready(function () {
-        Vue.config.devtools = true;
-        var config = {
-            data: function() {
-                return { };
-            }
-        };
-        window.App = new Vue(config).$mount('#app');
-    });
-</script>
-</body>
-</html>

package/demos/datepicker/index.html DELETED Viewed

@@ -1,69 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Nano UI Datepicker</title>
-    <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <link rel="stylesheet" href="../../dist/nano-ui.css">
-    <link rel="stylesheet" href="../style.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
-    <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
-    <script src="../../dist/nano-ui.js"></script>
-</head>
-<body>
-<div id="app">
-    <n-form :form="form" :class="{ 'n-inverse': inverse }">
-        <n-form-item label="Inverse">
-            <n-checkbox v-model="inverse">Inverse</n-checkbox>
-        </n-form-item>
-        <n-form-item label="Test">
-            <n-button-group>
-                <n-datepicker v-model="form.date" :clearable="true"></n-datepicker>
-                <n-timepicker v-model="form.date" :clearable="true"></n-timepicker>
-            </n-button-group>
-        </n-form-item>
-        <n-form-item label="Test">
-            <n-datepicker :arrive.sync="form.arrive" :depart.sync="form.depart" :range="true" :clearable="true" />
-        </n-form-item>
-        <n-form-item label="Object">
-            <pre>{{ form }}</pre>
-        </n-form-item>
-    </n-form>
-</div>
-<script>
-    pi.Dom.ready(() => {
-        Vue.config.devtools = true;
-        var config = {
-            data: function() {
-                var form = {
-                    date: 'now+2days', arrive: 'now', depart: 'now+2days'
-                };
-                return {
-                    form: form, inverse: false
-                };
-            }
-        };
-        window.App = new Vue(config).$mount('#app');
-    })
-</script>
-</body>
-</html>

package/demos/draggable/index.html DELETED Viewed

@@ -1,127 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Nano UI Draggable</title>
-    <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <link rel="stylesheet" href="../../dist/nano-ui.css">
-    <link rel="stylesheet" href="../style.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
-    <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
-    <script src="../../dist/nano-ui.js"></script>
-</head>
-<body>
-<div id="app">
-    <n-form :form="form" :class="{ 'n-inverse': inverse }">
-        <n-form-item label="Inverse">
-            <n-checkbox v-model="inverse">Inverse</n-checkbox>
-        </n-form-item>
-        <n-form-item label="List">
-            <div style="display: block; border: 2px solid #000;">
-                <div>
-                    <n-draglist ref="drag" style="height: 500px; overflow: hidden;" :items="form.value" :viewport-height="true" :render-expand="true" :render-select="true" :expanded="['value-1']" :threshold="800">
-                        <div slot-scope="props" style="line-height: 32px;">
-                            {{ props.value.label }}
-                        </div>
-                    </n-draglist>
-                </div>
-            </div>
-            <div style="display: block; border: 2px solid #000;">
-                <div>
-                    <n-draggrid style="height: 500px; overflow: hidden;" :items="form.value" :viewport-height="true" :render-expand="true" :render-select="true" :threshold="800">
-                        <div slot-scope="props" style="line-height: 32px;">
-                            {{ props.value.label }}
-                        </div>
-                    </n-draggrid>
-                </div>
-            </div>
-        <n-form-item v-if="false" label="Tree">
-            <n-draglist-tree :items="form.value" unique-prop="id" :cascade.sync="form.cascade">
-                <div slot-scope="props">{{ props.value.label }}</div>
-            </n-draglist-tree>
-        </n-form-item>
-    </n-form>
-</div>
-<script>
-    (function (Nano) {
-        'use strict';
-        pi.Dom.ready(function () {
-            Vue.config.devtools = true;
-            var config = {
-                data: function() {
-                    let total = 0;
-                    let childGenerator = function(count, depth, current) {
-                        if ( count === undefined ) {
-                            count = 3;
-                        }
-                        if ( depth === undefined ) {
-                            depth = 2;
-                        }
-                        if ( current === undefined ) {
-                            current = 1;
-                        }
-                        let children = Array(count).fill(null);
-                        pi.Arr.map(children, function (item) {
-                            total++;
-                            item = {
-                                label: 'Item ' + total,
-                                id: 'value-' + total,
-                                children: []
-                            };
-                            if ( current < depth ) {
-                                item.children = childGenerator(30, depth, current + 1);
-                            }
-                            return item;
-                        });
-                        return children;
-                    };
-                    var form = {
-                        value: []//childGenerator(2, 2)
-                    };
-                    return { form: form, inverse: false };
-                },
-                mounted: function() {
-                    console.log(this.$refs.drag.getParentById('value-20'));
-                }
-            };
-            window.App = new Vue(config).$mount('#app');
-        });
-    })(window.Nano);
-</script>
-</body>
-</html>

package/demos/form/index.html DELETED Viewed

@@ -1,83 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Nano UI Form</title>
-    <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <link rel="stylesheet" href="../../dist/nano-ui.css">
-    <link rel="stylesheet" href="../style.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
-    <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
-    <script src="../../dist/nano-ui.js"></script>
-</head>
-<body>
-<div id="app">
-    <n-form :form="form" :errors="errors" :class="{ 'n-inverse': inverse }">
-        <n-form-item label="Inverse">
-            <n-checkbox v-model="inverse">Inverse</n-checkbox>
-        </n-form-item>
-        <n-form-group icon="fa fa-key" legend="With legend" :checkable="true">
-            <n-form-item label="Default">
-                <n-input v-model="form.name" />
-            </n-form-item>
-        </n-form-group>
-        <n-form-group align="horizontal" legend="With legend" tooltip="Im a legend tooltip">
-            <n-form-item label="Default">
-                <n-input v-model="form.name" />
-            </n-form-item>
-        </n-form-group>
-        <n-form-item label="With tooltip" tooltip="Im a label tooltip">
-            <n-input v-model="form.name" />
-        </n-form-item>
-        <n-form-item prop="name" label="Error">
-            <n-textarea v-model="form.name" :auto-rows="true" />
-        </n-form-item>
-    </n-form>
-</div>
-<script>
-    pi.Dom.ready(() => {
-        Vue.config.devtools = true;
-        var config = {
-            data: function() {
-                var form = {
-                    name: '',
-                    password: ''
-                };
-                var errors = {
-                    name: 'My custom error'
-                };
-                return {
-                    form: form, errors: errors, inverse: false
-                };
-            }
-        };
-        window.App = new Vue(config).$mount('#app');
-    })
-</script>
-</body>
-</html>