@fewangsit/wangsvue-fats 1.0.0-alpha.0

package/components/overlaypanel/OverlayPanel.vue.d.ts

@@ -0,0 +1,302 @@
+/**
+ *
+ * OverlayPanel is a container component positioned as connected to its target.
+ *
+ * [Live Demo](https://primevue.org/overlaypanel)
+ *
+ * @module overlaypanel
+ *
+ */
+import { TransitionProps, VNode } from 'vue';
+
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PassThrough,
+} from '../ts-helpers';
+
+export declare type OverlayPanelPassThrougMethodType = (
+  options: OverlayPanelPassThroughMethodOptions,
+) => OverlayPanelPassThroughAttributes;
+
+export declare type OverlayPanelPassThroughTransitionType =
+  | TransitionProps
+  | ((options: OverlayPanelPassThroughMethodOptions) => TransitionProps)
+  | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface OverlayPanelPassThroughMethodOptions {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+  /**
+   * Defines valid properties.
+   */
+  props: OverlayPanelProps;
+  /**
+   * Defines current inline state.
+   */
+  state: OverlayPanelState;
+  /**
+   * 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 OverlayPanelProps.pt}
+ */
+export interface OverlayPanelPassThroughOptions {
+  /**
+   * Used to pass attributes to the root's DOM element.
+   */
+  root?: OverlayPanelPassThroughAttributes;
+  /**
+   * Used to pass attributes to the content's DOM element.
+   */
+  content?: OverlayPanelPassThroughAttributes;
+  /**
+   * Used to pass attributes to the close button's DOM element.
+   */
+  closeButton?: OverlayPanelPassThroughAttributes;
+  /**
+   * Used to pass attributes to the close icon's DOM element.
+   */
+  closeIcon?: OverlayPanelPassThroughAttributes;
+  /**
+   * Used to manage all lifecycle hooks.
+   * @see {@link BaseComponent.ComponentHooks}
+   */
+  hooks?: ComponentHooks;
+  /**
+   * Used to control Vue Transition API.
+   */
+  transition?: OverlayPanelPassThroughTransitionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface OverlayPanelPassThroughAttributes {
+  class: any;
+  style?: any;
+  [key: string]: any;
+}
+
+/**
+ * Defines current inline state in OverlayPanel component.
+ */
+export interface OverlayPanelState {
+  /**
+   * Current visible state as a boolean.
+   * @defaultValue false
+   */
+  visible: boolean;
+}
+
+/**
+ * OverlayPanel breakpoint metadata.
+ */
+export interface OverlayPanelBreakpoints {
+  /**
+   * Breakpoint for responsive mode.
+   *
+   * Example:
+   *
+   * <OverlayPanel :breakpoints="{'960px': '75vw', '640px': '100vw'}" ... />
+   *
+   * Result:
+   *
+   * @media screen and (max-width: ${breakpoint[key]}) {
+   *      .p-overlaypanel[attributeSelector] {
+   *          width: ${breakpoint[value]} !important;
+   *      }
+   * }
+   */
+  [key: string]: string;
+}
+
+/**
+ * Defines valid properties in OverlayPanel component.
+ */
+export interface OverlayPanelProps {
+  /**
+   * Enables to hide the overlay when outside is clicked.
+   * @defaultValue true
+   */
+  dismissable?: boolean;
+  /**
+   * Enables to hide the overlay when another overlay is clicked.
+   * @defaultValue true
+   */
+  dismissableOverlay?: boolean;
+  /**
+   * When enabled, displays a close icon at top right corner.
+   * @defaultValue false
+   */
+  showCloseIcon?: boolean;
+  /**
+   * A valid query selector or an HTMLElement to specify where the overlay gets attached.
+   * @defaultValue body
+   */
+  // AppendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
+  /**
+   * Base zIndex value to use in layering.
+   * @defaultValue 0
+   */
+  baseZIndex?: number;
+  /**
+   * Whether to automatically manage layering.
+   * @defaultValue true
+   */
+  autoZIndex?: boolean;
+  /**
+   * Object literal to define widths per screen size.
+   */
+  breakpoints?: OverlayPanelBreakpoints;
+  /**
+   * Icon to display in the overlaypanel close button.
+   * @deprecated since v3.27.0. Use 'closeicon' slot.
+   */
+  closeIcon?: string | undefined;
+  /**
+   * Used to pass attributes to DOM elements inside the component.
+   * @type {OverlayPanelPassThroughOptions}
+   */
+  pt?: PassThrough<OverlayPanelPassThroughOptions>;
+  /**
+   * 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;
+  /**
+   * Specifies if pressing escape key should hide the dialog.
+   * @defaultValue true
+   */
+  closeOnEscape?: boolean | undefined;
+}
+
+/**
+ * Defines valid slots in OverlayPanel component.
+ */
+export interface OverlayPanelSlots {
+  /**
+   * Custom content template.
+   */
+  default(): VNode[];
+  /**
+   * Custom close icon template.
+   */
+  closeicon(): VNode[];
+  /**
+   * Custom container slot.
+   * @param {Object} scope - container slot's params.
+   */
+  container(scope: {
+    /**
+     * Close overlay panel function.
+     * @deprecated since v3.39.0. Use 'closeCallback' property instead.
+     */
+    onClose: () => void;
+    /**
+     * Close button keydown function.
+     * @param {Event} event - Browser event
+     * @deprecated since v3.39.0. Use 'keydownCallback' property instead.
+     */
+    onKeydown: (event: Event) => void;
+    /**
+     * Close overlay panel function.
+     */
+    closeCallback: () => void;
+    /**
+     * Close button keydown function.
+     * @param {Event} event - Browser event
+     */
+    keydownCallback: (event: Event) => void;
+  }): VNode[];
+}
+
+/**
+ * Defines valid emits in OverlayPanel component.
+ */
+export interface OverlayPanelEmits {
+  /**
+   * Callback to invoke when the overlay is shown.
+   */
+  show(): void;
+  /**
+   * Callback to invoke when the overlay is hidden.
+   */
+  hide(): void;
+}
+
+/**
+ * **PrimeVue - OverlayPanel**
+ *
+ * _OverlayPanel, also known as Popover, is a container component that can overlay other components on page._
+ *
+ * [Live Demo](https://www.primevue.org/overlaypanel/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
+declare class OverlayPanel extends ClassComponent<
+  OverlayPanelProps,
+  OverlayPanelSlots,
+  OverlayPanelEmits
+> {
+  /**
+   * Aligns overlay panel based on the current position of the container.
+   */
+  alignOverlay(): void;
+  /**
+   * Toggles the visibility of the overlay.
+   * @param {Event} event - Browser event.
+   * @param {*} [target] - Optional target if event.currentTarget should not be used.
+   *
+   * @memberof OverlayPanel
+   */
+  toggle(event: Event, target?: unknown): void;
+  /**
+   * Shows the overlay.
+   * @param {Event} event - Browser event.
+   * @param {*} [target] - Optional target if event.currentTarget should not be used.
+   *
+   * @memberof OverlayPanel
+   */
+  show(event: Event, target?: unknown): void;
+  /**
+   * Hides the overlay.
+   *
+   * @memberof OverlayPanel
+   */
+  hide(): void;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    OverlayPanel: GlobalComponentConstructor<OverlayPanel>;
+  }
+}
+
+export default OverlayPanel;

