@frollo/frollo-web-ui 8.5.4 → 9.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 (135) hide show
  1. package/cjs/index.js +29798 -28754
  2. package/esm/{_rollupPluginBabelHelpers-DpC_oIQV.js → _rollupPluginBabelHelpers-DODWUb5N.js} +307 -345
  3. package/esm/fw-accordion.js +59 -56
  4. package/esm/fw-alert.js +68 -0
  5. package/esm/fw-bar-chart.js +4 -4
  6. package/esm/fw-button-YMoW4x4c.js +296 -0
  7. package/esm/fw-button.js +2 -4
  8. package/esm/{fw-card-bsYbpPmW.js → fw-card-D45R4kN-.js} +33 -9
  9. package/esm/fw-card.js +3 -1
  10. package/esm/fw-checkbox.js +39 -20
  11. package/esm/fw-date-picker.js +110 -78
  12. package/esm/fw-drawer.js +119 -83
  13. package/esm/{fw-dropdown-CbgOvgOt.js → fw-dropdown-58wyuzsW.js} +80 -61
  14. package/esm/fw-dropdown.js +5 -5
  15. package/esm/fw-icons.js +34 -0
  16. package/esm/{fw-image-Dl96Dc27.js → fw-image-D-OHafdw.js} +30 -13
  17. package/esm/fw-image.js +4 -4
  18. package/esm/{fw-input-XeI-IKly.js → fw-input-C2-cZ-BY.js} +65 -43
  19. package/esm/fw-input.js +2 -2
  20. package/esm/fw-loading-bar-DecYSBC_.js +45 -0
  21. package/esm/fw-loading.js +34 -15
  22. package/esm/fw-media-picker.js +43 -31
  23. package/esm/fw-modal.js +102 -48
  24. package/esm/fw-navigation-menu.js +180 -52
  25. package/esm/fw-popover-B4bsfuxm.js +620 -0
  26. package/esm/fw-popover.js +6 -293
  27. package/esm/fw-progress-bar.js +3 -2
  28. package/esm/fw-provider-list.js +59 -35
  29. package/esm/fw-sidebar-menu.js +22 -13
  30. package/esm/fw-slider.js +4 -4
  31. package/esm/fw-switch.js +147 -0
  32. package/esm/{fw-table-row-Db7951fr.js → fw-table-row-Cgi8871h.js} +57 -55
  33. package/esm/fw-table.js +8 -7
  34. package/esm/fw-tabs.js +7 -7
  35. package/esm/{fw-tag-V0jMl-It.js → fw-tag-fDo50Nw7.js} +37 -26
  36. package/esm/fw-tag.js +4 -6
  37. package/esm/fw-toast.js +14 -15
  38. package/esm/fw-transactions-card.js +8 -8
  39. package/esm/get-root-colours-DCjlYelc.js +62 -0
  40. package/esm/{index-CzZMBMV_.js → index-BsEH8YYr.js} +433 -130
  41. package/esm/index.js +76 -68
  42. package/esm/{uniqueId-DK6xzFd8.js → uniqueId-DZdGzBh8.js} +1 -1
  43. package/frollo-web-ui.esm.js +30113 -29019
  44. package/icons/arrow-connect.svg +3 -0
  45. package/icons/arrow-left.svg +3 -0
  46. package/icons/arrow-out-square.svg +3 -0
  47. package/icons/arrow-right.svg +3 -0
  48. package/icons/circle-exclamation.svg +5 -0
  49. package/icons/clock.svg +10 -0
  50. package/icons/default-provider.svg +5 -0
  51. package/icons/desktop.svg +8 -0
  52. package/icons/error.svg +3 -0
  53. package/icons/folder-arrow-down.svg +3 -0
  54. package/icons/index.ts +35 -3
  55. package/icons/loading.svg +0 -1
  56. package/icons/manual-account.svg +3 -0
  57. package/icons/mobile.svg +3 -0
  58. package/icons/paper-plane.svg +3 -0
  59. package/icons/pending.svg +10 -0
  60. package/icons/success-hill.svg +5 -0
  61. package/icons/user-plus.svg +3 -0
  62. package/index.d.ts +807 -571
  63. package/package.json +24 -30
  64. package/styles/tailwind.css +52 -0
  65. package/styles/typography.scss +24 -7
  66. package/styles/web-components.scss +85 -2
  67. package/tailwind.config.js +128 -22
  68. package/types/components/fw-accordion/fw-accordion.vue.d.ts +20 -20
  69. package/types/components/fw-alert/fw-alert.vue.d.ts +43 -0
  70. package/types/components/fw-alert/index.d.ts +2 -0
  71. package/types/components/fw-alert/index.types.d.ts +4 -0
  72. package/types/components/fw-bar-chart/fw-bar-chart.vue.d.ts +8 -8
  73. package/types/components/fw-button/fw-button.vue.d.ts +15 -17
  74. package/types/components/fw-button/index.d.ts +2 -0
  75. package/types/components/fw-button/index.types.d.ts +1 -3
  76. package/types/components/fw-card/fw-card.vue.d.ts +3 -2
  77. package/types/components/fw-checkbox/fw-checkbox.vue.d.ts +8 -5
  78. package/types/components/fw-date-picker/fw-date-picker.vue.d.ts +14 -19
  79. package/types/components/fw-date-picker/index.types.d.ts +5 -4
  80. package/types/components/fw-drawer/fw-drawer.vue.d.ts +26 -10
  81. package/types/components/fw-drawer/index.types.d.ts +1 -1
  82. package/types/components/fw-dropdown/fw-dropdown.vue.d.ts +11 -9
  83. package/types/components/fw-icons/index.d.ts +2 -0
  84. package/types/components/fw-image/fw-image.vue.d.ts +7 -5
  85. package/types/components/fw-input/fw-input.vue.d.ts +11 -17
  86. package/types/components/fw-input/index.types.d.ts +1 -1
  87. package/types/components/fw-loading/fw-loading-bar.vue.d.ts +5 -2
  88. package/types/components/fw-loading/fw-loading-dots.vue.d.ts +2 -0
  89. package/types/components/fw-loading/index.d.ts +2 -1
  90. package/types/components/fw-modal/fw-modal.vue.d.ts +51 -11
  91. package/types/components/fw-modal/index.types.d.ts +1 -1
  92. package/types/components/fw-navigation-menu/fw-navigation-menu.vue.d.ts +77 -6
  93. package/types/components/fw-navigation-menu/index.types.d.ts +11 -0
  94. package/types/components/fw-popover/fw-popover.vue.d.ts +10 -5
  95. package/types/components/fw-provider-list/fw-provider-list.vue.d.ts +8 -5
  96. package/types/components/fw-sidebar-menu/fw-sidebar-menu.vue.d.ts +20 -3
  97. package/types/components/fw-sidebar-menu/index.types.d.ts +9 -0
  98. package/types/components/fw-switch/fw-switch.vue.d.ts +101 -0
  99. package/types/components/fw-switch/index.d.ts +2 -0
  100. package/types/components/fw-switch/index.types.d.ts +8 -0
  101. package/types/components/fw-table/fw-table.vue.d.ts +7 -7
  102. package/types/components/fw-table/index.types.d.ts +0 -3
  103. package/types/components/fw-tabs/fw-tabs.vue.d.ts +1 -1
  104. package/types/components/fw-tabs/index.types.d.ts +1 -1
  105. package/types/components/fw-tag/fw-tag.vue.d.ts +2 -2
  106. package/types/components/fw-tag/index.types.d.ts +3 -3
  107. package/types/components/fw-toast/fw-toast.vue.d.ts +2 -2
  108. package/types/components/index.d.ts +4 -3
  109. package/types/components/index.types.d.ts +1 -0
  110. package/types/helpers/get-root-colours.d.ts +3 -0
  111. package/types/helpers/index.d.ts +2 -0
  112. package/types/helpers/vue-component-to-html.d.ts +2 -0
  113. package/types/icons/index.d.ts +18 -2
  114. package/types/index-types.esm.d.ts +1 -0
  115. package/types/index.d.ts +1 -0
  116. package/types/index.esm.d.ts +1 -0
  117. package/types/services/toast.d.ts +1 -1
  118. package/web-components/index.js +30112 -29026
  119. package/esm/check--YD4Ts6g.js +0 -17
  120. package/esm/fw-animations.js +0 -123
  121. package/esm/fw-button-DNozvo7B.js +0 -286
  122. package/esm/fw-loading-bar-DThRjdw1.js +0 -22
  123. package/esm/fw-loading-spinner-BFpFFRJm.js +0 -20
  124. package/esm/fw-period-selector.js +0 -90
  125. package/esm/get-root-colours-DYEoJPEb.js +0 -37
  126. package/icons/icons.stories.ts +0 -28
  127. package/styles/tailwind.scss +0 -68
  128. package/types/components/fw-animations/fw-email-pulse.vue.d.ts +0 -24
  129. package/types/components/fw-animations/fw-success-pulse.vue.d.ts +0 -24
  130. package/types/components/fw-animations/index.d.ts +0 -4
  131. package/types/components/fw-period-selector/fw-period-selector.vue.d.ts +0 -56
  132. package/types/components/fw-period-selector/index.d.ts +0 -2
  133. package/types/components/fw-period-selector/index.types.d.ts +0 -1
  134. /package/icons/{arrows-rotate.svg → arrow-rotate.svg} +0 -0
  135. /package/types/components/{fw-animations/fw-loading-spinner.vue.d.ts → fw-icons/fw-success-animation.vue.d.ts} +0 -0
