@amirjalili1374/ui-kit 1.2.0

package/src/composables/useTableSelection.ts

@@ -0,0 +1,201 @@
+import { ref, computed, watch } from 'vue';
+import type { Ref } from 'vue';
+
+export interface SelectionOptions<T extends Record<string, any> = Record<string, any>> {
+  multiSelect?: boolean;
+  uniqueKey?: string | ((item: T) => string | number);
+  defaultSelected?: string;
+  groupBy?: string | ((item: T) => string | number);
+  defaultExpanded?: boolean;
+}
+
+export interface GroupedItems<T extends Record<string, any> = Record<string, any>> {
+  groupKey: string | number;
+  groupLabel: string;
+  items: T[];
+  isExpanded: boolean;
+  count: number;
+}
+
+export function useTableSelection<T extends Record<string, any> = Record<string, any>>(items: Ref<T[]>, options: SelectionOptions<T> = {}) {
+  const selectedItems = ref([]) as Ref<T[]>;
+  const expandedGroups = ref<Set<string | number>>(new Set());
+  const groupedItems = ref([] as GroupedItems<T>[]) as Ref<GroupedItems<T>[]>;
+
+  // Get unique value from item
+  const getUniqueValue = (item: T): string | number => {
+    if (typeof options.uniqueKey === 'function') {
+      return options.uniqueKey(item);
+    }
+
+    if (typeof options.uniqueKey === 'string') {
+      return getNestedValue(item, options.uniqueKey);
+    }
+
+    // @ts-ignore - Fallback to id
+    return item.id;
+  };
+
+  // Get nested value from object path
+  const getNestedValue = (obj: any, path: string): any => {
+    return path.split('.').reduce((o, p) => (o || {})[p], obj);
+  };
+
+  // Get group value from item
+  const getGroupValue = (item: T): string | number => {
+    if (!options.groupBy) return '';
+
+    if (typeof options.groupBy === 'function') {
+      return options.groupBy(item);
+    }
+
+    return getNestedValue(item, options.groupBy) || '';
+  };
+
+  // Toggle selection for a single item
+  const toggleSelection = (item: T) => {
+    const itemUniqueValue = getUniqueValue(item);
+    const index = (selectedItems.value as unknown as T[]).findIndex((selected: T) =>
+      getUniqueValue(selected) === itemUniqueValue
+    );
+
+    if (index > -1) {
+      (selectedItems.value as unknown as T[]).splice(index, 1);
+    } else if (options.multiSelect) {
+      (selectedItems.value as unknown as T[]).push(item);
+    } else {
+      selectedItems.value = [item] as unknown as T[];
+    }
+  };
+
+  // Toggle select all items
+  const toggleSelectAll = () => {
+    if ((selectedItems.value as unknown as T[]).length === items.value.length) {
+      selectedItems.value = [] as unknown as T[];
+    } else {
+      selectedItems.value = [...(items.value as unknown as T[])];
+    }
+  };
+
+  // Check if an item is selected
+  const isSelected = (item: T): boolean => {
+    const itemUniqueValue = getUniqueValue(item);
+    return (selectedItems.value as unknown as T[]).some((selected: T) =>
+      getUniqueValue(selected) === itemUniqueValue
+    );
+  };
+
+  // Clear all selections
+  const clearSelection = () => {
+    selectedItems.value = [];
+  };
+
+  // Toggle group expansion
+  const toggleGroup = (groupKey: string | number) => {
+    // Prevent multiple rapid toggles and ensure state consistency
+    const isCurrentlyExpanded = expandedGroups.value.has(groupKey);
+    
+    if (isCurrentlyExpanded) {
+      expandedGroups.value.delete(groupKey);
+    } else {
+      expandedGroups.value.add(groupKey);
+    }
+    
+    // Update the isExpanded property in groupedItems
+    const groupIndex = groupedItems.value.findIndex(group => group.groupKey === groupKey);
+    if (groupIndex !== -1) {
+      groupedItems.value[groupIndex].isExpanded = !isCurrentlyExpanded;
+    }
+  };
+
+  // Expand all groups
+  const expandAllGroups = () => {
+    groupedItems.value.forEach(group => {
+      expandedGroups.value.add(group.groupKey);
+      group.isExpanded = true;
+    });
+  };
+
+  // Collapse all groups
+  const collapseAllGroups = () => {
+    expandedGroups.value.clear();
+    groupedItems.value.forEach(group => {
+      group.isExpanded = false;
+    });
+  };
+
+  // Group items by the specified property
+  const groupItems = (list: T[]) => {
+    if (!options.groupBy) {
+      groupedItems.value = [];
+      return;
+    }
+
+    const groups = new Map<string | number, T[]>();
+
+    // Group items by the specified property
+    list.forEach((item) => {
+      const groupKey = getGroupValue(item);
+      if (!groups.has(groupKey)) {
+        groups.set(groupKey, []);
+      }
+      groups.get(groupKey)!.push(item);
+    });
+
+    // Convert to array format
+    groupedItems.value = Array.from(groups.entries()).map(([groupKey, groupItems]) => ({
+      groupKey,
+      groupLabel: getGroupLabel(groupKey, groupItems),
+      items: groupItems,
+      isExpanded: expandedGroups.value.has(groupKey) || options.defaultExpanded,
+      count: groupItems.length
+    })) as unknown as GroupedItems<T>[];
+
+    // Sort groups by key
+    groupedItems.value.sort((a, b) => {
+      if (typeof a.groupKey === 'string' && typeof b.groupKey === 'string') {
+        return a.groupKey.localeCompare(b.groupKey);
+      }
+      return a.groupKey < b.groupKey ? -1 : a.groupKey > b.groupKey ? 1 : 0;
+    });
+  };
+
+  // Get group label
+  const getGroupLabel = (groupKey: string | number, groupItems: T[]): string => {
+    return `${String(groupKey)} (${groupItems.length} رکورد)`;
+  };
+
+  // Watch for changes in items and group them if needed
+  watch(() => items.value, (newItems) => {
+    if (options.groupBy) {
+      groupItems(newItems as T[]);
+    }
+  }, { immediate: true, deep: true });
+
+  // Check if all items are selected
+  const allSelected = computed(() => {
+    return items.value.length > 0 && selectedItems.value.length === items.value.length;
+  });
+
+  // Check if some items are selected
+  const someSelected = computed(() => {
+    return selectedItems.value.length > 0 && !allSelected.value;
+  });
+
+  return {
+    selectedItems,
+    groupedItems,
+    expandedGroups,
+    allSelected,
+    someSelected,
+    toggleSelection,
+    toggleSelectAll,
+    isSelected,
+    clearSelection,
+    toggleGroup,
+    expandAllGroups,
+    collapseAllGroups,
+    getGroupValue,
+    getUniqueValue
+  };
+}

