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

@kizmann/nano-ui 1.0.0 → 1.0.1

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 (115) hide show

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 +7 -1
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/paginator/index.html DELETED Viewed

@@ -1,58 +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 Paginator</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">
-            <n-paginator size="small" :page="1" :limit="25" :total="264" />
-        </n-form-item>
-    </n-form>
-</div>
-<script>
-    (function (Nano) {
-        'use strict';
-        pi.Dom.ready(function () {
-            Vue.config.devtools = true;
-            var config = {
-                data: function() {
-                    return { form: {}, inverse: false };
-                }
-            };
-            window.App = new Vue(config).$mount('#app');
-        });
-    })(window.Nano);
-</script>
-</body>
-</html>

package/demos/popover/index.html DELETED Viewed

@@ -1,103 +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 Popover</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">
-    <n-form class="n-form">
-        <n-form-item>
-            <pre>{{ test }}</pre>
-        </n-form-item>
-        <n-form-item>
-            <n-checkbox v-model="hide"></n-checkbox>
-        </n-form-item>
-        <div v-if="!hide" id="test" style="position: relative !important; background: #eee; height: 300px; overflow: hidden;">
-            <n-scrollbar>
-                <div>
-                    <n-button type="primary" refs="toggle">
-                        Popover 01
-                    </n-button>
-                    <n-popover trigger="hover" position="top-start" :width="300">
-                        <n-input v-model="test"></n-input>
-                    </n-popover>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <br>
-                    <n-button type="warning">
-                        Popover 02
-                    </n-button>
-                </div>
-                <n-popover trigger="context">
-                    Hello 2!
-                </n-popover>
-            </n-scrollbar>
-        </div>
-    </n-form>
-</div>
-<script>
-    pi.Dom.ready(function () {
-        Vue.config.devtools = true;
-        var config = {
-            data: function() {
-                return { test: 'Foo', hide: false };
-            }
-        };
-        window.App = new Vue(config).$mount('#app');
-    });
-</script>
-</body>
-</html>

package/demos/radio/index.html DELETED Viewed

@@ -1,71 +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 Radio</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="Group Vertical">
-            <n-radio-group align="vertical" v-model="form.option">
-                <n-radio value="foo">Foo</n-radio>
-                <n-radio value="bar">Bar</n-radio>
-                <n-radio value="james">James</n-radio>
-                <n-radio value="bond">Bond</n-radio>
-                <n-radio value="chuck">Chuck</n-radio>
-                <n-radio value="norris">Norris</n-radio>
-            </n-radio-group>
-        </n-form-item>
-        <n-form-item label="Group Horizontal">
-            <n-radio-group align="horizontal" v-model="form.option">
-                <n-radio value="foo">Foo</n-radio>
-                <n-radio value="bar">Bar</n-radio>
-                <n-radio value="james">James</n-radio>
-                <n-radio value="bond">Bond</n-radio>
-                <n-radio value="chuck">Chuck</n-radio>
-                <n-radio value="norris">Norris</n-radio>
-            </n-radio-group>
-        </n-form-item>
-    </n-form>
-</div>
-<script>
-    pi.Dom.ready(() => {
-        Vue.config.devtools = true;
-        var config = {
-            data: function() {
-                var form = {
-                    option: null
-                };
-                return {
-                    form: form, inverse: false
-                };
-            }
-        };
-        window.App = new Vue(config).$mount('#app');
-    })
-</script>
-</body>
-</html>

package/demos/resizer/index.html DELETED Viewed

@@ -1,106 +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 Resizer</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">
-    <div style="border: 2px solid #000; display: inline-block; overflow: hidden;">
-        <div style="position: relative; width: 600px; height: 30vw; max-width: 100%; overflow: auto;">
-            <n-resizer :width="600" :min-width="300" :max-width="800">
-                <div style="width: 600px;">
-                    <div style="margin-left: auto; height: 400px; width: 400px; background: lightcoral;">
-                        <!-- SPACER -->
-                    </div>
-                    <div style="margin-left: auto; height: 200px; width: 200px; background: lightblue;">
-                        <!-- SPACER -->
-                    </div>
-                    <div style="margin-left: auto; height: 300px; width: 300px; background: lightseagreen;">
-                        <!-- SPACER -->
-                    </div>
-                    <div style="margin-left: auto; height: 400px; width: 400px; background: lightcoral;">
-                        <!-- SPACER -->
-                    </div>
-                    <div style="margin-left: auto; height: 200px; width: 200px; background: lightblue;">
-                        <!-- SPACER -->
-                    </div>
-                    <div style="margin-left: auto; height: 300px; width: 300px; background: lightseagreen;">
-                        <!-- SPACER -->
-                    </div>
-                    <div style="margin-left: auto; height: 400px; width: 400px; background: lightcoral;">
-                        <!-- SPACER -->
-                    </div>
-                    <div style="margin-left: auto; height: 200px; width: 200px; background: lightblue;">
-                        <!-- SPACER -->
-                    </div>
-                    <div style="margin-left: auto; height: 300px; width: 300px; background: lightseagreen;">
-                        <!-- SPACER -->
-                    </div>
-                </div>
-            </n-resizer>
-        </div>
-    </div>
-</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) {
-                        if ( count === undefined ) {
-                            count = 300;
-                        }
-                        let children = Array(count).fill(null);
-                        pi.Arr.map(children, function (item) {
-                            total ++;
-                            item = {
-                                label: 'Item ' + total, id: 'id-' + total
-                            };
-                            return item;
-                        });
-                        return children;
-                    };
-                    return { items: childGenerator(80), items2: [] };
-                }
-            };
-            window.App = new Vue(config).$mount('#app');
-        });
-    })(window.Nano);
-</script>
-</body>
-</html>

