@amirjalili1374/ui-kit 1.9.2 → 1.10.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 jalili_a
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -9,26 +9,28 @@ A reusable UI component library built with Vue 3, Vuetify 3, and TypeScript. Thi
 - 🎭 Vuetify 3 components
 - 🔧 Composable utilities
 - 📦 Tree-shakeable exports
-- 🎪 Multiple build formats (ES, CJS, UMD)
+- 🎪 ESM and CommonJS package outputs
 
 ## Installation
 
 ```bash
 npm install @amirjalili1374/ui-kit
-# or
-yarn add @amirjalili1374/ui-kit
-# or
-pnpm add @amirjalili1374/ui-kit
 ```
 
+This repository is developed and validated with Node.js `^20.19.0 || >=22.12.0`
+and npm 11. The committed `package-lock.json` is the canonical lockfile.
+
 ## Peer Dependencies
 
 This library requires the following peer dependencies to be installed in your project:
 
-- `vue` >= 3.3.0
-- `vuetify` >= 3.10.0
-- `@vueuse/core` >= 13.0.0 (optional)
-- `axios` >= 1.8.0 (optional)
+- `vue` ^3.4.0
+- `vuetify` ^3.10.0
+- `vue-router` ^4.3.0
+
+`CustomDataTable` currently calls Vue Router directly, so applications that render
+the table must install a router before mounting it. Other package dependencies,
+including Pinia, Axios, and VueUse, are installed through the package metadata.
 
 ## Usage
 
@@ -63,7 +65,7 @@ You can import components individually for better tree-shaking:
 
 ```vue
 <script setup lang="ts">
-1import { 
+import {
   CustomDataTable,
   CustomDataTableV2,
   BaseIcon, 
@@ -255,8 +257,8 @@ const formatted = formatNumberWithCommas(1234567); // "1,234,567"
 - `BaseIcon` - Icon component wrapper
 - `ConfirmDialog` - Confirmation dialog
 - `CustomAutocomplete` - Enhanced autocomplete input
-- `CustomDataTable` - Feature-rich data table (stable; unchanged)
-- `CustomDataTableV2` - Same API as `CustomDataTable` with bug fixes; use for new pages
+- `CustomDataTableV2` - Current feature-rich data table implementation
+- `CustomDataTable` - Backward-compatible alias for `CustomDataTableV2`; there is no separate V1 implementation on this branch
 - `DescriptionInput` - Text area input for descriptions
 - `DownloadButton` - Button with download functionality
 - `MoneyInput` - Currency/money input field
@@ -319,28 +321,42 @@ To build the library for distribution:
 npm run build:lib
 ```
 
-This will:
-1. Run TypeScript type checking
-2. Build the library in multiple formats (ES, CJS, UMD)
-3. Generate TypeScript declaration files
+This runs fail-closed TypeScript checking, builds ESM and CommonJS outputs,
+bundles the kit CSS, and generates TypeScript declarations.
 
 Output files will be in the `dist` directory:
 - `ui-kit.es.js` - ES module format
 - `ui-kit.cjs` - CommonJS format
-- `ui-kit.umd.js` - UMD format (browser)
 - `style.css` - Compiled CSS
 - `index.d.ts` - TypeScript declarations
 
+The normal `npm run build` command builds the demo application. Use
+`npm run build:lib` for the publishable package.
+
+### Optional Excel export
+
+Client-side Excel export dynamically loads the optional `xlsx` dependency. Install
+it before enabling that feature:
+
+```bash
+npm install xlsx
+```
+
+Other table features work without XLSX. Missing XLSX produces a clear runtime error
+when client-side export is invoked.
+
 ## Publishing
 
-To publish the library to npm:
+Before publishing, validate and inspect the packed package:
 
 ```bash
-npm login
-npm publish
+npm ci
+npm run validate
+npm pack --dry-run
 ```
 
-The `prepublishOnly` script will automatically build the library before publishing.
+Publishing remains a manual, separately authorized operation. The `prepublishOnly`
+hook rebuilds the library, but does not replace `npm run validate`.
 
 ## Development
 
