@frollo/frollo-web-ui 9.0.1 → 9.0.2

package/esm/fw-slider.js

@@ -1,7 +1,9 @@
-import { a as _slicedToArray } from './_rollupPluginBabelHelpers-DODWUb5N.js';
-import { defineComponent, computed, watch, createElementBlock, openBlock, createElementVNode, withDirectives, normalizeStyle, toDisplayString, vModelText } from 'vue';
+import { defineComponent, ref, watch, computed, createElementBlock, openBlock, createElementVNode, withDirectives, normalizeStyle, toDisplayString, vModelText } from 'vue';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
+var clamp = function clamp(v, lo, hi) {
+  return Math.min(Math.max(v, lo), hi);
+};
 var script = defineComponent({
   name: 'FwSlider',
   emits: ['update:minValue', 'update:maxValue'],
@@ -27,72 +29,75 @@ var script = defineComponent({
       "default": null
     }
   },
-  setup: function setup(props, ctx) {
-    var minimumValue = computed({
-      get: function get() {
-        var _props$minValue;
-        return (_props$minValue = props.minValue) !== null && _props$minValue !== void 0 ? _props$minValue : props.min;
-      },
-      set: function set(state) {
-        return ctx.emit('update:minValue', state);
-      }
-    });
-    var maximumValue = computed({
-      get: function get() {
-        var _props$maxValue;
-        return (_props$maxValue = props.maxValue) !== null && _props$maxValue !== void 0 ? _props$maxValue : props.max;
-      },
-      set: function set(state) {
-        return ctx.emit('update:maxValue', state);
-      }
-    });
-    // stop the thumbs from pushing each other around
-    watch([function () {
+  setup: function setup(props, _ref) {
+    var _props$minValue, _props$maxValue;
+    var emit = _ref.emit;
+    // Internal thumbs
+    var minLocal = ref((_props$minValue = props.minValue) !== null && _props$minValue !== void 0 ? _props$minValue : props.min);
+    var maxLocal = ref((_props$maxValue = props.maxValue) !== null && _props$maxValue !== void 0 ? _props$maxValue : props.max);
+    // --- Sync from props -> local (when parent updates) ---
+    watch(function () {
       return props.minValue;
-    }, function () {
+    }, function (v) {
+      if (v == null) return;
+      minLocal.value = clamp(+v, props.min, maxLocal.value);
+    }, {
+      immediate: true
+    });
+    watch(function () {
       return props.maxValue;
-    }], function (_ref, _ref2) {
-      var _ref3 = _slicedToArray(_ref, 2),
-        newMin = _ref3[0],
-        newMax = _ref3[1];
-      var _ref4 = _slicedToArray(_ref2, 2),
-        oldMin = _ref4[0],
-        oldMax = _ref4[1];
-      if (newMin !== oldMin) {
-        if (newMin != null) {
-          minimumValue.value = Math.min(Math.max(Number(newMin), props.min), maximumValue.value);
-        }
-        return;
-      }
-      if (newMax !== oldMax) {
-        if (newMax != null) {
-          maximumValue.value = Math.max(Math.min(Number(newMax), props.max), minimumValue.value);
-        }
-      }
+    }, function (v) {
+      if (v == null) return;
+      maxLocal.value = clamp(+v, minLocal.value, props.max);
     }, {
       immediate: true
     });
+    // --- Clamp + emit local -> parent (when user drags) ---
+    watch(minLocal, function (v, old) {
+      var _props$minValue2;
+      var clamped = clamp(v, props.min, maxLocal.value);
+      if (clamped !== v) minLocal.value = clamped;
+      if (clamped !== ((_props$minValue2 = props.minValue) !== null && _props$minValue2 !== void 0 ? _props$minValue2 : props.min) && clamped !== old) {
+        emit('update:minValue', clamped);
+      }
+    });
+    watch(maxLocal, function (v, old) {
+      var _props$maxValue2;
+      var clamped = clamp(v, minLocal.value, props.max);
+      if (clamped !== v) maxLocal.value = clamped;
+      if (clamped !== ((_props$maxValue2 = props.maxValue) !== null && _props$maxValue2 !== void 0 ? _props$maxValue2 : props.max) && clamped !== old) {
+        emit('update:maxValue', clamped);
+      }
+    });
+    var range = computed(function () {
+      return props.max - props.min || 1;
+    });
     var minPercentage = computed(function () {
-      return (minimumValue.value - props.min) / (props.max - props.min) * 100;
+      return (minLocal.value - props.min) / range.value * 100;
     });
     var maxPercentage = computed(function () {
-      return (maximumValue.value - props.min) / (props.max - props.min) * 100;
+      return (maxLocal.value - props.min) / range.value * 100;
     });
     var clippingPoint = computed(function () {
       return maxPercentage.value - minPercentage.value >= 3;
     });
+    var trackStyle = computed(function () {
+      return {
+        background: "linear-gradient(to right,\n        var(--track, #ffffff) 0%,\n        var(--track, #ffffff) ".concat(minPercentage.value, "%,\n        var(--fill) ").concat(minPercentage.value, "%,\n        var(--fill) ").concat(maxPercentage.value, "%,\n        var(--track, #ffffff) ").concat(maxPercentage.value, "%,\n        var(--track, #ffffff) 100%)")
+      };
+    });
     return {
-      minimumValue: minimumValue,
-      maximumValue: maximumValue,
+      minLocal: minLocal,
+      maxLocal: maxLocal,
       minPercentage: minPercentage,
       maxPercentage: maxPercentage,
-      clippingPoint: clippingPoint
+      clippingPoint: clippingPoint,
+      trackStyle: trackStyle
     };
   }
 });
 
 var _hoisted_1 = {
-  ref: "slider",
   "class": "relative py-3"
 };
 var _hoisted_2 = ["min", "max", "step"];
@@ -103,31 +108,29 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     style: normalizeStyle({
       left: "".concat(_ctx.minPercentage, "%")
     })
-  }, toDisplayString(_ctx.minimumValue) + "% ", 5), createElementVNode("p", {
+  }, toDisplayString(_ctx.minLocal) + "% ", 5), createElementVNode("p", {
     "class": "absolute -top-6 -translate-x-1/2 text-base text-[var(--colorButtonPrimary)] font-semibold",
     style: normalizeStyle({
       left: "".concat(_ctx.maxPercentage, "%")
     })
-  }, toDisplayString(_ctx.maximumValue) + "% ", 5), createElementVNode("div", {
+  }, toDisplayString(_ctx.maxLocal) + "% ", 5), createElementVNode("div", {
     "class": "h-1.5 rounded-full bg-white shadow-card [--fill:var(--colorButtonPrimary)]",
-    style: normalizeStyle({
-      background: "linear-gradient(to right,\n          var(--track, #ffffff) 0%,\n          var(--track, #ffffff) ".concat(_ctx.minPercentage, "%,\n          var(--fill) ").concat(_ctx.minPercentage, "%,\n          var(--fill) ").concat(_ctx.maxPercentage, "%,\n          var(--track, #ffffff) ").concat(_ctx.maxPercentage, "%,\n          var(--track, #ffffff) 100%)")
-    })
+    style: normalizeStyle(_ctx.trackStyle)
   }, null, 4), withDirectives(createElementVNode("input", {
     "class": "fw-slider absolute inset-0 w-full appearance-none bg-transparent pointer-events-none focus:outline-none",
     type: "range",
     name: "min",
     id: "min",
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
-      return _ctx.minimumValue = $event;
-    }),
     min: _ctx.min,
     max: _ctx.max,
     step: _ctx.step,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.minLocal = $event;
+    }),
     style: normalizeStyle({
       zIndex: _ctx.clippingPoint ? 20 : 30
     })
