refactor(ui): simplify and validate items-per-page input handling

Moved validation logic for itemsPerPage into clearer functions.
Replaced internal state tracking with direct model updates.
Removed unnecessary outlined and center-affix props.
Updated tests and snapshots accordingly to match new behavior.

Author: luannmoreira

ui/admin/tests/unit/components/Announcement/AnnouncementList/__snapshots__/AnnouncementList.spec.ts.snap

@@ -73,7 +73,7 @@ exports[`Announcement List > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-10" aria-owns="menu-v-10">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-10" aria-owns="menu-v-10">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -97,7 +97,7 @@ exports[`Announcement List > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-12" aria-expanded="false" aria-controls="menu-v-10" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-12" aria-expanded="false" aria-controls="menu-v-10" value="10">
               </div>
               <!---->
             </div>

ui/admin/tests/unit/components/Device/DeviceList/__snapshots__/index.spec.ts.snap

@@ -90,7 +90,7 @@ exports[`Device List > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-18" aria-owns="menu-v-18">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-18" aria-owns="menu-v-18">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -114,7 +114,7 @@ exports[`Device List > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-20" aria-expanded="false" aria-controls="menu-v-18" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-20" aria-expanded="false" aria-controls="menu-v-18" value="10">
                 </div>
                 <!---->
               </div>

ui/admin/tests/unit/components/FirewallRules/FirewallRulesList/__snapshots__/index.spec.ts.snap

@@ -52,7 +52,7 @@ exports[`Firewall Rules List > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-4" aria-owns="menu-v-4">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-4" aria-owns="menu-v-4">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -76,7 +76,7 @@ exports[`Firewall Rules List > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-6" aria-expanded="false" aria-controls="menu-v-4" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-6" aria-expanded="false" aria-controls="menu-v-4" value="10">
               </div>
               <!---->
             </div>

ui/admin/tests/unit/components/Namespaces/NamespaceList/__snapshots__/index.spec.ts.snap

@@ -57,7 +57,7 @@ exports[`Namespace List > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-6" aria-owns="menu-v-6">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-6" aria-owns="menu-v-6">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -81,7 +81,7 @@ exports[`Namespace List > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-8" aria-expanded="false" aria-controls="menu-v-6" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-8" aria-expanded="false" aria-controls="menu-v-6" value="10">
                 </div>
                 <!---->
               </div>

ui/admin/tests/unit/components/Session/SessionList/__snapshots__/index.spec.ts.snap

@@ -105,7 +105,7 @@ exports[`Sessions List > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-16" aria-owns="menu-v-16">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-16" aria-owns="menu-v-16">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -129,7 +129,7 @@ exports[`Sessions List > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-18" aria-expanded="false" aria-controls="menu-v-16" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-18" aria-expanded="false" aria-controls="menu-v-16" value="10">
                 </div>
                 <!---->
               </div>

ui/admin/tests/unit/components/User/UserList/__snapshots__/index.spec.ts.snap

@@ -60,7 +60,7 @@ exports[`UserList > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-7" aria-owns="menu-v-7">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-7" aria-owns="menu-v-7">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -84,7 +84,7 @@ exports[`UserList > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-9" aria-expanded="false" aria-controls="menu-v-7" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-9" aria-expanded="false" aria-controls="menu-v-7" value="10">
               </div>
               <!---->
             </div>

ui/admin/tests/unit/views/Announcements/__snapshots__/Announcements.spec.ts.snap

@@ -57,7 +57,7 @@ exports[`Announcement Details > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-6" aria-owns="menu-v-6">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-6" aria-owns="menu-v-6">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -81,7 +81,7 @@ exports[`Announcement Details > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-8" aria-expanded="false" aria-controls="menu-v-6" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-8" aria-expanded="false" aria-controls="menu-v-6" value="10">
               </div>
               <!---->
             </div>

ui/admin/tests/unit/views/Device/__snapshots__/index.spec.ts.snap

@@ -135,7 +135,7 @@ exports[`Device > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-9" aria-owns="menu-v-9">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-9" aria-owns="menu-v-9">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -159,7 +159,7 @@ exports[`Device > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-11" aria-expanded="false" aria-controls="menu-v-9" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-11" aria-expanded="false" aria-controls="menu-v-9" value="10">
                 </div>
                 <!---->
               </div>

ui/admin/tests/unit/views/FirewallRules/__snapshots__/index.spec.ts.snap

@@ -53,7 +53,7 @@ exports[`Firewall Rules > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -77,7 +77,7 @@ exports[`Firewall Rules > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-2" aria-expanded="false" aria-controls="menu-v-0" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-2" aria-expanded="false" aria-controls="menu-v-0" value="10">
               </div>
               <!---->
             </div>

ui/admin/tests/unit/views/Namespaces/__snapshots__/index.spec.ts.snap

@@ -83,7 +83,7 @@ exports[`Namespaces > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-4" aria-owns="menu-v-4">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-4" aria-owns="menu-v-4">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -107,7 +107,7 @@ exports[`Namespaces > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-6" aria-expanded="false" aria-controls="menu-v-4" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-6" aria-expanded="false" aria-controls="menu-v-4" value="10">
                 </div>
                 <!---->
               </div>