@frollo/frollo-web-ui 4.0.0 → 4.0.1

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 (38) hide show
  1. package/cjs/index.js +265 -208
  2. package/esm/{es.number.constructor-1249bd78.js → es.number.constructor-d6ff8874.js} +13 -4
  3. package/esm/{es.string.iterator-284b31d4.js → es.string.iterator-590198a8.js} +1 -2
  4. package/esm/fw-animations.js +3 -4
  5. package/esm/fw-bar-chart.js +3 -4
  6. package/esm/{fw-button-e8b1bd62.js → fw-button-7902ae9e.js} +1 -1
  7. package/esm/fw-button.js +3 -3
  8. package/esm/fw-dropdown.js +1 -1
  9. package/esm/{fw-image-3fa960e1.js → fw-image-c829ed20.js} +3 -3
  10. package/esm/fw-image.js +4 -5
  11. package/esm/fw-input.js +25 -7
  12. package/esm/{fw-loading-spinner-304e2f95.js → fw-loading-spinner-7462e0b2.js} +1 -1
  13. package/esm/fw-loading.js +17 -17
  14. package/esm/fw-modal.js +3 -3
  15. package/esm/fw-navigation-menu.js +3 -3
  16. package/esm/fw-progress-bar.js +1 -2
  17. package/esm/fw-sidebar-menu.js +13 -9
  18. package/esm/fw-table.js +60 -38
  19. package/esm/fw-tabs.js +1 -2
  20. package/esm/fw-toast.js +2 -3
  21. package/esm/fw-transactions-card.js +4 -5
  22. package/esm/{index-c6458115.js → index-dbe0534d.js} +113 -99
  23. package/esm/{index-1a41e7bf.js → index-f0510452.js} +2 -3
  24. package/esm/index.js +11 -12
  25. package/frollo-web-ui.esm.js +268 -209
  26. package/icons/index.ts +3 -1
  27. package/icons/search.svg +3 -0
  28. package/index.d.ts +59 -5
  29. package/package.json +1 -1
  30. package/types/components/fw-input/fw-input.vue.d.ts +34 -0
  31. package/types/components/fw-input/index.types.d.ts +2 -0
  32. package/types/components/fw-sidebar-menu/fw-sidebar-menu.vue.d.ts +4 -3
  33. package/types/components/fw-sidebar-menu/index.types.d.ts +2 -1
  34. package/types/components/fw-table/fw-table.vue.d.ts +14 -0
  35. package/types/components/fw-table/index.types.d.ts +3 -1
  36. package/types/icons/index.d.ts +2 -1
  37. package/web-components/index.js +272 -213
  38. package/esm/to-string-12728fd2.js +0 -13
package/esm/fw-table.js CHANGED
@@ -1,15 +1,15 @@
1
+ import { t as toString$1 } from './es.number.constructor-d6ff8874.js';
1
2
  import { d as deletePropertyOrThrow$1 } from './delete-property-or-throw-8032646c.js';
2
3
  import { i as toAbsoluteIndex$1, l as lengthOfArrayLike$2, j as engineUserAgent, f as functionUncurryThis, k as aCallable$1, e as toObject$1, h as fails$1, m as engineV8Version } from './is-forced-752b5893.js';
3
4
  import { _ as _export } from './export-a37ba078.js';
4
- import { t as toString$1 } from './to-string-12728fd2.js';
5
5
  import { c as createProperty$1 } from './create-property-534611fd.js';
6
6
  import { a as arrayMethodIsStrict$1 } from './array-method-is-strict-055b1830.js';
7
- import { b as render$3, c as render$4 } from './index-c6458115.js';
8
- import { defineComponent, computed, ref, useCssVars, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, withKeys, toDisplayString, createBlock, createCommentVNode, renderSlot, createVNode } from 'vue';
7
+ import { b as render$3, c as render$4 } from './index-dbe0534d.js';
8
+ import { defineComponent, computed, ref, onMounted, useCssVars, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, withKeys, toDisplayString, createBlock, createCommentVNode, renderSlot, createVNode } from 'vue';
9
9
  import { s as script$2 } from './fw-loading-bar-f5ca605c.js';
