Dolphin Component

Appearance

Dolphin Components - Changelog ​

List of all dolphin component v3 changelogs

[3.1.18] - 2026-07-10 ​

New Components ​

  • Tab Component (docs)

    • Lightweight, accessible horizontal tab navigation component with v-model support.
    • Renders tab buttons with active-state styling and optional vertical separators.
    • Supports dynamic named slots per tab for fully custom tab button content (icons, badges, etc.).
    • Emits update:modelValue for v-model binding and change event for side-effect handlers.
    • TypeScript interfaces exported: TabOption, TabProps.

  • ReportPrintOption Component (docs)

    • Two-panel settings component with Report and Print tabs (powered by the Tab component).
    • Report tab: Date type presets (year-to-date, quarter-to-date, today, custom, etc.), dual-calendar (AD/BS) date pickers with automatic conversion, date range selection.
    • Print tab: Paper size selector (A3/A4/A5/Letter), page orientation (Portrait/Landscape), toggle switches for header visibility, report overview, page count, and print date.
    • Provides extensive named slots (before-date-type, after-to-date, after-paper-size, etc.) for inserting custom settings rows.
    • TypeScript interfaces exported: ReportPrintOptionProps.

  • ReportPrintOptionLayout Component (docs)

    • Layout wrapper component for creating consistent settings rows inside ReportPrintOption.
    • Renders a labeled row with header, description, and a slot for the control element.
    • TypeScript interfaces exported: ReportPrintOptionLayoutProps.
  • Dynamic Z-Index Calculation for Modal Stacking
    • Modals now automatically calculate their z-index based on the number of currently open modal panels.
    • Supports proper stacking when multiple modals are open simultaneously (nested modals).
    • Base z-index starts at 11, each subsequent modal increments by 10.
    • Backdrop z-index is always one less than its parent modal.
    • No code changes required — improvement is automatic for all Modal usages.

Tabulator Refactor ​

  • Centralized Debounce Service for AJAX Calls
    • Replaced custom setTimeout/clearTimeout logic with the centralized CreateDebounce service.
    • Improved reliability and memory management for debounced AJAX requests in remote pagination mode.
    • Added ajaxDelay prop to configure the debounce delay (default inherited from component).
    • No code changes required — improvement is automatic.

Dependency & Framework Upgrades ​

  • Upgraded dependencies: @lucide/vue to ^1.24.0, axios to ^1.18.1, sweetalert2 to ^11.26.25, vue to ^3.5.39, nepali-datepicker-vue to ^2.0.0.
  • Upgraded devDependencies: @eslint/js to ^10.0.1, @types/node to ^26.1.1, prettier to 3.9.5, typescript to ~6.0.3, typescript-eslint to ^8.63.0, vite to ^8.1.4, vue-tsc to ^3.3.7.

[3.1.17] - 2026-07-01 ​

Tabulator Component Enhancements ​

  • Added maxSelectableRows prop to support setting selection limits (accepts number | boolean, default true).
  • Added enableRangeSelect prop to enable selecting ranges of rows using standard table interaction (Shift+Click / Ctrl+Click, default false).
  • Added selectionOverflowMode prop to control overflow behavior (accepts "block" | "rolling", default "block").
  • Implemented programmatically managed custom checkboxes for row selection (createRowSelectionFormatter) and column header select-all (createSelectAllFormatter), ensuring checkboxes correctly reflect indeterminate/checked state in sync with Tabulator.
  • Added @onSelectionChange event emitting { data, rows } on selection updates.
  • Added @onSelectionLimitReached event emitting the max limit when row selection capacity is reached.
  • Implemented watch handlers for dynamic updates of selection properties (enableSelectable, maxSelectableRows, enableRangeSelect, selectionOverflowMode).

