@xaypay/tui 0.0.84 → 0.0.85

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 (8) hide show
  1. package/dist/index.es.js +11 -4
  2. package/dist/index.js +11 -4
  3. package/package.json +1 -1
  4. package/src/components/button/index.js +10 -2
  5. package/src/components/newAutocomplete/NewAutocomplete.stories.js +3 -3
  6. package/src/components/newAutocomplete/index.js +2 -2
  7. package/src/stories/configuration.stories.mdx +2 -0
  8. package/tui.config.js +2 -0
package/dist/index.es.js CHANGED
@@ -1095,12 +1095,14 @@ const Button = ({
1095
1095
  disabled,
1096
1096
  className,
1097
1097
  boxSizing,
1098
+ hoverColor,
1098
1099
  transition,
1099
1100
  contentWidth,
1100
1101
  disabledColor,
1101
1102
  textTransform,
1102
1103
  backgroundColor,
1103
1104
  disabledLineColor,
1105
+ backgroundHoverColor,
1104
1106
  disabledBackgroundColor,
1105
1107
  ...props
1106
1108
  }) => {
@@ -1135,9 +1137,9 @@ const Button = ({
1135
1137
  width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
1136
1138
  cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
1137
1139
  textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
1138
- backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
1140
+ backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.backgroundHoverColor : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
1139
1141
  boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor}` : 'none',
1140
- color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : color ? color : configStyles.BUTTON.color
1142
+ color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.hoverColor : color ? color : configStyles.BUTTON.color
1141
1143
  },
1142
1144
  type: type ? type : configStyles.BUTTON.type,
1143
1145
  disabled: disabled ? disabled : configStyles.BUTTON.disabled,
@@ -1166,12 +1168,14 @@ Button.propTypes = {
1166
1168
  padding: PropTypes.string,
1167
1169
  boxSizing: PropTypes.string,
1168
1170
  className: PropTypes.string,
1171
+ hoverColor: PropTypes.string,
1169
1172
  transition: PropTypes.string,
1170
1173
  contentWidth: PropTypes.bool,
1171
1174
  textTransform: PropTypes.string,
1172
1175
  disabledColor: PropTypes.string,
1173
1176
  backgroundColor: PropTypes.string,
1174
1177
  disabledLineColor: PropTypes.string,
1178
+ backgroundHoverColor: PropTypes.string,
1175
1179
  disabledBackgroundColor: PropTypes.string
1176
1180
  };
1177
1181
 
@@ -3880,7 +3884,10 @@ const NewAutocomplete = ({
3880
3884
  id: currentId
3881
3885
  });
3882
3886
  } else {
3883
- change('');
3887
+ change({
3888
+ name: '',
3889
+ id: ''
3890
+ });
3884
3891
  }
3885
3892
  };
3886
3893
  const handleClick = selectedValue => {
@@ -3974,7 +3981,7 @@ const NewAutocomplete = ({
3974
3981
  setId('');
3975
3982
  setInnerValue('');
3976
3983
  }
3977
- }, [selected]);
3984
+ }, []);
3978
3985
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("label", {
3979
3986
  style: {
3980
3987
  color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
package/dist/index.js CHANGED
@@ -1125,12 +1125,14 @@ const Button = ({
1125
1125
  disabled,
1126
1126
  className,
1127
1127
  boxSizing,
1128
+ hoverColor,
1128
1129
  transition,
1129
1130
  contentWidth,
1130
1131
  disabledColor,
1131
1132
  textTransform,
1132
1133
  backgroundColor,
1133
1134
  disabledLineColor,
1135
+ backgroundHoverColor,
1134
1136
  disabledBackgroundColor,
1135
1137
  ...props
1136
1138
  }) => {
@@ -1165,9 +1167,9 @@ const Button = ({
1165
1167
  width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
1166
1168
  cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
1167
1169
  textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
1168
- backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
1170
+ backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.backgroundHoverColor : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
1169
1171
  boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor}` : 'none',
1170
- color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : color ? color : configStyles.BUTTON.color
1172
+ color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.hoverColor : color ? color : configStyles.BUTTON.color
1171
1173
  },
1172
1174
  type: type ? type : configStyles.BUTTON.type,
1173
1175
  disabled: disabled ? disabled : configStyles.BUTTON.disabled,
@@ -1196,12 +1198,14 @@ Button.propTypes = {
1196
1198
  padding: PropTypes__default["default"].string,
1197
1199
  boxSizing: PropTypes__default["default"].string,
1198
1200
  className: PropTypes__default["default"].string,
1201
+ hoverColor: PropTypes__default["default"].string,
1199
1202
  transition: PropTypes__default["default"].string,
1200
1203
  contentWidth: PropTypes__default["default"].bool,
1201
1204
  textTransform: PropTypes__default["default"].string,
1202
1205
  disabledColor: PropTypes__default["default"].string,
1203
1206
  backgroundColor: PropTypes__default["default"].string,
1204
1207
  disabledLineColor: PropTypes__default["default"].string,
1208
+ backgroundHoverColor: PropTypes__default["default"].string,
1205
1209
  disabledBackgroundColor: PropTypes__default["default"].string
1206
1210
  };
1207
1211
 
@@ -3910,7 +3914,10 @@ const NewAutocomplete = ({
3910
3914
  id: currentId
3911
3915
  });
3912
3916
  } else {
3913
- change('');
3917
+ change({
3918
+ name: '',
3919
+ id: ''
3920
+ });
3914
3921
  }
