@fewangsit/wangsvue 1.5.199-alpha.10 → 1.5.199-alpha.2

package/build-entry.d.ts

@@ -3,7 +3,6 @@ export { default as eventBus } from './event-bus';
 export { default as ToastService } from 'primevue/toastservice';
 export * from './utils';
 export { formatCurrency } from './components/inputcurrency/helpers/currency.helper';
-export { formatDateTimeRange } from './components/filtercontainer/helpers/formatDateTimeRange.helper';
 export { default as useLoadingStore } from './components/loading/store/loading.store';
 export { default as Tooltip } from 'primevue/tooltip';
 export { Focus } from './directives';

package/components/calendar/Calendar.vue.d.ts

@@ -1,377 +1,41 @@
-import { TransitionProps } from 'vue';
 import { CustomValidation } from '../form/Form.vue.d';
 import { ClassComponent } from '../ts-helpers';
 
-export interface CalendarLocaleConfig {
-  defaultPlaceholder: 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 'Date', the error message will be:
-   * '{label} must be picked' - 'Date must be picked'
-   *
-   * @example
-   * // If `props.label` is 'Audit Date', the error message will be:
-   * 'You must pick {formattedLabel}' - 'You must pick an Audit date'
-   */
-  emptyInvalidText?: string;
-
-  /**
-   * The cancel button when props.showTime or showButton
-   *
-   * @default 'Cancel'
-   */
-  cancelFooterButtonLabel?: string;
-
-  /**
-   * The apply button when props.showTime or showButton
-   *
-   * @default 'Apply'
-   */
-  applyFooterButtonLabel?: string;
-}
-
-export type CalendarPresetOptionMethodType = (
-  options: Partial<CalendarPresetMethodOptions>,
-) => CalendarPresetAttributes;
-
-/**
- * Defines the possible transition types for Calendar.
- */
-export type CalendarPresetTransitionType =
-  | {
-      transition?: TransitionProps;
-    }
-  | ((options: CalendarPresetMethodOptions) => TransitionProps)
-  | undefined;
-
-/**
- * Options passed to methods for pass-through properties.
- */
-export interface CalendarPresetMethodOptions {
-  instance: any;
-  props: CalendarProps;
-  state: CalendarState;
-  context: Partial<CalendarContext>;
-  attrs: any;
-  parent: any;
-  global: object | undefined;
-}
-
-/**
- * Attributes for Calendar pass-through customization.
- */
-export interface CalendarPresetAttributes {
-  class?: any;
-  style?: any;
-  [key: string]: any;
-}
-
-/**
- * Defines the structure for Calendar pass-through class options.
- * Used in preset.
- */
-export interface CalendarPresetOptions {
-  root?: CalendarPresetOptionMethodType;
-  input?: CalendarPresetOptionMethodType;
-  inputicon?: CalendarPresetAttributes;
-  dropdownbutton?: {
-    root?: CalendarPresetAttributes;
-  };
-  panel?: CalendarPresetOptionMethodType;
-  datepickerMask?: CalendarPresetAttributes;
-  header?: CalendarPresetOptionMethodType;
-  previousbutton?: CalendarPresetOptionMethodType;
-  title?: CalendarPresetOptionMethodType;
-  monthTitle?: CalendarPresetAttributes;
-  yearTitle?: CalendarPresetOptionMethodType;
-  nextbutton?: CalendarPresetOptionMethodType;
-  table?: CalendarPresetAttributes;
-  tableheadercell?: CalendarPresetAttributes;
-  tablebodyrow?: CalendarPresetAttributes;
-  weekheader?: CalendarPresetAttributes;
-  weeknumber?: CalendarPresetAttributes;
-  weekday?: CalendarPresetAttributes;
-  day?: CalendarPresetAttributes;
-  weeklabelcontainer?: CalendarPresetOptionMethodType;
-  daylabel?: CalendarPresetOptionMethodType;
-  monthpicker?: CalendarPresetAttributes;
-  month?: CalendarPresetOptionMethodType;
-  yearpicker?: CalendarPresetAttributes;
-  year?: CalendarPresetOptionMethodType;
-  timepicker?: CalendarPresetAttributes;
-  separatorcontainer?: CalendarPresetAttributes;
-  separator?: CalendarPresetAttributes;
-  hourpicker?: CalendarPresetAttributes;
-  timepickerlabel?: CalendarPresetAttributes;
-  minutepicker?: CalendarPresetAttributes;
-  secondPicker?: CalendarPresetAttributes;
-  incrementbutton?: CalendarPresetAttributes;
-  incrementicon?: CalendarPresetAttributes;
-  decrementbutton?: CalendarPresetAttributes;
-  decrementicon?: CalendarPresetAttributes;
-  container?: CalendarPresetAttributes;
-  groupcontainer?: CalendarPresetAttributes;
-  group?: CalendarPresetAttributes;
-  buttonbar?: CalendarPresetAttributes;
-  todaybutton?: {
-    root?: CalendarPresetAttributes;
-  };
-  clearbutton?: {
-    root?: CalendarPresetAttributes;
-  };
-  transition?: {
-    enterFromClass?: string;
-    enterActiveClass?: string;
-    leaveActiveClass?: string;
-    leaveToClass?: string;
-  };
-}
-
-/**
- * Represents the current state of the Calendar component.
- */
-export interface CalendarState {
-  currentView: CalendarProps['view'];
-}
-
-/**
- * Defines current month options.
- */
-export interface CalendarMonthOptions {
-  /**
-   * Month index.
-   */
-  value: number;
-
-  /**
-   * Selectable state of the month.
-   */
-  selectable: boolean;
-}
-
-/**
- * Defines current year options.
- */
-export interface CalendarYearOptions {
-  /**
-   * Year value.
-   */
-  value: number;
-
-  /**
-   * Selectable state of the year.
-   */
-  selectable: boolean;
-}
-
-export interface CalendarDate {
-  /**
-   * Current date.
-   */
-  day: number;
-
-  /**
-   * Current month state.
-   */
-  month: number;
-
-  /**
-   * Current year state.
-   */
-  year: number;
-
-  /**
-   * Current today state of the calendar's day.
-   */
-  today: boolean;
-
-  /**
-   * Selectable state of the day.
-   */
-  selectable: boolean;
-
-  /**
-   * Wether the day is on other month than currently shown
-   */
-  otherMonth: boolean;
-}
-
-/**
- * Provides contextual information for the Calendar component.
- */
-export interface CalendarContext {
-  /**
-   * Current date.
-   */
-  date: CalendarDate;
-
-  /**
-   * Current today state of the calendar's day.
-   * @defaultValue false
-   */
-  today: boolean;
-
-  /**
-   * Current other month state of the calendar's day.
-   */
-  otherMonth: boolean;
-
-  /**
-   * Current selected state of the calendar's day or month or year.
-   * @defaultValue false
-   */
-  selected: boolean;
-
-  /**
-   * Current date is the first selected on range selection
-   */
-  firstSelected: boolean;
-
-  /**
-   * Current date is the last selected on range selection
-   */
-  lastSelected: boolean;
-
-  /**
-   * Current disabled state of the calendar's day or month or year.
-   * @defaultValue false
-   */
-  disabled: boolean;
-
-  /**
-   * Current month state.
-   */
-  month: CalendarMonthOptions;
-
-  /**
-   * Current month index state.
-   */
-  monthIndex: number;
-
-  /**
-   * Current year state.
-   */
-  year: CalendarYearOptions;
-}
-
 /**
  * Calendar component props
  */
 export interface CalendarProps {
   /**
-   * Bound value of the component.
-   * Supports single or multiple date selection.
-   *
-   * Used with `v-model`.
-   * It should not be used with useValidator. v-model should only be used when the Calendar not used in form
-   * @defaultValue null
+   * Calendar modelValue is date timestamp: 1706423635731
    */
-  modelValue?: Date | Date[] | null;
-
+  modelValue?: number | number[];
   /**
-   * Initial date value for pre-filling forms.
-   * Typically used for editing existing records.
-   *
-   * Accepts epoch timestamps in milliseconds.
-   *
-   * It will only watch for changes once.
+   * To display the initial date value, used in edit form, taht sometime need to display the already inputed date.
    */
   dateValue?: number | number[];
-
-  /**
-   * Epoch time in milliseconds representing the selected date(s).
-   *
-   * Can be used with `v-model:epochTimeMillis` for two way binding.
-   */
-  epochTimeMillis?: number | number[];
-
-  /**
-   * Defines the format in which the field value is handled.
-   * - `'date'` returns a `Date` object.
-   * - `'millis'` returns an epoch timestamp in milliseconds.
-   *
-   * @default millis
-   */
-  valueFormat?: 'date' | 'millis';
-
   /**
    * Display label on top of Date Input.
    */
   label?: string;
-
-  /**
-   * The input placeholder
-   * @default - The value on locale config {@link CalendarLocaleConfig.defaultPlaceholder}
-   */
   placeholder?: string;
   disabled?: boolean;
-
-  /**
-   * Make the calendar states readonly.
-   * If true, calendar will not allow user interaction with it. But user can view currently selected date and time.
-   *
-   * @default false
-   */
-  readonly?: boolean;
-
-  /**
-   * Identifier of the underlying input element.
-   */
-  inputId?: string | undefined;
-
-  /**
-   * Identifier of the wrapper element.
-   */
-  id?: string | undefined;
-
   /**
    * Whether single date or date range model value.
    *
    * @default 'single'
-   * @deprecated use selectionMode
    */
   mode?: 'range' | 'single';
-
-  /**
-   * Whether single date or date range model value.
-   *
-   * @default 'single'
-   */
-  selectionMode?: 'range' | 'single';
-
-  /**
-   * Whether to hide the overlay on date selection when showTime is enabled.
-   * @defaultValue false
-   */
-  hideOnDateTimeSelect?: boolean | undefined;
-
-  /**
-   * Whether to hide the overlay on date selection is completed when selectionMode is range.
-   * @defaultValue true - when showButtons and showTime false
-   * @defaultValue false - when showButtons and showTime true
-   */
-  hideOnRangeSelection?: boolean | undefined;
-
   /**
    * Type of view to display.
    * @defaultValue date
    */
   view?: 'date' | 'month' | 'year' | undefined;
-
   /**
    * Wheter show year picker or not
    *
    * @default true
    */
   showYear?: boolean;
-
   /**
    * Show button Apply and cancel on footer.
    *
@@ -380,166 +44,74 @@ export interface CalendarProps {
    * @default false;
    */
   showButtons?: boolean;
-
   /**
-   * Enable Validator using vee-validate. Combine with Form component that handle form validation.
+   * Enable Validator using vee-validate. Combine with TSForm that handle form validation.
    */
   useValidator?: boolean;
-
   /**
-   * When used as field in From Validation using Form component,
+   * When used as field in From Validation using TSForm,
    * specify the unique field name, match with your needs for API request.
    */
   fieldName?: string;
-
-  /**
-   * Show information to user about the field.
-   */
-  fieldInfo?: string;
-
   /**
    * Whether this field should be filled or not.
    */
   mandatory?: boolean;
-
   /**
    * Show the text (opsional)
    *
    * @default true if mandatory true
    */
   showOptionalText?: 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.
    */
-  validatorMessage?: string | CustomValidation<'empty'>;
-
+  validatorMessage?: string;
   /**
    * Set custom validation message for certain condition
-   *
-   * @deprecated - use validatorMessage {@link validatorMessage}
    */
   customValidation?: CustomValidation;
-
-  /**
-   * Format of the date. Defaults to PrimeVue Locale configuration.
-   */
-  dateFormat?: string | undefined;
-
-  /**
-   * Specifies hour format.
-   * @defaultValue 24
-   */
-  hourFormat?: '12' | '24' | undefined;
-
   /**
    * Defines the calendar to use hour picker.
    */
   showTime?: boolean;
-
-  /**
-   * Separator of time selector.
-   * @defaultValue :
-   */
-  timeSeparator?: string | undefined;
-
-  /**
-   * Hours to change per step.
-   * @defaultValue 1
-   */
-  stepHour?: number | undefined;
-
-  /**
-   * Minutes to change per step.
-   * @defaultValue 1
-   */
-  stepMinute?: number | undefined;
-
   /**
    * Formats the hour picker to 12 hour format.
    * @default true
-   *
-   * @deprecated use {@link hourFormat}
    */
   useTimeFormat?: boolean;
-
   /**
    * The minimum selectable date.
    */
   minDate?: Date | undefined;
-
   /**
    * The maximum selectable date.
    */
   maxDate?: Date | undefined;
-
   /**
    * The maximum selectable year.
    *
    * The full year: 2020
-   * @todo Support number, currently only support 'current'
    */
   maxYear?: 'current' | number | undefined;
-
   /**
    * The maximum selectable months.
    *
    * Number 0-11
-   *
-   * @todo Support number, currently only support 'current'
    */
   maxMonth?: 'current' | number | undefined;
 }
 
