@fewangsit/wangsvue-gsts 1.0.0-alpha.23 → 1.0.0-alpha.24

package/build-entry.d.ts

@@ -8,7 +8,7 @@ export { default as Tooltip } from 'primevue/tooltip';
 export { Focus } from './directives';
 export { useForm, useField } from './plugins/formValidation';
 export type { FormContext } from './plugins/formValidation';
-export * from './plugins/translation';
-export { default as i18n } from './plugins/translation';
+export * from './plugins/i18n';
+export { default as i18n } from './plugins/i18n';
 export * from './components';
 export { default as WangsVue } from './config';

package/components/buttonscan/ButtonScan.vue.d.ts

@@ -0,0 +1,201 @@
+import { ClassComponent, HintedString } from '../../components/ts-helpers.d';
+import { ButtonProps } from '../../components/button/Button.vue.d';
+import { WangsIcons } from '../icon/Icon.vue.d';
+
+export type ScannerErrorCode =
+  | 'DRIVER_NOT_FOUND'
+  | 'DEVICE_NOT_CONNECTED'
+  | 'DEVICE_DISCONNECTED'
+  | 'NOT_SUPPORTED_SYSTEM'
+  | 'HARDWARE_NOT_SYNCHRONIZED';
+
+export type ScannerErrorMessage = {
+  title: string;
+  detail: string;
+};
+
+export type ScannerOption = Partial<Device> & {
+  label: string;
+  device: Device | undefined;
+};
+
+export type Device = {
+  jenisDevice: string;
+  serialNumber: string;
+  API: string;
+  rfidScan: boolean;
+  qrScan: boolean;
+  name: string;
+};
+
+export type RegisteredDevice = {
+  _id: string;
+  imageSmall: string;
+  imageBig: string;
+  serialNumber: string;
+  status: string;
+  lastReportDate: string;
+  createdAt: string;
+  updatedAt: string;
+  group: null;
+  name: string;
+};
+
+export type DeviceList = Device[];
+
+export interface ButtonScanProps extends Omit<ButtonProps, 'type'> {
+  /**
+   * Set custom button label.
+   *
+   * @default Scan Type
+   */
+  label?: string;
+  /**
+   * Set custom button icon.
+   *
+   * @default 'qr' | 'rfid'
+   */
+  icon?: WangsIcons;
+  /**
+   * Scpecify the scan type
+   */
+  type?: 'RFID' | 'QR';
+  /**
+   * Automatically switch between RFID and QR scan types during the scanning process.
+   * This allows the scan type to change dynamically based on the validation of the scanned code.
+   *
+   * The scan type will alternate between RFID and QR based on the validation result:
+   * - If the current scan is valid, it proceeds with the next scan type.
+   * - If the scan is invalid, it will re-scan using the previous scan type.
+   *
+   * This behavior continues in a loop until a stop condition is met, typically triggered by the parent component.
+   *
+   * Note: Only work with single Scan
+   *
+   * @default false
+   * @type {boolean}
+   *
+   * @example
+   * // Example usage in a component:
+   * <Button :auto-switch="true" />
+   *
+   * In this case, scanning will automatically switch between RFID and QR based on the validation results.
+   */
+  autoSwitch?: boolean;
+
+  /**
+   * Do validation when a tag is scanned, if valid, it will emits scan, otherwise re-scanning.
+   * when need to show toast on validation failed, set the toast group to `scan-error-validation`
+   *
+   * @param type
+   * @param code
+   * @param serialNumber
+   * @returns
+   */
+  scanValidation?: (
+    type: 'RFID' | 'QR',
+    code: string,
+    serialNumber: string,
+  ) => Promise<boolean>;
+
+  /**
+   * The value of the input (tag).
+   *
+   * @deprecated use `onScan` instead.
+   */
+  modelValue?: string;
+  /**
+   *  Whether the scanner is in bulk mode.
+   *
+   * @toto add support bulk scan
+   */
+  bulk?: boolean;
+  /**
+   *  The id of the button element.
+   */
+  id?: string;
+  /**
+   * Wether the button should be disabled.
+   */
+  disabled?: boolean;
+  /**
+   *  Whether the scanner is a powerbank.
+   *
+   * @deprecated
+   */
+  powerbank?: boolean;
+  /**
+   * Display the label only (wihout icon).
+   *
+   * @default false
+   */
+  labelOnly?: boolean;
+  /**
+   * Add a border class without a background initially.
+   * @default false
+   */
+  outlined?: boolean | undefined;
+  /**
+   * Defines the style of the button.
+   */
+  severity?:
+    | HintedString<
+        | 'secondary'
+        | 'success'
+        | 'info'
+        | 'warning'
+        | 'help'
+        | 'danger'
+        | 'contrast'
+      >
+    | undefined;
+  /**
+   * Defines the size of the button.
+   */
+  size: 'small' | 'large';
+}
+
+export type ButtonScanEmits = {
+  'update:modelValue': [tag: string];
+  'connect': [];
+  'connected': [device?: Device];
+  'scan': [tag: string, deviceSerialNumber: string];
+  'stop': [];
+  'error': [error: unknown | Event];
+  'beforeStartScan': [];
+};
+
+export interface ButtonScanExposes {
+  onBeforeStartScan: () => void;
+  startScan: () => void;
+  /**
+   * Method to stop the scan process.
+   */
+  stopScan: (afterScan?: boolean) => void;
+}
+
+/**
+ * **TSVue v2 - ButtonScan**
+ *
+ * _ButtonScan is component for scanning RFID or QR Tag._
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group Component
+ */
+declare class ButtonScan
+  extends ClassComponent<ButtonScanProps, ButtonScanEmits, unknown>
+  implements ButtonScanExposes
+{
+  onBeforeStartScan: () => void;
+  startScan: () => void;
+  stopScan: (afterScan?: boolean) => void;
+}
+
+interface Window {
+  scannerWorker: Worker;
+  toastGroups: string[] | undefined;
+}
+
+export default ButtonScan;

