@mantine-vue/core 2.3.0 → 2.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/cjs/index.cjs +1011 -144
- package/cjs/index.cjs.map +1 -1
- package/esm/index.mjs +1006 -145
- package/esm/index.mjs.map +1 -1
- package/lib/components/Accordion/Accordion.d.ts +24 -4
- package/lib/components/Accordion/index.d.ts +1 -1
- package/lib/components/Cascader/Cascader.d.ts +314 -0
- package/lib/components/Cascader/cascader-utils.d.ts +11 -0
- package/lib/components/Cascader/index.d.ts +4 -0
- package/lib/components/ColorInput/ColorInput.d.ts +7 -2
- package/lib/components/ColorInput/index.d.ts +1 -1
- package/lib/components/Combobox/OptionsDropdown/OptionsDropdown.d.ts +1 -0
- package/lib/components/ComboboxPopover/ComboboxPopover.d.ts +4 -0
- package/lib/components/Drawer/Drawer.d.ts +33 -0
- package/lib/components/FloatingWindow/FloatingWindow.context.d.ts +23 -0
- package/lib/components/FloatingWindow/FloatingWindow.d.ts +37 -0
- package/lib/components/FloatingWindow/FloatingWindowResizeHandle.d.ts +27 -0
- package/lib/components/FloatingWindow/index.d.ts +2 -0
- package/lib/components/InputBase/index.d.ts +1 -1
- package/lib/components/Menu/Menu.context.d.ts +1 -0
- package/lib/components/Modal/Modal.d.ts +33 -0
- package/lib/components/MultiSelect/MultiSelect.d.ts +7 -0
- package/lib/components/MultiSelect/index.d.ts +1 -1
- package/lib/components/PasswordInput/PasswordInput.d.ts +4 -0
- package/lib/components/PasswordInput/index.d.ts +1 -1
- package/lib/components/Popover/Popover.d.ts +10 -2
- package/lib/components/Popover/index.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollArea.d.ts +25 -0
- package/lib/components/Scroller/Scroller.d.ts +9 -2
- package/lib/components/Scroller/index.d.ts +1 -1
- package/lib/components/Select/Select.d.ts +1 -0
- package/lib/components/Select/index.d.ts +1 -1
- package/lib/components/Slider/index.d.ts +2 -1
- package/lib/components/Splitter/Splitter.d.ts +8 -3
- package/lib/components/Splitter/index.d.ts +1 -1
- package/lib/components/Stepper/Stepper.d.ts +2 -1
- package/lib/components/Tabs/Tabs.context.d.ts +0 -1
- package/lib/components/Tabs/Tabs.d.ts +0 -15
- package/lib/components/TagsInput/TagsInput.d.ts +7 -0
- package/lib/components/TagsInput/index.d.ts +1 -1
- package/lib/components/Textarea/Textarea.d.ts +7 -2
- package/lib/components/Textarea/index.d.ts +1 -0
- package/lib/components/Timeline/Timeline.d.ts +19 -1
- package/lib/components/Timeline/TimelineItem/TimelineItem.d.ts +20 -1
- package/lib/components/Tree/Tree.d.ts +7 -2
- package/lib/components/Tree/index.d.ts +1 -1
- package/lib/components/TreeSelect/TreeSelect.d.ts +2 -0
- package/lib/components/TreeSelect/index.d.ts +1 -1
- package/lib/components/index.d.ts +1 -0
- package/package.json +3 -3
- package/styles.css +471 -129
- package/styles.layer.css +471 -129
package/esm/index.mjs
CHANGED
|
@@ -4037,7 +4037,7 @@ var Badge = withBoxProps(defineComponent({
|
|
|
4037
4037
|
const renderSection = (section, position) => hasNode(section) ? h("span", {
|
|
4038
4038
|
...getStyles("section"),
|
|
4039
4039
|
"data-position": position
|
|
4040
|
-
},
|
|
4040
|
+
}, section) : null;
|
|
4041
4041
|
return () => {
|
|
4042
4042
|
const children = slots.default?.() ?? [];
|
|
4043
4043
|
const leftSection = resolveNode(props.leftSection, slots.leftSection);
|
|
@@ -5107,7 +5107,7 @@ var varsResolver$70 = createVarsResolver((theme, { radius, color, gradient, vari
|
|
|
5107
5107
|
"--button-hover-color": color || variant ? colors.hoverColor : void 0
|
|
5108
5108
|
} };
|
|
5109
5109
|
});
|
|
5110
|
-
function renderContent$
|
|
5110
|
+
function renderContent$4(content) {
|
|
5111
5111
|
return typeof content === "function" ? content() : content;
|
|
5112
5112
|
}
|
|
5113
5113
|
var ButtonBase = defineComponent({
|
|
@@ -5236,7 +5236,7 @@ var ButtonBase = defineComponent({
|
|
|
5236
5236
|
component: "span",
|
|
5237
5237
|
...getStyles("section"),
|
|
5238
5238
|
mod: { position }
|
|
5239
|
-
}, () => renderContent$
|
|
5239
|
+
}, () => renderContent$4(content)) : null;
|
|
5240
5240
|
return () => {
|
|
5241
5241
|
const leftSection = resolveNode(props.leftSection, slots.leftSection);
|
|
5242
5242
|
const rightSection = resolveNode(props.rightSection, slots.rightSection);
|
|
@@ -8016,13 +8016,13 @@ var ScrollAreaViewport = withBoxProps(defineComponent({
|
|
|
8016
8016
|
}
|
|
8017
8017
|
}));
|
|
8018
8018
|
var ScrollArea_module_default = {
|
|
8019
|
-
root: "
|
|
8020
|
-
content: "
|
|
8021
|
-
viewport: "
|
|
8022
|
-
viewportInner: "
|
|
8023
|
-
scrollbar: "
|
|
8024
|
-
thumb: "
|
|
8025
|
-
corner: "
|
|
8019
|
+
root: "_root_1sy9q_1",
|
|
8020
|
+
content: "_content_1sy9q_7",
|
|
8021
|
+
viewport: "_viewport_1sy9q_12",
|
|
8022
|
+
viewportInner: "_viewportInner_1sy9q_71",
|
|
8023
|
+
scrollbar: "_scrollbar_1sy9q_76",
|
|
8024
|
+
thumb: "_thumb_1sy9q_93",
|
|
8025
|
+
corner: "_corner_1sy9q_182"
|
|
8026
8026
|
};
|
|
8027
8027
|
//#endregion
|
|
8028
8028
|
//#region src/components/ScrollArea/ScrollArea.ts
|
|
@@ -8098,6 +8098,10 @@ var ScrollAreaBase = defineComponent({
|
|
|
8098
8098
|
type: Object,
|
|
8099
8099
|
default: void 0
|
|
8100
8100
|
},
|
|
8101
|
+
verticalScrollbarPosition: {
|
|
8102
|
+
type: String,
|
|
8103
|
+
default: void 0
|
|
8104
|
+
},
|
|
8101
8105
|
classNames: {
|
|
8102
8106
|
type: [Object, Function],
|
|
8103
8107
|
default: void 0
|
|
@@ -8256,11 +8260,13 @@ var ScrollAreaBase = defineComponent({
|
|
|
8256
8260
|
},
|
|
8257
8261
|
"data-offset-scrollbars": toOffsetScrollbars(props.offsetScrollbars),
|
|
8258
8262
|
"data-scrollbars": props.scrollbars || void 0,
|
|
8263
|
+
"data-vertical-scrollbar-position": props.verticalScrollbarPosition,
|
|
8259
8264
|
onScroll: handleScroll
|
|
8260
8265
|
}, () => slots.default?.()),
|
|
8261
8266
|
(props.scrollbars === "xy" || props.scrollbars === "x") && h(ScrollAreaScrollbar, {
|
|
8262
8267
|
...getStyles("scrollbar"),
|
|
8263
8268
|
orientation: "horizontal",
|
|
8269
|
+
"data-vertical-scrollbar-position": props.verticalScrollbarPosition,
|
|
8264
8270
|
"data-hidden": props.type === "never" ? true : void 0,
|
|
8265
8271
|
"data-state": getScrollbarState("horizontal"),
|
|
8266
8272
|
forceMount: true
|
|
@@ -8268,12 +8274,14 @@ var ScrollAreaBase = defineComponent({
|
|
|
8268
8274
|
(props.scrollbars === "xy" || props.scrollbars === "y") && h(ScrollAreaScrollbar, {
|
|
8269
8275
|
...getStyles("scrollbar"),
|
|
8270
8276
|
orientation: "vertical",
|
|
8277
|
+
"data-vertical-scrollbar-position": props.verticalScrollbarPosition,
|
|
8271
8278
|
"data-hidden": props.type === "never" ? true : void 0,
|
|
8272
8279
|
"data-state": getScrollbarState("vertical"),
|
|
8273
8280
|
forceMount: true
|
|
8274
8281
|
}, () => h(ScrollAreaThumb, getStyles("thumb"))),
|
|
8275
8282
|
h(ScrollAreaCorner, {
|
|
8276
8283
|
...getStyles("corner"),
|
|
8284
|
+
"data-vertical-scrollbar-position": props.verticalScrollbarPosition,
|
|
8277
8285
|
"data-hidden": props.type === "never" ? true : void 0
|
|
8278
8286
|
})
|
|
8279
8287
|
]);
|
|
@@ -8594,6 +8602,7 @@ var defaultProps$35 = {
|
|
|
8594
8602
|
multiple: false,
|
|
8595
8603
|
loop: true,
|
|
8596
8604
|
disableChevronRotation: false,
|
|
8605
|
+
disableCollapse: false,
|
|
8597
8606
|
chevronPosition: "right",
|
|
8598
8607
|
variant: "default",
|
|
8599
8608
|
chevronSize: "auto",
|
|
@@ -8605,7 +8614,7 @@ function getSafeId$2(prefix) {
|
|
|
8605
8614
|
return `${prefix}-${value}`;
|
|
8606
8615
|
};
|
|
8607
8616
|
}
|
|
8608
|
-
function renderContent$
|
|
8617
|
+
function renderContent$3(content) {
|
|
8609
8618
|
return typeof content === "function" ? content() : content;
|
|
8610
8619
|
}
|
|
8611
8620
|
var varsResolver$57 = createVarsResolver((_, { transitionDuration, chevronSize, radius }) => ({ root: {
|
|
@@ -8616,6 +8625,7 @@ var varsResolver$57 = createVarsResolver((_, { transitionDuration, chevronSize,
|
|
|
8616
8625
|
var AccordionBase = defineComponent({
|
|
8617
8626
|
name: "Accordion",
|
|
8618
8627
|
inheritAttrs: false,
|
|
8628
|
+
slots: Object,
|
|
8619
8629
|
props: {
|
|
8620
8630
|
multiple: {
|
|
8621
8631
|
type: Boolean,
|
|
@@ -8649,6 +8659,10 @@ var AccordionBase = defineComponent({
|
|
|
8649
8659
|
type: Boolean,
|
|
8650
8660
|
default: void 0
|
|
8651
8661
|
},
|
|
8662
|
+
disableCollapse: {
|
|
8663
|
+
type: Boolean,
|
|
8664
|
+
default: void 0
|
|
8665
|
+
},
|
|
8652
8666
|
chevronPosition: {
|
|
8653
8667
|
type: String,
|
|
8654
8668
|
default: void 0
|
|
@@ -8728,6 +8742,7 @@ var AccordionBase = defineComponent({
|
|
|
8728
8742
|
const isItemActive = (itemValue) => Array.isArray(currentValue.value) ? currentValue.value.includes(itemValue) : itemValue === currentValue.value;
|
|
8729
8743
|
const handleItemChange = (itemValue) => {
|
|
8730
8744
|
const value = currentValue.value;
|
|
8745
|
+
if (!Array.isArray(value) && props.disableCollapse && itemValue === value) return;
|
|
8731
8746
|
setCurrentValue(Array.isArray(value) ? value.includes(itemValue) ? value.filter((selectedValue) => selectedValue !== itemValue) : [...value, itemValue] : itemValue === value ? null : itemValue);
|
|
8732
8747
|
};
|
|
8733
8748
|
provideAccordionContext(reactive({
|
|
@@ -8747,7 +8762,8 @@ var AccordionBase = defineComponent({
|
|
|
8747
8762
|
return props.order;
|
|
8748
8763
|
},
|
|
8749
8764
|
get chevron() {
|
|
8750
|
-
|
|
8765
|
+
if (props.chevron === null) return null;
|
|
8766
|
+
return props.chevron ?? slots.chevron ?? (() => h(AccordionChevron, { size: props.chevronIconSize }));
|
|
8751
8767
|
},
|
|
8752
8768
|
onChange: handleItemChange,
|
|
8753
8769
|
isItemActive,
|
|
@@ -8777,7 +8793,7 @@ var AccordionBase = defineComponent({
|
|
|
8777
8793
|
id: uid.value,
|
|
8778
8794
|
variant: props.variant,
|
|
8779
8795
|
"data-accordion": true
|
|
8780
|
-
}, () => renderContent$
|
|
8796
|
+
}, () => renderContent$3(slots.default));
|
|
8781
8797
|
}
|
|
8782
8798
|
});
|
|
8783
8799
|
var Accordion = Object.assign(AccordionBase, {
|
|
@@ -8805,12 +8821,10 @@ var varsResolver$56 = createVarsResolver((theme, { controlSize, edgeGradientColo
|
|
|
8805
8821
|
"--scroller-control-size": controlSize === void 0 ? void 0 : rem(controlSize),
|
|
8806
8822
|
"--scroller-background-color": edgeGradientColor ? getThemeColor(edgeGradientColor, theme) : void 0
|
|
8807
8823
|
} }));
|
|
8808
|
-
function renderContent$3(content) {
|
|
8809
|
-
return typeof content === "function" ? content() : content;
|
|
8810
|
-
}
|
|
8811
8824
|
var Scroller = withBoxProps(defineComponent({
|
|
8812
8825
|
name: "Scroller",
|
|
8813
8826
|
inheritAttrs: false,
|
|
8827
|
+
slots: Object,
|
|
8814
8828
|
props: {
|
|
8815
8829
|
scrollAmount: {
|
|
8816
8830
|
type: Number,
|
|
@@ -8915,7 +8929,7 @@ var Scroller = withBoxProps(defineComponent({
|
|
|
8915
8929
|
"data-hidden": !showStart || void 0,
|
|
8916
8930
|
"aria-label": "Scroll left",
|
|
8917
8931
|
tabindex: showStart ? 0 : -1
|
|
8918
|
-
}, () =>
|
|
8932
|
+
}, () => resolveNode(props.startControlIcon, slots.startControlIcon) || h(AccordionChevron, getStyles("chevron"))),
|
|
8919
8933
|
h("div", {
|
|
8920
8934
|
...getStyles("container"),
|
|
8921
8935
|
ref: scroller.ref,
|
|
@@ -8931,7 +8945,7 @@ var Scroller = withBoxProps(defineComponent({
|
|
|
8931
8945
|
"data-hidden": !showEnd || void 0,
|
|
8932
8946
|
"aria-label": "Scroll right",
|
|
8933
8947
|
tabindex: showEnd ? 0 : -1
|
|
8934
|
-
}, () =>
|
|
8948
|
+
}, () => resolveNode(props.endControlIcon, slots.endControlIcon) || h(AccordionChevron, getStyles("chevron")))
|
|
8935
8949
|
]);
|
|
8936
8950
|
};
|
|
8937
8951
|
}
|
|
@@ -9910,8 +9924,9 @@ function getDigitParts({ value, decimalScale, fixedDecimalScale }) {
|
|
|
9910
9924
|
const dotIdx = str.indexOf(".");
|
|
9911
9925
|
const intStr = dotIdx >= 0 ? str.slice(0, dotIdx) : str;
|
|
9912
9926
|
const fracStr = dotIdx >= 0 ? str.slice(dotIdx + 1) : "";
|
|
9927
|
+
const roundedToZero = !/[1-9]/.test(str);
|
|
9913
9928
|
return {
|
|
9914
|
-
negative: value < 0,
|
|
9929
|
+
negative: value < 0 && !roundedToZero,
|
|
9915
9930
|
intDigits: intStr.split(""),
|
|
9916
9931
|
fracDigits: fracStr ? fracStr.split("") : [],
|
|
9917
9932
|
hasDecimal: dotIdx >= 0
|
|
@@ -10257,11 +10272,12 @@ Object.assign(RollingNumber, {
|
|
|
10257
10272
|
//#region src/components/Timeline/Timeline.context.ts
|
|
10258
10273
|
var [provideTimelineContext, useTimelineContext] = createSafeContext("Timeline component was not found in tree");
|
|
10259
10274
|
var Timeline_module_default = {
|
|
10260
|
-
root: "
|
|
10261
|
-
itemTitle: "
|
|
10262
|
-
item: "
|
|
10263
|
-
itemBullet: "
|
|
10264
|
-
itemBody: "
|
|
10275
|
+
root: "_root_1p5xp_1",
|
|
10276
|
+
itemTitle: "_itemTitle_1p5xp_19",
|
|
10277
|
+
item: "_item_1p5xp_19",
|
|
10278
|
+
itemBullet: "_itemBullet_1p5xp_96",
|
|
10279
|
+
itemBody: "_itemBody_1p5xp_159",
|
|
10280
|
+
itemOpposite: "_itemOpposite_1p5xp_199"
|
|
10265
10281
|
};
|
|
10266
10282
|
//#endregion
|
|
10267
10283
|
//#region src/components/Timeline/TimelineItem/TimelineItem.ts
|
|
@@ -10298,6 +10314,14 @@ var TimelineItem = withBoxProps(defineComponent({
|
|
|
10298
10314
|
type: null,
|
|
10299
10315
|
default: void 0
|
|
10300
10316
|
},
|
|
10317
|
+
opposite: {
|
|
10318
|
+
type: null,
|
|
10319
|
+
default: void 0
|
|
10320
|
+
},
|
|
10321
|
+
alternate: {
|
|
10322
|
+
type: Boolean,
|
|
10323
|
+
default: false
|
|
10324
|
+
},
|
|
10301
10325
|
radius: {
|
|
10302
10326
|
type: [String, Number],
|
|
10303
10327
|
default: void 0
|
|
@@ -10348,6 +10372,7 @@ var TimelineItem = withBoxProps(defineComponent({
|
|
|
10348
10372
|
const lineActive = props.lineActive ?? props.__lineActive;
|
|
10349
10373
|
const bullet = resolveNode(props.bullet, slots.bullet);
|
|
10350
10374
|
const title = resolveNode(props.title, slots.title);
|
|
10375
|
+
const opposite = resolveNode(props.opposite, slots.opposite);
|
|
10351
10376
|
const stylesApiProps = {
|
|
10352
10377
|
className: props.className ?? attrs.class,
|
|
10353
10378
|
props
|
|
@@ -10356,7 +10381,8 @@ var TimelineItem = withBoxProps(defineComponent({
|
|
|
10356
10381
|
...attrs,
|
|
10357
10382
|
mod: [{
|
|
10358
10383
|
lineActive,
|
|
10359
|
-
active
|
|
10384
|
+
active,
|
|
10385
|
+
alternate: props.alternate
|
|
10360
10386
|
}, props.mod],
|
|
10361
10387
|
...ctx.getStyles("item", {
|
|
10362
10388
|
...stylesApiProps,
|
|
@@ -10368,14 +10394,18 @@ var TimelineItem = withBoxProps(defineComponent({
|
|
|
10368
10394
|
...attrs.style
|
|
10369
10395
|
}
|
|
10370
10396
|
})
|
|
10371
|
-
}, () => [
|
|
10372
|
-
|
|
10373
|
-
|
|
10374
|
-
|
|
10375
|
-
|
|
10376
|
-
|
|
10377
|
-
|
|
10378
|
-
|
|
10397
|
+
}, () => [
|
|
10398
|
+
h(Box, {
|
|
10399
|
+
...ctx.getStyles("itemBullet", { props }),
|
|
10400
|
+
mod: {
|
|
10401
|
+
withChild: hasNode(bullet),
|
|
10402
|
+
align: props.__align,
|
|
10403
|
+
active
|
|
10404
|
+
}
|
|
10405
|
+
}, () => bullet),
|
|
10406
|
+
hasNode(opposite) ? h("div", ctx.getStyles("itemOpposite", { props }), opposite) : null,
|
|
10407
|
+
h("div", ctx.getStyles("itemBody", { props }), [hasNode(title) ? h("div", ctx.getStyles("itemTitle", { props }), title) : null, h("div", ctx.getStyles("itemContent", { props }), slots.default?.())])
|
|
10408
|
+
]);
|
|
10379
10409
|
};
|
|
10380
10410
|
}
|
|
10381
10411
|
}));
|
|
@@ -10471,6 +10501,10 @@ var TimelineBase = defineComponent({
|
|
|
10471
10501
|
provideTimelineContext({ getStyles });
|
|
10472
10502
|
return () => {
|
|
10473
10503
|
const children = (slots.default?.() ?? []).filter(Boolean);
|
|
10504
|
+
const hasOpposite = children.some((item) => {
|
|
10505
|
+
const childSlots = item.children;
|
|
10506
|
+
return item.props?.opposite != null || childSlots?.opposite != null;
|
|
10507
|
+
});
|
|
10474
10508
|
const active = props.active ?? defaultProps$28.active;
|
|
10475
10509
|
const items = children.map((item, index) => cloneVNode(item, {
|
|
10476
10510
|
unstyled: props.unstyled,
|
|
@@ -10480,7 +10514,10 @@ var TimelineBase = defineComponent({
|
|
|
10480
10514
|
}, true));
|
|
10481
10515
|
return h(Box, {
|
|
10482
10516
|
...attrs,
|
|
10483
|
-
mod: [{
|
|
10517
|
+
mod: [{
|
|
10518
|
+
align: props.align,
|
|
10519
|
+
opposite: hasOpposite
|
|
10520
|
+
}, props.mod],
|
|
10484
10521
|
...getStyles("root", {
|
|
10485
10522
|
className: attrs.class,
|
|
10486
10523
|
style: attrs.style
|
|
@@ -16264,7 +16301,6 @@ var Tabs_module_default = {
|
|
|
16264
16301
|
var VALUE_ERROR = "Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value";
|
|
16265
16302
|
var defaultProps$13 = {
|
|
16266
16303
|
keepMounted: true,
|
|
16267
|
-
keepMountedMode: "activity",
|
|
16268
16304
|
orientation: "horizontal",
|
|
16269
16305
|
loop: true,
|
|
16270
16306
|
activateTabWithKeyboard: true,
|
|
@@ -16346,10 +16382,6 @@ var TabsBase = defineComponent({
|
|
|
16346
16382
|
type: Boolean,
|
|
16347
16383
|
default: void 0
|
|
16348
16384
|
},
|
|
16349
|
-
keepMountedMode: {
|
|
16350
|
-
type: String,
|
|
16351
|
-
default: void 0
|
|
16352
|
-
},
|
|
16353
16385
|
autoContrast: {
|
|
16354
16386
|
type: Boolean,
|
|
16355
16387
|
default: void 0
|
|
@@ -16425,9 +16457,6 @@ var TabsBase = defineComponent({
|
|
|
16425
16457
|
get keepMounted() {
|
|
16426
16458
|
return props.keepMounted;
|
|
16427
16459
|
},
|
|
16428
|
-
get keepMountedMode() {
|
|
16429
|
-
return props.keepMountedMode;
|
|
16430
|
-
},
|
|
16431
16460
|
get placement() {
|
|
16432
16461
|
return props.placement;
|
|
16433
16462
|
},
|
|
@@ -16639,6 +16668,7 @@ var TextareaAutosize = defineComponent({
|
|
|
16639
16668
|
var Textarea = defineComponent({
|
|
16640
16669
|
name: "Textarea",
|
|
16641
16670
|
inheritAttrs: false,
|
|
16671
|
+
slots: Object,
|
|
16642
16672
|
props: {
|
|
16643
16673
|
autosize: {
|
|
16644
16674
|
type: Boolean,
|
|
@@ -16687,7 +16717,7 @@ var Textarea = defineComponent({
|
|
|
16687
16717
|
__staticSelector: props.__staticSelector || "Textarea",
|
|
16688
16718
|
multiline: true,
|
|
16689
16719
|
"data-no-overflow": shouldAutosize && props.maxRows === void 0 ? true : void 0,
|
|
16690
|
-
__bottomSection: props.bottomSection,
|
|
16720
|
+
__bottomSection: resolveNode(props.bottomSection, slots.bottomSection),
|
|
16691
16721
|
__bottomSectionProps: props.bottomSectionProps,
|
|
16692
16722
|
style: [{ "--input-resize": props.resize }, attrs.style],
|
|
16693
16723
|
...autosizeProps
|
|
@@ -17070,7 +17100,11 @@ var PasswordInput = defineComponent({
|
|
|
17070
17100
|
const hasError = props.error !== void 0 ? Boolean(props.error) && typeof props.error !== "boolean" : Boolean(slots.error);
|
|
17071
17101
|
const hasDescription = props.description !== void 0 ? props.description !== null : Boolean(slots.description);
|
|
17072
17102
|
const describedBy = `${hasError ? errorId : ""} ${hasDescription ? descriptionId : ""}`.trim() || void 0;
|
|
17073
|
-
const
|
|
17103
|
+
const renderVisibilityToggleIcon = () => {
|
|
17104
|
+
if (props.visibilityToggleIcon) return h(props.visibilityToggleIcon, { reveal: visible.value });
|
|
17105
|
+
if (slots.visibilityToggleIcon) return slots.visibilityToggleIcon({ reveal: visible.value });
|
|
17106
|
+
return h(PasswordToggleIcon, { reveal: visible.value });
|
|
17107
|
+
};
|
|
17074
17108
|
const visibilityToggleButton = h(ActionIcon, {
|
|
17075
17109
|
...getStyles("visibilityToggle"),
|
|
17076
17110
|
...props.visibilityToggleButtonProps,
|
|
@@ -17099,7 +17133,7 @@ var PasswordInput = defineComponent({
|
|
|
17099
17133
|
toggleVisibility();
|
|
17100
17134
|
}
|
|
17101
17135
|
}
|
|
17102
|
-
},
|
|
17136
|
+
}, renderVisibilityToggleIcon);
|
|
17103
17137
|
return h(Input.Wrapper, {
|
|
17104
17138
|
...props.wrapperProps,
|
|
17105
17139
|
id,
|
|
@@ -20274,16 +20308,17 @@ var StepperBase = defineComponent({
|
|
|
20274
20308
|
const items = [];
|
|
20275
20309
|
steps.forEach((item, index) => {
|
|
20276
20310
|
const itemProps = item.props ?? {};
|
|
20311
|
+
const itemSlots = item.children ?? {};
|
|
20277
20312
|
const state = props.active === index ? "stepProgress" : props.active > index ? "stepCompleted" : "stepInactive";
|
|
20278
20313
|
const selectable = typeof props.onStepClick === "function" && (typeof itemProps.allowStepSelect === "boolean" ? itemProps.allowStepSelect : state === "stepCompleted" || props.allowNextStepsSelect);
|
|
20279
20314
|
items.push(cloneVNode(item, {
|
|
20280
|
-
icon: itemProps.icon ?? props.icon ?? (slots.icon ? (payload) => slots.icon(payload) : index + 1),
|
|
20315
|
+
icon: itemSlots.icon ? itemProps.icon : itemProps.icon ?? props.icon ?? (slots.icon ? (payload) => slots.icon(payload) : index + 1),
|
|
20281
20316
|
step: index,
|
|
20282
20317
|
state,
|
|
20283
20318
|
onClick: () => selectable && props.onStepClick?.(index),
|
|
20284
20319
|
allowStepClick: selectable,
|
|
20285
|
-
completedIcon: itemProps.completedIcon ?? props.completedIcon ?? (slots.completedIcon ? (payload) => slots.completedIcon(payload) : void 0),
|
|
20286
|
-
progressIcon: itemProps.progressIcon ?? props.progressIcon ?? (slots.progressIcon ? (payload) => slots.progressIcon(payload) : void 0),
|
|
20320
|
+
completedIcon: itemSlots.completedIcon ? itemProps.completedIcon : itemProps.completedIcon ?? props.completedIcon ?? (slots.completedIcon ? (payload) => slots.completedIcon(payload) : void 0),
|
|
20321
|
+
progressIcon: itemSlots.progressIcon ? itemProps.progressIcon : itemProps.progressIcon ?? props.progressIcon ?? (slots.progressIcon ? (payload) => slots.progressIcon(payload) : void 0),
|
|
20287
20322
|
color: itemProps.color ?? props.color,
|
|
20288
20323
|
iconSize: props.iconSize,
|
|
20289
20324
|
iconPosition: itemProps.iconPosition ?? props.iconPosition,
|
|
@@ -20739,9 +20774,154 @@ Object.assign(TableOfContents, {
|
|
|
20739
20774
|
classes: TableOfContents_module_default,
|
|
20740
20775
|
varsResolver: varsResolver$14
|
|
20741
20776
|
});
|
|
20742
|
-
|
|
20777
|
+
//#endregion
|
|
20778
|
+
//#region src/components/FloatingWindow/FloatingWindow.context.ts
|
|
20779
|
+
var [provideFloatingWindowContext, useFloatingWindowContext] = createSafeContext("FloatingWindow.ResizeHandle must be used within FloatingWindow");
|
|
20780
|
+
//#endregion
|
|
20781
|
+
//#region src/components/FloatingWindow/FloatingWindowResizeHandle.ts
|
|
20782
|
+
var KEYBOARD_STEP = 10;
|
|
20783
|
+
function clampDimension$1(value, min, max, viewportMax) {
|
|
20784
|
+
let result = value;
|
|
20785
|
+
if (min != null) result = Math.max(result, min);
|
|
20786
|
+
if (max != null) result = Math.min(result, max);
|
|
20787
|
+
if (viewportMax != null) result = Math.min(result, viewportMax);
|
|
20788
|
+
return result;
|
|
20789
|
+
}
|
|
20790
|
+
var FloatingWindowResizeHandle = withBoxProps(defineComponent({
|
|
20791
|
+
name: "FloatingWindowResizeHandle",
|
|
20792
|
+
inheritAttrs: false,
|
|
20793
|
+
props: {
|
|
20794
|
+
ariaLabel: {
|
|
20795
|
+
type: String,
|
|
20796
|
+
default: "Resize window"
|
|
20797
|
+
},
|
|
20798
|
+
tabindex: {
|
|
20799
|
+
type: Number,
|
|
20800
|
+
default: 0
|
|
20801
|
+
},
|
|
20802
|
+
onKeydown: Function
|
|
20803
|
+
},
|
|
20804
|
+
setup(props, { attrs, slots }) {
|
|
20805
|
+
const ctx = useFloatingWindowContext();
|
|
20806
|
+
let handle = null;
|
|
20807
|
+
let isResizing = false;
|
|
20808
|
+
let startX = 0;
|
|
20809
|
+
let startY = 0;
|
|
20810
|
+
let startWidth = 0;
|
|
20811
|
+
let startHeight = 0;
|
|
20812
|
+
const hasWidth = () => ctx.dimensions?.initialWidth != null || ctx.dimensions?.minWidth != null || ctx.dimensions?.maxWidth != null;
|
|
20813
|
+
const hasHeight = () => ctx.dimensions?.initialHeight != null || ctx.dimensions?.minHeight != null || ctx.dimensions?.maxHeight != null;
|
|
20814
|
+
const applySize = (width, height) => {
|
|
20815
|
+
const root = ctx.rootRef.value;
|
|
20816
|
+
if (!root || width === null && height === null) return;
|
|
20817
|
+
const rect = root.getBoundingClientRect();
|
|
20818
|
+
const offset = ctx.constrainOffset ?? 0;
|
|
20819
|
+
const maxViewportWidth = ctx.constrainToViewport ? window.innerWidth - rect.left - offset : void 0;
|
|
20820
|
+
const maxViewportHeight = ctx.constrainToViewport ? window.innerHeight - rect.top - offset : void 0;
|
|
20821
|
+
if (width !== null) root.style.width = `${clampDimension$1(width, ctx.dimensions?.minWidth, ctx.dimensions?.maxWidth, maxViewportWidth)}px`;
|
|
20822
|
+
if (height !== null) root.style.height = `${clampDimension$1(height, ctx.dimensions?.minHeight, ctx.dimensions?.maxHeight, maxViewportHeight)}px`;
|
|
20823
|
+
const resized = root.getBoundingClientRect();
|
|
20824
|
+
if (width !== null) handle?.setAttribute("aria-valuenow", String(Math.round(resized.width)));
|
|
20825
|
+
ctx.onSizeChange?.({
|
|
20826
|
+
width: resized.width,
|
|
20827
|
+
height: resized.height
|
|
20828
|
+
});
|
|
20829
|
+
};
|
|
20830
|
+
const end = () => {
|
|
20831
|
+
if (!isResizing) return;
|
|
20832
|
+
isResizing = false;
|
|
20833
|
+
document.body.style.userSelect = "";
|
|
20834
|
+
document.body.style.webkitUserSelect = "";
|
|
20835
|
+
ctx.onResizeEnd?.();
|
|
20836
|
+
document.removeEventListener("mousemove", move);
|
|
20837
|
+
document.removeEventListener("mouseup", end);
|
|
20838
|
+
document.removeEventListener("touchmove", move);
|
|
20839
|
+
document.removeEventListener("touchend", end);
|
|
20840
|
+
document.removeEventListener("touchcancel", end);
|
|
20841
|
+
};
|
|
20842
|
+
const move = (event) => {
|
|
20843
|
+
if (!isResizing) return;
|
|
20844
|
+
event.preventDefault();
|
|
20845
|
+
const point = "touches" in event ? event.touches[0] : event;
|
|
20846
|
+
applySize(hasWidth() ? startWidth + point.clientX - startX : null, hasHeight() ? startHeight + point.clientY - startY : null);
|
|
20847
|
+
};
|
|
20848
|
+
const start = (event) => {
|
|
20849
|
+
if ("button" in event && event.button !== 0) return;
|
|
20850
|
+
event.stopPropagation();
|
|
20851
|
+
event.preventDefault();
|
|
20852
|
+
if (!hasWidth() && !hasHeight()) return;
|
|
20853
|
+
const root = ctx.rootRef.value;
|
|
20854
|
+
if (!root) return;
|
|
20855
|
+
const point = "touches" in event ? event.touches[0] : event;
|
|
20856
|
+
const rect = root.getBoundingClientRect();
|
|
20857
|
+
startX = point.clientX;
|
|
20858
|
+
startY = point.clientY;
|
|
20859
|
+
startWidth = rect.width;
|
|
20860
|
+
startHeight = rect.height;
|
|
20861
|
+
isResizing = true;
|
|
20862
|
+
document.body.style.userSelect = "none";
|
|
20863
|
+
document.body.style.webkitUserSelect = "none";
|
|
20864
|
+
ctx.onResizeStart?.();
|
|
20865
|
+
document.addEventListener("mousemove", move);
|
|
20866
|
+
document.addEventListener("mouseup", end);
|
|
20867
|
+
document.addEventListener("touchmove", move, { passive: false });
|
|
20868
|
+
document.addEventListener("touchend", end);
|
|
20869
|
+
document.addEventListener("touchcancel", end);
|
|
20870
|
+
};
|
|
20871
|
+
const onKeydown = (event) => {
|
|
20872
|
+
props.onKeydown?.(event);
|
|
20873
|
+
if (event.defaultPrevented) return;
|
|
20874
|
+
const root = ctx.rootRef.value;
|
|
20875
|
+
if (!root) return;
|
|
20876
|
+
const rect = root.getBoundingClientRect();
|
|
20877
|
+
let width = null;
|
|
20878
|
+
let height = null;
|
|
20879
|
+
if (event.key === "ArrowRight" && hasWidth()) width = rect.width + KEYBOARD_STEP;
|
|
20880
|
+
else if (event.key === "ArrowLeft" && hasWidth()) width = rect.width - KEYBOARD_STEP;
|
|
20881
|
+
else if (event.key === "ArrowDown" && hasHeight()) height = rect.height + KEYBOARD_STEP;
|
|
20882
|
+
else if (event.key === "ArrowUp" && hasHeight()) height = rect.height - KEYBOARD_STEP;
|
|
20883
|
+
else if (event.key === "Home") {
|
|
20884
|
+
if (hasWidth()) width = ctx.dimensions?.minWidth ?? rect.width;
|
|
20885
|
+
if (hasHeight()) height = ctx.dimensions?.minHeight ?? rect.height;
|
|
20886
|
+
} else if (event.key === "End") {
|
|
20887
|
+
if (hasWidth()) width = ctx.dimensions?.maxWidth ?? rect.width;
|
|
20888
|
+
if (hasHeight()) height = ctx.dimensions?.maxHeight ?? rect.height;
|
|
20889
|
+
}
|
|
20890
|
+
if (width !== null || height !== null) {
|
|
20891
|
+
event.preventDefault();
|
|
20892
|
+
applySize(width, height);
|
|
20893
|
+
}
|
|
20894
|
+
};
|
|
20895
|
+
onMounted(() => {
|
|
20896
|
+
if (hasWidth() && ctx.dimensions?.initialWidth != null) handle?.setAttribute("aria-valuenow", String(Math.round(clampDimension$1(ctx.dimensions.initialWidth, ctx.dimensions.minWidth, ctx.dimensions.maxWidth, void 0))));
|
|
20897
|
+
});
|
|
20898
|
+
onBeforeUnmount(end);
|
|
20899
|
+
return () => h(Box, {
|
|
20900
|
+
...attrs,
|
|
20901
|
+
ref: (node) => {
|
|
20902
|
+
handle = node?.$el ?? node;
|
|
20903
|
+
},
|
|
20904
|
+
role: "separator",
|
|
20905
|
+
"aria-label": attrs["aria-label"] ?? props.ariaLabel,
|
|
20906
|
+
"aria-valuemin": ctx.dimensions?.minWidth,
|
|
20907
|
+
"aria-valuemax": ctx.dimensions?.maxWidth,
|
|
20908
|
+
tabindex: props.tabindex,
|
|
20909
|
+
style: [{ touchAction: "none" }, attrs.style],
|
|
20910
|
+
onMousedown: start,
|
|
20911
|
+
onTouchstart: start,
|
|
20912
|
+
onKeydown
|
|
20913
|
+
}, () => slots.default?.());
|
|
20914
|
+
}
|
|
20915
|
+
}));
|
|
20916
|
+
var FloatingWindow_module_default = { root: "_root_mstr0_1" };
|
|
20743
20917
|
//#endregion
|
|
20744
20918
|
//#region src/components/FloatingWindow/FloatingWindow.ts
|
|
20919
|
+
function clampDimension(value, min, max) {
|
|
20920
|
+
let result = value;
|
|
20921
|
+
if (min != null) result = Math.max(result, min);
|
|
20922
|
+
if (max != null) result = Math.min(result, max);
|
|
20923
|
+
return result;
|
|
20924
|
+
}
|
|
20745
20925
|
var defaultProps$7 = {
|
|
20746
20926
|
constrainToViewport: true,
|
|
20747
20927
|
withinPortal: true,
|
|
@@ -20807,6 +20987,22 @@ var FloatingWindow = defineComponent({
|
|
|
20807
20987
|
type: [String, Number],
|
|
20808
20988
|
default: void 0
|
|
20809
20989
|
},
|
|
20990
|
+
dimensions: {
|
|
20991
|
+
type: Object,
|
|
20992
|
+
default: void 0
|
|
20993
|
+
},
|
|
20994
|
+
onSizeChange: {
|
|
20995
|
+
type: Function,
|
|
20996
|
+
default: void 0
|
|
20997
|
+
},
|
|
20998
|
+
onResizeStart: {
|
|
20999
|
+
type: Function,
|
|
21000
|
+
default: void 0
|
|
21001
|
+
},
|
|
21002
|
+
onResizeEnd: {
|
|
21003
|
+
type: Function,
|
|
21004
|
+
default: void 0
|
|
21005
|
+
},
|
|
20810
21006
|
shadow: {
|
|
20811
21007
|
type: String,
|
|
20812
21008
|
default: void 0
|
|
@@ -20843,6 +21039,7 @@ var FloatingWindow = defineComponent({
|
|
|
20843
21039
|
setup(rawProps, { attrs, slots, expose }) {
|
|
20844
21040
|
const props = useProps("FloatingWindow", defaultProps$7, rawProps);
|
|
20845
21041
|
const floating = useFloatingWindow(props);
|
|
21042
|
+
const rootRef = ref(null);
|
|
20846
21043
|
assignRef(props.setPositionRef, floating.setPosition);
|
|
20847
21044
|
expose({ setPosition: floating.setPosition });
|
|
20848
21045
|
const getStyles = useStyles({
|
|
@@ -20856,12 +21053,37 @@ var FloatingWindow = defineComponent({
|
|
|
20856
21053
|
vars: props.vars,
|
|
20857
21054
|
unstyled: props.unstyled
|
|
20858
21055
|
});
|
|
21056
|
+
provideFloatingWindowContext({
|
|
21057
|
+
rootRef,
|
|
21058
|
+
get dimensions() {
|
|
21059
|
+
return props.dimensions;
|
|
21060
|
+
},
|
|
21061
|
+
get constrainToViewport() {
|
|
21062
|
+
return props.constrainToViewport;
|
|
21063
|
+
},
|
|
21064
|
+
get constrainOffset() {
|
|
21065
|
+
return props.constrainOffset;
|
|
21066
|
+
},
|
|
21067
|
+
get onSizeChange() {
|
|
21068
|
+
return props.onSizeChange;
|
|
21069
|
+
},
|
|
21070
|
+
get onResizeStart() {
|
|
21071
|
+
return props.onResizeStart;
|
|
21072
|
+
},
|
|
21073
|
+
get onResizeEnd() {
|
|
21074
|
+
return props.onResizeEnd;
|
|
21075
|
+
}
|
|
21076
|
+
});
|
|
20859
21077
|
return () => h(OptionalPortal, {
|
|
20860
21078
|
withinPortal: props.withinPortal,
|
|
20861
21079
|
...props.portalProps
|
|
20862
21080
|
}, () => h(Paper, {
|
|
20863
21081
|
...attrs,
|
|
20864
|
-
ref: ((value) =>
|
|
21082
|
+
ref: ((value) => {
|
|
21083
|
+
const node = value?.$el ?? value;
|
|
21084
|
+
rootRef.value = node;
|
|
21085
|
+
floating.ref(node);
|
|
21086
|
+
}),
|
|
20865
21087
|
shadow: props.shadow,
|
|
20866
21088
|
radius: props.radius,
|
|
20867
21089
|
withBorder: props.withBorder,
|
|
@@ -20872,13 +21094,20 @@ var FloatingWindow = defineComponent({
|
|
|
20872
21094
|
}),
|
|
20873
21095
|
style: [
|
|
20874
21096
|
getStyles("root").style,
|
|
20875
|
-
{
|
|
21097
|
+
{
|
|
21098
|
+
"--floating-window-z-index": String(props.zIndex),
|
|
21099
|
+
"--floating-window-width": props.dimensions?.initialWidth == null ? void 0 : `${clampDimension(props.dimensions.initialWidth, props.dimensions.minWidth, props.dimensions.maxWidth)}px`,
|
|
21100
|
+
"--floating-window-height": props.dimensions?.initialHeight == null ? void 0 : `${clampDimension(props.dimensions.initialHeight, props.dimensions.minHeight, props.dimensions.maxHeight)}px`
|
|
21101
|
+
},
|
|
20876
21102
|
attrs.style
|
|
20877
21103
|
]
|
|
20878
21104
|
}, () => slots.default?.()));
|
|
20879
21105
|
}
|
|
20880
21106
|
});
|
|
20881
|
-
Object.assign(FloatingWindow, {
|
|
21107
|
+
Object.assign(FloatingWindow, {
|
|
21108
|
+
classes: FloatingWindow_module_default,
|
|
21109
|
+
ResizeHandle: FloatingWindowResizeHandle
|
|
21110
|
+
});
|
|
20882
21111
|
//#endregion
|
|
20883
21112
|
//#region src/components/Slider/Slider.context.ts
|
|
20884
21113
|
var [provideSliderContext, useSliderContext] = createSafeContext("SliderProvider was not found in tree");
|
|
@@ -21221,15 +21450,15 @@ var Track = defineComponent({
|
|
|
21221
21450
|
}
|
|
21222
21451
|
});
|
|
21223
21452
|
var Slider_module_default = {
|
|
21224
|
-
root: "
|
|
21225
|
-
label: "
|
|
21226
|
-
thumb: "
|
|
21227
|
-
trackContainer: "
|
|
21228
|
-
track: "
|
|
21229
|
-
bar: "
|
|
21230
|
-
markWrapper: "
|
|
21231
|
-
mark: "
|
|
21232
|
-
markLabel: "
|
|
21453
|
+
root: "_root_1osrz_1",
|
|
21454
|
+
label: "_label_1osrz_39",
|
|
21455
|
+
thumb: "_thumb_1osrz_65",
|
|
21456
|
+
trackContainer: "_trackContainer_1osrz_131",
|
|
21457
|
+
track: "_track_1osrz_131",
|
|
21458
|
+
bar: "_bar_1osrz_187",
|
|
21459
|
+
markWrapper: "_markWrapper_1osrz_215",
|
|
21460
|
+
mark: "_mark_1osrz_215",
|
|
21461
|
+
markLabel: "_markLabel_1osrz_257"
|
|
21233
21462
|
};
|
|
21234
21463
|
//#endregion
|
|
21235
21464
|
//#region src/components/Slider/Slider/Slider.ts
|
|
@@ -21466,7 +21695,7 @@ var Slider = withBoxProps(defineComponent({
|
|
|
21466
21695
|
max: domain.value[1]
|
|
21467
21696
|
});
|
|
21468
21697
|
const scaled = props.scale(current.value);
|
|
21469
|
-
const label =
|
|
21698
|
+
const label = rawProps.label !== void 0 ? typeof props.label === "function" ? props.label(scaled) : props.label : slots.label?.({ value: scaled }) ?? (typeof props.label === "function" ? props.label(scaled) : props.label);
|
|
21470
21699
|
const start = typeof props.startPointValue === "number" && !props.inverted ? getPosition$1({
|
|
21471
21700
|
value: props.startPointValue,
|
|
21472
21701
|
min: domain.value[0],
|
|
@@ -21799,10 +22028,10 @@ var RangeSlider = defineComponent({
|
|
|
21799
22028
|
value: props.scale(current.value[index]),
|
|
21800
22029
|
position: positions[index],
|
|
21801
22030
|
dragging: move.active.value && activeThumb.value === index,
|
|
21802
|
-
label:
|
|
22031
|
+
label: rawProps.label !== void 0 ? typeof props.label === "function" ? props.label(props.scale(current.value[index])) : props.label : slots.label?.({
|
|
21803
22032
|
value: props.scale(current.value[index]),
|
|
21804
22033
|
index
|
|
21805
|
-
})
|
|
22034
|
+
}) ?? (typeof props.label === "function" ? props.label(props.scale(current.value[index])) : props.label),
|
|
21806
22035
|
labelAlwaysOn: props.labelAlwaysOn,
|
|
21807
22036
|
thumbLabel: props.thumbLabel?.[index],
|
|
21808
22037
|
thumbValueText: props.thumbValueText,
|
|
@@ -21813,7 +22042,7 @@ var RangeSlider = defineComponent({
|
|
|
21813
22042
|
onMousedown: () => activeThumb.value = index,
|
|
21814
22043
|
onFocus: () => focused.value = index,
|
|
21815
22044
|
onKeydown: (event) => keydown(index, event)
|
|
21816
|
-
}, () =>
|
|
22045
|
+
}, () => props.thumbChildren !== void 0 ? props.thumbChildren[index] : slots.thumbChildren?.({ index }))) }), props.name ? [h("input", {
|
|
21817
22046
|
type: "hidden",
|
|
21818
22047
|
name: `${props.name}_from`,
|
|
21819
22048
|
value: current.value[0],
|
|
@@ -24089,6 +24318,7 @@ function flattenChildren$1(children) {
|
|
|
24089
24318
|
var SplitterBase = defineComponent({
|
|
24090
24319
|
name: "Splitter",
|
|
24091
24320
|
inheritAttrs: false,
|
|
24321
|
+
slots: Object,
|
|
24092
24322
|
props: {
|
|
24093
24323
|
orientation: {
|
|
24094
24324
|
type: String,
|
|
@@ -24235,7 +24465,7 @@ var SplitterBase = defineComponent({
|
|
|
24235
24465
|
...getStyles("thumb"),
|
|
24236
24466
|
"data-orientation": props.orientation,
|
|
24237
24467
|
"data-active": splitter.activeHandle === handleIndex || void 0
|
|
24238
|
-
}, [props.handleIcon !== void 0 ? props.handleIcon : h(props.orientation === "vertical" ? GripHorizontalIcon : GripVerticalIcon)]) : void 0));
|
|
24468
|
+
}, [props.handleIcon !== void 0 || slots.handleIcon ? resolveNode(props.handleIcon, slots.handleIcon) : h(props.orientation === "vertical" ? GripHorizontalIcon : GripVerticalIcon)]) : void 0));
|
|
24239
24469
|
}
|
|
24240
24470
|
items.push(cloneVNode(child, {
|
|
24241
24471
|
key: `pane-${index}`,
|
|
@@ -24495,7 +24725,10 @@ var TreeNode = defineComponent({
|
|
|
24495
24725
|
},
|
|
24496
24726
|
setup(props) {
|
|
24497
24727
|
const element = ref(null);
|
|
24498
|
-
const hasChildren = () =>
|
|
24728
|
+
const hasChildren = () => {
|
|
24729
|
+
const hasLoadedChildren = Array.isArray(props.node.children) && props.node.children.length > 0;
|
|
24730
|
+
return hasLoadedChildren || !!props.node.hasChildren && !hasLoadedChildren;
|
|
24731
|
+
};
|
|
24499
24732
|
const expanded = () => props.controller.expandedState.value[props.node.value] || false;
|
|
24500
24733
|
const dnd = useTreeNodeDragDrop({
|
|
24501
24734
|
nodeValue: props.node.value,
|
|
@@ -24511,13 +24744,20 @@ var TreeNode = defineComponent({
|
|
|
24511
24744
|
if (event.code === "ArrowRight") {
|
|
24512
24745
|
event.stopPropagation();
|
|
24513
24746
|
event.preventDefault();
|
|
24514
|
-
if (expanded())
|
|
24515
|
-
|
|
24747
|
+
if (expanded()) {
|
|
24748
|
+
const nextNode = element.value?.querySelector("[role=treeitem]");
|
|
24749
|
+
nextNode?.setAttribute("data-focus-ring", "true");
|
|
24750
|
+
nextNode?.focus();
|
|
24751
|
+
} else if (hasChildren()) props.controller.expand(props.node.value);
|
|
24516
24752
|
} else if (event.code === "ArrowLeft") {
|
|
24517
24753
|
event.stopPropagation();
|
|
24518
24754
|
event.preventDefault();
|
|
24519
24755
|
if (expanded() && hasChildren()) props.controller.collapse(props.node.value);
|
|
24520
|
-
else if (props.isSubtree)
|
|
24756
|
+
else if (props.isSubtree) {
|
|
24757
|
+
const parentNode = element.value?.parentElement?.closest("[role=treeitem]");
|
|
24758
|
+
parentNode?.setAttribute("data-focus-ring", "true");
|
|
24759
|
+
parentNode?.focus();
|
|
24760
|
+
}
|
|
24521
24761
|
} else if (event.code === "ArrowDown" || event.code === "ArrowUp") {
|
|
24522
24762
|
const root = element.value?.closest("[data-tree-root]");
|
|
24523
24763
|
if (!root || !element.value) return;
|
|
@@ -24526,6 +24766,7 @@ var TreeNode = defineComponent({
|
|
|
24526
24766
|
const nodes = Array.from(root.querySelectorAll("[role=treeitem]")).filter((node) => visible(node, root));
|
|
24527
24767
|
const index = nodes.indexOf(element.value);
|
|
24528
24768
|
const next = nodes[event.code === "ArrowDown" ? index + 1 : index - 1];
|
|
24769
|
+
next?.setAttribute("data-focus-ring", "true");
|
|
24529
24770
|
next?.focus();
|
|
24530
24771
|
if (event.shiftKey && next) props.controller.setSelectedState(getValuesRange(props.controller.anchorNode.value, next.dataset.value, props.flatValues));
|
|
24531
24772
|
} else if (event.code === "Space") {
|
|
@@ -24610,6 +24851,10 @@ var TreeNode = defineComponent({
|
|
|
24610
24851
|
"data-level": props.level,
|
|
24611
24852
|
tabindex: props.rootIndex === 0 ? 0 : -1,
|
|
24612
24853
|
onKeydown,
|
|
24854
|
+
onBlur: (event) => {
|
|
24855
|
+
const currentTarget = event.currentTarget;
|
|
24856
|
+
if (!currentTarget.contains(event.relatedTarget)) currentTarget.removeAttribute("data-focus-ring");
|
|
24857
|
+
},
|
|
24613
24858
|
ref: element
|
|
24614
24859
|
}, [
|
|
24615
24860
|
label,
|
|
@@ -24870,12 +25115,12 @@ function useTree(input = {}) {
|
|
|
24870
25115
|
};
|
|
24871
25116
|
}
|
|
24872
25117
|
var Tree_module_default = {
|
|
24873
|
-
root: "
|
|
24874
|
-
subtree: "
|
|
24875
|
-
node: "
|
|
24876
|
-
label: "
|
|
24877
|
-
flatLine: "
|
|
24878
|
-
flatLineClosing: "
|
|
25118
|
+
root: "_root_ea12t_7",
|
|
25119
|
+
subtree: "_subtree_ea12t_13",
|
|
25120
|
+
node: "_node_ea12t_18",
|
|
25121
|
+
label: "_label_ea12t_27",
|
|
25122
|
+
flatLine: "_flatLine_ea12t_126",
|
|
25123
|
+
flatLineClosing: "_flatLineClosing_ea12t_152"
|
|
24879
25124
|
};
|
|
24880
25125
|
//#endregion
|
|
24881
25126
|
//#region src/components/Tree/Tree.ts
|
|
@@ -24886,6 +25131,7 @@ var varsResolver$8 = createVarsResolver((_, { levelOffset }) => ({ root: { "--le
|
|
|
24886
25131
|
var Tree = withBoxProps(defineComponent({
|
|
24887
25132
|
name: "Tree",
|
|
24888
25133
|
inheritAttrs: false,
|
|
25134
|
+
slots: Object,
|
|
24889
25135
|
props: {
|
|
24890
25136
|
component: {
|
|
24891
25137
|
type: [
|
|
@@ -25001,7 +25247,7 @@ var Tree = withBoxProps(defineComponent({
|
|
|
25001
25247
|
onBeforeUnmount(() => document.removeEventListener("mousedown", outside));
|
|
25002
25248
|
return () => {
|
|
25003
25249
|
const flatValues = getFlatValues(props.data);
|
|
25004
|
-
const renderNode = props.renderNode || (slots.node ? (payload) => slots.node?.(payload) : void 0);
|
|
25250
|
+
const renderNode = props.renderNode || (slots.renderNode ? (payload) => slots.renderNode?.(payload) : slots.node ? (payload) => slots.node?.(payload) : void 0);
|
|
25005
25251
|
const nodes = props.data.map((node, index) => h(TreeNode, {
|
|
25006
25252
|
key: node.value,
|
|
25007
25253
|
node,
|
|
@@ -25288,7 +25534,7 @@ function filterTreeData(data, query, filter = defaultTreeNodeFilter) {
|
|
|
25288
25534
|
function flattenTo$1(acc, data, state, parent, level, ancestorIsLast) {
|
|
25289
25535
|
data.forEach((node, index) => {
|
|
25290
25536
|
const isLast = index === data.length - 1;
|
|
25291
|
-
const loaded = Array.isArray(node.children);
|
|
25537
|
+
const loaded = Array.isArray(node.children) && node.children.length > 0;
|
|
25292
25538
|
const hasChildren = loaded || !!node.hasChildren && !loaded;
|
|
25293
25539
|
const expanded = state[node.value] || false;
|
|
25294
25540
|
const linesPath = [];
|
|
@@ -25782,6 +26028,10 @@ var ModalRoot = defineComponent({
|
|
|
25782
26028
|
type: Function,
|
|
25783
26029
|
required: true
|
|
25784
26030
|
},
|
|
26031
|
+
keepMounted: {
|
|
26032
|
+
type: Boolean,
|
|
26033
|
+
default: false
|
|
26034
|
+
},
|
|
25785
26035
|
centered: Boolean,
|
|
25786
26036
|
fullScreen: Boolean,
|
|
25787
26037
|
radius: [String, Number],
|
|
@@ -25844,6 +26094,7 @@ var ModalRoot = defineComponent({
|
|
|
25844
26094
|
...attrs,
|
|
25845
26095
|
opened: props.opened,
|
|
25846
26096
|
onClose: props.onClose,
|
|
26097
|
+
keepMounted: props.keepMounted,
|
|
25847
26098
|
unstyled: props.unstyled,
|
|
25848
26099
|
...getStyles("root"),
|
|
25849
26100
|
mod: {
|
|
@@ -25898,6 +26149,10 @@ var ModalBaseComponent = defineComponent({
|
|
|
25898
26149
|
type: Function,
|
|
25899
26150
|
required: true
|
|
25900
26151
|
},
|
|
26152
|
+
keepMounted: {
|
|
26153
|
+
type: Boolean,
|
|
26154
|
+
default: false
|
|
26155
|
+
},
|
|
25901
26156
|
title: {
|
|
25902
26157
|
type: null,
|
|
25903
26158
|
default: void 0
|
|
@@ -25920,7 +26175,8 @@ var ModalBaseComponent = defineComponent({
|
|
|
25920
26175
|
return h(ModalRoot, {
|
|
25921
26176
|
...attrs,
|
|
25922
26177
|
opened: props.opened,
|
|
25923
|
-
onClose: props.onClose
|
|
26178
|
+
onClose: props.onClose,
|
|
26179
|
+
keepMounted: props.keepMounted
|
|
25924
26180
|
}, { default: () => [props.withOverlay && h(ModalOverlay, props.overlayProps), h(ModalContent, null, { default: () => [header && h(ModalHeader, null, { default: () => [hasNode(title) && h(ModalTitle, null, { default: () => title }), props.withCloseButton && h(ModalCloseButton, props.closeButtonProps)] }), h(ModalBody, null, { default: () => slots.default?.() })] })] });
|
|
25925
26181
|
};
|
|
25926
26182
|
}
|
|
@@ -26045,6 +26301,10 @@ var DrawerRoot = defineComponent({
|
|
|
26045
26301
|
type: Function,
|
|
26046
26302
|
required: true
|
|
26047
26303
|
},
|
|
26304
|
+
keepMounted: {
|
|
26305
|
+
type: Boolean,
|
|
26306
|
+
default: false
|
|
26307
|
+
},
|
|
26048
26308
|
position: {
|
|
26049
26309
|
type: String,
|
|
26050
26310
|
default: "left"
|
|
@@ -26104,6 +26364,7 @@ var DrawerRoot = defineComponent({
|
|
|
26104
26364
|
...attrs,
|
|
26105
26365
|
opened: props.opened,
|
|
26106
26366
|
onClose: props.onClose,
|
|
26367
|
+
keepMounted: props.keepMounted,
|
|
26107
26368
|
unstyled: props.unstyled,
|
|
26108
26369
|
...getStyles("root"),
|
|
26109
26370
|
transitionProps: {
|
|
@@ -26162,6 +26423,10 @@ var DrawerBaseComponent = defineComponent({
|
|
|
26162
26423
|
type: Function,
|
|
26163
26424
|
required: true
|
|
26164
26425
|
},
|
|
26426
|
+
keepMounted: {
|
|
26427
|
+
type: Boolean,
|
|
26428
|
+
default: false
|
|
26429
|
+
},
|
|
26165
26430
|
title: {
|
|
26166
26431
|
type: null,
|
|
26167
26432
|
default: void 0
|
|
@@ -26219,6 +26484,7 @@ var DrawerBaseComponent = defineComponent({
|
|
|
26219
26484
|
...attrs,
|
|
26220
26485
|
opened: props.opened,
|
|
26221
26486
|
onClose: props.onClose,
|
|
26487
|
+
keepMounted: props.keepMounted,
|
|
26222
26488
|
zIndex: resolvedZIndex.value,
|
|
26223
26489
|
...stackProps.value
|
|
26224
26490
|
}, { default: () => [props.withOverlay && h(DrawerOverlay, {
|
|
@@ -26243,14 +26509,17 @@ var Drawer = Object.assign(DrawerBaseComponent, {
|
|
|
26243
26509
|
});
|
|
26244
26510
|
//#endregion
|
|
26245
26511
|
//#region src/utils/Floating/FloatingArrow/get-arrow-position-styles.ts
|
|
26512
|
+
function px$1(value) {
|
|
26513
|
+
return value === void 0 ? void 0 : `${value}px`;
|
|
26514
|
+
}
|
|
26246
26515
|
function horizontalSide(placement, arrowY, offset, position) {
|
|
26247
|
-
if (placement === "center" || position === "center") return { top: arrowY };
|
|
26248
|
-
return placement === "end" ? { bottom: offset } : { top: offset };
|
|
26516
|
+
if (placement === "center" || position === "center") return { top: px$1(arrowY) };
|
|
26517
|
+
return placement === "end" ? { bottom: px$1(offset) } : { top: px$1(offset) };
|
|
26249
26518
|
}
|
|
26250
26519
|
function verticalSide(placement, arrowX, offset, position, dir) {
|
|
26251
|
-
if (placement === "center" || position === "center") return { left: arrowX };
|
|
26252
|
-
if (placement === "end") return { [dir === "ltr" ? "right" : "left"]: offset };
|
|
26253
|
-
return { [dir === "ltr" ? "left" : "right"]: offset };
|
|
26520
|
+
if (placement === "center" || position === "center") return { left: px$1(arrowX) };
|
|
26521
|
+
if (placement === "end") return { [dir === "ltr" ? "right" : "left"]: px$1(offset) };
|
|
26522
|
+
return { [dir === "ltr" ? "left" : "right"]: px$1(offset) };
|
|
26254
26523
|
}
|
|
26255
26524
|
var radiusBySide = {
|
|
26256
26525
|
bottom: "borderTopLeftRadius",
|
|
@@ -26271,15 +26540,15 @@ function mergeStyles(position, size, dir) {
|
|
|
26271
26540
|
const startShape = placement === "start" !== (dir === "rtl");
|
|
26272
26541
|
return {
|
|
26273
26542
|
...base,
|
|
26274
|
-
[side === "bottom" ? "top" : "bottom"]: -size,
|
|
26275
|
-
[physical]: 0,
|
|
26543
|
+
[side === "bottom" ? "top" : "bottom"]: px$1(-size),
|
|
26544
|
+
[physical]: px$1(0),
|
|
26276
26545
|
clipPath: side === "bottom" ? startShape ? "polygon(0% 0%, 0% 100%, 100% 100%)" : "polygon(100% 0%, 0% 100%, 100% 100%)" : startShape ? "polygon(0% 0%, 100% 0%, 0% 100%)" : "polygon(0% 0%, 100% 0%, 100% 100%)"
|
|
26277
26546
|
};
|
|
26278
26547
|
}
|
|
26279
26548
|
return {
|
|
26280
26549
|
...base,
|
|
26281
|
-
[side === "left" ? "right" : "left"]: -size,
|
|
26282
|
-
[placement === "start" ? "top" : "bottom"]: 0,
|
|
26550
|
+
[side === "left" ? "right" : "left"]: px$1(-size),
|
|
26551
|
+
[placement === "start" ? "top" : "bottom"]: px$1(0),
|
|
26283
26552
|
clipPath: side === "left" ? placement === "start" ? "polygon(0% 0%, 100% 0%, 0% 100%)" : "polygon(0% 0%, 0% 100%, 100% 100%)" : placement === "start" ? "polygon(0% 0%, 100% 0%, 100% 100%)" : "polygon(100% 0%, 0% 100%, 100% 100%)"
|
|
26284
26553
|
};
|
|
26285
26554
|
}
|
|
@@ -26296,7 +26565,7 @@ function getArrowPositionStyles(input) {
|
|
|
26296
26565
|
position: "absolute",
|
|
26297
26566
|
[radiusBySide[side]]: `${input.arrowRadius}px`
|
|
26298
26567
|
};
|
|
26299
|
-
const edge = -input.arrowSize / 2;
|
|
26568
|
+
const edge = px$1(-input.arrowSize / 2);
|
|
26300
26569
|
if (side === "left") return {
|
|
26301
26570
|
...base,
|
|
26302
26571
|
...horizontalSide(placement, input.arrowY, input.arrowOffset, input.arrowPosition),
|
|
@@ -26372,6 +26641,7 @@ var FloatingArrow = defineComponent({
|
|
|
26372
26641
|
setup(props, { attrs }) {
|
|
26373
26642
|
const { dir } = useDirection();
|
|
26374
26643
|
return () => props.visible ? h("div", {
|
|
26644
|
+
role: "presentation",
|
|
26375
26645
|
...attrs,
|
|
26376
26646
|
style: [attrs.style, getArrowPositionStyles({
|
|
26377
26647
|
...props,
|
|
@@ -26416,7 +26686,7 @@ function useDelayedHover(input) {
|
|
|
26416
26686
|
}
|
|
26417
26687
|
//#endregion
|
|
26418
26688
|
//#region src/utils/Floating/use-context-menu-handlers.ts
|
|
26419
|
-
function call$
|
|
26689
|
+
function call$4(handler, event) {
|
|
26420
26690
|
if (Array.isArray(handler)) handler.forEach((item) => typeof item === "function" && item(event));
|
|
26421
26691
|
else if (typeof handler === "function") handler(event);
|
|
26422
26692
|
}
|
|
@@ -26468,11 +26738,11 @@ function useContextMenuHandlers(options) {
|
|
|
26468
26738
|
});
|
|
26469
26739
|
return {
|
|
26470
26740
|
onMousedown: (event) => {
|
|
26471
|
-
call$
|
|
26741
|
+
call$4(options.childProps.onMousedown ?? options.childProps.onMouseDown, event);
|
|
26472
26742
|
if (!options.disabled && event.button === 2) event.stopPropagation();
|
|
26473
26743
|
},
|
|
26474
26744
|
onContextmenu: (event) => {
|
|
26475
|
-
call$
|
|
26745
|
+
call$4(options.childProps.onContextmenu ?? options.childProps.onContextMenu, event);
|
|
26476
26746
|
if (options.disabled || event.defaultPrevented) return;
|
|
26477
26747
|
event.preventDefault();
|
|
26478
26748
|
if (gestureHandled.value) return;
|
|
@@ -26480,19 +26750,19 @@ function useContextMenuHandlers(options) {
|
|
|
26480
26750
|
if (touchActive.value) gestureHandled.value = true;
|
|
26481
26751
|
},
|
|
26482
26752
|
onTouchstart: (event) => {
|
|
26483
|
-
call$
|
|
26753
|
+
call$4(options.childProps.onTouchstart ?? options.childProps.onTouchStart, event);
|
|
26484
26754
|
longPress.onTouchstart?.(event);
|
|
26485
26755
|
},
|
|
26486
26756
|
onTouchend: (event) => {
|
|
26487
|
-
call$
|
|
26757
|
+
call$4(options.childProps.onTouchend ?? options.childProps.onTouchEnd, event);
|
|
26488
26758
|
longPress.onTouchend?.(event);
|
|
26489
26759
|
},
|
|
26490
26760
|
onTouchcancel: (event) => {
|
|
26491
|
-
call$
|
|
26761
|
+
call$4(options.childProps.onTouchcancel ?? options.childProps.onTouchCancel, event);
|
|
26492
26762
|
longPress.onTouchcancel?.(event);
|
|
26493
26763
|
},
|
|
26494
26764
|
onTouchmove: (event) => {
|
|
26495
|
-
call$
|
|
26765
|
+
call$4(options.childProps.onTouchmove ?? options.childProps.onTouchMove, event);
|
|
26496
26766
|
longPress.onTouchmove?.(event);
|
|
26497
26767
|
},
|
|
26498
26768
|
style: options.disabled ? options.childProps.style : {
|
|
@@ -26548,7 +26818,7 @@ function one$3(slots, name) {
|
|
|
26548
26818
|
if (children.length !== 1) throw new Error(`${name} component children should be a single element or component that accepts ref`);
|
|
26549
26819
|
return children[0];
|
|
26550
26820
|
}
|
|
26551
|
-
function call$
|
|
26821
|
+
function call$3(handler, event) {
|
|
26552
26822
|
if (Array.isArray(handler)) handler.forEach((fn) => fn?.(event));
|
|
26553
26823
|
else handler?.(event);
|
|
26554
26824
|
}
|
|
@@ -26588,7 +26858,7 @@ var PopoverTarget = defineComponent({
|
|
|
26588
26858
|
});
|
|
26589
26859
|
if (!ctx.controlled) forwarded.onClick = (event) => {
|
|
26590
26860
|
ctx.onToggle();
|
|
26591
|
-
call$
|
|
26861
|
+
call$3(childProps.onClick, event);
|
|
26592
26862
|
};
|
|
26593
26863
|
return cloneVNode(child, forwarded, true);
|
|
26594
26864
|
};
|
|
@@ -26664,7 +26934,7 @@ var PopoverDropdown = defineComponent({
|
|
|
26664
26934
|
"data-position": ctx.placement,
|
|
26665
26935
|
"data-fixed": ctx.floatingStrategy === "fixed" || void 0,
|
|
26666
26936
|
onKeydownCapture: (event) => {
|
|
26667
|
-
call$
|
|
26937
|
+
call$3(attrs.onKeydownCapture, event);
|
|
26668
26938
|
if (event.key === "Escape" && ctx.closeOnEscape) {
|
|
26669
26939
|
ctx.onClose();
|
|
26670
26940
|
ctx.onDismiss?.();
|
|
@@ -26818,7 +27088,11 @@ var PopoverBase = defineComponent({
|
|
|
26818
27088
|
...shiftOptions
|
|
26819
27089
|
};
|
|
26820
27090
|
}));
|
|
26821
|
-
result.push(
|
|
27091
|
+
if (props.middlewares?.inline) result.push(inline(typeof props.middlewares.inline === "object" ? props.middlewares.inline : void 0));
|
|
27092
|
+
result.push(arrow({
|
|
27093
|
+
element: arrowElement,
|
|
27094
|
+
padding: props.arrowOffset
|
|
27095
|
+
}));
|
|
26822
27096
|
if (props.middlewares?.size || props.width === "target") result.push(size({
|
|
26823
27097
|
...typeof props.middlewares?.size === "object" ? props.middlewares.size : {},
|
|
26824
27098
|
apply: ({ rects, availableWidth, availableHeight, elements, ...rest }) => {
|
|
@@ -27496,7 +27770,7 @@ var Tooltip = Object.assign(TooltipBase, {
|
|
|
27496
27770
|
var [provideHoverCardContext, useHoverCardContext] = createSafeContext("HoverCard component was not found in the tree");
|
|
27497
27771
|
//#endregion
|
|
27498
27772
|
//#region src/components/HoverCard/HoverCardDropdown/HoverCardDropdown.ts
|
|
27499
|
-
function call$
|
|
27773
|
+
function call$2(handler, event) {
|
|
27500
27774
|
if (Array.isArray(handler)) handler.forEach((fn) => fn?.(event));
|
|
27501
27775
|
else handler?.(event);
|
|
27502
27776
|
}
|
|
@@ -27508,11 +27782,11 @@ var HoverCardDropdown = defineComponent({
|
|
|
27508
27782
|
return () => h(PopoverDropdown, {
|
|
27509
27783
|
...attrs,
|
|
27510
27784
|
onMouseenter: (event) => {
|
|
27511
|
-
call$
|
|
27785
|
+
call$2(attrs.onMouseenter ?? attrs.onMouseEnter, event);
|
|
27512
27786
|
ctx.openDropdown();
|
|
27513
27787
|
},
|
|
27514
27788
|
onMouseleave: (event) => {
|
|
27515
|
-
call$
|
|
27789
|
+
call$2(attrs.onMouseleave ?? attrs.onMouseLeave, event);
|
|
27516
27790
|
ctx.closeDropdown();
|
|
27517
27791
|
}
|
|
27518
27792
|
}, slots);
|
|
@@ -27715,7 +27989,7 @@ var Menu_module_default = {
|
|
|
27715
27989
|
};
|
|
27716
27990
|
//#endregion
|
|
27717
27991
|
//#region src/components/Menu/Menu.ts
|
|
27718
|
-
function call(handler, event) {
|
|
27992
|
+
function call$1(handler, event) {
|
|
27719
27993
|
if (Array.isArray(handler)) handler.forEach((fn) => fn?.(event));
|
|
27720
27994
|
else handler?.(event);
|
|
27721
27995
|
}
|
|
@@ -27836,6 +28110,9 @@ var MenuBase = defineComponent({
|
|
|
27836
28110
|
get hasSearch() {
|
|
27837
28111
|
return searchCount.value > 0;
|
|
27838
28112
|
},
|
|
28113
|
+
get withInitialFocusPlaceholder() {
|
|
28114
|
+
return props.withInitialFocusPlaceholder;
|
|
28115
|
+
},
|
|
27839
28116
|
registerSearch: () => {
|
|
27840
28117
|
searchCount.value += 1;
|
|
27841
28118
|
return () => {
|
|
@@ -27935,7 +28212,7 @@ var MenuDropdown = defineComponent({
|
|
|
27935
28212
|
onMouseenter: ctx.trigger !== "click" ? ctx.openDropdown : void 0,
|
|
27936
28213
|
onMouseleave: ctx.trigger !== "click" ? ctx.closeDropdown : void 0,
|
|
27937
28214
|
onKeydown: (event) => {
|
|
27938
|
-
call(attrs.onKeydown, event);
|
|
28215
|
+
call$1(attrs.onKeydown, event);
|
|
27939
28216
|
if (event.defaultPrevented || ctx.hasSearch) return;
|
|
27940
28217
|
const root = event.currentTarget;
|
|
27941
28218
|
const active = document.activeElement;
|
|
@@ -27958,7 +28235,13 @@ var MenuDropdown = defineComponent({
|
|
|
27958
28235
|
menuItems(root).find((item) => item.textContent?.trim().toLowerCase().startsWith(query))?.focus();
|
|
27959
28236
|
}
|
|
27960
28237
|
}
|
|
27961
|
-
},
|
|
28238
|
+
}, () => [ctx.withInitialFocusPlaceholder && !ctx.hasSearch ? h("div", {
|
|
28239
|
+
role: "presentation",
|
|
28240
|
+
tabindex: -1,
|
|
28241
|
+
"data-autofocus": true,
|
|
28242
|
+
"data-mantine-stop-propagation": true,
|
|
28243
|
+
style: { outline: 0 }
|
|
28244
|
+
}) : null, slots.default?.()]);
|
|
27962
28245
|
}
|
|
27963
28246
|
});
|
|
27964
28247
|
var MenuItem = defineComponent({
|
|
@@ -28017,7 +28300,7 @@ var MenuItem = defineComponent({
|
|
|
28017
28300
|
}),
|
|
28018
28301
|
onMousedown: (event) => event.preventDefault(),
|
|
28019
28302
|
onClick: (event) => {
|
|
28020
|
-
call(attrs.onClick, event);
|
|
28303
|
+
call$1(attrs.onClick, event);
|
|
28021
28304
|
if (!props.disabled && !attrs["data-disabled"] && (props.closeMenuOnClick ?? ctx.closeOnItemClick)) ctx.closeDropdownImmediately();
|
|
28022
28305
|
}
|
|
28023
28306
|
}, () => [
|
|
@@ -28119,16 +28402,16 @@ var MenuSearch = defineComponent({
|
|
|
28119
28402
|
}
|
|
28120
28403
|
},
|
|
28121
28404
|
onInput: (event) => {
|
|
28122
|
-
call(attrs.onInput, event);
|
|
28123
|
-
call(attrs.onChange, event);
|
|
28405
|
+
call$1(attrs.onInput, event);
|
|
28406
|
+
call$1(attrs.onChange, event);
|
|
28124
28407
|
clearActive(event.currentTarget.closest("[data-menu-dropdown]"));
|
|
28125
28408
|
},
|
|
28126
28409
|
onChange: (event) => {
|
|
28127
|
-
call(attrs.onChange, event);
|
|
28410
|
+
call$1(attrs.onChange, event);
|
|
28128
28411
|
clearActive(event.currentTarget.closest("[data-menu-dropdown]"));
|
|
28129
28412
|
},
|
|
28130
28413
|
onKeydown: (event) => {
|
|
28131
|
-
call(attrs.onKeydown ?? attrs.onKeyDown, event);
|
|
28414
|
+
call$1(attrs.onKeydown ?? attrs.onKeyDown, event);
|
|
28132
28415
|
if (event.defaultPrevented) return;
|
|
28133
28416
|
const root = event.currentTarget.closest("[data-menu-dropdown]");
|
|
28134
28417
|
const items = menuItems(root);
|
|
@@ -28401,13 +28684,13 @@ var MenuSubTarget = defineComponent({
|
|
|
28401
28684
|
const childProps = child.props ?? {};
|
|
28402
28685
|
return cloneVNode(child, {
|
|
28403
28686
|
onClick: (event) => {
|
|
28404
|
-
call(childProps.onClick, event);
|
|
28687
|
+
call$1(childProps.onClick, event);
|
|
28405
28688
|
ctx.toggleDropdown();
|
|
28406
28689
|
},
|
|
28407
28690
|
onMouseenter: ctx.openDropdown,
|
|
28408
28691
|
onMouseleave: ctx.closeDropdown,
|
|
28409
28692
|
onKeydown: (event) => {
|
|
28410
|
-
call(childProps.onKeydown ?? childProps.onKeyDown, event);
|
|
28693
|
+
call$1(childProps.onKeydown ?? childProps.onKeyDown, event);
|
|
28411
28694
|
if (event.defaultPrevented) return;
|
|
28412
28695
|
if (event.key === "ArrowRight") {
|
|
28413
28696
|
event.preventDefault();
|
|
@@ -28427,7 +28710,7 @@ var MenuSubDropdown = defineComponent({
|
|
|
28427
28710
|
return () => h(MenuDropdown, {
|
|
28428
28711
|
...attrs,
|
|
28429
28712
|
onKeydown: (event) => {
|
|
28430
|
-
call(attrs.onKeydown, event);
|
|
28713
|
+
call$1(attrs.onKeydown, event);
|
|
28431
28714
|
if (event.defaultPrevented) return;
|
|
28432
28715
|
const currentDropdown = event.currentTarget;
|
|
28433
28716
|
const focused = event.target;
|
|
@@ -29909,7 +30192,8 @@ var OptionsDropdown = defineComponent({
|
|
|
29909
30192
|
return () => {
|
|
29910
30193
|
validateOptions(props.data);
|
|
29911
30194
|
const renderOption = props.renderOption ?? (slots.renderOption ? (input) => slots.renderOption(input) : void 0);
|
|
29912
|
-
const
|
|
30195
|
+
const nothingFoundSlot = slots.nothingFoundMessage ?? slots.nothingFound;
|
|
30196
|
+
const nothingFound = props.nothingFoundMessage ?? (nothingFoundSlot ? nothingFoundSlot() : void 0);
|
|
29913
30197
|
const data = typeof props.search === "string" ? (props.filter || defaultOptionsFilter)({
|
|
29914
30198
|
options: props.data,
|
|
29915
30199
|
search: props.filterOptions ? props.search : "",
|
|
@@ -30273,8 +30557,8 @@ var ComboboxPopoverBase = defineComponent({
|
|
|
30273
30557
|
}
|
|
30274
30558
|
if (props.searchable) handleSearchChange("");
|
|
30275
30559
|
};
|
|
30276
|
-
const resolveRenderOption = () => props.renderOption ?? (slots.option ? (input) => slots.option(input) : void 0);
|
|
30277
|
-
const resolveNothingFound = () => resolveNode(props.nothingFoundMessage, slots.nothingFound);
|
|
30560
|
+
const resolveRenderOption = () => props.renderOption ?? (slots.renderOption ?? slots.option ? (input) => (slots.renderOption ?? slots.option)(input) : void 0);
|
|
30561
|
+
const resolveNothingFound = () => resolveNode(props.nothingFoundMessage, slots.nothingFoundMessage ?? slots.nothingFound);
|
|
30278
30562
|
const renderSearchableDropdown = () => {
|
|
30279
30563
|
const filteredData = (props.filter || defaultOptionsFilter)({
|
|
30280
30564
|
options: parsedData.value,
|
|
@@ -31126,7 +31410,7 @@ var Select = defineComponent({
|
|
|
31126
31410
|
scrollAreaProps: props.scrollAreaProps
|
|
31127
31411
|
}, {
|
|
31128
31412
|
renderOption: slots.renderOption,
|
|
31129
|
-
nothingFound: slots.nothingFound
|
|
31413
|
+
nothingFound: slots.nothingFoundMessage ?? slots.nothingFound
|
|
31130
31414
|
})]), h(Combobox.HiddenInput, {
|
|
31131
31415
|
value: current(),
|
|
31132
31416
|
name: attrs.name,
|
|
@@ -31488,12 +31772,13 @@ var MultiSelect = defineComponent({
|
|
|
31488
31772
|
label: String(item)
|
|
31489
31773
|
};
|
|
31490
31774
|
const onRemove = () => remove(item);
|
|
31491
|
-
|
|
31775
|
+
const renderPillInput = {
|
|
31492
31776
|
option,
|
|
31493
31777
|
value: item,
|
|
31494
31778
|
onRemove,
|
|
31495
31779
|
disabled
|
|
31496
|
-
}
|
|
31780
|
+
};
|
|
31781
|
+
return props.renderPill ? props.renderPill(renderPillInput) : slots.renderPill ? slots.renderPill(renderPillInput) : h(Pill, {
|
|
31497
31782
|
key: `${String(item)}-${index}`,
|
|
31498
31783
|
withRemoveButton: !readOnly && !option.disabled,
|
|
31499
31784
|
disabled,
|
|
@@ -31532,7 +31817,7 @@ var MultiSelect = defineComponent({
|
|
|
31532
31817
|
filter: props.filter,
|
|
31533
31818
|
limit: props.limit,
|
|
31534
31819
|
filterOptions: props.searchable,
|
|
31535
|
-
hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFound,
|
|
31820
|
+
hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFoundMessage && !slots.nothingFound,
|
|
31536
31821
|
nothingFoundMessage: props.nothingFoundMessage,
|
|
31537
31822
|
value: values,
|
|
31538
31823
|
withCheckIcon: props.withCheckIcon,
|
|
@@ -31544,7 +31829,7 @@ var MultiSelect = defineComponent({
|
|
|
31544
31829
|
scrollAreaProps: props.scrollAreaProps
|
|
31545
31830
|
}, {
|
|
31546
31831
|
renderOption: slots.renderOption,
|
|
31547
|
-
nothingFound: slots.nothingFound
|
|
31832
|
+
nothingFound: slots.nothingFoundMessage ?? slots.nothingFound
|
|
31548
31833
|
})]), h(Combobox.HiddenInput, {
|
|
31549
31834
|
value: values,
|
|
31550
31835
|
valuesDivider: props.hiddenInputValuesDivider,
|
|
@@ -31763,17 +32048,17 @@ var TagsInput = defineComponent({
|
|
|
31763
32048
|
rightSection: slots.rightSection,
|
|
31764
32049
|
default: () => h(Pill.Group, null, () => [...current.map((item, index) => {
|
|
31765
32050
|
const onRemove = () => removeAt(index);
|
|
31766
|
-
const
|
|
31767
|
-
|
|
31768
|
-
|
|
31769
|
-
|
|
31770
|
-
|
|
31771
|
-
|
|
31772
|
-
option,
|
|
32051
|
+
const renderPillInput = {
|
|
32052
|
+
option: lockup.value[item] ?? {
|
|
32053
|
+
value: item,
|
|
32054
|
+
label: item,
|
|
32055
|
+
disabled: false
|
|
32056
|
+
},
|
|
31773
32057
|
value: item,
|
|
31774
32058
|
onRemove,
|
|
31775
32059
|
disabled
|
|
31776
|
-
}
|
|
32060
|
+
};
|
|
32061
|
+
return props.renderPill ? props.renderPill(renderPillInput) : slots.renderPill ? slots.renderPill(renderPillInput) : h(Pill, {
|
|
31777
32062
|
key: `${item}-${index}`,
|
|
31778
32063
|
withRemoveButton: !readOnly,
|
|
31779
32064
|
disabled,
|
|
@@ -31824,7 +32109,7 @@ var TagsInput = defineComponent({
|
|
|
31824
32109
|
search: search(),
|
|
31825
32110
|
filter: props.filter,
|
|
31826
32111
|
limit: props.limit,
|
|
31827
|
-
hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFound,
|
|
32112
|
+
hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFoundMessage && !slots.nothingFound,
|
|
31828
32113
|
nothingFoundMessage: props.nothingFoundMessage,
|
|
31829
32114
|
withScrollArea: props.withScrollArea,
|
|
31830
32115
|
maxDropdownHeight: props.maxDropdownHeight,
|
|
@@ -31832,7 +32117,7 @@ var TagsInput = defineComponent({
|
|
|
31832
32117
|
scrollAreaProps: props.scrollAreaProps
|
|
31833
32118
|
}, {
|
|
31834
32119
|
renderOption: slots.renderOption,
|
|
31835
|
-
nothingFound: slots.nothingFound
|
|
32120
|
+
nothingFound: slots.nothingFoundMessage ?? slots.nothingFound
|
|
31836
32121
|
})]), h(Combobox.HiddenInput, {
|
|
31837
32122
|
value: current,
|
|
31838
32123
|
valuesDivider: props.hiddenInputValuesDivider,
|
|
@@ -31894,6 +32179,7 @@ var ColorInput_module_default = {
|
|
|
31894
32179
|
var ColorInput = defineComponent({
|
|
31895
32180
|
name: "ColorInput",
|
|
31896
32181
|
inheritAttrs: false,
|
|
32182
|
+
slots: Object,
|
|
31897
32183
|
props: {
|
|
31898
32184
|
modelValue: String,
|
|
31899
32185
|
value: String,
|
|
@@ -31988,7 +32274,7 @@ var ColorInput = defineComponent({
|
|
|
31988
32274
|
class: ColorInput_module_default.eyeDropperButton,
|
|
31989
32275
|
"aria-label": "Pick color from screen",
|
|
31990
32276
|
onClick: useEyeDropper
|
|
31991
|
-
}, () => props.eyeDropperIcon ?? h(EyeDropperIcon, { class: ColorInput_module_default.eyeDropperIcon })) : void 0;
|
|
32277
|
+
}, () => resolveNode(props.eyeDropperIcon, slots.eyeDropperIcon) ?? h(EyeDropperIcon, { class: ColorInput_module_default.eyeDropperIcon })) : void 0;
|
|
31992
32278
|
return h(Popover, {
|
|
31993
32279
|
position: "bottom-start",
|
|
31994
32280
|
offset: 5,
|
|
@@ -32071,7 +32357,7 @@ function flattenTo(acc, data, expandedSet, parent, level, parentGuides) {
|
|
|
32071
32357
|
for (let i = 0; i < data.length; i++) {
|
|
32072
32358
|
const node = data[i];
|
|
32073
32359
|
const isLast = i === data.length - 1;
|
|
32074
|
-
const hasLoadedChildren = Array.isArray(node.children);
|
|
32360
|
+
const hasLoadedChildren = Array.isArray(node.children) && node.children.length > 0;
|
|
32075
32361
|
const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;
|
|
32076
32362
|
const hasChildren = hasLoadedChildren || hasAsyncChildren;
|
|
32077
32363
|
const expanded = expandedSet.has(node.value);
|
|
@@ -32184,6 +32470,11 @@ var TreeSelectOption = defineComponent({
|
|
|
32184
32470
|
const paddingInlineStart = BASE_PADDING + (props.level - 1) * LEVEL_OFFSET + (props.withLines && props.level > 1 ? LINE_CONTENT_GAP : 0) + (!props.hasChildren ? OPTION_GAP : 0);
|
|
32185
32471
|
const isActive = props.selected || props.checked;
|
|
32186
32472
|
const ariaChecked = props.showCheckbox ? props.indeterminate && !props.checked ? "mixed" : props.checked : void 0;
|
|
32473
|
+
const expand = (event) => {
|
|
32474
|
+
event?.preventDefault();
|
|
32475
|
+
event?.stopPropagation();
|
|
32476
|
+
if (props.hasChildren) props.onToggleExpand?.(props.node.value);
|
|
32477
|
+
};
|
|
32187
32478
|
const payload = {
|
|
32188
32479
|
node: props.node,
|
|
32189
32480
|
level: props.level,
|
|
@@ -32191,7 +32482,8 @@ var TreeSelectOption = defineComponent({
|
|
|
32191
32482
|
hasChildren: props.hasChildren,
|
|
32192
32483
|
selected: props.selected,
|
|
32193
32484
|
checked: props.checked,
|
|
32194
|
-
indeterminate: props.indeterminate
|
|
32485
|
+
indeterminate: props.indeterminate,
|
|
32486
|
+
expand
|
|
32195
32487
|
};
|
|
32196
32488
|
const lineElements = props.withLines && props.level > 1 ? [
|
|
32197
32489
|
...props.lineGuides.map((show, g) => show ? h("span", {
|
|
@@ -32234,16 +32526,10 @@ var TreeSelectOption = defineComponent({
|
|
|
32234
32526
|
"aria-label": props.expanded ? props.chevronAriaLabels?.collapse ?? "Collapse" : props.chevronAriaLabels?.expand ?? "Expand",
|
|
32235
32527
|
onMousedown: (event) => event.preventDefault(),
|
|
32236
32528
|
onClick: (event) => {
|
|
32237
|
-
event
|
|
32238
|
-
event.stopPropagation();
|
|
32239
|
-
props.onToggleExpand?.(props.node.value);
|
|
32529
|
+
expand(event);
|
|
32240
32530
|
},
|
|
32241
32531
|
onKeydown: (event) => {
|
|
32242
|
-
if (event.key === "Enter")
|
|
32243
|
-
event.preventDefault();
|
|
32244
|
-
event.stopPropagation();
|
|
32245
|
-
props.onToggleExpand?.(props.node.value);
|
|
32246
|
-
}
|
|
32532
|
+
if (event.key === "Enter") expand(event);
|
|
32247
32533
|
}
|
|
32248
32534
|
}, h(AccordionChevron, { size: "80%" })) : null,
|
|
32249
32535
|
props.showCheckbox ? h(CheckboxIndicator, {
|
|
@@ -32458,7 +32744,8 @@ var TreeSelect = defineComponent({
|
|
|
32458
32744
|
const multiValues = selectedArray();
|
|
32459
32745
|
const hasValue = isMulti() ? multiValues.length > 0 : current() != null;
|
|
32460
32746
|
const canClear = props.clearable && hasValue && !disabled && !readOnly;
|
|
32461
|
-
const
|
|
32747
|
+
const nothingFoundSlot = slots.nothingFoundMessage ?? slots.nothingFound;
|
|
32748
|
+
const nothingFound = props.nothingFoundMessage ?? (nothingFoundSlot ? nothingFoundSlot() : void 0);
|
|
32462
32749
|
const renderNode = props.renderNode ?? (slots.renderNode ? (payload) => slots.renderNode(payload) : void 0);
|
|
32463
32750
|
const clear = (event) => {
|
|
32464
32751
|
event.stopPropagation();
|
|
@@ -32597,7 +32884,581 @@ Object.assign(TreeSelect, { classes: {
|
|
|
32597
32884
|
...Combobox.classes,
|
|
32598
32885
|
...TreeSelect_module_default
|
|
32599
32886
|
} });
|
|
32887
|
+
var Cascader_module_default = {
|
|
32888
|
+
columnsList: "_columnsList_1xc8g_1",
|
|
32889
|
+
column: "_column_1xc8g_1",
|
|
32890
|
+
columnScroll: "_columnScroll_1xc8g_21",
|
|
32891
|
+
columnsOverflow: "_columnsOverflow_1xc8g_26",
|
|
32892
|
+
columnOption: "_columnOption_1xc8g_78",
|
|
32893
|
+
flatOption: "_flatOption_1xc8g_127",
|
|
32894
|
+
columnOptionLabel: "_columnOptionLabel_1xc8g_134",
|
|
32895
|
+
columnOptionIcon: "_columnOptionIcon_1xc8g_141",
|
|
32896
|
+
columnOptionCheck: "_columnOptionCheck_1xc8g_160",
|
|
32897
|
+
columnEmpty: "_columnEmpty_1xc8g_172"
|
|
32898
|
+
};
|
|
32899
|
+
//#endregion
|
|
32900
|
+
//#region src/components/Cascader/cascader-utils.ts
|
|
32901
|
+
function cascaderOptionHasChildren(option) {
|
|
32902
|
+
return Array.isArray(option.children) && option.children.length > 0;
|
|
32903
|
+
}
|
|
32904
|
+
function getCascaderColumns(data, activePath) {
|
|
32905
|
+
const columns = [data];
|
|
32906
|
+
let level = data;
|
|
32907
|
+
for (let index = 0; index < activePath.length; index++) {
|
|
32908
|
+
const node = level.find((option) => option.value === activePath[index]);
|
|
32909
|
+
if (!node) break;
|
|
32910
|
+
if (cascaderOptionHasChildren(node) && index < activePath.length - 1) {
|
|
32911
|
+
columns.push(node.children);
|
|
32912
|
+
level = node.children;
|
|
32913
|
+
} else break;
|
|
32914
|
+
}
|
|
32915
|
+
return columns;
|
|
32916
|
+
}
|
|
32917
|
+
function getCascaderPathOptions(data, value) {
|
|
32918
|
+
if (!value?.length) return [];
|
|
32919
|
+
const result = [];
|
|
32920
|
+
let level = data;
|
|
32921
|
+
for (const current of value) {
|
|
32922
|
+
const option = level?.find((item) => item.value === current);
|
|
32923
|
+
if (!option) break;
|
|
32924
|
+
result.push(option);
|
|
32925
|
+
level = option.children;
|
|
32926
|
+
}
|
|
32927
|
+
return result;
|
|
32928
|
+
}
|
|
32929
|
+
function flattenCascaderPaths(data) {
|
|
32930
|
+
const result = [];
|
|
32931
|
+
const walk = (nodes, parentPath, parentOptions, parentDisabled) => {
|
|
32932
|
+
nodes.forEach((node) => {
|
|
32933
|
+
const path = [...parentPath, node.value];
|
|
32934
|
+
const options = [...parentOptions, node];
|
|
32935
|
+
const disabled = parentDisabled || !!node.disabled;
|
|
32936
|
+
const leaf = !cascaderOptionHasChildren(node);
|
|
32937
|
+
result.push({
|
|
32938
|
+
path,
|
|
32939
|
+
options,
|
|
32940
|
+
leaf,
|
|
32941
|
+
disabled
|
|
32942
|
+
});
|
|
32943
|
+
if (!leaf) walk(node.children, path, options, disabled);
|
|
32944
|
+
});
|
|
32945
|
+
};
|
|
32946
|
+
walk(data, [], [], false);
|
|
32947
|
+
return result;
|
|
32948
|
+
}
|
|
32949
|
+
//#endregion
|
|
32950
|
+
//#region src/components/Cascader/Cascader.ts
|
|
32951
|
+
var optionLabelToString = (option) => typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : option.value;
|
|
32952
|
+
var pathsEqual = (first, second) => !!first && !!second && first.length === second.length && first.every((item, index) => item === second[index]);
|
|
32953
|
+
var findEnabledIndex = (options, from, direction) => {
|
|
32954
|
+
let index = from + direction;
|
|
32955
|
+
while (index >= 0 && index < options.length) {
|
|
32956
|
+
if (!options[index].disabled) return index;
|
|
32957
|
+
index += direction;
|
|
32958
|
+
}
|
|
32959
|
+
return -1;
|
|
32960
|
+
};
|
|
32961
|
+
var call = (handler, event) => {
|
|
32962
|
+
if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
|
|
32963
|
+
else if (typeof handler === "function") handler(event);
|
|
32964
|
+
};
|
|
32965
|
+
var Cascader = defineComponent({
|
|
32966
|
+
name: "Cascader",
|
|
32967
|
+
inheritAttrs: false,
|
|
32968
|
+
slots: Object,
|
|
32969
|
+
props: {
|
|
32970
|
+
data: {
|
|
32971
|
+
type: Array,
|
|
32972
|
+
required: true
|
|
32973
|
+
},
|
|
32974
|
+
modelValue: Array,
|
|
32975
|
+
value: Array,
|
|
32976
|
+
defaultValue: Array,
|
|
32977
|
+
onChange: Function,
|
|
32978
|
+
changeOnSelect: Boolean,
|
|
32979
|
+
closeOnSelect: {
|
|
32980
|
+
type: Boolean,
|
|
32981
|
+
default: void 0
|
|
32982
|
+
},
|
|
32983
|
+
allowDeselect: {
|
|
32984
|
+
type: Boolean,
|
|
32985
|
+
default: true
|
|
32986
|
+
},
|
|
32987
|
+
withCheckIcon: {
|
|
32988
|
+
type: Boolean,
|
|
32989
|
+
default: true
|
|
32990
|
+
},
|
|
32991
|
+
checkIconPosition: {
|
|
32992
|
+
type: String,
|
|
32993
|
+
default: "right"
|
|
32994
|
+
},
|
|
32995
|
+
withColumns: {
|
|
32996
|
+
type: Boolean,
|
|
32997
|
+
default: true
|
|
32998
|
+
},
|
|
32999
|
+
expandTrigger: {
|
|
33000
|
+
type: String,
|
|
33001
|
+
default: "click"
|
|
33002
|
+
},
|
|
33003
|
+
searchable: Boolean,
|
|
33004
|
+
searchValue: String,
|
|
33005
|
+
defaultSearchValue: String,
|
|
33006
|
+
onSearchChange: Function,
|
|
33007
|
+
filter: Function,
|
|
33008
|
+
renderSearchOption: Function,
|
|
33009
|
+
formatValue: Function,
|
|
33010
|
+
renderOption: Function,
|
|
33011
|
+
separator: {
|
|
33012
|
+
type: null,
|
|
33013
|
+
default: void 0
|
|
33014
|
+
},
|
|
33015
|
+
columnWidth: {
|
|
33016
|
+
type: [Number, String],
|
|
33017
|
+
default: 200
|
|
33018
|
+
},
|
|
33019
|
+
maxDisplayedLevels: {
|
|
33020
|
+
type: Number,
|
|
33021
|
+
default: 3
|
|
33022
|
+
},
|
|
33023
|
+
previousLevelsControlLabel: {
|
|
33024
|
+
type: String,
|
|
33025
|
+
default: "Show previous levels"
|
|
33026
|
+
},
|
|
33027
|
+
nextLevelsControlLabel: {
|
|
33028
|
+
type: String,
|
|
33029
|
+
default: "Show next levels"
|
|
33030
|
+
},
|
|
33031
|
+
maxDropdownHeight: {
|
|
33032
|
+
type: [Number, String],
|
|
33033
|
+
default: 260
|
|
33034
|
+
},
|
|
33035
|
+
nothingFoundMessage: {
|
|
33036
|
+
type: null,
|
|
33037
|
+
default: void 0
|
|
33038
|
+
},
|
|
33039
|
+
clearable: Boolean,
|
|
33040
|
+
clearSectionMode: {
|
|
33041
|
+
type: String,
|
|
33042
|
+
default: "both"
|
|
33043
|
+
},
|
|
33044
|
+
clearButtonProps: Object,
|
|
33045
|
+
onClear: Function,
|
|
33046
|
+
dropdownOpened: {
|
|
33047
|
+
type: Boolean,
|
|
33048
|
+
default: void 0
|
|
33049
|
+
},
|
|
33050
|
+
defaultDropdownOpened: Boolean,
|
|
33051
|
+
onDropdownOpen: Function,
|
|
33052
|
+
onDropdownClose: Function,
|
|
33053
|
+
comboboxProps: Object,
|
|
33054
|
+
scrollAreaProps: Object,
|
|
33055
|
+
chevronColor: String,
|
|
33056
|
+
hiddenInputProps: Object,
|
|
33057
|
+
openOnFocus: {
|
|
33058
|
+
type: Boolean,
|
|
33059
|
+
default: true
|
|
33060
|
+
},
|
|
33061
|
+
readOnly: Boolean,
|
|
33062
|
+
disabled: Boolean,
|
|
33063
|
+
size: {
|
|
33064
|
+
type: [String, Number],
|
|
33065
|
+
default: "sm"
|
|
33066
|
+
},
|
|
33067
|
+
classNames: [Object, Function],
|
|
33068
|
+
styles: [Object, Function],
|
|
33069
|
+
unstyled: Boolean
|
|
33070
|
+
},
|
|
33071
|
+
emits: ["update:modelValue", "update:searchValue"],
|
|
33072
|
+
setup(props, { attrs, emit, slots }) {
|
|
33073
|
+
const id = useId(attrs.id);
|
|
33074
|
+
const internalValue = ref(props.defaultValue ?? null);
|
|
33075
|
+
const currentValue = computed(() => props.modelValue ?? props.value ?? internalValue.value);
|
|
33076
|
+
const pathOptions = computed(() => getCascaderPathOptions(props.data, currentValue.value));
|
|
33077
|
+
const separatorString = computed(() => typeof props.separator === "string" || typeof props.separator === "number" ? String(props.separator) : "/");
|
|
33078
|
+
const separatorContent = () => resolveNode(props.separator, slots.separator) ?? "/";
|
|
33079
|
+
const nothingFoundContent = () => resolveNode(props.nothingFoundMessage, slots.nothingFoundMessage ?? slots.nothingFound);
|
|
33080
|
+
const displayString = computed(() => {
|
|
33081
|
+
if (!currentValue.value || pathOptions.value.length === 0) return "";
|
|
33082
|
+
const formatted = props.formatValue?.({
|
|
33083
|
+
value: currentValue.value,
|
|
33084
|
+
options: pathOptions.value
|
|
33085
|
+
});
|
|
33086
|
+
if (typeof formatted === "string" || typeof formatted === "number") return String(formatted);
|
|
33087
|
+
return pathOptions.value.map(optionLabelToString).join(` ${separatorString.value} `);
|
|
33088
|
+
});
|
|
33089
|
+
const internalSearch = ref(props.defaultSearchValue ?? (props.searchable && props.defaultValue ? getCascaderPathOptions(props.data, props.defaultValue).map(optionLabelToString).join(` ${separatorString.value} `) : ""));
|
|
33090
|
+
const search = computed(() => props.searchValue ?? internalSearch.value);
|
|
33091
|
+
const activePath = ref(currentValue.value ? [...currentValue.value] : []);
|
|
33092
|
+
const keyboardNav = ref(false);
|
|
33093
|
+
const windowOffset = ref(0);
|
|
33094
|
+
const canInteract = computed(() => !props.readOnly && !props.disabled);
|
|
33095
|
+
const shouldCloseOnSelect = computed(() => props.closeOnSelect ?? !props.allowDeselect);
|
|
33096
|
+
const setSearch = (value) => {
|
|
33097
|
+
if (props.searchValue === void 0) internalSearch.value = value;
|
|
33098
|
+
props.onSearchChange?.(value);
|
|
33099
|
+
emit("update:searchValue", value);
|
|
33100
|
+
};
|
|
33101
|
+
const setValue = (value) => {
|
|
33102
|
+
if (props.modelValue === void 0 && props.value === void 0) internalValue.value = value;
|
|
33103
|
+
props.onChange?.(value, getCascaderPathOptions(props.data, value));
|
|
33104
|
+
emit("update:modelValue", value);
|
|
33105
|
+
};
|
|
33106
|
+
const resetActivePath = () => {
|
|
33107
|
+
activePath.value = currentValue.value ? [...currentValue.value] : [];
|
|
33108
|
+
};
|
|
33109
|
+
const combobox = useCombobox({
|
|
33110
|
+
opened: () => props.dropdownOpened,
|
|
33111
|
+
defaultOpened: props.defaultDropdownOpened,
|
|
33112
|
+
onDropdownOpen: () => {
|
|
33113
|
+
props.onDropdownOpen?.();
|
|
33114
|
+
resetActivePath();
|
|
33115
|
+
},
|
|
33116
|
+
onDropdownClose: () => {
|
|
33117
|
+
props.onDropdownClose?.();
|
|
33118
|
+
if (props.searchable) setSearch(currentValue.value ? displayString.value : "");
|
|
33119
|
+
}
|
|
33120
|
+
});
|
|
33121
|
+
watch(currentValue, (value) => {
|
|
33122
|
+
if (props.searchable) setSearch(value ? displayString.value : "");
|
|
33123
|
+
}, { deep: true });
|
|
33124
|
+
watch(activePath, () => windowOffset.value = 0, { deep: true });
|
|
33125
|
+
const selectPath = (path) => {
|
|
33126
|
+
setValue(props.allowDeselect && pathsEqual(currentValue.value, path) ? null : path);
|
|
33127
|
+
};
|
|
33128
|
+
const expandOption = (level, option) => {
|
|
33129
|
+
const optionPath = [...activePath.value.slice(0, level), option.value];
|
|
33130
|
+
if (cascaderOptionHasChildren(option)) {
|
|
33131
|
+
const first = findEnabledIndex(option.children, -1, 1);
|
|
33132
|
+
activePath.value = first >= 0 ? [...optionPath, option.children[first].value] : optionPath;
|
|
33133
|
+
} else activePath.value = optionPath;
|
|
33134
|
+
};
|
|
33135
|
+
const finishSelection = () => {
|
|
33136
|
+
if (shouldCloseOnSelect.value) combobox.closeDropdown("mouse");
|
|
33137
|
+
};
|
|
33138
|
+
const handleOptionClick = (level, option) => {
|
|
33139
|
+
if (option.disabled) return;
|
|
33140
|
+
keyboardNav.value = false;
|
|
33141
|
+
const path = [...activePath.value.slice(0, level), option.value];
|
|
33142
|
+
if (cascaderOptionHasChildren(option)) {
|
|
33143
|
+
if (props.changeOnSelect) {
|
|
33144
|
+
selectPath(path);
|
|
33145
|
+
finishSelection();
|
|
33146
|
+
}
|
|
33147
|
+
expandOption(level, option);
|
|
33148
|
+
} else {
|
|
33149
|
+
selectPath(path);
|
|
33150
|
+
finishSelection();
|
|
33151
|
+
}
|
|
33152
|
+
};
|
|
33153
|
+
const handleOptionMouseEnter = (level, option) => {
|
|
33154
|
+
if (option.disabled) return;
|
|
33155
|
+
keyboardNav.value = false;
|
|
33156
|
+
if (props.expandTrigger !== "hover") return;
|
|
33157
|
+
if (cascaderOptionHasChildren(option)) expandOption(level, option);
|
|
33158
|
+
else activePath.value = [...activePath.value.slice(0, level), option.value];
|
|
33159
|
+
};
|
|
33160
|
+
const flatPaths = computed(() => flattenCascaderPaths(props.data));
|
|
33161
|
+
const isSearching = computed(() => props.searchable && search.value.trim().length > 0 && search.value !== displayString.value);
|
|
33162
|
+
const showFlatList = computed(() => isSearching.value || !props.withColumns);
|
|
33163
|
+
const flatListItems = computed(() => {
|
|
33164
|
+
const base = flatPaths.value.filter((path) => props.changeOnSelect || path.leaf);
|
|
33165
|
+
if (!isSearching.value) return base;
|
|
33166
|
+
return base.filter((path) => props.filter ? props.filter(search.value, path.options) : path.options.map(optionLabelToString).join(` ${separatorString.value} `).toLowerCase().includes(search.value.trim().toLowerCase()));
|
|
33167
|
+
});
|
|
33168
|
+
const renderSearchLabel = (options) => {
|
|
33169
|
+
if (props.renderSearchOption) return props.renderSearchOption(search.value, options);
|
|
33170
|
+
if (slots.renderSearchOption) return slots.renderSearchOption({
|
|
33171
|
+
query: search.value,
|
|
33172
|
+
options
|
|
33173
|
+
});
|
|
33174
|
+
return options.flatMap((option, index) => [index ? h("span", { "data-cascader-separator": true }, [
|
|
33175
|
+
" ",
|
|
33176
|
+
separatorContent(),
|
|
33177
|
+
" "
|
|
33178
|
+
]) : null, option.label ?? option.value]);
|
|
33179
|
+
};
|
|
33180
|
+
const renderFlatList = () => h(Combobox.Options, { "aria-label": typeof attrs.label === "string" ? attrs.label : void 0 }, () => [h(ScrollArea.Autosize, {
|
|
33181
|
+
mah: props.maxDropdownHeight,
|
|
33182
|
+
type: "scroll",
|
|
33183
|
+
scrollbarSize: "var(--combobox-padding)",
|
|
33184
|
+
offsetScrollbars: "y",
|
|
33185
|
+
...props.scrollAreaProps
|
|
33186
|
+
}, () => flatListItems.value.map((item, index) => {
|
|
33187
|
+
const selected = pathsEqual(currentValue.value, item.path);
|
|
33188
|
+
return h(Combobox.Option, {
|
|
33189
|
+
value: index,
|
|
33190
|
+
active: selected,
|
|
33191
|
+
disabled: item.disabled
|
|
33192
|
+
}, () => h("span", { class: Cascader_module_default.flatOption }, [
|
|
33193
|
+
selected && props.withCheckIcon && props.checkIconPosition === "left" ? h(CheckIcon, { class: Cascader_module_default.columnOptionCheck }) : null,
|
|
33194
|
+
h("span", { class: Cascader_module_default.columnOptionLabel }, [renderSearchLabel(item.options)]),
|
|
33195
|
+
selected && props.withCheckIcon && props.checkIconPosition !== "left" ? h(CheckIcon, { class: Cascader_module_default.columnOptionCheck }) : null
|
|
33196
|
+
]));
|
|
33197
|
+
})), flatListItems.value.length === 0 && (props.nothingFoundMessage !== void 0 || slots.nothingFoundMessage || slots.nothingFound) ? h(Combobox.Empty, {}, nothingFoundContent) : null]);
|
|
33198
|
+
const optionId = (level, value) => id.value ? `${id.value}-cascader-list-${level}-${value}` : void 0;
|
|
33199
|
+
const renderColumns = () => {
|
|
33200
|
+
const allColumns = getCascaderColumns(props.data, activePath.value);
|
|
33201
|
+
const totalColumns = allColumns.length;
|
|
33202
|
+
const maxLevels = props.maxDisplayedLevels > 0 ? props.maxDisplayedLevels : totalColumns;
|
|
33203
|
+
const maxOffset = Math.max(0, totalColumns - maxLevels);
|
|
33204
|
+
const clampedOffset = Math.min(windowOffset.value, maxOffset);
|
|
33205
|
+
const windowStart = Math.max(0, maxOffset - clampedOffset);
|
|
33206
|
+
const windowEnd = Math.min(totalColumns, windowStart + maxLevels);
|
|
33207
|
+
const visibleColumns = allColumns.slice(windowStart, windowEnd);
|
|
33208
|
+
const hiddenBefore = windowStart;
|
|
33209
|
+
const hiddenAfter = totalColumns - windowEnd;
|
|
33210
|
+
const focusedLevel = activePath.value.length - 1;
|
|
33211
|
+
const overflowControl = (position) => h(UnstyledButton, {
|
|
33212
|
+
class: Cascader_module_default.columnsOverflow,
|
|
33213
|
+
"data-position": position,
|
|
33214
|
+
tabindex: -1,
|
|
33215
|
+
"aria-label": position === "start" ? props.previousLevelsControlLabel : props.nextLevelsControlLabel,
|
|
33216
|
+
title: position === "start" ? props.previousLevelsControlLabel : props.nextLevelsControlLabel,
|
|
33217
|
+
onMousedown: (event) => event.preventDefault(),
|
|
33218
|
+
onClick: () => {
|
|
33219
|
+
windowOffset.value = position === "start" ? Math.min(maxOffset, windowOffset.value + 1) : Math.max(0, windowOffset.value - 1);
|
|
33220
|
+
}
|
|
33221
|
+
}, () => h(AccordionChevron));
|
|
33222
|
+
return h("div", {
|
|
33223
|
+
class: Cascader_module_default.columnsList,
|
|
33224
|
+
role: "presentation",
|
|
33225
|
+
onMouseleave: () => {
|
|
33226
|
+
if (props.expandTrigger === "hover") resetActivePath();
|
|
33227
|
+
},
|
|
33228
|
+
onMousemove: () => keyboardNav.value = false
|
|
33229
|
+
}, [
|
|
33230
|
+
hiddenBefore > 0 ? overflowControl("start") : null,
|
|
33231
|
+
...visibleColumns.map((options, index) => {
|
|
33232
|
+
const level = windowStart + index;
|
|
33233
|
+
const isLast = index === visibleColumns.length - 1 && hiddenAfter === 0;
|
|
33234
|
+
return h("div", {
|
|
33235
|
+
class: Cascader_module_default.column,
|
|
33236
|
+
"data-last": isLast || void 0,
|
|
33237
|
+
style: {
|
|
33238
|
+
width: typeof props.columnWidth === "number" ? `${props.columnWidth}px` : props.columnWidth,
|
|
33239
|
+
minWidth: typeof props.columnWidth === "number" ? `${props.columnWidth}px` : props.columnWidth
|
|
33240
|
+
}
|
|
33241
|
+
}, [h(ScrollArea.Autosize, {
|
|
33242
|
+
class: Cascader_module_default.columnScroll,
|
|
33243
|
+
mah: props.maxDropdownHeight,
|
|
33244
|
+
type: "scroll",
|
|
33245
|
+
scrollbarSize: "var(--combobox-padding)",
|
|
33246
|
+
role: "listbox",
|
|
33247
|
+
...props.scrollAreaProps
|
|
33248
|
+
}, () => options.length ? options.map((option) => {
|
|
33249
|
+
const active = activePath.value[level] === option.value;
|
|
33250
|
+
const current = active && level === focusedLevel && keyboardNav.value;
|
|
33251
|
+
const inPath = active && level < focusedLevel;
|
|
33252
|
+
const selected = !!currentValue.value && currentValue.value.length === level + 1 && currentValue.value[level] === option.value;
|
|
33253
|
+
return h(UnstyledButton, {
|
|
33254
|
+
id: optionId(level, option.value),
|
|
33255
|
+
class: Cascader_module_default.columnOption,
|
|
33256
|
+
role: "option",
|
|
33257
|
+
tabindex: -1,
|
|
33258
|
+
"aria-selected": current || void 0,
|
|
33259
|
+
"aria-disabled": option.disabled || void 0,
|
|
33260
|
+
"data-active": current || void 0,
|
|
33261
|
+
"data-in-path": inPath || void 0,
|
|
33262
|
+
"data-selected": selected || void 0,
|
|
33263
|
+
"data-disabled": option.disabled || void 0,
|
|
33264
|
+
onMousedown: (event) => event.preventDefault(),
|
|
33265
|
+
onClick: () => handleOptionClick(level, option),
|
|
33266
|
+
onMouseenter: () => handleOptionMouseEnter(level, option)
|
|
33267
|
+
}, () => [
|
|
33268
|
+
selected && props.withCheckIcon && props.checkIconPosition === "left" ? h(CheckIcon, { class: Cascader_module_default.columnOptionCheck }) : null,
|
|
33269
|
+
h("span", { class: Cascader_module_default.columnOptionLabel }, [props.renderOption ? props.renderOption(option, level) : slots.renderOption?.({
|
|
33270
|
+
option,
|
|
33271
|
+
level
|
|
33272
|
+
}) ?? option.label ?? option.value]),
|
|
33273
|
+
selected && props.withCheckIcon && props.checkIconPosition !== "left" ? h(CheckIcon, { class: Cascader_module_default.columnOptionCheck }) : null,
|
|
33274
|
+
cascaderOptionHasChildren(option) ? h("span", { class: Cascader_module_default.columnOptionIcon }, h(AccordionChevron)) : null
|
|
33275
|
+
]);
|
|
33276
|
+
}) : h("div", { class: Cascader_module_default.columnEmpty }, [nothingFoundContent()]))]);
|
|
33277
|
+
}),
|
|
33278
|
+
hiddenAfter > 0 ? overflowControl("end") : null
|
|
33279
|
+
]);
|
|
33280
|
+
};
|
|
33281
|
+
const handleColumnsKeyDown = (event) => {
|
|
33282
|
+
keyboardNav.value = true;
|
|
33283
|
+
const columns = getCascaderColumns(props.data, activePath.value);
|
|
33284
|
+
const focusedLevel = Math.max(0, activePath.value.length - 1);
|
|
33285
|
+
const currentColumn = columns[focusedLevel] ?? columns[0] ?? [];
|
|
33286
|
+
const focusedIndex = currentColumn.findIndex((item) => item.value === activePath.value[focusedLevel]);
|
|
33287
|
+
const focusedOption = focusedIndex >= 0 ? currentColumn[focusedIndex] : void 0;
|
|
33288
|
+
if (event.key === "ArrowDown") {
|
|
33289
|
+
const next = findEnabledIndex(currentColumn, focusedIndex, 1);
|
|
33290
|
+
if (next >= 0) activePath.value = [...activePath.value.slice(0, focusedLevel), currentColumn[next].value];
|
|
33291
|
+
return true;
|
|
33292
|
+
}
|
|
33293
|
+
if (event.key === "ArrowUp") {
|
|
33294
|
+
const previous = findEnabledIndex(currentColumn, focusedIndex < 0 ? currentColumn.length : focusedIndex, -1);
|
|
33295
|
+
if (previous >= 0) activePath.value = [...activePath.value.slice(0, focusedLevel), currentColumn[previous].value];
|
|
33296
|
+
return true;
|
|
33297
|
+
}
|
|
33298
|
+
if (event.key === "ArrowRight") {
|
|
33299
|
+
if (focusedOption && cascaderOptionHasChildren(focusedOption)) expandOption(focusedLevel, focusedOption);
|
|
33300
|
+
return true;
|
|
33301
|
+
}
|
|
33302
|
+
if (event.key === "ArrowLeft") {
|
|
33303
|
+
if (activePath.value.length > 1) activePath.value = activePath.value.slice(0, -1);
|
|
33304
|
+
return true;
|
|
33305
|
+
}
|
|
33306
|
+
if (event.key === "Enter" && focusedOption) {
|
|
33307
|
+
const path = [...activePath.value.slice(0, focusedLevel), focusedOption.value];
|
|
33308
|
+
if (cascaderOptionHasChildren(focusedOption)) {
|
|
33309
|
+
if (props.changeOnSelect) {
|
|
33310
|
+
selectPath(path);
|
|
33311
|
+
finishSelection();
|
|
33312
|
+
}
|
|
33313
|
+
expandOption(focusedLevel, focusedOption);
|
|
33314
|
+
} else {
|
|
33315
|
+
selectPath(path);
|
|
33316
|
+
finishSelection();
|
|
33317
|
+
}
|
|
33318
|
+
return true;
|
|
33319
|
+
}
|
|
33320
|
+
return false;
|
|
33321
|
+
};
|
|
33322
|
+
const handleKeydown = (event) => {
|
|
33323
|
+
call(attrs.onKeydown, event);
|
|
33324
|
+
if (event.defaultPrevented) return;
|
|
33325
|
+
if (event.key === "Escape") {
|
|
33326
|
+
combobox.closeDropdown("keyboard");
|
|
33327
|
+
return;
|
|
33328
|
+
}
|
|
33329
|
+
if (showFlatList.value || !canInteract.value) return;
|
|
33330
|
+
if (!combobox.dropdownOpened) {
|
|
33331
|
+
if ([
|
|
33332
|
+
"ArrowDown",
|
|
33333
|
+
"ArrowUp",
|
|
33334
|
+
"ArrowRight",
|
|
33335
|
+
"Enter"
|
|
33336
|
+
].includes(event.key) || !props.searchable && event.key === " ") {
|
|
33337
|
+
event.preventDefault();
|
|
33338
|
+
keyboardNav.value = true;
|
|
33339
|
+
combobox.openDropdown("keyboard");
|
|
33340
|
+
if (!currentValue.value && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
|
|
33341
|
+
const rootIndex = event.key === "ArrowDown" ? findEnabledIndex(props.data, -1, 1) : findEnabledIndex(props.data, props.data.length, -1);
|
|
33342
|
+
if (rootIndex >= 0) activePath.value = [props.data[rootIndex].value];
|
|
33343
|
+
}
|
|
33344
|
+
}
|
|
33345
|
+
return;
|
|
33346
|
+
}
|
|
33347
|
+
if (handleColumnsKeyDown(event)) event.preventDefault();
|
|
33348
|
+
else if (!props.searchable && event.key === " ") event.preventDefault();
|
|
33349
|
+
};
|
|
33350
|
+
return () => {
|
|
33351
|
+
const inputAttrs = { ...attrs };
|
|
33352
|
+
delete inputAttrs.name;
|
|
33353
|
+
delete inputAttrs.onKeydown;
|
|
33354
|
+
delete inputAttrs.onFocus;
|
|
33355
|
+
delete inputAttrs.onBlur;
|
|
33356
|
+
delete inputAttrs.onClick;
|
|
33357
|
+
delete inputAttrs.onInput;
|
|
33358
|
+
const clearButton = h(Combobox.ClearButton, {
|
|
33359
|
+
...props.clearButtonProps,
|
|
33360
|
+
onMousedown: (event) => event.preventDefault(),
|
|
33361
|
+
onClick: () => {
|
|
33362
|
+
props.onClear?.();
|
|
33363
|
+
setValue(null);
|
|
33364
|
+
activePath.value = [];
|
|
33365
|
+
setSearch("");
|
|
33366
|
+
combobox.focusTarget();
|
|
33367
|
+
}
|
|
33368
|
+
});
|
|
33369
|
+
const hasValue = !!currentValue.value?.length;
|
|
33370
|
+
const listId = id.value ? `${id.value}-cascader-list` : void 0;
|
|
33371
|
+
const focusedLevel = activePath.value.length - 1;
|
|
33372
|
+
const activeDescendant = keyboardNav.value && focusedLevel >= 0 ? optionId(focusedLevel, activePath.value[focusedLevel]) : void 0;
|
|
33373
|
+
return h("div", { style: { display: "contents" } }, [h(Combobox, {
|
|
33374
|
+
store: combobox,
|
|
33375
|
+
__staticSelector: "Cascader",
|
|
33376
|
+
classNames: props.classNames,
|
|
33377
|
+
styles: props.styles,
|
|
33378
|
+
unstyled: props.unstyled,
|
|
33379
|
+
readOnly: props.readOnly,
|
|
33380
|
+
size: String(props.size),
|
|
33381
|
+
width: showFlatList.value ? "target" : "max-content",
|
|
33382
|
+
position: "bottom-start",
|
|
33383
|
+
...props.comboboxProps,
|
|
33384
|
+
onOptionSubmit: (raw) => {
|
|
33385
|
+
const item = flatListItems.value[Number(raw)];
|
|
33386
|
+
if (!item || item.disabled) return;
|
|
33387
|
+
selectPath(item.path);
|
|
33388
|
+
activePath.value = [...item.path];
|
|
33389
|
+
finishSelection();
|
|
33390
|
+
}
|
|
33391
|
+
}, { default: () => [h(Combobox.Target, {
|
|
33392
|
+
targetType: props.searchable ? "input" : "button",
|
|
33393
|
+
withKeyboardNavigation: showFlatList.value
|
|
33394
|
+
}, () => h(InputBase, {
|
|
33395
|
+
...inputAttrs,
|
|
33396
|
+
id: id.value,
|
|
33397
|
+
__staticSelector: "Cascader",
|
|
33398
|
+
size: props.size,
|
|
33399
|
+
classNames: props.classNames,
|
|
33400
|
+
styles: props.styles,
|
|
33401
|
+
unstyled: props.unstyled,
|
|
33402
|
+
disabled: props.disabled,
|
|
33403
|
+
readonly: props.readOnly || !props.searchable,
|
|
33404
|
+
pointer: !props.searchable,
|
|
33405
|
+
value: props.searchable ? search.value : displayString.value,
|
|
33406
|
+
"aria-controls": listId,
|
|
33407
|
+
"aria-activedescendant": activeDescendant,
|
|
33408
|
+
__defaultRightSection: h(Combobox.Chevron, {
|
|
33409
|
+
size: String(props.size),
|
|
33410
|
+
color: props.chevronColor
|
|
33411
|
+
}),
|
|
33412
|
+
__clearSection: clearButton,
|
|
33413
|
+
__clearable: props.clearable && hasValue && !props.disabled && !props.readOnly,
|
|
33414
|
+
__clearSectionMode: props.clearSectionMode,
|
|
33415
|
+
rightSectionPointerEvents: attrs.rightSectionPointerEvents || "none",
|
|
33416
|
+
onInput: (event) => {
|
|
33417
|
+
setSearch(event.target.value);
|
|
33418
|
+
if (canInteract.value) combobox.openDropdown("keyboard");
|
|
33419
|
+
},
|
|
33420
|
+
onFocus: (event) => {
|
|
33421
|
+
if (props.openOnFocus && props.searchable && canInteract.value) combobox.openDropdown("keyboard");
|
|
33422
|
+
call(attrs.onFocus, event);
|
|
33423
|
+
},
|
|
33424
|
+
onBlur: (event) => {
|
|
33425
|
+
combobox.closeDropdown("unknown");
|
|
33426
|
+
call(attrs.onBlur, event);
|
|
33427
|
+
},
|
|
33428
|
+
onClick: (event) => {
|
|
33429
|
+
if (canInteract.value) {
|
|
33430
|
+
keyboardNav.value = false;
|
|
33431
|
+
if (props.searchable) combobox.openDropdown("mouse");
|
|
33432
|
+
else combobox.toggleDropdown("mouse");
|
|
33433
|
+
}
|
|
33434
|
+
call(attrs.onClick, event);
|
|
33435
|
+
},
|
|
33436
|
+
onKeydown: handleKeydown
|
|
33437
|
+
}, {
|
|
33438
|
+
label: slots.label,
|
|
33439
|
+
description: slots.description,
|
|
33440
|
+
error: slots.error,
|
|
33441
|
+
leftSection: slots.leftSection,
|
|
33442
|
+
rightSection: slots.rightSection
|
|
33443
|
+
})), h(Combobox.Dropdown, {
|
|
33444
|
+
hidden: props.readOnly || props.disabled,
|
|
33445
|
+
style: showFlatList.value ? void 0 : { padding: 0 }
|
|
33446
|
+
}, () => showFlatList.value ? renderFlatList() : renderColumns())] }), h(Combobox.HiddenInput, {
|
|
33447
|
+
name: attrs.name,
|
|
33448
|
+
form: attrs.form,
|
|
33449
|
+
disabled: props.disabled,
|
|
33450
|
+
value: currentValue.value,
|
|
33451
|
+
...props.hiddenInputProps
|
|
33452
|
+
})]);
|
|
33453
|
+
};
|
|
33454
|
+
}
|
|
33455
|
+
});
|
|
33456
|
+
Object.assign(Cascader, { classes: {
|
|
33457
|
+
...InputBase.classes,
|
|
33458
|
+
...Combobox.classes,
|
|
33459
|
+
...Cascader_module_default
|
|
33460
|
+
} });
|
|
32600
33461
|
//#endregion
|
|
32601
|
-
export { Accordion, AccordionChevron, AccordionControl, AccordionItem, AccordionPanel, ActionIcon, ActionIconGroup, ActionIconGroupSection, Affix, Alert, AlphaSlider, Anchor, AngleSlider, AppShell, AppShellAside, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AspectRatio, Autocomplete, Avatar, AvatarGroup, AvatarGroupContextKey, BackgroundImage, Badge, Bars, Blockquote, Box, Breadcrumbs, Burger, Button, ButtonGroup, ButtonGroupSection, Card, CardSection, Center, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, CheckboxIcon, CheckboxIndicator, Chip, ChipGroup, CloseButton, CloseIcon, Code, Collapse, ColorInput, ColorPicker, ColorSlider, ColorSwatch, Combobox, ComboboxChevron, ComboboxClearButton, ComboboxDropdown, ComboboxDropdownTarget, ComboboxEmpty, ComboboxEventsTarget, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxHiddenInput, ComboboxOption, ComboboxOptions, ComboboxPopover, ComboboxPopoverTarget, ComboboxSearch, ComboboxTarget, Container, CopyButton, DEFAULT_COLORS, DEFAULT_THEME, DataList, DataListItem, DataListItemLabel, DataListItemValue, Dialog, DirectionContextKey, DirectionProvider, Divider, Dots, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerOverlay, DrawerRoot, DrawerStack, DrawerTitle, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIndicator, EmptyStateTitle, FLEX_STYLE_PROPS_DATA, Fieldset, FileButton, FileInput, FlatTreeNode, Flex, FloatingIndicator, FloatingWindow, FocusTrap, FocusTrapInitialFocus, Grid, GridCol, Group, HeadlessMantineProvider, Highlight, HoverCard, HoverCardDropdown, HoverCardGroup, HoverCardTarget, HueSlider, INVALID_PRIMARY_COLOR_ERROR, INVALID_PRIMARY_SHADE_ERROR, Image, Indicator, InlineStyles, Input, InputBase, InputClearButton, InputClearSection, InputDescription, InputError, InputLabel, InputPlaceholder, InputWrapper, JsonInput, Kbd, List, ListItem, Loader, LoadingOverlay, MantineClasses, MantineContextKey, MantineCssVariables, MantineProvider, MantineThemeKey, MantineThemeProvider, Mark, Marquee, MaskInput, Menu, MenuCheckboxGroup, MenuCheckboxItem, MenuContextMenu, MenuDivider, MenuDropdown, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSearch, MenuSub, MenuSubDropdown, MenuSubItem, MenuSubTarget, MenuTarget, Menubar, MenubarDropdown, MenubarMenu, MenubarTarget, Modal, ModalBase, ModalBaseBody, ModalBaseCloseButton, ModalBaseContent, ModalBaseHeader, ModalBaseOverlay, ModalBaseTitle, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, ModalRoot, ModalTitle, MultiSelect, NativeScrollArea, NativeSelect, NativeSelectOption, NavLink, Notification, NumberFormatter, NumberInput, NumberInputChevron, OptionalPortal, OptionsDropdown, Oval, OverflowList, Overlay, Pagination, PaginationControl, PaginationDots, PaginationFirst, PaginationItems, PaginationItemsGroup, PaginationLabel, PaginationLast, PaginationNext, PaginationPrevious, PaginationRoot, Paper, PasswordInput, PasswordToggleIcon, Pill, PillGroup, PillsInput, PillsInputField, PinInput, Popover, PopoverContextMenu, PopoverDropdown, PopoverTarget, Portal, Progress, ProgressLabel, ProgressRoot, ProgressSection, Radio, RadioCard, RadioGroup, RadioIcon, RadioIndicator, RangeSlider, Rating, RingProgress, RollingNumber, STYLE_PROPS_DATA, ScrollArea, ScrollAreaAutosize, Scroller, SegmentedControl, Select, SemiCircleProgress, SimpleGrid, Skeleton, Slider, Space, Splitter, SplitterPane, Spoiler, Stack, Stepper, StepperCompleted, StepperStep, Switch, SwitchGroup, Table, TableCaption, TableDataRenderer, TableOfContents, TableScrollContainer, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr, Tabs, TabsList, TabsPanel, TabsTab, TagsInput, Text, TextInput, Textarea, ThemeIcon, Timeline, TimelineItem, Title, Tooltip, TooltipFloating, TooltipGroup, Transition, Tree, TreeSelect, TreeSelectOption, Typography, UnstyledButton, VisuallyHidden, alpha, buildValue, camelToKebabCase, colorsTuple, convertCssVariables, convertHsvaTo, createEventHandler, createProviderColorScheme, createSafeContext, createSafeInjectionContext, createScopedKeydownHandler, createVarsResolver, cssVariablesObjectToString, darken, deepMerge, defaultCssVariablesResolver, defaultLoaders, defaultOptionsFilter, defaultTreeNodeFilter, defaultVariantColorsResolver, em, factory, factory as polymorphicFactory, filterProps, filterTreeData, findClosestNumber, flattenTreeData, foldAccents, formatNumber, getVariables as getAppShellVariables, getAutoContrastValue, getBaseValue, getBreakpointValue, getContrastColor, getDefaultZIndex, getDigitParts, getFontSize, getGradient, getInitials, getInitialsColor, getLineHeight, getMarkColor, getMergedVariables, getOptionsLockup, getParsedComboboxData, getParsedNativeSelectData, getPositionVariables, getPrimaryContrastColor, getPrimaryShade, getRadius, getRenderSlots, getRenderSlotsFromValues, getSafeId, getShadow, getSize, getSortedBreakpoints, getSpacing, getSplittedTags, getThemeColor, getTitleSize, getTreeExpandedState, hasNode, hashStyleProps, highlighter, hsvaToHex, hsvaToHexa, hsvaToHsl, hsvaToRgba, hsvaToRgbaObject, isColorValid, isEmptyComboboxData, isLightColor, isNumberLike, isOptionsGroup, isPrimitive, isVirtualColor, keys, lighten, luminance, memoize, mergeAsyncChildren, mergeMantineTheme, movePill, moveTreeNode, noop, parseColor, parseHex, parseHexa, parseHsla, parseHue, parseRgba, parseStyleProps, parseThemeColor, polymorphicProps, provideGridContext, provideListContext, provideMantineContext, provideMantineTheme, providePillsInputContext, px, rem, renderPolymorphic, resolveColorScheme, resolveNode, rgba, round, toRgba, useAccordionContext, useAccordionItemContext, useAppShellContext, useAvatarGroupContext, useCheckboxCardContext, useCheckboxGroupContext, useChipGroupContext, useCombobox, useComboboxContext, useComboboxTargetProps, useComputedColorScheme, useDataListContext, useDirection, useDrawersStack, useEmptyStateContext, useFloatingIndicator, useForwardedRef, useGridContext, useHoverCardContext, useInputContext, useInputWrapperContext, useListContext, useMantineClassNamesPrefix, useMantineColorScheme, useMantineContext, useMantineCssVariablesResolver, useMantineDeduplicateInlineStyles, useMantineEnv, useMantineIsHeadless, useMantineStyleNonce, useMantineTheme, useMantineWithStaticClasses, useMenuContext, useMenubarContext, useMenubarMenuContext, usePaginationContext, usePillGroupContext, usePillsInputContext, usePillsReorder, useProgressContext, useProps, useRadioCardContext, useRadioGroupContext, useRandomClassName, useSafeMantineTheme, useScrollAreaContext, useSplitterContext, useStepperContext, useStyles, useSwitchGroupContext, useTabsContext, useTree, useVirtualizedCombobox, validateJson, validateMantineTheme, validateOptions, virtualColor, withBoxProps };
|
|
33462
|
+
export { Accordion, AccordionChevron, AccordionControl, AccordionItem, AccordionPanel, ActionIcon, ActionIconGroup, ActionIconGroupSection, Affix, Alert, AlphaSlider, Anchor, AngleSlider, AppShell, AppShellAside, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AspectRatio, Autocomplete, Avatar, AvatarGroup, AvatarGroupContextKey, BackgroundImage, Badge, Bars, Blockquote, Box, Breadcrumbs, Burger, Button, ButtonGroup, ButtonGroupSection, Card, CardSection, Cascader, Center, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, CheckboxIcon, CheckboxIndicator, Chip, ChipGroup, CloseButton, CloseIcon, Code, Collapse, ColorInput, ColorPicker, ColorSlider, ColorSwatch, Combobox, ComboboxChevron, ComboboxClearButton, ComboboxDropdown, ComboboxDropdownTarget, ComboboxEmpty, ComboboxEventsTarget, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxHiddenInput, ComboboxOption, ComboboxOptions, ComboboxPopover, ComboboxPopoverTarget, ComboboxSearch, ComboboxTarget, Container, CopyButton, DEFAULT_COLORS, DEFAULT_THEME, DataList, DataListItem, DataListItemLabel, DataListItemValue, Dialog, DirectionContextKey, DirectionProvider, Divider, Dots, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerOverlay, DrawerRoot, DrawerStack, DrawerTitle, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIndicator, EmptyStateTitle, FLEX_STYLE_PROPS_DATA, Fieldset, FileButton, FileInput, FlatTreeNode, Flex, FloatingIndicator, FloatingWindow, FloatingWindowResizeHandle, FocusTrap, FocusTrapInitialFocus, Grid, GridCol, Group, HeadlessMantineProvider, Highlight, HoverCard, HoverCardDropdown, HoverCardGroup, HoverCardTarget, HueSlider, INVALID_PRIMARY_COLOR_ERROR, INVALID_PRIMARY_SHADE_ERROR, Image, Indicator, InlineStyles, Input, InputBase, InputClearButton, InputClearSection, InputDescription, InputError, InputLabel, InputPlaceholder, InputWrapper, JsonInput, Kbd, List, ListItem, Loader, LoadingOverlay, MantineClasses, MantineContextKey, MantineCssVariables, MantineProvider, MantineThemeKey, MantineThemeProvider, Mark, Marquee, MaskInput, Menu, MenuCheckboxGroup, MenuCheckboxItem, MenuContextMenu, MenuDivider, MenuDropdown, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSearch, MenuSub, MenuSubDropdown, MenuSubItem, MenuSubTarget, MenuTarget, Menubar, MenubarDropdown, MenubarMenu, MenubarTarget, Modal, ModalBase, ModalBaseBody, ModalBaseCloseButton, ModalBaseContent, ModalBaseHeader, ModalBaseOverlay, ModalBaseTitle, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, ModalRoot, ModalTitle, MultiSelect, NativeScrollArea, NativeSelect, NativeSelectOption, NavLink, Notification, NumberFormatter, NumberInput, NumberInputChevron, OptionalPortal, OptionsDropdown, Oval, OverflowList, Overlay, Pagination, PaginationControl, PaginationDots, PaginationFirst, PaginationItems, PaginationItemsGroup, PaginationLabel, PaginationLast, PaginationNext, PaginationPrevious, PaginationRoot, Paper, PasswordInput, PasswordToggleIcon, Pill, PillGroup, PillsInput, PillsInputField, PinInput, Popover, PopoverContextMenu, PopoverDropdown, PopoverTarget, Portal, Progress, ProgressLabel, ProgressRoot, ProgressSection, Radio, RadioCard, RadioGroup, RadioIcon, RadioIndicator, RangeSlider, Rating, RingProgress, RollingNumber, STYLE_PROPS_DATA, ScrollArea, ScrollAreaAutosize, Scroller, SegmentedControl, Select, SemiCircleProgress, SimpleGrid, Skeleton, Slider, Space, Splitter, SplitterPane, Spoiler, Stack, Stepper, StepperCompleted, StepperStep, Switch, SwitchGroup, Table, TableCaption, TableDataRenderer, TableOfContents, TableScrollContainer, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr, Tabs, TabsList, TabsPanel, TabsTab, TagsInput, Text, TextInput, Textarea, ThemeIcon, Timeline, TimelineItem, Title, Tooltip, TooltipFloating, TooltipGroup, Transition, Tree, TreeSelect, TreeSelectOption, Typography, UnstyledButton, VisuallyHidden, alpha, buildValue, camelToKebabCase, cascaderOptionHasChildren, colorsTuple, convertCssVariables, convertHsvaTo, createEventHandler, createProviderColorScheme, createSafeContext, createSafeInjectionContext, createScopedKeydownHandler, createVarsResolver, cssVariablesObjectToString, darken, deepMerge, defaultCssVariablesResolver, defaultLoaders, defaultOptionsFilter, defaultTreeNodeFilter, defaultVariantColorsResolver, em, factory, factory as polymorphicFactory, filterProps, filterTreeData, findClosestNumber, flattenCascaderPaths, flattenTreeData, foldAccents, formatNumber, getVariables as getAppShellVariables, getAutoContrastValue, getBaseValue, getBreakpointValue, getCascaderColumns, getCascaderPathOptions, getContrastColor, getDefaultZIndex, getDigitParts, getFontSize, getGradient, getInitials, getInitialsColor, getLineHeight, getMarkColor, getMergedVariables, getOptionsLockup, getParsedComboboxData, getParsedNativeSelectData, getPositionVariables, getPrimaryContrastColor, getPrimaryShade, getRadius, getRenderSlots, getRenderSlotsFromValues, getSafeId, getShadow, getSize, getSortedBreakpoints, getSpacing, getSplittedTags, getThemeColor, getTitleSize, getTreeExpandedState, hasNode, hashStyleProps, highlighter, hsvaToHex, hsvaToHexa, hsvaToHsl, hsvaToRgba, hsvaToRgbaObject, isColorValid, isEmptyComboboxData, isLightColor, isNumberLike, isOptionsGroup, isPrimitive, isVirtualColor, keys, lighten, luminance, memoize, mergeAsyncChildren, mergeMantineTheme, movePill, moveTreeNode, noop, parseColor, parseHex, parseHexa, parseHsla, parseHue, parseRgba, parseStyleProps, parseThemeColor, polymorphicProps, provideGridContext, provideListContext, provideMantineContext, provideMantineTheme, providePillsInputContext, px, rem, renderPolymorphic, resolveColorScheme, resolveNode, rgba, round, toRgba, useAccordionContext, useAccordionItemContext, useAppShellContext, useAvatarGroupContext, useCheckboxCardContext, useCheckboxGroupContext, useChipGroupContext, useCombobox, useComboboxContext, useComboboxTargetProps, useComputedColorScheme, useDataListContext, useDirection, useDrawersStack, useEmptyStateContext, useFloatingIndicator, useForwardedRef, useGridContext, useHoverCardContext, useInputContext, useInputWrapperContext, useListContext, useMantineClassNamesPrefix, useMantineColorScheme, useMantineContext, useMantineCssVariablesResolver, useMantineDeduplicateInlineStyles, useMantineEnv, useMantineIsHeadless, useMantineStyleNonce, useMantineTheme, useMantineWithStaticClasses, useMenuContext, useMenubarContext, useMenubarMenuContext, usePaginationContext, usePillGroupContext, usePillsInputContext, usePillsReorder, useProgressContext, useProps, useRadioCardContext, useRadioGroupContext, useRandomClassName, useSafeMantineTheme, useScrollAreaContext, useSplitterContext, useStepperContext, useStyles, useSwitchGroupContext, useTabsContext, useTree, useVirtualizedCombobox, validateJson, validateMantineTheme, validateOptions, virtualColor, withBoxProps };
|
|
32602
33463
|
|
|
32603
33464
|
//# sourceMappingURL=index.mjs.map
|