10
10
  import { s as styleInject } from './style-inject.es-1f59c1d0.js';
11
- import './object-keys-4f5bf4e7.js';
12
11
  import './classof-39c30bd5.js';
12
+ import './object-keys-4f5bf4e7.js';
13
13
  import './check-94a5917a.js';
14
14
 
15
15
  var es_array_sort = {};
@@ -220,9 +220,16 @@ var __default__ = defineComponent({
220
220
  type: Boolean,
221
221
  "default": false
222
222
  },
223
+ /**
224
+ * Enable click events on rows.
225
+ * Emits row data when clicked
226
+ */
223
227
  clickableRows: {
224
228
  type: Boolean,
225
229
  "default": false
230
+ },
231
+ autoSortColumn: {
232
+ type: Number
226
233
  }
227
234
  },
228
235
  setup: function setup(props, ctx) {
@@ -232,6 +239,11 @@ var __default__ = defineComponent({
232
239
  var sortBy = ref('');
233
240
  var sortDirection = ref('asc');
234
241
  var currentSortedColumn = ref('');
242
+ onMounted(function () {
243
+ if (Number(props.autoSortColumn) >= 0) {
244
+ sortColumn(columns.value[Number(props.autoSortColumn)]);
245
+ }
246
+ });
235
247
  var style = getComputedStyle(document.body);
236
248
  var colorPrimary = style.getPropertyValue('--colorPrimary');
237
249
  var bgHoverColor = "".concat(colorPrimary, "0d"); // Adds 5% transparency
@@ -242,7 +254,7 @@ var __default__ = defineComponent({
242
254
  sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc';
243
255
  } else {
244
256
  sortBy.value = column;
245
- sortDirection.value = 'asc';
257
+ sortDirection.value = columnInitSort(column);
246
258
  }
247
259
  };
248
260
  var sortedData = computed(function () {
@@ -282,9 +294,16 @@ var __default__ = defineComponent({
282
294
  }
283
295
  return false;
284
296
  };
297
+ var columnInitSort = function columnInitSort(column) {
298
+ if (props.options && props.options[column]) {
299
+ var _props$options$column4;
300
+ return ((_props$options$column4 = props.options[column]) === null || _props$options$column4 === void 0 ? void 0 : _props$options$column4.initSortOrder) || 'asc';
301
+ }
302
+ return 'asc';
303
+ };
285
304
  var isDisabled = function isDisabled(column) {
286
- var _props$options$column4;
287
- if (props.options && (_props$options$column4 = props.options[column]) !== null && _props$options$column4 !== void 0 && _props$options$column4.disabled) {
305
+ var _props$options$column5;
306
+ if (props.options && (_props$options$column5 = props.options[column]) !== null && _props$options$column5 !== void 0 && _props$options$column5.disabled) {
288
307
  return true;
289
308
  }
290
309
  return false;
@@ -311,7 +330,7 @@ var __default__ = defineComponent({
311
330
  var __injectCSSVars__ = function __injectCSSVars__() {
312
331
  useCssVars(function (_ctx) {
313
332
  return {
314
- "1172a117": _ctx.bgHoverColor
333
+ "015ddfb2": _ctx.bgHoverColor
315
334
  };
316
335
  });
317
336
  };
@@ -322,44 +341,47 @@ __default__.setup = __setup__ ? function (props, ctx) {
322
341
  } : __injectCSSVars__;
323
342
 
324
343
  var _withScopeId = function _withScopeId(n) {
325
- return pushScopeId("data-v-1f477224"), n = n(), popScopeId(), n;
344
+ return pushScopeId("data-v-29e0d2d4"), n = n(), popScopeId(), n;
326
345
  };
327
- var _hoisted_1$2 = {
346
+ var _hoisted_1$2 = ["aria-busy"];
347
+ var _hoisted_2$1 = {
328
348
  "class": "text-p2 border-b border-grey-40"
329
349
  };
330
- var _hoisted_2$1 = ["tabindex", "onKeydown", "onClick"];
331
- var _hoisted_3$1 = {
350
+ var _hoisted_3$1 = ["tabindex", "onKeydown", "onClick"];
351
+ var _hoisted_4 = {
332
352
  "class": "flex flex-row items-center"
333
353
  };
334
- var _hoisted_4 = {
354
+ var _hoisted_5 = {
335
355
  key: 0,
336
356
  "class": "ml-1 flex items-center justify-center w-5"
337
357
  };
338
- var _hoisted_5 = {
358
+ var _hoisted_6 = {
339
359
  "class": "text-p2 bg-white font-light"
340
360
  };
341
- var _hoisted_6 = {
361
+ var _hoisted_7 = {
342
362
  key: 0,
343
- "class": "py-4 px-5 text-left whitespace-nowrap"
363
+ "class": "py-4 pl-5 pr-3 text-left"
344
364
  };
345
- var _hoisted_7 = {
365
+ var _hoisted_8 = {
346
366
  key: 0,
347
- "class": "py-4 px-5 text-left whitespace-nowrap"
367
+ "class": "py-4 pl-5 pr-3 text-left"
348
368
  };
349
- var _hoisted_8 = ["onClick", "tabindex", "onKeydown"];
350
- var _hoisted_9 = ["innerHTML"];
369
+ var _hoisted_9 = ["onClick", "tabindex", "onKeydown"];
370
+ var _hoisted_10 = ["innerHTML"];
351
371
  function render$2(_ctx, _cache, $props, $setup, $data, $options) {
352
372
  var _component_ArrowSortSvg = resolveComponent("ArrowSortSvg");
353
373
  var _component_ArrowDownSvg = resolveComponent("ArrowDownSvg");
354
374
  var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
355
375
  return openBlock(), createElementBlock("table", {
356
- "class": normalizeClass(["fw-table table-auto table-responsive rounded-md shadow-card", _ctx.loading ? 'cursor-wait' : ''])
357
- }, [createElementVNode("thead", _hoisted_1$2, [createElementVNode("tr", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, thKey) {
376
+ "class": normalizeClass(["fw-table table-auto table-responsive rounded-md shadow-card", _ctx.loading ? 'cursor-wait' : '']),
377
+ "aria-live": "polite",
378
+ "aria-busy": _ctx.loading
379
+ }, [createElementVNode("thead", _hoisted_2$1, [createElementVNode("tr", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, thKey) {
358
380
  return openBlock(), createElementBlock(Fragment, {
359
381
  key: thKey
360
382
  }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("th", {
361
383
  key: 0,
362
- "class": normalizeClass(["fw-table-head py-6 px-5 text-left font-medium", _ctx.isColumnSortable(column) ? 'cursor-pointer fw-table-head--sortable' : '']),
384
+ "class": normalizeClass(["fw-table-head py-6 pl-5 pr-3 text-left font-medium", _ctx.isColumnSortable(column) ? 'cursor-pointer fw-table-head--sortable' : '']),
363
385
  tabindex: _ctx.isColumnSortable(column) ? 0 : -1,
364
386
  onKeydown: withKeys(function ($event) {
365
387
  return _ctx.sortColumn(column);
@@ -367,21 +389,21 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
367
389
  onClick: function onClick($event) {
368
390
  return _ctx.sortColumn(column);
369
391
  }
370
- }, [createElementVNode("div", _hoisted_3$1, [createElementVNode("span", {
392
+ }, [createElementVNode("div", _hoisted_4, [createElementVNode("span", {
371
393
  "class": normalizeClass(_ctx.sortedIcon('asc', column) || _ctx.sortedIcon('desc', column) ? 'text-primary' : '')
372
- }, toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_4, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowSortSvg, {
394
+ }, toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_5, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowSortSvg, {
373
395
  key: 0,
374
396
  "class": "inline-block w-full text-grey-base"
375
- })) : createCommentVNode("", true), _ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
397
+ })) : createCommentVNode("", true), _ctx.sortedIcon('asc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
376
398
  key: 1,
377
399
  "class": "inline-block w-4 text-primary rotate-180"
378
- })) : createCommentVNode("", true), _ctx.sortedIcon('asc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
400
+ })) : createCommentVNode("", true), _ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
379
401
  key: 2,
380
402
  "class": "inline-block w-4 text-primary"
381
- })) : createCommentVNode("", true)])) : createCommentVNode("", true)])], 42, _hoisted_2$1)) : createCommentVNode("", true)], 64);
403
+ })) : createCommentVNode("", true)])) : createCommentVNode("", true)])], 42, _hoisted_3$1)) : createCommentVNode("", true)], 64);
382
404
  }), 128)), _ctx.$slots.head ? renderSlot(_ctx.$slots, "head", {
383
405
  key: 0
384
- }) : createCommentVNode("", true)])]), createElementVNode("tbody", _hoisted_5, [_ctx.loading ? (openBlock(true), createElementBlock(Fragment, {
406
+ }) : createCommentVNode("", true)])]), createElementVNode("tbody", _hoisted_6, [_ctx.loading ? (openBlock(true), createElementBlock(Fragment, {
385
407
  key: 0
386
408
  }, renderList(_ctx.sortedData, function (row, trKey) {
387
409
  return openBlock(), createElementBlock("tr", {
@@ -389,10 +411,10 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
389
411
  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, colKey) {
390
412
  return openBlock(), createElementBlock(Fragment, {
391
413
  key: colKey
392
- }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", _hoisted_6, [createVNode(_component_FwLoadingBar, {
414
+ }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", _hoisted_7, [createVNode(_component_FwLoadingBar, {
393
415
  "class": "w-full h-7"
394
416
  })])) : createCommentVNode("", true)], 64);
395
- }), 128)), _ctx.$slots.row ? (openBlock(), createElementBlock("td", _hoisted_7, [createVNode(_component_FwLoadingBar, {
417
+ }), 128)), _ctx.$slots.row ? (openBlock(), createElementBlock("td", _hoisted_8, [createVNode(_component_FwLoadingBar, {
396
418
  "class": "w-full h-7"
397
419
  })])) : createCommentVNode("", true)]);