package/components/paginator/Paginator.vue.d.ts

@@ -0,0 +1,285 @@
+/**
+ *
+ * Paginator is a generic component to display content in paged format.
+ *
+ * [Live Demo](https://TSVue v2.org/paginator)
+ *
+ * @module paginator
+ *
+ */
+import { VNode } from 'vue';
+
+import { PassThroughOptions } from '../passthrough';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PassThrough,
+} from '../ts-helpers';
+
+import {
+  PaginatorPassThroughAttributes,
+  PaginatorPassThroughOptions,
+} from 'primevue/paginator';
+
+export declare type PaginatorPassThroughOptionType<T = any> =
+  | PaginatorPassThroughAttributes
+  | ((
+      options: PaginatorPassThroughMethodOptions<T>,
+    ) => PaginatorPassThroughAttributes | string)
+  | string
+  | null
+  | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PaginatorPassThroughMethodOptions<T> {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+  /**
+   * Defines valid properties.
+   */
+  props: PaginatorProps;
+  /**
+   * Defines current inline state.
+   */
+  state: PaginatorState;
+  /**
+   * Defines parent instance.
+   */
+  parent: T;
+  /**
+   * Defines current options.
+   */
+  context: PaginatorContext;
+  /**
+   * Defines passthrough(pt) options in global config.
+   */
+  global: object | undefined;
+}
+
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface PaginatorSharedPassThroughMethodOptions {
+  /**
+   * Defines valid properties.
+   */
+  props: PaginatorProps;
+  /**
+   * Defines current inline state.
+   */
+  state: PaginatorState;
+}
+
+/**
+ * Defines current inline state in Paginator component.
+ */
+export interface PaginatorState {
+  /**
+   * Current index of first record as a number.
+   */
+  d_first: number;
+  /**
+   * Current number of rows to display in new page as a number.
+   */
+  d_rows: number;
+}
+
+/**
+ * Defines current options in Paginator component.
+ */
+export interface PaginatorContext {
+  /**
+   * Current active state as a boolean.
+   * @defaultValue false
+   */
+  active: boolean;
+  /**
+   * Current disabled state of the button as a boolean.
+   * @defaultValue false
+   */
+  disabled: boolean;
+}
+
+/**
+ * Paginator page state metadata.
+ */
+export interface PageState {
+  /**
+   * Index of first record
+   */
+  first: number;
+  /**
+   * Number of rows to display in new page
+   */
+  rows: number;
+  /**
+   * New page number
+   */
+  page: number;
+  /**
+   * Total number of pages
+   */
+  pageCount?: number;
+}
+
+/**
+ * Defines valid properties in Paginator component.
+ */
+export interface PaginatorProps {
+  /**
+   * Number of total records.
+   * @defaultValue 0
+   */
+  totalRecords?: number | undefined;
+  /**
+   * Data count to display per page.
+   * @defaultValue 0
+   */
+  rows?: number | undefined;
+  /**
+   * Zero-relative number of the first row to be displayed.
+   * @defaultValue 0
+   */
+  first?: number | undefined;
+  /**
+   * Number of page links to display.
+   * @defaultValue 5
+   */
+  pageLinkSize?: number | undefined;
+  /**
+   * Array of integer values to display inside rows per page dropdown.
+   */
+  rowsPerPageOptions?: number[] | undefined;
+  /**
+   * Template of the paginator, can either be a string or an object with key-value pairs to define templates per breakpoint. Available templates are the following;
+   *
+   * - FirstPageLink
+   * - PrevPageLink
+   * - PageLinks
+   * - NextPageLink
+   * - LastPageLink
+   * - RowsPerPageDropdown
+   * - JumpToPageDropdown
+   * - JumpToPageInput
+   * - CurrentPageReport
+   */
+  template?: any | string;
+  /**
+   * Template of the current page report element. It displays information about the pagination state. Available placeholders are the following;
+   *
+   * - {currentPage}
+   * - {totalPages}
+   * - {rows}
+   * - {first}
+   * - {last}
+   * - {totalRecords}
+   *
+   * @defaultValue '({currentPage} of {totalPages})'
+   */
+  currentPageReportTemplate?: string | undefined;
+  /**
+   * Whether to show the paginator even there is only one page.
+   * @defaultValue true
+   */
+  alwaysShow?: boolean | undefined;
+  /**
+   * Used to pass attributes to DOM elements inside the component.
+   * @type {PaginatorPassThroughOptions}
+   */
+  pt?: PassThrough<PaginatorPassThroughOptions>;
+  /**
+   * Used to configure passthrough(pt) options of the component.
+   * @type {PassThroughOptions}
+   */
+  ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines valid slots in Paginator component.
+ */
+export interface PaginatorSlots {
+  /**
+   * Custom start template.
+   * @param {Object} scope - start slot's params.
+   */
+  start(scope: {
+    /**
+     * Current state
+     * @see PageState
+     */
+    state: PageState;
+  }): VNode[];
+  /**
+   * Custom end template.
+   * @param {Object} scope - end slot's params.
+   */
+  end(scope: {
+    /**
+     * Current state
+     * @see PageState
+     */
+    state: PageState;
+  }): VNode[];
+  /**
+   * Custom first page link icon template.
+   */
+  firstpagelinkicon(): VNode[];
+  /**
+   * Custom previous page link icon template.
+   */
+  prevpagelinkicon(): VNode[];
+  /**
+   * Custom finextrst page link icon template.
+   */
+  nextpagelinkicon(): VNode[];
+  /**
+   * Custom last page link icon template.
+   */
+  lastpagelinkicon(): VNode[];
+  /**
+   * Custom rowsperpagedropdownicon template.
+   * @param {Object} scope - rowsperpagedropdownicon's params.
+   */
+  rowsperpagedropdownicon(scope: {
+    /**
+     * Style class of the rowsperpagedropdown icon.
+     */
+    class: string;
+  }): VNode[];
+  /**
+   * Custom jumptopagedropdownicon template.
+   * @param {Object} scope - jumptopagedropdownicon's params.
+   */
+  jumptopagedropdownicon(scope: {
+    /**
+     * Style class of the jumptopagedropdown icon.
+     */
+    class: string;
+  }): VNode[];
+}
+
+/**
+ * Defines valid emits in Paginator component.
+ */
+export type PaginatorEmits = {
+  'page': [event: PageState];
+  'update:rows': [];
+};
+
+declare class Paginator extends ClassComponent<
+  PaginatorProps,
+  PaginatorSlots,
+  PaginatorEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Paginator: GlobalComponentConstructor<Paginator>;
+  }
+}
+
+export default Paginator;

