@fewangsit/wangsvue-fats 1.0.0-alpha.0

package/components/dialogreporttag/DialogReportTag.vue.d.ts

@@ -0,0 +1,31 @@
+import { ClassComponent } from '../../components/ts-helpers.d';
+
+export interface DialogReportTagProps {
+  id: string;
+  tagReported?: ReportTagBody;
+  visible?: boolean;
+  successMessage?: string;
+  submitLabel?: string;
+  submitWithoutApi?: boolean;
+  submitFunction?: (
+    body: ReportTagBody,
+  ) => Promise<{ status?: number; message?: string } | undefined>;
+}
+
+export type DialogReportTagEmits = {
+  'update:visible': [value: boolean];
+  'reported': [payload?: ReportTagBody];
+};
+
+export type ReportTagBody = {
+  qr: boolean;
+  rfid: boolean;
+};
+
+declare class DialogReportTag extends ClassComponent<
+  DialogReportTagProps,
+  unknown,
+  DialogReportTagEmits
+> {}
+
+export default DialogReportTag;

package/components/dialogselecttree/DialogSelectTree.vue.d.ts

@@ -0,0 +1,137 @@
+import { TreeSelectionKeys } from 'primevue/tree';
+import { Slot } from 'vue';
+
+import { TreeNode } from '../basetree/BaseTree.vue.d';
+import { QueryParams, ShortFetchResponse } from '../datatable/DataTable.vue.d';
+import TreeInstance, { TreeProps } from '../tree/Tree.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export interface DialogSelectTreeProps
+  extends Omit<TreeProps, 'type' | 'filter'> {
+  fetchTree?: (
+    type: 'group' | 'category',
+    params?: QueryParams,
+  ) => Promise<ShortFetchResponse<TreeNode> | undefined>;
+  params?: QueryParams;
+  visible?: boolean;
+  type?: 'group' | 'category';
+  /**
+   * Specify wether the all tree node should be auto checked once it rendered.
+   * @default false
+   */
+  autoSelectAll?: boolean;
+  header?: string;
+  subHeader?: string;
+  selectionMode?: 'single' | 'checkbox';
+  /**
+   * Current behavior is preventing select if there is no node selected.
+   *
+   * @default true
+   */
+  allowEmptySelection?: boolean;
+  /**
+   * The previously selected tree key to be displayed again.
+   */
+  keys?: number[];
+  /**
+   * The lists to be displayed in the dialog.
+   */
+  lists?: (string | object)[];
+  /**
+   * The label of the list if your list item is an object.
+   * Choose a property from the item to be displayed on the list.
+   */
+  listLabel?: string;
+  /**
+   * Disable node 'All' selection
+   */
+  disableNodeAll?: boolean;
+  /**
+   * @deprecated
+   */
+  exactDisableKey?: number;
+  /**
+   * 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[];
+  /**
+   * 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[];
+  /**
+   * Render hidden dialog to trigger fetch tree
+   */
+  hidden?: boolean;
+
+  propagateSelection?: boolean;
+}
+
+export type TreeSelectPayload = {
+  keys: TreeSelectionKeys | undefined;
+  selectedNodes: TreeNode[] | undefined;
+  singleNode: TreeNode | undefined;
+};
+
+export type DialogSelectTreeEmits = {
+  select: [keys?: TreeSelectPayload];
+  hide: [];
+};
+
+export interface DialogSelectTreeSlots {
+  header: Slot<{
+    dialogHeader: string;
+    subHeader?: string;
+    lists?: (string | object)[];
+    listLabel?: string;
+    isLoading: boolean;
+    filter: string;
+    updateFilter: (newFilter?: string) => void; // Hooks to update internal state filter
+  }>;
+
+  /**
+   * Slot to customize tree node item
+   */
+  treenode: Slot<{ node: TreeNode; checked: boolean; disabled: boolean }>;
+
+  footer: Slot;
+}
+
+/**
+ * **TSVue v2 - DialogSelectTree**
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group components
+ */
+declare class DialogSelectTree extends ClassComponent<
+  DialogSelectTreeProps,
+  DialogSelectTreeSlots,
+  DialogSelectTreeEmits
+> {
+  treeComponent: TreeInstance;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    DialogSelectTree: GlobalComponentConstructor<DialogSelectTree>;
+  }
+}
+
+export default DialogSelectTree;

package/components/dialogselectuser/DialogSelectUser.vue.d.ts

