barati-ui

@barati/ui

یک کتابخانه کامپوننت Vue 3 ساخته‌شده با Vite + Tailwind CSS. فعلاً شامل یک کامپوننت Button با کلی قابلیت است.

نصب

npm install @barati/ui

نیازمندی: پروژه شما باید vue@3 داشته باشد.

استفاده سریع

استایل‌ها به‌صورت خودکار هنگام import تزریق می‌شوند (نیازی به import جدا نیست):

<script setup>
import { Button } from '@barati/ui'
</script>

<template>
  <Button variant="gradient" size="lg" glow glossy>
    دکمه شگفت‌انگیز ✨
  </Button>
  <Button variant="danger" :badge="7">حذف</Button>
  <Button variant="primary" loading loading-text="در حال ذخیره...">ذخیره</Button>
</template>

روش دوم (اگر خودت می‌خواهی CSS را جدا مدیریت کنی)

import { Button } from '@barati/ui'
import '@barati/ui/style.css'

نصب سراسری کامپوننت

import { createApp } from 'vue'
import BaratiUI from '@barati/ui'

createApp(App).use(BaratiUI).mount('#app')
// حالا <Button> و <CButton> سراسری در دسترس است

مثال‌ها

<!-- لینک -->
<Button href="https://vuejs.org" target="_blank">برو به Vue</Button>

<!-- آیکون (متن/ایموجی یا slot) -->
<Button icon="🚀">شروع</Button>
<Button icon-position="right" icon="➡️">ادامه</Button>
<Button>
  <template #icon>
    <svg ... />
  </template>
  با آیکون SVG
</Button>

<!-- حالت‌ها -->
<Button disabled>غیرفعال</Button>
<Button loading loading-text="لطفاً صبر کنید...">دکمه</Button>
<Button :loading="isSaving">ذخیره</Button>

<!-- بج و نشان -->
<Button variant="info" :badge="count" badge-max="99">اعلان‌ها</Button>
<Button variant="dark" badge-type="dot">نقطه آنلاین</Button>

<!-- افکت‌ها -->
<Button glow>درخشش</Button>
<Button glossy>جلای عبور نور</Button>
<Button lift>بالا می‌آید</Button>
<Button :ripple="true">ریپل آب</Button>

<!-- اندازه و شکل -->
<Button size="xs">XS</Button>
<Button size="2xl">XXL</Button>
<Button rounded="full">کپسولی</Button>
<Button rounded="none">گوشه تیز</Button>

<!-- کل عرض -->
<Button full-width>تمام عرض</Button>

Props

Slots و Events

اجرای پروژه به‌صورت محلی (Development)

npm install
npm run dev      # playground دمو
npm run build    # ساخت خروجی نهایی در dist/

تست پکیج قبل از انتشار (npm link)

در پوشه همین پکیج:

npm link

سپس در پروژه دیگر:

npm link @barati/ui

بعدش به‌صورت عادی:

import { Button } from '@barati/ui'

انتشار روی npm

npm login
npm publish --access public

توجه: چون نام پکیج scope شده (@barati/ui) است، برای داخل npm باید با --access public منتشر شود (مگر اینکه حساب سازمانی داشته باشید).

لایسنس

MIT