@x-app/nuxt-layouts

@x-app/nuxt-layouts

مكونات واجهة قابلة لإعادة الاستخدام في مشاريع Nuxt 3 وNuxt 4.

التثبيت

npm install @x-app/nuxt-layouts @x-app/easy-css @nuxt/icon

تعتمد الحزمة على @x-app/easy-css، لذلك تُثبت تلقائيًا. يجب على المشروع المستهلك تحميل stylesheet الخاص بها في إعداد Nuxt:

export default defineNuxtConfig({
  css: ["@x-app/easy-css/dist/easy-css.css"],
  modules: ["@nuxt/icon", "@x-app/nuxt-layouts"],
});

تحتاج المكونات التي تعرض الأيقونات إلى @nuxt/icon مسجلًا في modules كما في المثال.

الاستخدام

تُسجل المكونات تلقائيًا بالبادئة Layouts:

<template>
  <LayoutsContainer title="المحتوى">
    <LayoutsBtn label="حفظ" />
  </LayoutsContainer>
</template>

المكونات المتاحة: LayoutsBottomDrawer, LayoutsBtn, LayoutsCircularProgress, LayoutsContainer, LayoutsHeader, LayoutsLoader, LayoutsNavBar, LayoutsPagination, LayoutsPopup, LayoutsSiteMenu, وLayoutsTabs.

يمكن استيراد أي مكون يدويًا عند الحاجة:

<script setup>
import LayoutsBtn from "@x-app/nuxt-layouts/components/Btn";
</script>

<template>
  <LayoutsBtn label="متابعة" />
</template>

Header

لا تعتمد LayoutsHeader على Pinia. عند استخدام أيقونة القائمة الافتراضية، يرسل المكون حدث rightIconAction؛ اربطه لفتح القائمة الخاصة بتطبيقك:

<script setup>
function openMenu() {
  // افتح قائمة التطبيق هنا
}
</script>

<template>
  <LayoutsHeader title="الرئيسية" @right-icon-action="openMenu" />
</template>

كما يرسل leftIconAction وtitleAction للأزرار والعنوان المقابلين.

التطوير والبناء

npm install
npm run build

ينشئ البناء ملفات dist التي تتضمنها الحزمة عند تجهيزها للنشر على npm.

تجربة المكونات محليًا

يوجد تطبيق تجريبي في مجلد playground يستهلك هذه الحزمة محليًا ويعرض أمثلة للمكونات والتكامل مع Easy CSS وIconify:

cd ..
npm install
npm run build

cd playground
npm install
npm run dev

يبني الأمر داخل playground الوحدة مجددًا قبل بدء تطبيق Nuxt التجريبي، لتظهر أي تغييرات حديثة على المكونات.