web-ui-document

Appearance

Bilmemiz Gerekenler ​

Form Builder'ın dört ana modülü vardır:

  • Builder
  • Render
  • Control Parameters
  • Module Federation

Builder ​

Bu bölümde kullanıcı, sol sidebar'da bulunan sürüklenebilir elementleri alıp ana form alanına bırakır. Formun içindeki alanda elementlerin yerleri değiştirilebilir veya elementin üzerine tıklayarak elemente özel yapılandırmalara erişilebilir.

Build Or View Option

Render ​

Bu bölümde, kullanıcının oluşturduğu validation condition ve diğer özelliklere göre formun önizleme alanıdır.

Build Or View Option

Control Parameters ​

Bir formun elementlerinin özelliklerini tanımlayabilir ve diğer elementler ve formlarla ilişki kurabilirsiniz.

Module Federation ​

Projenin /src/modules/form-builder klasörü içinde tüm Form Builder'a ait yapı bulunmaktadır ve hepsi /src/modules/form-builder/FormBuilder.vue üzerinden ayağa kalkmaktadır.

Module Federation kullanarak FormBuilder'ı şu şekilde export ederiz (dependency bölümünde hangi porttan ulaşılabileceğine bakabilirsiniz):

json
federation({
    name: 'remote-app',
    filename: 'remoteEntry.js',
    // Açığa çıkacak modüller
    exposes: {
        './FormBuilder': './src/modules/form-builder/FormBuilder.vue',
    },
    shared: ['vue', 'pinia']
})