@frollo/frollo-web-ui 8.4.5 → 8.5.1

package/esm/fw-slider.js

@@ -0,0 +1,157 @@
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-DpC_oIQV.js';
+import { defineComponent, computed, watch, openBlock, createElementBlock, createElementVNode, normalizeStyle, toDisplayString, withDirectives, vModelText } 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 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 () {
+      return props.minValue;
+    }, 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);
+        }
+      }
+    }, {
+      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;
+    });
+    return {
+      minimumValue: minimumValue,
+      maximumValue: maximumValue,
+      minPercentage: minPercentage,
+      maxPercentage: maxPercentage,
+      clippingPoint: clippingPoint
+    };
+  }
+});
+
+var _hoisted_1 = {
+  ref: "slider",
+  "class": "relative py-3"
+};
+var _hoisted_2 = ["min", "max", "step"];
+var _hoisted_3 = ["min", "max", "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-[var(--colorButtonPrimary)] font-semibold",
+    style: normalizeStyle({
+      left: "".concat(_ctx.minPercentage, "%")
+    })
+  }, toDisplayString(_ctx.minimumValue) + "% ", 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", {
+    "class": "h-1.5 rounded-full bg-grey-base-light [--fill:var(--colorButtonPrimary)]",
+    style: normalizeStyle({
+      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%)")
+    })
+  }, 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,
+    style: normalizeStyle({
+      zIndex: _ctx.clippingPoint ? 20 : 30
+    })
+  }, null, 12, _hoisted_2), [[vModelText, _ctx.minimumValue, 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",
+    type: "range",
+    name: "max",
+    id: "max",
+    min: _ctx.min,
+    max: _ctx.max,
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.maximumValue = $event;
+    }),
+    step: _ctx.step,
+    style: normalizeStyle({
+      zIndex: _ctx.clippingPoint ? 30 : 20
+    })
+  }, null, 12, _hoisted_3), [[vModelText, _ctx.maximumValue, 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}";
+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}";
+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 };