@frollo/frollo-web-ui 8.5.0 → 8.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.js +58 -82
- package/esm/fw-slider.js +59 -83
- package/frollo-web-ui.esm.js +59 -83
- package/index.d.ts +2 -4
- package/package.json +1 -1
- package/types/components/fw-slider/fw-slider.vue.d.ts +2 -4
- package/web-components/index.js +61 -85
package/cjs/index.js
CHANGED
|
@@ -37412,52 +37412,46 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
37412
37412
|
}
|
|
37413
37413
|
},
|
|
37414
37414
|
setup: function setup(props, ctx) {
|
|
37415
|
-
var
|
|
37416
|
-
|
|
37417
|
-
|
|
37418
|
-
|
|
37419
|
-
|
|
37420
|
-
|
|
37421
|
-
|
|
37422
|
-
var minimumValue = vue.ref((_props$minValue = props.minValue) !== null && _props$minValue !== void 0 ? _props$minValue : props.min);
|
|
37423
|
-
var maximumValue = vue.ref((_props$maxValue = props.maxValue) !== null && _props$maxValue !== void 0 ? _props$maxValue : props.max);
|
|
37424
|
-
vue.watch(function () {
|
|
37425
|
-
return [props.minValue, props.maxValue];
|
|
37426
|
-
}, function (_ref) {
|
|
37427
|
-
var _ref2 = _slicedToArray(_ref, 2),
|
|
37428
|
-
newMin = _ref2[0],
|
|
37429
|
-
newMax = _ref2[1];
|
|
37430
|
-
if (newMin != null) {
|
|
37431
|
-
minimumValue.value = Math.min(Math.max(Number(newMin), props.min), maximumValue.value);
|
|
37415
|
+
var minimumValue = vue.computed({
|
|
37416
|
+
get: function get() {
|
|
37417
|
+
var _props$minValue;
|
|
37418
|
+
return (_props$minValue = props.minValue) !== null && _props$minValue !== void 0 ? _props$minValue : props.min;
|
|
37419
|
+
},
|
|
37420
|
+
set: function set(state) {
|
|
37421
|
+
return ctx.emit('update:minValue', state);
|
|
37432
37422
|
}
|
|
37433
|
-
|
|
37434
|
-
|
|
37423
|
+
});
|
|
37424
|
+
var maximumValue = vue.computed({
|
|
37425
|
+
get: function get() {
|
|
37426
|
+
var _props$maxValue;
|
|
37427
|
+
return (_props$maxValue = props.maxValue) !== null && _props$maxValue !== void 0 ? _props$maxValue : props.max;
|
|
37428
|
+
},
|
|
37429
|
+
set: function set(state) {
|
|
37430
|
+
return ctx.emit('update:maxValue', state);
|
|
37435
37431
|
}
|
|
37436
|
-
}, {
|
|
37437
|
-
immediate: true
|
|
37438
37432
|
});
|
|
37439
|
-
|
|
37440
|
-
|
|
37433
|
+
// stop the thumbs from pushing each other around
|
|
37434
|
+
vue.watch([function () {
|
|
37435
|
+
return props.minValue;
|
|
37441
37436
|
}, function () {
|
|
37442
|
-
|
|
37443
|
-
|
|
37444
|
-
|
|
37445
|
-
|
|
37446
|
-
|
|
37447
|
-
|
|
37448
|
-
|
|
37449
|
-
|
|
37450
|
-
|
|
37451
|
-
|
|
37452
|
-
|
|
37453
|
-
|
|
37454
|
-
|
|
37455
|
-
minimumValue.value = low;
|
|
37456
|
-
ctx.emit('update:minValue', low);
|
|
37437
|
+
return props.maxValue;
|
|
37438
|
+
}], function (_ref, _ref2) {
|
|
37439
|
+
var _ref3 = _slicedToArray(_ref, 2),
|
|
37440
|
+
newMin = _ref3[0],
|
|
37441
|
+
newMax = _ref3[1];
|
|
37442
|
+
var _ref4 = _slicedToArray(_ref2, 2),
|
|
37443
|
+
oldMin = _ref4[0],
|
|
37444
|
+
oldMax = _ref4[1];
|
|
37445
|
+
if (newMin !== oldMin) {
|
|
37446
|
+
if (newMin != null) {
|
|
37447
|
+
minimumValue.value = Math.min(Math.max(Number(newMin), props.min), maximumValue.value);
|
|
37448
|
+
}
|
|
37449
|
+
return;
|
|
37457
37450
|
}
|
|
37458
|
-
if (
|
|
37459
|
-
|
|
37460
|
-
|
|
37451
|
+
if (newMax !== oldMax) {
|
|
37452
|
+
if (newMax != null) {
|
|
37453
|
+
maximumValue.value = Math.max(Math.min(Number(newMax), props.max), minimumValue.value);
|
|
37454
|
+
}
|
|
37461
37455
|
}
|
|
37462
37456
|
}, {
|
|
37463
37457
|
immediate: true
|
|
@@ -37471,89 +37465,71 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
37471
37465
|
var clippingPoint = vue.computed(function () {
|
|
37472
37466
|
return maxPercentage.value - minPercentage.value >= 3;
|
|
37473
37467
|
});
|
|
37474
|
-
var onChangeMinInput = function onChangeMinInput(event) {
|
|
37475
|
-
var minInput = event.target;
|
|
37476
|
-
var value = minInput.valueAsNumber;
|
|
37477
|
-
var maxInput = maximumValue.value;
|
|
37478
|
-
var clamped = Math.min(Math.max(value, props.min), maxInput);
|
|
37479
|
-
minimumValue.value = clamped;
|
|
37480
|
-
minInput.value = String(clamped);
|
|
37481
|
-
ctx.emit('update:minValue', clamped);
|
|
37482
|
-
};
|
|
37483
|
-
var onChangeMaxInput = function onChangeMaxInput(event) {
|
|
37484
|
-
var maxInput = event.target;
|
|
37485
|
-
var value = maxInput.valueAsNumber;
|
|
37486
|
-
var minInput = minimumValue.value;
|
|
37487
|
-
var clamped = Math.max(Math.min(value, props.max), minInput);
|
|
37488
|
-
maximumValue.value = clamped;
|
|
37489
|
-
maxInput.value = String(clamped);
|
|
37490
|
-
ctx.emit('update:maxValue', clamped);
|
|
37491
|
-
};
|
|
37492
37468
|
return {
|
|
37493
37469
|
minimumValue: minimumValue,
|
|
37494
37470
|
maximumValue: maximumValue,
|
|
37495
37471
|
minPercentage: minPercentage,
|
|
37496
37472
|
maxPercentage: maxPercentage,
|
|
37497
|
-
clippingPoint: clippingPoint
|
|
37498
|
-
onChangeMinInput: onChangeMinInput,
|
|
37499
|
-
onChangeMaxInput: onChangeMaxInput
|
|
37473
|
+
clippingPoint: clippingPoint
|
|
37500
37474
|
};
|
|
37501
37475
|
}
|
|
37502
37476
|
});var _hoisted_1$2 = {
|
|
37503
37477
|
ref: "slider",
|
|
37504
37478
|
"class": "relative py-3"
|
|
37505
37479
|
};
|
|
37506
|
-
var _hoisted_2$2 = ["min", "max", "
|
|
37507
|
-
var _hoisted_3$1 = ["min", "max", "
|
|
37480
|
+
var _hoisted_2$2 = ["min", "max", "step"];
|
|
37481
|
+
var _hoisted_3$1 = ["min", "max", "step"];
|
|
37508
37482
|
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|
37509
37483
|
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [vue.createElementVNode("p", {
|
|
37510
|
-
"class": "absolute -top-6 -translate-x-1/2 text-base text-
|
|
37484
|
+
"class": "absolute -top-6 -translate-x-1/2 text-base text-[var(--colorButtonPrimary)] font-semibold",
|
|
37511
37485
|
style: vue.normalizeStyle({
|
|
37512
37486
|
left: "".concat(_ctx.minPercentage, "%")
|
|
37513
37487
|
})
|
|
37514
37488
|
}, vue.toDisplayString(_ctx.minimumValue) + "% ", 5), vue.createElementVNode("p", {
|
|
37515
|
-
"class":
|
|
37489
|
+
"class": "absolute -top-6 -translate-x-1/2 text-base text-[var(--colorButtonPrimary)] font-semibold",
|
|
37516
37490
|
style: vue.normalizeStyle({
|
|
37517
37491
|
left: "".concat(_ctx.maxPercentage, "%")
|
|
37518
37492
|
})
|
|
37519
|
-
}, vue.toDisplayString(_ctx.maximumValue) + "% ",
|
|
37520
|
-
"class": "h-1.5 rounded-full bg-grey-base-light",
|
|
37493
|
+
}, vue.toDisplayString(_ctx.maximumValue) + "% ", 5), vue.createElementVNode("div", {
|
|
37494
|
+
"class": "h-1.5 rounded-full bg-grey-base-light [--fill:var(--colorButtonPrimary)]",
|
|
37521
37495
|
style: vue.normalizeStyle({
|
|
37522
|
-
background: "linear-gradient(to right,\n var(--track, #e5e7eb) 0%,\n var(--track, #e5e7eb) ".concat(_ctx.minPercentage, "%,\n var(--fill
|
|
37496
|
+
background: "linear-gradient(to right,\n var(--track, #e5e7eb) 0%,\n var(--track, #e5e7eb) ".concat(_ctx.minPercentage, "%,\n var(--fill) ").concat(_ctx.minPercentage, "%,\n var(--fill) ").concat(_ctx.maxPercentage, "%,\n var(--track, #e5e7eb) ").concat(_ctx.maxPercentage, "%,\n var(--track, #e5e7eb) 100%)")
|
|
37523
37497
|
})
|
|
37524
|
-
}, null, 4), vue.createElementVNode("input", {
|
|
37498
|
+
}, null, 4), vue.withDirectives(vue.createElementVNode("input", {
|
|
37525
37499
|
"class": "fw-slider absolute inset-0 w-full appearance-none bg-transparent pointer-events-none focus:outline-none",
|
|
37526
37500
|
type: "range",
|
|
37527
37501
|
name: "min",
|
|
37528
37502
|
id: "min",
|
|
37503
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
|
|
37504
|
+
return _ctx.minimumValue = $event;
|
|
37505
|
+
}),
|
|
37529
37506
|
min: _ctx.min,
|
|
37530
37507
|
max: _ctx.max,
|
|
37531
|
-
value: _ctx.minimumValue,
|
|
37532
37508
|
step: _ctx.step,
|
|
37533
|
-
onInput: _cache[0] || (_cache[0] = function ($event) {
|
|
37534
|
-
return _ctx.onChangeMinInput($event);
|
|
37535
|
-
}),
|
|
37536
37509
|
style: vue.normalizeStyle({
|
|
37537
37510
|
zIndex: _ctx.clippingPoint ? 20 : 30
|
|
37538
37511
|
})
|
|
37539
|
-
}, null,
|
|
37512
|
+
}, null, 12, _hoisted_2$2), [[vue.vModelText, _ctx.minimumValue, void 0, {
|
|
37513
|
+
number: true
|
|
37514
|
+
}]]), vue.withDirectives(vue.createElementVNode("input", {
|
|
37540
37515
|
"class": "fw-slider absolute inset-0 w-full appearance-none bg-transparent pointer-events-none focus:outline-none",
|
|
37541
37516
|
type: "range",
|
|
37542
37517
|
name: "max",
|
|
37543
37518
|
id: "max",
|
|
37544
37519
|
min: _ctx.min,
|
|
37545
37520
|
max: _ctx.max,
|
|
37546
|
-
|
|
37547
|
-
|
|
37548
|
-
onInput: _cache[1] || (_cache[1] = function ($event) {
|
|
37549
|
-
return _ctx.onChangeMaxInput($event);
|
|
37521
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
37522
|
+
return _ctx.maximumValue = $event;
|
|
37550
37523
|
}),
|
|
37524
|
+
step: _ctx.step,
|
|
37551
37525
|
style: vue.normalizeStyle({
|
|
37552
37526
|
zIndex: _ctx.clippingPoint ? 30 : 20
|
|
37553
37527
|
})
|
|
37554
|
-
}, null,
|
|
37555
|
-
|
|
37556
|
-
|
|
37528
|
+
}, null, 12, _hoisted_3$1), [[vue.vModelText, _ctx.maximumValue, void 0, {
|
|
37529
|
+
number: true
|
|
37530
|
+
}]])], 512);
|
|
37531
|
+
}var css_248z$2 = ".fw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--colorButtonPrimary);border:2px solid var(--colorButtonPrimary);border-radius:9999px;-webkit-box-shadow:var(--tw-shadow);box-shadow:var(--tw-shadow);cursor:pointer;height:1.5rem;pointer-events:auto;width:1.5rem}.fw-slider::-moz-range-thumb{background:var(--colorButtonPrimary);border:2px solid var(--colorButtonPrimary);border-radius:9999px;box-shadow:var(--tw-shadow);cursor:pointer;height:1.5rem;pointer-events:auto;width:1.5rem}";
|
|
37532
|
+
var stylesheet$2 = ".fw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--colorButtonPrimary);border:2px solid var(--colorButtonPrimary);border-radius:9999px;-webkit-box-shadow:var(--tw-shadow);box-shadow:var(--tw-shadow);cursor:pointer;height:1.5rem;pointer-events:auto;width:1.5rem}.fw-slider::-moz-range-thumb{background:var(--colorButtonPrimary);border:2px solid var(--colorButtonPrimary);border-radius:9999px;box-shadow:var(--tw-shadow);cursor:pointer;height:1.5rem;pointer-events:auto;width:1.5rem}";
|
|
37557
37533
|
styleInject(css_248z$2);script.render = render$2;var __default__$1 = vue.defineComponent({
|
|
37558
37534
|
name: 'FwEmailPulse',
|
|
37559
37535
|
props: {
|
package/esm/fw-slider.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { a as _slicedToArray } from './_rollupPluginBabelHelpers-DpC_oIQV.js';
|
|
2
|
-
import { defineComponent, computed,
|
|
2
|
+
import { defineComponent, computed, watch, openBlock, createElementBlock, createElementVNode, normalizeStyle, toDisplayString, withDirectives, vModelText } from 'vue';
|
|
3
3
|
import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
|
|
4
4
|
|
|
5
5
|
var script = defineComponent({
|
|
@@ -28,52 +28,46 @@ var script = defineComponent({
|
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
30
|
setup: function setup(props, ctx) {
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
var minimumValue = ref((_props$minValue = props.minValue) !== null && _props$minValue !== void 0 ? _props$minValue : props.min);
|
|
39
|
-
var maximumValue = ref((_props$maxValue = props.maxValue) !== null && _props$maxValue !== void 0 ? _props$maxValue : props.max);
|
|
40
|
-
watch(function () {
|
|
41
|
-
return [props.minValue, props.maxValue];
|
|
42
|
-
}, function (_ref) {
|
|
43
|
-
var _ref2 = _slicedToArray(_ref, 2),
|
|
44
|
-
newMin = _ref2[0],
|
|
45
|
-
newMax = _ref2[1];
|
|
46
|
-
if (newMin != null) {
|
|
47
|
-
minimumValue.value = Math.min(Math.max(Number(newMin), props.min), maximumValue.value);
|
|
31
|
+
var minimumValue = computed({
|
|
32
|
+
get: function get() {
|
|
33
|
+
var _props$minValue;
|
|
34
|
+
return (_props$minValue = props.minValue) !== null && _props$minValue !== void 0 ? _props$minValue : props.min;
|
|
35
|
+
},
|
|
36
|
+
set: function set(state) {
|
|
37
|
+
return ctx.emit('update:minValue', state);
|
|
48
38
|
}
|
|
49
|
-
|
|
50
|
-
|
|
39
|
+
});
|
|
40
|
+
var maximumValue = computed({
|
|
41
|
+
get: function get() {
|
|
42
|
+
var _props$maxValue;
|
|
43
|
+
return (_props$maxValue = props.maxValue) !== null && _props$maxValue !== void 0 ? _props$maxValue : props.max;
|
|
44
|
+
},
|
|
45
|
+
set: function set(state) {
|
|
46
|
+
return ctx.emit('update:maxValue', state);
|
|
51
47
|
}
|
|
52
|
-
}, {
|
|
53
|
-
immediate: true
|
|
54
48
|
});
|
|
55
|
-
|
|
56
|
-
|
|
49
|
+
// stop the thumbs from pushing each other around
|
|
50
|
+
watch([function () {
|
|
51
|
+
return props.minValue;
|
|
57
52
|
}, function () {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
minimumValue.value = low;
|
|
72
|
-
ctx.emit('update:minValue', low);
|
|
53
|
+
return props.maxValue;
|
|
54
|
+
}], function (_ref, _ref2) {
|
|
55
|
+
var _ref3 = _slicedToArray(_ref, 2),
|
|
56
|
+
newMin = _ref3[0],
|
|
57
|
+
newMax = _ref3[1];
|
|
58
|
+
var _ref4 = _slicedToArray(_ref2, 2),
|
|
59
|
+
oldMin = _ref4[0],
|
|
60
|
+
oldMax = _ref4[1];
|
|
61
|
+
if (newMin !== oldMin) {
|
|
62
|
+
if (newMin != null) {
|
|
63
|
+
minimumValue.value = Math.min(Math.max(Number(newMin), props.min), maximumValue.value);
|
|
64
|
+
}
|
|
65
|
+
return;
|
|
73
66
|
}
|
|
74
|
-
if (
|
|
75
|
-
|
|
76
|
-
|
|
67
|
+
if (newMax !== oldMax) {
|
|
68
|
+
if (newMax != null) {
|
|
69
|
+
maximumValue.value = Math.max(Math.min(Number(newMax), props.max), minimumValue.value);
|
|
70
|
+
}
|
|
77
71
|
}
|
|
78
72
|
}, {
|
|
79
73
|
immediate: true
|
|
@@ -87,32 +81,12 @@ var script = defineComponent({
|
|
|
87
81
|
var clippingPoint = computed(function () {
|
|
88
82
|
return maxPercentage.value - minPercentage.value >= 3;
|
|
89
83
|
});
|
|
90
|
-
var onChangeMinInput = function onChangeMinInput(event) {
|
|
91
|
-
var minInput = event.target;
|
|
92
|
-
var value = minInput.valueAsNumber;
|
|
93
|
-
var maxInput = maximumValue.value;
|
|
94
|
-
var clamped = Math.min(Math.max(value, props.min), maxInput);
|
|
95
|
-
minimumValue.value = clamped;
|
|
96
|
-
minInput.value = String(clamped);
|
|
97
|
-
ctx.emit('update:minValue', clamped);
|
|
98
|
-
};
|
|
99
|
-
var onChangeMaxInput = function onChangeMaxInput(event) {
|
|
100
|
-
var maxInput = event.target;
|
|
101
|
-
var value = maxInput.valueAsNumber;
|
|
102
|
-
var minInput = minimumValue.value;
|
|
103
|
-
var clamped = Math.max(Math.min(value, props.max), minInput);
|
|
104
|
-
maximumValue.value = clamped;
|
|
105
|
-
maxInput.value = String(clamped);
|
|
106
|
-
ctx.emit('update:maxValue', clamped);
|
|
107
|
-
};
|
|
108
84
|
return {
|
|
109
85
|
minimumValue: minimumValue,
|
|
110
86
|
maximumValue: maximumValue,
|
|
111
87
|
minPercentage: minPercentage,
|
|
112
88
|
maxPercentage: maxPercentage,
|
|
113
|
-
clippingPoint: clippingPoint
|
|
114
|
-
onChangeMinInput: onChangeMinInput,
|
|
115
|
-
onChangeMaxInput: onChangeMaxInput
|
|
89
|
+
clippingPoint: clippingPoint
|
|
116
90
|
};
|
|
117
91
|
}
|
|
118
92
|
});
|
|
@@ -121,59 +95,61 @@ var _hoisted_1 = {
|
|
|
121
95
|
ref: "slider",
|
|
122
96
|
"class": "relative py-3"
|
|
123
97
|
};
|
|
124
|
-
var _hoisted_2 = ["min", "max", "
|
|
125
|
-
var _hoisted_3 = ["min", "max", "
|
|
98
|
+
var _hoisted_2 = ["min", "max", "step"];
|
|
99
|
+
var _hoisted_3 = ["min", "max", "step"];
|
|
126
100
|
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
127
101
|
return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("p", {
|
|
128
|
-
"class": "absolute -top-6 -translate-x-1/2 text-base text-
|
|
102
|
+
"class": "absolute -top-6 -translate-x-1/2 text-base text-[var(--colorButtonPrimary)] font-semibold",
|
|
129
103
|
style: normalizeStyle({
|
|
130
104
|
left: "".concat(_ctx.minPercentage, "%")
|
|
131
105
|
})
|
|
132
106
|
}, toDisplayString(_ctx.minimumValue) + "% ", 5), createElementVNode("p", {
|
|
133
|
-
"class":
|
|
107
|
+
"class": "absolute -top-6 -translate-x-1/2 text-base text-[var(--colorButtonPrimary)] font-semibold",
|
|
134
108
|
style: normalizeStyle({
|
|
135
109
|
left: "".concat(_ctx.maxPercentage, "%")
|
|
136
110
|
})
|
|
137
|
-
}, toDisplayString(_ctx.maximumValue) + "% ",
|
|
138
|
-
"class": "h-1.5 rounded-full bg-grey-base-light",
|
|
111
|
+
}, toDisplayString(_ctx.maximumValue) + "% ", 5), createElementVNode("div", {
|
|
112
|
+
"class": "h-1.5 rounded-full bg-grey-base-light [--fill:var(--colorButtonPrimary)]",
|
|
139
113
|
style: normalizeStyle({
|
|
140
|
-
background: "linear-gradient(to right,\n var(--track, #e5e7eb) 0%,\n var(--track, #e5e7eb) ".concat(_ctx.minPercentage, "%,\n var(--fill
|
|
114
|
+
background: "linear-gradient(to right,\n var(--track, #e5e7eb) 0%,\n var(--track, #e5e7eb) ".concat(_ctx.minPercentage, "%,\n var(--fill) ").concat(_ctx.minPercentage, "%,\n var(--fill) ").concat(_ctx.maxPercentage, "%,\n var(--track, #e5e7eb) ").concat(_ctx.maxPercentage, "%,\n var(--track, #e5e7eb) 100%)")
|
|
141
115
|
})
|
|
142
|
-
}, null, 4), createElementVNode("input", {
|
|
116
|
+
}, null, 4), withDirectives(createElementVNode("input", {
|
|
143
117
|
"class": "fw-slider absolute inset-0 w-full appearance-none bg-transparent pointer-events-none focus:outline-none",
|
|
144
118
|
type: "range",
|
|
145
119
|
name: "min",
|
|
146
120
|
id: "min",
|
|
121
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
|
|
122
|
+
return _ctx.minimumValue = $event;
|
|
123
|
+
}),
|
|
147
124
|
min: _ctx.min,
|
|
148
125
|
max: _ctx.max,
|
|
149
|
-
value: _ctx.minimumValue,
|
|
150
126
|
step: _ctx.step,
|
|
151
|
-
onInput: _cache[0] || (_cache[0] = function ($event) {
|
|
152
|
-
return _ctx.onChangeMinInput($event);
|
|
153
|
-
}),
|
|
154
127
|
style: normalizeStyle({
|
|
155
128
|
zIndex: _ctx.clippingPoint ? 20 : 30
|
|
156
129
|
})
|
|
157
|
-
}, null,
|
|
130
|
+
}, null, 12, _hoisted_2), [[vModelText, _ctx.minimumValue, void 0, {
|
|
131
|
+
number: true
|
|
132
|
+
}]]), withDirectives(createElementVNode("input", {
|
|
158
133
|
"class": "fw-slider absolute inset-0 w-full appearance-none bg-transparent pointer-events-none focus:outline-none",
|
|
159
134
|
type: "range",
|
|
160
135
|
name: "max",
|
|
161
136
|
id: "max",
|
|
162
137
|
min: _ctx.min,
|
|
163
138
|
max: _ctx.max,
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
onInput: _cache[1] || (_cache[1] = function ($event) {
|
|
167
|
-
return _ctx.onChangeMaxInput($event);
|
|
139
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
140
|
+
return _ctx.maximumValue = $event;
|
|
168
141
|
}),
|
|
142
|
+
step: _ctx.step,
|
|
169
143
|
style: normalizeStyle({
|
|
170
144
|
zIndex: _ctx.clippingPoint ? 30 : 20
|
|
171
145
|
})
|
|
172
|
-
}, null,
|
|
146
|
+
}, null, 12, _hoisted_3), [[vModelText, _ctx.maximumValue, void 0, {
|
|
147
|
+
number: true
|
|
148
|
+
}]])], 512);
|
|
173
149
|
}
|
|
174
150
|
|
|
175
|
-
var css_248z = ".fw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background
|
|
176
|
-
var stylesheet = ".fw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background
|
|
151
|
+
var css_248z = ".fw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--colorButtonPrimary);border:2px solid var(--colorButtonPrimary);border-radius:9999px;-webkit-box-shadow:var(--tw-shadow);box-shadow:var(--tw-shadow);cursor:pointer;height:1.5rem;pointer-events:auto;width:1.5rem}.fw-slider::-moz-range-thumb{background:var(--colorButtonPrimary);border:2px solid var(--colorButtonPrimary);border-radius:9999px;box-shadow:var(--tw-shadow);cursor:pointer;height:1.5rem;pointer-events:auto;width:1.5rem}";
|
|
152
|
+
var stylesheet = ".fw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--colorButtonPrimary);border:2px solid var(--colorButtonPrimary);border-radius:9999px;-webkit-box-shadow:var(--tw-shadow);box-shadow:var(--tw-shadow);cursor:pointer;height:1.5rem;pointer-events:auto;width:1.5rem}.fw-slider::-moz-range-thumb{background:var(--colorButtonPrimary);border:2px solid var(--colorButtonPrimary);border-radius:9999px;box-shadow:var(--tw-shadow);cursor:pointer;height:1.5rem;pointer-events:auto;width:1.5rem}";
|
|
177
153
|
styleInject(css_248z);
|
|
178
154
|
|
|
179
155
|
script.render = render;
|
package/frollo-web-ui.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getCurrentInstance, inject, warn as warn$1, ref, watch, computed, toValue, nextTick, unref, isRef, reactive, onUnmounted, onMounted, provide, onBeforeUnmount, defineComponent, toRef, resolveDynamicComponent, h, shallowRef, readonly, watchEffect, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, renderSlot, mergeProps, Transition, pushScopeId, popScopeId, createStaticVNode, resolveDirective, withDirectives, withKeys, createBlock, Fragment, renderList, vShow, Teleport, normalizeStyle, useCssVars, TransitionGroup, version as version$1, isProxy, toRaw, toRefs, normalizeProps, toHandlers, withModifiers, guardReactiveProps, onUpdated, createApp } from 'vue';
|
|
1
|
+
import { getCurrentInstance, inject, warn as warn$1, ref, watch, computed, toValue, nextTick, unref, isRef, reactive, onUnmounted, onMounted, provide, onBeforeUnmount, defineComponent, toRef, resolveDynamicComponent, h, shallowRef, readonly, watchEffect, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, renderSlot, mergeProps, Transition, pushScopeId, popScopeId, createStaticVNode, resolveDirective, withDirectives, withKeys, createBlock, Fragment, renderList, vShow, Teleport, normalizeStyle, useCssVars, TransitionGroup, version as version$1, isProxy, toRaw, toRefs, normalizeProps, toHandlers, withModifiers, guardReactiveProps, onUpdated, vModelText, createApp } from 'vue';
|
|
2
2
|
|
|
3
3
|
function _OverloadYield(e, d) {
|
|
4
4
|
this.v = e, this.k = d;
|
|
@@ -37891,52 +37891,46 @@ var script = defineComponent({
|
|
|
37891
37891
|
}
|
|
37892
37892
|
},
|
|
37893
37893
|
setup: function setup(props, ctx) {
|
|
37894
|
-
var
|
|
37895
|
-
|
|
37896
|
-
|
|
37897
|
-
|
|
37898
|
-
|
|
37899
|
-
|
|
37900
|
-
|
|
37901
|
-
var minimumValue = ref((_props$minValue = props.minValue) !== null && _props$minValue !== void 0 ? _props$minValue : props.min);
|
|
37902
|
-
var maximumValue = ref((_props$maxValue = props.maxValue) !== null && _props$maxValue !== void 0 ? _props$maxValue : props.max);
|
|
37903
|
-
watch(function () {
|
|
37904
|
-
return [props.minValue, props.maxValue];
|
|
37905
|
-
}, function (_ref) {
|
|
37906
|
-
var _ref2 = _slicedToArray(_ref, 2),
|
|
37907
|
-
newMin = _ref2[0],
|
|
37908
|
-
newMax = _ref2[1];
|
|
37909
|
-
if (newMin != null) {
|
|
37910
|
-
minimumValue.value = Math.min(Math.max(Number(newMin), props.min), maximumValue.value);
|
|
37894
|
+
var minimumValue = computed({
|
|
37895
|
+
get: function get() {
|
|
37896
|
+
var _props$minValue;
|
|
37897
|
+
return (_props$minValue = props.minValue) !== null && _props$minValue !== void 0 ? _props$minValue : props.min;
|
|
37898
|
+
},
|
|
37899
|
+
set: function set(state) {
|
|
37900
|
+
return ctx.emit('update:minValue', state);
|
|
37911
37901
|
}
|
|
37912
|
-
|
|
37913
|
-
|
|
37902
|
+
});
|
|
37903
|
+
var maximumValue = computed({
|
|
37904
|
+
get: function get() {
|
|
37905
|
+
var _props$maxValue;
|
|
37906
|
+
return (_props$maxValue = props.maxValue) !== null && _props$maxValue !== void 0 ? _props$maxValue : props.max;
|
|
37907
|
+
},
|
|
37908
|
+
set: function set(state) {
|
|
37909
|
+
return ctx.emit('update:maxValue', state);
|
|
37914
37910
|
}
|
|
37915
|
-
}, {
|
|
37916
|
-
immediate: true
|
|
37917
37911
|
});
|
|
37918
|
-
|
|
37919
|
-
|
|
37912
|
+
// stop the thumbs from pushing each other around
|
|
37913
|
+
watch([function () {
|
|
37914
|
+
return props.minValue;
|
|
37920
37915
|
}, function () {
|
|
37921
|
-
|
|
37922
|
-
|
|
37923
|
-
|
|
37924
|
-
|
|
37925
|
-
|
|
37926
|
-
|
|
37927
|
-
|
|
37928
|
-
|
|
37929
|
-
|
|
37930
|
-
|
|
37931
|
-
|
|
37932
|
-
|
|
37933
|
-
|
|
37934
|
-
minimumValue.value = low;
|
|
37935
|
-
ctx.emit('update:minValue', low);
|
|
37916
|
+
return props.maxValue;
|
|
37917
|
+
}], function (_ref, _ref2) {
|
|
37918
|
+
var _ref3 = _slicedToArray(_ref, 2),
|
|
37919
|
+
newMin = _ref3[0],
|
|
37920
|
+
newMax = _ref3[1];
|
|
37921
|
+
var _ref4 = _slicedToArray(_ref2, 2),
|
|
37922
|
+
oldMin = _ref4[0],
|
|
37923
|
+
oldMax = _ref4[1];
|
|
37924
|
+
if (newMin !== oldMin) {
|
|
37925
|
+
if (newMin != null) {
|
|
37926
|
+
minimumValue.value = Math.min(Math.max(Number(newMin), props.min), maximumValue.value);
|
|
37927
|
+
}
|
|
37928
|
+
return;
|
|
37936
37929
|
}
|
|
37937
|
-
if (
|
|
37938
|
-
|
|
37939
|
-
|
|
37930
|
+
if (newMax !== oldMax) {
|
|
37931
|
+
if (newMax != null) {
|
|
37932
|
+
maximumValue.value = Math.max(Math.min(Number(newMax), props.max), minimumValue.value);
|
|
37933
|
+
}
|
|
37940
37934
|
}
|
|
37941
37935
|
}, {
|
|
37942
37936
|
immediate: true
|
|
@@ -37950,32 +37944,12 @@ var script = defineComponent({
|
|
|
37950
37944
|
var clippingPoint = computed(function () {
|
|
37951
37945
|
return maxPercentage.value - minPercentage.value >= 3;
|
|
37952
37946
|
});
|
|
37953
|
-
var onChangeMinInput = function onChangeMinInput(event) {
|
|
37954
|
-
var minInput = event.target;
|
|
37955
|
-
var value = minInput.valueAsNumber;
|
|
37956
|
-
var maxInput = maximumValue.value;
|
|
37957
|
-
var clamped = Math.min(Math.max(value, props.min), maxInput);
|
|
37958
|
-
minimumValue.value = clamped;
|
|
37959
|
-
minInput.value = String(clamped);
|
|
37960
|
-
ctx.emit('update:minValue', clamped);
|
|
37961
|
-
};
|
|
37962
|
-
var onChangeMaxInput = function onChangeMaxInput(event) {
|
|
37963
|
-
var maxInput = event.target;
|
|
37964
|
-
var value = maxInput.valueAsNumber;
|
|
37965
|
-
var minInput = minimumValue.value;
|
|
37966
|
-
var clamped = Math.max(Math.min(value, props.max), minInput);
|
|
37967
|
-
maximumValue.value = clamped;
|
|
37968
|
-
maxInput.value = String(clamped);
|
|
37969
|
-
ctx.emit('update:maxValue', clamped);
|
|
37970
|
-
};
|
|
37971
37947
|
return {
|
|
37972
37948
|
minimumValue: minimumValue,
|
|
37973
37949
|
maximumValue: maximumValue,
|
|
37974
37950
|
minPercentage: minPercentage,
|
|
37975
37951
|
maxPercentage: maxPercentage,
|
|
37976
|
-
clippingPoint: clippingPoint
|
|
37977
|
-
onChangeMinInput: onChangeMinInput,
|
|
37978
|
-
onChangeMaxInput: onChangeMaxInput
|
|
37952
|
+
clippingPoint: clippingPoint
|
|
37979
37953
|
};
|
|
37980
37954
|
}
|
|
37981
37955
|
});
|
|
@@ -37984,59 +37958,61 @@ var _hoisted_1$2 = {
|
|
|
37984
37958
|
ref: "slider",
|
|
37985
37959
|
"class": "relative py-3"
|
|
37986
37960
|
};
|
|
37987
|
-
var _hoisted_2$2 = ["min", "max", "
|
|
37988
|
-
var _hoisted_3$1 = ["min", "max", "
|
|
37961
|
+
var _hoisted_2$2 = ["min", "max", "step"];
|
|
37962
|
+
var _hoisted_3$1 = ["min", "max", "step"];
|
|
37989
37963
|
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|
37990
37964
|
return openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("p", {
|
|
37991
|
-
"class": "absolute -top-6 -translate-x-1/2 text-base text-
|
|
37965
|
+
"class": "absolute -top-6 -translate-x-1/2 text-base text-[var(--colorButtonPrimary)] font-semibold",
|
|
37992
37966
|
style: normalizeStyle({
|
|
37993
37967
|
left: "".concat(_ctx.minPercentage, "%")
|
|
37994
37968
|
})
|
|
37995
37969
|
}, toDisplayString(_ctx.minimumValue) + "% ", 5), createElementVNode("p", {
|
|
37996
|
-
"class":
|
|
37970
|
+
"class": "absolute -top-6 -translate-x-1/2 text-base text-[var(--colorButtonPrimary)] font-semibold",
|
|
37997
37971
|
style: normalizeStyle({
|
|
37998
37972
|
left: "".concat(_ctx.maxPercentage, "%")
|
|
37999
37973
|
})
|
|
38000
|
-
}, toDisplayString(_ctx.maximumValue) + "% ",
|
|
38001
|
-
"class": "h-1.5 rounded-full bg-grey-base-light",
|
|
37974
|
+
}, toDisplayString(_ctx.maximumValue) + "% ", 5), createElementVNode("div", {
|
|
37975
|
+
"class": "h-1.5 rounded-full bg-grey-base-light [--fill:var(--colorButtonPrimary)]",
|
|
38002
37976
|
style: normalizeStyle({
|
|
38003
|
-
background: "linear-gradient(to right,\n var(--track, #e5e7eb) 0%,\n var(--track, #e5e7eb) ".concat(_ctx.minPercentage, "%,\n var(--fill
|
|
37977
|
+
background: "linear-gradient(to right,\n var(--track, #e5e7eb) 0%,\n var(--track, #e5e7eb) ".concat(_ctx.minPercentage, "%,\n var(--fill) ").concat(_ctx.minPercentage, "%,\n var(--fill) ").concat(_ctx.maxPercentage, "%,\n var(--track, #e5e7eb) ").concat(_ctx.maxPercentage, "%,\n var(--track, #e5e7eb) 100%)")
|
|
38004
37978
|
})
|
|
38005
|
-
}, null, 4), createElementVNode("input", {
|
|
37979
|
+
}, null, 4), withDirectives(createElementVNode("input", {
|
|
38006
37980
|
"class": "fw-slider absolute inset-0 w-full appearance-none bg-transparent pointer-events-none focus:outline-none",
|
|
38007
37981
|
type: "range",
|
|
38008
37982
|
name: "min",
|
|
38009
37983
|
id: "min",
|
|
37984
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
|
|
37985
|
+
return _ctx.minimumValue = $event;
|
|
37986
|
+
}),
|
|
38010
37987
|
min: _ctx.min,
|
|
38011
37988
|
max: _ctx.max,
|
|
38012
|
-
value: _ctx.minimumValue,
|
|
38013
37989
|
step: _ctx.step,
|
|
38014
|
-
onInput: _cache[0] || (_cache[0] = function ($event) {
|
|
38015
|
-
return _ctx.onChangeMinInput($event);
|
|
38016
|
-
}),
|
|
38017
37990
|
style: normalizeStyle({
|
|
38018
37991
|
zIndex: _ctx.clippingPoint ? 20 : 30
|
|
38019
37992
|
})
|
|
38020
|
-
}, null,
|
|
37993
|
+
}, null, 12, _hoisted_2$2), [[vModelText, _ctx.minimumValue, void 0, {
|
|
37994
|
+
number: true
|
|
37995
|
+
}]]), withDirectives(createElementVNode("input", {
|
|
38021
37996
|
"class": "fw-slider absolute inset-0 w-full appearance-none bg-transparent pointer-events-none focus:outline-none",
|
|
38022
37997
|
type: "range",
|
|
38023
37998
|
name: "max",
|
|
38024
37999
|
id: "max",
|
|
38025
38000
|
min: _ctx.min,
|
|
38026
38001
|
max: _ctx.max,
|
|
38027
|
-
|
|
38028
|
-
|
|
38029
|
-
onInput: _cache[1] || (_cache[1] = function ($event) {
|
|
38030
|
-
return _ctx.onChangeMaxInput($event);
|
|
38002
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
38003
|
+
return _ctx.maximumValue = $event;
|
|
38031
38004
|
}),
|
|
38005
|
+
step: _ctx.step,
|
|
38032
38006
|
style: normalizeStyle({
|
|
38033
38007
|
zIndex: _ctx.clippingPoint ? 30 : 20
|
|
38034
38008
|
})
|
|
38035
|
-
}, null,
|
|
38009
|
+
}, null, 12, _hoisted_3$1), [[vModelText, _ctx.maximumValue, void 0, {
|
|
38010
|
+
number: true
|
|
38011
|
+
}]])], 512);
|
|
38036
38012
|
}
|
|
38037
38013
|
|
|
38038
|
-
var css_248z$2 = ".fw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background
|
|
38039
|
-
var stylesheet$2 = ".fw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background
|
|
38014
|
+
var css_248z$2 = ".fw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--colorButtonPrimary);border:2px solid var(--colorButtonPrimary);border-radius:9999px;-webkit-box-shadow:var(--tw-shadow);box-shadow:var(--tw-shadow);cursor:pointer;height:1.5rem;pointer-events:auto;width:1.5rem}.fw-slider::-moz-range-thumb{background:var(--colorButtonPrimary);border:2px solid var(--colorButtonPrimary);border-radius:9999px;box-shadow:var(--tw-shadow);cursor:pointer;height:1.5rem;pointer-events:auto;width:1.5rem}";
|
|
38015
|
+
var stylesheet$2 = ".fw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--colorButtonPrimary);border:2px solid var(--colorButtonPrimary);border-radius:9999px;-webkit-box-shadow:var(--tw-shadow);box-shadow:var(--tw-shadow);cursor:pointer;height:1.5rem;pointer-events:auto;width:1.5rem}.fw-slider::-moz-range-thumb{background:var(--colorButtonPrimary);border:2px solid var(--colorButtonPrimary);border-radius:9999px;box-shadow:var(--tw-shadow);cursor:pointer;height:1.5rem;pointer-events:auto;width:1.5rem}";
|
|
38040
38016
|
styleInject(css_248z$2);
|
|
38041
38017
|
|
|
38042
38018
|
script.render = render$2;
|