@compill/admin 1.0.69 → 1.0.70
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/index.cjs.js +82 -78
- package/index.esm.js +82 -78
- package/package.json +1 -1
- package/src/index.d.ts +1 -1
- package/src/lib/layout/AdminLayout.d.ts +1 -1
- package/src/lib/layout/Sidebar.d.ts +1 -1
- package/src/lib/layout/{Menu.d.ts → menu/Menu.d.ts} +1 -14
- package/src/lib/layout/menu/MenuButton.d.ts +7 -0
- package/src/lib/layout/menu/MenuConfig.d.ts +13 -0
- package/src/lib/layout/menu/MenuItem.d.ts +12 -0
- package/src/lib/layout/menu/NextMenuItem.d.ts +12 -0
- package/src/lib/layout/menu/SelectedIndicator.d.ts +4 -0
package/index.cjs.js
CHANGED
@@ -2840,51 +2840,55 @@ function Content(_a) {
|
|
2840
2840
|
}));
|
2841
2841
|
}
|
2842
2842
|
|
2843
|
-
|
2844
|
-
|
2845
|
-
|
2846
|
-
|
2847
|
-
|
2843
|
+
function SelectedIndicator({
|
2844
|
+
darkMode
|
2845
|
+
}) {
|
2846
|
+
return jsxRuntime.jsx("div", {
|
2847
|
+
position: "absolute",
|
2848
|
+
bgColor: darkMode ? "white" : "black",
|
2849
|
+
bgOpacity: "90",
|
2850
|
+
w: "0.5",
|
2851
|
+
h: "6",
|
2852
|
+
top: "1.5",
|
2853
|
+
start: "-4"
|
2854
|
+
});
|
2855
|
+
}
|
2856
|
+
|
2857
|
+
function MenuButton(_a) {
|
2848
2858
|
var {
|
2859
|
+
depth,
|
2849
2860
|
darkMode,
|
2850
|
-
|
2851
|
-
|
2861
|
+
icon,
|
2862
|
+
selected,
|
2863
|
+
children
|
2852
2864
|
} = _a,
|
2853
|
-
props = __rest$1(_a, ["darkMode", "
|
2854
|
-
|
2855
|
-
|
2856
|
-
|
2857
|
-
|
2858
|
-
|
2859
|
-
|
2860
|
-
|
2861
|
-
|
2862
|
-
|
2863
|
-
|
2864
|
-
|
2865
|
-
|
2866
|
-
|
2867
|
-
|
2868
|
-
|
2869
|
-
|
2870
|
-
|
2865
|
+
props = __rest$1(_a, ["depth", "darkMode", "icon", "selected", "children"]);
|
2866
|
+
return jsxRuntime.jsxs(ui.Button, Object.assign({
|
2867
|
+
as: "li",
|
2868
|
+
minH: "8",
|
2869
|
+
ms: `${(depth !== null && depth !== void 0 ? depth : 0) * 2}`,
|
2870
|
+
p: "2",
|
2871
|
+
font: "title",
|
2872
|
+
textColor: darkMode ? "white" : "black",
|
2873
|
+
fontWeight: "600",
|
2874
|
+
rounded: "lg",
|
2875
|
+
textSize: "sm",
|
2876
|
+
variant: "borderless",
|
2877
|
+
hover_bgColor: darkMode ? "white" : "black",
|
2878
|
+
hover_bgOpacity: "10",
|
2879
|
+
hover_textColor: darkMode ? "white" : "zinc-800",
|
2880
|
+
cursor: "pointer",
|
2881
|
+
dflex: true,
|
2882
|
+
alignItems: "center",
|
2883
|
+
gap: "3"
|
2884
|
+
}, props, {
|
2885
|
+
children: [icon && jsxRuntime.jsx(ui.Icon, {
|
2886
|
+
path: icon,
|
2887
|
+
opacity: selected ? "100" : "60"
|
2888
|
+
}), children]
|
2871
2889
|
}));
|
2872
2890
|
}
|
2873
|
-
|
2874
|
-
title
|
2875
|
-
}) {
|
2876
|
-
return jsxRuntime.jsx("div", {
|
2877
|
-
px: "2",
|
2878
|
-
mt: "5",
|
2879
|
-
mb: "2",
|
2880
|
-
opacity: "75",
|
2881
|
-
textTransform: "capitalize",
|
2882
|
-
letterSpacing: "widest",
|
2883
|
-
fontWeight: "700",
|
2884
|
-
textSize: "xs",
|
2885
|
-
children: title
|
2886
|
-
});
|
2887
|
-
}
|
2891
|
+
|
2888
2892
|
function MenuItem(_a) {
|
2889
2893
|
var {
|
2890
2894
|
icon,
|
@@ -2923,6 +2927,7 @@ function MenuItem(_a) {
|
|
2923
2927
|
}, index))]
|
2924
2928
|
});
|
2925
2929
|
}
|
2930
|
+
|
2926
2931
|
function NextMenuItem(_a) {
|
2927
2932
|
var {
|
2928
2933
|
icon,
|
@@ -2962,51 +2967,50 @@ function NextMenuItem(_a) {
|
|
2962
2967
|
}, index))]
|
2963
2968
|
});
|
2964
2969
|
}
|
2965
|
-
|
2970
|
+
|
2971
|
+
/**
|
2972
|
+
*
|
2973
|
+
*
|
2974
|
+
*/
|
2975
|
+
function Menu(_a) {
|
2966
2976
|
var {
|
2967
|
-
depth,
|
2968
2977
|
darkMode,
|
2969
|
-
|
2970
|
-
|
2971
|
-
children
|
2978
|
+
config,
|
2979
|
+
useNextRouter
|
2972
2980
|
} = _a,
|
2973
|
-
props = __rest$1(_a, ["
|
2974
|
-
|
2975
|
-
|
2976
|
-
|
2977
|
-
|
2978
|
-
|
2979
|
-
|
2980
|
-
|
2981
|
-
|
2982
|
-
|
2983
|
-
|
2984
|
-
|
2985
|
-
|
2986
|
-
|
2987
|
-
|
2988
|
-
|
2989
|
-
|
2990
|
-
|
2991
|
-
gap: "3"
|
2992
|
-
}, props, {
|
2993
|
-
children: [icon && jsxRuntime.jsx(ui.Icon, {
|
2994
|
-
path: icon,
|
2995
|
-
opacity: selected ? "100" : "60"
|
2996
|
-
}), children]
|
2981
|
+
props = __rest$1(_a, ["darkMode", "config", "useNextRouter"]);
|
2982
|
+
const Comp = useNextRouter ? NextMenuItem : MenuItem;
|
2983
|
+
return jsxRuntime.jsx("ul", Object.assign({}, props, {
|
2984
|
+
children: config.map((item, index) => {
|
2985
|
+
if (item.type == "divider") return jsxRuntime.jsx(Divider, {
|
2986
|
+
title: item.label
|
2987
|
+
}, index);
|
2988
|
+
if (item.type == "item") {
|
2989
|
+
return jsxRuntime.jsx(Comp, {
|
2990
|
+
icon: item.icon,
|
2991
|
+
path: item.path,
|
2992
|
+
depth: 0,
|
2993
|
+
darkMode: darkMode,
|
2994
|
+
subMenu: item.children,
|
2995
|
+
children: item.label
|
2996
|
+
}, index);
|
2997
|
+
}
|
2998
|
+
})
|
2997
2999
|
}));
|
2998
3000
|
}
|
2999
|
-
function
|
3000
|
-
|
3001
|
+
function Divider({
|
3002
|
+
title
|
3001
3003
|
}) {
|
3002
3004
|
return jsxRuntime.jsx("div", {
|
3003
|
-
|
3004
|
-
|
3005
|
-
|
3006
|
-
|
3007
|
-
|
3008
|
-
|
3009
|
-
|
3005
|
+
px: "2",
|
3006
|
+
mt: "5",
|
3007
|
+
mb: "2",
|
3008
|
+
opacity: "75",
|
3009
|
+
textTransform: "capitalize",
|
3010
|
+
letterSpacing: "widest",
|
3011
|
+
fontWeight: "700",
|
3012
|
+
textSize: "xs",
|
3013
|
+
children: title
|
3010
3014
|
});
|
3011
3015
|
}
|
3012
3016
|
|
package/index.esm.js
CHANGED
@@ -2830,51 +2830,55 @@ function Content(_a) {
|
|
2830
2830
|
}));
|
2831
2831
|
}
|
2832
2832
|
|
2833
|
-
|
2834
|
-
|
2835
|
-
|
2836
|
-
|
2837
|
-
|
2833
|
+
function SelectedIndicator({
|
2834
|
+
darkMode
|
2835
|
+
}) {
|
2836
|
+
return jsx("div", {
|
2837
|
+
position: "absolute",
|
2838
|
+
bgColor: darkMode ? "white" : "black",
|
2839
|
+
bgOpacity: "90",
|
2840
|
+
w: "0.5",
|
2841
|
+
h: "6",
|
2842
|
+
top: "1.5",
|
2843
|
+
start: "-4"
|
2844
|
+
});
|
2845
|
+
}
|
2846
|
+
|
2847
|
+
function MenuButton(_a) {
|
2838
2848
|
var {
|
2849
|
+
depth,
|
2839
2850
|
darkMode,
|
2840
|
-
|
2841
|
-
|
2851
|
+
icon,
|
2852
|
+
selected,
|
2853
|
+
children
|
2842
2854
|
} = _a,
|
2843
|
-
props = __rest$1(_a, ["darkMode", "
|
2844
|
-
|
2845
|
-
|
2846
|
-
|
2847
|
-
|
2848
|
-
|
2849
|
-
|
2850
|
-
|
2851
|
-
|
2852
|
-
|
2853
|
-
|
2854
|
-
|
2855
|
-
|
2856
|
-
|
2857
|
-
|
2858
|
-
|
2859
|
-
|
2860
|
-
|
2855
|
+
props = __rest$1(_a, ["depth", "darkMode", "icon", "selected", "children"]);
|
2856
|
+
return jsxs(Button, Object.assign({
|
2857
|
+
as: "li",
|
2858
|
+
minH: "8",
|
2859
|
+
ms: `${(depth !== null && depth !== void 0 ? depth : 0) * 2}`,
|
2860
|
+
p: "2",
|
2861
|
+
font: "title",
|
2862
|
+
textColor: darkMode ? "white" : "black",
|
2863
|
+
fontWeight: "600",
|
2864
|
+
rounded: "lg",
|
2865
|
+
textSize: "sm",
|
2866
|
+
variant: "borderless",
|
2867
|
+
hover_bgColor: darkMode ? "white" : "black",
|
2868
|
+
hover_bgOpacity: "10",
|
2869
|
+
hover_textColor: darkMode ? "white" : "zinc-800",
|
2870
|
+
cursor: "pointer",
|
2871
|
+
dflex: true,
|
2872
|
+
alignItems: "center",
|
2873
|
+
gap: "3"
|
2874
|
+
}, props, {
|
2875
|
+
children: [icon && jsx(Icon, {
|
2876
|
+
path: icon,
|
2877
|
+
opacity: selected ? "100" : "60"
|
2878
|
+
}), children]
|
2861
2879
|
}));
|
2862
2880
|
}
|
2863
|
-
|
2864
|
-
title
|
2865
|
-
}) {
|
2866
|
-
return jsx("div", {
|
2867
|
-
px: "2",
|
2868
|
-
mt: "5",
|
2869
|
-
mb: "2",
|
2870
|
-
opacity: "75",
|
2871
|
-
textTransform: "capitalize",
|
2872
|
-
letterSpacing: "widest",
|
2873
|
-
fontWeight: "700",
|
2874
|
-
textSize: "xs",
|
2875
|
-
children: title
|
2876
|
-
});
|
2877
|
-
}
|
2881
|
+
|
2878
2882
|
function MenuItem(_a) {
|
2879
2883
|
var {
|
2880
2884
|
icon,
|
@@ -2913,6 +2917,7 @@ function MenuItem(_a) {
|
|
2913
2917
|
}, index))]
|
2914
2918
|
});
|
2915
2919
|
}
|
2920
|
+
|
2916
2921
|
function NextMenuItem(_a) {
|
2917
2922
|
var {
|
2918
2923
|
icon,
|
@@ -2952,51 +2957,50 @@ function NextMenuItem(_a) {
|
|
2952
2957
|
}, index))]
|
2953
2958
|
});
|
2954
2959
|
}
|
2955
|
-
|
2960
|
+
|
2961
|
+
/**
|
2962
|
+
*
|
2963
|
+
*
|
2964
|
+
*/
|
2965
|
+
function Menu(_a) {
|
2956
2966
|
var {
|
2957
|
-
depth,
|
2958
2967
|
darkMode,
|
2959
|
-
|
2960
|
-
|
2961
|
-
children
|
2968
|
+
config,
|
2969
|
+
useNextRouter
|
2962
2970
|
} = _a,
|
2963
|
-
props = __rest$1(_a, ["
|
2964
|
-
|
2965
|
-
|
2966
|
-
|
2967
|
-
|
2968
|
-
|
2969
|
-
|
2970
|
-
|
2971
|
-
|
2972
|
-
|
2973
|
-
|
2974
|
-
|
2975
|
-
|
2976
|
-
|
2977
|
-
|
2978
|
-
|
2979
|
-
|
2980
|
-
|
2981
|
-
gap: "3"
|
2982
|
-
}, props, {
|
2983
|
-
children: [icon && jsx(Icon, {
|
2984
|
-
path: icon,
|
2985
|
-
opacity: selected ? "100" : "60"
|
2986
|
-
}), children]
|
2971
|
+
props = __rest$1(_a, ["darkMode", "config", "useNextRouter"]);
|
2972
|
+
const Comp = useNextRouter ? NextMenuItem : MenuItem;
|
2973
|
+
return jsx("ul", Object.assign({}, props, {
|
2974
|
+
children: config.map((item, index) => {
|
2975
|
+
if (item.type == "divider") return jsx(Divider, {
|
2976
|
+
title: item.label
|
2977
|
+
}, index);
|
2978
|
+
if (item.type == "item") {
|
2979
|
+
return jsx(Comp, {
|
2980
|
+
icon: item.icon,
|
2981
|
+
path: item.path,
|
2982
|
+
depth: 0,
|
2983
|
+
darkMode: darkMode,
|
2984
|
+
subMenu: item.children,
|
2985
|
+
children: item.label
|
2986
|
+
}, index);
|
2987
|
+
}
|
2988
|
+
})
|
2987
2989
|
}));
|
2988
2990
|
}
|
2989
|
-
function
|
2990
|
-
|
2991
|
+
function Divider({
|
2992
|
+
title
|
2991
2993
|
}) {
|
2992
2994
|
return jsx("div", {
|
2993
|
-
|
2994
|
-
|
2995
|
-
|
2996
|
-
|
2997
|
-
|
2998
|
-
|
2999
|
-
|
2995
|
+
px: "2",
|
2996
|
+
mt: "5",
|
2997
|
+
mb: "2",
|
2998
|
+
opacity: "75",
|
2999
|
+
textTransform: "capitalize",
|
3000
|
+
letterSpacing: "widest",
|
3001
|
+
fontWeight: "700",
|
3002
|
+
textSize: "xs",
|
3003
|
+
children: title
|
3000
3004
|
});
|
3001
3005
|
}
|
3002
3006
|
|
package/package.json
CHANGED
package/src/index.d.ts
CHANGED
@@ -20,7 +20,7 @@ export * from "./lib/json/types/TabbedView";
|
|
20
20
|
export * from "./lib/json/types/TableView";
|
21
21
|
export * from "./lib/layout/AdminLayout";
|
22
22
|
export * from "./lib/layout/ButtonBar";
|
23
|
-
export * from "./lib/layout/Menu";
|
23
|
+
export * from "./lib/layout/menu/Menu";
|
24
24
|
export * from "./lib/modal/AttachDialog";
|
25
25
|
export * from "./lib/modal/FormActionDialog";
|
26
26
|
export * from "./lib/page/PageContainer";
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { Color, ParentComponent, SoperioComponent } from "@soperio/react";
|
3
|
-
import { MenuConfig } from "./
|
3
|
+
import { MenuConfig } from "./menu/MenuConfig";
|
4
4
|
interface LayoutProps extends SoperioComponent, ParentComponent {
|
5
5
|
color: Color;
|
6
6
|
darkMode?: boolean;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { Color, ParentComponent, SoperioComponent } from "@soperio/react";
|
3
|
-
import { MenuConfig } from "./
|
3
|
+
import { MenuConfig } from "./menu/MenuConfig";
|
4
4
|
interface SidebarProps extends SoperioComponent, ParentComponent {
|
5
5
|
show?: boolean;
|
6
6
|
color: Color;
|
@@ -1,26 +1,13 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { ParentComponent, SoperioComponent } from "@soperio/react";
|
3
|
+
import { MenuConfig } from "./MenuConfig";
|
3
4
|
export interface MenuProps extends SoperioComponent, ParentComponent {
|
4
5
|
darkMode?: boolean;
|
5
6
|
config: MenuConfig;
|
6
7
|
useNextRouter?: boolean;
|
7
8
|
}
|
8
|
-
export type MenuConfig = MenuItems;
|
9
|
-
type MenuItems = (MenuItem | MenuDivider)[];
|
10
|
-
export type MenuItem = {
|
11
|
-
type: "item";
|
12
|
-
path: string;
|
13
|
-
icon?: string;
|
14
|
-
label: string;
|
15
|
-
children?: MenuItem[];
|
16
|
-
};
|
17
|
-
export type MenuDivider = {
|
18
|
-
type: "divider";
|
19
|
-
label?: string;
|
20
|
-
};
|
21
9
|
/**
|
22
10
|
*
|
23
11
|
*
|
24
12
|
*/
|
25
13
|
export declare function Menu({ darkMode, config, useNextRouter, ...props }: MenuProps): JSX.Element;
|
26
|
-
export {};
|
@@ -0,0 +1,13 @@
|
|
1
|
+
export type MenuConfig = MenuItems;
|
2
|
+
export type MenuItems = (Item | MenuDivider)[];
|
3
|
+
export type Item = {
|
4
|
+
type: "item";
|
5
|
+
path: string;
|
6
|
+
icon?: string;
|
7
|
+
label: string;
|
8
|
+
children?: Item[];
|
9
|
+
};
|
10
|
+
export type MenuDivider = {
|
11
|
+
type: "divider";
|
12
|
+
label?: string;
|
13
|
+
};
|
@@ -0,0 +1,12 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { ParentComponent, SoperioComponent } from "@soperio/react";
|
3
|
+
import { Item } from "./MenuConfig";
|
4
|
+
interface MenuItemProps extends SoperioComponent, ParentComponent {
|
5
|
+
path: string;
|
6
|
+
depth?: number;
|
7
|
+
icon?: string;
|
8
|
+
darkMode?: boolean;
|
9
|
+
subMenu?: Item[];
|
10
|
+
}
|
11
|
+
export declare function MenuItem({ icon, path, depth, darkMode, subMenu, children, ...props }: MenuItemProps): JSX.Element;
|
12
|
+
export {};
|
@@ -0,0 +1,12 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { ParentComponent, SoperioComponent } from "@soperio/react";
|
3
|
+
import { Item } from "./MenuConfig";
|
4
|
+
interface NextMenuItemProps extends SoperioComponent, ParentComponent {
|
5
|
+
path: string;
|
6
|
+
depth?: number;
|
7
|
+
icon?: string;
|
8
|
+
darkMode?: boolean;
|
9
|
+
subMenu?: Item[];
|
10
|
+
}
|
11
|
+
export declare function NextMenuItem({ icon, path, depth, darkMode, subMenu, children, ...props }: NextMenuItemProps): JSX.Element;
|
12
|
+
export {};
|