package/demos/scrollbar.html DELETED Viewed

@@ -1,328 +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</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
-    <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 id="theme" rel="stylesheet" href="../dist/themes/light.css">
-    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.prod.js"></script> -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
-    <script src="https://unpkg.com/vue@3.4.6"></script>
-    <!-- <script src="../node_modules/pico-js/dist/pico-js.js"></script> -->
-    <script src="https://vankizmann.github.io/pico-js/dist/pico-js.js"></script>
-    <script src="../dist/nano-ui.js"></script>
-    <link rel="stylesheet" href="../docs/dist/index.css">
-    <style>
-        body {
-            font-family: 'Helvetica', 'Roboto', 'Arial', sans-serif;
-            font-size: 14px;
-            height: 100%;
-            overflow-x: hidden;
-        }
-        #app {
-            overflow-x: hidden;
-        }
-        .app-scrollbar {
-            width: 100vw;
-            height: 100vh;
-        }
-        .app-container {
-            max-width: 1440px;
-            margin: 0 auto;
-            padding: 20px 30px 40px 30px;
-        }
-        .app-options {
-            border-bottom: 1px solid #eee;
-            margin-bottom: 20px;
-        }
-        h2 {
-            font-size: 32px;
-            font-weight: bold;
-            padding-bottom: 10px;
-            margin: 50px 0 15px;
-            border-bottom: 1px solid #eee;
-        }
-    </style>
-</head>
-<body>
-<div id="app">
-    <div class="app-container">
-        <h2>NVirtualscroller</h2>
-        <div class="grid grid--row grid--wrap grid--10-10">
-            <div class="col--auto">
-                <n-button type="primary" @click="virtualTree = virtualData">
-                    Swap items
-                </n-button>
-            </div>
-            <div class="col--auto">
-                <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(0)">
-                    Scroll to first item
-                </n-button>
-            </div>
-            <div class="col--auto">
-                <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(2000)">
-                    Scroll to item 2000
-                </n-button>
-            </div>
-            <div class="col--auto">
-                <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(7100)">
-                    Scroll to item 7100
-                </n-button>
-            </div>
-            <div class="col--auto">
-                <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(-1)">
-                    Scroll to last item
-                </n-button>
-            </div>
-        </div>
-        <n-virtualscroller ref="virtualscroller" :items="virtualData" style="height: 500px; margin-top: 30px; box-shadow: 0 0 2px 2px #dddedf; border-radius: 4px;">
-            <template v-slot:default="{ value }">
-                <div style="padding: 0 15px; line-height: 30px;">{{ value.label }}</div>
-            </template>
-        </n-virtualscroller>
-        <n-draglist v-model:items="virtualTree" unique-prop="uid" :render-select="true" :render-expand="true" style="height: 300px; margin-top: 30px; border: 2px solid #dddedf; border-radius: 4px;">
-            <template v-slot:default="{ value, item }">
-                <div style="padding: 0 15px; line-height: 34px;">{{ item.label }}</div>
-            </template>
-        </n-draglist>
-        <n-table ref="table" v-model:items="virtualTree" unique-prop="uid" :render-expand="true" :item-height="36" style="margin-top: 30px; min-height: 500px;">
-            <n-table-column label="Label" type="string" prop="label"></n-table-column>
-            <n-table-column v-model="treeSelect" label="Matrix 1" type="select" :matrix="1" :width="120">
-                <template v-slot:default>Text wohoo</template>
-            </n-table-column>
-            <n-table-column v-model="treeMatrix" label="Matrix 2" type="matrix" :matrix="2" align="center" :fixed-width="120"></n-table-column>
-            <n-table-column v-model="treeMatrix" label="Matrix 4" type="matrix" :matrix="4" align="center" :fixed-width="120"></n-table-column>
-            <n-table-column v-model="treeMatrix" label="Matrix 8" type="matrix" :matrix="8" align="center" :fixed-width="120"></n-table-column>
-            <n-table-column v-model="treeMatrix" label="Matrix 16" type="matrix" :matrix="16" align="center" :fixed-width="120"></n-table-column>
-        </n-table>
-    </div>
-</div>
-<script>
-    (function (nano) {
-        'use strict';
-        pi.Dom.ready(function () {
-            let data = {};
-            data.sizes = {
-                xs: 'XS',
-                sm: 'SM',
-                md: 'MD',
-                lg: 'LG'
-            };
-            data.types = {
-                primary:    'Primary',
-                secondary:  'Secondary',
-                success:    'Success',
-                warning:    'Warning',
-                danger:     'Danger',
-                info:       'Info'
-            };
-            data.modals = {
-                default:    'Default',
-                preview:    'Preview',
-            };
-            data.demoConfig = {
-                'div': {
-                    class: [
-                        'foobar'
-                    ],
-                    content: {
-                        'NInput:page_id': {
-                            model: {
-                                path: 'page_id'
-                            }
-                        },
-                        'NInput:page_id2': {
-                            model: {
-                                path: 'page_id'
-                            }
-                        }
-                    }
-                }
-            };
-            data.configData = {};
-            data.testData = [];
-            let itemGenerator = function (count = 100, index = 0) {
-                return pi.Arr.each(pi.Arr.make(count), function (value) {
-                    let id = pi.UUID();
-                    return {
-                        uid:    id,
-                        value:  id,
-                        matrix: 10,
-                        label:  `Item ${index++}`,
-                        image:  'https://picsum.photos/400/400?' + id,
-                        date: pi.Now.make().format('YYYY-MM-DD HH:mm:ss', true),
-                        enabled: !! Math.floor(Math.random() * 2)
-                    };
-                });
-            };
-            data.cascaderData = pi.Arr.each(itemGenerator(5), function (item) {
-                let children  = pi.Arr.each(itemGenerator(5), function (item) {
-                    return pi.Obj.assign(item, { children: itemGenerator(5) });
-                });
-                return pi.Obj.assign(item, { children: children });
-            });
-            data.virtualData = itemGenerator(10000);
-            data.virtualTree = pi.Arr.each(itemGenerator(1000), function (item) {
-                return pi.Obj.assign(item, { children: itemGenerator(20) });
-            });
-            data.treeSelect = null;
-            data.treeMatrix = [data.virtualTree[3]];
-            data.n_button = {
-                icon: 'fa fa-ghost', size: 'md', square: false, link: false, disabled: false
-            };
-            data.n_textarea = {
-                size: 'md', placeholder: 'Placeholder', autoRows: false, disabled: false
-            };
-            data.n_input = {
-                value: 'Demo', icon: 'fa fa-ghost', size: 'md', placeholder: 'Placeholder', disabled: false
-            };
-            data.n_number = {
-                value: 3, size: 'md', placeholder: '', disabled: false
-            };
-            data.n_select = {
-                size: 'md', allowCreate: false, clearable: true, disabled: false
-            };
-            data.n_cascader = {
-                size: 'md', type: 'primary', clearable: true, disabled: false
-            };
-            data.n_checkbox = {
-                size: 'md', type: 'primary', disabled: false
-            };
-            data.n_radio = {
-                size: 'md', type: 'primary', disabled: false
-            };
-            data.n_switch = {
-                size: 'md', disabled: false
-            };
-            data.n_datepicker = {
-                size: 'md', type: 'primary', clearable: true, disabled: false
-            };
-            data.n_timepicker = {
-                size: 'md', type: 'primary', clearable: true, disabled: false
-            };
-            data.n_transfer = {
-                size: 'md', type: 'primary', disabled: false
-            };
-            data.n_modal = {
-                size: 'md', type: 'default', disabled: false
-            };
-            data.n_confirm = {
-                size: 'md', type: 'primary', disabled: false
-            };
-            data.n_tabs = {
-                value: 'default', size: 'md', type: 'primary'
-            };
-            data.n_paginator = {
-                size: 'md', type: 'primary'
-            };
-            data.n_draggable = {
-                count: 0
-            };
-            data.n_loader = {
-                size: 'md', type: 'primary', visible: true
-            };
-            let methods = {};
-            methods.log = function (val) {
-                console.log(val || 'Log fired');
-            };
-            methods.notify = function (type) {
-                this.Notify('Lorem ipsum dolore', type);
-            };
-            var config = {
-                data: function () {
-                    this.icons = pi.Obj.assign(nano.Icons, {
-                        ghost: 'fa fa-ghost'
-                    });
-                    data.demoIcons = pi.Arr.reduce(pi.Obj.values(nano.Icons), function (merge, icon) {
-                        return pi.Obj.assign(merge, { [icon]: icon });
-                    }, {});
-                    return data;
-                },
-                methods: methods
-            };
-            window.App = Vue.createApp(config);
-            window.App.config.devtools = true;
-            window.App.use(function (App) {
-                nano.Install(App);
-            });
-            window.App.mount('#app');
-            window.DEBUG_NDLIST = true;
-        });
-    })(window.nano);
-</script>
-</body>
-</html>