-/**
- * Custom Calendar month change event.
- * @see {@link CalendarEmits.monthChange}
- */
-export interface CalendarMonthChangeEvent {
-  /**
-   * New month.
-   */
-  month: number;
-
-  /**
-   * New year.
-   */
-  year: number;
-}
-
-/**
- * Custom Calendar year change event.
- * @see {@link CalendarEmits.yearChange}
- */
-export interface CalendarYearChangeEvent {
-  /**
-   * New month.
-   */
-  month: number;
-
-  /**
-   * New year.
-   */
-  year: number;
-}
-
 /**
  * Calendar component emits
  */
 export type CalendarEmits = {
-  'update:modelValue': [
-    date: Date | Array<Date> | Array<Date | null> | undefined | null,
-  ];
-  'update:epochTimeMillis': [millis?: number | number[]];
-  'monthChange': [event: CalendarMonthChangeEvent];
-  'yearChange': [event: CalendarYearChangeEvent];
-  'dateSelect': [date: Date | Date[]];
+  'update:modelValue': [date?: number | number[]];
 };
 
 /**

package/components/checkbox/Checkbox.vue.d.ts

@@ -11,6 +11,7 @@ import { PassThroughOptions } from '../passthrough';
 import {
   ClassComponent,
   GlobalComponentConstructor,
+  Nullable,
   PassThrough,
 } from '../ts-helpers';
 
@@ -99,6 +100,11 @@ export interface CheckboxState {
   [key: string]: any;
 }
 
+export type CheckboxModelValue =
+  | Nullable<boolean>
+  | Record<string, any>
+  | Record<string, any>[];
+
 /**
  * Defines valid properties in Checkbox component.
  */
