Merge branch 'master' into production

Author: kevinkosterr

apps/docs/.vitepress/config.js

@@ -48,7 +48,8 @@ export default defineConfig({
         text: 'Form Generator',
         items: [
           { text: 'Props', link: '/guide/form-generator/props' },
-          { text: 'Events', link: '/guide/form-generator/events' }
+          { text: 'Events', link: '/guide/form-generator/events' },
+          { text: 'Plugin options', link: '/guide/form-generator/plugin-options' }
         ]
       },
       {

apps/docs/guide/form-generator/plugin-options.md

@@ -0,0 +1,66 @@
+These are options you can pass to the plugin when installing it into your app.
+
+## Usage
+
+```ts
+import VueFormGenerator from '@kevinkosterr/vue3-form-generator'
+
+app.use(
+  VueFormGenerator,
+  {} // Your options go here.
+)
+```
+
+## `aliases`
+> An object where the component names are the keys and their aliases are its values.
+```ts
+{
+  aliases: {
+    'FieldText': 'FieldTextInput'
+  }
+}
+```
+When defining something like this, the `type` inside a schema changes to everything 
+after `"Field"`, so in this example a new schema would look like this:
+```ts
+{
+  type: 'textinput',
+  // Other code...
+}
+```
+
+## `components`
+> An array of objects with two properties, `name` and `component` where name is the name of the component (must start with `"Field"`)
+> and component is the component instance.
+```ts
+import FieldTest from '@/components/FieldTest.vue'
+
+{
+  components: [
+    {
+      name: 'FieldTest',
+      component: FieldTest
+    }
+  ]
+}
+```
+
+## `excludedComponents`
+> An array of field component names to exclude from the global components, this makes it
+> so the components can't be used inside your forms.
+```ts
+{
+  excludedComponents: [ 'FieldObject', 'FieldNumber' ]
+}
+```
+
+## `messages`
+> An object where the keys are the validator function names and the values its error messages.
+> This is for showing specific messages for your custom or existing components.
+```ts
+{
+  messages: { 
+    'yourcustomvalidator': 'This is not valid, man!'
+  }
+}
+```

src/fields/core/FieldSelect.vue

@@ -88,12 +88,13 @@ const { hint } = useFieldAttributes(model.value, field.value)
 const selectedNames: ComputedRef<string[]> = computed(() => {
   if (!currentModelValue.value) return []
 
-  const findOptionName = (option: FieldOption) => field.value.options.find(o => o.value === option.value)?.name ?? ''
+  const findOptionName = (value: string) => field.value.options.find(o => o.value === value)?.name ?? false
 
   if (Array.isArray(currentModelValue.value) && field.value.multiple) {
-    return currentModelValue.value.map(o => findOptionName(o))
+    return currentModelValue.value.map(findOptionName).filter(o => o !== false)
   } else {
-    return [ field.value.options.find(o => o.value === currentModelValue.value)?.name ?? '' ]
+    const optionName = findOptionName(currentModelValue.value)
+    return optionName ? [ optionName ] : []
   }
 })
 

src/fields/index.ts

@@ -1,7 +1,7 @@
 import { App, Component } from 'vue'
+import type { FieldPluginOptions } from '@/resources/types/generic'
 
 import FieldText from '@/fields/core/FieldText.vue'
-import FieldCheckBox from '@/fields/core/FieldCheckbox.vue'
 import FieldPassword from '@/fields/core/FieldPassword.vue'
 import FieldSelect from '@/fields/core/FieldSelect.vue'
 import FieldSelectNative from '@/fields/core/FieldSelectNative.vue'
@@ -21,20 +21,22 @@ import FieldButton from '@/fields/core/FieldButton.vue'
 
 
 const fieldComponents = {
-  FieldColor, FieldText, FieldCheckBox, FieldPassword, FieldSelect, FieldSelectNative, FieldRadio,
-  FieldNumber, FieldSubmit, FieldReset, FieldButton, FieldSwitch, FieldTextarea, FieldMask, FieldChecklist,
-  FieldCheckbox, FieldObject
+  FieldColor, FieldText, FieldPassword, FieldSelect, FieldSelectNative, FieldRadio, FieldNumber, FieldSubmit,
+  FieldReset, FieldButton, FieldSwitch, FieldTextarea, FieldMask, FieldChecklist, FieldCheckbox, FieldObject
 } as const
 
 type FieldComponentNames = keyof typeof fieldComponents
 
 export default {
-  install (app: App, aliases: Partial<Record<FieldComponentNames, string>>) {
+  install (app: App, options: FieldPluginOptions) {
     const componentEntries = Object.entries(fieldComponents) as [FieldComponentNames, Component][]
+    const isExcluded = (componentName: string) => options.excludedComponents ? options.excludedComponents.includes(componentName) : false
 
     for (const [ name, component ] of componentEntries) {
-      const alias: string | undefined = aliases[name]
-      app.component(alias ?? name, component)
+      if (!isExcluded(name)) {
+        const alias: string | undefined = options.aliases ? options.aliases[name] : undefined
+        app.component(alias ?? name, component)
+      }
     }
   }
 }

src/index.ts

@@ -1,5 +1,5 @@
 import { App } from 'vue'
-import { PluginOptions } from '@/resources/types/generic'
+import { FieldPluginOptions, PluginOptions } from '@/resources/types/generic'
 
 import { setMessages } from '@/validators/messages'
 import { isObject } from '@/helpers'
@@ -19,7 +19,10 @@ const VueFormGenerator = {
   install (app: App, options: PluginOptions) {
     if (!options) options = {}
 
-    app.use(FormGeneratorFields, options.aliases ?? {})
+    const fieldOptions: FieldPluginOptions = {
+      aliases: options.aliases, excludedComponents: options.excludedComponents
+    }
+    app.use(FormGeneratorFields, fieldOptions)
     app.component('VueFormGenerator', FormGenerator)
 
     if (options.messages !== undefined && isObject(options.messages)) {

src/resources/types/generic.ts

@@ -14,6 +14,12 @@ export type PluginOptions = {
   aliases?: Record<string, string>;
   messages?: Record<string, string>;
   components?: PluginComponentOption[];
+  excludedComponents?: string[];
+}
+
+export type FieldPluginOptions = {
+  aliases?: PluginOptions['aliases'];
+  excludedComponents?: PluginOptions['excludedComponents'];
 }
 
 export type FormGeneratorSchema = {

tests/components/fields/FieldSelect.spec.js

@@ -82,10 +82,13 @@ describe('FieldSelect', () => {
     await fieldSelect.vm.$nextTick()
     await fieldSelect.find('.vfg-select-option').trigger('click')
     expect(formWrapper.vm.model.selectModel.length).toBe(1)
+    expect(fieldSelect.find('.vfg-select-label').find('span').element.innerHTML).toContain('Test 1')
 
     await fieldSelect.find('.vfg-select-label').trigger('click')
     await fieldSelect.vm.$nextTick()
     await fieldSelect.findAll('.vfg-select-option')[2].trigger('click')
+    await fieldSelect.vm.$nextTick()
+    expect(fieldSelect.find('.vfg-select-label').find('span').element.innerHTML).toContain('Test 3')
     expect(formWrapper.vm.model.selectModel.length).toBe(2)
   })