@@ -0,0 +1,102 @@
+import { FetchListResponse } from '@fewangsit/workspace-api-services/src/types/fetchResponse.type';
+import { FetchUserRoleOptionResponse } from '@tagsamurai/fats-api-services/src/dto/role.dto';
+import { User } from '@tagsamurai/fats-api-services/src/types/user.type';
+
+import { QueryParams } from '../../components/datatable/DataTable.vue.d';
+import { ClassComponent } from '../../components/ts-helpers';
+
+export type EmitSelectionValue = {
+  checkbox: User[];
+  single: User;
+};
+
+export type SelectionType = 'single' | 'checkbox';
+
+/**
+ * Props for DialogSelectUser component
+ */
+export interface DialogSelectUserProps {
+  /**
+   * The header of the dialog.
+   *
+   * @defaultValue "Select User"
+   */
+  header?: string;
+
+  /**
+   * The description of the table.
+   *
+   * @defaultValue "Select user"
+   */
+  description?: string;
+
+  /**
+   * Table's selection type
+   */
+  selectionType: SelectionType;
+
+  /**
+   * Specifies the visibility of the dialog.
+   * @defaultValue false
+   */
+  visible?: boolean | undefined;
+
+  /**
+   * List that will be show above the table
+   * @defaultValue undefined
+   */
+  list?: string[];
+
+  /**
+   * Set custom button select label
+   */
+  selectButtonLabel?: string;
+
+  /**
+   * The function to fetch data on DataTable mounted and on queryParams dependencies updated.
+   *
+   * @param params this is required
+   */
+  fetchFunction?: (
+    params: QueryParams,
+  ) => Promise<FetchListResponse | undefined>;
+
+  /**
+   * The function to fetch options on DialogSelectUserFilter.
+   *
+   */
+  fetchOptionFunction?: () => Promise<
+    FetchUserRoleOptionResponse['data'] | undefined
+  >;
+}
+
+/**
+ * Emits for DialogSelectUser component
+ */
+export type DialogSelectUserEmits<T = User> = {
+  /**
+   * Emits when the dialog is closed. Wether from cancel button, close button, or ESC button pressed.
+   */
+  'update:visible': [state: boolean];
+
+  /**
+   * Emits when you done selected user.
+   */
+  'selected': [user: T];
+};
+
+/**
+ * **TSVue - DialogSelectUser**
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group components
+ */
+declare const DialogSelectUser: ClassComponent<
+  DialogSelectUserProps,
+  unknown,
+  DialogSelectUserEmits
+>;
+
+export default DialogSelectUser;

package/components/dialogselectuser/options/columns.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+import { TableColumn } from '../../../components/datatable/DataTable.vue.d';
+export declare const selectUserColumns: () => Ref<TableColumn[]>;

package/components/dialogtransferlog/DialogTransferLog.vue.d.ts

@@ -0,0 +1,16 @@
+import { ClassComponent } from '../../components/ts-helpers.d';
+
+// You need to provide requestIds with Ref<string[]> to enable prev and next buttons
+
+export interface DialogTransferLogProps {
+  id: string;
+  visible?: boolean;
+}
+
+declare class DialogTransferLog extends ClassComponent<
+  DialogTransferLogProps,
+  unknown,
+  unknown
+> {}
+
+export default DialogTransferLog;

package/components/dropdown/Dropdown.vue.d.ts