package/src/constants/enums/approval.ts

@@ -0,0 +1,13 @@
+export const ApprovalTypeEnum = {
+  CASE: 'CASE',
+  MULTI_USE: 'MULTI_USE',
+  ANNUAL_LIMIT: 'ANNUAL_LIMIT',
+} as const;
+
+export type ApprovalType = (typeof ApprovalTypeEnum)[keyof typeof ApprovalTypeEnum];
+
+export const ApprovalTypeOptions = [
+  { title: 'موردی', value: ApprovalTypeEnum.CASE },
+  { title: 'استفاده چند باره تا سقف', value: ApprovalTypeEnum.MULTI_USE },
+  { title: 'حد سالانه', value: ApprovalTypeEnum.ANNUAL_LIMIT },
+];

package/src/constants/enums/booleanEnum.ts

@@ -0,0 +1,11 @@
+export const BooleanEnum = {
+  TRUE: true,
+  FALSE: false
+} as const;
+
+export type BooleanStatus = (typeof BooleanEnum)[keyof typeof BooleanEnum];
+
+export const BooleanEnumOptions = [
+  { title: '✅', value: BooleanEnum.TRUE },
+  { title: '❌', value: BooleanEnum.FALSE }
+];

package/src/constants/enums/contractType.ts

@@ -0,0 +1,11 @@
+export const ContractTypeEnum = {
+  IMPORT: 123,
+  EXPORT: 124,
+} as const;
+
+export type ContractType = (typeof ContractTypeEnum)[keyof typeof ContractTypeEnum];
+
+export const ContractTypeOption = [
+  { longTitle: 'اعتبار اسنادی وارداتی', value: ContractTypeEnum.IMPORT},
+  { longTitle: 'اعتبار اسنادی صادراتی', value: ContractTypeEnum.EXPORT },
+];

