@fewangsit/wangsvue-fats 1.0.0-alpha.0

package/components/buttonradio/ButtonRadio.vue.d.ts

@@ -0,0 +1,258 @@
+import { StyleValue } from 'vue';
+
+import { ComponentHooks } from '../basecomponent';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export declare type ButtonRadioPassThroughOptionType =
+  | ButtonRadioPassThroughAttributes
+  | ((
+      options: ButtonRadioPassThroughMethodOptions,
+    ) => ButtonRadioPassThroughAttributes | string)
+  | string
+  | null
+  | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ButtonRadioPassThroughMethodOptions {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+
+  /**
+   * Defines valid properties.
+   */
+  props: ButtonRadioProps;
+
+  /**
+   * Defines current inline state.
+   */
+  state: ButtonRadioState;
+
+  /**
+   * Defines current options.
+   */
+  context: ButtonRadioContext;
+
+  /**
+   * Defines valid attributes.
+   */
+  attrs: any;
+
+  /**
+   * Defines parent options.
+   */
+  parent: any;
+
+  /**
+   * Defines passthrough(pt) options in global config.
+   */
+  global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ButtonRadioProps.pt}
+ */
+export interface ButtonRadioPassThroughOptions {
+  /**
+   * Used to pass attributes to the root's DOM element.
+   */
+  root?: ButtonRadioPassThroughOptionType;
+
+  /**
+   * Used to pass attributes to the input's DOM element.
+   */
+  input?: ButtonRadioPassThroughOptionType;
+
+  /**
+   * Used to pass attributes to the box's DOM element.
+   */
+  box?: ButtonRadioPassThroughOptionType;
+
+  /**
+   * Used to pass attributes to the icon's DOM element.
+   */
+  icon?: ButtonRadioPassThroughOptionType;
+
+  /**
+   * Used to manage all lifecycle hooks.
+   * @see {@link BaseComponent.ComponentHooks}
+   */
+  hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ButtonRadioPassThroughAttributes {
+  [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ButtonRadio component.
+ */
+export interface ButtonRadioState {
+  [key: string]: any;
+}
+
+/**
+ * Defines valid properties in ButtonRadio component.
+ */
+export interface ButtonRadioProps {
+  /**
+   * The label for the input element
+   */
+  label?: string;
+
+  /**
+   * Value of the input.
+   */
+  value?: any;
+
+  /**
+   * Value binding of the input.
+   */
+  modelValue?: any;
+
+  /**
+   * Name of the input element.
+   */
+  name?: string | undefined;
+
+  /**
+   * Allows to select a boolean value.
+   * @default false
+   */
+  binary?: boolean;
+
+  /**
+   * When present, it specifies that the component should have invalid state style.
+   * @defaultValue false
+   */
+  invalid?: boolean | undefined;
+
+  /**
+   * When present, it specifies that the component should be disabled.
+   * @defaultValue false
+   */
+  disabled?: boolean | undefined;
+
+  /**
+   * Specifies the input variant of the component.
+   * @defaultValue outlined
+   */
+  variant?: 'outlined' | 'filled' | undefined;
+
+  /**
+   * When present, it specifies that an input field is read-only.
+   * @default false
+   */
+  readonly?: boolean | undefined;
+
+  /**
+   * Index of the element in tabbing order.
+   */
+  tabindex?: number | undefined;
+
+  /**
+   * Identifier of the underlying input element.
+   */
+  inputId?: string | undefined;
+
+  /**
+   * Inline style of the input field.
+   */
+  inputStyle?: StyleValue | undefined;
+
+  /**
+   * Style class of the input field.
+   */
+  inputClass?: string | object | undefined;
+
+  /**
+   * Tooltip info about the checkbox.
+   */
+  tooltip?: string;
+
+  /**
+   * Tooltip position.
+   *
+   * @default 'top'
+   */
+  tooltipPos?: 'top' | 'right' | 'left' | 'bottom';
+}
+
+/**
+ * Defines current options in ButtonRadio component.
+ */
+export interface ButtonRadioContext {
+  /**
+   * Current checked state of the item as a boolean.
+   * @defaultValue false
+   */
+  checked: boolean;
+
+  /**
+   * Current disabled state of the item as a boolean.
+   * @defaultValue false
+   */
+  disabled: boolean;
+}
+
+/**
+ * Defines valid emits in ButtonRadio component.
+ */
+export type ButtonRadioEmits = {
+  /**
+   * Emitted when the value changes.
+   * @param {*} value - New value.
+   */
+  'update:modelValue': [value: any];
+
+  /**
+   * Callback to invoke on radio button value change.
+   * @param {Event} event - Browser event.
+   */
+  'change': [event: Event];
+
+  /**
+   * Callback to invoke when the component receives focus.
+   * @param {Event} event - Browser event.
+   */
+  'focus': [event: Event];
+
+  /**
+   * Callback to invoke when the component loses focus.
+   * @param {Event} event - Browser event.
+   */
+  'blur': [event: Event];
+};
+
+/**
+ * **WangsVue - ButtonRadio**
+ *
+ * _ButtonRadio is an extension to standard radio button element with theming._
+ *
+ * [Live Demo](https://fewangsit.github.io/wangsvue/buttonradio)
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ *
+ */
+declare class ButtonRadio extends ClassComponent<
+  ButtonRadioProps,
+  unknown,
+  ButtonRadioEmits
+> {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ButtonRadio: GlobalComponentConstructor<ButtonRadio>;
+  }
+}
+
+export default ButtonRadio;

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

@@ -0,0 +1,202 @@
+import { ButtonProps } from '../../components/button/Button.vue.d';
+import { ClassComponent, HintedString } from '../../components/ts-helpers.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/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/buttonsearchbyscan/ButtonSearchByScan.vue.d.ts

@@ -0,0 +1,46 @@
+import { DefineComponent } from 'vue';
+
+import { ButtonScanProps } from '../buttonscan/ButtonScan.vue.d';
+import { WangsIcons } from '../icon/Icon.vue.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 type ButtonSearchByScanExposes = {
+  stopScan: (afterScan?: boolean) => void;
+};
+
+declare const ButtonSearchByScan: DefineComponent<
+  ButtonSearchByScanProps,
+  ButtonSearchByScanEmits
+>;
+
+export default ButtonSearchByScan;