Disable autoimport to avoid prefix

apps/labs/doc/inputtext/BasicDoc.vue

@@ -3,13 +3,13 @@
         <p>InputText is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" />
+        <InputText v-model="value" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" />
+        <InputText v-model="value" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);

apps/labs/doc/inputtext/DisabledDoc.vue

@@ -3,13 +3,13 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" disabled placeholder="Disabled" />
+        <InputText v-model="value" disabled placeholder="Disabled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" disabled placeholder="Disabled" />
+        <InputText v-model="value" disabled placeholder="Disabled" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);

apps/labs/doc/inputtext/FilledDoc.vue

@@ -3,13 +3,13 @@
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" variant="filled" />
+        <InputText v-model="value" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" variant="filled" />
+        <InputText v-model="value" variant="filled" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);

apps/labs/doc/inputtext/HelpTextDoc.vue

@@ -3,13 +3,13 @@
         <p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" type="text" />
+        <InputText v-model="value" type="text" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" type="text" />
+        <InputText v-model="value" type="text" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);

apps/labs/doc/inputtext/ImportDoc.vue

@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 `
         };
     }

apps/labs/doc/inputtext/InvalidDoc.vue

@@ -3,13 +3,13 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" :invalid="!value" placeholder="Name" />
+        <InputText v-model="value" :invalid="!value" placeholder="Name" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref('');
@@ -17,12 +17,12 @@ const value = ref('');
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" :invalid="!value" placeholder="Name" />
+        <InputText v-model="value" :invalid="!value" placeholder="Name" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);

apps/labs/doc/inputtext/SizesDoc.vue

@@ -3,15 +3,15 @@
         <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
-        <PlexInputText v-model="value1" type="text" size="small" placeholder="Small" />
-        <PlexInputText v-model="value2" type="text" placeholder="Normal" />
-        <PlexInputText v-model="value3" type="text" size="large" placeholder="Large" />
+        <InputText v-model="value1" type="text" size="small" placeholder="Small" />
+        <InputText v-model="value2" type="text" placeholder="Normal" />
+        <InputText v-model="value3" type="text" size="large" placeholder="Large" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value1 = ref(null);
@@ -21,14 +21,14 @@ const value3 = ref(null);
 const code = ref(`
 <template>
     <div class="card flex flex-col items-center gap-4">
-        <PlexInputText v-model="value1" type="text" size="small" placeholder="Small" />
-        <PlexInputText v-model="value2" type="text" placeholder="Normal" />
-        <PlexInputText v-model="value3" type="text" size="large" placeholder="Large" />
+        <InputText v-model="value1" type="text" size="small" placeholder="Small" />
+        <InputText v-model="value2" type="text" placeholder="Normal" />
+        <InputText v-model="value3" type="text" size="large" placeholder="Large" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value1 = ref(null);

apps/labs/doc/slider/BasicDoc.vue

@@ -3,13 +3,13 @@
         <p>Slider is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" class="w-56" />
+        <Slider v-model="value" class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" class="w-56" />
+        <Slider v-model="value" class="w-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(null);

apps/labs/doc/slider/FilterDoc.vue

@@ -3,13 +3,13 @@
         <p>Image filter implementation using multiple sliders.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" class="w-56" />
+        <Slider v-model="value" class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" class="w-56" />
+        <Slider v-model="value" class="w-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(null);

apps/labs/doc/slider/ImportDoc.vue

@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 `
         };
     }

apps/labs/doc/slider/InputDoc.vue

@@ -4,16 +4,16 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <div class="w-56">
-            <PlexInputText v-model.number="value" class="w-full mb-4" />
-            <PlexSlider v-model="value" class="w-full" />
+            <InputText v-model.number="value" class="w-full mb-4" />
+            <Slider v-model="value" class="w-full" />
         </div>
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
-import PlexSlider from '@/plex/slider';
+import InputText from '@/plex/inputtext';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
@@ -21,14 +21,14 @@ const value = ref(50);
 const code = ref(`
 <div class="card flex justify-center">
     <div class="w-56">
-        <PlexInputText v-model.number="value" class="w-full mb-4" />
-        <PlexSlider v-model="value" class="w-full" />
+        <InputText v-model.number="value" class="w-full mb-4" />
+        <Slider v-model="value" class="w-full" />
     </div>
 </div>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
-import PlexSlider from '@/plex/slider';
+import InputText from '@/plex/inputtext';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(50);