398
420
  }), 128)) : (openBlock(true), createElementBlock(Fragment, {
@@ -413,22 +435,22 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
413
435
  key: colKey
414
436
  }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", {
415
437
  key: 0,
416
- "class": "py-4 px-5 text-left whitespace-nowrap",
438
+ "class": "py-2 pl-5 pr-3 text-left",
417
439
  innerHTML: _ctx.formattedText(row, column)
418
- }, null, 8, _hoisted_9)) : createCommentVNode("", true)], 64);
440
+ }, null, 8, _hoisted_10)) : createCommentVNode("", true)], 64);
419
441
  }), 128)), _ctx.$slots.row ? renderSlot(_ctx.$slots, "row", {
420
442
  key: 0,
421
443
  row: row
422
- }) : createCommentVNode("", true)], 42, _hoisted_8);
423
- }), 128))])], 2);
444
+ }) : createCommentVNode("", true)], 42, _hoisted_9);
445
+ }), 128))])], 10, _hoisted_1$2);
424
446
  }
425
447
 
426
- var css_248z = ".fw-table-head--sortable[data-v-1f477224]:hover{background-color:var(--1172a117)}.fw-table-row[data-v-1f477224]:hover{background-color:var(--1172a117)}";
427
- var stylesheet = ".fw-table-head--sortable[data-v-1f477224]:hover{background-color:var(--1172a117)}.fw-table-row[data-v-1f477224]:hover{background-color:var(--1172a117)}";
448
+ var css_248z = ".fw-table-head--sortable[data-v-29e0d2d4]:hover{background-color:var(--015ddfb2)}.fw-table-row[data-v-29e0d2d4]:hover{background-color:var(--015ddfb2)}";
449
+ var stylesheet = ".fw-table-head--sortable[data-v-29e0d2d4]:hover{background-color:var(--015ddfb2)}.fw-table-row[data-v-29e0d2d4]:hover{background-color:var(--015ddfb2)}";
428
450
  styleInject(css_248z);
