@steroidsjs/bootstrap 3.0.5 → 3.0.9

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.
Files changed (14) hide show
  1. package/content/CalendarSystem/AsideCalendars/AsideCalendars.scss +2 -2
  2. package/content/CalendarSystem/AsideHeader/AsideHeader.scss +5 -5
  3. package/content/CalendarSystem/ContentHeader/ContentHeader.scss +3 -6
  4. package/content/CalendarSystem/MonthGrid/MonthGrid.scss +2 -2
  5. package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.scss +3 -3
  6. package/content/CalendarSystem/WeekGrid/WeekGrid.scss +1 -1
  7. package/form/CheckboxListField/CheckboxListFieldView.js +2 -2
  8. package/form/CheckboxTreeField/CheckboxTreeFieldView.js +5 -2
  9. package/form/InputField/InputFieldView.js +2 -3
  10. package/form/InputField/InputFieldView.scss +18 -17
  11. package/form/RadioField/RadioFieldView.js +1 -1
  12. package/form/RadioListField/RadioListFieldView.js +1 -1
  13. package/nav/TreeItem/TreeItemView.js +1 -6
  14. package/package.json +2 -2
package/content/CalendarSystem/AsideCalendars/AsideCalendars.scss CHANGED
@@ -77,9 +77,9 @@ $calendar-system-separator-color: var(--calendar-system-separator-color);
77
77
  padding-top: 12px;
78
78
 
79
79
  p {
80
- font-size: variables.$font-size-16;
80
+ font-size: variables.$font-size-base;
81
81
  font-weight: variables.$font-weight-lg;
82
- line-height: variables.$line-height-22;
82
+ line-height: variables.$line-height-xl;
83
83
  }
84
84
  }
85
85
  }
package/content/CalendarSystem/AsideHeader/AsideHeader.scss CHANGED
@@ -4,11 +4,11 @@
4
4
  display: flex;
5
5
  align-items: center;
6
6
  justify-content: space-between;
7
-
7
+
8
8
  &__title {
9
- font-size: variables.$font-size-24;
9
+ font-size: variables.$font-size-xl;
10
10
  font-weight: variables.$font-weight-lg;
11
- line-height: variables.$line-height-32;
11
+ line-height: variables.$line-height-xl;
12
12
  color: variables.$text-color;
13
13
  margin-bottom: 0;
14
14
  }
@@ -24,9 +24,9 @@
24
24
  }
25
25
 
26
26
  &__text {
27
- font-size: variables.$font-size-14;
27
+ font-size: variables.$font-size-sm;
28
28
  font-weight: variables.$font-weight-sm;
29
- line-height: variables.$line-height-24;
29
+ line-height: variables.$line-height-lg;
30
30
  }
31
31
 
32
32
  &__icon {
package/content/CalendarSystem/ContentHeader/ContentHeader.scss CHANGED
@@ -19,9 +19,9 @@ $calendar-system-caption-arrow-background-color: var(--calendar-system-caption-a
19
19
 
20
20
  &__month {
21
21
  display: inline-block;
22
- font-size: variables.$font-size-24;
22
+ font-size: variables.$font-size-xl;
23
23
  font-weight: variables.$font-weight-lg;
24
- line-height: variables.$line-height-32;
24
+ line-height: variables.$line-height-xl;
25
25
  margin-right: 93px;
26
26
  margin-bottom: 0;
27
27
  width: 190px;
@@ -46,12 +46,9 @@ $calendar-system-caption-arrow-background-color: var(--calendar-system-caption-a
46
46
  }
47
47
  }
48
48
 
49
- &-icon {
49
+ &-icon {
50
50
  pointer-events: none;
51
51
  }
52
52
  }
53
53
  }
54
-
55
- &__measures {
56
- }
57
54
  }
package/content/CalendarSystem/MonthGrid/MonthGrid.scss CHANGED
@@ -32,9 +32,9 @@ $month-day-color-text: var(--month-day-color-text);
32
32
 
33
33
  &-day {
34
34
  color: $month-day-color-text;
35
- font-size: variables.$font-size-14;
35
+ font-size: variables.$font-size-sm;
36
36
  font-weight: variables.$font-weight-md;
37
- line-height: variables.$line-height-18;
37
+ line-height: variables.$line-height-sm;
38
38
  padding: 8px 10px;
39
39
  }
