@cn-ui/core
Version:
The @cn-ui/core is a collection of UI components and utilities for building modern web applications with SolidJS.
1,511 lines • 168 kB
JavaScript
import { OriginComponent as y, useFloatingCover as $r, computed as E, PortalEasy as Sr, extendsEvent as Y, useMapper as G, ensureFunctionResult as D, atom as z, NullAtom as q, OriginDiv as U, classNames as j, toCSSPx as R, ComponentSlots as On, atomization as Ot, classHelper as re, zIndexManager as ut, usePromise as Mn, createCtx as se, useBreakPointMapper as kn, spanToWidth as xt, firstClass as be, genArray as Tn, initDayjs as zn, useCalendarSelect as En, dayjs as Or, useDateCalendar as In, splitOneChild as Pn, ArrayAtom as _n, useSelect as Pt, DebounceAtom as An, debounce as Rn, ensureArrayReturn as Xe, createBlackBoard as Mr, useFileExplorer as Dn, autoResource as Fn, StoreToAtom as Ln, DefaultAC as ot, extendsComponents as jn, SelectableList as Bn, reflect as Hn } from "@cn-ui/reactive";
import { Switch as Be, Match as J, Show as S, onMount as ye, onCleanup as He, mergeProps as ie, createSignal as kr, createComputed as Tr, startTransition as Vn, createMemo as x, For as N, createEffect as Z, untrack as Nn, lazy as zr, createComponent as Wn, children as Er, Suspense as Yn, splitProps as qn } from "solid-js";
import { createComponent as l, ssr as h, ssrHydrationKey as f, ssrStyle as ae, escape as s, ssrElement as W, mergeProps as O, ssrAttribute as v, render as Kn, Dynamic as Ir, Show as wt } from "solid-js/web";
export * from "@cn-ui/sortable";
import { AiFillCheckCircle as Un, AiFillInfoCircle as Xn, AiFillWarning as Gn, AiFillCloseCircle as Zn, AiOutlineClose as Qe, AiOutlineLoading3Quarters as Qn, AiFillEye as Jn, AiFillEyeInvisible as ei, AiOutlineCloseCircle as Pr, AiOutlineDoubleLeft as lr, AiOutlineLeft as Mt, AiOutlineSearch as ti, AiOutlineDown as ri, AiOutlineCheck as _t, AiOutlineRight as At, AiOutlineSwapRight as _r, AiOutlineCalendar as Ar, AiOutlineArrowLeft as ni, AiOutlineArrowRight as ii, AiOutlineArrowUp as li, AiOutlinePlus as Rr, AiOutlineEllipsis as or, AiOutlineInfo as oi, AiOutlineAlert as ai, AiOutlineCaretDown as si, AiOutlineCaretRight as ci } from "solid-icons/ai";
import { Key as le } from "@solid-primitives/keyed";
import { TransitionGroup as Ve, Transition as Rt } from "solid-transition-group";
import { useResizeObserver as ui, nextTick as di, watch as Dt, useElementHover as Ft, useScrollLock as gi, toAccessor as hi, useEventListener as Re, onClickOutside as Dr, useOffsetPagination as fi, useScroll as mi, useStepper as vi } from "solidjs-use";
import { useDark as gu } from "solidjs-use";
import { createStore as Fr, reconcile as bi } from "solid-js/store";
import { pick as yi, debounce as xi, range as wi } from "radash";
import { createTable as pi, getCoreRowModel as Ci, getSortedRowModel as $i, getExpandedRowModel as Si } from "@cn-ui/table-core";
import Oi from "async-validator";
import { DotsMove3 as Mi } from "@cn-ui/svg-spinner";
import { qr as ki } from "headless-qr";
import { Ranger as Ti } from "@tanstack/ranger";
import zi from "split.js";
var Ei = ["<div", ">", "</div>"], Ii = ["<div", ' class="cn-badge relative pointer-events-none" style="', '"><sup class="absolute bg-error-400 text-white rounded-full p-[0.35rem] pointer-events-auto cursor-default" style="', '">', "</sup></div>"];
const Sc = y((e) => {
const t = $r(e), r = E(() => typeof e.count == "number" && !Number.isNaN(e.count)), n = E(() => typeof e.count == "number" && e.count > (e.overflowCount ?? 99)), i = E(() => e.dot || e.count === 0);
return l(Sr, {
get children() {
return h(Ii, f(), ae(t.coverStyle()), ae({
top: "-4px",
right: "-4px",
...e.style()
}), s(l(Be, {
get fallback() {
return e.children;
},
get children() {
return [l(J, {
get when() {
return n();
},
get children() {
return [e.overflowCount ?? 99, "+"];
}
}), l(J, {
get when() {
return i();
},
get children() {
return h(Ei, f(), e.showZero && 0);
}
}), l(J, {
get when() {
return r();
},
get children() {
return e.count;
}
})];
}
})));
}
});
}), P = y((e) => W("span", O({
get "aria-hidden"() {
return !e.clickable;
},
get role() {
return e.clickable ? "button" : void 0;
},
get class() {
return e.class(e.spin && "animate-spin", "inline-flex items-center text-center leading-[0]");
},
get style() {
return {
...e.style,
"vertical-align": "-0.125em"
};
}
}, () => Y(e)), () => s(e.children), !0)), pt = y((e) => W("button", O({
type: "button",
get class() {
return e.class(e.spin && "animate-spin", "inline-flex items-center text-center leading-[0] cursor-pointer hover:bg-gray-300 p-2 rounded-md transition-colors");
},
get style() {
return {
...e.style,
"vertical-align": "-0.125em"
};
}
}, () => Y(e)), () => s(e.children), !0));
var Pi = ["<div", '><h3 class="flex items-center"><!--$-->', '<!--/--><span class="flex-1">', "</span><!--$-->", '<!--/--></h3><p class="pl-6" style="', '">', "</p></div>"];
const _i = y((e) => {
const t = "text-xl pr-2", r = G(e.type ?? "default", {
success() {
return l(P, {
class: `text-green-600 ${t}`,
get children() {
return l(Un, {});
}
});
},
info() {
return l(P, {
class: `text-blue-600 ${t}`,
get children() {
return l(Xn, {});
}
});
},
warning() {
return l(P, {
class: `text-yellow-600 ${t}`,
get children() {
return l(Gn, {});
}
});
},
error() {
return l(P, {
class: `text-red-600 ${t}`,
get children() {
return l(Zn, {});
}
});
},
default() {
return null;
}
});
return h(Pi, f() + v("class", s(e.class(e.round && "rounded-md", "p-2 overflow-hidden border-1 border-design-separator"), !0), !1), typeof e.icon == "boolean" ? s(r()) : s(D(e.icon)), s(D(e.message)), s(l(S, {
get when() {
return e.closable;
},
get children() {
return l(P, {
class: "cursor-pointer transition-color",
get onclick() {
return e?.onClose;
},
get children() {
return l(Qe, {});
}
});
}
})), "line-break:anywhere", s(D(e.description)));
}), Lt = (e) => {
const t = z(0), r = z(0), n = E(() => e()?.parentElement);
ye(() => n.recomputed());
let i;
return ye(() => {
i = ui(n, ([o]) => {
const { width: a, height: c } = o.contentRect, { paddingLeft: u, paddingRight: d, paddingTop: g, paddingBottom: b } = getComputedStyle(
o.target
), w = Number.parseInt(u) || 0, m = Number.parseInt(d) || 0, C = Number.parseInt(g) || 0, p = Number.parseInt(b) || 0;
t(a - w - m), r(c - C - p);
}).stop;
}), He(() => {
i?.();
}), {
sizer: n,
width: t,
height: r
};
};
function _e(e, t, r) {
let n = r.initialDeps ?? [], i;
return () => {
let o;
r.key && r.debug?.() && (o = Date.now());
const a = e();
if (!(a.length !== n.length || a.some((d, g) => n[g] !== d)))
return i;
n = a;
let u;
if (r.key && r.debug?.() && (u = Date.now()), i = t(...a), r.key && r.debug?.()) {
const d = Math.round((Date.now() - o) * 100) / 100, g = Math.round((Date.now() - u) * 100) / 100, b = g / 16, w = (m, C) => {
for (m = String(m); m.length < C; )
m = ` ${m}`;
return m;
};
console.info(
`%c⏱ ${w(g, 5)} /${w(d, 5)} ms`,
`
font-size: .6rem;
font-weight: bold;
color: hsl(${Math.max(
0,
Math.min(120 - 120 * b, 120)
)}deg 100% 31%);`,
r?.key
);
}
return r?.onChange?.(i), i;
};
}
function Ct(e, t) {
if (e === void 0)
throw new Error("Unexpected undefined");
return e;
}
const Ai = (e, t) => Math.abs(e - t) < 1, Ri = (e) => e, Di = (e) => {
const t = Math.max(e.startIndex - e.overscan, 0), r = Math.min(e.endIndex + e.overscan, e.count - 1), n = [];
for (let i = t; i <= r; i++)
n.push(i);
return n;
}, Fi = (e, t) => {
const r = e.scrollElement;
if (!r)
return;
const n = (o) => {
const { width: a, height: c } = o;
t({ width: Math.round(a), height: Math.round(c) });
};
n(r.getBoundingClientRect());
const i = new ResizeObserver((o) => {
const a = o[0];
if (a?.borderBoxSize) {
const c = a.borderBoxSize[0];
if (c) {
n({ width: c.inlineSize, height: c.blockSize });
return;
}
}
n(r.getBoundingClientRect());
});
return i.observe(r, { box: "border-box" }), () => {
i.unobserve(r);
};
}, Li = (e, t) => {
const r = e.scrollElement;
if (!r)
return;
const n = () => {
t(e.getElementOffset(e));
};
return n(), r.addEventListener("scroll", n, {
passive: !0
}), () => {
r.removeEventListener("scroll", n);
};
}, ji = (e, t, r) => {
if (t?.borderBoxSize) {
const n = t.borderBoxSize[0];
if (n)
return Math.round(n[r.options.horizontal ? "inlineSize" : "blockSize"]);
}
return Math.round(
e.getBoundingClientRect()[r.options.horizontal ? "width" : "height"]
);
}, Bi = (e, { adjustments: t = 0, behavior: r }, n) => {
const i = e + t;
n.scrollElement?.scrollTo?.({
[n.options.horizontal ? "left" : "top"]: i,
behavior: r
});
};
class Hi {
// biome-ignore lint/suspicious/noConfusingVoidType: <explanation>
unsubs = [];
options;
scrollElement = null;
isScrolling = !1;
isScrollingTimeoutId = null;
scrollToIndexTimeoutId = null;
measurementsCache = [];
itemSizeCache = /* @__PURE__ */ new Map();
pendingMeasuredCacheIndexes = [];
scrollRect;
scrollOffset;
scrollDirection = null;
scrollAdjustments = 0;
measureElementCache = /* @__PURE__ */ new Map();
observer = /* @__PURE__ */ (() => {
let t = null;
const r = () => t || (typeof ResizeObserver < "u" ? t = new ResizeObserver((n) => {
n.forEach((i) => {
this._measureElement(i.target, i);
});
}) : null);
return {
disconnect: () => r()?.disconnect(),
observe: (n) => r()?.observe(n, { box: "border-box" }),
unobserve: (n) => r()?.unobserve(n)
};
})();
range = null;
constructor(t) {
this.setOptions(t), this.scrollRect = this.options.initialRect, this.scrollOffset = this.options.initialOffset, this.measurementsCache = this.options.initialMeasurementsCache, this.measurementsCache.forEach((r) => {
this.itemSizeCache.set(r.key, r.size);
}), this.maybeNotify(), this.options.getElementOffset && (this.getElementOffset = this.options.getElementOffset);
}
getElementOffset(t) {
if (t.scrollElement === null) throw Error(" ScrollElement Void");
return t.scrollElement instanceof Window ? Math.abs(
t.scrollElement[t.options.horizontal ? "scrollX" : "scrollY"]
) : Math.abs(
t.scrollElement[t.options.horizontal ? "scrollLeft" : "scrollTop"]
);
}
setOptions = (t) => {
Object.entries(t).forEach(([r, n]) => {
typeof n > "u" && Reflect.deleteProperty(t, r);
}), this.options = {
debug: !1,
initialOffset: 0,
overscan: 1,
paddingStart: 0,
paddingEnd: 0,
scrollPaddingStart: 0,
scrollPaddingEnd: 0,
horizontal: !1,
getItemKey: Ri,
rangeExtractor: Di,
onChange: () => {
},
measureElement: ji,
initialRect: { width: 0, height: 0 },
scrollMargin: 0,
scrollingDelay: 150,
indexAttribute: "data-index",
initialMeasurementsCache: [],
lanes: 1,
...t
};
};
notify = (t) => {
this.options.onChange?.(this, t);
};
maybeNotify = _e(
() => (this.calculateRange(), [
this.isScrolling,
this.range ? this.range.startIndex : null,
this.range ? this.range.endIndex : null
]),
(t) => {
this.notify(t);
},
{
key: process.env.NODE_ENV !== "production" && "maybeNotify",
debug: () => this.options.debug,
initialDeps: [
this.isScrolling,
this.range ? this.range.startIndex : null,
this.range ? this.range.endIndex : null
]
}
);
cleanup = () => {
this.unsubs.filter(Boolean).forEach((t) => t()), this.unsubs = [], this.scrollElement = null;
};
_didMount = () => (this.measureElementCache.forEach(this.observer.observe), () => {
this.observer.disconnect(), this.cleanup();
});
_willUpdate = () => {
const t = this.options.getScrollElement();
this.scrollElement !== t && (this.cleanup(), this.scrollElement = t, this._scrollToOffset(this.scrollOffset, {
adjustments: void 0,
behavior: void 0
}), this.unsubs.push(
this.options.observeElementRect(this, (r) => {
this.scrollRect = r, this.maybeNotify();
})
), this.unsubs.push(
this.options.observeElementOffset(this, (r) => {
this.scrollAdjustments = 0, this.scrollOffset !== r && (this.isScrollingTimeoutId !== null && (clearTimeout(this.isScrollingTimeoutId), this.isScrollingTimeoutId = null), this.isScrolling = !0, this.scrollDirection = this.scrollOffset < r ? "forward" : "backward", this.scrollOffset = r, this.maybeNotify(), this.isScrollingTimeoutId = setTimeout(() => {
this.isScrollingTimeoutId = null, this.isScrolling = !1, this.scrollDirection = null, this.maybeNotify();
}, this.options.scrollingDelay));
})
));
};
getSize = () => this.scrollRect[this.options.horizontal ? "width" : "height"];
memoOptions = _e(
() => [
this.options.count,
this.options.paddingStart,
this.options.scrollMargin,
this.options.getItemKey
],
(t, r, n, i) => (this.pendingMeasuredCacheIndexes = [], {
count: t,
paddingStart: r,
scrollMargin: n,
getItemKey: i
}),
{
key: !1
}
);
getFurthestMeasurement = (t, r) => {
const n = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map();
for (let o = r - 1; o >= 0; o--) {
const a = t[o];
if (n.has(a.lane))
continue;
const c = i.get(a.lane);
if (c == null || a.end > c.end ? i.set(a.lane, a) : a.end < c.end && n.set(a.lane, !0), n.size === this.options.lanes)
break;
}
return i.size === this.options.lanes ? Array.from(i.values()).sort((o, a) => o.end === a.end ? o.index - a.index : o.end - a.end)[0] : void 0;
};
getMeasurements = _e(
() => [this.memoOptions(), this.itemSizeCache],
({ count: t, paddingStart: r, scrollMargin: n, getItemKey: i }, o) => {
const a = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
this.pendingMeasuredCacheIndexes = [];
const c = this.measurementsCache.slice(0, a);
for (let u = a; u < t; u++) {
const d = i(u), g = this.options.lanes === 1 ? c[u - 1] : this.getFurthestMeasurement(c, u), b = g ? g.end : r + n, w = o.get(d), m = typeof w == "number" ? w : this.options.estimateSize(u), C = b + m, p = g ? g.lane : u % this.options.lanes;
c[u] = {
index: u,
id: d,
start: b,
size: m,
end: C,
key: d,
lane: p
};
}
return this.measurementsCache = c, c;
},
{
key: process.env.NODE_ENV !== "production" && "getMeasurements",
debug: () => this.options.debug
}
);
calculateRange = _e(
() => [this.getMeasurements(), this.getSize(), this.scrollOffset],
(t, r, n) => this.range = t.length > 0 && r > 0 ? Vi({
measurements: t,
outerSize: r,
scrollOffset: n
}) : null,
{
key: process.env.NODE_ENV !== "production" && "calculateRange",
debug: () => this.options.debug
}
);
getIndexes = _e(
() => [
this.options.rangeExtractor,
this.calculateRange(),
this.options.overscan,
this.options.count
],
(t, r, n, i) => r === null ? [] : t({
...r,
overscan: n,
count: i
}),
{
key: process.env.NODE_ENV !== "production" && "getIndexes",
debug: () => this.options.debug
}
);
indexFromElement = (t) => {
const r = this.options.indexAttribute, n = t.getAttribute(r);
return n ? Number.parseInt(n, 10) : (console.warn(`Missing attribute name '${r}={index}' on measured element.`), -1);
};
_measureElement = (t, r) => {
const n = this.measurementsCache[this.indexFromElement(t)];
if (!n || !t.isConnected) {
this.measureElementCache.forEach((a, c) => {
a === t && (this.observer.unobserve(t), this.measureElementCache.delete(c));
});
return;
}
const i = this.measureElementCache.get(n.key);
i !== t && (i && this.observer.unobserve(i), this.observer.observe(t), this.measureElementCache.set(n.key, t));
const o = this.options.measureElement(t, r, this);
this.resizeItem(n, o);
};
resizeItem = (t, r) => {
const n = this.itemSizeCache.get(t.key) ?? t.size, i = r - n;
i !== 0 && (t.start < this.scrollOffset + this.scrollAdjustments && (process.env.NODE_ENV !== "production" && this.options.debug && console.info("correction", i), this._scrollToOffset(this.scrollOffset, {
// biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
adjustments: this.scrollAdjustments += i,
behavior: void 0
})), this.pendingMeasuredCacheIndexes.push(t.index), this.itemSizeCache = new Map(this.itemSizeCache.set(t.key, r)), this.notify(!1));
};
measureElement = (t) => {
t && this._measureElement(t, void 0);
};
getVirtualItems = _e(
() => [this.getIndexes(), this.getMeasurements()],
(t, r) => {
const n = [];
for (let i = 0, o = t.length; i < o; i++) {
const a = t[i], c = r[a];
n.push(c);
}
return n;
},
{
key: process.env.NODE_ENV !== "production" && "getIndexes",
debug: () => this.options.debug
}
);
getVirtualItemForOffset = (t) => {
const r = this.getMeasurements();
return Ct(
r[Lr(
0,
r.length - 1,
(n) => Ct(r[n]).start,
t
)]
);
};
getOffsetForAlignment = (t, r) => {
const n = this.getSize();
r === "auto" && (t <= this.scrollOffset ? r = "start" : t >= this.scrollOffset + n ? r = "end" : r = "start"), r === "start" || (r === "end" ? t = t - n : r === "center" && (t = t - n / 2));
const i = this.options.horizontal ? "scrollWidth" : "scrollHeight", a = (this.scrollElement ? "document" in this.scrollElement ? this.scrollElement.document.documentElement[i] : this.scrollElement[i] : 0) - this.getSize();
return Math.max(Math.min(a, t), 0);
};
getOffsetForIndex = (t, r = "auto") => {
t = Math.max(0, Math.min(t, this.options.count - 1));
const n = Ct(this.getMeasurements()[t]);
if (r === "auto")
if (n.end >= this.scrollOffset + this.getSize() - this.options.scrollPaddingEnd)
r = "end";
else if (n.start <= this.scrollOffset + this.options.scrollPaddingStart)
r = "start";
else
return [this.scrollOffset, r];
const i = r === "end" ? n.end + this.options.scrollPaddingEnd : n.start - this.options.scrollPaddingStart;
return [this.getOffsetForAlignment(i, r), r];
};
isDynamicMode = () => this.measureElementCache.size > 0;
cancelScrollToIndex = () => {
this.scrollToIndexTimeoutId !== null && (clearTimeout(this.scrollToIndexTimeoutId), this.scrollToIndexTimeoutId = null);
};
scrollToOffset = (t, { align: r = "start", behavior: n } = {}) => {
this.cancelScrollToIndex(), n === "smooth" && this.isDynamicMode() && console.warn("The `smooth` scroll behavior is not fully supported with dynamic size."), this._scrollToOffset(this.getOffsetForAlignment(t, r), {
adjustments: void 0,
behavior: n
});
};
scrollToIndex = (t, { align: r = "auto", behavior: n } = {}) => {
t = Math.max(0, Math.min(t, this.options.count - 1)), this.cancelScrollToIndex(), n === "smooth" && this.isDynamicMode() && console.warn("The `smooth` scroll behavior is not fully supported with dynamic size.");
const [i, o] = this.getOffsetForIndex(t, r);
this._scrollToOffset(i, { adjustments: void 0, behavior: n }), n !== "smooth" && this.isDynamicMode() && (this.scrollToIndexTimeoutId = setTimeout(() => {
if (this.scrollToIndexTimeoutId = null, this.measureElementCache.has(this.options.getItemKey(t))) {
const [c] = this.getOffsetForIndex(t, o);
Ai(c, this.scrollOffset) || this.scrollToIndex(t, { align: o, behavior: n });
} else
this.scrollToIndex(t, { align: o, behavior: n });
}));
};
scrollBy = (t, { behavior: r } = {}) => {
this.cancelScrollToIndex(), r === "smooth" && this.isDynamicMode() && console.warn("The `smooth` scroll behavior is not fully supported with dynamic size."), this._scrollToOffset(this.scrollOffset + t, {
adjustments: void 0,
behavior: r
});
};
getTotalSize = () => {
const t = this.getMeasurements();
let r;
return t.length === 0 ? r = this.options.paddingStart : r = this.options.lanes === 1 ? t[t.length - 1]?.end ?? 0 : Math.max(...t.slice(-this.options.lanes).map((n) => n.end)), r - this.options.scrollMargin + this.options.paddingEnd;
};
_scrollToOffset = (t, {
adjustments: r,
behavior: n
}) => {
this.options.scrollToFn(t, { behavior: n, adjustments: r }, this);
};
measure = () => {
this.itemSizeCache = /* @__PURE__ */ new Map(), this.notify(!1);
};
}
const Lr = (e, t, r, n) => {
for (; e <= t; ) {
const i = (e + t) / 2 | 0, o = r(i);
if (o < n)
e = i + 1;
else if (o > n)
t = i - 1;
else
return i;
}
return e > 0 ? e - 1 : 0;
};
function Vi({
measurements: e,
outerSize: t,
scrollOffset: r
}) {
const n = e.length - 1, o = Lr(0, n, (c) => e[c].start, r);
let a = o;
for (; a < n && e[a].end < r + t; )
a++;
return { startIndex: o, endIndex: a };
}
function Ni(e) {
let t = !1, r = 0;
function n(...i) {
t && cancelAnimationFrame(r), r = requestAnimationFrame(() => {
t = !1, e(...i);
}), t = !0;
}
return n;
}
function Wi(e) {
const t = ie(e), r = new Hi(t), [n, i] = Fr(r.getVirtualItems()), [o, a] = kr(r.getTotalSize()), c = {
get(g, b) {
switch (b) {
case "getVirtualItems":
return () => n;
case "getTotalSize":
return () => o();
default:
return Reflect.get(g, b);
}
}
}, u = new Proxy(r, c);
u.setOptions(t), ye(() => {
const g = u._didMount();
u._willUpdate(), He(g);
});
const d = Ni((g, b) => {
g._willUpdate(), Vn(() => {
i(bi(g.getVirtualItems(), {
key: "id"
}));
}), a(g.getTotalSize()), e.onChange?.(g, b);
});
return Tr(() => {
u.setOptions(ie(t, e, {
onChange: d
})), di(() => {
u.measure();
});
}), {
...u,
updateView: d
};
}
function Ge(e) {
return Wi(ie({
observeElementRect: Fi,
observeElementOffset: Li,
scrollToFn: Bi
}, e));
}
var Yi = ["<div", ' style="', '">', "</div>"], qi = ["<div", ' class="cn-virtual-list-container flex-none relative" style="', '">', "</div>"];
const jr = y(function(e) {
const t = q(null), r = Ge({
get count() {
return e.each.length;
},
getItemKey: e.getItemKey,
estimateSize() {
return e.estimateSize ?? 24;
},
getScrollElement: () => t(),
get horizontal() {
return !!e.horizontal;
},
get overscan() {
return e.overscan ?? Math.min(20, Math.floor(Math.sqrt(e.each.length)));
}
});
e.expose?.({
virtualizer: r
});
const {
height: n,
width: i
} = Lt(() => t()), o = () => l(le, {
by: "key",
get each() {
return r.getVirtualItems();
},
get fallback() {
return D(e.fallback);
},
children: (a) => {
const c = z(""), u = q(null), d = {
itemClass: c,
itemRef: u
}, g = x((b) => e.each[a().index] === void 0 ? b : e.children(e.each[a().index], () => a().index, d));
return h(Yi, f() + v("class", s(j("cn-virtual-list-item absolute ", e.horizontal ? "h-full" : "w-full", c()), !0), !1) + v("data-index", s(a().index, !0), !1), `undefined:${s(a().start, !0)}px`, s(g()));
}
});
return l(U, {
prop: e,
get class() {
return j("cn-virtual-list overflow-auto relative", e.horizontal ? "h-full" : "w-full", e.reverse ? `cn-virtual-list-reverse flex ${e.horizontal ? "flex-row-reverse" : "flex-col-reverse"}` : "cn-virtual-list-normal", e.horizontal);
},
get "data-height"() {
return n();
},
get style() {
return {
width: e.horizontal ? R(i(), "400px") : "auto",
height: e.horizontal ? "auto" : R(e.containerHeight ?? n(), "400px")
};
},
get children() {
return h(qi, f(), "width:" + (e.horizontal ? `${s(r.getTotalSize(), !0)}px` : "100%") + (";height:" + (e.horizontal ? "100%" : `${s(r.getTotalSize(), !0)}px`)), e.transitionName ? s(l(Ve, {
get name() {
return e.transitionName;
},
get children() {
return l(o, {});
}
})) : s(l(o, {})));
}
});
});
var Ki = ["<div", ' style="', '">', "</div>"], Ui = ["<div", ' class="absolute"', ' style="', '">', "</div>"], Xi = ["<div", ' style="', '"><div class="cn-virtual-list-container flex-none" style="', '">', "</div></div>"];
function Oc(e) {
const t = q(null), r = Ge({
get count() {
return e.each.length;
},
getItemKey: e.getItemKey,
estimateSize() {
return e.estimateWidth ?? 24;
},
measureElement: typeof window < "u" && navigator.userAgent.indexOf("Firefox") === -1 ? (c) => c?.getBoundingClientRect().height : void 0,
getScrollElement: () => t(),
overscan: e.overscan ?? 3
}), n = Ge({
get count() {
return e.colSize ?? e.each[0].length;
},
getItemKey: e.getItemKey,
estimateSize() {
return e.estimateHeight ?? 24;
},
getScrollElement: () => t(),
horizontal: !0,
get overscan() {
return e.overscan ?? Math.min(20, Math.floor(Math.sqrt(e.each.length)));
}
}), {
height: i,
width: o
} = Lt(() => t()?.parentElement), a = l(le, {
by: "key",
get each() {
return r.getVirtualItems();
},
children: (c) => {
const u = z(""), d = q(null), g = {
itemClass: u,
itemRef: d
}, b = x((w) => e.each[c().index] ?? w);
return h(Ki, f() + v("class", s(j("cn-virtual-list-item absolute w-full", u()), !0), !1) + v("data-index", s(c().index, !0), !1), `undefined:${s(c().start, !0)}px`, s(l(N, {
get each() {
return n.getVirtualItems();
},
children: (w) => {
const m = x((C) => b()[c().index] === void 0 ? C : e.children(b()[w.index], () => c().index, g));
return h(Ui, f(), v("data-index", s(w.index, !0), !1), `left:${s(w.start, !0)}px`, s(m()));
}
})));
}
});
return h(Xi, f() + v("class", s(j("cn-virtual-list", e.reverse ? "cn-virtual-list-reverse flex flex-col-reverse" : "cn-virtual-list-normal"), !0), !1), "overflow:auto;position:relative" + (";height:" + s(R(i(), "400px"), !0)) + (";width:" + s(R(o(), "400px"), !0)), `width:${s(n.getTotalSize(), !0)}px;height:${s(r.getTotalSize(), !0)}px;position:relative`, e.transitionName ? s(l(Ve, {
get name() {
return e.transitionName;
},
children: a
})) : s(a));
}
var Gi = ["<div", ">", "</div>"];
const ar = ["top-left", "top-right", "bottom-left", "bottom-right", "top", "bottom"], Zi = y(function(e) {
const {
position: t,
modalShowPosition: r
} = Qi(e);
return l(S, {
get when() {
return e.model();
},
get children() {
return l(U, {
prop: e,
get class() {
return j(e.stack !== !1 && e.each.length >= (e.maxStackItem ?? 5) && "cn-modal-stack", "cn-modal-list fixed overflow-y-auto overflow-x-visible h-96 w-96 ", t());
},
get style() {
return {
"--modal-show-position": r(),
width: R(e.itemSize?.width, "24rem")
};
},
get children() {
return l(jr, {
get each() {
return e.each;
},
get reverse() {
return e.position?.startsWith("bottom");
},
getItemKey: (n) => e.by(e.each[n], n),
get estimateSize() {
return e.itemSize?.height ?? 64;
},
transitionName: "cn-fade",
children: (n, i, {
itemClass: o
}) => (o("px-3 py-2"), h(Gi, f() + v("class", s(j("w-full rounded-xl flex-none shadow-1 bg-design-card"), !0), !1), s(e.children(n, i))))
});
}
});
}
});
});
function Qi(e) {
const t = G(() => e.position ?? "top-left", {
"top-left": "top-4 left-0",
"top-right": "top-4 right-0",
"bottom-left": "bottom-4 left-0",
"bottom-right": "bottom-4 right-0",
top: "top-4 left-[50%] -translate-x-1/2",
bottom: "bottom-4 left-[50%] -translate-x-1/2"
}), r = G(() => e.position ?? "top-left", {
"top-left": "-120px",
"top-right": "120px",
"bottom-left": "-120px",
"bottom-right": "120px",
top: "0 -120px",
bottom: "0 120px"
});
return {
position: t,
modalShowPosition: r
};
}
const Br = (e) => {
if (!globalThis.window) {
console.warn("CN-UI | Runtime Render Cancel");
return;
}
const t = document.getElementById(e);
if (t)
return t.innerHTML = "", t;
const r = document.createElement("div");
return r.id = e, document.body.appendChild(r), r;
}, Ji = (e, t) => {
const r = Br(e);
if (r)
return Kn(t, r);
};
class gt {
constructor(t) {
this.id = t;
}
store = z([]);
createArea() {
return Ji(this.id, () => this.render()), this;
}
render() {
return [];
}
}
class el extends gt {
render() {
return this.store();
}
addRender(t, r) {
this.cache.has(t) || (this.store((n) => [...n, r]), this.cache.set(t, r));
}
removeRender(t) {
if (!this.cache.has(t)) return;
const r = this.cache.get(t);
this.cache.delete(t), this.store((n) => n.filter((o) => r !== o));
}
// biome-ignore lint/suspicious/noExplicitAny: symbol will cause typescript error
cache = /* @__PURE__ */ new WeakMap();
Portal = function(t) {
const r = Symbol();
return Z(() => {
t.children || console.warn("EasyPortal: children is undefined"), t.show() ? this.addRender(r, t.children) : this.removeRender(r);
}), He(() => {
this.removeRender(r);
}), [];
}.bind(this);
}
const Hr = new On("Button", {
loadingIcon: () => l(P, {
class: "pr-1",
"aria-label": "loading icon",
get children() {
return l(Qn, {
class: " cn-animate-spin"
});
}
})
});
function tl(e) {
const t = "opacity-50";
return G(() => e.type ?? "default", {
primary() {
return `${t}`;
},
dashed() {
return `${this.default()} border-dashed`;
},
link() {
const r = e.danger ? "text-error-500" : "text-primary-500";
return `${this.default()} border-none ${r}`;
},
text() {
return this.link();
},
default: () => `border cursor-not-allowed ${t}`
});
}
function rl(e) {
return G(() => e.type ?? "default", {
primary: () => `${e.danger ? "bg-error-500 hover:bg-error-400" : "bg-primary-500 hover:bg-primary-400"} text-white `,
dashed() {
return `${this.default()} border-dashed`;
},
link() {
const t = e.danger ? "text-error-500" : "text-primary-500";
return `${this.default()} border-none ${t}`;
},
text() {
return "hover:bg-gray-200";
},
default: () => `border-design-separator border ${e.danger ? "hover:border-error-400 hover:text-error-400 active:bg-error-50" : "hover:border-primary-400 hover:text-primary-400 active:bg-primary-50"} bg-transparent`
});
}
const kt = y((e) => {
const t = rl(e), r = tl(e);
return W("button", O({
get id() {
return e.id;
},
get type() {
return e.htmlType ?? "button";
},
get class() {
return e.class("cn-button transition-colors outline-none select-none ", e.loading && "pointer-events-none opacity-50", e.circle ? "rounded-full px-2 py-1" : "rounded-md px-4 py-1 ", e.block && "block w-full", e.disabled ? r() : t());
},
get style() {
return e.style();
},
get disabled() {
return e.disabled;
},
get "aria-live"() {
return e.loading ? "polite" : void 0;
}
}, () => Y(e)), () => s(l(Be, {
get fallback() {
return [D(e.icon), e.children];
},
get children() {
return l(J, {
get when() {
return e.loading;
},
get children() {
return [Hr.renderSlotAsDefault("loadingIcon", e.loadingIcon), e.loadingText ?? "加载中"];
}
});
}
})), !0);
}), Te = (e) => ({
name: e.name,
placeholder: e.placeholder,
readonly: e.readonly,
disabled: e.disabled,
required: e.required,
error: e.error
});
function nl(e, t = {}) {
if (!e)
return;
e.focus(t);
const { cursor: r } = t;
if (r) {
const n = e.value.length;
switch (r) {
case "start":
e.setSelectionRange(0, 0);
break;
case "end":
e.setSelectionRange(n, n);
break;
default:
e.setSelectionRange(0, n);
break;
}
}
}
var il = ["<span", "><!--$-->", "<!--/--> <!--$-->", "<!--/--></span>"];
const ll = (e) => h(il, f() + v("class", s(j("text-sm text-nowrap ", e.max && (e.max ?? Number.POSITIVE_INFINITY) < e.count ? "text-rose-500" : "text-design-text"), !0), !1), s(e.count), e.max ? ` / ${s(e.max)}` : s(null)), ol = (e) => {
const t = E(() => {
let r = e.count ?? {};
return typeof e.count == "boolean" && (r = {}), {
strategy(n) {
return n.length;
},
exceedFormatter(n, i) {
return i.max && !e.allowExceed ? n.slice(0, i.max) : n;
},
...r
};
});
return {
TextCount: l(S, {
get when() {
return e.count;
},
get children() {
return l(ll, {
get max() {
return t().max;
},
get count() {
return t().strategy(e.model());
}
});
}
}),
countOptional: t,
textLengthControl() {
Dt(e.model, () => {
e.count !== !1 && e.model((r) => t().exceedFormatter(r, t()));
});
}
};
};
var al = ["<span", ' class="mr-1 flex-none">', "</span>"], sl = ["<span", ' class="ml-1 text-gray-400 flex-none"><!--$-->', "<!--/--><!--$-->", "<!--/--></span>"], cl = ["<span", ' style="', '"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></span>"];
const Ee = y((e) => {
e = ie({
placeholder: "请输入文本",
rounded: !0
}, e);
const t = q(null), r = q(null), n = Ot(e.type ?? "text"), i = Ft(r), o = {
inputType: n,
model: e.model,
focus(b) {
nl(t(), b);
},
isHovering: i,
disabled: () => !!e.disabled
};
ye(() => {
e.expose?.(o);
});
const a = E(() => {
const b = D(e.prefixIcon, [o]);
return l(S, {
when: b,
get children() {
return h(al, f(), s(b));
}
});
}), {
TextCount: c,
textLengthControl: u
} = ol(e);
u();
const d = E(() => {
const b = D(e.suffixIcon, [o]);
return l(S, {
when: b || c,
get children() {
return h(sl, f(), s(b), s(c));
}
});
}), g = x(() => e.type === "textarea");
return h(cl, f() + v("aria-disabled", s(e.disabled, !0), !1) + v("class", s(e.class(re.base("cn-base-input transition inline-flex border py-1 px-3 text-sm text-design-primary ", g() && e.autoSize && "cn-textarea-auto-size", e.rounded && "rounded")(e.readonly && "border-design-separator cursor-default", e.disabled && "border-design-separator bg-gray-100 text-gray-400 opacity-50", e.error && "border-red-300", "border-design-separator hover:border-blue-400")), !0), !1) + v("data-replicated-value", g() && e.autoSize ? s(e.model(), !0) : s(void 0, !0), !1), ae(e.style()), s(a()), s(l(Ir, O({
get component() {
return g() ? "textarea" : "input";
},
get id() {
return e.id;
},
get type() {
return n();
},
get class() {
return re.base("bg-transparent appearance-none outline-none w-full", !e.resize && "resize-none")(e.disabled && " cursor-not-allowed");
}
}, () => Te(e), () => e.$input(), () => Y(e)))), s(d()));
}), Mc = Ee;
var ul = ["<style", ">.cn-base-input:hover .cn-clear-btn { opacity: 1 !important; }</style>"];
const kc = (e) => {
const t = G(
// @ts-ignore
e.inputType,
{
password: l(Jn, {}),
text: l(ei, {})
}
);
return l(P, {
"aria-label": "更改密码显隐",
clickable: !0,
get "aria-disabled"() {
return e.disabled();
},
onclick: () => {
e.disabled() || e.inputType((r) => r === "password" ? "text" : "password");
},
get children() {
return t();
}
});
}, Vr = (e) => l(P, {
clickable: !0,
"aria-label": "清空按钮",
class: "cn-clear-btn opacity-0 transition cursor-pointer",
onclick: () => {
e.model?.(""), e.onClear?.();
},
get children() {
return [l(Pr, {
color: "#777"
}), h(ul, f())];
}
}), dl = y((e) => {
const t = e.model.sync(() => e.model() ?? "", (r) => r ?? null);
return l(Ee, O(e, {
"v-model": t
}));
}), gl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
FormInput: dl
}, Symbol.toStringTag, { value: "Module" }));
var hl = ['<div class="text-design-primary mb-1">', "</div>"], fl = ["<div", ' class="description text-design-secondary">', "</div>"], ml = ['<nav class="flex mt-2"><!--$-->', "<!--/--><!--$-->", "<!--/--></nav>"], vl = ["<div", ' class="cn-mask fixed top-0 left-0 h-screen w-screen bg-design-ultra-thin"></div>'], bl = ["<div", ' class="cn-message-box"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"], yl = ["<div", ' class="fixed top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]" style="', '">', "</div>"];
const xl = y((e) => W("nav", O({
class: "bg-design-regular rounded-xl text-center px-4 pb-2 pt-4 shadow-1 max-w-screen min-w-[15rem] w-fit min-h-[9rem] flex flex-col justify-evenly"
}, () => Y(e)), () => [h(hl, s(e.title)), "<!--$-->", s(l(S, {
get when() {
return e.description;
},
get children() {
return h(fl, f(), s(e.description));
}
})), "<!--/-->", "<!--$-->", s(D(e.messageSlot, [e])), "<!--/-->", h(ml, s(l(S, {
get when() {
return e.cancelable;
},
get children() {
return l(kt, {
type: "text",
block: !0,
get onclick() {
return e.onCancel;
},
children: "取消"
});
}
})), s(l(kt, {
type: "text",
class: "font-bold text-primary-600 ",
block: !0,
get onclick() {
return e.onConfirm;
},
children: "确认"
})))], !0));
class wl extends gt {
render() {
const t = this;
return h(bl, f(), s(l(S, {
get when() {
return t.store().length && t.store().some((r) => r.mask);
},
get children() {
return h(vl, f());
}
})), s(l(Ve, {
name: "cn-fade",
get children() {
return l(N, {
get each() {
return t.store();
},
children: (r) => h(yl, f(), "z-index:" + s(ut.getIndex(), !0), s(l(xl, r)))
});
}
})));
}
base(t, r, n = {}, i) {
const o = Mn(), a = {
...n,
title: t,
description: r,
onConfirm: () => {
o.resolve(i?.()), c();
},
onCancel: () => {
c();
}
};
this.store((u) => [...u, a]);
const c = () => {
this.store((u) => u.filter((d) => d !== a)), o.reject();
};
return o.promise;
}
alert(t, r, n = {}) {
return this.base(t, r, {
...n,
cancelable: !1
});
}
prompt(t, r, n = {}) {
const i = z("");
return this.base(t, r, {
...n,
messageSlot() {
return l(Ee, {
"v-model": i,
class: "my-2",
type: "text"
});
},
cancelable: !0
}, () => ({
text: i()
}));
}
confirm(t, r, n = {}) {
return this.base(t, r, {
...n,
cancelable: !0
});
}
}
const Tc = /* @__PURE__ */ new wl("cn-ui-modal-layers").createArea();
var pl = ["<nav", ' class="h-full w-full fixed z-[200] bg-gray-700/70 top-0 left-0"></nav>'];
class Cl extends gt {
show = z(!1);
events = [];
onClick(t) {
this.events.push(t), He(() => {
this.events = this.events.filter((r) => r !== t);
}), this.show(!1);
}
/** 绑定数据模型 */
bindModel(t) {
Z(() => {
this.show(t());
}), this.onClick(() => {
t(!1);
});
}
render() {
const [t, r] = gi(document.body);
Z(() => {
r(this.show());
});
const n = this;
return l(Rt, {
name: "cn-opacity-fade",
get children() {
return l(S, {
get when() {
return n.show();
},
get children() {
return h(pl, f());
}
});
}
});
}
}
const $l = /* @__PURE__ */ new Cl("cn-ui-mask").createArea();
var Sl = ["<nav", ' style="', '"><header class="flex p-4 text-xl border-b border-design-separator "><!--$-->', '<!--/--><h3 class="flex-1 font-bold ">', '</h3></header><div class="p-4">', "</div></nav>"];
const zc = y((e) => {
const t = Br("cn-ui-modal-layers");
return $l.bindModel(e.model), l(Sr, {
mount: t,
portalled: !0,
get children() {
return l(Rt, {
get name() {
return e.placement === "left" ? "cn-slide-from-left" : "cn-slide-from-right";
},
get children() {
return l(S, {
get when() {
return e.model();
},
get children() {
return h(Sl, f() + v("class", s(e.class("cn-drawer", "fixed top-0 h-screen bg-design-thick min-w-[15rem] shadow-1", e.placement === "left" ? "left-0" : "right-0"), !0), !1), "z-index:" + s(ut.getIndex(), !0), s(l(P, {
class: "cursor-pointer text-design-secondary pr-4",
onclick: () => {
e.model(!1);
},
get children() {
return l(Qe, {});
}
})), s(e.title), s(e.children));
}
});
}
});
}
});
});
class Ol extends gt {
constructor(t) {
super(t), this.id = t, this.PStore = ar.reduce((r, n) => (r[n] = z([]), r), {});
}
PStore;
removeMessage(t) {
const r = this.getPosFromId(t);
return this.PStore[r]((n) => n.filter((i) => i.id !== t));
}
render() {
const t = this;
return l(N, {
each: ar,
children: (r) => {
const n = t.PStore[r];
return l(Zi, {
id: `cn-message-${r}`,
"v-model": () => !0,
get each() {
return n();
},
by: (i) => i.id,
position: r,
children: (i) => l(_i, {
class: "h-full bg-design-primary-elevated shadow-lg",
get type() {
return i.type;
},
round: !0,
get message() {
return i.title;
},
get description() {
return i.description;
},
icon: !0,
get closable() {
return i.closable;
},
onClose: () => t.removeMessage(i.id)
})
});
}
});
}
autoKey = 1;
getPosFromInfo(t) {
return t.position ?? "top";
}
getPosFromId(t) {
return t.split(":", 1)[0];
}
create(t, r, n = {}) {
const i = this.getPosFromInfo(n), a = {
id: `${i}:${(this.autoKey++).toString()}`,
title: t,
type: r,
...n
};
return this.PStore[i]((c) => [a, ...c]), this.durationClose(a, a.duration), a;
}
close(t) {
throw t.id && this.removeMessage(t.id), new Error("需要输入一个 id 来关闭 Message");
}
durationClose(t, r = 3e3) {
r <= 0 || setTimeout(() => {
this.removeMessage(t.id);
}, r);
}
info(t, r) {
return this.create(t, "info", r);
}
success(t, r) {
return this.create(t, "success", r);
}
warning(t, r) {
return this.create(t, "warning", r);
}
error(t, r) {
return this.create(t, "error", r);
}
}
const Ec = /* @__PURE__ */ new Ol("cn-ui-message-layers").createArea(), Ic = ["start", "center", "end", "space-around", "space-between", "space-evenly"], Pc = ["top", "middle", "bottom"], Nr = /* @__PURE__ */ se(void 0, !0), Ml = y((e) => {
const t = E(() => Array.isArray(e.gutter) ? e.gutter[0] : e.gutter), r = E(() => Array.isArray(e.gutter) ? e.gutter[1] : e.gutter);
return l(Nr.Provider, {
get value() {
return {
gutterX: R(t(), "8px"),
gutterY: R(r(), "8px")
};
},
get children() {
return l(U, {
prop: e,
class: "flex flex-row flex-wrap",
get style() {
return {
// 为了兼容性和与其他框架实现一致，采用子 padding 的模式
"justify-content": e.justify ?? "start",
"align-items": e.align,
"margin-bottom": R(e.bottomSpace, "20px")
};
},
get children() {
return e.children;
}
});
}
});
}), kl = y((e) => {
const t = kn(e), r = x(() => {
let o = {
pull: e.pull,
push: e.push,
offset: e.offset,
span: e.span ?? 24
};
const a = t();
return a && (typeof a == "number" ? o.span = a : o = a), o;
}), n = Nr.use(), i = (o) => typeof r()[o] == "number" ? xt(r()[o]) : void 0;
return l(U, {
prop: e,
class: "relative",
get style() {
return {
"padding-left": n?.gutterX,
"padding-right": n?.gutterX,
"padding-top": n?.gutterY,
"padding-bottom": n?.gutterY,
"max-width": xt(r().span),
"margin-inline-start": i("offset"),
"inset-inline-start": i("push"),
"inset-inline-end": i("pull"),
flex: `0 0 ${xt(r().span)}`
};
},
get children() {
return e.children;
}
});
});
var Tl = ["<span", ' role="button" aria-label="', '" class="hover:text-primary-400 px-1 cursor-pointer">', "</span>"], zl = ["<div", ' class="flex py-2 border-b gap-1"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="flex-1 text-center"><span role="button" aria-label="', '" class="hover:text-primary-400 px-1 cursor-pointer">', "</span><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
function El() {
const e = xe.use(), t = "transition-colors cursor-pointer hover:text-design-text", r = x(() => e.calendarShowingType() === "day"), n = x(() => e.calendarShowingType() === "year");
return h(zl, f(), s(l(P, {
role: "button",
"aria-hidden": !1,
"aria-label": "上一年",
onclick: () => e.targetDate((i) => i.add(n() ? -12 : -1, "year")),
class: t,
get children() {
return l(lr, {});
}
})), s(l(S, {
get when() {
return r();
},
get children() {
return l(P, {
role: "button",
"aria-hidden": !1,
"aria-label": "上一月",
class: t,
onclick: () => e.targetDate((i) => i.add(-1, "month")),
get children() {
return l(Mt, {});
}
});
}
})), `${s(e.targetDate().year(), !0)}年 点击进入年面板`, s(e.targetDate().year()), s(l(S, {
get when() {
return e.calendarShowingType() === "day";
},
get children() {
return h(Tl, f(), `${s(e.targetDate().month(), !0) + 1}月 点击进入月面板`, s(e.targetDate().month()) + 1);
}
})), s(l(S, {
get when() {
return e.calendarShowingType() === "day";
},
get children() {
return l(P, {
role: "button",
"aria-hidden": !1,
"aria-label": "下一月",
class: `${t} rotate-180`,
onclick: () => e.targetDate((i) => i.add(1, "month")),
get children() {
return l(Mt, {});
}
});
}
})), s(l(P, {
role: "button",
"aria-hidden": !1,
"aria-label": "下一年",
onclick: () => e.targetDate((i) => i.add(n() ? 12 : 1, "year")),
class: `${t} rotate-180`,
get children() {
return l(lr, {});
}
})));
}
var Il = ["<td", '><div role="gridcell"', ">", "</div></td>"], Wr = ["<div", ' role="gridcell"', ">", "</div>"];
const Pl = (e) => {
const t = xe.use();
return h(Il, f() + v("aria-label", s(e.date.format("YYYY MM DD"), !0), !1) + v("class", s(be.base("transition-colors cursor-pointer w-8 h-8 flex justify-center items-center rounded-md")((t.isStartDate(e.date) || t.isEndDate(e.date) || t.isSelected(e.date)) && "bg-primary-50 text-primary-500 hover:text-primary-600 cn-selected", "hover:bg-gray-100"), !0), !1), v("aria-selected", s(t.isSelected(e.date), !0) || s(void 0, !0), !1) + v("class", s(be.base("")((t.isEndDate(e.date) || t.isStartDate(e.date)) && " w-6 h-6 rounded-full bg-primary-600 text-white"), !0), !1), s(e.date.date()));
}, _l = (e) => {
const t = xe.use();
return h(Wr, f() + v("aria-label", s(e.date.format("YYYY MM"), !0), !1), v("aria-selected", s(t.isSelected(e.date, "month"), !0), !1) + v("class", s(be.base("transition-colors cursor-pointer p-2 h-6 flex justify-center items-center w-full rounded-md")((t.isStartDate(e.date, "month") || t.isEndDate(e.date, "month")) && "bg-primary-50 text-primary-600 hover:text-primary-800", t.isSelected(e.date, "month") && "bg-primary-50 text-primary-300 hover:text-primary-600", "hover:bg-gray-100"), !0), !1), s(t.monthHeader()[e.date.month()]));
}, Al = (e) => {
const t = xe.use();
return h(Wr, f() + v("aria-label", s(e.date.format("YYYY"), !0), !1), v("ari