@xaypay/tui 0.0.108 → 0.0.109

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 (11) hide show
  1. package/dist/index.es.js +18 -5
  2. package/dist/index.js +18 -5
  3. package/package.json +1 -1
  4. package/src/components/input/index.js +1 -1
  5. package/src/components/modal/index.js +15 -2
  6. package/src/components/table/table.stories.js +9 -0
  7. package/src/components/table/td.js +1 -1
  8. package/src/components/textarea/index.js +4 -0
  9. package/src/components/textarea/textarea.stories.js +1 -0
  10. package/src/stories/configuration.stories.mdx +4 -0
  11. package/tui.config.js +3 -0
package/dist/index.es.js CHANGED
@@ -491,6 +491,9 @@ const Modal = ({
491
491
  backgroundColor,
492
492
  grayDecorHeight,
493
493
  layerBackgroundColor,
494
+ imageMargin,
495
+ imageMaxWidth,
496
+ imageWrapWidth,
494
497
  imageWrapHeight
495
498
  }) => {
496
499
  const [select, setSelect] = useState(0);
@@ -628,11 +631,11 @@ const Modal = ({
628
631
  display: 'flex',
629
632
  width: '100%',
630
633
  height: '100%',
631
- overflow: 'hidden',
632
634
  position: 'relative',
633
635
  alignItems: 'center',
634
636
  boxSizing: 'border-box',
635
637
  justifyContent: 'center',
638
+ overflow: type === 'content' ? 'auto' : 'hidden',
636
639
  borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
637
640
  borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
638
641
  borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor
@@ -665,7 +668,7 @@ const Modal = ({
665
668
  }
666
669
  }, /*#__PURE__*/React__default.createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default.createElement("div", {
667
670
  style: {
668
- width: '100%',
671
+ width: imageWrapWidth ? imageWrapWidth : configStyles.MODAL.imageWrapWidth,
669
672
  height: imageWrapHeight ? imageWrapHeight : configStyles.MODAL.imageWrapHeight
670
673
  }
671
674
  }, innerData && innerData.length > 0 && innerData.map((item, index) => {
@@ -679,9 +682,11 @@ const Modal = ({
679
682
  display: 'block',
680
683
  objectFit: 'cover',
681
684
  objectPosition: 'center',
685
+ margin: imageMargin ? imageMargin : configStyles.MODAL.imageMargin,
682
686
  borderRadius: radius ? radius : configStyles.MODAL.radius,
683
687
  width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
684
- height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
688
+ height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight,
689
+ maxWidth: imageMaxWidth ? imageMaxWidth : configStyles.MODAL.imageMaxWidth
685
690
  },
686
691
  src: item.url,
687
692
  key: item.id ? item.id : index
@@ -746,7 +751,11 @@ Modal.propTypes = {
746
751
  justifyContent: PropTypes.string,
747
752
  backgroundColor: PropTypes.string,
748
753
  grayDecorHeight: PropTypes.string,
749
- layerBackgroundColor: PropTypes.string
754
+ layerBackgroundColor: PropTypes.string,
755
+ imageMargin: PropTypes.string,
756
+ imageMaxWidth: PropTypes.string,
757
+ imageWrapWidth: PropTypes.string,
758
+ imageWrapHeight: PropTypes.string
750
759
  };
751
760
  Modal.defaultProps = {
752
761
  type: 'content'
@@ -1108,7 +1117,7 @@ const Input = ({
1108
1117
  style: {
1109
1118
  width: width ? width : configStyles.INPUT.width,
1110
1119
  borderRadius: radius ? radius : configStyles.INPUT.radius,
1111
- boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
1120
+ boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover && !disabled ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
1112
1121
  },
1113
1122
  onMouseEnter: handleMouseEnter,
1114
1123
  onMouseLeave: handleMouseLeave
@@ -3425,6 +3434,7 @@ const Textarea = ({
3425
3434
  resize,
3426
3435
  radius,
3427
3436
  padding,
3437
+ disabled,
3428
3438
  required,
3429
3439
  onChange,
3430
3440
  minWidth,
@@ -3530,6 +3540,7 @@ const Textarea = ({
3530
3540
  border: 'none',
3531
3541
  outline: 'none',
3532
3542
  overflow: 'auto',
3543
+ cursor: disabled ? 'not-allowed' : 'auto',
3533
3544
  fontSize: size ? size : configStyles.TEXTAREA.size,
3534
3545
  height: height ? height : configStyles.TEXTAREA.height,
3535
3546
  padding: padding ? padding : configStyles.TEXTAREA.padding,
@@ -3544,6 +3555,7 @@ const Textarea = ({
3544
3555
  resize: resize ? resize : configStyles.TEXTAREA.resize
3545
3556
  },
3546
3557
  value: innerValue,
3558
+ disabled: disabled,
3547
3559
  onBlur: handleBlur,
3548
3560
  onFocus: handleFocus,
3549
3561
  onChange: handleChange,
@@ -3567,6 +3579,7 @@ Textarea.propTypes = {
3567
3579
  resize: PropTypes.string,
3568
3580
  radius: PropTypes.string,
3569
3581
  required: PropTypes.bool,
3582
+ disabled: PropTypes.bool,
3570
3583
  padding: PropTypes.string,
3571
3584
  minWidth: PropTypes.string,
3572
3585
  maxWidth: PropTypes.string,
package/dist/index.js CHANGED
@@ -521,6 +521,9 @@ const Modal = ({
521
521
  backgroundColor,
522
522
  grayDecorHeight,
523
523
  layerBackgroundColor,
524
+ imageMargin,
525
+ imageMaxWidth,
526
+ imageWrapWidth,
524
527
  imageWrapHeight
525
528
  }) => {
526
529
  const [select, setSelect] = React.useState(0);
@@ -658,11 +661,11 @@ const Modal = ({
658
661
  display: 'flex',
659
662
  width: '100%',
660
663
  height: '100%',
661
- overflow: 'hidden',
662
664
  position: 'relative',
663
665
  alignItems: 'center',
664
666
  boxSizing: 'border-box',
665
667
  justifyContent: 'center',
668
+ overflow: type === 'content' ? 'auto' : 'hidden',
666
669
  borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
667
670
  borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
668
671
  borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor
@@ -695,7 +698,7 @@ const Modal = ({
695
698
  }
696
699
  }, /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default["default"].createElement("div", {
697
700
  style: {
698
- width: '100%',
701
+ width: imageWrapWidth ? imageWrapWidth : configStyles.MODAL.imageWrapWidth,
699
702
  height: imageWrapHeight ? imageWrapHeight : configStyles.MODAL.imageWrapHeight
700
703
  }
701
704
  }, innerData && innerData.length > 0 && innerData.map((item, index) => {
@@ -709,9 +712,11 @@ const Modal = ({
709
712
  display: 'block',
710
713
  objectFit: 'cover',
711
714
  objectPosition: 'center',
715
+ margin: imageMargin ? imageMargin : configStyles.MODAL.imageMargin,
712
716
  borderRadius: radius ? radius : configStyles.MODAL.radius,
713
717
  width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
714
- height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
718
+ height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight,
719
+ maxWidth: imageMaxWidth ? imageMaxWidth : configStyles.MODAL.imageMaxWidth
715
720
  },
716
721
  src: item.url,
717
722
  key: item.id ? item.id : index
@@ -776,7 +781,11 @@ Modal.propTypes = {
776
781
  justifyContent: PropTypes__default["default"].string,
777
782
  backgroundColor: PropTypes__default["default"].string,
778
783
  grayDecorHeight: PropTypes__default["default"].string,
779
- layerBackgroundColor: PropTypes__default["default"].string
784
+ layerBackgroundColor: PropTypes__default["default"].string,
785
+ imageMargin: PropTypes__default["default"].string,
786
+ imageMaxWidth: PropTypes__default["default"].string,
787
+ imageWrapWidth: PropTypes__default["default"].string,
788
+ imageWrapHeight: PropTypes__default["default"].string
780
789
  };
781
790
  Modal.defaultProps = {
782
791
  type: 'content'
@@ -1138,7 +1147,7 @@ const Input = ({
1138
1147
  style: {
1139
1148
  width: width ? width : configStyles.INPUT.width,
1140
1149
  borderRadius: radius ? radius : configStyles.INPUT.radius,
1141
- boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
1150
+ boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover && !disabled ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
1142
1151
  },
1143
1152
  onMouseEnter: handleMouseEnter,
1144
1153
  onMouseLeave: handleMouseLeave
@@ -3455,6 +3464,7 @@ const Textarea = ({
3455
3464
  resize,
3456
3465
  radius,
3457
3466
  padding,
3467
+ disabled,
3458
3468
  required,
3459
3469
  onChange,
3460
3470
  minWidth,
@@ -3560,6 +3570,7 @@ const Textarea = ({
3560
3570
  border: 'none',
3561
3571
  outline: 'none',
3562
3572
  overflow: 'auto',
3573
+ cursor: disabled ? 'not-allowed' : 'auto',
3563
3574
  fontSize: size ? size : configStyles.TEXTAREA.size,
3564
3575
  height: height ? height : configStyles.TEXTAREA.height,
3565
3576
  padding: padding ? padding : configStyles.TEXTAREA.padding,
@@ -3574,6 +3585,7 @@ const Textarea = ({
3574
3585
  resize: resize ? resize : configStyles.TEXTAREA.resize
3575
3586
  },
3576
3587
  value: innerValue,
3588
+ disabled: disabled,
3577
3589
  onBlur: handleBlur,
3578
3590
  onFocus: handleFocus,
3579
3591
  onChange: handleChange,
@@ -3597,6 +3609,7 @@ Textarea.propTypes = {
3597
3609
  resize: PropTypes__default["default"].string,
3598
3610
  radius: PropTypes__default["default"].string,
3599
3611
  required: PropTypes__default["default"].bool,
3612
+ disabled: PropTypes__default["default"].bool,
3600
3613
  padding: PropTypes__default["default"].string,
3601
3614
  minWidth: PropTypes__default["default"].string,
3602
3615
  maxWidth: PropTypes__default["default"].string,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.108",
3
+ "version": "0.0.109",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/input/index.js CHANGED
@@ -409,7 +409,7 @@ export const Input = ({
409
409
  ? errorColor
410
410
  ? `0 0 0 2px ${errorColor}`
411
411
  : `0 0 0 2px ${configStyles.INPUT.errorColor}`
412
- : isHover
412
+ : isHover && !disabled
413
413
  ? boxShadowHover
414
414
  ? boxShadowHover
415
415
  : configStyles.INPUT.boxShadowHover
package/src/components/modal/index.js CHANGED
@@ -41,6 +41,9 @@ export const Modal = ({
41
41
  backgroundColor,
42
42
  grayDecorHeight,
43
43
  layerBackgroundColor,
44
+ imageMargin,
45
+ imageMaxWidth,
46
+ imageWrapWidth,
44
47
  imageWrapHeight,
45
48
  }) => {
46
49
  const [select, setSelect] = useState(0)
@@ -204,11 +207,11 @@ export const Modal = ({
204
207
  display: 'flex',
205
208
  width: '100%',
206
209
  height: '100%',
207
- overflow: 'hidden',
208
210
  position: 'relative',
209
211
  alignItems: 'center',
210
212
  boxSizing: 'border-box',
211
213
  justifyContent: 'center',
214
+ overflow: type === 'content' ? 'auto' : 'hidden',
212
215
  borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
213
216
  borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
214
217
  borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor,
@@ -255,7 +258,7 @@ export const Modal = ({
255
258
  </div>
256
259
  <div
257
260
  style={{
258
- width: '100%',
261
+ width: imageWrapWidth ? imageWrapWidth : configStyles.MODAL.imageWrapWidth,
259
262
  height: imageWrapHeight ? imageWrapHeight : configStyles.MODAL.imageWrapHeight,
260
263
  }}
261
264
  >
@@ -273,6 +276,9 @@ export const Modal = ({
273
276
  display: 'block',
274
277
  objectFit: 'cover',
275
278
  objectPosition: 'center',
279
+ margin: imageMargin
280
+ ? imageMargin
281
+ : configStyles.MODAL.imageMargin,
276
282
  borderRadius: radius
277
283
  ? radius
278
284
  : configStyles.MODAL.radius,
@@ -282,6 +288,9 @@ export const Modal = ({
282
288
  height: imageHeight
283
289
  ? imageHeight
284
290
  : configStyles.MODAL.imageHeight,
291
+ maxWidth: imageMaxWidth
292
+ ? imageMaxWidth
293
+ : configStyles.MODAL.imageMaxWidth,
285
294
  }}
286
295
  src={item.url}
287
296
  key={item.id ? item.id : index}
@@ -368,6 +377,10 @@ Modal.propTypes = {
368
377
  backgroundColor: PropTypes.string,
369
378
  grayDecorHeight: PropTypes.string,
370
379
  layerBackgroundColor: PropTypes.string,
380
+ imageMargin: PropTypes.string,
381
+ imageMaxWidth: PropTypes.string,
382
+ imageWrapWidth: PropTypes.string,
383
+ imageWrapHeight: PropTypes.string,
371
384
  }
372
385
 
373
386
  Modal.defaultProps = {
package/src/components/table/table.stories.js CHANGED
@@ -144,6 +144,9 @@ const bodyData = [
144
144
  checkedColor: 'green',
145
145
  unCheckedColor: 'green',
146
146
  },
147
+ status: {
148
+ color: '#EE0000',
149
+ },
147
150
  },
148
151
  hvhh: {
149
152
  content: 14595524,
@@ -197,6 +200,9 @@ const bodyData = [
197
200
  checkedColor: 'green',
198
201
  unCheckedColor: 'green',
199
202
  },
203
+ status: {
204
+ color: '#FECD29',
205
+ },
200
206
  },
201
207
  hvhh: {
202
208
  content: 14595524,
@@ -250,6 +256,9 @@ const bodyData = [
250
256
  checkedColor: 'green',
251
257
  unCheckedColor: 'green',
252
258
  },
259
+ status: {
260
+ color: '#0DA574',
261
+ },
253
262
  },
254
263
  hvhh: {
255
264
  content: 14595524,
package/src/components/table/td.js CHANGED
@@ -33,7 +33,7 @@ const TD = ({
33
33
  textAlign: tBodyTextAlign,
34
34
  fontFamily: tBodyFontFamily,
35
35
  fontWeight: tBodyFontWeight,
36
- boxShadow: item.status ? '-3px 0px 0px 0px black ' : '',
36
+ boxShadow: item.status ? `inset 3px 0px 0px 0px ${item.status.color}` : '',
37
37
  }}
38
38
  >
39
39
  {Array.isArray(item) ? (
package/src/components/textarea/index.js CHANGED
@@ -16,6 +16,7 @@ export const Textarea = ({
16
16
  resize,
17
17
  radius,
18
18
  padding,
19
+ disabled,
19
20
  required,
20
21
  onChange,
21
22
  minWidth,
@@ -154,6 +155,7 @@ export const Textarea = ({
154
155
  border: 'none',
155
156
  outline: 'none',
156
157
  overflow: 'auto',
158
+ cursor: disabled ? 'not-allowed' : 'auto',
157
159
  fontSize: size ? size : configStyles.TEXTAREA.size,
158
160
  height: height ? height : configStyles.TEXTAREA.height,
159
161
  padding: padding ? padding : configStyles.TEXTAREA.padding,
@@ -182,6 +184,7 @@ export const Textarea = ({
182
184
  resize: resize ? resize : configStyles.TEXTAREA.resize,
183
185
  }}
184
186
  value={innerValue}
187
+ disabled={disabled}
185
188
  onBlur={handleBlur}
186
189
  onFocus={handleFocus}
187
190
  onChange={handleChange}
@@ -215,6 +218,7 @@ Textarea.propTypes = {
215
218
  resize: PropTypes.string,
216
219
  radius: PropTypes.string,
217
220
  required: PropTypes.bool,
221
+ disabled: PropTypes.bool,
218
222
  padding: PropTypes.string,
219
223
  minWidth: PropTypes.string,
220
224
  maxWidth: PropTypes.string,
package/src/components/textarea/textarea.stories.js CHANGED
@@ -20,6 +20,7 @@ export const Default = Template.bind({})
20
20
  Default.args = {
21
21
  label: 'Label for textarea',
22
22
  required: true,
23
+ disabled: false,
23
24
  size: '16px',
24
25
  radius: '6px',
25
26
  errorSize: '',
package/src/stories/configuration.stories.mdx CHANGED
@@ -605,6 +605,10 @@ import StackAlt from './assets/stackalt.svg';
605
605
  layerBackgroundColor: 'rgba(0,0,0,0.4)', // for modal parent layer background color
606
606
  borderWidth: '20px', // for modal padding from border transparent
607
607
  borderStyle: 'solid', // for modal border style
608
+ imageMargin: '0px', // for image margin
609
+ imageMaxWidth: '100%', // for image max width
610
+ imageWrapHeight: '80vh', // for image wrap
611
+ imageWrapWidth: '100%', // for image wrap
608
612
  }
609
613
  ```
610
614
 
package/tui.config.js CHANGED
@@ -402,7 +402,10 @@ module.exports = {
402
402
  borderWidth: '20px', // for modal padding from border transparent
403
403
  borderStyle: 'solid', // for modal border style
404
404
  borderColor: 'transparent', // for modal border color
405
+ imageMargin: '0px', // for image margin
406
+ imageMaxWidth: '100%', // for image max width
405
407
  imageWrapHeight: '80vh', // for image wrap
408
+ imageWrapWidth: '100%', // for image wrap
406
409
  },
407
410
  SINGLECHECKBOX: {
408
411
  checkedColor: '#00236A', // for checkbox background ( fill ) color