@fewangsit/wangsvue-gsts 1.0.0-alpha.9 → 2.0.0-alpha.10

package/buttonscan/index.d.ts

@@ -0,0 +1,215 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ButtonProps } from '../button';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  HintedString,
+} from '../ts-helpers.d';
+
+import { WangsIcons } from '../icon';
+
+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.
+   *
+   * @default to undefined / normal
+   */
+  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;
+}
+
+/**
+ * **WangsVue - 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, unknown, ButtonScanEmits>
+  implements ButtonScanExposes
+{
+  onBeforeStartScan: () => void;
+  startScan: () => void;
+  stopScan: (afterScan?: boolean) => void;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    ButtonScan: GlobalComponentConstructor<ButtonScan>;
+  }
+}
+
+interface Window {
+  scannerWorker: Worker;
+  toastGroups: string[] | undefined;
+}
+
+export default ButtonScan;

package/{components/buttonsearch/ButtonSearch.vue.d.ts → buttonsearch/index.d.ts}

@@ -1,4 +1,4 @@
-import { DefineComponent } from 'vue';
+import { ClassComponent } from '../ts-helpers.d';
 
 export interface ButtonSearchLocaleConfig {
   searchPlaceholder?: string;
@@ -26,13 +26,14 @@ export interface ButtonSearchProps {
  * _Search button with searchbox for table._
  *
  * --- ---
- * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
  *
  * @group form
  */
-declare const ButtonSearch: DefineComponent<
+declare class ButtonSearch extends ClassComponent<
   ButtonSearchProps,
-  ButtonSearchEmits
->;
+  ButtonSearchEmits,
+  unknown
+> {}
 
 export default ButtonSearch;

package/buttonsearchbyscan/index.d.ts

@@ -0,0 +1,51 @@
+import { ButtonScanProps } from '../buttonscan';
+import { WangsIcons } from '../icon';
+import { ClassComponent } from '../ts-helpers.d';
+
+export type ScanPayload = {
+  type: 'RFID' | 'QR';
+  code: string;
+  device: string; // Serial Number
+};
+
+export type ButtonSearchByScanEmits = {
+  scan: [payload: ScanPayload];
+};
+
+export interface ButtonSearchByScanProps {
+  /**
+   * The button label.
+   *
+   * @default 'Search by Scan'
+   */
+  label?: string;
+  /**
+   * The button icon.
+   */
+  icon?: WangsIcons;
+  /**
+   * The datatable tablename which handles the search by scan.
+   *
+   * @default 'datatable' - default DataTable tablename
+   */
+  tableName?: string;
+  bulk?: boolean;
+  scanValidation?: ButtonScanProps['scanValidation'];
+}
+
+export interface ButtonSearchByScanExposes {
+  stopScan: (afterScan?: boolean) => void;
+}
+
+declare class ButtonSearchByScan
+  extends ClassComponent<
+    ButtonSearchByScanProps,
+    ButtonSearchByScanEmits,
+    unknown
+  >
+  implements ButtonSearchByScanExposes
+{
+  stopScan: (afterScan?: boolean) => void;
+}
+
+export default ButtonSearchByScan;

package/{components/buttonselecttree/ButtonSelectTree.vue.d.ts → buttonselecttree/index.d.ts}

@@ -1,8 +1,10 @@
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { TreeNode } from '../basetree/BaseTree.vue.d';
-import { ShortFetchResponse } from '../datatable/DataTable.vue.d';
+import { ShallowRef, Slot } from 'vue';
 
-export type KeysModelValue = number[] | undefined;
+import { TreeNode } from '../basetree';
+import { QueryParams, ShortFetchListResponse } from '../datatable';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
+
+export type KeysModelValue = string[] | number[] | undefined;
 export type NodeModelValue =
   | number
   | TreeNode
@@ -74,7 +76,9 @@ export interface ButtonSelectTreeProps {
 
   fetchTree?: (
     type: 'group' | 'category',
-  ) => Promise<ShortFetchResponse<TreeNode> | undefined>;
+    params?: QueryParams,
+  ) => Promise<ShortFetchListResponse<TreeNode> | undefined>;
+  params?: QueryParams;
   /**
    * Specify wether the all tree node should be auto checked once it rendered.
    * @default false
@@ -83,22 +87,31 @@ export interface ButtonSelectTreeProps {
   /**
    * A list of node keys that should be disabled along with their children.
    */
-  disableKeys?: number[];
+  disableKeys?: string[] | number[];
   /**
    * A list of node keys that should be disabled, affecting only the specified nodes and not their children.
    */
-  exactDisableKeys?: number[];
+  exactDisableKeys?: string[] | number[];
   /**
    * Disable the Select button
    */
   disabled?: boolean;
