feat: allow min to be used as a floor (#48)

Co-authored-by: Rijk van Zanten <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

packages/vue-split-panel/src/composables/use-grid-template.test.ts

@@ -41,6 +41,18 @@ describe('useGridTemplate', () => {
 		expect(gridTemplate.value).toBe('clamp(0%, clamp(20%, 50%, 80%), calc(100% - 4px)) 4px auto');
 	});
 
+	it('respects minSizePercentage as a floor when max is not set', () => {
+		const options = createOptions({
+			minSizePercentage: computed(() => 30),
+		});
+
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe(
+			'clamp(30%, 50%, calc(100% - 4px)) 4px auto',
+		);
+	});
+
 	it('reverses order when primary is end and direction is ltr', () => {
 		const options = createOptions({ primary: 'end' });
 		const { gridTemplate } = useGridTemplate(options);

packages/vue-split-panel/src/composables/use-grid-template.ts

@@ -23,6 +23,9 @@ export const useGridTemplate = (options: UseGridTemplateOptions) => {
 		else if (options.minSizePercentage.value !== undefined && options.maxSizePercentage.value !== undefined) {
 			primary = `clamp(0%, clamp(${options.minSizePercentage.value}%, ${options.sizePercentage.value}%, ${options.maxSizePercentage.value}%), calc(100% - ${options.dividerSize.value}px))`;
 		}
+		else if (options.minSizePercentage.value !== undefined) {
+			primary = `clamp(${options.minSizePercentage.value}%, ${options.sizePercentage.value}%, calc(100% - ${options.dividerSize.value}px))`;
+		}
 		else {
 			primary = `clamp(0%, ${options.sizePercentage.value}%, calc(100% - ${options.dividerSize.value}px))`;
 		}