Dependency & Framework Upgrades ​

  • Upgraded dependencies: @lucide/vue to ^1.22.0, @tailwindcss/vite to ^4.3.2, @types/tabulator-tables to ^6.3.5, axios to ^1.18.1, tabulator-tables to ^6.5.2, tailwindcss to ^4.3.2, vue to ^3.5.39.
  • Upgraded devDependencies: @types/node to ^26.1.0, globals to ^17.7.0, prettier to 3.9.4, typescript-eslint to ^8.62.1, unplugin-dts to ^1.0.3, vite to ^8.1.2, vite-plugin-vue-devtools to ^8.1.5, vue-tsc to ^3.3.6.

[3.1.16-beta-2] - 2026-07-01 ​

Maintenance & Refactoring ​

  • Updated Node engine requirement in package configuration to Node 26.3.1.
  • Bumped dependencies to their latest compatible versions (including tabulator-tables to ^6.5.1).
  • Refreshed VS Code recommendations configuration (.vscode/extensions.json).

[3.1.16-beta.1] - 2026-06-10 ​

New Components & Refactoring ​

  • Added a custom local Multiselect component to replace the external vue-multiselect dependency.
  • Removed vue-multiselect package dependency to keep the package payload clean and self-contained.
  • Updated all related components (like DateRange) to import the new local Multiselect component.
  • Bumped package version to 3.1.16-beta.1 in package.json.
  • Merged master into the v3.1.17 branch (combining new Multiselect and TextEditor components with master changes).

[3.1.16] - 2026-06-20 ​

New Components ​

  • Added a custom local Multiselect component to replace the external vue-multiselect dependency.
  • Removed vue-multiselect package dependency to keep the package payload clean and self-contained.
  • Updated all related components (like DateRange) to import the new local Multiselect component.
  • Introduced search debouncing support via new debounceSearch and debounceSecond props.

[3.1.15] - 2026-06-18 ​

New Components ​

  • Added a reusable TextEditor component powered by TinyMCE.
  • Integrated TinyMCE dependencies, local oxide skins, and supporting configurations.

Tabulator Enhancements ​

  • Enhanced Tabulator component with:
    • API-driven action handling (dynamically generated actions via backend endpoints)
    • Improved pagination support
    • Better action processing and table interactions
  • Improved code density and action handling behavior across data tables.
  • Fixed Tabulator reinitialization issues.
  • Improved overall table performance and stability.

Component & UI Improvements ​

  • Updated InputError directive to support Multiselect components (targeting the .multiselect__tags class wrapper).
  • Removed unnecessary height constraints from Multiselect content rendering.
  • Refined component layouts and styling consistency.
  • Improved input styling and initialization logic.

Build System & Tooling Modernization ​

  • Migrated build tooling from vite-plugin-dts to unplugin-dts.
  • Added API Extractor support for declaration bundling.
  • Updated TypeScript configuration and declaration generation workflow.
  • Improved build reliability and package generation process.
  • Added PNPM workspace configuration support.

Dependency & Framework Updates ​

  • Migrated icon system to @lucide/vue.
  • Updated project dependencies across the component library.
  • Improved TypeScript, linting, and development tooling configuration.
  • Enhanced ESLint path resolution behavior.

Maintenance & Refactoring ​

  • Optimized Toast instance initialization using a single mixin config instead of recreating instances.
  • Improved variable initialization patterns.
  • Refactored internal component logic for better maintainability.
  • Applied general cleanup, dependency updates, and stability improvements.

[3.1.14] - 2026-06-10 ​

WebSocket Improvements ​

  • Implemented initialization promise handling for WebSocket connections.
  • Added improved connection error handling and lifecycle management.
  • Increased reliability of real-time communication features.

[3.1.13] - 2026-03-22 ​

Changed ​

  • Tabulator Row Selection Update Queuing
    • Refactored updateSelectedRow to use task queue system
    • Prevents race conditions when selection is updated before table initialization
    • Ensures selection updates are applied in correct order
    • Improves reliability when calling updateSelectedRow in rapid succession
    • No code changes required - improvement is automatic

Migration Note ​

✅ No Breaking Changes ​

