@fewangsit/wangsvue-fats 1.0.0-alpha.3 → 1.0.0-alpha.30

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

@@ -0,0 +1,201 @@
+import { ClassComponent, HintedString } from '../ts-helpers.d';
+import { ButtonProps } from '../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/buttonsearch/ButtonSearch.vue.d.ts

@@ -1,23 +1,23 @@
 import { DefineComponent } from 'vue';
 
 export interface ButtonSearchLocaleConfig {
-  searchPlaceholder?: string;
+    searchPlaceholder?: string;
 }
 
 export type ButtonSearchEmits = {
-  /**
-   * Emits when the Enter key is pressed.
-   */
-  search: [payload?: string];
-  /**
-   * Emits when the search box is hidden by clicking the left arrow button.
-   * The 'search' query parameter should be reset to undefined when this event is emitted.
-   */
-  collapsed: [];
+    /**
+     * Emits when the Enter key is pressed.
+     */
+    search: [payload?: string];
+    /**
+     * Emits when the search box is hidden by clicking the left arrow button.
+     * The 'search' query parameter should be reset to undefined when this event is emitted.
+     */
+    collapsed: [];
 };
 
 export interface ButtonSearchProps {
-  tableName?: string;
+    tableName?: string;
 }
 
 /**
@@ -31,8 +31,8 @@ export interface ButtonSearchProps {
  * @group form
  */
 declare const ButtonSearch: DefineComponent<
-  ButtonSearchProps,
-  ButtonSearchEmits
+    ButtonSearchProps,
+    ButtonSearchEmits
 >;
 
 export default ButtonSearch;

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

@@ -1,176 +1,178 @@
 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 =