package/src/constants/enums/lcProductType.ts

@@ -0,0 +1,21 @@
+export const LcProductTypeEnum = {
+  TRANSFER_CREDIT: 'TRANSFER_CREDIT',
+  INSIDE_LC: 'INSIDE_LC',
+  BACK_TO_BACK_LC: 'BACK_TO_BACK_LC',
+  NORMAL_LC: 'NORMAL_LC',
+  CUSTOMER_LC: 'CUSTOMER_LC',
+  NORMAL_EXPORT: 'NORMAL_EXPORT',
+  INTERNAL_INSIDE: 'INTERNAL_INSIDE'
+} as const;
+
+export type LcProductType = (typeof LcProductTypeEnum)[keyof typeof LcProductTypeEnum];
+
+export const LcProductOption = [
+  { title: 'Transfer Of a Documentary Credit', value: LcProductTypeEnum.TRANSFER_CREDIT },
+  { title: 'اعتبار اسنادی داخلی', value: LcProductTypeEnum.INSIDE_LC },
+  { title: 'Back to Back L/C', value: LcProductTypeEnum.BACK_TO_BACK_LC },
+  { title: 'اعتبار اسنادی وارداتی عادی', value: LcProductTypeEnum.NORMAL_LC },
+  { title: 'مشتریان بانکی', value: LcProductTypeEnum.CUSTOMER_LC },
+  { title: 'اعتبار اسنادی صادراتی عادی', value: LcProductTypeEnum.NORMAL_EXPORT },
+  { title: 'اعتبار اسنادی صادراتی داخلی', value: LcProductTypeEnum.INTERNAL_INSIDE },
+];

package/src/constants/enums/repaymentType.ts

@@ -0,0 +1,11 @@
+export const RepaymentTypeEnum = {
+  INSTALLMENT: 'INSTALLMENT',
+  NON_INSTALLMENT: 'NON_INSTALLMENT',
+} as const;
+
+export type RepaymentType = (typeof RepaymentTypeEnum)[keyof typeof RepaymentTypeEnum];
+
+export const RepaymentTypeOptions = [
+  { title: 'تدریجی', value: RepaymentTypeEnum.INSTALLMENT },
+  { title: 'یکجا', value: RepaymentTypeEnum.NON_INSTALLMENT },
+];

package/src/directives/v-digit-limit.ts

@@ -0,0 +1,15 @@
+import type { DirectiveBinding } from 'vue'
+
+export default {
+  mounted(el: HTMLInputElement, binding: DirectiveBinding<number>) {
+    const maxDigits = binding.value
+
+    const handleInput = (e: Event) => {
+      const input = e.target as HTMLInputElement
+      input.value = input.value.replace(/\D/g, '').slice(0, maxDigits)
+      input.dispatchEvent(new Event('input')) // Sync v-model
+    }
+
+    el.addEventListener('input', handleInput)
+  }
+}

package/src/directives/v-permission.ts

