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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: bbdcb9dbd05373a00cbd0d38122c4022daefafb4b11cbd25977e57f7367ab38c
4
- data.tar.gz: 074e042a4176f0e1f7e61107b67dcfdbf54c24a3cc937925fa0e8f2b17f1735b
3
+ metadata.gz: 2430fe0dd6aee3aa8a1463025c1375a2fb999f9945aa4303a6d997911d022132
4
+ data.tar.gz: dcc784665e6b469959382171c77cd2bd2d781c18776ccac40827bfa7b7c6d69d
5
5
  SHA512:
6
- metadata.gz: daa319ca0955e68bf4f3180066b12a8a0dc58208e26b3176b86a4c9449a645c74c396b967bd9b76c732758637623c9b2e9ede3979522e649687be7106ba396cd
7
- data.tar.gz: 4d200fdbe66802694345f57d44c5b82cd0a94e149cf7c4c9cac7726f7423116cdb509bbd24adc946a2c8c834012f70153fddb89dc7f4f0e1d45fa1b37263bfa9
6
+ metadata.gz: f27411ee8b95de89de612e492ab083617f33e4ff170151772ef3bdfabbd126087f59419cc0a3baf868d584a581bff9c61dd2ca246a2c317dd1b2e3fdd748875d
7
+ data.tar.gz: d61f77703021262528d3b915b8ca563950fbd3fcf24fdc29a787856c4bce0dec61a3b7fda826e0b91812ec2245895bb4402255cb4b56b0be51dba7245e1f1aff
@@ -1,8 +1,21 @@
1
- export Dropdown from './uniform/dropdown';
2
- export Modal from './uniform/modal';
3
- export Select from './uniform/select';
4
- export FloatingLabelInput from './uniform/floating-label-input';
5
- export Resizer from './uniform/resizer';
6
- export Tooltip from './uniform/tooltip';
7
- export Popover from './uniform/popover';
8
- export {Checkbox, Radio, Toggle} from './uniform/checkbox';
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 {addClass, toggleClass, trigger, createElement} from 'dolla';
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
- addClass(this.el, this.constructor.CSSClass);
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
- toggleClass(this.el, 'checked', this.input.checked);
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, closest} from 'dolla';
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) || closest(e.target, 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, hasClass, addClass, removeClass, css, createElement } from 'dolla';
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
- addClass(this.el, 'uniformFloatingLabelInput');
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
- addClass(this.el, 'present');
55
+ this.el.classList.add('present');
56
56
  }
57
57
 
58
58
  blur (e) {
59
59
  if(this.input.value == ""){
60
- removeClass(this.el, 'present');
60
+ this.el.classList.remove('present');
61
61
  }
62
62
  }
63
63
  }
@@ -1,5 +1,5 @@
1
1
  import Component from './component';
2
- import {addClass, hasClass, removeClass, css, trigger} from 'dolla';
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
- addClass(this.el, 'uniformModal');
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
- addClass(this.overlay, 'uniformModal-overlay');
34
+ this.overlay.classList.add('uniformModal-overlay');
36
35
 
37
36
  this.blur = document.createElement('div');
38
- addClass(this.blur, 'uniformModal-blur');
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
- addClass(document.body, 'uniformModal-active');
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
- addClass(container, 'uniformModal-container');
67
- if (content instanceof Node) {
68
- container.appendChild(content);
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
- addClass(closeButton, 'uniformModal-close');
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) addClass(container, 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(hasClass(e.target, 'uniformModal-close'))
85
+ if(e.target.classList.contains('uniformModal-close'))
90
86
  this.close();
91
87
  }
92
88
 