This release is 100% backward compatible. All existing implementations will continue to work without modifications.

[3.1.12] - 2026-03-19 ​

⚠️ Breaking Changes ​

  • Tabulator Row Selection API Change

    • Removed selectedRows prop in favor of programmatic control

    • Added updateSelectedRow method for controlling row selection state

    • Migration required for projects using row selection with external state management

    • Migration:

      vue
      <!-- Before (v3.1.11 and earlier) -->
<Tabulator :enable-selectable="true" :selected-rows="selectedIds" />

<!-- After (v3.1.12+) -->
<Tabulator ref="tableRef" :enable-selectable="true" />

<script setup>
import { onMounted } from "vue";

const tableRef = ref(null);
const selectedIds = ref(arrayObject);

onMounted(() => {
  // Programmatically set selected rows
  tableRef.value.updateSelectedRow(selectedIds.value);
});
</script>

Added ​

  • updateSelectedRow Method

    • New exposed method for programmatically selecting/deselecting rows

    • Accepts array of row IDs or single row ID

    • Provides full control over selection state

    • Example usage:

      javascript
      // Select single row
tableRef.value.updateSelectedRow(arrayObject);

// Clear selection
tableRef.value.updateSelectedRow([]);

Migration Note ​

⚠️ Breaking Changes - Action Required ​

If you were using the selectedRows prop to control selection state externally, update your code:

Before (v3.1.11 and earlier) ​

vue
<template>
  <Tabulator
    :enable-selectable="true"
    :selected-rows="externallySelected"
    :data="tableData"
    :columns="columns"
  />
</template>

<script setup>
const externallySelected = ref(arrayObject);

watch(externallySelectedIds, (newIds) => {});
</script>

After (v3.1.12+) ​

vue
<template>
  <Tabulator
    ref="tableRef"
    :enable-selectable="true"
    :data="tableData"
    :columns="columns"
  />
</template>

<script setup>
const tableRef = ref(null);
const externallySelectedIds = ref(arrayObject);

onMounted(() => {
  tableRef.value.updateSelectedRow(externallySelectedIds.value);
});

watch(externallySelectedIds, (newIds) => {
  tableRef.value.updateSelectedRow(newIds);
});
</script>

Why This Change? ​

The selectedRows prop created a two-way binding pattern that conflicted with Vue's unidirectional data flow principles. The new approach:

✅ More Vue-idiomatic - Uses ref and methods instead of prop binding ✅ Better performance - Eliminates unnecessary reactivity overhead ✅ More flexible - Programmatic control allows complex selection logic ✅ Clearer API - Explicit method calls make code more readable

[3.1.11] - 2026-03-16 ​

Added ​

  • DateSelector disabled Prop
    • New disabled prop to prevent user interaction with the date selector
    • Applies disabled styling to match form field standards
    • Example usage:
      vue
      <DateSelector v-model="date" :disabled="isReadOnly" />

Changed ​

  • Dependency Updates
    • Updated package dependencies to latest compatible versions
    • Improved security and performance
    • Better compatibility with modern build tools

Fixed ​

  • Tabulator Row Selection Implementation
    • Completed row selection feature implementation from v3.1.6
    • Fixed edge cases in selection state management
    • Improved selection persistence across pagination
    • Better handling of select all/deselect all functionality

Migration Guide ​

✅ No Breaking Changes ​

This release is 100% backward compatible. All existing implementations will continue to work without modifications.

[3.1.10] - 2026-02-11 ​

Fixed ​

  • Tabulator Crash on Disabled Footer
    • Fixed tabulator crashing when disableFooter prop is set to true
    • Refined pagination mode logic to handle non-paginated state correctly
    • Corrected data return logic when footer/pagination is disabled
    • Introduced in v3.1.7 — update immediately if using disableFooter

Migration Note ​

✅ No Breaking Changes ​

This release is 100% backward compatible. All existing implementations will continue to work without modifications.

[3.1.9] - 2026-02-11 ​

