@leavepulse/ui 0.78.1 → 0.78.2
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-DkvU6IBB.js} +1 -1
- 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 +1 -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/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,302 +0,0 @@
|
|
|
1
|
-
import { defineComponent, computed, ref, watch, useId, openBlock, createBlock, unref, normalizeStyle, normalizeClass, withCtx, createVNode, createElementBlock, createCommentVNode, createElementVNode, mergeProps, Transition, toDisplayString, withModifiers, createTextVNode, Fragment, renderList, nextTick } from "vue";
|
|
2
|
-
import { _ as _sfc_main$2 } from "./IconCloseButton-COZEsa9u.js";
|
|
3
|
-
import { CONTROL_SIZE } from "../components/controlSize.js";
|
|
4
|
-
import { usePaletteControl } from "../composables/usePaletteCommands.js";
|
|
5
|
-
import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxItem } from "reka-ui";
|
|
6
|
-
import { useAttrsField, mergeDescribedBy } from "../composables/useField.js";
|
|
7
|
-
import { useInputFilter } from "../composables/useInputFilter.js";
|
|
8
|
-
import { useLabels } from "../composables/useLpConfig.js";
|
|
9
|
-
import { COMBOBOX_PANEL, POPOVER_PANEL, OPTION_ITEM, optionStagger } from "../components/dropdown.js";
|
|
10
|
-
import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
|
|
11
|
-
import { _ as _sfc_main$3 } from "./OptionContent-CGb8QlHA.js";
|
|
12
|
-
import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
|
|
13
|
-
const _hoisted_1 = ["src"];
|
|
14
|
-
const _hoisted_2 = { class: "relative flex min-w-0 flex-1 self-stretch" };
|
|
15
|
-
const _hoisted_3 = {
|
|
16
|
-
key: 0,
|
|
17
|
-
class: "pointer-events-none absolute inset-0 flex min-w-0 items-center gap-1.5",
|
|
18
|
-
"aria-hidden": "true"
|
|
19
|
-
};
|
|
20
|
-
const _hoisted_4 = ["id"];
|
|
21
|
-
const _hoisted_5 = {
|
|
22
|
-
key: 0,
|
|
23
|
-
class: "px-3 py-4 text-center text-sm italic text-muted"
|
|
24
|
-
};
|
|
25
|
-
const __default__ = { inheritAttrs: false };
|
|
26
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
27
|
-
...__default__,
|
|
28
|
-
__name: "LpAutocomplete",
|
|
29
|
-
props: {
|
|
30
|
-
palette: { type: [Boolean, Object], default: void 0 },
|
|
31
|
-
modelValue: {},
|
|
32
|
-
options: {},
|
|
33
|
-
placeholder: {},
|
|
34
|
-
disabled: { type: Boolean },
|
|
35
|
-
clearable: { type: Boolean, default: false },
|
|
36
|
-
size: { default: "md" },
|
|
37
|
-
icon: {},
|
|
38
|
-
invalid: { type: Boolean },
|
|
39
|
-
emptyText: {},
|
|
40
|
-
loading: { type: Boolean, default: false },
|
|
41
|
-
loadingText: {},
|
|
42
|
-
filter: { type: Boolean, default: true },
|
|
43
|
-
minChars: { default: 1 },
|
|
44
|
-
pattern: {},
|
|
45
|
-
restrict: {},
|
|
46
|
-
selected: {},
|
|
47
|
-
labels: {}
|
|
48
|
-
},
|
|
49
|
-
emits: ["update:modelValue", "select"],
|
|
50
|
-
setup(__props, { emit: __emit }) {
|
|
51
|
-
const props = __props;
|
|
52
|
-
const emit = __emit;
|
|
53
|
-
const { isInvalid, onBeforeInput, onInput: filterInput, onCompositionEnd, onPaste } = useInputFilter({
|
|
54
|
-
pattern: () => props.pattern,
|
|
55
|
-
restrict: () => props.restrict
|
|
56
|
-
});
|
|
57
|
-
const text = computed({
|
|
58
|
-
get: () => props.modelValue ?? "",
|
|
59
|
-
set: (v) => emit("update:modelValue", v)
|
|
60
|
-
});
|
|
61
|
-
const inputAttrs = computed(() => {
|
|
62
|
-
const { class: _c, style: _s, ...rest } = attrs;
|
|
63
|
-
return rest;
|
|
64
|
-
});
|
|
65
|
-
const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid || isInvalid(props.modelValue), disabled: props.disabled }));
|
|
66
|
-
const isInvalidState = computed(() => field.value.invalid);
|
|
67
|
-
const labels = useLabels(
|
|
68
|
-
"autocomplete",
|
|
69
|
-
{ clear: "Clear", placeholder: "Type…", empty: "No suggestions", loading: "Searching…" },
|
|
70
|
-
() => props.labels
|
|
71
|
-
);
|
|
72
|
-
const placeholderText = computed(() => props.placeholder ?? labels.value.placeholder);
|
|
73
|
-
const items = computed(
|
|
74
|
-
() => (props.options ?? []).map(
|
|
75
|
-
(o) => typeof o === "string" ? { value: o } : o
|
|
76
|
-
)
|
|
77
|
-
);
|
|
78
|
-
const typing = ref(false);
|
|
79
|
-
const filtered = computed(() => {
|
|
80
|
-
const q = text.value.trim().toLowerCase();
|
|
81
|
-
if (!props.filter || !typing.value || !q) return items.value;
|
|
82
|
-
return items.value.filter((o) => {
|
|
83
|
-
const hay = `${o.label ?? o.value} ${o.description ?? ""}`.toLowerCase();
|
|
84
|
-
return hay.includes(q);
|
|
85
|
-
});
|
|
86
|
-
});
|
|
87
|
-
const open = ref(false);
|
|
88
|
-
const focused = ref(false);
|
|
89
|
-
const showSelected = computed(() => !!props.selected?.label && !focused.value);
|
|
90
|
-
const draft = ref(null);
|
|
91
|
-
const showImage = computed(() => !!props.selected?.image && (!focused.value || draft.value !== null));
|
|
92
|
-
watch(
|
|
93
|
-
() => props.selected?.label,
|
|
94
|
-
(label) => {
|
|
95
|
-
if (draft.value !== null) draft.value = label ?? null;
|
|
96
|
-
}
|
|
97
|
-
);
|
|
98
|
-
const selectedId = useId();
|
|
99
|
-
const describedBy = computed(
|
|
100
|
-
() => mergeDescribedBy(attrs["aria-describedby"], field.value.describedBy, showSelected.value ? selectedId : void 0)
|
|
101
|
-
);
|
|
102
|
-
const canOpen = computed(
|
|
103
|
-
() => text.value.length >= props.minChars && (props.loading || filtered.value.length > 0)
|
|
104
|
-
);
|
|
105
|
-
watch(canOpen, (can) => {
|
|
106
|
-
if (focused.value && can) open.value = true;
|
|
107
|
-
});
|
|
108
|
-
function onOpenChange(next) {
|
|
109
|
-
open.value = next && canOpen.value;
|
|
110
|
-
}
|
|
111
|
-
const hasValue = computed(() => (props.modelValue ?? "").length > 0);
|
|
112
|
-
const anchorSize = CONTROL_SIZE;
|
|
113
|
-
function onInput(event) {
|
|
114
|
-
filterInput(event);
|
|
115
|
-
typing.value = true;
|
|
116
|
-
draft.value = null;
|
|
117
|
-
text.value = event.target.value;
|
|
118
|
-
}
|
|
119
|
-
let pointerFocus = false;
|
|
120
|
-
function onPointerDown() {
|
|
121
|
-
if (!focused.value) pointerFocus = true;
|
|
122
|
-
}
|
|
123
|
-
function onFocus(event) {
|
|
124
|
-
typing.value = false;
|
|
125
|
-
focused.value = true;
|
|
126
|
-
const input = event.target;
|
|
127
|
-
if (props.selected?.label) {
|
|
128
|
-
draft.value = props.selected.label;
|
|
129
|
-
if (pointerFocus) input.addEventListener("mouseup", (e) => e.preventDefault(), { once: true });
|
|
130
|
-
void nextTick(() => input.select());
|
|
131
|
-
}
|
|
132
|
-
pointerFocus = false;
|
|
133
|
-
if (canOpen.value) open.value = true;
|
|
134
|
-
}
|
|
135
|
-
function onBlur() {
|
|
136
|
-
focused.value = false;
|
|
137
|
-
draft.value = null;
|
|
138
|
-
}
|
|
139
|
-
function choose(opt) {
|
|
140
|
-
typing.value = false;
|
|
141
|
-
draft.value = null;
|
|
142
|
-
emit("update:modelValue", opt.value);
|
|
143
|
-
emit("select", opt.value);
|
|
144
|
-
open.value = false;
|
|
145
|
-
}
|
|
146
|
-
function clear() {
|
|
147
|
-
if (field.value.disabled) return;
|
|
148
|
-
typing.value = false;
|
|
149
|
-
draft.value = null;
|
|
150
|
-
emit("update:modelValue", "");
|
|
151
|
-
open.value = false;
|
|
152
|
-
}
|
|
153
|
-
const portalTo = usePortalTarget();
|
|
154
|
-
const guardOutside = useOutsideGuard();
|
|
155
|
-
usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid });
|
|
156
|
-
return (_ctx, _cache) => {
|
|
157
|
-
return openBlock(), createBlock(unref(ComboboxRoot), {
|
|
158
|
-
open: open.value,
|
|
159
|
-
"ignore-filter": true,
|
|
160
|
-
"reset-search-term-on-blur": false,
|
|
161
|
-
"reset-search-term-on-select": false,
|
|
162
|
-
disabled: unref(field).disabled,
|
|
163
|
-
class: normalizeClass(["relative", unref(attrs).class]),
|
|
164
|
-
style: normalizeStyle(unref(attrs).style),
|
|
165
|
-
"onUpdate:open": onOpenChange
|
|
166
|
-
}, {
|
|
167
|
-
default: withCtx(() => [
|
|
168
|
-
createVNode(unref(ComboboxAnchor), {
|
|
169
|
-
"data-lp-ring-owner": "",
|
|
170
|
-
class: normalizeClass(["flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55", [
|
|
171
|
-
unref(anchorSize)[__props.size],
|
|
172
|
-
isInvalidState.value ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand"
|
|
173
|
-
]])
|
|
174
|
-
}, {
|
|
175
|
-
default: withCtx(() => [
|
|
176
|
-
__props.icon || __props.selected?.image ? (openBlock(), createElementBlock("span", {
|
|
177
|
-
key: 0,
|
|
178
|
-
class: normalizeClass(["relative grid shrink-0 place-items-center", __props.selected === void 0 ? "size-4" : "size-5"])
|
|
179
|
-
}, [
|
|
180
|
-
__props.icon ? (openBlock(), createBlock(_sfc_main$1, {
|
|
181
|
-
key: 0,
|
|
182
|
-
name: __props.icon,
|
|
183
|
-
size: 16,
|
|
184
|
-
class: normalizeClass(["col-start-1 row-start-1 text-muted transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none", showImage.value ? "scale-75 opacity-0" : "opacity-100"])
|
|
185
|
-
}, null, 8, ["name", "class"])) : createCommentVNode("", true),
|
|
186
|
-
__props.selected?.image ? (openBlock(), createElementBlock("img", {
|
|
187
|
-
key: 1,
|
|
188
|
-
src: __props.selected.image,
|
|
189
|
-
alt: "",
|
|
190
|
-
class: normalizeClass(["col-start-1 row-start-1 size-5 rounded-full object-cover transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none", showImage.value ? "opacity-100" : "scale-75 opacity-0"])
|
|
191
|
-
}, null, 10, _hoisted_1)) : createCommentVNode("", true)
|
|
192
|
-
], 2)) : createCommentVNode("", true),
|
|
193
|
-
createElementVNode("div", _hoisted_2, [
|
|
194
|
-
createVNode(unref(ComboboxInput), mergeProps(inputAttrs.value, {
|
|
195
|
-
id: unref(field).id,
|
|
196
|
-
"model-value": draft.value ?? text.value,
|
|
197
|
-
placeholder: placeholderText.value,
|
|
198
|
-
disabled: unref(field).disabled,
|
|
199
|
-
required: unref(field).required || void 0,
|
|
200
|
-
"aria-invalid": isInvalidState.value || void 0,
|
|
201
|
-
"aria-describedby": describedBy.value,
|
|
202
|
-
class: ["lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted", showSelected.value && "text-transparent placeholder:text-transparent"],
|
|
203
|
-
onBeforeinput: unref(onBeforeInput),
|
|
204
|
-
onPaste: unref(onPaste),
|
|
205
|
-
onCompositionend: unref(onCompositionEnd),
|
|
206
|
-
onInput,
|
|
207
|
-
onPointerdown: onPointerDown,
|
|
208
|
-
onFocus,
|
|
209
|
-
onBlur
|
|
210
|
-
}), null, 16, ["id", "model-value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby", "class", "onBeforeinput", "onPaste", "onCompositionend"]),
|
|
211
|
-
createVNode(Transition, {
|
|
212
|
-
"enter-active-class": "transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none",
|
|
213
|
-
"leave-active-class": "transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none",
|
|
214
|
-
"enter-from-class": "opacity-0",
|
|
215
|
-
"leave-to-class": "opacity-0"
|
|
216
|
-
}, {
|
|
217
|
-
default: withCtx(() => [
|
|
218
|
-
__props.selected?.label ? (openBlock(), createElementBlock("span", _hoisted_3, [
|
|
219
|
-
createElementVNode("span", {
|
|
220
|
-
id: unref(selectedId),
|
|
221
|
-
class: "sr-only"
|
|
222
|
-
}, toDisplayString(__props.selected.hint ? `${__props.selected.label}, ${__props.selected.hint}` : __props.selected.label), 9, _hoisted_4),
|
|
223
|
-
createElementVNode("span", {
|
|
224
|
-
class: normalizeClass(["max-w-full shrink-0 truncate", showSelected.value ? "" : "invisible"])
|
|
225
|
-
}, toDisplayString(__props.selected.label), 3),
|
|
226
|
-
__props.selected.hint ? (openBlock(), createElementBlock("span", {
|
|
227
|
-
key: 0,
|
|
228
|
-
class: normalizeClass(["min-w-0 truncate text-sm text-muted transition-[opacity,translate] duration-[var(--duration-fast)] motion-reduce:transition-none", showSelected.value ? "opacity-100" : "-translate-x-1 opacity-0"])
|
|
229
|
-
}, toDisplayString(__props.selected.hint), 3)) : createCommentVNode("", true)
|
|
230
|
-
])) : createCommentVNode("", true)
|
|
231
|
-
]),
|
|
232
|
-
_: 1
|
|
233
|
-
})
|
|
234
|
-
]),
|
|
235
|
-
__props.clearable && hasValue.value && !unref(field).disabled ? (openBlock(), createBlock(_sfc_main$2, {
|
|
236
|
-
key: 1,
|
|
237
|
-
inline: "",
|
|
238
|
-
label: unref(labels).clear,
|
|
239
|
-
onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
|
|
240
|
-
}, ["prevent"])),
|
|
241
|
-
onClick: clear
|
|
242
|
-
}, null, 8, ["label"])) : createCommentVNode("", true)
|
|
243
|
-
]),
|
|
244
|
-
_: 1
|
|
245
|
-
}, 8, ["class"]),
|
|
246
|
-
createVNode(unref(ComboboxPortal), { to: unref(portalTo) }, {
|
|
247
|
-
default: withCtx(() => [
|
|
248
|
-
createVNode(unref(ComboboxContent), mergeProps({
|
|
249
|
-
onInteractOutside: unref(guardOutside),
|
|
250
|
-
onEscapeKeyDown: unref(guardOutside)
|
|
251
|
-
}, unref(COMBOBOX_PANEL), {
|
|
252
|
-
class: [unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden"],
|
|
253
|
-
onOpenAutoFocus: _cache[1] || (_cache[1] = withModifiers(() => {
|
|
254
|
-
}, ["prevent"])),
|
|
255
|
-
onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {
|
|
256
|
-
}, ["prevent"]))
|
|
257
|
-
}), {
|
|
258
|
-
default: withCtx(() => [
|
|
259
|
-
createVNode(unref(ComboboxViewport), { class: "max-h-72 overflow-y-auto p-1" }, {
|
|
260
|
-
default: withCtx(() => [
|
|
261
|
-
__props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(__props.loadingText ?? unref(labels).loading), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
|
|
262
|
-
key: 1,
|
|
263
|
-
class: "px-3 py-4 text-center text-sm italic text-muted"
|
|
264
|
-
}, {
|
|
265
|
-
default: withCtx(() => [
|
|
266
|
-
createTextVNode(toDisplayString(__props.emptyText ?? unref(labels).empty), 1)
|
|
267
|
-
]),
|
|
268
|
-
_: 1
|
|
269
|
-
})),
|
|
270
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(filtered.value, (opt, i) => {
|
|
271
|
-
return openBlock(), createBlock(unref(ComboboxItem), {
|
|
272
|
-
key: opt.value,
|
|
273
|
-
value: opt.value,
|
|
274
|
-
disabled: opt.disabled,
|
|
275
|
-
style: normalizeStyle(unref(optionStagger)(i)),
|
|
276
|
-
class: normalizeClass([unref(OPTION_ITEM), "justify-between data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"]),
|
|
277
|
-
onSelect: withModifiers(($event) => choose(opt), ["prevent"])
|
|
278
|
-
}, {
|
|
279
|
-
default: withCtx(() => [
|
|
280
|
-
createVNode(_sfc_main$3, { option: opt }, null, 8, ["option"])
|
|
281
|
-
]),
|
|
282
|
-
_: 2
|
|
283
|
-
}, 1032, ["value", "disabled", "style", "class", "onSelect"]);
|
|
284
|
-
}), 128))
|
|
285
|
-
]),
|
|
286
|
-
_: 1
|
|
287
|
-
})
|
|
288
|
-
]),
|
|
289
|
-
_: 1
|
|
290
|
-
}, 16, ["onInteractOutside", "onEscapeKeyDown", "class"])
|
|
291
|
-
]),
|
|
292
|
-
_: 1
|
|
293
|
-
}, 8, ["to"])
|
|
294
|
-
]),
|
|
295
|
-
_: 1
|
|
296
|
-
}, 8, ["open", "disabled", "class", "style"]);
|
|
297
|
-
};
|
|
298
|
-
}
|
|
299
|
-
});
|
|
300
|
-
export {
|
|
301
|
-
_sfc_main as _
|
|
302
|
-
};
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
import { defineComponent, computed, useId, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, normalizeClass, createBlock, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createElementVNode } from "vue";
|
|
2
|
-
import { usePaletteControl } from "../composables/usePaletteCommands.js";
|
|
3
|
-
import { CheckboxRoot, CheckboxIndicator } from "reka-ui";
|
|
4
|
-
import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
|
|
5
|
-
import { _ as _sfc_main$2 } from "./LpLoader-Bf1yZwaU.js";
|
|
6
|
-
import { useFieldControl, isAttrOn, mergeDescribedBy } from "../composables/useField.js";
|
|
7
|
-
import { useOptimisticToggle } from "../composables/useOptimisticToggle.js";
|
|
8
|
-
import { useMergedAttrs } from "../composables/useMergedClass.js";
|
|
9
|
-
const _hoisted_1 = {
|
|
10
|
-
key: 0,
|
|
11
|
-
class: "flex min-w-0 flex-col"
|
|
12
|
-
};
|
|
13
|
-
const __default__ = { inheritAttrs: false };
|
|
14
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
15
|
-
...__default__,
|
|
16
|
-
__name: "LpCheckbox",
|
|
17
|
-
props: {
|
|
18
|
-
palette: { type: [Boolean, Object], default: void 0 },
|
|
19
|
-
modelValue: { type: Boolean },
|
|
20
|
-
indeterminate: { type: Boolean },
|
|
21
|
-
disabled: { type: Boolean },
|
|
22
|
-
label: {},
|
|
23
|
-
description: {},
|
|
24
|
-
id: {},
|
|
25
|
-
name: {},
|
|
26
|
-
action: {}
|
|
27
|
-
},
|
|
28
|
-
emits: ["update:modelValue", "update:indeterminate", "change", "done", "error"],
|
|
29
|
-
setup(__props, { emit: __emit }) {
|
|
30
|
-
const props = __props;
|
|
31
|
-
const emit = __emit;
|
|
32
|
-
let wasMixed = false;
|
|
33
|
-
const { pending, set } = useOptimisticToggle(() => props.action, emit, () => {
|
|
34
|
-
if (wasMixed) emit("update:indeterminate", true);
|
|
35
|
-
});
|
|
36
|
-
function onUpdate(v) {
|
|
37
|
-
const checked = v === true;
|
|
38
|
-
if (pending.value) return;
|
|
39
|
-
wasMixed = !!props.indeterminate;
|
|
40
|
-
if (wasMixed) emit("update:indeterminate", false);
|
|
41
|
-
void set(checked);
|
|
42
|
-
emit("change", checked);
|
|
43
|
-
}
|
|
44
|
-
const { class: rootClass, attrs: rest } = useMergedAttrs(
|
|
45
|
-
() => [
|
|
46
|
-
"group/check inline-flex cursor-pointer gap-2 text-sm text-ink",
|
|
47
|
-
props.description ? "items-start" : "items-center"
|
|
48
|
-
].join(" ")
|
|
49
|
-
);
|
|
50
|
-
const FOCUS_LISTENER = /^on(Focus|Blur)/;
|
|
51
|
-
const LISTENER = /^on[A-Z]/;
|
|
52
|
-
const parts = computed(() => {
|
|
53
|
-
const label = {};
|
|
54
|
-
const control = {};
|
|
55
|
-
for (const [key, value] of Object.entries(rest.value)) {
|
|
56
|
-
const onLabel = key === "style" || LISTENER.test(key) && !FOCUS_LISTENER.test(key);
|
|
57
|
-
if (onLabel) label[key] = value;
|
|
58
|
-
else control[key] = value;
|
|
59
|
-
}
|
|
60
|
-
return { label, control };
|
|
61
|
-
});
|
|
62
|
-
const field = useFieldControl(() => ({
|
|
63
|
-
wrapped: false,
|
|
64
|
-
id: props.id,
|
|
65
|
-
required: isAttrOn(rest.value.required),
|
|
66
|
-
disabled: props.disabled
|
|
67
|
-
}));
|
|
68
|
-
const descriptionId = `${useId()}-description`;
|
|
69
|
-
const describedBy = computed(
|
|
70
|
-
() => mergeDescribedBy(rest.value["aria-describedby"], props.description ? descriptionId : void 0, field.value.describedBy)
|
|
71
|
-
);
|
|
72
|
-
usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled || pending.value, editorProps: () => ({ action: void 0, "onUpdate:modelValue": onUpdate, onChange: void 0 }) });
|
|
73
|
-
return (_ctx, _cache) => {
|
|
74
|
-
return openBlock(), createElementBlock("label", mergeProps({ class: unref(rootClass) }, parts.value.label), [
|
|
75
|
-
createVNode(unref(CheckboxRoot), mergeProps(parts.value.control, {
|
|
76
|
-
id: unref(field).id,
|
|
77
|
-
name: __props.name,
|
|
78
|
-
"model-value": __props.indeterminate ? "indeterminate" : __props.modelValue,
|
|
79
|
-
disabled: unref(field).disabled,
|
|
80
|
-
required: unref(field).required,
|
|
81
|
-
"aria-describedby": describedBy.value,
|
|
82
|
-
"aria-busy": unref(pending) || void 0,
|
|
83
|
-
class: [__props.description ? "mt-px" : "", "relative flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border border-line-strong bg-surface-soft outline-none transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:not-data-[state=indeterminate]:group-hover/check:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"],
|
|
84
|
-
"onUpdate:modelValue": onUpdate
|
|
85
|
-
}), {
|
|
86
|
-
default: withCtx(() => [
|
|
87
|
-
createVNode(unref(CheckboxIndicator), { class: "flex items-center justify-center text-ink-inverse data-[state=checked]:animate-[indicator-in_140ms_var(--ease-emphasized)] data-[state=indeterminate]:animate-[indicator-in_140ms_var(--ease-emphasized)]" }, {
|
|
88
|
-
default: withCtx(() => [
|
|
89
|
-
createVNode(_sfc_main$1, {
|
|
90
|
-
name: __props.indeterminate ? "lucide:minus" : "lucide:check",
|
|
91
|
-
size: 13,
|
|
92
|
-
class: normalizeClass(unref(pending) && "opacity-0")
|
|
93
|
-
}, null, 8, ["name", "class"])
|
|
94
|
-
]),
|
|
95
|
-
_: 1
|
|
96
|
-
}),
|
|
97
|
-
unref(pending) ? (openBlock(), createBlock(_sfc_main$2, {
|
|
98
|
-
key: 0,
|
|
99
|
-
size: "inline",
|
|
100
|
-
delay: 0,
|
|
101
|
-
"aria-hidden": "true",
|
|
102
|
-
class: normalizeClass(["absolute text-[12px]", __props.modelValue ? "text-ink-inverse" : "text-muted"])
|
|
103
|
-
}, null, 8, ["class"])) : createCommentVNode("", true)
|
|
104
|
-
]),
|
|
105
|
-
_: 1
|
|
106
|
-
}, 16, ["id", "name", "model-value", "disabled", "required", "aria-describedby", "aria-busy", "class"]),
|
|
107
|
-
__props.description ? (openBlock(), createElementBlock("span", _hoisted_1, [
|
|
108
|
-
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
109
|
-
createTextVNode(toDisplayString(__props.label), 1)
|
|
110
|
-
]),
|
|
111
|
-
createElementVNode("span", {
|
|
112
|
-
id: descriptionId,
|
|
113
|
-
class: "text-xs text-muted"
|
|
114
|
-
}, toDisplayString(__props.description), 1)
|
|
115
|
-
])) : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
|
|
116
|
-
createTextVNode(toDisplayString(__props.label), 1)
|
|
117
|
-
])
|
|
118
|
-
], 16);
|
|
119
|
-
};
|
|
120
|
-
}
|
|
121
|
-
});
|
|
122
|
-
export {
|
|
123
|
-
_sfc_main as _
|
|
124
|
-
};
|