@xaypay/tui 0.0.90 → 0.0.92

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 (12) hide show
  1. package/dist/index.es.js +138 -113
  2. package/dist/index.js +138 -113
  3. package/package.json +1 -1
  4. package/src/components/input/index.js +15 -1
  5. package/src/components/input/input.module.css +1 -0
  6. package/src/components/newAutocomplete/autocomplete.module.css +3 -0
  7. package/src/components/newAutocomplete/index.js +9 -2
  8. package/src/components/select/index.js +3 -0
  9. package/src/components/select/select.module.css +2 -0
  10. package/src/components/textarea/textarea.module.css +4 -0
  11. package/src/stories/configuration.stories.mdx +3 -0
  12. package/tui.config.js +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.90",
3
+ "version": "0.0.92",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/input/index.js CHANGED
@@ -45,6 +45,7 @@ export const Input = ({
45
45
  errorSize,
46
46
  labelSize,
47
47
  maxLength,
48
+ floatToFix,
48
49
  minNumSize,
49
50
  maxNumSize,
50
51
  labelColor,
@@ -147,6 +148,18 @@ export const Input = ({
147
148
  change(maxNumSize);
148
149
  }
149
150
  }
151
+ if (floatToFix && floatToFix > 0 && !Number.isInteger(parseFloat(currentValue))) {
152
+ const floatNumParts = currentValue.split('.');
153
+ const int = floatNumParts[0];
154
+ const float = floatNumParts[1];
155
+
156
+ if (float && float.length > floatToFix) {
157
+ setInnerValue(`${int}.${float.substr(0, floatToFix)}`);
158
+ if (change) {
159
+ change(`${int}.${float.substr(0, floatToFix)}`);
160
+ }
161
+ }
162
+ }
150
163
  if (currentValue === '') {
151
164
  setInnerValue('');
152
165
  if (change) {
@@ -309,9 +322,9 @@ export const Input = ({
309
322
  disabled={disabled ? disabled : ""}
310
323
  name={name ? name : `tui_${random}_tui`}
311
324
  placeholder={placeholder ? placeholder : ''}
312
- autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
313
325
  min={type === 'number' && minNumSize ? minNumSize: ''}
314
326
  max={type === 'number' && maxNumSize ? maxNumSize : ''}
327
+ autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
315
328
  style={{
316
329
  border: 'none',
317
330
  outline: 'none',
@@ -401,6 +414,7 @@ Input.propTypes = {
401
414
  errorLeft: PropTypes.string,
402
415
  labelSize: PropTypes.string,
403
416
  maxLength: PropTypes.number,
417
+ floatToFix: PropTypes.number,
404
418
  minNumSize: PropTypes.number,
405
419
  maxNumSize: PropTypes.number,
406
420
  errorColor: PropTypes.string,
package/src/components/input/input.module.css CHANGED
@@ -6,6 +6,7 @@
6
6
  .input-content {
7
7
  display: flex;
8
8
  width: 100%;
9
+ -webkit-appearance: none;
9
10
  }
10
11
 
11
12
  input:-webkit-autofill,
package/src/components/newAutocomplete/autocomplete.module.css ADDED
@@ -0,0 +1,3 @@
1
+ .auto-complete {
2
+ -webkit-appearance: none;
3
+ }
package/src/components/newAutocomplete/index.js CHANGED
@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
4
4
  import { keyframes, css } from 'styled-components';
5
5
 
6
6
  import { compereConfigs } from './../../utils';
7
+
8
+ import styles from './autocomplete.module.css';
7
9
 
8
10
  export const NewAutocomplete = ({
9
11
  label,
@@ -39,6 +41,7 @@ export const NewAutocomplete = ({
39
41
  contentTopDisplay,
40
42
  contentTopPadding,
41
43
  contentBottomLeft,
44
+ innerErrorPadding,
42
45
  showOptionDuration,
43
46
  labelRequiredColor,
44
47
  contentTopMaxWidth,
@@ -64,6 +67,7 @@ export const NewAutocomplete = ({
64
67
  contentBottomRowFontSize,
65
68
  contentBottomRowBoxSizing,
66
69
  contentBottomInnerDisplay,
70
+ innerErrorBackgroundColor,
67
71
  contentBottomRowFontWeight,
68
72
  contentBottomRowLineHeight,
69
73
  contentBottomRowAlignItems,
@@ -221,10 +225,10 @@ export const NewAutocomplete = ({
221
225
  color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
222
226
  fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
223
227
  top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
228
+ padding: innerErrorPadding ? innerErrorPadding : configStyles.NEWAUTOCOMPLETE.innerErrorPadding,
224
229
  height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
225
- padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
226
230
  lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
227
- backgroundColor: contentBottomBackgroundColor ? contentBottomBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomBackgroundColor,
231
+ backgroundColor: innerErrorBackgroundColor ? innerErrorBackgroundColor : configStyles.NEWAUTOCOMPLETE.innerErrorBackgroundColor,
228
232
  }}
229
233
  >
230
234
  {
@@ -318,6 +322,7 @@ export const NewAutocomplete = ({
318
322
  onInput={handleChange}
319
323
  onMouseEnter={handleMouseEnter}
320
324
  onMouseLeave={handleMouseLeave}
325
+ className={styles['auto-complete']}
321
326
  placeholder={placeHolder ? placeHolder : ''}
322
327
  autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
323
328
  style={{
@@ -404,6 +409,7 @@ NewAutocomplete.propTypes = {
404
409
  contentBottomLeft: PropTypes.string,
405
410
  options: PropTypes.array.isRequired,
406
411
  labelMarginBottom: PropTypes.string,
412
+ innerErrorPadding: PropTypes.string,
407
413
  labelRequiredColor: PropTypes.string,
408
414
  labelTextTransform: PropTypes.string,
409
415
  showOptionDuration: PropTypes.string,
@@ -428,6 +434,7 @@ NewAutocomplete.propTypes = {
428
434
  contentBottomRowPadding: PropTypes.string,
429
435
  contentBottomRowFontSize: PropTypes.string,
430
436
  contentBottomRowBoxSizing: PropTypes.string,
437
+ innerErrorBackgroundColor: PropTypes.string,
431
438
  contentBottomInnerDisplay: PropTypes.string,
432
439
  contentBottomRowFontWeight: PropTypes.number,
433
440
  contentBottomRowLineHeight: PropTypes.string,
package/src/components/select/index.js CHANGED
@@ -49,6 +49,7 @@ export const Select = ({
49
49
  selectedLineHeight,
50
50
  selectedHoverColor,
51
51
  selectedTransition,
52
+ selectedBackgroundColor,
52
53
 
53
54
  optionsBoxShadow,
54
55
  optionsBorderRadius,
@@ -233,6 +234,7 @@ export const Select = ({
233
234
  fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
234
235
  lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
235
236
  transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
237
+ backgroundColor: selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
236
238
  boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.SELECT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.boxShadowHover : boxShadow ? boxShadow : configStyles.SELECT.boxShadow
237
239
  }}
238
240
  onClick={disabled ? _ => _ : _ => handleOpenClose()}
@@ -399,6 +401,7 @@ Select.propTypes = {
399
401
  selectedFontWeight: PropTypes.string,
400
402
  selectedLineHeight: PropTypes.string,
401
403
  selectedTransition: PropTypes.string,
404
+ selectedBackgroundColor: PropTypes.string,
402
405
 
403
406
  optionsBoxShadow: PropTypes.string,
404
407
  optionsBorderRadius: PropTypes.string,
package/src/components/select/select.module.css CHANGED
@@ -2,6 +2,7 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  position: relative;
5
+ -webkit-appearance: none;
5
6
  }
6
7
 
7
8
  .select-content-top {
@@ -10,6 +11,7 @@
10
11
  flex-wrap: nowrap;
11
12
  align-items: center;
12
13
  justify-content: space-between;
14
+ -webkit-appearance: none;
13
15
  }
14
16
 
15
17
  .select-content-bottom {
package/src/components/textarea/textarea.module.css CHANGED
@@ -1,3 +1,7 @@
1
+ textarea {
2
+ -webkit-appearance: none;
3
+ }
4
+
1
5
  textarea::-webkit-scrollbar {
2
6
  width: 6px;
3
7
  }
package/src/stories/configuration.stories.mdx CHANGED
@@ -350,6 +350,7 @@ import StackAlt from './assets/stackalt.svg';
350
350
  selectedBorderColor: '#D1D1D1', // for selected border color
351
351
  selectedBoxSizing: 'border-box', // for selected box sizing
352
352
  selectedTransition: 'border-color 240ms', // for selected transition
353
+ selectedBackgroundColor: '#FBFBFB', // for selected background color
353
354
 
354
355
  optionsBorderRadius: '6px', // for options block border radius
355
356
  optionsBackgroundColor: '#FBFBFB', // for options block background color
@@ -465,6 +466,8 @@ import StackAlt from './assets/stackalt.svg';
465
466
  contentDirection: 'column', // for autocomplete parent block flex direction
466
467
  contentPosition: 'relative', // for autocomplete parent block position
467
468
  showOptionDuration: '640ms', // for autocomplete parent block animation duration
469
+ innerErrorPadding: '0px 15px', // for autocomplete error padding
470
+ innerErrorBackgroundColor: '#FBFBFB', // for autocomplete inner error message background color
468
471
 
469
472
  contentTopWeight: 500, // for autocomplate top block font weight
470
473
  contentTopSize: '16px', // for autocomplate top block font size
package/tui.config.js CHANGED
@@ -205,6 +205,7 @@ module.exports = {
205
205
  selectedHoverColor: '#373538', // for selected color ( when hover )
206
206
  selectedBoxSizing: 'border-box', // for selected box sizing
207
207
  selectedTransition: 'border-color 240ms', // for selected transition
208
+ selectedBackgroundColor: '#FBFBFB', // for selected background color
208
209
 
209
210
  optionsBorderRadius: '6px', // for options block border radius
210
211
  optionsBackgroundColor: '#FBFBFB', // for options block background color
@@ -276,6 +277,8 @@ module.exports = {
276
277
  contentDirection: 'column', // for autocomplete parent block flex direction
277
278
  contentPosition: 'relative', // for autocomplete parent block position
278
279
  showOptionDuration: '640ms', // for autocomplete parent block animation duration
280
+ innerErrorPadding: '0px 15px', // for autocomplete error padding
281
+ innerErrorBackgroundColor: 'green', // for autocomplete inner error message background color
279
282
 
280
283
  contentTopWeight: 500, // for autocomplate top block font weight
281
284
  contentTopSize: '16px', // for autocomplate top block font size