⚠️ WARNING: This version has a critical tabulator build issue. Please use v3.1.9 instead.

Fixed ​

  • ESLint Module Export
    • Changed module export from export = to export default for correct ES module compatibility
    • Resolves import issues when using the ESLint plugin in modern ES module projects
    • Migration: No code changes required — existing imports continue to work correctly

Migration Note ​

✅ No Breaking Changes ​

This release is 100% backward compatible. All existing implementations will continue to work without modifications.

[3.1.8] - 2026-02-11 ​

⚠️ WARNING: This version has a critical eslint types build issue. Please use v3.1.9 instead.

Added ​

  • TypeScript Declaration Export for ESLint
    • Added d.ts type declaration file for the custom ESLint plugin
    • Improves TypeScript support when using the ESLint configuration in TypeScript projects
    • Better IDE autocomplete and type checking for ESLint rule configurations

Migration Note ​

✅ No Breaking Changes ​

This release is 100% backward compatible. All existing implementations will continue to work without modifications.

[3.1.7] - 2026-02-11 ​

Added ​

  • Tabulator disableFooter Prop
    • New disableFooter prop to hide the tabulator footer/pagination bar
    • Useful for compact tables or non-paginated data displays
    • Example usage:
      vue
      <Tabulator :disable-footer="true" :data="tableData" :columns="columns" />

Fixed ​

  • DateSelector Empty v-model Value
    • Fixed v-model not being set when an empty value is passed to the DateSelector
    • Component now correctly handles and reflects empty/null initial values
    • Prevents inconsistent state when clearing or resetting date fields

Migration Note ​

✅ No Breaking Changes ​

This release is 100% backward compatible. All existing implementations will continue to work without modifications.

[3.1.6] - 2026-02-03 ​

Added ​

  • Tabulator Row Selection Functionality

    • New enableSelectable prop enables multi-row selection with checkboxes

    • Exposed getSelectedData() function to retrieve selected rows programmatically

    • Select all/deselect all functionality in header checkbox

    • Individual row selection with checkboxes in first column

    • Selected rows maintain state during pagination and filtering

    • Example usage:

      vue
      <Tabulator
  ref="tableRef"
  :enableSelectable="true"
  :data="tableData"
  :columns="columns"
/>

<button @click="handleGetSelected">Get Selected</button>

<script setup>
const tableRef = ref(null);

const handleGetSelected = () => {
  const selected = tableRef.value.getSelectedData();
  console.log("Selected rows:", selected);
};
</script>

Changed ​

  • Dependency Updates
    • Updated package dependencies to latest compatible versions
    • Improved security and performance
    • Better compatibility with modern build tools
  • Tabulator Row Styling Refinements
    • Enhanced row hover states for better visual feedback
    • Improved selected row highlighting
    • Better distinction between active, hover, and selected states
    • Smoother transitions between states
  • Tabulator Resize Handle Styling
    • Refined column resize handle appearance
    • Better visibility during hover
    • Improved cursor indication for resizable columns
    • More intuitive resize interaction

Fixed ​

  • Removed Debug Console Logs
    • Cleaned up debug console.log statements from Modal component
    • Removed debugging logs from Tabulator component
    • Cleaner browser console output in production
    • Improved performance by reducing unnecessary logging

Migration Note ​

✅ No Breaking Changes ​

This release is 100% backward compatible. All existing implementations will continue to work without modifications.

[3.1.5] - 2026-01-26 ​

Added ​

  • Multiselect Dropdown Height Limit
    • Implemented maximum height cap for multiselect dropdown menus
    • Dropdown becomes scrollable when options exceed viewport space
    • Prevents dropdown from extending beyond screen boundaries
    • Improves usability on pages with many selectable options

Changed ​

  • Modal Component Positioning Logic
    • Refactored modal positioning system for better viewport handling
    • Improved centering logic across different screen sizes
    • Better handling of dynamic content height changes
    • Modal now repositions when content size changes dynamically
  • Modal Dynamic Sizing
    • Enhanced modal width calculation for responsive behavior
    • Better handling of min/max width constraints
    • Improved content overflow handling
    • Smoother transitions when modal content changes