@@ -109,10 +115,8 @@ export interface CheckboxProps {
   value?: any;
   /**
    * Value binding of the checkbox.
-   *
-   * The value is vary depends on the {@link trueValue}, {@link falseValue}, {@link binary}
    */
-  modelValue?: any;
+  modelValue?: CheckboxModelValue;
   /**
    * The checkbox label.
    */
@@ -285,7 +289,7 @@ export type CheckboxEmits = {
    * Emitted when the value changes.
    * @param {*} value - New value.
    */
-  'update:modelValue': [value: any];
+  'update:modelValue': [value: CheckboxModelValue];
   /**
    * Callback to invoke on value change.
    * @param {Event} event - Browser event.

package/components/dialogform/DialogForm.vue.d.ts

@@ -1,6 +1,6 @@
 import { GenericObject } from 'vee-validate';
 import { Slot } from 'vue';
-import FormInstance, { FormPayload, FormProps } from '../form/Form.vue.d';
+import { FormPayload, FormProps } from '../form/Form.vue.d';
 import { WangsIcons } from '../icon/Icon.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
@@ -313,7 +313,7 @@ declare class DialogForm extends ClassComponent<
   /**
    * The ref of form element.
    */
-  form: FormInstance;
+  form: HTMLFormElement;
 }
 
 declare module '@vue/runtime-core' {

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

@@ -5,7 +5,6 @@ import { QueryParams } from '../datatable/DataTable.vue.d';
 import { DropdownProps } from '../dropdown/Dropdown.vue.d';
 import { InputRangeNumberProps } from '../inputrangenumber/InputRangeNumber.vue.d';
 import { MultiSelectProps } from '../multiselect/MultiSelect.vue.d';
-import { ButtonSelectTreeProps } from '../buttonselecttree/ButtonSelectTree.vue.d';
 
 // More specific filter field types
 export interface MultiSelectFilterField extends MultiSelectProps {
@@ -35,30 +34,12 @@ export interface RangeNumberFilterField extends InputRangeNumberProps {
   tooltip?: string;
 }
 
-export interface ButtonSelectTreeFilterField
-  extends Omit<ButtonSelectTreeProps, 'type' | 'label' | 'fieldLabel'> {
-  type: 'group' | 'category';
-  field: string; // The name of the field this filter applies to
-  /**
-   * The field label.
-   */
-  label?: string;
-  /**
-   * The button label.
-   * @default to Select Group|Category
-   */
-  buttonLabel?: string;
-}
-
 export interface CalendarFilterField extends CalendarProps {
   type: 'calendar';
   field: string;
 }
 
-export type AdditionalFilterField = ButtonSelectTreeFilterField;
-
 export type FilterField =
-  | AdditionalFilterField
   | MultiSelectFilterField
   | DropdownFilterField
   | RangeNumberFilterField
@@ -105,11 +86,6 @@ export type FilterContainerSlots = {
    * @deprecated Please use props.fields instead
    */
   default: Slot;
-
-  /**
-   * Additional template for field.
-   */
-  field: Slot<{ field: AdditionalFilterField }>;
 };
 
 export type FilterContainerEmits = {

package/components/form/Form.vue.d.ts

@@ -1,5 +1,6 @@
 import { FieldContext, FieldState, GenericObject } from 'vee-validate';
 import { Ref, Slot } from 'vue';
+import { CheckboxModelValue } from '../checkbox/Checkbox.vue.d';
 import {
   ClassComponent,
   GlobalComponentConstructor,
@@ -200,7 +201,7 @@ declare class Form extends ClassComponent<FormProps, FormSlots, FormEmits> {
   /**
    * Whether to keep the dialog remains visible or not after submit.
    */
-  stayAfterSubmit: boolean;
+  stayAfterSubmit: CheckboxModelValue;
 
   /**
    * Exposed function to clears the form fields.

package/components/image/Image.vue.d.ts

@@ -260,25 +260,6 @@ export interface ImageProps {
    * @defaultValue false
    */
   unstyled?: boolean;
-
-  /**
-   * Get image url for specifics project from its server.
-   * @returns The full URL of the image from the server.
-   * @param path - the Image path from API Response JSON
-   * @param width - the image width in pixels
-   * @param height - the image height in pixels
-   */
-  getImageURL?: (
-    path?: string | null,
-    width?: number,
-    height?: number,
-  ) => string | undefined;
-
-  /**
-   * The placeholder to be shown when the image failed to load, or the src is not provided.
-   * It should be preserved by project configuration.
-   */
-  placeholder?: string | undefined;
 }
 
 /**