@frollo/frollo-web-ui 8.5.3 → 9.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 +29804 -28762
- package/esm/{_rollupPluginBabelHelpers-DpC_oIQV.js → _rollupPluginBabelHelpers-DODWUb5N.js} +307 -345
- package/esm/fw-accordion.js +59 -56
- package/esm/fw-alert.js +68 -0
- package/esm/fw-bar-chart.js +4 -4
- package/esm/fw-button-CnQvA7oM.js +296 -0
- package/esm/fw-button.js +2 -4
- package/esm/{fw-card-bsYbpPmW.js → fw-card-D45R4kN-.js} +33 -9
- package/esm/fw-card.js +3 -1
- package/esm/fw-checkbox.js +39 -20
- package/esm/fw-date-picker.js +110 -78
- package/esm/fw-drawer.js +119 -83
- package/esm/{fw-dropdown-CbgOvgOt.js → fw-dropdown-58wyuzsW.js} +80 -61
- package/esm/fw-dropdown.js +5 -5
- package/esm/fw-icons.js +34 -0
- package/esm/{fw-image-Dl96Dc27.js → fw-image-D-OHafdw.js} +30 -13
- package/esm/fw-image.js +4 -4
- package/esm/{fw-input-XeI-IKly.js → fw-input-C2-cZ-BY.js} +65 -43
- package/esm/fw-input.js +2 -2
- package/esm/fw-loading-bar-DecYSBC_.js +45 -0
- package/esm/fw-loading.js +34 -15
- package/esm/fw-media-picker.js +43 -31
- package/esm/fw-modal.js +102 -48
- package/esm/fw-navigation-menu.js +180 -52
- package/esm/fw-popover-B4bsfuxm.js +620 -0
- package/esm/fw-popover.js +6 -293
- package/esm/fw-progress-bar.js +3 -2
- package/esm/fw-provider-list.js +58 -34
- package/esm/fw-sidebar-menu.js +22 -13
- package/esm/fw-slider.js +4 -4
- package/esm/fw-switch.js +147 -0
- package/esm/{fw-table-row-BetVCzHJ.js → fw-table-row-C61Bi8KB.js} +59 -59
- package/esm/fw-table.js +8 -7
- package/esm/fw-tabs.js +7 -7
- package/esm/{fw-tag-V0jMl-It.js → fw-tag-FWH6KttB.js} +37 -26
- package/esm/fw-tag.js +4 -6
- package/esm/fw-toast.js +14 -15
- package/esm/fw-transactions-card.js +8 -8
- package/esm/get-root-colours-DCjlYelc.js +62 -0
- package/esm/{index-CzZMBMV_.js → index-BsEH8YYr.js} +433 -130
- package/esm/index.js +76 -68
- package/esm/{uniqueId-DK6xzFd8.js → uniqueId-DZdGzBh8.js} +1 -1
- package/frollo-web-ui.esm.js +30114 -29022
- package/icons/arrow-connect.svg +3 -0
- package/icons/arrow-left.svg +3 -0
- package/icons/arrow-out-square.svg +3 -0
- package/icons/arrow-right.svg +3 -0
- package/icons/circle-exclamation.svg +5 -0
- package/icons/clock.svg +10 -0
- package/icons/default-provider.svg +5 -0
- package/icons/desktop.svg +8 -0
- package/icons/error.svg +3 -0
- package/icons/folder-arrow-down.svg +3 -0
- package/icons/index.ts +35 -3
- package/icons/loading.svg +0 -1
- package/icons/manual-account.svg +3 -0
- package/icons/mobile.svg +3 -0
- package/icons/paper-plane.svg +3 -0
- package/icons/pending.svg +10 -0
- package/icons/success-hill.svg +5 -0
- package/icons/user-plus.svg +3 -0
- package/index.d.ts +807 -571
- package/package.json +23 -29
- package/styles/tailwind.css +52 -0
- package/styles/typography.scss +24 -7
- package/styles/web-components.scss +2 -2
- package/tailwind.config.js +128 -22
- package/types/components/fw-accordion/fw-accordion.vue.d.ts +20 -20
- package/types/components/fw-alert/fw-alert.vue.d.ts +43 -0
- package/types/components/fw-alert/index.d.ts +2 -0
- package/types/components/fw-alert/index.types.d.ts +4 -0
- package/types/components/fw-bar-chart/fw-bar-chart.vue.d.ts +8 -8
- package/types/components/fw-button/fw-button.vue.d.ts +15 -17
- package/types/components/fw-button/index.d.ts +2 -0
- package/types/components/fw-button/index.types.d.ts +1 -3
- package/types/components/fw-card/fw-card.vue.d.ts +3 -2
- package/types/components/fw-checkbox/fw-checkbox.vue.d.ts +8 -5
- package/types/components/fw-date-picker/fw-date-picker.vue.d.ts +14 -19
- package/types/components/fw-date-picker/index.types.d.ts +5 -4
- package/types/components/fw-drawer/fw-drawer.vue.d.ts +26 -10
- package/types/components/fw-drawer/index.types.d.ts +1 -1
- package/types/components/fw-dropdown/fw-dropdown.vue.d.ts +11 -9
- package/types/components/fw-icons/index.d.ts +2 -0
- package/types/components/fw-image/fw-image.vue.d.ts +7 -5
- package/types/components/fw-input/fw-input.vue.d.ts +11 -17
- package/types/components/fw-input/index.types.d.ts +1 -1
- package/types/components/fw-loading/fw-loading-bar.vue.d.ts +5 -2
- package/types/components/fw-loading/fw-loading-dots.vue.d.ts +2 -0
- package/types/components/fw-loading/index.d.ts +2 -1
- package/types/components/fw-modal/fw-modal.vue.d.ts +51 -11
- package/types/components/fw-modal/index.types.d.ts +1 -1
- package/types/components/fw-navigation-menu/fw-navigation-menu.vue.d.ts +77 -6
- package/types/components/fw-navigation-menu/index.types.d.ts +11 -0
- package/types/components/fw-popover/fw-popover.vue.d.ts +10 -5
- package/types/components/fw-provider-list/fw-provider-list.vue.d.ts +8 -5
- package/types/components/fw-sidebar-menu/fw-sidebar-menu.vue.d.ts +20 -3
- package/types/components/fw-sidebar-menu/index.types.d.ts +9 -0
- package/types/components/fw-switch/fw-switch.vue.d.ts +101 -0
- package/types/components/fw-switch/index.d.ts +2 -0
- package/types/components/fw-switch/index.types.d.ts +8 -0
- package/types/components/fw-table/fw-table.vue.d.ts +7 -7
- package/types/components/fw-table/index.types.d.ts +0 -3
- package/types/components/fw-tabs/fw-tabs.vue.d.ts +1 -1
- package/types/components/fw-tabs/index.types.d.ts +1 -1
- package/types/components/fw-tag/fw-tag.vue.d.ts +2 -2
- package/types/components/fw-tag/index.types.d.ts +3 -3
- package/types/components/fw-toast/fw-toast.vue.d.ts +2 -2
- package/types/components/index.d.ts +4 -3
- package/types/components/index.types.d.ts +1 -0
- package/types/helpers/get-root-colours.d.ts +3 -0
- package/types/helpers/index.d.ts +2 -0
- package/types/helpers/vue-component-to-html.d.ts +2 -0
- package/types/icons/index.d.ts +18 -2
- package/types/index-types.esm.d.ts +1 -0
- package/types/index.d.ts +1 -0
- package/types/index.esm.d.ts +1 -0
- package/types/services/toast.d.ts +1 -1
- package/web-components/index.js +30112 -29028
- package/esm/check--YD4Ts6g.js +0 -17
- package/esm/fw-animations.js +0 -123
- package/esm/fw-button-DNozvo7B.js +0 -286
- package/esm/fw-loading-bar-DThRjdw1.js +0 -22
- package/esm/fw-loading-spinner-BFpFFRJm.js +0 -20
- package/esm/fw-period-selector.js +0 -90
- package/esm/get-root-colours-DYEoJPEb.js +0 -37
- package/icons/icons.stories.ts +0 -28
- package/styles/tailwind.scss +0 -68
- package/types/components/fw-animations/fw-email-pulse.vue.d.ts +0 -24
- package/types/components/fw-animations/fw-success-pulse.vue.d.ts +0 -24
- package/types/components/fw-animations/index.d.ts +0 -4
- package/types/components/fw-period-selector/fw-period-selector.vue.d.ts +0 -56
- package/types/components/fw-period-selector/index.d.ts +0 -2
- package/types/components/fw-period-selector/index.types.d.ts +0 -1
- /package/icons/{arrows-rotate.svg → arrow-rotate.svg} +0 -0
- /package/types/components/{fw-animations/fw-loading-spinner.vue.d.ts → fw-icons/fw-success-animation.vue.d.ts} +0 -0
package/esm/check--YD4Ts6g.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { createElementVNode, openBlock, createElementBlock } from 'vue';
|
|
2
|
-
|
|
3
|
-
const _hoisted_1 = {
|
|
4
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
-
fill: "currentColor",
|
|
6
|
-
viewBox: "0 0 17 12"
|
|
7
|
-
};
|
|
8
|
-
const _hoisted_2 = /*#__PURE__*/createElementVNode("path", { d: "M15.847.621c.359.33.359.865 0 1.164l-9.281 9.281c-.299.359-.833.359-1.164 0L.622 6.285c-.33-.3-.33-.833 0-1.164a.85.85 0 0 1 1.193 0L6 9.308 14.684.621c.33-.328.864-.328 1.163 0" }, null, -1);
|
|
9
|
-
const _hoisted_3 = [
|
|
10
|
-
_hoisted_2
|
|
11
|
-
];
|
|
12
|
-
|
|
13
|
-
function render(_ctx, _cache) {
|
|
14
|
-
return (openBlock(), createElementBlock("svg", _hoisted_1, [..._hoisted_3]))
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export { render as r };
|
package/esm/fw-animations.js
DELETED
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
import { defineComponent, useCssVars, pushScopeId, popScopeId, createElementVNode, openBlock, createElementBlock, createStaticVNode } from 'vue';
|
|
2
|
-
import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
|
|
3
|
-
export { s as FwLoadingSpinner } from './fw-loading-spinner-BFpFFRJm.js';
|
|
4
|
-
import './index-CzZMBMV_.js';
|
|
5
|
-
import './check--YD4Ts6g.js';
|
|
6
|
-
|
|
7
|
-
var __default__$1 = defineComponent({
|
|
8
|
-
name: 'FwEmailPulse',
|
|
9
|
-
props: {
|
|
10
|
-
/**
|
|
11
|
-
* The animation-iteration-count CSS property of the pulse animation.
|
|
12
|
-
* Sets the number of times an animation sequence should be played before stopping.
|
|
13
|
-
* https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
|
|
14
|
-
*/
|
|
15
|
-
animationIteration: {
|
|
16
|
-
type: [String, Number],
|
|
17
|
-
"default": 5
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
});
|
|
21
|
-
var __injectCSSVars__$1 = function __injectCSSVars__() {
|
|
22
|
-
useCssVars(function (_ctx) {
|
|
23
|
-
return {
|
|
24
|
-
"a82df1f8": _ctx.animationIteration
|
|
25
|
-
};
|
|
26
|
-
});
|
|
27
|
-
};
|
|
28
|
-
var __setup__$1 = __default__$1.setup;
|
|
29
|
-
__default__$1.setup = __setup__$1 ? function (props, ctx) {
|
|
30
|
-
__injectCSSVars__$1();
|
|
31
|
-
return __setup__$1(props, ctx);
|
|
32
|
-
} : __injectCSSVars__$1;
|
|
33
|
-
|
|
34
|
-
var _withScopeId$1 = function _withScopeId(n) {
|
|
35
|
-
return pushScopeId("data-v-6ec70c65"), n = n(), popScopeId(), n;
|
|
36
|
-
};
|
|
37
|
-
var _hoisted_1$1 = {
|
|
38
|
-
"class": "fw-email-pulse justify-center mx-auto"
|
|
39
|
-
};
|
|
40
|
-
var _hoisted_2$1 = /*#__PURE__*/_withScopeId$1(function () {
|
|
41
|
-
return /*#__PURE__*/createElementVNode("svg", {
|
|
42
|
-
width: "102",
|
|
43
|
-
height: "102",
|
|
44
|
-
viewBox: "0 0 102 102",
|
|
45
|
-
fill: "none",
|
|
46
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
47
|
-
}, [/*#__PURE__*/createElementVNode("path", {
|
|
48
|
-
"class": "fill-primary",
|
|
49
|
-
"fill-rule": "evenodd",
|
|
50
|
-
"clip-rule": "evenodd",
|
|
51
|
-
d: "M51 102C79.1665 102 102 79.1665 102 51C102 22.8335 79.1665 0 51 0C22.8335 0 0 22.8335 0 51C0 79.1665 22.8335 102 51 102ZM27 39C27 35.6859 29.6859 33 33 33H69C72.3094 33 75 35.6859 75 39V63C75 66.3141 72.3141 69 69 69H33C29.6859 69 27 66.3141 27 63V39ZM72 39C72 37.3462 70.6537 36 69 36H33C31.3463 36 30 37.35 30 39V42.375L48.2972 56.1009C49.8909 57.2934 52.1062 57.2934 53.7 56.1009L72 42.3759V39ZM69 66C70.6537 66 72 64.6537 72 63V46.0406L55.5 58.5C54.1781 59.4938 52.5881 60.0019 51 60.0019C49.4119 60.0019 47.8237 59.4947 46.5 58.5L30 46.0406V63C30 64.6537 31.3463 66 33 66H69Z"
|
|
52
|
-
})], -1);
|
|
53
|
-
});
|
|
54
|
-
var _hoisted_3 = /*#__PURE__*/_withScopeId$1(function () {
|
|
55
|
-
return /*#__PURE__*/createElementVNode("svg", {
|
|
56
|
-
"class": "absolute top-0 left-0",
|
|
57
|
-
viewBox: "0 0 130 130"
|
|
58
|
-
}, [/*#__PURE__*/createElementVNode("circle", {
|
|
59
|
-
"class": "fw-email-pulse-circle",
|
|
60
|
-
cx: "50%",
|
|
61
|
-
cy: "50%",
|
|
62
|
-
r: "45"
|
|
63
|
-
})], -1);
|
|
64
|
-
});
|
|
65
|
-
var _hoisted_4$1 = [_hoisted_2$1, _hoisted_3];
|
|
66
|
-
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
|
67
|
-
return openBlock(), createElementBlock("div", _hoisted_1$1, _hoisted_4$1);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
var css_248z$1 = ".fw-email-pulse[data-v-6ec70c65]{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;height:130px;position:relative;width:130px}.fw-email-pulse-circle[data-v-6ec70c65]{stroke-width:4px;stroke-opacity:1;fill:none;fill-opacity:0;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;-webkit-animation-duration:3s;-moz-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:var(--a82df1f8);-moz-animation-iteration-count:var(--a82df1f8);animation-iteration-count:var(--a82df1f8);-webkit-animation-name:fwEmailPulse-6ec70c65;-moz-animation-name:fwEmailPulse-6ec70c65;animation-name:fwEmailPulse-6ec70c65;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes fwEmailPulse-6ec70c65{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@-moz-keyframes fwEmailPulse-6ec70c65{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-moz-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-moz-transform:scale(1.5);transform:scale(1.5)}}@keyframes fwEmailPulse-6ec70c65{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-webkit-transform:scale(1.5);-moz-transform:scale(1.5);transform:scale(1.5)}}";
|
|
71
|
-
var stylesheet$1 = ".fw-email-pulse[data-v-6ec70c65]{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;height:130px;position:relative;width:130px}.fw-email-pulse-circle[data-v-6ec70c65]{stroke-width:4px;stroke-opacity:1;fill:none;fill-opacity:0;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;-webkit-animation-duration:3s;-moz-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:var(--a82df1f8);-moz-animation-iteration-count:var(--a82df1f8);animation-iteration-count:var(--a82df1f8);-webkit-animation-name:fwEmailPulse-6ec70c65;-moz-animation-name:fwEmailPulse-6ec70c65;animation-name:fwEmailPulse-6ec70c65;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes fwEmailPulse-6ec70c65{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@-moz-keyframes fwEmailPulse-6ec70c65{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-moz-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-moz-transform:scale(1.5);transform:scale(1.5)}}@keyframes fwEmailPulse-6ec70c65{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-webkit-transform:scale(1.5);-moz-transform:scale(1.5);transform:scale(1.5)}}";
|
|
72
|
-
styleInject(css_248z$1);
|
|
73
|
-
|
|
74
|
-
__default__$1.render = render$1;
|
|
75
|
-
__default__$1.__scopeId = "data-v-6ec70c65";
|
|
76
|
-
|
|
77
|
-
var __default__ = defineComponent({
|
|
78
|
-
name: 'FwSuccessPulse',
|
|
79
|
-
props: {
|
|
80
|
-
/**
|
|
81
|
-
* The animation-iteration-count CSS property of the pulse animation.
|
|
82
|
-
* Sets the number of times an animation sequence should be played before stopping.
|
|
83
|
-
* https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
|
|
84
|
-
*/
|
|
85
|
-
animationIteration: {
|
|
86
|
-
type: [String, Number],
|
|
87
|
-
"default": 2
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
});
|
|
91
|
-
var __injectCSSVars__ = function __injectCSSVars__() {
|
|
92
|
-
useCssVars(function (_ctx) {
|
|
93
|
-
return {
|
|
94
|
-
"6218fb6a": _ctx.animationIteration
|
|
95
|
-
};
|
|
96
|
-
});
|
|
97
|
-
};
|
|
98
|
-
var __setup__ = __default__.setup;
|
|
99
|
-
__default__.setup = __setup__ ? function (props, ctx) {
|
|
100
|
-
__injectCSSVars__();
|
|
101
|
-
return __setup__(props, ctx);
|
|
102
|
-
} : __injectCSSVars__;
|
|
103
|
-
|
|
104
|
-
var _withScopeId = function _withScopeId(n) {
|
|
105
|
-
return pushScopeId("data-v-d1768f34"), n = n(), popScopeId(), n;
|
|
106
|
-
};
|
|
107
|
-
var _hoisted_1 = {
|
|
108
|
-
"class": "fw-success-pulse"
|
|
109
|
-
};
|
|
110
|
-
var _hoisted_2 = /*#__PURE__*/createStaticVNode("<svg class=\"fw-success-pulse--checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" data-v-d1768f34><circle class=\"fw-success-pulse--checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" data-v-d1768f34></circle><path class=\"fw-success-pulse--checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" data-v-d1768f34></path></svg><svg class=\"absolute top-0 left-0\" viewBox=\"0 0 100 100\" data-v-d1768f34><circle class=\"fw-success-pulse--circle\" cx=\"50%\" cy=\"50%\" r=\"34\" data-v-d1768f34></circle></svg>", 2);
|
|
111
|
-
var _hoisted_4 = [_hoisted_2];
|
|
112
|
-
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
113
|
-
return openBlock(), createElementBlock("div", _hoisted_1, _hoisted_4);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
var css_248z = ".fw-success-pulse[data-v-d1768f34]{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;height:100px;position:relative;width:100px}.fw-success-pulse--checkmark__circle[data-v-d1768f34]{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:var(--colorPrimary);fill:none;-webkit-animation:fwSuccessStroke-d1768f34 .6s cubic-bezier(.65,0,.45,1) forwards;-moz-animation:fwSuccessStroke-d1768f34 .6s cubic-bezier(.65,0,.45,1) forwards;animation:fwSuccessStroke-d1768f34 .6s cubic-bezier(.65,0,.45,1) forwards}.fw-success-pulse--checkmark[data-v-d1768f34]{stroke-width:4;stroke:#fff;stroke-miterlimit:10;-webkit-animation:fwSuccessScaleFill-d1768f34 .6s ease-in-out .4s forwards,fwSuccessScale-d1768f34 .3s ease-in-out .9s both;-moz-animation:fwSuccessScaleFill-d1768f34 .6s ease-in-out .4s forwards,fwSuccessScale-d1768f34 .3s ease-in-out .9s both;animation:fwSuccessScaleFill-d1768f34 .6s ease-in-out .4s forwards,fwSuccessScale-d1768f34 .3s ease-in-out .9s both;border-radius:50%;-webkit-box-shadow:inset 0 0 0 var(--colorPrimary);box-shadow:inset 0 0 0 var(--colorPrimary);display:block;height:70px;margin:10% auto;width:70px}.fw-success-pulse--checkmark__check[data-v-d1768f34]{stroke-dasharray:48;stroke-dashoffset:48;stroke-linecap:round;-webkit-animation:fwSuccessStroke-d1768f34 .3s cubic-bezier(.65,0,.45,1) .8s forwards;-moz-animation:fwSuccessStroke-d1768f34 .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:fwSuccessStroke-d1768f34 .3s cubic-bezier(.65,0,.45,1) .8s forwards;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes fwSuccessStroke-d1768f34{to{stroke-dashoffset:0}}@-moz-keyframes fwSuccessStroke-d1768f34{to{stroke-dashoffset:0}}@keyframes fwSuccessStroke-d1768f34{to{stroke-dashoffset:0}}@-webkit-keyframes fwSuccessScale-d1768f34{0%,to{-webkit-transform:none;transform:none}50%{-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}}@-moz-keyframes fwSuccessScale-d1768f34{0%,to{-moz-transform:none;transform:none}50%{-moz-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}}@keyframes fwSuccessScale-d1768f34{0%,to{-webkit-transform:none;-moz-transform:none;transform:none}50%{-webkit-transform:scale3d(1.1,1.1,1);-moz-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}}@-webkit-keyframes fwSuccessScaleFill-d1768f34{to{-webkit-box-shadow:inset 0 0 0 70px var(--colorPrimary);box-shadow:inset 0 0 0 70px var(--colorPrimary)}}@-moz-keyframes fwSuccessScaleFill-d1768f34{to{box-shadow:inset 0 0 0 70px var(--colorPrimary)}}@keyframes fwSuccessScaleFill-d1768f34{to{-webkit-box-shadow:inset 0 0 0 70px var(--colorPrimary);box-shadow:inset 0 0 0 70px var(--colorPrimary)}}.fw-success-pulse--circle[data-v-d1768f34]{stroke-width:4px;stroke-opacity:1;fill:none;fill-opacity:0;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;-webkit-animation-duration:3s;-moz-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:var(--6218fb6a);-moz-animation-iteration-count:var(--6218fb6a);animation-iteration-count:var(--6218fb6a);-webkit-animation-name:fwSuccessPulse-d1768f34;-moz-animation-name:fwSuccessPulse-d1768f34;animation-name:fwSuccessPulse-d1768f34;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes fwSuccessPulse-d1768f34{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@-moz-keyframes fwSuccessPulse-d1768f34{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-moz-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-moz-transform:scale(1.5);transform:scale(1.5)}}@keyframes fwSuccessPulse-d1768f34{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-webkit-transform:scale(1.5);-moz-transform:scale(1.5);transform:scale(1.5)}}";
|
|
117
|
-
var stylesheet = ".fw-success-pulse[data-v-d1768f34]{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;height:100px;position:relative;width:100px}.fw-success-pulse--checkmark__circle[data-v-d1768f34]{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:var(--colorPrimary);fill:none;-webkit-animation:fwSuccessStroke-d1768f34 .6s cubic-bezier(.65,0,.45,1) forwards;-moz-animation:fwSuccessStroke-d1768f34 .6s cubic-bezier(.65,0,.45,1) forwards;animation:fwSuccessStroke-d1768f34 .6s cubic-bezier(.65,0,.45,1) forwards}.fw-success-pulse--checkmark[data-v-d1768f34]{stroke-width:4;stroke:#fff;stroke-miterlimit:10;-webkit-animation:fwSuccessScaleFill-d1768f34 .6s ease-in-out .4s forwards,fwSuccessScale-d1768f34 .3s ease-in-out .9s both;-moz-animation:fwSuccessScaleFill-d1768f34 .6s ease-in-out .4s forwards,fwSuccessScale-d1768f34 .3s ease-in-out .9s both;animation:fwSuccessScaleFill-d1768f34 .6s ease-in-out .4s forwards,fwSuccessScale-d1768f34 .3s ease-in-out .9s both;border-radius:50%;-webkit-box-shadow:inset 0 0 0 var(--colorPrimary);box-shadow:inset 0 0 0 var(--colorPrimary);display:block;height:70px;margin:10% auto;width:70px}.fw-success-pulse--checkmark__check[data-v-d1768f34]{stroke-dasharray:48;stroke-dashoffset:48;stroke-linecap:round;-webkit-animation:fwSuccessStroke-d1768f34 .3s cubic-bezier(.65,0,.45,1) .8s forwards;-moz-animation:fwSuccessStroke-d1768f34 .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:fwSuccessStroke-d1768f34 .3s cubic-bezier(.65,0,.45,1) .8s forwards;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes fwSuccessStroke-d1768f34{to{stroke-dashoffset:0}}@-moz-keyframes fwSuccessStroke-d1768f34{to{stroke-dashoffset:0}}@keyframes fwSuccessStroke-d1768f34{to{stroke-dashoffset:0}}@-webkit-keyframes fwSuccessScale-d1768f34{0%,to{-webkit-transform:none;transform:none}50%{-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}}@-moz-keyframes fwSuccessScale-d1768f34{0%,to{-moz-transform:none;transform:none}50%{-moz-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}}@keyframes fwSuccessScale-d1768f34{0%,to{-webkit-transform:none;-moz-transform:none;transform:none}50%{-webkit-transform:scale3d(1.1,1.1,1);-moz-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}}@-webkit-keyframes fwSuccessScaleFill-d1768f34{to{-webkit-box-shadow:inset 0 0 0 70px var(--colorPrimary);box-shadow:inset 0 0 0 70px var(--colorPrimary)}}@-moz-keyframes fwSuccessScaleFill-d1768f34{to{box-shadow:inset 0 0 0 70px var(--colorPrimary)}}@keyframes fwSuccessScaleFill-d1768f34{to{-webkit-box-shadow:inset 0 0 0 70px var(--colorPrimary);box-shadow:inset 0 0 0 70px var(--colorPrimary)}}.fw-success-pulse--circle[data-v-d1768f34]{stroke-width:4px;stroke-opacity:1;fill:none;fill-opacity:0;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;-webkit-animation-duration:3s;-moz-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:var(--6218fb6a);-moz-animation-iteration-count:var(--6218fb6a);animation-iteration-count:var(--6218fb6a);-webkit-animation-name:fwSuccessPulse-d1768f34;-moz-animation-name:fwSuccessPulse-d1768f34;animation-name:fwSuccessPulse-d1768f34;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes fwSuccessPulse-d1768f34{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@-moz-keyframes fwSuccessPulse-d1768f34{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-moz-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-moz-transform:scale(1.5);transform:scale(1.5)}}@keyframes fwSuccessPulse-d1768f34{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-webkit-transform:scale(1.5);-moz-transform:scale(1.5);transform:scale(1.5)}}";
|
|
118
|
-
styleInject(css_248z);
|
|
119
|
-
|
|
120
|
-
__default__.render = render;
|
|
121
|
-
__default__.__scopeId = "data-v-d1768f34";
|
|
122
|
-
|
|
123
|
-
export { __default__$1 as FwEmailPulse, __default__ as FwSuccessPulse };
|
|
@@ -1,286 +0,0 @@
|
|
|
1
|
-
import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, createElementVNode, Fragment, createTextVNode, toDisplayString, renderSlot, createCommentVNode, createVNode } from 'vue';
|
|
2
|
-
import { s as script$1 } from './fw-loading-spinner-BFpFFRJm.js';
|
|
3
|
-
import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
|
|
4
|
-
|
|
5
|
-
var script = defineComponent({
|
|
6
|
-
name: 'FwButton',
|
|
7
|
-
emits: [/** Fired on native click */
|
|
8
|
-
'click', /** Fired on native hover in */
|
|
9
|
-
'mouseover', /** Fired on native hover out */
|
|
10
|
-
'mouseout', /** Fired on native focus in */
|
|
11
|
-
'focusin', /** Fired on native focus out */
|
|
12
|
-
'focusout'],
|
|
13
|
-
components: {
|
|
14
|
-
FwLoadingSpinner: script$1
|
|
15
|
-
},
|
|
16
|
-
props: {
|
|
17
|
-
/**
|
|
18
|
-
* The label text of the button.
|
|
19
|
-
* Overrides the default slot content.
|
|
20
|
-
*/
|
|
21
|
-
label: {
|
|
22
|
-
type: String
|
|
23
|
-
},
|
|
24
|
-
/**
|
|
25
|
-
* A `router-link` path or object
|
|
26
|
-
*/
|
|
27
|
-
to: {
|
|
28
|
-
type: [String, Object]
|
|
29
|
-
},
|
|
30
|
-
/**
|
|
31
|
-
* A URL to link to using a native anchor element
|
|
32
|
-
*/
|
|
33
|
-
href: String,
|
|
34
|
-
/**
|
|
35
|
-
* The size of the button. Accepts: 'sm', 'md', 'lg', 'xl', '2xl'
|
|
36
|
-
*/
|
|
37
|
-
size: {
|
|
38
|
-
type: String,
|
|
39
|
-
"default": 'lg',
|
|
40
|
-
validator: function validator(value) {
|
|
41
|
-
return ['sm', 'md', 'lg', 'xl', '2xl'].includes(value);
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
/**
|
|
45
|
-
* The colour variant of the button.
|
|
46
|
-
* Accepts 'primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text', 'transparent'
|
|
47
|
-
*/
|
|
48
|
-
variant: {
|
|
49
|
-
type: String,
|
|
50
|
-
"default": 'primary',
|
|
51
|
-
validator: function validator(value) {
|
|
52
|
-
return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text', 'transparent'].includes(value);
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
/**
|
|
56
|
-
* The type attribute of the button
|
|
57
|
-
*/
|
|
58
|
-
buttonType: {
|
|
59
|
-
type: String,
|
|
60
|
-
"default": 'button',
|
|
61
|
-
validator: function validator(value) {
|
|
62
|
-
return ['button', 'submit', 'reset'].includes(value);
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
/**
|
|
66
|
-
* The animation type of the hover & focus states.
|
|
67
|
-
* Accepts 'alternate' and 'fade'
|
|
68
|
-
*/
|
|
69
|
-
animation: {
|
|
70
|
-
type: String,
|
|
71
|
-
"default": 'alternate',
|
|
72
|
-
validator: function validator(value) {
|
|
73
|
-
return ['alternate', 'fade'].includes(value);
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
|
-
/**
|
|
77
|
-
* Whether the button is rounded or not
|
|
78
|
-
*/
|
|
79
|
-
rounded: {
|
|
80
|
-
type: Boolean,
|
|
81
|
-
"default": true
|
|
82
|
-
},
|
|
83
|
-
/**
|
|
84
|
-
* Whether the loading animation is shown or not
|
|
85
|
-
*/
|
|
86
|
-
loading: {
|
|
87
|
-
type: Boolean,
|
|
88
|
-
"default": false
|
|
89
|
-
},
|
|
90
|
-
/**
|
|
91
|
-
* Whether the link should open in a new tab
|
|
92
|
-
*/
|
|
93
|
-
external: {
|
|
94
|
-
type: Boolean
|
|
95
|
-
},
|
|
96
|
-
/**
|
|
97
|
-
* Whether the button is disabled or not
|
|
98
|
-
*/
|
|
99
|
-
disabled: {
|
|
100
|
-
type: Boolean,
|
|
101
|
-
"default": false
|
|
102
|
-
},
|
|
103
|
-
/**
|
|
104
|
-
* Whether the button is preselected or not
|
|
105
|
-
*/
|
|
106
|
-
active: {
|
|
107
|
-
type: Boolean,
|
|
108
|
-
"default": false
|
|
109
|
-
}
|
|
110
|
-
},
|
|
111
|
-
setup: function setup(props, ctx) {
|
|
112
|
-
var baseClass = ref("inline-block text-center whitespace-nowrap transition-colors ease-in-out\n duration-300 focus:outline-0 border-2 focus-visible:outline-0 focus:ring-none ring-offset-2 focus-visible:ring\n ");
|
|
113
|
-
var buttonClasses = ref({
|
|
114
|
-
primary: {
|
|
115
|
-
text: '',
|
|
116
|
-
background: 'fw-button--primary',
|
|
117
|
-
border: 'border-button-primary-bg focus-visible:ring-button-primary-bg hover:border-button-primary-fade'
|
|
118
|
-
},
|
|
119
|
-
secondary: {
|
|
120
|
-
text: '',
|
|
121
|
-
background: 'fw-button--secondary',
|
|
122
|
-
border: 'border-button-secondary-text focus-visible:ring-button-secondary-text'
|
|
123
|
-
},
|
|
124
|
-
tertiary: {
|
|
125
|
-
text: '',
|
|
126
|
-
background: 'fw-button--tertiary',
|
|
127
|
-
border: 'border-button-tertiary-text focus-visible:ring-button-tertiary-text'
|
|
128
|
-
},
|
|
129
|
-
success: {
|
|
130
|
-
text: 'text-white hover:text-success active:text-success',
|
|
131
|
-
background: 'bg-success hover:bg-white active:bg-white',
|
|
132
|
-
border: 'border-success focus-visible:ring-success'
|
|
133
|
-
},
|
|
134
|
-
error: {
|
|
135
|
-
text: 'text-white hover:text-error active:text-error',
|
|
136
|
-
background: 'bg-error hover:bg-white active:bg-white',
|
|
137
|
-
border: 'border-error focus-visible:ring-error'
|
|
138
|
-
},
|
|
139
|
-
link: {
|
|
140
|
-
text: 'text-link font-normal active:no-underline focus-visible:no-underline',
|
|
141
|
-
background: '',
|
|
142
|
-
border: 'border-none focus-visible:ring-2 focus-visible:ring-link'
|
|
143
|
-
},
|
|
144
|
-
text: {
|
|
145
|
-
text: 'text-body font-semibold hover:text-white active:text-white',
|
|
146
|
-
background: 'bg-white hover:bg-body active:bg-body',
|
|
147
|
-
border: 'border-transparent focus-visible:ring-body'
|
|
148
|
-
},
|
|
149
|
-
transparent: {
|
|
150
|
-
text: 'text-grey-base hover:text-primary active:text-primary',
|
|
151
|
-
background: 'bg-none hover:bg-white focus:bg-white active:bg-white',
|
|
152
|
-
border: 'border-transparent focus-visible:ring-1 focus-visible:ring-primary'
|
|
153
|
-
},
|
|
154
|
-
disabled: {
|
|
155
|
-
text: 'text-white',
|
|
156
|
-
background: 'bg-grey-base bg-opacity-60',
|
|
157
|
-
border: ''
|
|
158
|
-
}
|
|
159
|
-
});
|
|
160
|
-
var sizes = ref({
|
|
161
|
-
sm: 'px-3 py-1 text-sm',
|
|
162
|
-
md: 'px-6 py-1.5 text-md',
|
|
163
|
-
lg: 'px-10 py-2.5 text-lg',
|
|
164
|
-
xl: 'px-12 py-3 text-xl',
|
|
165
|
-
'2xl': 'px-16 py-4 text-2xl'
|
|
166
|
-
});
|
|
167
|
-
var loadingSizes = ref({
|
|
168
|
-
sm: {
|
|
169
|
-
spacing: 'pr-[3px] -ml-[3px]',
|
|
170
|
-
size: 'w-2.5 h-2.5'
|
|
171
|
-
},
|
|
172
|
-
md: {
|
|
173
|
-
spacing: 'pr-[4px] -ml-[4px]',
|
|
174
|
-
size: 'w-4 h-4'
|
|
175
|
-
},
|
|
176
|
-
lg: {
|
|
177
|
-
spacing: 'pr-[8px] -ml-[8px]',
|
|
178
|
-
size: 'w-6 h-6'
|
|
179
|
-
},
|
|
180
|
-
xl: {
|
|
181
|
-
spacing: 'pr-[10px] -ml-[10px]',
|
|
182
|
-
size: 'w-7 h-7'
|
|
183
|
-
},
|
|
184
|
-
'2xl': {
|
|
185
|
-
spacing: 'pr-[14px] -ml-[14px]',
|
|
186
|
-
size: 'w-8 h-8'
|
|
187
|
-
}
|
|
188
|
-
});
|
|
189
|
-
var textColorClass = computed(function () {
|
|
190
|
-
return buttonClasses.value[props.variant].text;
|
|
191
|
-
});
|
|
192
|
-
var bgColorClass = computed(function () {
|
|
193
|
-
return buttonClasses.value[props.variant].background;
|
|
194
|
-
});
|
|
195
|
-
var sizeClass = computed(function () {
|
|
196
|
-
return sizes.value[props.size];
|
|
197
|
-
});
|
|
198
|
-
var borderClass = computed(function () {
|
|
199
|
-
return buttonClasses.value[props.variant].border;
|
|
200
|
-
});
|
|
201
|
-
var loadingSize = computed(function () {
|
|
202
|
-
return loadingSizes.value[props.size];
|
|
203
|
-
});
|
|
204
|
-
var onClick = function onClick(e) {
|
|
205
|
-
return ctx.emit('click', e);
|
|
206
|
-
};
|
|
207
|
-
var onMouseover = function onMouseover(e) {
|
|
208
|
-
return ctx.emit('mouseover', e);
|
|
209
|
-
};
|
|
210
|
-
var onMouseout = function onMouseout(e) {
|
|
211
|
-
return ctx.emit('mouseout', e);
|
|
212
|
-
};
|
|
213
|
-
var onFocusin = function onFocusin(e) {
|
|
214
|
-
return ctx.emit('focusin', e);
|
|
215
|
-
};
|
|
216
|
-
var onFocusout = function onFocusout(e) {
|
|
217
|
-
return ctx.emit('focusout', e);
|
|
218
|
-
};
|
|
219
|
-
var tagName = computed(function () {
|
|
220
|
-
if (props.to) return 'router-link';
|
|
221
|
-
if (props.href) return 'a';
|
|
222
|
-
return 'button';
|
|
223
|
-
});
|
|
224
|
-
return {
|
|
225
|
-
baseClass: baseClass,
|
|
226
|
-
textColorClass: textColorClass,
|
|
227
|
-
bgColorClass: bgColorClass,
|
|
228
|
-
sizeClass: sizeClass,
|
|
229
|
-
borderClass: borderClass,
|
|
230
|
-
onClick: onClick,
|
|
231
|
-
onMouseover: onMouseover,
|
|
232
|
-
onMouseout: onMouseout,
|
|
233
|
-
onFocusin: onFocusin,
|
|
234
|
-
onFocusout: onFocusout,
|
|
235
|
-
tagName: tagName,
|
|
236
|
-
loadingSize: loadingSize
|
|
237
|
-
};
|
|
238
|
-
}
|
|
239
|
-
});
|
|
240
|
-
|
|
241
|
-
var _hoisted_1 = {
|
|
242
|
-
key: 0,
|
|
243
|
-
"class": "fw-button--label relative"
|
|
244
|
-
};
|
|
245
|
-
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
246
|
-
var _component_FwLoadingSpinner = resolveComponent("FwLoadingSpinner");
|
|
247
|
-
return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
|
|
248
|
-
"class": normalizeClass(["fw-button", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.rounded && _ctx.variant !== 'link' ? 'rounded-full' : 'rounded', _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0 font-normal rounded-1' : 'font-semibold', _ctx.animation === 'fade' ? 'animation--fade' : 'animation--alternate', _ctx.loading === true ? 'fw-button--loading cursor-progress' : 'cursor-pointer', _ctx.disabled && !_ctx.loading ? 'pointer-events-none text-grey-light' : '', _ctx.disabled && _ctx.active ? 'fw-button--disabled-active' : '']]),
|
|
249
|
-
type: _ctx.tagName === 'button' ? _ctx.buttonType : null,
|
|
250
|
-
to: _ctx.to ? _ctx.to : null,
|
|
251
|
-
href: _ctx.href ? _ctx.href : null,
|
|
252
|
-
tabindex: _ctx.to ? 0 : null,
|
|
253
|
-
disabled: _ctx.loading || _ctx.disabled,
|
|
254
|
-
target: !!_ctx.external ? '_blank' : null,
|
|
255
|
-
active: _ctx.active,
|
|
256
|
-
onClick: _ctx.onClick,
|
|
257
|
-
onFocusin: _ctx.onFocusin,
|
|
258
|
-
onFocusout: _ctx.onFocusout,
|
|
259
|
-
onMouseover: _ctx.onMouseover,
|
|
260
|
-
onMouseout: _ctx.onMouseout
|
|
261
|
-
}, {
|
|
262
|
-
"default": withCtx(function () {
|
|
263
|
-
return [_ctx.$slots["default"] || _ctx.label ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
|
|
264
|
-
"class": normalizeClass(["fw-button--label-wrapper", _ctx.loading ? _ctx.loadingSize.spacing : 'pr-0 ml-0'])
|
|
265
|
-
}, [_ctx.label ? (openBlock(), createElementBlock(Fragment, {
|
|
266
|
-
key: 0
|
|
267
|
-
}, [createTextVNode(toDisplayString(_ctx.label), 1)], 64)) : _ctx.$slots["default"] ? renderSlot(_ctx.$slots, "default", {
|
|
268
|
-
key: 1
|
|
269
|
-
}) : createCommentVNode("", true)], 2), _ctx.loading ? (openBlock(), createElementBlock("div", {
|
|
270
|
-
key: 0,
|
|
271
|
-
"class": normalizeClass([_ctx.loadingSize.size, "inline-flex absolute top-2/4 -translate-y-2/4 left-full"])
|
|
272
|
-
}, [createVNode(_component_FwLoadingSpinner, {
|
|
273
|
-
"class": "w-full h-full"
|
|
274
|
-
})], 2)) : createCommentVNode("", true)])) : createCommentVNode("", true)];
|
|
275
|
-
}),
|
|
276
|
-
_: 3
|
|
277
|
-
}, 40, ["class", "type", "to", "href", "tabindex", "disabled", "target", "active", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
var css_248z = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-moz-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary:hover{background:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--disabled-active{background:var(--colorButtonDisabled)!important;color:rgb(from var(--colorButtonDisabledText) r g b/.6)!important}";
|
|
281
|
-
var stylesheet = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-moz-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary:hover{background:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--disabled-active{background:var(--colorButtonDisabled)!important;color:rgb(from var(--colorButtonDisabledText) r g b/.6)!important}";
|
|
282
|
-
styleInject(css_248z);
|
|
283
|
-
|
|
284
|
-
script.render = render;
|
|
285
|
-
|
|
286
|
-
export { script as s };
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { defineComponent, openBlock, createElementBlock } from 'vue';
|
|
2
|
-
import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
|
|
3
|
-
|
|
4
|
-
var script = defineComponent({
|
|
5
|
-
name: 'FwLoadingBar'
|
|
6
|
-
});
|
|
7
|
-
|
|
8
|
-
var _hoisted_1 = {
|
|
9
|
-
"class": "fw-loading-bar rounded",
|
|
10
|
-
"aria-hidden": "true"
|
|
11
|
-
};
|
|
12
|
-
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
13
|
-
return openBlock(), createElementBlock("div", _hoisted_1);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
var css_248z = ".fw-loading-bar{-webkit-animation:fwSkeletonLoading 1.5s linear infinite;-moz-animation:fwSkeletonLoading 1.5s linear infinite;animation:fwSkeletonLoading 1.5s linear infinite;background:#e4e4e4;background-image:-webkit-linear-gradient(350deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%);background-image:-moz-linear-gradient(350deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%);background-image:linear-gradient(100deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%);background-size:200% 200%}@-webkit-keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}@-moz-keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}@keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}";
|
|
17
|
-
var stylesheet = ".fw-loading-bar{-webkit-animation:fwSkeletonLoading 1.5s linear infinite;-moz-animation:fwSkeletonLoading 1.5s linear infinite;animation:fwSkeletonLoading 1.5s linear infinite;background:#e4e4e4;background-image:-webkit-linear-gradient(350deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%);background-image:-moz-linear-gradient(350deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%);background-image:linear-gradient(100deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%);background-size:200% 200%}@-webkit-keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}@-moz-keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}@keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}";
|
|
18
|
-
styleInject(css_248z);
|
|
19
|
-
|
|
20
|
-
script.render = render;
|
|
21
|
-
|
|
22
|
-
export { script as s };
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { h as render$1 } from './index-CzZMBMV_.js';
|
|
2
|
-
import { defineComponent, resolveComponent, openBlock, createBlock } from 'vue';
|
|
3
|
-
|
|
4
|
-
var script = defineComponent({
|
|
5
|
-
name: 'FwLoadingSpinner',
|
|
6
|
-
components: {
|
|
7
|
-
LoadingSvg: render$1
|
|
8
|
-
}
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
12
|
-
var _component_LoadingSvg = resolveComponent("LoadingSvg");
|
|
13
|
-
return openBlock(), createBlock(_component_LoadingSvg, {
|
|
14
|
-
"class": "fw-loading-spinner animate-spin"
|
|
15
|
-
});
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
script.render = render;
|
|
19
|
-
|
|
20
|
-
export { script as s };
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString } from 'vue';
|
|
2
|
-
import './fw-button.js';
|
|
3
|
-
import { s as script$1 } from './fw-button-DNozvo7B.js';
|
|
4
|
-
import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
|
|
5
|
-
import './fw-loading-spinner-BFpFFRJm.js';
|
|
6
|
-
import './index-CzZMBMV_.js';
|
|
7
|
-
import './check--YD4Ts6g.js';
|
|
8
|
-
|
|
9
|
-
var script = defineComponent({
|
|
10
|
-
name: 'FwPeriodSelector',
|
|
11
|
-
emits: [/** Fired on Click */
|
|
12
|
-
'update:modelValue'],
|
|
13
|
-
components: {
|
|
14
|
-
FwButton: script$1
|
|
15
|
-
},
|
|
16
|
-
props: {
|
|
17
|
-
modelValue: {
|
|
18
|
-
type: Number
|
|
19
|
-
},
|
|
20
|
-
/**
|
|
21
|
-
* The available periods to be chosen in months.
|
|
22
|
-
*/
|
|
23
|
-
periodOptions: {
|
|
24
|
-
type: Array
|
|
25
|
-
},
|
|
26
|
-
/**
|
|
27
|
-
* A size that will be propogated down to the button. Accepts: 'sm', 'md', 'lg', 'xl', '2xl'
|
|
28
|
-
*/
|
|
29
|
-
size: {
|
|
30
|
-
type: String,
|
|
31
|
-
"default": 'lg',
|
|
32
|
-
validator: function validator(value) {
|
|
33
|
-
return ['sm', 'md', 'lg', 'xl', '2xl'].includes(value);
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
disabled: {
|
|
37
|
-
type: Boolean,
|
|
38
|
-
"default": false
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
setup: function setup(props, ctx) {
|
|
42
|
-
var generateButtonLabel = function generateButtonLabel(month) {
|
|
43
|
-
return month === 1 ? month.toString() + ' month' : month.toString() + ' months';
|
|
44
|
-
};
|
|
45
|
-
var selectedPeriod = computed({
|
|
46
|
-
get: function get() {
|
|
47
|
-
return props.modelValue;
|
|
48
|
-
},
|
|
49
|
-
set: function set(period) {
|
|
50
|
-
ctx.emit('update:modelValue', period);
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
return {
|
|
54
|
-
generateButtonLabel: generateButtonLabel,
|
|
55
|
-
selectedPeriod: selectedPeriod
|
|
56
|
-
};
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
61
|
-
var _component_FwButton = resolveComponent("FwButton");
|
|
62
|
-
return openBlock(), createElementBlock("div", {
|
|
63
|
-
"class": normalizeClass(["fw-period-selector w-fit bg-grey-light bg-opacity-10 border-grey-light border-2 border-opacity-40 gap-x-1", _ctx.disabled === true ? 'hover:none cursor:none pointer-events-none' : ''])
|
|
64
|
-
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.periodOptions, function (period) {
|
|
65
|
-
return openBlock(), createBlock(_component_FwButton, {
|
|
66
|
-
key: period,
|
|
67
|
-
variant: _ctx.selectedPeriod === period ? _ctx.disabled ? 'disabled' : 'tertiary' : 'transparent',
|
|
68
|
-
"class": "hover:!border-button-primary-bg -m-[2px] flex-1",
|
|
69
|
-
size: _ctx.size,
|
|
70
|
-
onClick: function onClick($event) {
|
|
71
|
-
return _ctx.selectedPeriod = period;
|
|
72
|
-
},
|
|
73
|
-
disabled: _ctx.disabled,
|
|
74
|
-
active: _ctx.disabled && _ctx.selectedPeriod === period
|
|
75
|
-
}, {
|
|
76
|
-
"default": withCtx(function () {
|
|
77
|
-
return [createTextVNode(toDisplayString(_ctx.generateButtonLabel(period)), 1)];
|
|
78
|
-
}),
|
|
79
|
-
_: 2
|
|
80
|
-
}, 1032, ["variant", "size", "onClick", "disabled", "active"]);
|
|
81
|
-
}), 128))], 2);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
var css_248z = ".fw-period-selector{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-moz-box-orient:horizontal;-moz-box-direction:normal;border-radius:9999px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}";
|
|
85
|
-
var stylesheet = ".fw-period-selector{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-moz-box-orient:horizontal;-moz-box-direction:normal;border-radius:9999px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}";
|
|
86
|
-
styleInject(css_248z);
|
|
87
|
-
|
|
88
|
-
script.render = render;
|
|
89
|
-
|
|
90
|
-
export { script as FwPeriodSelector };
|
|
@@ -1,37 +0,0 @@
|
|
|
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 primaryFade5 = "".concat(colorPrimary, "0d"); // Adds 5% transparency
|
|
9
|
-
var primaryFade10 = "".concat(colorPrimary, "1a"); // Adds 10% transparency
|
|
10
|
-
var primaryFade20 = "".concat(colorPrimary, "33"); // Adds 20% transparency
|
|
11
|
-
var primaryFade30 = "".concat(colorPrimary, "4d"); // Adds 30% transparency
|
|
12
|
-
var primaryFade40 = "".concat(colorPrimary, "66"); // Adds 40% transparency
|
|
13
|
-
var primaryFade50 = "".concat(colorPrimary, "80"); // Adds 50% transparency
|
|
14
|
-
var primaryFade60 = "".concat(colorPrimary, "99"); // Adds 60% transparency
|
|
15
|
-
var primaryFade70 = "".concat(colorPrimary, "b3"); // Adds 70% transparency
|
|
16
|
-
var primaryFade80 = "".concat(colorPrimary, "cc"); // Adds 80% transparency
|
|
17
|
-
var primaryFade90 = "".concat(colorPrimary, "e6"); // Adds 90% transparency
|
|
18
|
-
return {
|
|
19
|
-
colorPrimary: colorPrimary,
|
|
20
|
-
colorSecondary: colorSecondary,
|
|
21
|
-
colorTertiary: colorTertiary,
|
|
22
|
-
fontFamily: fontFamily,
|
|
23
|
-
colorBody: colorBody,
|
|
24
|
-
primaryFade5: primaryFade5,
|
|
25
|
-
primaryFade10: primaryFade10,
|
|
26
|
-
primaryFade20: primaryFade20,
|
|
27
|
-
primaryFade30: primaryFade30,
|
|
28
|
-
primaryFade40: primaryFade40,
|
|
29
|
-
primaryFade50: primaryFade50,
|
|
30
|
-
primaryFade60: primaryFade60,
|
|
31
|
-
primaryFade70: primaryFade70,
|
|
32
|
-
primaryFade80: primaryFade80,
|
|
33
|
-
primaryFade90: primaryFade90
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
export { useColours as u };
|
package/icons/icons.stories.ts
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/vue3';
|
|
2
|
-
import * as icons from './';
|
|
3
|
-
|
|
4
|
-
const meta = {
|
|
5
|
-
title: 'Icons',
|
|
6
|
-
tags: ['!autodocs']
|
|
7
|
-
} satisfies Meta;
|
|
8
|
-
|
|
9
|
-
export default meta;
|
|
10
|
-
type Story = StoryObj<typeof meta>;
|
|
11
|
-
|
|
12
|
-
export const Basic: Story = {
|
|
13
|
-
render: () => ({
|
|
14
|
-
template: `
|
|
15
|
-
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 w-full items-center">
|
|
16
|
-
<div class="p-6 border-grey-20 border" v-for="icon, i in icons" :key="i">
|
|
17
|
-
<div class="flex flex-col items-center justify-center space-y-3">
|
|
18
|
-
<component :is="icon" class="w-14 h-14 text-body" />
|
|
19
|
-
</div>
|
|
20
|
-
</div>
|
|
21
|
-
</div>`,
|
|
22
|
-
setup() {
|
|
23
|
-
return {
|
|
24
|
-
icons
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
})
|
|
28
|
-
};
|