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

package/components/toggleswitch/ToggleSwitch.vue.d.ts

@@ -0,0 +1,281 @@
+/**
+ *
+ * ToggleSwitch is used to select a boolean value.
+ *
+ * @module ToggleSwitch
+ *
+ */
+import { StyleValue } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PassThrough,
+} from '../ts-helpers';
+
+export declare type ToggleSwitchPassThroughOptionType =
+  | ToggleSwitchPassThroughAttributes
+  | ((
+      options: ToggleSwitchPassThroughMethodOptions,
+    ) => ToggleSwitchPassThroughAttributes | string)
+  | string
+  | null
+  | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ToggleSwitchPassThroughMethodOptions {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+
+  /**
+   * Defines valid properties.
+   */
+  props: ToggleSwitchProps;
+
+  /**
+   * Defines current options.
+   */
+  context: ToggleSwitchContext;
+
+  /**
+   * 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 ToggleSwitchProps.pt}
+ */
+export interface ToggleSwitchPassThroughOptions {
+  /**
+   * Used to pass attributes to the root's DOM element.
+   */
+  root?: ToggleSwitchPassThroughOptionType;
+
+  /**
+   * Used to pass attributes to the input's DOM element.
+   */
+  input?: ToggleSwitchPassThroughOptionType;
+
+  /**
+   * Used to pass attributes to the slider's DOM element.
+   */
+  slider?: ToggleSwitchPassThroughOptionType;
+
+  /**
+   * Used to manage all lifecycle hooks.
+   * @see {@link BaseComponent.ComponentHooks}
+   */
+  hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ToggleSwitchPassThroughAttributes {
+  [key: string]: any;
+}
+
+/**
+ * Defines valid properties in ToggleSwitch component.
+ */
+export interface ToggleSwitchProps {
+  /**
+   * Enables triple state mode where the value can be 'null', 'true', or 'false'.
+   *
+   * - null: not checked
+   * - true: checked
+   * - false: partially checked
+   *
+   * @defaultValue false
+   */
+  triState?: boolean;
+
+  /**
+   * Specifies whether a ToggleSwitch should be checked or not.
+   * @defaultValue false - when tristate = false
+   * @defaultValue null - when tristate = true
+   */
+  modelValue?: boolean | string | null | undefined;
+
+  /**
+   * Value in checked state.
+   * @defaultValue true
+   */
+  trueValue?: any;
+
+  /**
+   * Value in unchecked state.
+   * @defaultValue false
+   */
+  falseValue?: any;
+
+  /**
+   * A string that defines the name of the input field.
+   */
+  label?: string;
+
+  /**
+   * Tooltip info about the checkbox.
+   */
+  tooltip?: string;
+  /**
+   * Tooltip position.
+   *
+   * @default 'top'
+   */
+  tooltipPos?: 'top' | 'right' | 'left' | 'bottom';
+
+  /**
+   * When present, it specifies that the component should have invalid state style.
+   * @defaultValue false
+   */
+  invalid?: boolean | undefined;
+
+  /**
+   * When present, it specifies that the component should be disabled.
+   * @defaultValue false
+   */
+  disabled?: boolean | undefined;
+
+  /**
+   * When present, it specifies that an input field is read-only.
+   * @default false
+   */
+  readonly?: boolean | undefined;
+
+  /**
+   * Index of the element in tabbing order.
+   */
+  tabindex?: number | undefined;
+
+  /**
+   * Identifier of the underlying input element.
+   */
+  inputId?: string | undefined;
+
+  /**
+   * Style class of the input field.
+   */
+  inputClass?: string | object | undefined;
+
+  /**
+   * Inline style of the input field.
+   */
+  inputStyle?: StyleValue | undefined;
+
+  /**
+   * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+   */
+  ariaLabelledby?: string | undefined;
+
+  /**
+   * Establishes a string value that labels the component.
+   */
+  ariaLabel?: string | undefined;
+
+  /**
+   * Used to pass attributes to DOM elements inside the component.
+   * @type {ToggleSwitchPassThroughOptions}
+   */
+  pt?: PassThrough<ToggleSwitchPassThroughOptions>;
+
+  /**
+   * 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 current options in ToggleSwitch component.
+ */
+export interface ToggleSwitchContext {
+  /**
+   * Current checked state of the item as a boolean.
+   * @defaultValue false
+   */
+  checked: boolean;
+
+  /**
+   * Current disabled state of the item as a boolean.
+   * @defaultValue false
+   */
+  disabled: boolean;
+}
+/**
+ * Defines valid emits in ToggleSwitch component.
+ */
+export type ToggleSwitchEmits = {
+  /**
+   * Emitted when the value changes.
+   * @param {boolean} value - New value.
+   */
+  'update:modelValue': [value: boolean];
+
+  /**
+   * Callback to invoke on value change.
+   * @param {Event} event - Browser event.
+   */
+  'change': [event: Event];
+
+  /**
+   * 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];
+};
+
+/**
+ * **PrimeVue - ToggleSwitch**
+ *
+ * _ToggleSwitch is used to select a boolean value._
+ *
+ * [Live Demo](https://fewangsit.github.io/wangsvue/toggle)
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ *
+ */
+declare class ToggleSwitch extends ClassComponent<
+  ToggleSwitchProps,
+  unknown,
+  ToggleSwitchEmits
+> {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ToggleSwitch: GlobalComponentConstructor<ToggleSwitch>;
+  }
+}
+
+export default ToggleSwitch;

package/components/tree/Tree.vue.d.ts

@@ -0,0 +1,148 @@
+import { Slot } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { TreeSelectionKeys } from 'primevue/tree';
+import { MenuItem } from '../../components/menuitem';
+import { BaseTreeProps, TreeNode } from '../basetree/BaseTree.vue.d';
+import { QueryParams, ShortFetchResponse } from '../datatable/DataTable.vue.d';
+
+export interface TreeProps extends BaseTreeProps {
+  /**
+   * Keyword to filter the Tree by name/label.
+   */
+  filter: string;
+  type: 'group' | 'category';
+  fetchTree?: (
+    type: 'group' | 'category',
+    params?: QueryParams,
+  ) => Promise<ShortFetchResponse<TreeNode> | undefined>;
+  params?: QueryParams;
+  selectedKeys?: TreeSelectionKeys | number[] | undefined;
+  selectedTreeNodes?: TreeNode[] | undefined;
+  selectionMode?: 'single' | 'checkbox' | undefined;
+  /**
+   * Wether show node button action or not.
+   *
+   * @default false;
+   */
+  useOption?: boolean;
+  /**
+   * List of labels that has no menu option
+   */
+  listLabelsNoOption?: string[];
+  treeNodeMenus?: MenuItem[];
+  /**
+   * Specify wether the all tree node should be auto checked once it rendered.
+   * @default false
+   */
+  autoSelectAll?: boolean;
+  selectLastNode?: boolean;
+  /**
+   * Disable node 'All' selection
+   */
+  disableNodeAll?: boolean;
+  /**
+   * Include node All key (-1) on Checkbox Selection
+   *
+   * @default false - (-1) is excluded
+   */
+  includeNodeAllKey?: boolean;
+  /**
+   * A list of node keys that should be disabled along with their children.
+   */
+  disableKeys?: number[];
+  /**
+   * A list of node keys that should be disabled, affecting only the specified nodes and not their children.
+   */
+  exactDisableKeys?: number[];
+  /**
+   * Defines the tree is readonly and disabled.
+   */
+  readonly?: boolean;
+  /**
+   * Defines the tree to select disposable group only.
+   */
+  selectDisposableOnly?: boolean;
+  /**
+   * Defines the tree to be flattened and shows disposable only
+   */
+  flattenDisposableNode?: boolean;
+  /**
+   * Defines the group tree to disable excluded keys
+   */
+  excludedKeys?: number[];
+  /**
+   * Will emit update selection when value is `true`
+   *
+   * @default false - to prevent auto emit in every possible unhandled way
+   */
+  shouldEmitEventOnChange?: boolean;
+}
+
+export type TreeEmits = {
+  'update:selectedKeys': [keys: TreeSelectionKeys];
+  'update:selectedTreeNodes': [nodes: TreeNode[] | undefined];
+  'nodeSelect': [node: TreeNode];
+  'nodeUnselect': [node: TreeNode];
+  'toggleMenu': [node: TreeNode];
+};
+
+export interface TreeSlots {
+  default: Slot<{ node: TreeNode; checked: boolean; disabled: boolean }>;
+}
+
+/**
+ * **TSVue v2 - Tree**
+ *
+ * _Tree is used to display hierarchical data._
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group Component
+ */
+declare class Tree extends ClassComponent<TreeProps, TreeSlots, TreeEmits> {
+  /**
+   * The Tree Node array.
+   */
+  treeNodes: TreeNode[];
+  /**
+   * The Flat Tree Node array.
+   */
+  flatNodes: TreeNode[];
+  /**
+   * Tree Nodes loading state.
+   */
+  isLoading: boolean;
+  /**
+   * Show disposable group icon.
+   */
+  showDisposableGroups: boolean;
+  /**
+   * State where all tree node expanded.
+   */
+  isExpandedAll: boolean;
+  /**
+   * Method to collapse all node.
+   */
+  collapseAll: () => void;
+  /**
+   * Method to expand all node.
+   */
+  expandAll: () => void;
+  /**
+   * Expand the All node to show all Parent Group
+   */
+  expandNodeAll: () => void;
+  /**
+   * Trigger fetch tree list
+   */
+  fetchTreeList: () => void;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Tree: GlobalComponentConstructor<Tree>;
+  }
+}
+
+export default Tree;

package/components/tree/helpers/filterNodeKeys.helper.d.ts

@@ -0,0 +1,22 @@
+import { TreeSelectionKeys } from 'primevue/tree';
+/**
+ * Parse selection keys into array of keys.
+ *
+ * @param nodeKeys - A collection of selected node keys.
+ * @param includeNodeAllKey - Whether to include the "-1" key (representing "All").
+ */
+export declare const parseNodeKeys: (
+  nodeKeys: TreeSelectionKeys,
+  includeNodeAllKey?: boolean,
+) => number[];
+/**
+ * Filters a collection of selected node keys based on specific criteria.
+ *
+ * @param nodeKeys - A collection of selected node keys.
+ * @param includeNodeAllKey - Whether to include the "-1" key (representing "All").
+ * @returns A new collection of filtered node keys.
+ */
+export declare const filterNodeKeys: (
+  nodeKeys: TreeSelectionKeys,
+  includeNodeAllKey?: boolean,
+) => TreeSelectionKeys;

package/components/tree/helpers/flattenTreeNodeChildren.helper.d.ts

@@ -0,0 +1,8 @@
+import { TreeNode } from '../../basetree/BaseTree.vue.d';
+/**
+ * Covert deeply nested tree node into one level array.
+ */
+declare const flattenTreeNodeChildren: (
+  nodes: TreeNode[] | undefined,
+) => TreeNode[];
+export default flattenTreeNodeChildren;

package/components/treesearchinput/TreeSearchInput.vue.d.ts

@@ -0,0 +1,16 @@
+import { DefineComponent } from 'vue';
+
+export type TreeSearchInputProps = {
+  modelValue?: string;
+};
+
+export type TreeSearchInputEmits = {
+  'update:modelValue': [payload: string];
+};
+
+declare const TreeSearchInput: DefineComponent<
+  TreeSearchInputProps,
+  TreeSearchInputEmits
+>;
+
+export default TreeSearchInput;

package/components/ts-helpers.d.ts

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  AllowedComponentProps,
+  ComponentCustomProps,
+  ObjectEmitsOptions,
+  VNode,
+  VNodeProps,
+} from 'vue';
+
+declare type PublicProps = VNodeProps &
+  AllowedComponentProps &
+  ComponentCustomProps;
+
+declare type UnionToIntersection<U> = (
+  U extends any ? (k: U) => void : never
+) extends (k: infer I) => void
+  ? I
+  : never;
+
+declare type EmitFn<
+  Options = ObjectEmitsOptions,
+  Event extends keyof Options = keyof Options,
+> =
+  Options extends Array<infer V>
+    ? (event: V, ...args: any[]) => void
+    : object extends Options
+      ? (event: string, ...args: any[]) => void
+      : UnionToIntersection<
+          {
+            [key in Event]: Options[key] extends (...args: infer Args) => any
+              ? (event: key, ...args: Args) => void
+              : (event: key, ...args: any[]) => void;
+          }[Event]
+        >;
+
+export class ClassComponent<Props, Slots, Emits> {
+  $props: Props & PublicProps;
+  $slots: Slots;
+  $emit: EmitFn<Emits>;
+}
+
+export type GlobalComponentConstructor<T> = {
+  new (): T;
+};
+
+/**
+ * Custom types
+ */
+export declare type Booleanish = boolean | 'true' | 'false';
+
+export declare type Numberish = number | string;
+
+export declare type Nullable<T = void> = T | null | undefined;
+
+export declare type PassThrough<T = void> = T | object | undefined;
+export declare type Preset<T = void> = T | object | undefined;
+
+export declare type DefaultPassThrough<T = void> =
+  | T
+  | ((instance?: VNode) => T | undefined)
+  | undefined;
+
+export declare type HintedString<T extends string> = (string & {}) | T;
+
+export declare type PresetAttributes = {
+  class?: any;
+  style?: any;
+  [key: string]: any;
+};
+
+export declare type PresetMethodOptions = {
+  instance: any;
+  props: any;
+  state: any;
+  context: any;
+  attrs: any;
+  parent: any;
+  global: object | undefined;
+};
+
+export declare type PresetOptionMethodType<Opt = PresetMethodOptions> = (
+  options: Partial<Opt>,
+) => PresetAttributes;

package/components/username/UserName.vue.d.ts

@@ -0,0 +1,113 @@
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PresetAttributes,
+  PresetOptionMethodType,
+} from '../ts-helpers';
+
+export interface UserNamePresetOptions {
+  root: PresetAttributes;
+  displayname: PresetOptionMethodType;
+  panel: {
+    background: PresetAttributes;
+    username: PresetAttributes;
+    useremail: PresetAttributes;
+    positiondivision: PresetAttributes;
+    userdetaillink: PresetAttributes;
+    contentwrapper: PresetAttributes;
+    detailwrapper: PresetAttributes;
+  };
+}
+
+export interface UserNameLocaleConfig {
+  /**
+   * The anchor text for user detail link on user panel
+   */
+  detailUserAnchorText?: string;
+}
+
+export interface UserNameComponentConfigs {
+  /**
+   * @example `/tim-member/member/{userId}/detail-member`
+   */
+  detailUserPath: string;
+
+  /**
+   * @default 'picture' - Show user profile picture instead of user icon
+   */
+  type?: 'icon' | 'picture';
+
+  /**
+   * Specify the field of user to be used as display name
+   *
+   * @example 'name.fullName'
+   */
+  userNameField?: string;
+  /**
+   * Specify the field of user to be used as display picture
+   *
+   * @example 'image.profile'
+   */
+  profilePictureField?: string;
+
+  /**
+   * Function to get user detail on panel shown
+   * @param userId The user id
+   * @returns Full user detail object
+   */
+  getUserDetail: (
+    userId: string,
+  ) => UserNameProps['user'] | Promise<UserNameProps['user']>;
+}
+
+export interface GeneralUser {
+  _id: string;
+  profilePicture?: string;
+  firstName?: string;
+  lastName?: string;
+  fullName?: string;
+  email?: string;
+  nickName?: string;
+  position?: string;
+  division?: string;
+  [key: string]: any;
+}
+
+/**
+ * Defines valid properties in UserName component.
+ */
+export interface UserNameProps extends Partial<UserNameComponentConfigs> {
+  /**
+   * The full user Object
+   */
+  user?: GeneralUser;
+
+  /**
+   * When it sets to false, the props.user will be used
+   */
+  fetchDetailOnPanelShow?: boolean;
+}
+
+/**
+ * **WangsVue - UserName**
+ *
+ * _Displays an user and profile image._
+ *
+ * --- ---
+ *
+ * @group Component
+ *
+ */
+declare class UserName extends ClassComponent<
+  UserNameProps,
+  unknown,
+  unknown
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    UserName: GlobalComponentConstructor<UserName>;
+  }
+}
+
+export default UserName;

