@frollo/frollo-web-ui 8.4.5 → 8.5.0

package/esm/fw-slider.js

@@ -0,0 +1,181 @@
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-DpC_oIQV.js';
+import { defineComponent, computed, ref, watch, openBlock, createElementBlock, createElementVNode, normalizeStyle, toDisplayString, normalizeClass } from 'vue';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var script = defineComponent({
+  name: 'FwSlider',
+  emits: ['update:minValue', 'update:maxValue'],
+  props: {
+    min: {
+      type: Number,
+      "default": -100
+    },
+    max: {
+      type: Number,
+      "default": 100
+    },
+    step: {
+      type: Number,
+      "default": 0.01
+    },
+    minValue: {
+      type: Number,
+      "default": null
+    },
+    maxValue: {
+      type: Number,
+      "default": null
+    }
+  },
+  setup: function setup(props, ctx) {
+    var _props$minValue, _props$maxValue;
+    var minBound = computed(function () {
+      return props.min != null ? Number(props.min) : 0;
+    });
+    var maxBound = computed(function () {
+      return props.max != null ? Number(props.max) : 100;
+    });
+    var minimumValue = ref((_props$minValue = props.minValue) !== null && _props$minValue !== void 0 ? _props$minValue : props.min);
+    var maximumValue = ref((_props$maxValue = props.maxValue) !== null && _props$maxValue !== void 0 ? _props$maxValue : props.max);
+    watch(function () {
+      return [props.minValue, props.maxValue];
+    }, function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        newMin = _ref2[0],
+        newMax = _ref2[1];
+      if (newMin != null) {
+        minimumValue.value = Math.min(Math.max(Number(newMin), props.min), maximumValue.value);
+      }
+      if (newMax != null) {
+        maximumValue.value = Math.max(Math.min(Number(newMax), props.max), minimumValue.value);
+      }
+    }, {
+      immediate: true
+    });
+    watch(function () {
+      return [props.min, props.max];
+    }, function () {
+      minimumValue.value = Math.min(Math.max(minimumValue.value, props.min), maximumValue.value);
+      maximumValue.value = Math.max(Math.min(maximumValue.value, props.max), minimumValue.value);
+    });
+    var clampLow = function clampLow(value) {
+      return Math.min(Math.max(value, minBound.value), maximumValue.value);
+    };
+    var clampHigh = function clampHigh(value) {
+      return Math.max(Math.min(value, maxBound.value), minimumValue.value);
+    };
+    watch([minBound, maxBound], function () {
+      var low = clampLow(minimumValue.value);
+      var high = clampHigh(maximumValue.value);
+      if (low !== minimumValue.value) {
+        minimumValue.value = low;
+        ctx.emit('update:minValue', low);
+      }
+      if (high !== maximumValue.value) {
+        maximumValue.value = high;
+        ctx.emit('update:maxValue', high);
+      }
+    }, {
+      immediate: true
+    });
+    var minPercentage = computed(function () {
+      return (minimumValue.value - props.min) / (props.max - props.min) * 100;
+    });
+    var maxPercentage = computed(function () {
+      return (maximumValue.value - props.min) / (props.max - props.min) * 100;
+    });
+    var clippingPoint = computed(function () {
+      return maxPercentage.value - minPercentage.value >= 3;
+    });
+    var onChangeMinInput = function onChangeMinInput(event) {
+      var minInput = event.target;
+      var value = minInput.valueAsNumber;
+      var maxInput = maximumValue.value;
+      var clamped = Math.min(Math.max(value, props.min), maxInput);
+      minimumValue.value = clamped;
+      minInput.value = String(clamped);
+      ctx.emit('update:minValue', clamped);
+    };
+    var onChangeMaxInput = function onChangeMaxInput(event) {
+      var maxInput = event.target;
+      var value = maxInput.valueAsNumber;
+      var minInput = minimumValue.value;
+      var clamped = Math.max(Math.min(value, props.max), minInput);
+      maximumValue.value = clamped;
+      maxInput.value = String(clamped);
+      ctx.emit('update:maxValue', clamped);
+    };
+    return {
+      minimumValue: minimumValue,
+      maximumValue: maximumValue,
+      minPercentage: minPercentage,
+      maxPercentage: maxPercentage,
+      clippingPoint: clippingPoint,
+      onChangeMinInput: onChangeMinInput,
+      onChangeMaxInput: onChangeMaxInput
+    };
+  }
+});
+
+var _hoisted_1 = {
+  ref: "slider",
+  "class": "relative py-3"
+};
+var _hoisted_2 = ["min", "max", "value", "step"];
+var _hoisted_3 = ["min", "max", "value", "step"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("p", {
+    "class": "absolute -top-6 -translate-x-1/2 text-base text-primary font-semibold",
+    style: normalizeStyle({
+      left: "".concat(_ctx.minPercentage, "%")
+    })
+  }, toDisplayString(_ctx.minimumValue) + "% ", 5), createElementVNode("p", {
+    "class": normalizeClass(["absolute -top-6 -translate-x-1/2 text-base text-primary font-semibold", [_ctx.maxPercentage - _ctx.minPercentage < 6 ? '-top-10' : '']]),
+    style: normalizeStyle({
+      left: "".concat(_ctx.maxPercentage, "%")
+    })
+  }, toDisplayString(_ctx.maximumValue) + "% ", 7), createElementVNode("div", {
+    "class": "h-1.5 rounded-full bg-grey-base-light",
+    style: normalizeStyle({
+      background: "linear-gradient(to right,\n          var(--track, #e5e7eb) 0%,\n          var(--track, #e5e7eb) ".concat(_ctx.minPercentage, "%,\n          var(--fill, #6923FF) ").concat(_ctx.minPercentage, "%,\n          var(--fill, #6923FF) ").concat(_ctx.maxPercentage, "%,\n          var(--track, #e5e7eb) ").concat(_ctx.maxPercentage, "%,\n          var(--track, #e5e7eb) 100%)")
+    })
+  }, null, 4), 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",
+    min: _ctx.min,
+    max: _ctx.max,
+    value: _ctx.minimumValue,
+    step: _ctx.step,
+    onInput: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.onChangeMinInput($event);
+    }),
+    style: normalizeStyle({
+      zIndex: _ctx.clippingPoint ? 20 : 30
+    })
+  }, null, 44, _hoisted_2), createElementVNode("input", {
+    "class": "fw-slider absolute inset-0 w-full appearance-none bg-transparent pointer-events-none focus:outline-none",
+    type: "range",
+    name: "max",
+    id: "max",
+    min: _ctx.min,
+    max: _ctx.max,
+    value: _ctx.maximumValue,
+    step: _ctx.step,
+    onInput: _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.onChangeMaxInput($event);
+    }),
+    style: normalizeStyle({
+      zIndex: _ctx.clippingPoint ? 30 : 20
+    })
+  }, null, 44, _hoisted_3)], 512);
+}
+
+var css_248z = ".fw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#6923ff;border:2px solid #6923ff;border-radius:9999px;-webkit-box-shadow:var(--tw-shadow);box-shadow:var(--tw-shadow);cursor:pointer;height:18px;pointer-events:auto;width:18px}.fw-slider::-moz-range-thumb{background:#6923ff;border:2px solid #6923ff;border-radius:9999px;box-shadow:var(--tw-shadow);cursor:pointer;height:18px;pointer-events:auto;width:18px}";
+var stylesheet = ".fw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#6923ff;border:2px solid #6923ff;border-radius:9999px;-webkit-box-shadow:var(--tw-shadow);box-shadow:var(--tw-shadow);cursor:pointer;height:18px;pointer-events:auto;width:18px}.fw-slider::-moz-range-thumb{background:#6923ff;border:2px solid #6923ff;border-radius:9999px;box-shadow:var(--tw-shadow);cursor:pointer;height:18px;pointer-events:auto;width:18px}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as FwSlider };

