@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/overview.html
DELETED
|
@@ -1,1468 +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</title>
|
|
8
|
-
|
|
9
|
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
|
10
|
-
<link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
|
|
11
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
|
|
12
|
-
<link rel="stylesheet" href="../dist/nano-ui.css">
|
|
13
|
-
<link id="theme" rel="stylesheet" href="../dist/themes/light.css">
|
|
14
|
-
|
|
15
|
-
<link rel="stylesheet" href="../style.css">
|
|
16
|
-
|
|
17
|
-
<style>
|
|
18
|
-
|
|
19
|
-
div {
|
|
20
|
-
box-sizing: border-box;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
body {
|
|
24
|
-
font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
|
|
25
|
-
font-size: 14px;
|
|
26
|
-
height: 100%;
|
|
27
|
-
overflow-x: hidden;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
#app {
|
|
31
|
-
overflow-x: hidden;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.app-container {
|
|
35
|
-
max-width: 1440px;
|
|
36
|
-
margin: 0 auto;
|
|
37
|
-
padding: 20px 30px 40px 30px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.app-options {
|
|
41
|
-
border-bottom: 1px solid rgba(110, 110, 110, 0.15);
|
|
42
|
-
margin-bottom: 20px;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
h2 {
|
|
46
|
-
font-size: 32px;
|
|
47
|
-
font-weight: bold;
|
|
48
|
-
padding-bottom: 10px;
|
|
49
|
-
margin: 50px 0 15px;
|
|
50
|
-
border-bottom: 1px solid rgba(110, 110, 110, 0.15);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
</style>
|
|
54
|
-
|
|
55
|
-
<script src="https://unpkg.com/moment"></script>
|
|
56
|
-
<script src="https://unpkg.com/vue@3.4.6"></script>
|
|
57
|
-
<script src="https://vankizmann.github.io/pico-js/dist/pico-js.js"></script>
|
|
58
|
-
<script src="../dist/nano-ui.js"></script>
|
|
59
|
-
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
|
|
60
|
-
<script src="https://maps.googleapis.com/maps/api/js"></script>
|
|
61
|
-
|
|
62
|
-
</head>
|
|
63
|
-
<body class="n-demo">
|
|
64
|
-
|
|
65
|
-
<div id="app" class="nano-theme-preview">
|
|
66
|
-
<div class="app-container">
|
|
67
|
-
|
|
68
|
-
<h2>Theme</h2>
|
|
69
|
-
|
|
70
|
-
<div class="grid grid--row">
|
|
71
|
-
<div class="col--1-1 col--1-3@md">
|
|
72
|
-
<n-select :model-value="n_theme" @update:model-value="changeTheme">
|
|
73
|
-
<n-select-option value="none" label="None"></n-select-option>
|
|
74
|
-
<n-select-option value="light" label="Light"></n-select-option>
|
|
75
|
-
<n-select-option value="dark" label="Dark"></n-select-option>
|
|
76
|
-
</n-select>
|
|
77
|
-
</div>
|
|
78
|
-
</div>
|
|
79
|
-
|
|
80
|
-
<h2>NTagsItem</h2>
|
|
81
|
-
|
|
82
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
83
|
-
<div class="col--auto">
|
|
84
|
-
<n-select style="width: 100px;" v-model="n_tags.size" :options="sizes"></n-select>
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
|
|
88
|
-
<div class="grid grid--row">
|
|
89
|
-
<div class="col--1-1">
|
|
90
|
-
<n-tags v-bind="n_tags">
|
|
91
|
-
<n-tags-item color="0" icon="fa fa-ghost">Foo askd kasjdbnjka sjdkna sjkdnajks dnjkandjknas jkdnajkdjaksn djkans jkdnj</n-tags-item>
|
|
92
|
-
<n-tags-item color="1" icon="fa fa-ghost">Foo</n-tags-item>
|
|
93
|
-
<n-tags-item color="2" icon="fa fa-ghost">Foo</n-tags-item>
|
|
94
|
-
<n-tags-item color="3">Foo</n-tags-item>
|
|
95
|
-
<n-tags-item color="4" icon="fa fa-ghost">Foo</n-tags-item>
|
|
96
|
-
<n-tags-item color="5" icon="fa fa-ghost">Foo</n-tags-item>
|
|
97
|
-
<n-tags-item color="6" icon="fa fa-ghost">Foo</n-tags-item>
|
|
98
|
-
<n-tags-item color="7" icon="fa fa-ghost">Foo</n-tags-item>
|
|
99
|
-
<n-tags-item color="8">Foo</n-tags-item>
|
|
100
|
-
<n-tags-item color="9" icon="fa fa-ghost">Foo</n-tags-item>
|
|
101
|
-
<n-tags-item color="10" icon="fa fa-ghost">Foo</n-tags-item>
|
|
102
|
-
<n-tags-item color="11" icon="fa fa-ghost">Foo</n-tags-item>
|
|
103
|
-
<n-tags-item color="12" icon="fa fa-ghost">Foo</n-tags-item>
|
|
104
|
-
</n-tags>
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
107
|
-
|
|
108
|
-
<h2>NForm</h2>
|
|
109
|
-
|
|
110
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
111
|
-
<div class="col--auto">
|
|
112
|
-
<n-switch v-model="n_form.conditional">Conditional</n-switch>
|
|
113
|
-
</div>
|
|
114
|
-
<div class="col--auto">
|
|
115
|
-
<n-switch v-model="n_form.modelValue">Enabled</n-switch>
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
|
|
119
|
-
<n-form :errors="{ foo: 'ERROR' }">
|
|
120
|
-
<n-form-group label="FormGroup" :model-value="false" :collapse="true" icon="fa fa-ghost">
|
|
121
|
-
|
|
122
|
-
<n-form-item label="Foo" prop="foo" tooltip="lorem ipsum dolore">
|
|
123
|
-
<n-input></n-input>
|
|
124
|
-
</n-form-item>
|
|
125
|
-
|
|
126
|
-
<n-form-item label="Bar" prop="bar">
|
|
127
|
-
<n-input></n-input>
|
|
128
|
-
</n-form-item>
|
|
129
|
-
|
|
130
|
-
</n-form-group>
|
|
131
|
-
<n-form-group label="FormGroup2">
|
|
132
|
-
|
|
133
|
-
<n-form-item label="Foo" prop="foo" tooltip="lorem ipsum dolore" :conditional="n_form.conditional" v-model="n_form.modelValue">
|
|
134
|
-
<n-input></n-input>
|
|
135
|
-
</n-form-item>
|
|
136
|
-
|
|
137
|
-
<n-form-item label="Bar" prop="bar" :conditional="n_form.conditional" v-model="n_form.modelValue">
|
|
138
|
-
<n-input-number></n-input-number>
|
|
139
|
-
</n-form-item>
|
|
140
|
-
|
|
141
|
-
<n-form-item label="Bar" prop="bar" :conditional="n_form.conditional" v-model="n_form.modelValue">
|
|
142
|
-
<n-select></n-select>
|
|
143
|
-
</n-form-item>
|
|
144
|
-
|
|
145
|
-
<n-form-item label="Bar" prop="bar" :conditional="n_form.conditional" v-model="n_form.modelValue">
|
|
146
|
-
<n-switch>test</n-switch>
|
|
147
|
-
</n-form-item>
|
|
148
|
-
|
|
149
|
-
</n-form-group>
|
|
150
|
-
</n-form>
|
|
151
|
-
|
|
152
|
-
<h2>NPopover</h2>
|
|
153
|
-
|
|
154
|
-
<n-button icon="fa fa-paragraph">
|
|
155
|
-
Paragraph
|
|
156
|
-
</n-button>
|
|
157
|
-
<n-popover trigger="click" :width="200" position="bottom-start">
|
|
158
|
-
<n-popover-option image="https://picsum.photos/30/30" icon="fa fa-paragraph">
|
|
159
|
-
Demotext
|
|
160
|
-
</n-popover-option>
|
|
161
|
-
<n-popover-option image="https://picsum.photos/30/30" icon="fa fa-paragraph">
|
|
162
|
-
Paragraph<br><i style="font-style: initial; color: #555;">Demotext</i>
|
|
163
|
-
</n-popover-option>
|
|
164
|
-
<n-popover-option image="https://picsum.photos/30/30" icon="fa fa-paragraph">
|
|
165
|
-
Paragraph<br><i style="font-style: initial; color: #555;">Demotext</i>
|
|
166
|
-
</n-popover-option>
|
|
167
|
-
<n-popover-group>
|
|
168
|
-
Group 02
|
|
169
|
-
</n-popover-group>
|
|
170
|
-
<n-popover-option icon="fa fa-heading">
|
|
171
|
-
Headline H3
|
|
172
|
-
</n-popover-option>
|
|
173
|
-
<n-popover-option icon="fa fa-heading">
|
|
174
|
-
Headline H4
|
|
175
|
-
</n-popover-option>
|
|
176
|
-
<n-popover-group>
|
|
177
|
-
Group 01
|
|
178
|
-
</n-popover-group>
|
|
179
|
-
<n-popover-option icon="fa fa-heading">
|
|
180
|
-
Headline H5
|
|
181
|
-
</n-popover-option>
|
|
182
|
-
<n-popover-option icon="fa fa-heading">
|
|
183
|
-
Headline H6
|
|
184
|
-
</n-popover-option>
|
|
185
|
-
</n-popover>
|
|
186
|
-
|
|
187
|
-
<h2>NRating</h2>
|
|
188
|
-
|
|
189
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
190
|
-
<div class="col--auto">
|
|
191
|
-
<n-select style="width: 100px;" v-model="n_rating.size" :options="sizes"></n-select>
|
|
192
|
-
</div>
|
|
193
|
-
<div class="col--auto">
|
|
194
|
-
<n-checkbox v-model="n_rating.disabled">Disabled</n-checkbox>
|
|
195
|
-
</div>
|
|
196
|
-
</div>
|
|
197
|
-
|
|
198
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
199
|
-
<div class="col--1-1 col--1-3@md">
|
|
200
|
-
<n-rating :model-value="3.5" v-bind="n_rating" type="primary" />
|
|
201
|
-
</div>
|
|
202
|
-
<div class="col--1-1 col--1-3@md">
|
|
203
|
-
<n-rating :model-value="3" v-bind="n_rating" type="secondary" />
|
|
204
|
-
</div>
|
|
205
|
-
<div class="col--1-1 col--1-3@md">
|
|
206
|
-
<n-rating :model-value="3.5" v-bind="n_rating" type="success" />
|
|
207
|
-
</div>
|
|
208
|
-
<div class="col--1-1 col--1-3@md">
|
|
209
|
-
<n-rating :model-value="0" v-bind="n_rating" type="warning" />
|
|
210
|
-
</div>
|
|
211
|
-
<div class="col--1-1 col--1-3@md">
|
|
212
|
-
<n-rating :model-value="1" v-bind="n_rating" type="danger" />
|
|
213
|
-
</div>
|
|
214
|
-
<div class="col--1-1 col--1-3@md">
|
|
215
|
-
<n-rating :model-value="3.5" v-bind="n_rating" type="info" />
|
|
216
|
-
</div>
|
|
217
|
-
</div>
|
|
218
|
-
|
|
219
|
-
<h2>NButton</h2>
|
|
220
|
-
|
|
221
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
222
|
-
<div class="col--auto">
|
|
223
|
-
<n-select style="width: 100px;" v-model="n_button.size" :options="sizes"></n-select>
|
|
224
|
-
</div>
|
|
225
|
-
<div class="col--auto">
|
|
226
|
-
<n-select style="width: 200px;" v-model="n_button.icon" placeholder="Icon" :clearable="true" :options="demoIcons" />
|
|
227
|
-
</div>
|
|
228
|
-
<div class="col--auto">
|
|
229
|
-
<n-checkbox v-model="n_button.square">Square</n-checkbox>
|
|
230
|
-
</div>
|
|
231
|
-
<div class="col--auto">
|
|
232
|
-
<n-checkbox v-model="n_button.link">Link</n-checkbox>
|
|
233
|
-
</div>
|
|
234
|
-
<div class="col--auto">
|
|
235
|
-
<n-checkbox v-model="n_button.disabled">Disabled</n-checkbox>
|
|
236
|
-
</div>
|
|
237
|
-
</div>
|
|
238
|
-
|
|
239
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
240
|
-
<div class="col--1-1 col--1-3@md">
|
|
241
|
-
<n-button v-bind="n_button" type="primary">Button</n-button>
|
|
242
|
-
</div>
|
|
243
|
-
<div class="col--1-1 col--1-3@md">
|
|
244
|
-
<n-button v-bind="n_button" type="secondary">Button</n-button>
|
|
245
|
-
</div>
|
|
246
|
-
<div class="col--1-1 col--1-3@md">
|
|
247
|
-
<n-button v-bind="n_button" type="success">Button</n-button>
|
|
248
|
-
</div>
|
|
249
|
-
<div class="col--1-1 col--1-3@md">
|
|
250
|
-
<n-button v-bind="n_button" type="warning">Button</n-button>
|
|
251
|
-
</div>
|
|
252
|
-
<div class="col--1-1 col--1-3@md">
|
|
253
|
-
<n-button v-bind="n_button" type="danger">Button</n-button>
|
|
254
|
-
</div>
|
|
255
|
-
<div class="col--1-1 col--1-3@md">
|
|
256
|
-
<n-button v-bind="n_button" type="info">Button</n-button>
|
|
257
|
-
</div>
|
|
258
|
-
</div>
|
|
259
|
-
|
|
260
|
-
<h2>NInput</h2>
|
|
261
|
-
|
|
262
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
263
|
-
<div class="col--auto">
|
|
264
|
-
<n-select style="width: 100px;" v-model="n_input.size" :options="sizes"></n-select>
|
|
265
|
-
</div>
|
|
266
|
-
<div class="col--auto">
|
|
267
|
-
<n-select style="width: 200px;" v-model="n_input.icon" :clearable="true" placeholder="Icon" :options="demoIcons"></n-select>
|
|
268
|
-
</div>
|
|
269
|
-
<div class="col--auto">
|
|
270
|
-
<n-input v-model="n_input.placeholder"></n-input>
|
|
271
|
-
</div>
|
|
272
|
-
<div class="col--auto">
|
|
273
|
-
<n-checkbox v-model="n_input.disabled">Disabled</n-checkbox>
|
|
274
|
-
</div>
|
|
275
|
-
</div>
|
|
276
|
-
|
|
277
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
278
|
-
<div class="col--1-1 col--1-3@md">
|
|
279
|
-
<n-input v-model="n_input.value" v-bind="n_input" type="primary"></n-input>
|
|
280
|
-
</div>
|
|
281
|
-
<div class="col--1-1 col--1-3@md">
|
|
282
|
-
<n-input v-model="n_input.value" v-bind="n_input" type="secondary"></n-input>
|
|
283
|
-
</div>
|
|
284
|
-
<div class="col--1-1 col--1-3@md">
|
|
285
|
-
<n-input v-model="n_input.value" v-bind="n_input" type="success"></n-input>
|
|
286
|
-
</div>
|
|
287
|
-
<div class="col--1-1 col--1-3@md">
|
|
288
|
-
<n-input v-model="n_input.value" v-bind="n_input" type="warning"></n-input>
|
|
289
|
-
</div>
|
|
290
|
-
<div class="col--1-1 col--1-3@md">
|
|
291
|
-
<n-input v-model="n_input.value" v-bind="n_input" type="danger"></n-input>
|
|
292
|
-
</div>
|
|
293
|
-
<div class="col--1-1 col--1-3@md">
|
|
294
|
-
<n-input v-model="n_input.value" v-bind="n_input" type="info"></n-input>
|
|
295
|
-
</div>
|
|
296
|
-
</div>
|
|
297
|
-
|
|
298
|
-
<h2>NInputNumber</h2>
|
|
299
|
-
|
|
300
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
301
|
-
<div class="col--auto">
|
|
302
|
-
<n-select style="width: 100px;" v-model="n_number.size" :options="sizes"></n-select>
|
|
303
|
-
</div>
|
|
304
|
-
<div class="col--auto">
|
|
305
|
-
<n-input v-model="n_number.placeholder"></n-input>
|
|
306
|
-
</div>
|
|
307
|
-
<div class="col--auto">
|
|
308
|
-
<n-checkbox v-model="n_number.disabled">Disabled</n-checkbox>
|
|
309
|
-
</div>
|
|
310
|
-
<div class="col--auto">
|
|
311
|
-
<n-input-number v-model="n_number.minValue" :min="-100" :max="100" placeholder="Min. Value"></n-input-number>
|
|
312
|
-
</div>
|
|
313
|
-
<div class="col--auto">
|
|
314
|
-
<n-input-number v-model="n_number.maxValue" :min="-100" :max="100" placeholder="Max. Value"></n-input-number>
|
|
315
|
-
</div>
|
|
316
|
-
</div>
|
|
317
|
-
|
|
318
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
319
|
-
<div class="col--1-1 col--1-3@md">
|
|
320
|
-
<n-input-number v-model="n_number.test" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" format=":count USD" type="primary" :precision="2" :clearable="true"></n-input-number>
|
|
321
|
-
<!-- <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" format=":count USD" type="primary"></n-input-number>-->
|
|
322
|
-
</div>
|
|
323
|
-
<!-- <div class="col--1-1 col--1-3@md">-->
|
|
324
|
-
<!-- <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" format=":count €" :precision="2" :step-size="0.1" type="secondary"></n-input-number>-->
|
|
325
|
-
<!-- </div>-->
|
|
326
|
-
<!-- <div class="col--1-1 col--1-3@md">-->
|
|
327
|
-
<!-- <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" type="success" :clearable="true"></n-input-number>-->
|
|
328
|
-
<!-- </div>-->
|
|
329
|
-
<!-- <div class="col--1-1 col--1-3@md">-->
|
|
330
|
-
<!-- <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" type="warning"></n-input-number>-->
|
|
331
|
-
<!-- </div>-->
|
|
332
|
-
<!-- <div class="col--1-1 col--1-3@md">-->
|
|
333
|
-
<!-- <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" type="danger"></n-input-number>-->
|
|
334
|
-
<!-- </div>-->
|
|
335
|
-
<!-- <div class="col--1-1 col--1-3@md">-->
|
|
336
|
-
<!-- <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" type="info"></n-input-number>-->
|
|
337
|
-
<!-- </div>-->
|
|
338
|
-
</div>
|
|
339
|
-
|
|
340
|
-
<h2>NTextarea</h2>
|
|
341
|
-
|
|
342
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
343
|
-
<div class="col--auto">
|
|
344
|
-
<n-select style="width: 100px;" v-model="n_textarea.size" :options="sizes"></n-select>
|
|
345
|
-
</div>
|
|
346
|
-
<div class="col--auto">
|
|
347
|
-
<n-checkbox v-model="n_textarea.autoRows">Auto rows</n-checkbox>
|
|
348
|
-
</div>
|
|
349
|
-
<div class="col--auto">
|
|
350
|
-
<n-checkbox v-model="n_textarea.disabled">Disabled</n-checkbox>
|
|
351
|
-
</div>
|
|
352
|
-
</div>
|
|
353
|
-
|
|
354
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
355
|
-
<div class="col--1-1 col--1-3@md">
|
|
356
|
-
<n-textarea class="test" v-bind="n_textarea" type="primary"></n-textarea>
|
|
357
|
-
</div>
|
|
358
|
-
<div class="col--1-1 col--1-3@md">
|
|
359
|
-
<n-textarea v-bind="n_textarea" type="secondary"></n-textarea>
|
|
360
|
-
</div>
|
|
361
|
-
<div class="col--1-1 col--1-3@md">
|
|
362
|
-
<n-textarea v-bind="n_textarea" type="success"></n-textarea>
|
|
363
|
-
</div>
|
|
364
|
-
<div class="col--1-1 col--1-3@md">
|
|
365
|
-
<n-textarea v-bind="n_textarea" type="warning"></n-textarea>
|
|
366
|
-
</div>
|
|
367
|
-
<div class="col--1-1 col--1-3@md">
|
|
368
|
-
<n-textarea v-bind="n_textarea" type="danger"></n-textarea>
|
|
369
|
-
</div>
|
|
370
|
-
<div class="col--1-1 col--1-3@md">
|
|
371
|
-
<n-textarea v-bind="n_textarea" type="info"></n-textarea>
|
|
372
|
-
</div>
|
|
373
|
-
</div>
|
|
374
|
-
|
|
375
|
-
<h2>NSelect</h2>
|
|
376
|
-
|
|
377
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
378
|
-
<div class="col--auto">
|
|
379
|
-
<n-select style="width: 100px;" v-model="n_select.size" :options="sizes"></n-select>
|
|
380
|
-
</div>
|
|
381
|
-
<div class="col--auto">
|
|
382
|
-
<n-checkbox v-model="n_select.clearable">Clearable</n-checkbox>
|
|
383
|
-
</div>
|
|
384
|
-
<div class="col--auto">
|
|
385
|
-
<n-checkbox v-model="n_select.allowCreate">Allow create</n-checkbox>
|
|
386
|
-
</div>
|
|
387
|
-
<div class="col--auto">
|
|
388
|
-
<n-checkbox v-model="n_select.disabled">Disabled</n-checkbox>
|
|
389
|
-
</div>
|
|
390
|
-
</div>
|
|
391
|
-
|
|
392
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
393
|
-
<div class="col--1-1 col--1-3@md">
|
|
394
|
-
<n-select v-bind="n_select" type="secondary" :options="icons" :lazy="true"></n-select>
|
|
395
|
-
</div>
|
|
396
|
-
<div class="col--1-1 col--1-3@md">
|
|
397
|
-
<n-select v-bind="n_select" v-model="foobar" :multiple="true" type="primary" :options="icons"></n-select>
|
|
398
|
-
</div>
|
|
399
|
-
<div class="col--1-1 col--1-3@md">
|
|
400
|
-
<n-select v-bind="n_select" type="secondary" :options="icons"></n-select>
|
|
401
|
-
</div>
|
|
402
|
-
<div class="col--1-1 col--1-3@md">
|
|
403
|
-
<n-select v-bind="n_select" :multiple="true" type="success" :options="icons"></n-select>
|
|
404
|
-
</div>
|
|
405
|
-
<div class="col--1-1 col--1-3@md">
|
|
406
|
-
<n-select v-bind="n_select" type="warning" :options="icons"></n-select>
|
|
407
|
-
</div>
|
|
408
|
-
<div class="col--1-1 col--1-3@md">
|
|
409
|
-
<n-select v-bind="n_select" :multiple="true" type="danger" :options="icons"></n-select>
|
|
410
|
-
</div>
|
|
411
|
-
<div class="col--1-1 col--1-3@md">
|
|
412
|
-
<n-select v-bind="n_select" type="info" :options="icons"></n-select>
|
|
413
|
-
</div>
|
|
414
|
-
</div>
|
|
415
|
-
|
|
416
|
-
<h2>NCascader</h2>
|
|
417
|
-
|
|
418
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
419
|
-
<div class="col--auto">
|
|
420
|
-
<n-select style="width: 100px;" v-model="n_cascader.size" :options="sizes"></n-select>
|
|
421
|
-
</div>
|
|
422
|
-
<div class="col--auto">
|
|
423
|
-
<n-select style="width: 210px;" v-model="n_cascader.type" :options="types"></n-select>
|
|
424
|
-
</div>
|
|
425
|
-
<div class="col--auto">
|
|
426
|
-
<n-checkbox v-model="n_cascader.clearable">Clearable</n-checkbox>
|
|
427
|
-
</div>
|
|
428
|
-
<div class="col--auto">
|
|
429
|
-
<n-checkbox v-model="n_cascader.disabled">Disabled</n-checkbox>
|
|
430
|
-
</div>
|
|
431
|
-
</div>
|
|
432
|
-
|
|
433
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
434
|
-
<div class="col--1-1">
|
|
435
|
-
<n-cascader-panel v-bind="n_cascader" trigger="click" :options="cascaderData"></n-cascader-panel>
|
|
436
|
-
</div>
|
|
437
|
-
<div class="col--1-1 col--1-8@md col--right">
|
|
438
|
-
<n-cascader v-bind="n_cascader" :options="cascaderData"></n-cascader>
|
|
439
|
-
</div>
|
|
440
|
-
</div>
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
<h2>NButtonGroup</h2>
|
|
444
|
-
|
|
445
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
446
|
-
<div class="col--1-1">
|
|
447
|
-
<n-button-group>
|
|
448
|
-
<n-input v-model="n_input.value" v-bind="n_input" type="primary"></n-input>
|
|
449
|
-
<n-datepicker v-bind="n_datepicker"></n-datepicker>
|
|
450
|
-
<n-select v-bind="n_select" :multiple="true" type="primary" :options="icons"></n-select>
|
|
451
|
-
<n-button v-bind="n_button" type="primary">Button</n-button>
|
|
452
|
-
</n-button-group>
|
|
453
|
-
</div>
|
|
454
|
-
</div>
|
|
455
|
-
|
|
456
|
-
<h2>NCheckbox</h2>
|
|
457
|
-
|
|
458
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
459
|
-
<div class="col--auto">
|
|
460
|
-
<n-select style="width: 100px;" v-model="n_checkbox.size" :options="sizes"></n-select>
|
|
461
|
-
</div>
|
|
462
|
-
<div class="col--auto">
|
|
463
|
-
<n-select style="width: 210px;" v-model="n_checkbox.type" :options="types"></n-select>
|
|
464
|
-
</div>
|
|
465
|
-
<div class="col--auto">
|
|
466
|
-
<n-checkbox v-model="n_checkbox.disabled">Disabled</n-checkbox>
|
|
467
|
-
</div>
|
|
468
|
-
<div class="col--auto">
|
|
469
|
-
<n-checkbox v-model="n_checkbox.allowUncheck">Allow uncheck while disabled</n-checkbox>
|
|
470
|
-
</div>
|
|
471
|
-
</div>
|
|
472
|
-
|
|
473
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
474
|
-
<div class="col--1-1">
|
|
475
|
-
<n-checkbox-group v-bind="n_checkbox">
|
|
476
|
-
<n-checkbox :global="true" v-bind="n_checkbox">Check all</n-checkbox>
|
|
477
|
-
<n-checkbox value="test1" v-bind="n_checkbox">Foobar 1</n-checkbox>
|
|
478
|
-
<n-checkbox value="test2" v-bind="n_checkbox">Foobar 2</n-checkbox>
|
|
479
|
-
<n-checkbox value="test3" v-bind="n_checkbox">Foobar 3</n-checkbox>
|
|
480
|
-
<n-checkbox value="test4" v-bind="n_checkbox">Foobar 4</n-checkbox>
|
|
481
|
-
</n-checkbox-group>
|
|
482
|
-
</div>
|
|
483
|
-
</div>
|
|
484
|
-
|
|
485
|
-
<h2>NRadio</h2>
|
|
486
|
-
|
|
487
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
488
|
-
<div class="col--auto">
|
|
489
|
-
<n-select style="width: 100px;" v-model="n_radio.size" :options="sizes"></n-select>
|
|
490
|
-
</div>
|
|
491
|
-
<div class="col--auto">
|
|
492
|
-
<n-select style="width: 210px;" v-model="n_radio.type" :options="types"></n-select>
|
|
493
|
-
</div>
|
|
494
|
-
<div class="col--auto">
|
|
495
|
-
<n-checkbox v-model="n_radio.disabled">Disabled</n-checkbox>
|
|
496
|
-
</div>
|
|
497
|
-
</div>
|
|
498
|
-
|
|
499
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
500
|
-
<div class="col--1-1">
|
|
501
|
-
<n-radio-group v-bind="n_radio">
|
|
502
|
-
<n-radio value="test1" v-bind="n_radio">Foobar 1</n-radio>
|
|
503
|
-
<n-radio value="test2" v-bind="n_radio">Foobar 2</n-radio>
|
|
504
|
-
<n-radio value="test3" v-bind="n_radio">Foobar 3</n-radio>
|
|
505
|
-
<n-radio value="test4" v-bind="n_radio">Foobar 4</n-radio>
|
|
506
|
-
</n-radio-group>
|
|
507
|
-
</div>
|
|
508
|
-
</div>
|
|
509
|
-
|
|
510
|
-
<h2>NSlider</h2>
|
|
511
|
-
|
|
512
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
513
|
-
<div class="col--auto">
|
|
514
|
-
<n-select style="width: 100px;" v-model="n_slider.size" :options="sizes"></n-select>
|
|
515
|
-
</div>
|
|
516
|
-
<div class="col--auto">
|
|
517
|
-
<n-checkbox v-model="n_slider.disabled">Disabled</n-checkbox>
|
|
518
|
-
</div>
|
|
519
|
-
</div>
|
|
520
|
-
|
|
521
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
522
|
-
<div class="col--1-1">
|
|
523
|
-
<n-slider v-bind="n_slider" on-type="primary" v-model="n_slider.temp_value">Slider</n-slider>
|
|
524
|
-
</div>
|
|
525
|
-
<div class="col--1-1">
|
|
526
|
-
{{ n_slider.temp_value }}
|
|
527
|
-
</div>
|
|
528
|
-
<div class="col--1-1">
|
|
529
|
-
<n-slider v-bind="n_slider" on-type="primary" :range="true">Slider</n-slider>
|
|
530
|
-
</div>
|
|
531
|
-
<div class="col--1-1">
|
|
532
|
-
<n-slider v-bind="n_slider" on-type="primary" :steps="[100,200,300]" :labels="['Small', 'Medium', 'Big']">Slider</n-slider>
|
|
533
|
-
</div>
|
|
534
|
-
</div>
|
|
535
|
-
|
|
536
|
-
<h2>NSwitch</h2>
|
|
537
|
-
|
|
538
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
539
|
-
<div class="col--auto">
|
|
540
|
-
<n-select style="width: 100px;" v-model="n_switch.size" :options="sizes"></n-select>
|
|
541
|
-
</div>
|
|
542
|
-
<div class="col--auto">
|
|
543
|
-
<n-checkbox v-model="n_switch.disabled">Disabled</n-checkbox>
|
|
544
|
-
</div>
|
|
545
|
-
</div>
|
|
546
|
-
|
|
547
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
548
|
-
<div class="col--1-1 col--1-3@md">
|
|
549
|
-
<n-switch v-bind="n_switch" on-type="primary">Switch</n-switch>
|
|
550
|
-
</div>
|
|
551
|
-
<div class="col--1-1 col--1-3@md">
|
|
552
|
-
<n-switch v-bind="n_switch" on-type="secondary">Switch</n-switch>
|
|
553
|
-
</div>
|
|
554
|
-
<div class="col--1-1 col--1-3@md">
|
|
555
|
-
<n-switch v-bind="n_switch" on-type="success">Switch</n-switch>
|
|
556
|
-
</div>
|
|
557
|
-
<div class="col--1-1 col--1-3@md">
|
|
558
|
-
<n-switch v-bind="n_switch" on-type="warning">Switch</n-switch>
|
|
559
|
-
</div>
|
|
560
|
-
<div class="col--1-1 col--1-3@md">
|
|
561
|
-
<n-switch v-bind="n_switch" on-type="danger">Switch</n-switch>
|
|
562
|
-
</div>
|
|
563
|
-
<div class="col--1-1 col--1-3@md">
|
|
564
|
-
<n-switch v-bind="n_switch" on-type="info">Switch</n-switch>
|
|
565
|
-
</div>
|
|
566
|
-
</div>
|
|
567
|
-
|
|
568
|
-
<h2>NDatepicker</h2>
|
|
569
|
-
|
|
570
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
571
|
-
<div class="col--auto">
|
|
572
|
-
<n-select style="width: 100px;" v-model="n_datepicker.size" :options="sizes"></n-select>
|
|
573
|
-
</div>
|
|
574
|
-
<div class="col--auto">
|
|
575
|
-
<n-select style="width: 210px;" v-model="n_datepicker.type" :options="types"></n-select>
|
|
576
|
-
</div>
|
|
577
|
-
<div class="col--auto">
|
|
578
|
-
<n-checkbox v-model="n_datepicker.clearable">Clearable</n-checkbox>
|
|
579
|
-
</div>
|
|
580
|
-
<div class="col--auto">
|
|
581
|
-
<n-checkbox v-model="n_datepicker.disabled">Disabled</n-checkbox>
|
|
582
|
-
</div>
|
|
583
|
-
</div>
|
|
584
|
-
|
|
585
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
586
|
-
<div class="col--1-1">
|
|
587
|
-
<n-datepicker-panel v-bind="n_datepicker" min-date="now" :month-panels="2" :range="true"></n-datepicker-panel>
|
|
588
|
-
</div>
|
|
589
|
-
<div class="col--1-1 col--1-3@md">
|
|
590
|
-
<n-datepicker v-bind="n_datepicker"></n-datepicker>
|
|
591
|
-
</div>
|
|
592
|
-
<div class="col--1-1 col--1-3@md">
|
|
593
|
-
<n-datepicker v-bind="n_datepicker" :range="true" :month-panels="2"></n-datepicker>
|
|
594
|
-
</div>
|
|
595
|
-
</div>
|
|
596
|
-
|
|
597
|
-
<h2>NTimepicker</h2>
|
|
598
|
-
|
|
599
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
600
|
-
<div class="col--auto">
|
|
601
|
-
<n-select style="width: 100px;" v-model="n_timepicker.size" :options="sizes"></n-select>
|
|
602
|
-
</div>
|
|
603
|
-
<div class="col--auto">
|
|
604
|
-
<n-select style="width: 210px;" v-model="n_timepicker.type" :options="types"></n-select>
|
|
605
|
-
</div>
|
|
606
|
-
<div class="col--auto">
|
|
607
|
-
<n-checkbox v-model="n_timepicker.clearable">Clearable</n-checkbox>
|
|
608
|
-
</div>
|
|
609
|
-
<div class="col--auto">
|
|
610
|
-
<n-checkbox v-model="n_timepicker.disabled">Disabled</n-checkbox>
|
|
611
|
-
</div>
|
|
612
|
-
</div>
|
|
613
|
-
|
|
614
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
615
|
-
<div class="col--1-1">
|
|
616
|
-
<n-timepicker-panel v-bind="n_timepicker"></n-timepicker-panel>
|
|
617
|
-
</div>
|
|
618
|
-
<div class="col--1-1 col--1-3@md">
|
|
619
|
-
<n-timepicker v-bind="n_timepicker"></n-timepicker>
|
|
620
|
-
</div>
|
|
621
|
-
</div>
|
|
622
|
-
|
|
623
|
-
<h2>NDatetimepicker</h2>
|
|
624
|
-
|
|
625
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
626
|
-
<div class="col--auto">
|
|
627
|
-
<n-select style="width: 100px;" v-model="n_datetimepicker.size" :options="sizes"></n-select>
|
|
628
|
-
</div>
|
|
629
|
-
<div class="col--auto">
|
|
630
|
-
<n-select style="width: 210px;" v-model="n_datetimepicker.type" :options="types"></n-select>
|
|
631
|
-
</div>
|
|
632
|
-
<div class="col--auto">
|
|
633
|
-
<n-checkbox v-model="n_datetimepicker.clearable">Clearable</n-checkbox>
|
|
634
|
-
</div>
|
|
635
|
-
<div class="col--auto">
|
|
636
|
-
<n-checkbox v-model="n_datetimepicker.disabled">Disabled</n-checkbox>
|
|
637
|
-
</div>
|
|
638
|
-
</div>
|
|
639
|
-
|
|
640
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
641
|
-
<div class="col--1-1 col--1-3@md">
|
|
642
|
-
<n-datetimepicker v-bind="n_datetimepicker"></n-datetimepicker>
|
|
643
|
-
</div>
|
|
644
|
-
</div>
|
|
645
|
-
|
|
646
|
-
<h2>NDurationpicker</h2>
|
|
647
|
-
|
|
648
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
649
|
-
<div class="col--auto">
|
|
650
|
-
<n-select style="width: 100px;" v-model="n_durationpicker.size" :options="sizes"></n-select>
|
|
651
|
-
</div>
|
|
652
|
-
<div class="col--auto">
|
|
653
|
-
<n-select style="width: 210px;" v-model="n_durationpicker.type" :options="types"></n-select>
|
|
654
|
-
</div>
|
|
655
|
-
<div class="col--auto">
|
|
656
|
-
<n-checkbox v-model="n_durationpicker.clearable">Clearable</n-checkbox>
|
|
657
|
-
</div>
|
|
658
|
-
<div class="col--auto">
|
|
659
|
-
<n-checkbox v-model="n_durationpicker.disabled">Disabled</n-checkbox>
|
|
660
|
-
</div>
|
|
661
|
-
</div>
|
|
662
|
-
|
|
663
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
664
|
-
<div class="col--1-1 col--1-3@md">
|
|
665
|
-
<n-durationpicker v-bind="n_durationpicker"></n-durationpicker>
|
|
666
|
-
</div>
|
|
667
|
-
<div class="col--1-1 col--1-3@md">
|
|
668
|
-
<n-durationpicker v-model="n_durationpicker.modelValue" v-bind="n_durationpicker"></n-durationpicker>
|
|
669
|
-
</div>
|
|
670
|
-
</div>
|
|
671
|
-
|
|
672
|
-
<h2>NTransfer</h2>
|
|
673
|
-
|
|
674
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
675
|
-
<div class="col--auto">
|
|
676
|
-
<n-select style="width: 100px;" v-model="n_transfer.size" :options="sizes"></n-select>
|
|
677
|
-
</div>
|
|
678
|
-
<div class="col--auto">
|
|
679
|
-
<n-select style="width: 210px;" v-model="n_transfer.type" :options="types"></n-select>
|
|
680
|
-
</div>
|
|
681
|
-
<div class="col--auto">
|
|
682
|
-
<n-checkbox v-model="n_cascader.disabled">Disabled</n-checkbox>
|
|
683
|
-
</div>
|
|
684
|
-
</div>
|
|
685
|
-
|
|
686
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
687
|
-
<div class="col--1-1">
|
|
688
|
-
<n-transfer v-bind="n_transfer" trigger="hover" :options="cascaderData"></n-transfer>
|
|
689
|
-
</div>
|
|
690
|
-
</div>
|
|
691
|
-
|
|
692
|
-
<h2>NModal</h2>
|
|
693
|
-
|
|
694
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
695
|
-
<div class="col--auto">
|
|
696
|
-
<n-select style="width: 100px;" v-model="n_modal.size" :options="sizes"></n-select>
|
|
697
|
-
</div>
|
|
698
|
-
<div class="col--auto">
|
|
699
|
-
<n-select style="width: 210px;" v-model="n_modal.type" :options="modals"></n-select>
|
|
700
|
-
</div>
|
|
701
|
-
<div class="col--auto">
|
|
702
|
-
<n-checkbox v-model="n_modal.disabled">Disabled</n-checkbox>
|
|
703
|
-
</div>
|
|
704
|
-
</div>
|
|
705
|
-
|
|
706
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
707
|
-
<div class="col--1-1 col--1-3@md">
|
|
708
|
-
<n-button>Open modal</n-button>
|
|
709
|
-
<n-modal v-bind="n_modal">
|
|
710
|
-
<template v-slot:header>
|
|
711
|
-
Im the header
|
|
712
|
-
</template>
|
|
713
|
-
<div style="height: 2100px;">
|
|
714
|
-
<n-form>
|
|
715
|
-
<n-form-item label="Test">
|
|
716
|
-
<n-input placeholder="Fill me"></n-input>
|
|
717
|
-
</n-form-item>
|
|
718
|
-
<n-form-item label="Test">
|
|
719
|
-
<n-input placeholder="Fill me"></n-input>
|
|
720
|
-
</n-form-item>
|
|
721
|
-
<n-form-item label="Test">
|
|
722
|
-
<n-input placeholder="Fill me"></n-input>
|
|
723
|
-
</n-form-item>
|
|
724
|
-
</n-form>
|
|
725
|
-
</div>
|
|
726
|
-
<template v-slot:footer>
|
|
727
|
-
Im the footer
|
|
728
|
-
</template>
|
|
729
|
-
</n-modal>
|
|
730
|
-
</div>
|
|
731
|
-
</div>
|
|
732
|
-
|
|
733
|
-
<h2>NDrawer</h2>
|
|
734
|
-
|
|
735
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
736
|
-
<div class="col--auto">
|
|
737
|
-
<n-select style="width: 100px;" v-model="n_drawer.size" :options="sizes"></n-select>
|
|
738
|
-
</div>
|
|
739
|
-
<div class="col--auto">
|
|
740
|
-
<n-select style="width: 210px;" v-model="n_drawer.position" :options="drawers"></n-select>
|
|
741
|
-
</div>
|
|
742
|
-
<div class="col--auto">
|
|
743
|
-
<n-checkbox v-model="n_drawer.disabled">Disabled</n-checkbox>
|
|
744
|
-
</div>
|
|
745
|
-
</div>
|
|
746
|
-
|
|
747
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
748
|
-
<div class="col--1-1 col--1-3@md">
|
|
749
|
-
<n-button>Open drawer</n-button>
|
|
750
|
-
<n-drawer v-bind="n_drawer">
|
|
751
|
-
<template v-slot:header>
|
|
752
|
-
Im the header
|
|
753
|
-
</template>
|
|
754
|
-
<div style="height: 2100px;">
|
|
755
|
-
<n-form>
|
|
756
|
-
<n-form-item label="Test">
|
|
757
|
-
<n-input placeholder="Fill me"></n-input>
|
|
758
|
-
</n-form-item>
|
|
759
|
-
<n-form-item label="Test">
|
|
760
|
-
<n-input placeholder="Fill me"></n-input>
|
|
761
|
-
</n-form-item>
|
|
762
|
-
<n-form-item label="Test">
|
|
763
|
-
<n-input placeholder="Fill me"></n-input>
|
|
764
|
-
</n-form-item>
|
|
765
|
-
</n-form>
|
|
766
|
-
</div>
|
|
767
|
-
<template v-slot:footer>
|
|
768
|
-
Im the footer
|
|
769
|
-
</template>
|
|
770
|
-
</n-drawer>
|
|
771
|
-
</div>
|
|
772
|
-
</div>
|
|
773
|
-
|
|
774
|
-
<h2>NConfirm</h2>
|
|
775
|
-
|
|
776
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
777
|
-
<div class="col--auto">
|
|
778
|
-
<n-select style="width: 100px;" v-model="n_confirm.size" :options="sizes"></n-select>
|
|
779
|
-
</div>
|
|
780
|
-
<div class="col--auto">
|
|
781
|
-
<n-select style="width: 210px;" v-model="n_confirm.type" :options="types"></n-select>
|
|
782
|
-
</div>
|
|
783
|
-
<div class="col--auto">
|
|
784
|
-
<n-checkbox v-model="n_confirm.disabled">Disabled</n-checkbox>
|
|
785
|
-
</div>
|
|
786
|
-
</div>
|
|
787
|
-
|
|
788
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
789
|
-
<div class="col--1-1 col--1-3@md">
|
|
790
|
-
<n-button>Open confirm</n-button>
|
|
791
|
-
<n-confirm v-bind="n_confirm" @abort="log('Abort')" @confirm="log('Confirm')">
|
|
792
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur corporis deserunt fuga harum illum ipsa, itaque nemo optio sunt? Aperiam cum ducimus explicabo, fugiat ipsum minima molestias odio quis quod.
|
|
793
|
-
</n-confirm>
|
|
794
|
-
</div>
|
|
795
|
-
</div>
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
<h2>NLoader</h2>
|
|
799
|
-
|
|
800
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
801
|
-
<div class="col--auto">
|
|
802
|
-
<n-select style="width: 100px;" v-model="n_loader.size" :options="sizes"></n-select>
|
|
803
|
-
</div>
|
|
804
|
-
<div class="col--auto">
|
|
805
|
-
<n-select style="width: 210px;" v-model="n_loader.type" :options="types"></n-select>
|
|
806
|
-
</div>
|
|
807
|
-
<div class="col--auto">
|
|
808
|
-
<n-checkbox v-model="n_loader.visible">Visible</n-checkbox>
|
|
809
|
-
</div>
|
|
810
|
-
</div>
|
|
811
|
-
|
|
812
|
-
<n-loader v-bind="n_loader" style="min-height: 200px; margin-top: 30px; border: 2px solid rgba(110, 110, 110, 0.5); border-radius: 4px; padding: 20px;">
|
|
813
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia voluptas fuga sit iste odit amet, quam delectus iure facilis, voluptatum officiis magnam deserunt nulla maiores accusantium corrupti! Iste, rem optio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint dignissimos ad beatae soluta quaerat reprehenderit, quasi maxime quisquam? Commodi, cumque sequi? Harum quam nobis suscipit consequatur soluta aperiam! Rerum tempore minima saepe, quisquam ab sunt consequatur modi repudiandae molestiae inventore!
|
|
814
|
-
</n-loader>
|
|
815
|
-
|
|
816
|
-
<h2>Notify</h2>
|
|
817
|
-
|
|
818
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
819
|
-
<div class="col--1-1 col--1-3@md">
|
|
820
|
-
<n-button type="primary" @click="notify('primary')">Notify</n-button>
|
|
821
|
-
</div>
|
|
822
|
-
<div class="col--1-1 col--1-3@md">
|
|
823
|
-
<n-button type="secondary" @click="notify('secondary')">Notify</n-button>
|
|
824
|
-
</div>
|
|
825
|
-
<div class="col--1-1 col--1-3@md">
|
|
826
|
-
<n-button type="success" @click="notify('success')">Notify</n-button>
|
|
827
|
-
</div>
|
|
828
|
-
<div class="col--1-1 col--1-3@md">
|
|
829
|
-
<n-button type="warning" @click="notify('warning')">Notify</n-button>
|
|
830
|
-
</div>
|
|
831
|
-
<div class="col--1-1 col--1-3@md">
|
|
832
|
-
<n-button type="danger" @click="notify('danger')">Notify</n-button>
|
|
833
|
-
</div>
|
|
834
|
-
<div class="col--1-1 col--1-3@md">
|
|
835
|
-
<n-button type="info" @click="notify('info')">Notify</n-button>
|
|
836
|
-
</div>
|
|
837
|
-
</div>
|
|
838
|
-
|
|
839
|
-
<h2>NTabs</h2>
|
|
840
|
-
|
|
841
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
842
|
-
<div class="col--auto">
|
|
843
|
-
<n-select style="width: 100px;" v-model="n_tabs.size" :options="sizes"></n-select>
|
|
844
|
-
</div>
|
|
845
|
-
<div class="col--auto">
|
|
846
|
-
<n-select style="width: 210px;" v-model="n_tabs.type" :options="types"></n-select>
|
|
847
|
-
</div>
|
|
848
|
-
<div class="col--auto">
|
|
849
|
-
<n-switch v-model="n_tabs.float">Float</n-switch>
|
|
850
|
-
</div>
|
|
851
|
-
</div>
|
|
852
|
-
|
|
853
|
-
<n-tabs v-model="n_tabs.value" v-bind="n_tabs">
|
|
854
|
-
<n-tabs-item label="Default" icon="fa fa-ghost">
|
|
855
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aut, dicta quidem aliquid accusantium nulla veritatis nostrum? Porro, hic eligendi?
|
|
856
|
-
</n-tabs-item>
|
|
857
|
-
<n-tabs-item name="keep" label="Keep" :keep="true">
|
|
858
|
-
<n-textarea></n-textarea>
|
|
859
|
-
</n-tabs-item>
|
|
860
|
-
<n-tabs-item name="bar" label="Headline in extra extra extra extra extra extra looooong">
|
|
861
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, modi?
|
|
862
|
-
</n-tabs-item>
|
|
863
|
-
</n-tabs>
|
|
864
|
-
|
|
865
|
-
<n-collapse v-model="n_collapse.value" v-bind="n_collapse" style="height: 900px;">
|
|
866
|
-
<n-collapse-item name="tioo" icon="fa fa-ghost">
|
|
867
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aut, dicta quidem aliquid accusantium nulla veritatis nostrum? Porro, hic eligendi?
|
|
868
|
-
</n-collapse-item>
|
|
869
|
-
<n-collapse-item name="keep" label="Keep" :keep="true">
|
|
870
|
-
<n-textarea></n-textarea>
|
|
871
|
-
</n-collapse-item>
|
|
872
|
-
<n-collapse-item name="bar" label="Headline in extra extra extra extra extra extra looooong">
|
|
873
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, modi?
|
|
874
|
-
</n-collapse-item>
|
|
875
|
-
</n-collapse>
|
|
876
|
-
|
|
877
|
-
<h2>NPaginator</h2>
|
|
878
|
-
|
|
879
|
-
<div class="app-options grid grid--row grid--wrap grid--30-30">
|
|
880
|
-
<div class="col--auto">
|
|
881
|
-
<n-select style="width: 100px;" v-model="n_paginator.size" :options="sizes"></n-select>
|
|
882
|
-
</div>
|
|
883
|
-
<div class="col--auto">`
|
|
884
|
-
<n-select style="width: 210px;" v-model="n_paginator.type" :options="types"></n-select>
|
|
885
|
-
</div>
|
|
886
|
-
</div>
|
|
887
|
-
|
|
888
|
-
<n-paginator :total="200000" v-bind="n_paginator"></n-paginator>
|
|
889
|
-
|
|
890
|
-
<h2>NVirtualscroller</h2>
|
|
891
|
-
|
|
892
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
893
|
-
<div class="col--auto">
|
|
894
|
-
<n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(0)">
|
|
895
|
-
Scroll to first item
|
|
896
|
-
</n-button>
|
|
897
|
-
</div>
|
|
898
|
-
<div class="col--auto">
|
|
899
|
-
<n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(2000)">
|
|
900
|
-
Scroll to item 2000
|
|
901
|
-
</n-button>
|
|
902
|
-
</div>
|
|
903
|
-
<div class="col--auto">
|
|
904
|
-
<n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(7100)">
|
|
905
|
-
Scroll to item 7100
|
|
906
|
-
</n-button>
|
|
907
|
-
</div>
|
|
908
|
-
<div class="col--auto">
|
|
909
|
-
<n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(-1)">
|
|
910
|
-
Scroll to last item
|
|
911
|
-
</n-button>
|
|
912
|
-
</div>
|
|
913
|
-
</div>
|
|
914
|
-
|
|
915
|
-
<n-virtualscroller ref="virtualscroller" :items="virtualData" style="height: 500px; margin-top: 30px; border: 2px solid rgba(110, 110, 110, 0.5); border-radius: 4px;">
|
|
916
|
-
<template v-slot:default="{ value }">
|
|
917
|
-
<div style="padding: 0 15px; line-height: 30px;">{{ value.label }}</div>
|
|
918
|
-
</template>
|
|
919
|
-
</n-virtualscroller>
|
|
920
|
-
|
|
921
|
-
<h2>NDraglist</h2>
|
|
922
|
-
|
|
923
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
924
|
-
<div class="col--auto">
|
|
925
|
-
<n-button type="primary" @click="n_draggable.count++">
|
|
926
|
-
Add draggable list with 1000 items
|
|
927
|
-
</n-button>
|
|
928
|
-
</div>
|
|
929
|
-
<div class="col--auto">
|
|
930
|
-
<n-button type="danger" @click="n_draggable.count ? n_draggable.count-- : 0">
|
|
931
|
-
Remove draggable list with 1000 items
|
|
932
|
-
</n-button>
|
|
933
|
-
</div>
|
|
934
|
-
</div>
|
|
935
|
-
|
|
936
|
-
<n-draglist v-model:items="cascaderData" :render-expand="true" :render-select="true" style="height: 300px; margin-top: 30px; border: 2px solid rgba(110, 110, 110, 0.5); border-radius: 4px;">
|
|
937
|
-
<template v-slot:default="{ value, item }">
|
|
938
|
-
<div style="padding: 0 15px; line-height: 34px;">{{ item.label }}</div>
|
|
939
|
-
</template>
|
|
940
|
-
</n-draglist>
|
|
941
|
-
|
|
942
|
-
<n-draglist v-model:items="testData" unique-prop="uid" :transform-drop="transDrop" :threshold="0" :lazyload="true" :handle="true" :render-select="true" style="height: 300px; margin-top: 30px; border: 2px solid rgba(110, 110, 110, 0.5); border-radius: 4px;">
|
|
943
|
-
<template v-slot:default="{ value, item, copy, remove }">
|
|
944
|
-
<div class="grid grid--row grid--middle" style="height: 34px;">
|
|
945
|
-
<div draggable="true" style="padding: 0 10px;">
|
|
946
|
-
<i class="fa fa-ellipsis-v"></i>
|
|
947
|
-
</div>
|
|
948
|
-
<div class="col--flex-1-1">
|
|
949
|
-
{{ item.label }}
|
|
950
|
-
</div>
|
|
951
|
-
<div class="col--flex-0-0" style="margin-right: 10px;">
|
|
952
|
-
<n-button size="xs" type="info" @click="copy">Copy</n-button>
|
|
953
|
-
</div>
|
|
954
|
-
<div class="col--flex-0-0" style="margin-right: 10px;">
|
|
955
|
-
<n-button size="xs" type="danger" @click="remove">Remove</n-button>
|
|
956
|
-
</div>
|
|
957
|
-
</div>
|
|
958
|
-
</template>
|
|
959
|
-
</n-draglist>
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
<template v-for="index in Arr.make(n_draggable.count)">
|
|
963
|
-
<n-draglist v-model:items="virtualTree" :render-expand="true" :render-select="true" style="height: 500px; margin-top: 30px; border: 2px solid rgba(110, 110, 110, 0.5); border-radius: 4px;">
|
|
964
|
-
<template v-slot:default="{ value, item }">
|
|
965
|
-
<div style="padding: 0 5px; line-height: 34px;">
|
|
966
|
-
<n-input v-model="item.label"></n-input>
|
|
967
|
-
</div>
|
|
968
|
-
</template>
|
|
969
|
-
</n-draglist>
|
|
970
|
-
</template>
|
|
971
|
-
|
|
972
|
-
<h2>NDropzone</h2>
|
|
973
|
-
|
|
974
|
-
<n-dropzone v-model:item="virtualItem" style="height: 500px; margin-top: 30px; border: 2px solid rgba(110, 110, 110, 0.5); border-radius: 4px;">
|
|
975
|
-
<template v-slot:default="item">
|
|
976
|
-
<div style="padding: 0 5px; line-height: 34px;">{{ item.label }}</div>
|
|
977
|
-
</template>
|
|
978
|
-
</n-dropzone>
|
|
979
|
-
|
|
980
|
-
<h2>NResizer</h2>
|
|
981
|
-
|
|
982
|
-
<div style="display: flex; flex-direction: row; justify-content: flex-start;">
|
|
983
|
-
<n-resizer style="width: 60%; height: 200px; padding: 20px; flex: 0 1 auto; background: rgba(110, 110, 110, 0.5);" position="right">
|
|
984
|
-
Resizercontent
|
|
985
|
-
</n-resizer>
|
|
986
|
-
</div>
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
<div style="display: flex; flex-direction: row; justify-content: flex-end;">
|
|
990
|
-
<n-resizer style="width: 60%; height: 200px; padding: 20px; flex: 0 1 auto; background: rgba(110, 110, 110, 0.5);" position="left">
|
|
991
|
-
Resizercontent
|
|
992
|
-
</n-resizer>
|
|
993
|
-
</div>
|
|
994
|
-
|
|
995
|
-
<h2>NTable</h2>
|
|
996
|
-
|
|
997
|
-
<div class="grid grid--row grid--wrap grid--10-10">
|
|
998
|
-
<div class="col--auto">
|
|
999
|
-
<n-button type="primary" @click="$refs.table.resetFilter()">
|
|
1000
|
-
Reset filter
|
|
1001
|
-
</n-button>
|
|
1002
|
-
</div>
|
|
1003
|
-
<div class="col--auto">
|
|
1004
|
-
<n-button type="primary" @click="$refs.table.highlightNode(virtualTree[2]['children'][3]['id'])">
|
|
1005
|
-
Highlight node
|
|
1006
|
-
</n-button>
|
|
1007
|
-
</div>
|
|
1008
|
-
</div>
|
|
1009
|
-
|
|
1010
|
-
<n-table ref="table" v-model:items="virtualTree" :handle="true" :render-handle="true" :render-expand="true" :item-height="100" style="margin-top: 30px; min-height: 500px;">
|
|
1011
|
-
<n-table-column label="Label" type="string" prop="label" align="center" :sort="true" :filter="true">
|
|
1012
|
-
<!-- <template v-slot:default="{item}">{{ item.value }}</template>-->
|
|
1013
|
-
</n-table-column>
|
|
1014
|
-
<n-table-column label="Image" type="image" prop="image" :fixed-width="130"></n-table-column>
|
|
1015
|
-
<n-table-column label="Date" type="datetime" prop="date" :disabled="true" :sort="true" :width="50" :filter="true"></n-table-column>
|
|
1016
|
-
<n-table-column label="Enabled 3123 asd as" type="option" prop="enabled" :sort="true" :filter="true" :options="[{ value: true, name: 'JAAAA' }, { value: false, name: 'NEEEEEJ' }]" options-value="$value.value" :width="10" options-label="$value.name"></n-table-column>
|
|
1017
|
-
<n-table-column label="Value" type="string" prop="value" :sort="true" :filter="true" :width="20"></n-table-column>
|
|
1018
|
-
<n-table-column label="ID" type="string" prop="id" :breakpoint="1300"></n-table-column>
|
|
1019
|
-
</n-table>
|
|
1020
|
-
|
|
1021
|
-
<n-table v-model:items="virtualTree" :draggable="false" :render-expand="true" :item-height="36" style="margin-top: 30px; min-height: 500px;">
|
|
1022
|
-
<n-table-column label="Label" type="string" prop="label"></n-table-column>
|
|
1023
|
-
<n-table-column v-model="treeSelect" label="Select" type="select" :allow-uncheck="true" :fixed-width="120">
|
|
1024
|
-
<template v-slot:default="{ item }"></template>
|
|
1025
|
-
</n-table-column>
|
|
1026
|
-
<n-table-column v-model="treeMatrix" label="Matrix 2" type="matrix" :matrix="-1" align="center" :fixed-width="120"></n-table-column>
|
|
1027
|
-
</n-table>
|
|
1028
|
-
|
|
1029
|
-
<!-- <n-table ref="table2" v-model:items="virtualTree" :render-expand="true" :item-height="100" style="margin-top: 30px;">
|
|
1030
|
-
<n-table-column label="Label" type="string" prop="label" align="center" :sort="true" :filter="true"></n-table-column>
|
|
1031
|
-
<n-table-column label="Matrix" type="matrix" prop="image" :fixed-width="100"></n-table-column>
|
|
1032
|
-
<n-table-column label="Date" type="datetime" prop="date" :sort="true" :filter="true"></n-table-column>
|
|
1033
|
-
<n-table-column label="Enabled" type="boolean" prop="enabled" :sort="true" :filter="true"></n-table-column>
|
|
1034
|
-
<n-table-column label="Value" type="string" prop="value" :sort="true" :filter="true"></n-table-column>
|
|
1035
|
-
<n-table-column label="ID" type="string" prop="id" :fixed-width="300" :breakpoint="1300"></n-table-column>
|
|
1036
|
-
</n-table> -->
|
|
1037
|
-
|
|
1038
|
-
<!-- <n-table ref="table3" v-model:items="virtualTree" :render-expand="true" :item-height="100" style="margin-top: 30px;">
|
|
1039
|
-
<n-table-column label="Label" type="string" prop="label" align="center" :sort="true" :filter="true"></n-table-column>
|
|
1040
|
-
<n-table-column label="Image" type="image" prop="image" :fixed-width="130"></n-table-column>
|
|
1041
|
-
<n-table-column label="Date" type="datetime" prop="date" :sort="true" :filter="true"></n-table-column>
|
|
1042
|
-
<n-table-column label="Enabled" type="boolean" prop="enabled" :sort="true" :filter="true"></n-table-column>
|
|
1043
|
-
<n-table-column label="Value" type="string" prop="value" :sort="true" :filter="true"></n-table-column>
|
|
1044
|
-
<n-table-column label="ID" type="string" prop="id" :fixed-width="300" :breakpoint="1300"></n-table-column>
|
|
1045
|
-
</n-table> -->
|
|
1046
|
-
|
|
1047
|
-
<!-- <n-table ref="table4" v-model:items="virtualTree" :render-expand="true" :item-height="100" style="margin-top: 30px;">
|
|
1048
|
-
<n-table-column label="Label" type="string" prop="label" align="center" :sort="true" :filter="true"></n-table-column>
|
|
1049
|
-
<n-table-column label="Image" type="image" prop="image" :fixed-width="130"></n-table-column>
|
|
1050
|
-
<n-table-column label="Date" type="datetime" prop="date" :sort="true" :filter="true"></n-table-column>
|
|
1051
|
-
<n-table-column label="Enabled" type="boolean" prop="enabled" :sort="true" :filter="true"></n-table-column>
|
|
1052
|
-
<n-table-column label="Value" type="string" prop="value" :sort="true" :filter="true"></n-table-column>
|
|
1053
|
-
<n-table-column label="ID" type="string" prop="id" :fixed-width="300" :breakpoint="1300"></n-table-column>
|
|
1054
|
-
</n-table> -->
|
|
1055
|
-
|
|
1056
|
-
<h2>NInfo</h2>
|
|
1057
|
-
|
|
1058
|
-
<n-info ref="info" :sync-event="() => $refs.table.syncCurrent()" style="margin-top: 30px; width: 300px; height: 500px;">
|
|
1059
|
-
<n-info-column label="Label" type="string" prop="label"></n-info-column>
|
|
1060
|
-
<n-info-column label="Image" type="image" prop="image"></n-info-column>
|
|
1061
|
-
<n-info-column label="Date" type="datetime" prop="date"></n-info-column>
|
|
1062
|
-
<n-info-column label="Enabled" type="boolean" prop="enabled"></n-info-column>
|
|
1063
|
-
<n-info-column label="Value" type="string" prop="value"></n-info-column>
|
|
1064
|
-
<n-info-column label="ID" type="string" prop="id"></n-info-column>
|
|
1065
|
-
</n-info>
|
|
1066
|
-
|
|
1067
|
-
<n-info ref="info" :sync-event="() => $refs.table.syncCurrent()" :relative="true" style="margin-top: 30px; width: 300px;">
|
|
1068
|
-
<n-info-column label="Label" type="string" prop="label"></n-info-column>
|
|
1069
|
-
<n-info-column label="Image" type="image" prop="image"></n-info-column>
|
|
1070
|
-
<n-info-column label="Date" type="datetime" prop="date"></n-info-column>
|
|
1071
|
-
<n-info-column label="Enabled" type="boolean" prop="enabled"></n-info-column>
|
|
1072
|
-
<n-info-column label="ID" type="string" prop="id"></n-info-column>
|
|
1073
|
-
</n-info>
|
|
1074
|
-
|
|
1075
|
-
<h2>NConfigNext</h2>
|
|
1076
|
-
|
|
1077
|
-
<n-form>
|
|
1078
|
-
<n-config-next :config="demoConfigNext" v-model="configData"></n-config-next>
|
|
1079
|
-
</n-form>
|
|
1080
|
-
|
|
1081
|
-
<h2>NPreview</h2>
|
|
1082
|
-
|
|
1083
|
-
<n-file v-model="n_preview.file"></n-file>
|
|
1084
|
-
|
|
1085
|
-
<n-preview v-if="n_preview.file" :file="n_preview.file" style="width: 100px;"></n-preview>
|
|
1086
|
-
|
|
1087
|
-
<n-preview file="https://picsum.photos/1920/1920.jpg" thumb="https://picsum.photos/300/300.jpg" style="width: 100px;"></n-preview>
|
|
1088
|
-
<n-preview file="https://www.youtube.com/watch?v=m_Nw_BF90_4" thumb="https://via.placeholder.com/100/000/fff.jpg?text=Youtube" style="width: 100px;"></n-preview>
|
|
1089
|
-
<n-preview file="https://vimeo.com/128079949" thumb="https://via.placeholder.com/100/000/fff.jpg?text=Vimeo" style="width: 100px;"></n-preview>
|
|
1090
|
-
<n-preview file="https://www.w3schools.com/html/mov_bbb.webm" thumb="https://via.placeholder.com/100/000/fff.jpg?text=WEBM" style="width: 100px;"></n-preview>
|
|
1091
|
-
|
|
1092
|
-
<h2>NPreviewVideo</h2>
|
|
1093
|
-
|
|
1094
|
-
<div style="margin: 0 auto; max-width: 480px;">
|
|
1095
|
-
<n-preview-video src="https://www.youtube.com/embed/nFhMY2itmlc" @resolve:youtube="log"></n-preview-video>
|
|
1096
|
-
<n-preview-video src="https://vimeo.com/128079949" @resolve:vimeo="log"></n-preview-video>
|
|
1097
|
-
<n-preview-video src="https://www.w3schools.com/html/mov_bbb.webm"></n-preview-video>
|
|
1098
|
-
</div>
|
|
1099
|
-
|
|
1100
|
-
<h2>NMap</h2>
|
|
1101
|
-
|
|
1102
|
-
<n-form>
|
|
1103
|
-
<n-form-item label="Lat">
|
|
1104
|
-
<n-input v-model="n_map.lat" :disabled="true"></n-input>
|
|
1105
|
-
</n-form-item>
|
|
1106
|
-
<n-form-item label="Lng">
|
|
1107
|
-
<n-input v-model="n_map.lng" :disabled="true"></n-input>
|
|
1108
|
-
</n-form-item>
|
|
1109
|
-
</n-form>
|
|
1110
|
-
|
|
1111
|
-
<n-map :lat="n_map.lat" :lng="n_map.lng" :zoom="9">
|
|
1112
|
-
<n-map-marker v-model:lat="n_map.lat" v-model:lng="n_map.lng" :drag="true"></n-map-marker>
|
|
1113
|
-
</n-map>
|
|
1114
|
-
|
|
1115
|
-
</div>
|
|
1116
|
-
</div>
|
|
1117
|
-
|
|
1118
|
-
<script>
|
|
1119
|
-
(function (nano) {
|
|
1120
|
-
|
|
1121
|
-
'use strict';
|
|
1122
|
-
|
|
1123
|
-
pi.Dom.ready(function () {
|
|
1124
|
-
|
|
1125
|
-
let data = {};
|
|
1126
|
-
|
|
1127
|
-
data.sizes = {
|
|
1128
|
-
xs: 'XS',
|
|
1129
|
-
sm: 'SM',
|
|
1130
|
-
md: 'MD',
|
|
1131
|
-
lg: 'LG'
|
|
1132
|
-
};
|
|
1133
|
-
|
|
1134
|
-
data.types = {
|
|
1135
|
-
primary: 'Primary',
|
|
1136
|
-
secondary: 'Secondary',
|
|
1137
|
-
success: 'Success',
|
|
1138
|
-
warning: 'Warning',
|
|
1139
|
-
danger: 'Danger',
|
|
1140
|
-
info: 'Info'
|
|
1141
|
-
};
|
|
1142
|
-
|
|
1143
|
-
data.modals = {
|
|
1144
|
-
default: 'Default',
|
|
1145
|
-
preview: 'Preview',
|
|
1146
|
-
};
|
|
1147
|
-
|
|
1148
|
-
data.drawers = {
|
|
1149
|
-
left: 'Left',
|
|
1150
|
-
right: 'Right',
|
|
1151
|
-
};
|
|
1152
|
-
|
|
1153
|
-
pi.Obj.set(data, 'demoConfigNext.NFormGroup:root', {
|
|
1154
|
-
vShow: [
|
|
1155
|
-
'$model.test'
|
|
1156
|
-
],
|
|
1157
|
-
props: {
|
|
1158
|
-
label: '$model.label',
|
|
1159
|
-
icon: 'fa fa-directions'
|
|
1160
|
-
}
|
|
1161
|
-
});
|
|
1162
|
-
|
|
1163
|
-
pi.Obj.set(data, 'demoConfigNext.NFormGroup:root.content.NFormItem:url', {
|
|
1164
|
-
props: {
|
|
1165
|
-
label: pi.Locale.trans('URL')
|
|
1166
|
-
},
|
|
1167
|
-
content: {
|
|
1168
|
-
'NInput': {
|
|
1169
|
-
binds: {
|
|
1170
|
-
modelValue: '$model.option.url'
|
|
1171
|
-
}
|
|
1172
|
-
}
|
|
1173
|
-
}
|
|
1174
|
-
});
|
|
1175
|
-
|
|
1176
|
-
pi.Obj.set(data, 'demoConfigNext.NFormGroup:root.content.NFormItem:menu', {
|
|
1177
|
-
props: {
|
|
1178
|
-
label: pi.Locale.trans('Menu')
|
|
1179
|
-
},
|
|
1180
|
-
content: {
|
|
1181
|
-
'NInput': {
|
|
1182
|
-
binds: {
|
|
1183
|
-
modelValue: '$model.option.redirect'
|
|
1184
|
-
}
|
|
1185
|
-
}
|
|
1186
|
-
}
|
|
1187
|
-
});
|
|
1188
|
-
|
|
1189
|
-
data.demoConfig = {
|
|
1190
|
-
'NFormGroup:00': {
|
|
1191
|
-
$props: {
|
|
1192
|
-
label: pi.Locale.trans('Redirect'),
|
|
1193
|
-
icon: 'fa fa-directions'
|
|
1194
|
-
},
|
|
1195
|
-
content: {
|
|
1196
|
-
'div:00': {
|
|
1197
|
-
class: 'grid grid--row grid--wrap grid--30',
|
|
1198
|
-
content: {
|
|
1199
|
-
'div:00': {
|
|
1200
|
-
class: 'col--1-1 col--1-2@sm',
|
|
1201
|
-
content: {
|
|
1202
|
-
'NFormItem:00': {
|
|
1203
|
-
$props: {
|
|
1204
|
-
label: pi.Locale.trans('URL')
|
|
1205
|
-
},
|
|
1206
|
-
content: {
|
|
1207
|
-
'NInput:00': {
|
|
1208
|
-
model: {
|
|
1209
|
-
path: 'option.url'
|
|
1210
|
-
}
|
|
1211
|
-
}
|
|
1212
|
-
}
|
|
1213
|
-
},
|
|
1214
|
-
}
|
|
1215
|
-
},
|
|
1216
|
-
'div:10': {
|
|
1217
|
-
class: 'col--1-1 col--1-2@sm',
|
|
1218
|
-
content: {
|
|
1219
|
-
'NFormItem:00': {
|
|
1220
|
-
$props: {
|
|
1221
|
-
label: pi.Locale.trans('Menu')
|
|
1222
|
-
},
|
|
1223
|
-
content: {
|
|
1224
|
-
'NInput:00': {
|
|
1225
|
-
model: {
|
|
1226
|
-
path: 'option.redirect'
|
|
1227
|
-
}
|
|
1228
|
-
}
|
|
1229
|
-
}
|
|
1230
|
-
}
|
|
1231
|
-
}
|
|
1232
|
-
}
|
|
1233
|
-
}
|
|
1234
|
-
}
|
|
1235
|
-
}
|
|
1236
|
-
},
|
|
1237
|
-
};
|
|
1238
|
-
|
|
1239
|
-
data.configData = { label: 'asdasda' };
|
|
1240
|
-
|
|
1241
|
-
data.testData = [];
|
|
1242
|
-
|
|
1243
|
-
let itemGenerator = function (count = 100, index = 0) {
|
|
1244
|
-
return pi.Arr.each(pi.Arr.make(count), function (value) {
|
|
1245
|
-
|
|
1246
|
-
let id = pi.UUID();
|
|
1247
|
-
|
|
1248
|
-
return {
|
|
1249
|
-
id: id,
|
|
1250
|
-
value: id,
|
|
1251
|
-
matrix: 10,
|
|
1252
|
-
label: `Item ${index ++}`,
|
|
1253
|
-
image: 'https://picsum.photos/300/300.jpg?' + id,
|
|
1254
|
-
date: pi.Now.make('now').format('YYYY-MM-DD HH:mm:ss', true),
|
|
1255
|
-
enabled: !!Math.floor(Math.random() * 2)
|
|
1256
|
-
};
|
|
1257
|
-
});
|
|
1258
|
-
};
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
data.cascaderData = pi.Arr.each(itemGenerator(5), function (item) {
|
|
1262
|
-
|
|
1263
|
-
let children = pi.Arr.each(itemGenerator(5), function (item) {
|
|
1264
|
-
return pi.Obj.assign(item, { children: itemGenerator(5) });
|
|
1265
|
-
});
|
|
1266
|
-
|
|
1267
|
-
return pi.Obj.assign(item, { children: children });
|
|
1268
|
-
});
|
|
1269
|
-
|
|
1270
|
-
data.virtualData = itemGenerator(10000);
|
|
1271
|
-
|
|
1272
|
-
data.virtualTree = pi.Arr.each(itemGenerator(100), function (item) {
|
|
1273
|
-
return pi.Obj.assign(item, { children: itemGenerator(10) });
|
|
1274
|
-
});
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
data.virtualItem = null;
|
|
1278
|
-
|
|
1279
|
-
data.treeSelect = null;
|
|
1280
|
-
data.treeMatrix = [data.virtualTree[3]];
|
|
1281
|
-
|
|
1282
|
-
data.foobar = 'huhu';
|
|
1283
|
-
|
|
1284
|
-
data.n_theme = pi.Cookie.get('theme', 'light', 'string');
|
|
1285
|
-
|
|
1286
|
-
pi.Dom.find('#theme').attr('href', '../dist/themes/' +
|
|
1287
|
-
data.n_theme + '.css');
|
|
1288
|
-
|
|
1289
|
-
data.n_form = {
|
|
1290
|
-
size: 'md', conditional: true, modelValue: false
|
|
1291
|
-
};
|
|
1292
|
-
|
|
1293
|
-
data.n_tags = {
|
|
1294
|
-
size: 'md',
|
|
1295
|
-
};
|
|
1296
|
-
|
|
1297
|
-
data.n_rating = {
|
|
1298
|
-
size: 'md', choice: 'No stars|:value star|:value stars', disabled: false
|
|
1299
|
-
};
|
|
1300
|
-
|
|
1301
|
-
data.n_button = {
|
|
1302
|
-
icon: 'fa fa-ghost', size: 'md', square: false, link: false, disabled: false
|
|
1303
|
-
};
|
|
1304
|
-
|
|
1305
|
-
data.n_textarea = {
|
|
1306
|
-
size: 'md', placeholder: 'Placeholder', autoRows: false, disabled: false
|
|
1307
|
-
};
|
|
1308
|
-
|
|
1309
|
-
data.n_input = {
|
|
1310
|
-
value: 'Demo', icon: 'fa fa-ghost', size: 'md', placeholder: 'Placeholder', disabled: false
|
|
1311
|
-
};
|
|
1312
|
-
|
|
1313
|
-
data.n_number = {
|
|
1314
|
-
test: '', value: 3, size: 'md', placeholder: '', disabled: false, minValue: 0, maxValue: 10
|
|
1315
|
-
};
|
|
1316
|
-
|
|
1317
|
-
data.n_select = {
|
|
1318
|
-
size: 'md', allowCreate: false, clearable: true, disabled: false
|
|
1319
|
-
};
|
|
1320
|
-
|
|
1321
|
-
data.n_cascader = {
|
|
1322
|
-
size: 'md', type: 'primary', clearable: true, disabled: false
|
|
1323
|
-
};
|
|
1324
|
-
|
|
1325
|
-
data.n_checkbox = {
|
|
1326
|
-
size: 'md', type: 'primary', disabled: false
|
|
1327
|
-
};
|
|
1328
|
-
|
|
1329
|
-
data.n_radio = {
|
|
1330
|
-
size: 'md', type: 'primary', disabled: false
|
|
1331
|
-
};
|
|
1332
|
-
|
|
1333
|
-
data.n_slider = {
|
|
1334
|
-
size: 'md', disabled: false, temp_value: 30,
|
|
1335
|
-
};
|
|
1336
|
-
|
|
1337
|
-
data.n_switch = {
|
|
1338
|
-
size: 'md', disabled: false
|
|
1339
|
-
};
|
|
1340
|
-
|
|
1341
|
-
data.n_datepicker = {
|
|
1342
|
-
size: 'md', type: 'primary', clearable: true, disabled: false
|
|
1343
|
-
};
|
|
1344
|
-
|
|
1345
|
-
data.n_timepicker = {
|
|
1346
|
-
size: 'md', type: 'primary', clearable: true, disabled: false
|
|
1347
|
-
};
|
|
1348
|
-
|
|
1349
|
-
data.n_datetimepicker = {
|
|
1350
|
-
size: 'md', type: 'primary', clearable: true, disabled: false
|
|
1351
|
-
};
|
|
1352
|
-
|
|
1353
|
-
data.n_durationpicker = {
|
|
1354
|
-
size: 'md', type: 'primary', clearable: true, disabled: false, modelValue: 124521
|
|
1355
|
-
};
|
|
1356
|
-
|
|
1357
|
-
data.n_transfer = {
|
|
1358
|
-
size: 'md', type: 'primary', disabled: false
|
|
1359
|
-
};
|
|
1360
|
-
|
|
1361
|
-
data.n_modal = {
|
|
1362
|
-
size: 'md', type: 'default', disabled: false
|
|
1363
|
-
};
|
|
1364
|
-
|
|
1365
|
-
data.n_drawer = {
|
|
1366
|
-
size: 'md', position: 'right', disabled: false
|
|
1367
|
-
};
|
|
1368
|
-
|
|
1369
|
-
data.n_confirm = {
|
|
1370
|
-
size: 'md', type: 'primary', disabled: false
|
|
1371
|
-
};
|
|
1372
|
-
|
|
1373
|
-
data.n_tabs = {
|
|
1374
|
-
value: 'default', size: 'md', type: 'primary', float: true
|
|
1375
|
-
};
|
|
1376
|
-
|
|
1377
|
-
data.n_collapse = {
|
|
1378
|
-
value: ['default'], size: 'md', type: 'primary', relative: false
|
|
1379
|
-
};
|
|
1380
|
-
|
|
1381
|
-
data.n_paginator = {
|
|
1382
|
-
size: 'md', type: 'primary'
|
|
1383
|
-
};
|
|
1384
|
-
|
|
1385
|
-
data.n_draggable = {
|
|
1386
|
-
count: 0
|
|
1387
|
-
};
|
|
1388
|
-
|
|
1389
|
-
data.n_loader = {
|
|
1390
|
-
size: 'md', type: 'primary', visible: true
|
|
1391
|
-
};
|
|
1392
|
-
|
|
1393
|
-
data.n_map = {
|
|
1394
|
-
lat: 53.55, lng: 9.99
|
|
1395
|
-
};
|
|
1396
|
-
|
|
1397
|
-
data.n_preview = {
|
|
1398
|
-
file: null
|
|
1399
|
-
};
|
|
1400
|
-
|
|
1401
|
-
let methods = {};
|
|
1402
|
-
|
|
1403
|
-
methods.changeTheme = function (value) {
|
|
1404
|
-
|
|
1405
|
-
pi.Cookie.set('theme', this.n_theme = value);
|
|
1406
|
-
|
|
1407
|
-
pi.Dom.find('#theme').attr('href', '../dist/themes/' +
|
|
1408
|
-
this.n_theme + '.css');
|
|
1409
|
-
}
|
|
1410
|
-
|
|
1411
|
-
methods.searchLocation = function () {
|
|
1412
|
-
|
|
1413
|
-
console.log(this.n_map.localtion)
|
|
1414
|
-
}
|
|
1415
|
-
|
|
1416
|
-
methods.transDrop = function (node) {
|
|
1417
|
-
|
|
1418
|
-
node.uid = pi.UUID();
|
|
1419
|
-
|
|
1420
|
-
return node;
|
|
1421
|
-
}
|
|
1422
|
-
|
|
1423
|
-
methods.log = function (val) {
|
|
1424
|
-
console.log(val || 'Log fired');
|
|
1425
|
-
};
|
|
1426
|
-
|
|
1427
|
-
methods.notify = function (type) {
|
|
1428
|
-
this.Notify('Lorem ipsum dolore', type);
|
|
1429
|
-
};
|
|
1430
|
-
|
|
1431
|
-
var config = {
|
|
1432
|
-
data: function () {
|
|
1433
|
-
|
|
1434
|
-
this.icons = pi.Obj.assign(nano.Icons, {
|
|
1435
|
-
ghost: 'fa fa-ghost'
|
|
1436
|
-
});
|
|
1437
|
-
|
|
1438
|
-
data.demoIcons = pi.Arr.reduce(pi.Obj.values(nano.Icons), function (merge, icon) {
|
|
1439
|
-
return pi.Obj.assign(merge, { [icon]: icon });
|
|
1440
|
-
}, {});
|
|
1441
|
-
|
|
1442
|
-
return data;
|
|
1443
|
-
},
|
|
1444
|
-
mounted: function () {
|
|
1445
|
-
let self = this;
|
|
1446
|
-
pi.Any.delay(function () {
|
|
1447
|
-
self.configData.test = 'haha';
|
|
1448
|
-
}, 2000);
|
|
1449
|
-
},
|
|
1450
|
-
methods: methods
|
|
1451
|
-
};
|
|
1452
|
-
|
|
1453
|
-
window.App = Vue.createApp(config);
|
|
1454
|
-
|
|
1455
|
-
window.App.config.devtools = true;
|
|
1456
|
-
|
|
1457
|
-
window.App.use(function (App) {
|
|
1458
|
-
nano.Install(App);
|
|
1459
|
-
});
|
|
1460
|
-
|
|
1461
|
-
window.App.mount('#app');
|
|
1462
|
-
});
|
|
1463
|
-
|
|
1464
|
-
})(window.nano);
|
|
1465
|
-
</script>
|
|
1466
|
-
|
|
1467
|
-
</body>
|
|
1468
|
-
</html>
|