tsv2-library 1.0.65 → 1.1.0-dev-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tsv2-library",
   "author": "fixedassetv2-fe",
-  "version": "1.0.65",
+  "version": "1.1.0-dev-alpha.0",
   "license": "ISC",
   "homepage": "https://github.com/fixedassetv2-fe/tsv2-library#readme",
   "repository": {
@@ -25,6 +25,7 @@
   "scripts": {
     "dev": "vite",
     "build": "rimraf dist && vue-tsc && vite build && sh ./src/scripts/postbuild.sh",
+    "build:dev-alpha": "npm run build && npm link && npm publish --tag dev-alpha",
     "build:dev": "npm run build && npm link && npm publish --tag alpha",
     "build:stage": "npm run build && npm link && npm publish --tag beta",
     "build:prod": "npm run build && npm link && npm publish",
@@ -44,7 +45,7 @@
     "@types/google.maps": "^3.58.1",
     "@types/lodash": "^4.17.7",
     "@vueuse/core": "^10.7.2",
-    "axios": "^1.3.4",
+    "axios": "1.14.0",
     "base64toblob": "^0.0.2",
     "debounce": "^2.1.0",
     "idb": "^8.0.0",
@@ -145,4 +146,4 @@
     }
   },
   "types": "./dist/main.d.ts"
-}
+}

package/src/components/v2/Animation/Animation.vue.d.ts