apps/labs/doc/slider/RangeDoc.vue

@@ -3,13 +3,13 @@
         <p>When <i>range</i> property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" range class="w-56" />
+        <Slider v-model="value" range class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref([20, 80]);
@@ -17,12 +17,12 @@ const value = ref([20, 80]);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" range class="w-56" />
+        <Slider v-model="value" range class="w-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref([20, 80]);

apps/labs/doc/slider/StepDoc.vue

@@ -3,13 +3,13 @@
         <p>Size of each movement is defined with the <i>step</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" :step="20" class="w-56" />
+        <Slider v-model="value" :step="20" class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(20);
@@ -17,12 +17,12 @@ const value = ref(20);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" :step="20" class="w-56" />
+        <Slider v-model="value" :step="20" class="w-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(20);

apps/labs/doc/slider/VerticalDoc.vue

@@ -3,13 +3,13 @@
         <p>Default layout of slider is <i>horizontal</i>, use <i>orientation</i> property for the alternative <i>vertical</i> mode.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" orientation="vertical" class="h-56" />
+        <Slider v-model="value" orientation="vertical" class="h-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
@@ -17,12 +17,12 @@ const value = ref(50);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" orientation="vertical" class="h-56" />
+        <Slider v-model="value" orientation="vertical" class="h-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(50);

apps/labs/doc/textarea/AutoResizeDoc.vue

@@ -3,13 +3,13 @@
         <p>When <i>autoResize</i> is enabled, textarea grows instead of displaying a scrollbar.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" autoResize rows="5" cols="30" />
+        <Textarea v-model="value" autoResize rows="5" cols="30" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" autoResize rows="5" cols="30" />
+        <Textarea v-model="value" autoResize rows="5" cols="30" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);

apps/labs/doc/textarea/BasicDoc.vue

@@ -3,13 +3,13 @@
         <p>Textarea is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" class="resize-none" />
+        <Textarea v-model="value" rows="5" cols="30" class="resize-none" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" class="resize-none" />
+        <Textarea v-model="value" rows="5" cols="30" class="resize-none" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);

apps/labs/doc/textarea/DisabledDoc.vue

@@ -3,13 +3,13 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
+        <Textarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
      <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
+        <Textarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);

apps/labs/doc/textarea/FilledDoc.vue

@@ -3,13 +3,13 @@
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" variant="filled" />
+        <Textarea v-model="value" rows="5" cols="30" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" variant="filled" />
+        <Textarea v-model="value" rows="5" cols="30" variant="filled" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);

apps/labs/doc/textarea/HelpTextDoc.vue

@@ -3,13 +3,13 @@
         <p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" type="text" />
+        <InputText v-model="value" type="text" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" type="text" />
+        <InputText v-model="value" type="text" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);

apps/labs/doc/textarea/ImportDoc.vue

@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 `
         };
     }

apps/labs/doc/textarea/InvalidDoc.vue

@@ -3,13 +3,13 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref('');
@@ -17,12 +17,12 @@ const value = ref('');
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);

apps/labs/doc/textarea/SizesDoc.vue

@@ -3,15 +3,15 @@
         <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
-        <PlexTextarea v-model="value1" size="small" placeholder="Small" rows="3" />
-        <PlexTextarea v-model="value2" placeholder="Normal" rows="3" />
-        <PlexTextarea v-model="value3" size="large" placeholder="Large" rows="3" />
+        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <Textarea v-model="value2" placeholder="Normal" rows="3" />
+        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value1 = ref(null);
@@ -21,14 +21,14 @@ const value3 = ref(null);
 const code = ref(`
 <template>
 <div class="card flex flex-col items-center gap-4">
-        <PlexTextarea v-model="value1" size="small" placeholder="Small" rows="3" />
-        <PlexTextarea v-model="value2" placeholder="Normal" rows="3" />
-        <PlexTextarea v-model="value3" size="large" placeholder="Large" rows="3" />
+        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <Textarea v-model="value2" placeholder="Normal" rows="3" />
+        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value1 = ref(null);

apps/labs/nuxt.config.js

@@ -34,6 +34,9 @@ export default defineNuxtConfig({
     runtimeConfig: {
         GITHUB_TOKEN: ''
     },
+    primevue: {
+        autoImport: false
+    },
     app: {
         baseURL: baseUrl,
         head: {