uniform-ui 3.0.0.beta2 → 3.0.0.beta4
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.
- checksums.yaml +4 -4
- data/lib/assets/javascripts/uniform.js +21 -8
- data/lib/assets/javascripts/uniform/checkbox.js +3 -3
- data/lib/assets/javascripts/uniform/component.js +2 -2
- data/lib/assets/javascripts/uniform/floating-label-input.js +4 -4
- data/lib/assets/javascripts/uniform/modal.js +13 -17
- data/lib/assets/javascripts/uniform/popover.js +6 -9
- data/lib/assets/javascripts/uniform/resizer.js +3 -3
- data/lib/assets/javascripts/uniform/select.js +9 -9
- data/lib/assets/stylesheets/uniform/defaults.scss +0 -3
- data/lib/assets/stylesheets/uniform/utilities.scss +2 -0
- data/lib/assets/stylesheets/uniform/utilities/borders.scss +12 -13
- data/lib/assets/stylesheets/uniform/utilities/spacing.scss +14 -14
- data/lib/assets/stylesheets/uniform/utilities/svg.scss +5 -0
- data/lib/assets/stylesheets/uniform/variables.scss +31 -22
- data/lib/uniform/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2430fe0dd6aee3aa8a1463025c1375a2fb999f9945aa4303a6d997911d022132
|
4
|
+
data.tar.gz: dcc784665e6b469959382171c77cd2bd2d781c18776ccac40827bfa7b7c6d69d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f27411ee8b95de89de612e492ab083617f33e4ff170151772ef3bdfabbd126087f59419cc0a3baf868d584a581bff9c61dd2ca246a2c317dd1b2e3fdd748875d
|
7
|
+
data.tar.gz: d61f77703021262528d3b915b8ca563950fbd3fcf24fdc29a787856c4bce0dec61a3b7fda826e0b91812ec2245895bb4402255cb4b56b0be51dba7245e1f1aff
|
@@ -1,8 +1,21 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
1
|
+
import Dropdown from './uniform/dropdown';
|
2
|
+
import Modal from './uniform/modal';
|
3
|
+
import Select from './uniform/select';
|
4
|
+
import FloatingLabelInput from './uniform/floating-label-input';
|
5
|
+
import Resizer from './uniform/resizer';
|
6
|
+
import Tooltip from './uniform/tooltip';
|
7
|
+
import Popover from './uniform/popover';
|
8
|
+
import {Checkbox, Radio, Toggle} from './uniform/checkbox';
|
9
|
+
|
10
|
+
export {
|
11
|
+
Dropdown,
|
12
|
+
Modal,
|
13
|
+
Select,
|
14
|
+
FloatingLabelInput,
|
15
|
+
Resizer,
|
16
|
+
Tooltip,
|
17
|
+
Popover,
|
18
|
+
Checkbox,
|
19
|
+
Radio,
|
20
|
+
Toggle
|
21
|
+
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import Component from './component';
|
2
|
-
import {
|
2
|
+
import { trigger, createElement} from 'dolla';
|
3
3
|
|
4
4
|
export class Checkbox extends Component {
|
5
5
|
static CSSClass = "uniformCheckbox";
|
@@ -15,7 +15,7 @@ export class Checkbox extends Component {
|
|
15
15
|
}
|
16
16
|
|
17
17
|
if(!options.tabindex) this.el.tabIndex = 0;
|
18
|
-
|
18
|
+
this.el.classList.add(this.constructor.CSSClass);
|
19
19
|
|
20
20
|
this.listenTo(this.el, 'click', this.click);
|
21
21
|
this.listenTo(this.input, 'change', this.change);
|
@@ -38,7 +38,7 @@ export class Checkbox extends Component {
|
|
38
38
|
}
|
39
39
|
|
40
40
|
change () {
|
41
|
-
|
41
|
+
this.el.classList.toggle('checked', this.input.checked);
|
42
42
|
}
|
43
43
|
|
44
44
|
click (e) {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {hasClass, HTML_ATTRIBUTES, createElement
|
1
|
+
import {hasClass, HTML_ATTRIBUTES, createElement} from 'dolla';
|
2
2
|
|
3
3
|
function uniqueId(prefix){
|
4
4
|
window.idCounter || (window.idCounter = 0);
|
@@ -74,7 +74,7 @@ export default class Component {
|
|
74
74
|
node,
|
75
75
|
event,
|
76
76
|
function(e){
|
77
|
-
if(!scope || (e.target.matches(scope) ||
|
77
|
+
if(!scope || (e.target.matches(scope) || e.target.closest(scope))) {
|
78
78
|
return callback.bind(context)(...arguments);
|
79
79
|
}
|
80
80
|
}.bind(context)
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import Component from './component';
|
2
|
-
import { isVisible, isFocus,
|
2
|
+
import { isVisible, isFocus, css, createElement } from 'dolla';
|
3
3
|
|
4
4
|
export default class FloatingLabel extends Component {
|
5
5
|
|
@@ -17,7 +17,7 @@ export default class FloatingLabel extends Component {
|
|
17
17
|
});
|
18
18
|
this.input.setAttribute('aria-label', options.label);
|
19
19
|
|
20
|
-
|
20
|
+
this.el.classList.add('uniformFloatingLabelInput');
|
21
21
|
|
22
22
|
this.listenTo(this.input, 'focus', this.focus);
|
23
23
|
this.listenTo(this.input, 'blur', this.blur);
|
@@ -52,12 +52,12 @@ export default class FloatingLabel extends Component {
|
|
52
52
|
}
|
53
53
|
|
54
54
|
focus (e) {
|
55
|
-
|
55
|
+
this.el.classList.add('present');
|
56
56
|
}
|
57
57
|
|
58
58
|
blur (e) {
|
59
59
|
if(this.input.value == ""){
|
60
|
-
|
60
|
+
this.el.classList.remove('present');
|
61
61
|
}
|
62
62
|
}
|
63
63
|
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import Component from './component';
|
2
|
-
import {
|
2
|
+
import {css, trigger, append} from 'dolla';
|
3
3
|
|
4
4
|
/* UniformModal.initialize
|
5
5
|
Options
|
@@ -16,7 +16,7 @@ export default class Modal extends Component {
|
|
16
16
|
this.content = options.content;
|
17
17
|
this.el.removeAttribute('content');
|
18
18
|
|
19
|
-
|
19
|
+
this.el.classList.add('uniformModal');
|
20
20
|
this.listenTo(document, 'keyup', this.keyup);
|
21
21
|
this.listenTo(this.el, 'click', this.checkCloseButton);
|
22
22
|
}
|
@@ -28,14 +28,13 @@ export default class Modal extends Component {
|
|
28
28
|
|
29
29
|
render () {
|
30
30
|
var that = this;
|
31
|
-
var content = typeof this.content == 'function' ? this.content() : this.content;
|
32
31
|
|
33
32
|
this.highest_z_index = 0;
|
34
33
|
this.overlay = document.createElement('div');
|
35
|
-
|
34
|
+
this.overlay.classList.add('uniformModal-overlay');
|
36
35
|
|
37
36
|
this.blur = document.createElement('div');
|
38
|
-
|
37
|
+
this.blur.classList.add('uniformModal-blur');
|
39
38
|
|
40
39
|
this.original_scroll = window.scrollY;
|
41
40
|
this.blur.style.top = 0 - this.original_scroll + "px";
|
@@ -58,40 +57,37 @@ export default class Modal extends Component {
|
|
58
57
|
}
|
59
58
|
}
|
60
59
|
|
61
|
-
|
60
|
+
document.body.classList.add('uniformModal-active');
|
62
61
|
document.body.appendChild(this.blur);
|
63
62
|
document.body.appendChild(this.el);
|
64
63
|
|
65
64
|
var container = document.createElement('div');
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
} else {
|
70
|
-
container.innerHTML = content;
|
71
|
-
}
|
65
|
+
container.classList.add('uniformModal-container');
|
66
|
+
|
67
|
+
append(container, this.content);
|
72
68
|
|
73
69
|
var closeButton = document.createElement('div');
|
74
|
-
|
70
|
+
closeButton.classList.add('uniformModal-close');
|
75
71
|
this.el.appendChild(closeButton);
|
76
72
|
|
77
73
|
this.el.style.top = window.scrollY;
|
78
74
|
this.listenTo(this.overlay, 'click', this.close);
|
79
75
|
this.el.appendChild(container);
|
80
76
|
|
81
|
-
if (this.options.klass)
|
82
|
-
if (content.innerHTML) trigger(content, 'rendered');
|
77
|
+
if (this.options.klass) container.classList.add(this.options.klass);
|
78
|
+
if (this.content.innerHTML) trigger(this.content, 'rendered');
|
83
79
|
this.trigger('rendered');
|
84
80
|
|
85
81
|
return this;
|
86
82
|
}
|
87
83
|
|
88
84
|
checkCloseButton (e) {
|
89
|
-
if(
|
85
|
+
if(e.target.classList.contains('uniformModal-close'))
|
90
86
|
this.close();
|
91
87
|
}
|
92
88
|
|
93
89
|
close () {
|
94
|
-
|
90
|
+
document.querySelectorAll('uniformModal-active').forEach(el => el.classList.remove('uniformModal-active'));
|
95
91
|
var elements = this.blur.children;
|
96
92
|
var elementCount = elements.length
|
97
93
|
for(var i=0; i < elementCount; i++){
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import Component from './component';
|
2
|
-
import {
|
2
|
+
import { offset, outerWidth, outerHeight, append } from 'dolla';
|
3
3
|
|
4
4
|
/*
|
5
5
|
Requirements
|
@@ -38,7 +38,7 @@ export default class Popover extends Component {
|
|
38
38
|
});
|
39
39
|
|
40
40
|
if(typeof this.options.container == "string"){
|
41
|
-
this.options.container =
|
41
|
+
this.options.container = this.options.anchor.closest(this.options.container)
|
42
42
|
}
|
43
43
|
this.options.container = this.options.container || document.body
|
44
44
|
|
@@ -49,10 +49,7 @@ export default class Popover extends Component {
|
|
49
49
|
this.el.style.position = 'absolute';
|
50
50
|
this.el.style.zIndex = this.options.zIndex;
|
51
51
|
|
52
|
-
|
53
|
-
this.el.appendChild(this.options.content);
|
54
|
-
else
|
55
|
-
this.el.innerHTML = this.options.content;
|
52
|
+
append(this.el, this.options.content)
|
56
53
|
|
57
54
|
this.options.container.appendChild(this.el);
|
58
55
|
this.resize();
|
@@ -154,9 +151,9 @@ export default class Popover extends Component {
|
|
154
151
|
this.el.style.top = null;
|
155
152
|
this.el.style.bottom = null;
|
156
153
|
this.el.style.transform = null;
|
157
|
-
|
158
|
-
|
159
|
-
|
154
|
+
this.el.classList.remove('popover-left', 'popover-right', 'popover-center', 'popover-top', 'popover-bottom');
|
155
|
+
this.el.classList.add('popover-' + topAlign);
|
156
|
+
this.el.classList.add('popover-' + leftAlign);
|
160
157
|
Object.keys(position).forEach(function(key){
|
161
158
|
this.el.style[key] = position[key] + (key != "transform" ? "px" : "");
|
162
159
|
}, this);
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import Component from './component';
|
2
|
-
import { trigger
|
2
|
+
import { trigger } from 'dolla';
|
3
3
|
|
4
4
|
export default class Resizer extends Component {
|
5
5
|
|
@@ -28,9 +28,9 @@ export default class Resizer extends Component {
|
|
28
28
|
}
|
29
29
|
|
30
30
|
if(attribute == "min-width") {
|
31
|
-
|
31
|
+
this.el.classList.toggle(css_class, width > value)
|
32
32
|
} else if (attribute == "max-width") {
|
33
|
-
|
33
|
+
this.el.classList.toggle(css_class, width < value)
|
34
34
|
} else {
|
35
35
|
throw "unsupported media feature"
|
36
36
|
}
|
@@ -2,7 +2,7 @@ import Component from './component';
|
|
2
2
|
import Popover from './popover';
|
3
3
|
import Modal from './modal';
|
4
4
|
import { check as checkIcon, arrow_down as arrowIcon, x as xIcon } from './icons';
|
5
|
-
import { createElement, HTML_ATTRIBUTES, filter, css,
|
5
|
+
import { createElement, HTML_ATTRIBUTES, filter, css, isEmpty, trigger } from 'dolla';
|
6
6
|
|
7
7
|
/*
|
8
8
|
options: array of html options, each item can be string | array | object
|
@@ -98,9 +98,9 @@ export default class Select extends Component {
|
|
98
98
|
selectOption (e) {
|
99
99
|
const makeActive = !e.target.option.selected;
|
100
100
|
if (!this.options.multiple && makeActive) {
|
101
|
-
|
101
|
+
e.target.offsetParent.querySelectorAll('.active').forEach(el => el.classList.remove('active'));
|
102
102
|
}
|
103
|
-
|
103
|
+
e.target.classList.toggle('active', makeActive);
|
104
104
|
e.target.option.selected = makeActive;
|
105
105
|
|
106
106
|
if (!this.options.multiple) {
|
@@ -114,7 +114,7 @@ export default class Select extends Component {
|
|
114
114
|
e.preventDefault();
|
115
115
|
e.stopPropagation();
|
116
116
|
var option = filter(this.select.querySelectorAll("option"), function(el){
|
117
|
-
return el.innerText.trim() ==
|
117
|
+
return el.innerText.trim() == e.target.closest('.uniformSelect-selection').innerText.trim();
|
118
118
|
})[0];
|
119
119
|
if(!option) return;
|
120
120
|
option.selected = false;
|
@@ -124,11 +124,11 @@ export default class Select extends Component {
|
|
124
124
|
}
|
125
125
|
|
126
126
|
toggleOptions (e) {
|
127
|
-
if(e && (e.target.matches('.uniformSelect-remove') ||
|
127
|
+
if(e && (e.target.matches('.uniformSelect-remove') || e.target.closest('.uniformSelect-remove'))){
|
128
128
|
return;
|
129
129
|
}
|
130
|
-
|
131
|
-
if(
|
130
|
+
this.el.classList.toggle('active')
|
131
|
+
if(this.el.contains('active')){
|
132
132
|
this.renderOptions()
|
133
133
|
} else {
|
134
134
|
this.removeOptions()
|
@@ -152,7 +152,7 @@ export default class Select extends Component {
|
|
152
152
|
button.textContent = option.textContent;
|
153
153
|
button.value = option.value;
|
154
154
|
if (button.textContent == "") button.innerHTML = "<span class='text-italic text-muted'>None</span>";
|
155
|
-
|
155
|
+
button.classList.toggle('active', option.selected);
|
156
156
|
|
157
157
|
console.log(this.options.limit, index);
|
158
158
|
if (this.options.limit && (index + 1) > this.options.limit) {
|
@@ -211,7 +211,7 @@ export default class Select extends Component {
|
|
211
211
|
e.preventDefault();
|
212
212
|
e.stopPropagation();
|
213
213
|
if(!this.popover) return;
|
214
|
-
|
214
|
+
this.popover.el.querySelectorAll('button.hide').forEach(el => el.classList.remove('hide'));
|
215
215
|
var button = this.popover.el.querySelector('.uniformSelect-show-all');
|
216
216
|
button.parentNode.removeChild(button);
|
217
217
|
}
|
@@ -31,22 +31,21 @@
|
|
31
31
|
// Border Radius
|
32
32
|
//----------------------------------------------------------------
|
33
33
|
@include size-rule('.rounded') using ($size){ border-radius: $size;}
|
34
|
-
@include
|
35
|
-
|
36
|
-
border-top-
|
37
|
-
border-top-left-radius: 0.25em;
|
34
|
+
@include size-rule('.rounded-top') using ($size){
|
35
|
+
border-top-right-radius: $size;
|
36
|
+
border-top-left-radius: $size;
|
38
37
|
}
|
39
|
-
@include
|
40
|
-
border-bottom-right-radius:
|
41
|
-
border-bottom-left-radius:
|
38
|
+
@include size-rule('.rounded-bottom') using ($size){
|
39
|
+
border-bottom-right-radius: $size;
|
40
|
+
border-bottom-left-radius: $size;
|
42
41
|
}
|
43
|
-
@include
|
44
|
-
border-top-left-radius:
|
45
|
-
border-bottom-left-radius:
|
42
|
+
@include size-rule('.rounded-left') using ($size){
|
43
|
+
border-top-left-radius: $size;
|
44
|
+
border-bottom-left-radius: $size;
|
46
45
|
}
|
47
|
-
@include
|
48
|
-
border-top-right-radius:
|
49
|
-
border-bottom-right-radius:
|
46
|
+
@include size-rule('.rounded-right') using ($size){
|
47
|
+
border-top-right-radius: $size;
|
48
|
+
border-bottom-right-radius: $size;
|
50
49
|
}
|
51
50
|
|
52
51
|
@include responsive-rule('.square') { border-radius: 0;}
|
@@ -1,5 +1,19 @@
|
|
1
1
|
@import 'uniform/mixins';
|
2
2
|
|
3
|
+
//----------------------------------------------------------------
|
4
|
+
// Spacing
|
5
|
+
//----------------------------------------------------------------
|
6
|
+
@include size-rule('.space-h') using ($size) {
|
7
|
+
& > * + * {
|
8
|
+
margin-left: $size;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
@include size-rule('.space-v') using ($size) {
|
12
|
+
& > * + * {
|
13
|
+
margin-top: $size
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
3
17
|
//----------------------------------------------------------------
|
4
18
|
// Margin
|
5
19
|
//----------------------------------------------------------------
|
@@ -36,20 +50,6 @@
|
|
36
50
|
}
|
37
51
|
|
38
52
|
|
39
|
-
//----------------------------------------------------------------
|
40
|
-
// Spacing
|
41
|
-
//----------------------------------------------------------------
|
42
|
-
@include size-rule('.space-h') using ($size) {
|
43
|
-
& > * + * {
|
44
|
-
margin-left: $size;
|
45
|
-
}
|
46
|
-
}
|
47
|
-
@include size-rule('.space-v') using ($size) {
|
48
|
-
& > * + * {
|
49
|
-
margin-top: $size
|
50
|
-
}
|
51
|
-
}
|
52
|
-
|
53
53
|
|
54
54
|
//----------------------------------------------------------------
|
55
55
|
// Pad
|
@@ -74,12 +74,12 @@ $sizes: map-merge((
|
|
74
74
|
'4px': 4px
|
75
75
|
),
|
76
76
|
rounded: (
|
77
|
-
'':
|
77
|
+
'': 0.25rem,
|
78
78
|
'none': 0,
|
79
|
-
"xs": 0.
|
80
|
-
"sm": 0.
|
81
|
-
"lg":
|
82
|
-
"xl":
|
79
|
+
"xs": 0.1rem,
|
80
|
+
"sm": 0.2rem,
|
81
|
+
"lg": 0.5rem,
|
82
|
+
"xl": 1rem,
|
83
83
|
),
|
84
84
|
margin: (
|
85
85
|
'': 1rem,
|
@@ -110,25 +110,34 @@ $sizes: map-merge((
|
|
110
110
|
"xl": 1.4rem,
|
111
111
|
),
|
112
112
|
pad: (
|
113
|
-
'':
|
114
|
-
'none': 0,
|
115
|
-
"1\\/4x":
|
116
|
-
"1\\/2x":
|
117
|
-
"3\\/4x":
|
118
|
-
"xs":
|
119
|
-
"sm":
|
120
|
-
"lg":
|
121
|
-
"xl":
|
122
|
-
"2x":
|
113
|
+
'' : 1rem,
|
114
|
+
'none' : 0,
|
115
|
+
"1\\/4x" : 0.25rem,
|
116
|
+
"1\\/2x" : 0.5rem,
|
117
|
+
"3\\/4x" : 0.75rem,
|
118
|
+
"xs" : 0.8rem,
|
119
|
+
"sm" : 0.9rem,
|
120
|
+
"lg" : 1.2rem,
|
121
|
+
"xl" : 1.4rem,
|
122
|
+
"2x" : 2rem,
|
123
|
+
|
123
124
|
),
|
124
125
|
text: (
|
125
126
|
'': 1rem,
|
126
|
-
"xs":
|
127
|
-
"sm":
|
128
|
-
"lg":
|
129
|
-
"xl":
|
130
|
-
"2x":
|
131
|
-
"4x":
|
132
|
-
"8x":
|
127
|
+
"xs" : 0.8rem,
|
128
|
+
"sm" : 0.9rem,
|
129
|
+
"lg" : 1.2rem,
|
130
|
+
"xl" : 1.4rem,
|
131
|
+
"2x" : 2rem,
|
132
|
+
"4x" : 4rem,
|
133
|
+
"8x" : 8rem
|
134
|
+
|
135
|
+
),
|
136
|
+
stroke: (
|
137
|
+
"sm" : 0.5px,
|
138
|
+
"md" : 1px,
|
139
|
+
"lg" : 1.5px,
|
140
|
+
"2x" : 2px,
|
141
|
+
"3x" : 3px
|
133
142
|
)
|
134
143
|
), if(variable-exists('sizes'), $sizes, ()));
|
data/lib/uniform/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: uniform-ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 3.0.0.
|
4
|
+
version: 3.0.0.beta4
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Ben Ehmke
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2021-
|
11
|
+
date: 2021-04-01 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|
@@ -86,6 +86,7 @@ files:
|
|
86
86
|
- lib/assets/stylesheets/uniform/utilities/position.scss
|
87
87
|
- lib/assets/stylesheets/uniform/utilities/sizing.scss
|
88
88
|
- lib/assets/stylesheets/uniform/utilities/spacing.scss
|
89
|
+
- lib/assets/stylesheets/uniform/utilities/svg.scss
|
89
90
|
- lib/assets/stylesheets/uniform/utilities/text.scss
|
90
91
|
- lib/assets/stylesheets/uniform/variables.scss
|
91
92
|
- lib/uniform.rb
|