package/esm/index.js

@@ -6,7 +6,7 @@ import './fw-dropdown.js';
 import './fw-card.js';
 import './fw-button.js';
 import { FwNavigationMenu as script$e } from './fw-navigation-menu.js';
-import { FwTab as script$j, FwTabs as script$m } from './fw-tabs.js';
+import { FwTab as script$k, FwTabs as script$n } from './fw-tabs.js';
 import { FwModal as script$d } from './fw-modal.js';
 import { FwProgressBar as script$g } from './fw-progress-bar.js';
 import './fw-tag.js';
@@ -14,8 +14,8 @@ import './fw-table.js';
 import { FwAccordion as __default__ } from './fw-accordion.js';
 import './fw-image.js';
 import { FwLoadingCard as script$9, FwLoadingTable as script$b } from './fw-loading.js';
-import { FwToast as script$n } from './fw-toast.js';
-import { FwTransactionsCard as script$o } from './fw-transactions-card.js';
+import { FwToast as script$o } from './fw-toast.js';
+import { FwTransactionsCard as script$p } from './fw-transactions-card.js';
 import { FwBarChart as script } from './fw-bar-chart.js';
 import { FwSidebarMenu as script$i } from './fw-sidebar-menu.js';
 import { FwDrawer as script$4 } from './fw-drawer.js';
