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/builder.html DELETED Viewed

@@ -1,411 +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 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-    <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">
-    <link rel="stylesheet" href="../style.css">
-    <style>
-        div {
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
-            font-size: 14px;
-            height: 100%;
-            overflow-x: hidden;
-        }
-        #app {
-            overflow-x: hidden;
-        }
-        .app-container {
-            max-width: 1440px;
-            margin: 0 auto;
-            padding: 20px 30px 40px 30px;
-        }
-        .app-options {
-            border-bottom: 1px solid rgba(110, 110, 110, 0.15);
-            margin-bottom: 20px;
-        }
-        h2 {
-            font-size: 32px;
-            font-weight: bold;
-            padding-bottom: 10px;
-            margin: 50px 0 15px;
-            border-bottom: 1px solid rgba(110, 110, 110, 0.15);
-        }
-    </style>
-    <script src="https://unpkg.com/moment"></script>
-    <script src="https://unpkg.com/vue@3.4.6"></script>
-    <script src="https://vankizmann.github.io/pico-js/dist/pico-js.js"></script>
-    <script src="../dist/nano-ui.js"></script>
-    <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
-    <script src="https://maps.googleapis.com/maps/api/js"></script>
-</head>
-<body class="n-demo">
-<div id="app">
-    <div class="app-container">
-        <n-builder :model-value="demoConfigNext" :model="demoModel" :scope="demoScope"></n-builder>
-    </div>
-</div>
-<script>
-    (function (nano) {
-        'use strict';
-        pi.Locale.set('URL', "URL2");
-        pi.Locale.set('URX', "URX2");
-        pi.Dom.ready(function () {
-            let data = {};
-            data.demoModel = {
-                test: true,
-                label: 'foobar',
-                option: {
-                    url: 'http://', redirect: 'AHA'
-                }
-            };
-            data.demoScope = {
-                testme: () => {
-                    console.log('abc');
-                }
-            }
-            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',
-            };
-            pi.Obj.set(data, 'demoConfigNext.NFormGroup:root', {
-                vShow: [
-                    '$model.test'
-                ],
-                props: {
-                    label: '$model.label',
-                    icon: 'fa fa-directions'
-                }
-            });
-            pi.Obj.set(data, 'demoConfigNext.NFormGroup:root.content.NFormItem:url', {
-                props: {
-                    label: '\\@URX',
-                    test: function() {
-                        console.log(123);
-                    }
-                },
-                content: {
-                    'NInput': {
-                        binds: {
-                            modelValue: '$model.option.url'
-                        }
-                    }
-                }
-            });
-            pi.Obj.set(data, 'demoConfigNext.NFormGroup:root.content.NFormItem:menu', {
-                props: {
-                    label: pi.Locale.trans('Menu')
-                },
-                content: {
-                    'NSwitch': {
-                        binds: {
-                            modelValue: '$model.option.redirect'
-                        },
-                        props: {
-                            "foo": "@bar"
-                        },
-                        content: [
-                            "@123"
-                        ]
-                    }
-                }
-            });
-            data.demoConfig = {
-                'NFormGroup:00': {
-                    $props: {
-                        label: pi.Locale.trans('Redirect'),
-                        icon: 'fa fa-directions'
-                    },
-                    content: {
-                        'div:00': {
-                            class: 'grid grid--row grid--wrap grid--30',
-                            content: {
-                                'div:00': {
-                                    class: 'col--1-1 col--1-2@sm',
-                                    content: {
-                                        'NFormItem:00': {
-                                            $props: {
-                                                label: pi.Locale.trans('URL')
-                                            },
-                                            content: {
-                                                'NInput:00': {
-                                                    model: {
-                                                        path: 'option.url'
-                                                    }
-                                                }
-                                            }
-                                        },
-                                    }
-                                },
-                                'div:10': {
-                                    class: 'col--1-1 col--1-2@sm',
-                                    content: {
-                                        'NFormItem:00': {
-                                            $props: {
-                                                label: pi.Locale.trans('Menu')
-                                            },
-                                            content: {
-                                                'Nswitch:00': {
-                                                    model: {
-                                                        path: 'option.redirect'
-                                                    },
-                                                    content: [
-                                                        pi.Locale.trans("foobar")
-                                                    ]
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                },
-            };
-            data.configData = { label: 'asdasda' };
-            data.testData = [];
-            let itemGenerator = function (count = 100, index = 0) {
-                return pi.Arr.each(pi.Arr.make(count), function (value) {
-                    let id = pi.UUID();
-                    return {
-                        id:     id,
-                        value:  id,
-                        matrix: 10,
-                        label:  `Item ${index++}`,
-                        image:  'https://picsum.photos/300/300.jpg?' + id,
-                        date: pi.Now.make('now').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(100), function (item) {
-                return pi.Obj.assign(item, { children: itemGenerator(10) });
-            });
-            data.virtualItem = null;
-            data.treeSelect = null;
-            data.treeMatrix = [data.virtualTree[3]];
-            data.foobar = 'huhu';
-            data.n_theme = pi.Cookie.get('theme', 'light', 'string');
-            pi.Dom.find('#theme').attr('href', '../dist/themes/' +
-                data.n_theme + '.css');
-            data.n_form = {
-                size: 'md', conditional: true, modelValue: false
-            };
-            data.n_tags = {
-                size: 'md',
-            };
-            data.n_rating = {
-                size: 'md', choice: 'No stars|:value star|:value stars', disabled: false
-            };
-            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 = {
-                test: '', value: 3, size: 'md', placeholder: '', disabled: false, minValue: 0, maxValue: 10
-            };
-            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_slider = {
-                size: 'md', disabled: false, temp_value: 30,
-            };
-            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_datetimepicker = {
-                size: 'md', type: 'primary', clearable: true, disabled: false
-            };
-            data.n_durationpicker = {
-                size: 'md', type: 'primary', clearable: true, disabled: false, modelValue: 124521
-            };
-            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_collapse = {
-                value: ['default'], size: 'md', type: 'primary', relative: false
-            };
-            data.n_paginator = {
-                size: 'md', type: 'primary'
-            };
-            data.n_draggable = {
-                count: 0
-            };
-            data.n_loader = {
-                size: 'md', type: 'primary', visible: true
-            };
-            data.n_map = {
-                lat: 53.55, lng: 9.99
-            };
-            data.n_preview = {
-                file: null
-            };
-            let methods = {};
-            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;
-                },
-                mounted: function () {
-                    let self = this;
-                },
-                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.nano);
-</script>
-</body>
-</html>

package/demos/button/index.html DELETED Viewed

@@ -1,129 +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 Button</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="Regular">
-            <n-button type="primary">Primary</n-button>
-            <n-button type="secondary">Secondary</n-button>
-            <n-button type="success">Success</n-button>
-            <n-button type="warning">Warning</n-button>
-            <n-button type="danger">Danger</n-button>
-            <n-button type="info">Info</n-button>
-            <n-button type="link">Link</n-button>
-        </n-form-item>
-        <n-form-item label="Disabled">
-            <n-button type="primary" :disabled="true">Primary</n-button>
-            <n-button type="secondary" :disabled="true">Secondary</n-button>
-            <n-button type="success" :disabled="true">Success</n-button>
-            <n-button type="warning" :disabled="true">Warning</n-button>
-            <n-button type="danger" :disabled="true">Danger</n-button>
-            <n-button type="info" :disabled="true">Info</n-button>
-            <n-button type="link" :disabled="true">Link</n-button>
-        </n-form-item>
-        <n-form-item label="Outline default">
-            <n-button type="primary" :outline="true">Primary</n-button>
-            <n-button type="secondary" :outline="true">Secondary</n-button>
-            <n-button type="success" :outline="true">Success</n-button>
-            <n-button type="warning" :outline="true">Warning</n-button>
-            <n-button type="danger" :outline="true">Danger</n-button>
-            <n-button type="info" :outline="true">Info</n-button>
-        </n-form-item>
-        <n-form-item label="Outline disabled">
-            <n-button type="primary" :outline="true" :disabled="true">Primary</n-button>
-            <n-button type="secondary" :outline="true" :disabled="true">Secondary</n-button>
-            <n-button type="success" :outline="true" :disabled="true">Success</n-button>
-            <n-button type="warning" :outline="true" :disabled="true">Warning</n-button>
-            <n-button type="danger" :outline="true" :disabled="true">Danger</n-button>
-            <n-button type="info" :outline="true" :disabled="true">Info</n-button>
-        </n-form-item>
-        <n-form-item label="Icon">
-            <n-button type="success" icon="fa fa-check-circle" icon-position="after">Success</n-button>
-            <n-button type="warning" icon="fa fa-exclamation-circle">Warning</n-button>
-            <n-button type="danger" icon="fa fa-times-circle">Danger</n-button>
-            <n-button type="info" icon="fa fa-info-circle">Info</n-button>
-        </n-form-item>
-        <n-form-item label="Square">
-            <n-button type="success" icon="fa fa-check-circle" :square="true"></n-button>
-            <n-button type="warning" icon="fa fa-exclamation-circle" :square="true"></n-button>
-            <n-button type="danger" icon="fa fa-times-circle" :square="true"></n-button>
-            <n-button type="info" icon="fa fa-info-circle" :square="true"></n-button>
-        </n-form-item>
-        <n-form-item label="Group">
-            <n-button-group>
-                <n-button type="primary" icon="fa fa-angle-left">
-                    Previous
-                </n-button>
-                <n-button type="primary" icon="fa fa-angle-right" icon-position="after">
-                    Next
-                </n-button>
-            </n-button-group>
-        </n-form-item>
-        <n-form-item label="Group square">
-            <n-button-group>
-                <n-button type="primary" icon="fa fa-check-circle" :square="true"></n-button>
-                <n-button type="primary" icon="fa fa-times-circle" :square="true"></n-button>
-            </n-button-group>
-        </n-form-item>
-        <n-form-item label="Sizes">
-            <n-button type="primary" size="small">Small</n-button>
-            <n-button type="primary" size="default">Regular</n-button>
-            <n-button type="primary" size="large">Large</n-button>
-        </n-form-item>
-    </n-form>
-</div>
-<script>
-    pi.Dom.ready(() => {
-        Vue.config.devtools = true;
-        var config = {
-            data: function() {
-                var form = {
-                    //
-                };
-                return {
-                    form: form, inverse: false
-                };
-            }
-        };
-        window.App = new Vue(config).$mount('#app');
-    })
-</script>
-</body>
-</html>

package/demos/cascader/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 Cascader</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="Click">
-            <n-cascader v-model="form.value" :items="items" trigger="click"></n-cascader>
-        </n-form-item>
-        <n-form-item label="Hover">
-            <n-cascader v-model="form.value" :items="items" trigger="hover"></n-cascader>
-        </n-form-item>
-        <n-form-item label="Clearable">
-            <n-cascader v-model="form.value" :items="items" :clearable="true"></n-cascader>
-        </n-form-item>
-        <n-form-item label="Disabled">
-            <n-cascader v-model="form.value" :items="items" :disabled="true"></n-cascader>
-        </n-form-item>
-        <n-form-item label="Object">
-            <pre>{{ form }}</pre>
-        </n-form-item>
-        <div style="height: 600px; overflow-y: scroll; background: #efefef; position: relative;">
-            <div style="padding: 800px 0 80px;">
-                <n-form-item label="Default">
-                    <n-cascader v-model="form.value" :items="items"></n-cascader>
-                </n-form-item>
-            </div>
-        </div>
-    </n-form>
-</div>
-<script>
-    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 = 10;
-                    }
-                    if ( depth === undefined ) {
-                        depth = 5;
-                    }
-                    if ( current === undefined ) {
-                        current = 1;
-                    }
-                    let children = Array(
-                        Math.floor(Math.random() * (count + 1))
-                    ).fill(null);
-                    pi.Arr.map(children, function(item) {
-                        total++;
-                        item = {
-                            label: 'Item ' + (Math.floor(Math.random() * 2) === 1 ? 'long text is here given' : '') + total,
-                            value: 'value-' + total,
-                            disabled: !! Math.floor(Math.random() * 2),
-                            children: []
-                        };
-                        if ( current < depth ) {
-                            item.children = childGenerator(count, depth, current + 1);
-                        }
-                        return item;
-                    });
-                    return children;
-                };
-                var form = {
-                    value: []
-                };
-                var self = this;
-                pi.Any.delay(function () {
-                    self.items = childGenerator();
-                }, 2000);
-                return { form: form, inverse: false, items: [] };
-            }
-        };
-        window.App = new Vue(config).$mount('#app');
-    });
-</script>
-</body>
-</html>