@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
  1. package/dist/nano-ui.css +1 -0
  2. package/dist/nano-ui.js +4 -0
  3. package/dist/nano-ui.js.map +1 -0
  4. package/dist/themes/dark.css +1 -0
  5. package/dist/themes/light.css +1 -0
  6. package/package.json +7 -1
  7. package/.github/workflows/compile-deploy-publish.yml +0 -65
  8. package/assets/nano-ui-dark.svg +0 -19
  9. package/assets/nano-ui-light.svg +0 -19
  10. package/assets/pico-js-dark.svg +0 -19
  11. package/assets/pico-js-light.svg +0 -19
  12. package/babel.config.js +0 -17
  13. package/demos/builder.html +0 -411
  14. package/demos/button/index.html +0 -129
  15. package/demos/cascader/index.html +0 -127
  16. package/demos/chart/index.html +0 -53
  17. package/demos/checkbox/index.html +0 -97
  18. package/demos/config/index.html +0 -95
  19. package/demos/confirm/index.html +0 -78
  20. package/demos/datepicker/index.html +0 -69
  21. package/demos/draggable/index.html +0 -127
  22. package/demos/form/index.html +0 -83
  23. package/demos/form.html +0 -462
  24. package/demos/grid.html +0 -321
  25. package/demos/input/index.html +0 -100
  26. package/demos/map/index.html +0 -81
  27. package/demos/matrix/index.html +0 -104
  28. package/demos/modal/index.html +0 -98
  29. package/demos/overview.html +0 -1468
  30. package/demos/paginator/index.html +0 -58
  31. package/demos/popover/index.html +0 -103
  32. package/demos/radio/index.html +0 -71
  33. package/demos/resizer/index.html +0 -106
  34. package/demos/scrollbar.html +0 -328
  35. package/demos/select/index.html +0 -174
  36. package/demos/select.html +0 -164
  37. package/demos/style.css +0 -50
  38. package/demos/switch/index.html +0 -69
  39. package/demos/table/index.html +0 -126
  40. package/demos/tabs/index.html +0 -110
  41. package/demos/tabs.html +0 -293
  42. package/demos/textarea/index.html +0 -77
  43. package/demos/timepicker/index.html +0 -66
  44. package/demos/transfer/index.html +0 -88
  45. package/demos/wysiwyg/index.html +0 -49
  46. package/docs/README.md +0 -34
  47. package/docs/_sidebar.md +0 -37
  48. package/docs/files/data/draggable.md +0 -143
  49. package/docs/files/data/map.md +0 -1
  50. package/docs/files/data/paginator.md +0 -23
  51. package/docs/files/data/table.md +0 -247
  52. package/docs/files/data/virtualscroller.md +0 -2
  53. package/docs/files/form/button.md +0 -131
  54. package/docs/files/form/cascader.md +0 -164
  55. package/docs/files/form/checkbox.md +0 -179
  56. package/docs/files/form/datepicker.md +0 -78
  57. package/docs/files/form/form.md +0 -52
  58. package/docs/files/form/input.md +0 -90
  59. package/docs/files/form/radio.md +0 -150
  60. package/docs/files/form/select.md +0 -202
  61. package/docs/files/form/switch.md +0 -98
  62. package/docs/files/form/textarea.md +0 -102
  63. package/docs/files/form/timepicker.md +0 -78
  64. package/docs/files/form/transfer.md +0 -30
  65. package/docs/files/others/config.md +0 -261
  66. package/docs/files/others/confirm.md +0 -51
  67. package/docs/files/others/drawer.md +0 -32
  68. package/docs/files/others/loader.md +0 -22
  69. package/docs/files/others/map.md +0 -32
  70. package/docs/files/others/modal.md +0 -32
  71. package/docs/files/others/notification.md +0 -52
  72. package/docs/files/others/popover.md +0 -36
  73. package/docs/files/others/resizer.md +0 -8
  74. package/docs/files/others/scrollbar.md +0 -8
  75. package/docs/files/others/tabs.md +0 -32
  76. package/docs/index.template.html +0 -76
  77. package/docs/src/js/backup.js +0 -128
  78. package/docs/src/js/helper/item-helper.js +0 -0
  79. package/docs/src/js/index.js +0 -21
  80. package/docs/src/js/plugin/title-plugin.js +0 -0
  81. package/docs/src/js/plugin/vue-demo-plugin.js +0 -97
  82. package/docs/src/js/theme/basic.js +0 -31
  83. package/docs/src/js/theme/docsify.js +0 -11
  84. package/docs/src/scss/index-dark.scss +0 -3
  85. package/docs/src/scss/index-light.scss +0 -3
  86. package/docs/src/scss/index.scss +0 -15
  87. package/docs/src/scss/mixins/base.scss +0 -14
  88. package/docs/src/scss/mixins/grid.scss +0 -213
  89. package/docs/src/scss/mixins/media.scss +0 -35
  90. package/docs/src/scss/mixins/space.scss +0 -61
  91. package/docs/src/scss/root/vars-dark.scss +0 -15
  92. package/docs/src/scss/root/vars-light.scss +0 -15
  93. package/docs/src/scss/root/vars.scss +0 -110
  94. package/docs/src/scss/theme/default.scss +0 -123
  95. package/docs/src/scss/theme/header.scss +0 -147
  96. package/docs/src/scss/theme/layout.scss +0 -186
  97. package/docs/src/scss/theme/loader.scss +0 -63
  98. package/docs/src/scss/theme/markdown.scss +0 -79
  99. package/docs/src/scss/theme/navigation.scss +0 -58
  100. package/docs/src/scss/theme/progress.scss +0 -9
  101. package/docs/src/scss/theme/search.scss +0 -119
  102. package/docs/src/scss/theme/syntax.scss +0 -142
  103. package/docs/src/scss/theme/table.scss +0 -63
  104. package/favicon/apple-touch-icon.png +0 -0
  105. package/favicon/favicon-96x96.png +0 -0
  106. package/favicon/favicon.ico +0 -0
  107. package/favicon/favicon.svg +0 -3
  108. package/favicon/site.webmanifest +0 -21
  109. package/favicon/web-app-manifest-192x192.png +0 -0
  110. package/favicon/web-app-manifest-512x512.png +0 -0
  111. package/mix-manifest.json +0 -4
  112. package/postcss.config.js +0 -14
  113. package/webpack.config.js +0 -211
  114. package/webservy.json +0 -8
  115. /package/{.nojekyll → dist/.ignore.js} +0 -0
@@ -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>
@@ -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>
@@ -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>
@@ -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>