@@ -0,0 +1,31 @@
+import type { Directive } from 'vue';
+import { usePermissionsStore } from '@/stores/permissions';
+
+export const vPermission: Directive = {
+  mounted(el, binding) {
+    const permissionsStore = usePermissionsStore();
+    
+    // Check if user has permission for the specified menu key
+    const hasPermission = permissionsStore.hasMenuPermission(binding.value);
+    
+    if (!hasPermission) {
+      // Hide the element if user doesn't have permission
+      el.style.display = 'none';
+    }
+  },
+  
+  updated(el, binding) {
+    const permissionsStore = usePermissionsStore();
+    
+    // Check if user has permission for the specified menu key
+    const hasPermission = permissionsStore.hasMenuPermission(binding.value);
+    
+    if (!hasPermission) {
+      // Hide the element if user doesn't have permission
+      el.style.display = 'none';
+    } else {
+      // Show the element if user has permission
+      el.style.display = '';
+    }
+  }
+}; 

package/src/features/index.ts

@@ -0,0 +1,48 @@
+/**
+ * Feature-based module exports
+ * This file provides barrel exports for all features
+ * 
+ * Note: This is a placeholder for future feature-based organization.
+ * Currently, the project uses a traditional structure which is working well.
+ * 
+ * Future structure could be:
+ * src/features/
+ *   ├── approval/
+ *   │   ├── components/
+ *   │   ├── composables/
+ *   │   ├── services/
+ *   │   └── types/
+ *   ├── cartable/
+ *   │   ├── components/
+ *   │   ├── composables/
+ *   │   ├── services/
+ *   │   └── types/
+ *   └── dashboard/
+ *       ├── components/
+ *       ├── composables/
+ *       ├── services/
+ *       └── types/
+ */
+
+// Re-export from current structure for compatibility
+// Note: Individual component exports would need index files in each directory
+
+// Re-export services
+export * from '../services/modules/approval';
+export * from '../services/modules/cartable';
+export * from '../services/modules/user';
+
+// Re-export types
+export * from '../types/approval/approvalType';
+export * from '../types/cartable/cartableTypes';
+export * from '../types/models/person';
+export * from '../types/models/userInfo';
+
+// Re-export composables
+export * from '../composables/useDataTable';
+export * from '../composables/usePermissions';
+export * from '../composables/useRouteGuard';
+export * from '../composables/useTableActions';
+export * from '../composables/useTableHeaders';
+export * from '../composables/useTableSelection';
+

package/src/index.ts

