@simplysm/solid 13.0.95 → 13.0.97
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/layout/sidebar/Sidebar.d.ts +5 -0
- package/dist/components/layout/sidebar/Sidebar.d.ts.map +1 -1
- package/dist/components/layout/sidebar/Sidebar.js +7 -4
- package/dist/components/layout/sidebar/Sidebar.js.map +2 -2
- package/package.json +19 -26
- package/src/components/layout/sidebar/Sidebar.tsx +9 -3
- package/README.md +0 -145
- package/docs/display-feedback.md +0 -279
- package/docs/features.md +0 -653
- package/docs/form-controls.md +0 -378
- package/docs/layout-data.md +0 -386
- package/docs/providers-hooks.md +0 -411
|
@@ -31,6 +31,11 @@ export interface SidebarMenuProps extends Omit<JSX.HTMLAttributes<HTMLDivElement
|
|
|
31
31
|
* Menu items array
|
|
32
32
|
*/
|
|
33
33
|
menus: AppMenu[];
|
|
34
|
+
/**
|
|
35
|
+
* When true, all nested menu lists are expanded on initial render.
|
|
36
|
+
* @default false
|
|
37
|
+
*/
|
|
38
|
+
defaultOpen?: boolean;
|
|
34
39
|
}
|
|
35
40
|
export interface SidebarUserMenu {
|
|
36
41
|
title: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\layout\\sidebar\\Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,GAAG,EACR,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,MAAM,EASZ,MAAM,UAAU,CAAC;AAKlB,OAAO,KAAK,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAK1E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAC;AAanE;;;GAGG;AACH,eAAO,MAAM,cAAc,uBAAuB,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;CAC5B;AAID,iBAAS,WAAW,IAAI,mBAAmB,CAM1C;AAED,iBAAS,mBAAmB,IAAI,mBAAmB,GAAG,SAAS,CAE9D;AAED,eAAO,MAAM,UAAU;;CAErB,CAAC;AAMH,MAAM,WAAW,qBAAsB,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAiGD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5F;;OAEG;IACH,KAAK,EAAE,OAAO,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\layout\\sidebar\\Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,GAAG,EACR,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,MAAM,EASZ,MAAM,UAAU,CAAC;AAKlB,OAAO,KAAK,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAK1E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAC;AAanE;;;GAGG;AACH,eAAO,MAAM,cAAc,uBAAuB,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;CAC5B;AAID,iBAAS,WAAW,IAAI,mBAAmB,CAM1C;AAED,iBAAS,mBAAmB,IAAI,mBAAmB,GAAG,SAAS,CAE9D;AAED,eAAO,MAAM,UAAU;;CAErB,CAAC;AAMH,MAAM,WAAW,qBAAsB,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAiGD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5F;;OAEG;IACH,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAoJD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3F;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAElC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B;AA2FD,MAAM,WAAW,YAAa,SAAQ,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC;IACnE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AA8DD,eAAO,MAAM,OAAO;;;;CAIlB,CAAC"}
|
|
@@ -104,7 +104,7 @@ const SidebarContainer = (props) => {
|
|
|
104
104
|
};
|
|
105
105
|
const MenuContext = createContext();
|
|
106
106
|
const SidebarMenu = (props) => {
|
|
107
|
-
const [local, rest] = splitProps(props, ["menus", "class"]);
|
|
107
|
+
const [local, rest] = splitProps(props, ["menus", "class", "defaultOpen"]);
|
|
108
108
|
const location = useLocation();
|
|
109
109
|
const findSelectedPath = (menus, pathname, path = []) => {
|
|
110
110
|
for (const menu of menus) {
|
|
@@ -125,8 +125,11 @@ const SidebarMenu = (props) => {
|
|
|
125
125
|
});
|
|
126
126
|
const getClassName = () => twMerge("flex-1 overflow-y-auto", local.class);
|
|
127
127
|
return _$createComponent(MenuContext.Provider, {
|
|
128
|
-
value
|
|
129
|
-
|
|
128
|
+
get value() {
|
|
129
|
+
return {
|
|
130
|
+
initialOpenItems,
|
|
131
|
+
defaultOpen: local.defaultOpen ?? false
|
|
132
|
+
};
|
|
130
133
|
},
|
|
131
134
|
get children() {
|
|
132
135
|
var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild;
|
|
@@ -165,7 +168,7 @@ const MenuItem = (props) => {
|
|
|
165
168
|
};
|
|
166
169
|
const isSelected = () => props.menu.href === location.pathname;
|
|
167
170
|
const shouldBeOpen = () => menuContext.initialOpenItems().has(props.menu);
|
|
168
|
-
const [open, setOpen] = createSignal(
|
|
171
|
+
const [open, setOpen] = createSignal(menuContext.defaultOpen);
|
|
169
172
|
createEffect(() => {
|
|
170
173
|
if (shouldBeOpen()) {
|
|
171
174
|
setOpen(true);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/layout/sidebar/Sidebar.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;AAAA,SAMEA,eACAC,YACAC,YACAC,YACAC,cACAC,cACAC,MACAC,WACK;AACP,SAASC,gBAAgBC,aAAaC,mBAAmB;AACzD,SAASC,wBAAwB;AACjC,OAAOC,UAAU;AACjB,SAASC,eAAe;AAExB,SAASC,gBAAgB;AACzB,SAASC,IAAIC,QAAQC,YAAY;AAEjC,SAASC,mBAAmB;AAE5B,SAASC,mBAAmB;AAC5B,SAASC,cAAc;AACvB,SAASC,gBAAgB;AACzB,SAASC,YAAY;AACrB,SAASC,YAAY;AACrB,SAASC,gBAAgB;AACzB,SAASC,eAAe;AAExB,KAAKL;AAQE,MAAMM,iBAAiB;AAe9B,MAAMC,iBAAiB3B,cAAmC;AAE1D,SAAS4B,cAAmC;AAC1C,QAAMC,UAAU5B,WAAW0B,cAAc;AACzC,MAAI,CAACE,SAAS;AACZ,UAAM,IAAIC,MAAM,iDAAiD;EACnE;AACA,SAAOD;AACT;AAEA,SAASE,sBAAuD;AAC9D,SAAO9B,WAAW0B,cAAc;AAClC;AAEO,MAAMK,aAAaC,OAAOC,OAAON,aAAa;EACnDO,UAAUJ;AACZ,CAAC;AAsCD,MAAMK,mBAA4DC,WAAU;AAC1E,QAAM,CAACC,OAAOC,IAAI,IAAIrC,WAAWmC,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAEtE,QAAMG,OAAOf,QAAQ;AACrB,QAAM,CAACgB,QAAQC,SAAS,IAAItC,aAAa,KAAK;AAG9C,QAAMuC,YAAYhC,iBAAiBe,cAAc;AAGjD,QAAMkB,SAASzC,WAAW,MAAM;AAC9B,QAAIwC,UAAU,GAAG;AACf,aAAO,CAACF,OAAO;IACjB;AACA,WAAOA,OAAO;EAChB,CAAC;AAGD,QAAMI,sBAAsBA,MAAM;AAChCH,cAAU,KAAK;EACjB;AAGAlC,iBAAe,MAAM;AACnB,QAAI,CAACmC,UAAU,KAAKF,OAAO,GAAG;AAC5BC,gBAAU,KAAK;IACjB;EACF,CAAC;AAGD,QAAMI,iBAAiBA,MAAM;AAC3B,QAAIH,UAAU,KAAKC,OAAO,GAAG;AAC3B,aAAO;IACT;AACA,WAAOG;EACT;AAEA,QAAMC,eAAeA,MAAMnC,QAAQ,0DAA0DyB,MAAMW,KAAK;AAExG,SAAAC,kBACGvB,eAAewB,UAAQ;IAACC,OAAO;MAAEX;MAAQC;IAAU;IAAC,IAAAW,WAAA;AAAA,UAAAC,OAAAC,QAAA;AAAAC,eAAAF,MAAAG,aAE7ClB,MAAI;QAAA,0BAAA;QAAA,KAAA,OAAA,IAAA;AAAA,iBAEDS,aAAa;QAAC;QAAA,IACrBU,QAAK;AAAA,iBAAEvC,YAAYmB,MAAMoB,OAAO;YAAE,gBAAgBZ,eAAe;UAAE,CAAC;QAAC;MAAA,CAAA,GAAA,OAAA,IAAA;AAAAa,eAAAL,MAAA,MAEpEhB,MAAMe,UAAQ,IAAA;AAAAM,eAAAL,MAAAJ,kBACd5C,MAAI;QAAA,IAACsD,OAAI;AAAA,iBAAEC,OAAA,MAAA,CAAA,CAAA,CAAClB,UAAU,CAAC,EAAA,KAAIC,OAAO;QAAC;QAAA,IAAAS,WAAA;AAAA,cAAAS,QAAAC,OAAA;AAAAD,gBAAAE,YAIpBC,OAAMA,EAAEC,QAAQ,YAAYrB,oBAAoB;AAACiB,gBAAAK,UADpDtB;AAAmBuB,mBAAA,MAAAC,eAAAP,OAAA,cAGhBtB,KAAK8B,EAAE,sBAAsB,CAAC,CAAA;AAAA,iBAAAR;QAAA;MAAA,CAAA,GAAA,IAAA;AAAA,aAAAR;IAAA;EAAA,CAAA;AAOtD;
|
|
5
|
-
"names": ["createContext", "useContext", "splitProps", "createMemo", "createSignal", "createEffect", "Show", "For", "useBeforeLeave", "useLocation", "useNavigate", "createMediaQuery", "clsx", "twMerge", "IconUser", "bg", "border", "text", "themeTokens", "mergeStyles", "ripple", "Collapse", "Icon", "List", "ListItem", "useI18n", "SM_MEDIA_QUERY", "SidebarContext", "_useSidebar", "context", "Error", "_useSidebarOptional", "useSidebar", "Object", "assign", "optional", "SidebarContainer", "props", "local", "rest", "i18n", "toggle", "setToggle", "isDesktop", "isOpen", "handleBackdropClick", "getPaddingLeft", "undefined", "getClassName", "class", "_$createComponent", "Provider", "value", "children", "_el$", "_tmpl$2", "_$spread", "_$mergeProps", "style", "_$insert", "when", "_$memo", "_el$2", "_tmpl$", "$$keydown", "e", "key", "$$click", "_$effect", "_$setAttribute", "t", "MenuContext", "SidebarMenu", "location", "findSelectedPath", "menus", "pathname", "path", "menu", "currentPath", "href", "found", "initialOpenItems", "selectedPath", "Set", "slice", "_el$3", "_tmpl$3", "_el$4", "firstChild", "inset", "each", "MenuItem", "_$className", "muted", "navigate", "menuContext", "hasChildren", "length", "isExternalLink", "includes", "isSelected", "shouldBeOpen", "has", "open", "setOpen", "handleClick", "v", "window", "selected", "onOpenChange", "onClick", "size", "icon", "_el$5", "_tmpl$4", "title", "Children", "child", "SidebarUser", "hasMenus", "handleMenuClick", "getHeaderClassName", "base", "hoverBg", "getContainerClassName", "_el$6", "_tmpl$7", "_el$7", "_el$8", "_el$9", "_$use", "description", "fallback", "_el$12", "_tmpl$8", "name", "_el$0", "_tmpl$5", "_el$1", "_el$10", "nextSibling", "_el$11", "_tmpl$6", "default", "_p$", "_v$", "_v$2", "SidebarInner", "getTransform", "_el$13", "_tmpl$9", "transform", "inert", "Sidebar", "Container", "Menu", "User", "_$delegateEvents"]
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": ["createContext", "useContext", "splitProps", "createMemo", "createSignal", "createEffect", "Show", "For", "useBeforeLeave", "useLocation", "useNavigate", "createMediaQuery", "clsx", "twMerge", "IconUser", "bg", "border", "text", "themeTokens", "mergeStyles", "ripple", "Collapse", "Icon", "List", "ListItem", "useI18n", "SM_MEDIA_QUERY", "SidebarContext", "_useSidebar", "context", "Error", "_useSidebarOptional", "useSidebar", "Object", "assign", "optional", "SidebarContainer", "props", "local", "rest", "i18n", "toggle", "setToggle", "isDesktop", "isOpen", "handleBackdropClick", "getPaddingLeft", "undefined", "getClassName", "class", "_$createComponent", "Provider", "value", "children", "_el$", "_tmpl$2", "_$spread", "_$mergeProps", "style", "_$insert", "when", "_$memo", "_el$2", "_tmpl$", "$$keydown", "e", "key", "$$click", "_$effect", "_$setAttribute", "t", "MenuContext", "SidebarMenu", "location", "findSelectedPath", "menus", "pathname", "path", "menu", "currentPath", "href", "found", "initialOpenItems", "selectedPath", "Set", "slice", "defaultOpen", "_el$3", "_tmpl$3", "_el$4", "firstChild", "inset", "each", "MenuItem", "_$className", "muted", "navigate", "menuContext", "hasChildren", "length", "isExternalLink", "includes", "isSelected", "shouldBeOpen", "has", "open", "setOpen", "handleClick", "v", "window", "selected", "onOpenChange", "onClick", "size", "icon", "_el$5", "_tmpl$4", "title", "Children", "child", "SidebarUser", "hasMenus", "handleMenuClick", "getHeaderClassName", "base", "hoverBg", "getContainerClassName", "_el$6", "_tmpl$7", "_el$7", "_el$8", "_el$9", "_$use", "description", "fallback", "_el$12", "_tmpl$8", "name", "_el$0", "_tmpl$5", "_el$1", "_el$10", "nextSibling", "_el$11", "_tmpl$6", "default", "_p$", "_v$", "_v$2", "SidebarInner", "getTransform", "_el$13", "_tmpl$9", "transform", "inert", "Sidebar", "Container", "Menu", "User", "_$delegateEvents"]
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@simplysm/solid",
|
|
3
|
-
"version": "13.0.
|
|
3
|
+
"version": "13.0.97",
|
|
4
4
|
"description": "Simplysm package - SolidJS library",
|
|
5
5
|
"author": "simplysm",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -30,42 +30,35 @@
|
|
|
30
30
|
"@solid-primitives/storage": "^4.3.4",
|
|
31
31
|
"@solidjs/router": "^0.15.4",
|
|
32
32
|
"@tabler/icons-solidjs": "^3.40.0",
|
|
33
|
-
"@tiptap/core": "^3.20.
|
|
34
|
-
"@tiptap/extension-color": "^3.20.
|
|
35
|
-
"@tiptap/extension-highlight": "^3.20.
|
|
36
|
-
"@tiptap/extension-image": "^3.20.
|
|
37
|
-
"@tiptap/extension-table": "^3.20.
|
|
38
|
-
"@tiptap/extension-table-cell": "^3.20.
|
|
39
|
-
"@tiptap/extension-table-header": "^3.20.
|
|
40
|
-
"@tiptap/extension-table-row": "^3.20.
|
|
41
|
-
"@tiptap/extension-text-align": "^3.20.
|
|
42
|
-
"@tiptap/extension-text-style": "^3.20.
|
|
43
|
-
"@tiptap/pm": "^3.20.
|
|
44
|
-
"@tiptap/starter-kit": "^3.20.
|
|
33
|
+
"@tiptap/core": "^3.20.4",
|
|
34
|
+
"@tiptap/extension-color": "^3.20.4",
|
|
35
|
+
"@tiptap/extension-highlight": "^3.20.4",
|
|
36
|
+
"@tiptap/extension-image": "^3.20.4",
|
|
37
|
+
"@tiptap/extension-table": "^3.20.4",
|
|
38
|
+
"@tiptap/extension-table-cell": "^3.20.4",
|
|
39
|
+
"@tiptap/extension-table-header": "^3.20.4",
|
|
40
|
+
"@tiptap/extension-table-row": "^3.20.4",
|
|
41
|
+
"@tiptap/extension-text-align": "^3.20.4",
|
|
42
|
+
"@tiptap/extension-text-style": "^3.20.4",
|
|
43
|
+
"@tiptap/pm": "^3.20.4",
|
|
44
|
+
"@tiptap/starter-kit": "^3.20.4",
|
|
45
45
|
"bwip-js": "^4.8.0",
|
|
46
46
|
"clsx": "^2.1.1",
|
|
47
47
|
"consola": "^3.4.2",
|
|
48
|
+
"echarts": "^6.0.0",
|
|
48
49
|
"html-to-image": "^1.11.13",
|
|
49
|
-
"jspdf": "^4.2.
|
|
50
|
+
"jspdf": "^4.2.1",
|
|
50
51
|
"solid-js": "^1.9.11",
|
|
51
52
|
"solid-tiptap": "^0.8.0",
|
|
52
53
|
"tabbable": "^6.4.0",
|
|
53
54
|
"tailwind-merge": "^3.5.0",
|
|
54
55
|
"tailwindcss": "^3.4.19",
|
|
55
|
-
"@simplysm/core-browser": "13.0.
|
|
56
|
-
"@simplysm/core-common": "13.0.
|
|
57
|
-
"@simplysm/service-
|
|
58
|
-
"@simplysm/service-
|
|
56
|
+
"@simplysm/core-browser": "13.0.97",
|
|
57
|
+
"@simplysm/core-common": "13.0.97",
|
|
58
|
+
"@simplysm/service-client": "13.0.97",
|
|
59
|
+
"@simplysm/service-common": "13.0.97"
|
|
59
60
|
},
|
|
60
61
|
"devDependencies": {
|
|
61
62
|
"@solidjs/testing-library": "^0.8.10"
|
|
62
|
-
},
|
|
63
|
-
"peerDependencies": {
|
|
64
|
-
"echarts": "^6.0.0"
|
|
65
|
-
},
|
|
66
|
-
"peerDependenciesMeta": {
|
|
67
|
-
"echarts": {
|
|
68
|
-
"optional": true
|
|
69
|
-
}
|
|
70
63
|
}
|
|
71
64
|
}
|
|
@@ -180,11 +180,17 @@ export interface SidebarMenuProps extends Omit<JSX.HTMLAttributes<HTMLDivElement
|
|
|
180
180
|
* Menu items array
|
|
181
181
|
*/
|
|
182
182
|
menus: AppMenu[];
|
|
183
|
+
/**
|
|
184
|
+
* When true, all nested menu lists are expanded on initial render.
|
|
185
|
+
* @default false
|
|
186
|
+
*/
|
|
187
|
+
defaultOpen?: boolean;
|
|
183
188
|
}
|
|
184
189
|
|
|
185
190
|
// Internal Context: share initial open state
|
|
186
191
|
interface MenuContextValue {
|
|
187
192
|
initialOpenItems: Accessor<Set<AppMenu>>;
|
|
193
|
+
defaultOpen: boolean;
|
|
188
194
|
}
|
|
189
195
|
|
|
190
196
|
const MenuContext = createContext<MenuContextValue>();
|
|
@@ -215,7 +221,7 @@ const MenuContext = createContext<MenuContextValue>();
|
|
|
215
221
|
* ```
|
|
216
222
|
*/
|
|
217
223
|
const SidebarMenu: Component<SidebarMenuProps> = (props) => {
|
|
218
|
-
const [local, rest] = splitProps(props, ["menus", "class"]);
|
|
224
|
+
const [local, rest] = splitProps(props, ["menus", "class", "defaultOpen"]);
|
|
219
225
|
|
|
220
226
|
const location = useLocation();
|
|
221
227
|
|
|
@@ -249,7 +255,7 @@ const SidebarMenu: Component<SidebarMenuProps> = (props) => {
|
|
|
249
255
|
const getClassName = () => twMerge("flex-1 overflow-y-auto", local.class);
|
|
250
256
|
|
|
251
257
|
return (
|
|
252
|
-
<MenuContext.Provider value={{ initialOpenItems }}>
|
|
258
|
+
<MenuContext.Provider value={{ initialOpenItems, defaultOpen: local.defaultOpen ?? false }}>
|
|
253
259
|
<div {...rest} data-sidebar-menu class={getClassName()}>
|
|
254
260
|
<div class={clsx("px-3.5 py-1 text-sm font-bold", text.muted, "uppercase tracking-wider")}>MENU</div>
|
|
255
261
|
<List inset>
|
|
@@ -281,7 +287,7 @@ const MenuItem: Component<MenuItemProps> = (props) => {
|
|
|
281
287
|
// Calculate open state (compare by object reference)
|
|
282
288
|
const shouldBeOpen = () => menuContext.initialOpenItems().has(props.menu);
|
|
283
289
|
|
|
284
|
-
const [open, setOpen] = createSignal(
|
|
290
|
+
const [open, setOpen] = createSignal(menuContext.defaultOpen);
|
|
285
291
|
|
|
286
292
|
// Update open state in response to pathname change
|
|
287
293
|
createEffect(() => {
|
package/README.md
DELETED
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
# @simplysm/solid
|
|
2
|
-
|
|
3
|
-
SolidJS + Tailwind CSS 기반 엔터프라이즈 UI 컴포넌트 라이브러리. 폼 컨트롤, 데이터 테이블, 다이얼로그, 알림, 테마, i18n, CRUD, 권한 관리 등 100+ 컴포넌트를 제공한다.
|
|
4
|
-
|
|
5
|
-
## 설치
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @simplysm/solid
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
**주요 의존성:** SolidJS, @solidjs/router, Tailwind CSS 3, Tiptap, Tabler Icons
|
|
12
|
-
**선택 의존성:** echarts (ECharts 차트 사용 시)
|
|
13
|
-
|
|
14
|
-
## 문서
|
|
15
|
-
|
|
16
|
-
| 카테고리 | 설명 |
|
|
17
|
-
|---------|------|
|
|
18
|
-
| [폼 컨트롤](docs/form-controls.md) | TextInput, NumberInput, Select, Combobox, DatePicker, DateRangePicker, Checkbox, RadioGroup, CheckboxGroup, ColorPicker, RichTextEditor, Numpad, StatePreset 등 |
|
|
19
|
-
| [레이아웃 & 데이터](docs/layout-data.md) | FormGroup, FormTable, Sidebar, Topbar, Table, DataSheet, List, Calendar, Kanban, Pagination 등 |
|
|
20
|
-
| [디스플레이 & 피드백](docs/display-feedback.md) | Card, Alert, Icon, Link, Tag, Barcode, Echarts, Dialog, Dropdown, Collapse, Tabs, Notification, Busy, Progress, Print 등 |
|
|
21
|
-
| [프로바이더 & 훅](docs/providers-hooks.md) | SystemProvider, ThemeProvider, I18nProvider, SharedDataProvider, useDialog, useBusy, useNotification, createAppStructure 등 |
|
|
22
|
-
| [기능 컴포넌트](docs/features.md) | CrudSheet, CrudDetail, DataSelectButton, SharedDataSelect, SharedDataSelectButton, SharedDataSelectList, PermissionTable, AddressSearch 등 |
|
|
23
|
-
|
|
24
|
-
## 빠른 시작
|
|
25
|
-
|
|
26
|
-
### SystemProvider (권장)
|
|
27
|
-
|
|
28
|
-
`SystemProvider`는 모든 필수 프로바이더를 한 번에 감싸는 편의 컴포넌트다.
|
|
29
|
-
|
|
30
|
-
```tsx
|
|
31
|
-
import { SystemProvider } from "@simplysm/solid";
|
|
32
|
-
|
|
33
|
-
function App() {
|
|
34
|
-
return (
|
|
35
|
-
<SystemProvider clientName="my-app" busyVariant="spinner">
|
|
36
|
-
<MyPage />
|
|
37
|
-
</SystemProvider>
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
내부적으로 다음 프로바이더를 순서대로 감싼다:
|
|
43
|
-
`ConfigProvider` > `I18nProvider` > `SyncStorageProvider` > `LoggerProvider` > `NotificationProvider` > `ErrorLoggerProvider` > `PwaUpdateProvider` > `ClipboardProvider` > `ThemeProvider` > `ServiceClientProvider` > `SharedDataProvider` > `BusyProvider`
|
|
44
|
-
|
|
45
|
-
### 개별 프로바이더 조합
|
|
46
|
-
|
|
47
|
-
```tsx
|
|
48
|
-
import { ThemeProvider, I18nProvider, NotificationProvider, BusyProvider } from "@simplysm/solid";
|
|
49
|
-
|
|
50
|
-
function App() {
|
|
51
|
-
return (
|
|
52
|
-
<ThemeProvider>
|
|
53
|
-
<I18nProvider>
|
|
54
|
-
<NotificationProvider>
|
|
55
|
-
<BusyProvider>
|
|
56
|
-
<MyPage />
|
|
57
|
-
</BusyProvider>
|
|
58
|
-
</NotificationProvider>
|
|
59
|
-
</I18nProvider>
|
|
60
|
-
</ThemeProvider>
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
### 기본 폼 예제
|
|
66
|
-
|
|
67
|
-
```tsx
|
|
68
|
-
import { createSignal } from "solid-js";
|
|
69
|
-
import { Card, FormGroup, TextInput, Select, Button } from "@simplysm/solid";
|
|
70
|
-
|
|
71
|
-
function MyPage() {
|
|
72
|
-
const [name, setName] = createSignal("");
|
|
73
|
-
const [role, setRole] = createSignal<string>();
|
|
74
|
-
|
|
75
|
-
return (
|
|
76
|
-
<Card>
|
|
77
|
-
<FormGroup>
|
|
78
|
-
<FormGroup.Item label="이름">
|
|
79
|
-
<TextInput value={name()} onValueChange={setName} required />
|
|
80
|
-
</FormGroup.Item>
|
|
81
|
-
<FormGroup.Item label="역할">
|
|
82
|
-
<Select
|
|
83
|
-
value={role()}
|
|
84
|
-
onValueChange={setRole}
|
|
85
|
-
items={["admin", "user", "guest"]}
|
|
86
|
-
renderValue={(item) => <span>{item}</span>}
|
|
87
|
-
/>
|
|
88
|
-
</FormGroup.Item>
|
|
89
|
-
</FormGroup>
|
|
90
|
-
<Button theme="primary" onClick={() => save()}>저장</Button>
|
|
91
|
-
</Card>
|
|
92
|
-
);
|
|
93
|
-
}
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
## 공통 타입
|
|
97
|
-
|
|
98
|
-
### ComponentSize
|
|
99
|
-
|
|
100
|
-
모든 폼 컨트롤과 대부분의 컴포넌트가 `size` prop을 지원한다.
|
|
101
|
-
|
|
102
|
-
```typescript
|
|
103
|
-
type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
### SemanticTheme
|
|
107
|
-
|
|
108
|
-
의미론적 색상 테마.
|
|
109
|
-
|
|
110
|
-
```typescript
|
|
111
|
-
type SemanticTheme = "base" | "primary" | "success" | "warning" | "danger" | "info";
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
### 스타일 유틸리티
|
|
115
|
-
|
|
116
|
-
Tailwind 클래스 프리셋. 테마 일관성을 위해 사용한다.
|
|
117
|
-
|
|
118
|
-
```typescript
|
|
119
|
-
import { bg, border, text, pad, gap, themeTokens } from "@simplysm/solid";
|
|
120
|
-
|
|
121
|
-
// 배경색
|
|
122
|
-
bg.surface // 흰색 / 다크: base-900
|
|
123
|
-
bg.muted // base-100 / 다크: base-800
|
|
124
|
-
bg.subtle // base-200 / 다크: base-700
|
|
125
|
-
|
|
126
|
-
// 테두리색
|
|
127
|
-
border.default // base-200 / 다크: base-700
|
|
128
|
-
|
|
129
|
-
// 텍스트색
|
|
130
|
-
text.default // base-900 / 다크: base-100
|
|
131
|
-
text.muted // base-400 / 다크: base-500
|
|
132
|
-
text.placeholder // placeholder 전용
|
|
133
|
-
|
|
134
|
-
// 패딩/갭 프리셋
|
|
135
|
-
pad.md // px-2 py-1
|
|
136
|
-
gap.md // gap-1
|
|
137
|
-
|
|
138
|
-
// 테마 토큰 (semantic theme별 solid/light/text/hoverBg/border)
|
|
139
|
-
themeTokens.primary.solid // bg-primary-500 text-white
|
|
140
|
-
themeTokens.danger.text // text-danger-600 dark:text-danger-400
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
### 라이트/다크 테마
|
|
144
|
-
|
|
145
|
-
`ThemeProvider`와 `useTheme()` 훅으로 라이트/다크/시스템 모드를 제어한다. localStorage에 설정이 자동 저장된다.
|
package/docs/display-feedback.md
DELETED
|
@@ -1,279 +0,0 @@
|
|
|
1
|
-
# 디스플레이 & 피드백
|
|
2
|
-
|
|
3
|
-
## Card
|
|
4
|
-
|
|
5
|
-
그림자와 호버 효과가 있는 카드 컨테이너.
|
|
6
|
-
|
|
7
|
-
```tsx
|
|
8
|
-
import { Card } from "@simplysm/solid";
|
|
9
|
-
|
|
10
|
-
<Card>카드 내용</Card>
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
## Alert
|
|
16
|
-
|
|
17
|
-
의미론적 테마의 알림 배너.
|
|
18
|
-
|
|
19
|
-
```tsx
|
|
20
|
-
import { Alert } from "@simplysm/solid";
|
|
21
|
-
|
|
22
|
-
<Alert theme="success">저장되었습니다.</Alert>
|
|
23
|
-
<Alert theme="danger">오류가 발생했습니다.</Alert>
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
---
|
|
27
|
-
|
|
28
|
-
## Icon
|
|
29
|
-
|
|
30
|
-
Tabler Icons 래퍼.
|
|
31
|
-
|
|
32
|
-
```tsx
|
|
33
|
-
import { Icon } from "@simplysm/solid";
|
|
34
|
-
import { IconUser } from "@tabler/icons-solidjs";
|
|
35
|
-
|
|
36
|
-
<Icon icon={IconUser} size="1.5em" />
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
---
|
|
40
|
-
|
|
41
|
-
## Link / Tag
|
|
42
|
-
|
|
43
|
-
```tsx
|
|
44
|
-
import { Link, Tag } from "@simplysm/solid";
|
|
45
|
-
|
|
46
|
-
<Link href="/users">사용자 목록</Link>
|
|
47
|
-
<Tag>라벨</Tag>
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
---
|
|
51
|
-
|
|
52
|
-
## Barcode
|
|
53
|
-
|
|
54
|
-
바코드/QR 코드 생성.
|
|
55
|
-
|
|
56
|
-
```tsx
|
|
57
|
-
import { Barcode } from "@simplysm/solid";
|
|
58
|
-
|
|
59
|
-
<Barcode value="1234567890" />
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
---
|
|
63
|
-
|
|
64
|
-
## Echarts
|
|
65
|
-
|
|
66
|
-
ECharts 차트 래퍼. 자동 리사이즈, 로딩 상태 지원. `echarts` peer dependency 필요.
|
|
67
|
-
|
|
68
|
-
```tsx
|
|
69
|
-
import { Echarts } from "@simplysm/solid";
|
|
70
|
-
|
|
71
|
-
<Echarts
|
|
72
|
-
option={{
|
|
73
|
-
xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
|
|
74
|
-
yAxis: { type: "value" },
|
|
75
|
-
series: [{ data: [120, 200, 150], type: "bar" }],
|
|
76
|
-
}}
|
|
77
|
-
busy={loading()}
|
|
78
|
-
/>
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
---
|
|
82
|
-
|
|
83
|
-
## Dialog
|
|
84
|
-
|
|
85
|
-
모달/플로팅 다이얼로그. 리사이즈, 드래그, z-index 자동 관리.
|
|
86
|
-
|
|
87
|
-
```tsx
|
|
88
|
-
import { Dialog } from "@simplysm/solid";
|
|
89
|
-
|
|
90
|
-
<Dialog open={isOpen()} onOpenChange={setIsOpen} width="600px" resizable draggable>
|
|
91
|
-
<Dialog.Header>제목</Dialog.Header>
|
|
92
|
-
<div>내용</div>
|
|
93
|
-
<Dialog.Action>
|
|
94
|
-
<Button onClick={() => setIsOpen(false)}>닫기</Button>
|
|
95
|
-
</Dialog.Action>
|
|
96
|
-
</Dialog>
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
| Prop | 타입 | 설명 |
|
|
100
|
-
|------|------|------|
|
|
101
|
-
| `open` | `boolean` | 열림 상태 |
|
|
102
|
-
| `onOpenChange` | `(v: boolean) => void` | 상태 콜백 |
|
|
103
|
-
| `mode` | `"float" \| "fill"` | 모드 |
|
|
104
|
-
| `resizable` | `boolean` | 리사이즈 가능 |
|
|
105
|
-
| `draggable` | `boolean` | 드래그 가능 |
|
|
106
|
-
| `width`, `height` | `string` | 크기 |
|
|
107
|
-
| `closeOnEscape` | `boolean` | ESC 닫기 |
|
|
108
|
-
| `beforeClose` | `() => boolean` | 닫기 확인 |
|
|
109
|
-
|
|
110
|
-
### 프로그래밍 방식 다이얼로그
|
|
111
|
-
|
|
112
|
-
```tsx
|
|
113
|
-
const dialog = useDialog();
|
|
114
|
-
|
|
115
|
-
const result = await dialog.show(MyComponent, { data: "value" }, {
|
|
116
|
-
header: "제목",
|
|
117
|
-
width: "500px",
|
|
118
|
-
resizable: true,
|
|
119
|
-
});
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
---
|
|
123
|
-
|
|
124
|
-
## Dropdown
|
|
125
|
-
|
|
126
|
-
팝업 메뉴/드롭다운.
|
|
127
|
-
|
|
128
|
-
```tsx
|
|
129
|
-
import { Dropdown } from "@simplysm/solid";
|
|
130
|
-
|
|
131
|
-
<Dropdown>
|
|
132
|
-
<Dropdown.Trigger>
|
|
133
|
-
<Button>메뉴</Button>
|
|
134
|
-
</Dropdown.Trigger>
|
|
135
|
-
<Dropdown.Content>
|
|
136
|
-
<div>메뉴 항목 1</div>
|
|
137
|
-
<div>메뉴 항목 2</div>
|
|
138
|
-
</Dropdown.Content>
|
|
139
|
-
</Dropdown>
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
---
|
|
143
|
-
|
|
144
|
-
## Collapse
|
|
145
|
-
|
|
146
|
-
접기/펼치기 (아코디언).
|
|
147
|
-
|
|
148
|
-
```tsx
|
|
149
|
-
import { Collapse } from "@simplysm/solid";
|
|
150
|
-
|
|
151
|
-
<Collapse open={expanded()}>
|
|
152
|
-
<div>접힌 내용</div>
|
|
153
|
-
</Collapse>
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
---
|
|
157
|
-
|
|
158
|
-
## Tabs
|
|
159
|
-
|
|
160
|
-
탭 전환.
|
|
161
|
-
|
|
162
|
-
```tsx
|
|
163
|
-
import { Tabs } from "@simplysm/solid";
|
|
164
|
-
|
|
165
|
-
<Tabs value={tab()} onValueChange={setTab}>
|
|
166
|
-
<Tabs.Tab value="info">정보</Tabs.Tab>
|
|
167
|
-
<Tabs.Tab value="settings">설정</Tabs.Tab>
|
|
168
|
-
</Tabs>
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
---
|
|
172
|
-
|
|
173
|
-
## Notification
|
|
174
|
-
|
|
175
|
-
알림 시스템. `NotificationProvider`로 감싸고 `useNotification()` 훅으로 사용.
|
|
176
|
-
|
|
177
|
-
```tsx
|
|
178
|
-
import { NotificationProvider, useNotification, NotificationBell, NotificationBanner } from "@simplysm/solid";
|
|
179
|
-
|
|
180
|
-
// 프로바이더 설정
|
|
181
|
-
<NotificationProvider>
|
|
182
|
-
<NotificationBanner />
|
|
183
|
-
<NotificationBell />
|
|
184
|
-
<App />
|
|
185
|
-
</NotificationProvider>
|
|
186
|
-
|
|
187
|
-
// 사용
|
|
188
|
-
const noti = useNotification();
|
|
189
|
-
|
|
190
|
-
noti.success("저장 완료", "데이터가 성공적으로 저장되었습니다.");
|
|
191
|
-
noti.danger("오류", "서버 연결에 실패했습니다.");
|
|
192
|
-
noti.info("안내", "새 버전이 있습니다.");
|
|
193
|
-
noti.warning("경고", "저장되지 않은 변경사항이 있습니다.");
|
|
194
|
-
|
|
195
|
-
// 에러 자동 처리
|
|
196
|
-
noti.error(err, "작업 실패");
|
|
197
|
-
|
|
198
|
-
// 업데이트
|
|
199
|
-
const id = noti.info("업로드 중...");
|
|
200
|
-
noti.update(id, { message: "업로드 완료!" });
|
|
201
|
-
|
|
202
|
-
// 액션 버튼 포함 알림
|
|
203
|
-
noti.info("업데이트 가능", "새 버전이 있습니다.", {
|
|
204
|
-
action: {
|
|
205
|
-
label: "새로고침",
|
|
206
|
-
onClick: () => window.location.reload(),
|
|
207
|
-
},
|
|
208
|
-
});
|
|
209
|
-
|
|
210
|
-
// 읽음 처리
|
|
211
|
-
noti.markAsRead(id);
|
|
212
|
-
noti.markAllAsRead();
|
|
213
|
-
noti.clear();
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
---
|
|
217
|
-
|
|
218
|
-
## Busy
|
|
219
|
-
|
|
220
|
-
로딩 오버레이. 중첩 호출 지원.
|
|
221
|
-
|
|
222
|
-
```tsx
|
|
223
|
-
import { BusyProvider, useBusy, BusyContainer } from "@simplysm/solid";
|
|
224
|
-
|
|
225
|
-
<BusyProvider variant="spinner">
|
|
226
|
-
<App />
|
|
227
|
-
</BusyProvider>
|
|
228
|
-
|
|
229
|
-
const busy = useBusy();
|
|
230
|
-
|
|
231
|
-
busy.show("로딩 중...");
|
|
232
|
-
// ... 작업 ...
|
|
233
|
-
busy.hide();
|
|
234
|
-
|
|
235
|
-
// 프로그레스 바
|
|
236
|
-
busy.show("업로드 중...");
|
|
237
|
-
busy.setProgress(50); // 50%
|
|
238
|
-
busy.setProgress(100);
|
|
239
|
-
busy.hide();
|
|
240
|
-
```
|
|
241
|
-
|
|
242
|
-
### BusyContainer
|
|
243
|
-
|
|
244
|
-
로컬 영역에 로딩 오버레이를 표시한다.
|
|
245
|
-
|
|
246
|
-
```tsx
|
|
247
|
-
<BusyContainer busy={isLoading()} variant="bar">
|
|
248
|
-
<div>컨텐츠</div>
|
|
249
|
-
</BusyContainer>
|
|
250
|
-
```
|
|
251
|
-
|
|
252
|
-
---
|
|
253
|
-
|
|
254
|
-
## Progress
|
|
255
|
-
|
|
256
|
-
프로그레스 바.
|
|
257
|
-
|
|
258
|
-
```tsx
|
|
259
|
-
import { Progress } from "@simplysm/solid";
|
|
260
|
-
|
|
261
|
-
<Progress value={progress()} />
|
|
262
|
-
```
|
|
263
|
-
|
|
264
|
-
---
|
|
265
|
-
|
|
266
|
-
## Print
|
|
267
|
-
|
|
268
|
-
인쇄 기능. `PrintProvider`로 감싸고 `usePrint()` 훅으로 사용.
|
|
269
|
-
|
|
270
|
-
```tsx
|
|
271
|
-
import { PrintProvider, usePrint } from "@simplysm/solid";
|
|
272
|
-
|
|
273
|
-
<PrintProvider>
|
|
274
|
-
<App />
|
|
275
|
-
</PrintProvider>
|
|
276
|
-
|
|
277
|
-
const print = usePrint();
|
|
278
|
-
// print 호출로 인쇄 다이얼로그 표시
|
|
279
|
-
```
|