@wikicasa-dev/components 2.0.21 → 2.0.23
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/dist/SimpleSlider.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as V, mergeModels as L, useCssVars as S, useTemplateRef as T, useModel as y, ref as m,
|
|
2
|
-
import { _ as
|
|
3
|
-
import './assets/SimpleSlider.css';const
|
|
1
|
+
import { defineComponent as V, mergeModels as L, useCssVars as S, useTemplateRef as T, useModel as y, ref as m, watch as E, onMounted as C, openBlock as X, createElementBlock as $, createElementVNode as s, withModifiers as B } from "vue";
|
|
2
|
+
import { _ as D } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
|
|
3
|
+
import './assets/SimpleSlider.css';const W = ["aria-valuemin", "aria-valuemax", "aria-valuenow"], P = /* @__PURE__ */ V({
|
|
4
4
|
__name: "SimpleSlider",
|
|
5
5
|
props: /* @__PURE__ */ L({
|
|
6
6
|
min: { default: 0 },
|
|
@@ -15,12 +15,12 @@ import './assets/SimpleSlider.css';const D = ["aria-valuemin", "aria-valuemax",
|
|
|
15
15
|
emits: ["update:modelValue"],
|
|
16
16
|
setup(t) {
|
|
17
17
|
S((i) => ({
|
|
18
|
-
"
|
|
19
|
-
|
|
18
|
+
"0f43c897": r.value,
|
|
19
|
+
ec9c737a: d.value
|
|
20
20
|
}));
|
|
21
|
-
const o = T("customSlider"),
|
|
21
|
+
const o = T("customSlider"), u = y(t, "modelValue"), l = m(!1), d = m("50%"), r = m("50%"), c = (i = 0) => {
|
|
22
22
|
const e = t.logarithmic ? b(i) : k(i), a = (e - t.min) / (t.max - t.min), f = t.logarithmic ? h(e) : a * 100;
|
|
23
|
-
|
|
23
|
+
u.value = Math.round(e), d.value = `${Math.round(f)}%`, r.value = t.logarithmic ? `${Math.round(h(e))}%` : `${a * 100}%`;
|
|
24
24
|
}, k = (i = 0) => {
|
|
25
25
|
const e = Math.round((i - t.min) / t.step) * t.step + t.min;
|
|
26
26
|
return Math.max(t.min, Math.min(t.max, e));
|
|
@@ -39,39 +39,45 @@ import './assets/SimpleSlider.css';const D = ["aria-valuemin", "aria-valuemax",
|
|
|
39
39
|
);
|
|
40
40
|
return Math.max(t.min, Math.min(t.max, e));
|
|
41
41
|
}, v = (i) => {
|
|
42
|
-
if (!
|
|
42
|
+
if (!l.value || !o.value) return;
|
|
43
43
|
const e = o.value.getBoundingClientRect(), a = o.value.offsetWidth;
|
|
44
44
|
let n = ("touches" in i ? i.touches[0].clientX : i.clientX) - e.left;
|
|
45
45
|
n = Math.max(0, Math.min(a, n));
|
|
46
46
|
const w = t.logarithmic ? x(n / a * 100) : n / a * (t.max - t.min) + t.min;
|
|
47
47
|
c(w);
|
|
48
48
|
}, M = () => {
|
|
49
|
-
|
|
49
|
+
l.value = !0;
|
|
50
50
|
}, g = () => {
|
|
51
|
-
|
|
51
|
+
l.value = !1;
|
|
52
52
|
};
|
|
53
|
-
return
|
|
53
|
+
return E(
|
|
54
|
+
u,
|
|
55
|
+
(i) => {
|
|
56
|
+
c(i);
|
|
57
|
+
},
|
|
58
|
+
{ immediate: !0 }
|
|
59
|
+
), C(() => {
|
|
54
60
|
document.addEventListener("mousemove", v), document.addEventListener("mouseup", g), document.addEventListener("touchmove", v, { passive: !0 }), document.addEventListener("touchend", g, { passive: !0 });
|
|
55
|
-
}), (i, e) => (
|
|
56
|
-
|
|
61
|
+
}), (i, e) => (X(), $("div", null, [
|
|
62
|
+
s("div", {
|
|
57
63
|
ref: "customSlider",
|
|
58
64
|
class: "uikit-relative uikit-my-20px uikit-h-1 uikit-rounded-2xs uikit-bg-w-secondary",
|
|
59
65
|
role: "slider",
|
|
60
66
|
"aria-valuemin": i.min,
|
|
61
67
|
"aria-valuemax": i.max,
|
|
62
|
-
"aria-valuenow":
|
|
68
|
+
"aria-valuenow": u.value,
|
|
63
69
|
tabindex: "0"
|
|
64
70
|
}, [
|
|
65
|
-
e[2] || (e[2] =
|
|
66
|
-
|
|
71
|
+
e[2] || (e[2] = s("div", { class: "slider-track uikit-absolute uikit-left-0 uikit-top-0 uikit-h-full uikit-rounded-2xs uikit-bg-w-primary" }, null, -1)),
|
|
72
|
+
s("div", {
|
|
67
73
|
class: "slider-thumb uikit-absolute -uikit-top-2 uikit-size-20px -uikit-translate-x-1/2 uikit-cursor-pointer uikit-rounded-full uikit-border-2 uikit-border-solid uikit-border-w-primary uikit-bg-white",
|
|
68
74
|
onMousedown: e[0] || (e[0] = (a) => M()),
|
|
69
|
-
onTouchstart: e[1] || (e[1] =
|
|
75
|
+
onTouchstart: e[1] || (e[1] = B((a) => M(), ["prevent"]))
|
|
70
76
|
}, null, 32)
|
|
71
|
-
], 8,
|
|
77
|
+
], 8, W)
|
|
72
78
|
]));
|
|
73
79
|
}
|
|
74
|
-
}),
|
|
80
|
+
}), I = /* @__PURE__ */ D(P, [["__scopeId", "data-v-54b825e3"]]);
|
|
75
81
|
export {
|
|
76
|
-
|
|
82
|
+
I as default
|
|
77
83
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.base-tooltip[data-v-b0e473d5]{--tooltip-sm-content-width: 250px;--tooltip-sm-arrows-width: 8px;--tooltip-sm-height: 65px;--tooltip-md-width: calc(var(--tooltip-sm-content-width) * 1.2);--tooltip-md-height: 100px;--tooltip-lg-width: calc(var(--tooltip-sm-content-width) * 1.4);--tooltip-lg-height: 130px;--tooltip-border-radius: 10px;--tooltip-space-from-top-content: 65%;--tooltip-blue-bg: #2B5DFF;--tooltip-blue-color: #fff;--tooltip-white-bg: #fff;--tooltip-white-color: #000;--arrow-width: 10px;--arrow-margin-left: calc(var(--arrow-width) * -1);--arrow-left-position: 10%;position:relative;display:inline-block}.base-tooltip .tooltip-content-wrapper[data-v-b0e473d5]{position:absolute;top:60%}.base-tooltip .tooltip-content-wrapper.sm[data-v-b0e473d5]{width:var(--tooltip-sm-content-width)}.base-tooltip .tooltip-content-wrapper.md[data-v-b0e473d5]{width:var(--tooltip-md-width)}.base-tooltip .tooltip-content-wrapper.lg[data-v-b0e473d5]{width:var(--tooltip-lg-width)}.base-tooltip .tooltip-content[data-v-b0e473d5]{display:none;opacity:0;text-align:center;padding:5px 0;position:absolute;z-index:1;left:var(--arrow-left-position);top:var(--tooltip-space-from-top-content)}.base-tooltip .tooltip-content.lg[data-v-b0e473d5]{top:calc(var(--tooltip-space-from-top-content) + 20%)}.base-tooltip .mail-alert[data-v-b0e473d5]{padding-top:22px;position:absolute;top:90%;z-index:1053}.base-tooltip .mail-alert.listing>.tooltip-content[data-v-b0e473d5]{left:-70px}.base-tooltip .mail-alert .tooltip-content[data-v-b0e473d5]{left:0;top:65%;display:flex!important;justify-content:center;align-items:center}.base-tooltip .mail-alert .tooltip-content[data-v-b0e473d5],.base-tooltip .mail-alert .tooltip-content[data-v-b0e473d5]:after{display:block;opacity:1;transition:opacity .25s ease-out}.base-tooltip .tooltip-content[data-v-b0e473d5],.base-tooltip .tooltip-content[data-v-b0e473d5]>*{border-radius:var(--tooltip-border-radius)}.base-tooltip .tooltip-content.blue[data-v-b0e473d5]{background-color:var(--tooltip-blue-bg);color:var(--tooltip-blue-color)}.base-tooltip .tooltip-content.blue[data-v-b0e473d5]:after{border-color:transparent transparent var(--tooltip-blue-bg) transparent}.base-tooltip .tooltip-content.white[data-v-b0e473d5]{background-color:var(--tooltip-white-bg);color:var(--tooltip-white-color)}.base-tooltip .tooltip-content.white[data-v-b0e473d5]:after{border-color:transparent transparent var(--tooltip-white-bg) transparent}.base-tooltip .tooltip-content.sm[data-v-b0e473d5]{width:var(--tooltip-sm-content-width);height:var(--tooltip-sm-height)}.base-tooltip .tooltip-content.sm[data-v-b0e473d5]:after{border-width:var(--tooltip-sm-arrows-width)}.base-tooltip .tooltip-content.md[data-v-b0e473d5]{width:var(--tooltip-md-width);height:var(--tooltip-md-height)}.base-tooltip .tooltip-content.md[data-v-b0e473d5]:after{border-width:calc(var(--tooltip-sm-arrows-width) +
|
|
1
|
+
.base-tooltip[data-v-b0e473d5]{--tooltip-sm-content-width: 250px;--tooltip-sm-arrows-width: 8px;--tooltip-sm-height: 65px;--tooltip-md-width: calc(var(--tooltip-sm-content-width) * 1.2);--tooltip-md-height: 100px;--tooltip-lg-width: calc(var(--tooltip-sm-content-width) * 1.4);--tooltip-lg-height: 130px;--tooltip-border-radius: 10px;--tooltip-space-from-top-content: 65%;--tooltip-blue-bg: #2B5DFF;--tooltip-blue-color: #fff;--tooltip-white-bg: #fff;--tooltip-white-color: #000;--arrow-width: 10px;--arrow-margin-left: calc(var(--arrow-width) * -1);--arrow-left-position: 10%;position:relative;display:inline-block}.base-tooltip .tooltip-content-wrapper[data-v-b0e473d5]{position:absolute;top:60%}.base-tooltip .tooltip-content-wrapper.sm[data-v-b0e473d5]{width:var(--tooltip-sm-content-width)}.base-tooltip .tooltip-content-wrapper.md[data-v-b0e473d5]{width:var(--tooltip-md-width)}.base-tooltip .tooltip-content-wrapper.lg[data-v-b0e473d5]{width:var(--tooltip-lg-width)}.base-tooltip .tooltip-content[data-v-b0e473d5]{display:none;opacity:0;text-align:center;padding:5px 0;position:absolute;z-index:1;left:var(--arrow-left-position);top:var(--tooltip-space-from-top-content)}.base-tooltip .tooltip-content.lg[data-v-b0e473d5]{top:calc(var(--tooltip-space-from-top-content) + 20%)}.base-tooltip .mail-alert[data-v-b0e473d5]{padding-top:22px;position:absolute;top:90%;z-index:1053}.base-tooltip .mail-alert.listing>.tooltip-content[data-v-b0e473d5]{left:-70px}.base-tooltip .mail-alert .tooltip-content[data-v-b0e473d5]{left:0;top:65%;display:flex!important;justify-content:center;align-items:center}.base-tooltip .mail-alert .tooltip-content[data-v-b0e473d5],.base-tooltip .mail-alert .tooltip-content[data-v-b0e473d5]:after{display:block;opacity:1;transition:opacity .25s ease-out}.base-tooltip .tooltip-content[data-v-b0e473d5],.base-tooltip .tooltip-content[data-v-b0e473d5]>*{border-radius:var(--tooltip-border-radius)}.base-tooltip .tooltip-content.blue[data-v-b0e473d5]{background-color:var(--tooltip-blue-bg);color:var(--tooltip-blue-color)}.base-tooltip .tooltip-content.blue[data-v-b0e473d5]:after{border-color:transparent transparent var(--tooltip-blue-bg) transparent}.base-tooltip .tooltip-content.white[data-v-b0e473d5]{background-color:var(--tooltip-white-bg);color:var(--tooltip-white-color)}.base-tooltip .tooltip-content.white[data-v-b0e473d5]:after{border-color:transparent transparent var(--tooltip-white-bg) transparent}.base-tooltip .tooltip-content.sm[data-v-b0e473d5]{width:var(--tooltip-sm-content-width);height:var(--tooltip-sm-height)}.base-tooltip .tooltip-content.sm[data-v-b0e473d5]:after{border-width:var(--tooltip-sm-arrows-width)}.base-tooltip .tooltip-content.md[data-v-b0e473d5]{width:var(--tooltip-md-width);height:var(--tooltip-md-height)}.base-tooltip .tooltip-content.md[data-v-b0e473d5]:after{border-width:calc(var(--tooltip-sm-arrows-width) + 1px)}.base-tooltip .tooltip-content.lg[data-v-b0e473d5]{width:var(--tooltip-lg-width);height:var(--tooltip-lg-height)}.base-tooltip .tooltip-content.lg[data-v-b0e473d5]:after{border-width:calc(var(--tooltip-sm-arrows-width) + 2px)}.base-tooltip:hover .tooltip-content-wrapper[data-v-b0e473d5]{padding-top:30px}.base-tooltip:hover .tooltip-content.lg[data-v-b0e473d5]{left:8%}.base-tooltip:hover .tooltip-content[data-v-b0e473d5],.base-tooltip .tooltip-content[data-v-b0e473d5]:after{display:block;opacity:1;transition:opacity .25s ease-out}.base-tooltip-arrow[data-v-b0e473d5]:after{content:" ";position:absolute;margin-left:var(--arrow-margin-left);border-style:solid}.base-tooltip-arrow.top[data-v-b0e473d5]:after{bottom:100%;left:var(--arrow-left-position)}.base-tooltip-arrow.top-center[data-v-b0e473d5]:after{bottom:100%;left:50%}.base-tooltip-arrow.right[data-v-b0e473d5]:after{top:50%;left:100%;transform:rotate(90deg)}.base-tooltip-arrow.bottom[data-v-b0e473d5]:after{top:100%;left:var(--arrow-left-position);transform:rotate(180deg)}.base-tooltip-arrow.bottom-center[data-v-b0e473d5]:after{top:100%;left:50%;transform:rotate(180deg)}.base-tooltip-arrow.left[data-v-b0e473d5]:after{top:50%;right:100%;transform:rotate(270deg)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.slider-track[data-v-
|
|
1
|
+
.slider-track[data-v-54b825e3]{width:var(--0f43c897)}.slider-thumb[data-v-54b825e3]{left:var(--ec9c737a)}
|