@@ -7,7 +7,7 @@ export interface AnimationDefaultConfig {
 }
 
 export interface AnimationProps {
-  animation: 'loading-table-fa';
+  animation: 'loading-table-fa' | 'no-data-fa';
   /**
    * @default true
    */

package/src/components/v2/AssetTable/AssetFilters.vue.d.ts

@@ -0,0 +1,70 @@
+import { DefineComponent } from 'vue';
+import { FilterField } from '@/types/filterField.type';
+import { QueryParams } from '../DataTable/DataTable.vue.d';
+
+export type AssetFilterFields =
+  | 'name'
+  | 'assetValue'
+  | 'category'
+  | 'brand'
+  | 'model'
+  | 'tagType'
+  | 'group'
+  | 'maintenanceAuditStatus'
+  | 'isTransactionable'
+  | 'measurement'
+  | 'lastScannedAt'
+  | 'warrantyStatus'
+  | 'customField';
+
+export interface AssetFilterQuery extends QueryParams {
+  name?: string[];
+  brand?: string[];
+  model?: string[];
+  tagType?: string[];
+  maintenanceAuditStatus?: string[];
+  isTransactionable?: boolean[];
+  audit?: string[];
+  maintenance?: string[];
+  measurement?: string[];
+  warrantyStatus?: string[];
+  category?: string[];
+  group?: string[];
+  lastScannedAt?: number[];
+  linkedAssetCount?: number[];
+}
+
+export interface AssetFilterProps {
+  /**
+   * The filter object.
+   */
+  filter: AssetFilterQuery;
+  /*
+   * The columns set as visible by the user. Used to determine which filters to show.
+   */
+  visibleColumns: Record<string, boolean> | undefined;
+  /*
+   * The name of the table attached to the filter.
+   */
+  tableName: string;
+  fetchOptions: FilterField<QueryParams>['fetchOptionFn'];
+  /*
+   * The list of filter fields to show.
+   */
+  showFields?: AssetFilterFields[];
+  /*
+   * The list of filter fields to hide. This has a higher priority than `showFields`.
+   */
+  hideFields?: AssetFilterFields[];
+}
+
+export type AssetFilterEmits = {
+  /*
+   * Used to update the filter container's key.
+   */
+  updateFields: [];
+};
+
+declare const AssetFilters: DefineComponent<AssetFilterProps, AssetFilterEmits>;
+
+export default AssetFilters;

package/src/components/v2/Calendar/Calendar.vue.d.ts

@@ -22,6 +22,12 @@ export interface TSCalendarProps {
    * Whether single date or date range model value.
    */
   mode?: 'range' | 'single';
+  /**
+   * In range selection mode, if the same date is chosen twice,
+   * set whether it should be shown as separate dates ("date 1" - "date 1") or not ("date 1").
+   * @default true
+   */
+  separateSameDate?: boolean;
   /**
    * Set the end date to 23.59.59
    *
@@ -71,6 +77,31 @@ export interface TSCalendarProps {
    * By default each field has preserved with its validator message, you don't need to worrying about the message.
    */
   validatorMessage?: string;
+  /**
+   * Validate value while the overlay is shown. This function is run on clicking the overlay's Apply button.
+   *
+   * @returns {boolean} - Return true if the value is valid.
+   */
+  overlayValidatorFunction?: (
+    value?: number | number[],
+  ) => Promise<boolean> | boolean;
+  /**
+   * Set the custom validator message to show on the overlay.
+   * Used alongside overlayValidatorFunction.
+   */
+  overlayValidatorMessage?: string;
+  /**
+   * Condition to show the date picker message.
+   *
+   * @returns {boolean} - Return true if the value is valid.
+   */
+  datePickerMessageFunction?: (
+    value?: number | number[],
+  ) => Promise<boolean> | boolean;
+  /**
+   * Set a message to be shown below the date picker.
+   */
+  datePickerMessage?: string;
   /**
    * Set custom validation message for certain condition
    */

package/src/components/v2/CustomColumn/CustomColumn.vue.d.ts

@@ -6,7 +6,7 @@ export type DragableColumn = TableColumn & { order?: number };
 export interface DataTableColumnConfig {
   field: string;
   pinned: boolean;
-  width: number | string;
+  width?: number | string;
   visible: boolean;
 }
 

package/src/components/v2/DataTable/DataTable.vue.d.ts

@@ -302,6 +302,11 @@ export interface DataTableSelectAllChangeEvent {
 }
 
 export interface TSDataTableProps {
+  /**
+   * Index of the first row to be displayed.
+   * @defaultValue 0
+   */
+  first?: number;
   /**
    * Optional property to set a unique name for the table. This name will be used as part of the unique table ID.
    *
@@ -553,6 +558,16 @@ export type TSDataTableEmits = {
    * This will update the `selectedData` value whenever a row is selected or deselected.
    */
   'update:selectedData': [datas: Data[]];
+  /**
+   * Emitted when the rows changes.
+   * @param {number} value - New value.
+   */
+  'update:rows': [value: number];
+  /**
+   * Emitted when the first changes.
+   * @param {number} value - New value.
+   */
+  'update:first': [value: number];
 };
 
 declare class DataTable extends ClassComponent<

package/src/components/v2/DatePicker/DatePicker.vue.d.ts

@@ -38,6 +38,27 @@ export interface TSDatePickerProps {
    * By default each field has preserved with its validator message, you don't need to worrying about the message.
    */
   errorMessage?: { empty: string };
+  /**
+   * Whether multiple date or date range model value.
+   *
+   * @default 'range'
+   */
+  selectionMode?: 'range' | 'multiple';
+  /**
+   * Validate value while the overlay is shown. This function is run on clicking the dates in the overlay.
+   *
+   * @returns {boolean} - Return true if the value is valid.
+   */
+  overlayValidatorFunction?: (value?: number[]) => Promise<boolean> | boolean;
+  /**
+   * Set the custom validator message to show on the overlay.
+   * Used alongside overlayValidatorFunction.
+   */
+  overlayValidatorMessage?: string;
+  /**
+   * Set a message to be shown on top of the overlay.
+   */
+  overlayMessage?: string;
 }
 
 /**
@@ -45,6 +66,8 @@ export interface TSDatePickerProps {
  */
 export type TSDatePickerEmits = {
   'update:modelValue': [days?: number[]];
+  // Emits when overlay is hidden
+  'hide': [];
 };
 
 /**

package/src/components/v2/DayOfYearPicker/DayOfYearPicker.vue.d.ts

@@ -0,0 +1,97 @@
+import { DefineComponent } from 'vue';
+
+/**
+ * TSDayOfYearPicker component props
+ */
+export interface TSDayOfYearPickerProps {
+  /**
+   * TSDayOfYearPicker modelValue is array of timestamps
+   */
+  modelValue?: number[];
+  /**
+   * TSDayOfYearPicker initialValue is array of timestamps
+   */
+  initialValue?: number[];
+  /**
+   * Array of timestamps representing dates that cannot be selected
+   * @default []
+   */
+  disabledDates?: number[];
+  /**
+   * Display label on top of Date Input.
+   */
+  label?: string;
+  /**
+   * Enable Validator using vee-validate. Combine with TSForm that handle form validation.
+   */
+  useValidator?: boolean;
+  /**
+   * When used as field in From Validation using TSForm,
+   * specify the unique field name, match with your needs for API request.
+   */
+  fieldName?: string;
+  /**
+   * Whether this field should be filled or not.
+   */
+  mandatory?: boolean;
+  /**
+   * Sets the invalid state.
+   */
+  invalid?: boolean;
+  /**
+   * Set the custom validator message.
+   * By default each field has preserved with its validator message, you don't need to worrying about the message.
+   */
+  errorMessage?: { empty: string };
+  /**
+   * Year to display (defaults to 2024 due to leap year requirement)
+   */
+  year?: number;
+  /**
+   * Validate value while the overlay is shown. This function is run on clicking the dates in the overlay.
+   *
+   * @returns {boolean} - Return true if the value is valid.
+   */
+  overlayValidatorFunction?: (value?: number[]) => Promise<boolean> | boolean;
+  /**
+   * Set the custom validator message to show on the overlay.
+   * Used alongside overlayValidatorFunction.
+   */
+  overlayValidatorMessage?: string;
+  /**
+   * Set a message to be shown on top of the overlay.
+   */
+  overlayMessage?: string;
+  /**
+   * In range selection mode, if the same date is chosen twice,
+   * set whether it should be shown as separate dates ("date 1" - "date 1") or not ("date 1").
+   * @default true
+   */
+  separateSameDate?: boolean;
+}
+
+/**
+ * TSDayOfYearPicker component emits
+ */
+export type TSDayOfYearPickerEmits = {
+  'update:modelValue': [days?: number[]];
+  // Emits when overlay is hidden
+  'hide': [];
+};
+
+/**
+ * **TSVue - TSDayOfYearPicker**
+ *
+ * _Handle input day with form validation._
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group form
+ */
+declare const TSDayOfYearPicker: DefineComponent<
+  TSDayOfYearPickerProps,
+  TSDayOfYearPickerEmits
+>;
+
+export default TSDayOfYearPicker;

package/src/components/v2/DayPicker/DayPicker.vue.d.ts

@@ -38,6 +38,27 @@ export interface TSDayPickerProps {
    * By default each field has preserved with its validator message, you don't need to worrying about the message.
    */
   errorMessage?: { empty: string };
+  /**
+   * Whether multiple date or date range model value.
+   *
+   * @default 'range'
+   */
+  selectionMode?: 'range' | 'multiple';
+  /**
+   * Validate value while the overlay is shown. This function is run on clicking the days in the overlay.
+   *
+   * @returns {boolean} - Return true if the value is valid.
+   */
+  overlayValidatorFunction?: (value?: number[]) => Promise<boolean> | boolean;
+  /**
+   * Set the custom validator message to show on the overlay.
+   * Used alongside overlayValidatorFunction.
+   */
+  overlayValidatorMessage?: string;
+  /**
+   * Set a message to be shown on top of the overlay.
+   */
+  overlayMessage?: string;
 }
 
 /**
@@ -45,6 +66,8 @@ export interface TSDayPickerProps {
  */
 export type TSDayPickerEmits = {
   'update:modelValue': [days?: number[]];
+  // Emits when overlay is hidden
+  'hide': [];
 };
 
 /**

package/src/components/v2/DialogSelectAsset/DialogSelectAsset.vue.d.ts

@@ -7,7 +7,7 @@ export interface DialogSelectAssetFilterModels {
   brands?: string[];
   models?: string[];
   tagType?: string[];
-  group?: number[];
+  group?: string[];
 }
 
 export type AssetStatus =

package/src/components/v2/DialogSelectAssetName/DialogSelectAssetName.vue.d.ts

@@ -0,0 +1,75 @@
+import { DefineComponent } from 'vue';
+
+export type DialogSelectAssetNameFilter = {
+  category?: string[];
+};
+
+export type DialogSelectAssetNameFilterQueryParams = Partial<
+  Record<keyof DialogSelectAssetNameFilter, string>
+>;
+
+export type FetchResponse = {
+  data: Data[];
+  totalRecords: number;
+};
+
+export interface AssetName {
+  _id: string;
+  name: string;
+  code: string;
+  aliasCode: string;
+  category: Category;
+  addOn: AddOn;
+  tagType: string;
+  brands: Category[];
+  models: Model[];
+  measurement: string;
+  totalAssets: number;
+  hasPairedAsset: boolean;
+  brandsLength: number;
+  modelsLength: number;
+  depreciationGroupsLength: number;
+  accountCode?: string;
+  updatedAt: string;
+}
+
+export type AssetNamePayload = Pick<AssetName, '_id' | 'name'>;
+
+interface Model {
+  _id: string;
+  name: string;
+  brand: string;
+  category: string;
+}
+
+interface AddOn {
+  maintenance: boolean;
+  repairTicketing: boolean;
+  tracking: boolean;
+  assetControl: boolean;
+  audit: boolean;
+  map: boolean;
+}
+
+interface Category {
+  _id: string;
+  name: string;
+}
+
+export interface DialogSelectAssetNameProps {
+  visible?: boolean;
+  selectedAssetNames?: AssetNamePayload[];
+  // This prop is used only for CustomField
+  customFieldType?: 'General Information' | 'Purchase' | 'Accounting';
+}
+
+export type DialogSelectAssetNameEmit = {
+  select: [payload: AssetNamePayload[]];
+};
+
+declare const DialogSelectAssetName: DefineComponent<
+  DialogSelectAssetNameProps,
+  DialogSelectAssetNameEmit
+>;
+
+export default DialogSelectAssetName;

package/src/components/v2/Dropdown/Dropdown.vue.d.ts

@@ -109,6 +109,7 @@ export interface DropdownProps {
 }
 
 export interface DropdownSlots {
+  'value': Slot<{ value: OptionValue }>;
   'option': Slot<{ option: DropdownOption }>;
   'addon-left': Slot;
   'addon-right': Slot;

package/src/components/v2/Image/Image.vue.d.ts

@@ -260,6 +260,11 @@ export interface ImageProps {
    * @defaultValue false
    */
   unstyled?: boolean;
+  /**
+   * Determines the thumbnail's width and height in pixels.
+   */
+  thumbnailWidth?: number;
+  thumbnailHeight?: number;
 }
 
 /**

package/src/components/v2/InputNumber/InputNumber.vue.d.ts

@@ -69,6 +69,12 @@ export interface InputNumberProps {
    * @default true;
    */
   showValidatorMessage?: boolean;
+  /**
+   * Wether to format the message
+   *
+   * @default true
+   */
+  formatValidatorMessage?: boolean;
   /**
    * Specify the input placeholder.
    *

package/src/components/v2/InputRangeNumber/InputRangeNumber.vue.d.ts

@@ -7,7 +7,7 @@ export interface InputRangeNumberProps {
   /**
    * Number modelValue of the input.
    */
-  modelValue?: number[];
+  modelValue?: (number | null)[];
   /**
    * The input label. Tell the user what input is this.
    */
@@ -43,7 +43,7 @@ export type InputRangeNumberEmits = {
   /**
    * Emits when the both input already filled.
    */
-  'update:modelValue': [payload?: number[]];
+  'update:modelValue': [payload?: (number | null)[]];
 };
 
 /**

package/src/components/v2/InputText/InputText.vue.d.ts

@@ -66,6 +66,12 @@ export interface InputTextProps {
    * Classes for validator message in input field.
    */
   validatorMessageClass?: string;
+  /**
+   * Wether to format the message
+   *
+   * @default true
+   */
+  formatValidatorMessage?: boolean;
   /**
    * Specify the input placeholder.
    *

package/src/components/v2/MultiSelect/MultiSelect.vue.d.ts

@@ -108,6 +108,10 @@ export interface MultiSelectProps {
    * Decides how many selected item labels to show at most.
    */
   maxSelectedLabels?: number;
+  /**
+   * Set custom invalid state.
+   */
+  invalid?: boolean;
 }
 
 /**

package/src/components/v2/Textarea/Textarea.vue.d.ts

@@ -102,6 +102,10 @@ export interface TextareaProps
    * @default unlimited
    */
   maxLength?: number;
