@duskmoon-dev/components 0.1.2 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/classes/app.d.ts +2 -2
- package/dist/classes/auto-complete.d.ts +4 -2
- package/dist/classes/checkbox.d.ts +9 -5
- package/dist/classes/color-picker.d.ts +2 -1
- package/dist/classes/dm-drawer.d.ts +1 -1
- package/dist/classes/dm-toolbar.d.ts +1 -1
- package/dist/classes/index.js +35 -22
- package/dist/components/alert/index.js +3 -3
- package/dist/components/app/index.js +3 -10
- package/dist/components/auto-complete/AutoComplete.types.d.ts +2 -0
- package/dist/components/auto-complete/index.js +14 -8
- package/dist/components/cascader/index.js +10 -1
- package/dist/components/checkbox/index.js +10 -21
- package/dist/components/col/index.d.ts +1 -1
- package/dist/components/collapse/index.js +3 -1
- package/dist/components/color-picker/index.js +6 -2
- package/dist/components/date-picker/DatePicker.types.d.ts +4 -1
- package/dist/components/date-picker/index.js +1 -2
- package/dist/components/descriptions/index.js +10 -1
- package/dist/components/dm-date-picker/index.js +1 -2
- package/dist/components/dm-drawer/index.js +1 -3
- package/dist/components/dm-page-header/index.js +1 -3
- package/dist/components/dm-pro-table/index.js +6 -6
- package/dist/components/dm-pro-table-inner/index.js +5 -3
- package/dist/components/dm-query/index.js +11 -4
- package/dist/components/dm-search/index.js +5 -3
- package/dist/components/dm-table/index.js +5 -3
- package/dist/components/dm-toolbar/index.js +1 -3
- package/dist/components/dm-tree/index.js +3 -1
- package/dist/components/mentions/index.js +1 -7
- package/dist/components/popover/index.d.ts +1 -1
- package/dist/components/tour/index.js +4 -1
- package/dist/components/transfer/index.js +7 -6
- package/dist/components/typography/index.js +1 -7
- package/dist/generated/version.d.ts +1 -0
- package/dist/index.js +93 -80
- package/dist/infrastructure.d.ts +1 -1
- package/dist/infrastructure.js +5 -1
- package/dist/styles.css +5442 -0
- package/package.json +33 -8
package/README.md
CHANGED
package/dist/classes/app.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export declare const appClass = "app";
|
|
2
2
|
export declare const appRootClass = "app-root";
|
|
3
3
|
export declare const appHolderClass = "app-holder";
|
|
4
|
-
export declare function getAppClasses({ className
|
|
4
|
+
export declare function getAppClasses({ className }: {
|
|
5
5
|
className?: string;
|
|
6
6
|
}): string;
|
|
7
|
-
export declare function getAppRootClasses({ className
|
|
7
|
+
export declare function getAppRootClasses({ className }: {
|
|
8
8
|
className?: string;
|
|
9
9
|
}): string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { AutoCompleteSize } from "../components/auto-complete/AutoComplete.types";
|
|
1
|
+
import type { AutoCompleteColor, AutoCompleteSize } from "../components/auto-complete/AutoComplete.types";
|
|
2
2
|
export declare const autoCompleteBaseClass = "autocomplete";
|
|
3
3
|
export declare const autoCompleteInputWrapperClass = "autocomplete-input-wrapper";
|
|
4
4
|
export declare const autoCompleteInputClass = "autocomplete-input";
|
|
@@ -12,8 +12,10 @@ export declare const autoCompleteOptionFocusedClass = "autocomplete-option-focus
|
|
|
12
12
|
export declare const autoCompleteOptionDisabledClass = "autocomplete-option-disabled";
|
|
13
13
|
export declare const autoCompleteClearClass = "autocomplete-clear";
|
|
14
14
|
export declare const autoCompleteNoOptionsClass = "autocomplete-no-options";
|
|
15
|
+
export declare const autoCompleteColorClasses: Record<AutoCompleteColor, string>;
|
|
15
16
|
export declare const autoCompleteSizeClasses: Record<AutoCompleteSize, string>;
|
|
16
|
-
export declare function getAutoCompleteClasses({ disabled, open, className, }: {
|
|
17
|
+
export declare function getAutoCompleteClasses({ color, disabled, open, className, }: {
|
|
18
|
+
color?: AutoCompleteColor;
|
|
17
19
|
disabled?: boolean;
|
|
18
20
|
open?: boolean;
|
|
19
21
|
className?: string;
|
|
@@ -1,20 +1,24 @@
|
|
|
1
1
|
import type { CheckboxColor, CheckboxLabelPosition, CheckboxSize } from "../components/checkbox/Checkbox.types";
|
|
2
|
-
export declare const checkboxBaseClass = "checkbox";
|
|
2
|
+
export declare const checkboxBaseClass = "checkbox-wrapper";
|
|
3
|
+
export declare const checkboxInputBaseClass = "checkbox";
|
|
3
4
|
export declare const checkboxInputClass = "checkbox-input";
|
|
4
5
|
export declare const checkboxBoxBaseClass = "checkbox-box";
|
|
5
6
|
export declare const checkboxCheckmarkClass = "checkbox-checkmark";
|
|
6
|
-
export declare const checkboxLabelBaseClass = "checkbox-
|
|
7
|
+
export declare const checkboxLabelBaseClass = "checkbox-text";
|
|
7
8
|
export declare const checkboxColorClasses: Record<CheckboxColor, string>;
|
|
8
9
|
export declare const checkboxSizeClasses: Record<CheckboxSize, string>;
|
|
9
10
|
export declare const checkboxLabelPositionClasses: Record<CheckboxLabelPosition, string>;
|
|
10
11
|
export declare const checkboxErrorClass = "checkbox-error";
|
|
11
12
|
export declare const checkboxLoadingClass = "checkbox-loading";
|
|
12
|
-
export declare function getCheckboxClasses({
|
|
13
|
-
size?: CheckboxSize;
|
|
14
|
-
error?: boolean;
|
|
13
|
+
export declare function getCheckboxClasses({ loading, className, }: {
|
|
15
14
|
loading?: boolean;
|
|
16
15
|
className?: string;
|
|
17
16
|
}): string;
|
|
17
|
+
export declare function getCheckboxInputClasses({ color, size, error, }: {
|
|
18
|
+
color?: CheckboxColor;
|
|
19
|
+
size?: CheckboxSize;
|
|
20
|
+
error?: boolean;
|
|
21
|
+
}): string;
|
|
18
22
|
export declare function getCheckboxBoxClasses({ color, }: {
|
|
19
23
|
color?: CheckboxColor;
|
|
20
24
|
}): string;
|
|
@@ -2,8 +2,9 @@ import type { ColorPickerFormat, ColorPickerSize, ColorPickerTrigger } from "../
|
|
|
2
2
|
export declare const colorPickerBaseClass = "color-picker";
|
|
3
3
|
export declare const colorPickerSwatchClass = "color-picker-swatch";
|
|
4
4
|
export declare const colorPickerTextClass = "color-picker-text";
|
|
5
|
-
export declare const colorPickerPanelClass = "color-picker-panel popover popover-show";
|
|
5
|
+
export declare const colorPickerPanelClass = "color-picker-panel popover popover-bottom popover-show";
|
|
6
6
|
export declare const colorPickerInputClass = "color-picker-input input";
|
|
7
|
+
export declare const colorPickerFormatSelectClass = "color-picker-format-select select select-sm";
|
|
7
8
|
export declare const colorPickerPresetsClass = "color-picker-presets";
|
|
8
9
|
export declare const colorPickerPresetClass = "color-picker-preset";
|
|
9
10
|
export declare const colorPickerPresetLabelClass = "color-picker-preset-label";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const dmDrawerBaseClass = "dm-drawer";
|
|
2
2
|
export declare const dmDrawerFooterActionClass = "dm-drawer-footer-action";
|
|
3
|
-
export declare function getDmDrawerClasses({ className
|
|
3
|
+
export declare function getDmDrawerClasses({ className }: {
|
|
4
4
|
className?: string;
|
|
5
5
|
}): string;
|
|
6
6
|
export declare function getDmDrawerFooterClasses({ align, className, }: {
|
|
@@ -3,7 +3,7 @@ export declare const dmToolbarItemClass = "dm-toolbar-item";
|
|
|
3
3
|
export declare const dmToolbarPrimaryItemClass = "dm-toolbar-primary-item";
|
|
4
4
|
export declare const dmToolbarSecondaryItemClass = "dm-toolbar-secondary-item";
|
|
5
5
|
export declare const dmToolbarMoreClass = "dm-toolbar-more";
|
|
6
|
-
export declare function getDmToolbarClasses({ className
|
|
6
|
+
export declare function getDmToolbarClasses({ className }: {
|
|
7
7
|
className?: string;
|
|
8
8
|
}): string;
|
|
9
9
|
export declare function getDmToolbarItemClasses({ primary, className, }: {
|
package/dist/classes/index.js
CHANGED
|
@@ -11,9 +11,9 @@ var alertColorClasses = {
|
|
|
11
11
|
error: "alert-error"
|
|
12
12
|
};
|
|
13
13
|
var alertAppearanceClasses = {
|
|
14
|
-
filled: "",
|
|
15
|
-
outline: "alert-
|
|
16
|
-
tonal: "
|
|
14
|
+
filled: "alert-filled",
|
|
15
|
+
outline: "alert-outlined",
|
|
16
|
+
tonal: ""
|
|
17
17
|
};
|
|
18
18
|
function getAlertClasses({
|
|
19
19
|
color = "info",
|
|
@@ -59,14 +59,10 @@ function getAnchorLinkClasses({
|
|
|
59
59
|
var appClass = "app";
|
|
60
60
|
var appRootClass = "app-root";
|
|
61
61
|
var appHolderClass = "app-holder";
|
|
62
|
-
function getAppClasses({
|
|
63
|
-
className
|
|
64
|
-
}) {
|
|
62
|
+
function getAppClasses({ className }) {
|
|
65
63
|
return cn(appClass, className);
|
|
66
64
|
}
|
|
67
|
-
function getAppRootClasses({
|
|
68
|
-
className
|
|
69
|
-
}) {
|
|
65
|
+
function getAppRootClasses({ className }) {
|
|
70
66
|
return cn(appRootClass, className);
|
|
71
67
|
}
|
|
72
68
|
// src/classes/auto-complete.ts
|
|
@@ -83,17 +79,27 @@ var autoCompleteOptionFocusedClass = "autocomplete-option-focused";
|
|
|
83
79
|
var autoCompleteOptionDisabledClass = "autocomplete-option-disabled";
|
|
84
80
|
var autoCompleteClearClass = "autocomplete-clear";
|
|
85
81
|
var autoCompleteNoOptionsClass = "autocomplete-no-options";
|
|
82
|
+
var autoCompleteColorClasses = {
|
|
83
|
+
primary: "autocomplete-primary",
|
|
84
|
+
secondary: "autocomplete-secondary",
|
|
85
|
+
tertiary: "autocomplete-tertiary",
|
|
86
|
+
info: "autocomplete-info",
|
|
87
|
+
success: "autocomplete-success",
|
|
88
|
+
warning: "autocomplete-warning",
|
|
89
|
+
error: "autocomplete-error"
|
|
90
|
+
};
|
|
86
91
|
var autoCompleteSizeClasses = {
|
|
87
92
|
sm: "autocomplete-sm",
|
|
88
93
|
md: "",
|
|
89
94
|
lg: "autocomplete-lg"
|
|
90
95
|
};
|
|
91
96
|
function getAutoCompleteClasses({
|
|
97
|
+
color,
|
|
92
98
|
disabled,
|
|
93
99
|
open,
|
|
94
100
|
className
|
|
95
101
|
}) {
|
|
96
|
-
return cn(autoCompleteBaseClass, disabled && "autocomplete-disabled", open && "autocomplete-open", className);
|
|
102
|
+
return cn(autoCompleteBaseClass, color && autoCompleteColorClasses[color], disabled && "autocomplete-disabled", open && "autocomplete-open", className);
|
|
97
103
|
}
|
|
98
104
|
function getAutoCompleteInputClasses({
|
|
99
105
|
size = "md",
|
|
@@ -385,11 +391,12 @@ function getCascaderOptionClasses({
|
|
|
385
391
|
return cn(cascaderOptionClass, active && cascaderOptionActiveClass, selected && cascaderOptionSelectedClass, disabled && cascaderOptionDisabledClass, loading && cascaderOptionLoadingClass, expand && cascaderOptionExpandClass, className);
|
|
386
392
|
}
|
|
387
393
|
// src/classes/checkbox.ts
|
|
388
|
-
var checkboxBaseClass = "checkbox";
|
|
394
|
+
var checkboxBaseClass = "checkbox-wrapper";
|
|
395
|
+
var checkboxInputBaseClass = "checkbox";
|
|
389
396
|
var checkboxInputClass = "checkbox-input";
|
|
390
397
|
var checkboxBoxBaseClass = "checkbox-box";
|
|
391
398
|
var checkboxCheckmarkClass = "checkbox-checkmark";
|
|
392
|
-
var checkboxLabelBaseClass = "checkbox-
|
|
399
|
+
var checkboxLabelBaseClass = "checkbox-text";
|
|
393
400
|
var checkboxColorClasses = {
|
|
394
401
|
primary: "checkbox-primary",
|
|
395
402
|
secondary: "checkbox-secondary",
|
|
@@ -407,12 +414,17 @@ var checkboxLabelPositionClasses = {
|
|
|
407
414
|
var checkboxErrorClass = "checkbox-error";
|
|
408
415
|
var checkboxLoadingClass = "checkbox-loading";
|
|
409
416
|
function getCheckboxClasses({
|
|
410
|
-
size = "md",
|
|
411
|
-
error,
|
|
412
417
|
loading,
|
|
413
418
|
className
|
|
414
419
|
}) {
|
|
415
|
-
return cn(
|
|
420
|
+
return cn("checkbox-label", checkboxBaseClass, loading && checkboxLoadingClass, className);
|
|
421
|
+
}
|
|
422
|
+
function getCheckboxInputClasses({
|
|
423
|
+
color = "primary",
|
|
424
|
+
size = "md",
|
|
425
|
+
error
|
|
426
|
+
}) {
|
|
427
|
+
return cn(checkboxInputBaseClass, checkboxInputClass, checkboxColorClasses[color], checkboxSizeClasses[size], error && checkboxErrorClass);
|
|
416
428
|
}
|
|
417
429
|
function getCheckboxBoxClasses({
|
|
418
430
|
color = "primary"
|
|
@@ -472,8 +484,9 @@ function getConfigProviderClasses({
|
|
|
472
484
|
var colorPickerBaseClass = "color-picker";
|
|
473
485
|
var colorPickerSwatchClass = "color-picker-swatch";
|
|
474
486
|
var colorPickerTextClass = "color-picker-text";
|
|
475
|
-
var colorPickerPanelClass = "color-picker-panel popover popover-show";
|
|
487
|
+
var colorPickerPanelClass = "color-picker-panel popover popover-bottom popover-show";
|
|
476
488
|
var colorPickerInputClass = "color-picker-input input";
|
|
489
|
+
var colorPickerFormatSelectClass = "color-picker-format-select select select-sm";
|
|
477
490
|
var colorPickerPresetsClass = "color-picker-presets";
|
|
478
491
|
var colorPickerPresetClass = "color-picker-preset";
|
|
479
492
|
var colorPickerPresetLabelClass = "color-picker-preset-label";
|
|
@@ -675,9 +688,7 @@ function getDmBreadcrumbClasses({
|
|
|
675
688
|
// src/classes/dm-drawer.ts
|
|
676
689
|
var dmDrawerBaseClass = "dm-drawer";
|
|
677
690
|
var dmDrawerFooterActionClass = "dm-drawer-footer-action";
|
|
678
|
-
function getDmDrawerClasses({
|
|
679
|
-
className
|
|
680
|
-
}) {
|
|
691
|
+
function getDmDrawerClasses({ className }) {
|
|
681
692
|
return cn(dmDrawerBaseClass, className);
|
|
682
693
|
}
|
|
683
694
|
function getDmDrawerFooterClasses({
|
|
@@ -885,9 +896,7 @@ var dmToolbarItemClass = "dm-toolbar-item";
|
|
|
885
896
|
var dmToolbarPrimaryItemClass = "dm-toolbar-primary-item";
|
|
886
897
|
var dmToolbarSecondaryItemClass = "dm-toolbar-secondary-item";
|
|
887
898
|
var dmToolbarMoreClass = "dm-toolbar-more";
|
|
888
|
-
function getDmToolbarClasses({
|
|
889
|
-
className
|
|
890
|
-
}) {
|
|
899
|
+
function getDmToolbarClasses({ className }) {
|
|
891
900
|
return cn(dmToolbarBaseClass, className);
|
|
892
901
|
}
|
|
893
902
|
function getDmToolbarItemClasses({
|
|
@@ -3176,6 +3185,7 @@ export {
|
|
|
3176
3185
|
getCollapseGroupClasses,
|
|
3177
3186
|
getColClasses,
|
|
3178
3187
|
getCheckboxLabelClasses,
|
|
3188
|
+
getCheckboxInputClasses,
|
|
3179
3189
|
getCheckboxClasses,
|
|
3180
3190
|
getCheckboxBoxClasses,
|
|
3181
3191
|
getCheckableTagClasses,
|
|
@@ -3423,6 +3433,7 @@ export {
|
|
|
3423
3433
|
colorPickerPresetClass,
|
|
3424
3434
|
colorPickerPanelClass,
|
|
3425
3435
|
colorPickerInputClass,
|
|
3436
|
+
colorPickerFormatSelectClass,
|
|
3426
3437
|
colorPickerFormatClasses,
|
|
3427
3438
|
colorPickerBaseClass,
|
|
3428
3439
|
collapseTriggerClass,
|
|
@@ -3442,6 +3453,7 @@ export {
|
|
|
3442
3453
|
checkboxLabelPositionClasses,
|
|
3443
3454
|
checkboxLabelBaseClass,
|
|
3444
3455
|
checkboxInputClass,
|
|
3456
|
+
checkboxInputBaseClass,
|
|
3445
3457
|
checkboxErrorClass,
|
|
3446
3458
|
checkboxColorClasses,
|
|
3447
3459
|
checkboxCheckmarkClass,
|
|
@@ -3535,6 +3547,7 @@ export {
|
|
|
3535
3547
|
autoCompleteInputClass,
|
|
3536
3548
|
autoCompleteDropdownOpenClass,
|
|
3537
3549
|
autoCompleteDropdownClass,
|
|
3550
|
+
autoCompleteColorClasses,
|
|
3538
3551
|
autoCompleteClearClass,
|
|
3539
3552
|
autoCompleteBaseClass,
|
|
3540
3553
|
appRootClass,
|
|
@@ -37,9 +37,9 @@ var alertColorClasses = {
|
|
|
37
37
|
error: "alert-error"
|
|
38
38
|
};
|
|
39
39
|
var alertAppearanceClasses = {
|
|
40
|
-
filled: "",
|
|
41
|
-
outline: "alert-
|
|
42
|
-
tonal: "
|
|
40
|
+
filled: "alert-filled",
|
|
41
|
+
outline: "alert-outlined",
|
|
42
|
+
tonal: ""
|
|
43
43
|
};
|
|
44
44
|
function getAlertClasses({
|
|
45
45
|
color = "info",
|
|
@@ -785,14 +785,10 @@ import {
|
|
|
785
785
|
var appClass = "app";
|
|
786
786
|
var appRootClass = "app-root";
|
|
787
787
|
var appHolderClass = "app-holder";
|
|
788
|
-
function getAppClasses({
|
|
789
|
-
className
|
|
790
|
-
}) {
|
|
788
|
+
function getAppClasses({ className }) {
|
|
791
789
|
return cn(appClass, className);
|
|
792
790
|
}
|
|
793
|
-
function getAppRootClasses({
|
|
794
|
-
className
|
|
795
|
-
}) {
|
|
791
|
+
function getAppRootClasses({ className }) {
|
|
796
792
|
return cn(appRootClass, className);
|
|
797
793
|
}
|
|
798
794
|
|
|
@@ -874,10 +870,7 @@ AppBase.displayName = "App";
|
|
|
874
870
|
var App = AppBase;
|
|
875
871
|
App.Context = AppContext;
|
|
876
872
|
App.useApp = () => useContext(AppContext);
|
|
877
|
-
function AppRoot({
|
|
878
|
-
className,
|
|
879
|
-
...props
|
|
880
|
-
}) {
|
|
873
|
+
function AppRoot({ className, ...props }) {
|
|
881
874
|
return /* @__PURE__ */ jsx4("div", {
|
|
882
875
|
...props,
|
|
883
876
|
className: getAppRootClasses({ className })
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
|
|
2
2
|
export type AutoCompleteSize = "sm" | "md" | "lg";
|
|
3
|
+
export type AutoCompleteColor = "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error";
|
|
3
4
|
export interface AutoCompleteOptionType {
|
|
4
5
|
value: string;
|
|
5
6
|
label?: ReactNode;
|
|
@@ -10,6 +11,7 @@ export type AutoCompleteFilterOption = boolean | ((inputValue: string, option: A
|
|
|
10
11
|
export interface AutoCompleteProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "onSelect"> {
|
|
11
12
|
allowClear?: boolean;
|
|
12
13
|
children?: ReactNode;
|
|
14
|
+
color?: AutoCompleteColor;
|
|
13
15
|
defaultOpen?: boolean;
|
|
14
16
|
defaultValue?: string;
|
|
15
17
|
disabled?: boolean;
|
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
// src/components/auto-complete/AutoComplete.tsx
|
|
4
|
-
import React, {
|
|
5
|
-
forwardRef,
|
|
6
|
-
useId,
|
|
7
|
-
useMemo,
|
|
8
|
-
useRef,
|
|
9
|
-
useState
|
|
10
|
-
} from "react";
|
|
4
|
+
import React, { forwardRef, useId, useMemo, useRef, useState } from "react";
|
|
11
5
|
|
|
12
6
|
// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
|
|
13
7
|
function r(e) {
|
|
@@ -48,17 +42,27 @@ var autoCompleteOptionFocusedClass = "autocomplete-option-focused";
|
|
|
48
42
|
var autoCompleteOptionDisabledClass = "autocomplete-option-disabled";
|
|
49
43
|
var autoCompleteClearClass = "autocomplete-clear";
|
|
50
44
|
var autoCompleteNoOptionsClass = "autocomplete-no-options";
|
|
45
|
+
var autoCompleteColorClasses = {
|
|
46
|
+
primary: "autocomplete-primary",
|
|
47
|
+
secondary: "autocomplete-secondary",
|
|
48
|
+
tertiary: "autocomplete-tertiary",
|
|
49
|
+
info: "autocomplete-info",
|
|
50
|
+
success: "autocomplete-success",
|
|
51
|
+
warning: "autocomplete-warning",
|
|
52
|
+
error: "autocomplete-error"
|
|
53
|
+
};
|
|
51
54
|
var autoCompleteSizeClasses = {
|
|
52
55
|
sm: "autocomplete-sm",
|
|
53
56
|
md: "",
|
|
54
57
|
lg: "autocomplete-lg"
|
|
55
58
|
};
|
|
56
59
|
function getAutoCompleteClasses({
|
|
60
|
+
color,
|
|
57
61
|
disabled,
|
|
58
62
|
open,
|
|
59
63
|
className
|
|
60
64
|
}) {
|
|
61
|
-
return cn(autoCompleteBaseClass, disabled && "autocomplete-disabled", open && "autocomplete-open", className);
|
|
65
|
+
return cn(autoCompleteBaseClass, color && autoCompleteColorClasses[color], disabled && "autocomplete-disabled", open && "autocomplete-open", className);
|
|
62
66
|
}
|
|
63
67
|
function getAutoCompleteInputClasses({
|
|
64
68
|
size = "md",
|
|
@@ -129,6 +133,7 @@ var AutoCompleteRoot = forwardRef(({
|
|
|
129
133
|
allowClear,
|
|
130
134
|
children,
|
|
131
135
|
className,
|
|
136
|
+
color,
|
|
132
137
|
defaultOpen,
|
|
133
138
|
defaultValue = "",
|
|
134
139
|
disabled,
|
|
@@ -266,6 +271,7 @@ var AutoCompleteRoot = forwardRef(({
|
|
|
266
271
|
...props,
|
|
267
272
|
ref,
|
|
268
273
|
className: getAutoCompleteClasses({
|
|
274
|
+
color,
|
|
269
275
|
disabled,
|
|
270
276
|
open: isOpen,
|
|
271
277
|
className
|
|
@@ -262,7 +262,16 @@ function CascaderMenus({
|
|
|
262
262
|
})
|
|
263
263
|
});
|
|
264
264
|
}
|
|
265
|
-
var CascaderPanel = forwardRef(({
|
|
265
|
+
var CascaderPanel = forwardRef(({
|
|
266
|
+
className,
|
|
267
|
+
options = [],
|
|
268
|
+
fieldNames,
|
|
269
|
+
value,
|
|
270
|
+
defaultValue,
|
|
271
|
+
onChange,
|
|
272
|
+
onSelect,
|
|
273
|
+
...props
|
|
274
|
+
}, ref) => {
|
|
266
275
|
const names = useMemo(() => normalizeFieldNames(fieldNames), [fieldNames]);
|
|
267
276
|
const [activeValue, setActiveValue] = useState(normalizeSingleValue(value ?? defaultValue));
|
|
268
277
|
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
@@ -34,11 +34,10 @@ function cn(...inputs) {
|
|
|
34
34
|
return clsx(inputs);
|
|
35
35
|
}
|
|
36
36
|
// src/classes/checkbox.ts
|
|
37
|
-
var checkboxBaseClass = "checkbox";
|
|
37
|
+
var checkboxBaseClass = "checkbox-wrapper";
|
|
38
|
+
var checkboxInputBaseClass = "checkbox";
|
|
38
39
|
var checkboxInputClass = "checkbox-input";
|
|
39
|
-
var
|
|
40
|
-
var checkboxCheckmarkClass = "checkbox-checkmark";
|
|
41
|
-
var checkboxLabelBaseClass = "checkbox-label";
|
|
40
|
+
var checkboxLabelBaseClass = "checkbox-text";
|
|
42
41
|
var checkboxColorClasses = {
|
|
43
42
|
primary: "checkbox-primary",
|
|
44
43
|
secondary: "checkbox-secondary",
|
|
@@ -56,17 +55,17 @@ var checkboxLabelPositionClasses = {
|
|
|
56
55
|
var checkboxErrorClass = "checkbox-error";
|
|
57
56
|
var checkboxLoadingClass = "checkbox-loading";
|
|
58
57
|
function getCheckboxClasses({
|
|
59
|
-
size = "md",
|
|
60
|
-
error,
|
|
61
58
|
loading,
|
|
62
59
|
className
|
|
63
60
|
}) {
|
|
64
|
-
return cn(
|
|
61
|
+
return cn("checkbox-label", checkboxBaseClass, loading && checkboxLoadingClass, className);
|
|
65
62
|
}
|
|
66
|
-
function
|
|
67
|
-
color = "primary"
|
|
63
|
+
function getCheckboxInputClasses({
|
|
64
|
+
color = "primary",
|
|
65
|
+
size = "md",
|
|
66
|
+
error
|
|
68
67
|
}) {
|
|
69
|
-
return cn(
|
|
68
|
+
return cn(checkboxInputBaseClass, checkboxInputClass, checkboxColorClasses[color], checkboxSizeClasses[size], error && checkboxErrorClass);
|
|
70
69
|
}
|
|
71
70
|
function getCheckboxLabelClasses({
|
|
72
71
|
labelPosition = "right"
|
|
@@ -99,8 +98,6 @@ var Checkbox = forwardRef(({
|
|
|
99
98
|
const isDisabled = disabled || loading;
|
|
100
99
|
return /* @__PURE__ */ jsxs("label", {
|
|
101
100
|
className: getCheckboxClasses({
|
|
102
|
-
size,
|
|
103
|
-
error,
|
|
104
101
|
loading,
|
|
105
102
|
className
|
|
106
103
|
}),
|
|
@@ -109,18 +106,10 @@ var Checkbox = forwardRef(({
|
|
|
109
106
|
...props,
|
|
110
107
|
ref: inputRef,
|
|
111
108
|
type: "checkbox",
|
|
112
|
-
className:
|
|
109
|
+
className: getCheckboxInputClasses({ color, size, error }),
|
|
113
110
|
disabled: isDisabled,
|
|
114
111
|
"aria-checked": indeterminate ? "mixed" : ariaChecked
|
|
115
112
|
}),
|
|
116
|
-
/* @__PURE__ */ jsx("span", {
|
|
117
|
-
className: getCheckboxBoxClasses({ color }),
|
|
118
|
-
"aria-hidden": "true",
|
|
119
|
-
children: /* @__PURE__ */ jsx("span", {
|
|
120
|
-
className: checkboxCheckmarkClass,
|
|
121
|
-
children: indeterminate ? "-" : "✓"
|
|
122
|
-
})
|
|
123
|
-
}),
|
|
124
113
|
children ? /* @__PURE__ */ jsx("span", {
|
|
125
114
|
className: getCheckboxLabelClasses({ labelPosition }),
|
|
126
115
|
children
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { Col } from "./Col";
|
|
2
|
-
export type { ColProps, ColResponsiveValue, ColSpan
|
|
2
|
+
export type { ColProps, ColResponsiveValue, ColSpan } from "./Col.types";
|
|
@@ -135,7 +135,9 @@ var Collapse = forwardRef(({
|
|
|
135
135
|
open ? /* @__PURE__ */ jsx("div", {
|
|
136
136
|
id: contentId,
|
|
137
137
|
className: collapseContentClass,
|
|
138
|
-
children:
|
|
138
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
139
|
+
children: item.children
|
|
140
|
+
})
|
|
139
141
|
}) : null
|
|
140
142
|
]
|
|
141
143
|
}, itemKey);
|
|
@@ -32,8 +32,9 @@ function cn(...inputs) {
|
|
|
32
32
|
var colorPickerBaseClass = "color-picker";
|
|
33
33
|
var colorPickerSwatchClass = "color-picker-swatch";
|
|
34
34
|
var colorPickerTextClass = "color-picker-text";
|
|
35
|
-
var colorPickerPanelClass = "color-picker-panel popover popover-show";
|
|
35
|
+
var colorPickerPanelClass = "color-picker-panel popover popover-bottom popover-show";
|
|
36
36
|
var colorPickerInputClass = "color-picker-input input";
|
|
37
|
+
var colorPickerFormatSelectClass = "color-picker-format-select select select-sm";
|
|
37
38
|
var colorPickerPresetsClass = "color-picker-presets";
|
|
38
39
|
var colorPickerPresetClass = "color-picker-preset";
|
|
39
40
|
var colorPickerPresetLabelClass = "color-picker-preset-label";
|
|
@@ -207,7 +208,9 @@ var ColorPicker = forwardRef(({
|
|
|
207
208
|
type: "button",
|
|
208
209
|
"aria-label": `Select color ${presetCss}`,
|
|
209
210
|
className: colorPickerSwatchClass,
|
|
210
|
-
style: {
|
|
211
|
+
style: {
|
|
212
|
+
backgroundColor: colorToCss(presetColor, "hex")
|
|
213
|
+
},
|
|
211
214
|
onClick: () => emitChange(presetColor)
|
|
212
215
|
}, `${presetIndex}-${colorIndex}`);
|
|
213
216
|
})
|
|
@@ -253,6 +256,7 @@ var ColorPicker = forwardRef(({
|
|
|
253
256
|
children: typeof showText === "function" ? showText(cssValue) : cssValue
|
|
254
257
|
}) : null,
|
|
255
258
|
/* @__PURE__ */ jsxs("select", {
|
|
259
|
+
className: colorPickerFormatSelectClass,
|
|
256
260
|
"aria-label": "Color format",
|
|
257
261
|
value: format,
|
|
258
262
|
disabled,
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type { ChangeEvent, ComponentProps, FocusEvent, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
|
|
2
2
|
export type DatePickerValue = string;
|
|
3
|
-
export type DatePickerRangeValue = [
|
|
3
|
+
export type DatePickerRangeValue = [
|
|
4
|
+
DatePickerValue | undefined,
|
|
5
|
+
DatePickerValue | undefined
|
|
6
|
+
];
|
|
4
7
|
export type DatePickerPicker = "date" | "week" | "month" | "quarter" | "year" | "time";
|
|
5
8
|
export type DatePickerSize = "sm" | "md" | "lg";
|
|
6
9
|
export type DatePickerStatus = "error" | "success";
|
|
@@ -196,8 +196,7 @@ var DatePickerRoot = forwardRef(({
|
|
|
196
196
|
}) : null,
|
|
197
197
|
/* @__PURE__ */ jsx("span", {
|
|
198
198
|
className: datePickerIconClass,
|
|
199
|
-
"aria-hidden": "true"
|
|
200
|
-
children: "calendar"
|
|
199
|
+
"aria-hidden": "true"
|
|
201
200
|
}),
|
|
202
201
|
(presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs("div", {
|
|
203
202
|
className: getDatePickerDropdownClasses({ open: visible }),
|
|
@@ -97,7 +97,16 @@ function toItems(items, children) {
|
|
|
97
97
|
};
|
|
98
98
|
});
|
|
99
99
|
}
|
|
100
|
-
var DescriptionsItem = forwardRef(({
|
|
100
|
+
var DescriptionsItem = forwardRef(({
|
|
101
|
+
children,
|
|
102
|
+
label,
|
|
103
|
+
span,
|
|
104
|
+
labelStyle,
|
|
105
|
+
contentStyle,
|
|
106
|
+
className,
|
|
107
|
+
style,
|
|
108
|
+
...props
|
|
109
|
+
}, ref) => /* @__PURE__ */ jsxs("div", {
|
|
101
110
|
...props,
|
|
102
111
|
ref,
|
|
103
112
|
className: cn(descriptionsItemClass, className),
|
|
@@ -196,8 +196,7 @@ var DatePickerRoot = forwardRef(({
|
|
|
196
196
|
}) : null,
|
|
197
197
|
/* @__PURE__ */ jsx("span", {
|
|
198
198
|
className: datePickerIconClass,
|
|
199
|
-
"aria-hidden": "true"
|
|
200
|
-
children: "calendar"
|
|
199
|
+
"aria-hidden": "true"
|
|
201
200
|
}),
|
|
202
201
|
(presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs("div", {
|
|
203
202
|
className: getDatePickerDropdownClasses({ open: visible }),
|
|
@@ -228,9 +228,7 @@ import { forwardRef as forwardRef2 } from "react";
|
|
|
228
228
|
// src/classes/dm-drawer.ts
|
|
229
229
|
var dmDrawerBaseClass = "dm-drawer";
|
|
230
230
|
var dmDrawerFooterActionClass = "dm-drawer-footer-action";
|
|
231
|
-
function getDmDrawerClasses({
|
|
232
|
-
className
|
|
233
|
-
}) {
|
|
231
|
+
function getDmDrawerClasses({ className }) {
|
|
234
232
|
return cn(dmDrawerBaseClass, className);
|
|
235
233
|
}
|
|
236
234
|
function getDmDrawerFooterClasses({
|
|
@@ -698,9 +698,7 @@ var dmToolbarItemClass = "dm-toolbar-item";
|
|
|
698
698
|
var dmToolbarPrimaryItemClass = "dm-toolbar-primary-item";
|
|
699
699
|
var dmToolbarSecondaryItemClass = "dm-toolbar-secondary-item";
|
|
700
700
|
var dmToolbarMoreClass = "dm-toolbar-more";
|
|
701
|
-
function getDmToolbarClasses({
|
|
702
|
-
className
|
|
703
|
-
}) {
|
|
701
|
+
function getDmToolbarClasses({ className }) {
|
|
704
702
|
return cn(dmToolbarBaseClass, className);
|
|
705
703
|
}
|
|
706
704
|
function getDmToolbarItemClasses({
|
|
@@ -334,8 +334,7 @@ var DatePickerRoot = forwardRef(({
|
|
|
334
334
|
}) : null,
|
|
335
335
|
/* @__PURE__ */ jsx3("span", {
|
|
336
336
|
className: datePickerIconClass,
|
|
337
|
-
"aria-hidden": "true"
|
|
338
|
-
children: "calendar"
|
|
337
|
+
"aria-hidden": "true"
|
|
339
338
|
}),
|
|
340
339
|
(presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs2("div", {
|
|
341
340
|
className: getDatePickerDropdownClasses({ open: visible }),
|
|
@@ -747,9 +746,7 @@ var dmToolbarItemClass = "dm-toolbar-item";
|
|
|
747
746
|
var dmToolbarPrimaryItemClass = "dm-toolbar-primary-item";
|
|
748
747
|
var dmToolbarSecondaryItemClass = "dm-toolbar-secondary-item";
|
|
749
748
|
var dmToolbarMoreClass = "dm-toolbar-more";
|
|
750
|
-
function getDmToolbarClasses({
|
|
751
|
-
className
|
|
752
|
-
}) {
|
|
749
|
+
function getDmToolbarClasses({ className }) {
|
|
753
750
|
return cn(dmToolbarBaseClass, className);
|
|
754
751
|
}
|
|
755
752
|
function getDmToolbarItemClasses({
|
|
@@ -2099,7 +2096,10 @@ var DmSearch = forwardRef7(({
|
|
|
2099
2096
|
value: values[item.dataIndex],
|
|
2100
2097
|
loading,
|
|
2101
2098
|
enableDefaultPlaceHolder,
|
|
2102
|
-
setValue: (value) => setValues((current) => ({
|
|
2099
|
+
setValue: (value) => setValues((current) => ({
|
|
2100
|
+
...current,
|
|
2101
|
+
[item.dataIndex]: value
|
|
2102
|
+
}))
|
|
2103
2103
|
})
|
|
2104
2104
|
]
|
|
2105
2105
|
}, item.key))
|
|
@@ -334,8 +334,7 @@ var DatePickerRoot = forwardRef(({
|
|
|
334
334
|
}) : null,
|
|
335
335
|
/* @__PURE__ */ jsx3("span", {
|
|
336
336
|
className: datePickerIconClass,
|
|
337
|
-
"aria-hidden": "true"
|
|
338
|
-
children: "calendar"
|
|
337
|
+
"aria-hidden": "true"
|
|
339
338
|
}),
|
|
340
339
|
(presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs2("div", {
|
|
341
340
|
className: getDatePickerDropdownClasses({ open: visible }),
|
|
@@ -1704,7 +1703,10 @@ var DmSearch = forwardRef6(({
|
|
|
1704
1703
|
value: values[item.dataIndex],
|
|
1705
1704
|
loading,
|
|
1706
1705
|
enableDefaultPlaceHolder,
|
|
1707
|
-
setValue: (value) => setValues((current) => ({
|
|
1706
|
+
setValue: (value) => setValues((current) => ({
|
|
1707
|
+
...current,
|
|
1708
|
+
[item.dataIndex]: value
|
|
1709
|
+
}))
|
|
1708
1710
|
})
|
|
1709
1711
|
]
|
|
1710
1712
|
}, item.key))
|