@xaypay/tui 0.0.69 → 0.0.70

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 (26) hide show
  1. package/dist/index.es.js +595 -166
  2. package/dist/index.js +596 -166
  3. package/package.json +1 -1
  4. package/src/assets/icons/range-arrow-default.svg +19 -0
  5. package/src/assets/icons/range-arrow-error.svg +19 -0
  6. package/src/assets/icons/range-arrow-success.svg +19 -0
  7. package/src/components/captcha/captcha.module.css +61 -62
  8. package/src/components/captcha/captcha.stories.js +5 -4
  9. package/src/components/captcha/index.js +143 -56
  10. package/src/components/file/file.module.css +1 -1
  11. package/src/components/file/index.js +8 -5
  12. package/src/components/icon/CaptchaArrowDown.js +19 -0
  13. package/src/components/icon/CaptchaArrowUp.js +19 -0
  14. package/src/components/icon/PDF.js +19 -0
  15. package/src/components/icon/index.js +15 -10
  16. package/src/components/newAutocomplete/NewAutocomplete.stories.js +50 -0
  17. package/src/components/newAutocomplete/index.js +407 -0
  18. package/src/index.js +2 -1
  19. package/src/stories/configuration.stories.mdx +86 -0
  20. package/src/stories/static/captcha-usage.png +0 -0
  21. package/src/stories/static/new-autocomplete-usage.png +0 -0
  22. package/src/stories/usage.stories.mdx +10 -3
  23. package/tui.config.js +98 -22
  24. package/src/components/captcha/blue.png +0 -0
  25. package/src/components/captcha/green.png +0 -0
  26. package/src/components/captcha/red.png +0 -0
package/tui.config.js CHANGED
@@ -228,27 +228,103 @@ module.exports = {
228
228
  },
229
229
  // default properties for <Textarea /> component
