@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.
- 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/chart/index.html
DELETED
@@ -1,53 +0,0 @@
|
|
1
|
-
<!doctype html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>Nano UI Chart</title>
|
8
|
-
|
9
|
-
<link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
|
10
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
|
11
|
-
<link rel="stylesheet" href="../../dist/nano-ui.css">
|
12
|
-
<link rel="stylesheet" href="../style.css">
|
13
|
-
|
14
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
|
15
|
-
<script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
|
16
|
-
<script src="../../dist/nano-ui.js"></script>
|
17
|
-
|
18
|
-
</head>
|
19
|
-
<body>
|
20
|
-
|
21
|
-
<div id="app">
|
22
|
-
<n-form :form="form">
|
23
|
-
|
24
|
-
<n-form-item label="Test">
|
25
|
-
<n-chart />
|
26
|
-
</n-form-item>
|
27
|
-
|
28
|
-
</n-form>
|
29
|
-
</div>
|
30
|
-
|
31
|
-
<script>
|
32
|
-
pi.Dom.ready(() => {
|
33
|
-
|
34
|
-
Vue.config.devtools = true;
|
35
|
-
|
36
|
-
var config = {
|
37
|
-
data: function() {
|
38
|
-
|
39
|
-
var form = {
|
40
|
-
test: false
|
41
|
-
};
|
42
|
-
|
43
|
-
return {
|
44
|
-
form: form, inverse: false
|
45
|
-
};
|
46
|
-
}
|
47
|
-
};
|
48
|
-
|
49
|
-
window.App = new Vue(config).$mount('#app');
|
50
|
-
})
|
51
|
-
</script>
|
52
|
-
</body>
|
53
|
-
</html>
|
@@ -1,97 +0,0 @@
|
|
1
|
-
<!doctype html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>Nano UI Checkbox</title>
|
8
|
-
|
9
|
-
<link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
|
10
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
|
11
|
-
<link rel="stylesheet" href="../../dist/nano-ui.css">
|
12
|
-
<link rel="stylesheet" href="../style.css">
|
13
|
-
|
14
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
|
15
|
-
<script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
|
16
|
-
<script src="../../dist/nano-ui.js"></script>
|
17
|
-
|
18
|
-
</head>
|
19
|
-
<body>
|
20
|
-
|
21
|
-
<div id="app">
|
22
|
-
<n-form :form="form" :class="{ 'n-inverse': inverse }">
|
23
|
-
|
24
|
-
<n-form-item label="Inverse">
|
25
|
-
<n-checkbox v-model="inverse">Inverse</n-checkbox>
|
26
|
-
</n-form-item>
|
27
|
-
|
28
|
-
<n-form-item label="Small">
|
29
|
-
<n-checkbox v-model="form.option" size="small">Option</n-checkbox>
|
30
|
-
</n-form-item>
|
31
|
-
|
32
|
-
<n-form-item label="Default">
|
33
|
-
<n-checkbox v-model="form.option" size="default">Option</n-checkbox>
|
34
|
-
</n-form-item>
|
35
|
-
|
36
|
-
<n-form-item label="Large">
|
37
|
-
<n-checkbox v-model="form.option" size="large">Option</n-checkbox>
|
38
|
-
</n-form-item>
|
39
|
-
|
40
|
-
<n-form-item label="Disabled">
|
41
|
-
<n-checkbox v-model="form.option" :disabled="true">Option</n-checkbox>
|
42
|
-
</n-form-item>
|
43
|
-
|
44
|
-
<n-form-item label="Group Vertical">
|
45
|
-
<n-checkbox-group align="vertical" v-model="form.options">
|
46
|
-
<n-checkbox :global="true">Check all</n-checkbox>
|
47
|
-
<n-checkbox value="foo">Foo</n-checkbox>
|
48
|
-
<n-checkbox value="bar">Bar</n-checkbox>
|
49
|
-
<n-checkbox value="james">James</n-checkbox>
|
50
|
-
<n-checkbox value="bond">Bond</n-checkbox>
|
51
|
-
<n-checkbox value="chuck">Chuck</n-checkbox>
|
52
|
-
<n-checkbox value="norris">Norris</n-checkbox>
|
53
|
-
</n-checkbox-group>
|
54
|
-
</n-form-item>
|
55
|
-
|
56
|
-
<n-form-item label="Group Horizontal">
|
57
|
-
<n-checkbox-group align="horizontal" v-model="form.options">
|
58
|
-
<n-checkbox :global="true">Check all</n-checkbox>
|
59
|
-
<n-checkbox value="foo">Foo</n-checkbox>
|
60
|
-
<n-checkbox value="bar">Bar</n-checkbox>
|
61
|
-
<n-checkbox value="james">James</n-checkbox>
|
62
|
-
<n-checkbox value="bond">Bond</n-checkbox>
|
63
|
-
<n-checkbox value="chuck">Chuck</n-checkbox>
|
64
|
-
<n-checkbox value="norris">Norris</n-checkbox>
|
65
|
-
</n-checkbox-group>
|
66
|
-
</n-form-item>
|
67
|
-
|
68
|
-
<n-form-item label="Object">
|
69
|
-
<pre>{{ form }}</pre>
|
70
|
-
</n-form-item>
|
71
|
-
|
72
|
-
</n-form>
|
73
|
-
</div>
|
74
|
-
|
75
|
-
<script>
|
76
|
-
pi.Dom.ready(() => {
|
77
|
-
|
78
|
-
Vue.config.devtools = true;
|
79
|
-
|
80
|
-
var config = {
|
81
|
-
data: function() {
|
82
|
-
|
83
|
-
var form = {
|
84
|
-
option: false, options: []
|
85
|
-
};
|
86
|
-
|
87
|
-
return {
|
88
|
-
form: form, inverse: false
|
89
|
-
};
|
90
|
-
}
|
91
|
-
};
|
92
|
-
|
93
|
-
window.App = new Vue(config).$mount('#app');
|
94
|
-
})
|
95
|
-
</script>
|
96
|
-
</body>
|
97
|
-
</html>
|
package/demos/config/index.html
DELETED
@@ -1,95 +0,0 @@
|
|
1
|
-
<!doctype html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>Nano UI Draggable</title>
|
8
|
-
|
9
|
-
<link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
|
10
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
|
11
|
-
<link rel="stylesheet" href="../../dist/nano-ui.css">
|
12
|
-
<link rel="stylesheet" href="../style.css">
|
13
|
-
|
14
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
|
15
|
-
<script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
|
16
|
-
<script src="../../dist/nano-ui.js"></script>
|
17
|
-
|
18
|
-
</head>
|
19
|
-
<body>
|
20
|
-
|
21
|
-
<div id="app">
|
22
|
-
<n-config :value="value" :config="config"></n-config>
|
23
|
-
</div>
|
24
|
-
|
25
|
-
<script>
|
26
|
-
(function (Nano) {
|
27
|
-
|
28
|
-
'use strict';
|
29
|
-
|
30
|
-
pi.Dom.ready(function () {
|
31
|
-
|
32
|
-
Vue.config.devtools = true;
|
33
|
-
|
34
|
-
var config = {
|
35
|
-
data: function() {
|
36
|
-
|
37
|
-
let config = {
|
38
|
-
'NForm': {
|
39
|
-
content: {
|
40
|
-
'NFormItem:1': {
|
41
|
-
vIf: function (value) {
|
42
|
-
console.log(this);
|
43
|
-
return value.test3 === 'two';
|
44
|
-
},
|
45
|
-
props: {
|
46
|
-
label: 'Test 1'
|
47
|
-
},
|
48
|
-
content: {
|
49
|
-
'NInput': {
|
50
|
-
model: {
|
51
|
-
path: 'test1'
|
52
|
-
}
|
53
|
-
}
|
54
|
-
}
|
55
|
-
},
|
56
|
-
'NFormItem:3': {
|
57
|
-
props: {
|
58
|
-
label: 'Test 3'
|
59
|
-
},
|
60
|
-
content: {
|
61
|
-
'NInput': {
|
62
|
-
model: {
|
63
|
-
path: 'test3'
|
64
|
-
}
|
65
|
-
}
|
66
|
-
}
|
67
|
-
},
|
68
|
-
'NFormItem:2': {
|
69
|
-
props: {
|
70
|
-
label: 'Test 2'
|
71
|
-
},
|
72
|
-
content: {
|
73
|
-
'NInput': {
|
74
|
-
model: {
|
75
|
-
path: 'test2'
|
76
|
-
}
|
77
|
-
}
|
78
|
-
}
|
79
|
-
},
|
80
|
-
}
|
81
|
-
}
|
82
|
-
};
|
83
|
-
|
84
|
-
return { value: {}, config: config };
|
85
|
-
}
|
86
|
-
};
|
87
|
-
|
88
|
-
window.App = new Vue(config).$mount('#app');
|
89
|
-
|
90
|
-
});
|
91
|
-
|
92
|
-
})(window.Nano);
|
93
|
-
</script>
|
94
|
-
</body>
|
95
|
-
</html>
|
package/demos/confirm/index.html
DELETED
@@ -1,78 +0,0 @@
|
|
1
|
-
<!doctype html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>Nano UI Confirm</title>
|
8
|
-
|
9
|
-
<link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
|
10
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
|
11
|
-
<link rel="stylesheet" href="../../dist/nano-ui.css">
|
12
|
-
<link rel="stylesheet" href="../style.css">
|
13
|
-
|
14
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
|
15
|
-
<script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
|
16
|
-
<script src="../../dist/nano-ui.js"></script>
|
17
|
-
|
18
|
-
</head>
|
19
|
-
<body style="position: relative;">
|
20
|
-
|
21
|
-
<div id="app">
|
22
|
-
<div class="n-form">
|
23
|
-
|
24
|
-
|
25
|
-
<n-button type="primary">
|
26
|
-
Confirm
|
27
|
-
</n-button>
|
28
|
-
<n-confirm type="primary">
|
29
|
-
Hello 01!
|
30
|
-
</n-confirm>
|
31
|
-
|
32
|
-
<n-button type="success">
|
33
|
-
Confirm
|
34
|
-
</n-button>
|
35
|
-
<n-confirm type="success">
|
36
|
-
Hello 01!
|
37
|
-
</n-confirm>
|
38
|
-
|
39
|
-
<n-button type="warning">
|
40
|
-
Confirm
|
41
|
-
</n-button>
|
42
|
-
<n-confirm type="warning">
|
43
|
-
Hello 01!
|
44
|
-
</n-confirm>
|
45
|
-
|
46
|
-
<n-button type="danger">
|
47
|
-
Confirm
|
48
|
-
</n-button>
|
49
|
-
<n-confirm type="danger" :closable="true">
|
50
|
-
Hello 01!
|
51
|
-
</n-confirm>
|
52
|
-
|
53
|
-
<n-button type="info">
|
54
|
-
Confirm
|
55
|
-
</n-button>
|
56
|
-
<n-confirm type="info" :closable="true">
|
57
|
-
Hello 01!
|
58
|
-
</n-confirm>
|
59
|
-
</div>
|
60
|
-
</div>
|
61
|
-
|
62
|
-
<script>
|
63
|
-
pi.Dom.ready(function () {
|
64
|
-
|
65
|
-
Vue.config.devtools = true;
|
66
|
-
|
67
|
-
var config = {
|
68
|
-
data: function() {
|
69
|
-
return { };
|
70
|
-
}
|
71
|
-
};
|
72
|
-
|
73
|
-
window.App = new Vue(config).$mount('#app');
|
74
|
-
|
75
|
-
});
|
76
|
-
</script>
|
77
|
-
</body>
|
78
|
-
</html>
|
@@ -1,69 +0,0 @@
|
|
1
|
-
<!doctype html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>Nano UI Datepicker</title>
|
8
|
-
|
9
|
-
<link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
|
10
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
|
11
|
-
<link rel="stylesheet" href="../../dist/nano-ui.css">
|
12
|
-
<link rel="stylesheet" href="../style.css">
|
13
|
-
|
14
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
|
15
|
-
<script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
|
16
|
-
<script src="../../dist/nano-ui.js"></script>
|
17
|
-
|
18
|
-
</head>
|
19
|
-
<body>
|
20
|
-
|
21
|
-
<div id="app">
|
22
|
-
<n-form :form="form" :class="{ 'n-inverse': inverse }">
|
23
|
-
|
24
|
-
<n-form-item label="Inverse">
|
25
|
-
<n-checkbox v-model="inverse">Inverse</n-checkbox>
|
26
|
-
</n-form-item>
|
27
|
-
|
28
|
-
<n-form-item label="Test">
|
29
|
-
<n-button-group>
|
30
|
-
<n-datepicker v-model="form.date" :clearable="true"></n-datepicker>
|
31
|
-
<n-timepicker v-model="form.date" :clearable="true"></n-timepicker>
|
32
|
-
</n-button-group>
|
33
|
-
</n-form-item>
|
34
|
-
|
35
|
-
<n-form-item label="Test">
|
36
|
-
<n-datepicker :arrive.sync="form.arrive" :depart.sync="form.depart" :range="true" :clearable="true" />
|
37
|
-
</n-form-item>
|
38
|
-
|
39
|
-
<n-form-item label="Object">
|
40
|
-
<pre>{{ form }}</pre>
|
41
|
-
</n-form-item>
|
42
|
-
|
43
|
-
</n-form>
|
44
|
-
</div>
|
45
|
-
|
46
|
-
<script>
|
47
|
-
pi.Dom.ready(() => {
|
48
|
-
|
49
|
-
Vue.config.devtools = true;
|
50
|
-
|
51
|
-
var config = {
|
52
|
-
|
53
|
-
data: function() {
|
54
|
-
|
55
|
-
var form = {
|
56
|
-
date: 'now+2days', arrive: 'now', depart: 'now+2days'
|
57
|
-
};
|
58
|
-
|
59
|
-
return {
|
60
|
-
form: form, inverse: false
|
61
|
-
};
|
62
|
-
}
|
63
|
-
};
|
64
|
-
|
65
|
-
window.App = new Vue(config).$mount('#app');
|
66
|
-
})
|
67
|
-
</script>
|
68
|
-
</body>
|
69
|
-
</html>
|
@@ -1,127 +0,0 @@
|
|
1
|
-
<!doctype html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>Nano UI Draggable</title>
|
8
|
-
|
9
|
-
<link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
|
10
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
|
11
|
-
<link rel="stylesheet" href="../../dist/nano-ui.css">
|
12
|
-
<link rel="stylesheet" href="../style.css">
|
13
|
-
|
14
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
|
15
|
-
<script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
|
16
|
-
<script src="../../dist/nano-ui.js"></script>
|
17
|
-
|
18
|
-
</head>
|
19
|
-
<body>
|
20
|
-
|
21
|
-
<div id="app">
|
22
|
-
<n-form :form="form" :class="{ 'n-inverse': inverse }">
|
23
|
-
|
24
|
-
<n-form-item label="Inverse">
|
25
|
-
<n-checkbox v-model="inverse">Inverse</n-checkbox>
|
26
|
-
</n-form-item>
|
27
|
-
|
28
|
-
<n-form-item label="List">
|
29
|
-
<div style="display: block; border: 2px solid #000;">
|
30
|
-
<div>
|
31
|
-
<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">
|
32
|
-
<div slot-scope="props" style="line-height: 32px;">
|
33
|
-
{{ props.value.label }}
|
34
|
-
</div>
|
35
|
-
</n-draglist>
|
36
|
-
</div>
|
37
|
-
</div>
|
38
|
-
|
39
|
-
<div style="display: block; border: 2px solid #000;">
|
40
|
-
<div>
|
41
|
-
<n-draggrid style="height: 500px; overflow: hidden;" :items="form.value" :viewport-height="true" :render-expand="true" :render-select="true" :threshold="800">
|
42
|
-
<div slot-scope="props" style="line-height: 32px;">
|
43
|
-
{{ props.value.label }}
|
44
|
-
</div>
|
45
|
-
</n-draggrid>
|
46
|
-
</div>
|
47
|
-
</div>
|
48
|
-
|
49
|
-
<n-form-item v-if="false" label="Tree">
|
50
|
-
<n-draglist-tree :items="form.value" unique-prop="id" :cascade.sync="form.cascade">
|
51
|
-
<div slot-scope="props">{{ props.value.label }}</div>
|
52
|
-
</n-draglist-tree>
|
53
|
-
</n-form-item>
|
54
|
-
|
55
|
-
</n-form>
|
56
|
-
</div>
|
57
|
-
|
58
|
-
<script>
|
59
|
-
(function (Nano) {
|
60
|
-
|
61
|
-
'use strict';
|
62
|
-
|
63
|
-
pi.Dom.ready(function () {
|
64
|
-
|
65
|
-
Vue.config.devtools = true;
|
66
|
-
|
67
|
-
var config = {
|
68
|
-
data: function() {
|
69
|
-
|
70
|
-
let total = 0;
|
71
|
-
|
72
|
-
let childGenerator = function(count, depth, current) {
|
73
|
-
|
74
|
-
if ( count === undefined ) {
|
75
|
-
count = 3;
|
76
|
-
}
|
77
|
-
|
78
|
-
if ( depth === undefined ) {
|
79
|
-
depth = 2;
|
80
|
-
}
|
81
|
-
|
82
|
-
if ( current === undefined ) {
|
83
|
-
current = 1;
|
84
|
-
}
|
85
|
-
|
86
|
-
let children = Array(count).fill(null);
|
87
|
-
|
88
|
-
pi.Arr.map(children, function (item) {
|
89
|
-
|
90
|
-
total++;
|
91
|
-
|
92
|
-
item = {
|
93
|
-
label: 'Item ' + total,
|
94
|
-
id: 'value-' + total,
|
95
|
-
children: []
|
96
|
-
};
|
97
|
-
|
98
|
-
if ( current < depth ) {
|
99
|
-
item.children = childGenerator(30, depth, current + 1);
|
100
|
-
}
|
101
|
-
|
102
|
-
return item;
|
103
|
-
});
|
104
|
-
|
105
|
-
return children;
|
106
|
-
};
|
107
|
-
|
108
|
-
var form = {
|
109
|
-
value: []//childGenerator(2, 2)
|
110
|
-
};
|
111
|
-
|
112
|
-
return { form: form, inverse: false };
|
113
|
-
},
|
114
|
-
|
115
|
-
mounted: function() {
|
116
|
-
console.log(this.$refs.drag.getParentById('value-20'));
|
117
|
-
}
|
118
|
-
};
|
119
|
-
|
120
|
-
window.App = new Vue(config).$mount('#app');
|
121
|
-
|
122
|
-
});
|
123
|
-
|
124
|
-
})(window.Nano);
|
125
|
-
</script>
|
126
|
-
</body>
|
127
|
-
</html>
|
package/demos/form/index.html
DELETED
@@ -1,83 +0,0 @@
|
|
1
|
-
<!doctype html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>Nano UI Form</title>
|
8
|
-
|
9
|
-
<link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
|
10
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
|
11
|
-
<link rel="stylesheet" href="../../dist/nano-ui.css">
|
12
|
-
<link rel="stylesheet" href="../style.css">
|
13
|
-
|
14
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
|
15
|
-
<script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
|
16
|
-
<script src="../../dist/nano-ui.js"></script>
|
17
|
-
|
18
|
-
</head>
|
19
|
-
<body>
|
20
|
-
|
21
|
-
<div id="app">
|
22
|
-
<n-form :form="form" :errors="errors" :class="{ 'n-inverse': inverse }">
|
23
|
-
|
24
|
-
<n-form-item label="Inverse">
|
25
|
-
<n-checkbox v-model="inverse">Inverse</n-checkbox>
|
26
|
-
</n-form-item>
|
27
|
-
|
28
|
-
<n-form-group icon="fa fa-key" legend="With legend" :checkable="true">
|
29
|
-
|
30
|
-
<n-form-item label="Default">
|
31
|
-
<n-input v-model="form.name" />
|
32
|
-
</n-form-item>
|
33
|
-
|
34
|
-
</n-form-group>
|
35
|
-
|
36
|
-
<n-form-group align="horizontal" legend="With legend" tooltip="Im a legend tooltip">
|
37
|
-
|
38
|
-
<n-form-item label="Default">
|
39
|
-
<n-input v-model="form.name" />
|
40
|
-
</n-form-item>
|
41
|
-
|
42
|
-
</n-form-group>
|
43
|
-
|
44
|
-
<n-form-item label="With tooltip" tooltip="Im a label tooltip">
|
45
|
-
<n-input v-model="form.name" />
|
46
|
-
</n-form-item>
|
47
|
-
|
48
|
-
<n-form-item prop="name" label="Error">
|
49
|
-
<n-textarea v-model="form.name" :auto-rows="true" />
|
50
|
-
</n-form-item>
|
51
|
-
|
52
|
-
</n-form>
|
53
|
-
</div>
|
54
|
-
|
55
|
-
<script>
|
56
|
-
pi.Dom.ready(() => {
|
57
|
-
|
58
|
-
Vue.config.devtools = true;
|
59
|
-
|
60
|
-
var config = {
|
61
|
-
|
62
|
-
data: function() {
|
63
|
-
|
64
|
-
var form = {
|
65
|
-
name: '',
|
66
|
-
password: ''
|
67
|
-
};
|
68
|
-
|
69
|
-
var errors = {
|
70
|
-
name: 'My custom error'
|
71
|
-
};
|
72
|
-
|
73
|
-
return {
|
74
|
-
form: form, errors: errors, inverse: false
|
75
|
-
};
|
76
|
-
}
|
77
|
-
};
|
78
|
-
|
79
|
-
window.App = new Vue(config).$mount('#app');
|
80
|
-
})
|
81
|
-
</script>
|
82
|
-
</body>
|
83
|
-
</html>
|