refactor(demo): add usePrimeInputs

Author: sfxcode

dev/components/demo/PrimeInput.vue

@@ -27,6 +27,7 @@ const formData = ref(props.data)
 
 const documentationLink = `https://primevue.org/${props.header.replace('Prime', '').toLowerCase()}`
 const inputClass = 'p-button p-component p-formkit-button'
+
 async function submitHandler() {
   showMessage('success', 'Form Submitted ...', `${props.header} submitted successfully`)
 }
@@ -39,7 +40,7 @@ async function submitHandler() {
       {{ header }}
     </h2>
     <slot />
-    <div class="flex flex-wrap">
+    <div class="flex gap-8 flex-wrap">
       <div class="min-w-32rem basis-1/2 xl:basis-1/3">
         <div class="p-formkit-data-edit">
           <FormKit

dev/modules/primevue.ts

@@ -5,81 +5,34 @@ import TabPanels from 'primevue/tabpanels'
 import TabPanel from 'primevue/tabpanel'
 import MegaMenu from 'primevue/megamenu'
 import Ripple from 'primevue/ripple'
+import Toast from 'primevue/toast'
 import Toolbar from 'primevue/toolbar'
-
-import AutoComplete from 'primevue/autocomplete'
-import CascadeSelect from 'primevue/cascadeselect'
-import Checkbox from 'primevue/checkbox'
-import Chip from 'primevue/chip'
-import ColorPicker from 'primevue/colorpicker'
-import DatePicker from 'primevue/datepicker'
-import Editor from 'primevue/editor'
-import InputMask from 'primevue/inputmask'
-import InputNumber from 'primevue/inputnumber'
-import InputOtp from 'primevue/inputotp'
-import InputText from 'primevue/inputtext'
-import Knob from 'primevue/knob'
-import Listbox from 'primevue/listbox'
-import MultiSelect from 'primevue/multiselect'
-import Password from 'primevue/password'
-import RadioButton from 'primevue/radiobutton'
-import Rating from 'primevue/rating'
-import Select from 'primevue/select'
-import SelectButton from 'primevue/selectbutton'
-import Slider from 'primevue/slider'
-import Textarea from 'primevue/textarea'
-import ToggleButton from 'primevue/togglebutton'
-import ToggleSwitch from 'primevue/toggleswitch'
-import TreeSelect from 'primevue/treeselect'
+import Tooltip from 'primevue/tooltip'
 
 import 'primeicons/primeicons.css'
-import Aura from '@primevue/themes/aura'
 
+import Aura from '@primevue/themes/aura'
 import PrimeVue from 'primevue/config'
-// directives
-import Tooltip from 'primevue/tooltip'
 
 // services
-import ConfirmationService from 'primevue/confirmationservice'
 
+import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Button from 'primevue/button'
-import Toast from 'primevue/toast'
+import { usePrimeInputs } from '../../src/composables'
 import type { UserModule } from '@/types'
 
 export const install: UserModule = ({ app }) => {
   // directives
   app.directive('ripple', Ripple)
   app.directive('tooltip', Tooltip)
-  app.component('Button', Button)
 
   // input components
-  app.component('AutoComplete', AutoComplete)
-  app.component('CascadeSelect', CascadeSelect)
-  app.component('Checkbox', Checkbox)
-  app.component('Chip', Chip)
-  app.component('ColorPicker', ColorPicker)
-  app.component('DatePicker', DatePicker)
-  app.component('Editor', Editor)
-  app.component('InputMask', InputMask)
-  app.component('InputNumber', InputNumber)
-  app.component('InputOtp', InputOtp)
-  app.component('InputText', InputText)
-  app.component('Knob', Knob)
-  app.component('Listbox', Listbox)
-  app.component('MultiSelect', MultiSelect)
-  app.component('Password', Password)
-  app.component('RadioButton', RadioButton)
-  app.component('Rating', Rating)
-  app.component('Select', Select)
-  app.component('SelectButton', SelectButton)
-  app.component('Slider', Slider)
-  app.component('Textarea', Textarea)
-  app.component('ToggleButton', ToggleButton)
-  app.component('ToggleSwitch', ToggleSwitch)
-  app.component('TreeSelect', TreeSelect)
+  const { registerInputs } = usePrimeInputs()
+  registerInputs(app)
 
   // other components
+  app.component('Button', Button)
   app.component('MegaMenu', MegaMenu)
   app.component('Tab', Tab)
   app.component('Tabs', Tabs)

dev/vite.config.ts

@@ -47,27 +47,11 @@ export default defineConfig({
     Unocss(),
     Vue({
       include: [/\.vue$/, /\.md$/],
-      template: {
-        compilerOptions: {
-          directiveTransforms: {
-            styleclass: () => ({
-              props: [],
-              needRuntime: true,
-            }),
-            ripple: () => ({
-              props: [],
-              needRuntime: true,
-            }),
-          },
-        },
-      },
     }),
 
     Components({
       dirs: ['components'],
       dts: 'components.d.ts',
-      resolvers: [
-      ],
     }),
 
     AutoImport({