@fewangsit/wangsvue 1.5.199-alpha.5 → 1.5.199-alpha.7

package/build-entry.d.ts

@@ -3,6 +3,7 @@ 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/BaseCalendar.vue.d.ts

@@ -0,0 +1,50 @@
+import { CalendarProps } from './Calendar.vue.d';
+declare function __VLS_template(): {
+    incrementicon?(_: {}): any;
+    incrementicon?(_: {}): any;
+    decrementicon?(_: {}): any;
+    decrementicon?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<CalendarProps>, {
+    selectionMode: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (date: Date | Date[]) => void;
+    "update:epochTimeMillis": (millis?: number | number[]) => void;
+    monthChange: (event: import('./Calendar.vue.d').CalendarMonthChangeEvent) => void;
+    yearChange: (event: import('./Calendar.vue.d').CalendarYearChangeEvent) => void;
+    dateSelect: (date: Date | Date[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<CalendarProps>, {
+    selectionMode: string;
+}>>> & {
+    "onUpdate:modelValue"?: (date: Date | Date[]) => any;
+    "onUpdate:epochTimeMillis"?: (millis?: number | number[]) => any;
+    onMonthChange?: (event: import('./Calendar.vue.d').CalendarMonthChangeEvent) => any;
+    onYearChange?: (event: import('./Calendar.vue.d').CalendarYearChangeEvent) => any;
+    onDateSelect?: (date: Date | Date[]) => any;
+}, {
+    selectionMode: "range" | "single";
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -1,41 +1,377 @@
+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 {
   /**
-   * Calendar modelValue is date timestamp: 1706423635731
+   * 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
    */
-  modelValue?: number | number[];
+  modelValue?: Date | Date[] | null;
+
   /**
-   * To display the initial date value, used in edit form, taht sometime need to display the already inputed date.
+   * 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.
    */
   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.
    *
@@ -44,74 +380,166 @@ export interface CalendarProps {
    * @default false;
    */
   showButtons?: boolean;
+
   /**
-   * Enable Validator using vee-validate. Combine with TSForm that handle form validation.
+   * Enable Validator using vee-validate. Combine with Form component that handle form validation.
    */
   useValidator?: boolean;
+
   /**
-   * When used as field in From Validation using TSForm,
+   * When used as field in From Validation using Form component,
    * 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;
+  validatorMessage?: string | CustomValidation<'empty'>;
+
   /**
    * 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?: number | number[]];
+  '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[]];
 };
 
 /**

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

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

package/components/editor/CodeSnippetAdapter.vue.d.ts

@@ -31,6 +31,18 @@ declare const _default: import('vue').DefineComponent<{
         type: import('vue').PropType<import('@tiptap/vue-3').NodeViewProps["deleteNode"]>;
         required: true;
     };
+    view: {
+        type: import('vue').PropType<import('@tiptap/vue-3').NodeViewProps["view"]>;
+        required: true;
+    };
+    innerDecorations: {
+        type: import('vue').PropType<import('@tiptap/vue-3').NodeViewProps["innerDecorations"]>;
+        required: true;
+    };
+    HTMLAttributes: {
+        type: import('vue').PropType<import('@tiptap/vue-3').NodeViewProps["HTMLAttributes"]>;
+        required: true;
+    };
 }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     editor: {
         type: import('vue').PropType<import('@tiptap/vue-3').NodeViewProps["editor"]>;
@@ -64,5 +76,17 @@ declare const _default: import('vue').DefineComponent<{
         type: import('vue').PropType<import('@tiptap/vue-3').NodeViewProps["deleteNode"]>;
         required: true;
     };
+    view: {
+        type: import('vue').PropType<import('@tiptap/vue-3').NodeViewProps["view"]>;
+        required: true;
+    };
+    innerDecorations: {
+        type: import('vue').PropType<import('@tiptap/vue-3').NodeViewProps["innerDecorations"]>;
+        required: true;
+    };
+    HTMLAttributes: {
+        type: import('vue').PropType<import('@tiptap/vue-3').NodeViewProps["HTMLAttributes"]>;
+        required: true;
+    };
 }>>, {}, {}>;
 export default _default;