@fewangsit/wangsvue-fats 1.0.0-alpha.6 → 1.0.0-alpha.61

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

@@ -10,9 +10,10 @@
  *
  */
 import { TransitionProps, VNode } from 'vue';
+
 import { ComponentHooks } from '../basecomponent';
-import { PassThroughOptions } from '../passthrough';
 import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
 import {
   ClassComponent,
   GlobalComponentConstructor,

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

@@ -1,9 +1,12 @@
-import { DropdownLocaleConfig } from '../dropdown/Dropdown.vue.d';
+import {
+  DropdownLocaleConfig,
+  Option,
+  OptionValue,
+} from '../../components/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 & {};
 
 /**
@@ -25,7 +28,7 @@ export interface MultiSelectProps {
   /**
    * List of options to display.
    */
-  options?: MultiSelectOption[] | string[];
+  options?: Option[] | string[];
 
   /**
    * Specify the property name of option to be used as label.

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

@@ -8,6 +8,7 @@
  *
  */
 import { TransitionProps, VNode } from 'vue';
+
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import {

package/components/paginator/Paginator.vue.d.ts

@@ -0,0 +1,285 @@
+/**
+ *
+ * Paginator is a generic component to display content in paged format.
+ *
+ * [Live Demo](https://TSVue v2.org/paginator)
+ *
+ * @module paginator
+ *
+ */
+import { VNode } from 'vue';
+
+import { PassThroughOptions } from '../passthrough';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PassThrough,
+} from '../ts-helpers';
+
+import {
+  PaginatorPassThroughAttributes,
+  PaginatorPassThroughOptions,
+} from 'primevue/paginator';
+
+export declare type PaginatorPassThroughOptionType<T = any> =
+  | PaginatorPassThroughAttributes
+  | ((
+      options: PaginatorPassThroughMethodOptions<T>,
+    ) => PaginatorPassThroughAttributes | string)
+  | string
+  | null
+  | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PaginatorPassThroughMethodOptions<T> {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+  /**
+   * Defines valid properties.
+   */
+  props: PaginatorProps;
+  /**
+   * Defines current inline state.
+   */
+  state: PaginatorState;
+  /**
+   * Defines parent instance.
+   */
+  parent: T;
+  /**
+   * Defines current options.
+   */
+  context: PaginatorContext;
+  /**
+   * Defines passthrough(pt) options in global config.
+   */
+  global: object | undefined;
+}
+
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface PaginatorSharedPassThroughMethodOptions {
+  /**
+   * Defines valid properties.
+   */
+  props: PaginatorProps;
+  /**
+   * Defines current inline state.
+   */
+  state: PaginatorState;
+}
+
+/**
+ * Defines current inline state in Paginator component.
+ */
+export interface PaginatorState {
+  /**
+   * Current index of first record as a number.
+   */
+  d_first: number;
+  /**
+   * Current number of rows to display in new page as a number.
+   */
+  d_rows: number;
+}
+
+/**
+ * Defines current options in Paginator component.
+ */
+export interface PaginatorContext {
+  /**
+   * Current active state as a boolean.
+   * @defaultValue false
+   */
+  active: boolean;
+  /**
+   * Current disabled state of the button as a boolean.
+   * @defaultValue false
+   */
+  disabled: boolean;
+}
+
+/**
+ * Paginator page state metadata.
+ */
+export interface PageState {
+  /**
+   * Index of first record
+   */
+  first: number;
+  /**
+   * Number of rows to display in new page
+   */
+  rows: number;
+  /**
+   * New page number
+   */
+  page: number;
+  /**
+   * Total number of pages
+   */
+  pageCount?: number;
+}
+
+/**
+ * Defines valid properties in Paginator component.
+ */
+export interface PaginatorProps {
+  /**
+   * Number of total records.
+   * @defaultValue 0
+   */
+  totalRecords?: number | undefined;
+  /**
+   * Data count to display per page.
+   * @defaultValue 0
+   */
+  rows?: number | undefined;
+  /**
+   * Zero-relative number of the first row to be displayed.
+   * @defaultValue 0
+   */
+  first?: number | undefined;
+  /**
+   * Number of page links to display.
+   * @defaultValue 5
+   */
+  pageLinkSize?: number | undefined;
+  /**
+   * Array of integer values to display inside rows per page dropdown.
+   */
+  rowsPerPageOptions?: number[] | undefined;
+  /**
+   * Template of the paginator, can either be a string or an object with key-value pairs to define templates per breakpoint. Available templates are the following;
+   *
+   * - FirstPageLink
+   * - PrevPageLink
+   * - PageLinks
+   * - NextPageLink
+   * - LastPageLink
+   * - RowsPerPageDropdown
+   * - JumpToPageDropdown
+   * - JumpToPageInput
+   * - CurrentPageReport
+   */
+  template?: any | string;
+  /**
+   * Template of the current page report element. It displays information about the pagination state. Available placeholders are the following;
+   *
+   * - {currentPage}
+   * - {totalPages}
+   * - {rows}
+   * - {first}
+   * - {last}
+   * - {totalRecords}
+   *
+   * @defaultValue '({currentPage} of {totalPages})'
+   */
+  currentPageReportTemplate?: string | undefined;
+  /**
+   * Whether to show the paginator even there is only one page.
+   * @defaultValue true
+   */
+  alwaysShow?: boolean | undefined;
+  /**
+   * Used to pass attributes to DOM elements inside the component.
+   * @type {PaginatorPassThroughOptions}
+   */
+  pt?: PassThrough<PaginatorPassThroughOptions>;
+  /**
+   * Used to configure passthrough(pt) options of the component.
+   * @type {PassThroughOptions}
+   */
+  ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines valid slots in Paginator component.
+ */
+export interface PaginatorSlots {
+  /**
+   * Custom start template.
+   * @param {Object} scope - start slot's params.
+   */
+  start(scope: {
+    /**
+     * Current state
+     * @see PageState
+     */
+    state: PageState;
+  }): VNode[];
+  /**
+   * Custom end template.
+   * @param {Object} scope - end slot's params.
+   */
+  end(scope: {
+    /**
+     * Current state
+     * @see PageState
+     */
+    state: PageState;
+  }): VNode[];
+  /**
+   * Custom first page link icon template.
+   */
+  firstpagelinkicon(): VNode[];
+  /**
+   * Custom previous page link icon template.
+   */
+  prevpagelinkicon(): VNode[];
+  /**
+   * Custom finextrst page link icon template.
+   */
+  nextpagelinkicon(): VNode[];
+  /**
+   * Custom last page link icon template.
+   */
+  lastpagelinkicon(): VNode[];
+  /**
+   * Custom rowsperpagedropdownicon template.
+   * @param {Object} scope - rowsperpagedropdownicon's params.
+   */
+  rowsperpagedropdownicon(scope: {
+    /**
+     * Style class of the rowsperpagedropdown icon.
+     */
+    class: string;
+  }): VNode[];
+  /**
+   * Custom jumptopagedropdownicon template.
+   * @param {Object} scope - jumptopagedropdownicon's params.
+   */
+  jumptopagedropdownicon(scope: {
+    /**
+     * Style class of the jumptopagedropdown icon.
+     */
+    class: string;
+  }): VNode[];
+}
+
+/**
+ * Defines valid emits in Paginator component.
+ */
+export type PaginatorEmits = {
+  'page': [event: PageState];
+  'update:rows': [];
+};
+
+declare class Paginator extends ClassComponent<
+  PaginatorProps,
+  PaginatorSlots,
+  PaginatorEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Paginator: GlobalComponentConstructor<Paginator>;
+  }
+}
+
+export default Paginator;

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