@@ -0,0 +1,119 @@
+/**
+ * UI Kit Library Entry Point
+ * 
+ * This file exports only generic, reusable components, composables, utilities, directives, 
+ * stores, and component types - NO business logic or app-specific types.
+ */
+
+// Import styles (this ensures CSS is bundled)
+import './scss/style.scss';
+
+// ============================================================================
+// COMPONENTS - Global reusable UI components only
+// ============================================================================
+
+// Components - Shared
+export { default as BaseBreadcrumb } from './components/shared/BaseBreadcrumb.vue';
+export { default as BaseIcon } from './components/shared/BaseIcon.vue';
+export { default as ConfirmDialog } from './components/shared/ConfirmDialog.vue';
+export { default as CustomAutocomplete } from './components/shared/CustomAutocomplete.vue';
+export { default as CustomDataTable } from './components/shared/CustomDataTable.vue';
+export { default as DescriptionInput } from './components/shared/DescriptionInput.vue';
+export { default as DownloadButton } from './components/shared/DownloadButton.vue';
+export { default as MoneyInput } from './components/shared/MoneyInput.vue';
+export { default as PdfViewer } from './components/shared/PdfViewer.vue';
+export { default as ShamsiDatePicker } from './components/shared/ShamsiDatePicker.vue';
+export { default as UiChildCard } from './components/shared/UiChildCard.vue';
+export { default as UiParentCard } from './components/shared/UiParentCard.vue';
+export { default as VPriceTextField } from './components/shared/VPriceTextField.vue';
+
+// Components - Common
+export { default as AppStepper } from './components/common/AppStepper.vue';
+export { default as Loading } from './components/Loading.vue';
+
+// ============================================================================
+// COMPOSABLES - Generic composables only (no business logic)
+// ============================================================================
+
+// Export functions only to avoid type conflicts with component types
+export { useDataTable } from './composables/useDataTable';
+export type { DataTableOptions, PaginationState } from './composables/useDataTable';
+
+export { useTableActions } from './composables/useTableActions';
+export type { ActionOptions } from './composables/useTableActions';
+// Note: CustomAction and CustomButtonAction types are exported from DataTableTypes
+
+export * from './composables/useTableHeaders';
+
+export { useTableSelection } from './composables/useTableSelection';
+export type { SelectionOptions } from './composables/useTableSelection';
+// Note: GroupedItems type is exported from DataTableTypes
+
+// Note: usePermissions and useRouteGuard are app-specific and excluded
+
+// ============================================================================
+// DIRECTIVES - All directives
+// ============================================================================
+
+export { default as DigitLimit } from './directives/v-digit-limit';
+// Note: v-permission directive contains app-specific logic and is excluded
+
+// ============================================================================
+// UTILS - Generic utility functions only
+// ============================================================================
+
+export * from './utils/date-convertor';
+export * from './utils/greetingUtils';
+export * from './utils/number-formatter';
+export * from './utils/NationalCodeValidator';
+export * from './utils/helpers/fetch-wrapper';
+export { configureAuth } from './utils/helpers/fetch-wrapper';
+export type { AuthConfig } from './utils/helpers/fetch-wrapper';
+
+// ============================================================================
+// VALIDATORS - Generic validators
+// ============================================================================
+
+export * from './validators/nationalCodeRule';
+
+// ============================================================================
+// STORES - Global stores only (no business logic stores)
+// ============================================================================
+
+export { useCustomizerStore } from './stores/customizer';
+
+// Note: permissions store contains app-specific menu permissions and is excluded
+// Note: approval, base, customerInfo, auth, authUser stores are app-specific and excluded
+
+// ============================================================================
+// TYPES - Component types and generic types only (NO business logic types)
+// ============================================================================
+
+// Component types - These are the definitive types for components
+export * from './types/componentTypes/DataTableType';
+export * from './types/componentTypes/DataTableTypes';
+
+// Generic enum types
+export * from './constants/enums/booleanEnum';
+
+// Note: All approval, cartable, and other business logic types are excluded
+
+// Plugin installation function (for Vue app.use())
+import type { App } from 'vue';
+import DigitLimit from './directives/v-digit-limit';
+
+/**
+ * Install the UI Kit library in a Vue application
+ * @param app - Vue application instance
+ */
+export function install(app: App) {
+  // Register directives globally
+  app.directive('digit-limit', DigitLimit);
+  // Note: v-permission directive contains app-specific logic and is not registered
+}
+
+// Default export for plugin usage
+export default {
+  install,
+};
+

package/src/plugins/key-clock.ts

@@ -0,0 +1,39 @@
+/**
+ * Keycloak Plugin Configuration
+ * 
+ * Keycloak authentication plugin for Vue 3 application
+ */
+
+import type { App } from 'vue'
+import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
+
+export function setupKeycloak(app: App) {
+  return app.use(VueKeycloakJs, {
+    config: {
+      realm: 'master',
+      url: 'http://192.168.251.72:8080',
+      clientId: 'FACILITY',
+    },
+    init: {
+      flow: 'standard',
+      checkLoginIframe: false,
+      onLoad: 'login-required',
+      pkceMethod: 'S256',
+    },
+    logout: {
+      redirectUri: window.location.origin
+    },
+    onAuthLogout: () => {
+      console.log('User logged out from Keycloak')
+      // You can add additional cleanup here if needed
+    },
+    onReady: (keycloakInstance) => {
+      // Expose Keycloak instance globally for axios interceptor
+      (window as any).$keycloak = keycloakInstance;
+      console.log('Keycloak ready, instance exposed globally');
+    },
+    onInitError: (error) => {
+      console.error('Keycloak initialization error:', error);
+    },
+  })
+}

