feat: URow, UCol: add flex grow and shrink props

itsJohnnyGrid · itsJohnnyGrid · commit 69c5f9cf77bf · 2025-11-27T17:14:12.000+08:00
diff --git a/src/ui.container-col/config.ts b/src/ui.container-col/config.ts
@@ -12,6 +12,12 @@ export default /*tw*/ {
       block: {
         true: "w-full",
       },
+      grow: {
+        true: "flex-grow",
+      },
+      shrink: {
+        true: "flex-shrink",
+      },
       gap: {
         none: "gap-0",
         "3xs": "gap-0.5",
@@ -61,5 +67,7 @@ export default /*tw*/ {
     wrap: false,
     reverse: false,
     block: false,
+    grow: false,
+    shrink: false,
   },
 };
diff --git a/src/ui.container-col/storybook/stories.ts b/src/ui.container-col/storybook/stories.ts
@@ -159,3 +159,57 @@ DefaultSlot.args = {
     <UButton label="Submit" />
   `,
 };
+
+export const Grow: StoryFn<UColArgs> = (args: UColArgs) => ({
+  components: { UCol, UButton },
+  setup: () => ({ args }),
+  template: `
+    <div class="flex flex-col h-[400px] border border-primary border-dashed rounded-medium p-4">
+      <UCol gap="sm" class="border border-secondary border-dashed rounded-medium p-4">
+        <UButton label="Col 1" />
+        <UButton label="No grow" />
+      </UCol>
+      <UCol gap="sm" grow class="border border-secondary border-dashed rounded-medium p-4">
+        <UButton label="Col 2" />
+        <UButton label="With grow - fills available space" />
+      </UCol>
+      <UCol gap="sm" class="border border-secondary border-dashed rounded-medium p-4">
+        <UButton label="Col 3" />
+        <UButton label="No grow" />
+      </UCol>
+    </div>
+  `,
+});
+Grow.parameters = {
+  docs: {
+    description: {
+      story: "Allow flex item to grow to fill available space (flex-grow). The middle column grows to fill the remaining vertical space.",
+    },
+  },
+};
+
+export const Shrink: StoryFn<UColArgs> = (args: UColArgs) => ({
+  components: { UCol, UButton },
+  setup: () => ({ args }),
+  template: `
+    <div class="flex flex-col h-[300px] border border-primary border-dashed rounded-medium p-4">
+      <UCol gap="sm" shrink class="min-h-[200px] border border-secondary border-dashed rounded-medium p-4">
+        <UButton label="Col 1" />
+        <UButton label="With shrink - can shrink below min-height" />
+        <UButton label="Shrinks when needed" />
+      </UCol>
+      <UCol gap="sm" class="min-h-[200px] border border-secondary border-dashed rounded-medium p-4">
+        <UButton label="Col 2" />
+        <UButton label="No shrink - maintains min-height" />
+        <UButton label="Won't shrink" />
+      </UCol>
+    </div>
+  `,
+});
+Shrink.parameters = {
+  docs: {
+    description: {
+      story: "Allow flex item to shrink if necessary (flex-shrink). The first column can shrink below its min-height when space is constrained.",
+    },
+  },
+};
diff --git a/src/ui.container-col/tests/UCol.test.ts b/src/ui.container-col/tests/UCol.test.ts
@@ -140,6 +140,32 @@ describe("UCol.vue", () => {
       expect(component.attributes("class")).toContain(expectedClasses);
     });
 
+    it("Grow – applies the correct grow class", () => {
+      const grow = true;
+      const expectedClasses = "flex-grow";
+
+      const component = mount(UCol, {
+        props: {
+          grow,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(expectedClasses);
+    });
+
+    it("Shrink – applies the correct shrink class", () => {
+      const shrink = true;
+      const expectedClasses = "flex-shrink";
+
+      const component = mount(UCol, {
+        props: {
+          shrink,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(expectedClasses);
+    });
+
     it("Tag – renders the correct HTML tag", () => {
       const tags = ["div", "section", "article", "main", "aside", "nav", "span"];
 
diff --git a/src/ui.container-col/types.ts b/src/ui.container-col/types.ts
@@ -49,6 +49,16 @@ export interface Props {
    */
   block?: boolean;
 
+  /**
+   * Allow flex item to grow to fill available space (flex-grow).
+   */
+  grow?: boolean;
+
+  /**
+   * Allow flex item to shrink if necessary (flex-shrink).
+   */
+  shrink?: boolean;
+
   /**
    * Allows changing HTML tag.
    */
diff --git a/src/ui.container-row/config.ts b/src/ui.container-row/config.ts
@@ -12,6 +12,12 @@ export default /*tw*/ {
       block: {
         true: "w-full",
       },
+      grow: {
+        true: "flex-grow",
+      },
+      shrink: {
+        true: "flex-shrink",
+      },
       gap: {
         none: "gap-0",
         "2xs": "gap-1",
@@ -59,5 +65,7 @@ export default /*tw*/ {
     wrap: false,
     block: false,
     reverse: false,
+    grow: false,
+    shrink: false,
   },
 };
diff --git a/src/ui.container-row/tests/URow.test.ts b/src/ui.container-row/tests/URow.test.ts
@@ -138,6 +138,32 @@ describe("URow.vue", () => {
       expect(component.attributes("class")).toContain(expectedClasses);
     });
 
+    it("Grow – applies the correct grow class", () => {
+      const grow = true;
+      const expectedClasses = "flex-grow";
+
+      const component = mount(URow, {
+        props: {
+          grow,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(expectedClasses);
+    });
+
+    it("Shrink – applies the correct shrink class", () => {
+      const shrink = true;
+      const expectedClasses = "flex-shrink";
+
+      const component = mount(URow, {
+        props: {
+          shrink,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(expectedClasses);
+    });
+
     it("Tag – renders the correct HTML tag", () => {
       const tags = ["div", "section", "article", "main", "aside", "nav", "span"];
 
diff --git a/src/ui.container-row/types.ts b/src/ui.container-row/types.ts
@@ -49,6 +49,16 @@ export interface Props {
    */
   block?: boolean;
 
+  /**
+   * Allow flex item to grow to fill available space (flex-grow).
+   */
+  grow?: boolean;
+
+  /**
+   * Allow flex item to shrink if necessary (flex-shrink).
+   */
+  shrink?: boolean;
+
   /**
    * Allows changing HTML tag.
    */
