Finoku Components TypeScript

TypeScript ve Vue 3 ile geliştirilmiş, modern ve özelleştirilebilir UI bileşen kütüphanesi.

Özellikler

• 🎨 Modern ve özelleştirilebilir tasarım
• 📦 Hafif paket boyutu
• 🔍 Erişilebilirlik (a11y) desteği
• 🌗 Tema desteği (açık/koyu)
• 📱 Responsive tasarım
• 🚀 Vue 3 Composition API desteği
• 🔒 Tam TypeScript desteği
• 📄 Detaylı tip tanımlamaları

Kurulum

# npm ile
npm install finoku-components-typescript

# yarn ile
yarn add finoku-components-typescript

# pnpm ile
pnpm add finoku-components-typescript

Temel Kullanım

PrimeVue'den ilham alınarak tasarlanmış, tek bir import ile tüm bileşenleri kullanıma sunuyoruz.

import { createApp } from 'vue'
import App from './App.vue'
import { Finoku } from 'finoku-components-typescript'
import 'finoku-components-typescript/dist/style.css' // CSS dosyasını import edin

const app = createApp(App)

// Varsayılan ayarlarla
app.use(Finoku)

// veya özel ayarlarla (tüm özellikler opsiyonel)
app.use(Finoku, {
  ripple: true,
  theme: 'light', // 'light' veya 'dark'
  inputStyle: 'outlined', // 'outlined' veya 'filled'
  zIndex: { // Z-indeks değerleri
    modal: 1100,
    overlay: 1000,
    menu: 1000,
    tooltip: 1100
  }
})

app.mount('#app')

Bileşenler

CustomButton

Çeşitli varyantları, boyutları ve durumları destekleyen genel amaçlı düğme bileşeni.

<template>
  <CustomButton label="Tıkla" variant="primary" @click="handleClick" />
  <CustomButton variant="success" rounded>Kaydet</CustomButton>
  <CustomButton variant="danger" :loading="isLoading">Sil</CustomButton>
</template>

Props

| Prop | Tip | Varsayılan | Açıklama | |----------|----------|-------------|---------------------------------------------------------| | label | String | '' | Düğme içinde gösterilecek metin | | variant | String | 'primary' | Düğme varyantı (primary, secondary, success, danger, warning, info, text) | | size | String | 'medium' | Düğme boyutu (small, medium, large) | | rounded | Boolean | false | Tam yuvarlak düğme görünümü | | disabled | Boolean | false | Düğmeyi devre dışı bırakır | | loading | Boolean | false | Düğmeyi yükleniyor durumuna geçirir | | icon | String | '' | Düğmeye eklenecek ikon sınıfı (örn: 'f-icon-edit') |

Events

| Event | Parametreler | Açıklama | |-----------|--------------|---------------------------------------------| | click | event: Event | Düğmeye tıklandığında tetiklenir |

CustomNotification

Kullanıcıya bildirimler göstermek için kullanılan bileşen.

<template>
  <CustomButton @click="showNotification">Bildirim Göster</CustomButton>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    showNotification() {
      this.$finoku.notification({
        title: 'Başarılı!',
        message: 'İşlem başarıyla tamamlandı.',
        type: 'success',
        duration: 3000
      });
    }
  }
});
</script>

Programatik Kullanım

// Basit kullanım
this.$finoku.notification({
  title: 'Bilgi',
  message: 'Bu bir bilgi mesajıdır',
  type: 'info'
});

// Kısa yollar
this.$finoku.success({ message: 'İşlem başarılı!' });
this.$finoku.error({ message: 'Bir hata oluştu!' });
this.$finoku.warning({ message: 'Dikkat!' });
this.$finoku.info({ message: 'Bilgilendirme' });

Composition API ile Kullanım

<script setup lang="ts">
import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance()!;

function showNotification() {
  proxy?.$finoku.success({
    title: 'Başarılı!',
    message: 'İşlem başarıyla tamamlandı.'
  });
}
</script>

Props

| Prop | Tip | Varsayılan | Açıklama | |----------|----------|-------------|------------------------------------------------| | title | String | '' | Bildirim başlığı | | message | String | '' | Bildirim mesajı | | type | String | 'info' | Bildirim tipi (info, success, warning, error) | | duration | Number | 3000 | Bildirimin ekranda kalma süresi (ms) | | closable | Boolean | true | Kapatma butonu gösterme | | showIcon | Boolean | true | Tip simgesini gösterme |

Özelleştirme

Bileşenlerin görünümünü CSS değişkenleriyle özelleştirebilirsiniz:

:root {
  --f-primary-color: #3498db;
  --f-secondary-color: #95a5a6;
  --f-success-color: #2ecc71; 
  --f-danger-color: #e74c3c;
  --f-warning-color: #f39c12;
  --f-info-color: #3498db;
}

TypeScript Desteği

Kütüphane, tam TypeScript desteği sağlar ve otomatik tip tanımlamaları ile gelir. Bu sayede bileşen prop'ları, API'lar ve diğer özellikler için IDE otomatik tamamlama ve tip kontrolü alabilirsiniz.

// Tip güvenli bileşen kullanımı
<CustomButton 
  variant="primary" // otomatik tamamlama ve kontrol
  size="medium"     // geçersiz değerler için uyarı
  :disabled="false"
/>

// Tip güvenli programatik API kullanımı
this.$finoku.notification({
  type: 'success', // otomatik tamamlama ve kontrol
  duration: 3000   // tip güvenliği
});

Tarayıcı Desteği

• Chrome (son 2 sürüm)
• Firefox (son 2 sürüm)
• Safari (son 2 sürüm)
• Edge (son 2 sürüm)

Geliştirme

# Bağımlılıkları yükleyin
npm install

# Geliştirme sunucusunu başlatın
npm run dev

# Üretim için derleyin
npm run build

# Tip kontrolü yapın
npm run type-check

Lisans

MIT