package/components/buttonscan/helpers/getErrorCode.helper.d.ts

@@ -0,0 +1,3 @@
+import { ScannerErrorCode } from '../ButtonScan.vue.d';
+declare const getErrorCode: (error: unknown) => ScannerErrorCode | undefined;
+export default getErrorCode;

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

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

package/components/buttonscan/workers/scanner.worker.d.ts

@@ -0,0 +1 @@
+export {};

package/components/buttonselecttree/ButtonSelectTree.vue.d.ts

@@ -1,7 +1,7 @@
 import { Slot } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { TreeNode } from '../basetree/BaseTree.vue.d';
-import { ShortFetchResponse } from '../datatable/DataTable.vue.d';
+import { QueryParams, ShortFetchResponse } from '../datatable/DataTable.vue.d';
 
 export type KeysModelValue = number[] | undefined;
 export type NodeModelValue =
@@ -75,7 +75,9 @@ export interface ButtonSelectTreeProps {
 
   fetchTree?: (
     type: 'group' | 'category',
+    params?: QueryParams,
   ) => Promise<ShortFetchResponse<TreeNode> | undefined>;
+  params?: QueryParams;
   /**
    * Specify wether the all tree node should be auto checked once it rendered.
    * @default false

package/components/buttonsplit/ButtonSplit.vue.d.ts

@@ -1,34 +1,350 @@
-import { ButtonSplitProps } from './ButtonSplit.d';
-declare function __VLS_template(): {
-    menuitemicon?(_: {
-        item: any;
-        class: any;
-    }): any;
-    item?(_: {
-        hasSubmenu: any;
-        item: any;
-        label: any;
-        props: any;
-    }): any;
-};
-declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToOption<ButtonSplitProps>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    click: (event: Event) => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<ButtonSplitProps>>> & {
-    onClick?: (event: Event) => any;
-}, {}, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
+/**
+ *
+ * ButtonSplit groups a set of commands in an overlay with a default command.
+ *
+ * [Live Demo](https://www.primevue.org/splitbutton/)
+ *
+ * @module splitbutton
+ *
+ */
+import { ButtonHTMLAttributes, VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { ButtonPassThroughOptions } from 'primevue/button';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import {
+  TieredMenuPassThroughOptions,
+  TieredMenuRouterBindProps,
+} from 'primevue/tieredmenu';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PassThrough,
+  HintedString,
+} from '../ts-helpers';
+import { WangsIcons } from '../icon/Icon.vue';
+
+export declare type ButtonSplitPassThroughOptionType =
+  | ButtonSplitPassThroughAttributes
+  | ((
+      options: ButtonSplitPassThroughMethodOptions,
+    ) => ButtonSplitPassThroughAttributes | string)
+  | string
+  | null
+  | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ButtonSplitPassThroughMethodOptions {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+  /**
+   * Defines valid properties.
+   */
+  props: ButtonSplitProps;
+  /**
+   * Defines current inline state.
+   */
+  state: ButtonSplitState;
+  /**
+   * Defines valid attributes.
+   */
+  attrs: any;
+  /**
+   * Defines parent options.
+   */
+  parent: any;
+  /**
+   * Defines passthrough(pt) options in global config.
+   */
+  global: object | undefined;
+}
+
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface ButtonSplitSharedPassThroughMethodOptions {
+  /**
+   * Defines valid properties.
+   */
+  props: ButtonSplitProps;
+  /**
+   * Defines current inline state.
+   */
+  state: ButtonSplitState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ButtonSplitProps.pt}
+ */
+export interface ButtonSplitPassThroughOptions {
+  /**
+   * Used to pass attributes to the root's DOM element.
+   */
+  root?: ButtonSplitPassThroughOptionType;
+  /**
+   * Used to pass attributes to the button's DOM element.
+   */
+  button?: ButtonSplitPassThroughOptionType;
+  /**
+   * Used to pass attributes to the Button component.
+   * @see {@link ButtonPassThroughOptions}
+   */
+  menuButton?: ButtonPassThroughOptions<ButtonSplitSharedPassThroughMethodOptions>;
+  /**
+   * Used to pass attributes to the TieredMenu component.
+   * @see {@link TieredMenuPassThroughOptions}
+   */
+  menu?: TieredMenuPassThroughOptions<ButtonSplitSharedPassThroughMethodOptions>;
+  /**
+   * Used to manage all lifecycle hooks.
+   * @see {@link BaseComponent.ComponentHooks}
+   */
+  hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ButtonSplitPassThroughAttributes {
+  [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ButtonSplit component.
+ */
+export interface ButtonSplitState {
+  /**
+   * Current blocked state as a boolean.
+   * @defaultValue false
+   */
+  isBlocked: boolean;
+}
+
+/**
+ * Defines valid properties in ButtonSplit component.
+ */
+export interface ButtonSplitProps {
+  /**
+   * Text of the button.
+   */
+  label?: string | undefined;
+  /**
+   * Name of the icon of main button.
+   */
+  icon?: WangsIcons | undefined;
+  /**
+   * MenuModel instance to define the overlay items.
+   */
+  model?: MenuItem[] | undefined;
+  /**
+   * Whether to automatically manage layering.
+   * @defaultValue true
+   */
+  autoZIndex?: boolean | undefined;
+  /**
+   * Base zIndex value to use in layering.
+   * @defaultValue 0
+   */
+  baseZIndex?: number | undefined;
+  /**
+   * A valid query selector or an HTMLElement to specify where the overlay gets attached.
+   * Special keywords are 'body' for document body and 'self' for the element itself.
+   * @defaultValue body
+   */
+  appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
+  /**
+   * When present, it specifies that the element should be disabled.
+   * @defaultValue false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Style class of the component.
+   */
+  class?: any | undefined;
+  /**
+   * Inline style of the component.
+   */
+  style?: any | undefined;
+  /**
+   * Used to pass all properties of the HTMLButtonElement to the default button.
+   */
+  buttonProps?: ButtonHTMLAttributes | undefined;
+  /**
+   * Used to pass all properties of the HTMLButtonElement to the menu button.
+   */
+  menuButtonProps?: ButtonHTMLAttributes | undefined;
+  /**
+   * Name of the menu button icon.
+   */
+  menuButtonIcon?: WangsIcons | undefined;
+  /**
+   * Defines the style of the button.
+   */
+  severity?:
+    | HintedString<
+        | 'secondary'
+        | 'success'
+        | 'info'
+        | 'warning'
+        | 'help'
+        | 'danger'
+        | 'contrast'
+      >
+    | undefined;
+  /**
+   * Add a shadow to indicate elevation.
+   * @defaultValue false
+   */
+  raised?: boolean | undefined;
+  /**
+   * Add a circular border radius to the button.
+   * @defaultValue false
+   */
+  rounded?: boolean | undefined;
+  /**
+   * Add a textual class to the button without a background initially.
+   * @defaultValue false
+   */
+  text?: boolean | undefined;
+  /**
+   * Add a border class without a background initially.
+   * @defaultValue false
+   */
+  outlined?: boolean | undefined;
+  /**
+   * Defines the size of the button.
+   */
+  size?: 'small' | 'large' | undefined;
+  /**
+   * Add a plain textual class to the button without a background initially.
+   * @defaultValue false
+   */
+  plain?: boolean | undefined;
+  /**
+   * Used to pass attributes to DOM elements inside the component.
+   * @type {ButtonSplitPassThroughOptions}
+   */
+  pt?: PassThrough<ButtonSplitPassThroughOptions>;
+  /**
+   * 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 ButtonSplit component.
+ */
+export interface ButtonSplitSlots {
+  /**
+   * Button part of the content can easily be customized with the default slot instead of using the built-in modes.
+   */
+  default(): VNode[];
+  /**
+   * Command button part of the content can easily be customized with the button content slot.
+   */
+  buttoncontent(): VNode[];
+  /**
+   * Custom button icon template.
+   * @param {Object} scope - icon slot's params.
+   */
+  icon(scope: {
+    /**
+     * Style class of the icon.
+     */
+    class: string;
+  }): VNode[];
+  /**
+   * Custom menu button icon template.
+   * @param {Object} scope - menubuttonicon slot's params.
+   */
+  menubuttonicon(scope: {
+    /**
+     * Style class of the icon.
+     */
+    class: string;
+  }): VNode[];
+  /**
+   * Custom menu item icon template.
+   * @param {Object} scope - menuitemicon slot's params.
+   */
+  menuitemicon(scope: {
+    /**
+     * Menuitem instance
+     */
+    item: MenuItem;
+    /**
+     * Style class of the item icon element.
+     */
+    class: any;
+  }): VNode[];
+  /**
+   * Custom content for each menu item.
+   * @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: TieredMenuRouterBindProps;
+    /**
+     * Whether or not there is a submenu
+     */
+    hasSubmenu: boolean;
+  }): VNode[];
+}
+
+/**
+ * Defines valid emits in ButtonSplit component.
+ */
+export interface ButtonSplitEmits {
+  /**
+   * Callback to invoke when main button is clicked.
+   * @param {Event} event - Browser event.
+   */
+  click(event: Event): void;
+}
+
+/**
+ * **PrimeVue - ButtonSplit**
+ *
+ * _ButtonSplit groups a set of commands in an overlay with a default command._
+ *
+ * [Live Demo](https://www.primevue.org/splitbutton/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class ButtonSplit extends ClassComponent<
+  ButtonSplitProps,
+  ButtonSplitSlots,
+  ButtonSplitEmits
+> {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ButtonSplit: GlobalComponentConstructor<ButtonSplit>;
+  }
+}
+
+export default ButtonSplit;

package/components/buttonsync/ButtonSync.vue.d.ts

@@ -0,0 +1,22 @@
+import { ClassComponent } from '../ts-helpers';
+
+export interface ButtonSyncProps {
+  /**
+   * Defines no scan buttons in hardware sync dialog footer.
+   */
+  withoutScanBtn?: boolean;
+}
+
+declare class ButtonSync extends ClassComponent<
+  ButtonSyncProps,
+  unknown,
+  unknown
+> {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ButtonSync: typeof ButtonSync;
+  }
+}
+
+export default ButtonSync;

package/components/dropdown/Dropdown.vue.d.ts

@@ -1,8 +1,18 @@
 import { Slot } from 'vue';
-import { DropdownOption, OptionValue } from '../../types/options.type';
 import { CustomValidation } from '../form/Form.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { BadgeProps } from '../../components/badge/Badge.vue.d';
+import { WangsIcons } from '../../components/icon/Icon.vue.d';
+
+export type OptionValue = string | number | boolean | Record<string, any>;
+
+export type Option = {
+  label?: string;
+  value?: OptionValue;
+  visible?: boolean;
+  icon?: WangsIcons;
+  [key: string]: any;
+};
 
 /**
  * Configuration interface for localizing dropdown component placeholders and error messages.
@@ -77,7 +87,7 @@ export interface DropdownProps {
   /**
    * List of options to display.
    */
-  options?: DropdownOption[] | string[] | Record<string, any>;
+  options?: Option[] | string[] | Record<string, any>;
 
   /**
    * Allows `null` to be treated as a valid selectable option in the dropdown.
@@ -212,7 +222,7 @@ export interface DropdownProps {
 
 export interface DropdownSlots {
   'value': Slot<{ value: string; originalValue: any }>;
-  'option': Slot<{ option: DropdownOption }>;
+  'option': Slot<{ option: Option }>;
   'addon-left': Slot;
   'addon-right': Slot;
 }