refactor(styles): Remove all fixed With

Author: sfxcode

public/sass/formkit-prime-inputs.scss

@@ -1,95 +0,0 @@
-.formkit-inner {
-
-  span {
-    .p-inputtext {
-      width: 300px;
-    }
-  }
-
-  .p-inputnumber {
-    .p-inputtext {
-      width: 150px;
-    }
-  }
-
-  .p-inputmask {
-    width: 150px;
-  }
-
-  .p-password {
-    .p-inputtext {
-      width: 300px;
-    }
-  }
-
-  .p-inputtextarea {
-      width: 300px;
-  }
-
-  .p-slider {
-    width: 300px;
-    margin-top: 10px;
-
-  }
-
-  .p-color-picker {
-    .p-inputtext {
-      width: 30px;
-    }
-  }
-
-  .p-calendar {
-    .p-inputtext {
-      width: 150px;
-    }
-  }
-
-  .p-chips {
-    .p-inputtext {
-      width: 300px;
-    }
-  }
-
-  .p-dropdown {
-    .p-inputtext {
-      width: 250px;
-    }
-  }
-
-  .p-selectbutton {
-      width: 300px;
-  }
-
-  .p-multiselect {
-    .p-multiselect-label {
-      width: 250px;
-    }
-  }
-
-  .p-listbox {
-    .p-listbox-item {
-      width: 250px;
-    }
-  }
-
-  .p-editor-container {
-    width: 300px;
-  }
-}
-
-.formkit-outer[data-type="primeInputSwitch"], .formkit-outer[data-type="primeCheckbox"], .formkit-outer[data-type="primeTriStateCheckBox"], .formkit-outer[data-type="primeRadioButton"] {
-  .formkit-inner {
-    width: 300px;
-
-    .formkit-prime-right {
-      margin-left: 10px;
-      font-size: 1rem;
-    }
-
-    .formkit-prime-left {
-      margin-right: 10px;
-      font-size: 1rem;
-    }
-  }
-}
-

public/sass/formkit-primevue.scss

@@ -8,7 +8,6 @@
 .formkit-outer {
   margin: 4px;
   padding-bottom: 12px;
-  width: 400px;
   ul {
     margin-block-start: 2px;
     margin-block-end: 2px;
@@ -26,16 +25,26 @@
   }
 }
 
-.formkit-wrapper,
-.formkit-fieldset {
-  max-width: 0;
+.formkit-outer[data-type="primeInputSwitch"], .formkit-outer[data-type="primeCheckbox"], .formkit-outer[data-type="primeTriStateCheckBox"], .formkit-outer[data-type="primeRadioButton"] {
+  .formkit-inner {
+
+    .formkit-prime-right {
+      margin-left: 10px;
+      font-size: 1rem;
+    }
+
+    .formkit-prime-left {
+      margin-right: 10px;
+      font-size: 1rem;
+    }
+  }
 }
 
+
 .formkit-label {
   display: block;
   margin: 0;
   padding-bottom: 6px;
-  width: 300px;
   font-weight: bold;
   font-size: 0.8rem;
 }
@@ -79,10 +88,6 @@
   color: var(--text-color-secondary);
 }
 
-.formkit-messages {
-  padding: 0;
-}
-
 .formkit-message {
   padding: 0;
   margin: 0;

src/App.scss

@@ -1,5 +1,4 @@
 @import "src/sass/primevue/layout";
 @import "public/sass/formkit-primevue";
-@import "public/sass/formkit-prime-inputs";
 @import "src/sass/main";
 

src/components/demo/PrimeInput.vue

@@ -22,7 +22,7 @@ const documentationLink = `https://primevue.org/${props.header.replace('Prime',
     <h1>{{ header }}</h1>
 
     <div class="flex flex-wrap">
-      <div class="min-w-lg mb-6">
+      <div class="min-w-lg mb-6 mr-6">
         <FormKit
           id="form"
           v-model="formData"

src/pages/demo/Checkbox.vue

@@ -12,14 +12,18 @@ const schema
     },
     {
       $formkit: 'primeCheckbox',
-      name: 'eu_citizen',
       id: 'eu',
       labelLeft: 'Are you a european citizen: ',
     },
+  {
+    $formkit: 'primeCheckbox',
+    id: 'taxes',
+    labelRight: 'Taxes includes ',
+  },
     {
       $formkit: 'primeCheckbox',
       name: 'readonly',
-      label: 'readonly does not work atn',
+      label: 'readonly',
       _readonly: true,
     },
     {

src/pages/demo/InputText.vue

@@ -40,7 +40,7 @@ const schema
       label: 'Icon Both Sides',
       help: '',
       style: 'background:gray;',
-      class: 'customClass',
+      class: 'customClass w-64',
       iconLeft: 'pi pi-plus',
       iconRight: 'pi pi-check',
     },

src/pages/demo/Slider.vue

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