-  | number
-  | TreeNode
-  | string
-  | (number | TreeNode | string)[];
+    | number
+    | TreeNode
+    | string
+    | (number | TreeNode | string)[];
 
 export interface ButtonSelectTreeProps {
-  /**
-   * Below are props that commonly used
-   * @example - [type, value as modelvalue, fieldDataKey, selectionMode, useValidator, mandatory, fieldName, validatorMessage, label, dialogHeader]
-   */
+    /**
+     * Below are props that commonly used
+     * @example - [type, value as modelvalue, fieldDataKey, selectionMode, useValidator, mandatory, fieldName, validatorMessage, label, dialogHeader]
+     */
 
-  /**
-   * The tree type.
-   */
-  type: 'group' | 'category';
-  /**
-   * The model value.
-   * If you deal with form validation of edit action,
-   * you need to bind the initital value :value="yourValue"
-   * Please take a note that you should pass value that match your `props.fieldDataKey`
-   */
-  value?: NodeModelValue;
-  /**
-   * If selection mode is single mode and you're on edit form, this props should be used
-   */
-  selectedNode?: TreeNode;
-  /**
-   * To determine which field key that will be used as value
-   */
-  fieldDataKey?: string;
-  /**
-   * The selection Mode.
-   *
-   * @default 'checkbox';
-   */
-  selectionMode?: 'single' | 'checkbox';
-  /**
-   * Wether the input should be validated with vee-validator or not.
-   * If you use this component within form input, you need to set this props as true.
-   */
-  useValidator?: boolean;
-  /**
-   * 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 'selectTree'
-   */
-  fieldName?: string;
-  /**
-   * Make this field as mandatory on form input.
-   */
-  mandatory?: boolean;
-  /**
-   * Set custom validator message.
-   * Will be show if invalid="true"
-   */
-  validatorMessage?: string;
-  /**
-   * Set custom header Dialog Select Tree
-   */
-  dialogHeader?: string;
-  /**
-   * The button label.
-   *
-   * @default 'Select ${props.type}'
-   */
-  label?: string;
+    /**
+     * The tree type.
+     */
+    type: 'group' | 'category';
+    /**
+     * The model value.
+     * If you deal with form validation of edit action,
+     * you need to bind the initital value :value="yourValue"
+     * Please take a note that you should pass value that match your `props.fieldDataKey`
+     */
+    value?: NodeModelValue;
+    /**
+     * If selection mode is single mode and you're on edit form, this props should be used
+     */
+    selectedNode?: TreeNode;
+    /**
+     * To determine which field key that will be used as value
+     */
+    fieldDataKey?: string;
+    /**
+     * The selection Mode.
+     *
+     * @default 'checkbox';
+     */
+    selectionMode?: 'single' | 'checkbox';
+    /**
+     * Wether the input should be validated with vee-validator or not.
+     * If you use this component within form input, you need to set this props as true.
+     */
+    useValidator?: boolean;
+    /**
+     * 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 'selectTree'
+     */
+    fieldName?: string;
+    /**
+     * Make this field as mandatory on form input.
+     */
+    mandatory?: boolean;
+    /**
+     * Set custom validator message.
+     * Will be show if invalid="true"
+     */
+    validatorMessage?: string;
+    /**
+     * Set custom header Dialog Select Tree
+     */
+    dialogHeader?: string;
+    /**
+     * The button label.
+     *
+     * @default 'Select ${props.type}'
+     */
+    label?: string;
 
-  fetchTree?: (
-    type: 'group' | 'category',
-  ) => Promise<ShortFetchResponse<TreeNode> | undefined>;
-  /**
-   * Specify wether the all tree node should be auto checked once it rendered.
-   * @default false
-   */
-  autoSelectAll?: 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[];
-  /**
-   * Disable the Select button
-   */
-  disabled?: boolean;
-  exactDisableKey?: number;
-  /**
-   * Disable node 'All' selection
-   */
-  disableNodeAll?: boolean;
-  /**
-   * Old behavior is preventing select if there is no node selected.
-   *
-   * This props comes to make options, wether the selection can be empty or not.
-   * @default true
-   */
-  allowEmptySelection?: boolean;
-  /**
-   * The field label
-   */
-  fieldLabel?: string;
-  /**
-   * The information to be shown to user by hovering info icon.
-   */
-  fieldInfo?: string;
-  /**
-   * Invalid state.
-   */
-  invalid?: boolean;
-  /**
-   * Defines width of button for 'Select Group' / 'Select Category' in px.
-   * Deprecated, use props `width` instead
-   *
-   * @deprecated
-   */
-  btnWidth?: number;
-  /**
-   * Defines width of button for 'Select Group' / 'Select Category' in px.
-   */
-  width?: number;
-  /**
-   * Defines the tree is readonly and disabled.
-   */
-  readonly?: boolean;
-  /**
-   * Defines the group tree to showing disposable groups.
-   */
-  showDisposableGroups?: boolean;
-  /**
-   * Defines the tree to be flattened and shows disposable only
-   */
-  flattenDisposableNode?: boolean;
-  /**
-   * Defines the group tree to disable excluded keys
-   */
-  excludedKeys?: number[];
-  /**
-   * Define wether single selection can be edited or readonly
-   * @default true
-   */
-  singleEditable?: boolean;
-  /**
-   * Define wether single selection can be reset with close button
-   * @default false
-   */
-  singleResetable?: boolean;
-  /**
-   * Show all selected node on button render
-   *
-   * @default false
-   */
-  fetchTreeOnButtonRender?: boolean;
+    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
+     */
+    autoSelectAll?: 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[];
+    /**
+     * Disable the Select button
+     */
+    disabled?: boolean;
+    exactDisableKey?: number;
+    /**
+     * Disable node 'All' selection
+     */
+    disableNodeAll?: boolean;
+    /**
+     * Old behavior is preventing select if there is no node selected.
+     *
+     * This props comes to make options, wether the selection can be empty or not.
+     * @default true
+     */
+    allowEmptySelection?: boolean;
+    /**
+     * The field label
+     */
+    fieldLabel?: string;
+    /**
+     * The information to be shown to user by hovering info icon.
+     */
+    fieldInfo?: string;
+    /**
+     * Invalid state.
+     */
+    invalid?: boolean;
+    /**
+     * Defines width of button for 'Select Group' / 'Select Category' in px.
+     * Deprecated, use props `width` instead
+     *
+     * @deprecated
+     */
+    btnWidth?: number;
+    /**
+     * Defines width of button for 'Select Group' / 'Select Category' in px.
+     */
+    width?: number;
+    /**
+     * Defines the tree is readonly and disabled.
+     */
+    readonly?: boolean;
+    /**
+     * Defines the group tree to showing disposable groups.
+     */
+    showDisposableGroups?: boolean;
+    /**
+     * Defines the tree to be flattened and shows disposable only
+     */
+    flattenDisposableNode?: boolean;
+    /**
+     * Defines the group tree to disable excluded keys
+     */
+    excludedKeys?: number[];
+    /**
+     * Define wether single selection can be edited or readonly
+     * @default true
+     */
+    singleEditable?: boolean;
+    /**
+     * Define wether single selection can be reset with close button
+     * @default false
+     */
+    singleResetable?: boolean;
+    /**
+     * Show all selected node on button render
+     *
+     * @default false
+     */
+    fetchTreeOnButtonRender?: boolean;
 }
 
 export type ButtonSelectTreeEmits = {
-  'update:value': [keys: NodeModelValue, isAllSelected?: boolean];
-  'dialogShown': [];
-  'dialogHidden': [];
-  'reset': [];
+    'update:value': [keys: NodeModelValue, isAllSelected?: boolean];
+    'dialogShown': [];
+    'dialogHidden': [];
+    'reset': [];
 };
 
 export interface ButtonSelectTreeSlots {
-  treenode: Slot<{ node: TreeNode }>;
+    treenode: Slot<{ node: TreeNode }>;
 }
 
 /**
@@ -184,15 +186,15 @@ export interface ButtonSelectTreeSlots {
  * @group Component
  */
 declare class ButtonSelectTree extends ClassComponent<
