@amirjalili1374/ui-kit 1.2.0

package/src/composables/useDataTable.ts

@@ -0,0 +1,152 @@
+import { ref, computed, watch } from 'vue';
+import axiosInstance from '@/services/axiosInstance';
+import { useDebounceFn } from '@vueuse/core';
+import type { Ref } from 'vue';
+
+export interface DataTableOptions {
+  apiResource: string;
+  queryParams?: Record<string, any>;
+  pageSize?: number;
+  autoFetch?: boolean;
+}
+
+export interface PaginationState {
+  currentPage: number;
+  itemsPerPage: number;
+  totalItems: number;
+  totalPages: number;
+}
+
+export function useDataTable<T = any>(options: DataTableOptions) {
+  const items = ref<T[]>([]) as Ref<T[]>;
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+  const hasMore = ref(true);
+  const isLoadingMore = ref(false);
+
+  const pagination = ref<PaginationState>({
+    currentPage: 1,
+    itemsPerPage: options.pageSize || 10,
+    totalItems: 0,
+    totalPages: 1
+  });
+
+  const fetchData = async (params: Record<string, any> = {}) => {
+    if (loading.value) return;
+
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const response = await axiosInstance.get(options.apiResource, {
+        params: {
+          page: pagination.value.currentPage,
+          per_page: pagination.value.itemsPerPage,
+          ...options.queryParams,
+          ...params
+        }
+      });
+
+      const { data, meta } = response.data;
+
+      if (meta) {
+        items.value = data;
+        pagination.value = {
+          currentPage: meta.current_page || 1,
+          itemsPerPage: meta.per_page || options.pageSize || 10,
+          totalItems: meta.total || 0,
+          totalPages: meta.last_page || 1
+        };
+        hasMore.value = meta.current_page < meta.last_page;
+      } else {
+        items.value = data;
+        hasMore.value = false;
+      }
+
+      return data;
+    } catch (err: any) {
+      error.value = err.response?.data?.message || 'Failed to fetch data';
+      console.error('Error fetching data:', err);
+      throw err;
+    } finally {
+      loading.value = false;
+      isLoadingMore.value = false;
+    }
+  };
+
+  const debouncedFetchData = useDebounceFn(fetchData, 300);
+
+  const loadMore = async () => {
+    if (loading.value || !hasMore.value) return;
+
+    isLoadingMore.value = true;
+    pagination.value.currentPage += 1;
+
+    try {
+      const response = await axiosInstance.get(options.apiResource, {
+        params: {
+          page: pagination.value.currentPage,
+          per_page: pagination.value.itemsPerPage,
+          ...options.queryParams
+        }
+      });
+
+      const { data, meta } = response.data;
+
+      if (meta) {
+        items.value = [...items.value, ...data];
+        hasMore.value = meta.current_page < meta.last_page;
+      } else {
+        items.value = [...items.value, ...data];
+        hasMore.value = false;
+      }
+    } catch (err) {
+      console.error('Error loading more data:', err);
+      pagination.value.currentPage -= 1;
+      throw err;
+    } finally {
+      isLoadingMore.value = false;
+    }
+  };
+
+  const setPage = (page: number) => {
+    if (page < 1 || page > pagination.value.totalPages) return;
+    pagination.value.currentPage = page;
+    fetchData();
+  };
+
+  const setItemsPerPage = (size: number) => {
+    pagination.value.itemsPerPage = size;
+    pagination.value.currentPage = 1;
+    fetchData();
+  };
+
+  // Watch for changes in query params
+  watch(
+    () => options.queryParams,
+    (newParams) => {
+      if (options.autoFetch !== false) {
+        debouncedFetchData(newParams);
+      }
+    },
+    { deep: true }
+  );
+
+  // Initial fetch
+  if (options.autoFetch !== false) {
+    fetchData();
+  }
+
+  return {
+    items,
+    loading,
+    error,
+    hasMore,
+    isLoadingMore,
+    pagination,
+    fetchData,
+    loadMore,
+    setPage,
+    setItemsPerPage
+  };
+}

