@frollo/frollo-web-ui 4.0.1 → 5.0.0
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.
- package/cjs/index.js +800 -446
- package/esm/fw-accordion.js +61 -28
- package/esm/fw-animations.js +2 -2
- package/esm/fw-bar-chart.js +2 -1
- package/esm/{fw-button-7902ae9e.js → fw-button-beaf20f4.js} +1 -1
- package/esm/fw-button.js +3 -3
- package/esm/fw-checkbox.js +25 -9
- package/esm/fw-drawer.js +225 -0
- package/esm/fw-dropdown.js +1 -1
- package/esm/{fw-image-c829ed20.js → fw-image-161b667a.js} +65 -59
- package/esm/fw-image.js +4 -4
- package/esm/fw-input.js +2 -2
- package/esm/{fw-loading-spinner-7462e0b2.js → fw-loading-spinner-51deaa3d.js} +1 -1
- package/esm/fw-modal.js +3 -3
- package/esm/fw-navigation-menu.js +3 -3
- package/esm/fw-sidebar-menu.js +3 -3
- package/esm/fw-table.js +9 -9
- package/esm/fw-tag.js +93 -18
- package/esm/fw-toast.js +1 -1
- package/esm/fw-transactions-card.js +4 -4
- package/esm/get-root-colours-e2a1cb28.js +21 -0
- package/esm/{index-f0510452.js → index-2766bfe4.js} +12 -11
- package/esm/{index-dbe0534d.js → index-3624f1c9.js} +115 -101
- package/esm/index.js +40 -36
- package/frollo-web-ui.esm.js +861 -494
- package/icons/index.ts +3 -1
- package/icons/xmark.svg +3 -0
- package/index.d.ts +393 -140
- package/package.json +1 -1
- package/types/components/fw-accordion/fw-accordion.vue.d.ts +22 -4
- package/types/components/fw-accordion/index.types.d.ts +1 -0
- package/types/components/fw-checkbox/fw-checkbox.vue.d.ts +35 -3
- package/types/components/fw-checkbox/index.types.d.ts +2 -0
- package/types/components/fw-drawer/fw-drawer.vue.d.ts +165 -0
- package/types/components/fw-drawer/index.d.ts +2 -0
- package/types/components/fw-drawer/index.types.d.ts +14 -0
- package/types/components/fw-input/fw-input.vue.d.ts +2 -2
- package/types/components/fw-tag/fw-tag.vue.d.ts +30 -8
- package/types/components/fw-tag/index.types.d.ts +4 -2
- package/types/components/index.d.ts +1 -0
- package/types/components/index.types.d.ts +1 -0
- package/types/helpers/get-root-colours.d.ts +9 -0
- package/types/icons/index.d.ts +2 -1
- package/web-components/index.js +863 -496
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import './es.array.includes-91be7771.js';
|
|
2
2
|
import './es.number.constructor-d6ff8874.js';
|
|
3
3
|
import { defineComponent, computed, ref, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, withKeys, createElementVNode, createVNode, renderSlot } from 'vue';
|
|
4
|
-
import './es.array.find-dfa1f42f.js';
|
|
5
|
-
import './es.string.iterator-590198a8.js';
|
|
6
|
-
import './web.timers-0f117224.js';
|
|
7
4
|
import { a as documentCreateElement$1, g as global$1, c as createNonEnumerableProperty$1 } from './is-forced-752b5893.js';
|
|
8
5
|
import { _ as _export } from './export-a37ba078.js';
|
|
9
6
|
import { a as arrayIteration } from './array-iteration-107f927f.js';
|
|
10
7
|
import { a as arrayMethodIsStrict$1 } from './array-method-is-strict-055b1830.js';
|
|
8
|
+
import './es.array.find-dfa1f42f.js';
|
|
9
|
+
import './es.string.iterator-590198a8.js';
|
|
10
|
+
import './web.timers-0f117224.js';
|
|
11
11
|
import { s as script$1 } from './fw-loading-bar-f5ca605c.js';
|
|
12
|
-
import { r as render$1 } from './index-
|
|
12
|
+
import { r as render$1 } from './index-3624f1c9.js';
|
|
13
13
|
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
|
|
14
14
|
|
|
15
15
|
var es_array_forEach = {};
|
|
@@ -107,62 +107,67 @@ for (var COLLECTION_NAME in DOMIterables) {
|
|
|
107
107
|
|
|
108
108
|
handlePrototype(DOMTokenListPrototype);
|
|
109
109
|
|
|
110
|
+
var handleIntersect = function handleIntersect(entries, observer) {
|
|
111
|
+
entries.forEach(function (entry) {
|
|
112
|
+
if (entry.isIntersecting) {
|
|
113
|
+
loadImage(entry.target);
|
|
114
|
+
observer.unobserve(entry.target);
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
};
|
|
118
|
+
var createObserver = function createObserver(el) {
|
|
119
|
+
var options = {
|
|
120
|
+
root: null,
|
|
121
|
+
threshold: Number(el.getAttribute('threshold')) || 0
|
|
122
|
+
};
|
|
123
|
+
var observer = new IntersectionObserver(handleIntersect, options);
|
|
124
|
+
observer.observe(el);
|
|
125
|
+
};
|
|
126
|
+
var loadImage = function loadImage(el) {
|
|
127
|
+
var imageElement = Array.from(el.children).find(function (element) {
|
|
128
|
+
return element.nodeName === 'IMG';
|
|
129
|
+
});
|
|
130
|
+
if (imageElement) {
|
|
131
|
+
var type = el.getAttribute('type');
|
|
132
|
+
var url = imageElement.dataset.url;
|
|
133
|
+
var setImgError = function setImgError() {
|
|
134
|
+
setTimeout(function () {
|
|
135
|
+
return el.classList.add('fw-image--loaded-error');
|
|
136
|
+
}, 100);
|
|
137
|
+
setTimeout(function () {
|
|
138
|
+
var _el$querySelector;
|
|
139
|
+
return (_el$querySelector = el.querySelector('.fw-image--loading')) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.remove();
|
|
140
|
+
}, 600);
|
|
141
|
+
};
|
|
142
|
+
if (url) {
|
|
143
|
+
imageElement.src = url;
|
|
144
|
+
} else {
|
|
145
|
+
setImgError();
|
|
146
|
+
}
|
|
147
|
+
imageElement.addEventListener('load', function () {
|
|
148
|
+
setTimeout(function () {
|
|
149
|
+
return el.classList.add('fw-image--loaded');
|
|
150
|
+
}, 100);
|
|
151
|
+
setTimeout(function () {
|
|
152
|
+
var _el$querySelector2;
|
|
153
|
+
return (_el$querySelector2 = el.querySelector('.fw-image--loading')) === null || _el$querySelector2 === void 0 ? void 0 : _el$querySelector2.remove();
|
|
154
|
+
}, 600);
|
|
155
|
+
});
|
|
156
|
+
imageElement.addEventListener('error', function () {
|
|
157
|
+
setImgError();
|
|
158
|
+
});
|
|
159
|
+
if (type === 'background') {
|
|
160
|
+
el.style.backgroundImage = "url('".concat(url, "')");
|
|
161
|
+
imageElement.remove();
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
};
|
|
110
165
|
var lazyLoadDirective = {
|
|
111
166
|
mounted: function mounted(el) {
|
|
112
|
-
var loadImage = function loadImage() {
|
|
113
|
-
var imageElement = Array.from(el.children).find(function (element) {
|
|
114
|
-
return element.nodeName === 'IMG';
|
|
115
|
-
});
|
|
116
|
-
if (imageElement) {
|
|
117
|
-
var type = el.getAttribute('type');
|
|
118
|
-
var url = imageElement.dataset.url;
|
|
119
|
-
imageElement.addEventListener('load', function () {
|
|
120
|
-
setTimeout(function () {
|
|
121
|
-
return el.classList.add('fw-image--loaded');
|
|
122
|
-
}, 100);
|
|
123
|
-
setTimeout(function () {
|
|
124
|
-
var _el$querySelector;
|
|
125
|
-
return (_el$querySelector = el.querySelector('.fw-image--loading')) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.remove();
|
|
126
|
-
}, 600);
|
|
127
|
-
});
|
|
128
|
-
if (url) {
|
|
129
|
-
imageElement.src = url;
|
|
130
|
-
}
|
|
131
|
-
if (type === 'background') {
|
|
132
|
-
el.style.backgroundImage = "url('".concat(url, "')");
|
|
133
|
-
imageElement.remove();
|
|
134
|
-
}
|
|
135
|
-
imageElement.addEventListener('error', function () {
|
|
136
|
-
setTimeout(function () {
|
|
137
|
-
return el.classList.add('fw-image--loaded-error');
|
|
138
|
-
}, 100);
|
|
139
|
-
setTimeout(function () {
|
|
140
|
-
var _el$querySelector2;
|
|
141
|
-
return (_el$querySelector2 = el.querySelector('.fw-image--loading')) === null || _el$querySelector2 === void 0 ? void 0 : _el$querySelector2.remove();
|
|
142
|
-
}, 600);
|
|
143
|
-
});
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
|
-
var handleIntersect = function handleIntersect(entries, observer) {
|
|
147
|
-
entries.forEach(function (entry) {
|
|
148
|
-
if (entry.isIntersecting) {
|
|
149
|
-
loadImage();
|
|
150
|
-
observer.unobserve(el);
|
|
151
|
-
}
|
|
152
|
-
});
|
|
153
|
-
};
|
|
154
|
-
var createObserver = function createObserver() {
|
|
155
|
-
var options = {
|
|
156
|
-
root: null,
|
|
157
|
-
threshold: Number(el.getAttribute('threshold')) || 0
|
|
158
|
-
};
|
|
159
|
-
var observer = new IntersectionObserver(handleIntersect, options);
|
|
160
|
-
observer.observe(el);
|
|
161
|
-
};
|
|
162
167
|
if (window.IntersectionObserver) {
|
|
163
|
-
createObserver();
|
|
168
|
+
createObserver(el);
|
|
164
169
|
} else {
|
|
165
|
-
loadImage();
|
|
170
|
+
loadImage(el);
|
|
166
171
|
}
|
|
167
172
|
}
|
|
168
173
|
};
|
|
@@ -266,17 +271,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
266
271
|
}, [createElementVNode("img", {
|
|
267
272
|
"data-url": _ctx.src,
|
|
268
273
|
alt: _ctx.alt,
|
|
269
|
-
"
|
|
274
|
+
loading: "lazy",
|
|
275
|
+
"class": normalizeClass([_ctx.rounded ? 'rounded-full' : '', _ctx.imageClass])
|
|
270
276
|
}, null, 10, _hoisted_2), createVNode(_component_FwLoadingBar, {
|
|
271
277
|
"class": normalizeClass(["fw-image--loading w-full h-full", {
|
|
272
278
|
'rounded-full': _ctx.rounded
|
|
273
279
|
}])
|
|
274
280
|
}, null, 8, ["class"]), createElementVNode("div", {
|
|
275
|
-
"class": normalizeClass(["fw-image--error bg-grey-20", {
|
|
281
|
+
"class": normalizeClass(["fw-image--error rounded bg-grey-20", {
|
|
276
282
|
'rounded-full': _ctx.rounded
|
|
277
283
|
}])
|
|
278
284
|
}, [createElementVNode("div", _hoisted_3, [createVNode(_component_FileExclamationSvg, {
|
|
279
|
-
"class": "w-full h-full scale-[0.
|
|
285
|
+
"class": "w-full h-full scale-[0.25] opacity-40 text-alert max-w-[150px]"
|
|
280
286
|
})])], 2), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1)), [[_directive_lazyload]]);
|
|
281
287
|
}
|
|
282
288
|
|
package/esm/fw-image.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { s as FwImage } from './fw-image-
|
|
1
|
+
export { s as FwImage } from './fw-image-161b667a.js';
|
|
2
2
|
import './es.array.includes-91be7771.js';
|
|
3
3
|
import './is-forced-752b5893.js';
|
|
4
4
|
import './export-a37ba078.js';
|
|
@@ -8,15 +8,15 @@ import './object-keys-4f5bf4e7.js';
|
|
|
8
8
|
import './es.number.constructor-d6ff8874.js';
|
|
9
9
|
import './classof-39c30bd5.js';
|
|
10
10
|
import 'vue';
|
|
11
|
-
import './es.array.find-dfa1f42f.js';
|
|
12
11
|
import './array-iteration-107f927f.js';
|
|
13
12
|
import './array-species-create-a5f5503b.js';
|
|
13
|
+
import './array-method-is-strict-055b1830.js';
|
|
14
|
+
import './es.array.find-dfa1f42f.js';
|
|
14
15
|
import './es.string.iterator-590198a8.js';
|
|
15
16
|
import './create-property-534611fd.js';
|
|
16
17
|
import './web.timers-0f117224.js';
|
|
17
18
|
import './function-apply-ce251590.js';
|
|
18
|
-
import './array-method-is-strict-055b1830.js';
|
|
19
19
|
import './fw-loading-bar-f5ca605c.js';
|
|
20
20
|
import './style-inject.es-1f59c1d0.js';
|
|
21
|
-
import './index-
|
|
21
|
+
import './index-3624f1c9.js';
|
|
22
22
|
import './check-94a5917a.js';
|
package/esm/fw-input.js
CHANGED
package/esm/fw-modal.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './es.array.includes-91be7771.js';
|
|
2
2
|
import { defineComponent, ref, computed, onMounted, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createElementVNode, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from 'vue';
|
|
3
|
-
import { s as script$1 } from './fw-button-
|
|
3
|
+
import { s as script$1 } from './fw-button-beaf20f4.js';
|
|
4
4
|
import { u as uniqueId } from './uniqueId-fe08534a.js';
|
|
5
5
|
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
|
|
6
6
|
import './is-forced-752b5893.js';
|
|
@@ -8,8 +8,8 @@ import './export-a37ba078.js';
|
|
|
8
8
|
import './add-to-unscopables-2400f45b.js';
|
|
9
9
|
import './object-create-f6f3a673.js';
|
|
10
10
|
import './object-keys-4f5bf4e7.js';
|
|
11
|
-
import './fw-loading-spinner-
|
|
12
|
-
import './index-
|
|
11
|
+
import './fw-loading-spinner-51deaa3d.js';
|
|
12
|
+
import './index-3624f1c9.js';
|
|
13
13
|
import './check-94a5917a.js';
|
|
14
14
|
|
|
15
15
|
var script = defineComponent({
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent, ref, createElementVNode, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
|
|
2
|
-
import { s as script$1 } from './fw-button-
|
|
2
|
+
import { s as script$1 } from './fw-button-beaf20f4.js';
|
|
3
3
|
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
|
|
4
4
|
import './es.array.includes-91be7771.js';
|
|
5
5
|
import './is-forced-752b5893.js';
|
|
@@ -7,8 +7,8 @@ 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 './fw-loading-spinner-
|
|
11
|
-
import './index-
|
|
10
|
+
import './fw-loading-spinner-51deaa3d.js';
|
|
11
|
+
import './index-3624f1c9.js';
|
|
12
12
|
import './check-94a5917a.js';
|
|
13
13
|
|
|
14
14
|
var script = defineComponent({
|
package/esm/fw-sidebar-menu.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, ref, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, Transition, renderSlot, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from 'vue';
|
|
2
|
-
import { s as script$1 } from './fw-button-
|
|
3
|
-
import {
|
|
2
|
+
import { s as script$1 } from './fw-button-beaf20f4.js';
|
|
3
|
+
import { h as render$1 } from './index-3624f1c9.js';
|
|
4
4
|
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
|
|
5
5
|
import './es.array.includes-91be7771.js';
|
|
6
6
|
import './is-forced-752b5893.js';
|
|
@@ -8,7 +8,7 @@ import './export-a37ba078.js';
|
|
|
8
8
|
import './add-to-unscopables-2400f45b.js';
|
|
9
9
|
import './object-create-f6f3a673.js';
|
|
10
10
|
import './object-keys-4f5bf4e7.js';
|
|
11
|
-
import './fw-loading-spinner-
|
|
11
|
+
import './fw-loading-spinner-51deaa3d.js';
|
|
12
12
|
import './check-94a5917a.js';
|
|
13
13
|
|
|
14
14
|
var script = defineComponent({
|
package/esm/fw-table.js
CHANGED
|
@@ -4,8 +4,9 @@ import { i as toAbsoluteIndex$1, l as lengthOfArrayLike$2, j as engineUserAgent,
|
|
|
4
4
|
import { _ as _export } from './export-a37ba078.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 {
|
|
7
|
+
import { c as render$3, d as render$4 } from './index-3624f1c9.js';
|
|
8
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
|
+
import { u as useColours } from './get-root-colours-e2a1cb28.js';
|
|
9
10
|
import { s as script$2 } from './fw-loading-bar-f5ca605c.js';
|
|
10
11
|
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
|
|
11
12
|
import './classof-39c30bd5.js';
|
|
@@ -244,9 +245,8 @@ var __default__ = defineComponent({
|
|
|
244
245
|
sortColumn(columns.value[Number(props.autoSortColumn)]);
|
|
245
246
|
}
|
|
246
247
|
});
|
|
247
|
-
var
|
|
248
|
-
|
|
249
|
-
var bgHoverColor = "".concat(colorPrimary, "0d"); // Adds 5% transparency
|
|
248
|
+
var _useColours = useColours(),
|
|
249
|
+
bgHoverColor = _useColours.primaryFade5;
|
|
250
250
|
var sortColumn = function sortColumn(column) {
|
|
251
251
|
if (!isColumnSortable(column)) return;
|
|
252
252
|
currentSortedColumn.value = column;
|
|
@@ -330,7 +330,7 @@ var __default__ = defineComponent({
|
|
|
330
330
|
var __injectCSSVars__ = function __injectCSSVars__() {
|
|
331
331
|
useCssVars(function (_ctx) {
|
|
332
332
|
return {
|
|
333
|
-
"
|
|
333
|
+
"14adfc52": _ctx.bgHoverColor
|
|
334
334
|
};
|
|
335
335
|
});
|
|
336
336
|
};
|
|
@@ -341,7 +341,7 @@ __default__.setup = __setup__ ? function (props, ctx) {
|
|
|
341
341
|
} : __injectCSSVars__;
|
|
342
342
|
|
|
343
343
|
var _withScopeId = function _withScopeId(n) {
|
|
344
|
-
return pushScopeId("data-v-
|
|
344
|
+
return pushScopeId("data-v-7670383f"), n = n(), popScopeId(), n;
|
|
345
345
|
};
|
|
346
346
|
var _hoisted_1$2 = ["aria-busy"];
|
|
347
347
|
var _hoisted_2$1 = {
|
|
@@ -445,12 +445,12 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
445
445
|
}), 128))])], 10, _hoisted_1$2);
|
|
446
446
|
}
|
|
447
447
|
|
|
448
|
-
var css_248z = ".fw-table-head--sortable[data-v-
|
|
449
|
-
var stylesheet = ".fw-table-head--sortable[data-v-
|
|
448
|
+
var css_248z = ".fw-table-head--sortable[data-v-7670383f]:hover{background-color:var(--14adfc52)}.fw-table-row[data-v-7670383f]:hover{background-color:var(--14adfc52)}";
|
|
449
|
+
var stylesheet = ".fw-table-head--sortable[data-v-7670383f]:hover{background-color:var(--14adfc52)}.fw-table-row[data-v-7670383f]:hover{background-color:var(--14adfc52)}";
|
|
450
450
|
styleInject(css_248z);
|
|
451
451
|
|
|
452
452
|
__default__.render = render$2;
|
|
453
|
-
__default__.__scopeId = "data-v-
|
|
453
|
+
__default__.__scopeId = "data-v-7670383f";
|
|
454
454
|
|
|
455
455
|
var script$1 = defineComponent({
|
|
456
456
|
name: 'FwTableHead'
|
package/esm/fw-tag.js
CHANGED
|
@@ -1,60 +1,96 @@
|
|
|
1
1
|
import './es.array.includes-91be7771.js';
|
|
2
|
-
import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
|
|
2
|
+
import { defineComponent, ref, computed, useCssVars, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, withCtx, createVNode, createCommentVNode } from 'vue';
|
|
3
|
+
import './fw-button.js';
|
|
4
|
+
import { b as render$1 } from './index-3624f1c9.js';
|
|
5
|
+
import { u as useColours } from './get-root-colours-e2a1cb28.js';
|
|
6
|
+
import { s as script } from './fw-button-beaf20f4.js';
|
|
3
7
|
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
|
|
4
8
|
import './is-forced-752b5893.js';
|
|
5
9
|
import './export-a37ba078.js';
|
|
6
10
|
import './add-to-unscopables-2400f45b.js';
|
|
7
11
|
import './object-create-f6f3a673.js';
|
|
8
12
|
import './object-keys-4f5bf4e7.js';
|
|
13
|
+
import './check-94a5917a.js';
|
|
14
|
+
import './fw-loading-spinner-51deaa3d.js';
|
|
9
15
|
|
|
10
|
-
var
|
|
16
|
+
var __default__ = defineComponent({
|
|
11
17
|
name: 'FwTag',
|
|
18
|
+
components: {
|
|
19
|
+
FwButton: script,
|
|
20
|
+
XMarkSvg: render$1
|
|
21
|
+
},
|
|
22
|
+
emits: ['dismissed'],
|
|
12
23
|
props: {
|
|
13
24
|
/**
|
|
14
|
-
* The size of the tag. Accepts: 'xs' & '
|
|
25
|
+
* The size of the tag. Accepts: 'xs', 'sm' & 'md'
|
|
15
26
|
*/
|
|
16
27
|
size: {
|
|
17
28
|
type: String,
|
|
18
29
|
"default": 'xs',
|
|
19
30
|
validator: function validator(value) {
|
|
20
|
-
return ['xs', 'sm'].includes(value);
|
|
31
|
+
return ['xs', 'sm', 'md'].includes(value);
|
|
21
32
|
}
|
|
22
33
|
},
|
|
23
34
|
/**
|
|
24
35
|
* The colour variant of the tag.
|
|
25
|
-
* Accepts 'primary', 'alert', 'error', 'success'
|
|
36
|
+
* Accepts 'primary', 'secondary', 'alert', 'error', 'success'
|
|
26
37
|
*/
|
|
27
38
|
variant: {
|
|
28
39
|
type: String,
|
|
29
40
|
"default": 'primary',
|
|
30
41
|
validator: function validator(value) {
|
|
31
|
-
return ['primary', 'alert', 'error', 'success'].includes(value);
|
|
42
|
+
return ['primary', 'secondary', 'alert', 'error', 'success'].includes(value);
|
|
32
43
|
}
|
|
44
|
+
},
|
|
45
|
+
/**
|
|
46
|
+
* Whether the tag can be dismissed or closed.
|
|
47
|
+
* Emits the @dismissed event
|
|
48
|
+
*/
|
|
49
|
+
dismissable: {
|
|
50
|
+
type: Boolean,
|
|
51
|
+
"default": false
|
|
33
52
|
}
|
|
34
53
|
},
|
|
35
54
|
setup: function setup(props) {
|
|
36
|
-
var baseClass = ref(
|
|
55
|
+
var baseClass = ref("\n inline-flex items-center justify-center font-semibold text-center whitespace-nowrap rounded-full shadow\n ");
|
|
56
|
+
var _useColours = useColours(),
|
|
57
|
+
primaryFade5 = _useColours.primaryFade5;
|
|
37
58
|
var tagClasses = ref({
|
|
38
59
|
primary: {
|
|
39
60
|
text: 'text-button-primary-text',
|
|
40
|
-
background: 'bg-button-primary-bg'
|
|
61
|
+
background: 'bg-button-primary-bg',
|
|
62
|
+
iconType: 'primary'
|
|
63
|
+
},
|
|
64
|
+
secondary: {
|
|
65
|
+
text: 'text-primary',
|
|
66
|
+
background: 'fw-tag--secondary-bg',
|
|
67
|
+
iconType: 'tertiary'
|
|
41
68
|
},
|
|
42
69
|
alert: {
|
|
43
70
|
text: 'text-white',
|
|
44
|
-
background: 'bg-alert'
|
|
71
|
+
background: 'bg-alert',
|
|
72
|
+
iconType: 'error'
|
|
45
73
|
},
|
|
46
74
|
success: {
|
|
47
75
|
text: 'text-white',
|
|
48
|
-
background: 'bg-success'
|
|
76
|
+
background: 'bg-success',
|
|
77
|
+
iconType: 'success'
|
|
49
78
|
},
|
|
50
79
|
error: {
|
|
51
80
|
text: 'text-white',
|
|
52
|
-
background: 'bg-error'
|
|
81
|
+
background: 'bg-error',
|
|
82
|
+
iconType: 'error'
|
|
53
83
|
}
|
|
54
84
|
});
|
|
55
85
|
var sizes = ref({
|
|
56
86
|
xs: 'px-2 py-px text-xs',
|
|
57
|
-
sm: 'px-4 py-1 text-xs'
|
|
87
|
+
sm: 'px-4 py-1 text-xs',
|
|
88
|
+
md: 'px-3 py-[4.75px] text-xs'
|
|
89
|
+
});
|
|
90
|
+
var iconSizes = ref({
|
|
91
|
+
xs: 'w-4 h-4',
|
|
92
|
+
sm: 'w-5 h-5',
|
|
93
|
+
md: 'w-6 h-6'
|
|
58
94
|
});
|
|
59
95
|
var textColorClass = computed(function () {
|
|
60
96
|
return tagClasses.value[props.variant].text;
|
|
@@ -62,28 +98,67 @@ var script = defineComponent({
|
|
|
62
98
|
var bgColorClass = computed(function () {
|
|
63
99
|
return tagClasses.value[props.variant].background;
|
|
64
100
|
});
|
|
101
|
+
var iconButtonType = computed(function () {
|
|
102
|
+
return tagClasses.value[props.variant].iconType;
|
|
103
|
+
});
|
|
65
104
|
var sizeClass = computed(function () {
|
|
66
105
|
return sizes.value[props.size];
|
|
67
106
|
});
|
|
107
|
+
var iconSizeClass = computed(function () {
|
|
108
|
+
return iconSizes.value[props.size];
|
|
109
|
+
});
|
|
68
110
|
return {
|
|
69
111
|
baseClass: baseClass,
|
|
70
112
|
textColorClass: textColorClass,
|
|
71
113
|
bgColorClass: bgColorClass,
|
|
72
|
-
sizeClass: sizeClass
|
|
114
|
+
sizeClass: sizeClass,
|
|
115
|
+
iconSizeClass: iconSizeClass,
|
|
116
|
+
iconButtonType: iconButtonType,
|
|
117
|
+
primaryFade5: primaryFade5
|
|
73
118
|
};
|
|
74
119
|
}
|
|
75
120
|
});
|
|
121
|
+
var __injectCSSVars__ = function __injectCSSVars__() {
|
|
122
|
+
useCssVars(function (_ctx) {
|
|
123
|
+
return {
|
|
124
|
+
"f1e3ea3e": _ctx.primaryFade5
|
|
125
|
+
};
|
|
126
|
+
});
|
|
127
|
+
};
|
|
128
|
+
var __setup__ = __default__.setup;
|
|
129
|
+
__default__.setup = __setup__ ? function (props, ctx) {
|
|
130
|
+
__injectCSSVars__();
|
|
131
|
+
return __setup__(props, ctx);
|
|
132
|
+
} : __injectCSSVars__;
|
|
76
133
|
|
|
77
134
|
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
135
|
+
var _component_XMarkSvg = resolveComponent("XMarkSvg");
|
|
136
|
+
var _component_FwButton = resolveComponent("FwButton");
|
|
78
137
|
return openBlock(), createElementBlock("span", {
|
|
79
138
|
"class": normalizeClass(["fw-tag", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass]])
|
|
80
|
-
}, [renderSlot(_ctx.$slots, "default")
|
|
139
|
+
}, [renderSlot(_ctx.$slots, "default"), _ctx.dismissable ? (openBlock(), createBlock(_component_FwButton, {
|
|
140
|
+
key: 0,
|
|
141
|
+
variant: _ctx.iconButtonType,
|
|
142
|
+
tabindex: "",
|
|
143
|
+
title: "Dismiss filter",
|
|
144
|
+
onClick: _cache[0] || (_cache[0] = function ($event) {
|
|
145
|
+
return _ctx.$emit('dismissed');
|
|
146
|
+
}),
|
|
147
|
+
"class": normalizeClass([_ctx.iconSizeClass, "ml-1 !p-0 flex items-center justify-center border-none rounded-full"])
|
|
148
|
+
}, {
|
|
149
|
+
"default": withCtx(function () {
|
|
150
|
+
return [createVNode(_component_XMarkSvg, {
|
|
151
|
+
"class": "w-full h-full font-semibold m-0"
|
|
152
|
+
})];
|
|
153
|
+
}),
|
|
154
|
+
_: 1
|
|
155
|
+
}, 8, ["variant", "class"])) : createCommentVNode("", true)], 2);
|
|
81
156
|
}
|
|
82
157
|
|
|
83
|
-
var css_248z = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
|
|
84
|
-
var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
|
|
158
|
+
var css_248z = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--f1e3ea3e)}";
|
|
159
|
+
var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--f1e3ea3e)}";
|
|
85
160
|
styleInject(css_248z);
|
|
86
161
|
|
|
87
|
-
|
|
162
|
+
__default__.render = render;
|
|
88
163
|
|
|
89
|
-
export {
|
|
164
|
+
export { __default__ as FwTag };
|
package/esm/fw-toast.js
CHANGED
|
@@ -6,7 +6,7 @@ import './es.array.concat-987938be.js';
|
|
|
6
6
|
import './web.timers-0f117224.js';
|
|
7
7
|
import { defineComponent, ref, computed, onMounted, watchEffect, openBlock, createElementBlock, Fragment, createBlock, Teleport, createVNode, TransitionGroup, createCommentVNode, Transition, withCtx, normalizeClass, createElementVNode, resolveDynamicComponent, toDisplayString, renderSlot } from 'vue';
|
|
8
8
|
import { u as uniqueId } from './uniqueId-fe08534a.js';
|
|
9
|
-
import {
|
|
9
|
+
import { e as render$1, f as render$2, g as render$3 } from './index-3624f1c9.js';
|
|
10
10
|
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
|
|
11
11
|
import './add-to-unscopables-2400f45b.js';
|
|
12
12
|
import './object-create-f6f3a673.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
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-
|
|
3
|
+
import { s as script$2 } from './fw-image-161b667a.js';
|
|
4
4
|
import './es.array.includes-91be7771.js';
|
|
5
5
|
import './is-forced-752b5893.js';
|
|
6
6
|
import './export-a37ba078.js';
|
|
@@ -9,17 +9,17 @@ import './object-create-f6f3a673.js';
|
|
|
9
9
|
import './object-keys-4f5bf4e7.js';
|
|
10
10
|
import './es.number.constructor-d6ff8874.js';
|
|
11
11
|
import './classof-39c30bd5.js';
|
|
12
|
-
import './es.array.find-dfa1f42f.js';
|
|
13
12
|
import './array-iteration-107f927f.js';
|
|
14
13
|
import './array-species-create-a5f5503b.js';
|
|
14
|
+
import './array-method-is-strict-055b1830.js';
|
|
15
|
+
import './es.array.find-dfa1f42f.js';
|
|
15
16
|
import './es.string.iterator-590198a8.js';
|
|
16
17
|
import './create-property-534611fd.js';
|
|
17
18
|
import './web.timers-0f117224.js';
|
|
18
19
|
import './function-apply-ce251590.js';
|
|
19
|
-
import './array-method-is-strict-055b1830.js';
|
|
20
20
|
import './fw-loading-bar-f5ca605c.js';
|
|
21
21
|
import './style-inject.es-1f59c1d0.js';
|
|
22
|
-
import './index-
|
|
22
|
+
import './index-3624f1c9.js';
|
|
23
23
|
import './check-94a5917a.js';
|
|
24
24
|
|
|
25
25
|
var script = defineComponent({
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
var useColours = function useColours() {
|
|
2
|
+
var style = getComputedStyle(document.body);
|
|
3
|
+
var colorPrimary = style.getPropertyValue('--colorPrimary');
|
|
4
|
+
var colorSecondary = style.getPropertyValue('--colorSecondary');
|
|
5
|
+
var colorTertiary = style.getPropertyValue('--colorTertiary');
|
|
6
|
+
var fontFamily = style.getPropertyValue('--fontFamily');
|
|
7
|
+
var colorBody = style.getPropertyValue('--colorBody');
|
|
8
|
+
var primaryFade40 = "".concat(colorPrimary, "66"); // Adds 40% transparency
|
|
9
|
+
var primaryFade5 = "".concat(colorPrimary, "0d"); // Adds 5% transparency
|
|
10
|
+
return {
|
|
11
|
+
colorPrimary: colorPrimary,
|
|
12
|
+
colorSecondary: colorSecondary,
|
|
13
|
+
colorTertiary: colorTertiary,
|
|
14
|
+
fontFamily: fontFamily,
|
|
15
|
+
colorBody: colorBody,
|
|
16
|
+
primaryFade5: primaryFade5,
|
|
17
|
+
primaryFade40: primaryFade40
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export { useColours as u };
|
|
@@ -12,6 +12,7 @@ import { d as doesNotExceedSafeInteger$1 } from './does-not-exceed-safe-integer-
|
|
|
12
12
|
import { a as arraySpeciesCreate$1 } from './array-species-create-a5f5503b.js';
|
|
13
13
|
import { c as createProperty$1 } from './create-property-534611fd.js';
|
|
14
14
|
import { version as version$1, isProxy, toRaw, defineComponent, ref, shallowRef, onMounted, onBeforeUnmount, watch, h, computed, resolveComponent, openBlock, createElementBlock, normalizeStyle, toDisplayString, createCommentVNode, createVNode } from 'vue';
|
|
15
|
+
import { u as useColours } from './get-root-colours-e2a1cb28.js';
|
|
15
16
|
import { u as uniqueId } from './uniqueId-fe08534a.js';
|
|
16
17
|
|
|
17
18
|
function _arrayLikeToArray(arr, len) {
|
|
@@ -3375,9 +3376,9 @@ function capBezierPoints(points, area) {
|
|
|
3375
3376
|
}
|
|
3376
3377
|
return valueInPixels;
|
|
3377
3378
|
}
|
|
3378
|
-
const getComputedStyle
|
|
3379
|
+
const getComputedStyle = (element)=>element.ownerDocument.defaultView.getComputedStyle(element, null);
|
|
3379
3380
|
function getStyle(el, property) {
|
|
3380
|
-
return getComputedStyle
|
|
3381
|
+
return getComputedStyle(el).getPropertyValue(property);
|
|
3381
3382
|
}
|
|
3382
3383
|
const positions = [
|
|
3383
3384
|
'top',
|
|
@@ -3432,7 +3433,7 @@ const useOffsetPos = (x, y, target)=>(x > 0 || y > 0) && (!target || !target.sha
|
|
|
3432
3433
|
return event;
|
|
3433
3434
|
}
|
|
3434
3435
|
const { canvas , currentDevicePixelRatio } = chart;
|
|
3435
|
-
const style = getComputedStyle
|
|
3436
|
+
const style = getComputedStyle(canvas);
|
|
3436
3437
|
const borderBox = style.boxSizing === 'border-box';
|
|
3437
3438
|
const paddings = getPositionedStyle(style, 'padding');
|
|
3438
3439
|
const borders = getPositionedStyle(style, 'border', 'width');
|
|
@@ -3458,7 +3459,7 @@ function getContainerSize(canvas, width, height) {
|
|
|
3458
3459
|
height = canvas.clientHeight;
|
|
3459
3460
|
} else {
|
|
3460
3461
|
const rect = container.getBoundingClientRect(); // this is the border box of the container
|
|
3461
|
-
const containerStyle = getComputedStyle
|
|
3462
|
+
const containerStyle = getComputedStyle(container);
|
|
3462
3463
|
const containerBorder = getPositionedStyle(containerStyle, 'border', 'width');
|
|
3463
3464
|
const containerPadding = getPositionedStyle(containerStyle, 'padding');
|
|
3464
3465
|
width = rect.width - containerPadding.width - containerBorder.width;
|
|
@@ -3477,7 +3478,7 @@ function getContainerSize(canvas, width, height) {
|
|
|
3477
3478
|
const round1 = (v)=>Math.round(v * 10) / 10;
|
|
3478
3479
|
// eslint-disable-next-line complexity
|
|
3479
3480
|
function getMaximumSize(canvas, bbWidth, bbHeight, aspectRatio) {
|
|
3480
|
-
const style = getComputedStyle
|
|
3481
|
+
const style = getComputedStyle(canvas);
|
|
3481
3482
|
const margins = getPositionedStyle(style, 'margin');
|
|
3482
3483
|
const maxWidth = parseMaxStyle(style.maxWidth, canvas, 'clientWidth') || INFINITY;
|
|
3483
3484
|
const maxHeight = parseMaxStyle(style.maxHeight, canvas, 'clientHeight') || INFINITY;
|
|
@@ -15680,12 +15681,12 @@ var script = defineComponent({
|
|
|
15680
15681
|
return strToNumber(singleY);
|
|
15681
15682
|
})) || [];
|
|
15682
15683
|
});
|
|
15683
|
-
var
|
|
15684
|
-
|
|
15685
|
-
|
|
15686
|
-
|
|
15687
|
-
|
|
15688
|
-
|
|
15684
|
+
var _useColours = useColours(),
|
|
15685
|
+
colorPrimary = _useColours.colorPrimary,
|
|
15686
|
+
colorBody = _useColours.colorBody,
|
|
15687
|
+
fontFamily = _useColours.fontFamily,
|
|
15688
|
+
bgColor = _useColours.primaryFade5,
|
|
15689
|
+
primaryFade = _useColours.primaryFade40;
|
|
15689
15690
|
var maxY = computed(function () {
|
|
15690
15691
|
return Math.max.apply(Math, _toConsumableArray(yModel.value));
|
|
15691
15692
|
});
|