429
451
 
430
452
  __default__.render = render$2;
431
- __default__.__scopeId = "data-v-1f477224";
453
+ __default__.__scopeId = "data-v-29e0d2d4";
432
454
 
433
455
  var script$1 = defineComponent({
434
456
  name: 'FwTableHead'
package/esm/fw-tabs.js CHANGED
@@ -1,11 +1,10 @@
1
- import './es.number.constructor-1249bd78.js';
1
+ import './es.number.constructor-d6ff8874.js';
2
2
  import { defineComponent, computed, ref, provide, openBlock, createElementBlock, Fragment, renderList, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, renderSlot, getCurrentInstance, inject, watchEffect } from 'vue';
3
3
  import { e as toObject$1, l as lengthOfArrayLike$1, h as fails$1 } from './is-forced-752b5893.js';
4
4
  import { _ as _export } from './export-a37ba078.js';
5
5
  import { a as arrayIteration } from './array-iteration-107f927f.js';
6
6
  import { a as addToUnscopables$1 } from './add-to-unscopables-2400f45b.js';
7
7
  import { d as doesNotExceedSafeInteger$1 } from './does-not-exceed-safe-integer-31d08811.js';
8
- import './to-string-12728fd2.js';
9
8
  import './classof-39c30bd5.js';
10
9
  import './array-species-create-a5f5503b.js';
11
10
  import './object-create-f6f3a673.js';
package/esm/fw-toast.js CHANGED
@@ -1,13 +1,12 @@
1
1
  import './es.array.includes-91be7771.js';
2
- import './es.number.constructor-1249bd78.js';
2
+ import { t as toString$1 } from './es.number.constructor-d6ff8874.js';
3
3
  import { n as isObject$1, p as classofRaw, w as wellKnownSymbol$2, f as functionUncurryThis, r as requireObjectCoercible$1 } from './is-forced-752b5893.js';
4
4
  import { _ as _export } from './export-a37ba078.js';
5
- import { t as toString$1 } from './to-string-12728fd2.js';
6
5
  import './es.array.concat-987938be.js';
7
6
  import './web.timers-0f117224.js';
8
7
  import { defineComponent, ref, computed, onMounted, watchEffect, openBlock, createElementBlock, Fragment, createBlock, Teleport, createVNode, TransitionGroup, createCommentVNode, Transition, withCtx, normalizeClass, createElementVNode, resolveDynamicComponent, toDisplayString, renderSlot } from 'vue';
9
8
  import { u as uniqueId } from './uniqueId-fe08534a.js';
10
- import { d as render$1, e as render$2, f as render$3 } from './index-c6458115.js';
9
+ import { d as render$1, e as render$2, f as render$3 } from './index-dbe0534d.js';
11
10
  import { s as styleInject } from './style-inject.es-1f59c1d0.js';
12
11
  import './add-to-unscopables-2400f45b.js';
13
12
  import './object-create-f6f3a673.js';
@@ -1,26 +1,25 @@
1
1
  import { defineComponent, createElementVNode, resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, toDisplayString, createElementBlock } from 'vue';
2
2
  import { s as script$1 } from './fw-card-1b6a67fe.js';
3
- import { s as script$2 } from './fw-image-3fa960e1.js';
3
+ import { s as script$2 } from './fw-image-c829ed20.js';
4
4
  import './es.array.includes-91be7771.js';
5
5
  import './is-forced-752b5893.js';
6
6
  import './export-a37ba078.js';
7
7
  import './add-to-unscopables-2400f45b.js';
8
8
  import './object-create-f6f3a673.js';
9
9
  import './object-keys-4f5bf4e7.js';
10
- import './es.number.constructor-1249bd78.js';
11
- import './to-string-12728fd2.js';
10
+ import './es.number.constructor-d6ff8874.js';
12
11
  import './classof-39c30bd5.js';
13
12
  import './es.array.find-dfa1f42f.js';
14
13
  import './array-iteration-107f927f.js';
15
14
  import './array-species-create-a5f5503b.js';
16
- import './es.string.iterator-284b31d4.js';
15
+ import './es.string.iterator-590198a8.js';
17
16
  import './create-property-534611fd.js';
18
17
  import './web.timers-0f117224.js';
19
18
  import './function-apply-ce251590.js';
20
19
  import './array-method-is-strict-055b1830.js';
21
20
  import './fw-loading-bar-f5ca605c.js';
22
21
  import './style-inject.es-1f59c1d0.js';
23
- import './index-c6458115.js';
22
+ import './index-dbe0534d.js';
24
23
  import './check-94a5917a.js';
25
24
 
26
25
  var script = defineComponent({