3915
3922
  };
3916
3923
  const handleClick = selectedValue => {
@@ -4004,7 +4011,7 @@ const NewAutocomplete = ({
4004
4011
  setId('');
4005
4012
  setInnerValue('');
4006
4013
  }
4007
- }, [selected]);
4014
+ }, []);
4008
4015
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
4009
4016
  style: {
4010
4017
  color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.84",
3
+ "version": "0.0.85",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/button/index.js CHANGED
@@ -22,12 +22,14 @@ export const Button = ({
22
22
  disabled,
23
23
  className,
24
24
  boxSizing,
25
+ hoverColor,
25
26
  transition,
26
27
  contentWidth,
27
28
  disabledColor,
28
29
  textTransform,
29
30
  backgroundColor,
30
31
  disabledLineColor,
32
+ backgroundHoverColor,
31
33
  disabledBackgroundColor,
32
34
  ...props
33
35
  }) => {
@@ -73,7 +75,9 @@ export const Button = ({
73
75
  textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
74
76
  backgroundColor:
75
77
  (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor :
76
- outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
78
+ outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' :
79
+ !outline && !disabled && isHover? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.backgroundHoverColor :
80
+ backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
77
81
  boxShadow:
78
82
  outline ?
79
83
  disabled ?
@@ -82,7 +86,9 @@ export const Button = ({
82
86
  'none',
83
87
  color:
84
88
  (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor :
85
- outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : color ? color : configStyles.BUTTON.color
89
+ outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor :
90
+ !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.hoverColor :
91
+ color ? color : configStyles.BUTTON.color
86
92
  }}
87
93
  type={type ? type : configStyles.BUTTON.type}
88
94
  disabled={disabled ? disabled : configStyles.BUTTON.disabled}
@@ -116,11 +122,13 @@ Button.propTypes = {
116
122
  padding: PropTypes.string,
117
123
  boxSizing: PropTypes.string,
118
124
  className: PropTypes.string,
125
+ hoverColor: PropTypes.string,
119
126
  transition: PropTypes.string,
120
127
  contentWidth: PropTypes.bool,
121
128
  textTransform: PropTypes.string,
122
129
  disabledColor: PropTypes.string,
123
130
  backgroundColor: PropTypes.string,
124
131
  disabledLineColor: PropTypes.string,
132
+ backgroundHoverColor: PropTypes.string,
125
133
  disabledBackgroundColor: PropTypes.string
126
134
  };
package/src/components/newAutocomplete/NewAutocomplete.stories.js CHANGED
@@ -28,7 +28,7 @@ const Template = (args) => {
28
28
  method: 'GET',
29
29
  headers: {
30
30
  'Content-Type': 'application/json',
31
- 'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6IjYyYTU0MzhmYjY3ODZmYzgzY2NkZmVkMGNlYzExZDZjY2IxNmRhNWJhYTVlOTMwMWVjNDU2MWRmYzIyMDcyYTc0ZjEyY2IxZGEzOTJlMjE5IiwiaWF0IjoxNjg2MDM0NTA0LjU5OTMzOSwibmJmIjoxNjg2MDM0NTA0LjU5OTM2NywiZXhwIjoxNjg2MDU5NzA0LjU4NDkxMiwic3ViIjoibWluYXM4OUBtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.DzzdZFLHiFTyUIlKIK25IMSxnjI0cQ5EaUT3vdMoZT3XjclPA1uohP4hiRr30Duy6psyOcPuQuZ2t8KuGUy5n500Di-Wbw0tZDVW-ctyOQNQRPjcTL41lN7xrTaRzxrkSa3KHlZT0_w4KjHTp32wo6XHWjLwrbZIFlBBbJv-bMBqj0KIcsLWHBMfHb2lU8UK6_xMgSbsV_E3FzrhbgmBeFifBTn9BVkduz450jWKmib5zKFRv4lqpFrMJo7gOQRj0-uQliCCdtnvOBW3QqBeT0Zl-RFH-Vc22GAxSYWF7PZ1M-tOZ2PlR7pyfJabp6nEtsRii5PhoejUBAynYmZBKxY-TvKGjfpOXcULm2w0zIqrV2KRf4acj189Kok_nE5rpReqc0xk6hxDdhyBPdBDtgm58c25G_fkkSpMJvDyZg0fqpCB7wkYfGpqeYH-eW4KYuZeReU1OyIKCTxBJhDfcFqZRb4x7TUIxNoFXknLhhU4mB7t75ZZxpUwtJRXqF_Ps8eiBWcfmt5uZfVQqzFXcBlx6lmDwBn7RIF0jy5oKvs6ss5mBjv0SdKSJrpRMa9GIVT9lUJDqKA15JZIGXdugjBXwlrzFfekePXA_7AAFrxgS0Dn7EZJCh7EmBdGG3slPLRtnkcVru2AOLHZ-aRPtVluzxgip9RU23VMVXvoX-I',
31
+ 'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6IjJjNDMwNzVlNzExZTc4OWI1YzE3ZTY1OGZmMjdmZWZiMWU3NWU3ZGVkYjU5MTJlNjExMjg1YzE5YjAxZDQwYjc0OTg0ZTk5OTI0MTkxY2M0IiwiaWF0IjoxNjg2MjAxNDM4LjEyMzYwNiwibmJmIjoxNjg2MjAxNDM4LjEyMzYxMywiZXhwIjoxNjg2MjI2NjM4LjEwOTI5Niwic3ViIjoibWluYXM4OUBtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.EaNRUEWtVxPAV0yD5Ci53zxCRgxqw4ljfDEkkVcLqh8ypcymHDBITyQJackmopdTi9pqLq43G9XVynBgB5SYDp3mmfpJGdFipFLYG2h6X4VNFmwNaLDi5fAOzZ7bQCg3DDVcQ-_jYc4ph2PJYQT2ZafZ4EPwIBScra-PqrxvkdB7ww5KLELGRdDeqOVhGbXFWxe72gzjL_rAg9YTYEFjP-Qmue-Qqx_sYzRu1fuN8xZ0HJnEB5Ctzpdf8dV4qbb5SyOCtqbR34uTR7iFVu73kzw_udJvtyaywUjWXVrVlh-VOVgHEaUVmktyfwYo8dw6L3KIVWzkx09SePa4YpH5t6XyPD5sFbL7sx-fP3_uiiCtjAZc7vzRZmfbvOQc3C3-28FgjUADtV3f1qf5Kvdss4_8Q0iXaC2-SGHNcVL7SecD68l_px5Jl16mmkRCklo86EEWcV3Av-fAYnQ-4-6sVgkRtfABqi79gQfZac_emBxGEDE4trI81U6ApfTMcaRLfIehJauz9m94zwOyHPIv4t-1eLGRl0wvCTP8BLhgpMWq6F1UfHpTSSnr6dVTBv8IUKjTe4wJfwgU_TCnVbb0sZa2L3GR3vNsf1kDTe5sgOTCaq8INp-VfhxeULQr2eQaP2vTE4zrghKnQTA1YF1n1Hth4Rgc6pEhqW8f0oO-9Wk',
32
32
  },
33
33
  }).then((res)=> {
34
34
  return res.json()
@@ -42,11 +42,11 @@ const Template = (args) => {
42
42
  });
43
43
  };
44
44
 
45
- return <NewAutocomplete {...args} getItem={handleClick} options={newOptions} change={handleChange} />
45
+ return <NewAutocomplete {...args} getItem={handleClick} selected={{ "bbb":"0", "name":"gasdfgdsfgdsg" }} options={newOptions} change={handleChange} />
46
46
  };
47
47
  export const Default = Template.bind({});
48
48
  Default.args = {
49
49
  searchCount: 3,
50
50
  keyNames: { name: 'name', id: 'bbb' },
51
- selected: { "bbb":"0", "name":"gasdfgdsfgdsg" },
51
+ selected: { "bbb":"0", "name":"gasdfgdsfgdsg" }
52
52
  }
package/src/components/newAutocomplete/index.js CHANGED
@@ -131,7 +131,7 @@ export const NewAutocomplete = ({
131
131
  if (value.length >= searchCount) {
132
132
  change({ name: value, id: currentId });
133
133
  } else {
134
- change('');
134
+ change({ name: '', id: '' });
135
135
  }
136
136
  };
137
137
 
@@ -270,7 +270,7 @@ export const NewAutocomplete = ({
270
270
  setId('');
271
271
  setInnerValue('');
272
272
  }
273
- }, [selected]);
273
+ }, []);
274
274
 
275
275
  return (
276
276
  <>
package/src/stories/configuration.stories.mdx CHANGED
@@ -144,6 +144,8 @@ import StackAlt from './assets/stackalt.svg';
144
144
  disabledLineColor: 'rgba(60, 57, 62, 1)', // for border color (outline) in disabled mode
145
145
  disabledBackgroundColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
146
146
  transition: 'background-color 240ms, color 240ms', // for transition
147
+ hoverColor: '#001745', // for hover color
148
+ backgroundHoverColor: '#CB3A3A' // for hover background color
147
149
  }
148
150
  ```
149
151
 
package/tui.config.js CHANGED
@@ -21,6 +21,8 @@ module.exports = {
21
21
  disabledLineColor: 'rgba(60, 57, 62, 1)', // for border color (outline) in disabled mode
22
22
  disabledBackgroundColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
23
23
  transition: 'background-color 240ms, color 240ms', // for transition
24
+ hoverColor: '#001745', // for hover color
25
+ backgroundHoverColor: '#CB3A3A' // for hover background color
24
26
  },
25
27
  // default properties for <Input /> component
26
28
  INPUT: {