-  exactDisableKey?: number;
+  exactDisableKey?: string | number;
   /**
    * Disable node 'All' selection
    */
   disableNodeAll?: boolean;
+
   /**
-   * For checkbox selection, old behavior is preventing select if there is no node selected.
+   * A function to determine when the node should be disabled,
+   * When true, it will disabled selection on current node and all level childrend
+   *
+   * @return true to disabled
+   */
+  disableNodeWhen?: (node: TreeNode) => 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
@@ -142,7 +155,7 @@ export interface ButtonSelectTreeProps {
   /**
    * Defines the group tree to disable excluded keys
    */
-  excludedKeys?: number[];
+  excludedKeys?: string[];
   /**
    * Define wether single selection can be edited or readonly
    * @default true
@@ -168,8 +181,12 @@ export type ButtonSelectTreeEmits = {
   'reset': [];
 };
 
+export interface ButtonSelectTreeSlots {
+  treenode: Slot<{ node: TreeNode }>;
+}
+
 /**
- * **TSVue v2 - ButtonSelectTree**
+ * **WangsVue - ButtonSelectTree**
  *
  * _ButtonSelectTree handles select tree dialog and field validaion._
  *
@@ -180,9 +197,11 @@ export type ButtonSelectTreeEmits = {
  */
 declare class ButtonSelectTree extends ClassComponent<
   ButtonSelectTreeProps,
-  unknown,
-  ButtonSelectTreeProps
-> {}
+  ButtonSelectTreeSlots,
+  ButtonSelectTreeEmits
+> {
+  dialogTreeKey: ShallowRef<number>;
+}
 
 declare module '@vue/runtime-core' {
   interface GlobalComponents {

package/buttonsync/index.d.ts

@@ -0,0 +1,22 @@
+import { ClassComponent } from '../ts-helpers.d';
+
+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/buttontoggle/index.d.ts

@@ -0,0 +1,27 @@
+import { ToggleSwitchEmits, ToggleSwitchProps } from '../toggleswitch';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
+
+export type ButtonToggleProps = ToggleSwitchProps & {};
+export type ButtonToggleEmits = ToggleSwitchEmits & {};
+
+/**
+ * **WangsVue - ButtonToggle**
+ *
+ * _ButtonToggle component._
+ *
+ * @deprecated Use ToggleSwitch component instead.
+ * @group components
+ */
+declare class ButtonToggle extends ClassComponent<
+  ButtonToggleProps,
+  unknown,
+  ButtonToggleEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    ButtonToggle: GlobalComponentConstructor<ButtonToggle>;
+  }
+}
+
+export default ButtonToggle;

package/{components/calendar/Calendar.vue.d.ts → calendar/index.d.ts}

@@ -1,6 +1,7 @@
-import { TransitionProps } from 'vue';
-import { CustomValidation } from '../form/Form.vue.d';
-import { ClassComponent } from '../ts-helpers';
+import { Slot, TransitionProps } from 'vue';
+
+import { CustomValidation } from '../form';
+import { ClassComponent } from '../ts-helpers.d';
 
 export interface CalendarLocaleConfig {
   defaultPlaceholder: string;
@@ -321,6 +322,11 @@ export interface CalendarProps {
    */
   readonly?: boolean;
 
+  /**
+   * The class name of the overlay element.
+   */
+  overlayClass?: string;
+
   /**
    * Identifier of the underlying input element.
    */
@@ -337,14 +343,14 @@ export interface CalendarProps {
    * @default 'single'
    * @deprecated use selectionMode
    */
-  mode?: 'range' | 'single';
+  mode?: 'range' | 'single' | 'multiple';
 
   /**
    * Whether single date or date range model value.
    *
    * @default 'single'
    */
-  selectionMode?: 'range' | 'single';
+  selectionMode?: 'range' | 'single' | 'multiple';
 
   /**
    * Whether to hide the overlay on date selection when showTime is enabled.
@@ -469,6 +475,16 @@ export interface CalendarProps {
    */
   useTimeFormat?: boolean;
 
+  /**
+   * Only allow weekdays to be selected.
+   */
+  onlyWeekdays?: boolean;
+
+  /**
+   * Exclude certain dates from selection.
+   */
+  excludeDates?: Date[];
+
   /**
    * The minimum selectable date.
    */
@@ -495,6 +511,15 @@ export interface CalendarProps {
    * @todo Support number, currently only support 'current'
    */
   maxMonth?: 'current' | number | undefined;
+  /**
+   * When using range selection mode, selecting only the "start date" (without an "end date") will, by default, return a range ending 24 hours later.
+   * Enabling this prop will instead return the exact dates selected, without adding an extra day.
+   *
+   * @example Selecting dates from the 1st to the 5th will return an array of epoch timestamps for each day: [1st, 2nd, 3rd, 4th, 5th].
+   * @default false
+   * @requires selectionMode = 'range'
+   */
+  exactSelection?: boolean;
 }
 
 /**
@@ -542,19 +567,31 @@ export type CalendarEmits = {
   'dateSelect': [date: Date | Date[]];
 };
 
+export interface CalendarSlots {
+  /**
+   * Slot for custom root input element
+   */
+  'default': Slot<{ onClick: (event: Event) => void }>;
+
+  /**
+   * Slot for additional content in overlay
+   */
+  'addon-overlay': Slot;
+}
+
 /**
  * **WangsVue - Calendar**
  *
  * _Handle input date with form validation._
  *
  * --- ---
- * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
  *
  * @group form
  */
 declare class Calendar extends ClassComponent<
   CalendarProps,
-  unknown,
+  CalendarSlots,
   CalendarEmits
 > {}
 

package/{components/card/Card.vue.d.ts → card/index.d.ts}

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  *
  * Card is a flexible container component.
@@ -7,13 +6,14 @@
  *
  */
 import { VNode } from 'vue';
+
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import {
   ClassComponent,
   GlobalComponentConstructor,
   PassThrough,
-} from '../ts-helpers';
+} from '../ts-helpers.d';
 
 export declare type CardPassThroughOptionType =
   | CardPassThroughAttributes
@@ -124,7 +124,7 @@ export interface CardSlots {
  * _Card is a flexible container component._
  *
  * --- ---
- * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
  *
  * @group Component
  */

package/carousel/index.d.ts

@@ -0,0 +1,28 @@
+import { ImageGallery } from '../image';
+import { ClassComponent } from '../ts-helpers.d';
+
+export interface CarouselProps {
+  /**
+   * An array of image object to be displayed.
+   */
+  value: ImageGallery[] | undefined;
+}
+
+/**
+ * **WangsVue - Carousel**
+ *
+ * _Carousel is a component for displaying a collection of images or content in a sliding or rotating fashion.
+ * You can navigate through the items using the provided next and previous functions._
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group components
+ */
+declare class Carousel extends ClassComponent<
+  CarouselProps,
+  unknown,
+  unknown
+> {}
+
+export default Carousel;

package/{components/changelog/Changelog.vue.d.ts → changelog/index.d.ts}

@@ -1,8 +1,12 @@
-import { ClassComponent, GlobalComponentConstructor, HintedString } from '../.././components/ts-helpers';
-import { TableColumn } from '../.././components/datatable/DataTable.vue.d';
-import { FilterField } from '../.././components/filtercontainer/FilterContainer.vue.d';
 import { ChangelogFilterQuery } from '@tagsamurai/acts-api-services/src/dto/changelog.dto';
 
+import { TableColumn } from '../datatable';
+import { FilterField } from '../filtercontainer';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  HintedString,
+} from '../ts-helpers.d';
 
 export type ChangelogTemplateColumn = { index: number; column: TableColumn };
 export type ChangelogTemplateFilter = { index: number; filter: FilterField };
@@ -139,7 +143,7 @@ export type ChangelogEmits = {
  * You need to install vee-validate while using this component._
  *
  * --- ---
- * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
  *
  * @group components
  */

package/{components/changelogpage/ChangelogPage.vue.d.ts → changelogpage/index.d.ts}

@@ -1,7 +1,12 @@
-import { ClassComponent, GlobalComponentConstructor } from '../.././components/ts-helpers';
-import { ChangelogDefaultField, ChangelogTemplateColumn, ChangelogTemplateFilter } from '../changelog/Changelog.vue.d';
-import { ChangelogFilterQuery } from '@tagsamurai/acts-api-services/src/dto/changelog.dto';
+import { ChangelogFilterQuery } from '@tagsamurai/fats-api-services/src/dto/changelog.dto';
 
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
+
+import {
+  ChangelogDefaultField,
+  ChangelogTemplateColumn,
+  ChangelogTemplateFilter,
+} from '../changelog';
 
 /**
  * Props for Changelog component
@@ -105,7 +110,7 @@ export type ChangelogPageEmits = {
  * You need to install vee-validate while using this component._
  *
  * --- ---
- * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
  *
  * @group components
  */

package/{components/checkbox/Checkbox.vue.d.ts → checkbox/index.d.ts}

@@ -6,13 +6,14 @@
  *
  */
 import { VNode } from 'vue';
+
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import {
   ClassComponent,
   GlobalComponentConstructor,
   PassThrough,
-} from '../ts-helpers';
+} from '../ts-helpers.d';
 
 export declare type CheckboxPassThroughOptionType =
   | CheckboxPassThroughAttributes
@@ -309,7 +310,7 @@ export type CheckboxEmits = {
  * Checkbox is an extension to checkbox element with label and info tooltip.
  *
  * --- ---
- * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
  *
  * @group Component
  *