package/src/composables/usePermissions.ts

@@ -0,0 +1,90 @@
+import { computed } from 'vue';
+import { usePermissionsStore } from '@/stores/permissions';
+
+/**
+ * Note: This composable is app-specific and includes business logic.
+ * It's not exported from the library. Consuming apps should create
+ * their own usePermissions composable or use usePermissionsStore directly.
+ */
+function useCustomerInfoStore() {
+  // Stub - this composable is not exported from library
+  // Consuming apps should implement their own customer info store
+  return {
+    isUserInfoLoaded: false,
+    getUserRoles: [] as string[],
+    getUserLotusRoles: [] as string[],
+    hasRole: () => false,
+    hasLotusRole: () => false
+  };
+}
+
+export function usePermissions() {
+  const permissionsStore = usePermissionsStore();
+  const customerInfo = useCustomerInfoStore();
+
+  // Check if user has permission for a specific menu
+  const hasMenuPermission = (menuKey: string) => {
+    return permissionsStore.hasMenuPermission(menuKey);
+  };
+
+  // Check if user has any of the specified roles
+  const hasAnyRole = (roles: string[]) => {
+    return permissionsStore.hasAnyRole(roles);
+  };
+
+  // Check if user has any of the specified lotus roles
+  const hasAnyLotusRole = (roles: string[]) => {
+    return permissionsStore.hasAnyLotusRole(roles);
+  };
+
+  // Check if user has a specific role
+  const hasRole = (role: string) => {
+    return customerInfo.hasRole(role);
+  };
+
+  // Check if user has a specific lotus role
+  const hasLotusRole = (role: string) => {
+    return customerInfo.hasLotusRole(role);
+  };
+
+  // Get user's roles
+  const userRoles = computed(() => customerInfo.getUserRoles);
+
+  // Get user's lotus roles
+  const userLotusRoles = computed(() => customerInfo.getLotusRoles);
+
+  // Check if user info is loaded
+  const isUserInfoLoaded = computed(() => customerInfo.isUserInfoLoaded);
+
+  // Common permission checks
+  const canCreateApproval = computed(() => hasRole('smp_create_approval'));
+  const canEditApproval = computed(() => hasRole('smp_edit_approval'));
+  const canViewCartable = computed(() => hasRole('SMP_VIEW_CARTABLE'));
+  const canOperateCartable = computed(() => hasRole('SMP_CARTABLE_OPERATION'));
+  const canViewCartableHistory = computed(() => hasRole('SMP_CARTABLE_HIST'));
+  const canViewApprovalHistory = computed(() => hasRole('SMP_APPROVAL_HIST'));
+  const canCreateFlowManagement = computed(() => hasRole('SMP_CREATE_FLOW_MNG'));
+
+  return {
+    // Permission checking methods
+    hasMenuPermission,
+    hasAnyRole,
+    hasAnyLotusRole,
+    hasRole,
+    hasLotusRole,
+    
+    // Computed properties
+    userRoles,
+    userLotusRoles,
+    isUserInfoLoaded,
+    
+    // Common permission checks
+    canCreateApproval,
+    canEditApproval,
+    canViewCartable,
+    canOperateCartable,
+    canViewCartableHistory,
+    canViewApprovalHistory,
+    canCreateFlowManagement
+  };
+} 

package/src/composables/useRouteGuard.ts

@@ -0,0 +1,36 @@
+import { usePermissionsStore } from '@/stores/permissions';
+import { useRouter, useRoute } from 'vue-router';
+
+export function useRouteGuard() {
+  const permissionsStore = usePermissionsStore();
+  const router = useRouter();
+  const route = useRoute();
+
+  // Check if user can access a specific route by inspecting meta.permission
+  const canAccessRoute = (routePath: string): boolean => {
+    // Fallback: allow; guard will block at navigation time if needed
+    return true;
+  };
+
+  // Navigate to route if user has permission, otherwise redirect to 403
+  const navigateWithPermission = (routePath: string) => {
+    router.push(routePath);
+  };
+
+  // Check permission and redirect if not authorized
+  const requirePermission = (permissionKey?: string, redirectTo: string = '/error/403') => {
+    const key = permissionKey ?? (route.meta?.permission as string | undefined);
+    if (!key) return true;
+    if (!permissionsStore.hasMenuPermission(key)) {
+      router.push(redirectTo);
+      return false;
+    }
+    return true;
+  };
+
+  return {
+    canAccessRoute,
+    navigateWithPermission,
+    requirePermission
+  };
+} 