package/components/userwithicon/UserWithIcon.vue.d.ts

@@ -0,0 +1,20 @@
+import { UserDetail } from '@tagsamurai/fats-api-services/src/types/user.type';
+import { ClassComponent } from '../../components/ts-helpers';
+
+export interface UserWithIconProps {
+  user: UserDetail;
+}
+
+declare class UserWithIcon extends ClassComponent<
+  UserWithIconProps,
+  unknown,
+  unknown
+> {}
+
+declare module 'vue' {
+  interface GlobalComponents {
+    UserWithIcon: typeof UserWithIcon;
+  }
+}
+
+export default UserWithIcon;

package/config/defaultProps.d.ts

@@ -0,0 +1,3 @@
+import { ComponentDefaultPropsConfig } from '../plugins/WangsVue';
+declare const defaultProps: ComponentDefaultPropsConfig;
+export default defaultProps;

package/config/index.d.ts

@@ -0,0 +1,3 @@
+import { WangsVueOptions } from '../plugins/WangsVue';
+declare const _default: import('vue').Plugin<Partial<WangsVueOptions>>;
+export default _default;

package/config/locale.d.ts

@@ -0,0 +1,3 @@
+import { LocaleConfig } from '../plugins/WangsVue';
+declare const locale: LocaleConfig;
+export default locale;