@fewangsit/wangsvue-fats 1.0.0-alpha.2

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

@@ -0,0 +1,301 @@
+/**
+ *
+ * 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/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/progressbar/ProgressBar.vue.d.ts

@@ -0,0 +1,72 @@
+import { Slot } from 'vue';
+import { ClassComponent } from '../ts-helpers';
+import { GlobalComponentConstructor } from '../ts-helpers.d';
+
+/**
+ * Defines valid properties in ProgressBar component.
+ */
+export interface ProgressBarProps {
+  /**
+   * Current value of the progress.
+   */
+  value?: number | undefined;
+  /**
+   * Set the position of progress value label position
+   * Only available on mode Determinate
+   *
+   * @default 'right-side'
+   */
+  valuePosition?: 'inside' | 'left-side' | 'right-side';
+  /**
+   * The progress bar severity color
+   *
+   * @defaultValue 'primary'
+   */
+  severity: 'success' | 'danger' | 'warning' | 'dark' | 'primary';
+  /**
+   * Defines the mode of the progress
+   * @defaultValue determinate
+   */
+  mode?: 'determinate' | 'indeterminate' | undefined;
+  /**
+   * Whether to display the progress bar value.
+   * @defaultValue true
+   */
+  showValue?: boolean | undefined;
+}
+
+/**
+ * Defines valid slots in ProgressBar component.
+ */
+export interface ProgressBarSlots {
+  /**
+   * Slot for customizing the value label.
+   */
+  label: Slot<{ value: number | undefined }>;
+}
+
+/**
+ * **WangsVue - ProgressBar**
+ *
+ * ProgressBar is a process status indicator._
+ *
+ * [Live Demo](https://fewangsit.github.io/wangsvue/progressbar)
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class ProgressBar extends ClassComponent<
+  ProgressBarProps,
+  ProgressBarSlots,
+  null
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    ProgressBar: GlobalComponentConstructor<ProgressBar>;
+  }
+}
+
+export default ProgressBar;

package/components/quickfilter/QuickFilter.vue.d.ts

@@ -0,0 +1,25 @@
+import { DefineComponent } from 'vue';
+import { FilterField } from '../filtercontainer/FilterContainer.vue.d';
+import { QueryParams } from '../datatable/DataTable.vue.d';
+
+export interface QuickFilterProps {
+  fields: FilterField[];
+  tableName?: string;
+}
+
+export type QuickFilterEmits = {
+  apply: [filter: QueryParams];
+};
+
+/**
+ * **WangsVue - QuickFilter**
+ *
+ * @group components
+ */
+declare const QuickFilter: DefineComponent<
+  QuickFilterProps,
+  QuickFilterEmits,
+  unknown
+>;
+
+export default QuickFilter;

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

@@ -0,0 +1,288 @@
+/**
+ *
+ * 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 { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, PassThrough } from '../ts-helpers';
+
+export declare type TabMenuPassThroughOptionType =
+  | TabMenuPassThroughAttributes
+  | ((
+      options: TabMenuPassThroughMethodOptions,
+    ) => TabMenuPassThroughAttributes | string)
+  | string
+  | null
+  | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabMenuPassThroughMethodOptions {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+  /**
+   * Defines valid properties.
+   */
+  props: TabMenuProps;
+  /**
+   * Defines current inline state.
+   */
+  state: TabMenuState;
+  /**
+   * Defines current options.
+   */
+  context: TabMenuContext;
+  /**
+   * 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 TabMenuProps.pt}
+ */
+export interface TabMenuPassThroughOptions {
+  /**
+   * Used to pass attributes to the root's DOM element.
+   */
+  root?: TabMenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the list's DOM element.
+   */
+  menu?: TabMenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the list item's DOM element.
+   */
+  menuitem?: TabMenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the action's DOM element.
+   */
+  action?: TabMenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the icon's DOM element.
+   */
+  icon?: TabMenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the label's DOM element.
+   */
+  label?: TabMenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the inkbar's DOM element.
+   */
+  inkbar?: TabMenuPassThroughOptionType;
+  /**
+   * Used to manage all lifecycle hooks.
+   * @see {@link BaseComponent.ComponentHooks}
+   */
+  hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TabMenuPassThroughAttributes {
+  [key: string]: any;
+}
+
+/**
+ * Defines current inline state in TabMenu component.
+ */
+export interface TabMenuState {
+  /**
+   * Current active index state as a number.
+   * @defaulValue 0
+   */
+  d_activeIndex: number;
+}
+
+/**
+ * Defines current options in TabMenu component.
+ */
+export interface TabMenuContext {
+  /**
+   * Current menuitem
+   */
+  item: any;
+  /**
+   * Index of the menuitem
+   */
+  index: number;
+}
+
+/**
+ * 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 {
+  /**
+   * An array of menuitems.
+   */
+  menu?: MenuItem[] | undefined;
+  /**
+   * Defines type of TabMenu.
+   * @defaultValue 'tab'
+   */
+  type?: 'tab' | 'pill';
+  /**
+   * 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 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 {TabMenuPassThroughOptions}
+   */
+  pt?: PassThrough<TabMenuPassThroughOptions>;
+  /**
+   * 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 TabMenu component.
+ */
+export interface TabMenuSlots {
+  /**
+   * Custom content for each item.
+   * @param {Object} scope - item slot's params.
+   */
+  item(scope: {
+    /**
+     * Menuitem instance
+     */
+    item: MenuItem;
+    /**
+     * Index of the menuitem
+     */
+    index: number;
+    /**
+     * Current active state of the menuitem
+     */
+    active: boolean;
+    /**
+     * Label property of the menuitem
+     */
+    label: string | ((...args: any) => string) | undefined;
+    /**
+     * Binding properties of the menuitem
+     */
+    props: TabMenuRouterBindProps;
+  }): 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[];
+}
+
+/**
+ * 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.
+   */
+  'tab-change': [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,
+  TabMenuSlots,
+  TabMenuEmits
+> {}
+
+export default TabMenu;