Fixed ​

  • DateSelector BS Date Handling
    • Fixed default Bikram Sambat (BS) date not being set correctly on component mount
    • BS date now properly converts and displays on initial render
    • Corrected date conversion logic between BS and AD formats
    • Prevents invalid date states when toggling between BS/AD modes
  • Multiselect Dropdown Overflow
    • Fixed dropdown extending beyond viewport bottom on small screens
    • Dropdown now automatically scrolls when content exceeds available space
    • Better positioning when multiselect is near page bottom

[3.1.4] - 2026-01-21 ​

Fixed ​

  • Critical Build Issue
    • Fixed broken build from v3.1.3 where CSS files were not properly included
    • All component styles now correctly bundled in distribution
    • Resolved missing styles causing components to render incorrectly
    • Migration: Update to v3.1.4 immediately if you installed v3.1.3
    • Note: v3.1.3 should not be used - please upgrade to v3.1.4

[3.1.3] - 2026-01-21 ​

⚠️ WARNING: This version has a critical build issue. Please use v3.1.4 instead.

Added ​

  • Tabulator Task Queuing System
    • Implemented task queue to handle prop updates before tabulator initialization
    • Ensures data, columns, and configuration updates are processed in correct order
    • Prevents race conditions when multiple props change simultaneously
    • Fixes issues where data updates were ignored during initialization
  • Date Range Filtering for Tabulator
    • Fixes issues where date type wise date was not being set in initialization
  • ESLint Custom Rule for Pinia Stores
    • Eslint is a peer dependency for the plugin
    • New custom ESLint rule prevents duplicate Pinia store IDs
    • Catches duplicate store definitions at development time
    • For installation guide use this refrence

Fixed ​

  • Textarea Component
    • Fixed default max-height not being applied correctly
    • Textarea now properly constrains height with scrollbar when content exceeds maximum
    • Improved visual consistency across different content sizes
  • Tabulator Action Button Issues
    • Fixed action buttons breaking when action name has more than 3 words
    • Action names like "Mark as Complete Task" now work correctly
    • Example: "Export to PDF" now generates proper action and emits instead of breaking
  • Tabulator Action Persistence Issues
    • Fixed action dropdowns still showing after hot module reload (HMR) in development
    • Fixed action menus persisting when navigating away from page
    • Properly cleanup action event listeners on component unmount
    • Prevents memory leaks in development environment

Changed ​

  • Build Script Updates
    • Updated build scripts for better compatibility
    • Improved TypeScript compilation process
    • Enhanced development server configuration
  • TypeScript Configuration
    • Updated tsconfig.json for better type checking
    • Improved module resolution
    • Better compatibility with modern Vue and Vite
  • Dependency Updates
    • Updated ESLint and related plugins to latest versions
    • Updated TypeScript and type definitions
    • Updated build tools for improved performance

Migration Notes ​

  • Required: Eslint package is now a peer dependency to run dolphin-package

[3.1.2] - 2026-01-14 ​

Fixed ​

  • Component Export Issue
    • Fixed FileUpload and FilePreview components not being properly exported from package
    • Components are now accessible via standard import
      javascript
      // Now works correctly
import { FileUpload, FilePreview } from "dolphin-components";

[3.1.1] - 2026-01-14 ​

Added ​

  • File Preview Component (docs)
    • Component for previewing uploaded files (images, PDFs, documents)
    • Support for multiple file formats
    • Responsive preview interface
    • TypeScript interface exported: FilePreview
  • File Upload Component (docs)
    • Drag-and-drop file upload functionality
    • Multiple file selection support
    • File size and type validation
    • TypeScript interface exported: FileUpload
  • Exported TypeScript Interfaces
    • FilePreview interface exported for type safety
    • FileUpload interface exported for type safety

