@xaypay/tui 0.0.100 → 0.0.101

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 (9) hide show
  1. package/dist/index.es.js +21 -16
  2. package/dist/index.js +21 -16
  3. package/package.json +1 -1
  4. package/src/components/icon/Next.js +4 -5
  5. package/src/components/icon/Prev.js +4 -5
  6. package/src/components/input/index.js +1 -1
  7. package/src/components/select/index.js +3 -4
  8. package/src/stories/configuration.stories.mdx +1 -0
  9. package/tui.config.js +2 -2
package/dist/index.es.js CHANGED
@@ -323,7 +323,6 @@ styleInject(css_248z$d);
323
323
  const SvgNext = ({
324
324
  title,
325
325
  titleId,
326
- fillColor,
327
326
  ...props
328
327
  }) => /*#__PURE__*/React.createElement("svg", _extends({
329
328
  width: "24",
@@ -334,17 +333,19 @@ const SvgNext = ({
334
333
  "aria-labelledby": titleId
335
334
  }, props), title ? /*#__PURE__*/React.createElement("title", {
336
335
  id: titleId
337
- }, title) : null, /*#__PURE__*/React.createElement("path", {
338
- fillRule: "evenodd",
339
- clipRule: "evenodd",
340
- d: "M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm3.4-11.443a.854.854 0 0 0 .198-.548.855.855 0 0 0-.146-.539l-4.137-5.134a.857.857 0 0 0-1.251-.12.856.856 0 0 0-.129 1.207l3.701 4.586-3.838 4.587a.856.856 0 0 0 .739 1.4.858.858 0 0 0 .58-.305l4.284-5.134Z",
341
- fill: fillColor ? fillColor : '#fff'
336
+ }, title) : null, /*#__PURE__*/React.createElement("circle", {
337
+ cx: 12,
338
+ cy: 12,
339
+ r: 12,
340
+ fill: "#fff"
341
+ }), /*#__PURE__*/React.createElement("path", {
342
+ d: "M15.598 12.01c0 .2-.07.393-.197.547l-4.284 5.134a.858.858 0 0 1-1.319-1.095l3.838-4.587-3.7-4.586a.855.855 0 0 1 .128-1.206.857.857 0 0 1 1.25.12l4.138 5.133a.855.855 0 0 1 .146.54Z",
343
+ fill: "#3C393E"
342
344
  }));
343
345
 
344
346
  const SvgPrev = ({
345
347
  title,
346
348
  titleId,
347
- fillColor,
348
349
  ...props
349
350
  }) => /*#__PURE__*/React.createElement("svg", _extends({
350
351
  width: "24",
@@ -355,11 +356,15 @@ const SvgPrev = ({
355
356
  "aria-labelledby": titleId
356
357
  }, props), title ? /*#__PURE__*/React.createElement("title", {
357
358
  id: titleId
358
- }, title) : null, /*#__PURE__*/React.createElement("path", {
359
- fillRule: "evenodd",
360
- clipRule: "evenodd",
361
- d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0ZM8.6 11.443a.855.855 0 0 0-.198.548c-.013.19.038.38.146.539l4.137 5.133a.857.857 0 0 0 1.251.12.856.856 0 0 0 .129-1.206l-3.701-4.586 3.838-4.587a.856.856 0 0 0-.739-1.4.858.858 0 0 0-.58.305l-4.284 5.134Z",
362
- fill: fillColor ? fillColor : '#fff'
359
+ }, title) : null, /*#__PURE__*/React.createElement("circle", {
360
+ cx: 12,
361
+ cy: 12,
362
+ r: 12,
363
+ transform: "rotate(180 12 12)",
364
+ fill: "#fff"
365
+ }), /*#__PURE__*/React.createElement("path", {
366
+ d: "M8.402 11.99c0-.2.07-.393.197-.547l4.284-5.134a.858.858 0 0 1 1.319 1.095l-3.838 4.587 3.7 4.586a.856.856 0 0 1-.128 1.206.856.856 0 0 1-1.25-.12L8.547 12.53a.855.855 0 0 1-.146-.54Z",
367
+ fill: "#3C393E"
363
368
  }));
364
369
 
365
370
  const SvgCloseIcon = ({
@@ -796,7 +801,7 @@ const Input = ({
796
801
  }
797
802
  }
798
803
  if (type === 'number') {
799
- const regNum = /^\d+(\.)?(\d+)?$/;
804
+ const regNum = /^\d+(\.)?(^\d+)?$/;
800
805
  if (!regNum.test(currentValue)) {
801
806
  const newStr = currentValue.replace(/[^\d+]/g, '');
802
807
  setInnerValue(newStr);
@@ -1594,7 +1599,7 @@ const Select = ({
1594
1599
  }
1595
1600
  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default.createElement("div", {
1596
1601
  className: `${styles$8['select-content-top-icon']}`
1597
- }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), (showCloseIcon ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
1602
+ }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), (showCloseIcon || configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
1598
1603
  className: `${styles$8['close-icon']}`,
1599
1604
  onClick: disabled ? _ => _ : handleClearSelect,
1600
1605
  style: {
@@ -1631,10 +1636,10 @@ const Select = ({
1631
1636
  padding: optionItemPadding ? optionItemPadding : configStyles.SELECT.optionItemPadding,
1632
1637
  fontSize: optionItemFontSize ? optionItemFontSize : configStyles.SELECT.optionItemFontSize,
1633
1638
  boxSizing: optionItemBoxSizing ? optionItemBoxSizing : configStyles.SELECT.optionItemBoxSizing,
1634
- minHeight: !dots && !configStyles.SELECT.dots ? 'auto' : optionItemMinHeight ? optionItemMinHeight : configStyles.SELECT.optionItemMinHeight,
1639
+ minHeight: optionItemMinHeight ? optionItemMinHeight : configStyles.SELECT.optionItemMinHeight,
1635
1640
  fontWeight: optionItemFontWeight ? optionItemFontWeight : configStyles.SELECT.optionItemFontWeight,
1636
1641
  lineHeight: dots || configStyles.SELECT.dots ? '46px' : optionItemLineHeight ? optionItemLineHeight : configStyles.SELECT.optionItemLineHeight,
1637
- marginBottom: !dots && !configStyles.SELECT.dots ? '10px' : optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
1642
+ marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
1638
1643
  backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor
1639
1644
  }
1640
1645
  }, multiple && multipleCheckbox ? /*#__PURE__*/React__default.createElement(SingleCheckbox, {
package/dist/index.js CHANGED
@@ -353,7 +353,6 @@ styleInject(css_248z$d);
353
353
  const SvgNext = ({
354
354
  title,
355
355
  titleId,
356
- fillColor,
357
356
  ...props
358
357
  }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
359
358
  width: "24",
@@ -364,17 +363,19 @@ const SvgNext = ({
364
363
  "aria-labelledby": titleId
365
364
  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
366
365
  id: titleId
367
- }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
368
- fillRule: "evenodd",
369
- clipRule: "evenodd",
370
- d: "M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm3.4-11.443a.854.854 0 0 0 .198-.548.855.855 0 0 0-.146-.539l-4.137-5.134a.857.857 0 0 0-1.251-.12.856.856 0 0 0-.129 1.207l3.701 4.586-3.838 4.587a.856.856 0 0 0 .739 1.4.858.858 0 0 0 .58-.305l4.284-5.134Z",
371
- fill: fillColor ? fillColor : '#fff'
366
+ }, title) : null, /*#__PURE__*/React__namespace.createElement("circle", {
367
+ cx: 12,
368
+ cy: 12,
369
+ r: 12,
370
+ fill: "#fff"
371
+ }), /*#__PURE__*/React__namespace.createElement("path", {
372
+ d: "M15.598 12.01c0 .2-.07.393-.197.547l-4.284 5.134a.858.858 0 0 1-1.319-1.095l3.838-4.587-3.7-4.586a.855.855 0 0 1 .128-1.206.857.857 0 0 1 1.25.12l4.138 5.133a.855.855 0 0 1 .146.54Z",
373
+ fill: "#3C393E"
372
374
  }));
373
375
 
374
376
  const SvgPrev = ({
375
377
  title,
376
378
  titleId,
377
- fillColor,
378
379
  ...props
379
380
  }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
380
381
  width: "24",
@@ -385,11 +386,15 @@ const SvgPrev = ({
385
386
  "aria-labelledby": titleId
386
387
  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
387
388
  id: titleId
388
- }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
389
- fillRule: "evenodd",
390
- clipRule: "evenodd",
391
- d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0ZM8.6 11.443a.855.855 0 0 0-.198.548c-.013.19.038.38.146.539l4.137 5.133a.857.857 0 0 0 1.251.12.856.856 0 0 0 .129-1.206l-3.701-4.586 3.838-4.587a.856.856 0 0 0-.739-1.4.858.858 0 0 0-.58.305l-4.284 5.134Z",
392
- fill: fillColor ? fillColor : '#fff'
389
+ }, title) : null, /*#__PURE__*/React__namespace.createElement("circle", {
390
+ cx: 12,
391
+ cy: 12,
392
+ r: 12,
393
+ transform: "rotate(180 12 12)",
394
+ fill: "#fff"
395
+ }), /*#__PURE__*/React__namespace.createElement("path", {
396
+ d: "M8.402 11.99c0-.2.07-.393.197-.547l4.284-5.134a.858.858 0 0 1 1.319 1.095l-3.838 4.587 3.7 4.586a.856.856 0 0 1-.128 1.206.856.856 0 0 1-1.25-.12L8.547 12.53a.855.855 0 0 1-.146-.54Z",
397
+ fill: "#3C393E"
393
398
  }));
394
399
 
395
400
  const SvgCloseIcon = ({
@@ -826,7 +831,7 @@ const Input = ({
826
831
  }
827
832
  }
828
833
  if (type === 'number') {
829
- const regNum = /^\d+(\.)?(\d+)?$/;
834
+ const regNum = /^\d+(\.)?(^\d+)?$/;
830
835
  if (!regNum.test(currentValue)) {
831
836
  const newStr = currentValue.replace(/[^\d+]/g, '');
832
837
  setInnerValue(newStr);
@@ -1624,7 +1629,7 @@ const Select = ({
1624
1629
  }
1625
1630
  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default["default"].createElement("div", {
1626
1631
  className: `${styles$8['select-content-top-icon']}`
1627
- }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), (showCloseIcon ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
1632
+ }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), (showCloseIcon || configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
1628
1633
  className: `${styles$8['close-icon']}`,
1629
1634
  onClick: disabled ? _ => _ : handleClearSelect,
1630
1635
  style: {
@@ -1661,10 +1666,10 @@ const Select = ({
1661
1666
  padding: optionItemPadding ? optionItemPadding : configStyles.SELECT.optionItemPadding,
1662
1667
  fontSize: optionItemFontSize ? optionItemFontSize : configStyles.SELECT.optionItemFontSize,
1663
1668
  boxSizing: optionItemBoxSizing ? optionItemBoxSizing : configStyles.SELECT.optionItemBoxSizing,
1664
- minHeight: !dots && !configStyles.SELECT.dots ? 'auto' : optionItemMinHeight ? optionItemMinHeight : configStyles.SELECT.optionItemMinHeight,
1669
+ minHeight: optionItemMinHeight ? optionItemMinHeight : configStyles.SELECT.optionItemMinHeight,
1665
1670
  fontWeight: optionItemFontWeight ? optionItemFontWeight : configStyles.SELECT.optionItemFontWeight,
1666
1671
  lineHeight: dots || configStyles.SELECT.dots ? '46px' : optionItemLineHeight ? optionItemLineHeight : configStyles.SELECT.optionItemLineHeight,
1667
- marginBottom: !dots && !configStyles.SELECT.dots ? '10px' : optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
1672
+ marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
1668
1673
  backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor
1669
1674
  }
1670
1675
  }, multiple && multipleCheckbox ? /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.100",
3
+ "version": "0.0.101",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/icon/Next.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- const SvgNext = ({ title, titleId, fillColor, ...props }) => (
2
+ const SvgNext = ({ title, titleId, ...props }) => (
3
3
  <svg
4
4
  width="24"
5
5
  height="24"
@@ -10,11 +10,10 @@ const SvgNext = ({ title, titleId, fillColor, ...props }) => (
10
10
  {...props}
11
11
  >
12
12
  {title ? <title id={titleId}>{title}</title> : null}
13
+ <circle cx={12} cy={12} r={12} fill="#fff" />
13
14
  <path
14
- fillRule="evenodd"
15
- clipRule="evenodd"
16
- d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm3.4-11.443a.854.854 0 0 0 .198-.548.855.855 0 0 0-.146-.539l-4.137-5.134a.857.857 0 0 0-1.251-.12.856.856 0 0 0-.129 1.207l3.701 4.586-3.838 4.587a.856.856 0 0 0 .739 1.4.858.858 0 0 0 .58-.305l4.284-5.134Z"
17
- fill={fillColor ? fillColor : '#fff'}
15
+ d="M15.598 12.01c0 .2-.07.393-.197.547l-4.284 5.134a.858.858 0 0 1-1.319-1.095l3.838-4.587-3.7-4.586a.855.855 0 0 1 .128-1.206.857.857 0 0 1 1.25.12l4.138 5.133a.855.855 0 0 1 .146.54Z"
16
+ fill="#3C393E"
18
17
  />
19
18
  </svg>
20
19
  );
package/src/components/icon/Prev.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- const SvgPrev = ({ title, titleId, fillColor, ...props }) => (
2
+ const SvgPrev = ({ title, titleId, ...props }) => (
3
3
  <svg
4
4
  width="24"
5
5
  height="24"
@@ -10,11 +10,10 @@ const SvgPrev = ({ title, titleId, fillColor, ...props }) => (
10
10
  {...props}
11
11
  >
12
12
  {title ? <title id={titleId}>{title}</title> : null}
13
+ <circle cx={12} cy={12} r={12} transform="rotate(180 12 12)" fill="#fff" />
13
14
  <path
14
- fillRule="evenodd"
15
- clipRule="evenodd"
16
- d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0ZM8.6 11.443a.855.855 0 0 0-.198.548c-.013.19.038.38.146.539l4.137 5.133a.857.857 0 0 0 1.251.12.856.856 0 0 0 .129-1.206l-3.701-4.586 3.838-4.587a.856.856 0 0 0-.739-1.4.858.858 0 0 0-.58.305l-4.284 5.134Z"
17
- fill={fillColor ? fillColor : '#fff'}
15
+ d="M8.402 11.99c0-.2.07-.393.197-.547l4.284-5.134a.858.858 0 0 1 1.319 1.095l-3.838 4.587 3.7 4.586a.856.856 0 0 1-.128 1.206.856.856 0 0 1-1.25-.12L8.547 12.53a.855.855 0 0 1-.146-.54Z"
16
+ fill="#3C393E"
18
17
  />
19
18
  </svg>
20
19
  );
package/src/components/input/index.js CHANGED
@@ -136,7 +136,7 @@ export const Input = ({
136
136
  }
137
137
 
138
138
  if (type === 'number') {
139
- const regNum = /^\d+(\.)?(\d+)?$/;
139
+ const regNum = /^\d+(\.)?(^\d+)?$/;
140
140
  if (!regNum.test(currentValue)) {
141
141
  const newStr = currentValue.replace(/[^\d+]/g, '');
142
142
  setInnerValue(newStr);
package/src/components/select/index.js CHANGED
@@ -270,7 +270,7 @@ export const Select = ({
270
270
  !disabled && multiple && newSelected.length > 1 && <span>{newSelected.length}</span>
271
271
  }
272
272
 
273
- {(showCloseIcon ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 &&
273
+ {(showCloseIcon || configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 &&
274
274
  <div
275
275
  className={`${styles['close-icon']}`}
276
276
  onClick={disabled ? _ => _ : handleClearSelect}
@@ -326,16 +326,15 @@ export const Select = ({
326
326
  padding: optionItemPadding ? optionItemPadding : configStyles.SELECT.optionItemPadding,
327
327
  fontSize: optionItemFontSize ? optionItemFontSize : configStyles.SELECT.optionItemFontSize,
328
328
  boxSizing: optionItemBoxSizing ? optionItemBoxSizing : configStyles.SELECT.optionItemBoxSizing,
329
- minHeight: !dots && !configStyles.SELECT.dots ? 'auto' : optionItemMinHeight ? optionItemMinHeight : configStyles.SELECT.optionItemMinHeight,
329
+ minHeight: optionItemMinHeight ? optionItemMinHeight : configStyles.SELECT.optionItemMinHeight,
330
330
  fontWeight: optionItemFontWeight ? optionItemFontWeight : configStyles.SELECT.optionItemFontWeight,
331
331
  lineHeight: dots || configStyles.SELECT.dots ? '46px' : optionItemLineHeight ? optionItemLineHeight : configStyles.SELECT.optionItemLineHeight,
332
- marginBottom: !dots && !configStyles.SELECT.dots ? '10px' : optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
332
+ marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
333
333
  backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor,
334
334
  }}
335
335
  >
336
336
  {multiple && multipleCheckbox ? <SingleCheckbox checked={option.checked} /> : ''}
337
337
  {option[keyNames.name]}
338
-
339
338
  </div>
340
339
  })
341
340
  }
package/src/stories/configuration.stories.mdx CHANGED
@@ -326,6 +326,7 @@ import StackAlt from './assets/stackalt.svg';
326
326
  ```
327
327
  {
328
328
  dots: false, // for options, cut text and add dots
329
+ showCloseIcon: false, // for select reset icon, when prop exist or true is show, otherwise is hide
329
330
  marginTop: '10px', // for error message postion from top
330
331
  labelWeight: '500', // for label font weight
331
332
  labelColor: '#3C393E', // for label color
package/tui.config.js CHANGED
@@ -182,7 +182,7 @@ module.exports = {
182
182
  // default properties for <Select /> component
183
183
  SELECT: {
184
184
  dots: false, // for options, cut text and add dots
185
- showCloseIcon: true, // for select reset icon, when prop exist or true is show, otherwise is hide
185
+ showCloseIcon: false, // for select reset icon, when prop exist or true is show, otherwise is hide
186
186
  marginTop: '10px', // for error message postion from top
187
187
  labelWeight: '500', // for label font weight
188
188
  labelColor: '#3C393E', // for label color
@@ -217,7 +217,7 @@ module.exports = {
217
217
  optionItemCursor: 'pointer', // for option cursor
218
218
  optionItemMinHeight: '46px', // for option min height
219
219
  optionItemFontWeight: '500', // for option font weight
220
- optionItemLineHeight: '22px', // for option line height
220
+ optionItemLineHeight: '25px', // for option line height
221
221
  optionItemPadding: '0px 15px', // for option padding
222
222
  optionItemMarginBottom: '2px', // for option margin bottom
223
223
  optionItemColorHover: '#00236A', // for option color ( when hover )