@frollo/frollo-web-ui 9.0.11 → 9.0.13
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 +26 -11
- package/esm/fw-checkbox.js +20 -9
- package/esm/fw-slider.js +6 -2
- package/frollo-web-ui.esm.js +26 -11
- package/index.d.ts +17 -0
- package/package.json +1 -1
- package/types/components/fw-checkbox/fw-checkbox.vue.d.ts +16 -0
- package/types/components/fw-slider/fw-slider.vue.d.ts +1 -0
- package/web-components/index.js +26 -11
package/cjs/index.js
CHANGED
|
@@ -8481,6 +8481,13 @@ function uniqueId(prefix) {
|
|
|
8481
8481
|
inputId: {
|
|
8482
8482
|
type: String,
|
|
8483
8483
|
required: false
|
|
8484
|
+
},
|
|
8485
|
+
/**
|
|
8486
|
+
* Whether the checkbox is disabled or not.
|
|
8487
|
+
*/
|
|
8488
|
+
disabled: {
|
|
8489
|
+
type: Boolean,
|
|
8490
|
+
"default": false
|
|
8484
8491
|
}
|
|
8485
8492
|
},
|
|
8486
8493
|
setup: function setup() {
|
|
@@ -8488,17 +8495,19 @@ function uniqueId(prefix) {
|
|
|
8488
8495
|
var _useColours = useColours(),
|
|
8489
8496
|
primaryFade5 = _useColours.primaryFade5,
|
|
8490
8497
|
colorErrorTextFade5 = _useColours.colorErrorTextFade5;
|
|
8498
|
+
var checkboxBaseClass = 'w-6 h-6 cursor-pointer border-brand-text2 border rounded';
|
|
8491
8499
|
return {
|
|
8492
8500
|
uuid: uuid,
|
|
8493
8501
|
primaryFade5: primaryFade5,
|
|
8494
|
-
colorErrorTextFade5: colorErrorTextFade5
|
|
8502
|
+
colorErrorTextFade5: colorErrorTextFade5,
|
|
8503
|
+
checkboxBaseClass: checkboxBaseClass
|
|
8495
8504
|
};
|
|
8496
8505
|
}
|
|
8497
8506
|
});
|
|
8498
8507
|
var __injectCSSVars__$a = function __injectCSSVars__() {
|
|
8499
8508
|
vue.useCssVars(function (_ctx) {
|
|
8500
8509
|
return {
|
|
8501
|
-
"
|
|
8510
|
+
"v242a63d2": _ctx.primaryFade5
|
|
8502
8511
|
};
|
|
8503
8512
|
});
|
|
8504
8513
|
};
|
|
@@ -8513,8 +8522,8 @@ var _hoisted_2$w = {
|
|
|
8513
8522
|
"class": "flex flex-col"
|
|
8514
8523
|
};
|
|
8515
8524
|
var _hoisted_3$q = ["for"];
|
|
8516
|
-
var _hoisted_4$f = ["id", "value", "name"];
|
|
8517
|
-
var _hoisted_5$e = ["id", "value", "name", "checked"];
|
|
8525
|
+
var _hoisted_4$f = ["id", "value", "name", "disabled"];
|
|
8526
|
+
var _hoisted_5$e = ["id", "value", "name", "disabled", "checked"];
|
|
8518
8527
|
var _hoisted_6$c = ["innerHTML"];
|
|
8519
8528
|
var _hoisted_7$9 = {
|
|
8520
8529
|
key: 0,
|
|
@@ -8551,7 +8560,8 @@ function render$t(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
8551
8560
|
value: _ctx.value ? _ctx.value : _ctx.name,
|
|
8552
8561
|
name: _ctx.disableNamePrefix ? _ctx.name : "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
|
|
8553
8562
|
type: "checkbox",
|
|
8554
|
-
|
|
8563
|
+
disabled: _ctx.disabled,
|
|
8564
|
+
"class": [_ctx.checkboxBaseClass, _ctx.disabled ? 'bg-grey-60' : 'bg-white']
|
|
8555
8565
|
}), null, 16, _hoisted_4$f)) : (vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
|
|
8556
8566
|
key: 1
|
|
8557
8567
|
}, field, {
|
|
@@ -8559,8 +8569,9 @@ function render$t(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
8559
8569
|
value: _ctx.value ? _ctx.value : _ctx.name,
|
|
8560
8570
|
name: _ctx.disableNamePrefix ? _ctx.name : "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
|
|
8561
8571
|
type: "checkbox",
|
|
8572
|
+
disabled: _ctx.disabled,
|
|
8562
8573
|
checked: _ctx.isChecked,
|
|
8563
|
-
"class":
|
|
8574
|
+
"class": [_ctx.checkboxBaseClass, _ctx.disabled ? 'bg-grey-60' : 'bg-white']
|
|
8564
8575
|
}), null, 16, _hoisted_5$e)), _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", {
|
|
8565
8576
|
key: 2,
|
|
8566
8577
|
"class": "ml-2 text-p text-body",
|
|
@@ -8577,10 +8588,10 @@ function render$t(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
8577
8588
|
}),
|
|
8578
8589
|
_: 1
|
|
8579
8590
|
}, 8, ["name", "value", "rules"])]);
|
|
8580
|
-
}var css_248z$m = ".fwFadeIn-enter-active[data-v-
|
|
8581
|
-
var stylesheet$m = ".fwFadeIn-enter-active[data-v-
|
|
8591
|
+
}var css_248z$m = ".fwFadeIn-enter-active[data-v-2ee5b97b],.fwFadeIn-leave-active[data-v-2ee5b97b]{-webkit-transition:opacity .35s ease;-moz-transition:opacity .35s ease;transition:opacity .35s ease}.fwFadeIn-enter-from[data-v-2ee5b97b],.fwFadeIn-leave-to[data-v-2ee5b97b]{opacity:0}.fwFadeIn-enter-to[data-v-2ee5b97b],.fwFadeIn-leave-from[data-v-2ee5b97b]{opacity:1}.fw-checkbox input[data-v-2ee5b97b]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;-moz-transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,-webkit-box-shadow .14s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-2ee5b97b]:hover{background-color:var(--v242a63d2);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity));background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%235F6489'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:rgb(222 224 227/var(--tw-border-opacity))}.fw-checkbox input[data-v-2ee5b97b]:disabled:not(:checked){background-image:none}";
|
|
8592
|
+
var stylesheet$m = ".fwFadeIn-enter-active[data-v-2ee5b97b],.fwFadeIn-leave-active[data-v-2ee5b97b]{-webkit-transition:opacity .35s ease;-moz-transition:opacity .35s ease;transition:opacity .35s ease}.fwFadeIn-enter-from[data-v-2ee5b97b],.fwFadeIn-leave-to[data-v-2ee5b97b]{opacity:0}.fwFadeIn-enter-to[data-v-2ee5b97b],.fwFadeIn-leave-from[data-v-2ee5b97b]{opacity:1}.fw-checkbox input[data-v-2ee5b97b]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;-moz-transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,-webkit-box-shadow .14s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-2ee5b97b]:hover{background-color:var(--v242a63d2);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity));background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%235F6489'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:rgb(222 224 227/var(--tw-border-opacity))}.fw-checkbox input[data-v-2ee5b97b]:disabled:not(:checked){background-image:none}";
|
|
8582
8593
|
styleInject(css_248z$m);__default__$e.render = render$t;
|
|
8583
|
-
__default__$e.__scopeId = "data-v-
|
|
8594
|
+
__default__$e.__scopeId = "data-v-2ee5b97b";var stateMap = new WeakMap();
|
|
8584
8595
|
function getState(el) {
|
|
8585
8596
|
var s = stateMap.get(el);
|
|
8586
8597
|
if (!s) {
|
|
@@ -23451,6 +23462,7 @@ var script$2 = vue.defineComponent({
|
|
|
23451
23462
|
// Internal thumbs
|
|
23452
23463
|
var minLocal = vue.ref((_props$minValue = props.minValue) !== null && _props$minValue !== void 0 ? _props$minValue : props.min);
|
|
23453
23464
|
var maxLocal = vue.ref((_props$maxValue = props.maxValue) !== null && _props$maxValue !== void 0 ? _props$maxValue : props.max);
|
|
23465
|
+
var lastMoved = vue.ref('max');
|
|
23454
23466
|
// --- Sync from props -> local (when parent updates) ---
|
|
23455
23467
|
vue.watch(function () {
|
|
23456
23468
|
return props.minValue;
|
|
@@ -23471,6 +23483,7 @@ var script$2 = vue.defineComponent({
|
|
|
23471
23483
|
// --- Clamp + emit local -> parent (when user drags) ---
|
|
23472
23484
|
vue.watch(minLocal, function (v, old) {
|
|
23473
23485
|
var _props$minValue2;
|
|
23486
|
+
if (v !== old) lastMoved.value = 'min';
|
|
23474
23487
|
var clamped = clamp(v, props.min, maxLocal.value);
|
|
23475
23488
|
if (clamped !== v) minLocal.value = clamped;
|
|
23476
23489
|
if (clamped !== ((_props$minValue2 = props.minValue) !== null && _props$minValue2 !== void 0 ? _props$minValue2 : props.min) && clamped !== old) {
|
|
@@ -23479,6 +23492,7 @@ var script$2 = vue.defineComponent({
|
|
|
23479
23492
|
});
|
|
23480
23493
|
vue.watch(maxLocal, function (v, old) {
|
|
23481
23494
|
var _props$maxValue2;
|
|
23495
|
+
if (v !== old) lastMoved.value = 'max';
|
|
23482
23496
|
var clamped = clamp(v, minLocal.value, props.max);
|
|
23483
23497
|
if (clamped !== v) maxLocal.value = clamped;
|
|
23484
23498
|
if (clamped !== ((_props$maxValue2 = props.maxValue) !== null && _props$maxValue2 !== void 0 ? _props$maxValue2 : props.max) && clamped !== old) {
|
|
@@ -23508,6 +23522,7 @@ var script$2 = vue.defineComponent({
|
|
|
23508
23522
|
minPercentage: minPercentage,
|
|
23509
23523
|
maxPercentage: maxPercentage,
|
|
23510
23524
|
clippingPoint: clippingPoint,
|
|
23525
|
+
lastMoved: lastMoved,
|
|
23511
23526
|
trackStyle: trackStyle
|
|
23512
23527
|
};
|
|
23513
23528
|
}
|
|
@@ -23542,7 +23557,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
23542
23557
|
return _ctx.minLocal = $event;
|
|
23543
23558
|
}),
|
|
23544
23559
|
style: vue.normalizeStyle({
|
|
23545
|
-
zIndex: _ctx.clippingPoint ?
|
|
23560
|
+
zIndex: !_ctx.clippingPoint && _ctx.lastMoved === 'min' ? 30 : 20
|
|
23546
23561
|
})
|
|
23547
23562
|
}, null, 12, _hoisted_2$1), [[vue.vModelText, _ctx.minLocal, void 0, {
|
|
23548
23563
|
number: true
|
|
@@ -23558,7 +23573,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
23558
23573
|
return _ctx.maxLocal = $event;
|
|
23559
23574
|
}),
|
|
23560
23575
|
style: vue.normalizeStyle({
|
|
23561
|
-
zIndex: _ctx.clippingPoint ? 30 : 20
|
|
23576
|
+
zIndex: _ctx.clippingPoint || _ctx.lastMoved === 'max' ? 30 : 20
|
|
23562
23577
|
})
|
|
23563
23578
|
}, null, 12, _hoisted_3), [[vue.vModelText, _ctx.maxLocal, void 0, {
|
|
23564
23579
|
number: true
|
package/esm/fw-checkbox.js
CHANGED
|
@@ -72,6 +72,13 @@ var __default__ = defineComponent({
|
|
|
72
72
|
inputId: {
|
|
73
73
|
type: String,
|
|
74
74
|
required: false
|
|
75
|
+
},
|
|
76
|
+
/**
|
|
77
|
+
* Whether the checkbox is disabled or not.
|
|
78
|
+
*/
|
|
79
|
+
disabled: {
|
|
80
|
+
type: Boolean,
|
|
81
|
+
"default": false
|
|
75
82
|
}
|
|
76
83
|
},
|
|
77
84
|
setup: function setup() {
|
|
@@ -79,17 +86,19 @@ var __default__ = defineComponent({
|
|
|
79
86
|
var _useColours = useColours(),
|
|
80
87
|
primaryFade5 = _useColours.primaryFade5,
|
|
81
88
|
colorErrorTextFade5 = _useColours.colorErrorTextFade5;
|
|
89
|
+
var checkboxBaseClass = 'w-6 h-6 cursor-pointer border-brand-text2 border rounded';
|
|
82
90
|
return {
|
|
83
91
|
uuid: uuid,
|
|
84
92
|
primaryFade5: primaryFade5,
|
|
85
|
-
colorErrorTextFade5: colorErrorTextFade5
|
|
93
|
+
colorErrorTextFade5: colorErrorTextFade5,
|
|
94
|
+
checkboxBaseClass: checkboxBaseClass
|
|
86
95
|
};
|
|
87
96
|
}
|
|
88
97
|
});
|
|
89
98
|
var __injectCSSVars__ = function __injectCSSVars__() {
|
|
90
99
|
useCssVars(function (_ctx) {
|
|
91
100
|
return {
|
|
92
|
-
"
|
|
101
|
+
"v242a63d2": _ctx.primaryFade5
|
|
93
102
|
};
|
|
94
103
|
});
|
|
95
104
|
};
|
|
@@ -106,8 +115,8 @@ var _hoisted_2 = {
|
|
|
106
115
|
"class": "flex flex-col"
|
|
107
116
|
};
|
|
108
117
|
var _hoisted_3 = ["for"];
|
|
109
|
-
var _hoisted_4 = ["id", "value", "name"];
|
|
110
|
-
var _hoisted_5 = ["id", "value", "name", "checked"];
|
|
118
|
+
var _hoisted_4 = ["id", "value", "name", "disabled"];
|
|
119
|
+
var _hoisted_5 = ["id", "value", "name", "disabled", "checked"];
|
|
111
120
|
var _hoisted_6 = ["innerHTML"];
|
|
112
121
|
var _hoisted_7 = {
|
|
113
122
|
key: 0,
|
|
@@ -144,7 +153,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
144
153
|
value: _ctx.value ? _ctx.value : _ctx.name,
|
|
145
154
|
name: _ctx.disableNamePrefix ? _ctx.name : "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
|
|
146
155
|
type: "checkbox",
|
|
147
|
-
|
|
156
|
+
disabled: _ctx.disabled,
|
|
157
|
+
"class": [_ctx.checkboxBaseClass, _ctx.disabled ? 'bg-grey-60' : 'bg-white']
|
|
148
158
|
}), null, 16, _hoisted_4)) : (openBlock(), createElementBlock("input", mergeProps({
|
|
149
159
|
key: 1
|
|
150
160
|
}, field, {
|
|
@@ -152,8 +162,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
152
162
|
value: _ctx.value ? _ctx.value : _ctx.name,
|
|
153
163
|
name: _ctx.disableNamePrefix ? _ctx.name : "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
|
|
154
164
|
type: "checkbox",
|
|
165
|
+
disabled: _ctx.disabled,
|
|
155
166
|
checked: _ctx.isChecked,
|
|
156
|
-
"class":
|
|
167
|
+
"class": [_ctx.checkboxBaseClass, _ctx.disabled ? 'bg-grey-60' : 'bg-white']
|
|
157
168
|
}), null, 16, _hoisted_5)), _ctx.label ? (openBlock(), createElementBlock("span", {
|
|
158
169
|
key: 2,
|
|
159
170
|
"class": "ml-2 text-p text-body",
|
|
@@ -172,11 +183,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
172
183
|
}, 8, ["name", "value", "rules"])]);
|
|
173
184
|
}
|
|
174
185
|
|
|
175
|
-
var css_248z = ".fwFadeIn-enter-active[data-v-
|
|
176
|
-
var stylesheet = ".fwFadeIn-enter-active[data-v-
|
|
186
|
+
var css_248z = ".fwFadeIn-enter-active[data-v-2ee5b97b],.fwFadeIn-leave-active[data-v-2ee5b97b]{-webkit-transition:opacity .35s ease;-moz-transition:opacity .35s ease;transition:opacity .35s ease}.fwFadeIn-enter-from[data-v-2ee5b97b],.fwFadeIn-leave-to[data-v-2ee5b97b]{opacity:0}.fwFadeIn-enter-to[data-v-2ee5b97b],.fwFadeIn-leave-from[data-v-2ee5b97b]{opacity:1}.fw-checkbox input[data-v-2ee5b97b]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;-moz-transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,-webkit-box-shadow .14s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-2ee5b97b]:hover{background-color:var(--v242a63d2);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity));background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%235F6489'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:rgb(222 224 227/var(--tw-border-opacity))}.fw-checkbox input[data-v-2ee5b97b]:disabled:not(:checked){background-image:none}";
|
|
187
|
+
var stylesheet = ".fwFadeIn-enter-active[data-v-2ee5b97b],.fwFadeIn-leave-active[data-v-2ee5b97b]{-webkit-transition:opacity .35s ease;-moz-transition:opacity .35s ease;transition:opacity .35s ease}.fwFadeIn-enter-from[data-v-2ee5b97b],.fwFadeIn-leave-to[data-v-2ee5b97b]{opacity:0}.fwFadeIn-enter-to[data-v-2ee5b97b],.fwFadeIn-leave-from[data-v-2ee5b97b]{opacity:1}.fw-checkbox input[data-v-2ee5b97b]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;-moz-transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,-webkit-box-shadow .14s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-2ee5b97b]:hover{background-color:var(--v242a63d2);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity));background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%235F6489'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:rgb(222 224 227/var(--tw-border-opacity))}.fw-checkbox input[data-v-2ee5b97b]:disabled:not(:checked){background-image:none}";
|
|
177
188
|
styleInject(css_248z);
|
|
178
189
|
|
|
179
190
|
__default__.render = render;
|
|
180
|
-
__default__.__scopeId = "data-v-
|
|
191
|
+
__default__.__scopeId = "data-v-2ee5b97b";
|
|
181
192
|
|
|
182
193
|
export { __default__ as FwCheckbox };
|
package/esm/fw-slider.js
CHANGED
|
@@ -35,6 +35,7 @@ var script = defineComponent({
|
|
|
35
35
|
// Internal thumbs
|
|
36
36
|
var minLocal = ref((_props$minValue = props.minValue) !== null && _props$minValue !== void 0 ? _props$minValue : props.min);
|
|
37
37
|
var maxLocal = ref((_props$maxValue = props.maxValue) !== null && _props$maxValue !== void 0 ? _props$maxValue : props.max);
|
|
38
|
+
var lastMoved = ref('max');
|
|
38
39
|
// --- Sync from props -> local (when parent updates) ---
|
|
39
40
|
watch(function () {
|
|
40
41
|
return props.minValue;
|
|
@@ -55,6 +56,7 @@ var script = defineComponent({
|
|
|
55
56
|
// --- Clamp + emit local -> parent (when user drags) ---
|
|
56
57
|
watch(minLocal, function (v, old) {
|
|
57
58
|
var _props$minValue2;
|
|
59
|
+
if (v !== old) lastMoved.value = 'min';
|
|
58
60
|
var clamped = clamp(v, props.min, maxLocal.value);
|
|
59
61
|
if (clamped !== v) minLocal.value = clamped;
|
|
60
62
|
if (clamped !== ((_props$minValue2 = props.minValue) !== null && _props$minValue2 !== void 0 ? _props$minValue2 : props.min) && clamped !== old) {
|
|
@@ -63,6 +65,7 @@ var script = defineComponent({
|
|
|
63
65
|
});
|
|
64
66
|
watch(maxLocal, function (v, old) {
|
|
65
67
|
var _props$maxValue2;
|
|
68
|
+
if (v !== old) lastMoved.value = 'max';
|
|
66
69
|
var clamped = clamp(v, minLocal.value, props.max);
|
|
67
70
|
if (clamped !== v) maxLocal.value = clamped;
|
|
68
71
|
if (clamped !== ((_props$maxValue2 = props.maxValue) !== null && _props$maxValue2 !== void 0 ? _props$maxValue2 : props.max) && clamped !== old) {
|
|
@@ -92,6 +95,7 @@ var script = defineComponent({
|
|
|
92
95
|
minPercentage: minPercentage,
|
|
93
96
|
maxPercentage: maxPercentage,
|
|
94
97
|
clippingPoint: clippingPoint,
|
|
98
|
+
lastMoved: lastMoved,
|
|
95
99
|
trackStyle: trackStyle
|
|
96
100
|
};
|
|
97
101
|
}
|
|
@@ -128,7 +132,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
128
132
|
return _ctx.minLocal = $event;
|
|
129
133
|
}),
|
|
130
134
|
style: normalizeStyle({
|
|
131
|
-
zIndex: _ctx.clippingPoint ?
|
|
135
|
+
zIndex: !_ctx.clippingPoint && _ctx.lastMoved === 'min' ? 30 : 20
|
|
132
136
|
})
|
|
133
137
|
}, null, 12, _hoisted_2), [[vModelText, _ctx.minLocal, void 0, {
|
|
134
138
|
number: true
|
|
@@ -144,7 +148,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
144
148
|
return _ctx.maxLocal = $event;
|
|
145
149
|
}),
|
|
146
150
|
style: normalizeStyle({
|
|
147
|
-
zIndex: _ctx.clippingPoint ? 30 : 20
|
|
151
|
+
zIndex: _ctx.clippingPoint || _ctx.lastMoved === 'max' ? 30 : 20
|
|
148
152
|
})
|
|
149
153
|
}, null, 12, _hoisted_3), [[vModelText, _ctx.maxLocal, void 0, {
|
|
150
154
|
number: true
|
package/frollo-web-ui.esm.js
CHANGED
|
@@ -8673,6 +8673,13 @@ var __default__$e = defineComponent({
|
|
|
8673
8673
|
inputId: {
|
|
8674
8674
|
type: String,
|
|
8675
8675
|
required: false
|
|
8676
|
+
},
|
|
8677
|
+
/**
|
|
8678
|
+
* Whether the checkbox is disabled or not.
|
|
8679
|
+
*/
|
|
8680
|
+
disabled: {
|
|
8681
|
+
type: Boolean,
|
|
8682
|
+
"default": false
|
|
8676
8683
|
}
|
|
8677
8684
|
},
|
|
8678
8685
|
setup: function setup() {
|
|
@@ -8680,17 +8687,19 @@ var __default__$e = defineComponent({
|
|
|
8680
8687
|
var _useColours = useColours(),
|
|
8681
8688
|
primaryFade5 = _useColours.primaryFade5,
|
|
8682
8689
|
colorErrorTextFade5 = _useColours.colorErrorTextFade5;
|
|
8690
|
+
var checkboxBaseClass = 'w-6 h-6 cursor-pointer border-brand-text2 border rounded';
|
|
8683
8691
|
return {
|
|
8684
8692
|
uuid: uuid,
|
|
8685
8693
|
primaryFade5: primaryFade5,
|
|
8686
|
-
colorErrorTextFade5: colorErrorTextFade5
|
|
8694
|
+
colorErrorTextFade5: colorErrorTextFade5,
|
|
8695
|
+
checkboxBaseClass: checkboxBaseClass
|
|
8687
8696
|
};
|
|
8688
8697
|
}
|
|
8689
8698
|
});
|
|
8690
8699
|
var __injectCSSVars__$a = function __injectCSSVars__() {
|
|
8691
8700
|
useCssVars(function (_ctx) {
|
|
8692
8701
|
return {
|
|
8693
|
-
"
|
|
8702
|
+
"v242a63d2": _ctx.primaryFade5
|
|
8694
8703
|
};
|
|
8695
8704
|
});
|
|
8696
8705
|
};
|
|
@@ -8707,8 +8716,8 @@ var _hoisted_2$w = {
|
|
|
8707
8716
|
"class": "flex flex-col"
|
|
8708
8717
|
};
|
|
8709
8718
|
var _hoisted_3$q = ["for"];
|
|
8710
|
-
var _hoisted_4$f = ["id", "value", "name"];
|
|
8711
|
-
var _hoisted_5$e = ["id", "value", "name", "checked"];
|
|
8719
|
+
var _hoisted_4$f = ["id", "value", "name", "disabled"];
|
|
8720
|
+
var _hoisted_5$e = ["id", "value", "name", "disabled", "checked"];
|
|
8712
8721
|
var _hoisted_6$c = ["innerHTML"];
|
|
8713
8722
|
var _hoisted_7$9 = {
|
|
8714
8723
|
key: 0,
|
|
@@ -8745,7 +8754,8 @@ function render$t(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
8745
8754
|
value: _ctx.value ? _ctx.value : _ctx.name,
|
|
8746
8755
|
name: _ctx.disableNamePrefix ? _ctx.name : "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
|
|
8747
8756
|
type: "checkbox",
|
|
8748
|
-
|
|
8757
|
+
disabled: _ctx.disabled,
|
|
8758
|
+
"class": [_ctx.checkboxBaseClass, _ctx.disabled ? 'bg-grey-60' : 'bg-white']
|
|
8749
8759
|
}), null, 16, _hoisted_4$f)) : (openBlock(), createElementBlock("input", mergeProps({
|
|
8750
8760
|
key: 1
|
|
8751
8761
|
}, field, {
|
|
@@ -8753,8 +8763,9 @@ function render$t(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
8753
8763
|
value: _ctx.value ? _ctx.value : _ctx.name,
|
|
8754
8764
|
name: _ctx.disableNamePrefix ? _ctx.name : "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
|
|
8755
8765
|
type: "checkbox",
|
|
8766
|
+
disabled: _ctx.disabled,
|
|
8756
8767
|
checked: _ctx.isChecked,
|
|
8757
|
-
"class":
|
|
8768
|
+
"class": [_ctx.checkboxBaseClass, _ctx.disabled ? 'bg-grey-60' : 'bg-white']
|
|
8758
8769
|
}), null, 16, _hoisted_5$e)), _ctx.label ? (openBlock(), createElementBlock("span", {
|
|
8759
8770
|
key: 2,
|
|
8760
8771
|
"class": "ml-2 text-p text-body",
|
|
@@ -8773,12 +8784,12 @@ function render$t(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
8773
8784
|
}, 8, ["name", "value", "rules"])]);
|
|
8774
8785
|
}
|
|
8775
8786
|
|
|
8776
|
-
var css_248z$m = ".fwFadeIn-enter-active[data-v-
|
|
8777
|
-
var stylesheet$m = ".fwFadeIn-enter-active[data-v-
|
|
8787
|
+
var css_248z$m = ".fwFadeIn-enter-active[data-v-2ee5b97b],.fwFadeIn-leave-active[data-v-2ee5b97b]{-webkit-transition:opacity .35s ease;-moz-transition:opacity .35s ease;transition:opacity .35s ease}.fwFadeIn-enter-from[data-v-2ee5b97b],.fwFadeIn-leave-to[data-v-2ee5b97b]{opacity:0}.fwFadeIn-enter-to[data-v-2ee5b97b],.fwFadeIn-leave-from[data-v-2ee5b97b]{opacity:1}.fw-checkbox input[data-v-2ee5b97b]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;-moz-transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,-webkit-box-shadow .14s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-2ee5b97b]:hover{background-color:var(--v242a63d2);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity));background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%235F6489'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:rgb(222 224 227/var(--tw-border-opacity))}.fw-checkbox input[data-v-2ee5b97b]:disabled:not(:checked){background-image:none}";
|
|
8788
|
+
var stylesheet$m = ".fwFadeIn-enter-active[data-v-2ee5b97b],.fwFadeIn-leave-active[data-v-2ee5b97b]{-webkit-transition:opacity .35s ease;-moz-transition:opacity .35s ease;transition:opacity .35s ease}.fwFadeIn-enter-from[data-v-2ee5b97b],.fwFadeIn-leave-to[data-v-2ee5b97b]{opacity:0}.fwFadeIn-enter-to[data-v-2ee5b97b],.fwFadeIn-leave-from[data-v-2ee5b97b]{opacity:1}.fw-checkbox input[data-v-2ee5b97b]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;-moz-transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,-webkit-box-shadow .14s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-2ee5b97b]:hover{background-color:var(--v242a63d2);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity));background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%235F6489'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:rgb(222 224 227/var(--tw-border-opacity))}.fw-checkbox input[data-v-2ee5b97b]:disabled:not(:checked){background-image:none}";
|
|
8778
8789
|
styleInject(css_248z$m);
|
|
8779
8790
|
|
|
8780
8791
|
__default__$e.render = render$t;
|
|
8781
|
-
__default__$e.__scopeId = "data-v-
|
|
8792
|
+
__default__$e.__scopeId = "data-v-2ee5b97b";
|
|
8782
8793
|
|
|
8783
8794
|
var stateMap = new WeakMap();
|
|
8784
8795
|
function getState(el) {
|
|
@@ -23960,6 +23971,7 @@ var script$2 = defineComponent({
|
|
|
23960
23971
|
// Internal thumbs
|
|
23961
23972
|
var minLocal = ref((_props$minValue = props.minValue) !== null && _props$minValue !== void 0 ? _props$minValue : props.min);
|
|
23962
23973
|
var maxLocal = ref((_props$maxValue = props.maxValue) !== null && _props$maxValue !== void 0 ? _props$maxValue : props.max);
|
|
23974
|
+
var lastMoved = ref('max');
|
|
23963
23975
|
// --- Sync from props -> local (when parent updates) ---
|
|
23964
23976
|
watch(function () {
|
|
23965
23977
|
return props.minValue;
|
|
@@ -23980,6 +23992,7 @@ var script$2 = defineComponent({
|
|
|
23980
23992
|
// --- Clamp + emit local -> parent (when user drags) ---
|
|
23981
23993
|
watch(minLocal, function (v, old) {
|
|
23982
23994
|
var _props$minValue2;
|
|
23995
|
+
if (v !== old) lastMoved.value = 'min';
|
|
23983
23996
|
var clamped = clamp(v, props.min, maxLocal.value);
|
|
23984
23997
|
if (clamped !== v) minLocal.value = clamped;
|
|
23985
23998
|
if (clamped !== ((_props$minValue2 = props.minValue) !== null && _props$minValue2 !== void 0 ? _props$minValue2 : props.min) && clamped !== old) {
|
|
@@ -23988,6 +24001,7 @@ var script$2 = defineComponent({
|
|
|
23988
24001
|
});
|
|
23989
24002
|
watch(maxLocal, function (v, old) {
|
|
23990
24003
|
var _props$maxValue2;
|
|
24004
|
+
if (v !== old) lastMoved.value = 'max';
|
|
23991
24005
|
var clamped = clamp(v, minLocal.value, props.max);
|
|
23992
24006
|
if (clamped !== v) maxLocal.value = clamped;
|
|
23993
24007
|
if (clamped !== ((_props$maxValue2 = props.maxValue) !== null && _props$maxValue2 !== void 0 ? _props$maxValue2 : props.max) && clamped !== old) {
|
|
@@ -24017,6 +24031,7 @@ var script$2 = defineComponent({
|
|
|
24017
24031
|
minPercentage: minPercentage,
|
|
24018
24032
|
maxPercentage: maxPercentage,
|
|
24019
24033
|
clippingPoint: clippingPoint,
|
|
24034
|
+
lastMoved: lastMoved,
|
|
24020
24035
|
trackStyle: trackStyle
|
|
24021
24036
|
};
|
|
24022
24037
|
}
|
|
@@ -24053,7 +24068,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
24053
24068
|
return _ctx.minLocal = $event;
|
|
24054
24069
|
}),
|
|
24055
24070
|
style: normalizeStyle({
|
|
24056
|
-
zIndex: _ctx.clippingPoint ?
|
|
24071
|
+
zIndex: !_ctx.clippingPoint && _ctx.lastMoved === 'min' ? 30 : 20
|
|
24057
24072
|
})
|
|
24058
24073
|
}, null, 12, _hoisted_2$1), [[vModelText, _ctx.minLocal, void 0, {
|
|
24059
24074
|
number: true
|
|
@@ -24069,7 +24084,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
24069
24084
|
return _ctx.maxLocal = $event;
|
|
24070
24085
|
}),
|
|
24071
24086
|
style: normalizeStyle({
|
|
24072
|
-
zIndex: _ctx.clippingPoint ? 30 : 20
|
|
24087
|
+
zIndex: _ctx.clippingPoint || _ctx.lastMoved === 'max' ? 30 : 20
|
|
24073
24088
|
})
|
|
24074
24089
|
}, null, 12, _hoisted_3), [[vModelText, _ctx.maxLocal, void 0, {
|
|
24075
24090
|
number: true
|
package/index.d.ts
CHANGED
|
@@ -776,10 +776,18 @@ declare const __default__$b: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
776
776
|
type: StringConstructor;
|
|
777
777
|
required: false;
|
|
778
778
|
};
|
|
779
|
+
/**
|
|
780
|
+
* Whether the checkbox is disabled or not.
|
|
781
|
+
*/
|
|
782
|
+
disabled: {
|
|
783
|
+
type: BooleanConstructor;
|
|
784
|
+
default: boolean;
|
|
785
|
+
};
|
|
779
786
|
}>, {
|
|
780
787
|
uuid: string;
|
|
781
788
|
primaryFade5: string;
|
|
782
789
|
colorErrorTextFade5: string;
|
|
790
|
+
checkboxBaseClass: string;
|
|
783
791
|
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
784
792
|
/**
|
|
785
793
|
* The name of the checkbox input field.
|
|
@@ -844,10 +852,18 @@ declare const __default__$b: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
844
852
|
type: StringConstructor;
|
|
845
853
|
required: false;
|
|
846
854
|
};
|
|
855
|
+
/**
|
|
856
|
+
* Whether the checkbox is disabled or not.
|
|
857
|
+
*/
|
|
858
|
+
disabled: {
|
|
859
|
+
type: BooleanConstructor;
|
|
860
|
+
default: boolean;
|
|
861
|
+
};
|
|
847
862
|
}>> & Readonly<{}>, {
|
|
848
863
|
enableErrors: boolean;
|
|
849
864
|
isChecked: boolean;
|
|
850
865
|
disableNamePrefix: boolean;
|
|
866
|
+
disabled: boolean;
|
|
851
867
|
}, {}, {
|
|
852
868
|
InputField: {
|
|
853
869
|
new (...args: any[]): vue.CreateComponentPublicInstance<Readonly<vue.ExtractPropTypes<{
|
|
@@ -4463,6 +4479,7 @@ declare const _default$2: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
4463
4479
|
minPercentage: vue.ComputedRef<number>;
|
|
4464
4480
|
maxPercentage: vue.ComputedRef<number>;
|
|
4465
4481
|
clippingPoint: vue.ComputedRef<boolean>;
|
|
4482
|
+
lastMoved: vue.Ref<"min" | "max", "min" | "max">;
|
|
4466
4483
|
trackStyle: vue.ComputedRef<{
|
|
4467
4484
|
background: string;
|
|
4468
4485
|
}>;
|
package/package.json
CHANGED
|
@@ -64,10 +64,18 @@ declare const __default__: import("vue").DefineComponent<import("vue").ExtractPr
|
|
|
64
64
|
type: StringConstructor;
|
|
65
65
|
required: false;
|
|
66
66
|
};
|
|
67
|
+
/**
|
|
68
|
+
* Whether the checkbox is disabled or not.
|
|
69
|
+
*/
|
|
70
|
+
disabled: {
|
|
71
|
+
type: BooleanConstructor;
|
|
72
|
+
default: boolean;
|
|
73
|
+
};
|
|
67
74
|
}>, {
|
|
68
75
|
uuid: string;
|
|
69
76
|
primaryFade5: string;
|
|
70
77
|
colorErrorTextFade5: string;
|
|
78
|
+
checkboxBaseClass: string;
|
|
71
79
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
72
80
|
/**
|
|
73
81
|
* The name of the checkbox input field.
|
|
@@ -132,10 +140,18 @@ declare const __default__: import("vue").DefineComponent<import("vue").ExtractPr
|
|
|
132
140
|
type: StringConstructor;
|
|
133
141
|
required: false;
|
|
134
142
|
};
|
|
143
|
+
/**
|
|
144
|
+
* Whether the checkbox is disabled or not.
|
|
145
|
+
*/
|
|
146
|
+
disabled: {
|
|
147
|
+
type: BooleanConstructor;
|
|
148
|
+
default: boolean;
|
|
149
|
+
};
|
|
135
150
|
}>> & Readonly<{}>, {
|
|
136
151
|
enableErrors: boolean;
|
|
137
152
|
isChecked: boolean;
|
|
138
153
|
disableNamePrefix: boolean;
|
|
154
|
+
disabled: boolean;
|
|
139
155
|
}, {}, {
|
|
140
156
|
InputField: {
|
|
141
157
|
new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
|
|
@@ -25,6 +25,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
25
25
|
minPercentage: import("vue").ComputedRef<number>;
|
|
26
26
|
maxPercentage: import("vue").ComputedRef<number>;
|
|
27
27
|
clippingPoint: import("vue").ComputedRef<boolean>;
|
|
28
|
+
lastMoved: import("vue").Ref<"min" | "max", "min" | "max">;
|
|
28
29
|
trackStyle: import("vue").ComputedRef<{
|
|
29
30
|
background: string;
|
|
30
31
|
}>;
|
package/web-components/index.js
CHANGED
|
@@ -21716,6 +21716,13 @@ Expected function or array of functions, received type ${typeof value}.`
|
|
|
21716
21716
|
inputId: {
|
|
21717
21717
|
type: String,
|
|
21718
21718
|
required: false
|
|
21719
|
+
},
|
|
21720
|
+
/**
|
|
21721
|
+
* Whether the checkbox is disabled or not.
|
|
21722
|
+
*/
|
|
21723
|
+
disabled: {
|
|
21724
|
+
type: Boolean,
|
|
21725
|
+
"default": false
|
|
21719
21726
|
}
|
|
21720
21727
|
},
|
|
21721
21728
|
setup: function setup() {
|
|
@@ -21723,17 +21730,19 @@ Expected function or array of functions, received type ${typeof value}.`
|
|
|
21723
21730
|
var _useColours = useColours(),
|
|
21724
21731
|
primaryFade5 = _useColours.primaryFade5,
|
|
21725
21732
|
colorErrorTextFade5 = _useColours.colorErrorTextFade5;
|
|
21733
|
+
var checkboxBaseClass = 'w-6 h-6 cursor-pointer border-brand-text2 border rounded';
|
|
21726
21734
|
return {
|
|
21727
21735
|
uuid: uuid,
|
|
21728
21736
|
primaryFade5: primaryFade5,
|
|
21729
|
-
colorErrorTextFade5: colorErrorTextFade5
|
|
21737
|
+
colorErrorTextFade5: colorErrorTextFade5,
|
|
21738
|
+
checkboxBaseClass: checkboxBaseClass
|
|
21730
21739
|
};
|
|
21731
21740
|
}
|
|
21732
21741
|
});
|
|
21733
21742
|
var __injectCSSVars__$a = function __injectCSSVars__() {
|
|
21734
21743
|
useCssVars(function (_ctx) {
|
|
21735
21744
|
return {
|
|
21736
|
-
"
|
|
21745
|
+
"v242a63d2": _ctx.primaryFade5
|
|
21737
21746
|
};
|
|
21738
21747
|
});
|
|
21739
21748
|
};
|
|
@@ -21750,8 +21759,8 @@ Expected function or array of functions, received type ${typeof value}.`
|
|
|
21750
21759
|
"class": "flex flex-col"
|
|
21751
21760
|
};
|
|
21752
21761
|
var _hoisted_3$q = ["for"];
|
|
21753
|
-
var _hoisted_4$f = ["id", "value", "name"];
|
|
21754
|
-
var _hoisted_5$e = ["id", "value", "name", "checked"];
|
|
21762
|
+
var _hoisted_4$f = ["id", "value", "name", "disabled"];
|
|
21763
|
+
var _hoisted_5$e = ["id", "value", "name", "disabled", "checked"];
|
|
21755
21764
|
var _hoisted_6$c = ["innerHTML"];
|
|
21756
21765
|
var _hoisted_7$9 = {
|
|
21757
21766
|
key: 0,
|
|
@@ -21788,7 +21797,8 @@ Expected function or array of functions, received type ${typeof value}.`
|
|
|
21788
21797
|
value: _ctx.value ? _ctx.value : _ctx.name,
|
|
21789
21798
|
name: _ctx.disableNamePrefix ? _ctx.name : "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
|
|
21790
21799
|
type: "checkbox",
|
|
21791
|
-
|
|
21800
|
+
disabled: _ctx.disabled,
|
|
21801
|
+
"class": [_ctx.checkboxBaseClass, _ctx.disabled ? 'bg-grey-60' : 'bg-white']
|
|
21792
21802
|
}), null, 16, _hoisted_4$f)) : (openBlock(), createElementBlock("input", mergeProps({
|
|
21793
21803
|
key: 1
|
|
21794
21804
|
}, field, {
|
|
@@ -21796,8 +21806,9 @@ Expected function or array of functions, received type ${typeof value}.`
|
|
|
21796
21806
|
value: _ctx.value ? _ctx.value : _ctx.name,
|
|
21797
21807
|
name: _ctx.disableNamePrefix ? _ctx.name : "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
|
|
21798
21808
|
type: "checkbox",
|
|
21809
|
+
disabled: _ctx.disabled,
|
|
21799
21810
|
checked: _ctx.isChecked,
|
|
21800
|
-
"class":
|
|
21811
|
+
"class": [_ctx.checkboxBaseClass, _ctx.disabled ? 'bg-grey-60' : 'bg-white']
|
|
21801
21812
|
}), null, 16, _hoisted_5$e)), _ctx.label ? (openBlock(), createElementBlock("span", {
|
|
21802
21813
|
key: 2,
|
|
21803
21814
|
"class": "ml-2 text-p text-body",
|
|
@@ -21816,12 +21827,12 @@ Expected function or array of functions, received type ${typeof value}.`
|
|
|
21816
21827
|
}, 8, ["name", "value", "rules"])]);
|
|
21817
21828
|
}
|
|
21818
21829
|
|
|
21819
|
-
var css_248z$m = ".fwFadeIn-enter-active[data-v-
|
|
21820
|
-
var stylesheet$m = ".fwFadeIn-enter-active[data-v-
|
|
21830
|
+
var css_248z$m = ".fwFadeIn-enter-active[data-v-2ee5b97b],.fwFadeIn-leave-active[data-v-2ee5b97b]{-webkit-transition:opacity .35s ease;-moz-transition:opacity .35s ease;transition:opacity .35s ease}.fwFadeIn-enter-from[data-v-2ee5b97b],.fwFadeIn-leave-to[data-v-2ee5b97b]{opacity:0}.fwFadeIn-enter-to[data-v-2ee5b97b],.fwFadeIn-leave-from[data-v-2ee5b97b]{opacity:1}.fw-checkbox input[data-v-2ee5b97b]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;-moz-transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,-webkit-box-shadow .14s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-2ee5b97b]:hover{background-color:var(--v242a63d2);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity));background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%235F6489'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:rgb(222 224 227/var(--tw-border-opacity))}.fw-checkbox input[data-v-2ee5b97b]:disabled:not(:checked){background-image:none}";
|
|
21831
|
+
var stylesheet$m = ".fwFadeIn-enter-active[data-v-2ee5b97b],.fwFadeIn-leave-active[data-v-2ee5b97b]{-webkit-transition:opacity .35s ease;-moz-transition:opacity .35s ease;transition:opacity .35s ease}.fwFadeIn-enter-from[data-v-2ee5b97b],.fwFadeIn-leave-to[data-v-2ee5b97b]{opacity:0}.fwFadeIn-enter-to[data-v-2ee5b97b],.fwFadeIn-leave-from[data-v-2ee5b97b]{opacity:1}.fw-checkbox input[data-v-2ee5b97b]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;-moz-transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,-webkit-box-shadow .14s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-2ee5b97b]:hover{background-color:var(--v242a63d2);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}.fw-checkbox input[data-v-2ee5b97b]:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity));background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%235F6489'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:rgb(222 224 227/var(--tw-border-opacity))}.fw-checkbox input[data-v-2ee5b97b]:disabled:not(:checked){background-image:none}";
|
|
21821
21832
|
styleInject(css_248z$m);
|
|
21822
21833
|
|
|
21823
21834
|
__default__$e.render = render$t;
|
|
21824
|
-
__default__$e.__scopeId = "data-v-
|
|
21835
|
+
__default__$e.__scopeId = "data-v-2ee5b97b";
|
|
21825
21836
|
|
|
21826
21837
|
var stateMap = new WeakMap();
|
|
21827
21838
|
function getState(el) {
|
|
@@ -37003,6 +37014,7 @@ Expected function or array of functions, received type ${typeof value}.`
|
|
|
37003
37014
|
// Internal thumbs
|
|
37004
37015
|
var minLocal = ref((_props$minValue = props.minValue) !== null && _props$minValue !== void 0 ? _props$minValue : props.min);
|
|
37005
37016
|
var maxLocal = ref((_props$maxValue = props.maxValue) !== null && _props$maxValue !== void 0 ? _props$maxValue : props.max);
|
|
37017
|
+
var lastMoved = ref('max');
|
|
37006
37018
|
// --- Sync from props -> local (when parent updates) ---
|
|
37007
37019
|
watch(function () {
|
|
37008
37020
|
return props.minValue;
|
|
@@ -37023,6 +37035,7 @@ Expected function or array of functions, received type ${typeof value}.`
|
|
|
37023
37035
|
// --- Clamp + emit local -> parent (when user drags) ---
|
|
37024
37036
|
watch(minLocal, function (v, old) {
|
|
37025
37037
|
var _props$minValue2;
|
|
37038
|
+
if (v !== old) lastMoved.value = 'min';
|
|
37026
37039
|
var clamped = clamp(v, props.min, maxLocal.value);
|
|
37027
37040
|
if (clamped !== v) minLocal.value = clamped;
|
|
37028
37041
|
if (clamped !== ((_props$minValue2 = props.minValue) !== null && _props$minValue2 !== void 0 ? _props$minValue2 : props.min) && clamped !== old) {
|
|
@@ -37031,6 +37044,7 @@ Expected function or array of functions, received type ${typeof value}.`
|
|
|
37031
37044
|
});
|
|
37032
37045
|
watch(maxLocal, function (v, old) {
|
|
37033
37046
|
var _props$maxValue2;
|
|
37047
|
+
if (v !== old) lastMoved.value = 'max';
|
|
37034
37048
|
var clamped = clamp(v, minLocal.value, props.max);
|
|
37035
37049
|
if (clamped !== v) maxLocal.value = clamped;
|
|
37036
37050
|
if (clamped !== ((_props$maxValue2 = props.maxValue) !== null && _props$maxValue2 !== void 0 ? _props$maxValue2 : props.max) && clamped !== old) {
|
|
@@ -37060,6 +37074,7 @@ Expected function or array of functions, received type ${typeof value}.`
|
|
|
37060
37074
|
minPercentage: minPercentage,
|
|
37061
37075
|
maxPercentage: maxPercentage,
|
|
37062
37076
|
clippingPoint: clippingPoint,
|
|
37077
|
+
lastMoved: lastMoved,
|
|
37063
37078
|
trackStyle: trackStyle
|
|
37064
37079
|
};
|
|
37065
37080
|
}
|
|
@@ -37096,7 +37111,7 @@ Expected function or array of functions, received type ${typeof value}.`
|
|
|
37096
37111
|
return _ctx.minLocal = $event;
|
|
37097
37112
|
}),
|
|
37098
37113
|
style: normalizeStyle({
|
|
37099
|
-
zIndex: _ctx.clippingPoint ?
|
|
37114
|
+
zIndex: !_ctx.clippingPoint && _ctx.lastMoved === 'min' ? 30 : 20
|
|
37100
37115
|
})
|
|
37101
37116
|
}, null, 12, _hoisted_2$1), [[vModelText, _ctx.minLocal, void 0, {
|
|
37102
37117
|
number: true
|
|
@@ -37112,7 +37127,7 @@ Expected function or array of functions, received type ${typeof value}.`
|
|
|
37112
37127
|
return _ctx.maxLocal = $event;
|
|
37113
37128
|
}),
|
|
37114
37129
|
style: normalizeStyle({
|
|
37115
|
-
zIndex: _ctx.clippingPoint ? 30 : 20
|
|
37130
|
+
zIndex: _ctx.clippingPoint || _ctx.lastMoved === 'max' ? 30 : 20
|
|
37116
37131
|
})
|
|
37117
37132
|
}, null, 12, _hoisted_3), [[vModelText, _ctx.maxLocal, void 0, {
|
|
37118
37133
|
number: true
|