tsv2-library 0.0.21 → 0.0.23

package/dist/components/v2/ButtonBulkAction/ButtonBulkAction.vue.d.ts

@@ -1,5 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { DefineComponent } from 'vue';
-import { MenuItem } from '../../../../node_modules/primevue/menuitem';
+import { MenuItem } from '../Menu/MenuItem.d';
 import { TSVueIcons } from '../Icon/Icon.vue.d';
 
 export type MenuOption = Omit<MenuItem, 'label', 'command', 'icon'> & {
@@ -26,9 +27,9 @@ export type MenuOption = Omit<MenuItem, 'label', 'command', 'icon'> & {
 export interface ButtonBulkActionProps {
   /**
    * An array of data objects to be included in an action.
-   * Use as 'v-model:selectedDatas' to automatically reset on Cancel or Apply.
+   * Use as 'v-model:selectedData' to automatically reset on Cancel or Apply.
    */
-  selectedDatas: Record<string, unknown>[];
+  selectedData: Record<string, any>[];
   options: MenuOption[];
   /**
    * Specify the name/label for selected data.
@@ -48,7 +49,7 @@ export type ButtonBulkActionEmits = {
   /**
    * Emits when Cancel or Apply button is clicked.
    */
-  'update:selectedDatas': [datas: Record<string, unknown>[]];
+  'update:selectedData': [datas: Record<string, unknown>[]];
 };
 
 /**

package/dist/components/v2/ButtonRadio/ButtonRadio.vue.d.ts

@@ -0,0 +1,10 @@
+import { DefineComponent } from 'vue';
+import { RadioButtonProps, RadioButtonEmits } from '../../../../node_modules/primevue/radiobutton';
+
+export type ButtonRadioProps = RadioButtonProps;
+
+export type ButtonRadioEmits = RadioButtonEmits;
+
+declare const ButtonRadio: DefineComponent<ButtonRadioProps, ButtonRadioEmits>;
+
+export default ButtonRadio;

package/dist/components/v2/DataTable/DataTable.vue.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component } from 'vue';
 
 type Data = Record<string, unknown>;
@@ -28,7 +29,7 @@ export type TableColumn = {
   excluded?: boolean;
   bodyStyle?: (props: unknown) => string;
   bodyTemplate?: (data: unknown) => string | undefined;
-  bodyComponent?: (data: unknown) => TaCellbleComponent;
+  bodyComponent?: (data: unknown) => TableCellComponent;
   headerTemplate?: () => string;
   headerComponent?: () => {
     component: string | Component;
@@ -51,3 +52,180 @@ export type TableOption = {
   danger?: boolean;
   visible?: boolean;
 };
+
+/**
+ * Custom row click event.
+ * @see {@link DataTableEmits['row-click']}
+ */
+export interface DataTableRowClickEvent {
+  /**
+   * Browser event.
+   */
+  originalEvent: Event;
+  /**
+   * Selected row data.
+   */
+  data: any;
+  /**
+   * Row index.
+   */
+  index: number;
+}
+
+/**
+ * Custom row select all change event.
+ * @see {@link DataTableEmits['select-all-change']}
+ */
+export interface DataTableSelectAllChangeEvent {
+  /**
+   * Browser event
+   */
+  originalEvent: Event;
+  /**
+   * Whether all data is selected.
+   */
+  checked: boolean;
+}
+
+export interface TSDataTableProps {
+  /**
+   * An array of table columns to display.
+   */
+  columns: TableColumn[];
+  /**
+   * An array of objects to display in the table.
+   */
+  data?: Data[];
+  /**
+   * The key of the data object to use as a unique identifier.
+   */
+  dataKey: string;
+  /**
+   * The query search from ButtonSearch component.
+   */
+  search?: string;
+  /**
+   * The default query params that must be included every fetch request.
+   */
+  defaultQueryParams?: Readonly<Record<string, any>>;
+  /**
+   * The function to fetch data on DataTable mounted and on queryParams dependencies updated.
+   */
+  fetchFunction(params: QueryParams): Promise<FetchResponse | undefined>;
+  /**
+   * The number of rows to display per page.
+   * @defaultValue 5
+   */
+  rows?: number;
+  /**
+   * Whether all rows are selected or not.
+   */
+  isSelectedAll?: boolean;
+  filters?: DataTableFilterMeta;
+  /**
+   * Determine the type of DataTable.
+   *
+   * Sets to lazy if you need to dynamicaly shows data.
+   */
+  lazy?: boolean;
+  loading?: boolean;
+  /**
+   * Whether to enable 'checkbox' | 'single' selection.
+   *
+   * @default 'checkbox'
+   */
+  selectionType?: 'single' | 'checkbox';
+  /**
+   * Whether to enable checkbox multi-selection.
+   *
+   * @deprecated use 'selection-type="checkbox"'
+   */
+  useSelection?: boolean;
+  /**
+   * An array of selected objects from `data`.
+   */
+  selectedData?: Data[];
+  /**
+   * Wether display pagination under the table or not.
+   */
+  usePaginator?: boolean;
+  /**
+   * The options that will be visible for each row data.
+   *
+   * __Provide at least one option to display an Options Menu for each row.__
+   *
+   * The options menu will be displayed on the right side of the table row.
+   */
+  options?: MenuOption[];
+  /**
+   * Whether to enable single selection or not.
+   * If enabled, clicking a row will trigger the `rowSelect` event with the corresponding data object passed as a parameter.
+   *
+   * @deprecated use 'selection-type="single"'
+   * @note Do not combine `singleSelect` with `useSelection`, as it may lead to unexpected behavior.
+   */
+  singleSelect?: boolean;
+}
+
+export type TSDataTableEmits = {
+  /**
+   * Emits when option menu button clicked.
+   */
+  'toggleOption': [data: Data];
+  /**
+   * @deprecated use 'v-model:selected-data' instead.
+   */
+  'selectData': [data: Data[]];
+  'rowSelect': [data: DataTableRowClickEvent];
+  /**
+   * Event emitted when the `isSelectedAll` property is updated.
+   *
+   * @event update:isSelectedAll
+   * @param {boolean} data - The updated value of `isSelectedAll`.
+   *
+   * @example
+   * <TSDataTable v-model:is-selected-all="isSelectedAll" />
+   *
+   * This will update the `isSelectedAll` value when one of checkbox is unchecked.
+   *
+   * @deprecated;
+   */
+  // 'update:isSelectedAll': [data: boolean];
+  /**
+   * Event emitted when the page changes in the data table.
+   *
+   * @event page
+   * @param {DataTablePageEvent} data - The event data containing information about the new page.
+   *
+   * @example
+   * <TSDataTable @page="handlePageChange" />
+   *
+   * This will call the `handlePageChange` method whenever the page changes in the data table.
+   */
+  'page': [data: DataTablePageEvent];
+
+  /**
+   * Event emitted when the sort order changes in the data table.
+   *
+   * @event sort
+   * @param {DataTableSortEvent} data - The event data containing information about the new sort order.
+   *
+   * @example
+   * <TSDataTable @sort="handleSortChange" />
+   *
+   * This will call the `handleSortChange` method whenever the sort order changes in the data table.
+   */
+  'sort': [data: DataTableSortEvent];
+  /**
+   * Event emitted when the `selectedData` property is updated.
+   *
+   * @event update:selectedData
+   * @param {Data[]} datas - The updated array of selected data objects.
+   *
+   * @example
+   * <TSDataTable v-model:selected-data="selectedData" />
+   *
+   * This will update the `selectedData` value whenever a row is selected or deselected.
+   */
+  'update:selectedData': [datas: Data[]];
+};

package/dist/components/v2/DialogConfirm/DialogConfirm.vue.d.ts

@@ -39,6 +39,14 @@ export interface DialogConfirmProps {
    * @default true
    */
   closeAfterConfirm?: boolean;
+  /**
+   * To hide/show the confirm button.
+   *
+   * Set to 'false' Make the confirm dialog cannot be confirmed.
+   *
+   * @default true;
+   */
+  actionable?: boolean;
 }
 
 /**

package/dist/components/v2/Icon/Icon.vue.d.ts

@@ -17,26 +17,36 @@ export type TSVueIcons =
   | 'check'
   | 'checkbox-circle'
   | 'close'
+  | 'completion'
   | 'delete-bin'
+  | 'disposal'
   | 'download'
   | 'edit'
   | 'ellipsis-h'
   | 'error'
   | 'exchange'
+  | 'extension-borrow'
   | 'file-edit'
   | 'file-info'
   | 'file-lines'
+  | 'file-settings'
   | 'filter-fill'
   | 'filter-line'
-  | 'file-settings'
   | 'hand-coin'
+  | 'handheld'
   | 'history'
   | 'image-add'
   | 'info'
-  | 'mail-send'
+  | 'move-to'
+  | 'note'
+  | 'pair-tag'
   | 'pencil'
   | 'refresh'
-  | 'settings'
+  | 'replace-tag'
+  | 'report-tag'
+  | 'search'
   | 'search-eye'
+  | 'settings'
   | 'spinner'
-  | 'search';
+  | 'unassign'
+  | 'verification';

package/dist/components/v2/InputText/InputText.vue.d.ts

@@ -28,9 +28,13 @@ export interface InputTextProps {
    * Wether this input field is required or not.
    */
   mandatory?: boolean;
+  /**
+   * Invalid input state.
+   */
+  invalid?: boolean;
   /**
    * Set custom validator message.
-   * It is rarely use, this component has handled the validator message.
+   * Will be show if invalid="true"
    */
   validatorMessage?: string;
   /**

package/dist/components/v2/Menu/Menu.vue.d.ts

@@ -0,0 +1,383 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ *
+ * Menu is a navigation / command component that supports dynamic and static positioning.
+ *
+ * [Live Demo](https://www.TSvue.org/menu/)
+ *
+ * @module menu
+ *
+ */
+import { TransitionProps, VNode } from 'vue';
+import { ComponentHooks } from '../BaseComponent/BaseComponent.d';
+import { PassThroughOptions } from '../PassThrough';
+import { MenuItem } from './MenuItem.d';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PassThrough,
+} from '../ts-helpers';
+
+export declare type MenuPassThroughOptionType =
+  | MenuPassThroughAttributes
+  | ((
+      options: MenuPassThroughMethodOptions,
+    ) => MenuPassThroughAttributes | string)
+  | string
+  | null
+  | undefined;
+
+export declare type MenuPassThroughTransitionType =
+  | TransitionProps
+  | ((options: MenuPassThroughMethodOptions) => TransitionProps)
+  | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MenuPassThroughMethodOptions {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+  /**
+   * Defines valid properties.
+   */
+  props: MenuProps;
+  /**
+   * Defines current inline state.
+   */
+  state: MenuState;
+  /**
+   * Defines current options.
+   */
+  context: MenuContext;
+  /**
+   * Defines valid attributes.
+   */
+  attrs: any;
+  /**
+   * Defines parent options.
+   */
+  parent: any;
+  /**
+   * Defines passthrough(pt) options in global config.
+   */
+  global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MenuProps.pt}
+ */
+export interface MenuPassThroughOptions {
+  /**
+   * Used to pass attributes to the root's DOM element.
+   */
+  root?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the list's DOM element.
+   */
+  menu?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the submenu header's DOM element.
+   */
+  submenuHeader?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the list item's DOM element.
+   */
+  menuitem?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the content's DOM element.
+   */
+  content?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the action's DOM element.
+   */
+  action?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the icon's DOM element.
+   */
+  icon?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the label's DOM element.
+   */
+  label?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the separator's DOM element.
+   */
+  separator?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the start of the component.
+   */
+  start?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the end of the component.
+   */
+  end?: MenuPassThroughOptionType;
+  /**
+   * Used to manage all lifecycle hooks.
+   * @see {@link BaseComponent.ComponentHooks}
+   */
+  hooks?: ComponentHooks;
+  /**
+   * Used to control Vue Transition API.
+   */
+  transition?: MenuPassThroughTransitionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface MenuPassThroughAttributes {
+  [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Menu component.
+ */
+export interface MenuState {
+  /**
+   * Current id state as a string.
+   */
+  id: string;
+  /**
+   * Current visible state as a boolean.
+   * @defaultValue false
+   */
+  overlayVisible: boolean;
+  /**
+   * Current focus state as a boolean.
+   * @defaultValue false
+   */
+  focused: boolean;
+  /**
+   * Focused option index.
+   */
+  focusedOptionIndex: number;
+  /**
+   * Selected option index.
+   */
+  selectedOptionIndex: number;
+}
+
+/**
+ * Defines current options in Menu component.
+ */
+export interface MenuContext {
+  /**
+   * Current menuitem
+   */
+  item: any;
+  /**
+   * Current index of the menuitem.
+   */
+  index: number;
+  /**
+   * Current focused state of menuitem as a boolean.
+   * @defaultValue false
+   */
+  focused: boolean;
+  /**
+   * Current disabled state of menuitem as a boolean.
+   * @defaultValue false
+   */
+  disabled: boolean;
+}
+
+/**
+ * Defines valid router binding props in Menu component.
+ */
+export interface MenuRouterBindProps {
+  /**
+   * Action element binding
+   */
+  action: object;
+  /**
+   * Icon element binding
+   */
+  icon: object;
+  /**
+   * Label element binding
+   */
+  label: object;
+}
+
+/**
+ * Defines valid properties in Menu component.
+ */
+export interface MenuProps {
+  /**
+   * An array of menuitems.
+   */
+  model?: MenuItem[] | undefined;
+  /**
+   * Defines if menu would displayed as a popup.
+   * @defaultValue false
+   */
+  popup?: boolean | undefined;
+  /**
+   * A valid query selector or an HTMLElement to specify where the overlay gets attached.
+   * @defaultValue body
+   */
+  appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
+  /**
+   * Whether to automatically manage layering.
+   * @defaultValue true
+   */
+  autoZIndex?: boolean | undefined;
+  /**
+   * Base zIndex value to use in layering.
+   * @defaultValue 0
+   */
+  baseZIndex?: number | undefined;
+  /**
+   * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
+   * @deprecated since v3.40.0.
+   * @defaultValue true
+   */
+  exact?: boolean | undefined;
+  /**
+   * Index of the element in tabbing order.
+   */
+  tabindex?: number | string | undefined;
+  /**
+   * Defines a string value that labels an interactive element.
+   */
+  ariaLabel?: string | undefined;
+  /**
+   * Identifier of the underlying input element.
+   */
+  ariaLabelledby?: string | undefined;
+  /**
+   * Used to pass attributes to DOM elements inside the component.
+   * @type {MenuPassThroughOptions}
+   */
+  pt?: PassThrough<MenuPassThroughOptions>;
+  /**
+   * Used to configure passthrough(pt) options of the component.
+   * @type {PassThroughOptions}
+   */
+  ptOptions?: PassThroughOptions;
+  /**
+   * When enabled, it removes component related styles in the core.
+   * @defaultValue false
+   */
+  unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in Menu component.
+ */
+export interface MenuSlots {
+  /**
+   * Custom start template.
+   */
+  start(): VNode[];
+  /**
+   * Custom end template.
+   */
+  end(): VNode[];
+  /**
+   * Custom item template.
+   * @param {Object} scope - item slot's params.
+   */
+  item(scope: {
+    /**
+     * Menuitem instance
+     */
+    item: MenuItem;
+    /**
+     * Label property of the menuitem
+     */
+    label: string | ((...args: any) => string) | undefined;
+    /**
+     * Binding properties of the menuitem
+     */
+    props: MenuRouterBindProps;
+  }): VNode[];
+  /**
+   * Custom item icon template.
+   * @param {Object} scope - item icon slot's params.
+   */
+  itemicon(scope: {
+    /**
+     * Menuitem instance
+     */
+    item: MenuItem;
+    /**
+     * Style class of the item icon element.
+     */
+    class: any;
+  }): VNode[];
+  /**
+   * Custom item template.
+   * @param {Object} scope - submenuheader slot's params.
+   */
+  submenuheader(scope: {
+    /**
+     * Menuitem instance
+     */
+    item: MenuItem;
+  }): VNode[];
+}
+
+/**
+ * Defines valid emits in Menu component.
+ */
+export type MenuEmits = {
+  /**
+   * Callback to invoke when the component receives focus.
+   * @param {Event} event - Browser event.
+   */
+  focus: [event: Event];
+  /**
+   * Callback to invoke when the component loses focus.
+   * @param {Event} event - Browser event.
+   */
+  blur: [event: Event];
+};
+
+/**
+ * **TSVue - Menu**
+ *
+ * _Menu is a navigation / command component that supports dynamic and static positioning._
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group Component
+ *
+ */
+declare class Menu extends ClassComponent<MenuProps, MenuSlots, MenuEmits> {
+  /**
+   * Toggles the visibility of the overlay.
+   * @param {Event} event - Browser event.
+   *
+   * @memberof Menu
+   */
+  toggle(event: Event): void;
+  /**
+   * Shows the overlay.
+   * @param {Event} event - Browser event.
+   * @param {*} [target] - Target element
+   *
+   * @memberof Menu
+   */
+  show(event: Event, target?: any): void;
+  /**
+   * Hides the overlay.
+   *
+   * @memberof Menu
+   */
+  hide(): void;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Menu: GlobalComponentConstructor<Menu>;
+  }
+}
+
+export default Menu;