@kamranbaylarov/one-select 1.1.0 → 1.2.0
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/README.md +979 -891
- package/css/one-select.min.css +41 -37
- package/js/one-select.js +1412 -1186
- package/js/one-select.min.js +1 -7
- package/package.json +41 -41
package/css/one-select.min.css
CHANGED
|
@@ -1,37 +1,41 @@
|
|
|
1
|
-
.one-select{position:static;display:inline-block}
|
|
2
|
-
.cms-wrapper{position:relative;width:300px;font-family:Arial,sans-serif;z-index:1}
|
|
3
|
-
.cms-wrapper.open{z-index:10000}
|
|
4
|
-
.cms-trigger{width:100%;padding:10px 15px;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:42px}
|
|
5
|
-
.cms-trigger:after{content:'▼';font-size:10px;transition:transform .3s}
|
|
6
|
-
.cms-wrapper.open .cms-trigger:after{transform:rotate(180deg)}
|
|
7
|
-
.cms-selected-text{color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-wrap:wrap;align-items:center;gap:4px;max-height:42px;overflow-y:auto}
|
|
8
|
-
.cms-selected-text.cms-placeholder{color:#999}
|
|
9
|
-
.cms-selected-text::-webkit-scrollbar{width:4px}
|
|
10
|
-
.cms-selected-text::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}
|
|
11
|
-
.cms-selected-text::-webkit-scrollbar-track{background:transparent}
|
|
12
|
-
.cms-badge{display:inline-flex;align-items:center;background:#3b82f6;color:#fff;padding:3px 8px;border-radius:12px;font-size:12px;gap:4px}
|
|
13
|
-
.cms-badge-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer;color:#fff;background:none;border:none;box-shadow:none;padding:0;font-size:14px;line-height:1;border-radius:50%}
|
|
14
|
-
.cms-badge-remove:hover{background:rgba(0,0,0,.1)}
|
|
15
|
-
.cms-dropdown{position:fixed;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;z-index:10000;max-height:300px;flex-direction:column;min-width:200px;top:0;left:0}
|
|
16
|
-
.cms-dropdown.open{display:flex}
|
|
17
|
-
.cms-search-wrapper{padding:10px;border-bottom:1px solid #eee;background:#fff;flex-shrink:0}
|
|
18
|
-
.cms-search-input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;outline:none;transition:border-color .2s}
|
|
19
|
-
.cms-search-input:focus{border-color:#007bff}
|
|
20
|
-
.cms-search-input::placeholder{color:#999}
|
|
21
|
-
.cms-options-container{flex:1;overflow-y:auto;padding:10px 0;min-height:50px;max-height:200px}
|
|
22
|
-
.cms-options-container.cms-loading{opacity:.5;pointer-events:none;position:relative}
|
|
23
|
-
.cms-options-container.cms-loading:after{content:'Loading...';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#999;font-size:14px}
|
|
24
|
-
.cms-option{display:flex;align-items:center;padding:8px 15px;cursor:pointer;transition:background .2s;color:#333}
|
|
25
|
-
.cms-option:hover{background:#f5f5f5}
|
|
26
|
-
.cms-option.select-all{border-bottom:1px solid #eee;font-weight:600;background:#f9f9f9}
|
|
27
|
-
.cms-option.selected label{font-weight:600;color:#007bff}
|
|
28
|
-
.cms-option input[type="checkbox"]{margin:0;margin-right:10px;cursor:pointer;width:16px;height:16px}
|
|
29
|
-
.cms-option.cms-hide-checkbox input[type="checkbox"]{display:none}
|
|
30
|
-
.cms-option.cms-hide-checkbox label{margin-left:0}
|
|
31
|
-
.cms-option label{cursor:pointer;margin:0;user-select:none;flex:1;color:inherit;text-align: left}
|
|
32
|
-
.cms-buttons{display:flex;border-top:1px solid #eee;padding:10px;gap:10px;background:#fff;flex-shrink:0}
|
|
33
|
-
.cms-btn{flex:1;padding:8px 15px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background .2s}
|
|
34
|
-
.cms-btn-ok{background:#007bff;color:#fff}
|
|
35
|
-
.cms-btn-ok:hover{background:#0056b3}
|
|
36
|
-
.cms-btn-cancel{background:#6c757d;color:#fff}
|
|
37
|
-
.cms-btn-cancel:hover{background:#545b62}
|
|
1
|
+
.one-select{position:static;display:inline-block}
|
|
2
|
+
.cms-wrapper{position:relative;width:300px;font-family:Arial,sans-serif;z-index:1}
|
|
3
|
+
.cms-wrapper.open{z-index:10000}
|
|
4
|
+
.cms-trigger{width:100%;padding:10px 15px;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:42px}
|
|
5
|
+
.cms-trigger:after{content:'▼';font-size:10px;transition:transform .3s}
|
|
6
|
+
.cms-wrapper.open .cms-trigger:after{transform:rotate(180deg)}
|
|
7
|
+
.cms-selected-text{color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-wrap:wrap;align-items:center;gap:4px;max-height:42px;overflow-y:auto}
|
|
8
|
+
.cms-selected-text.cms-placeholder{color:#999}
|
|
9
|
+
.cms-selected-text::-webkit-scrollbar{width:4px}
|
|
10
|
+
.cms-selected-text::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}
|
|
11
|
+
.cms-selected-text::-webkit-scrollbar-track{background:transparent}
|
|
12
|
+
.cms-badge{display:inline-flex;align-items:center;background:#3b82f6;color:#fff;padding:3px 8px;border-radius:12px;font-size:12px;gap:4px}
|
|
13
|
+
.cms-badge-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer;color:#fff;background:none;border:none;box-shadow:none;padding:0;font-size:14px;line-height:1;border-radius:50%}
|
|
14
|
+
.cms-badge-remove:hover{background:rgba(0,0,0,.1)}
|
|
15
|
+
.cms-dropdown{position:fixed;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;z-index:10000;max-height:300px;flex-direction:column;min-width:200px;top:0;left:0}
|
|
16
|
+
.cms-dropdown.open{display:flex}
|
|
17
|
+
.cms-search-wrapper{padding:10px;border-bottom:1px solid #eee;background:#fff;flex-shrink:0}
|
|
18
|
+
.cms-search-input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;outline:none;transition:border-color .2s}
|
|
19
|
+
.cms-search-input:focus{border-color:#007bff}
|
|
20
|
+
.cms-search-input::placeholder{color:#999}
|
|
21
|
+
.cms-options-container{flex:1;overflow-y:auto;padding:10px 0;min-height:50px;max-height:200px}
|
|
22
|
+
.cms-options-container.cms-loading{opacity:.5;pointer-events:none;position:relative}
|
|
23
|
+
.cms-options-container.cms-loading:after{content:'Loading...';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#999;font-size:14px}
|
|
24
|
+
.cms-option{display:flex;align-items:center;padding:8px 15px;cursor:pointer;transition:background .2s;color:#333}
|
|
25
|
+
.cms-option:hover{background:#f5f5f5}
|
|
26
|
+
.cms-option.select-all{border-bottom:1px solid #eee;font-weight:600;background:#f9f9f9}
|
|
27
|
+
.cms-option.selected label{font-weight:600;color:#007bff}
|
|
28
|
+
.cms-option input[type="checkbox"]{margin:0;margin-right:10px;cursor:pointer;width:16px;height:16px}
|
|
29
|
+
.cms-option.cms-hide-checkbox input[type="checkbox"]{display:none}
|
|
30
|
+
.cms-option.cms-hide-checkbox label{margin-left:0}
|
|
31
|
+
.cms-option label{cursor:pointer;margin:0;user-select:none;flex:1;color:inherit;text-align: left}
|
|
32
|
+
.cms-buttons{display:flex;border-top:1px solid #eee;padding:10px;gap:10px;background:#fff;flex-shrink:0}
|
|
33
|
+
.cms-btn{flex:1;padding:8px 15px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background .2s}
|
|
34
|
+
.cms-btn-ok{background:#007bff;color:#fff}
|
|
35
|
+
.cms-btn-ok:hover{background:#0056b3}
|
|
36
|
+
.cms-btn-cancel{background:#6c757d;color:#fff}
|
|
37
|
+
.cms-btn-cancel:hover{background:#545b62}
|
|
38
|
+
.cms-infinity-preloader{display:none;padding:15px;text-align:center}
|
|
39
|
+
.cms-infinity-preloader.cms-visible{display:block}
|
|
40
|
+
.cms-spinner{width:24px;height:24px;margin:0 auto;border:3px solid #f3f3f3;border-top:3px solid #3498db;border-radius:50%;animation:cms-spin 1s linear infinite}
|
|
41
|
+
@keyframes cms-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
|