feat: add fluid variant to input

package.json

@@ -11,7 +11,7 @@
     "prettier:fix": "prettier --write --ignore-unknown ."
   },
   "dependencies": {
-    "primevue": "^4.0.0",
+    "primevue": "^4.0.4",
     "vue": "^3.4.29"
   },
   "devDependencies": {

src/preset/inputText/inputText.stories.ts

@@ -1,7 +1,6 @@
 import { html } from "@/lib/tags";
 import { Meta, StoryObj } from "@storybook/vue3";
-import InputGroup from "primevue/inputgroup";
-import InputGroupAddon from "primevue/inputgroupaddon";
+import Fluid from "primevue/fluid";
 import InputText from "primevue/inputtext";
 import ErrorOutline from "~icons/ic/error-outline";
 
@@ -121,3 +120,13 @@ export const Invalid: StoryObj<typeof meta> = {
     </div>`,
   }),
 };
+
+export const FluidProp: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { InputText, Fluid },
+    setup() {
+      return { args };
+    },
+    template: html`<InputText v-bind="args" fluid />`,
+  }),
+};

src/preset/inputText/inputText.ts

@@ -16,6 +16,9 @@ const inputText: InputTextPassThroughOptions = {
     const isInputGroup = parent.instance.$name === "InputGroup";
     const inputGroup = tw`bg-transparent placeholder:text-gray-900 focus:outline-none`;
 
+    // Integration for primevue/fluid
+    const fluid = tw`w-full`;
+
     // Sizes
     const small = tw`h-48 px-16 py-4`;
     const large = tw`h-64 px-24 py-4`;
@@ -26,6 +29,7 @@ const inputText: InputTextPassThroughOptions = {
       class: {
         [base]: !isInputGroup,
         [inputGroup]: isInputGroup,
+        [fluid]: !!props.fluid,
         [password]: true,
         [small]: (!props.size || props.size === "small") && !isInputGroup,
         [smallInGroup]: (!props.size || props.size === "small") && isInputGroup,