@leavepulse/ui 0.78.1 → 0.78.3
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/chunks/{DropzoneLinkField-CLLhd3WB.js → DropzoneLinkField-CyE7TJ5f.js} +1 -1
- package/dist/chunks/LpAddressInput-ft8fQOGx.js +401 -0
- package/dist/chunks/{LpAppShell-BKbYCHkx.js → LpAppShell-DRHoQtr-.js} +34 -17
- package/dist/chunks/LpAutocomplete-CrZbd0uv.js +310 -0
- package/dist/chunks/LpCheckbox-CCWCwD0y.js +129 -0
- package/dist/chunks/{LpCodeDisplay-D3BUAhV1.js → LpCodeDisplay-D59uPwRb.js} +1 -1
- package/dist/chunks/LpColorPicker-BONURBFN.js +574 -0
- package/dist/chunks/LpDatePicker-C2AOtxgF.js +171 -0
- package/dist/chunks/{LpDateRangePicker-CNQXdTVv.js → LpDateRangePicker-CiXdIAyh.js} +43 -35
- package/dist/chunks/{LpFileTree-C-rJKzEQ.js → LpFileTree-CpNurwZp.js} +2 -2
- package/dist/chunks/{LpFileTreeNode-BgYn4U1J.js → LpFileTreeNode-DdF8Cq-s.js} +1 -1
- package/dist/chunks/{LpInput-D0O6dpuA.js → LpInput-CbI7z5fQ.js} +3 -4
- package/dist/chunks/{LpLogInspector-BdQlX6S-.js → LpLogInspector-CcSJSGan.js} +1 -1
- package/dist/chunks/{LpLogViewer-umCZBapN.js → LpLogViewer-CWu49Dko.js} +2 -2
- package/dist/chunks/{LpModalNav-gOi1Giz1.js → LpModalNav-DI3BW5ff.js} +1 -1
- package/dist/chunks/LpNumberField-C8LfUz_R.js +154 -0
- package/dist/chunks/LpOtpInput-B1X9l9no.js +140 -0
- package/dist/chunks/{LpPaletteTheme-BIXpZLGe.js → LpPaletteTheme-B-xuZiKK.js} +2 -2
- package/dist/chunks/{LpPasswordInput-D4HPhqfV.js → LpPasswordInput-Duc_3wPv.js} +1 -1
- package/dist/chunks/{LpPhoneInput-BSL7NX4z.js → LpPhoneInput-CctcRK9K.js} +124 -118
- package/dist/chunks/LpRadioGroup-DTM0nd9G.js +103 -0
- package/dist/chunks/LpRangeSlider-DJsEZXad.js +97 -0
- package/dist/chunks/LpRepeater-Czib3rmv.js +193 -0
- package/dist/chunks/{LpSecretField-B2roc4Iz.js → LpSecretField-BtlCk3IH.js} +1 -1
- package/dist/chunks/LpSegmented-sskrJKJJ.js +128 -0
- package/dist/chunks/LpSelect-JFZehOkd.js +515 -0
- package/dist/chunks/{LpSidebar-DDNJzb69.js → LpSidebar-CvRvVBTt.js} +1 -1
- package/dist/chunks/LpSlider-C4ilCtZX.js +76 -0
- package/dist/chunks/LpSwitch-DyAYTchz.js +122 -0
- package/dist/chunks/{LpTableFilter-B_XMOeAh.js → LpTableFilter-CJg5eIcV.js} +2 -2
- package/dist/chunks/{LpTagsInput-Dt0mteSj.js → LpTagsInput-CkNxpNYa.js} +4 -3
- package/dist/chunks/{LpTextarea-Co0b9PVx.js → LpTextarea-CFK_5QB8.js} +3 -2
- package/dist/chunks/{LpThemeStudio-ChU0_Ga8.js → LpThemeStudio-R-wohbCY.js} +2 -2
- package/dist/chunks/{LpThemeSwitcher-DmCZ21P_.js → LpThemeSwitcher-Bzy15MCP.js} +1 -1
- package/dist/chunks/LpTimeField-B5n0m8m0.js +115 -0
- package/dist/chunks/{LpTopologyCanvas-jqz1KCq2.js → LpTopologyCanvas-BNgw9RyZ.js} +2 -2
- package/dist/chunks/{LpWorkspaceSwitcher-BeNHCLd5.js → LpWorkspaceSwitcher-ugv-fyig.js} +1 -1
- package/dist/components/DropzoneLinkField.vue.js +1 -1
- package/dist/components/LpAddressInput.vue.d.ts +4 -0
- package/dist/components/LpAddressInput.vue.js +1 -1
- package/dist/components/LpAlert.vue.d.ts +3 -3
- package/dist/components/LpAppShell.vue.d.ts +19 -1
- package/dist/components/LpAppShell.vue.js +1 -1
- package/dist/components/LpAutocomplete.vue.d.ts +4 -0
- package/dist/components/LpAutocomplete.vue.js +1 -1
- package/dist/components/LpBadge.vue.d.ts +2 -2
- package/dist/components/LpChart.vue.d.ts +1 -1
- package/dist/components/LpCheckbox.vue.d.ts +4 -0
- package/dist/components/LpCheckbox.vue.js +1 -1
- package/dist/components/LpCodeDisplay.vue.js +1 -1
- package/dist/components/LpCollapse.vue.d.ts +1 -1
- package/dist/components/LpColorPicker.vue.d.ts +5 -3
- package/dist/components/LpColorPicker.vue.js +1 -1
- package/dist/components/LpDatePicker.vue.js +1 -1
- package/dist/components/LpDateRangePicker.vue.js +1 -1
- package/dist/components/LpDropzone.vue.js +1 -1
- package/dist/components/LpFileTree.vue.js +1 -1
- package/dist/components/LpFileTreeNode.vue.js +1 -1
- package/dist/components/LpImageEditor.vue.d.ts +1 -1
- package/dist/components/LpInput.vue.js +1 -1
- package/dist/components/LpLogInspector.vue.js +1 -1
- package/dist/components/LpLogViewer.vue.js +1 -1
- package/dist/components/LpModalNav.vue.js +1 -1
- package/dist/components/LpNumberField.vue.d.ts +4 -0
- package/dist/components/LpNumberField.vue.js +1 -1
- package/dist/components/LpOtpInput.vue.d.ts +4 -0
- package/dist/components/LpOtpInput.vue.js +1 -1
- package/dist/components/LpPaletteTheme.vue.js +1 -1
- package/dist/components/LpPasswordInput.vue.js +1 -1
- package/dist/components/LpPhoneInput.vue.d.ts +4 -0
- package/dist/components/LpPhoneInput.vue.js +1 -1
- package/dist/components/LpRadioGroup.vue.d.ts +4 -0
- package/dist/components/LpRadioGroup.vue.js +1 -1
- package/dist/components/LpRangeSlider.vue.d.ts +4 -0
- package/dist/components/LpRangeSlider.vue.js +1 -1
- package/dist/components/LpRepeater.vue.d.ts +2 -0
- package/dist/components/LpRepeater.vue.js +1 -1
- package/dist/components/LpScrollArea.vue.d.ts +1 -1
- package/dist/components/LpSecretField.vue.js +1 -1
- package/dist/components/LpSegmented.vue.d.ts +4 -0
- package/dist/components/LpSegmented.vue.js +1 -1
- package/dist/components/LpSelect.vue.d.ts +2 -0
- package/dist/components/LpSelect.vue.js +1 -1
- package/dist/components/LpShinyText.vue.d.ts +1 -1
- package/dist/components/LpSidebar.vue.d.ts +1 -1
- package/dist/components/LpSidebar.vue.js +1 -1
- package/dist/components/LpSlider.vue.d.ts +4 -0
- package/dist/components/LpSlider.vue.js +1 -1
- package/dist/components/LpSwitch.vue.d.ts +4 -0
- package/dist/components/LpSwitch.vue.js +1 -1
- package/dist/components/LpTable.vue.js +2 -2
- package/dist/components/LpTableFilter.vue.js +1 -1
- package/dist/components/LpTabs.vue.d.ts +1 -1
- package/dist/components/LpTagsInput.vue.js +1 -1
- package/dist/components/LpTextarea.vue.js +1 -1
- package/dist/components/LpThemeStudio.vue.js +1 -1
- package/dist/components/LpThemeSwitcher.vue.js +1 -1
- package/dist/components/LpTimeField.vue.d.ts +4 -0
- package/dist/components/LpTimeField.vue.js +1 -1
- package/dist/components/LpTopologyCanvas.vue.js +1 -1
- package/dist/components/LpWorkspaceSwitcher.vue.js +1 -1
- package/dist/components/calendar.d.ts +2 -0
- package/dist/composables/useField.d.ts +50 -0
- package/dist/composables/useField.js +31 -2
- package/dist/composables/useMergedClass.d.ts +6 -2
- package/dist/composables/useMergedClass.js +6 -6
- package/dist/index.js +34 -34
- package/package.json +1 -1
- package/src/components/LpAddressInput.vue +8 -4
- package/src/components/LpAppShell.vue +56 -18
- package/src/components/LpAutocomplete.vue +11 -5
- package/src/components/LpCheckbox.vue +8 -6
- package/src/components/LpColorPicker.vue +7 -4
- package/src/components/LpDatePicker.vue +8 -4
- package/src/components/LpDateRangePicker.vue +8 -4
- package/src/components/LpInput.vue +3 -4
- package/src/components/LpNumberField.vue +11 -6
- package/src/components/LpOtpInput.vue +8 -6
- package/src/components/LpPhoneInput.vue +11 -6
- package/src/components/LpRadioGroup.vue +9 -5
- package/src/components/LpRangeSlider.vue +8 -4
- package/src/components/LpRepeater.vue +16 -4
- package/src/components/LpSegmented.vue +8 -4
- package/src/components/LpSelect.vue +8 -7
- package/src/components/LpSlider.vue +8 -4
- package/src/components/LpSwitch.vue +8 -5
- package/src/components/LpTagsInput.vue +4 -3
- package/src/components/LpTextarea.vue +3 -2
- package/src/components/LpTimeField.vue +8 -6
- package/src/components/calendar.ts +2 -0
- package/src/composables/useField.ts +52 -0
- package/src/composables/useMergedClass.ts +11 -5
- package/dist/chunks/LpAddressInput-BSS49jpm.js +0 -393
- package/dist/chunks/LpAutocomplete-DkY6CSyD.js +0 -302
- package/dist/chunks/LpCheckbox-D6RuDW4X.js +0 -124
- package/dist/chunks/LpColorPicker-COHzV68R.js +0 -567
- package/dist/chunks/LpDatePicker-DwSDY0mt.js +0 -163
- package/dist/chunks/LpNumberField-Csg-1Zh_.js +0 -148
- package/dist/chunks/LpOtpInput-BRpLBbOD.js +0 -132
- package/dist/chunks/LpRadioGroup-BrazjLY_.js +0 -95
- package/dist/chunks/LpRangeSlider-fz61tzc-.js +0 -89
- package/dist/chunks/LpRepeater-BkJHSPI1.js +0 -180
- package/dist/chunks/LpSegmented-DbEJhbv-.js +0 -123
- package/dist/chunks/LpSelect-Y-iuSymW.js +0 -512
- package/dist/chunks/LpSlider-A4ixovgS.js +0 -68
- package/dist/chunks/LpSwitch-DnC2-0aV.js +0 -115
- package/dist/chunks/LpTimeField-DeOcKWJq.js +0 -110
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
import { defineComponent, ref, computed, openBlock, createBlock, mergeProps, unref, withCtx, createElementVNode, createVNode, createElementBlock, toDisplayString, createCommentVNode } from "vue";
|
|
2
|
-
import { useAttrsField } from "../composables/useField.js";
|
|
3
|
-
import { useLocale } from "../composables/useLocale.js";
|
|
4
|
-
import { useLabels } from "../composables/useLpConfig.js";
|
|
5
|
-
import { defaultDatePresets, dayAllowed } from "../components/dateRange.js";
|
|
6
|
-
import { _ as _sfc_main$2 } from "./LpCalendar-D4-LVjfF.js";
|
|
7
|
-
import { _ as _sfc_main$3 } from "./LpIcon-C6JpQ5td.js";
|
|
8
|
-
import { _ as _sfc_main$1 } from "./PickerField-BM1dyafh.js";
|
|
9
|
-
import { _ as _sfc_main$4 } from "./LpTimeField-DeOcKWJq.js";
|
|
10
|
-
const _hoisted_1 = { class: "flex flex-col" };
|
|
11
|
-
const _hoisted_2 = {
|
|
12
|
-
key: 0,
|
|
13
|
-
class: "flex items-center gap-2 border-t border-line px-3 py-2"
|
|
14
|
-
};
|
|
15
|
-
const __default__ = { inheritAttrs: false };
|
|
16
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
17
|
-
...__default__,
|
|
18
|
-
__name: "LpDatePicker",
|
|
19
|
-
props: {
|
|
20
|
-
clearable: { type: Boolean },
|
|
21
|
-
disabled: { type: Boolean },
|
|
22
|
-
invalid: { type: Boolean },
|
|
23
|
-
size: { default: "md" },
|
|
24
|
-
locale: {},
|
|
25
|
-
modelValue: {},
|
|
26
|
-
placeholder: {},
|
|
27
|
-
min: {},
|
|
28
|
-
max: {},
|
|
29
|
-
isDisabled: {},
|
|
30
|
-
isDateUnavailable: {},
|
|
31
|
-
presets: { type: [Array, Boolean] },
|
|
32
|
-
format: { default: () => ({ year: "numeric", month: "short", day: "numeric" }) },
|
|
33
|
-
time: { type: Boolean },
|
|
34
|
-
defaultTime: { default: "00:00" },
|
|
35
|
-
doneLabel: {},
|
|
36
|
-
labels: {}
|
|
37
|
-
},
|
|
38
|
-
emits: ["update:modelValue", "blur"],
|
|
39
|
-
setup(__props, { emit: __emit }) {
|
|
40
|
-
const props = __props;
|
|
41
|
-
const emit = __emit;
|
|
42
|
-
const open = ref(false);
|
|
43
|
-
const day = computed(() => (props.modelValue || "").slice(0, 10));
|
|
44
|
-
const minute = computed(() => {
|
|
45
|
-
const at = (props.modelValue || "").slice(11, 16);
|
|
46
|
-
return /^\d{2}:\d{2}$/.test(at) ? at : "";
|
|
47
|
-
});
|
|
48
|
-
const locale = useLocale(() => props.locale);
|
|
49
|
-
const display = computed(() => {
|
|
50
|
-
if (!props.modelValue) return "";
|
|
51
|
-
const [y, m, d] = day.value.split("-").map(Number);
|
|
52
|
-
if (!y || !m || !d) return props.modelValue;
|
|
53
|
-
const shown = new Intl.DateTimeFormat(locale.value, props.format).format(new Date(y, m - 1, d));
|
|
54
|
-
return props.time && minute.value ? `${shown}, ${minute.value}` : shown;
|
|
55
|
-
});
|
|
56
|
-
function onPick(picked) {
|
|
57
|
-
const v = picked ?? (day.value || void 0);
|
|
58
|
-
if (!props.time) {
|
|
59
|
-
emit("update:modelValue", v);
|
|
60
|
-
open.value = false;
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
emit("update:modelValue", v ? `${v}T${minute.value || props.defaultTime}` : void 0);
|
|
64
|
-
}
|
|
65
|
-
function onTime(at) {
|
|
66
|
-
if (!day.value) return;
|
|
67
|
-
emit("update:modelValue", `${day.value}T${at || props.defaultTime}`);
|
|
68
|
-
}
|
|
69
|
-
function clear() {
|
|
70
|
-
emit("update:modelValue", void 0);
|
|
71
|
-
}
|
|
72
|
-
const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid, disabled: props.disabled }));
|
|
73
|
-
const text = useLabels(
|
|
74
|
-
"datePicker",
|
|
75
|
-
{
|
|
76
|
-
placeholder: "Pick a date",
|
|
77
|
-
clear: "Clear",
|
|
78
|
-
done: "Done",
|
|
79
|
-
presets: "Presets",
|
|
80
|
-
today: "Today",
|
|
81
|
-
tomorrow: "Tomorrow",
|
|
82
|
-
inWeek: "In a week"
|
|
83
|
-
},
|
|
84
|
-
() => props.labels
|
|
85
|
-
);
|
|
86
|
-
const presetList = computed(() => {
|
|
87
|
-
if (Array.isArray(props.presets)) return props.presets;
|
|
88
|
-
return props.presets ? defaultDatePresets(text.value) : [];
|
|
89
|
-
});
|
|
90
|
-
function presetFits(preset) {
|
|
91
|
-
return dayAllowed(preset.date(), props);
|
|
92
|
-
}
|
|
93
|
-
function pickPreset(preset) {
|
|
94
|
-
if (presetFits(preset)) onPick(preset.date());
|
|
95
|
-
}
|
|
96
|
-
const showClear = computed(() => props.clearable && !!props.modelValue && !field.value.disabled);
|
|
97
|
-
const presetOptions = computed(() => presetList.value.map((preset) => ({
|
|
98
|
-
label: preset.label,
|
|
99
|
-
disabled: !presetFits(preset),
|
|
100
|
-
selected: !!day.value && day.value === preset.date(),
|
|
101
|
-
select: () => pickPreset(preset)
|
|
102
|
-
})));
|
|
103
|
-
return (_ctx, _cache) => {
|
|
104
|
-
return openBlock(), createBlock(_sfc_main$1, mergeProps(unref(attrs), {
|
|
105
|
-
open: open.value,
|
|
106
|
-
"onUpdate:open": _cache[2] || (_cache[2] = ($event) => open.value = $event),
|
|
107
|
-
field: unref(field),
|
|
108
|
-
display: display.value,
|
|
109
|
-
placeholder: __props.placeholder ?? unref(text).placeholder,
|
|
110
|
-
icon: "lucide:calendar",
|
|
111
|
-
size: __props.size,
|
|
112
|
-
clearable: showClear.value,
|
|
113
|
-
"clear-label": unref(text).clear,
|
|
114
|
-
"presets-label": unref(text).presets,
|
|
115
|
-
presets: presetOptions.value,
|
|
116
|
-
"presets-class": "sm:w-36",
|
|
117
|
-
onClear: clear,
|
|
118
|
-
onBlur: _cache[3] || (_cache[3] = ($event) => emit("blur", $event))
|
|
119
|
-
}), {
|
|
120
|
-
default: withCtx(() => [
|
|
121
|
-
createElementVNode("div", _hoisted_1, [
|
|
122
|
-
createVNode(_sfc_main$2, {
|
|
123
|
-
"model-value": day.value,
|
|
124
|
-
min: __props.min,
|
|
125
|
-
max: __props.max,
|
|
126
|
-
"is-disabled": __props.isDisabled,
|
|
127
|
-
"is-date-unavailable": __props.isDateUnavailable,
|
|
128
|
-
locale: unref(locale),
|
|
129
|
-
labels: __props.labels,
|
|
130
|
-
class: "border-0 bg-transparent",
|
|
131
|
-
"onUpdate:modelValue": onPick
|
|
132
|
-
}, null, 8, ["model-value", "min", "max", "is-disabled", "is-date-unavailable", "locale", "labels"]),
|
|
133
|
-
__props.time ? (openBlock(), createElementBlock("div", _hoisted_2, [
|
|
134
|
-
createVNode(_sfc_main$3, {
|
|
135
|
-
name: "lucide:clock",
|
|
136
|
-
size: 15,
|
|
137
|
-
class: "shrink-0 text-muted"
|
|
138
|
-
}),
|
|
139
|
-
createVNode(_sfc_main$4, {
|
|
140
|
-
"model-value": minute.value || void 0,
|
|
141
|
-
disabled: !day.value,
|
|
142
|
-
icon: false,
|
|
143
|
-
locale: unref(locale),
|
|
144
|
-
size: "sm",
|
|
145
|
-
class: "flex-1",
|
|
146
|
-
"onUpdate:modelValue": _cache[0] || (_cache[0] = (at) => onTime(at || ""))
|
|
147
|
-
}, null, 8, ["model-value", "disabled", "locale"]),
|
|
148
|
-
createElementVNode("button", {
|
|
149
|
-
type: "button",
|
|
150
|
-
class: "shrink-0 rounded-control px-2 py-1 text-xs text-muted transition-colors hover:text-ink",
|
|
151
|
-
onClick: _cache[1] || (_cache[1] = ($event) => open.value = false)
|
|
152
|
-
}, toDisplayString(__props.doneLabel ?? unref(text).done), 1)
|
|
153
|
-
])) : createCommentVNode("", true)
|
|
154
|
-
])
|
|
155
|
-
]),
|
|
156
|
-
_: 1
|
|
157
|
-
}, 16, ["open", "field", "display", "placeholder", "size", "clearable", "clear-label", "presets-label", "presets"]);
|
|
158
|
-
};
|
|
159
|
-
}
|
|
160
|
-
});
|
|
161
|
-
export {
|
|
162
|
-
_sfc_main as _
|
|
163
|
-
};
|
|
@@ -1,148 +0,0 @@
|
|
|
1
|
-
import { defineComponent, useId, computed, openBlock, createBlock, unref, normalizeStyle, normalizeClass, withCtx, createVNode, createSlots, renderSlot, createCommentVNode, mergeProps, createElementBlock, toDisplayString } from "vue";
|
|
2
|
-
import { CONTROL_SIZE } from "../components/controlSize.js";
|
|
3
|
-
import { usePaletteControl } from "../composables/usePaletteCommands.js";
|
|
4
|
-
import { NumberFieldRoot, NumberFieldDecrement, NumberFieldInput, NumberFieldIncrement } from "reka-ui";
|
|
5
|
-
import { _ as _sfc_main$1 } from "./FieldLeading-mr81aEAP.js";
|
|
6
|
-
import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
|
|
7
|
-
import { useAttrsField, mergeDescribedBy, focusLeft } from "../composables/useField.js";
|
|
8
|
-
import { useLabels } from "../composables/useLpConfig.js";
|
|
9
|
-
import { useMergedClass } from "../composables/useMergedClass.js";
|
|
10
|
-
const _hoisted_1 = ["id"];
|
|
11
|
-
const __default__ = { inheritAttrs: false };
|
|
12
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
13
|
-
...__default__,
|
|
14
|
-
__name: "LpNumberField",
|
|
15
|
-
props: {
|
|
16
|
-
palette: { type: [Boolean, Object], default: void 0 },
|
|
17
|
-
modelValue: {},
|
|
18
|
-
min: {},
|
|
19
|
-
max: {},
|
|
20
|
-
step: {},
|
|
21
|
-
stepSnapping: { type: Boolean, default: true },
|
|
22
|
-
formatOptions: {},
|
|
23
|
-
locale: {},
|
|
24
|
-
readonly: { type: Boolean },
|
|
25
|
-
disableWheelChange: { type: Boolean },
|
|
26
|
-
invertWheelChange: { type: Boolean },
|
|
27
|
-
focusOnChange: { type: Boolean, default: true },
|
|
28
|
-
steppers: { type: Boolean, default: true },
|
|
29
|
-
disabled: { type: Boolean },
|
|
30
|
-
unit: {},
|
|
31
|
-
icon: {},
|
|
32
|
-
invalid: { type: Boolean },
|
|
33
|
-
size: { default: "md" },
|
|
34
|
-
labels: {}
|
|
35
|
-
},
|
|
36
|
-
emits: ["update:modelValue", "blur"],
|
|
37
|
-
setup(__props, { emit: __emit }) {
|
|
38
|
-
const props = __props;
|
|
39
|
-
const emit = __emit;
|
|
40
|
-
const unitId = useId();
|
|
41
|
-
const text = useLabels(
|
|
42
|
-
"numberField",
|
|
43
|
-
{ increase: "Increase", decrease: "Decrease" },
|
|
44
|
-
() => props.labels
|
|
45
|
-
);
|
|
46
|
-
const SIZE = CONTROL_SIZE;
|
|
47
|
-
const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid, disabled: props.disabled }));
|
|
48
|
-
const describedBy = computed(
|
|
49
|
-
() => mergeDescribedBy(attrs["aria-describedby"], field.value.describedBy, props.unit ? unitId : void 0)
|
|
50
|
-
);
|
|
51
|
-
const inputAttrs = computed(() => {
|
|
52
|
-
const { class: _c, style: _s, id: _i, name: _n, ...rest } = attrs;
|
|
53
|
-
return rest;
|
|
54
|
-
});
|
|
55
|
-
function onFocusOut(event) {
|
|
56
|
-
if (focusLeft(event)) emit("blur", event);
|
|
57
|
-
}
|
|
58
|
-
const rootClass = useMergedClass(
|
|
59
|
-
() => [
|
|
60
|
-
"@container flex w-full items-center rounded-control border bg-surface-soft transition-colors duration-[var(--duration-fast)] focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
|
|
61
|
-
SIZE[props.size],
|
|
62
|
-
field.value.invalid ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand focus-within:ring-ring"
|
|
63
|
-
].join(" ")
|
|
64
|
-
);
|
|
65
|
-
usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid });
|
|
66
|
-
return (_ctx, _cache) => {
|
|
67
|
-
return openBlock(), createBlock(unref(NumberFieldRoot), {
|
|
68
|
-
"model-value": __props.modelValue ?? void 0,
|
|
69
|
-
min: __props.min,
|
|
70
|
-
max: __props.max,
|
|
71
|
-
step: __props.step,
|
|
72
|
-
"step-snapping": __props.stepSnapping,
|
|
73
|
-
readonly: __props.readonly,
|
|
74
|
-
"disable-wheel-change": __props.disableWheelChange,
|
|
75
|
-
"invert-wheel-change": __props.invertWheelChange,
|
|
76
|
-
"focus-on-change": __props.focusOnChange,
|
|
77
|
-
"format-options": __props.formatOptions,
|
|
78
|
-
locale: __props.locale,
|
|
79
|
-
disabled: unref(field).disabled,
|
|
80
|
-
required: unref(field).required,
|
|
81
|
-
"data-lp-ring-owner": "",
|
|
82
|
-
class: normalizeClass(unref(rootClass)),
|
|
83
|
-
style: normalizeStyle(unref(attrs).style),
|
|
84
|
-
name: typeof unref(attrs).name === "string" ? unref(attrs).name : void 0,
|
|
85
|
-
"onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => emit("update:modelValue", Number.isNaN(v) ? null : v ?? null)),
|
|
86
|
-
onFocusout: onFocusOut
|
|
87
|
-
}, {
|
|
88
|
-
default: withCtx(() => [
|
|
89
|
-
createVNode(_sfc_main$1, {
|
|
90
|
-
icon: __props.icon,
|
|
91
|
-
class: "pl-2.5"
|
|
92
|
-
}, createSlots({ _: 2 }, [
|
|
93
|
-
_ctx.$slots.leading ? {
|
|
94
|
-
name: "default",
|
|
95
|
-
fn: withCtx(() => [
|
|
96
|
-
renderSlot(_ctx.$slots, "leading")
|
|
97
|
-
]),
|
|
98
|
-
key: "0"
|
|
99
|
-
} : void 0
|
|
100
|
-
]), 1032, ["icon"]),
|
|
101
|
-
__props.steppers ? (openBlock(), createBlock(unref(NumberFieldDecrement), {
|
|
102
|
-
key: 0,
|
|
103
|
-
"aria-label": unref(text).decrease,
|
|
104
|
-
class: "group grid h-full w-8 shrink-0 place-items-center @max-[8.5rem]:hidden text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
|
|
105
|
-
}, {
|
|
106
|
-
default: withCtx(() => [
|
|
107
|
-
createVNode(_sfc_main$2, {
|
|
108
|
-
name: "lucide:minus",
|
|
109
|
-
size: 15,
|
|
110
|
-
class: "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-75 motion-reduce:group-active:scale-100"
|
|
111
|
-
})
|
|
112
|
-
]),
|
|
113
|
-
_: 1
|
|
114
|
-
}, 8, ["aria-label"])) : createCommentVNode("", true),
|
|
115
|
-
createVNode(unref(NumberFieldInput), mergeProps(inputAttrs.value, {
|
|
116
|
-
id: unref(field).id,
|
|
117
|
-
"aria-describedby": describedBy.value,
|
|
118
|
-
"aria-invalid": unref(field).invalid || void 0,
|
|
119
|
-
class: ["min-w-0 flex-1 bg-transparent text-ink outline-none placeholder:text-muted [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none", __props.steppers ? "text-center @max-[8.5rem]:px-3 @max-[8.5rem]:text-left" : __props.icon || _ctx.$slots.leading ? "pl-2 pr-3" : "px-3"]
|
|
120
|
-
}), null, 16, ["id", "aria-describedby", "aria-invalid", "class"]),
|
|
121
|
-
__props.unit ? (openBlock(), createElementBlock("span", {
|
|
122
|
-
key: 1,
|
|
123
|
-
id: unref(unitId),
|
|
124
|
-
class: normalizeClass(["shrink-0 pr-1 text-xs text-muted", !__props.steppers && "pr-3"])
|
|
125
|
-
}, toDisplayString(__props.unit), 11, _hoisted_1)) : createCommentVNode("", true),
|
|
126
|
-
__props.steppers ? (openBlock(), createBlock(unref(NumberFieldIncrement), {
|
|
127
|
-
key: 2,
|
|
128
|
-
"aria-label": unref(text).increase,
|
|
129
|
-
class: "group grid h-full w-8 shrink-0 place-items-center @max-[8.5rem]:hidden text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
|
|
130
|
-
}, {
|
|
131
|
-
default: withCtx(() => [
|
|
132
|
-
createVNode(_sfc_main$2, {
|
|
133
|
-
name: "lucide:plus",
|
|
134
|
-
size: 15,
|
|
135
|
-
class: "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-75 motion-reduce:group-active:scale-100"
|
|
136
|
-
})
|
|
137
|
-
]),
|
|
138
|
-
_: 1
|
|
139
|
-
}, 8, ["aria-label"])) : createCommentVNode("", true)
|
|
140
|
-
]),
|
|
141
|
-
_: 3
|
|
142
|
-
}, 8, ["model-value", "min", "max", "step", "step-snapping", "readonly", "disable-wheel-change", "invert-wheel-change", "focus-on-change", "format-options", "locale", "disabled", "required", "class", "style", "name"]);
|
|
143
|
-
};
|
|
144
|
-
}
|
|
145
|
-
});
|
|
146
|
-
export {
|
|
147
|
-
_sfc_main as _
|
|
148
|
-
};
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import { defineComponent, computed, ref, watch, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, Fragment, renderList, createVNode, normalizeClass, createCommentVNode } from "vue";
|
|
2
|
-
import { PinInputRoot, PinInputInput } from "reka-ui";
|
|
3
|
-
import { useFieldControl, mergeDescribedBy } from "../composables/useField.js";
|
|
4
|
-
import { useMergedAttrs } from "../composables/useMergedClass.js";
|
|
5
|
-
import { splitCode, upperCells, joinCells, groupBreaks } from "../components/otp.js";
|
|
6
|
-
const _hoisted_1 = {
|
|
7
|
-
key: 0,
|
|
8
|
-
"aria-hidden": "true",
|
|
9
|
-
class: "h-0.5 w-2 shrink-0 rounded-full bg-muted opacity-60"
|
|
10
|
-
};
|
|
11
|
-
const __default__ = { inheritAttrs: false };
|
|
12
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
13
|
-
...__default__,
|
|
14
|
-
__name: "LpOtpInput",
|
|
15
|
-
props: {
|
|
16
|
-
modelValue: {},
|
|
17
|
-
length: { default: 6 },
|
|
18
|
-
disabled: { type: Boolean },
|
|
19
|
-
mask: { type: Boolean },
|
|
20
|
-
alphanumeric: { type: Boolean, default: false },
|
|
21
|
-
uppercase: { type: Boolean, default: void 0 },
|
|
22
|
-
group: {},
|
|
23
|
-
invalid: { type: Boolean },
|
|
24
|
-
size: { default: "md" }
|
|
25
|
-
},
|
|
26
|
-
emits: ["update:modelValue", "complete"],
|
|
27
|
-
setup(__props, { emit: __emit }) {
|
|
28
|
-
const props = __props;
|
|
29
|
-
const emit = __emit;
|
|
30
|
-
const upper = computed(() => props.alphanumeric && (props.uppercase ?? true));
|
|
31
|
-
const local = ref(splitCode(props.modelValue, props.length));
|
|
32
|
-
let emitted = props.modelValue ?? "";
|
|
33
|
-
watch(
|
|
34
|
-
() => props.modelValue ?? "",
|
|
35
|
-
(value) => {
|
|
36
|
-
if (value === emitted) return;
|
|
37
|
-
emitted = value;
|
|
38
|
-
local.value = splitCode(value, props.length);
|
|
39
|
-
}
|
|
40
|
-
);
|
|
41
|
-
watch(
|
|
42
|
-
() => props.length,
|
|
43
|
-
(length) => {
|
|
44
|
-
local.value = local.value.slice(0, length);
|
|
45
|
-
}
|
|
46
|
-
);
|
|
47
|
-
const cells = computed({
|
|
48
|
-
get: () => local.value,
|
|
49
|
-
set: (arr) => {
|
|
50
|
-
local.value = upper.value ? upperCells(arr) : arr;
|
|
51
|
-
emitted = joinCells(local.value);
|
|
52
|
-
emit("update:modelValue", emitted);
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
const field = useFieldControl(() => ({
|
|
56
|
-
wrapped: false,
|
|
57
|
-
invalid: props.invalid,
|
|
58
|
-
disabled: props.disabled
|
|
59
|
-
}));
|
|
60
|
-
function onComplete(arr) {
|
|
61
|
-
emit("complete", joinCells(upper.value ? upperCells(arr) : arr));
|
|
62
|
-
}
|
|
63
|
-
const breaks = computed(() => groupBreaks(props.length, props.group));
|
|
64
|
-
const root = ref(null);
|
|
65
|
-
function onBeforeInput(event, index) {
|
|
66
|
-
if (event.inputType !== "deleteContentBackward") return;
|
|
67
|
-
event.preventDefault();
|
|
68
|
-
const target = event.target;
|
|
69
|
-
const next = [...local.value];
|
|
70
|
-
let clear = index;
|
|
71
|
-
if (!target.value && index > 0) {
|
|
72
|
-
clear = index - 1;
|
|
73
|
-
root.value?.$el.querySelectorAll("input")[clear]?.focus();
|
|
74
|
-
}
|
|
75
|
-
next[clear] = props.alphanumeric ? "" : void 0;
|
|
76
|
-
cells.value = next;
|
|
77
|
-
}
|
|
78
|
-
const cellSize = {
|
|
79
|
-
sm: "max-w-9 text-base",
|
|
80
|
-
md: "max-w-11 text-lg",
|
|
81
|
-
lg: "max-w-13 text-xl"
|
|
82
|
-
};
|
|
83
|
-
const { class: rootClass, attrs: rest } = useMergedAttrs(
|
|
84
|
-
"flex min-w-0 max-w-full items-center gap-1.5 sm:gap-2"
|
|
85
|
-
);
|
|
86
|
-
return (_ctx, _cache) => {
|
|
87
|
-
return openBlock(), createBlock(unref(PinInputRoot), mergeProps({
|
|
88
|
-
ref_key: "root",
|
|
89
|
-
ref: root,
|
|
90
|
-
modelValue: cells.value,
|
|
91
|
-
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => cells.value = $event),
|
|
92
|
-
type: __props.alphanumeric ? "text" : "number",
|
|
93
|
-
mask: __props.mask,
|
|
94
|
-
disabled: unref(field).disabled,
|
|
95
|
-
required: unref(field).required,
|
|
96
|
-
otp: "",
|
|
97
|
-
class: unref(rootClass)
|
|
98
|
-
}, unref(rest), { onComplete }), {
|
|
99
|
-
default: withCtx(() => [
|
|
100
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.length, (i) => {
|
|
101
|
-
return openBlock(), createElementBlock(Fragment, { key: i }, [
|
|
102
|
-
createVNode(unref(PinInputInput), {
|
|
103
|
-
index: i - 1,
|
|
104
|
-
id: i === 1 ? unref(field).id : void 0,
|
|
105
|
-
"aria-invalid": unref(field).invalid || void 0,
|
|
106
|
-
"aria-describedby": unref(mergeDescribedBy)(unref(rest)["aria-describedby"], unref(field).describedBy),
|
|
107
|
-
autocapitalize: upper.value ? "characters" : "none",
|
|
108
|
-
autocorrect: "off",
|
|
109
|
-
spellcheck: false,
|
|
110
|
-
class: normalizeClass([
|
|
111
|
-
cellSize[__props.size],
|
|
112
|
-
"aspect-square h-auto min-w-0 flex-1 basis-0 p-0",
|
|
113
|
-
"rounded-control border bg-surface-soft text-center font-semibold text-ink caret-brand",
|
|
114
|
-
"outline-none transition-colors duration-[var(--duration-fast)]",
|
|
115
|
-
"focus:border-brand focus:ring-2 focus:ring-ring",
|
|
116
|
-
"disabled:cursor-not-allowed disabled:opacity-55",
|
|
117
|
-
unref(field).invalid ? "border-danger focus:border-danger focus:ring-danger-soft" : "border-line"
|
|
118
|
-
]),
|
|
119
|
-
onBeforeinput: ($event) => onBeforeInput($event, i - 1)
|
|
120
|
-
}, null, 8, ["index", "id", "aria-invalid", "aria-describedby", "autocapitalize", "class", "onBeforeinput"]),
|
|
121
|
-
breaks.value.has(i - 1) ? (openBlock(), createElementBlock("span", _hoisted_1)) : createCommentVNode("", true)
|
|
122
|
-
], 64);
|
|
123
|
-
}), 128))
|
|
124
|
-
]),
|
|
125
|
-
_: 1
|
|
126
|
-
}, 16, ["modelValue", "type", "mask", "disabled", "required", "class"]);
|
|
127
|
-
};
|
|
128
|
-
}
|
|
129
|
-
});
|
|
130
|
-
export {
|
|
131
|
-
_sfc_main as _
|
|
132
|
-
};
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import { defineComponent, useId, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, Fragment, renderList, normalizeClass, createVNode, createElementVNode, createCommentVNode, toDisplayString, createTextVNode } from "vue";
|
|
2
|
-
import { usePaletteControl } from "../composables/usePaletteCommands.js";
|
|
3
|
-
import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator } from "reka-ui";
|
|
4
|
-
import { useFieldControl, mergeDescribedBy } from "../composables/useField.js";
|
|
5
|
-
import { useMergedAttrs } from "../composables/useMergedClass.js";
|
|
6
|
-
import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
|
|
7
|
-
const _hoisted_1 = {
|
|
8
|
-
key: 1,
|
|
9
|
-
class: "flex min-w-0 flex-col"
|
|
10
|
-
};
|
|
11
|
-
const _hoisted_2 = ["id"];
|
|
12
|
-
const __default__ = { inheritAttrs: false };
|
|
13
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
14
|
-
...__default__,
|
|
15
|
-
__name: "LpRadioGroup",
|
|
16
|
-
props: {
|
|
17
|
-
palette: { type: [Boolean, Object], default: void 0 },
|
|
18
|
-
modelValue: {},
|
|
19
|
-
options: {},
|
|
20
|
-
disabled: { type: Boolean }
|
|
21
|
-
},
|
|
22
|
-
emits: ["update:modelValue"],
|
|
23
|
-
setup(__props) {
|
|
24
|
-
const props = __props;
|
|
25
|
-
const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }));
|
|
26
|
-
const uid = useId();
|
|
27
|
-
const { class: rootClass, attrs: rest } = useMergedAttrs(
|
|
28
|
-
"flex flex-col gap-2"
|
|
29
|
-
);
|
|
30
|
-
usePaletteControl({ disabled: () => field.value.disabled });
|
|
31
|
-
return (_ctx, _cache) => {
|
|
32
|
-
return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps({
|
|
33
|
-
"model-value": __props.modelValue,
|
|
34
|
-
disabled: unref(field).disabled,
|
|
35
|
-
required: unref(field).required,
|
|
36
|
-
"aria-labelledby": unref(field).labelId,
|
|
37
|
-
"aria-invalid": unref(field).invalid || void 0,
|
|
38
|
-
class: unref(rootClass)
|
|
39
|
-
}, unref(rest), {
|
|
40
|
-
"aria-describedby": unref(mergeDescribedBy)(unref(rest)["aria-describedby"], unref(field).describedBy),
|
|
41
|
-
"onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => _ctx.$emit("update:modelValue", v))
|
|
42
|
-
}), {
|
|
43
|
-
default: withCtx(() => [
|
|
44
|
-
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
45
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (opt, i) => {
|
|
46
|
-
return openBlock(), createElementBlock("label", {
|
|
47
|
-
key: opt.value,
|
|
48
|
-
class: normalizeClass(["group/radio inline-flex gap-2 text-sm text-ink", [
|
|
49
|
-
opt.description ? "items-start" : "items-center",
|
|
50
|
-
opt.disabled ? "cursor-not-allowed text-muted" : unref(field).disabled ? "cursor-not-allowed" : "cursor-pointer"
|
|
51
|
-
]])
|
|
52
|
-
}, [
|
|
53
|
-
createVNode(unref(RadioGroupItem), {
|
|
54
|
-
value: opt.value,
|
|
55
|
-
disabled: opt.disabled,
|
|
56
|
-
"aria-describedby": opt.description ? `${unref(uid)}-${i}-desc` : void 0,
|
|
57
|
-
class: normalizeClass([opt.description ? "mt-px" : "", "flex size-[18px] shrink-0 items-center justify-center rounded-full border border-line-strong bg-surface-soft outline-none transition-[color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:group-hover/radio:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-brand disabled:cursor-not-allowed disabled:opacity-55"])
|
|
58
|
-
}, {
|
|
59
|
-
default: withCtx(() => [
|
|
60
|
-
createVNode(unref(RadioGroupIndicator), { class: "flex data-[state=checked]:animate-[indicator-in_140ms_var(--ease-emphasized)]" }, {
|
|
61
|
-
default: withCtx(() => [..._cache[1] || (_cache[1] = [
|
|
62
|
-
createElementVNode("span", { class: "size-2 rounded-full bg-brand" }, null, -1)
|
|
63
|
-
])]),
|
|
64
|
-
_: 1
|
|
65
|
-
})
|
|
66
|
-
]),
|
|
67
|
-
_: 1
|
|
68
|
-
}, 8, ["value", "disabled", "aria-describedby", "class"]),
|
|
69
|
-
opt.icon ? (openBlock(), createBlock(_sfc_main$1, {
|
|
70
|
-
key: 0,
|
|
71
|
-
name: opt.icon,
|
|
72
|
-
size: 16,
|
|
73
|
-
class: normalizeClass(["shrink-0 text-muted", opt.description ? "mt-0.5" : ""])
|
|
74
|
-
}, null, 8, ["name", "class"])) : createCommentVNode("", true),
|
|
75
|
-
opt.description ? (openBlock(), createElementBlock("span", _hoisted_1, [
|
|
76
|
-
createElementVNode("span", null, toDisplayString(opt.label), 1),
|
|
77
|
-
createElementVNode("span", {
|
|
78
|
-
id: `${unref(uid)}-${i}-desc`,
|
|
79
|
-
class: "text-xs text-muted"
|
|
80
|
-
}, toDisplayString(opt.description), 9, _hoisted_2)
|
|
81
|
-
])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
|
|
82
|
-
createTextVNode(toDisplayString(opt.label), 1)
|
|
83
|
-
], 64))
|
|
84
|
-
], 2);
|
|
85
|
-
}), 128))
|
|
86
|
-
])
|
|
87
|
-
]),
|
|
88
|
-
_: 3
|
|
89
|
-
}, 16, ["model-value", "disabled", "required", "aria-labelledby", "aria-invalid", "class", "aria-describedby"]);
|
|
90
|
-
};
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
export {
|
|
94
|
-
_sfc_main as _
|
|
95
|
-
};
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createElementBlock, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode } from "vue";
|
|
2
|
-
import { _ as _sfc_main$1 } from "./SliderRail-DhPREa_R.js";
|
|
3
|
-
import { usePaletteControl } from "../composables/usePaletteCommands.js";
|
|
4
|
-
import { SliderRoot, SliderThumb } from "reka-ui";
|
|
5
|
-
import { useFieldControl, mergeDescribedBy } from "../composables/useField.js";
|
|
6
|
-
import { useMergedAttrs } from "../composables/useMergedClass.js";
|
|
7
|
-
import { useSliderDrag, SLIDER_GLIDE } from "../components/slider.js";
|
|
8
|
-
const __default__ = { inheritAttrs: false };
|
|
9
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
10
|
-
...__default__,
|
|
11
|
-
__name: "LpRangeSlider",
|
|
12
|
-
props: {
|
|
13
|
-
palette: { type: [Boolean, Object], default: void 0 },
|
|
14
|
-
modelValue: { default: () => [0, 100] },
|
|
15
|
-
min: { default: 0 },
|
|
16
|
-
max: { default: 100 },
|
|
17
|
-
step: { default: 1 },
|
|
18
|
-
minGap: { default: 0 },
|
|
19
|
-
disabled: { type: Boolean },
|
|
20
|
-
ariaLabels: {},
|
|
21
|
-
format: {}
|
|
22
|
-
},
|
|
23
|
-
emits: ["update:modelValue", "change"],
|
|
24
|
-
setup(__props, { emit: __emit }) {
|
|
25
|
-
const props = __props;
|
|
26
|
-
const emit = __emit;
|
|
27
|
-
function pair(v) {
|
|
28
|
-
return v && v.length >= 2 ? [v[0], v[1]] : null;
|
|
29
|
-
}
|
|
30
|
-
function onUpdate(v) {
|
|
31
|
-
const value = pair(v);
|
|
32
|
-
if (value) emit("update:modelValue", value);
|
|
33
|
-
}
|
|
34
|
-
function onCommit(v) {
|
|
35
|
-
const value = pair(v);
|
|
36
|
-
if (value) emit("change", value);
|
|
37
|
-
}
|
|
38
|
-
const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }));
|
|
39
|
-
const { class: rootClass, attrs: rest } = useMergedAttrs(
|
|
40
|
-
`relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`
|
|
41
|
-
);
|
|
42
|
-
const { dragging, onPointerDown } = useSliderDrag();
|
|
43
|
-
const thumbClass = "group/thumb relative block size-4 rounded-pill border-2 border-brand bg-surface shadow outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:scale-100 motion-reduce:active:scale-100";
|
|
44
|
-
const labelClass = "pointer-events-none absolute bottom-full left-1/2 mb-1.5 -translate-x-1/2 translate-y-0.5 rounded-control bg-surface-raised px-1.5 py-0.5 text-[11px] whitespace-nowrap text-ink tabular-nums opacity-0 shadow-sm transition-[opacity,translate] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-hover/thumb:translate-y-0 group-hover/thumb:opacity-100 group-focus-visible/thumb:translate-y-0 group-focus-visible/thumb:opacity-100 group-active/thumb:translate-y-0 group-active/thumb:opacity-100 motion-reduce:transition-none";
|
|
45
|
-
usePaletteControl({ disabled: () => field.value.disabled });
|
|
46
|
-
return (_ctx, _cache) => {
|
|
47
|
-
return openBlock(), createBlock(unref(SliderRoot), mergeProps({
|
|
48
|
-
"model-value": [props.modelValue[0], props.modelValue[1]],
|
|
49
|
-
min: __props.min,
|
|
50
|
-
max: __props.max,
|
|
51
|
-
step: __props.step,
|
|
52
|
-
"min-steps-between-thumbs": Math.round(__props.minGap / __props.step),
|
|
53
|
-
disabled: unref(field).disabled,
|
|
54
|
-
class: unref(rootClass)
|
|
55
|
-
}, unref(rest), {
|
|
56
|
-
"data-dragging": unref(dragging) || void 0,
|
|
57
|
-
onPointerdown: unref(onPointerDown),
|
|
58
|
-
"onUpdate:modelValue": onUpdate,
|
|
59
|
-
onValueCommit: onCommit
|
|
60
|
-
}), {
|
|
61
|
-
default: withCtx(() => [
|
|
62
|
-
createVNode(_sfc_main$1),
|
|
63
|
-
(openBlock(), createElementBlock(Fragment, null, renderList([0, 1], (index) => {
|
|
64
|
-
return createVNode(unref(SliderThumb), {
|
|
65
|
-
key: index,
|
|
66
|
-
id: index === 0 ? unref(field).id : void 0,
|
|
67
|
-
"aria-label": __props.ariaLabels?.[index],
|
|
68
|
-
"aria-labelledby": __props.ariaLabels ? void 0 : unref(field).labelId,
|
|
69
|
-
"aria-describedby": unref(mergeDescribedBy)(unref(rest)["aria-describedby"], unref(field).describedBy),
|
|
70
|
-
class: normalizeClass(thumbClass)
|
|
71
|
-
}, {
|
|
72
|
-
default: withCtx(() => [
|
|
73
|
-
__props.format ? (openBlock(), createElementBlock("span", {
|
|
74
|
-
key: 0,
|
|
75
|
-
class: normalizeClass(labelClass)
|
|
76
|
-
}, toDisplayString(__props.format(props.modelValue[index])), 1)) : createCommentVNode("", true)
|
|
77
|
-
]),
|
|
78
|
-
_: 2
|
|
79
|
-
}, 1032, ["id", "aria-label", "aria-labelledby", "aria-describedby"]);
|
|
80
|
-
}), 64))
|
|
81
|
-
]),
|
|
82
|
-
_: 1
|
|
83
|
-
}, 16, ["model-value", "min", "max", "step", "min-steps-between-thumbs", "disabled", "class", "data-dragging", "onPointerdown"]);
|
|
84
|
-
};
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
export {
|
|
88
|
-
_sfc_main as _
|
|
89
|
-
};
|