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

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

@@ -0,0 +1,38 @@
+import { DefineComponent } from 'vue';
+
+export interface ButtonSearchLocaleConfig {
+    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: [];
+};
+
+export interface ButtonSearchProps {
+    tableName?: string;
+}
+
+/**
+ * **WangsVue - ButtonSearch**
+ *
+ * _Search button with searchbox for table._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group form
+ */
+declare const ButtonSearch: DefineComponent<
+    ButtonSearchProps,
+    ButtonSearchEmits
+>;
+
+export default ButtonSearch;

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

@@ -0,0 +1,200 @@
+import { Slot } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { TreeNode } from '../basetree/BaseTree.vue.d';
+import { QueryParams, ShortFetchResponse } from '../datatable/DataTable.vue.d';
+
+export type KeysModelValue = number[] | undefined;
+export type NodeModelValue =
+    | 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]
+     */
+
+    /**
+     * 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',
+        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': [];
+};
+
+export interface ButtonSelectTreeSlots {
+    treenode: Slot<{ node: TreeNode }>;
+}
+
+/**
+ * **TSVue v2 - ButtonSelectTree**
+ *
+ * _ButtonSelectTree handles select tree dialog and field validaion._
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group Component
+ */
+declare class ButtonSelectTree extends ClassComponent<
+    ButtonSelectTreeProps,
+    ButtonSelectTreeSlots,
+    ButtonSelectTreeEmits
+> {}
+
+declare module '@vue/runtime-core' {
+    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

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

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

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

package/components/calendar/BaseCalendar.vue.d.ts

@@ -0,0 +1,127 @@
+import { CalendarProps } from './Calendar.vue.d';
+declare function __VLS_template(): {
+    incrementicon?(_: {}): any;
+    incrementicon?(_: {}): any;
+    decrementicon?(_: {}): any;
+    decrementicon?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<
+    __VLS_WithDefaults<
+        __VLS_TypePropsToOption<CalendarProps>,
+        {
+            selectionMode: string;
+            view: string;
+            mode: string;
+            showYear: boolean;
+            showOptionalText: any;
+            valueFormat: string;
+            hideOnRangeSelection: boolean;
+            hourFormat: string;
+            dateFormat: string;
+            stepHour: number;
+            stepMinute: number;
+            timeSeparator: string;
+            exactSelection: boolean;
+        }
+    >,
+    {},
+    unknown,
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {
+        'update:modelValue': (date: Date | Date[]) => void;
+        'update:epochTimeMillis': (millis?: number | number[]) => void;
+        'monthChange': (
+            event: import('./Calendar.vue.d').CalendarMonthChangeEvent,
+        ) => void;
+        'yearChange': (
+            event: import('./Calendar.vue.d').CalendarYearChangeEvent,
+        ) => void;
+        'dateSelect': (date: Date | Date[]) => void;
+    },
+    string,
+    import('vue').PublicProps,
+    Readonly<
+        import('vue').ExtractPropTypes<
+            __VLS_WithDefaults<
+                __VLS_TypePropsToOption<CalendarProps>,
+                {
+                    selectionMode: string;
+                    view: string;
+                    mode: string;
+                    showYear: boolean;
+                    showOptionalText: any;
+                    valueFormat: string;
+                    hideOnRangeSelection: boolean;
+                    hourFormat: string;
+                    dateFormat: string;
+                    stepHour: number;
+                    stepMinute: number;
+                    timeSeparator: string;
+                    exactSelection: boolean;
+                }
+            >
+        >
+    > & {
+        'onUpdate:modelValue'?: (date: Date | Date[]) => any;
+        'onUpdate:epochTimeMillis'?: (millis?: number | number[]) => any;
+        'onMonthChange'?: (
+            event: import('./Calendar.vue.d').CalendarMonthChangeEvent,
+        ) => any;
+        'onYearChange'?: (
+            event: import('./Calendar.vue.d').CalendarYearChangeEvent,
+        ) => any;
+        'onDateSelect'?: (date: Date | Date[]) => any;
+    },
+    {
+        dateFormat: string | undefined;
+        showOptionalText: boolean;
+        mode: 'range' | 'single';
+        view: 'date' | 'month' | 'year' | undefined;
+        selectionMode: 'range' | 'single';
+        valueFormat: 'date' | 'millis';
+        hideOnRangeSelection: boolean | undefined;
+        showYear: boolean;
+        hourFormat: '12' | '24' | undefined;
+        timeSeparator: string | undefined;
+        stepHour: number | undefined;
+        stepMinute: number | undefined;
+        exactSelection: boolean;
+    },
+    {}
+>;
+declare const _default: __VLS_WithTemplateSlots<
+    typeof __VLS_component,
+    ReturnType<typeof __VLS_template>
+>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? __VLS_Prettify<
+              P[K] & {
+                  default: D[K];
+              }
+          >
+        : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+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;
+          };
+};