-  }, null, 12, _hoisted_2), [[vModelText, _ctx.minimumValue, void 0, {
+  }, null, 12, _hoisted_2), [[vModelText, _ctx.minLocal, void 0, {
     number: true
   }]]), withDirectives(createElementVNode("input", {
     "class": "fw-slider absolute inset-0 w-full appearance-none bg-transparent pointer-events-none focus:outline-none",
@@ -136,16 +139,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     id: "max",
     min: _ctx.min,
     max: _ctx.max,
+    step: _ctx.step,
     "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
-      return _ctx.maximumValue = $event;
+      return _ctx.maxLocal = $event;
     }),
-    step: _ctx.step,
     style: normalizeStyle({
       zIndex: _ctx.clippingPoint ? 30 : 20
     })
-  }, null, 12, _hoisted_3), [[vModelText, _ctx.maximumValue, void 0, {
+  }, null, 12, _hoisted_3), [[vModelText, _ctx.maxLocal, void 0, {
     number: true
-  }]])], 512);
+  }]])]);
 }
 
 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}";

package/esm/fw-switch.js

@@ -1,6 +1,5 @@
-import { defineComponent, ref, pushScopeId, popScopeId, createElementVNode, resolveComponent, createElementBlock, openBlock, createVNode, withCtx, createCommentVNode, normalizeClass, mergeProps, Transition, toDisplayString } from 'vue';
-import { a as Field } from './vee-validate.esm-3ptvCDR1.js';
-import { u as uniqueId } from './uniqueId-DZdGzBh8.js';
+import { defineComponent, ref, watch, computed, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, createElementBlock, createCommentVNode, mergeProps, normalizeClass, createVNode, Transition, toDisplayString } from 'vue';
+import { a as Field } from './vee-validate-0dtT5GSQ.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var script = defineComponent({
@@ -43,6 +42,11 @@ var script = defineComponent({
       type: Boolean,
       "default": true
     },
+    /** v-model If provided, it is the source of truth. */
+    modelValue: {
+      type: Boolean,
+      required: false
+    },
     /**
      * Progmatically set the checked state of the input.
      * Used outside a FwForm element
@@ -53,57 +57,72 @@ var script = defineComponent({
       "default": false
     }
   },
-  emits: ['change'],
+  emits: ['change', 'update:modelValue', 'update:isChecked'],
   setup: function setup(props, ctx) {
-    var isSwitched = ref(props.isChecked);
-    var uuid = uniqueId();
-    var toggleSwitch = function toggleSwitch() {
-      isSwitched.value = !isSwitched.value;
-      ctx.emit('change', isSwitched.value);
+    var _props$modelValue;
+    var localChecked = ref((_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : props.isChecked);
+    watch(function () {
+      return props.modelValue;
+    }, function (val) {
+      if (val && val !== localChecked.value) {
+        localChecked.value = val;
+      }
+    });
+    watch(function () {
+      return props.isChecked;
+    }, function (val) {
+      if (props.modelValue && val !== localChecked.value) {
+        localChecked.value = val;
+      }
+    });
+    var checked = computed(function () {
+      return localChecked.value;
+    });
+    var resolvedValue = computed(function () {
+      var _props$value;
+      return (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : props.name;
+    });
+    var inputId = "fw-switch-".concat(props.name, "-").concat(Math.random().toString(36).slice(2));
+    var onNativeChange = function onNativeChange(e) {
+      var next = e.target.checked;
+      localChecked.value = next;
+      // always emit change
+      ctx.emit('change', next);
+      // if using v-model, update it
+      ctx.emit('update:modelValue', next);
+      // keep legacy API in sync too
+      ctx.emit('update:isChecked', next);
     };
     return {
-      isSwitched: isSwitched,
-      toggleSwitch: toggleSwitch,
-      uuid: uuid
+      checked: checked,
+      onNativeChange: onNativeChange,
+      inputId: inputId,
+      resolvedValue: resolvedValue
     };
   }
 });
 
-var _withScopeId = function _withScopeId(n) {
-  return pushScopeId("data-v-0adb13d4"), n = n(), popScopeId(), n;
-};
 var _hoisted_1 = {
-  "class": "flex flex-col"
+  "class": "flex flex-col w-fit"
 };
-var _hoisted_2 = /*#__PURE__*/_withScopeId(function () {
-  return /*#__PURE__*/createElementVNode("div", {
-    "class": "size-4 rounded-[50%] bg-white"
-  }, null, -1);
-});
-var _hoisted_3 = [_hoisted_2];
-var _hoisted_4 = ["for"];
-var _hoisted_5 = ["id", "value", "name", "checked"];
-var _hoisted_6 = {
+var _hoisted_2 = ["for"];
+var _hoisted_3 = ["name", "id", "aria-label", "aria-invalid", "checked", "value"];
+var _hoisted_4 = {
   key: 0,
   "class": "italic text-sm font-medium min-h-[21px]"
 };
-var _hoisted_7 = {
+var _hoisted_5 = {
   key: 0,
   "class": "text-brand-error-text"
 };
-var _hoisted_8 = {
+var _hoisted_6 = {
   key: 1
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = resolveComponent("InputField");
-  return openBlock(), createElementBlock("button", {
-    "class": "fw-switch rounded-full ring-primary ring-offset-1 focus:outline-0 focus:ring-none focus-visible:outline-0 focus-visible:ring-2",
-    onClick: _cache[0] || (_cache[0] = function ($event) {
-      return _ctx.toggleSwitch();
-    })
-  }, [createVNode(_component_InputField, {
+  return openBlock(), createBlock(_component_InputField, {
     name: _ctx.name,
-    value: _ctx.value ? _ctx.value : _ctx.name,
+    value: _ctx.resolvedValue,
     type: "checkbox",
     rules: _ctx.rules
   }, {
@@ -112,36 +131,44 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         errors = _ref.errors,
         errorMessage = _ref.errorMessage,
         meta = _ref.meta;
-      return [createElementVNode("div", _hoisted_1, [createElementVNode("div", {
-        "class": normalizeClass(["w-[40px] h-[24px] rounded-[20px] flex items-center py-1 box-border transition-all ease-out duration-300 hover:brightness-95", _ctx.isSwitched ? 'bg-brand-success-new justify-end pl-5 pr-1' : 'bg-brand-text2 pl-1 pr-5'])
-      }, _hoisted_3, 2), createElementVNode("label", {
-        "for": "fw-switch-".concat(_ctx.name, "-").concat(_ctx.uuid),
-        "class": "hidden"
+      return [createElementVNode("div", _hoisted_1, [createElementVNode("label", {
+        "for": _ctx.inputId,
+        "class": "fw-switch !ring-0 hover:brightness-90"
       }, [createElementVNode("input", mergeProps(field, {
-        id: "fw-switch-".concat(_ctx.name, "-").concat(_ctx.uuid),
-        value: _ctx.value ? _ctx.value : _ctx.name,
-        name: "fw-switch-".concat(_ctx.name, "-").concat(_ctx.uuid),
+        name: _ctx.inputId,
+        id: _ctx.inputId,
+        "class": "sr-only",
+        "aria-label": "Checkbox for ".concat(_ctx.inputId),
+        "aria-invalid": !!((errorMessage || errors[0]) && meta.touched),
         type: "checkbox",
-        checked: _ctx.isSwitched
-      }), null, 16, _hoisted_5)], 8, _hoisted_4), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(Transition, {
+        checked: _ctx.checked,
+        value: _ctx.resolvedValue,
+        onChange: _cache[0] || (_cache[0] = function () {
+          return _ctx.onNativeChange && _ctx.onNativeChange.apply(_ctx, arguments);
+        })
+      }), null, 16, _hoisted_3), createElementVNode("span", {
+        "class": normalizeClass(["track w-[40px] h-[24px] rounded-[20px] relative transition-colors duration-200 ease-out !ring-0 outline-none", _ctx.checked ? 'bg-brand-success-new' : 'bg-brand-text2'])
+      }, [createElementVNode("span", {
+        "class": normalizeClass(["thumb size-4 rounded-full bg-white absolute top-1 left-1 transition-transform duration-200 ease-out will-change-transform", _ctx.checked ? 'translate-x-4' : 'translate-x-0'])
+      }, null, 2)], 2)], 8, _hoisted_2), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
         "default": withCtx(function () {
-          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
+          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
         }),
         _: 2
       }, 1024)])) : createCommentVNode("", true)])];
     }),
     _: 1
-  }, 8, ["name", "value", "rules"])]);
+  }, 8, ["name", "value", "rules"]);
 }
 
