@fewangsit/wangsvue 1.5.178

package/components/menu/Menu.vue.d.ts

@@ -0,0 +1,369 @@
+import { TransitionProps, VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { MenuItem } from '../menuitem';
+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 true
+   */
+  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];
+};
+
+/**
+ * **WangsVue - Menu**
+ *
+ * _Menu is a navigation / command component that supports dynamic and static positioning._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.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;

package/components/menu/helpers/filterMenu.helper.d.ts

@@ -0,0 +1,10 @@
+import { MenuItem } from '../../menuitem';
+/**
+ * Filters the menu items to return only the visible ones.
+ * If no visible menu items are found, it returns a menu with a label 'No Option Available'.
+ *
+ * @param menuItems - The array of menu items to filter.
+ * @returns - The array of visible menu items or an array with a single menu item with label 'No Option Available'.
+ */
+declare const filterVisibleMenu: (menuItems: MenuItem[]) => MenuItem[];
+export default filterVisibleMenu;

package/components/menu/helpers/index.d.ts

@@ -0,0 +1 @@
+export { default as filterVisibleMenu } from './filterMenu.helper';

package/components/menuitem/index.d.ts

@@ -0,0 +1,93 @@
+/**
+ *
+ * WangsVue menu components share a common api to specify the menuitems and submenus.
+ *
+ * @module menuitem
+ *
+ */
+
+/**
+ * Custom command event.
+ *  @todo next release should be able to change see menuItem.command
+ */
+export interface MenuItemCommandEvent {
+  /**
+   * Browser event.
+   */
+  originalEvent: Event;
+  /**
+   * Menuitem instance.
+   */
+  item: MenuItem;
+  /**
+   * Optional
+   */
+  [key: string]: any;
+}
+
+/**
+ * Defines model of MenuItem API.
+ */
+export interface MenuItem {
+  /**
+   * Property name or getter function to use as the label of an item.
+   */
+  label?: string | ((...args: any) => string) | undefined;
+  /**
+   * Icon of the item.
+   */
+  icon?: string | undefined;
+  /**
+   * Callback to execute when item is clicked.
+   * @param {MenuItemCommandEvent} event - Custom command event.
+   * @todo next release should be able to change
+   */
+  command?: (event: MenuItemCommandEvent) => void;
+  /**
+   * External link to navigate when item is clicked.
+   */
+  url?: string | undefined;
+  /**
+   * Specifies where to open the linked document.
+   */
+  target?: string | undefined;
+  /**
+   * Internal/ vue router link to navigate when item is clicked.
+   */
+  route?: string | undefined;
+  /**
+   * 	An array of children menuitems.
+   */
+  items?: MenuItem[] | undefined;
+  /**
+   * A boolean or a function to return a boolean to specify if the item is disabled.
+   * @defaultValue false
+   */
+  disabled?: boolean | ((...args: any) => boolean) | undefined;
+  /**
+   * A boolean or a function to return a boolean to specify if the item is visible.
+   * @defaultValue true
+   */
+  visible?: boolean | ((...args: any) => boolean) | undefined;
+  /**
+   * Defines the item as a separator.
+   * @defaultValue false
+   */
+  separator?: boolean | undefined;
+  /**
+   * Inline style of the menuitem.
+   */
+  style?: any;
+  /**
+   * Style class of the menuitem.
+   */
+  class?: any;
+  /**
+   * Unique identifier of an item.
+   */
+  key?: string | undefined;
+  /**
+   * Optional
+   */
+  [key: string]: any;
+}

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

@@ -0,0 +1,169 @@
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { MultiSelectOption, OptionValue } from '../../types/options.type';
+
+
+/**
+ * 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.
+   */
+  validatorMessage?: string;
+  /**
+   * 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'
+   */
+  filterPlaceholder?: string;
+  /**
+   * Defines how the selected items are displayed.
+   *
+   * @default 'chip'
+   */
+  display?: 'comma' | 'chip';
+  /**
+   * Defines the placeholder (label in input) as medium font.
+   * Used in Preset?.
+   *
+   * @default false
+   */
+  fontMediumPlaceholder?: boolean;
+  /**
+   * 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;