2024-06-23 09:25:48 +00:00
|
|
|
|
import { c as create_ssr_component, v as validate_component, e as escape, a as each, b as add_attribute, s as spread, d as escape_attribute_value, f as escape_object, g as add_styles, h as merge_ssr_styles, m as missing_component } from './ssr-ipqebOFl.js';
|
|
|
|
|
|
import { I as Icon$1 } from './Icon-a6cUNPyd.js';
|
|
|
|
|
|
import { c as compute_rest_props, b as getContext, a as subscribe, o as onDestroy, s as setContext, n as noop } from './lifecycle-px-3doLe.js';
|
|
|
|
|
|
import { i as is_void, o as omit, w as withGet, c as createElHelpers, m as makeElement, s as styleToString, p as portalAttr, e as effect, a as isHTMLElement, b as executeCallbacks, d as addMeltEventListener, F as FIRST_LAST_KEYS, k as kbd, S as SELECTION_KEYS, u as useEscapeKeydown, n as noop$1, f as isElementDisabled, g as safeOnMount, h as isBrowser, j as addEventListener, l as disabledAttr } from './index3-4H3SMWet.js';
|
|
|
|
|
|
import { d as derived, w as writable } from './index2-D4yenS_5.js';
|
|
|
|
|
|
import { c as createDispatcher, d as disabledAttrs, a as createBitAttrs, r as removeUndefined, g as getOptionUpdater, b as cn$1, t as toastState, e as toWritableStores, o as overridable, u as useEffect } from './index-pRP-dlMc.js';
|
|
|
|
|
|
import { D as Dialog_content, a as Dialog_close, X as X$1, b as Dialog, c as Dialog_trigger, d as Dialog_portal, e as Dialog_overlay, f as fly, g as generateId, h as fade, i as getPositioningUpdater, j as createTypeaheadSearch, k as generateIds, l as derivedVisible, u as usePopper, m as getPortalDestination, n as handleRovingFocus, o as usePortal, s as sleep, r as removeHighlight, p as handleFocus, q as removeScroll, t as getNextFocusable, v as getPreviousFocusable, w as addHighlight } from './x-BYSy-ttj.js';
|
|
|
|
|
|
import { t as tick } from './scheduler-1Ju9dhbL.js';
|
2024-05-29 18:43:41 +00:00
|
|
|
|
import 'clsx';
|
|
|
|
|
|
import { tv } from 'tailwind-variants';
|
2024-06-23 09:25:48 +00:00
|
|
|
|
import { M as Mode_watcher, d as derivedMode } from './mode-watcher-CR12JZYP.js';
|
2024-07-21 13:35:30 +00:00
|
|
|
|
import { c as config } from './config-BHx687w1.js';
|
2024-06-23 09:25:48 +00:00
|
|
|
|
import { B as Button, c as cn, f as flyAndScale } from './button-CeH7Xj2c.js';
|
2024-05-29 18:43:41 +00:00
|
|
|
|
import './ssr2-BVSPLo1E.js';
|
2024-05-29 19:31:10 +00:00
|
|
|
|
import './shared-server-i79vVjEm.js';
|
2024-06-23 09:25:48 +00:00
|
|
|
|
import 'tailwind-merge';
|
2024-05-29 18:43:41 +00:00
|
|
|
|
|
|
|
|
|
|
const Menu$1 = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
const iconNode = [
|
|
|
|
|
|
[
|
|
|
|
|
|
"line",
|
|
|
|
|
|
{
|
|
|
|
|
|
"x1": "4",
|
|
|
|
|
|
"x2": "20",
|
|
|
|
|
|
"y1": "12",
|
|
|
|
|
|
"y2": "12"
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
[
|
|
|
|
|
|
"line",
|
|
|
|
|
|
{
|
|
|
|
|
|
"x1": "4",
|
|
|
|
|
|
"x2": "20",
|
|
|
|
|
|
"y1": "6",
|
|
|
|
|
|
"y2": "6"
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
[
|
|
|
|
|
|
"line",
|
|
|
|
|
|
{
|
|
|
|
|
|
"x1": "4",
|
|
|
|
|
|
"x2": "20",
|
|
|
|
|
|
"y1": "18",
|
|
|
|
|
|
"y2": "18"
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
];
|
|
|
|
|
|
return `${validate_component(Icon$1, "Icon").$$render($$result, Object.assign({}, { name: "menu" }, $$props, { iconNode }), {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${slots.default ? slots.default({}) : ``}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Menu$2 = Menu$1;
|
|
|
|
|
|
const Package_2 = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
const iconNode = [
|
|
|
|
|
|
[
|
|
|
|
|
|
"path",
|
|
|
|
|
|
{
|
|
|
|
|
|
"d": "M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
[
|
|
|
|
|
|
"path",
|
|
|
|
|
|
{
|
|
|
|
|
|
"d": "m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9"
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
["path", { "d": "M12 3v6" }]
|
|
|
|
|
|
];
|
|
|
|
|
|
return `${validate_component(Icon$1, "Icon").$$render($$result, Object.assign({}, { name: "package-2" }, $$props, { iconNode }), {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${slots.default ? slots.default({}) : ``}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Package2 = Package_2;
|
|
|
|
|
|
const Circle_user = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
const iconNode = [
|
|
|
|
|
|
["circle", { "cx": "12", "cy": "12", "r": "10" }],
|
|
|
|
|
|
["circle", { "cx": "12", "cy": "10", "r": "3" }],
|
|
|
|
|
|
[
|
|
|
|
|
|
"path",
|
|
|
|
|
|
{
|
|
|
|
|
|
"d": "M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
];
|
|
|
|
|
|
return `${validate_component(Icon$1, "Icon").$$render($$result, Object.assign({}, { name: "circle-user" }, $$props, { iconNode }), {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${slots.default ? slots.default({}) : ``}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const CircleUser = Circle_user;
|
|
|
|
|
|
const Sun = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, ["size", "role", "color", "ariaLabel", "withEvents"]);
|
|
|
|
|
|
const ctx = getContext("iconCtx") ?? {};
|
|
|
|
|
|
let { size = ctx.size || "24" } = $$props;
|
|
|
|
|
|
let { role = ctx.role || "img" } = $$props;
|
|
|
|
|
|
let { color = ctx.color || "currentColor" } = $$props;
|
|
|
|
|
|
let { ariaLabel = "sun," } = $$props;
|
|
|
|
|
|
let { withEvents = false } = $$props;
|
|
|
|
|
|
if ($$props.size === void 0 && $$bindings.size && size !== void 0)
|
|
|
|
|
|
$$bindings.size(size);
|
|
|
|
|
|
if ($$props.role === void 0 && $$bindings.role && role !== void 0)
|
|
|
|
|
|
$$bindings.role(role);
|
|
|
|
|
|
if ($$props.color === void 0 && $$bindings.color && color !== void 0)
|
|
|
|
|
|
$$bindings.color(color);
|
|
|
|
|
|
if ($$props.ariaLabel === void 0 && $$bindings.ariaLabel && ariaLabel !== void 0)
|
|
|
|
|
|
$$bindings.ariaLabel(ariaLabel);
|
|
|
|
|
|
if ($$props.withEvents === void 0 && $$bindings.withEvents && withEvents !== void 0)
|
|
|
|
|
|
$$bindings.withEvents(withEvents);
|
|
|
|
|
|
return `${withEvents ? `<svg${spread(
|
|
|
|
|
|
[
|
|
|
|
|
|
{ width: escape_attribute_value(size) },
|
|
|
|
|
|
{ height: escape_attribute_value(size) },
|
|
|
|
|
|
escape_object($$restProps),
|
|
|
|
|
|
{ role: escape_attribute_value(role) },
|
|
|
|
|
|
{
|
|
|
|
|
|
"aria-label": escape_attribute_value(ariaLabel)
|
|
|
|
|
|
},
|
|
|
|
|
|
{ viewBox: "0 0 15 15" },
|
|
|
|
|
|
{ fill: escape_attribute_value(color) },
|
|
|
|
|
|
{ xmlns: "http://www.w3.org/2000/svg" }
|
|
|
|
|
|
],
|
|
|
|
|
|
{}
|
|
|
|
|
|
)}><path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z" fill="currentColor"></path></svg>` : `<svg${spread(
|
|
|
|
|
|
[
|
|
|
|
|
|
{ width: escape_attribute_value(size) },
|
|
|
|
|
|
{ height: escape_attribute_value(size) },
|
|
|
|
|
|
escape_object($$restProps),
|
|
|
|
|
|
{ role: escape_attribute_value(role) },
|
|
|
|
|
|
{
|
|
|
|
|
|
"aria-label": escape_attribute_value(ariaLabel)
|
|
|
|
|
|
},
|
|
|
|
|
|
{ viewBox: "0 0 15 15" },
|
|
|
|
|
|
{ fill: escape_attribute_value(color) },
|
|
|
|
|
|
{ xmlns: "http://www.w3.org/2000/svg" }
|
|
|
|
|
|
],
|
|
|
|
|
|
{}
|
|
|
|
|
|
)}><path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z" fill="currentColor"></path></svg>`} `;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Moon = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, ["size", "role", "color", "ariaLabel", "withEvents"]);
|
|
|
|
|
|
const ctx = getContext("iconCtx") ?? {};
|
|
|
|
|
|
let { size = ctx.size || "24" } = $$props;
|
|
|
|
|
|
let { role = ctx.role || "img" } = $$props;
|
|
|
|
|
|
let { color = ctx.color || "currentColor" } = $$props;
|
|
|
|
|
|
let { ariaLabel = "moon," } = $$props;
|
|
|
|
|
|
let { withEvents = false } = $$props;
|
|
|
|
|
|
if ($$props.size === void 0 && $$bindings.size && size !== void 0)
|
|
|
|
|
|
$$bindings.size(size);
|
|
|
|
|
|
if ($$props.role === void 0 && $$bindings.role && role !== void 0)
|
|
|
|
|
|
$$bindings.role(role);
|
|
|
|
|
|
if ($$props.color === void 0 && $$bindings.color && color !== void 0)
|
|
|
|
|
|
$$bindings.color(color);
|
|
|
|
|
|
if ($$props.ariaLabel === void 0 && $$bindings.ariaLabel && ariaLabel !== void 0)
|
|
|
|
|
|
$$bindings.ariaLabel(ariaLabel);
|
|
|
|
|
|
if ($$props.withEvents === void 0 && $$bindings.withEvents && withEvents !== void 0)
|
|
|
|
|
|
$$bindings.withEvents(withEvents);
|
|
|
|
|
|
return `${withEvents ? `<svg${spread(
|
|
|
|
|
|
[
|
|
|
|
|
|
{ width: escape_attribute_value(size) },
|
|
|
|
|
|
{ height: escape_attribute_value(size) },
|
|
|
|
|
|
escape_object($$restProps),
|
|
|
|
|
|
{ role: escape_attribute_value(role) },
|
|
|
|
|
|
{
|
|
|
|
|
|
"aria-label": escape_attribute_value(ariaLabel)
|
|
|
|
|
|
},
|
|
|
|
|
|
{ viewBox: "0 0 15 15" },
|
|
|
|
|
|
{ fill: escape_attribute_value(color) },
|
|
|
|
|
|
{ xmlns: "http://www.w3.org/2000/svg" }
|
|
|
|
|
|
],
|
|
|
|
|
|
{}
|
|
|
|
|
|
)}><path fill-rule="evenodd" clip-rule="evenodd" d="M2.89998 0.499976C2.89998 0.279062 2.72089 0.0999756 2.49998 0.0999756C2.27906 0.0999756 2.09998 0.279062 2.09998 0.499976V1.09998H1.49998C1.27906 1.09998 1.09998 1.27906 1.09998 1.49998C1.09998 1.72089 1.27906 1.89998 1.49998 1.89998H2.09998V2.49998C2.09998 2.72089 2.27906 2.89998 2.49998 2.89998C2.72089 2.89998 2.89998 2.72089 2.89998 2.49998V1.89998H3.49998C3.72089 1.89998 3.89998 1.72089 3.89998 1.49998C3.89998 1.27906 3.72089 1.09998 3.49998 1.09998H2.89998V0.499976ZM5.89998 3.49998C5.89998 3.27906 5.72089 3.09998 5.49998 3.09998C5.27906 3.09998 5.09998 3.27906 5.09998 3.49998V4.09998H4.49998C4.27906 4.09998 4.09998 4.27906 4.09998 4.49998C4.09998 4.72089 4.27906 4.89998 4.49998 4.89998H5.09998V5.49998C5.09998 5.72089 5.27906 5.89998 5.49998 5.89998C5.72089 5.89998 5.89998 5.72089 5.89998 5.49998V4.89998H6.49998C6.72089 4.89998 6.89998 4.72089 6.89998 4.49998C6.89998 4.27906 6.72089 4.09998 6.49998 4.09998H5.89998V3.49998ZM1.89998 6.49998C1.89998 6.27906 1.72089 6.09998 1.49998 6.09998C1.27906 6.09998 1.09998 6.27906 1.09998 6.49998V7.09998H0.499976C0.279062 7.09998 0.0999756 7.27906 0.0999756 7.49998C0.0999756 7.72089 0.279062 7.89998 0.499976 7.89998H1.09998V8.49998C1.09998 8.72089 1.27906 8.89997 1.49998 8.89997C1.72089 8.89997 1.89998 8.72089 1.89998 8.49998V7.89998H2.49998C2.72089 7.89998 2.89998 7.72089 2.89998 7.49998C2.89998 7.27906 2.72089 7.09998 2.49998 7.09998H1.89998V6.49998ZM8.54406 0.98184L8.24618 0.941586C8.03275 0.917676 7.90692 1.1655 8.02936 1.34194C8.17013 1.54479 8.29981 1.75592 8.41754 1.97445C8.91878 2.90485 9.20322 3.96932 9.20322 5.10022C9.20322 8.37201 6.82247 11.0878 3.69887 11.6097C3.45736 11.65 3.20988 11.6772 2.96008 11.6906C2.74563 11.702 2.62729 11.9535 2.77721 12.1072C2.84551 12.1773 2.91535 12.2458 2.98667 12.3128L3.05883 12.3795L3.31883 12.6045L3.50684 12.7532L3.62796 12.8433L3.81491 12.9742L3.99079 13.089C4.11175 13.1651 4.23536 13.2375 4.36157 13.3059L4.62496 13.4412L4.88553 13.5607L5.18837 13.6828L5.43169 13.7686C5.56564 13.8128 5.70149 13.8529 5.83857 13.8885C5.94262 13.9155 6.04767 13.9401 6.15405 13.9622C6.27993 13.9883 6.40713 14.0109 6.53544 14.0298L6.85241 14.0685L7.11934 14.0892C7.24637 14.0965 7.37436 14.1002 7.50322 14.1002C11.1483 14.1002 14.1032 11.1453 14.1032 7.50023C14.1032 7.25044 14.0893 7.00389 14.0623 6.76131L14.0255 6.48407C13.991 6.26083 13.9453 6.04129 13.8891 5.82642C13.8213 5.56709 13.7382 5.31398 13.6409 5.06881L13.5279 4.80132L13.4507 4.63542L13.3766 4.48666C13.2178 4.17773 13.0353 3.88295 12.8312 3.60423L12.6782 3.40352L12.4793 3.16432L12.3157 2.98361L12.1961 2.85951L12.0355 2.70246L11.8134 2.50184L11.4925 2.24191L11.2483 2.06498L10.9562 1.87446L10.6346 1.68894L10.3073 1.52378L10.1938 1.47176L9.95488 1.3706L9.67791 1.2669L9.42566 1.1846L9.10075 1.09489L8.83599 1.03486L8.54406 0.98184ZM10.4032 5.30023C10.4032 4.27588 10.2002 3.29829 9.83244 2.40604C11.7623 3.28995 13.1032 5.23862 13.1032 7.50023C13.1032 10.593 10.596 13.1002 7.50322 13.1002C6.63646 13.1002 5.81597 12.9036 5.08355 12.5522C6.5419 12.0941 7.81081 11.2082 8.74322 10.0416C8.87963 10.2284 9.10028 10.3497 9.34928 10.3497C9.76349 10.3497 10.0993 10.0139 10.0993 9.59971C10.0993 9.24256 9.84965 8.94373 9.51535 8.86816C9.57741 8.75165 9.63653 8.63334 9.6926 8.51332C9.88358 8.63163 10.1088 8.69993 10.35 8.69993C11.0403 8.69993 11.6 8.14028 11.6 7.44993C11.6 6.75976 11.0406 6.20024 10.3505 6.19993C10.3853 5.90487 10.4032 5.60464 10.4032 5.30023Z" fill="currentColor"></path></svg>` : `<svg${spread(
|
|
|
|
|
|
[
|
|
|
|
|
|
{ width: escape_attribute_value(size) },
|
|
|
|
|
|
{ height: escape_attribute_value(size) },
|
|
|
|
|
|
escape_object($$restProps),
|
|
|
|
|
|
{ role: escape_attribute_value(role) },
|
|
|
|
|
|
{
|
|
|
|
|
|
"aria-label": escape_attribute_value(ariaLabel)
|
|
|
|
|
|
},
|
|
|
|
|
|
{ viewBox: "0 0 15 15" },
|
|
|
|
|
|
{ fill: escape_attribute_value(color) },
|
|
|
|
|
|
{ xmlns: "http://www.w3.org/2000/svg" }
|
|
|
|
|
|
],
|
|
|
|
|
|
{}
|
|
|
|
|
|
)}><path fill-rule="evenodd" clip-rule="evenodd" d="M2.89998 0.499976C2.89998 0.279062 2.72089 0.0999756 2.49998 0.0999756C2.27906 0.0999756 2.09998 0.279062 2.09998 0.499976V1.09998H1.49998C1.27906 1.09998 1.09998 1.27906 1.09998 1.49998C1.09998 1.72089 1.27906 1.89998 1.49998 1.89998H2.09998V2.49998C2.09998 2.72089 2.27906 2.89998 2.49998 2.89998C2.72089 2.89998 2.89998 2.72089 2.89998 2.49998V1.89998H3.49998C3.72089 1.89998 3.89998 1.72089 3.89998 1.49998C3.89998 1.27906 3.72089 1.09998 3.49998 1.09998H2.89998V0.499976ZM5.89998 3.49998C5.89998 3.27906 5.72089 3.09998 5.49998 3.09998C5.27906 3.09998 5.09998 3.27906 5.09998 3.49998V4.09998H4.49998C4.27906 4.09998 4.09998 4.27906 4.09998 4.49998C4.09998 4.72089 4.27906 4.89998 4.49998 4.89998H5.09998V5.49998C5.09998 5.72089 5.27906 5.89998 5.49998 5.89998C5.72089 5.89998 5.89998 5.72089 5.89998 5.49998V4.89998H6.49998C6.72089 4.89998 6.89998 4.72089 6.89998 4.49998C6.89998 4.27906 6.72089 4.09998 6.49998 4.09998H5.89998V3.49998ZM1.89998 6.49998C1.89998 6.27906 1.72089 6.09998 1.49998 6.09998C1.27906 6.09998 1.09998 6.27906 1.09998 6.49998V7.09998H0.499976C0.279062 7.09998 0.0999756 7.27906 0.0999756 7.49998C0.0999756 7.72089 0.279062 7.89998 0.499976 7.89998H1.09998V8.49998C1.09998 8.72089 1.27906 8.89997 1.49998 8.89997C1.72089 8.89997 1.89998 8.72089 1.89998 8.49998V7.89998H2.49998C2.72089 7.89998 2.89998 7.72089 2.89998 7.49998C2.89998 7.27906 2.72089 7.09998 2.49998 7.09998H1.89998V6.49998ZM8.54406 0.98184L8.24618 0.941586C8.03275 0.917676 7.90692 1.1655 8.02936 1.34194C8.17013 1.54479 8.29981 1.75592 8.41754 1.97445C8.91878 2.90485 9.20322 3.96932 9.20322 5.10022C9.20322 8.37201 6.82247 11.0878 3.69887 11.6097C3.45736 11.65 3.20988 11.6772 2.96008 11.6906C2.74563 11.702 2.62729 11.9535 2.77721 12.1072C2.84551 12.1773 2.91535 12.2458 2.98667 12.3128L3.05883 12.3795L3.31883 12.6045L3.50684 12.7532L3.62796 12.8433L3.81491 12.9742L3.99079 13.089C4.11175 13.1651 4.23536 13.2375 4.36157 13.3059L4.62496 13.4412L4.88553 13.5607L5.18837 13.6828L5.43169 13.7686C5.56564 13.8128 5.70149 13.8529 5.83857 13.8885C5.94262 13.9155 6.04767 13.9401 6.15405 13.9622C6.27993 13.9883 6.40713 14.0109 6.53544 14.0298L6.85241 14.0685L7.11934 14.0892C7.24637 14.0965 7.37436 14.1002 7.50322 14.1002C11.1483 14.1002 14.1032 11.1453 14.1032 7.50023C14.1032 7.25044 14.0893 7.00389 14.0623 6.76131L14.0255 6.48407C13.991 6.26083 13.9453 6.04129 13.8891 5.82642C13.8213 5.56709 13.7382 5.31398 13.6409 5.06881L13.5279 4.80132L13.4507 4.63542L13.3766 4.48666C13.2178 4.17773 13.0353 3.88295 12.8312 3.60423L12.6782 3.40352L12.4793 3.16432L12.3157 2.98361L12.1961 2.85951L12.0355 2.70246L11.8134 2.50184L11.4925 2.24191L11.2483 2.06498L10.9562 1.87446L10.6346 1.68894L10.3073 1.52378L10.1938 1.47176L9.95488 1.3706L9.67791 1.2669L9.42566 1.1846L9.10075 1.09489L8.83599 1.03486L8.54406 0.98184ZM10.4032 5.30023C10.4032 4.27588 10.2002 3.29829 9.83244 2.40604C11.7623 3.28995 13.1032 5.23862 13.1032 7.50023C13.1032 10.593 10.596 13.1002 7.50322 13.1002C6.63646 13.1002 5.81597 12.9036 5.08355 12.5522C6.5419 12.0941 7.81081 11.2082 8.74322 10.0416C8.87963 10.2284 9.10028 10.3497 9.34928 10.3497C9.76349 10.3497 10.0993 10.0139 10.0993 9.59971C10.0993 9.24256 9.84965 8.94373 9.51535 8.86816C9.57741 8.75165 9.63653 8.63334 9.6926 8.51332C9.88358 8.63163 10.1088 8.69993 10.35 8.69993C11.0403 8.69993 11.6 8.14028 11.6 7.44993C11.6 6.75976 11.0406 6.20024 10.3505 6.19993C10.3853 5.90487 10.4032 5.60464 10.4032 5.30023Z" fill="currentColor"></path></svg>`} `;
|
|
|
|
|
|
});
|
|
|
|
|
|
const SUB_OPEN_KEYS = {
|
|
|
|
|
|
ltr: [...SELECTION_KEYS, kbd.ARROW_RIGHT],
|
|
|
|
|
|
rtl: [...SELECTION_KEYS, kbd.ARROW_LEFT]
|
|
|
|
|
|
};
|
|
|
|
|
|
const SUB_CLOSE_KEYS = {
|
|
|
|
|
|
ltr: [kbd.ARROW_LEFT],
|
|
|
|
|
|
rtl: [kbd.ARROW_RIGHT]
|
|
|
|
|
|
};
|
|
|
|
|
|
const menuIdParts = ["menu", "trigger"];
|
|
|
|
|
|
const defaults$2 = {
|
|
|
|
|
|
arrowSize: 8,
|
|
|
|
|
|
positioning: {
|
|
|
|
|
|
placement: "bottom"
|
|
|
|
|
|
},
|
|
|
|
|
|
preventScroll: true,
|
|
|
|
|
|
closeOnEscape: true,
|
|
|
|
|
|
closeOnOutsideClick: true,
|
|
|
|
|
|
portal: void 0,
|
|
|
|
|
|
loop: false,
|
|
|
|
|
|
dir: "ltr",
|
|
|
|
|
|
defaultOpen: false,
|
|
|
|
|
|
typeahead: true,
|
|
|
|
|
|
closeOnItemClick: true,
|
|
|
|
|
|
onOutsideClick: void 0
|
|
|
|
|
|
};
|
|
|
|
|
|
function createMenuBuilder(opts) {
|
|
|
|
|
|
const { name, selector } = createElHelpers(opts.selector);
|
|
|
|
|
|
const { preventScroll, arrowSize, positioning, closeOnEscape, closeOnOutsideClick, portal, forceVisible, typeahead, loop, closeFocus, disableFocusFirstItem, closeOnItemClick, onOutsideClick } = opts.rootOptions;
|
|
|
|
|
|
const rootOpen = opts.rootOpen;
|
|
|
|
|
|
const rootActiveTrigger = opts.rootActiveTrigger;
|
|
|
|
|
|
const nextFocusable = opts.nextFocusable;
|
|
|
|
|
|
const prevFocusable = opts.prevFocusable;
|
|
|
|
|
|
const isUsingKeyboard = withGet.writable(false);
|
|
|
|
|
|
const lastPointerX = withGet(writable(0));
|
|
|
|
|
|
const pointerGraceIntent = withGet(writable(null));
|
|
|
|
|
|
const pointerDir = withGet(writable("right"));
|
|
|
|
|
|
const currentFocusedItem = withGet(writable(null));
|
|
|
|
|
|
const pointerMovingToSubmenu = withGet(derived([pointerDir, pointerGraceIntent], ([$pointerDir, $pointerGraceIntent]) => {
|
|
|
|
|
|
return (e) => {
|
|
|
|
|
|
const isMovingTowards = $pointerDir === $pointerGraceIntent?.side;
|
|
|
|
|
|
return isMovingTowards && isPointerInGraceArea(e, $pointerGraceIntent?.area);
|
|
|
|
|
|
};
|
|
|
|
|
|
}));
|
|
|
|
|
|
const { typed, handleTypeaheadSearch } = createTypeaheadSearch();
|
|
|
|
|
|
const rootIds = toWritableStores({ ...generateIds(menuIdParts), ...opts.ids });
|
|
|
|
|
|
const isVisible = derivedVisible({
|
|
|
|
|
|
open: rootOpen,
|
|
|
|
|
|
forceVisible,
|
|
|
|
|
|
activeTrigger: rootActiveTrigger
|
|
|
|
|
|
});
|
|
|
|
|
|
const rootMenu = makeElement(name(), {
|
|
|
|
|
|
stores: [isVisible, portal, rootIds.menu, rootIds.trigger],
|
|
|
|
|
|
returned: ([$isVisible, $portal, $rootMenuId, $rootTriggerId]) => {
|
|
|
|
|
|
return {
|
|
|
|
|
|
role: "menu",
|
|
|
|
|
|
hidden: $isVisible ? void 0 : true,
|
|
|
|
|
|
style: styleToString({
|
|
|
|
|
|
display: $isVisible ? void 0 : "none"
|
|
|
|
|
|
}),
|
|
|
|
|
|
id: $rootMenuId,
|
|
|
|
|
|
"aria-labelledby": $rootTriggerId,
|
|
|
|
|
|
"data-state": $isVisible ? "open" : "closed",
|
|
|
|
|
|
"data-portal": portalAttr($portal),
|
|
|
|
|
|
tabindex: -1
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
action: (node) => {
|
|
|
|
|
|
let unsubPopper = noop$1;
|
|
|
|
|
|
const unsubDerived = effect([isVisible, rootActiveTrigger, positioning, closeOnOutsideClick, portal, closeOnEscape], ([$isVisible, $rootActiveTrigger, $positioning, $closeOnOutsideClick, $portal, $closeOnEscape]) => {
|
|
|
|
|
|
unsubPopper();
|
|
|
|
|
|
if (!$isVisible || !$rootActiveTrigger)
|
|
|
|
|
|
return;
|
|
|
|
|
|
tick().then(() => {
|
|
|
|
|
|
unsubPopper();
|
|
|
|
|
|
setMeltMenuAttribute(node, selector);
|
|
|
|
|
|
unsubPopper = usePopper(node, {
|
|
|
|
|
|
anchorElement: $rootActiveTrigger,
|
|
|
|
|
|
open: rootOpen,
|
|
|
|
|
|
options: {
|
|
|
|
|
|
floating: $positioning,
|
|
|
|
|
|
modal: {
|
|
|
|
|
|
closeOnInteractOutside: $closeOnOutsideClick,
|
|
|
|
|
|
shouldCloseOnInteractOutside: (e) => {
|
|
|
|
|
|
onOutsideClick.get()?.(e);
|
|
|
|
|
|
if (e.defaultPrevented)
|
|
|
|
|
|
return false;
|
|
|
|
|
|
if (isHTMLElement($rootActiveTrigger) && $rootActiveTrigger.contains(e.target)) {
|
|
|
|
|
|
return false;
|
|
|
|
|
|
}
|
|
|
|
|
|
return true;
|
|
|
|
|
|
},
|
|
|
|
|
|
onClose: () => {
|
|
|
|
|
|
rootOpen.set(false);
|
|
|
|
|
|
$rootActiveTrigger.focus();
|
|
|
|
|
|
},
|
|
|
|
|
|
open: $isVisible
|
|
|
|
|
|
},
|
|
|
|
|
|
portal: getPortalDestination(node, $portal),
|
|
|
|
|
|
escapeKeydown: $closeOnEscape ? void 0 : null
|
|
|
|
|
|
}
|
|
|
|
|
|
}).destroy;
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
const unsubEvents = executeCallbacks(addMeltEventListener(node, "keydown", (e) => {
|
|
|
|
|
|
const target = e.target;
|
|
|
|
|
|
const menuEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(target) || !isHTMLElement(menuEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
const isKeyDownInside = target.closest('[role="menu"]') === menuEl;
|
|
|
|
|
|
if (!isKeyDownInside)
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (FIRST_LAST_KEYS.includes(e.key)) {
|
|
|
|
|
|
handleMenuNavigation(e, loop.get() ?? false);
|
|
|
|
|
|
}
|
|
|
|
|
|
if (e.key === kbd.TAB) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
rootOpen.set(false);
|
|
|
|
|
|
handleTabNavigation(e, nextFocusable, prevFocusable);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
const isCharacterKey = e.key.length === 1;
|
|
|
|
|
|
const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
|
|
|
|
|
|
if (!isModifierKey && isCharacterKey && typeahead.get() === true) {
|
|
|
|
|
|
handleTypeaheadSearch(e.key, getMenuItems(menuEl));
|
|
|
|
|
|
}
|
|
|
|
|
|
}));
|
|
|
|
|
|
return {
|
|
|
|
|
|
destroy() {
|
|
|
|
|
|
unsubDerived();
|
|
|
|
|
|
unsubEvents();
|
|
|
|
|
|
unsubPopper();
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const rootTrigger = makeElement(name("trigger"), {
|
|
|
|
|
|
stores: [rootOpen, rootIds.menu, rootIds.trigger],
|
|
|
|
|
|
returned: ([$rootOpen, $rootMenuId, $rootTriggerId]) => {
|
|
|
|
|
|
return {
|
|
|
|
|
|
"aria-controls": $rootMenuId,
|
|
|
|
|
|
"aria-expanded": $rootOpen,
|
|
|
|
|
|
"data-state": $rootOpen ? "open" : "closed",
|
|
|
|
|
|
id: $rootTriggerId,
|
|
|
|
|
|
tabindex: 0
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
action: (node) => {
|
|
|
|
|
|
applyAttrsIfDisabled(node);
|
|
|
|
|
|
rootActiveTrigger.update((p) => {
|
|
|
|
|
|
if (p)
|
|
|
|
|
|
return p;
|
|
|
|
|
|
return node;
|
|
|
|
|
|
});
|
|
|
|
|
|
const unsub = executeCallbacks(addMeltEventListener(node, "click", (e) => {
|
|
|
|
|
|
const $rootOpen = rootOpen.get();
|
|
|
|
|
|
const triggerEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(triggerEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
handleOpen(triggerEl);
|
|
|
|
|
|
if (!$rootOpen)
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
}), addMeltEventListener(node, "keydown", (e) => {
|
|
|
|
|
|
const triggerEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(triggerEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (!(SELECTION_KEYS.includes(e.key) || e.key === kbd.ARROW_DOWN))
|
|
|
|
|
|
return;
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
handleOpen(triggerEl);
|
|
|
|
|
|
const menuId = triggerEl.getAttribute("aria-controls");
|
|
|
|
|
|
if (!menuId)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const menu = document.getElementById(menuId);
|
|
|
|
|
|
if (!menu)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const menuItems = getMenuItems(menu);
|
|
|
|
|
|
if (!menuItems.length)
|
|
|
|
|
|
return;
|
|
|
|
|
|
handleRovingFocus(menuItems[0]);
|
|
|
|
|
|
}));
|
|
|
|
|
|
return {
|
|
|
|
|
|
destroy: unsub
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const rootArrow = makeElement(name("arrow"), {
|
|
|
|
|
|
stores: arrowSize,
|
|
|
|
|
|
returned: ($arrowSize) => ({
|
|
|
|
|
|
"data-arrow": true,
|
|
|
|
|
|
style: styleToString({
|
|
|
|
|
|
position: "absolute",
|
|
|
|
|
|
width: `var(--arrow-size, ${$arrowSize}px)`,
|
|
|
|
|
|
height: `var(--arrow-size, ${$arrowSize}px)`
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
});
|
|
|
|
|
|
const overlay = makeElement(name("overlay"), {
|
|
|
|
|
|
stores: [isVisible],
|
|
|
|
|
|
returned: ([$isVisible]) => {
|
|
|
|
|
|
return {
|
|
|
|
|
|
hidden: $isVisible ? void 0 : true,
|
|
|
|
|
|
tabindex: -1,
|
|
|
|
|
|
style: styleToString({
|
|
|
|
|
|
display: $isVisible ? void 0 : "none"
|
|
|
|
|
|
}),
|
|
|
|
|
|
"aria-hidden": "true",
|
|
|
|
|
|
"data-state": stateAttr($isVisible)
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
action: (node) => {
|
|
|
|
|
|
let unsubEscapeKeydown = noop$1;
|
|
|
|
|
|
if (closeOnEscape.get()) {
|
|
|
|
|
|
const escapeKeydown = useEscapeKeydown(node, {
|
|
|
|
|
|
handler: () => {
|
|
|
|
|
|
rootOpen.set(false);
|
|
|
|
|
|
const $rootActiveTrigger = rootActiveTrigger.get();
|
|
|
|
|
|
if ($rootActiveTrigger)
|
|
|
|
|
|
$rootActiveTrigger.focus();
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
if (escapeKeydown && escapeKeydown.destroy) {
|
|
|
|
|
|
unsubEscapeKeydown = escapeKeydown.destroy;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
const unsubPortal = effect([portal], ([$portal]) => {
|
|
|
|
|
|
if ($portal === null)
|
|
|
|
|
|
return noop$1;
|
|
|
|
|
|
const portalDestination = getPortalDestination(node, $portal);
|
|
|
|
|
|
if (portalDestination === null)
|
|
|
|
|
|
return noop$1;
|
|
|
|
|
|
return usePortal(node, portalDestination).destroy;
|
|
|
|
|
|
});
|
|
|
|
|
|
return {
|
|
|
|
|
|
destroy() {
|
|
|
|
|
|
unsubEscapeKeydown();
|
|
|
|
|
|
unsubPortal();
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const item = makeElement(name("item"), {
|
|
|
|
|
|
returned: () => {
|
|
|
|
|
|
return {
|
|
|
|
|
|
role: "menuitem",
|
|
|
|
|
|
tabindex: -1,
|
|
|
|
|
|
"data-orientation": "vertical"
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
action: (node) => {
|
|
|
|
|
|
setMeltMenuAttribute(node, selector);
|
|
|
|
|
|
applyAttrsIfDisabled(node);
|
|
|
|
|
|
const unsub = executeCallbacks(addMeltEventListener(node, "pointerdown", (e) => {
|
|
|
|
|
|
const itemEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(itemEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (isElementDisabled(itemEl)) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
}), addMeltEventListener(node, "click", (e) => {
|
|
|
|
|
|
const itemEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(itemEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (isElementDisabled(itemEl)) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (e.defaultPrevented) {
|
|
|
|
|
|
handleRovingFocus(itemEl);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (closeOnItemClick.get()) {
|
|
|
|
|
|
sleep(1).then(() => {
|
|
|
|
|
|
rootOpen.set(false);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}), addMeltEventListener(node, "keydown", (e) => {
|
|
|
|
|
|
onItemKeyDown(e);
|
|
|
|
|
|
}), addMeltEventListener(node, "pointermove", (e) => {
|
|
|
|
|
|
onMenuItemPointerMove(e);
|
|
|
|
|
|
}), addMeltEventListener(node, "pointerleave", (e) => {
|
|
|
|
|
|
onMenuItemPointerLeave(e);
|
|
|
|
|
|
}), addMeltEventListener(node, "focusin", (e) => {
|
|
|
|
|
|
onItemFocusIn(e);
|
|
|
|
|
|
}), addMeltEventListener(node, "focusout", (e) => {
|
|
|
|
|
|
onItemFocusOut(e);
|
|
|
|
|
|
}));
|
|
|
|
|
|
return {
|
|
|
|
|
|
destroy: unsub
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const group = makeElement(name("group"), {
|
|
|
|
|
|
returned: () => {
|
|
|
|
|
|
return (groupId) => ({
|
|
|
|
|
|
role: "group",
|
|
|
|
|
|
"aria-labelledby": groupId
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const groupLabel = makeElement(name("group-label"), {
|
|
|
|
|
|
returned: () => {
|
|
|
|
|
|
return (groupId) => ({
|
|
|
|
|
|
id: groupId
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const checkboxItemDefaults = {
|
|
|
|
|
|
defaultChecked: false,
|
|
|
|
|
|
disabled: false
|
|
|
|
|
|
};
|
|
|
|
|
|
const createCheckboxItem = (props) => {
|
|
|
|
|
|
const withDefaults = { ...checkboxItemDefaults, ...props };
|
|
|
|
|
|
const checkedWritable = withDefaults.checked ?? writable(withDefaults.defaultChecked ?? null);
|
|
|
|
|
|
const checked = overridable(checkedWritable, withDefaults.onCheckedChange);
|
|
|
|
|
|
const disabled = writable(withDefaults.disabled);
|
|
|
|
|
|
const checkboxItem = makeElement(name("checkbox-item"), {
|
|
|
|
|
|
stores: [checked, disabled],
|
|
|
|
|
|
returned: ([$checked, $disabled]) => {
|
|
|
|
|
|
return {
|
|
|
|
|
|
role: "menuitemcheckbox",
|
|
|
|
|
|
tabindex: -1,
|
|
|
|
|
|
"data-orientation": "vertical",
|
|
|
|
|
|
"aria-checked": isIndeterminate($checked) ? "mixed" : $checked ? "true" : "false",
|
|
|
|
|
|
"data-disabled": disabledAttr($disabled),
|
|
|
|
|
|
"data-state": getCheckedState($checked)
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
action: (node) => {
|
|
|
|
|
|
setMeltMenuAttribute(node, selector);
|
|
|
|
|
|
applyAttrsIfDisabled(node);
|
|
|
|
|
|
const unsub = executeCallbacks(addMeltEventListener(node, "pointerdown", (e) => {
|
|
|
|
|
|
const itemEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(itemEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (isElementDisabled(itemEl)) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
}), addMeltEventListener(node, "click", (e) => {
|
|
|
|
|
|
const itemEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(itemEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (isElementDisabled(itemEl)) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (e.defaultPrevented) {
|
|
|
|
|
|
handleRovingFocus(itemEl);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
checked.update((prev) => {
|
|
|
|
|
|
if (isIndeterminate(prev))
|
|
|
|
|
|
return true;
|
|
|
|
|
|
return !prev;
|
|
|
|
|
|
});
|
|
|
|
|
|
if (closeOnItemClick.get()) {
|
|
|
|
|
|
tick().then(() => {
|
|
|
|
|
|
rootOpen.set(false);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}), addMeltEventListener(node, "keydown", (e) => {
|
|
|
|
|
|
onItemKeyDown(e);
|
|
|
|
|
|
}), addMeltEventListener(node, "pointermove", (e) => {
|
|
|
|
|
|
const itemEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(itemEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (isElementDisabled(itemEl)) {
|
|
|
|
|
|
onItemLeave(e);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
onMenuItemPointerMove(e, itemEl);
|
|
|
|
|
|
}), addMeltEventListener(node, "pointerleave", (e) => {
|
|
|
|
|
|
onMenuItemPointerLeave(e);
|
|
|
|
|
|
}), addMeltEventListener(node, "focusin", (e) => {
|
|
|
|
|
|
onItemFocusIn(e);
|
|
|
|
|
|
}), addMeltEventListener(node, "focusout", (e) => {
|
|
|
|
|
|
onItemFocusOut(e);
|
|
|
|
|
|
}));
|
|
|
|
|
|
return {
|
|
|
|
|
|
destroy: unsub
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const isChecked = derived(checked, ($checked) => $checked === true);
|
|
|
|
|
|
const _isIndeterminate = derived(checked, ($checked) => $checked === "indeterminate");
|
|
|
|
|
|
return {
|
|
|
|
|
|
elements: {
|
|
|
|
|
|
checkboxItem
|
|
|
|
|
|
},
|
|
|
|
|
|
states: {
|
|
|
|
|
|
checked
|
|
|
|
|
|
},
|
|
|
|
|
|
helpers: {
|
|
|
|
|
|
isChecked,
|
|
|
|
|
|
isIndeterminate: _isIndeterminate
|
|
|
|
|
|
},
|
|
|
|
|
|
options: {
|
|
|
|
|
|
disabled
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
};
|
|
|
|
|
|
const createMenuRadioGroup = (args = {}) => {
|
|
|
|
|
|
const valueWritable = args.value ?? writable(args.defaultValue ?? null);
|
|
|
|
|
|
const value = overridable(valueWritable, args.onValueChange);
|
|
|
|
|
|
const radioGroup = makeElement(name("radio-group"), {
|
|
|
|
|
|
returned: () => ({
|
|
|
|
|
|
role: "group"
|
|
|
|
|
|
})
|
|
|
|
|
|
});
|
|
|
|
|
|
const radioItemDefaults = {
|
|
|
|
|
|
disabled: false
|
|
|
|
|
|
};
|
|
|
|
|
|
const radioItem = makeElement(name("radio-item"), {
|
|
|
|
|
|
stores: [value],
|
|
|
|
|
|
returned: ([$value]) => {
|
|
|
|
|
|
return (itemProps) => {
|
|
|
|
|
|
const { value: itemValue, disabled } = { ...radioItemDefaults, ...itemProps };
|
|
|
|
|
|
const checked = $value === itemValue;
|
|
|
|
|
|
return {
|
|
|
|
|
|
disabled,
|
|
|
|
|
|
role: "menuitemradio",
|
|
|
|
|
|
"data-state": checked ? "checked" : "unchecked",
|
|
|
|
|
|
"aria-checked": checked,
|
|
|
|
|
|
"data-disabled": disabledAttr(disabled),
|
|
|
|
|
|
"data-value": itemValue,
|
|
|
|
|
|
"data-orientation": "vertical",
|
|
|
|
|
|
tabindex: -1
|
|
|
|
|
|
};
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
action: (node) => {
|
|
|
|
|
|
setMeltMenuAttribute(node, selector);
|
|
|
|
|
|
const unsub = executeCallbacks(addMeltEventListener(node, "pointerdown", (e) => {
|
|
|
|
|
|
const itemEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(itemEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
const itemValue = node.dataset.value;
|
|
|
|
|
|
const disabled = node.dataset.disabled;
|
|
|
|
|
|
if (disabled || itemValue === void 0) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
}), addMeltEventListener(node, "click", (e) => {
|
|
|
|
|
|
const itemEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(itemEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
const itemValue = node.dataset.value;
|
|
|
|
|
|
const disabled = node.dataset.disabled;
|
|
|
|
|
|
if (disabled || itemValue === void 0) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (e.defaultPrevented) {
|
|
|
|
|
|
if (!isHTMLElement(itemEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
handleRovingFocus(itemEl);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
value.set(itemValue);
|
|
|
|
|
|
if (closeOnItemClick.get()) {
|
|
|
|
|
|
tick().then(() => {
|
|
|
|
|
|
rootOpen.set(false);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}), addMeltEventListener(node, "keydown", (e) => {
|
|
|
|
|
|
onItemKeyDown(e);
|
|
|
|
|
|
}), addMeltEventListener(node, "pointermove", (e) => {
|
|
|
|
|
|
const itemEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(itemEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
const itemValue = node.dataset.value;
|
|
|
|
|
|
const disabled = node.dataset.disabled;
|
|
|
|
|
|
if (disabled || itemValue === void 0) {
|
|
|
|
|
|
onItemLeave(e);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
onMenuItemPointerMove(e, itemEl);
|
|
|
|
|
|
}), addMeltEventListener(node, "pointerleave", (e) => {
|
|
|
|
|
|
onMenuItemPointerLeave(e);
|
|
|
|
|
|
}), addMeltEventListener(node, "focusin", (e) => {
|
|
|
|
|
|
onItemFocusIn(e);
|
|
|
|
|
|
}), addMeltEventListener(node, "focusout", (e) => {
|
|
|
|
|
|
onItemFocusOut(e);
|
|
|
|
|
|
}));
|
|
|
|
|
|
return {
|
|
|
|
|
|
destroy: unsub
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const isChecked = derived(value, ($value) => {
|
|
|
|
|
|
return (itemValue) => {
|
|
|
|
|
|
return $value === itemValue;
|
|
|
|
|
|
};
|
|
|
|
|
|
});
|
|
|
|
|
|
return {
|
|
|
|
|
|
elements: {
|
|
|
|
|
|
radioGroup,
|
|
|
|
|
|
radioItem
|
|
|
|
|
|
},
|
|
|
|
|
|
states: {
|
|
|
|
|
|
value
|
|
|
|
|
|
},
|
|
|
|
|
|
helpers: {
|
|
|
|
|
|
isChecked
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
};
|
|
|
|
|
|
const { elements: { root: separator } } = createSeparator({
|
|
|
|
|
|
orientation: "horizontal"
|
|
|
|
|
|
});
|
|
|
|
|
|
const subMenuDefaults = {
|
|
|
|
|
|
...defaults$2,
|
|
|
|
|
|
disabled: false,
|
|
|
|
|
|
positioning: {
|
|
|
|
|
|
placement: "right-start",
|
|
|
|
|
|
gutter: 8
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
const createSubmenu = (args) => {
|
|
|
|
|
|
const withDefaults = { ...subMenuDefaults, ...args };
|
|
|
|
|
|
const subOpenWritable = withDefaults.open ?? writable(false);
|
|
|
|
|
|
const subOpen = overridable(subOpenWritable, withDefaults?.onOpenChange);
|
|
|
|
|
|
const options = toWritableStores(omit(withDefaults, "ids"));
|
|
|
|
|
|
const { positioning: positioning2, arrowSize: arrowSize2, disabled } = options;
|
|
|
|
|
|
const subActiveTrigger = withGet(writable(null));
|
|
|
|
|
|
const subOpenTimer = withGet(writable(null));
|
|
|
|
|
|
const pointerGraceTimer = withGet(writable(0));
|
|
|
|
|
|
const subIds = toWritableStores({ ...generateIds(menuIdParts), ...withDefaults.ids });
|
|
|
|
|
|
safeOnMount(() => {
|
|
|
|
|
|
const subTrigger2 = document.getElementById(subIds.trigger.get());
|
|
|
|
|
|
if (subTrigger2) {
|
|
|
|
|
|
subActiveTrigger.set(subTrigger2);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const subIsVisible = derivedVisible({
|
|
|
|
|
|
open: subOpen,
|
|
|
|
|
|
forceVisible,
|
|
|
|
|
|
activeTrigger: subActiveTrigger
|
|
|
|
|
|
});
|
|
|
|
|
|
const subMenu = makeElement(name("submenu"), {
|
|
|
|
|
|
stores: [subIsVisible, subIds.menu, subIds.trigger],
|
|
|
|
|
|
returned: ([$subIsVisible, $subMenuId, $subTriggerId]) => {
|
|
|
|
|
|
return {
|
|
|
|
|
|
role: "menu",
|
|
|
|
|
|
hidden: $subIsVisible ? void 0 : true,
|
|
|
|
|
|
style: styleToString({
|
|
|
|
|
|
display: $subIsVisible ? void 0 : "none"
|
|
|
|
|
|
}),
|
|
|
|
|
|
id: $subMenuId,
|
|
|
|
|
|
"aria-labelledby": $subTriggerId,
|
|
|
|
|
|
"data-state": $subIsVisible ? "open" : "closed",
|
|
|
|
|
|
// unit tests fail on `.closest` if the id starts with a number
|
|
|
|
|
|
// so using a data attribute
|
|
|
|
|
|
"data-id": $subMenuId,
|
|
|
|
|
|
tabindex: -1
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
action: (node) => {
|
|
|
|
|
|
let unsubPopper = noop$1;
|
|
|
|
|
|
const unsubDerived = effect([subIsVisible, positioning2], ([$subIsVisible, $positioning]) => {
|
|
|
|
|
|
unsubPopper();
|
|
|
|
|
|
if (!$subIsVisible)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const activeTrigger = subActiveTrigger.get();
|
|
|
|
|
|
if (!activeTrigger)
|
|
|
|
|
|
return;
|
|
|
|
|
|
tick().then(() => {
|
|
|
|
|
|
unsubPopper();
|
|
|
|
|
|
const parentMenuEl = getParentMenu(activeTrigger);
|
|
|
|
|
|
unsubPopper = usePopper(node, {
|
|
|
|
|
|
anchorElement: activeTrigger,
|
|
|
|
|
|
open: subOpen,
|
|
|
|
|
|
options: {
|
|
|
|
|
|
floating: $positioning,
|
|
|
|
|
|
portal: isHTMLElement(parentMenuEl) ? parentMenuEl : void 0,
|
|
|
|
|
|
modal: null,
|
|
|
|
|
|
focusTrap: null,
|
|
|
|
|
|
escapeKeydown: null
|
|
|
|
|
|
}
|
|
|
|
|
|
}).destroy;
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
const unsubEvents = executeCallbacks(addMeltEventListener(node, "keydown", (e) => {
|
|
|
|
|
|
if (e.key === kbd.ESCAPE) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
const target = e.target;
|
|
|
|
|
|
const menuEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(target) || !isHTMLElement(menuEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
const isKeyDownInside = target.closest('[role="menu"]') === menuEl;
|
|
|
|
|
|
if (!isKeyDownInside)
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (FIRST_LAST_KEYS.includes(e.key)) {
|
|
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
|
|
handleMenuNavigation(e, loop.get() ?? false);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
const isCloseKey = SUB_CLOSE_KEYS["ltr"].includes(e.key);
|
|
|
|
|
|
const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
|
|
|
|
|
|
const isCharacterKey = e.key.length === 1;
|
|
|
|
|
|
if (isCloseKey) {
|
|
|
|
|
|
const $subActiveTrigger = subActiveTrigger.get();
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
subOpen.update(() => {
|
|
|
|
|
|
if ($subActiveTrigger) {
|
|
|
|
|
|
handleRovingFocus($subActiveTrigger);
|
|
|
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
|
|
|
});
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (e.key === kbd.TAB) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
rootOpen.set(false);
|
|
|
|
|
|
handleTabNavigation(e, nextFocusable, prevFocusable);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (!isModifierKey && isCharacterKey && typeahead.get() === true) {
|
|
|
|
|
|
handleTypeaheadSearch(e.key, getMenuItems(menuEl));
|
|
|
|
|
|
}
|
|
|
|
|
|
}), addMeltEventListener(node, "pointermove", (e) => {
|
|
|
|
|
|
onMenuPointerMove(e);
|
|
|
|
|
|
}), addMeltEventListener(node, "focusout", (e) => {
|
|
|
|
|
|
const $subActiveTrigger = subActiveTrigger.get();
|
|
|
|
|
|
if (isUsingKeyboard.get()) {
|
|
|
|
|
|
const target = e.target;
|
|
|
|
|
|
const submenuEl = document.getElementById(subIds.menu.get());
|
|
|
|
|
|
if (!isHTMLElement(submenuEl) || !isHTMLElement(target))
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (!submenuEl.contains(target) && target !== $subActiveTrigger) {
|
|
|
|
|
|
subOpen.set(false);
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
const menuEl = e.currentTarget;
|
|
|
|
|
|
const relatedTarget = e.relatedTarget;
|
|
|
|
|
|
if (!isHTMLElement(relatedTarget) || !isHTMLElement(menuEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (!menuEl.contains(relatedTarget) && relatedTarget !== $subActiveTrigger) {
|
|
|
|
|
|
subOpen.set(false);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}));
|
|
|
|
|
|
return {
|
|
|
|
|
|
destroy() {
|
|
|
|
|
|
unsubDerived();
|
|
|
|
|
|
unsubPopper();
|
|
|
|
|
|
unsubEvents();
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const subTrigger = makeElement(name("subtrigger"), {
|
|
|
|
|
|
stores: [subOpen, disabled, subIds.menu, subIds.trigger],
|
|
|
|
|
|
returned: ([$subOpen, $disabled, $subMenuId, $subTriggerId]) => {
|
|
|
|
|
|
return {
|
|
|
|
|
|
role: "menuitem",
|
|
|
|
|
|
id: $subTriggerId,
|
|
|
|
|
|
tabindex: -1,
|
|
|
|
|
|
"aria-controls": $subMenuId,
|
|
|
|
|
|
"aria-expanded": $subOpen,
|
|
|
|
|
|
"data-state": $subOpen ? "open" : "closed",
|
|
|
|
|
|
"data-disabled": disabledAttr($disabled),
|
|
|
|
|
|
"aria-haspopop": "menu"
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
action: (node) => {
|
|
|
|
|
|
setMeltMenuAttribute(node, selector);
|
|
|
|
|
|
applyAttrsIfDisabled(node);
|
|
|
|
|
|
subActiveTrigger.update((p) => {
|
|
|
|
|
|
if (p)
|
|
|
|
|
|
return p;
|
|
|
|
|
|
return node;
|
|
|
|
|
|
});
|
|
|
|
|
|
const unsubTimer = () => {
|
|
|
|
|
|
clearTimerStore(subOpenTimer);
|
|
|
|
|
|
window.clearTimeout(pointerGraceTimer.get());
|
|
|
|
|
|
pointerGraceIntent.set(null);
|
|
|
|
|
|
};
|
|
|
|
|
|
const unsubEvents = executeCallbacks(addMeltEventListener(node, "click", (e) => {
|
|
|
|
|
|
if (e.defaultPrevented)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const triggerEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(triggerEl) || isElementDisabled(triggerEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
handleRovingFocus(triggerEl);
|
|
|
|
|
|
if (!subOpen.get()) {
|
|
|
|
|
|
subOpen.update((prev) => {
|
|
|
|
|
|
const isAlreadyOpen = prev;
|
|
|
|
|
|
if (!isAlreadyOpen) {
|
|
|
|
|
|
subActiveTrigger.set(triggerEl);
|
|
|
|
|
|
return !prev;
|
|
|
|
|
|
}
|
|
|
|
|
|
return prev;
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}), addMeltEventListener(node, "keydown", (e) => {
|
|
|
|
|
|
const $typed = typed.get();
|
|
|
|
|
|
const triggerEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(triggerEl) || isElementDisabled(triggerEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
const isTypingAhead = $typed.length > 0;
|
|
|
|
|
|
if (isTypingAhead && e.key === kbd.SPACE)
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (SUB_OPEN_KEYS["ltr"].includes(e.key)) {
|
|
|
|
|
|
if (!subOpen.get()) {
|
|
|
|
|
|
triggerEl.click();
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
const menuId = triggerEl.getAttribute("aria-controls");
|
|
|
|
|
|
if (!menuId)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const menuEl = document.getElementById(menuId);
|
|
|
|
|
|
if (!isHTMLElement(menuEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
const firstItem = getMenuItems(menuEl)[0];
|
|
|
|
|
|
handleRovingFocus(firstItem);
|
|
|
|
|
|
}
|
|
|
|
|
|
}), addMeltEventListener(node, "pointermove", (e) => {
|
|
|
|
|
|
if (!isMouse(e))
|
|
|
|
|
|
return;
|
|
|
|
|
|
onItemEnter(e);
|
|
|
|
|
|
if (e.defaultPrevented)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const triggerEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(triggerEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (!isFocusWithinSubmenu(subIds.menu.get())) {
|
|
|
|
|
|
handleRovingFocus(triggerEl);
|
|
|
|
|
|
}
|
|
|
|
|
|
const openTimer = subOpenTimer.get();
|
|
|
|
|
|
if (!subOpen.get() && !openTimer && !isElementDisabled(triggerEl)) {
|
|
|
|
|
|
subOpenTimer.set(window.setTimeout(() => {
|
|
|
|
|
|
subOpen.update(() => {
|
|
|
|
|
|
subActiveTrigger.set(triggerEl);
|
|
|
|
|
|
return true;
|
|
|
|
|
|
});
|
|
|
|
|
|
clearTimerStore(subOpenTimer);
|
|
|
|
|
|
}, 100));
|
|
|
|
|
|
}
|
|
|
|
|
|
}), addMeltEventListener(node, "pointerleave", (e) => {
|
|
|
|
|
|
if (!isMouse(e))
|
|
|
|
|
|
return;
|
|
|
|
|
|
clearTimerStore(subOpenTimer);
|
|
|
|
|
|
const submenuEl = document.getElementById(subIds.menu.get());
|
|
|
|
|
|
const contentRect = submenuEl?.getBoundingClientRect();
|
|
|
|
|
|
if (contentRect) {
|
|
|
|
|
|
const side = submenuEl?.dataset.side;
|
|
|
|
|
|
const rightSide = side === "right";
|
|
|
|
|
|
const bleed = rightSide ? -5 : 5;
|
|
|
|
|
|
const contentNearEdge = contentRect[rightSide ? "left" : "right"];
|
|
|
|
|
|
const contentFarEdge = contentRect[rightSide ? "right" : "left"];
|
|
|
|
|
|
pointerGraceIntent.set({
|
|
|
|
|
|
area: [
|
|
|
|
|
|
// Apply a bleed on clientX to ensure that our exit point is
|
|
|
|
|
|
// consistently within polygon bounds
|
|
|
|
|
|
{ x: e.clientX + bleed, y: e.clientY },
|
|
|
|
|
|
{ x: contentNearEdge, y: contentRect.top },
|
|
|
|
|
|
{ x: contentFarEdge, y: contentRect.top },
|
|
|
|
|
|
{ x: contentFarEdge, y: contentRect.bottom },
|
|
|
|
|
|
{ x: contentNearEdge, y: contentRect.bottom }
|
|
|
|
|
|
],
|
|
|
|
|
|
side
|
|
|
|
|
|
});
|
|
|
|
|
|
window.clearTimeout(pointerGraceTimer.get());
|
|
|
|
|
|
pointerGraceTimer.set(window.setTimeout(() => {
|
|
|
|
|
|
pointerGraceIntent.set(null);
|
|
|
|
|
|
}, 300));
|
|
|
|
|
|
} else {
|
|
|
|
|
|
onTriggerLeave(e);
|
|
|
|
|
|
if (e.defaultPrevented)
|
|
|
|
|
|
return;
|
|
|
|
|
|
pointerGraceIntent.set(null);
|
|
|
|
|
|
}
|
|
|
|
|
|
}), addMeltEventListener(node, "focusout", (e) => {
|
|
|
|
|
|
const triggerEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(triggerEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
removeHighlight(triggerEl);
|
|
|
|
|
|
const relatedTarget = e.relatedTarget;
|
|
|
|
|
|
if (!isHTMLElement(relatedTarget))
|
|
|
|
|
|
return;
|
|
|
|
|
|
const menuId = triggerEl.getAttribute("aria-controls");
|
|
|
|
|
|
if (!menuId)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const menu = document.getElementById(menuId);
|
|
|
|
|
|
if (menu && !menu.contains(relatedTarget)) {
|
|
|
|
|
|
subOpen.set(false);
|
|
|
|
|
|
}
|
|
|
|
|
|
}), addMeltEventListener(node, "focusin", (e) => {
|
|
|
|
|
|
onItemFocusIn(e);
|
|
|
|
|
|
}));
|
|
|
|
|
|
return {
|
|
|
|
|
|
destroy() {
|
|
|
|
|
|
unsubTimer();
|
|
|
|
|
|
unsubEvents();
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const subArrow = makeElement(name("subarrow"), {
|
|
|
|
|
|
stores: arrowSize2,
|
|
|
|
|
|
returned: ($arrowSize) => ({
|
|
|
|
|
|
"data-arrow": true,
|
|
|
|
|
|
style: styleToString({
|
|
|
|
|
|
position: "absolute",
|
|
|
|
|
|
width: `var(--arrow-size, ${$arrowSize}px)`,
|
|
|
|
|
|
height: `var(--arrow-size, ${$arrowSize}px)`
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
});
|
|
|
|
|
|
effect([rootOpen], ([$rootOpen]) => {
|
|
|
|
|
|
if (!$rootOpen) {
|
|
|
|
|
|
subActiveTrigger.set(null);
|
|
|
|
|
|
subOpen.set(false);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
effect([pointerGraceIntent], ([$pointerGraceIntent]) => {
|
|
|
|
|
|
if (!isBrowser || $pointerGraceIntent)
|
|
|
|
|
|
return;
|
|
|
|
|
|
window.clearTimeout(pointerGraceTimer.get());
|
|
|
|
|
|
});
|
|
|
|
|
|
effect([subOpen], ([$subOpen]) => {
|
|
|
|
|
|
if (!isBrowser)
|
|
|
|
|
|
return;
|
|
|
|
|
|
if ($subOpen && isUsingKeyboard.get()) {
|
|
|
|
|
|
sleep(1).then(() => {
|
|
|
|
|
|
const menuEl = document.getElementById(subIds.menu.get());
|
|
|
|
|
|
if (!menuEl)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const menuItems = getMenuItems(menuEl);
|
|
|
|
|
|
if (!menuItems.length)
|
|
|
|
|
|
return;
|
|
|
|
|
|
handleRovingFocus(menuItems[0]);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
if (!$subOpen) {
|
|
|
|
|
|
const focusedItem = currentFocusedItem.get();
|
|
|
|
|
|
const subTriggerEl = document.getElementById(subIds.trigger.get());
|
|
|
|
|
|
if (focusedItem) {
|
|
|
|
|
|
sleep(1).then(() => {
|
|
|
|
|
|
const menuEl = document.getElementById(subIds.menu.get());
|
|
|
|
|
|
if (!menuEl)
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (menuEl.contains(focusedItem)) {
|
|
|
|
|
|
removeHighlight(focusedItem);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
if (!subTriggerEl || document.activeElement === subTriggerEl)
|
|
|
|
|
|
return;
|
|
|
|
|
|
removeHighlight(subTriggerEl);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
return {
|
|
|
|
|
|
ids: subIds,
|
|
|
|
|
|
elements: {
|
|
|
|
|
|
subTrigger,
|
|
|
|
|
|
subMenu,
|
|
|
|
|
|
subArrow
|
|
|
|
|
|
},
|
|
|
|
|
|
states: {
|
|
|
|
|
|
subOpen
|
|
|
|
|
|
},
|
|
|
|
|
|
options
|
|
|
|
|
|
};
|
|
|
|
|
|
};
|
|
|
|
|
|
safeOnMount(() => {
|
|
|
|
|
|
const triggerEl = document.getElementById(rootIds.trigger.get());
|
|
|
|
|
|
if (isHTMLElement(triggerEl) && rootOpen.get()) {
|
|
|
|
|
|
rootActiveTrigger.set(triggerEl);
|
|
|
|
|
|
}
|
|
|
|
|
|
const unsubs = [];
|
|
|
|
|
|
const handlePointer = () => isUsingKeyboard.set(false);
|
|
|
|
|
|
const handleKeyDown = () => {
|
|
|
|
|
|
isUsingKeyboard.set(true);
|
|
|
|
|
|
unsubs.push(executeCallbacks(addEventListener(document, "pointerdown", handlePointer, { capture: true, once: true }), addEventListener(document, "pointermove", handlePointer, { capture: true, once: true })));
|
|
|
|
|
|
};
|
|
|
|
|
|
const keydownListener = (e) => {
|
|
|
|
|
|
if (e.key === kbd.ESCAPE && closeOnEscape.get()) {
|
|
|
|
|
|
rootOpen.set(false);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
unsubs.push(addEventListener(document, "keydown", handleKeyDown, { capture: true }));
|
|
|
|
|
|
unsubs.push(addEventListener(document, "keydown", keydownListener));
|
|
|
|
|
|
return () => {
|
|
|
|
|
|
unsubs.forEach((unsub) => unsub());
|
|
|
|
|
|
};
|
|
|
|
|
|
});
|
|
|
|
|
|
effect([rootOpen, currentFocusedItem], ([$rootOpen, $currentFocusedItem]) => {
|
|
|
|
|
|
if (!$rootOpen && $currentFocusedItem) {
|
|
|
|
|
|
removeHighlight($currentFocusedItem);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
effect([rootOpen], ([$rootOpen]) => {
|
|
|
|
|
|
if (!isBrowser)
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (!$rootOpen) {
|
|
|
|
|
|
const $rootActiveTrigger = rootActiveTrigger.get();
|
|
|
|
|
|
if (!$rootActiveTrigger)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const $closeFocus = closeFocus.get();
|
|
|
|
|
|
if (!$rootOpen && $rootActiveTrigger) {
|
|
|
|
|
|
handleFocus({ prop: $closeFocus, defaultEl: $rootActiveTrigger });
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
effect([rootOpen, preventScroll], ([$rootOpen, $preventScroll]) => {
|
|
|
|
|
|
if (!isBrowser)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const unsubs = [];
|
|
|
|
|
|
if (opts.removeScroll && $rootOpen && $preventScroll) {
|
|
|
|
|
|
unsubs.push(removeScroll());
|
|
|
|
|
|
}
|
|
|
|
|
|
sleep(1).then(() => {
|
|
|
|
|
|
const menuEl = document.getElementById(rootIds.menu.get());
|
|
|
|
|
|
if (menuEl && $rootOpen && isUsingKeyboard.get()) {
|
|
|
|
|
|
if (disableFocusFirstItem.get()) {
|
|
|
|
|
|
handleRovingFocus(menuEl);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
const menuItems = getMenuItems(menuEl);
|
|
|
|
|
|
if (!menuItems.length)
|
|
|
|
|
|
return;
|
|
|
|
|
|
handleRovingFocus(menuItems[0]);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
return () => {
|
|
|
|
|
|
unsubs.forEach((unsub) => unsub());
|
|
|
|
|
|
};
|
|
|
|
|
|
});
|
|
|
|
|
|
effect(rootOpen, ($rootOpen) => {
|
|
|
|
|
|
if (!isBrowser)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const handlePointer = () => isUsingKeyboard.set(false);
|
|
|
|
|
|
const handleKeyDown = (e) => {
|
|
|
|
|
|
isUsingKeyboard.set(true);
|
|
|
|
|
|
if (e.key === kbd.ESCAPE && $rootOpen && closeOnEscape.get()) {
|
|
|
|
|
|
rootOpen.set(false);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
return executeCallbacks(addEventListener(document, "pointerdown", handlePointer, { capture: true, once: true }), addEventListener(document, "pointermove", handlePointer, { capture: true, once: true }), addEventListener(document, "keydown", handleKeyDown, { capture: true }));
|
|
|
|
|
|
});
|
|
|
|
|
|
function handleOpen(triggerEl) {
|
|
|
|
|
|
rootOpen.update((prev) => {
|
|
|
|
|
|
const isOpen = !prev;
|
|
|
|
|
|
if (isOpen) {
|
|
|
|
|
|
nextFocusable.set(getNextFocusable(triggerEl));
|
|
|
|
|
|
prevFocusable.set(getPreviousFocusable(triggerEl));
|
|
|
|
|
|
rootActiveTrigger.set(triggerEl);
|
|
|
|
|
|
}
|
|
|
|
|
|
return isOpen;
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function onItemFocusIn(e) {
|
|
|
|
|
|
const itemEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(itemEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
const $currentFocusedItem = currentFocusedItem.get();
|
|
|
|
|
|
if ($currentFocusedItem) {
|
|
|
|
|
|
removeHighlight($currentFocusedItem);
|
|
|
|
|
|
}
|
|
|
|
|
|
addHighlight(itemEl);
|
|
|
|
|
|
currentFocusedItem.set(itemEl);
|
|
|
|
|
|
}
|
|
|
|
|
|
function onItemFocusOut(e) {
|
|
|
|
|
|
const itemEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(itemEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
removeHighlight(itemEl);
|
|
|
|
|
|
}
|
|
|
|
|
|
function onItemEnter(e) {
|
|
|
|
|
|
if (isPointerMovingToSubmenu(e)) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function onItemLeave(e) {
|
|
|
|
|
|
if (isPointerMovingToSubmenu(e)) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
const target = e.target;
|
|
|
|
|
|
if (!isHTMLElement(target))
|
|
|
|
|
|
return;
|
|
|
|
|
|
const parentMenuEl = getParentMenu(target);
|
|
|
|
|
|
if (!parentMenuEl)
|
|
|
|
|
|
return;
|
|
|
|
|
|
handleRovingFocus(parentMenuEl);
|
|
|
|
|
|
}
|
|
|
|
|
|
function onTriggerLeave(e) {
|
|
|
|
|
|
if (isPointerMovingToSubmenu(e)) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function onMenuPointerMove(e) {
|
|
|
|
|
|
if (!isMouse(e))
|
|
|
|
|
|
return;
|
|
|
|
|
|
const target = e.target;
|
|
|
|
|
|
const currentTarget = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(currentTarget) || !isHTMLElement(target))
|
|
|
|
|
|
return;
|
|
|
|
|
|
const $lastPointerX = lastPointerX.get();
|
|
|
|
|
|
const pointerXHasChanged = $lastPointerX !== e.clientX;
|
|
|
|
|
|
if (currentTarget.contains(target) && pointerXHasChanged) {
|
|
|
|
|
|
const newDir = e.clientX > $lastPointerX ? "right" : "left";
|
|
|
|
|
|
pointerDir.set(newDir);
|
|
|
|
|
|
lastPointerX.set(e.clientX);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function onMenuItemPointerMove(e, currTarget = null) {
|
|
|
|
|
|
if (!isMouse(e))
|
|
|
|
|
|
return;
|
|
|
|
|
|
onItemEnter(e);
|
|
|
|
|
|
if (e.defaultPrevented)
|
|
|
|
|
|
return;
|
|
|
|
|
|
if (currTarget) {
|
|
|
|
|
|
handleRovingFocus(currTarget);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
const currentTarget = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(currentTarget))
|
|
|
|
|
|
return;
|
|
|
|
|
|
handleRovingFocus(currentTarget);
|
|
|
|
|
|
}
|
|
|
|
|
|
function onMenuItemPointerLeave(e) {
|
|
|
|
|
|
if (!isMouse(e))
|
|
|
|
|
|
return;
|
|
|
|
|
|
onItemLeave(e);
|
|
|
|
|
|
}
|
|
|
|
|
|
function onItemKeyDown(e) {
|
|
|
|
|
|
const $typed = typed.get();
|
|
|
|
|
|
const isTypingAhead = $typed.length > 0;
|
|
|
|
|
|
if (isTypingAhead && e.key === kbd.SPACE) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (SELECTION_KEYS.includes(e.key)) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
const itemEl = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(itemEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
itemEl.click();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function isIndeterminate(checked) {
|
|
|
|
|
|
return checked === "indeterminate";
|
|
|
|
|
|
}
|
|
|
|
|
|
function getCheckedState(checked) {
|
|
|
|
|
|
return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
|
|
|
|
|
|
}
|
|
|
|
|
|
function isPointerMovingToSubmenu(e) {
|
|
|
|
|
|
return pointerMovingToSubmenu.get()(e);
|
|
|
|
|
|
}
|
|
|
|
|
|
function getParentMenu(element) {
|
|
|
|
|
|
const parentMenuEl = element.closest('[role="menu"]');
|
|
|
|
|
|
if (!isHTMLElement(parentMenuEl))
|
|
|
|
|
|
return null;
|
|
|
|
|
|
return parentMenuEl;
|
|
|
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
|
|
|
elements: {
|
|
|
|
|
|
trigger: rootTrigger,
|
|
|
|
|
|
menu: rootMenu,
|
|
|
|
|
|
overlay,
|
|
|
|
|
|
item,
|
|
|
|
|
|
group,
|
|
|
|
|
|
groupLabel,
|
|
|
|
|
|
arrow: rootArrow,
|
|
|
|
|
|
separator
|
|
|
|
|
|
},
|
|
|
|
|
|
builders: {
|
|
|
|
|
|
createCheckboxItem,
|
|
|
|
|
|
createSubmenu,
|
|
|
|
|
|
createMenuRadioGroup
|
|
|
|
|
|
},
|
|
|
|
|
|
states: {
|
|
|
|
|
|
open: rootOpen
|
|
|
|
|
|
},
|
|
|
|
|
|
helpers: {
|
|
|
|
|
|
handleTypeaheadSearch
|
|
|
|
|
|
},
|
|
|
|
|
|
ids: rootIds,
|
|
|
|
|
|
options: opts.rootOptions
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
function handleTabNavigation(e, nextFocusable, prevFocusable) {
|
|
|
|
|
|
if (e.shiftKey) {
|
|
|
|
|
|
const $prevFocusable = prevFocusable.get();
|
|
|
|
|
|
if ($prevFocusable) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
sleep(1).then(() => $prevFocusable.focus());
|
|
|
|
|
|
prevFocusable.set(null);
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
const $nextFocusable = nextFocusable.get();
|
|
|
|
|
|
if ($nextFocusable) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
sleep(1).then(() => $nextFocusable.focus());
|
|
|
|
|
|
nextFocusable.set(null);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function getMenuItems(menuElement) {
|
|
|
|
|
|
return Array.from(menuElement.querySelectorAll(`[data-melt-menu-id="${menuElement.id}"]`)).filter((item) => isHTMLElement(item));
|
|
|
|
|
|
}
|
|
|
|
|
|
function applyAttrsIfDisabled(element) {
|
|
|
|
|
|
if (!element || !isElementDisabled(element))
|
|
|
|
|
|
return;
|
|
|
|
|
|
element.setAttribute("data-disabled", "");
|
|
|
|
|
|
element.setAttribute("aria-disabled", "true");
|
|
|
|
|
|
}
|
|
|
|
|
|
function clearTimerStore(timerStore) {
|
|
|
|
|
|
if (!isBrowser)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const timer = timerStore.get();
|
|
|
|
|
|
if (timer) {
|
|
|
|
|
|
window.clearTimeout(timer);
|
|
|
|
|
|
timerStore.set(null);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function isMouse(e) {
|
|
|
|
|
|
return e.pointerType === "mouse";
|
|
|
|
|
|
}
|
|
|
|
|
|
function setMeltMenuAttribute(element, selector) {
|
|
|
|
|
|
if (!element)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const menuEl = element.closest(`${selector()}, ${selector("submenu")}`);
|
|
|
|
|
|
if (!isHTMLElement(menuEl))
|
|
|
|
|
|
return;
|
|
|
|
|
|
element.setAttribute("data-melt-menu-id", menuEl.id);
|
|
|
|
|
|
}
|
|
|
|
|
|
function handleMenuNavigation(e, loop) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
const currentFocusedItem = document.activeElement;
|
|
|
|
|
|
const currentTarget = e.currentTarget;
|
|
|
|
|
|
if (!isHTMLElement(currentFocusedItem) || !isHTMLElement(currentTarget))
|
|
|
|
|
|
return;
|
|
|
|
|
|
const menuItems = getMenuItems(currentTarget);
|
|
|
|
|
|
if (!menuItems.length)
|
|
|
|
|
|
return;
|
|
|
|
|
|
const candidateNodes = menuItems.filter((item) => {
|
|
|
|
|
|
if (item.hasAttribute("data-disabled") || item.getAttribute("disabled") === "true") {
|
|
|
|
|
|
return false;
|
|
|
|
|
|
}
|
|
|
|
|
|
return true;
|
|
|
|
|
|
});
|
|
|
|
|
|
const currentIndex = candidateNodes.indexOf(currentFocusedItem);
|
|
|
|
|
|
let nextIndex;
|
|
|
|
|
|
switch (e.key) {
|
|
|
|
|
|
case kbd.ARROW_DOWN:
|
|
|
|
|
|
if (loop) {
|
|
|
|
|
|
nextIndex = currentIndex < candidateNodes.length - 1 ? currentIndex + 1 : 0;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
nextIndex = currentIndex < candidateNodes.length - 1 ? currentIndex + 1 : currentIndex;
|
|
|
|
|
|
}
|
|
|
|
|
|
break;
|
|
|
|
|
|
case kbd.ARROW_UP:
|
|
|
|
|
|
if (loop) {
|
|
|
|
|
|
nextIndex = currentIndex > 0 ? currentIndex - 1 : candidateNodes.length - 1;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
nextIndex = currentIndex < 0 ? candidateNodes.length - 1 : currentIndex > 0 ? currentIndex - 1 : 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
break;
|
|
|
|
|
|
case kbd.HOME:
|
|
|
|
|
|
nextIndex = 0;
|
|
|
|
|
|
break;
|
|
|
|
|
|
case kbd.END:
|
|
|
|
|
|
nextIndex = candidateNodes.length - 1;
|
|
|
|
|
|
break;
|
|
|
|
|
|
default:
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
handleRovingFocus(candidateNodes[nextIndex]);
|
|
|
|
|
|
}
|
|
|
|
|
|
function isPointerInGraceArea(e, area) {
|
|
|
|
|
|
if (!area)
|
|
|
|
|
|
return false;
|
|
|
|
|
|
const cursorPos = { x: e.clientX, y: e.clientY };
|
|
|
|
|
|
return isPointInPolygon(cursorPos, area);
|
|
|
|
|
|
}
|
|
|
|
|
|
function isPointInPolygon(point, polygon) {
|
|
|
|
|
|
const { x, y } = point;
|
|
|
|
|
|
let inside = false;
|
|
|
|
|
|
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
|
|
|
|
|
const xi = polygon[i].x;
|
|
|
|
|
|
const yi = polygon[i].y;
|
|
|
|
|
|
const xj = polygon[j].x;
|
|
|
|
|
|
const yj = polygon[j].y;
|
|
|
|
|
|
const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
|
|
|
|
|
|
if (intersect)
|
|
|
|
|
|
inside = !inside;
|
|
|
|
|
|
}
|
|
|
|
|
|
return inside;
|
|
|
|
|
|
}
|
|
|
|
|
|
function isFocusWithinSubmenu(submenuId) {
|
|
|
|
|
|
const activeEl = document.activeElement;
|
|
|
|
|
|
if (!isHTMLElement(activeEl))
|
|
|
|
|
|
return false;
|
|
|
|
|
|
const submenuEl = activeEl.closest(`[data-id="${submenuId}"]`);
|
|
|
|
|
|
return isHTMLElement(submenuEl);
|
|
|
|
|
|
}
|
|
|
|
|
|
function stateAttr(open) {
|
|
|
|
|
|
return open ? "open" : "closed";
|
|
|
|
|
|
}
|
|
|
|
|
|
const defaults$1 = {
|
|
|
|
|
|
arrowSize: 8,
|
|
|
|
|
|
positioning: {
|
|
|
|
|
|
placement: "bottom"
|
|
|
|
|
|
},
|
|
|
|
|
|
preventScroll: true,
|
|
|
|
|
|
closeOnEscape: true,
|
|
|
|
|
|
closeOnOutsideClick: true,
|
|
|
|
|
|
portal: void 0,
|
|
|
|
|
|
loop: false,
|
|
|
|
|
|
dir: "ltr",
|
|
|
|
|
|
defaultOpen: false,
|
|
|
|
|
|
forceVisible: false,
|
|
|
|
|
|
typeahead: true,
|
|
|
|
|
|
closeFocus: void 0,
|
|
|
|
|
|
disableFocusFirstItem: false,
|
|
|
|
|
|
closeOnItemClick: true,
|
|
|
|
|
|
onOutsideClick: void 0
|
|
|
|
|
|
};
|
|
|
|
|
|
function createDropdownMenu(props) {
|
|
|
|
|
|
const withDefaults = { ...defaults$1, ...props };
|
|
|
|
|
|
const rootOptions = toWritableStores(omit(withDefaults, "ids"));
|
|
|
|
|
|
const openWritable = withDefaults.open ?? writable(withDefaults.defaultOpen);
|
|
|
|
|
|
const rootOpen = overridable(openWritable, withDefaults?.onOpenChange);
|
|
|
|
|
|
const rootActiveTrigger = withGet(writable(null));
|
|
|
|
|
|
const nextFocusable = withGet(writable(null));
|
|
|
|
|
|
const prevFocusable = withGet(writable(null));
|
|
|
|
|
|
const { elements, builders, ids, states, options } = createMenuBuilder({
|
|
|
|
|
|
rootOptions,
|
|
|
|
|
|
rootOpen,
|
|
|
|
|
|
rootActiveTrigger: withGet(rootActiveTrigger),
|
|
|
|
|
|
nextFocusable: withGet(nextFocusable),
|
|
|
|
|
|
prevFocusable: withGet(prevFocusable),
|
|
|
|
|
|
selector: "dropdown-menu",
|
|
|
|
|
|
removeScroll: true,
|
|
|
|
|
|
ids: withDefaults.ids
|
|
|
|
|
|
});
|
|
|
|
|
|
return {
|
|
|
|
|
|
ids,
|
|
|
|
|
|
elements,
|
|
|
|
|
|
states,
|
|
|
|
|
|
builders,
|
|
|
|
|
|
options
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
const defaults = {
|
|
|
|
|
|
orientation: "horizontal",
|
|
|
|
|
|
decorative: false
|
|
|
|
|
|
};
|
|
|
|
|
|
const createSeparator = (props) => {
|
|
|
|
|
|
const withDefaults = { ...defaults, ...props };
|
|
|
|
|
|
const options = toWritableStores(withDefaults);
|
|
|
|
|
|
const { orientation, decorative } = options;
|
|
|
|
|
|
const root = makeElement("separator", {
|
|
|
|
|
|
stores: [orientation, decorative],
|
|
|
|
|
|
returned: ([$orientation, $decorative]) => {
|
|
|
|
|
|
const ariaOrientation = $orientation === "vertical" ? $orientation : void 0;
|
|
|
|
|
|
return {
|
|
|
|
|
|
role: $decorative ? "none" : "separator",
|
|
|
|
|
|
"aria-orientation": ariaOrientation,
|
|
|
|
|
|
"aria-hidden": $decorative,
|
|
|
|
|
|
"data-orientation": $orientation
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
return {
|
|
|
|
|
|
elements: {
|
|
|
|
|
|
root
|
|
|
|
|
|
},
|
|
|
|
|
|
options
|
|
|
|
|
|
};
|
|
|
|
|
|
};
|
|
|
|
|
|
function getMenuData() {
|
|
|
|
|
|
const NAME = "menu";
|
|
|
|
|
|
const SUB_NAME = "menu-submenu";
|
|
|
|
|
|
const RADIO_GROUP_NAME = "menu-radiogroup";
|
|
|
|
|
|
const CHECKBOX_ITEM_NAME = "menu-checkboxitem";
|
|
|
|
|
|
const RADIO_ITEM_NAME = "menu-radioitem";
|
|
|
|
|
|
const GROUP_NAME = "menu-group";
|
|
|
|
|
|
const PARTS = [
|
|
|
|
|
|
"arrow",
|
|
|
|
|
|
"checkbox-indicator",
|
|
|
|
|
|
"checkbox-item",
|
|
|
|
|
|
"content",
|
|
|
|
|
|
"group",
|
|
|
|
|
|
"item",
|
|
|
|
|
|
"label",
|
|
|
|
|
|
"radio-group",
|
|
|
|
|
|
"radio-item",
|
|
|
|
|
|
"radio-indicator",
|
|
|
|
|
|
"separator",
|
|
|
|
|
|
"sub-content",
|
|
|
|
|
|
"sub-trigger",
|
|
|
|
|
|
"trigger"
|
|
|
|
|
|
];
|
|
|
|
|
|
return {
|
|
|
|
|
|
NAME,
|
|
|
|
|
|
SUB_NAME,
|
|
|
|
|
|
RADIO_GROUP_NAME,
|
|
|
|
|
|
CHECKBOX_ITEM_NAME,
|
|
|
|
|
|
RADIO_ITEM_NAME,
|
|
|
|
|
|
GROUP_NAME,
|
|
|
|
|
|
PARTS
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
function getCtx() {
|
|
|
|
|
|
const { NAME } = getMenuData();
|
|
|
|
|
|
return getContext(NAME);
|
|
|
|
|
|
}
|
|
|
|
|
|
function setCtx(props) {
|
|
|
|
|
|
const { NAME, PARTS } = getMenuData();
|
|
|
|
|
|
const getAttrs = createBitAttrs("menu", PARTS);
|
|
|
|
|
|
const dropdownMenu = {
|
|
|
|
|
|
...createDropdownMenu({ ...removeUndefined(props), forceVisible: true }),
|
|
|
|
|
|
getAttrs
|
|
|
|
|
|
};
|
|
|
|
|
|
setContext(NAME, dropdownMenu);
|
|
|
|
|
|
return {
|
|
|
|
|
|
...dropdownMenu,
|
|
|
|
|
|
updateOption: getOptionUpdater(dropdownMenu.options)
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
function getGroupLabel() {
|
|
|
|
|
|
const { GROUP_NAME } = getMenuData();
|
|
|
|
|
|
const id = getContext(GROUP_NAME) ?? generateId();
|
|
|
|
|
|
const { elements: { groupLabel }, getAttrs } = getCtx();
|
|
|
|
|
|
return { groupLabel, id, getAttrs };
|
|
|
|
|
|
}
|
|
|
|
|
|
function updatePositioning(props) {
|
|
|
|
|
|
const defaultPlacement = {
|
|
|
|
|
|
side: "bottom",
|
|
|
|
|
|
align: "center"
|
|
|
|
|
|
};
|
|
|
|
|
|
const withDefaults = { ...defaultPlacement, ...props };
|
|
|
|
|
|
const { options: { positioning } } = getCtx();
|
|
|
|
|
|
const updater = getPositioningUpdater(positioning);
|
|
|
|
|
|
updater(withDefaults);
|
|
|
|
|
|
}
|
|
|
|
|
|
const Menu_item = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let builder;
|
|
|
|
|
|
let attrs;
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, ["href", "asChild", "disabled", "el"]);
|
|
|
|
|
|
let $item, $$unsubscribe_item;
|
|
|
|
|
|
let { href = void 0 } = $$props;
|
|
|
|
|
|
let { asChild = false } = $$props;
|
|
|
|
|
|
let { disabled = false } = $$props;
|
|
|
|
|
|
let { el = void 0 } = $$props;
|
|
|
|
|
|
const { elements: { item }, getAttrs } = getCtx();
|
|
|
|
|
|
$$unsubscribe_item = subscribe(item, (value) => $item = value);
|
|
|
|
|
|
createDispatcher();
|
|
|
|
|
|
if ($$props.href === void 0 && $$bindings.href && href !== void 0)
|
|
|
|
|
|
$$bindings.href(href);
|
|
|
|
|
|
if ($$props.asChild === void 0 && $$bindings.asChild && asChild !== void 0)
|
|
|
|
|
|
$$bindings.asChild(asChild);
|
|
|
|
|
|
if ($$props.disabled === void 0 && $$bindings.disabled && disabled !== void 0)
|
|
|
|
|
|
$$bindings.disabled(disabled);
|
|
|
|
|
|
if ($$props.el === void 0 && $$bindings.el && el !== void 0)
|
|
|
|
|
|
$$bindings.el(el);
|
|
|
|
|
|
builder = $item;
|
|
|
|
|
|
attrs = {
|
|
|
|
|
|
...getAttrs("item"),
|
|
|
|
|
|
...disabledAttrs(disabled)
|
|
|
|
|
|
};
|
|
|
|
|
|
{
|
|
|
|
|
|
Object.assign(builder, attrs);
|
|
|
|
|
|
}
|
|
|
|
|
|
$$unsubscribe_item();
|
|
|
|
|
|
return `${asChild ? `${slots.default ? slots.default({ builder }) : ``}` : `${((tag) => {
|
|
|
|
|
|
return tag ? `<${href ? "a" : "div"}${spread(
|
|
|
|
|
|
[
|
|
|
|
|
|
{ href: escape_attribute_value(href) },
|
|
|
|
|
|
escape_object(builder),
|
|
|
|
|
|
escape_object($$restProps)
|
|
|
|
|
|
],
|
|
|
|
|
|
{}
|
|
|
|
|
|
)}${add_attribute("this", el, 0)}>${is_void(tag) ? "" : `${slots.default ? slots.default({ builder }) : ``}`}${is_void(tag) ? "" : `</${tag}>`}` : "";
|
|
|
|
|
|
})(href ? "a" : "div")}`}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Menu_label = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let builder;
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, ["asChild", "el"]);
|
|
|
|
|
|
let $groupLabel, $$unsubscribe_groupLabel;
|
|
|
|
|
|
let { asChild = false } = $$props;
|
|
|
|
|
|
let { el = void 0 } = $$props;
|
|
|
|
|
|
const { groupLabel, id, getAttrs } = getGroupLabel();
|
|
|
|
|
|
$$unsubscribe_groupLabel = subscribe(groupLabel, (value) => $groupLabel = value);
|
|
|
|
|
|
const attrs = getAttrs("label");
|
|
|
|
|
|
if ($$props.asChild === void 0 && $$bindings.asChild && asChild !== void 0)
|
|
|
|
|
|
$$bindings.asChild(asChild);
|
|
|
|
|
|
if ($$props.el === void 0 && $$bindings.el && el !== void 0)
|
|
|
|
|
|
$$bindings.el(el);
|
|
|
|
|
|
builder = $groupLabel(id);
|
|
|
|
|
|
{
|
|
|
|
|
|
Object.assign(builder, attrs);
|
|
|
|
|
|
}
|
|
|
|
|
|
$$unsubscribe_groupLabel();
|
|
|
|
|
|
return `${asChild ? `${slots.default ? slots.default({ builder }) : ``}` : `<div${spread([escape_object(builder), escape_object($$restProps)], {})}${add_attribute("this", el, 0)}>${slots.default ? slots.default({ builder }) : ``}</div>`}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Menu_separator = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let builder;
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, ["asChild", "el"]);
|
|
|
|
|
|
let $separator, $$unsubscribe_separator;
|
|
|
|
|
|
let { asChild = false } = $$props;
|
|
|
|
|
|
let { el = void 0 } = $$props;
|
|
|
|
|
|
const { elements: { separator }, getAttrs } = getCtx();
|
|
|
|
|
|
$$unsubscribe_separator = subscribe(separator, (value) => $separator = value);
|
|
|
|
|
|
const attrs = getAttrs("separator");
|
|
|
|
|
|
if ($$props.asChild === void 0 && $$bindings.asChild && asChild !== void 0)
|
|
|
|
|
|
$$bindings.asChild(asChild);
|
|
|
|
|
|
if ($$props.el === void 0 && $$bindings.el && el !== void 0)
|
|
|
|
|
|
$$bindings.el(el);
|
|
|
|
|
|
builder = $separator;
|
|
|
|
|
|
{
|
|
|
|
|
|
Object.assign(builder, attrs);
|
|
|
|
|
|
}
|
|
|
|
|
|
$$unsubscribe_separator();
|
|
|
|
|
|
return `${asChild ? `${slots.default ? slots.default({ builder }) : ``}` : `<div${spread([escape_object($separator), escape_object($$restProps)], {})}${add_attribute("this", el, 0)}></div>`}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Menu = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let $idValues, $$unsubscribe_idValues;
|
|
|
|
|
|
let { closeOnOutsideClick = void 0 } = $$props;
|
|
|
|
|
|
let { closeOnEscape = void 0 } = $$props;
|
|
|
|
|
|
let { portal = void 0 } = $$props;
|
|
|
|
|
|
let { open = void 0 } = $$props;
|
|
|
|
|
|
let { onOpenChange = void 0 } = $$props;
|
|
|
|
|
|
let { preventScroll = void 0 } = $$props;
|
|
|
|
|
|
let { loop = void 0 } = $$props;
|
|
|
|
|
|
let { dir = void 0 } = $$props;
|
|
|
|
|
|
let { typeahead = void 0 } = $$props;
|
|
|
|
|
|
let { closeFocus = void 0 } = $$props;
|
|
|
|
|
|
let { disableFocusFirstItem = void 0 } = $$props;
|
|
|
|
|
|
let { closeOnItemClick = void 0 } = $$props;
|
|
|
|
|
|
let { onOutsideClick = void 0 } = $$props;
|
|
|
|
|
|
const { states: { open: localOpen }, updateOption, ids } = setCtx({
|
|
|
|
|
|
closeOnOutsideClick,
|
|
|
|
|
|
closeOnEscape,
|
|
|
|
|
|
portal,
|
|
|
|
|
|
forceVisible: true,
|
|
|
|
|
|
defaultOpen: open,
|
|
|
|
|
|
preventScroll,
|
|
|
|
|
|
loop,
|
|
|
|
|
|
dir,
|
|
|
|
|
|
typeahead,
|
|
|
|
|
|
closeFocus,
|
|
|
|
|
|
disableFocusFirstItem,
|
|
|
|
|
|
closeOnItemClick,
|
|
|
|
|
|
onOutsideClick,
|
|
|
|
|
|
onOpenChange: ({ next }) => {
|
|
|
|
|
|
if (open !== next) {
|
|
|
|
|
|
onOpenChange?.(next);
|
|
|
|
|
|
open = next;
|
|
|
|
|
|
}
|
|
|
|
|
|
return next;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({ menu: $menuId, trigger: $triggerId }));
|
|
|
|
|
|
$$unsubscribe_idValues = subscribe(idValues, (value) => $idValues = value);
|
|
|
|
|
|
if ($$props.closeOnOutsideClick === void 0 && $$bindings.closeOnOutsideClick && closeOnOutsideClick !== void 0)
|
|
|
|
|
|
$$bindings.closeOnOutsideClick(closeOnOutsideClick);
|
|
|
|
|
|
if ($$props.closeOnEscape === void 0 && $$bindings.closeOnEscape && closeOnEscape !== void 0)
|
|
|
|
|
|
$$bindings.closeOnEscape(closeOnEscape);
|
|
|
|
|
|
if ($$props.portal === void 0 && $$bindings.portal && portal !== void 0)
|
|
|
|
|
|
$$bindings.portal(portal);
|
|
|
|
|
|
if ($$props.open === void 0 && $$bindings.open && open !== void 0)
|
|
|
|
|
|
$$bindings.open(open);
|
|
|
|
|
|
if ($$props.onOpenChange === void 0 && $$bindings.onOpenChange && onOpenChange !== void 0)
|
|
|
|
|
|
$$bindings.onOpenChange(onOpenChange);
|
|
|
|
|
|
if ($$props.preventScroll === void 0 && $$bindings.preventScroll && preventScroll !== void 0)
|
|
|
|
|
|
$$bindings.preventScroll(preventScroll);
|
|
|
|
|
|
if ($$props.loop === void 0 && $$bindings.loop && loop !== void 0)
|
|
|
|
|
|
$$bindings.loop(loop);
|
|
|
|
|
|
if ($$props.dir === void 0 && $$bindings.dir && dir !== void 0)
|
|
|
|
|
|
$$bindings.dir(dir);
|
|
|
|
|
|
if ($$props.typeahead === void 0 && $$bindings.typeahead && typeahead !== void 0)
|
|
|
|
|
|
$$bindings.typeahead(typeahead);
|
|
|
|
|
|
if ($$props.closeFocus === void 0 && $$bindings.closeFocus && closeFocus !== void 0)
|
|
|
|
|
|
$$bindings.closeFocus(closeFocus);
|
|
|
|
|
|
if ($$props.disableFocusFirstItem === void 0 && $$bindings.disableFocusFirstItem && disableFocusFirstItem !== void 0)
|
|
|
|
|
|
$$bindings.disableFocusFirstItem(disableFocusFirstItem);
|
|
|
|
|
|
if ($$props.closeOnItemClick === void 0 && $$bindings.closeOnItemClick && closeOnItemClick !== void 0)
|
|
|
|
|
|
$$bindings.closeOnItemClick(closeOnItemClick);
|
|
|
|
|
|
if ($$props.onOutsideClick === void 0 && $$bindings.onOutsideClick && onOutsideClick !== void 0)
|
|
|
|
|
|
$$bindings.onOutsideClick(onOutsideClick);
|
|
|
|
|
|
open !== void 0 && localOpen.set(open);
|
|
|
|
|
|
{
|
|
|
|
|
|
updateOption("closeOnOutsideClick", closeOnOutsideClick);
|
|
|
|
|
|
}
|
|
|
|
|
|
{
|
|
|
|
|
|
updateOption("closeOnEscape", closeOnEscape);
|
|
|
|
|
|
}
|
|
|
|
|
|
{
|
|
|
|
|
|
updateOption("portal", portal);
|
|
|
|
|
|
}
|
|
|
|
|
|
{
|
|
|
|
|
|
updateOption("preventScroll", preventScroll);
|
|
|
|
|
|
}
|
|
|
|
|
|
{
|
|
|
|
|
|
updateOption("loop", loop);
|
|
|
|
|
|
}
|
|
|
|
|
|
{
|
|
|
|
|
|
updateOption("dir", dir);
|
|
|
|
|
|
}
|
|
|
|
|
|
{
|
|
|
|
|
|
updateOption("closeFocus", closeFocus);
|
|
|
|
|
|
}
|
|
|
|
|
|
{
|
|
|
|
|
|
updateOption("disableFocusFirstItem", disableFocusFirstItem);
|
|
|
|
|
|
}
|
|
|
|
|
|
{
|
|
|
|
|
|
updateOption("typeahead", typeahead);
|
|
|
|
|
|
}
|
|
|
|
|
|
{
|
|
|
|
|
|
updateOption("closeOnItemClick", closeOnItemClick);
|
|
|
|
|
|
}
|
|
|
|
|
|
{
|
|
|
|
|
|
updateOption("onOutsideClick", onOutsideClick);
|
|
|
|
|
|
}
|
|
|
|
|
|
$$unsubscribe_idValues();
|
|
|
|
|
|
return `${slots.default ? slots.default({ ids: $idValues }) : ``}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Menu_content = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let builder;
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, [
|
|
|
|
|
|
"transition",
|
|
|
|
|
|
"transitionConfig",
|
|
|
|
|
|
"inTransition",
|
|
|
|
|
|
"inTransitionConfig",
|
|
|
|
|
|
"outTransition",
|
|
|
|
|
|
"outTransitionConfig",
|
|
|
|
|
|
"asChild",
|
|
|
|
|
|
"id",
|
|
|
|
|
|
"side",
|
|
|
|
|
|
"align",
|
|
|
|
|
|
"sideOffset",
|
|
|
|
|
|
"alignOffset",
|
|
|
|
|
|
"collisionPadding",
|
|
|
|
|
|
"avoidCollisions",
|
|
|
|
|
|
"collisionBoundary",
|
|
|
|
|
|
"sameWidth",
|
|
|
|
|
|
"fitViewport",
|
|
|
|
|
|
"strategy",
|
|
|
|
|
|
"overlap",
|
|
|
|
|
|
"el"
|
|
|
|
|
|
]);
|
|
|
|
|
|
let $open, $$unsubscribe_open;
|
|
|
|
|
|
let $menu, $$unsubscribe_menu;
|
|
|
|
|
|
let { transition = void 0 } = $$props;
|
|
|
|
|
|
let { transitionConfig = void 0 } = $$props;
|
|
|
|
|
|
let { inTransition = void 0 } = $$props;
|
|
|
|
|
|
let { inTransitionConfig = void 0 } = $$props;
|
|
|
|
|
|
let { outTransition = void 0 } = $$props;
|
|
|
|
|
|
let { outTransitionConfig = void 0 } = $$props;
|
|
|
|
|
|
let { asChild = false } = $$props;
|
|
|
|
|
|
let { id = void 0 } = $$props;
|
|
|
|
|
|
let { side = "bottom" } = $$props;
|
|
|
|
|
|
let { align = "center" } = $$props;
|
|
|
|
|
|
let { sideOffset = 0 } = $$props;
|
|
|
|
|
|
let { alignOffset = 0 } = $$props;
|
|
|
|
|
|
let { collisionPadding = 8 } = $$props;
|
|
|
|
|
|
let { avoidCollisions = true } = $$props;
|
|
|
|
|
|
let { collisionBoundary = void 0 } = $$props;
|
|
|
|
|
|
let { sameWidth = false } = $$props;
|
|
|
|
|
|
let { fitViewport = false } = $$props;
|
|
|
|
|
|
let { strategy = "absolute" } = $$props;
|
|
|
|
|
|
let { overlap = false } = $$props;
|
|
|
|
|
|
let { el = void 0 } = $$props;
|
|
|
|
|
|
const { elements: { menu }, states: { open }, ids, getAttrs } = getCtx();
|
|
|
|
|
|
$$unsubscribe_menu = subscribe(menu, (value) => $menu = value);
|
|
|
|
|
|
$$unsubscribe_open = subscribe(open, (value) => $open = value);
|
|
|
|
|
|
createDispatcher();
|
|
|
|
|
|
const attrs = getAttrs("content");
|
|
|
|
|
|
if ($$props.transition === void 0 && $$bindings.transition && transition !== void 0)
|
|
|
|
|
|
$$bindings.transition(transition);
|
|
|
|
|
|
if ($$props.transitionConfig === void 0 && $$bindings.transitionConfig && transitionConfig !== void 0)
|
|
|
|
|
|
$$bindings.transitionConfig(transitionConfig);
|
|
|
|
|
|
if ($$props.inTransition === void 0 && $$bindings.inTransition && inTransition !== void 0)
|
|
|
|
|
|
$$bindings.inTransition(inTransition);
|
|
|
|
|
|
if ($$props.inTransitionConfig === void 0 && $$bindings.inTransitionConfig && inTransitionConfig !== void 0)
|
|
|
|
|
|
$$bindings.inTransitionConfig(inTransitionConfig);
|
|
|
|
|
|
if ($$props.outTransition === void 0 && $$bindings.outTransition && outTransition !== void 0)
|
|
|
|
|
|
$$bindings.outTransition(outTransition);
|
|
|
|
|
|
if ($$props.outTransitionConfig === void 0 && $$bindings.outTransitionConfig && outTransitionConfig !== void 0)
|
|
|
|
|
|
$$bindings.outTransitionConfig(outTransitionConfig);
|
|
|
|
|
|
if ($$props.asChild === void 0 && $$bindings.asChild && asChild !== void 0)
|
|
|
|
|
|
$$bindings.asChild(asChild);
|
|
|
|
|
|
if ($$props.id === void 0 && $$bindings.id && id !== void 0)
|
|
|
|
|
|
$$bindings.id(id);
|
|
|
|
|
|
if ($$props.side === void 0 && $$bindings.side && side !== void 0)
|
|
|
|
|
|
$$bindings.side(side);
|
|
|
|
|
|
if ($$props.align === void 0 && $$bindings.align && align !== void 0)
|
|
|
|
|
|
$$bindings.align(align);
|
|
|
|
|
|
if ($$props.sideOffset === void 0 && $$bindings.sideOffset && sideOffset !== void 0)
|
|
|
|
|
|
$$bindings.sideOffset(sideOffset);
|
|
|
|
|
|
if ($$props.alignOffset === void 0 && $$bindings.alignOffset && alignOffset !== void 0)
|
|
|
|
|
|
$$bindings.alignOffset(alignOffset);
|
|
|
|
|
|
if ($$props.collisionPadding === void 0 && $$bindings.collisionPadding && collisionPadding !== void 0)
|
|
|
|
|
|
$$bindings.collisionPadding(collisionPadding);
|
|
|
|
|
|
if ($$props.avoidCollisions === void 0 && $$bindings.avoidCollisions && avoidCollisions !== void 0)
|
|
|
|
|
|
$$bindings.avoidCollisions(avoidCollisions);
|
|
|
|
|
|
if ($$props.collisionBoundary === void 0 && $$bindings.collisionBoundary && collisionBoundary !== void 0)
|
|
|
|
|
|
$$bindings.collisionBoundary(collisionBoundary);
|
|
|
|
|
|
if ($$props.sameWidth === void 0 && $$bindings.sameWidth && sameWidth !== void 0)
|
|
|
|
|
|
$$bindings.sameWidth(sameWidth);
|
|
|
|
|
|
if ($$props.fitViewport === void 0 && $$bindings.fitViewport && fitViewport !== void 0)
|
|
|
|
|
|
$$bindings.fitViewport(fitViewport);
|
|
|
|
|
|
if ($$props.strategy === void 0 && $$bindings.strategy && strategy !== void 0)
|
|
|
|
|
|
$$bindings.strategy(strategy);
|
|
|
|
|
|
if ($$props.overlap === void 0 && $$bindings.overlap && overlap !== void 0)
|
|
|
|
|
|
$$bindings.overlap(overlap);
|
|
|
|
|
|
if ($$props.el === void 0 && $$bindings.el && el !== void 0)
|
|
|
|
|
|
$$bindings.el(el);
|
|
|
|
|
|
{
|
|
|
|
|
|
if (id) {
|
|
|
|
|
|
ids.menu.set(id);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
builder = $menu;
|
|
|
|
|
|
{
|
|
|
|
|
|
Object.assign(builder, attrs);
|
|
|
|
|
|
}
|
|
|
|
|
|
{
|
|
|
|
|
|
if ($open) {
|
|
|
|
|
|
updatePositioning({
|
|
|
|
|
|
side,
|
|
|
|
|
|
align,
|
|
|
|
|
|
sideOffset,
|
|
|
|
|
|
alignOffset,
|
|
|
|
|
|
collisionPadding,
|
|
|
|
|
|
avoidCollisions,
|
|
|
|
|
|
collisionBoundary,
|
|
|
|
|
|
sameWidth,
|
|
|
|
|
|
fitViewport,
|
|
|
|
|
|
strategy,
|
|
|
|
|
|
overlap
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
$$unsubscribe_open();
|
|
|
|
|
|
$$unsubscribe_menu();
|
|
|
|
|
|
return `${asChild && $open ? `${slots.default ? slots.default({ builder }) : ``}` : `${transition && $open ? `<div${spread([escape_object(builder), escape_object($$restProps)], {})}${add_attribute("this", el, 0)}>${slots.default ? slots.default({ builder }) : ``}</div>` : `${inTransition && outTransition && $open ? `<div${spread([escape_object(builder), escape_object($$restProps)], {})}${add_attribute("this", el, 0)}>${slots.default ? slots.default({ builder }) : ``}</div>` : `${inTransition && $open ? `<div${spread([escape_object(builder), escape_object($$restProps)], {})}${add_attribute("this", el, 0)}>${slots.default ? slots.default({ builder }) : ``}</div>` : `${outTransition && $open ? `<div${spread([escape_object(builder), escape_object($$restProps)], {})}${add_attribute("this", el, 0)}>${slots.default ? slots.default({ builder }) : ``}</div>` : `${$open ? `<div${spread([escape_object(builder), escape_object($$restProps)], {})}${add_attribute("this", el, 0)}>${slots.default ? slots.default({ builder }) : ``}</div>` : ``}`}`}`}`}`}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Menu_trigger = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let builder;
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, ["asChild", "id", "el"]);
|
|
|
|
|
|
let $trigger, $$unsubscribe_trigger;
|
|
|
|
|
|
let { asChild = false } = $$props;
|
|
|
|
|
|
let { id = void 0 } = $$props;
|
|
|
|
|
|
let { el = void 0 } = $$props;
|
|
|
|
|
|
const { elements: { trigger }, ids, getAttrs } = getCtx();
|
|
|
|
|
|
$$unsubscribe_trigger = subscribe(trigger, (value) => $trigger = value);
|
|
|
|
|
|
createDispatcher();
|
|
|
|
|
|
const attrs = getAttrs("trigger");
|
|
|
|
|
|
if ($$props.asChild === void 0 && $$bindings.asChild && asChild !== void 0)
|
|
|
|
|
|
$$bindings.asChild(asChild);
|
|
|
|
|
|
if ($$props.id === void 0 && $$bindings.id && id !== void 0)
|
|
|
|
|
|
$$bindings.id(id);
|
|
|
|
|
|
if ($$props.el === void 0 && $$bindings.el && el !== void 0)
|
|
|
|
|
|
$$bindings.el(el);
|
|
|
|
|
|
{
|
|
|
|
|
|
if (id) {
|
|
|
|
|
|
ids.trigger.set(id);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
builder = $trigger;
|
|
|
|
|
|
{
|
|
|
|
|
|
Object.assign(builder, attrs);
|
|
|
|
|
|
}
|
|
|
|
|
|
$$unsubscribe_trigger();
|
|
|
|
|
|
return `${asChild ? `${slots.default ? slots.default({ builder }) : ``}` : `<button${spread([escape_object(builder), { type: "button" }, escape_object($$restProps)], {})}${add_attribute("this", el, 0)}>${slots.default ? slots.default({ builder }) : ``}</button>`}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Dropdown_menu_item = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, ["class", "inset"]);
|
|
|
|
|
|
let { class: className = void 0 } = $$props;
|
|
|
|
|
|
let { inset = void 0 } = $$props;
|
|
|
|
|
|
if ($$props.class === void 0 && $$bindings.class && className !== void 0)
|
|
|
|
|
|
$$bindings.class(className);
|
|
|
|
|
|
if ($$props.inset === void 0 && $$bindings.inset && inset !== void 0)
|
|
|
|
|
|
$$bindings.inset(inset);
|
|
|
|
|
|
return `${validate_component(Menu_item, "DropdownMenuPrimitive.Item").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
Object.assign(
|
|
|
|
|
|
{},
|
|
|
|
|
|
{
|
|
|
|
|
|
class: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50", inset && "pl-8", className)
|
|
|
|
|
|
},
|
|
|
|
|
|
$$restProps
|
|
|
|
|
|
),
|
|
|
|
|
|
{},
|
|
|
|
|
|
{
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${slots.default ? slots.default({}) : ``}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
)}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Dropdown_menu_label = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, ["class", "inset"]);
|
|
|
|
|
|
let { class: className = void 0 } = $$props;
|
|
|
|
|
|
let { inset = void 0 } = $$props;
|
|
|
|
|
|
if ($$props.class === void 0 && $$bindings.class && className !== void 0)
|
|
|
|
|
|
$$bindings.class(className);
|
|
|
|
|
|
if ($$props.inset === void 0 && $$bindings.inset && inset !== void 0)
|
|
|
|
|
|
$$bindings.inset(inset);
|
|
|
|
|
|
return `${validate_component(Menu_label, "DropdownMenuPrimitive.Label").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
Object.assign(
|
|
|
|
|
|
{},
|
|
|
|
|
|
{
|
|
|
|
|
|
class: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)
|
|
|
|
|
|
},
|
|
|
|
|
|
$$restProps
|
|
|
|
|
|
),
|
|
|
|
|
|
{},
|
|
|
|
|
|
{
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${slots.default ? slots.default({}) : ``}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
)}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Dropdown_menu_content = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, ["class", "sideOffset", "transition", "transitionConfig"]);
|
|
|
|
|
|
let { class: className = void 0 } = $$props;
|
|
|
|
|
|
let { sideOffset = 4 } = $$props;
|
|
|
|
|
|
let { transition = flyAndScale } = $$props;
|
|
|
|
|
|
let { transitionConfig = void 0 } = $$props;
|
|
|
|
|
|
if ($$props.class === void 0 && $$bindings.class && className !== void 0)
|
|
|
|
|
|
$$bindings.class(className);
|
|
|
|
|
|
if ($$props.sideOffset === void 0 && $$bindings.sideOffset && sideOffset !== void 0)
|
|
|
|
|
|
$$bindings.sideOffset(sideOffset);
|
|
|
|
|
|
if ($$props.transition === void 0 && $$bindings.transition && transition !== void 0)
|
|
|
|
|
|
$$bindings.transition(transition);
|
|
|
|
|
|
if ($$props.transitionConfig === void 0 && $$bindings.transitionConfig && transitionConfig !== void 0)
|
|
|
|
|
|
$$bindings.transitionConfig(transitionConfig);
|
|
|
|
|
|
return `${validate_component(Menu_content, "DropdownMenuPrimitive.Content").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
Object.assign(
|
|
|
|
|
|
{},
|
|
|
|
|
|
{ transition },
|
|
|
|
|
|
{ transitionConfig },
|
|
|
|
|
|
{ sideOffset },
|
|
|
|
|
|
{
|
|
|
|
|
|
class: cn("z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none", className)
|
|
|
|
|
|
},
|
|
|
|
|
|
$$restProps
|
|
|
|
|
|
),
|
|
|
|
|
|
{},
|
|
|
|
|
|
{
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${slots.default ? slots.default({}) : ``}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
)}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Dropdown_menu_separator = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, ["class"]);
|
|
|
|
|
|
let { class: className = void 0 } = $$props;
|
|
|
|
|
|
if ($$props.class === void 0 && $$bindings.class && className !== void 0)
|
|
|
|
|
|
$$bindings.class(className);
|
|
|
|
|
|
return `${validate_component(Menu_separator, "DropdownMenuPrimitive.Separator").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
Object.assign(
|
|
|
|
|
|
{},
|
|
|
|
|
|
{
|
|
|
|
|
|
class: cn("-mx-1 my-1 h-px bg-muted", className)
|
|
|
|
|
|
},
|
|
|
|
|
|
$$restProps
|
|
|
|
|
|
),
|
|
|
|
|
|
{},
|
|
|
|
|
|
{}
|
|
|
|
|
|
)}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Root$1 = Menu;
|
|
|
|
|
|
const Trigger$1 = Menu_trigger;
|
|
|
|
|
|
const Sheet_portal = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, ["class"]);
|
|
|
|
|
|
let { class: className = void 0 } = $$props;
|
|
|
|
|
|
if ($$props.class === void 0 && $$bindings.class && className !== void 0)
|
|
|
|
|
|
$$bindings.class(className);
|
|
|
|
|
|
return `${validate_component(Dialog_portal, "SheetPrimitive.Portal").$$render($$result, Object.assign({}, { class: cn(className) }, $$restProps), {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${slots.default ? slots.default({}) : ``}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Sheet_overlay = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, ["class", "transition", "transitionConfig"]);
|
|
|
|
|
|
let { class: className = void 0 } = $$props;
|
|
|
|
|
|
let { transition = fade } = $$props;
|
|
|
|
|
|
let { transitionConfig = { duration: 150 } } = $$props;
|
|
|
|
|
|
if ($$props.class === void 0 && $$bindings.class && className !== void 0)
|
|
|
|
|
|
$$bindings.class(className);
|
|
|
|
|
|
if ($$props.transition === void 0 && $$bindings.transition && transition !== void 0)
|
|
|
|
|
|
$$bindings.transition(transition);
|
|
|
|
|
|
if ($$props.transitionConfig === void 0 && $$bindings.transitionConfig && transitionConfig !== void 0)
|
|
|
|
|
|
$$bindings.transitionConfig(transitionConfig);
|
|
|
|
|
|
return `${validate_component(Dialog_overlay, "SheetPrimitive.Overlay").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
Object.assign(
|
|
|
|
|
|
{},
|
|
|
|
|
|
{ transition },
|
|
|
|
|
|
{ transitionConfig },
|
|
|
|
|
|
{
|
|
|
|
|
|
class: cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)
|
|
|
|
|
|
},
|
|
|
|
|
|
$$restProps
|
|
|
|
|
|
),
|
|
|
|
|
|
{},
|
|
|
|
|
|
{}
|
|
|
|
|
|
)}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Sheet_content = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, [
|
|
|
|
|
|
"class",
|
|
|
|
|
|
"side",
|
|
|
|
|
|
"inTransition",
|
|
|
|
|
|
"inTransitionConfig",
|
|
|
|
|
|
"outTransition",
|
|
|
|
|
|
"outTransitionConfig"
|
|
|
|
|
|
]);
|
|
|
|
|
|
let { class: className = void 0 } = $$props;
|
|
|
|
|
|
let { side = "right" } = $$props;
|
|
|
|
|
|
let { inTransition = fly } = $$props;
|
|
|
|
|
|
let { inTransitionConfig = sheetTransitions[side ?? "right"].in } = $$props;
|
|
|
|
|
|
let { outTransition = fly } = $$props;
|
|
|
|
|
|
let { outTransitionConfig = sheetTransitions[side ?? "right"].out } = $$props;
|
|
|
|
|
|
if ($$props.class === void 0 && $$bindings.class && className !== void 0)
|
|
|
|
|
|
$$bindings.class(className);
|
|
|
|
|
|
if ($$props.side === void 0 && $$bindings.side && side !== void 0)
|
|
|
|
|
|
$$bindings.side(side);
|
|
|
|
|
|
if ($$props.inTransition === void 0 && $$bindings.inTransition && inTransition !== void 0)
|
|
|
|
|
|
$$bindings.inTransition(inTransition);
|
|
|
|
|
|
if ($$props.inTransitionConfig === void 0 && $$bindings.inTransitionConfig && inTransitionConfig !== void 0)
|
|
|
|
|
|
$$bindings.inTransitionConfig(inTransitionConfig);
|
|
|
|
|
|
if ($$props.outTransition === void 0 && $$bindings.outTransition && outTransition !== void 0)
|
|
|
|
|
|
$$bindings.outTransition(outTransition);
|
|
|
|
|
|
if ($$props.outTransitionConfig === void 0 && $$bindings.outTransitionConfig && outTransitionConfig !== void 0)
|
|
|
|
|
|
$$bindings.outTransitionConfig(outTransitionConfig);
|
|
|
|
|
|
return `${validate_component(Sheet_portal, "SheetPortal").$$render($$result, {}, {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${validate_component(Sheet_overlay, "SheetOverlay").$$render($$result, {}, {}, {})} ${validate_component(Dialog_content, "SheetPrimitive.Content").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
Object.assign(
|
|
|
|
|
|
{},
|
|
|
|
|
|
{ inTransition },
|
|
|
|
|
|
{ inTransitionConfig },
|
|
|
|
|
|
{ outTransition },
|
|
|
|
|
|
{ outTransitionConfig },
|
|
|
|
|
|
{
|
|
|
|
|
|
class: cn(sheetVariants({ side }), className)
|
|
|
|
|
|
},
|
|
|
|
|
|
$$restProps
|
|
|
|
|
|
),
|
|
|
|
|
|
{},
|
|
|
|
|
|
{
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${slots.default ? slots.default({}) : ``} ${validate_component(Dialog_close, "SheetPrimitive.Close").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
{
|
|
|
|
|
|
class: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
|
|
|
|
|
|
},
|
|
|
|
|
|
{},
|
|
|
|
|
|
{
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${validate_component(X$1, "X").$$render($$result, { class: "h-4 w-4" }, {}, {})} <span class="sr-only" data-svelte-h="svelte-1pewzs3">Close</span>`;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
)}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
)}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Root = Dialog;
|
|
|
|
|
|
const Trigger = Dialog_trigger;
|
|
|
|
|
|
const sheetVariants = tv({
|
|
|
|
|
|
base: "fixed z-50 gap-4 bg-background p-6 shadow-lg",
|
|
|
|
|
|
variants: {
|
|
|
|
|
|
side: {
|
|
|
|
|
|
top: "inset-x-0 top-0 border-b",
|
|
|
|
|
|
bottom: "inset-x-0 bottom-0 border-t",
|
|
|
|
|
|
left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
|
|
|
|
|
right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
defaultVariants: {
|
|
|
|
|
|
side: "right"
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const sheetTransitions = {
|
|
|
|
|
|
top: {
|
|
|
|
|
|
in: {
|
|
|
|
|
|
y: "-100%",
|
|
|
|
|
|
duration: 500,
|
|
|
|
|
|
opacity: 1
|
|
|
|
|
|
},
|
|
|
|
|
|
out: {
|
|
|
|
|
|
y: "-100%",
|
|
|
|
|
|
duration: 300,
|
|
|
|
|
|
opacity: 1
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
bottom: {
|
|
|
|
|
|
in: {
|
|
|
|
|
|
y: "100%",
|
|
|
|
|
|
duration: 500,
|
|
|
|
|
|
opacity: 1
|
|
|
|
|
|
},
|
|
|
|
|
|
out: {
|
|
|
|
|
|
y: "100%",
|
|
|
|
|
|
duration: 300,
|
|
|
|
|
|
opacity: 1
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
left: {
|
|
|
|
|
|
in: {
|
|
|
|
|
|
x: "-100%",
|
|
|
|
|
|
duration: 500,
|
|
|
|
|
|
opacity: 1
|
|
|
|
|
|
},
|
|
|
|
|
|
out: {
|
|
|
|
|
|
x: "-100%",
|
|
|
|
|
|
duration: 300,
|
|
|
|
|
|
opacity: 1
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
right: {
|
|
|
|
|
|
in: {
|
|
|
|
|
|
x: "100%",
|
|
|
|
|
|
duration: 500,
|
|
|
|
|
|
opacity: 1
|
|
|
|
|
|
},
|
|
|
|
|
|
out: {
|
|
|
|
|
|
x: "100%",
|
|
|
|
|
|
duration: 300,
|
|
|
|
|
|
opacity: 1
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
const TOAST_LIFETIME = 4e3;
|
|
|
|
|
|
const GAP$1 = 14;
|
|
|
|
|
|
const TIME_BEFORE_UNMOUNT = 200;
|
|
|
|
|
|
const Toast = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let isFront;
|
|
|
|
|
|
let isVisible;
|
|
|
|
|
|
let toastType;
|
|
|
|
|
|
let toastClass;
|
|
|
|
|
|
let toastDescriptionClass;
|
|
|
|
|
|
let heightIndex;
|
|
|
|
|
|
let coords;
|
|
|
|
|
|
let toastsHeightBefore;
|
|
|
|
|
|
let disabled;
|
|
|
|
|
|
let isPromiseLoadingOrInfiniteDuration;
|
|
|
|
|
|
let $$unsubscribe_effect = noop, $$subscribe_effect = () => ($$unsubscribe_effect(), $$unsubscribe_effect = subscribe(effect2, ($$value) => $$value), effect2);
|
|
|
|
|
|
let $heights, $$unsubscribe_heights;
|
|
|
|
|
|
let $toasts, $$unsubscribe_toasts;
|
|
|
|
|
|
const defaultClasses = {
|
|
|
|
|
|
toast: "",
|
|
|
|
|
|
title: "",
|
|
|
|
|
|
description: "",
|
|
|
|
|
|
loader: "",
|
|
|
|
|
|
closeButton: "",
|
|
|
|
|
|
cancelButton: "",
|
|
|
|
|
|
actionButton: "",
|
|
|
|
|
|
action: "",
|
|
|
|
|
|
warning: "",
|
|
|
|
|
|
error: "",
|
|
|
|
|
|
success: "",
|
|
|
|
|
|
default: "",
|
|
|
|
|
|
info: "",
|
|
|
|
|
|
loading: ""
|
|
|
|
|
|
};
|
|
|
|
|
|
const { toasts, heights, removeHeight, setHeight, dismiss } = toastState;
|
|
|
|
|
|
$$unsubscribe_toasts = subscribe(toasts, (value) => $toasts = value);
|
|
|
|
|
|
$$unsubscribe_heights = subscribe(heights, (value) => $heights = value);
|
|
|
|
|
|
let { toast } = $$props;
|
|
|
|
|
|
let { index } = $$props;
|
|
|
|
|
|
let { expanded } = $$props;
|
|
|
|
|
|
let { invert } = $$props;
|
|
|
|
|
|
let { position } = $$props;
|
|
|
|
|
|
let { visibleToasts } = $$props;
|
|
|
|
|
|
let { expandByDefault } = $$props;
|
|
|
|
|
|
let { closeButton } = $$props;
|
|
|
|
|
|
let { interacting } = $$props;
|
|
|
|
|
|
let { cancelButtonStyle = "" } = $$props;
|
|
|
|
|
|
let { actionButtonStyle = "" } = $$props;
|
|
|
|
|
|
let { duration = 4e3 } = $$props;
|
|
|
|
|
|
let { descriptionClass = "" } = $$props;
|
|
|
|
|
|
let { classes = {} } = $$props;
|
|
|
|
|
|
let { unstyled = false } = $$props;
|
|
|
|
|
|
let mounted = false;
|
|
|
|
|
|
let removed = false;
|
|
|
|
|
|
let swiping = false;
|
|
|
|
|
|
let swipeOut = false;
|
|
|
|
|
|
let offsetBeforeRemove = 0;
|
|
|
|
|
|
let initialHeight = 0;
|
|
|
|
|
|
let toastRef;
|
|
|
|
|
|
let offset = 0;
|
|
|
|
|
|
let closeTimerStartTimeRef = 0;
|
|
|
|
|
|
let lastCloseTimerStartTimeRef = 0;
|
|
|
|
|
|
async function updateHeights() {
|
|
|
|
|
|
{
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function deleteToast() {
|
|
|
|
|
|
removed = true;
|
|
|
|
|
|
offsetBeforeRemove = offset;
|
|
|
|
|
|
removeHeight(toast.id);
|
|
|
|
|
|
setTimeout(
|
|
|
|
|
|
() => {
|
|
|
|
|
|
dismiss(toast.id);
|
|
|
|
|
|
},
|
|
|
|
|
|
TIME_BEFORE_UNMOUNT
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
let timeoutId;
|
|
|
|
|
|
let remainingTime = toast.duration || duration || TOAST_LIFETIME;
|
|
|
|
|
|
function pauseTimer() {
|
|
|
|
|
|
if (lastCloseTimerStartTimeRef < closeTimerStartTimeRef) {
|
|
|
|
|
|
const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef;
|
|
|
|
|
|
remainingTime = remainingTime - elapsedTime;
|
|
|
|
|
|
}
|
|
|
|
|
|
lastCloseTimerStartTimeRef = (/* @__PURE__ */ new Date()).getTime();
|
|
|
|
|
|
}
|
|
|
|
|
|
function startTimer() {
|
|
|
|
|
|
closeTimerStartTimeRef = (/* @__PURE__ */ new Date()).getTime();
|
|
|
|
|
|
timeoutId = setTimeout(
|
|
|
|
|
|
() => {
|
|
|
|
|
|
toast.onAutoClose?.(toast);
|
|
|
|
|
|
deleteToast();
|
|
|
|
|
|
},
|
|
|
|
|
|
remainingTime
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
let effect2;
|
|
|
|
|
|
if ($$props.toast === void 0 && $$bindings.toast && toast !== void 0)
|
|
|
|
|
|
$$bindings.toast(toast);
|
|
|
|
|
|
if ($$props.index === void 0 && $$bindings.index && index !== void 0)
|
|
|
|
|
|
$$bindings.index(index);
|
|
|
|
|
|
if ($$props.expanded === void 0 && $$bindings.expanded && expanded !== void 0)
|
|
|
|
|
|
$$bindings.expanded(expanded);
|
|
|
|
|
|
if ($$props.invert === void 0 && $$bindings.invert && invert !== void 0)
|
|
|
|
|
|
$$bindings.invert(invert);
|
|
|
|
|
|
if ($$props.position === void 0 && $$bindings.position && position !== void 0)
|
|
|
|
|
|
$$bindings.position(position);
|
|
|
|
|
|
if ($$props.visibleToasts === void 0 && $$bindings.visibleToasts && visibleToasts !== void 0)
|
|
|
|
|
|
$$bindings.visibleToasts(visibleToasts);
|
|
|
|
|
|
if ($$props.expandByDefault === void 0 && $$bindings.expandByDefault && expandByDefault !== void 0)
|
|
|
|
|
|
$$bindings.expandByDefault(expandByDefault);
|
|
|
|
|
|
if ($$props.closeButton === void 0 && $$bindings.closeButton && closeButton !== void 0)
|
|
|
|
|
|
$$bindings.closeButton(closeButton);
|
|
|
|
|
|
if ($$props.interacting === void 0 && $$bindings.interacting && interacting !== void 0)
|
|
|
|
|
|
$$bindings.interacting(interacting);
|
|
|
|
|
|
if ($$props.cancelButtonStyle === void 0 && $$bindings.cancelButtonStyle && cancelButtonStyle !== void 0)
|
|
|
|
|
|
$$bindings.cancelButtonStyle(cancelButtonStyle);
|
|
|
|
|
|
if ($$props.actionButtonStyle === void 0 && $$bindings.actionButtonStyle && actionButtonStyle !== void 0)
|
|
|
|
|
|
$$bindings.actionButtonStyle(actionButtonStyle);
|
|
|
|
|
|
if ($$props.duration === void 0 && $$bindings.duration && duration !== void 0)
|
|
|
|
|
|
$$bindings.duration(duration);
|
|
|
|
|
|
if ($$props.descriptionClass === void 0 && $$bindings.descriptionClass && descriptionClass !== void 0)
|
|
|
|
|
|
$$bindings.descriptionClass(descriptionClass);
|
|
|
|
|
|
if ($$props.classes === void 0 && $$bindings.classes && classes !== void 0)
|
|
|
|
|
|
$$bindings.classes(classes);
|
|
|
|
|
|
if ($$props.unstyled === void 0 && $$bindings.unstyled && unstyled !== void 0)
|
|
|
|
|
|
$$bindings.unstyled(unstyled);
|
|
|
|
|
|
classes = { ...defaultClasses, ...classes };
|
|
|
|
|
|
isFront = index === 0;
|
|
|
|
|
|
isVisible = index + 1 <= visibleToasts;
|
|
|
|
|
|
toast.title;
|
|
|
|
|
|
toast.description;
|
|
|
|
|
|
toastType = toast.type;
|
|
|
|
|
|
toastClass = toast.class || "";
|
|
|
|
|
|
toastDescriptionClass = toast.descriptionClass || "";
|
|
|
|
|
|
heightIndex = $heights.findIndex((height) => height.toastId === toast.id) || 0;
|
|
|
|
|
|
coords = position.split("-");
|
|
|
|
|
|
toastsHeightBefore = $heights.reduce(
|
|
|
|
|
|
(prev, curr, reducerIndex) => {
|
|
|
|
|
|
if (reducerIndex >= heightIndex)
|
|
|
|
|
|
return prev;
|
|
|
|
|
|
return prev + curr.height;
|
|
|
|
|
|
},
|
|
|
|
|
|
0
|
|
|
|
|
|
);
|
|
|
|
|
|
invert = toast.invert || invert;
|
|
|
|
|
|
disabled = toastType === "loading";
|
|
|
|
|
|
offset = Math.round(heightIndex * GAP$1 + toastsHeightBefore);
|
|
|
|
|
|
{
|
|
|
|
|
|
updateHeights();
|
|
|
|
|
|
}
|
|
|
|
|
|
{
|
|
|
|
|
|
if (toast.updated) {
|
|
|
|
|
|
clearTimeout(timeoutId);
|
|
|
|
|
|
remainingTime = toast.duration || duration || TOAST_LIFETIME;
|
|
|
|
|
|
startTimer();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
isPromiseLoadingOrInfiniteDuration = toast.promise && toastType === "loading" || toast.duration === Number.POSITIVE_INFINITY;
|
|
|
|
|
|
$$subscribe_effect(effect2 = useEffect(() => {
|
|
|
|
|
|
if (!isPromiseLoadingOrInfiniteDuration) {
|
|
|
|
|
|
if (expanded || interacting) {
|
|
|
|
|
|
pauseTimer();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
startTimer();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return () => clearTimeout(timeoutId);
|
|
|
|
|
|
}));
|
|
|
|
|
|
{
|
|
|
|
|
|
if (toast.delete) {
|
|
|
|
|
|
deleteToast();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
$$unsubscribe_effect();
|
|
|
|
|
|
$$unsubscribe_heights();
|
|
|
|
|
|
$$unsubscribe_toasts();
|
|
|
|
|
|
return ` <li${add_attribute("aria-live", toast.important ? "assertive" : "polite", 0)} aria-atomic="true" role="status"${add_attribute("tabindex", 0, 0)}${add_attribute("class", cn$1($$props.class, toastClass, classes?.toast, toast?.classes?.toast, classes?.[toastType], toast?.classes?.[toastType]), 0)} data-sonner-toast=""${add_attribute("data-styled", !(toast.component || toast?.unstyled || unstyled), 0)}${add_attribute("data-mounted", mounted, 0)}${add_attribute("data-promise", Boolean(toast.promise), 0)}${add_attribute("data-removed", removed, 0)}${add_attribute("data-visible", isVisible, 0)}${add_attribute("data-y-position", coords[0], 0)}${add_attribute("data-x-position", coords[1], 0)}${add_attribute("data-index", index, 0)}${add_attribute("data-front", isFront, 0)}${add_attribute("data-swiping", swiping, 0)}${add_attribute("data-type", toastType, 0)}${add_attribute("data-invert", invert, 0)}${add_attribute("data-swipe-out", swipeOut, 0)}${add_attribute("data-expanded", Boolean(expanded || expandByDefault && mounted), 0)}${add_styles(merge_ssr_styles(escape(`${$$props.style} ${toast.style}`, true), {
|
|
|
|
|
|
"--index": index,
|
|
|
|
|
|
"--toasts-before": index,
|
|
|
|
|
|
"--z-index": $toasts.length - index,
|
|
|
|
|
|
"--offset": `${removed ? offsetBeforeRemove : offset}px`,
|
|
|
|
|
|
"--initial-height": `${initialHeight}px`
|
|
|
|
|
|
}))}${add_attribute("this", toastRef, 0)}>${closeButton && !toast.component ? `<button aria-label="Close toast"${add_attribute("data-disabled", disabled, 0)} data-close-button${add_attribute("class", cn$1(classes?.closeButton, toast?.classes?.closeButton), 0)}><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>` : ``} ${toast.component ? `${validate_component(toast.component || missing_component, "svelte:component").$$render($$result, Object.assign({}, toast.componentProps), {}, {})}` : `${toastType !== "default" || toast.icon || toast.promise ? `<div data-icon="">${(toast.promise || toastType === "loading") && !toast.icon ? `${slots["loading-icon"] ? slots["loading-icon"]({}) : ``}` : ``} ${toast.icon ? `${validate_component(toast.icon || missing_component, "svelte:component").$$render($$result, {}, {}, {})}` : `${toastType === "success" ? `${slots["success-icon"] ? slots["success-icon"]({}) : ``}` : `${toastType === "error" ? `${slots["error-icon"] ? slots["error-icon"]({}) : ``}` : `${toastType === "warning" ? `${slots["warning-icon"] ? slots["warning-icon"]({}) : ``}` : `${toastType === "info" ? `${slots["info-icon"] ? slots["info-icon"]({}) : ``}` : ``}`}`}`}`}</div>` : ``} <div data-content="">${toast.title ? `<div data-title=""${add_attribute("class", cn$1(classes?.title, toast?.classes?.title), 0)}>${typeof toast.title !== "string" ? `${validate_component(toast.title || missing_component, "svelte:component").$$render($$result, Object.assign({}, toast.componentProps), {}, {})}` : `${escape(toast.title)}`}</div>` : ``} ${toast.description ? `<div data-description=""${add_attribute("class", cn$1(descriptionClass, toastDescriptionClass, classes?.description, toast.classes?.description), 0)}>${typeof toast.description !== "string" ? `${validate_component(toast.description || missing_component, "svelte:component").$$render($$result, Object.assign({}, toast.componentProps), {}, {})}` : `${escape(toast.description)}`}</div>` : ``}</div> ${toast.cancel ? `<button data-button data-cancel${add_attribute("style", cancelButtonStyle, 0)}${add_attribute("class", cn$1(classes?.cancelButton, toast?.classes?.cancelButton), 0)}>${escape(toast.cancel.label)}</button>` : ``} ${toast.action ? `<button data-button=""${add_attribute("style", actionButtonStyle, 0)}${add_attribute("class", cn$1(classes?.actionButton, toast?.classes?.actionButton), 0)}>${escape(toast.action.label)}</button>` : ``}`}</li>`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Loader = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let { visible } = $$props;
|
|
|
|
|
|
const bars = Array(12).fill(0);
|
|
|
|
|
|
if ($$props.visible === void 0 && $$bindings.visible && visible !== void 0)
|
|
|
|
|
|
$$bindings.visible(visible);
|
|
|
|
|
|
return `<div class="sonner-loading-wrapper"${add_attribute("data-visible", visible, 0)}><div class="sonner-spinner">${each(bars, (_, i) => {
|
|
|
|
|
|
return `<div class="sonner-loading-bar"></div>`;
|
|
|
|
|
|
})}</div></div>`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Icon = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let { type = "success" } = $$props;
|
|
|
|
|
|
if ($$props.type === void 0 && $$bindings.type && type !== void 0)
|
|
|
|
|
|
$$bindings.type(type);
|
|
|
|
|
|
return `${type === "success" ? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>` : `${type === "error" ? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>` : `${type === "info" ? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"></path></svg>` : `${type === "warning" ? `<svg viewBox="0 0 64 64" fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M32.427,7.987c2.183,0.124 4,1.165 5.096,3.281l17.936,36.208c1.739,3.66 -0.954,8.585 -5.373,8.656l-36.119,0c-4.022,-0.064 -7.322,-4.631 -5.352,-8.696l18.271,-36.207c0.342,-0.65 0.498,-0.838 0.793,-1.179c1.186,-1.375 2.483,-2.111 4.748,-2.063Zm-0.295,3.997c-0.687,0.034 -1.316,0.419 -1.659,1.017c-6.312,11.979 -12.397,24.081 -18.301,36.267c-0.546,1.225 0.391,2.797 1.762,2.863c12.06,0.195 24.125,0.195 36.185,0c1.325,-0.064 2.321,-1.584 1.769,-2.85c-5.793,-12.184 -11.765,-24.286 -17.966,-36.267c-0.366,-0.651 -0.903,-1.042 -1.79,-1.03Z"></path><path d="M33.631,40.581l-3.348,0l-0.368,-16.449l4.1,0l-0.384,16.449Zm-3.828,5.03c0,-0.609 0.197,-1.113 0.592,-1.514c0.396,-0.4 0.935,-0.601 1.618,-0.601c0.684,0 1.223,0.201 1.618,0.601c0.395,0.401 0.593,0.905 0.593,1.514c0,0.587 -0.193,1.078 -0.577,1.473c-0.385,0.395 -0.929,0.593 -1.634,0.593c-0.705,0 -1.249,-0.198 -1.634,-0.593c-0.384,-0.395 -0.576,-0.886 -0.576,-1.473Z"></path></svg>` : ``}`}`}`}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const css = {
|
|
|
|
|
|
code: ":where(html[dir='ltr']),:where([data-sonner-toaster][dir='ltr']){--toast-icon-margin-start:-3px;--toast-icon-margin-end:4px;--toast-svg-margin-start:-1px;--toast-svg-margin-end:0px;--toast-button-margin-start:auto;--toast-button-margin-end:0;--toast-close-button-start:0;--toast-close-button-end:unset;--toast-close-button-transform:translate(-35%, -35%)}:where(html[dir='rtl']),:where([data-sonner-toaster][dir='rtl']){--toast-icon-margin-start:4px;--toast-icon-margin-end:-3px;--toast-svg-margin-start:0px;--toast-svg-margin-end:-1px;--toast-button-margin-start:0;--toast-button-margin-end:auto;--toast-close-button-start:unset;--toast-close-button-end:0;--toast-close-button-transform:translate(35%, -35%)}:where([data-sonner-toaster]){position:fixed;width:var(--width);font-family:ui-sans-serif,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Roboto,\n Helvetica Neue,\n Arial,\n Noto Sans,\n sans-serif,\n Apple Color Emoji,\n Segoe UI Emoji,\n Segoe UI Symbol,\n Noto Color Emoji;--gray1:hsl(0, 0%, 99%);--gray2:hsl(0, 0%, 97.3%);--gray3:hsl(0, 0%, 95.1%);--gray4:hsl(0, 0%, 93%);--gray5:hsl(0, 0%, 90.9%);--gray6:hsl(0, 0%, 88.7%);--gray7:hsl(0, 0%, 85.8%);--gray8:hsl(0, 0%, 78%);--gray9:hsl(0, 0%, 56.1%);--gray10:hsl(0, 0%, 52.3%);--gray11:hsl(0, 0%, 43.5%);--gray12:hsl(0, 0%, 9%);--border-radius:8px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:none;z-index:999999999}:where([data-sonner-toaster][data-x-position='right']){right:max(var(--offset), env(safe-area-inset-right))}:where([data-sonner-toaster][data-x-position='left']){left:max(var(--offset), env(safe-area-inset-left))}:where([data-sonner-toaster][data-x-position='center']){left:50%;transform:translateX(-50%)}:where([data-sonner-toaster][data-y-position='top']){top:max(var(--offset), env(safe-area-inset-top))}:where([data-sonner-toaster][data-y-position='bottom']){bottom:max(var(--offset), env(safe-area-inset-bottom))}:where([data-sonner-toast]){--y:translateY(100%);--lift-amount:calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);filter:blur(0);touch-action:none;transition:transform 400ms,\n opacity 400ms,\n height 400ms,\n box-shadow 200ms;box-sizing:border-box;outline:none;overflow-wrap:anywhere}:where([data-sonner-toast][data-styled='true']){padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0px 4px 12px rgba(0, 0, 0, 0.1);width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}:where([data-sonner-toast]:focus-visible){box-shadow:0px 4px 12px rgba(0, 0, 0, 0.1),\n 0 0 0 2px rgba(0, 0, 0, 0.2)}:where([data-sonner-toast][data-y-position='top']){top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}:where([data-sonner-toast][data-y-position='bottom']){bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}:where([data-sonner-toast]) :where([data-description]){font-weight:400;line-height:1.4;color:inherit}:where([data-sonner-toast]) :where([data-title]){font-weight:500;line-height:1.5;color:inherit}:where([data-sonner-toast]) :where([data-icon]){display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}:where([data-sonner-toast][data-promise='true']) :where([data-icon])>svg{opacity:0;transform:scale(0.8);transform-origin:center;animation:sonner-fade-in 300ms ease forwards}:where([data-sonner-toast]) :where([data-icon])>*{flex-shrink:0}:where([data-sonner-toast]) :where([data-icon]) svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}:where([data-sonner-toast]) :where([data-content]){display:flex;flex-direction:column;gap:2px}[data-sonner-toast][data-styled='true'] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);m
|
|
|
|
|
|
map: `{"version":3,"file":"Toaster.svelte","sources":["Toaster.svelte"],"sourcesContent":["<script>import { onDestroy, onMount } from 'svelte';\\nimport { toastState } from './state.js';\\nimport Toast from './Toast.svelte';\\nimport Loader from './Loader.svelte';\\nimport Icon from './Icon.svelte';\\n// Visible toasts amount\\nconst VISIBLE_TOASTS_AMOUNT = 3;\\n// Viewport padding\\nconst VIEWPORT_OFFSET = '32px';\\n// Default toast width\\nconst TOAST_WIDTH = 356;\\n// Default gap between toasts\\nconst GAP = 14;\\nfunction getInitialTheme(t) {\\n if (t !== 'system') {\\n return t;\\n }\\n if (typeof window !== 'undefined') {\\n if (window.matchMedia &&\\n window.matchMedia('(prefers-color-scheme: dark)').matches) {\\n return 'dark';\\n }\\n return 'light';\\n }\\n return 'light';\\n}\\nfunction getDocumentDirection() {\\n if (typeof window === 'undefined')\\n return 'ltr';\\n if (typeof document === 'undefined')\\n return 'ltr'; // For Fresh purpose\\n const dirAttribute = document.documentElement.getAttribute('dir');\\n if (dirAttribute === 'auto' || !dirAttribute) {\\n return window.getComputedStyle(document.documentElement)\\n .direction;\\n }\\n return dirAttribute;\\n}\\nexport let invert = false;\\nexport let theme = 'light';\\nexport let position = 'bottom-right';\\nexport let hotkey = ['altKey', 'KeyT'];\\nexport let richColors = false;\\nexport let expand = false;\\nexport let duration = 4000;\\nexport let visibleToasts = VISIBLE_TOASTS_AMOUNT;\\nexport let closeButton = false;\\nexport let toastOptions = {};\\nexport let offset = null;\\nexport let dir = getDocumentDirection();\\nconst { toasts, heights, reset } = toastState;\\n$: possiblePositions = Array.from(new Set([\\n position,\\n ...$toasts\\n .filter((toast) => toast.position)\\n .map((toast) => toast.position)\\n].filter(Boolean)));\\nlet expanded = false;\\nlet interacting = false;\\nlet actualTheme = getInitialTheme(theme);\\nlet listRef;\\nlet lastFocusedElementRef = null;\\nlet isFocusWithinRef = false;\\n$: hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');\\n$: if ($toasts.length <= 1) {\\n expanded = false;\\n}\\nonDestroy(() => {\\n if (listRef && lastFocusedElementRef) {\\n lastFocusedElementRef.focus({ preventScroll: true });\\n lastFocusedElementRef = null;\\n isFocusWithinRef = false;\\n }\\n});\\nonMount(() => {\\n reset();\\n const handleKeydown = (event) => {\\n const isHotkeyPressed = hotkey.every((key) => \\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\\n event[key] || event.code === key);\\n if (isHotkeyPressed) {\\n expanded = true;\\n listRef?.focus();\\n }\\n if (event.code === 'Escape' &&\\n (document.activeElement === listRef ||\\n listRef?.contains(document.activeElement))) {\\n expanded = false;\\n }\\n };\\n document.addEventListener('keydown', handleKeydown);\\n return () => {\\n document.removeEventListener('keydown', handleKeydown);\\n };\\n});\\n$: {\\n if (theme !== 'system') {\\n actualTheme = theme;\\n }\\n if (typeof window !== 'undefined') {\\n if (theme === 'system') {\\n // check if current preference is dark\\n if (window.matchMedia &&\\n window.matchMedia('(prefers-color-scheme: dark)').matches) {\\n // it's currently dark\\n actualTheme = 'dark';\\n }\\n else {\\n // it's not dark\\n actualTheme = 'light';\\n }\\n }\\n window\\n .matchMedia('(prefers-color-scheme: dark)')\\n .addEventListener('change', ({ matches }) => {\\n actualTheme = matches ? 'dark' : 'light';\\n });\\n }\\n}\\nfunction handleBlur(event) {\\n if (isFocusWithinRef &&\\n !event.currentTar
|
|
|
|
|
|
};
|
|
|
|
|
|
const VISIBLE_TOASTS_AMOUNT = 3;
|
|
|
|
|
|
const VIEWPORT_OFFSET = "32px";
|
|
|
|
|
|
const TOAST_WIDTH = 356;
|
|
|
|
|
|
const GAP = 14;
|
|
|
|
|
|
function getInitialTheme(t) {
|
|
|
|
|
|
if (t !== "system") {
|
|
|
|
|
|
return t;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (typeof window !== "undefined") {
|
|
|
|
|
|
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
|
|
|
|
return "dark";
|
|
|
|
|
|
}
|
|
|
|
|
|
return "light";
|
|
|
|
|
|
}
|
|
|
|
|
|
return "light";
|
|
|
|
|
|
}
|
|
|
|
|
|
function getDocumentDirection() {
|
|
|
|
|
|
if (typeof window === "undefined")
|
|
|
|
|
|
return "ltr";
|
|
|
|
|
|
if (typeof document === "undefined")
|
|
|
|
|
|
return "ltr";
|
|
|
|
|
|
const dirAttribute = document.documentElement.getAttribute("dir");
|
|
|
|
|
|
if (dirAttribute === "auto" || !dirAttribute) {
|
|
|
|
|
|
return window.getComputedStyle(document.documentElement).direction;
|
|
|
|
|
|
}
|
|
|
|
|
|
return dirAttribute;
|
|
|
|
|
|
}
|
|
|
|
|
|
const Toaster = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let possiblePositions;
|
|
|
|
|
|
let hotkeyLabel;
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, [
|
|
|
|
|
|
"invert",
|
|
|
|
|
|
"theme",
|
|
|
|
|
|
"position",
|
|
|
|
|
|
"hotkey",
|
|
|
|
|
|
"richColors",
|
|
|
|
|
|
"expand",
|
|
|
|
|
|
"duration",
|
|
|
|
|
|
"visibleToasts",
|
|
|
|
|
|
"closeButton",
|
|
|
|
|
|
"toastOptions",
|
|
|
|
|
|
"offset",
|
|
|
|
|
|
"dir"
|
|
|
|
|
|
]);
|
|
|
|
|
|
let $toasts, $$unsubscribe_toasts;
|
|
|
|
|
|
let $heights, $$unsubscribe_heights;
|
|
|
|
|
|
let { invert = false } = $$props;
|
|
|
|
|
|
let { theme = "light" } = $$props;
|
|
|
|
|
|
let { position = "bottom-right" } = $$props;
|
|
|
|
|
|
let { hotkey = ["altKey", "KeyT"] } = $$props;
|
|
|
|
|
|
let { richColors = false } = $$props;
|
|
|
|
|
|
let { expand = false } = $$props;
|
|
|
|
|
|
let { duration = 4e3 } = $$props;
|
|
|
|
|
|
let { visibleToasts = VISIBLE_TOASTS_AMOUNT } = $$props;
|
|
|
|
|
|
let { closeButton = false } = $$props;
|
|
|
|
|
|
let { toastOptions = {} } = $$props;
|
|
|
|
|
|
let { offset = null } = $$props;
|
|
|
|
|
|
let { dir = getDocumentDirection() } = $$props;
|
|
|
|
|
|
const { toasts, heights, reset } = toastState;
|
|
|
|
|
|
$$unsubscribe_toasts = subscribe(toasts, (value) => $toasts = value);
|
|
|
|
|
|
$$unsubscribe_heights = subscribe(heights, (value) => $heights = value);
|
|
|
|
|
|
let expanded = false;
|
|
|
|
|
|
let interacting = false;
|
|
|
|
|
|
let actualTheme = getInitialTheme(theme);
|
|
|
|
|
|
let listRef;
|
|
|
|
|
|
onDestroy(() => {
|
|
|
|
|
|
});
|
|
|
|
|
|
if ($$props.invert === void 0 && $$bindings.invert && invert !== void 0)
|
|
|
|
|
|
$$bindings.invert(invert);
|
|
|
|
|
|
if ($$props.theme === void 0 && $$bindings.theme && theme !== void 0)
|
|
|
|
|
|
$$bindings.theme(theme);
|
|
|
|
|
|
if ($$props.position === void 0 && $$bindings.position && position !== void 0)
|
|
|
|
|
|
$$bindings.position(position);
|
|
|
|
|
|
if ($$props.hotkey === void 0 && $$bindings.hotkey && hotkey !== void 0)
|
|
|
|
|
|
$$bindings.hotkey(hotkey);
|
|
|
|
|
|
if ($$props.richColors === void 0 && $$bindings.richColors && richColors !== void 0)
|
|
|
|
|
|
$$bindings.richColors(richColors);
|
|
|
|
|
|
if ($$props.expand === void 0 && $$bindings.expand && expand !== void 0)
|
|
|
|
|
|
$$bindings.expand(expand);
|
|
|
|
|
|
if ($$props.duration === void 0 && $$bindings.duration && duration !== void 0)
|
|
|
|
|
|
$$bindings.duration(duration);
|
|
|
|
|
|
if ($$props.visibleToasts === void 0 && $$bindings.visibleToasts && visibleToasts !== void 0)
|
|
|
|
|
|
$$bindings.visibleToasts(visibleToasts);
|
|
|
|
|
|
if ($$props.closeButton === void 0 && $$bindings.closeButton && closeButton !== void 0)
|
|
|
|
|
|
$$bindings.closeButton(closeButton);
|
|
|
|
|
|
if ($$props.toastOptions === void 0 && $$bindings.toastOptions && toastOptions !== void 0)
|
|
|
|
|
|
$$bindings.toastOptions(toastOptions);
|
|
|
|
|
|
if ($$props.offset === void 0 && $$bindings.offset && offset !== void 0)
|
|
|
|
|
|
$$bindings.offset(offset);
|
|
|
|
|
|
if ($$props.dir === void 0 && $$bindings.dir && dir !== void 0)
|
|
|
|
|
|
$$bindings.dir(dir);
|
|
|
|
|
|
$$result.css.add(css);
|
|
|
|
|
|
possiblePositions = Array.from(new Set([
|
|
|
|
|
|
position,
|
|
|
|
|
|
...$toasts.filter((toast) => toast.position).map((toast) => toast.position)
|
|
|
|
|
|
].filter(Boolean)));
|
|
|
|
|
|
hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
|
|
|
|
|
|
{
|
|
|
|
|
|
if ($toasts.length <= 1) {
|
|
|
|
|
|
expanded = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
{
|
|
|
|
|
|
{
|
|
|
|
|
|
if (theme !== "system") {
|
|
|
|
|
|
actualTheme = theme;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (typeof window !== "undefined") {
|
|
|
|
|
|
if (theme === "system") {
|
|
|
|
|
|
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
|
|
|
|
actualTheme = "dark";
|
|
|
|
|
|
} else {
|
|
|
|
|
|
actualTheme = "light";
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches }) => {
|
|
|
|
|
|
actualTheme = matches ? "dark" : "light";
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
$$unsubscribe_toasts();
|
|
|
|
|
|
$$unsubscribe_heights();
|
|
|
|
|
|
return `${$toasts.length > 0 ? `<section${add_attribute("aria-label", `Notifications ${hotkeyLabel}`, 0)}${add_attribute("tabindex", -1, 0)}>${each(possiblePositions, (position2, index) => {
|
|
|
|
|
|
return `<ol${spread(
|
|
|
|
|
|
[
|
|
|
|
|
|
{ tabindex: escape_attribute_value(-1) },
|
|
|
|
|
|
{
|
|
|
|
|
|
class: escape_attribute_value($$props.class)
|
|
|
|
|
|
},
|
|
|
|
|
|
{ "data-sonner-toaster": true },
|
|
|
|
|
|
{
|
|
|
|
|
|
"data-theme": escape_attribute_value(actualTheme)
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"data-rich-colors": escape_attribute_value(richColors)
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
dir: escape_attribute_value(dir === "auto" ? getDocumentDirection() : dir)
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"data-y-position": escape_attribute_value(position2.split("-")[0])
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"data-x-position": escape_attribute_value(position2.split("-")[1])
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
style: escape_attribute_value($$props.style)
|
|
|
|
|
|
},
|
|
|
|
|
|
escape_object($$restProps)
|
|
|
|
|
|
],
|
|
|
|
|
|
{
|
|
|
|
|
|
styles: {
|
|
|
|
|
|
"--front-toast-height": `${$heights[0]?.height}px`,
|
|
|
|
|
|
"--offset": typeof offset === "number" ? `${offset}px` : offset || VIEWPORT_OFFSET,
|
|
|
|
|
|
"--width": `${TOAST_WIDTH}px`,
|
|
|
|
|
|
"--gap": `${GAP}px`
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
)}${add_attribute("this", listRef, 0)}>${each($toasts.filter((toast) => !toast.position && index === 0 || toast.position === position2), (toast, index2) => {
|
|
|
|
|
|
return `${validate_component(Toast, "Toast").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
{
|
|
|
|
|
|
index: index2,
|
|
|
|
|
|
toast,
|
|
|
|
|
|
invert,
|
|
|
|
|
|
visibleToasts,
|
|
|
|
|
|
closeButton,
|
|
|
|
|
|
interacting,
|
|
|
|
|
|
position: position2,
|
|
|
|
|
|
expandByDefault: expand,
|
|
|
|
|
|
expanded,
|
|
|
|
|
|
actionButtonStyle: toastOptions?.actionButtonStyle || "",
|
|
|
|
|
|
cancelButtonStyle: toastOptions?.cancelButtonStyle || "",
|
|
|
|
|
|
class: toastOptions?.class || "",
|
|
|
|
|
|
descriptionClass: toastOptions?.descriptionClass || "",
|
|
|
|
|
|
classes: toastOptions.classes || {},
|
|
|
|
|
|
duration: toastOptions?.duration ?? duration,
|
|
|
|
|
|
unstyled: toastOptions.unstyled || false
|
|
|
|
|
|
},
|
|
|
|
|
|
{},
|
|
|
|
|
|
{
|
|
|
|
|
|
"info-icon": () => {
|
|
|
|
|
|
return `${slots["info-icon"] ? slots["info-icon"]({ slot: "info-icon" }) : ` ${validate_component(Icon, "Icon").$$render($$result, { type: "info" }, {}, {})} `}`;
|
|
|
|
|
|
},
|
|
|
|
|
|
"warning-icon": () => {
|
|
|
|
|
|
return `${slots["warning-icon"] ? slots["warning-icon"]({ slot: "warning-icon" }) : ` ${validate_component(Icon, "Icon").$$render($$result, { type: "warning" }, {}, {})} `}`;
|
|
|
|
|
|
},
|
|
|
|
|
|
"error-icon": () => {
|
|
|
|
|
|
return `${slots["error-icon"] ? slots["error-icon"]({ slot: "error-icon" }) : ` ${validate_component(Icon, "Icon").$$render($$result, { type: "error" }, {}, {})} `}`;
|
|
|
|
|
|
},
|
|
|
|
|
|
"success-icon": () => {
|
|
|
|
|
|
return `${slots["success-icon"] ? slots["success-icon"]({ slot: "success-icon" }) : ` ${validate_component(Icon, "Icon").$$render($$result, { type: "success" }, {}, {})} `}`;
|
|
|
|
|
|
},
|
|
|
|
|
|
"loading-icon": () => {
|
|
|
|
|
|
return `${slots["loading-icon"] ? slots["loading-icon"]({ slot: "loading-icon" }) : ` ${validate_component(Loader, "Loader").$$render($$result, { visible: toast.type === "loading" }, {}, {})} `}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
)}`;
|
|
|
|
|
|
})} </ol>`;
|
|
|
|
|
|
})}</section>` : ``}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Sonner_1 = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let $$restProps = compute_rest_props($$props, []);
|
|
|
|
|
|
let $mode, $$unsubscribe_mode;
|
|
|
|
|
|
$$unsubscribe_mode = subscribe(derivedMode, (value) => $mode = value);
|
|
|
|
|
|
$$unsubscribe_mode();
|
|
|
|
|
|
return `${validate_component(Toaster, "Sonner").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
Object.assign(
|
|
|
|
|
|
{},
|
|
|
|
|
|
{ theme: $mode },
|
|
|
|
|
|
{ class: "toaster group" },
|
|
|
|
|
|
{
|
|
|
|
|
|
toastOptions: {
|
|
|
|
|
|
classes: {
|
|
|
|
|
|
toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
|
|
|
|
|
description: "group-[.toast]:text-muted-foreground",
|
|
|
|
|
|
actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
|
|
|
|
|
cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
$$restProps
|
|
|
|
|
|
),
|
|
|
|
|
|
{},
|
|
|
|
|
|
{}
|
|
|
|
|
|
)}`;
|
|
|
|
|
|
});
|
|
|
|
|
|
const Layout = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
|
|
let { data } = $$props;
|
|
|
|
|
|
const navs = [
|
2024-05-29 19:23:04 +00:00
|
|
|
|
{ name: "Dashboard", redirect: "/" },
|
|
|
|
|
|
{ name: "Articles", redirect: "/articles" },
|
|
|
|
|
|
{ name: "Emails", redirect: "/emails" },
|
|
|
|
|
|
{ name: "Website", redirect: "/website" }
|
2024-05-29 18:43:41 +00:00
|
|
|
|
];
|
2024-07-21 13:35:30 +00:00
|
|
|
|
if (new Date(data.me.subscribed_until).getTime() == 0)
|
|
|
|
|
|
;
|
|
|
|
|
|
const is_subscribed = new Date(data.me.subscribed_until) > /* @__PURE__ */ new Date();
|
2024-05-29 18:43:41 +00:00
|
|
|
|
if ($$props.data === void 0 && $$bindings.data && data !== void 0)
|
|
|
|
|
|
$$bindings.data(data);
|
|
|
|
|
|
return `${validate_component(Sonner_1, "Toaster").$$render($$result, {}, {}, {})} ${validate_component(Mode_watcher, "ModeWatcher").$$render($$result, {}, {}, {})} <div class="flex min-h-screen w-full flex-col"><header class="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6"><nav class="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6"><a href="##" class="flex items-center gap-2 text-lg font-semibold md:text-base">${validate_component(Package2, "Package2").$$render($$result, { class: "h-6 w-6" }, {}, {})} <span class="sr-only">${escape(data.me.name)}</span></a> ${each(navs, (nav) => {
|
|
|
|
|
|
return `<a${add_attribute("href", nav.redirect, 0)} class="text-muted-foreground transition-colors hover:text-foreground">${escape(nav.name)}</a>`;
|
|
|
|
|
|
})}</nav> ${validate_component(Root, "Sheet.Root").$$render($$result, {}, {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${validate_component(Trigger, "Sheet.Trigger").$$render($$result, { asChild: true }, {}, {
|
|
|
|
|
|
default: ({ builder }) => {
|
|
|
|
|
|
return `${validate_component(Button, "Button").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
{
|
|
|
|
|
|
variant: "outline",
|
|
|
|
|
|
size: "icon",
|
|
|
|
|
|
class: "shrink-0 md:hidden",
|
|
|
|
|
|
builders: [builder]
|
|
|
|
|
|
},
|
|
|
|
|
|
{},
|
|
|
|
|
|
{
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${validate_component(Menu$2, "Menu").$$render($$result, { class: "h-5 w-5" }, {}, {})} <span class="sr-only" data-svelte-h="svelte-9wqi12">Toggle navigation menu</span>`;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
)}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})} ${validate_component(Sheet_content, "Sheet.Content").$$render($$result, { side: "left" }, {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `<nav class="grid gap-6 text-lg font-medium"><a href="##" class="flex items-center gap-2 text-lg font-semibold">${validate_component(Package2, "Package2").$$render($$result, { class: "h-6 w-6" }, {}, {})} <span class="sr-only">${escape(data.me.name)}</span></a> ${each(navs, (nav) => {
|
|
|
|
|
|
return `<a${add_attribute("href", nav.redirect, 0)} class="hover:text-foreground">${escape(nav.name)}</a>`;
|
|
|
|
|
|
})} <div class="mt-auto">${validate_component(Button, "Button").$$render($$result, { variant: "outline", size: "icon" }, {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${validate_component(Sun, "Sun").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
{
|
|
|
|
|
|
class: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
|
|
|
|
|
|
},
|
|
|
|
|
|
{},
|
|
|
|
|
|
{}
|
|
|
|
|
|
)} ${validate_component(Moon, "Moon").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
{
|
|
|
|
|
|
class: "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
|
|
|
|
|
|
},
|
|
|
|
|
|
{},
|
|
|
|
|
|
{}
|
|
|
|
|
|
)} <span class="sr-only" data-svelte-h="svelte-ntgole">Toggle theme</span>`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})}</div></nav>`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})} <div class="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4"><div class="ml-auto hidden md:block">${validate_component(Button, "Button").$$render($$result, { variant: "outline", size: "icon" }, {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${validate_component(Sun, "Sun").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
{
|
|
|
|
|
|
class: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
|
|
|
|
|
|
},
|
|
|
|
|
|
{},
|
|
|
|
|
|
{}
|
|
|
|
|
|
)} ${validate_component(Moon, "Moon").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
{
|
|
|
|
|
|
class: "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
|
|
|
|
|
|
},
|
|
|
|
|
|
{},
|
|
|
|
|
|
{}
|
|
|
|
|
|
)} <span class="sr-only" data-svelte-h="svelte-ntgole">Toggle theme</span>`;
|
|
|
|
|
|
}
|
2024-07-21 13:35:30 +00:00
|
|
|
|
})}</div> <div class="ml-auto md:ml-0">Tokens: <span>${escape(data.me.tokens)}</span></div> ${validate_component(Root$1, "DropdownMenu.Root").$$render($$result, {}, {}, {
|
2024-05-29 18:43:41 +00:00
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${validate_component(Trigger$1, "DropdownMenu.Trigger").$$render($$result, { asChild: true }, {}, {
|
|
|
|
|
|
default: ({ builder }) => {
|
|
|
|
|
|
return `${validate_component(Button, "Button").$$render(
|
|
|
|
|
|
$$result,
|
|
|
|
|
|
{
|
|
|
|
|
|
builders: [builder],
|
|
|
|
|
|
variant: "secondary",
|
|
|
|
|
|
size: "icon",
|
|
|
|
|
|
class: "rounded-full"
|
|
|
|
|
|
},
|
|
|
|
|
|
{},
|
|
|
|
|
|
{
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${validate_component(CircleUser, "CircleUser").$$render($$result, { class: "h-5 w-5" }, {}, {})} <span class="sr-only" data-svelte-h="svelte-r9nh39">Toggle user menu</span>`;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
)}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})} ${validate_component(Dropdown_menu_content, "DropdownMenu.Content").$$render($$result, { align: "end" }, {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `${validate_component(Dropdown_menu_label, "DropdownMenu.Label").$$render($$result, {}, {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `My Account`;
|
|
|
|
|
|
}
|
2024-07-21 13:35:30 +00:00
|
|
|
|
})} ${validate_component(Dropdown_menu_separator, "DropdownMenu.Separator").$$render($$result, {}, {}, {})} ${validate_component(Dropdown_menu_item, "DropdownMenu.Item").$$render($$result, { href: config.api_url + "/me/billing" }, {}, {
|
2024-05-29 18:43:41 +00:00
|
|
|
|
default: () => {
|
2024-07-21 13:35:30 +00:00
|
|
|
|
return `Billing`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})} ${validate_component(Dropdown_menu_item, "DropdownMenu.Item").$$render($$result, {}, {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `<a href="mailto:info@omersabic.com?Subject=Youpage.ai support" data-svelte-h="svelte-1w8woe6">Support</a>`;
|
2024-05-29 18:43:41 +00:00
|
|
|
|
}
|
|
|
|
|
|
})} ${validate_component(Dropdown_menu_separator, "DropdownMenu.Separator").$$render($$result, {}, {}, {})} ${validate_component(Dropdown_menu_item, "DropdownMenu.Item").$$render($$result, {}, {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `Logout`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})}`;
|
|
|
|
|
|
}
|
2024-07-21 13:35:30 +00:00
|
|
|
|
})}</div></header> <main class="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">${slots.default ? slots.default({}) : ``}</main></div> ${!is_subscribed ? `<div class="fixed left-0 top-0 z-40 h-screen w-screen bg-black opacity-30"></div> <div class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:max-w-[750px] sm:rounded-lg md:w-full"><p data-svelte-h="svelte-cxgmz">Oops! It seems you’re not subscribed. Don’t worry, your site is still live and accessible. <br>
|
|
|
|
|
|
To manage your articles and signups, please update your billing information or resubscribe.</p> ${validate_component(Button, "Button").$$render($$result, { href: config.api_url + "/me/subscribe" }, {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `Resubscribe`;
|
|
|
|
|
|
}
|
|
|
|
|
|
})} ${validate_component(Button, "Button").$$render($$result, { href: config.api_url + "/me/billing" }, {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `Manage Billing`;
|
|
|
|
|
|
}
|
2024-07-21 15:28:33 +00:00
|
|
|
|
})} ${validate_component(Button, "Button").$$render($$result, {}, {}, {
|
|
|
|
|
|
default: () => {
|
|
|
|
|
|
return `Log out`;
|
|
|
|
|
|
}
|
2024-07-21 13:35:30 +00:00
|
|
|
|
})} <p class="text-md text-center text-gray-500" data-svelte-h="svelte-h3miay">Need help? <a href="mailto:info@omersabic.com?Subject=Youpage.ai support" class="text-blue-500 underline">Contact support</a></p></div>` : ``}`;
|
2024-05-29 18:43:41 +00:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
export { Layout as default };
|
2024-07-21 15:28:33 +00:00
|
|
|
|
//# sourceMappingURL=_layout.svelte-BME46Z-T.js.map
|
