@amirjalili1374/ui-kit 1.2.3 → 1.3.0

package/README.md

@@ -63,7 +63,14 @@ You can import components individually for better tree-shaking:
 
 ```vue
 <script setup lang="ts">
-import { CustomDataTable, BaseIcon, ShamsiDatePicker } from '@amirjalili1374/ui-kit';
+import { 
+  CustomDataTable, 
+  BaseIcon, 
+  ShamsiDatePicker,
+  AppSidebar,
+  AppHeader
+} from '@amirjalili1374/ui-kit';
+import type { MenuItem, HeaderAction } from '@amirjalili1374/ui-kit';
 </script>
 
 <template>
@@ -72,6 +79,77 @@ import { CustomDataTable, BaseIcon, ShamsiDatePicker } from '@amirjalili1374/ui-
 </template>
 ```
 
+### Use Layout Components (Sidebar & Header)
+
+```vue
+<script setup lang="ts">
+import { AppSidebar, AppHeader, useCustomizerStore } from '@amirjalili1374/ui-kit';
+import type { MenuItem, HeaderAction } from '@amirjalili1374/ui-kit';
+
+const customizer = useCustomizerStore();
+
+// Define menu items
+const menuItems: MenuItem[] = [
+  {
+    title: 'داشبورد',
+    icon: 'mdi-home',
+    to: '/dashboard'
+  },
+  {
+    title: 'کاربران',
+    icon: 'mdi-account-group',
+    items: [
+      { title: 'لیست کاربران', icon: 'mdi-account-multiple', to: '/users' },
+      { title: 'افزودن کاربر', icon: 'mdi-account-plus', to: '/users/create' }
+    ]
+  },
+  {
+    title: 'تنظیمات',
+    icon: 'mdi-cog',
+    to: '/settings',
+    chip: { content: '3', color: 'error' }
+  }
+];
+
+// Define header actions
+const headerActions: HeaderAction[] = [
+  {
+    icon: 'mdi-plus',
+    label: 'ایجاد',
+    color: 'primary',
+    onClick: () => console.log('Create clicked')
+  }
+];
+</script>
+
+<template>
+  <v-app>
+    <AppHeader
+      title="پنل مدیریت"
+      subtitle="خوش آمدید"
+      :menu-items="menuItems"
+      :actions="headerActions"
+      show-search
+      show-profile
+      profile-name="کاربر"
+      :profile-avatar="/avatar.jpg"
+    />
+    
+    <AppSidebar
+      :menu-items="menuItems"
+      logo="/logo.svg"
+      logo-light="/logo-light.svg"
+      logo-text="UI Kit"
+      :mini-sidebar="customizer.mini_sidebar"
+    />
+    
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
+```
+
 ### Use Composables
 
 ```typescript
@@ -191,6 +269,10 @@ const formatted = formatNumberWithCommas(1234567); // "1,234,567"
 - `AppStepper` - Step-by-step wizard component
 - `Loading` - Loading overlay component
 
+### Layout Components
+- `AppSidebar` - Navigation sidebar with menu items, logo, and mini sidebar support
+- `AppHeader` - Top header bar with search, notifications, profile menu, and custom actions
+
 ## Available Composables
 
 - `useDataTable` - Server-side data table with pagination and filtering

package/dist/components/layout/AppHeader.vue.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Header action button type
+ */
+export interface HeaderAction {
+    icon?: string;
+    label?: string;
+    color?: string;
+    variant?: string;
+    size?: string;
+    badge?: string | number;
+    badgeColor?: string;
+    onClick: () => void;
+    disabled?: boolean;
+    tooltip?: string;
+}
+interface Props {
+    title?: string;
+    subtitle?: string;
+    showSidebarToggle?: boolean;
+    showSearch?: boolean;
+    searchPlaceholder?: string;
+    searchValue?: string;
+    showNotifications?: boolean;
+    notificationCount?: number;
+    showProfile?: boolean;
+    profileAvatar?: string;
+    profileName?: string;
+    profileMenu?: Array<{
+        title: string;
+        icon?: string;
+        to?: string;
+        href?: string;
+        divider?: boolean;
+        action?: () => void;
+    }>;
+    actions?: HeaderAction[];
+    color?: string;
+    elevation?: number;
+    height?: number | string;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    search: (value: string) => any;
+    "update:searchValue": (value: string) => any;
+    "toggle-sidebar": () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSearch?: (value: string) => any;
+    "onUpdate:searchValue"?: (value: string) => any;
+    "onToggle-sidebar"?: () => any;
+}>, {
+    color: string;
+    height: string | number;
+    elevation: number;
+    actions: HeaderAction[];
+    showSidebarToggle: boolean;
+    showSearch: boolean;
+    searchPlaceholder: string;
+    showNotifications: boolean;
+    notificationCount: number;
+    showProfile: boolean;
+    profileMenu: {
+        title: string;
+        icon?: string;
+        to?: string;
+        href?: string;
+        divider?: boolean;
+        action?: () => void;
+    }[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=AppHeader.vue.d.ts.map

package/dist/components/layout/AppHeader.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/AppHeader.vue"],"names":[],"mappings":"AAoRA;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC,CAAC;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAonBD,wBAQG"}

package/dist/components/layout/AppSidebar.vue.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Menu item type definition
+ */
+export interface MenuItem {
+    title: string;
+    icon?: string;
+    to?: string;
+    href?: string;
+    items?: MenuItem[];
+    chip?: {
+        content: string | number;
+        color?: string;
+    };
+    divider?: boolean;
+    disabled?: boolean;
+}
+interface Props {
+    menuItems?: MenuItem[];
+    logo?: string;
+    logoLight?: string;
+    logoText?: string;
+    miniSidebar?: boolean;
+    permanent?: boolean;
+    temporary?: boolean;
+    rail?: boolean;
+    location?: 'left' | 'right';
+    width?: number | string;
+    railWidth?: number | string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    width: string | number;
+    location: "left" | "right";
+    menuItems: MenuItem[];
+    miniSidebar: boolean;
+    permanent: boolean;
+    temporary: boolean;
+    rail: boolean;
+    railWidth: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=AppSidebar.vue.d.ts.map

package/dist/components/layout/AppSidebar.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/AppSidebar.vue"],"names":[],"mappings":"AAyOA;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,IAAI,CAAC,EAAE;QACL,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;;;;;;;;;;;AAoaD,wBAOG"}

package/dist/index.d.ts

@@ -20,6 +20,10 @@ export { default as UiParentCard } from './components/shared/UiParentCard.vue';
 export { default as VPriceTextField } from './components/shared/VPriceTextField.vue';
 export { default as AppStepper } from './components/common/AppStepper.vue';
 export { default as Loading } from './components/Loading.vue';
+export { default as AppSidebar } from './components/layout/AppSidebar.vue';
+export { default as AppHeader } from './components/layout/AppHeader.vue';
+export type { MenuItem } from './components/layout/AppSidebar.vue';
+export type { HeaderAction } from './components/layout/AppHeader.vue';
 export { useDataTable } from './composables/useDataTable';
 export type { DataTableOptions, PaginationState } from './composables/useDataTable';
 export { useTableActions } from './composables/useTableActions';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,mBAAmB,CAAC;AAO3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yCAAyC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAGrF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAO9D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAEpF,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,YAAY,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAGnE,cAAc,+BAA+B,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AASxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAOnE,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,YAAY,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAGhE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAMvE,cAAc,+BAA+B,CAAC;AAM9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAUzD,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AAGtD,cAAc,+BAA+B,CAAC;AAK9C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG/B;;;GAGG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,GAAG,QAI/B;;;;AAGD,wBAEE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,mBAAmB,CAAC;AAO3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yCAAyC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAGrF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAG9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACzE,YAAY,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACnE,YAAY,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAOtE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAEpF,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,YAAY,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAGnE,cAAc,+BAA+B,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AASxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAOnE,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,YAAY,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAGhE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAMvE,cAAc,+BAA+B,CAAC;AAM9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAUzD,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AAGtD,cAAc,+BAA+B,CAAC;AAK9C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG/B;;;GAGG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,GAAG,QAI/B;;;;AAGD,wBAEE"}