@fewangsit/wangsvue-fats 1.0.0-alpha.2 → 1.0.0-alpha.21

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-extension';
 export * from './components';
 export { default as WangsVue } from './config';

package/components/assetinfo/AssetInfo.vue.d.ts

@@ -0,0 +1,32 @@
+import { ClassComponent, GlobalComponentConstructor } from '../.././components/ts-helpers.d';
+
+
+type Field = 'brand' | 'model' | 'group' | 'status';
+
+export interface AssetInfoProps {
+  id: string;
+  /**
+   * Specifys the field/information to be fisplayed
+   */
+  fields?: Field[];
+  /**
+   * The Transaction Detail contains the asset infomation.
+   *
+   * It will prevent dynamic fetch of asset information.
+   */
+  transactionDetail?: Record<string, unknown>;
+}
+
+declare class AssetInfo extends ClassComponent<
+  AssetInfoProps,
+  unknown,
+  unknown
+> {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    AssetInfo: GlobalComponentConstructor<AssetInfo>;
+  }
+}
+
+export default AssetInfo;

package/components/button/Button.vue.d.ts

@@ -1,8 +1,11 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { WangsIcons } from '../icon/Icon.vue.d';
 import { TooltipOptions } from 'primevue/tooltip';
-import { GlobalComponentConstructor } from '../ts-helpers.d';
-import { ClassComponent, HintedString } from '../ts-helpers';
+import {
+  GlobalComponentConstructor,
+  ClassComponent,
+  HintedString,
+} from '../ts-helpers';
 
 /**
  * Defines valid properties in Button component.

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

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

@@ -0,0 +1,10 @@
+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> {}

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

@@ -0,0 +1,17 @@
+import { DefineComponent } from 'vue';
+
+
+export interface ButtonViewLogProps {
+  showLog?: boolean;
+}
+
+export type ButtonViewLogEmits = {
+  'update:showLog': [state: boolean];
+};
+
+declare const ButtonViewLog: DefineComponent<
+  ButtonViewLogProps,
+  ButtonViewLogEmits
+>;
+
+export default ButtonViewLog;

package/components/filtercontainer/FilterContainer.vue.d.ts

@@ -88,6 +88,7 @@ export interface ButtonSelectTreeFilterField
    * @default to Select Group|Category
    */
   buttonLabel?: string;