package/src/composables/useTableActions.ts

@@ -0,0 +1,207 @@
+import { ref, computed } from 'vue';
+import type { Component } from 'vue';
+import { icons } from '@/plugins/mdi-icon';
+
+export interface CustomAction {
+  title: string;
+  component: Component;
+  condition?: (item: any) => boolean;
+}
+
+export interface CustomButtonAction {
+  label: string;
+  color?: string;
+  onClick: (item: any) => void;
+  disabled?: boolean | ((item: any) => boolean);
+  icon?: string;
+  outlined?: boolean;
+  rounded?: boolean;
+  class?: string;
+  tooltip?: string;
+}
+
+export interface ActionOptions {
+  actions?: ('create' | 'edit' | 'delete' | 'view')[];
+  routes?: Record<string, string>;
+  downloadLink?: Record<string, string>;
+  customActions?: CustomAction[];
+  customButtons?: CustomButtonAction[];
+  customButtonsFn?: (item: any) => CustomButtonAction[];
+  showRefreshButton?: boolean;
+}
+
+export function useTableActions(options: ActionOptions = {}) {
+  const dialog = ref(false);
+  const deleteDialog = ref(false);
+  const actionDialog = ref(false);
+  const isEditing = ref(false);
+  const editedItem = ref<Record<string, any> | null>(null);
+  const formModel = ref<Record<string, any>>({});
+  const itemToDelete = ref<Record<string, any> | null>(null);
+  const currentAction = ref<CustomAction | null>(null);
+
+  // Open dialog for create/edit
+  const openDialog = (item?: any) => {
+    isEditing.value = !!item;
+    editedItem.value = item ? { ...item } : {};
+    formModel.value = item ? { ...item } : {};
+    dialog.value = true;
+  };
+
+  // Open delete confirmation dialog
+  const openDeleteDialog = (item: any) => {
+    itemToDelete.value = item;
+    deleteDialog.value = true;
+  };
+
+  // Open custom action dialog
+  const openActionDialog = (action: CustomAction, item: any) => {
+    currentAction.value = action;
+    editedItem.value = item ? { ...item } : {};
+    formModel.value = item ? { ...item } : {};
+    actionDialog.value = true;
+  };
+
+  // Reset all dialogs and form
+  const resetDialogs = () => {
+    dialog.value = false;
+    deleteDialog.value = false;
+    actionDialog.value = false;
+    isEditing.value = false;
+    editedItem.value = null;
+    itemToDelete.value = null;
+    currentAction.value = null;
+    formModel.value = {};
+  };
+
+  // Check if action should be shown for an item
+  const shouldShowAction = (action: CustomAction, item: any): boolean => {
+    if (!action.condition) return true;
+    return action.condition(item);
+  };
+
+  // Get all available actions for an item
+  const getItemActions = (item: any): CustomButtonAction[] => {
+    const actions: CustomButtonAction[] = [];
+
+    // Add CRUD actions
+    if (options.actions) {
+      if (options.actions.includes('view')) {
+        actions.push({
+          label: 'View',
+          icon: icons.eye,
+          color: 'info',
+          outlined: true,
+          onClick: () => openDialog(item)
+        });
+      }
+
+      if (options.actions.includes('edit')) {
+        actions.push({
+          label: 'Edit',
+          icon: icons.pencil,
+          color: 'primary',
+          outlined: true,
+          onClick: () => openDialog(item)
+        });
+      }
+
+      if (options.actions.includes('delete')) {
+        actions.push({
+          label: 'Delete',
+          icon: icons.delete,
+          color: 'error',
+          outlined: true,
+          onClick: () => openDeleteDialog(item)
+        });
+      }
+    }
+
+    // Add route actions
+    if (options.routes) {
+      Object.entries(options.routes).forEach(([key, route]) => {
+        actions.push({
+          label: key.charAt(0).toUpperCase() + key.slice(1),
+          icon: icons.arrowRight,
+          color: 'secondary',
+          outlined: true,
+          onClick: () => {
+            // This will be handled by the parent component
+          }
+        });
+      });
+    }
+
+    // Add download actions
+    if (options.downloadLink) {
+      Object.entries(options.downloadLink).forEach(([key, url]) => {
+        actions.push({
+          label: `Download ${key}`,
+          icon: icons.download,
+          color: 'success',
+          outlined: true,
+          onClick: () => {
+            // This will be handled by the parent component
+          }
+        });
+      });
+    }
+
+    // Add custom actions
+    if (options.customActions) {
+      options.customActions.forEach(action => {
+        if (shouldShowAction(action, item)) {
+          actions.push({
+            label: action.title,
+            icon: icons.cog,
+            color: 'primary',
+            outlined: true,
+            onClick: () => openActionDialog(action, item)
+          });
+        }
+      });
+    }
+
+    // Add dynamic custom buttons
+    if (options.customButtonsFn) {
+      const dynamicButtons = options.customButtonsFn(item);
+      actions.push(...dynamicButtons);
+    } else if (options.customButtons) {
+      actions.push(...options.customButtons);
+    }
+
+    return actions;
+  };
+
+  // Check if any actions are available
+  const hasAnyActions = computed(() => {
+    const hasCrudActions = Array.isArray(options.actions) && options.actions.length > 0;
+    const hasRoutes = !!options.routes && Object.keys(options.routes).length > 0;
+    const hasDownloadLinks = !!options.downloadLink && Object.keys(options.downloadLink).length > 0;
+    const hasCustomActions = Array.isArray(options.customActions) && options.customActions.length > 0;
+    const hasCustomButtons = (Array.isArray(options.customButtons) && options.customButtons.length > 0) || !!options.customButtonsFn;
+
+    return hasCrudActions || hasRoutes || hasDownloadLinks || hasCustomActions || hasCustomButtons;
+  });
+
+  return {
+    // State
+    dialog,
+    deleteDialog,
+    actionDialog,
+    isEditing,
+    editedItem,
+    formModel,
+    itemToDelete,
+    currentAction,
+    hasAnyActions,
+
+    // Methods
+    openDialog,
+    openDeleteDialog,
+    openActionDialog,
+    resetDialogs,
+    getItemActions,
+    shouldShowAction
+  };
+}

