@dynamix-layout/solid 1.0.3 → 1.1.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.
Files changed (7) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.css +1 -1
  4. package/dist/index.es.js +566 -400
  5. package/dist/types/index.d.cts +31 -1
  6. package/dist/types/index.d.ts +31 -1
  7. package/package.json +4 -4
package/dist/types/index.d.cts CHANGED
@@ -14,6 +14,8 @@ export declare const DefaultSliderElement: (props: {
14
14
  children?: JSX.Element;
15
15
  } & DivProps) => JSX.Element;
16
16
 
17
+ export declare const DefaultTabsetToolbar: (props: TabsetToolbarProps) => JSX.Element;
18
+
17
19
  export declare const DefaultWrapTabBody: (props: DivProps) => JSX.Element;
18
20
 
19
21
  export declare const DefaultWrapTabHead: (props: DivProps) => JSX.Element;
@@ -95,6 +97,15 @@ export declare interface LayoutProps {
95
97
  RootSplitterHoverElClass?: string;
96
98
  rootId?: string;
97
99
  tabNames?: Map<string, string | JSX.Element>;
100
+ /** Show the maximize button on tab bars (default true). */
101
+ enableMaximize?: boolean;
102
+ /** Show the fold button on tab bars (default true; needs the tab bar). */
103
+ enableCollapse?: boolean;
104
+ /** Double-click a tab bar to maximize or restore it (default true). */
105
+ enableDoubleClickMaximize?: boolean;
106
+ /** Alt/Option + "+" maximizes, Alt/Option + "-" folds the active tabset (default true). */
107
+ keyboardShortcuts?: boolean;
108
+ TabsetToolbar?: (props: TabsetToolbarProps) => JSX.Element;
98
109
  }
99
110
 