Fixed ​

  • Critical Import Issue
    • Fixed nextTick being incorrectly imported from process package instead of vue
    • Prevents runtime errors and build issues
    • Migration: No action needed - fix is automatic
  • DateSelector UI Improvements
    • Fixed visual inconsistencies in date picker interface
    • Better alignment of date input elements
  • FocusNext Function
    • Fixed focus function not working due to misconfig
    • Changes in the Usage of focusnext in setup script (here)
  • Button UI Fixes
    • Fixed button ui inconsistencies across variants
    • Fixed button heights
    • Better icon alignment in icon buttons
  • Input UI Fixes
    • Fixed input and input type color heights
  • Form UI Fixes
    • Fixed input field label design

Migration Notes ​

The following issues are automatically resolved with this update:

  • nextTick import error (no code changes required)
  • Button, Input, and Form UI improvements (automatic styling updates)

[v3.1.0] - 2025-12-16 ​

⚠️ Breaking Changes ​

  • Node.js version requirement updated to Node 24
    • Previous versions of Node.js below 22 are no longer supported
    • Migration: Upgrade your Node.js installation to version 24 or higher
  • Column attribute isNotMandatory is removed from tabulator
    • Replaced with isMandatory for better clarity
    • isMandatory determines whether a visible column toggle field is disabled in settings
    • Migration: Replace isNotMandatory: true with isMandatory: false and vice versa

Added ​

  • Right-click context menu support for action dropdowns
    • Action dropdowns can now be opened by right-clicking anywhere on a table row
    • Context menu intelligently positions at mouse cursor location
    • Automatically selects the row when right-clicked
  • Icon button styles with .btn-icon class
    • Optimized padding and dimensions for icon-only buttons
    • Applied to all toolbar buttons (Settings, Print, Export)

Changed ​

  • Enhanced action dropdown positioning system
    • Dropdowns now render as fixed position overlays with z-index: 9999
    • Intelligent viewport detection prevents dropdowns from being cut off at edges
    • Separate positioning strategies for button clicks vs right-clicks
    • Uses portal-like pattern for better rendering performance
  • Button styling improvements
    • All buttons now have consistent height (36px)
    • Action buttons include active state with border styling
    • Replaced text "..." ellipsis with professional SVG icon for better scaling
  • Footer visual enhancements
    • Added border to tabulator footer for clearer visual hierarchy
    • Better distinction between table content and pagination controls
  • Improved accessibility
    • Removed hidden paginator labels from DOM
    • Cleaner markup for screen readers
    • Better keyboard navigation support for dropdown interactions

Performance ​

  • Event handler optimization
    • Action dropdown event listeners now properly created and destroyed
    • Uses ref-based handler storage to prevent memory leaks
    • Proper cleanup in onBeforeUnmount lifecycle hook
    • Single event handler for all dropdown interactions instead of multiple listeners
  • Render performance improvements
    • Dropdown rendering moved to document body (portal-like behavior)
    • Prevents layout recalculation when dropdown opens
    • Uses placeholder element to track original position

Fixed ​

  • Dropdown interaction issues
    • Fixed dropdowns remaining open when clicking outside table
    • Fixed multiple dropdowns being open simultaneously
    • Dropdown now properly closes when scrolling the table
    • Right-click on action button no longer opens browser context menu
  • Row selection behavior
    • Fixed row selection state not updating correctly with right-click
    • Previous selected row now properly deselected when right-clicking new row
    • Selection state persists correctly when dropdown is open
  • Minimum height calculation
    • Tabulator now enforces minimum height of 250px
    • Prevents table from becoming unusable on small screens
    • Better handling of dynamic viewport changes
  • Type safety improvements
    • TabulatorHeader interface now properly extends ColumnDefinition
    • Improved TypeScript inference for column configurations
    • Better autocomplete support in IDEs

Migration Notes ​

  • Optional: Update custom toolbar buttons to use .btn-icon class for consistent styling
  • Optional: Remove any custom CSS workarounds for dropdown positioning - now handled automatically