@fewangsit/wangsvue-fats 1.0.0-alpha.31 → 1.0.0-alpha.32

package/components/basetree/BaseTree.vue.d.ts

@@ -0,0 +1,591 @@
+/**
+ *
+ * Tree is used to display hierarchical data.
+ *
+ * [Live Demo](https://www.primevue.org/tree/)
+ *
+ * @module tree
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  HintedString,
+  PassThrough,
+} from '../ts-helpers';
+import { MenuItem } from '../menuitem';
+
+export declare type TreePassThroughOptionType<T = any> =
+  | TreePassThroughAttributes
+  | ((
+      options: TreePassThroughMethodOptions<T>,
+    ) => TreePassThroughAttributes | string)
+  | string
+  | null
+  | undefined;
+
+/**
+ * Custom TreeNode metadata.
+ */
+export interface TreeNode {
+  /**
+   * Mandatory unique key of the node.
+   */
+  key: string | number;
+  /**
+   * Label of the node.
+   */
+  label?: string;
+  /**
+   * Data represented by the node.
+   */
+  data?: any;
+  /**
+   * Type of the node to match a template.
+   */
+  type?: string;
+  /**
+   * Icon of the node to display next to content.
+   */
+  icon?: string;
+  /**
+   * An array of treenodes as children.
+   */
+  children?: TreeNode[];
+  /**
+   * Inline style of the node.
+   */
+  style?: any;
+  /**
+   * Style class of the node.
+   */
+  styleClass?: string;
+  /**
+   * Whether the node is selectable when selection mode is enabled.
+   * @defaultValue false
+   */
+  selectable?: boolean;
+  /**
+   * Specifies if the node has children. Used in lazy loading.
+   * @defaultValue false
+   */
+  leaf?: boolean;
+  /**
+   * Specifies the node loading. Used in Tree and TreeTable.
+   */
+  loading?: boolean;
+  /**
+   * Icon to use in expanded state.
+   */
+  expandedIcon?: string;
+  /**
+   * Icon to use in collapsed state.
+   */
+  collapsedIcon?: string;
+  /**
+   * Optional
+   */
+  [key: string]: any;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TreePassThroughMethodOptions<T = any> {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+  /**
+   * Defines valid properties.
+   */
+  props: BaseTreeProps;
+  /**
+   * Defines current inline state.
+   */
+  state: TreeState;
+  /**
+   * Defines parent instance.
+   */
+  parent: T;
+  /**
+   * Defines current options.
+   */
+  context: TreeContext;
+  /**
+   * Defines passthrough(pt) options in global config.
+   */
+  global: object | undefined;
+}
+
+/**
+ * Custom expanded keys metadata.
+ */
+export interface TreeExpandedKeys {
+  /**
+   * Optional
+   */
+  [key: string]: any;
+}
+
+/**
+ * Custom selection keys metadata.
+ */
+export interface TreeSelectionKeys {
+  /**
+   * Optional
+   */
+  [key: string]: any;
+}
+
+/**
+ * Custom filter event.
+ * @see {@link BaseTreeEmits.filter}
+ */
+export interface TreeFilterEvent {
+  /**
+   * Original event
+   */
+  originalEvent: Event;
+  /**
+   * Filter value
+   */
+  value: string;
+}
+
+export interface TreeCheckboxChangeEvent {
+  node: TreeNode;
+  check: boolean;
+  selectionKeys: TreeSelectionKeys;
+}
+
+export interface TreeNodeClickEvent {
+  node: TreeNode;
+  nodeTouched: boolean;
+  originalEvent: PointerEvent;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TreeProps.pt}
+ */
+export interface TreePassThroughOptions<T = any> {
+  /**
+   * Used to pass attributes to the root's DOM element.
+   */
+  root?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the filter container's DOM element.
+   */
+  filterContainer?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the input's DOM element.
+   */
+  input?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the search icon's DOM element.
+   */
+  searchIcon?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the wrapper's DOM element.
+   */
+  wrapper?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the container's DOM element.
+   */
+  container?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the node's DOM element.
+   */
+  node?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the content's DOM element.
+   */
+  content?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the toggler's DOM element.
+   */
+  toggler?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the toggler icon's DOM element.
+   */
+  togglerIcon?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the checkbox's DOM element.
+   */
+  nodeCheckbox?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the node icon's DOM element.
+   */
+  nodeIcon?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the label's DOM element.
+   */
+  label?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the subgroup's DOM element.
+   */
+  subgroup?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the loading overlay's DOM element.
+   */
+  loadingOverlay?: TreePassThroughOptionType<T>;
+  /**
+   * Used to pass attributes to the loading icon's DOM element.
+   */
+  loadingIcon?: TreePassThroughOptionType<T>;
+  /**
+   * Used to manage all lifecycle hooks.
+   * @see {@link BaseComponent.ComponentHooks}
+   */
+  hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TreePassThroughAttributes {
+  [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Tree component.
+ */
+export interface TreeState {
+  /**
+   * Current expanded keys state.
+   */
+  d_expandedKeys: TreeExpandedKeys;
+  /**
+   * Current filter value state as a string.
+   */
+  filterValue: string;
+}
+
+/**
+ * Defines current options in Tree component.
+ */
+export interface TreeContext {
+  /**
+   * Index of the node.
+   */
+  index: number;
+  /**
+   * Current expanded state of the node as a boolean.
+   * @defaultValue false
+   */
+  expanded: boolean;
+  /**
+   * Current selected state of the node as a boolean.
+   * @defaultValue false
+   */
+  selected: boolean;
+  /**
+   * Current checked state of the node as a boolean.
+   * @defaultValue false
+   */
+  checked: boolean;
+  /**
+   * Current leaf state of the node as a boolean.
+   * @defaultValue false
+   */
+  leaf: boolean;
+}
+
+/**
+ * Defines valid properties in Tree component.
+ */
+export interface BaseTreeProps {
+  disableKeys?: number[];
+  disableNodeAll?: boolean;
+  exactDisableKeys?: number[];
+  level?: number;
+  /**
+   * List of labels that has no menu option
+   */
+  listLabelsNoOption?: string[];
+  /**
+   * An array of treenodes.
+   */
+  value?: TreeNode[] | undefined;
+  /**
+   * Determines whether the selection state of a node should propagate
+   * both upward to its parent node and downward to its child nodes.
+   *
+   * When enabled:
+   * - **Upward Propagation:** The parent node's selection state reflects the combined state
+   *   of its child nodes:
+   *   - Fully selected if all children are selected.
+   *   - Partially selected if some, but not all, children are selected.
+   *   - Deselected if no children are selected.
+   * - **Downward Propagation:** When a node's selection state changes, the same state is
+   *   applied to all its descendant nodes.
+   */
+  propagateSelection?: boolean;
+
+  /**
+   * A map of keys to represent the expansion state in controlled mode.
+   */
+  expandedKeys?: TreeExpandedKeys;
+  /**
+   * A map of keys to control the selection state.
+   */
+  selectionKeys?: TreeSelectionKeys;
+  treeNodeMenus?: MenuItem[];
+  /**
+   * Defines the selection mode.
+   */
+  selectionMode?: 'single' | 'multiple' | 'checkbox' | undefined;
+  /**
+   * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually.
+   * On touch enabled devices, metaKeySelection is turned off automatically.
+   * @defaultValue false
+   */
+  metaKeySelection?: boolean | undefined;
+  /**
+   * Whether to display loading indicator.
+   * @defaultValue false
+   */
+  loading?: boolean | undefined;
+  /**
+   * Icon to display when tree is loading.
+   * @deprecated since v3.27.0. Use 'loadingicon' slot.
+   */
+  loadingIcon?: string | undefined;
+  /**
+   * Loading mode display.
+   * @defaultValue mask
+   */
+  loadingMode?: 'mask' | 'icon' | undefined;
+  /**
+   * Filter text to be matched with node.
+   */
+  filterText?: string;
+  /**
+   * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+   * @defaultValue label
+   */
+  filterBy?: string | undefined;
+  /**
+   * Mode for filtering.
+   * @defaultValue lenient
+   */
+  filterMode?: 'lenient' | 'strict' | undefined;
+  /**
+   * Placeholder text to show when filter input is empty.
+   */
+  filterPlaceholder?: string | undefined;
+  /**
+   * Locale to use in filtering. The default locale is the host environment's current locale.
+   */
+  filterLocale?: string | undefined;
+  /**
+   *  Highlights automatically the first item.
+   *  @defaultValue false
+   */
+  highlightOnSelect?: boolean | undefined;
+  /**
+   * Height of the scroll viewport in fixed units or the 'flex' keyword for a dynamic size.
+   */
+  scrollHeight?: HintedString<'flex'> | undefined;
+  /**
+   * Defines a string value that labels an interactive element.
+   */
+  ariaLabel?: string | undefined;
+  /**
+   * Identifier of the underlying menu element.
+   */
+  ariaLabelledby?: string | undefined;
+  /**
+   * Used to pass attributes to DOM elements inside the component.
+   * @type {TreePassThroughOptions}
+   */
+  pt?: PassThrough<TreePassThroughOptions>;
+  /**
+   * 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;
+  /**
+   * To determine whether tree node use option or not
+   *
+   * @default false
+   */
+  useOption?: boolean;
+
+  /**
+   * A function to determine when the node should be disabled,
+   * When true, it will disabled selection on current node and all level childrend
+   *
+   * @return true to disabled
+   */
+  disableNodeWhen?: (node: TreeNode) => boolean;
+
+  /**
+   * A function to determine when the node should be disabled
+   * It will only disable current node
+   *
+   * @return true to disabled
+   */
+  exactDisableNodeWhen?: (node: TreeNode) => boolean;
+
+  /**
+   * A function to determine when the node should selected
+   * It will only disable current node when propagateSelection false
+   *
+   * @return true to disabled
+   */
+  nodeSelectedWhen?: (node: TreeNode) => boolean;
+}
+
+/**
+ * Defines valid slots in Tree component.
+ */
+export interface BaseTreeSlots {
+  /**
+   * Default content slot.
+   */
+  default(scope: {
+    /**
+     * Tree node instance
+     */
+    node: TreeNode;
+  }): VNode[];
+  /**
+   * Custom loading icon template.
+   * @param {Object} scope - loadingicon slot's params.
+   */
+  loadingicon(scope: {
+    /**
+     * Style class of the icon.
+     */
+    class: string;
+  }): VNode[];
+  /**
+   * Custom search icon template.
+   * @param {Object} scope - searchicon slot's params.
+   */
+  searchicon(scope: {
+    /**
+     * Style class of the icon.
+     */
+    class: string;
+  }): VNode[];
+  /**
+   * Custom toggler icon template.
+   * @param {Object} scope - togglericon slot's params.
+   */
+  togglericon(scope: {
+    /**
+     * Tree node instance
+     */
+    node: TreeNode;
+    /**
+     * Expanded state of the node
+     */
+    expanded: boolean;
+  }): VNode[];
+  /**
+   * Custom node icon template.
+   * @param {Object} scope - nodeicon slot's params.
+   */
+  nodeicon(scope: {
+    /**
+     * Tree node instance
+     */
+    node: TreeNode;
+    /**
+     * Style class of the icon.
+     */
+    class: string;
+  }): VNode[];
+  /**
+   * Custom checkbox icon
+   * @param {Object} scope - checkboxicon slot's params.
+   */
+  checkboxicon(scope: {
+    /**
+     * Check state of the node
+     */
+    checked: boolean;
+    /**
+     * Partial check state of the node
+     */
+    partialChecked: boolean;
+  }): VNode[];
+  /**
+   * Optional slots.
+   * @todo
+   */
+  [key: string]: (node: any) => VNode[];
+}
+
+/**
+ * Defines valid emits in Tree component.
+ */
+export interface BaseTreeEmits {
+  /**
+   * Emitted when the expanded keys change.
+   * @param {TreeNode} value - New expanded keys.
+   */
+  'update:expandedKeys'(value: TreeExpandedKeys): void;
+  /**
+   * Emitted when the selection keys change.
+   * @param {TreeSelectionKeys} value - New selection keys.
+   */
+  'update:selectionKeys'(value: TreeSelectionKeys): void;
+  /**
+   * Callback to invoke when a node is selected.
+   * @param {TreeNode} node - Node instance.
+   */
+  'node-select'(node: TreeNode): void;
+  /**
+   * Callback to invoke when a node is unselected.
+   * @param {TreeNode} node - Node instance.
+   */
+  'node-unselect'(node: TreeNode): void;
+  /**
+   * Callback to invoke when a node is expanded.
+   * @param {TreeNode} node - Node instance.
+   */
+  'node-expand'(node: TreeNode): void;
+  /**
+   * Callback to invoke when a node is collapsed.
+   * @param {TreeNode} node - Node instance.
+   */
+  'node-collapse'(node: TreeNode): void;
+  'toggle-menu': [node: TreeNode];
+}
+
+/**
+ * **PrimeVue - Tree**
+ *
+ * _Tree is used to display hierarchical data._
+ *
+ * [Live Demo](https://www.primevue.org/tree/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
+declare class BaseTree extends ClassComponent<
+  BaseTreeProps,
+  BaseTreeSlots,
+  BaseTreeEmits
+> {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    BaseTree: GlobalComponentConstructor<BaseTree>;
+  }
+}
+
+export default BaseTree;

package/components/basetree/TreeNode.vue.d.ts

@@ -0,0 +1,35 @@
+import { BaseTreeProps, TreeNode } from './BaseTree.vue.d';
+
+export interface TreeSelectionKeys {
+  [key: string]: {
+    checked?: boolean;
+    partialChecked?: boolean;
+  };
+}
+
+export interface TreeNodeProps extends BaseTreeProps {
+  node: TreeNode;
+  index?: number;
+  disabled?: boolean;
+  /**
+   * List of labels that has no menu option
+   */
+  listLabelsNoOption?: string[];
+  pt?: any;
+  templates?: any;
+}
+
+export interface TreeNodeEmits {
+  nodeToggle: [node: TreeNode];
+  nodeClick: [
+    data: { originalEvent: Event; nodeTouched: boolean; node: TreeNode },
+  ];
+  checkboxChange: [
+    data: {
+      node: TreeNode;
+      check: boolean;
+      selectionKeys: TreeSelectionKeys;
+    },
+  ];
+  toggleMenu: [node: TreeNode];
+}

package/components/breadcrumb/Breadcrumb.vue.d.ts

@@ -0,0 +1,26 @@
+import { DefineComponent } from 'vue';
+
+export type BreadcrumbMenu = {
+  name: string;
+  route?: string;
+  title?: string;
+};
+
+export interface BreadcrumbProps {
+  /**
+   * The list of breadcrumb menu to display.
+   */
+  menus: BreadcrumbMenu[];
+}
+
+/**
+ * **WangsVue - Breadcrumb**
+ *
+ * _Breadcrumb is a component for displaying a breadcrumb trail to help users navigate a website or application.
+ * It takes an array of menu items as a prop and displays each item as a link or label, with a separator between them._
+ *
+ * @group components
+ */
+declare const Breadcrumb: DefineComponent<BreadcrumbProps>;
+
+export default Breadcrumb;