-  ButtonSelectTreeProps,
-  ButtonSelectTreeSlots,
-  ButtonSelectTreeEmits
+    ButtonSelectTreeProps,
+    ButtonSelectTreeSlots,
+    ButtonSelectTreeEmits
 > {}
 
 declare module '@vue/runtime-core' {
-  interface GlobalComponents {
-    ButtonSelectTree: GlobalComponentConstructor<ButtonSelectTree>;
-  }
+    interface GlobalComponents {
+        ButtonSelectTree: GlobalComponentConstructor<ButtonSelectTree>;
+    }
 }
 
 export default ButtonSelectTree;

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/buttontoggle/ButtonToggle.vue.d.ts

@@ -1,7 +1,7 @@
 import { DefineComponent } from 'vue';
 import {
-  ToggleSwitchEmits,
-  ToggleSwitchProps,
+    ToggleSwitchEmits,
+    ToggleSwitchProps,
 } from '../toggleswitch/ToggleSwitch.vue.d';
 
 export type ButtonToggleProps = ToggleSwitchProps & {};
@@ -11,8 +11,8 @@ export type ButtonToggleEmits = ToggleSwitchEmits & {};
  * @deprecated Use ToggleSwitch component instead.
  */
 declare const ButtonToggle: DefineComponent<
-  ButtonToggleProps,
-  ButtonToggleEmits
+    ButtonToggleProps,
+    ButtonToggleEmits
 >;
 
 export default ButtonToggle;

package/components/buttonviewlog/ButtonViewLog.vue.d.ts

@@ -0,0 +1,17 @@
+import { ClassComponent } from '../ts-helpers.d';
+
+export interface ButtonViewLogProps {
+    showLog?: boolean;
+}
+
+export type ButtonViewLogEmits = {
+    'update:showLog': [state: boolean];
+};
+
+declare class ButtonViewLog extends ClassComponent<
+    ButtonViewLogProps,
+    unknown,
+    ButtonViewLogEmits
+> {}
+
+export default ButtonViewLog;