refactor(styles): set width of inputs, dropdowns, ... to 100 %

Author: sfxcode

README.md

@@ -2,7 +2,41 @@
 
 Helper classes for using [Formkit](https://formkit.com/) with the [PrimeVue UI Framework](https://www.primefaces.org/primevue/#/)
 
-## Usages
+## Usage
+
+```typescript
+
+import { defaultConfig, plugin } from '@formkit/vue'
+import { primeInputs } from '@sfxcode/formkit-primevue'
+
+
+  app.use(plugin, defaultConfig({
+    locales: { de, en },
+    // Define the active locale
+    locale: 'en',
+    inputs: primeInputs,
+  }))
+```
+
+### Basic Styling
+
+Basic styling is provided with the **formkit-primevue.scss** file.
+
+Features:
+
+- Width of all text and dropdown elements is set to 100%
+- Error Color by varianble (--formkit-error-color)
+- Some margins, font sizes ...
+
+You can use it or take it as base for your own styling.
+
+### Extended Styling
+
+- All inputs are wrapped in a div with a **p-formkit** class
+- Most Prime Components have access to class / styles attributes
+- PT and PTOptions are available ([https://primevue.org/passthrough/](https://primevue.org/passthrough/))
+
+## Showcases
 
 A Nuxt 3 Module (PrimeVue and Formkit bundled) under [nuxt-primevue](https://github.com/sfxcode/nuxt-primevue)
 
@@ -31,21 +65,7 @@ A Nuxt 3 Module (PrimeVue and Formkit bundled) under [nuxt-primevue](https://git
 - TriStateCheckbox
 - RadioButton
 
-## Usage
-
-```typescript
-
-import { defaultConfig, plugin } from '@formkit/vue'
-import { primeInputs } from '@sfxcode/formkit-primevue'
-
 
-  app.use(plugin, defaultConfig({
-    locales: { de, en },
-    // Define the active locale
-    locale: 'en',
-    inputs: primeInputs,
-  }))
-```
 
 ![](formkit-primevue.png)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfxcode/formkit-primevue",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "type": "module",
   "license": "MIT",
   "repository": "https://github.com/sfxcode/formkit-primevue",

public/sass/formkit-primevue.scss

@@ -12,6 +12,27 @@
 .formkit-outer {
   margin: 0;
   padding-bottom: 12px;
+
+  .formkit-inner {
+
+    .p-formkit {
+
+      .p-formkit-icon {
+        box-sizing: border-box;
+        width: 100%;
+      }
+
+      .p-inputtext, .p-password, .p-multiselect, .p-dropdown {
+        box-sizing: border-box;
+        width: 100%;
+        &.p-colorpicker-preview {
+          width: 2rem;
+        }
+      }
+
+    }
+  }
+
   ul {
     margin-block-start: 2px;
     margin-block-end: 2px;
@@ -75,16 +96,7 @@
   padding: 0;
 }
 
-.formkit-inner {
-  position: relative;
-  border-radius: 0;
-  display: flex;
-  align-items: center;
-  width: fit-content;
-  &:focus-within {
 
-  }
-}
 
 .formkit-help {
   margin: 4px 0 0 0 ;

src/components/demo/PrimeInput.vue

@@ -21,8 +21,8 @@ const documentationLink = `https://primevue.org/${props.header.replace('Prime',
   <div>
     <h1>{{ header }}</h1>
 
-    <div class="flex flex-wrap">
-      <div class="min-w-lg mb-6 mr-6">
+    <div class="flex flex-wrap gap-12">
+      <div class="min-w-30rem basis-1/3 md:basis-1/4">
         <FormKit
           id="form"
           v-model="formData"
@@ -36,7 +36,7 @@ const documentationLink = `https://primevue.org/${props.header.replace('Prime',
         <h3>Data</h3>
         <pre>{{ formData }}</pre>
       </div>
-      <div class="max-w-xl">
+      <div class="">
         <TabView>
           <TabPanel header="Schema">
             <pre>{{ formSchema }}</pre>

src/formkit/PrimeInputText.vue

@@ -36,7 +36,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
 
 <template>
   <div class="p-formkit">
-    <span :class="spanClass()">
+    <span class="p-formkit-icon" :class="spanClass()">
       <i v-if="hasLeftIcon()" :class="context.iconLeft" />
 
       <InputText

src/pages/demo/Slider.vue

@@ -9,7 +9,7 @@ const schema
       $formkit: 'primeSlider',
       name: 'slider',
       label: 'Use Slider',
-      class: 'mt-2 w-48',
+      class: 'mt-2 w-72',
       min: 5,
       max: 100,
       step: 5,