40
40
  }
package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.scss CHANGED
@@ -22,7 +22,7 @@ $month-day-out-of-range-color-text: var(--month-day-out-of-range-color-text);
22
22
 
23
23
  .MonthDay {
24
24
  $dayRoot: &;
25
- padding: 4px 8px 0px 8px;
25
+ padding: 4px 8px 0 8px;
26
26
  min-height: 80px;
27
27
  border-radius: variables.$radius-large;
28
28
  background-color: $month-day-background-color;
@@ -37,9 +37,9 @@ $month-day-out-of-range-color-text: var(--month-day-out-of-range-color-text);
37
37
  display: inline-flex;
38
38
  justify-content: center;
39
39
  align-items: center;
40
- font-size: variables.$font-size-14;
40
+ font-size: variables.$font-size-sm;
41
41
  font-weight: variables.$font-weight-sm;
42
- line-height: variables.$line-height-18;
42
+ line-height: variables.$line-height-sm;
43
43
  color: $month-day-color-text;
44
44
  width: 24px;
45
45
  height: 24px;
package/content/CalendarSystem/WeekGrid/WeekGrid.scss CHANGED
@@ -44,7 +44,7 @@ $calendar-today-border-style: 1px solid $calendar-system-today-border-color;
44
44
  height: 24px;
45
45
  border-radius: variables.$radius-small;
46
46
  background-color: $calendar-system-time-background-color;
47
- color: variables.$custom-text-color-base;
47
+ color: var(--custom-text-color-base);
48
48
  font-size: variables.$font-size-xs;
49
49
  font-weight: variables.$font-weight-sm;
50
50
  line-height: variables.$line-height-xs;
package/form/CheckboxListField/CheckboxListFieldView.js CHANGED
@@ -35,7 +35,7 @@ function CheckboxListFieldView(props) {
35
35
  var prefix = (0, useUniqueId_1["default"])('checkbox');
36
36
  return (React.createElement("div", { className: bem(bem.block((_a = {},
37
37
  _a["".concat(props.orientation)] = !!props.orientation,
38
- _a))) }, props.items.map(function (checkbox, checkboxIndex) { return props.renderCheckbox({
38
+ _a)), props.className), style: props.style }, props.items.map(function (checkbox, checkboxIndex) { return props.renderCheckbox({
39
39
  key: checkboxIndex,
40
40
  id: "".concat(prefix, "_").concat(checkbox.id),
41
41
  label: checkbox.label,
@@ -46,7 +46,7 @@ function CheckboxListFieldView(props) {
46
46
  onChange: function () {
47
47
  props.onItemSelect(checkbox.id);
48
48
  },
49
- disabled: props.disabled
49
+ disabled: props.disabled || checkbox.disabled
50
50
  },
51
51
  size: checkbox.size || props.size,
52
52
  color: checkbox.color,
package/form/CheckboxTreeField/CheckboxTreeFieldView.js CHANGED
@@ -10,7 +10,7 @@ var TreeItemView_1 = __importDefault(require("../../nav/TreeItem/TreeItemView"))
10
10
  function CheckboxTreeFieldView(props) {
11
11
  var bem = (0, useBem_1["default"])('CheckboxTreeFieldView');
12
12
  var prefix = (0, hooks_1.useUniqueId)('checkbox');
13
- return (react_1["default"].createElement("div", { className: bem.block() }, props.items.map(function (checkbox) { return (react_1["default"].createElement(TreeItemView_1["default"], { key: checkbox.uniqueId, item: checkbox, levelPadding: props.levelPadding, onNestedItemClick: function () { return props.onItemSelect(checkbox); }, hasIconExpandOnly: !props.hasOnlyLeafCheckboxes && checkbox.hasItems, withoutPointerOnLabel: props.hasOnlyLeafCheckboxes && checkbox.hasItems }, props.renderCheckbox({
13
+ return (react_1["default"].createElement("div", { className: bem.block() }, props.items.map(function (checkbox) { return (react_1["default"].createElement(TreeItemView_1["default"], { key: checkbox.uniqueId, item: checkbox, levelPadding: props.levelPadding, hasIconExpandOnly: props.hasIconExpandOnly, withoutPointerOnLabel: props.hasOnlyLeafCheckboxes && checkbox.hasItems && !checkbox.isOpened }, props.renderCheckbox({
14
14
  id: props.hasOnlyLeafCheckboxes && checkbox.hasItems ? null : "".concat(prefix, "_").concat(checkbox.id),
15
15
  label: checkbox.label,
16
16
  inputProps: {
@@ -18,7 +18,10 @@ function CheckboxTreeFieldView(props) {
18
18
  type: 'checkbox',
19
19
  checked: props.selectedIds.includes(checkbox.id),
20
20
  onChange: function () {
21
- props.onItemSelect(checkbox);
21
+ var isOpenedLabel = props.hasOnlyLeafCheckboxes && (checkbox.isOpened || !checkbox.hasItems);
22
+ if (isOpenedLabel || !props.hasOnlyLeafCheckboxes) {
23
+ props.onItemSelect(checkbox);
24
+ }
22
25
  },
23
26
  disabled: checkbox.disabled,
24
27
  required: checkbox.required
package/form/InputField/InputFieldView.js CHANGED
@@ -43,15 +43,14 @@ var hooks_1 = require("@steroidsjs/core/hooks");
43
43
  var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
44
44
  var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
45
45
  function InputFieldView(props) {
46
- var _a;
47
46
  var bem = (0, hooks_1.useBem)('InputFieldView');
48
47
  return (React.createElement("div", { className: bem(bem.block({
49
- disabled: (_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.disabled,
48
+ disabled: props.disabled,
50
49
  size: props.size,
51
50
  hasError: !!props.errors,
52
51
  hasLeadIcon: !!props.leadIcon,
53
52
  hasClearIcon: props.showClear && !props.disabled,
54
- filled: !!props.input.value,
53
+ filled: !!props.input.value || !!props.inputProps.value,
55
54
  hasAddonAfter: !!props.addonAfter,
56
55
  hasAddonBefore: !!props.addonBefore,
57
56
  hasAddon: !!props.addonAfter || !!props.addonBefore,
package/form/InputField/InputFieldView.scss CHANGED
@@ -60,9 +60,9 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
60
60
  }
61
61
  }
62
62
 
63
-
63
+
64
64
  //Statements
65
- &::before {
65
+ &::before {
66
66
  content: '';
67
67
  position: absolute;
68
68
  z-index: 2;
@@ -85,11 +85,11 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
85
85
  }
86
86
 
87
87
  &:not(#{$root}_disabled):active {
88
- #{$root}__input {
88
+ #{$root}__input {
89
89
  border-color: transparent;
90
90
  }
91
-
92
- &::before {
91
+
92
+ &::before {
93
93
  transform: none;
94
94
  border: 1px solid variables.$primary;
95
95
  opacity: 1;
@@ -97,9 +97,10 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
97
97
  }
98
98
 
99
99
  &_disabled {
100
- #{$root}__input {
100
+ #{$root}__input {
101
101
  background-color: variables.$element-background-color-disabled;
102
102
  border-color: transparent;
103
+ cursor: not-allowed;
103
104
  }
104
105
  }
105
106
 
@@ -109,7 +110,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
109
110
  }
110
111
 
111
112
 
112
- &::before {
113
+ &::before {
113
114
  border: 1px solid variables.$danger;
114
115
  border-radius: 16px;
115
116
  transform: translateX(-1px) translateY(-1px);
@@ -123,7 +124,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
123
124
  color: variables.$text-color;
124
125
  height: variables.$input-height-lg;
125
126
  border-radius: variables.$radius-large;
126
-
127
+
127
128
  #{$root}__input {
128
129
  font-size: variables.$font-size-lg;
129
130
  border-radius: variables.$radius-large;
@@ -138,7 +139,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
138
139
  padding: 16px 3px;
139
140
  }
140
141
 
141
- &::before {
142
+ &::before {
142
143
  border-radius: 14px;
143
144
  }
144
145
  }
@@ -147,7 +148,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
147
148
  color: variables.$text-color;
148
149
  height: variables.$input-height-md;
149
150
  border-radius: variables.$radius-large;
150
-
151
+
151
152
  #{$root}__input {
152
153
  border-radius: variables.$radius-large;
153
154
  font-size: variables.$font-size-base;
@@ -165,7 +166,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
165
166
  padding: 11px 3px;
166
167
  }
167
168
 
168
- &::before {
169
+ &::before {
169
170
  border-radius: 14px;
170
171
  }
171
172
  }
@@ -174,7 +175,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
174
175
  color: variables.$text-color;
175
176
  height: variables.$input-height-sm;
176
177
  border-radius: variables.$radius-small;
177
-
178
+
178
179
  #{$root}__input {
179
180
  font-size: variables.$font-size-sm;
180
181
  border-radius: variables.$radius-small;
@@ -190,7 +191,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
190
191
  padding: 5px 3px;
191
192
  }
192
193
 
193
- &::before {
194
+ &::before {
194
195
  border-radius: 10px;
195
196
  }
196
197
  }
@@ -270,7 +271,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
270
271
  border-bottom-left-radius: 0;
271
272
  border: none;
272
273
  }
273
- &::before {
274
+ &::before {
274
275
  border: 1px solid variables.$element-border-color;
275
276
  opacity: 1;
276
277
  }
@@ -281,14 +282,14 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
281
282
  border-top-right-radius: 0;
282
283
  border-bottom-right-radius: 0;
283
284
  }
284
- &::before {
285
+ &::before {
285
286
  border: 1px solid variables.$element-border-color;
286
287
  opacity: 1;
287
288
  }
288
289
  }
289
290
 
290
291
  &__text-before,
291
- &__text-after {
292
+ &__text-after {
292
293
  flex-shrink: 0;
293
294
  }
294
295
 
@@ -309,4 +310,4 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
309
310
  border-top-right-radius: inherit;
310
311
  border-bottom-right-radius: inherit;
311
312
  }
312
- }
313
+ }
package/form/RadioField/RadioFieldView.js CHANGED
@@ -49,7 +49,7 @@ function RadioFieldView(props) {
49
49
  }), props.className), onClick: props.onChange },
50
50
  React.createElement("input", __assign({ className: bem(bem.element('input', {
51
51
  checked: props.checked
52
- })), id: props.id || id }, props.inputProps, { disabled: props.disabled, required: props.required })),
52
+ })), id: props.id || id }, props.inputProps, { required: props.required })),
53
53
  React.createElement("label", { className: bem.element('label'), htmlFor: props.id || id },
54
54
  React.createElement("span", { className: bem.element('ellipse') }),
55
55
  props.label)));
package/form/RadioListField/RadioListFieldView.js CHANGED
@@ -46,7 +46,7 @@ function RadioListFieldView(props) {
46
46
  onChange: function () {
47
47
  props.onItemSelect(radio.id);
48
48
  },
49
- disabled: props.disabled
49
+ disabled: props.disabled || radio.disabled
50
50
  },
51
51
  size: radio.size || props.size,
52
52
  required: radio.required
package/nav/TreeItem/TreeItemView.js CHANGED
@@ -47,12 +47,7 @@ function TreeItemView(props) {
47
47
  var bem = (0, useBem_1["default"])('TreeItemView');
48
48
  var paddingBasedOnIcon = props.item.hasItems ? PADDING_WITH_ICON : PADDING_WITHOUT_ICON;
49
49
  var onExpandProps = (0, react_1.useMemo)(function () { return ({
50
- onClick: function (e) {
51
- props.item.onClick(e);
52
- if (!props.hasIconExpandOnly && props.onNestedItemClick) {
53
- props.onNestedItemClick();
54
- }
55
- },
50
+ onClick: function (e) { return props.item.onClick(e); },
56
51
  onKeyDown: function (e) { return e.key === 'Enter' && props.item.onClick(e); },
57
52
  role: 'button',
58
53
  tabIndex: 0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@steroidsjs/bootstrap",
3
- "version": "3.0.5",
3
+ "version": "3.0.9",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
35
35
  "react-use": "^17.4.0"
36
36
  },
37
37
  "devDependencies": {
38
- "@steroidsjs/core": "^3.0.5",
38
+ "@steroidsjs/core": "^3.0.11",
39
39
  "@steroidsjs/eslint-config": "^2.1.6",
40
40
  "@types/enzyme": "^3.10.8",
41
41
  "@types/googlemaps": "^3.43.3",