package/esm/fw-toast.js CHANGED
@@ -1,17 +1,15 @@
1
- import { defineComponent, ref, computed, onMounted, watchEffect, openBlock, createElementBlock, Fragment, createBlock, Teleport, createVNode, TransitionGroup, createCommentVNode, Transition, withCtx, normalizeClass, createElementVNode, resolveDynamicComponent, renderSlot } from 'vue';
2
- import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
3
- import { i as render$1, j as render$2, p as render$3 } from './index-CzZMBMV_.js';
1
+ import { defineComponent, ref, computed, onMounted, watchEffect, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, Teleport, createVNode, TransitionGroup, Transition, withCtx, normalizeClass, createElementVNode, renderSlot, resolveDynamicComponent } from 'vue';
2
+ import { u as uniqueId } from './uniqueId-DZdGzBh8.js';
3
+ import { t as render$1, l as render$2, m as render$3 } from './index-BsEH8YYr.js';
4
4
  import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
5
- import './check--YD4Ts6g.js';
6
5
 
7
6
  var script = defineComponent({
8
7
  name: 'FwToast',
9
8
  components: {
10
- SolidCheckSvg: render$1,
9
+ SolidCheckSvg: render$3,
11
10
  SolidXMarkSvg: render$2,
12
- ErrorFilledSvg: render$3
11
+ ErrorFilledSvg: render$1
13
12
  },
14
- emits: ['update:modelValue', 'dismissed'],
15
13
  props: {
16
14
  /**
17
15
  * The toast's v-model. Controls the visibility of the toast.
@@ -62,6 +60,7 @@ var script = defineComponent({
62
60
  "default": 3500
63
61
  }
64
62
  },
63
+ emits: ['update:modelValue', 'dismissed'],
65
64
  setup: function setup(props, ctx) {
66
65
  var isMounted = ref(false);
67
66
  var uuid = uniqueId();
@@ -91,9 +90,9 @@ var script = defineComponent({
91
90
  });
92
91
  var baseClass = "text-white flex min-w-[70%] max-w-[90%] md:min-w-[320px] md:max-w-[600px]\n py-3.5 px-6";
93
92
  var typeClasses = ref({
94
- success: 'bg-success',
95
- error: 'bg-error',
96
- warning: 'bg-alert'
93
+ success: 'bg-brand-success-text',
94
+ error: 'bg-brand-error-text',
95
+ warning: 'bg-brand-warning-text'
97
96
  });
98
97
  var svgComponent = ref({
99
98
  success: 'SolidCheckSvg',
@@ -119,7 +118,7 @@ var script = defineComponent({
119
118
  transform: 'translateY(0)'
120
119
  }], {
121
120
  duration: 400,
122
- easing: 'ease'
121
+ easing: 'ease-in'
123
122
  });
124
123
  }
125
124
  isMounted.value = true;
@@ -156,10 +155,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
156
155
  key: 0,
157
156
  to: _ctx.element
158
157
  }, [createVNode(TransitionGroup, {
158
+ id: _ctx.containerEl,
159
159
  name: "toastAnimate",
160
160
  tag: "div",
161
161
  appear: "",
162
- id: _ctx.containerEl,
163
162
  "class": "fw-toast--container"
164
163
  }, null, 8, ["id"])], 8, ["to"])) : createCommentVNode("", true), _ctx.isMounted ? (openBlock(), createBlock(Teleport, {
165
164
  key: 1,
@@ -170,10 +169,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
170
169
  }, {
171
170
  "default": withCtx(function () {
172
171
  return [_ctx.isOpen.value ? (openBlock(), createElementBlock("output", {
173
- role: "status",
174
- "class": normalizeClass(["fw-toast shadow rounded", [_ctx.baseClass, _ctx.typeClasses[_ctx.type]]]),
175
172
  id: "fw-toast-".concat(_ctx.uuid),
176
- key: "fw-toast-".concat(_ctx.uuid)
173
+ key: "fw-toast-".concat(_ctx.uuid),
174
+ role: "status",
175
+ "class": normalizeClass(["fw-toast shadow rounded", [_ctx.baseClass, _ctx.typeClasses[_ctx.type]]])
177
176
  }, [createElementVNode("div", _hoisted_2, [(openBlock(), createBlock(resolveDynamicComponent(_ctx.svgComponent[_ctx.type]), {
178
177
  "aria-hidden": "true",
179
178
  "class": "text-white min-w-[24px] min-h-[24px] w-[24px] h-[24px]"
@@ -1,16 +1,16 @@
1
- import { defineComponent, createElementVNode, resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, toDisplayString, createElementBlock } from 'vue';
2
- import { s as script$1 } from './fw-card-bsYbpPmW.js';
3
- import { s as script$2 } from './fw-image-Dl96Dc27.js';
4
- import './fw-loading-bar-DThRjdw1.js';
1
+ import { defineComponent, createElementVNode, resolveComponent, createBlock, openBlock, withCtx, createCommentVNode, createElementBlock, toDisplayString } from 'vue';
2
+ import { _ as __default__$1 } from './fw-card-D45R4kN-.js';
3
+ import { _ as __default__ } from './fw-image-D-OHafdw.js';
4
+ import './get-root-colours-DCjlYelc.js';
5
5
  import './style-inject.es-tgCJW-Cu.js';
6
- import './index-CzZMBMV_.js';
7
- import './check--YD4Ts6g.js';
6
+ import './fw-loading-bar-DecYSBC_.js';
7
+ import './index-BsEH8YYr.js';
8
8
 
9
9
  var script = defineComponent({
10
10
  name: 'FwTransactionsCard',
11
11
  components: {
12
- FwCard: script$1,
13
- FwImage: script$2
12
+ FwCard: __default__$1,
13
+ FwImage: __default__
14
14
  },
15
15
  props: {
16
16
  /**
@@ -0,0 +1,62 @@
1
+ var getHexWithOpacity = function getHexWithOpacity(hexColor, fadePercentage) {
2
+ var transparencyValues = {
3
+ fade5: '0d',
4
+ fade10: '1a',
5
+ fade20: '33',
6
+ fade30: '4d',
7
+ fade40: '66',
8
+ fade50: '80',
9
+ fade60: '99',
10
+ fade70: 'b3',
11
+ fade80: 'cc',
12
+ fade90: 'e6',
13
+ fade95: 'f2',
14
+ fade100: '00'
15
+ };
16
+ var calculatedPercentage = "fade".concat(fadePercentage.toString());
17
+ var transparency = transparencyValues[calculatedPercentage];
18
+ return "".concat(hexColor).concat(transparency);
19
+ };
20
+ var useColours = function useColours() {
21
+ var style = getComputedStyle(document.body);
22
+ var colorPrimary = style.getPropertyValue('--colorPrimary');
23
+ var colorSecondary = style.getPropertyValue('--colorSecondary');
24
+ var colorTertiary = style.getPropertyValue('--colorTertiary');
25
+ var fontFamily = style.getPropertyValue('--fontFamily');
26
+ var colorBody = style.getPropertyValue('--colorBody');
27
+ var colorBrandBg1 = style.getPropertyValue('--colorBg1');
28
+ var colorErrorText = style.getPropertyValue('--colorErrorText');
29
+ var primaryFade5 = getHexWithOpacity(colorPrimary, 5);
30
+ var primaryFade10 = getHexWithOpacity(colorPrimary, 10);
31
+ var primaryFade20 = getHexWithOpacity(colorPrimary, 20);
32
+ var primaryFade30 = getHexWithOpacity(colorPrimary, 30);
33
+ var primaryFade40 = getHexWithOpacity(colorPrimary, 40);
34
+ var primaryFade50 = getHexWithOpacity(colorPrimary, 50);
35
+ var primaryFade60 = getHexWithOpacity(colorPrimary, 60);
36
+ var primaryFade70 = getHexWithOpacity(colorPrimary, 70);
37
+ var primaryFade80 = getHexWithOpacity(colorPrimary, 80);
38
+ var primaryFade90 = getHexWithOpacity(colorPrimary, 90);
39
+ var brandBg1Fade95 = getHexWithOpacity(colorBrandBg1, 95);
40
+ var colorErrorTextFade5 = getHexWithOpacity(colorErrorText, 5);
41
+ return {
42
+ colorPrimary: colorPrimary,
43
+ colorSecondary: colorSecondary,
44
+ colorTertiary: colorTertiary,
45
+ fontFamily: fontFamily,
46
+ colorBody: colorBody,
47
+ primaryFade5: primaryFade5,
48
+ primaryFade10: primaryFade10,
49
+ primaryFade20: primaryFade20,
50
+ primaryFade30: primaryFade30,
51
+ primaryFade40: primaryFade40,
52
+ primaryFade50: primaryFade50,
53
+ primaryFade60: primaryFade60,
54
+ primaryFade70: primaryFade70,
55
+ primaryFade80: primaryFade80,
56
+ primaryFade90: primaryFade90,
57
+ brandBg1Fade95: brandBg1Fade95,
58
+ colorErrorTextFade5: colorErrorTextFade5
59
+ };
60
+ };
61
+
62
+ export { getHexWithOpacity as g, useColours as u };