@zeedhi/vuetify 1.88.0 → 1.89.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/vuetify",
-  "version": "1.88.0",
+  "version": "1.89.0",
   "description": "Zeedhi Components based on Vuetify",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -51,5 +51,5 @@
     "@types/prismjs": "1.26.*",
     "@types/sortablejs": "1.15.*"
   },
-  "gitHead": "1316689cfc17d7fa378c446780ff643181f49355"
+  "gitHead": "2e4c72ed58142dfed158a8a016d238ad79a61f6e"
 }

package/types/components/public.d.ts

@@ -35,6 +35,8 @@ import ZdGridAction from './zd-grid/subcomponents/cell/ZdGridAction';
 import ZdGridCell from './zd-grid/subcomponents/cell/ZdGridCell';
 import ZdGridCellContent from './zd-grid/subcomponents/cell/ZdGridCellContent';
 import ZdGridCellEdit from './zd-grid/subcomponents/cell/ZdGridCellEdit';
+import ZdGridEditableCellContent from './zd-grid/subcomponents/cell/ZdGridEditableCellContent';
+import ZdGridRow from './zd-grid/subcomponents/cell/ZdGridRow';
 import ZdTreeGridCellContent from './zd-tree-grid/cell/ZdTreeGridCellContent';
 import ZdGridEditable from './zd-grid/ZdGridEditable';
 import ZdHeader from './zd-header/ZdHeader';
@@ -89,4 +91,4 @@ import ZdTooltip from './zd-tooltip/ZdTooltip';
 import ZdTree from './zd-tree/ZdTree';
 import ZdTreeGrid from './zd-tree-grid/ZdTreeGrid';
 import ZdTreeGridEditable from './zd-tree-grid/ZdTreeGridEditable';
-export { ZdAlert, ZdApexChart, ZdBadge, ZdBreadcrumbs, ZdButton, ZdButtonGroup, ZdCard, ZdCarousel, ZdCheckbox, ZdCheckboxMultiple, ZdChip, ZdCodeEditor, ZdCol, ZdCollapseCard, ZdComponent, ZdComponentRender, ZdContainer, ZdCurrency, ZdDashboard, ZdDate, ZdDateRange, ZdDialog, ZdDivider, ZdDropdown, ZdFileInput, ZdFooter, ZdForm, ZdFrame, ZdFramePage, ZdGrid, ZdGridFooter, ZdGridEditable, ZdIterableNoData, ZdGridTop, ZdGridAction, ZdGridCell, ZdGridCellContent, ZdGridCellEdit, ZdTreeGridCellContent, ZdHeader, ZdImage, ZdIncrement, ZdInput, ZdIterable, ZdIterableComponentRender, ZdIterableColumnsButton, ZdIterablePagination, ZdIterablePageSize, ZdIterablePageInfo, ZdList, ZdListItem, ZdListGroup, ZdLoading, ZdLogin, ZdLoginButton, ZdMasterDetail, ZdMenu, ZdMenuLink, ZdMenuGroup, ZdMenuButton, ZdMenuSeparator, ZdModal, ZdModalCloseButton, ZdMonth, ZdNumber, ZdPassword, ZdProgress, ZdRadio, ZdRangeSlider, ZdRow, ZdSearch, ZdSelectableList, ZdSelect, ZdSelectTree, ZdSelectTreeMultiple, ZdSpeedDial, ZdSteppers, ZdSvgMap, ZdSwitch, ZdTable, ZdTabs, ZdTag, ZdText, ZdTextarea, ZdTextInput, ZdTime, ZdToggleable, ZdTooltip, ZdTree, ZdTreeGrid, ZdTreeGridEditable, };
+export { ZdAlert, ZdApexChart, ZdBadge, ZdBreadcrumbs, ZdButton, ZdButtonGroup, ZdCard, ZdCarousel, ZdCheckbox, ZdCheckboxMultiple, ZdChip, ZdCodeEditor, ZdCol, ZdCollapseCard, ZdComponent, ZdComponentRender, ZdContainer, ZdCurrency, ZdDashboard, ZdDate, ZdDateRange, ZdDialog, ZdDivider, ZdDropdown, ZdFileInput, ZdFooter, ZdForm, ZdFrame, ZdFramePage, ZdGrid, ZdGridFooter, ZdGridEditable, ZdIterableNoData, ZdGridTop, ZdGridAction, ZdGridCell, ZdGridCellContent, ZdGridCellEdit, ZdGridEditableCellContent, ZdGridRow, ZdTreeGridCellContent, ZdHeader, ZdImage, ZdIncrement, ZdInput, ZdIterable, ZdIterableComponentRender, ZdIterableColumnsButton, ZdIterablePagination, ZdIterablePageSize, ZdIterablePageInfo, ZdList, ZdListItem, ZdListGroup, ZdLoading, ZdLogin, ZdLoginButton, ZdMasterDetail, ZdMenu, ZdMenuLink, ZdMenuGroup, ZdMenuButton, ZdMenuSeparator, ZdModal, ZdModalCloseButton, ZdMonth, ZdNumber, ZdPassword, ZdProgress, ZdRadio, ZdRangeSlider, ZdRow, ZdSearch, ZdSelectableList, ZdSelect, ZdSelectTree, ZdSelectTreeMultiple, ZdSpeedDial, ZdSteppers, ZdSvgMap, ZdSwitch, ZdTable, ZdTabs, ZdTag, ZdText, ZdTextarea, ZdTextInput, ZdTime, ZdToggleable, ZdTooltip, ZdTree, ZdTreeGrid, ZdTreeGridEditable, };