93
89
  close () {
94
- removeClass(document.querySelectorAll('uniformModal-active'), 'uniformModal-active');
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 { closest, offset, outerWidth, outerHeight, removeClass, addClass } from 'dolla';
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 = closest(this.options.anchor, 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
- if(this.options.content instanceof Node)
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
- removeClass(this.el, 'popover-left popover-right popover-center popover-top popover-bottom');
158
- addClass(this.el, 'popover-' + topAlign);
159
- addClass(this.el, 'popover-' + leftAlign);
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, toggleClass } from 'dolla';
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
- toggleClass(this.el, css_class, width > value)
31
+ this.el.classList.toggle(css_class, width > value)
32
32
  } else if (attribute == "max-width") {
33
- toggleClass(this.el, css_class, width < value)
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, toggleClass, removeClass, isEmpty, trigger, hasClass, closest } from 'dolla';
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
- removeClass(e.target.offsetParent.querySelectorAll('.active'), 'active');
101
+ e.target.offsetParent.querySelectorAll('.active').forEach(el => el.classList.remove('active'));
102
102
  }
103
- toggleClass(e.target, 'active', makeActive);
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() == closest(e.target, '.uniformSelect-selection').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') || closest(e.target, '.uniformSelect-remove'))){
127
+ if(e && (e.target.matches('.uniformSelect-remove') || e.target.closest('.uniformSelect-remove'))){
128
128
  return;
129
129
  }
130
- toggleClass(this.el, 'active')
131
- if(hasClass(this.el, 'active')){
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
- toggleClass(button, 'active', option.selected);
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
- removeClass(this.popover.el.querySelectorAll('button.hide'), 'hide');
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
  }
@@ -16,9 +16,6 @@ a{
16
16
  &:hover{
17
17
  color: color('blue-60');
18
18
  }
19
- &:visited{
20
- color: #6738e4;
21
- }
22
19
  }
23
20
  h1,
24
21
  h2,
@@ -25,6 +25,8 @@
25
25
  padding: 0;
26
26
  margin: 0;
27
27
  list-style:none;
28
+ text-decoration: none;
29
+ color: inherit;
28
30
  }
29
31
 
30
32
  //----------------------------------------------------------------
@@ -31,22 +31,21 @@
31
31
  // Border Radius
32
32
  //----------------------------------------------------------------
33
33
  @include size-rule('.rounded') using ($size){ border-radius: $size;}
34
- @include responsive-rule('.rounded') { border-radius: 0.25em;}
35
- @include responsive-rule('.rounded-top') {
36
- border-top-right-radius: 0.25em;
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 responsive-rule('.rounded-bottom') {
40
- border-bottom-right-radius: 0.25em;
41
- border-bottom-left-radius: 0.25em;
38
+ @include size-rule('.rounded-bottom') using ($size){
39
+ border-bottom-right-radius: $size;
40
+ border-bottom-left-radius: $size;
42
41
  }
43
- @include responsive-rule('.rounded-left') {
44
- border-top-left-radius: 0.25em;
45
- border-bottom-left-radius: 0.25em;
42
+ @include size-rule('.rounded-left') using ($size){
43
+ border-top-left-radius: $size;
44
+ border-bottom-left-radius: $size;
46
45
  }
47
- @include responsive-rule('.rounded-right') {
48
- border-top-right-radius: 0.25em;
49
- border-bottom-right-radius: 0.25em;
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
@@ -0,0 +1,5 @@
1
+ @import 'uniform/mixins';
2
+
3
+ @include size-rule('.stroke') using ($size) {stroke-width: $size;}
4
+ @include color-rule('.stroke') using ($color) {stroke: $color;}
5
+ @include color-rule('.fill') using ($color) {fill: $color;}
@@ -74,12 +74,12 @@ $sizes: map-merge((
74
74
  '4px': 4px
75
75
  ),
76
76
  rounded: (
77
- '': 1rem,
77
+ '': 0.25rem,
78
78
  'none': 0,
79
- "xs": 0.8rem,
80
- "sm": 0.9rem,
81
- "lg": 1.2rem,
82
- "xl": 1.4rem,
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
- '': 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,
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": 0.8rem,
127
- "sm": 0.9rem,
128
- "lg": 1.2rem,
129
- "xl": 1.4rem,
130
- "2x": 2rem,
131
- "4x": 4rem,
132
- "8x": 8rem
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, ()));
@@ -1,3 +1,3 @@
1
1
  module Uniform
2
- VERSION = "3.0.0.beta2"
2
+ VERSION = "3.0.0.beta4"
3
3
  end
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.beta2
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-03-19 00:00:00.000000000 Z
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