230
230
  TEXTAREA: {
231
- size: '16px',
232
- radius: '6px',
233
- width: '400px',
234
- height: '134px',
235
- color: '#3C393E',
236
- minWidth: '200px',
237
- maxWidth: '500px',
238
- labelSize: '16px',
239
- resize: 'vertical',
240
- minHeight: '100px',
241
- maxHeight: '300px',
242
- border: '2px solid',
243
- padding: '12px 15px',
244
- labelColor: '#3C393E',
245
- labelWeight: 'normal',
246
- labelDisplay: 'block',
247
- borderColor: '#D1D1D1',
248
- boxSizing: 'border-box',
249
- backgroundColor: 'white',
250
- borderHoverColor: '#3C393E',
251
- borderFocusColor: '#00236A',
252
- labelRequiredColor: '#ee0000',
231
+ size: '16px', // for font size
232
+ radius: '6px', // for border radius
233
+ width: '400px', // for width
234
+ resize: 'none', // for resize
235
+ height: '134px', // for height
236
+ maxLength: 1500, // for characters maximum count
237
+ color: '#3C393E', // for color
238
+ minWidth: '200px', // for minimum width
239
+ maxWidth: '500px', // for maximum width
240
+ labelSize: '16px', // for label font size
241
+ minHeight: '100px', // for minimum height
242
+ maxHeight: '300px', // for maximum height
243
+ border: '2px solid', // for border
244
+ padding: '12px 15px', // for padding
245
+ labelColor: '#3C393E', // for label color
246
+ labelWeight: 'normal', // for label font weight
247
+ labelDisplay: 'block', // for label display
248
+ borderColor: '#D1D1D1', // for border color
249
+ boxSizing: 'border-box', // for box sizing
250
+ backgroundColor: 'white', // for background color
251
+ borderHoverColor: '#3C393E', // for border color when hover action is happaning
252
+ borderFocusColor: '#00236A', // for boredr color when focus action is happaning
253
+ labelRequiredColor: '#ee0000', // for label required mark color
254
+ },
255
+ // default properties for <NewAutocomplete /> component
256
+ NEWAUTOCOMPLETE: {
257
+ labelWeight: 500, // for label font weight
258
+ labelSize: '16px', // for label font size
259
+ labelColor: '#3c393e', // for label color
260
+ labelDisplay: 'block', // for label display
261
+ labelLineHeight: '22px', // for label line height
262
+ labelMarginBottom: '6px', // for label margin bottom
263
+ labelTextTransform: 'none', // for label text transform
264
+ labelRequiredColor: '#ee0000', // for label required mark color
265
+
266
+ searchCount: 3, // for autocomplete show result logic
267
+ errorSize: '16px', // for error font size
268
+ autoComplete: 'off', // for off auto fill functionality ( browser specific, maybe will not work )
269
+ errorColor: '#ee0000', // for error color
270
+
271
+ contentDisplay: 'flex', // for autocomplete parent block display
272
+ contentDirection: 'column', // for autocomplete parent block flex direction
273
+ contentPosition: 'relative', // for autocomplete parent block position
274
+ showOptionDuration: '640ms', // for autocomplete parent block animation duration
275
+
276
+ contentTopWeight: 500, // for autocomplate top block font weight
277
+ contentTopSize: '16px', // for autocomplate top block font size
278
+ contentTopRadius: '6px', // for autocomplate top block border radius
279
+ contentTopHeight: '46px', // for autocomplate top block height
280
+ contentTopDisplay: 'flex', // for autocomplate top block display
281
+ contentTopDirection: 'row', // for autocomplate top block flex direction
282
+ contentTopColor: '#3C393E', // for autocomplate top block color
283
+ contentTopMaxWidth: '400px', // for autocomplate top block max width
284
+ contentTopLineHeight: '22px', // for autocomplate top block line height
285
+ contentTopPadding: '0px 15px', // for autocomplate top block padding
286
+ contentTopBorder: '2px solid', // for autocomplate top block border
287
+ contentTopBorderColor: '#D1D1D1', // for autocomplate top block border color
288
+ contentTopBoxSizing: 'border-box', // for autocomplate top block box sizing
289
+ contentTopBorderHoverColor: '#3C393E', // for autocomplate top block border hover color
290
+ contentTopBorderActiveColor: '#00236A', // for autocomplate top block border active color
291
+
292
+ contentBottomZindex: 1, // for autocomplete bottom block z-index
293
+ contentBottomLeft: '0px', // for autocomplete bottom block left
294
+ contentBottomRadius: '6px', // for autocomplete bottom block border radius
295
+ contentBottomWidth: '100%', // for autocomplete bottom block width
296
+ contentBottomMinHeight: '0px', // for autocomplete bottom block minimal height
297
+ contentBottomMaxWidth: '400px', // for autocomplete bottom block maximum width
298
+ contentBottomOverflow: 'hidden', // for autocomplete bottom block overflow
299
+ contentBottomPosition: 'absolute', // for autocomplete bottom block position
300
+ contentBottomBackgroundColor: '#FBFBFB', // for autocomplete bottom block background color
301
+ contentBottomBoxShadow: '0 0 10px rgba(60, 57, 62, 0.08)', // for autocomplete bottom block box shadow
302
+
303
+ contentBottomInnerDisplay: 'flex', // for autocomplete bottom block inner display
304
+ contentBottomInnerOverflowY: 'auto', // for autocomplete bottom block inner overflow y
305
+ contentBottomInnerMaxHeight: '234px', // for autocomplete bottom block inner maximum height
306
+ contentBottomInnerOverflowX: 'hidden', // for autocomplete bottom block inner overflow x
307
+ contentBottomInnerDirection: 'column', // for autocomplete bottom block inner flex direction
308
+
309
+ contentBottomRowHeight: '46px', // for autocomplete bottom block inner row height
310
+ contentBottomRowDisplay: 'flex', // for autocomplete bottom block inner row display
311
+ contentBottomRowFontWeight: 500, // for autocomplete bottom block inner row font weight
312
+ contentBottomRowColor: '#3C393E', // for autocomplete bottom block inner row color
313
+ contentBottomRowFontSize: '16px', // for autocomplete bottom block inner row font size
314
+ contentBottomRowCursor: 'pointer', // for autocomplete bottom block inner row cursor
315
+ contentBottomRowLineHeight: '22px', // for autocomplete bottom block inner row line height
316
+ contentBottomRowMarginBottom: '2px', // for autocomplete bottom block inner row margin bottom
317
+ contentBottomRowPadding: '0px 15px', // for autocomplete bottom block inner row padding
318
+ contentBottomRowAlignItems: 'center', // for autocomplete bottom block inner row align items ( flex )
319
+ contentBottomRowHoverColor: '#00236A', // for autocomplete bottom block inner row hove color
320
+ contentBottomRowBoxSizing: 'border-box', // for autocomplete bottom block inner row box sizing
321
+ contentBottomRowTransition: 'all 240ms', // for autocomplete bottom block inner row transition
322
+ contentBottomRowBackgroundColor: '#ffffff', // for autocomplete bottom block inner row background color
323
+ contentBottomRowHoverBackgroundColor: 'initial', // for autocomplete bottom block inner row hover background color
324
+ },
325
+ // default properties for <Captcha /> component
326
+ Captcha: {
327
+ size: '16px', // for captcha label font size
328
+ color: '#3C393E' // for captcha label color
253
329
  }
254
330
  };
package/src/components/captcha/blue.png DELETED
Binary file
package/src/components/captcha/green.png DELETED
Binary file
package/src/components/captcha/red.png DELETED
Binary file