package/src/plugins/mdi-icon.ts

@@ -0,0 +1,31 @@
+import {
+  mdiClose,
+  mdiHome,
+  mdiEyeOff,
+  mdiEye,
+  mdiFormatSize,
+  mdiPaletteSwatchVariant,
+  mdiFileDownload,
+  mdiCheckCircle,
+  mdiAlertCircle,
+  mdiPencil,
+  mdiDelete,
+  mdiArrowRight,
+  mdiCog
+} from '@mdi/js';
+
+export const icons = {
+  close: mdiClose,
+  home: mdiHome,
+  eyeOff: mdiEyeOff,
+  eye: mdiEye,
+  text: mdiFormatSize,
+  style: mdiPaletteSwatchVariant,
+  download: mdiFileDownload,
+  checkCircle: mdiCheckCircle,
+  alertCircle: mdiAlertCircle,
+  pencil: mdiPencil,
+  delete: mdiDelete,
+  arrowRight: mdiArrowRight,
+  cog: mdiCog
+};

package/src/plugins/vuetify.ts

@@ -0,0 +1,74 @@
+import { createVuetify } from 'vuetify';
+import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
+import { icons } from './mdi-icon'; // Import icons from separate file
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+
+// Light Themes
+import { ModernTheme } from '@/theme/lightThemes/ModernTheme';
+import { PurpleTheme } from '@/theme/lightThemes/PurpleTheme';
+import { RedTheme } from '@/theme/lightThemes/RedTheme';
+import { OrangeTheme } from '@/theme/lightThemes/OrangeTheme';
+import { SteelTealGreen } from '@/theme/lightThemes/SteelTealGreen';
+import { TealTheme } from '@/theme/lightThemes/TealTheme';
+import { SilverTheme } from '@/theme/lightThemes/SilverTheme';
+
+// Dark Themes
+import { DarkModernTheme } from '@/theme/darkThemes/DarkModernTheme';
+import { DarkOrangeTheme } from '@/theme/darkThemes/DarkOrangeTheme';
+import { DarkPurpleTheme } from '@/theme/darkThemes/DarkPurpleTheme';
+import { DarkSteelTealGreen } from '@/theme/darkThemes/DarkSteelTealGreen';
+import { DarkTealTheme } from '@/theme/darkThemes/DarkTealTheme';
+import { DarkSilverTheme } from '@/theme/darkThemes/DarkSilverTheme';
+import { DarkRedTheme } from '@/theme/darkThemes/DarkRedTheme';
+
+
+
+export default createVuetify({
+  components,
+  directives,
+  icons: {
+    defaultSet: 'mdi',
+    aliases: {
+      ...aliases,
+      ...icons
+    },
+    sets: {
+      mdi
+    }
+  },
+  theme: {
+    defaultTheme: 'ModernTheme',
+    themes: {
+      // Light Themes
+      ModernTheme,
+      PurpleTheme,
+      RedTheme,
+      OrangeTheme,
+      SteelTealGreen,
+      TealTheme,
+      SilverTheme,
+      // Dark Themes
+      DarkModernTheme,
+      DarkOrangeTheme,
+      DarkPurpleTheme,
+      DarkSteelTealGreen,
+      DarkTealTheme,
+      DarkSilverTheme,
+      DarkRedTheme
+    }
+  },
+  defaults: {
+    VBtn: {},
+    VCard: {
+      rounded: 'md'
+    },
+    VTextField: {
+      rounded: 'lg'
+    },
+    VTooltip: {
+      // set v-tooltip default location to top
+      location: 'top'
+    }
+  }
+});