package/types/components/zd-grid/ZdGrid.d.ts

@@ -47,6 +47,7 @@ export default class ZdGrid extends ZdIterable {
     fixedRight: IDictionary<string>;
     mounted(): void;
     private setViewGetWidth;
+    orderHeaders(headers: Column[]): Column[];
     parseWidth(width?: string): number;
     calcWidth(column: Column, width?: string): string;
     setSpanWidth(column: Column): string;

package/types/components/zd-grid/ZdGridEditable.d.ts

@@ -1,4 +1,4 @@
-import { GridEditable, GridColumnEditable, IGridColumnEditable, Column } from '@zeedhi/common';
+import { GridEditable, Column } from '@zeedhi/common';
 import { IDictionary } from '@zeedhi/core';
 import ZdGrid from './ZdGrid';
 export interface IColumnWidths {
@@ -14,36 +14,15 @@ export default class ZdGridEditable extends ZdGrid {
     canEditRow: Function | string;
     editNewRowsOnly: boolean | string;
     editingNewRows: boolean | string;
+    singleEdit: boolean | string;
     instance: GridEditable;
     instanceType: typeof GridEditable;
-    inputToFocus: string;
     isTrVisible: boolean;
-    getEditableComponent(column: IGridColumnEditable, row: IDictionary<any>, cellProps: IDictionary<any>): {
-        name: string;
-        parent: GridEditable;
-        align: "left" | "center" | "right" | undefined;
-        showLabel: boolean;
-        showHelper: boolean;
-        dense: boolean;
-        value: any;
-        events: any;
-        autofill: boolean;
-        allowDuplicate: boolean;
-    };
-    cellClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, canEdit?: boolean): void;
-    callCellClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, canEdit?: boolean): void;
     private navigationKeyMapping;
-    private onMountedEvent;
     getColWidth(col: Column): boolean;
     protected registerOnVisible(): void;
     mounted(): void;
     beforeDestroy(): void;
-    private getTdNode;
-    private getArrayFromElementTag;
-    private getArrayFromTdElement;
-    private getArrayFromTrElement;
-    private findNextTd;
-    private navigate;
     private navigateUp;
     private navigateDown;
     hasToggleIcon(column: Column, row: IDictionary<any>): boolean;

package/types/components/zd-grid/subcomponents/cell/ZdGridCellContent.d.ts

@@ -12,6 +12,7 @@ export default class ZdGridCellContent extends Vue {
     row: IDictionary<any>;
     getWidthStyle: Function;
     hasUsingCellText: boolean;
+    visibleValue: any;
     mouseenter(event: Event): void;
     mouseleave(event: Event): void;
     get cellProps(): {

package/types/components/zd-grid/subcomponents/cell/ZdGridCellEdit.d.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { Column } from '@zeedhi/common';
+import { Column, IComponent } from '@zeedhi/common';
 import { IDictionary } from '@zeedhi/core';
 /**
  * Grid cell Edit component
@@ -8,11 +8,8 @@ export default class ZdGridCellEdit extends Vue {
     column?: Column;
     rowStyle?: IDictionary<any>;
     cellsApplied?: IDictionary<any>;
-    isEdited?: boolean;
-    isValid?: boolean;
-    row?: IDictionary<any>;
+    row: IDictionary<any>;
     rowKey?: string | number;
-    getEditableComponent?: Function;
-    getWidthStyle?: Function;
+    component?: IComponent;
     get cellProps(): {};
 }

package/types/components/zd-grid/subcomponents/cell/ZdGridEditableCellContent.d.ts

@@ -0,0 +1,51 @@
+import Vue from 'vue';
+import { Column } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+/**
+ * Grid cell Edit component
+ */
+export default class ZdGridEditableCellContent extends Vue {
+    column: Column;
+    rowStyle?: IDictionary<any>;
+    cellsApplied?: IDictionary<any>;
+    row: IDictionary<any>;
+    rowKey: string | number;
+    getEditableComponent: Function;
+    getWidthStyle: Function;
+    hasToggleIcon: Function;
+    getVisibleValue: Function;
+    isEdited: Function;
+    isValid: Function;
+    register: Function;
+    isCellEditable: Function;
+    canEdit: boolean;
+    cssClass: (IDictionary<boolean> | string)[];
+    get cellProps(): {};
+    get editable(): any;
+    get tabindex(): 0 | -1;
+    component: any;
+    updateComponent(): void;
+    visibleValue: null;
+    getNewVisibleValue(): any;
+    updateVisibleValue(): void;
+    edited: boolean;
+    updateEdited(): void;
+    valid: boolean;
+    updateValid(): void;
+    get id(): string;
+    registerComponent(): void;
+    mounted(): void;
+    /**
+     * Forces the component to update
+     * this is needed to avoid reactivity to crosstab editedRows,
+     * which can cause unnecessary rerenders
+     */
+    forceUpdate(): void;
+    rowChange(): void;
+    editing: boolean;
+    enterEdit(): void;
+    leaveEdit(): void;
+    click(event: Event): void;
+    focus(event: Event): void;
+    focusInput(): void;
+}

package/types/components/zd-grid/subcomponents/cell/ZdGridRow.d.ts

@@ -0,0 +1,12 @@
+import { IDictionary } from '@zeedhi/core';
+import Vue from 'vue';
+/**
+ * Grid row component
+ */
+export default class ZdGridRow extends Vue {
+    isActive: boolean;
+    row: IDictionary;
+    isCurrentRow: Function;
+    classes: IDictionary;
+    get isCurrent(): any;
+}

package/types/components/zd-tree-grid/ZdTreeGridEditable.d.ts

@@ -1,4 +1,4 @@
-import { TreeGridEditable, GridColumnEditable, IGridColumnEditable, Column } from '@zeedhi/common';
+import { TreeGridEditable, Column } from '@zeedhi/common';
 import { IDictionary } from '@zeedhi/core';
 import ZdTreeGrid from './ZdTreeGrid';
 import { IColumnWidths } from '../zd-grid/ZdGridEditable';
@@ -9,36 +9,15 @@ export default class ZdTreeGridEditable extends ZdTreeGrid {
     doubleClickEdit: boolean | string;
     canEditRow: Function | string;
     hasUsingCellText: boolean;
+    singleEdit: boolean | string;
     instance: TreeGridEditable;
     instanceType: typeof TreeGridEditable;
-    inputToFocus: string;
     isTrVisible: boolean;
-    getEditableComponent(column: IGridColumnEditable, row: IDictionary<any>, cellProps: IDictionary<any>): {
-        name: string;
-        parent: TreeGridEditable;
-        align: "left" | "center" | "right" | undefined;
-        showLabel: boolean;
-        showHelper: boolean;
-        dense: boolean;
-        value: any;
-        events: any;
-        autofill: boolean;
-        allowDuplicate: boolean;
-    };
-    cellClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, canEdit?: boolean): void;
-    callCellClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, canEdit?: boolean): void;
     private navigationKeyMapping;
-    private onMountedEvent;
     getColWidth(col: Column): boolean;
     private registerOnVisible;
     mounted(): void;
     beforeDestroy(): void;
-    private getTdNode;
-    private getArrayFromElementTag;
-    private getArrayFromTdElement;
-    private getArrayFromTrElement;
-    private findNextTd;
-    private navigate;
     private navigateUp;
     private navigateDown;
     hasToggleIcon(column: Column, row: IDictionary<any>): boolean;

package/types/index.d.ts

@@ -10,6 +10,7 @@ declare const Zeedhi: {
 export default Zeedhi;
 export * from './components';
 export * from './components/public';
+export * from './mixins';
 export * from './utils/colors';
 export * from './utils/icons/icons';
 export * from './utils/decorators';

package/types/mixins/editable-mixin/EditableMixin.d.ts

@@ -0,0 +1,76 @@
+import Vue from 'vue';
+import { GridColumnEditable, GridEditable, IGridColumnEditable } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+interface IUpdatableComponent {
+    forceUpdate: () => void;
+    enterEdit: () => void;
+    leaveEdit: () => void;
+    registerComponent: () => void;
+    focusInput: () => void;
+}
+export default class EditableMixin extends Vue {
+    instance: GridEditable;
+    rowKey: Function;
+    inputToFocus: IUpdatableComponent | null;
+    cellComponents: Map<string, IUpdatableComponent>;
+    /**
+     * Variable to store the ids of the cells to be forced update
+     */
+    currentUpdatingIds: string[];
+    get editedRows(): IDictionary<any>[];
+    /**
+     * Watches editedRows and decides which cells should be forced update
+     * Normally only two will be updated each time: the cell that is entering edit mode
+     * and the cell that is leaving edit mode, but it is possible to have more
+     * updates, for example when calling `cancelEditedRows()`, all edited rows must be updated
+     */
+    changeEditedRows(newEditedRows: IDictionary[]): void;
+    changeEditing(editing: boolean): void;
+    /**
+     * Registers a new component in `cellComponents`
+     * @param id component id
+     * @param component
+     */
+    register(id: string, component: IUpdatableComponent): void;
+    editingComponent: IUpdatableComponent | null;
+    editingComponentId: string | null;
+    /**
+     * Makes
+     *  a component enter edit mode, also making the previous editing component
+     * leave edit mode
+     */
+    enterCompEdit(component: IUpdatableComponent, id: string): void;
+    leaveEdit(component: IUpdatableComponent | null): void;
+    enterEdit(component: IUpdatableComponent): void;
+    isCellEditable(row: IDictionary, column: GridColumnEditable, canEdit: boolean): boolean;
+    isEdited(column: IGridColumnEditable, row: IDictionary): boolean;
+    isValid(column: IGridColumnEditable, row: IDictionary): boolean;
+    getEditableComponent(column: IGridColumnEditable, row: IDictionary<any>, cellProps: IDictionary<any>): {
+        name: string;
+        parent: GridEditable;
+        align: "left" | "center" | "right" | undefined;
+        showLabel: boolean;
+        showHelper: boolean;
+        dense: boolean;
+        value: any;
+        events: any;
+        autofill: boolean;
+        allowDuplicate: boolean;
+    };
+    cellClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, canEdit?: boolean, componentId?: string): void;
+    callCellClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, canEdit: boolean, componentId: string): void;
+    cellFocus(component: IUpdatableComponent, id: string): void;
+    getVisibleValue(row: IDictionary, column: GridColumnEditable): any;
+    /**
+     * Focus an element or its first focusable children
+     * @param element element to be focused
+     */
+    focusElement(element?: HTMLElement | null): void;
+    private getTdNode;
+    private getArrayFromElementTag;
+    private getArrayFromTdElement;
+    private getArrayFromTrElement;
+    private findNextTd;
+    navigate(up: boolean): void;
+}
+export {};

package/types/mixins/index.d.ts

@@ -0,0 +1,2 @@
+import EditableMixin from './editable-mixin/EditableMixin';
+export { EditableMixin, };