@leavepulse/ui 0.12.0 → 0.14.4
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/assets/LpCommandPalette-D315B47-.css +16 -0
- package/dist/chunks/LayoutCanvas-Dd20boUG.js +50 -0
- package/dist/chunks/LayoutNode-DGpZA9LX.js +225 -0
- package/dist/chunks/LpAlert-BAYHDSS1.js +69 -0
- package/dist/chunks/LpAppShell-C22642JK.js +170 -0
- package/dist/chunks/LpAutocomplete-B9uoCs4t.js +196 -0
- package/dist/chunks/LpAvatar-B1Ez0ZAx.js +88 -0
- package/dist/chunks/LpBadge-CXzBPnwO.js +42 -0
- package/dist/chunks/LpBreadcrumbs-B7Aqatzw.js +42 -0
- package/dist/chunks/LpButton-5VXXCjwF.js +101 -0
- package/dist/chunks/LpCalendar-B7ZL0ty3.js +150 -0
- package/dist/chunks/LpCard-1yvWT9fx.js +66 -0
- package/dist/chunks/LpCheckbox-BO0zuuPh.js +55 -0
- package/dist/chunks/LpCodeBlock-CSiOSPs8.js +253 -0
- package/dist/chunks/LpConfirmDialog-CnHtHWHm.js +62 -0
- package/dist/chunks/LpContextMenu-D0mzXqA7.js +151 -0
- package/dist/chunks/LpDatePicker-dY2q4dr4.js +122 -0
- package/dist/chunks/LpDisclosure-DP6yfgfM.js +76 -0
- package/dist/chunks/LpDivider-CUX46KR0.js +43 -0
- package/dist/chunks/LpDrawer-CBNVhkg0.js +310 -0
- package/dist/chunks/LpDropdownMenu-DJpoqRCb.js +65 -0
- package/dist/chunks/LpEmptyState-CrfyRJUG.js +47 -0
- package/dist/chunks/LpFormField-Bn-ZwC6z.js +47 -0
- package/dist/chunks/LpIcon-CCnX5_2j.js +41 -0
- package/dist/chunks/LpInfraNode-C_PHcthC.js +99 -0
- package/dist/chunks/LpInput-BauZRyzm.js +136 -0
- package/dist/chunks/LpLaneNode-HtnQf2FF.js +33 -0
- package/dist/chunks/LpLink-DHwOEp4e.js +36 -0
- package/dist/chunks/LpLogViewer-CDBjhXl6.js +469 -0
- package/dist/chunks/LpModal-D17Bocq7.js +128 -0
- package/dist/chunks/LpNotificationBell-Bm51SkgV.js +232 -0
- package/dist/chunks/LpNumberField-C5ar-OwE.js +55 -0
- package/dist/chunks/LpOtpInput-DqaT0Z75.js +65 -0
- package/dist/chunks/LpPagination-CeGuNe_q.js +132 -0
- package/dist/chunks/LpPasswordInput-DIHFw4u0.js +64 -0
- package/dist/chunks/LpPhoneInput-LQvVFGMw.js +199 -0
- package/dist/chunks/LpPopover-8268UmlC.js +54 -0
- package/dist/chunks/LpProgress-BhI0IbjC.js +37 -0
- package/dist/chunks/LpRadio-CL-pI0_O.js +39 -0
- package/dist/chunks/LpRadioGroup-B4yDTmi6.js +52 -0
- package/dist/chunks/LpScrollArea-CcHul_XS.js +67 -0
- package/dist/chunks/LpSegmented-BmpanyAo.js +74 -0
- package/dist/chunks/LpSelect-DznhPEWX.js +222 -0
- package/dist/chunks/LpServiceNode-Dc-Ut5RS.js +51 -0
- package/dist/chunks/LpSidebar-CTUdtX7W.js +152 -0
- package/dist/chunks/LpSidebarNav-BRwovIc8.js +126 -0
- package/dist/chunks/LpSkeleton-eSFIo4kD.js +22 -0
- package/dist/chunks/LpSlider-B1SF3pRV.js +53 -0
- package/dist/chunks/LpStat-CdbEFOvn.js +88 -0
- package/dist/chunks/LpStepper-5dFTrW21.js +53 -0
- package/dist/chunks/LpSwitch-v6fnccSM.js +28 -0
- package/dist/chunks/LpTable-PHE6UKor.js +229 -0
- package/dist/chunks/LpTableOfContents-CjvxPMpU.js +155 -0
- package/dist/chunks/LpTabs-D7aTVPOb.js +115 -0
- package/dist/chunks/LpTextarea-CRAkhemZ.js +44 -0
- package/dist/chunks/LpThemeSwitcher-BgWwfkxs.js +601 -0
- package/dist/chunks/LpTilt-DuyKbpkA.js +49 -0
- package/dist/chunks/LpToaster-gDB1EaU3.js +196 -0
- package/dist/chunks/LpTooltip-CIwoRCag.js +49 -0
- package/dist/chunks/LpTopologyCanvas-DVwyQfKa.js +237 -0
- package/dist/chunks/LpUptimeBar-CB366k0O.js +127 -0
- package/dist/component-names.d.ts +1 -1
- package/dist/components/LayoutCanvas.vue.js +4 -0
- package/dist/components/LayoutNode.vue.js +4 -0
- package/dist/components/LpAlert.vue.js +4 -0
- package/dist/components/LpAppShell.vue.js +4 -0
- package/dist/components/LpAutocomplete.vue.js +4 -0
- package/dist/components/LpAvatar.vue.js +4 -0
- package/dist/components/LpBadge.vue.js +4 -0
- package/dist/components/LpBreadcrumbs.vue.js +4 -0
- package/dist/components/LpButton.vue.js +4 -0
- package/dist/components/LpCalendar.vue.js +4 -0
- package/dist/components/LpCard.vue.js +4 -0
- package/dist/components/LpCheckbox.vue.js +4 -0
- package/dist/components/LpCodeBlock.vue.js +4 -0
- package/dist/components/LpCommandPalette.vue.js +310 -0
- package/dist/components/LpConfirmDialog.vue.js +4 -0
- package/dist/components/LpContextMenu.vue.d.ts +7 -0
- package/dist/components/LpContextMenu.vue.js +4 -0
- package/dist/components/LpDatePicker.vue.js +4 -0
- package/dist/components/LpDisclosure.vue.js +4 -0
- package/dist/components/LpDivider.vue.js +4 -0
- package/dist/components/LpDrawer.vue.d.ts +8 -0
- package/dist/components/LpDrawer.vue.js +4 -0
- package/dist/components/LpDropdownMenu.vue.js +4 -0
- package/dist/components/LpEmptyState.vue.js +4 -0
- package/dist/components/LpFormField.vue.js +4 -0
- package/dist/components/LpIcon.vue.js +4 -0
- package/dist/components/LpInfraNode.vue.js +4 -0
- package/dist/components/LpInput.vue.js +4 -0
- package/dist/components/LpLaneNode.vue.js +4 -0
- package/dist/components/LpLink.vue.js +4 -0
- package/dist/components/LpLogViewer.vue.js +4 -0
- package/dist/components/LpModal.vue.js +4 -0
- package/dist/components/LpNotificationBell.vue.js +4 -0
- package/dist/components/LpNumberField.vue.js +4 -0
- package/dist/components/LpOtpInput.vue.js +4 -0
- package/dist/components/LpPagination.vue.js +4 -0
- package/dist/components/LpPasswordInput.vue.js +4 -0
- package/dist/components/LpPhoneInput.vue.js +4 -0
- package/dist/components/LpPopover.vue.js +4 -0
- package/dist/components/LpProgress.vue.js +4 -0
- package/dist/components/LpRadio.vue.js +4 -0
- package/dist/components/LpRadioGroup.vue.js +4 -0
- package/dist/components/LpScrollArea.vue.js +4 -0
- package/dist/components/LpSegmented.vue.js +4 -0
- package/dist/components/LpSelect.vue.d.ts +2 -0
- package/dist/components/LpSelect.vue.js +4 -0
- package/dist/components/LpServiceNode.vue.js +4 -0
- package/dist/components/LpSidebar.vue.js +4 -0
- package/dist/components/LpSidebarNav.vue.js +4 -0
- package/dist/components/LpSkeleton.vue.js +4 -0
- package/dist/components/LpSlider.vue.js +4 -0
- package/dist/components/LpStat.vue.js +4 -0
- package/dist/components/LpStepper.vue.js +4 -0
- package/dist/components/LpSwitch.vue.js +4 -0
- package/dist/components/LpTable.vue.js +4 -0
- package/dist/components/LpTableOfContents.vue.js +4 -0
- package/dist/components/LpTabs.vue.d.ts +4 -2
- package/dist/components/LpTabs.vue.js +4 -0
- package/dist/components/LpTextarea.vue.js +4 -0
- package/dist/components/LpThemeSwitcher.vue.js +4 -0
- package/dist/components/LpTilt.vue.d.ts +31 -0
- package/dist/components/LpTilt.vue.js +4 -0
- package/dist/components/LpToaster.vue.js +4 -0
- package/dist/components/LpTooltip.vue.js +4 -0
- package/dist/components/LpTopologyCanvas.vue.js +4 -0
- package/dist/components/LpUptimeBar.vue.js +4 -0
- package/dist/components/codeHighlight.js +230 -0
- package/dist/{countries-data-9rgqJWHo.js → components/countries-data.js} +2 -2
- package/dist/components/countries.js +38 -0
- package/dist/components/dropdown.js +14 -0
- package/dist/components/sidebar.js +1 -0
- package/dist/composables/useInputFilter.js +44 -0
- package/dist/composables/usePillTransition.js +11 -0
- package/dist/composables/useTilt.d.ts +23 -0
- package/dist/composables/useTilt.js +57 -0
- package/dist/composables/useToast.d.ts +2 -0
- package/dist/composables/useToast.js +49 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +197 -17596
- package/dist/layout/registry.js +10 -0
- package/dist/layout/tree.js +192 -0
- package/dist/layout/useLayout.js +61 -0
- package/package.json +5 -3
- package/src/component-names.ts +1 -0
- package/src/components/LpContextMenu.vue +14 -4
- package/src/components/LpDrawer.vue +29 -1
- package/src/components/LpLogViewer.vue +161 -31
- package/src/components/LpSelect.vue +0 -0
- package/src/components/LpSidebar.vue +5 -2
- package/src/components/LpTabs.vue +19 -6
- package/src/components/LpThemeSwitcher.vue +13 -2
- package/src/components/LpTilt.vue +61 -0
- package/src/components/LpToaster.vue +11 -4
- package/src/composables/useTilt.ts +103 -0
- package/src/composables/useToast.ts +2 -0
- package/src/index.ts +3 -0
- package/src/nuxt.ts +10 -1
- package/dist/index.css +0 -1
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
import { defineComponent, computed, ref, watch, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createCommentVNode, createElementBlock, withModifiers, toDisplayString, createTextVNode, Fragment, renderList, normalizeStyle, createElementVNode } from "vue";
|
|
2
|
+
import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxItem } from "reka-ui";
|
|
3
|
+
import { useInputFilter } from "../composables/useInputFilter.js";
|
|
4
|
+
import { CLOSE_ICON, POPOVER_PANEL, OPTION_ITEM } from "../components/dropdown.js";
|
|
5
|
+
import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
|
|
6
|
+
const _hoisted_1 = {
|
|
7
|
+
key: 0,
|
|
8
|
+
class: "px-3 py-4 text-center text-sm italic text-muted"
|
|
9
|
+
};
|
|
10
|
+
const _hoisted_2 = { class: "flex min-w-0 flex-col" };
|
|
11
|
+
const _hoisted_3 = { class: "truncate" };
|
|
12
|
+
const _hoisted_4 = {
|
|
13
|
+
key: 0,
|
|
14
|
+
class: "truncate text-xs text-muted"
|
|
15
|
+
};
|
|
16
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
17
|
+
__name: "LpAutocomplete",
|
|
18
|
+
props: {
|
|
19
|
+
modelValue: {},
|
|
20
|
+
options: {},
|
|
21
|
+
placeholder: { default: "Type…" },
|
|
22
|
+
disabled: { type: Boolean },
|
|
23
|
+
clearable: { type: Boolean, default: false },
|
|
24
|
+
size: { default: "md" },
|
|
25
|
+
icon: {},
|
|
26
|
+
invalid: { type: Boolean },
|
|
27
|
+
emptyText: { default: "No suggestions" },
|
|
28
|
+
loading: { type: Boolean, default: false },
|
|
29
|
+
loadingText: { default: "Searching…" },
|
|
30
|
+
filter: { type: Boolean, default: true },
|
|
31
|
+
minChars: { default: 1 },
|
|
32
|
+
pattern: {},
|
|
33
|
+
restrict: {}
|
|
34
|
+
},
|
|
35
|
+
emits: ["update:modelValue", "select"],
|
|
36
|
+
setup(__props, { emit: __emit }) {
|
|
37
|
+
const props = __props;
|
|
38
|
+
const emit = __emit;
|
|
39
|
+
const { isInvalid, onBeforeInput, onPaste } = useInputFilter({
|
|
40
|
+
pattern: () => props.pattern,
|
|
41
|
+
restrict: () => props.restrict
|
|
42
|
+
});
|
|
43
|
+
const text = computed({
|
|
44
|
+
get: () => props.modelValue ?? "",
|
|
45
|
+
set: (v) => emit("update:modelValue", v)
|
|
46
|
+
});
|
|
47
|
+
const isInvalidState = computed(() => props.invalid || isInvalid(props.modelValue));
|
|
48
|
+
const items = computed(
|
|
49
|
+
() => (props.options ?? []).map(
|
|
50
|
+
(o) => typeof o === "string" ? { value: o } : o
|
|
51
|
+
)
|
|
52
|
+
);
|
|
53
|
+
const filtered = computed(() => {
|
|
54
|
+
const q = text.value.trim().toLowerCase();
|
|
55
|
+
if (!props.filter || !q) return items.value;
|
|
56
|
+
return items.value.filter((o) => {
|
|
57
|
+
const hay = `${o.label ?? o.value} ${o.description ?? ""}`.toLowerCase();
|
|
58
|
+
return hay.includes(q);
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
const open = ref(false);
|
|
62
|
+
const focused = ref(false);
|
|
63
|
+
const canOpen = computed(
|
|
64
|
+
() => text.value.length >= props.minChars && (props.loading || filtered.value.length > 0)
|
|
65
|
+
);
|
|
66
|
+
watch(canOpen, (can) => {
|
|
67
|
+
if (focused.value && can) open.value = true;
|
|
68
|
+
});
|
|
69
|
+
const hasValue = computed(() => (props.modelValue ?? "").length > 0);
|
|
70
|
+
const anchorSize = {
|
|
71
|
+
sm: "h-(--size-control-sm) text-xs",
|
|
72
|
+
md: "h-(--size-control-md) text-sm",
|
|
73
|
+
lg: "h-(--size-control-lg) text-sm"
|
|
74
|
+
};
|
|
75
|
+
function onFocus() {
|
|
76
|
+
focused.value = true;
|
|
77
|
+
if (canOpen.value) open.value = true;
|
|
78
|
+
}
|
|
79
|
+
function choose(opt) {
|
|
80
|
+
emit("update:modelValue", opt.value);
|
|
81
|
+
emit("select", opt.value);
|
|
82
|
+
open.value = false;
|
|
83
|
+
}
|
|
84
|
+
function clear() {
|
|
85
|
+
emit("update:modelValue", "");
|
|
86
|
+
open.value = false;
|
|
87
|
+
}
|
|
88
|
+
return (_ctx, _cache) => {
|
|
89
|
+
return openBlock(), createBlock(unref(ComboboxRoot), {
|
|
90
|
+
open: open.value,
|
|
91
|
+
"onUpdate:open": _cache[3] || (_cache[3] = ($event) => open.value = $event),
|
|
92
|
+
"ignore-filter": true,
|
|
93
|
+
"reset-search-term-on-blur": false,
|
|
94
|
+
"reset-search-term-on-select": false,
|
|
95
|
+
disabled: __props.disabled,
|
|
96
|
+
class: "relative"
|
|
97
|
+
}, {
|
|
98
|
+
default: withCtx(() => [
|
|
99
|
+
createVNode(unref(ComboboxAnchor), {
|
|
100
|
+
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", [
|
|
101
|
+
anchorSize[__props.size],
|
|
102
|
+
isInvalidState.value ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand"
|
|
103
|
+
]])
|
|
104
|
+
}, {
|
|
105
|
+
default: withCtx(() => [
|
|
106
|
+
__props.icon ? (openBlock(), createBlock(_sfc_main$1, {
|
|
107
|
+
key: 0,
|
|
108
|
+
name: __props.icon,
|
|
109
|
+
size: 16,
|
|
110
|
+
class: "shrink-0 text-muted"
|
|
111
|
+
}, null, 8, ["name"])) : createCommentVNode("", true),
|
|
112
|
+
createVNode(unref(ComboboxInput), {
|
|
113
|
+
"model-value": text.value,
|
|
114
|
+
placeholder: __props.placeholder,
|
|
115
|
+
disabled: __props.disabled,
|
|
116
|
+
"aria-invalid": isInvalidState.value || void 0,
|
|
117
|
+
"auto-focus": "",
|
|
118
|
+
class: "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted",
|
|
119
|
+
onBeforeinput: unref(onBeforeInput),
|
|
120
|
+
onPaste: unref(onPaste),
|
|
121
|
+
onInput: _cache[0] || (_cache[0] = ($event) => text.value = $event.target.value),
|
|
122
|
+
onFocus,
|
|
123
|
+
onBlur: _cache[1] || (_cache[1] = ($event) => focused.value = false)
|
|
124
|
+
}, null, 8, ["model-value", "placeholder", "disabled", "aria-invalid", "onBeforeinput", "onPaste"]),
|
|
125
|
+
__props.clearable && hasValue.value ? (openBlock(), createElementBlock("button", {
|
|
126
|
+
key: 1,
|
|
127
|
+
type: "button",
|
|
128
|
+
class: "group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink",
|
|
129
|
+
"aria-label": "Clear",
|
|
130
|
+
onPointerdown: withModifiers(clear, ["prevent"])
|
|
131
|
+
}, [
|
|
132
|
+
createVNode(_sfc_main$1, {
|
|
133
|
+
name: "lucide:x",
|
|
134
|
+
size: 16,
|
|
135
|
+
class: normalizeClass(unref(CLOSE_ICON))
|
|
136
|
+
}, null, 8, ["class"])
|
|
137
|
+
], 32)) : createCommentVNode("", true)
|
|
138
|
+
]),
|
|
139
|
+
_: 1
|
|
140
|
+
}, 8, ["class"]),
|
|
141
|
+
createVNode(unref(ComboboxPortal), null, {
|
|
142
|
+
default: withCtx(() => [
|
|
143
|
+
createVNode(unref(ComboboxContent), {
|
|
144
|
+
position: "popper",
|
|
145
|
+
"side-offset": 6,
|
|
146
|
+
class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden"]),
|
|
147
|
+
onOpenAutoFocus: _cache[2] || (_cache[2] = withModifiers(() => {
|
|
148
|
+
}, ["prevent"]))
|
|
149
|
+
}, {
|
|
150
|
+
default: withCtx(() => [
|
|
151
|
+
createVNode(unref(ComboboxViewport), { class: "max-h-72 overflow-y-auto p-1" }, {
|
|
152
|
+
default: withCtx(() => [
|
|
153
|
+
__props.loading ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(__props.loadingText), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
|
|
154
|
+
key: 1,
|
|
155
|
+
class: "px-3 py-4 text-center text-sm italic text-muted"
|
|
156
|
+
}, {
|
|
157
|
+
default: withCtx(() => [
|
|
158
|
+
createTextVNode(toDisplayString(__props.emptyText), 1)
|
|
159
|
+
]),
|
|
160
|
+
_: 1
|
|
161
|
+
})),
|
|
162
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(filtered.value, (opt, i) => {
|
|
163
|
+
return openBlock(), createBlock(unref(ComboboxItem), {
|
|
164
|
+
key: opt.value,
|
|
165
|
+
value: opt.value,
|
|
166
|
+
style: normalizeStyle({ animationDelay: `${Math.min(i, 12) * 22}ms` }),
|
|
167
|
+
class: normalizeClass([unref(OPTION_ITEM), "justify-between"]),
|
|
168
|
+
onSelect: withModifiers(($event) => choose(opt), ["prevent"])
|
|
169
|
+
}, {
|
|
170
|
+
default: withCtx(() => [
|
|
171
|
+
createElementVNode("span", _hoisted_2, [
|
|
172
|
+
createElementVNode("span", _hoisted_3, toDisplayString(opt.label ?? opt.value), 1),
|
|
173
|
+
opt.description ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(opt.description), 1)) : createCommentVNode("", true)
|
|
174
|
+
])
|
|
175
|
+
]),
|
|
176
|
+
_: 2
|
|
177
|
+
}, 1032, ["value", "style", "class", "onSelect"]);
|
|
178
|
+
}), 128))
|
|
179
|
+
]),
|
|
180
|
+
_: 1
|
|
181
|
+
})
|
|
182
|
+
]),
|
|
183
|
+
_: 1
|
|
184
|
+
}, 8, ["class"])
|
|
185
|
+
]),
|
|
186
|
+
_: 1
|
|
187
|
+
})
|
|
188
|
+
]),
|
|
189
|
+
_: 1
|
|
190
|
+
}, 8, ["open", "disabled"]);
|
|
191
|
+
};
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
export {
|
|
195
|
+
_sfc_main as _
|
|
196
|
+
};
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { defineComponent, computed, ref, onMounted, openBlock, createBlock, withCtx, createVNode, unref, mergeProps, createCommentVNode, createTextVNode, toDisplayString } from "vue";
|
|
2
|
+
import { AvatarRoot, AvatarImage, AvatarFallback } from "reka-ui";
|
|
3
|
+
import { tv } from "tailwind-variants";
|
|
4
|
+
import { _ as _sfc_main$1 } from "./LpContextMenu-D0mzXqA7.js";
|
|
5
|
+
const __default__ = { inheritAttrs: false };
|
|
6
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
7
|
+
...__default__,
|
|
8
|
+
__name: "LpAvatar",
|
|
9
|
+
props: {
|
|
10
|
+
src: {},
|
|
11
|
+
alt: {},
|
|
12
|
+
fallback: {},
|
|
13
|
+
size: { default: "md" },
|
|
14
|
+
menuItems: {}
|
|
15
|
+
},
|
|
16
|
+
setup(__props) {
|
|
17
|
+
const avatar = tv({
|
|
18
|
+
base: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-pill bg-surface-soft font-medium text-muted-strong",
|
|
19
|
+
variants: {
|
|
20
|
+
size: {
|
|
21
|
+
sm: "size-7 text-xs",
|
|
22
|
+
md: "size-9 text-sm",
|
|
23
|
+
lg: "size-12 text-base"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
defaultVariants: { size: "md" }
|
|
27
|
+
});
|
|
28
|
+
const props = __props;
|
|
29
|
+
const initials = computed(
|
|
30
|
+
() => props.fallback ?? props.alt?.slice(0, 2).toUpperCase() ?? "?"
|
|
31
|
+
);
|
|
32
|
+
const mounted = ref(false);
|
|
33
|
+
onMounted(() => {
|
|
34
|
+
mounted.value = true;
|
|
35
|
+
});
|
|
36
|
+
return (_ctx, _cache) => {
|
|
37
|
+
return __props.menuItems?.length ? (openBlock(), createBlock(_sfc_main$1, {
|
|
38
|
+
key: 0,
|
|
39
|
+
items: __props.menuItems
|
|
40
|
+
}, {
|
|
41
|
+
default: withCtx(() => [
|
|
42
|
+
createVNode(unref(AvatarRoot), mergeProps({
|
|
43
|
+
class: unref(avatar)({ size: __props.size })
|
|
44
|
+
}, _ctx.$attrs), {
|
|
45
|
+
default: withCtx(() => [
|
|
46
|
+
__props.src && mounted.value ? (openBlock(), createBlock(unref(AvatarImage), {
|
|
47
|
+
key: 0,
|
|
48
|
+
src: __props.src,
|
|
49
|
+
alt: __props.alt,
|
|
50
|
+
class: "size-full object-cover"
|
|
51
|
+
}, null, 8, ["src", "alt"])) : createCommentVNode("", true),
|
|
52
|
+
createVNode(unref(AvatarFallback), null, {
|
|
53
|
+
default: withCtx(() => [
|
|
54
|
+
createTextVNode(toDisplayString(initials.value), 1)
|
|
55
|
+
]),
|
|
56
|
+
_: 1
|
|
57
|
+
})
|
|
58
|
+
]),
|
|
59
|
+
_: 1
|
|
60
|
+
}, 16, ["class"])
|
|
61
|
+
]),
|
|
62
|
+
_: 1
|
|
63
|
+
}, 8, ["items"])) : (openBlock(), createBlock(unref(AvatarRoot), mergeProps({
|
|
64
|
+
key: 1,
|
|
65
|
+
class: unref(avatar)({ size: __props.size })
|
|
66
|
+
}, _ctx.$attrs), {
|
|
67
|
+
default: withCtx(() => [
|
|
68
|
+
__props.src ? (openBlock(), createBlock(unref(AvatarImage), {
|
|
69
|
+
key: 0,
|
|
70
|
+
src: __props.src,
|
|
71
|
+
alt: __props.alt,
|
|
72
|
+
class: "size-full object-cover"
|
|
73
|
+
}, null, 8, ["src", "alt"])) : createCommentVNode("", true),
|
|
74
|
+
createVNode(unref(AvatarFallback), null, {
|
|
75
|
+
default: withCtx(() => [
|
|
76
|
+
createTextVNode(toDisplayString(initials.value), 1)
|
|
77
|
+
]),
|
|
78
|
+
_: 1
|
|
79
|
+
})
|
|
80
|
+
]),
|
|
81
|
+
_: 1
|
|
82
|
+
}, 16, ["class"]));
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
export {
|
|
87
|
+
_sfc_main as _
|
|
88
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot } from "vue";
|
|
2
|
+
import { tv } from "tailwind-variants";
|
|
3
|
+
const _hoisted_1 = {
|
|
4
|
+
key: 0,
|
|
5
|
+
class: "size-1.5 rounded-full bg-current"
|
|
6
|
+
};
|
|
7
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
8
|
+
__name: "LpBadge",
|
|
9
|
+
props: {
|
|
10
|
+
tone: {},
|
|
11
|
+
dot: { type: Boolean }
|
|
12
|
+
},
|
|
13
|
+
setup(__props) {
|
|
14
|
+
const badge = tv({
|
|
15
|
+
base: "inline-flex items-center gap-1.5 rounded-pill px-2.5 py-0.5 text-xs font-medium",
|
|
16
|
+
variants: {
|
|
17
|
+
tone: {
|
|
18
|
+
neutral: "bg-surface-soft text-muted-strong",
|
|
19
|
+
brand: "bg-brand-soft text-brand",
|
|
20
|
+
action: "bg-action/15 text-action",
|
|
21
|
+
success: "bg-action/15 text-action",
|
|
22
|
+
danger: "bg-danger-soft text-danger",
|
|
23
|
+
outline: "border border-line text-ink"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
defaultVariants: { tone: "neutral" }
|
|
27
|
+
});
|
|
28
|
+
const props = __props;
|
|
29
|
+
const classes = computed(() => badge({ tone: props.tone }));
|
|
30
|
+
return (_ctx, _cache) => {
|
|
31
|
+
return openBlock(), createElementBlock("span", {
|
|
32
|
+
class: normalizeClass(classes.value)
|
|
33
|
+
}, [
|
|
34
|
+
__props.dot ? (openBlock(), createElementBlock("span", _hoisted_1)) : createCommentVNode("", true),
|
|
35
|
+
renderSlot(_ctx.$slots, "default")
|
|
36
|
+
], 2);
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
export {
|
|
41
|
+
_sfc_main as _
|
|
42
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { defineComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, createCommentVNode, toDisplayString, normalizeClass } from "vue";
|
|
2
|
+
import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
|
|
3
|
+
const _hoisted_1 = {
|
|
4
|
+
class: "flex items-center gap-1.5 text-sm",
|
|
5
|
+
"aria-label": "Breadcrumb"
|
|
6
|
+
};
|
|
7
|
+
const _hoisted_2 = ["href", "onClick"];
|
|
8
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
9
|
+
__name: "LpBreadcrumbs",
|
|
10
|
+
props: {
|
|
11
|
+
items: {}
|
|
12
|
+
},
|
|
13
|
+
emits: ["navigate"],
|
|
14
|
+
setup(__props) {
|
|
15
|
+
return (_ctx, _cache) => {
|
|
16
|
+
return openBlock(), createElementBlock("nav", _hoisted_1, [
|
|
17
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, i) => {
|
|
18
|
+
return openBlock(), createElementBlock(Fragment, { key: i }, [
|
|
19
|
+
i > 0 ? (openBlock(), createBlock(_sfc_main$1, {
|
|
20
|
+
key: 0,
|
|
21
|
+
name: "lucide:chevron-right",
|
|
22
|
+
size: 14,
|
|
23
|
+
class: "text-muted"
|
|
24
|
+
})) : createCommentVNode("", true),
|
|
25
|
+
item.href && i < __props.items.length - 1 ? (openBlock(), createElementBlock("a", {
|
|
26
|
+
key: 1,
|
|
27
|
+
href: item.href,
|
|
28
|
+
class: "rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
|
|
29
|
+
onClick: ($event) => _ctx.$emit("navigate", item, i)
|
|
30
|
+
}, toDisplayString(item.label), 9, _hoisted_2)) : (openBlock(), createElementBlock("span", {
|
|
31
|
+
key: 2,
|
|
32
|
+
class: normalizeClass(i === __props.items.length - 1 ? "text-ink" : "text-muted")
|
|
33
|
+
}, toDisplayString(item.label), 3))
|
|
34
|
+
], 64);
|
|
35
|
+
}), 128))
|
|
36
|
+
]);
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
export {
|
|
41
|
+
_sfc_main as _
|
|
42
|
+
};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from "vue";
|
|
2
|
+
import { tv } from "tailwind-variants";
|
|
3
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
4
|
+
__name: "LpButton",
|
|
5
|
+
props: {
|
|
6
|
+
variant: {},
|
|
7
|
+
size: {},
|
|
8
|
+
block: { type: Boolean },
|
|
9
|
+
square: { type: Boolean },
|
|
10
|
+
glow: { type: Boolean },
|
|
11
|
+
as: { default: "button" },
|
|
12
|
+
type: { default: "button" },
|
|
13
|
+
disabled: { type: Boolean }
|
|
14
|
+
},
|
|
15
|
+
setup(__props) {
|
|
16
|
+
const button = tv({
|
|
17
|
+
base: [
|
|
18
|
+
"inline-flex select-none items-center justify-center gap-2 font-semibold",
|
|
19
|
+
"rounded-control transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]",
|
|
20
|
+
// tactile press: dips slightly on click, springs back on release.
|
|
21
|
+
"active:scale-[0.97] motion-reduce:active:scale-100",
|
|
22
|
+
"outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
23
|
+
"disabled:cursor-not-allowed disabled:opacity-55 aria-disabled:cursor-not-allowed aria-disabled:opacity-55"
|
|
24
|
+
],
|
|
25
|
+
variants: {
|
|
26
|
+
variant: {
|
|
27
|
+
solid: "bg-brand text-ink-inverse hover:bg-brand-hover",
|
|
28
|
+
action: "bg-action text-ink-inverse shadow-[0_14px_28px_color-mix(in_srgb,var(--color-action)_24%,transparent)] hover:bg-action-hover",
|
|
29
|
+
outline: "border border-line-strong text-ink hover:border-brand hover:bg-white/[0.04]",
|
|
30
|
+
// raised surface tile with a border — a visible, neutral filled button
|
|
31
|
+
soft: "border border-line bg-surface-raised/80 text-ink hover:border-line-strong hover:bg-surface-soft",
|
|
32
|
+
ghost: "text-ink hover:bg-white/[0.06]",
|
|
33
|
+
muted: "text-muted hover:bg-white/[0.04] hover:text-ink",
|
|
34
|
+
// high-contrast light fill (e.g. a "download" CTA on a dark hero)
|
|
35
|
+
light: "border border-white/20 bg-white text-ink-inverse hover:bg-white/90",
|
|
36
|
+
danger: "bg-danger text-ink-inverse hover:bg-danger-hover"
|
|
37
|
+
},
|
|
38
|
+
size: {
|
|
39
|
+
xs: "h-8 px-2.5 text-xs",
|
|
40
|
+
sm: "h-(--size-control-sm) px-3 text-xs",
|
|
41
|
+
md: "h-(--size-control-md) px-4 text-sm",
|
|
42
|
+
lg: "h-(--size-control-lg) px-5 text-sm"
|
|
43
|
+
},
|
|
44
|
+
block: { true: "w-full" },
|
|
45
|
+
// icon-only square button — equal sides, no horizontal padding
|
|
46
|
+
square: { true: "aspect-square p-0" },
|
|
47
|
+
// soft elevation glow keyed to the variant's colour
|
|
48
|
+
glow: { true: "" }
|
|
49
|
+
},
|
|
50
|
+
compoundVariants: [
|
|
51
|
+
{ square: true, size: "xs", class: "size-8" },
|
|
52
|
+
{ square: true, size: "sm", class: "size-(--size-control-sm)" },
|
|
53
|
+
{ square: true, size: "md", class: "size-(--size-control-md)" },
|
|
54
|
+
{ square: true, size: "lg", class: "size-(--size-control-lg)" },
|
|
55
|
+
{
|
|
56
|
+
glow: true,
|
|
57
|
+
variant: "solid",
|
|
58
|
+
class: "shadow-[0_8px_22px_color-mix(in_srgb,var(--color-brand)_28%,transparent)] hover:shadow-[0_12px_28px_color-mix(in_srgb,var(--color-brand)_36%,transparent)]"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
glow: true,
|
|
62
|
+
variant: "danger",
|
|
63
|
+
class: "shadow-[0_8px_22px_color-mix(in_srgb,var(--color-danger)_28%,transparent)] hover:shadow-[0_12px_28px_color-mix(in_srgb,var(--color-danger)_36%,transparent)]"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
glow: true,
|
|
67
|
+
variant: "light",
|
|
68
|
+
class: "shadow-[0_8px_18px_rgba(255,255,255,0.2)] hover:shadow-[0_12px_24px_rgba(255,255,255,0.3)]"
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
defaultVariants: { variant: "solid", size: "md" }
|
|
72
|
+
});
|
|
73
|
+
const props = __props;
|
|
74
|
+
const isNativeButton = computed(() => props.as === "button");
|
|
75
|
+
const classes = computed(
|
|
76
|
+
() => button({
|
|
77
|
+
variant: props.variant,
|
|
78
|
+
size: props.size,
|
|
79
|
+
block: props.block,
|
|
80
|
+
square: props.square,
|
|
81
|
+
glow: props.glow
|
|
82
|
+
})
|
|
83
|
+
);
|
|
84
|
+
return (_ctx, _cache) => {
|
|
85
|
+
return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
|
|
86
|
+
type: isNativeButton.value ? __props.type : void 0,
|
|
87
|
+
disabled: isNativeButton.value ? __props.disabled : void 0,
|
|
88
|
+
"aria-disabled": !isNativeButton.value && __props.disabled ? "true" : void 0,
|
|
89
|
+
class: normalizeClass(classes.value)
|
|
90
|
+
}, {
|
|
91
|
+
default: withCtx(() => [
|
|
92
|
+
renderSlot(_ctx.$slots, "default")
|
|
93
|
+
]),
|
|
94
|
+
_: 3
|
|
95
|
+
}, 8, ["type", "disabled", "aria-disabled", "class"]);
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
export {
|
|
100
|
+
_sfc_main as _
|
|
101
|
+
};
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
|
|
2
|
+
import { today, getLocalTimeZone, parseDate } from "@internationalized/date";
|
|
3
|
+
import { CalendarRoot, CalendarHeader, CalendarPrev, CalendarHeading, CalendarNext, CalendarGrid, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarGridBody, CalendarCell, CalendarCellTrigger } from "reka-ui";
|
|
4
|
+
import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
|
|
5
|
+
const navBtn = "flex size-8 items-center justify-center rounded-control text-muted outline-none transition-[color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:bg-surface-soft hover:text-ink active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring";
|
|
6
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
7
|
+
__name: "LpCalendar",
|
|
8
|
+
props: {
|
|
9
|
+
modelValue: {},
|
|
10
|
+
min: {},
|
|
11
|
+
max: {},
|
|
12
|
+
isDisabled: {},
|
|
13
|
+
weekdayFormat: { default: "short" }
|
|
14
|
+
},
|
|
15
|
+
emits: ["update:modelValue"],
|
|
16
|
+
setup(__props, { emit: __emit }) {
|
|
17
|
+
const props = __props;
|
|
18
|
+
const emit = __emit;
|
|
19
|
+
function toDate(iso) {
|
|
20
|
+
if (!iso) return void 0;
|
|
21
|
+
try {
|
|
22
|
+
return parseDate(iso);
|
|
23
|
+
} catch {
|
|
24
|
+
return void 0;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
const value = computed(() => toDate(props.modelValue));
|
|
28
|
+
const minValue = computed(() => toDate(props.min));
|
|
29
|
+
const maxValue = computed(() => toDate(props.max));
|
|
30
|
+
const placeholderValue = computed(() => value.value ?? today(getLocalTimeZone()));
|
|
31
|
+
function onUpdate(v) {
|
|
32
|
+
emit("update:modelValue", v?.toString());
|
|
33
|
+
}
|
|
34
|
+
function disabledFor(date) {
|
|
35
|
+
return props.isDisabled?.(date.toString()) ?? false;
|
|
36
|
+
}
|
|
37
|
+
return (_ctx, _cache) => {
|
|
38
|
+
return openBlock(), createBlock(unref(CalendarRoot), {
|
|
39
|
+
"model-value": value.value,
|
|
40
|
+
"min-value": minValue.value,
|
|
41
|
+
"max-value": maxValue.value,
|
|
42
|
+
placeholder: placeholderValue.value,
|
|
43
|
+
"weekday-format": __props.weekdayFormat,
|
|
44
|
+
"is-date-disabled": disabledFor,
|
|
45
|
+
"fixed-weeks": "",
|
|
46
|
+
class: "inline-block rounded-card border border-line bg-surface-raised p-3",
|
|
47
|
+
"onUpdate:modelValue": onUpdate
|
|
48
|
+
}, {
|
|
49
|
+
default: withCtx(({ weekDays, grid }) => [
|
|
50
|
+
createVNode(unref(CalendarHeader), { class: "mb-2 flex items-center justify-between gap-2" }, {
|
|
51
|
+
default: withCtx(() => [
|
|
52
|
+
createVNode(unref(CalendarPrev), {
|
|
53
|
+
class: normalizeClass(navBtn),
|
|
54
|
+
"aria-label": "Previous month"
|
|
55
|
+
}, {
|
|
56
|
+
default: withCtx(() => [
|
|
57
|
+
createVNode(_sfc_main$1, {
|
|
58
|
+
name: "lucide:chevron-left",
|
|
59
|
+
size: 16
|
|
60
|
+
})
|
|
61
|
+
]),
|
|
62
|
+
_: 1
|
|
63
|
+
}),
|
|
64
|
+
createVNode(unref(CalendarHeading), { class: "text-sm font-semibold text-ink" }),
|
|
65
|
+
createVNode(unref(CalendarNext), {
|
|
66
|
+
class: normalizeClass(navBtn),
|
|
67
|
+
"aria-label": "Next month"
|
|
68
|
+
}, {
|
|
69
|
+
default: withCtx(() => [
|
|
70
|
+
createVNode(_sfc_main$1, {
|
|
71
|
+
name: "lucide:chevron-right",
|
|
72
|
+
size: 16
|
|
73
|
+
})
|
|
74
|
+
]),
|
|
75
|
+
_: 1
|
|
76
|
+
})
|
|
77
|
+
]),
|
|
78
|
+
_: 1
|
|
79
|
+
}),
|
|
80
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(grid, (month) => {
|
|
81
|
+
return openBlock(), createBlock(unref(CalendarGrid), {
|
|
82
|
+
key: month.value.toString(),
|
|
83
|
+
class: "w-full border-collapse select-none"
|
|
84
|
+
}, {
|
|
85
|
+
default: withCtx(() => [
|
|
86
|
+
createVNode(unref(CalendarGridHead), null, {
|
|
87
|
+
default: withCtx(() => [
|
|
88
|
+
createVNode(unref(CalendarGridRow), { class: "mb-1 flex" }, {
|
|
89
|
+
default: withCtx(() => [
|
|
90
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays, (day) => {
|
|
91
|
+
return openBlock(), createBlock(unref(CalendarHeadCell), {
|
|
92
|
+
key: day,
|
|
93
|
+
class: "w-9 text-center text-[11px] font-medium text-muted"
|
|
94
|
+
}, {
|
|
95
|
+
default: withCtx(() => [
|
|
96
|
+
createTextVNode(toDisplayString(day), 1)
|
|
97
|
+
]),
|
|
98
|
+
_: 2
|
|
99
|
+
}, 1024);
|
|
100
|
+
}), 128))
|
|
101
|
+
]),
|
|
102
|
+
_: 2
|
|
103
|
+
}, 1024)
|
|
104
|
+
]),
|
|
105
|
+
_: 2
|
|
106
|
+
}, 1024),
|
|
107
|
+
createVNode(unref(CalendarGridBody), null, {
|
|
108
|
+
default: withCtx(() => [
|
|
109
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(month.rows, (weekDates, i) => {
|
|
110
|
+
return openBlock(), createBlock(unref(CalendarGridRow), {
|
|
111
|
+
key: `w-${i}`,
|
|
112
|
+
class: "flex"
|
|
113
|
+
}, {
|
|
114
|
+
default: withCtx(() => [
|
|
115
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(weekDates, (weekDate) => {
|
|
116
|
+
return openBlock(), createBlock(unref(CalendarCell), {
|
|
117
|
+
key: weekDate.toString(),
|
|
118
|
+
date: weekDate,
|
|
119
|
+
class: "p-0.5"
|
|
120
|
+
}, {
|
|
121
|
+
default: withCtx(() => [
|
|
122
|
+
createVNode(unref(CalendarCellTrigger), {
|
|
123
|
+
day: weekDate,
|
|
124
|
+
month: month.value,
|
|
125
|
+
class: "flex size-8 items-center justify-center rounded-control text-sm text-ink outline-none transition-[color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:bg-surface-soft active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[outside-view]:text-muted/40 data-[today]:font-semibold data-[today]:not-data-[selected]:text-brand data-[selected]:bg-brand data-[selected]:font-semibold data-[selected]:text-ink-inverse data-[selected]:hover:bg-brand-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-35 data-[unavailable]:pointer-events-none data-[unavailable]:line-through data-[unavailable]:opacity-35"
|
|
126
|
+
}, null, 8, ["day", "month"])
|
|
127
|
+
]),
|
|
128
|
+
_: 2
|
|
129
|
+
}, 1032, ["date"]);
|
|
130
|
+
}), 128))
|
|
131
|
+
]),
|
|
132
|
+
_: 2
|
|
133
|
+
}, 1024);
|
|
134
|
+
}), 128))
|
|
135
|
+
]),
|
|
136
|
+
_: 2
|
|
137
|
+
}, 1024)
|
|
138
|
+
]),
|
|
139
|
+
_: 2
|
|
140
|
+
}, 1024);
|
|
141
|
+
}), 128))
|
|
142
|
+
]),
|
|
143
|
+
_: 1
|
|
144
|
+
}, 8, ["model-value", "min-value", "max-value", "placeholder", "weekday-format"]);
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
});
|
|
148
|
+
export {
|
|
149
|
+
_sfc_main as _
|
|
150
|
+
};
|