@fewangsit/wangsvue 1.5.196-alpha.0 → 1.5.196-alpha.1

package/components/inputnumber/InputNumber.vue.d.ts

@@ -3,6 +3,23 @@ import { CustomValidation } from '../form/Form.vue.d';
 
 export type InputNumberEvent = number | string | undefined;
 
+export interface InputNumberLocaleConfig {
+  /**
+   * @example 'Tulis {label}' - label can be ommited, and if exist will be replaced with props.label
+   */
+  defaultPlaceholder?: string;
+
+  /**
+   * @example '{label} sudah ada' - label will be replaced with props.label
+   */
+  alreadyExistInvalidText?: string;
+
+  /**
+   * @example '{label} must not be empty' - label will be replaced with props.label
+   */
+  emptyInvalidText?: string;
+}
+
 /**
  * InputNumber component props
  */
@@ -11,6 +28,7 @@ export interface InputNumberProps {
    * Number modelValue of the input.
    */
   modelValue?: number;
+
   /**
    * Sets the initial value of the field.
    * This will only available with option 'useValidator'.
@@ -18,30 +36,36 @@ export interface InputNumberProps {
    * In use case like edit form, you need to display the previous inputted value.
    */
   value?: number;
+
   /**
    * Existing values to be checked with validation 'exist' - check the validatorMessage props
    *
    * - Need to specify the custom validation : { empty: 'Error message when empty' } within props validatorMessage
    */
   existingValues?: number[];
+
   /**
    * The input label. Tell the user what input is this.
    */
   label?: string;
+
   /**
    * Min input number value.
    */
   min?: number;
+
   /**
    * Max input number value.
    */
   max?: number;
+
   /**
    * The maximum input length.
    *
    * @default 16 digit number
    */
   maxDigit?: number;
+
   /**
    * Set the pad start of value.
    *
@@ -49,11 +73,13 @@ export interface InputNumberProps {
    * @default 1
    */
   padStart?: number;
+
   /**
    * Weather the input should be validated with vee-validator or not.
    * If you use this component within form input, you need to set this props as true.
    */
   useValidator?: 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.
@@ -61,53 +87,64 @@ export interface InputNumberProps {
    * @default 'numberInput'
    */
   fieldName?: string;
+
   /**
    * Whether this input field is required or not.
    */
   mandatory?: boolean;
+
   /**
    * Set custom validator message.
    * Will be show if invalid="true"
    */
   validatorMessage?: string | CustomValidation;
+
   /**
    * Show the validator message on error.
    *
    * @default true;
    */
   showValidatorMessage?: boolean;
+
   /**
    * Specify the input placeholder.
    *
    * @default 'Enter {label}' or 'Enter number'
    */
   placeholder?: string;
+
   /**
    * Disabled the input.
    */
   disabled?: boolean;
+
   /**
    * State of invalid input.
    */
   invalid?: boolean;
+
   /**
    * Displays increment/decrement buttons.
    */
   showButtons?: boolean;
+
   /**
    * The width of input.
    */
   size?: 'small' | 'normal' | 'full';
+
   /**
    * Defines the behavior of the component.
    * @defaultValue decimal
    */
   mode?: 'decimal' | 'currency';
+
   /**
    * The currency to use in currency formatting. Possible values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as 'USD' for the US dollar, 'EUR' for the euro, or 'CNY' for the Chinese RMB.
    * There is no default value; if the style is 'currency', the currency property must be provided.
    */
   currency?: string | undefined;
+
   /**
    * The `locale` variable specifies the regional setting or language preference to be used.
    * It is an optional string that can influence date, time, number formatting, and other locale-specific operations.
@@ -115,35 +152,43 @@ export interface InputNumberProps {
    * If not provided, the system may default to a pre-configured or fallback locale.
    */
   locale?: string;
+
   /**
    * Text to display before the value.
    */
   prefix?: string | undefined;
+
   /**
    * Text to display after the value.
    */
   suffix?: string | undefined;
+
   /**
    * The minimal digits of decimal value.
    */
   minFractionDigits?: number;
+
   /**
    * The maximal digits of decimal value.
    */
   maxFractionDigits?: number;
+
   /**
    * Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
    * @defaultValue false
    */
   useGrouping?: boolean;
+
   /**
    * Show information about the field.
    */
   fieldInfo?: string;
+
   /**
    * The filed info tooltip position
    */
   tooltipPos?: 'top' | 'right' | 'bottom' | 'left';
+
   /**
    * Specify the appearance of addon right and left
    * - filled - has background and border
@@ -152,22 +197,32 @@ export interface InputNumberProps {
    * @defaultValue filled
    */
   addonVariant?: 'filled' | 'plain';
+
   /**
    * Class to be bind on addon left component
    */
   addonLeftClass?: any;
+
+  /**
+   * Class to be bind on addon left component
+   */
+  addonRightClass?: any;
+
   /**
    * Class to be bind on input group component
    */
   inputGroupClass?: any;
+
   /**
    * Class to be bind on input number component
    */
   inputNumberClass?: any;
+
   /**
    * Unique id for input number element
    */
   inputId?: string;
+
   /**
    * Set auto Resize Input
    * The input width is counted by the value length
@@ -175,6 +230,7 @@ export interface InputNumberProps {
    * @default false
    */
   autoResize?: boolean;
+
   /**
    * Allow input to have value null or undefined.
    * If it sets to 'false', when the value is empty, it will fall back to min value if exists, zero otherwise
@@ -195,6 +251,7 @@ export type InputNumberEmits = {
    * If the inputed number is above max, return the max. And vice versa.
    */
   'update:modelValue': [payload?: number];
+
   /**
    * If you need to check validation, you can use this events.
    */

package/components/inputphonenumber/InputPhoneNumber.vue.d.ts

@@ -1,5 +1,9 @@
 import { DefineComponent } from 'vue';
 
+export interface InputPhoneNumberLocaleConfig {
+  defaultPlaceholder?: string;
+}
+
 /**
  * InputPhoneNumber component props
  */

package/components/inputrangenumber/InputRangeNumber.vue.d.ts

@@ -1,6 +1,18 @@
 import { DefineComponent } from 'vue';
 import { CustomValidation } from '../form/Form.vue.d';
 
+export interface InputrangeNumberLocaleConfig {
+  /**
+   * Locale configuration for min input placeholder.
+   */
+  minPlaceholder?: string;
+
+  /**
+   * Locale configuration for max input placeholder.
+   */
+  maxPlaceholder?: string;
+}
+
 /**
  * InputRangeNumber component props
  */
@@ -9,55 +21,66 @@ export interface InputRangeNumberProps {
    * Number modelValue of the input.
    */
   modelValue?: number[];
+
   /**
    * Initial Form value.
    */
   value?: number[];
+
   /**
    * The input label. Tell the user what input is this.
    */
   label?: string;
+
   /**
    * Placeholder for both input
    *
    * @default undefined
    */
   placeholder?: string;
+
   /**
    * Specify the min number input placeholder.
    *
-   * @default 'Tulis'
+   * @default - Default value of Locale Config {@link InputrangeNumberLocaleConfig.minPlaceholder}
    */
   minPlaceholder?: string;
+
   /**
    * Specify the max number input placeholder.
    *
-   * @default 'Tulis'
+   * @default - Default value of Locale Config {@link InputrangeNumberLocaleConfig.maxPlaceholder}
    */
   maxPlaceholder?: string;
+
   /**
    * Disabled the input.
    */
   disabled?: boolean;
+
   /**
    * State of invalid input.
    */
   invalid?: boolean;
+
   /**
    * Show the text (opsional)
    *
    * @default true if mandatory true
    */
   showOptionalText?: boolean;
+
   /**
    * Weather the input should be validated with vee-validator or not.
    * If you use this component within form input, you need to set this props as true.
    */
   useValidator?: boolean;
+
   /**
    * Whether this input field is required or not.
    */
   mandatory?: boolean;
+
   /**
    * Set custom validator message.
    * Will be show if invalid="true"

package/components/inputtext/InputText.vue.d.ts

@@ -65,18 +65,22 @@ export interface InputTextPassThroughMethodOptions<T = any> {
    * Defines instance.
    */
   instance: any;
+
   /**
    * Defines valid properties.
    */
   props: InputTextProps;
+
   /**
    * Defines current options.
    */
   context: InputTextContext;
+
   /**
    * Defines parent instance.
    */
   parent: T;
+
   /**
    * Defines passthrough(pt) options in global config.
    */
@@ -92,6 +96,7 @@ export interface InputTextPassThroughOptions<T = any> {
    * Used to pass attributes to the root's DOM element.
    */
   root?: InputTextPassThroughOptionType<T>;
+
   /**
    * Used to manage all lifecycle hooks.
    * @see {@link BaseComponent.ComponentHooks}
@@ -115,6 +120,7 @@ export interface InputTextContext {
    * @defaultValue false
    */
   filled: boolean;
+
   /**
    * Current disabled state of the component as a boolean.
    * @defaultValue false
@@ -127,10 +133,19 @@ export interface InputTextContext {
  */
 export interface InputTextProps extends /* @vue-ignore */ InputHTMLAttributes {
   allowedCharacters?: RegExp;
+
+  /**
+   * Determine whether inputted text should be automatically converted to uppercase or not.
+   *
+   * @default false
+   */
+  autoUppercase?: boolean;
+
   /**
    * String modelValue of the input.
    */
   modelValue?: Nullable<string>;
+
   /**
    * Sets the initial value of the field.
    * This will only available with option 'useValidator'.
@@ -138,12 +153,14 @@ export interface InputTextProps extends /* @vue-ignore */ InputHTMLAttributes {
    * In usecase like edit form, you need to display the previous inputted value.
    */
   value?: string;
+
   /**
    * Exisitng values to be checkeed with validation 'exist' - check the validatorMessage props
    *
    * - Need to specify the custom validation : { empty: 'Error message when empty' } within props validatorMessage
    */
   existingValues?: string[];
+
   /**
    * The maximun character length allowed.
    *
@@ -153,15 +170,18 @@ export interface InputTextProps extends /* @vue-ignore */ InputHTMLAttributes {
    * @default 120 - for InputUrl
    */
   maxLength?: number;
+
   /**
    * The input label. Tell the user what input is this.
    */
   label?: string;
+
   /**
    * Wether the input should be validated with vee-validator or not.
    * If you use this component within form input, you need to set this props as true.
    */
   useValidator?: 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.
@@ -169,67 +189,98 @@ export interface InputTextProps extends /* @vue-ignore */ InputHTMLAttributes {
    * @default 'textInput'
    */
   fieldName?: string;
+
   /**
    * Wether this input field is required or not.
    */
   mandatory?: boolean;
+
   /**
    * Invalid input state.
    */
   invalid?: boolean;
+
   /**
    * Set manual invalid input container state.
+   *
+   * @todo: review the usage of this props
    */
   manualInvalidContainer?: boolean;
+
   /**
    * Set custom validator message.
-   * Will be show if invalid="true"
+   * Will be show if invalid="true" or in some conditions. {@link Condition}
+   *
+   * @example: 'This field is required'
+   * @example: { empty: 'This field is required', invalidFormat: 'Email format incorrect' }
    */
-  validatorMessage?: string | CustomValidation;
+  validatorMessage?:
+    | string
+    | CustomValidation<'empty' | 'exceed' | 'invalidFormat' | 'exist'>;
+
   /**
    * Classes for validator message in input field.
    */
   validatorMessageClass?: string;
+
   /**
    * Specify the input placeholder.
    *
    * @default 'Enter {label}' or 'Enter {type}'
    */
   placeholder?: string;
+
   /**
    * Specify the validation type. Wether 'email' or 'text' validation.
    */
   type?: 'email' | 'text' | 'url' | 'initialname' | 'repositoryname';
+
   /**
    * Disabled the input.
    */
   disabled?: boolean;
+
   /**
    * Show information to user about the field.
    */
   fieldInfo?: string;
+
   /**
    * Specify classes for input.
    */
   inputClass?: string;
+
   /**
    * Specify classes for input container.
    */
   inputContainerClass?: string;
+
   /**
    * Specify classes for label.
    */
   labelClass?: string;
+
   /**
    * Auto blur while input value has reached the max length.
+   *
+   * @deprecated This will be removed in the next major update. Use {@link preventInputOnMaxLength} instead.
    */
   blurOnReachMaxLength?: boolean;
+
+  /**
+   * Prevent input once the max length is reached, allowing only backspace.
+   *
+   * @default false
+   */
+  preventInputOnMaxLength?: boolean;
+
   /**
    * Validate the input on blur event.
    *
    * @default false - on input event
    */
   validateOnBlur?: boolean;
+
   /**
    * For Input URL, whether validate the protocol http/https
    *
@@ -243,6 +294,17 @@ export interface InputTextProps extends /* @vue-ignore */ InputHTMLAttributes {
    * @default true
    */
   allowSpecialCharacters?: boolean;
+
+  /**
+   * Wether the input should be wrapped with InputGroup Component or not.
+   * Currently used for InputPhoneNumber.
+   */
+  useInputGroup?: boolean;
+
+  /**
+   * Unique id for input number element
+   */
+  inputId?: string;
 }
 
 /**

package/components/multiselect/MultiSelect.vue.d.ts

@@ -1,55 +1,72 @@
+import { DropdownLocaleConfig } from '../dropdown/Dropdown.vue.d';
+import { CustomValidation } from '../form/Form.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 import { MultiSelectOption, OptionValue } from 'lib/types/options.type';
 
+export type MultiSelectLocaleConfig = DropdownLocaleConfig & {};
+
 /**
  * MultiSelect component props
  */
 export interface MultiSelectProps {
   modelValue?: OptionValue[];
+
   /**
    * If you deals with form validation on edit form action, you can set the initial value of the field.
    */
   initialValue?: OptionValue[];
+
   /**
    * The field label. Tell the user what field input is this.
    */
   label?: string;
+
   /**
    * List of options to display.
    */
   options?: MultiSelectOption[] | string[];
+
   /**
    * 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;
+
   /**
    * 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;
+  validatorMessage?: string | CustomValidation<'empty'>;
+
   /**
    * 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.
@@ -57,59 +74,62 @@ export interface MultiSelectProps {
    * @default 'multiSelect'
    */
   fieldName?: string;
+
   /**
    * Default text to display when no option is selected.
    *
    * @default `Select ${label}`
    */
   placeholder?: string;
+
   /**
    * Whether the MultiSelect 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;
+
   /**
    * Hide the input and controls the overlay state from parent component.
    */
   controls?: boolean;
+
   /**
    * Disabled state.
    */
   disabled?: boolean;
+
   /**
    * Wether show the Dropdown option search or not.
    *
    * @default true,
    */
   filter?: boolean;
+
   /**
    * The filter input Placeholder
    *
-   * @default 'Search'
+   * @default 'Search' from Global Locale Config
    */
   filterPlaceholder?: string;
+
   /**
    * Defines how the selected items are displayed.
    *
    * @default 'chip'
    */
   display?: 'comma' | 'chip';
-  /**
-   * Defines the placeholder (label in input) as medium font.
-   * Used in Preset?.
-   *
-   * @default false
-   */
-  fontMediumPlaceholder?: boolean;
+
   /**
    * Label to display after exceeding max selected labels.
    */
   selectedItemsLabel?: string;
+
   /**
    * Decides how many selected item labels to show at most.
    */
@@ -124,10 +144,12 @@ export type MultiSelectEmits = {
    * Emits when an option selected.
    */
   'update:modelValue': [value: OptionValue[] | undefined];
+
   /**
    * Emits when overlay shown.
    */
   'show': [];
+
   /**
    * Emits when overlay hidden.
    */
@@ -152,6 +174,7 @@ declare class MultiSelect extends ClassComponent<
    * @memberof MultiSelect
    */
   showOverlay(): void;
+
   /**
    * Hides the overlay.
    *