@@ -8,6 +8,7 @@
  *
  */
 import { VNode } from 'vue';
+
 import { ComponentHooks } from '../basecomponent';
 import { MenuItem } from '../menuitem';
 import { PassThroughOptions } from '../passthrough';
@@ -263,7 +264,7 @@ export type TabMenuEmits = {
    * Callback to invoke when an active tab is changed.
    * @param {TabMenuChangeEvent} event - Custom tab change event.
    */
-  'tab-change': [event: TabMenuChangeEvent];
+  'tabChange': [event: TabMenuChangeEvent];
   'update:activeIndex': [index: number];
 };
 

package/components/textarea/Textarea.vue.d.ts

@@ -1,11 +1,12 @@
 import { TextareaHTMLAttributes } from 'vue';
+
+import { CustomValidation } from '../form/Form.vue.d';
 import {
   ClassComponent,
   GlobalComponentConstructor,
   Nullable,
   Numberish,
 } from '../ts-helpers.d';
-import { CustomValidation } from '../form/Form.vue.d';
 
 export interface TextareaLocaleConfig {
   /**

package/components/timeline/Timeline.vue.d.ts

@@ -1,3 +1,4 @@
+import { BadgeProps } from '../badge/Badge.vue.d';
 import { JSONContent } from '../editor/Editor.vue.d';
 import { ClassComponent } from '../ts-helpers';
 
@@ -26,6 +27,10 @@ export interface DetailText {
   value: string;
 }
 
+export interface DetailBadge extends BadgeProps {
+  type: 'badge';
+}
+
 export interface DetailUserText {
   type: 'userText';
   user: {
@@ -62,7 +67,8 @@ export type DetailType =
   | DetailText
   | DetailUserText
   | DetailBullet
-  | DetailJSONContent;
+  | DetailJSONContent
+  | DetailBadge;
 
 export type KeyValue = Record<string, string | DetailType>;
 

package/components/toast/Toast.vue.d.ts

@@ -9,14 +9,15 @@
  *
  */
 import { TransitionProps, VNode } from 'vue';
+
 import { ComponentHooks } from '../basecomponent';
+import { WangsIcons } from '../icon/Icon.vue.d';
 import { PassThroughOptions } from '../passthrough';
 import {
   ClassComponent,
   GlobalComponentConstructor,
   PassThrough,
 } from '../ts-helpers';
-import { WangsIcons } from '../icon/Icon.vue.d';
 
 export declare type ToastPassThroughOptionType =
   | ToastPassThroughAttributes

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

@@ -6,6 +6,7 @@
  *
  */
 import { StyleValue } from 'vue';
+
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import {

package/components/transactionroles/TransactionRoles.vue.d.ts

@@ -0,0 +1,58 @@
+import { DefineComponent } from 'vue';
+
+export type TransactionRoles = Addon & {
+  borrowing: boolean;
+  assignment: boolean;
+  transfer: boolean;
+  disposal: boolean;
+};
+
+export type Addon = {
+  repairTicketing: boolean;
+  maintenance: boolean;
+  tracking: boolean;
+  audit: boolean;
+  assetControl: boolean;
+};
+
+type LicenseStatus = 'Managed' | 'Unmanaged' | null;
+
+export type LicenseStatuses = {
+  fixedAsset: LicenseStatus;
+  repairTicketing: LicenseStatus;
+  maintenance: LicenseStatus;
+  tracking: LicenseStatus;
+  audit: LicenseStatus;
+  assetControl: LicenseStatus;
+};
+
+export type RoleData = {
+  [key: string]: unknown;
+  transactionRoles?: TransactionRoles;
+  addOn?: Addon;
+  transactions?: TransactionRoles; // For Policy Assets
+  licenseStatuses?: LicenseStatuses;
+};
+
+export interface TransactionRolesProps {
+  asset?: RoleData;
+  user?: Omit<RoleData, 'addon'>;
+  /**
+   * @default transaction
+   */
+  type?: 'transaction' | 'addon' | 'transaction-policy';
+}
+
+/**
+ * **TSVue V2 - TransactionRoles**
+ *
+ * _TransactionRoles is a component to show list of transaction role._
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group buttons
+ */
+declare const TransactionRoles: DefineComponent<TransactionRolesProps>;
+
+export default TransactionRoles;

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

@@ -1,9 +1,12 @@
 import { Slot } from 'vue';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { TreeSelectionKeys } from 'primevue/tree';
-import { MenuItem } from 'lib/components/menuitem';
+
+import { MenuItem } from '../../components/menuitem';
+
 import { BaseTreeProps, TreeNode } from '../basetree/BaseTree.vue.d';
 import { QueryParams, ShortFetchResponse } from '../datatable/DataTable.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+import { TreeSelectionKeys } from 'primevue/tree';
 
 export interface TreeProps extends BaseTreeProps {
   /**

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

@@ -5,7 +5,10 @@ import { TreeSelectionKeys } from 'primevue/tree';
  * @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[];
+export declare const parseNodeKeys: (
+  nodeKeys: TreeSelectionKeys,
+  includeNodeAllKey?: boolean,
+) => number[];
 /**
  * Filters a collection of selected node keys based on specific criteria.
  *
@@ -13,4 +16,7 @@ export declare const parseNodeKeys: (nodeKeys: TreeSelectionKeys, includeNodeAll
  * @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;
+export declare const filterNodeKeys: (
+  nodeKeys: TreeSelectionKeys,
+  includeNodeAllKey?: boolean,
+) => TreeSelectionKeys;

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

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

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

@@ -37,6 +37,11 @@ export interface UserNameComponentConfigs {
    */
   type?: 'icon' | 'picture';
 
+  /**
+   * Whether to show the user's name. If false, only the user's icon will be shown.
+   * @default true
+   */
+  showUserName?: boolean;
   /**
    * Specify the field of user to be used as display name
    *

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

@@ -0,0 +1,21 @@
+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

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

package/config/index.d.ts

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

package/config/locale.d.ts

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

package/directives/focus.d.ts

@@ -2,6 +2,6 @@
  * This directive is used to focus the html input on a component.
  */
 declare const Focus: {
-    mounted: (el: HTMLElement) => Promise<void>;
+  mounted: (el: HTMLElement) => Promise<void>;
 };
 export default Focus;