@exponential_app/eui-solid 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/{image-loading-status--T9ny7b0.js → zoomable-image-CmoMEUF6.js} +1392 -32
- package/dist/chunks/zoomable-image-CmoMEUF6.js.map +1 -0
- package/dist/exponential-ui-solid.css +1 -1
- package/dist/index.js +908 -478
- package/dist/index.js.map +1 -1
- package/dist/primitives.js +328 -1333
- package/dist/primitives.js.map +1 -1
- package/dist/types/icons.d.ts +1 -0
- package/dist/types/natives/media.d.ts +6 -0
- package/dist/types/natives/motion.d.ts +4 -0
- package/dist/types/natives/overlays.d.ts +43 -1
- package/dist/types/natives/zoomable-image.d.ts +4 -0
- package/dist/types/primitives/index.d.ts +1 -0
- package/dist/types/primitives/zoomable-image.d.ts +68 -0
- package/package.json +2 -2
- package/dist/chunks/image-loading-status--T9ny7b0.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { createComponent, memo, spread, mergeProps, insert, template, effect, use, setAttribute, style, className, delegateEvents, Dynamic, Portal, addEventListener } from "solid-js/web";
|
|
1
|
+
import { createComponent, memo, spread, mergeProps, insert, template, effect, use, setAttribute, style, className, delegateEvents, Dynamic, Portal, addEventListener, setStyleProperty } from "solid-js/web";
|
|
2
2
|
import { createContext, useContext, createSignal, createMemo, Show, For, createEffect, onCleanup, untrack, createRenderEffect, on, createComputed, createUniqueId, Index, onMount, batch, ErrorBoundary, mergeProps as mergeProps$1, splitProps } from "solid-js";
|
|
3
|
-
import { defineExtension, nativeRecipeProps, displayString, itemOffsets, virtualWindow, WINDOW_OVERSCAN, stickyHeader, itemExtents, scrollOffsetForIndex, listSections, sectionRows, WINDOW_THRESHOLD as WINDOW_THRESHOLD$1, PENDING_DELAY_MS, chartExtent, niceTicks, DONUT_HOLE, seriesColor, chartSummaryParams, OVERLAY_OFFSET, OVERLAY_PADDING, tokenizeCode, codeText, weekStart, TREE_GUIDE_BRIDGE, voiceWaveVariant, resolveRecipe, VOICE_WAVE_ACTIVITIES, voiceWaveBars, voiceWave, voiceWavePath, voiceWaveChildBox,
|
|
4
|
-
import { propAttribute, builtinIconName, PLACED, partClass, FormRegistry, str, bool, failingChecks, fieldErrorsVisible, validateOnDefault, listViewport, scrollParent, getPointer, num, LITERAL_ROWS_ROOT, setPointer, openMediaSource, parseMarkdown, linkHref, mediaRequestOf, boundPath, ButtonHold, objects, arr, tokenVar, visualScale, joinIds, phrase, acceptsFile, formatFileSize, parseIsoDate, sameDay, isoDate, monthGrid, calendarStop, addMonths, addDays, voiceWaveAnimates, voiceWaveClock, voiceWaveFitChild, voiceWaveName, HostOwnedController, DEBOUNCE_MS, parseLocaleNumber, hostPath, segmentedBadge, elementScale, isBinding, absolutePath, qrScanFormats, qrFeedColour, QR_CORNERS, QR_SCANNER, qrCornerPath, qrPaint, qrScanReporter, sortRows, resolveVisible, styleDirection, queryToken, resolveNodeProps, resolveValue, dynamicStyleEntries, cssValue, nodeClass, isMacroComponent, ariaAttributes, resolveAccessibility, compiledTheme, share, walkNodes, compileNodeSheet, nodeSheetBatches, CLIENT_FUNCTIONS, memoFormatter, surfaceClass, BASE_CSS, openAllowed, layoutSize } from "@exponential_app/eui/web";
|
|
3
|
+
import { defineExtension, nativeRecipeProps, displayString, itemOffsets, virtualWindow, WINDOW_OVERSCAN, stickyHeader, itemExtents, scrollOffsetForIndex, listSections, sectionRows, WINDOW_THRESHOLD as WINDOW_THRESHOLD$1, PENDING_DELAY_MS, chartExtent, niceTicks, DONUT_HOLE, seriesColor, chartSummaryParams, OVERLAY_OFFSET, OVERLAY_PADDING, tokenizeCode, codeText, weekStart, TREE_GUIDE_RADIUS, TREE_GUIDE_BRIDGE, TREE_GUIDE_COLUMN, voiceWaveVariant, resolveRecipe, VOICE_WAVE_ACTIVITIES, voiceWaveBars, voiceWave, voiceWavePath, voiceWaveChildBox, MEDIA_ASPECT_RATIO, MEDIA_INTRINSIC_WIDTH, normalizeSizes, RESIZE_HANDLE_HIT, keyboardResize, dragDelta, resizePanels, tableRowKeys, ZOOM, templateItemKeys, templateSiteKey, isResponsiveValue, responsiveAt, UNKNOWN_COMPONENT, catalogView, withOwnWrites, instanceSegment, DEFAULT_LOCALE, resolveMode, textDirection, stringTable, templateBudget, intlFormatter, builtinTheme, DEFAULT_THEME_ID, themeOrDefault, applyDensity, applyContrast, activeBreakpoint, parseMediaCondition, mediaMatches, formatString, CORE_CATALOG_ID, reduceNested, reduceSurface } from "@exponential_app/eui";
|
|
4
|
+
import { propAttribute, builtinIconName, PLACED, partClass, FormRegistry, str, bool, failingChecks, fieldErrorsVisible, validateOnDefault, listViewport, scrollParent, getPointer, num, LITERAL_ROWS_ROOT, setPointer, openMediaSource, parseMarkdown, linkHref, mediaRequestOf, boundPath, ButtonHold, objects, arr, tokenVar, visualScale, joinIds, phrase, acceptsFile, formatFileSize, parseIsoDate, sameDay, isoDate, monthGrid, calendarStop, addMonths, addDays, voiceWaveAnimates, voiceWaveClock, voiceWaveFitChild, voiceWaveName, HostOwnedController, DEBOUNCE_MS, parseLocaleNumber, hostPath, mediaClock, MotionView, motionA11y, motionBoxStyle, motionDeclaredSize, segmentedBadge, elementScale, isBinding, absolutePath, overlayOpenFocus, qrScanFormats, qrFeedColour, QR_CORNERS, QR_SCANNER, qrCornerPath, qrPaint, qrScanReporter, sortRows, tableTemplate, tableMinWidth, resolveVisible, styleDirection, queryToken, resolveNodeProps, resolveValue, dynamicStyleEntries, cssValue, nodeClass, isMacroComponent, ariaAttributes, resolveAccessibility, compiledTheme, share, walkNodes, compileNodeSheet, nodeSheetBatches, CLIENT_FUNCTIONS, memoFormatter, surfaceClass, BASE_CSS, openAllowed, layoutSize } from "@exponential_app/eui/web";
|
|
5
5
|
import { BASE_CSS as BASE_CSS2, CLIENT_FUNCTIONS as CLIENT_FUNCTIONS2, DEBOUNCE_MS as DEBOUNCE_MS2, LAYERS, MEDIA_CACHE_IDLE_MAX, STATE_SELECTORS, absolutePath as absolutePath2, acceptsFile as acceptsFile2, arr as arr2, bindTree, bool as bool2, boundPath as boundPath2, builtinIconName as builtinIconName2, clearMediaCache, compileNodeSheet as compileNodeSheet2, compileTheme, compiledTheme as compiledTheme2, cssValue as cssValue2, declarations, dynamicStyleEntries as dynamicStyleEntries2, failingChecks as failingChecks2, fetchLimited, getPointer as getPointer2, hasDynamic, isBinding as isBinding2, isCall, linkHref as linkHref2, mediaCacheStats, mediaRequestOf as mediaRequestOf2, memoFormatter as memoFormatter2, monthGrid as monthGrid2, nodeClass as nodeClass2, nodeSheet, num as num2, parseLocaleNumber as parseLocaleNumber2, partClass as partClass2, propAttribute as propAttribute2, queryToken as queryToken2, resolveNodeProps as resolveNodeProps2, resolveProps, resolveValue as resolveValue2, resolveVisible as resolveVisible2, ruleSelectors, setPointer as setPointer2, sortRows as sortRows2, str as str2, surfaceClass as surfaceClass2, themeScope, tokenVar as tokenVar2, tokenVarName, urlPolicyOf, walkNodes as walkNodes2 } from "@exponential_app/eui/web";
|
|
6
|
-
import { I as IconGlyph, c as css, P as PaintIcon, C as CHROME, a as createElementSize, t as transformOrigin, b as createListNavigation, d as createListNavigationSync, e as createElementSize$1, f as createInForm, S as SliderBubble, B as BubbleCheck, r as rovingFocusFirst, K as KEY_INTENT, g as createImageLoadingStatus, h as createRovingGroup, L as LayerPortal, i as createPresence, M as MenuContent, j as createLayer, k as Popper, V as VisuallyHidden, l as bindStyle, m as LayerContext,
|
|
7
|
-
import {
|
|
6
|
+
import { I as IconGlyph, c as css, P as PaintIcon, C as CHROME, a as createElementSize, t as transformOrigin, b as createListNavigation, d as createListNavigationSync, e as createElementSize$1, f as createInForm, S as SliderBubble, B as BubbleCheck, r as rovingFocusFirst, K as KEY_INTENT, g as createImageLoadingStatus, h as createRovingGroup, L as LayerPortal, i as createPresence, u as useKeyboardTracking, M as MenuContent, j as createLayer, k as Popper, V as VisuallyHidden, l as bindStyle, m as LayerContext, n as useFocusGuards, o as graceArea, p as createFocusScope, q as useScrollLock, s as useModalEffects, v as createMenuRow, w as createSelectable, x as popperContentStyle, y as inPolygon, z as radixTypeahead, O as OPEN_KEYS, N as NativeSelect, A as findNextItem, D as dismissable, E as popperWrapper, F as mountIn, G as SELECTION_KEYS, H as createZoomableImage, Z as ZOOM_MATH, J as createMediaQuery, Q as px } from "./chunks/zoomable-image-CmoMEUF6.js";
|
|
7
|
+
import { R, T } from "./chunks/zoomable-image-CmoMEUF6.js";
|
|
8
8
|
import "aria-hidden";
|
|
9
9
|
import { autoUpdate, computePosition, offset, shift, limitShift, flip, size } from "@floating-ui/dom";
|
|
10
|
+
import { zoomableImageLayout, zoomBoxAspect, ZOOMABLE_IMAGE_NATIVE_TRANSITION } from "@exponential_app/eui/web/primitives";
|
|
10
11
|
const SurfaceContext = createContext();
|
|
11
12
|
function useSurfaceContext() {
|
|
12
13
|
const ctx = useContext(SurfaceContext);
|
|
@@ -89,7 +90,7 @@ function extensionComponent(extensions, component) {
|
|
|
89
90
|
}
|
|
90
91
|
return void 0;
|
|
91
92
|
}
|
|
92
|
-
var _tmpl$$
|
|
93
|
+
var _tmpl$$r = /* @__PURE__ */ template(`<label>`), _tmpl$2$o = /* @__PURE__ */ template(`<div>`), _tmpl$3$m = /* @__PURE__ */ template(`<p>`), _tmpl$4$i = /* @__PURE__ */ template(`<span>`);
|
|
93
94
|
function parts(source) {
|
|
94
95
|
const ctx = useSurfaceContext();
|
|
95
96
|
const instance = useInstance();
|
|
@@ -138,7 +139,7 @@ function TextPart(props) {
|
|
|
138
139
|
return memo(() => memo(() => !!s())() ? (() => {
|
|
139
140
|
const Tag = props.as ?? `span`;
|
|
140
141
|
if (Tag === `label`) return (() => {
|
|
141
|
-
var _el$ = _tmpl$$
|
|
142
|
+
var _el$ = _tmpl$$r();
|
|
142
143
|
spread(_el$, mergeProps(() => props.part, {
|
|
143
144
|
get id() {
|
|
144
145
|
return props.id;
|
|
@@ -151,7 +152,7 @@ function TextPart(props) {
|
|
|
151
152
|
return _el$;
|
|
152
153
|
})();
|
|
153
154
|
if (Tag === `div`) return (() => {
|
|
154
|
-
var _el$2 = _tmpl$2$
|
|
155
|
+
var _el$2 = _tmpl$2$o();
|
|
155
156
|
spread(_el$2, mergeProps(() => props.part, {
|
|
156
157
|
get id() {
|
|
157
158
|
return props.id;
|
|
@@ -161,7 +162,7 @@ function TextPart(props) {
|
|
|
161
162
|
return _el$2;
|
|
162
163
|
})();
|
|
163
164
|
if (Tag === `p`) return (() => {
|
|
164
|
-
var _el$3 = _tmpl$3$
|
|
165
|
+
var _el$3 = _tmpl$3$m();
|
|
165
166
|
spread(_el$3, mergeProps(() => props.part, {
|
|
166
167
|
get id() {
|
|
167
168
|
return props.id;
|
|
@@ -205,7 +206,7 @@ function BuiltinIcon(props) {
|
|
|
205
206
|
}
|
|
206
207
|
});
|
|
207
208
|
}
|
|
208
|
-
var _tmpl$$
|
|
209
|
+
var _tmpl$$q = /* @__PURE__ */ template(`<div><span class=xui-sr-only></span><ul class=xui-form-summary-list>`), _tmpl$2$n = /* @__PURE__ */ template(`<form><fieldset class=xui-form-fields>`), _tmpl$3$l = /* @__PURE__ */ template(`<li>`), _tmpl$4$h = /* @__PURE__ */ template(`<div>`), _tmpl$5$f = /* @__PURE__ */ template(`<span class=xui-field-error>`);
|
|
209
210
|
const FormContext = createContext(null);
|
|
210
211
|
const CloseOnSubmitContext = createContext(null);
|
|
211
212
|
function useForm() {
|
|
@@ -264,7 +265,7 @@ function FormNative(props) {
|
|
|
264
265
|
return createComponent(FormContext.Provider, {
|
|
265
266
|
value,
|
|
266
267
|
get children() {
|
|
267
|
-
var _el$ = _tmpl$2$
|
|
268
|
+
var _el$ = _tmpl$2$n(), _el$5 = _el$.firstChild;
|
|
268
269
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
269
270
|
"novalidate": true,
|
|
270
271
|
get ["aria-busy"]() {
|
|
@@ -287,7 +288,7 @@ function FormNative(props) {
|
|
|
287
288
|
return memo(() => !!bool(props.props.summary))() && live().length;
|
|
288
289
|
},
|
|
289
290
|
get children() {
|
|
290
|
-
var _el$2 = _tmpl$$
|
|
291
|
+
var _el$2 = _tmpl$$q(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
|
|
291
292
|
spread(_el$2, mergeProps(() => part(`summary`), {
|
|
292
293
|
"role": "alert",
|
|
293
294
|
get id() {
|
|
@@ -300,7 +301,7 @@ function FormNative(props) {
|
|
|
300
301
|
return live();
|
|
301
302
|
},
|
|
302
303
|
children: (e) => (() => {
|
|
303
|
-
var _el$6 = _tmpl$3$
|
|
304
|
+
var _el$6 = _tmpl$3$l();
|
|
304
305
|
insert(_el$6, () => e.message);
|
|
305
306
|
return _el$6;
|
|
306
307
|
})()
|
|
@@ -411,7 +412,7 @@ function bindAttrs(el, bag) {
|
|
|
411
412
|
return next;
|
|
412
413
|
}, {});
|
|
413
414
|
}
|
|
414
|
-
var _tmpl$$
|
|
415
|
+
var _tmpl$$p = /* @__PURE__ */ template(`<div>`), _tmpl$2$m = /* @__PURE__ */ template(`<div class=xui-list-item>`), _tmpl$3$k = /* @__PURE__ */ template(`<div class=xui-list-gap aria-hidden=true>`);
|
|
415
416
|
function WindowedList(props) {
|
|
416
417
|
let el;
|
|
417
418
|
const extentsByKey = /* @__PURE__ */ new Map();
|
|
@@ -612,7 +613,7 @@ function WindowedList(props) {
|
|
|
612
613
|
height: total()
|
|
613
614
|
});
|
|
614
615
|
return (() => {
|
|
615
|
-
var _el$ = _tmpl$$
|
|
616
|
+
var _el$ = _tmpl$$p();
|
|
616
617
|
var _ref$ = el;
|
|
617
618
|
typeof _ref$ === "function" ? use(_ref$, _el$) : el = _el$;
|
|
618
619
|
insert(_el$, createComponent(For, {
|
|
@@ -635,12 +636,12 @@ function WindowedList(props) {
|
|
|
635
636
|
});
|
|
636
637
|
};
|
|
637
638
|
return (() => {
|
|
638
|
-
var _el$2 = _tmpl$2$
|
|
639
|
+
var _el$2 = _tmpl$2$m();
|
|
639
640
|
use(measure, _el$2);
|
|
640
641
|
insert(_el$2, (() => {
|
|
641
642
|
var _c$ = memo(() => !!line());
|
|
642
643
|
return () => _c$() ? (() => {
|
|
643
|
-
var _el$3 = _tmpl$3$
|
|
644
|
+
var _el$3 = _tmpl$3$k();
|
|
644
645
|
insert(_el$3, line);
|
|
645
646
|
effect((_p$) => {
|
|
646
647
|
var _v$9 = axis(), _v$0 = css(horizontal() ? {
|
|
@@ -697,7 +698,7 @@ function WindowedList(props) {
|
|
|
697
698
|
return _el$;
|
|
698
699
|
})();
|
|
699
700
|
}
|
|
700
|
-
var _tmpl$$
|
|
701
|
+
var _tmpl$$o = /* @__PURE__ */ template(`<div>`), _tmpl$2$l = /* @__PURE__ */ template(`<div class=xui-list-row>`), _tmpl$3$j = /* @__PURE__ */ template(`<div class=xui-list-gap aria-hidden=true>`), _tmpl$4$g = /* @__PURE__ */ template(`<div><span> `);
|
|
701
702
|
function BoxNative(props) {
|
|
702
703
|
const pressable = () => bool(props.props.pressable) || Boolean(props.node.on?.press);
|
|
703
704
|
const onKey = (e) => {
|
|
@@ -713,14 +714,14 @@ function BoxNative(props) {
|
|
|
713
714
|
},
|
|
714
715
|
get fallback() {
|
|
715
716
|
return (() => {
|
|
716
|
-
var _el$2 = _tmpl$$
|
|
717
|
+
var _el$2 = _tmpl$$o();
|
|
717
718
|
spread(_el$2, mergeProps(() => props.rootProps), false, true);
|
|
718
719
|
insert(_el$2, () => props.children);
|
|
719
720
|
return _el$2;
|
|
720
721
|
})();
|
|
721
722
|
},
|
|
722
723
|
get children() {
|
|
723
|
-
var _el$ = _tmpl$$
|
|
724
|
+
var _el$ = _tmpl$$o();
|
|
724
725
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
725
726
|
"data-pressable": "true",
|
|
726
727
|
"role": "button",
|
|
@@ -846,7 +847,7 @@ function ListNative(props) {
|
|
|
846
847
|
const divider = (r) => {
|
|
847
848
|
const before = dividerBefore(r);
|
|
848
849
|
return before === null ? null : (() => {
|
|
849
|
-
var _el$3 = _tmpl$$
|
|
850
|
+
var _el$3 = _tmpl$$o();
|
|
850
851
|
spread(_el$3, mergeProps(() => part.at(`divider`, before), {
|
|
851
852
|
"role": "separator"
|
|
852
853
|
}), false, false);
|
|
@@ -864,7 +865,7 @@ function ListNative(props) {
|
|
|
864
865
|
},
|
|
865
866
|
get fallback() {
|
|
866
867
|
return (() => {
|
|
867
|
-
var _el$5 = _tmpl$$
|
|
868
|
+
var _el$5 = _tmpl$$o();
|
|
868
869
|
var _ref$2 = rootEl;
|
|
869
870
|
typeof _ref$2 === "function" ? use(_ref$2, _el$5) : rootEl = _el$5;
|
|
870
871
|
spread(_el$5, mergeProps(() => props.rootProps, {
|
|
@@ -883,7 +884,7 @@ function ListNative(props) {
|
|
|
883
884
|
const r = createMemo((prev) => flatIndex().get(key) ?? prev);
|
|
884
885
|
const line = createMemo(() => divider(r()));
|
|
885
886
|
return (() => {
|
|
886
|
-
var _el$6 = _tmpl$2$
|
|
887
|
+
var _el$6 = _tmpl$2$l();
|
|
887
888
|
spread(_el$6, mergeProps({
|
|
888
889
|
get ["data-axis"]() {
|
|
889
890
|
return axis();
|
|
@@ -895,7 +896,7 @@ function ListNative(props) {
|
|
|
895
896
|
insert(_el$6, (() => {
|
|
896
897
|
var _c$ = memo(() => !!line());
|
|
897
898
|
return () => _c$() ? (() => {
|
|
898
|
-
var _el$7 = _tmpl$3$
|
|
899
|
+
var _el$7 = _tmpl$3$j();
|
|
899
900
|
insert(_el$7, line);
|
|
900
901
|
effect((_p$) => {
|
|
901
902
|
var _v$ = axis(), _v$2 = css(horizontal() ? {
|
|
@@ -922,7 +923,7 @@ function ListNative(props) {
|
|
|
922
923
|
})();
|
|
923
924
|
},
|
|
924
925
|
get children() {
|
|
925
|
-
var _el$4 = _tmpl$$
|
|
926
|
+
var _el$4 = _tmpl$$o();
|
|
926
927
|
var _ref$ = rootEl;
|
|
927
928
|
typeof _ref$ === "function" ? use(_ref$, _el$4) : rootEl = _el$4;
|
|
928
929
|
spread(_el$4, mergeProps(() => props.rootProps, {
|
|
@@ -978,7 +979,7 @@ function ListRowView(props) {
|
|
|
978
979
|
return (() => {
|
|
979
980
|
const section = latest(() => props.sections?.[n]);
|
|
980
981
|
return (() => {
|
|
981
|
-
var _el$8 = _tmpl$$
|
|
982
|
+
var _el$8 = _tmpl$$o();
|
|
982
983
|
spread(_el$8, mergeProps(() => props.part.at(`section`, n), {
|
|
983
984
|
"role": "heading",
|
|
984
985
|
"aria-level": 3
|
|
@@ -1088,11 +1089,11 @@ function UnknownNative(props) {
|
|
|
1088
1089
|
return _el$9;
|
|
1089
1090
|
})();
|
|
1090
1091
|
}
|
|
1091
|
-
const NATIVE_ORDER = [`Box`, `List`, `Resizable`, `Text`, `Markdown`, `CodeBlock`, `Image`, `Icon`, `Video`, `AudioPlayer`, `Avatar`, `QrCode`, `Carousel`, `Tabs`, `Segmented`, `Accordion`, `Dialog`, `Drawer`, `Popover`, `Tooltip`, `Menu`, `Toast`, `Ring`, `Spinner`, `Skeleton`, `VoiceWave`, `Table`, `Chart`, `Button`, `Link`, `Toggle`, `Form`, `Input`, `Textarea`, `NumberField`, `Checkbox`, `Radio`, `ChoiceTiles`, `Switch`, `Slider`, `Select`, `SearchList`, `ChipInput`, `DatePicker`, `DateRangePicker`, `TimePicker`, `FileUpload`, `QrScanner`, `Composer`, `TreeGuides`, `Unknown`];
|
|
1092
|
-
var _tmpl$$
|
|
1092
|
+
const NATIVE_ORDER = [`Box`, `List`, `Resizable`, `Text`, `Markdown`, `CodeBlock`, `Image`, `ZoomableImage`, `Icon`, `Video`, `AudioPlayer`, `Avatar`, `QrCode`, `Carousel`, `Tabs`, `Segmented`, `Accordion`, `Dialog`, `Drawer`, `Popover`, `Tooltip`, `Menu`, `Toast`, `Ring`, `Spinner`, `Skeleton`, `VoiceWave`, `Motion`, `Table`, `Chart`, `Button`, `Link`, `Toggle`, `Form`, `Input`, `Textarea`, `NumberField`, `Checkbox`, `Radio`, `ChoiceTiles`, `Switch`, `Slider`, `Select`, `SearchList`, `ChipInput`, `DatePicker`, `DateRangePicker`, `TimePicker`, `FileUpload`, `QrScanner`, `Composer`, `TreeGuides`, `Unknown`];
|
|
1093
|
+
var _tmpl$$n = /* @__PURE__ */ template(`<div>`);
|
|
1093
1094
|
function Pending(props) {
|
|
1094
1095
|
return (() => {
|
|
1095
|
-
var _el$ = _tmpl$$
|
|
1096
|
+
var _el$ = _tmpl$$n();
|
|
1096
1097
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
1097
1098
|
get ["data-xui-pending"]() {
|
|
1098
1099
|
return props.node.component;
|
|
@@ -1131,7 +1132,7 @@ function createMediaSrc(host, src, kind = `image`) {
|
|
|
1131
1132
|
const source = createMediaSource(host, src, kind);
|
|
1132
1133
|
return () => source().url;
|
|
1133
1134
|
}
|
|
1134
|
-
var _tmpl$$
|
|
1135
|
+
var _tmpl$$m = /* @__PURE__ */ template(`<div class=xui-Markdown-image role=img>`), _tmpl$2$k = /* @__PURE__ */ template(`<p class=xui-Markdown-paragraph>`), _tmpl$3$i = /* @__PURE__ */ template(`<img alt>`), _tmpl$4$f = /* @__PURE__ */ template(`<span class=xui-Markdown-imageAlt>`), _tmpl$5$e = /* @__PURE__ */ template(`<a class=xui-Markdown-link target=_blank rel=noreferrer>`), _tmpl$6$c = /* @__PURE__ */ template(`<code class=xui-Markdown-code>`), _tmpl$7$b = /* @__PURE__ */ template(`<strong>`), _tmpl$8$a = /* @__PURE__ */ template(`<em>`), _tmpl$9$a = /* @__PURE__ */ template(`<del>`), _tmpl$0$7 = /* @__PURE__ */ template(`<span class=xui-Markdown-link data-denied>`), _tmpl$1$6 = /* @__PURE__ */ template(`<li class=xui-Markdown-listItem>`), _tmpl$10$6 = /* @__PURE__ */ template(`<input type=checkbox readonly>`), _tmpl$11$6 = /* @__PURE__ */ template(`<ol>`), _tmpl$12$4 = /* @__PURE__ */ template(`<ul>`), _tmpl$13$4 = /* @__PURE__ */ template(`<pre class=xui-Markdown-codeBlock><code>`), _tmpl$14$4 = /* @__PURE__ */ template(`<blockquote class=xui-Markdown-quote>`), _tmpl$15$2 = /* @__PURE__ */ template(`<table class=xui-Markdown-table><thead><tr></tr></thead><tbody>`), _tmpl$16$2 = /* @__PURE__ */ template(`<th>`), _tmpl$17$2 = /* @__PURE__ */ template(`<tr>`), _tmpl$18$1 = /* @__PURE__ */ template(`<td>`), _tmpl$19$1 = /* @__PURE__ */ template(`<hr>`), _tmpl$20$1 = /* @__PURE__ */ template(`<div>`);
|
|
1135
1136
|
function MarkdownImage(props) {
|
|
1136
1137
|
const media = createMediaSource(() => props.host, () => props.src);
|
|
1137
1138
|
return createComponent(Show, {
|
|
@@ -1140,17 +1141,17 @@ function MarkdownImage(props) {
|
|
|
1140
1141
|
},
|
|
1141
1142
|
get fallback() {
|
|
1142
1143
|
return memo(() => !!props.alt)() ? (() => {
|
|
1143
|
-
var _el$2 = _tmpl$2$
|
|
1144
|
+
var _el$2 = _tmpl$2$k();
|
|
1144
1145
|
insert(_el$2, () => props.alt);
|
|
1145
1146
|
return _el$2;
|
|
1146
1147
|
})() : null;
|
|
1147
1148
|
},
|
|
1148
1149
|
get children() {
|
|
1149
|
-
var _el$ = _tmpl$$
|
|
1150
|
+
var _el$ = _tmpl$$m();
|
|
1150
1151
|
insert(_el$, (() => {
|
|
1151
1152
|
var _c$ = memo(() => !!(media().url && !media().error));
|
|
1152
1153
|
return () => _c$() ? (() => {
|
|
1153
|
-
var _el$3 = _tmpl$3$
|
|
1154
|
+
var _el$3 = _tmpl$3$i();
|
|
1154
1155
|
effect(() => setAttribute(_el$3, "src", media().url));
|
|
1155
1156
|
return _el$3;
|
|
1156
1157
|
})() : (() => {
|
|
@@ -1242,11 +1243,11 @@ function renderList(list, host) {
|
|
|
1242
1243
|
return _el$1;
|
|
1243
1244
|
})());
|
|
1244
1245
|
return list.ordered ? (() => {
|
|
1245
|
-
var _el$11 = _tmpl$11$
|
|
1246
|
+
var _el$11 = _tmpl$11$6();
|
|
1246
1247
|
insert(_el$11, items);
|
|
1247
1248
|
return _el$11;
|
|
1248
1249
|
})() : (() => {
|
|
1249
|
-
var _el$12 = _tmpl$12$
|
|
1250
|
+
var _el$12 = _tmpl$12$4();
|
|
1250
1251
|
insert(_el$12, items);
|
|
1251
1252
|
return _el$12;
|
|
1252
1253
|
})();
|
|
@@ -1255,7 +1256,7 @@ function block(b, host) {
|
|
|
1255
1256
|
switch (b.type) {
|
|
1256
1257
|
case `paragraph`:
|
|
1257
1258
|
return (() => {
|
|
1258
|
-
var _el$13 = _tmpl$2$
|
|
1259
|
+
var _el$13 = _tmpl$2$k();
|
|
1259
1260
|
insert(_el$13, () => inline(b.children, host));
|
|
1260
1261
|
return _el$13;
|
|
1261
1262
|
})();
|
|
@@ -1271,7 +1272,7 @@ function block(b, host) {
|
|
|
1271
1272
|
});
|
|
1272
1273
|
case `codeBlock`:
|
|
1273
1274
|
return (() => {
|
|
1274
|
-
var _el$14 = _tmpl$13$
|
|
1275
|
+
var _el$14 = _tmpl$13$4(), _el$15 = _el$14.firstChild;
|
|
1275
1276
|
insert(_el$15, () => b.text);
|
|
1276
1277
|
effect(() => setAttribute(_el$14, "data-lang", b.lang));
|
|
1277
1278
|
return _el$14;
|
|
@@ -1291,7 +1292,7 @@ function block(b, host) {
|
|
|
1291
1292
|
});
|
|
1292
1293
|
case `quote`:
|
|
1293
1294
|
return (() => {
|
|
1294
|
-
var _el$16 = _tmpl$14$
|
|
1295
|
+
var _el$16 = _tmpl$14$4();
|
|
1295
1296
|
insert(_el$16, () => blocks(b.children, host));
|
|
1296
1297
|
return _el$16;
|
|
1297
1298
|
})();
|
|
@@ -1356,13 +1357,13 @@ function BuiltinMarkdown(props) {
|
|
|
1356
1357
|
})();
|
|
1357
1358
|
}
|
|
1358
1359
|
delegateEvents(["click"]);
|
|
1359
|
-
var _tmpl$$
|
|
1360
|
+
var _tmpl$$l = /* @__PURE__ */ template(`<span>`), _tmpl$2$j = /* @__PURE__ */ template(`<div>`);
|
|
1360
1361
|
function TextNative(props) {
|
|
1361
1362
|
const lines = () => num(props.props.lines, 0);
|
|
1362
1363
|
const align = () => props.props.align === `end` ? `end` : props.props.align === `center` ? `center` : props.props.align === `start` ? `start` : void 0;
|
|
1363
1364
|
const live = () => props.props.live === `polite` || props.props.live === `assertive` ? props.props.live : void 0;
|
|
1364
1365
|
return (() => {
|
|
1365
|
-
var _el$ = _tmpl$$
|
|
1366
|
+
var _el$ = _tmpl$$l();
|
|
1366
1367
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
1367
1368
|
get ["aria-live"]() {
|
|
1368
1369
|
return live();
|
|
@@ -1397,7 +1398,7 @@ function MarkdownNative(props) {
|
|
|
1397
1398
|
const text = () => displayString(props.props.text);
|
|
1398
1399
|
const lines = () => num(props.props.lines, 0);
|
|
1399
1400
|
return (() => {
|
|
1400
|
-
var _el$2 = _tmpl$2$
|
|
1401
|
+
var _el$2 = _tmpl$2$j();
|
|
1401
1402
|
spread(_el$2, mergeProps(() => props.rootProps, {
|
|
1402
1403
|
get ["data-lines"]() {
|
|
1403
1404
|
return memo(() => lines() > 0)() ? lines() : void 0;
|
|
@@ -1435,7 +1436,7 @@ function IconNative(props) {
|
|
|
1435
1436
|
const name = () => str(props.props.name, `ui-icon-placeholder`);
|
|
1436
1437
|
const label = () => str(props.props.label);
|
|
1437
1438
|
return (() => {
|
|
1438
|
-
var _el$3 = _tmpl$$
|
|
1439
|
+
var _el$3 = _tmpl$$l();
|
|
1439
1440
|
spread(_el$3, mergeProps(() => props.rootProps, {
|
|
1440
1441
|
get role() {
|
|
1441
1442
|
return label() ? `img` : void 0;
|
|
@@ -1483,7 +1484,7 @@ function createBoundState(node, scope, prop, external, key = (v) => JSON.stringi
|
|
|
1483
1484
|
};
|
|
1484
1485
|
return [value, set, path];
|
|
1485
1486
|
}
|
|
1486
|
-
var _tmpl$$
|
|
1487
|
+
var _tmpl$$k = /* @__PURE__ */ template(`<button>`), _tmpl$2$i = /* @__PURE__ */ template(`<span>`), _tmpl$3$h = /* @__PURE__ */ template(`<a>`), _tmpl$4$e = /* @__PURE__ */ template(`<button type=button>`);
|
|
1487
1488
|
function createPending() {
|
|
1488
1489
|
const [pending, setPending] = createSignal(false);
|
|
1489
1490
|
let mounted = true;
|
|
@@ -1523,7 +1524,8 @@ function ButtonNative(props) {
|
|
|
1523
1524
|
const label = () => str(props.props.label);
|
|
1524
1525
|
const icon = () => str(props.props.icon);
|
|
1525
1526
|
const loading = () => bool(props.props.loading) || pending() || submit() && form.busy;
|
|
1526
|
-
const disabled = () => bool(props.props.disabled)
|
|
1527
|
+
const disabled = () => bool(props.props.disabled);
|
|
1528
|
+
const inert = () => disabled() || loading();
|
|
1527
1529
|
const iconOnly = () => props.props.size === `icon`;
|
|
1528
1530
|
const hasChild = () => props.node.children.length > 0;
|
|
1529
1531
|
const shown = createPendingShown(loading);
|
|
@@ -1548,12 +1550,12 @@ function ButtonNative(props) {
|
|
|
1548
1550
|
const {
|
|
1549
1551
|
held,
|
|
1550
1552
|
handlers
|
|
1551
|
-
} = createHold(hold,
|
|
1553
|
+
} = createHold(hold, inert, (event) => props.emit(event));
|
|
1552
1554
|
const holdingLabel = () => str(props.props.holdingLabel);
|
|
1553
1555
|
const paintedLabel = () => held() && holdingLabel() ? holdingLabel() : shownLabel();
|
|
1554
1556
|
const xs = () => [...ctx.states ?? [], disabled() ? `disabled` : ``, pending() ? `pending` : ``, held() ? `pressed` : ``].filter(Boolean).join(` `) || void 0;
|
|
1555
1557
|
return (() => {
|
|
1556
|
-
var _el$ = _tmpl$$
|
|
1558
|
+
var _el$ = _tmpl$$k();
|
|
1557
1559
|
var _ref$ = ref;
|
|
1558
1560
|
typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
|
|
1559
1561
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
@@ -1608,7 +1610,7 @@ function ButtonNative(props) {
|
|
|
1608
1610
|
},
|
|
1609
1611
|
"onClick": (e) => {
|
|
1610
1612
|
e.stopPropagation();
|
|
1611
|
-
if (hold()) return;
|
|
1613
|
+
if (hold() || inert()) return;
|
|
1612
1614
|
track(props.emit(`press`));
|
|
1613
1615
|
if (submit()) form.submit();
|
|
1614
1616
|
}
|
|
@@ -1616,7 +1618,7 @@ function ButtonNative(props) {
|
|
|
1616
1618
|
insert(_el$, (() => {
|
|
1617
1619
|
var _c$ = memo(() => !!shown());
|
|
1618
1620
|
return () => _c$() ? (() => {
|
|
1619
|
-
var _el$2 = _tmpl$2$
|
|
1621
|
+
var _el$2 = _tmpl$2$i();
|
|
1620
1622
|
spread(_el$2, mergeProps(() => part(`spinner`)), false, true);
|
|
1621
1623
|
insert(_el$2, createComponent(PaintIcon, {
|
|
1622
1624
|
get icon() {
|
|
@@ -1626,7 +1628,7 @@ function ButtonNative(props) {
|
|
|
1626
1628
|
}));
|
|
1627
1629
|
return _el$2;
|
|
1628
1630
|
})() : memo(() => !!icon())() ? (() => {
|
|
1629
|
-
var _el$3 = _tmpl$2$
|
|
1631
|
+
var _el$3 = _tmpl$2$i();
|
|
1630
1632
|
spread(_el$3, mergeProps(() => part(`icon`)), false, true);
|
|
1631
1633
|
insert(_el$3, createComponent(IconGlyph, {
|
|
1632
1634
|
get icons() {
|
|
@@ -1645,7 +1647,7 @@ function ButtonNative(props) {
|
|
|
1645
1647
|
},
|
|
1646
1648
|
get fallback() {
|
|
1647
1649
|
return memo(() => !!(!iconOnly() && paintedLabel()))() ? (() => {
|
|
1648
|
-
var _el$4 = _tmpl$2$
|
|
1650
|
+
var _el$4 = _tmpl$2$i();
|
|
1649
1651
|
spread(_el$4, mergeProps(() => part(`label`)), false, true);
|
|
1650
1652
|
insert(_el$4, paintedLabel);
|
|
1651
1653
|
return _el$4;
|
|
@@ -1701,7 +1703,7 @@ function LinkNative(props) {
|
|
|
1701
1703
|
const external = () => bool(props.props.external);
|
|
1702
1704
|
const label = () => str(props.props.label) || raw();
|
|
1703
1705
|
return (() => {
|
|
1704
|
-
var _el$5 = _tmpl$3$
|
|
1706
|
+
var _el$5 = _tmpl$3$h();
|
|
1705
1707
|
spread(_el$5, mergeProps(() => props.rootProps, {
|
|
1706
1708
|
get href() {
|
|
1707
1709
|
return href();
|
|
@@ -1762,7 +1764,7 @@ function ToggleNative(props) {
|
|
|
1762
1764
|
insert(_el$6, (() => {
|
|
1763
1765
|
var _c$2 = memo(() => !!icon());
|
|
1764
1766
|
return () => _c$2() ? (() => {
|
|
1765
|
-
var _el$7 = _tmpl$2$
|
|
1767
|
+
var _el$7 = _tmpl$2$i();
|
|
1766
1768
|
spread(_el$7, mergeProps(() => part(`icon`)), false, true);
|
|
1767
1769
|
insert(_el$7, createComponent(IconGlyph, {
|
|
1768
1770
|
get icons() {
|
|
@@ -1778,7 +1780,7 @@ function ToggleNative(props) {
|
|
|
1778
1780
|
insert(_el$6, (() => {
|
|
1779
1781
|
var _c$3 = memo(() => !!label());
|
|
1780
1782
|
return () => _c$3() ? (() => {
|
|
1781
|
-
var _el$8 = _tmpl$2$
|
|
1783
|
+
var _el$8 = _tmpl$2$i();
|
|
1782
1784
|
spread(_el$8, mergeProps(() => part(`label`)), false, true);
|
|
1783
1785
|
insert(_el$8, label);
|
|
1784
1786
|
return _el$8;
|
|
@@ -1792,7 +1794,7 @@ const NATIVES_ACTIONS = {
|
|
|
1792
1794
|
Link: LinkNative,
|
|
1793
1795
|
Toggle: ToggleNative
|
|
1794
1796
|
};
|
|
1795
|
-
var _tmpl$$
|
|
1797
|
+
var _tmpl$$j = /* @__PURE__ */ template(`<svg><path fill-rule=evenodd stroke=var(--xui-color-background) stroke-width=1></svg>`, false, true, false), _tmpl$2$h = /* @__PURE__ */ template(`<svg><text></svg>`, false, true, false), _tmpl$3$g = /* @__PURE__ */ template(`<svg><g><path fill=none stroke-linejoin=round stroke-linecap=round></svg>`, false, true, false), _tmpl$4$d = /* @__PURE__ */ template(`<svg><path opacity=0.18></svg>`, false, true, false), _tmpl$5$d = /* @__PURE__ */ template(`<svg><circle r=4></svg>`, false, true, false), _tmpl$6$b = /* @__PURE__ */ template(`<svg><rect></svg>`, false, true, false), _tmpl$7$a = /* @__PURE__ */ template(`<div>`), _tmpl$8$9 = /* @__PURE__ */ template(`<strong>`), _tmpl$9$9 = /* @__PURE__ */ template(`<span class=xui-chart-tip-row><i>`), _tmpl$0$6 = /* @__PURE__ */ template(`<span>`), _tmpl$1$5 = /* @__PURE__ */ template(`<svg><g></svg>`, false, true, false), _tmpl$10$5 = /* @__PURE__ */ template(`<svg><rect class=xui-chart-band fill=currentColor opacity=0.06></svg>`, false, true, false), _tmpl$11$5 = /* @__PURE__ */ template(`<svg><text text-anchor=middle></svg>`, false, true, false), _tmpl$12$3 = /* @__PURE__ */ template(`<svg><text x=0 y=0 text-anchor=middle></svg>`, false, true, false), _tmpl$13$3 = /* @__PURE__ */ template(`<svg><g><g><line stroke=currentColor stroke-width=1 shape-rendering=crispEdges></svg>`, false, true, false), _tmpl$14$3 = /* @__PURE__ */ template(`<caption>`), _tmpl$15$1 = /* @__PURE__ */ template(`<table class=xui-sr-only><thead><tr><th scope=col></th></tr></thead><tbody>`), _tmpl$16$1 = /* @__PURE__ */ template(`<div><div class=xui-chart-plot><svg role=img class=xui-chart-svg>`), _tmpl$17$1 = /* @__PURE__ */ template(`<svg><line></svg>`, false, true, false), _tmpl$18 = /* @__PURE__ */ template(`<svg><text dominant-baseline=middle></svg>`, false, true, false), _tmpl$19 = /* @__PURE__ */ template(`<span><i>`), _tmpl$20 = /* @__PURE__ */ template(`<th scope=col>`), _tmpl$21 = /* @__PURE__ */ template(`<tr><th scope=row>`), _tmpl$22 = /* @__PURE__ */ template(`<td>`);
|
|
1796
1798
|
const colorVar = (i, tone) => tokenVar(seriesColor(i, tone)) ?? `currentColor`;
|
|
1797
1799
|
const AXIS_FONT = 11;
|
|
1798
1800
|
function ChartNative(props) {
|
|
@@ -2020,7 +2022,7 @@ function ChartNative(props) {
|
|
|
2020
2022
|
const body = () => {
|
|
2021
2023
|
const g = geo();
|
|
2022
2024
|
if (round()) return [memo(() => g.arcs.map((a) => (() => {
|
|
2023
|
-
var _el$ = _tmpl$$
|
|
2025
|
+
var _el$ = _tmpl$$j();
|
|
2024
2026
|
_el$.addEventListener("pointerenter", () => setActive(a.i));
|
|
2025
2027
|
effect((_p$) => {
|
|
2026
2028
|
var _v$ = a.d, _v$2 = colorVar(a.i), _v$3 = a.i, _v$4 = active() === a.i ? `` : void 0, _v$5 = dim(a.i, 0.55);
|
|
@@ -2039,7 +2041,7 @@ function ChartNative(props) {
|
|
|
2039
2041
|
});
|
|
2040
2042
|
return _el$;
|
|
2041
2043
|
})())), memo(() => g.arcs.map((a) => a.label ? (() => {
|
|
2042
|
-
var _el$2 = _tmpl$2$
|
|
2044
|
+
var _el$2 = _tmpl$2$h();
|
|
2043
2045
|
spread(_el$2, mergeProps(valueLabel, {
|
|
2044
2046
|
get x() {
|
|
2045
2047
|
return a.label.x;
|
|
@@ -2054,7 +2056,7 @@ function ChartNative(props) {
|
|
|
2054
2056
|
return _el$2;
|
|
2055
2057
|
})() : null))];
|
|
2056
2058
|
if (kind() === `line` || kind() === `area` || sparkline()) return [memo(() => g.lines.map((l) => l ? (() => {
|
|
2057
|
-
var _el$3 = _tmpl$3$
|
|
2059
|
+
var _el$3 = _tmpl$3$g(), _el$4 = _el$3.firstChild;
|
|
2058
2060
|
insert(_el$3, (() => {
|
|
2059
2061
|
var _c$ = memo(() => l.area !== null);
|
|
2060
2062
|
return () => _c$() ? (() => {
|
|
@@ -2071,20 +2073,18 @@ function ChartNative(props) {
|
|
|
2071
2073
|
return _el$5;
|
|
2072
2074
|
})() : null;
|
|
2073
2075
|
})(), _el$4);
|
|
2074
|
-
insert(_el$3, () => l.dots.map((p) => (() => {
|
|
2076
|
+
insert(_el$3, () => l.dots.filter((p) => active() === p.i).map((p) => (() => {
|
|
2075
2077
|
var _el$6 = _tmpl$5$d();
|
|
2076
2078
|
effect((_p$) => {
|
|
2077
|
-
var _v$10 = p.cx, _v$11 = p.cy, _v$12 =
|
|
2079
|
+
var _v$10 = p.cx, _v$11 = p.cy, _v$12 = l.color;
|
|
2078
2080
|
_v$10 !== _p$.e && setAttribute(_el$6, "cx", _p$.e = _v$10);
|
|
2079
2081
|
_v$11 !== _p$.t && setAttribute(_el$6, "cy", _p$.t = _v$11);
|
|
2080
|
-
_v$12 !== _p$.a && setAttribute(_el$6, "
|
|
2081
|
-
_v$13 !== _p$.o && setAttribute(_el$6, "fill", _p$.o = _v$13);
|
|
2082
|
+
_v$12 !== _p$.a && setAttribute(_el$6, "fill", _p$.a = _v$12);
|
|
2082
2083
|
return _p$;
|
|
2083
2084
|
}, {
|
|
2084
2085
|
e: void 0,
|
|
2085
2086
|
t: void 0,
|
|
2086
|
-
a: void 0
|
|
2087
|
-
o: void 0
|
|
2087
|
+
a: void 0
|
|
2088
2088
|
});
|
|
2089
2089
|
return _el$6;
|
|
2090
2090
|
})()), null);
|
|
@@ -2103,7 +2103,7 @@ function ChartNative(props) {
|
|
|
2103
2103
|
});
|
|
2104
2104
|
return _el$3;
|
|
2105
2105
|
})() : null)), memo(() => g.lineValues.map((v) => (() => {
|
|
2106
|
-
var _el$7 = _tmpl$2$
|
|
2106
|
+
var _el$7 = _tmpl$2$h();
|
|
2107
2107
|
spread(_el$7, mergeProps(valueLabel, {
|
|
2108
2108
|
get x() {
|
|
2109
2109
|
return v.x;
|
|
@@ -2119,14 +2119,14 @@ function ChartNative(props) {
|
|
|
2119
2119
|
return [memo(() => g.bars.map((b) => (() => {
|
|
2120
2120
|
var _el$8 = _tmpl$6$b();
|
|
2121
2121
|
effect((_p$) => {
|
|
2122
|
-
var _v$
|
|
2123
|
-
_v$
|
|
2124
|
-
_v$
|
|
2125
|
-
_v$
|
|
2126
|
-
_v$
|
|
2127
|
-
_v$
|
|
2128
|
-
_v$
|
|
2129
|
-
_v$
|
|
2122
|
+
var _v$13 = b.x, _v$14 = b.y, _v$15 = b.w, _v$16 = b.h, _v$17 = b.rx, _v$18 = b.fill, _v$19 = dim(b.i, 0.6);
|
|
2123
|
+
_v$13 !== _p$.e && setAttribute(_el$8, "x", _p$.e = _v$13);
|
|
2124
|
+
_v$14 !== _p$.t && setAttribute(_el$8, "y", _p$.t = _v$14);
|
|
2125
|
+
_v$15 !== _p$.a && setAttribute(_el$8, "width", _p$.a = _v$15);
|
|
2126
|
+
_v$16 !== _p$.o && setAttribute(_el$8, "height", _p$.o = _v$16);
|
|
2127
|
+
_v$17 !== _p$.i && setAttribute(_el$8, "rx", _p$.i = _v$17);
|
|
2128
|
+
_v$18 !== _p$.n && setAttribute(_el$8, "fill", _p$.n = _v$18);
|
|
2129
|
+
_v$19 !== _p$.s && setAttribute(_el$8, "opacity", _p$.s = _v$19);
|
|
2130
2130
|
return _p$;
|
|
2131
2131
|
}, {
|
|
2132
2132
|
e: void 0,
|
|
@@ -2139,7 +2139,7 @@ function ChartNative(props) {
|
|
|
2139
2139
|
});
|
|
2140
2140
|
return _el$8;
|
|
2141
2141
|
})())), memo(() => g.bars.map((b) => b.label ? (() => {
|
|
2142
|
-
var _el$9 = _tmpl$2$
|
|
2142
|
+
var _el$9 = _tmpl$2$h();
|
|
2143
2143
|
spread(_el$9, mergeProps(valueLabel, {
|
|
2144
2144
|
get x() {
|
|
2145
2145
|
return b.label.x;
|
|
@@ -2250,13 +2250,13 @@ function ChartNative(props) {
|
|
|
2250
2250
|
return geo().ticks.ticks;
|
|
2251
2251
|
},
|
|
2252
2252
|
children: (t) => (() => {
|
|
2253
|
-
var _el$
|
|
2253
|
+
var _el$30 = _tmpl$17$1();
|
|
2254
2254
|
effect((_p$) => {
|
|
2255
|
-
var _v$
|
|
2256
|
-
_v$
|
|
2257
|
-
_v$
|
|
2258
|
-
_v$
|
|
2259
|
-
_v$
|
|
2255
|
+
var _v$35 = geo().mx(geo().pad.l), _v$36 = geo().mx(geo().width - geo().pad.r), _v$37 = Math.round(geo().y(t)) + 0.5, _v$38 = Math.round(geo().y(t)) + 0.5;
|
|
2256
|
+
_v$35 !== _p$.e && setAttribute(_el$30, "x1", _p$.e = _v$35);
|
|
2257
|
+
_v$36 !== _p$.t && setAttribute(_el$30, "x2", _p$.t = _v$36);
|
|
2258
|
+
_v$37 !== _p$.a && setAttribute(_el$30, "y1", _p$.a = _v$37);
|
|
2259
|
+
_v$38 !== _p$.o && setAttribute(_el$30, "y2", _p$.o = _v$38);
|
|
2260
2260
|
return _p$;
|
|
2261
2261
|
}, {
|
|
2262
2262
|
e: void 0,
|
|
@@ -2264,7 +2264,7 @@ function ChartNative(props) {
|
|
|
2264
2264
|
a: void 0,
|
|
2265
2265
|
o: void 0
|
|
2266
2266
|
});
|
|
2267
|
-
return _el$
|
|
2267
|
+
return _el$30;
|
|
2268
2268
|
})()
|
|
2269
2269
|
}));
|
|
2270
2270
|
return _el$16;
|
|
@@ -2277,11 +2277,11 @@ function ChartNative(props) {
|
|
|
2277
2277
|
get children() {
|
|
2278
2278
|
var _el$17 = _tmpl$10$5();
|
|
2279
2279
|
effect((_p$) => {
|
|
2280
|
-
var _v$
|
|
2281
|
-
_v$
|
|
2282
|
-
_v$
|
|
2283
|
-
_v$
|
|
2284
|
-
_v$
|
|
2280
|
+
var _v$20 = geo().rtl ? geo().width - geo().pad.l - geo().slot * (active() + 1) : geo().pad.l + geo().slot * active(), _v$21 = geo().pad.t, _v$22 = geo().slot, _v$23 = geo().innerH;
|
|
2281
|
+
_v$20 !== _p$.e && setAttribute(_el$17, "x", _p$.e = _v$20);
|
|
2282
|
+
_v$21 !== _p$.t && setAttribute(_el$17, "y", _p$.t = _v$21);
|
|
2283
|
+
_v$22 !== _p$.a && setAttribute(_el$17, "width", _p$.a = _v$22);
|
|
2284
|
+
_v$23 !== _p$.o && setAttribute(_el$17, "height", _p$.o = _v$23);
|
|
2285
2285
|
return _p$;
|
|
2286
2286
|
}, {
|
|
2287
2287
|
e: void 0,
|
|
@@ -2298,30 +2298,31 @@ function ChartNative(props) {
|
|
|
2298
2298
|
return showAxes();
|
|
2299
2299
|
},
|
|
2300
2300
|
get children() {
|
|
2301
|
-
var _el$18 = _tmpl$13$
|
|
2301
|
+
var _el$18 = _tmpl$13$3(), _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild;
|
|
2302
2302
|
spread(_el$18, mergeProps(() => part(`axis`), {
|
|
2303
2303
|
"fill": "currentColor",
|
|
2304
2304
|
"font-size": 11
|
|
2305
2305
|
}), true, true);
|
|
2306
|
+
spread(_el$19, mergeProps(() => part(`grid`)), true, true);
|
|
2306
2307
|
insert(_el$18, createComponent(Index, {
|
|
2307
2308
|
get each() {
|
|
2308
2309
|
return geo().ticks.ticks;
|
|
2309
2310
|
},
|
|
2310
2311
|
children: (t, i) => (() => {
|
|
2311
|
-
var _el$
|
|
2312
|
-
insert(_el$
|
|
2312
|
+
var _el$31 = _tmpl$18();
|
|
2313
|
+
insert(_el$31, () => geo().tickText[i]);
|
|
2313
2314
|
effect((_p$) => {
|
|
2314
|
-
var _v$
|
|
2315
|
-
_v$
|
|
2316
|
-
_v$
|
|
2317
|
-
_v$
|
|
2315
|
+
var _v$39 = geo().mx(geo().pad.l - 6), _v$40 = geo().y(t()), _v$41 = geo().rtl ? `start` : `end`;
|
|
2316
|
+
_v$39 !== _p$.e && setAttribute(_el$31, "x", _p$.e = _v$39);
|
|
2317
|
+
_v$40 !== _p$.t && setAttribute(_el$31, "y", _p$.t = _v$40);
|
|
2318
|
+
_v$41 !== _p$.a && setAttribute(_el$31, "text-anchor", _p$.a = _v$41);
|
|
2318
2319
|
return _p$;
|
|
2319
2320
|
}, {
|
|
2320
2321
|
e: void 0,
|
|
2321
2322
|
t: void 0,
|
|
2322
2323
|
a: void 0
|
|
2323
2324
|
});
|
|
2324
|
-
return _el$
|
|
2325
|
+
return _el$31;
|
|
2325
2326
|
})()
|
|
2326
2327
|
}), null);
|
|
2327
2328
|
insert(_el$18, createComponent(Index, {
|
|
@@ -2329,18 +2330,18 @@ function ChartNative(props) {
|
|
|
2329
2330
|
return categories();
|
|
2330
2331
|
},
|
|
2331
2332
|
children: (c, i) => (() => {
|
|
2332
|
-
var _el$
|
|
2333
|
-
insert(_el$
|
|
2333
|
+
var _el$32 = _tmpl$11$5();
|
|
2334
|
+
insert(_el$32, c);
|
|
2334
2335
|
effect((_p$) => {
|
|
2335
|
-
var _v$
|
|
2336
|
-
_v$
|
|
2337
|
-
_v$
|
|
2336
|
+
var _v$42 = geo().px(i), _v$43 = geo().pad.t + geo().innerH + AXIS_FONT + 4;
|
|
2337
|
+
_v$42 !== _p$.e && setAttribute(_el$32, "x", _p$.e = _v$42);
|
|
2338
|
+
_v$43 !== _p$.t && setAttribute(_el$32, "y", _p$.t = _v$43);
|
|
2338
2339
|
return _p$;
|
|
2339
2340
|
}, {
|
|
2340
2341
|
e: void 0,
|
|
2341
2342
|
t: void 0
|
|
2342
2343
|
});
|
|
2343
|
-
return _el$
|
|
2344
|
+
return _el$32;
|
|
2344
2345
|
})()
|
|
2345
2346
|
}), null);
|
|
2346
2347
|
insert(_el$18, createComponent(Show, {
|
|
@@ -2348,18 +2349,18 @@ function ChartNative(props) {
|
|
|
2348
2349
|
return geo().xLabel;
|
|
2349
2350
|
},
|
|
2350
2351
|
get children() {
|
|
2351
|
-
var _el$
|
|
2352
|
-
insert(_el$
|
|
2352
|
+
var _el$21 = _tmpl$11$5();
|
|
2353
|
+
insert(_el$21, () => geo().xLabel);
|
|
2353
2354
|
effect((_p$) => {
|
|
2354
|
-
var _v$
|
|
2355
|
-
_v$
|
|
2356
|
-
_v$
|
|
2355
|
+
var _v$24 = geo().mx(geo().pad.l + geo().innerW / 2), _v$25 = geo().height - 3;
|
|
2356
|
+
_v$24 !== _p$.e && setAttribute(_el$21, "x", _p$.e = _v$24);
|
|
2357
|
+
_v$25 !== _p$.t && setAttribute(_el$21, "y", _p$.t = _v$25);
|
|
2357
2358
|
return _p$;
|
|
2358
2359
|
}, {
|
|
2359
2360
|
e: void 0,
|
|
2360
2361
|
t: void 0
|
|
2361
2362
|
});
|
|
2362
|
-
return _el$
|
|
2363
|
+
return _el$21;
|
|
2363
2364
|
}
|
|
2364
2365
|
}), null);
|
|
2365
2366
|
insert(_el$18, createComponent(Show, {
|
|
@@ -2367,18 +2368,18 @@ function ChartNative(props) {
|
|
|
2367
2368
|
return geo().yLabel;
|
|
2368
2369
|
},
|
|
2369
2370
|
get children() {
|
|
2370
|
-
var _el$
|
|
2371
|
-
insert(_el$
|
|
2372
|
-
effect(() => setAttribute(_el$
|
|
2373
|
-
return _el$
|
|
2371
|
+
var _el$22 = _tmpl$12$3();
|
|
2372
|
+
insert(_el$22, () => geo().yLabel);
|
|
2373
|
+
effect(() => setAttribute(_el$22, "transform", `translate(${geo().rtl ? geo().width - AXIS_FONT : AXIS_FONT}, ${geo().pad.t + geo().innerH / 2}) rotate(${geo().rtl ? 90 : -90})`));
|
|
2374
|
+
return _el$22;
|
|
2374
2375
|
}
|
|
2375
2376
|
}), null);
|
|
2376
2377
|
effect((_p$) => {
|
|
2377
|
-
var _v$
|
|
2378
|
-
_v$
|
|
2379
|
-
_v$
|
|
2380
|
-
_v$
|
|
2381
|
-
_v$
|
|
2378
|
+
var _v$26 = geo().mx(geo().pad.l), _v$27 = geo().mx(geo().width - geo().pad.r), _v$28 = geo().zero, _v$29 = geo().zero;
|
|
2379
|
+
_v$26 !== _p$.e && setAttribute(_el$20, "x1", _p$.e = _v$26);
|
|
2380
|
+
_v$27 !== _p$.t && setAttribute(_el$20, "x2", _p$.t = _v$27);
|
|
2381
|
+
_v$28 !== _p$.a && setAttribute(_el$20, "y1", _p$.a = _v$28);
|
|
2382
|
+
_v$29 !== _p$.o && setAttribute(_el$20, "y2", _p$.o = _v$29);
|
|
2382
2383
|
return _p$;
|
|
2383
2384
|
}, {
|
|
2384
2385
|
e: void 0,
|
|
@@ -2395,22 +2396,22 @@ function ChartNative(props) {
|
|
|
2395
2396
|
return legend();
|
|
2396
2397
|
},
|
|
2397
2398
|
get children() {
|
|
2398
|
-
var _el$
|
|
2399
|
-
spread(_el$
|
|
2400
|
-
insert(_el$
|
|
2399
|
+
var _el$23 = _tmpl$7$a();
|
|
2400
|
+
spread(_el$23, mergeProps(() => part(`legend`)), false, true);
|
|
2401
|
+
insert(_el$23, createComponent(For, {
|
|
2401
2402
|
get each() {
|
|
2402
2403
|
return legendEntries();
|
|
2403
2404
|
},
|
|
2404
2405
|
children: (e) => (() => {
|
|
2405
|
-
var _el$
|
|
2406
|
-
insert(_el$
|
|
2407
|
-
effect((_$p) => style(_el$
|
|
2406
|
+
var _el$33 = _tmpl$19(), _el$34 = _el$33.firstChild;
|
|
2407
|
+
insert(_el$33, () => e.name, null);
|
|
2408
|
+
effect((_$p) => style(_el$34, css({
|
|
2408
2409
|
background: e.color
|
|
2409
2410
|
}), _$p));
|
|
2410
|
-
return _el$
|
|
2411
|
+
return _el$33;
|
|
2411
2412
|
})()
|
|
2412
2413
|
}));
|
|
2413
|
-
return _el$
|
|
2414
|
+
return _el$23;
|
|
2414
2415
|
}
|
|
2415
2416
|
}), null);
|
|
2416
2417
|
insert(_el$12, createComponent(Show, {
|
|
@@ -2418,64 +2419,64 @@ function ChartNative(props) {
|
|
|
2418
2419
|
return !sparkline();
|
|
2419
2420
|
},
|
|
2420
2421
|
get children() {
|
|
2421
|
-
var _el$
|
|
2422
|
-
_el$
|
|
2423
|
-
var _el$
|
|
2424
|
-
insert(_el$
|
|
2422
|
+
var _el$24 = _tmpl$15$1(), _el$26 = _el$24.firstChild, _el$27 = _el$26.firstChild;
|
|
2423
|
+
_el$27.firstChild;
|
|
2424
|
+
var _el$29 = _el$26.nextSibling;
|
|
2425
|
+
insert(_el$24, createComponent(Show, {
|
|
2425
2426
|
get when() {
|
|
2426
2427
|
return title();
|
|
2427
2428
|
},
|
|
2428
2429
|
get children() {
|
|
2429
|
-
var _el$
|
|
2430
|
-
insert(_el$
|
|
2431
|
-
return _el$
|
|
2430
|
+
var _el$25 = _tmpl$14$3();
|
|
2431
|
+
insert(_el$25, title);
|
|
2432
|
+
return _el$25;
|
|
2432
2433
|
}
|
|
2433
|
-
}), _el$
|
|
2434
|
-
insert(_el$
|
|
2434
|
+
}), _el$26);
|
|
2435
|
+
insert(_el$27, createComponent(For, {
|
|
2435
2436
|
get each() {
|
|
2436
2437
|
return series();
|
|
2437
2438
|
},
|
|
2438
2439
|
children: (s) => (() => {
|
|
2439
|
-
var _el$
|
|
2440
|
-
insert(_el$
|
|
2441
|
-
return _el$
|
|
2440
|
+
var _el$35 = _tmpl$20();
|
|
2441
|
+
insert(_el$35, () => s.name);
|
|
2442
|
+
return _el$35;
|
|
2442
2443
|
})()
|
|
2443
2444
|
}), null);
|
|
2444
|
-
insert(_el$
|
|
2445
|
+
insert(_el$29, createComponent(For, {
|
|
2445
2446
|
get each() {
|
|
2446
2447
|
return Array.from({
|
|
2447
2448
|
length: n()
|
|
2448
2449
|
}, (_, i) => i);
|
|
2449
2450
|
},
|
|
2450
2451
|
children: (i) => (() => {
|
|
2451
|
-
var _el$
|
|
2452
|
-
insert(_el$
|
|
2453
|
-
insert(_el$
|
|
2452
|
+
var _el$36 = _tmpl$21(), _el$37 = _el$36.firstChild;
|
|
2453
|
+
insert(_el$37, () => categories()[i] ?? String(i + 1));
|
|
2454
|
+
insert(_el$36, createComponent(For, {
|
|
2454
2455
|
get each() {
|
|
2455
2456
|
return series();
|
|
2456
2457
|
},
|
|
2457
2458
|
children: (s) => (() => {
|
|
2458
|
-
var _el$
|
|
2459
|
-
insert(_el$
|
|
2459
|
+
var _el$38 = _tmpl$22();
|
|
2460
|
+
insert(_el$38, (() => {
|
|
2460
2461
|
var _c$4 = memo(() => !!Number.isFinite(s.values[i]));
|
|
2461
2462
|
return () => _c$4() ? fmt(s.values[i]) : ``;
|
|
2462
2463
|
})());
|
|
2463
|
-
return _el$
|
|
2464
|
+
return _el$38;
|
|
2464
2465
|
})()
|
|
2465
2466
|
}), null);
|
|
2466
|
-
return _el$
|
|
2467
|
+
return _el$36;
|
|
2467
2468
|
})()
|
|
2468
2469
|
}));
|
|
2469
|
-
return _el$
|
|
2470
|
+
return _el$24;
|
|
2470
2471
|
}
|
|
2471
2472
|
}), null);
|
|
2472
2473
|
effect((_p$) => {
|
|
2473
|
-
var _v$
|
|
2474
|
-
_v$
|
|
2475
|
-
_v$
|
|
2476
|
-
_v$
|
|
2477
|
-
_v$
|
|
2478
|
-
_v$
|
|
2474
|
+
var _v$30 = geo().width, _v$31 = geo().height, _v$32 = `0 0 ${geo().width} ${geo().height}`, _v$33 = summary(), _v$34 = sparkline() ? void 0 : 0;
|
|
2475
|
+
_v$30 !== _p$.e && setAttribute(_el$15, "width", _p$.e = _v$30);
|
|
2476
|
+
_v$31 !== _p$.t && setAttribute(_el$15, "height", _p$.t = _v$31);
|
|
2477
|
+
_v$32 !== _p$.a && setAttribute(_el$15, "viewBox", _p$.a = _v$32);
|
|
2478
|
+
_v$33 !== _p$.o && setAttribute(_el$15, "aria-label", _p$.o = _v$33);
|
|
2479
|
+
_v$34 !== _p$.i && setAttribute(_el$15, "tabindex", _p$.i = _v$34);
|
|
2479
2480
|
return _p$;
|
|
2480
2481
|
}, {
|
|
2481
2482
|
e: void 0,
|
|
@@ -2491,7 +2492,7 @@ const NATIVES_CHART = {
|
|
|
2491
2492
|
Chart: ChartNative
|
|
2492
2493
|
};
|
|
2493
2494
|
delegateEvents(["keydown", "pointermove"]);
|
|
2494
|
-
var _tmpl$$
|
|
2495
|
+
var _tmpl$$i = /* @__PURE__ */ template(`<div role=dialog>`);
|
|
2495
2496
|
const TABBABLE = `button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),a[href],[tabindex]`;
|
|
2496
2497
|
function tabbables(container) {
|
|
2497
2498
|
return Array.from(container.querySelectorAll(TABBABLE)).filter((el) => el.tabIndex >= 0 && !el.closest(`[hidden],[inert]`));
|
|
@@ -2706,7 +2707,7 @@ function PopoverContent(props) {
|
|
|
2706
2707
|
},
|
|
2707
2708
|
ref: mountWrapper,
|
|
2708
2709
|
get children() {
|
|
2709
|
-
var _el$ = _tmpl$$
|
|
2710
|
+
var _el$ = _tmpl$$i();
|
|
2710
2711
|
var _ref$ = content;
|
|
2711
2712
|
typeof _ref$ === "function" ? use(_ref$, _el$) : content = _el$;
|
|
2712
2713
|
spread(_el$, mergeProps({
|
|
@@ -2893,7 +2894,7 @@ function searchMatches(item, query) {
|
|
|
2893
2894
|
const needle = query.trim().toLowerCase();
|
|
2894
2895
|
return needle === `` || str(item.label).toLowerCase().includes(needle) || str(item.identifier).toLowerCase().includes(needle);
|
|
2895
2896
|
}
|
|
2896
|
-
var _tmpl$$
|
|
2897
|
+
var _tmpl$$h = /* @__PURE__ */ template(`<div role=listbox class=xui-ChipInput-suggestions>`), _tmpl$2$g = /* @__PURE__ */ template(`<div><div><ul class=xui-chip-list></ul><input>`), _tmpl$3$f = /* @__PURE__ */ template(`<button type=button tabindex=-1>`), _tmpl$4$c = /* @__PURE__ */ template(`<li><span>`), _tmpl$5$c = /* @__PURE__ */ template(`<div role=option class=xui-ChipInput-suggestion>`), _tmpl$6$a = /* @__PURE__ */ template(`<span>`), _tmpl$7$9 = /* @__PURE__ */ template(`<ul class=xui-file-list>`), _tmpl$8$8 = /* @__PURE__ */ template(`<div>`), _tmpl$9$8 = /* @__PURE__ */ template(`<div><div><span></span><span></span><span></span><input type=file class=xui-sr-only tabindex=-1>`), _tmpl$0$5 = /* @__PURE__ */ template(`<button type=button>`), _tmpl$1$4 = /* @__PURE__ */ template(`<li><span></span><span>`), _tmpl$10$4 = /* @__PURE__ */ template(`<a target=_blank rel=noreferrer>`), _tmpl$11$4 = /* @__PURE__ */ template(`<span class=xui-field-error>`);
|
|
2897
2898
|
function ChipInputNative(props) {
|
|
2898
2899
|
const part = parts(props);
|
|
2899
2900
|
const ctx = useSurfaceContext();
|
|
@@ -2980,7 +2981,7 @@ function ChipInputNative(props) {
|
|
|
2980
2981
|
const open = () => focused() && shown().length > 0;
|
|
2981
2982
|
const placeholder = () => str(props.props.placeholder);
|
|
2982
2983
|
return (() => {
|
|
2983
|
-
var _el$ = _tmpl$2$
|
|
2984
|
+
var _el$ = _tmpl$2$g(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
|
|
2984
2985
|
spread(_el$, mergeProps(() => props.rootProps), false, true);
|
|
2985
2986
|
insert(_el$, createComponent(TextPart, {
|
|
2986
2987
|
get part() {
|
|
@@ -3018,7 +3019,7 @@ function ChipInputNative(props) {
|
|
|
3018
3019
|
return !disabled();
|
|
3019
3020
|
},
|
|
3020
3021
|
get children() {
|
|
3021
|
-
var _el$8 = _tmpl$3$
|
|
3022
|
+
var _el$8 = _tmpl$3$f();
|
|
3022
3023
|
spread(_el$8, mergeProps(() => part.at(`remove`, i()), {
|
|
3023
3024
|
get ["aria-label"]() {
|
|
3024
3025
|
return phrase(ctx, `removeItem`, {
|
|
@@ -3109,7 +3110,7 @@ function ChipInputNative(props) {
|
|
|
3109
3110
|
return open();
|
|
3110
3111
|
},
|
|
3111
3112
|
get children() {
|
|
3112
|
-
var _el$5 = _tmpl$$
|
|
3113
|
+
var _el$5 = _tmpl$$h();
|
|
3113
3114
|
setAttribute(_el$5, "id", listId);
|
|
3114
3115
|
insert(_el$5, createComponent(For, {
|
|
3115
3116
|
get each() {
|
|
@@ -3401,7 +3402,7 @@ function FileUploadNative(props) {
|
|
|
3401
3402
|
return refused();
|
|
3402
3403
|
},
|
|
3403
3404
|
children: (m) => (() => {
|
|
3404
|
-
var _el$23 = _tmpl$11$
|
|
3405
|
+
var _el$23 = _tmpl$11$4();
|
|
3405
3406
|
insert(_el$23, m);
|
|
3406
3407
|
return _el$23;
|
|
3407
3408
|
})()
|
|
@@ -3434,7 +3435,7 @@ const NATIVES_CHIPS = {
|
|
|
3434
3435
|
FileUpload: FileUploadNative
|
|
3435
3436
|
};
|
|
3436
3437
|
delegateEvents(["mousedown", "click"]);
|
|
3437
|
-
var _tmpl$$
|
|
3438
|
+
var _tmpl$$g = /* @__PURE__ */ template(`<img alt loading=lazy decoding=async>`, true, false, false), _tmpl$2$f = /* @__PURE__ */ template(`<div>`), _tmpl$3$e = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$4$b = /* @__PURE__ */ template(`<span>`), _tmpl$5$b = /* @__PURE__ */ template(`<button type=button><span>`);
|
|
3438
3439
|
function choiceColumns(columns) {
|
|
3439
3440
|
const n = typeof columns === `number` && Number.isFinite(columns) ? Math.round(columns) : 2;
|
|
3440
3441
|
return Math.min(4, Math.max(1, n));
|
|
@@ -3467,7 +3468,7 @@ function TilePicture(props) {
|
|
|
3467
3468
|
});
|
|
3468
3469
|
},
|
|
3469
3470
|
get children() {
|
|
3470
|
-
var _el$ = _tmpl$$
|
|
3471
|
+
var _el$ = _tmpl$$g();
|
|
3471
3472
|
effect(() => setAttribute(_el$, "src", media().url));
|
|
3472
3473
|
return _el$;
|
|
3473
3474
|
}
|
|
@@ -3556,7 +3557,7 @@ function ChoiceTilesNative(props) {
|
|
|
3556
3557
|
});
|
|
3557
3558
|
const states = (selected, off) => [selected && `selected`, off && `disabled`, f.invalid && `invalid`];
|
|
3558
3559
|
return (() => {
|
|
3559
|
-
var _el$2 = _tmpl$2$
|
|
3560
|
+
var _el$2 = _tmpl$2$f();
|
|
3560
3561
|
var _ref$ = rootEl;
|
|
3561
3562
|
typeof _ref$ === "function" ? use(_ref$, _el$2) : rootEl = _el$2;
|
|
3562
3563
|
spread(_el$2, mergeProps({
|
|
@@ -3633,7 +3634,7 @@ function ChoiceTilesNative(props) {
|
|
|
3633
3634
|
return pictures();
|
|
3634
3635
|
},
|
|
3635
3636
|
get children() {
|
|
3636
|
-
var _el$4 = _tmpl$3$
|
|
3637
|
+
var _el$4 = _tmpl$3$e();
|
|
3637
3638
|
spread(_el$4, mergeProps(() => part.at(`picture`, i(), ...states(selected(), off()))), false, true);
|
|
3638
3639
|
insert(_el$4, createComponent(TilePicture, {
|
|
3639
3640
|
get src() {
|
|
@@ -3671,7 +3672,7 @@ const NATIVES_CHOICE_TILES = {
|
|
|
3671
3672
|
ChoiceTiles: ChoiceTilesNative
|
|
3672
3673
|
};
|
|
3673
3674
|
delegateEvents(["click", "keydown"]);
|
|
3674
|
-
var _tmpl$$
|
|
3675
|
+
var _tmpl$$f = /* @__PURE__ */ template(`<span>`), _tmpl$2$e = /* @__PURE__ */ template(`<button type=button>`), _tmpl$3$d = /* @__PURE__ */ template(`<div>`), _tmpl$4$a = /* @__PURE__ */ template(`<div><div><pre class=xui-codeblock-pre><code>`), _tmpl$5$a = /* @__PURE__ */ template(`<span class=xui-codeblock-spacer>`), _tmpl$6$9 = /* @__PURE__ */ template(`<span><span>`), _tmpl$7$8 = /* @__PURE__ */ template(`<span><span></span>
|
|
3675
3676
|
`);
|
|
3676
3677
|
function CodeBlockNative(props) {
|
|
3677
3678
|
const ctx = useSurfaceContext();
|
|
@@ -3722,7 +3723,7 @@ function CodeBlockNative(props) {
|
|
|
3722
3723
|
return heading() || copyable();
|
|
3723
3724
|
},
|
|
3724
3725
|
get children() {
|
|
3725
|
-
var _el$2 = _tmpl$3$
|
|
3726
|
+
var _el$2 = _tmpl$3$d();
|
|
3726
3727
|
spread(_el$2, mergeProps(() => part(`header`)), false, true);
|
|
3727
3728
|
insert(_el$2, createComponent(Show, {
|
|
3728
3729
|
get when() {
|
|
@@ -3732,7 +3733,7 @@ function CodeBlockNative(props) {
|
|
|
3732
3733
|
return _tmpl$5$a();
|
|
3733
3734
|
},
|
|
3734
3735
|
get children() {
|
|
3735
|
-
var _el$3 = _tmpl$$
|
|
3736
|
+
var _el$3 = _tmpl$$f();
|
|
3736
3737
|
spread(_el$3, mergeProps(() => part(`title`)), false, true);
|
|
3737
3738
|
insert(_el$3, heading);
|
|
3738
3739
|
return _el$3;
|
|
@@ -3743,7 +3744,7 @@ function CodeBlockNative(props) {
|
|
|
3743
3744
|
return copyable();
|
|
3744
3745
|
},
|
|
3745
3746
|
get children() {
|
|
3746
|
-
var _el$4 = _tmpl$2$
|
|
3747
|
+
var _el$4 = _tmpl$2$e();
|
|
3747
3748
|
spread(_el$4, mergeProps(() => part(`copy`, copied() && `checked`), {
|
|
3748
3749
|
get ["aria-label"]() {
|
|
3749
3750
|
return memo(() => !!copied())() ? ctx.t(`copied`) : ctx.t(`copy`);
|
|
@@ -3817,7 +3818,7 @@ function CodeBlockNative(props) {
|
|
|
3817
3818
|
return tokens();
|
|
3818
3819
|
},
|
|
3819
3820
|
children: (t) => (() => {
|
|
3820
|
-
var _el$11 = _tmpl$$
|
|
3821
|
+
var _el$11 = _tmpl$$f();
|
|
3821
3822
|
spread(_el$11, mergeProps(() => part.with(`token`, {
|
|
3822
3823
|
kind: t().kind
|
|
3823
3824
|
})), false, true);
|
|
@@ -3835,7 +3836,7 @@ function CodeBlockNative(props) {
|
|
|
3835
3836
|
const NATIVES_CODE = {
|
|
3836
3837
|
CodeBlock: CodeBlockNative
|
|
3837
3838
|
};
|
|
3838
|
-
var _tmpl$$
|
|
3839
|
+
var _tmpl$$e = /* @__PURE__ */ template(`<div class=xui-calendar-head><button type=button class=xui-calendar-nav></button><span aria-live=polite></span><button type=button class=xui-calendar-nav>`), _tmpl$2$d = /* @__PURE__ */ template(`<div class=xui-calendar-grid role=grid><div role=row class=xui-calendar-row>`), _tmpl$3$c = /* @__PURE__ */ template(`<span role=columnheader class=xui-calendar-weekday>`), _tmpl$4$9 = /* @__PURE__ */ template(`<div role=row class=xui-calendar-row>`), _tmpl$5$9 = /* @__PURE__ */ template(`<span role=gridcell class=xui-calendar-cell><button type=button><span class=xui-calendar-day-label>`), _tmpl$6$8 = /* @__PURE__ */ template(`<span>`), _tmpl$7$7 = /* @__PURE__ */ template(`<div><button><span>`), _tmpl$8$7 = /* @__PURE__ */ template(`<div role=listbox tabindex=0 class=xui-TimePicker-listbox>`), _tmpl$9$7 = /* @__PURE__ */ template(`<div><button type=button><span>`), _tmpl$0$4 = /* @__PURE__ */ template(`<div role=option>`);
|
|
3839
3840
|
const triggerAttrs = (open, contentId) => ({
|
|
3840
3841
|
type: `button`,
|
|
3841
3842
|
"aria-haspopup": `dialog`,
|
|
@@ -3927,7 +3928,7 @@ function CalendarGrid(props) {
|
|
|
3927
3928
|
return out;
|
|
3928
3929
|
});
|
|
3929
3930
|
return [(() => {
|
|
3930
|
-
var _el$ = _tmpl$$
|
|
3931
|
+
var _el$ = _tmpl$$e(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
|
|
3931
3932
|
_el$2.$$click = () => shiftMonth(-1);
|
|
3932
3933
|
insert(_el$2, createComponent(BuiltinIcon, {
|
|
3933
3934
|
slot: "DatePicker.previousMonth"
|
|
@@ -3948,7 +3949,7 @@ function CalendarGrid(props) {
|
|
|
3948
3949
|
});
|
|
3949
3950
|
return _el$;
|
|
3950
3951
|
})(), (() => {
|
|
3951
|
-
var _el$5 = _tmpl$2$
|
|
3952
|
+
var _el$5 = _tmpl$2$d(), _el$6 = _el$5.firstChild;
|
|
3952
3953
|
_el$5.$$keydown = onKey;
|
|
3953
3954
|
var _ref$ = grid;
|
|
3954
3955
|
typeof _ref$ === "function" ? use(_ref$, _el$5) : grid = _el$5;
|
|
@@ -3957,7 +3958,7 @@ function CalendarGrid(props) {
|
|
|
3957
3958
|
return weekdays();
|
|
3958
3959
|
},
|
|
3959
3960
|
children: (w) => (() => {
|
|
3960
|
-
var _el$7 = _tmpl$3$
|
|
3961
|
+
var _el$7 = _tmpl$3$c();
|
|
3961
3962
|
insert(_el$7, () => w().narrow);
|
|
3962
3963
|
effect((_p$) => {
|
|
3963
3964
|
var _v$3 = w().short, _v$4 = w().short;
|
|
@@ -4402,11 +4403,7 @@ function TimePickerNative(props) {
|
|
|
4402
4403
|
for (let m = lo(); m <= hi(); m += step()) out.push(m);
|
|
4403
4404
|
return out;
|
|
4404
4405
|
});
|
|
4405
|
-
const
|
|
4406
|
-
hour: `numeric`,
|
|
4407
|
-
minute: `2-digit`
|
|
4408
|
-
}));
|
|
4409
|
-
const show = (m) => clock().format(new Date(2e3, 0, 1, Math.floor(m / 60), m % 60));
|
|
4406
|
+
const show = formatHHmm;
|
|
4410
4407
|
const current = () => parseTime(value());
|
|
4411
4408
|
const pick = (i) => {
|
|
4412
4409
|
const next = formatHHmm(times()[i]);
|
|
@@ -4567,7 +4564,7 @@ const NATIVES_DATES = {
|
|
|
4567
4564
|
TimePicker: TimePickerNative
|
|
4568
4565
|
};
|
|
4569
4566
|
delegateEvents(["click", "keydown"]);
|
|
4570
|
-
var _tmpl$$
|
|
4567
|
+
var _tmpl$$d = /* @__PURE__ */ template(`<span>`), _tmpl$2$c = /* @__PURE__ */ template(`<span><svg><circle></circle><circle>`), _tmpl$3$b = /* @__PURE__ */ template(`<div>`), _tmpl$4$8 = /* @__PURE__ */ template(`<div><span></span><span>`), _tmpl$5$8 = /* @__PURE__ */ template(`<i>`), _tmpl$6$7 = /* @__PURE__ */ template(`<span class=xui-tree-col>`), _tmpl$7$6 = /* @__PURE__ */ template(`<span><svg aria-hidden=true>`), _tmpl$8$6 = /* @__PURE__ */ template(`<svg><rect></svg>`, false, true, false), _tmpl$9$6 = /* @__PURE__ */ template(`<svg><path></svg>`, false, true, false);
|
|
4571
4568
|
function sizeOf(ctx, component, part, props, fallback) {
|
|
4572
4569
|
const style2 = resolveRecipe(ctx.theme, {
|
|
4573
4570
|
component,
|
|
@@ -4608,7 +4605,7 @@ function RingNative(props) {
|
|
|
4608
4605
|
});
|
|
4609
4606
|
const label = () => str(props.props.label);
|
|
4610
4607
|
return (() => {
|
|
4611
|
-
var _el$ = _tmpl$2$
|
|
4608
|
+
var _el$ = _tmpl$2$c(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
|
|
4612
4609
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
4613
4610
|
"role": "progressbar",
|
|
4614
4611
|
"aria-valuemin": 0,
|
|
@@ -4680,7 +4677,7 @@ function RingNative(props) {
|
|
|
4680
4677
|
return label();
|
|
4681
4678
|
},
|
|
4682
4679
|
get children() {
|
|
4683
|
-
var _el$5 = _tmpl$$
|
|
4680
|
+
var _el$5 = _tmpl$$d();
|
|
4684
4681
|
spread(_el$5, mergeProps(() => part(`label`)), false, true);
|
|
4685
4682
|
insert(_el$5, label);
|
|
4686
4683
|
return _el$5;
|
|
@@ -4705,7 +4702,7 @@ function SpinnerNative(props) {
|
|
|
4705
4702
|
const size2 = () => sizeOf(ctx, `Spinner`, `root`, props.props, 20);
|
|
4706
4703
|
const label = () => str(props.props.label) || ctx.t(`loading`);
|
|
4707
4704
|
return (() => {
|
|
4708
|
-
var _el$6 = _tmpl$$
|
|
4705
|
+
var _el$6 = _tmpl$$d();
|
|
4709
4706
|
spread(_el$6, mergeProps(() => props.rootProps, {
|
|
4710
4707
|
"role": "status",
|
|
4711
4708
|
get ["aria-label"]() {
|
|
@@ -4735,7 +4732,7 @@ function SkeletonNative(props) {
|
|
|
4735
4732
|
const width = str(props.props.width, `100%`);
|
|
4736
4733
|
const height2 = str(props.props.height, `16px`);
|
|
4737
4734
|
return (() => {
|
|
4738
|
-
var _el$7 = _tmpl$3$
|
|
4735
|
+
var _el$7 = _tmpl$3$b();
|
|
4739
4736
|
spread(_el$7, mergeProps(() => props.rootProps, {
|
|
4740
4737
|
"aria-hidden": "true",
|
|
4741
4738
|
get style() {
|
|
@@ -4762,7 +4759,7 @@ function SkeletonNative(props) {
|
|
|
4762
4759
|
return block2();
|
|
4763
4760
|
},
|
|
4764
4761
|
get children() {
|
|
4765
|
-
var _el$8 = _tmpl$3$
|
|
4762
|
+
var _el$8 = _tmpl$3$b();
|
|
4766
4763
|
spread(_el$8, mergeProps(() => props.rootProps, {
|
|
4767
4764
|
"data-rows": "",
|
|
4768
4765
|
"aria-hidden": "true"
|
|
@@ -4787,7 +4784,7 @@ function SkeletonNative(props) {
|
|
|
4787
4784
|
return dot();
|
|
4788
4785
|
},
|
|
4789
4786
|
get children() {
|
|
4790
|
-
var _el$0 = _tmpl$$
|
|
4787
|
+
var _el$0 = _tmpl$$d();
|
|
4791
4788
|
spread(_el$0, mergeProps(() => part.at(`dot`, r)), false, false);
|
|
4792
4789
|
return _el$0;
|
|
4793
4790
|
}
|
|
@@ -4843,7 +4840,7 @@ function TreeGuidesNative(props) {
|
|
|
4843
4840
|
length: depth()
|
|
4844
4841
|
}, (_, i) => i));
|
|
4845
4842
|
return (() => {
|
|
4846
|
-
var _el$12 = _tmpl$$
|
|
4843
|
+
var _el$12 = _tmpl$$d();
|
|
4847
4844
|
spread(_el$12, mergeProps(() => props.rootProps, {
|
|
4848
4845
|
"aria-hidden": "true",
|
|
4849
4846
|
get ["data-tee"]() {
|
|
@@ -4993,7 +4990,7 @@ function VoiceWaveBarsNative(props) {
|
|
|
4993
4990
|
return props.node.children.length > 0;
|
|
4994
4991
|
},
|
|
4995
4992
|
get children() {
|
|
4996
|
-
var _el$17 = _tmpl$$
|
|
4993
|
+
var _el$17 = _tmpl$$d();
|
|
4997
4994
|
spread(_el$17, mergeProps(() => part(`child`), {
|
|
4998
4995
|
"data-hidden": "true",
|
|
4999
4996
|
"aria-hidden": "true"
|
|
@@ -5106,7 +5103,7 @@ function VoiceWaveRingNative(props) {
|
|
|
5106
5103
|
return props.node.children.length > 0;
|
|
5107
5104
|
},
|
|
5108
5105
|
get children() {
|
|
5109
|
-
var _el$21 = _tmpl$$
|
|
5106
|
+
var _el$21 = _tmpl$$d();
|
|
5110
5107
|
use((el) => createEffect(() => {
|
|
5111
5108
|
const px2 = size2();
|
|
5112
5109
|
onCleanup(voiceWaveFitChild(el, (c) => voiceWaveChildBox(px2, c).scale));
|
|
@@ -5184,7 +5181,7 @@ function createHostOwnedValue(options) {
|
|
|
5184
5181
|
commit: () => c.commit()
|
|
5185
5182
|
};
|
|
5186
5183
|
}
|
|
5187
|
-
var _tmpl$$
|
|
5184
|
+
var _tmpl$$c = /* @__PURE__ */ template(`<textarea>`), _tmpl$2$b = /* @__PURE__ */ template(`<div>`), _tmpl$3$a = /* @__PURE__ */ template(`<input>`), _tmpl$4$7 = /* @__PURE__ */ template(`<div><div><button type=button></button><input><button type=button>`), _tmpl$5$7 = /* @__PURE__ */ template(`<span>`), _tmpl$6$6 = /* @__PURE__ */ template(`<span data-state=checked>`), _tmpl$7$5 = /* @__PURE__ */ template(`<div><button type=button role=checkbox value=on></button><div class=xui-field-text>`), _tmpl$8$5 = /* @__PURE__ */ template(`<div><div></div><button type=button role=switch value=on><span>`), _tmpl$9$5 = /* @__PURE__ */ template(`<div><div role=radiogroup>`), _tmpl$0$3 = /* @__PURE__ */ template(`<label class=xui-radio-row><button type=button role=radio data-radix-collection-item></button><span>`), _tmpl$1$3 = /* @__PURE__ */ template(`<div><div><span></span></div><span data-orientation=horizontal class=xui-slider-root><span data-orientation=horizontal><span data-orientation=horizontal></span></span><span><span role=slider aria-orientation=horizontal data-orientation=horizontal tabindex=0 data-radix-collection-item style>`), _tmpl$10$3 = /* @__PURE__ */ template(`<div><textarea></textarea><div class=xui-composer-bar><button type=button>`), _tmpl$11$3 = /* @__PURE__ */ template(`<button type=button>`);
|
|
5188
5185
|
function createInputSender(props, prop) {
|
|
5189
5186
|
const ctx = useSurfaceContext();
|
|
5190
5187
|
const path = createMemo(() => boundPath(props.node.props, prop, props.scope));
|
|
@@ -5290,7 +5287,7 @@ function TextFieldNative(props) {
|
|
|
5290
5287
|
});
|
|
5291
5288
|
};
|
|
5292
5289
|
return (() => {
|
|
5293
|
-
var _el$ = _tmpl$2$
|
|
5290
|
+
var _el$ = _tmpl$2$b();
|
|
5294
5291
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
5295
5292
|
get ["data-pending"]() {
|
|
5296
5293
|
return field.pending ? `true` : void 0;
|
|
@@ -5315,7 +5312,7 @@ function TextFieldNative(props) {
|
|
|
5315
5312
|
},
|
|
5316
5313
|
get fallback() {
|
|
5317
5314
|
return (() => {
|
|
5318
|
-
var _el$3 = _tmpl$3$
|
|
5315
|
+
var _el$3 = _tmpl$3$a();
|
|
5319
5316
|
use((e) => el = e, _el$3);
|
|
5320
5317
|
spread(_el$3, mergeProps(() => part(`field`, ...fieldStates()), {
|
|
5321
5318
|
"id": id,
|
|
@@ -5359,7 +5356,7 @@ function TextFieldNative(props) {
|
|
|
5359
5356
|
})();
|
|
5360
5357
|
},
|
|
5361
5358
|
get children() {
|
|
5362
|
-
var _el$2 = _tmpl$$
|
|
5359
|
+
var _el$2 = _tmpl$$c();
|
|
5363
5360
|
use((e) => el = e, _el$2);
|
|
5364
5361
|
spread(_el$2, mergeProps(() => part(`field`, ...fieldStates()), {
|
|
5365
5362
|
"id": id,
|
|
@@ -6390,7 +6387,7 @@ function ComposerNative(props) {
|
|
|
6390
6387
|
insert(_el$32, (() => {
|
|
6391
6388
|
var _c$3 = memo(() => !!bool(props.props.attachments));
|
|
6392
6389
|
return () => _c$3() ? (() => {
|
|
6393
|
-
var _el$34 = _tmpl$11$
|
|
6390
|
+
var _el$34 = _tmpl$11$3();
|
|
6394
6391
|
spread(_el$34, mergeProps(() => part(`attachment`), {
|
|
6395
6392
|
get ["aria-label"]() {
|
|
6396
6393
|
return ctx.t(`browse`);
|
|
@@ -6435,15 +6432,15 @@ const NATIVES_INPUTS = {
|
|
|
6435
6432
|
Composer: ComposerNative
|
|
6436
6433
|
};
|
|
6437
6434
|
delegateEvents(["keydown", "pointerdown", "pointermove", "pointerup"]);
|
|
6438
|
-
var _tmpl$$
|
|
6435
|
+
var _tmpl$$b = /* @__PURE__ */ template(`<svg class=xui-media-sizer aria-hidden=true height=1>`), _tmpl$2$a = /* @__PURE__ */ template(`<img decoding=async>`, true, false, false), _tmpl$3$9 = /* @__PURE__ */ template(`<div>`), _tmpl$4$6 = /* @__PURE__ */ template(`<video>`), _tmpl$5$6 = /* @__PURE__ */ template(`<img class=xui-video-poster alt aria-hidden=true decoding=async>`), _tmpl$6$5 = /* @__PURE__ */ template(`<button type=button class=xui-media-play data-size=lg>`), _tmpl$7$4 = /* @__PURE__ */ template(`<span class=xui-video-duration>`), _tmpl$8$4 = /* @__PURE__ */ template(`<span>`), _tmpl$9$4 = /* @__PURE__ */ template(`<div><div><button type=button class=xui-media-play data-size=sm></button><span class=xui-audio-progress aria-hidden=true><span></span></span><span class=xui-audio-clock></span></div><audio preload=metadata>`), _tmpl$0$2 = /* @__PURE__ */ template(`<img>`), _tmpl$1$2 = /* @__PURE__ */ template(`<img class=xui-carousel-thumb alt aria-hidden=true loading=lazy decoding=async>`, true, false, false), _tmpl$10$2 = /* @__PURE__ */ template(`<button type=button><span class=xui-carousel-thumb-fallback aria-hidden=true>`), _tmpl$11$2 = /* @__PURE__ */ template(`<div class=xui-carousel-track aria-live=polite>`), _tmpl$12$2 = /* @__PURE__ */ template(`<div class=xui-carousel-stage><span>`), _tmpl$13$2 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`), _tmpl$14$2 = /* @__PURE__ */ template(`<button type=button>`);
|
|
6439
6436
|
function MediaSizer() {
|
|
6440
6437
|
return (() => {
|
|
6441
|
-
var _el$ = _tmpl$$
|
|
6438
|
+
var _el$ = _tmpl$$b();
|
|
6442
6439
|
setAttribute(_el$, "width", MEDIA_INTRINSIC_WIDTH);
|
|
6443
6440
|
return _el$;
|
|
6444
6441
|
})();
|
|
6445
6442
|
}
|
|
6446
|
-
const over = (base, extra) => ({
|
|
6443
|
+
const over$1 = (base, extra) => ({
|
|
6447
6444
|
...base,
|
|
6448
6445
|
...extra
|
|
6449
6446
|
});
|
|
@@ -6474,8 +6471,8 @@ function ImageNative(props) {
|
|
|
6474
6471
|
const failed = () => !src() || shown() === `error`;
|
|
6475
6472
|
const fallback = () => str(props.props.fallback);
|
|
6476
6473
|
return (() => {
|
|
6477
|
-
var _el$2 = _tmpl$3$
|
|
6478
|
-
spread(_el$2, mergeProps(() => over(props.rootProps, {
|
|
6474
|
+
var _el$2 = _tmpl$3$9();
|
|
6475
|
+
spread(_el$2, mergeProps(() => over$1(props.rootProps, {
|
|
6479
6476
|
style: mergeStyle(props.rootProps, style$1()),
|
|
6480
6477
|
role: failed() ? `img` : void 0,
|
|
6481
6478
|
"aria-label": failed() ? alt() : void 0,
|
|
@@ -6486,7 +6483,7 @@ function ImageNative(props) {
|
|
|
6486
6483
|
return memo(() => !!(src() && media().url))() && shown() !== `error`;
|
|
6487
6484
|
},
|
|
6488
6485
|
get children() {
|
|
6489
|
-
var _el$3 = _tmpl$2$
|
|
6486
|
+
var _el$3 = _tmpl$2$a();
|
|
6490
6487
|
_el$3.addEventListener("error", () => setState(`error`));
|
|
6491
6488
|
_el$3.addEventListener("load", () => setState(`loaded`));
|
|
6492
6489
|
effect((_p$) => {
|
|
@@ -6514,7 +6511,7 @@ function ImageNative(props) {
|
|
|
6514
6511
|
return failed();
|
|
6515
6512
|
},
|
|
6516
6513
|
get children() {
|
|
6517
|
-
var _el$4 = _tmpl$3$
|
|
6514
|
+
var _el$4 = _tmpl$3$9();
|
|
6518
6515
|
spread(_el$4, mergeProps(() => part(`fallback`), {
|
|
6519
6516
|
"aria-hidden": "true"
|
|
6520
6517
|
}), false, true);
|
|
@@ -6551,8 +6548,10 @@ function VideoNative(props) {
|
|
|
6551
6548
|
const posterUrl = createMediaSrc(() => ctx.host, () => str(props.props.poster));
|
|
6552
6549
|
const ratio = () => num(props.props.aspectRatio, MEDIA_ASPECT_RATIO) || MEDIA_ASPECT_RATIO;
|
|
6553
6550
|
const autoplay = () => bool(props.props.autoplay);
|
|
6551
|
+
const [started, setStarted] = createSignal(false);
|
|
6552
|
+
const durationMs = () => props.props.durationMs !== void 0 ? num(props.props.durationMs) : void 0;
|
|
6554
6553
|
return (() => {
|
|
6555
|
-
var _el$5 = _tmpl$
|
|
6554
|
+
var _el$5 = _tmpl$3$9();
|
|
6556
6555
|
spread(_el$5, mergeProps(() => props.rootProps, {
|
|
6557
6556
|
get style() {
|
|
6558
6557
|
return mergeStyle(props.rootProps, {
|
|
@@ -6560,25 +6559,73 @@ function VideoNative(props) {
|
|
|
6560
6559
|
});
|
|
6561
6560
|
}
|
|
6562
6561
|
}), false, true);
|
|
6563
|
-
insert(_el$5, createComponent(MediaSizer, {}),
|
|
6564
|
-
|
|
6565
|
-
|
|
6566
|
-
|
|
6567
|
-
return url();
|
|
6568
|
-
},
|
|
6569
|
-
get poster() {
|
|
6570
|
-
return posterUrl();
|
|
6562
|
+
insert(_el$5, createComponent(MediaSizer, {}), null);
|
|
6563
|
+
insert(_el$5, createComponent(Show, {
|
|
6564
|
+
get when() {
|
|
6565
|
+
return started() || autoplay();
|
|
6571
6566
|
},
|
|
6572
|
-
|
|
6573
|
-
|
|
6574
|
-
|
|
6567
|
+
get fallback() {
|
|
6568
|
+
return [createComponent(Show, {
|
|
6569
|
+
get when() {
|
|
6570
|
+
return posterUrl();
|
|
6571
|
+
},
|
|
6572
|
+
get children() {
|
|
6573
|
+
var _el$7 = _tmpl$5$6();
|
|
6574
|
+
setAttribute(_el$7, "draggable", false);
|
|
6575
|
+
effect(() => setAttribute(_el$7, "src", posterUrl()));
|
|
6576
|
+
return _el$7;
|
|
6577
|
+
}
|
|
6578
|
+
}), (() => {
|
|
6579
|
+
var _el$8 = _tmpl$6$5();
|
|
6580
|
+
_el$8.$$click = () => setStarted(true);
|
|
6581
|
+
insert(_el$8, createComponent(PaintIcon, {
|
|
6582
|
+
get icon() {
|
|
6583
|
+
return CHROME.play;
|
|
6584
|
+
},
|
|
6585
|
+
"aria-hidden": "true"
|
|
6586
|
+
}));
|
|
6587
|
+
effect((_p$) => {
|
|
6588
|
+
var _v$5 = ctx.t(`play`), _v$6 = !url();
|
|
6589
|
+
_v$5 !== _p$.e && setAttribute(_el$8, "aria-label", _p$.e = _v$5);
|
|
6590
|
+
_v$6 !== _p$.t && (_el$8.disabled = _p$.t = _v$6);
|
|
6591
|
+
return _p$;
|
|
6592
|
+
}, {
|
|
6593
|
+
e: void 0,
|
|
6594
|
+
t: void 0
|
|
6595
|
+
});
|
|
6596
|
+
return _el$8;
|
|
6597
|
+
})(), createComponent(Show, {
|
|
6598
|
+
get when() {
|
|
6599
|
+
return durationMs() !== void 0;
|
|
6600
|
+
},
|
|
6601
|
+
get children() {
|
|
6602
|
+
var _el$9 = _tmpl$7$4();
|
|
6603
|
+
insert(_el$9, () => mediaClock(durationMs()));
|
|
6604
|
+
return _el$9;
|
|
6605
|
+
}
|
|
6606
|
+
})];
|
|
6575
6607
|
},
|
|
6576
|
-
|
|
6577
|
-
|
|
6578
|
-
|
|
6579
|
-
|
|
6608
|
+
get children() {
|
|
6609
|
+
var _el$6 = _tmpl$4$6();
|
|
6610
|
+
use((el) => createRenderEffect(() => el.muted = autoplay() && !started()), _el$6);
|
|
6611
|
+
spread(_el$6, mergeProps(() => part(`controls`), {
|
|
6612
|
+
get src() {
|
|
6613
|
+
return url();
|
|
6614
|
+
},
|
|
6615
|
+
get poster() {
|
|
6616
|
+
return posterUrl();
|
|
6617
|
+
},
|
|
6618
|
+
"controls": true,
|
|
6619
|
+
"autoplay": true,
|
|
6620
|
+
"playsinline": true,
|
|
6621
|
+
"preload": "metadata",
|
|
6622
|
+
get ["data-duration-ms"]() {
|
|
6623
|
+
return durationMs();
|
|
6624
|
+
}
|
|
6625
|
+
}), false, false);
|
|
6626
|
+
return _el$6;
|
|
6580
6627
|
}
|
|
6581
|
-
}),
|
|
6628
|
+
}), null);
|
|
6582
6629
|
return _el$5;
|
|
6583
6630
|
})();
|
|
6584
6631
|
}
|
|
@@ -6587,9 +6634,19 @@ function AudioPlayerNative(props) {
|
|
|
6587
6634
|
const part = parts(props);
|
|
6588
6635
|
const title = () => str(props.props.title);
|
|
6589
6636
|
const url = createMediaSrc(() => ctx.host, () => str(props.props.src), `stream`);
|
|
6637
|
+
let audio;
|
|
6638
|
+
const [playing, setPlaying] = createSignal(false);
|
|
6639
|
+
const [position, setPosition] = createSignal(0);
|
|
6640
|
+
const [loadedMs, setLoadedMs] = createSignal(null);
|
|
6641
|
+
const durationMs = () => props.props.durationMs !== void 0 ? num(props.props.durationMs) : loadedMs() ?? 0;
|
|
6642
|
+
const toggle = () => {
|
|
6643
|
+
if (!audio) return;
|
|
6644
|
+
if (audio.paused) void audio.play()?.catch(() => setPlaying(false));
|
|
6645
|
+
else audio.pause();
|
|
6646
|
+
};
|
|
6590
6647
|
return (() => {
|
|
6591
|
-
var _el$
|
|
6592
|
-
spread(_el$
|
|
6648
|
+
var _el$0 = _tmpl$9$4(), _el$10 = _el$0.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling, _el$15 = _el$10.nextSibling;
|
|
6649
|
+
spread(_el$0, mergeProps(() => props.rootProps, {
|
|
6593
6650
|
get style() {
|
|
6594
6651
|
return mergeStyle(props.rootProps, {
|
|
6595
6652
|
flexDirection: `column`,
|
|
@@ -6597,31 +6654,53 @@ function AudioPlayerNative(props) {
|
|
|
6597
6654
|
});
|
|
6598
6655
|
}
|
|
6599
6656
|
}), false, true);
|
|
6600
|
-
insert(_el$
|
|
6657
|
+
insert(_el$0, createComponent(Show, {
|
|
6601
6658
|
get when() {
|
|
6602
6659
|
return title();
|
|
6603
6660
|
},
|
|
6604
6661
|
get children() {
|
|
6605
|
-
var _el$
|
|
6606
|
-
spread(_el$
|
|
6607
|
-
insert(_el$
|
|
6608
|
-
return _el$
|
|
6662
|
+
var _el$1 = _tmpl$8$4();
|
|
6663
|
+
spread(_el$1, mergeProps(() => part(`track`)), false, true);
|
|
6664
|
+
insert(_el$1, title);
|
|
6665
|
+
return _el$1;
|
|
6609
6666
|
}
|
|
6610
|
-
}), _el$
|
|
6611
|
-
spread(_el$
|
|
6612
|
-
get src() {
|
|
6613
|
-
return url();
|
|
6614
|
-
},
|
|
6615
|
-
"controls": true,
|
|
6616
|
-
"preload": "metadata",
|
|
6617
|
-
get ["aria-label"]() {
|
|
6618
|
-
return title() || void 0;
|
|
6619
|
-
},
|
|
6667
|
+
}), _el$10);
|
|
6668
|
+
spread(_el$10, mergeProps(() => part(`controls`), {
|
|
6620
6669
|
get ["data-duration-ms"]() {
|
|
6621
6670
|
return memo(() => props.props.durationMs !== void 0)() ? num(props.props.durationMs) : void 0;
|
|
6622
6671
|
}
|
|
6623
|
-
}), false,
|
|
6624
|
-
|
|
6672
|
+
}), false, true);
|
|
6673
|
+
_el$11.$$click = toggle;
|
|
6674
|
+
insert(_el$11, createComponent(PaintIcon, {
|
|
6675
|
+
get icon() {
|
|
6676
|
+
return memo(() => !!playing())() ? CHROME.pause : CHROME.play;
|
|
6677
|
+
},
|
|
6678
|
+
"aria-hidden": "true"
|
|
6679
|
+
}));
|
|
6680
|
+
insert(_el$14, () => `${mediaClock(position())} / ${mediaClock(durationMs())}`);
|
|
6681
|
+
_el$15.addEventListener("loadedmetadata", (e) => setLoadedMs(Number.isFinite(e.currentTarget.duration) ? e.currentTarget.duration * 1e3 : null));
|
|
6682
|
+
_el$15.addEventListener("timeupdate", (e) => setPosition(e.currentTarget.currentTime * 1e3));
|
|
6683
|
+
_el$15.addEventListener("ended", () => setPlaying(false));
|
|
6684
|
+
_el$15.addEventListener("pause", () => setPlaying(false));
|
|
6685
|
+
_el$15.addEventListener("play", () => setPlaying(true));
|
|
6686
|
+
var _ref$ = audio;
|
|
6687
|
+
typeof _ref$ === "function" ? use(_ref$, _el$15) : audio = _el$15;
|
|
6688
|
+
effect((_p$) => {
|
|
6689
|
+
var _v$7 = ctx.t(playing() ? `pause` : `play`), _v$8 = !url(), _v$9 = `${durationMs() > 0 ? Math.min(100, position() / durationMs() * 100) : 0}%`, _v$0 = url(), _v$1 = title() || void 0;
|
|
6690
|
+
_v$7 !== _p$.e && setAttribute(_el$11, "aria-label", _p$.e = _v$7);
|
|
6691
|
+
_v$8 !== _p$.t && (_el$11.disabled = _p$.t = _v$8);
|
|
6692
|
+
_v$9 !== _p$.a && setStyleProperty(_el$13, "width", _p$.a = _v$9);
|
|
6693
|
+
_v$0 !== _p$.o && setAttribute(_el$15, "src", _p$.o = _v$0);
|
|
6694
|
+
_v$1 !== _p$.i && setAttribute(_el$15, "aria-label", _p$.i = _v$1);
|
|
6695
|
+
return _p$;
|
|
6696
|
+
}, {
|
|
6697
|
+
e: void 0,
|
|
6698
|
+
t: void 0,
|
|
6699
|
+
a: void 0,
|
|
6700
|
+
o: void 0,
|
|
6701
|
+
i: void 0
|
|
6702
|
+
});
|
|
6703
|
+
return _el$0;
|
|
6625
6704
|
})();
|
|
6626
6705
|
}
|
|
6627
6706
|
function initials(name) {
|
|
@@ -6658,18 +6737,18 @@ function AvatarNative(props) {
|
|
|
6658
6737
|
onCleanup(() => clearTimeout(timer));
|
|
6659
6738
|
}));
|
|
6660
6739
|
return (() => {
|
|
6661
|
-
var _el$
|
|
6662
|
-
spread(_el$
|
|
6740
|
+
var _el$16 = _tmpl$8$4();
|
|
6741
|
+
spread(_el$16, mergeProps(() => over$1(props.rootProps, {
|
|
6663
6742
|
"aria-label": name() || void 0,
|
|
6664
6743
|
role: `img`
|
|
6665
6744
|
})), false, true);
|
|
6666
|
-
insert(_el$
|
|
6745
|
+
insert(_el$16, createComponent(Show, {
|
|
6667
6746
|
get when() {
|
|
6668
6747
|
return memo(() => !!src())() && imageStatus() === `loaded`;
|
|
6669
6748
|
},
|
|
6670
6749
|
get children() {
|
|
6671
|
-
var _el$
|
|
6672
|
-
spread(_el$
|
|
6750
|
+
var _el$17 = _tmpl$0$2();
|
|
6751
|
+
spread(_el$17, mergeProps(() => part(`image`), {
|
|
6673
6752
|
get src() {
|
|
6674
6753
|
return url();
|
|
6675
6754
|
},
|
|
@@ -6677,33 +6756,34 @@ function AvatarNative(props) {
|
|
|
6677
6756
|
return name();
|
|
6678
6757
|
}
|
|
6679
6758
|
}), false, false);
|
|
6680
|
-
return _el$
|
|
6759
|
+
return _el$17;
|
|
6681
6760
|
}
|
|
6682
6761
|
}), null);
|
|
6683
|
-
insert(_el$
|
|
6762
|
+
insert(_el$16, createComponent(Show, {
|
|
6684
6763
|
get when() {
|
|
6685
6764
|
return memo(() => !!canRender())() && imageStatus() !== `loaded`;
|
|
6686
6765
|
},
|
|
6687
6766
|
get children() {
|
|
6688
|
-
var _el$
|
|
6689
|
-
spread(_el$
|
|
6767
|
+
var _el$18 = _tmpl$8$4();
|
|
6768
|
+
spread(_el$18, mergeProps(() => part(`fallback`), {
|
|
6690
6769
|
get style() {
|
|
6691
6770
|
return tint();
|
|
6692
6771
|
}
|
|
6693
6772
|
}), false, true);
|
|
6694
|
-
insert(_el$
|
|
6695
|
-
return _el$
|
|
6773
|
+
insert(_el$18, () => initials(name()) || `?`);
|
|
6774
|
+
return _el$18;
|
|
6696
6775
|
}
|
|
6697
6776
|
}), null);
|
|
6698
|
-
return _el$
|
|
6777
|
+
return _el$16;
|
|
6699
6778
|
})();
|
|
6700
6779
|
}
|
|
6701
6780
|
function CarouselThumbnail(props) {
|
|
6702
6781
|
const ctx = useSurfaceContext();
|
|
6703
6782
|
const url = createMediaSrc(() => ctx.host, () => props.src);
|
|
6783
|
+
const [broken, setBroken] = createSignal(null);
|
|
6704
6784
|
return (() => {
|
|
6705
|
-
var _el$
|
|
6706
|
-
spread(_el$
|
|
6785
|
+
var _el$19 = _tmpl$10$2(), _el$20 = _el$19.firstChild;
|
|
6786
|
+
spread(_el$19, mergeProps(() => props.attrs, {
|
|
6707
6787
|
get ["aria-label"]() {
|
|
6708
6788
|
return props.label;
|
|
6709
6789
|
},
|
|
@@ -6715,18 +6795,22 @@ function CarouselThumbnail(props) {
|
|
|
6715
6795
|
},
|
|
6716
6796
|
"onClick": () => props.onPress()
|
|
6717
6797
|
}), false, true);
|
|
6718
|
-
insert(_el$
|
|
6798
|
+
insert(_el$20, createComponent(BuiltinIcon, {
|
|
6799
|
+
slot: "Image.fallback"
|
|
6800
|
+
}));
|
|
6801
|
+
insert(_el$19, createComponent(Show, {
|
|
6719
6802
|
get when() {
|
|
6720
|
-
return memo(() => !!props.src)() && url();
|
|
6803
|
+
return memo(() => !!(props.src && url()))() && broken() !== url();
|
|
6721
6804
|
},
|
|
6722
6805
|
get children() {
|
|
6723
|
-
var _el$
|
|
6724
|
-
|
|
6725
|
-
|
|
6726
|
-
|
|
6806
|
+
var _el$21 = _tmpl$1$2();
|
|
6807
|
+
_el$21.addEventListener("error", () => setBroken(url() ?? null));
|
|
6808
|
+
setAttribute(_el$21, "draggable", false);
|
|
6809
|
+
effect(() => setAttribute(_el$21, "src", url()));
|
|
6810
|
+
return _el$21;
|
|
6727
6811
|
}
|
|
6728
|
-
}));
|
|
6729
|
-
return _el$
|
|
6812
|
+
}), null);
|
|
6813
|
+
return _el$19;
|
|
6730
6814
|
})();
|
|
6731
6815
|
}
|
|
6732
6816
|
function CarouselNative(props) {
|
|
@@ -6796,11 +6880,11 @@ function CarouselNative(props) {
|
|
|
6796
6880
|
if (delta !== 0) el.scrollLeft += delta;
|
|
6797
6881
|
});
|
|
6798
6882
|
const trackView = (() => {
|
|
6799
|
-
var _el$
|
|
6800
|
-
_el$
|
|
6801
|
-
var _ref$ = track;
|
|
6802
|
-
typeof _ref$ === "function" ? use(_ref
|
|
6803
|
-
insert(_el$
|
|
6883
|
+
var _el$22 = _tmpl$11$2();
|
|
6884
|
+
_el$22.addEventListener("scroll", onScroll);
|
|
6885
|
+
var _ref$2 = track;
|
|
6886
|
+
typeof _ref$2 === "function" ? use(_ref$2, _el$22) : track = _el$22;
|
|
6887
|
+
insert(_el$22, createComponent(For, {
|
|
6804
6888
|
get each() {
|
|
6805
6889
|
return ids();
|
|
6806
6890
|
},
|
|
@@ -6815,9 +6899,9 @@ function CarouselNative(props) {
|
|
|
6815
6899
|
return a;
|
|
6816
6900
|
};
|
|
6817
6901
|
return (() => {
|
|
6818
|
-
var _el$
|
|
6819
|
-
use((el) => createRenderEffect(() => el.toggleAttribute(`inert`, !active())), _el$
|
|
6820
|
-
spread(_el$
|
|
6902
|
+
var _el$23 = _tmpl$3$9();
|
|
6903
|
+
use((el) => createRenderEffect(() => el.toggleAttribute(`inert`, !active())), _el$23);
|
|
6904
|
+
spread(_el$23, mergeProps(attrs, {
|
|
6821
6905
|
"role": "group",
|
|
6822
6906
|
get ["aria-roledescription"]() {
|
|
6823
6907
|
return ctx.t(`slide`);
|
|
@@ -6832,20 +6916,20 @@ function CarouselNative(props) {
|
|
|
6832
6916
|
return active() ? void 0 : ``;
|
|
6833
6917
|
}
|
|
6834
6918
|
}), false, true);
|
|
6835
|
-
insert(_el$
|
|
6919
|
+
insert(_el$23, createComponent(NodeView, {
|
|
6836
6920
|
get node() {
|
|
6837
6921
|
return entry().node;
|
|
6838
6922
|
}
|
|
6839
6923
|
}));
|
|
6840
|
-
return _el$
|
|
6924
|
+
return _el$23;
|
|
6841
6925
|
})();
|
|
6842
6926
|
}
|
|
6843
6927
|
}));
|
|
6844
|
-
return _el$
|
|
6928
|
+
return _el$22;
|
|
6845
6929
|
})();
|
|
6846
6930
|
return (() => {
|
|
6847
|
-
var _el$
|
|
6848
|
-
spread(_el$
|
|
6931
|
+
var _el$24 = _tmpl$3$9();
|
|
6932
|
+
spread(_el$24, mergeProps(() => props.rootProps, {
|
|
6849
6933
|
"role": "region",
|
|
6850
6934
|
get ["aria-roledescription"]() {
|
|
6851
6935
|
return ctx.t(`carousel`);
|
|
@@ -6856,34 +6940,34 @@ function CarouselNative(props) {
|
|
|
6856
6940
|
else if (e.key === `ArrowLeft`) go(page() + (rtl ? 1 : -1));
|
|
6857
6941
|
}
|
|
6858
6942
|
}), false, true);
|
|
6859
|
-
insert(_el$
|
|
6943
|
+
insert(_el$24, createComponent(Show, {
|
|
6860
6944
|
get when() {
|
|
6861
6945
|
return counter();
|
|
6862
6946
|
},
|
|
6863
6947
|
fallback: trackView,
|
|
6864
6948
|
get children() {
|
|
6865
|
-
var _el$
|
|
6866
|
-
insert(_el$
|
|
6867
|
-
spread(_el$
|
|
6949
|
+
var _el$25 = _tmpl$12$2(), _el$26 = _el$25.firstChild;
|
|
6950
|
+
insert(_el$25, trackView, _el$26);
|
|
6951
|
+
spread(_el$26, mergeProps(() => part(`counter`), {
|
|
6868
6952
|
"aria-hidden": "true"
|
|
6869
6953
|
}), false, true);
|
|
6870
|
-
insert(_el$
|
|
6954
|
+
insert(_el$26, () => ctx.t(`pageCounter`, {
|
|
6871
6955
|
page: page() + 1,
|
|
6872
6956
|
total: pages().length
|
|
6873
6957
|
}));
|
|
6874
|
-
return _el$
|
|
6958
|
+
return _el$25;
|
|
6875
6959
|
}
|
|
6876
6960
|
}), null);
|
|
6877
|
-
insert(_el$
|
|
6961
|
+
insert(_el$24, createComponent(Show, {
|
|
6878
6962
|
get when() {
|
|
6879
6963
|
return thumbnails();
|
|
6880
6964
|
},
|
|
6881
6965
|
children: (urls) => (() => {
|
|
6882
|
-
var _el$
|
|
6883
|
-
var _ref$
|
|
6884
|
-
typeof _ref$
|
|
6885
|
-
spread(_el$
|
|
6886
|
-
insert(_el$
|
|
6966
|
+
var _el$31 = _tmpl$3$9();
|
|
6967
|
+
var _ref$3 = strip;
|
|
6968
|
+
typeof _ref$3 === "function" ? use(_ref$3, _el$31) : strip = _el$31;
|
|
6969
|
+
spread(_el$31, mergeProps(() => part(`thumbnails`)), false, true);
|
|
6970
|
+
insert(_el$31, createComponent(For, {
|
|
6887
6971
|
get each() {
|
|
6888
6972
|
return ids();
|
|
6889
6973
|
},
|
|
@@ -6911,17 +6995,17 @@ function CarouselNative(props) {
|
|
|
6911
6995
|
});
|
|
6912
6996
|
}
|
|
6913
6997
|
}));
|
|
6914
|
-
return _el$
|
|
6998
|
+
return _el$31;
|
|
6915
6999
|
})()
|
|
6916
7000
|
}), null);
|
|
6917
|
-
insert(_el$
|
|
7001
|
+
insert(_el$24, createComponent(Show, {
|
|
6918
7002
|
get when() {
|
|
6919
7003
|
return many();
|
|
6920
7004
|
},
|
|
6921
7005
|
get children() {
|
|
6922
|
-
var _el$
|
|
6923
|
-
spread(_el$
|
|
6924
|
-
spread(_el$
|
|
7006
|
+
var _el$27 = _tmpl$13$2(), _el$28 = _el$27.firstChild, _el$30 = _el$28.nextSibling;
|
|
7007
|
+
spread(_el$27, mergeProps(() => withClass(part(`controls`), `xui-carousel-controls`)), false, true);
|
|
7008
|
+
spread(_el$28, mergeProps(() => withClass(part(`previous`), `xui-carousel-nav`), {
|
|
6925
7009
|
get ["aria-label"]() {
|
|
6926
7010
|
return ctx.t(`previous`);
|
|
6927
7011
|
},
|
|
@@ -6930,21 +7014,21 @@ function CarouselNative(props) {
|
|
|
6930
7014
|
},
|
|
6931
7015
|
"onClick": () => go(page() - 1)
|
|
6932
7016
|
}), false, true);
|
|
6933
|
-
insert(_el$
|
|
7017
|
+
insert(_el$28, createComponent(BuiltinIcon, {
|
|
6934
7018
|
slot: "Carousel.previous"
|
|
6935
7019
|
}));
|
|
6936
|
-
insert(_el$
|
|
7020
|
+
insert(_el$27, createComponent(Show, {
|
|
6937
7021
|
get when() {
|
|
6938
7022
|
return props.props.indicators !== false;
|
|
6939
7023
|
},
|
|
6940
7024
|
get children() {
|
|
6941
|
-
var _el$
|
|
6942
|
-
spread(_el$
|
|
7025
|
+
var _el$29 = _tmpl$3$9();
|
|
7026
|
+
spread(_el$29, mergeProps(() => part(`indicator`), {
|
|
6943
7027
|
"class": "xui-carousel-dots",
|
|
6944
7028
|
"data-xui-part": "Carousel/indicators",
|
|
6945
7029
|
"role": "tablist"
|
|
6946
7030
|
}), false, true);
|
|
6947
|
-
insert(_el$
|
|
7031
|
+
insert(_el$29, createComponent(For, {
|
|
6948
7032
|
get each() {
|
|
6949
7033
|
return ids();
|
|
6950
7034
|
},
|
|
@@ -6958,8 +7042,8 @@ function CarouselNative(props) {
|
|
|
6958
7042
|
return a;
|
|
6959
7043
|
};
|
|
6960
7044
|
return (() => {
|
|
6961
|
-
var _el$
|
|
6962
|
-
spread(_el$
|
|
7045
|
+
var _el$32 = _tmpl$14$2();
|
|
7046
|
+
spread(_el$32, mergeProps(attrs, {
|
|
6963
7047
|
"role": "tab",
|
|
6964
7048
|
get ["aria-selected"]() {
|
|
6965
7049
|
return index() === page();
|
|
@@ -6969,14 +7053,14 @@ function CarouselNative(props) {
|
|
|
6969
7053
|
},
|
|
6970
7054
|
"onClick": () => go(index())
|
|
6971
7055
|
}), false, false);
|
|
6972
|
-
return _el$
|
|
7056
|
+
return _el$32;
|
|
6973
7057
|
})();
|
|
6974
7058
|
}
|
|
6975
7059
|
}));
|
|
6976
|
-
return _el$
|
|
7060
|
+
return _el$29;
|
|
6977
7061
|
}
|
|
6978
|
-
}), _el$
|
|
6979
|
-
spread(_el$
|
|
7062
|
+
}), _el$30);
|
|
7063
|
+
spread(_el$30, mergeProps(() => withClass(part(`next`), `xui-carousel-nav`), {
|
|
6980
7064
|
get ["aria-label"]() {
|
|
6981
7065
|
return ctx.t(`next`);
|
|
6982
7066
|
},
|
|
@@ -6985,13 +7069,13 @@ function CarouselNative(props) {
|
|
|
6985
7069
|
},
|
|
6986
7070
|
"onClick": () => go(page() + 1)
|
|
6987
7071
|
}), false, true);
|
|
6988
|
-
insert(_el$
|
|
7072
|
+
insert(_el$30, createComponent(BuiltinIcon, {
|
|
6989
7073
|
slot: "Carousel.next"
|
|
6990
7074
|
}));
|
|
6991
|
-
return _el$
|
|
7075
|
+
return _el$27;
|
|
6992
7076
|
}
|
|
6993
7077
|
}), null);
|
|
6994
|
-
return _el$
|
|
7078
|
+
return _el$24;
|
|
6995
7079
|
})();
|
|
6996
7080
|
}
|
|
6997
7081
|
const NATIVES_MEDIA = {
|
|
@@ -7001,7 +7085,64 @@ const NATIVES_MEDIA = {
|
|
|
7001
7085
|
Avatar: AvatarNative,
|
|
7002
7086
|
Carousel: CarouselNative
|
|
7003
7087
|
};
|
|
7004
|
-
|
|
7088
|
+
delegateEvents(["click"]);
|
|
7089
|
+
var _tmpl$$a = /* @__PURE__ */ template(`<div><canvas aria-hidden=true>`);
|
|
7090
|
+
const CANVAS_STYLE = {
|
|
7091
|
+
display: `block`,
|
|
7092
|
+
width: `100%`,
|
|
7093
|
+
height: `100%`
|
|
7094
|
+
};
|
|
7095
|
+
function MotionNative(props) {
|
|
7096
|
+
const ctx = useSurfaceContext();
|
|
7097
|
+
let root;
|
|
7098
|
+
let canvas;
|
|
7099
|
+
let view = null;
|
|
7100
|
+
const pressable = () => Boolean(props.node.on?.press);
|
|
7101
|
+
onMount(() => {
|
|
7102
|
+
view = new MotionView(root, canvas);
|
|
7103
|
+
createEffect(() => {
|
|
7104
|
+
const host = ctx.host;
|
|
7105
|
+
const surfaceId = ctx.surfaceId;
|
|
7106
|
+
const id = props.node.id;
|
|
7107
|
+
const emit = props.emit;
|
|
7108
|
+
view?.update(props.props, {
|
|
7109
|
+
theme: ctx.theme,
|
|
7110
|
+
mode: ctx.mode,
|
|
7111
|
+
reducedMotion: ctx.reducedMotion,
|
|
7112
|
+
host,
|
|
7113
|
+
onError: (message) => host.onPaintError?.({
|
|
7114
|
+
surfaceId,
|
|
7115
|
+
componentId: id,
|
|
7116
|
+
message
|
|
7117
|
+
}),
|
|
7118
|
+
emit: (event, payload) => void emit(event, payload),
|
|
7119
|
+
pressable: pressable()
|
|
7120
|
+
}, props.node.style);
|
|
7121
|
+
});
|
|
7122
|
+
});
|
|
7123
|
+
onCleanup(() => {
|
|
7124
|
+
view?.destroy();
|
|
7125
|
+
view = null;
|
|
7126
|
+
});
|
|
7127
|
+
return (() => {
|
|
7128
|
+
var _el$ = _tmpl$$a(), _el$2 = _el$.firstChild;
|
|
7129
|
+
var _ref$ = root;
|
|
7130
|
+
typeof _ref$ === "function" ? use(_ref$, _el$) : root = _el$;
|
|
7131
|
+
spread(_el$, mergeProps(() => props.rootProps, () => motionA11y(props.props.label, pressable()), {
|
|
7132
|
+
get style() {
|
|
7133
|
+
return mergeStyle(props.rootProps, motionBoxStyle(motionDeclaredSize(props.props), props.node.style));
|
|
7134
|
+
}
|
|
7135
|
+
}), false, true);
|
|
7136
|
+
var _ref$2 = canvas;
|
|
7137
|
+
typeof _ref$2 === "function" ? use(_ref$2, _el$2) : canvas = _el$2;
|
|
7138
|
+
effect((_$p) => style(_el$2, CANVAS_STYLE, _$p));
|
|
7139
|
+
return _el$;
|
|
7140
|
+
})();
|
|
7141
|
+
}
|
|
7142
|
+
const NATIVES_MOTION = {
|
|
7143
|
+
Motion: MotionNative
|
|
7144
|
+
};
|
|
7145
|
+
var _tmpl$$9 = /* @__PURE__ */ template(`<button type=button>`), _tmpl$2$9 = /* @__PURE__ */ template(`<div><div role=tablist aria-orientation=horizontal>`), _tmpl$3$8 = /* @__PURE__ */ template(`<button type=button role=tab><span class=xui-Tabs-tab-body><span></span></span><span>`), _tmpl$4$5 = /* @__PURE__ */ template(`<span data-count>`), _tmpl$5$5 = /* @__PURE__ */ template(`<div data-orientation=horizontal role=tabpanel tabindex=0>`), _tmpl$6$4 = /* @__PURE__ */ template(`<span>`), _tmpl$7$3 = /* @__PURE__ */ template(`<div>`), _tmpl$8$3 = /* @__PURE__ */ template(`<nav>`), _tmpl$9$3 = /* @__PURE__ */ template(`<div data-orientation=vertical><div data-orientation=vertical><button type=button><span class=xui-accordion-title></span></button></div><div role=region data-orientation=vertical>`);
|
|
7005
7146
|
const sameKeys$1 = (a, b) => a.length === b.length && a.every((x, i) => x === b[i]);
|
|
7006
7147
|
function keysOf(list, key) {
|
|
7007
7148
|
return createMemo(() => list().map(key), void 0, {
|
|
@@ -7053,7 +7194,7 @@ function TabsNative(props) {
|
|
|
7053
7194
|
onCleanup(() => cancelAnimationFrame(raf));
|
|
7054
7195
|
});
|
|
7055
7196
|
return (() => {
|
|
7056
|
-
var _el$ = _tmpl$2$
|
|
7197
|
+
var _el$ = _tmpl$2$9(), _el$2 = _el$.firstChild;
|
|
7057
7198
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
7058
7199
|
get dir() {
|
|
7059
7200
|
return ctx.direction;
|
|
@@ -7081,7 +7222,7 @@ function TabsNative(props) {
|
|
|
7081
7222
|
let el;
|
|
7082
7223
|
const item = roving.item(() => el, () => true);
|
|
7083
7224
|
const trigger = (() => {
|
|
7084
|
-
var _el$4 = _tmpl$3$
|
|
7225
|
+
var _el$4 = _tmpl$3$8(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling;
|
|
7085
7226
|
var _ref$2 = el;
|
|
7086
7227
|
typeof _ref$2 === "function" ? use(_ref$2, _el$4) : el = _el$4;
|
|
7087
7228
|
spread(_el$4, mergeProps({
|
|
@@ -7154,7 +7295,7 @@ function TabsNative(props) {
|
|
|
7154
7295
|
return closable();
|
|
7155
7296
|
},
|
|
7156
7297
|
get children() {
|
|
7157
|
-
var _el$9 = _tmpl$$
|
|
7298
|
+
var _el$9 = _tmpl$$9();
|
|
7158
7299
|
spread(_el$9, mergeProps(() => part.at(`close`, index(), lent()?.index === index() && lent().state), {
|
|
7159
7300
|
get ["aria-label"]() {
|
|
7160
7301
|
return ctx.t(`closeTab`, {
|
|
@@ -7180,7 +7321,7 @@ function TabsNative(props) {
|
|
|
7180
7321
|
return bool(props.props.addable);
|
|
7181
7322
|
},
|
|
7182
7323
|
get children() {
|
|
7183
|
-
var _el$3 = _tmpl$$
|
|
7324
|
+
var _el$3 = _tmpl$$9();
|
|
7184
7325
|
spread(_el$3, mergeProps(() => part(`new`), {
|
|
7185
7326
|
get ["aria-label"]() {
|
|
7186
7327
|
return ctx.t(`newTab`);
|
|
@@ -7370,7 +7511,7 @@ function SegmentedNative(props) {
|
|
|
7370
7511
|
let el;
|
|
7371
7512
|
const r = roving.item(() => el, () => !disabled());
|
|
7372
7513
|
return (() => {
|
|
7373
|
-
var _el$13 = _tmpl$$
|
|
7514
|
+
var _el$13 = _tmpl$$9();
|
|
7374
7515
|
var _ref$4 = el;
|
|
7375
7516
|
typeof _ref$4 === "function" ? use(_ref$4, _el$13) : el = _el$13;
|
|
7376
7517
|
spread(_el$13, mergeProps({
|
|
@@ -7488,7 +7629,7 @@ function SegmentedBar(props) {
|
|
|
7488
7629
|
const selected = () => key === props.value();
|
|
7489
7630
|
const disabled = () => bool(item().disabled);
|
|
7490
7631
|
return (() => {
|
|
7491
|
-
var _el$15 = _tmpl$$
|
|
7632
|
+
var _el$15 = _tmpl$$9();
|
|
7492
7633
|
use((el) => void (refs[index()] = el), _el$15);
|
|
7493
7634
|
spread(_el$15, mergeProps(() => props.part(`item`, selected() && `selected`, disabled() && `disabled`), {
|
|
7494
7635
|
get disabled() {
|
|
@@ -7691,7 +7832,7 @@ const NATIVES_NAV = {
|
|
|
7691
7832
|
Segmented: SegmentedNative,
|
|
7692
7833
|
Accordion: AccordionNative
|
|
7693
7834
|
};
|
|
7694
|
-
var _tmpl$$
|
|
7835
|
+
var _tmpl$$8 = /* @__PURE__ */ template(`<span>`), _tmpl$2$8 = /* @__PURE__ */ template(`<div><div><input type=text role=combobox aria-expanded=true aria-autocomplete=list>`), _tmpl$3$7 = /* @__PURE__ */ template(`<div>`), _tmpl$4$4 = /* @__PURE__ */ template(`<div><div>`), _tmpl$5$4 = /* @__PURE__ */ template(`<div role=option>`);
|
|
7695
7836
|
function SearchBody(props) {
|
|
7696
7837
|
const ctx = useSurfaceContext();
|
|
7697
7838
|
const listId = createUniqueId();
|
|
@@ -7756,7 +7897,7 @@ function SearchBody(props) {
|
|
|
7756
7897
|
equals: (a, b) => a.length === b.length && a.every((x, i) => x === b[i])
|
|
7757
7898
|
});
|
|
7758
7899
|
return [(() => {
|
|
7759
|
-
var _el$ = _tmpl$2$
|
|
7900
|
+
var _el$ = _tmpl$2$8(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
|
|
7760
7901
|
spread(_el$, mergeProps(() => single(`head`)), false, true);
|
|
7761
7902
|
spread(_el$2, mergeProps(() => single(`search`)), false, true);
|
|
7762
7903
|
insert(_el$2, createComponent(BuiltinIcon, {
|
|
@@ -7772,7 +7913,7 @@ function SearchBody(props) {
|
|
|
7772
7913
|
return memo(() => !!props.showCount)() && props.query.trim() !== ``;
|
|
7773
7914
|
},
|
|
7774
7915
|
get children() {
|
|
7775
|
-
var _el$4 = _tmpl$$
|
|
7916
|
+
var _el$4 = _tmpl$$8();
|
|
7776
7917
|
spread(_el$4, mergeProps(() => single(`count`), {
|
|
7777
7918
|
"role": "status",
|
|
7778
7919
|
"aria-live": "polite"
|
|
@@ -7846,7 +7987,7 @@ function SearchBody(props) {
|
|
|
7846
7987
|
return item().icon;
|
|
7847
7988
|
},
|
|
7848
7989
|
get children() {
|
|
7849
|
-
var _el$0 = _tmpl$$
|
|
7990
|
+
var _el$0 = _tmpl$$8();
|
|
7850
7991
|
spread(_el$0, mergeProps(() => props.part.at(`icon`, index), {
|
|
7851
7992
|
"aria-hidden": "true"
|
|
7852
7993
|
}), false, true);
|
|
@@ -7865,13 +8006,13 @@ function SearchBody(props) {
|
|
|
7865
8006
|
return str(item().identifier);
|
|
7866
8007
|
},
|
|
7867
8008
|
get children() {
|
|
7868
|
-
var _el$1 = _tmpl$$
|
|
8009
|
+
var _el$1 = _tmpl$$8();
|
|
7869
8010
|
spread(_el$1, mergeProps(() => props.part.at(`identifier`, index)), false, true);
|
|
7870
8011
|
insert(_el$1, () => str(item().identifier));
|
|
7871
8012
|
return _el$1;
|
|
7872
8013
|
}
|
|
7873
8014
|
}), (() => {
|
|
7874
|
-
var _el$10 = _tmpl$$
|
|
8015
|
+
var _el$10 = _tmpl$$8();
|
|
7875
8016
|
spread(_el$10, mergeProps(() => props.part.at(`label`, index)), false, true);
|
|
7876
8017
|
insert(_el$10, () => str(item().label));
|
|
7877
8018
|
return _el$10;
|
|
@@ -7880,7 +8021,7 @@ function SearchBody(props) {
|
|
|
7880
8021
|
return memo(() => !!(props.picked !== void 0 && props.picked !== ``))() && item().value === props.picked;
|
|
7881
8022
|
},
|
|
7882
8023
|
get children() {
|
|
7883
|
-
var _el$11 = _tmpl$$
|
|
8024
|
+
var _el$11 = _tmpl$$8();
|
|
7884
8025
|
spread(_el$11, mergeProps(() => props.part.at(`check`, index), {
|
|
7885
8026
|
"aria-hidden": "true"
|
|
7886
8027
|
}), false, true);
|
|
@@ -7900,7 +8041,7 @@ function SearchBody(props) {
|
|
|
7900
8041
|
return props.rows.length === 0;
|
|
7901
8042
|
},
|
|
7902
8043
|
get children() {
|
|
7903
|
-
var _el$7 = _tmpl$3$
|
|
8044
|
+
var _el$7 = _tmpl$3$7();
|
|
7904
8045
|
spread(_el$7, mergeProps(() => single(`empty`)), false, true);
|
|
7905
8046
|
insert(_el$7, () => props.emptyText);
|
|
7906
8047
|
return _el$7;
|
|
@@ -7911,7 +8052,7 @@ function SearchBody(props) {
|
|
|
7911
8052
|
return memo(() => !!moreBelow())() && props.rows.length > props.maxRows;
|
|
7912
8053
|
},
|
|
7913
8054
|
get children() {
|
|
7914
|
-
var _el$8 = _tmpl$3$
|
|
8055
|
+
var _el$8 = _tmpl$3$7();
|
|
7915
8056
|
spread(_el$8, mergeProps(() => single(`fade`), {
|
|
7916
8057
|
"aria-hidden": "true"
|
|
7917
8058
|
}), false, false);
|
|
@@ -7944,7 +8085,7 @@ function SearchListNative(props) {
|
|
|
7944
8085
|
}) => hostSearches() || searchMatches(item, query())));
|
|
7945
8086
|
const maxRows = () => Math.max(1, Math.floor(num(props.props.maxRows, 8)));
|
|
7946
8087
|
return (() => {
|
|
7947
|
-
var _el$12 = _tmpl$3$
|
|
8088
|
+
var _el$12 = _tmpl$3$7();
|
|
7948
8089
|
spread(_el$12, mergeProps(() => props.rootProps), false, true);
|
|
7949
8090
|
insert(_el$12, createComponent(SearchBody, {
|
|
7950
8091
|
part,
|
|
@@ -7991,7 +8132,7 @@ const NATIVES_SEARCH = {
|
|
|
7991
8132
|
SearchList: SearchListNative
|
|
7992
8133
|
};
|
|
7993
8134
|
delegateEvents(["input", "keydown"]);
|
|
7994
|
-
var _tmpl$$
|
|
8135
|
+
var _tmpl$$7 = /* @__PURE__ */ template(`<div class=xui-overlay-body>`), _tmpl$2$7 = /* @__PURE__ */ template(`<div>`), _tmpl$3$6 = /* @__PURE__ */ template(`<div class=xui-overlay-head>`), _tmpl$4$3 = /* @__PURE__ */ template(`<h2 class=xui-sr-only>`), _tmpl$5$3 = /* @__PURE__ */ template(`<button type=button>`), _tmpl$6$3 = /* @__PURE__ */ template(`<span class=xui-trigger>`), _tmpl$7$2 = /* @__PURE__ */ template(`<h2>`), _tmpl$8$2 = /* @__PURE__ */ template(`<p>`), _tmpl$9$2 = /* @__PURE__ */ template(`<span>`), _tmpl$0$1 = /* @__PURE__ */ template(`<div><div>`), _tmpl$1$1 = /* @__PURE__ */ template(`<div role=separator aria-orientation=horizontal>`), _tmpl$10$1 = /* @__PURE__ */ template(`<div role=menuitem><span class=xui-menu-label>`), _tmpl$11$1 = /* @__PURE__ */ template(`<span data-state=checked>`), _tmpl$12$1 = /* @__PURE__ */ template(`<div role=menuitemcheckbox><span></span><span class=xui-menu-label>`), _tmpl$13$1 = /* @__PURE__ */ template(`<div role=menuitem aria-haspopup=menu><span class=xui-menu-label></span><span>`), _tmpl$14$1 = /* @__PURE__ */ template(`<div class=xui-menu-search>`), _tmpl$15 = /* @__PURE__ */ template(`<span class=xui-menu-label>`), _tmpl$16 = /* @__PURE__ */ template(`<button>`), _tmpl$17 = /* @__PURE__ */ template(`<div><span></span><div class=xui-toast-text><span>`);
|
|
7995
8136
|
const TYPE_BUTTON = {
|
|
7996
8137
|
type: `button`
|
|
7997
8138
|
};
|
|
@@ -8067,15 +8208,7 @@ function ModalNative(props) {
|
|
|
8067
8208
|
const scope = createFocusScope({
|
|
8068
8209
|
trapped: () => true,
|
|
8069
8210
|
loop: true,
|
|
8070
|
-
onMountAutoFocus:
|
|
8071
|
-
const content = e.currentTarget;
|
|
8072
|
-
const marked = content?.querySelector(`[data-xui-autofocus]`) ?? content?.querySelector(`[data-xui-part="AlertDialog/cancel"]`);
|
|
8073
|
-
const target = marked && (marked.matches(`button,input,textarea,select,a[href],[tabindex]`) ? marked : marked.querySelector(`button,input,textarea,select,a[href],[tabindex]`));
|
|
8074
|
-
if (target) {
|
|
8075
|
-
e.preventDefault();
|
|
8076
|
-
target.focus();
|
|
8077
|
-
}
|
|
8078
|
-
},
|
|
8211
|
+
onMountAutoFocus: overlayOpenFocus,
|
|
8079
8212
|
onUnmountAutoFocus: (e) => {
|
|
8080
8213
|
e.preventDefault();
|
|
8081
8214
|
triggerEl?.focus();
|
|
@@ -8083,7 +8216,7 @@ function ModalNative(props) {
|
|
|
8083
8216
|
});
|
|
8084
8217
|
const [registered, setRegistered] = createSignal(false);
|
|
8085
8218
|
const el = (() => {
|
|
8086
|
-
var _el$ = _tmpl$2$
|
|
8219
|
+
var _el$ = _tmpl$2$7();
|
|
8087
8220
|
spread(_el$, mergeProps(() => part(`content`, open() && `open`), {
|
|
8088
8221
|
get ["data-side"]() {
|
|
8089
8222
|
return memo(() => props.kind === `Drawer`)() ? side() : void 0;
|
|
@@ -8113,7 +8246,7 @@ function ModalNative(props) {
|
|
|
8113
8246
|
insert(_el$, (() => {
|
|
8114
8247
|
var _c$ = memo(() => !!(props.kind === `Drawer` && (side() === `bottom` || side() === `top`)));
|
|
8115
8248
|
return () => _c$() ? (() => {
|
|
8116
|
-
var _el$4 = _tmpl$2$
|
|
8249
|
+
var _el$4 = _tmpl$2$7();
|
|
8117
8250
|
spread(_el$4, mergeProps(() => part(`handle`), {
|
|
8118
8251
|
"aria-hidden": "true",
|
|
8119
8252
|
get onPointerDown() {
|
|
@@ -8135,7 +8268,7 @@ function ModalNative(props) {
|
|
|
8135
8268
|
insert(_el$, (() => {
|
|
8136
8269
|
var _c$2 = memo(() => !!(title() || description()));
|
|
8137
8270
|
return () => _c$2() ? memo(() => props.kind === `Drawer`)() ? (() => {
|
|
8138
|
-
var _el$5 = _tmpl$3$
|
|
8271
|
+
var _el$5 = _tmpl$3$6();
|
|
8139
8272
|
addEventListener(_el$5, "pointercancel", drag.onPointerCancel);
|
|
8140
8273
|
addEventListener(_el$5, "pointerup", drag.onPointerUp, true);
|
|
8141
8274
|
addEventListener(_el$5, "pointermove", drag.onPointerMove, true);
|
|
@@ -8156,7 +8289,7 @@ function ModalNative(props) {
|
|
|
8156
8289
|
}));
|
|
8157
8290
|
return _el$5;
|
|
8158
8291
|
})() : (() => {
|
|
8159
|
-
var _el$6 = _tmpl$3$
|
|
8292
|
+
var _el$6 = _tmpl$3$6();
|
|
8160
8293
|
insert(_el$6, createComponent(ModalHead, {
|
|
8161
8294
|
part,
|
|
8162
8295
|
get title() {
|
|
@@ -8188,7 +8321,7 @@ function ModalNative(props) {
|
|
|
8188
8321
|
},
|
|
8189
8322
|
get children() {
|
|
8190
8323
|
return [(() => {
|
|
8191
|
-
var _el$2 = _tmpl$$
|
|
8324
|
+
var _el$2 = _tmpl$$7();
|
|
8192
8325
|
insert(_el$2, () => props.children);
|
|
8193
8326
|
return _el$2;
|
|
8194
8327
|
})(), createComponent(Show, {
|
|
@@ -8196,7 +8329,7 @@ function ModalNative(props) {
|
|
|
8196
8329
|
return props.node.slots?.footer;
|
|
8197
8330
|
},
|
|
8198
8331
|
get children() {
|
|
8199
|
-
var _el$3 = _tmpl$2$
|
|
8332
|
+
var _el$3 = _tmpl$2$7();
|
|
8200
8333
|
spread(_el$3, mergeProps(() => part(`footer`)), false, true);
|
|
8201
8334
|
insert(_el$3, () => props.slots.footer);
|
|
8202
8335
|
return _el$3;
|
|
@@ -8240,7 +8373,7 @@ function ModalNative(props) {
|
|
|
8240
8373
|
};
|
|
8241
8374
|
const Overlay = () => {
|
|
8242
8375
|
const el = (() => {
|
|
8243
|
-
var _el$9 = _tmpl$2$
|
|
8376
|
+
var _el$9 = _tmpl$2$7();
|
|
8244
8377
|
spread(_el$9, mergeProps(() => part(`overlay`, open() && `open`), {
|
|
8245
8378
|
get ["data-xui-overlay-backdrop"]() {
|
|
8246
8379
|
return props.kind;
|
|
@@ -8259,7 +8392,7 @@ function ModalNative(props) {
|
|
|
8259
8392
|
return el;
|
|
8260
8393
|
};
|
|
8261
8394
|
return [(() => {
|
|
8262
|
-
var _el$0 = _tmpl$2$
|
|
8395
|
+
var _el$0 = _tmpl$2$7();
|
|
8263
8396
|
spread(_el$0, mergeProps(() => overlayRootProps(props.rootProps, hasTrigger(), props.node.slots?.trigger)), false, true);
|
|
8264
8397
|
insert(_el$0, createComponent(Show, {
|
|
8265
8398
|
get when() {
|
|
@@ -8407,7 +8540,7 @@ function PopoverNative(props) {
|
|
|
8407
8540
|
},
|
|
8408
8541
|
children: (popper) => {
|
|
8409
8542
|
const el = (() => {
|
|
8410
|
-
var _el$13 = _tmpl$2$
|
|
8543
|
+
var _el$13 = _tmpl$2$7();
|
|
8411
8544
|
spread(_el$13, mergeProps(() => part(`content`, open() && `open`), {
|
|
8412
8545
|
get ["data-side"]() {
|
|
8413
8546
|
return popper.placedSide();
|
|
@@ -8464,7 +8597,7 @@ function PopoverNative(props) {
|
|
|
8464
8597
|
});
|
|
8465
8598
|
};
|
|
8466
8599
|
return [(() => {
|
|
8467
|
-
var _el$14 = _tmpl$2$
|
|
8600
|
+
var _el$14 = _tmpl$2$7();
|
|
8468
8601
|
spread(_el$14, mergeProps(() => overlayRootProps(props.rootProps, hasTrigger(), props.node.slots?.trigger)), false, true);
|
|
8469
8602
|
insert(_el$14, createComponent(Show, {
|
|
8470
8603
|
get when() {
|
|
@@ -8621,7 +8754,7 @@ function TooltipNative(props) {
|
|
|
8621
8754
|
collisionPadding: OVERLAY_PADDING,
|
|
8622
8755
|
children: (popper) => {
|
|
8623
8756
|
const el = (() => {
|
|
8624
|
-
var _el$17 = _tmpl$2$
|
|
8757
|
+
var _el$17 = _tmpl$2$7();
|
|
8625
8758
|
spread(_el$17, mergeProps(() => part(`content`), {
|
|
8626
8759
|
get ["data-side"]() {
|
|
8627
8760
|
return popper.placedSide();
|
|
@@ -8760,7 +8893,7 @@ function MenuSeparator(props) {
|
|
|
8760
8893
|
}
|
|
8761
8894
|
function MenuLabel(props) {
|
|
8762
8895
|
return (() => {
|
|
8763
|
-
var _el$21 = _tmpl$2$
|
|
8896
|
+
var _el$21 = _tmpl$2$7();
|
|
8764
8897
|
spread(_el$21, mergeProps(() => props.root.part(`label`)), false, true);
|
|
8765
8898
|
insert(_el$21, () => str(props.item.label));
|
|
8766
8899
|
return _el$21;
|
|
@@ -9168,7 +9301,7 @@ function MenuSearch(props) {
|
|
|
9168
9301
|
}
|
|
9169
9302
|
})));
|
|
9170
9303
|
return (() => {
|
|
9171
|
-
var _el$32 = _tmpl$14();
|
|
9304
|
+
var _el$32 = _tmpl$14$1();
|
|
9172
9305
|
_el$32.addEventListener("pointerenter", (e) => {
|
|
9173
9306
|
const input = e.currentTarget.querySelector(`input`);
|
|
9174
9307
|
if (input && !e.currentTarget.contains(document.activeElement)) input.focus({
|
|
@@ -9275,15 +9408,116 @@ function createMenuRoot(props, part, close, openOn) {
|
|
|
9275
9408
|
function PressMenuOpening(props) {
|
|
9276
9409
|
const ctx = useSurfaceContext();
|
|
9277
9410
|
const part = parts(props);
|
|
9278
|
-
const items = () => objects(props.props.items);
|
|
9279
9411
|
const label = () => str(props.props.label);
|
|
9280
9412
|
const icon = () => str(props.props.icon);
|
|
9281
9413
|
const [open, setOpen] = createSignal(false);
|
|
9282
9414
|
const hasChild = () => props.node.children.length > 0;
|
|
9415
|
+
return createComponent(PressMenu, {
|
|
9416
|
+
part,
|
|
9417
|
+
get emit() {
|
|
9418
|
+
return props.emit;
|
|
9419
|
+
},
|
|
9420
|
+
get scope() {
|
|
9421
|
+
return props.scope;
|
|
9422
|
+
},
|
|
9423
|
+
get items() {
|
|
9424
|
+
return objects(props.props.items);
|
|
9425
|
+
},
|
|
9426
|
+
get raws() {
|
|
9427
|
+
return objects(props.node.props.items);
|
|
9428
|
+
},
|
|
9429
|
+
open,
|
|
9430
|
+
setOpen,
|
|
9431
|
+
trigger: (t) => (() => {
|
|
9432
|
+
var _el$34 = _tmpl$2$7();
|
|
9433
|
+
spread(_el$34, mergeProps(() => overlayRootProps(props.rootProps, true, props.node.children[0] ?? null)), false, true);
|
|
9434
|
+
insert(_el$34, createComponent(Show, {
|
|
9435
|
+
get when() {
|
|
9436
|
+
return hasChild();
|
|
9437
|
+
},
|
|
9438
|
+
get fallback() {
|
|
9439
|
+
return (
|
|
9440
|
+
// Round 2 §7: the default trigger = an outline button with the
|
|
9441
|
+
// icon (when set) and the label (`$string.menu` without one and
|
|
9442
|
+
// without an icon), no chevron.
|
|
9443
|
+
(() => {
|
|
9444
|
+
var _el$36 = _tmpl$16();
|
|
9445
|
+
var _ref$7 = t.ref;
|
|
9446
|
+
typeof _ref$7 === "function" ? use(_ref$7, _el$36) : t.ref = _el$36;
|
|
9447
|
+
spread(_el$36, mergeProps(() => t.attrs(), () => part(`trigger`, open() && `open`), {
|
|
9448
|
+
get ["aria-label"]() {
|
|
9449
|
+
return label() || ctx.t(`menu`);
|
|
9450
|
+
},
|
|
9451
|
+
get onPointerDown() {
|
|
9452
|
+
return t.onPointerDown;
|
|
9453
|
+
},
|
|
9454
|
+
get onKeyDown() {
|
|
9455
|
+
return t.onKeyDown;
|
|
9456
|
+
}
|
|
9457
|
+
}), false, true);
|
|
9458
|
+
insert(_el$36, (() => {
|
|
9459
|
+
var _c$4 = memo(() => !!icon());
|
|
9460
|
+
return () => _c$4() ? createComponent(IconGlyph, {
|
|
9461
|
+
get icons() {
|
|
9462
|
+
return ctx.host.icons;
|
|
9463
|
+
},
|
|
9464
|
+
get name() {
|
|
9465
|
+
return icon();
|
|
9466
|
+
},
|
|
9467
|
+
"class": "xui-icon",
|
|
9468
|
+
width: 16,
|
|
9469
|
+
height: 16
|
|
9470
|
+
}) : null;
|
|
9471
|
+
})(), null);
|
|
9472
|
+
insert(_el$36, (() => {
|
|
9473
|
+
var _c$5 = memo(() => !!(label() || !icon()));
|
|
9474
|
+
return () => _c$5() ? (() => {
|
|
9475
|
+
var _el$37 = _tmpl$9$2();
|
|
9476
|
+
insert(_el$37, () => label() || ctx.t(`menu`));
|
|
9477
|
+
return _el$37;
|
|
9478
|
+
})() : null;
|
|
9479
|
+
})(), null);
|
|
9480
|
+
return _el$36;
|
|
9481
|
+
})()
|
|
9482
|
+
);
|
|
9483
|
+
},
|
|
9484
|
+
get children() {
|
|
9485
|
+
var _el$35 = _tmpl$6$3();
|
|
9486
|
+
var _ref$6 = t.ref;
|
|
9487
|
+
typeof _ref$6 === "function" ? use(_ref$6, _el$35) : t.ref = _el$35;
|
|
9488
|
+
spread(_el$35, mergeProps(() => t.attrs(), {
|
|
9489
|
+
get onPointerDown() {
|
|
9490
|
+
return t.onPointerDown;
|
|
9491
|
+
},
|
|
9492
|
+
get onKeyDown() {
|
|
9493
|
+
return t.onKeyDown;
|
|
9494
|
+
}
|
|
9495
|
+
}), false, true);
|
|
9496
|
+
insert(_el$35, () => props.children);
|
|
9497
|
+
return _el$35;
|
|
9498
|
+
}
|
|
9499
|
+
}));
|
|
9500
|
+
return _el$34;
|
|
9501
|
+
})()
|
|
9502
|
+
});
|
|
9503
|
+
}
|
|
9504
|
+
function PressMenu(props) {
|
|
9505
|
+
const ctx = useSurfaceContext();
|
|
9506
|
+
const open = () => props.open();
|
|
9507
|
+
const setOpen = (next) => props.setOpen(next);
|
|
9283
9508
|
const triggerId = createUniqueId();
|
|
9284
9509
|
const contentId = createUniqueId();
|
|
9285
9510
|
const [trigger, setTrigger] = createSignal();
|
|
9286
|
-
|
|
9511
|
+
useKeyboardTracking();
|
|
9512
|
+
const root = {
|
|
9513
|
+
close: () => setOpen(false),
|
|
9514
|
+
dir: () => ctx.direction,
|
|
9515
|
+
overlay: `Menu`,
|
|
9516
|
+
openOn: `press`,
|
|
9517
|
+
part: props.part,
|
|
9518
|
+
emit: props.emit,
|
|
9519
|
+
scope: () => props.scope
|
|
9520
|
+
};
|
|
9287
9521
|
const presence = createPresence(open);
|
|
9288
9522
|
let interactedOutside = false;
|
|
9289
9523
|
const triggerAttrs2 = () => ({
|
|
@@ -9309,67 +9543,12 @@ function PressMenuOpening(props) {
|
|
|
9309
9543
|
return createComponent(MenuRootContext.Provider, {
|
|
9310
9544
|
value: root,
|
|
9311
9545
|
get children() {
|
|
9312
|
-
return [(() => {
|
|
9313
|
-
|
|
9314
|
-
|
|
9315
|
-
|
|
9316
|
-
|
|
9317
|
-
|
|
9318
|
-
},
|
|
9319
|
-
get fallback() {
|
|
9320
|
-
return (
|
|
9321
|
-
// Round 2 §7: the default trigger = an outline button with the
|
|
9322
|
-
// icon (when set) and the label (`$string.menu` without one and
|
|
9323
|
-
// without an icon), no chevron.
|
|
9324
|
-
(() => {
|
|
9325
|
-
var _el$36 = _tmpl$16();
|
|
9326
|
-
use(setTrigger, _el$36);
|
|
9327
|
-
spread(_el$36, mergeProps(triggerAttrs2, () => part(`trigger`, open() && `open`), {
|
|
9328
|
-
get ["aria-label"]() {
|
|
9329
|
-
return label() || ctx.t(`menu`);
|
|
9330
|
-
},
|
|
9331
|
-
"onPointerDown": onPointerDown,
|
|
9332
|
-
"onKeyDown": onKeyDown
|
|
9333
|
-
}), false, true);
|
|
9334
|
-
insert(_el$36, (() => {
|
|
9335
|
-
var _c$4 = memo(() => !!icon());
|
|
9336
|
-
return () => _c$4() ? createComponent(IconGlyph, {
|
|
9337
|
-
get icons() {
|
|
9338
|
-
return ctx.host.icons;
|
|
9339
|
-
},
|
|
9340
|
-
get name() {
|
|
9341
|
-
return icon();
|
|
9342
|
-
},
|
|
9343
|
-
"class": "xui-icon",
|
|
9344
|
-
width: 16,
|
|
9345
|
-
height: 16
|
|
9346
|
-
}) : null;
|
|
9347
|
-
})(), null);
|
|
9348
|
-
insert(_el$36, (() => {
|
|
9349
|
-
var _c$5 = memo(() => !!(label() || !icon()));
|
|
9350
|
-
return () => _c$5() ? (() => {
|
|
9351
|
-
var _el$37 = _tmpl$9$2();
|
|
9352
|
-
insert(_el$37, () => label() || ctx.t(`menu`));
|
|
9353
|
-
return _el$37;
|
|
9354
|
-
})() : null;
|
|
9355
|
-
})(), null);
|
|
9356
|
-
return _el$36;
|
|
9357
|
-
})()
|
|
9358
|
-
);
|
|
9359
|
-
},
|
|
9360
|
-
get children() {
|
|
9361
|
-
var _el$35 = _tmpl$6$3();
|
|
9362
|
-
use(setTrigger, _el$35);
|
|
9363
|
-
spread(_el$35, mergeProps(triggerAttrs2, {
|
|
9364
|
-
"onPointerDown": onPointerDown,
|
|
9365
|
-
"onKeyDown": onKeyDown
|
|
9366
|
-
}), false, true);
|
|
9367
|
-
insert(_el$35, () => props.children);
|
|
9368
|
-
return _el$35;
|
|
9369
|
-
}
|
|
9370
|
-
}));
|
|
9371
|
-
return _el$34;
|
|
9372
|
-
})(), createComponent(LayerPortal, {
|
|
9546
|
+
return [memo(() => props.trigger({
|
|
9547
|
+
ref: setTrigger,
|
|
9548
|
+
attrs: triggerAttrs2,
|
|
9549
|
+
onPointerDown,
|
|
9550
|
+
onKeyDown
|
|
9551
|
+
})), createComponent(LayerPortal, {
|
|
9373
9552
|
get mount() {
|
|
9374
9553
|
return ctx.portal;
|
|
9375
9554
|
},
|
|
@@ -9383,8 +9562,12 @@ function PressMenuOpening(props) {
|
|
|
9383
9562
|
get anchor() {
|
|
9384
9563
|
return trigger();
|
|
9385
9564
|
},
|
|
9386
|
-
side
|
|
9387
|
-
|
|
9565
|
+
get side() {
|
|
9566
|
+
return props.side ?? `bottom`;
|
|
9567
|
+
},
|
|
9568
|
+
get align() {
|
|
9569
|
+
return props.align ?? `start`;
|
|
9570
|
+
},
|
|
9388
9571
|
sideOffset: OVERLAY_OFFSET,
|
|
9389
9572
|
get dir() {
|
|
9390
9573
|
return root.dir();
|
|
@@ -9397,7 +9580,7 @@ function PressMenuOpening(props) {
|
|
|
9397
9580
|
labelledBy: triggerId,
|
|
9398
9581
|
state: () => open() ? `open` : `closed`,
|
|
9399
9582
|
attrs: () => ({
|
|
9400
|
-
...part(`content`, open() && `open`),
|
|
9583
|
+
...props.part(`content`, open() && `open`),
|
|
9401
9584
|
"data-xui-overlay": `Menu`,
|
|
9402
9585
|
"data-open-on": `press`
|
|
9403
9586
|
}),
|
|
@@ -9416,10 +9599,10 @@ function PressMenuOpening(props) {
|
|
|
9416
9599
|
get children() {
|
|
9417
9600
|
return createComponent(MenuEntries, {
|
|
9418
9601
|
get items() {
|
|
9419
|
-
return items
|
|
9602
|
+
return props.items;
|
|
9420
9603
|
},
|
|
9421
9604
|
get raws() {
|
|
9422
|
-
return
|
|
9605
|
+
return props.raws;
|
|
9423
9606
|
},
|
|
9424
9607
|
path: ""
|
|
9425
9608
|
});
|
|
@@ -9464,7 +9647,7 @@ function ContextMenuOpening(props) {
|
|
|
9464
9647
|
value: root,
|
|
9465
9648
|
get children() {
|
|
9466
9649
|
return [(() => {
|
|
9467
|
-
var _el$38 = _tmpl$2$
|
|
9650
|
+
var _el$38 = _tmpl$2$7();
|
|
9468
9651
|
spread(_el$38, mergeProps(() => props.rootProps, {
|
|
9469
9652
|
get ["data-state"]() {
|
|
9470
9653
|
return open() ? `open` : `closed`;
|
|
@@ -9683,7 +9866,7 @@ const NATIVES_OVERLAYS = {
|
|
|
9683
9866
|
Toast: ToastNative
|
|
9684
9867
|
};
|
|
9685
9868
|
delegateEvents(["pointerdown", "pointermove", "pointerup"]);
|
|
9686
|
-
var _tmpl$$
|
|
9869
|
+
var _tmpl$$6 = /* @__PURE__ */ template(`<svg shape-rendering=crispEdges aria-hidden=true><path>`), _tmpl$2$6 = /* @__PURE__ */ template(`<span>`), _tmpl$3$5 = /* @__PURE__ */ template(`<div><span>`), _tmpl$4$2 = /* @__PURE__ */ template(`<div><div><span>`), _tmpl$5$2 = /* @__PURE__ */ template(`<svg><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round>`), _tmpl$6$2 = /* @__PURE__ */ template(`<span><span></span><span>`);
|
|
9687
9870
|
const UNFOCUSABLE = {
|
|
9688
9871
|
focusable: `false`
|
|
9689
9872
|
};
|
|
@@ -9708,7 +9891,7 @@ function QrCodeNative(props) {
|
|
|
9708
9891
|
const paint = createMemo(() => qrPaint(str(props.props.value), str(props.props.level, `M`), plateColour(), moduleColour()));
|
|
9709
9892
|
const label = () => str(props.props.label);
|
|
9710
9893
|
return (() => {
|
|
9711
|
-
var _el$ = _tmpl$3$
|
|
9894
|
+
var _el$ = _tmpl$3$5(), _el$2 = _el$.firstChild;
|
|
9712
9895
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
9713
9896
|
get role() {
|
|
9714
9897
|
return label() ? `img` : void 0;
|
|
@@ -9737,7 +9920,7 @@ function QrCodeNative(props) {
|
|
|
9737
9920
|
return paint().matrix;
|
|
9738
9921
|
},
|
|
9739
9922
|
get children() {
|
|
9740
|
-
var _el$3 = _tmpl$$
|
|
9923
|
+
var _el$3 = _tmpl$$6(), _el$4 = _el$3.firstChild;
|
|
9741
9924
|
spread(_el$3, mergeProps({
|
|
9742
9925
|
get viewBox() {
|
|
9743
9926
|
return `0 0 ${paint().modules} ${paint().modules}`;
|
|
@@ -9765,7 +9948,7 @@ function QrCodeNative(props) {
|
|
|
9765
9948
|
return label();
|
|
9766
9949
|
},
|
|
9767
9950
|
get children() {
|
|
9768
|
-
var _el$5 = _tmpl$2$
|
|
9951
|
+
var _el$5 = _tmpl$2$6();
|
|
9769
9952
|
spread(_el$5, mergeProps(() => part(`label`), {
|
|
9770
9953
|
"aria-hidden": "true"
|
|
9771
9954
|
}), false, true);
|
|
@@ -9894,7 +10077,7 @@ function QrScannerNative(props) {
|
|
|
9894
10077
|
})();
|
|
9895
10078
|
},
|
|
9896
10079
|
get children() {
|
|
9897
|
-
var _el$9 = _tmpl$2$
|
|
10080
|
+
var _el$9 = _tmpl$2$6();
|
|
9898
10081
|
spread(_el$9, mergeProps(() => part(`scanLine`), {
|
|
9899
10082
|
"aria-hidden": "true"
|
|
9900
10083
|
}), false, false);
|
|
@@ -9906,7 +10089,7 @@ function QrScannerNative(props) {
|
|
|
9906
10089
|
return hint();
|
|
9907
10090
|
},
|
|
9908
10091
|
get children() {
|
|
9909
|
-
var _el$0 = _tmpl$2$
|
|
10092
|
+
var _el$0 = _tmpl$2$6();
|
|
9910
10093
|
spread(_el$0, mergeProps(() => part(`hint`)), false, true);
|
|
9911
10094
|
insert(_el$0, hint);
|
|
9912
10095
|
return _el$0;
|
|
@@ -9919,7 +10102,7 @@ const NATIVES_QR = {
|
|
|
9919
10102
|
QrCode: QrCodeNative,
|
|
9920
10103
|
QrScanner: QrScannerNative
|
|
9921
10104
|
};
|
|
9922
|
-
var _tmpl$$
|
|
10105
|
+
var _tmpl$$5 = /* @__PURE__ */ template(`<div>`), _tmpl$2$5 = /* @__PURE__ */ template(`<div><span class=xui-resize-hit aria-hidden=true>`), _tmpl$3$4 = /* @__PURE__ */ template(`<span>`);
|
|
9923
10106
|
const RESIZE_KEYS = /* @__PURE__ */ new Set([`ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`, `Home`, `End`, `Enter`]);
|
|
9924
10107
|
const sameKeys = (a, b) => a.length === b.length && a.every((x, i) => x === b[i]);
|
|
9925
10108
|
function ResizableNative(props) {
|
|
@@ -9994,7 +10177,7 @@ function ResizableNative(props) {
|
|
|
9994
10177
|
equals: sameKeys
|
|
9995
10178
|
});
|
|
9996
10179
|
return (() => {
|
|
9997
|
-
var _el$ = _tmpl$$
|
|
10180
|
+
var _el$ = _tmpl$$5();
|
|
9998
10181
|
var _ref$ = rootEl;
|
|
9999
10182
|
typeof _ref$ === "function" ? use(_ref$, _el$) : rootEl = _el$;
|
|
10000
10183
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
@@ -10017,7 +10200,7 @@ function ResizableNative(props) {
|
|
|
10017
10200
|
const lim = () => limits()[index()] ?? {};
|
|
10018
10201
|
const active = () => live() !== null && drag?.handle === index();
|
|
10019
10202
|
return [(() => {
|
|
10020
|
-
var _el$2 = _tmpl$$
|
|
10203
|
+
var _el$2 = _tmpl$$5();
|
|
10021
10204
|
spread(_el$2, mergeProps(() => part.at(`panel`, index()), {
|
|
10022
10205
|
get id() {
|
|
10023
10206
|
return panelId();
|
|
@@ -10042,7 +10225,7 @@ function ResizableNative(props) {
|
|
|
10042
10225
|
return index() < count() - 1;
|
|
10043
10226
|
},
|
|
10044
10227
|
get children() {
|
|
10045
|
-
var _el$3 = _tmpl$2$
|
|
10228
|
+
var _el$3 = _tmpl$2$5(), _el$4 = _el$3.firstChild;
|
|
10046
10229
|
spread(_el$3, mergeProps(() => part.at(`handle`, index(), active() && `pressed`), {
|
|
10047
10230
|
"role": "separator",
|
|
10048
10231
|
"tabindex": 0,
|
|
@@ -10073,7 +10256,7 @@ function ResizableNative(props) {
|
|
|
10073
10256
|
insert(_el$3, (() => {
|
|
10074
10257
|
var _c$ = memo(() => !!bool(props.props.handle));
|
|
10075
10258
|
return () => _c$() ? (() => {
|
|
10076
|
-
var _el$5 = _tmpl$3$
|
|
10259
|
+
var _el$5 = _tmpl$3$4();
|
|
10077
10260
|
spread(_el$5, mergeProps(() => part.at(`grip`, index()), {
|
|
10078
10261
|
"aria-hidden": "true"
|
|
10079
10262
|
}), false, false);
|
|
@@ -10096,7 +10279,7 @@ function ResizableNative(props) {
|
|
|
10096
10279
|
const NATIVES_RESIZABLE = {
|
|
10097
10280
|
Resizable: ResizableNative
|
|
10098
10281
|
};
|
|
10099
|
-
var _tmpl$$
|
|
10282
|
+
var _tmpl$$4 = /* @__PURE__ */ template(`<div>`), _tmpl$2$4 = /* @__PURE__ */ template(`<button type=button role=combobox aria-autocomplete=none><span>`), _tmpl$3$3 = /* @__PURE__ */ template(`<span>`), _tmpl$4$1 = /* @__PURE__ */ template(`<div role=listbox data-state=open tabindex=-1><style>[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-select-viewport role=presentation>`), _tmpl$5$1 = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$6$1 = /* @__PURE__ */ template(`<div role=option><span>`), _tmpl$7$1 = /* @__PURE__ */ template(`<button type=button aria-haspopup=listbox><span>`), _tmpl$8$1 = /* @__PURE__ */ template(`<div data-state=open role=dialog><div role=listbox class=xui-Select-listbox>`), _tmpl$9$1 = /* @__PURE__ */ template(`<div class=xui-Select-searchbox><input>`);
|
|
10100
10283
|
const asList = (raw) => Array.isArray(raw) ? raw.map(String) : raw === void 0 || raw === null || raw === `` ? [] : String(raw).split(`,`);
|
|
10101
10284
|
function SelectNative(props) {
|
|
10102
10285
|
const part = parts(props);
|
|
@@ -10186,7 +10369,7 @@ function SelectNative(props) {
|
|
|
10186
10369
|
field: f
|
|
10187
10370
|
};
|
|
10188
10371
|
return (() => {
|
|
10189
|
-
var _el$ = _tmpl$$
|
|
10372
|
+
var _el$ = _tmpl$$4();
|
|
10190
10373
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
10191
10374
|
get ["data-source"]() {
|
|
10192
10375
|
return source() || void 0;
|
|
@@ -10268,7 +10451,7 @@ function PlainSelect(props) {
|
|
|
10268
10451
|
};
|
|
10269
10452
|
const optionKey = createMemo(() => s.options().map((o) => o.value).join(`;`));
|
|
10270
10453
|
return [(() => {
|
|
10271
|
-
var _el$2 = _tmpl$2$
|
|
10454
|
+
var _el$2 = _tmpl$2$4(), _el$3 = _el$2.firstChild;
|
|
10272
10455
|
var _ref$ = s.setTrigger;
|
|
10273
10456
|
typeof _ref$ === "function" ? use(_ref$, _el$2) : s.setTrigger = _el$2;
|
|
10274
10457
|
setAttribute(_el$2, "aria-controls", contentId);
|
|
@@ -10328,14 +10511,14 @@ function PlainSelect(props) {
|
|
|
10328
10511
|
insert(_el$3, (() => {
|
|
10329
10512
|
var _c$ = memo(() => !!chosen());
|
|
10330
10513
|
return () => _c$() ? (() => {
|
|
10331
|
-
var _el$4 = _tmpl$3$
|
|
10514
|
+
var _el$4 = _tmpl$3$3();
|
|
10332
10515
|
insert(_el$4, () => str(chosen().label));
|
|
10333
10516
|
effect((_$p) => style(_el$4, css({
|
|
10334
10517
|
pointerEvents: `none`
|
|
10335
10518
|
}), _$p));
|
|
10336
10519
|
return _el$4;
|
|
10337
10520
|
})() : (() => {
|
|
10338
|
-
var _el$5 = _tmpl$3$
|
|
10521
|
+
var _el$5 = _tmpl$3$3();
|
|
10339
10522
|
spread(_el$5, mergeProps(() => part(`placeholder`)), false, true);
|
|
10340
10523
|
insert(_el$5, () => s.placeholder());
|
|
10341
10524
|
return _el$5;
|
|
@@ -10538,7 +10721,7 @@ function PlainSelectContent(props) {
|
|
|
10538
10721
|
insert(_el$8, (() => {
|
|
10539
10722
|
var _c$2 = memo(() => s.options().length === 0);
|
|
10540
10723
|
return () => _c$2() ? (() => {
|
|
10541
|
-
var _el$9 = _tmpl$$
|
|
10724
|
+
var _el$9 = _tmpl$$4();
|
|
10542
10725
|
spread(_el$9, mergeProps(() => part(`empty`)), false, true);
|
|
10543
10726
|
insert(_el$9, () => props.emptyText || ctx.t(`noResults`));
|
|
10544
10727
|
return _el$9;
|
|
@@ -10740,7 +10923,7 @@ function Combobox(props) {
|
|
|
10740
10923
|
insert(_el$12, (() => {
|
|
10741
10924
|
var _c$4 = memo(() => !!chosen().length);
|
|
10742
10925
|
return () => _c$4() ? chosen().map((o) => str(o.label)).join(`, `) : (() => {
|
|
10743
|
-
var _el$13 = _tmpl$3$
|
|
10926
|
+
var _el$13 = _tmpl$3$3();
|
|
10744
10927
|
spread(_el$13, mergeProps(() => part(`placeholder`)), false, true);
|
|
10745
10928
|
insert(_el$13, () => s.placeholder());
|
|
10746
10929
|
return _el$13;
|
|
@@ -10879,7 +11062,7 @@ function ComboboxContent(props) {
|
|
|
10879
11062
|
insert(_el$15, (() => {
|
|
10880
11063
|
var _c$6 = memo(() => props.shown().length === 0);
|
|
10881
11064
|
return () => _c$6() ? (() => {
|
|
10882
|
-
var _el$18 = _tmpl$$
|
|
11065
|
+
var _el$18 = _tmpl$$4();
|
|
10883
11066
|
spread(_el$18, mergeProps(() => part(`empty`)), false, true);
|
|
10884
11067
|
insert(_el$18, () => props.emptyText || ctx.t(`noResults`));
|
|
10885
11068
|
return _el$18;
|
|
@@ -10927,7 +11110,7 @@ function ComboboxContent(props) {
|
|
|
10927
11110
|
insert(_el$19, (() => {
|
|
10928
11111
|
var _c$8 = memo(() => !!isSel());
|
|
10929
11112
|
return () => _c$8() ? (() => {
|
|
10930
|
-
var _el$21 = _tmpl$3$
|
|
11113
|
+
var _el$21 = _tmpl$3$3();
|
|
10931
11114
|
spread(_el$21, mergeProps(() => part(`check`), {
|
|
10932
11115
|
get ["class"]() {
|
|
10933
11116
|
return `${part(`check`).class} xui-Select-check`;
|
|
@@ -10973,7 +11156,7 @@ const NATIVES_SELECT = {
|
|
|
10973
11156
|
Select: SelectNative
|
|
10974
11157
|
};
|
|
10975
11158
|
delegateEvents(["keydown"]);
|
|
10976
|
-
var _tmpl$$
|
|
11159
|
+
var _tmpl$$3 = /* @__PURE__ */ template(`<span class=xui-Checkbox-check>`), _tmpl$2$3 = /* @__PURE__ */ template(`<button>`), _tmpl$3$2 = /* @__PURE__ */ template(`<input type=checkbox aria-hidden=true value=on tabindex=-1>`), _tmpl$4 = /* @__PURE__ */ template(`<span class=xui-sr-only>—`), _tmpl$5 = /* @__PURE__ */ template(`<span data-xui-part=Badge/root data-m-variant=secondary><span data-xui-part=Badge/label data-m-variant=secondary>`), _tmpl$6 = /* @__PURE__ */ template(`<div role=gridcell class=xui-table-check>`), _tmpl$7 = /* @__PURE__ */ template(`<div role=row>`), _tmpl$8 = /* @__PURE__ */ template(`<div>`), _tmpl$9 = /* @__PURE__ */ template(`<span class=xui-table-text>`), _tmpl$0 = /* @__PURE__ */ template(`<div role=columnheader class=xui-table-check>`), _tmpl$1 = /* @__PURE__ */ template(`<span class=xui-sr-only aria-live=polite>`), _tmpl$10 = /* @__PURE__ */ template(`<div><div role=rowgroup><div role=row aria-rowindex=1 class=xui-table-row></div></div><div role=rowgroup>`), _tmpl$11 = /* @__PURE__ */ template(`<button type=button class=xui-table-sort><span></span><span>`), _tmpl$12 = /* @__PURE__ */ template(`<div role=columnheader>`), _tmpl$13 = /* @__PURE__ */ template(`<span>`), _tmpl$14 = /* @__PURE__ */ template(`<div role=row><div role=cell>`);
|
|
10977
11160
|
const CURRENCY_CODE = /^[A-Za-z]{3}$/;
|
|
10978
11161
|
const cellNumber = (v) => typeof v === `number` ? v : typeof v === `string` && v.trim() !== `` ? Number(v) : NaN;
|
|
10979
11162
|
const checkState = (c) => c === `indeterminate` ? `indeterminate` : c ? `checked` : `unchecked`;
|
|
@@ -10991,7 +11174,7 @@ function TableCheckbox(props) {
|
|
|
10991
11174
|
});
|
|
10992
11175
|
const state = () => checkState(props.checked);
|
|
10993
11176
|
return [(() => {
|
|
10994
|
-
var _el$ = _tmpl$2$
|
|
11177
|
+
var _el$ = _tmpl$2$3();
|
|
10995
11178
|
var _ref$ = button;
|
|
10996
11179
|
typeof _ref$ === "function" ? use(_ref$, _el$) : button = _el$;
|
|
10997
11180
|
spread(_el$, mergeProps(() => props.attrs, {
|
|
@@ -11025,7 +11208,7 @@ function TableCheckbox(props) {
|
|
|
11025
11208
|
return props.checked !== false;
|
|
11026
11209
|
},
|
|
11027
11210
|
get children() {
|
|
11028
|
-
var _el$2 = _tmpl$$
|
|
11211
|
+
var _el$2 = _tmpl$$3();
|
|
11029
11212
|
insert(_el$2, createComponent(BuiltinIcon, {
|
|
11030
11213
|
slot: "Checkbox.check"
|
|
11031
11214
|
}));
|
|
@@ -11049,7 +11232,7 @@ function TableCheckbox(props) {
|
|
|
11049
11232
|
return inForm();
|
|
11050
11233
|
},
|
|
11051
11234
|
get children() {
|
|
11052
|
-
var _el$3 = _tmpl$3$
|
|
11235
|
+
var _el$3 = _tmpl$3$2();
|
|
11053
11236
|
setAttribute(_el$3, "checked", initial ? `` : void 0);
|
|
11054
11237
|
effect((_$p) => style(_el$3, css({
|
|
11055
11238
|
...size2() ?? {},
|
|
@@ -11087,7 +11270,8 @@ function TableNative(props) {
|
|
|
11087
11270
|
const s = sort();
|
|
11088
11271
|
return sortBound() ? rows().map((_, i) => i) : sortRows(rows(), s, columns().find((c) => c.key === s?.key), ctx.locale);
|
|
11089
11272
|
});
|
|
11090
|
-
const template2 = createMemo(() =>
|
|
11273
|
+
const template2 = createMemo(() => tableTemplate(columns(), selectable() === `multiple`));
|
|
11274
|
+
const minWidth = createMemo(() => tableMinWidth(columns(), selectable() === `multiple`));
|
|
11091
11275
|
const cycle = (c) => {
|
|
11092
11276
|
const cur = untrack(sort);
|
|
11093
11277
|
const next = cur?.key === c.key && cur.direction === `asc` ? {
|
|
@@ -11300,7 +11484,11 @@ function TableNative(props) {
|
|
|
11300
11484
|
align: c().align ?? `start`
|
|
11301
11485
|
})), _el$9);
|
|
11302
11486
|
insert(_el$9, () => {
|
|
11303
|
-
if (kind() !== `slot`) return
|
|
11487
|
+
if (kind() !== `slot`) return c().truncate ? (() => {
|
|
11488
|
+
var _el$0 = _tmpl$9();
|
|
11489
|
+
insert(_el$0, () => formatted(c(), row()));
|
|
11490
|
+
return _el$0;
|
|
11491
|
+
})() : formatted(c(), row());
|
|
11304
11492
|
return untrack(() => {
|
|
11305
11493
|
const slot = createMemo(() => c().slot ? props.node.slots?.[c().slot] : void 0);
|
|
11306
11494
|
return createComponent(Show, {
|
|
@@ -11332,13 +11520,15 @@ function TableNative(props) {
|
|
|
11332
11520
|
});
|
|
11333
11521
|
});
|
|
11334
11522
|
effect((_p$) => {
|
|
11335
|
-
var _v$9 = interactive() ? `gridcell` : `cell`, _v$0 = c().type ?? `text
|
|
11523
|
+
var _v$9 = interactive() ? `gridcell` : `cell`, _v$0 = c().type ?? `text`, _v$1 = c().truncate ? `true` : void 0;
|
|
11336
11524
|
_v$9 !== _p$.e && setAttribute(_el$9, "role", _p$.e = _v$9);
|
|
11337
11525
|
_v$0 !== _p$.t && setAttribute(_el$9, "data-type", _p$.t = _v$0);
|
|
11526
|
+
_v$1 !== _p$.a && setAttribute(_el$9, "data-truncate", _p$.a = _v$1);
|
|
11338
11527
|
return _p$;
|
|
11339
11528
|
}, {
|
|
11340
11529
|
e: void 0,
|
|
11341
|
-
t: void 0
|
|
11530
|
+
t: void 0,
|
|
11531
|
+
a: void 0
|
|
11342
11532
|
});
|
|
11343
11533
|
return _el$9;
|
|
11344
11534
|
})();
|
|
@@ -11364,8 +11554,8 @@ function TableNative(props) {
|
|
|
11364
11554
|
};
|
|
11365
11555
|
const caption = () => str(props.props.caption);
|
|
11366
11556
|
return (() => {
|
|
11367
|
-
var _el$
|
|
11368
|
-
spread(_el$
|
|
11557
|
+
var _el$1 = _tmpl$10(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$13 = _el$10.nextSibling;
|
|
11558
|
+
spread(_el$1, mergeProps(() => props.rootProps, {
|
|
11369
11559
|
get role() {
|
|
11370
11560
|
return interactive() ? `grid` : `table`;
|
|
11371
11561
|
},
|
|
@@ -11385,18 +11575,23 @@ function TableNative(props) {
|
|
|
11385
11575
|
return windowed() ? `true` : void 0;
|
|
11386
11576
|
}
|
|
11387
11577
|
}), false, true);
|
|
11388
|
-
spread(_el$
|
|
11578
|
+
spread(_el$10, mergeProps(() => part(`header`), {
|
|
11389
11579
|
get ["data-sticky"]() {
|
|
11390
11580
|
return bool(props.props.stickyHeader) ? `true` : void 0;
|
|
11581
|
+
},
|
|
11582
|
+
get style() {
|
|
11583
|
+
return css({
|
|
11584
|
+
minWidth: minWidth()
|
|
11585
|
+
});
|
|
11391
11586
|
}
|
|
11392
11587
|
}), false, true);
|
|
11393
|
-
insert(_el$
|
|
11588
|
+
insert(_el$11, createComponent(Show, {
|
|
11394
11589
|
get when() {
|
|
11395
11590
|
return selectable() === `multiple`;
|
|
11396
11591
|
},
|
|
11397
11592
|
get children() {
|
|
11398
|
-
var _el$
|
|
11399
|
-
insert(_el$
|
|
11593
|
+
var _el$12 = _tmpl$0();
|
|
11594
|
+
insert(_el$12, createComponent(TableCheckbox, {
|
|
11400
11595
|
get attrs() {
|
|
11401
11596
|
return part.at(`checkbox`, `header`, allSelected() && `checked`);
|
|
11402
11597
|
},
|
|
@@ -11411,10 +11606,10 @@ function TableNative(props) {
|
|
|
11411
11606
|
},
|
|
11412
11607
|
onChange: (next) => select(next ? untrack(allKeys) : [])
|
|
11413
11608
|
}));
|
|
11414
|
-
return _el$
|
|
11609
|
+
return _el$12;
|
|
11415
11610
|
}
|
|
11416
11611
|
}), null);
|
|
11417
|
-
insert(_el$
|
|
11612
|
+
insert(_el$11, createComponent(Index, {
|
|
11418
11613
|
get each() {
|
|
11419
11614
|
return columns();
|
|
11420
11615
|
},
|
|
@@ -11425,36 +11620,36 @@ function TableNative(props) {
|
|
|
11425
11620
|
};
|
|
11426
11621
|
const ariaSort = () => active() === `asc` ? `ascending` : active() === `desc` ? `descending` : c().sortable ? `none` : void 0;
|
|
11427
11622
|
return (() => {
|
|
11428
|
-
var _el$
|
|
11429
|
-
spread(_el$
|
|
11623
|
+
var _el$16 = _tmpl$12();
|
|
11624
|
+
spread(_el$16, mergeProps({
|
|
11430
11625
|
get ["aria-sort"]() {
|
|
11431
11626
|
return ariaSort();
|
|
11432
11627
|
}
|
|
11433
11628
|
}, () => part.atWith(`headerCell`, ci, {
|
|
11434
11629
|
align: c().align ?? `start`
|
|
11435
11630
|
})), false, true);
|
|
11436
|
-
insert(_el$
|
|
11631
|
+
insert(_el$16, createComponent(Show, {
|
|
11437
11632
|
get when() {
|
|
11438
11633
|
return c().sortable;
|
|
11439
11634
|
},
|
|
11440
11635
|
get fallback() {
|
|
11441
11636
|
return (() => {
|
|
11442
|
-
var _el$
|
|
11443
|
-
insert(_el$
|
|
11444
|
-
return _el$
|
|
11637
|
+
var _el$20 = _tmpl$13();
|
|
11638
|
+
insert(_el$20, () => str(c().label));
|
|
11639
|
+
return _el$20;
|
|
11445
11640
|
})();
|
|
11446
11641
|
},
|
|
11447
11642
|
get children() {
|
|
11448
|
-
var _el$
|
|
11449
|
-
_el$
|
|
11450
|
-
insert(_el$
|
|
11451
|
-
spread(_el$
|
|
11643
|
+
var _el$17 = _tmpl$11(), _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling;
|
|
11644
|
+
_el$17.$$click = () => cycle(untrack(c));
|
|
11645
|
+
insert(_el$18, () => str(c().label));
|
|
11646
|
+
spread(_el$19, mergeProps(() => part(`sortIcon`), {
|
|
11452
11647
|
get ["data-direction"]() {
|
|
11453
11648
|
return active() ?? void 0;
|
|
11454
11649
|
},
|
|
11455
11650
|
"aria-hidden": "true"
|
|
11456
11651
|
}), false, true);
|
|
11457
|
-
insert(_el$
|
|
11652
|
+
insert(_el$19, (() => {
|
|
11458
11653
|
var _c$ = memo(() => !!active());
|
|
11459
11654
|
return () => _c$() ? createComponent(BuiltinIcon, {
|
|
11460
11655
|
get slot() {
|
|
@@ -11462,33 +11657,38 @@ function TableNative(props) {
|
|
|
11462
11657
|
}
|
|
11463
11658
|
}) : null;
|
|
11464
11659
|
})());
|
|
11465
|
-
effect(() => setAttribute(_el$
|
|
11660
|
+
effect(() => setAttribute(_el$17, "aria-label", phrase(ctx, active() === `asc` ? `sortByDescending` : `sortByAscending`, {
|
|
11466
11661
|
name: str(c().label)
|
|
11467
11662
|
}, () => `${str(c().label)}: ${ctx.t(active() === `asc` ? `sortDescending` : `sortAscending`)}`)));
|
|
11468
|
-
return _el$
|
|
11663
|
+
return _el$17;
|
|
11469
11664
|
}
|
|
11470
11665
|
}));
|
|
11471
|
-
return _el$
|
|
11666
|
+
return _el$16;
|
|
11472
11667
|
})();
|
|
11473
11668
|
}
|
|
11474
11669
|
}), null);
|
|
11475
11670
|
var _ref$2 = bodyEl;
|
|
11476
|
-
typeof _ref$2 === "function" ? use(_ref$2, _el$
|
|
11477
|
-
spread(_el$
|
|
11671
|
+
typeof _ref$2 === "function" ? use(_ref$2, _el$13) : bodyEl = _el$13;
|
|
11672
|
+
spread(_el$13, mergeProps(() => part(`body`), {
|
|
11478
11673
|
get ["class"]() {
|
|
11479
11674
|
return `${part(`body`).class} xui-table-body`;
|
|
11675
|
+
},
|
|
11676
|
+
get style() {
|
|
11677
|
+
return css({
|
|
11678
|
+
minWidth: minWidth()
|
|
11679
|
+
});
|
|
11480
11680
|
}
|
|
11481
11681
|
}), false, true);
|
|
11482
|
-
insert(_el$
|
|
11682
|
+
insert(_el$13, createComponent(Show, {
|
|
11483
11683
|
get when() {
|
|
11484
11684
|
return rows().length > 0;
|
|
11485
11685
|
},
|
|
11486
11686
|
get fallback() {
|
|
11487
11687
|
return (() => {
|
|
11488
|
-
var _el$
|
|
11489
|
-
spread(_el$
|
|
11490
|
-
insert(_el$
|
|
11491
|
-
return _el$
|
|
11688
|
+
var _el$21 = _tmpl$14(), _el$22 = _el$21.firstChild;
|
|
11689
|
+
spread(_el$22, mergeProps(() => part(`empty`)), false, true);
|
|
11690
|
+
insert(_el$22, () => str(props.props.emptyText) || ctx.t(`noResults`));
|
|
11691
|
+
return _el$21;
|
|
11492
11692
|
})();
|
|
11493
11693
|
},
|
|
11494
11694
|
get children() {
|
|
@@ -11534,37 +11734,37 @@ function TableNative(props) {
|
|
|
11534
11734
|
});
|
|
11535
11735
|
}
|
|
11536
11736
|
}));
|
|
11537
|
-
insert(_el$
|
|
11737
|
+
insert(_el$1, createComponent(Show, {
|
|
11538
11738
|
get when() {
|
|
11539
11739
|
return caption();
|
|
11540
11740
|
},
|
|
11541
11741
|
get children() {
|
|
11542
|
-
var _el$
|
|
11543
|
-
spread(_el$
|
|
11742
|
+
var _el$14 = _tmpl$8();
|
|
11743
|
+
spread(_el$14, mergeProps(() => part(`caption`), {
|
|
11544
11744
|
get id() {
|
|
11545
11745
|
return `${props.domId}.caption`;
|
|
11546
11746
|
}
|
|
11547
11747
|
}), false, true);
|
|
11548
|
-
insert(_el$
|
|
11549
|
-
return _el$
|
|
11748
|
+
insert(_el$14, caption);
|
|
11749
|
+
return _el$14;
|
|
11550
11750
|
}
|
|
11551
11751
|
}), null);
|
|
11552
|
-
insert(_el$
|
|
11752
|
+
insert(_el$1, createComponent(Show, {
|
|
11553
11753
|
get when() {
|
|
11554
11754
|
return memo(() => selectable() === `multiple`)() && selected().length;
|
|
11555
11755
|
},
|
|
11556
11756
|
get children() {
|
|
11557
|
-
var _el$
|
|
11558
|
-
insert(_el$
|
|
11757
|
+
var _el$15 = _tmpl$1();
|
|
11758
|
+
insert(_el$15, () => ctx.t(`selectedCount`, {
|
|
11559
11759
|
count: selected().length
|
|
11560
11760
|
}));
|
|
11561
|
-
return _el$
|
|
11761
|
+
return _el$15;
|
|
11562
11762
|
}
|
|
11563
11763
|
}), null);
|
|
11564
|
-
effect((_$p) => style(_el$
|
|
11764
|
+
effect((_$p) => style(_el$11, css({
|
|
11565
11765
|
gridTemplateColumns: template2()
|
|
11566
11766
|
}), _$p));
|
|
11567
|
-
return _el$
|
|
11767
|
+
return _el$1;
|
|
11568
11768
|
})();
|
|
11569
11769
|
}
|
|
11570
11770
|
function RowScope(props) {
|
|
@@ -11607,6 +11807,234 @@ const NATIVES_TABLE = {
|
|
|
11607
11807
|
Table: TableNative
|
|
11608
11808
|
};
|
|
11609
11809
|
delegateEvents(["click", "keydown"]);
|
|
11810
|
+
var _tmpl$$2 = /* @__PURE__ */ template(`<div><img><svg class=xui-media-sizer aria-hidden=true height=1>`, true, false, false), _tmpl$2$2 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button></button><span></span><button type=button>`), _tmpl$3$1 = /* @__PURE__ */ template(`<button>`);
|
|
11811
|
+
const LAYOUT = zoomableImageLayout(ZOOM.pill);
|
|
11812
|
+
const BUTTON_STYLE = css(LAYOUT.button);
|
|
11813
|
+
const PERCENT_STYLE = css(LAYOUT.percent);
|
|
11814
|
+
const DIVIDER_STYLE = css(LAYOUT.divider);
|
|
11815
|
+
const PILL_STYLE = css(LAYOUT.pill);
|
|
11816
|
+
const PILL_HIDDEN_STYLE = css({
|
|
11817
|
+
...LAYOUT.pill,
|
|
11818
|
+
...LAYOUT.pillHidden
|
|
11819
|
+
});
|
|
11820
|
+
const positive = (v) => typeof v === `number` && Number.isFinite(v) && v > 0 ? v : void 0;
|
|
11821
|
+
const over = (base, extra) => ({
|
|
11822
|
+
...base,
|
|
11823
|
+
...extra
|
|
11824
|
+
});
|
|
11825
|
+
function ZoomableImageNative(props) {
|
|
11826
|
+
const ctx = useSurfaceContext();
|
|
11827
|
+
const part = parts(props);
|
|
11828
|
+
const menuPart = parts({
|
|
11829
|
+
get node() {
|
|
11830
|
+
return {
|
|
11831
|
+
id: `${props.node.id}.menu`,
|
|
11832
|
+
component: `Menu`,
|
|
11833
|
+
props: {},
|
|
11834
|
+
children: []
|
|
11835
|
+
};
|
|
11836
|
+
},
|
|
11837
|
+
props: {}
|
|
11838
|
+
});
|
|
11839
|
+
const src = () => str(props.props.src);
|
|
11840
|
+
const alt = () => str(props.props.alt);
|
|
11841
|
+
const controls = () => str(props.props.controls, `auto`);
|
|
11842
|
+
const media = createMediaSource(() => ctx.host, src);
|
|
11843
|
+
const [, setScale] = createBoundState(() => props.node, () => props.scope, `scale`, () => positive(props.props.scale));
|
|
11844
|
+
const zoom = createZoomableImage({
|
|
11845
|
+
src: () => media().url,
|
|
11846
|
+
naturalWidth: () => positive(props.props.naturalWidth),
|
|
11847
|
+
naturalHeight: () => positive(props.props.naturalHeight),
|
|
11848
|
+
initial: () => str(props.props.initial, `auto`),
|
|
11849
|
+
maxScale: () => positive(props.props.maxScale),
|
|
11850
|
+
scale: () => positive(props.props.scale),
|
|
11851
|
+
controls,
|
|
11852
|
+
transition: () => ctx.reducedMotion ? null : ZOOMABLE_IMAGE_NATIVE_TRANSITION,
|
|
11853
|
+
onZoom: (scale, atFit) => {
|
|
11854
|
+
setScale(scale);
|
|
11855
|
+
void props.emit(`zoom`, {
|
|
11856
|
+
scale,
|
|
11857
|
+
atFit
|
|
11858
|
+
}, {
|
|
11859
|
+
scale
|
|
11860
|
+
});
|
|
11861
|
+
},
|
|
11862
|
+
onTap: () => void props.emit(`tap`)
|
|
11863
|
+
});
|
|
11864
|
+
const [menuOpen, setMenuOpen] = createSignal(false);
|
|
11865
|
+
createEffect(on(menuOpen, (open) => zoom.controller()?.holdPill(open), {
|
|
11866
|
+
defer: true
|
|
11867
|
+
}));
|
|
11868
|
+
const rootStyle = () => {
|
|
11869
|
+
const style2 = props.node.style;
|
|
11870
|
+
const styled = style2 !== void 0 && (style2.height !== void 0 || style2.aspectRatio !== void 0);
|
|
11871
|
+
const aspect = zoomBoxAspect(ZOOM_MATH, zoom.natural(), styled);
|
|
11872
|
+
return mergeStyle(props.rootProps, {
|
|
11873
|
+
...LAYOUT.root,
|
|
11874
|
+
...aspect !== null ? {
|
|
11875
|
+
aspectRatio: String(aspect)
|
|
11876
|
+
} : {}
|
|
11877
|
+
});
|
|
11878
|
+
};
|
|
11879
|
+
const items = () => menuOpen() ? zoom.menuItems(ctx.t(`zoomFit`)).map((item, i) => ({
|
|
11880
|
+
kind: `checkbox`,
|
|
11881
|
+
label: item.label,
|
|
11882
|
+
value: String(i),
|
|
11883
|
+
checked: item.checked
|
|
11884
|
+
})) : [];
|
|
11885
|
+
const choose = (event, payload) => {
|
|
11886
|
+
if (event !== `select`) return;
|
|
11887
|
+
const c = zoom.controller();
|
|
11888
|
+
const picked = c && c.frame() ? zoom.menuItems(ctx.t(`zoomFit`))[num(payload?.value, -1)] : void 0;
|
|
11889
|
+
setMenuOpen(false);
|
|
11890
|
+
if (!c || !picked) return;
|
|
11891
|
+
if (picked.scale === null) c.rest();
|
|
11892
|
+
else c.zoomScale(picked.scale);
|
|
11893
|
+
};
|
|
11894
|
+
const imageStyle = () => {
|
|
11895
|
+
const n = zoom.natural();
|
|
11896
|
+
return css({
|
|
11897
|
+
...LAYOUT.image,
|
|
11898
|
+
...n ? {
|
|
11899
|
+
width: n.width,
|
|
11900
|
+
height: n.height
|
|
11901
|
+
} : {}
|
|
11902
|
+
});
|
|
11903
|
+
};
|
|
11904
|
+
return (() => {
|
|
11905
|
+
var _el$ = _tmpl$$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
|
|
11906
|
+
var _ref$ = zoom.rootRef;
|
|
11907
|
+
typeof _ref$ === "function" ? use(_ref$, _el$) : zoom.rootRef = _el$;
|
|
11908
|
+
spread(_el$, mergeProps(() => over(props.rootProps, {
|
|
11909
|
+
style: rootStyle(),
|
|
11910
|
+
role: `group`,
|
|
11911
|
+
"aria-label": alt() || void 0,
|
|
11912
|
+
tabindex: 0
|
|
11913
|
+
})), false, true);
|
|
11914
|
+
var _ref$2 = zoom.imageRef;
|
|
11915
|
+
typeof _ref$2 === "function" ? use(_ref$2, _el$2) : zoom.imageRef = _el$2;
|
|
11916
|
+
spread(_el$2, mergeProps(() => part(`image`), {
|
|
11917
|
+
get src() {
|
|
11918
|
+
return media().url || void 0;
|
|
11919
|
+
},
|
|
11920
|
+
get alt() {
|
|
11921
|
+
return alt();
|
|
11922
|
+
},
|
|
11923
|
+
"draggable": false,
|
|
11924
|
+
"loading": "lazy",
|
|
11925
|
+
"decoding": "async",
|
|
11926
|
+
get style() {
|
|
11927
|
+
return imageStyle();
|
|
11928
|
+
},
|
|
11929
|
+
get onLoad() {
|
|
11930
|
+
return zoom.onImageLoad;
|
|
11931
|
+
}
|
|
11932
|
+
}), false, false);
|
|
11933
|
+
setAttribute(_el$3, "width", MEDIA_INTRINSIC_WIDTH);
|
|
11934
|
+
insert(_el$, (() => {
|
|
11935
|
+
var _c$ = memo(() => controls() !== `none`);
|
|
11936
|
+
return () => _c$() ? (() => {
|
|
11937
|
+
var _el$4 = _tmpl$2$2(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling;
|
|
11938
|
+
var _ref$3 = zoom.pillRef;
|
|
11939
|
+
typeof _ref$3 === "function" ? use(_ref$3, _el$4) : zoom.pillRef = _el$4;
|
|
11940
|
+
spread(_el$4, mergeProps(() => part(`pill`), {
|
|
11941
|
+
"role": "toolbar",
|
|
11942
|
+
get ["data-state"]() {
|
|
11943
|
+
return zoom.pillVisible() ? `open` : `closed`;
|
|
11944
|
+
},
|
|
11945
|
+
get style() {
|
|
11946
|
+
return zoom.pillVisible() ? PILL_STYLE : PILL_HIDDEN_STYLE;
|
|
11947
|
+
}
|
|
11948
|
+
}), false, true);
|
|
11949
|
+
spread(_el$5, mergeProps(() => part(`zoomOut`, zoom.pill().atMin && `disabled`), {
|
|
11950
|
+
"style": BUTTON_STYLE,
|
|
11951
|
+
get ["aria-label"]() {
|
|
11952
|
+
return ctx.t(`zoomOut`);
|
|
11953
|
+
},
|
|
11954
|
+
get disabled() {
|
|
11955
|
+
return zoom.pill().atMin;
|
|
11956
|
+
},
|
|
11957
|
+
"onClick": () => zoom.controller()?.step(-1)
|
|
11958
|
+
}), false, true);
|
|
11959
|
+
insert(_el$5, createComponent(BuiltinIcon, {
|
|
11960
|
+
slot: "ZoomableImage.zoomOut",
|
|
11961
|
+
size: 16
|
|
11962
|
+
}));
|
|
11963
|
+
insert(_el$4, createComponent(PressMenu, {
|
|
11964
|
+
part: menuPart,
|
|
11965
|
+
emit: choose,
|
|
11966
|
+
get scope() {
|
|
11967
|
+
return props.scope;
|
|
11968
|
+
},
|
|
11969
|
+
get items() {
|
|
11970
|
+
return items();
|
|
11971
|
+
},
|
|
11972
|
+
raws: [],
|
|
11973
|
+
open: menuOpen,
|
|
11974
|
+
setOpen: setMenuOpen,
|
|
11975
|
+
side: "top",
|
|
11976
|
+
align: "center",
|
|
11977
|
+
trigger: (t) => (() => {
|
|
11978
|
+
var _el$9 = _tmpl$3$1();
|
|
11979
|
+
var _ref$4 = t.ref;
|
|
11980
|
+
typeof _ref$4 === "function" ? use(_ref$4, _el$9) : t.ref = _el$9;
|
|
11981
|
+
spread(_el$9, mergeProps(() => t.attrs(), () => part(`percent`, menuOpen() && `open`), {
|
|
11982
|
+
"style": PERCENT_STYLE,
|
|
11983
|
+
get ["aria-label"]() {
|
|
11984
|
+
return ctx.t(`zoomLevel`);
|
|
11985
|
+
},
|
|
11986
|
+
get onPointerDown() {
|
|
11987
|
+
return t.onPointerDown;
|
|
11988
|
+
},
|
|
11989
|
+
get onKeyDown() {
|
|
11990
|
+
return t.onKeyDown;
|
|
11991
|
+
}
|
|
11992
|
+
}), false, true);
|
|
11993
|
+
insert(_el$9, () => zoom.pill().percent);
|
|
11994
|
+
return _el$9;
|
|
11995
|
+
})()
|
|
11996
|
+
}), _el$6);
|
|
11997
|
+
spread(_el$6, mergeProps(() => part(`zoomIn`, zoom.pill().atMax && `disabled`), {
|
|
11998
|
+
"style": BUTTON_STYLE,
|
|
11999
|
+
get ["aria-label"]() {
|
|
12000
|
+
return ctx.t(`zoomIn`);
|
|
12001
|
+
},
|
|
12002
|
+
get disabled() {
|
|
12003
|
+
return zoom.pill().atMax;
|
|
12004
|
+
},
|
|
12005
|
+
"onClick": () => zoom.controller()?.step(1)
|
|
12006
|
+
}), false, true);
|
|
12007
|
+
insert(_el$6, createComponent(BuiltinIcon, {
|
|
12008
|
+
slot: "ZoomableImage.zoomIn",
|
|
12009
|
+
size: 16
|
|
12010
|
+
}));
|
|
12011
|
+
spread(_el$7, mergeProps(() => part(`divider`), {
|
|
12012
|
+
"aria-hidden": "true",
|
|
12013
|
+
"style": DIVIDER_STYLE
|
|
12014
|
+
}), false, false);
|
|
12015
|
+
spread(_el$8, mergeProps(() => part(`fit`, zoom.pill().atRest && `selected`), {
|
|
12016
|
+
"style": BUTTON_STYLE,
|
|
12017
|
+
get ["aria-label"]() {
|
|
12018
|
+
return ctx.t(`zoomToFit`);
|
|
12019
|
+
},
|
|
12020
|
+
get ["aria-pressed"]() {
|
|
12021
|
+
return zoom.pill().atRest ? `true` : `false`;
|
|
12022
|
+
},
|
|
12023
|
+
"onClick": () => zoom.controller()?.rest()
|
|
12024
|
+
}), false, true);
|
|
12025
|
+
insert(_el$8, createComponent(BuiltinIcon, {
|
|
12026
|
+
slot: "ZoomableImage.fit",
|
|
12027
|
+
size: 16
|
|
12028
|
+
}));
|
|
12029
|
+
return _el$4;
|
|
12030
|
+
})() : null;
|
|
12031
|
+
})(), null);
|
|
12032
|
+
return _el$;
|
|
12033
|
+
})();
|
|
12034
|
+
}
|
|
12035
|
+
const NATIVES_ZOOMABLE_IMAGE = {
|
|
12036
|
+
ZoomableImage: ZoomableImageNative
|
|
12037
|
+
};
|
|
11610
12038
|
const PROVIDED = {
|
|
11611
12039
|
Box: BoxNative,
|
|
11612
12040
|
List: ListNative,
|
|
@@ -11624,13 +12052,15 @@ const PROVIDED = {
|
|
|
11624
12052
|
...NATIVES_FEEDBACK,
|
|
11625
12053
|
...NATIVES_INPUTS,
|
|
11626
12054
|
...NATIVES_MEDIA,
|
|
12055
|
+
...NATIVES_MOTION,
|
|
11627
12056
|
...NATIVES_NAV,
|
|
11628
12057
|
...NATIVES_OVERLAYS,
|
|
11629
12058
|
...NATIVES_QR,
|
|
11630
12059
|
...NATIVES_RESIZABLE,
|
|
11631
12060
|
...NATIVES_SEARCH,
|
|
11632
12061
|
...NATIVES_SELECT,
|
|
11633
|
-
...NATIVES_TABLE
|
|
12062
|
+
...NATIVES_TABLE,
|
|
12063
|
+
...NATIVES_ZOOMABLE_IMAGE
|
|
11634
12064
|
};
|
|
11635
12065
|
const NATIVES = Object.fromEntries(NATIVE_ORDER.map((name) => [name, PROVIDED[name] ?? Pending]));
|
|
11636
12066
|
const NATIVE_NAMES = Object.keys(NATIVES);
|
|
@@ -12875,7 +13305,7 @@ export {
|
|
|
12875
13305
|
CloseOnSubmitContext,
|
|
12876
13306
|
DEBOUNCE_MS2 as DEBOUNCE_MS,
|
|
12877
13307
|
ExponentialSurface,
|
|
12878
|
-
|
|
13308
|
+
R as FALLBACK_ICONS,
|
|
12879
13309
|
FieldErrors,
|
|
12880
13310
|
FormContext,
|
|
12881
13311
|
HostSurface,
|
|
@@ -12954,7 +13384,7 @@ export {
|
|
|
12954
13384
|
registerExtension,
|
|
12955
13385
|
registeredExtensions,
|
|
12956
13386
|
renderMarkdown,
|
|
12957
|
-
|
|
13387
|
+
T as resolveIcon,
|
|
12958
13388
|
resolveNodeProps2 as resolveNodeProps,
|
|
12959
13389
|
resolveProps,
|
|
12960
13390
|
resolveThemeInput,
|