@@ -359,9 +375,23 @@ npm run typecheck
 ### Linting
 
 ```bash
-npm run lint
+npm run lint:check  # read-only
+npm run lint:fix    # explicit auto-fix
+```
+
+### Tests and package consumer validation
+
+```bash
+npm test
+npm run test:coverage
+npm run test:consumer
 ```
 
+`test:consumer` packs the built library, installs the tarball into a fresh temporary
+Vite application, and verifies ESM, CommonJS, declarations, CSS exports, and a
+production consumer build. Current tests cover utilities, the digit directive,
+table selection/helpers, and initial public-component accessibility contracts.
+
 ### Formatting
 
 ```bash
@@ -376,7 +406,9 @@ To update and republish the library:
 2. Update the version in `package.json`
 3. Build the library: `npm run build:lib`
 4. Test locally if possible
-5. Publish: `npm publish`
+5. Run `npm run validate`
+6. Inspect `npm pack --dry-run`
+7. Publish only through the separately authorized release process
 
 For npm scoped packages, make sure you have the correct permissions.
 
@@ -401,7 +433,13 @@ For npm scoped packages, make sure you have the correct permissions.
 
 ## License
 
-MIT
+MIT. See [LICENSE](./LICENSE).
+
+## Runtime limitations
+
+The current table export/download behavior, PDF viewer, loading animation, and
+authentication helpers use browser APIs. SSR is not currently claimed or validated.
+The table also requires an installed Vue Router instance when rendered.
 
 ## Contributing
 

package/dist/components/Loading.vue.d.ts

@@ -1,3 +1,10 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Props = {
+    label?: string;
+    animationLink?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    animationLink: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/common/AppStepper.vue.d.ts

@@ -11,6 +11,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: () => {
             title: string;
             section: Component;
+            disabled?: boolean;
         }[];
         required: true;
     };
@@ -30,6 +31,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: ObjectConstructor;
         default: () => {};
     };
+    direction: {
+        type: () => "rtl" | "ltr";
+        default: string;
+    };
 }>, {
     currentStepComponentRef: import("vue").Ref<any, any>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -40,6 +45,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: () => {
             title: string;
             section: Component;
+            disabled?: boolean;
         }[];
         required: true;
     };
@@ -59,10 +65,15 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: ObjectConstructor;
         default: () => {};
     };
+    direction: {
+        type: () => "rtl" | "ltr";
+        default: string;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: (...args: any[]) => any;
     "onStep-click"?: (...args: any[]) => any;
 }>, {
+    direction: "ltr" | "rtl";
     contentMinHeight: string;
     disableClick: boolean;
     stepProps: Record<string, any>;

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

@@ -0,0 +1,34 @@
+export type TextFieldVariant = 'outlined' | 'filled' | 'solo' | 'plain' | 'underlined';
+export type TextFieldHeight = 'compact' | 'default' | 'comfortable';
+type __VLS_Props = {
+    textFieldBorderRadius?: number;
+    textFieldVariant?: TextFieldVariant;
+    textFieldHeight?: TextFieldHeight;
+    textScale?: number;
+    applyPreview?: boolean;
+    showActions?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reset: () => any;
+    apply: () => any;
+    "update:textFieldBorderRadius": (value: number) => any;
+    "update:textFieldVariant": (value: TextFieldVariant) => any;
+    "update:textFieldHeight": (value: TextFieldHeight) => any;
+    "update:textScale": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReset?: () => any;
+    onApply?: () => any;
+    "onUpdate:textFieldBorderRadius"?: (value: number) => any;
+    "onUpdate:textFieldVariant"?: (value: TextFieldVariant) => any;
+    "onUpdate:textFieldHeight"?: (value: TextFieldHeight) => any;
+    "onUpdate:textScale"?: (value: number) => any;
+}>, {
+    textFieldBorderRadius: number;
+    textFieldVariant: TextFieldVariant;
+    textFieldHeight: TextFieldHeight;
+    textScale: number;
+    applyPreview: boolean;
+    showActions: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    label?: string;
+    hint?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    apply: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onApply?: () => any;
+}>, {
+    label: string;
+    hint: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,10 +1,14 @@
 import { type PropType } from 'vue';
 import type { MenuItem } from '../../types/components/layout/menu';
-declare var __VLS_121: {}, __VLS_135: {};
+declare var __VLS_70: {
+    items: MenuItem[];
+}, __VLS_82: {}, __VLS_96: {};
 type __VLS_Slots = {} & {
-    notifications?: (props: typeof __VLS_121) => any;
+    navigation?: (props: typeof __VLS_70) => any;
 } & {
-    profile?: (props: typeof __VLS_135) => any;
+    notifications?: (props: typeof __VLS_82) => any;
+} & {
+    profile?: (props: typeof __VLS_96) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     menuOrientation: {

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

@@ -0,0 +1,30 @@
+import { type PropType } from 'vue';
+import type { MenuItem } from '../../types/components/layout/menu';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** Already-filtered navigation items supplied by the consuming application. */
+    items: {
+        type: PropType<MenuItem[]>;
+        default: () => any[];
+    };
+    /** Render as a vertical menu panel for compact header navigation. */
+    display: {
+        type: PropType<"bar" | "menu">;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** Already-filtered navigation items supplied by the consuming application. */
+    items: {
+        type: PropType<MenuItem[]>;
+        default: () => any[];
+    };
+    /** Render as a vertical menu panel for compact header navigation. */
+    display: {
+        type: PropType<"bar" | "menu">;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    items: MenuItem[];
+    display: "menu" | "bar";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/shared/BaseIcon.vue.d.ts

@@ -1,6 +1,7 @@
+import { type Component, type PropType } from 'vue';
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     icon: {
-        type: StringConstructor;
+        type: PropType<string | Component>;
         required: false;
     };
     buttonClass: {
@@ -9,12 +10,20 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     emitFunc: {
         type: FunctionConstructor;
-        required: true;
+        required: false;
     };
     rowData: ObjectConstructor;
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    ariaLabel: StringConstructor;
+    interactive: {
+        type: BooleanConstructor;
+        default: any;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    action: (rowData: unknown) => any;
+    click: (mouseEvent: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     icon: {
-        type: StringConstructor;
+        type: PropType<string | Component>;
         required: false;
     };
     buttonClass: {
@@ -23,11 +32,20 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     emitFunc: {
         type: FunctionConstructor;
-        required: true;
+        required: false;
     };
     rowData: ObjectConstructor;
-}>> & Readonly<{}>, {
+    ariaLabel: StringConstructor;
+    interactive: {
+        type: BooleanConstructor;
+        default: any;
+    };
+}>> & Readonly<{
+    onAction?: (rowData: unknown) => any;
+    onClick?: (mouseEvent: MouseEvent) => any;
+}>, {
     buttonClass: string;
+    interactive: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/shared/ToggleSwitch.vue.d.ts

@@ -15,6 +15,7 @@ interface Props {
     falseIcon?: any;
     activeColor?: string;
     inactiveColor?: string;
+    disabled?: boolean;
 }
 declare var __VLS_1: {
     value: string | boolean;
@@ -29,6 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     "onUpdate:modelValue"?: (value: string | boolean) => any;
 }>, {
     type: "boolean" | "string";
+    disabled: boolean;
     activeColor: string;
     options: StringOption[];
     inactiveColor: string;

package/dist/index.d.ts

@@ -24,6 +24,10 @@ 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 { default as AppHeaderMenu } from './components/layout/AppHeaderMenu.vue';
+export { default as AppCustomizerControls } from './components/layout/AppCustomizerControls.vue';
+export { default as AppCustomizerSubmit } from './components/layout/AppCustomizerSubmit.vue';
+export type { TextFieldHeight, TextFieldVariant } from './components/layout/AppCustomizerControls.vue';
 export { default as AppLayout } from './components/layout/AppLayout.vue';
 export type { MenuItem, HeaderAction } from './types/components/layout/menu';
 export { useDataTable } from './composables/useDataTable';