+  /**
+   * Auto blur while input value has reached the max length.
+   */
+  blurOnReachMax?: boolean;
   invalid?: boolean;
   customValidation?: CustomValidation;
   inputClass?: string;
@@ -129,6 +133,7 @@ export type TextareaEmits = {
    */
   'update:modelValue': [value: Nullable<string>];
   'blur': [value?: Nullable<string>];
+  'input': [value?: Nullable<string>];
 };
 
 /**

package/src/module.d.ts

@@ -12,4 +12,7 @@ declare module 'qrcode' {
 interface Window {
   scannerWorker: Worker;
   toastGroups: string[] | undefined;
+  __wdio?: boolean;
+  __e2eMockScanCode__?: string;
+  __e2eMockSerialNumber__?: string;
 }

package/src/presets/datepicker/index.js

@@ -16,7 +16,11 @@ export default {
   },
 
   panelcontent: {
-    class: ['grid grid-cols-7 grid-rows-[repeat(5,max-content)] p-6'],
+    class: 'flex flex-col m-6 gap-2.5 w-[224px]',
+  },
+
+  dayscontainer: {
+    class: ['grid grid-cols-7 grid-rows-[repeat(5,max-content)]'],
   },
 
   date: {
@@ -36,4 +40,12 @@ export default {
       'text-center p-2 cursor-pointer',
     ],
   },
+
+  overlaymessage: {
+    class: 'self-start text-xs font-medium',
+  },
+
+  validatormessage: {
+    class: 'self-start',
+  },
 };

package/src/presets/dayofyearpicker/index.js

@@ -0,0 +1,73 @@
+export default {
+  inputgroup: {
+    class: ['grid grid-cols-[1fr,max-content] !items-center gap-1 px-3 py-1'],
+  },
+
+  inputtext: {
+    class: ['!p-0'],
+  },
+
+  inputtrigger: {
+    class: ['w-4 h-4 shrink-0 !text-general-500'],
+  },
+
+  panel: {
+    class: ['border-none !mt-0 !shadow-panel'],
+  },
+
+  panelcontent: {
+    class: 'flex flex-col m-6 gap-2.5 w-[224px]',
+  },
+
+  dayscontainer: {
+    class: ['grid grid-cols-7 grid-rows-[repeat(5,max-content)]'],
+  },
+
+  header: {
+    class: 'flex items-center justify-between',
+  },
+
+  title: {
+    class: 'text-xs font-medium',
+  },
+
+  previousButton: {
+    class:
+      'relative inline-flex items-center justify-center p-1.5 m-0 text-general-800 dark:text-general-950 border-0 rounded-full bg-transparent hover:bg-general-50 dark:hover:bg-general-300 cursor-pointer overflow-hidden',
+  },
+
+  nextButton: {
+    class:
+      'relative inline-flex items-center justify-center p-1.5 m-0 text-general-800 dark:text-general-950 border-0 rounded-full bg-transparent hover:bg-general-50 dark:hover:bg-general-300 cursor-pointer overflow-hidden',
+  },
+
+  date: {
+    class: [
+      'text-body-medium text-general-800',
+      'bg-white hover:bg-primary-100',
+      'rounded-[20px]',
+      // In range selection
+      '[&[data-in-range="true"]]:bg-primary-200',
+      '[&[data-in-range="true"]]:text-general-800',
+      '[&[data-in-range="true"]]:rounded-[0]',
+
+      // Selected State
+      '[&[aria-selected="true"]]:bg-primary-500',
+      '[&[aria-selected="true"]]:text-white',
+
+      // Disabled State
+      '[&[aria-disabled="true"]]:cursor-default',
+      '[&[aria-disabled="true"]]:opacity-40',
+
+      'text-center p-2 cursor-pointer',
+    ],
+  },
+
+  overlaymessage: {
+    class: 'self-start text-xs font-medium',
+  },
+
+  validatormessage: {
+    class: 'self-start',
+  },
+};

package/src/presets/daypicker/index.js

@@ -16,7 +16,11 @@ export default {
   },
 
   panelcontent: {
-    class: ['grid grid-cols-3 grid-rows-[repeat(3,max-content)] p-6 gap-y-4'],
+    class: 'flex flex-col m-6 gap-2.5 w-[224px]',
+  },
+
+  dayscontainer: {
+    class: ['grid grid-cols-3 grid-rows-[repeat(3,max-content)] gap-y-4'],
   },
 
   day: {
@@ -32,7 +36,15 @@ export default {
       '[&[aria-selected="true"]]:text-white',
       '[&[aria-selected="true"]]:rounded-[20px]',
 
-      'last:col-span-3 text-center p-2 cursor-pointer',
+      'last:col-span-3 text-center py-2 cursor-pointer',
     ],
   },
+
+  overlaymessage: {
+    class: 'self-start text-xs font-medium',
+  },
+
+  validatormessage: {
+    class: 'self-start',
+  },
 };