@@ -24,6 +24,7 @@ import { FwDatePicker as __default__$1 } from './fw-date-picker.js';
 import { FwPopover as __default__$3 } from './fw-popover.js';
 import { FwPeriodSelector as script$f } from './fw-period-selector.js';
 import { FwMediaPicker as script$c } from './fw-media-picker.js';
+import { FwSlider as script$j } from './fw-slider.js';
 import { FwEmailPulse as __default__$2, FwSuccessPulse as __default__$4 } from './fw-animations.js';
 import { F as Form } from './vee-validate.esm-3ptvCDR1.js';
 import { s as script$7 } from './fw-input-XeI-IKly.js';
@@ -31,7 +32,7 @@ import { s as script$5 } from './fw-dropdown-ClttctHK.js';
 import { s as script$2 } from './fw-card-bsYbpPmW.js';
 import { s as script$1 } from './fw-button-BhZXMN8a.js';
 import { _ as __default__$6 } from './fw-tag-DgsnsY7O.js';
-import { _ as __default__$5, s as script$k, a as script$l } from './fw-table-row-BlpxQ10C.js';
+import { _ as __default__$5, s as script$l, a as script$m } from './fw-table-row-BlpxQ10C.js';
 import { s as script$6 } from './fw-image-6o3ZOSCW.js';
 import { s as script$8 } from './fw-loading-bar-DThRjdw1.js';
 import { s as script$a } from './fw-loading-spinner-CFFbujSq.js';
@@ -71,15 +72,16 @@ var components = /*#__PURE__*/Object.freeze({
   FwProgressBar: script$g,
   FwProviderList: script$h,
   FwSidebarMenu: script$i,
+  FwSlider: script$j,
   FwSuccessPulse: __default__$4,
-  FwTab: script$j,
+  FwTab: script$k,
   FwTable: __default__$5,
-  FwTableHead: script$k,
-  FwTableRow: script$l,
-  FwTabs: script$m,
+  FwTableHead: script$l,
+  FwTableRow: script$m,
+  FwTabs: script$n,
   FwTag: __default__$6,
-  FwToast: script$n,
-  FwTransactionsCard: script$o
+  FwToast: script$o,
+  FwTransactionsCard: script$p
 });
 
 var modalService = function modalService(options) {
@@ -113,7 +115,7 @@ var toastService = function toastService() {
     }));
     createApp({
       render: function render() {
-        return h(script$n, props);
+        return h(script$o, props);
       }
     }).mount(elementToMount);
   };
@@ -142,4 +144,4 @@ var install = function install(app) {
   });
 };
 
-export { __default__ as FwAccordion, script as FwBarChart, script$1 as FwButton, script$2 as FwCard, script$3 as FwCheckbox, __default__$1 as FwDatePicker, script$4 as FwDrawer, script$5 as FwDropdown, __default__$2 as FwEmailPulse, Form as FwForm, script$6 as FwImage, script$7 as FwInput, script$8 as FwLoadingBar, script$9 as FwLoadingCard, script$a as FwLoadingSpinner, script$b as FwLoadingTable, script$c as FwMediaPicker, script$d as FwModal, script$e as FwNavigationMenu, script$f as FwPeriodSelector, __default__$3 as FwPopover, script$g as FwProgressBar, script$h as FwProviderList, script$i as FwSidebarMenu, __default__$4 as FwSuccessPulse, script$j as FwTab, __default__$5 as FwTable, script$k as FwTableHead, script$l as FwTableRow, script$m as FwTabs, __default__$6 as FwTag, script$n as FwToast, script$o as FwTransactionsCard, install as default, modalService, toastService };
+export { __default__ as FwAccordion, script as FwBarChart, script$1 as FwButton, script$2 as FwCard, script$3 as FwCheckbox, __default__$1 as FwDatePicker, script$4 as FwDrawer, script$5 as FwDropdown, __default__$2 as FwEmailPulse, Form as FwForm, script$6 as FwImage, script$7 as FwInput, script$8 as FwLoadingBar, script$9 as FwLoadingCard, script$a as FwLoadingSpinner, script$b as FwLoadingTable, script$c as FwMediaPicker, script$d as FwModal, script$e as FwNavigationMenu, script$f as FwPeriodSelector, __default__$3 as FwPopover, script$g as FwProgressBar, script$h as FwProviderList, script$i as FwSidebarMenu, script$j as FwSlider, __default__$4 as FwSuccessPulse, script$k as FwTab, __default__$5 as FwTable, script$l as FwTableHead, script$m as FwTableRow, script$n as FwTabs, __default__$6 as FwTag, script$o as FwToast, script$p as FwTransactionsCard, install as default, modalService, toastService };