+  params?: QueryParams; // Override QueryParams for the fetchTree
 }
 
 export interface CalendarFilterField extends CalendarProps {

package/components/hardwaresync/store/device.store.d.ts

@@ -0,0 +1,36 @@
+import { Ref } from 'vue';
+import { Device, DeviceList } from '../../buttonscan/ButtonScan.vue.d';
+export interface ScanDevice {
+    RFID: Device | undefined;
+    QR: Device | undefined;
+}
+export interface DeviceStore {
+    /**
+     * The device list.
+     */
+    devices: Ref<DeviceList>;
+    /**
+     * Save new device list.
+     */
+    saveDevices: (devices: DeviceList) => void;
+    /**
+     * The selected device.
+     */
+    device: Ref<ScanDevice>;
+    /**
+     * Set new selected Device.
+     */
+    setDevice: (device: ScanDevice) => void;
+    /**
+     * Get device options from sessionStorage.
+     */
+    loadDevices: () => void;
+}
+declare const useDeviceStore: () => DeviceStore;
+export default useDeviceStore;
+declare global {
+    interface Window {
+        device: ScanDevice;
+        devices: DeviceList;
+    }
+}

package/components/imagecompressor/ImageCompressor.vue.d.ts

@@ -141,6 +141,12 @@ export interface ImageCompressorProps {
    * @default true
    */
   showInfo?: boolean;
+  /**
+   * Change the requirements of the photo
+   *
+   * @default undefined - will use maxSizeRequirement, imageTypeRequirement from LocaleConfig
+   */
+  customRequirements?: string[];
   /**
    * Show dialog confirmation before delete the image.
    */

package/components/imagecompressor/ImageInputInfo.vue.d.ts

@@ -2,11 +2,13 @@ declare function __VLS_template(): {
     default?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToOption<{
+    customRequirements?: string[];
     showInfo: boolean;
     showAddButton?: boolean;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     addPhoto: () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<{
+    customRequirements?: string[];
     showInfo: boolean;
     showAddButton?: boolean;
 }>>> & {

package/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from '.././components';
 export { default as Animation } from './animation/Animation.vue';
 export { default as ApproverInfo } from './approverinfo/ApproverInfo.vue';
+export { default as AssetInfo } from './assetinfo/AssetInfo.vue';
 export { default as Badge } from './badge/Badge.vue';
 export { default as BadgeGroup } from './badgegroup/BadgeGroup.vue';
 export { default as BaseTree } from '.././components/basetree/BaseTree.vue';
@@ -12,10 +13,13 @@ export { default as ButtonDownload } from './buttondownload/ButtonDownload.vue';
 export { default as ButtonFilter } from './buttonfilter/ButtonFilter.vue';
 export { default as ButtonImportExcel } from './buttonImportExcel/ButtonImportExcel.vue';
 export { default as ButtonRadio } from './buttonradio/ButtonRadio.vue';
+export { default as ButtonScan } from '.././components/buttonscan/ButtonScan.vue';
 export { default as ButtonSearch } from './buttonsearch/ButtonSearch.vue';
 export { default as ButtonSelectTree } from '.././components/buttonselecttree/ButtonSelectTree.vue';
 export { default as ButtonSplit } from './buttonsplit/ButtonSplit.vue';
+export { default as ButtonSync } from '.././components/buttonsync/ButtonSync.vue';
 export { default as ButtonToggle } from './buttontoggle/ButtonToggle.vue';
+export { default as ButtonViewLog } from './buttonviewlog/ButtonViewLog.vue';
 export { default as Calendar } from '.././components/calendar/Calendar.vue';
 export { default as Card } from './card/Card.vue';
 export { default as Checkbox } from './checkbox/Checkbox.vue';
@@ -41,6 +45,7 @@ export { default as InputNumber } from './inputnumber/InputNumber.vue';
 export { default as InputPassword } from './inputpassword/InputPassword.vue';
 export { default as InputPhoneNumber } from './inputphonenumber/InputPhoneNumber.vue';
 export { default as InputRangeNumber } from './inputrangenumber/InputRangeNumber.vue';
+export { default as InputSearch } from './inputsearch/InputSearch.vue';
 export { default as InputText } from './inputtext/InputText.vue';
 export { default as InputURL } from './inputurl/InputURL.vue';
 export { default as InvisibleField } from './invisiblefield/InvisibleField.vue';
@@ -61,3 +66,4 @@ export { default as TooltipSpan } from './tooltipspan/TooltipSpan.vue';
 export { default as Tree } from '.././components/tree/Tree.vue';
 export { default as UserGroup } from './usergroup/UserGroup.vue';
 export { default as UserName } from './username/UserName.vue';
+export { default as UserWithIcon } from './userwithicon/UserWithIcon.vue';

package/components/inputsearch/InputSearch.vue.d.ts

@@ -0,0 +1,32 @@
+import { ClassComponent, GlobalComponentConstructor } from '../.././components/ts-helpers';
+
+
+export type InputSearchEmits = {
+  /**
+   * Emits when the Enter key is pressed.
+   */
+  search: [payload?: string];
+};
+
+/**
+ * **WangsVue - InputSearch**
+ *
+ * _InputSearch is an search input for fixed asset navbar_
+ *
+ * [Live Demo](https://fewangsit.github.io/wangsvue/inputsearch)
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class InputSearch extends ClassComponent<
+  unknown,
+  unknown,
+  InputSearchEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    InputSearch: GlobalComponentConstructor<InputSearch>;
+  }
+}

package/components/languagedropdown/LanguageDropdown.vue.d.ts

@@ -2,13 +2,10 @@ import { DropdownEmits, DropdownProps } from '../dropdown/Dropdown.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface LanguageOption {
-  /**
-   * The name of the language, written in English for universal readability.
-   */
   /**
    * ISO 639-1 language code (e.g., "en" for English, "fr" for French).
    */
-  language?: string;
+  isoCode?: string;
 
   /**
    * The name of the language in English (e.g., "English", "Français").

package/components/tagtype/TagType.vue.d.ts

@@ -0,0 +1,21 @@
+import { ClassComponent } from 'primevue/ts-helpers';
+
+export type AssetTagType =
+  | 'QR'
+  | 'RFID'
+  | 'NFC'
+  | 'RFID & NFC'
+  | 'RFID & QR'
+  | 'NFC & QR'
+  | 'RFID & NFC & QR'
+  | 'Non TAG';
+
+export interface TagTypeProps {
+  type: AssetTagType;
+}
+
+export default class TagType extends ClassComponent<
+  TagTypeProps,
+  unknown,
+  unknown
+> {}

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

@@ -1,4 +1,5 @@
 import { JSONContent } from '../editor/Editor.vue.d';
+import { BadgeProps } from '../badge/Badge.vue.d';
 import { ClassComponent } from '../ts-helpers';
 
 export interface AttachmentFile {
@@ -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/timeline/TimelineContentByType.vue.d.ts

@@ -1,8 +1,8 @@
-import { AttachmentFile, AttachmentLink, DetailBullet, DetailJSONContent, DetailText, DetailUserText, LinkTaskIframeEmbed, LinkTaskURL } from './Timeline.vue.d';
+import { AttachmentFile, AttachmentLink, DetailBullet, DetailJSONContent, DetailText, DetailUserText, LinkTaskIframeEmbed, LinkTaskURL, DetailBadge } from './Timeline.vue.d';
 declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<{
-    detail: AttachmentFile | LinkTaskIframeEmbed | LinkTaskURL | AttachmentLink | DetailText | DetailUserText | DetailBullet | DetailJSONContent;
+    detail: AttachmentFile | LinkTaskIframeEmbed | LinkTaskURL | AttachmentLink | DetailText | DetailUserText | DetailBullet | DetailJSONContent | DetailBadge;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<{
-    detail: AttachmentFile | LinkTaskIframeEmbed | LinkTaskURL | AttachmentLink | DetailText | DetailUserText | DetailBullet | DetailJSONContent;
+    detail: AttachmentFile | LinkTaskIframeEmbed | LinkTaskURL | AttachmentLink | DetailText | DetailUserText | DetailBullet | DetailJSONContent | DetailBadge;
 }>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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/event-bus/index.d.ts

@@ -48,7 +48,9 @@ export type Events<CustomEvents = Record<string, any>> = CustomEvents & {
     'toast:add': ToastParams;
     'tree:update-tree-nodes': unknown;
     'tree:tree-updated': unknown;
-    'tree:selection-changed': unknown;
+    'tree:selection-changed': {
+        keys: string;
+    };
     'overlay:show': {
         overlayId: number;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewangsit/wangsvue-fats",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.21",
   "author": "fewangsit",
   "description": "Admin Console Tagsamurai VueJS Component Library",
   "type": "module",

package/plugins/i18n-extension.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install: (app: import('vue').App) => void;
+};
+export default _default;

package/plugins/i18n.d.ts

@@ -0,0 +1,80 @@
+import { App, Ref } from 'vue';
+import { AxiosResponse } from 'axios';
+import { LanguageOption } from '../components/languagedropdown/LanguageDropdown.vue.d';
+export type Locale = string;
+export interface I18n {
+    /**
+     * Locale message translation
+     *
+     * @param key - The translation key
+     * @param params - A values of named interpolation
+     * @param args - Positional interpolation values
+     *
+     * @returns translation message
+     * @example `t('Hello {user}!', { user: 'John Doe' })` - returns: 'Hello John Doe!'
+     * @example `t('Hello %s! I am %s.', "John Doe", "Peter Smith")` - returns: 'Hello John Doe! I am Peter Smith.'
+     */
+    t: {
+        (key: string, params: Record<string, any>): string;
+        (key: string, ...args: (string | number | boolean)[]): string;
+    };
+    /**
+     * Change the locale dynamically
+     *
+     * @param newLocale - The locale to switch to
+     */
+    setLocale: (newLocale: Locale) => Promise<void>;
+    /**
+     * Get the current locale
+     *
+     * @returns Current locale
+     */
+    locale: Ref<Locale>;
+    /**
+     * Service methods handle fetch requests
+     */
+    service?: I18nService;
+}
+type MessageMap = Record<string, string>;
+export interface I18nService {
+    /**
+     * Fetch all translation messages for a specific locale.
+     * @param locale The locale code (e.g., 'en', 'id').
+     * @returns A promise resolving to a key-value record of messages.
+     */
+    getMessages(locale: string): Promise<AxiosResponse<{
+        data: MessageMap;
+    }>>;
+    /**
+     * Fetch all available lang options for LanguageDropdown and LanguageSwitcher
+     *
+     * @returns Promise Array of options
+     */
+    getLanguageOptions(): Promise<LanguageOption[]>;
+    /**
+     * Fetch single lang option meta data
+     *
+     * @param locale The locale code (e.g., 'en', 'id').
+     * @returns Promise LanguageMeta
+     */
+    getLanguageOptionMeta(locale: string): Promise<LanguageOption>;
+    /**
+     * Translate a specific text to the target locale.
+     * @param key Unique translation key.
+     * @param locale Target locale code.
+     * @returns A promise resolving to the translated string.
+     */
+    translateText(key: string, locale: string): Promise<string>;
+}
+export declare const useI18n: () => I18n;
+declare const i18n: {
+    install: (app: App) => void;
+};
+export declare const createI18nWithExtension: (service: I18nService) => typeof i18n;
+export default i18n;
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        $i18n: I18n;
+        $t: I18n['t'];
+    }
+}