@itcase/ui 1.3.18 → 1.3.20

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 (7) hide show
  1. package/dist/cjs/components/Grid.js +2 -2
  2. package/dist/cjs/hooks/useStyles.js +41 -18
  3. package/dist/components/Grid.js +2 -2
  4. package/dist/css/components/Cell/Cell.css +4 -0
  5. package/dist/css/components/Dot/Dot.css +1 -1
  6. package/dist/hooks/useStyles.js +41 -18
  7. package/package.json +1 -1
package/dist/cjs/components/Grid.js CHANGED
@@ -16,12 +16,12 @@ require('lodash/upperFirst');
16
16
  require('../hooks/styleAttributes.js');
17
17
 
18
18
  function Grid(props) {
19
- var id = props.id, children = props.children, after = props.after, before = props.before, className = props.className, dataTour = props.dataTour, horizontalResizing = props.horizontalResizing, horizontalScroll = props.horizontalScroll, _a = props.tag, Tag = _a === undefined ? 'div' : _a, type = props.type, useGridSystem = props.useGridSystem, verticalResizing = props.verticalResizing, style = props.style, onClick = props.onClick;
19
+ var id = props.id, children = props.children, after = props.after, before = props.before, className = props.className, dataTour = props.dataTour, horizontalResizing = props.horizontalResizing, horizontalScroll = props.horizontalScroll, _a = props.tag, Tag = _a === undefined ? 'div' : _a, type = props.type, useGridSystem = props.useGridSystem, verticalResizing = props.verticalResizing, onClick = props.onClick, onDoubleClick = props.onDoubleClick;
20
20
  var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
21
21
  var alignContentClass = classGenerator.alignContentClass, alignItemsClass = classGenerator.alignItemsClass, borderColorClass = classGenerator.borderColorClass, columnGapClass = classGenerator.columnGapClass, columnsClass = classGenerator.columnsClass, fillClass = classGenerator.fillClass, justifyContentClass = classGenerator.justifyContentClass, justifyItemsClass = classGenerator.justifyItemsClass, rowGapClass = classGenerator.rowGapClass, rowsClass = classGenerator.rowsClass;
22
22
  // @ts-expect-error
23
23
  var gridStyles = useStyles.useStyles(props).styles;
24
- return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'grid', useGridSystem && "grid_state_system", horizontalScroll && "grid_scroll_horizontal", type && "grid_type_".concat(type), columnsClass && "grid_columns_".concat(columnsClass), rowsClass && "grid_rows_".concat(rowsClass), rowGapClass && "grid_row-gap_".concat(rowGapClass), columnGapClass && "grid_column-gap_".concat(columnGapClass), alignContentClass && "grid_align-content_".concat(alignContentClass), alignItemsClass && "grid_align-items_".concat(alignItemsClass), borderColorClass && "border-color_".concat(borderColorClass), justifyContentClass && "grid_justify-content_".concat(justifyContentClass), justifyItemsClass && "grid_justify-items_".concat(justifyItemsClass), fillClass && "fill_".concat(fillClass), horizontalResizing && "grid_horizontal-resizing_".concat(horizontalResizing), verticalResizing && "grid_vertical-resizing_".concat(verticalResizing)), "data-tour": dataTour, id: id, style: Object.assign({}, gridStyles, style), onClick: onClick, children: [before && jsxRuntime.jsx("div", { className: "grid__before", children: before }), children, after && jsxRuntime.jsx("div", { className: "grid__after", children: after })] }));
24
+ return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'grid', useGridSystem && "grid_state_system", horizontalScroll && "grid_scroll_horizontal", type && "grid_type_".concat(type), columnsClass && "grid_columns_".concat(columnsClass), rowsClass && "grid_rows_".concat(rowsClass), rowGapClass && "grid_row-gap_".concat(rowGapClass), columnGapClass && "grid_column-gap_".concat(columnGapClass), alignContentClass && "grid_align-content_".concat(alignContentClass), alignItemsClass && "grid_align-items_".concat(alignItemsClass), borderColorClass && "border-color_".concat(borderColorClass), justifyContentClass && "grid_justify-content_".concat(justifyContentClass), justifyItemsClass && "grid_justify-items_".concat(justifyItemsClass), fillClass && "fill_".concat(fillClass), horizontalResizing && "grid_horizontal-resizing_".concat(horizontalResizing), verticalResizing && "grid_vertical-resizing_".concat(verticalResizing)), "data-tour": dataTour, id: id, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && jsxRuntime.jsx("div", { className: "grid__before", children: before }), children, after && jsxRuntime.jsx("div", { className: "grid__after", children: after })] }));
25
25
  }