package/src/composables/useTableHeaders.ts

@@ -0,0 +1,172 @@
+import { computed } from 'vue';
+
+export interface TableHeader {
+  title?: string;
+  key?: string;
+  sortable?: boolean;
+  editable?: boolean;
+  width?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+  align?: 'start' | 'center' | 'end';
+  fixed?: boolean | 'left' | 'right';
+  resizable?: boolean;
+  filterable?: boolean;
+  filterOptions?: Array<{ text: string; value: any }>;
+  filterMultiple?: boolean;
+  filterMethod?: (value: any, row: any, column: any) => boolean;
+  sortMethod?: (a: any, b: any) => number;
+  sortBy?: string | ((row: any) => any) | (string | ((row: any) => any))[];
+  sortOrders?: ('ascending' | 'descending')[];
+  formatter?: (row: any, column: any, cellValue: any, index: number) => any;
+  className?: string | ((data: { row: any; rowIndex: number; column: any; columnIndex: number }) => string);
+  headerClassName?: string | ((data: { row: any; rowIndex: number; column: any; columnIndex: number }) => string);
+  showOverflowTooltip?: boolean | { [key: string]: any };
+  renderHeader?: (data: { column: any; $index: number }) => any;
+  render?: (data: { row: any; column: any; $index: number }) => any;
+  children?: TableHeader[];
+  type?: 'selection' | 'index' | 'expand';
+  index?: number | ((index: number) => number);
+  selectable?: (row: any, index: number) => boolean;
+  reserveSelection?: boolean;
+  filters?: { text: string; value: any }[];
+  filterPlacement?: string;
+  filteredValue?: any[];
+  columnKey?: string;
+  [key: string]: any;
+}
+
+export interface HeaderOptions {
+  selectable?: boolean;
+  hasActions?: boolean;
+  actionsWidth?: number | string;
+  showSelection?: boolean;
+  showIndex?: boolean;
+  indexLabel?: string;
+  indexMethod?: (index: number) => number;
+}
+
+export function useTableHeaders(headers: TableHeader[], options: HeaderOptions = {}) {
+  const {
+    selectable = false,
+    hasActions = false,
+    actionsWidth = '200px',
+    showSelection = true,
+    showIndex = false,
+    indexLabel = '#',
+    indexMethod
+  } = options;
+
+  // Add selection column if needed
+  const withSelection = computed<TableHeader[]>(() => {
+    if (!selectable || !showSelection) return headers;
+
+    return [
+      {
+        type: 'selection',
+        width: '50px',
+        align: 'center',
+        fixed: 'left',
+        selectable: (row: any, index: number) => true
+      },
+      ...headers
+    ];
+  });
+
+  // Add index column if needed
+  const withIndex = computed<TableHeader[]>(() => {
+    if (!showIndex) return withSelection.value;
+
+    return [
+      {
+        type: 'index',
+        label: indexLabel,
+        width: '60px',
+        align: 'center',
+        fixed: 'left',
+        index: indexMethod || ((index: number) => index + 1)
+      },
+      ...withSelection.value
+    ];
+  });
+
+  // Add actions column if needed
+  const withActions = computed<TableHeader[]>(() => {
+    if (!hasActions) return withIndex.value;
+
+    return [
+      ...withIndex.value,
+      {
+        label: 'Actions',
+        key: 'actions',
+        width: actionsWidth,
+        fixed: 'right',
+        align: 'center',
+        render: (data: { row: any, column: any, $index: number }) => {
+          // This will be handled by the parent component
+          return null;
+        }
+      }
+    ];
+  });
+
+  // Final headers with all transformations applied
+  const processedHeaders = computed<TableHeader[]>(() => {
+    return withActions.value.map(header => ({
+      sortable: false,
+      resizable: true,
+      minWidth: 80,
+      align: 'start',
+      showOverflowTooltip: true,
+      ...header,
+      // Ensure width is always a string with px if it's a number
+      width: typeof header.width === 'number' ? `${header.width}px` : header.width
+    }));
+  });
+
+  // Get column by key
+  const getColumnByKey = (key: string): TableHeader | undefined => {
+    return processedHeaders.value.find(header => header.key === key);
+  };
+
+  // Get column index by key
+  const getColumnIndex = (key: string): number => {
+    return processedHeaders.value.findIndex(header => header.key === key);
+  };
+
+  // Get visible columns
+  const visibleColumns = computed(() => {
+    return processedHeaders.value.filter(header => header.hidden !== true);
+  });
+
+  // Get fixed columns
+  const fixedColumns = computed(() => {
+    return processedHeaders.value.filter(header => header.fixed === true || header.fixed === 'left' || header.fixed === 'right');
+  });
+
+  // Get left fixed columns
+  const leftFixedColumns = computed(() => {
+    return processedHeaders.value.filter(header => header.fixed === 'left');
+  });
+
+  // Get right fixed columns
+  const rightFixedColumns = computed(() => {
+    return processedHeaders.value.filter(header => header.fixed === 'right');
+  });
+
+  // Get scrollable columns (not fixed)
+  const scrollableColumns = computed(() => {
+    return processedHeaders.value.filter(header => !header.fixed);
+  });
+
+  return {
+    headers: processedHeaders,
+    visibleColumns,
+    fixedColumns,
+    leftFixedColumns,
+    rightFixedColumns,
+    scrollableColumns,
+    getColumnByKey,
+    getColumnIndex
+  };
+}