@@ -0,0 +1,288 @@
+import { Slot } from 'vue';
+
+import { BadgeProps } from '../../components/badge/Badge.vue.d';
+import { WangsIcons } from '../../components/icon/Icon.vue.d';
+
+import { CustomValidation } from '../form/Form.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export type OptionValue = string | number | boolean | Record<string, any>;
+
+export type Option = {
+  label?: string;
+  value?: OptionValue;
+  visible?: boolean;
+  icon?: WangsIcons;
+  [key: string]: any;
+};
+
+/**
+ * Configuration interface for localizing dropdown component placeholders and error messages.
+ */
+export interface DropdownLocaleConfig {
+  /**
+   * Placeholder text for the filter input field.
+   *
+   * @default undefined
+   */
+  filterPlaceholder?: string;
+
+  /**
+   * Placeholder text displayed while the dropdown is loading.
+   *
+   * @example 'Loading...'
+   * @default undefined
+   */
+  loadingPlaceholder?: string;
+
+  /**
+   * Placeholder text for the input field when no selection has been made.
+   *
+   * This text can include a placeholder `{label}` which will be replaced with the value of `props.label`.
+   *
+   * @example 'Select {label}' - If `props.label` is 'Option', the placeholder will be 'Select Option'.
+   * @example 'Select {lowercaseLabel}' - If `props.label` is 'Option', the placeholder will be 'Select option'.
+   * @default undefined
+   */
+  inputPlaceholder?: string;
+
+  /**
+   * Error message displayed when no selection has been made.
+   *
+   * This message can include placeholders:
+   * - `{label}`: Replaced with the value of `props.label`.
+   * - `{formattedLabel}`: Replaced with the value of `props.label` formatted with an appropriate article (a/an).
+   *
+   * @example
+   * // If `props.label` is 'Label', the error message will be:
+   * '{label} must be picked' - 'Label must be picked'
+   *
+   * @example
+   * // If `props.label` is 'user', the error message will be:
+   * 'You must pick {formattedLabel}' - 'You must pick a user'
+   *
+   * @default undefined
+   */
+  emptySelectionErrorMessage?: string;
+}
+
+/**
+ * Dropdown component props
+ */
+export interface DropdownProps {
+  /**
+   * Don't use modelValue with useValidator at the same time.
+   * It may lead unexpected behavior.
+   */
+  modelValue?: OptionValue;
+
+  /**
+   * If you deals with form validation on edit form action, you can set the initial value of the field.
+   */
+  initialValue?: OptionValue;
+
+  /**
+   * The input label. Tell the user what input is this.
+   */
+  label?: string;
+
+  /**
+   * List of options to display.
+   */
+  options?: Option[] | string[] | Record<string, any>;
+
+  /**
+   * Allows `null` to be treated as a valid selectable option in the dropdown.
+   *
+   * When enabled, `null` can be included in the options list and selected by the user.
+   */
+  allowNullOption?: boolean;
+
+  /**
+   * Specify the property name of option to be used as label.
+   *
+   * @default undefined - the label will be sets to the option itself.
+   */
+  optionLabel?: string;
+
+  /**
+   * Specify the property name of option to be used as value.
+   *
+   * @default undefined - the value will be sets to the option itself.
+   */
+  optionValue?: string;
+
+  /**
+   * Define the value style, whether badge or plain text
+   *
+   * @default 'plain'
+   */
+  valueType?: 'badge' | 'plain';
+
+  /**
+   * Bind the badge property to the dropdown value
+   */
+  badgeValueProps?: Omit<BadgeProps, 'label'>;
+
+  /**
+   * Set the input border style
+   *
+   * @default 'default'
+   */
+  inputBorder?: 'none' | 'default';
+
+  /**
+   * A property to uniquely identify an option.
+   */
+  dataKey?: string | undefined;
+
+  /**
+   * Determines if the field uses a validator
+   */
+  useValidator?: boolean;
+
+  /**
+   * Determines if the field is mandatory
+   */
+  mandatory?: boolean;
+
+  /**
+   * Show the text (opsional)
+   *
+   * @default true if mandatory true
+   */
+  showOptionalText?: boolean;
+
+  /**
+   * Set custom validator message.
+   * It is rarely use, this component has handled the validator message.
+   *
+   *
+   * @example: 'This field is required'
+   * @example: { empty: 'This field is required' }
+   */
+  validatorMessage?: string | CustomValidation<'empty'>;
+
+  /**
+   * Wether to format the message
+   *
+   * @default true
+   */
+  formatValidatorMessage?: boolean;
+
+  /**
+   * Set custom invalid state.
+   */
+  invalid?: 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 'dropdown'
+   */
+  fieldName?: string;
+
+  /**
+   * Default text to display when no option is selected.
+   *
+   * @default `Select ${label}`
+   */
+  placeholder?: string;
+
+  /**
+   * Whether the dropdown is in loading state.
+   * @defaultValue false
+   */
+  loading?: boolean;
+
+  /**
+   * Show icon 'info' on the right side of label.
+   * Show information to user about the field on icon hover.
+   */
+  fieldInfo?: string;
+
+  /**
+   * Set disabled state for input dropdown.
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether show the Dropdown option search or not.
+   *
+   * @default true,
+   */
+  filter?: boolean;
+
+  /**
+   * The filter input Placeholder
+   *
+   * @default 'Search'
+   */
+  filterPlaceholder?: string;
+
+  /**
+   * To determine whether dropdown panel width should fit its max content or not
+   *
+   * @default false
+   */
+  panelMaxContent?: boolean;
+}
+
+export interface DropdownSlots {
+  'value': Slot<{ value: string; originalValue: any }>;
+  'option': Slot<{ option: Option }>;
+  'addon-left': Slot;
+  'addon-right': Slot;
+}
+
+/**
+ * Dropdown component emits
+ */
+export type DropdownEmits = {
+  /**
+   * Emits when an option selected.
+   */
+  'update:modelValue': [value: OptionValue | undefined];
+
+  /**
+   * Emits when overlay shown.
+   */
+  'show': [];
+
+  /**
+   * Emits when the Field Info icon is clicked.
+   */
+  'fieldInfoClick': [];
+};
+
+/**
+ * **WangsVue - Dropdown**
+ *
+ * _Dropdown also known as Select, is used to choose an item from a collection of options._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class Dropdown extends ClassComponent<
+  DropdownProps,
+  DropdownSlots,
+  DropdownEmits
+> {
+  /**
+   * Shows the overlay.
+   *
+   * @memberof MultiSelect
+   */
+  showOverlay(): void;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Dropdown: GlobalComponentConstructor<Dropdown>;
+  }
+}
+
+export default Dropdown;