@kizmann/nano-ui 0.9.0 → 0.9.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/demos/overview.html +4 -1
- package/demos/select.html +164 -0
- package/dist/nano-ui.css +1 -1
- package/dist/nano-ui.js +2 -2
- package/dist/nano-ui.js.map +1 -1
- package/package.json +1 -1
- package/src/popover/src/popover/popover.scss +4 -0
- package/src/scrollbar/src/scrollbar/scrollbar.next.js +21 -1
- package/src/select/src/select/select.js +191 -78
- package/src/select/src/select/select.scss +4 -0
- package/src/select/src/select-option/select-option.js +6 -2
- package/src/virtualscroller/src/virtualscroller/virtualscroller.beta.js +12 -2
package/demos/overview.html
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<link rel="stylesheet" href="../dist/nano-ui.css">
|
|
13
13
|
<link id="theme" rel="stylesheet" href="../dist/themes/light.css">
|
|
14
14
|
|
|
15
|
-
<link rel="stylesheet" href="../
|
|
15
|
+
<link rel="stylesheet" href="../style.css">
|
|
16
16
|
|
|
17
17
|
<style>
|
|
18
18
|
|
|
@@ -390,6 +390,9 @@
|
|
|
390
390
|
</div>
|
|
391
391
|
|
|
392
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>
|
|
393
396
|
<div class="col--1-1 col--1-3@md">
|
|
394
397
|
<n-select v-bind="n_select" v-model="foobar" :multiple="true" type="primary" :options="icons"></n-select>
|
|
395
398
|
</div>
|
|
@@ -0,0 +1,164 @@
|
|
|
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 rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
|
|
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
|
+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.prod.js"></script> -->
|
|
16
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
|
|
17
|
+
<script src="https://unpkg.com/vue@3.4.6"></script>
|
|
18
|
+
<!-- <script src="../node_modules/pico-js/dist/pico-js.js"></script> -->
|
|
19
|
+
<script src="https://vankizmann.github.io/pico-js/dist/pico-js.js"></script>
|
|
20
|
+
<script src="../dist/nano-ui.js"></script>
|
|
21
|
+
|
|
22
|
+
<link rel="stylesheet" href="./style.css">
|
|
23
|
+
|
|
24
|
+
<style>
|
|
25
|
+
|
|
26
|
+
body {
|
|
27
|
+
font-family: 'Helvetica', 'Roboto', 'Arial', sans-serif;
|
|
28
|
+
font-size: 14px;
|
|
29
|
+
height: 100%;
|
|
30
|
+
overflow-x: hidden;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
#app {
|
|
34
|
+
overflow-x: hidden;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.app-scrollbar {
|
|
38
|
+
width: 100vw;
|
|
39
|
+
height: 100vh;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.app-container {
|
|
43
|
+
max-width: 1440px;
|
|
44
|
+
margin: 0 auto;
|
|
45
|
+
padding: 20px 30px 40px 30px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.app-options {
|
|
49
|
+
border-bottom: 1px solid #eee;
|
|
50
|
+
margin-bottom: 20px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
h2 {
|
|
54
|
+
font-size: 32px;
|
|
55
|
+
font-weight: bold;
|
|
56
|
+
padding-bottom: 10px;
|
|
57
|
+
margin: 50px 0 15px;
|
|
58
|
+
border-bottom: 1px solid #eee;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
</style>
|
|
62
|
+
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
|
|
66
|
+
<div id="app">
|
|
67
|
+
<div class="app-container">
|
|
68
|
+
|
|
69
|
+
<h2>NSelect</h2>
|
|
70
|
+
|
|
71
|
+
<div class="grid grid--row grid--wrap grid--10-10">
|
|
72
|
+
<div class="col--auto">
|
|
73
|
+
<n-select type="secondary" :multiple="true" :options="virtualData" :lazy="true"></n-select>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<script>
|
|
81
|
+
(function (nano) {
|
|
82
|
+
|
|
83
|
+
'use strict';
|
|
84
|
+
|
|
85
|
+
pi.Dom.ready(function () {
|
|
86
|
+
|
|
87
|
+
let data = {};
|
|
88
|
+
|
|
89
|
+
data.sizes = {
|
|
90
|
+
xs: 'XS',
|
|
91
|
+
sm: 'SM',
|
|
92
|
+
md: 'MD',
|
|
93
|
+
lg: 'LG'
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
data.types = {
|
|
97
|
+
primary: 'Primary',
|
|
98
|
+
secondary: 'Secondary',
|
|
99
|
+
success: 'Success',
|
|
100
|
+
warning: 'Warning',
|
|
101
|
+
danger: 'Danger',
|
|
102
|
+
info: 'Info'
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
data.modals = {
|
|
106
|
+
default: 'Default',
|
|
107
|
+
preview: 'Preview',
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
let itemGenerator = function (count = 100, index = 0) {
|
|
111
|
+
|
|
112
|
+
let list = {};
|
|
113
|
+
|
|
114
|
+
pi.Arr.each(pi.Arr.make(count), function () {
|
|
115
|
+
return list[pi.UUID()] = `Item ${index ++}`;
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
return list;
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
data.virtualData = itemGenerator(1000);
|
|
122
|
+
|
|
123
|
+
let methods = {};
|
|
124
|
+
|
|
125
|
+
methods.log = function (val) {
|
|
126
|
+
console.log(val || 'Log fired');
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
methods.notify = function (type) {
|
|
130
|
+
this.Notify('Lorem ipsum dolore', type);
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
var config = {
|
|
134
|
+
data: function () {
|
|
135
|
+
|
|
136
|
+
this.icons = pi.Obj.assign(nano.Icons, {
|
|
137
|
+
ghost: 'fa fa-ghost'
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
data.demoIcons = pi.Arr.reduce(pi.Obj.values(nano.Icons), function (merge, icon) {
|
|
141
|
+
return pi.Obj.assign(merge, { [icon]: icon });
|
|
142
|
+
}, {});
|
|
143
|
+
|
|
144
|
+
return data;
|
|
145
|
+
},
|
|
146
|
+
methods: methods
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
window.App = Vue.createApp(config);
|
|
150
|
+
|
|
151
|
+
window.App.config.devtools = true;
|
|
152
|
+
|
|
153
|
+
window.App.use(function (App) {
|
|
154
|
+
nano.Install(App);
|
|
155
|
+
});
|
|
156
|
+
|
|
157
|
+
window.App.mount('#app');
|
|
158
|
+
window.DEBUG_NDLIST = true;
|
|
159
|
+
});
|
|
160
|
+
|
|
161
|
+
})(window.nano);
|
|
162
|
+
</script>
|
|
163
|
+
</body>
|
|
164
|
+
</html>
|