@fewangsit/wangsvue-gsts 1.0.0-alpha.1

package/components/multiselect/MultiSelect.vue.d.ts

@@ -0,0 +1,192 @@
+import { DropdownLocaleConfig } from '../dropdown/Dropdown.vue.d';
+import { CustomValidation } from '../form/Form.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+import { MultiSelectOption, OptionValue } from 'lib/types/options.type';
+
+export type MultiSelectLocaleConfig = DropdownLocaleConfig & {};
+
+/**
+ * MultiSelect component props
+ */
+export interface MultiSelectProps {
+  modelValue?: OptionValue[];
+
+  /**
+   * If you deals with form validation on edit form action, you can set the initial value of the field.
+   */
+  initialValue?: OptionValue[];
+
+  /**
+   * The field label. Tell the user what field input is this.
+   */
+  label?: string;
+
+  /**
+   * List of options to display.
+   */
+  options?: MultiSelectOption[] | string[];
+
+  /**
+   * Specify the property name of option to be used as label.
+   *
+   * @default undefined - the label will be sets to the option itself.
+   */
+  optionLabel?: string;
+
+  /**
+   * Specify the property name of option to be used as value.
+   *
+   * @default undefined - the value will be sets to the option itself.
+   */
+  optionValue?: string;
+
+  /**
+   * Determines if the field uses a validator
+   */
+  useValidator?: boolean;
+
+  /**
+   * Determines if the field is mandatory
+   */
+  mandatory?: boolean;
+
+  /**
+   * Show the text (opsional)
+   *
+   * @default true if mandatory true
+   */
+  showOptionalText?: boolean;
+
+  /**
+   * Set custom validator message.
+   * It is rarely use, this component has handled the validator message.
+   *
+   * @example: 'This field is required'
+   * @example: { empty: 'This field is required' }
+   */
+  validatorMessage?: string | CustomValidation<'empty'>;
+
+  /**
+   * This prop is required if you use this component in a form input.
+   * Specify the unique field name, match with your needs for API request.
+   *
+   * @default 'multiSelect'
+   */
+  fieldName?: string;
+
+  /**
+   * Default text to display when no option is selected.
+   *
+   * @default `Select ${label}`
+   */
+  placeholder?: string;
+
+  /**
+   * Whether the MultiSelect is in loading state.
+   * @defaultValue false
+   */
+  loading?: boolean;
+
+  /**
+   * Show icon 'info' on the right side of label.
+   * Show information to user about the field on icon hover.
+   */
+  fieldInfo?: string;
+
+  /**
+   * Hide the input and controls the overlay state from parent component.
+   */
+  controls?: boolean;
+
+  /**
+   * Disabled state.
+   */
+  disabled?: boolean;
+
+  /**
+   * Wether show the Dropdown option search or not.
+   *
+   * @default true,
+   */
+  filter?: boolean;
+
+  /**
+   * The filter input Placeholder
+   *
+   * @default 'Search' from Global Locale Config
+   */
+  filterPlaceholder?: string;
+
+  /**
+   * Defines how the selected items are displayed.
+   *
+   * @default 'chip'
+   */
+  display?: 'comma' | 'chip';
+
+  /**
+   * Label to display after exceeding max selected labels.
+   */
+  selectedItemsLabel?: string;
+
+  /**
+   * Decides how many selected item labels to show at most.
+   */
+  maxSelectedLabels?: number;
+}
+
+/**
+ * MultiSelect component emits
+ */
+export type MultiSelectEmits = {
+  /**
+   * Emits when an option selected.
+   */
+  'update:modelValue': [value: OptionValue[] | undefined];
+
+  /**
+   * Emits when overlay shown.
+   */
+  'show': [];
+
+  /**
+   * Emits when overlay hidden.
+   */
+  'hide': [];
+};
+
+/**
+ * **WangsVue - MultiSelect**
+ *
+ * _MultiSelect also known as Select, is used to choose an item from a collection of options._
+ *
+ * @group Component
+ */
+declare class MultiSelect extends ClassComponent<
+  MultiSelectProps,
+  unknown,
+  MultiSelectEmits
+> {
+  /**
+   * Shows the overlay.
+   *
+   * @memberof MultiSelect
+   */
+  showOverlay(): void;
+
+  /**
+   * Hides the overlay.
+   *
+   * @memberof MultiSelect
+   */
+  hideHideOverlay(): void;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    MultiSelect: GlobalComponentConstructor<MultiSelect>;
+  }
+}
+
+export default MultiSelect;

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;