@wikicasa-dev/components 2.0.18 → 2.0.19

package/dist/BaseSlider.js

@@ -1,209 +1,208 @@
-import { defineComponent as q, ref as v, useTemplateRef as w, watch as D, useAttrs as G, onMounted as H, openBlock as J, createElementBlock as K, createElementVNode as p, withModifiers as T, unref as F, createVNode as k } from "vue";
-import E from "./BaseInput.js";
-import { _ as O } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
-import './assets/BaseSlider.css';const Q = { class: "range_container" }, W = { class: "sliders_control" }, X = ["value", "min", "max", "step"], Y = ["value", "min", "max", "step"], Z = { class: "form_control row" }, ee = { class: "pb-15 pb-sm-0 col-sm-6 col-xl-4" }, te = { class: "col-sm-6 col-xl-4" }, le = /* @__PURE__ */ q({
+import { defineComponent as R, mergeModels as j, useModel as D, ref as p, useTemplateRef as T, useAttrs as q, onMounted as G, openBlock as H, createElementBlock as J, createElementVNode as x, withModifiers as _, unref as h, createVNode as k } from "vue";
+import C from "./BaseInput.js";
+import { _ as K } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import './assets/BaseSlider.css';const O = { class: "range_container" }, Q = { class: "sliders_control" }, W = ["value", "min", "max", "step"], X = ["value", "min", "max", "step"], Y = { class: "form_control row" }, Z = { class: "pb-15 pb-sm-0 col-sm-6 col-xl-4" }, ee = { class: "col-sm-6 col-xl-4" }, le = /* @__PURE__ */ R({
   __name: "BaseSlider",
-  props: {
+  props: /* @__PURE__ */ j({
     type: { default: "linear" },
     min: { default: 0 },
     max: { default: 100 }
-  },
-  emits: ["minChanged", "maxChanged"],
-  setup(f, { emit: L }) {
-    function B(e, t) {
-      const l = parseInt(e.value, 10), a = parseInt(t.value, 10);
-      return [l, a];
+  }, {
+    minValue: { default: 0 },
+    minValueModifiers: {},
+    maxValue: { default: 0 },
+    maxValueModifiers: {}
+  }),
+  emits: ["update:minValue", "update:maxValue"],
+  setup(m) {
+    function M(e, l) {
+      const a = parseInt(e.value, 10), t = parseInt(l.value, 10);
+      return [a, t];
     }
-    const z = (e) => e.minPos + (Math.log(e.value) - e.minlval) / e.scale, A = (e) => Math.exp(
+    const E = (e) => e.minPos + (Math.log(e.value) - e.minlval) / e.scale, L = (e) => Math.exp(
       (e.position - e.minPos) * e.scale + e.minlval
     );
-    function x(e, t, l, a, i) {
-      const d = t.max - t.min, C = e - t.min, b = t.value - t.min;
-      i.style.background = `linear-gradient(
+    function V(e, l, a, t, v) {
+      const i = l.max - l.min, f = e - l.min, $ = l.value - l.min;
+      v.style.background = `linear-gradient(
       to right,
-      ${l} 0%,
-      ${l} ${C / d * 100}%,
-      ${a} ${C / d * 100}%,
-      ${a} ${b / d * 100}%,
-      ${l} ${b / d * 100}%,
-      ${l} 100%)`;
+      ${a} 0%,
+      ${a} ${f / i * 100}%,
+      ${t} ${f / i * 100}%,
+      ${t} ${$ / i * 100}%,
+      ${a} ${$ / i * 100}%,
+      ${a} 100%)`;
     }
-    function I(e, t) {
-      e <= 0 ? t.style.zIndex = "2" : t.style.zIndex = "0";
+    function y(e, l) {
+      e <= 0 ? l.style.zIndex = "2" : l.style.zIndex = "0";
     }
-    const V = L, n = v(0), o = v(100), s = v(0), u = v(0), m = v(10), c = v(40), h = v(0), P = v(0), y = v(0), g = w("fromSlider"), r = w("toSlider"), M = (e, t) => {
-      if (!g.value || !r.value) return;
-      t || (t = "0");
-      const l = parseInt(t, 10);
+    const r = D(m, "minValue"), o = D(m, "maxValue"), n = p(0), u = p(100), c = p(10), d = p(40), F = p(0), P = p(0), B = p(0), g = T("fromSlider"), s = T("toSlider"), S = (e, l) => {
+      if (!g.value || !s.value) return;
+      l || (l = "0");
+      const a = parseInt(l, 10);
       if (e == "min-input") {
-        if (l >= u.value) return;
-        s.value = l, N(r.value);
+        if (a >= o.value) return;
+        r.value = a, z(s.value, a, o.value);
         return;
       }
-      l < s.value || (u.value = l, U(r.value, r.value));
-    }, $ = (e) => {
-      if (f.type === "logarithmic")
+      a < r.value || (o.value = a, A(s.value, s.value, r.value, a));
+    }, I = (e) => {
+      if (m.type === "logarithmic")
         return e = e || 1, parseInt(
-          z({
+          E({
             value: e,
             minPos: n.value,
-            minlval: h.value,
-            scale: y.value
+            minlval: F.value,
+            scale: B.value
           }).toFixed(0),
           10
         );
-      if (f.type === "linear")
+      if (m.type === "linear")
         return e;
       throw new Error("The slider type has not been implemented");
-    }, S = (e) => {
-      if (f.type === "logarithmic")
+    }, b = (e) => {
+      if (m.type === "logarithmic")
         return e = e || 1, parseInt(
-          A({
+          L({
             position: e,
-            scale: y.value,
-            minlval: h.value,
+            scale: B.value,
+            minlval: F.value,
             minPos: n.value
           }).toFixed(0),
           10
         );
-      if (f.type === "linear")
+      if (m.type === "linear")
         return e;
       throw new Error("The slider type has not been implemented");
-    }, N = (e) => {
-      const t = $(s.value), l = $(u.value);
-      x(
+    }, z = (e, l, a) => {
+      const t = I(l), v = I(a);
+      V(
         t,
         {
           min: n.value,
-          max: o.value,
-          value: l
+          max: u.value,
+          value: v
         },
         "#B4C2F0",
         "#2B5DFF",
         e
       );
-      const a = t, i = u.value;
-      a > i ? m.value = i : m.value = a;
-    }, U = (e, t) => {
-      const l = $(s.value), a = $(u.value);
-      x(
-        l,
+      const i = t, f = o.value;
+      i > f ? c.value = f : c.value = i;
+    }, A = (e, l, a, t) => {
+      const v = I(a), i = I(t);
+      V(
+        v,
         {
           min: n.value,
-          max: o.value,
-          value: a
+          max: u.value,
+          value: i
         },
         "#B4C2F0",
         "#2B5DFF",
-        t
+        l
       );
-      const i = s.value, d = a;
-      I(u.value, e), i <= d ? c.value = d : c.value = i;
-    }, R = (e, t) => {
-      if (!t.value) return;
-      const [l, a] = B(e, t), i = S(l);
-      x(
-        l,
+      const f = r.value, $ = i;
+      y(o.value, e), f <= $ ? d.value = $ : d.value = f;
+    }, N = (e, l) => {
+      if (!l.value) return;
+      const [a, t] = M(e, l), v = b(a);
+      V(
+        a,
         {
           min: n.value,
-          max: o.value,
-          value: a
+          max: u.value,
+          value: t
         },
         "#B4C2F0",
         "#2B5DFF",
-        t
-      ), l > a ? (e.value = `${a}`, m.value = a, s.value = a) : (m.value = l, s.value = i);
-    }, j = (e, t) => {
-      if (!t.value) return;
-      const [l, a] = B(e, t), i = S(a);
-      x(
-        m.value,
+        l
+      ), a > t ? (e.value = `${t}`, c.value = t, r.value = t) : (c.value = a, r.value = v);
+    }, U = (e, l) => {
+      if (!l.value) return;
+      const [a, t] = M(e, l), v = b(t);
+      V(
+        c.value,
         {
           min: n.value,
-          max: o.value,
-          value: a
+          max: u.value,
+          value: t
         },
         "#B4C2F0",
         "#2B5DFF",
-        t
-      ), I(parseInt(t.value, 10), t), l <= a ? (c.value = a, u.value = i) : (t.value = `${l}`, c.value = l, u.value = l);
-    };
-    D(s, (e) => {
-      V("minChanged", e);
-    }), D(u, (e) => {
-      V("maxChanged", e);
-    });
-    const _ = G();
+        l
+      ), y(parseInt(l.value, 10), l), a <= t ? (d.value = t, o.value = v) : (l.value = `${a}`, d.value = a, o.value = a);
+    }, w = q();
     return (() => {
-      n.value = parseInt(`${f.min || 0}`, 10), o.value = parseInt(`${f.max || 100}`, 10), m.value = n.value, c.value = o.value, s.value = parseInt(`${_.minValue || n.value}`, 10), u.value = parseInt(`${_.maxValue || o.value}`, 10), h.value = Math.log(s.value || 1), P.value = Math.log(u.value), y.value = (P.value - h.value) / (o.value - n.value);
-    })(), H(() => {
-      !g.value || !r.value || (x(
-        m.value,
+      n.value = parseInt(`${m.min || 0}`, 10), u.value = parseInt(`${m.max || 100}`, 10), c.value = n.value, d.value = u.value, r.value = parseInt(`${w.minValue || n.value}`, 10), o.value = parseInt(`${w.maxValue || u.value}`, 10), F.value = Math.log(r.value || 1), P.value = Math.log(o.value), B.value = (P.value - F.value) / (u.value - n.value);
+    })(), G(() => {
+      !g.value || !s.value || (V(
+        c.value,
         {
           min: n.value,
-          max: o.value,
-          value: c.value
+          max: u.value,
+          value: d.value
         },
         "#B4C2F0",
         "#2B5DFF",
-        r.value
-      ), I(c.value, r.value));
-    }), (e, t) => (J(), K("div", Q, [
-      p("div", W, [
-        p("input", {
+        s.value
+      ), y(d.value, s.value));
+    }), (e, l) => (H(), J("div", O, [
+      x("div", Q, [
+        x("input", {
           ref_key: "fromSlider",
           ref: g,
           class: "fromSlider",
           type: "range",
-          value: m.value,
+          value: c.value,
           min: n.value,
-          max: o.value,
+          max: u.value,
           step: e.$attrs.step,
-          onInput: t[0] || (t[0] = T((l) => R(
-            F(g),
-            F(r)
+          onInput: l[0] || (l[0] = _((a) => N(
+            h(g),
+            h(s)
           ), ["stop"]))
-        }, null, 40, X),
-        p("input", {
+        }, null, 40, W),
+        x("input", {
           ref_key: "toSlider",
-          ref: r,
+          ref: s,
           class: "toSlider",
           type: "range",
-          value: c.value,
+          value: d.value,
           min: n.value,
-          max: o.value,
+          max: u.value,
           step: e.$attrs.step,
-          onInput: t[1] || (t[1] = T((l) => j(
-            F(g),
-            F(r)
+          onInput: l[1] || (l[1] = _((a) => U(
+            h(g),
+            h(s)
           ), ["stop"]))
-        }, null, 40, Y)
+        }, null, 40, X)
       ]),
-      p("div", Z, [
-        p("div", ee, [
-          k(E, {
+      x("div", Y, [
+        x("div", Z, [
+          k(C, {
             "label-text": "Min",
             type: "text",
             pattern: "[0-9]*",
             inputmode: "numeric",
-            "model-value": s.value,
-            "onUpdate:modelValue": t[2] || (t[2] = (l) => M("min-input", `${l || ""}`))
+            "model-value": r.value,
+            "onUpdate:modelValue": l[2] || (l[2] = (a) => S("min-input", `${a || ""}`))
           }, null, 8, ["model-value"])
         ]),
-        p("div", te, [
-          k(E, {
+        x("div", ee, [
+          k(C, {
             "label-text": "Max",
             type: "text",
             pattern: "[0-9]*",
             inputmode: "numeric",
-            "model-value": u.value,
-            "onUpdate:modelValue": t[3] || (t[3] = (l) => M("max-input", `${l || ""}`))
+            "model-value": o.value,
+            "onUpdate:modelValue": l[3] || (l[3] = (a) => S("max-input", `${a || ""}`))
           }, null, 8, ["model-value"])
         ])
       ])
     ]));
   }
-}), se = /* @__PURE__ */ O(le, [["__scopeId", "data-v-888621e8"]]);
+}), oe = /* @__PURE__ */ K(le, [["__scopeId", "data-v-581ec7f4"]]);
 export {
-  se as default
+  oe as default
 };

package/dist/UIKit/BaseSlider.vue.d.ts

@@ -1,16 +1,18 @@
-declare const _default: import('vue').DefineComponent<{
+import { Optional } from '@wikicasa-dev/types';
+declare let __VLS_typeProps: {
     type?: "linear" | "logarithmic";
     min?: number;
     max?: number;
-}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    minChanged: (args_0: number) => any;
-    maxChanged: (args_0: number) => any;
-}, string, import('vue').PublicProps, Readonly<{
-    type?: "linear" | "logarithmic";
-    min?: number;
-    max?: number;
-}> & Readonly<{
-    onMinChanged?: ((args_0: number) => any) | undefined;
-    onMaxChanged?: ((args_0: number) => any) | undefined;
+};
+type __VLS_PublicProps = {
+    "minValue"?: Optional<number>;
+    "maxValue"?: Optional<number>;
+} & typeof __VLS_typeProps;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:minValue": (minValue: Optional<number>) => any;
+    "update:maxValue": (maxValue: Optional<number>) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:minValue"?: ((minValue: Optional<number>) => any) | undefined;
+    "onUpdate:maxValue"?: ((maxValue: Optional<number>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/assets/BaseSlider.css

@@ -1 +1 @@
-[data-v-888621e8] .form-control{max-width:none!important}.range_container[data-v-888621e8]{padding-top:15px}.sliders_control[data-v-888621e8]{position:relative;min-height:30px}.form_control[data-v-888621e8]{position:relative;display:flex;justify-content:space-between;font-size:24px;color:#635a5a}input[type=range][data-v-888621e8]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;width:100%;position:absolute;background-color:#b4c2f0;pointer-events:none}input[type=range][data-v-888621e8]::-webkit-slider-thumb:hover{background:#f7f7f7}input[type=range][data-v-888621e8]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px #387bbe,0 0 9px #387bbe;-webkit-box-shadow:inset 0 0 3px #387bbe,0 0 9px #387bbe}input[type=range][data-v-888621e8]::-moz-range-thumb{-moz-appearance:none;appearance:none;pointer-events:all;width:24px;height:24px;background-color:#fff;border-radius:50%;box-shadow:0 0 0 1px #c6c6c6;cursor:pointer}input[type=range][data-v-888621e8]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:all;width:24px;height:24px;background-color:#fff;border:2px solid #2B5DFF;border-radius:50%;cursor:pointer}input[type=number][data-v-888621e8]{color:#8a8383;width:50px;height:30px;font-size:20px;border:none}input[type=number][data-v-888621e8]::-webkit-inner-spin-button,input[type=number][data-v-888621e8]::-webkit-outer-spin-button{opacity:1}.fromSlider[data-v-888621e8]{height:0!important;z-index:1}.toSlider[data-v-888621e8]{height:3px!important}
+[data-v-581ec7f4] .form-control{max-width:none!important}.range_container[data-v-581ec7f4]{padding-top:15px}.sliders_control[data-v-581ec7f4]{position:relative;min-height:30px}.form_control[data-v-581ec7f4]{position:relative;display:flex;justify-content:space-between;font-size:24px;color:#635a5a}input[type=range][data-v-581ec7f4]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;width:100%;position:absolute;background-color:#b4c2f0;pointer-events:none}input[type=range][data-v-581ec7f4]::-webkit-slider-thumb:hover{background:#f7f7f7}input[type=range][data-v-581ec7f4]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px #387bbe,0 0 9px #387bbe;-webkit-box-shadow:inset 0 0 3px #387bbe,0 0 9px #387bbe}input[type=range][data-v-581ec7f4]::-moz-range-thumb{-moz-appearance:none;appearance:none;pointer-events:all;width:24px;height:24px;background-color:#fff;border-radius:50%;box-shadow:0 0 0 1px #c6c6c6;cursor:pointer}input[type=range][data-v-581ec7f4]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:all;width:24px;height:24px;background-color:#fff;border:2px solid #2B5DFF;border-radius:50%;cursor:pointer}input[type=number][data-v-581ec7f4]{color:#8a8383;width:50px;height:30px;font-size:20px;border:none}input[type=number][data-v-581ec7f4]::-webkit-inner-spin-button,input[type=number][data-v-581ec7f4]::-webkit-outer-spin-button{opacity:1}.fromSlider[data-v-581ec7f4]{height:0!important;z-index:1}.toSlider[data-v-581ec7f4]{height:3px!important}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.0.18",
+  "version": "2.0.19",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",