100
111
  export declare const RootSplitterHoverEl: (props: {
@@ -120,7 +131,20 @@ export declare type TabOutput = {
120
131
  name: Map<string, string>;
121
132
  };
122
133
 
123
- export declare const useDynamixLayout: ({ tabOutput, rootId, layoutTree, updateJSON, dimensions, tabHeadHeight, enableTabbar, bondWidth, minTabHeight, minTabWidth, sliderUpdateTimeout, windowResizeTimeout, disableSliderTimeout, disableResizeTimeout, }: useDynamixLayoutOptions) => {
134
+ export declare interface TabsetToolbarProps {
135
+ maximized: boolean;
136
+ folded: boolean;
137
+ /** The tab bar is drawn as a rotated vertical strip (folded, side-by-side row). */
138
+ rotated: boolean;
139
+ /** The tabset's row lays its children out side by side. */
140
+ rowIsHorizontal: boolean;
141
+ showMaximize: boolean;
142
+ showFold: boolean;
143
+ onToggleMaximize: () => void;
144
+ onToggleFold: () => void;
145
+ }
146
+
147
+ export declare const useDynamixLayout: ({ tabOutput, rootId, layoutTree, updateJSON, dimensions, tabHeadHeight, enableTabbar, bondWidth, minTabHeight, minTabWidth, sliderUpdateTimeout, windowResizeTimeout, disableSliderTimeout, disableResizeTimeout, keyboardShortcuts, enableDoubleClickMaximize, }: useDynamixLayoutOptions) => {
124
148
  tabsets: Accessor<Map<string, NodeOptions>>;
125
149
  sliders: Accessor<Map<string, NodeOptions>>;
126
150
  tabsetsRef: Map<string, HTMLDivElement>;
@@ -155,6 +179,10 @@ export declare const useDynamixLayout: ({ tabOutput, rootId, layoutTree, updateJ
155
179
  updateActiveTab: (e: MouseEvent) => void;
156
180
  handleRootSplit: (e: DragEvent) => void;
157
181
  handleNavbarDragOver: (e: DragEvent) => void;
182
+ toggleMaximize: (tabsetId: string) => void;
183
+ toggleCollapse: (tabsetId: string) => void;
184
+ onRootPointerDown: (e: PointerEvent) => void;
185
+ onTabbarDoubleClick: (e: MouseEvent) => void;
158
186
  };
159
187
 
160
188
  export declare interface UseDynamixLayoutOptions {
@@ -178,6 +206,8 @@ export declare interface useDynamixLayoutOptions {
178
206
  minTabHeight: number;
179
207
  minTabWidth: number;
180
208
  tabHeadHeight: number;
209
+ keyboardShortcuts?: boolean;
210
+ enableDoubleClickMaximize?: boolean;
181
211
  }
182
212
 
183
213
  export declare interface UseDynamixLayoutResult {
package/dist/types/index.d.ts CHANGED
@@ -14,6 +14,8 @@ export declare const DefaultSliderElement: (props: {
14
14
  children?: JSX.Element;
15
15
  } & DivProps) => JSX.Element;
16
16
 
17
+ export declare const DefaultTabsetToolbar: (props: TabsetToolbarProps) => JSX.Element;
18
+
17
19
  export declare const DefaultWrapTabBody: (props: DivProps) => JSX.Element;
18
20
 
19
21
  export declare const DefaultWrapTabHead: (props: DivProps) => JSX.Element;
@@ -95,6 +97,15 @@ export declare interface LayoutProps {
95
97
  RootSplitterHoverElClass?: string;
96
98
  rootId?: string;
97
99
  tabNames?: Map<string, string | JSX.Element>;
100
+ /** Show the maximize button on tab bars (default true). */
101
+ enableMaximize?: boolean;
102
+ /** Show the fold button on tab bars (default true; needs the tab bar). */
103
+ enableCollapse?: boolean;
104
+ /** Double-click a tab bar to maximize or restore it (default true). */
105
+ enableDoubleClickMaximize?: boolean;
106
+ /** Alt/Option + "+" maximizes, Alt/Option + "-" folds the active tabset (default true). */
107
+ keyboardShortcuts?: boolean;
108
+ TabsetToolbar?: (props: TabsetToolbarProps) => JSX.Element;
98
109
  }
99
110
 
100
111
  export declare const RootSplitterHoverEl: (props: {
@@ -120,7 +131,20 @@ export declare type TabOutput = {
120
131
  name: Map<string, string>;
121
132
  };
122
133
 
123
- export declare const useDynamixLayout: ({ tabOutput, rootId, layoutTree, updateJSON, dimensions, tabHeadHeight, enableTabbar, bondWidth, minTabHeight, minTabWidth, sliderUpdateTimeout, windowResizeTimeout, disableSliderTimeout, disableResizeTimeout, }: useDynamixLayoutOptions) => {
134
+ export declare interface TabsetToolbarProps {
135
+ maximized: boolean;
136
+ folded: boolean;
137
+ /** The tab bar is drawn as a rotated vertical strip (folded, side-by-side row). */
138
+ rotated: boolean;
139
+ /** The tabset's row lays its children out side by side. */
140
+ rowIsHorizontal: boolean;
141
+ showMaximize: boolean;
142
+ showFold: boolean;
143
+ onToggleMaximize: () => void;
144
+ onToggleFold: () => void;
145
+ }
146
+
147
+ export declare const useDynamixLayout: ({ tabOutput, rootId, layoutTree, updateJSON, dimensions, tabHeadHeight, enableTabbar, bondWidth, minTabHeight, minTabWidth, sliderUpdateTimeout, windowResizeTimeout, disableSliderTimeout, disableResizeTimeout, keyboardShortcuts, enableDoubleClickMaximize, }: useDynamixLayoutOptions) => {
124
148
  tabsets: Accessor<Map<string, NodeOptions>>;
125
149
  sliders: Accessor<Map<string, NodeOptions>>;
126
150
  tabsetsRef: Map<string, HTMLDivElement>;
@@ -155,6 +179,10 @@ export declare const useDynamixLayout: ({ tabOutput, rootId, layoutTree, updateJ
155
179
  updateActiveTab: (e: MouseEvent) => void;
156
180
  handleRootSplit: (e: DragEvent) => void;
157
181
  handleNavbarDragOver: (e: DragEvent) => void;
182
+ toggleMaximize: (tabsetId: string) => void;
183
+ toggleCollapse: (tabsetId: string) => void;
184
+ onRootPointerDown: (e: PointerEvent) => void;
185
+ onTabbarDoubleClick: (e: MouseEvent) => void;
158
186
  };
159
187
 
160
188
  export declare interface UseDynamixLayoutOptions {
@@ -178,6 +206,8 @@ export declare interface useDynamixLayoutOptions {
178
206
  minTabHeight: number;
179
207
  minTabWidth: number;
180
208
  tabHeadHeight: number;
209
+ keyboardShortcuts?: boolean;
210
+ enableDoubleClickMaximize?: boolean;
181
211
  }
182
212
 
183
213
  export declare interface UseDynamixLayoutResult {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dynamix-layout/solid",
3
- "version": "1.0.3",
3
+ "version": "1.1.0",
4
4
  "description": "A powerful SolidJS component for creating dynamic, resizable, and draggable layouts.",
5
5
  "keywords": [
6
6
  "solid",
@@ -80,11 +80,11 @@
80
80
  "vite-plugin-solid": "2.11.14",
81
81
  "vitest": "^4.1.11",
82
82
  "solid-js": "^1.9.15",
83
- "@repo/typescript-config": "0.0.0",
84
- "@repo/eslint-config": "0.0.0"
83
+ "@repo/eslint-config": "0.0.0",
84
+ "@repo/typescript-config": "0.0.0"
85
85
  },
86
86
  "dependencies": {
87
- "@dynamix-layout/core": "1.1.1"
87
+ "@dynamix-layout/core": "1.2.0"
88
88
  },
89
89
  "peerDependencies": {
90
90
  "solid-js": "^1.8.0"