@exponential_app/eui-solid 0.2.1 → 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/README.md +5 -0
- 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 +1009 -472
- package/dist/index.js.map +1 -1
- package/dist/primitives.js +541 -1272
- 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/carousel.d.ts +21 -0
- package/dist/types/primitives/index.d.ts +4 -0
- package/dist/types/primitives/mosaic.d.ts +16 -0
- package/dist/types/primitives/outline.d.ts +14 -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
|
})() : (() => {
|
|
@@ -1225,11 +1226,11 @@ function inline(nodes, host) {
|
|
|
1225
1226
|
}
|
|
1226
1227
|
function renderList(list, host) {
|
|
1227
1228
|
const items = list.items.map((item) => (() => {
|
|
1228
|
-
var _el$1 = _tmpl$1$
|
|
1229
|
+
var _el$1 = _tmpl$1$6();
|
|
1229
1230
|
insert(_el$1, (() => {
|
|
1230
1231
|
var _c$2 = memo(() => item.task === void 0);
|
|
1231
1232
|
return () => _c$2() ? null : (() => {
|
|
1232
|
-
var _el$10 = _tmpl$10$
|
|
1233
|
+
var _el$10 = _tmpl$10$6();
|
|
1233
1234
|
effect(() => setAttribute(_el$10, "checked", item.task ? `` : void 0));
|
|
1234
1235
|
effect(() => _el$10.checked = item.task);
|
|
1235
1236
|
return _el$10;
|
|
@@ -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;
|
|
@@ -2239,7 +2239,7 @@ function ChartNative(props) {
|
|
|
2239
2239
|
return showGrid();
|
|
2240
2240
|
},
|
|
2241
2241
|
get children() {
|
|
2242
|
-
var _el$16 = _tmpl$1$
|
|
2242
|
+
var _el$16 = _tmpl$1$5();
|
|
2243
2243
|
spread(_el$16, mergeProps(() => part(`grid`), {
|
|
2244
2244
|
"stroke": "currentColor",
|
|
2245
2245
|
"stroke-width": 1,
|
|
@@ -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;
|
|
@@ -2275,13 +2275,13 @@ function ChartNative(props) {
|
|
|
2275
2275
|
return memo(() => !!(!round() && active() !== null))() && !sparkline();
|
|
2276
2276
|
},
|
|
2277
2277
|
get children() {
|
|
2278
|
-
var _el$17 = _tmpl$10$
|
|
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() {
|
|
@@ -3332,7 +3333,7 @@ function FileUploadNative(props) {
|
|
|
3332
3333
|
children: (file, i) => {
|
|
3333
3334
|
const href = () => linkHref(ctx.host, file.url);
|
|
3334
3335
|
return (() => {
|
|
3335
|
-
var _el$17 = _tmpl$1$
|
|
3336
|
+
var _el$17 = _tmpl$1$4(), _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling;
|
|
3336
3337
|
spread(_el$17, mergeProps(() => part.at(`file`, i())), false, true);
|
|
3337
3338
|
spread(_el$18, mergeProps(() => part.at(`fileIcon`, i())), false, true);
|
|
3338
3339
|
insert(_el$18, createComponent(BuiltinIcon, {
|
|
@@ -3342,7 +3343,7 @@ function FileUploadNative(props) {
|
|
|
3342
3343
|
insert(_el$19, (() => {
|
|
3343
3344
|
var _c$ = memo(() => !!href());
|
|
3344
3345
|
return () => _c$() ? (() => {
|
|
3345
|
-
var _el$22 = _tmpl$10$
|
|
3346
|
+
var _el$22 = _tmpl$10$4();
|
|
3346
3347
|
insert(_el$22, () => file.name);
|
|
3347
3348
|
effect(() => setAttribute(_el$22, "href", href()));
|
|
3348
3349
|
return _el$22;
|
|
@@ -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,
|
|
@@ -6197,7 +6194,7 @@ function SliderNative(props) {
|
|
|
6197
6194
|
return s;
|
|
6198
6195
|
};
|
|
6199
6196
|
return (() => {
|
|
6200
|
-
var _el$22 = _tmpl$1$
|
|
6197
|
+
var _el$22 = _tmpl$1$3(), _el$23 = _el$22.firstChild, _el$24 = _el$23.firstChild, _el$25 = _el$23.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$26.firstChild, _el$28 = _el$26.nextSibling, _el$29 = _el$28.firstChild;
|
|
6201
6198
|
spread(_el$22, mergeProps(() => props.rootProps), false, true);
|
|
6202
6199
|
spread(_el$23, mergeProps(() => part(`header`), {
|
|
6203
6200
|
get ["class"]() {
|
|
@@ -6351,7 +6348,7 @@ function ComposerNative(props) {
|
|
|
6351
6348
|
const placeholder = () => str(props.props.placeholder);
|
|
6352
6349
|
const submitLabel = () => str(props.props.submitLabel) || ctx.t(`send`);
|
|
6353
6350
|
return (() => {
|
|
6354
|
-
var _el$30 = _tmpl$10$
|
|
6351
|
+
var _el$30 = _tmpl$10$3(), _el$31 = _el$30.firstChild, _el$32 = _el$31.nextSibling, _el$33 = _el$32.firstChild;
|
|
6355
6352
|
spread(_el$30, mergeProps(() => props.rootProps, {
|
|
6356
6353
|
get ["data-busy"]() {
|
|
6357
6354
|
return busy() ? `true` : void 0;
|
|
@@ -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,25 +6756,61 @@ 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;
|
|
6778
|
+
})();
|
|
6779
|
+
}
|
|
6780
|
+
function CarouselThumbnail(props) {
|
|
6781
|
+
const ctx = useSurfaceContext();
|
|
6782
|
+
const url = createMediaSrc(() => ctx.host, () => props.src);
|
|
6783
|
+
const [broken, setBroken] = createSignal(null);
|
|
6784
|
+
return (() => {
|
|
6785
|
+
var _el$19 = _tmpl$10$2(), _el$20 = _el$19.firstChild;
|
|
6786
|
+
spread(_el$19, mergeProps(() => props.attrs, {
|
|
6787
|
+
get ["aria-label"]() {
|
|
6788
|
+
return props.label;
|
|
6789
|
+
},
|
|
6790
|
+
get ["aria-current"]() {
|
|
6791
|
+
return props.current ? `true` : void 0;
|
|
6792
|
+
},
|
|
6793
|
+
get ["data-current"]() {
|
|
6794
|
+
return props.current ? `true` : void 0;
|
|
6795
|
+
},
|
|
6796
|
+
"onClick": () => props.onPress()
|
|
6797
|
+
}), false, true);
|
|
6798
|
+
insert(_el$20, createComponent(BuiltinIcon, {
|
|
6799
|
+
slot: "Image.fallback"
|
|
6800
|
+
}));
|
|
6801
|
+
insert(_el$19, createComponent(Show, {
|
|
6802
|
+
get when() {
|
|
6803
|
+
return memo(() => !!(props.src && url()))() && broken() !== url();
|
|
6804
|
+
},
|
|
6805
|
+
get children() {
|
|
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;
|
|
6811
|
+
}
|
|
6812
|
+
}), null);
|
|
6813
|
+
return _el$19;
|
|
6699
6814
|
})();
|
|
6700
6815
|
}
|
|
6701
6816
|
function CarouselNative(props) {
|
|
@@ -6750,23 +6865,26 @@ function CarouselNative(props) {
|
|
|
6750
6865
|
page: i + 1,
|
|
6751
6866
|
total: pages().length
|
|
6752
6867
|
});
|
|
6753
|
-
|
|
6754
|
-
|
|
6755
|
-
|
|
6756
|
-
|
|
6757
|
-
|
|
6758
|
-
|
|
6759
|
-
|
|
6760
|
-
|
|
6761
|
-
|
|
6762
|
-
|
|
6763
|
-
|
|
6764
|
-
|
|
6765
|
-
|
|
6766
|
-
|
|
6767
|
-
|
|
6768
|
-
|
|
6769
|
-
|
|
6868
|
+
const counter = () => many() && bool(props.props.counter);
|
|
6869
|
+
const thumbnails = createMemo(() => many() && Array.isArray(props.props.thumbnails) ? props.props.thumbnails : null);
|
|
6870
|
+
let strip;
|
|
6871
|
+
createEffect(() => {
|
|
6872
|
+
const p = page();
|
|
6873
|
+
thumbnails();
|
|
6874
|
+
const el = strip;
|
|
6875
|
+
const thumb = el?.children[p];
|
|
6876
|
+
if (!el || !thumb) return;
|
|
6877
|
+
const a = el.getBoundingClientRect();
|
|
6878
|
+
const b = thumb.getBoundingClientRect();
|
|
6879
|
+
const delta = b.left < a.left ? b.left - a.left : b.right > a.right ? b.right - a.right : 0;
|
|
6880
|
+
if (delta !== 0) el.scrollLeft += delta;
|
|
6881
|
+
});
|
|
6882
|
+
const trackView = (() => {
|
|
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, {
|
|
6770
6888
|
get each() {
|
|
6771
6889
|
return ids();
|
|
6772
6890
|
},
|
|
@@ -6781,9 +6899,9 @@ function CarouselNative(props) {
|
|
|
6781
6899
|
return a;
|
|
6782
6900
|
};
|
|
6783
6901
|
return (() => {
|
|
6784
|
-
var _el$
|
|
6785
|
-
use((el) => createRenderEffect(() => el.toggleAttribute(`inert`, !active())), _el$
|
|
6786
|
-
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, {
|
|
6787
6905
|
"role": "group",
|
|
6788
6906
|
get ["aria-roledescription"]() {
|
|
6789
6907
|
return ctx.t(`slide`);
|
|
@@ -6798,23 +6916,96 @@ function CarouselNative(props) {
|
|
|
6798
6916
|
return active() ? void 0 : ``;
|
|
6799
6917
|
}
|
|
6800
6918
|
}), false, true);
|
|
6801
|
-
insert(_el$
|
|
6919
|
+
insert(_el$23, createComponent(NodeView, {
|
|
6802
6920
|
get node() {
|
|
6803
6921
|
return entry().node;
|
|
6804
6922
|
}
|
|
6805
6923
|
}));
|
|
6806
|
-
return _el$
|
|
6924
|
+
return _el$23;
|
|
6807
6925
|
})();
|
|
6808
6926
|
}
|
|
6809
6927
|
}));
|
|
6810
|
-
|
|
6928
|
+
return _el$22;
|
|
6929
|
+
})();
|
|
6930
|
+
return (() => {
|
|
6931
|
+
var _el$24 = _tmpl$3$9();
|
|
6932
|
+
spread(_el$24, mergeProps(() => props.rootProps, {
|
|
6933
|
+
"role": "region",
|
|
6934
|
+
get ["aria-roledescription"]() {
|
|
6935
|
+
return ctx.t(`carousel`);
|
|
6936
|
+
},
|
|
6937
|
+
"onKeyDown": (e) => {
|
|
6938
|
+
const rtl = ctx.direction === `rtl`;
|
|
6939
|
+
if (e.key === `ArrowRight`) go(page() + (rtl ? -1 : 1));
|
|
6940
|
+
else if (e.key === `ArrowLeft`) go(page() + (rtl ? 1 : -1));
|
|
6941
|
+
}
|
|
6942
|
+
}), false, true);
|
|
6943
|
+
insert(_el$24, createComponent(Show, {
|
|
6944
|
+
get when() {
|
|
6945
|
+
return counter();
|
|
6946
|
+
},
|
|
6947
|
+
fallback: trackView,
|
|
6948
|
+
get children() {
|
|
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`), {
|
|
6952
|
+
"aria-hidden": "true"
|
|
6953
|
+
}), false, true);
|
|
6954
|
+
insert(_el$26, () => ctx.t(`pageCounter`, {
|
|
6955
|
+
page: page() + 1,
|
|
6956
|
+
total: pages().length
|
|
6957
|
+
}));
|
|
6958
|
+
return _el$25;
|
|
6959
|
+
}
|
|
6960
|
+
}), null);
|
|
6961
|
+
insert(_el$24, createComponent(Show, {
|
|
6962
|
+
get when() {
|
|
6963
|
+
return thumbnails();
|
|
6964
|
+
},
|
|
6965
|
+
children: (urls) => (() => {
|
|
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, {
|
|
6971
|
+
get each() {
|
|
6972
|
+
return ids();
|
|
6973
|
+
},
|
|
6974
|
+
children: (id) => {
|
|
6975
|
+
const index = () => byId().get(id)?.index ?? 0;
|
|
6976
|
+
const current = () => index() === page();
|
|
6977
|
+
const src = () => {
|
|
6978
|
+
const u = urls()[index()];
|
|
6979
|
+
return typeof u === `string` ? u : ``;
|
|
6980
|
+
};
|
|
6981
|
+
return createComponent(CarouselThumbnail, {
|
|
6982
|
+
get attrs() {
|
|
6983
|
+
return part.at(`thumbnail`, index(), current() && `selected`);
|
|
6984
|
+
},
|
|
6985
|
+
get src() {
|
|
6986
|
+
return src();
|
|
6987
|
+
},
|
|
6988
|
+
get current() {
|
|
6989
|
+
return current();
|
|
6990
|
+
},
|
|
6991
|
+
get label() {
|
|
6992
|
+
return pageOf(index());
|
|
6993
|
+
},
|
|
6994
|
+
onPress: () => go(index())
|
|
6995
|
+
});
|
|
6996
|
+
}
|
|
6997
|
+
}));
|
|
6998
|
+
return _el$31;
|
|
6999
|
+
})()
|
|
7000
|
+
}), null);
|
|
7001
|
+
insert(_el$24, createComponent(Show, {
|
|
6811
7002
|
get when() {
|
|
6812
7003
|
return many();
|
|
6813
7004
|
},
|
|
6814
7005
|
get children() {
|
|
6815
|
-
var _el$
|
|
6816
|
-
spread(_el$
|
|
6817
|
-
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`), {
|
|
6818
7009
|
get ["aria-label"]() {
|
|
6819
7010
|
return ctx.t(`previous`);
|
|
6820
7011
|
},
|
|
@@ -6823,21 +7014,21 @@ function CarouselNative(props) {
|
|
|
6823
7014
|
},
|
|
6824
7015
|
"onClick": () => go(page() - 1)
|
|
6825
7016
|
}), false, true);
|
|
6826
|
-
insert(_el$
|
|
7017
|
+
insert(_el$28, createComponent(BuiltinIcon, {
|
|
6827
7018
|
slot: "Carousel.previous"
|
|
6828
7019
|
}));
|
|
6829
|
-
insert(_el$
|
|
7020
|
+
insert(_el$27, createComponent(Show, {
|
|
6830
7021
|
get when() {
|
|
6831
7022
|
return props.props.indicators !== false;
|
|
6832
7023
|
},
|
|
6833
7024
|
get children() {
|
|
6834
|
-
var _el$
|
|
6835
|
-
spread(_el$
|
|
7025
|
+
var _el$29 = _tmpl$3$9();
|
|
7026
|
+
spread(_el$29, mergeProps(() => part(`indicator`), {
|
|
6836
7027
|
"class": "xui-carousel-dots",
|
|
6837
7028
|
"data-xui-part": "Carousel/indicators",
|
|
6838
7029
|
"role": "tablist"
|
|
6839
7030
|
}), false, true);
|
|
6840
|
-
insert(_el$
|
|
7031
|
+
insert(_el$29, createComponent(For, {
|
|
6841
7032
|
get each() {
|
|
6842
7033
|
return ids();
|
|
6843
7034
|
},
|
|
@@ -6851,8 +7042,8 @@ function CarouselNative(props) {
|
|
|
6851
7042
|
return a;
|
|
6852
7043
|
};
|
|
6853
7044
|
return (() => {
|
|
6854
|
-
var _el$
|
|
6855
|
-
spread(_el$
|
|
7045
|
+
var _el$32 = _tmpl$14$2();
|
|
7046
|
+
spread(_el$32, mergeProps(attrs, {
|
|
6856
7047
|
"role": "tab",
|
|
6857
7048
|
get ["aria-selected"]() {
|
|
6858
7049
|
return index() === page();
|
|
@@ -6862,14 +7053,14 @@ function CarouselNative(props) {
|
|
|
6862
7053
|
},
|
|
6863
7054
|
"onClick": () => go(index())
|
|
6864
7055
|
}), false, false);
|
|
6865
|
-
return _el$
|
|
7056
|
+
return _el$32;
|
|
6866
7057
|
})();
|
|
6867
7058
|
}
|
|
6868
7059
|
}));
|
|
6869
|
-
return _el$
|
|
7060
|
+
return _el$29;
|
|
6870
7061
|
}
|
|
6871
|
-
}), _el$
|
|
6872
|
-
spread(_el$
|
|
7062
|
+
}), _el$30);
|
|
7063
|
+
spread(_el$30, mergeProps(() => withClass(part(`next`), `xui-carousel-nav`), {
|
|
6873
7064
|
get ["aria-label"]() {
|
|
6874
7065
|
return ctx.t(`next`);
|
|
6875
7066
|
},
|
|
@@ -6878,13 +7069,13 @@ function CarouselNative(props) {
|
|
|
6878
7069
|
},
|
|
6879
7070
|
"onClick": () => go(page() + 1)
|
|
6880
7071
|
}), false, true);
|
|
6881
|
-
insert(_el$
|
|
7072
|
+
insert(_el$30, createComponent(BuiltinIcon, {
|
|
6882
7073
|
slot: "Carousel.next"
|
|
6883
7074
|
}));
|
|
6884
|
-
return _el$
|
|
7075
|
+
return _el$27;
|
|
6885
7076
|
}
|
|
6886
7077
|
}), null);
|
|
6887
|
-
return _el$
|
|
7078
|
+
return _el$24;
|
|
6888
7079
|
})();
|
|
6889
7080
|
}
|
|
6890
7081
|
const NATIVES_MEDIA = {
|
|
@@ -6894,7 +7085,64 @@ const NATIVES_MEDIA = {
|
|
|
6894
7085
|
Avatar: AvatarNative,
|
|
6895
7086
|
Carousel: CarouselNative
|
|
6896
7087
|
};
|
|
6897
|
-
|
|
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>`);
|
|
6898
7146
|
const sameKeys$1 = (a, b) => a.length === b.length && a.every((x, i) => x === b[i]);
|
|
6899
7147
|
function keysOf(list, key) {
|
|
6900
7148
|
return createMemo(() => list().map(key), void 0, {
|
|
@@ -6946,7 +7194,7 @@ function TabsNative(props) {
|
|
|
6946
7194
|
onCleanup(() => cancelAnimationFrame(raf));
|
|
6947
7195
|
});
|
|
6948
7196
|
return (() => {
|
|
6949
|
-
var _el$ = _tmpl$2$
|
|
7197
|
+
var _el$ = _tmpl$2$9(), _el$2 = _el$.firstChild;
|
|
6950
7198
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
6951
7199
|
get dir() {
|
|
6952
7200
|
return ctx.direction;
|
|
@@ -6974,7 +7222,7 @@ function TabsNative(props) {
|
|
|
6974
7222
|
let el;
|
|
6975
7223
|
const item = roving.item(() => el, () => true);
|
|
6976
7224
|
const trigger = (() => {
|
|
6977
|
-
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;
|
|
6978
7226
|
var _ref$2 = el;
|
|
6979
7227
|
typeof _ref$2 === "function" ? use(_ref$2, _el$4) : el = _el$4;
|
|
6980
7228
|
spread(_el$4, mergeProps({
|
|
@@ -7047,7 +7295,7 @@ function TabsNative(props) {
|
|
|
7047
7295
|
return closable();
|
|
7048
7296
|
},
|
|
7049
7297
|
get children() {
|
|
7050
|
-
var _el$9 = _tmpl$$
|
|
7298
|
+
var _el$9 = _tmpl$$9();
|
|
7051
7299
|
spread(_el$9, mergeProps(() => part.at(`close`, index(), lent()?.index === index() && lent().state), {
|
|
7052
7300
|
get ["aria-label"]() {
|
|
7053
7301
|
return ctx.t(`closeTab`, {
|
|
@@ -7073,7 +7321,7 @@ function TabsNative(props) {
|
|
|
7073
7321
|
return bool(props.props.addable);
|
|
7074
7322
|
},
|
|
7075
7323
|
get children() {
|
|
7076
|
-
var _el$3 = _tmpl$$
|
|
7324
|
+
var _el$3 = _tmpl$$9();
|
|
7077
7325
|
spread(_el$3, mergeProps(() => part(`new`), {
|
|
7078
7326
|
get ["aria-label"]() {
|
|
7079
7327
|
return ctx.t(`newTab`);
|
|
@@ -7263,7 +7511,7 @@ function SegmentedNative(props) {
|
|
|
7263
7511
|
let el;
|
|
7264
7512
|
const r = roving.item(() => el, () => !disabled());
|
|
7265
7513
|
return (() => {
|
|
7266
|
-
var _el$13 = _tmpl$$
|
|
7514
|
+
var _el$13 = _tmpl$$9();
|
|
7267
7515
|
var _ref$4 = el;
|
|
7268
7516
|
typeof _ref$4 === "function" ? use(_ref$4, _el$13) : el = _el$13;
|
|
7269
7517
|
spread(_el$13, mergeProps({
|
|
@@ -7381,7 +7629,7 @@ function SegmentedBar(props) {
|
|
|
7381
7629
|
const selected = () => key === props.value();
|
|
7382
7630
|
const disabled = () => bool(item().disabled);
|
|
7383
7631
|
return (() => {
|
|
7384
|
-
var _el$15 = _tmpl$$
|
|
7632
|
+
var _el$15 = _tmpl$$9();
|
|
7385
7633
|
use((el) => void (refs[index()] = el), _el$15);
|
|
7386
7634
|
spread(_el$15, mergeProps(() => props.part(`item`, selected() && `selected`, disabled() && `disabled`), {
|
|
7387
7635
|
get disabled() {
|
|
@@ -7584,7 +7832,7 @@ const NATIVES_NAV = {
|
|
|
7584
7832
|
Segmented: SegmentedNative,
|
|
7585
7833
|
Accordion: AccordionNative
|
|
7586
7834
|
};
|
|
7587
|
-
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>`);
|
|
7588
7836
|
function SearchBody(props) {
|
|
7589
7837
|
const ctx = useSurfaceContext();
|
|
7590
7838
|
const listId = createUniqueId();
|
|
@@ -7649,7 +7897,7 @@ function SearchBody(props) {
|
|
|
7649
7897
|
equals: (a, b) => a.length === b.length && a.every((x, i) => x === b[i])
|
|
7650
7898
|
});
|
|
7651
7899
|
return [(() => {
|
|
7652
|
-
var _el$ = _tmpl$2$
|
|
7900
|
+
var _el$ = _tmpl$2$8(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
|
|
7653
7901
|
spread(_el$, mergeProps(() => single(`head`)), false, true);
|
|
7654
7902
|
spread(_el$2, mergeProps(() => single(`search`)), false, true);
|
|
7655
7903
|
insert(_el$2, createComponent(BuiltinIcon, {
|
|
@@ -7665,7 +7913,7 @@ function SearchBody(props) {
|
|
|
7665
7913
|
return memo(() => !!props.showCount)() && props.query.trim() !== ``;
|
|
7666
7914
|
},
|
|
7667
7915
|
get children() {
|
|
7668
|
-
var _el$4 = _tmpl$$
|
|
7916
|
+
var _el$4 = _tmpl$$8();
|
|
7669
7917
|
spread(_el$4, mergeProps(() => single(`count`), {
|
|
7670
7918
|
"role": "status",
|
|
7671
7919
|
"aria-live": "polite"
|
|
@@ -7739,7 +7987,7 @@ function SearchBody(props) {
|
|
|
7739
7987
|
return item().icon;
|
|
7740
7988
|
},
|
|
7741
7989
|
get children() {
|
|
7742
|
-
var _el$0 = _tmpl$$
|
|
7990
|
+
var _el$0 = _tmpl$$8();
|
|
7743
7991
|
spread(_el$0, mergeProps(() => props.part.at(`icon`, index), {
|
|
7744
7992
|
"aria-hidden": "true"
|
|
7745
7993
|
}), false, true);
|
|
@@ -7758,13 +8006,13 @@ function SearchBody(props) {
|
|
|
7758
8006
|
return str(item().identifier);
|
|
7759
8007
|
},
|
|
7760
8008
|
get children() {
|
|
7761
|
-
var _el$1 = _tmpl$$
|
|
8009
|
+
var _el$1 = _tmpl$$8();
|
|
7762
8010
|
spread(_el$1, mergeProps(() => props.part.at(`identifier`, index)), false, true);
|
|
7763
8011
|
insert(_el$1, () => str(item().identifier));
|
|
7764
8012
|
return _el$1;
|
|
7765
8013
|
}
|
|
7766
8014
|
}), (() => {
|
|
7767
|
-
var _el$10 = _tmpl$$
|
|
8015
|
+
var _el$10 = _tmpl$$8();
|
|
7768
8016
|
spread(_el$10, mergeProps(() => props.part.at(`label`, index)), false, true);
|
|
7769
8017
|
insert(_el$10, () => str(item().label));
|
|
7770
8018
|
return _el$10;
|
|
@@ -7773,7 +8021,7 @@ function SearchBody(props) {
|
|
|
7773
8021
|
return memo(() => !!(props.picked !== void 0 && props.picked !== ``))() && item().value === props.picked;
|
|
7774
8022
|
},
|
|
7775
8023
|
get children() {
|
|
7776
|
-
var _el$11 = _tmpl$$
|
|
8024
|
+
var _el$11 = _tmpl$$8();
|
|
7777
8025
|
spread(_el$11, mergeProps(() => props.part.at(`check`, index), {
|
|
7778
8026
|
"aria-hidden": "true"
|
|
7779
8027
|
}), false, true);
|
|
@@ -7793,7 +8041,7 @@ function SearchBody(props) {
|
|
|
7793
8041
|
return props.rows.length === 0;
|
|
7794
8042
|
},
|
|
7795
8043
|
get children() {
|
|
7796
|
-
var _el$7 = _tmpl$3$
|
|
8044
|
+
var _el$7 = _tmpl$3$7();
|
|
7797
8045
|
spread(_el$7, mergeProps(() => single(`empty`)), false, true);
|
|
7798
8046
|
insert(_el$7, () => props.emptyText);
|
|
7799
8047
|
return _el$7;
|
|
@@ -7804,7 +8052,7 @@ function SearchBody(props) {
|
|
|
7804
8052
|
return memo(() => !!moreBelow())() && props.rows.length > props.maxRows;
|
|
7805
8053
|
},
|
|
7806
8054
|
get children() {
|
|
7807
|
-
var _el$8 = _tmpl$3$
|
|
8055
|
+
var _el$8 = _tmpl$3$7();
|
|
7808
8056
|
spread(_el$8, mergeProps(() => single(`fade`), {
|
|
7809
8057
|
"aria-hidden": "true"
|
|
7810
8058
|
}), false, false);
|
|
@@ -7837,7 +8085,7 @@ function SearchListNative(props) {
|
|
|
7837
8085
|
}) => hostSearches() || searchMatches(item, query())));
|
|
7838
8086
|
const maxRows = () => Math.max(1, Math.floor(num(props.props.maxRows, 8)));
|
|
7839
8087
|
return (() => {
|
|
7840
|
-
var _el$12 = _tmpl$3$
|
|
8088
|
+
var _el$12 = _tmpl$3$7();
|
|
7841
8089
|
spread(_el$12, mergeProps(() => props.rootProps), false, true);
|
|
7842
8090
|
insert(_el$12, createComponent(SearchBody, {
|
|
7843
8091
|
part,
|
|
@@ -7884,7 +8132,7 @@ const NATIVES_SEARCH = {
|
|
|
7884
8132
|
SearchList: SearchListNative
|
|
7885
8133
|
};
|
|
7886
8134
|
delegateEvents(["input", "keydown"]);
|
|
7887
|
-
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>`);
|
|
7888
8136
|
const TYPE_BUTTON = {
|
|
7889
8137
|
type: `button`
|
|
7890
8138
|
};
|
|
@@ -7960,15 +8208,7 @@ function ModalNative(props) {
|
|
|
7960
8208
|
const scope = createFocusScope({
|
|
7961
8209
|
trapped: () => true,
|
|
7962
8210
|
loop: true,
|
|
7963
|
-
onMountAutoFocus:
|
|
7964
|
-
const content = e.currentTarget;
|
|
7965
|
-
const marked = content?.querySelector(`[data-xui-autofocus]`) ?? content?.querySelector(`[data-xui-part="AlertDialog/cancel"]`);
|
|
7966
|
-
const target = marked && (marked.matches(`button,input,textarea,select,a[href],[tabindex]`) ? marked : marked.querySelector(`button,input,textarea,select,a[href],[tabindex]`));
|
|
7967
|
-
if (target) {
|
|
7968
|
-
e.preventDefault();
|
|
7969
|
-
target.focus();
|
|
7970
|
-
}
|
|
7971
|
-
},
|
|
8211
|
+
onMountAutoFocus: overlayOpenFocus,
|
|
7972
8212
|
onUnmountAutoFocus: (e) => {
|
|
7973
8213
|
e.preventDefault();
|
|
7974
8214
|
triggerEl?.focus();
|
|
@@ -7976,7 +8216,7 @@ function ModalNative(props) {
|
|
|
7976
8216
|
});
|
|
7977
8217
|
const [registered, setRegistered] = createSignal(false);
|
|
7978
8218
|
const el = (() => {
|
|
7979
|
-
var _el$ = _tmpl$2$
|
|
8219
|
+
var _el$ = _tmpl$2$7();
|
|
7980
8220
|
spread(_el$, mergeProps(() => part(`content`, open() && `open`), {
|
|
7981
8221
|
get ["data-side"]() {
|
|
7982
8222
|
return memo(() => props.kind === `Drawer`)() ? side() : void 0;
|
|
@@ -8006,7 +8246,7 @@ function ModalNative(props) {
|
|
|
8006
8246
|
insert(_el$, (() => {
|
|
8007
8247
|
var _c$ = memo(() => !!(props.kind === `Drawer` && (side() === `bottom` || side() === `top`)));
|
|
8008
8248
|
return () => _c$() ? (() => {
|
|
8009
|
-
var _el$4 = _tmpl$2$
|
|
8249
|
+
var _el$4 = _tmpl$2$7();
|
|
8010
8250
|
spread(_el$4, mergeProps(() => part(`handle`), {
|
|
8011
8251
|
"aria-hidden": "true",
|
|
8012
8252
|
get onPointerDown() {
|
|
@@ -8028,7 +8268,7 @@ function ModalNative(props) {
|
|
|
8028
8268
|
insert(_el$, (() => {
|
|
8029
8269
|
var _c$2 = memo(() => !!(title() || description()));
|
|
8030
8270
|
return () => _c$2() ? memo(() => props.kind === `Drawer`)() ? (() => {
|
|
8031
|
-
var _el$5 = _tmpl$3$
|
|
8271
|
+
var _el$5 = _tmpl$3$6();
|
|
8032
8272
|
addEventListener(_el$5, "pointercancel", drag.onPointerCancel);
|
|
8033
8273
|
addEventListener(_el$5, "pointerup", drag.onPointerUp, true);
|
|
8034
8274
|
addEventListener(_el$5, "pointermove", drag.onPointerMove, true);
|
|
@@ -8049,7 +8289,7 @@ function ModalNative(props) {
|
|
|
8049
8289
|
}));
|
|
8050
8290
|
return _el$5;
|
|
8051
8291
|
})() : (() => {
|
|
8052
|
-
var _el$6 = _tmpl$3$
|
|
8292
|
+
var _el$6 = _tmpl$3$6();
|
|
8053
8293
|
insert(_el$6, createComponent(ModalHead, {
|
|
8054
8294
|
part,
|
|
8055
8295
|
get title() {
|
|
@@ -8081,7 +8321,7 @@ function ModalNative(props) {
|
|
|
8081
8321
|
},
|
|
8082
8322
|
get children() {
|
|
8083
8323
|
return [(() => {
|
|
8084
|
-
var _el$2 = _tmpl$$
|
|
8324
|
+
var _el$2 = _tmpl$$7();
|
|
8085
8325
|
insert(_el$2, () => props.children);
|
|
8086
8326
|
return _el$2;
|
|
8087
8327
|
})(), createComponent(Show, {
|
|
@@ -8089,7 +8329,7 @@ function ModalNative(props) {
|
|
|
8089
8329
|
return props.node.slots?.footer;
|
|
8090
8330
|
},
|
|
8091
8331
|
get children() {
|
|
8092
|
-
var _el$3 = _tmpl$2$
|
|
8332
|
+
var _el$3 = _tmpl$2$7();
|
|
8093
8333
|
spread(_el$3, mergeProps(() => part(`footer`)), false, true);
|
|
8094
8334
|
insert(_el$3, () => props.slots.footer);
|
|
8095
8335
|
return _el$3;
|
|
@@ -8133,7 +8373,7 @@ function ModalNative(props) {
|
|
|
8133
8373
|
};
|
|
8134
8374
|
const Overlay = () => {
|
|
8135
8375
|
const el = (() => {
|
|
8136
|
-
var _el$9 = _tmpl$2$
|
|
8376
|
+
var _el$9 = _tmpl$2$7();
|
|
8137
8377
|
spread(_el$9, mergeProps(() => part(`overlay`, open() && `open`), {
|
|
8138
8378
|
get ["data-xui-overlay-backdrop"]() {
|
|
8139
8379
|
return props.kind;
|
|
@@ -8152,7 +8392,7 @@ function ModalNative(props) {
|
|
|
8152
8392
|
return el;
|
|
8153
8393
|
};
|
|
8154
8394
|
return [(() => {
|
|
8155
|
-
var _el$0 = _tmpl$2$
|
|
8395
|
+
var _el$0 = _tmpl$2$7();
|
|
8156
8396
|
spread(_el$0, mergeProps(() => overlayRootProps(props.rootProps, hasTrigger(), props.node.slots?.trigger)), false, true);
|
|
8157
8397
|
insert(_el$0, createComponent(Show, {
|
|
8158
8398
|
get when() {
|
|
@@ -8300,7 +8540,7 @@ function PopoverNative(props) {
|
|
|
8300
8540
|
},
|
|
8301
8541
|
children: (popper) => {
|
|
8302
8542
|
const el = (() => {
|
|
8303
|
-
var _el$13 = _tmpl$2$
|
|
8543
|
+
var _el$13 = _tmpl$2$7();
|
|
8304
8544
|
spread(_el$13, mergeProps(() => part(`content`, open() && `open`), {
|
|
8305
8545
|
get ["data-side"]() {
|
|
8306
8546
|
return popper.placedSide();
|
|
@@ -8357,7 +8597,7 @@ function PopoverNative(props) {
|
|
|
8357
8597
|
});
|
|
8358
8598
|
};
|
|
8359
8599
|
return [(() => {
|
|
8360
|
-
var _el$14 = _tmpl$2$
|
|
8600
|
+
var _el$14 = _tmpl$2$7();
|
|
8361
8601
|
spread(_el$14, mergeProps(() => overlayRootProps(props.rootProps, hasTrigger(), props.node.slots?.trigger)), false, true);
|
|
8362
8602
|
insert(_el$14, createComponent(Show, {
|
|
8363
8603
|
get when() {
|
|
@@ -8514,7 +8754,7 @@ function TooltipNative(props) {
|
|
|
8514
8754
|
collisionPadding: OVERLAY_PADDING,
|
|
8515
8755
|
children: (popper) => {
|
|
8516
8756
|
const el = (() => {
|
|
8517
|
-
var _el$17 = _tmpl$2$
|
|
8757
|
+
var _el$17 = _tmpl$2$7();
|
|
8518
8758
|
spread(_el$17, mergeProps(() => part(`content`), {
|
|
8519
8759
|
get ["data-side"]() {
|
|
8520
8760
|
return popper.placedSide();
|
|
@@ -8653,7 +8893,7 @@ function MenuSeparator(props) {
|
|
|
8653
8893
|
}
|
|
8654
8894
|
function MenuLabel(props) {
|
|
8655
8895
|
return (() => {
|
|
8656
|
-
var _el$21 = _tmpl$2$
|
|
8896
|
+
var _el$21 = _tmpl$2$7();
|
|
8657
8897
|
spread(_el$21, mergeProps(() => props.root.part(`label`)), false, true);
|
|
8658
8898
|
insert(_el$21, () => str(props.item.label));
|
|
8659
8899
|
return _el$21;
|
|
@@ -9061,7 +9301,7 @@ function MenuSearch(props) {
|
|
|
9061
9301
|
}
|
|
9062
9302
|
})));
|
|
9063
9303
|
return (() => {
|
|
9064
|
-
var _el$32 = _tmpl$14();
|
|
9304
|
+
var _el$32 = _tmpl$14$1();
|
|
9065
9305
|
_el$32.addEventListener("pointerenter", (e) => {
|
|
9066
9306
|
const input = e.currentTarget.querySelector(`input`);
|
|
9067
9307
|
if (input && !e.currentTarget.contains(document.activeElement)) input.focus({
|
|
@@ -9168,15 +9408,116 @@ function createMenuRoot(props, part, close, openOn) {
|
|
|
9168
9408
|
function PressMenuOpening(props) {
|
|
9169
9409
|
const ctx = useSurfaceContext();
|
|
9170
9410
|
const part = parts(props);
|
|
9171
|
-
const items = () => objects(props.props.items);
|
|
9172
9411
|
const label = () => str(props.props.label);
|
|
9173
9412
|
const icon = () => str(props.props.icon);
|
|
9174
9413
|
const [open, setOpen] = createSignal(false);
|
|
9175
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);
|
|
9176
9508
|
const triggerId = createUniqueId();
|
|
9177
9509
|
const contentId = createUniqueId();
|
|
9178
9510
|
const [trigger, setTrigger] = createSignal();
|
|
9179
|
-
|
|
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
|
+
};
|
|
9180
9521
|
const presence = createPresence(open);
|
|
9181
9522
|
let interactedOutside = false;
|
|
9182
9523
|
const triggerAttrs2 = () => ({
|
|
@@ -9202,67 +9543,12 @@ function PressMenuOpening(props) {
|
|
|
9202
9543
|
return createComponent(MenuRootContext.Provider, {
|
|
9203
9544
|
value: root,
|
|
9204
9545
|
get children() {
|
|
9205
|
-
return [(() => {
|
|
9206
|
-
|
|
9207
|
-
|
|
9208
|
-
|
|
9209
|
-
|
|
9210
|
-
|
|
9211
|
-
},
|
|
9212
|
-
get fallback() {
|
|
9213
|
-
return (
|
|
9214
|
-
// Round 2 §7: the default trigger = an outline button with the
|
|
9215
|
-
// icon (when set) and the label (`$string.menu` without one and
|
|
9216
|
-
// without an icon), no chevron.
|
|
9217
|
-
(() => {
|
|
9218
|
-
var _el$36 = _tmpl$16();
|
|
9219
|
-
use(setTrigger, _el$36);
|
|
9220
|
-
spread(_el$36, mergeProps(triggerAttrs2, () => part(`trigger`, open() && `open`), {
|
|
9221
|
-
get ["aria-label"]() {
|
|
9222
|
-
return label() || ctx.t(`menu`);
|
|
9223
|
-
},
|
|
9224
|
-
"onPointerDown": onPointerDown,
|
|
9225
|
-
"onKeyDown": onKeyDown
|
|
9226
|
-
}), false, true);
|
|
9227
|
-
insert(_el$36, (() => {
|
|
9228
|
-
var _c$4 = memo(() => !!icon());
|
|
9229
|
-
return () => _c$4() ? createComponent(IconGlyph, {
|
|
9230
|
-
get icons() {
|
|
9231
|
-
return ctx.host.icons;
|
|
9232
|
-
},
|
|
9233
|
-
get name() {
|
|
9234
|
-
return icon();
|
|
9235
|
-
},
|
|
9236
|
-
"class": "xui-icon",
|
|
9237
|
-
width: 16,
|
|
9238
|
-
height: 16
|
|
9239
|
-
}) : null;
|
|
9240
|
-
})(), null);
|
|
9241
|
-
insert(_el$36, (() => {
|
|
9242
|
-
var _c$5 = memo(() => !!(label() || !icon()));
|
|
9243
|
-
return () => _c$5() ? (() => {
|
|
9244
|
-
var _el$37 = _tmpl$9$2();
|
|
9245
|
-
insert(_el$37, () => label() || ctx.t(`menu`));
|
|
9246
|
-
return _el$37;
|
|
9247
|
-
})() : null;
|
|
9248
|
-
})(), null);
|
|
9249
|
-
return _el$36;
|
|
9250
|
-
})()
|
|
9251
|
-
);
|
|
9252
|
-
},
|
|
9253
|
-
get children() {
|
|
9254
|
-
var _el$35 = _tmpl$6$3();
|
|
9255
|
-
use(setTrigger, _el$35);
|
|
9256
|
-
spread(_el$35, mergeProps(triggerAttrs2, {
|
|
9257
|
-
"onPointerDown": onPointerDown,
|
|
9258
|
-
"onKeyDown": onKeyDown
|
|
9259
|
-
}), false, true);
|
|
9260
|
-
insert(_el$35, () => props.children);
|
|
9261
|
-
return _el$35;
|
|
9262
|
-
}
|
|
9263
|
-
}));
|
|
9264
|
-
return _el$34;
|
|
9265
|
-
})(), createComponent(LayerPortal, {
|
|
9546
|
+
return [memo(() => props.trigger({
|
|
9547
|
+
ref: setTrigger,
|
|
9548
|
+
attrs: triggerAttrs2,
|
|
9549
|
+
onPointerDown,
|
|
9550
|
+
onKeyDown
|
|
9551
|
+
})), createComponent(LayerPortal, {
|
|
9266
9552
|
get mount() {
|
|
9267
9553
|
return ctx.portal;
|
|
9268
9554
|
},
|
|
@@ -9276,8 +9562,12 @@ function PressMenuOpening(props) {
|
|
|
9276
9562
|
get anchor() {
|
|
9277
9563
|
return trigger();
|
|
9278
9564
|
},
|
|
9279
|
-
side
|
|
9280
|
-
|
|
9565
|
+
get side() {
|
|
9566
|
+
return props.side ?? `bottom`;
|
|
9567
|
+
},
|
|
9568
|
+
get align() {
|
|
9569
|
+
return props.align ?? `start`;
|
|
9570
|
+
},
|
|
9281
9571
|
sideOffset: OVERLAY_OFFSET,
|
|
9282
9572
|
get dir() {
|
|
9283
9573
|
return root.dir();
|
|
@@ -9290,7 +9580,7 @@ function PressMenuOpening(props) {
|
|
|
9290
9580
|
labelledBy: triggerId,
|
|
9291
9581
|
state: () => open() ? `open` : `closed`,
|
|
9292
9582
|
attrs: () => ({
|
|
9293
|
-
...part(`content`, open() && `open`),
|
|
9583
|
+
...props.part(`content`, open() && `open`),
|
|
9294
9584
|
"data-xui-overlay": `Menu`,
|
|
9295
9585
|
"data-open-on": `press`
|
|
9296
9586
|
}),
|
|
@@ -9309,10 +9599,10 @@ function PressMenuOpening(props) {
|
|
|
9309
9599
|
get children() {
|
|
9310
9600
|
return createComponent(MenuEntries, {
|
|
9311
9601
|
get items() {
|
|
9312
|
-
return items
|
|
9602
|
+
return props.items;
|
|
9313
9603
|
},
|
|
9314
9604
|
get raws() {
|
|
9315
|
-
return
|
|
9605
|
+
return props.raws;
|
|
9316
9606
|
},
|
|
9317
9607
|
path: ""
|
|
9318
9608
|
});
|
|
@@ -9357,7 +9647,7 @@ function ContextMenuOpening(props) {
|
|
|
9357
9647
|
value: root,
|
|
9358
9648
|
get children() {
|
|
9359
9649
|
return [(() => {
|
|
9360
|
-
var _el$38 = _tmpl$2$
|
|
9650
|
+
var _el$38 = _tmpl$2$7();
|
|
9361
9651
|
spread(_el$38, mergeProps(() => props.rootProps, {
|
|
9362
9652
|
get ["data-state"]() {
|
|
9363
9653
|
return open() ? `open` : `closed`;
|
|
@@ -9576,7 +9866,7 @@ const NATIVES_OVERLAYS = {
|
|
|
9576
9866
|
Toast: ToastNative
|
|
9577
9867
|
};
|
|
9578
9868
|
delegateEvents(["pointerdown", "pointermove", "pointerup"]);
|
|
9579
|
-
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>`);
|
|
9580
9870
|
const UNFOCUSABLE = {
|
|
9581
9871
|
focusable: `false`
|
|
9582
9872
|
};
|
|
@@ -9601,7 +9891,7 @@ function QrCodeNative(props) {
|
|
|
9601
9891
|
const paint = createMemo(() => qrPaint(str(props.props.value), str(props.props.level, `M`), plateColour(), moduleColour()));
|
|
9602
9892
|
const label = () => str(props.props.label);
|
|
9603
9893
|
return (() => {
|
|
9604
|
-
var _el$ = _tmpl$3$
|
|
9894
|
+
var _el$ = _tmpl$3$5(), _el$2 = _el$.firstChild;
|
|
9605
9895
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
9606
9896
|
get role() {
|
|
9607
9897
|
return label() ? `img` : void 0;
|
|
@@ -9630,7 +9920,7 @@ function QrCodeNative(props) {
|
|
|
9630
9920
|
return paint().matrix;
|
|
9631
9921
|
},
|
|
9632
9922
|
get children() {
|
|
9633
|
-
var _el$3 = _tmpl$$
|
|
9923
|
+
var _el$3 = _tmpl$$6(), _el$4 = _el$3.firstChild;
|
|
9634
9924
|
spread(_el$3, mergeProps({
|
|
9635
9925
|
get viewBox() {
|
|
9636
9926
|
return `0 0 ${paint().modules} ${paint().modules}`;
|
|
@@ -9658,7 +9948,7 @@ function QrCodeNative(props) {
|
|
|
9658
9948
|
return label();
|
|
9659
9949
|
},
|
|
9660
9950
|
get children() {
|
|
9661
|
-
var _el$5 = _tmpl$2$
|
|
9951
|
+
var _el$5 = _tmpl$2$6();
|
|
9662
9952
|
spread(_el$5, mergeProps(() => part(`label`), {
|
|
9663
9953
|
"aria-hidden": "true"
|
|
9664
9954
|
}), false, true);
|
|
@@ -9787,7 +10077,7 @@ function QrScannerNative(props) {
|
|
|
9787
10077
|
})();
|
|
9788
10078
|
},
|
|
9789
10079
|
get children() {
|
|
9790
|
-
var _el$9 = _tmpl$2$
|
|
10080
|
+
var _el$9 = _tmpl$2$6();
|
|
9791
10081
|
spread(_el$9, mergeProps(() => part(`scanLine`), {
|
|
9792
10082
|
"aria-hidden": "true"
|
|
9793
10083
|
}), false, false);
|
|
@@ -9799,7 +10089,7 @@ function QrScannerNative(props) {
|
|
|
9799
10089
|
return hint();
|
|
9800
10090
|
},
|
|
9801
10091
|
get children() {
|
|
9802
|
-
var _el$0 = _tmpl$2$
|
|
10092
|
+
var _el$0 = _tmpl$2$6();
|
|
9803
10093
|
spread(_el$0, mergeProps(() => part(`hint`)), false, true);
|
|
9804
10094
|
insert(_el$0, hint);
|
|
9805
10095
|
return _el$0;
|
|
@@ -9812,7 +10102,7 @@ const NATIVES_QR = {
|
|
|
9812
10102
|
QrCode: QrCodeNative,
|
|
9813
10103
|
QrScanner: QrScannerNative
|
|
9814
10104
|
};
|
|
9815
|
-
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>`);
|
|
9816
10106
|
const RESIZE_KEYS = /* @__PURE__ */ new Set([`ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`, `Home`, `End`, `Enter`]);
|
|
9817
10107
|
const sameKeys = (a, b) => a.length === b.length && a.every((x, i) => x === b[i]);
|
|
9818
10108
|
function ResizableNative(props) {
|
|
@@ -9887,7 +10177,7 @@ function ResizableNative(props) {
|
|
|
9887
10177
|
equals: sameKeys
|
|
9888
10178
|
});
|
|
9889
10179
|
return (() => {
|
|
9890
|
-
var _el$ = _tmpl$$
|
|
10180
|
+
var _el$ = _tmpl$$5();
|
|
9891
10181
|
var _ref$ = rootEl;
|
|
9892
10182
|
typeof _ref$ === "function" ? use(_ref$, _el$) : rootEl = _el$;
|
|
9893
10183
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
@@ -9910,7 +10200,7 @@ function ResizableNative(props) {
|
|
|
9910
10200
|
const lim = () => limits()[index()] ?? {};
|
|
9911
10201
|
const active = () => live() !== null && drag?.handle === index();
|
|
9912
10202
|
return [(() => {
|
|
9913
|
-
var _el$2 = _tmpl$$
|
|
10203
|
+
var _el$2 = _tmpl$$5();
|
|
9914
10204
|
spread(_el$2, mergeProps(() => part.at(`panel`, index()), {
|
|
9915
10205
|
get id() {
|
|
9916
10206
|
return panelId();
|
|
@@ -9935,7 +10225,7 @@ function ResizableNative(props) {
|
|
|
9935
10225
|
return index() < count() - 1;
|
|
9936
10226
|
},
|
|
9937
10227
|
get children() {
|
|
9938
|
-
var _el$3 = _tmpl$2$
|
|
10228
|
+
var _el$3 = _tmpl$2$5(), _el$4 = _el$3.firstChild;
|
|
9939
10229
|
spread(_el$3, mergeProps(() => part.at(`handle`, index(), active() && `pressed`), {
|
|
9940
10230
|
"role": "separator",
|
|
9941
10231
|
"tabindex": 0,
|
|
@@ -9966,7 +10256,7 @@ function ResizableNative(props) {
|
|
|
9966
10256
|
insert(_el$3, (() => {
|
|
9967
10257
|
var _c$ = memo(() => !!bool(props.props.handle));
|
|
9968
10258
|
return () => _c$() ? (() => {
|
|
9969
|
-
var _el$5 = _tmpl$3$
|
|
10259
|
+
var _el$5 = _tmpl$3$4();
|
|
9970
10260
|
spread(_el$5, mergeProps(() => part.at(`grip`, index()), {
|
|
9971
10261
|
"aria-hidden": "true"
|
|
9972
10262
|
}), false, false);
|
|
@@ -9989,7 +10279,7 @@ function ResizableNative(props) {
|
|
|
9989
10279
|
const NATIVES_RESIZABLE = {
|
|
9990
10280
|
Resizable: ResizableNative
|
|
9991
10281
|
};
|
|
9992
|
-
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>`);
|
|
9993
10283
|
const asList = (raw) => Array.isArray(raw) ? raw.map(String) : raw === void 0 || raw === null || raw === `` ? [] : String(raw).split(`,`);
|
|
9994
10284
|
function SelectNative(props) {
|
|
9995
10285
|
const part = parts(props);
|
|
@@ -10079,7 +10369,7 @@ function SelectNative(props) {
|
|
|
10079
10369
|
field: f
|
|
10080
10370
|
};
|
|
10081
10371
|
return (() => {
|
|
10082
|
-
var _el$ = _tmpl$$
|
|
10372
|
+
var _el$ = _tmpl$$4();
|
|
10083
10373
|
spread(_el$, mergeProps(() => props.rootProps, {
|
|
10084
10374
|
get ["data-source"]() {
|
|
10085
10375
|
return source() || void 0;
|
|
@@ -10161,7 +10451,7 @@ function PlainSelect(props) {
|
|
|
10161
10451
|
};
|
|
10162
10452
|
const optionKey = createMemo(() => s.options().map((o) => o.value).join(`;`));
|
|
10163
10453
|
return [(() => {
|
|
10164
|
-
var _el$2 = _tmpl$2$
|
|
10454
|
+
var _el$2 = _tmpl$2$4(), _el$3 = _el$2.firstChild;
|
|
10165
10455
|
var _ref$ = s.setTrigger;
|
|
10166
10456
|
typeof _ref$ === "function" ? use(_ref$, _el$2) : s.setTrigger = _el$2;
|
|
10167
10457
|
setAttribute(_el$2, "aria-controls", contentId);
|
|
@@ -10221,14 +10511,14 @@ function PlainSelect(props) {
|
|
|
10221
10511
|
insert(_el$3, (() => {
|
|
10222
10512
|
var _c$ = memo(() => !!chosen());
|
|
10223
10513
|
return () => _c$() ? (() => {
|
|
10224
|
-
var _el$4 = _tmpl$3$
|
|
10514
|
+
var _el$4 = _tmpl$3$3();
|
|
10225
10515
|
insert(_el$4, () => str(chosen().label));
|
|
10226
10516
|
effect((_$p) => style(_el$4, css({
|
|
10227
10517
|
pointerEvents: `none`
|
|
10228
10518
|
}), _$p));
|
|
10229
10519
|
return _el$4;
|
|
10230
10520
|
})() : (() => {
|
|
10231
|
-
var _el$5 = _tmpl$3$
|
|
10521
|
+
var _el$5 = _tmpl$3$3();
|
|
10232
10522
|
spread(_el$5, mergeProps(() => part(`placeholder`)), false, true);
|
|
10233
10523
|
insert(_el$5, () => s.placeholder());
|
|
10234
10524
|
return _el$5;
|
|
@@ -10431,7 +10721,7 @@ function PlainSelectContent(props) {
|
|
|
10431
10721
|
insert(_el$8, (() => {
|
|
10432
10722
|
var _c$2 = memo(() => s.options().length === 0);
|
|
10433
10723
|
return () => _c$2() ? (() => {
|
|
10434
|
-
var _el$9 = _tmpl$$
|
|
10724
|
+
var _el$9 = _tmpl$$4();
|
|
10435
10725
|
spread(_el$9, mergeProps(() => part(`empty`)), false, true);
|
|
10436
10726
|
insert(_el$9, () => props.emptyText || ctx.t(`noResults`));
|
|
10437
10727
|
return _el$9;
|
|
@@ -10633,7 +10923,7 @@ function Combobox(props) {
|
|
|
10633
10923
|
insert(_el$12, (() => {
|
|
10634
10924
|
var _c$4 = memo(() => !!chosen().length);
|
|
10635
10925
|
return () => _c$4() ? chosen().map((o) => str(o.label)).join(`, `) : (() => {
|
|
10636
|
-
var _el$13 = _tmpl$3$
|
|
10926
|
+
var _el$13 = _tmpl$3$3();
|
|
10637
10927
|
spread(_el$13, mergeProps(() => part(`placeholder`)), false, true);
|
|
10638
10928
|
insert(_el$13, () => s.placeholder());
|
|
10639
10929
|
return _el$13;
|
|
@@ -10772,7 +11062,7 @@ function ComboboxContent(props) {
|
|
|
10772
11062
|
insert(_el$15, (() => {
|
|
10773
11063
|
var _c$6 = memo(() => props.shown().length === 0);
|
|
10774
11064
|
return () => _c$6() ? (() => {
|
|
10775
|
-
var _el$18 = _tmpl$$
|
|
11065
|
+
var _el$18 = _tmpl$$4();
|
|
10776
11066
|
spread(_el$18, mergeProps(() => part(`empty`)), false, true);
|
|
10777
11067
|
insert(_el$18, () => props.emptyText || ctx.t(`noResults`));
|
|
10778
11068
|
return _el$18;
|
|
@@ -10820,7 +11110,7 @@ function ComboboxContent(props) {
|
|
|
10820
11110
|
insert(_el$19, (() => {
|
|
10821
11111
|
var _c$8 = memo(() => !!isSel());
|
|
10822
11112
|
return () => _c$8() ? (() => {
|
|
10823
|
-
var _el$21 = _tmpl$3$
|
|
11113
|
+
var _el$21 = _tmpl$3$3();
|
|
10824
11114
|
spread(_el$21, mergeProps(() => part(`check`), {
|
|
10825
11115
|
get ["class"]() {
|
|
10826
11116
|
return `${part(`check`).class} xui-Select-check`;
|
|
@@ -10866,7 +11156,7 @@ const NATIVES_SELECT = {
|
|
|
10866
11156
|
Select: SelectNative
|
|
10867
11157
|
};
|
|
10868
11158
|
delegateEvents(["keydown"]);
|
|
10869
|
-
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>`);
|
|
10870
11160
|
const CURRENCY_CODE = /^[A-Za-z]{3}$/;
|
|
10871
11161
|
const cellNumber = (v) => typeof v === `number` ? v : typeof v === `string` && v.trim() !== `` ? Number(v) : NaN;
|
|
10872
11162
|
const checkState = (c) => c === `indeterminate` ? `indeterminate` : c ? `checked` : `unchecked`;
|
|
@@ -10884,7 +11174,7 @@ function TableCheckbox(props) {
|
|
|
10884
11174
|
});
|
|
10885
11175
|
const state = () => checkState(props.checked);
|
|
10886
11176
|
return [(() => {
|
|
10887
|
-
var _el$ = _tmpl$2$
|
|
11177
|
+
var _el$ = _tmpl$2$3();
|
|
10888
11178
|
var _ref$ = button;
|
|
10889
11179
|
typeof _ref$ === "function" ? use(_ref$, _el$) : button = _el$;
|
|
10890
11180
|
spread(_el$, mergeProps(() => props.attrs, {
|
|
@@ -10918,7 +11208,7 @@ function TableCheckbox(props) {
|
|
|
10918
11208
|
return props.checked !== false;
|
|
10919
11209
|
},
|
|
10920
11210
|
get children() {
|
|
10921
|
-
var _el$2 = _tmpl$$
|
|
11211
|
+
var _el$2 = _tmpl$$3();
|
|
10922
11212
|
insert(_el$2, createComponent(BuiltinIcon, {
|
|
10923
11213
|
slot: "Checkbox.check"
|
|
10924
11214
|
}));
|
|
@@ -10942,7 +11232,7 @@ function TableCheckbox(props) {
|
|
|
10942
11232
|
return inForm();
|
|
10943
11233
|
},
|
|
10944
11234
|
get children() {
|
|
10945
|
-
var _el$3 = _tmpl$3$
|
|
11235
|
+
var _el$3 = _tmpl$3$2();
|
|
10946
11236
|
setAttribute(_el$3, "checked", initial ? `` : void 0);
|
|
10947
11237
|
effect((_$p) => style(_el$3, css({
|
|
10948
11238
|
...size2() ?? {},
|
|
@@ -10980,7 +11270,8 @@ function TableNative(props) {
|
|
|
10980
11270
|
const s = sort();
|
|
10981
11271
|
return sortBound() ? rows().map((_, i) => i) : sortRows(rows(), s, columns().find((c) => c.key === s?.key), ctx.locale);
|
|
10982
11272
|
});
|
|
10983
|
-
const template2 = createMemo(() =>
|
|
11273
|
+
const template2 = createMemo(() => tableTemplate(columns(), selectable() === `multiple`));
|
|
11274
|
+
const minWidth = createMemo(() => tableMinWidth(columns(), selectable() === `multiple`));
|
|
10984
11275
|
const cycle = (c) => {
|
|
10985
11276
|
const cur = untrack(sort);
|
|
10986
11277
|
const next = cur?.key === c.key && cur.direction === `asc` ? {
|
|
@@ -11193,7 +11484,11 @@ function TableNative(props) {
|
|
|
11193
11484
|
align: c().align ?? `start`
|
|
11194
11485
|
})), _el$9);
|
|
11195
11486
|
insert(_el$9, () => {
|
|
11196
|
-
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());
|
|
11197
11492
|
return untrack(() => {
|
|
11198
11493
|
const slot = createMemo(() => c().slot ? props.node.slots?.[c().slot] : void 0);
|
|
11199
11494
|
return createComponent(Show, {
|
|
@@ -11225,13 +11520,15 @@ function TableNative(props) {
|
|
|
11225
11520
|
});
|
|
11226
11521
|
});
|
|
11227
11522
|
effect((_p$) => {
|
|
11228
|
-
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;
|
|
11229
11524
|
_v$9 !== _p$.e && setAttribute(_el$9, "role", _p$.e = _v$9);
|
|
11230
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);
|
|
11231
11527
|
return _p$;
|
|
11232
11528
|
}, {
|
|
11233
11529
|
e: void 0,
|
|
11234
|
-
t: void 0
|
|
11530
|
+
t: void 0,
|
|
11531
|
+
a: void 0
|
|
11235
11532
|
});
|
|
11236
11533
|
return _el$9;
|
|
11237
11534
|
})();
|
|
@@ -11257,8 +11554,8 @@ function TableNative(props) {
|
|
|
11257
11554
|
};
|
|
11258
11555
|
const caption = () => str(props.props.caption);
|
|
11259
11556
|
return (() => {
|
|
11260
|
-
var _el$
|
|
11261
|
-
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, {
|
|
11262
11559
|
get role() {
|
|
11263
11560
|
return interactive() ? `grid` : `table`;
|
|
11264
11561
|
},
|
|
@@ -11278,18 +11575,23 @@ function TableNative(props) {
|
|
|
11278
11575
|
return windowed() ? `true` : void 0;
|
|
11279
11576
|
}
|
|
11280
11577
|
}), false, true);
|
|
11281
|
-
spread(_el$
|
|
11578
|
+
spread(_el$10, mergeProps(() => part(`header`), {
|
|
11282
11579
|
get ["data-sticky"]() {
|
|
11283
11580
|
return bool(props.props.stickyHeader) ? `true` : void 0;
|
|
11581
|
+
},
|
|
11582
|
+
get style() {
|
|
11583
|
+
return css({
|
|
11584
|
+
minWidth: minWidth()
|
|
11585
|
+
});
|
|
11284
11586
|
}
|
|
11285
11587
|
}), false, true);
|
|
11286
|
-
insert(_el$
|
|
11588
|
+
insert(_el$11, createComponent(Show, {
|
|
11287
11589
|
get when() {
|
|
11288
11590
|
return selectable() === `multiple`;
|
|
11289
11591
|
},
|
|
11290
11592
|
get children() {
|
|
11291
|
-
var _el$
|
|
11292
|
-
insert(_el$
|
|
11593
|
+
var _el$12 = _tmpl$0();
|
|
11594
|
+
insert(_el$12, createComponent(TableCheckbox, {
|
|
11293
11595
|
get attrs() {
|
|
11294
11596
|
return part.at(`checkbox`, `header`, allSelected() && `checked`);
|
|
11295
11597
|
},
|
|
@@ -11304,10 +11606,10 @@ function TableNative(props) {
|
|
|
11304
11606
|
},
|
|
11305
11607
|
onChange: (next) => select(next ? untrack(allKeys) : [])
|
|
11306
11608
|
}));
|
|
11307
|
-
return _el$
|
|
11609
|
+
return _el$12;
|
|
11308
11610
|
}
|
|
11309
11611
|
}), null);
|
|
11310
|
-
insert(_el$
|
|
11612
|
+
insert(_el$11, createComponent(Index, {
|
|
11311
11613
|
get each() {
|
|
11312
11614
|
return columns();
|
|
11313
11615
|
},
|
|
@@ -11318,36 +11620,36 @@ function TableNative(props) {
|
|
|
11318
11620
|
};
|
|
11319
11621
|
const ariaSort = () => active() === `asc` ? `ascending` : active() === `desc` ? `descending` : c().sortable ? `none` : void 0;
|
|
11320
11622
|
return (() => {
|
|
11321
|
-
var _el$
|
|
11322
|
-
spread(_el$
|
|
11623
|
+
var _el$16 = _tmpl$12();
|
|
11624
|
+
spread(_el$16, mergeProps({
|
|
11323
11625
|
get ["aria-sort"]() {
|
|
11324
11626
|
return ariaSort();
|
|
11325
11627
|
}
|
|
11326
11628
|
}, () => part.atWith(`headerCell`, ci, {
|
|
11327
11629
|
align: c().align ?? `start`
|
|
11328
11630
|
})), false, true);
|
|
11329
|
-
insert(_el$
|
|
11631
|
+
insert(_el$16, createComponent(Show, {
|
|
11330
11632
|
get when() {
|
|
11331
11633
|
return c().sortable;
|
|
11332
11634
|
},
|
|
11333
11635
|
get fallback() {
|
|
11334
11636
|
return (() => {
|
|
11335
|
-
var _el$
|
|
11336
|
-
insert(_el$
|
|
11337
|
-
return _el$
|
|
11637
|
+
var _el$20 = _tmpl$13();
|
|
11638
|
+
insert(_el$20, () => str(c().label));
|
|
11639
|
+
return _el$20;
|
|
11338
11640
|
})();
|
|
11339
11641
|
},
|
|
11340
11642
|
get children() {
|
|
11341
|
-
var _el$
|
|
11342
|
-
_el$
|
|
11343
|
-
insert(_el$
|
|
11344
|
-
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`), {
|
|
11345
11647
|
get ["data-direction"]() {
|
|
11346
11648
|
return active() ?? void 0;
|
|
11347
11649
|
},
|
|
11348
11650
|
"aria-hidden": "true"
|
|
11349
11651
|
}), false, true);
|
|
11350
|
-
insert(_el$
|
|
11652
|
+
insert(_el$19, (() => {
|
|
11351
11653
|
var _c$ = memo(() => !!active());
|
|
11352
11654
|
return () => _c$() ? createComponent(BuiltinIcon, {
|
|
11353
11655
|
get slot() {
|
|
@@ -11355,33 +11657,38 @@ function TableNative(props) {
|
|
|
11355
11657
|
}
|
|
11356
11658
|
}) : null;
|
|
11357
11659
|
})());
|
|
11358
|
-
effect(() => setAttribute(_el$
|
|
11660
|
+
effect(() => setAttribute(_el$17, "aria-label", phrase(ctx, active() === `asc` ? `sortByDescending` : `sortByAscending`, {
|
|
11359
11661
|
name: str(c().label)
|
|
11360
11662
|
}, () => `${str(c().label)}: ${ctx.t(active() === `asc` ? `sortDescending` : `sortAscending`)}`)));
|
|
11361
|
-
return _el$
|
|
11663
|
+
return _el$17;
|
|
11362
11664
|
}
|
|
11363
11665
|
}));
|
|
11364
|
-
return _el$
|
|
11666
|
+
return _el$16;
|
|
11365
11667
|
})();
|
|
11366
11668
|
}
|
|
11367
11669
|
}), null);
|
|
11368
11670
|
var _ref$2 = bodyEl;
|
|
11369
|
-
typeof _ref$2 === "function" ? use(_ref$2, _el$
|
|
11370
|
-
spread(_el$
|
|
11671
|
+
typeof _ref$2 === "function" ? use(_ref$2, _el$13) : bodyEl = _el$13;
|
|
11672
|
+
spread(_el$13, mergeProps(() => part(`body`), {
|
|
11371
11673
|
get ["class"]() {
|
|
11372
11674
|
return `${part(`body`).class} xui-table-body`;
|
|
11675
|
+
},
|
|
11676
|
+
get style() {
|
|
11677
|
+
return css({
|
|
11678
|
+
minWidth: minWidth()
|
|
11679
|
+
});
|
|
11373
11680
|
}
|
|
11374
11681
|
}), false, true);
|
|
11375
|
-
insert(_el$
|
|
11682
|
+
insert(_el$13, createComponent(Show, {
|
|
11376
11683
|
get when() {
|
|
11377
11684
|
return rows().length > 0;
|
|
11378
11685
|
},
|
|
11379
11686
|
get fallback() {
|
|
11380
11687
|
return (() => {
|
|
11381
|
-
var _el$
|
|
11382
|
-
spread(_el$
|
|
11383
|
-
insert(_el$
|
|
11384
|
-
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;
|
|
11385
11692
|
})();
|
|
11386
11693
|
},
|
|
11387
11694
|
get children() {
|
|
@@ -11427,37 +11734,37 @@ function TableNative(props) {
|
|
|
11427
11734
|
});
|
|
11428
11735
|
}
|
|
11429
11736
|
}));
|
|
11430
|
-
insert(_el$
|
|
11737
|
+
insert(_el$1, createComponent(Show, {
|
|
11431
11738
|
get when() {
|
|
11432
11739
|
return caption();
|
|
11433
11740
|
},
|
|
11434
11741
|
get children() {
|
|
11435
|
-
var _el$
|
|
11436
|
-
spread(_el$
|
|
11742
|
+
var _el$14 = _tmpl$8();
|
|
11743
|
+
spread(_el$14, mergeProps(() => part(`caption`), {
|
|
11437
11744
|
get id() {
|
|
11438
11745
|
return `${props.domId}.caption`;
|
|
11439
11746
|
}
|
|
11440
11747
|
}), false, true);
|
|
11441
|
-
insert(_el$
|
|
11442
|
-
return _el$
|
|
11748
|
+
insert(_el$14, caption);
|
|
11749
|
+
return _el$14;
|
|
11443
11750
|
}
|
|
11444
11751
|
}), null);
|
|
11445
|
-
insert(_el$
|
|
11752
|
+
insert(_el$1, createComponent(Show, {
|
|
11446
11753
|
get when() {
|
|
11447
11754
|
return memo(() => selectable() === `multiple`)() && selected().length;
|
|
11448
11755
|
},
|
|
11449
11756
|
get children() {
|
|
11450
|
-
var _el$
|
|
11451
|
-
insert(_el$
|
|
11757
|
+
var _el$15 = _tmpl$1();
|
|
11758
|
+
insert(_el$15, () => ctx.t(`selectedCount`, {
|
|
11452
11759
|
count: selected().length
|
|
11453
11760
|
}));
|
|
11454
|
-
return _el$
|
|
11761
|
+
return _el$15;
|
|
11455
11762
|
}
|
|
11456
11763
|
}), null);
|
|
11457
|
-
effect((_$p) => style(_el$
|
|
11764
|
+
effect((_$p) => style(_el$11, css({
|
|
11458
11765
|
gridTemplateColumns: template2()
|
|
11459
11766
|
}), _$p));
|
|
11460
|
-
return _el$
|
|
11767
|
+
return _el$1;
|
|
11461
11768
|
})();
|
|
11462
11769
|
}
|
|
11463
11770
|
function RowScope(props) {
|
|
@@ -11500,6 +11807,234 @@ const NATIVES_TABLE = {
|
|
|
11500
11807
|
Table: TableNative
|
|
11501
11808
|
};
|
|
11502
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
|
+
};
|
|
11503
12038
|
const PROVIDED = {
|
|
11504
12039
|
Box: BoxNative,
|
|
11505
12040
|
List: ListNative,
|
|
@@ -11517,13 +12052,15 @@ const PROVIDED = {
|
|
|
11517
12052
|
...NATIVES_FEEDBACK,
|
|
11518
12053
|
...NATIVES_INPUTS,
|
|
11519
12054
|
...NATIVES_MEDIA,
|
|
12055
|
+
...NATIVES_MOTION,
|
|
11520
12056
|
...NATIVES_NAV,
|
|
11521
12057
|
...NATIVES_OVERLAYS,
|
|
11522
12058
|
...NATIVES_QR,
|
|
11523
12059
|
...NATIVES_RESIZABLE,
|
|
11524
12060
|
...NATIVES_SEARCH,
|
|
11525
12061
|
...NATIVES_SELECT,
|
|
11526
|
-
...NATIVES_TABLE
|
|
12062
|
+
...NATIVES_TABLE,
|
|
12063
|
+
...NATIVES_ZOOMABLE_IMAGE
|
|
11527
12064
|
};
|
|
11528
12065
|
const NATIVES = Object.fromEntries(NATIVE_ORDER.map((name) => [name, PROVIDED[name] ?? Pending]));
|
|
11529
12066
|
const NATIVE_NAMES = Object.keys(NATIVES);
|
|
@@ -12768,7 +13305,7 @@ export {
|
|
|
12768
13305
|
CloseOnSubmitContext,
|
|
12769
13306
|
DEBOUNCE_MS2 as DEBOUNCE_MS,
|
|
12770
13307
|
ExponentialSurface,
|
|
12771
|
-
|
|
13308
|
+
R as FALLBACK_ICONS,
|
|
12772
13309
|
FieldErrors,
|
|
12773
13310
|
FormContext,
|
|
12774
13311
|
HostSurface,
|
|
@@ -12847,7 +13384,7 @@ export {
|
|
|
12847
13384
|
registerExtension,
|
|
12848
13385
|
registeredExtensions,
|
|
12849
13386
|
renderMarkdown,
|
|
12850
|
-
|
|
13387
|
+
T as resolveIcon,
|
|
12851
13388
|
resolveNodeProps2 as resolveNodeProps,
|
|
12852
13389
|
resolveProps,
|
|
12853
13390
|
resolveThemeInput,
|