-var css_248z = ".fwFadeIn-enter-active[data-v-0adb13d4]{-webkit-animation:fwFadeIn-0adb13d4 .35s;-moz-animation:fwFadeIn-0adb13d4 .35s;animation:fwFadeIn-0adb13d4 .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-0adb13d4]{animation:fwFadeIn-0adb13d4 .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-0adb13d4{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn-0adb13d4{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-0adb13d4{0%{opacity:0}to{opacity:1}}";
-var stylesheet = ".fwFadeIn-enter-active[data-v-0adb13d4]{-webkit-animation:fwFadeIn-0adb13d4 .35s;-moz-animation:fwFadeIn-0adb13d4 .35s;animation:fwFadeIn-0adb13d4 .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-0adb13d4]{animation:fwFadeIn-0adb13d4 .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-0adb13d4{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn-0adb13d4{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-0adb13d4{0%{opacity:0}to{opacity:1}}";
+var css_248z = ".fw-switch[data-v-472a39bf]{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;border-radius:9999px;cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex}.fwFadeIn-enter-active[data-v-472a39bf]{-webkit-animation:fwFadeIn-472a39bf .35s;-moz-animation:fwFadeIn-472a39bf .35s;animation:fwFadeIn-472a39bf .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-472a39bf]{animation:fwFadeIn-472a39bf .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-472a39bf{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn-472a39bf{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-472a39bf{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.thumb[data-v-472a39bf],.track[data-v-472a39bf]{-webkit-animation-duration:0ms!important;-moz-animation-duration:0ms!important;animation-duration:0ms!important;-webkit-transition-duration:0ms!important;-moz-transition-duration:0ms!important;transition-duration:0ms!important}}";
+var stylesheet = ".fw-switch[data-v-472a39bf]{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;border-radius:9999px;cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex}.fwFadeIn-enter-active[data-v-472a39bf]{-webkit-animation:fwFadeIn-472a39bf .35s;-moz-animation:fwFadeIn-472a39bf .35s;animation:fwFadeIn-472a39bf .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-472a39bf]{animation:fwFadeIn-472a39bf .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-472a39bf{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn-472a39bf{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-472a39bf{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.thumb[data-v-472a39bf],.track[data-v-472a39bf]{-webkit-animation-duration:0ms!important;-moz-animation-duration:0ms!important;animation-duration:0ms!important;-webkit-transition-duration:0ms!important;-moz-transition-duration:0ms!important;transition-duration:0ms!important}}";
 styleInject(css_248z);
 
 script.render = render;
-script.__scopeId = "data-v-0adb13d4";
+script.__scopeId = "data-v-472a39bf";
 
 export { script as FwSwitch };