package/components/passthrough/index.d.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export declare type PassThroughMergePropsType =
+  | ((...args: any) => object | undefined)
+  | boolean
+  | undefined;
+
+export interface PassThroughOptions {
+  mergeSections?: boolean | undefined;
+  mergeProps?: PassThroughMergePropsType;
+}
+
+export declare function usePassThrough(
+  pt1: object,
+  pt2: object,
+  options?: PassThroughOptions,
+): object;

package/components/steps/Steps.vue.d.ts

@@ -0,0 +1,20 @@
+import { ClassComponent } from '../../components/ts-helpers.d';
+
+export type Step = {
+  label: string;
+};
+
+export interface StepsProps {
+  /**
+   * List of step object or label.
+   */
+  steps: Step[] | string[] | (string | Step)[];
+  /**
+   * The current active step start from 1.
+   */
+  currentStep: number;
+}
+
+declare class Steps extends ClassComponent<StepsProps, unknown, unknown> {}
+
+export default Steps;

package/components/tabmenu/TabMenu.vue.d.ts

@@ -0,0 +1,104 @@
+/**
+ *
+ * TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.
+ *
+ * [Live Demo](https://www.WangsVue.org/tabmenu/)
+ *
+ * @module tabmenu
+ *
+ */
+
+import { TabMenuProps as WangsUITabMenuProps } from '@wangs-ui/core';
+import { MenuItem } from '@wangs-ui/core/dist/types/components/menuitem/menuitem.type';
+
+import { ClassComponent } from '../ts-helpers';
+
+/**
+ * Custom change event.
+ * @see {@link TabMenuEmits['tab-change']}
+ */
+export interface TabMenuChangeEvent {
+  /**
+   * Browser event
+   */
+  originalEvent: Event;
+  /**
+   * Index of the selected tab
+   */
+  index: number;
+}
+
+/**
+ * Defines valid router binding props in TabMenu component.
+ */
+export interface TabMenuRouterBindProps {
+  /**
+   * Action element binding
+   */
+  action: object;
+  /**
+   * Icon element binding
+   */
+  icon: object;
+  /**
+   * Label element binding
+   */
+  label: object;
+}
+
+/**
+ * Defines valid properties in TabMenu component.
+ */
+export interface TabMenuProps extends WangsUITabMenuProps {
+  /**
+   * An array of menuitems.
+   */
+  menu?: MenuItem[] | undefined;
+  /**
+   * Defines type of TabMenu.
+   * @defaultValue 'tab'
+   */
+  type?: 'tab' | 'pill' | 'segmented';
+  /**
+   * Active index of menuitem.
+   * @defaultValue 0
+   */
+  activeIndex?: number | undefined;
+  /**
+   * Whether to use trailing line at the end of tab menu.
+   * @defaultValue true - when type is tab, otherwise true
+   */
+  useTrailingLine?: boolean | undefined;
+}
+
+/**
+ * Defines valid emits in TabMenu component.
+ */
+export type TabMenuEmits = {
+  /**
+   * Callback to invoke when an active tab is changed.
+   * @param {TabMenuChangeEvent} event - Custom tab change event.
+   */
+  'tabChange': [event: TabMenuChangeEvent];
+  'update:activeIndex': [index: number];
+};
+
+/**
+ * **WangsVue - TabMenu**
+ *
+ * _TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu._
+ *
+ * [Live Demo](https://www.WangsVue.org/tabmenu/)
+ * --- ---
+ * ![WangsVue](https://primefaces.org/cdn/WangsVue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class TabMenu extends ClassComponent<
+  TabMenuProps,
+  unknown,
+  TabMenuEmits
+> {}
+
+export default TabMenu;