26
26
 
27
27
  function GridItem(props) {
package/dist/cjs/hooks/useStyles.js CHANGED
@@ -109,22 +109,39 @@ function useStyles(props) {
109
109
  }
110
110
  if (value) {
111
111
  // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
112
- const hasUnitRegExp = /\D/;
112
+ const isValueHasUnit = /\D/.test(value);
113
113
  // If value has some unit
114
- if (hasUnitRegExp.test(value)) {
114
+ if (isValueHasUnit) {
115
115
  // Check value on our custom "m"(module) unit
116
- const hasModuleUnitRegExp = /^\d+\.?\d*m$/;
116
+ /** Pattern for:
117
+ * 1m
118
+ * 1.5m
119
+ * 1m 1m 1.5m
120
+ * 0 0 1m 1m
121
+ */
122
+ const isValueHasModuleUnit = /\d+\.?\d*m\s?(?![a-zA-Z]+)/.test(value);
117
123
  // If value has module unit
118
- if (hasModuleUnitRegExp.test(value)) {
119
- // Find numbers from value value
120
- const numberMatchesList = value.match(/\d+\.?\d*/);
121
- // If "numberMatchesList" not null (has matches)
122
- if (numberMatchesList) {
123
- // Parse module value to px value
124
- const valueModule = parseFloat(numberMatchesList[0]);
125
- const valuePx = valueModule * 8;
126
- value = `${valuePx}px`;
127
- }
124
+ if (isValueHasModuleUnit) {
125
+ /** Order for shorthand properties:
126
+ * top
127
+ * right
128
+ * bottom
129
+ * left
130
+ * or:
131
+ * top
132
+ * right and left
133
+ * bottom
134
+ * or:
135
+ * top and bottom
136
+ * right and left
137
+ */
138
+
139
+ const valuePxPartsList = value.split(' ').map(valuePart => {
140
+ const valueModule = valuePart.replace(/[a-z]/gi, '');
141
+ const valuePx = parseFloat(valueModule) * 8;
142
+ return `${valuePx}px`;
143
+ }, []);
144
+ value = valuePxPartsList.join(' ');
128
145
  }
129
146
  } else {
130
147
  // Some properties doesn't have any units
@@ -135,15 +152,21 @@ function useStyles(props) {
135
152
  }
136
153
  }
137
154
  if (styleAttributeKey.includes('Horizontal')) {
138
- const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
139
155
  const keyRight = styleAttributeKey.replace('Horizontal', 'Right');
140
- resultStylesGroups[targetElementGroupKey][keyLeft] = value;
141
- resultStylesGroups[targetElementGroupKey][keyRight] = value;
156
+ const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
157
+ const valuePartsList = value.split(' ');
158
+ const valueRight = valuePartsList[0];
159
+ const valueLeft = valuePartsList[1] || valuePartsList[0];
160
+ resultStylesGroups[targetElementGroupKey][keyRight] = valueRight;
161
+ resultStylesGroups[targetElementGroupKey][keyLeft] = valueLeft;
142
162
  } else if (styleAttributeKey.includes('Vertical')) {
143
163
  const keyTop = styleAttributeKey.replace('Vertical', 'Top');
144
164
  const keyBottom = styleAttributeKey.replace('Vertical', 'Bottom');
145
- resultStylesGroups[targetElementGroupKey][keyTop] = value;
146
- resultStylesGroups[targetElementGroupKey][keyBottom] = value;
165
+ const valuePartsList = value.split(' ');
166
+ const valueTop = valuePartsList[0];
167
+ const valueBottom = valuePartsList[1] || valuePartsList[0];
168
+ resultStylesGroups[targetElementGroupKey][keyTop] = valueTop;
169
+ resultStylesGroups[targetElementGroupKey][keyBottom] = valueBottom;
147
170
  } else {
148
171
  resultStylesGroups[targetElementGroupKey][styleAttributeKey] = value;
149
172
  }
package/dist/components/Grid.js CHANGED
@@ -14,12 +14,12 @@ import 'lodash/upperFirst';
14
14
  import '../hooks/styleAttributes.js';
15
15
 
16
16
  function Grid(props) {
17
- var id = props.id, children = props.children, after = props.after, before = props.before, className = props.className, dataTour = props.dataTour, horizontalResizing = props.horizontalResizing, horizontalScroll = props.horizontalScroll, _a = props.tag, Tag = _a === undefined ? 'div' : _a, type = props.type, useGridSystem = props.useGridSystem, verticalResizing = props.verticalResizing, style = props.style, onClick = props.onClick;
17
+ var id = props.id, children = props.children, after = props.after, before = props.before, className = props.className, dataTour = props.dataTour, horizontalResizing = props.horizontalResizing, horizontalScroll = props.horizontalScroll, _a = props.tag, Tag = _a === undefined ? 'div' : _a, type = props.type, useGridSystem = props.useGridSystem, verticalResizing = props.verticalResizing, onClick = props.onClick, onDoubleClick = props.onDoubleClick;
18
18
  var classGenerator = useDeviceTargetClassGenerator(props);
19
19
  var alignContentClass = classGenerator.alignContentClass, alignItemsClass = classGenerator.alignItemsClass, borderColorClass = classGenerator.borderColorClass, columnGapClass = classGenerator.columnGapClass, columnsClass = classGenerator.columnsClass, fillClass = classGenerator.fillClass, justifyContentClass = classGenerator.justifyContentClass, justifyItemsClass = classGenerator.justifyItemsClass, rowGapClass = classGenerator.rowGapClass, rowsClass = classGenerator.rowsClass;
20
20
  // @ts-expect-error
21
21
  var gridStyles = useStyles(props).styles;
22
- return (jsxs(Tag, { className: clsx(className, 'grid', useGridSystem && "grid_state_system", horizontalScroll && "grid_scroll_horizontal", type && "grid_type_".concat(type), columnsClass && "grid_columns_".concat(columnsClass), rowsClass && "grid_rows_".concat(rowsClass), rowGapClass && "grid_row-gap_".concat(rowGapClass), columnGapClass && "grid_column-gap_".concat(columnGapClass), alignContentClass && "grid_align-content_".concat(alignContentClass), alignItemsClass && "grid_align-items_".concat(alignItemsClass), borderColorClass && "border-color_".concat(borderColorClass), justifyContentClass && "grid_justify-content_".concat(justifyContentClass), justifyItemsClass && "grid_justify-items_".concat(justifyItemsClass), fillClass && "fill_".concat(fillClass), horizontalResizing && "grid_horizontal-resizing_".concat(horizontalResizing), verticalResizing && "grid_vertical-resizing_".concat(verticalResizing)), "data-tour": dataTour, id: id, style: Object.assign({}, gridStyles, style), onClick: onClick, children: [before && jsx("div", { className: "grid__before", children: before }), children, after && jsx("div", { className: "grid__after", children: after })] }));
22
+ return (jsxs(Tag, { className: clsx(className, 'grid', useGridSystem && "grid_state_system", horizontalScroll && "grid_scroll_horizontal", type && "grid_type_".concat(type), columnsClass && "grid_columns_".concat(columnsClass), rowsClass && "grid_rows_".concat(rowsClass), rowGapClass && "grid_row-gap_".concat(rowGapClass), columnGapClass && "grid_column-gap_".concat(columnGapClass), alignContentClass && "grid_align-content_".concat(alignContentClass), alignItemsClass && "grid_align-items_".concat(alignItemsClass), borderColorClass && "border-color_".concat(borderColorClass), justifyContentClass && "grid_justify-content_".concat(justifyContentClass), justifyItemsClass && "grid_justify-items_".concat(justifyItemsClass), fillClass && "fill_".concat(fillClass), horizontalResizing && "grid_horizontal-resizing_".concat(horizontalResizing), verticalResizing && "grid_vertical-resizing_".concat(verticalResizing)), "data-tour": dataTour, id: id, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && jsx("div", { className: "grid__before", children: before }), children, after && jsx("div", { className: "grid__after", children: after })] }));
23
23
  }
24
24
 
25
25
  function GridItem(props) {
package/dist/css/components/Cell/Cell.css CHANGED
@@ -8,6 +8,10 @@
8
8
  justify-content: space-between;
9
9
  align-items: center;
10
10
  gap: 8px;
11
+ ^^&__title,
12
+ ^^&__value {
13
+ width: 100%;
14
+ }
11
15
  }
12
16
  ^&__icon {
13
17
  }
package/dist/css/components/Dot/Dot.css CHANGED
@@ -2,7 +2,7 @@
2
2
  }
3
3
  .dot {
4
4
  &_size {
5
- @each $size in s, m, l {
5
+ @each $size in xs, s, m, l {
6
6
  &_$(size) {
7
7
  min-width: var(--dot-size-$(size)-width, 16px);
8
8
  min-height: var(--dot-size-$(size)-height, 16px);
package/dist/hooks/useStyles.js CHANGED
@@ -107,22 +107,39 @@ function useStyles(props) {
107
107
  }
108
108
  if (value) {
109
109
  // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
110
- const hasUnitRegExp = /\D/;
110
+ const isValueHasUnit = /\D/.test(value);
111
111
  // If value has some unit
112
- if (hasUnitRegExp.test(value)) {
112
+ if (isValueHasUnit) {
113
113
  // Check value on our custom "m"(module) unit
114
- const hasModuleUnitRegExp = /^\d+\.?\d*m$/;
114
+ /** Pattern for:
115
+ * 1m
116
+ * 1.5m
117
+ * 1m 1m 1.5m
118
+ * 0 0 1m 1m
119
+ */
120
+ const isValueHasModuleUnit = /\d+\.?\d*m\s?(?![a-zA-Z]+)/.test(value);
115
121
  // If value has module unit
116
- if (hasModuleUnitRegExp.test(value)) {
117
- // Find numbers from value value
118
- const numberMatchesList = value.match(/\d+\.?\d*/);
119
- // If "numberMatchesList" not null (has matches)
120
- if (numberMatchesList) {
121
- // Parse module value to px value
122
- const valueModule = parseFloat(numberMatchesList[0]);
123
- const valuePx = valueModule * 8;
124
- value = `${valuePx}px`;
125
- }
122
+ if (isValueHasModuleUnit) {
123
+ /** Order for shorthand properties:
124
+ * top
125
+ * right
126
+ * bottom
127
+ * left
128
+ * or:
129
+ * top
130
+ * right and left
131
+ * bottom
132
+ * or:
133
+ * top and bottom
134
+ * right and left
135
+ */
136
+
137
+ const valuePxPartsList = value.split(' ').map(valuePart => {
138
+ const valueModule = valuePart.replace(/[a-z]/gi, '');
139
+ const valuePx = parseFloat(valueModule) * 8;
140
+ return `${valuePx}px`;
141
+ }, []);
142
+ value = valuePxPartsList.join(' ');
126
143
  }
127
144
  } else {
128
145
  // Some properties doesn't have any units
@@ -133,15 +150,21 @@ function useStyles(props) {
133
150
  }
134
151
  }
135
152
  if (styleAttributeKey.includes('Horizontal')) {
136
- const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
137
153
  const keyRight = styleAttributeKey.replace('Horizontal', 'Right');
138
- resultStylesGroups[targetElementGroupKey][keyLeft] = value;
139
- resultStylesGroups[targetElementGroupKey][keyRight] = value;
154
+ const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
155
+ const valuePartsList = value.split(' ');
156
+ const valueRight = valuePartsList[0];
157
+ const valueLeft = valuePartsList[1] || valuePartsList[0];
158
+ resultStylesGroups[targetElementGroupKey][keyRight] = valueRight;
159
+ resultStylesGroups[targetElementGroupKey][keyLeft] = valueLeft;
140
160
  } else if (styleAttributeKey.includes('Vertical')) {
141
161
  const keyTop = styleAttributeKey.replace('Vertical', 'Top');
142
162
  const keyBottom = styleAttributeKey.replace('Vertical', 'Bottom');
143
- resultStylesGroups[targetElementGroupKey][keyTop] = value;
144
- resultStylesGroups[targetElementGroupKey][keyBottom] = value;
163
+ const valuePartsList = value.split(' ');
164
+ const valueTop = valuePartsList[0];
165
+ const valueBottom = valuePartsList[1] || valuePartsList[0];
166
+ resultStylesGroups[targetElementGroupKey][keyTop] = valueTop;
167
+ resultStylesGroups[targetElementGroupKey][keyBottom] = valueBottom;
145
168
  } else {
146
169
  resultStylesGroups[targetElementGroupKey][styleAttributeKey] = value;
147
170
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.3.18",
3
+ "version": "1.3.20",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",