VCom UI Utilities

VCom UI Utilities; jQuery tabanlı, kullanıcı arayüzünü kolayca yönetebilmenizi sağlayan bir yardımcı fonksiyonlar setidir. Croppie, Toastify, SweetAlert ve BlockUI gibi 3rd-party kütüphanelerle entegre çalışır. Projede; form temizleme, AJAX işlemleri, toast bildirimleri, modal yönetimi ve görsel kırpma gibi birçok işlevsellik bulunmaktadır.

📦 Kurulum

npm install vcomjs

Ya da statik dosyalarla çalışıyorsanız gerekli script ve link etiketlerini HTML dosyanıza ekleyebilirsiniz.

📦 Kullanılan Kütüphaneler

• jQuery
• jquery-blockui
• Toastify JS
• Croppie
• Bootstrap Modal (resim kesme işlemi için)

🚀 Genel Fonksiyonlar

🧊 1. Block UI

BlockStart();  // Yükleme başlatılır
BlockStop();   // Yükleme durdurulur

🔔 2. Toast Bildirimleri

ToastOpen("bg-success", "İşlem başarılı", "Başlık");
AddNotif("Uyarı mesajı");

🧼 3. Form Yardımcıları

ClearForm("#myForm");             // Form içeriğini temizler
GetFormDataAsJSON("#myForm");     // Form verisini JSON objesi olarak döner

🪟 4. Modal İşlemleri

(Tailwind CSS ile uyumludur)

OpenModal("#myModal");
CloseModal("#myModal");

🔄 5. Dinamik İçerik Yükleme

Loading:

    var data = GetFormDataAsJSON($('#formId'));
    data.parametre = a;
    var url = '/home/partial';
    var target = '#divId';
    DivLoad(target, data, url).then(res => {
        if (res === "Success") {
            // Yükleme sonrası işlemler
        }
    });

loader yok:

    var data = GetFormDataAsJSON($('#formId'));
    data.parametre = a;
    var url = '/home/partial';
    var target = '#divId';
    DivNoLoading(target, data, url).then(data => {
        if (data === "Success") {
            // Yükleme sonrası işlemler
        }
    });

📨 6. Veri Ekleme / Gönderme

    var Object = GetFormDataAsJSON($('#formId'));
    AppAdd(Object, "/SaveData").then((data) => {
        if (data.status == "Success") {
            // İşlem başarılıysa yapılacaklar
        }
    });

📤 7. Dosya Yükleme

var formData = new FormData();
formData.append("file", $('#fileInput')[0].files[0]);
AddCollection(formData, "/UploadFile").then((data) => {
        if (data.status == "Success") {
            // İşlem başarılıysa yapılacaklar
        }
 });

✅ 8. Onaylı İşlemler (SweetAlert ile)

AppConfirm({ id: 123 }, "/DeleteItem", "Silinecek", "Emin misiniz?")
  .then(data => {
    if (data === "Success") {
        // Silme başarılı
    }
});

🖼️ 9. Görsel Kırpma (Croppie)

📌 Kaydederek kırp:

ImageCrop("#cropperId", "#modalId");

👁️ Sadece önizleme:

ImageCropDontSave("#cropperId", "#modalId");

Not: #Attachment ID'sine sahip bir input tetikleyici olarak kullanılmalıdır. Croppie ayarları içerisinde viewport boyutları ve kesme alanı tanımlanmalıdır.

💡 Ekstra Bilgi

SaveImg() fonksiyonu örneklerde yer almaz, resmi kaydetmek için ayrıca tanımlanmalıdır.

Tüm fonksiyonlar modüler yapıdadır; istenilen dosyadan import edilerek kullanılabilir.

✉️ İletişim

Her türlü soru, görüş ve katkı için proje geliştiricisiyle iletişime geçebilirsiniz.

📝 Lisans

MIT Lisansı